/* Layout: the ST-UPID concept page, built by tools/make_st_upid_page.py from the Vision page's CSS plus the additions at the end. */
:root{
  --bg:#f4f6f6; --panel:#ffffff; --ink:#10161a; --mute:#566266; --rule:#d3dadc;
  --brand:#e60000; --ok:#0b7a43; --okbg:#e3f4ea; --warn:#9a5b00; --warnbg:#fbeed6; --bad:#b3261e; --badbg:#fbe4e2;
  --icon:#10161a; --band:#10161a; --band-ink:#e8eeee; --band-mute:#9aa8aa; --band-rule:#2a3437; --band-brand:#ff3b30;
  --display:'Titillium Web',system-ui,sans-serif; --body:'Titillium Web',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1315; --panel:#161d20; --ink:#e8eeee; --mute:#9aa8aa; --rule:#2a3437; --brand:#ff3b30;
  --ok:#5fd68f; --okbg:#12301f; --warn:#f0b35a; --warnbg:#33260d; --bad:#ff8f87; --badbg:#3a1613; --icon:#ffffff; --band:#161d20; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1315; --panel:#161d20; --ink:#e8eeee; --mute:#9aa8aa; --rule:#2a3437; --brand:#ff3b30;
  --ok:#5fd68f; --okbg:#12301f; --warn:#f0b35a; --warnbg:#33260d; --bad:#ff8f87; --badbg:#3a1613; --icon:#ffffff; --band:#161d20; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--body);margin:0;padding-block:0 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1080px;margin:0 auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.15}
h1{font-size:clamp(40px,8vw,84px);font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(24px,4vw,32px);font-weight:700}
h3{font-size:18px;font-weight:600}
p{margin:0 0 12px;max-width:66ch}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.btn{font:600 15px/1 var(--mono);padding:14px 18px;border:1.5px solid var(--ink);border-radius:6px;background:var(--ink);color:var(--bg);cursor:pointer;letter-spacing:.03em;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.alt{background:transparent;color:var(--ink)}
a:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.hero{padding-block:44px 48px}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .lede{font-size:20px;max-width:52ch;margin-top:18px}
.hero .lede b{font-weight:600}
.gum{margin:18px 0 0;max-width:144px}
.gum img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--rule)}
@media(min-width:700px){
  .herogrid{display:grid;grid-template-columns:auto 144px;justify-content:start;column-gap:56px;align-items:start}
  .herogrid .lede{grid-column:1}
  .herogrid .lede:first-child{margin-top:0}
  .gum{grid-column:2;grid-row:1 / span 3;margin-top:0}
}
section{padding-block:48px;border-top:3px double var(--ink)}
.head{display:grid;gap:8px;margin-bottom:24px}
.cols{display:grid;gap:28px}
@media(min-width:900px){.cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}}
.mono{font-family:var(--mono);font-weight:600;letter-spacing:.04em}
figure{margin:0}
figcaption{font:400 13px/1.5 var(--mono);color:var(--mute);margin-top:10px}
.structure{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:8px 8px 0;margin-top:20px;overflow-x:auto;scrollbar-width:thin}
.structure svg{display:block;width:100%;min-width:620px;height:auto}
.scanbox{display:block;background:#fff;border-radius:10px;padding:6px;border:1px solid var(--rule);max-width:360px}
.scanbox img{display:block;width:100%;height:auto}
.pr{display:grid;gap:0;margin:0;padding:0;list-style:none;border:2px solid var(--ink);border-radius:10px;background:var(--panel);overflow:hidden}
@media(min-width:760px){.pr{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pr li{padding:18px;border-bottom:1px solid var(--rule);display:grid;gap:8px;align-content:start;min-width:0}
@media(min-width:760px){.pr li{border-bottom:0;border-right:1px solid var(--rule)}.pr li:last-child{border-right:0}}
.pr li:last-child{border-bottom:0}
.pr .n{font:700 12px/1 var(--mono);color:var(--brand);letter-spacing:.08em}
.pr p{font-size:15px;color:var(--mute);margin:0}
.status{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.status li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;max-width:66ch}
.status .s{font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:3px;white-space:nowrap}
.s.fixed{background:var(--okbg);color:var(--ok)}.s.draft{background:var(--warnbg);color:var(--warn)}.s.next{background:var(--panel);color:var(--mute);border:1px solid var(--rule)}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
footer{margin-top:0;padding-top:16px;border-top:3px double var(--ink);font:400 12px/1.6 var(--mono);color:var(--mute)}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ST-UPID additions. --st is the ST green for marks and large type; --st-text is the darker shade that reaches 4.5:1 for small text in light mode. */
:root{--st:#0B9444;--st-text:#087a38}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--st:#2fc46c;--st-text:#2fc46c}}
:root[data-theme="dark"]{--st:#2fc46c;--st-text:#2fc46c}
.hero h1 em{color:var(--st)}
.st{color:var(--st-text)}
.pr .n{color:var(--st-text)}
.quote{border-left:4px solid var(--st);padding:4px 0 4px 18px;margin:8px 0 16px;max-width:66ch}
.quote p{margin:0;font-size:19px;font-weight:600;line-height:1.4}
.tblwrap{overflow-x:auto;border:1px solid var(--rule);border-radius:10px;background:var(--panel);scrollbar-width:thin}
.tbl{border-collapse:collapse;width:100%}
.tbl th{text-align:left;padding:12px 14px;font:600 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);border-bottom:2px solid var(--ink)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top;font-size:15px;line-height:1.45}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600}
@media(min-width:900px){.tbl td:first-child{white-space:nowrap}}
.cols>*{min-width:0}
.tbl.wide{min-width:560px}
@media(min-width:900px){.tbl .mono{white-space:nowrap}}
.wrapfig{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:8px;margin-top:20px;overflow-x:auto;scrollbar-width:thin}
.wrapfig svg{display:block;width:100%;min-width:620px;max-width:860px;margin:0 auto;height:auto}
.cols .tblwrap{margin-top:2px}
.notice{display:none;margin:14px 0 0;padding:12px 14px;border:1px solid var(--rule);background:var(--panel);border-radius:8px;font-size:15px;max-width:66ch}
.notice[data-show]{display:block}
.notice .mono{font-weight:600}
.notice.bad{border-color:var(--bad);background:var(--badbg);color:var(--bad)}
.small{font-size:15px;color:var(--mute)}
@media(min-width:900px){.cols.r13{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}.cols.r115{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}