/* ===========================================================================
   StyledByYou — design tokens and components
   Transcribed from /docs design system. Mobile-first; breakpoints layer up.

   LOAD ORDER: this file is linked BEFORE the Tailwind CDN script, so Tailwind
   utilities reliably override these component rules. That is deliberate —
   utilities are the escape hatch. With the order reversed, `.btn`'s own
   `display: inline-flex` beats Tailwind's `.hidden` (equal specificity, later
   source wins) and `class="btn hidden sm:inline-flex"` silently never hides.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------- */
:root {
  /* Colour */
  --background: #fff8f5;
  --surface: #fff8f5;
  --surface-container-low: #fef1eb;
  --surface-container: #f8ece5;
  --surface-container-high: #f2e6df;
  --surface-bright: #ffffff;
  --on-surface: #201a17;
  --on-surface-variant: #53433e;
  --outline: #86736d;
  --outline-variant: #d9c2ba;
  --primary: #8c4a31;
  --primary-container: #aa6147;
  --on-primary: #ffffff;
  --primary-fixed: #ffdbcf;
  --secondary: #6b5c4c;
  --error: #ba1a1a;
  --error-container: #ffdad6;

  /* Spacing — base unit 4px */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Elevation */
  --elev-1: 0 4px 20px -2px rgba(43, 37, 33, 0.04);
  --elev-2: 0 12px 32px -4px rgba(43, 37, 33, 0.07);
  --scrim: rgba(43, 37, 33, 0.25);

  /* Layout */
  --gutter: 20px;
  --max-content: 1200px;
  --max-reading: 840px;

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (min-width: 600px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}

/* ---------------------------------------------------------------------------
   2. Reset / base
   --------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

/* Margin reset at ELEMENT level, never on the typography classes. A class-level
   `margin: 0` ties with Tailwind's `mt-*` on specificity, so whichever
   stylesheet lands later silently wins and vertical rhythm becomes a coin
   flip. Element selectors lose to every utility, which is what we want. */
h1, h2, h3, h4, h5, h6, p, blockquote, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding-left: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--primary-fixed); color: var(--on-surface); }

/* Skip link for keyboard users.
   Clipped rather than pushed to -9999px: a far-offscreen element can create
   horizontal page scroll. */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--primary);
  color: var(--on-primary);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0;
  z-index: 100;
}
.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  left: 0;
  top: 0;
}

/* ---------------------------------------------------------------------------
   3. Typography scale
   Mobile-first: *-mobile sizes are the base, desktop layers up at 1024px.
   --------------------------------------------------------------------------- */
.display-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
  .display-lg { font-size: 48px; line-height: 56px; letter-spacing: -0.02em; }
}

.display-md {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: 0;
}
@media (min-width: 1024px) {
  .display-md { font-size: 36px; line-height: 44px; letter-spacing: -0.01em; }
}

.headline-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
}

.headline-md {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
}

.headline-sm {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
}

.body-lg { font-size: 17px; line-height: 28px; font-weight: 400; }
.body-md { font-size: 15px; line-height: 24px; font-weight: 400; }
.body-sm { font-size: 13px; line-height: 20px; font-weight: 400; }

.label-lg {
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.label-md {
  font-size: 11px; line-height: 14px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
}
.label-sm {
  font-size: 10px; line-height: 12px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
}

.small-caps {
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
}

/* Colour helpers */
.t-on-surface { color: var(--on-surface); }
.t-variant { color: var(--on-surface-variant); }
.t-outline { color: var(--outline); }
.t-primary { color: var(--primary); }
.t-error { color: var(--error); }
.serif-italic { font-family: var(--font-display); font-style: italic; }

/* ---------------------------------------------------------------------------
   4. Layout
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-reading {
  width: 100%;
  max-width: var(--max-reading);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: 56px; }
@media (min-width: 1024px) { .band { padding-block: 80px; } }

.band-lg { padding-block: 64px; }
@media (min-width: 1024px) { .band-lg { padding-block: 96px; } }

.bg-surface-low { background: var(--surface-container-low); }
.bg-surface-bright { background: var(--surface-bright); }
.bg-surface-container { background: var(--surface-container); }

.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.stack-sm > * + * { margin-top: var(--space-sm); }

/* ---------------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: 0 var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover { background: var(--primary-container); }

.btn-ghost {
  background: transparent;
  color: var(--on-surface);
  border-color: var(--outline);
}
.btn-ghost:hover { background: var(--surface-container-low); }

.btn-sm { min-height: 40px; padding: 0 var(--space-md); }
.btn-block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.text-link {
  color: var(--on-surface);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.text-link:hover { border-bottom-color: currentColor; }
.text-link-primary { color: var(--primary); }

/* ---------------------------------------------------------------------------
   6. Cards and surfaces
   --------------------------------------------------------------------------- */
.card {
  background: var(--surface-bright);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--elev-1);
}

.card-flat {
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.card-float { box-shadow: var(--elev-2); border-color: rgba(168, 150, 132, 0.2); }

.band-note {
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* ---------------------------------------------------------------------------
   7. Pills and chips
   --------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--outline-variant);
  background: var(--surface-bright);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  cursor: default;
}
.pill-active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: transparent;
}
.pill-soft {
  background: var(--primary-fixed);
  color: var(--primary);
  border-color: transparent;
}

/* ---------------------------------------------------------------------------
   8. Inputs
   --------------------------------------------------------------------------- */
.input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-md);
  background: var(--surface-bright);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--on-surface);
}
.input::placeholder { color: var(--outline); }
.input:focus {
  outline: none;
  border: 1.5px solid var(--primary);
}
.input-error { border-color: var(--error); }

.field-error {
  color: var(--error);
  font-size: 13px;
  line-height: 20px;
  margin-top: 6px;
}

/* ---------------------------------------------------------------------------
   9. Icon containers and line art
   --------------------------------------------------------------------------- */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
  color: var(--on-surface);
  flex: none;
}
.icon-circle-primary { background: var(--primary-fixed); color: var(--primary); }
.icon-circle-lg { width: 56px; height: 56px; }

.icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  color: var(--on-surface);
  flex: none;
}

/* All line art: 1.5px monoline, rounded caps, never filled. */
.line-art {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line-art-scaled {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ---------------------------------------------------------------------------
   10. Dividers
   --------------------------------------------------------------------------- */
.rule { height: 1px; background: var(--outline-variant); border: 0; margin: 0; }
.rule-v { width: 1px; background: var(--outline-variant); align-self: stretch; }

/* ---------------------------------------------------------------------------
   11. Top bar + language toggle
   --------------------------------------------------------------------------- */
.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  background: var(--background);
  border-bottom: 1px solid var(--outline-variant);
}
.topbar-inner {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--on-surface);
  text-decoration: none;
  white-space: nowrap;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
}
.lang-toggle button {
  background: none;
  border: 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  color: var(--outline);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: inherit;
  font-weight: inherit;
  font-size: inherit;
  transition: color 160ms ease;
}
.lang-toggle button:hover { color: var(--on-surface); }
.lang-toggle button[aria-pressed="true"] { color: var(--primary); }
.lang-toggle .sep { color: var(--outline-variant); user-select: none; }

/* ---------------------------------------------------------------------------
   12. Modal (Level 3)
   --------------------------------------------------------------------------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: var(--scrim);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-panel {
  background: var(--surface-bright);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--elev-2);
}
@media (max-width: 599px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal-panel {
    max-width: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 80vh;
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  }
}
.modal-close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--on-surface-variant);
  padding: 4px;
  line-height: 0;
}

/* ---------------------------------------------------------------------------
   13. i18n flash-of-untranslated-content guard
   The <html> element carries .i18n-pending until the dictionary is applied.
   i18n.js clears it, and a safety timeout clears it even if the fetch fails,
   so a broken dictionary can never leave a blank page.
   --------------------------------------------------------------------------- */
.i18n-pending body { opacity: 0; }
body { opacity: 1; transition: opacity 120ms ease; }

/* ---------------------------------------------------------------------------
   14. Responsive visibility helpers
   These use the DESIGN SYSTEM breakpoints (600 / 1024 / 1280), not Tailwind's
   defaults (640 / 768 / 1024 / 1280). Chrome that must appear or disappear at
   a breakpoint uses these rather than Tailwind's `hidden` + `sm:` pairs, so
   visibility never depends on the CDN's runtime injection order.

   They only ever hide. They never set a display value, so they compose with
   any component or utility. `!important` is deliberate: hiding must win.
   --------------------------------------------------------------------------- */
@media (max-width: 599px)  { .hide-below-sm { display: none !important; } }
@media (max-width: 1023px) { .hide-below-lg { display: none !important; } }
@media (max-width: 1279px) { .hide-below-xl { display: none !important; } }
@media (min-width: 1024px) { .hide-from-lg  { display: none !important; } }

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

/* ---------------------------------------------------------------------------
   16. Onboarding shell
   Shared by auth.html and the four /onboarding/ steps.
   --------------------------------------------------------------------------- */

/* Compact top bar (64px) used inside the flow, distinct from the 72px marketing bar */
.appbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  background: var(--background);
  border-bottom: 1px solid var(--outline-variant);
  position: sticky;
  top: 0;
  z-index: 30;
}
.appbar-inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-sm);
}
.appbar-title {
  font-family: var(--font-display);
  font-size: 22px;
  text-align: center;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 0;
  background: transparent;
  color: var(--on-surface);
  cursor: pointer;
  text-decoration: none;
  flex: none;
}
.icon-btn:hover { background: var(--surface-container-low); }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
  flex: none;
  text-decoration: none;
}

/* Progress strip */
.progress-strip {
  min-height: 40px;
  background: var(--surface-container-low);
  display: flex;
  align-items: center;
}
.progress-inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.progress-dots { display: flex; align-items: center; gap: 6px; flex: none; }
.progress-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--outline-variant);
}
.progress-dot[data-state="active"] { width: 12px; height: 12px; background: var(--primary); }
.progress-dot[data-state="done"] { background: var(--primary); opacity: 0.45; }

/* Onboarding content column */
.flow {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-lg) 120px;   /* room for the sticky action bar */
}

/* Choice card — the two intake pathways on step 1 */
.choice-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  text-align: left;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.choice-card[aria-checked="true"] { border-color: var(--primary); }

/* Attribute card — shape, face and style grids */
.attr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  width: 100%;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.attr-card:hover { border-color: var(--outline); }
.attr-card[aria-checked="true"] { border-color: var(--primary); }
.attr-card-wide { grid-column: 1 / -1; }

/* Stacked full-width card — undertone and style track rows */
.row-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-bright);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.row-card[aria-checked="true"] { border-color: var(--primary); }

/* Selection indicators */
.radio-dot {
  width: 20px; height: 20px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--outline);
  flex: none;
  position: relative;
}
[aria-checked="true"] > .radio-dot,
[aria-checked="true"] .radio-dot {
  border-color: var(--primary);
  background: var(--primary);
}
[aria-checked="true"] .radio-dot::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: var(--radius-full);
  background: var(--on-primary);
}

.check-mark {
  position: absolute;
  top: 10px; right: 10px;
  width: 20px; height: 20px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--outline-variant);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
}
[aria-checked="true"] > .check-mark {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

/* Undertone swatch strip */
.swatch-row { display: flex; gap: 6px; }
.swatch { flex: 1; height: 32px; border-radius: var(--radius-sm); }

/* Multi-select occasion pills */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--outline-variant);
  background: var(--surface-bright);
  color: var(--on-surface-variant);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.pill-btn[aria-pressed="true"] {
  background: var(--primary);
  color: var(--on-primary);
  border-color: transparent;
}
.pill-btn .tick { display: none; }
.pill-btn[aria-pressed="true"] .tick { display: inline-flex; }

/* Sticky bottom action bar */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  min-height: 80px;
  background: var(--surface-bright);
  border-top: 1px solid var(--outline-variant);
  display: flex;
  align-items: center;
  z-index: 25;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.action-bar-inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Collapsible ("Not sure? Run the tests.") */
.collapse-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  text-align: left;
  background: var(--surface-bright);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: pointer;
}
.collapse-head .chev { transition: transform 200ms ease; margin-left: auto; flex: none; }
.collapse-head[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Bottom sheet (photo picker, suggestion modal lives in .modal) */
.sheet { align-items: flex-end; }
.sheet .modal-panel {
  max-width: 560px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  max-height: 80vh;
}
@media (min-width: 600px) {
  .sheet { align-items: center; }
  .sheet .modal-panel { border-radius: var(--radius-xl); }
}

/* Inline spinner for submitting states */
.spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: sby-spin 700ms linear infinite;
  flex: none;
}
@keyframes sby-spin { to { transform: rotate(360deg); } }

/* Form-level error banner */
.alert-error {
  background: var(--error-container);
  border-radius: var(--radius-md);
  padding: 12px var(--space-md);
  color: #5f1412;
  font-size: 13px;
  line-height: 20px;
}

/* ---------------------------------------------------------------------------
   17. Attribute and wardrobe grids
   On the DESIGN SYSTEM breakpoints (600 / 1024), not Tailwind's (640 / 768).
   Tailwind's `sm:` starts at 640px, so a tablet at 600-639px would still show
   the mobile column count. These own the breakpoints instead.
   --------------------------------------------------------------------------- */
.grid-attr {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px)  { .grid-attr { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Shape grid widens again to a single row of five on desktop. */
@media (min-width: 1024px) { .grid-attr-shape { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* The Apple card spans the full width on mobile only; from tablet up it sits
   in the row like the rest (last in the row on desktop). */
.attr-card-wide { grid-column: 1 / -1; }
@media (min-width: 600px) { .attr-card-wide { grid-column: auto; } }

/* Wardrobe item grid: 3 / 4 / 5 across the breakpoints. */
.grid-wardrobe {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 600px)  { .grid-wardrobe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-wardrobe { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------------
   18. Generate — loading and results
   --------------------------------------------------------------------------- */

/* Segmented control (OUTFITS · HAIR · COLOUR) */
.segmented {
  display: inline-flex;
  background: var(--surface-container);
  border-radius: var(--radius-full);
  padding: 4px;
  gap: 2px;
  min-height: 48px;
  align-items: center;
  max-width: 100%;
}
.segmented button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--on-surface-variant);
  border-radius: var(--radius-full);
  padding: 0 var(--space-lg);
  min-height: 40px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}
.segmented button[aria-selected="true"] {
  background: var(--surface-bright);
  color: var(--on-surface);
  box-shadow: var(--elev-1);
}

/* Loading card */
.loading-card {
  background: var(--surface-bright);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}
@media (min-width: 600px) { .loading-card { padding: 32px; } }

.silhouette-stage {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.silhouette-backdrop {
  width: 200px;
  height: 212px;
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Each shape fades through rather than snapping between frames. */
.silhouette-stage svg g[data-shape] {
  opacity: 0;
  transition: opacity 420ms ease;
}
.silhouette-stage svg g[data-shape][data-active="true"] { opacity: 1; }

/* Outfit item row */
.item-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.item-row-photo {
  width: 56px;
  height: 72px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-container-high);
  flex: none;
}
.item-row-fallback {
  width: 56px;
  height: 72px;
  border-radius: var(--radius-sm);
  background: var(--surface-container-high);
  color: var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Quote block */
.quote-block {
  background: var(--primary-fixed);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 24px;
  color: var(--on-surface);
}

/* Colour swatch strip */
.swatch-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-sm);
}
.swatch-tall {
  height: 80px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(43, 37, 33, 0.06);
}
@media (max-width: 599px) {
  /* Five 80px blocks get too narrow to read on a phone. */
  .swatch-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Bookmark toggle */
.bookmark-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--outline);
  padding: 6px;
  line-height: 0;
  flex: none;
  transition: color 160ms ease;
}
.bookmark-btn[aria-pressed="true"] { color: var(--primary); }
.bookmark-btn[aria-pressed="true"] svg { fill: currentColor; }

/* html2canvas renders what is on screen, so the capture target needs an
   opaque background of its own — the page background is not inherited. */
.capture-surface { background: var(--background); padding: var(--space-lg); }

/* While html2canvas rasterises the results, shadows are suppressed. The
   library paints box-shadow as an opaque band rather than a soft edge, which
   shows up as a white stripe down the side of every card in the PNG. The
   class is added for the duration of the capture and removed straight after,
   so nothing changes on screen. */
.capturing .card,
.capturing .card-float,
.capturing .loading-card,
.capturing .segmented button {
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   19. Logo
   The logo is an <img> of an SVG, so it scales cleanly at any size and needs
   no font. Height is fixed and width follows the 343:58 aspect ratio, which
   stops the header reflowing while the image loads.
   --------------------------------------------------------------------------- */
.logo,
.logo-plain,
.logo-compact,
.logo-mark {
  display: block;
  width: auto;
  /* object-fit guards the aspect ratio: if a class is ever paired with a
     different artboard than its `aspect-ratio` assumes, the image letterboxes
     instead of stretching. The footer shipped 11% stretched before this. */
  object-fit: contain;
}

/* Full lockup, 343 x 58 — includes the subtitle. */
.logo {
  height: 42px;
  aspect-ratio: 343 / 58;
}
@media (max-width: 599px) { .logo { height: 34px; } }

/* Wordmark + mark, no subtitle. A DIFFERENT artboard: 343 x 52. */
.logo-plain {
  height: 38px;
  aspect-ratio: 343 / 52;
}
@media (max-width: 599px) { .logo-plain { height: 32px; } }

/* Compact lockup for the app bars, where the subtitle would be illegible. */
.logo-compact {
  height: 26px;
  aspect-ratio: 343 / 52;
}

/* Mark on its own, for the tightest spots. */
.logo-mark {
  display: block;
  height: 30px;
  width: auto;
  aspect-ratio: 64 / 44;
}

/* ---------------------------------------------------------------------------
   20. Device mockups on the landing page
   Pure CSS wireframes — no images, so the section costs nothing to load.
   The grey bars stand in for text, which is why they are not translated:
   they are furniture, not copy. The real strings in these frames (occasion,
   outfit name, wardrobe title) ARE translated.
   --------------------------------------------------------------------------- */

/* Text placeholder bars. Width is set per element, height by the token. */
.wf-line {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-container-high);
}
.wf-line-sm { height: 5px; }
.wf-line-primary { background: var(--primary-fixed); }

/* A garment row inside the phone's outfit card. */
.wf-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-bright);
  border-radius: var(--radius-sm);
  padding: 7px 8px;
}
.wf-thumb {
  width: 22px;
  height: 28px;
  border-radius: 3px;
  background: var(--surface-container-high);
  flex: none;
}

/* Palette dots. */
.wf-dots { display: flex; gap: 5px; }
.wf-dot {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(43, 37, 33, 0.07);
}

/* Desktop frame: the wardrobe grid of garment placeholders. */
.wf-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.wf-card {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  background: var(--surface-bright);
  border: 1px solid var(--outline-variant);
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}
/* The garment shape itself, filling most of the card. */
.wf-card::before {
  content: "";
  display: block;
  flex: 1;
  border-radius: 3px;
  background: var(--surface-container);
  margin-bottom: 2px;
}
.wf-card-a::before { background: var(--surface-container-low); }
.wf-card-b::before { background: var(--surface-container); }
.wf-card-c::before { background: var(--surface-container-high); }

/* Filter chips in the desktop frame. */
.wf-chip {
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
}
.wf-chip-on {
  background: var(--primary);
  border-color: transparent;
}