/* 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. Since 2026-09-23 it
   is also the default: every pre-paint script and every page's mount fall
   back to light when nothing is stored, and the served <html> carries
   data-theme="light" so a crawler or a no-JS visitor gets the same 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;
  /* The landing hero's sky: the blurred glow behind the centre beam and the
     eclipse discs. Both are theme furniture, so they are tokens, not literals. */
  --e-beam-glow:rgba(148,163,184,.16);
  --e-disc-op:1;
  /* Every drop shadow in the pages, by the weight it was authored at. The
     pages carry these inline, so the light values below reach every card,
     pill, menu and button without a per-element override. */
  --e-shadow-55:rgba(0,0,0,.55); --e-shadow-50:rgba(0,0,0,.5); --e-shadow-45:rgba(0,0,0,.45);
  --e-shadow-40:rgba(0,0,0,.4); --e-shadow-35:rgba(0,0,0,.35); --e-shadow-30:rgba(0,0,0,.3);
  --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%);
  /* Display headings fade downwards; on white the old end stop (#5f6a80)
     left the last line of a three-line hero reading as disabled text. */
  --e-head-from:#0b0f1a; --e-head-mid:#1c2433; --e-head-to:#414b5e;
  --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);
  /* Light heroes (2026-09-23). The dark sky's furniture — star fields, the
     centre beam and its glow, the eclipse discs — read on a light canvas as
     specks, a stray vertical rule through the headline and grey smudges
     behind the copy, so none of it draws here. The colour washes in each
     page's decoration layer are the light atmosphere instead, at full
     strength (they were at .35, invisible); the dot grid is white on white. */
  --e-star-1:transparent; --e-star-2:transparent; --e-star-3:transparent;
  --e-beam:transparent; --e-beam-glow:transparent;
  --e-disc-op:0;
  --e-chip-bg:rgba(255,255,255,.82);
  --e-fade-to:#f4f6fa;
  --e-deco-op:1;
  /* Shadows are ink-tinted and about a third of the weight: a black 40px
     drop under a white pill on a white page read as a smear. */
  --e-shadow-55:rgba(11,15,26,.16); --e-shadow-50:rgba(11,15,26,.14); --e-shadow-45:rgba(11,15,26,.13);
  --e-shadow-40:rgba(11,15,26,.12); --e-shadow-35:rgba(11,15,26,.10); --e-shadow-30:rgba(11,15,26,.09);
  --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%);
}

/* The canvas belongs to html, not only to body: on the landing the body box
   is one viewport tall and the document is four, so whatever html paints
   shows below the hero. The pre-paint script sets the inline colour on load
   and the toggle sets it on switch; this rule is the CSS truth behind both. */
html{background:var(--void);color-scheme:dark}
:root[data-theme='light']{color-scheme:light}

/* Product as hero (v3.52.0). The persuade pages lead with the thing itself:
   the newest live deal card on the landing, the watch DM on the watchlist,
   the feed post on the servers page — in the hero's right column from
   980px, beneath the copy on phones. The stat tiles that used to sit under
   the hero now sit beside the claims they verify. */
.hh-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,56px);align-items:center}
.hh-hero-card{width:100%;max-width:480px;min-width:0}
.hh-hero.center{justify-items:center;text-align:center}
.hh-hero.center .hh-hero-copy{display:flex;flex-direction:column;align-items:center;max-width:980px}
.hh-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(20px,3vw,32px)}
@media (min-width:980px){
  .hh-hero{grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:clamp(40px,6vw,90px)}
  .hh-hero-card{justify-self:end}
  .hh-hero.center{justify-items:stretch;text-align:left}
  .hh-hero.center .hh-hero-copy{align-items:flex-start;max-width:640px}
  .hh-hero.center .hh-hero-copy>div[style*="justify-content:center"]{justify-content:flex-start !important}
  .hh-hero.center .hh-hero-copy h1{text-wrap:balance}
}

/* The live line (v3.78.0): the claim, then two measured numbers the page
   advances every second. Numbers are mono and tabular so a tick never
   shifts the words around them. No "live" badge: the founder cut it. */
.hh-livenums b{color:var(--t-hi);font-weight:600}
.hh-livenums b[data-hh-live]{font-family:'Plex Mono',ui-monospace,monospace;font-size:.94em;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* Anchored sections must clear the fixed pill nav (and the announcement
   strip above it, --hh-ann-h, when one is showing). */
[id]{scroll-margin-top:calc(96px + var(--hh-ann-h, 0px))}

/* Type roles for the two small sizes. The site runs three faces — Sora for
   display, Archivo for body and UI, Plex Mono for data and labels — and the
   DS overline class was quietly a fourth (Space Grotesk at 10.5px). Every
   tracked-caps label is Plex Mono at 11px; every meta line is 12px. */
.hh-overline{font-family:'Plex Mono',ui-monospace,monospace;font-size:11px !important;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
/* The bundle's components (StatTile, check lists, source credits) size their
   small text through these DS tokens as inline var() references, so the
   tokens are the only lever. Deliberate exception to the "never redefine a
   DS token in :root" rule above: the intent IS to restyle every bundle
   component's smallest text up to the floor. */
:root{--fs-micro:12px;--fs-num-xs:12px;--fs-overline:11px}

/* 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 var(--e-shadow-45); backdrop-filter: blur(10px);
}
/* The raw template never paints. The dc runtime swaps <x-dc> for its render
   within the first frames; painting the template first meant every page
   shifted as the render replaced it (0.06–0.12 on desktop, 2026-09-16). */
x-dc{visibility:hidden}
/* Pages whose hero mock fills from deals-data.js stay unpainted until that
   module lands (each page's `ready` state, 600ms at most). */
[data-screen-label][data-ready="false"]{visibility:hidden}

/* Deals type bar: above 640px the wrappers vanish and the rail is one flex
   row (search, type pills, Filters). The phone block below gives them boxes. */
.hh-typebar, .hh-typebar-row, .hh-typewrap { display: contents; }
.hh-filterico, .hh-filtercount { display: none; }

@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; }
  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; }
  /* No phone-only size bumps: since v3.45.1 every small role is authored at
     its floor (caps labels 11px, meta text 12px) on every viewport. */
  /* Back to top: visible only on the way up, past the first screen, and
     never while the Filters drawer is open — an always-on fixed button sits
     on whatever reaches the bottom-right corner (2026-09-10). */
  .hh-totop { display: inline-flex; opacity: 0; pointer-events: none; transition: opacity .18s; }
  html.hh-scroll-up .hh-totop { opacity: 1; pointer-events: auto; }
  html.hh-filters-open .hh-totop { opacity: 0 !important; pointer-events: none !important; }
  /* Deals header on phones: heading and numbers only; the line of meaning
     is desktop's, so the first card sits inside the first screen. */
  .hh-sub, .hh-aside { display: none; }
  /* Deals rail on phones (2026-09-15): the search field scrolls away with the
     heading and only the 60px type bar sticks; the nav pill steps out on the
     way down (html.hh-scroll-down, set by the deals page) and the bar rises
     to the top edge, so the feed keeps the screen while scanning. Nothing
     changes height, so nothing under the reader's thumb jumps. */
  [data-rail] { display: contents; }
  .hh-railrow { display: contents !important; }   /* its inline style says flex */
  [data-rail] > .hh-railrow > label:first-child { height: 44px !important; margin: 16px 16px 10px; }
  .hh-typebar { display: block; position: sticky; top: var(--hh-rail-top, 78px); z-index: 40; background: var(--e-rail-bg); border-bottom: 1px solid var(--e-line); transition: top .28s cubic-bezier(.2,.7,.3,1); }
  html.hh-scroll-down .hh-typebar { top: 0; }
  .hh-typebar-row { display: flex; align-items: center; gap: 8px; padding: 8px 16px; }
  /* The pill row scrolls sideways behind edge fades that appear only on a
     side with pills past the edge; the last pill peeks so the row reads as
     scrollable. Tapping a half-hidden pill slides it into view. */
  .hh-typewrap { display: block; position: relative; flex: 1 1 0; min-width: 0; }
  .hh-typewrap::before, .hh-typewrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1; }
  .hh-typewrap::before { left: 0; background: linear-gradient(90deg, var(--e-rail-bg) 25%, transparent); }
  .hh-typewrap::after { right: 0; background: linear-gradient(270deg, var(--e-rail-bg) 25%, transparent); }
  .hh-typewrap[data-fade*="l"]::before, .hh-typewrap[data-fade*="r"]::after { opacity: 1; }
  .hh-typerow { min-width: 0; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .hh-typerow::-webkit-scrollbar { display: none; }
  .hh-typerow button { flex: none; min-height: 44px !important; padding: 0 11px !important; }
  /* Filters is a 44px icon button with the active count as a badge. */
  .hh-filterbtn { width: 44px; height: 44px !important; padding: 0 !important; justify-content: center; flex: none; }
  .hh-filterlbl { display: none; }
  .hh-filterico { display: block; }
  .hh-filtercount { display: inline-flex; position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 9px; background: var(--violet); color: var(--on-violet); font: 600 11px/1 'Plex Mono', monospace; letter-spacing: 0; }
  /* The Filters drawer sticks under the bar and rises with it. */
  [data-drawer] { position: sticky; top: calc(var(--hh-rail-top, 78px) + 60px); z-index: 39; padding-top: 10px !important; background: var(--e-rail-bg); border-bottom: 1px solid var(--e-line); transition: top .28s cubic-bezier(.2,.7,.3,1); }
  html.hh-scroll-down [data-drawer] { top: 60px; }
  nav[data-nav] { transition: translate .28s cubic-bezier(.2,.7,.3,1); }
  /* …and clears the announcement strip above it too, when one is showing. */
  html.hh-scroll-down nav[data-nav] { translate: 0 calc(-130% - var(--hh-ann-h, 0px)); }
  @media (prefers-reduced-motion: reduce) { .hh-typebar, [data-drawer], nav[data-nav] { transition: none; } }
  /* Small text links (Admin, Join the Discord): a 44px hit box that leaves
     the visible link, its underline and the layout exactly where they are. */
  .hh-textlink { position: relative; }
  .hh-textlink::after { content: ''; position: absolute; left: -8px; right: -8px; top: -13px; bottom: -13px; }
  /* 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; }
}

/* ── Sitewide pill: search field, account CTA, folded-menu search ────────────
   One nav on every page (2026-09-07): Live deals · Market · Alerts · For servers
   · FAQ · search · Sign in · Create account. The field and its suggest dropdown
   are the market pages' (market-suggest.js binds any form.searchbox). */
[data-nav] .hsearch{position:relative;display:flex;align-items:center;margin:0 2px}
[data-nav] .hsearch input{width:176px;height:32px;padding:0 12px 0 30px;border-radius:999px;font:inherit;font-size:13px;
  color:var(--t-hi);background:var(--surface-input);border:1px solid var(--e-line);text-overflow:ellipsis;
  transition:border-color .15s,box-shadow .15s}
[data-nav] .hsearch input::placeholder{color:var(--t-dim);text-overflow:ellipsis}
[data-nav] .hsearch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* Focus is the halo alone: the field used to grow 64px, which slid every
   pill item to its right (a layout transition, flagged 2026-09-10). */
[data-nav] .hsearch input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(167,139,250,.35)}
/* market-suggest.js owns the dropdown; an empty box (a runtime re-render can
   leave one behind) must never paint as a bordered sliver under the field. */
.sugg:empty{display:none}
.hsearch .go{position:absolute;left:2px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:inline-flex;
  align-items:center;justify-content:center;border:0;border-radius:50%;background:none;color:var(--t-dim);cursor:pointer;padding:0}
.hsearch .go svg{width:14px;height:14px;display:block}
.hsearch input:focus~.go,.hsearch .go:hover{color:var(--t-hi)}
.hh-cta{font-family:Archivo,sans-serif;font-weight:700;font-size:13px;white-space:nowrap;flex:0 0 auto;
  color:var(--on-violet);background:var(--violet);padding:8px 15px;border-radius:999px}
/* Pages set a:hover to violet; on a violet pill that is a 1.5:1 pair. Pin it. */
.hh-cta:hover,.hh-cta:focus-visible{color:var(--on-violet);filter:brightness(1.08)}
.hh-navicon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-4px 0;
  border:1px solid var(--e-line);border-radius:999px;color:var(--t-hi)}
.hh-navicon svg{width:16px;height:16px}
[data-menu] .hsearch{position:relative;margin:0 0 6px}
[data-menu] .hsearch input{width:100%;height:44px;padding:0 14px 0 38px;border-radius:12px;font:inherit;font-size:16px;
  color:var(--t-hi);background:var(--surface-input);border:1px solid var(--e-line)}
[data-menu] .hsearch input::placeholder{color:var(--t-dim)}
[data-menu] .hsearch input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(167,139,250,.35)}
[data-menu] .hsearch .go{left:8px;width:30px;height:30px}
/* Suggest dropdown, the market pages' look on Eclipse tokens. */
.sugg{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:70;background:var(--e-rail-bg);
  border:1px solid var(--e-line);border-radius:12px;box-shadow:0 18px 50px var(--e-shadow-45);overflow:hidden}
[data-nav] .sugg{left:auto;right:0;width:min(440px,calc(100vw - 28px))}
.sugg a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;color:var(--t-body)}
.sugg a.on,.sugg a:hover{background:color-mix(in srgb,var(--violet) 12%,transparent);color:var(--t-hi);text-decoration:none}
.sugg .sl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugg .sk{flex:none;margin-left:auto;font-family:'Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t-dim)}
.sugg a.all{border-top:1px solid var(--e-line);color:var(--violet);font-weight:600}
.sugg a.all .sk{color:var(--violet);opacity:.75}
/* Signed in: the name chip that replaces Sign in / Create account. */
.hh-me-chip{display:inline-flex;align-items:center;gap:8px;color:var(--t-hi);font-weight:600}
/* The wordmark link fills the pill's height, so it is a real tap target. */
.hh-brand{display:inline-flex;align-items:center;min-height:40px;margin:-10px 0}
/* Deal card price row: the price and the saving never break mid-string.
   When the column is too narrow the discount block drops below instead. */
.hh-pricerow{flex-wrap:wrap}
.hh-pricerow>div:first-child{white-space:nowrap}
.hh-pricerow>div:last-child{margin-left:auto;white-space:nowrap}