/* JobJob Tools — paginastijl (prefix .tl-). Gebruikt uitsluitend de tokens van jobjob.css (huisstijl v3, licht + donker).
   Mobiel eerst; geen horizontale scroll op 390 px; doelgroottes en focus komen uit het DS. */
.tl-page{padding-bottom:var(--s-12)}
.tl-hero{padding:var(--s-8) 0 var(--s-4)}
.tl-hero h1{margin:.2em 0 .3em;font-size:var(--fs-3xl);line-height:1.1;letter-spacing:-.01em}
.tl-hero-main{display:block;padding-block:var(--s-10) var(--s-8)}
.tl-hero-main .wrap{max-width:var(--content-max)}
.tl-hero-main .lead-lg{max-width:40em}
.tl-hero-main .hero-ctas{margin:var(--s-5) 0}
.tl-search{display:flex;gap:var(--s-2);max-width:720px;margin:var(--s-4) 0}
.tl-search .input{flex:1 1 auto;min-width:0}
.tl-searchresult{margin:var(--s-4) 0}
.tl-routes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);margin-top:var(--s-6)}
.tl-route{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);text-decoration:none;color:inherit}
.tl-route strong{font-size:var(--fs-lg);line-height:1.3}
.tl-block{padding:var(--s-8) 0 0}
.tl-block h2{margin:0 0 var(--s-4);font-size:var(--fs-2xl);line-height:1.15}
.tl-cat{margin:var(--s-6) 0 var(--s-3);font-size:var(--fs-lg)}
.tl-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
.tl-card{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5)}
.tl-card h3{margin:0;font-size:var(--fs-lg);line-height:1.25}
.tl-card .tl-card-q{margin:0;font-weight:600;color:var(--ink-soft)}
.tl-card .btn{align-self:flex-start;margin-top:auto}
.tl-card-dev{border-style:dashed}
.tl-card-head{display:flex;justify-content:space-between;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.tl-badge-ok{background:var(--ok-bg);color:var(--ok)}
.tl-badge-beta{background:var(--info-bg);color:var(--info)}
.tl-badge-dev{background:var(--surface-2);color:var(--ink-soft)}
.tl-keuzehulp .field{margin-bottom:var(--s-4)}
.tl-keuzehulp legend{font-weight:700;margin-bottom:var(--s-2)}
.tl-advies{margin-top:var(--s-4)}
.tl-advies:focus{outline:none}
.tl-answer{background:var(--surface);border:1px solid var(--border-soft);border-left:4px solid var(--green-bright);border-radius:var(--r-lg);padding:var(--s-5);margin:var(--s-4) 0 var(--s-8)}
.tl-short{font-size:var(--fs-lg);line-height:1.55;margin:0 0 var(--s-3)}
.tl-tool h2{margin:0 0 var(--s-4);font-size:var(--fs-2xl)}
.tl-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);align-items:start}
.tl-form{padding:var(--s-5)}
.tl-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3) var(--s-4)}
.tl-field{margin:0;min-width:0}
.tl-field legend{font-weight:600;font-size:var(--fs-sm);margin-bottom:var(--s-1)}
.tl-group{border:1px solid var(--border-soft);border-radius:var(--r-md);padding:var(--s-4);margin:var(--s-4) 0 0;min-width:0}
.tl-group>legend{font-weight:700;padding:0 var(--s-2)}
.tl-assumptions{margin-top:var(--s-4);border-top:1px solid var(--border-soft);padding-top:var(--s-3)}
.tl-assumptions summary{cursor:pointer;font-weight:600;padding:var(--s-2) 0}
.tl-assumptions .tl-fields{margin-top:var(--s-3)}
.tl-privacy{margin:var(--s-3) 0 0}
.tl-output{min-width:0}
.tl-example-badge{display:inline-block;margin:0 0 var(--s-2)}
.tl-result{min-width:0}
.tl-result:focus{outline:none}
.tl-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin-bottom:var(--s-4)}
.tl-kpi{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--s-4);display:flex;flex-direction:column;gap:2px;min-width:0;box-shadow:var(--shadow-1)}
.tl-kpi:first-child{background:var(--navy);color:#fff;border-color:var(--navy)}
.tl-kpi:first-child .tl-kpi-hint,.tl-kpi:first-child .tl-kpi-label{color:var(--footer-ink)}
.tl-kpi-label{font-size:var(--fs-sm);color:var(--ink-soft)}
.tl-kpi-value{font-size:clamp(1.15rem,4.2vw,1.5rem);line-height:1.15;letter-spacing:-.01em;white-space:nowrap}
.tl-kpi-hint{font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.35}
.tl-section{margin:var(--s-5) 0}
.tl-section h3{margin:0 0 var(--s-2);font-size:var(--fs-lg)}
.tl-table th[scope=row]{font-weight:500;text-align:left;color:var(--ink);text-transform:none;letter-spacing:0;font-size:var(--fs-sm);background:transparent}
.tl-table td{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-table .tl-sum th,.tl-table .tl-sum td{font-weight:700;border-top:2px solid var(--border-strong)}
.tl-note{display:block;font-size:var(--fs-xs);color:var(--ink-faint);font-weight:400}
.tl-explain{margin-top:var(--s-4);padding:var(--s-3) var(--s-4);background:var(--surface-2);border-radius:var(--r-md)}
.tl-explain summary{cursor:pointer;font-weight:600}
.tl-explain h4{margin:var(--s-3) 0 var(--s-1);font-size:var(--fs-md)}
.tl-formula{margin:var(--s-2) 0 0;font-size:var(--fs-sm)}
.tl-list{padding-left:1.2em;margin:0}
.tl-list li{margin:.35em 0}
.tl-list-inline{list-style:none;padding:0}
.tl-save{margin-top:var(--s-5);padding:var(--s-5);border-left:4px solid var(--green-bright)}
.tl-save h3{margin:0 0 var(--s-2)}
.tl-columns{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);margin-top:var(--s-8)}
.tl-section-block{margin-top:var(--s-8)}
.tl-section-block h2{font-size:var(--fs-xl);margin:0 0 var(--s-3)}
.tl-steps{padding-left:1.4em;margin:0}
.tl-steps li{margin:.5em 0}
.tl-steps-3{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);padding:0;list-style:none;counter-reset:st}
.tl-steps-3 li{counter-increment:st;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--s-5) var(--s-5) var(--s-5) 56px;position:relative;margin:0}
.tl-steps-3 li::before{content:counter(st);position:absolute;left:var(--s-4);top:var(--s-4);width:28px;height:28px;border-radius:50%;background:var(--green-bright);color:#fff;font-weight:800;display:grid;place-items:center}
.tl-sources{padding-left:1.2em;margin:0}
.tl-sources li{margin:.5em 0}
.tl-qlist{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-2)}
.tl-qlist li{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:var(--s-3) var(--s-4)}
.tl-qlist .tl-q{font-weight:600}
.tl-preflist{list-style:none;padding:0;margin:var(--s-3) 0}
.tl-preflist li{padding:var(--s-2) 0;border-bottom:1px solid var(--border-soft)}
.tl-kpi-inline{margin:var(--s-2) 0}
.tl-manage{margin-top:var(--s-4)}
.tl-portal .alert{margin-bottom:var(--s-4)}
.alert-warn{background:var(--warn-bg);color:var(--warn);display:flex;gap:var(--s-2);align-items:flex-start}
.alert-ok{background:var(--ok-bg);color:var(--ok)}
.field .error{display:block;color:var(--risk);font-size:var(--fs-sm);margin-top:var(--s-1)}
.tl-field .hint{display:block}
.chiprow{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin:var(--s-3) 0 0}
.tl-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green-bright);margin-right:6px;vertical-align:middle}
@media (min-width:640px){
  .tl-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-fields .tl-field:not(.tl-half){grid-column:1/-1}
  .tl-routes,.tl-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:960px){
  .tl-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .tl-form:not(.tl-form-long){position:sticky;top:calc(var(--header-h) + 16px)}
  .tl-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tl-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tl-kpi-value{font-size:1.6rem}
}
@media print{.tl-form,.tl-save,.site-header,.site-footer{display:none}.tl-grid{display:block}}

.tl-devlist{list-style:none;padding:0;margin:var(--s-2) 0 0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.tl-devlist li{background:var(--surface-2);border-radius:var(--r-pill);padding:4px 12px;font-size:var(--fs-sm);color:var(--ink-soft)}

/* Toegankelijkheid: eyebrow in kaarten en koppen in AA-groen (het frisgroen haalt 3:1 en is alleen voor accentvlakken) */
.tl-card .eyebrow,.tl-hero .eyebrow,.tl-route .eyebrow{color:var(--green)}
.table-wrap:focus-visible{outline:none;box-shadow:var(--focus)}