/* ══════════════════════════════════════════════════════════════════════════
   sf-final-app-surfaces.css — THE CUSTOMER APP SURFACES, ON BRAND
   Lane 04 of the final production pass. Loads LAST, after theme.css,
   sf-base.css, sf-refresh.css and tailwind.min.css.

   SCOPE. Everything here is scoped to `body.cc-app`, a class 04-app-surfaces.mjs
   stamps on the fourteen app pages and nowhere else — my-account, my-orders,
   login, register, forgot-password, reset-password, verify-email, unsubscribe,
   checkout, order-success, track, invoice, gate, 404. The marketing pages are
   another lane's and must not move because a token was re-pinned here.

   WHY A TOKEN RE-PIN IS NEEDED AT ALL. sf-refresh.css re-pinned the four
   GROUNDS onto the client's navy (--sf-bg / --sf-surface / --sf-elevated /
   --sf-band) and the accent. It did NOT re-pin the design-option token block
   further down theme.css (`--sf-tint-bg: #192227`, `--sf-soft-*`,
   `--sf-glass-fill`, `--sf-grad-*`, `--sf-contrast-*`, `--sf-shadow`), which is
   still solved against the SOLVER's near-neutral black base. Those tokens are
   what paint form fields, so every input on every app page was a grey-green
   #192227 well on a navy page — the "engine-default greys" in the owner's
   note. They are re-solved here for these pages only; the sitewide fix belongs
   to whoever owns sf-refresh.css and is REPORTED, not taken.

   COLOUR IS MEASURED, NOT PICKED. Every value below carries its WCAG ratio
   against the ground it actually composites over. Grounds on these pages:
     --sf-bg #060E1A (L 0.00427) · --sf-surface #0C1726 (L 0.00831)
     --sf-elevated #142235 (L 0.01549) · chrome #0B1A2C (L 0.00992)
   The floors are 4.5:1 for body text, 3:1 for large text and for UI edges
   (input borders, focus rings, disabled controls). Disabled states are given a
   solved fill+ink pair rather than an opacity fade, for the same reason
   BUILD-DEFAULTS gives the chrome one: an ink faded toward transparent walks
   back toward its own ground and no gate can measure what it lands on.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 0. THE APP TOKEN SET ═════════════════════════════════════════════════ */
body.cc-app {
  /* Native controls (checkbox, radio, select popup, scrollbar, autofill) draw
     themselves from the colour scheme, not from CSS. Without this line the age
     gate's three compliance boxes and checkout's three attestations are white
     browser squares on a navy card — the single loudest off-brand element on
     the whole flow, and one no colour rule can reach. */
  color-scheme: dark;

  /* -- FORM FIELDS --
     Fill is a navy step BELOW the card it sits in, so a field reads as a well.
     The fill alone cannot carry the 3:1 UI-edge floor on a dark ground (a
     legible fill step would be a lightness jump you could see from orbit), so
     the EDGE is a real 1px border and the fill is quiet:
       --cc-field-line #5D7285 vs --sf-elevated  3.21:1  (the card it sits on)
                               vs --sf-surface   3.61:1
                               vs --cc-field-bg  3.70:1  (its own fill)
     all three over the 3:1 floor. Focus lifts the same edge two steps to
     --sf-accent (#3FB6C9: 6.68:1 on elevated) and adds a ring.
       ink  #F0F6FA on #0A1424  16.92:1
       hint #7E93A6 on #0A1424   5.81:1  — placeholder text is TEXT and owes
                                          4.5:1; the engine's 50%-alpha ink
                                          composited to 4.74:1, four hundredths
                                          of margin on a value nothing measured. */
  --cc-field-bg: #0A1424;
  --cc-field-line: #5D7285;
  --cc-field-ph: #7E93A6;

  /* -- SEMANTIC STATES --
     Status is information, so the hues stay (a cool-only palette cannot say
     "expired" and "confirmed" apart), but every one is re-solved for a dark
     ground. The engine shipped light-theme values on all three:
       was #059669 → 4.25:1 on elevated   now #34D399 →  8.34:1
       was #dc2626 → 3.32:1               now #F87171 →  5.80:1
       was #B45309 → 2.66:1               now #F0B454 →  8.67:1
     The tinted panels behind them are 10% washes of the same ink, so a panel
     can never be a white rectangle on a navy page. */
  --cc-ok: #34D399;
  --cc-warn: #F0B454;
  --cc-danger: #F87171;
  --cc-ok-bg: rgb(52 211 153 / 0.10);
  --cc-ok-line: rgb(52 211 153 / 0.34);
  --cc-warn-bg: rgb(240 180 84 / 0.10);
  --cc-warn-line: rgb(240 180 84 / 0.32);
  --cc-danger-bg: rgb(248 113 113 / 0.10);
  --cc-danger-line: rgb(248 113 113 / 0.34);
  --cc-info-bg: rgb(63 182 201 / 0.10);
  --cc-info-line: rgb(87 214 228 / 0.34);

  /* -- DISABLED / BUSY --
     A solved pair, not opacity: ink #93A7BB on fill #1B2A40 measures 5.84:1
     and the edge #5D7285 clears 3:1 on both the fill and the card. */
  --cc-off-bg: #1B2A40;
  --cc-off-ink: #93A7BB;
  --cc-off-line: #5D7285;

  /* -- the engine's option tokens, re-solved onto the client's navy -- */
  --sf-tint-bg: var(--cc-field-bg);
  --sf-soft-bg: #0F1B2C;
  --sf-soft-ink: var(--cc-cyan-300);
  --sf-glass-fill: rgb(6 14 26 / 0.62);
  --sf-glass-fill-strong: rgb(6 14 26 / 0.85);
  --sf-grad-from: var(--cc-blue-600);
  --sf-grad-to: var(--cc-teal-700);
  --sf-contrast-bg: var(--cc-metal-100);
  --sf-contrast-ink: #060E1A;
  --sf-contrast-muted: #3B5065;
  --sf-contrast-accent: #135C6E;
  /* --sf-shadow is `95 148 173` — a LIGHT blue, which on a near-black page
     paints every card shadow as a halo. Shadows go back to being shadows. */
  --sf-shadow-rgb: 2 7 14;
}

/* ══ 1. GROUNDS ═══════════════════════════════════════════════════════════
   checkout.html carried `background:#F8F8F8` twice — once in its own <style>
   and once as an INLINE attribute on <main>, which no stylesheet can outrank;
   the module deletes both at the source, and this is the belt to that braces.
   404.html set no ground at all, so it rendered on the browser's default white
   with the dark-ground inks the rest of the page ships. ══════════════════ */
body.cc-app,
body.cc-app > main {
  background-color: var(--sf-bg);
  color: var(--sf-text);
}

/* ══ 2. FORM FIELDS ═══════════════════════════════════════════════════════
   The class list is explicit rather than `input` — the nav search box and the
   cart drawer's promo field are sitewide chrome and belong to another lane. */
body.cc-app .sf-input,
body.cc-app .auth-input,
body.cc-app .field-input,
body.cc-app .dark-input,
body.cc-app .input,
body.cc-app .gate-field input,
body.cc-app #auth-box input,
body.cc-app .email-display {
  background: var(--cc-field-bg);
  border: 1px solid var(--cc-field-line);
  border-radius: var(--cc-radius, 8px);
  color: var(--sf-text);
}
body.cc-app .sf-input::placeholder,
body.cc-app .auth-input::placeholder,
body.cc-app .field-input::placeholder,
body.cc-app .dark-input::placeholder,
body.cc-app .input::placeholder,
body.cc-app .gate-field input::placeholder,
body.cc-app #auth-box input::placeholder {
  color: var(--cc-field-ph);
  opacity: 1; /* Firefox fades ::placeholder by default — an alpha we did not solve */
}
body.cc-app .sf-input:hover,
body.cc-app .auth-input:hover,
body.cc-app .field-input:hover,
body.cc-app .dark-input:hover,
body.cc-app .input:hover,
body.cc-app .gate-field input:hover { border-color: #8FA3B6; }

/* FOCUS. Every one of these pages set `outline:none` on its own field class,
   at a specificity that beat sf-base's zero-specificity :focus-visible ring —
   so keyboard focus was invisible on all fourteen. It comes back, on the
   accent, with a ring wide enough to read on a dark ground. */
body.cc-app .sf-input:focus,
body.cc-app .auth-input:focus,
body.cc-app .field-input:focus,
body.cc-app .dark-input:focus,
body.cc-app .input:focus,
body.cc-app .gate-field input:focus,
body.cc-app #auth-box input:focus {
  /* !important because login.html sets its own weaker ring from an inline
     `onfocus="this.style.boxShadow=…10%…"` handler, which no stylesheet outranks
     — and a focus ring that is one strength on two of the fourteen pages and
     another on the rest is the inconsistency this lane exists to remove. */
  border-color: var(--sf-accent) !important;
  box-shadow: 0 0 0 3px rgb(63 182 201 / 0.28) !important;
  background: var(--cc-field-bg);
}
body.cc-app :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sf-accent) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}
/* Invalid fields say so on their own edge, not only in a message below. */
body.cc-app .sf-input:user-invalid,
body.cc-app .auth-input:user-invalid,
body.cc-app .field-input:user-invalid,
body.cc-app .input:user-invalid { border-color: var(--cc-danger); }

/* Chrome paints autofilled fields a hard yellow-white with black text. */
body.cc-app input:-webkit-autofill,
body.cc-app input:-webkit-autofill:hover,
body.cc-app input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sf-text);
  -webkit-box-shadow: 0 0 0 1000px var(--cc-field-bg) inset;
  caret-color: var(--sf-text);
}

/* Ticks and radios: the fill is the brand accent, the box is big enough to hit
   and carries a visible edge of its own. */
body.cc-app input[type="checkbox"],
body.cc-app input[type="radio"] {
  accent-color: var(--sf-accent);
  width: 17px;
  height: 17px;
  cursor: pointer;
}
body.cc-app input[type="checkbox"]:focus-visible,
body.cc-app input[type="radio"]:focus-visible { outline-offset: 3px !important; }

/* ══ 3. BUTTONS ═══════════════════════════════════════════════════════════
   Three registers, and they are sf-refresh's registers, not new ones — the
   whole point is that a checkout button and a home-page button are the same
   button. The engine had painted four of these `background:var(--sf-bg)`, i.e.
   the page ground: on gate.html the primary CTA measured 1.21:1 against its own
   card, which is not a low-contrast button, it is no button. */
body.cc-app .gate-btn,
body.cc-app .card .btn,
body.cc-app #confirm-btn,
body.cc-app a.btn:not(.btn-glass):not(.btn-secondary),
body.cc-app .btn-primary,
body.cc-app .co-btn-primary,
body.cc-app #primary-order-link,
body.cc-app #toolbar button {
  background: linear-gradient(135deg, var(--cc-blue-600) 0%, var(--cc-teal-700) 100%);
  color: #F4FCFF;                                   /* 6.35:1 on the darkest stop */
  border: 1px solid rgb(87 214 228 / 0.38);
  border-radius: var(--cc-radius, 8px);
  box-shadow: 0 10px 26px -14px rgb(0 0 0 / 0.85), inset 0 1px 0 rgb(240 246 250 / 0.14);
}
body.cc-app .gate-btn:hover,
body.cc-app .card .btn:hover,
body.cc-app #confirm-btn:hover,
body.cc-app a.btn:not(.btn-glass):not(.btn-secondary):hover,
body.cc-app .btn-primary:hover,
body.cc-app .co-btn-primary:hover,
body.cc-app #primary-order-link:hover,
body.cc-app #toolbar button:hover {
  background: linear-gradient(135deg, var(--cc-blue-500) 0%, var(--cc-teal-500) 100%);
  box-shadow: 0 12px 30px -12px rgb(22 191 209 / 0.55);
}
/* 404's second action had no rule anywhere in the built site — it rendered as
   bare body text beside a filled button. It takes the site's quiet register. */
body.cc-app .btn-glass,
body.cc-app .co-btn-secondary,
body.cc-app #secondary-order-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgb(63 182 201 / 0.10);
  color: var(--cc-cyan-100);                        /* 13.6:1 on the composited wash */
  border: 1.5px solid rgb(87 214 228 / 0.40);
  border-radius: var(--cc-radius, 8px);
  padding: 12px 26px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}
body.cc-app .btn-glass:hover,
body.cc-app .co-btn-secondary:hover,
body.cc-app #secondary-order-link:hover {
  background: rgb(63 182 201 / 0.18);
  border-color: var(--cc-cyan-300);
  color: #F0FCFF;
}

/* DISABLED — a solved pair, never a fade. gate.html shipped the disabled state
   as an INLINE `style="opacity:.45"` on the element, so `opacity:1` has to be
   forced; :disabled only matches while the control is actually disabled, so the
   enabled state is untouched. */
body.cc-app button:disabled,
body.cc-app .btn:disabled,
body.cc-app .btn-teal:disabled,
body.cc-app .btn-primary:disabled,
body.cc-app .gate-btn:disabled,
body.cc-app .co-btn:disabled,
body.cc-app .dark-btn:disabled,
body.cc-app .sf-btn-primary:disabled {
  opacity: 1 !important;
  background: var(--cc-off-bg) !important;
  background-image: none !important;
  color: var(--cc-off-ink) !important;              /* 5.84:1 on its own fill */
  border: 1px solid var(--cc-off-line) !important;  /* 3.21:1 on the card */
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}
body.cc-app .dark-input:disabled,
body.cc-app .sf-input:disabled,
body.cc-app .field-input:disabled,
body.cc-app .input:disabled {
  opacity: 1;
  background: var(--cc-off-bg);
  color: var(--cc-off-ink);
  border-color: var(--cc-off-line);
  cursor: not-allowed;
}

/* BUSY. The pages already swap the label to "Processing…" and disable the
   control; what was missing was any sign that a machine is working. The module
   stamps data-cc-busy while a clicked button is disabled — presentation only,
   it touches no money path — and this draws the spinner. */
body.cc-app button[data-cc-busy] {
  position: relative;
  padding-left: 2.6em;
}
body.cc-app button[data-cc-busy]::before {
  content: "";
  position: absolute;
  left: 1.1em;
  top: 50%;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  border: 2px solid var(--cc-off-line);
  border-top-color: var(--cc-cyan-300);
  border-radius: 50%;
  animation: cc-spin 0.7s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.cc-app button[data-cc-busy]::before { animation-duration: 3s; }
}

/* ══ 4. SEMANTIC STATE, INCLUDING THE ONES JAVASCRIPT SETS INLINE ═════════
   checkout.html, order-success.html and track.html assign `style.color` in JS
   from a light-theme palette (#059669 / #dc2626 / #B45309). An inline style
   beats any stylesheet, so these are the one place !important is the tool and
   not a shortcut. Ratios are against --sf-elevated, the worst ground of the
   three these ids appear on. */
body.cc-app #coupon-msg,
body.cc-app #affiliate-msg,
body.cc-app #s-pm-label,
body.cc-app #s-pm-amt,
body.cc-app #s-tax,
body.cc-app #status-eyebrow,
body.cc-app .step-done,
body.cc-app .ok { color: var(--cc-ok) !important; }          /* 8.34:1 */
body.cc-app #coupon-msg[data-state="error"],
body.cc-app .err,
body.cc-app .error-text { color: var(--cc-danger) !important; } /* 5.80:1 */

/* The three JS states that are NOT success. They are addressed by id + the
   text-carrying element so the success rule above cannot swallow them. */
body.cc-app #status-eyebrow.is-expired,
body.cc-app #status-eyebrow.is-failed { color: var(--cc-danger) !important; }

/* Message panels. gate.html and unsubscribe.html both shipped Tailwind's
   green-50/red-50 paper panels — white rectangles on a navy card. */
body.cc-app .message.success,
body.cc-app .gate-msg.success,
body.cc-app .msg-success {
  background: var(--cc-ok-bg) !important;
  border: 1px solid var(--cc-ok-line) !important;
  color: var(--cc-ok) !important;
}
body.cc-app .message.error,
body.cc-app .gate-msg.error,
body.cc-app .msg-error {
  background: var(--cc-danger-bg) !important;
  border: 1px solid var(--cc-danger-line) !important;
  color: var(--cc-danger) !important;
}

/* Status badges — my-orders and track carried six between them, every one a
   light-theme ink on a 10% wash: #b45309 measured 2.66:1, #065f46 1.93:1,
   #1d4ed8 under 2:1. Same shapes, re-solved inks. */
body.cc-app .status-badge,
body.cc-app .badge-pending_payment,
body.cc-app .badge-processing,
body.cc-app .badge-shipped,
body.cc-app .badge-delivered,
body.cc-app .badge-refunded { border-radius: var(--cc-radius, 8px); }
body.cc-app .status-processing,
body.cc-app .badge-processing {
  background: var(--cc-warn-bg);
  color: var(--cc-warn);                             /* 8.67:1 */
  border: 1px solid var(--cc-warn-line);
}
body.cc-app .badge-pending_payment {
  background: var(--cc-warn-bg);
  color: var(--cc-warn);
  border: 1px solid var(--cc-warn-line);
}
body.cc-app .status-shipped,
body.cc-app .badge-shipped {
  background: var(--cc-info-bg);
  color: var(--cc-cyan-300);                         /* 9.27:1 */
  border: 1px solid var(--cc-info-line);
}
body.cc-app .status-delivered,
body.cc-app .badge-delivered {
  background: var(--cc-ok-bg);
  color: var(--cc-ok);                               /* 8.34:1 */
  border: 1px solid var(--cc-ok-line);
}
body.cc-app .badge-refunded {
  background: rgb(166 186 203 / 0.10);
  color: var(--cc-metal-300);                        /* 8.02:1 */
  border: 1px solid rgb(166 186 203 / 0.28);
}
body.cc-app .step-inactive { color: var(--cc-metal-300); }  /* was a 25% fade */

/* ── 4b. THE LIGHT-THEME HEXES WRITTEN INTO `style` ATTRIBUTES ────────────
   checkout.html alone carries twenty-five `color:#059669` inline, most of them
   on the order-summary discount lines, plus #dc2626, #B45309, #92400e, #78350F,
   #98A2B3, #6B7280, #101828 and #1F2937 — a whole light-theme palette written
   into attributes, some in the served HTML and some in the JS that builds the
   summary. An attribute cannot be reached by class, so it is reached by its own
   text: `[style*="color:#059669"]` matches the literal wherever it was written,
   and the `rgb(...)` twin matches the same value once JS has set it as a
   property and Chrome has re-serialised it.

   The match is on `color:` + the value, never the bare hex, so a
   `background:#059669` is untouched. Inputs are excluded because
   `accent-color:` ends in the same six characters. */
body.cc-app *:not(input)[style*="color:#059669"],
body.cc-app *:not(input)[style*="color:#047857"],
body.cc-app *:not(input)[style*="color:#065f46"],
body.cc-app *:not(input)[style*="color: rgb(5, 150, 105)"] { color: var(--cc-ok) !important; }

body.cc-app *:not(input)[style*="color:#dc2626"],
body.cc-app *:not(input)[style*="color:#DC2626"],
body.cc-app *:not(input)[style*="color:#EF4444"],
body.cc-app *:not(input)[style*="color: rgb(220, 38, 38)"] { color: var(--cc-danger) !important; }

body.cc-app *:not(input)[style*="color:#B45309"],
body.cc-app *:not(input)[style*="color:#b45309"],
body.cc-app *:not(input)[style*="color:#92400e"],
body.cc-app *:not(input)[style*="color:#78350F"],
body.cc-app *:not(input)[style*="color: rgb(180, 83, 9)"] { color: var(--cc-warn) !important; }

body.cc-app *:not(input)[style*="color:#98A2B3"],
body.cc-app *:not(input)[style*="color:#6B7280"],
body.cc-app *:not(input)[style*="color:#1F2937"],
body.cc-app *:not(input)[style*="color:#101828"] { color: var(--cc-metal-300) !important; }

/* Paper panels written the same way. #EFF6FF / #DBEAFE / #FEF3C7 / #F0FDF4 /
   #FEF2F2 are Tailwind's 50-weight tints — white rectangles on a navy page. */
body.cc-app [style*="background:#EFF6FF"],
body.cc-app [style*="background:#F0FDF4"] {
  background: var(--cc-ok-bg) !important;
  border-color: var(--cc-ok-line) !important;
}
body.cc-app [style*="background:#FEF2F2"] {
  background: var(--cc-danger-bg) !important;
  border-color: var(--cc-danger-line) !important;
}
body.cc-app [style*="background:#FEF3C7"] {
  background: var(--cc-warn-bg) !important;
  border-color: var(--cc-warn-line) !important;
}
body.cc-app [style*="background:#DBEAFE"] { background: rgb(63 182 201 / 0.16) !important; }

/* Two inline inks the attribute rules cannot separate from their neighbours,
   named instead. `--sf-accent-3` is --cc-teal-600 #1B7C8C: 3.29:1 on the
   dashboard card, under the floor, and it is inline so nothing else can win. */
body.cc-app *[style*="color:var(--sf-accent-3)"],
body.cc-app p [onclick^="showPanel"] { color: var(--cc-cyan-300) !important; }  /* 9.27:1 */
body.cc-app .sidebar-link[onclick*="authLogout"] { color: var(--cc-metal-300) !important; }
body.cc-app .sidebar-link[onclick*="authLogout"]:hover { color: var(--sf-text) !important; }
/* invoice's RUO line is `.letter-disclaimer strong`, #EF4444 → 4.26:1. */
body.cc-app .letter-disclaimer strong { color: var(--cc-danger); }             /* 5.80:1 */

/* ══ 5. CARDS AND PANELS — ONE TREATMENT ACROSS ALL FOURTEEN ═════════════ */
body.cc-app .card,
body.cc-app .dark-card,
body.cc-app .pm-card,
body.cc-app .acct-panel,
body.cc-app .success-right > div {
  border-radius: var(--cc-radius, 8px);
}
body.cc-app .card,
body.cc-app .dark-card {
  background: var(--sf-elevated);
  border: 1px solid var(--cc-metal-line);
}
body.cc-app .pm-card { border-width: 1px; border-color: var(--cc-metal-line); }
body.cc-app .pm-card:hover { border-color: var(--sf-accent); }
body.cc-app .pm-card.selected {
  border-color: var(--sf-accent);
  box-shadow: 0 0 0 2px rgb(63 182 201 / 0.30);
}

/* ══ 6. THE ACCOUNT SIDEBAR ═══════════════════════════════════════════════
   my-account and my-orders shipped two different .sidebar-link designs — one
   uppercase and letter-spaced with a left rule, one a sentence-case pill with
   an icon — so the two halves of one account read as two products. The pill is
   the survivor; it is the register the rest of the site uses.
   Two other things come out here. The uppercase variant carried
   `text-shadow: 0 0 6px …` on every item and 0 0 11px on the active one — a
   GLOW, which is the owner's own storefront signature and is struck by
   doctrine. And Log Out was rgba(220,60,60) / #DC2626 on both pages: red is not
   in this brand (blue, white, grey, silver) and it measured 2.32:1 and 3.32:1.
   Signing out is not a destructive action; it is the quiet item. */
body.cc-app .sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 15px;
  border: none;
  border-left: 2px solid transparent;
  border-radius: var(--cc-radius, 8px);
  background: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  color: var(--cc-metal-300);                        /* 9.01:1 on --sf-surface */
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
body.cc-app .sidebar-link:hover {
  background: rgb(166 186 203 / 0.07);
  color: var(--sf-text);
  text-shadow: none;
}
body.cc-app .sidebar-link.active {
  background: rgb(63 182 201 / 0.10);
  border-left-color: var(--sf-accent);
  color: var(--sf-text);                             /* 14.60:1 */
  font-weight: 700;
  text-shadow: none;
}
body.cc-app .sidebar-link.logout,
body.cc-app #acct-sidebar .sidebar-link.logout {
  color: var(--cc-metal-300) !important;
  text-shadow: none !important;
}
body.cc-app .sidebar-link.logout:hover,
body.cc-app #acct-sidebar .sidebar-link.logout:hover {
  color: var(--sf-text) !important;
  background: rgb(166 186 203 / 0.07);
}
/* The dashboard's inline links were --cc-teal-600 #1B7C8C: 3.69:1, under the
   floor. The site's link colour on a card is the cyan end of the ramp. */
body.cc-app #dash-orders-link,
body.cc-app .acct-panel a:not(.dark-btn):not(.btn),
body.cc-app .acct-panel [onclick] { color: var(--cc-cyan-300); }  /* 9.27:1 */

/* NOT TAKEN, deliberately. The nav's account dropdown (.lum-acct-item.danger,
   #dc2626, from account-menu.js) and the mobile drawer's Sign Out
   (.snav-mob-btn-danger) are the same red — but both are SITEWIDE chrome shared
   with the twelve marketing pages, and half-recolouring a shared component is a
   worse defect than the red. Both clear 4.5:1; they are reported, not taken. */

/* ══ 7. CHECKOUT ══════════════════════════════════════════════════════════ */
/* The step rail was authored for the white ground: a #fff pending disc with
   #98A2B3 numerals (2.42:1 against the new ground) and a #101828 done disc. */
body.cc-app .step-circle.pending {
  background: transparent;
  color: var(--cc-metal-300);                        /* 9.68:1 on --sf-bg */
  border: 2px solid var(--cc-field-line);            /* 3.88:1 on --sf-bg */
}
body.cc-app .step-circle.done {
  background: var(--cc-teal-700);
  color: #F0FCFF;                                    /* 7.6:1 on #135C6E */
  border: 2px solid var(--cc-teal-700);
}
body.cc-app .step-circle.active {
  background: var(--sf-accent);
  color: var(--sf-accent-text);                      /* 7.81:1 */
  border: 2px solid var(--sf-accent);
}
body.cc-app .step-line { background: var(--cc-field-line); }
body.cc-app #step-label-1,
body.cc-app #step-label-2,
body.cc-app #step-label-3 { color: var(--cc-metal-300) !important; }  /* 9.68:1 */
body.cc-app #step-label-1.is-current,
body.cc-app .step-label-active { color: var(--sf-text) !important; }

/* The "shipping info pre-filled" banner was #065F46 on a dark panel: 1.93:1. */
body.cc-app #profile-autofill-banner {
  background: var(--cc-ok-bg) !important;
  border: 1px solid var(--cc-ok-line) !important;
  color: var(--cc-ok) !important;
  border-radius: var(--cc-radius, 8px) !important;
}
/* The US-only notice was a white paper strip. */
body.cc-app #ship-note,
body.cc-app .co-note {
  background: var(--cc-info-bg) !important;
  border: 1px solid var(--cc-info-line) !important;
  color: var(--cc-cyan-100) !important;
}
/* "Tax ()" — the parens are literal text around a span the JS fills only once a
   state is known, so an unknown state printed empty brackets. The module wraps
   them; this hides the wrapper until there is something inside it. */
body.cc-app .cc-taxparen:has(#s-tax-state:empty) { display: none; }

/* ══ 8. ORDER SUCCESS ═════════════════════════════════════════════════════
   #guest-account-cta is the panel a GUEST checkout lands on — the most common
   path on this store — and it was Tailwind blue-50 paper (#EFF6FF ground,
   #BFDBFE edge, #DBEAFE disc, #1D4ED8 ink, #1F2937 body) on a navy page. */
body.cc-app #guest-account-cta {
  background: var(--cc-info-bg) !important;
  border: 1px solid var(--cc-info-line) !important;
  border-radius: var(--cc-radius, 8px) !important;
}
body.cc-app #guest-account-cta > div > div:first-child {
  background: rgb(63 182 201 / 0.16) !important;
}
body.cc-app #guest-account-cta svg { stroke: var(--cc-cyan-300) !important; }
body.cc-app #guest-account-cta p { color: var(--sf-text) !important; }
body.cc-app #guest-account-cta p:first-child,
body.cc-app #guest-cta-email { color: var(--cc-cyan-300) !important; }
body.cc-app #guest-cta-link {
  background: linear-gradient(135deg, var(--cc-blue-600) 0%, var(--cc-teal-700) 100%) !important;
  color: #F4FCFF !important;
  border: 1px solid rgb(87 214 228 / 0.38) !important;
  border-radius: var(--cc-radius, 8px) !important;
}
/* The live-status dot is a UI graphic and owes 3:1 against the panel it sits
   on. Amber and red are the re-solved pair; the "checking" blue joins the ramp. */
body.cc-app .live-dot { background: var(--cc-warn); }
body.cc-app .live-dot.is-paid { background: var(--cc-ok); box-shadow: 0 0 0 4px rgb(52 211 153 / 0.18); }
body.cc-app .live-dot.is-expired { background: var(--cc-danger); }
body.cc-app .live-dot.is-checking { background: var(--cc-cyan-300); }
body.cc-app #live-status { background: var(--sf-bg) !important; }
/* Empty state: an order page reached with no order number printed the literal
   "Order # is placed". The module supplies the fallback copy; this dresses it. */
body.cc-app .cc-empty {
  border: 1px solid var(--cc-metal-line);
  background: var(--sf-elevated);
  border-radius: var(--cc-radius, 8px);
  padding: 28px 30px;
  color: var(--cc-metal-300);
}

/* ══ 9. TRACK ═════════════════════════════════════════════════════════════ */
body.cc-app .btn-teal:disabled { transform: none; }
/* The page opened with a "← Core Chain Labs" back-link above the H1, from the
   era before these pages carried the site nav. The logo IS the home link now. */
body.cc-app .cc-backlink { display: none; }

/* ══ 10. 404 ══════════════════════════════════════════════════════════════
   The page's whole content region used a class vocabulary — .sheet .doc-sheet
   .wrap .wrap-tight .doc-head .tl .muted .doc-lede .doc-actions — that is
   defined in NO stylesheet in the built site. Zero rules: it rendered as a
   123px white sliver clipped behind the fixed nav, with the site's dark-ground
   inks on it. This is the vocabulary. */
body.cc-app .doc-sheet {
  display: block;
  padding: calc(var(--sf-nav-h, 64px) + 88px) 24px 104px;
  background: var(--sf-bg);
}
body.cc-app .doc-sheet .wrap {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
body.cc-app .doc-sheet .wrap-tight { max-width: 620px; }
body.cc-app .doc-head { margin-bottom: 34px; }
body.cc-app .doc-sheet h1.tl {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: var(--sf-h-weight, 700);
  letter-spacing: var(--sf-h-track, -0.03em);
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--sf-text);                             /* 17.75:1 */
}
body.cc-app .doc-sheet .doc-lede,
body.cc-app .doc-sheet .muted {
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
  color: var(--cc-metal-300);                        /* 9.68:1 */
}
body.cc-app .doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 0;
}
body.cc-app .doc-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  font-weight: 600;
  text-decoration: none;
}
/* The 404 has no other content, so it also carries the standing "where to go"
   rail the module inserts — one row of the four nav destinations. */
body.cc-app .cc-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
  margin: 40px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--cc-metal-line);
  font-size: 0.9rem;
}
body.cc-app .cc-404-links a {
  color: var(--cc-cyan-300);                         /* 11.19:1 on --sf-bg */
  text-decoration: none;
}
body.cc-app .cc-404-links a:hover { text-decoration: underline; }

/* ══ 11. INVOICE ══════════════════════════════════════════════════════════
   invoice.html is the only page in the site that never linked sf-base.css or
   sf-refresh.css, so none of the client's tokens reached it: it rendered on
   theme.css's near-neutral #071015, its Print button was the solver's dusty
   slate #5F94AD at a 16px radius, and its hover rule read
   `background:#1648882` — seven hex digits, an invalid colour, the declaration
   dropped. The module links the client sheet; this finishes the page.

   THE PRINT RULE IS THE POINT. `@media print { body { background:
   var(--sf-elevated) } }` asked a printer for a near-black page. Browsers
   default background-graphics OFF, so what actually came out of the printer was
   the letter's near-white ink on white paper — a blank invoice. Print is the
   only reason this page exists, so print gets a real white sheet with dark ink
   and every ratio solved against paper. */
body.cc-app #toolbar {
  background: var(--sf-chrome-bg);
  color: var(--sf-chrome-ink);
  border-bottom: 1px solid rgb(87 214 228 / 0.26);
}
body.cc-app #toolbar button { padding: 9px 20px; font-weight: 700; }
body.cc-app #page-wrap { background: var(--sf-bg); }
body.cc-app .letter {
  background: var(--sf-elevated);
  border: 1px solid var(--cc-metal-line);
  border-radius: var(--cc-radius, 8px);
}
@media print {
  body.cc-app,
  body.cc-app #page-wrap,
  body.cc-app .letter {
    background: #FFFFFF !important;
    color: #10202E !important;                       /* 14.9:1 on paper */
    box-shadow: none !important;
    border: none !important;
  }
  body.cc-app .letter * { color: #10202E !important; }
  body.cc-app .letter .muted,
  body.cc-app .letter .letter-meta,
  body.cc-app .letter .letter-disclaimer { color: #43596B !important; }  /* 6.6:1 on paper */
  body.cc-app .letter strong { color: #0B1A2C !important; }
  body.cc-app .letter .letter-disclaimer strong { color: #A32020 !important; }  /* 6.1:1 on paper */
  body.cc-app .letter td,
  body.cc-app .letter th,
  body.cc-app .letter tr { border-color: #C2CFD9 !important; background: transparent !important; }
  body.cc-app #toolbar { display: none !important; }
}

/* ══ 12. VERTICAL RHYTHM ══════════════════════════════════════════════════
   Every app page set `min-height:100vh` on a region holding a 350px card, so
   the fourteen pages opened with 600px of empty navy between the content and a
   footer that is itself 962px tall. The floor is kept — the footer must not
   ride up on a short viewport — but it stops being a full screen of nothing.
   Desktop only: phone-width layout is another lane's and no breakpoint below
   768px is touched here. */
@media (min-width: 768px) {
  body.cc-app > main[style*="min-height"],
  body.cc-app > main,
  body.cc-app #acct-shell,
  body.cc-app .success-cols { min-height: 0; }
  body.cc-app > main { padding-bottom: 72px; }
  body.cc-app .cc-app-main { min-height: 46vh; }
}