/* Agora Work — fase 1 shell. Zelfde steen/inkt-familie als de werkplek;
   stabiel raam (Canon §7.1), dynamische taakzone, mobiel één kolom (§28). */

:root{
  --steen:#F4F2ED; --steen-2:#E7E3DA; --inkt:#22201B; --inkt-zacht:#5B564C;
  --patina:#0F6E56; --wacht:#8A6A1F; --fout:#8C3A2B; --wit:#FCFBF8; --lijn:#D6D1C6;
}
@media (prefers-color-scheme: dark){
  :root{ --steen:#1B1A17; --steen-2:#252420; --inkt:#EDE9E1; --inkt-zacht:#A8A29A;
    --patina:#4FB79A; --wacht:#D6A94A; --fout:#D98470; --wit:#201F1B; --lijn:#38352F; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--steen);color:var(--inkt);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;}
.wrap{max-width:760px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;
  padding:20px 18px 32px}

/* stabiel raam */
.vast{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-bottom:1px solid var(--lijn);padding-bottom:14px;margin-bottom:26px}
.merk h1{font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:1.15rem;
  letter-spacing:.14em;margin:0}
.merk h1 span{color:var(--inkt-zacht);letter-spacing:normal;font-size:.95rem}
.kopregel{margin:2px 0 0;font-size:.8rem;color:var(--inkt-zacht)}
.precisie{margin:1px 0 0;font-size:.74rem;color:var(--inkt-zacht);opacity:.85}
.rol{font-size:.78rem;color:var(--inkt-zacht);border:1px solid var(--lijn);
  border-radius:999px;padding:3px 12px;white-space:nowrap}

/* ingang */
.ingang h2{font-family:Georgia,serif;font-weight:600;font-size:1.45rem;margin:0 0 14px}
#vraagvorm{display:flex;gap:8px}
#vraag{flex:1;font:inherit;padding:13px 15px;border-radius:9px;
  border:1px solid var(--lijn);background:var(--wit);color:var(--inkt)}
#vraag:focus{outline:2px solid var(--patina);outline-offset:-1px}
#vraagvorm button{font:inherit;padding:13px 20px;border:0;border-radius:9px;
  background:var(--patina);color:#fff;font-weight:600;cursor:pointer}
.suggesties{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.suggesties button{font:inherit;font-size:.85rem;padding:7px 14px;border-radius:999px;
  border:1px solid var(--lijn);background:var(--wit);color:var(--inkt-zacht);cursor:pointer}
.suggesties button:hover{color:var(--inkt);border-color:var(--inkt-zacht)}

/* dynamische taakzone */
.taak{margin-top:28px}
.taak-kop .modus{display:inline-block;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;color:var(--patina);margin-bottom:4px}
.taak-kop h2{font-family:Georgia,serif;font-weight:600;font-size:1.15rem;margin:0 0 4px}
.contextbalk{font-size:.8rem;color:var(--inkt-zacht);margin:0 0 14px}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-left:3px solid var(--lijn);
  border-radius:8px;padding:15px 17px;margin-bottom:10px}
.kaart .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  display:inline-block;margin-bottom:7px;color:var(--inkt-zacht)}
.kaart .zegt{margin:0;font-size:1rem}
.kaart-status.staat-gereed{border-left-color:var(--patina)}
.kaart-status.staat-gereed .label{color:var(--patina)}
.kaart-status.staat-wacht{border-left-color:var(--wacht)}
.kaart-status.staat-onbekend{border-left-color:var(--fout)}
.metrics{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.metric{flex:1 1 140px;background:var(--wit);border:1px solid var(--lijn);
  border-radius:10px;padding:13px 15px}
.metric b{display:block;font-size:1.6rem;font-family:Georgia,serif;line-height:1.15}
.metric span{font-size:.8rem;color:var(--inkt-zacht)}
.metric.toon-goed b{color:var(--patina)}
.metric.toon-wacht b{color:var(--wacht)}
.lijst{margin:0;padding-left:18px}
.lijst li{margin-bottom:4px}
/* evidence-raster (Canon §26) */
.evidence-raster{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.evidence-cel{flex:1 1 150px;background:var(--steen-2);border-radius:8px;padding:11px 13px}
.evidence-cel b{display:block;font-size:1.4rem;font-family:Georgia,serif;line-height:1.15}
.evidence-cel span{font-size:.78rem;color:var(--inkt-zacht)}

/* duiding — kennis-soorten zichtbaar apart (Canon §6 Analyze) */
.kaart-duiding .duid-rij{display:flex;gap:12px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--lijn)}
.kaart-duiding .duid-rij:first-of-type{border-top:0}
.duid-merk{flex:0 0 92px;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;padding-top:2px}
.duid-tekst{flex:1;font-size:.95rem}
.soort-gemeten .duid-merk{color:var(--patina)}
.soort-berekend .duid-merk{color:var(--inkt-zacht)}
.soort-interpretatie .duid-merk{color:var(--wacht)}
.soort-onzeker .duid-merk{color:var(--fout)}

/* detail / progressieve onthulling niveau 2 */
.kaart-detail{padding:0;overflow:hidden}
.detail-knop{width:100%;text-align:left;font:inherit;font-size:.92rem;font-weight:600;
  padding:13px 17px;background:none;border:0;color:var(--inkt);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.detail-knop::after{content:"▾";color:var(--inkt-zacht);font-size:.8rem}
.detail-knop[aria-expanded="true"]::after{content:"▴"}
.detail-body{padding:0 14px 12px}
.detail-body .kaart{margin-bottom:8px}

.acties{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.actie{font:inherit;font-size:.9rem;padding:10px 16px;border-radius:9px;cursor:pointer;
  border:1px solid var(--lijn);background:var(--wit);color:var(--inkt)}
.actie.klasse-A{border-color:var(--patina);color:var(--patina)}
.actie.klasse-B{border-color:var(--inkt-zacht);color:var(--inkt)}
.actie.klasse-C{border-color:var(--wacht);color:var(--wacht);font-weight:600}

/* voet */
.voet{margin-top:auto;padding-top:26px;font-size:.76rem;color:var(--inkt-zacht)}

@media (max-width:560px){
  .vast{flex-direction:column;gap:4px}
  .rol{align-self:flex-start}
  #vraagvorm{flex-direction:column}
  #vraagvorm button{width:100%}
}

/* ── Fase 6: vergelijking en concept ─────────────────────────────────────── */

/* ComparisonCard. Twee kolommen met een label ervoor. Een rij die verschilt
   krijgt een randje, geen kleur die "fout" of "beter" suggereert — vergelijken
   is tonen wat verschilt, niet zeggen wat wint. */
.kaart-vergelijking .vergelijk-rij{display:flex;gap:12px;align-items:baseline;
  padding:7px 0;border-top:1px solid var(--lijn)}
.kaart-vergelijking .vergelijk-rij:first-of-type{border-top:0}
.vergelijk-kop{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--inkt-zacht);font-weight:700}
.vergelijk-kop .vergelijk-cel{padding-left:0}
.vergelijk-label{flex:0 0 130px;font-size:.72rem;color:var(--inkt-zacht);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.vergelijk-cel{flex:1 1 0;min-width:0;font-size:.92rem;word-break:break-word}
.vergelijk-rij.verschilt{border-left:2px solid var(--wacht);padding-left:8px;
  margin-left:-10px}

/* DraftCard (klasse B). Het merk staat bovenaan en is niet te missen: dit is
   een concept, er is niets vastgelegd. Zachte tint, geen alarmkleur — het is
   geen fout, het is een toestand. */
.kaart-concept{border-left-color:var(--wacht);background:
  linear-gradient(0deg,var(--steen) 0%,var(--wit) 40%)}
.kaart-concept .concept-merk{color:var(--wacht);border:1px solid var(--wacht);
  border-radius:3px;padding:1px 6px;display:inline-block}
.concept-titel{margin:9px 0 4px;font-size:1.02rem;font-family:Georgia,serif;font-weight:600}
.concept-waarschuwing{margin:0 0 9px;font-size:.86rem;color:var(--wacht)}
.concept-voet{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--lijn);
  font-size:.78rem;color:var(--inkt-zacht)}