/* ═══════════════════════════════════════════════════════════════════════════
   Heracles design system — shared component layer.
   Source of truth: the questionnaire-flow demo (Voy shapes + Heracles palette).
   Loaded by the funnel questionnaire, the checkout, and the client dash.

   - Tokens live in :root (global, safe to share).
   - Components are class-based; bare html/body is NOT styled here so each
     surface keeps its own shell.
   - Fonts: Helvetica Neue throughout, at 600 for headings and 400 for body.
     A system face — no webfont request; Arial and the generic sans fall back
     cleanly on Windows.
   - Four rules carry across every screen: spacing rhythm, secondary buttons,
     burgundy as the ONE accent, one clear selected state.
   - CTA + inputs are flat; cards carry a whisper lift. Radii = 16px; CTA = pill.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg:#F0E8DF; --surface:#fffffa; --surface-2:#f7f3ee; --input:var(--surface);
  --foreground:#3d3833; --heading:#1f1d1a;
  --border:#e9ddcd; --border-strong:#d6c7b2;
  --accent:#a22c29; --accent-dark:#861f1c; --accent-foreground:#fffffa;
  --success:#3c493f; --success-soft:#c0d9af; --info:#153b50; --info-soft:#a3c4bc;
  --muted:#6b635b; --label:#97897a; --placeholder:#b9ac9b;
  --display:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --heading-weight:600;
  --radius:16px; --radius-lg:16px;
  --shadow-whisper:0 1px 2px rgba(63,48,32,.03), 0 6px 18px rgba(63,48,32,.05);
  --shadow-selection:0 2px 12px rgba(162,44,41,.10);

  /* ── Spacing rhythm ──────────────────────────────────────────────────────
     One vertical scale shared by every screen. The old layout gave the
     progress bar a big gap and then jammed the heading against its body and
     cards; these values invert that — tight above the heading, room below it. */
  --sp-prog-head:16px;   /* progress label → heading */
  --sp-ovl-head:5px;     /* overline → heading (the overline hugs its heading) */
  --sp-head-sub:9px;     /* heading → subtitle / required note */
  --sp-head-body:11px;   /* heading → body copy */
  --sp-head-cards:20px;  /* heading block → first card */
  --sp-card:9px;         /* card → card */

  /* Legacy aliases so existing checkout/funnel rules keep resolving. */
  --primary:var(--accent); --primary-dark:var(--accent-dark);
  --ink:var(--heading); --text:var(--foreground); --faint:var(--label);
  --shadow:var(--shadow-whisper);
}

/* ── Typography ──────────────────────────────────────────────────────────── */
/* Overline: burgundy + bold, and it sits right on top of its heading so the
   two read as one unit instead of the label floating in mid-air. */
.eyebrow { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--accent); margin:0 0 var(--sp-ovl-head); }
.q-title { font-family:var(--display); font-weight:var(--heading-weight); color:var(--heading); font-size:1.7rem; line-height:1.16; letter-spacing:0; }
.q-sub, .q-help { font-size:.9rem; color:var(--muted); line-height:1.45; }

/* App heading scale — used by the client dash, which otherwise sets type
   per-heading in Tailwind utilities. Dropping the serif face meant editing 35
   headings by hand; these carry the whole decision (face, weight, size,
   colour) so the next change is made once, here. Margins stay in the markup:
   spacing is contextual, type is not. */
.heading-1 { font-family:var(--display); font-weight:var(--heading-weight); color:var(--heading); font-size:1.7rem;   line-height:1.05; }
.heading-2 { font-family:var(--display); font-weight:var(--heading-weight); color:var(--heading); font-size:1.375rem; line-height:1.2; }
.heading-3 { font-family:var(--display); font-weight:var(--heading-weight); color:var(--heading); font-size:1.25rem;  line-height:1.25; }
.q-body { font-size:.95rem; color:var(--foreground); line-height:1.5; }

/* Heading-block rhythm. Every member ends with the full heading→cards gap, so
   whatever comes next (options, form, CTA, chart) is spaced correctly without
   the template having to know. When one member is followed by another the gap
   tightens to the sub/body value — that's what pulls a heading and its own
   copy together while opening up the space beneath the block as a whole. */
.q-title, .q-sub, .q-help, .q-body { margin:0 0 var(--sp-head-cards); }
.q-title:has(+ .q-sub), .q-title:has(+ .q-help) { margin-bottom:var(--sp-head-sub); }
.q-title:has(+ .q-body), .q-sub:has(+ .q-body), .q-help:has(+ .q-body) { margin-bottom:var(--sp-head-body); }

/* ── Cards (whisper lift) ────────────────────────────────────────────────── */
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem 1.25rem; box-shadow:var(--shadow-whisper);
}

/* ── Option / choice rows ────────────────────────────────────────────────── */
.opts, .cards { display:flex; flex-direction:column; gap:var(--sp-card); margin:0; }
.opt {
  display:flex; align-items:center; gap:.9rem; width:100%; min-height:52px; text-align:left;
  background:var(--surface-2); border:none; border-radius:var(--radius);
  padding:1rem 1.25rem; font:inherit; color:var(--foreground); cursor:pointer;
  transition:background .15s, box-shadow .15s, transform .05s;
}
.opt:hover { background:var(--border); }
.opt:active { transform:scale(.995); }
/* One selected state everywhere: a burgundy ring plus the control. Still no
   colour wash — a tinted fill made the row read as disabled and fought the
   accent it was meant to signal. The ring is an inset shadow rather than a
   border so it costs no layout, and unselected rows carry no line at all:
   a filled row already defines its own edge, and outlining every choice
   turned a list into a stack of boxes. */
.opt.selected { box-shadow:inset 0 0 0 1.5px var(--accent); background:var(--surface-2); }
.opt input { accent-color:var(--accent); width:1.2rem; height:1.2rem; flex:none; }
/* 500 and .95rem, not 600 at the base size: an option is a thing to read
   and choose, not a heading. At the heading weight and full body size a
   column of them competed with the question above. */
.opt-label, .opt-title { font-weight:500; font-size:.95rem; color:var(--heading); }
.opt-help, .opt-sub { display:block; font-size:.85rem; color:var(--muted); margin-top:.1rem; }
.opt-divider { height:1px; background:var(--border); margin:.55rem .25rem; }

/* Forward chevron on single-choice rows — the next-step cue the flat rows
   lacked. Burgundy, because affordances are where the accent gets spent. */
.opt-chevron { margin-left:auto; flex:none; width:17px; height:17px; color:var(--accent); display:inline-flex; }
.opt-chevron svg { width:100%; height:100%; display:block; }

/* ── Inputs (flat) ───────────────────────────────────────────────────────── */
.field, .text-input {
  width:100%; min-height:52px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--input); padding:.9rem 1.25rem; font:inherit; font-size:15px; color:var(--heading);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.field::placeholder, .text-input::placeholder { color:var(--placeholder); }
.field:focus, .text-input:focus { border-color:rgba(162,44,41,.7); box-shadow:0 0 0 3px rgba(162,44,41,.1); }
.field-hint { font-size:.75rem; color:var(--label); margin:.4rem 0 0; }

/* ── Buttons — primary CTA is a flat pill ────────────────────────────────── */
.btn {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; min-height:56px; border:none; border-radius:999px; padding:0 1.5rem;
  font:inherit; font-size:16px; font-weight:500; cursor:pointer; text-align:center;
  text-decoration:none; box-shadow:none;  /* CTAs are flat */
  transition:background .15s, border-color .15s, transform .06s, opacity .15s;
}
.btn-primary { background:var(--accent); color:var(--accent-foreground); }
.btn-primary:hover { background:var(--accent-dark); }
.btn-primary:active { transform:scale(.99); }
/* Disabled reads as a muted terracotta rather than a ghost of the button —
   it stays legible as "this is the CTA, you're not done yet". */
.btn-primary:disabled { background:#d9a9a7; color:#fff; cursor:not-allowed; }
/* Secondary = outlined burgundy pill. Every non-primary action (Restart, Back,
   Apply, Add, Skip) uses this one shape so they stop impersonating cards. */
.btn-secondary { background:transparent; border:1.5px solid var(--accent); color:var(--accent); font-weight:600; }
.btn-secondary:hover { background:var(--accent); color:#fff; }
.btn-ghost { background:transparent; border:1.5px solid var(--border-strong); color:var(--heading); }
.btn-ghost:hover { border-color:var(--heading); }
/* Small inline pill (e.g. add-on Add/Change) — overrides the full-width base. */
.btn-pill { width:auto; min-height:40px; padding:0 1.1rem; font-size:.9rem; border-radius:999px; }
.btn-pill.accent { background:transparent; border:1.5px solid var(--accent); color:var(--accent); }
.btn-pill.accent:hover { background:var(--accent); color:#fff; }

.actions { margin-top:var(--sp-head-cards); display:flex; flex-direction:column; gap:.6rem; }
.hint { font-size:.75rem; color:var(--label); text-align:center; margin:.55rem 0 0; }
.skip { display:block; width:100%; text-align:center; background:none; border:none; color:var(--accent); font:inherit; font-size:.85rem; font-weight:600; padding:.55rem; cursor:pointer; text-decoration:none; }
.skip:hover { color:var(--accent-dark); }
/* Back — a plain burgundy text link, always directly under the action block so
   it doesn't shift when a hint above it appears or disappears. */
.backlink { display:inline-block; color:var(--accent); font-size:.85rem; text-decoration:none; margin-top:.75rem; }
.backlink:hover { color:var(--accent-dark); }

/* ── Progress ────────────────────────────────────────────────────────────── */
.progress { height:5px; border-radius:999px; background:var(--border); overflow:hidden; margin-bottom:.5rem; }
.progress > span { display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .35s ease; }
.progress-label { font-size:.68rem; color:var(--label); margin:0 0 1.25rem; letter-spacing:.03em; }

/* ── Badges / pills ──────────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; padding:.2rem .6rem; font-size:.72rem; font-weight:600; letter-spacing:.02em; }
.badge-ok { background:var(--success-soft); color:var(--success); }
.badge-info { background:var(--info-soft); color:var(--info); }
.badge-accent { background:var(--accent); color:#fff; }
.badge-value { background:var(--heading); color:var(--accent-foreground); }

/* ── Chips — three labels, three meanings, three colours ─────────────────────
   They used to share one muted tint, so "Best value", "Most popular" and a
   savings figure all looked like the same kind of thing. Now the hierarchy is
   visible: accent for the label that drives the sale, ink for the social-proof
   one, sage for money saved. */
.chip { display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.16rem .45rem; border-radius:6px; }
.chip-best { background:var(--accent); color:#fff; }
.chip-pop  { background:var(--heading); color:#fff; }
.chip-save { background:var(--success-soft); color:var(--success); }

/* Brand wordmark (SVG). Checkout centres it via checkout.css; the questionnaire
   keeps it left with the Restart link on the right. */
.funnel-logo { height:22px; width:auto; display:block; }

/* ── Product imagery ─────────────────────────────────────────────────────── */
/* Product shots sit on their own small card — warm cream + a hairline, matching
   every other surface. The old treatment put them on a heavier beige block that
   read as a separate material and shrank the product inside it. */
.prod-thumb {
  width:76px; height:64px; border-radius:12px; overflow:hidden; flex:none;
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.prod-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.prod-thumb-sm { width:52px; height:52px; border-radius:10px; }
/* Hero: a tighter frame so the same photo reads larger. The shot FILLS its
   card (cover, not contain) — these are studio images with their own warm
   backdrop, so letterboxing them inside a card produced a visible second
   frame: a tan rectangle floating in a cream one. */
.prod-hero {
  width:100%; border-radius:var(--radius); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border);
  aspect-ratio:3/2; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.prod-hero img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── Mobile: checkout cards go edge-to-edge (0 side gap, corners kept) ─────────
   On phones we fully cancel the shell's 1.25rem side padding with negative
   margins so the card runs to the screen edges — but keep the rounded corners
   and side border so it still reads as a card. Inner padding is untouched. */
@media (max-width:639.98px) {
  .checkout-card {
    margin-left:-1.25rem;
    margin-right:-1.25rem;
  }
}

[x-cloak] { display:none !important; }