/* Client portal: brand design language "Direction B" (company/assets/brand-tokens.css,
   adopted 2026-09-27, Task #442/#445). Signika, the logo's 22-degree slant, a charcoal
   band with a ghosted logo, white page, no cards, shadows or pills. Shared by every
   portal template; page-specific rules stay inline in each template. */
@font-face{font-family:"Signika";font-style:normal;font-weight:300 700;font-display:swap;src:url("/static/signika-latin.woff2") format("woff2")}
:root{
  --paper:#FFFFFF;--ground:#EDEDEB;--ink:#2D2D2D;--ink-2:#5E5D5A;--hair:#DAD9D5;--divider:#B3B1AC;--rule:#2D2D2D;
  --band:#2D2D2D;--band-ink:#F2F2F0;--band-ink-2:#BDBCB8;--ghost:.16;
  --confirmed:#8CA9BD;--review:#A09E9A;--gap:#B0402F;--gap-soft:#F4E9E6;--warn:#8C6212;--na:#E2E1DD;--link:#4A6E86;
  --btn-bg:#2D2D2D;--btn-ink:#FFFFFF;
  --slant:-22deg;
  --sans:"Signika",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#171716;--ground:#222221;--ink:#ECEBE8;--ink-2:#A6A5A1;--hair:#343432;--divider:#55544F;--rule:#ECEBE8;
    --band-ink-2:#B3B2AE;--ghost:.13;
    --review:#8E8C88;--gap:#E07A68;--gap-soft:#3A2522;--warn:#D3A04A;--na:#3A3937;--link:#8CA9BD;
    --btn-bg:#ECEBE8;--btn-ink:#1A1A19;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#171716;--ground:#222221;--ink:#ECEBE8;--ink-2:#A6A5A1;--hair:#343432;--divider:#55544F;--rule:#ECEBE8;
  --band-ink-2:#B3B2AE;--ghost:.13;
  --review:#8E8C88;--gap:#E07A68;--gap-soft:#3A2522;--warn:#D3A04A;--na:#3A3937;--link:#8CA9BD;
  --btn-bg:#ECEBE8;--btn-ink:#1A1A19;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55;font-size:15.5px;-webkit-font-smoothing:antialiased}
a{color:var(--link)}

/* the band */
.band{background:var(--band);color:var(--band-ink);position:relative;overflow:hidden}
:root[data-theme="dark"] .band{border-bottom:1px solid #3A3A38}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .band{border-bottom:1px solid #3A3A38}}
.band .ghost{position:absolute;right:-50px;top:-40px;width:320px;height:auto;opacity:var(--ghost);pointer-events:none}
.band .in{position:relative;max-width:980px;margin:0 auto;padding:18px 24px 28px}
.band .mast{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap}
.band .firm{display:flex;align-items:center;gap:12px;font-weight:600;font-size:16px;color:#fff}
.band .firm svg{width:40px;height:38px;flex:none}
.band .firm span{display:block;font-weight:400;font-size:13.5px;color:var(--band-ink-2)}
.band .who{font-size:14px;color:var(--band-ink-2);text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.band .who b{display:block;color:#fff;font-size:16px;font-weight:600}
.band .who a{color:var(--band-ink-2)}
.band .who .line{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.band h1{margin:22px 0 0;font-size:34px;line-height:1.08;font-weight:600;letter-spacing:-.015em;text-wrap:balance;color:#fff;max-width:30ch}
.band .lede{margin:10px 0 0;color:var(--band-ink-2);max-width:62ch}
.band select,.band .switch button{font:inherit;font-size:13px;padding:3px 7px;border:1px solid #6B6A66;border-radius:2px;background:transparent;color:var(--band-ink)}
.band select option{color:#2D2D2D;background:#fff}
.band .switch{display:flex;gap:6px;align-items:center}
.band .switch button{cursor:pointer}

/* theme selector: a plain form, works with script-src 'none' */
.theme{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--band-ink-2)}
.theme .seg{display:inline-flex;border:1px solid #6B6A66;border-radius:2px;overflow:hidden}
.theme button{font:inherit;font-size:12.5px;padding:2px 9px;border:0;border-right:1px solid #6B6A66;background:transparent;color:var(--band-ink-2);cursor:pointer}
.theme button:last-child{border-right:0}
.theme button[aria-pressed="true"]{background:var(--band-ink);color:#2D2D2D;font-weight:600}
.theme button:focus-visible{outline:2px solid var(--confirmed);outline-offset:1px}

/* page body */
.wrap{max-width:980px;margin:0 auto;padding-inline:24px;padding-block:28px 72px;display:flex;flex-direction:column;gap:40px}
h2{margin:0 0 12px;font-size:20px;font-weight:600;letter-spacing:-.005em}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec-head .count{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.quiet{color:var(--ink-2);font-size:14.5px;max-width:64ch;margin:0}

/* controls */
.btn{font-family:var(--sans);font-size:14px;font-weight:600;padding:8px 16px;border-radius:2px;border:1.5px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-ink);cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block;line-height:1.4}
.btn.o{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:default}
.btn:focus-visible{outline:2px solid var(--link);outline-offset:2px}
input[type=email],input[type=text],input:not([type]),textarea,select.fld{font:inherit;font-size:16px;padding:.6rem .75rem;border:1.5px solid var(--ink);border-radius:2px;background:var(--paper);color:var(--ink);width:100%}
input:focus,textarea:focus,select:focus{outline:2px solid var(--link);outline-offset:1px}
label.fld{display:block;font-size:14px;font-weight:600;margin:0 0 6px}

/* status: a slanted slab and a plain word, never a pill */
.st{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;white-space:nowrap}
.st::before{content:"";width:13px;height:9px;flex:none;transform:skewX(var(--slant));box-sizing:border-box}
.st-ok::before{background:var(--confirmed)}
.st-review::before{background:var(--review)}
.st-need::before{border:1.5px solid var(--ink)}
.st-resub{color:var(--gap)} .st-resub::before{border:1.5px solid var(--gap)}
.st-na{color:var(--ink-2);font-weight:400} .st-na::before{background:var(--na)}

/* messages */
.aside{background:var(--ground);padding:14px 18px;font-size:14.5px}
.aside b{font-weight:600}
.fix{font-size:14px;color:var(--ink);padding:10px 14px;background:var(--gap-soft);white-space:pre-line}
.fix b{color:var(--gap);font-weight:600}
.flash{font-size:14.5px;padding:10px 14px;background:var(--ground)}
.flash.warn{background:var(--gap-soft)}
.flash.warn::before{content:"";display:inline-block;width:12px;height:8px;border:1.5px solid var(--gap);transform:skewX(var(--slant));margin-right:9px}

@media (max-width:640px){
  body{font-size:15px}
  .band .in{padding:16px 18px 24px}
  .band .who{text-align:left;align-items:flex-start}
  .band .who .line{justify-content:flex-start}
  .band .ghost{width:220px;right:-60px;top:-20px}
  .band h1{font-size:27px}
  .wrap{padding-inline:18px;gap:32px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}