/* Assembled from the agreed mockups (docs/design/mockups): i-submit (shared, requirements, checklist), h-document (viewer). */

/* font sets: f1 Plex, f2 Barlow/Source, f3 Archivo/Martian */
:root,.f1{--sans:"IBM Plex Sans",system-ui,sans-serif;--head:"IBM Plex Sans Condensed",system-ui,sans-serif;--serif:"IBM Plex Serif",Georgia,serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--headw:700;--headstretch:100%;--monostretch:100%}
.f2{--sans:"Source Sans 3",system-ui,sans-serif;--head:"Barlow Semi Condensed",system-ui,sans-serif;--serif:"Source Serif 4",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,monospace;--headw:700;--headstretch:100%;--monostretch:100%}
.f3{--sans:"Archivo",system-ui,sans-serif;--head:"Archivo",system-ui,sans-serif;--serif:"Source Serif 4",Georgia,serif;--mono:"Martian Mono",ui-monospace,monospace;--headw:700;--headstretch:80%;--monostretch:80%}
/* palettes: p1 paper+olive, p2 white+navy, p3 cool grey+field green with gold signal */
:root,.p1{--page:#F5F2EA;--surface:#FFFFFF;--band:#ECE8DC;--ink:#1C1F1A;--ink2:#4A4F45;--muted:#6B6F63;--rule:#D6D1C4;--rule2:#E6E2D7;--accent:#4F5A2E;--accentink:#FFFFFF;--bar:#FFFFFF;--barink:#1C1F1A;--sel:#FAF6E8;--red:#A3221B;--amber:#7A4F00;--amberfill:#F2C14E;--blue:#1F4E79;--hl:#F2E3A0;--viewer:#E9E5DA}
.p2{--page:#FFFFFF;--surface:#FFFFFF;--band:#EEF0F2;--ink:#111417;--ink2:#3D444B;--muted:#5E666E;--rule:#C9CED2;--rule2:#E3E6E8;--accent:#1D3550;--accentink:#FFFFFF;--bar:#1D3550;--barink:#FFFFFF;--sel:#F2F6FA;--red:#B42318;--amber:#8A5A00;--amberfill:#F6C445;--blue:#1D4F80;--hl:#FFE58A;--viewer:#E8EBEE}
.p3{--page:#EEF0EE;--surface:#FFFFFF;--band:#E3E7E2;--ink:#151B17;--ink2:#3F4842;--muted:#5D665F;--rule:#CCD3CD;--rule2:#E2E6E2;--accent:#3E4B2C;--accentink:#FFFFFF;--bar:#151B17;--barink:#E7EBDD;--sel:#F4F6EC;--red:#B42318;--amber:#7D6510;--amberfill:#D8B42C;--blue:#1D4F80;--hl:#E6ECC3;--viewer:#E1E5E0}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--page);color:var(--ink);font:14px/1.45 var(--sans)}
.lbl,th,h2,.k,.tl .lb{font-family:var(--head);font-weight:var(--headw);font-stretch:var(--headstretch);text-transform:uppercase;letter-spacing:.07em}
.mono,.ref,.cite,td.id,.tl .dt,.dates .v,.dates .was,.vbar .f{font-family:var(--mono);font-stretch:var(--monostretch)}
.top{display:flex;align-items:center;gap:24px;padding:0 20px;height:42px;background:var(--bar);color:var(--barink);border-bottom:1px solid var(--rule)}
.brand{font:var(--headw) 13px var(--head);font-stretch:var(--headstretch);letter-spacing:.12em;text-transform:uppercase}
.crumbs{font-size:13px;opacity:.75} .top .sp{flex:1} .who{font-size:13px;opacity:.8}
.head{padding:16px 20px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;background:var(--surface);border-bottom:2px solid var(--ink)}
.ref{font-size:12px;color:var(--blue)}
h1{font:600 22px/1.25 var(--sans);margin:4px 0 6px;max-width:75ch}
.meta{color:var(--ink2);font-size:13px;display:flex;flex-wrap:wrap;gap:4px 18px} .meta b{font-weight:500;color:var(--ink)}
.count{text-align:right} .count .lbl{font-size:11px;color:var(--ink2)}
.count .big{font:var(--headw) 34px/1 var(--head);font-stretch:var(--headstretch)} .count .big small{font:500 14px var(--mono);color:var(--ink2)}
/* timeline: positioned by date in JS, labels avoid collisions, vertical list on narrow screens */
.tl{background:var(--band);border-bottom:1px solid var(--rule);padding:10px 20px 8px}
.tl .axis{position:relative;height:96px}
.tl .line{position:absolute;left:0;right:0;top:46px;height:2px;background:var(--ink2)}
.tl .past{position:absolute;left:0;top:46px;height:2px;background:var(--rule)}
.tl .mk{position:absolute;top:39px;width:16px;height:16px;margin-left:-8px;background:var(--surface);border:2px solid var(--ink)}
.tl .mk.dead{background:var(--red);border-color:var(--red);transform:rotate(45deg) scale(.9)}
.tl .mk.old{border-style:dashed;border-color:var(--muted)}
.tl .todayline{position:absolute;top:34px;height:22px;width:2px;margin-left:-1px;background:var(--blue)}
.tl .lab{position:absolute;white-space:nowrap;line-height:1.25}
.tl .lab.below{top:60px} .tl .lab.above{top:0}
.tl .lab .lb{font:var(--headw) 11px var(--head);font-stretch:var(--headstretch);text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.tl .lab .dt{font:12px var(--mono);color:var(--ink)}
.tl .lab.old .dt{color:var(--muted);text-decoration:line-through}
.tl .lab.dead .lb,.tl .lab.dead .dt{color:var(--red);font-weight:600}
.tl .lab.today .lb{color:var(--blue)}
.tl ol.vlist{display:none;list-style:none;margin:0;padding:0}
@media (max-width:760px){
  .tl .axis{display:none} .tl ol.vlist{display:block}
  .tl ol.vlist li{display:grid;grid-template-columns:16px max-content minmax(0,1fr);gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--rule2);font-size:13px}
  .tl ol.vlist li:last-child{border-bottom:0}
  .tl ol.vlist i{width:12px;height:12px;border:2px solid var(--ink);background:var(--surface);display:block}
  .tl ol.vlist li.dead i{background:var(--red);border-color:var(--red);transform:rotate(45deg) scale(.85)}
  .tl ol.vlist li.old i{border-style:dashed;border-color:var(--muted)} .tl ol.vlist li.old .d{text-decoration:line-through;color:var(--muted)}
  .tl ol.vlist li.today i{border-color:var(--blue);background:var(--blue);height:2px;width:14px;border-width:1px}
  .tl ol.vlist li.today{color:var(--blue)} .tl ol.vlist li.dead{color:var(--red);font-weight:600}
  .tl ol.vlist .d{font:12px var(--mono);white-space:nowrap}
}
/* panes */
.grid{display:grid;grid-template-columns:230px minmax(0,1fr) minmax(380px,38%);min-height:calc(100vh - 230px)}
nav.idx{border-right:1px solid var(--rule);padding:12px 0;background:var(--page)}
nav.idx a{display:flex;justify-content:space-between;padding:6px 20px;color:var(--ink);text-decoration:none;font-size:13px}
nav.idx a.on{background:var(--surface);border-left:3px solid var(--accent);padding-left:17px;font-weight:600}
nav.idx .n{font:12px var(--mono);color:var(--muted)} nav.idx .n.r{color:var(--red);font-weight:500}
nav.idx h4{font:var(--headw) 11px var(--head);font-stretch:var(--headstretch);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:14px 20px 6px}
main{padding:16px 20px;background:var(--surface);border-right:1px solid var(--rule)}
.box{margin:0 0 16px} .box .h{font:800 12px var(--head);font-stretch:var(--headstretch);letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:3px}
.box .b{padding:9px 12px;font-size:14px}
.box.warn{border:3px solid var(--ink)} .box.warn .h{background:var(--ink);color:#fff}
.box.caution{border:2px solid var(--amber)} .box.caution .h{background:var(--amberfill);color:#2E2000}
.dates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule);margin-bottom:18px}
.dates>div{padding:8px 10px;border-right:1px solid var(--rule)} .dates>div:last-child{border-right:0}
.k{font-size:11px;color:var(--muted)} .dates .v{font-size:14px;font-weight:500} .dates .was{font-size:12px;color:var(--muted);text-decoration:line-through}
h2{font-size:13px;margin:6px 0 8px;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:4px}
h2 .c{font:12px var(--mono);letter-spacing:0;color:var(--muted);text-transform:none}
table{width:100%;border-collapse:collapse;margin-bottom:18px}
th{font-size:11px;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--rule)}
td{border-bottom:1px solid var(--rule2);padding:8px;vertical-align:top}
td.id{font-size:12px;color:var(--muted);white-space:nowrap}
tr.sel td{background:var(--sel)}
.ko{font:800 10px var(--head);font-stretch:var(--headstretch);letter-spacing:.14em;color:#fff;background:var(--red);padding:1px 5px;margin-right:6px}
.flag{font:700 10px var(--head);font-stretch:var(--headstretch);letter-spacing:.1em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);padding:0 4px;margin-left:6px}
.cite{font-size:12px;color:var(--blue);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
aside.viewer{background:var(--viewer);display:flex;flex-direction:column}
.vbar{display:flex;gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--rule);background:var(--page);font-size:12px}
.vbar .sp{flex:1}
.page{margin:16px;background:#fff;box-shadow:0 0 0 1px var(--rule);padding:26px 30px;font:15px/1.6 var(--serif);color:#222}
mark{background:var(--hl);box-shadow:0 0 0 2px var(--hl)}
.cf{border-bottom:1px solid var(--rule2);padding:8px 0}
.cf .v{font:12px var(--mono);color:var(--muted)}
.adv{display:flex;gap:10px;align-items:baseline;margin-top:6px;padding:6px 10px;background:#EEF0E4;border-left:3px solid var(--accent);font-size:13px;color:var(--ink)}
.adv .al{flex:none;font:700 10px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.box .adv{margin:0 12px 10px}
.empty{margin-top:18px;border:1px dashed var(--rule);padding:12px 14px;color:var(--ink2);font-size:14px}
@media (max-width:1200px){.grid{grid-template-columns:200px minmax(0,1fr)} aside.viewer{display:none}}
@media (max-width:760px){
  .head{grid-template-columns:1fr} .count{text-align:left} .top .crumbs,.top .who{display:none}
  .grid{grid-template-columns:1fr;min-height:0;align-content:start} nav.idx{display:flex;overflow-x:auto;padding:0;border-right:0;border-bottom:1px solid var(--rule)}
  nav.idx h4{display:none} nav.idx a{white-space:nowrap;gap:8px} nav.idx a.on{border-left:0;border-bottom:3px solid var(--accent);padding-left:20px}
  .dates{grid-template-columns:1fr 1fr} .dates>div:nth-child(2){border-right:0} .dates>div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  th:nth-child(3),td:nth-child(3){display:none} main{padding:14px 16px} .head,.tl{padding-left:16px;padding-right:16px}
}

/* requirements screen */
.grid{min-height:calc(100vh - 120px)}
main{padding:0}
.tools{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--rule);padding:12px 20px 10px}
.trow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:8px}
.trow:last-child{margin-bottom:0}
.search{flex:1 1 280px;min-width:200px;border:1px solid var(--ink2);background:var(--surface);padding:7px 10px;font:14px var(--sans);color:var(--ink)}
.search:focus{outline:2px solid var(--accent);outline-offset:1px}
.seg{display:inline-flex;border:1px solid var(--ink2)}
.seg button{border:0;border-right:1px solid var(--ink2);background:var(--surface);padding:6px 10px;font:500 13px var(--sans);color:var(--ink);cursor:pointer;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button .n{font:12px var(--mono);color:var(--muted);margin-left:4px}
.seg button.on{background:var(--ink);color:#fff} .seg button.on .n{color:#D9D6CC}
.tl2{font:var(--headw) 11px var(--head);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--rule);background:var(--page);padding:3px 8px;font:13px var(--sans);color:var(--ink);cursor:pointer}
.chip .n{font:11px var(--mono);color:var(--muted);margin-left:3px}
.chip.on{border-color:var(--accent);background:#EEF0E4;color:var(--ink)}
.result{font:12px var(--mono);color:var(--muted);margin-left:auto}
.list{padding:4px 20px 30px}
.grp{font:var(--headw) 12px var(--head);text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);margin:18px 0 0;padding-bottom:4px;border-bottom:1px solid var(--ink);display:flex;justify-content:space-between}
.grp span{font:12px var(--mono);letter-spacing:0;color:var(--muted);text-transform:none}
.rq{display:grid;grid-template-columns:54px minmax(0,1fr) 128px;gap:10px;padding:10px 8px;border-bottom:1px solid var(--rule2);cursor:pointer;align-items:start}
.rq:hover{background:#FBF9F2}
.rq.sel{background:var(--sel);box-shadow:inset 3px 0 0 var(--accent)}
.rq .id{font:12px var(--mono);color:var(--muted);padding-top:2px}
.rq .tx{line-height:1.45}
.rq .sub{margin-top:4px;font-size:13px;color:var(--ink2)}
.rq .sub b{font-weight:600;color:var(--ink)}
.rq .refs{font:12px var(--mono);color:var(--blue);text-align:right;line-height:1.6}
.rq .refs span{display:block;text-decoration:underline;text-underline-offset:2px}
.imp{display:inline-block;font:700 10px var(--head);letter-spacing:.12em;text-transform:uppercase;padding:1px 5px;margin-right:6px;vertical-align:1px}
.imp.knockout{background:var(--red);color:#fff}
.imp.major{border:1px solid var(--ink2);color:var(--ink2);padding:0 4px}
.imp.minor{color:var(--muted);border:1px solid var(--rule);padding:0 4px}
.tag2{display:inline-block;font:700 10px var(--head);letter-spacing:.1em;text-transform:uppercase;padding:0 4px;margin-left:6px;vertical-align:1px}
.tag2.cond{color:var(--blue);border:1px solid var(--blue)}
.tag2.info{color:var(--muted);border:1px dashed var(--muted)}
.tag2.chg{color:var(--amber);border:1px solid var(--amber)}
.stage{font:12px var(--mono);color:var(--muted)}
.empty2{padding:30px 0;color:var(--ink2)}
aside.viewer .page{min-height:200px}
.vmeta{margin:14px 16px 0;font-size:13px;color:var(--ink2)}
.vmeta .vt{font:600 15px var(--sans);color:var(--ink);margin-bottom:4px}
.vmeta .also{font:12px var(--mono);color:var(--blue);margin-top:6px}
.hist{margin:10px 16px 0;border-left:3px solid var(--amberfill);background:#FBF3D9;padding:6px 10px;font-size:13px;color:var(--amber)}
.inl{display:none}
mark{background:var(--hl);box-shadow:0 0 0 2px var(--hl)}
@media (max-width:1200px){.inl.open{display:block;grid-column:1/-1;margin-top:8px;background:#fff;border:1px solid var(--rule);padding:12px 14px;font:14px/1.55 var(--serif)}}
@media (max-width:760px){
  .rq{grid-template-columns:44px minmax(0,1fr)} .rq .refs{grid-column:2;text-align:left} .rq .refs span{display:inline;margin-right:10px}
  .tools{padding:10px 16px} .list{padding:4px 12px 30px} .result{margin-left:0;width:100%}
  .seg button{padding:6px 7px}
}

/* documents-to-submit screen */
main{min-width:0}
.seg{max-width:100%;overflow-x:auto}
.fg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.ck.later{border:1px dashed var(--muted);background:transparent;cursor:default}
.prog{padding:14px 20px 4px}
.prog .row1{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.prog .big2{font:var(--headw) 24px/1 var(--head);font-stretch:var(--headstretch)}
.prog .big2 small{font:500 13px var(--mono);color:var(--ink2);margin-left:4px}
.prog .due{font:12px var(--mono);color:var(--ink2)}
.bar{display:flex;height:10px;margin:10px 0 6px;background:var(--rule2)}
.bar i{display:block;height:100%}
.st-uploaded{background:var(--accent)} .st-ready{background:#8C9A5B} .st-drafting{background:var(--amberfill)} .st-todo{background:var(--rule2)}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:6px} .legend i{width:10px;height:10px;display:inline-block}
.legend .n{font-family:var(--mono)}
.demo{font-size:12px;color:var(--muted);margin-top:6px;font-style:italic}
.boxes{padding:10px 20px 0}
.boxes .box{margin-bottom:12px}
.box .b p{margin:0 0 4px} .box .b .src{font:12px var(--mono);color:var(--blue)}
.lane{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;align-items:baseline;margin:22px 0 0;padding-bottom:5px;border-bottom:1px solid var(--ink)}
.lane b{font:var(--headw) 12px var(--head);font-stretch:var(--headstretch);text-transform:uppercase;letter-spacing:.08em;color:var(--ink)}
.lane b span{font:12px var(--mono);letter-spacing:0;color:var(--muted);text-transform:none;margin-left:6px}
.lane .how{font-size:13px;color:var(--ink2)}
.dr{display:grid;grid-template-columns:28px 64px minmax(0,1fr) 170px 92px;gap:10px;padding:10px 8px;border-bottom:1px solid var(--rule2);align-items:start;cursor:pointer}
.dr:hover{background:#FBF9F2}
.dr.sel{background:var(--sel);box-shadow:inset 3px 0 0 var(--accent)}
.ck{width:20px;height:20px;border:2px solid var(--ink2);background:var(--surface);margin-top:1px;display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--sans);color:#fff;cursor:pointer;padding:0}
.ck.drafting{border-color:var(--amber);background:linear-gradient(90deg,var(--amberfill) 50%,var(--surface) 50%)}
.ck.ready{border-color:#6E7A45;background:#8C9A5B} .ck.uploaded{border-color:var(--accent);background:var(--accent)}
.dr .id{font:12px var(--mono);color:var(--muted);line-height:1.5}
.dr .id .ln{display:block;color:var(--ink2)}
.dr .tt{font-weight:500;line-height:1.4}
.dr .sub{margin-top:3px;font-size:13px;color:var(--ink2);line-height:1.45}
.dr .sub b{font-weight:600;color:var(--ink)}
.tpl{display:inline-block;margin-top:5px;font:12px var(--mono);color:var(--blue);border:1px solid var(--rule);background:var(--page);padding:1px 6px;text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.tpl:before{content:"Form ";font:700 10px var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.own select{width:100%;border:1px solid var(--rule);background:var(--surface);font:13px var(--sans);color:var(--ink);padding:3px 4px}
.own select.none{color:var(--muted);border-style:dashed}
.own .sl{margin-top:4px;font:11px var(--mono);color:var(--ink2)}
.dr .refs{font:12px var(--mono);color:var(--blue);text-align:right;line-height:1.6}
.dr .refs span{display:block;text-decoration:underline;text-underline-offset:2px}
.dr .adv{grid-column:3/-1;margin-top:0}
.det{padding:14px 16px 0}
.det .vt{font:600 16px/1.35 var(--sans);margin:4px 0 10px}
.det dl{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 12px;margin:0;font-size:13px}
.det dt{font:var(--headw) 11px var(--head);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding-top:2px}
.det dd{margin:0;color:var(--ink)}
.det h3{font:var(--headw) 11px var(--head);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 0 0}
aside.viewer .page{margin:8px 16px 12px;padding:18px 22px;font-size:14px}
aside.viewer .page .file{font:11px var(--mono);color:var(--muted);margin-bottom:8px}
aside.viewer{overflow:auto;position:sticky;top:0;max-height:100vh}
@media (max-width:1400px){.dr{grid-template-columns:28px 56px minmax(0,1fr) 150px}.dr .refs{grid-column:3;text-align:left}.dr .refs span{display:inline;margin-right:10px}}
@media (max-width:760px){
  .dr{grid-template-columns:28px minmax(0,1fr)} .dr .id{grid-column:2;grid-row:1;display:flex;gap:10px} .dr .id .ln{display:inline}
  .dr .ck{grid-row:1/3} .dr .mainc{grid-column:2} .dr .own{grid-column:2;display:flex;gap:10px;align-items:center} .dr .own select{width:auto;max-width:60%} .dr .own .sl{margin:0}
  .dr .refs{grid-column:2} .dr .adv{grid-column:1/-1}
  .prog,.boxes{padding-left:16px;padding-right:16px} .lane{margin-top:16px}
}

/* phone v2: compact header */
@media (max-width:760px){
  .head{padding:10px 16px!important;gap:6px;grid-template-columns:minmax(0,1fr)!important}
  .head>*{min-width:0}
  .head .ref{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .head h1{font-size:17px;line-height:1.3;margin:2px 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .head .meta{font-size:12px;gap:2px 12px}
  .count{display:flex;align-items:baseline;gap:8px} .count .lbl{font-size:10px} .count .big{font-size:22px!important}
}

/* phone v2: filters behind a button */
.ftog{display:none}
@media (max-width:760px){
  .ftog{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ink2);background:var(--surface);padding:6px 10px;font:500 13px var(--sans);color:var(--ink);cursor:pointer}
  .ftog .n{font:12px var(--mono);background:var(--accent);color:#fff;padding:0 5px}
  .ftog .n:empty{display:none}
  .tools .trow:not(:first-child){display:none} .tools.open .trow{display:flex}
  .search{flex-basis:0}
}

/* document viewer screen */
.dv{display:grid;grid-template-columns:300px minmax(0,1fr) minmax(340px,30%);grid-template-rows:minmax(0,1fr);height:calc(100vh - 110px)}
.dv > *{min-height:0}
.dl{border-right:1px solid var(--rule);background:var(--page);overflow:auto;padding:10px 0 30px}
.dl h4{font:var(--headw) 11px var(--head);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:14px 16px 4px}
.dl a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:6px 16px;color:var(--ink);text-decoration:none;font-size:13px;line-height:1.35;border-left:3px solid transparent}
.dl a:hover{background:#EFEBDF}
.dl a.on{background:var(--surface);border-left-color:var(--accent);font-weight:600}
.dl a .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl a .pg{font:12px var(--mono);color:var(--muted)}
.dl a .rf{grid-column:1/-1;font:11px var(--mono);color:var(--muted)}
.dl a.sup{color:var(--muted)} .dl a.sup .nm{text-decoration:line-through}
.dl a .supt{font:700 9px var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);padding:0 3px;margin-left:4px;text-decoration:none;display:inline-block}
.dc{display:flex;flex-direction:column;min-width:0;background:var(--viewer)}
.dbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--rule)}
.dbar .t{font:600 14px var(--sans);min-width:0;flex:1 1 240px}
.dbar .t small{display:block;font:12px var(--mono);color:var(--muted);font-weight:400}
.dbar input{border:1px solid var(--ink2);padding:5px 8px;font:13px var(--sans);width:220px}
.btn{border:1px solid var(--ink2);background:var(--surface);padding:5px 10px;font:500 13px var(--sans);color:var(--ink);cursor:pointer;text-decoration:none}
.lang{font:12px var(--mono);color:var(--muted)}
.pages{overflow:auto;padding:18px 22px 60px;flex:1 1 auto;min-height:0}
.pg2{background:#fff;box-shadow:0 0 0 1px var(--rule);margin:0 auto 18px;max-width:860px;padding:26px 34px 30px;position:relative}
.pg2 .pn{position:absolute;top:8px;right:12px;font:11px var(--mono);color:var(--muted)}
.pg2 pre{margin:0;white-space:pre-wrap;word-break:break-word;font:14px/1.6 var(--serif);color:#222}
mark{background:var(--hl);box-shadow:0 0 0 1px #E5CF6B;cursor:pointer;position:relative}
mark.mko{background:#F7D6D2;box-shadow:0 0 0 1px #E3A49C}
mark.mcf{background:#FBE7B5;box-shadow:0 0 0 1px var(--amberfill)}
mark .mid{font:600 10px var(--mono);color:#fff;background:var(--ink2);padding:0 3px;margin-right:3px;vertical-align:2px;white-space:nowrap}
mark.mko .mid{background:var(--red)} mark.mcf .mid{background:var(--amber)}
mark.flash{outline:3px solid var(--accent);outline-offset:2px}
.ref{font-size:12px;color:var(--blue)}
.side{border-left:1px solid var(--rule);background:var(--surface);overflow:auto}
.side .sh{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--rule);padding:10px 16px}
.side .sh b{font:var(--headw) 12px var(--head);text-transform:uppercase;letter-spacing:.08em}
.side .sh span{font:12px var(--mono);color:var(--muted);margin-left:6px}
.side .f2{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.side .sg{font:var(--headw) 11px var(--head);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:14px 16px 4px}
.it{display:grid;grid-template-columns:46px minmax(0,1fr);gap:8px;padding:8px 16px;border-bottom:1px solid var(--rule2);cursor:pointer;font-size:13px;line-height:1.4}
.it:hover{background:#FBF9F2} .it.on{background:var(--sel);box-shadow:inset 3px 0 0 var(--accent)}
.it .i{font:12px var(--mono);color:var(--muted)} .it .p{font:11px var(--mono);color:var(--blue);margin-top:2px}
.it .ko{font:800 9px var(--head);letter-spacing:.12em;color:#fff;background:var(--red);padding:0 4px;margin-right:5px}
@media (max-width:1250px){.dv{grid-template-columns:240px minmax(0,1fr)} .side{display:none}}
@media (max-width:760px){
  .dv{grid-template-columns:1fr;height:auto} .dl{display:none} .pages{padding:10px 8px 40px} .pg2{padding:20px 16px}
  .dbar input{width:100%} .mobsel{display:block!important}
  .side{display:block;border-left:0;border-top:1px solid var(--rule)}
}
.mobsel{display:none;width:100%;margin-top:4px;padding:6px;font:13px var(--sans)}


/* phone v2: document bar stays visible while reading */
@media (max-width:760px){
  .dbar{position:sticky;top:0;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;padding:8px 10px}
  .dbar .t{display:none} .dbar .mobsel{grid-column:1;grid-row:1;margin:0;min-width:0} .dbar .btn{grid-column:2;grid-row:1;padding:5px 8px}
  .dbar input{grid-column:1/-1;grid-row:2;width:100%}
}