/* Eclipse theme layer for the HoloHawk design system.
   Loaded AFTER the design-system token files on every Eclipse page.

   Product decision (Aug 2026): light mode is a first-class theme, so its values
   live here once instead of being pasted into each page.

   Rule: never redefine a design-system token name with a DIFFERENT value in the
   base :root — that silently restyles every bundle component. Eclipse-only
   values are prefixed --e-. Redefining DS tokens inside [data-theme='light']
   IS intentional: that is the theming mechanism. */
:root{
  --hh-display:'Sora',sans-serif;
  --e-line:rgba(255,255,255,.12);
  --e-line-soft:rgba(255,255,255,.07);
  --e-nav-bg:rgba(7,9,14,.9);
  --e-rail-bg:#07090e;
  --e-surface:rgba(8,10,17,.82);
  --e-surface-2:#080a11;
  --e-card-fade:#070910;
  --e-selection:rgba(125,211,252,.25);
  --e-eclipse-fill:radial-gradient(ellipse at 50% 0%, #0b0f19 0%, #05060c 40%);
  --e-img-bg:radial-gradient(ellipse at 30% 18%, #1a2030 0%, #0a0d15 62%);
  --e-head-from:#f8fafc; --e-head-mid:#cbd5e1; --e-head-to:#7d8798;
  --e-foil-1:#67e8f9; --e-foil-2:#a78bfa; --e-foil-3:#f0abfc;
  --e-star-1:#cbd5e1; --e-star-2:#94a3b8; --e-star-3:#64748b;
  --e-beam:rgba(226,232,240,.5);
  --e-chip-bg:rgba(5,6,12,.55);
  --e-fade-to:#05060c;
  --e-deco-op:1;
  --on-violet:#0b0616;
  --green:var(--up);

  /* Accessibility correction to the DS ramp: --fg-4/--fg-5 as shipped fall below
     WCAG AA on --surface-panel. Raised here; relative hierarchy preserved. */
  --fg-4:#8b94a3; --fg-5:#7c869a;

  /* One grey system: Eclipse text roles alias the DS roles rather than
     duplicating them with near-identical values. */
  --t-hi:var(--text-title);
  --t-body:var(--text-body);
  --t-mute:var(--text-dim);
  --t-dim:var(--text-mute);
}

:root[data-theme='light']{
  color-scheme:light;
  --e-line:rgba(11,15,26,.16);
  --e-line-soft:rgba(11,15,26,.09);
  --e-nav-bg:rgba(244,246,250,.94);
  --e-rail-bg:#eef1f7;
  --e-surface:rgba(255,255,255,.9);
  --e-surface-2:#ffffff;
  --e-card-fade:#f1f4fa;
  --e-selection:rgba(13,111,143,.22);
  --e-eclipse-fill:radial-gradient(ellipse at 50% 0%, #dfe5f0 0%, #f4f6fa 40%);
  --e-img-bg:radial-gradient(ellipse at 30% 18%, #e6eaf3 0%, #f7f9fc 62%);
  --e-head-from:#0b0f1a; --e-head-mid:#26303f; --e-head-to:#5f6a80;
  --e-foil-1:#0e7490; --e-foil-2:#6d3ff5; --e-foil-3:#a21caf;

  /* The design system's foil gradients ship dark-only. --foil-edge/--foil-soft are
     only ever hairlines or washes, so they darken safely here. --foil itself must
     stay bright: DS consumers use it as a FILL behind near-black ink
     (Button variant="foil"). The ink role is scoped below instead. */
  --foil-soft:linear-gradient(100deg,rgba(14,116,144,.6),rgba(109,63,245,.6),rgba(162,28,175,.6),rgba(14,116,144,.6));
  --foil-edge:linear-gradient(90deg,transparent,rgba(109,63,245,.6) 30%,rgba(14,116,144,.6) 70%,transparent);
  --e-star-1:#94a3b8; --e-star-2:#64748b; --e-star-3:#475569;
  --e-beam:rgba(71,85,105,.35);
  --e-chip-bg:rgba(255,255,255,.82);
  --e-fade-to:#f4f6fa;
  --e-deco-op:.35;
  --on-violet:#ffffff;

  /* Canvas + surfaces */
  --void:#f4f6fa;
  --ink-900:#ffffff; --ink-800:#f7f9fc; --ink-700:#eef1f7; --ink-600:#e4e8f1; --ink-500:#d7dce8;
  --surface-panel:rgba(255,255,255,.9); --surface-card:rgba(255,255,255,.9);
  --surface-input:rgba(11,15,26,.03); --surface-hover:rgba(11,15,26,.05);
  --line:rgba(11,15,26,.10); --line-2:rgba(11,15,26,.24); --line-3:rgba(11,15,26,.32);

  /* Foreground ramp, inverted */
  --fg-1:#0b0f1a; --fg-2:#2b3444; --fg-3:#4f5a70; --fg-4:#5f6a80; --fg-5:#646e86;

  /* Brand + semantics: same meanings, darkened to hold on white */
  --violet:#6d3ff5; --cyan:#0d6f8f; --sparkle:#a21caf; --green:#127a3a;
  --up:#127a3a; --down:#b42318; --warn:#8a5a00; --flat:#5f6a80;
  --confirm:#127a3a; --review:#8a5a00; --reject:#b42318;
  --type-raw:#0d6f8f; --type-graded:#6d3ff5; --type-sealed:#8a5a00; --type-lowvalue:#127a3a;
  --src-ebay:#0d6f8f; --src-pricecharting:#6d3ff5; --src-pulse:#8a5a00;
}

/* Market: sets beside movers, per ui_kits/market. minmax(0,…) so the SetTile grid
   inside can shrink; single column before the two tracks get too narrow. */
.hh-market-split{display:grid;gap:clamp(20px,3vw,40px);align-items:start;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
@media (max-width:900px){.hh-market-split{grid-template-columns:minmax(0,1fr)}}

/* Charts mount through a display:contents wrapper, so the SVG can't inherit flex
   sizing from the mount — make it fluid inside whatever box owns the width. */
.hh-chart svg{width:100%;height:auto;display:block}

/* Foil as INK, light mode only: the text clip needs dark stops to hold on a white
   canvas, while --foil stays bright for its fill consumers. */
:root[data-theme='light'] .hh-foil-text{
  background-image:linear-gradient(100deg,#0e7490 0%,#6d3ff5 34%,#a21caf 62%,#0e7490 100%);
}

/* Anchored sections must clear the fixed pill nav. */
[id]{scroll-margin-top:96px}

/* Visible keyboard focus on controls that suppress the UA ring. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--violet); outline-offset:2px; border-radius:2px;
}

/* The DS font layer loads Space Grotesk/Inter/Plex Mono but never the faces
   Eclipse actually declares — so every --hh-display heading and Archivo body
   was silently falling back to the system sans. Load the real ones, from the
   same self-hosted files production serves. */
@font-face{font-family:'Sora';src:url(/fonts/sora.woff2) format('woff2');font-weight:500 700;font-display:swap}
@font-face{font-family:'Archivo';src:url(/fonts/archivo.woff2) format('woff2');font-weight:400 700;font-display:swap}


/* ── Mobile layer (most visitors are on phones) ─────────────────────────────
   The pages style inline (React serialises them as "font-size: 10.5px", with
   a space — both spellings are matched). These rules win with !important on
   phones only: hit areas ≥40px, 16px inputs so iOS never zooms on focus, an
   11.5px floor for the mono labels, and a way back up on long pages. */
.hh-totop {
  display: none; position: fixed; right: 16px; bottom: 18px; z-index: 55;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--e-line); background: var(--e-nav-bg);
  color: var(--t-hi); font-family: 'Plex Mono', monospace; font-size: 15px; text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); backdrop-filter: blur(10px);
}
@media (max-width: 640px) {
  section a:not([style*="display"]), footer a:not([style*="display"]) {
    display: inline-block; padding: 10px 0; margin: -10px 0;
  }
  button { min-height: 40px; }
  button[style*="font-size:10.5px"], button[style*="font-size: 10.5px"],
  button[style*="font-size:10px"], button[style*="font-size: 10px"],
  button[style*="font-size:11px"], button[style*="font-size: 11px"] { font-size: 12px !important; }
  a[style*="border-radius:999px"], a[style*="border-radius: 999px"],
  a[style*="border-radius:3px"], a[style*="border-radius: 3px"],
  a[style*="border-radius:10px"], a[style*="border-radius: 10px"] {
    min-height: 40px; display: inline-flex !important; align-items: center;
  }
  input, select, textarea { font-size: 16px !important; min-height: 44px; }
  [style*="font-size:10px"], [style*="font-size: 10px"],
  [style*="font-size:10.5px"], [style*="font-size: 10.5px"],
  [style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 11.5px !important; }
  .hh-totop { display: inline-flex; }
  /* Deals filter rail: type pills scroll in one row beside the Filters button
     instead of wrapping to three rows under the search box. */
  [data-rail] { padding-top: 72px !important; }
  [data-rail] > div > label:first-child { flex: 1 1 100% !important; }
  .hh-typerow { flex: 1 1 0 !important; min-width: 0; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .hh-typerow::-webkit-scrollbar { display: none; }
  .hh-typerow button { flex: none; min-height: 36px !important; padding: 0 12px !important; font-size: 11.5px !important; }
  /* Feature cards read as a row (icon left) on phones. */
  .hh-feature { flex-direction: row !important; align-items: flex-start; gap: 14px !important; padding: 16px !important; }
  /* Alerts command reference: one column on phones. The command and its
     arguments sit on one line like a typed command; the description follows. */
  .hh-cmdrow { grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; padding: 18px 0 !important; }
  .hh-cmdhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
  .hh-cmdargs { margin-top: 0 !important; }
}