/* ─────────────────────────────────────────────────────────────────────────────────────────────
 * 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. portalshellparity.test.js asserts the
 * two copies stay byte-identical — edit the palette in server.js and re-run tools' generator, never
 * here by hand.
 * ───────────────────────────────────────────────────────────────────────────────────────────── */
:root{color-scheme:light;--bg:#f5f7fb;--bg2:#ffffff;--bgtint:#e9eefb;--card:#ffffff;--card2:#f2f5fa;--tile:#eef2f9;--field:#ffffff;--tint:#f4f7fc;--onbbg:linear-gradient(160deg,#ffffff,#f1f5fd);--line:#e4e9f2;--line2:#d3dae7;--ink:#0c1424;--mut:#55668a;--faint:#5f6f92;--accent:#3560d8;--accent2:#8b5cf6;--accentTx:#2f5be0;--btnbg:linear-gradient(135deg,#3f68e6,#7c46e8);--onaccent:#ffffff;--bad:#dc2626;--ok:#07713f;--warn:#8a5a10;--okTx:#076c3e;--badTx:#b91c1c;--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);--sh:0 12px 32px rgba(12,20,36,.10);--sh2:0 1px 3px rgba(12,20,36,.07)}
:root[data-theme="dark"]{color-scheme:dark;--bg:#070f22;--bg2:#0b1430;--bgtint:#13203a;--card:#0e1c3c;--card2:#0a1322;--tile:#0a1322;--field:#0a1322;--tint:rgba(0,0,0,.18);--onbbg:linear-gradient(160deg,#101b30,#0c1424);--line:#1c2f57;--line2:#1c2f57;--ink:#eef3ff;--mut:#a3b4d6;--faint:#a3b4d6;--accent:#5b8cff;--accent2:#9366ff;--accentTx:#5b8cff;--btnbg:linear-gradient(135deg,#5b8cff,#9366ff);--onaccent:#06101f;--bad:#ff7a7a;--ok:#46d39a;--warn:#ffc24b;--okTx:#46d39a;--badTx:#ff7a7a;--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;--sh:0 12px 32px rgba(0,0,0,.45);--sh2:0 1px 3px rgba(0,0,0,.35)}
:root[data-skin="v2"]{
  --bg:#f4f7fd;--bg2:#ffffff;--card:#ffffff;--tile:#eef3fc;--tint:#eef3fc;
  --line:#e7ecf6;--line2:#d6deee;--ink:#0a1220;--mut:#586a8c;
  --accent:#2f57d6;--accent2:#7c4ff0;--accentTx:#2a51d8;
  --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:rgba(0,0,0,.22);
  --line:#213562;--line2:#26407a;--ink:#f0f4ff;--mut:#9fb1d6;
  --accent:#6d99ff;--accent2:#9f78ff;--accentTx:#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}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;-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}
h1,h2,h3{font-family:"Cipher Sans",-apple-system,Segoe UI,Roboto,Arial,sans-serif;letter-spacing:-.01em}
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:10px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.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 ───────────────────────────────────────────────────────────────────────────────── */
.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(--line)}
.brand{display:flex;align-items:center;gap:8px;font:800 17px/1 "Cipher Sans",-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);text-decoration:none;direction:ltr;unicode-bidi:isolate}
.brand .mk{width:18px;height:18px;border-radius:5px;background:var(--btnbg);flex:none}
.brand span{background:var(--btnbg);-webkit-background-clip:text;background-clip:text;color:transparent}
.top .sp{flex:1}
.pill{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.tgl,.iconbtn{width:44px;height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;cursor:pointer;padding:0}
.tgl:hover,.iconbtn:hover{border-color:var(--accent)}
.sn-attn-btn{position:relative}
.sn-attn-btn[hidden]{display:none}
.sn-attn-badge{position:absolute;inset-block-start:-4px;inset-inline-end:-5px;display:flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border:2px solid var(--card);border-radius:999px;background:var(--bad);color:#fff;font:800 10px/1 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;font-variant-numeric:tabular-nums}
.sn-attn-badge[hidden]{display:none}
.langpick{position:relative;display:inline-flex;align-items:center}
.langpick select{height:44px;min-height:44px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:0 10px;font-size:13px}
.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}
:root[data-skin="v2"] .skinpick{color:var(--accent);border-color:var(--accent)}
.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:13px;color:var(--mut);white-space:nowrap}

/* ── six-item destination nav (desktop) ────────────────────────────────────────────────────── */
.pnav{display:flex;gap:4px;padding:10px 24px 0;border-bottom:1px solid var(--line);background:var(--card);overflow:visible}
.pnav a{flex:none;color:var(--mut);text-decoration:none;font-size:13.5px;font-weight:600;padding:10px 14px 12px;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:700}
:root[data-skin="v2"] .pnav{border-bottom:0;padding:12px 24px 0}
:root[data-skin="v2"] .pnav a{border-bottom:0;border-radius:10px;padding:10px 14px}
: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(--accentTx);box-shadow:inset 0 0 0 1px var(--line2)}

/* ── mobile sections sheet (replaces the horizontal nav strip; never a scrollbar) ──────────── */
#navbtn{display:none;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;font:600 14px/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:rgba(4,7,15,.55)}
.sheet .panel{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:16px 16px 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-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.sheet a{display:flex;align-items:center;min-height:52px;padding:0 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600}
.sheet a.on{background:var(--tint);color:var(--accentTx)}
.sheet a:hover{background:var(--tile)}
.shell-sheet-tools{display:none}
.shell-sheet-vault[hidden]{display:none}

/* ── page frame ────────────────────────────────────────────────────────────────────────────── */
.wrap{max-width:1180px;margin:0 auto;padding:28px 24px 72px}
.sec{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:28px 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;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:700 24px/1.2 "Cipher Sans",-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-variant-numeric:tabular-nums}
.sm{font-size:13px;color:var(--mut)}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--line2);color:var(--mut);background:var(--card2)}
.link{color:var(--accentTx);text-decoration:none;font-weight:600}
.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}
: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}
.sn-access-lock{display:block!important;visibility:visible;max-width:720px;margin:0 auto;padding:30px;text-align:center}
.sn-access-lock h1{margin:6px 0 8px;font-size:24px;line-height:1.25}
.sn-access-icon{font-size:36px;line-height:1.2}
.sn-access-lead{max-width:590px;margin:0 auto;color:var(--mut);font-size:15px}
.sn-access-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.sn-access-legal{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);text-align:start}
.sn-access-legal h2{margin:0 0 5px;font-size:15px}
.sn-access-legal p{margin:0}
.sn-access-legal-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
.sn-access-lock .msg{max-width:560px;margin:14px auto 0;text-align:start}

/* ── controls ──────────────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--btnbg);color:var(--onaccent);font:700 14px/1 inherit;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.06)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:default;filter:none}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--ink);filter:none}
.btn.ghost:hover{border-color:var(--accent)}
.btn.sec2{background:var(--card2);border:1px solid var(--line2);color:var(--ink);filter:none}
.btn.danger{background:transparent;border:1px solid var(--badbd);color:var(--badTx);filter:none}
.btn.sm2{min-height:36px;padding:0 12px;font-size:13px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;max-width:100%}
textarea{min-height:88px}
label{display:block;font-size:13px;font-weight:600;margin:10px 0 4px}
.msg{display:none;margin-top:12px;padding:10px 14px;border-radius:10px;font-size:13px}
.msg.ok{display:block;background:var(--okbg);border:1px solid var(--okbd);color:var(--okTx)}
.msg.bad{display:block;background:var(--badbg);border:1px solid var(--badbd);color:var(--badTx)}
.msg.warn{display:block;background:var(--warnbg);border:1px solid var(--warnbd);color:var(--warn)}

/* ── advanced disclosure: technical truth stays available, never in the consumer's face ────── */
details.adv{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
details.adv>summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--mut);letter-spacing:.04em;text-transform:uppercase;min-height:36px;display:flex;align-items:center}
details.adv code,code.mono{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--tile);border:1px solid var(--line);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}

/* ── drawers (full-screen on mobile) ───────────────────────────────────────────────────────── */
.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer.open{display:block}
.drawer .scrim{position:absolute;inset:0;background:rgba(4,7,15,.55)}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--card);border-left:1px solid var(--line);box-shadow:var(--sh);overflow:auto;padding:18px 18px calc(24px + env(safe-area-inset-bottom))}
.drawer .dhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.drawer .dhead h2{margin:0;font-size:18px;flex:1}

/* ── shared account attention inbox ───────────────────────────────────────────────────────── */
.sn-attn-drawer .panel{width:min(480px,100%)}
.sn-attn-drawer .dhead{align-items:center;margin-bottom:16px}
.sn-attn-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:20px}
.sn-attn-summary-card{display:flex;flex-direction:column;min-height:112px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--tile);color:var(--ink);text-decoration:none}
.sn-attn-summary-card:hover{border-color:var(--accent)}
.sn-attn-summary-label{color:var(--mut);font-size:12px;font-weight:700;line-height:1.3}
.sn-attn-summary-value{display:flex;align-items:baseline;gap:2px;margin-top:8px;font-size:12px;color:var(--mut)}
.sn-attn-summary-value strong{color:var(--ink);font-size:20px;line-height:1;font-variant-numeric:tabular-nums}
.sn-attn-summary-sub{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:auto;padding-top:8px;color:var(--mut);font-size:11px;line-height:1.25}
.sn-attn-summary-sub strong{color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}
.sn-attn-tools{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.sn-attn-tools h3{flex:1;margin:0;font-size:14px}
.sn-attn-empty{margin:24px 0;color:var(--mut);font-size:13px;text-align:center}
.sn-attn-empty[hidden]{display:none}
.sn-attn-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sn-attn-list li{position:relative;border-bottom:1px solid var(--line)}
.sn-attn-list li.unread::before{content:"";position:absolute;inset-inline-start:2px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.sn-attn-event{display:flex;flex-direction:column;gap:3px;min-height:62px;padding:12px 10px 12px 18px;color:var(--ink);text-decoration:none;border-radius:8px}
.sn-attn-event:hover{background:var(--tile)}
.sn-attn-event-title{font-size:13px;font-weight:650}
.sn-attn-list li.unread .sn-attn-event-title{font-weight:800}
.sn-attn-event-time{color:var(--mut);font-size:11px}
.sn-attn-toast{position:fixed;z-index:80;inset-block-start:72px;inset-inline-end:16px;width:min(360px,calc(100vw - 32px));opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.sn-attn-toast.show{opacity:1;transform:none;pointer-events:auto}
.sn-attn-toast-action{display:flex;align-items:center;gap:11px;width:100%;min-height:56px;padding:10px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--card);color:var(--ink);box-shadow:var(--sh);font:700 13px/1.35 inherit;text-align:start;cursor:pointer}
.sn-attn-toast-action:hover{border-color:var(--accent)}
.sn-attn-toast-icon{position:relative;width:28px;height:28px;flex:none;border-radius:50%;background:var(--tint)}
.sn-attn-toast-icon::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--accent)}

/* ── tables ────────────────────────────────────────────────────────────────────────────────── */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:start;font-size:12px;font-weight:600;color:var(--mut);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--tile)}

/* ── states ────────────────────────────────────────────────────────────────────────────────── */
.empty{border:1px dashed var(--line2);border-radius:14px;padding:28px 20px;text-align:center}
.empty h3{margin:0 0 6px;font-size:16px}
.empty p{margin:0 auto 14px;max-width:52ch;color:var(--mut);font-size:13px}
.sk{background:linear-gradient(90deg,var(--tile) 0%,var(--card2) 50%,var(--tile) 100%);background-size:200% 100%;animation:skm 1.1s linear infinite;border-radius:6px;display:inline-block}
.sk-line{height:14px;width:120px}
@keyframes skm{to{background-position:-200% 0}}

/* ── responsive: 720px is the shell breakpoint the spec pins ───────────────────────────────── */
@media(max-width:720px){
  .top{padding:0 12px;gap:8px}
  .top .pill{display:none}
  .top>nav{display:none!important}
  .top>.skinpick{display:none}
  /* ⛔ THE HEADER ROW MUST FIT. Measured on a 375px phone: brand + @handle + Sections + language +
     theme came to 438px, so the page scrolled sideways — the overflow gate failing on the narrowest
     screen, which is the one this shell exists for. The handle goes first: it is decoration here and
     the customer's own account page names them. What stays is the brand, the way to every
     destination, and the theme control. */
  .top #who{display:none}
  /* Notifications and sign-out remain available in the Sections sheet. Keeping their full-size
     desktop controls in this row makes the shell wider than a real phone in several languages. */
  .top #attention_btn,.top #out{display:none!important}
  .pnav{display:none}
  #navbtn{display:inline-flex}
  .wrap{padding:18px 14px 64px}
  .card{padding:14px}
  .drawer .panel{width:100%;border-left:0}
  .sn-attn-summary{grid-template-columns:1fr}
  .sn-attn-summary-card{min-height:82px}
  .shell-sheet-tools{display:grid;gap:10px;margin:10px 6px 4px;padding-top:12px;border-top:1px solid var(--line)}
  .shell-sheet-skinpick{display:flex;height:auto;min-height:52px;margin:0;padding:4px 12px;border:0;color:var(--ink)}
  .shell-sheet-skinpick .shell-sheet-label{font-size:13px;font-weight:600;white-space:nowrap}
  .shell-sheet-skinpick select{flex:1;max-width:none;margin-inline-start:auto}
  .shell-sheet-action{width:100%}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .big{font-size:20px}
  :root[data-sn-access="locked"] body .wrap,
  :root[data-sn-access="unavailable"] body .wrap{padding:24px 14px 64px}
  .sn-access-lock{padding:22px 16px}
  .sn-access-actions{align-items:stretch;flex-direction:column}
  .sn-access-actions .btn{width:100%}
}
/* Below 400px every pixel in the header row is contested. Measured on a 375px phone after hiding
   the handle: brand 112 + Sections 83 + language 97 + theme 44 + gaps + padding still came to 392
   against 375. Tightening the gutters and the language control brings it inside with room to spare
   — and the language NAME still reads, which is what the control is for. */
@media(max-width:400px){
  .top{padding:0 8px;gap:6px}
  .top .brand{font-size:0;gap:0}
  .top .brand .mk{width:20px;height:20px}
  .langpick select{max-width:88px;padding:0 6px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── v3: the six-item nav becomes a LEFT RAIL ──────────────────────────────────────────────────
   THIS LIVES HERE BECAUSE THE NAV LIVES HERE. shell.js builds the same nav.pnav element for
   /account/jobs, /account/links and /account/agents, and those are separate PAGES, not routes of
   the /account SPA. While the rail was declared only in server.js's inline stylesheet, exactly one
   of the four surfaces had it: picking "Sidebar (v3)" gave a sidebar on Home and the old horizontal
   strip everywhere else, so the control named a layout three quarters of the portal did not have.

   FIXED POSITIONING, NOT A GRID. /account and /account/jobs carry the nav as a direct child of
   <body>, but /account/links and /account/agents mount the whole chrome into <div id="shellhost"> —
   a body-level grid cannot place a nested element, and those two pages also keep six or more
   drawers at body level that auto-placement would scatter into cells. Fixed positioning does not
   care where in the tree the element sits, which is the only property that holds for all four.

   Logical properties throughout (inset-inline-start, margin-inline-start, border-inline-end), so
   Arabic and Urdu mirror the rail with no second rule.

   ⛔ NEVER DECLARE `display` ON .pnav IN THIS BLOCK. The ≤720px rule above hides the rail in favour
   of the Sections sheet, and an attribute selector out-scores a bare class no matter the source
   order or the media query — a display declaration here would silently un-hide the mobile nav. */
/* /account still carries its older page-local header and v2 frame declarations after this shared
   stylesheet. The `body` compound below is deliberate: it makes the shared v3 geometry outrank
   those later declarations, so Home, Proof Requests, Shared Links and AI Agents keep the exact same
   60px header, control heights, background and content origin during document navigation. */
:root[data-nav="side"] body{background:var(--bg)}
:root[data-nav="side"] body .top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;flex-wrap:nowrap;
  gap:12px;row-gap:normal;height:60px;min-height:60px;padding:0 24px;
  background:var(--card);border-bottom:1px solid var(--line);
}
:root[data-nav="side"] body .brand{
  gap:8px;font:800 17px/1 "Cipher Sans",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
:root[data-nav="side"] body .brand .mk,
:root[data-nav="side"] body .brand>svg{width:18px;height:18px;flex:none}
:root[data-nav="side"] body .pill{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:transparent;
}
:root[data-nav="side"] body .tgl,
:root[data-nav="side"] body .iconbtn{
  width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--line);
  background:var(--card);color:var(--ink);
}
:root[data-nav="side"] body .langpick{
  position:relative;display:inline-flex;align-items:center;gap:0;height:44px;
  padding:0;border:0;background:transparent;
}
:root[data-nav="side"] body .langpick>svg{display:none}
:root[data-nav="side"] body .langpick-icon,
:root[data-nav="side"] body .skinpick-icon{display:none}
:root[data-nav="side"] body .langpick select{
  appearance:auto;height:44px;min-height:44px;max-width:9.5em;padding:0 10px;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  font-size:13px;font-weight:400;
}

:root[data-nav="side"] body .pnav{
  position:fixed;
  inset-block-start:60px;                 /* the sticky header's own height */
  inset-block-end:0;
  inset-inline-start:0;
  width:248px;box-sizing:border-box;
  z-index:20;                             /* below .top (30), which stays full width above the rail */
  flex-direction:column;align-items:stretch;gap:2px;
  padding:20px 12px;
  border-bottom:0;border-inline-end:1px solid var(--line);
  background:var(--card);
  overflow-y:auto;overscroll-behavior:contain;
}
/* Attribute-guarded: without the guard a page whose nav carries no title still renders the ::before
   box, i.e. a strip of empty padding above the first link. */
:root[data-nav="side"] body .pnav[data-railtitle]::before{
  content:attr(data-railtitle);display:block;
  padding:0 10px 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
}
:root[data-nav="side"] body .pnav a{
  border-bottom:0;border-radius:10px;padding:10px 12px;text-align:start;
  display:flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;
}
:root[data-nav="side"] body .pnav a:hover{background:var(--tile);color:var(--ink)}
:root[data-nav="side"] body .pnav a.on{background:var(--tint);color:var(--accentTx);box-shadow:inset 0 0 0 1px var(--line2)}
:root[data-nav="side"] body .pnav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Content clears the rail. */
:root[data-nav="side"] body .wrap{margin-inline-start:248px;max-width:none;padding:28px 32px 72px}
:root[data-nav="side"] body footer{margin-inline-start:248px}
/* data-rail="off" is set by the signed-out portal, which hides the nav. Without it the sign-in card
   and the footer keep a 248px band of empty background on their start side. Higher specificity than
   the two rules above so it wins wherever it is set. */
:root[data-nav="side"][data-rail="off"] body .wrap,
:root[data-nav="side"][data-rail="off"] body footer{margin-inline-start:0}

/* Below 1024px v3 falls back to the shipped horizontal strip — the layout classic and v2 already use
   and that is already proven at 768 and 375. RESET inset/width/height, never max-height: the rail
   gets its height from inset-block, and clearing a property this rule does not set leaves a
   full-viewport-tall box with all content one screen below the fold. */
@media(max-width:1023px){
  /* ⛔ NO overflow-x:auto. A horizontally scrolling nav strip is the thing the Sections sheet
     replaced — destinations past the fold were invisible, which is why the ≤720px rule hides the
     strip entirely. Falling back to the SHIPPED horizontal nav means falling back to its overflow
     behaviour too, not inventing a scroller v2 and classic do not have. */
  :root[data-nav="side"] body .pnav{
    position:static;inset:auto;width:auto;height:auto;
    flex-direction:row;border-inline-end:0;border-bottom:1px solid var(--line);
    overflow:visible;padding:12px 16px 0;gap:4px;background:transparent;
  }
  :root[data-nav="side"] body .pnav[data-railtitle]::before{display:none}
  :root[data-nav="side"] body .wrap{margin-inline-start:0;max-width:none;padding:24px 20px 72px}
  :root[data-nav="side"] body footer{margin-inline-start:0}
}
@media(max-width:720px){
  :root[data-nav="side"] body .top{gap:8px;padding:0 12px}
  :root[data-nav="side"] body .wrap{padding:18px 14px 64px}
}
@media(max-width:400px){
  :root[data-nav="side"] body .top{gap:6px;padding:0 8px}
  :root[data-nav="side"] body .top .brand{gap:0;font-size:0}
  :root[data-nav="side"] body .top .brand .mk,
  :root[data-nav="side"] body .top .brand>svg{width:20px;height:20px}
  :root[data-nav="side"] body .langpick select{max-width:88px;padding:0 6px}
}