/* design.css — the Lovable design pass, ported. Source of truth: the Lovable
   project "Garage Builder" (49d4e003…), DESIGN.md + src/styles.css token block,
   2026-08-18. Loaded LAST on every surface. Maps the spec's tokens and
   components onto the classes the engine already renders; the engine, factory
   and gates are untouched. Member palettes still win where the factory injects
   --primary/--wood after type.css: this file reads those, it does not set them
   for members (Handley defaults below are the spec's). */

:root{
  /* ground / ink (spec) */
  --paper: oklch(0.973 0.011 84.6); --paper-2: oklch(0.955 0.014 84.6); --paper-3: oklch(0.932 0.017 82);
  --ink: oklch(0.235 0.008 60); --ink-2: oklch(0.44 0.01 60); --ink-3: oklch(0.505 0.012 62);
  /* accent + support */
  --copper: var(--wood, oklch(0.573 0.129 55.6)); --copper-deep: var(--wood-deep, oklch(0.492 0.117 52));
  --copper-soft: color-mix(in oklab, var(--copper) 18%, white); --copper-tint: color-mix(in oklab, var(--copper) 8%, white);
  --moss: oklch(0.52 0.075 155); --moss-soft: oklch(0.945 0.03 155);
  --clay: oklch(0.55 0.16 27); --clay-soft: oklch(0.955 0.028 30);
  --border-strong: oklch(0.822 0.017 76);
  /* elevation */
  --shadow-hairline: 0 0 0 1px color-mix(in oklab, var(--ink) 8%, transparent);
  --shadow-1: 0 1px 2px -1px color-mix(in oklab, var(--ink) 12%, transparent), 0 1px 1px color-mix(in oklab, var(--ink) 5%, transparent);
  --shadow-2: 0 2px 4px -2px color-mix(in oklab, var(--ink) 12%, transparent), 0 6px 16px -8px color-mix(in oklab, var(--ink) 16%, transparent);
  --shadow-3: 0 4px 8px -4px color-mix(in oklab, var(--ink) 12%, transparent), 0 18px 40px -18px color-mix(in oklab, var(--ink) 26%, transparent);
  --shadow-copper: 0 6px 18px -8px color-mix(in oklab, var(--copper) 55%, transparent);
  --glass-highlight: inset 0 1px 0 0 color-mix(in oklab, white 85%, transparent);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--copper);
  /* motion */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:520ms;
  --ease-spring: linear(0, 0.0033 0.8%, 0.0263 2.39%, 0.0896 4.77%, 0.4676 12.61%, 0.5688, 0.6553, 0.7274, 0.7862, 0.8336 19.66%, 0.8793, 0.9132 22.99%, 0.9421 24.98%, 0.9639 27.15%, 0.9793 29.49%, 0.9931 33.98%, 1.0009 40.17%, 1.0016 46.06%, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --radius-xl: 1rem; --radius-2xl: 1.25rem;
}
:focus-visible{ outline:none; box-shadow: var(--focus-ring); }
::selection{ background: var(--copper-soft); color: var(--ink); }

/* ── type: the spec's floors and roles ───────────────────────────────────── */
.label, .step-tag, .kk, .k{ font-family:var(--font-sans); font-size:.8125rem !important; line-height:1.2; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--copper-deep); }
.label-light{ color: color-mix(in oklab, var(--cream, #f4f2ee) 80%, transparent); }
.label-note{ font-size:.75rem !important; letter-spacing:.02em; text-transform:none; font-weight:500; color:var(--ink-3); }
.numeral, .plan-card-size, .viewer-size, .range-figure, .step-n, .chip-qty, .range-ref strong, .pk-ref strong{ font-family:var(--font-display); font-variation-settings:"opsz" 144; font-weight:600; font-variant-numeric: tabular-nums lining-nums; letter-spacing:-.01em; }
.italic-wood, .italic-accent{ font-variation-settings:"SOFT" 20, "WONK" 1, "opsz" 144; }
p, li, dd, dt{ color: var(--ink-2); }
h1, h2, h3, .h1, .h2, .h3, .use-verdict, dd, strong{ color: var(--ink); }
/* The rule above painted every heading ink, INCLUDING inside the dark
   surfaces — "Pick a plan. Get a number." was rendering at 1.04:1, invisible
   ink on charcoal, and only the copper accent word survived. Dark surfaces
   get their text colours back at equal-or-later cascade position. */
.section-dark, .card-dark{ color: color-mix(in oklab, var(--cream, #f4f2ee) 90%, transparent); }
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark .h1, .section-dark .h2, .section-dark .h3,
.card-dark h3, .card-dark .h3, .section-dark dd, .section-dark strong,
.card-dark strong{ color: var(--cream, #f4f2ee); }
/* The global `p, li, dd, dt { color: var(--ink-2) }` above beats INHERITED
   colour, so dark surfaces need their body text named explicitly too — the
   footer was rendering ink-2 on charcoal at 2.23:1. */
.section-dark p, .section-dark li, .section-dark dd, .section-dark dt,
.card-dark p, .card-dark li,
.site-footer p, .site-footer li, .site-footer a, .site-footer dd, .site-footer dt{
  color: color-mix(in oklab, var(--cream, #f4f2ee) 90%, transparent); }
/* But a LIGHT card inside a dark section keeps light-surface text — the first
   version of this rescue painted the gate form-card's heading cream on white
   at 1:1, and the audit caught it within one run. */
.section-dark .form-card, .section-dark .form-card p, .section-dark .form-card li{ color: var(--ink-2); }
.section-dark .form-card h2, .section-dark .form-card h3, .section-dark .form-card strong{ color: var(--ink); }
/* .cfg-hint left this group: it is an instruction, not fine print, and the
   13px !important here was overriding its 15px pill. */
.use-caveat, .fine{ color: var(--ink-3); }
.fine{ font-size:.8125rem !important; }
.use-caveat{ font-size:.9375rem !important; } /* reading text floor (QA 2026-09-08) */
.chip-dim{ font-size:.8125rem; color: var(--ink-3); }

/* ── surfaces ────────────────────────────────────────────────────────────── */
.card, .use-card, .range-card, .form-card, .plan-card, .mk-card, .mk-plan, .pk-share, .cfg, .card-dark, .use-custom, .lot-card, .voice-panel{
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-1), var(--glass-highlight); }
.card:hover, .plan-card:hover, .mk-card:hover, .mk-plan:hover{ box-shadow: var(--shadow-3), var(--glass-highlight); border-color: var(--border-strong); }
.use-out{ background: var(--copper-tint); border:1px solid color-mix(in oklab, var(--copper) 28%, transparent); border-radius: var(--radius-xl); padding:1.25rem 1.25rem 1rem; margin-top:1.5rem; }
.use-out .use-caveat{ margin-top:.75rem; }
.use-verdict-no{ color: var(--clay); }
.use-custom{ background: var(--clay-soft); border-color: color-mix(in oklab, var(--clay) 35%, transparent); }
.cfg-spec dd.spec-best{ color: var(--ink-2); font-weight:500; }

/* ── controls ────────────────────────────────────────────────────────────── */
.btn{ border-radius: var(--radius-xl); font-weight:600; transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.btn:not(.btn-ghost):not(.btn-accent){ box-shadow: var(--shadow-2), var(--glass-highlight); }
.btn-accent{ box-shadow: var(--shadow-copper), var(--glass-highlight); }
.btn:hover{ transform:translateY(-1px); box-shadow: var(--shadow-3), var(--glass-highlight); }
.btn:active{ transform:translateY(1px) scale(.988); }
.chip{ border-radius: var(--radius-xl); font-size:.9375rem; padding:.7rem 1rem; box-shadow: var(--shadow-hairline); border-color: transparent; transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.chip:hover:not(.chip-blocked){ box-shadow: var(--shadow-2), var(--glass-highlight); transform:translateY(-1px); }
.chip[aria-pressed="true"]{ background: var(--copper-tint); color: var(--ink); box-shadow: 0 0 0 1px color-mix(in oklab, var(--copper) 45%, transparent), var(--shadow-2), var(--glass-highlight); }
.chip[aria-pressed="true"] .chip-dim{ color: var(--copper-deep); }
.chip[aria-pressed="true"] .chip-qty{ color: var(--copper-deep); }
.chip-tip{ color: var(--copper-deep); }
.cfg-seg button{ border-radius: calc(var(--radius-xl) - 4px); font-size:.9375rem; }
.cfg-seg button[aria-pressed="true"]{ background: var(--ink); color: white; box-shadow: var(--shadow-2), var(--glass-highlight); }
.cfg-sw .sw{ border-radius: 999px; box-shadow: var(--shadow-hairline); }
.cfg-sw .sw[aria-pressed="true"]{ outline:2px solid var(--copper); outline-offset:3px; }
.range-form input, .lot-form input{ border-radius: calc(var(--radius-xl) - 4px); font-size:1rem; min-height:3rem; }
.range-form label{ font-size:.9375rem; font-weight:600; color: var(--ink); }

/* ── the step rail (spec: track + four targets; done = moss check, current = copper numeral with pulse) ── */
.steps{ display:block; max-width:64rem; margin:2rem auto 0; padding:1rem 1.25rem 1.25rem; background: var(--card); border:1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-2), var(--glass-highlight); font-size:inherit; }
.steps::before{ content:''; display:block; height:.5rem; border-radius:999px; background: var(--paper-3); margin-bottom:1rem; overflow:hidden; }
.steps{ position:relative; }
.steps .track{ position:absolute; left:1.25rem; top:1rem; height:.5rem; border-radius:999px; background: var(--copper); width:0; transition: width var(--dur-4) var(--ease-spring); }
.steps ol, .steps{ list-style:none; }
.steps li{ display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; border-radius: var(--radius-xl); min-height:2.75rem; text-align:left; justify-content:flex-start; color: var(--ink-2); flex:1 1 0; }
.steps li::after{ display:none; }
.steps li.is-current{ background: var(--copper-tint); box-shadow: 0 0 0 1px color-mix(in oklab, var(--copper) 35%, transparent), var(--shadow-1); color: var(--ink); font-weight:600; }
.steps li:not(.is-current):not(.is-done){ opacity:.7; }
.step-num{ width:2.5rem; height:2.5rem; border-radius:.75rem; font-family:var(--font-display); font-variation-settings:"opsz" 144; font-weight:600; font-size:1.0625rem; border:0; background: var(--paper-3); color: var(--ink-3); transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2) var(--ease-out); }
.steps li.is-current .step-num{ background: var(--copper); color: white; transform:scale(1.1); box-shadow: var(--shadow-2); animation: pulse-ring 2.4s var(--ease-out) infinite; }
.steps li.is-done .step-num{ background: var(--moss); color: white; font-size:0; }
.steps li.is-done .step-num::before{ content:''; display:block; width:.65rem; height:.35rem; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform: rotate(-45deg) translate(1px,-1px); }
.steps li > span:last-child{ display:flex; flex-direction:column; min-width:0; }
.steps li > span:last-child::before{ content:'Step ' counter(step) ' of 4'; counter-increment: step; font-family:var(--font-sans); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-3); }
.steps{ counter-reset: step; }
.steps li.is-current > span:last-child::before{ color: var(--copper-deep); }
.steps li > span:last-child{ font-size:.9375rem; }
.steps li.is-current > span:last-child{ font-size:1.0625rem; }
@keyframes pulse-ring{ 0%{ box-shadow: 0 0 0 0 color-mix(in oklab, var(--copper) 40%, transparent); } 70%{ box-shadow: 0 0 0 10px transparent; } 100%{ box-shadow: 0 0 0 0 transparent; } }
.steps-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.375rem; }
@media (max-width:48rem){
  .steps{ padding:.75rem; }
  .steps::before{ display:none; }
  .steps .track{ display:none; }
  .steps-grid{ grid-template-columns:1fr; gap:.25rem; }
  .steps li:not(.is-current){ display:none; }   /* phone: the current step, full width, with its name */
  .steps li:not(.is-current) > span:last-child{ display:flex; }
}
/* step blocks */
.sb-head .h3{ font-size:clamp(1.5rem, 1.05rem + 1.4vw, 2rem); }
.step-lede{ font-size:1.0625rem; color: var(--ink-2); }
#step2.step-locked, #step3.step-locked{ border-radius: var(--radius-2xl); background: var(--paper-2); border-style:solid; }

/* ── glass bars ──────────────────────────────────────────────────────────── */
.sticky-cta{ backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); }
.pg-nav, .voice-launch{ backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--shadow-3), var(--glass-highlight); border-radius: var(--radius-2xl); }

/* ── plan cards ──────────────────────────────────────────────────────────── */
.plan-card-size{ font-size:1.75rem; }
.plan-card-best span{ color: var(--copper-deep); }

@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }
.step-num{ font-weight:700; font-size:1.125rem; }
.steps li:not(.is-current):not(.is-done) .step-num{ color: var(--ink-2); }
#use .use-group + .use-groups{ margin-top:1.5rem; padding-top:1.5rem; }
/* 78% alpha read as 3.84:1 against the translucent bar on a darker brand palette.
   The bar's own background is already semi-transparent, so the text alpha is the
   only lever that does not change the design. */
.sticky-cta p{ color: color-mix(in oklab, var(--cream, #f4f2ee) 92%, transparent); }

/* ── focus, fixed ─────────────────────────────────────────────────────────
   The ring above is carried by box-shadow, and .btn, .chip, .cfg-seg
   button[aria-pressed=true] and .cfg-sw .sw all set their own box-shadow
   later in this file at higher specificity. Net effect before this block:
   `outline:none` applied and the replacement ring was silently erased, so
   keyboard users had NO focus indication on any swatch, any chip, or any
   selected segmented button. Focus moves to `outline`, which nothing else
   here competes for. */
:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; }
/* A selected swatch already wears a copper outline, so focus has to look
   different from selected rather than merely thicker. */
.cfg-sw .sw:focus-visible,
.cfg-seg button:focus-visible,
.cfg-viewbar button:focus-visible,
.cfg-more summary:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.cfg-viewbar button:focus-visible{ outline-offset:2px; }

/* Numbered-list markers were 14px copper at 2.44:1 on cream. */
.pointlist .n{ font-size:.9375rem; color:var(--copper-deep, var(--wood-deep)); }