/* Private workspace metal. Adapted principles, not copied component artwork:
   simurai.com/lab/2011/08/21/brushed-metal: layered, unequal-period grain;
   Adobe Substance PBR Guide Part2/OpenPBR: colored reflection and roughness;
   joshwcomeau.com/css/designing-shadows: coherent upper-left light/elevation;
   Apple Materials: legibility and hierarchy. CSS approximates metal; it is not PBR.
   Large faces need broad reflected tone, fine grain and a bevel. A border alone
   does not make a flat fill metallic. Controls use a smaller, tighter reflection.
   No moving shine, filters, overlays, external textures or permission changes. */
:root {
  /* Exact bright red stops from the approved developer badge: red/ring gradients. */
  --metal-face:#ff3047; --metal-face-high:#ff6073; --metal-face-low:#fb1f3e;
  --metal-ink:#000; --metal-muted:#000; --metal-line:#a42c43;
  --metal-reflect:255 156 169; --metal-edge:255 208 213;
  --metal-selection:#242933; --metal-selection-high:#424c5a; --metal-selection-low:#1c2029;
  --metal-selection-ink:#fff; --metal-selection-muted:#e7d9f5;
  --metal-selection-reflect:197 186 218; --metal-selection-edge:215 207 230;
  --metal-button:#242933; --metal-button-high:#424c5a; --metal-button-low:#1c2029;
  --metal-button-ink:#fff; --metal-button-reflect:197 186 218; --metal-button-edge:215 207 230;
  --metal-neutral:#282e36; --metal-neutral-high:#303740; --metal-neutral-low:#262c34;
  --metal-accent:#100316; --metal-green:#adffc0;
}
:root[data-staff-theme="oktober"] {
  --metal-face:#323e4d; --metal-face-high:#49596c; --metal-face-low:#26303e;
  --metal-ink:#f1f3f6; --metal-muted:#e0e6ed; --metal-line:#718198;
  --metal-reflect:171 190 208; --metal-edge:186 202 217;
  --metal-selection:#ec7b2f; --metal-selection-high:#f39946; --metal-selection-low:#d8752d;
  --metal-selection-ink:#000; --metal-selection-muted:#000;
  --metal-selection-reflect:255 184 106; --metal-selection-edge:255 201 141;
  --metal-button:#ec7b2f; --metal-button-high:#f39946; --metal-button-low:#d8752d;
  --metal-button-ink:#000; --metal-button-reflect:255 184 106; --metal-button-edge:255 201 141;
  --metal-accent:#b2ff91; --metal-green:#adffc0;
}
/* Element palettes share the approved grain, reflection, bevel and control sizes. */
:root[data-staff-theme="ice"] {
  --metal-face:#32b0cc; --metal-face-high:#39c8d5; --metal-face-low:#218fba;
  --metal-ink:#000; --metal-muted:#000; --metal-line:#19657d;
  --metal-reflect:184 241 250; --metal-edge:213 245 255;
  --metal-selection:#143a59; --metal-selection-high:#285e7f; --metal-selection-low:#102e4b;
  --metal-selection-ink:#fff; --metal-selection-muted:#e0f5ff;
  --metal-selection-reflect:153 218 244; --metal-selection-edge:208 239 251;
  --metal-button:#143a59; --metal-button-high:#285e7f; --metal-button-low:#102e4b;
  --metal-button-ink:#fff; --metal-button-reflect:153 218 244; --metal-button-edge:208 239 251;
  --metal-accent:#031724; --metal-green:#b6ffd9;
}
:root[data-staff-theme="wind"] {
  --metal-face:#b9d7d0; --metal-face-high:#d0bdea; --metal-face-low:#9fcfbe;
  --metal-ink:#161122; --metal-muted:#161122; --metal-line:#657c7e;
  --metal-reflect:232 235 253; --metal-edge:241 243 255;
  --metal-selection:#665176; --metal-selection-high:#78618a; --metal-selection-low:#564064;
  --metal-selection-ink:#fff; --metal-selection-muted:#f3edff;
  --metal-selection-reflect:214 204 236; --metal-selection-edge:235 230 249;
  --metal-button:#665176; --metal-button-high:#78618a; --metal-button-low:#564064;
  --metal-button-ink:#fff; --metal-button-reflect:214 204 236; --metal-button-edge:235 230 249;
  --metal-accent:#352447; --metal-green:#c8ffe2;
}
:root[data-staff-theme="earth"] {
  --metal-face:#414b45; --metal-face-high:#536057; --metal-face-low:#37413c;
  --metal-ink:#f4f2e8; --metal-muted:#f4f2e8; --metal-line:#8f9c89;
  --metal-reflect:222 235 207; --metal-edge:235 241 225;
  --metal-selection:#244c3e; --metal-selection-high:#365f4c; --metal-selection-low:#1d3f33;
  --metal-selection-ink:#fff; --metal-selection-muted:#ecf4df;
  --metal-selection-reflect:185 218 188; --metal-selection-edge:217 235 216;
  --metal-button:#d4a66b; --metal-button-high:#e2bb88; --metal-button-low:#bd8b51;
  --metal-button-ink:#18130d; --metal-button-reflect:237 212 176; --metal-button-edge:247 230 205;
  --metal-accent:#f2d6ac; --metal-green:#c8ffd0;
}
/* Separate accent-color alternatives. Ice/Wind above remain the blended copies. */
:root[data-staff-theme="ice-solid"] {
  --metal-face:#adbfc9; --metal-face-high:#c1d0d7; --metal-face-low:#9badbb;
  --metal-ink:#0a1925; --metal-muted:#0a1925; --metal-line:#596f80;
  --metal-reflect:219 236 245; --metal-edge:234 245 251;
  --metal-selection:#31b8c7; --metal-selection-high:#54c9d4; --metal-selection-low:#28a7b8;
  --metal-selection-ink:#071c27; --metal-selection-muted:#071c27;
  --metal-selection-reflect:184 241 250; --metal-selection-edge:213 245 255;
  --metal-button:#143a59; --metal-button-high:#285e7f; --metal-button-low:#102e4b;
  --metal-button-ink:#fff; --metal-button-reflect:153 218 244; --metal-button-edge:208 239 251;
  --metal-accent:#123e59; --metal-green:#b6ffd9;
}
:root[data-staff-theme="wind-solid"] {
  --metal-face:#c6c5cf; --metal-face-high:#d9d7df; --metal-face-low:#b9b9c4;
  --metal-ink:#20172b; --metal-muted:#20172b; --metal-line:#767180;
  --metal-reflect:235 232 247; --metal-edge:245 242 252;
  --metal-selection:#aed9c7; --metal-selection-high:#bce3d2; --metal-selection-low:#9fcdb9;
  --metal-selection-ink:#182920; --metal-selection-muted:#182920;
  --metal-selection-reflect:221 244 233; --metal-selection-edge:235 250 242;
  --metal-button:#665176; --metal-button-high:#78618a; --metal-button-low:#564064;
  --metal-button-ink:#fff; --metal-button-reflect:214 204 236; --metal-button-edge:235 230 249;
  --metal-accent:#352447; --metal-green:#c8ffe2;
}
:root {--ink:var(--metal-ink);--muted:var(--metal-muted);--line:var(--metal-line);--teal:var(--metal-accent);--surface:var(--metal-face);--bg:var(--metal-face)}
/* Coated/brushed metal: a visible soft reflection across the colored face.
   Three low-opacity grain periods avoid a uniform ruled-paper appearance.
   Every face stop is readable; no white stripe is laid over the text. */
.main,.access-list,.access-detail,.reading-pane,.staff-texting-reader,
.folders,.message-list,.staff-texting-threads,.panel,.metrics,.staff-texting-layout,
.review-sheet,.consent-preview {
  color:var(--metal-ink);background-color:var(--metal-face);
  background-image:
    repeating-linear-gradient(0deg,rgb(var(--metal-reflect)/.030) 0px,transparent .7px,transparent 2.7px),
    repeating-linear-gradient(0deg,transparent 0px,transparent 4.1px,#16050c08 4.6px,transparent 5.3px),
    repeating-linear-gradient(0deg,transparent 0px,transparent 7.3px,rgb(var(--metal-reflect)/.022) 7.8px,transparent 8.7px),
    linear-gradient(180deg,rgb(var(--metal-edge)/.22) 0,transparent 8px),
    linear-gradient(112deg,var(--metal-face) 0%,var(--metal-face-high) 15%,var(--metal-face) 28%,var(--metal-face-low) 47%,var(--metal-face) 68%,color-mix(in srgb,var(--metal-face-high) 65%,var(--metal-face)) 87%,var(--metal-face) 100%);
  box-shadow:inset 0 1px rgb(var(--metal-edge)/.70),inset 1px 0 rgb(var(--metal-reflect)/.20),inset 0 -1px #0003;
}
/* The banner sits outside the width-limited content column. */
.main{--staff-main-pad:28px}
.main>.workspace-bar{margin:0 calc(-1 * var(--staff-main-pad));padding:13px var(--staff-main-pad)}
@media(min-width:1650px){.main{--staff-main-pad:50px;padding-inline:50px}}
@media(max-width:1200px){.main{--staff-main-pad:22px}}
@media(max-width:700px){.main{--staff-main-pad:17px}}
/* Black/silver frame. The reflected silver lives in the rim, never over prose. */
.panel,.metrics,.staff-texting-layout,.review-sheet,.consent-preview {
  border-color:#20252e;
  box-shadow:0 0 0 1px #88929e,inset 0 1px rgb(var(--metal-edge)/.65),inset 1px 0 rgb(var(--metal-reflect)/.15),inset 0 -1px #0004,0 2px 5px #0003;
}
/* Small convex controls: colored soft-box reflection, tight upper bevel,
   quieter lower/right return. Reflection breadth scales with each control. */
.btn,.primary,.nav[aria-current=page],
.access-report[aria-pressed=true],.record-row[aria-pressed=true],.records-row[aria-pressed=true],
.folder[aria-pressed=true],.message-row[aria-pressed=true],.staff-texting-thread[aria-pressed=true],
.billing-list tr[aria-selected=true] {
  --finish-face:var(--metal-selection);--finish-high:var(--metal-selection-high);--finish-low:var(--metal-selection-low);
  --finish-reflect:var(--metal-selection-reflect);--finish-edge:var(--metal-selection-edge);
  --ink:var(--metal-selection-ink);--muted:var(--metal-selection-muted);
  color:var(--ink);text-shadow:none;background-color:var(--finish-face);
  --finish-paint:
    linear-gradient(100deg,rgb(var(--finish-edge)/.90),rgb(var(--finish-reflect)/.16) 45%,rgb(var(--finish-edge)/.42)),
    linear-gradient(100deg,rgb(var(--finish-reflect)/.12),transparent 45%,rgb(var(--finish-reflect)/.30)),
    repeating-linear-gradient(0deg,rgb(var(--finish-reflect)/.025) 0px,transparent .7px,transparent 2.7px),
    linear-gradient(116deg,var(--finish-face) 0%,var(--finish-high) 16%,var(--finish-face) 35%,var(--finish-low) 62%,var(--finish-face) 100%);
  --finish-size:100% 2px,100% 1px,100% 100%,100% 100%;
  background-image:var(--finish-paint);background-size:var(--finish-size);background-position:top left,bottom left,center,center;background-repeat:no-repeat;
  border-color:#323640;box-shadow:inset 1px 0 rgb(var(--finish-edge)/.32),inset -1px 0 #0003,0 1px 1px #0002,0 2px 3px #0002;
}
.btn,.primary {--finish-face:var(--metal-button);--finish-high:var(--metal-button-high);--finish-low:var(--metal-button-low);--finish-reflect:var(--metal-button-reflect);--finish-edge:var(--metal-button-edge);--ink:var(--metal-button-ink);color:var(--ink)}
/* The same upper-left lighting remains on hover, without a traveling stripe. */
.btn:hover,.primary:hover,.nav[aria-current=page]:hover,
.access-report[aria-pressed=true]:hover,.record-row[aria-pressed=true]:hover,.records-row[aria-pressed=true]:hover,
.folder[aria-pressed=true]:hover,.message-row[aria-pressed=true]:hover,.staff-texting-thread[aria-pressed=true]:hover {
  color:var(--ink);border-color:#9aa8b8;background-image:var(--finish-paint);background-size:var(--finish-size);background-position:top left,bottom left,center,center;
  box-shadow:inset 0 1px rgb(var(--finish-edge)/.75),inset 1px 0 rgb(var(--finish-edge)/.4),inset -1px 0 #0002,0 1px 1px #0002,0 2px 3px #0002;
}
.btn:active,.primary:active,.nav[aria-current=page]:active,
.access-report[aria-pressed=true]:active,.record-row[aria-pressed=true]:active,.records-row[aria-pressed=true]:active,
.folder[aria-pressed=true]:active,.message-row[aria-pressed=true]:active,.staff-texting-thread[aria-pressed=true]:active {
  color:var(--ink);background-image:linear-gradient(var(--finish-low),var(--finish-face));background-size:100% 100%;box-shadow:inset 0 1px 2px #0004;
}
.access-report[aria-pressed=true] :is(strong,.small),.record-row[aria-pressed=true] :is(strong,.small),.records-row[aria-pressed=true] :is(strong,.small),.message-row[aria-pressed=true] :is(strong,.small) {color:inherit}
/* Quiet headers and small secondary surfaces use dark metal, white type. */
.side,.workspace-bar,.section-title,.dialog-head,.review-actions,.footer-action,
.review-notes,.options,.recipient,.toast,.staff-texting-message,.staff-texting-message.outgoing {
  --ink:#f1f3f6;--muted:#c5cdd6;--teal:#d4bcec;color:var(--ink);
  background-color:#171b21;
  background-image:linear-gradient(180deg,#d2dce536,transparent 2px),linear-gradient(110deg,#252b33,#191e25 30%,#171c23);
  box-shadow:inset 0 1px #aeb9c233,inset 0 -1px #0005;
}
.side :is(.brand,.auth-brand),.workspace-bar>span:first-child,.review-notes :is(h2,ul),.section-title :is(h2,h3),.staff-texting-message .small {color:#f1f3f6}
.side .staff,.side-foot,.side .nav:not([aria-current=page]),.side .nav-logout {color:#d0c6db}
:root[data-staff-theme="oktober"] .side:before {background:linear-gradient(90deg,#c16c2c,#ed8331 40%,#adffc0 100%)}
:root[data-staff-theme="ice"] .side:before {background:linear-gradient(90deg,#143a59,#32b0cc 55%,#c8ecff)}
:root[data-staff-theme="wind"] .side:before {background:linear-gradient(90deg,#aa8dcb,#b2d9cc 70%,#e4d9f2)}
:root[data-staff-theme="earth"] .side:before {background:linear-gradient(90deg,#365f4c,#b1bd8d 55%,#d4a66b)}
.main :is(.small,.caption,.muted,label,.grant-line,.records-grant,.facts dt,.result-count,.report-meta,.record-search,.record-section h4,.record-section p,.facts dd,.access-prose,.company-tabs span,.family-nav button) {color:var(--muted)}
.main :is(.btn,.primary) {color:var(--metal-button-ink)}
.main :is(.btn,.primary):is(:hover,:active) {color:var(--metal-button-ink)}
.main .link,.main a {color:var(--teal)}
.record-row strong,.access-report strong {color:inherit}
/* Editable fields are recessed, not shiny panes. A lit lower edge suggests metal. */
input:not([type=checkbox]):not([type=radio]),select,textarea,.record-search input {
  color:#f1f3f6;background:#161c23;border-color:#7f8996;
  background-image:linear-gradient(180deg,#11171e,#1b232c);
  box-shadow:inset 0 1px 2px #0005,0 1px #c5d2df33;text-shadow:none;
}
input::placeholder,textarea::placeholder {color:#aeb8c4;opacity:1}
input[type=checkbox],input[type=radio] {accent-color:var(--metal-accent)}
.badge.neutral,.badge.draft {background:#262e37;color:#e6ebf0;border-color:#8995a3;box-shadow:inset 0 1px #c2d0dd40}
.badge:not(.neutral):not(.draft) {background:#173326;color:#b9ffd0;border-color:#678c75}
/* Document and vendor identity are intentionally outside the finish system. */
.paper,.paper :is(.small,.caption,.document-label) {color:var(--ink)}
.provider-buttons .btn,.provider-buttons .btn:is(:hover,:active) {color:#182432;background:#fff;box-shadow:inset 0 1px #fff,0 1px 2px #0003}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {outline:2px solid var(--metal-accent);outline-offset:3px}
.side :focus-visible,.record-search input:focus-visible {outline-color:#dac0fb}
/* System contrast remains authoritative. Static finishes have no motion to disable. */
@media (prefers-contrast:more) {
  .main,.access-list,.access-detail,.panel,.reading-pane {background-image:none}
  .btn,.primary,.nav[aria-current=page],.access-report[aria-pressed=true],.record-row[aria-pressed=true],.records-row[aria-pressed=true] {background-image:none;border-color:currentColor}
}
@media (forced-colors:active) {
  :root {--ink:CanvasText;--muted:CanvasText;--teal:LinkText}
  .main,.side,.workspace-bar,.panel,.access-list,.access-detail,.reading-pane,.consent-preview,.review-notes,.section-title,.options,.recipient,.toast {background:Canvas;color:CanvasText;box-shadow:none;border-color:CanvasText}
  .btn,.primary,.nav[aria-current=page],.access-report[aria-pressed=true],.record-row[aria-pressed=true],.records-row[aria-pressed=true],.folder[aria-pressed=true],.message-row[aria-pressed=true],.staff-texting-thread[aria-pressed=true],.billing-list tr[aria-selected=true] {--ink:HighlightText;--muted:HighlightText;background:Highlight;color:HighlightText;box-shadow:none;border-color:Highlight}
  input:not([type=checkbox]):not([type=radio]),select,textarea,.record-search input {color:FieldText;background:Field;box-shadow:none;border-color:FieldText}
}
/* Explicit base-sheet selectors that otherwise outrank the shared material. */
.side a.nav[aria-current=page]:hover {color:var(--metal-selection-ink);border-color:#9aa8b8;background-image:var(--finish-paint);background-size:var(--finish-size);background-position:top left,bottom left,center,center}
.side a.nav[aria-current=page]:active {color:var(--metal-selection-ink);background-image:linear-gradient(var(--finish-low),var(--finish-face));background-size:100% 100%}
.main .toolbar>.small:first-child,.main .records-head>.small,.main .record-search,.main .records-heading>.small {color:var(--muted)}
.main .company-tabs [aria-current=page],.main .company-tabs button[aria-selected=true],.main .records-families button {color:var(--ink);border-color:var(--metal-accent)}
@media(forced-colors:active) {.side a.nav[aria-current=page]:is(:hover,:active){color:HighlightText;background:Highlight}}
/* Unselected rows remain calm and legible when hovered. */
.folder:hover,.message-row:hover,.access-report:hover,.records-row:hover,.record-row:hover,.staff-texting-thread:hover {color:var(--metal-ink);background-color:var(--metal-face-high)}
.folder:not([aria-pressed=true]):hover,.message-row:not([aria-pressed=true]):hover,.access-report:not([aria-pressed=true]):hover,.records-row:not([aria-pressed=true]):hover,.record-row:not([aria-pressed=true]):hover,.staff-texting-thread:not([aria-pressed=true]):hover {background-image:none;color:var(--metal-ink)}
.folder[aria-pressed=true]:hover,.message-row[aria-pressed=true]:hover,.access-report[aria-pressed=true]:hover,.records-row[aria-pressed=true]:hover,.record-row[aria-pressed=true]:hover,.staff-texting-thread[aria-pressed=true]:hover {color:var(--metal-selection-ink);background-color:var(--metal-selection)}
@media(forced-colors:active){.folder:hover,.message-row:hover,.access-report:hover,.records-row:hover,.record-row:hover,.staff-texting-thread:hover{color:HighlightText;background:Highlight}}
/* Status/recovery boxes retain their own ink rather than inheriting black from Fire. */
.conflict-box,.access-uncertain,.access-source-hold,.accounts-uncertain,.recovery-uncertain,
.staff-qbo-hold,.staff-texting-hold,.billing-texts-hold,.billing-warning,.billing-hold:not(:empty),
.dialog-status.warning,.warning,.error:not(:empty),.message.error:not(:empty),.success,
.setup-key,.recovery-list,.billing-texts-disclosure,.options label:has(input:checked) {
  --ink:#fff1e5;--muted:#fff1e5;--teal:#ead2fb;color:var(--ink);
}
@media(forced-colors:active){.warning,.error:not(:empty),.success,.conflict-box,.access-uncertain{--ink:CanvasText;--muted:CanvasText;color:CanvasText;background:Canvas}}

/* Color roles stay distinct: navy/lavender actions, aqua/seafoam selections. */
:root:is([data-staff-theme="ice-solid"],[data-staff-theme="wind-solid"]) .side .nav[aria-current=page] {
  --metal-selection:var(--metal-button);--metal-selection-high:var(--metal-button-high);--metal-selection-low:var(--metal-button-low);
  --metal-selection-ink:var(--metal-button-ink);--metal-selection-muted:var(--metal-button-ink);
  --metal-selection-reflect:var(--metal-button-reflect);--metal-selection-edge:var(--metal-button-edge);
}
:root:is([data-staff-theme="ice-solid"],[data-staff-theme="wind-solid"]) .main :is(.company-tabs [aria-current=page],.family-nav button[aria-pressed=true]) {
  background-color:var(--metal-selection);color:var(--metal-selection-ink);
  background-image:linear-gradient(180deg,rgb(var(--metal-selection-edge)/.22),transparent 3px);
  box-shadow:inset 0 1px rgb(var(--metal-selection-edge)/.5);
}
:root[data-staff-theme="ice-solid"] .side:before {background:#31b8c7}
:root[data-staff-theme="wind-solid"] .side:before {background:#aed9c7}
:root[data-staff-theme="earth"] .side:before {background:#d4a66b}
@media(forced-colors:active) {
  :root:is([data-staff-theme="ice-solid"],[data-staff-theme="wind-solid"]) .main :is(.company-tabs [aria-current=page],.family-nav button[aria-pressed=true]) {background:Highlight;color:HighlightText;box-shadow:none}
}