/* ITIL 4 page: figure text, the value stream builder, the practice finder, the maturity check and the tool tabs */

/* ---------- figure text and shapes ---------- */
.motion-svg .it-mono{font-family:var(--font-mono);font-size:13px;fill:var(--ink);text-anchor:start}
.motion-svg .it-mono.o{fill:var(--orange-strong)}
.it-dot{fill:#fff;stroke:var(--line-strong);stroke-width:2;transition:fill .3s ease,stroke .3s ease}
.it-dot.m-hl{fill:var(--orange);stroke:var(--orange)}
.legend-row i.it-k-s{background:var(--subtle)}
.legend-row i.it-k-c{background:var(--cyan)}
.legend-row i.it-k-o{background:var(--orange)}
.legend-row i.it-k-t{background:var(--teal)}

/* ---------- shared bits ---------- */
.it-small{font-size:.9rem;color:var(--muted);margin:10px 0 0;max-width:80ch}
.it-principles{margin-top:4px}
.no-js .it-js{display:none}
.it-tool{margin-top:26px}
.it-tool h3{font-size:var(--fs-h4);margin:0 0 8px}
.it-tool .sim-presets{margin-top:14px}
.it-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:14px;align-items:start}
.it-tool-grid > *{min-width:0}
.it-in{display:grid;gap:12px;align-content:start}
.it-field{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--ink)}
.it-field select,.it-field input{font:inherit;font-weight:500;font-size:.92rem;padding:8px 10px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);max-width:100%;min-width:0}
.it-verdict{margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:.92rem;border:1px solid var(--line)}
.it-verdict.ok{background:#F0FDFA;border-color:#99F6E4}
.it-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.it-verdict.bad{background:#FFF1F2;border-color:#FECDD3}

/* ---------- tables that stack on phones ---------- */
.it-px-t tbody th{font-size:.92rem;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600;background:none;white-space:nowrap}
.it-px-t tr[hidden]{display:none}
.it-px-t td:nth-child(2){color:var(--muted);white-space:nowrap}

/* ---------- value stream builder ---------- */
.it-stream{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;counter-reset:vs}
.it-stream li{display:grid;grid-template-columns:190px minmax(0,1fr) minmax(0,.8fr);gap:14px;align-items:start;padding:12px 14px 12px 48px;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);counter-increment:vs;font-size:.92rem}
.it-stream li::before{content:counter(vs);position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;background:var(--orange-tint);color:var(--orange-strong);border:1px solid var(--orange-border)}
.it-act{font-weight:700;color:var(--ink)}
.it-prac{color:var(--muted);font-size:.86rem}

/* ---------- practice finder ---------- */
.it-pxbar{display:flex;flex-wrap:wrap;align-items:end;gap:14px 24px;margin-top:6px}
.it-pxbar .it-field{flex:1 1 260px}
.it-pxbar .sim-presets{margin-top:0}
.it-count{font-size:.88rem;color:var(--muted);margin:14px 0 6px}

/* ---------- maturity check ---------- */
.it-bars{display:grid;gap:7px}
.it-bar{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center;font-size:.8rem;color:var(--muted)}
.it-track{position:relative;height:14px;border-radius:7px;background:#EEF2F6;overflow:hidden}
.it-track span{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:var(--teal);transition:width .3s ease}
.it-track span.lo{background:#F59E0B}
.it-track span.hi{background:var(--teal-strong)}

/* ---------- tool tabs ---------- */
.it-panel .hint{font-size:.92rem;color:var(--muted);margin-top:14px}

@media (max-width:860px){
  .it-tool-grid{grid-template-columns:minmax(0,1fr)}
  .it-stream li{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (max-width:600px){
  .table-wrap > table.it-st{min-width:0}
  .it-st thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .it-st,.it-st tbody,.it-st tr,.it-st td,.it-st tbody th{display:block;width:100%}
  .it-st tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .it-st tr[hidden]{display:none}
  .it-st td,.it-st tbody th{border:0;padding:2px 0;white-space:normal}
  .it-st td::before{content:attr(data-l);display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-top:4px}
  .it-st td:first-child{font-weight:600;color:var(--ink)}
  .it-st td:first-child::before{margin-top:0}
  .it-px-t td:nth-child(2){white-space:normal}
  .it-stream li{padding-left:44px}
  .it-bar{grid-template-columns:90px 1fr}
}