/* ---------- 05 roles ---------- */
.rl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; }
.rl-cov { display: grid; justify-items: end; gap: 0.3rem; text-align: right; }
.rl-num { font: 300 clamp(2.6rem, 6vw, 5rem) / 1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -0.04em; color: var(--accent); }
.rl-field { display: none; width: 100%; height: clamp(110px, 28vh, 250px); margin-bottom: 0.4rem; }
.js .rl-field { display: block; }
.rl-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.6rem, 1.6vw, 1.2rem); }
.rl-cards li { padding: clamp(0.9rem, 1.8vw, 1.4rem); background: var(--card); border: 1px solid var(--rule); border-radius: 6px; }
.rl-count { display: block; margin-bottom: 0.6rem; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--accent); }
.rl-cards h3 { font: 400 clamp(1.25rem, 2.1vw, 1.8rem) / 1.1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -0.015em; }
.rl-cards p { margin: 0.4rem 0 0; font-size: 0.92rem; line-height: 1.4; color: var(--fg-2); }
@media (max-width: 700px) {
  .js .rl-field { display: none; }
  .rl-head { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .rl-cov { justify-items: start; text-align: left; }
  .rl-cards { grid-template-columns: 1fr 1fr; }
  .rl-cards p { font-size: 0.82rem; }
}

/* ---------- 06 vision pipeline (ink) ---------- */
.vp-grid { display: grid; grid-template-columns: 0.62fr 1.5fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: stretch; }
.vp-shot { position: relative; padding: 1rem 0.9rem 2.2rem; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.vp-srows { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font: 400 0.82rem / 1.2 var(--mono); }
.vp-srows li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0.4rem; border-radius: 3px; }
.vp-srows b { font-weight: 400; color: var(--fg-2); }
.vp-srows .more { color: var(--fg-2); justify-content: center; }
.vp-bands i { position: absolute; left: 0; right: 0; height: 42%; border-top: 1px dashed var(--accent); border-bottom: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.vp-bands i:nth-child(1) { top: 0; } .vp-bands i:nth-child(2) { top: 29%; } .vp-bands i:nth-child(3) { top: 58%; }
.vp-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--accent) 45%, transparent); opacity: 0; }
.vp-tiles { position: absolute; left: 0.9rem; bottom: 0.7rem; }
.vp-right { display: grid; gap: clamp(0.7rem, 2vh, 1.2rem); align-content: start; }
.vp-table { width: 100%; border-collapse: collapse; font: 400 0.84rem / 1.2 var(--mono); }
.vp-table caption { position: absolute; left: -9999px; }
.vp-table th { padding: 0 0.6rem 0.55rem 0; text-align: left; font: 500 0.66rem / 1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); border-bottom: 1px solid var(--rule); }
.vp-table td { padding: 0.5rem 0.6rem 0.5rem 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.vp-table td:first-child { font-family: var(--sans); font-weight: 500; }
.vp-table [data-res] { color: var(--accent); white-space: nowrap; }
.vp-table tr[data-bad] td { background: color-mix(in srgb, var(--warn) calc(var(--bad, 1) * 16%), transparent); }
.vp-table tr[data-bad] [data-res] { color: var(--warn); font-weight: 500; }
.vp-gate { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem 1.6rem; align-items: center; padding: clamp(0.8rem, 1.6vw, 1.2rem); background: var(--card); border: 1px solid var(--rule); border-radius: 6px; }
.vp-score { display: grid; gap: 0.2rem; }
.vp-score .mono { font: 300 clamp(2.2rem, 4.4vw, 3.6rem) / 1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -0.04em; color: var(--accent); }
.vp-meter { position: relative; height: 8px; margin-bottom: 1.3rem; background: color-mix(in srgb, var(--rule) 70%, transparent); border-radius: 2px; }
.vp-meter i { position: absolute; inset: 0 auto 0 0; width: 83%; background: var(--accent); border-radius: 2px; transform-origin: 0 50%; }
.vp-meter u { position: absolute; left: 80%; top: -5px; bottom: -5px; width: 2px; background: var(--fg); }
.vp-meter span { position: absolute; top: 14px; font-size: 0.64rem; color: var(--fg-2); }
.vp-meter span:nth-of-type(1) { left: 0; } .vp-meter span:nth-of-type(2) { right: 0; }
.vp-verdict { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0.7rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; border-top: 1px solid var(--rule); font-size: 0.9rem; }
.vp-verdict li { display: flex; align-items: center; gap: 0.5rem; }
.vp-verdict li::before { content: "✓"; color: var(--accent); }
.vp-verdict .hold::before { content: "!"; color: var(--warn); font-weight: 600; }
.vp-verdict .purge::before { content: none; }
.vp-verdict .purge svg { color: var(--accent); }
@media (max-width: 860px) {
  #vision .lede { display: none; }
  .vp-grid { grid-template-columns: 1fr; }
  .vp-shot { display: none; }
  .vp-table { font-size: 0.74rem; }
  .vp-table td, .vp-table th { padding-right: 0.35rem; }
  .vp-table td { padding-top: 0.34rem; padding-bottom: 0.34rem; }
  .vp-gate { grid-template-columns: 1fr; gap: 0.5rem; padding: 0.7rem 0.9rem; }
  .vp-score { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 0.7rem; }
  .vp-score .mono { font-size: 2rem; }
  .vp-verdict { padding-top: 0.5rem; font-size: 0.8rem; gap: 0.3rem 1rem; }
}
@media (max-height: 760px) { .vp-table td { padding-top: 0.32rem; padding-bottom: 0.32rem; } .vp-srows { gap: 0.3rem; } }

/* ---------- 07 playbooks ---------- */
.pb-line { position: relative; margin: clamp(1.4rem, 5vh, 3rem) 0 clamp(1rem, 3vh, 2rem); padding-top: 3rem; }
.pb-track { position: relative; height: 4px; background: var(--rule); border-radius: 2px; }
.pb-fill { position: absolute; inset: 0 auto 0 0; width: 75%; background: var(--accent); border-radius: 2px; transform-origin: 0 50%; }
.pb-handle { position: absolute; left: 75%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--accent); border: 3px solid var(--snow); border-radius: 50%; }
.pb-flag { position: absolute; left: 75%; bottom: 18px; transform: translateX(-50%); white-space: nowrap; padding: 0.4rem 0.7rem; background: var(--ink); color: #fff; border-radius: 4px; font: 500 0.7rem / 1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.pb-flag::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.pb-gens { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; justify-content: space-between; font: 500 0.68rem / 1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.pb-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.6vw, 1.2rem); }
.pb-cards li { position: relative; display: grid; gap: 0.7rem; padding: clamp(1rem, 2vw, 1.5rem); background: var(--card); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.pb-name { font: 400 clamp(1.2rem, 2vw, 1.7rem) / 1.1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -0.015em; }
.pb-status { display: grid; font: 500 0.74rem / 1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.pb-status b { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 500; }
.pb-status svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.pb-status .s-draft, .pb-status .s-review { display: none; }
.js .pb-status .s-draft, .js .pb-status .s-review { display: inline-flex; }
.js .pb-status .s-live { opacity: 0; }
.s-draft { color: var(--fg-2); } .s-review { color: var(--ink-2); } .s-review svg { color: var(--warn); } .s-live { color: var(--ok-text); }
.pb-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--warn); transform-origin: 0 50%; }
@media (max-width: 700px) {
  #playbooks .lede { display: none; }
  .pb-cards { grid-template-columns: 1fr; gap: 0.5rem; }
  .pb-cards li { grid-template-columns: 1fr; gap: 0.35rem; padding: 0.75rem 0.9rem; }
  .pb-name { font-size: 1.1rem; }
  .pb-gens li:nth-child(even) { display: none; }
  .pb-flag { font-size: 0.6rem; }
  .pb-line { margin: 1.2rem 0 0.9rem; padding-top: 2.4rem; }
}