/* HyperCurio — HC-100: design tokens, responsive shell and shared components.
 *
 * Every value here comes from Terry's Shared Context v2 (28 Sep 2026). Nothing is invented and
 * nothing is rounded: where the document says 52px, this says 52px. If a value looks arbitrary it
 * is because it is his, and it should be changed there rather than here.
 *
 * Dark theme only for now, which is why the tokens are declared flat rather than behind a
 * prefers-color-scheme switch. When a light theme arrives it redeclares :root and nothing else.
 */

:root {
  /* ---- colour. The one rule worth stating: --hc-assistant belongs to the AI assistant and to
     nothing else in the product, so a cyan control anywhere means "this is the assistant". */
  --hc-bg: #0D1220;
  --hc-surface-1: #161E30;
  --hc-surface-2: #1E2940;
  --hc-border: #2E3A55;
  --hc-text: #F1F3F7;
  --hc-text-muted: #B3BCCB;
  --hc-text-disabled: #7E889A;
  --hc-accent: #F4B63F;
  --hc-on-accent: #1A1405;
  --hc-assistant: #6FD0EA;
  /* 886: good and bad news, and the layer behind dialogs and over photos. These were written into
     the pages directly (60-odd places), which a theme could not reach. The two greens in use
     (#7FD99A and #6FD08C) were one colour that had drifted, and are one token now. */
  --hc-good: #7FD99A;
  --hc-bad: #E8A0A0;
  --hc-scrim: rgba(6, 9, 16, .72);

  /* ---- type. Fraunces for headings, Atkinson Hyperlegible for body, which was chosen for
     low-vision readers and is the reason body text never drops below 14px anywhere. */
  --hc-font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --hc-font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- type scale (927). Two families, five roles. Every heading, title, figure and label on every
     page uses one of these, so a theme can change each role across the whole product.
       display  H1 and H2: page titles and section headings. Serif, 600. Size per layout below
                (--hc-h1 36/34/60px, --hc-h2 26/24/34px), times --hc-scale-display.
       title    card, panel and dialog titles, item and plan names. Serif, 600, 17 to 26px as set
                on the component, times --hc-scale-title.
       figure   the big numbers: values, prices, counts on stat cards. Serif, 600, 20 to 40px,
                times --hc-scale-figure.
       label    stat labels and section labels: sans, 700, 12px, capitals tracked .08em.
       eyebrow  the accent line above a heading: sans, 700, 14px, the same capitals.
       body     everything else: sans, 400, 16px; secondary text 14px and never smaller.
     Classic keeps card titles in serif (most already were); a theme that wants them in the sans sets
     --hc-font-title to its body stack. The scales are plain numbers, 1 in Classic. */
  --hc-font-display: var(--hc-font-head);
  --hc-font-title: var(--hc-font-head);
  --hc-font-figure: var(--hc-font-head);
  --hc-font-label: var(--hc-font-body);
  --hc-weight-head: 600;
  --hc-weight-label: 700;
  --hc-scale-display: 1;
  --hc-scale-title: 1;
  --hc-scale-figure: 1;
  --hc-label-size: 12px;
  --hc-eyebrow-size: 14px;
  --hc-label-track: .08em;
  --hc-body-size: 16px;

  /* ---- shape */
  --hc-radius-card: 16px;
  --hc-radius-control: 12px;

  /* ---- schema v2 (HC-1623). Every token below defaults to an existing one, so Classic draws exactly what it
     always did; a theme that sets them (the HyperCurio Dark and Light themes) gets the mockup's action colour,
     recessed fields, control borders, glows and the hero face. The weight split lets a display face that only has
     a 400 (Audiowide) be used without a faked bold. */
  --hc-action: var(--hc-accent);
  --hc-on-action: var(--hc-on-accent);
  --hc-field: var(--hc-surface-1);
  --hc-border-control: var(--hc-border);
  --hc-link: var(--hc-accent);
  --hc-link-strong: var(--hc-accent);
  --hc-focus: var(--hc-accent);
  --hc-deep: var(--hc-accent);
  --hc-uv: var(--hc-accent);
  --hc-uv-text: var(--hc-assistant);
  --hc-chrome: var(--hc-text-muted);
  --hc-weight-display: var(--hc-weight-head);
  --hc-weight-title: var(--hc-weight-head);
  --hc-weight-figure: var(--hc-weight-head);
  --hc-font-hero: var(--hc-font-display);
  --hc-hero-case: none;
  --hc-hero-track: normal;
  --hc-glow: none;
  --hc-glow-action: none;
  --hc-extrude: none;
  --hc-text-glow: none;
  --hc-wash-hero: none;
  --hc-atmosphere: off;
  --hc-chip-style: filled;
  --hc-radius-chip: 999px;
  /* ---- roadmap 139 (Slideshow spec 10.1): the player's stage and the fill and text of what it draws over photos. Explicit
     values, not references, so a light theme that leaves them out still gets a dark stage with light text on its controls. */
  --hc-stage: #05070C;
  --hc-overlay: rgba(6, 9, 16, .86);
  --hc-on-overlay: #F1F3F7;
  --hc-on-overlay-muted: #B3BCCB;

  /* ---- spacing, on a 4px base */
  --hc-1: 4px;  --hc-2: 8px;   --hc-3: 12px; --hc-4: 16px;
  --hc-5: 20px; --hc-6: 24px;  --hc-8: 32px; --hc-9: 36px;
  --hc-12: 48px; --hc-14: 56px; --hc-16: 64px;

  /* ---- per-layout values, overridden in the media queries below so a component can just use
     the variable and be correct in all three layouts without knowing which one it is in. */
  --hc-pad: 20px;          /* side padding */
  --hc-section-gap: 32px;  /* vertical gap between sections */
  --hc-h1: calc(36px * var(--hc-scale-display));
  --hc-h2: calc(26px * var(--hc-scale-display));
  --hc-max: 100%;          /* content max width */
}

/* Landscape: 600–1023px, OR any width whose height is under 500px in landscape. The second half
   is what stops a short landscape phone being treated as a desktop and losing its two-column
   layout to a 1440px design. */
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) {
  :root { --hc-pad: 24px; --hc-section-gap: 36px; --hc-h1: calc(34px * var(--hc-scale-display)); --hc-h2: calc(24px * var(--hc-scale-display)); }
}
@media (min-width: 1024px) {
  :root { --hc-pad: 56px; --hc-section-gap: 64px; --hc-h1: calc(60px * var(--hc-scale-display)); --hc-h2: calc(34px * var(--hc-scale-display)); --hc-max: 1328px; }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--hc-bg);
  color: var(--hc-text);
  font-family: var(--hc-font-body);
  font-size: var(--hc-body-size);
  line-height: 1.55;
  /* No horizontal page scroll at any width from 320 to 1920. This is the backstop; the real
     work is done by min-width:0 on flex and grid children further down. */
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: var(--hc-font-display); font-weight: var(--hc-weight-display); margin: 0; line-height: 1.15; }
h1, .hc-display { font-size: var(--hc-h1); letter-spacing: -0.015em; }
/* .hc-display is the H1 LOOK without the semantics, for display text that is not the page
   heading. A page gets exactly one h1; it can want that size more than once. */
.hc-display { font-family: var(--hc-font-display); font-weight: var(--hc-weight-display); line-height: 1.15; margin: 0; }
h2 { font-size: var(--hc-h2); letter-spacing: -0.01em; }
h3, h4 { font-family: var(--hc-font-title); }   /* 927: below H2 a heading is a title */
h3 { font-size: calc(20px * var(--hc-scale-title)); }
p { margin: 0; }
.hc-lead { font-size: 17px; }               /* key paragraphs */
.hc-muted { color: var(--hc-text-muted); }
.hc-small { font-size: 14px; }              /* the floor: nothing secondary goes below this */

/* Focus: 2px accent outline, 2px offset, on everything, and only when keyboard-driven so a
   mouse press does not leave a ring behind. */
:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 2px; border-radius: 4px; }
/* HC-1993: script focus targets (dialog headlines, dialogs, tabindex="-1" panels) are not controls: no ring. */
[tabindex="-1"]:focus-visible, dialog:focus-visible, [role="dialog"]:focus-visible { outline: none !important; box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- shell */
.hc-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.hc-header { position: sticky; top: 0; z-index: 50; background: var(--hc-bg); border-bottom: 1px solid var(--hc-border); }
.hc-main { flex: 1 0 auto; }
.hc-footer { border-top: 1px solid var(--hc-border); margin-top: var(--hc-section-gap); }
/* One rail, so every section lines up without each one re-deciding its own padding. */
.hc-rail { width: 100%; max-width: var(--hc-max); margin-inline: auto; padding-inline: var(--hc-pad); }
.hc-section { padding-block: var(--hc-section-gap); }
.hc-stack { display: flex; flex-direction: column; gap: var(--hc-4); }
.hc-stack-lg { display: flex; flex-direction: column; gap: var(--hc-6); }

/* Columns that collapse honestly: one on portrait, two or three where there is room. Every child
   gets min-width:0 so a long word cannot push the page wider than the viewport. */
.hc-cols { display: grid; gap: var(--hc-4); grid-template-columns: 1fr; }
.hc-cols > * { min-width: 0; }
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) {
  .hc-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .hc-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .hc-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .hc-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .hc-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ---------------------------------------------------------------- buttons
   All three share a size, so they line up in a row whatever the mix. 52px minimum on mobile is
   both the spec and the 44px touch target with room to spare. */
.hc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hc-2);
  min-height: 52px; padding: 0 var(--hc-5);
  border-radius: var(--hc-radius-control); border: 0;
  font-family: var(--hc-font-body); font-size: 16px; font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: filter .15s ease, background-color .15s ease, border-color .15s ease;
}
.hc-btn--block { width: 100%; }
.hc-btn--primary { background: var(--hc-accent); color: var(--hc-on-accent); }
.hc-btn--primary:hover { filter: brightness(1.07); }
.hc-btn--outline { background: transparent; color: var(--hc-text); border: 1.5px solid var(--hc-border); }
.hc-btn--outline:hover { border-color: var(--hc-text-muted); }
.hc-btn--surface { background: var(--hc-surface-2); color: var(--hc-text); border: 1px solid var(--hc-border); }
.hc-btn--surface:hover { border-color: var(--hc-text-muted); }
.hc-btn[disabled], .hc-btn[aria-disabled="true"] { opacity: .5; cursor: default; filter: none; }

/* The assistant's own control. Cyan appears here and nowhere else in the product. */
.hc-btn--assistant {
  background: transparent; color: var(--hc-assistant);
  border: 1.5px solid var(--hc-assistant); border-radius: 999px;
  min-height: 44px; padding: 0 var(--hc-4); font-size: 15px;
}
.hc-btn--assistant:hover { background: rgba(111, 208, 234, .10); }
/* 830 (Alan): Scan, first in the top bar on every signed-in page (shell, Collection, item). */
.hc-scan { width: auto; flex: none; gap: var(--hc-2); text-decoration: none; }
/* ... and on a phone the word beside the H gives way, so Scan, Ask and the avatar all fit. */
@media (max-width: 520px) { .hc-brand-word { display: none; } }
/* + Add (14 Oct, Alan) on the pages that draw their own top bar (Collection, item); the shell has the same rule. */
.sh-add { width: auto; min-height: 44px; padding: 0 var(--hc-4); gap: 6px; font-size: 15px; flex: none; text-decoration: none; }
@media (max-width: 599px) { .sh-add span { display: none; } .sh-add { padding: 0; width: 44px; justify-content: center; } }

/* ---------------------------------------------------------------- inputs
   The label is always visible above the field. A placeholder is a hint, never a label: it
   disappears exactly when somebody needs it most, which is while they are typing. */
.hc-field { display: flex; flex-direction: column; gap: var(--hc-2); }
.hc-label { font-size: 14px; font-weight: 700; color: var(--hc-text); }
.hc-input-wrap { position: relative; display: flex; align-items: center; }
.hc-input {
  width: 100%; min-height: 52px; padding: 0 var(--hc-4);
  background: var(--hc-surface-1); color: var(--hc-text);
  border: 1px solid var(--hc-border); border-radius: var(--hc-radius-control);
  font-family: var(--hc-font-body); font-size: 16px;   /* 16px also stops iOS zooming on focus */
}
.hc-input::placeholder { color: var(--hc-text-disabled); }
.hc-input:focus { border-color: var(--hc-accent); }
.hc-input--action { padding-right: 84px; }
/* The right-side action, used for password Show/Hide. 44px tall so it is its own touch target. */
.hc-input-action {
  position: absolute; right: var(--hc-2);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 var(--hc-3);
  background: none; border: 0; border-radius: 8px;
  color: var(--hc-text-muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.hc-input-action:hover { color: var(--hc-text); }
.hc-help { font-size: 14px; color: var(--hc-text-muted); }

/* Checkbox: the whole label is the target, and it is 44px tall even when the text is one line. */
.hc-check { display: flex; align-items: flex-start; gap: var(--hc-3); min-height: 44px; padding-block: var(--hc-2); cursor: pointer; }
.hc-check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--hc-accent); }
.hc-check span { font-size: 15px; }

/* ---------------------------------------------------------------- card and placeholder */
.hc-card { background: var(--hc-surface-1); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card); padding: var(--hc-5); }
.hc-card--raised { background: var(--hc-surface-2); }
.hc-card--flush { padding: 0; overflow: hidden; }

/* Dashed box standing in for artwork that has not been made yet, with its caption inside so the
   brief travels with the layout instead of living in a separate document. */
.hc-ph {
  display: flex; align-items: center; justify-content: center;
  padding: var(--hc-5); min-height: 140px;
  border: 1px dashed var(--hc-border); border-radius: var(--hc-radius-card);
  color: var(--hc-text-muted); font-size: 14px; text-align: center;
}

/* ---------------------------------------------------------------- icons
   1.8px stroke line icons. Drawn with currentColor so one definition serves every colour it is
   used in, and marked aria-hidden at the point of use because the label beside it carries meaning. */
.hc-icon { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hc-icon--sm { width: 18px; height: 18px; }
.hc-icon--lg { width: 28px; height: 28px; }
/* The tile a step or a category icon sits in. */
.hc-icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--hc-radius-control);
  background: rgba(244, 182, 63, .12); color: var(--hc-accent);
}

/* ---------------------------------------------------------------- HC-101: logged-out top bar
   Three heights, three sets of controls, and an auth variant. The bar never overlaps content:
   the shell puts main after header and the header is sticky rather than fixed, which is the same
   result without having to pad the page by the bar's own height and keep the two in step. */
.hc-topbar { display: flex; align-items: center; gap: var(--hc-4); min-height: 64px; }
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) { .hc-topbar { min-height: 56px; } }
@media (min-width: 1024px) { .hc-topbar { min-height: 76px; } }

/* The mark: a 32px amber square with a serif H, then the wordmark. One element so it cannot wrap
   between the two halves at a narrow width. */
.hc-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hc-text); flex: 0 0 auto; }
.hc-brand-mark {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--hc-accent); color: var(--hc-on-accent);
  font-family: var(--hc-font-head); font-weight: 600; font-size: 19px; line-height: 1;
}
.hc-brand-word { font-family: var(--hc-font-head); font-weight: 600; font-size: 19px; }
/* 13 Oct (Alan, signed out on his phone: "I hate this logo… What happened to the original"): the signed-out pages wear
   his 3D HYPER CURIO wordmark with Terry's lens, the landing page's own file, rather than the lens on its own. */
.hc-wordmark { display: block; height: 52px; width: auto; filter: drop-shadow(0 0 10px rgba(34, 184, 255, .35)); }
@media (max-width: 520px) { .hc-wordmark { height: 44px; } }
.hc-brand--wordmark { padding-block: 4px; }
/* The help and legal pages' bar ran edge to edge (Log in sat on the window's edge); the wordmark gets the gutter. */
.hc-topbar:has(> .hc-brand--wordmark) { padding-inline: var(--hc-pad); }

/* 16 Oct (#1236): Alan's logo in the top-left. Height sets the size; the width and height attributes on the image keep its
   shape so nothing shifts while it loads. Nothing overlaps the bar (no z-fighting), and the glow is a drop-shadow only. */
.hc-brand--logo { padding-block: 0; }
.hc-logo3d { display: block; height: 48px; width: auto; max-width: none; filter: drop-shadow(0 0 10px rgba(34, 184, 255, .35)); }
@media (min-width: 1024px) { .hc-logo3d { height: 62px; } }

/* Page links. Hidden on portrait, where the bar carries only Ask and Log in. */
.hc-navlinks { display: none; }
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) {
  .hc-navlinks { display: flex; align-items: center; gap: var(--hc-5); margin-left: var(--hc-6); }
}
.hc-navlink { color: var(--hc-text-muted); text-decoration: none; font-size: 15px; display: inline-flex; align-items: center; min-height: 44px; }
.hc-navlink:hover { color: var(--hc-text); }
/* Categories and Help center are desktop only; landscape shows the shorter set. */
.hc-navlink--wide { display: none; }
@media (min-width: 1024px) { .hc-navlink--wide { display: inline-flex; } }

.hc-navright { margin-left: auto; display: flex; align-items: center; gap: var(--hc-3); }
.hc-navtext { color: var(--hc-text); text-decoration: none; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--hc-2); }
.hc-navtext:hover { color: var(--hc-accent); }
/* The sign-up button is landscape and up; portrait sends people to Log in and keeps the bar to
   two controls, which is all that fits beside the wordmark at 390px. */
.hc-navcta { display: none; }
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) {
  .hc-navcta { display: inline-flex; min-height: 44px; padding-inline: var(--hc-4); font-size: 15px; }
}
/* The Ask pill always carries its word. An icon alone would be the one control nobody recognises. */
.hc-ask .hc-icon { margin-right: 2px; }

/* Show one thing below desktop and another at desktop. Used for the Ask label ("Ask" against
   "Ask HyperCurio"), the hero eyebrow and anything else the copy shortens on a narrow screen.
   The display value is explicit per variant, because a heading and a link do not want the same
   one and `revert` is not dependable enough to guess with. */
.hc-to-lg { display: inline; }
.hc-from-lg, .hc-from-lg-b, .hc-from-lg-f { display: none; }
/* 1024: the Ask button stays on one line, and from 1024 to 1199px the five nav links drop their small
   icons (the words stay): the top bar overflowed at 1024px on Home and the item page without this. */
.hc-btn--assistant { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .sh-desk-nav a svg, .co-topnav a svg, .it-topnav a svg { display: none; }
}
@media (min-width: 1024px) {
  .hc-to-lg { display: none; }
  .hc-from-lg { display: inline; }
  .hc-from-lg-b { display: block; }
  .hc-from-lg-f { display: inline-flex; }
}

/* Auth variant: on sign-up, log-in and password screens the page links go and the left side
   becomes a way back. Desktop keeps the mark, because at that width losing it loses the brand. */
.hc-topbar--auth .hc-navlinks { display: none; }
.hc-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--hc-text-muted); text-decoration: none; font-size: 15px; }
.hc-back:hover { color: var(--hc-text); }
@media (min-width: 1024px) { .hc-topbar--auth .hc-back { display: none; } }
.hc-topbar--auth .hc-brand { display: none; }
@media (min-width: 1024px) { .hc-topbar--auth .hc-brand { display: inline-flex; } }
.hc-navnote { color: var(--hc-text-muted); font-size: 15px; display: none; }
@media (min-width: 1024px) { .hc-navnote { display: inline; } }

/* ---------------------------------------------------------------- odds and ends */
.hc-divider { height: 1px; background: var(--hc-border); border: 0; margin: 0; }
.hc-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--hc-3); border-radius: 999px; border: 1px solid var(--hc-border); font-size: 14px; }
.hc-eyebrow { font-family: var(--hc-font-label); font-size: var(--hc-eyebrow-size); font-weight: var(--hc-weight-label); letter-spacing: var(--hc-label-track); text-transform: uppercase; color: var(--hc-accent); }
.hc-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The `hidden` attribute has to win. The browser's own rule for it is a plain `[hidden]`, which
   any single class with a `display` beats, so a component that sets `display: flex` on itself
   quietly ignores being hidden. That happened four separate times across these pages before it
   was worth stating once: a filter-count badge rendered a permanent "0", and three components
   had each been patched with their own `[hidden]` rule. This is the one place it belongs.
   Something that should be togglable by class rather than by the attribute is a different thing
   and should not use `hidden` at all. */
[hidden] { display: none !important; }

/* 966 (Terry, 8 Oct): "standardize the breadcrumb display at the top whenever we're enabling the user to go
   back to a specific prior view". One control on every page: a surface button with a chevron and where it
   goes, like the item page's own back button. Pages use .hc-btn .hc-btn--surface .hc-backbtn (.hc-back is
   the sign-in screens' quieter link, kept as it is). */
/* 18 Oct (Terry: "We are consistently breadcrumbing the user ... We can minimize the overly large hit spots and buttons").
   The same back button everywhere, smaller: 36 px tall, 14 px words (it was 44 and 15), and a little less room under its row. */
.hc-backbtn { width: auto; min-height: 36px; padding: 0 var(--hc-3) 0 10px; gap: 6px; font-size: 14px; }
.hc-backbtn .hc-icon { width: 16px; height: 16px; }
.hc-backrow { margin: 0 0 var(--hc-3); }