/* ============================================================
   Sanctom Craft — Component Additions v1
   ============================================================
   New first-class Craft components surfaced through the OS /
   Mind / Soul migration audit (Hammer-C, 2026-06-12/13).
   All tokens only — no hex literals, no pixel literals outside
   of explicit pixel-math where a token does not exist.

   Sections:
     1. StatRow
     2. ProgressBar
     3. SectionLabel
     4. CardButton
     5. SettingsRow
     6. RowActions (formalizes the one-liner in admin-chrome.css)
     7. StreamRow
     8. CardDescription
     9. Avatar — shape + size extensions
    10. StatusDot — static ok/success state
    11. SegmentedControl — icon variant
    12. Stepper — gated linear step indicator (Wizard Kit)
    13. Checkbox — canonical; replaces 5 local reinventions (Kern ruling 2026-07-15)

   IMPORTANT: These CSS class names are the canonical class
   contract. Hammer-Craft wraps them as React components;
   the HTML class names must match exactly.
   ============================================================ */


/* ── 1. StatRow ──────────────────────────────────────────────
   A single label + value pair, stacked or inline.
   Use for: Utilization metrics, cost rows, agent detail stats.
   NOT a replacement for StatBar (multi-item horizontal bar).

   Markup:
     <div class="stat-row">
       <span class="stat-row-label">Credits this month</span>
       <span class="stat-row-value">$14.20</span>
     </div>
     <div class="stat-row stat-row--inline"> … </div>
*/
.stat-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat-row--inline {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.stat-row-label {
  font-size: var(--type-meta);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}
.stat-row-value {
  font-size: var(--type-body);
  font-weight: var(--weight-semi);
  color: var(--fg);
  line-height: var(--lh-snug);
  font-variant-numeric: tabular-nums;
}
.stat-row-value--accent { color: var(--accent-on-light, var(--admin-accent)); }
.stat-row-value--muted  { color: var(--fg-subtle); }


/* ── 2. ProgressBar ──────────────────────────────────────────
   Horizontal fill bar. Value is set via --progress-value CSS
   custom property (0–100) OR inline style on .progress-bar-fill.

   Markup:
     <div class="progress-bar" role="progressbar"
          aria-valuenow="42" aria-valuemin="0" aria-valuemax="100">
       <div class="progress-bar-fill" style="width:42%"></div>
     </div>
     <div class="progress-bar progress-bar--accent"> … </div>
     <div class="progress-bar progress-bar--sm"> … </div>
*/
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--overlay-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex-shrink: 0;
}
.progress-bar--sm  { height: 4px; }
.progress-bar--lg  { height: 8px; }

.progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--admin-accent);
  transition: width var(--dur-3, 300ms) var(--ease-out, ease-out);
}
.progress-bar--neutral .progress-bar-fill { background: var(--overlay-strong); }
.progress-bar--success .progress-bar-fill { background: var(--status-ok); }
.progress-bar--warning .progress-bar-fill { background: var(--status-warn); }
/* ProgressBar warning/critical states for usage bars (OQ-IS-4) */
.progress-bar-fill--warning  { background: var(--status-warn) !important; }
.progress-bar-fill--critical { background: var(--status-error) !important; }
.progress-bar--danger  .progress-bar-fill { background: var(--btn-danger-color, var(--sanctom-red)); }


/* ── 3. SectionLabel ─────────────────────────────────────────
   A small subdued label used to divide named sections inside a
   Card, panel, or surface. NOT a form field label — that is
   the existing <Label> component.

   Markup:
     <p class="section-label">Recent activity</p>
     <p class="section-label section-label--spaced">Who has access</p>
*/
.section-label {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-semi);
  color: var(--fg-subtle);
  letter-spacing: var(--ls-wide, 0.06em);
  text-transform: uppercase;
  line-height: var(--lh-snug);
  margin: 0;
}
.section-label--spaced {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  margin-top: var(--space-2);
}


/* ── 4. CardButton ───────────────────────────────────────────
   A Card rendered as an interactive <button> element. Inherits
   all Card visual styles and adds cursor, focus ring, hover.
   Use for: add-integration tiles, template tiles, action cards.

   Markup:
     <button class="card card-button" type="button">
       … card content …
     </button>
*/
.card-button {
  cursor: pointer;
  text-align: left;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-body);
  width: 100%;
  transition: background var(--dur-2, 150ms) var(--ease-out, ease-out),
              box-shadow var(--dur-2, 150ms) var(--ease-out, ease-out),
              transform var(--dur-2, 150ms) var(--ease-out, ease-out);
}
.card-button:hover {
  background: var(--overlay-subtle);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.card-button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}
.card-button:focus-visible {
  outline: var(--focus-ring, 3px solid rgba(44,126,255,0.35));
  outline-offset: 2px;
}


/* ── 5. SettingsRow ──────────────────────────────────────────
   A horizontal row with label + optional description on the
   left, and a control (Switch, Select, Button) on the right.
   Use for: all settings/preferences surfaces.

   Markup:
     <div class="settings-row">
       <div class="settings-row-body">
         <span class="settings-row-name">Email notifications</span>
         <span class="settings-row-desc">Sent when a task completes.</span>
       </div>
       <div class="settings-row-control">
         <Switch … />
       </div>
     </div>
     Modifier: .settings-row--disabled (mutes label text)
*/
.settings-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  min-height: 52px;
}
.settings-row:last-child { border-bottom: none; }

.settings-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-row-name {
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  color: var(--fg);
  line-height: var(--lh-snug);
}
.settings-row-desc {
  font-size: var(--type-meta);
  font-weight: var(--weight-regular);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}
.settings-row-control {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.settings-row--disabled .settings-row-name,
.settings-row--disabled .settings-row-desc {
  opacity: 0.45;
}


/* ── 6. RowActions ───────────────────────────────────────────
   A wrapper for ghost icon buttons in a ListRow trailing slot.
   Formalizes the one-liner already in admin-chrome.css (L1066).
   Handles spacing; hover-reveal is handled by parent list row.

   Markup (icon buttons = admin-chrome's `.icon-btn`, standalone — NOT `.btn.btn-ghost`;
   there is no `.btn-icon` variant. Destructive action adds `.icon-btn--danger`):
     <div class="row-actions">
       <button class="icon-btn" aria-label="Edit">…</button>
       <button class="icon-btn icon-btn--danger" aria-label="Delete">…</button>
     </div>
*/
.row-actions {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  flex-shrink: 0;
}
/* Parent list-row hover reveal (opt-in via .row-actions--reveal) */
.row-actions--reveal {
  opacity: 0;
  transition: opacity var(--dur-2, 150ms) var(--ease-out, ease-out);
}
:is(tr, .list-row, .lrow):hover .row-actions--reveal,
:is(tr, .list-row, .lrow):focus-within .row-actions--reveal {
  opacity: 1;
}


/* ── 7. StreamRow ────────────────────────────────────────────
   A single row in a live activity feed / Monitor stream.
   Slots: timestamp · agent identity · event description.
   Use for: Monitor.tsx live feed, MonitorActivity.tsx.

   Markup:
     <div class="stream-row">
       <span class="stream-row-time">09:41</span>
       <span class="stream-row-who">Hammer-C</span>
       <span class="stream-row-what">Opened PR #104 — craft migration wave 4</span>
     </div>
     Modifiers: .stream-row--system (de-emphasised, automated events)
                .stream-row--alert  (elevated, error/warning events)
*/
.stream-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  font-size: var(--type-meta);
  line-height: var(--lh-normal);
  border-bottom: 1px solid var(--hairline-faint);
}
.stream-row:last-child { border-bottom: none; }

.stream-row-time {
  flex-shrink: 0;
  width: 38px;
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-medium);
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.stream-row-who {
  flex-shrink: 0;
  font-weight: var(--weight-semi);
  color: var(--accent-on-light, var(--admin-accent));
  min-width: 80px;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stream-row-what {
  flex: 1;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stream-row--system .stream-row-who,
.stream-row--system .stream-row-what { color: var(--fg-subtle); }
.stream-row--alert .stream-row-what { color: var(--btn-danger-color, var(--sanctom-red)); }


/* ── 8. CardDescription ─────────────────────────────────────
   Muted small text displayed inside a Card, below the header.
   Pairs with existing Card, CardHeader components.
   Class: .card-description (replaces .card-sub hand-rolling).

   Markup:
     <div class="card">
       <div class="card-header">…</div>
       <p class="card-description">3 tasks · 2 agents</p>
       <div class="card-body">…</div>
     </div>
*/
.card-description {
  font-size: var(--type-meta);
  font-weight: var(--weight-regular);
  color: var(--fg-subtle);
  line-height: var(--lh-normal);
  margin: 0;
  padding: 0 var(--space-4) var(--space-2);
}
/* When card-description immediately follows card-header */
.card-header + .card-description { margin-top: calc(var(--space-1) * -1); }


/* ── 9. Avatar — shape + size extensions ─────────────────────
   Extensions to the existing .avatar component.

   New shape modifier:
     .avatar--square  →  border-radius: var(--radius-md)
                         Use for: file type glyphs (DOC, XLS, GH, folder)

   New size modifier:
     .avatar--xs      →  24×24px
                         Pairs with .avatar--sm (28px) and default 36px.

   Markup:
     <span class="avatar avatar--square avatar--sm">GH</span>
     <span class="avatar avatar--xs">Cu</span>
*/
/* Base avatar (default 36px). Ported into the prototype library from the Tier-4
   @sanctom/craft-ui Avatar — previously only --xs was defined here, so a bare
   .avatar / .avatar--sm had no size. Mira-Craft 2026-07-06. */
.avatar {
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; overflow: hidden; line-height: 1;
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--type-meta);
  background: color-mix(in srgb, var(--admin-accent) 16%, var(--surface));
  color: var(--admin-accent-ink, var(--admin-accent));
}
.avatar--sm { width: 28px; height: 28px; font-size: var(--type-pill); }
.avatar--md { width: 44px; height: 44px; font-size: var(--type-body); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--type-body); }
.avatar--xl { width: 120px; height: 120px; font-size: var(--type-h2); }

.avatar--square { border-radius: var(--radius-md) !important; }

.avatar--xs {
  width: 24px;
  height: 24px;
  min-width: 24px;
  font-size: 9px;
  font-weight: var(--weight-bold);
}

/* File-type glyph colors (used with avatar--square) */
.avatar--doc  { background: color-mix(in srgb, var(--category-1) 18%, transparent); color: var(--category-1); }
.avatar--xls  { background: color-mix(in srgb, var(--category-2) 18%, transparent); color: var(--category-2); }
.avatar--gh   { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--fg-muted); }
.avatar--fold { background: color-mix(in srgb, var(--status-warn) 18%, transparent); color: var(--status-warn); }

/* ── Agent face avatars — BINDING (Knox 2026-07-06) ──────────────────────────
   Every AGENT rendered as an avatar MUST show the face image assigned to it in
   Sanctom Agents — NEVER its initials. Provide the face as an <img> child of an
   .avatar.avatar--face; it fills and cover-crops the circle at any avatar size.

     <span class="avatar avatar--face"><img src="{persona.face_image_url}" alt="Echo"></span>

   Fallback when a face is genuinely unavailable (still loading, or not yet
   assigned): the neutral agent glyph .avatar--agent — the ONLY non-photo avatar
   an agent may show. Initials are never a valid agent fallback.

     <span class="avatar avatar--agent" role="img" aria-label="Echo"><svg …person glyph…></svg></span>

   (Human users without a photo may still fall back to initials — this rule is
   specifically about agents. Full rule: Products/Stack/Craft/Agent-Avatar-Face-Standard-v0.1.md.) */
.avatar--face { display: block; overflow: hidden; padding: 0; }
.avatar--face > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.avatar--agent { background: color-mix(in srgb, var(--admin-accent) 16%, var(--surface)); color: var(--admin-accent-ink, var(--admin-accent)); }
.avatar--agent > svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Group avatar — a conversation/entity that is a pod or team, not one agent or a
   human. Shows a neutral group glyph — never a single face, never initials. Distinct
   from .avatar--agent (accent-tinted single agent) so a group reads as a group. */
.avatar--group { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--fg-muted); }
.avatar--group > svg { width: 64%; height: 64%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Agent identity — face + name (BINDING; the name is REQUIRED) ────────────
   An agent is ALWAYS shown as its face AND its name — never a bare face, never
   initials. This composite pairs the face avatar with the agent's name so every
   Kit places the name consistently instead of hand-rolling it.

   Stacked (name BELOW the face) is the default — cards, rosters, org charts,
   chat headers, detail surfaces. Use .agent-id--inline (name beside the face)
   only for compact rows / badges where a stacked block won't fit.

     <span class="agent-id">
       <span class="avatar avatar--face"><img src="{persona.face_image_url}" alt="Echo"></span>
       <span class="agent-id__name">Echo</span>
     </span>
   (Face unavailable → swap the inner avatar for .avatar--agent; the name stays.) */
.agent-id { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; min-width: 0; }
.agent-id__name { font-size: var(--type-meta); font-weight: var(--weight-semi); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.agent-id--inline { flex-direction: row; align-items: center; gap: var(--space-2); text-align: left; }
/* Larger identity — the name scales up with the face (--md for list rows,
   --lg for cards/headers). */
.agent-id--md .agent-id__name { font-size: var(--type-body); font-weight: var(--weight-semi); }
.agent-id--lg { gap: var(--space-3); }
.agent-id--lg .agent-id__name { font-size: var(--type-body); font-weight: var(--weight-bold); }
.agent-id--xl { gap: var(--space-2); }
.agent-id--xl .agent-id__name { font-size: var(--type-body); font-weight: var(--weight-bold); }


/* ── 10. StatusDot — static ok/success state ─────────────────
   Adds state="ok" to the existing StatusDot component.
   Static solid green dot — no pulse animation.
   Use for: Connected, Healthy, Done, Verified.

   Existing states (for reference):
     .sdot--working  →  animated pulse ring (active / in-progress)
     .sdot--error    →  static red
   New:
     .sdot--ok       →  static solid green, no animation
     .sdot--warning  →  static amber

   Markup:
     <span class="sdot sdot--ok" aria-label="Connected"></span>
*/
/* Base (if not already in admin-chrome.css) */
.sdot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}

.sdot--ok {
  background: var(--status-ok, #38D87A);
  /* Static — explicitly no animation */
  animation: none;
}
.sdot--working {
  background: var(--admin-accent);
  animation: sdot-pulse 2s ease-in-out infinite;
}
@keyframes sdot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--overlay-glow); }
  50%       { opacity: 0.65; box-shadow: 0 0 0 3px var(--hairline-faint); }
}
.sdot--warning { background: var(--status-warn, #F5A623); animation: none; }
.sdot--error   { background: var(--btn-danger-color, var(--sanctom-red)); animation: none; }
.sdot--idle    { background: var(--overlay-raised); animation: none; }

/* Size variants */
.sdot--sm { width: 6px;  height: 6px; }
.sdot--lg { width: 10px; height: 10px; }


/* ── 11. SegmentedControl — icon variant ─────────────────────
   Icon-only segmented control tab strip. Extends the existing
   SegmentedControl component with variant="icon".
   Use for: DocumentManager list/grid view toggle.

   Markup:
     <div class="segmented-control segmented-control--icon"
          role="tablist">
       <button class="seg-btn seg-btn--icon" role="tab"
               aria-selected="true" aria-label="Grid view">
         <svg>…</svg>
       </button>
       <button class="seg-btn seg-btn--icon" role="tab"
               aria-selected="false" aria-label="List view">
         <svg>…</svg>
       </button>
     </div>
*/
.segmented-control {
  display: inline-flex;
  align-items: center;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}
.seg-btn {
  flex: 1;
  padding: var(--space-1) var(--space-3);
  border-radius: calc(var(--radius-md) - 3px);
  border: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--fg-subtle);
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-semi);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out),
              color     var(--dur-2) var(--ease-out);
  white-space: nowrap;
}
.seg-btn[aria-selected="true"],
.seg-btn.is-active {
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-1);
}
.seg-btn:focus-visible {
  outline: var(--focus-ring, 3px solid rgba(44,126,255,0.35));
  outline-offset: -1px;
}

/* Not-yet-available state — additive (same pattern as .product-card--locked).
   Mira-Craft 2026-07-15, per Agent-Interaction-Surface-Design-Contract-v0.1 §3.3.

   🔴 This says "Sanctom hasn't shipped this yet" — it is NOT an entitlement state.
   It must never carry a lock/key/crown glyph, an "Upgrade" affordance, a tier badge,
   or any premium treatment: not-yet-available and you-haven't-paid are different
   things and must never look alike. Pair with aria-disabled + a real text reason. */
.seg-btn--soon {
  opacity: 0.55;
  cursor: default;
}
.seg-btn--soon:hover { background: transparent; }

/* Icon variant — square, icon-sized */
.segmented-control--icon { display: inline-flex; }
.seg-btn--icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.seg-btn--icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}


/* ── 12. Stepper ──────────────────────────────────────────────
   Gated linear step indicator for the Wizard Visual Kit (Tier 3).
   Shows an ordered sequence of steps with complete / current /
   upcoming states + connectors between them.

   This is NOT peer navigation — SegmentedControl / Tabs are for
   free tab-switching. A Stepper implies a required order (finish
   step N before step N+1), which is what a Wizard enforces.

   Display-only by default: the Wizard shell owns navigation (Back /
   Next + the Review step's Edit jump-backs). Ratified as a new
   Tier-4 primitive by Keystone KS-CRAFT-RULING-007 (2026-07-05).

   Markup:
     <ol class="stepper" aria-label="Progress">
       <li class="stepper__step is-complete">
         <span class="stepper__marker" aria-hidden="true"><svg><!-- check --></svg></span>
         <span class="stepper__label">
           <span class="stepper__index">Step 1</span>
           <span class="stepper__title">Persona</span>
         </span>
       </li>
       <li class="stepper__step is-current" aria-current="step">
         <span class="stepper__marker" aria-hidden="true">2</span>
         <span class="stepper__label"> … </span>
       </li>
       <li class="stepper__step is-upcoming">
         <span class="stepper__marker" aria-hidden="true">3</span>
         <span class="stepper__label"> … </span>
       </li>
     </ol>

   State classes on .stepper__step:
     is-complete — done; filled accent marker + check; inbound connector filled
     is-current  — active; ringed accent marker + step number
     is-upcoming — not reached; muted marker + label
*/
.stepper {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}
.stepper__step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
/* connector entering a step from the previous marker (skipped on the first).
   Spans previous-marker-centre → this-marker-centre; both markers sit on top
   (z-index) so only the gap between them shows. */
.stepper__step::before {
  content: '';
  position: absolute;
  top: 15px;               /* vertical centre of the 32px marker */
  left: -50%;
  right: 50%;
  height: 2px;
  background: var(--card-border);
  z-index: 0;
}
.stepper__step:first-child::before { display: none; }
/* a reached step (current or complete) has its inbound connector filled */
.stepper__step.is-current::before,
.stepper__step.is-complete::before { background: var(--admin-accent); }

.stepper__marker {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 2px solid var(--card-border);
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
}
.stepper__marker svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stepper__step.is-current .stepper__marker {
  border-color: var(--admin-accent-ink, var(--admin-accent));
  color: var(--admin-accent-ink, var(--admin-accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--admin-accent) 15%, transparent);
}
.stepper__step.is-complete .stepper__marker {
  background: var(--admin-accent);
  border-color: var(--admin-accent-ink, var(--admin-accent));
  color: var(--ink-on-accent);
}

.stepper__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stepper__index {
  font-family: var(--font-mono);
  font-size: var(--type-pill);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-subtle);
}
.stepper__title {
  font-size: var(--type-meta);
  font-weight: var(--weight-semi);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}
.stepper__step.is-current .stepper__title,
.stepper__step.is-complete .stepper__title { color: var(--fg); }

/* Mobile-first: drop the "Step N" eyebrow so 4+ markers stay legible on a
   narrow rail; restore it at ≥640px. */
.stepper__index { display: none; }
@media (min-width: 640px) { .stepper__index { display: block; } }


/* ── 13. Checkbox ─────────────────────────────────────────────
   Canonical checkbox. Extracted 2026-07-15 (Mira-Craft) on Kern's ruling
   after the G13 on the checkout waitlist consent block.

   WHY THIS EXISTS: there was no shared checkbox, so every surface that needed
   one rolled its own wrapper around the same native-input-plus-accent-color
   technique — `.choice` (craft/components, page-local, 17px, centered),
   `.co-consent__opt` (checkout, 16px, top-aligned), `.build-craft-cb`
   (issues/new), plus onboarding/payouts and settings. Five independent
   reinventions of one control. Kern: "a real gap, not a misread."

   Mirrors the shipped craft-ui `Checkbox` (components/ui/checkbox.tsx, Radix)
   — same role in the prototype layer, per the media.css/commerce.css pattern.

   DELIBERATELY a NATIVE <input type="checkbox">, not a hand-drawn control:
   it is keyboard-operable, screen-reader-announced, and indeterminate-capable
   for free. A custom-drawn box would have to re-earn all three and would be
   the actual charter violation. `accent-color` themes it to the product accent
   with no redraw.

   Markup — the <label> IS the wrapper, so the hit target includes the text and
   no `for`/`id` pairing is needed:
     <label class="checkbox">
       <input type="checkbox">
       <span>Also send me occasional Sanctom news.</span>
     </label>

   Multi-line label or a description → add --top so the box aligns to the first
   line instead of floating to the vertical centre of a paragraph:
     <label class="checkbox checkbox--top">
       <input type="checkbox">
       <span>Long wrapping label…<span class="checkbox__desc">Secondary line.</span></span>
     </label>

   Group with .checkbox-stack. Disabled: put `disabled` on the input — the
   wrapper dims via :has(), no extra class to keep in sync.
   ───────────────────────────────────────────────────────────── */
.checkbox {
  display: inline-flex;
  align-items: center;          /* single-line labels — the common case */
  gap: var(--space-2);
  font-size: var(--type-body);
  color: var(--fg);
  cursor: pointer;
  line-height: 1.5;
}
.checkbox > input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--admin-accent);   /* themes the native control per product */
  cursor: pointer;
  margin: 0;
}
/* Top-align for wrapping labels / labels with a description. */
.checkbox--top { align-items: flex-start; }
.checkbox--top > input[type="checkbox"] { margin-top: 3px; }

/* Optional secondary line under the label text. */
.checkbox__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--type-meta);
  color: var(--fg-muted);
}

/* Focus — the native input draws its own ring; make it match the library's. */
.checkbox > input[type="checkbox"]:focus-visible {
  outline: var(--focus-ring, 3px solid rgba(44,126,255,0.35));
  outline-offset: 2px;
}

/* Disabled — driven off the real input state, never a parallel class. */
.checkbox:has(> input[type="checkbox"]:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}
.checkbox > input[type="checkbox"]:disabled { cursor: not-allowed; }

/* Vertical group. */
.checkbox-stack { display: flex; flex-direction: column; gap: var(--space-3); }