/* ── P&CD v2 layer ─────────────────────────────────────────────────────────────
   One sheet, appended last on every pcdev.info property so the cascade ends here.

   What it fixes, and which rule-set asked for it:
     impeccable  no purple/cyan-on-dark, no radial halos or glow shadows, no pulsing
                 dots, no auto-marquees, no gradient text, no overused typeface,
                 body text >= 16px, functional text >= 13px, contrast >= 4.5:1,
                 measure <= 65ch, no bounce/elastic easing, no layout-property motion.
     make-interfaces-feel-better
                 antialiased root, text-wrap balance/pretty, tabular numbers, image
                 outlines in pure white at 10%, scale(.96) on press, 40px hit areas,
                 interruptible transitions on exact properties, concentric radii.
     transitions.dev
                 motion tokens instead of literal durations; every hover change is
                 covered by its transition; reduced motion keeps the static cue.
   Tokens are defined on :root so site sheets that already use --ink, --muted etc.
   pick them up without edits.                                                   */

:root{
  /* colour: the house mono, with the quiet greys lifted to pass AA on #0b0b0c */
  --bg:#0b0b0c; --bg-2:#0f0f11; --bg-3:#141417;
  --surface:#141417; --surface-2:#1a1a1e; --surface-3:#222227;
  --ink:#ededef; --ink-2:#a6a6ae; --ink-3:#8b8b94; --ink-4:#5c5c64;
  --txt:#ededef; --txt-2:#b4b4bd; --muted:#a6a6ae; --muted-2:#8b8b94;
  --rule:rgba(255,255,255,.10); --rule-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --line-strong:rgba(255,255,255,.22);
  /* the one accent is the ink itself; product colour stays inside product mock-ups */
  --accent:#ededef; --brand:#ededef; --brand-lt:#ededef; --purple:#ededef; --purple-lt:#ededef;
  --brand-soft:rgba(255,255,255,.08);

  /* type */
  --pcd-sans:'Schibsted Grotesk','Schibsted Grotesk Fallback',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --pcd-mono:'IBM Plex Mono','IBM Plex Mono Fallback',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:var(--pcd-sans); --mono:var(--pcd-mono); --p-sans:var(--pcd-sans); --p-mono:var(--pcd-mono);

  /* radii: outer = inner + padding */
  --r-1:6px; --r-2:10px; --r-3:16px; --r-4:22px;

  /* depth: one ring in dark mode, never a coloured glow */
  --shadow-border:0 0 0 1px oklch(1 0 0 / .08);
  --shadow-border-hover:0 0 0 1px oklch(1 0 0 / .14);
  --shadow-lift:0 0 0 1px oklch(1 0 0 / .08), 0 18px 40px -24px oklch(0 0 0 / .9);

  /* motion tokens (transitions.dev scale) */
  --duration-instant:0ms; --duration-fast:120ms; --duration-base:200ms;
  --duration-slow:320ms; --duration-slower:560ms;
  --ease:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  /* sites that defined an overshoot ease get a plain one back */
  --ease-spring:var(--ease);
}

/* ---------- base ---------- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background:var(--bg);color:var(--ink);font-family:var(--pcd-sans) !important;font-size:1rem;line-height:1.55}
button,input,select,textarea{font-family:var(--pcd-sans) !important}
code,pre,kbd,samp,.mono,.cnt,.hx-pri,.hx-chip,.hx-age,.hx-clock,.hx-ch b,.hx-ch span,.hx-lbl,.hx-key,.price-robux,.order-status{
  font-family:var(--pcd-mono) !important}
.label,.eyebrow,.kicker,.sectitle,.tier,.pill,.rc-state,.rolechip,.p-live,.p-stat span,.stat .label,.marquee span,.fineprint,.paypal-discount,
.hx-h,.hx-live,.hx-tag,.hx-float .k,.brand i,.mq-tag,.mq-name,.reel-name,.pl-head .label,.pl-time,.dash .tile small{font-family:var(--pcd-sans) !important}
h1,h2,h3,h4{text-wrap:balance;letter-spacing:-.025em}
p,li,figcaption,blockquote,summary,dd{text-wrap:pretty}
::selection{background:var(--ink);color:var(--bg)}

/* ---------- the quiet greys, floored for AA ---------- */
.label,.eyebrow,.kicker,.sectitle,.sub,.lede,.fine,.note,.mini,.meta,.cnt,.rc-reqs,.rc-blurb,.blurb,
.step-b span,.reqs li,.shutrow span,.bot p,.cell p,.feature p,.frow p,.frow li,.work p,.card p,.step p,
.price-note,.fineprint,.incl li,.prose p,.prose li,details .a,details p,.foot a,footer,footer a,
.p-stat span,.stat span,.stat .label,.hx .fine,.hx-loc,.hx-age,.hx-unit .nm,.hx-float span,.mq-tag,
.brand i,.who,.nav-links a,.top nav a,.pl-sub,.pl-time,.marquee span{color:var(--ink-2)}
.label,.eyebrow,.kicker,.sectitle,.p-stat span,.stat .label,.mq-tag,.brand i,.hx-h,.hx-float .k,.pl-head .label{color:var(--ink-3)}
footer,footer a,.foot a{color:var(--ink-2)}
footer a:hover,.foot a:hover,.nav-links a:hover,.top nav a:hover{color:var(--ink)}

/* ---------- type floors ----------
   Functional text never below 13px; body copy never below 14px; mono labels lose the
   wide tracking and the shouting, so they read as quiet metadata rather than badges. */
.label,.eyebrow,.kicker,.sectitle,.p-stat span,.stat .label,.brand i,.tier,.pill,.rc-state,.rolechip,.cnt,
.mq-tag,.mq-name,.hx-h,.hx-pri,.hx-chip,.hx-age,.hx-live,.hx-lbl,.hx-tag,.hx-float .k,.hx-loc,.hx-unit .cs,.hx-unit .nm,
.hx-st,.hx-pill span,.hx-ch b,.hx-ch span,.hx-tx,.reel-name,.price-robux,.fineprint,.paypal-discount,.order-status,
.pl-head .label,.pl-time,.dash .tile small,.dash,.step-n,.q .n,.rc-foot,.rc-reqs,.rc-go,.note,.mini,.meta,
.marquee span,.case-grid span,.case-reason span,.case-foot,.case-who .dim,.logline,.logline time,.dashrow small,
.shot-chrome span,.feature .num,.cmdgroup code,.step code,.mq-tag{font-size:0.8125rem}
.label,.eyebrow,.kicker,.sectitle,.p-live,.p-stat span,.stat .label,.brand i,.marquee span,.hx-eyebrow,.hx-h,
.hx-float .k,.pl-head .label,.rc-state,.rolechip,.tier,.pill,.mq-tag,.mq-name,.case-grid span,.case-reason span,
.dash .tile small{letter-spacing:.02em;text-transform:none;font-weight:500}
.label,.eyebrow,.kicker,.sectitle{font-size:0.8125rem;margin-bottom:8px}
.kicker::before{display:none}
.sub,.lede{font-size:1.0625rem}
.bot p,.cell p,.feature p,.frow p,.frow li,.card p,.step p,.work p,.rc-blurb,.blurb,.step-b span,.reqs li,.shutrow span,
.incl li,.hx-unit .nm,.hx-float span,.hx-inc b,.row .copy p,.ticks li,.strip span,.strip b,.cmd p,.sub-row,.sub-row span{font-size:0.9375rem}
.nav-links a,.top nav a,footer,footer a,.foot a,.btn-sm,.btn.sm,.navcta,.navghost,.who,label,.lab,.q label{font-size:0.875rem}
.prose,.doc .prose,.prose p,.prose li,details .a,details p,.lede,.sub,.section-lede,.hero-sub,.row .copy p,.price-note,.incl{max-width:62ch}

/* ---------- surfaces ---------- */
.card,.feature,.cmdgroup,.callout,.step,.jobcard,.rolecard,.panel,.tile,.work,.bots,.price-card,.stats,.p-stats,.shot,.frow-art,.dc,.dash,.player{
  border-radius:var(--r-3)}
.btn,.cta,.navcta,.navghost,.tab,.rolebtn,.togglebtn,.mini,.ph,input,textarea,select,.search,.filters button{border-radius:var(--r-2)}
.btn.sm,.btn-sm,.tier,.pill,.rc-state,.rolechip,code,.hx-chip,.hx-pri{border-radius:var(--r-1)}
img:not(.brand img):not(.mark img):not(.av img):not(.hx-top img):not(.dc .av img){outline:1px solid oklch(1 0 0 / .1);outline-offset:-1px}
.bot-shot img,.work-shot img,.botcard img,.mq-item img,.reel-card img{outline:none}
.bot-shot,.work-shot,.botcard,.mq-item,.reel-card,.herofilm{outline:1px solid oklch(1 0 0 / .1);outline-offset:-1px}

/* ---------- buttons: one plate, one ghost, no glow ---------- */
.btn,.cta,.navcta,.rolebtn,.btn.primary,.btn-primary,.cta.primary,a.primary{
  box-shadow:none;text-shadow:none;
  transition-property:background-color,border-color,color,box-shadow,transform,opacity;
  transition-duration:var(--duration-base);transition-timing-function:var(--ease)}
html:not(.pcd-brand) :is(.btn-primary,.btn.primary,.cta.primary,a.primary,.navcta,.rolebtn){
  background:var(--ink) !important;border-color:var(--ink) !important;color:var(--bg) !important;background-image:none !important}
html:not(.pcd-brand) :is(.btn-primary,.btn.primary,.cta.primary,a.primary,.navcta,.rolebtn):hover{
  background:#fff !important;border-color:#fff !important;color:var(--bg) !important;box-shadow:none !important}
.btn-accent{background:var(--ink) !important;border-color:var(--ink) !important;color:var(--bg) !important}
.btn:active,.cta:active,.navcta:active,.rolebtn:active,button:not([disabled]):active{transform:scale(.96)}
.btn:disabled,.btn[aria-disabled="true"],.btn[disabled]{opacity:.45;transform:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px}
input:focus,textarea:focus,select:focus,.search:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}

/* hit areas: nav and footer links are short text, so give them the height */
.nav-links a,.top nav a,.foot a,footer a,.toc a{display:inline-flex;align-items:center;min-height:40px}
.pl-ctl button{min-width:40px;min-height:40px}

/* ---------- motion: every hover change is covered, nothing overshoots ---------- */
a,.card,.feature,.cmdgroup,.step,.jobcard,.rolecard,.work,.bot,.cell,.row,.tab,.portal,.cmd,.reel-card,.botcard,.dashrow,.logline,summary,.mq-item,.filters button,.top nav a,.nav-links a,.foot a{
  transition-property:color,background-color,border-color,box-shadow,opacity,transform;
  transition-duration:var(--duration-base);transition-timing-function:var(--ease)}
.card:hover,.feature:hover,.step:hover,.jobcard:hover,.rolecard:hover,.work:hover,.cmd:hover,.cmdgroup:hover{
  transform:none;border-color:var(--line-strong);box-shadow:none}
.bot:hover .bot-shot img,.work:hover .work-shot img,.reel-card:hover img,.botcard:hover img{opacity:1}
.rolecard::before{transition-property:opacity;top:16px;bottom:16px}
.rolecard:hover::before{top:16px;bottom:16px}
.bar:hover i,.bar:hover .buf,.bar:hover .prog{height:auto}

/* ---------- the decorations that read as generated ---------- */
.glow,.hx-glow,.spotlight,.grain,.hero-bg,body::before,.hero::before,.hero::after,.hx-bg,.hx-scan,.hx-win::after,.player::before{display:none !important}
.live,.dot,.p-live::before,.eyebrow i,.hx-eyebrow i,.hx-live i,.hx-tx i,.hx-pill i,.hx-ring,.hx-float,.hx-inc.p1,.hx-mk,.hx-u{animation:none !important}
.hx-ring{display:none}
.live,.dot,.eyebrow i,.hx-eyebrow i,.hx-live i,.hx-tx i,.hx-pill i,.hx-ping,.hx-u,.p-live::before{box-shadow:none !important}
.hx-win,.hx-float,.hx-float .ic,.btn.primary,.hero .dc,.dc,.dash,.shot,.frow-art,.player,.pl-play,.pl-ctl .pl-play,.cta.primary,.viz i,.hx-f1 .ic{
  text-shadow:none !important;box-shadow:var(--shadow-border) !important}
.hx-win{box-shadow:var(--shadow-lift) !important}
h1,h2,.wordmark,.claim,h1 .letter span,h1.grad .letter span{background-image:none !important;-webkit-text-fill-color:currentColor !important;color:var(--ink);filter:none !important;text-shadow:none !important}
.hero-sub em,h1 em,h2 em,.label-accent,.stat:first-child b,.p-stat:first-child b,.rail .num,.step .n,.q .n,.step-n,.rc-go,.eyebrow,.kicker,.portal .url,.prose a,.mcnote a{color:var(--ink)}
.rc-go,.portal .url,.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.pl-art{background:var(--bg-3) !important}
.pl-art::after{display:none}
.pl-fill,.bar>i{background:var(--ink) !important}
.pl-ctl .pl-play{background:var(--ink) !important;color:var(--bg) !important}
.viz i{background:var(--ink-3) !important;opacity:.9;box-shadow:none !important}
.viz:hover i{background:var(--ink) !important}
.cell::before,.cell::after,.feature::before{display:none}
html:not(.pcd-brand) :is(.cta.primary,.cta.primary:hover){background:var(--ink) !important;color:var(--bg) !important;background-image:none !important}
.status{border-color:var(--rule) !important;background:var(--bg-2) !important;color:var(--ink-2) !important}
/* craft floor: a label directly above a heading is an eyebrow; the heading carries itself */
.label:has(+ h1, + h2, + h3, + .h1, + .h2),.eyebrow:has(+ h1, + h2, + h3, + .h1, + .h2),.kicker:has(+ h2, + h3),.sectitle:has(+ h2),.cell .label:has(+ h2),
p.label[data-enter]:has(+ h1){display:none}
.rail{display:none}
.row:has(> .rail){grid-template-columns:1fr}
.doc-body > .toc{display:none} .doc-body:has(> .toc){grid-template-columns:1fr}
/* hero figures read as one proof line, not a metric template */
.stats,.p-stats{display:flex !important;flex-wrap:wrap;gap:8px 28px;border:0 !important;border-radius:0;padding:0 !important;background:none !important;margin-top:26px;overflow:visible;box-shadow:none}
.stats .stat,.p-stats .p-stat{display:flex;flex-direction:row;align-items:baseline;gap:8px;padding:0 !important;border:0 !important;background:none;text-align:left}
.stats .stat b,.p-stats .p-stat b{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2;color:var(--ink)}
.stats .stat .label,.stats .stat span,.p-stats .p-stat span{font-size:0.9375rem;color:var(--ink-2);margin:0;letter-spacing:0;line-height:1.2}
/* display type: capped at 6rem, tracking never tighter than -0.04em */
.claim,.wordmark,.hx h1,h1.claim{font-size:clamp(2.75rem,8vw,6rem);letter-spacing:-.04em}
h1,h2{letter-spacing:max(-.04em,var(--pcd-track,-.025em))}
/* colour on an edge is a hairline, not a stripe (Discord embed mocks keep their 4px: that is the product) */
.callout{border-left-width:1px}
/* a grid of equal cards is not a page structure: the "small things" read as a two-column list */
section .grid:has(> .card){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
section .grid > .card{background:none;border:0;border-radius:0;padding:18px 0;border-bottom:1px solid var(--rule);box-shadow:none}
section .grid > .card:hover{background:none;border-color:var(--rule)}
@media (max-width:720px){section .grid:has(> .card){grid-template-columns:1fr}}
/* browser surfaces carry the design too */
html{caret-color:var(--ink);scrollbar-color:var(--ink-4) transparent;scrollbar-width:thin;accent-color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--ink-4);border-radius:10px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
::placeholder{color:var(--ink-3)}
a{text-underline-offset:3px;text-decoration-thickness:1px}

/* marquees stop moving and become a wrapped list you can read at your own pace */
.marquee{mask-image:none;-webkit-mask-image:none;overflow:visible}
.mq-track,.marquee-track{animation:none !important;width:auto;flex-wrap:wrap;justify-content:center;gap:12px 16px;transform:none}
.marquee-track>span:nth-child(n+2){display:none}
.mq-track>.mq-item:nth-child(n+5){display:none}
.marquee span::after{content:none}
.marquee span{letter-spacing:.02em;text-transform:none;font-size:0.8125rem;display:inline}
.mq-item{width:clamp(200px,22vw,300px)}

/* ---------- motion support ---------- */
/* Cross-page fades for same-origin navigation (Chromium MPA view transitions). */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation-duration:var(--duration-fast) }
::view-transition-new(root){ animation-duration:var(--duration-base) }
/* SplitText masks: each headline line slides up inside its own clipped box. */
.pcd-line{ will-change:transform }
[data-tilt]{ transform:scale(var(--s,1)) rotateY(var(--ry,-11deg)) rotateX(var(--rx,4deg)) }
/* nav hides by transform only; keep it layered above everything while it moves */
body > nav, header.top, nav.nav{ will-change:transform }


/* ---------- mobile menu (pcd-menu.js) ----------
   Below 820px the link row becomes a panel under the bar, opened by one button. */
.pcd-burger{display:none;width:44px;height:44px;margin-left:auto;padding:0;border:1px solid var(--rule);border-radius:var(--r-2);
  background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.pcd-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--duration-base) var(--ease),opacity var(--duration-fast)}
html.pcd-menu-open .pcd-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
html.pcd-menu-open .pcd-burger span:nth-child(2){opacity:0}
html.pcd-menu-open .pcd-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:820px){
  .pcd-burger{display:flex}
  .pcd-menu{position:fixed;left:0;right:0;top:var(--pcd-bar,60px);z-index:60;display:flex !important;flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:8px var(--gut,20px) 16px;background:var(--bg);border-bottom:1px solid var(--rule);
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;overflow:visible;
    transition:transform var(--duration-base) var(--ease),opacity var(--duration-base) var(--ease),visibility 0s linear var(--duration-base)}
  html.pcd-menu-open .pcd-menu{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .pcd-menu a,.pcd-menu .btn{display:flex !important;min-height:48px;align-items:center;font-size:1rem;padding:0 4px;border-bottom:1px solid var(--rule-2);width:auto}
  .pcd-menu a:last-child{border-bottom:0}
  .pcd-menu .nav-cta,.pcd-menu .navcta{margin-top:10px;justify-content:center;border-bottom:0}
  .nav-links a:not(.nav-cta){display:flex}
  .top nav{display:flex}
  .top .btn.ghost{display:inline-flex}
}

/* ---------- reduced motion keeps every static cue ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
  .btn:active,.cta:active,button:active{transform:none}
}
/* ── end P&CD v2 layer ── */

/* ── P&CD operate layer ────────────────────────────────────────────────────────
   Appended after pcd.css on every signed-in surface: the apply/staff/dev/bot panels,
   the CashFlow panel, the client hub, the County Control dashboard, Astro's panel and
   Vybe's control panel. These are Operate surfaces: the tool should disappear into
   the task. One sans for everything, a fixed rem scale, one component vocabulary, and
   colour only where it means something (ok / warning / danger / selected).

   The shared panel vocabulary (.card .sectitle .stat .pill .tab .note .empty .mini
   .danger .sw .tier .who) was written by one hand across five panels, so one sheet
   can carry all of them; the custom apps (CAD, Astro panel, Vybe panel) are fitted by
   token overrides at the end.                                                        */

:root{
  --ok:#3ecf8e; --ok-bg:rgba(62,207,142,.12); --ok-line:rgba(62,207,142,.35);
  --warn:#f5b740; --warn-bg:rgba(245,183,64,.12); --warn-line:rgba(245,183,64,.35);
  --bad:#ff6b6b; --bad-bg:rgba(255,107,107,.12); --bad-line:rgba(255,107,107,.35);
  --up:var(--ok); --down:var(--bad); --gold:var(--warn); --good:var(--ok);
  --blue:#ededef; --blue-lt:#ededef; --accent-weak:rgba(255,255,255,.08);
  --card:var(--bg-2); --card-2:var(--bg-3); --panel:var(--bg-2);
  --radius:14px; --radius-sm:10px; --radius-input:10px; --radius-btn:10px;
  --r-sm:8px; --r-md:10px; --r-lg:14px;
  --shadow:var(--shadow-lift);
  --text:var(--ink);
}
body{font-size:0.9375rem;line-height:1.5}
body::before{display:none !important}

/* ---------- type: one sans, fixed scale, labels in sentence case ---------- */
h1,.h1{font-size:1.75rem;line-height:1.15;letter-spacing:-.02em;font-weight:650}
h2,.h2{font-size:1.25rem;line-height:1.25;letter-spacing:-.015em;font-weight:650}
h3,h4,.h3{font-size:1rem;line-height:1.3;letter-spacing:-.01em;font-weight:600}
.sectitle,.eyebrow,.phead,label,.lab,th,.stat .k,.k,.tier,.pill,.rc-state,.rolechip,.brand i,.label{
  font-family:var(--pcd-sans) !important;letter-spacing:0;text-transform:none}
.sectitle{font-size:0.8125rem;font-weight:600;color:var(--ink-2);margin:28px 0 10px;display:flex;align-items:center;gap:12px}
.sectitle::after{content:"";flex:1;height:1px;background:var(--rule)}
.sectitle:first-child{margin-top:0}
.eyebrow{font-size:0.8125rem;color:var(--ink-3);margin-bottom:6px}
.sub,.lede,.hint,.note,.meta,.mini,.muted,.small,.empty-hint{font-size:0.875rem;color:var(--ink-2)}
.hint,.meta,.cnt,.rc-reqs{font-size:0.8125rem;color:var(--ink-3)}
.mono,code,.codes,.hx-chip,td.num,.num,.id{font-family:var(--pcd-mono) !important;font-variant-numeric:tabular-nums}
.brand b{font-size:0.9375rem;font-weight:650}
.brand i{font-size:0.75rem;color:var(--ink-3);letter-spacing:0}

/* ---------- surfaces ---------- */
.card,.panel,.gcard,.server{background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:none;transform:none}
.card{padding:20px}
.card:hover,.panel:hover{transform:none}
.gcard:hover,.server:hover{border-color:var(--line-strong);background:var(--bg-3);transform:none}
.card .card,.panel .card{background:var(--bg-3);border-radius:var(--r-md)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px;border:0;padding:0}
.stat{background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-md);padding:14px 16px;display:block}
.stat::after,.stat::before{display:none}
.stat .k{font-size:0.8125rem;color:var(--ink-3);margin-bottom:6px}
.stat .v{font-size:1.5rem;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.stat b{font-size:1.5rem}

/* ---------- controls: one shape, every state ---------- */
.btn,.mini,.danger,.navcta,.navghost,.rolebtn,.togglebtn,.pbtn,button.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 16px;
  border-radius:var(--r-md);font-size:0.875rem;font-weight:600;letter-spacing:0;text-transform:none;line-height:1;
  border:1px solid var(--rule);background:var(--bg-3);color:var(--ink);cursor:pointer;text-decoration:none;
  transition-property:background-color,border-color,color,box-shadow,transform,opacity;
  transition-duration:var(--duration-fast);transition-timing-function:var(--ease)}
.btn:hover,.navghost:hover,.togglebtn:hover,.pbtn:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink);transform:none}
.mini,.navcta,.rolebtn,.btn.primary,.btn-primary{background:var(--ink) !important;border-color:var(--ink) !important;color:var(--bg) !important}
.mini:hover,.navcta:hover,.rolebtn:hover,.btn.primary:hover,.btn-primary:hover{background:#fff !important;border-color:#fff !important;transform:none}
.danger,.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad-line)}
.danger:hover,.btn.danger:hover{background:var(--bad-bg);border-color:var(--bad);transform:none}
.btn.sm,.btn-sm{min-height:32px;padding:0 12px;font-size:0.8125rem}
.btn.lg{min-height:44px;padding:0 20px;font-size:0.9375rem}
.btn:active,.mini:active,.danger:active,.navcta:active,.rolebtn:active{transform:scale(.97)}
.btn[disabled],.mini[disabled],button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn[aria-busy="true"]{color:transparent;position:relative}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:currentColor;color:var(--ink);animation:pcd-spin .7s linear infinite}
.link{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.link:hover{color:var(--ink)}

/* tabs read as one segmented control, the active segment is the plate */
.tabs{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--bg-2);margin-bottom:20px}
.tab{border:0;border-radius:7px;background:transparent;padding:7px 14px;font-size:0.84375rem;font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease)}
.tab:hover{color:var(--ink);background:var(--bg-3);border-color:transparent}
.tab.on{background:var(--ink) !important;color:var(--bg) !important;font-weight:600;border-color:transparent !important}

/* fields */
input,textarea,select,.search{min-height:40px;background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-md);color:var(--ink);
  padding:0 12px;font-size:0.875rem;transition:border-color var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease)}
textarea{padding:10px 12px;min-height:96px;line-height:1.5}
input:hover,textarea:hover,select:hover{border-color:var(--line-strong)}
input:focus,textarea:focus,select:focus,.search:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);outline:none}
input[aria-invalid="true"],textarea[aria-invalid="true"],.field.err input{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
input:disabled,textarea:disabled,select:disabled{opacity:.5;cursor:not-allowed}
label,.lab{display:block;font-size:0.8125rem;font-weight:500;color:var(--ink-2);margin-bottom:6px}
::placeholder{color:var(--ink-3)}
/* switches: the accent is the ink */
.sw{width:38px;height:22px;border-radius:999px;background:var(--line-strong);position:relative;flex:none;cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;
  transition:transform var(--duration-fast) var(--ease)}
.sw.on{background:var(--ink)}
.sw.on::after{transform:translateX(16px);left:3px;background:var(--bg)}

/* status: colour means something, text stays readable */
.pill,.rc-state,.rolechip,.tier{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:0 9px;border-radius:999px;
  font-size:0.75rem;font-weight:500;background:var(--bg-3);color:var(--ink-2);border:1px solid var(--rule);white-space:nowrap}
.pill.p-open,.pill.p-accepted,.rc-state.on,.p-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.pill.p-free,.pill.p-submitted,.p-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.pill.p-denied,.p-bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.pill.p-used{opacity:.7}
.tier.sudo{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:none;animation:none}
.dot.up{background:var(--ok);box-shadow:none}
.ok{color:var(--ok)} .no,.err{color:var(--bad)}
.note{display:none;margin-top:12px;padding:10px 12px;border-radius:var(--r-md);font-size:0.84375rem;border:1px solid var(--rule);background:var(--bg-2);color:var(--ink-2)}
.note.ok{display:block;background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.note.err{display:block;background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.note.warn{display:block;background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}

/* tables: dense, aligned, quiet headers */
table{width:100%;border-collapse:collapse;font-size:0.875rem}
th{text-align:left;font-size:0.78125rem;font-weight:500;color:var(--ink-3);padding:0 10px 8px;border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--rule-2);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,255,255,.02)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* loading and empty: teach, do not spin in the middle of content */
.spin{width:22px;height:22px;border:2px solid var(--rule-2);border-top-color:var(--ink);border-radius:50%;animation:pcd-spin .7s linear infinite;margin:48px auto}
@keyframes pcd-spin{to{transform:rotate(360deg)}}
.skeleton,.sk{display:block;border-radius:6px;background:linear-gradient(90deg,var(--bg-3) 25%,var(--surface-3) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:pcd-shimmer 1.4s linear infinite;min-height:14px}
@keyframes pcd-shimmer{to{background-position:-200% 0}}
.empty{padding:32px 20px;text-align:center;color:var(--ink-2);font-size:0.875rem;border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:transparent}
.empty b,.empty strong{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.fade{animation:pcd-fade .2s var(--ease) both}
@keyframes pcd-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.toast,.toasts > *{background:var(--bg-3);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:var(--shadow-lift);color:var(--ink);font-size:0.875rem}

/* chrome */
.nav,header.top,.topline{background:rgba(11,11,12,.86);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--rule)}
.who{font-size:0.84375rem;color:var(--ink-2)}
.who img{width:26px;height:26px;border-radius:50%;border:1px solid var(--rule)}
footer{color:var(--ink-3);font-size:0.8125rem;border-top:1px solid var(--rule)}
.side,.sidebar,.dash .side{background:var(--bg-2);border-right:1px solid var(--rule)}
.side a,.side span,.sidebar a{border-radius:8px;color:var(--ink-2);font-weight:500}
.side a:hover,.sidebar a:hover{color:var(--ink);background:var(--bg-3)}
.side a.on,.side .on,.sidebar a.on,.sidebar .on{background:var(--ink);color:var(--bg);font-weight:600}
.codes{background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-md);font-family:var(--pcd-mono);font-size:0.875rem;line-height:2}

/* apply panel role cards */
.jobcard,.rolecard{background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-lg)}
.rolecard::before,.jobcard .rc-bar{width:1px;opacity:.9}
.shutrow{border-left-width:1px}
.steps li{background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-lg)}
.step-n{font-family:var(--pcd-sans) !important;font-size:0.8125rem;color:var(--ink-3);letter-spacing:0}
.q .n{font-family:var(--pcd-sans) !important;font-size:0.78125rem;color:var(--ink-3);letter-spacing:0}
.bar{height:4px;border-radius:4px;background:var(--bg-3)} .bar>i{background:var(--ink)}
.spinner{border-color:var(--rule-2);border-top-color:var(--ink)}

/* county control dashboard: fit its tokens to the estate's */
.gcard .name,.h1{letter-spacing:-.02em}
.shell .side{background:var(--bg-2)}
.topline .brand{font-weight:650}
/* vybe control panel keeps its layout; labels drop the mono costume */
.label{font-size:0.78125rem;color:var(--ink-3);letter-spacing:0;text-transform:none;font-weight:500}
.empty-hint{color:var(--ink-3);font-size:0.84375rem}
/* boot skeleton: the shape of the page arrives before its data (replaces the spinner) */
.pcd-skel{display:grid;gap:14px;padding:4px 0 40px;animation:pcd-fade .2s var(--ease) both}
.pcd-skel .sk{display:block;border-radius:8px;background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-3) 50%,var(--bg-2) 75%);background-size:200% 100%;animation:pcd-shimmer 1.4s linear infinite}
.pcd-skel .sk.t{height:34px;width:min(360px,60%)}
.pcd-skel .sk.s{height:16px;width:min(520px,80%)}
.pcd-skel .sk-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:6px}
.pcd-skel .sk-row .sk{height:76px;border-radius:var(--r-md)}
.pcd-skel .sk.card{height:180px;border-radius:var(--r-lg)}
.pcd-skel .sk.line{height:14px}
@media (prefers-reduced-motion:reduce){.pcd-skel .sk{animation:none}}
/* ── end P&CD operate layer ── */