/* ════════════════════════════════════════════════════════════════════════
   GOLD EDITION (2026-10-05) — one shared accent + reading layer.

   Loaded LAST on every page (after app.css on the SPA, after trust-slate.css
   on the satellite pages), so it wins on equal specificity without touching
   either token source. Owner decision 2026-10-05: gold is the signature
   accent of the dashboard, replacing the "gold = identity + one action"
   rule of Trust Slate v3.

   What this file may and may not do:
   · Since 2026-10-06 it no longer re-points the accent aliases: the canvas
     accent is app.css's Trust Slate blue (the logo blue), the chrome is the
     logo blue too, and gold is kept for the logo and the ONE primary action.
     It still sets the reading scale, the frame and the primary button.
   · It never re-declares a canonical token (--canvas, --ink-*, --viz-*,
     --border, --tint-info …). Those are mirrored by api/pdf_theme.py and
     pinned by the chrome checks; the signed PDFs are unchanged.
   · Status colour stays diagnostic: --viz-critical / -warn / -ok / -info
     are untouched, and info chips are pinned back to --viz-info below so
     gold never reads as a severity (warn is orange; gold must not sit in
     a severity slot beside it).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  /* Dark: champagne gold — softer than logo yellow, so long reading on
     navy does not glare. 10.9:1 on --canvas. */
  --au:        #7F5F12;
  --au-hi:     #5E4609;
  --au-deep:   #A47A1B;
  --au-on:     #1A1204;                       /* ink on a gold fill */
  --au-wash:   #FBF6E6;
  --au-wash-2: #F6ECCB;
  --au-bd:     #E3CF98;
  --au-hair:   #EFE3BF;
  --au-grad:   linear-gradient(135deg, #F7E6A8 0%, #E3BB52 46%, #BC8E2E 100%);
  --au-line:   linear-gradient(90deg, transparent 0%, #E3BB52 18%, #F7E6A8 50%, #E3BB52 82%, transparent 100%);
  --au-shadow: 0 10px 24px -12px rgba(164,122,27,.50);

  /* Accent aliases are NOT re-pointed here any more (2026-10-06, owner:
     "improve the colours from golden"). --blue/--link/--accent/--cyan/
     --yellow keep app.css's Trust Slate value, --viz-info (#3069B3 light,
     #6FA3E4 dark), which is within a shade of the logo blue #3068B0. Gold
     is reserved for the logo and the ONE primary action (--cta below). */
  --rail-accent: #F8D018;   /* logo yellow: the active-row bar, the chrome's one yellow */

  /* The primary action is skyqon.com's own button on every page, both themes:
     flat logo yellow, near-black ink (13.3:1), lifted yellow on hover (owner
     2026-10-13: the same button as the public pages, not the brushed gradient).
     --gold-fill / --cta are only ever used as a background. */
  --gold-fill: #FCCE19;
  --cta: #FCCE19;
  --cta-on: #03090F;
  --cta-hover: #FDD84A;
}
[data-theme="dark"] {
  /* The dark theme is ONLY this token block (and its twin in gold.css):
     no [data-theme="dark"] selector may exist anywhere else (Phase 4,
     2026-10-06). Light is the designed base in :root. */
  color-scheme: dark;                         /* native controls + scrollbars follow the theme */
  --au:        #E6C36A;
  --au-hi:     #F5DFA0;
  --au-deep:   #B8923A;
  --au-wash:   rgba(230,195,106,.10);
  --au-wash-2: rgba(230,195,106,.16);
  --au-bd:     rgba(230,195,106,.34);
  --au-hair:   rgba(230,195,106,.18);
  --au-grad:   linear-gradient(135deg, #F7E6A8 0%, #E3BB52 46%, #BC8E2E 100%);
  --au-shadow: 0 10px 26px -10px rgba(227,187,82,.45);
  --cta: #FCCE19;
  --cta-on: #03090F;
  --cta-hover: #FDD84A;
}

/* ── Reading: larger prose, calmer rhythm ─────────────────────────────── */
body, [data-theme="light"] body {
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
p { text-wrap: pretty; }
h1, h2, h3, .title, .card h2 { text-wrap: balance; }
::selection { background: var(--blue-wash); color: var(--ink-900); }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline-color: var(--blue); }

/* Page title: display face at a working scale. The header is the same
   component on all 31 routes, so every pixel here is paid on every page;
   the calm pass (2026-10-06) took it from ~230px to under 100px: smaller
   title, one-line lede, no eyebrow outside the Overview, no rule beneath. */
h1, .title, .section-head .title { font-size: 24px; font-weight: 600; letter-spacing: -.022em; line-height: 1.15; margin: 0; }
@media (max-width: 760px) { h1, .title, .section-head .title { font-size: 21px; } }
.section-head { position: relative; padding-bottom: 4px; margin: 2px 0 14px; }
.section-head::after { display: none; }
.section-head .eyebrow { display: none; }
[data-route="overview"] .section-head .eyebrow { display: block; }
.section-head .lede, .section-head .ph-meta { margin-top: 3px; }
.section-head .lede { font-size: 13.5px; line-height: 1.5; max-width: 78ch; }

/* Eyebrows: tracked small caps in muted ink; the dot is the one gold mark.
   Gold text on every section label made the accent read as wallpaper. */
.eyebrow, .ov-hero-eyebrow, .ph-hz-head,
[data-theme="light"] .eyebrow, [data-theme="light"] .ov-hero-eyebrow, [data-theme="light"] .ph-hz-head {
  color: var(--text-3); font-size: 11.5px; letter-spacing: .14em;
}
.eyebrow::before, .ov-hero-eyebrow::before, .ph-hz-head::before {
  background: var(--viz-info); box-shadow: none;
}

/* Card headings and body copy */
.card h2, [data-theme="light"] .card h2 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.card p, .card li { font-size: 15px; line-height: 1.65; }
.ph-sub { font-size: 16px; line-height: 1.65; color: var(--ink-700); }
.hl-stat p { font-size: 14px; line-height: 1.55; }
.subnav-tab { font-size: 14.5px; }
.pill, .mod-badge { font-size: 12.5px; letter-spacing: .01em; }
.kpi .l, .kpi .lbl, .kpi .kpi-label { font-size: 13.5px; }

/* Tables: larger cells, roomier rows, readable headers */
.cert-table td, .table-scroll > table td { padding: 15px 16px; font-size: 14.5px; line-height: 1.5; }
.cert-table thead th, .table-scroll > table thead th {
  padding: 12px 16px; font-size: 11.5px; letter-spacing: .12em; color: var(--ink-500);
  border-bottom: 1px solid var(--border);
}
.cert-table tbody tr:hover td, .table-scroll > table tbody tr:hover td { background: var(--hl-glass); }

/* ── Frame: logo-blue chrome, one hairline (2026-10-06) ────────────────
   The chrome tokens (--chrome-*) in app.css carry the logo blue; every rule
   here reads them. The only yellow on the frame is --rail-accent (the
   active row's bar) and the logo image itself. */
.app-topbar, [data-theme="light"] .app-topbar {
  border-bottom: 1px solid var(--chrome-hair);
  box-shadow: none;
}
.app-topbar .topbar-search:hover, [data-theme="light"] .app-topbar .topbar-search:hover { border-color: var(--chrome-500); }
.app-topbar .acct .acct-pic, [data-theme="light"] .app-topbar .acct .acct-pic {
  background: var(--chrome-500); color: var(--chrome-on); font-weight: 600;
}
.app-topbar .acct.acct-trigger::after, [data-theme="light"] .app-topbar .acct.acct-trigger::after { color: var(--chrome-on-muted); }
.tb-plan, [data-theme="light"] .tb-plan {
  border-color: var(--chrome-hair); color: var(--chrome-on-muted); background: var(--chrome-800); letter-spacing: .1em;
}

/* Rail: active row = chrome-600 fill with the yellow bar; icons stay white. */
.nav-item { font-size: 14.5px; }
.nav-item.is-active, [data-theme="light"] .nav-item.is-active {
  background: var(--chrome-600);
  color: var(--chrome-on);
  box-shadow: none;
}
.nav-item.is-active::before { background: var(--rail-accent); }
.nav-item.is-active .nav-icon { color: var(--chrome-on); }
.nav-item:hover .nav-icon { color: var(--chrome-on); }
.nav-item:focus-visible, .rail-collapse:focus-visible, .tb-context-link:focus-visible { outline-color: var(--rail-accent); }
.nav-item .nav-badge { background: var(--chrome-500); color: var(--chrome-on); }

/* ── Cards: one raised surface, depth from the --raised-* tokens (app.css) ── */
.card, [data-theme="light"] .card { border-color: var(--raised-bd, var(--border)); box-shadow: var(--raised-shadow, var(--card-shadow)); }
.card:hover, [data-theme="light"] .card:hover { border-color: var(--line-strong); }
.ov-module:hover, .kpi:hover { border-color: var(--line-strong); }
.ov-module .mod-icon, .hl-stat-ic, .hl-empty .ic-tile { color: var(--blue); background: var(--hl-icon-wash); }
.hl-stat:hover b { color: var(--blue); }
.hl-stat:focus-visible, .list-search:focus-visible, .ren-err-more > summary:focus-visible { outline-color: var(--blue); }
.pill.hl-check::before { color: var(--blue); }

/* ── Buttons: flat logo-yellow primary (the one yellow action), blue-edged secondary ── */
.btn-gold, .btn-primary, [data-theme="light"] .btn-gold, [data-theme="light"] .btn-primary {
  background: var(--cta); color: var(--cta-on); border: 1px solid transparent;
  font-size: 14px; font-weight: 650; letter-spacing: .005em; min-height: 40px; padding: 10px 18px;
  box-shadow: none;
}
.btn-gold:hover:not(:disabled), .btn-primary:hover:not(:disabled),
[data-theme="light"] .btn-gold:hover:not(:disabled), [data-theme="light"] .btn-primary:hover:not(:disabled) {
  background: var(--cta-hover); color: var(--cta-on);
}
.btn-gold:disabled, .btn-primary:disabled { opacity: .6; box-shadow: none; }
.btn-link, .btn-quiet { font-size: 14px; }
.btn-link:hover:not(:disabled), .btn-quiet:hover { border-color: var(--blue-bd); }
[data-theme="light"] .btn-link, [data-theme="light"] .btn-quiet { color: var(--blue); border-color: var(--blue-bd); background: var(--surface); }
[data-theme="light"] .btn-link:hover:not(:disabled), [data-theme="light"] .btn-quiet:hover { background: var(--blue-wash); border-color: var(--blue); color: var(--blue-700); }

/* Tabs and chips: app.css's blue-wash rules apply (no override here). */

/* ── Atmosphere: none. The canvas is one flat surface (2026-10-06) ──────
   The 80px graph-paper grid and the corner glow sat behind every table and
   card and competed with their own rules; a data surface gets one
   elevation level and nothing drawn underneath it. */
.app-shell::before, [data-theme="light"] .app-shell::before { display: none; }

/* ── Diagnostic stays diagnostic ──────────────────────────────────────────
   Anything that MEANS "info" reads the info hue directly, so a future
   re-pointing of --blue cannot turn a severity into an accent. */
.pill.info, .pill.blue, .sev-info, .badge-info, .ren-node.is-active, .ren-pip.is-active {
  color: var(--viz-info-text); border-color: color-mix(in srgb, var(--viz-info) 34%, transparent);
  background: color-mix(in srgb, var(--viz-info) 12%, transparent);
}
.ren-pip.is-active { background: var(--viz-info); }

@media (prefers-reduced-motion: reduce) {
  .btn-gold, .btn-primary { transition: none; }
}

/* ── Frame details ────────────────────────────────────────────────────── */
/* The frame keeps its own type scale: the larger body size is for reading
   on the canvas, not for the top bar and rail, which have fixed room. */
.app-topbar, .sidebar { font-size: 15px; }
.fresh-chip { white-space: nowrap; }
.sidebar-tenant .st-initials {
  background: var(--chrome-500); color: var(--chrome-on); box-shadow: none;
}

/* Scrollbars: a quiet neutral thumb */
.custom-hbar-thumb { background: var(--line-strong); }
.custom-hbar:hover .custom-hbar-thumb, .custom-hbar.dragging .custom-hbar-thumb { background: var(--text-3); }
.scroll-cap, .x-scroll { scrollbar-color: var(--line-strong) var(--surface-sunken); }
.scroll-cap::-webkit-scrollbar-thumb, .x-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); }
.scroll-cap::-webkit-scrollbar-thumb:hover, .x-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── Satellite pages (sign-in, signup, /check, verify, reset …) ───────────
   trust-slate.css sets its Halo accents on body:has(> .halo-bg), which
   outranks :root — so the gold versions repeat that selector. */
body:has(> .halo-bg) .h1 em, body:has(> .halo-bg) .hero h1 .yellow,
[data-theme="light"] body:has(> .halo-bg) .h1 em, [data-theme="light"] body:has(> .halo-bg) .hero h1 .yellow {
  background: none; color: var(--viz-info); -webkit-text-fill-color: var(--viz-info);
}
body:has(> .halo-bg) .accent-rule { background: linear-gradient(90deg, var(--viz-info), transparent); }
body:has(> .halo-bg) .eyebrow, [data-theme="light"] body:has(> .halo-bg) .eyebrow { color: var(--text-3); letter-spacing: .14em; }
body:has(> .halo-bg) .eyebrow .dot-pulse { background: var(--viz-info); box-shadow: 0 0 0 5px color-mix(in srgb, var(--viz-info) 18%, transparent); }
body:has(> .halo-bg) a:not([class]) { color: var(--link); }
body:has(> .halo-bg) a:not([class]):hover { color: var(--blue-700); }
/* Satellite pages (owner 2026-10-12: "like the main webpage, not golden"): the
   ink is set on the buttons themselves, after the plain-link rule above,
   because that rule ties `.cta-card a` on specificity and was turning the
   account link blue on gold. */
body:has(> .halo-bg) .btn-cta, body:has(> .halo-bg) .form-row button,
body:has(> .halo-bg) .nav-cta, body:has(> .halo-bg) .cta-card a {
  background: var(--cta); color: var(--cta-on); border: 1px solid transparent; box-shadow: none;
}
body:has(> .halo-bg) .btn-cta:hover:not(:disabled), body:has(> .halo-bg) .form-row button:hover:not(:disabled),
body:has(> .halo-bg) .nav-cta:hover, body:has(> .halo-bg) .cta-card a:hover {
  background: var(--cta-hover); color: var(--cta-on); filter: none;
}
/* The line under the main action is a link, not a second button. */
body:has(> .halo-bg) .cta-card .lg-cta-pdf a { background: none; padding: 0; color: var(--link); }
body:has(> .halo-bg) .cta-card .lg-cta-pdf a:hover { background: none; color: var(--blue-700); }
body:has(> .halo-bg) .btn-cta:focus-visible, body:has(> .halo-bg) .form-row button:focus-visible { outline-color: var(--blue); }
body:has(> .halo-bg) .monitor:hover, body:has(> .halo-bg) .form-card:hover { border-color: var(--line-strong); }
body:has(> .halo-bg) .form-card, body:has(> .halo-bg) .cta-card { box-shadow: inset 0 1px 0 var(--border), var(--pop-shadow); }

/* ── Filled controls ──────────────────────────────────────────────────────
   Calls to action are the one yellow thing on a page. Selected
   states (a tab, a picker, a step mark) are not actions, so they take the
   blue accent with white ink; per-form submit buttons (.lg-ph49/140/217)
   read app.css's --yellow, which is now the blue accent again. */
.btn-primary-yellow, .rem-viewfix, .rem-unlock, .cta-card a, .admin-rail .rail-cta, .nav-cta {
  background: var(--cta); color: var(--cta-on); border-color: transparent;
}
.rem-lock .lk-pill, .welcome-step.active .welcome-step-mark, .skip-link,
.atab.is-active, [data-theme="light"] .atab.is-active, .drop .pick {
  background: var(--blue); color: #FFFFFF; border-color: var(--blue);
}
/* Thin fills (meters, progress, markers) take the solid accent. */
.ret-meter-fill, .dora-pbar > span, .lg-a14, .welcome-pulse, .wiz-label::before,
[data-theme="light"] .wiz-label::before, .metric-underline { background: var(--viz-info); }

/* ════════════════════════════════════════════════════════════════════════
   ONE FRAME (2026-10-05) — top bar + rail read as a single L-shaped navy
   frame; the canvas is a sheet tucked into it with a rounded top-left
   corner and one gold hairline along its top and left edges.

   The corner and the top line are drawn by a sticky pseudo-element on
   .app-main, so they follow whatever width the rail has (250px, 64px
   collapsed) and stay put while the page scrolls. Desktop only: below
   721px the rail is an off-canvas drawer and there is no L to draw.
   ════════════════════════════════════════════════════════════════════════ */
.app-topbar, [data-theme="light"] .app-topbar { border-bottom: 1px solid var(--chrome-hair); box-shadow: none; background: var(--chrome-900); }
.app-topbar::after { display: none; }
.sidebar, [data-theme="light"] .sidebar { background: var(--chrome-900); border-right: 1px solid var(--chrome-hair); }
/* The gold L-frame (a 1px line down the canvas' left edge plus a rounded
   corner under the top bar) was removed in the calm pass of 2026-10-06. */
@media (max-width: 720px) {
  .app-topbar, [data-theme="light"] .app-topbar { border-bottom: 1px solid var(--chrome-hair); }
}

/* — rail — */
.sidebar-group-label .sb-grule { display: none; }
.sidebar-group-label { margin-top: 12px; }
/* Labels sit one step softer than the items (opacity, not a darker token:
   the token is shared with the items and guarded). 2026-10-13. */
.sidebar-group-label .sb-glabel { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--chrome-on-muted); opacity: .85; }
.nav-item { min-height: 34px; }
.nav-item .nav-icon svg { stroke-width: 1.5; }
.sidebar-tenant { background: var(--chrome-800); border: 1px solid var(--chrome-hair); border-radius: 12px; }
.sidebar-tenant .name { font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0; color: #FFFFFF; }
.sidebar-tenant .st-initials { border-radius: 50%; text-transform: uppercase; }
/* Plan line inside the workspace card (was a pill in the top bar). The
   doubled class outranks the ≤860px rule that hides .tb-plan in the bar. */
.sidebar-tenant .tb-plan, [data-theme="light"] .sidebar-tenant .tb-plan {
  display: block; padding: 0; border: 0; border-radius: 0; background: none;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--chrome-on-muted);
  overflow: hidden; text-overflow: ellipsis;
}
.sidebar-tenant .tb-plan:empty { display: none; }
.rail-usage .ru-track { height: 3px; background: rgba(255,255,255,.09); border-radius: 3px; }
.rail-usage .ru-track i { background: #5B8FD6; border-radius: 3px; min-width: 6px; }
.rail-usage .ru-link, .rail-usage .ru-link:hover { color: var(--chrome-on-muted); }
.rail-usage .ru-link:hover { color: var(--chrome-on); }

/* — top bar: breadcrumb left, search centred, three quiet controls right — */
.app-topbar .topbar-search, [data-theme="light"] .app-topbar .topbar-search { margin-inline: auto; flex: 0 1 480px; }
.app-topbar .acct .acct-meta { display: none; }
.app-topbar #who { flex: none; overflow: visible; }
.app-topbar .acct, [data-theme="light"] .app-topbar .acct { padding: 2px; background: transparent; border-color: transparent; }
.app-topbar .acct .acct-pic, [data-theme="light"] .app-topbar .acct .acct-pic {
  width: 34px; height: 34px; border-radius: 50%; box-shadow: none;
}
.app-topbar .acct.acct-trigger::after, [data-theme="light"] .app-topbar .acct.acct-trigger::after { display: none; }
.acct-dropdown .acct-id { padding: 9px 11px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.acct-dropdown .acct-id:empty { display: none; }
.acct-dropdown .acct-id .acct-nm { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink-900); }
.acct-dropdown .acct-id .acct-rl { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
/* Freshness: a dot at rest; the age slides out on hover or keyboard focus.
   The text stays in the DOM (aria-live), so screen readers still get it. */
.fresh-chip, [data-theme="light"] .fresh-chip { background: transparent; border-color: transparent; gap: 0; }
.fresh-chip #fresh-chip-age {
  display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom;
  transition: max-width .25s ease, opacity .2s ease, margin .25s ease;
}
.fresh-chip:hover #fresh-chip-age, .fresh-chip:focus-visible #fresh-chip-age { max-width: 170px; opacity: 1; margin-left: 8px; }
@media (prefers-reduced-motion: reduce) { .fresh-chip #fresh-chip-age { transition: none; } }
/* Phone: the bar never wraps, so the avatar gives back its halo and the bar its side padding. */
@media (max-width: 600px) {
  .app-topbar, [data-theme="light"] .app-topbar { padding-inline: 10px; gap: 6px; }
  .app-topbar .acct .acct-pic, [data-theme="light"] .app-topbar .acct .acct-pic { width: 30px; height: 30px; }
  .app-topbar .topbar-search, [data-theme="light"] .app-topbar .topbar-search { flex: 0 1 44px; min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   CALM PASS (2026-10-06) — the same gold, used less. Loaded last, so each
   rule below is the final word for its selector in both themes.
   ════════════════════════════════════════════════════════════════════════ */

/* — tables: sans, sentence-case headers; hosts in the text face. Three
   families in one table (mono bold hosts, spaced mono caps, sans cells)
   read as noise; mono is kept for measured values, serials and hashes. — */
.cert-table thead th, .table-scroll > table thead th {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .01em;
  text-transform: none; color: var(--text-3); background: transparent;
}
.cert-table td.host { font-family: var(--font-sans); font-weight: 600; font-size: 14px; }

/* — filter chips with nothing behind them step back — */
.tab-btn.is-zero:not(.is-active) { opacity: .55; }

/* — readiness card: the grade box already says Ready; the pill in the
   heading said it a second time — */
#cr-band-pill { display: none; }

/* — one navigation layer on desktop: the rail already lists a cluster's
   children (Inventory · Expiring · …) under the open group, so the tab row
   repeated them directly beneath the top bar. The tabs come back when the
   rail is collapsed to icons (⌘\, or automatically under 1280px) and on
   phones, where the rail is a drawer. — */
@media (min-width: 1280px) {
  /* !important because router.js shows the bar with an inline style. */
  .app-shell:not(.rail-collapsed) #subnav-bar { display: none !important; }
}

/* — settings rail: hover is a hint, active is a block (the two used to
   look alike, so two items read as selected at once) — */
.prof-nav-item:hover:not(.is-active) { background: transparent; color: var(--text); }
.prof-nav-item.is-active { background: var(--blue-wash); border-color: var(--blue-bd); }

/* — theme control lives in the account menu (was three buttons in the top
   bar, and three more under Preferences, which stay) — */
.acct-dropdown .acct-theme {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 11px 8px; font-size: 12.5px; color: var(--text-secondary);
}
.acct-dropdown .theme-toggle, [data-theme="light"] .acct-dropdown .theme-toggle {
  background: var(--surface-2, transparent); border: 1px solid var(--border); border-radius: 999px;
}
.acct-dropdown .theme-toggle button { color: var(--text-secondary); opacity: 1; padding: 4px 8px; }
.acct-dropdown .theme-toggle button:hover { color: var(--text); }