/* Het taakbord als bord (handoff "Framework taakbord en informatiedieet.dc.html",
   T3 · NIEUWE RICHTING, r. 35-241).

   De kolommen zíjn de staten, en de kleurtaal gaat al over staten — dus draagt
   elke kolomband de kleur die die staat overal in de app heeft: cream wacht op
   jou, lilac agent aan het werk, coral aandacht. De kolomband is de ENIGE plek
   waar kleur staat; de kaarten blijven wit, want daarin lees je. Er komt geen
   kleur bij: geen prioriteitsbadges, want de volgorde in de kolom is de
   prioriteit, en geen avatars, want er is één iemand die dit bord gebruikt.
   "Klaar" is geen kolom maar een strook eronder (r. 214-218). */

/* Drie kolommen naast elkaar op laptop/desktop; minmax(0,1fr) laat ze krimpen zonder te
   overlopen. Pas onder 760px (telefoon/smal, waar de sidebar toch al horizontaal is)
   stapelen ze — een grens van 980 stapelde nog op gewone laptops met OS-schaling. */
.bord{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
@media (max-width:760px){.bord{grid-template-columns:1fr}}

/* ===== Herindeling 24/8: vier fasen + reviewstap ===== */
/* ≥1180: vier volwaardige kolommen (de rail is verborgen). 760–1180: Klaar
   klapt in tot de lime rail (52px); klik opent de overlay. <760: stapelen in
   leesrichting — bandje → starten → lopen → reviewen → af. */
.bord--vier{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1fr)}
.bord--vier .klaarrail{display:none}
@media (max-width:1180px) and (min-width:761px){
  .bord--vier{grid-template-columns:repeat(3,minmax(0,1fr)) 52px}
  .bord--vier .kolom--klaarvol{display:none}
  .bord--vier .klaarrail{display:flex}
}
@media (max-width:760px){
  .bord--vier{grid-template-columns:1fr}
  .bord--vier .klaarrail{display:none}
}
.kolom--mint .kolom-kop{background:var(--block-mint)}
.kolom--lime .kolom-kop{background:var(--block-lime)}
.kolom--mint .kaart{border-color:var(--rand-mint)}
/* lime: af is stil — vink, 58%, geen acties */
.kolom--lime .kaart,.klaaroverlay .kaart{opacity:.58}
.kaart .vink{width:15px;height:15px;border-radius:4px;background:var(--ink);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:10px}
/* de reviewkaart: bewijsregel + actieregel (V1) */
.kaart .zelfval{font-family:var(--font-mono);font-size:10px;letter-spacing:.6px;color:var(--ink-tertiary)}
.kaart .voet.act{font-family:var(--font-sans);letter-spacing:0}
.kaart .voet.act .bekijk{margin-left:0;font-size:12px;color:var(--ink-muted)}
.klaarpill{margin-left:auto;display:inline-flex;padding:5px 14px;border-radius:var(--radius-pill);
  background:var(--ink);color:var(--on-primary);font-size:12px;font-weight:540;border:none;cursor:pointer;
  font-family:var(--font-sans)}
.klaarpill:hover{opacity:.85}
.klaarpill:disabled{opacity:.5;cursor:default}
/* het ···-actiemenu */
.kaart .rij1{position:relative}
.kaartmenu{position:absolute;top:22px;right:0;background:var(--surface-1);border:1px solid var(--hairline);
  border-radius:var(--radius-md);box-shadow:var(--shadow-soft);padding:6px;display:flex;flex-direction:column;
  min-width:200px;z-index:5}
.kaartmenu .mi{padding:8px 12px;font-size:13px;color:var(--ink-muted);background:none;border:none;text-align:left;
  cursor:pointer;border-radius:var(--radius-sm);font-family:var(--font-sans);text-decoration:none;display:block}
.kaartmenu .mi:hover{background:var(--surface-2);color:var(--ink)}
/* het afkeurformulier ("terug naar de agent") */
.afkeur{background:var(--surface-sunken);border:1px solid var(--hairline-soft);border-radius:var(--radius-md);
  padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.afkeur .t{font-size:12px;font-weight:540}
.afkeur textarea,.afkeur input{font-size:12px;border:1px solid var(--hairline);border-radius:var(--radius-md);padding:8px 10px;
  background:var(--surface-1);font-family:var(--font-sans);resize:vertical}
/* "+ Eigen taak" (T5) hergebruikt de afkeur-stijltaal boven het bord */
#eigenvorm{margin-bottom:14px}
#eigenvorm .afkeur{max-width:420px}
.afkeur .akties{display:flex;gap:8px;justify-content:flex-end;align-items:center}
/* De paperclip staat op de actieregel, links, tegenover de stuurknop: dezelfde
   plek als in het brein en op het sessiescherm, waar hij tussen het veld en
   Stuur staat. `margin-right:auto` op de plek zelf, want de knop erin wordt
   opnieuw getekend en zou de marge anders elke keer opnieuw moeten meekrijgen. */
.afkeur .akties .clipplek{margin-right:auto;display:inline-flex;align-items:center}
.afkeur .annuleer{font-size:12px;color:var(--ink-subtle);background:none;border:none;cursor:pointer;padding:5px 10px;font-family:var(--font-sans)}
.afkeur .stuur{display:inline-flex;padding:5px 14px;border-radius:var(--radius-pill);background:var(--ink);
  color:var(--on-primary);font-size:12px;font-weight:540;border:none;cursor:pointer;font-family:var(--font-sans)}
/* het coral bandje (V2) */
.tb-band{background:var(--block-coral);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.tb-band .band-kop,.tb-band.ingeklapt{display:flex;align-items:center;gap:9px}
.tb-band.ingeklapt{flex-direction:row}
.tb-band .dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--ink);flex:none}
.tb-band .dot.open{background:none;border:1.5px solid #b4785a}
.tb-band .naam{font-size:13.5px;font-weight:540}
.tb-band .wie{font-size:12px;color:rgba(0,0,0,.55);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-align:right}
.tb-band .band-kop .naam{flex:1}
.tb-band .n{display:inline-flex;min-width:20px;justify-content:center;padding:1px 7px;border-radius:var(--radius-pill);
  background:var(--badge-vulling);font-size:11.5px;font-weight:540}
.tb-band .klap{font-size:12px;color:rgba(0,0,0,.55);text-decoration:underline;background:none;border:none;
  cursor:pointer;font-family:var(--font-sans);white-space:nowrap}
.tb-band .band-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:900px){.tb-band .band-body{grid-template-columns:1fr}}
.tb-band .band-body .kaart{border-color:var(--rand-coral)}
.tb-band .band-uitleg{font-size:11.5px;color:rgba(0,0,0,.55);line-height:1.5;align-self:end;padding:4px 2px}
/* het bandje als sleepdoel: streepjes, ook als skelet bij nul wachtenden */
.tb-band.banddoel{border:1.5px dashed #d9a88c;background:rgba(243,201,182,.25);border-radius:10px}
.tb-band.banddoel .doeltekst{font-size:13px;color:#6b5045;flex:1}
.tb-band.banddoel.erboven{outline:1px dashed var(--ink-subtle);outline-offset:-4px}

/* Item 2 (25/8): "Niet toegewezen · N" hergebruikt de bandje-structuur van
   Wacht op antwoord (zelfde kop/body/toggle), maar gedempt in plaats van
   coral — parkeren is geen aandachtspunt, het is bewust even geen keuze
   maken. Standaard ingeklapt (de JS opent hem pas na een expliciete klik). */
.tb-band.tb-park{background:var(--surface-2)}
.tb-band.tb-park .band-body .kaart{border-color:var(--hairline)}
.tb-band.tb-park.ingeklapt .naam{flex:1}

/* De lime rail (V3, 760–1180px): een ingeklapte kolom die als knop moet lezen.
   Drie ankers — teller boven, "Klaar" gecentreerd, chevron onder — en een
   duidelijke hover, anders oogt hij als een geplette kolom i.p.v. een keuze. */
.klaarrail{flex-direction:column;background:var(--block-lime);border:1px solid var(--rand-lime);
  border-radius:var(--radius-md);align-items:center;justify-content:space-between;padding:12px 0;
  cursor:pointer;font-family:var(--font-sans);
  transition:background var(--m-hover,160ms) var(--e-out),border-color var(--m-hover,160ms) var(--e-out)}
.klaarrail:hover{background:#d3e8a0;border-color:#a9bd82}
.klaarrail:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.klaarrail .n{display:inline-flex;min-width:20px;justify-content:center;padding:2px 7px;
  border-radius:var(--radius-pill);background:var(--badge-vulling);font-size:11px;font-weight:540;flex:none}
.klaarrail .raillabel{flex:1;display:flex;align-items:center;justify-content:center;font-size:12px;
  font-weight:540;writing-mode:vertical-rl;letter-spacing:.5px}
.klaarrail .pijl{font-size:12px;color:rgba(0,0,0,.55);flex:none}
.klaarrail:hover .pijl{color:var(--ink)}
.klaaroverlay{position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);background:var(--surface-1);
  border-left:1px solid var(--hairline);box-shadow:var(--shadow-soft);z-index:120;display:flex;flex-direction:column}
.klaaroverlay .overlaykop{padding:16px 20px;border-bottom:1px solid var(--hairline-soft);display:flex;
  align-items:center;justify-content:space-between;font-weight:540}
.klaaroverlay .sluit{background:none;border:none;font-size:14px;cursor:pointer;color:var(--ink-subtle);font-family:var(--font-sans)}
.klaaroverlay .overlaybody{padding:14px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
/* "n eerdere tonen" in de lime-kolom: rustige tekstknop, geen browserknop */
.kolom-body .tonen{background:none;border:none;font-family:var(--font-sans);font-size:12px;color:var(--ink-muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:2px 3px;align-self:flex-start}

.kolom{display:flex;flex-direction:column;background:var(--surface-1);
  border:1px solid var(--hairline);border-radius:var(--radius-md);overflow:hidden}
.kolom-kop{padding:12px 14px;display:flex;align-items:center;gap:9px}
.kolom-kop .dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--ink);flex:none}
.kolom-kop .naam{font-size:13.5px;font-weight:540;flex:1}
.kolom-kop .n{display:inline-flex;min-width:20px;justify-content:center;padding:1px 7px;
  border-radius:var(--radius-pill);background:var(--badge-vulling);font-size:11.5px;font-weight:540}
.kolom--cream .kolom-kop{background:var(--block-cream)}
.kolom--lilac .kolom-kop{background:var(--block-lilac)}
.kolom--coral .kolom-kop{background:var(--block-coral)}
/* de agent-hartslag, dezelfde keyframe als de momentkaart (vlak.css:59) */
.kolom--lilac .kolom-kop .dot{animation:fw-pulse var(--m-pulse) ease-in-out infinite}
.kolom-body{padding:10px;display:flex;flex-direction:column;gap:10px;background:var(--surface-sunken);flex:1;min-height:140px}
.kolom-uitleg{font-size:12px;color:var(--ink-muted);line-height:1.55;padding:2px 4px;margin-top:auto}
.kolom-leeg{font-size:12px;color:var(--ink-subtle);padding:2px 4px}

.kaart{background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--radius-md);
  padding:12px 13px;display:flex;flex-direction:column;gap:8px}
.kolom--cream .kaart{border-color:var(--rand-cream)}
.kolom--lilac .kaart{border-color:var(--rand-lilac)}
.kolom--coral .kaart{border-color:var(--rand-coral)}
.kaart .rij1{display:flex;align-items:center;gap:8px}
.kaart .titel{font-size:13.5px;font-weight:540;line-height:1.35;text-align:left;background:none;
  border:none;padding:0;color:var(--ink);cursor:pointer;font-family:var(--font-sans)}
.kaart .titel:hover{text-decoration:underline;text-underline-offset:3px}
.kaart .pagina{font-size:12px;color:var(--ink-muted)}
.kaart .herkomst{display:inline-flex;padding:2px 8px;border-radius:var(--radius-pill);
  border:1px solid var(--hairline);font-family:var(--font-mono);font-size:9px;letter-spacing:1px;
  text-transform:uppercase;color:var(--ink-muted);white-space:nowrap}
.kaart .herkomst.ronde{background:var(--block-cream);border-color:transparent;color:var(--ink)}
.kaart .geenvink,.kaart .loopt{width:15px;height:15px;flex:none;display:flex;align-items:center;justify-content:center}
.kaart .loopt::before{content:"";width:7px;height:7px;border-radius:var(--radius-pill);
  background:var(--accent-magenta);animation:fw-pulse var(--m-pulse) ease-in-out infinite}
.kaart .meer{margin-left:auto;font-size:12px;color:var(--ink-tertiary);background:none;border:none;
  cursor:pointer;font-family:var(--font-sans)}
.kaart .voet{display:flex;align-items:center;gap:10px;border-top:1px solid var(--hairline-soft);
  padding-top:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.6px;color:var(--ink-tertiary)}
.kaart .voet a{margin-left:auto;text-decoration:underline;color:var(--ink-muted)}
.kaart .voet .live{color:var(--accent-magenta)}
.kaart .diep{font-size:12px;color:var(--ink-muted);line-height:1.55;
  border-top:1px solid var(--hairline-soft);padding-top:8px;display:flex;flex-direction:column;gap:8px}

/* Klaar staat niet als kolom op het bord: een strook eronder met een tonen-link */
.klaarstrook{display:flex;align-items:center;gap:10px;padding:14px 0 4px;font-size:13px;color:var(--ink-muted)}
.klaarstrook .stip{width:8px;height:8px;border-radius:var(--radius-pill);
  background:var(--block-lime);border:1px solid var(--rand-lime);flex:none}
.klaarstrook .tonen{background:none;border:none;padding:0;font-family:var(--font-sans);font-size:13px;
  color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.klaarlijst{display:flex;flex-direction:column;gap:8px;padding:4px 0 8px}

/* Voorstellen horen niet op het bord: ze wachten op een bevestigd fixplan.
   Eén regel erboven zegt dat, met de poort erachter. */
.voorstelstrook{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-muted);
  border:1px solid var(--hairline);border-radius:var(--radius-md);padding:12px 14px}

.pill-scheiding{width:1px;height:20px;background:var(--hairline);margin:0 6px;align-self:center}

/* Globaal taakbord (F5): de projectkiezer (vinkjes) en de langere samengestelde
   'project · herkomst'-chip die daardoor mag afbreken. De kaart is hier een link
   naar het projectbord — read-only venster, muteren gebeurt in het project. */
.gtb-kies-label{font-size:12px;color:var(--ink-muted);margin-right:2px;align-self:center}
.gtb-proj-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--radius-pill);
  border:1px solid var(--hairline);font-size:13px;color:var(--ink-muted);cursor:pointer;user-select:none}
.gtb-proj-chip:hover{border-color:var(--ink-subtle)}
.gtb-proj-chip.aan{background:var(--surface-nav-active);color:var(--ink);border-color:transparent;font-weight:540}
.gtb-proj-chip input{margin:0;cursor:pointer}
a.kaart{color:inherit;text-decoration:none}
.gtb-bord .kaart .herkomst{white-space:normal}
.gtb-bord .kaart .titel{cursor:pointer}

/* Slepen (T3 r. 232-233). Twee bewegingen zijn van jou: van Wacht op antwoord
   naar Klaar om te starten en terug. De rest doet een sessie. De kolom waar je
   niet in mag zegt dat BIJ HET OPPAKKEN — met een streepjesrand en een grijze
   cursor — en niet met een foutmelding nadat je het al probeerde. */
.kaart[draggable="true"]{cursor:grab}
.kaart[draggable="true"]:active{cursor:grabbing}
.kaart.sleept{opacity:.5}
.bord.sleepbezig .kolom--dicht{border-style:dashed;border-color:var(--rand-dicht);cursor:not-allowed}
.bord.sleepbezig .kolom--dicht .kolom-kop,
.bord.sleepbezig .kolom--dicht .kolom-body{cursor:not-allowed}
.bord.sleepbezig .kolom--doel .kolom-body{background:var(--surface-sleep-doel)}
.bord.sleepbezig .kolom--doel.erboven .kolom-body{outline:1px dashed var(--ink-subtle);outline-offset:-4px}

/* Toetsenbord-alternatief: een echte knop op de sleepbare kaart doet dezelfde
   overgang als de drop. Hij hangt onderaan de kaart, in de mono-hairline-taal
   van de voet — geen nieuwe kleur, alleen ink en de bestaande hairline.
   .kaart-herstel (bevinding 3, 25/8) is het vangnet uit een vervallen kaart —
   zelfde vorm, eigen klasse zodat de click-handlers niet door elkaar lopen
   (verplaats() is stil, herstel() toont een succes-toast). */
.kaart-verplaats,.kaart-herstel{margin-top:2px;align-self:flex-start;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.6px;color:var(--ink-muted);background:none;
  border:1px solid var(--hairline);border-radius:var(--radius-pill);padding:3px 10px;cursor:pointer}
.kaart-verplaats:hover,.kaart-herstel:hover{color:var(--ink);border-color:var(--ink-subtle)}
.kaart-verplaats:focus-visible,.kaart-herstel:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Item 1 (25/8): de zwarte selectiebalk (handoff "Framework taakbord
   herindeling", r. 255-260) — vier vaste elementen: de vette teller, de
   herkomstzin, de stille "leeg"-link en de witte start-pill. Bleedt tot de
   rand van .main, dezelfde marges als .fw-vlak.paginakop (vlak.css:30,65).
   De in/uitschuifbeweging komt van .fw-selbar/.fw-selbar--exit (motion.css,
   met reduced-motion-vangrail); hier staat alleen kleur en vorm. */
.tb-selbar{position:sticky;bottom:0;z-index:8;margin:14px -48px -40px;
  background:#111;color:#fff;padding:14px 32px;
  display:flex;align-items:center;gap:16px;font-family:var(--font-sans)}
@media (max-width:880px){.tb-selbar{margin:14px -16px -24px;padding:14px 16px;flex-wrap:wrap}}
.tb-selbar-n{font-size:14px;font-weight:540;white-space:nowrap}
.tb-selbar-waar{font-size:13px;color:rgba(255,255,255,.6);flex:1;min-width:0}
.tb-selbar-leeg{font-family:var(--font-sans);font-size:13px;color:rgba(255,255,255,.8);
  text-decoration:underline;text-underline-offset:2px;background:none;border:none;
  cursor:pointer;padding:2px}
.tb-selbar-leeg:hover{color:#fff}
.tb-selbar-start{font-family:var(--font-sans);display:inline-flex;padding:9px 18px;
  border-radius:var(--radius-pill);background:#fff;color:#111;font-size:14px;font-weight:540;
  border:none;cursor:pointer;white-space:nowrap}
.tb-selbar-start:hover{opacity:.88}
.tb-selbar-start:disabled{opacity:.5;cursor:default}
.tb-selbar-start:focus-visible,.tb-selbar-leeg:focus-visible{outline:2px solid #fff;outline-offset:2px}