/* 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;

  /* ---- 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;

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

  /* ---- 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: 36px;
  --hc-h2: 26px;
  --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: 34px; --hc-h2: 24px; }
}
@media (min-width: 1024px) {
  :root { --hc-pad: 56px; --hc-section-gap: 64px; --hc-h1: 60px; --hc-h2: 34px; --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: 16px;
  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-head); font-weight: 600; 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-head); font-weight: 600; line-height: 1.15; margin: 0; }
h2 { font-size: var(--hc-h2); letter-spacing: -0.01em; }
h3 { font-size: 20px; }
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; }

@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); }

/* ---------------------------------------------------------------- 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; }

/* 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; }
@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-size: 14px; font-weight: 700; letter-spacing: .08em; 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; }