/* ══════════════════════════════════════════════════════════════════════════ PRISMUX — design system Security-printing palette: bank-draft ground, ink-blue-black, seal green used only where something is verified, oxide for refusal, brass for caution. The three semantic colours are also the three beams in the prism mark. ══════════════════════════════════════════════════════════════════════════ */ :root{ --draft: #F4F5F0; --draft-2: #FBFCF9; --draft-3: #E9ECE4; --draft-4: #DFE3D9; /* --ink-3 and --ink-4 were darkened/lightened to clear WCAG AA 4.5:1 on every surface they land on. Measured before: --ink-3 3.35:1 light, 3.91:1 dark; --ink-4 2.16:1 light, 2.83:1 dark — and they carry the small mono meta text (table headers, chips, observation dates, code comments), which is exactly the text a contrast shortfall hurts most. */ --ink: #101A1F; --ink-2: #3D4A50; --ink-3: #58656C; --ink-4: #616C62; --rule: #D6DBD2; --rule-2: #C0C7BA; --seal: #14624A; --seal-soft: #DFEDE4; --oxide: #8E3B22; --oxide-soft: #F5E5DE; --brass: #7A6524; --brass-soft: #F1EAD6; --engrave: rgba(16,26,31,.055); --lift: 0 1px 1px rgba(16,26,31,.04), 0 10px 34px -20px rgba(16,26,31,.30); --lift-2: 0 1px 1px rgba(16,26,31,.05), 0 26px 60px -34px rgba(16,26,31,.42); --on-seal: #F7FBF8; /* Font stacks are tokens so a locale can swap the whole typographic system without touching a single component rule. See the :root[lang] blocks at the foot of this file — Newsreader and Plex have no CJK or Arabic coverage, and silently falling back is how i18n looks broken. */ --f-display: Newsreader, Georgia, "Times New Roman", serif; --f-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color-scheme: light; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --draft:#0A1013; --draft-2:#10171A; --draft-3:#161F22; --draft-4:#1E282B; --ink:#E4EBE5; --ink-2:#A6B2AC; --ink-3:#84918A; --ink-4:#7C8984; --rule:#222C2F; --rule-2:#2F3B3E; --seal:#4FC494; --seal-soft:#0F2A21; --oxide:#DE8A62; --oxide-soft:#2A1811; --brass:#C9AB58; --brass-soft:#241E0F; --engrave:rgba(228,235,229,.05); --lift:0 1px 1px rgba(0,0,0,.5), 0 10px 34px -20px rgba(0,0,0,.9); --lift-2:0 1px 1px rgba(0,0,0,.6), 0 26px 60px -34px rgba(0,0,0,1); --on-seal:#07130F; color-scheme: dark; } } :root[data-theme="dark"]{ --draft:#0A1013; --draft-2:#10171A; --draft-3:#161F22; --draft-4:#1E282B; --ink:#E4EBE5; --ink-2:#A6B2AC; --ink-3:#84918A; --ink-4:#7C8984; --rule:#222C2F; --rule-2:#2F3B3E; --seal:#4FC494; --seal-soft:#0F2A21; --oxide:#DE8A62; --oxide-soft:#2A1811; --brass:#C9AB58; --brass-soft:#241E0F; --engrave:rgba(228,235,229,.05); --lift:0 1px 1px rgba(0,0,0,.5), 0 10px 34px -20px rgba(0,0,0,.9); --lift-2:0 1px 1px rgba(0,0,0,.6), 0 26px 60px -34px rgba(0,0,0,1); --on-seal:#07130F; color-scheme: dark; } /* ─── base ─────────────────────────────────────────────────────────────── */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}} body{ margin:0;background:var(--draft);color:var(--ink); font-family:var(--f-body); font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%} [hidden]{display:none!important} :focus-visible{outline:2px solid var(--seal);outline-offset:3px;border-radius:2px} /* Off-screen but readable by assistive tech. Used for the live region that announces a locale change: swapping every string on the page is a large, silent update otherwise, and a screen-reader user gets no signal that the thing they were reading is now in another language. */ .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .narrow{max-width:720px} .measure{max-width:66ch} @media(min-width:900px){.wrap{padding:0 40px}} h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;letter-spacing:-.014em} h1{font-size:clamp(34px,5.4vw,54px);line-height:1.04;margin:0 0 16px} h2{font-size:clamp(26px,4vw,40px);line-height:1.09;margin:0 0 14px} h3{font-size:clamp(19px,2.3vw,24px);line-height:1.18;margin:0 0 10px} h4{font-family:var(--f-body);font-size:14.5px;font-weight:600;margin:0 0 6px} h5{font-family:var(--f-body);font-size:13.5px;font-weight:600;margin:0 0 5px} p{margin:0 0 16px} .lede{font-family:var(--f-display);font-size:clamp(18px,2.1vw,21px);line-height:1.5;color:var(--ink-2);max-width:36em} .body{max-width:66ch;color:var(--ink-2)} .body strong{color:var(--ink);font-weight:600} a{color:var(--seal);text-underline-offset:2px} strong{font-weight:600} ul,ol{padding-inline-start:1.15em;margin:0 0 18px} li{margin-bottom:7px} li::marker{color:var(--ink-3)} code{font-family:var(--f-mono);font-size:.87em;background:var(--draft-3);border:1px solid var(--rule);border-radius:3px;padding:.08em .34em} .label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);font-weight:500} .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums} hr.rule{border:0;border-top:1px solid var(--rule);margin:0} section{padding:82px 0;border-top:1px solid var(--rule)} @media(min-width:900px){section{padding:112px 0}} section.tight{padding:56px 0} .sec-label{display:flex;align-items:center;gap:12px;margin-bottom:26px} .sec-label::after{content:"";height:1px;background:var(--rule);flex:1} /* ─── buttons ──────────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500; padding:11px 20px;border-radius:2px;text-decoration:none;cursor:pointer; border:1px solid var(--ink);background:var(--ink);color:var(--draft); transition:opacity .15s,border-color .15s;font-family:inherit; } .btn:hover{opacity:.86} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)} .btn.ghost:hover{border-color:var(--ink);opacity:1} .btn.seal{background:var(--seal);border-color:var(--seal);color:var(--on-seal)} .btn.sm{font-size:12.5px;padding:8px 14px} /* ─── chips ────────────────────────────────────────────────────────────── */ .chip{ display:inline-flex;align-items:center;gap:5px; font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em; text-transform:uppercase;font-weight:600;padding:3px 7px;border-radius:2px;white-space:nowrap; } .chip.zdr,.chip.ok{background:var(--seal-soft);color:var(--seal)} .chip.tr,.chip.warn{background:var(--brass-soft);color:var(--brass)} .chip.ret,.chip.bad{background:var(--oxide-soft);color:var(--oxide)} .chip.n{background:var(--draft-3);color:var(--ink-3)} /* ─── nav ──────────────────────────────────────────────────────────────── */ .nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--draft) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--rule)} .nav-in{display:flex;align-items:center;gap:26px;height:60px} .brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex:none} .brand svg{width:19px;height:19px;flex:none} .brand .wm{font-family:var(--f-mono);font-size:15px;font-weight:600;letter-spacing:-.02em} .nav nav{display:none;gap:22px;margin-inline-start:auto} @media(min-width:1000px){.nav nav{display:flex}} .nav nav a{color:var(--ink-2);text-decoration:none;font-size:13.5px;transition:color .15s} .nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--ink)} .nav nav a[aria-current="page"]{font-weight:500} .nav-act{display:flex;align-items:center;gap:10px;margin-inline-start:auto} @media(min-width:1000px){.nav-act{margin-inline-start:26px}} .tt{background:transparent;border:1px solid var(--rule);color:var(--ink-3);border-radius:2px;padding:6px 9px;cursor:pointer;line-height:1;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase} .tt:hover{color:var(--ink);border-color:var(--rule-2)} @media(max-width:620px){.hide-sm{display:none}} /* ─── page head (interior pages) ───────────────────────────────────────── */ .phead{padding:52px 0 44px;border-bottom:1px solid var(--rule)} @media(min-width:900px){.phead{padding:70px 0 56px}} .crumb{display:flex;gap:8px;align-items:center;margin-bottom:18px} .crumb a{color:var(--ink-3);text-decoration:none;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase} .crumb a:hover{color:var(--ink-2)} .crumb span{color:var(--ink-4);font-family:var(--f-mono);font-size:10.5px} /* ─── doc layout with rail ─────────────────────────────────────────────── */ .doc{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:100px} @media(min-width:1040px){.doc{grid-template-columns:224px minmax(0,1fr);gap:56px}} .rail{display:none} @media(min-width:1040px){ .rail{display:block;position:sticky;top:60px;align-self:start;max-height:calc(100vh - 60px);overflow-y:auto;padding:40px 0;font-size:13px} } .rail .rt{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px} .rail .rt:not(:first-child){margin-top:24px} .rail ul{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:1px} .rail a{display:block;padding:5px 0 5px 11px;color:var(--ink-2);text-decoration:none;border-inline-start:2px solid transparent;transition:color .15s,border-color .15s} .rail a:hover{color:var(--ink);border-inline-start-color:var(--rule-2)} .rail a.on{color:var(--ink);border-inline-start-color:var(--seal);font-weight:500} .docmain{min-width:0;padding-top:40px} .docmain section{border-top:none;padding:0 0 52px} .docmain section:not(:first-child){padding-top:8px} .docmain h2{font-size:clamp(23px,3vw,30px);margin-top:20px;padding-top:22px;border-top:1px solid var(--rule)} .docmain section:first-child h2{border-top:none;padding-top:0;margin-top:0} .docmain h3{font-size:18px;margin-top:30px} .docmain p,.docmain ul,.docmain ol{max-width:70ch;color:var(--ink-2)} .docmain strong{color:var(--ink)} /* ─── cards / grids ────────────────────────────────────────────────────── */ .cols{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden} .cols > div{background:var(--draft-2);padding:22px} @media(min-width:760px){.cols.c2{grid-template-columns:1fr 1fr}.cols.c3{grid-template-columns:repeat(3,1fr)}} @media(min-width:1000px){.cols.c4{grid-template-columns:repeat(4,1fr)}} @media(min-width:640px) and (max-width:999px){.cols.c4{grid-template-columns:1fr 1fr}} .cols p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.55} .cols p + p{margin-top:10px} .cols .num{font-family:var(--f-mono);font-size:11px;color:var(--seal);letter-spacing:.1em;font-weight:600;margin-bottom:7px} .panel{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden} @media(min-width:640px){.panel{grid-template-columns:1fr 1fr}} @media(min-width:1000px){.panel.p4{grid-template-columns:repeat(4,1fr)}.panel.p3{grid-template-columns:repeat(3,1fr)}} .pi{background:var(--draft-2);padding:18px 20px} .pi .pl{font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;line-height:1.4} .pi .pv{font-family:var(--f-mono);font-size:27px;font-variant-numeric:tabular-nums;letter-spacing:-.015em;line-height:1} .pi .pd{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.45} .pi.good .pv{color:var(--seal)} .pi.warn .pv{color:var(--brass)} .pi.bad .pv{color:var(--oxide)} /* ─── tables ───────────────────────────────────────────────────────────── */ .tw{overflow-x:auto;border:1px solid var(--rule);border-radius:3px;background:var(--draft-2)} table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:600px} th{text-align:start;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding:11px 14px;border-bottom:1px solid var(--rule);background:var(--draft-3);white-space:nowrap} td{padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:middle;color:var(--ink-2)} tbody tr:last-child td{border-bottom:none} td strong{color:var(--ink);font-weight:600} td.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)} tr.hi td{background:var(--seal-soft)} tr.dim td{color:var(--ink-3)} .tbl-note{font-size:12.5px;color:var(--ink-3);margin:12px 2px 0;line-height:1.55;max-width:76ch} /* ─── filters ──────────────────────────────────────────────────────────── */ .filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px} .filters button{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;padding:6px 11px;border-radius:2px;cursor:pointer;background:transparent;border:1px solid var(--rule);color:var(--ink-3)} .filters button:hover{border-color:var(--rule-2);color:var(--ink-2)} .filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--draft)} /* ─── receipt instrument ───────────────────────────────────────────────── */ .receipt{background:var(--draft-2);border:1px solid var(--rule-2);border-radius:3px;box-shadow:var(--lift-2);overflow:hidden} .r-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--rule);background:var(--draft-3)} .r-head .t{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)} .r-stamp{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:3px 8px;border-radius:2px;border:1px solid transparent;transition:background .3s,color .3s,border-color .3s} .r-stamp.idle{color:var(--ink-3);background:var(--draft-4)} .r-stamp.ok{color:var(--seal);background:var(--seal-soft);border-color:color-mix(in srgb,var(--seal) 28%,transparent)} .r-stamp.bad{color:var(--oxide);background:var(--oxide-soft);border-color:color-mix(in srgb,var(--oxide) 34%,transparent)} .r-stamp.work{color:var(--brass);background:var(--brass-soft)} .r-stamp .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .r-body{padding:16px;font-family:var(--f-mono);font-size:12px;line-height:1.75;font-variant-numeric:tabular-nums;overflow-x:auto} @media(min-width:520px){.r-body{font-size:12.5px;padding:18px}} .r-line{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;opacity:0} .r-line.in{opacity:1;transition:opacity .28s ease} @media (prefers-reduced-motion:reduce){.r-line{opacity:1}} @media(min-width:520px){.r-line{grid-template-columns:118px minmax(0,1fr)}} /* The key column is a fixed 104px below 520px, and a receipt's longest field names — `requested_model`, `served_endpoint` — need 108. Measured at 360px: both clipped by 4px, mid-glyph, with no ellipsis to say so. `.v` already breaks anywhere; the key never did, and a field NAME that silently loses its last characters is worse than a value that does, because the reader cannot tell which field they are looking at. Wrap rather than widen: taking 8px from the value column at phone width to fit one label would cost every other row. */ .r-line .k{color:var(--ink-3);overflow-wrap:anywhere} .r-line .v{color:var(--ink);word-break:break-word} .r-line .v .dim{color:var(--ink-3)} .r-hr{height:1px;background:var(--rule);margin:11px 0} .r-att{display:grid;grid-template-columns:16px 1fr auto;gap:10px;align-items:baseline;padding:3px 0} .r-att .sq{color:var(--ink-3)} .r-att.fail .nm{color:var(--oxide)} .r-att.ok .nm{color:var(--seal)} .r-att .amt{color:var(--ink-2)} .r-why{color:var(--ink-3);font-size:11px;padding-inline-start:26px;margin-top:-3px;margin-bottom:4px;word-break:break-word} .r-total{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;font-weight:600} @media(min-width:520px){.r-total{grid-template-columns:118px minmax(0,1fr)}} .hash{color:var(--ink-3);word-break:break-all;font-size:11px} .hash.changed{color:var(--oxide)} .r-foot{padding:12px 16px;border-top:1px solid var(--rule);background:var(--draft-3);display:flex;flex-wrap:wrap;gap:8px;align-items:center} .r-foot .sp{flex:1;min-width:0} .r-log{padding:0 16px 14px;font-family:var(--f-mono);font-size:11px;line-height:1.65;color:var(--ink-3);background:var(--draft-3)} .r-log div{padding:1px 0} .r-log .ok{color:var(--seal)} .r-log .bad{color:var(--oxide)} .r-cap{font-size:12.5px;color:var(--ink-3);margin:14px 2px 0;line-height:1.55} /* ─── code ─────────────────────────────────────────────────────────────── */ .tabs{display:flex;border:1px solid var(--rule);border-bottom:none;border-radius:3px 3px 0 0;overflow:hidden;background:var(--draft-3);flex-wrap:wrap} .tabs button{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;padding:10px 15px;background:transparent;border:0;border-inline-end:1px solid var(--rule);color:var(--ink-3);cursor:pointer} .tabs button:hover{color:var(--ink-2)} .tabs button[aria-selected="true"]{background:var(--draft-2);color:var(--ink);font-weight:600} pre{margin:0;padding:20px;overflow-x:auto;background:var(--draft-2);border:1px solid var(--rule);border-radius:3px;font-family:var(--f-mono);font-size:12.5px;line-height:1.75;color:var(--ink-2)} .tabs + pre{border-radius:0 0 3px 3px} pre .c{color:var(--ink-4)} pre .s{color:var(--seal)} pre .k{color:var(--ink)} pre .o{color:var(--oxide)} /* ─── callout ──────────────────────────────────────────────────────────── */ .call{border:1px solid var(--rule);border-inline-start:3px solid var(--seal);background:var(--draft-2);border-radius:3px;padding:16px 18px;margin:22px 0;max-width:76ch} .call.warn{border-inline-start-color:var(--brass)} .call.stop{border-inline-start-color:var(--oxide)} .call .ct{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--seal);margin-bottom:7px;font-weight:600} .call.warn .ct{color:var(--brass)} .call.stop .ct{color:var(--oxide)} .call p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6} .call p + p{margin-top:10px} .call strong{color:var(--ink)} /* ─── faq ──────────────────────────────────────────────────────────────── */ .faq{border-top:1px solid var(--rule)} details{border-bottom:1px solid var(--rule)} summary{padding:18px 34px 18px 0;cursor:pointer;list-style:none;position:relative;font-family:var(--f-display);font-size:19px;line-height:1.3;color:var(--ink)} summary::-webkit-details-marker{display:none} summary::after{content:"+";position:absolute;right:4px;top:17px;font-family:var(--f-mono);font-size:17px;color:var(--ink-3)} details[open] summary::after{content:"−"} details .ans{padding:0 0 20px;max-width:68ch;color:var(--ink-2);font-size:14.5px;line-height:1.62} details .ans p{margin:0 0 12px} details .ans p:last-child{margin:0} details .ans strong{color:var(--ink)} /* ─── legal ────────────────────────────────────────────────────────────── */ .legal{max-width:74ch} .legal h2{font-size:23px;padding-top:26px;margin-top:26px;border-top:1px solid var(--rule)} .legal h3{font-size:16.5px;font-family:var(--f-body);font-weight:600;margin-top:24px} .legal p,.legal li{font-size:14.5px;color:var(--ink-2);line-height:1.68} .legal .cl{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em} .draftbar{ border:1px dashed var(--brass);background:var(--brass-soft);border-radius:3px; padding:14px 16px;margin:0 0 30px;max-width:74ch; } .draftbar .dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:6px} .draftbar p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.6} /* ─── status ───────────────────────────────────────────────────────────── */ .statusbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:18px 20px;border:1px solid var(--rule);border-inline-start:3px solid var(--seal);background:var(--draft-2);border-radius:3px} .statusbar .big{font-family:var(--f-display);font-size:24px;color:var(--ink)} .statusbar .when{margin-inline-start:auto;font-family:var(--f-mono);font-size:11px;color:var(--ink-3)} .sparks{display:flex;gap:2px;align-items:flex-end;height:22px} .sparks i{width:4px;background:var(--seal);border-radius:1px;display:block} .sparks i.d{background:var(--brass)} .sparks i.o{background:var(--oxide)} /* ─── footer ───────────────────────────────────────────────────────────── */ footer{border-top:1px solid var(--rule);padding:56px 0 40px;background:var(--draft-3)} .fgrid{display:grid;gap:36px;margin-bottom:44px} @media(min-width:760px){.fgrid{grid-template-columns:1.4fr repeat(3,1fr)}} .fgrid h5{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;font-weight:500} .fgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .fgrid a{color:var(--ink-2);text-decoration:none;font-size:13.5px} .fgrid a:hover{color:var(--ink)} .fbrand p{font-size:13.5px;color:var(--ink-3);max-width:32ch;margin:12px 0 0;line-height:1.55} .fbot{padding-top:22px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center} .fbot span,.fbot a{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);text-decoration:none} .fbot a:hover{color:var(--ink-2)} .disclosure{margin-top:20px;padding:12px 14px;border:1px dashed var(--rule-2);border-radius:3px;font-family:var(--f-mono);font-size:11px;line-height:1.6;color:var(--ink-3);max-width:82ch} /* ══════════════════════════════════════════════════════════════════════════ INTERNATIONALISATION Three things break an i18n rollout, and all three are handled here rather than discovered later: fonts with no coverage for the script, physical CSS properties that mirror wrongly under RTL (handled above with logical properties), and layout that assumes English string length. ══════════════════════════════════════════════════════════════════════════ */ /* ─── script coverage ────────────────────────────────────────────────────── Newsreader and IBM Plex have no CJK or Arabic glyphs. Without these the browser silently substitutes a system face mid-sentence — the classic "translated but obviously not designed for" look. ─────────────────────────────────────────────────────────────────────── */ :root[lang="zh"], :root[lang^="zh-Hans"]{ --f-display: "Noto Serif SC", Newsreader, "Songti SC", SimSun, serif; --f-body: "Noto Sans SC", "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", sans-serif; } :root[lang^="zh-Hant"]{ --f-display: "Noto Serif TC", Newsreader, "Songti TC", serif; --f-body: "Noto Sans TC", "IBM Plex Sans", "PingFang TC", sans-serif; } :root[lang^="ja"]{ --f-display: "Noto Serif JP", Newsreader, "Hiragino Mincho ProN", serif; --f-body: "Noto Sans JP", "IBM Plex Sans", "Hiragino Sans", sans-serif; } :root[lang^="ko"]{ --f-display: "Noto Serif KR", Newsreader, serif; --f-body: "Noto Sans KR", "IBM Plex Sans", sans-serif; } :root[lang^="ar"], :root[lang^="fa"], :root[lang^="he"]{ --f-display: "Noto Naskh Arabic", Newsreader, serif; --f-body: "Noto Naskh Arabic", "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif; } /* CJK does not want Latin display tracking or balance-wrapping, and reads better with more leading. */ :root[lang^="zh"] h1, :root[lang^="ja"] h1, :root[lang^="ko"] h1, :root[lang^="zh"] h2, :root[lang^="ja"] h2, :root[lang^="ko"] h2, :root[lang^="zh"] h3, :root[lang^="ja"] h3, :root[lang^="ko"] h3{ letter-spacing:0; line-height:1.3; text-wrap:normal; } :root[lang^="zh"] body, :root[lang^="ja"] body, :root[lang^="ko"] body{line-height:1.8} :root[lang^="ar"] body{line-height:1.85} :root[lang^="ar"] h1, :root[lang^="ar"] h2, :root[lang^="ar"] h3{letter-spacing:0;line-height:1.4} /* Uppercase + wide tracking is a Latin device; it mangles other scripts. */ :root:not([lang^="en"]):not([lang^="es"]) .label, :root:not([lang^="en"]):not([lang^="es"]) .chip, :root:not([lang^="en"]):not([lang^="es"]) th, :root:not([lang^="en"]):not([lang^="es"]) .rail .rt, :root:not([lang^="en"]):not([lang^="es"]) .fgrid h5{ text-transform:none; letter-spacing:.02em; } /* ─── RTL ────────────────────────────────────────────────────────────────── Layout mirrors via the logical properties above. These must NOT mirror: code, receipts, hashes, prices and identifiers are LTR data even inside an RTL sentence. ─────────────────────────────────────────────────────────────────────── */ [dir="rtl"] .r-body, [dir="rtl"] pre, [dir="rtl"] code, [dir="rtl"] .hash, [dir="rtl"] td.n, [dir="rtl"] .mono, [dir="rtl"] .pi .pv, [dir="rtl"] .co .cov, [dir="rtl"] .step .sv, [dir="rtl"] .brand .wm, [dir="rtl"] .r-att, [dir="rtl"] .r-why{ direction:ltr; text-align:start; } [dir="rtl"] summary{padding:18px 0 18px 34px} [dir="rtl"] summary::after{right:auto;left:4px} [dir="rtl"] .sparks, [dir="rtl"] .hist{flex-direction:row-reverse} [dir="rtl"] .brand svg{transform:scaleX(-1)} /* the prism refracts the other way */ /* ─── language switcher ────────────────────────────────────────────────── */ .lang{position:relative} .lang > button{ display:inline-flex;align-items:center;gap:6px;cursor:pointer; background:transparent;border:1px solid var(--rule);color:var(--ink-3); border-radius:2px;padding:6px 9px;line-height:1; font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; } .lang > button:hover{color:var(--ink);border-color:var(--rule-2)} .lang > button::after{content:"▾";font-size:9px;opacity:.7} .lang menu{ position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:60; margin:0;padding:5px;list-style:none;min-width:210px; background:var(--draft-2);border:1px solid var(--rule-2);border-radius:3px; box-shadow:var(--lift-2); display:none; } .lang menu[data-open]{display:block} .lang menu li{margin:0;list-style:none} .lang menu button{ display:flex;width:100%;gap:10px;align-items:baseline;text-align:start; background:transparent;border:0;cursor:pointer;padding:7px 9px;border-radius:2px; color:var(--ink-2);font-family:var(--f-body);font-size:13.5px; } .lang menu button:hover{background:var(--draft-3);color:var(--ink)} .lang menu button[aria-current="true"]{color:var(--seal);font-weight:600} .lang menu button .code{ font-family:var(--f-mono);font-size:10px;color:var(--ink-4); margin-inline-start:auto;letter-spacing:.08em;text-transform:uppercase; } .lang menu .part{ font-family:var(--f-mono);font-size:9px;color:var(--brass); letter-spacing:.06em;text-transform:uppercase; } /* Translated strings run 20–35% longer than English in Romance languages and German. Nothing here may rely on a fixed width to stay readable. */ .btn, .chip, .tabs button, .filters button{white-space:normal} @media(min-width:1000px){.nav nav a{white-space:nowrap}} /* ── THE NAV MUST NOT EAT A LINK ──────────────────────────────────────────── `.nav-in > *{min-width:0}` above lets the link strip shrink, which is what stops a long translation from scrolling the whole page. Until this was measured it did something worse than scroll: it CLIPPED, silently, with no scrollbar and no affordance. Measured in Chrome at 1440px, every page of the site, Spanish: page nav.scrollWidth nav.clientWidth last link visible reachable / 709 616 Estado NO NO /pricing/ 710 691 Estado NO NO /docs/ 711 692 Estado NO NO /dashboard/ 710 691 Estado NO NO `Estado` is the Status page. For a Spanish reader it was not merely cramped, it was GONE — off the end of a strip that could not be scrolled, at every width from the 1000px breakpoint up. English (606/606) and Arabic (554/554) fit exactly, which is why nobody saw it: the language that overflows is not the language the site is written in. Two changes, and the second is the one that generalises. A tighter gap recovers 24px, which is more than the 19px the interior pages were short — so they now fit outright rather than scroll. And `overflow-x:auto` means any locale that still does not fit — the landing page in Spanish is 93px over, and a translation nobody has written yet could be worse — scrolls instead of losing a link. A nav that is too small should be awkward, never incomplete. ─────────────────────────────────────────────────────────────────────────── */ @media(min-width:1000px){ .nav nav{gap:18px;overflow-x:auto;scrollbar-width:none} .nav nav::-webkit-scrollbar{display:none} } /* Untranslated fragments are marked rather than hidden, so a partial locale is visibly partial instead of quietly mixed. */ [data-i18n-fallback]{border-bottom:1px dotted var(--rule-2)} /* Page-level rules like `.hero h1` carry the same specificity as `:root[lang^="ar"] h1` and load later, so they win a tie and non-Latin headings inherit Latin display leading — which clips descenders and stacks CJK/Arabic glyphs. These raise specificity to settle it deliberately rather than by source order. */ :root[lang^="zh"] .hero h1, :root[lang^="ja"] .hero h1, :root[lang^="ko"] .hero h1{ line-height:1.32; letter-spacing:0; text-wrap:normal; } :root[lang^="ar"] .hero h1, :root[lang^="fa"] .hero h1, :root[lang^="he"] .hero h1{ line-height:1.42; letter-spacing:0; text-wrap:normal; } :root[lang^="zh"] .cta h2, :root[lang^="ja"] .cta h2, :root[lang^="ar"] .cta h2{line-height:1.34;letter-spacing:0} :root[lang^="zh"] .q .qq, :root[lang^="ja"] .q .qq, :root[lang^="ar"] .q .qq{line-height:1.5} :root[lang^="zh"] .step .sv, :root[lang^="ar"] .step .sv{line-height:1.15} :root[lang^="zh"] .statusbar .big, :root[lang^="ar"] .statusbar .big{line-height:1.4} :root[lang^="ar"] summary, :root[lang^="zh"] summary{line-height:1.55} /* Italic is a Latin emphasis device. Arabic and Hebrew have no italic form, so a browser synthesises an oblique — which on a Naskh face reads as a rendering fault rather than emphasis. Substitute the distinction the script does use: weight and colour. Same for CJK, where synthetic oblique is equally wrong. */ :root[lang^="ar"] em, :root[lang^="he"] em, :root[lang^="fa"] em, :root[lang^="zh"] em, :root[lang^="ja"] em, :root[lang^="ko"] em, :root[lang^="ar"] .hero h1 .i, :root[lang^="he"] .hero h1 .i, :root[lang^="zh"] .hero h1 .i, :root[lang^="ja"] .hero h1 .i, :root[lang^="ar"] .lede em, :root[lang^="zh"] .lede em{ font-style:normal; font-weight:500; } :root[lang^="ar"] .hero h1{font-size:clamp(34px,5.4vw,58px)} :root[lang^="zh"] .hero h1, :root[lang^="ja"] .hero h1{font-size:clamp(34px,5.6vw,62px)} /* ─── grid overflow ──────────────────────────────────────────────────────── Grid and flex children default to `min-width:auto`, which means a child with wide unbreakable content — a monospace receipt, a hash, a wide table — can push its track past the container instead of scrolling inside itself. The page then overflows horizontally on narrow viewports even though every scroll container is declared correctly. Resetting min-width on the children is what actually makes `overflow-x:auto` do its job. ─────────────────────────────────────────────────────────────────────── */ .hero-in > *, .cols > *, .panel > *, .qs > *, .ladder > *, .calc-out > *, .postures > *, .fgrid > *, .doc > *, .rungs > * > *, .nav-in > *, .r-foot > *, .chart-head > *{ min-width:0 } .hero-in, .cols, .panel, .qs, .ladder, .calc-out, .doc{ min-width:0 } .r-line, .r-total, .sysrow, .rung, .dec, .risk{ min-width:0 } .r-line > *, .r-total > *, .sysrow > *{ min-width:0 } /* Long unbreakable strings — hashes, endpoint ids, receipt ids — must wrap or scroll rather than widen the page. */ .hash, .r-line .v, .crumb, .fbot{ overflow-wrap:anywhere } /* Narrow viewports: the nav action cluster is the one place that genuinely runs out of room once a language switcher is added. */ @media(max-width:520px){ .nav-in{gap:12px} .nav-act{gap:6px} .tt{font-size:0;padding:7px} .tt::before{content:"◐";font-size:11px} .lang > button{padding:6px 7px} } /* ── PRE-LAUNCH NOTICE ────────────────────────────────────────────────────── Said once, at the top, on every page — so the pages below can describe the product in the present tense without each one stopping to apologise for itself. The status page carries the detail and supersedes any of them. */ .prelaunch{border-bottom:1px solid var(--rule);background:var(--draft-3)} .prelaunch-in{display:flex;align-items:flex-start;gap:10px;padding:9px 0} .prelaunch p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2);max-width:92ch} .prelaunch strong{color:var(--ink)} .prelaunch a{color:var(--ink);text-decoration:underline;text-underline-offset:2px} .pl-dot{flex:none;width:7px;height:7px;margin-top:5px;border-radius:50%; background:var(--brass);box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 22%,transparent)} @media (max-width:640px){.prelaunch p{font-size:12px}} /* ── THE MOBILE NAVIGATION ─────────────────────────────────────────────────── `.nav nav` is display:none below 1000px. That was the whole story: on a phone the navigation did not collapse into anything, it just was not there. The button below 1000px opens the SAME