/* County Control dashboard skin, v3 (2026-10-16). Replaces the 2026-10-07 "ruled boxes" skin.
   Loaded last, after app.css, pcd-fonts.css and pcd-v2.css. Skin only: every class here is one
   app.js already renders, apart from the sign-in screen at the bottom.

   It matches the CAD (cad2.css): graphite ground, filled cards with soft 10px corners, Inter for
   words, JetBrains Mono only for commands and ids, County Control red for the primary action and
   the current page. No glows, gradients or glass. Colour otherwise only where it means
   something: ok, warning, danger and a department's own colour.

   The CAD mounts into the same page (body.cad-open) and brings its own sheet, so every rule that
   could reach a CAD element is scoped to body:not(.cad-open). Toasts and the confirm dialog are
   shared by both. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-var.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/jetbrains-mono-var.woff2') format('woff2'); }

:root{
  --bg:#0f0f11; --bg-2:#141417; --bg-3:#1a1a1e; --surface:#141417; --surface-2:#1a1a1e; --surface-3:#202025;
  --ink:#ececef; --ink-2:#a8a8b0; --ink-3:#85858e; --muted:#a8a8b0; --muted-2:#85858e;
  --rule:#26262b; --rule-2:#202024; --rule-3:#1b1b1f;
  --line:#26262b; --line-strong:#3a3a41;
  --brand:#d01418; --brand-2:#e0262a;
  --radius:10px; --radius-sm:7px; --radius-input:7px; --radius-btn:7px; --r-sm:7px; --r-md:10px; --r-lg:12px;
  --ease:cubic-bezier(.16,1,.3,1);
  /* a critically damped spring (no overshoot, ~0.35s response) for anything that appears or moves */
  --spring:cubic-bezier(.2,.9,.25,1); --t-move:.34s; --t-press:100ms;
  --shadow:0 1px 2px rgba(0,0,0,.3);
  --pcd-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --pcd-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:var(--pcd-sans); --mono:var(--pcd-mono); --p-sans:var(--pcd-sans); --p-mono:var(--pcd-mono);
}
/* The dashboard is laid out in rem, so a root that grows with the screen gives 1440p and 4K the
   same proportions as 1080p. The CAD is a px workstation with its own zoom steps, so while it is
   open the root stays at 16px. */
html{font-size:clamp(15px,.32vw + 10.5px,22px)}
html:has(body.cad-open){font-size:16px}
body{font-family:var(--pcd-sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'cv11','ss01'}
@media (prefers-color-scheme: light){
  /* the dashboard is dark like the CAD it opens; a light shell would flash between the two */
  :root{color-scheme:dark}
}
html{background:var(--bg);caret-color:var(--ink);accent-color:var(--brand);scrollbar-color:#2c2c31 var(--bg)}
body{background:var(--bg);color:var(--ink)}
body::before{display:none!important}
::selection{background:rgba(208,20,24,.35);color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2c2c31;border:3px solid var(--bg);border-radius:10px}
:focus-visible{outline:2px solid #e4e4e7;outline-offset:2px;border-radius:6px}

/* ---------------------------------------------------------------- type */
body:not(.cad-open) :is(.h1,.page-head h1,.home-hello h1,.center .hero h1){font-weight:700;letter-spacing:-.025em;line-height:1.1}
body:not(.cad-open) .page-head h1{font-size:clamp(1.625rem,2.4vw,2rem)}
body:not(.cad-open) .home-hello h1{font-size:clamp(1.75rem,3vw,2.25rem)}
body:not(.cad-open) .page-head{padding-bottom:0;margin-bottom:24px;border-bottom:0}
body:not(.cad-open) .page-head p{color:var(--ink-2);font-size:0.9375rem;line-height:1.55;margin-top:6px}
body:not(.cad-open) :is(.hint,.help,.sub,.muted,.det,.fine){color:var(--ink-2)}
/* figures in the sans with tabular digits; mono is for commands, ids and keys */
body:not(.cad-open) :is(.hstat b,.count,.rank,.tbl .num,.progress-line span,.srow-setup span){font-family:var(--pcd-sans)!important;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
body:not(.cad-open) :is(.tile .k,.hstat span,.tbl th,.sgroup-head h2,.combo-group){font-family:var(--pcd-sans)!important;text-transform:none;letter-spacing:0;font-size:0.8125rem;font-weight:500;color:var(--ink-3)}
body:not(.cad-open) :is(.perm-name .mono,code,kbd){font-family:var(--pcd-mono)!important;font-size:.875em;letter-spacing:0}

/* ---------------------------------------------------------------- sign-in and boot */
body:not(.cad-open) .center .hero{text-align:left;max-width:460px;padding:32px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--bg-2);animation:none}
body:not(.cad-open) .center .hero .logo{width:40px;height:40px;margin:0 0 20px}
body:not(.cad-open) .center .hero h1{font-size:clamp(1.75rem,4vw,2.25rem);margin-bottom:10px}
body:not(.cad-open) .center .hero p{color:var(--ink-2)}
body:not(.cad-open) .center .hero .btn{width:100%;height:46px;font-size:0.9375rem}
body:not(.cad-open) .center .hero .fine{font-size:0.84375rem;color:var(--ink-3);margin-top:16px}
.spinner{border-color:var(--rule);border-top-color:var(--ink)}
.pcd-skel .sk,.pcd-skel .sk-row .sk,.pcd-skel .sk.card{border-radius:var(--radius-sm)}

/* ---------------------------------------------------------------- buttons */
body:not(.cad-open) .btn{border-radius:var(--radius-btn);min-height:36px;padding:0 14px;font:500 0.875rem/1 var(--pcd-sans);background:var(--bg-3);border:1px solid var(--line-strong);color:var(--ink);
  transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),opacity .15s var(--ease)}
body:not(.cad-open) .btn:hover{background:#232328;border-color:#4a4a52}
body:not(.cad-open) .btn.primary{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important;font-weight:600}
body:not(.cad-open) .btn.primary:hover{background:var(--brand-2)!important;border-color:var(--brand-2)!important}
body:not(.cad-open) .btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
body:not(.cad-open) .btn.ghost:hover{background:#1f1f24;color:var(--ink)}
body:not(.cad-open) .btn.sm{min-height:32px;padding:0 12px;font-size:0.8125rem}
body:not(.cad-open) .btn.danger{color:#fca5a5;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.08)}
body:not(.cad-open) .btn.danger:hover{background:rgba(239,68,68,.16)}
body:not(.cad-open) .btn:active{transform:scale(.97)}
body:not(.cad-open) .btn[disabled]{opacity:.4}
body:not(.cad-open) :is(.link,.linkbtn){color:var(--ink-2);text-decoration-color:var(--line-strong);text-underline-offset:3px}
body:not(.cad-open) :is(.link,.linkbtn):hover{color:var(--ink)}

/* ---------------------------------------------------------------- shell: sidebar, server switch, nav */
body:not(.cad-open) .shell{grid-template-columns:15.5rem minmax(0,1fr)}
body:not(.cad-open) .side{background:#121215;border-right:1px solid var(--rule);padding:14px 10px;gap:2px}
body:not(.cad-open) .switch{border-radius:var(--radius);border:1px solid var(--rule);background:var(--bg-2);margin-bottom:14px;padding:8px 10px}
body:not(.cad-open) .switch:hover{background:var(--bg-3);border-color:var(--line-strong)}
body:not(.cad-open) .switch .n{font-weight:600}
body:not(.cad-open) .switch .s{color:var(--ink-3)}
body:not(.cad-open) .side .nav{border-radius:var(--radius-sm);border:0;padding:8px 10px;color:var(--ink-2);font-weight:500;font-size:.875rem;background:none;box-shadow:none;
  transition:color .15s var(--ease),background-color .15s var(--ease)}
body:not(.cad-open) .side .nav svg{color:var(--ink-3);transition:color .15s var(--ease)}
body:not(.cad-open) .side .nav:hover{color:var(--ink);background:#1b1b1f}
body:not(.cad-open) .side .nav[aria-current="page"]{color:var(--ink);background:#202025;box-shadow:inset 2px 0 0 var(--brand);font-weight:600}
body:not(.cad-open) .side .nav[aria-current="page"] svg{color:var(--brand)}
body:not(.cad-open) .nav .dot{background:var(--warn);border-radius:50%}
body:not(.cad-open) .nav-beta{background:transparent;color:var(--ink-3);border:1px solid var(--line-strong);font:600 0.625rem/1 var(--pcd-sans);letter-spacing:0;border-radius:999px;padding:3px 6px}
body:not(.cad-open) .side .sep{background:var(--rule)}
body:not(.cad-open) .main{padding-top:32px;max-width:66rem}
body:not(.cad-open) .topline{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:8px}
body:not(.cad-open) .brand .logo{width:28px;height:28px}

/* ---------------------------------------------------------------- panels: filled cards */
body:not(.cad-open) :is(.card:not(.sk),.tile,.hstat,.gcard,.scard,.ttype,.add-row,.dept-row){border-radius:var(--radius);box-shadow:var(--shadow);background:var(--bg-2);border:1px solid var(--rule)}
body:not(.cad-open) .card{padding:22px 24px}
body:not(.cad-open) .card + .card{margin-top:16px}
body:not(.cad-open) .card > h2{font-size:1rem;font-weight:650;letter-spacing:-.01em}
body:not(.cad-open) .card > h2 > svg,body:not(.cad-open) .ctitle-ico{color:var(--ink-3);stroke:var(--ink-3)}
body:not(.cad-open) :is(.card,.tile,.gcard){animation:none}
/* stat tiles are separate cards in a row */
body:not(.cad-open) .tiles{gap:12px;background:transparent;border:0}
body:not(.cad-open) .tiles .tile{border:1px solid var(--rule);background:var(--bg-2);padding:16px 18px}
body:not(.cad-open) .tile .v{font-size:1.5rem;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:4px}
body:not(.cad-open) .tile .d{color:var(--ink-3);font-size:.8125rem}
body:not(.cad-open) .banner{border-radius:var(--radius);border:1px solid var(--rule);background:var(--bg-2)}
body:not(.cad-open) .banner.warn{border-color:rgba(245,183,64,.35);background:rgba(245,183,64,.07)}
body:not(.cad-open) .banner.bad{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.07)}
body:not(.cad-open) .empty{border-radius:var(--radius);border:1px dashed var(--line-strong);color:var(--ink-2);background:transparent}

/* home: servers as rows in one card */
body:not(.cad-open) .home-hero{padding-bottom:24px;border-bottom:0}
body:not(.cad-open) .home-stats{gap:10px;background:transparent;border:0}
body:not(.cad-open) .home-stats .hstat{border:1px solid var(--rule);background:var(--bg-2);min-width:120px;padding:14px 16px;border-radius:var(--radius)}
body:not(.cad-open) .hstat b{font-size:1.375rem;font-weight:650}
body:not(.cad-open) .hstat.warn b{color:var(--warn)}
body:not(.cad-open) .sgroup-head h2{font-size:0.875rem;color:var(--ink-2)!important}
body:not(.cad-open) .srows{gap:0;border:1px solid var(--rule);border-radius:var(--radius);background:var(--bg-2);overflow:hidden}
body:not(.cad-open) .sgroup .srow{border:0;border-top:1px solid var(--rule);border-radius:0;background:transparent;padding:14px 16px}
body:not(.cad-open) .sgroup .srow:first-child{border-top:0}
body:not(.cad-open) .sgroup .srow:hover{background:#1a1a1e}
body:not(.cad-open) .srow img,body:not(.cad-open) .srow .fallback{border-radius:var(--radius-sm)}
body:not(.cad-open) .srow-main b{font-size:0.9375rem}
body:not(.cad-open) .srow-main small{color:var(--ink-3);font-size:0.8125rem}
body:not(.cad-open) .srow-live{color:var(--ok)}
body:not(.cad-open) .srow-live i{background:var(--ok)}
body:not(.cad-open) .srow-bar{border-radius:999px;height:4px;background:#26262b;overflow:hidden}
body:not(.cad-open) .srow-bar i{border-radius:999px;background:var(--ok)}
body:not(.cad-open) .srow-go{color:var(--ink);background:var(--bg-3);border:1px solid var(--line-strong);padding:7px 12px;border-radius:var(--radius-btn);font-weight:500}
body:not(.cad-open) .srow:hover .srow-go{border-color:#4a4a52}
body:not(.cad-open) .add-row{background:var(--bg-2)}
body:not(.cad-open) .av{border-radius:var(--radius-sm)}
body:not(.cad-open) .av.round,body:not(.cad-open) .av.sm.round{border-radius:50%}

/* ---------------------------------------------------------------- forms */
body:not(.cad-open) .field{border-top-color:var(--rule);padding:18px 0}
body:not(.cad-open) .card > .field:first-of-type{border-top:0}
body:not(.cad-open) .field .lab{font-weight:600;color:var(--ink)}
body:not(.cad-open) .field .help{font-size:.84375rem;line-height:1.5}
body:not(.cad-open) .field.changed .lab::after{border-radius:999px;background:rgba(245,183,64,.12);border:1px solid rgba(245,183,64,.35)}
body:not(.cad-open) :is(.inp,.sel,.txt-a,.combo-in,.combo.multi){border-radius:var(--radius-input);background:#1c1c20;border:1px solid var(--line-strong);color:var(--ink);min-height:38px}
body:not(.cad-open) :is(.inp,.sel,.txt-a,.combo-in):hover,body:not(.cad-open) .combo.multi:hover{border-color:#4a4a52}
body:not(.cad-open) :is(.inp,.sel,.txt-a,.combo-in):focus,body:not(.cad-open) .combo.multi:focus-within{border-color:#71717a;box-shadow:0 0 0 3px rgba(255,255,255,.06);outline:none}
body:not(.cad-open) .combo.multi .combo-in{border:0;box-shadow:none;background:none;min-height:0}
body:not(.cad-open) .combo-x{border-radius:var(--radius-sm);background:transparent}
body:not(.cad-open) .combo-list{border-radius:var(--radius);border:1px solid var(--line-strong);background:#18181c;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);padding:4px}
body:not(.cad-open) .combo-opt{border-radius:var(--radius-sm)}
body:not(.cad-open) .combo-opt.active{background:#26262b}
body:not(.cad-open) .tag-pill{border-radius:999px;background:#232328;border:1px solid var(--line-strong)}
body:not(.cad-open) .tag-x{border-radius:999px}
body:not(.cad-open) .toggle{border-radius:999px;background:#3a3a41;border:0}
body:not(.cad-open) .toggle::after{background:#d4d4d8}
body:not(.cad-open) .toggle[aria-checked="true"]{background:var(--brand)}
body:not(.cad-open) .toggle[aria-checked="true"]::after{background:#fff}
body:not(.cad-open) .seg{border-radius:var(--radius-sm);background:#1c1c20;border:1px solid var(--line-strong);padding:3px;gap:2px}
body:not(.cad-open) .seg button{border-radius:5px;color:var(--ink-2)}
body:not(.cad-open) .seg button[aria-pressed="true"]{background:#2e2e34;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.4)}
body:not(.cad-open) .chip{border-radius:999px;font-family:var(--pcd-sans)!important}
body:not(.cad-open) .preview{border-radius:var(--radius);border:1px solid var(--rule);border-left-width:1px;background:#313338}
body:not(.cad-open) .check .box{border-radius:50%}
body:not(.cad-open) .check.done .box{background:var(--ok);border-color:var(--ok);color:#0f0f11}
body:not(.cad-open) .bar{border-radius:999px;height:6px;background:#26262b;overflow:hidden}
body:not(.cad-open) .bar > i{border-radius:999px;background:var(--brand)}
body:not(.cad-open) .bar.ok > i{background:var(--ok)}
body:not(.cad-open) .dept-row.on{border-color:var(--ink-3)}
body:not(.cad-open) .dpill{border-radius:999px}

/* permissions: command and its default on the left, the picker beside it */
body:not(.cad-open) .perm-row{grid-template-columns:minmax(0,1fr) minmax(16rem,24rem) auto;padding:14px 0;border-top-color:var(--rule)}
body:not(.cad-open) .perm-name{gap:8px;margin-bottom:4px}
body:not(.cad-open) .perm-name .mono{font-weight:600;color:var(--ink)}
body:not(.cad-open) .perm-row .pill{font-size:.75rem}

/* ---------------------------------------------------------------- tables and lists */
body:not(.cad-open) .tbl th{border-bottom:1px solid var(--rule)}
body:not(.cad-open) .tbl td{border-bottom:1px solid var(--rule-2)}
body:not(.cad-open) .tbl tbody tr:hover td{background:#1a1a1e}
body:not(.cad-open) .rowline{border-top-color:var(--rule)}
body:not(.cad-open) :is(.pill,.tag){border-radius:999px;background:#202025;border:1px solid var(--line-strong);color:var(--ink-2);padding:2px 8px}
body:not(.cad-open) .pill::before{border-radius:50%;width:6px;height:6px}

/* ---------------------------------------------------------------- save bar, toasts, dialog */
body:not(.cad-open) .savebar{border-radius:var(--radius-lg);background:#18181c;border:1px solid var(--line-strong);box-shadow:0 18px 40px -16px rgba(0,0,0,.85)}
body:not(.cad-open) .savebar .btn.ghost{border-color:transparent}
.toast{border-radius:var(--radius);background:#18181c;border:1px solid var(--line-strong);box-shadow:0 18px 40px -16px rgba(0,0,0,.85);font-family:var(--pcd-sans)}
.toast.ok,.toast.bad{border-left-width:1px}
.toast.ok{border-color:rgba(62,207,142,.4)}
.toast.bad{border-color:rgba(255,107,107,.4)}
.ccdlg{border-radius:var(--radius-lg);background:#141417;border:1px solid var(--line-strong);box-shadow:0 24px 60px -24px rgba(0,0,0,.95);font-family:var(--pcd-sans)}
.ccdlg::backdrop{background:rgba(0,0,0,.6);backdrop-filter:none}
.ccdlg h2{font-size:1.125rem;font-weight:700;letter-spacing:-.015em}
.ccdlg p{color:var(--ink-2)}
.ccdlg .ft{border-top:1px solid var(--rule);margin-top:20px;padding:14px 20px}
.ccdlg .btn{border-radius:var(--radius-btn)}
.btn.ccbad{background:#dc2626;border-color:#dc2626;color:#fff}
.btn.ccbad:hover{background:#ef4444;border-color:#ef4444}

/* the "coming soon" CAD card on the dashboard */
body:not(.cad-open) .soon-badge{border-radius:999px;background:transparent;border:1px solid var(--line-strong);color:var(--ink-2);font-family:var(--pcd-sans)}

@media (max-width:860px){
  body:not(.cad-open) .shell{grid-template-columns:1fr}
  body:not(.cad-open) .side .nav{box-shadow:none}
  body:not(.cad-open) .side .nav[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--brand)}
  body:not(.cad-open) .perm-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  body:not(.cad-open) .btn:active{transform:none}
}

/* ================================================================ feel (kept from 2026-10-08)
   Presses answer on the press; things that open come from what opened them and leave the way
   they came; every motion is a transition, so it reverses from wherever it is. */
a,button,summary,input,select,textarea,[role="option"],[role="switch"],.combo-opt{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body:not(.cad-open) .side .nav{-webkit-backdrop-filter:none;backdrop-filter:none}
body:not(.cad-open) .side .nav:active{background:#26262b;transition-duration:var(--t-press)}
body:not(.cad-open) .switch{transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--spring)}
body:not(.cad-open) .switch:active{transform:scale(.98);transition-duration:var(--t-press)}
body:not(.cad-open) .sgroup .srow{transition:background-color .2s var(--ease)}
body:not(.cad-open) .sgroup .srow:active{background:#202025;transition-duration:var(--t-press)}
body:not(.cad-open) :is(.gcard,.scard,.add-row):active{transform:scale(.99);transition:transform var(--t-press) ease-out}
body:not(.cad-open) .combo-opt:active{background:#2e2e34}
body:not(.cad-open) :is(.link,.linkbtn):active{opacity:.6}
body:not(.cad-open) .tbl tbody tr:active td{background:#202025}
/* a switch's thumb stretches toward where it is going while held, the way a physical one gives */
body:not(.cad-open) .toggle::after{transition:transform var(--t-move) var(--spring),width .16s var(--ease),background-color .2s var(--ease)}
body:not(.cad-open) .toggle:active{transform:none}
body:not(.cad-open) .toggle:active::after{width:24px}
body:not(.cad-open) .toggle[aria-checked="true"]:active::after{transform:translateX(16px)}

/* a change waiting on the bot */
body:not(.cad-open) .btn[aria-busy="true"]{cursor:progress;opacity:.7}
body:not(.cad-open) .inline .done-note{font-size:.8125rem;color:var(--ink-2)}
body:not(.cad-open) .inline .done-note.ok{color:var(--ok)}
body:not(.cad-open) .inline .done-note.bad{color:var(--bad)}
body:not(.cad-open) .field .err{margin-top:6px}
body:not(.cad-open) .inp[aria-invalid="true"]{border-color:rgba(255,107,107,.55)}

/* save bar: rises from the bottom edge and sinks back into it */
body:not(.cad-open) .savebar{transition:transform var(--t-move) var(--spring),opacity .2s var(--ease),border-color .2s var(--ease)}
body:not(.cad-open) .savebar.done.ok{border-color:rgba(62,207,142,.45)}
body:not(.cad-open) .savebar.done.bad{border-color:rgba(255,107,107,.45)}
body:not(.cad-open) .savebar.done span{color:var(--ink)}

/* pickers open out of their field */
body:not(.cad-open) .combo-list{transform-origin:top center;
  transition:opacity .16s var(--ease),transform .22s var(--spring),display .22s allow-discrete,overlay .22s allow-discrete}
body:not(.cad-open) .combo-list[hidden]{display:none!important;opacity:0;transform:translateY(-4px) scaleY(.97);pointer-events:none}
@starting-style{body:not(.cad-open) .combo-list:not([hidden]){opacity:0;transform:translateY(-4px) scaleY(.97)}}

/* toasts slide in from their corner and fade back out of it (app.js adds .in / drops it) */
.toast{animation:none;opacity:0;transform:translateY(-8px);transition:opacity .22s var(--ease),transform var(--t-move) var(--spring)}
.toast.in{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateY(-8px);transition-duration:.18s,.22s;pointer-events:none}

/* dialog dims the page and grows out of the middle; closing runs the same path backwards */
body:not(.cad-open) .ccdlg{opacity:0;transform:scale(.96);
  transition:opacity .2s var(--ease),transform .26s var(--spring),display .26s allow-discrete,overlay .26s allow-discrete}
body:not(.cad-open) .ccdlg[open]{opacity:1;transform:none}
@starting-style{body:not(.cad-open) .ccdlg[open]{opacity:0;transform:scale(.96)}}
body:not(.cad-open) .ccdlg::backdrop{background:rgba(0,0,0,0);transition:background-color .26s var(--ease),display .26s allow-discrete,overlay .26s allow-discrete}
body:not(.cad-open) .ccdlg[open]::backdrop{background:rgba(0,0,0,.6)}
@starting-style{body:not(.cad-open) .ccdlg[open]::backdrop{background:rgba(0,0,0,0)}}

/* reduced motion: app.css switches animation off; feedback stays as a short cross-fade */
@media (prefers-reduced-motion:reduce){
  .toast,.toast.in,.toast.out{transform:none!important;transition:opacity .18s ease!important}
  body:not(.cad-open) .savebar{transform:translate(-50%,0)!important;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s!important}
  body:not(.cad-open) .savebar.show{opacity:1;visibility:visible;transition-delay:0s!important}
  body:not(.cad-open) .ccdlg,body:not(.cad-open) .ccdlg[open]{transform:none;transition:opacity .18s ease,display .18s allow-discrete,overlay .18s allow-discrete!important}
  body:not(.cad-open) .ccdlg::backdrop{transition:background-color .18s ease,display .18s allow-discrete,overlay .18s allow-discrete!important}
  body:not(.cad-open) .combo-list{transform:none!important;transition:opacity .15s ease,display .15s allow-discrete!important}
  button:not([disabled]):active,body:not(.cad-open) :is(.switch,.gcard,.scard,.add-row):active{transform:none!important;opacity:.75}
}
@media (prefers-reduced-transparency:reduce){
  .nav,.topline,.ccdlg::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-contrast:more){
  body:not(.cad-open){--ink-2:var(--ink);--ink-3:var(--ink);--muted:var(--ink);--muted-2:var(--ink);
    --rule:rgba(255,255,255,.3);--rule-2:rgba(255,255,255,.2);--line:rgba(255,255,255,.3);--line-strong:rgba(255,255,255,.5)}
  body:not(.cad-open) :is(.inp,.sel,.txt-a,.combo-in,.combo.multi){border-color:rgba(255,255,255,.5)}
  .toast,.ccdlg{border-color:rgba(255,255,255,.6)}
}

/* ---------------------------------------------------------------- sign-in
   A real sign-in page: the action on the left, the product on the right. */
.signin{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr);background:#0f0f11;color:#ececef;font-family:var(--pcd-sans)}
@media (min-width:960px){.signin{grid-template-columns:minmax(420px,5fr) 7fr}}
.signin-form{display:flex;flex-direction:column;padding:clamp(24px,4vw,56px);min-height:100%;overflow:auto}
.signin-brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:#ececef;text-decoration:none;align-self:flex-start}
.signin-logo{display:block;width:28px;height:28px;margin:0}
.signin-logo img{display:block;width:28px;height:28px;outline:none}
.signin-body{margin:auto 0;max-width:400px;padding:48px 0}
.signin-body h1{font-size:clamp(28px,2.4vw,38px);line-height:1.15;letter-spacing:-.02em;font-weight:700;margin:0 0 12px}
.signin-lede{color:#a1a1aa;font-size:15.5px;line-height:1.6;margin:0 0 28px}
.signin-discord{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:8px;background:#5865f2;color:#fff;font-weight:600;font-size:15px;text-decoration:none;transition:background-color .15s}
.signin-discord:hover{background:#4752c4}
.signin-discord:focus-visible{outline:2px solid #fff;outline-offset:3px}
.signin-fine{margin:16px 0 0;font-size:13px;line-height:1.5;color:#71717a}
.signin-foot{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px}
.signin-foot a{color:#a1a1aa;text-decoration:none}
.signin-foot a:hover{color:#ececef;text-decoration:underline;text-underline-offset:3px}
.signin-side{display:none}
@media (min-width:960px){
  .signin-side{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:clamp(32px,4vw,72px);background:#141417;border-left:1px solid #26262b;overflow:hidden}
}
.signin-shot{border-radius:12px;overflow:hidden;border:1px solid #2a2a30;box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
.signin-shot img{display:block;width:100%;height:auto}
.signin-points{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:#c4c4ca;font-size:14.5px}
.signin-points li{display:flex;gap:10px;align-items:baseline}
.signin-points li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:#d01418;transform:translateY(-2px)}
@media (min-width:2200px){.signin{zoom:1.3}}

/* A disabled primary (nothing to save yet) reads as a quiet button, not a faded red one per row. */
body:not(.cad-open) .btn.primary[disabled]{background:#1c1c20!important;border-color:var(--line-strong)!important;color:var(--ink-3)!important;opacity:1}
/* Keep the command readable: below a wide main column the picker drops under its description. */
@media (max-width:1280px){
  body:not(.cad-open) .perm-row{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
  body:not(.cad-open) .perm-row > :nth-child(2){grid-column:1;grid-row:2}
  body:not(.cad-open) .perm-row > :last-child{grid-column:2;grid-row:2;align-self:center}
}

/* Branding page: a colour picker beside its hex code, and banner links with a live preview. */
body:not(.cad-open) .colour-pick{display:flex;align-items:center;gap:8px}
body:not(.cad-open) .colour-pick .swatch{width:38px;height:38px;padding:3px;border:1px solid var(--line-strong);border-radius:var(--radius-input);background:#1c1c20;cursor:pointer}
body:not(.cad-open) .colour-pick .swatch::-webkit-color-swatch-wrapper{padding:0}
body:not(.cad-open) .colour-pick .swatch::-webkit-color-swatch{border:0;border-radius:4px}
body:not(.cad-open) .colour-pick .swatch::-moz-color-swatch{border:0;border-radius:4px}
body:not(.cad-open) .colour-pick .hex{width:7.5rem;font-family:var(--pcd-mono)}
body:not(.cad-open) .banner-prev:not(:empty){margin-top:10px}
body:not(.cad-open) .banner-prev img{display:block;max-width:100%;max-height:220px;border-radius:var(--radius-sm);border:1px solid var(--rule);background:#1c1c20}
body:not(.cad-open) .pill.ok{color:var(--ok);border-color:rgba(62,207,142,.4)}
/* Every dashboard select gets one chevron, 14px in from the edge and centred, instead of the browser's own arrow,
   which macOS pins to the corner (owner, 2026-10-16: "the arrow is a little off"). */
body:not(.cad-open) select:is(.inp,.sel){-webkit-appearance:none;appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 12px}