/* ╔══════════════════════════════════════════════════════════════════╗
   ║ MAINTAINED IN: Crossroads (parent design system)                 ║
   ║   /projects/493ed1fd-30b9-47b0-b3eb-d081735ce352                 ║
   ║   Owner: Mike.                                                   ║
   ║                                                                  ║
   ║ ⚠ DIVERGED FROM UPSTREAM — pending Mike's adoption.              ║
   ║   This file is AHEAD of the parent: it is fully tokenized and    ║
   ║   off-grid-normalized (the parent still ships raw rgb() literals  ║
   ║   + off-grid px). It also carries the .callout/.field/.input/    ║
   ║   .select/.check/.tab recipes promoted from the parent's         ║
   ║   preview/ HTML. Until Mike pulls these upstream, this is NOT a   ║
   ║   clean mirror — do not blind-resync FROM the parent or you will  ║
   ║   regress it. Reconciliation brief + exact instructions:         ║
   ║   → cmds-handoff/06-cds-components-bring-up-to-code.md            ║
   ╚══════════════════════════════════════════════════════════════════╝ */
/* ──────────────────────────────────────────────────────────────────
   Crossroads Components — Buttons, Badges, Callouts, Form fields, Tabs
   --------------------------------------------------------------------
   Token-driven: every color resolves through `colors_and_type.css`.
   A ramp shift in the token file flows through here automatically.
   There are no hard-coded rgb / hex literals; semi-transparent state
   overlays use `color-mix(in srgb, var(--c-…) NN%, transparent)` so
   even the hover / focus tints track the brand token.

   OFF-GRID NORMALIZATION (2026-06-12, per product-owner call):
   • font-size → --fs-* (off-grid 13/11/15/10px snapped to 14/12/16/12).
   • line-height → --lh-tight / --lh-loose (callout 1.4 → tight).
   • spacing → --s-* (off-grid 14/6/10/18px snapped to 16/8/8/16;
     1px/2px optical nudges removed).
   • component HEIGHTS snapped to the 4px grid (btn 22/33/43/54 →
     24/32/44/56; badge 22/25/35 → 24/24/36; checkbox 18 → 20). These
     stay literal px — there is no height-scale token in the system.
   • micro letter-spacing (0.1px / -0.05px) removed.
   • #fff → var(--fg-inverse) (text) / var(--bg) (surfaces);
     #000 → var(--c-neutral-950). Select-chevron SVG stroke is the one
     unavoidable literal (#606B72 = --c-neutral-600; var() can't be
     used inside a data-URI) — kept with a comment.

   Sizes, weights, padding, line-height, and radius were lifted from
   the live product (LocumTenens Mobile · src/components.jsx) and the
   Figma "Buttons"/"Badges" pages, then normalized as above. Where the
   product and Figma differ, product wins (owner call, 2026-04-30);
   see README.md "Drift table".

   STATE-SHADE DRIFT (flag for owner review):
   A handful of hover / active shades from the product didn't land on
   a step in the shared ramp. Those have been re-pointed at the
   NEAREST token — typically a one-step move. Side effect: in
   `intent-success-filled` and `intent-warning-filled`, hover and
   active now share a ramp step, so the two states read closer
   together than they did pre-refactor. Accept the collapse, or add
   intermediate steps to colors_and_type.css and propagate.

     Original product value         →  Token now used
     ─────────────────────────────────────────────────
     #CFE4F2  accent hover (filled)  →  --c-journey-200
     #BBD9ED  accent active (filled) →  --c-journey-300
     #D3E8F5  accent active (outline)→  --c-journey-100
     #A7D1EB  tonal-info border      →  --c-journey-200
     #C51F0D  destructive hover      →  --c-pepper-600
     #8C1608  destructive active     →  --c-pepper-700
     #F2C9C9  tonal-danger border    →  --c-pepper-200
     #005921  success hover (filled) →  --c-emerald-700  (collapses w/ active)
     #E4F4EB  tonal-success bg       →  --c-emerald-100  (~1px off)
     #B6DFC4  tonal-success border   →  --c-emerald-200
     #DC9E00  warning hover (filled) →  --c-sunflower-600
     #B08200  warning active (filled)→  --c-sunflower-700
     #A87900  warning outline color  →  --c-sunflower-600
     #FAE7B2  warning outline active →  --c-sunflower-200
     #FBF1DE  warning outline hover  →  --c-sunflower-100
     #E8D3A3  tonal-warning border   →  --c-sunflower-200
     #AAB4BA  neutral outline border →  --c-neutral-300
     #F0F4F8  tonal-neutral bg       →  --c-neutral-50
   ────────────────────────────────────────────────────────────────── */

/* ============================ BUTTON ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);  /* product weight, not the DS bold */
  line-height: var(--lh-tight);
  border-radius: var(--r-2);   /* flat across all sizes */
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    transform 80ms ease;
  outline: none;
}
.btn:active           { transform: scale(0.985); }
.btn:focus-visible    { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-journey-500) 20%, transparent); }
.btn[disabled],
.btn.is-disabled      { opacity: 0.45; cursor: not-allowed; }

/* Size — explicit heights, padX, font-size from /Buttons (Figma) ─── */
.btn--xs { height: 24px; padding: 0 var(--s-2); font-size: var(--fs-12); gap: var(--s-2); min-width: var(--s-10); }
.btn--sm { height: 32px; padding: 0 var(--s-3); font-size: var(--fs-14); gap: var(--s-2); min-width: var(--s-10); }
.btn--md { height: 44px; padding: 0 var(--s-6); font-size: var(--fs-16); gap: var(--s-2); min-width: var(--s-10); }
.btn--lg { height: 56px; padding: 0 var(--s-7); font-size: var(--fs-18); gap: var(--s-2); min-width: var(--s-10); }

/* Icon-only collapses to a square (h × h). xs gap = 4 when icon+text. */
.btn--icon-only.btn--xs { width: 24px; height: 24px; padding: 0; min-width: 0; }
.btn--icon-only.btn--sm { width: 32px; height: 32px; padding: 0; min-width: 0; }
.btn--icon-only.btn--md { width: 44px; height: 44px; padding: 0; min-width: 0; }
.btn--icon-only.btn--lg { width: 56px; height: 56px; padding: 0; min-width: 0; }
.btn--xs i, .btn--xs svg { font-size: var(--fs-12); }
.btn--sm i, .btn--sm svg { font-size: var(--fs-14); }
.btn--md i, .btn--md svg { font-size: var(--fs-16); }
.btn--lg i, .btn--lg svg { font-size: var(--fs-18); }

/* Intent palettes ───────────────────────────────────────────────────
   `fill`  = surface for filled
   `on`    = foreground on filled surface
   `line`  = border for outlined
   `ink`   = foreground for outlined / ghost (deeper than line)        */

/* ── Filled ── */
.btn--filled.intent-primary     { background: var(--c-journey-500);   color: var(--fg-inverse); }
.btn--filled.intent-primary:hover  { background: var(--c-journey-600); }
.btn--filled.intent-primary:active { background: var(--c-journey-700); }

.btn--filled.intent-secondary   { background: var(--c-journey-800);   color: var(--fg-inverse); }
.btn--filled.intent-secondary:hover  { background: var(--c-journey-900); }
.btn--filled.intent-secondary:active { background: var(--c-neutral-950); }

.btn--filled.intent-accent      { background: var(--c-journey-100);   color: var(--c-journey-800); }
.btn--filled.intent-accent:hover  { background: var(--c-journey-200); }
.btn--filled.intent-accent:active { background: var(--c-journey-300); }

.btn--filled.intent-destructive { background: var(--c-pepper-500);    color: var(--fg-inverse); }
.btn--filled.intent-destructive:hover  { background: var(--c-pepper-600); }
.btn--filled.intent-destructive:active { background: var(--c-pepper-700); }

.btn--filled.intent-success     { background: var(--c-emerald-600);   color: var(--fg-inverse); }
.btn--filled.intent-success:hover  { background: var(--c-emerald-700); }
.btn--filled.intent-success:active { background: var(--c-emerald-700); }

.btn--filled.intent-warning     { background: var(--c-sunflower-500); color: var(--c-sunflower-800); }
.btn--filled.intent-warning:hover  { background: var(--c-sunflower-600); color: var(--c-sunflower-800); }
.btn--filled.intent-warning:active { background: var(--c-sunflower-700); color: var(--fg-inverse); }

.btn--filled.intent-neutral     { background: var(--c-neutral-200);   color: var(--c-neutral-800); }
.btn--filled.intent-neutral:hover  { background: var(--c-neutral-300); }
.btn--filled.intent-neutral:active { background: var(--c-neutral-400); }

/* ── Outlined ── */
.btn--outlined { background: transparent; }
.btn--outlined.intent-primary     { color: var(--c-journey-600);  border-color: var(--c-journey-500); }
.btn--outlined.intent-primary:hover  { background: color-mix(in srgb, var(--c-journey-500) 6%, transparent); }
.btn--outlined.intent-primary:active { background: color-mix(in srgb, var(--c-journey-500) 12%, transparent); }

.btn--outlined.intent-secondary   { color: var(--c-journey-800);  border-color: var(--c-journey-800); }
.btn--outlined.intent-secondary:hover  { background: color-mix(in srgb, var(--c-journey-800) 6%, transparent); }
.btn--outlined.intent-secondary:active { background: color-mix(in srgb, var(--c-journey-800) 12%, transparent); }

.btn--outlined.intent-accent      { color: var(--c-journey-600);  border-color: var(--c-journey-500); }
.btn--outlined.intent-accent:hover  { background: var(--c-journey-50); }
.btn--outlined.intent-accent:active { background: var(--c-journey-100); }

.btn--outlined.intent-destructive { color: var(--c-pepper-600); border-color: var(--c-pepper-500); }
.btn--outlined.intent-destructive:hover  { background: color-mix(in srgb, var(--c-pepper-500) 6%, transparent); }
.btn--outlined.intent-destructive:active { background: color-mix(in srgb, var(--c-pepper-500) 12%, transparent); }

.btn--outlined.intent-success     { color: var(--c-emerald-700);  border-color: var(--c-emerald-600); }
.btn--outlined.intent-success:hover  { background: color-mix(in srgb, var(--c-emerald-600) 6%, transparent); }
.btn--outlined.intent-success:active { background: color-mix(in srgb, var(--c-emerald-600) 12%, transparent); }

.btn--outlined.intent-warning     { color: var(--c-sunflower-800); border-color: var(--c-sunflower-600); }
.btn--outlined.intent-warning:hover  { background: var(--c-sunflower-100); }
.btn--outlined.intent-warning:active { background: var(--c-sunflower-200); }

.btn--outlined.intent-neutral     { color: var(--c-neutral-800);  border-color: var(--c-neutral-300); }
.btn--outlined.intent-neutral:hover  { background: var(--c-neutral-50); }
.btn--outlined.intent-neutral:active { background: var(--c-neutral-100); }

/* ── Ghost ── */
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost.intent-primary     { color: var(--c-journey-600); }
.btn--ghost.intent-primary:hover  { background: color-mix(in srgb, var(--c-journey-500) 6%, transparent); }
.btn--ghost.intent-primary:active { background: color-mix(in srgb, var(--c-journey-500) 12%, transparent); }

.btn--ghost.intent-secondary   { color: var(--c-journey-800); }
.btn--ghost.intent-secondary:hover  { background: color-mix(in srgb, var(--c-journey-800) 6%, transparent); }
.btn--ghost.intent-secondary:active { background: color-mix(in srgb, var(--c-journey-800) 12%, transparent); }

.btn--ghost.intent-accent      { color: var(--c-journey-600); }
.btn--ghost.intent-accent:hover  { background: var(--c-journey-50); }
.btn--ghost.intent-accent:active { background: var(--c-journey-100); }

.btn--ghost.intent-destructive { color: var(--c-pepper-600); }
.btn--ghost.intent-destructive:hover  { background: color-mix(in srgb, var(--c-pepper-500) 6%, transparent); }
.btn--ghost.intent-destructive:active { background: color-mix(in srgb, var(--c-pepper-500) 12%, transparent); }

.btn--ghost.intent-success     { color: var(--c-emerald-700); }
.btn--ghost.intent-success:hover  { background: color-mix(in srgb, var(--c-emerald-600) 6%, transparent); }
.btn--ghost.intent-success:active { background: color-mix(in srgb, var(--c-emerald-600) 12%, transparent); }

.btn--ghost.intent-warning     { color: var(--c-sunflower-800); }
.btn--ghost.intent-warning:hover  { background: var(--c-sunflower-100); }
.btn--ghost.intent-warning:active { background: var(--c-sunflower-200); }

.btn--ghost.intent-neutral     { color: var(--c-neutral-800); }
.btn--ghost.intent-neutral:hover  { background: var(--c-neutral-50); }
.btn--ghost.intent-neutral:active { background: var(--c-neutral-100); }

/* ── State simulators (.is-hover / .is-focused) ───────────────────
   For spec sheets and screenshots: force a button to render its
   hover or focus visuals without keyboard / pointer state. Mirrors
   the :hover and :focus-visible rules above 1:1. */
.btn.is-focused { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-journey-500) 20%, transparent); }

.btn.is-hover.btn--filled.intent-primary       { background: var(--c-journey-600); }
.btn.is-hover.btn--filled.intent-secondary     { background: var(--c-journey-900); }
.btn.is-hover.btn--filled.intent-accent        { background: var(--c-journey-200); }
.btn.is-hover.btn--filled.intent-destructive   { background: var(--c-pepper-600); }
.btn.is-hover.btn--filled.intent-success       { background: var(--c-emerald-700); }
.btn.is-hover.btn--filled.intent-warning       { background: var(--c-sunflower-600); }
.btn.is-hover.btn--filled.intent-neutral       { background: var(--c-neutral-300); }

.btn.is-hover.btn--outlined.intent-primary     { background: color-mix(in srgb, var(--c-journey-500) 6%, transparent); }
.btn.is-hover.btn--outlined.intent-secondary   { background: color-mix(in srgb, var(--c-journey-800) 6%, transparent); }
.btn.is-hover.btn--outlined.intent-accent      { background: var(--c-journey-50); }
.btn.is-hover.btn--outlined.intent-destructive { background: color-mix(in srgb, var(--c-pepper-500) 6%, transparent); }
.btn.is-hover.btn--outlined.intent-success     { background: color-mix(in srgb, var(--c-emerald-600) 6%, transparent); }
.btn.is-hover.btn--outlined.intent-warning     { background: var(--c-sunflower-100); }
.btn.is-hover.btn--outlined.intent-neutral     { background: var(--c-neutral-50); }

.btn.is-hover.btn--ghost.intent-primary        { background: color-mix(in srgb, var(--c-journey-500) 6%, transparent); }
.btn.is-hover.btn--ghost.intent-secondary      { background: color-mix(in srgb, var(--c-journey-800) 6%, transparent); }
.btn.is-hover.btn--ghost.intent-accent         { background: var(--c-journey-50); }
.btn.is-hover.btn--ghost.intent-destructive    { background: color-mix(in srgb, var(--c-pepper-500) 6%, transparent); }
.btn.is-hover.btn--ghost.intent-success        { background: color-mix(in srgb, var(--c-emerald-600) 6%, transparent); }
.btn.is-hover.btn--ghost.intent-warning        { background: var(--c-sunflower-100); }
.btn.is-hover.btn--ghost.intent-neutral        { background: var(--c-neutral-50); }


/* ============================ BADGE ============================= */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);  /* product weight */
  line-height: 1;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Size — explicit heights, lifted from product Badges spec ───────── */
.badge--sm { height: 24px; padding: var(--s-1) var(--s-2); font-size: var(--fs-12); gap: var(--s-1); }
.badge--md { height: 24px; padding: var(--s-1) var(--s-2); font-size: var(--fs-14); gap: var(--s-2); }
.badge--lg { height: 36px; padding: var(--s-2) var(--s-3); font-size: var(--fs-16); gap: var(--s-2); }
.badge--sm i, .badge--sm svg { font-size: var(--fs-12); }
.badge--md i, .badge--md svg { font-size: var(--fs-12); }
.badge--lg i, .badge--lg svg { font-size: var(--fs-14); }

/* Filled (solid) */
.badge--filled.intent-info     { background: var(--c-journey-500);   color: var(--fg-inverse); }
.badge--filled.intent-neutral  { background: var(--c-neutral-900);   color: var(--fg-inverse); }
.badge--filled.intent-danger   { background: var(--c-pepper-500);    color: var(--fg-inverse); }
.badge--filled.intent-warning  { background: var(--c-sunflower-500); color: var(--c-sunflower-900); }
.badge--filled.intent-success  { background: var(--c-emerald-600);   color: var(--fg-inverse); }

/* Tonal (soft) — solid fg over a tinted surface, with matching border */
.badge--tonal.intent-info      { background: var(--c-journey-50);    color: var(--c-journey-500); border-color: var(--c-journey-200); }
.badge--tonal.intent-neutral   { background: var(--c-neutral-50);    color: var(--c-neutral-600); border-color: var(--c-neutral-200); }
.badge--tonal.intent-danger    { background: var(--c-pepper-100);    color: var(--c-pepper-500);  border-color: var(--c-pepper-200); }
.badge--tonal.intent-warning   { background: var(--c-sunflower-100); color: var(--c-sunflower-600); border-color: var(--c-sunflower-200); }
.badge--tonal.intent-success   { background: var(--c-emerald-100);   color: var(--c-emerald-600); border-color: var(--c-emerald-200); }

/* Outlined */
.badge--outlined { background: transparent; }
.badge--outlined.intent-info      { color: var(--c-journey-500);   border-color: var(--c-journey-500); }
.badge--outlined.intent-neutral   { color: var(--c-neutral-600);   border-color: var(--c-neutral-300); }
.badge--outlined.intent-danger    { color: var(--c-pepper-500);    border-color: var(--c-pepper-500); }
.badge--outlined.intent-warning   { color: var(--c-sunflower-600); border-color: var(--c-sunflower-600); }
.badge--outlined.intent-success   { color: var(--c-emerald-600);   border-color: var(--c-emerald-600); }


/* =========================== CALLOUT ============================
   Inline status / info surface. 4px left rail in the semantic hue,
   tinted bg, deep-ink fg. Promoted from preview/components-callouts.html
   and consolidated with the .callout-icon / .callout-body / .callout-title
   / .callout-sub / .callout-close sub-element naming used by the
   product (LTCallout in mobile · src/components.jsx).

   Variants: .info · .sage · .warn · .err · .success · .toast
   .toast inverts to Foundation-800 fill for floating confirmations. */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-left: 4px solid;
  border-radius: var(--r-4);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-tight);
}
.callout > .icon,
.callout .callout-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.callout .callout-body  { flex: 1; min-width: 0; }
.callout .callout-title { font-weight: var(--fw-medium); }
.callout .callout-sub   { opacity: 0.85; }
.callout .callout-close {
  flex-shrink: 0;
  width: 28px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.callout.info    { background: var(--c-journey-50);     border-color: var(--c-journey-500);    color: var(--c-journey-700); }
.callout.sage    { background: var(--c-sage-100);       border-color: var(--c-sage-500);       color: var(--c-sage-700); }
.callout.warn    { background: var(--c-sunflower-100);  border-color: var(--c-sunflower-500);  color: var(--c-sunflower-700); }
.callout.err     { background: var(--c-pepper-100);     border-color: var(--c-pepper-400);     color: var(--c-pepper-600); }
.callout.success { background: var(--c-emerald-100);    border-color: var(--c-emerald-500);    color: var(--c-emerald-700); }
.callout.toast   { background: var(--c-foundation-800); border-color: var(--c-foundation-800); color: var(--fg-inverse); }


/* =========================== FORM FIELDS ========================
   Promoted from preview/components-form.html. Field row, label,
   text input, select, checkbox, help text. Focus halo uses
   `color-mix` against the brand token so it tracks ramp shifts. */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.field .lbl {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);  /* was 600 — even weight, rounded to 500 per odd-weights rule */
  color: var(--c-neutral-700);
}
.field .help {
  font-size: var(--fs-12);  /* 11px snapped to grid */
  color: var(--c-neutral-500);
}
.field .help.error { color: var(--c-pepper-500); }

.input {
  height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-4);
  border: 1px solid var(--c-neutral-200);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);  /* 15px snapped to grid */
  color: var(--c-neutral-900);
  transition:
    border-color var(--t-fast) var(--ease-out),
    box-shadow   var(--t-fast) var(--ease-out);
}
.input::placeholder { color: var(--c-neutral-300); }
.input:focus,
.input.is-focused {
  outline: none;
  border-color: var(--c-journey-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-journey-500) 15%, transparent);
}
.input.error,
.input.is-invalid { border-color: var(--c-pepper-400); }
.input[disabled],
.input.is-disabled {
  background: var(--c-neutral-50);
  color: var(--c-neutral-500);
  cursor: not-allowed;
}

.select {
  height: 44px;
  padding: 0 44px 0 var(--s-4);   /* 44px right reserves room for chevron + gutter (functional, no token) */
  border-radius: var(--r-4);
  border: 1px solid var(--c-neutral-200);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);  /* 15px snapped to grid */
  color: var(--c-neutral-900);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23606B72'/*=--c-neutral-600; var() unavailable inside data-URI*/ stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 12px 8px;
  cursor: pointer;
}
.select:focus,
.select.is-focused {
  outline: none;
  border-color: var(--c-journey-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-journey-500) 15%, transparent);
}

.check {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--c-neutral-800);
}
.check input {
  width: 20px;
  height: 20px;
  accent-color: var(--c-journey-500);
}


/* ============================ TABS ============================== */
/* Underline tab — Journey-500 indicator on a Neutral-100 hairline.
   Lifted from preview/components-tabs.html. */
.tab-row {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--c-neutral-100);
}
.tab {
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--c-neutral-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition:
    color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}
.tab:hover { color: var(--c-neutral-800); }
.tab.is-active,
.tab.active {
  color: var(--c-journey-500);
  border-bottom-color: var(--c-journey-500);
  font-weight: var(--fw-bold);
}
.tab.is-disabled,
.tab.disabled {
  color: var(--c-neutral-400);
  opacity: 0.4;
  cursor: not-allowed;
}