/* /plan/: the ODC / OWC cover game. Tokens only (docs/DESIGN-SYSTEM.md). Docs: docs/PLAN-GAME.md */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pl-pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 var(--s3);padding:0}
.pl-pills li{background:var(--navy-50);color:var(--navy-900);border:1px solid var(--navy-100);border-radius:999px;padding:4px 14px;font-weight:600;font-size:var(--fs-small)}
.pl-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.pl-fine{font-size:var(--fs-small);color:var(--text-muted);max-width:75ch}
.pl-how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.pl-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s2)}

/* step navigation */
.pl-nav ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 var(--s3);padding:0;counter-reset:pl}
.pl-nav li{counter-increment:pl}
.pl-nav button{min-height:44px;padding:0 14px;border:1.5px solid var(--navy-200);border-radius:var(--r1);background:var(--card);color:var(--navy-900);font-weight:600;cursor:pointer}
.pl-nav button::before{content:counter(pl) ". ";color:var(--text-muted);font-weight:500}
.pl-nav button[aria-current="step"]{background:var(--navy-900);color:var(--card);border-color:var(--navy-900)}
.pl-nav button[aria-current="step"]::before{color:var(--navy-200)}
.pl-panel h3{font-family:var(--font-display);font-size:var(--fs-2);margin-bottom:var(--s2)}
.pl-panel h4{font-family:var(--font-display);font-size:var(--fs-1);margin:var(--s4) 0 var(--s1)}
.pl-btns{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.pl-panel .hint{display:block;margin-top:var(--s1);font-size:var(--fs-small);color:var(--text-muted)}
.pl-panel select,.pl-panel input[type=text],.pl-panel input[type=number],.pl-panel input[type=email],.pl-panel input[type=tel],.pl-panel textarea{width:100%;min-height:44px;padding:8px 12px;border:1.5px solid var(--field-line);border-radius:var(--r1);background:var(--field-bg)}
.pl-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:var(--s3) 0 var(--s1)}
.pl-facts div{background:var(--navy-50);border-radius:var(--r1);padding:var(--s2)}
.pl-facts dt{font-size:var(--fs-small);color:var(--text-muted)}
.pl-facts dd{margin:4px 0 0;font-family:var(--font-mono);font-weight:500;color:var(--navy-900)}

/* the radio segments used on /market/ */
.mk-seg{border:0;padding:0;margin:0 0 var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2)}
.mk-seg legend{font-weight:600;font-size:.9375rem;margin-bottom:6px;padding:0}
.mk-seg label{position:relative;display:inline-flex}
.mk-seg input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.mk-seg span{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);border:1.5px solid var(--navy-200);border-radius:var(--r1);background:var(--card);color:var(--navy-900);font-weight:600}
.mk-seg input:checked+span{background:var(--navy-900);color:var(--card);border-color:var(--navy-900)}
.mk-seg input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}

/* tables */
.pl-tablewrap{position:relative;overflow-x:auto;margin:var(--s2) 0}
.pl-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.pl-table caption{text-align:left;color:var(--text-muted);padding:0 0 8px}
.pl-table caption.sr{position:absolute}
.pl-table th,.pl-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.pl-table thead th{background:var(--navy-50);color:var(--navy-900);font-weight:600;white-space:nowrap}
.pl-table td.n,.pl-table th.n{font-family:var(--font-mono);text-align:right;white-space:nowrap}
.pl-table tr.is-rec td,.pl-table tr.is-rec th{background:var(--navy-50)}
.pl-gh{font-family:var(--font-display);font-size:var(--fs-1);margin:var(--s4) 0 var(--s1)}
.pl-hsn code{font-family:var(--font-mono);font-size:.8125rem;white-space:nowrap}
.pl-meter{height:14px;border-radius:7px;background:var(--grey-200);overflow:hidden;margin-top:8px}
.pl-meter span{display:block;height:100%;width:0;background:var(--pass)}
.pl-meter.warn span{background:var(--warn)}.pl-meter.bad span{background:var(--fail)}

/* play */
.pl-track{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 var(--s3);padding:0}
.pl-track li{min-width:48px;text-align:center;padding:6px 8px;border-radius:var(--r1);border:1.5px solid var(--line);font-family:var(--font-mono);font-size:.8125rem;color:var(--text-muted);background:var(--card)}
.pl-track li.skip{opacity:.45;border-style:dashed}
.pl-track li.seen{border-color:var(--navy-300);color:var(--navy-900)}
.pl-track li.here{background:var(--navy-900);border-color:var(--navy-900);color:var(--card)}
.pl-track li.end-done{background:var(--pass);border-color:var(--pass);color:var(--card)}
.pl-play{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--s3);align-items:start}
.pl-lvl{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3);background:var(--card);display:grid;gap:var(--s2)}
.pl-lvl h4{margin:0;font-size:var(--fs-1)}
.pl-role{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--navy-50);color:var(--navy-900);border-radius:999px;padding:2px 10px}
.pl-ev{background:var(--warn-bg);color:var(--warn);border-radius:var(--r1);padding:var(--s2);font-weight:500}
.pl-ev b{display:block}
.pl-opts{border:0;margin:0;padding:0;display:grid;gap:8px}
.pl-opts legend{font-weight:600;margin-bottom:6px;padding:0}
.pl-opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--navy-200);border-radius:var(--r1);padding:10px 12px;cursor:pointer;background:var(--card)}
.pl-opt input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--navy)}
.pl-opt:has(input:checked){border-color:var(--navy-900);background:var(--navy-50)}
.pl-opt small{display:block;color:var(--text-muted)}
.pl-prob{display:flex;height:22px;border-radius:11px;overflow:hidden;background:var(--grey-200)}
.pl-prob span{display:block;height:100%}
.pl-prob .f{background:var(--navy)}.pl-prob .s{background:var(--grey-500)}.pl-prob .b{background:var(--warn)}.pl-prob .l{background:var(--fail)}
.pl-probkey{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-small);color:var(--text-muted);margin:0;padding:0;list-style:none}
.pl-probkey b{font-family:var(--font-mono);color:var(--text)}
.pl-roll{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.pl-result{border-radius:var(--r2);padding:var(--s3);display:grid;gap:var(--s1)}
.pl-result.done{background:var(--pass-bg);color:var(--pass)}
.pl-result.claim{background:var(--fail-bg);color:var(--fail)}
.pl-result h4{margin:0}
.pl-result p{color:inherit}
.pl-side{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2);background:var(--card)}
.pl-side h4{margin:0 0 8px;font-size:1rem}
.pl-log{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:420px;overflow:auto;font-size:var(--fs-small)}
.pl-log li{border-bottom:1px solid var(--line);padding-bottom:6px}
.pl-log .o-fwd{color:var(--pass)}.pl-log .o-stay{color:var(--text-muted)}.pl-log .o-back{color:var(--warn)}.pl-log .o-loss{color:var(--fail)}

/* results */
.pl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin:var(--s2) 0}
.pl-kpi{background:var(--navy-50);border-radius:var(--r1);padding:var(--s2)}
.pl-kpi b{display:block;font-family:var(--font-display);font-size:var(--fs-3);color:var(--navy-900);line-height:1.1}
.pl-kpi span{font-size:var(--fs-small);color:var(--text-muted)}
.pl-fig{margin:var(--s3) 0;padding:var(--s2)}
.pl-svg{width:100%;height:auto}
.pl-svg text{font-family:var(--font-mono);font-size:11px;fill:var(--text-muted)}
.pl-svg .grid{stroke:var(--grey-200);stroke-width:1}
.pl-svg .ax{fill:var(--text-muted)}
.pl-svg .w{fill:none;stroke-width:1.6;stroke-linejoin:round;opacity:.38}
.pl-svg .w.done{stroke:var(--navy)}
.pl-svg .w.claim{stroke:var(--fail)}
.pl-svg .w.stuck{stroke:var(--grey-500)}
.pl-svg .lane-claim{fill:var(--fail-bg)}
.pl-svg .lane-done{fill:var(--pass-bg)}
.pl-bars{display:grid;gap:8px}
.pl-bar{display:grid;grid-template-columns:minmax(120px,200px) 1fr 64px;gap:12px;align-items:center;font-size:var(--fs-small)}
.pl-bar i{display:block;height:14px;background:var(--grey-200);border-radius:7px;overflow:hidden}
.pl-bar i span{display:block;height:100%;background:var(--navy)}
.pl-bar.claim i span{background:var(--fail)}
.pl-bar b{font-family:var(--font-mono);text-align:right;font-weight:500}
.pl-clauses{display:grid;gap:10px;padding-left:1.4em}
.pl-clauses small{display:block;color:var(--text-muted)}
.pl-details{margin-top:var(--s3)}
.pl-details summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}

/* SOP */
.pl-sopgrp{margin-top:var(--s3)}
.pl-sopgrp h4{margin:0 0 8px}
.pl-step{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.pl-step input[type=checkbox]{width:22px;height:22px;margin-top:10px;accent-color:var(--navy)}
.pl-step textarea{min-height:44px;resize:vertical}
.pl-step .meta{font-size:var(--fs-small);color:var(--text-muted);margin-top:4px}
.pl-step .ctl{display:flex;gap:4px}
.pl-step .ctl button{min-width:44px;min-height:44px;border:1.5px solid var(--navy-200);background:var(--card);border-radius:var(--r1);cursor:pointer;color:var(--navy-900)}
.pl-step.off textarea{opacity:.5;text-decoration:line-through}
.pl-add{margin-top:8px}
.pl-sum{margin:var(--s2) 0;display:grid;gap:4px;font-size:var(--fs-small)}
.pl-sum div{display:flex;justify-content:space-between;gap:var(--s2);border-bottom:1px solid var(--line);padding:4px 0}
.pl-sum b{font-family:var(--font-mono);font-weight:500;text-align:right}
.pl-method .pl-two{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s3)}
.pl-method h3{font-family:var(--font-display);font-size:var(--fs-1);margin-bottom:8px}
#pl-printarea{display:none}

@media (max-width:960px){.pl-how,.pl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.pl-play{grid-template-columns:minmax(0,1fr)}.pl-method .pl-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.pl-how,.pl-kpis,.pl-facts{grid-template-columns:minmax(0,1fr)}.pl-bar{grid-template-columns:1fr 64px}.pl-bar i{grid-column:1/-1;order:3}.pl-step{grid-template-columns:auto 1fr}.pl-step .ctl{grid-column:1/-1}}
@media print{
  body *{visibility:hidden}
  #pl-printarea,#pl-printarea *{visibility:visible}
  #pl-printarea{display:block;position:absolute;left:0;top:0;width:100%;color:var(--ink);background:var(--card);font-size:11pt}
  #pl-printarea h1{font-size:18pt;margin:0 0 6pt}#pl-printarea h2{font-size:13pt;margin:12pt 0 4pt}
  #pl-printarea li{margin:0 0 4pt}#pl-printarea small{color:var(--grey-700)}
}

/* documents first */
.pl-drop{display:grid;gap:6px;place-items:center;text-align:center;border:2px dashed var(--navy-300);border-radius:var(--r2);background:var(--navy-50);padding:var(--s5) var(--s3);cursor:pointer;margin-bottom:var(--s2);min-height:160px}
.pl-drop:hover,.pl-drop.over,.pl-drop:focus-within{border-color:var(--navy-900);background:var(--navy-100)}
.pl-drop input{position:absolute;opacity:0;width:1px;height:1px}
.pl-drop b{font-family:var(--font-display);font-size:var(--fs-2);color:var(--navy-900)}
.pl-drop span{color:var(--text-muted);max-width:60ch}
.pl-readbox{background:var(--pass-bg);color:var(--pass);border-radius:var(--r1);padding:var(--s2);margin:var(--s2) 0}
.pl-readbox.bad{background:var(--warn-bg);color:var(--warn)}
.pl-readbox ul{margin:8px 0 0;padding-left:1.2em;display:grid;gap:2px;font-size:var(--fs-small)}
.pl-readbox small{opacity:.85}
.pl-got{outline:2px solid var(--pass);outline-offset:1px}