/* Testjezelf — jobcoach (coach.js) (v1.0.0, 2026-09-27) — bouwt op tz.css-variabelen */
.tjc-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:18px 0}
.tjc-type{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.tjc-type span{grid-row:span 2;font-size:1.4rem}
.tjc-type small{color:var(--ink-soft);line-height:1.4}
.tjc-ask{margin:14px 0 0}
.tjc-item{margin-top:6px}
.tjc-scale{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:22px 0 6px}
.tjc-pt{flex:1;display:grid;place-items:center;height:56px;border:none;background:transparent;cursor:pointer;padding:0}
.tjc-pt i{display:block;width:calc(44px * var(--s));height:calc(44px * var(--s));border-radius:50%;border:2px solid var(--brand);transition:transform .12s,background .12s}
.tjc-pt[data-v^="-"] i{border-color:var(--coral)}
.tjc-pt[data-v="0"] i{border-color:var(--ink-soft)}
.tjc-pt:hover i{transform:scale(1.1)}
.tjc-pt.on i{background:var(--brand)}
.tjc-pt.on[data-v^="-"] i{background:var(--coral)}
.tjc-pt.on[data-v="0"] i{background:var(--ink-soft)}
.tjc-pt:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:12px}
.tjc-ends{display:flex;justify-content:space-between;font-size:.82rem;color:var(--ink-soft)}
.tjc-tops{display:grid;gap:10px;margin:14px 0}
.tjc-top{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--surface-2)}
.tjc-top>span{font-size:1.6rem}
.tjc-top small{color:var(--ink-soft)}
.tjc-rows{display:grid;gap:8px}
.tjc-row{display:grid;grid-template-columns:minmax(170px,1fr) 2fr 3ch;align-items:center;gap:12px}
.tjc-row small{color:var(--ink-soft)}
.tjc-row input{width:100%;accent-color:var(--brand)}
.tjc-row output{font-weight:700;text-align:right}
.tjc-jobhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tjc-jobhead h2{margin:0}
.tjc-filter{font-size:.9rem;color:var(--ink-soft);display:flex;gap:6px;align-items:center}
.tjc-jobs{list-style:none;padding:0;display:grid;gap:10px}
.tjc-jobs li{margin:0;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.tjc-job{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tjc-job .tz-meta{margin-top:6px}
.tjc-kp{background:color-mix(in oklch,var(--coral) 14%,var(--surface));border-color:color-mix(in oklch,var(--coral) 35%,var(--line));color:var(--ink)}
.tjc-m{display:flex;align-items:center;gap:12px}
.tjc-pct{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--brand-deep);min-width:3.2ch;text-align:right}
@media (max-width:560px){.tjc-row{grid-template-columns:1fr 3ch}.tjc-row label{grid-column:1/-1}.tjc-pt{height:48px}}
@media print{.tjc-filter,.tjc-rows input{display:none}}

/* Loopbaanpad (pad.js) */
.tjp-choose{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:14px 0}
.tjp-q{border:none;padding:0;margin:20px 0 0}
.tjp-q legend{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:8px}
.tjp-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.tjp-sum{font-size:.9rem;color:var(--ink-soft);background:var(--surface-2);border-radius:10px;padding:8px 12px}
.tjp-tl{list-style:none;padding:0;margin:20px 0;position:relative}
.tjp-tl::before{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tjp-step{display:grid;grid-template-columns:36px 1fr;gap:14px;margin:0 0 18px;position:relative}
.tjp-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;
  font-family:var(--display);font-weight:800;z-index:1}
.tjp-step h2{margin:.25em 0 .4em}
.tjp-route{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0}
.tjp-route p{margin:.4em 0 0}
.tjp-list{padding-left:0;list-style:none;display:grid;gap:8px}
.tjp-list li{border-left:3px solid var(--brand);padding:2px 0 2px 12px;margin:0}
.tjp-help{background:color-mix(in oklch,var(--brand) 9%,var(--surface));border:1px solid color-mix(in oklch,var(--brand) 30%,var(--line));
  border-radius:12px;padding:14px 16px;margin:18px 0}
.tjp-help p{margin:.4em 0 0}
@media print{.tjp-tl::before{display:none}}

/* Jobcoach-banner op de homepage (landing.css-context) */
.tjc-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.tjc-banner .tjc-icons{font-size:1.6rem;letter-spacing:.25em}