/* Aedonyx client portal — Issue 12 · THE FIRM, worked in.
   The live aedonyx.io (paper ground, ink type, Public Sans for every word on the paper, the plasma button) carried
   into an app: a dark navy rail that slides between full and icon width, paper pages, white sheets, dashed seams.
   Dark instruments (the rail, the sign-in art, the plasma button, the code well) re-declare the night set inside.
   Gold is the machine speaking: the lamp on a live site, a paid invoice, the plasma's hot edge. Steel is "now".
   No side stripes or underline ticks as status; the current nav item is a lit pill. */

@font-face{font-family:"H Public Sans";src:url("../fonts/public-sans-vf.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"H Droid";src:url("../fonts/droid-sans-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"H Droid";src:url("../fonts/cousine-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* ── tokens: paper + ink ─────────────────────────────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;
  --paper:#f4f5f7;--paper-hi:#ffffff;--paper-lo:#e8ebef;--paper-lo2:#dde2e8;
  --film:#0f1b27;--plate:#2b3a48;--muted:#5c6b79;--dim:#64717e;
  --rule:rgba(15,27,39,.14);--dash:rgba(15,27,39,.22);--hair:rgba(15,27,39,.24);--edge:rgba(15,27,39,.12);
  --steel:#2f6fae;--steel-glow:rgba(47,111,174,.22);--steel-wash:rgba(47,111,174,.08);
  --gold:#f59e0b;--gold-hi:#ffb02e;--gold-ink:#a3610a;--gold-wash:rgba(245,158,11,.11);
  --brick:#b23a26;--brick-wash:rgba(178,58,38,.08);
  --navy:#1b2c3d;--navy-hi:#22354a;--navy-lo:#132130;--well:#0d1823;--well-2:#101d2b;--tile:#1d3046;
  --sans:"H Public Sans","Public Sans",Arial,sans-serif;
  /* 2026-10-12 (James: the Barlow caps "is really for my engineering firm, it doesn't fit in with our new aedonyx
     aesthetic"): one family. --label is Public Sans too, the site's controls.css recipe: 600, 12.5px, .07em, caps where
     they were caps (12px / .06em in the dense places: table heads, readout keys, the rail's section names). */
  --label:"H Public Sans","Public Sans",Arial,sans-serif;
  --mark:"H Droid","Droid Sans Mono",ui-monospace,monospace;
  --gutter:clamp(16px,3vw,44px);
  --r:8px;--r-lg:14px;
  --ease:cubic-bezier(.25,1,.5,1);--out:cubic-bezier(.16,1,.3,1);
  --rail-w:264px;--rail-c:80px;--rail-now:var(--rail-w);
  --shadow-sheet:0 1px 0 rgba(15,27,39,.03),0 12px 32px -24px rgba(15,27,39,.32);
}
html[data-nav=collapsed]{--rail-now:var(--rail-c)}
/* the night set, inside the dark instruments */
.btn-gold,.well,.imp,.tip{
  --film:#f1f5f8;--plate:#dee4e9;--muted:#a6aeb5;--dim:#7d8b98;
  --rule:rgba(241,245,248,.14);--dash:rgba(241,245,248,.2);--hair:rgba(241,245,248,.24);--edge:rgba(241,245,248,.12);
  --steel:#6fa3d6;--steel-glow:rgba(111,163,214,.28);
}

/* ── scrollbars: drawn in the house navy → steel, amber while held. Every scroll in the portal (2026-10-12). ── */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{border:4px solid transparent;border-radius:12px;background:linear-gradient(180deg,#2f6fae 0%,#22354a 100%) padding-box}
::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#ffb02e 0%,#2f6fae 40%,#22354a 100%) padding-box}
::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){html,.table-wrap,.dd-list,.split-form{scrollbar-width:thin;scrollbar-color:#2f6fae transparent}}

/* ── base ────────────────────────────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;min-height:100svh;background:var(--paper);color:var(--plate);font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,svg,canvas{max-width:100%}
hr{border:0;border-top:1px dashed var(--dash);margin:24px 0}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px;border-radius:4px}
::selection{background:rgba(245,158,11,.28)}
#main:focus{outline:none}
[hidden]{display:none!important}
.skip{position:fixed;top:12px;left:12px;z-index:90;padding:10px 16px;background:var(--film);color:var(--paper-hi);border-radius:6px;clip-path:inset(50%)}
.skip:focus{clip-path:none}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:15px;height:15px}

/* ── lettering ───────────────────────────────────────────────────────────────────────────────────────────── */
.eyebrow{color:var(--gold-ink);font:600 12.5px/1.5 var(--label);letter-spacing:.07em;text-transform:uppercase}
.h1{color:var(--film);font:600 clamp(26px,2.3vw,38px)/1.1 var(--sans);letter-spacing:-.022em}
.h2{color:var(--film);font:600 18px/1.3 var(--sans);letter-spacing:-.012em}
.h3{color:var(--film);font:600 15.5px/1.35 var(--sans);letter-spacing:-.006em}
.lede{color:var(--muted);font-size:16.5px;line-height:1.6;max-width:64ch}
.label{color:var(--dim);font:600 12px/1.4 var(--label);letter-spacing:.06em;text-transform:uppercase}
.muted{color:var(--muted)}.dim{color:var(--dim)}.ink{color:var(--film)}.bad{color:var(--brick)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mark);font-size:.92em;letter-spacing:0}
.small{font-size:13.5px}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.prose{max-width:70ch}.prose p+p{margin-top:.8em}
.lnk{color:var(--steel);text-decoration:underline;text-decoration-color:rgba(47,111,174,.35);text-underline-offset:3px;transition:color .16s var(--ease),text-decoration-color .16s var(--ease)}
.lnk:hover{color:var(--film);text-decoration-color:var(--film)}
.wordmark{color:var(--film);font:400 17px/1 var(--mark);letter-spacing:.06em;white-space:nowrap}
.wordmark b{font-weight:700}
.lockup{display:inline-flex;align-items:center;gap:10px;min-height:40px;flex-shrink:0}
.lockup img{display:block}
/* the spine as a window onto the fluid (the rail, 2026-10-12): the ink cut is the mask; the glass sheen of the design
   system's spine-plasma sits on top; with no WebGL the ink fill shows through as the plain mark */
.mark-gel{position:relative;isolation:isolate;display:block;flex:0 0 auto;width:13px;height:28px;overflow:hidden;background:var(--film);
  -webkit-mask:url("../img/spine.svg") center/100% 100% no-repeat;mask:url("../img/spine.svg") center/100% 100% no-repeat;
  filter:drop-shadow(0 1px 1px rgba(15,27,39,.25))}
.mark-gel>canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.mark-gel::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(110% 55% at 50% -12%,rgba(241,245,248,.22) 0%,rgba(241,245,248,.06) 34%,rgba(241,245,248,0) 58%),
  linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.22) 100%)}

/* ── THE ACTION: the plasma button. One per view. (Same build as aedonyx.io: navy slab, WebGL fluid in .btn-pl,
      CSS lobes as the no-WebGL fallback.) ────────────────────────────────────────────────────────────────── */
.btn-gold{
  --mx:50%;--my:50%;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 20px;
  border:0;border-radius:8px;cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,#223649 0%,#101d2b 100%);
  /* 2026-10-12 (James: "does the font work on it, also we dont need that orange arrow"): the body face in sentence
     case like every other button, 600 15px; the return arrow is gone */
  color:var(--film);font:600 15px/1 var(--sans);letter-spacing:0;
  box-shadow:inset 0 1px 0 rgba(241,245,248,.18),inset 0 -1px 0 rgba(0,0,0,.4),0 10px 24px -12px rgba(15,27,39,.5);
  transition:transform .18s var(--out),box-shadow .3s var(--ease)}
.btn-pl{position:absolute;inset:0;z-index:-2;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:.92;transform:translateZ(0);transition:opacity .5s var(--ease);clip-path:inset(0 round 8px)}
.btn-lg .btn-pl{clip-path:inset(0 round 10px)}
.btn-pl canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.btn-gold.is-gl{background:rgba(13,24,35,.9)}
.btn-gold.is-gl .btn-pl{opacity:.96}
.btn-gold.is-gl .btn-pl i{display:none}
.btn-pl i{position:absolute;display:block;width:170px;height:170px;border-radius:50%;filter:blur(16px) saturate(1.15);mix-blend-mode:plus-lighter;will-change:transform}
.btn-pl i:nth-child(1){left:-18%;top:-80px;background:radial-gradient(circle,rgba(255,186,70,.78) 0%,rgba(245,158,11,.42) 36%,rgba(245,158,11,0) 70%);animation:lobe-a 16s ease-in-out infinite alternate}
.btn-pl i:nth-child(2){left:44%;top:-40px;background:radial-gradient(circle,rgba(246,138,56,.68) 0%,rgba(236,118,40,.36) 36%,rgba(236,118,40,0) 70%);animation:lobe-b 21s ease-in-out infinite alternate -7s}
.btn-pl i:nth-child(3){left:66%;top:-30px;width:150px;height:150px;background:radial-gradient(circle,rgba(160,204,245,.92) 0%,rgba(111,163,214,.5) 36%,rgba(111,163,214,0) 70%);animation:lobe-c 25s ease-in-out infinite alternate -12s}
.btn-pl i:nth-child(4){left:28%;top:-20px;width:180px;height:180px;background:radial-gradient(circle,rgba(96,124,210,.82) 0%,rgba(60,84,160,.42) 36%,rgba(52,74,140,0) 70%);animation:lobe-d 19s ease-in-out infinite alternate -3s}
@keyframes lobe-a{to{transform:translate(70px,40px) scale(1.15)}}
@keyframes lobe-b{to{transform:translate(-80px,50px) scale(.9)}}
@keyframes lobe-c{to{transform:translate(50px,30px) scale(1.1)}}
@keyframes lobe-d{to{transform:translate(-40px,20px) scale(1.2)}}
.btn-gold::before{content:"";position:absolute;inset:0;z-index:1;padding:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,176,46,.32) 0%,rgba(241,245,248,.12) 42%,rgba(111,163,214,.3) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.55;transition:opacity .3s var(--ease)}
.btn-t{position:relative;z-index:2;font-variant-ligatures:none;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.45)}
.btn-ar{position:relative;z-index:2;flex:0 0 auto;width:15px;height:15px;fill:none;stroke:var(--gold-hi);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(255,176,46,.5));transition:transform .22s var(--out)}
.btn-gold:hover,.btn-gold:focus-visible{box-shadow:inset 0 1px 0 rgba(241,245,248,.18),inset 0 -1px 0 rgba(0,0,0,.4),0 14px 30px -12px rgba(15,27,39,.5),0 0 26px -8px rgba(245,158,11,.22)}
.btn-gold:hover::before,.btn-gold:focus-visible::before{opacity:1}
.btn-gold:hover .btn-pl,.btn-gold:focus-visible .btn-pl{opacity:1}
.btn-gold:hover .btn-ar{transform:translateX(2px)}
.btn-gold:active{transform:translateY(1px) scale(.985)}
.btn-gold:focus-visible{outline:2px solid var(--steel);outline-offset:3px}
.btn-gold:disabled,.btn-gold[aria-busy=true]{cursor:progress}
.btn-lg{min-height:54px;padding:0 26px;border-radius:10px;font-size:15px}
.btn-lg .btn-ar{width:17px;height:17px}
.btn-sm{min-height:38px;padding:0 16px;font-size:14px;border-radius:7px}
.btn-sm .btn-pl{clip-path:inset(0 round 7px)}
.btn-block{width:100%}
@supports not (mix-blend-mode:plus-lighter){.btn-pl i{mix-blend-mode:screen}}
/* ── the key: a quiet utility button for tool actions (run a check, copy, upload). Never the view's main action. */
.key{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;border:1px solid var(--edge);border-radius:8px;
  background:var(--paper-hi);color:var(--film);font:600 13px/1 var(--sans);letter-spacing:0;white-space:nowrap;cursor:pointer;
  box-shadow:0 1px 0 rgba(15,27,39,.05),inset 0 -1px 0 rgba(15,27,39,.04);transition:border-color .16s var(--ease),background .16s var(--ease),transform .12s var(--out)}
.key:hover{border-color:var(--hair);background:var(--paper)}
.key:active{transform:translateY(1px)}
.key .ico{width:16px;height:16px}
.key.k-danger{color:var(--brick)}
.key.k-danger:hover{border-color:rgba(178,58,38,.4);background:var(--brick-wash)}
.key.k-sm{min-height:30px;padding:0 10px;font-size:12.5px}
.key:disabled{opacity:.5;cursor:not-allowed}
.well .key,.rail .key{background:rgba(241,245,248,.06);border-color:var(--edge);color:var(--film);box-shadow:none}
.well .key:hover,.rail .key:hover{background:rgba(241,245,248,.12)}

/* ── the buttons (2026-10-12, James: "the buttons don't look like buttons at all", then "simpler"). Three plain
      buttons beside the plasma action, all sentence case in the body face, solid colours only so every hover eases:
      .btn-line  — white with a drawn edge: the secondary actions (change the card, edit billing details, all invoices).
      .btn-ink   — solid ink: the main step of a view when that step is not a payment (view the invoice, keep my hosting).
      .btn-brick — solid brick: the one action that ends something (cancel hosting). Sits bottom right of its block.
      .b-sm for a sheet head or a table row. The command (.cmd) stays for text links inside copy. ──────────────────── */
.btn-ink,.btn-line,.btn-brick{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 18px;border:1px solid transparent;border-radius:9px;
  cursor:pointer;white-space:nowrap;font:600 15px/1 var(--sans);letter-spacing:0;text-decoration:none;
  transition:background-color .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease),transform .12s var(--out)}
.btn-line{border-color:rgba(15,27,39,.28);background:var(--paper-hi);color:var(--film);box-shadow:0 1px 0 rgba(15,27,39,.06)}
.btn-line:hover{border-color:var(--film);background:var(--paper)}
.btn-line .ico{color:var(--muted)}
.btn-ink{background:var(--film);color:var(--paper-hi);box-shadow:0 1px 2px rgba(15,27,39,.2),0 8px 20px -14px rgba(15,27,39,.6)}
.btn-ink:hover{background:var(--navy);box-shadow:0 1px 2px rgba(15,27,39,.2),0 12px 24px -14px rgba(15,27,39,.7)}
.btn-ink .ico{color:var(--paper-hi)}
.btn-brick{background:var(--brick);color:#fff5f1;box-shadow:0 1px 2px rgba(120,30,15,.2),0 8px 20px -14px rgba(178,58,38,.7)}
.btn-brick:hover{background:#9b2f1d;box-shadow:0 1px 2px rgba(120,30,15,.2),0 12px 24px -14px rgba(178,58,38,.8)}
.btn-brick .ico{color:#ffd9cf}
.btn-brick:focus-visible{outline-color:var(--brick)}
.btn-ink:active,.btn-line:active,.btn-brick:active{transform:translateY(1px)}
.btn-ink.b-sm,.btn-line.b-sm,.btn-brick.b-sm{min-height:36px;padding:0 14px;font-size:14px;border-radius:8px;gap:7px}
.btn-ink .ico,.btn-line .ico,.btn-brick .ico{width:16px;height:16px}
.btn-ink.b-sm .ico,.btn-line.b-sm .ico,.btn-brick.b-sm .ico{width:15px;height:15px}
.btn-ink.b-block,.btn-line.b-block,.btn-brick.b-block{width:100%}
.btn-ink:disabled,.btn-line:disabled,.btn-brick:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ── the command: a text action (secondary, "view all", cancel). Steel caps, an arrow. */
.cmd{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0;border:0;background:none;cursor:pointer;color:var(--steel);
  font:600 12.5px/1 var(--label);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transition:color .16s var(--ease)}
.cmd:hover{color:var(--film)}
.cmd .ar{transition:transform .2s var(--out)}
.cmd:hover .ar{transform:translateX(3px)}
.cmd.c-quiet{color:var(--muted)}
.cmd.c-quiet:hover{color:var(--film)}
.cmd.c-danger{color:var(--brick)}
.cmd.c-danger:hover{color:#7d2516}
.cmd .ico{width:15px;height:15px}

/* ── the app shell ───────────────────────────────────────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--rail-now) minmax(0,1fr);min-height:100svh;transition:grid-template-columns .34s var(--out)}
.no-anim .app,.no-anim .rail *{transition:none!important}

/* the rail: a navy slab inside the gutter, the hero's edge light, a pool of the plasma at its foot */
.rail{position:sticky;top:0;z-index:40;height:100svh;padding:12px 0 12px 12px}
.rail-in{position:relative;isolation:isolate;display:flex;flex-direction:column;height:100%;border-radius:16px;overflow:hidden;color:var(--plate);
  background:radial-gradient(120% 60% at 0% 0%,var(--navy-hi) 0%,var(--navy) 46%,var(--navy-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(241,245,248,.14),inset 0 -1px 0 rgba(0,0,0,.45),0 30px 60px -36px rgba(15,27,39,.7)}
.rail-in::before{content:"";position:absolute;inset:0;z-index:3;padding:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,176,46,.28) 0%,rgba(241,245,248,.08) 30%,rgba(241,245,248,.04) 70%,rgba(111,163,214,.3) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* 2026-10-12 (James: "a very quiet lighter version of the webgl"): the fluid runs the whole rail, faint and slow,
   under the navigation; a touch stronger toward the foot where nothing has to be read */
.rail-gel{position:absolute;inset:0;z-index:-1;opacity:.34;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.55) 100%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.55) 100%)}
.rail-gel>canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.rail-head{display:flex;align-items:center;gap:8px;min-height:72px;padding:14px 12px 10px 18px}
.rail-head .lockup{min-width:0;overflow:hidden}
.rail-head .wordmark{font-size:16px;color:var(--film)}
.rail-toggle{margin-left:auto;display:inline-grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;transition:background .16s,color .16s}
.rail-toggle:hover{background:rgba(241,245,248,.08);color:var(--film)}
.rail-close{display:none;margin-left:auto;place-items:center;width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.rail-close:hover{background:rgba(241,245,248,.08);color:var(--film)}
.rail-toggle .ico{transition:transform .34s var(--out)}
.rail-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 12px 16px;scrollbar-width:none}
.rail-nav::-webkit-scrollbar{display:none}
.rail-group+.rail-group{margin-top:20px}
.rail-label{display:block;height:24px;padding:0 12px;overflow:hidden;color:var(--dim);font:600 11.5px/24px var(--label);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:opacity .2s var(--ease)}
.rail-link{position:relative;display:flex;align-items:center;gap:13px;height:42px;padding:0 14px;margin-top:2px;border-radius:10px;color:var(--muted);
  font:500 14.5px/1 var(--sans);white-space:nowrap;overflow:hidden;transition:background .16s var(--ease),color .16s var(--ease)}
.rail-link:hover{background:rgba(241,245,248,.06);color:var(--film)}
.rail-link[aria-current=page]{background:linear-gradient(180deg,rgba(111,163,214,.2),rgba(111,163,214,.12));color:var(--film);box-shadow:inset 0 0 0 1px rgba(111,163,214,.24),inset 0 1px 0 rgba(241,245,248,.08)}
.rail-link[aria-current=page] .ico{color:var(--steel)}
.rail-t{transition:opacity .2s var(--ease)}
.rail-count{margin-left:auto;min-width:22px;height:20px;padding:0 7px;border-radius:10px;background:rgba(111,163,214,.18);color:var(--film);font:600 11.5px/20px var(--label);letter-spacing:0;font-variant-numeric:tabular-nums;text-align:center;transition:opacity .2s var(--ease)}
.rail-count.c-attn{background:rgba(245,158,11,.2);color:var(--gold-hi)}
.rail-foot{position:relative;padding:12px;border-top:1px solid var(--rule)}
.rail-user{display:flex;align-items:center;gap:11px;min-height:48px;padding:6px;border-radius:12px;overflow:hidden}
.rail-user .avatar{background:rgba(241,245,248,.12);color:var(--film);box-shadow:inset 0 0 0 1px rgba(241,245,248,.14)}
.rail-who{min-width:0;flex:1;line-height:1.25;transition:opacity .2s var(--ease)}
.rail-who b{display:block;color:var(--film);font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-who span{display:block;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-out{display:inline-grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.rail-out:hover{background:rgba(241,245,248,.08);color:var(--film)}
/* collapsed (desktop): icons only; labels fade and clip, tooltips come from portal.js */
@media (min-width:961px){
  html[data-nav=collapsed] .rail-head{flex-direction:column;align-items:center;gap:6px;padding:14px 0 8px}
  html[data-nav=collapsed] .rail-head .wordmark{display:none}
  html[data-nav=collapsed] .rail-head .lockup{gap:0}
  html[data-nav=collapsed] .rail-toggle{margin-left:0}
  html[data-nav=collapsed] .rail-toggle .ico{transform:rotate(180deg)}
  html[data-nav=collapsed] .rail-nav{padding-inline:10px}
  html[data-nav=collapsed] .rail-label{opacity:0;height:10px}
  html[data-nav=collapsed] .rail-link{padding:0 0 0 15px}
  html[data-nav=collapsed] .rail-t,html[data-nav=collapsed] .rail-count{opacity:0;pointer-events:none}
  html[data-nav=collapsed] .rail-link .rail-dot{display:block}
  html[data-nav=collapsed] .rail-foot{padding:12px 10px}
  html[data-nav=collapsed] .rail-user{flex-direction:column;padding:6px 0;gap:6px}
  html[data-nav=collapsed] .rail-who{display:none}
}
.rail-dot{display:none;position:absolute;top:9px;left:31px;width:7px;height:7px;border-radius:50%;background:var(--steel);box-shadow:0 0 0 2px var(--navy)}
.rail-dot.c-attn{background:var(--gold)}
.scrim{display:none}

/* ── the paper rail (2026-10-12, James: the navy rail "doesn't play well with the slab, too dark, wrong colors").
      The rail is navigation, not an instrument: paper with ink type, a hairline edge, and a faint wash of the fluid
      rising from its foot. The Overview's slab is then the one dark instrument on the page. ─────────────────────── */
.rail-in{color:var(--plate);background:linear-gradient(180deg,#eef1f4 0%,#e9edf1 100%);border:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(15,27,39,.03),0 24px 50px -36px rgba(15,27,39,.35)}
.rail-in::before{display:none}
/* the wash (2026-10-12): the hero wash's opacity .34 and multiply, but the fluid run HOT (heat .6, lit 1, scale 1.4) so
   amber and steel reach the paper; at the hero's own settings the narrow rail showed only the navy body and went grey */
.rail-gel{opacity:.42;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 46%,rgba(0,0,0,.6) 74%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 46%,rgba(0,0,0,.6) 74%,transparent 100%)}
@media (prefers-reduced-motion:reduce){.rail-gel{opacity:.2}}
.rail-head .wordmark{color:var(--film)}
.rail-toggle,.rail-close,.rail-out{color:var(--muted)}
.rail-toggle:hover,.rail-close:hover,.rail-out:hover{background:var(--paper-lo);color:var(--film)}
.rail-label{color:var(--muted)}   /* one step darker than dim: the caps stay ≥ 4.5:1 over the warmest patch of the wash */
.rail-link{color:var(--plate)}
.rail-link:hover{background:var(--paper);color:var(--film)}
/* the current item is a solid ink pill, the same build as the ink button (James 10-12: "the same as the Details button") */
.rail-link[aria-current=page]{background:var(--film);color:var(--paper-hi);box-shadow:0 1px 2px rgba(15,27,39,.2),0 8px 20px -14px rgba(15,27,39,.6)}
.rail-link[aria-current=page]:hover{background:var(--navy);color:var(--paper-hi)}
.rail-link[aria-current=page] .ico{color:var(--paper-hi)}
.rail-link[aria-current=page]:focus-visible{outline:2px solid var(--steel);outline-offset:2px}
.rail-link:focus-visible{outline-color:var(--steel)}
.rail-link[aria-current=page] .rail-count{background:rgba(255,255,255,.22);color:var(--paper-hi)}
.rail-link[aria-current=page] .rail-count.c-attn{background:rgba(255,176,46,.9);color:var(--film)}
.rail-count{background:var(--steel-wash);color:var(--film)}
.rail-count.c-attn{background:var(--gold-wash);color:var(--gold-ink)}
.rail-dot{box-shadow:0 0 0 2px var(--paper-hi)}
.rail-foot{border-top:1px dashed var(--dash)}
.rail-user .avatar{background:var(--paper-lo);color:var(--film);box-shadow:none}
.rail-who b{color:var(--film)}
.rail-who span{color:var(--muted)}
.rail .key{background:var(--paper-hi);border-color:var(--edge);color:var(--film)}
.rail .key:hover{background:var(--paper)}

/* the top bar: paper glass over the page */
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;min-height:64px;padding:0 var(--gutter);
  background:rgba(244,245,247,.86);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--rule)}
.top-menu{display:none;place-items:center;width:40px;height:40px;margin-left:-8px;border:0;border-radius:10px;background:transparent;color:var(--film);cursor:pointer}
.top-menu:hover{background:var(--paper-lo)}
.crumbs{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;color:var(--dim);font:600 12.5px/1 var(--label);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.crumbs a:hover{color:var(--film)}
.crumbs [aria-current=page]{color:var(--film);overflow:hidden;text-overflow:ellipsis}
.crumbs .sep{color:var(--hair)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:20px}
.top-link{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font:600 12.5px/1 var(--label);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.top-link:hover{color:var(--film)}
/* 2026-10-12 (James: "get rid of the top bar on the portal all together, it doesnt really serve a purpose"): on a
   desktop the rail is always there and every page has its title, so the bar is gone and the page starts at the top.
   Under 960px it stays, slimmer, because it carries the menu button that opens the rail. */
@media (min-width:961px){
  .top{display:none}
  .sticky{top:24px}
  html{scroll-padding-top:24px}
}
@media (max-width:960px){ .top{min-height:56px} }
.top-link .ico{width:14px;height:14px}
.page{width:100%;max-width:1480px;padding:clamp(24px,3vw,44px) var(--gutter) 72px}
.page-narrow{max-width:980px}
.foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding:20px var(--gutter) 28px;border-top:1px solid var(--rule);color:var(--muted);font-size:13px}
.foot a:hover{color:var(--film)}

/* viewing as a client (admin support mode) */
.imp{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px var(--gutter);background:var(--navy);color:var(--plate);font-size:14px}
.imp b{color:var(--film);font-weight:600}
.imp .lamp{background:var(--gold);box-shadow:0 0 0 3px rgba(245,158,11,.22)}
.imp form{margin-left:auto}
.imp .cmd{color:var(--gold-hi)}
.imp .cmd:hover{color:var(--film)}

/* ── page furniture ──────────────────────────────────────────────────────────────────────────────────────── */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;padding-bottom:24px;margin-bottom:28px;border-bottom:1px dashed var(--dash)}
.page-head .eyebrow{margin-bottom:10px}
.page-head-t{min-width:0;max-width:820px}
.page-sum{margin-top:10px;color:var(--muted);font-size:15.5px;max-width:68ch}
.page-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.back{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;color:var(--muted);font:600 12.5px/1 var(--label);letter-spacing:.07em;text-transform:uppercase}
.back:hover{color:var(--film)}
.section{margin-top:36px}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;margin-bottom:14px}
.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1fr) minmax(300px,380px);align-items:start}
.g-side{grid-template-columns:minmax(260px,320px) minmax(0,1fr);align-items:start}
.stack>*+*{margin-top:20px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.row-between{justify-content:space-between}
.inline-form{display:inline-flex;margin:0}
.field-pw{position:relative}
.field-pw input{padding-right:64px}
.reveal{position:absolute;right:0;bottom:8px;height:30px;padding:0 8px;border:0;border-radius:6px;background:none;color:var(--muted);font:600 12.5px/1 var(--sans);letter-spacing:0;cursor:pointer}
.reveal:hover{color:var(--film);background:var(--paper-lo)}
.sticky{position:sticky;top:84px}

/* the sheet: a white surface with a hairline, for a group a client works in */
.sheet{background:var(--paper-hi);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-sheet);min-width:0}
.sheet-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;min-height:60px;padding:14px 22px;border-bottom:1px dashed var(--dash)}
.sheet-head .h2{font-size:16.5px}
.sheet-head .eyebrow{font-size:12px}
.sheet-body{padding:20px 22px}
.sheet-body.flush{padding:0}
.sheet-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px 22px;border-top:1px dashed var(--dash)}
.sheet.s-quiet{background:transparent;box-shadow:none;border-style:dashed;border-color:var(--dash)}
.sheet.s-attn{border-color:rgba(245,158,11,.45);box-shadow:0 0 0 4px rgba(245,158,11,.07),var(--shadow-sheet)}
.sheet.s-bad{border-color:rgba(178,58,38,.35);box-shadow:0 0 0 4px rgba(178,58,38,.05),var(--shadow-sheet)}

/* stat tiles in one sheet, divided by dashed seams */
.stats{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));background:var(--paper-hi);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-sheet);overflow:hidden}
.stat{position:relative;min-width:0;padding:20px 22px 22px}
.stat+.stat{border-left:1px dashed var(--dash)}
.stat-l{display:flex;align-items:center;gap:8px;color:var(--dim);font:600 12px/1.3 var(--label);letter-spacing:.06em;text-transform:uppercase}
.stat-v{margin-top:12px;color:var(--film);font:600 clamp(24px,2vw,30px)/1.05 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-s{margin-top:7px;color:var(--muted);font-size:13.5px;line-height:1.4}
a.stat:hover .stat-v{color:var(--steel)}

/* tables: caps heads, dashed rows */
.table-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{padding:12px 16px;text-align:left;color:var(--dim);font:600 12px/1.3 var(--label);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--rule)}
.table td{padding:14px 16px;border-bottom:1px dashed var(--dash);vertical-align:middle;color:var(--plate)}
.table tbody tr:last-child td{border-bottom:0}
.table th:first-child,.table td:first-child{padding-left:22px}
.table th:last-child,.table td:last-child{padding-right:22px}
.table .r{text-align:right}
.table .c{text-align:center}
.table .nowrap{white-space:nowrap}
.table td.num,.table th.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.table tr[data-href]{cursor:pointer}
.table tbody tr[data-href]:hover td,.table tbody tr.is-hover td{background:var(--paper)}
.cell-main{color:var(--film);font-weight:500}
a.cell-main:hover{color:var(--steel)}
.cell-sub{display:block;margin-top:2px;color:var(--muted);font-size:13px}
.table-empty{padding:28px 22px;color:var(--muted)}

/* status as a word in the type (fmt.state, 2026-10-12): ok ink, now steel, bad brick, idle dim. No badge. */
.state{font-weight:500;white-space:nowrap}
.state.w-ok{color:var(--film)}
.state.w-now{color:var(--steel)}
.state.w-bad{color:var(--brick);font-weight:600}
.state.w-idle{color:var(--dim)}

/* status: a lamp and a word (the admin console still uses these). */
.pill{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 9px;border-radius:12px;background:var(--paper-lo);color:var(--plate);
  font:600 11.5px/1 var(--label);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.pill::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--dim)}
.pill.t-ok{background:var(--gold-wash);color:var(--film)}
.pill.t-ok::before{background:var(--gold);box-shadow:0 0 0 2px rgba(245,158,11,.2)}
.pill.t-now{background:var(--steel-wash);color:var(--film)}
.pill.t-now::before{background:var(--steel)}
.pill.t-bad{background:var(--brick-wash);color:var(--brick)}
.pill.t-bad::before{background:var(--brick)}
.pill.t-idle{background:var(--paper-lo);color:var(--muted)}
.lamp{display:inline-block;width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--dim)}
.lamp.l-ok{background:var(--gold);box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.lamp.l-now{background:var(--steel)}
.lamp.l-bad{background:var(--brick);box-shadow:0 0 0 3px rgba(178,58,38,.16)}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--edge);border-radius:6px;color:var(--muted);font:600 11.5px/1 var(--label);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}

/* key / value rows (the about's readout, on paper) */
.kv{display:grid}
.kv-row{display:grid;grid-template-columns:minmax(110px,34%) minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px dashed var(--dash)}
.kv-row:first-child{padding-top:0}
.kv-row:last-child{border-bottom:0;padding-bottom:0}
.kv dt{color:var(--dim);font:600 12px/1.8 var(--label);letter-spacing:.06em;text-transform:uppercase}
.kv dd{color:var(--film);overflow-wrap:anywhere}
.kv dd .cell-sub{font-size:13px}

/* segmented sub-navigation (Billing: Overview · Invoices · Payment) */
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--rule);border-radius:11px;background:var(--paper-hi)}
.seg a,.seg button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:0;border-radius:8px;background:none;cursor:pointer;color:var(--muted);
  font:600 12.5px/1 var(--label);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transition:background .16s,color .16s}
.seg a:hover,.seg button:hover{color:var(--film)}
.seg [aria-current=page],.seg [aria-selected=true]{background:var(--film);color:var(--paper-hi)}
.seg .n{color:inherit;opacity:.6}

/* forms: the site's fields — a sentence-case label in 600 13px (the site's controls.css), an underline that turns steel */
.form{display:grid;gap:22px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span,.field-l{color:var(--muted);font:600 13px/1.3 var(--sans);letter-spacing:0}
.field>span .opt{color:var(--dim);font-weight:500}
.field:focus-within>span{color:var(--film)}
.field input,.field select,.field textarea,.input{width:100%;min-height:44px;padding:10px 2px;border:0;border-bottom:1px solid var(--hair);border-radius:0;background:transparent;color:var(--film);
  font:400 16px/1.5 var(--sans);caret-color:var(--steel);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--plate)}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:none;border-color:var(--steel);box-shadow:0 1px 0 0 var(--steel)}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input[readonly]{color:var(--muted);border-bottom-style:dashed}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field select{appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235c6b79' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center/16px no-repeat}
.field-wide{grid-column:1/-1}
/* dropdowns (2026-10-12, James: "any drop downs will have custom stylized lists and scroll bars"): portal.js wraps every
   select in a .field (and every .filter) in .dd — a button drawn like the field's line, a list sheet under it with the
   house scrollbar. The native select stays in the form, hidden, so the value posts as before. */
.dd{position:relative;min-width:0}
.dd>select.dd-native{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:10px 2px;border:0;border-bottom:1px solid var(--hair);border-radius:0;
  background:transparent;color:var(--film);font:400 16px/1.5 var(--sans);text-align:left;cursor:pointer;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.dd-btn:hover{border-color:var(--plate)}
.dd-btn:focus-visible,.dd-btn[aria-expanded=true]{outline:none;border-color:var(--steel);box-shadow:0 1px 0 0 var(--steel)}
.dd-btn .dd-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-btn.is-blank .dd-t{color:var(--dim)}
.dd-btn .ico{color:var(--muted);transition:transform .22s var(--out)}
.dd-btn[aria-expanded=true] .ico{transform:rotate(180deg)}
.field.is-err .dd-btn{border-color:var(--brick)}
.dd.dd-filter .dd-btn{min-height:40px;padding:8px 2px;color:var(--film);font:600 12.5px/1 var(--label);letter-spacing:.07em;text-transform:uppercase}
.dd-list{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);max-height:292px;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:6px;list-style:none;
  background:var(--paper-hi);border:1px solid var(--rule);border-radius:12px;box-shadow:0 1px 0 rgba(15,27,39,.04),0 26px 50px -24px rgba(15,27,39,.5);animation:rise .18s var(--out) both;scrollbar-gutter:stable}
.dd-list:focus{outline:none}
.dd-list::-webkit-scrollbar{width:10px}
.dd-list::-webkit-scrollbar-thumb{border-width:3px}
.dd-list::-webkit-scrollbar-track{margin-block:6px}
.dd-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:8px 12px;border-radius:8px;color:var(--film);font-size:15px;line-height:1.35;cursor:pointer;transition:background .12s var(--ease)}
.dd-list li.is-blank{color:var(--muted)}
.dd-list li.is-active{background:var(--paper)}
.dd-list li[aria-selected=true]{color:var(--steel);font-weight:600}
.dd-list li[aria-selected=true]::after{content:"";flex:0 0 14px;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3L12.5 5' fill='none' stroke='%232f6fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.dd.dd-filter .dd-list li{font-size:14px;min-height:34px}
.dd.dd-filter .dd-list{min-width:200px;right:auto}
.hint{color:var(--muted);font-size:13px;line-height:1.5}
.field>.hint,.field>.err{font:400 13px/1.5 var(--sans);letter-spacing:0;text-transform:none}
.field>.hint{color:var(--muted)}
.field>.err{color:var(--brick)}
.field:focus-within>.err{color:var(--brick)}
.field.is-err input,.field.is-err select,.field.is-err textarea{border-color:var(--brick)}
.err{color:var(--brick);font-size:13px}
/* the password checklist (portal.js ticks each rule while typing) */
.pw-rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 18px;margin-top:2px;color:var(--muted);font-size:13px}
.pw-rules li{display:flex;align-items:center;gap:8px}
.pw-rules li::before{content:"";flex:0 0 14px;width:14px;height:14px;border:1px solid var(--hair);border-radius:50%;background:var(--paper-hi);transition:background .16s,border-color .16s}
.pw-rules li.is-met{color:var(--film)}
.pw-rules li.is-met::before{border-color:var(--steel);background:var(--steel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.pw-note{margin-top:6px;color:var(--muted);font-size:13px}
/* recovery codes, shown once */
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin:0;padding:18px 20px;border:1px dashed var(--hair);border-radius:12px;background:var(--paper);font:500 15px/1.4 var(--mark);letter-spacing:.04em;color:var(--film)}
.money-in{position:relative}
.money-in::before{content:"$";position:absolute;left:2px;bottom:11px;color:var(--muted);font-size:16px}
.money-in input{padding-left:16px}
.form-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding-top:6px}
.check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;color:var(--plate);line-height:1.45}
.check input{appearance:none;-webkit-appearance:none;flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;border:1px solid var(--hair);border-radius:5px;background:var(--paper-hi);cursor:pointer;transition:background .16s,border-color .16s}
.check input:checked{border-color:var(--steel);background:var(--steel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.check input:focus-visible{outline:2px solid var(--steel);outline-offset:2px}
.check b{display:block;color:var(--film);font-weight:600}
.check small{display:block;color:var(--muted);font-size:13px}
.radios{display:grid;gap:10px}
.radio-card{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--rule);border-radius:10px;cursor:pointer;background:var(--paper-hi);transition:border-color .16s,box-shadow .16s}
.radio-card:hover{border-color:var(--hair)}
.radio-card input{appearance:none;-webkit-appearance:none;flex:0 0 18px;width:18px;height:18px;margin:2px 0 0;border:1px solid var(--hair);border-radius:50%;background:var(--paper-hi);cursor:pointer}
.radio-card input:checked{border:5px solid var(--steel)}
.radio-card:has(input:checked){border-color:var(--steel);box-shadow:0 0 0 3px var(--steel-wash)}
.radio-card b{display:block;color:var(--film);font-weight:600}
.radio-card small{display:block;color:var(--muted);font-size:13px}
.drop{position:relative;display:grid;justify-items:center;gap:8px;padding:26px 18px;border:1px dashed var(--hair);border-radius:12px;background:var(--paper);color:var(--muted);text-align:center;cursor:pointer;transition:border-color .16s,background .16s}
.drop:hover,.drop.is-over{border-color:var(--steel);background:var(--steel-wash)}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop b{color:var(--film);font-weight:600}
.drop .ico{width:26px;height:26px;color:var(--steel)}
.drop-list{display:grid;gap:4px;margin-top:6px;color:var(--film);font-size:13.5px}

/* flash messages: a lamp and a sentence */
.flashes{display:grid;gap:10px;margin-bottom:24px}
.flash{display:flex;align-items:flex-start;gap:12px;padding:13px 14px 13px 16px;border:1px solid var(--rule);border-radius:11px;background:var(--paper-hi);color:var(--film);font-size:14.5px;box-shadow:var(--shadow-sheet);animation:rise .4s var(--out) both}
.flash .lamp{margin-top:7px}
.flash p{flex:1;min-width:0;overflow-wrap:anywhere}
.flash.f-ok .lamp{background:var(--gold);box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.flash.f-err{border-color:rgba(178,58,38,.3);background:#fdf6f4}
.flash.f-err .lamp{background:var(--brick)}
.flash.f-info .lamp{background:var(--steel)}
.flash-x{display:inline-grid;place-items:center;width:28px;height:28px;margin:-3px -4px -3px 0;border:0;border-radius:7px;background:none;color:var(--muted);cursor:pointer}
.flash-x:hover{background:var(--paper-lo);color:var(--film)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* notices inside a page (not flashes): payment due, Stripe not connected */
.notice{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 18px;border:1px solid var(--rule);border-radius:12px;background:var(--paper-hi)}
.notice .lamp{margin-top:0}
.notice p{flex:1;min-width:220px;color:var(--plate)}
.notice p b{color:var(--film);font-weight:600}
.notice.n-attn{border-color:rgba(245,158,11,.45);background:#fffaf0}
.notice.n-bad{border-color:rgba(178,58,38,.32);background:#fdf6f4}

/* empty states */
.empty{display:grid;justify-items:start;gap:8px;padding:32px 22px;color:var(--muted)}
.empty .h3{color:var(--film)}
.empty .ico{width:28px;height:28px;color:var(--dim);margin-bottom:4px}
.empty.e-center{justify-items:center;text-align:center}

/* avatars */
.avatar{display:inline-grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--paper-lo);color:var(--film);font:600 13px/1 var(--sans);letter-spacing:.02em;text-transform:uppercase}
.avatar.a-sm{width:28px;height:28px;flex-basis:28px;font-size:11px}
.avatar.a-lg{width:52px;height:52px;flex-basis:52px;font-size:17px}
.avatar.a-ax{background:var(--navy);box-shadow:inset 0 1px 0 rgba(241,245,248,.16)}
.avatar.a-ax{overflow:hidden}
.avatar.a-ax img{width:auto;height:20px}   /* the spine is tall (200 × 440): sized by height */
.avatar.a-ax.a-sm img{height:15px}
.avatar.a-ax.a-lg img{height:28px}

/* the request thread */
.thread{display:grid}
.msg{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:20px 22px;border-bottom:1px dashed var(--dash)}
.msg:last-child{border-bottom:0}
.msg-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.msg-who{color:var(--film);font-weight:600}
.msg-org{color:var(--muted);font-size:13px}
.msg-when{color:var(--dim);font-size:13px}
.msg-body{margin-top:6px;color:var(--plate);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.m-internal{background:repeating-linear-gradient(135deg,rgba(15,27,39,.018) 0 8px,transparent 8px 16px),var(--paper)}
.msg-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:32px;padding:0 12px;border:1px solid var(--rule);border-radius:8px;background:var(--paper-hi);color:var(--film);font-size:13.5px}
.chip:hover{border-color:var(--steel)}
.chip .ico{width:15px;height:15px;color:var(--steel)}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip small{color:var(--dim)}

/* a timeline of events (activity, the site's change log) */
.feed{display:grid}
.feed li{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;padding:0 0 18px}
.feed li::before{content:"";position:absolute;left:4px;top:16px;bottom:0;width:1px;background:rgba(47,111,174,.32)}
.feed li:last-child{padding-bottom:0}
.feed li:last-child::before{display:none}
.feed .node{width:9px;height:9px;margin-top:7px;border:1px solid var(--steel);border-radius:50%;background:var(--paper-hi)}
.feed li:first-child .node{background:var(--steel)}
.feed .node.n-ok{border-color:var(--gold);background:var(--gold)}
.feed .node.n-bad{border-color:var(--brick);background:var(--brick)}
.feed-t{color:var(--film)}
.feed-t b{font-weight:600}
.feed-m{margin-top:2px;color:var(--dim);font-size:12.5px}
.feed-b{margin-top:4px;color:var(--muted);font-size:14px;white-space:pre-wrap}

/* the build chain (planning → design → review → live): the services rail from the home page, laid flat */
.chain{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0}
.chain li{position:relative;padding:22px 12px 0 0;min-width:0}
.chain li::before{content:"";position:absolute;top:4px;left:0;right:0;height:1px;background:rgba(47,111,174,.35)}
.chain li:last-child::before{right:auto;width:0}
.chain li::after{content:"";position:absolute;top:0;left:0;width:9px;height:9px;border:1px solid var(--steel);border-radius:50%;background:var(--paper-hi)}
.chain li.is-done::after{background:var(--steel)}
.chain li.is-cur::after{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 4px rgba(245,158,11,.18)}
.chain li.is-done::before{background:var(--steel)}
.chain b{display:block;color:var(--film);font:600 12px/1.3 var(--label);letter-spacing:.06em;text-transform:uppercase}
.chain li:not(.is-done):not(.is-cur) b{color:var(--dim)}
.chain span{display:block;margin-top:4px;color:var(--muted);font-size:13px}

/* uptime: one tick per day */
.uptime{display:grid;grid-template-columns:repeat(var(--days,30),minmax(0,1fr));gap:3px;height:32px}
.uptime i{display:block;border-radius:2px;background:var(--paper-lo)}
.uptime i.u-ok{background:rgba(47,111,174,.55)}
.uptime i.u-part{background:var(--gold)}
.uptime i.u-down{background:var(--brick)}
.uptime i:hover{outline:1px solid var(--film);outline-offset:1px}
.uptime-legend{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:var(--dim);font-size:12.5px}

/* a progress meter (certificate days left, storage) */
.meter{height:6px;border-radius:3px;background:var(--paper-lo);overflow:hidden}
.meter i{display:block;height:100%;border-radius:inherit;background:var(--steel)}
.meter.m-attn i{background:var(--gold)}
.meter.m-bad i{background:var(--brick)}

/* the well: code / config on the night ground */
.well{position:relative;margin:0;padding:16px 18px;border-radius:12px;background:var(--well);color:var(--plate);font:400 13px/1.7 var(--mark);white-space:pre;overflow-x:auto;
  box-shadow:inset 0 1px 0 rgba(241,245,248,.06),0 12px 30px -22px rgba(15,27,39,.6)}
.well .key{position:absolute;top:10px;right:10px}
.well .c{color:var(--dim)}
.well .g{color:var(--gold-hi)}
code,.code{padding:1px 6px;border-radius:5px;background:var(--paper-lo);color:var(--film);font:400 .9em var(--mark)}

/* the invoice as a document (prints clean) */
.doc{max-width:920px;padding:clamp(24px,4.5vw,60px);background:var(--paper-hi);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-sheet)}
.doc-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.doc-from{display:grid;gap:10px;max-width:340px}
.doc-from p{color:var(--muted);font-size:13.5px;white-space:pre-line;line-height:1.55}
.doc-title{text-align:right}
.doc-title .h1{font-size:clamp(26px,2.6vw,34px)}
.doc-title .num{margin-top:6px;color:var(--muted)}
.doc-title .h1.num{margin-top:0;color:var(--film)}
.doc-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 24px;padding:26px 0;border-bottom:1px dashed var(--dash)}
.doc-meta dd{margin-top:4px;color:var(--film);white-space:pre-line;font-size:14.5px}
.doc .table th:first-child,.doc .table td:first-child{padding-left:0}
.doc .table td.cell-main{overflow-wrap:anywhere}
.doc .table th:last-child,.doc .table td:last-child{padding-right:0}
.doc-totals{display:grid;justify-content:end;margin-top:8px;padding-top:16px;border-top:1px solid var(--rule)}
.doc-totals div{display:grid;grid-template-columns:160px 140px;gap:12px;padding:5px 0;text-align:right;font-variant-numeric:tabular-nums}
.doc-totals dt{color:var(--muted)}
.doc-totals dd{color:var(--film)}
.doc-totals .t-due{margin-top:6px;padding-top:12px;border-top:1px dashed var(--dash)}
.doc-totals .t-due dt,.doc-totals .t-due dd{color:var(--film);font-weight:600;font-size:17px}
.doc-pay{margin-top:30px;padding-top:22px;border-top:1px dashed var(--dash);display:grid;gap:8px;color:var(--plate);font-size:14px}
.doc-foot{margin-top:28px;color:var(--muted);font-size:12.5px}
.stamp{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1.5px solid currentColor;border-radius:8px;font:600 12.5px/1 var(--label);letter-spacing:.08em;text-transform:uppercase}
.stamp.s-paid{color:var(--gold-ink)}
.stamp.s-due{color:var(--steel)}
.stamp.s-late{color:var(--brick)}
.stamp.s-void{color:var(--dim)}

/* pager + search */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:16px}
.search{position:relative;flex:1;min-width:220px;max-width:420px}
.search .ico{position:absolute;left:2px;top:50%;transform:translateY(-50%);color:var(--dim)}
.search input{width:100%;min-height:40px;padding:8px 2px 8px 28px;border:0;border-bottom:1px solid var(--hair);background:transparent;color:var(--film);font:400 15px/1.5 var(--sans)}
.search input:focus{outline:none;border-color:var(--steel);box-shadow:0 1px 0 0 var(--steel)}
.filter{min-height:40px;padding:8px 26px 8px 2px;border:0;border-bottom:1px solid var(--hair);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235c6b79' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center/16px no-repeat;
  appearance:none;-webkit-appearance:none;color:var(--film);font:600 12.5px/1 var(--label);letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-top:1px dashed var(--dash);color:var(--muted);font-size:13.5px}

/* the confirm dialog (portal.js opens it for forms marked data-confirm) */
dialog.confirm{width:min(460px,calc(100% - 32px));padding:0;border:0;border-radius:16px;background:var(--paper-hi);color:var(--plate);box-shadow:0 40px 90px -30px rgba(15,27,39,.65)}
dialog.confirm::backdrop{background:rgba(13,24,35,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.confirm[open]{animation:rise .3s var(--out) both}
.confirm-b{padding:26px 26px 8px}
.confirm-b .h2{margin-bottom:8px}
.confirm-b p{color:var(--muted)}
.confirm-a{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:20px 26px 24px}

/* the tooltip (collapsed rail, uptime ticks) */
.tip{position:fixed;z-index:100;padding:7px 11px;border-radius:8px;background:var(--navy);color:var(--film);font:500 13px/1.3 var(--sans);white-space:nowrap;pointer-events:none;
  box-shadow:0 12px 30px -12px rgba(15,27,39,.6);opacity:0;transform:translateX(-4px);transition:opacity .14s var(--ease),transform .14s var(--ease)}
.tip.is-on{opacity:1;transform:none}

/* ── sign in: one container, the plasma on the left, the form on the right ─────────────────────────────── */
/* ── sign-in pages (2026-10-13): no container. The film fills the left 60 % of the window, fixed and full height; the
   paper on the right holds the one lockup, the back link and the form. The fields are the website's controls (a white
   box with an ink edge, controls.css on aedonyx.io), the action stays the plasma button. Under 960 px the bar comes
   first, then a short band of the film, then the form. */
.auth{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);min-height:100svh;background:var(--paper)}
.auth-film{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--well);isolation:isolate}
.auth-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-2}
.auth-film::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,14,21,.78) 0%,rgba(8,14,21,.42) 26%,rgba(8,14,21,0) 52%)}
.auth-film-copy{position:absolute;left:clamp(28px,4vw,64px);right:clamp(28px,4vw,64px);bottom:clamp(28px,5vh,60px);max-width:600px;color:#fff}
.auth-film-copy h2{max-width:18ch;color:#fff;font:600 clamp(28px,2.6vw,44px)/1.08 var(--sans);letter-spacing:-.022em;text-wrap:balance}
.auth-film-copy p{margin-top:14px;max-width:42ch;color:rgba(255,255,255,.84);font-size:16px;line-height:1.5}

.auth-side{display:flex;flex-direction:column;min-width:0;min-height:100svh}
.auth-bar{display:flex;align-items:center;gap:20px;min-height:68px;padding:0 clamp(24px,4vw,64px);border-bottom:1px solid var(--rule)}
.auth-bar .lockup{gap:9px}
.auth-bar .lockup img{width:auto;height:28px;aspect-ratio:200/440}
.auth-bar .wordmark{font-size:19px}
.auth-bar .top-link{margin-left:auto;color:var(--muted);font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none}
.auth-bar .top-link:hover{color:var(--film)}
.auth-main{flex:1;display:flex;align-items:center;padding:clamp(32px,6vh,72px) clamp(24px,4vw,64px)}
.split-form{width:100%;max-width:420px;margin-inline:auto}
.split-form .h1{margin-top:0;font-size:clamp(30px,2.4vw,40px)}
.split-form .lede{margin-top:10px;font-size:16px}
.split-form form{margin-top:30px}
.split-form .form-acts{padding-top:8px;gap:16px 28px}

/* the fields: the website's control */
.auth .field{gap:8px}
.auth .field>span{color:var(--muted);font:600 13px/1.3 var(--sans)}
.auth .field:focus-within>span{color:var(--film)}
.auth .field input,.auth .field select,.auth .field textarea{min-height:48px;padding:12px 14px;border:1px solid var(--hair);border-radius:8px;
  background:var(--paper-hi);color:var(--film);font:400 16px/1.4 var(--sans);box-shadow:none;transition:border-color .16s var(--ease)}
.auth .field input:hover,.auth .field select:hover,.auth .field textarea:hover{border-color:var(--film)}
.auth .field input:focus,.auth .field select:focus,.auth .field textarea:focus{outline:2px solid var(--film);outline-offset:-2px;border-color:var(--film);box-shadow:none}
.auth .field input:-webkit-autofill{-webkit-text-fill-color:var(--film);-webkit-box-shadow:inset 0 0 0 100px var(--paper-hi);caret-color:var(--film)}
.auth .field.is-err input,.auth .field.is-err select,.auth .field.is-err textarea{outline:2px solid var(--brick);outline-offset:-2px;border-color:var(--brick)}
.auth .field-pw input{padding-right:70px}
.auth .reveal{right:8px;bottom:9px;height:30px;padding:0 10px;color:var(--film);font:600 13px/1 var(--sans)}
.auth .reveal:hover{background:var(--paper-lo)}
.auth .code-in input{font:500 26px/1.2 var(--mark);letter-spacing:.32em;text-align:left}

/* the quiet actions and links: ink, a resting hairline, an amber 1px line that grows from the left on hover (site idiom) */
.auth .split-form .cmd.c-quiet{min-height:44px;color:var(--film);font:500 15px/1.3 var(--sans);letter-spacing:0;text-transform:none}
.auth .split-form .cmd.c-quiet,.auth .split-note .lnk{text-decoration:none;padding-bottom:2px;
  background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat,linear-gradient(var(--hair),var(--hair)) 0 100%/100% 1px no-repeat;
  transition:background-size .3s var(--out),color .16s var(--ease)}
.auth .split-form .cmd.c-quiet{background-position:0 calc(100% - 10px),0 calc(100% - 10px)}
.auth .split-form .cmd.c-quiet:hover,.auth .split-note .lnk:hover{background-size:100% 1px,100% 1px;color:var(--film)}
.auth .split-note .lnk{color:var(--film)}
.split-note{margin-top:36px;padding-top:22px;border-top:1px solid var(--rule);color:var(--muted);font-size:14.5px;line-height:1.6}
/* 2026-10-19 the site's Privacy and Terms, under every sign-in page's form */
.auth-legal{display:flex;gap:20px;margin-top:22px;font:400 13px/1.4 var(--sans)}
.auth-legal a{display:inline-block;padding:6px 0;color:var(--muted);text-decoration:none}
.auth-legal a:hover{color:var(--film)}
.auth .form-agree{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.auth .form-agree .lnk{color:var(--film);text-underline-offset:3px;text-decoration-color:var(--hair)}

@media (min-width:961px){
  .auth-side{height:100svh;overflow-y:auto}
}
@media (max-width:640px){.auth-bar .wordmark{font-size:16px}}
@media (max-width:960px){
  .auth{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr}
  .auth-side{display:contents}
  .auth-bar{grid-row:1;position:relative;z-index:2;background:var(--paper)}
  .auth-film{grid-row:2;position:relative;height:clamp(200px,34svh,320px)}
  .auth-video{object-position:50% 64%}
  .auth-film-copy{bottom:20px}
  .auth-film-copy h2{font-size:clamp(22px,6vw,30px)}
  .auth-film-copy p{display:none}
  .auth-bar .lockup img{height:24px}
  .auth-main{grid-row:3;align-items:flex-start;padding-top:32px}
}
@media (prefers-reduced-motion:reduce){.auth-video{display:none}.auth-film{background:var(--well) url("../media/portal-loop-poster.jpg?v=4") 50% 50%/cover no-repeat}}

/* error pages */
.oops{display:grid;place-items:center;min-height:60svh;text-align:center}
.oops .h1{margin-top:10px}
.oops p{margin-top:12px;color:var(--muted)}
.oops .row{justify-content:center;margin-top:24px}

/* ── responsive ──────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1200px){
  .g-main,.g-side{grid-template-columns:minmax(0,1fr)}
  .stats{--n:2!important}
  .stats .stat:nth-child(odd){border-left:0}
  .stats .stat:nth-child(n+3){border-top:1px dashed var(--dash)}
  .doc-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);padding:10px;transform:translateX(-106%);transition:transform .32s var(--out);visibility:hidden}
  html[data-drawer=open] .rail{transform:none;visibility:visible}
  .rail-toggle{display:none}
  .rail-close{display:inline-grid}
  .scrim{display:block;position:fixed;inset:0;z-index:35;background:rgba(13,24,35,.42);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
  html[data-drawer=open] .scrim{opacity:1;pointer-events:auto}
  .top-menu{display:inline-grid}
  .g-2,.g-3,.form-grid,.form-grid-3{grid-template-columns:minmax(0,1fr)}
  .chain{--n:2!important;row-gap:20px}
}
@media (max-width:640px){
  .stats{--n:1!important}
  .stats .stat{border-left:0!important}
  .stats .stat+.stat{border-top:1px dashed var(--dash)}
  .top-link .t{display:none}
  .page-head{align-items:flex-start}
  .table{font-size:14px}
  .table th,.table td{padding:12px 12px}
  .table th:first-child,.table td:first-child{padding-left:16px}
  .table th:last-child,.table td:last-child{padding-right:16px}
  .hide-sm{display:none}
  .kv-row{grid-template-columns:minmax(0,1fr);gap:2px}
  .doc-meta{grid-template-columns:minmax(0,1fr)}
  .doc-title{text-align:left}
  .doc-totals div{grid-template-columns:1fr 120px}
  .sheet-head,.sheet-body,.sheet-foot{padding-inline:16px}
  .msg{padding-inline:16px;grid-template-columns:32px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .btn-pl i{animation:none!important}
}

/* ── print: the invoice alone ────────────────────────────────────────────────────────────────────────────── */
@media print{
  @page{margin:14mm}
  html,body{background:#fff}
  .rail,.top,.foot,.imp,.page-head,.no-print,.flashes,.scrim{display:none!important}
  .app{display:block}
  .page{padding:0;max-width:none}
  .doc{border:0;box-shadow:none;padding:0;max-width:none}
}