/* Draft Guide (docs/draft-guide/project-plan.md WS3), from the approved mockup
   (docs/draft-guide/mockup-2026.html), every rule scoped to #view-guide so the
   Board's other views are untouched. Rendered by js/draft-guide.js. */
#view-guide{--soft:#a3abc2;--amber-dim:rgba(240,165,0,.12);--good:#56b4e9;--warn:#e8743b;--pro:#cc79a7;
  --display:'Syne',system-ui,sans-serif;--mono:'Space Mono',ui-monospace,Menlo,monospace;
  display:flex;flex-direction:column;gap:28px;max-width:1100px;margin-top:18px;font-family:var(--display)}
#view-guide button{font:inherit;color:inherit}
#view-guide :focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#view-guide .dg-foot{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.7;border-top:1px solid var(--border);padding-top:14px}
#view-guide .dg-pick{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-family:var(--mono);font-size:12px}
#view-guide .dg-lockbox{display:flex;flex-direction:column;align-items:flex-start;gap:10px;color:var(--soft);font-size:13px;line-height:1.55}
#view-guide .dg-ph{height:10px;border-radius:4px;background:var(--surface2);margin:8px 0}
@media (prefers-reduced-motion:reduce){#view-guide *{transition:none!important}}
#view-guide h2{font-size:18px;font-weight:700;text-wrap:balance}
#view-guide .sec{display:flex;flex-direction:column;gap:12px}
#view-guide .head{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;justify-content:space-between}
#view-guide .head small{font-family:var(--mono);font-size:11px;color:var(--muted)}
#view-guide .box{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px}
#view-guide .prose{font-size:14.5px;line-height:1.7;color:#cfd3de;max-width:68ch;display:flex;flex-direction:column;gap:12px}
#view-guide .prose strong{color:var(--text)}
#view-guide .byline{font-family:var(--mono);font-size:11px;color:var(--muted)}
#view-guide .draft{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--bg);background:var(--amber);border-radius:4px;padding:2px 6px;vertical-align:middle}
#view-guide details>summary{cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--amber);list-style:none}
#view-guide details>summary::-webkit-details-marker{display:none}
#view-guide details[open]>summary .more{display:none}
#view-guide details:not([open])>summary .less{display:none}
#view-guide .edition{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
#view-guide .steps{display:flex;gap:6px;flex-wrap:wrap}
#view-guide .step{font-family:var(--mono);font-size:11px;padding:6px 10px;border-radius:6px;border:1px solid var(--border);color:var(--muted)}
#view-guide .step.done{color:var(--text)}
#view-guide .step.on{border-color:var(--amber);color:var(--amber);background:var(--amber-dim)}
#view-guide .btn{background:var(--amber);color:#111;border:0;border-radius:6px;padding:8px 14px;font-family:var(--mono);font-size:12px;font-weight:700;cursor:pointer}
#view-guide .btn.ghost{background:transparent;color:var(--amber);border:1px solid var(--amber)}
#view-guide .note{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.6}
#view-guide .changes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
#view-guide .chg{border:1px solid var(--border);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px}
#view-guide .chg h4{font-size:13px}
#view-guide .chg p{font-size:12.5px;color:var(--soft);line-height:1.5}
#view-guide .chg .eg{font-family:var(--mono);font-size:11px;color:var(--muted);border-top:1px solid var(--border);padding-top:6px}
#view-guide .str{width:100%;border-collapse:collapse;font-size:13px}
#view-guide .str th{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;font-weight:400}
#view-guide .str td{padding:9px 8px;border-top:1px solid var(--border);vertical-align:middle}
#view-guide .str td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
#view-guide .str .take{color:var(--soft);font-size:12.5px;line-height:1.45;min-width:220px}
#view-guide .pill{font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:4px;white-space:nowrap}
#view-guide .pill.up{color:var(--good);border:1px solid var(--good)}
#view-guide .pill.dn{color:var(--warn);border:1px solid var(--warn)}
#view-guide .pill.eq{color:var(--muted);border:1px solid var(--border)}
#view-guide .scroll{overflow-x:auto}
#view-guide .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
#view-guide .card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;gap:12px}
#view-guide .card .n{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--amber)}
#view-guide .card h3{font-size:14px;margin-bottom:4px}
#view-guide .card p{font-size:12.5px;color:var(--soft);line-height:1.5}
#view-guide .rgrid{width:100%;border-collapse:separate;border-spacing:4px;font-family:var(--mono);font-size:12px}
#view-guide .rgrid th{color:var(--muted);font-weight:400;font-size:11px;padding:4px}
#view-guide .rgrid td{text-align:center;padding:10px 4px;border-radius:6px;cursor:pointer;font-variant-numeric:tabular-nums}
#view-guide .rgrid td small{display:block;color:rgba(0,0,0,.6);font-size:10px}
#view-guide .rgrid tr.sel th{color:var(--amber)}
#view-guide .rgrid td.hunt{outline:2px solid var(--amber);outline-offset:-2px}
#view-guide .cv-box{background:var(--surface);border:0.5px solid var(--border);border-radius:10px;overflow-x:auto}
#view-guide #dg-grid{min-width:560px;display:grid;grid-template-columns:120px repeat(4,minmax(0,1fr)) 110px;font-family:var(--mono)}
#view-guide .cv-gh{padding:12px;font-size:11px;color:var(--muted);border-bottom:1px solid var(--border)}
#view-guide .cv-gh.cv-c{text-align:center;font-size:12px;font-weight:700}
#view-guide .cv-round{text-align:left;cursor:pointer;padding:12px;font-family:var(--display);font-size:13px;font-weight:700;background:transparent;border:0;border-bottom:1px solid #222838;border-left:3px solid transparent;color:var(--text)}
#view-guide .cv-round.sel{color:var(--amber);border-left-color:var(--amber);background:#f0a50014}
#view-guide .cv-cell{padding:10px 4px;text-align:center;border-bottom:1px solid #222838}
#view-guide .cv-cell.few{opacity:.6}
#view-guide .cv-cell.edge{outline:2px solid var(--amber);outline-offset:-2px}
#view-guide .cv-pct{font-size:15px;font-weight:700}
#view-guide .cv-sub{font-size:10px;height:13px}
#view-guide .cv-tot{padding:12px 6px;text-align:center;font-size:14px;color:#a3abc2;border-bottom:1px solid #222838}
#view-guide .cv-tot.sel{background:#f0a50014}
#view-guide .cv-key{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--muted)}
#view-guide .cv-key i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:4px}
#view-guide .cv-take{background:var(--surface2);border-radius:8px;padding:12px 16px;font-size:14px;line-height:1.5}
#view-guide .take{font-size:13.5px;line-height:1.6;color:#cfd3de;border-left:3px solid var(--amber);padding:2px 0 2px 12px}
#view-guide .ptabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#view-guide .ptabs button{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:7px 14px;font-family:var(--mono);font-size:12px;color:var(--muted);cursor:pointer}
#view-guide .ptabs button[aria-selected="true"]{color:var(--amber);border-color:var(--amber);background:var(--amber-dim)}
#view-guide .ptabs .sep{width:1px;height:22px;background:var(--border);margin:0 4px}
#view-guide .posgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
#view-guide .cols{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;align-items:end;height:190px;padding-top:6px}
#view-guide .col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;min-width:0}
#view-guide .col .pv{font-family:var(--mono);font-size:10.5px;color:var(--text);font-variant-numeric:tabular-nums}
#view-guide .col .bx{width:100%;max-width:44px;border-radius:4px 4px 0 0;background:var(--amber)}
#view-guide .col .bx.lo{background:#c9b98a}
#view-guide .col .bx.vlo{background:#a3abc2}
#view-guide .axis{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;border-top:1px solid var(--border);padding-top:6px;font-family:var(--mono);font-size:10.5px;text-align:center}
#view-guide .axis span{color:var(--soft)}
#view-guide .axis small{display:block;color:var(--muted);font-size:9.5px}
#view-guide .proline{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;color:var(--pro);letter-spacing:.06em;text-transform:uppercase}
#view-guide .proline::before,#view-guide .proline::after{content:"";flex:1;height:1px;background:var(--pro)}
#view-guide .stabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#view-guide .stabs .sep{width:1px;height:22px;background:var(--border);margin:0 4px}
#view-guide .stabs button{background:transparent;border:1px solid var(--border);border-radius:6px;padding:5px 11px;font-family:var(--mono);font-size:11px;color:var(--muted);cursor:pointer}
#view-guide .stabs button[aria-pressed="true"]{color:var(--amber);border-color:var(--amber);background:var(--amber-dim)}
#view-guide .rgrid tr.now th{color:var(--amber)}
#view-guide #dg-str{table-layout:fixed;min-width:520px;border-spacing:0;font-family:var(--mono)}
#view-guide #dg-str th{padding:12px;font-size:12px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--border);text-align:center}
#view-guide #dg-str tr th:first-child{width:120px;text-align:left;font-family:var(--display);font-size:13px;color:var(--text);border-bottom:1px solid #222838}
#view-guide #dg-str tr:first-child th:first-child{border-bottom:1px solid var(--border)}
#view-guide #dg-str tr.now th:first-child{color:var(--amber);border-left:3px solid var(--amber);background:#f0a50014}
#view-guide #dg-str td{height:46px;padding:0;vertical-align:middle;text-align:center;font-size:15px;font-weight:700;border-radius:0;border-bottom:1px solid #222838;cursor:default}
#view-guide #dg-str tr.avg td{background:transparent!important;color:#a3abc2!important;font-size:14px;font-weight:400}
#view-guide #dg-str tr.avg th{color:var(--muted)}
#view-guide .rgrid tr.avg td{background:var(--surface2)!important;color:var(--soft)!important}
#view-guide .hr{display:flex;flex-direction:column;gap:5px}
#view-guide .hr .row{display:grid;grid-template-columns:34px 1fr 74px;gap:8px;align-items:center;font-family:var(--mono);font-size:11px}
#view-guide .hr .bar{height:12px;background:var(--surface2);border-radius:3px;overflow:hidden}
#view-guide .hr .bar i{display:block;height:100%;background:var(--amber)}
#view-guide .hr .row.cls .bar i{background:var(--good)}
#view-guide .hr .v{color:var(--soft);text-align:right;font-variant-numeric:tabular-nums}
#view-guide .hist{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
#view-guide .hist th{color:var(--muted);font-weight:400;text-align:right;padding:5px 6px;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
#view-guide .hist th:first-child,#view-guide .hist td:first-child{text-align:left}
#view-guide .hist td{text-align:right;padding:5px 6px;border-top:1px solid var(--border);color:var(--soft)}
#view-guide .hist tr.now td{color:var(--amber);font-weight:700}
#view-guide .filters{display:flex;gap:6px;flex-wrap:wrap}
#view-guide .filters button{background:transparent;border:1px solid var(--border);border-radius:999px;padding:5px 11px;font-family:var(--mono);font-size:11px;color:var(--muted);cursor:pointer}
#view-guide .filters button[aria-pressed="true"]{border-color:var(--good);color:var(--good)}
#view-guide table.rank{width:100%;border-collapse:collapse;font-size:13px}
#view-guide .rank th{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400;text-align:left;padding:8px 8px;white-space:nowrap}
#view-guide .rank td{padding:8px 8px;border-top:1px solid var(--border);white-space:nowrap}
#view-guide .rank td.n,#view-guide .rank th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
#view-guide .rank tr.p{cursor:pointer}
#view-guide .rank tr.p:hover td{background:var(--surface2)}
#view-guide .rank .nm{font-weight:600}
#view-guide .rank .col{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
#view-guide .dec{display:inline-block;min-width:30px;text-align:center;font-family:var(--mono);font-size:11px;font-weight:700;border-radius:4px;padding:2px 5px;color:#111}
#view-guide .neg{color:var(--warn)}
#view-guide .dash{color:var(--muted)}
#view-guide .bar2{display:inline-block;width:64px;height:6px;background:var(--surface2);border-radius:3px;vertical-align:middle;margin-right:6px;overflow:hidden}
#view-guide .bar2 i{display:block;height:100%;background:var(--amber)}
#view-guide .read{font-family:var(--mono);font-size:10.5px}
#view-guide .read.good{color:var(--good)}
#view-guide .read.bad{color:var(--warn)}
#view-guide .read.muted{color:var(--muted)}
#view-guide tr.open td{background:var(--surface2)}
#view-guide tr.detail td{background:var(--surface2);white-space:normal;padding:12px 14px 16px}
#view-guide .det{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;font-size:12.5px;color:var(--soft);line-height:1.55}
#view-guide .det h5{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
#view-guide .det ul{list-style:none;display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:11.5px}
#view-guide .lock td{text-align:center;padding:18px;color:var(--soft);font-size:13px;white-space:normal}
#view-guide .lock .btn{margin-left:8px}
#view-guide .prohint{font-family:var(--mono);font-size:10px;color:var(--pro);border:1px solid var(--pro);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:middle}
#view-guide .blur{filter:blur(5px);user-select:none;pointer-events:none}
@media(max-width:800px){#view-guide .posgrid{grid-template-columns:minmax(0,1fr)}}
/* page fixes over the mockup: the bar column's .col also matched the college
   line in the rankings, and the intro's first paragraph sat on the next one */
#view-guide .rank .col{display:inline;height:auto;gap:0}
#view-guide details.prose>div.prose{margin-top:12px}
#view-guide a.btn{text-decoration:none;display:inline-block}