/* GENERATED by tools/build-brand-css.js from tools/hc-brand-lord-alan.src.css. Edit the source, not this file. */
/* HyperCurio brand layer (HC-1624). SOURCE: run `node tools/build-brand-css.js` to write static/hc-brand-lord-alan.css.
 *
 * Written the plain way, with no scoping. The builder puts every rule under :where(:root[data-theme^="lord-alan-v2"])
 * (an id prefix kept so saved preferences and uploaded theme files keep working; nobody reads it), so the whole sheet has no
 * effect under Classic or any other theme, and adds no specificity: a rule here wins by coming after the page's own
 * stylesheets, exactly as before the scoping. `:root[data-hub] h1` becomes :where(:root[data-theme^=...][data-hub]) h1.
 * Rules inside @keyframes and @font-face are left alone.
 *
 * Why not an @layer: every page stylesheet is unlayered, and unlayered rules beat layered ones whatever the order, so a
 * layer would lose to all of them. This sheet is loaded last instead (after hc.css and each page's CSS, in <head>).
 *
 * Colour comes from the theme tokens (--hc-action, --hc-field, --hc-border-control, --hc-link, --hc-focus, --hc-glow,
 * --hc-uv ...), never from literals, so the Light theme is the same sheet. What a token cannot carry lives here: the
 * atmosphere, the focus ring, chip shapes, the extrusion press, the five keyframes.
 * Attributes the server puts on <html>: data-theme, data-mode (dark|light), data-atmos (on|off), data-chip, data-hub.
 */

:where(:root[data-theme^="lord-alan-v2"]) {
  --hcb-star-pct: 50%;
  --hcb-circuit: .55;
  --hcb-wash-a: 28%;
  --hcb-wash-b: 18%;
  --hcb-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Motion (HC-1624 3.4): the product's whole vocabulary is five keyframes and these durations. */
  --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-lens: var(--hc-asset-logo-mark, url('/hc-lens-96.webp'));
}
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) { --hcb-star-pct: 25%; --hcb-circuit: .35; --hcb-wash-a: 10%; --hcb-wash-b: 6%; }
/* HC-1646 (roadmap 282): the light theme's atmosphere is the mockup's: ONE wash, the accent at 10% from the top right
   (its :root[data-theme="light"] .atmos::before), with the stars at .25 above. The ultraviolet wash is dark-only. */

/* ---------------------------------------------------------------- focus (HC-1624)
   One ring for every interactive element, from the mockup: 2px in the focus colour, 2px off the edge, with a gap-filler
   in the page colour. !important on the outline only, because pages set `outline: none` on their own controls. */
:where(:root[data-theme^="lord-alan-v2"]) :focus-visible {
  outline: 2px solid var(--hc-focus) !important; outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--hc-bg);
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-input:focus-visible,
:where(:root[data-theme^="lord-alan-v2"]) .sh-search input:focus-visible { box-shadow: 0 0 0 2px var(--hc-bg); }
/* HC-1993: things focused BY SCRIPT so a screen reader starts there (dialog headlines, dialogs, panels with
   tabindex="-1") are not controls and get no ring. Safari counts script focus after a tap as :focus-visible.
   Higher specificity than the ring above, so this !important wins. Nothing in the app roves tabindex="-1". */
:where(:root[data-theme^="lord-alan-v2"]) [tabindex="-1"]:focus-visible,
:where(:root[data-theme^="lord-alan-v2"]) dialog:focus-visible,
:where(:root[data-theme^="lord-alan-v2"]) [role="dialog"]:focus-visible { outline: none !important; box-shadow: none !important; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-input[aria-invalid="true"] { border-color: var(--hc-action); box-shadow: inset 0 0 0 1px var(--hc-action); }

/* ---------------------------------------------------------------- atmosphere
   One fixed layer behind the page: two colour washes (body::before), a circuit trace on the right edge in the border
   colour (body::after, a mask so it follows the theme) and 26 seeded 2-3px stars (html::after): Glow at the theme's star
   strength, one in six Ignite. Static: the stars do not twinkle. Pure CSS: no DOM, no script, nothing to load. */
:where(:root[data-theme^="lord-alan-v2"][data-atmos="on"]) body::before,
:where(:root[data-theme^="lord-alan-v2"][data-atmos="on"]) body::after,
:where(:root[data-theme^="lord-alan-v2"][data-atmos="on"])::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
}
:where(:root[data-theme^="lord-alan-v2"][data-atmos="on"]) body::before {
  background:
    radial-gradient(900px 600px at 88% -10%, color-mix(in srgb, var(--hc-deep) var(--hcb-wash-a), transparent), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, color-mix(in srgb, var(--hc-uv) var(--hcb-wash-b), transparent), transparent 60%);
}
:where(:root[data-theme^="lord-alan-v2"][data-atmos="on"][data-mode="light"]) body::before {
  background: radial-gradient(900px 600px at 88% -10%, color-mix(in srgb, var(--hc-accent) var(--hcb-wash-a), transparent), transparent 60%);
}
:where(:root[data-theme^="lord-alan-v2"][data-atmos="on"]) body::after {
  opacity: var(--hcb-circuit); background: var(--hc-border);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900' fill='none' stroke='%23fff' 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;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900' fill='none' stroke='%23fff' 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;
}
:where(:root[data-theme^="lord-alan-v2"][data-atmos="on"])::after {
  background:
    radial-gradient(3px 3px at 48% 66%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 4px),
    radial-gradient(2px 2px at 75% 55%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 3px),
    radial-gradient(2px 2px at 95% 10%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 3px),
    radial-gradient(3px 3px at 96% 53%, color-mix(in srgb, var(--hc-action) 45%, transparent), transparent 4px),
    radial-gradient(3px 3px at 9% 42%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 4px),
    radial-gradient(3px 3px at 66% 16%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 4px),
    radial-gradient(3px 3px at 50% 9%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 4px),
    radial-gradient(3px 3px at 23% 58%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 4px),
    radial-gradient(2px 2px at 74% 36%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 3px),
    radial-gradient(3px 3px at 35% 17%, color-mix(in srgb, var(--hc-action) 45%, transparent), transparent 4px),
    radial-gradient(2px 2px at 88% 12%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 3px),
    radial-gradient(2px 2px at 49% 80%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 3px),
    radial-gradient(2px 2px at 71% 81%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 3px),
    radial-gradient(3px 3px at 44% 56%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 4px),
    radial-gradient(3px 3px at 14% 93%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 4px),
    radial-gradient(2px 2px at 4% 34%, color-mix(in srgb, var(--hc-action) 45%, transparent), transparent 3px),
    radial-gradient(2px 2px at 44% 56%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 3px),
    radial-gradient(3px 3px at 20% 65%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 4px),
    radial-gradient(2px 2px at 62% 34%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 3px),
    radial-gradient(3px 3px at 20% 45%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 4px),
    radial-gradient(2px 2px at 96% 55%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 3px),
    radial-gradient(3px 3px at 50% 28%, color-mix(in srgb, var(--hc-action) 45%, transparent), transparent 4px),
    radial-gradient(3px 3px at 60% 45%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 4px),
    radial-gradient(3px 3px at 85% 78%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 4px),
    radial-gradient(2px 2px at 70% 21%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 3px),
    radial-gradient(2px 2px at 5% 42%, color-mix(in srgb, var(--hc-link-strong) var(--hcb-star-pct), transparent), transparent 3px);
}

@media (max-width: 759px) {
  :where(:root[data-theme^="lord-alan-v2"][data-atmos="on"]) body::after { -webkit-mask-size: 560px 560px; mask-size: 560px 560px; -webkit-mask-position: right -200px top 80px; mask-position: right -200px top 80px; }
}
@media (prefers-reduced-data: reduce) { :where(:root[data-theme^="lord-alan-v2"][data-atmos="on"]) body::before,
:where(:root[data-theme^="lord-alan-v2"][data-atmos="on"]) body::after,
:where(:root[data-theme^="lord-alan-v2"][data-atmos="on"])::after { display: none; } }
@media print { :where(:root[data-theme^="lord-alan-v2"][data-atmos="on"]) body::before,
:where(:root[data-theme^="lord-alan-v2"][data-atmos="on"]) body::after,
:where(:root[data-theme^="lord-alan-v2"][data-atmos="on"])::after { display: none; } }
@media (forced-colors: active) { :where(:root[data-theme^="lord-alan-v2"][data-atmos="on"]) body::before,
:where(:root[data-theme^="lord-alan-v2"][data-atmos="on"]) body::after,
:where(:root[data-theme^="lord-alan-v2"][data-atmos="on"])::after { display: none; } }

/* ---------------------------------------------------------------- type
   The hero face (Audiowide, fixed copy only) is for the page heading of a HUB page: Import and Deal Scout. It is
   requested only there (the server preloads it only there). Every other page heading is Exo 2 800, as the mockups set
   inner pages. An item's own name and article titles are user or editorial text and never use it. */
:where(:root[data-theme^="lord-alan-v2"]) h1:not(.it-title):not(.hp-art-h1) { font-weight: 800; }
:where(:root[data-theme^="lord-alan-v2"][data-hub]) h1:not(.it-title):not(.hp-art-h1),
:where(:root[data-theme^="lord-alan-v2"][data-hub]) .hc-display {
  font-family: var(--hc-font-hero); font-weight: 400;
  text-transform: var(--hc-hero-case); letter-spacing: var(--hc-hero-track);
  text-shadow: var(--hc-text-glow);
}
:where(:root[data-theme^="lord-alan-v2"]) .it-title,
:where(:root[data-theme^="lord-alan-v2"]) .hp-art-h1 { font-weight: 800; letter-spacing: -.005em; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-brand-word { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 17px; }
/* 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. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-eyebrow { display: inline-grid; grid-template-columns: 22px auto; align-items: center; column-gap: 10px; color: var(--hc-action); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .hc-eyebrow { color: var(--hc-bad); }   /* the Ignite orange is a fill, 3.3:1 as text on white; the deep orange reads */
:where(:root[data-theme^="lord-alan-v2"]) .ho-intent--primary .ho-intent-sub { color: var(--hc-on-accent); }   /* Classic's fixed brown reads 2.9:1 on the light theme's blue */
:where(:root[data-theme^="lord-alan-v2"]) .db-foot b.c { color: var(--hc-bad); }
:where(:root[data-theme^="lord-alan-v2"]) .in-ask-btn { color: var(--hc-on-accent); }   /* Classic sets a fixed dark teal on the assistant fill: 3.0:1 on the light theme's deeper teal */
/* HC-1646: the light theme passes axe on Home and Scout. Home's hue links and the Collection value eyebrow were mixed for both
   modes and came to 3.8 to 4.3:1 on white; a deeper mix keeps each hue at 5:1 and over. Add's line under the title was faded
   to .8 on the accent fill (4.2:1); it is solid. Scout's Ending soon chip was a gold drawn on white (1.7:1). */
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .ho-value .hc-eyebrow { color: var(--hc-bad); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .ho-action--add .ho-action-p { opacity: 1; }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .ho-action--appraise .ho-action-go { color: color-mix(in srgb, #F49A3F 56%, var(--hc-text)); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .ho-action--find .ho-action-go { color: color-mix(in srgb, #7AAAFF 56%, var(--hc-text)); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .ho-action--scout .ho-action-go { color: color-mix(in srgb, #4CC38A 54%, var(--hc-text)); }
/* The pre-grade range label and band read in the gold of hc-motion-bcd.css, 4.25:1 on white in the light theme; set on body,
   so it wins over that sheet's :root value without a heavier selector. */
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) body { --hcb-gold: #946100; }
/* Import still carries Collection's old phone bar (.co-bottomnav) under the shell's tab bar, which covered all of it but a 4px
   strip: a second Main nav nobody could reach (axe: target-size). Where the shell's bar is on the page, the old one goes. */
:where(:root[data-theme^="lord-alan-v2"]) body:has(.sh-tabs) .co-bottomnav { display: none; }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .ds-pill--warn { color: color-mix(in srgb, #F2C14E 45%, var(--hc-text)); border-color: currentColor; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--hc-action); box-shadow: var(--hc-glow-action); }
:where(:root[data-theme^="lord-alan-v2"]) a { color: var(--hc-link); }
:where(:root[data-theme^="lord-alan-v2"]) a:hover { color: var(--hc-link-strong); }

/* ---------------------------------------------------------------- the frame
   The top bar is a frosted strip of the void; the lens mark replaces the typed "H". */
:where(:root[data-theme^="lord-alan-v2"]) .sh-top,
:where(:root[data-theme^="lord-alan-v2"]) .hc-header,
:where(:root[data-theme^="lord-alan-v2"]) .co-topbar,
:where(:root[data-theme^="lord-alan-v2"]) .it-topbar {
  background: color-mix(in srgb, var(--hc-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
:where(:root[data-theme^="lord-alan-v2"]) .sh-tabs { background: color-mix(in srgb, var(--hc-bg) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-brand-mark,
:where(:root[data-theme^="lord-alan-v2"]) .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 color-mix(in srgb, var(--hc-accent) 55%, transparent));
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-brand-mark { width: 40px; height: 40px; }
/* The active destination: a 3px glowing bar, in every layout. In the top bar the word stays ink and the icon and bar are
   Cyan (the mockup's .topnav); on the rail and the tab bar the whole item is Cyan (HC-1625, HC-1626). */
:where(:root[data-theme^="lord-alan-v2"]) .sh-tab[aria-current="page"],
:where(:root[data-theme^="lord-alan-v2"]) .sh-rail-link[aria-current="page"] { color: var(--hc-accent); }
:where(:root[data-theme^="lord-alan-v2"]) .sh-desk-link[aria-current="page"] { color: var(--hc-text); }
:where(:root[data-theme^="lord-alan-v2"]) .sh-tab[aria-current="page"]::before,
:where(:root[data-theme^="lord-alan-v2"]) .sh-desk-link[aria-current="page"]::after { box-shadow: var(--hc-glow); }
:where(:root[data-theme^="lord-alan-v2"]) .sh-rail-link[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--hc-border-control); }
:where(:root[data-theme^="lord-alan-v2"]) .sh-rail-nav { background: var(--hc-surface-1); }
:where(:root[data-theme^="lord-alan-v2"]) .sh-nbadge { box-shadow: var(--hc-glow-action); }
:where(:root[data-theme^="lord-alan-v2"]) .sh-avatar { border-color: var(--hc-border-control); }
:where(:root[data-theme^="lord-alan-v2"]) .sh-avatar:hover { border-color: var(--hc-chrome); box-shadow: 0 0 12px color-mix(in srgb, var(--hc-chrome) 25%, transparent); }

/* ---------------------------------------------------------------- buttons
   Primary: the accent with its glow and the UV extrusion it presses into (6px down to 2px, the button moving 4px).
   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. */
:where(:root[data-theme^="lord-alan-v2"]) .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); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--primary { box-shadow: var(--hc-glow), var(--hc-extrude); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--primary:not([disabled]):hover { filter: brightness(1.08); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--primary:not([disabled]):active { transform: translateY(4px); box-shadow: var(--hc-glow), 0 2px 0 var(--hc-uv); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--hot,
:where(:root[data-theme^="lord-alan-v2"]) a.hc-btn--primary[href="/index.html"] {   /* the landing page's Create free account is the Ignite CTA */
  background: var(--hc-action); border-color: var(--hc-action); color: var(--hc-on-action); box-shadow: var(--hc-glow-action);
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--hot:not([disabled]):hover,
:where(:root[data-theme^="lord-alan-v2"]) a.hc-btn--primary[href="/index.html"]:hover { filter: brightness(1.08); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--hot:not([disabled]):active,
:where(:root[data-theme^="lord-alan-v2"]) a.hc-btn--primary[href="/index.html"]:active { transform: translateY(2px); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--outline,
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--surface { background: transparent; border: 1px solid var(--hc-border-control); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--outline:hover,
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--surface:hover { background: var(--hc-surface-2); border-color: var(--hc-border-control); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--assistant { border: 2px solid var(--hc-assistant); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--assistant:hover { background: color-mix(in srgb, var(--hc-assistant) 8%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--hc-assistant) 25%, transparent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn[disabled],
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn[aria-disabled="true"] { box-shadow: none; transform: none; }

/* ---------------------------------------------------------------- fields
   Fields sit on the recessed field colour with the control border, which is what lifts the edge over 3:1. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-input,
:where(:root[data-theme^="lord-alan-v2"]) input.hc-input,
:where(:root[data-theme^="lord-alan-v2"]) select.hc-input,
:where(:root[data-theme^="lord-alan-v2"]) textarea.hc-input,
:where(:root[data-theme^="lord-alan-v2"]) .sh-search input { background: var(--hc-field); border-color: var(--hc-border-control); }

/* ---------------------------------------------------------------- tabs
   Every page's own tab row (role="tab") gets the same 3px glowing indicator. */
:where(:root[data-theme^="lord-alan-v2"]) [role="tab"][aria-selected="true"] { color: var(--hc-text); box-shadow: inset 0 -3px 0 var(--hc-accent), 0 6px 14px -10px var(--hc-accent); }

/* ---------------------------------------------------------------- surfaces
   Cards keep their token colours and radius; they gain the hairline lift on hover where they are links. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-card { border-color: var(--hc-border); }
:where(:root[data-theme^="lord-alan-v2"]) a.hc-card:hover,
:where(:root[data-theme^="lord-alan-v2"]) button.hc-card:hover { border-color: var(--hc-border-control); box-shadow: 0 0 0 1px var(--hc-border-control); }

/* ---------------------------------------------------------------- chips
   Status and category chips: outlined, mono, capitals, when the theme asks for outline-mono. Marketplace tags stay one
   neutral style (never imitate a third party's brand colour). */
:where(:root[data-theme^="lord-alan-v2"][data-chip="outline-mono"]) .hc-pill,
:where(:root[data-theme^="lord-alan-v2"][data-chip="outline-mono"]) .co-chip,
:where(:root[data-theme^="lord-alan-v2"][data-chip="outline-mono"]) .ds-chip,
:where(:root[data-theme^="lord-alan-v2"][data-chip="outline-mono"]) .cp-chip {
  font-family: var(--hcb-font-mono); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--hc-radius-chip); border: 1px solid currentColor; background: transparent;
}
:where(:root[data-theme^="lord-alan-v2"][data-chip="outline-mono"]) .hc-pill[aria-pressed="true"],
:where(:root[data-theme^="lord-alan-v2"][data-chip="outline-mono"]) .co-chip[aria-pressed="true"],
:where(:root[data-theme^="lord-alan-v2"][data-chip="outline-mono"]) .ds-chip[aria-pressed="true"],
:where(:root[data-theme^="lord-alan-v2"][data-chip="outline-mono"]) .ds-chip.is-on,
:where(:root[data-theme^="lord-alan-v2"][data-chip="outline-mono"]) .co-chip.is-on {
  color: var(--hc-accent); box-shadow: var(--hc-glow);
  background: color-mix(in srgb, var(--hc-accent) 12%, transparent);   /* 13 Oct: a page's own filled pressed chip (Collection's) made this cyan on cyan */
}
:where(:root[data-theme^="lord-alan-v2"][data-chip="outline-mono"]) .co-chip[aria-pressed="true"] .co-chip-n { color: var(--hc-accent); }

/* ---------------------------------------------------------------- figures (HC-1646, roadmap 282)
   The big figures are the display figure of guide 3.2: the theme sets --hc-font-figure to var(--hc-font-hero) (Audiowide)
   and --hc-weight-figure to 400, its only weight, so every value, price and count tile that already draws in the figure
   family moves with no page change. hc-fonts.css has the Audiowide face claim 400 to 900, so a figure inside <b> is never a
   faked bold. What stays in mono, as the mockup sets it ("data in mono"): small data under the 22px a display figure
   starts at, the period buttons, the lens labels, and a want's issue number, which the person typed. Audiowide never sets
   text a person wrote [C40]. The money figure on a hero keeps the glow. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-figure,
:where(:root[data-theme^="lord-alan-v2"]) .db-big,
:where(:root[data-theme^="lord-alan-v2"]) .hm-value { text-shadow: var(--hc-text-glow); }
:where(:root[data-theme^="lord-alan-v2"]) .acc-bundle-n,
:where(:root[data-theme^="lord-alan-v2"]) .ad-figure b,
:where(:root[data-theme^="lord-alan-v2"]) .db-controls .db-periods button,
:where(:root[data-theme^="lord-alan-v2"]) .db-lens-conf,
:where(:root[data-theme^="lord-alan-v2"]) .db-lens-t,
:where(:root[data-theme^="lord-alan-v2"]) .it-ruler-label,
:where(:root[data-theme^="lord-alan-v2"]) .it-sell-net,
:where(:root[data-theme^="lord-alan-v2"]) .hcb-br-label,
:where(:root[data-theme^="lord-alan-v2"]) .hcb-rng-label,
:where(:root[data-theme^="lord-alan-v2"]) .hcb-scale-t,
:where(:root[data-theme^="lord-alan-v2"]) .ghx-deal b,
:where(:root[data-theme^="lord-alan-v2"]) .hc-finds b,
:where(:root[data-theme^="lord-alan-v2"]) .lu-sum-total b,
:where(:root[data-theme^="lord-alan-v2"]) .sp-num { font-family: var(--hcb-font-mono); }
:where(:root[data-theme^="lord-alan-v2"]) .acc-bundle-n { font-weight: 700; }

/* ---------------------------------------------------------------- motion
   The five keyframes of the product (HC-1624 3.4): pulse (live dots), scan (a band sweeping a photo), spin (the radar),
   sh (skeleton shimmer) and fin (a view's entry). Stages 2 onward use the first three; the last two are used here. */
@keyframes hcb-pulse { 50% { opacity: .25; } }
@keyframes hcb-scan { from { top: 0; } to { top: 100%; } }
@keyframes hcb-spin { to { transform: rotate(360deg); } }
@keyframes hcb-sh { to { background-position: -200% 0; } }
@keyframes hcb-fin { from { opacity: 0; } }
:where(:root[data-theme^="lord-alan-v2"]) .hcb-pulse { animation: hcb-pulse 1.4s ease-in-out infinite; }
:where(:root[data-theme^="lord-alan-v2"]) .hcb-skel,
:where(:root[data-theme^="lord-alan-v2"]) [data-skeleton] {
  background: linear-gradient(90deg, var(--hc-surface-1) 25%, var(--hc-surface-2) 37%, var(--hc-surface-1) 63%) 0 0 / 200% 100%;
  animation: hcb-sh 1.2s linear infinite;
}
/* fin is opacity only here: 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. */
:where(:root[data-theme^="lord-alan-v2"]) .sh-main > *,
:where(:root[data-theme^="lord-alan-v2"]) .hc-main > * { animation: hcb-fin .25s ease-out both; }
/* The mockup's reduced-motion rule, as it is: animations and transitions end at once, so the radar, scan and shimmer stop
   and a progress bar still arrives at its value. */
@media (prefers-reduced-motion: reduce) {
  :where(:root[data-theme^="lord-alan-v2"]) *,
:where(:root[data-theme^="lord-alan-v2"]) *::before,
:where(:root[data-theme^="lord-alan-v2"]) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* Forced colours: no glows, washes or atmosphere (the atmosphere is hidden above); the focus ring takes the system colour. */
@media (forced-colors: active) {
  :where(:root[data-theme^="lord-alan-v2"]) * { text-shadow: none !important; box-shadow: none !important; }
  :where(:root[data-theme^="lord-alan-v2"]) :focus-visible { outline-color: Highlight !important; }
}

/* ---------------------------------------------------------------- hero bands in the light theme (HC-1646, guide 5.8 and 6.6)
   "Heroes, completion heroes and the Deal Scout hero stay dark": the mockup forces its dark set inside .hero, .done-hero and
   .ds-hero under the light theme. The page heroes here are Import's (and its Done band) and Scout's (and its plan landing);
   the shared hero and completion hero components do the same in hc-components. The values are HyperCurio Dark's own. */
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .im-hero,
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .ds-hero {
  --hc-bg: #060A17; --hc-surface-1: #0E1630; --hc-surface-2: #121D3E; --hc-field: #0A1024; --hc-border: #22305E; --hc-border-control: #5568AE;
  --hc-text: #EAF4FF; --hc-text-muted: #9DB0D4; --hc-text-disabled: #7C8CB0; --hc-accent: #22B8FF; --hc-on-accent: #060A17;
  --hc-assistant: #6FE3FF; --hc-good: #6FE3FF; --hc-bad: #FF7A1A; --hc-action: #FF7A1A; --hc-focus: #FF7A1A;
  --hc-link: #5FD4FF; --hc-link-strong: #6FE3FF; --hc-uv-text: #B9A4FF; --hc-chrome: #C8D2E4;
  --hc-glow: 0 0 24px rgba(34,184,255,.45); --hc-glow-action: 0 0 18px rgba(255,122,26,.55); --hc-text-glow: 0 0 22px rgba(34,184,255,.55);
  --hc-wash-hero: radial-gradient(120% 140% at 100% 0%, rgba(11,79,216,.55), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(91,43,224,.25), transparent 60%);
  background-color: #060A17; color: var(--hc-text); border-color: var(--hc-border); color-scheme: dark;
}

/* ---------------------------------------------------------------- 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. */
:where(:root[data-theme^="lord-alan-v2"]) .lp-hero-img {
  position: relative; border-radius: 20px; border-style: solid; border-color: var(--hc-border);
  background:
    var(--hc-asset-hero-art, url('/hc-lens-384.webp')) center / min(300px, 70%) no-repeat,
    repeating-radial-gradient(circle at 50% 50%, transparent 0 46px, color-mix(in srgb, var(--hc-link-strong) 10%, transparent) 47px 48px),
    var(--hc-wash-hero),
    var(--hc-surface-1);
}
:where(:root[data-theme^="lord-alan-v2"]) .lp-hero-img .lp-cap { display: none !important; }
:where(:root[data-theme^="lord-alan-v2"]) .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(--hc-action) 20%, var(--hc-accent) 60%, transparent); }

/* ---------------------------------------------------------------- public and auth pages (HC-1645, roadmap 281; Terry, 25 Oct:
   "please confirm this is not implemented as desired, finish this ticket"). Guide 6.1 and 7.14.
   Auth (sign in, sign up, invite, reset): one centred 420px panel on the atmosphere, the 64px nav mark over it, the H1 in the
   heading face at 800, one primary. The marketing column goes; hc-auth.html keeps the heading in the form column under these
   themes. Legal and Help: the inner header (a Glow back link, the H1 at 800, a muted line under it) and long reading at
   17px/1.6. The plan cards are hc-guest.css's (the landing page carries no theme). */
:where(:root[data-theme^="lord-alan-v2"]) .au-aside { display: none !important; }
:where(:root[data-theme^="lord-alan-v2"]) .au-grid { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; align-items: start !important; padding-block: 8px 0 !important; }
:where(:root[data-theme^="lord-alan-v2"]) .au-form { width: min(420px, 100%); }
:where(:root[data-theme^="lord-alan-v2"]) .au-mark { display: block; width: 64px; height: 64px; margin: 0 auto 16px; background: var(--hcb-lens) center / contain no-repeat;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--hc-accent) 45%, transparent)); }
:where(:root[data-theme^="lord-alan-v2"]) .au-form .au-head { text-align: center; margin-bottom: 20px; }
:where(:root[data-theme^="lord-alan-v2"]) .au-form .au-head h1 { font-family: var(--hc-font-display); font-weight: 800; font-size: clamp(26px, 6vw, 32px); }
:where(:root[data-theme^="lord-alan-v2"]) .au-card { padding: 24px !important; border: 1px solid var(--hc-border-control) !important; border-radius: 20px !important; background: var(--hc-surface-1) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .au-card { box-shadow: 0 16px 40px rgba(10, 18, 48, .12); }
:where(:root[data-theme^="lord-alan-v2"]) .au-providers { grid-template-columns: 1fr !important; }
:where(:root[data-theme^="lord-alan-v2"]) .au-provider { background: transparent; border: 1px solid var(--hc-border-control); }
:where(:root[data-theme^="lord-alan-v2"]) .au-provider:hover { background: var(--hc-surface-2); }
@media (max-width: 420px) { :where(:root[data-theme^="lord-alan-v2"]) .au-card { padding: 20px 16px !important; } }
/* #1765 (Terry, 27 Oct: "redesign the desktop version of the login form to be shorter in height so the entire login form is
   visible on the screen"). On a laptop the one-column panel ran to about 870px, so the Log in button sat below the fold at
   every common laptop height. From 1024px wide the log-in panel is two columns: the Google, Apple and passkey buttons on
   the left, "or" as a vertical rule, and the email form on the right, so the panel is as tall as the email form alone. The
   header (the lens, the heading, the line under it) is a little tighter, and on a short window (760px and under) the top bar
   and the lens shrink too. The phone layout is untouched. au-card--split is set by hc-auth.html on the screens that have the
   provider buttons. */
@media (min-width: 1024px) {
  :where(:root[data-theme^="lord-alan-v2"]) .au-form:has(.au-card--split) { width: min(800px, 100%); }
  :where(:root[data-theme^="lord-alan-v2"]) .au-form .au-head { margin-bottom: 16px; }
  :where(:root[data-theme^="lord-alan-v2"]) .au-form .au-head p { margin-top: 6px; }
  :where(:root[data-theme^="lord-alan-v2"]) .au-card--split { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 28px; row-gap: 14px; padding: 28px !important; }
  :where(:root[data-theme^="lord-alan-v2"]) .au-card--split > * { grid-column: 3; }
  :where(:root[data-theme^="lord-alan-v2"]) .au-card--split > .au-providers { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
  :where(:root[data-theme^="lord-alan-v2"]) .au-card--split > .au-or { grid-column: 2; grid-row: 1 / span 4; flex-direction: column; justify-content: center; }
  :where(:root[data-theme^="lord-alan-v2"]) .au-card--split > .au-or::before,
:where(:root[data-theme^="lord-alan-v2"]) .au-card--split > .au-or::after { width: 1px; height: auto; }
  :where(:root[data-theme^="lord-alan-v2"]) .au-card--split > button[type="submit"] { margin-top: 2px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  :where(:root[data-theme^="lord-alan-v2"]) .au-top { padding-block: 10px; }
  :where(:root[data-theme^="lord-alan-v2"]) .au-top .hc-wordmark { height: 44px; }
  :where(:root[data-theme^="lord-alan-v2"]) .au-mark { width: 48px; height: 48px; margin-bottom: 10px; }
}

:where(:root[data-theme^="lord-alan-v2"]) .lg-back,
:where(:root[data-theme^="lord-alan-v2"]) .hp-back { display: inline-flex !important; align-items: center; gap: 4px; margin-bottom: 10px; text-decoration: none; }
:where(:root[data-theme^="lord-alan-v2"]) .lg-h1,
:where(:root[data-theme^="lord-alan-v2"]) .hp-h1 { font-family: var(--hc-font-display); font-weight: 800; font-size: clamp(28px, 4.2vw, 36px); line-height: 1.15; }
:where(:root[data-theme^="lord-alan-v2"]) .lg-meta,
:where(:root[data-theme^="lord-alan-v2"]) .hp-sub { color: var(--hc-text-muted); font-size: 16px; }
:where(:root[data-theme^="lord-alan-v2"]) .hp-sub { display: block !important; margin: 6px 0 0; }
:where(:root[data-theme^="lord-alan-v2"]) .lg-doc,
:where(:root[data-theme^="lord-alan-v2"]) .hp-article { font-family: var(--hc-font-body); font-size: 17px; line-height: 1.6; }
:where(:root[data-theme^="lord-alan-v2"]) .lg-doc li,
:where(:root[data-theme^="lord-alan-v2"]) .hp-article li { line-height: 1.6; }
:where(:root[data-theme^="lord-alan-v2"]) .lg-intro { font-size: 17px; }