/* The DEVI shell: one look for Account (/account/) and the admin dashboard (/admin/).
   The DEVI logo in a dark left panel, grouped sections, a top bar with the breadcrumb and the light or dark
   switch, cards, and a section menu at phone width. Tokens, layout and status colors from the approved mockup
   (handoff/proposals/admin-account/admin-dashboard.html), on the site's canvas (#0A0A0B), cards (#111113),
   accent (#4B8DF8) and fonts.

   Light only (owner, 10/26/2026: "No more dark mode on the website. Only the Windows applications keep the
   toggle."). The dark rules and the switch are gone.
   The tokens sit on :root (the admin page reads them there to draw its charts) and on .shell, so on Account they
   win over the site's own dark-only tokens without touching the rest of the site. */
:root,.shell{color-scheme:light;
--bg:#f3f4f6;--surface:#fcfcfb;--raised:#ffffff;--side:#0A0A0B;--side-2:#18181b;--side-text:#aeb5c2;--side-on:#ffffff;
--text:#0b0b0b;--text-2:#52514e;--muted:#6f6e6a;--line:#e6e5e1;--line-2:#d6d5d0;--grid:#ecebe7;--focus:#2a78d6;
--s1:#2a78d6;--s1-soft:#cde2fb;--brand:#4B8DF8;--on-s1:#ffffff;
--good:#0ca30c;--warn:#fab219;--serious:#ec835a;--critical:#d03b3b;
--good-ink:#006300;--warn-ink:#8a5a00;--serious-ink:#a3431b;--critical-ink:#a32323;
--good-bg:#e7f5e7;--warn-bg:#fdf2d6;--serious-bg:#fde9e0;--critical-bg:#fbe3e3;
/* Data Center charts (owner, 10/26/2026: DEVI colors, no green, yellow or red), validated with the dataviz palette
   checker; design-system/data-center/chart-tokens.css carries the same values and PUBLIC-WEB-STYLE.md records them.
   seq: magnitude, light blue to brand blue to purple. cat: the four support groups (Full, Partial, Unsupported,
   Bug), always with their icon and word. state: On track, Near budget, Over budget, as brand tints of rising
   strength, always with an icon and a word. */
--viz-seq-1:#8EAFEF;--viz-seq-2:#5F8DF3;--viz-seq-3:#3563EE;--viz-seq-4:#4F3CD4;--viz-seq-5:#4E1CA8;--viz-track:#EAF0FE;
--viz-cat-1:#3563EE;--viz-cat-2:#84B7F9;--viz-cat-3:#8F78BA;--viz-cat-4:#6C1BB9;--viz-neutral:#8A8F98;
--viz-full-bg:#EAF0FE;--viz-full-ink:#2550D9;--viz-partial-bg:#E6F1FE;--viz-partial-ink:#1F5FA8;
--viz-unsupported-bg:#EFEBF7;--viz-unsupported-ink:#5B4A86;--viz-bug-bg:#F1E8FB;--viz-bug-ink:#5A1599;
--viz-up:#2550D9;--viz-down:#5A1599;
--state-on-bg:#EAF0FE;--state-on-ink:#2550D9;--state-near-bg:#DCD3FB;--state-near-ink:#3B1A8F;--state-over-bg:#4E1CA8;--state-over-ink:#FFFFFF;
--shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);--tipshadow:0 4px 16px rgba(0,0,0,.12);
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif}
/* The page canvas behind the shell, in the same two themes. */
html:has(.shell),html:has(.shell) body{background:#f3f4f6}

/* ── layout, shared ───────────────────────────────────────────────────────── */
.shell{font:14px/1.5 var(--font);color:var(--text);-webkit-font-smoothing:antialiased}
.shell *,.shell *::before,.shell *::after{box-sizing:border-box}
.shell .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shell .gate{min-height:100vh;display:grid;place-items:center;padding:24px 16px;color:var(--text-2);background:var(--bg)}
.shell .gate>.card,.shell .gate>.accountcard{width:100%;max-width:420px;text-align:center;background:var(--raised);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:28px 26px 22px}
.shell .gatelogo{display:block;height:26px;width:auto;margin:0 auto 18px}
/* The logo is white, for the dark left panel; on a light card it is drawn black. */
.shell .gatelogo{filter:invert(1)}
.shell .gate h1{font-size:19px;font-weight:650;margin:0 0 6px;color:var(--text);letter-spacing:-.01em;background:none;-webkit-text-fill-color:currentColor}
.shell .app,.acct.shell .dash{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;gap:0;padding:0;background:var(--bg)}
.shell aside,.acct.shell .dashnav{background:var(--side);color:var(--side-text);display:flex;flex-direction:column;gap:0;padding:16px 12px;position:sticky;top:0;height:100vh;align-self:start;border-right:1px solid #18181b}
/* The DEVI logo, as in the site header (owner, Oct 22 2026: keep the DEVI look). */
.shell .brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:6px 10px 18px;text-decoration:none}
.shell .brand img{height:24px;width:auto;display:block}
.shell .brand small{display:block;color:#8a8a94;font-size:11px;letter-spacing:.02em}
.shell .snav{display:flex;flex-direction:column;gap:2px;overflow:auto;background:none;border:0;margin:0;padding:0}
.shell .snav .sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:#6b7280;padding:16px 10px 6px;margin:0;font-weight:600}
.shell .snav .sec:first-child{padding-top:4px}
.shell .snav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.shell .snav li{margin:0}
.shell .snav button,.acct.shell .dashnav .snav a{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--side-text);-webkit-text-fill-color:currentColor;background:none;cursor:pointer;font-size:13.5px;line-height:1.3;min-height:36px;position:relative;width:100%}
.shell .snav svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.shell .snav button:hover,.acct.shell .dashnav .snav a:hover{background:var(--side-2);color:#e8ebf0;text-decoration:none}
.shell .snav button[aria-current="page"],.acct.shell .dashnav .snav a[aria-current="page"]{background:#1a2333;color:var(--side-on);font-weight:600}
.shell .snav button[aria-current="page"]::before,.acct.shell .dashnav .snav a[aria-current="page"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:#4B8DF8}
.shell .snav button:focus-visible,.acct.shell .dashnav .snav a:focus-visible{outline:2px solid #4B8DF8;outline-offset:1px}
.shell .snav .count{margin-left:auto;font-size:11px;background:#2a3140;color:#cfd5df;border-radius:999px;padding:1px 7px}
.shell .side-foot{margin-top:auto;padding:12px 10px 0;border-top:1px solid #1e232c;display:flex;align-items:center;gap:10px}
.shell .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#4B8DF8,#8B77EE);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.shell .side-foot>div{font-size:12.5px;color:#e8ebf0;line-height:1.25;min-width:0}
.shell .side-foot span{display:block;color:#7d8594;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell .side-foot .who{color:#e8ebf0;font-size:12.5px}
.shell .side-foot .signout,.acct.shell .dashnav .side-foot .signout{all:unset;margin-left:auto;font-size:11.5px;color:#aeb5c2;border:1px solid #2a3140;border-radius:6px;padding:3px 8px;cursor:pointer;min-height:0;flex:none}
.shell .side-foot .signout:hover{color:#fff;border-color:#3a4354}
.shell .side-foot .signout:focus-visible{outline:2px solid #4B8DF8;outline-offset:1px}
.shell .top{display:flex;align-items:center;gap:12px;padding:12px 28px;min-height:58px;border-bottom:1px solid var(--line);background:var(--raised);position:sticky;top:0;z-index:5}
.shell .crumb{color:var(--muted);font-size:12.5px;margin-right:auto}.shell .crumb b{color:var(--text);font-weight:600}
.shell .toplink{color:var(--text-2);font-size:13px;padding:6px 8px;border-radius:6px;text-decoration:none;-webkit-text-fill-color:currentColor;background:none}
.shell .toplink:hover{color:var(--text);background:var(--bg);text-decoration:none}
.shell .iconbtn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--raised);display:grid;place-items:center;color:var(--text-2);cursor:pointer;padding:0;flex:none}
.shell .iconbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.shell .iconbtn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.shell .iconbtn[disabled]{opacity:.5;cursor:default}

/* ── Account (/account/): the site's account parts, in the shell's tokens ─── */
.acct.shell{--t1:var(--text);--t2:var(--text-2);--t3:var(--muted);--text-primary:var(--text);--text-secondary:var(--text-2);--text-muted:var(--muted);
  --accent:var(--s1);--accent-hover:var(--s1);--pline:var(--line);--pline2:var(--line-2);--psurface:var(--raised);--pfield:var(--line-2);--field:var(--line-2);
  --hair:var(--line);--hair2:var(--line-2);--bg-surface:var(--surface);--prad:12px;min-height:100vh;background:var(--bg)}
/* The site header and footer give way to the shell's own left panel on this page. */
body:has(> .acct.shell)>nav,body:has(> .acct.shell)>footer,body:has(> .acct.shell)>#navsentinel{display:none}
.acct.shell main{padding:0;margin:0}
.acct.shell p{color:var(--text-2)}
.acct.shell a{color:var(--s1)}
.acct.shell .dashmenu{display:none}
.acct.shell .dashmain{min-width:0}
.acct.shell .panels{padding:22px 28px 48px;max-width:1080px}
.acct.shell .dashpanel.accountcard,.acct.shell .ovcard{background:var(--raised);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:20px 22px;margin:0}
.acct.shell .dashpanel.accountcard>h2,.acct.shell .ovhead h2{margin:0 0 4px;font-size:20px;font-weight:650;letter-spacing:-.01em;color:var(--text);background:none;-webkit-text-fill-color:currentColor}
.acct.shell .ovhead{margin:2px 0 16px}
.acct.shell .ovhead h2{font-size:22px}
.acct.shell .dashpanel .accountlead,.acct.shell .accountlead{margin:0 0 18px;color:var(--text-2);font-size:13.5px}
.acct.shell .ovhead .accountlead{margin:0}
.acct.shell .dashpanel h3,.acct.shell .ovcard h3{margin:22px 0 10px;font-size:14px;font-weight:600;color:var(--text)}
.acct.shell .ovcard h3{margin:0 0 10px}
.acct.shell .ovgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
.acct.shell .ovwide{grid-column:1/-1}
.acct.shell .accounthelp{color:var(--muted);font-size:13px}
.acct.shell .muted{color:var(--muted)}
.acct.shell .summarylist{border:0;margin:0}
.acct.shell .summarylist>div{grid-template-columns:minmax(110px,170px) minmax(0,1fr) auto;padding:10px 0;border-bottom:1px solid var(--line)}
.acct.shell .summarylist>div:last-child{border-bottom:0}
.acct.shell .summarylist dt{color:var(--text-2);font-size:13px}
.acct.shell .summarylist dd{color:var(--text);font-size:13.5px;font-weight:500}
.acct.shell .summarylist a{font-size:12.5px;font-weight:600;color:var(--s1)}
.acct.shell .quick{display:flex;flex-direction:column;margin:0 0 6px}
.acct.shell .quickrow{display:flex;flex-direction:column;gap:1px;padding:9px 10px;margin:0 -10px;border-radius:8px;color:var(--text);text-decoration:none;-webkit-text-fill-color:currentColor;background:none}
.acct.shell .quickrow:hover{background:var(--bg);text-decoration:none}
.acct.shell .quickrow strong{font-size:13.5px;font-weight:600;color:var(--text)}
.acct.shell .quickrow .accounthelp{margin:0;font-size:12.5px}
.acct.shell .accountlinks{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;border-top:1px solid var(--line);padding-top:10px}
.acct.shell .accountlinks a,.acct.shell .accountlinks a:hover{display:inline;min-height:0;border:0;color:var(--s1);font-size:13px;font-weight:600;background:none;-webkit-text-fill-color:currentColor}
.acct.shell .listrow{border-top:1px solid var(--line);padding:12px 0}
.acct.shell .listrow:first-child{border-top:0;padding-top:2px}
.acct.shell .listrow a:not(.btn){color:var(--text);font-size:13.5px}
.acct.shell .listrow strong{color:var(--text);font-size:13.5px}
.acct.shell .emptynote{border:1px dashed var(--line-2);border-radius:10px;padding:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;background:var(--surface)}
.acct.shell .emptynote p{margin:0;color:var(--text-2);font-size:13.5px}
.acct.shell .accountfield{margin:0 0 14px;display:grid;gap:5px;max-width:440px}
.acct.shell .accountfield label{color:var(--text-2);font-size:12.5px;font-weight:500}
.acct.shell .accountfield input,.acct.shell .accountfield input:focus{min-height:38px;padding:7px 10px;font:14px/1.4 var(--font);color:var(--text);background:var(--surface);border:1px solid var(--line-2);border-radius:8px;box-shadow:none}
.acct.shell .accountfield input:focus{outline:2px solid var(--focus);outline-offset:0}
.acct.shell form+form{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.acct.shell .btn,.acct.shell .accountcard .btn{width:auto;min-height:36px;padding:7px 14px;border-radius:8px;border:1px solid var(--s1);background:var(--s1);color:var(--on-s1);-webkit-text-fill-color:currentColor;font:600 13px/1.3 var(--font);box-shadow:none;transform:none}
.acct.shell .btn:hover{background:var(--s1);border-color:var(--s1);color:var(--on-s1);filter:brightness(1.08);box-shadow:none}
.acct.shell .btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.acct.shell .btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.acct.shell .btn.btnsmall{min-height:32px;padding:5px 12px;font-size:12.5px}
.acct.shell .btn.btnghost{background:var(--raised);color:var(--text);border-color:var(--line-2)}
.acct.shell button.textbtn,.acct.shell .linkbtn{color:var(--text-2);font:600 13px/1.2 var(--font);min-height:32px}
.acct.shell button.textbtn:hover,.acct.shell .linkbtn:hover{color:var(--text)}
.acct.shell .accountrow{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin:10px 0;background:var(--surface)}
.acct.shell .accountrow strong{color:var(--text);font-size:13.5px}
.acct.shell .accountrow input,.acct.shell input[type=checkbox]{accent-color:var(--s1)}
.acct.shell .preferencerow{padding:10px 0;border-bottom:1px solid var(--line)}
.acct.shell .preferencerow strong{color:var(--text);font-size:13.5px}
.acct.shell .dangerzone{border-color:var(--critical-bg);background:var(--surface);border-radius:10px}
.acct.shell .dangerzone h3{color:var(--critical-ink);margin-top:0}
.acct.shell .dangerzone p{color:var(--text-2);font-size:13px}
.acct.shell .postnotice{background:var(--warn-bg);color:var(--warn-ink);border-left-color:var(--warn);border-radius:6px;margin:0 0 16px}
.acct.shell .postnotice a{color:inherit;font-weight:600}
.acct.shell .statusbadge{border-color:var(--line-2);color:var(--text);font-size:11.5px}
.acct.shell .statusbadge.s-planned{background:var(--s1-soft);border-color:transparent}
.acct.shell .examinerbadge{border-color:var(--line-2);color:var(--text)}
.acct.shell .skel{background:linear-gradient(90deg,var(--grid) 0%,var(--line) 50%,var(--grid) 100%);background-size:200% 100%}
.acct.shell p[role=status]:not(:empty),.acct.shell .formstatus:not(:empty){color:var(--text-2);font-size:13px}
.acct.shell .formstatus.err{color:var(--critical-ink)}
.acct.shell select,.acct.shell textarea{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.acct.shell select option{background-color:var(--raised);color:var(--text)}
.acct.shell .dashpanel h2:focus{outline:none}
/* The Staff heading shows only when one of its items does. */
.acct.shell .snav .sec-staff{display:none}
.acct.shell .snav:has(.staff>li:not([hidden])) .sec-staff{display:block}
.acct.shell .gate .accounthelp{margin:6px 0 16px}
.acct.shell .gate .btn{width:100%;min-height:40px}
.acct.shell .gatefoot{margin:14px 0 0!important;font-size:12.5px}

/* ── phone width: the section menu replaces the left panel ───────────────── */
@media (max-width:860px){
  .acct.shell .ovgrid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .shell .app,.acct.shell .dash{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start}
  .shell aside{display:none}
  .acct.shell .dashnav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;height:auto;position:static;padding:10px 16px;border-right:0;border-bottom:1px solid #18181b}
  .acct.shell .dashnav .brand{padding:0;flex-direction:row;align-items:center;gap:8px}
  .acct.shell .dashnav .brand small{display:none}
  .acct.shell .dashnav .dashmenu{display:block;grid-column:1/-1;grid-row:2;width:100%;min-height:40px;font:14px/1.3 var(--font);padding:8px 10px;border-radius:8px;border:1px solid #2a3140;background:#111113;color:#f0efec}
  .acct.shell .dashnav .snav{display:none}
  .acct.shell .dashnav .side-foot{margin:0;padding:0;border:0;grid-column:3;grid-row:1}
  .acct.shell .dashnav .side-foot .av,.acct.shell .dashnav .side-foot .whobox{display:none}
  .shell .top{padding:10px 16px}
  .acct.shell .toplink{display:none}
  .acct.shell .panels{padding:16px 16px 40px}
  .acct.shell .dashpanel.accountcard,.acct.shell .ovcard{padding:16px}
  .acct.shell .summarylist>div{grid-template-columns:1fr auto}
  .acct.shell .summarylist dd{grid-column:1/-1;grid-row:2}
}

/* ── phone width, light: the top header follows the switch (website preview 6, owner 10/25/2026) ────────────
   At phone width the left panel is the header across the top. With light chosen it is drawn light too, so the whole
   page follows the switch. On a wide screen the left panel stays the dark DEVI panel of the approved mockup. */
@media (max-width:760px){
  html .acct.shell .dashnav{background:var(--raised);color:var(--text-2);border-bottom:1px solid var(--line)}
  html .acct.shell .dashnav .brand img{filter:invert(1)}
  html .acct.shell .dashnav .dashmenu{background:var(--raised);color:var(--text);border-color:var(--line-2);color-scheme:light}
  html .acct.shell .dashnav .side-foot .signout{color:var(--text-2);border-color:var(--line-2)}
  html .acct.shell .dashnav .side-foot .signout:hover{color:var(--text);border-color:var(--muted)}
  html .acct.shell .dashnav .dashmenu:focus-visible,html .acct.shell .dashnav .signout:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
}

/* ── the portal (website preview 6): gated sections, steps, tool cards, status chips, forms ──────────────────────
   Until a tool is approved, devi-portal.js sets html[data-portal="limited"]; before it has asked, nothing gated shows
   either (the owner's first frame, from dc-boot.js's hint, is the exception). The server checks every gated file. */
html[data-portal="limited"] .acct [data-gate="approved"],
html:not([data-portal]):not(.dc-hint-owner) .acct [data-gate="approved"]{display:none!important}
.acct.shell .navgroup{display:block}
.shell .chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 6px;border-radius:999px;font-size:12px;font-weight:600;line-height:20px;white-space:nowrap;border:1px solid transparent}
.shell .chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.shell .chip-none{background:var(--bg);color:var(--text-2);border-color:var(--line-2)}
.shell .chip-pending{background:var(--s1-soft);color:#1b5fae}
.shell .chip-approved{background:var(--good-bg);color:var(--good-ink)}
.shell .chip-denied{background:var(--critical-bg);color:var(--critical-ink)}
.shell .chip-revoked{background:var(--bg);color:var(--muted);border-color:var(--line-2);text-decoration:line-through}
.acct.shell .portalhero{display:grid;gap:16px;background:var(--raised);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:20px 22px;margin:0 0 16px}
.acct.shell .portalhero h3{margin:0 0 4px;font-size:17px;font-weight:650;color:var(--text)}
.acct.shell .portalhero p{margin:0}
.acct.shell .portalcta{margin:0}
.acct.shell .portalsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.acct.shell .portalsteps.compact{margin:0 0 18px}
.acct.shell .portalsteps .step{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.acct.shell .portalsteps .step a{color:var(--text-2);-webkit-text-fill-color:currentColor;background:none;font-size:13px;font-weight:600;text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct.shell .portalsteps .step a:hover{color:var(--text);text-decoration:underline}
.acct.shell .stepdot{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11.5px;font-weight:700;border:1.5px solid var(--line-2);color:var(--muted);background:var(--raised)}
.acct.shell .stepdot svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.acct.shell .step-done .stepdot{background:var(--s1);border-color:var(--s1);color:#fff}
.acct.shell .step-current{border-color:var(--s1)}
.acct.shell .step-current .stepdot{border-color:var(--s1);color:var(--s1)}
.acct.shell .step-current .stepdot svg{fill:currentColor;stroke:none}
.acct.shell .step-current a,.acct.shell .step-done a{color:var(--text)}
.acct.shell .toolsummary{list-style:none;margin:0;padding:0}
.acct.shell .toolsummary li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.acct.shell .toolsummary li:first-child{border-top:0}
.acct.shell .toolsummary a{color:var(--text);-webkit-text-fill-color:currentColor;background:none;font-weight:600;text-decoration:none}
.acct.shell .toolsummary a:hover{text-decoration:underline}
.acct.shell .toolcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:6px 0 0}
.acct.shell .toolcard{border:1px solid var(--line);border-radius:12px;padding:16px 16px 14px;background:var(--surface);display:flex;flex-direction:column;gap:8px;min-width:0}
.acct.shell .toolcard p{margin:0}
.acct.shell .toolcardtop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.acct.shell .toolcard h3{margin:0;font-size:15px;font-weight:650;color:var(--text)}
.acct.shell .toolnext{font-size:13px;color:var(--text-2)}
.acct.shell .toolcardactions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.acct.shell .portalnote{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-size:13.5px}
.acct.shell .portalnote.ok{border-color:transparent;background:var(--good-bg);color:var(--good-ink)}
.acct.shell .emptynote{margin:14px 0 0}
.acct.shell .portalfoot{margin:18px 0 0}
.acct.shell .portalsub{margin:26px 0 8px}
.acct.shell .requestform,.acct.shell .profileform{display:grid;gap:12px;margin:18px 0 0;max-width:680px}
.acct.shell .requestform{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--surface);max-width:none}
.acct.shell .requestform h3{margin:0}
.acct.shell .requestform .accountfield,.acct.shell .profileform .accountfield{margin:0}
.acct.shell .requestform textarea{font:13.5px/1.5 var(--font)}
.acct.shell .requestform textarea,.acct.shell .requestform input[type="text"],.acct.shell .profileform input[type="text"],.acct.shell .profileform input[type="email"]{width:100%;max-width:none}
.acct.shell .licensewrap{display:grid;gap:6px}
.acct.shell .licensehead{display:flex;align-items:baseline;gap:10px;margin:0;flex-wrap:wrap}
.acct.shell .licensebox{white-space:pre-wrap;max-height:200px;overflow:auto;padding:12px 14px;border:1px solid var(--line-2);border-radius:8px;background:var(--raised);color:var(--text);font:12.5px/1.55 var(--font)}
.acct.shell .licensebox:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.acct.shell .acceptrow{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--text)}
.acct.shell .acceptrow input{margin-top:3px;width:16px;height:16px;flex:none}
.acct.shell .kindset{border:0;margin:0;padding:0;min-width:0}
.acct.shell .kindset legend{font-size:13px;font-weight:600;color:var(--text);margin:0 0 8px;padding:0}
.acct.shell .kindgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.acct.shell .kindopt{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--raised);cursor:pointer;font-size:13.5px;color:var(--text);min-width:0}
.acct.shell .kindopt:has(input:checked){border-color:var(--s1);box-shadow:inset 0 0 0 1px var(--s1)}
.acct.shell .kindopt input{margin:0;flex:none}
.acct.shell .kindopt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.acct.shell .profilegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.acct.shell .formstatus.ok{color:var(--good-ink)}
.acct.shell .formstatus.err{color:var(--critical-ink)}
.acct.shell .creditgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:8px 0 14px}
.acct.shell .creditcard{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--surface)}
.acct.shell .creditcard h3{margin:0 0 6px;font-size:14.5px}
.acct.shell .creditcard p{margin:0;color:var(--text-2);font-size:13.5px}
.acct.shell .creditcard .chip{margin-left:4px;vertical-align:middle}
@media (max-width:760px){
  .acct.shell .toolcards,.acct.shell .creditgrid,.acct.shell .profilegrid{grid-template-columns:1fr}
  .acct.shell .kindgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acct.shell .portalsteps .step{padding:8px 6px;gap:6px}
  .acct.shell .portalsteps .step a{font-size:12px;white-space:normal;line-height:1.2}
}
/* The Data Center's group headings (Data Center, Reader, Files): one whose items a role cannot open hides with them. */
.shell .snav [data-dc-group] .sec:has(+ul:not(:has(>li:not([hidden])))){display:none}
/* A staff account leaves out the customer items it does not use: Your tools (the same as Tools) and Usage (in the
   account menu still). dc-app.js adds dc-staff once the admin API says owner, admin or employee. */
html.dc-staff .shell .snav .navgroup:has(a[data-account-tab^="tool/"]),html.dc-staff .shell .snav li:has(>a[data-account-tab="usage"]){display:none}