/* ───────────────────────────────────────────────────────────────────────────────────────────── * shell.css — ONE portal shell for /account, /account/jobs, /account/links, /account/agents. * Served from /account/ (never /assets — that prefix does not reach sn-control). * * The four :root blocks below are EXTRACTED VERBATIM from PORTAL_PAGE_HTML in server.js, so the * palette has one definition even though two files carry it. portalshell.test.js §1 brace-matches * all four out of BOTH files and asserts they are byte-identical — every palette edit lands here * and in server.js identically, or that suite goes red. (The header used to name a * portalshellparity.test.js; no such file has ever existed.) * * ── 2026-09-08 redesign, SPEC-v2 §2 ────────────────────────────────────────────────────────── * The brand is unchanged: --accent keeps #3560d8 / #5b8cff (and #2f57d6 / #6d99ff under v2), --bg * keeps #f5f7fb / #070f22, --accent2 keeps the violet family. What changed is what the palette can * SAY. Four gradients that lived inside colour tokens (--btnbg x2, --onbbg x2) are now flat fills; * --sh2 is `none` because nothing at rest floats; and the roles the old palette could not express * — a middle ink, a third rule weight, a seal mark, ink on red, one scrim, one sans stack, one * mono stack, the 4px unit, the two radii and the six type sizes — are tokens now instead of 142 * hand-written literals. * * ⚠️ ONE DELIBERATE NUMERIC CORRECTION TO SPEC-v2 §2.1. The spec moves --line2 to #c2cee1 / #2b447d * with the stated reason "it draws every control border; WCAG 1.4.11 needs >= 3:1 for a UI * boundary" (§2.1, restated in §5.1 rule 3 and §6.7). Those two values measure 1.59:1 on #ffffff * and 1.78:1 on #0e1c3c — the spec moved the value but did not recompute it, so its own literal * misses its own requirement. The requirement wins over the literal: --line2 is #7f8faa light * (3.28:1 on --card, 3.05:1 on --bg) and #456ab0 dark (3.15:1 on --card, 3.58:1 on --bg), and * --line3 steps up behind it (#5b6c92 = 5.24:1 / #7d9bd8 = 6.04:1) so the three rule weights stay * distinguishable. Same reasoning for --on-bad in dark: the spec says #ffffff both themes, but * white on the dark theme's #ff7a7a measures 2.53:1, so dark takes the ink side of the pair. * ───────────────────────────────────────────────────────────────────────────────────────────── */ :root{color-scheme:light;--bg:#f5f7fb;--bg2:#ffffff;--bgtint:#f5f7fb;--card:#ffffff;--card2:#f2f5fa;--tile:#eef2f9;--field:#ffffff;--tint:#eaf0fb;--ictile:#e6e9fd;--onbbg:#ffffff;--line:#e4e9f2;--line2:#7f8faa;--line3:#5b6c92;--ink:#0c1424;--ink2:#33415c;--mut:#55668a;--faint:#5f6f92;--accent:#3560d8;--accent2:#7c4ff0;--accentTx:#2a4fc4;--btnbg:#3560d8;--onaccent:#ffffff;--bad:#dc2626;--ok:#07713f;--warn:#8a5a10;--okTx:#076c3e;--badTx:#b91c1c;--on-bad:#ffffff;--seal:#e5b94e;--on-seal:#241a05;--okbg:rgba(10,143,82,.10);--okbd:rgba(10,143,82,.32);--badbg:rgba(220,38,38,.08);--badbd:rgba(220,38,38,.30);--warnbg:rgba(183,121,31,.12);--warnbd:rgba(183,121,31,.38);--scrim:rgba(4,7,15,.55);--sh:0 12px 32px rgba(12,20,36,.10);--sh2:none;--sans:"Cipher Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;--u:4px;--row:36px;--gut:24px;--r-ctl:3px;--r-float:8px;--fs-1:12px;--fs-2:12px;--fs-3:12px;--fs-4:13px;--fs-5:14px;--fs-6:20px;--onscrim:#f0f4ff;--onscrimbd:rgba(240,244,255,.45)} :root[data-theme="dark"]{color-scheme:dark;--bg:#070f22;--bg2:#0b1430;--bgtint:#070f22;--card:#0e1c3c;--card2:#0a1322;--tile:#0a1322;--field:#0a1322;--tint:#16274e;--ictile:#1b2c5c;--onbbg:#101b30;--line:#1c2f57;--line2:#456ab0;--line3:#7d9bd8;--ink:#eef3ff;--ink2:#c3d0ea;--mut:#a3b4d6;--faint:#a3b4d6;--accent:#5b8cff;--accent2:#9366ff;--accentTx:#7fa6ff;--btnbg:#5b8cff;--onaccent:#06101f;--bad:#ff7a7a;--ok:#46d39a;--warn:#ffc24b;--okTx:#46d39a;--badTx:#ff7a7a;--on-bad:#06101f;--seal:#e5b94e;--on-seal:#241a05;--okbg:rgba(70,211,154,.1);--okbd:rgba(70,211,154,.4);--badbg:rgba(255,122,122,.1);--badbd:rgba(255,122,122,.4);--warnbg:rgba(255,194,75,.14);--warnbd:#ffc24b;--scrim:rgba(4,7,15,.72);--sh:0 12px 32px rgba(0,0,0,.45);--sh2:none;--sans:"Cipher Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;--u:4px;--row:36px;--gut:24px;--r-ctl:3px;--r-float:8px;--fs-1:12px;--fs-2:12px;--fs-3:12px;--fs-4:13px;--fs-5:14px;--fs-6:20px;--onscrim:#f0f4ff;--onscrimbd:rgba(240,244,255,.45)} :root[data-skin="v2"]{ --bg:#f4f7fd;--bg2:#ffffff;--card:#ffffff;--tile:#eef3fc;--tint:#eaf0fb; --line:#e7ecf6;--line2:#7f8faa;--ink:#0a1220;--mut:#586a8c; --accent:#2f57d6;--accent2:#7c4ff0;--accentTx:#2a4fc4;--btnbg:#2f57d6; --sh:0 18px 48px rgba(20,32,60,.12); --ring:rgba(47,87,214,.22); } :root[data-skin="v2"][data-theme="dark"]{ --bg:#050b1a;--bg2:#0a1330;--card:#0d1a38;--tile:#0a1424;--tint:#16274e; --line:#213562;--line2:#456ab0;--ink:#f0f4ff;--mut:#a7b0c4; --accent:#6d99ff;--accent2:#9f78ff;--accentTx:#7fa6ff;--btnbg:#6d99ff; --sh:0 20px 56px rgba(0,0,0,.55); --ring:rgba(109,153,255,.30); } /* ── base ──────────────────────────────────────────────────────────────────────────────────── */ *{box-sizing:border-box} /* Reserve the vertical-scrollbar lane on every portal document. Jobs/Agents can be taller than Home; without a stable gutter the entire 248px rail + content frame moves by one scrollbar width during a normal navigation even though none of the shell geometry changed. */ html{scrollbar-gutter:stable} /* SPEC-v2 §3.1/§3.2. Cipher Sans carries the WHOLE product, not just h1-h3: everything a daily user actually reads was the system font because the face was scoped to three heading tags. And the whole product is a register, so tabular figures are the default rather than four opt-ins. */ body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-4)/1.55 var(--sans);font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%} /* Mounted portal documents used to begin at y=0 and gain the 60px header only at DOMContentLoaded. Reserve exactly the canonical header lane in their initial HTML. Once mounted, display:contents makes .top behave like a body child (important for sticky positioning) while occupying that lane with its own identical 60px box. */ #shellhost:empty{display:block;min-height:60px} #shellhost:not(:empty){display:contents} /* SPEC-v3 §1 (2026-09-11) — one family, FOUR sizes, three weights, SENTENCE CASE. The six --fs-* tokens keep their names (every surface spends them) and now resolve onto the v3 scale: --fs-1/-2/-3 = 12 (column heads, captions, counts, meta), --fs-4 = 13 (the reading size), --fs-5 = 14 (group and section titles), --fs-6 = 20 (the page title). The 10px/700 uppercase +.09em "micro-label" that SPEC-v2 §3.1 made the product's one label idiom is gone everywhere: next to Attio's and Linear's real tables it read as a raw database viewer. Weights are 400/500/600; 700 and 800 belong to the wordmark alone (§1.2). */ h1{font:600 var(--fs-6)/1.25 var(--sans);margin:0 0 8px} h2{font:600 var(--fs-5)/1.35 var(--sans);margin:0 0 8px} h3{font:600 var(--fs-4)/1.35 var(--sans);margin:0 0 6px} button{font:inherit} /* The UA paints in a monospace face. A key legend is not a hash (§1: mono is for hashes only), so it reads in the product's own face at the size of the line it sits in. */ kbd{font:inherit} /* …and the UA's `bold` on / is 700, a weight SPEC-v3 §1 reserves for the wordmark (which uses neither element). MEASURED: plain text was the only 700 left on Home, Records and the record. Emphasis in running text is the scale's own top weight. */ b,strong{font-weight:600} /* §3.3 — anything a person reads out, quotes in an email or types into a search box. Slashed zero because these are the strings that must never be ambiguous; unicode-bidi:isolate because a ref, a @handle, a time or a +4d delta is an LTR run sitting inside an Arabic or Urdu row (§12.3). */ /* ⛔ direction:ltr JOINS unicode-bidi:isolate, AND ISOLATION ALONE WAS NOT ENOUGH — OBSERVED in Arabic at 1440: an isolated run inherits the paragraph direction, so "@leookafor" rendered "leookafor@" and the "+4d" overdue delta rendered "4d+". A handle, a ref, a SHA-256, a time and a day-delta are LTR strings whatever the page around them is; the neutrals at their edges have to resolve LTR too. This is the same pair .brand has carried for the wordmark since day one. */ .mono{font-family:var(--mono);font-variant-numeric:tabular-nums slashed-zero;direction:ltr;unicode-bidi:isolate} /* SPEC-v3 §1 — mono is for HASHES only now (SHA-256, fingerprints, algorithm ids). A job ref, an @handle and a step count read in the product's own face; what they keep from .mono is the bidi pair above, because they are still LTR strings inside an Arabic or Urdu row. */ .ltr{direction:ltr;unicode-bidi:isolate} a{color:var(--accentTx)} /* ⛔⛔ NEVER HIDE THIS WITH left:-9999px. In a left-to-right page that is off-screen and harmless; in Arabic or Urdu the inline start is on the RIGHT, so an element parked 9,999px to the left extends the scrollable area — every portal page gained ~10,000px of phantom horizontal scroll in both RTL languages, measured at scrollWidth 11264 against a 1265px viewport. The clip technique below removes the element from layout entirely, so it is direction-agnostic and adds no overflow, while still being reachable by keyboard and announced by a screen reader. */ .skipl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .skipl:focus{position:fixed;width:auto;height:auto;margin:0;clip:auto;clip-path:none;overflow:visible;inset-inline-start:16px;top:16px;z-index:80;background:var(--card);border:1px solid var(--accent);padding:10px 14px;border-radius:var(--r-float);box-shadow:var(--sh)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-ctl)} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Native navigation remains the source of truth. Supporting browsers keep the shared chrome visually continuous across portal documents; every other browser gets the immediate progress line and the same direct navigation. No route interception, synthetic history or DOM swapping. */ @view-transition{navigation:auto} .top{view-transition-name:sn-portal-top} .pnav{view-transition-name:sn-portal-nav} :root::after{content:"";position:fixed;inset-block-start:0;inset-inline-start:0;z-index:100;width:0;height:3px;background:var(--btnbg);opacity:0;pointer-events:none;transition:width .18s ease,opacity .12s ease} :root[data-portal-nav="busy"]::after{width:72%;opacity:1} ::view-transition-old(sn-portal-top),::view-transition-new(sn-portal-top),::view-transition-old(sn-portal-nav),::view-transition-new(sn-portal-nav){animation-duration:.14s;animation-timing-function:ease-out} /* ── top bar ───────────────────────────────────────────────────────────────────────────────── */ /* SPEC-v2 §9: --card ground, a --line2 bottom rule, NO shadow. The bar is a region boundary, so it is drawn with a rule rather than with elevation. */ .top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:0 24px;height:60px;background:var(--card);border-bottom:1px solid var(--line2)} /* ⛔ BRAND LAW (SPEC-v2 §1.2). [crest] · 8px gap · "State" · "Null", 800/17px, Cipher Sans. The weight and the size are IDENTITY, not part of §3's three-weight scale, and are exempt from it. direction:ltr;unicode-bidi:isolate is load-bearing: without it a flex row under dir="rtl" renders the company's own name as "NullState". Only the COLOUR of "Null" moves, and only for the reason below. Do not restyle anything else here. ⚠️ ONE CORRECTION TO SPEC-v2 §1.2, ON THE OWNER'S BRAND AUTHORITY. That clause turned "Null" from a background-clip:text gradient into solid --accent, i.e. BLUE. The marketing site is the brand source and it does not: SOURCE marketing/site/index.html:91 sets .brand span to linear-gradient(135deg,var(--accent),var(--accent2)) clipped to the text, and its --accent2 is #8b5cf6 light / #9366ff dark (lines 44/55) — the same violet as the crest's second gradient stop. Flattening the gradient was right; landing on blue was not, and it left one word coloured two different ways on two surfaces of one product. "Null" is now the portal's own --accent2, which is that violet corrected for text contrast exactly as SPEC-v2 §2.1 already corrected it (#8b5cf6 is 4.23:1 on white; --accent2 #7c4ff0 is 4.96:1 — same hue to within 1.5°, a shade darker). Violet appears NOWHERE else in the portal chrome: it is a brand mark, never an interface accent. */ .brand{display:flex;align-items:center;gap:8px;font:800 17px/1 var(--sans);color:var(--ink);text-decoration:none;direction:ltr;unicode-bidi:isolate} /* WCAG 2.2 SC 2.5.8 — the wordmark is a LINK to the workspace root and it is a standalone control, so it owes the same 24px box `.top nav a.link` was given. MEASURED at every one of eight widths in the responsive survey: a.brand renders 111.9 × 18. A separate rule, because the declaration above is brand law (§1.2) and its literal does not move for a layout fix. */ .top .brand{min-height:24px} .brand .mk{width:18px;height:18px;border-radius:var(--r-ctl);background:var(--accent);flex:none} .brand span{color:var(--accent2)} .top .sp{flex:1} /* ⛔ /account's classic inline sheet hides .sp below 560px and relied on #who{margin-inline-start:auto} to push the controls to the end of the bar. #who lives INSIDE the account trigger now (SPEC-v3 §5), so nothing pushed: SEEN at 393 on /account, the wordmark, Sections and the avatar were packed to the start and the account menu opened half off-screen. The spacer does that job at every width, in every skin — body + child combinator out-rank the inline sheet's .top .sp without an !important. */ body .top>.sp{display:block} .pill{font:500 var(--fs-3)/1 var(--sans);color:var(--mut);border:1px solid var(--line2);border-radius:var(--r-ctl);padding:5px 8px} .tgl,.iconbtn{width:44px;height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);background:var(--card);color:var(--mut);border-radius:var(--r-ctl);cursor:pointer;padding:0} .tgl:hover,.iconbtn:hover{border-color:var(--accent);color:var(--accentTx)} .sn-attn-btn{position:relative} .sn-attn-btn[hidden]{display:none} /* --on-bad replaces the file's one hard-coded colour (color:#fff on var(--bad)). In dark --bad is a PALE red, so the ink side of the pair flips with the theme exactly as --onaccent does. */ .sn-attn-badge{position:absolute;inset-block-start:-3px;inset-inline-end:-4px;display:flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 4px;border:2px solid var(--card);border-radius:var(--r-ctl);background:var(--bad);color:var(--on-bad);font:600 var(--fs-1)/1 var(--sans);font-variant-numeric:tabular-nums} .sn-attn-badge[hidden]{display:none} /* ⭐ v4 POLISH (2026-09-11) — THE UNREAD COUNT IS A COUNT, NOT AN ALARM. It was a saturated red square inside a 2px ring of the bar's own ground. Red is overdue and nothing else (SPEC-v3 §6.1), and the bell counts things that are yours to look at, so under the dense skins it takes the product's "yours to act on" blue in both themes, without the ring: --accent under --onaccent measures 6.0:1 light and 7.1:1 dark. With no ring to separate it from the bell's stroke it sits on the glyph's top-END corner (MEASURED at 2x: 5px/3px put its start edge on the bell's centre line and hid half the dome), overlapping only the empty corner of the glyph's box. Classic keeps its own badge. */ :root[data-skin="v2"] .sn-attn-badge{inset-block-start:2px;inset-inline-end:-3px;min-width:16px;height:16px;padding:0 4px;border:0;background:var(--accent);color:var(--onaccent)} .langpick{position:relative;display:inline-flex;align-items:center} /* background-COLOR, not the `background` shorthand: the shorthand resets background-image, and a select with appearance:none has to draw its own chevron there (see ── controls ──). The bug this avoids is invisible in getComputedStyle on the select itself — it only shows as a missing arrow. */ .langpick select{height:44px;min-height:44px;background-color:var(--card);color:var(--ink);border:1px solid var(--line2);border-radius:var(--r-ctl);padding-inline:10px 26px;font-size:var(--fs-4)} .langpick-icon,.skinpick-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--mut)} .langpick-icon svg,.skinpick-icon svg{display:block} .skinpick{gap:6px} /* §6.2/§6.3 — blue means "this is yours to act on". The appearance picker is a preference control, not a task, so it stops painting itself in the accent just because the v2 skin is on: that was blue with no meaning, and on the mobile sheet it made a plain label read as a link. */ :root[data-skin="v2"] .skinpick{color:var(--ink);border-color:var(--line2)} .shell-quicknav{display:flex;align-items:center;gap:16px;margin-inline-start:8px} .shell-quicknav .link{display:inline-flex;align-items:center;min-height:24px;white-space:nowrap} #who,.who{font-size:var(--fs-3);color:var(--mut);white-space:nowrap} /* ── the band as a composition (SPEC-v2 §9 · §5.1 · §5.6) ──────────────────────────────────── MEASURED before this pass on /account/links at 1440: eight painted children at FOUR different heights — wordmark 18, "Customer Portal" 22, Cloud Vault 24, appearance 44, theme 44, language 44, notifications 44, Sign out 24 — with 263px of PREFERENCE chrome parked between the wordmark and the free space and only 132px of controls on the far side. The row said nothing about what mattered: the least-used control in the product (a portal-appearance preference, set once) had the best position on every page. Two moves, and neither touches the DOM. The header child order nav_vault < skinsel < themeToggle < shell_lang < navbtn is pinned by portalshell §6, and paint order has to keep matching DOM order or focus order stops matching the eye. 1. THE SLACK MOVES. `order` alone relocates the flexible spacer from after the language control to before the appearance control. Left of it: who you are and where you are. Right of it: every control, in one cluster. The left-to-right SEQUENCE is unchanged — only where the gap sits — so Tab still walks the row exactly as it reads. 2. ONE CONTROL HEIGHT, AND A LABEL STOPS PRETENDING TO BE A CONTROL. The controls are 44px (pinned literal), so Sign out joins them instead of being a 24px outline among 44px boxes; and "Customer Portal" loses its box, because §5.1 lists five permitted borders and a static label is not one of them. It keeps the --fs-1 micro-label idiom and takes the region hairline (§5.1 rule 2) that separates the name of the company from the name of the surface. */ .top>*{order:2} .top>a:first-child,.top>.brand,.top>.pill,.top>nav{order:0} .top .sp{order:1} .top .pill{display:inline-flex;align-items:center;min-height:24px;border:0;border-radius:0;background:transparent;padding:0;border-inline-start:1px solid var(--line);padding-inline-start:12px} /* The preference controls recede on INK, never on the boundary: §5.1 rule 3 makes a control border information under WCAG 1.4.11, so --line2 stays on all four sides of everything you can operate. What changes is that appearance, language and the theme toggle rest in --mut (5.75:1 light, 8.24:1 dark — comfortably past both the 4.5:1 text bar and the 3:1 glyph bar) while Sign out, the only ACTION in the cluster, keeps --ink. */ .top .langpick select{color:var(--mut)} .top #out{min-height:44px;padding:0 14px} /* ── THE THREE CONTROLS AND THE ONE ACCOUNT MENU (SPEC-v3 §5, 2026-09-11) ───────────────────── The bar used to carry six boxed 44px controls beside the product's one primary action — layout, theme, language, bell, @handle, Sign out — and read as a form (OBSERVED, now/pre-home-1440.png). It carries three now: the bell, the page's primary action where it has one, and ONE account menu. Appearance, theme, language, density and Sign out are set once, not daily, so they sit behind the menu; shell.js builds it (mounted pages) or adopts /account's markup, and wires both the same way. The controls that stay keep the pinned 44px box and are drawn QUIET — no border and no fill until hover — because a row of bordered boxes is exactly what made the header read as a form. WCAG 1.4.11 is carried by what identifies a borderless icon button: its glyph, --mut on --card (5.75:1 light, 8.24:1 dark). The focus ring is the global one. */ .top .iconbtn,.top #navbtn{border-color:transparent;background:transparent} .top .iconbtn:hover,.top #navbtn:hover{border-color:transparent;background:var(--tile);color:var(--ink)} .top #navbtn{gap:6px;padding:0 10px;color:var(--ink2)} .navbtn-i{display:inline-flex;color:var(--mut)} .navbtn-i svg{display:block} /* Ids, on purpose: /account's inline stylesheet is LATER in source order and still carries classic .langpick / .tgl / #who rules. An id outranks every class-built rule in either file, so the menu looks the same on all four pages and in every skin without a single !important. */ .acct{position:relative;display:inline-flex;align-items:center;flex:none} #acct_btn{display:inline-flex;align-items:center;gap:8px;height:44px;min-height:44px;min-width:44px;margin:0;padding:0 8px;border:1px solid transparent;border-radius:var(--r-ctl);background:transparent;color:var(--ink2);font:500 var(--fs-4)/1 var(--sans);white-space:nowrap;cursor:pointer} #acct_btn:hover{background:var(--tile);color:var(--ink)} #acct_btn[aria-expanded="true"]{background:var(--tint);color:var(--ink)} /* SPEC-v3 §0 — an avatar is the one circle the radius law allows (both references draw round faces; a square face reads as a bug). The SAME idiom as the queue's "With" column (jobs.html .qav): a --line disc with the initial in --ink2 — 8.4:1 light, 8.0:1 dark — so a person looks the same in the bar as in the register. A tinted disc was tried first and vanished into the trigger's own --tint wash the moment the menu opened (SEEN in the first 1440 render). */ .acct-av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;border:0;background:var(--line);color:var(--ink2);font:600 var(--fs-4)/1 var(--sans);overflow:hidden} .acct-av svg{display:block} /* Never a display value on #who here: the pinned ≤1179 and ≤720 rules hide the handle and only the round initial stays. #who is a flex item, so max-width and the ellipsis work without one. */ #acct_btn #who,#acct_btn .acct-note{min-width:0;max-width:176px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-4);color:inherit} #acct_btn #who{direction:ltr;unicode-bidi:isolate} #acct_btn #who:empty,#acct_btn .acct-note:empty{display:none} .acct-chev{display:inline-flex;flex:none;color:var(--mut)} .acct-chev svg{display:block} /* THE ONE FLOATING, SHADOWED SURFACE IN THE PORTAL (§5.4 --sh, §5.3 --r-float). It sits in the DOM right after its trigger, so Tab reaches it next; and it is position:absolute, so it can never widen the bar — which is what lets Sign out live inside it on a 393px phone (portalshell §4). */ #acct_menu{position:absolute;inset-block-start:calc(100% + 6px);inset-inline-end:0;z-index:40;width:320px;max-width:calc(100vw - 16px);margin:0;padding:6px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-float);box-shadow:var(--sh);color:var(--ink);font:400 var(--fs-4)/1.4 var(--sans);text-align:start;white-space:normal} #acct_menu[hidden]{display:none} #acct_menu .acct-id{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding:6px 8px 10px;border-bottom:1px solid var(--line)} #acct_menu .acct-id[hidden]{display:none} #acct_menu .acct-id .acct-av{width:32px;height:32px} #acct_menu .acct-idt{display:flex;flex-direction:column;gap:2px;min-width:0} #acct_menu .acct-nm{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #acct_menu .acct-hd{font-size:var(--fs-3);color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* One row = the setting's name at the start, its control at the end — the way Linear draws a preferences row. The words wrap before the control shrinks: German and Greek labels run long. */ #acct_menu .acct-row,#acct_menu .langpick{display:flex;align-items:center;justify-content:space-between;gap:12px;width:auto;height:auto;min-height:40px;margin:0;padding:2px 8px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink2);font:400 var(--fs-4)/1.3 var(--sans);cursor:pointer} #acct_menu .acct-row:hover,#acct_menu .langpick:hover{background:var(--tile);color:var(--ink)} #acct_menu .acct-l{flex:1 1 auto;min-width:0;color:inherit} #acct_menu .langpick>svg,#acct_menu .langpick-icon,#acct_menu .skinpick-icon{display:none} #acct_menu select{flex:0 1 auto;width:auto;min-width:0;max-width:58%;height:32px;min-height:32px;margin:0;padding-block:0;padding-inline:8px 24px;border:1px solid var(--line2);border-radius:var(--r-ctl);background-color:var(--field);background-position:right 8px center;color:var(--ink);font:500 var(--fs-4)/1 var(--sans)} [dir="rtl"] #acct_menu select{background-position:left 8px center} /* A switch is a 40x24 control (WCAG 2.5.8's 24px), square like every other control (§5.3), and it carries its state in two ways — the knob's side and the fill — never in colour alone. Off: a --line2 boundary (3.28:1 / 3.15:1, §5.1 rule 3) and a --mut knob; on: the --accent fill, --onaccent knob. */ #acct_menu .acct-sw{position:relative;flex:none;width:40px;min-width:40px;height:24px;min-height:24px;margin:0;padding:0;border:1px solid var(--line2);border-radius:var(--r-ctl);background:transparent;cursor:pointer} #acct_menu .acct-knob{position:absolute;inset-block-start:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:var(--r-ctl);background:var(--mut);transition:inset-inline-start .14s ease,background-color .14s ease} #acct_menu .acct-sw[aria-checked="true"]{background:var(--accent);border-color:var(--accent)} #acct_menu .acct-sw[aria-checked="true"] .acct-knob{inset-inline-start:19px;background:var(--onaccent)} /* Compact rows only mean something to the dense register, which only the v2 skin draws. */ #acct_menu .acct-dense{display:none} :root[data-skin="v2"] #acct_menu .acct-dense{display:flex} /* …and a visitor who is not signed in has no register at all (SEEN on the signed-out /account menu). */ :root[data-sn-access="anonymous"] #acct_menu .acct-dense{display:none} /* Simple mode (WAVE1-SPEC §2 S): the row's name, its one-line meaning under it, the switch at the end; a refused change is said in the row's own status line. An account setting, so a signed-out visitor has no row. */ #acct_menu .acct-simple{flex-wrap:wrap} #acct_menu .acct-simple .acct-l{display:flex;flex-direction:column;gap:2px} #acct_menu .acct-d{font-size:var(--fs-3);color:var(--mut)} #acct_menu .acct-st{flex:1 0 100%;font-size:var(--fs-3);color:var(--bad)} #acct_menu .acct-st:empty{display:none} #acct_menu .acct-sw[aria-busy="true"]{opacity:.6;cursor:progress} :root[data-sn-access="anonymous"] #acct_menu .acct-simple{display:none} #acct_menu .acct-sep{height:1px;margin:6px -6px;background:var(--line)} #acct_menu .acct-sep[hidden]{display:none} /* Sign out is the one ACTION in the menu, so it reads in --ink as a full-width item rather than as a bordered button. [hidden] is restated because the display value above would otherwise out-rank the UA rule before setAccess has written the inline display. */ #acct_menu #out{display:flex;align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:36px;margin:0;padding:0 8px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink);font:500 var(--fs-4)/1.3 var(--sans);text-align:start;filter:none} #acct_menu #out:hover{background:var(--tile)} #acct_menu #out[hidden]{display:none} @media(pointer:coarse){ #acct_menu .acct-row,#acct_menu .langpick{min-height:48px} #acct_menu select{height:36px;min-height:36px} #acct_menu #out{min-height:44px} } /* ── six-item destination nav (desktop) ────────────────────────────────────────────────────── */ .pnav{display:flex;gap:4px;padding:8px 24px 0;border-bottom:1px solid var(--line);background:var(--card);overflow:visible} .pnav a{flex:none;color:var(--ink2);text-decoration:none;font-size:var(--fs-4);font-weight:500;padding:8px 12px 10px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .16s ease,border-color .16s ease} .pnav a:hover{color:var(--ink)} .pnav a.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:500} /* v2's horizontal strip: a --tint wash plus the SAME 2px accent rule the rail uses, instead of the inset 1px ring. One idiom for "you are here" in both navigation layouts (§9). */ :root[data-skin="v2"] .pnav{border-bottom:0;padding:10px 24px 0} :root[data-skin="v2"] .pnav a{border-radius:var(--r-ctl);padding:8px 12px 10px} :root[data-skin="v2"] .pnav a:hover{background:var(--tile);color:var(--ink)} :root[data-skin="v2"] .pnav a.on{background:var(--tint);color:var(--ink);border-bottom-color:var(--accent);box-shadow:none} /* ── mobile sections sheet (replaces the horizontal nav strip; never a scrollbar) ──────────── */ #navbtn{position:relative;display:none;align-items:center;gap:8px;height:44px;padding:0 12px;border:1px solid var(--line2);background:var(--card);color:var(--ink);border-radius:var(--r-ctl);font:500 var(--fs-4)/1 inherit;cursor:pointer} .sheet{position:fixed;inset:0;z-index:70;display:none} .sheet.open{display:block} .sheet .scrim{position:absolute;inset:0;background:var(--scrim)} /* The sheet genuinely floats and can be dismissed, so it is one of the four subjects allowed to use --sh (§5.4), and one of the things allowed --r-float (§5.3). Logical insets so it anchors the same way under dir="rtl". */ .sheet .panel{position:absolute;inset-inline:0;inset-block-end:0;background:var(--card);border-radius:var(--r-float) var(--r-float) 0 0;padding:8px 12px calc(12px + env(safe-area-inset-bottom));box-shadow:var(--sh);max-height:82vh;overflow:auto} .sheet h2{margin:10px 8px 6px;font:500 var(--fs-3)/1.4 var(--sans);color:var(--mut)} .sheet a{display:flex;align-items:center;min-height:52px;padding:0 12px;border-radius:var(--r-ctl);color:var(--ink2);text-decoration:none;font-weight:500} .sheet a.on{background:var(--tint);color:var(--ink)} .sheet a:hover{background:var(--tile)} .shell-sheet-tools{display:none} .shell-sheet-vault[hidden]{display:none} /* portal final H-06: the phone's unread number. The sheet's Notifications row carries the bell's badge inline, after its word; Sections carries a dot (the number is one tap away, inside). Same fill as the bell's badge in each skin. */ .sn-attn-badge.sn-sheet-badge{position:static;display:inline-flex;flex:0 0 auto;width:auto;margin:0;border:0} .sn-attn-badge.sn-sheet-badge[hidden]{display:none} #sheet_attention{display:flex;flex-direction:row;align-items:center;justify-content:center} .navbtn-dot{position:absolute;inset-block-start:9px;inset-inline-start:21px;width:9px;height:9px;border:2px solid var(--card);border-radius:50%;background:var(--bad)} .navbtn-dot[hidden]{display:none} :root[data-skin="v2"] .navbtn-dot{background:var(--accent)} /* ── page frame ────────────────────────────────────────────────────────────────────────────── */ .wrap{max-width:1180px;margin:0 auto;padding:28px 24px 72px} /* SPEC-v3 §1 — a section head is a TITLE, 14/600 in ink, sentence case: the size and the weight say "a new group starts here", which the 10px uppercase micro-label used to shout instead. §5.1 rule 4 (SPEC-v2, still binding) — it spends the ONE --line3 rule on its surface. That single darker line is what lets a page group its content without drawing a box around it, and it is the same idiom the job record already uses. A head that shares its row with controls moves the rule onto the ROW (see .hdrow on /account/agents) so it spans the group rather than the words. ⚠️ 2026-09-22: under v2 the rule is gone (SPEC portal-polish A.8) — the CARD below a head is the grouping now, so a ruled head on top of a surfaced card drew the group twice. Classic keeps this rule. */ .sec{font:600 var(--fs-5)/1.35 var(--sans);color:var(--ink);margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line3)} /* §5.4 — --sh2 is `none`. Nothing at rest is elevated: when everything floats, nothing does. The declaration and the token stay so the parity blocks and every .card reference are intact. §5.3 — structure is square; the two radii are spent on controls and on things that float. ⚠️ 2026-09-22: SUPERSEDED UNDER THE v2 SKIN by SPEC portal-polish A.4 (the owner asked for the Paddle/Stripe look: a card is a surface — 12px corners and a soft two-layer shadow). This base rule is still what CLASSIC draws; the v2 card lives in the "portal polish" block at the end of this file. */ .card{background:var(--card);border:1px solid var(--line);border-radius:0;padding:16px;box-shadow:var(--sh2)} .card+.card{margin-top:12px} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px} .big{font:600 var(--fs-6)/1.2 var(--sans);font-variant-numeric:tabular-nums} .sm{font-size:var(--fs-3);color:var(--mut)} /* §6.6 — a tag carries Hold / Agent / Guest, never a status, and never a fill. SPEC-v3 §1: in sentence case at 12/500, a small outlined token rather than a shouted one. */ .tag{display:inline-block;font:500 var(--fs-3)/1.4 var(--sans);padding:1px 6px;border-radius:var(--r-ctl);border:1px solid var(--line2);color:var(--mut);background:transparent} .link{color:var(--accentTx);text-decoration:none;font-weight:500;font-size:var(--fs-3)} .link:hover{text-decoration:underline} /* ── expired subscription: one fail-closed surface on every /account route ─────────────────── account.entitled is learned from authenticated /me after the HTML arrives. While it is unknown, product markup is never painted. An explicit false hides every existing page child and exposes only the shared subscription card. The legal export/delete exits are deliberately inside that card; Records, Proof Requests, Shared Links, Agents, attention and deep-link targets stay hidden. */ :root[data-sn-access="pending"] #main{visibility:hidden} :root[data-sn-access="locked"] #main>:not(#sn_access_lock), :root[data-sn-access="unavailable"] #main>:not(#sn_access_lock){display:none!important} :root[data-sn-access="pending"] body .pnav, :root[data-sn-access="locked"] body .pnav, :root[data-sn-access="unavailable"] body .pnav, :root[data-sn-access="pending"] body #navbtn, :root[data-sn-access="locked"] body #navbtn, :root[data-sn-access="unavailable"] body #navbtn, :root[data-sn-access="pending"] body #attention_btn, :root[data-sn-access="locked"] body #attention_btn, :root[data-sn-access="unavailable"] body #attention_btn, :root[data-sn-access="pending"] body #nav_home, :root[data-sn-access="pending"] body #nav_vault, :root[data-sn-access="locked"] body #nav_home, :root[data-sn-access="locked"] body #nav_vault, :root[data-sn-access="unavailable"] body #nav_home, :root[data-sn-access="unavailable"] body #nav_vault{display:none!important} /* portal final H-10: SIGNED OUT, every portal document wears the header /account wears signed out — the brand, the language and the page's own sign-in card. The rail, the Sections button, the bell, search and the rail's other doors are the product's navigation; a visitor without a session gets a sign-in card, not six doors that each lead back to it. */ :root[data-sn-access="anonymous"] body .pnav, :root[data-sn-access="anonymous"] body #navbtn, :root[data-sn-access="anonymous"] body #attention_btn, :root[data-sn-access="anonymous"] body #search_btn, :root[data-sn-access="anonymous"] body #nav_vault{display:none!important} :root[data-nav="side"][data-sn-access="anonymous"] body .wrap, :root[data-nav="side"][data-sn-access="anonymous"] body footer{margin-inline-start:0} :root[data-sn-access="locked"] body .wrap, :root[data-sn-access="unavailable"] body .wrap{margin-inline-start:0!important;max-width:100%;padding:40px 24px 72px} :root[data-sn-access="locked"] body footer, :root[data-sn-access="unavailable"] body footer{margin-inline-start:0!important} /* portal final ACCESS-1: #main is a direct child of on every portal document (no .wrap), so the card sat flush under the header with no gap. The gap is the card's own now. The action row holds an beside