/* ==========================================================================
   Buy Back Your Week: de negen gratis tools.

   Geen eigen stijl: dit is de Graphite Console van de Nederlandse site
   (nl-site.css) uitgebreid met de componenten die een tool nodig heeft 
   vragenrijen, schuifregelaars, invoerrasters en resultaatblokken. Het
   bouwdocument eist in §5 letterlijk één design language over alle tools:
   dezelfde typografie, kleuren, spacing, knoppen, header, footer en
   broodkruimel. Daarom erft dit bestand alle tokens en voegt het niets toe
   wat de rest van de site niet ook gebruikt.

   De vier beslissingen houden hun eigen kleur (keep / delegate / automate /
   eliminate). Dat is het enige onderscheidende visuele bezit van dit merk.
   ========================================================================== */

.tlwrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ------------------------------------------------------------------ kop -- */
.tlhero{border-bottom:1px solid var(--seam);padding:54px 0 38px}
.tlhero .crumb{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--faint);margin:0 0 18px}
.tlhero .crumb a{color:var(--muted);text-decoration:none}
.tlhero .crumb a:hover{color:var(--ink)}
.tlhero .crumb span{opacity:.5;padding:0 6px}
.tlhero h1{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(28px,4.4vw,46px);margin:0 0 16px;max-width:20ch}
.tlhero .lede{font-size:clamp(17px,1.5vw,19.5px);color:var(--ink-2);max-width:60ch;margin:0}
.tlhero .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tlhero .meta b{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--seam);
  padding:5px 9px;border-radius:var(--r)}
.tlhero .meta b.t{color:var(--graphite);background:var(--live);border-color:var(--live)}

/* --------------------------------------------------------------- kolommen */
.tlcols{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(28px,4vw,56px);
  align-items:start;padding:44px 0 72px}
.tlmain{min-width:0}
.tlside{position:sticky;top:78px;font-size:14.5px}
.tlside section{border-top:1px solid var(--seam);padding:18px 0}
.tlside section:first-child{border-top:0;padding-top:0}
.tlside h4{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin:0 0 12px;font-weight:400}
.tlside a{display:block;color:var(--ink-2);text-decoration:none;padding:7px 0;line-height:1.45;
  border-bottom:1px solid var(--seam-soft)}
.tlside a:last-child{border-bottom:0}
.tlside a:hover{color:var(--ink)}
.tlside a b{display:block;color:var(--ink);font-weight:500}
.tlside a span{display:block;font-size:13px;color:var(--muted);margin-top:2px}

/* ------------------------------------------------------------ het paneel -- */
.tlpanel{border:1px solid var(--seam);background:var(--panel);border-radius:var(--r);
  padding:clamp(20px,3vw,32px);margin:0 0 30px}
.tlpanel>h2{font-family:var(--display);font-weight:600;font-size:20px;margin:0 0 6px}
.tlpanel>p.intro{color:var(--ink-2);margin:0 0 24px;max-width:62ch}

/* vragenrij (checklist) */
.tlq{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;
  border-top:1px solid var(--seam-soft);padding:16px 0}
.tlq:first-of-type{border-top:0}
.tlq.done{opacity:.72}
.tlq .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:5px}
.tlq p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)}
.tlopts{display:flex;gap:6px;flex-shrink:0}
.tlopts button{background:transparent;border:1px solid var(--seam);color:var(--muted);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:8px 13px;
  border-radius:var(--r);cursor:pointer;transition:all .12s ease}
.tlopts button:hover{border-color:var(--ink-2);color:var(--ink)}
.tlopts button.on{background:var(--live);border-color:var(--live);color:var(--graphite)}
.tlopts button:focus-visible,.tlq input:focus-visible{outline:2px solid var(--live);outline-offset:2px}

/* invoervelden */
.tlfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.tlfield{display:block}
.tlfield>span{display:block;font-size:14px;color:var(--ink-2);margin-bottom:7px;line-height:1.4}
.tlfield .hint{display:block;font-size:12.5px;color:var(--faint);margin-top:6px;line-height:1.45}
.tlfield input,.tlfield select,.tlfield textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--seam);color:var(--ink);
  font-family:var(--sans);font-size:15.5px;padding:11px 12px;border-radius:var(--r)}
.tlfield textarea{min-height:104px;resize:vertical;line-height:1.55}
.tlfield input:focus,.tlfield select:focus,.tlfield textarea:focus{outline:none;border-color:var(--live)}
.tlfield.mono input{font-family:var(--mono)}
.tlfield .unit{position:relative;display:block}
.tlfield .unit i{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-style:normal;font-family:var(--mono);font-size:12px;color:var(--faint)}
.tlfield .unit input{padding-right:42px}

/* keuzegroep (beslisboom) */
.tlchoice{border-top:1px solid var(--seam-soft);padding:18px 0}
.tlchoice:first-of-type{border-top:0;padding-top:0}
.tlchoice>span{display:block;font-size:15px;color:var(--ink);margin-bottom:10px}
.tlchips{display:flex;flex-wrap:wrap;gap:8px}
.tlchips button{background:var(--panel-2);border:1px solid var(--seam);color:var(--ink-2);
  font-family:var(--sans);font-size:14px;padding:9px 14px;border-radius:var(--r);cursor:pointer;
  transition:all .12s ease;text-align:left}
.tlchips button:hover{border-color:var(--ink-2);color:var(--ink)}
.tlchips button.on{background:var(--live);border-color:var(--live);color:var(--graphite);font-weight:500}
.tlchips button:focus-visible{outline:2px solid var(--live);outline-offset:2px}

/* rijen met taken / beslissingen */
.tlrow{border:1px solid var(--seam);background:var(--panel-2);border-radius:var(--r);
  padding:16px;margin-bottom:12px}
.tlrow .top{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:12px}
.tlrow .top.wide{grid-template-columns:minmax(0,1fr) 180px}
.tlrow input,.tlrow select{width:100%;background:var(--panel);border:1px solid var(--seam);
  color:var(--ink);font-family:var(--sans);font-size:15px;padding:10px 11px;border-radius:var(--r)}
.tlrow input[type=number]{text-align:right;font-family:var(--mono)}
.tlrow input:focus,.tlrow select:focus{outline:none;border-color:var(--live)}
.tlrow .sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:14px}
.tlrow .sliders label{font-size:12.5px;color:var(--muted);display:block}
.tlrow .sliders label b{color:var(--ink);font-family:var(--mono);font-weight:400}
.tlrow .sliders label i{display:block;font-style:normal;font-size:11.5px;color:var(--faint);margin-top:2px}
.tlrow .picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:14px}
.tlrow .picks label{font-size:12.5px;color:var(--muted);display:block}
.tlrow .picks select{margin-top:5px;font-size:14px}
.tlrow .del{margin-top:12px;background:transparent;border:1px solid var(--seam);color:var(--muted);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;padding:6px 11px;
  border-radius:var(--r);cursor:pointer}
.tlrow .del:hover{border-color:var(--eliminate);color:var(--eliminate)}
input[type=range]{width:100%;accent-color:var(--live);margin-top:6px}

/* actiebalk */
.tlact{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;
  padding-top:20px;border-top:1px solid var(--seam)}
.tlact .status{font-family:var(--mono);font-size:12px;color:var(--muted)}
.tlerr{color:var(--eliminate);font-size:14px;margin:12px 0 0}

/* ------------------------------------------------------------- resultaat -- */
.tlres{margin:0 0 34px;scroll-margin-top:80px}
.tlres[hidden]{display:none}
.tlverdict{border:1px solid var(--seam);border-left:2px solid var(--live);background:var(--panel);
  padding:24px;border-radius:var(--r);margin:0 0 20px}
.tlverdict .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.tlverdict h2{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.6vw,28px);
  margin:0 0 10px;line-height:1.2}
.tlverdict p{margin:0;color:var(--ink-2);line-height:1.66;max-width:62ch}
.tlverdict.keep{border-left-color:var(--keep)}
.tlverdict.delegate{border-left-color:var(--delegate)}
.tlverdict.automate{border-left-color:var(--automate)}
.tlverdict.eliminate{border-left-color:var(--eliminate)}

.tlscores{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 22px}
.tlscore{border:1px solid var(--seam);background:var(--panel);padding:15px;border-radius:var(--r)}
.tlscore span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.tlscore b{display:block;font-family:var(--display);font-size:26px;font-weight:600;line-height:1}
.tlscore b small{font-size:14px;color:var(--muted);font-weight:400}
.tlscore i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:6px}
.tlmeter{height:4px;background:var(--raised);border-radius:2px;margin-top:10px;overflow:hidden}
.tlmeter i{display:block;height:100%;background:var(--live);transition:width .5s ease}

.tltable{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14.5px}
.tltable th,.tltable td{border:1px solid var(--seam);padding:10px 12px;text-align:left;vertical-align:top}
.tltable th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);font-weight:400;background:var(--panel)}
.tltable td{color:var(--ink-2)}
.tltable td:first-child{color:var(--ink)}
.tltable td.num{text-align:right;font-family:var(--mono);white-space:nowrap}
.tltable tr.sum td{background:var(--panel);color:var(--ink);font-weight:500}
.tltable .why{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}

.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 8px;border-radius:var(--r);border:1px solid}
.tag.keep{color:var(--keep);border-color:rgba(147,160,172,.4)}
.tag.delegate{color:var(--delegate);border-color:rgba(61,217,164,.4)}
.tag.automate{color:var(--automate);border-color:rgba(108,155,255,.4)}
.tag.eliminate{color:var(--eliminate);border-color:rgba(255,106,69,.4)}

.tlblocks{margin:0 0 22px}
.tlblock{border:1px solid var(--seam);background:var(--panel);border-radius:var(--r);
  padding:18px;margin-bottom:10px}
.tlblock .h{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px}
.tlblock h3{font-family:var(--display);font-size:16.5px;font-weight:600;margin:0;line-height:1.35}
.tlblock p{margin:0 0 8px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.tlblock p:last-child{margin-bottom:0}
.tlblock p strong{color:var(--ink)}
.tlblock p.proof{font-size:13px;color:var(--muted)}

.tlgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 22px}
.tlgroup{border:1px solid var(--seam);background:var(--panel);padding:15px;border-radius:var(--r)}
.tlgroup span{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.tlgroup b{display:block;font-family:var(--display);font-size:20px;margin:6px 0 0}
.tlgroup p{margin:9px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}

.tlartifact{border:1px solid var(--seam);background:var(--panel);border-radius:var(--r);margin:0 0 22px}
.tlartifact .ah{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--seam)}
.tlartifact .ah span{font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint)}
.tlartifact .ab{padding:20px 22px}
.tlartifact .ab h4{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--live);margin:22px 0 8px;font-weight:400}
.tlartifact .ab h4:first-child{margin-top:0}
.tlartifact .ab p{margin:0 0 10px;color:var(--ink-2);line-height:1.62;font-size:15px}
.tlartifact .ab ul,.tlartifact .ab ol{margin:0 0 10px;padding-left:20px;color:var(--ink-2);font-size:15px;line-height:1.62}
.tlartifact .ab li{margin-bottom:6px}
.tlcopy{background:transparent;border:1px solid var(--seam);color:var(--muted);font-family:var(--mono);
  font-size:11.5px;letter-spacing:.05em;padding:6px 12px;border-radius:var(--r);cursor:pointer}
.tlcopy:hover{border-color:var(--live);color:var(--live)}

/* --------------------------------------------------------- vervolgstap -- */
.tlnext{border:1px solid var(--seam);background:var(--panel);border-left:2px solid var(--live);
  border-radius:var(--r);padding:24px;margin:0 0 30px}
.tlnext .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.tlnext h3{font-family:var(--display);font-weight:600;font-size:19px;margin:0 0 10px;line-height:1.3}
.tlnext p{margin:0 0 18px;color:var(--ink-2);line-height:1.65;max-width:60ch}
.tlnext .row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tlnext .fine{margin:0}

/* tool-kaart in een kennisbankartikel (§20) en in toolpagina's */
.tlcard{border:1px solid var(--seam);background:var(--panel-2);border-left:2px solid var(--live);
  border-radius:var(--r);padding:18px 20px;margin:26px 0}
.tlcard .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.tlcard h4{font-family:var(--display);font-size:16.5px;font-weight:600;margin:0 0 7px}
.tlcard p{margin:0 0 14px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.tlcard a{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;
  font-size:14.5px;color:var(--live);text-decoration:none;border:0}
.tlcard a:hover{text-decoration:underline}
.tlcard .sec2{display:block;margin-top:9px;font-size:13px;color:var(--muted)}
.tlcard .sec2 a{font-size:13px;color:var(--ink-2);font-family:var(--sans);font-weight:400}

/* ------------------------------------------------------------- uitleg ---- */
.tlprose{max-width:66ch;margin:0 0 34px}
.tlprose h2{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,25px);
  margin:34px 0 12px;letter-spacing:-.01em}
.tlprose h2:first-child{margin-top:0}
.tlprose p{margin:0 0 15px;color:var(--ink-2);line-height:1.72}
.tlprose ul{list-style:none;margin:0 0 18px;padding:0}
.tlprose li{position:relative;padding:0 0 0 22px;margin:0 0 9px;color:var(--ink-2);line-height:1.62}
.tlprose li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:1px;background:var(--live)}
.tlprose details{border-top:1px solid var(--seam);padding:14px 0}
.tlprose details summary{cursor:pointer;font-size:16px;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.tlprose details summary::-webkit-details-marker{display:none}
.tlprose details summary::after{content:"+";font-family:var(--mono);color:var(--live);flex-shrink:0}
.tlprose details[open] summary::after{content:"−"}
.tlprose details p{margin:12px 0 0;font-size:15px}

/* ---------------------------------------------------------- overzicht ---- */
.tlfase{margin:0 0 46px}
.tlfase .fh{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.tlfase .fh .idx{font-family:var(--mono);font-size:12px;color:var(--live);letter-spacing:.08em}
.tlfase .fh h2{font-family:var(--display);font-weight:600;font-size:22px;margin:0}
.tlfase>p{color:var(--muted);margin:0 0 20px;font-size:15px}
.tlgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.tltile{display:block;border:1px solid var(--seam);background:var(--panel);border-radius:var(--r);
  padding:20px;text-decoration:none;transition:border-color .14s ease,transform .14s ease}
.tltile:hover{border-color:var(--live);transform:translateY(-2px)}
.tltile .badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint)}
.tltile h3{font-family:var(--display);font-weight:600;font-size:18px;margin:10px 0 7px;color:var(--ink)}
.tltile p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55}
.tltile .go{display:block;margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--live)}

.tlflow{border:1px solid var(--seam);background:var(--panel);border-radius:var(--r);
  padding:22px;margin:0 0 44px}
.tlflow h2{font-family:var(--display);font-size:18px;margin:0 0 16px;font-weight:600}
.tlflow ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tlflow li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:baseline;
  font-size:14.5px;color:var(--ink-2);border-top:1px solid var(--seam-soft);padding-top:10px}
.tlflow li:first-child{border-top:0;padding-top:0}
.tlflow li b{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--live);font-weight:400}
.tlflow li a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(200,255,77,.4)}
.tlflow li a:hover{border-bottom-color:var(--live)}

/* --------------------------------------------------------------- mobiel -- */
@media (max-width:900px){
  .tlcols{grid-template-columns:1fr;gap:34px;padding:32px 0 56px}
  .tlside{position:static;order:2}
  .tlflow li{grid-template-columns:1fr;gap:4px}
}
@media (max-width:620px){
  .tlhero{padding:34px 0 26px}
  .tlq{grid-template-columns:1fr;gap:10px;align-items:start}
  .tlopts{width:100%}
  .tlopts button{flex:1;text-align:center;padding:11px 8px}
  .tlrow .top{grid-template-columns:1fr}
  .tlrow .top.wide{grid-template-columns:1fr}
  .tlrow input[type=number]{text-align:left}
  .tlscores{grid-template-columns:1fr 1fr}
  .tlact{flex-direction:column;align-items:stretch}
  .tlact .b{justify-content:center}
  .tltable{display:block;overflow-x:auto;white-space:nowrap}
  .tltable .why{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  .tltile,.b,.tlmeter i{transition:none}
  .tltile:hover{transform:none}
}