/* Dashboards in the pcdev world (Operate). A re-skin only: linked last on Astro's panel
   and CashFlow's panel, after each page's own sheet and the older v2 layers, so the
   cascade ends here. It changes tokens, type, shapes and states; it never hides or moves
   a control. Black and white with hairline rules and 2px corners; the one colour kept is
   red, and only for errors and destructive actions.
   The same file ships in astro-panel and pcdev-panel; keep the copies identical. */

:root{
  --bg:#0b0b0c; --bg-2:#0f0f11; --bg-3:#141417; --surface:#0f0f11; --surface-2:#141417; --surface-3:#1a1a1e;
  --ink:#ededef; --ink-2:#a1a1a8; --ink-3:#8b8b94; --text:#ededef; --txt:#ededef; --muted:#a1a1a8;
  --rule:rgba(255,255,255,.10); --rule-2:rgba(255,255,255,.055); --rule-3:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20); --card:#0f0f11;
  --accent:#ededef; --accent-weak:rgba(255,255,255,.06); --purple:#ededef; --purple-lt:#ededef; --purple-glow:#a1a1a8;
  --ok:#ededef; --ok-bg:transparent; --ok-line:rgba(255,255,255,.20);
  --warn:#ededef; --warn-bg:rgba(255,255,255,.04); --warn-line:rgba(255,255,255,.32);
  --bad:#ff6b6b; --bad-bg:rgba(255,107,107,.06); --bad-line:rgba(255,107,107,.45);
  --good:#ededef; --up:#ededef; --down:#8b8b94;
  --r-1:2px; --r-2:2px; --r-3:2px; --r-4:2px; --r-sm:2px; --r-md:2px; --r-lg:2px;
  --radius:2px; --radius-sm:2px; --radius-input:2px; --radius-btn:2px;
  --shadow:none; --shadow-lift:none; --shadow-border:none;
  --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,monospace;
  --w-ease:cubic-bezier(.16,1,.3,1); --w-spring:cubic-bezier(.2,.9,.25,1); --w-open:340ms; --w-press:100ms;
}
html{background:var(--bg);caret-color:var(--ink);accent-color:var(--ink);scrollbar-color:#2c2c31 var(--bg)}
body{background:var(--bg);color:var(--ink);font-optical-sizing:auto}
a,button,input,select,textarea,label,summary,[role=button],[role=switch],[role=option],[tabindex]{touch-action:manipulation}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:1px solid var(--ink)!important;outline-offset:3px;border-radius:0}
::-webkit-scrollbar-thumb{background:#2c2c31!important;border:3px solid var(--bg);border-radius:10px}

/* numbers that are measured read in Plex Mono, tabular */
.mono,.stat-num,.stat .v,.v,.px,.val,td.mono,.usage-n{font-family:var(--pcd-mono)!important;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------------------------------------------------------------- shapes: hairline, 2px, no depth */
.card,.panel,.server,.server-row,.stat,.stat-card,.asset,.op,.rung,.topic-box,.banner,.notice,.warnbar,.permbar,.toast,.savebar,
.combo-list,.hits,.empty,.tag,.tag-pill,.pill,.usage-bar,.usage-fill,.ruledrawer,.icon,.ph,.tab,.btn,button,input,select,textarea,.combo,.combo-in{
  border-radius:2px!important;box-shadow:none!important}
.toggle,.toggle::after,.who img{box-shadow:none!important}
.card,.stat,.stat-card,.asset,.op,.savebar,.toast{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------------------------------------------------------------- buttons */
.btn,button.btn,.navcta,.navghost,.op button,.buy,.sell,#savelogs{font-family:var(--pcd-sans)!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important}
.btn.primary,.navcta,.op button,.buy,#savelogs{background:var(--ink)!important;color:var(--bg)!important;border:1px solid var(--ink)!important}
.btn.primary:hover,.navcta:hover,.op button:hover:not(:disabled),.buy:hover:not(:disabled),#savelogs:hover:not(:disabled){background:#fff!important;border-color:#fff!important;filter:none!important}
.btn.primary:hover:not(:active),.navcta:hover:not(:active),.op button:hover:not(:active),.buy:hover:not(:active),#savelogs:hover:not(:active){transform:none!important}
.btn.ghost,.navghost,.sell{background:transparent!important;color:var(--ink)!important;border:1px solid var(--rule)!important}
.btn.ghost:hover,.navghost:hover,.sell:hover:not(:disabled){border-color:rgba(255,255,255,.32)!important}
.btn.ghost:hover:not(:active),.navghost:hover:not(:active),.sell:hover:not(:active){transform:none!important}
.btn.xs.on{color:var(--bg)!important;background:var(--ink)!important;border-color:var(--ink)!important}
.btn:disabled,button:disabled{opacity:.4}

/* ---------------------------------------------------------------- fields */
input,select,textarea,.combo-in,.combo.multi{background:var(--bg-2)!important;border:1px solid var(--rule)!important;color:var(--ink)}
.combo.multi .combo-in{border:0!important;background:none!important}
input:hover,select:hover,textarea:hover{border-color:rgba(255,255,255,.2)!important}
input:focus,select:focus,textarea:focus,.combo-in:focus,.combo.multi:focus-within{border-color:var(--ink)!important;box-shadow:none!important;outline:none}
.combo-list,.hits{background:#111113!important;border:1px solid rgba(255,255,255,.2)!important}
.combo-opt{border-radius:0!important}
.combo-opt.active,.hit:hover,.hit.sel{background:rgba(255,255,255,.07)!important}
.combo-group,.navgroup{font-size:0.75rem!important;font-weight:500!important;letter-spacing:.01em!important;text-transform:none!important;color:var(--ink-3)!important;opacity:1!important}
.combo-x{border-radius:2px!important;background:transparent!important}
.tag,.tag-pill{background:transparent!important;border:1px solid var(--rule)!important}
label{letter-spacing:.01em!important;text-transform:none!important}

/* switches: a square plate, the knob slides; on is ink */
.toggle{width:38px!important;height:22px!important;background:transparent!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:2px!important}
.toggle::after{top:3px!important;left:3px!important;width:14px!important;height:14px!important;border-radius:1px!important;background:var(--ink-3)!important;
  transition:transform .22s var(--w-spring),background-color .18s!important;transform-origin:left center}
.toggle.on{background:var(--ink)!important;border-color:var(--ink)!important}
.toggle.on::after{transform:translateX(16px)!important;background:var(--bg)!important}


/* ---------------------------------------------------------------- status: words first, colour only for errors */
.pill,.pill.pending,.pill.done,.p-pending,.p-filled,.pill.p-filled,.pill.p-pending{font:500 0.75rem/1 var(--pcd-mono)!important;letter-spacing:.02em!important;text-transform:none!important;
  padding:5px 8px!important;background:transparent!important;border:1px solid var(--rule)!important;color:var(--ink-2)!important}
.pill.done,.pill.p-filled,.p-filled{color:var(--ink)!important;border-color:rgba(255,255,255,.32)!important}
.pill.pending,.pill.p-pending,.p-pending{border-style:dashed!important}
.pill.rejected,.pill.p-rejected,.p-rejected{color:var(--bad)!important;border-color:var(--bad-line)!important;background:transparent!important}
.note{border-radius:2px!important}
.note.ok{background:transparent!important;border:1px solid var(--rule)!important;color:var(--ink-2)!important}
.note.err{background:var(--bad-bg)!important;border:1px solid var(--bad-line)!important;color:#ffb3b3!important}
.banner{background:var(--bg-2)!important;border:1px solid var(--rule)!important;color:var(--ink-2)}
.banner b{color:var(--ink)}
.banner.warn{border-color:rgba(255,255,255,.28)!important}
.banner.bad{border-color:var(--bad-line)!important}
.toast{background:#111113!important;border:1px solid rgba(255,255,255,.2)!important;color:var(--ink)}
.toast.bad{border-color:var(--bad-line)!important}
.up{color:var(--ink)!important}
.down{color:var(--ink-3)!important}
.stat-num.attn{color:var(--ink)!important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---------------------------------------------------------------- loading and empty */
.spin{border-color:var(--rule)!important;border-top-color:var(--ink)!important}
.pcd-skel .sk,.skeleton,.sk{background:var(--bg-3)!important;animation:op-breathe 1.4s ease-in-out infinite!important;border-radius:2px!important}
@keyframes op-breathe{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.pcd-skel .sk,.skeleton,.sk{animation:none!important}}
.empty{border:1px dashed rgba(255,255,255,.18)!important;background:transparent!important;color:var(--ink-2)}

/* =============================================================== Astro panel */
body > header{background:rgba(11,11,12,.92)!important;border-bottom:1px solid var(--rule)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body > header .brand{font-weight:600;font-size:1rem;letter-spacing:-.01em}
body > header .brand .mark{width:20px;height:20px}
main#app > .hero{background:var(--bg)!important}
main#app > .hero h1{font-size:1.375rem!important;font-weight:700;letter-spacing:-.025em}
.pagehead{background:var(--bg)!important}
.pagehead h2{font-size:1.625rem!important;font-weight:700!important;letter-spacing:-.035em!important;line-height:1.1}
.pagehead p{font-size:0.875rem!important;color:var(--ink-2)!important;max-width:70ch}
.card > h2{font-size:1rem!important;font-weight:600!important;letter-spacing:-.015em!important;text-transform:none!important;color:var(--ink)!important}
.card > h2 + .sub,.sub{color:var(--ink-2)}
.row .label b{font-size:0.90625rem!important;font-weight:600}
.row .label .small{font-size:0.8125rem!important;letter-spacing:.01em;color:var(--ink-2)!important}
nav.side{background:var(--bg)!important;border-right:1px solid var(--rule)!important}
nav.side button{border-radius:0!important;color:var(--ink-2)!important;font-weight:500!important;font-size:0.875rem!important}
nav.side button:hover{color:var(--ink)!important;background:rgba(255,255,255,.03)!important}
nav.side button.on{background:rgba(255,255,255,.06)!important;color:var(--ink)!important;font-weight:600!important}
nav.side button.on::before{left:-10px!important;top:0!important;bottom:0!important;width:1px!important;border-radius:0!important;background:var(--ink)!important}
.stat-grid{gap:0!important;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stat-card{background:transparent!important;border:0!important;border-right:1px solid var(--rule-2)!important;padding:14px 16px!important}
.stat-card:last-child{border-right:0!important}
.stat-card:hover{background:rgba(255,255,255,.03)!important}
.stat-num{font-size:1.625rem!important;font-weight:500!important}
.server{background:transparent!important;border:1px solid var(--rule)!important}
.server:hover{border-color:rgba(255,255,255,.32)!important;background:rgba(255,255,255,.02)!important}
.server-row:hover{background:rgba(255,255,255,.03)!important}
.rung,.topic-box{background:transparent!important;border:1px solid var(--rule)!important}
.ruledrawer{border-left:1px solid var(--rule)!important;border-radius:0!important;background:transparent!important}
.linkbtn{color:var(--ink)!important;text-decoration-color:rgba(255,255,255,.35)!important}
.usage-bar{background:transparent!important;border:1px solid var(--rule)!important}
.usage-fill{background:var(--ink)!important}
.usage-fill.hot{background:var(--ink)!important;opacity:.6}
.savebar{background:var(--bg)!important;border:1px solid rgba(255,255,255,.24)!important}
#app > .center h1{font-size:clamp(2.125rem,4.4vw,3.5rem)!important;letter-spacing:-.04em;font-weight:700;line-height:1;max-width:18ch;margin-left:auto!important;margin-right:auto!important}
#app > .center p{font-size:1rem;color:var(--ink-2)}
#app > .center .btn.primary{display:inline-flex!important;height:48px;padding:0 22px;align-items:center;font-size:0.9375rem}

/* =============================================================== CashFlow panel */
.nav.w-nav{display:block;padding:0!important;height:auto}
.nav.w-nav .navright{gap:16px}
.navcta,.navghost{min-height:36px;padding:0 14px!important;font-size:0.875rem!important;display:inline-flex;align-items:center}
.who{color:var(--ink-2)!important;font-size:0.875rem!important}
.wrap{padding-top:36px!important}
.servers{gap:0!important;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.servers .server{border:0!important;border-right:1px solid var(--rule)!important;border-bottom:1px solid var(--rule)!important;color:var(--ink-2)!important;transform:none!important}
.servers .server:hover{background:rgba(255,255,255,.03)!important}
.servers .server.on{background:rgba(255,255,255,.06)!important;color:var(--ink)!important;box-shadow:inset 0 -2px 0 var(--ink)!important}
.servers .server.on::after{display:none!important}
.server .sm{font-size:0.75rem!important;letter-spacing:.01em}
.ph{background:var(--ink)!important;color:var(--bg)!important}
.wrap .stats{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:0!important;margin:0!important;border-top:1px solid var(--rule)!important;border-bottom:1px solid var(--rule)!important}
.wrap .stats .stat{display:block!important;background:transparent!important;border:0!important;border-right:1px solid var(--rule-2)!important;padding:16px 18px!important}
.wrap .stats .stat:last-child{border-right:0!important}
.stat .k{font-size:0.8125rem!important;letter-spacing:.01em!important;text-transform:none!important;color:var(--ink-3)!important}
.stat .v{font-size:1.625rem!important;font-weight:500!important}
.stat .n{font-size:0.78125rem!important;letter-spacing:.01em;color:var(--ink-3)}
.wrap .card{background:transparent!important;border:1px solid var(--rule)!important}
.wrap .card .eyebrow{font-size:1rem!important;font-weight:600!important;color:var(--ink)!important;letter-spacing:-.015em!important;text-transform:none!important}
.market{gap:0!important;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.asset{background:transparent!important;border:0!important;border-right:1px solid var(--rule)!important;border-bottom:1px solid var(--rule)!important;transform:none!important}
.asset:hover{background:rgba(255,255,255,.03)!important}
.asset.on{background:rgba(255,255,255,.06)!important;box-shadow:inset 0 -2px 0 var(--ink)!important}
.asset .sym{letter-spacing:.02em!important;font-weight:600!important}
.asset .nm{font-size:0.78125rem!important;letter-spacing:.01em;color:var(--ink-3)!important}
.asset .px{font-size:1.25rem!important;font-weight:500!important}
.chg{font:500 0.75rem var(--pcd-mono)!important}
.tag,.hit em{font:500 0.6875rem/1 var(--pcd-sans)!important;letter-spacing:.01em!important;text-transform:none!important;color:var(--ink-2)!important;background:transparent!important;border:1px solid var(--rule)!important;padding:3px 6px!important}
.spark polygon{display:none}
.spark polyline{stroke:var(--ink)}
.asset:has(.chg.down) .spark polyline{stroke:var(--ink-3)}
.hit b{font-weight:600!important}
.hit span{font-size:0.8125rem!important}
.seeknote{font-size:0.8125rem!important;letter-spacing:.01em;color:var(--ink-3)!important}
.arc{stroke:var(--ink)}
.dial .val{font-weight:500!important}
.dial .cap{font-size:0.75rem!important;letter-spacing:.01em!important;text-transform:none!important;color:var(--ink-3)!important}
.band{font-size:0.875rem!important;color:var(--ink-2)!important}
.money{gap:0!important;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.op{background:transparent!important;border:0!important;border-right:1px solid var(--rule)!important;border-bottom:1px solid var(--rule)!important}
.op h4{font-size:0.9375rem!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--ink)!important;font-weight:600!important}
.op p{font-size:0.84375rem!important;color:var(--ink-2)!important}
.op p b{color:var(--ink)!important}
.op button{font-size:0.875rem!important;padding:0 16px!important;min-height:40px}
.buy,.sell{font-size:0.875rem!important;padding:0 20px!important;min-height:40px}
.tw table{font-size:0.875rem}
.me{background:rgba(255,255,255,.06)!important}
.side .tab{border-radius:0!important}
body > footer{border-top:1px solid var(--rule)!important;color:var(--ink-3)!important;font-size:0.875rem!important}
/* the server picker and sign-in screens live in the same fixed-height main as the settings
   shell; give them the page gutter and let them scroll instead of clipping a long list */
main#app:not(:has(> .layout)){padding:32px clamp(20px,4vw,48px) 96px!important;overflow-y:auto}
main#app:not(:has(> .layout)) > h2{margin-top:36px;font-size:1.25rem;letter-spacing:-.025em}
/* Astro's settings are sections on one rule, not boxes (its own sheet meant this; the older
   operate layer had boxed them again) */
main#app .layout .card{background:transparent!important;border:0!important;border-top:1px solid var(--rule)!important;padding:18px 0 6px!important;margin-bottom:18px}
main#app .layout .cols > .card:first-child{border-top:0!important;padding-top:4px!important}
@media (min-width:1240px){main#app .layout .cols > .card:nth-child(2){border-top:0!important;padding-top:4px!important}}
/* a long description no longer pushes its control onto a line of its own */
main#app .row:not(.stack) > .label{flex:1 1 200px}
main#app .row > .control:has(> .toggle:only-child){min-width:0}
main#app .row .label{color:var(--ink-2)!important;font-size:inherit!important;margin:0!important}
main#app .row .label b{color:var(--ink)!important}
/* CashFlow: the tab rail scrolls inside its own row on a phone instead of widening the page */
.wrap .layout > *{min-width:0}
@media (max-width:820px){.wrap .layout{grid-template-columns:minmax(0,1fr)!important}}


/* =============================================================== feel (2026-10-08)
   Response, interruptibility and materials for both panels. Every press answers on
   pointer-down in 100ms; anything that opens is a CSS transition on a critically damped
   curve so it can be reversed mid-flight; nothing here changes what a control sends. */

/* press: buttons give a little, rows and tabs fill */
:is(.btn,.navcta,.navghost,.op button,.buy,.sell,#savelogs,.combo-x,.tag-x,.tag button,.topic-remove):active:not(:disabled){
  transform:scale(.97)!important;transition:transform var(--w-press) ease-out,background-color var(--w-press) ease-out!important}
nav.side button:active,.side .tab:active{transform:none!important;background:rgba(255,255,255,.09)!important;transition:background-color var(--w-press) ease-out!important}
.servers .server:active,.asset:active,.server-row:active,.combo-opt:active,.hit:active,.stat-card:active,main#app .grid .server:active{
  background:rgba(255,255,255,.08)!important;transition:background-color var(--w-press) ease-out!important}
main#app .grid .server:active,.stat-card:active{transform:scale(.985)!important}
/* the switch: the plate holds still, the knob stretches toward where it is going
   (a transform, so the stretch and its release stay on the compositor) */
.toggle:active{transform:none!important}
.toggle.on::after{transform-origin:right center}
.toggle:active::after{transform:scaleX(1.2)!important}
.toggle.on:active::after{transform:translateX(16px) scaleX(1.2)!important}
/* where you are in the rail */
nav.side button[aria-current],.side .tab[aria-current]{color:var(--ink)!important}
.servers .server[aria-current]{color:var(--ink)!important}
.servers .server:focus-visible,.asset:focus-visible{outline-offset:-2px!important}

/* pickers drop out of their field and fold back into it */
.combo-list{transform-origin:top right;transition:opacity .14s ease-out,transform .26s var(--w-spring),display .26s allow-discrete}
.combo-list[hidden]{opacity:0;transform:translateY(-4px) scale(.98)}
@starting-style{.combo-list:not([hidden]){opacity:0;transform:translateY(-4px) scale(.98)}}
.hits{display:none;opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;
  transition:opacity .14s ease-out,transform .26s var(--w-spring),display .26s allow-discrete}
.hits.open{display:block;opacity:1;transform:none}
@starting-style{.hits.open{opacity:0;transform:translateY(-4px) scale(.98)}}

/* toast comes down from the bar and goes back up it; the save bar rises from the bottom
   edge and sinks back into it. Both re-target from wherever they are. */
.toast{transition:transform var(--w-open) var(--w-spring),opacity .2s var(--w-ease)!important}
.savebar{transition:transform var(--w-open) var(--w-spring),opacity .2s var(--w-ease)!important}
.savebar.done .btn{display:none}
.savebar .small.bad{color:#ffb3b3!important}
.savebar.bad{border-color:var(--bad-line)!important}

/* re-rendering a page you are already on (a tab, a saved change) does not replay the
   entrance: only the first paint of a server arrives in sequence */
#app.settled .reveal,#app.settled .fade{animation:none!important;opacity:1!important;transform:none!important}

/* inline validation, next to the field it is about */
.fieldmsg{flex-basis:100%;width:100%;margin-top:6px;font-size:0.8125rem;letter-spacing:.01em;line-height:1.45;color:#ffb3b3}
.row:not(.stack) > .fieldmsg{text-align:right}
input[aria-invalid="true"]{border-color:var(--bad-line)!important}

/* Astro's bar is a scroll edge on a phone, where the page scrolls under it; on a desktop the
   bar never has content beneath it, so its rule is a structural divider and stays */
@media (max-width:860px){
  body > header{border-bottom-color:transparent!important;transition:border-color .2s var(--w-ease)}
  html.pcd-scrolled body > header{border-bottom-color:var(--rule)!important}
}

@media (prefers-reduced-motion:reduce){
  .toast{transform:translate(-50%,0)!important;transition:opacity .18s ease!important}
  .savebar{transform:translate(-50%,0)!important;transition:opacity .18s ease!important}
  .combo-list,.combo-list[hidden],.hits{transform:none!important;transition:opacity .15s ease,display .15s allow-discrete!important}
  @starting-style{.combo-list:not([hidden]),.hits.open{transform:none}}
  :is(.btn,.navcta,.navghost,.op button,.buy,.sell,#savelogs,.combo-x,.tag-x,.tag button,.topic-remove):active:not(:disabled),
  main#app .grid .server:active,.stat-card:active{transform:none!important;opacity:.8}
  .needle,.arc{transition:none!important}
}
@media (prefers-reduced-transparency:reduce){
  body > header,.nav.w-nav,.savebar{background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-contrast:more){
  :root{--ink-2:#ededef;--ink-3:#d6d6db;--muted:#ededef;--text:#ededef;
    --rule:rgba(255,255,255,.34);--rule-2:rgba(255,255,255,.24);--rule-3:rgba(255,255,255,.16);
    --line:rgba(255,255,255,.34);--line-strong:rgba(255,255,255,.5)}
  body > header,.nav.w-nav{background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom-color:var(--rule)!important}
  input,select,textarea,.combo-in,.combo.multi,.toggle{border-color:rgba(255,255,255,.5)!important}
}