/* Retort · de pagina van de software factory
 *
 * Vorm langs Chef's Kiss: één neutrale pagina met één accent, één radius, één
 * sans in twee gewichten en één mono voor de naam van een idee. De toegepaste
 * regelnummers staan per blok in de comments; docs/software-factory.md noemt ze
 * gebundeld, samen met de regels die bewust niet zijn toegepast.
 *
 * Deze pagina is één weergave (licht). Een donkere variant is een eigen slice;
 * CK-KLR-02 en CK-KLR-28 staan daarom onder "niet toegepast".
 */
:root{
  --papier:#fbfbfa;      /* CK-KLR-05: net-niet-wit, zodat een kaart wit kan zijn */
  --vlak:#f3f4f2;        /* CK-KLR-32: klein element krijgt de grijze vulling */
  --kaart:#ffffff;
  --rand:#e3e4e1;        /* CK-KLR-25, CK-KLR-37: lichte rand, geen zwarte lijn */
  --inkt:#1b1d1c;        /* CK-TYP-04: nooit puur zwart */
  --inkt-zwak:#5b615e;   /* CK-KLR-12: secundair op lagere dekking */
  --accent:#1d4ed8;      /* CK-KLR-04, CK-KLR-19: alleen focus en verwijzingen */
  --accent-donker:#1a3fae;/* CK-KLR-06: hover een stap donkerder */
  --rood:#b3261e;        /* CK-KLR-10: destructief is rood, ook zonder merkkleur */
  --rood-donker:#8f1d17;
  --r:10px;              /* CK-CMP-07: één radius voor alle kleine componenten */
  --tik:44px;            /* CK-CMP-01: tikdoel */
  --tempo:160ms cubic-bezier(.2,.8,.2,1);  /* CK-MOT-05: geen lineaire easing */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--papier);
  color:var(--inkt);
  font-family:var(--sans);
  font-size:1rem;                 /* CK-TYP-03: vier maten op deze pagina */
  font-weight:400;                /* CK-TYP-12: twee gewichten, 400 en 600 */
  line-height:1.5;                /* CK-TYP-11: alinea rond 150% */
  -webkit-font-smoothing:antialiased;
}

.wrap{width:100%;max-width:56rem;margin:0 auto;padding:0 20px}

/* Kop: het merk, de belofte in één regel, en de cijfers van de node.
 * CK-HIE-05 (belangrijkste bovenaan), CK-LND-01/CK-LND-03 (concrete belofte in
 * weinig woorden), CK-LAY-04 (kop en subtekst dicht op elkaar). */
.kop{padding:32px 0 24px}
.merk{display:flex;align-items:center;gap:10px}
.merk svg{width:28px;height:28px;color:var(--accent)}
h1{
  margin:0;
  font-size:1.5rem;               /* CK-TYP-03: niets groter dan 24px op dit scherm */
  font-weight:600;
  letter-spacing:-.02em;          /* CK-TYP-02: grote koppen strakker */
  line-height:1.15;
}
.belofte{margin:8px 0 0;color:var(--inkt-zwak);font-size:.875rem;max-width:34rem}
.merk-rij{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.node{font-size:.875rem;color:var(--inkt-zwak);text-align:right;margin:0}

/* De bovenrand houdt de belangrijkste actie van de pagina: een idee aanvragen.
 * CK-DSH-05 (bovenrand = pagina-acties), CK-UX-11 (begin bij de intentie). */
.aanvraag{
  background:var(--vlak);
  border:1px solid var(--rand);
  border-radius:var(--r);         /* CK-CMP-34: in licht mode een eigen vlak */
  padding:20px 24px 24px;
  margin-top:24px;
}
h2{
  margin:0 0 12px;
  font-size:1rem;                 /* CK-HIE-09: tussenkop vet, niet groot */
  font-weight:600;
}
label{display:block;font-size:.875rem;font-weight:600;margin-bottom:8px}  /* CK-CMP-10 */
.rij{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
input[type=text]{
  flex:1 1 16rem;
  min-height:var(--tik);
  padding:10px 12px;
  font:inherit;
  color:var(--inkt);
  background:var(--kaart);
  border:1px solid #c9ccc6;       /* CK-CMP-81: zachte rand, geen harde lijn */
  border-radius:var(--r);
  transition:border-color var(--tempo),box-shadow var(--tempo);
}
input[type=text]::placeholder{color:#8b917f}
input[type=text]:hover{border-color:#a9aea6}
input[type=text]:focus{
  outline:2px solid var(--accent); /* CK-CMP-46: focus met rand en gloed */
  outline-offset:1px;
  border-color:var(--accent);
  box-shadow:0 0 0 5px rgba(29,78,216,.16);
}
input[type=text][aria-invalid=true]{border-color:var(--rood)}
input[type=text][aria-invalid=true]:focus{outline-color:var(--rood);box-shadow:0 0 0 5px rgba(179,38,30,.16)}

/* Knoppen: CK-CMP-03 (horizontaal 24px, verticaal 12px), CK-CMP-27 (de
 * hoofdactie is donker), CK-MOT-03/CK-MOT-07 (hover, ingedrukt, uit, laden). */
button{
  font:inherit;
  font-weight:600;
  min-height:var(--tik);
  padding:12px 24px;
  border-radius:var(--r);
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color var(--tempo),border-color var(--tempo),color var(--tempo);
}
.knop-primair{background:var(--inkt);color:#fff}
.knop-primair:hover{background:#333735}
.knop-primair:active{background:#0d0f0e}
.knop-primair[disabled]{background:#c9ccc6;color:#f6f7f5;cursor:progress}
.knop-stil{background:transparent;border-color:var(--rand);color:var(--inkt-zwak)}
.knop-stil:hover{border-color:#a9aea6;color:var(--inkt);background:rgba(255,255,255,.7)}
.knop-stil:active{background:var(--vlak)}
.knop-rood{background:var(--rood);color:#fff}
.knop-rood:hover{background:var(--rood-donker)}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.hint{margin:8px 0 0;font-size:.8125rem;color:var(--inkt-zwak)}
.foutmelding{
  margin:8px 0 0;
  font-size:.8125rem;
  font-weight:600;
  color:var(--rood-donker);       /* CK-MOT-03: fout met eigen kleur en melding */
}

/* De lijst: CK-DSH-23 (sobere rijen in één lijst), CK-LAY-01 (tekst links,
 * meta rechts), CK-CMP-33 (scheiding met ruimte en een hairline). */
.lijst{margin-top:32px}           /* CK-LAY-07: 32px tussen blokken */
.lijst-kop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lijst-kop h2{margin:0;font-size:1rem;font-weight:600}
.ruimte{margin:0;font-size:.8125rem;color:var(--inkt-zwak)}
ul{list-style:none;margin:8px 0 0;padding:0}
.idee{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 16px;
  padding:16px 0;
  border-bottom:1px solid var(--rand);
}
.idee:first-child{border-top:1px solid var(--rand)}
.naam{
  font-family:var(--mono);        /* CK-TYP-22: mono voor kleine details als de slug */
  font-size:1rem;
  font-weight:600;
  overflow-wrap:anywhere;
}
.detail{margin:4px 0 0;font-size:.875rem;color:var(--inkt-zwak);max-width:38rem}
.bewijs{margin:8px 0 0;font-size:.8125rem;color:var(--inkt-zwak);font-family:var(--mono)}
.acties{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.knop-opruimen{
  background:transparent;
  border-color:transparent;
  color:var(--inkt-zwak);
  padding:12px 16px;
  font-size:.875rem;
}
.knop-opruimen:hover{color:var(--rood-donker);border-color:var(--rand);background:rgba(255,255,255,.7)}
.knop-opruimen[disabled]{opacity:.5;cursor:progress}

/* Status als chip: CK-DSH-02 (vaste waardensets als chip), CK-KLR-01 (kleur met
 * betekenis), CK-CMP-84/CK-CMP-85 (platter dan een knop, verticale padding de
 * helft van de horizontale), CK-DSH-25 (de kleur moet bij de stand horen). */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:var(--r);
  font-size:.8125rem;
  font-weight:600;
  white-space:nowrap;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.chip[data-stand=aangevraagd],.chip[data-stand=stoppen]{background:#eef0ed;color:#4c524f}
.chip[data-stand=start]{background:#fdf0d8;color:#6d4502}
.chip[data-stand=draait]{background:#e4f2e8;color:#135c33}
.chip[data-stand=fout]{background:#fbe9e7;color:#8f1d17}
.moment{font-size:.8125rem;color:var(--inkt-zwak)}

/* Leeg, laden en mislukt: CK-UX-08 (ontwerp alle staten), CK-UX-09 (de lege
 * staat geeft een volgende stap), CK-MOT-10 (skelet met glans). */
.leeg,.mislukt{
  margin:16px 0 0;
  padding:24px;
  border:1px dashed var(--rand);
  border-radius:var(--r);
  background:var(--kaart);
}
.leeg h3,.mislukt h3{margin:0 0 8px;font-size:1rem;font-weight:600}
.leeg p,.mislukt p{margin:0 0 16px;font-size:.875rem;color:var(--inkt-zwak);max-width:36rem}
.skelet-rij{padding:16px 0;border-bottom:1px solid var(--rand)}
.skelet{
  height:12px;
  border-radius:var(--r);
  background:linear-gradient(90deg,var(--vlak) 0%,#e9ebe7 40%,var(--vlak) 80%);
  background-size:320px 100%;
  animation:glans 1.4s ease-in-out infinite;
}
.skelet.kort{width:34%;margin-top:10px}
@keyframes glans{from{background-position:-160px 0}to{background-position:160px 0}}

/* Bevestigen: CK-CMP-05 (modal voor een blokkerende taak), CK-CMP-39 (vaste
 * volgorde: titel, uitleg, acties onderaan), CK-CMP-12 (alleen de hoofdactie
 * gevuld, en die is hier rood). */
dialog{
  border:1px solid var(--rand);
  border-radius:var(--r);
  padding:24px;
  max-width:26rem;
  color:var(--inkt);
  background:var(--kaart);
}
dialog::backdrop{background:rgba(27,29,28,.4)}
dialog h2{margin:0 0 8px;font-size:1rem;font-weight:600}
dialog p{margin:0 0 20px;font-size:.875rem;color:var(--inkt-zwak)}
dialog .acties-rij{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}

/* Meldingen: CK-CMP-06 (bevestig een wijziging met een toast). */
.toast{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%) translateY(8px);
  max-width:calc(100% - 40px);
  padding:12px 16px;
  border-radius:var(--r);
  background:var(--inkt);
  color:#fff;
  font-size:.875rem;
  opacity:0;
  transition:opacity var(--tempo),transform var(--tempo);
}
.toast.zichtbaar{opacity:1;transform:translateX(-50%) translateY(0)}

.voet{margin:32px 0 40px;font-size:.8125rem;color:var(--inkt-zwak)}
.voet a{color:var(--accent)}
.voet a:hover{color:var(--accent-donker)}

/* Smalle schermen: de rij klapt onder elkaar, de acties blijven op één regel.
 * CK-TYP-01: geen kleinere letters op mobiel. */
@media (max-width:34rem){
  .aanvraag{padding:16px}
  .rij button{width:100%}
  .idee{grid-template-columns:1fr}
  .acties{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .node{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}