/* Layout: a technical datasheet. One column on a phone, a sticky identity card beside the sections on desktop. */
: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; --codebg:#eaeff0;
  --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; --codebg:#1d2629; 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; --codebg:#1d2629; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--body);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}
h2{font-size:26px;font-weight:700}
h3{font-size:18px;font-weight:600}
p{margin:0 0 12px;max-width:66ch}
.mono{font-family:var(--mono)}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.strap{font:600 12px/1 var(--mono);letter-spacing:.14em;color:var(--brand)}
.tag{font:600 12px/1 var(--mono);letter-spacing:.06em;padding:6px 8px;border:1px solid var(--ink);border-radius:3px;white-space:nowrap}
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:24px}
@media(min-width:900px){.layout{grid-template-columns:340px minmax(0,1fr);gap:40px;align-items:start}.card{position:sticky;top:calc(var(--hdr,0px) + 16px)}}
.card{background:var(--panel);border:2px solid var(--ink);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px;outline:1px solid var(--ink);outline-offset:4px;margin:4px}
.card .code{font:600 clamp(26px,8vw,34px)/1.1 var(--mono);display:flex;align-items:center;gap:2px;flex-wrap:wrap;letter-spacing:0}
.card .code svg{height:1.05em;width:auto;margin-right:2px;overflow:visible}
.seal{display:flex;gap:14px;align-items:center}
.seal svg.shield{width:88px;height:auto;flex:none}
.state{font:600 13px/1.3 var(--mono);letter-spacing:.05em;padding:4px 8px;border-radius:3px;display:inline-block}
.state.ok{background:var(--okbg);color:var(--ok)}.state.warn{background:var(--warnbg);color:var(--warn)}.state.bad{background:var(--badbg);color:var(--bad)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:15px;margin:0}
.kv dt{color:var(--mute);font:400 12px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.06em}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.lookup{display:flex;gap:8px;flex-wrap:wrap}
input[type=text]{font:600 16px/1 var(--mono);padding:11px 12px;border:1.5px solid var(--ink);border-radius:6px;background:var(--bg);color:var(--ink);min-width:0;flex:1 1 160px;text-transform:uppercase}
button{font:600 14px/1 var(--mono);padding:11px 14px;border:1.5px solid var(--ink);border-radius:6px;background:var(--ink);color:var(--bg);cursor:pointer;letter-spacing:.03em}
button.alt{background:transparent;color:var(--ink)}
button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
button:hover{filter:brightness(1.12)}
main section{padding-block:28px;border-top:1px solid var(--rule)}main section:first-child{border-top:0;padding-top:0}
main section>h2{margin-bottom:14px}
.steps{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));counter-reset:s;padding:0;margin:16px 0 0;list-style:none}
.steps li{counter-increment:s;border:1px solid var(--rule);background:var(--panel);border-radius:8px;padding:14px}
.steps li::before{content:"Step " counter(s);display:block;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:8px}
.props{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:16px 0 0}
.props div{border-left:3px solid var(--brand);padding:2px 0 2px 12px}.props b{display:block;font-weight:700}
.props span{color:var(--mute);font-size:15px}
.anat{display:flex;gap:6px;align-items:stretch;margin:16px 0}
.seg{flex:1 1 auto;border:1.5px solid var(--ink);border-radius:8px;background:var(--panel);padding:10px 12px;min-width:0}
.seg .v{font:600 clamp(18px,6vw,28px)/1.1 var(--mono);letter-spacing:.02em}.seg .l{font:400 12px/1.4 var(--mono);color:var(--mute);margin-top:4px}
.seg.q .v{color:var(--brand)}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:8px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font:400 14px/1.4 var(--mono)}
th,td{padding:7px 12px;text-align:right;white-space:nowrap}th:first-child,td:first-child{text-align:left}
thead th{font-weight:600;color:var(--mute);border-bottom:1px solid var(--rule)}
tbody tr+tr td{border-top:1px solid var(--rule)}
tfoot td{border-top:2px solid var(--ink);font-weight:600}
.result{margin-top:12px;padding:12px 14px;border-radius:8px;font:600 15px/1.4 var(--mono)}
.result.ok{background:var(--okbg);color:var(--ok)}.result.bad{background:var(--badbg);color:var(--bad)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
pre{margin:0;padding:14px;background:var(--codebg);border-radius:8px;overflow-x:auto;font:400 13.5px/1.55 var(--mono);color:var(--ink);tab-size:2}
.hk{color:var(--brand)}.hs{color:var(--ok)}.hn{color:var(--warn)}
.endp{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.endp button{background:transparent;color:var(--ink)}.endp button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.note{font-size:14px;color:var(--mute);margin-top:8px}
.chain{display:grid;gap:0;margin-top:12px}
.ev{border:1px solid var(--rule);background:var(--panel);padding:12px 14px;border-radius:8px}
.ev+.ev{margin-top:0}
.link{height:18px;margin-left:24px;border-left:2px dashed var(--mute)}
.ev .t{font:600 13px/1.3 var(--mono)}.ev .h{font:400 12px/1.5 var(--mono);color:var(--mute);overflow-wrap:anywhere;margin-top:4px}
details{border:1px solid var(--rule);border-radius:8px;background:var(--panel);margin-bottom:10px}
summary{cursor:pointer;padding:12px 14px;font-weight:600}details>div{padding:0 14px 14px}
.meta{border:1px solid var(--rule);background:var(--panel);border-radius:8px;padding:18px;margin-bottom:28px}
.meta .src{font:400 12px/1.5 var(--mono);color:var(--mute)}
.meta .cls{display:flex;flex-wrap:wrap;gap:8px 28px;margin:12px 0}
.meta .cls div{font:400 14px/1.4 var(--mono)}.meta .cls b{display:block;font:600 11px/1.4 var(--mono);letter-spacing:.08em;color:var(--mute);text-transform:uppercase}
.meta table{border-collapse:collapse;width:100%;font-size:14px}.meta th,.meta td{text-align:left;padding:8px 10px;border-top:1px solid var(--rule);vertical-align:top}
.meta th{font-weight:400;color:var(--mute);width:42%}
#distributor{border:2px dashed var(--warn);border-radius:8px;background:var(--panel);padding:18px;margin-bottom:28px}
#distributor .chip{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:3px;background:var(--warnbg);color:var(--warn);margin-left:8px;vertical-align:middle}
#distributor table{border-collapse:collapse;width:100%;font-size:14px;margin:12px 0}#distributor th,#distributor td{text-align:left;padding:8px 10px;border-top:1px solid var(--rule);vertical-align:top;white-space:normal;overflow-wrap:anywhere}
#distributor th{font-weight:400;color:var(--mute);width:42%}
#distributor .cls{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0 0 8px}#distributor .cls div{font:400 14px/1.4 var(--mono)}#distributor .cls b{display:block;font:600 11px/1.4 var(--mono);letter-spacing:.08em;color:var(--mute);text-transform:uppercase}
#distributor .src{font:400 12px/1.5 var(--mono);color:var(--mute)}
footer{margin-top:36px;padding-top:16px;border-top:3px double var(--ink);font:400 12px/1.6 var(--mono);color:var(--mute)}
.sr{position:absolute;left:-9999px}
@media(prefers-reduced-motion:no-preference){.seal svg.shield{transition:transform .5s}.seal svg.shield:hover{transform:rotate(-3deg) scale(1.04)}}

/* the 2D code always sits on white, in dark mode too, so it scans and matches the other pages' .scanbox */
.codeimg{margin:12px 0;background:#fff;border-radius:10px;padding:6px;border:1px solid var(--rule)}.codeimg img{display:block;width:100%;height:auto}
/* the paragraph under the assurance level: smaller, still legible */
#stateTxt{margin:8px 0 0;font-size:13px;line-height:1.45}