:root{--navy:#1f3864;--red:#c8102e;--ink:#1a1d21;--mut:#6b7280;--line:#e3e6eb;--bg:#f4f6f8}
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
color:var(--ink);background:var(--bg)}
a{color:var(--red)}
.top{background:var(--navy);color:#fff;display:flex;align-items:center;gap:16px;
padding:0 18px;height:52px;position:sticky;top:0;z-index:50}
.top .brand{font-weight:700;letter-spacing:.02em}
.top .env{font-size:11px;background:#375288;padding:2px 8px;border-radius:99px}
.top .sp{margin-left:auto}
.top a{color:#cfe0ff;text-decoration:none;font-size:13px}
.wrap{display:grid;grid-template-columns:238px 1fr;min-height:calc(100vh - 52px)}
.side{background:#fff;border-right:1px solid var(--line);padding:10px 0;overflow:auto}
/* Collapsible groups. <details> not JS — see navHtml(). The caret is drawn from
   the element's own open state so it can never disagree with what is shown. */
.grp{border-bottom:1px solid #f2f4f7}
.grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
padding:10px 16px;font-size:11.5px;font-weight:700;text-transform:uppercase;
letter-spacing:.05em;color:var(--mut);user-select:none;min-height:38px}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary:hover{background:#f7f9fb;color:var(--navy)}
.grp>summary .ic{font-size:11px;color:#aab2bd;width:13px;text-align:center}
.grp>summary::after{content:'▸';margin-left:auto;font-size:11px;color:#b9bfc8;
transition:transform .12s ease}
.grp[open]>summary::after{transform:rotate(90deg)}
.grp[open]>summary{color:var(--navy);background:#fbfcfd}
.side a,.side span.off{display:flex;align-items:center;gap:8px;padding:7px 16px 7px 38px;
font-size:13.5px;text-decoration:none;color:#22262b}
.side a .ext{color:#aab2bd;font-size:10px}
.top .viewstore{background:#375288;padding:4px 11px;border-radius:5px;font-size:12px;
font-weight:600;text-decoration:none}
.top .viewstore:hover{background:#48659e}
.side a:hover{background:#f0f3f7;color:var(--red)}
.side a.cur{background:#eef2f9;color:var(--navy);font-weight:700;
box-shadow:inset 3px 0 0 var(--navy)}
.side span.off{color:#aeb4bd;cursor:not-allowed}
.side .ph{margin-left:auto;font-size:10px;color:#b9bfc8;border:1px solid #e3e6eb;
padding:1px 5px;border-radius:3px}
.side .bd{margin-left:auto;font-size:11px;background:var(--red);color:#fff;
padding:1px 7px;border-radius:99px;font-weight:700}
.main{padding:22px 26px;min-width:0}
h1{font-size:21px;margin:0 0 4px}
.sub{color:var(--mut);margin:0 0 18px}
.cards{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:13px 17px;min-width:132px}
.card b{display:block;font-size:26px;line-height:1.15}
.card span{font-size:12px;color:var(--mut)}
.card.hi b{color:var(--red)}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
border-radius:8px;overflow:hidden}
th{background:#f7f9fb;text-align:left;font-size:11.5px;text-transform:uppercase;
letter-spacing:.04em;color:var(--mut);padding:9px 11px;border-bottom:1px solid var(--line)}
td{padding:9px 11px;border-bottom:1px solid #f0f2f5;vertical-align:top;font-size:13px}
tr:last-child td{border-bottom:0}
.sev{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
.sev.High{background:#fde7ea;color:#96122b}
.sev.Medium{background:#fff4d6;color:#8a5b00}
.sev.Low{background:#e8effd;color:#1c3f80}
.val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
background:#f6f7f9;padding:1px 5px;border-radius:3px;word-break:break-word}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filters select,.filters input{padding:7px 10px;border:1px solid #ccd2da;border-radius:5px;
font-size:13px;background:#fff}
.filters .go{background:var(--navy);color:#fff;border:0;padding:8px 15px;border-radius:5px;
cursor:pointer;font-weight:600}
.filters .clr{color:var(--mut);font-size:12.5px}
.st{padding:4px 7px;border:1px solid #ccd2da;border-radius:5px;font-size:12px;background:#fff}
.st.fixed{background:#e8f6ec;border-color:#9fd6b0}
.st.wont_fix{background:#f1f2f4;color:#6b7280}
.st.in_progress{background:#fff4d6;border-color:#e8c86a}
.pager{display:flex;gap:14px;align-items:center;justify-content:center;margin:20px 0;font-size:13px}
.login{max-width:380px;margin:9vh auto;background:#fff;border:1px solid var(--line);
border-radius:10px;padding:26px}
.login h1{font-size:18px}
.login input{width:100%;padding:11px 12px;font-size:16px;border:1px solid #ccd2da;
border-radius:6px;margin-bottom:12px}
.login button{width:100%;padding:11px;background:var(--navy);color:#fff;border:0;
border-radius:6px;font-size:15px;font-weight:600;cursor:pointer}
.err{background:#fdecef;border:1px solid #f0b8c2;color:#8a0b20;padding:9px 12px;
border-radius:6px;margin-bottom:12px;font-size:13px}
.ok{background:#e8f6ec;border:1px solid #9fd6b0;color:#186b32;padding:9px 12px;
border-radius:6px;margin-bottom:14px;font-size:13px}
.note{font-size:12px;color:var(--mut);margin-top:6px}
/* --- Customers: search and real filters. v1.65.0, 9/1/2026. --- */
.custsearch{display:flex;gap:8px;margin:0 0 10px;max-width:720px}
.custsearch input{flex:1;padding:9px 11px;font-size:14px;border:1px solid #ccd2da;
border-radius:6px}
.custsearch .go{padding:9px 18px;background:var(--navy);color:#fff;border:0;
border-radius:6px;font-size:13.5px;font-weight:600;cursor:pointer}
.filterbox{margin:0 0 16px;border:1px solid var(--line);border-radius:8px;background:#fff}
.filterbox>summary{cursor:pointer;padding:10px 14px;font-size:13px;font-weight:600;
color:#33404a;list-style:none}
.filterbox>summary::-webkit-details-marker{display:none}
.filterbox>summary::after{content:"+";float:right;color:var(--navy);font-weight:400}
.filterbox[open]>summary::after{content:"−"}
.filters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:12px 16px;padding:4px 14px 16px;margin:0;border-top:1px solid var(--line)}
.fl{display:flex;flex-direction:column;gap:4px}
.fl>span{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.fl select,.fl input{padding:8px 9px;font-size:13.5px;border:1px solid #ccd2da;
border-radius:5px;background:#fff;font-family:inherit;width:100%;box-sizing:border-box}
.fl-act{flex-direction:row;align-items:end;gap:12px}
.fl-act .go{padding:8px 16px;background:var(--navy);color:#fff;border:0;border-radius:5px;
font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
tr.rowoff{opacity:.5}
.ctabs{display:flex;gap:2px;flex-wrap:wrap;margin:18px 0 0;border-bottom:1px solid var(--line)}
.ctab{padding:9px 15px;font-size:13.5px;color:#5b6570;text-decoration:none;border:1px solid transparent;
border-bottom:0;border-radius:7px 7px 0 0;position:relative;top:1px}
.ctab:hover{background:#f4f6f8}
.ctab.on{background:#fff;border-color:var(--line);color:#12161f;font-weight:600}
.ctab .n{display:inline-block;background:#eef1f5;color:#5b6570;font-size:11px;font-weight:700;
padding:1px 6px;border-radius:99px;margin-left:5px}
.ctab.on .n{background:var(--navy);color:#fff}
.cpanel{border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;background:#fff;
padding:18px}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ch{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);
margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.caddr{font-size:14px;line-height:1.6;margin:0 0 6px}
.pf textarea{width:100%;padding:9px 10px;font-size:14px;border:1px solid #ccd2da;
border-radius:6px;font-family:inherit;box-sizing:border-box}
@media(max-width:760px){.cgrid{grid-template-columns:1fr}}
/* --- Promotion editor. v1.57.0, 9/1/2026. Wide labels and a hint under every
   field: these are the fields that decide what a customer is charged, and the
   cost of one being misread is a discount nobody meant to give. */
.warn{background:#fff8e6;border:1px solid #e8c86a;color:#8a6d00;padding:9px 12px;
border-radius:6px;margin-bottom:14px;font-size:13px}
.flag.warnflag{background:#fff8e6;color:#8a6d00}
.pf{max-width:900px}
.pf-h{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);
margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
.fld{margin:0 0 16px;display:flex;flex-direction:column}
.fld label{font-size:13px;font-weight:600;margin-bottom:5px;color:#26303c}
.fld input,.fld select{padding:9px 10px;font-size:14px;border:1px solid #ccd2da;
border-radius:6px;background:#fff;font-family:inherit;width:100%;box-sizing:border-box}
.fld input:focus,.fld select:focus{outline:2px solid var(--navy);border-color:var(--navy)}
.fld input:disabled,.fld select:disabled{background:#f4f6f8;color:#6b7280}
.fld .hint{font-size:12px;color:var(--mut);margin-top:5px;line-height:1.5;
max-width:none;background:none;padding:0}
.fld .hint code{background:#f1f2f4;padding:1px 4px;border-radius:3px}
.pf-actions{margin:24px 0 0;display:flex;gap:14px;align-items:center}
.st-go{background:var(--navy);color:#fff;border-color:var(--navy);padding:9px 18px;
font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.pf-cancel{font-size:13px;color:var(--mut)}
@media(max-width:760px){.pf-grid{grid-template-columns:1fr}}
@media(max-width:900px){.wrap{grid-template-columns:1fr}.side{border-right:0;
border-bottom:1px solid var(--line)}}

/* --- Overnight Results (RuggedGrade). Every box below reserves its height so
   nothing reflows after paint; see the CLS note in the storefront changelog. */
.ovg{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;align-items:start}
@media(max-width:1150px){.ovg{grid-template-columns:1fr}}
.pnl{background:#fff;border:1px solid var(--line);border-radius:8px;padding:15px 17px}
.pnl h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);
margin:0 0 13px;font-weight:700}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
padding:3px 11px;border-radius:99px;border:1px solid;white-space:nowrap}
.chip .gl{font-size:13px;line-height:1}
.chip.s-ok{background:#e8f6ec;border-color:#9fd6b0;color:#186b32}
.chip.s-overridden{background:#fff4d6;border-color:#e8c86a;color:#8a5b00}
.chip.s-blocked{background:#fdecef;border-color:#f0b8c2;color:#8a0b20}
.chip.s-failed{background:#fdecef;border-color:#f0b8c2;color:#8a0b20}
.chip.s-never{background:#f1f2f4;border-color:#d8dbe0;color:#5b616b}
.chip.s-unknown{background:#f1f2f4;border-color:#d8dbe0;color:#5b616b}
.stale{background:#fff4d6;border:1px solid #e8c86a;color:#7a5100;padding:10px 13px;
border-radius:7px;margin:0 0 18px;font-size:13px;min-height:42px}
.stale b{font-weight:700}
.mathwarn{background:#fdecef;border:1px solid #f0b8c2;color:#8a0b20;padding:9px 12px;
border-radius:7px;margin:0 0 14px;font-size:12.5px}
.fbar{display:grid;grid-template-columns:172px 1fr 96px;gap:11px;align-items:center;
min-height:24px;margin-bottom:6px}
.fbar .lbl{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbar .lbl i{font-style:normal;color:var(--mut);font-size:11px;margin-left:5px}
.fbar .trk{background:#eef1f5;border-radius:3px;height:14px;overflow:hidden}
.fbar .fil{background:var(--navy);height:14px;border-radius:3px;min-width:2px}
.fbar .num{font-size:12px;color:var(--mut);text-align:right;
font-variant-numeric:tabular-nums;white-space:nowrap}
.runs{display:flex;gap:9px;align-items:flex-end;height:150px;min-height:150px;
overflow-x:auto;padding:4px 0 0}
.run{flex:0 0 58px;display:flex;flex-direction:column;justify-content:flex-end;
align-items:center;height:100%}
.run .bar{width:100%;background:var(--navy);border-radius:3px 3px 0 0;min-height:3px}
.run .bar.dead{height:8px;background:repeating-linear-gradient(45deg,#c8102e 0,#c8102e 3px,
#fff 3px,#fff 6px);border:1px solid #c8102e;border-radius:3px}
.run .cap{font-size:10px;color:var(--mut);margin-top:5px;text-align:center;line-height:1.3;
height:44px;overflow:hidden}
.run .cap b{display:block;color:var(--ink);font-size:10.5px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-size:13px;align-items:baseline}
.kv dt{color:var(--mut);margin:0}
.kv dd{margin:0;font-variant-numeric:tabular-nums}
.kv dd.bad{color:var(--red);font-weight:700}
.srcline{font-size:11.5px;color:var(--mut);margin-top:14px;padding-top:11px;
border-top:1px solid var(--line)}

/* --- Product and category viewers. Image boxes carry explicit dimensions so
   the page does not reflow as thumbnails arrive — same reason the storefront
   category header was fixed. */
.pgrid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
@media(max-width:1000px){.pgrid{grid-template-columns:1fr}}
.thumb{width:100%;aspect-ratio:1/1;background:#fff;border:1px solid var(--line);
border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb img{max-width:100%;max-height:100%;display:block}
.thumb .none{color:#b9bfc8;font-size:12px;text-align:center;padding:12px}
.tstrip{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap;min-height:52px}
.tstrip .t{width:52px;height:52px;border:1px solid var(--line);border-radius:5px;
background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tstrip .t img{max-width:100%;max-height:100%}
.rowimg{width:44px;height:44px;border:1px solid var(--line);border-radius:4px;
background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rowimg img{max-width:100%;max-height:100%}
.rowimg .none{color:#c9ced6;font-size:15px}
.specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px}
.spec{background:#fff;border:1px solid var(--line);border-radius:7px;padding:9px 11px;
min-height:56px}
.spec b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
color:var(--mut);margin-bottom:3px;font-weight:700}
.spec span{font-size:13px;word-break:break-word}
.spec.empty span{color:#b9bfc8}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip2{background:#eef2f9;color:var(--navy);border:1px solid #dbe3f0;border-radius:4px;
padding:2px 8px;font-size:12px;text-decoration:none}
a.chip2:hover{background:#dfe8f6}
.note{white-space:pre-wrap}
.intnote{background:#fffbe8;border:1px solid #e8d99a;border-radius:7px;padding:11px 13px;
font-size:12.5px;margin-bottom:16px}
.intnote b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
color:#8a6d00;margin-bottom:5px}
.flags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;min-height:22px}
.flag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;
background:#f1f2f4;color:#5b616b}
.flag.on{background:#fdecef;color:#8a0b20}
.flag.live{background:#e8f6ec;color:#186b32}
.mods{display:flex;flex-wrap:wrap;gap:7px}
.mod{display:flex;align-items:center;gap:6px;border:1px solid #ccd2da;border-radius:5px;
padding:4px 9px;font-size:12.5px;background:#fff;cursor:pointer}
.mod input{margin:0}
/* v1.71.2 — .mono was used five times and defined nowhere, and the v0 preview
   reused .wrap, which is the PAGE LAYOUT GRID (238px 1fr, min-height 100vh).
   An 11KB single-line header then overflowed with no wrapping at all. */
.diff{line-height:1.45}
.diff .d-same{color:#6b7280}
.diff .d-add{color:#0b5c2e;background:#e7f6ec;display:block}
.diff .d-del{color:#8a1220;background:#fdecee;display:block}
.diff .d-skip{color:#9aa1ab;font-style:italic;display:block}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.cq{display:inline-block;width:11px;height:11px;margin-right:2px;border-radius:2px;border:1px solid #c7ccd4;background:#fff}.cq1{background:#2e7d32}.cq0{background:#e0e3e8}
pre.mono{white-space:pre-wrap;word-break:break-word;max-height:60vh;overflow:auto;
  background:#f7f8fa;border:1px solid #e2e6ea;border-radius:5px;padding:11px;margin:9px 0}
/* v1.71.0 — the module picker is a three-state <select> now, not a checkbox. */
.mod>span{flex:1;white-space:nowrap}
.mod>select{font:inherit;font-size:13px;padding:2px 5px;border:1px solid #c7cfd8;
  border-radius:4px;background:#fff;min-height:28px}
.mod>select:disabled{background:#f1f2f4;color:#8b9099}
@media(max-width:640px){.mods{flex-direction:column}.mod{width:100%}}
.mod.locked{background:#f1f2f4;color:#8b9099;cursor:not-allowed}

/* --- Parity strip and system status.
   SERIES COLOURS: LLE #4472c4, RG #c05621. Run through the palette validator
   rather than chosen by eye — both pass all six checks, worst adjacent pair
   dE 23.4 under protanopia and 27.3 for normal vision.
   NOT --navy #1f3864 as a chart mark: it fails the lightness and chroma checks
   and reads as grey beside a fill. It stays text and chrome.
   NOT the brand red #c8102e for RG: status colours are reserved, and spending
   critical-red on a series means a real problem can no longer be seen. */
.paritybox{background:#fff;border:1px solid var(--line);border-radius:9px;
padding:16px 18px;margin-bottom:20px}
.parityhead{display:flex;align-items:baseline;gap:12px;font-size:11.5px;
font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);
margin-bottom:14px}
.parityhead .asof{margin-left:auto;font-weight:400;text-transform:none;
letter-spacing:0;font-size:12px}
.paritynums{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:15px;min-height:58px}
.pn b{display:block;font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.pn span{font-size:12px;color:var(--mut)}
.pn b.lle{color:#4472c4}
.pn b.rg{color:#c05621}
.pn b.s-good{color:#186b32}
.pn b.s-warn{color:#8a5b00}
.pn b.s-bad{color:#96122b}
/* One single-series completion bar. 4px rounded data-end, recessive track. */
.ptrk{background:#eef1f5;border-radius:4px;height:12px;overflow:hidden}
.pfil{height:12px;border-radius:4px;min-width:3px}
.pfil.f-good{background:#2f9e5f}
.pfil.f-warn{background:#c99700}
.pfil.f-bad{background:#c05621}
.pfoot{font-size:11.5px;color:var(--mut);margin-top:11px}
.pchip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
padding:2px 8px;border-radius:99px;white-space:nowrap}
.pchip.s-good{background:#e8f6ec;color:#186b32}
.pchip.s-warn{background:#fff4d6;color:#8a5b00}
.pchip.s-bad{background:#fdecef;color:#96122b}
.sysgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:16px;min-height:96px}
.sys{border-left:3px solid var(--line);padding-left:13px}
.sys b{display:block;font-size:28px;line-height:1.15;font-variant-numeric:tabular-nums}
.sys span{display:block;font-size:12.5px;color:var(--ink)}
.sys i{display:block;font-style:normal;font-size:11.5px;color:var(--mut);
margin:2px 0 6px;min-height:15px}

/* --- Category options, laid out like Shift4Shop's Hide/Show sections. Same
   accordion as the nav and for the same reason: <details>, no JavaScript, so
   the enforcing CSP keeps its complete absence of script-src. */
.cathead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* ---- S4S ORDER SCREEN  v1.29.0  8/23/2026 ---------------------------------
   Copied from Shift4Shop's order_details.asp rather than designed. Dara,
   8/23: "copying s4s exact is best right now to make a switch as seemless as
   possible." Everything is scoped under .s4s: S4S links are Bootstrap blue and
   this admin's are LLE red, and only this one screen changes.            */
.s4s{--sl:#ddd;--sb:#337ab7;--sm:#999}
.s4s a{color:var(--sb);text-decoration:none}
.s4s a:hover{text-decoration:underline}
.s4s .off{color:#b3b3b3;cursor:not-allowed}
.s4s .off:hover{text-decoration:none}

.s4s .hdr{display:flex;align-items:center;gap:13px;margin:0 0 18px;flex-wrap:wrap}
.s4s .hdr .doc{width:33px;height:39px;border:1px solid #c8ccd2;border-radius:2px;
background:#fff;position:relative;flex:none}
.s4s .hdr .doc::before{content:'';position:absolute;left:6px;right:6px;top:9px;height:2px;
background:#c8ccd2;box-shadow:0 6px 0 #c8ccd2,0 12px 0 #c8ccd2,0 18px 0 #c8ccd2}
.s4s .hdr h1{font-size:26px;font-weight:400;margin:0;color:#333;letter-spacing:-.01em}
.s4s .hdr .when{color:var(--sm);font-size:15px;font-weight:400;margin-left:4px}
.s4s .hdr .acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.s4s .btn{background:#fff;border:1px solid #ccc;border-radius:3px;padding:7px 13px;
font-size:13px;color:#333;cursor:pointer;line-height:1.4;font-family:inherit}
.s4s .btn:hover{background:#f2f2f2}
.s4s .btn.pri{background:var(--sb);border-color:#2e6da4;color:#fff}
.s4s .btn.pri:hover{background:#2d6da3}
.s4s .btn[disabled]{color:#b3b3b3;background:#fbfbfb;cursor:not-allowed}
.s4s .btn[disabled]:hover{background:#fbfbfb}

.s4s .cols{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(290px,1fr);
gap:16px;align-items:start}
@media(max-width:1100px){.s4s .cols{grid-template-columns:minmax(0,1fr)}}
.s4s .pnl{background:#fff;border:1px solid var(--sl);margin:0 0 16px}
.s4s .pnl>.ttl,.s4s .pnl>summary{font-size:19px;font-weight:400;color:#333;
padding:13px 17px 10px;border-bottom:1px dashed #ddd;display:flex;align-items:center;
gap:9px;list-style:none;margin:0}
.s4s .pnl>summary{cursor:pointer}
.s4s .pnl>summary::-webkit-details-marker{display:none}
.s4s .pnl>summary .hs{margin-left:auto;font-size:13px;color:#333}
.s4s .pnl>summary::after{content:'–';border:1px solid #ccc;border-radius:3px;width:26px;
height:24px;display:flex;align-items:center;justify-content:center;font-size:15px;
color:#333;background:#fff}
.s4s .pnl:not([open])>summary::after{content:'+'}
.s4s .pb{padding:15px 17px}
.s4s .ttl .r{margin-left:auto;font-size:13px;font-weight:400}

/* Status / tag row - top of Order Details, where S4S puts it. */
.s4s .strow{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.s4s .strow label.lb{color:#555;font-size:13px}
.s4s .strow select{padding:6px 8px;border:1px solid #ccc;border-radius:3px;
font-size:13px;min-width:250px;font-family:inherit;background:#fff;color:#333}
.s4s .swatches{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.s4s .swatches span.sw{display:inline-block;width:24px;height:24px;border-radius:3px}

/* Product(s) */
.s4s .prods{width:100%;border-collapse:collapse;background:transparent;border:0}
.s4s .prods th{background:transparent;text-transform:none;font-size:14px;
font-weight:700;color:#333;letter-spacing:0;padding:0 0 9px;border:0}
.s4s .prods td{border:0;padding:13px 0;font-size:14px;vertical-align:middle;
border-top:1px solid #eee}
.s4s .prods .nm{color:#333;line-height:1.45}
.s4s .prods img{width:74px;height:74px;object-fit:contain;display:block}
.s4s .num{text-align:right;white-space:nowrap}
.s4s .tot{margin-left:auto;width:330px;max-width:100%}
.s4s .tot tr td{padding:5px 0;border:0;font-size:14px}
.s4s .tot tr td:first-child{text-align:right;font-weight:700;padding-right:26px}
.s4s .tot tr td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.s4s .tot tr.gt td{font-weight:700;font-size:15px}

/* Right column */
.s4s .cust{display:flex;align-items:center;gap:10px;padding:14px 17px 12px}
.s4s .cust .av{width:30px;height:30px;border-radius:50%;background:#dfe3e8;flex:none;
display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b828b;
font-weight:700}
.s4s .cust .nm{font-size:19px;font-weight:700;color:#333}
.s4s .cust .em{margin-left:auto;font-size:13px;word-break:break-all;text-align:right}
.s4s .rsec{padding:0 17px 14px}
.s4s .rsec h3{font-size:17px;font-weight:400;color:#333;margin:14px 0 8px;
display:flex;align-items:center;gap:8px}
.s4s .rsec h3 .r{margin-left:auto;font-size:13px}
.s4s .rsec .addr{font-size:13px;line-height:1.65;color:#333}
.s4s .rsec hr{border:0;border-top:1px solid #eee;margin:14px 0}
.s4s .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.s4s .fl{font-size:13px;color:#333}
.s4s .fl b{display:block;font-weight:700;margin-bottom:3px}
.s4s .lbl{font-weight:700;font-size:13px;color:#333;margin:0 0 2px}
.s4s textarea{width:100%;border:1px solid #ccc;border-radius:3px;padding:8px;
font:13px/1.5 inherit;color:#333;resize:vertical}
.s4s .txns{width:100%;border-collapse:collapse;border:0;background:transparent}
.s4s .txns th{background:transparent;border:0;border-bottom:1px solid #eee;
font-size:12px;text-transform:none;letter-spacing:0;font-weight:700;color:#333;
padding:8px 10px 8px 0}
.s4s .txns td{border:0;border-bottom:1px solid #f2f2f2;font-size:13px;padding:12px 10px 12px 0}
.s4s .mut{color:var(--sm);font-size:12px}
.s4s .warnbox{background:#fffdf6;border:1px solid #e8c86a;padding:10px 12px;font-size:12px;
color:#6b5a1f;margin-top:9px}
.sect{background:#fff;border:1px solid var(--line);border-radius:8px;
margin-bottom:9px}
.sect>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
gap:9px;padding:11px 15px;font-size:13px;font-weight:700;color:var(--navy);
user-select:none;min-height:42px}
.sect>summary::-webkit-details-marker{display:none}
.sect>summary::after{content:'+';margin-left:auto;font-size:15px;color:#b9bfc8;
font-weight:400}
.sect[open]>summary::after{content:'–'}
.sect>summary:hover{background:#fbfcfd}
.sectbody{padding:0 15px 14px;border-top:1px solid #f2f4f7;padding-top:13px}
.sect.locked>summary{color:#8b9099}
.sect.locked .ph{margin-left:0;font-size:10px;color:#b9bfc8;border:1px solid #e3e6eb;
padding:1px 6px;border-radius:3px;font-weight:400}

/* --- THE 5AM PHONE PASS. v1.38.0, 8/25/2026. ------------------------------
   Dara checks this from a phone before he is at a desk. Three things made
   that painful and all three were CSS:

   1. Every page began with the full nav stack - ten collapsible groups
      before a single figure - because at <=900px the sidebar simply stacks
      ABOVE the content. On a 375px screen the dashboard opened on a screen
      of menu. The nav is now itself collapsed into one tappable summary at
      that width, so content is first and the menu is one tap away.
   2. .top had no flex-wrap: brand + three version chips + View Store +
      username + Log out in one 52px sticky row overflowed horizontally on
      any phone, and being sticky it rode along on every scroll.
   3. No table had an overflow wrapper, so an 8-column orders table forced
      the whole BODY to scroll sideways. Wide content now scrolls inside its
      own box and the page never does. */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tw>table{margin-bottom:0}

/* Visually hidden, still read aloud and still announced when focused. Used to
   label the filter controls, which were placeholder-only - a placeholder is
   not a label: it disappears the moment you type and screen readers do not
   reliably announce it. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The order tag swatches hide their radio with opacity:0 and had no focus
   style anywhere, so a keyboard user tabbing through them could not see where
   they were - the selection moved invisibly. The radio is inside the label and
   immediately precedes the coloured span, so the adjacent-sibling selector is
   what reaches it. An OUTLINE, not a border: the span already uses its border
   to show which swatch is selected, and overloading that would make focus and
   selection indistinguishable. */
input[name="tag_color"]:focus-visible+.sw,
input[name="tag_color"]:focus+.sw{outline:2px solid var(--navy);outline-offset:2px}

/* The pager's dead end (no newer / no older page) is a span, not a link, so it
   cannot be clicked or tabbed to. It still has to LOOK inert. */
.clr.off{color:#aeb4bd;cursor:default;pointer-events:none}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,
summary:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

@media(max-width:900px){
  .top{flex-wrap:wrap;height:auto;min-height:52px;padding:7px 12px;row-gap:5px}
  .top .sp{margin-left:auto}
  .side{max-height:none}
  /* The nav collapses into one line. summary is keyboard-reachable and needs
     no script, which matters: the CSP here allows no script at all. */
  .navwrap>summary{list-style:none;cursor:pointer;padding:11px 14px;font-weight:600;
  font-size:13px;color:var(--navy);background:#f7f9fc;border-bottom:1px solid var(--line)}
  .navwrap>summary::-webkit-details-marker{display:none}
  .navwrap>summary::after{content:'▾';float:right;color:#8b9099}
  .navwrap[open]>summary::after{content:'▴'}
  .main{padding:14px 12px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
}
/* On a desktop the wrapper is inert: the nav is always open and shows no
   summary at all. */
@media(min-width:901px){.navwrap>summary{display:none}}