/* ═══════════════════════════════════════════════════════════════════════════
   CityFox design tokens — names match Figma 1:1
   Source: Figma file pKZ0z76SBZCCad8RV7rscq
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Palette (primitive) ──────────────────────────────────────────────── */
  --neutral-white:      #ffffff;
  --neutral-50:         #f6f6f5;
  --neutral-100:        #eeeceb;
  --neutral-200:        #ddd9d7;
  --neutral-300:        #cbc7c3;
  --neutral-400:        #bab4af;
  --neutral-default:    #a9a19b;
  --neutral-600:        #87817c;
  --neutral-800:        #4a4039;
  --neutral-900:        #2a2422;

  --primary-50:         #fff0ea;   /* Orange/50 — peach background tint */
  --primary-100:        #ffe1d6;
  --primary-200:        #ffc3ac;
  --primary-400:        #ff8a4d;
  --primary-default:    #fe6930;
  --primary-600:        #cb5426;
  --primary-700:        #a23f1c;

  --secondary-50:       #f3eaff;
  --secondary-200:      #d4b8ff;
  --secondary-300:      #aa85e1;
  --secondary-400:      #a370e0;
  --secondary-default:  #7233cd;

  --error-50:           #fef2f2;
  --error-100:          #fee2e2;
  --error-200:          #fecaca;
  --error-default:      #ef4444;
  --error-600:          #dc2626;
  --error-700:          #b91c1c;

  --success-50:         #f0fdf4;
  --success-200:        #bbf7d0;
  --success-default:    #22c55e;

  --warning-50:         #fffbeb;
  --warning-200:        #fde68a;
  --warning-default:    #f59e0b;

  --alpha-black-0:      rgba(17, 16, 16, 0);      /* Fully transparent — base for the Transparent semantic token */
  --alpha-black-5:      rgba(17, 16, 16, 0.05);   /* Ambient shadow tint (Bottom sheet, sheet-style elevations) */
  --alpha-black-8:      rgba(17, 16, 16, 0.08);
  --alpha-black-16:     rgba(17, 16, 16, 0.16);   /* Top-bar bottom shadow; Popover top-layer shadow */
  --alpha-black-25:     rgba(17, 16, 16, 0.25);   /* Popover bottom-layer shadow */
  --alpha-black-40:     rgba(17, 16, 16, 0.4);
  --alpha-black-64:     rgba(17, 16, 16, 0.64);
  --alpha-black-80:     rgba(17, 16, 16, 0.8);

  /* ── Text/* ───────────────────────────────────────────────────────────── */
  --text-headings:            var(--neutral-900);
  --text-body:                var(--neutral-800);
  --text-body-light:          var(--neutral-600);   /* Figma: Text/Body-light → Neutral/600 (was Neutral/800) */
  --text-label:               var(--neutral-600);
  --text-label-light:         var(--neutral-400);
  --text-action:              var(--primary-default);
  --text-action-hover:        var(--primary-600);
  --text-action-pressed:      var(--primary-700);
  --text-disabled:            var(--neutral-300);
  --text-information:         var(--secondary-default);
  --text-information-subtle:  var(--secondary-300);  /* Figma: Text/Information subtle */
  --text-warning:             var(--warning-default);
  --text-error:               var(--error-default);
  --text-error-hover:         var(--error-600);
  --text-error-pressed:       var(--error-700);
  --text-success:             var(--success-default);
  --text-on-color:            var(--neutral-white);

  /* ── Icon/* ───────────────────────────────────────────────────────────── */
  --icon-default:         var(--neutral-800);
  --icon-action:          var(--primary-default);
  --icon-action-hover:    var(--primary-600);
  --icon-action-pressed:  var(--primary-700);
  --icon-disabled:        var(--neutral-300);
  --icon-information:     var(--secondary-default);
  --icon-warning:         var(--warning-default);
  --icon-error:           var(--error-default);
  --icon-error-hover:     var(--error-600);
  --icon-error-pressed:   var(--error-700);
  --icon-success:         var(--success-default);
  --icon-on-color:        var(--neutral-white);
  --icon-label:           var(--neutral-400);
  --icon-start-point:     var(--primary-400);
  --icon-destination:     var(--secondary-400);
  --icon-transparent:     var(--alpha-black-0);    /* Fully transparent — reserves icon space without rendering a glyph */

  /* ── Surface/* ────────────────────────────────────────────────────────── */
  --surface-page:                var(--neutral-white);
  --surface-background:          var(--neutral-50);
  --surface-darker-background:   var(--neutral-100);
  --surface-action:              var(--primary-default);
  --surface-action-hover:        var(--primary-600);
  --surface-action-pressed:      var(--primary-700);
  --surface-action-disabled:     var(--primary-200);
  --surface-action-ghost-hover:    var(--primary-100);
  --surface-action-ghost-pressed:  var(--primary-200);
  --surface-action-outlined-hover:   var(--neutral-100);  /* Outlined-button hover fill */
  --surface-action-outlined-pressed: var(--neutral-200);  /* Outlined-button pressed fill */
  --surface-action-background:   var(--primary-50);     /* Peach background for action-tinted regions / cards */
  --surface-success:             var(--success-50);
  --surface-warning:             var(--warning-50);
  --surface-error:               var(--error-50);
  --surface-error-pressed:       var(--error-100);
  --surface-information:         var(--secondary-50);
  --surface-information-dark:    var(--secondary-default); /* Solid purple — info pills, dark info chips */
  --surface-transparent:         var(--alpha-black-0);   /* Fully transparent surface — placeholders, reserved slots */
  --surface-disabled:            var(--neutral-300);
  --surface-switch-bg:           var(--neutral-default);
  --surface-switch-bg-hover:     var(--neutral-400);
  --surface-switch-bg-pressed:   var(--neutral-default);
  --surface-slider-bg:           var(--neutral-600);    /* Slider track resting color */
  --surface-hint-bg:             var(--alpha-black-64);  /* Hint pill background (translucent dark) */
  --surface-modal:               var(--alpha-black-40);

  /* ── Shadow/* (color tints used inside box-shadow) ────────────────────── */
  /* Figma `Shadow/*` semantic group — only the color portion of a shadow,
     so component-level `box-shadow` rules combine these with explicit
     offset/blur/spread values from Scale. */
  --shadow-bottom-sheet:   var(--alpha-black-5);    /* Bottom-sheet ambient tint — 5% warm-black */
  --shadow-shadow-16:      var(--alpha-black-16);   /* Mid drop-shadow tint — Top bar, Popover top layer, Elevation/sm */
  --shadow-shadow-25:      var(--alpha-black-25);   /* Heavier drop-shadow tint — Popover bottom layer */

  /* ── Elevation/* — composed box-shadow tokens (mirror Figma effect styles) ──
     Each `--shadow-*` is a full `box-shadow` declaration ready to drop into
     a component rule. Multi-layer shadows are comma-separated. The blur of
     `6px` in `--shadow-md` / `--shadow-up` is off-Scale; Figma stores it as
     a raw value, so we do too. */
  /* Elevation/sm — single layer · downward · Top bar, Modal head, light cards. */
  --shadow-sm: 0 var(--scale-25) var(--scale-50) 0 var(--shadow-shadow-16);
  /* Elevation/md — two layer · downward · Popover, floating menu, dropdown. */
  --shadow-md: 0 var(--scale-100) 6px           0 var(--shadow-shadow-16),
               0 var(--scale-25)  var(--scale-50) 0 var(--shadow-shadow-25);
  /* Elevation/up — two layer · upward · Bottom sheet. */
  --shadow-up: 0 calc(-1 * var(--scale-100)) 6px              0 var(--shadow-bottom-sheet),
               0 calc(-1 * var(--scale-50))  var(--scale-50)  0 var(--shadow-bottom-sheet);

  /* ── Border/* ─────────────────────────────────────────────────────────── */
  --border-default:        var(--neutral-300);
  --border-subtle:         var(--neutral-200);
  --border-page:           var(--neutral-white);   /* White outline — for icons/badges that need to knock out against a colored backing */
  --border-success:        var(--success-200);
  --border-information:    var(--secondary-200);
  --border-warning:        var(--warning-200);
  --border-error:          var(--error-200);
  --border-action:         var(--primary-default);
  --border-action-hover:   var(--primary-600);
  --border-action-pressed: var(--primary-700);
  --border-focus:          var(--primary-default);
  --border-disabled:       var(--neutral-200);
  --border-input-hover:    var(--secondary-300);
  --border-input-active:   var(--secondary-default);
  --border-input-error:    var(--error-default);
  --border-icon:           var(--neutral-800);

  /* ── Scale ────────────────────────────────────────────────────────────── */
  --scale-0:    0px;
  --scale-25:   1px;
  --scale-50:   2px;
  --scale-100:  4px;
  --scale-200:  8px;
  --scale-300:  12px;
  --scale-350:  14px;
  --scale-400:  16px;
  --scale-500:  20px;
  --scale-600:  24px;
  --scale-700:  28px;
  --scale-800:  32px;
  --scale-900:  36px;
  --scale-1000: 40px;
  --scale-1100: 44px;
  --scale-1200: 48px;
  --scale-1400: 56px;
  --scale-1600: 64px;
  --scale-1800: 72px;
  --scale-2000: 80px;
  --scale-2200: 88px;
  --scale-2400: 96px;

  /* ── Border-width / Border-radius (semantic aliases) ──────────────────── */
  --border-w-none: var(--scale-0);
  --border-w-sm:   var(--scale-25);
  --border-w-md:   var(--scale-50);
  --border-w-lg:   var(--scale-100);

  --radius-none:   var(--scale-0);
  --radius-sm:     var(--scale-50);
  --radius-md:     var(--scale-100);
  --radius-lg:     var(--scale-200);
  --radius-xlg:    var(--scale-400);
  --radius-round:  var(--scale-1600);

  /* ── Typography primitives ────────────────────────────────────────────── */
  --font-family-headings: 'Lexend', sans-serif;
  --font-family-text:     'Work Sans', system-ui, sans-serif;
  --font-family-mono:     'JetBrains Mono', ui-monospace, monospace;

  --font-weight-regular:  400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Named text-style properties — every dimension resolves through Scale.
     CityFox is a mobile-first app — these `:root` defaults are the Mobile
     scale. The landing page (or any desktop-targeted layout) opts into the
     Desktop scale by adding the `.desktop-type` class to the scope root. */
  /* Headings · Mobile (default) */
  --text-h1-size:            var(--scale-1200);  /* 48 */
  --text-h1-line-height:     var(--scale-1400);  /* 56 */
  --text-h1-letter-spacing:  -0.03em;
  --text-h2-size:            var(--scale-900);   /* 36 */
  --text-h2-line-height:     var(--scale-1100);  /* 44 */
  --text-h2-letter-spacing:  -0.02em;
  --text-h3-size:            var(--scale-800);   /* 32 */
  --text-h3-line-height:     var(--scale-900);   /* 36 */
  --text-h3-letter-spacing:  -0.01em;
  --text-h4-size:            var(--scale-700);   /* 28 */
  --text-h4-line-height:     var(--scale-800);   /* 32 */
  --text-h4-letter-spacing:  0;
  --text-h5-size:            var(--scale-600);   /* 24 */
  --text-h5-line-height:     var(--scale-700);   /* 28 */
  --text-h5-letter-spacing:  0;
  --text-h6-size:            var(--scale-500);   /* 20 */
  --text-h6-line-height:     var(--scale-600);   /* 24 */
  --text-h6-letter-spacing:  0;
  --text-h7-size:            var(--scale-400);   /* 16 */
  --text-h7-line-height:     var(--scale-500);   /* 20 */
  --text-h7-letter-spacing:  0;

  /* Body · Mobile (default) */
  --text-body-lg-size:         var(--scale-500); /* 20 */
  --text-body-lg-line-height:  var(--scale-800); /* 32 */
  --text-body-md-size:              var(--scale-400); /* 16 */
  --text-body-md-line-height:       var(--scale-600); /* 24 — Mobile (Desktop = 20) */
  --text-body-md-paragraph-spacing: var(--scale-600); /* 24 — Mobile (Desktop = 20) */
  --text-body-sm-size:         var(--scale-350); /* 14 */
  --text-body-sm-line-height:  var(--scale-500); /* 20 — Mobile has more line-height than Desktop (16) */
  --text-body-xsm-size:        var(--scale-300); /* 12 */
  --text-body-xsm-line-height: var(--scale-400); /* 16 */
}

/* ── Desktop typography scope ──────────────────────────────────────────────
   Mobile is the app default. Wrap landing-page or any desktop-targeted view
   in `<div class="desktop-type">…</div>` to swap the type scale to Desktop.
   Only the properties that DIFFER between modes are overridden — H5-H7,
   Body lg/xsm stay identical. ───────────────────────────────────────── */
.desktop-type {
  --text-h1-size:             var(--scale-1600); /* 64 */
  --text-h1-line-height:      var(--scale-1800); /* 72 */
  --text-h2-size:             var(--scale-1200); /* 48 */
  --text-h2-line-height:      var(--scale-1400); /* 56 */
  --text-h3-size:             var(--scale-900);  /* 36 */
  --text-h3-line-height:      var(--scale-1100); /* 44 */
  --text-h4-size:             var(--scale-800);  /* 32 */
  --text-h4-line-height:      var(--scale-900);  /* 36 */
  --text-h4-letter-spacing:   -0.01em;
  --text-body-sm-line-height: var(--scale-400);  /* 16 */
  --text-body-md-line-height:       var(--scale-500); /* 20 */
  --text-body-md-paragraph-spacing: var(--scale-500); /* 20 */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Type — every text node uses a Desktop/* style
   ═══════════════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-background);
  color: var(--text-body);
  font-family: var(--font-family-text);
}

/* Desktop heading styles — every value bound to a token */
.h1 { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--text-h1-size); line-height: var(--text-h1-line-height); letter-spacing: var(--text-h1-letter-spacing); color: var(--text-headings); margin: 0 0 var(--scale-1600); }
.h2 { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--text-h2-size); line-height: var(--text-h2-line-height); letter-spacing: var(--text-h2-letter-spacing); color: var(--text-headings); margin: 0 0 var(--scale-1200); }
.h3 { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--text-h3-size); line-height: var(--text-h3-line-height); letter-spacing: var(--text-h3-letter-spacing); color: var(--text-headings); margin: 0 0 var(--scale-800); }
.h4 { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--text-h4-size); line-height: var(--text-h4-line-height); letter-spacing: var(--text-h4-letter-spacing); color: var(--text-headings); margin: 0 0 var(--scale-500); }
.h5 { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--text-h5-size); line-height: var(--text-h5-line-height); letter-spacing: var(--text-h5-letter-spacing); color: var(--text-headings); margin: 0 0 var(--scale-500); }
.h6 { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--text-h6-size); line-height: var(--text-h6-line-height); letter-spacing: var(--text-h6-letter-spacing); color: var(--text-headings); margin: 0 0 var(--scale-500); }
.h7 { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--text-h7-size); line-height: var(--text-h7-line-height); letter-spacing: var(--text-h7-letter-spacing); color: var(--text-headings); margin: 0 0 var(--scale-500); }

/* Desktop body styles — every value bound to a token */
.body-lg            { font-family: var(--font-family-text); font-weight: var(--font-weight-regular);  font-size: var(--text-body-lg-size);  line-height: var(--text-body-lg-line-height); }
.body-lg-link       { font-family: var(--font-family-text); font-weight: var(--font-weight-regular);  font-size: var(--text-body-lg-size);  line-height: var(--text-body-lg-line-height);  text-decoration: underline; }
.body-lg-semibold   { font-family: var(--font-family-text); font-weight: var(--font-weight-semibold); font-size: var(--text-body-lg-size);  line-height: var(--text-body-lg-line-height); }
.body-md            { font-family: var(--font-family-text); font-weight: var(--font-weight-regular);  font-size: var(--text-body-md-size);  line-height: var(--text-body-md-line-height);  margin: 0 0 var(--text-body-md-paragraph-spacing); }
.body-md-link       { font-family: var(--font-family-text); font-weight: var(--font-weight-regular);  font-size: var(--text-body-md-size);  line-height: var(--text-body-md-line-height);  text-decoration: underline; }
.body-md-semibold   { font-family: var(--font-family-text); font-weight: var(--font-weight-semibold); font-size: var(--text-body-md-size);  line-height: var(--text-body-md-line-height);  margin: 0 0 var(--text-body-md-paragraph-spacing); }
.body-sm            { font-family: var(--font-family-text); font-weight: var(--font-weight-regular);  font-size: var(--text-body-sm-size);  line-height: var(--text-body-sm-line-height); }
.body-sm-link       { font-family: var(--font-family-text); font-weight: var(--font-weight-regular);  font-size: var(--text-body-sm-size);  line-height: var(--text-body-sm-line-height);  text-decoration: underline; }
.body-sm-semibold   { font-family: var(--font-family-text); font-weight: var(--font-weight-semibold); font-size: var(--text-body-sm-size);  line-height: var(--text-body-sm-line-height); }
.body-xsm           { font-family: var(--font-family-text); font-weight: var(--font-weight-regular);  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height); }
.body-xsm-link      { font-family: var(--font-family-text); font-weight: var(--font-weight-regular);  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height); text-decoration: underline; }
.body-xsm-semibold  { font-family: var(--font-family-text); font-weight: var(--font-weight-semibold); font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height); }
.body-xsm-uppercase { font-family: var(--font-family-text); font-weight: var(--font-weight-regular);  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height); text-transform: uppercase; }

p { margin: 0 0 var(--scale-500); }

code, .mono { font-family: var(--font-family-mono); font-size: var(--text-body-xsm-size); }

/* ═══════════════════════════════════════════════════════════════════════════
   Layout
   ═══════════════════════════════════════════════════════════════════════════ */
.shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  padding: var(--scale-800) var(--scale-600);
  background: var(--surface-page);
  border-right: var(--border-w-sm) solid var(--border-subtle);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--scale-300);
  margin-bottom: var(--scale-800);
}
/* Brand title is a label here, not a paragraph — drop the body-md paragraph
   spacing so the two lines sit tight and the mark stays vertically centered. */
.sidebar-brand .body-md-semibold { margin-bottom: 0; }
.sidebar-mark {
  width: var(--scale-800);
  height: var(--scale-800);
  border-radius: var(--radius-md);
  background: var(--surface-action);
  display: grid;
  place-items: center;
  color: var(--text-on-color);
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-body-lg-size);  /* was 18px — off-scale; pulled up to 20 (Body lg) */
}

.nav-group { margin-bottom: var(--scale-600); }
.nav-group h6 {
  font-family: var(--font-family-text); font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--scale-200);
}
.nav-group a {
  display: flex; align-items: center; gap: var(--scale-200);
  padding: var(--scale-200) var(--scale-300);
  border-radius: var(--radius-md);
  color: var(--text-body);
  text-decoration: none;
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
}
.nav-group a:hover { background: var(--surface-darker-background); }
.nav-group a .status {
  margin-left: auto;
  font-family: var(--font-family-mono);
  font-size: var(--text-body-xsm-size);  /* was 11px — off-scale; pulled to 12 (Body xsm) */
  color: var(--text-label-light);
}
.nav-group a.ready    .status { color: var(--text-success); }
.nav-group a.in-progress .status { color: var(--text-warning); }
.nav-group .nav-sub-h {                              /* secondary heading within a nav-group — quieter than the h6 */
  font-family: var(--font-family-text); font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
  color: var(--text-label-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--scale-300) 0 var(--scale-100);
  padding: 0 var(--scale-300);
}

.main {
  padding: var(--scale-2000) var(--scale-2000);
  max-width: 1200px; /* page-layout breakpoint, off-Scale by intent */
}

/* Page header */
.page-header {
  margin-bottom: var(--scale-2000);
}
.page-header .meta {
  display: inline-flex; gap: var(--scale-200);
  background: var(--surface-information);
  border: var(--border-w-sm) solid var(--border-information);
  color: var(--text-information);
  padding: var(--scale-100) var(--scale-300);
  border-radius: var(--radius-round);
  margin-bottom: var(--scale-600);
}

/* Section separators */
section.group { margin-bottom: var(--scale-2000); }
section.group > .section-intro { margin-bottom: var(--scale-1200); }

.kicker {
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--scale-200);
}

/* Component card */
.component {
  background: var(--surface-page);
  border: var(--border-w-sm) solid var(--border-subtle);
  border-radius: var(--radius-xlg);
  padding: var(--scale-800);
  margin-bottom: var(--scale-800);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scale-800);
}
.component.gated { grid-template-columns: minmax(0, 1fr); }
.component .preview { width: 100%; box-sizing: border-box; }
.component-head {
  display: flex; align-items: baseline; gap: var(--scale-300);
  margin-bottom: var(--scale-300);
}
.badge {
  display: inline-flex; align-items: center; gap: var(--scale-100);
  padding: var(--scale-50) var(--scale-200);
  border-radius: var(--radius-round);
  font-family: var(--font-family-text); font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
}
.badge.ready    { background: var(--surface-success);     color: var(--text-success); border: var(--border-w-sm) solid var(--border-success); }
.badge.progress { background: var(--surface-warning);     color: var(--text-warning); border: var(--border-w-sm) solid var(--border-warning); }
.figma-id {
  font-family: var(--font-family-mono);
  font-size: var(--text-body-xsm-size);
  color: var(--text-label);
}
.component-tagline { color: var(--text-body); margin-bottom: var(--scale-500); }

.component-body h7,
.component-body h6 { margin-top: var(--scale-600); }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--scale-300) 0 var(--scale-500);
}
.spec-table th,
.spec-table td {
  text-align: left;
  padding: var(--scale-200) var(--scale-300);
  border-bottom: var(--border-w-sm) solid var(--border-subtle);
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
  color: var(--text-body);
  vertical-align: top;
}
.spec-table th {
  font-weight: var(--font-weight-semibold);
  color: var(--text-label);
  background: var(--surface-background);
}
.spec-table code { background: var(--surface-darker-background); padding: 1px 6px; border-radius: var(--radius-sm); }

ul.spec-list { margin: 0; padding-left: var(--scale-500); }
ul.spec-list li { margin-bottom: var(--scale-200); }

/* Preview pane */
.preview {
  background: var(--surface-background);
  border: var(--border-w-sm) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--scale-600);
  display: flex; flex-direction: column; gap: var(--scale-400);
  align-self: start;
}
.preview-row { display: flex; flex-wrap: wrap; gap: var(--scale-300); align-items: center; }
.preview-stack { display: flex; flex-direction: column; gap: var(--scale-300); }
.preview-label { color: var(--text-label); }

/* Variant matrix — column = state, row = type */
.variant-grid {
  display: grid;
  gap: var(--scale-300) var(--scale-400);
  align-items: center;
  margin-bottom: var(--scale-400);
}
.variant-grid .vh,
.variant-grid .vrl {
  font-family: var(--font-family-text); font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
  color: var(--text-label);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.variant-grid .vrl { text-align: right; }
.variant-grid .vh  { text-align: center; }
.variant-grid .cell {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--scale-1100);
}
.variant-section-title {
  font-family: var(--font-family-mono); font-size: var(--text-body-xsm-size);
  color: var(--text-body);
  margin: var(--scale-400) 0 var(--scale-200);
  padding-bottom: var(--scale-100);
  border-bottom: var(--border-w-sm) dashed var(--border-subtle);
}
.variant-section-title:first-of-type { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Component renders — Button
   ═══════════════════════════════════════════════════════════════════════════ */
.cf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--scale-300);
  border-radius: var(--radius-lg);
  font-family: var(--font-family-text); font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height);
  border: var(--border-w-none) solid transparent;
  cursor: pointer;
  padding: 0 var(--scale-300);                    /* px-12 (lg/md) — Figma 67:3 */
  height: var(--scale-1000);
  transition: background-color 80ms ease, color 80ms ease, border-color 80ms ease;
}
.cf-btn.lg { height: var(--scale-1100); }
.cf-btn.sm { height: var(--scale-700); padding: 0 var(--scale-200); gap: var(--scale-200);   /* px-8 — Figma 67:3 */
             font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); }

/* ── Icon-only buttons — square, width = height, zero horizontal padding ──
   Opt-in via `.icon-only`. Apply when the button contains ONE icon and
   nothing else (no text, no second icon). Sizes: 44 / 40 / 28 — matching
   `cf-btn.lg` / default / `cf-btn.sm` heights. ───────────────────────── */
.cf-btn.icon-only    { width: var(--scale-1000); padding: 0; gap: 0; }
.cf-btn.icon-only.lg { width: var(--scale-1100); }
.cf-btn.icon-only.sm { width: var(--scale-700); }

/* Ghost icon-only is a tighter square than the other types — Figma 233:8838.
   lg 36 / md 28 / sm 20 (vs 44 / 40 / 28). Overrides width and height. */
.cf-btn.ghost.icon-only    { width: var(--scale-700); height: var(--scale-700); }
.cf-btn.ghost.icon-only.lg { width: var(--scale-900); height: var(--scale-900); }
.cf-btn.ghost.icon-only.sm { width: var(--scale-500); height: var(--scale-500); }

.cf-btn.primary    { background: var(--surface-action); color: var(--text-on-color); }
.cf-btn.primary:hover   { background: var(--text-action-hover); }
.cf-btn.primary:active  { background: var(--surface-action-pressed); }

.cf-btn.outlined   { background: transparent; color: var(--text-body); border: var(--border-w-sm) solid var(--border-default); }
.cf-btn.outlined:hover  { background: var(--surface-action-outlined-hover); }
.cf-btn.outlined:active { background: var(--surface-action-outlined-pressed); }

.cf-btn.ghost      { background: transparent; color: var(--text-action); }
.cf-btn.ghost:hover     { background: var(--surface-action-ghost-hover); }
.cf-btn.ghost:active    { background: var(--surface-action-ghost-pressed); }

.cf-btn.danger     { background: transparent; color: var(--text-error); border: var(--border-w-sm) solid var(--border-default); }
.cf-btn.danger:hover    { background: var(--surface-error); }
.cf-btn.danger:active   { background: var(--surface-error-pressed); }

/* Neutral / borderless — low-emphasis affordances like icon-only close
   buttons and toolbar actions. Same surface scheme as Outlined (transparent
   rest, Neutral/100 hover) but without the border, and the glyph stays
   neutral (Icon/Default) so it doesn't compete with the brand orange. */
.cf-btn.neutral    { background: transparent; color: var(--icon-default); }
.cf-btn.neutral:hover   { background: var(--surface-action-outlined-hover); }
.cf-btn.neutral:active  { background: var(--surface-action-outlined-pressed); }

.cf-btn[disabled] { cursor: not-allowed; }
.cf-btn.primary[disabled]  { background: var(--surface-action-disabled); color: var(--text-on-color); }
.cf-btn.outlined[disabled],
.cf-btn.ghost[disabled],
.cf-btn.danger[disabled]   { color: var(--text-disabled); background: transparent; }

/* Forced states for variant matrix (real :hover/:active still work) */
.cf-btn.primary.is-hover    { background: var(--text-action-hover); }
.cf-btn.primary.is-pressed  { background: var(--surface-action-pressed); }
.cf-btn.outlined.is-hover   { background: var(--surface-action-outlined-hover); }
.cf-btn.outlined.is-pressed { background: var(--surface-action-outlined-pressed); }
.cf-btn.ghost.is-hover      { background: var(--surface-action-ghost-hover); }
.cf-btn.ghost.is-pressed    { background: var(--surface-action-ghost-pressed); }
.cf-btn.danger.is-hover     { background: var(--surface-error); }
.cf-btn.danger.is-pressed   { background: var(--surface-error-pressed); }
.cf-btn.neutral.is-hover    { background: var(--surface-action-outlined-hover); }
.cf-btn.neutral.is-pressed  { background: var(--surface-action-outlined-pressed); }
.cf-btn.neutral[disabled]   { color: var(--icon-disabled); background: transparent; }

/* Phosphor icon sizing per context. Icons inherit font-size and use currentColor. */
/* Button — spec: 32 / 24 / 16 for lg / md / sm */
.cf-btn .ph             { font-size: var(--scale-600); flex-shrink: 0; line-height: 1; }
.cf-btn.lg .ph          { font-size: var(--scale-800); }
.cf-btn.sm .ph          { font-size: var(--scale-400); }
/* Field/Dropdown caret */
.cf-field .ph           { font-size: var(--scale-500); }
/* Dropdown menu — selected check */
.cf-menu-item .ph       { font-size: var(--scale-600); }
/* Checkbox glyph — 12 on sm, 16 on md, 20 on lg */
.cf-checkbox .ph        { font-size: var(--scale-400); line-height: 1; color: var(--icon-on-color); }
.cf-checkbox.lg .ph     { font-size: var(--scale-500); }
.cf-checkbox.sm .ph     { font-size: var(--scale-300); }
/* Modal — head icon stays 24 inside the 32×32 slot. (Close button icon is
   sized by the generic `.cf-btn .ph` rule above.) */
.cf-modal-head .icon .ph{ font-size: var(--scale-600); }

/* ── Icon-weight rule ──────────────────────────────────────────────────────
   Bold for icons rendered below Scale/600 (24): they need thicker strokes to
   stay legible at small sizes. Regular for icons at Scale/600 (24) or larger.
   `!important` is required because Phosphor's own .ph rule uses !important on
   font-family — and component-library.css loads after Phosphor's CSS.
   Explicit `ph-bold` in markup is recommended for clarity, but this rule
   enforces the weight in case markup forgets. ───────────────────────────── */
.cf-btn.sm .ph,
.cf-field .ph,
.cf-checkbox .ph,
.cf-label .ph,
.cf-chip .ph,
.cf-tag .ph,
.cf-route-icon.ph,
.cf-card-caret .ph,
.cf-card-likes .ph,
.cf-card-stat-value .ph {
  font-family: "Phosphor-Bold" !important;
}

/* ─ Field/Dropdown ──────────────────────────────────────────────────────── */
.cf-label {
  display: inline-flex; align-items: center; gap: var(--scale-100);
  color: var(--text-label);
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
}
.cf-label.required::before { content: '*'; color: var(--text-error); margin-right: var(--scale-50); }
.cf-label.xs { font-size: var(--text-body-xsm-size); }
/* Icon slot — 20px on md, 16px on xs, in Icon/Label color */
.cf-label .ph     { font-size: var(--scale-500); color: var(--icon-label); line-height: 1; }
.cf-label.xs .ph  { font-size: var(--scale-400); }

/* Default label-to-field gap is Scale/200 (md / sm). lg bumps to Scale/300. */
.cf-field-wrap { display: flex; flex-direction: column; gap: var(--scale-200); }
.cf-field-wrap:has(.cf-field.lg),
.cf-field-wrap:has(.cf-textarea.lg) { gap: var(--scale-300); }
.cf-field {
  display: flex; align-items: center; gap: var(--scale-200);
  height: var(--scale-1100);
  padding: 0 var(--scale-300);
  background: var(--surface-page);
  border: var(--border-w-sm) solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-body);
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
  min-width: var(--scale-2000);  /* 80 — preview-only sizing floor */
}
.cf-field.lg     { height: var(--scale-1400);
                   font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height); }
.cf-field.sm     { height: var(--scale-700); }
/* Hover · border swaps to Border/Input-hover (Secondary/300). Width stays at sm. */
.cf-field.is-hover { border-color: var(--border-input-hover); }
/* Active · border swaps to Border/Input-active. Width stays at sm (1px) — confirmed by user. */
.cf-field.active,
.cf-field.is-active { border-color: var(--border-input-active); }

/* Interactive demo · use real :hover and :focus-visible. Apply via .interactive + tabindex="0". */
.cf-field.interactive { cursor: pointer; outline: none; }
.cf-field.interactive:hover:not(.is-disabled):not(.is-error)         { border-color: var(--border-input-hover); }
.cf-field.interactive:focus-visible:not(.is-disabled):not(.is-error) { border-color: var(--border-input-active); }
.cf-field .caret { transition: transform 120ms ease; }

/* Combobox — Field/Dropdown trigger paired with a Dropdown menu popup */
.cf-combobox { position: relative; }
.cf-combobox-menu {
  position: absolute;
  top: calc(100% + var(--scale-100));
  left: 0;
  width: 100%;
  z-index: 10;
}
.cf-combobox.is-open .cf-field .caret { transform: rotate(180deg); }
.cf-combobox.is-open .cf-field { border-color: var(--border-input-active); }

/* Show the trailing check only on selected menu items (markup includes it on every row) */
.cf-menu-item .check { display: none; margin-left: auto; }
.cf-menu-item.selected .check { display: inline-flex; }
.cf-field.is-filled { border-color: var(--border-default); }
.cf-field.error,
.cf-field.is-error  { border-color: var(--border-input-error); }
.cf-field.disabled,
.cf-field.is-disabled { background: var(--surface-background); color: var(--text-disabled); border-color: var(--border-default); }
.cf-field .placeholder { color: var(--text-label-light); }
.cf-field .caret { margin-left: auto; color: var(--icon-default); }
.cf-field-hint  { color: var(--text-label); font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height); }
.cf-error-msg { color: var(--text-error); font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height); }

/* ─ Dropdown menu ───────────────────────────────────────────────────────── */
.cf-menu {
  background: var(--surface-page);
  border: var(--border-w-sm) solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 247px; /* Figma published spec width — off-Scale by intent */
}
.cf-menu-item {
  display: flex; align-items: center; gap: var(--scale-200);
  padding: var(--scale-300);
  height: var(--scale-1400);
  color: var(--text-body);
  border-bottom: var(--border-w-sm) solid var(--border-subtle);
  cursor: pointer;
}
.cf-menu-item:last-child { border-bottom: none; }
.cf-menu-item:hover,
.cf-menu-item.is-hover               { background: var(--surface-information); color: var(--text-information); }  /* light purple bg + purple text/icons */
.cf-menu-item.selected               { background: var(--surface-action); color: var(--text-on-color); }
.cf-menu-item.selected:hover,
.cf-menu-item.selected.is-hover      { background: var(--surface-action-hover); }
.cf-menu-item.is-disabled,
.cf-menu-item.disabled               { color: var(--text-disabled); cursor: not-allowed; background: var(--surface-page); }
.cf-menu-item.selected.is-disabled,
.cf-menu-item.selected.disabled      { background: var(--surface-disabled); color: var(--text-on-color); }
.cf-menu-item .check { margin-left: auto; }
/* Optional left icon — sits before the label, 24px, inherits the row's text
   color (so it tracks Unselected / Selected / Disabled like the trailing check). */
.cf-menu-item .lead { flex-shrink: 0; }

/* ─ Checkbox ────────────────────────────────────────────────────────────── */
.cf-checkbox {
  width: var(--scale-600); height: var(--scale-600);
  border: var(--border-w-sm) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  display: inline-grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.cf-checkbox.lg { width: var(--scale-800); height: var(--scale-800); }
.cf-checkbox.sm { width: var(--scale-400); height: var(--scale-400); border-radius: var(--radius-sm); }  /* 16 · radius 2 */
/* Selected/Unselected base */
.cf-checkbox.selected { background: var(--surface-action); border-color: var(--border-action); }
/* Forced states — Unselected · hover/pressed = action-tinted (Figma 233:9700) */
.cf-checkbox.is-hover,
.cf-checkbox.interactive:hover:not(.is-disabled):not(.is-error):not(.selected)        { background: var(--surface-action-ghost-hover);   border-color: var(--border-action); }
.cf-checkbox.is-pressed,
.cf-checkbox.interactive:active:not(.is-disabled):not(.is-error):not(.selected)       { background: var(--surface-action-ghost-pressed); border-color: var(--border-action-pressed); }
.cf-checkbox.is-error,
.cf-checkbox.error                            { background: var(--surface-error); border-color: var(--border-input-error); }
.cf-checkbox.is-disabled,
.cf-checkbox.disabled                         { background: var(--surface-disabled); border-color: var(--border-disabled); cursor: not-allowed; }
/* Forced states — Selected */
.cf-checkbox.selected.is-hover,
.cf-checkbox.selected.interactive:hover:not(.is-disabled):not(.is-error)              { background: var(--surface-action-hover);   border-color: var(--border-action-hover); }
.cf-checkbox.selected.is-pressed,
.cf-checkbox.selected.interactive:active:not(.is-disabled):not(.is-error)             { background: var(--surface-action-pressed); border-color: var(--border-action-pressed); }
.cf-checkbox.selected.is-error                { background: var(--surface-action); border-color: var(--border-input-error); }
.cf-checkbox.selected.is-disabled,
.cf-checkbox.selected.disabled                { background: var(--surface-disabled); border-color: var(--border-disabled); }
.cf-checkbox svg { color: var(--icon-on-color); }
/* Interactive demo · hide check on unselected, show on selected */
.cf-checkbox.interactive { outline: none; }
.cf-checkbox.interactive:focus-visible:not(.is-disabled) { box-shadow: 0 0 0 var(--border-w-md) var(--border-focus); }
.cf-checkbox.interactive:not(.selected) .ph-check { display: none; }
.cf-row { display: inline-flex; align-items: center; gap: var(--scale-200); }
.cf-row .body { color: var(--text-body); font-family: var(--font-family-text);
                font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); }

/* ─ Radio ───────────────────────────────────────────────────────────────── */
.cf-radio {
  width: var(--scale-400); height: var(--scale-400);
  border: var(--border-w-sm) solid var(--border-default);
  border-radius: var(--radius-round);
  background: var(--surface-page);
  display: inline-grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.cf-radio.lg { width: var(--scale-600); height: var(--scale-600); }
.cf-radio.selected { background: var(--surface-action); border-color: var(--border-action); }
.cf-radio.selected::after {
  content: ''; width: var(--scale-200); height: var(--scale-200);
  border-radius: var(--radius-round);
  background: var(--surface-page);
}
.cf-radio.lg.selected::after { width: var(--scale-300); height: var(--scale-300); }
/* Forced states — Unselected · hover/pressed = action-tinted (Figma 233:9908) */
.cf-radio.is-hover,
.cf-radio.interactive:hover:not(.is-disabled):not(.is-error):not(.selected)          { background: var(--surface-action-ghost-hover);   border-color: var(--border-action); }
.cf-radio.is-pressed,
.cf-radio.interactive:active:not(.is-disabled):not(.is-error):not(.selected)         { background: var(--surface-action-ghost-pressed); border-color: var(--border-action-pressed); }
.cf-radio.is-error                  { background: var(--surface-error); border-color: var(--border-input-error); }
.cf-radio.is-disabled,
.cf-radio.disabled                  { background: var(--surface-disabled); border-color: var(--border-disabled); }
/* Forced states — Selected */
.cf-radio.selected.is-hover,
.cf-radio.selected.interactive:hover:not(.is-disabled):not(.is-error)                { background: var(--surface-action-hover);   border-color: var(--border-action-hover); }
.cf-radio.selected.is-pressed,
.cf-radio.selected.interactive:active:not(.is-disabled):not(.is-error)               { background: var(--surface-action-pressed); border-color: var(--border-action-pressed); }
.cf-radio.selected.is-error         { background: var(--surface-action); border-color: var(--border-input-error); }
.cf-radio.selected.is-disabled,
.cf-radio.selected.disabled         { background: var(--surface-disabled); border-color: var(--border-disabled); }
/* Interactive demo */
.cf-radio.interactive { outline: none; }
.cf-radio.interactive:focus-visible:not(.is-disabled) { box-shadow: 0 0 0 var(--border-w-md) var(--border-focus); }

/* ─ Quiz: List item Quiz + List Quiz (Figma 463:2470) ─────────────────────── */
/* List item Quiz — the "item" frame: control + label, padded & rounded box. */
.cf-quiz-item {
  display: flex; align-items: center;
  gap: var(--scale-300);                       /* 12 — control → label */
  padding: var(--scale-200) var(--scale-300);  /* 8 / 12 */
  border: var(--border-w-sm) solid var(--border-default);  /* 1px — Unselected */
  border-radius: var(--radius-md);             /* 4 */
  background: transparent;
  cursor: pointer;
}
.cf-quiz-item .cf-quiz-label {
  color: var(--text-body);                     /* Neutral/800 */
  font-family: var(--font-family-text);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-md-size);         /* 16 */
  line-height: var(--scale-500);               /* 20 — Body md (desktop) */
}
/* Icon control for Correct / False types (16×16) */
.cf-quiz-item .cf-quiz-icon { font-size: var(--scale-400); line-height: 1; flex-shrink: 0; }
/* Type backgrounds + matching border (carried on the item box) */
.cf-quiz-item.selected               { background: var(--surface-information); border-color: var(--border-information); }  /* light purple */
.cf-quiz-item.correct                { background: var(--surface-success); border-color: var(--border-success); }
.cf-quiz-item.correct .cf-quiz-icon  { color: var(--icon-success); }
.cf-quiz-item.correct .cf-quiz-label { color: var(--text-success); }
.cf-quiz-item.false                  { background: var(--surface-error); border-color: var(--border-error); }
.cf-quiz-item.false   .cf-quiz-icon  { color: var(--icon-error); }
.cf-quiz-item.false   .cf-quiz-label { color: var(--text-error); }
/* States override the type background + border */
.cf-quiz-item.is-hover,
.cf-quiz-item.interactive:hover:not(.is-disabled)   { background: var(--surface-action-ghost-hover);   border-color: var(--border-action-hover); }
.cf-quiz-item.is-pressed,
.cf-quiz-item.interactive:active:not(.is-disabled)  { background: var(--surface-action-ghost-pressed); border-color: var(--border-action-pressed); }
.cf-quiz-item.is-disabled,
.cf-quiz-item.disabled { background: var(--neutral-100); border-color: var(--border-disabled); cursor: not-allowed; }
.cf-quiz-item.is-disabled .cf-quiz-label,
.cf-quiz-item.disabled   .cf-quiz-label { color: var(--text-disabled); }

/* List Quiz — options column (252) + Check button container (88), gap 12. */
.cf-quiz { display: flex; align-items: flex-start; gap: var(--scale-300); /* 12 */ }
.cf-quiz .cf-quiz-options { display: flex; flex-direction: column; gap: var(--scale-300); /* 12 */ flex: 1; }
.cf-quiz .cf-quiz-item { width: 100%; }      /* rows stretch to fill the options column */
/* Answered (Correct / False): Check button hides but keeps its slot so the
   options column width stays put — no expansion / reflow. */
.cf-quiz.is-answered > .cf-btn { visibility: hidden; }

/* ─ Card-stop (Figma 688:549) ─────────────────────────────────────────────── */
.cf-card-stop {
  display: flex; flex-direction: column; gap: var(--scale-400); /* 16 */
  width: 345px; max-width: 100%;
  padding: var(--scale-500) var(--scale-400); /* 20 / 16 */
  border-radius: var(--radius-xlg); /* 16 */
  background: var(--surface-background); /* neutral-50 — locked / opened */
}
.cf-card-stop.unlocked { background: var(--surface-information); /* light purple — “tap to unlock” */ }
/* Header row */
.cf-card-stop-head { display: flex; align-items: center; gap: var(--scale-300); /* 12 */ }
.cf-card-stop-badge {
  width: var(--scale-1000); height: var(--scale-1000); /* 40 */
  border-radius: var(--radius-round);
  background: var(--surface-page);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: var(--scale-600); /* 24 icon */
  color: var(--icon-information);   /* purple — Unlocked / Opened (LockKeyOpen, MapPinLine) */
}
.cf-card-stop.locked .cf-card-stop-badge { color: var(--icon-label); }  /* gray LockKey */
.cf-card-stop-titles { display: flex; flex-direction: column; gap: var(--scale-100); /* 4 */ flex: 1; min-width: 0; }
.cf-card-stop-title    { color: var(--text-headings); font-family: var(--font-family-headings);
                         font-size: var(--text-h7-size); line-height: var(--text-h7-line-height); font-weight: var(--font-weight-bold); }  /* H7 */
.cf-card-stop-subtitle { color: var(--text-body-light); font-family: var(--font-family-text);
                         font-weight: var(--font-weight-regular);
                         font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); }  /* Body sm */
/* Locked distance, right-aligned */
.cf-card-stop-distance { display: inline-flex; align-items: center; gap: var(--scale-200); /* 8 */
                         color: var(--text-body-light); font-family: var(--font-family-text);
                         font-weight: var(--font-weight-semibold);
                         font-size: var(--text-body-sm-size); line-height: var(--scale-500); flex-shrink: 0; }  /* Body sm-semibold 14/20 */
.cf-card-stop-distance i { font-size: var(--scale-400); color: var(--icon-label); }
/* Opened body */
.cf-card-stop-text     { color: var(--text-body); font-family: var(--font-family-text);
                         font-weight: var(--font-weight-regular);
                         font-size: var(--text-body-md-size); line-height: var(--scale-600); margin: 0; }  /* Body md 16/24 */
.cf-card-stop-question { color: var(--text-headings); font-family: var(--font-family-text);
                         font-size: var(--text-body-md-size); line-height: var(--scale-600); font-weight: var(--font-weight-semibold); margin: 0; }  /* Body md-semibold 16/24 */
/* Opened — "Your question" label row + reset */
.cf-card-stop-qrow { display: flex; align-items: center; justify-content: space-between; gap: var(--scale-400); }
.cf-card-stop-qrow .cf-card-stop-qlabel {
  display: inline-flex; align-items: center; gap: var(--scale-100);
  color: var(--text-body-light); font-family: var(--font-family-text);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
}
.cf-card-stop-qrow .cf-card-stop-qlabel i { color: var(--icon-label); }
/* Opened — rating footer */
.cf-card-stop-rating {
  display: flex; align-items: center; justify-content: space-between; gap: var(--scale-400);
  padding-top: var(--scale-400);
  border-top: var(--border-w-sm) solid var(--border-default);
}
.cf-card-stop-rating .cf-card-stop-rate-label {
  color: var(--text-body-light); font-family: var(--font-family-text);
  font-size: var(--text-body-sm-size); line-height: var(--scale-500);
}
.cf-card-stop-rating .cf-card-stop-rate-actions { display: inline-flex; align-items: center; gap: var(--scale-200); }
.cf-card-stop > .cf-btn  { width: 100%; }

/* ─ Switch ──────────────────────────────────────────────────────────────── */
.cf-switch {
  position: relative;
  width: var(--scale-1100); height: var(--scale-600); /* 44 × 24 */
  padding: var(--scale-100);
  border-radius: var(--radius-round);
  background: var(--surface-switch-bg);
  /* Transparent base border keeps geometry constant when On/Disabled show a visible stroke */
  border: var(--border-w-sm) solid transparent;
  display: inline-flex; align-items: center;
  cursor: pointer;
  transition: background-color 80ms ease, border-color 80ms ease;
  flex-shrink: 0;
}
/* Halo overlays — Off Hover and Off Pressed both render a translucent ghost-tint behind the track. */
.cf-switch::before { content: none; }
.cf-switch.is-hover:not(.on)::before,
.cf-switch.interactive:hover:not(.is-disabled):not(.on)::before,
.cf-switch.is-pressed:not(.on)::before,
.cf-switch.interactive:active:not(.is-disabled):not(.on)::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--scale-25));   /* -1px overflow halo around the track */
  border-radius: var(--radius-round);
  background: var(--surface-action-ghost-hover);
  opacity: 0.5;
  pointer-events: none;
}
.cf-switch.is-pressed:not(.on)::before,
.cf-switch.interactive:active:not(.is-disabled):not(.on)::before {
  background: var(--surface-action-ghost-pressed);   /* deeper peach on pressed */
}
.cf-switch .knob { position: relative; z-index: 1; } /* keep knob above halo */
.cf-switch.sm { width: var(--scale-900); height: var(--scale-500); /* 36 × 20 */ }
.cf-switch .knob {
  width: var(--scale-400); height: var(--scale-400); /* 16 */
  border-radius: var(--radius-round);
  /* Off-state knob is always Surface/Page (white) — Disabled and Pressed inherit this. */
  background: var(--surface-page);
  transition: transform 100ms ease, background-color 80ms ease;
}
.cf-switch.sm .knob { width: var(--scale-300); height: var(--scale-300); /* 12 */ }
/* On state — peach surface + Border/Action stroke + orange knob (v2 design: knob inherits action color) */
.cf-switch.on { background: var(--surface-action-ghost-hover); justify-content: flex-end;
                border-color: var(--border-action); }
.cf-switch.on .knob { background: var(--surface-action); }
.cf-switch.disabled,
.cf-switch.is-disabled { background: var(--surface-darker-background); cursor: not-allowed;
                         border: var(--border-w-sm) solid var(--border-disabled); }
/* Disabled knobs (both On and Off) — Surface/Page */
.cf-switch.disabled .knob,
.cf-switch.is-disabled .knob,
.cf-switch.on.disabled .knob,
.cf-switch.on.is-disabled .knob    { background: var(--surface-page); }

/* Forced states — Off (track stays gray; surface lightens on hover; border + knob shift) */
.cf-switch.is-hover,
.cf-switch.interactive:hover:not(.is-disabled):not(.on)         { background: var(--surface-switch-bg-hover);
                                                                  border-color: var(--border-action-hover); }
.cf-switch.is-pressed,
.cf-switch.interactive:active:not(.is-disabled):not(.on)        { background: var(--surface-switch-bg-pressed);
                                                                  border-color: var(--border-action-pressed); }
/* Off Pressed knob stays Surface/Page (no override needed — base rule applies). */
/* Forced states — On (peach lightens slightly on hover/pressed; knob darkens through the Action ramp) */
.cf-switch.on.is-hover,
.cf-switch.on.interactive:hover:not(.is-disabled)               { background: var(--surface-action-ghost-hover);
                                                                  border-color: var(--border-action-hover); }
.cf-switch.on.is-hover .knob,
.cf-switch.on.interactive:hover:not(.is-disabled) .knob         { background: var(--surface-action-hover); }
.cf-switch.on.is-pressed,
.cf-switch.on.interactive:active:not(.is-disabled)              { background: var(--surface-action-ghost-pressed);
                                                                  border-color: var(--border-action-pressed); }
.cf-switch.on.is-pressed .knob,
.cf-switch.on.interactive:active:not(.is-disabled) .knob        { background: var(--surface-action-pressed); }
/* Interactive demo */
.cf-switch.interactive { outline: none; }
.cf-switch.interactive:focus-visible:not(.is-disabled) { box-shadow: 0 0 0 var(--border-w-md) var(--border-focus); }

/* ─ Text area ───────────────────────────────────────────────────────────── */
/* Wrapper that holds iconLeft + editable area + iconRight (matches Figma 334:1696) */
.cf-textarea {
  display: flex;
  align-items: flex-start;
  gap: var(--scale-200);                                      /* gap-Spacing/spacing 03 */
  height: 120px; width: 100%;                                 /* heights 80/120/160 are off-Scale by spec */
  padding: var(--scale-300);                                  /* px/py-Scale/300 */
  background: var(--surface-page);
  border: var(--border-w-sm) solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-body);
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  /* Default (md) and sm use Body sm. lg uses Body md (override below). */
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
  cursor: text;
}
.cf-textarea > .ph {
  flex-shrink: 0;
  color: var(--icon-default);
  align-self: flex-start;
}
.cf-textarea > .ph-caret-down  { font-size: var(--scale-500); /* 20 — iconRight */ }
.cf-textarea > .ph:not(.ph-caret-down) { font-size: var(--scale-600); /* 24 — iconLeft */ }
.cf-textarea-input {
  flex: 1 0 0; min-width: 0;
  align-self: stretch;
  border: 0; background: transparent; outline: none; resize: none;
  font: inherit; color: inherit;
  padding: var(--scale-100) 0;                                /* py-Scale/100 — Container offset */
  width: 100%;
}
.cf-textarea-input::placeholder { color: var(--text-label-light); }

/* States */
.cf-textarea:focus-within,
.cf-textarea.is-active { border-color: var(--border-input-active); outline: none; }
.cf-textarea.lg { height: 160px;
                  font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height); }
.cf-textarea.sm { height: var(--scale-2000); /* 80 */ }
/* Hover · Border/Input-hover (matches Field/Dropdown — Figma fix shipped 334:1722) */
.cf-textarea.is-hover,
.cf-textarea:hover:not(:focus-within):not(.is-disabled):not(.is-error) { border-color: var(--border-input-hover); }
.cf-textarea.is-filled   { border-color: var(--border-default); }
.cf-textarea.is-error    { border-color: var(--border-input-error); }
.cf-textarea.is-disabled { background: var(--surface-background); color: var(--text-disabled); border-color: var(--border-default); cursor: not-allowed; }
.cf-textarea.is-disabled .cf-textarea-input { color: var(--text-disabled); cursor: not-allowed; }
.cf-textarea.is-disabled > .ph { color: var(--icon-disabled); }

/* ─ Slider ──────────────────────────────────────────────────────────────── */
/* Figma page 405:2081. Range-style slider — track + filled segment + 1-2 thumbs. */
.cf-slider {
  position: relative;
  height: var(--scale-400);                       /* 16 */
  width: 100%;
  --cf-slider-min: 0%;
  --cf-slider-max: 50%;
}
.cf-slider .cf-slider-track,
.cf-slider .cf-slider-fill {
  position: absolute;
  top: 50%;
  height: var(--scale-100);                       /* 4 */
  border-radius: var(--radius-md);
  transform: translateY(-50%);
}
.cf-slider .cf-slider-track {
  left: var(--scale-200); right: var(--scale-200);
  background: var(--surface-slider-bg);
}
.cf-slider .cf-slider-fill {
  left: calc(var(--scale-200) + var(--cf-slider-min));
  right: calc(var(--scale-200) + (100% - var(--cf-slider-max)));
  background: var(--surface-action);
}
.cf-slider-thumb {
  position: absolute;
  top: 50%;
  width: var(--scale-400); height: var(--scale-400);   /* 16×16 */
  border-radius: var(--radius-round);
  background: var(--surface-action);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background-color 80ms ease;
  border: 0; outline: none;
}
.cf-slider-thumb.is-hover,
.cf-slider-thumb.interactive:hover:not(.is-disabled)   { background: var(--surface-action-hover); }
.cf-slider-thumb.is-pressed,
.cf-slider-thumb.interactive:active:not(.is-disabled)  { background: var(--surface-action-pressed); }
/* Keyboard focus ring — only when not actively dragging (Figma has no stroke on the thumb). */
.cf-slider-thumb.interactive:focus-visible:not(.is-disabled):not(.is-dragging) {
  box-shadow: 0 0 0 var(--border-w-md) var(--border-focus);
}

/* ─ Bottom sheet ────────────────────────────────────────────────────────── */
/* Figma page 405:4435, symbol 405:5319. Bottom-anchored container with a drag handle. */
.cf-bottom-sheet {
  display: flex; flex-direction: column; align-items: center;
  width: 393px;                                   /* Figma mobile-frame — off-Scale by intent */
  background: var(--surface-page);
  padding: var(--scale-300) var(--scale-600) var(--scale-600); /* pt-12 px-24 pb-24 */
  border-top-left-radius:  var(--radius-xlg);
  border-top-right-radius: var(--radius-xlg);
  border-bottom-left-radius:  var(--radius-none);
  border-bottom-right-radius: var(--radius-none);
  box-shadow: var(--shadow-up);                 /* Elevation/up — upward 2-layer ambient */
}
/* Bottom-sheet handle rule lives in the Top-sheet section (shared selector with .cf-top-sheet-handle). */
.cf-bottom-sheet-slot {
  width: 100%;
  margin-top: var(--scale-300);
}

/* Type = Navigation — fixed header + scrollable content (Figma 405:4436) */
.cf-bottom-sheet.navigation {
  max-height: 360px;          /* sheet caps; content scrolls within */
  overflow: hidden;           /* clip so only the body scrolls */
}
.cf-bottom-sheet.navigation .cf-bottom-sheet-header {
  width: 100%; flex-shrink: 0;          /* header stays fixed during scroll */
  display: flex; flex-direction: column;
  gap: var(--scale-50);                 /* 2 */
  padding: var(--scale-400) 0;          /* py-16 */
  background: var(--surface-page);
}
.cf-bottom-sheet.navigation .cf-bottom-sheet-header .cf-bottom-sheet-title {
  font-family: var(--font-family-headings); font-weight: var(--font-weight-bold);
  font-size: var(--text-h6-size); line-height: var(--text-h6-line-height);  /* H6 — 20/24 */
  color: var(--text-headings); margin: 0;
}
/* Stats row: left metric group (dots as separators) ⟷ right coins + info button */
.cf-bottom-sheet-stats {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: var(--scale-300); /* 12 min gap */
}
.cf-bottom-sheet-stats-left  { display: flex; align-items: center; gap: var(--scale-200); /* 8 */ flex-wrap: wrap; }
.cf-bottom-sheet-stats-right { display: flex; align-items: center; gap: var(--scale-100); /* 4 */ flex-shrink: 0; }
.cf-bottom-sheet-stat,
.cf-bottom-sheet-coins {
  display: inline-flex; align-items: center; gap: var(--scale-100); /* 4 */
  color: var(--text-body-light); font-family: var(--font-family-text);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height); /* Body xsm 12/16 */
  white-space: nowrap;
}
.cf-bottom-sheet-stat i,
.cf-bottom-sheet-coins i { font-size: var(--scale-400); color: var(--icon-label); } /* 16, gray */
.cf-bottom-sheet-dot {
  width: var(--scale-50); height: var(--scale-50); /* 2×2 */
  border-radius: var(--radius-round); background: var(--text-body-light);
  flex-shrink: 0;
}
.cf-bottom-sheet.navigation .cf-bottom-sheet-body {
  width: 100%; flex: 1; min-height: 0;
  overflow-y: auto;                     /* scrollable content */
  padding-top: var(--scale-400);        /* slot pt-16 */
  display: flex; flex-direction: column; gap: var(--scale-400); /* 16 */
}
/* Visible right-side scroll bar */
.cf-bottom-sheet.navigation .cf-bottom-sheet-body { scrollbar-gutter: stable; }
.cf-bottom-sheet.navigation .cf-bottom-sheet-body::-webkit-scrollbar { width: var(--scale-200); /* 8 */ }
.cf-bottom-sheet.navigation .cf-bottom-sheet-body::-webkit-scrollbar-thumb {
  background: var(--border-default); border-radius: var(--radius-round);
}
.cf-bottom-sheet.navigation .cf-bottom-sheet-body::-webkit-scrollbar-track { background: transparent; }

/* ─ Resource counter ────────────────────────────────────────────────────── */
/* Figma page 416:133. Pill of icon + number pairs. Default / Hover. */
.cf-resource-counter {
  display: inline-flex; align-items: center;
  gap: var(--scale-400);                          /* 16 between groups */
  height: var(--scale-900);                       /* 36 */
  padding: 0 var(--scale-300);                    /* px-12 */
  background: var(--surface-page);
  border-radius: var(--radius-round);
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
  color: var(--text-headings);
  cursor: default;
  transition: background-color 80ms ease;
}
.cf-resource-counter.is-hover,
.cf-resource-counter.interactive:hover { background: var(--surface-action-ghost-hover); }
.cf-resource-counter .cf-resource {
  display: inline-flex; align-items: center;
  gap: var(--scale-200);                          /* 8 between icon and number */
}
.cf-resource-counter .cf-resource img {
  width: var(--scale-700); height: var(--scale-700);   /* 28×28 */
  display: block;
}

/* ─ Avatar ──────────────────────────────────────────────────────────────── */
/* Figma page 337:5707. Three sizes: sm (24) / md (36) / lg (48). Round, Surface/Information bg. */
.cf-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-round);
  background: var(--surface-information);
  color: var(--text-information);
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  flex-shrink: 0;
  overflow: hidden;
}
.cf-avatar.sm { width: var(--scale-600); height: var(--scale-600);
                font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); }
.cf-avatar    { width: var(--scale-900); height: var(--scale-900);   /* default md */
                font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); }
.cf-avatar.lg { width: var(--scale-1200); height: var(--scale-1200);
                font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); }
.cf-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ─ Tabs ────────────────────────────────────────────────────────────────── */
/* Figma page 337:5714. Row of Tab items with content + indicator. */
.cf-tabs {
  display: inline-flex; align-items: flex-end;
  gap: var(--scale-500);                          /* 20 */
}
.cf-tab-item {
  display: inline-flex; flex-direction: column; align-items: stretch;
  border: 0; background: transparent;
  cursor: pointer; padding: 0; color: inherit;
}
.cf-tab-item .cf-tab-content {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--scale-300) 0;                    /* py-12 md default */
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height);
  color: var(--text-body);
  white-space: nowrap;
  transition: color 80ms ease;
}
.cf-tab-item .cf-tab-indicator {
  height: var(--border-w-md);                     /* 2 */
  background: transparent;
  transition: background-color 80ms ease;
}
.cf-tab-item.sm .cf-tab-content { padding: var(--scale-200) 0;
                                  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); }
.cf-tab-item.lg .cf-tab-content { padding: var(--scale-400) 0;
                                  font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); }
.cf-tab-item.is-selected .cf-tab-content,
.cf-tab-item[aria-selected="true"] .cf-tab-content       { color: var(--text-action); }
.cf-tab-item.is-selected .cf-tab-indicator,
.cf-tab-item[aria-selected="true"] .cf-tab-indicator     { background: var(--border-action); }
.cf-tab-item.is-disabled,
.cf-tab-item[aria-disabled="true"]                       { cursor: not-allowed; }
.cf-tab-item.is-disabled .cf-tab-content,
.cf-tab-item[aria-disabled="true"] .cf-tab-content       { color: var(--text-disabled); }
.cf-tab-item.interactive:hover:not(.is-disabled):not([aria-disabled="true"]):not(.is-selected):not([aria-selected="true"]) .cf-tab-content {
  color: var(--text-action-hover);
}

/* ─ Top bar ─────────────────────────────────────────────────────────────── */
/* Figma page 337:5713. App header — spans the full viewport width. */
.cf-top-bar {
  display: flex; flex-direction: column;
  width: 100%;                                    /* full width — app owns the viewport */
  background: var(--surface-background);
  padding: 0 var(--scale-600);                    /* px-24 */
  box-shadow: var(--shadow-sm);                   /* Elevation/sm */
  overflow: hidden;
}
.cf-top-bar .cf-top-bar-row {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--scale-1200);                      /* 48 */
}
.cf-top-bar .cf-top-bar-logo {
  width: var(--scale-700); height: var(--scale-700);   /* 28×28 */
  display: block;
}
.cf-top-bar .cf-resource-counter {
  position: absolute; left: 50%; top: var(--scale-100);
  transform: translateX(-50%);
}
.cf-top-bar .cf-tabs { width: 100%; }
/* Index tabs row — tabs on the left, a trailing Ghost icon-only "+" button on
   the right, vertically centered. */
.cf-top-bar .cf-top-bar-tabs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--scale-300);                          /* min gap between tabs and the + button */
}
.cf-top-bar .cf-top-bar-tabs-row .cf-tabs { width: auto; }   /* tabs hug their content; + button takes the right edge */

/* ── Top bar · Type=Navigation ────────────────────────────────────────────
   Secondary screen that keeps the Resource counter visible. Single 48-tall
   row, left-aligned: a leading ghost Back button followed by the Resource
   counter. Same Surface/Background + Elevation/sm shadow as Index. Left
   padding is tightened to 8 (px-8) so the button hugs the edge; right stays
   24 (px-24). ─────────────────────────────────────────────────────────── */
.cf-top-bar.navigation {
  position: relative;                                 /* anchor for the centered counter */
  padding: 0 var(--scale-600) 0 var(--scale-100);     /* right 24 · left 4 */
}
.cf-top-bar.navigation .cf-top-bar-row {
  justify-content: flex-start;                        /* Back button hugs the left */
}
.cf-top-bar.navigation .cf-top-bar-row > .cf-btn {
  gap: var(--scale-200);                              /* 8 between caret icon and label */
}
/* Resource counter is a direct child of the bar (not the padded row) so it
   stays centered on the FULL top-bar width, unaffected by the asymmetric
   8/24 padding. */
.cf-top-bar.navigation > .cf-resource-counter {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}

/* ── Top bar · Type=Nav bar ───────────────────────────────────────────────
   Secondary-screen chrome. 44 tall · centered title · leading/trailing button
   slots (icon-only or text). Surface/Page background, hairline divider at the
   bottom instead of an elevation shadow. ───────────────────────────────── */
.cf-top-bar.nav-bar {
  background: var(--surface-page);
  box-shadow: none;
  border-bottom: var(--border-w-sm) solid var(--border-subtle);
  padding: 0 var(--scale-200);                        /* px-8 — keeps icon buttons hugging the edges */
}
.cf-top-bar.nav-bar .cf-top-bar-row {
  height: var(--scale-1100);                          /* 44 */
  justify-content: space-between;
}
.cf-top-bar-title {                                   /* Absolutely-centered title */
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--font-family-text); font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height);
  color: var(--text-headings);
  white-space: nowrap;
  pointer-events: none;                               /* let button slots stay clickable underneath */
}

/* ── Top bar · Type=Large title ───────────────────────────────────────────
   Profile / section header. Background image spans the FULL component height
   (132 = nav row 44 + hero 88), with the nav row sitting transparent on top.
   No divider between nav row and hero — the image is the visual continuity. */
.cf-top-bar.large-title {
  position: relative;                                 /* anchor for the full-bleed image */
  background: transparent;                            /* image is the surface */
  box-shadow: none;
  padding: 0;
  border-bottom: var(--border-w-sm) solid var(--border-subtle);  /* matches Figma `Divider#483:0` default = true */
}

/* `.no-divider` — opt-out of the hairline bottom border. Works on both
   `Type=Nav bar` and `Type=Large title`. Mirrors the Figma `Divider` boolean. */
.cf-top-bar.nav-bar.no-divider,
.cf-top-bar.large-title.no-divider { border-bottom: 0; }

/* `.no-avatar` — hide the Avatar in the Large-title hero (the name takes the
   full row). Mirrors the Figma `Avatar` boolean (default true). */
.cf-top-bar.large-title.no-avatar .cf-top-bar-hero-content > .cf-avatar { display: none; }

/* `.no-background` — hide the hero image and swap the whole component to
   `Surface/Page` (Neutral/white). Mirrors the Figma `Background` boolean
   (default true). Name + icon colors stay readable against white. */
.cf-top-bar.large-title.no-background                       { background: var(--surface-page); }
.cf-top-bar.large-title.no-background .cf-top-bar-hero-bg   { display: none; }
.cf-top-bar.large-title .cf-top-bar-hero-bg {        /* image fills the whole variant */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.cf-top-bar.large-title .cf-top-bar-row {
  position: relative;                                 /* stacks above the image */
  z-index: 1;
  height: var(--scale-1100);                          /* 44 */
  padding: 0 var(--scale-200);                        /* px-8 — icon buttons hug edges */
  justify-content: space-between;
  background: transparent;                            /* shows the image through */
  border-bottom: 0;                                   /* divider off */
}
.cf-top-bar-hero {
  position: relative;                                 /* stacks above the image */
  z-index: 1;
  height: var(--scale-2200);                          /* 88 */
}
.cf-top-bar-hero-content {
  height: 100%;
  padding: 0 var(--scale-600);                        /* px-24 — content is more inset than buttons */
  display: flex; align-items: center;
  gap: var(--scale-400);                              /* 16 between avatar and name */
}
.cf-top-bar-hero-name {
  margin: 0;
  color: var(--text-headings);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─ Top sheet ───────────────────────────────────────────────────────────── */
/* Figma page 424:1956, symbol 424:2814. Top-anchored white surface with rounded BOTTOM
   corners and a drag handle below the slot — swipe-up indicator. Casts Elevation/sm. */
.cf-top-sheet {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--scale-300);                          /* 12 between slot and handle */
  width: 393px;                                   /* mobile-frame — off-Scale by intent */
  background: var(--surface-page);
  padding: var(--scale-600) var(--scale-600) var(--scale-300); /* pt-24 px-24 pb-12 */
  /* Top edge stays flush; bottom corners are rounded for the swipe-down affordance */
  border-top-left-radius:  var(--radius-none);
  border-top-right-radius: var(--radius-none);
  border-bottom-left-radius:  var(--radius-xlg); /* 16 */
  border-bottom-right-radius: var(--radius-xlg);
  box-shadow: var(--shadow-sm);                   /* Elevation/sm */
  transition: padding-top  200ms ease,
              padding-bottom 200ms ease,
              gap 200ms ease;
}
.cf-top-sheet-slot {
  width: 100%;
  min-height: var(--scale-500);                   /* 20 — published slot height */
  overflow: hidden;
  transition: min-height 200ms ease,
              opacity    150ms ease,
              height     200ms ease;
}
/* Drag handle — identical to Bottom sheet's handle (same 48×4 pill, Border/Default).
   On Top sheet it sits below the slot as a swipe-up indicator. */
.cf-top-sheet-handle,
.cf-bottom-sheet-handle {
  width: var(--scale-1200); height: var(--scale-100);  /* 48 × 4 */
  border-radius: var(--radius-round);
  background: var(--border-default);
  flex-shrink: 0;
  border: 0; padding: 0;                          /* reset for <button> usage */
}
.cf-top-sheet-handle[data-top-sheet-toggle] {
  cursor: pointer;
}
.cf-top-sheet-handle[data-top-sheet-toggle]:focus-visible {
  outline: var(--border-w-md) solid var(--border-focus);
  outline-offset: var(--scale-50);
}

/* Swiped-up / collapsed state — only the handle is visible.
   Total height: pt-12 + handle-4 + pb-12 = 28 = Scale/700. Slot fades + collapses. */
.cf-top-sheet.is-collapsed {
  padding-top:    var(--scale-300);               /* 12 */
  padding-bottom: var(--scale-300);               /* 12 */
  gap: var(--scale-0);
}
.cf-top-sheet.is-collapsed .cf-top-sheet-slot {
  min-height: var(--scale-0);
  height: var(--scale-0);
  opacity: 0;
}

/* ─ Popover ─────────────────────────────────────────────────────────────── */
/* Figma page 337:5720, symbol 417:470. Tooltip-style overlay: H7 header + close + slot + tail. */
.cf-popover {
  position: relative;
  width: 240px;                                   /* Figma published width — off-Scale by intent */
  background: var(--surface-page);
  border-radius: var(--radius-xlg);               /* 16 */
  padding: var(--scale-200) var(--scale-400) var(--scale-600); /* pt-8 px-16 pb-24 */
  display: flex; flex-direction: column;
  gap: var(--scale-200);                          /* 8 between header row and slot (Figma update) */
  /* drop-shadow (not box-shadow) so the tail pseudo-element is included in the shadow */
  filter: drop-shadow(0 var(--scale-100) var(--scale-50) var(--alpha-black-16))
          drop-shadow(0 var(--scale-25)  var(--scale-25) var(--alpha-black-25));
}
.cf-popover-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  min-height: var(--scale-1000);                  /* 40 — row stays this tall even when closeButton is off */
  font-family: var(--font-family-headings); font-weight: var(--font-weight-bold);
  font-size: var(--text-h7-size); line-height: var(--text-h7-line-height);
  letter-spacing: var(--text-h7-letter-spacing);
  color: var(--text-headings);
}
/* Popover close — visual styling comes from `.cf-btn neutral icon-only`.
   Only `flex-shrink: 0` is layout-specific, so the X never squeezes when
   the title text grows long. */
.cf-popover-close { flex-shrink: 0; }
.cf-popover-slot {
  width: 100%;
  padding: var(--scale-200) 0;                    /* py-8 inside the slot */
}
/* Slot-only popover (no header, no close button): collapse the bottom padding so the
   popover hugs the slot at the bottom. Top padding stays — the slot's own py-8 plus the
   popover's pt-Scale/200 gives a comfortable 16 above content. The pb-Scale/600 (24) that
   normally balances the header's height is no longer needed without a header. */
.cf-popover:not(:has(.cf-popover-header)) {
  padding-bottom: 0;
}
/* Tail — points down by default (popover positioned above its trigger). */
.cf-popover-tail {
  position: absolute;
  left: var(--scale-1100);                        /* 44 from the left edge — matches Figma sample */
  bottom: calc(-1 * var(--scale-300));            /* tail hangs 12 below the popover */
  width: 0; height: 0;
  border-left:  var(--scale-300) solid transparent;
  border-right: var(--scale-300) solid transparent;
  border-top:   var(--scale-300) solid var(--surface-page);
}
/* Variant: tail centered horizontally (use .cf-popover-tail.center) */
.cf-popover-tail.center { left: 50%; transform: translateX(-50%); }

/* ─ Hint ────────────────────────────────────────────────────────────────── */
/* Figma page 420:2353, symbol 420:2466. Translucent floating instruction pill
   (e.g. "Tap the map to drop a pin"). Sits over a content surface. */
.cf-hint {
  display: inline-flex; align-items: center;
  min-height: var(--scale-1000);                  /* 40 */
  padding: var(--scale-200) var(--scale-600);     /* py-8 px-24 */
  background: var(--surface-hint-bg);             /* Alpha/Black/64 */
  border-radius: var(--radius-lg);                /* 8 */
  color: var(--text-on-color);                    /* white text on the dark pill */
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height);
  /* shrinks to fit content; consumer can override width to stretch */
}

/* ─ Chip ────────────────────────────────────────────────────────────────── */
/* Figma page 438:3870 · set 443:2. Pill-shaped toggleable label with optional
   iconLeft / iconRight. 36 variants = 3 sizes × 4 states (Default / Hover /
   Selected / Disabled), branched across icon only (no / yes) and With checkbox (no / yes).
   Any chip — icon-only OR labelled — can carry an optional counter Indicator at its
   top-right corner; the With-checkbox chip carries a trailing Checkbox that follows
   the chip's selected state. */
.cf-chip {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;                             /* anchor for an optional counter Indicator overlay */
  gap: var(--scale-100);                          /* 4 — between icons and label */
  /* md is the default size */
  height: var(--scale-700);                       /* 28 */
  padding: 0 var(--scale-200);                    /* px-8 */
  background: var(--surface-page);
  border: var(--border-w-sm) solid var(--border-default);
  border-radius: var(--radius-round);             /* pill */
  color: var(--text-body);
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 80ms ease, border-color 80ms ease, color 80ms ease;
}
.cf-chip.lg {
  height: var(--scale-900);                       /* 36 */
  padding: 0 var(--scale-300);                    /* px-12 */
  font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height);
}
.cf-chip.sm {
  height: var(--scale-600);                       /* 24 */
  /* px keeps Scale/200 */
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
}
/* Icon sizing — lg = 20, md/sm = 16. All < 24, so the icon-weight safety net auto-bolds them. */
.cf-chip .ph    { font-size: var(--scale-400); }  /* 16 — md / sm */
.cf-chip.lg .ph { font-size: var(--scale-500); }  /* 20 — lg */

/* Icon-only chip — square-ish filter chip (width = height + Scale/100), icon centered. */
.cf-chip.icon-only {
  width: var(--scale-800);                          /* 32 — md */
  padding: 0; gap: 0;
}
.cf-chip.icon-only.lg { width: var(--scale-1000); } /* 40 */
.cf-chip.icon-only.sm { width: var(--scale-700); }  /* 28 */

/* Counter Indicator overlay — optional on ANY chip (icon-only or labelled). Hugs
   the top-right corner, overflowing; anchored to the chip's right edge so it sits
   the same regardless of chip width. */
.cf-chip > .cf-indicator {
  position: absolute; top: 0; right: 0;
  transform: translate(65%, -25%);
}
.cf-chip.is-disabled > .cf-indicator,
.cf-chip[disabled] > .cf-indicator,
.cf-chip[aria-disabled="true"] > .cf-indicator {
  background: var(--surface-action-disabled);       /* badge fades with the chip */
}

/* Checkbox chip (With checkbox=yes) — label + a trailing Checkbox that mirrors the chip
   state. lg chips embed the md (24) checkbox; md/sm chips embed the sm (16) one. */
.cf-chip:has(.cf-checkbox)    { gap: var(--scale-200); }  /* 8 — md / sm */
.cf-chip.lg:has(.cf-checkbox) { gap: var(--scale-300); }  /* 12 — lg */

/* States (v2 design) */
.cf-chip.is-hover,
.cf-chip:hover:not(.is-disabled):not(.is-selected):not([disabled]):not([aria-pressed="true"]) {
  background: var(--surface-action-outlined-hover);   /* Neutral/100 — same neutral tint as Outlined-button hover */
  border-color: var(--border-default);
  color: var(--text-body);
}
.cf-chip.is-selected,
.cf-chip[aria-pressed="true"] {
  background: var(--surface-action-ghost-hover);     /* peach */
  border-color: var(--text-action);                  /* orange border (Figma names the token Text/Action — same #fe6930) */
  color: var(--icon-action);                         /* orange text (Figma names the token Icon/Action) */
}
.cf-chip.is-disabled,
.cf-chip[disabled],
.cf-chip[aria-disabled="true"] {
  background: var(--surface-background);
  border-color: var(--border-subtle);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Embedded Checkbox follows the chip's interaction state, so a live hover restyles
   the box too (not just the chip). Gated like the chip's own hover. */
.cf-chip.is-hover .cf-checkbox:not(.selected),
.cf-chip:hover:not(.is-disabled):not(.is-selected):not([disabled]):not([aria-pressed="true"]):not([aria-disabled="true"]) .cf-checkbox:not(.selected) {
  background: var(--surface-action-ghost-hover);
  border-color: var(--border-action);
}
.cf-chip.is-disabled .cf-checkbox,
.cf-chip[disabled] .cf-checkbox,
.cf-chip[aria-disabled="true"] .cf-checkbox {
  background: var(--surface-disabled);
  border-color: var(--border-disabled);
}

/* ─ Tag ─────────────────────────────────────────────────────────────────── */
/* Figma page 469:350 (section is empty in Figma — design derived from CityFox tokens).
   Read-only status / category label. Three sizes, five semantic color variants.
   Same heights as Chip but no interactive states. */
.cf-tag {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--scale-100);                          /* 4 — icon ↔ label */
  /* md default */
  height: var(--scale-700);                       /* 28 */
  padding: 0 var(--scale-200);                    /* px-8 */
  background: var(--surface-page);
  border: var(--border-w-sm) solid var(--border-default);
  border-radius: var(--radius-round);             /* pill */
  color: var(--text-body);
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
  white-space: nowrap;
  cursor: default;                                /* read-only — not interactive */
}
.cf-tag.lg {
  height: var(--scale-900);                       /* 36 */
  padding: 0 var(--scale-300);                    /* px-12 */
  font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height);
}
.cf-tag.sm {
  height: var(--scale-600);                       /* 24 */
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
}
/* Icon sizing — lg = 20, md/sm = 16. All < 24 → Phosphor Bold via safety net. */
.cf-tag .ph    { font-size: var(--scale-400); }   /* 16 — md / sm */
.cf-tag.lg .ph { font-size: var(--scale-500); }   /* 20 — lg */

/* Color variants — semantic tokens straight through */
.cf-tag.information { background: var(--surface-information); border-color: var(--border-information); color: var(--text-information); }
.cf-tag.success     { background: var(--surface-success);     border-color: var(--border-success);     color: var(--text-success); }
.cf-tag.warning     { background: var(--surface-warning);     border-color: var(--border-warning);     color: var(--text-warning); }
.cf-tag.error       { background: var(--surface-error);       border-color: var(--border-error);       color: var(--text-error); }
.cf-tag.action      { background: var(--surface-action-background); border-color: var(--border-action); color: var(--text-action); }

/* Curated / Recommended — special status pills. Smaller (h-20), no border,
   solid accent fill, white icon + label. Curated = golden (Icon/Warning) with
   a shooting-star; Recommended = Primary/400 (Icon/Start Point) with a thumbs-up. */
.cf-tag.curated,
.cf-tag.recommended {
  height: var(--scale-500);                          /* 20 */
  padding: 0 var(--scale-200);                       /* px-8 */
  gap: var(--scale-100);                             /* 4 */
  border: 0;
  color: var(--text-on-color);                       /* white */
  font-size: var(--text-body-xsm-size);
  line-height: var(--text-body-xsm-line-height);
}
.cf-tag.curated     { background: var(--icon-warning); }       /* Warning/default (golden) */
.cf-tag.recommended { background: var(--icon-start-point); }   /* Primary/400 (orange) */
.cf-tag.curated .ph,
.cf-tag.recommended .ph { color: var(--icon-on-color); }       /* white icon */

/* ─ Tag+gems ──────────────────────────────────────────────────────────────
   Figma page 469:350 · component 487:4528. Compound 72×56 marker — gems icon
   (right-top) with a small "Nx" action-coloured Tag badge overlapping at the
   bottom-left. Used for resource-multiplier callouts. */
.cf-tag-gems {
  position: relative;
  display: inline-block;
  width: var(--scale-1800);                          /* 72 */
  height: var(--scale-1400);                         /* 56 */
  flex-shrink: 0;
}
.cf-tag-gems-icon {
  position: absolute;
  left: var(--scale-400);                            /* 16 */
  top: var(--scale-50);                              /* 2 */
  width: var(--scale-1400); height: var(--scale-1400);   /* 56 × 56 */
  pointer-events: none; user-select: none;
}
.cf-tag-gems .cf-tag {
  position: absolute;
  left: 0;
  top: 22px;                                          /* off-Scale by spec — matches Figma 487:4528 */
}

/* ─ Indicator ──────────────────────────────────────────────────────────────
   Figma page 469:350 (Tag set 473:32) · dot 619:2315 · counter 618:2047.
   Notification markers that overlay an icon / avatar. Two members:
     • dot     — 8-px solid Surface/Action circle (presence / unread dot)
     • counter — pill (height Scale/400, min-width Scale/400) holding a count in
       Body xsm white text; grows with the number, stays a circle for one digit.
   Fully rounded (Border-radius/round). Use `.cf-indicator-anchor` to pin one to
   the top-right of any host element. */
.cf-indicator {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--scale-200); height: var(--scale-200);  /* 8 — dot */
  background: var(--surface-action);                   /* Primary/default — orange */
  border-radius: var(--radius-round);                  /* fully round */
  flex-shrink: 0;
}
.cf-indicator.counter {
  width: auto; height: var(--scale-400);               /* 16 */
  min-width: var(--scale-400);                         /* 16 — single digit stays circular */
  padding: 0 var(--scale-100);                         /* 0 / 4 */
  box-sizing: border-box;
  color: var(--text-on-color);                         /* white */
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);  /* Body xsm 12/16 */
}
/* Overlay helper — host is position:relative; the indicator pins to its top-right corner. */
.cf-indicator-anchor { position: relative; display: inline-flex; }
.cf-indicator-anchor > .cf-indicator {
  position: absolute;
  top: 0; right: 0;
  transform: translate(35%, -35%);
}

/* ─ Separator ─────────────────────────────────────────────────────────────
   Figma page 457:2274 · set 463:73. Section-header row — labels groups of
   content. Four Type variants: `Default` (uppercase microcopy on Surface/Information),
   `Group title` (Body md-semibold heading, transparent — add `.group-title`),
   `Transparent` (invisible 32-px spacer), `Info` (two-line purple message).
   `Full width` axis: the default carries a 24-px gutter (Figma Full width=yes);
   add `.flush` for Full width=no (zero gutter — for use inside an already-padded
   container). Optional trailing counter Indicator + "See all" ghost button
   cluster on the right (opt in via markup). */
.cf-separator {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  min-height: var(--scale-800);                       /* 32 — Default height */
  padding-left:  var(--scale-600);                    /* 24 — Scale/600 */
  padding-right: var(--scale-300);                    /* 12 — Scale/300 (tighter; buttons hug the edge) */
  gap: var(--scale-200);
  background: var(--surface-information);             /* Secondary/50 — light purple */
}
.cf-separator-label {                                 /* Type=Default · uppercase microcopy */
  flex: 1 1 auto;
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
  color: var(--text-information-subtle);              /* Secondary/300 — quieter purple */
  text-transform: uppercase;
  margin: 0;
}
/* Type=Group title — larger heading, transparent, no band */
.cf-separator.group-title {
  background: var(--surface-transparent);             /* no band */
  min-height: var(--scale-1100);                      /* 44 */
  padding-top:    var(--scale-300);                   /* 12 */
  padding-bottom: var(--scale-300);                   /* 12 */
  padding-right:  var(--scale-600);                   /* 24 — both gutters equal (vs Default's 12) */
}
.cf-separator-group-title {                           /* Body md-semibold · Text/Headings */
  flex: 1 1 auto;
  font-family: var(--font-family-text); font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height);
  color: var(--text-headings);
  margin: 0;
}
/* Full width=no — drop the gutter so content sits flush to the row edges */
.cf-separator.flush { padding-left: 0; padding-right: 0; }
.cf-separator.transparent {
  background: var(--surface-transparent);             /* Alpha/Black/0 — invisible spacer */
}
.cf-separator.info {
  flex-direction: column;
  align-items: stretch; justify-content: center;
  min-height: var(--scale-1800);                      /* 72 */
  padding-top:    var(--scale-400);                   /* 16 */
  padding-bottom: var(--scale-400);                   /* 16 */
  /* horizontal padding inherited from `.cf-separator`: left Scale/600, right Scale/300 */
  gap: var(--scale-200);                              /* 8 between title and info */
}
.cf-separator-title,
.cf-separator-info {
  font-family: var(--font-family-text);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
  color: var(--text-information);                     /* Secondary/default — solid purple */
  margin: 0;
}
.cf-separator-title { font-weight: var(--font-weight-semibold); }
.cf-separator-info  { font-weight: var(--font-weight-regular); }

/* ─ Heraldic progress tracker ─────────────────────────────────────────────
   Figma page 457:4719 · set 457:4752. Circular progress ring around a 32-px
   (Scale/800) coat-of-arms icon. 5 progress states (0/25/50/75/100) driven
   by the `--progress` custom property — any integer 0–100 works. The icon
   slot is a plain `<img>` so any coat-of-arms PNG in
   `frontend/i/profile/coats/` plugs in. */
.cf-heraldic-tracker {
  --progress: 0;
  position: relative; display: inline-block;
  width: var(--scale-1400);                           /* 56 */
  height: var(--scale-1400);
  flex-shrink: 0;
}
.cf-tracker-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);                          /* start the arc at 12 o'clock */
}
.cf-tracker-ring circle { fill: none; stroke-width: 4; }
.cf-tracker-ring circle:nth-child(1) { stroke: var(--border-subtle); }   /* track */
.cf-tracker-ring circle:nth-child(2) {                                   /* progress arc */
  stroke: var(--icon-success);
  stroke-linecap: round;
  /* circumference = 2π·24 ≈ 150.796  (4-px stroke INSIDE a 56-px box puts the path at r=24) */
  stroke-dasharray: 150.796;
  stroke-dashoffset: calc(150.796 * (100 - var(--progress)) / 100);
}
.cf-heraldic-coat {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--scale-800);                            /* 32 — lg coat */
  height: var(--scale-800);
  object-fit: contain;
  pointer-events: none;
}
/* md size — 40×40 container, 24-px coat, 2-px ring. Uses its own viewBox (0 0 40 40,
   circles r=18) so the stroke renders at an honest 2 px (Scale/50) and the dash-array
   is recomputed for the smaller radius. */
.cf-heraldic-tracker.md {
  width: var(--scale-1000);                           /* 40 */
  height: var(--scale-1000);
}
.cf-heraldic-tracker.md .cf-heraldic-coat {
  width: var(--scale-600);                            /* 24 */
  height: var(--scale-600);
}
.cf-heraldic-tracker.md .cf-tracker-ring circle { stroke-width: var(--scale-50); }   /* 2 */
.cf-heraldic-tracker.md .cf-tracker-ring circle:nth-child(2) {
  /* circumference = 2π·18 ≈ 113.097 */
  stroke-dasharray: 113.097;
  stroke-dashoffset: calc(113.097 * (100 - var(--progress)) / 100);
}

/* Unknown state — the goal isn't revealed yet: empty gray ring + a gray
   placeholder shield with a "?" instead of a coat-of-arms. */
.cf-heraldic-tracker.unknown .cf-tracker-ring circle:nth-child(2) { stroke: transparent; }  /* no progress shown */
.cf-heraldic-unknown {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + var(--scale-50)));   /* nudged 2 px down to sit in the shield's optical centre */
  pointer-events: none;
}
.cf-heraldic-tracker.lg .cf-heraldic-unknown { width: var(--scale-700); height: var(--scale-700); }  /* 28 */
.cf-heraldic-tracker.md .cf-heraldic-unknown { width: var(--scale-500); height: var(--scale-500); }  /* 20 */
.cf-heraldic-unknown img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cf-heraldic-q {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-family-text); font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-md-size); line-height: 1;     /* 16 — Body md semibold */
  color: var(--text-label-light);                          /* Neutral/400 */
}

/* ─ Progress tracker route ────────────────────────────────────────────────
   Figma page 457:4719 · set 483:2590. Compact 40×40 circular tracker for
   route-completion progress. Drive via `--progress` (any integer 0–100).
   At completion, the ring is fully green (because `--progress: 100`) and
   the consumer swaps the icon glyph from `ph-path` → `ph-check`. The icon
   colour stays purple (`Icon/Information`) in both states — only the ring
   border changes. */
.cf-route-tracker {
  --progress: 0;
  position: relative; display: inline-block;
  width: var(--scale-1000);                           /* 40 */
  height: var(--scale-1000);
  flex-shrink: 0;
}
.cf-route-tracker .cf-tracker-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);                          /* arc starts at 12 o'clock */
}
.cf-route-tracker .cf-tracker-ring circle { fill: none; stroke-width: var(--scale-50); /* 2 — Border-width/md */ }
.cf-route-tracker .cf-tracker-ring circle.cf-track {                       /* gray track ring */
  stroke: var(--border-subtle);
}
.cf-route-tracker .cf-tracker-ring circle.cf-progress {                    /* green progress arc */
  stroke: var(--icon-success);
  stroke-linecap: round;
  /* circumference = 2π·19 ≈ 119.381  (2-px stroke centred on a 40-px box → path at r=19) */
  stroke-dasharray: 119.381;
  stroke-dashoffset: calc(119.381 * (100 - var(--progress)) / 100);
}
.cf-route-icon {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--scale-400);                        /* 16 — matches Figma icon size */
  line-height: 1;
  color: var(--icon-information);                     /* Secondary/default — purple glyph (route + check) */
  z-index: 1;
  pointer-events: none;
}

/* ─ Goal progress tracker ─────────────────────────────────────────────────
   Figma page 457:4719 · set 475:4678. Profile-screen achievement marker.
   Two sizes × four types:
     LG (94×94, no label): Current / Locked-progress / Unlocked / Locked
     MD (64 shield + optional label): Locked-progress / Unlocked / Locked
   Structure: `.cf-goal-head` is the positioning wrapper holding the heraldic
   SHIELD image (`.cf-goal-bg`) plus an overlay — either a Heraldic progress
   tracker (Current / Locked-progress) or a larger coat-of-arms (Unlocked /
   Locked). MD adds an optional `.cf-chip.sm` label below (toggle by including
   or omitting it). Locked variants apply `filter: grayscale(1)` to the coat. */
.cf-goal-tracker {
  display: inline-flex; flex-direction: column;
  align-items: center;
  gap: var(--scale-100);                              /* 4 — between shield head and label */
  flex-shrink: 0;
}
.cf-goal-head { position: relative; }                  /* positioning context for shield + overlay */
.cf-goal-tracker.lg .cf-goal-head { width: 94px; height: 94px; }       /* off-Scale by spec */
.cf-goal-tracker.md .cf-goal-head { width: var(--scale-1600); height: var(--scale-1600); }  /* 64 */

.cf-goal-bg {                                            /* full heraldic shield image */
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; user-select: none;
}
.cf-goal-tracker.lg .cf-goal-bg { width: 86px; height: 86px; }              /* off-Scale */
.cf-goal-tracker.md .cf-goal-bg { width: var(--scale-1600); height: var(--scale-1600); }  /* 64 — fills */

/* Overlay — coat (Unlocked / Locked) or Heraldic tracker (Current / Locked-progress).
   Absolutely positioned in the head, centered horizontally with a top inset.
   The shield's visual mass is in the upper portion, so the overlay sits above
   geometric centre to read as optically centered inside the shield. */
.cf-goal-head .cf-goal-coat,
.cf-goal-head .cf-heraldic-tracker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.cf-goal-tracker.lg .cf-goal-coat,
.cf-goal-tracker.lg .cf-heraldic-tracker { top: var(--scale-400); }   /* 16 — Scale/400 */
.cf-goal-tracker.md .cf-goal-coat,
.cf-goal-tracker.md .cf-heraldic-tracker { top: var(--scale-300); }   /* 12 — Scale/300 */

.cf-goal-coat {
  object-fit: contain;
  pointer-events: none;
}
.cf-goal-tracker.lg .cf-goal-coat { width: var(--scale-1200); height: var(--scale-1200); }  /* 48 */
.cf-goal-tracker.md .cf-goal-coat { width: var(--scale-800);  height: var(--scale-800); }   /* 32 */

/* Locked states — coat fades to grayscale. The progress ring is NOT grayed:
   the green progress indicator (Icon/Success) always shows actual progress,
   even on a locked shield. Only the coat reads as inactive. */
.cf-goal-tracker.locked          .cf-goal-coat,
.cf-goal-tracker.locked          .cf-heraldic-coat,
.cf-goal-tracker.locked-progress .cf-heraldic-coat {
  filter: grayscale(1);
}

/* ─ Card ──────────────────────────────────────────────────────────────────
   Figma page 456:1790 · set 462:116. Composable content tile. Three types:
     small    — 173-wide quarter card for headline stats (steps, calories…)
     goal     — wide tile pairing a Heraldic progress tracker with a city goal
     activity — route activity card; add `.curated`/`.recommended` for peach surface + photo
   Common base: `Surface/Background`, `Border-radius/lg`, 16-px (`Scale/400`)
   padding, 16-px gap between rows. */
.cf-card {
  display: flex; flex-direction: column;
  gap: var(--scale-400);                              /* 16 */
  padding: var(--scale-400);                          /* 16 */
  background: var(--surface-background);
  border-radius: var(--radius-lg);                    /* 8 */
  box-sizing: border-box;
  font-family: var(--font-family-text);
  color: var(--text-body);
}

/* ─── small (quarter-screen stat) ─── */
.cf-card.small {
  width: 173px;                                       /* off-Scale by spec (published mobile-frame width) */
}
.cf-card-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--scale-200);
  margin-top: auto;                                   /* bottom row floats to the bottom of the card — keeps the figure aligned across cards even when labels wrap differently */
}
.cf-card-row.top {
  align-items: flex-start;
  margin-top: 0;                                      /* top row stays at the top */
}
.cf-card-label {                                      /* small header text — "Steps walked" */
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
  color: var(--text-body);
  margin: 0;
}
.cf-card-caret {                                       /* small circular peach button on the small card */
  width: var(--scale-400); height: var(--scale-400);   /* 16×16 */
  border-radius: var(--radius-round);
  background: var(--surface-action-background);
  color: var(--icon-action);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer; flex-shrink: 0;
}
.cf-card-caret .ph { font-size: var(--scale-300); line-height: 1; }   /* 12 — bolded via safety net */
.cf-card-figure { display: inline-flex; align-items: center; gap: var(--scale-200); }
.cf-card-figure .ph {
  font-size: var(--scale-600);                        /* 24 — at the Bold/Regular boundary */
  color: var(--icon-information);                     /* Secondary/default — purple stat glyph */
  line-height: 1;
}
.cf-card-big {                                         /* big stat number — 24-px Lexend Bold */
  font-family: var(--font-family-headings); font-weight: var(--font-weight-bold);
  font-size: var(--text-h5-size); line-height: var(--text-h5-line-height);
  color: var(--text-headings);
}
.cf-card-likes {                                       /* thumbs-up + count, bottom-right of small card */
  display: inline-flex; align-items: center; gap: var(--scale-100);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
  color: var(--text-body);
}
.cf-card-likes .ph { font-size: var(--scale-300); }    /* 12 */

/* ─── goal (heraldic + city) ─── */
.cf-card.goal {
  position: relative;                                 /* anchor for the absolute caret button */
  flex-direction: row;
  align-items: center;                                /* tracker + body vertically centered relative to each other */
  gap: var(--scale-400);
  width: 342px;                                       /* off-Scale by spec */
  /* padding is the base Scale/400 (16) all round */
}
.cf-card.goal > .cf-card-caret {                      /* caret pinned top-right, independent of the title */
  position: absolute;
  top: var(--scale-400);                              /* 16 */
  right: var(--scale-400);                            /* 16 */
}
.cf-card-body {
  display: flex; flex-direction: column;
  gap: var(--scale-100);                             /* 4 — eyebrow → title */
  flex: 1; min-width: 0;
  padding-right: var(--scale-400);                   /* 16 — reserve the caret column so a long title truncates before it */
}

/* ─── goal · Set goal view ─── CTA card: unknown tracker + heading + description + primary button */
.cf-card.goal.set-goal {
  align-items: flex-start;                            /* top-align tracker with the taller text block */
}
.cf-card-setgoal-body {
  display: flex; flex-direction: column;
  gap: var(--scale-300);                             /* 12 — text block → button */
  flex: 1; min-width: 0;
  align-items: flex-end;                             /* "Set goal" button right-aligned */
}
.cf-card-setgoal-text {
  display: flex; flex-direction: column;
  gap: var(--scale-200);                             /* 8 — heading → description (Figma 7) */
  width: 100%;
}
.cf-card-setgoal-desc {
  margin: 0;
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
  color: var(--text-body);
}

/* Title toggle — when the eyebrow is omitted the body holds just the title, which
   the goal card's `align-items: center` then lands on the tracker's centre line. */
.cf-card-eyebrow {                                     /* small label above title */
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
  color: var(--text-body);
  margin: 0;
}
.cf-card-title {                                       /* city name in goal / route name in activity — H7 mobile (Lexend Bold 16/20) */
  font-family: var(--font-family-headings); font-weight: var(--font-weight-bold);
  font-size: var(--text-h7-size);                     /* 16 */
  line-height: var(--text-h7-line-height);            /* 20 */
  letter-spacing: var(--text-h7-letter-spacing);
  color: var(--text-headings);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-card.activity .cf-card-title,
.cf-card.shop .cf-card-title {                         /* Activity / Shop titles can wrap to 2 lines max with ellipsis */
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── activity (route — Custom by default; .curated / .recommended add peach + photo) ─── */
.cf-card.activity {
  width: 342px;                                       /* off-Scale by spec */
}
.cf-card.activity.curated,
.cf-card.activity.recommended {
  background: var(--surface-action-background);      /* Primary/50 peach */
}
.cf-card.activity .cf-card-row.top { gap: var(--scale-400); }   /* 16 between route tracker and name block */

/* Header (Frame 45) — stacks the top row (date·city + status tag) above the tracker row */
.cf-card-header {
  display: flex; flex-direction: column;
  gap: var(--scale-200);                             /* 8 — top row → tracker row */
}
.cf-card-toprow {                                     /* date·city left, status tag right */
  display: flex; flex-direction: row;
  align-items: center; justify-content: space-between;
  gap: var(--scale-400);                             /* 16 */
}
.cf-card-meta { display: flex; flex-direction: column; gap: var(--scale-100); flex: 1; min-width: 0; }
.cf-card-subtitle {                                    /* date · city */
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
  color: var(--text-body);
  margin: 0;
}
.cf-card-progress {                                    /* walked-progress subtitle under the route name — green */
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
  color: var(--text-success);                         /* Text/Success */
  margin: 0;
}
.cf-card-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--scale-500);                              /* 20 between stat columns */
}
.cf-card-stat {
  display: flex; flex-direction: column;
  gap: var(--scale-50);
  justify-content: space-between;                     /* label top, value bottom — values bottom-align across columns */
}
.cf-card-stat-label {
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
  color: var(--text-body);
}
.cf-card-stat-value {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height);
  color: var(--text-body);
}
.cf-card-stat-unit {                                   /* small unit (e.g. "km") inline next to a number — body xsm, baseline-aligned with the number */
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
  color: var(--text-body);
}
.cf-card-stat-value.small {                            /* whole value in body xsm — Loop "yes" / "no" */
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
}
.cf-card-stat-value.with-icon {
  display: inline-flex; align-items: center; gap: var(--scale-100);
}
.cf-card-stat-value.with-icon img {                    /* gem / coin asset, off-Scale by spec */
  width: var(--scale-500); height: var(--scale-500);   /* 20 */
  object-fit: contain;
}

/* ─── activity · curated / recommended · picture block ─── */
.cf-card-picture {
  position: relative;
  height: 160px;                                       /* off-Scale by spec */
  border-radius: var(--radius-lg);                     /* 8 */
  overflow: hidden;
  background: var(--surface-page);
  border: var(--border-w-sm) solid var(--border-subtle);
}
.cf-card-picture img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ─── shop (curated / recommended route offer — peach surface, description, 3 stats, picture, full-width CTA) ─── */
.cf-card.shop {
  width: 342px;                                        /* off-Scale by spec */
  background: var(--surface-action-background);        /* Primary/50 peach */
}
.cf-card.shop .cf-card-stats {
  grid-template-columns: repeat(3, 1fr);               /* Distance · Stops · Loop — no Price column */
}
.cf-card-desc {                                        /* route description under the title — Body sm */
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
  color: var(--text-body);
  margin: 0;
}
.cf-card-cta {                                          /* full-width primary CTA — base .cf-btn already matches (40 tall, gap 12, pad 0/16) */
  width: 100%;
}
.cf-card-cta img {                                      /* Gem / Coin asset trailing the price label */
  height: var(--scale-600);                            /* 24 */
  width: auto; flex-shrink: 0;
}

/* ─── achievement (Goal tracker + city label) ─── */
.cf-card.achievement {
  width: 109px;                                       /* off-Scale by spec — published mobile-frame size */
  align-items: center;
  gap: var(--scale-200);                              /* 8 — tighter than default 16 */
  text-align: center;
}
.cf-card-achievement-label {
  margin: 0;
  font-family: var(--font-family-text); font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
  color: var(--text-body);
}

/* ─ List item ─────────────────────────────────────────────────────────────
   Figma page 337:5705. Family of row components for vertical lists.
   Two members: `List item settings` (Title + Description + Edit/Save) and
   `List item orders` (Tag+gems + heading + date + download icon).
   Common base: 24-px horizontal padding, 12-px content padding, hairline
   `Border/Subtle` bottom divider (toggleable via `.with-divider`). */
.cf-list-item {
  display: flex; flex-direction: column;
  padding: 0 var(--scale-600);                        /* 24 horizontal */
  width: 100%;
  box-sizing: border-box;
}
.cf-list-item-content {
  display: flex; flex-direction: row;
  align-items: flex-start;
  gap: var(--scale-400);                              /* 16 between left meta and trailing slot */
  padding: var(--scale-300) 0;                        /* 12 vertical */
}
.cf-list-item.with-divider .cf-list-item-content {
  border-bottom: var(--border-w-sm) solid var(--border-subtle);
}

/* Left text column — title (body-sm) + description (body-sm Text/Body-light) */
.cf-list-item-meta {
  display: flex; flex-direction: column;
  gap: var(--scale-100);                              /* 4 */
  flex: 1; min-width: 0;
}
.cf-list-item-title {
  margin: 0;
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
  color: var(--text-body);
}
.cf-list-item-description {
  margin: 0;
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
  color: var(--text-body-light);                      /* Neutral/600 — lighter than title */
}
.cf-list-item-heading {                                /* H7 mobile Bold — used in Orders for "10 gems" */
  margin: 0;
  font-family: var(--font-family-headings); font-weight: var(--font-weight-bold);
  font-size: var(--text-h7-size); line-height: var(--text-h7-line-height);
  letter-spacing: var(--text-h7-letter-spacing);
  color: var(--text-headings);
}
.cf-list-item-date {                                   /* body-xsm meta — date / time. Width wide enough for any common date to wrap to 2 lines max. */
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
  color: var(--text-body);
  width: var(--scale-2000);                           /* 80 — fits "February 18, / 2026" and "April 5, / 2026" both on 2 lines */
}

/* Leading group — Tag+gems + meta (Orders) */
.cf-list-item-leading {
  display: flex; flex-direction: row;
  align-items: flex-start;                             /* top-align so the heading sits flush with the trailing date's first line */
  gap: var(--scale-400);                              /* 16 — tracker / icon next to text */
  flex: 1; min-width: 0;
}

/* Trailing group — clusters date + icon-button on the right (Orders). Vertically center-aligns
   the wrapped 2-line date with the 28-px button. */
.cf-list-item-trailing {
  display: flex; flex-direction: row;
  align-items: center;
  gap: var(--scale-400);                              /* 16 — tightened so the date column can be wider and stay 2 lines max */
  flex-shrink: 0;
}

/* `.with-action` — single-row variant: title on the left, Switch toggle on the right.
   Center-aligns the row content and lets the title take the available width. */
.cf-list-item.with-action .cf-list-item-content { align-items: center; }
.cf-list-item.with-action .cf-list-item-title    { flex: 1; min-width: 0; }

/* `.full-width` (Figma "Full width=yes") — drop the 24-px horizontal inset so the
   content and its hairline divider span edge-to-edge. Default keeps the inset. */
.cf-list-item.full-width { padding-left: 0; padding-right: 0; }

/* Stack — column for field + primary button (Settings Edit) */
.cf-list-item-stack {
  display: flex; flex-direction: column;
  gap: var(--scale-200);                              /* 8 */
  flex: 1; min-width: 0;
}

/* Edit-state inline mini "field group" — label + input + hint */
.cf-list-item-field {
  display: flex; flex-direction: column;
  gap: var(--scale-200);                              /* 8 — between label/input/hint rows */
}
.cf-list-item-field-label {
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);
  color: var(--text-body);
}
.cf-list-item-field-input {
  display: flex; align-items: center;
  height: var(--scale-1100);                          /* 44 — matches md Field height */
  padding: 0 var(--scale-300);                        /* 12 */
  border: var(--border-w-sm) solid var(--border-input-active);   /* Secondary/default purple — active state */
  border-radius: var(--radius-lg);                    /* 8 */
  background: var(--surface-page);
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height);
  color: var(--text-body);
}
.cf-list-item-field-hint {
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-xsm-size); line-height: var(--text-body-xsm-line-height);
  color: var(--text-label-light);                     /* Neutral/400 */
}

/* ─ Toast ─────────────────────────────────────────────────────────────────
   Figma page 571:1841 · set 587:2. Notification banner — 4 statuses
   (Info default / success / warning / error), each using its matching semantic
   colour set (Surface/Border/Icon/Text). Title + description toggle by
   include/omit; close button optional. Measurements 1:1 with Figma:
     root padding 8 / 8 / 8 / 16, gap 12, radius lg, 1-px border
     content frame padding 8 (vertical), gap 12
     icon 24, text-column gap 2, title H7, description Body sm
     close button 40×40 ghost icon-only (always Icon/Action orange). */
.cf-toast {
  display: flex; flex-direction: row;
  align-items: flex-start;
  gap: var(--scale-300);                              /* 12 */
  padding: var(--scale-200) var(--scale-200) var(--scale-200) var(--scale-400);  /* 8 8 8 16 */
  width: 360px;                                       /* off-Scale by spec — published toast width */
  background: var(--surface-information);             /* Info default */
  border: var(--border-w-sm) solid var(--border-information);
  border-radius: var(--radius-lg);                   /* 8 */
  box-shadow: var(--shadow-sm);                       /* Elevation/sm — 0 1 2 / Alpha-Black-16 */
  box-sizing: border-box;
}
.cf-toast-content {
  display: flex; flex-direction: row;
  align-items: flex-start;
  gap: var(--scale-300);                             /* 12 — icon → text */
  padding: var(--scale-200) 0;                       /* 8 vertical */
  flex: 1; min-width: 0;
}
.cf-toast-icon {
  font-size: var(--scale-600);                       /* 24 — at the Bold/Regular boundary → Regular */
  line-height: 1;
  flex-shrink: 0;
  color: var(--icon-information);
}
.cf-toast-text {
  display: flex; flex-direction: column;
  gap: var(--scale-50);                              /* 2 — title → description */
  flex: 1; min-width: 0;
}
.cf-toast-title {
  margin: 0;
  font-family: var(--font-family-headings); font-weight: var(--font-weight-bold);
  font-size: var(--text-h7-size); line-height: var(--text-h7-line-height);   /* H7 16/20 */
  letter-spacing: var(--text-h7-letter-spacing);
  color: var(--text-information);
}
.cf-toast-desc {
  margin: 0;
  font-family: var(--font-family-text); font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);  /* Body sm */
  color: var(--text-information);
}

/* Status colour sets — base is Info; these override surface / border / icon / text */
.cf-toast.success { background: var(--surface-success); border-color: var(--border-success); }
.cf-toast.success .cf-toast-icon  { color: var(--icon-success); }
.cf-toast.success .cf-toast-title,
.cf-toast.success .cf-toast-desc  { color: var(--text-success); }
.cf-toast.warning { background: var(--surface-warning); border-color: var(--border-warning); }
.cf-toast.warning .cf-toast-icon  { color: var(--icon-warning); }
.cf-toast.warning .cf-toast-title,
.cf-toast.warning .cf-toast-desc  { color: var(--text-warning); }
.cf-toast.error   { background: var(--surface-error);   border-color: var(--border-error); }
.cf-toast.error .cf-toast-icon    { color: var(--icon-error); }
.cf-toast.error .cf-toast-title,
.cf-toast.error .cf-toast-desc    { color: var(--text-error); }

/* ─ Modal ───────────────────────────────────────────────────────────────── */
.cf-modal-frame {
  position: relative;
  background: var(--surface-modal);
  border-radius: var(--radius-lg);
  padding: var(--scale-1200) var(--scale-600);
  display: grid; place-items: center;
  min-height: 280px; /* preview frame height — off-Scale, not part of the spec */
}
.cf-modal {
  width: 386px; max-width: 100%; /* Figma published spec — off-Scale by intent */
  background: var(--surface-page);
  border: var(--border-w-sm) solid var(--border-default);
  border-radius: var(--radius-xlg);
  overflow: hidden;
}
.cf-modal-head {
  position: relative;
  display: flex; gap: var(--scale-300);
  align-items: flex-start;                     /* Figma: items-start */
  padding: var(--scale-500) var(--scale-100) var(--scale-300) var(--scale-600);
}
.cf-modal-head .icon {                         /* Generic 32×32 slot — no chip styling */
  width: var(--scale-800); height: var(--scale-800);
  color: var(--icon-default);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.cf-modal-titles {                             /* Title block: column, gap 8, pt 4 */
  display: flex; flex-direction: column;
  gap: var(--scale-200);
  padding-top: var(--scale-100);
  flex: 1 0 0;
  min-width: 0;
}
.cf-modal-title { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold);
                  font-size: var(--text-h6-size); line-height: var(--text-h6-line-height);
                  color: var(--text-headings); margin: 0; }
.cf-modal-subline { color: var(--text-body); margin: 0; }
.cf-modal-close {
  /* Positioning only — visual styling comes from `.cf-btn neutral icon-only`
     (40×40 square, neutral icon, Neutral/100 hover). top=16 puts the icon
     center at y=36, matching the H6 title center. right=16 sets the gap from
     the icon's right edge to the modal edge. */
  position: absolute;
  top: var(--scale-400); right: var(--scale-400);
}
.cf-modal-content { padding: var(--scale-100) var(--scale-600) var(--scale-800); color: var(--text-body); }
.cf-modal-actions { display: flex; gap: var(--scale-300); padding: 0 var(--scale-600) var(--scale-600); }
.cf-modal-actions .cf-btn { flex: 1; }
.cf-modal-actions.vertical { flex-direction: column; }
.cf-modal-actions.vertical .cf-btn { width: 100%; flex: none; }

/* ─ Gated state ─────────────────────────────────────────────────────────── */
.gated-block {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--scale-400);
}
.gated-tile {
  border: var(--border-w-sm) dashed var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--scale-500);
  background: var(--surface-page);
  display: flex; flex-direction: column; gap: var(--scale-200);
}
.gated-tile .name { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold);
                    font-size: var(--text-h7-size); line-height: var(--text-h7-line-height);
                    color: var(--text-headings); }
.gated-tile .id   { font-family: var(--font-family-mono); font-size: var(--text-body-xsm-size);
                    color: var(--text-label); }

/* ─ Token tables ────────────────────────────────────────────────────────── */
.token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--scale-300);
}
.token-chip {
  display: flex; align-items: center; gap: var(--scale-300);
  padding: var(--scale-300);
  background: var(--surface-page);
  border: var(--border-w-sm) solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.token-swatch {
  width: var(--scale-1000); height: var(--scale-1000);
  border-radius: var(--radius-md);
  border: var(--border-w-sm) solid var(--border-subtle);
  flex-shrink: 0;
}
.token-info { display: flex; flex-direction: column; min-width: 0; }
.token-name { font-family: var(--font-family-mono); font-size: var(--text-body-xsm-size);
              color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.token-resolves { font-family: var(--font-family-mono); font-size: var(--text-body-xsm-size);  /* was 11 — pulled to 12 (Body xsm) */
                  color: var(--text-label); }

.scale-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--scale-300); }
.scale-tile {
  background: var(--surface-page);
  border: var(--border-w-sm) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--scale-300);
  display: flex; flex-direction: column; gap: var(--scale-200);
}
.scale-tile .bar {
  height: var(--scale-200);
  background: var(--surface-action);
  border-radius: var(--radius-sm);
}

.type-row {
  background: var(--surface-page);
  border: var(--border-w-sm) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--scale-400) var(--scale-500);
  margin-bottom: var(--scale-200);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--scale-500);
  align-items: center;
}
.type-row .meta-name { font-family: var(--font-family-mono); font-size: var(--text-body-xsm-size); color: var(--text-label); }
.type-row .meta-spec { font-family: var(--font-family-mono); font-size: var(--text-body-xsm-size);  /* was 11 — pulled to 12 (Body xsm) */
                       color: var(--text-label-light); margin-top: var(--scale-100); }

/* ─ Anti-pattern callouts ────────────────────────────────────────────────── */
.callout {
  border-left: var(--border-w-lg) solid var(--border-error);
  background: var(--surface-error);
  padding: var(--scale-300) var(--scale-400);
  border-radius: var(--radius-md);
  margin: var(--scale-400) 0;
}
.callout.info { border-left-color: var(--border-information); background: var(--surface-information); color: var(--text-information); }

@media (max-width: 1024px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; border-right: 0; border-bottom: var(--border-w-sm) solid var(--border-subtle); }
  .main { padding: var(--scale-1200); }
  .component { grid-template-columns: 1fr; }
}