/* ── Styra™ — Component-specific styles ──────────────────────────────── */
/* Shared patterns (.emp-*) are in global.css. HTML elements use both emp-* and fi2-* classes. */
/* Component-specific: body diagram, shape result, shoe grid, brand grid, score ring, summary, etc. */

/* ── Measurement body diagram ─────────────────────────────────────────────────── */
.fi2-body-wrap {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: stretch;
}
.fi2-fields--left,
.fi2-fields--right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fi2-body-svg { flex-shrink: 0; width: 160px; }
.fi2-body-svg svg { width: 100%; height: auto; }
.fi2-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--emp-border);
}
.fi2-row:last-child { border-bottom: none; }
.fi2-row-label {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--emp-charcoal);
}
.fi2-row .emp-input,
.fi2-row .fi2-input {
  width: 70px;
  padding: 5px 8px;
  text-align: right;
}
.fi2-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.fi2-unit {
  font-size: 11px;
  color: var(--emp-muted);
  margin-left: 3px;
}
/* Height ft+in dual input */
.fi2-height-inputs {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fi2-height-inputs .emp-input,
.fi2-height-inputs .fi2-input {
  width: 52px;
  padding: 5px 6px;
  text-align: right;
}

/* ── Segment labels ──────────────────────────────────────────────────────────── */
.fi2-seg {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 8px;
}
.fi2-seg-tops { background: #EDE3F6; color: #7B5EA7; }
.fi2-seg-bottoms { background: #FCE4EC; color: #C44569; }
.fi2-seg-feet { background: #E3F0ED; color: #4A7A6B; }

/* ── Shoe grid ──────────────────────────────────────────────────────────────── */
.fi2-shoe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.fi2-shoe {
  padding: 10px 4px;
  text-align: center;
  border: 1.5px solid var(--emp-border);
  border-radius: var(--emp-r-input);
  background: var(--emp-cream);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  color: var(--emp-charcoal);
}
.fi2-shoe:hover { border-color: var(--emp-teal); }
.fi2-shoe--selected {
  background: var(--emp-teal);
  color: #fff;
  border-color: var(--emp-teal);
}

/* ── Shape / reco tags ─────────────────────────────────────────────────────────── */
.fi2-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 6px;
}
.fi2-tag-auto   { background: var(--emp-teal-light);  color: var(--emp-teal); }
.fi2-tag-gender { background: var(--emp-coral-light); color: var(--emp-coral); }
.fi2-tag-body   { background: var(--emp-teal-light);  color: var(--emp-teal); }
.fi2-tag-occ    { background: #fef3cc; color: #8a6000; }
.fi2-tag-brand  { background: var(--emp-cream);       color: var(--emp-charcoal); }

/* ── Matched to you card ──────────────────────────────────────────────────────── */
.fi2-matched-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(180deg, var(--emp-coral-light) 0%, var(--emp-bg-card) 72%);
  border: 1px solid var(--emp-coral-light);
  border-radius: var(--emp-r-card);
  padding: 24px;
  animation: fi2-breathe 3s ease-in-out infinite;
}
.fi2-matched-wrap__title { font-size: 20px; font-weight: 700; color: var(--emp-charcoal); margin: 4px 0 6px; font-family: var(--emp-font-heading); }
.fi2-matched-wrap__sub { font-size: 13px; color: var(--emp-muted); margin: 0 0 12px; }
.fi2-matched-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--emp-muted); }
.fi2-matched-customise { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--emp-coral); text-decoration: none; }
.fi2-matched-customise:hover { text-decoration: underline; }

/* ── Summary grid ─────────────────────────────────────────────────────────────── */
.fi2-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fi2-summary-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--emp-coral-light);
  border-color: var(--emp-coral);
  border-radius: var(--emp-r-input);
  font-size: 13px;
}
.fi2-summary-item .fi2-val,
.fi2-val {
  font-weight: 600;
  color: var(--emp-teal);
}

/* ── Brand grid ───────────────────────────────────────────────────────────────── */
.fi2-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.fi2-brand {
  padding: 10px 12px;
  border: 1.5px solid var(--emp-border);
  border-radius: var(--emp-r-input);
  background: var(--emp-cream);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--emp-charcoal);
}
.fi2-brand:hover { border-color: var(--emp-teal); }
.fi2-brand--selected {
  background: var(--emp-teal-light);
  border-color: var(--emp-teal);
  color: var(--emp-teal);
}
.fi2-brand img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.fi2-brand-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fi2-brand-grid::-webkit-scrollbar { width: 4px; }
.fi2-brand-grid::-webkit-scrollbar-track { background: transparent; }
.fi2-brand-grid::-webkit-scrollbar-thumb { background: var(--emp-border); border-radius: 2px; }

/* ── Score ring ───────────────────────────────────────────────────────────────── */
.fi2-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
}
.fi2-ring {
  position: relative;
  width: 140px;
  height: 140px;
}
.fi2-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.fi2-ring-num {
  font-family: var(--emp-font-heading, 'Bricolage Grotesque', 'DM Sans', sans-serif);
  font-size: 38px;
  font-weight: 700;
  color: var(--emp-teal);
  line-height: 1;
}
.fi2-ring-label {
  font-size: 10px;
  color: var(--emp-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* ── Page 8: finale — hero, profile summary, score composition ────────────────── */
/* The summary reuses the page-3 evidence grammar (eyebrow → Playfair body-type
   hero → auto-detected pill → hairline measurement strip) so the page that says
   "here's what we extracted" bookends with the one that says "here's what we
   sealed". The signature is the vertical composition bar: one column split into
   four bands sized by weight (40/25/25/10) — "one score, these parts, = 100%". */
@keyframes fi2-breathe {
  0%, 100% { box-shadow: 0 4px 20px rgba(224, 120, 86, 0.12); }
  50%       { box-shadow: 0 8px 32px rgba(224, 120, 86, 0.28); }
}

.fi2-finale-hero {
  text-align: center;
  padding: 36px 24px 30px;
  background: linear-gradient(180deg, var(--emp-coral-light) 0%, var(--emp-bg-card) 72%);
  border: 1px solid var(--emp-coral-light);
  border-radius: var(--emp-r-card);
  animation: fi2-breathe 3s ease-in-out infinite;
}
.fi2-finale-hero__badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--emp-coral);
  color: #fff;
  box-shadow: 0 6px 18px rgba(224, 120, 86, 0.35);
}
.fi2-finale-hero .fi2-eyebrow { margin: 0 0 6px; color: var(--emp-coral); }
.fi2-finale-hero__title {
  font-family: var(--emp-font-heading, 'Bricolage Grotesque', 'DM Sans', sans-serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--emp-charcoal);
  margin: 0 0 8px;
  line-height: 1.15;
}
.fi2-finale-hero__sub {
  font-size: 14px;
  color: var(--emp-muted);
  margin: 0 auto;
  max-width: 460px;
  line-height: 1.55;
}

/* Summary card — body type as hero, then the measurement strip, then height/budget. */
.fi2-sumfoot {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--emp-border);
}
.fi2-sumfoot__item { display: flex; align-items: baseline; gap: 8px; }
.fi2-sumfoot__l {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--emp-muted);
}
.fi2-sumfoot__v { font-size: 14px; font-weight: 600; color: var(--emp-charcoal); }

/* Score composition — vertical bar (the visual) + legend (the labels). */
.fi2-comp { display: flex; gap: 18px; align-items: stretch; }
.fi2-comp__bar {
  display: flex;
  flex-direction: column;
  width: 54px;
  min-height: 200px;
  flex-shrink: 0;
  border-radius: 100px;
  overflow: hidden;
  background: var(--emp-border);
}
.fi2-comp__band { display: block; }
.fi2-comp__band--bt, .fi2-comp__dot--bt { background: var(--emp-coral-dark); }
.fi2-comp__band--fb, .fi2-comp__dot--fb { background: var(--emp-teal); }
.fi2-comp__band--pt, .fi2-comp__dot--pt { background: var(--emp-mustard); }
.fi2-comp__band--rc, .fi2-comp__dot--rc { background: var(--emp-charcoal); }

.fi2-comp__legend { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fi2-comp__row { padding: 10px 0; border-bottom: 1px solid var(--emp-border); }
.fi2-comp__row:first-child { padding-top: 0; }
.fi2-comp__row:last-child { border-bottom: none; }
.fi2-comp__rowhead { display: flex; align-items: center; gap: 9px; }
.fi2-comp__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.fi2-comp__label { flex: 1; font-size: 13px; font-weight: 600; color: var(--emp-charcoal); }
.fi2-comp__pct {
  font-family: var(--emp-font-heading, 'Bricolage Grotesque', 'DM Sans', sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--emp-charcoal);
}
.fi2-comp__note {
  font-size: 11px;
  color: var(--emp-muted);
  margin: 3px 0 0;
  padding-left: 18px;
  line-height: 1.4;
}
.fi2-comp__total {
  margin-left: auto;
  font-family: var(--emp-font-heading, 'Bricolage Grotesque', 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--emp-teal);
  background: var(--emp-teal-light);
  padding: 2px 10px;
  border-radius: 100px;
}
.fi2-comp__foot { font-size: 11px; color: var(--emp-muted); margin: 14px 0 0; line-height: 1.5; }

/* ── 5-part stacked bar breakdown (Complete tab). One horizontal bar; segments
   sized by flex to the weights, color-matched to the legend. Native CSS. ─ */
.fi2-comp--bar { flex-direction: column; gap: 14px; }
.fi2-comp__barline {
  display: flex;
  width: 100%;
  height: 16px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--emp-border);
}
.fi2-comp__seg { display: block; }
.fi2-comp__seg--cat { background: var(--emp-coral); }
.fi2-comp__seg--fit { background: var(--emp-teal); }
.fi2-comp__seg--fab { background: var(--emp-mustard); }
.fi2-comp__seg--pri { background: var(--emp-charcoal); }
.fi2-comp__seg--pref { background: var(--emp-muted); }
.fi2-comp__dot--cat { background: var(--emp-coral); }
.fi2-comp__dot--fit { background: var(--emp-teal); }
.fi2-comp__dot--fab { background: var(--emp-mustard); }
.fi2-comp__dot--pri { background: var(--emp-charcoal); }
.fi2-comp__dot--pref { background: var(--emp-muted); }
.fi2-comp__why { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--emp-border); }
.fi2-comp__why p { font-size: 12px; color: var(--emp-muted); line-height: 1.55; margin: 0 0 8px; }
.fi2-comp__why p:last-child { margin-bottom: 0; }
.fi2-comp__why strong { color: var(--emp-charcoal); font-weight: 600; }
.fi2-comp__why em { font-style: italic; }

/* In-page completion CTA — visible in the content, mirrors the action-bar Next. */
.fi2-finale-cta { text-align: center; margin-top: 8px; }
.fi2-finale-cta__btn { padding: 14px 36px; font-size: 14px; min-width: 240px; }
.fi2-finale-note { font-size: 11px; color: var(--emp-muted); margin: 12px 0 0; }

/* ── CTA (for non-onboarded users) ───────────────────────────────────────────── */
.fi2-cta {
  display: inline-block;
  padding: 10px 20px;
  background: var(--emp-coral-light);
  color: var(--emp-coral);
  border-radius: var(--emp-r-btn);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
}
.fi2-cta:hover {
  background: var(--emp-coral);
  color: #fff;
}

/* ── Score badge (for product cards) ──────────────────────────────────────────── */
.fi2-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--emp-teal-light);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--emp-teal);
}
.fi2-score-num {
  font-family: var(--emp-font-heading, 'Bricolage Grotesque', 'DM Sans', sans-serif);
  font-weight: 700;
}

/* ── Intro card — fi2-specific color variants ─────────────────────────────────── */
.fi2-intro-card--teal { --emp-intro-accent: var(--emp-teal); }
.fi2-intro-card--coral { --emp-intro-accent: var(--emp-coral); }
.fi2-intro-card--mustard { --emp-intro-accent: var(--emp-mustard); }

/* ── Persistent header ──────────────────────────────────────────────────────── */
.fi2-header {
  margin-bottom: 20px;
}

/* ── Validation error highlights ────────────────────────────────────────────────── */
.fi2-input--error { border-color: #e74c3c !important; box-shadow: 0 0 0 2px rgba(231,76,60,0.15) !important; }
.fi2-chip-opt--error { border-color: #e74c3c !important; }
.fi2-shoe--error { border-color: #e74c3c !important; }

/* ── Body diagram: measurement groups & highlights ───────────────────────────── */
.fi2-mgroup {
  transition: opacity 0.2s, stroke-width 0.2s;
}
.fi2-mgroup.fi2-mactive {
  opacity: 1 !important;
  stroke-width: 2.5 !important;
  filter: drop-shadow(0 0 4px currentColor);
}

/* Drag-handle knobs on each measurement data point */
.fi2-handle { cursor: grab; }
.fi2-handle:active { cursor: grabbing; }
.fi2-handle circle {
  transition: stroke-width 0.15s ease, filter 0.15s ease;
}
.fi2-handle:hover circle,
.fi2-handle.fi2-mactive circle {
  stroke-width: 3.5;
  filter: drop-shadow(0 0 4px currentColor);
}

/* ── Responsive ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .fi2-body-wrap { flex-direction: column; align-items: center; }
  .fi2-body-svg { width: 140px; }
  .fi2-fields--left, .fi2-fields--right { width: 100%; }
  .fi2-shoe-grid { grid-template-columns: repeat(3, 1fr); }
  .fi2-brand-grid { grid-template-columns: 1fr; }
  .fi2-summary { grid-template-columns: 1fr; }
  .fi2-shape { flex-direction: column; text-align: center; }
}

/* ── FitProfile Summary ([empyra_fit_summary]) ────────────────────────────────
.fi2-summary-wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.fi2-summary-notice { font-size: 14px; color: var(--emp-muted); }
.fi2-summary-notice a { color: var(--emp-coral); font-weight: 600; }
.fi2-summary-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: var(--emp-red); border-radius: var(--emp-r-input); }
.fi2-summary-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--emp-muted); }
.fi2-summary-val { font-size: 14px; font-weight: 600; color: var(--emp-teal); }
.fi2-summary-grid { display: flex; flex-wrap: wrap; gap: 10px;} */

/* FitProfileSummary - Moved to Global.css */

/* ── Score label ───────────────────────────────────────────────────────────────── */
.fi2-score-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--emp-teal);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Fit profile link ────────────────────────────────────────────────────────── */
.fit-profile-link {
  color: var(--emp-coral);
  font-weight: 600;
  text-decoration: none;
}
.fit-profile-link:hover {
  text-decoration: underline;
}

/* ── Info card (Styra AI notice) ─────────────────────────────────────────────── */
.info--card {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: rgba(224, 120, 86, 0.06);
  border: 1px solid var(--emp-coral);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
}
.info--card p {
  margin: 0;
  color: var(--emp-teal);
  font-weight: 800;
}

/* ── Accessibility: Focus Visible ──────────────────────────────────────────────── */
.fi2-shoe:focus-visible,
.fi2-brand:focus-visible {
  outline: 2px solid var(--emp-coral);
  outline-offset: 2px;
}

/* ── Demo Score Breakdown (Tab 6) ──────────────────────────────────────────────── */
.fi2-breakdown-note {
  font-size: 11px;
  color: var(--emp-muted);
  margin: 0 0 4px;
  line-height: 1.5;
}
.fi2-summary-item .fi2-tag-pending {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(224, 120, 86, 0.1);
  color: var(--emp-coral);
  margin-left: 6px;
}

/* ── Misc Tab — review/staging card ───────────────────────────────────────────── */
.fi2-panel .emp-card[style*="dashed"] p {
  font-size: 13px;
  color: var(--emp-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Drill-down chip picker (fabric, pattern, categories — any depth) ──────────── */
/* Pure chips, no chevrons. Non-leaf node row → per-node child group below a divider. */
/* Title Case only — not all-caps, not lowercase. PHP title-cases all-caps term names;
   this keeps any mixed-case input consistent. */
.fi2-drill .emp-chip-opt,
.fi2-drill__label,
.fi2-drill__gtitle,
.fi2-drill__clear { text-transform: capitalize; }
.fi2-drill__node { display: inline-flex; align-items: center; gap: 6px; }
.fi2-drill__dot {
  font-size: 10px;
  line-height: 1;
  color: var(--emp-muted);
  min-width: 1.5em;
  text-align: center;
}
.fi2-drill__node--on .fi2-drill__dot { color: var(--emp-teal); }
.fi2-drill__group { margin-top: 0; padding-left: 10px; } /* indent nested levels */
.fi2-drill__group[hidden] { display: none; }
.fi2-drill__divider {
  height: 1px;
  background: var(--emp-border);
  margin: 10px 0 8px;
}
.fi2-drill__ghead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.fi2-drill__gtitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--emp-muted);
}
.fi2-drill__clear {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--emp-coral);
  cursor: pointer;
  padding: 2px 4px;
}
.fi2-drill__clear:hover { text-decoration: underline; }

/* ── Categories: per-L1 branches filtered by gender ───────────────────────────── */
.fi2-cat-branch[hidden] { display: none; }
.fi2-cats-hint {
  font-size: 12px;
  color: var(--emp-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Eyebrow — still used by the colour tab, the scan panel and the finale hero.
   Your Results dropped it: a tracked-out caps label above a heading that already
   said the same thing was noise there. */
.fi2-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--emp-teal);
  margin: 0 0 8px;
}

/* ── Your Results: one docket ───────────────────────────────────────────────── */
/* The screen is a single sheet, not a stack of cards: Styra's note opens it, the
   readings follow as ruled sections of the same document. Hairline rules do the
   separating that card chrome used to, so the sections can differ in weight
   instead of all reading as equal-sized widgets. Coral appears exactly once on
   this page — the primary button — so it means "this is the way out". */
.fi2-docket { padding: 0; overflow: hidden; }

.fi2-docket__sec {
  padding: 22px 20px;
  border-top: 1px solid var(--emp-border);
}
.fi2-docket__sec:first-child { border-top: none; }

/* Styra's note sits on its own card above the sheet — it is her voice, not one
   of the readings, and the gap between the two says so. No tinted wash: the
   readings below are quiet, so a coloured panel here would be the loudest thing
   on a page whose bold moment is meant to be the palette. */
.fi2-profile-note {
  padding: 22px 20px 16px;
  position: relative;
  background: var(--emp-bg-card, #fff);
}

/* The halo. A conic sweep in the brand's own colours, masked to the card's edge
   so it reads as a ring of light rather than a gradient behind a box — a
   negative z-index does not work here, since those children paint above their
   own element's background and simply flood the card.

   One speed, always. It was faster while Styra was writing and slower once she
   had finished, which meant the card visibly changed gear the moment the last
   word landed and pulled the eye back to something already read. */
@property --fi2-halo {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.fi2-profile-note::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--fi2-halo),
    var(--emp-coral)       0deg,
    var(--emp-mustard)    90deg,
    var(--emp-teal)      190deg,
    var(--emp-coral-light) 280deg,
    var(--emp-coral)     360deg);
  /* Shows the padding ring only: two identical fills, one clipped to the
     content box, differenced against the other. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: .9;
  animation: fi2-halo-spin 7s linear infinite;
  pointer-events: none;
}

/* The inside, lit from the corners the ring passes, so the card reads as glass
   with something behind it rather than white paper with a coloured edge stuck
   on. Fallback uses the pale tokens straight; they sit so close to white that
   the wash did not register at all, so where color-mix exists the mid-tones
   carry it at low strength instead. */
.fi2-profile-note::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(115% 85% at 0% -12%, var(--emp-coral-light) 0%, transparent 60%),
    radial-gradient(105% 80% at 100% 112%, var(--emp-teal-light) 0%, transparent 58%);
  opacity: 1;
  pointer-events: none;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .fi2-profile-note::after {
    background:
      radial-gradient(115% 85% at 0% -12%,
        color-mix(in srgb, var(--emp-coral) 18%, transparent) 0%, transparent 62%),
      radial-gradient(105% 80% at 100% 112%,
        color-mix(in srgb, var(--emp-teal) 15%, transparent) 0%, transparent 60%),
      radial-gradient(60% 45% at 92% -6%,
        color-mix(in srgb, var(--emp-mustard) 10%, transparent) 0%, transparent 70%);
  }
}

/* Content above the wash — it is a pseudo-element on the same box, so without
   this the text sits underneath it. */
.fi2-profile-note > * { position: relative; z-index: 1; }

@keyframes fi2-halo-spin { to { --fi2-halo: 360deg; } }

/* Without @property the angle cannot be interpolated, so the ring sits still in
   the brand colours — present, just not turning. */
@supports not (background: conic-gradient(from var(--fi2-halo), red, blue)) {
  .fi2-profile-note::before { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fi2-profile-note::before { animation: none; }
}

/* The sheet stretches as wide as the page gives it, but prose does not: every
   text block holds a readable measure while the palette still bleeds to the
   full width. */
.fi2-profile-note .fi2-color-read p,
.fi2-docket__reading { max-width: 62ch; }

.fi2-docket__h {
  font-family: var(--emp-font-heading, 'Bricolage Grotesque', 'DM Sans', sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--emp-charcoal);
  margin: 0 0 4px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
/* The detected body type, as a value beside its heading rather than a 38px
   display line. "Rect / Athletic" is a system label; the sentence under it is
   what she actually reads. */
.fi2-docket__tag {
  font-family: var(--emp-font-body, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--emp-teal);
  background: var(--emp-teal-light);
  border-radius: 100px;
  padding: 3px 10px;
}
.fi2-docket__p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--emp-muted);
  margin: 0;
  max-width: 62ch;
}

/* The docket line — the four measurements a tailor would write down. This is
   where Bricolage earns its place: tabular numerals at size, ruled off top and
   bottom, rather than an oversized heading elsewhere on the page. */
/* display:grid outranks the UA's [hidden] rule, so the row has to opt out
   explicitly — without this the "hidden" empty state still shows four dashes. */
.fi2-docket__figures[hidden] { display: none; }
.fi2-docket__figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 18px;
  border-top: 1px solid var(--emp-border);
  padding-top: 14px;
}
.fi2-fig { display: flex; flex-direction: column; gap: 4px; }
.fi2-fig__n {
  font-family: var(--emp-font-heading, 'Bricolage Grotesque', 'DM Sans', sans-serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--emp-charcoal);
  font-variant-numeric: tabular-nums;
}
.fi2-fig__l { font-size: 12px; color: var(--emp-muted); }

/* The palette breaks the sheet's gutters. It is the only saturated, full-width
   thing here, and the only element on the page that is genuinely hers. */
.fi2-docket__sec--colour .fi2-drape {
  margin: 16px -20px 0;
  border-radius: 0;
  gap: 0;
}
.fi2-docket__sec--colour .fi2-drape__c > span {
  height: 52px;
  border-radius: 0;
}
.fi2-docket__reading {
  font-size: 14px;
  line-height: 1.6;
  color: var(--emp-charcoal);
  margin: 14px 0 0;
}
/* Why she should believe the reading: the three tones we actually sampled. */
.fi2-docket__evidence {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--emp-muted);
}
.fi2-docket__evidence .fi2-tones-mini { gap: 10px; }

/* Complete: the confirmation strip. A tick and a line, sharing the sheet's ink —
   the milestone is real, but the palette below is what should carry the volume. */
.fi2-done {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
}
.fi2-done__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--emp-coral);
  color: #fff;
}
.fi2-done__title {
  font-family: var(--emp-font-heading, 'Bricolage Grotesque', 'DM Sans', sans-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--emp-charcoal);
  margin: 2px 0 4px;
}
.fi2-done__sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--emp-muted);
  margin: 0;
  max-width: 56ch;
}

/* The leftovers — lengths, height, shoe, budget. Genuinely label/value pairs, so
   a description list is the honest structure. */
.fi2-docket__pairs {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px 14px;
  margin: 12px 0 0;
  font-size: 14px;
}
.fi2-docket__pairs dt { color: var(--emp-muted); }
.fi2-docket__pairs dd { margin: 0; color: var(--emp-charcoal); line-height: 1.5; }

/* ── Shape picker ─────────────────────────────────────────────────────────── */
/* The way through without a tape. It greys out rather than disappearing once
   measurements arrive, so the precedence is visible instead of just asserted. */
.fi2-shapepick__lede {
  font-size: 13px;
  line-height: 1.6;
  color: var(--emp-muted);
  margin: 0 0 14px;
  max-width: 62ch;
}
.fi2-shapepick__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
/* display:flex outranks the UA's [hidden] rule, so the gender filter needs this
   or every shape shows regardless. */
.fi2-shapepick__opt[hidden] { display: none; }
.fi2-shapepick__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  color: var(--emp-charcoal);
  background: #fff;
  border: 1px solid var(--emp-border);
  border-radius: var(--emp-r-card, 12px);
  cursor: pointer;
}
/* The figure carries the meaning, so it takes the accent while the label stays
   ink — a tinted silhouette reads as "this shape", a tinted word does not. */
.fi2-shapepick__fig { color: var(--emp-muted); flex: none; }
.fi2-shapepick__opt.is-selected .fi2-shapepick__fig { color: var(--emp-teal); }
.fi2-shapepick__opt:hover:not(:disabled) { border-color: var(--emp-teal); }
.fi2-shapepick__opt:focus-visible { outline: 2px solid var(--emp-teal); outline-offset: 2px; }
.fi2-shapepick__opt.is-selected {
  background: var(--emp-teal-light);
  border-color: var(--emp-teal);
  font-weight: 500;
}
.fi2-shapepick__opt:disabled { cursor: default; }
/* Locked by measurements: the others fade, the one they landed on stays clear. */
.fi2-shapepick__opt:disabled:not(.is-selected) { opacity: .45; }
.fi2-shapepick__note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--emp-muted);
}
.fi2-shapepick.is-superseded .fi2-shapepick__lede { opacity: .5; }

.fi2-note-stale {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--emp-muted);
}

.fi2-score { padding: 22px 20px; }
.fi2-score .fi2-docket__h { margin-bottom: 16px; justify-content: space-between; }

/* ── Reco marquee ──────────────────────────────────────────────────────────── */
/* Non-interactive: plays continuously, no hover-pause. All derived recos (fabric +
   pattern + categories + fit) pooled into ~7 rows; alternate rows scroll in opposite
   directions. Each row's chips are duplicated so a -50% translate loops seamlessly.
   An ambient crawl (~60–78s), so it reads as a calm stream rather than a blur. */
.fi2-docket__count { font-size: 12px; font-weight: 400; color: var(--emp-muted); }

/* Bleeds to the sheet edges, like the palette: the rows should run off both
   sides rather than stop short of a gutter, which makes a loop look like a
   stalled list. */
.fi2-docket__sec--recos #fi2-recos { margin: 14px -20px 0; }
.fi2-marquee { display: flex; flex-direction: column; gap: 8px; }
.fi2-marquee__row { overflow: hidden; }
.fi2-marquee__track {
  display: inline-flex;
  flex-shrink: 0;
  gap: 8px;
  white-space: nowrap;
  animation: fi2-marquee 64s linear infinite;
  will-change: transform;
}
.fi2-marquee__row--rtl .fi2-marquee__track { animation-direction: reverse; }
.fi2-marquee__row:nth-child(odd)  .fi2-marquee__track { animation-duration: 60s; }
.fi2-marquee__row:nth-child(even) .fi2-marquee__track { animation-duration: 78s; }
@keyframes fi2-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .fi2-marquee__track { animation: none; flex-wrap: wrap; white-space: normal; }
  .fi2-docket__sec--recos #fi2-recos { margin-left: 0; margin-right: 0; }
}

.fi2-reco-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--emp-teal);
  background: var(--emp-teal-light);
  border-radius: var(--emp-r-input);
  white-space: nowrap;
}

.fi2-docket__foot {
  padding: 20px;
  border-top: 1px solid var(--emp-border);
  background: var(--emp-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.fi2-docket__foot .emp-btn { width: 100%; max-width: 320px; }

/* Secondary actions are links, not a second button competing with the first. */
.fi2-docket__link {
  background: none;
  border: none;
  padding: 4px;
  font: inherit;
  font-size: 14px;
  color: var(--emp-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fi2-docket__link:hover { color: var(--emp-charcoal); }
.fi2-docket__link:focus-visible {
  outline: 2px solid var(--emp-teal);
  outline-offset: 2px;
  border-radius: 3px;
}
.fi2-docket__sec .fi2-docket__link { display: inline-block; margin-top: 10px; }

@media (min-width: 700px) {
  .fi2-docket__sec { padding: 28px 32px; }
  .fi2-profile-note { padding: 28px 32px 22px; }
  .fi2-done { padding: 24px 32px; }
  .fi2-score { padding: 28px 32px; }
  .fi2-docket__foot { padding: 24px 32px; flex-direction: row; justify-content: flex-start; gap: 20px; }
  .fi2-docket__foot .emp-btn { width: auto; min-width: 200px; }
  .fi2-docket__sec--colour .fi2-drape { margin-left: -32px; margin-right: -32px; }
  .fi2-docket__sec--recos #fi2-recos { margin-left: -32px; margin-right: -32px; }
  .fi2-fig__n { font-size: 34px; }
}


/* ── Read-only input (page-1 email) ───────────────────────────────────────────── */
.fi2-input--readonly {
  background: var(--emp-cream);
  color: var(--emp-muted);
  cursor: default;
}

/* ── Onboarding stepper as labeled tabs (fi2-only override).
   Base .emp-progress is the shared 6px thin bar used by ebp/ep — untouched.
   Segments are already <button>s wired to goToTab(), so jumping already works;
   this just surfaces them as labeled, obviously-clickable tabs. ─────────── */
.fi2-progress--tabs {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  cursor: default;
}
.fi2-progress--tabs .fi2-progress__tab {
  flex: 0 0 auto;
  height: auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--emp-cream);
  border: 1px solid var(--emp-border);
  color: var(--emp-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.fi2-progress--tabs .fi2-progress__num {
  display: none; /* hide number badges — labels only */
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--emp-border);
  color: var(--emp-charcoal);
  font-size: 11px;
  font-weight: 600;
}
.fi2-progress--tabs .emp-progress__segment:first-child,
.fi2-progress--tabs .emp-progress__segment:last-child { border-radius: 999px; }
.fi2-progress--tabs .emp-progress__segment:hover:not(.emp-progress__segment--active):not(:disabled) {
  border-color: var(--emp-coral);
  color: var(--emp-coral);
}
.fi2-progress--tabs .emp-progress__segment--completed {
  background: var(--emp-teal-light);
  border-color: var(--emp-teal);
  color: var(--emp-teal);
}
.fi2-progress--tabs .emp-progress__segment--completed .fi2-progress__num {
  background: var(--emp-teal);
  color: #fff;
}
.fi2-progress--tabs .emp-progress__segment--active {
  background: var(--emp-coral);
  border-color: var(--emp-coral);
  color: #fff;
}
.fi2-progress--tabs .emp-progress__segment--active .fi2-progress__num {
  background: #fff;
  color: var(--emp-coral);
}

/* ── FitProfile summary card ([empyra_fit_summary_v2] default format) ────────────
   Own .fi2-profile-* namespace so the in-quiz .fi2-summary-* styles are untouched. */
.fi2-profile {
    background: var(--emp-bg-card);
    border: 1px solid var(--emp-border);
    border-radius: var(--emp-r-card);
    box-shadow: var(--emp-shadow);
    overflow: hidden;
    max-width: 860px;
    margin: 0 auto;
}
.fi2-profile__head {
    padding: 22px 24px 18px;
    background: linear-gradient(180deg, var(--emp-coral-light) 0%, var(--emp-bg-card) 92%);
    border-bottom: 1px solid var(--emp-border);
}
.fi2-profile__eyebrow {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--emp-coral); margin: 0 0 6px;
}
.fi2-profile__title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fi2-profile__title {
    font-family: var(--emp-font-heading);
    font-size: 24px; font-weight: 700; color: var(--emp-charcoal);
    margin: 0; line-height: 1.2;
}
.fi2-profile__shape {
    font-size: 12px; font-weight: 700; color: var(--emp-teal);
    background: var(--emp-teal-light); padding: 4px 12px;
    border-radius: 100px; letter-spacing: 0.2px;
}
.fi2-profile__sub { font-size: 13px; color: var(--emp-muted); margin: 8px 0 0; line-height: 1.5; }

/* hairline grid: 1px gap over a border-coloured background = clean dividers */
.fi2-profile__grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1px; margin: 0; background: var(--emp-border);
}
.fi2-profile__cell {
    background: var(--emp-bg-card); padding: 14px 20px;
    display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.fi2-profile__cell-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--emp-muted); margin: 0;
}
.fi2-profile__cell-val {
    font-size: 15px; font-weight: 700; color: var(--emp-charcoal);
    margin: 0; line-height: 1.3;
}

.fi2-profile__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 16px 24px; border-top: 1px solid var(--emp-border);
    background: var(--emp-cream);
}
.fi2-profile__btn { flex: 1 1 auto; justify-content: center; min-width: 180px; }
.fi2-profile__link {
    font-size: 13px; font-weight: 600; color: var(--emp-teal);
    text-decoration: none; white-space: nowrap;
}
.fi2-profile__link:hover { text-decoration: underline; }

/* empty / not-onboarded state */
.fi2-profile--empty { text-align: center; padding: 34px 28px; }
.fi2-profile--empty .fi2-profile__title { font-size: 22px; margin: 8px 0 8px; }
.fi2-profile--empty .fi2-profile__sub { margin: 0 auto 18px; max-width: 420px; }
.fi2-profile--empty .fi2-profile__btn { display: inline-flex; width: auto; min-width: 200px; }
.fi2-profile__badge {
    width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--emp-coral-light); color: var(--emp-coral);
}

@media (max-width: 640px) {
    .fi2-profile__grid { grid-template-columns: 1fr; }
    .fi2-profile__head { padding: 18px 18px 14px; }
    .fi2-profile__title { font-size: 21px; }
    .fi2-profile__foot { padding: 14px 18px; }
    .fi2-profile__btn { width: 100%; min-width: 0; }
    .fi2-profile__link { width: 100%; text-align: center; }
}
/* ── Colour analysis ─────────────────────────────────────────────────────── */
/* Intentionally thin: only the colour-specific bits are defined here. */

.fi2-color__tips { margin: 0 0 18px; padding-left: 18px; color: var(--emp-muted); font-size: 13px; line-height: 1.8; }

.fi2-color__pick { display: inline-flex; cursor: pointer; min-width: 200px; justify-content: center; }

.fi2-color__skip {
    display: block; margin: 14px auto 0; padding: 0; border: 0; background: none;
    color: var(--emp-muted); font-size: 13px; text-decoration: underline; cursor: pointer;
}
.fi2-color__skip:hover { color: var(--emp-coral); }

.fi2-color__errmsg { color: var(--emp-muted); font-size: 14px; margin: 0 0 16px; }

/* Section label, matching the eyebrow treatment but muted. */
.fi2-color-sublabel {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    color: var(--emp-muted); margin: 22px 0 10px;
}

/* Sampled skin / hair / eye tones */
.fi2-color-tones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fi2-tone { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fi2-tone__sw {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--emp-border); margin-bottom: 8px;
}
.fi2-tone__l {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .8px; color: var(--emp-muted);
}
.fi2-tone__v { font-size: 13px; font-weight: 600; color: var(--emp-charcoal); margin-top: 2px; }

/* Palette */
.fi2-color-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 12px; }
.fi2-color-sw { text-align: center; }
.fi2-color-sw__chip {
    display: block; width: 100%; aspect-ratio: 1; border-radius: var(--emp-r-input);
    border: 1px solid var(--emp-border); margin-bottom: 6px;
}
.fi2-color-sw__n { font-size: 11px; color: var(--emp-muted); line-height: 1.35; }
.fi2-color-empty { color: var(--emp-muted); font-size: 13px; margin: 0; }

/* Palette echoed on the Your Results card */
.fi2-results__colour { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--emp-border); }

@media (prefers-reduced-motion: reduce) {
    .fi2-color__scanline { animation: none; opacity: .5; }
}

/* Palette chips — the summary form. Deliberately NOT a continuous bar: on the
   Complete page a solid multi-colour strip sits inches from the Fit Score weight
   bar and reads as the same component, which it isn't. Discrete circles can't be
   mistaken for a meter. */
/* Grid, not flex-wrap: 12 chips always land on one row and scale to the column,
   instead of orphaning the twelfth onto a line of its own. */
.fi2-palette-band {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: 6px; margin-top: 16px; max-width: 380px;
}
.fi2-palette-band__c {
    width: 100%; aspect-ratio: 1; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}

/* ── Complete: paired profile summary ─────────────────────────────────────── */

.fi2-sum-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 4px; }
.fi2-sum-pair--single { grid-template-columns: 1fr; }
.fi2-sum-half__l {
    display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .8px; color: var(--emp-muted); margin-bottom: 4px;
}
/* Not-yet-scored signal — deliberately outside the 100% bar, dashed to read as
   pending rather than as another weighted component. */
.fi2-comp__pending {
    margin-top: 16px; padding: 14px 16px;
    border: 1px dashed var(--emp-border); border-radius: var(--emp-r-input);
    background: var(--emp-cream);
}
.fi2-comp__dot--pending { background: var(--emp-muted); opacity: .45; }
.fi2-comp__pending .fi2-comp__pct { color: var(--emp-muted); font-weight: 600; }
.fi2-comp__pending .fi2-comp__note { margin-top: 6px; }

/* Keep the two readings top-aligned and let the shorter one sit quietly rather
   than leaving a void the full height of the taller column. */
.fi2-readings { align-items: start; }

/* Colour tab palette: 6 across gives two even rows of 12, not a ragged 9 + 3. */
.fi2-color-palette { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 720px) { .fi2-color-palette { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 420px) { .fi2-color-palette { grid-template-columns: repeat(3, 1fr); } }

/* Results hero — same box as the finale, tinted teal and held still. The coral
   pulse stays exclusive to Complete so the finish still feels like the finish. */
.fi2-finale-hero--reading {
    background: linear-gradient(180deg, var(--emp-teal-light) 0%, var(--emp-bg-card) 72%);
    border-color: var(--emp-teal-light);
    animation: none;
}
.fi2-finale-hero--reading .fi2-finale-hero__badge {
    background: var(--emp-teal);
    box-shadow: 0 6px 18px rgba(44, 95, 111, .32);
}
.fi2-finale-hero--reading .fi2-eyebrow { color: var(--emp-teal); }

/* Palette as its own full-width row — it describes the whole profile, so it
   gets the full column rather than being squeezed into the colour half. */
.fi2-results__palette {
    margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--emp-border);
}
.fi2-results__palette .fi2-color-sublabel { margin-top: 0; }
.fi2-results__palette .fi2-palette-band { max-width: none; gap: 10px; }
.fi2-results__palette .fi2-palette-band__c { border-radius: var(--emp-r-input); }

@media (max-width: 560px) {
    .fi2-results__palette .fi2-palette-band { grid-template-columns: repeat(6, 1fr); }
}

/* Complete's profile receipt — a scannable spec list, deliberately quieter than
   the full-size readings on Your Results so the two pages don't say the same
   thing twice in the same voice. */
.fi2-spec { margin: 0; }
.fi2-spec__row {
    display: grid; grid-template-columns: 150px 1fr; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--emp-border); align-items: baseline;
}
.fi2-spec__row:last-child { border-bottom: 0; padding-bottom: 0; }
.fi2-spec dt {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .8px; color: var(--emp-muted);
}
.fi2-spec dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--emp-charcoal); }
.fi2-spec .fi2-spec__v { display: block; margin-bottom: 8px; }
.fi2-spec .fi2-palette-band { margin-top: 0; max-width: 300px; gap: 5px; }

@media (max-width: 560px) {
    .fi2-spec__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Colour: two-pole dimension scales ────────────────────────────────────── */

.fi2-scales {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 22px 32px; margin: 20px 0 4px;
}
.fi2-scale__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fi2-scale__l {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .8px; color: var(--emp-muted);
}
.fi2-scale__v { font-size: 14px; font-weight: 600; color: var(--emp-charcoal); }
.fi2-scale__track {
    position: relative; height: 4px; margin: 10px 0 6px; border-radius: 100px;
    background: linear-gradient(90deg, var(--emp-cream), var(--emp-border));
}
.fi2-scale__dot {
    position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
    background: var(--emp-coral); transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px var(--emp-bg-card), 0 1px 4px rgba(0, 0, 0, .18);
}
.fi2-scale__poles {
    display: flex; justify-content: space-between;
    font-size: 10px; color: var(--emp-muted); letter-spacing: .3px;
}

@media (max-width: 560px) {
    .fi2-scales { grid-template-columns: 1fr; gap: 18px; }
    .fi2-bar { grid-template-columns: 64px 1fr 52px; gap: 10px; }
}

/* ── Colour capture card ──────────────────────────────────────────────────── */

.fi2-drop {
    border: 1.5px dashed var(--emp-border); border-radius: var(--emp-r-card);
    background: var(--emp-cream); padding: 34px 24px 26px; text-align: center;
    transition: border-color .18s ease, background .18s ease;
}
.fi2-drop--over { border-color: var(--emp-coral); background: var(--emp-coral-light); }
.fi2-drop__icon {
    width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--emp-bg-card); color: var(--emp-coral);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}
.fi2-drop__title {
    font-family: var(--emp-font-heading, 'Bricolage Grotesque', 'DM Sans', sans-serif);
    font-size: 24px; font-weight: 700; margin: 0 0 6px; color: var(--emp-charcoal);
}
.fi2-drop__sub {
    font-size: 14px; color: var(--emp-muted); margin: 0 auto 20px;
    max-width: 420px; line-height: 1.55;
}
.fi2-drop__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fi2-drop__hint { font-size: 12px; color: var(--emp-muted); margin: 14px 0 0; }

.fi2-shots { margin-top: 24px; }
.fi2-shots__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fi2-shots__list li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13.5px; color: var(--emp-charcoal); line-height: 1.5;
}
.fi2-shots__ok { color: var(--emp-teal); font-weight: 700; }
.fi2-shots__no { color: var(--emp-coral); font-weight: 700; }

.fi2-privacy {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 22px 0 0; padding: 12px 14px;
    background: var(--emp-teal-light); border-radius: var(--emp-r-input);
    font-size: 12.5px; color: var(--emp-teal); line-height: 1.5;
}

@media (max-width: 640px) {
    .fi2-drop { padding: 26px 18px 22px; }
    .fi2-drop__actions .emp-btn { width: 100%; }
}

/* The skip link inherits the theme's uppercase button treatment — it's a quiet
   text link, not a call to action, so opt out of the shouting. */
.fi2-color__skip {
    text-transform: none; letter-spacing: normal; font-weight: 400;
}
.fi2-privacy__i { flex: 0 0 auto; margin-top: 2px; }

/* ── Analysing: photo scan + stepped progress ─────────────────────────────── */

.fi2-scan { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: center; }

.fi2-scan__frame {
    position: relative; overflow: hidden;
    border-radius: var(--emp-r-card); background: var(--emp-cream);
    aspect-ratio: 3 / 4;
}
/* Absolutely positioned, not height:100% — a percentage height inside an
   aspect-ratio box can resolve as indeterminate, leaving the image at its
   natural height with dead space under it for portrait/landscape mismatches. */
.fi2-color__preview {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
    display: block;
}

/* Sweep pass over the photo. */
/* Stronger, with a bright leading edge — over a 13s wait a faint wash reads as
   nothing happening. One sweep is the whole effect; no extra components. */
.fi2-scan__line {
    position: absolute; left: 0; right: 0; height: 38%; pointer-events: none;
    background:
      linear-gradient(180deg, transparent, rgba(224,120,86,.42) 46%, rgba(224,120,86,.75) 50%, rgba(224,120,86,.42) 54%, transparent);
    box-shadow: 0 0 22px rgba(224, 120, 86, .45);
    animation: fi2Scan 2.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes fi2Scan {
    0%, 100% { transform: translateY(-45%); }
    50%      { transform: translateY(295%); }
}

/* The frame breathes with the sweep so the whole tile reads as live. */
.fi2-scan__frame {
    animation: fi2ScanGlow 2.6s ease-in-out infinite;
}
@keyframes fi2ScanGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 120, 86, .00); }
    50%      { box-shadow: 0 0 0 4px rgba(224, 120, 86, .16); }
}

/* Corner brackets — reads as a capture frame without covering the face. */
.fi2-scan__reticle {
    position: absolute; inset: 12px; pointer-events: none; border-radius: 8px;
    background:
      linear-gradient(var(--emp-coral), var(--emp-coral)) left top,
      linear-gradient(var(--emp-coral), var(--emp-coral)) left top,
      linear-gradient(var(--emp-coral), var(--emp-coral)) right top,
      linear-gradient(var(--emp-coral), var(--emp-coral)) right top,
      linear-gradient(var(--emp-coral), var(--emp-coral)) left bottom,
      linear-gradient(var(--emp-coral), var(--emp-coral)) left bottom,
      linear-gradient(var(--emp-coral), var(--emp-coral)) right bottom,
      linear-gradient(var(--emp-coral), var(--emp-coral)) right bottom;
    background-repeat: no-repeat;
    background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px;
    opacity: .85;
    animation: fi2Reticle 2.1s ease-in-out infinite;
}
@keyframes fi2Reticle { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }

.fi2-scan__side .fi2-eyebrow { color: var(--emp-coral); }

.fi2-scan__meter {
    height: 4px; border-radius: 100px; background: var(--emp-border);
    overflow: hidden; margin: 4px 0 18px;
}
.fi2-scan__meter-fill {
    display: block; height: 100%; width: 0; border-radius: 100px;
    background: var(--emp-coral); transition: width .7s cubic-bezier(.4,0,.2,1);
}

.fi2-scan__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fi2-scan__steps li {
    display: flex; align-items: center; gap: 11px;
    font-size: 14px; color: var(--emp-muted);
    opacity: .45; transition: opacity .35s ease, color .35s ease;
}
.fi2-scan__steps li.is-active { opacity: 1; color: var(--emp-charcoal); font-weight: 600; }
.fi2-scan__steps li.is-done   { opacity: 1; color: var(--emp-muted); }

.fi2-scan__tick {
    width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto;
    border: 1.5px solid var(--emp-border);
    display: flex; align-items: center; justify-content: center;
    color: transparent;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.fi2-scan__tick svg { display: block; }
.fi2-scan__steps li.is-active .fi2-scan__tick {
    border-color: var(--emp-coral);
    animation: fi2TickPulse 1.1s ease-in-out infinite;
}
@keyframes fi2TickPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224,120,86,.35); }
    50%      { box-shadow: 0 0 0 5px rgba(224,120,86,0); }
}
.fi2-scan__steps li.is-done .fi2-scan__tick {
    background: var(--emp-teal); border-color: var(--emp-teal); color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .fi2-scan__line, .fi2-scan__reticle, .fi2-scan__frame { animation: none; }
    .fi2-scan__steps li.is-active .fi2-scan__tick { animation: none; }
}

@media (max-width: 640px) {
    .fi2-scan { grid-template-columns: 1fr; gap: 20px; }
    /* Needs an explicit width: `margin: 0 auto` shrinks a grid item to its
       content, and every child here is absolutely positioned — so max-width
       alone collapsed the frame to 0x0 and the whole scan vanished on mobile. */
    .fi2-scan__frame { width: 220px; max-width: 100%; margin: 0 auto; }
}

/* ── Beta badge ───────────────────────────────────────────────────────────── */
/* Colour analysis is still being tuned — say so wherever a result is shown,
   rather than presenting a provisional reading as settled fact. */
.fi2-beta {
    display: inline-block; vertical-align: middle;
    margin-left: 7px; padding: 2px 7px;
    border-radius: 100px;
    background: #FEF3CC; color: #92650A;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .7px;
    line-height: 1.5;
}
.fi2-beta-note {
    margin-top: 10px; font-size: 12.5px; font-style: italic; opacity: .85;
}
/* A dot on the tab pill — the label is too tight for a word. */
.fi2-progress__tab--beta .fi2-progress__label::after {
    content: ''; display: inline-block; vertical-align: super;
    width: 5px; height: 5px; margin-left: 4px;
    border-radius: 50%; background: var(--emp-mustard);
}

/* Per-dimension reading — what the value means for this person. */
.fi2-scale__note {
    margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--emp-muted);
}

/* Practical takeaways. */
.fi2-guide { margin: 0; }
.fi2-guide__row {
    display: grid; grid-template-columns: 150px 1fr; gap: 14px;
    padding: 11px 0; border-bottom: 1px solid var(--emp-border); align-items: baseline;
}
.fi2-guide__row:last-child { border-bottom: 0; }
.fi2-guide dt {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .8px; color: var(--emp-muted);
}
.fi2-guide dd { margin: 0; font-size: 14px; color: var(--emp-charcoal); }

@media (max-width: 560px) {
    .fi2-guide__row { grid-template-columns: 1fr; gap: 3px; }
}

/* "Don't think this is right?" — the correction route. Quiet, but findable:
   a photo reading can be thrown by lighting, makeup or dyed hair, and the
   user's own answers should be able to overrule it. */
.fi2-recheck {
    margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--emp-border);
    text-align: center;
}
.fi2-recheck__q {
    margin: 0 0 6px;
    font-family: var(--emp-font-heading, 'Bricolage Grotesque', 'DM Sans', sans-serif);
    font-size: 17px; font-weight: 700; color: var(--emp-charcoal);
}
.fi2-recheck__sub {
    margin: 0 auto 18px; max-width: 460px;
    font-size: 13px; line-height: 1.55; color: var(--emp-muted);
}
.fi2-recheck__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 560px) {
    .fi2-recheck__actions .emp-btn { width: 100%; }
}

/* Clarifier under a quiz question — several of these ask for something people
   routinely answer by preference rather than by effect. */
.fi2-qhint {
    margin: 4px 0 8px; font-size: 12px; line-height: 1.45;
    color: var(--emp-muted); font-style: italic;
}

/* ── Colour quiz ──────────────────────────────────────────────────────────── */
/* Every answer here is a colour, so every answer is shown as one. Numbering is
   real information: six questions, and you can see how many are left. */

.fi2-quiz__head { text-align: center; margin-bottom: 28px; }
.fi2-quiz__title {
    font-family: var(--emp-font-heading, 'Bricolage Grotesque', 'DM Sans', sans-serif);
    font-size: 26px; font-weight: 700; color: var(--emp-charcoal); margin: 2px 0 8px;
}
.fi2-quiz__sub {
    font-size: 13.5px; color: var(--emp-muted); line-height: 1.55;
    max-width: 420px; margin: 0 auto;
}

.fi2-q { padding: 22px 0; border-top: 1px solid var(--emp-border); }
.fi2-q:first-of-type { border-top: 0; padding-top: 0; }
.fi2-q__head { display: flex; align-items: baseline; gap: 10px; }
.fi2-q__n {
    font-family: var(--emp-font-heading, 'Bricolage Grotesque', 'DM Sans', sans-serif);
    font-size: 12px; font-weight: 700; color: var(--emp-coral); letter-spacing: .5px;
}
.fi2-q__t {
    margin: 0; font-size: 17px; font-weight: 600; color: var(--emp-charcoal);
    font-family: var(--emp-font-heading, 'Bricolage Grotesque', 'DM Sans', sans-serif);
}
.fi2-q__hint { margin: 5px 0 14px 26px; font-size: 13px; color: var(--emp-muted); line-height: 1.5; }

/* Answer tiles — override the pill chip styling entirely. */
.fi2-answers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.fi2-ans.emp-chip-opt {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px 10px 10px; border-radius: var(--emp-r-card);
    border: 1.5px solid var(--emp-border); background: var(--emp-bg-card);
    text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500;
    color: var(--emp-charcoal); text-align: left; height: auto; line-height: 1.35;
    transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.fi2-ans .fi2-ans__sw {
    width: 40px; height: 40px; flex: 0 0 auto; border-radius: 9px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}
.fi2-ans:hover { border-color: var(--emp-teal); transform: translateY(-1px); }
.fi2-ans.emp-chip-opt--selected,
.fi2-ans.fi2-chip-opt--selected {
    background: var(--emp-bg-card); color: var(--emp-charcoal);
    border-color: var(--emp-coral); box-shadow: 0 0 0 3px var(--emp-coral-light);
}

.fi2-quiz__foot {
    margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--emp-border);
    text-align: center;
}
.fi2-quiz__foot .emp-btn { min-width: 220px; }

@media (max-width: 560px) {
    .fi2-answers__grid { grid-template-columns: 1fr; }
    .fi2-quiz__title { font-size: 22px; }
    .fi2-q__hint { margin-left: 0; }
    .fi2-quiz__foot .emp-btn { width: 100%; }
}

/* The season being overridden, carried into the quiz so hiding the result
   doesn't lose the thing you're disagreeing with. */
.fi2-quiz__current {
    margin: 14px auto 0; padding: 7px 14px;
    display: inline-block; border-radius: 100px;
    background: var(--emp-cream); border: 1px solid var(--emp-border);
    font-size: 12.5px; color: var(--emp-muted);
}
.fi2-quiz__foot .fi2-color__keep { margin-top: 12px; }

/* Compact sampled tones for the Complete receipt. */
.fi2-tones-mini { display: flex; flex-wrap: wrap; gap: 14px; }
.fi2-tones-mini__i {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--emp-muted);
}
.fi2-tones-mini__sw {
    width: 18px; height: 18px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Confidence on the reveal. Not stored — it reports how sure THIS read was,
   including how many of the three samples agreed on the season. */
.fi2-conf {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-top: 14px;
}
.fi2-conf__bar {
    flex: 0 0 120px; height: 5px; border-radius: 100px;
    background: var(--emp-border); overflow: hidden;
}
.fi2-conf__bar span { display: block; height: 100%; border-radius: 100px; background: var(--emp-teal); }
.fi2-conf__n { font-size: 12.5px; font-weight: 600; color: var(--emp-charcoal); }
.fi2-conf__agree { font-size: 12px; color: var(--emp-muted); }
.fi2-conf--fair  .fi2-conf__bar span { background: var(--emp-mustard); }
.fi2-conf--weak  .fi2-conf__bar span { background: var(--emp-coral); }

/* Shown only if the model runs past the expected window, so a slow read looks
   like patience rather than a hung page. */
.fi2-scan__slow {
    margin: 12px 0 0; font-size: 12.5px; font-style: italic; color: var(--emp-muted);
}

/* ── Secondary season + the analyst's note ─────────────────────────────────── */
.fi2-results__lean {
    margin: 6px 0 12px;
    font-size: 13px;
    color: var(--emp-muted);
}
.fi2-results__lean strong { color: var(--emp-charcoal); font-weight: 600; }

/* Reads as something written to her, not another data row — so it gets a
   comfortable measure and no card of its own. */
.fi2-note {
    max-width: 60ch;
    margin: 18px 0 4px;
}
.fi2-note__p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.65;
    color: color-mix(in srgb, var(--emp-charcoal) 82%, transparent);
}
.fi2-note__p:last-child {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--emp-charcoal);
}

/* ══ Colour result ═══════════════════════════════════════════════════════════
   The season name is hidden, so the palette is the result and it leads. Around
   eighteen saturated swatches the chrome stays colourless — charcoal on white,
   coral spent only on the action.
   ========================================================================== */
.fi2-color-lede {
    margin: 0 0 16px;
    font-family: var(--emp-font-heading);
    font-size: 19px;
    line-height: 1.35;
    color: var(--emp-charcoal);
}

/* Contiguous fields: gaps would make her compare colours across a white
   gutter, which is exactly what a real drape avoids. */
.fi2-drape {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-radius: 10px;
    overflow: hidden;
}
.fi2-drape__c { margin: 0; }
.fi2-drape__c > span { display: block; height: 86px; }
.fi2-drape__c > figcaption {
    padding: 7px 5px 9px;
    font-size: 10.5px;
    line-height: 1.25;
    text-align: center;
    color: var(--emp-muted);
}
.fi2-drape__note {
    max-width: 58ch;
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--emp-muted);
}

/* Four readings, two up. The per-axis sentences stay — they explain a word
   like "chroma" that most people have never met. */
/* The rule above these used to separate them from the drape. With the palette
   moved to Your Results the scales open the card, and a hairline across the top
   of a card is a divider with nothing to divide. */
.fi2-color-result .fi2-scales {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 28px;
    margin: 4px 0 0;
    padding: 0;
}
.fi2-color-result .fi2-scale__dot { background: var(--emp-charcoal); }

/* ── The finale: her written read ─────────────────────────────────────────── */
.fi2-finale-hero--read {
    /* No breathing animation: it loops forever under a block of prose and
       pulls the eye off the words it is meant to frame. */
    animation: none;
    padding: 30px 28px;
    margin-bottom: 16px;
}
.fi2-color-read {
    max-width: 56ch;
    margin: 0 auto;
    text-align: left;
}
/* Attribution: quiet enough that the eye starts on the first sentence, not
   on the label above it. */
.fi2-color-read__by {
    margin: 0 0 12px;
    font-size: 11.5px;
    letter-spacing: 0.01em;
    color: var(--emp-muted);
}
/* Her stylist has a name, so it gets the brand accent — the rest stays quiet
   enough that the eye still starts on the first sentence. */
.fi2-color-read__by span {
    font-weight: 600;
    color: var(--emp-coral);
}

/* One voice throughout — no per-paragraph treatment. */
.fi2-color-read p {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--emp-charcoal);
}
.fi2-color-read p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
    .fi2-drape { grid-template-columns: repeat(4, 1fr); }
    .fi2-drape__c > span { height: 66px; }
    .fi2-color-result .fi2-scales { grid-template-columns: 1fr; }
    .fi2-finale-hero--read { padding: 22px 18px; }
}

/* The note types itself in — a caret only while a line is being written. */
.fi2-color-read p.is-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -0.14em;
    background: var(--emp-coral);
    animation: fi2-caret 0.9s steps(1) infinite;
}
@keyframes fi2-caret { 50% { opacity: 0; } }

.fi2-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Styra's note on Your Results. Same voice as the colour note; it just has
   the whole profile to talk about. */
.fi2-profile-note.is-empty { display: none; }
.fi2-profile-note .fi2-color-read { min-height: 3.2em; }

/* The observation inside the reading header: centred like the rest of the
   hero, but with a real measure so it doesn't run the full card width. */
/* Static and washed back: this one introduces the reading rather than being
   the reading, so it sits quieter than Styra's note on Your Results and is
   never typed. */
.fi2-color-read--hero {
    max-width: 54ch;
    margin: 14px auto 0;
    text-align: left;
}
.fi2-color-read--hero p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--emp-charcoal);
}

/* "Write it again" — quiet, and only worth noticing once the note has been
   read and found wanting. */
.fi2-note-redo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 16px auto 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--emp-muted);
    cursor: pointer;
    transition: color 0.15s;
}
.fi2-note-redo:hover { color: var(--emp-coral); }
.fi2-note-redo:disabled { opacity: 0.45; cursor: progress; }
.fi2-note-redo:focus-visible { outline: 2px solid var(--emp-coral); outline-offset: 3px; border-radius: 3px; }

/* The compact drape: same fields, shorter and unnamed, for screens that refer
   to her palette rather than present it. */