/* HyperCurio brand layer (Lord Alan redesign, phase 1, 13 Oct 2026).
 *
 * Blake: "terry sent a brand guide please apply to the website". The site's colours and type already come from the
 * Lord Alan v2 theme tokens (themes.json); what the live site lacked is everything the guide describes in words and
 * Alan's Import and Deal Scout mockups draw: the atmosphere, Audiowide display caps, glow, the Ignite call to action,
 * the 3D press, glowing tab indicators, outlined mono chips, the lens mark in the nav. Terry's gap analysis
 * (11 Oct, 43 gaps) names the values; where it says "needs specifying", this takes what the mockups do.
 *
 * This file is loaded only on top of the site's own brand themes (the dark and light mode themes), after hc.css and
 * every page stylesheet, so a person who picked Classic keeps Classic. It restyles shared components rather than
 * rewriting pages: every value reads the theme tokens, so the light mode theme gets it too.
 */

:root {
  /* The brand colours the theme tokens do not carry (gap C1, C6, A4). Dark values; the light theme's head
     overrides the few that change (see themes.js brandHead). */
  --hcb-glow: #6FE3FF;
  --hcb-blue: #0B4FD8;
  --hcb-uv: #5B2BE0;
  --hcb-uv-text: #B9A4FF;
  --hcb-ignite: #FF7A1A;
  --hcb-on-ignite: #060A17;
  --hcb-chrome: #C8D2E4;
  --hcb-field: #0A1024;
  --hcb-line-2: #2E3F78;
  --hcb-link: #5FD4FF;
  --hcb-glow-cyan: 0 0 24px rgba(34, 184, 255, .45);
  --hcb-glow-ignite: 0 0 18px rgba(255, 122, 26, .55);
  --hcb-wash-a: rgba(11, 79, 216, .28);
  --hcb-wash-b: rgba(91, 43, 224, .18);
  --hcb-star: .5;
  --hcb-circuit: .55;
  /* Type (gap B1-B3): Audiowide is display-only, weight 400, set in capitals with a little tracking. */
  --hcb-font-display: 'Audiowide', 'Exo 2', system-ui, sans-serif;
  --hcb-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --hcb-display-track: .02em;
  /* Motion (gap F1): four durations and three easings, from the mockup and hypercurio.css. */
  --hcb-dur-1: 80ms; --hcb-dur-2: 150ms; --hcb-dur-3: 280ms; --hcb-dur-4: 400ms;
  --hcb-ease-out: cubic-bezier(.2, .8, .2, 1);
  --hcb-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --hcb-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* Radii (gap G): cards 20, controls 10, chips 4. */
  --hcb-r-sm: 4px;
  --hcb-lens: url('/hc-lens-96.webp');
}

/* ---------------------------------------------------------------- atmosphere (gap D1)
   Two colour washes, a circuit trace on the right edge and a scatter of stars, all on one fixed layer behind the
   page. Pure CSS and an inline SVG: no DOM, no script, nothing to load. */
body::before, body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
body::before {
  background:
    radial-gradient(900px 600px at 88% -10%, var(--hcb-wash-a), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, var(--hcb-wash-b), transparent 60%);
}
body::after {
  opacity: var(--hcb-circuit);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900' fill='none' stroke='%2322305E' stroke-width='1.2'%3E%3Ccircle cx='560' cy='330' r='260'/%3E%3Ccircle cx='560' cy='330' r='200' stroke-dasharray='3 9'/%3E%3Ccircle cx='560' cy='330' r='320' stroke-dasharray='60 20 4 20'/%3E%3Cpath d='M0 520H180L240 460H420M60 600H260L320 540H400L430 510M880 720H700L640 660H520M880 120H760L700 60H600M300 820V700L360 640H470'/%3E%3Ccircle cx='420' cy='460' r='5'/%3E%3Ccircle cx='430' cy='510' r='4'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='600' cy='60' r='4'/%3E%3Ccircle cx='470' cy='640' r='4'/%3E%3C/svg%3E") right -120px top 40px / 900px 900px no-repeat,
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(111, 227, 255, var(--hcb-star)), transparent 2px),
    radial-gradient(1px 1px at 27% 64%, rgba(111, 227, 255, var(--hcb-star)), transparent 2px),
    radial-gradient(2px 2px at 41% 8%, rgba(255, 122, 26, calc(var(--hcb-star) * .9)), transparent 3px),
    radial-gradient(1px 1px at 55% 82%, rgba(111, 227, 255, var(--hcb-star)), transparent 2px),
    radial-gradient(1.5px 1.5px at 68% 34%, rgba(111, 227, 255, var(--hcb-star)), transparent 2px),
    radial-gradient(1px 1px at 79% 71%, rgba(111, 227, 255, var(--hcb-star)), transparent 2px),
    radial-gradient(2px 2px at 91% 14%, rgba(111, 227, 255, var(--hcb-star)), transparent 3px),
    radial-gradient(1px 1px at 6% 88%, rgba(255, 122, 26, calc(var(--hcb-star) * .9)), transparent 2px),
    radial-gradient(1.5px 1.5px at 35% 41%, rgba(111, 227, 255, var(--hcb-star)), transparent 2px),
    radial-gradient(1px 1px at 87% 52%, rgba(111, 227, 255, var(--hcb-star)), transparent 2px);
}
@media (max-width: 759px) { body::after { background-size: 560px 560px, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto; background-position: right -200px top 80px, 0 0; } }
@media (prefers-reduced-data: reduce) { body::before, body::after { display: none; } }
@media print { body::before, body::after { display: none; } }

/* ---------------------------------------------------------------- type (gap B1, B2, B5)
   Top-level page headings in Audiowide caps with a soft glow, as the mockups set IMPORT and DEAL SCOUT. An item's
   own name ("Batman #227 (1970)") and article titles stay in Exo 2, as the mockups do for inner pages. */
h1:not(.it-title):not(.hp-art-h1), .hc-display {
  font-family: var(--hcb-font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--hcb-display-track);
  text-shadow: 0 0 22px rgba(34, 184, 255, .35);
}
.it-title, .hp-art-h1 { font-weight: 800; letter-spacing: -.005em; }
.sh-title { font-family: var(--hcb-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--hcb-display-track); }
/* A grid, not inline-flex (13 Oct, phase 2): a long eyebrow that wraps ("... CURRENCY & MORE") keeps its second line
   beside the rule instead of dropping under it. */
.hc-eyebrow { display: inline-grid; grid-template-columns: 22px auto; align-items: center; column-gap: 10px; color: var(--hcb-ignite); }
.hc-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--hcb-ignite); box-shadow: var(--hcb-glow-ignite); }
a { color: var(--hcb-link); }
a:hover { color: var(--hcb-glow); }

/* ---------------------------------------------------------------- the frame (gap A, H2)
   The top bar is a frosted strip of the void; the lens mark replaces the typed "H". */
.sh-top, .hc-header {
  background: color-mix(in srgb, var(--hc-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.sh-tabs { background: color-mix(in srgb, var(--hc-bg) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hc-brand-mark, .sh-rail-mark {
  font-size: 0 !important; color: transparent !important;
  background: var(--hcb-lens) center / cover no-repeat !important;
  border-radius: 50% !important; filter: drop-shadow(0 0 10px rgba(34, 184, 255, .55));
}
.hc-brand-mark { width: 40px; height: 40px; }
.hc-brand-word { font-family: var(--hcb-font-display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; font-size: 17px; }
/* The active destination: a 3px glowing bar, cyan, in every layout (gap D, G: tabs). */
.sh-tab[aria-current="page"], .sh-desk-link[aria-current="page"], .sh-rail-link[aria-current="page"] { color: var(--hc-accent); }
.sh-tab[aria-current="page"]::before, .sh-desk-link[aria-current="page"]::after { box-shadow: var(--hcb-glow-cyan); }
.sh-rail-link[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--hcb-line-2); }
.sh-avatar { border-color: var(--hcb-line-2); }
.sh-avatar:hover { border-color: var(--hcb-chrome); box-shadow: 0 0 12px rgba(200, 210, 228, .25); }

/* ---------------------------------------------------------------- buttons (gap G1)
   Primary: Hyper Cyan with its glow and a UV base that the button presses into. Ignite is the one hot call to action
   per screen (hc-btn--hot, and the landing page's Create free account). Outline and surface are the quiet button. */
.hc-btn { font-weight: 800; transition: transform var(--hcb-dur-1) var(--hcb-ease-out), box-shadow var(--hcb-dur-2) var(--hcb-ease-out), background-color var(--hcb-dur-2), border-color var(--hcb-dur-2), filter var(--hcb-dur-2); }
.hc-btn--primary { box-shadow: var(--hcb-glow-cyan), 0 4px 0 var(--hcb-uv); }
.hc-btn--primary:not([disabled]):hover { filter: brightness(1.08); }
.hc-btn--primary:not([disabled]):active { transform: translateY(3px); box-shadow: var(--hcb-glow-cyan), 0 1px 0 var(--hcb-uv); }
.hc-btn--hot, a.hc-btn--primary[href="/index.html"] {   /* the landing page's Create free account is the Ignite CTA */
  background: var(--hcb-ignite); color: var(--hcb-on-ignite); box-shadow: var(--hcb-glow-ignite);
}
.hc-btn--hot:not([disabled]):hover, a.hc-btn--primary[href="/index.html"]:hover { box-shadow: 0 0 28px rgba(255, 122, 26, .75); filter: none; }
.hc-btn--hot:not([disabled]):active, a.hc-btn--primary[href="/index.html"]:active { transform: translateY(2px); }
.hc-btn--outline, .hc-btn--surface { background: transparent; border: 1px solid var(--hcb-line-2); }
.hc-btn--outline:hover, .hc-btn--surface:hover { background: var(--hc-surface-2); border-color: var(--hcb-line-2); }
.hc-btn--assistant { border: 2px solid var(--hc-assistant); }
.hc-btn--assistant:hover { background: rgba(111, 227, 255, .08); box-shadow: 0 0 16px rgba(111, 227, 255, .25); }
.hc-btn[disabled], .hc-btn[aria-disabled="true"] { box-shadow: none; transform: none; }

/* ---------------------------------------------------------------- fields (gap C2: control borders)
   Fields sit on the darker field colour with the brighter line, which is what lifts the border over 3:1. Focus is
   Ignite, as in the mockups, so it reads against the cyan everywhere else. */
.hc-input, input.hc-input, select.hc-input, textarea.hc-input, .sh-search input { background: var(--hcb-field); border-color: var(--hcb-line-2); }
:focus-visible { outline-color: var(--hcb-ignite); }
.hc-input:focus-visible, .sh-search input:focus-visible { outline: 2px solid var(--hcb-ignite); outline-offset: 2px; }
.hc-input[aria-invalid="true"] { border-color: var(--hcb-ignite); box-shadow: inset 0 0 0 1px var(--hcb-ignite); }

/* ---------------------------------------------------------------- tabs (gap G1)
   Every page's own tab row (role="tab") gets the same 3px glowing indicator. */
[role="tab"][aria-selected="true"] { color: var(--hc-text); box-shadow: inset 0 -3px 0 var(--hc-accent), 0 6px 14px -10px rgba(34, 184, 255, .9); }

/* ---------------------------------------------------------------- surfaces
   Cards keep their token colours and radius; they gain the hairline lift on hover where they are links. */
.hc-card { border-color: var(--hc-border); }
a.hc-card:hover, button.hc-card:hover { border-color: var(--hcb-line-2); box-shadow: 0 0 0 1px var(--hcb-line-2); }

/* ---------------------------------------------------------------- chips (gap B6, C11)
   Status and category chips: outlined, mono, capitals. Marketplace tags stay one neutral style (C11: never imitate a
   third party's brand colour). */
.hc-pill, .co-chip, .ds-chip, .cp-chip {
  font-family: var(--hcb-font-mono); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--hcb-r-sm); border: 1px solid currentColor; background: transparent;
}
.hc-pill[aria-pressed="true"], .co-chip[aria-pressed="true"], .ds-chip[aria-pressed="true"], .ds-chip.is-on, .co-chip.is-on {
  color: var(--hc-accent); box-shadow: 0 0 12px rgba(34, 184, 255, .3);
  background: rgba(34, 184, 255, .12);   /* 13 Oct: a page's own filled pressed chip (Collection's) made this cyan on cyan */
}
.co-chip[aria-pressed="true"] .co-chip-n { color: var(--hc-accent); }

/* ---------------------------------------------------------------- figures (gap B4)
   Big numbers stay in the figure family (mono); the money figure on a hero gets the cyan glow. */
.hc-figure, .db-big, .hm-value { text-shadow: 0 0 18px rgba(34, 184, 255, .35); }

/* ---------------------------------------------------------------- motion (gap F1-F4) */
.hcb-skel, [data-skeleton] {
  background: linear-gradient(90deg, var(--hc-surface-1) 25%, var(--hc-surface-2) 37%, var(--hc-surface-1) 63%) 0 0 / 400% 100%;
  animation: hcb-shimmer 1.4s var(--hcb-ease-in-out) infinite;
}
@keyframes hcb-shimmer { to { background-position: -100% 0; } }
.sh-main > *, .hc-main > * { animation: hcb-rise var(--hcb-dur-4) var(--hcb-ease-out) both; }
/* Opacity only: a transform on a page wrapper would turn every position:fixed child (dialogs, the toast) into a
   child of the wrapper for the length of the animation. */
@keyframes hcb-rise { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sh-main > *, .hc-main > * { animation: none; }
  .hcb-skel, [data-skeleton] { animation: none; }
}

/* ---------------------------------------------------------------- landing hero (phase 2, 13 Oct)
   The hero box still carries the illustrator's brief (three captions, one per width) in its markup; under the brand
   the box shows Terry's original-art lens on radar rings instead of the brief, until the briefed photo exists. */
.lp-hero-img {
  position: relative; border-radius: 20px; border-style: solid; border-color: var(--hc-border);
  background:
    url('/hc-lens-384.webp') center / min(300px, 70%) no-repeat,
    repeating-radial-gradient(circle at 50% 50%, transparent 0 46px, rgba(111, 227, 255, .10) 47px 48px),
    radial-gradient(120% 140% at 100% 0%, rgba(11, 79, 216, .45), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(91, 43, 224, .22), transparent 60%),
    var(--hc-surface-1);
}
.lp-hero-img .lp-cap { display: none !important; }
.lp-hero-img::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0 0 20px 20px;
  background: linear-gradient(90deg, transparent, var(--hcb-ignite) 20%, var(--hc-accent) 60%, transparent); }