/* IBM Plex, ONE family in three voices (the deliberate type decision): Serif carries the documentary sentences (what the documents say), Sans the interface, Mono figures and citations. Vendored latin subsets, served from this app. */ @font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2")} @font-face{font-family:"IBM Plex Serif";font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/ibm-plex-serif-latin-400-normal.woff2) format("woff2")} @font-face{font-family:"IBM Plex Serif";font-weight:400;font-style:italic;font-display:swap;src:url(/static/fonts/ibm-plex-serif-latin-400-italic.woff2) format("woff2")} @font-face{font-family:"IBM Plex Serif";font-weight:600;font-style:normal;font-display:swap;src:url(/static/fonts/ibm-plex-serif-latin-600-normal.woff2) format("woff2")} @font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")} @font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/static/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")} /* THE INSTRUMENT: an achromatic, hairline-ruled surface where the only colour on the page is the state of the evidence (Okabe-Ito, contrast-adjusted per theme). Neutrals are committed to one cool hue (~215deg); interaction and selection are INK, never a decorative hue; structure is 1px hairlines on a stepped surface ladder, and shadows exist only on true overlays. CONTRAST: text is >= 4.5:1 AA and the shared status-glyph owner supplies >= 3:1 state colours on their real grounds. Hairline borders are supplementary structure: every boundary they draw is also carried by ground shifts and spacing. */ :root{ --bg:#f3f5f8;--surface:#fff;--surface-2:#e9edf3;--hover:#f2f5f9;--inset:#eef1f6; --ink:#141b24;--ink-soft:#4e5a68;--ink-3:#697582;--line:#dde3ea;--line-soft:#e9edf2;--accent:#141b24; --radius:6px;--shadow:none; --serif:"IBM Plex Serif",ui-serif,Georgia,serif;--sans:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --pw:640px; /* the motion tokens (doc-31 §4j): the ONLY place durations/curves live (Carbon productive tiers + M3 easing); every transition below references these */ --mo-tip:70ms;--mo-fast:110ms;--mo-enter:250ms;--mo-exit:200ms; --mo-ease:cubic-bezier(.2,0,0,1); --mo-ease-in:cubic-bezier(.05,.7,.1,1); --mo-ease-out:cubic-bezier(.3,0,.8,.15); } /* Light is the DEFAULT for every reader (user decision 2026-08-16, reversing dark-only); dark is an explicit choice, stamped on the root by the toggle and persisted. No OS auto-switch: the instrument renders identically everywhere unless the reader asks otherwise. */ :root[data-theme="dark"]{ --bg:#07090d;--surface:#10151c;--surface-2:#1a212b;--hover:#161d26;--inset:#0c1117; --ink:#e9eef4;--ink-soft:#9fabbb;--ink-3:#748392;--line:#303b49;--line-soft:#232c37;--accent:#e9eef4; --shadow:none; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums} summary{user-select:none} summary .cl-lab{user-select:text} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} /* ---- the shell: the window-class layout system (doc-31 §4j) -------------------------- JS stamps data-layout="split|rail|compact" on from ONE threshold definition (both dimensions; a landscape phone is compact). NO layout breakpoint lives in CSS: every tier rule keys off the stamp. Without JS the stamp is absent and the page falls back to the stacked document flow below. ------------------------------------- */ /* fallback / document flow (no stamp): everything stacks, page scrolls */ .mid,.drawer{position:static;width:auto;height:auto;overflow:visible;box-shadow:none} /* dialog UA resets: the drawer is a so the platform owns modality; its box behaves like the pane/overlay the tier prescribes */ .drawer{margin:0;border:0;padding:0;max-width:none;max-height:none;inset:auto; color:inherit;background:var(--surface);border-top:1px solid var(--line)} .drawer:not([open]){display:none} /* pre-stamp guard: until the script stamps data-layout, the server-rendered open dialog must not paint - otherwise every load at rail/compact (incl. each bond switch, which reloads the iframe) flashes the drawer open before the layout code closes it. No second tier definition: CSS only. */ html:not([data-layout]) .drawer{display:none} /* CSS owns scroll smoothness (one motion owner); reduced-motion flips it below */ .mid,.drawer{scroll-behavior:smooth} .grip,.dopen,.dclose,.scrim{display:none} .midin{max-width:700px;margin:0 auto;padding:34px 30px 60px} /* split: full-viewport two panes, independent scroll, drawer always visible. The pane widths live on the CONTAINER as grid columns; the scrollers keep width:auto. This is load-bearing: CSS scroll anchoring is SUPPRESSED by width/position changes on the scroller's path (spec §2.2.2), so sizing panes via grid keeps NATIVE anchoring alive while the grip drags - the reading position holds with zero JS. */ [data-layout="split"] body,[data-layout="split"]{height:100%;overflow:hidden} [data-layout="split"] .app{height:100vh;height:100dvh;width:100%;position:relative; display:grid;grid-template-rows:auto minmax(0,1fr); grid-template-columns:minmax(0,1fr) var(--pw)} [data-layout="split"] .abar{grid-row:1;grid-column:1/-1} [data-layout="split"] .mid{grid-row:2;grid-column:1;position:static;overflow-y:auto;overflow-x:hidden} [data-layout="split"] .drawer{grid-row:2;grid-column:2;position:static;width:auto;height:auto;overflow-y:auto; border-top:0;border-left:1px solid var(--line);box-shadow:-18px 0 40px rgba(0,0,0,.28)} [data-layout="split"] .grip{display:block;grid-row:2;grid-column:1;justify-self:end;position:relative; margin-right:-6px;width:11px;cursor:col-resize;z-index:5;touch-action:none} .grip::after{content:"";position:absolute;top:50%;left:50%;width:3px;height:52px; transform:translate(-50%,-50%);border-radius:2px;background:var(--line)} .grip:hover::after,.grip:focus-visible::after,.grip.drag::after{background:var(--accent)} /* rail + compact: single column; the drawer is a MODAL in the top layer. Motion contract (doc-31 §4j): both directions animate - the closed state carries the off-screen transform + exit transition; `overlay` rides the transition so the dialog stays in the top layer while sliding out (the documented dialog-close pattern). All durations/curves come from the --mo tokens, nowhere else. */ [data-layout="rail"] .drawer,[data-layout="compact"] .drawer{ position:fixed;z-index:70;top:0;bottom:0;right:0;left:auto;height:auto;overflow-y:auto; overscroll-behavior:contain;border-top:0; transition:transform var(--mo-exit) var(--mo-ease-out),display var(--mo-exit) allow-discrete, overlay var(--mo-exit) allow-discrete} [data-layout="rail"] .drawer{width:min(640px,100%);transform:translateX(100%); border-left:1px solid var(--line);box-shadow:-18px 0 40px rgba(0,0,0,.28)} [data-layout="compact"] .drawer{left:0;width:auto;border-left:0;transform:translateY(100%)} [data-layout="rail"] .drawer[open],[data-layout="compact"] .drawer[open]{ transform:none; transition:transform var(--mo-enter) var(--mo-ease-in),display var(--mo-enter) allow-discrete, overlay var(--mo-enter) allow-discrete} @starting-style{ [data-layout="rail"] .drawer[open]{transform:translateX(100%)} [data-layout="compact"] .drawer[open]{transform:translateY(100%)} } [data-layout="rail"][data-drawer="open"],[data-layout="compact"][data-drawer="open"]{overflow:hidden} /* the scrim is the platform's ::backdrop, fading both ways */ .drawer::backdrop{background:rgba(10,15,25,.4);opacity:0; transition:opacity var(--mo-exit) var(--mo-ease-out),display var(--mo-exit) allow-discrete, overlay var(--mo-exit) allow-discrete} .drawer[open]::backdrop{opacity:1; transition:opacity var(--mo-enter) var(--mo-ease-in),display var(--mo-enter) allow-discrete, overlay var(--mo-enter) allow-discrete} @starting-style{ .drawer[open]::backdrop{opacity:0} } /* the ONE chrome bar: sticky top app bar on rail/compact (bond switcher leading, Questions + theme trailing); dissolves on split leaving only the floating theme toggle */ /* ONE bar, IDENTICAL on every tier: bond pills leading, Questions (when the drawer is summoned rather than resident) + theme trailing. Contents align with the content column, never the screen edge. On split the bar is the grid's auto first row; its inner pads right by the drawer width so it centers over the card column. */ .abar{position:sticky;top:0;z-index:50;display:flex;align-items:center;padding:8px 0; background:var(--bg);border-bottom:1px solid var(--line)} .abarin{flex:1;display:flex;align-items:center;gap:8px;max-width:700px;margin:0 auto;padding:0 30px} [data-layout="compact"] .abarin{max-width:none;padding:0 16px} [data-layout="split"] .abar{padding-right:var(--pw)} /* Split: the card column is VIEWPORT-centered while there is slack, and only yields when the drawer edge actually needs its space - motion only when it must. ONE formula for the content column and the bar inner, so the bar always sits over the card. 50vw-350px is the viewport-centered slot for the 700px column; 100% is the pane the drawer leaves. */ [data-layout="split"] .midin,[data-layout="split"] .abarin{ margin-left:max(0px,min(calc(50vw - 350px),calc(100% - 700px)));margin-right:0} .abonds{display:flex;gap:6px} .abtn{font:inherit;font-size:12.5px;font-weight:650;padding:5px 12px;border-radius:999px; border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer} .abtn.on{color:var(--bg);background:var(--ink);border-color:var(--ink)} .aspace{flex:1} [data-layout="rail"] .dopen,[data-layout="compact"] .dopen{display:block} .dopen{font:inherit;font-size:12.5px;font-weight:650;padding:6px 13px;border-radius:999px; border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer} .dopen:hover{color:var(--ink);border-color:var(--accent)} /* the theme toggle is ALWAYS a bar item - the floating corner button is retired */ .abar .themetog{position:static;box-shadow:none;left:auto;bottom:auto} [data-layout="rail"][data-drawer="open"] .dclose,[data-layout="compact"][data-drawer="open"] .dclose{ display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px; font-size:20px;line-height:1;font-weight:400;border-radius:50%;padding:0; background:none;border:0;color:var(--ink-soft);cursor:pointer} /* placement per spec: upper RIGHT of the rail side sheet; upper LEFT (leading) on the compact full-screen overlay */ [data-layout="rail"][data-drawer="open"] .dclose{margin-left:auto} [data-layout="compact"][data-drawer="open"] .dclose{order:-1;margin-right:10px} .dclose:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)} /* compact: the card dissolves - edge to edge, the container stops earning its pixels */ [data-layout="compact"] .midin{max-width:none;padding:18px 0 40px} [data-layout="compact"] .midin>header{padding:0 16px} [data-layout="compact"] .pass{border-left:0;border-right:0;border-radius:0;margin-top:14px} [data-layout="compact"] .side,[data-layout="compact"] .auth,[data-layout="compact"] .memo.pend{margin-left:16px;margin-right:16px} /* Questions and the complete source inventory are sibling browsers. A document is a child of either one and replaces the browser until its explicit back action. */ .dhead{position:sticky;top:0;z-index:6;display:flex;background:var(--surface); align-items:center;min-height:47px;border-bottom:1px solid var(--line);padding:0 22px} .checkhead,.sourcehead{font-size:12.5px;font-weight:650;color:var(--ink)} .drawertabs{display:flex;align-self:stretch;align-items:stretch} .drawertabs[hidden]{display:none} .sourcehead{margin-left:12px;color:var(--ink-soft)} .srcback{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:4px 8px; border:0;border-radius:5px;background:none;color:var(--ink);font:650 12.5px var(--sans);cursor:pointer} .srcback[hidden],.sourcehead[hidden],.checkhead[hidden]{display:none} .srcback:hover{background:var(--hover)} .htab{font:inherit;font-size:12.5px;font-weight:650;padding:13px 2px;margin-right:22px;background:none; border:0;border-bottom:2px solid transparent;color:var(--ink-soft);cursor:pointer} .htab.on{color:var(--ink);border-bottom-color:var(--accent)} #view-q{padding:16px 22px 60px} .sourcesview{padding:10px 22px 60px} .sourcegroup{margin:0 0 22px} .sourcegroup h2{margin:0;padding:10px 0 7px;border-bottom:1px solid var(--line); font:650 11px/1.3 var(--sans);letter-spacing:.045em;text-transform:uppercase;color:var(--ink-3)} .sourcelist{display:flex;flex-direction:column} .sourcerow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto; gap:2px 12px;padding:12px 28px 12px 0;border-bottom:1px solid var(--line-soft); color:var(--ink);text-decoration:none} a.sourcerow:hover{background:var(--hover);margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:38px} .sourcetitle{grid-column:1;font:600 13px/1.35 var(--sans);min-width:0} .sourcemeta{grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:10.5px/1.4 var(--mono);color:var(--ink-3)} .sourcechev{position:absolute;right:8px;top:50%;transform:translateY(-50%); color:var(--ink-3);font:20px/1 var(--sans)} a.sourcerow:hover .sourcechev{color:var(--ink)} .sourcerow.unavailable{opacity:.6} .srcwrap{padding:14px 14px 16px} .srccap{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .srcnav,.srcstep,.srczoom{display:flex;align-items:center;gap:6px} .srcnav button,.pdfbar button,.srcopen{font:600 11.5px var(--sans);color:var(--ink-soft);background:var(--surface); border:1px solid var(--line);border-radius:4px;padding:5px 8px;text-decoration:none;cursor:pointer; touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} .srcnav button,.pdfbar button{display:flex;align-items:center;justify-content:center;width:30px;height:28px;padding:0; font-size:15px;line-height:1} .srcstep button{color:var(--ink);font-size:17px;font-weight:700} .pdfbar button.pdfzoomlevel{width:48px;font-size:10.5px;font-family:var(--mono)} .pdfbar button.pdffit{width:auto;padding:0 8px;font-size:11px} .srcnav button:hover,.pdfbar button:hover,.srcopen:hover{color:var(--ink);border-color:var(--ink-3)} .srcnav button:disabled,.pdfbar button:disabled{opacity:.35;cursor:default} .srccount{font:11px var(--mono);color:var(--ink-3);min-width:42px;text-align:center} .pdfbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:39px; padding:5px 7px;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0; background:var(--surface)} .pdfbar[hidden]{display:none} .srcopen{margin-left:2px} .srccitation{position:relative;z-index:5;flex:0 0 auto;margin-bottom:10px;min-width:0} .srccitationbody{padding:8px 11px;border-left:3px solid var(--ink-3);border-radius:4px; background:var(--inset);box-sizing:border-box;cursor:pointer} .srccitationbody:hover .srccontexttoggle span{opacity:1;color:var(--ink)} .srccitationbody .srcnav{cursor:default} .srccitationbody.expanded{position:absolute;inset:0 0 auto;max-height:min(70vh,480px); overflow:auto;border-bottom:1px solid var(--line)} .srcfindinghead{display:flex;align-items:center;justify-content:space-between;gap:12px} .srcfindinglabel{font:600 10px var(--sans);letter-spacing:.035em;text-transform:uppercase; color:var(--ink-3)} .srccontexttoggle{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none; cursor:pointer} .srccontexttoggle span{display:inline-block;font:17px/1 var(--sans);opacity:.55; transform-origin:center;transition:transform var(--mo-fast) var(--mo-ease)} .srccontexttoggle[aria-expanded="true"] span{transform:rotate(90deg)} .srccontexttoggle:hover span,.srccontexttoggle:focus-visible span{opacity:1;color:var(--ink)} .srccontexttoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px} .srcfindingtext{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; overflow:hidden;width:100%;height:2.7em;margin-top:2px;padding:0;border:0;background:none; text-align:left;font:600 12.5px/1.35 var(--sans);color:var(--ink)} .srccitationlabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; margin-top:7px;padding-top:6px;border-top:1px solid var(--line); font:600 10.5px var(--mono);color:var(--ink-3)} .srccitationquote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; overflow:hidden;width:100%;height:2.8em;margin:3px 0 0;padding:0;border:0;background:none; text-align:left;font:12px/1.4 var(--serif);color:var(--ink-soft)} .srccitationbody.expanded .srcfindingtext,.srccitationbody.expanded .srccitationquote{ display:block;-webkit-line-clamp:unset;height:auto;min-height:0;overflow:visible} .pdfbox{position:relative;border:1px solid var(--line);border-radius:0 0 10px 10px;height:400px;display:flex;align-items:center; justify-content:center;background:var(--inset);overflow:hidden} .pdfpageindicator{position:absolute;z-index:6;right:10px; bottom:calc(10px + env(safe-area-inset-bottom));padding:4px 7px;border-radius:999px; background:color-mix(in srgb,#111 76%,transparent);color:#fff;font:600 10.5px/1 var(--mono); font-variant-numeric:tabular-nums;opacity:0;pointer-events:none; transition:opacity var(--mo-fast) var(--mo-ease)} .pdfpageindicator.visible{opacity:.9} .pdfstage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0} [data-drawer="open"] .pdfbox{height:auto;min-height:min(70vh,560px)} .pdfhint{position:absolute;z-index:2;inset:0;display:grid;place-items:center; box-sizing:border-box;padding:24px;text-align:center;color:var(--ink-3);font-size:12.5px} .pdfhint[hidden]{display:none} .pdfview{display:block;width:100%;height:100%;min-height:inherit;overflow:auto; -webkit-overflow-scrolling:touch;overscroll-behavior:contain; touch-action:pan-x pan-y; background:color-mix(in srgb,var(--inset) 82%,#777)} .pdfpages{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px; min-height:100%;box-sizing:border-box} .pdfpage{position:relative;flex:0 0 auto;width:min(100%,900px);aspect-ratio:612/792; background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.22)} .pdfpage canvas{display:block;width:100%;height:100%} /* A source replaces the check browser in the same detail surface and gives the PDF all space left after its navigation, controls and compact active-citation caption. */ .drawer[open][data-view="source"]{display:flex;flex-direction:column;overflow:hidden} .drawer[data-view="source"] .dhead{position:relative;flex:0 0 auto} .drawer[data-view="source"] .dclose{display:none!important} .drawer[data-view="source"] #view-s{display:flex;flex:1 1 auto;min-height:0} .drawer[data-view="source"] .srcwrap{display:flex;flex:1 1 auto;min-width:0;min-height:0; flex-direction:column} .drawer[data-view="source"] .pdfstage{flex:1 1 0} .drawer[data-view="source"] .pdfbox{flex:1 1 0;height:auto;min-height:0} /* Compact source mode is the same child view, promoted to a full-screen mobile document workspace. There is no nested sheet or second navigation model. */ [data-layout="compact"] .drawer[data-view="source"]{height:100vh;height:100dvh; max-height:100dvh;overflow:hidden} [data-layout="compact"] .drawer[data-view="source"] .dhead{padding-top:env(safe-area-inset-top); flex:0 0 auto;min-height:calc(47px + env(safe-area-inset-top))} [data-layout="compact"] .drawer[data-view="source"] .srcback{min-width:44px;min-height:44px; margin-left:-10px;padding:0 10px} [data-layout="compact"] .drawer[data-view="source"] .srcwrap{position:relative;padding:0} [data-layout="compact"] .drawer[data-view="source"] .srccap{display:none} [data-layout="compact"] .drawer[data-view="source"] .srcnav{display:flex;flex:0 0 auto} [data-layout="compact"] .drawer[data-view="source"] .srcnav[hidden]{display:none} [data-layout="compact"] .drawer[data-view="source"] .srcstep, [data-layout="compact"] .drawer[data-view="source"] .srczoom{flex:0 0 auto;gap:4px} [data-layout="compact"] .drawer[data-view="source"] .srcstep button{font-size:19px} [data-layout="compact"] .drawer[data-view="source"] .pdfstage{position:relative} [data-layout="compact"] .drawer[data-view="source"] .pdfbar{position:absolute;z-index:4;top:8px; right:8px;min-height:0;gap:4px;padding:2px;border:0;border-radius:8px; background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 1px 5px rgba(0,0,0,.14); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} [data-layout="compact"] .drawer[data-view="source"] .srcnav button, [data-layout="compact"] .drawer[data-view="source"] .pdfbar button, [data-layout="compact"] .drawer[data-view="source"] .srcopen{flex:0 0 auto;min-width:34px;width:34px; height:32px;border-radius:6px} /* Fit width is the mobile reset; hiding the duplicate percentage button keeps every action, including the new-tab fallback, visible without a mystery overflow. */ [data-layout="compact"] .drawer[data-view="source"] .pdfbar button.pdfzoomlevel{display:none} [data-layout="compact"] .drawer[data-view="source"] .pdfbar button.pdffit{width:auto;min-width:34px; padding:0 7px} [data-layout="compact"] .drawer[data-view="source"] .srcopen{display:flex;align-items:center; justify-content:center;margin-left:0;padding:0;font-size:0} [data-layout="compact"] .drawer[data-view="source"] .srcopen::before{content:"\2197";font-size:18px} [data-layout="compact"] .drawer[data-view="source"] .srccitation{margin:0} [data-layout="compact"] .drawer[data-view="source"] .srccitationbody{padding:5px 9px 6px; border-left:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--surface)} [data-layout="compact"] .drawer[data-view="source"] .srccitationbody.expanded{ max-height:min(70dvh,480px)} [data-layout="compact"] .drawer[data-view="source"] .srcfindingtext{-webkit-line-clamp:1; height:1.35em;margin-top:1px} [data-layout="compact"] .drawer[data-view="source"] .srccitationlabel{margin-top:4px;padding-top:4px} [data-layout="compact"] .drawer[data-view="source"] .srccitationquote{-webkit-line-clamp:1; height:1.4em;margin-top:2px} [data-layout="compact"] .drawer[data-view="source"] .srccitationbody.expanded .srcfindingtext, [data-layout="compact"] .drawer[data-view="source"] .srccitationbody.expanded .srccitationquote{ display:block;-webkit-line-clamp:unset;height:auto;min-height:0;overflow:visible} [data-layout="compact"] .drawer[data-view="source"] .pdfbox{border:0;border-radius:0} [data-layout="compact"] .sourcesview{padding:8px 16px calc(40px + env(safe-area-inset-bottom))} [data-layout="compact"] .sourcegroup{margin-bottom:18px} [data-layout="compact"] .sourcerow{padding-top:11px;padding-bottom:11px} /* header */ .crumb{font-size:12px;letter-spacing:.015em;color:var(--ink-soft);font-weight:600} .context-nav{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:9px; padding-top:9px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-soft)} .context-nav>span{font-weight:600;color:var(--ink-3)} .context-nav strong{color:var(--ink);font-weight:600} .context-nav a{margin-left:auto;color:var(--ink-soft);text-decoration:none; border-bottom:1px dotted var(--line)} .context-nav a:hover{color:var(--ink);border-bottom-color:var(--ink)} /* the brand up-link (doc-31 §4j replaced 2026-08-25): always a link; the directory self-links with aria-current */ .brand{font-size:12px;letter-spacing:.015em;color:var(--ink-soft);font-weight:600; text-decoration:none;white-space:nowrap;line-height:1.4} .brand:hover{color:var(--ink)} .bondhome{font-size:12px;font-weight:650;color:var(--ink);text-decoration:none; white-space:nowrap;padding:5px 8px;border-radius:4px} .bondhome:hover{background:var(--hover)} .brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px} /* the published-subject selector, in the pill vocabulary; native menu keeps every full label (R4) */ .bondsel{font:inherit;font-size:12.5px;font-weight:650;padding:4px 10px;border-radius:999px; border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer; max-width:100%} .bondsel:hover{border-color:var(--ink-3)} .bondsel:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* the context slot reads as CONTEXT, not part of the brand phrase: a quiet left hairline + breathing room */ .barctx{border-left:1px solid var(--line);padding-left:10px;margin-left:2px} /* R4 compact rule: fixed controls keep intrinsic width; the context slot has min-width 0, at most 45vw, shrinks into the remaining space; the selected label may ellipsize; nothing hides, wraps, overlaps or leaves the viewport */ @media (max-width:640px){ .abarin{gap:4px;padding-left:10px;padding-right:10px;min-width:0} .brand{font-size:11.5px} .dopen,.themetog{font-size:11.5px;padding:4px 8px} /* fixed controls keep intrinsic width; ONLY the context slot shrinks */ .brand,.dopen,.themetog,.abarin>.crumb:not(.barctx){flex-shrink:0} .bondsel,.barctx{flex:1 1 auto;min-width:0;max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bondsel{padding:4px 6px} } h1{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.2;margin:.35em 0 .2em;letter-spacing:-.015em;text-wrap:balance} .meta{font-family:var(--mono);font-size:12px;color:var(--ink-3)} /* Status shape, colour and symbols are owned by _status_glyphs.html. */ .gly{flex:0 0 auto} .chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:5px 14px 5px 12px;font-size:13px;font-weight:650;border:1px solid;white-space:nowrap} .chip.lg{font-size:14px;padding:6px 16px 6px 13px} .c-supported{color:var(--tx-supported);border-color:color-mix(in srgb,var(--supported) 42%,transparent);background:color-mix(in srgb,var(--supported) 10%,var(--surface))} .c-conflicting{color:var(--tx-conflicting);border-color:color-mix(in srgb,var(--conflicting) 48%,transparent);background:color-mix(in srgb,var(--conflicting) 11%,var(--surface))} .c-refuted{color:var(--tx-refuted);border-color:color-mix(in srgb,var(--refuted) 48%,transparent);background:color-mix(in srgb,var(--refuted) 11%,var(--surface))} .c-undetermined{color:var(--tx-undetermined);border-color:color-mix(in srgb,var(--undetermined) 48%,transparent);background:color-mix(in srgb,var(--undetermined) 11%,var(--surface))} /* the summary card: status zone / balance zone / coverage zone */ .pass{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .status{display:flex;align-items:center;gap:14px;padding:14px 18px;flex-wrap:wrap} /* the verdict clause is the most important sentence on the page: the serif carries it */ .clause{font-family:var(--serif);font-size:15px;color:var(--ink-soft);line-height:1.45;flex:1;min-width:26ch;text-wrap:pretty} .clause b{color:var(--ink);font-weight:650} .pc{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-soft)} .pcc{padding:13px 18px 15px} .pcc.l{border-right:1px solid var(--line-soft)} .pch{font-size:11px;letter-spacing:.015em;font-weight:600;margin-bottom:9px;display:flex;align-items:center;gap:7px} .pch.good{color:var(--tx-supported)} .pch.bad{color:var(--tx-conflicting)} .pci{display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.5;color:var(--ink)} .pci>div{font-family:var(--serif)} .pci>div{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:baseline} .pci>div>.balance-glyph{justify-self:center;margin-top:5px} @media (max-width:560px){.pc{grid-template-columns:1fr}.pcc.l{border-right:0;border-bottom:1px solid var(--line-soft)} /* the key's meaning drops UNDER its row, full width, when narrow - never a crushed column */ .keyitem{grid-template-columns:14px 22px 1fr;row-gap:1px} .keyitem>span:last-child{grid-column:1/-1}} /* card entries: quiet row affordance; the marker MIRRORS the drawer's open record */ .rowlink{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line)} .rowlink:hover,.rowlink:focus-visible{border-bottom-style:solid} .rowlink:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .pci>div:has(a.rowlink){border-radius:7px;padding:3px 8px;margin:0 -8px;cursor:pointer; grid-template-columns:16px 1fr 12px} .pci>div:has(a.rowlink):hover{background:color-mix(in srgb,var(--ink) 6%,transparent)} .pci>div:has(a.rowlink)::after{content:"\203A";justify-self:end;align-self:start;color:var(--ink-3); font-size:15px;line-height:1.2;opacity:.55} .pci>div:has(a.rowlink):hover::after{opacity:1;color:var(--ink)} .pci>div:not(:has(a.rowlink)){cursor:default;color:var(--ink-soft)} .pci>div:has(a.rowlink[aria-current="true"])::after{opacity:1;color:var(--accent)} .pci a.rowlink{color:inherit;border-bottom:0;text-decoration:none} .pci>div:hover a.rowlink{color:var(--ink)} .pci>div:has(a.rowlink[aria-current="true"]){ background:color-mix(in srgb,var(--ink) 8%,transparent); box-shadow:inset 2px 0 0 var(--accent)} /* the folded counts are DISCLOSURES (ARIA disclosure pattern): a real button in CONTROL vocabulary - verb-first label, caret down/up, no state glyph, no row anatomy - so a control never masquerades as a fourth finding. Members reveal ABOVE it; the control stays put. */ .pci>div[hidden]{display:none} .pci>button.pfold{align-self:start;font:inherit;font-size:12.5px;font-weight:500; color:var(--ink-soft);background:none;border:0;padding:2px 0;margin-left:24px;cursor:pointer} .pci>button.pfold::after{content:"\203A";display:inline-block;margin-left:5px;color:var(--ink-3); transform:rotate(90deg)} .pci>button.pfold[aria-expanded="true"]::after{transform:rotate(270deg)} .pci>button.pfold:hover{color:var(--ink)} .pci>button.pfold:hover::after{color:var(--ink)} /* coverage zone: grouped runs + per-state key */ .cov{padding:13px 18px 11px;border-top:1px solid var(--line-soft);background:color-mix(in srgb,var(--surface-2) 22%,var(--surface))} .covdots{display:flex;gap:20px;flex-wrap:wrap} .dgrp{display:flex;flex-direction:column;gap:6px} .glab{font-size:10.5px;letter-spacing:.015em;color:var(--ink-3);font-weight:600; background:none;border:0;padding:0;font-family:inherit;cursor:pointer;text-align:left} /* the same resting signifier the card entries carry: a quiet chevron says "this goes somewhere" */ .glab::after{content:"\203A";margin-left:4px;opacity:.55} .glab:hover{color:var(--ink)} .glab:hover::after{opacity:1} .drun{display:flex;gap:5px;align-items:center} .dot{width:11px;height:11px;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center} .covcap{margin-top:10px;font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums} .grplead{font-size:11px;letter-spacing:.015em;font-weight:600;color:var(--ink-3);margin:14px 0 7px} /* the legend is a TABLE in all but name, so it aligns like one: glyph | count | label | meaning */ .covkey{display:flex;flex-direction:column;gap:4px;margin-top:9px;font-size:12px;color:var(--ink-soft);line-height:1.35} .keyitem{display:grid;grid-template-columns:14px 22px 148px 1fr;gap:0 8px;align-items:center} .keyitem .dot{justify-self:center} .keyitem .num{text-align:right;font-family:var(--mono);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums} .keyitem .lab{color:var(--ink);font-weight:500} .keyitem>span:last-child{color:var(--ink-3)} /* the dots are live: no motion on hover or focus, the glyph under the pointer simply lights up */ .covdots .dot{cursor:pointer;outline:0;position:relative} .covdots .dot:hover,.covdots .dot:focus-visible{filter:brightness(1.45)} /* the OPEN question's dot sits on a tinted GROUND PAD - the same selection vocabulary as the card entry and the drawer row (selected = ground shift), no added strokes, silhouette settled */ .covdots .dot[aria-current="true"]::after{content:"";position:absolute;width:19px;height:19px; left:50%;top:50%;transform:translate(-50%,-50%);border-radius:5px; background:color-mix(in srgb,var(--ink) 8%,transparent)} /* the dot tooltip: identity on hover AND focus, persistent, Esc-dismissible (WCAG 1.4.13); a true overlay, so it keeps a shadow */ .qtip{position:fixed;z-index:99;max-width:340px;background:var(--surface);border:1px solid var(--line); border-radius:8px;box-shadow:0 8px 24px rgba(10,15,25,.25);padding:8px 11px;font-size:12.5px; line-height:1.45;color:var(--ink)} /* the selection caveat reads LAST, as a footnote about method, under its own hairline */ .covnote{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--ink-3)} /* ---- drawer sections: pillars + the disclaimer share one anatomy ---- */ .phead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap} .pname{font-weight:700;font-size:15.5px} .psub{width:100%;font-weight:400;font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-top:2px} .pv{display:flex;flex-direction:column;align-items:flex-end} .qual{display:block;text-align:right;font-size:11px;font-weight:400;color:var(--ink-soft);margin-top:4px;line-height:1.4} .qual .lead{opacity:.6;margin-right:2px} a.qual{color:var(--ink-soft);text-decoration:none;border-bottom:1px dotted var(--line);width:fit-content} a.qual:hover{color:var(--ink);border-bottom-color:var(--ink-soft)} a.qual:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px} #view-q section.pillar+section.pillar{padding-top:4px} .pline{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-top:8px} /* rows are cards; PROXIMITY binds a row to its own record, COMMON REGION joins the open pair: an open row and its record share one bordered region with a continuous accent edge */ .memo{margin-top:9px} .line{display:grid;grid-template-columns:12px 1fr;gap:11px;align-items:start;width:100%;text-align:left; font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:5px; margin-top:8px;padding:10px 12px;cursor:pointer} .line:hover{background:var(--hover)} /* the open pair is ONE region: the row keeps NO bottom border (a transparent border still occupies a 1px strip, which cut a light line across the accent bar at the join); the lost pixel goes into the padding so the row's height holds */ .line[aria-expanded="true"]{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent); border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0;padding-bottom:11px;margin-bottom:0} /* a brief emphasis so the eye lands on the row the card sent you to */ .line.hit{animation:hitfade .9s ease-out} @keyframes hitfade{from{background:color-mix(in srgb,var(--accent) 14%,var(--surface)); box-shadow:inset 3px 0 0 var(--accent),0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}} .line .gly{margin-top:5px} .tou{font-family:var(--serif);font-size:13.5px;line-height:1.5;min-width:0;overflow-wrap:anywhere} .badge{grid-column:2;justify-self:start;margin-top:5px;font-size:10px;font-weight:600;letter-spacing:.02em; border-radius:3px;padding:1px 6px;border:1px solid;white-space:nowrap} .b-supported{color:var(--tx-supported);border-color:color-mix(in srgb,var(--supported) 45%,transparent);background:color-mix(in srgb,var(--supported) 10%,transparent)} .b-undetermined{color:var(--tx-undetermined);border-color:color-mix(in srgb,var(--undetermined) 45%,transparent);background:color-mix(in srgb,var(--undetermined) 10%,transparent)} .b-exc{color:var(--tx-supported);border-style:dashed;border-color:color-mix(in srgb,var(--supported) 60%,transparent);background:color-mix(in srgb,var(--supported) 8%,transparent)} .b-abstained{color:var(--tx-abstained);border-color:color-mix(in srgb,var(--abstained) 45%,transparent);background:color-mix(in srgb,var(--abstained) 9%,transparent)} .b-chi{color:var(--tx-refuted);border-color:color-mix(in srgb,var(--refuted) 45%,transparent);background:color-mix(in srgb,var(--refuted) 10%,transparent)} .b-cmd{color:var(--tx-conflicting);border-color:color-mix(in srgb,var(--conflicting) 48%,transparent);background:color-mix(in srgb,var(--conflicting) 11%,transparent)} .b-clo{color:var(--tx-conflicting);border-color:color-mix(in srgb,var(--conflicting) 40%,transparent);background:color-mix(in srgb,var(--conflicting) 9%,transparent)} .basis{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin-left:7px;vertical-align:1px} .vchip{font-family:var(--mono);font-size:11px;background:var(--inset);border:1px solid var(--line); border-radius:3px;padding:1px 5px;margin-right:7px;white-space:nowrap;display:inline-block;color:var(--ink-soft)} /* not-covered rows carry their state glyph like every other row, and promise nothing extra at rest */ .line.abst .gly{margin-top:5px} /* the record, joined under its row */ .recbox{border:1px solid var(--line);border-top:0;border-radius:0 0 5px 5px; background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent);padding:0 0 2px} .recbox .dpane{padding:2px 14px 14px 28px} .dpane .dq{font-size:13px;color:var(--ink-soft);border-left:2px solid var(--line);padding-left:12px;margin:6px 0 14px} .dpane .dq b{display:block;font-size:10.5px;letter-spacing:.015em;margin-bottom:4px;opacity:.85;font-weight:600} .dpane .dmean{font-size:11.5px;line-height:1.5;color:var(--ink-3);margin:0 0 10px} .dpane .dev{font-family:var(--serif);font-size:13.5px;line-height:1.6} .dpane .dev .lead{color:var(--ink-soft);font-weight:600} .dpane .dval{margin:13px 0;font-family:var(--mono);font-size:12.5px;background:var(--inset);border:1px solid var(--line); border-radius:4px;padding:9px 11px} .dpane .dbasis{font-size:11.5px;color:var(--ink-3);margin-top:5px} /* Evidence citations belong to the check. A cited quote is one coherent target that drills into its source location; the PDF never owns a second evidence browser. */ .dpane .dcitation{display:block;margin-top:10px;padding:9px 10px;border:1px solid var(--line-soft); border-radius:7px;background:var(--inset);color:var(--ink-soft);text-decoration:none} .dpane .dcitation+.dcitation{margin-top:7px} /* Match the assessment's other drill-in rows: only references that can open a PDF carry the quiet resting chevron. Plain, unavailable citations remain unmarked. */ .dpane a.dcitation{position:relative;padding-right:30px} .dpane a.dcitation::after{content:"\203A";position:absolute;right:10px;top:50%; transform:translateY(-50%);font-size:17px;line-height:1;color:var(--ink-3);opacity:.55} .dpane a.dcitation:hover{border-color:var(--ink-3);background:var(--hover)} .dpane a.dcitation:hover::after,.dpane a.dcitation:focus-visible::after{opacity:1;color:var(--ink)} .dpane .dciteref{display:block;font:600 11px var(--mono);color:var(--ink-soft)} .dpane .dcitation .snip{display:block;margin-top:5px;padding-left:9px;border-left:2px solid var(--line); font:italic 12.5px/1.45 var(--serif);color:var(--ink-soft)} /* the clears fold: a quiet text row, not a box */ details.clears{margin-top:14px} details.clears>summary{list-style:none;cursor:pointer;padding:9px 14px;display:flex;gap:9px;align-items:center; font-size:12.5px;color:var(--ink-soft)} details.clears>summary::-webkit-details-marker{display:none} .cl-lab{font-weight:600;color:var(--tx-supported)} .cl-hint{margin-left:auto;font-size:11px} /* frequent reveals get ONE fast simultaneous fade (productive motion; no stagger, no height animation): fold rows, the clears body, the record pane, the tooltip */ .pfolditem:not([hidden]),.recbox,.qtip,details.clears[open] .cl-body{ transition:opacity var(--mo-fast) var(--mo-ease)} .qtip{transition-duration:var(--mo-tip)} @starting-style{ .pfolditem:not([hidden]),.recbox,.qtip,details.clears[open] .cl-body{opacity:0} } .cl-body{padding:0 8px 8px} .cl-body .line{background:color-mix(in srgb,var(--surface-2) 45%,var(--surface))} /* furniture: honesty side note, not-yet-assessed, provenance footer */ /* the honesty note is a hairline box like everything else - a coloured edge is the card-stripe tell, and this page's only colour is the state of the evidence */ .side{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin-top:20px;font-size:13px;color:var(--ink-soft)} .memo.pend{background:color-mix(in srgb,var(--surface-2) 55%,var(--surface));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .pend-row{padding:8px 16px;border-top:1px solid var(--line-soft);font-size:13px;line-height:1.45} .pend-row:first-child{border-top:0} .pend-row b{color:var(--ink);font-weight:600} .pend-row span{color:var(--ink-soft)} .auth{margin-top:30px;padding:14px 2px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--ink-3);line-height:1.7} .themetog{position:fixed;left:calc(14px + env(safe-area-inset-left,0px)); bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:80;font:inherit;font-size:12px;font-weight:600; padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface); color:var(--ink-soft);cursor:pointer} .themetog:hover{color:var(--ink);border-color:var(--ink-3)} /* ONE reduced-motion regime: near-zero durations (not transition:none, which would break allow-discrete display switching) - feedback stays, motion goes; JS scrolls follow suit */ @media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}} :root{ --supported:#009E73;--refuted:#D55E00;--conflicting:#E69F00; --minor:#e2be69;--undetermined:#0072B2;--abstained:#6C6C6C; --tx-supported:#0b6e55;--tx-refuted:#9c4400;--tx-conflicting:#7d5800; --tx-undetermined:#00639b;--tx-abstained:#525a66; } :root[data-theme="dark"]{ --supported:#2cbd93;--refuted:#f0813d;--conflicting:#eeb54e; --minor:#987e4c;--undetermined:#419ed8;--abstained:#8a94a4; --tx-supported:#57ceac;--tx-refuted:#f49b6c;--tx-conflicting:#ecc47e; --tx-undetermined:#7fc0e8;--tx-abstained:#a7b1c1; } .status-glyph{display:inline-flex;flex:0 0 auto;width:11px;height:11px; align-items:center;justify-content:center;color:var(--abstained);vertical-align:-1px} .status-glyph--compact{width:11px;height:11px} .status-glyph__shape{position:relative;display:block;width:11px;height:11px} .status-glyph--supported,.status-glyph--exc{color:var(--supported)} .status-glyph--clo{color:var(--minor)} .status-glyph--cmd,.status-glyph--conflicting{color:var(--conflicting)} .status-glyph--chi,.status-glyph--refuted{color:var(--refuted)} .status-glyph--undetermined{color:var(--undetermined)} .status-glyph--abstained{color:var(--abstained)} .status-glyph--supported .status-glyph__shape{border-radius:50%;background:currentColor} .status-glyph--exc .status-glyph__shape{border-radius:50%; background:linear-gradient(90deg,currentColor 0 50%,transparent 50%); box-shadow:inset 0 0 0 1.4px currentColor} .status-glyph--undetermined .status-glyph__shape{border-radius:50%; box-shadow:inset 0 0 0 2px currentColor} .status-glyph--abstained .status-glyph__shape{border-radius:50%; border:1.7px dashed currentColor} .status-glyph--cmd,.status-glyph--conflicting,.status-glyph--clo{width:12px;height:10px} .status-glyph--cmd .status-glyph__shape, .status-glyph--conflicting .status-glyph__shape{width:12px;height:10px;background:currentColor; clip-path:polygon(0 0,100% 0,50% 100%)} .status-glyph--clo .status-glyph__shape{width:12px;height:10px;background:currentColor; clip-path:path(evenodd,"M 0 0 H 12 L 6 10 Z M 3 1.7 H 9 L 6 6.7 Z")} .status-glyph--chi .status-glyph__shape, .status-glyph--refuted .status-glyph__shape{background:currentColor; clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)} .status-tone--supported,.status-tone--exc{color:var(--tx-supported)} .status-tone--clo,.status-tone--cmd,.status-tone--conflicting{color:var(--tx-conflicting)} .status-tone--chi,.status-tone--refuted{color:var(--tx-refuted)} .status-tone--undetermined{color:var(--tx-undetermined)} .status-tone--abstained{color:var(--tx-abstained)} .status-label{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:600} .pv>.status-label{font:600 10px var(--sans)} .status-eyebrow{display:flex;align-items:center;margin-bottom:3px; font-size:11px;font-weight:600;color:var(--ink-3)} .status-eyebrow .status-glyph{margin-right:7px} @media (forced-colors:active){ .status-glyph{color:CanvasText;forced-color-adjust:auto} } /* drawer rows are