/* ==========================================================================
   Unbanded — components  ("The Members' Room")
   Every shared component the screens use, with default / pressed / disabled /
   selected / focus states. Colours, sizes, faces and durations are tokens from
   css/tokens.css; nothing here invents a value.

   Brass rule: --accent is the one primary action or live state on a screen.
   Components that may be brass: .btn-primary, .btn-ignite, .fab, the running
   .ring, the active-smoke card, the active .tab, .chip-on, the multi-select
   check, .seg active thumb, .switch on, .slider fill/knob, filled .rating,
   the focus ring, link text. Nothing else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Phase labels (low specificity on purpose: declared first so component
      rules of equal specificity win on layout properties)
   -------------------------------------------------------------------------- */
.phase-tag {
  display: none;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: var(--fw-overline);
  letter-spacing: var(--ls-overline);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  flex: none;
}
[data-phases] .phase-tag { display: inline-flex; }
.topbar .phase-tag { margin-left: var(--sp-2); }

/* Any element marked data-phase="2|3" gets the same tag top-right inside its padding
   and a dashed studio outline, only while phase labels are on. */
[data-phases] :where([data-phase]:not(.phase-tag)) {
  position: relative;
  outline: 1px dashed var(--border-strong);
  outline-offset: -1px;
}
[data-phases] :where([data-phase]:not(.phase-tag))::after {
  content: "Phase " attr(data-phase);
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: var(--fw-overline);
  letter-spacing: var(--ls-overline);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
/* Small inline controls carry the tag after their label instead of an outline */
[data-phases] :where(.chip, .pill, .btn, .seg > *, .section-link, .tab, .legend > *)[data-phase] { outline: none; }
[data-phases] :where(.chip, .pill, .btn, .seg > *, .section-link, .tab, .legend > *)[data-phase]::after {
  position: static;
  margin-left: 6px;
}
[data-phases] :where(.row)[data-phase]::after { right: var(--gutter); }
.phase-note {
  margin: 0;
  padding: var(--sp-2) 0 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-muted);
}
body:not([data-phases]) .phase-note { display: none; }

/* --------------------------------------------------------------------------
   1. Top bar
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  gap: 0;
  min-height: var(--topbar-total);
  padding: var(--safe-top) 0 0;
  padding-left: max(var(--sp-2), calc(50% - var(--col-max) / 2 + var(--sp-2)), var(--safe-left));
  padding-right: max(var(--sp-2), calc(50% - var(--col-max) / 2 + var(--sp-2)), var(--safe-right));
  background: var(--bg0);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-quick) linear, background-color var(--t-fade) linear;
}
.topbar.is-scrolled { border-bottom-color: var(--border); }
.topbar-back {
  position: relative;
  flex: none;
  margin-right: 0;
}
.topbar-back::before { content: ""; position: absolute; inset: 0 0 0 calc(-1 * var(--sp-2)); }   /* hit area reaches the screen edge */
.topbar-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  line-height: var(--lh-title-md);
  font-weight: var(--fw-title-md);
  letter-spacing: 0;
  font-variation-settings: var(--display-soft), var(--display-opsz-md);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  transition: opacity var(--t-fade) linear;
}
.topbar.has-back .topbar-title { margin-left: 0; }
.topbar-actions { display: flex; align-items: center; margin-left: auto; flex: none; }
.topbar .btn-icon { color: var(--text-2); }
/* Large-title tab roots: the bar title stays quiet until the content's big title scrolls under it */
body:has(#screen > .large-title) .topbar.topbar-root:not(.is-scrolled):not(.is-override) .topbar-title { opacity: 0; }
.large-title { padding: var(--sp-2) 0 var(--sp-4); }
.large-title .eyebrow { display: block; margin-bottom: var(--sp-1); }
.large-title h1 { font-size: var(--fs-title-xl); line-height: var(--lh-title-xl); font-weight: var(--fw-title-xl); letter-spacing: var(--ls-title-xl); }

/* --------------------------------------------------------------------------
   2. Tab bar
   -------------------------------------------------------------------------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-tabbar);
  display: flex;
  align-items: stretch;
  height: var(--tabbar-total);
  padding: 0 max(0px, calc(50% - var(--col-max) / 2)) var(--safe-bottom);
  background: var(--bg1);
  border-top: 1px solid var(--border);
  transition: transform var(--t-std) var(--ease), background-color var(--t-fade) linear;
}
.tab {
  position: relative;
  flex: 1 1 20%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 56px;
  padding: 0 2px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-tab);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  transition: color var(--t-quick) linear;
  -webkit-tap-highlight-color: transparent;
}
.tab::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity var(--t-quick) linear;
}
.tab-icon { display: block; width: var(--icon); height: var(--icon); }
.tab-icon .icon { width: var(--icon); height: var(--icon); display: block; }
.tab-label { display: block; max-width: 100%; overflow-wrap: anywhere; }
.tab.is-active, .tab[aria-current="page"] { color: var(--accent); }
.tab.is-active::before, .tab[aria-current="page"]::before { opacity: 1; }
.tab:active .tab-label, .tab-label.is-pressed { color: var(--text); }
.tab:focus-visible { box-shadow: var(--focus-inset); border-radius: var(--r-sm); }
.tab .tab-ring { display: inline-block; width: var(--ring-tab); height: var(--ring-tab); margin: -6px 0; }
.tab .tab-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
body.kb-open .tabbar { transform: translateY(100%); }
body.sheet-open .tabbar { pointer-events: none; }

/* --------------------------------------------------------------------------
   3. Sticky action bar (above the tab bar) and the drop dock
   -------------------------------------------------------------------------- */
.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(var(--kb), var(--tabbar-total));
  z-index: var(--z-actionbar);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3) max(var(--gutter), calc(50% - var(--col-max) / 2 + var(--gutter)));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--edge-raised);
  transition: transform var(--t-std) var(--ease), bottom var(--t-quick) var(--ease);
}
.actionbar > .btn { width: 100%; }
.actionbar .grid-2 > .btn { min-height: var(--input-h); }
.actionbar-row { display: flex; align-items: center; gap: var(--sp-3); }
.actionbar-count { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body-lg); font-weight: 600; color: var(--text); }
.actionbar-note { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-2); text-align: left; }
[data-dim] .actionbar { background: var(--bg0); border-top-color: transparent; }

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--tabbar-total);
  z-index: var(--z-dock);
  display: flex;
  align-items: center;
  height: var(--dock-h, 64px);
  padding: 0 max(var(--gutter), calc(50% - var(--col-max) / 2 + var(--gutter)));
  background: var(--surface);
  border-top: 1px solid var(--border);
  transform: translateY(100%);
  transition: transform var(--t-std) var(--ease);
}
.dock.is-open { transform: none; }
.dock .chip-row { margin: 0 calc(-1 * var(--gutter)); flex: 1 1 auto; }
.dock .chip { height: var(--chip-shop-h); min-width: 104px; justify-content: center; }
.chip.is-target {
  border-style: dashed;
  border-color: var(--accent);
  background-color: var(--surface);
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  color: var(--accent-strong);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  font-weight: var(--fw-button);
  letter-spacing: 0;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-quick) var(--ease), border-color var(--t-quick) linear,
              color var(--t-quick) linear, transform var(--t-quick) var(--ease), box-shadow var(--t-quick) linear;
}
.btn .icon { width: var(--icon-btn); height: var(--icon-btn); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: default; pointer-events: none; }
.btn-lg { min-height: var(--btn-primary-h); width: 100%; }
.btn-xl { min-height: 64px; width: 100%; }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: var(--tap-min); padding: 0 var(--sp-4); font-size: var(--fs-body); }

/* Primary: the one brass fill */
.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
  box-shadow: var(--edge-brass);
}
.btn-primary:active, .btn-primary.is-pressed {
  background: var(--accent-strong);
  box-shadow: var(--edge-brass-pressed);
  transform: scale(0.98);
}
.btn-primary:disabled, .btn-primary[aria-disabled="true"] {
  background: var(--surface-raised);
  color: var(--text-muted);
  border-color: var(--border);
  box-shadow: 0 0 0 0 transparent;
  transform: none;
}
.btn-primary .icon { color: var(--accent-text); }

/* Secondary: the other action */
.btn-secondary {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--edge-raised);
}
.btn-secondary:active, .btn-secondary.is-pressed { background: var(--surface); }
.btn-secondary:disabled, .btn-secondary[aria-disabled="true"] { color: var(--text-muted); border-color: var(--border); box-shadow: 0 0 0 0 transparent; }
.btn-secondary .icon { color: var(--text-2); }

/* Ghost: cancel, "Not from my humidor", "Later" */
.btn-ghost { background: transparent; color: var(--accent-strong); border-color: transparent; }
.btn-ghost:active, .btn-ghost.is-pressed { background: var(--accent-soft); }
.btn-ghost:disabled, .btn-ghost[aria-disabled="true"] { color: var(--text-muted); }
.btn-ghost.btn-quiet, .btn-primary ~ .btn-ghost, .btn-danger-fill ~ .btn-ghost, .btn-ignite ~ .btn-ghost { color: var(--text-2); }
.btn-ghost.btn-quiet:active, .btn-primary ~ .btn-ghost:active { background: var(--surface-raised); }

/* Danger: outline by default; filled only as the confirm step inside a sheet */
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:active, .btn-danger.is-pressed { background-color: var(--surface); background-image: linear-gradient(var(--danger-soft), var(--danger-soft)); }
.btn-danger:disabled, .btn-danger[aria-disabled="true"] { color: var(--text-muted); border-color: var(--border); }
.btn-danger .icon { color: currentColor; }
.btn-danger-fill, .btn-danger.btn-fill { background: var(--danger); background-image: none; color: var(--accent-text); border-color: var(--danger); }
.btn-danger-fill:active, .btn-danger.btn-fill:active { background: var(--danger); transform: scale(0.98); }
.btn-danger-fill .icon, .btn-danger.btn-fill .icon { color: var(--accent-text); }

/* Icon-only (always aria-label) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-quick) var(--ease), color var(--t-quick) linear;
}
.btn-icon .icon { width: var(--icon); height: var(--icon); }
.btn-icon:active, .btn-icon.is-pressed { background: var(--surface-raised); color: var(--text); }
.btn-icon:disabled, .btn-icon[aria-disabled="true"] { color: var(--text-muted); cursor: default; }
.btn-icon.btn-icon-sm { width: var(--tap-min); height: var(--tap-min); }
.btn-icon.btn-icon-raised { background: var(--surface-raised); box-shadow: var(--edge-raised); }
.btn-icon.btn-icon-outline { border: 1px solid var(--border-strong); background: var(--surface-raised); }

/* Toggle buttons (Cut · Draw · Light, pairing chips as buttons) */
.btn[aria-pressed="true"], .btn.is-on {
  background-color: var(--surface);
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: 0 0 0 0 transparent;
}
.btn[aria-pressed="true"] .icon, .btn.is-on .icon { color: var(--accent); }

/* Ignite — "Light it up", the one oversized control */
.btn-ignite {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: var(--ignite-h);
  padding: 0 var(--sp-6);
  border: 0;
  border-radius: var(--r-lg);
  background-color: var(--accent);
  background-image: var(--ignite-gradient);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: var(--fs-title-lg);
  line-height: var(--lh-title-lg);
  font-weight: var(--fw-title-lg);
  letter-spacing: var(--ls-title-lg);
  font-variation-settings: var(--display-soft), var(--display-opsz-title);
  text-align: left;
  box-shadow: var(--edge-brass), var(--shadow-float);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-quick) var(--ease), box-shadow var(--t-quick) linear, background-color var(--t-quick) linear;
}
.btn-ignite .icon { width: var(--icon-lg); height: var(--icon-lg); margin-left: auto; color: var(--accent-text); }
.btn-ignite:active, .btn-ignite.is-pressed { transform: scale(0.98); box-shadow: var(--edge-brass-hot), var(--shadow-float); }
.ignite-caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-2);
}
.ignite-caption b { font-weight: 600; color: var(--text-2); }
.ignite-links { display: flex; gap: var(--sp-2); margin: var(--sp-1) calc(-1 * var(--sp-3)) 0; }
.ignite-links .btn { min-height: var(--tap); padding: 0 var(--sp-3); font-size: var(--fs-body); }

/* --------------------------------------------------------------------------
   5. FAB — list roots whose primary action is "add"
   -------------------------------------------------------------------------- */
.fab {
  position: fixed;
  right: max(var(--gutter), calc(50% - var(--col-max) / 2 + var(--gutter)), var(--safe-right));
  bottom: calc(var(--tabbar-total) + var(--sp-4));
  z-index: var(--z-fab);
  display: grid;
  place-items: center;
  width: var(--fab);
  height: var(--fab);
  padding: 0;
  border: 0;
  border-radius: var(--r-round);
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--edge-brass), var(--shadow-float);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-std) var(--ease), opacity var(--t-fade) linear, background-color var(--t-quick) linear;
}
.fab .icon { width: var(--icon); height: var(--icon); }
.fab:active, .fab.is-pressed { background: var(--accent-strong); transform: scale(0.96); }
.fab.is-hidden, body.sheet-open .fab, [data-dim] .fab { opacity: 0; pointer-events: none; transform: translateY(var(--sp-4)); }
.fab-label {
  width: auto;
  height: var(--fab);
  padding: 0 var(--sp-5) 0 var(--sp-4);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
}

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--edge-raised), var(--shadow-card);
  color: var(--text);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--t-quick) var(--ease), border-color var(--t-quick) linear;
}
.card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  line-height: var(--lh-title-md);
  font-weight: var(--fw-title-md);
  letter-spacing: 0;
  font-variation-settings: var(--display-soft), var(--display-opsz-md);
  color: var(--text);
}
.card-sub { margin-top: 2px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.card-body { margin-top: var(--sp-2); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.card-head { display: flex; align-items: center; gap: var(--sp-3); }
.card-head > .btn-icon { margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3)) calc(-1 * var(--sp-2)) auto; }
.card-section + .card-section { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.card-raised { background: var(--surface-raised); }
.card-flat { box-shadow: 0 0 0 0 transparent; }
.card-pad-0 { padding: 0; overflow: hidden; }
.card-pad-0 > .list { border: 0; border-radius: 0; box-shadow: 0 0 0 0 transparent; }

/* Interactive cards */
a.card, button.card, .card[data-href], .card.is-tap { cursor: pointer; }
a.card:active, button.card:active, .card[data-href]:active, .card.is-tap:active, .card.is-pressed { background: var(--surface-raised); }
.card-chevron { position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.card-chevron .icon { width: var(--icon-chevron); height: var(--icon-chevron); }
.card.has-chevron { padding-right: var(--sp-10); }

/* The one card that carries brass: an active smoke */
.card-accent, .card-active-smoke {
  border-color: var(--accent-60);
  background-color: var(--surface);
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
}
.card-accent .card-sub, .card-active-smoke .card-sub { color: var(--text-2); font-variant-numeric: tabular-nums lining-nums; }

/* Banners: soft wash + leading icon in the semantic colour, never a rail */
.banner, .card.banner-warning, .card.banner-danger, .card.banner-info, .card.banner-success {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  min-height: 64px;
  background-color: var(--surface);
}
.card.banner-warning { background-image: linear-gradient(var(--warning-soft), var(--warning-soft)); }
.card.banner-danger  { background-image: linear-gradient(var(--danger-soft), var(--danger-soft)); }
.card.banner-info    { background-image: linear-gradient(var(--info-soft), var(--info-soft)); }
.card.banner-success { background-image: linear-gradient(var(--success-soft), var(--success-soft)); }
.banner-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-round);
  background: var(--surface-raised);
  box-shadow: var(--edge-raised);
  color: var(--text-2);
}
.banner-icon .icon { width: var(--icon); height: var(--icon); }
.banner-warning .banner-icon { color: var(--warning); }
.banner-danger .banner-icon  { color: var(--danger); }
.banner-info .banner-icon    { color: var(--info); }
.banner-success .banner-icon { color: var(--success); }
.banner-body { min-width: 0; }
.banner-title { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: 500; color: var(--text); }
.banner-text { margin: 2px 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.banner .card-chevron { position: static; transform: none; }
.banner.has-chevron { grid-template-columns: 40px minmax(0, 1fr) auto; padding-right: var(--sp-3); }

/* Humidor card parts */
.icon-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  box-shadow: var(--edge-raised);
  color: var(--text-muted);
}
.icon-tile.lg { width: var(--thumb); height: var(--thumb); }
.icon-tile .icon { width: var(--icon); height: var(--icon); }
.capacity {
  width: 100%;
  height: var(--capacity-h);
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.capacity > i, .capacity-fill {
  display: block;
  width: var(--pct, 0%);
  height: 100%;
  border-radius: 2px;
  background: var(--text-muted);
  transition: width var(--t-std) var(--ease);
}
.capacity.is-full > i, .capacity.is-full .capacity-fill { background: var(--warning); }
.capacity-caption { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-1); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); color: var(--warning); }
.capacity-caption .icon { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   7. Lists and rows
   -------------------------------------------------------------------------- */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--edge-raised), var(--shadow-card);
  overflow: hidden;
}
.list > li { list-style: none; }
.list:has(.is-dragging) { overflow: visible; }
.list-flat { margin: 0; padding: 0; list-style: none; }
.list-flush { --row-sep: 0px; }

.row {
  --row-sep: 72px;
  position: relative;
  display: grid;
  grid-template-columns: var(--thumb) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-3);
  width: 100%;
  min-height: var(--row-h);
  padding: 10px var(--gutter);
  background: transparent;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  cursor: default;
  transition: background-color var(--t-quick) var(--ease), transform var(--t-quick) var(--ease), box-shadow var(--t-quick) linear;
}
a.row, button.row, .row[data-href], .row[data-action], .row.is-tap { cursor: pointer; }
.row.no-lead { --row-sep: var(--gutter); grid-template-columns: minmax(0, 1fr) auto; }
.row.has-sub { min-height: var(--row-h-2); }
.row + .row::before, li + li > .row::before, .row-swipe + .row-swipe > .row::before, li + li > .row-swipe > .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--row-sep);
  right: 0;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}
.row-lead {
  display: grid;
  place-items: center;
  width: var(--thumb);
  height: var(--thumb);
  flex: none;
  color: var(--text-muted);
}
.row-lead .icon { width: var(--icon); height: var(--icon); }
.row-lead.tile { background: var(--surface-raised); border-radius: var(--r-sm); box-shadow: var(--edge-raised); }
.row-lead .thumb, .row-lead img { width: var(--thumb); height: var(--thumb); border-radius: var(--r-sm); object-fit: cover; }
.row-body { display: block; min-width: 0; }
.row-title {
  display: block;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-body-lg);
  color: var(--text);
  overflow-wrap: anywhere;
}
.row-sub { display: block; margin-top: 2px; font-size: var(--fs-body); line-height: 1.4; font-weight: 400; color: var(--text-2); overflow-wrap: anywhere; }
.row-sub b, .row-sub strong { font-weight: 600; color: var(--text-2); }
.row-sub .badge { margin-left: var(--sp-1); vertical-align: 1px; }
.row-trail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  text-align: right;
  font-size: var(--fs-body);
  line-height: 1.3;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
  white-space: nowrap;
}
.row-trail.is-row { flex-direction: row; align-items: center; gap: var(--sp-1); }
.row-trail .icon { color: var(--text-muted); width: var(--icon-chevron); height: var(--icon-chevron); }
.row-trail > .btn-icon { margin-right: calc(-1 * var(--sp-3)); }
.row-trail > .btn-icon .icon { width: var(--icon); height: var(--icon); color: var(--text-2); }
.row-chevron { color: var(--text-muted); width: var(--icon-chevron); height: var(--icon-chevron); }
.row-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); letter-spacing: var(--ls-caption); color: var(--text-muted); white-space: normal; }
.row-caption.is-warning, .row-caption.is-danger { display: inline-flex; align-items: center; gap: var(--sp-1); }
.row-caption.is-warning { color: var(--warning); }
.row-caption.is-danger { color: var(--danger); }
.row-caption .icon { width: 14px; height: 14px; color: currentColor; }

/* Row states */
a.row:active, button.row:active, .row[data-href]:active, .row[data-action]:active, .row.is-tap:active, .row.is-pressed { background: var(--surface-raised); }
.row.is-pressed .row-lead, .row:active .row-lead { color: var(--text); }
.row.is-selected { background: var(--surface-raised); box-shadow: var(--edge-raised); }
.row.is-disabled, .row[aria-disabled="true"] { color: var(--text-muted); pointer-events: none; }
.row.is-disabled .row-title, .row.is-disabled .row-sub, .row.is-disabled .row-trail,
.row[aria-disabled="true"] .row-title, .row[aria-disabled="true"] .row-sub, .row[aria-disabled="true"] .row-trail { color: var(--text-muted); }
.row.is-faded > .row-lead, .row.is-faded > .row-body { opacity: 0.7; } /* the trailing status (e.g. "Sold out") stays at full contrast */
.row:focus-visible { box-shadow: var(--focus-inset); z-index: 1; }
.row.is-selected:focus-visible { box-shadow: var(--focus-inset), var(--edge-raised); }

/* Multi-select check: replaces the leading element */
.row-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-round);
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: transparent;
  transition: background-color var(--t-quick) var(--ease), border-color var(--t-quick) linear, transform var(--t-quick) var(--ease);
}
.row-check .icon { width: 16px; height: 16px; }
.row.is-selected .row-check, .row-check.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); transform: scale(1); }
.row-check.is-on, .row.is-selected .row-check { animation: check-pop var(--t-quick) var(--ease); }
@keyframes check-pop { from { transform: scale(0.8); } to { transform: scale(1); } }

/* Drag mode */
.row-grip { color: var(--text-muted); touch-action: none; cursor: grab; }
.row-grip .icon { width: var(--icon); height: var(--icon); }
.row.is-dragging { background: var(--surface-raised); box-shadow: var(--edge-raised), var(--shadow-float); transform: scale(1.02); z-index: 3; cursor: grabbing; }
.row.is-ghost { opacity: 0.6; pointer-events: none; }
.drag-ghost { position: fixed; z-index: var(--z-toast); pointer-events: none; opacity: 0.6; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--col-max) - 2 * var(--gutter)); }
.drag-ghost .row { background: var(--surface-raised); border-radius: var(--r-md); box-shadow: var(--edge-raised), var(--shadow-float); }
.drag-count { position: absolute; top: -6px; right: -6px; }

/* Swipe reveal: wrapper holds the actions behind the sliding row */
.row-swipe { position: relative; overflow: hidden; }
.row-swipe > .row { position: relative; z-index: 1; background: var(--surface); transition: transform var(--t-std) var(--ease); will-change: transform; }
.row-swipe.is-dragging > .row { transition: none; }
.row-swipe.is-open > .row { transform: translateX(calc(-1 * var(--swipe-w, 144px))); }
.row-swipe-actions { position: absolute; top: 0; right: 0; bottom: 0; display: flex; }
.row-swipe-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  width: 72px;
  padding: 0;
  border: 0;
  background: var(--surface-raised);
  color: var(--text);
  font-size: var(--fs-caption);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: var(--ls-caption);
  cursor: pointer;
}
.row-swipe-action .icon { width: var(--icon); height: var(--icon); }
.row-swipe-action.is-primary { background: var(--accent); color: var(--accent-text); box-shadow: var(--edge-brass); }
.row-swipe-action.is-danger { background-color: var(--surface-raised); background-image: linear-gradient(var(--danger-soft), var(--danger-soft)); color: var(--danger); }
.row-swipe-action:active { filter: brightness(0.92); }

/* --------------------------------------------------------------------------
   8. Chips and chip rows
   -------------------------------------------------------------------------- */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex: none;
  height: var(--chip-h);
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  box-shadow: var(--edge-raised);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-instant) linear, border-color var(--t-instant) linear, color var(--t-instant) linear;
}
.chip::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; }   /* 48px hit area */
.chip .icon { width: var(--icon-chip); height: var(--icon-chip); color: var(--text-muted); }
.chip .swatch { width: 10px; height: 16px; }
.chip-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-round); background: var(--dot, var(--text-muted)); flex: none; }
.chip-count { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; color: var(--text-muted); }
.chip:active, .chip.is-pressed { background: var(--surface); }
.chip-on, .chip[aria-pressed="true"], .chip.is-on {
  background-color: var(--surface);
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  border-color: var(--accent);
  color: var(--accent-strong);
}
.chip-on .icon, .chip[aria-pressed="true"] .icon, .chip.is-on .icon { color: var(--accent); }
.chip-on .chip-count, .chip[aria-pressed="true"] .chip-count { color: var(--accent-strong); }
.chip:disabled, .chip[aria-disabled="true"] { color: var(--text-muted); border-color: transparent; box-shadow: 0 0 0 0 transparent; cursor: default; }
.chip-shop, .shop-mode .chip { height: var(--chip-shop-h); padding: 0 18px; font-size: var(--fs-body-lg); }
.chip-shop .icon, .shop-mode .chip .icon { width: var(--icon-chevron); height: var(--icon-chevron); }
.chip-shop::before, .shop-mode .chip::before { inset: 0; }
.chip-static { cursor: default; }
/* Flavour intensity marks: ◦ hint, ● present, ●● bold — readable without colour */
.chip[data-intensity]::after { content: "◦"; font-size: 13px; line-height: 1; color: var(--text-muted); letter-spacing: -1px; }
.chip[data-intensity="present"]::after { content: "●"; }
.chip[data-intensity="bold"]::after { content: "●●"; }
.chip-on[data-intensity]::after, .chip[aria-pressed="true"][data-intensity]::after { color: var(--accent-strong); }

.chip-row {
  --chip-fade: var(--bg0);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 calc(-1 * var(--gutter));
  padding: var(--sp-1) var(--sp-8) var(--sp-1) var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row > .chip { scroll-snap-align: start; }
.chip-row::after {
  content: "";
  position: sticky;
  right: 0;
  flex: none;
  align-self: stretch;
  width: 24px;
  margin-left: -24px;
  background: linear-gradient(90deg, transparent, var(--chip-fade));
  pointer-events: none;
}
.card .chip-row, .list .chip-row { --chip-fade: var(--surface); }
.sheet .chip-row { --chip-fade: var(--bg1); }
.chip-row.chip-wrap, .chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-1) 0;
  overflow: visible;
}
.chip-wrap::after { display: none; }

/* --------------------------------------------------------------------------
   9. Segmented control
   -------------------------------------------------------------------------- */
.seg {
  position: relative;
  display: flex;
  width: 100%;
  height: var(--seg-h);
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.seg > * {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--sp-2);
  border: 2px solid transparent;
  border-radius: calc(var(--r-md) - 2px);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--t-std) var(--ease), color var(--t-quick) linear, border-color var(--t-std) var(--ease);
}
.seg > *:active { color: var(--text); }
.seg > [aria-selected="true"], .seg > [aria-pressed="true"], .seg > .is-active, .seg > .is-on {
  background: var(--surface-raised);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: var(--edge-raised);
}
.seg > :disabled, .seg > [aria-disabled="true"] { color: var(--text-muted); cursor: default; }
.seg > * .icon { width: var(--icon-chevron); height: var(--icon-chevron); }
/* A dot on a segment means "has content" (notes, flavours, a photo) */
.seg-dot { position: absolute; top: 6px; right: 8px; width: 6px; height: 6px; border-radius: var(--r-round); background: var(--text-muted); }
.seg > [aria-selected="true"] .seg-dot, .seg > .is-active .seg-dot { background: var(--text-2); }
/* Optional sliding thumb: set --seg-n (count) and --seg-i (index) from JS; segments then stay borderless */
.seg-thumb {
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / var(--seg-n, 2));
  border-radius: calc(var(--r-md) - 2px);
  background: var(--surface-raised);
  border: 2px solid var(--accent);
  box-shadow: var(--edge-raised);
  transform: translateX(calc(100% * var(--seg-i, 0)));
  transition: transform var(--t-std) var(--ease);
  pointer-events: none;
}
.seg.has-thumb > [aria-selected="true"], .seg.has-thumb > .is-active { background: transparent; border-color: transparent; box-shadow: 0 0 0 0 transparent; }
.seg-sm { height: var(--tap-min); }
.seg-sm > * { font-size: var(--fs-caption); }

/* --------------------------------------------------------------------------
   10. Bottom sheet — the only modal
   -------------------------------------------------------------------------- */
.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 1;
  transition: opacity var(--t-sheet-in) linear;
}
.sheet-layer:not(.is-open) .sheet-backdrop { opacity: 0; }
.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--col-max);
  max-height: var(--sheet-max);
  max-height: 92dvh;
  padding: 0 var(--gutter) calc(var(--gutter) + var(--safe-bottom));
  background: var(--bg1);
  border-top: 1px solid var(--border-strong);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--edge-raised), var(--shadow-sheet);
  color: var(--text);
  outline: none;
  transition: transform var(--t-sheet-in) var(--ease);
  will-change: transform;
}
.sheet-layer:not(.is-open) .sheet { transform: translateY(100%); transition-duration: var(--t-sheet-out); transition-timing-function: var(--ease-exit); }
.sheet-layer.is-dragging .sheet { transition: none; }
.sheet[data-detent="peek"] { max-height: max(40vh, 360px); max-height: max(40dvh, 360px); }
.sheet[data-detent="half"] { max-height: 60vh; max-height: 60dvh; }
.sheet[data-detent="full"], .sheet.sheet-tall, .sheet.tall { max-height: var(--sheet-max); max-height: 92dvh; }
.sheet-handle {
  flex: none;
  width: 36px;
  height: 4px;
  margin: var(--sp-2) auto 0;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  touch-action: none;
  cursor: grab;
}
.sheet-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) 0;
}
.sheet-head.no-title { justify-content: flex-end; min-height: 0; padding: var(--sp-1) 0 0; }
.sheet-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  line-height: var(--lh-title-md);
  font-weight: var(--fw-title-md);
  letter-spacing: 0;
  font-variation-settings: var(--display-soft), var(--display-opsz-md);
  color: var(--text);
  text-align: left;
}
.sheet-head.no-title .sheet-title { display: none; }
.sheet-close { flex: none; margin-right: calc(-1 * var(--sp-3)); }
.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-1);
}
.sheet-text { margin: 0 0 var(--sp-4); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.sheet-actions { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-4); }
.sheet-actions .btn { width: 100%; }
.sheet .input, .sheet .select, .sheet .textarea, .sheet .stepper { background: var(--bg1); }
.sheet .card, .sheet .list { background: var(--surface); }

/* --------------------------------------------------------------------------
   11. Toasts
   -------------------------------------------------------------------------- */
.toast-layer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-total) + var(--sp-3));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--gutter);
  pointer-events: none;
}
body.has-actionbar .toast-layer, body[data-actionbar] .toast-layer { bottom: calc(var(--tabbar-total) + var(--actionbar-h) + var(--sp-3)); }
[data-dim] .toast-layer { bottom: calc(var(--safe-bottom) + 160px); }   /* clears the Pause · Relight · Note row and its hint */
.toast {
  pointer-events: none;   /* taps fall through to the page under it for its few seconds; only the action button takes them */
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: calc(var(--col-max) - 2 * var(--gutter));
  min-height: var(--toast-h);
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-top-color: var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--edge-raised);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.4;
  font-weight: 500;
  transition: opacity var(--t-toast-in) linear, transform var(--t-toast-in) var(--ease);
}
.toast:not(.is-in), .toast.is-out { opacity: 0; transform: translateY(12px); }
.toast-icon { display: inline-flex; flex: none; color: var(--text-2); }
.toast-icon .icon { width: var(--icon); height: var(--icon); }
.toast-text { flex: 1 1 auto; min-width: 0; padding: var(--sp-2) 0; }
.toast .btn-ghost, .toast-action { flex: none; min-height: var(--tap); padding: 0 var(--sp-3); color: var(--accent-strong); pointer-events: auto; }
.toast.is-info .toast-icon { color: var(--info); }
.toast.is-warning .toast-icon { color: var(--warning); }

/* --------------------------------------------------------------------------
   12. Forms: field, input, select, textarea, stepper, switch, slider
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  color: var(--text-2);
}
.field-help { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); color: var(--text-muted); }
.field-error, .field.is-error .field-help { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--danger); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); }
.field-error .icon, .field.is-error .field-help .icon { width: 14px; height: 14px; }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 56px; }
.field-row > label, .field-row .field-label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body-lg); font-weight: 500; color: var(--text); letter-spacing: 0; }

.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: var(--input-h);
  padding: 0 var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.4;
  font-weight: 400;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t-quick) linear, box-shadow var(--t-quick) linear, background-color var(--t-quick) linear;
}
.input.num, .input[inputmode="numeric"], .input[inputmode="decimal"], .input[type="number"] { font-variant-numeric: tabular-nums lining-nums; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: var(--focus); outline: none; }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-raised); color: var(--text-muted); border-color: var(--border); }
.input[readonly], .textarea[readonly] { border-color: transparent; background: transparent; padding-left: 0; }
.field.is-error .input, .field.is-error .select, .field.is-error .textarea, .input.is-error { border-color: var(--danger); }
.textarea { min-height: var(--textarea-min); padding: var(--sp-3) var(--sp-4); line-height: 1.45; resize: vertical; }
.textarea.is-compact { min-height: calc(var(--input-h) + 8px); }

/* Select: native picker with a chevron drawn from tokens */
.select { padding-right: var(--sp-10); background-image: none; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.75px solid var(--text-muted);
  border-bottom: 1.75px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select option { background: var(--surface); color: var(--text); }

/* Input with a unit suffix ("in", "mm", "°F", "%RH") or a leading icon (search) */
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { flex: 1 1 auto; }
.input-wrap.has-suffix .input { padding-right: 64px; }
.input-suffix {
  position: absolute;
  right: var(--sp-4);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-2);
  pointer-events: none;
  white-space: nowrap;
}
.input-wrap.has-icon .input { padding-left: 46px; }
.input-wrap > .icon { position: absolute; left: 14px; width: var(--icon); height: var(--icon); color: var(--text-muted); pointer-events: none; }
.input-wrap .input-clear { position: absolute; right: 2px; }

/* Stepper: − value + */
.stepper {
  display: inline-flex;
  align-items: center;
  height: var(--input-h);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-variant-numeric: tabular-nums lining-nums;
}
.stepper.is-block { display: flex; width: 100%; }
.stepper > button, .stepper-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--stepper-btn);
  height: var(--stepper-btn);
  margin: 1px;
  padding: 0;
  border: 0;
  border-radius: calc(var(--r-sm) - 2px);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color var(--t-quick) var(--ease);
}
.stepper > button .icon, .stepper-btn .icon { width: var(--icon); height: var(--icon); }
.stepper > button:active, .stepper-btn:active, .stepper > button.is-pressed { background: var(--surface-raised); }
.stepper > button:disabled, .stepper-btn:disabled { color: var(--text-muted); cursor: default; }
.stepper > button:focus-visible, .stepper-btn:focus-visible { box-shadow: var(--focus-inset); }
.stepper-value {
  flex: 1 1 auto;
  min-width: 64px;
  padding: 0 var(--sp-2);
  text-align: center;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.stepper-value .unit { font-size: var(--fs-body); }

/* Switch: 52×32, knob 28 */
.switch {
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--switch-w);
  height: var(--switch-h);
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-quick) linear, border-color var(--t-quick) linear, box-shadow var(--t-quick) linear;
}
.switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: var(--switch-knob);
  height: var(--switch-knob);
  border-radius: var(--r-round);
  background: var(--text);
  transition: transform var(--t-quick) var(--ease), background-color var(--t-quick) linear;
}
.switch > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch[aria-checked="true"], .switch.is-on, .switch:has(> input:checked) {
  background: var(--accent);
  border-color: transparent;
  box-shadow: var(--edge-brass);
}
.switch[aria-checked="true"]::after, .switch.is-on::after, .switch:has(> input:checked)::after {
  transform: translateX(calc(var(--switch-w) - var(--switch-knob) - 4px));
  background: var(--accent-text);
}
.switch:disabled, .switch[aria-disabled="true"], .switch:has(> input:disabled) { border-color: var(--border); cursor: default; }
.switch:disabled::after, .switch[aria-disabled="true"]::after, .switch:has(> input:disabled)::after { background: var(--text-muted); }
.switch:focus-visible, .switch:has(> input:focus-visible) { box-shadow: var(--focus); }
.switch[aria-checked="true"]:focus-visible, .switch.is-on:focus-visible { box-shadow: var(--focus), var(--edge-brass); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 56px; width: 100%; text-align: left; }
.switch-row .switch-label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body-lg); font-weight: 500; color: var(--text); }
.switch-row .switch-sub { display: block; margin-top: 2px; font-size: var(--fs-caption); font-weight: var(--fw-caption); color: var(--text-muted); }

/* Slider: 4px track, 28px brass knob, 44px strip. JS sets --pct for the fill. */
.slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--tap-min);
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
  --pct: 0%;
}
.slider:focus { outline: none; }
.slider::-webkit-slider-runnable-track {
  height: var(--slider-track);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 0 var(--pct), var(--border) var(--pct) 100%);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--slider-knob);
  height: var(--slider-knob);
  margin-top: calc((var(--slider-track) - var(--slider-knob)) / 2);
  border-radius: var(--r-round);
  background: var(--accent);
  border: 2px solid var(--bg0);
  box-shadow: var(--edge-brass);
  transition: transform var(--t-quick) var(--ease);
}
.slider:active::-webkit-slider-thumb { transform: scale(1.1); }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus), var(--edge-brass); }
.slider::-moz-range-track { height: var(--slider-track); border-radius: 2px; background: var(--border); }
.slider::-moz-range-progress { height: var(--slider-track); border-radius: 2px; background: var(--accent); }
.slider::-moz-range-thumb { width: var(--slider-knob); height: var(--slider-knob); border-radius: var(--r-round); background: var(--accent); border: 2px solid var(--bg0); box-shadow: var(--edge-brass); }
.slider:focus-visible::-moz-range-thumb { box-shadow: var(--focus); }
.slider:disabled { cursor: default; }
.slider:disabled::-webkit-slider-runnable-track { background: var(--border-strong); }
.slider:disabled::-webkit-slider-thumb { background: var(--border-strong); box-shadow: 0 0 0 0 transparent; }
.slider:disabled::-moz-range-progress { background: var(--border-strong); }
.slider:disabled::-moz-range-thumb { background: var(--border-strong); box-shadow: 0 0 0 0 transparent; }
.slider-wrap { position: relative; padding-top: 40px; }
.slider-bubble {
  position: absolute;
  top: 0;
  left: calc(14px + (100% - 28px) * var(--p, 0));
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.3;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  pointer-events: none;
}
.slider-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-caption);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-muted);
}

/* Checkbox / radio (checklists inside sheets) */
.check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  cursor: pointer;
}
.check > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  color: transparent;
  transition: background-color var(--t-instant) linear, border-color var(--t-instant) linear;
}
.check-box .icon { width: 16px; height: 16px; }
.check > input:checked + .check-box, .check.is-on .check-box { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.check > input:focus-visible + .check-box { box-shadow: var(--focus); }
.check-label { flex: 1 1 auto; font-size: var(--fs-body-lg); font-weight: 500; color: var(--text); }

/* --------------------------------------------------------------------------
   13. Stat tiles, rings, timer, thirds
   -------------------------------------------------------------------------- */
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-height: var(--stat-min);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--edge-raised), var(--shadow-card);
  color: var(--text);
  text-align: left;
  text-decoration: none;
}
.card .stat, .stat.is-raised { background: var(--surface-raised); }
.stat-label {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  font-weight: var(--fw-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  font-weight: var(--fw-stat);
  letter-spacing: var(--ls-stat);
  font-variation-settings: var(--display-soft), var(--display-opsz-num);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
  white-space: nowrap;
}
.stat-value .unit { font-family: var(--font-body); font-size: calc(1em - 2px); font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.stat-delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; letter-spacing: var(--ls-caption); font-variant-numeric: tabular-nums lining-nums; color: var(--text-2); }
.stat-delta.is-up { color: var(--success); }
.stat-delta.is-down { color: var(--danger); }
.stat-delta.is-up::before { content: "▲"; font-size: 0.7em; }
.stat-delta.is-down::before { content: "▼"; font-size: 0.7em; }
.stat-context { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); color: var(--text-2); }
.stat-spark { margin: auto calc(-1 * var(--sp-1)) calc(-1 * var(--sp-1)); padding-top: var(--sp-1); height: 36px; opacity: 0.7; }
.stat-spark svg, .stat-spark .chart { width: 100%; height: 32px; display: block; }
.stat.is-live { background-color: var(--surface); background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); border-color: var(--accent-60); }
a.stat:active, button.stat:active, .stat[data-href]:active { background: var(--surface-raised); }

/* Ring: SVG from App.chart.ring inside a sized box; optional HTML centre overlay */
.ring {
  --ring-size: 240px;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--ring-size);
  height: var(--ring-size);
  flex: none;
}
.ring > svg, .ring .chart { width: 100%; height: 100%; display: block; overflow: visible; }
.ring-sm, .ring.is-inline { --ring-size: var(--ring-inline); }
.ring-tab { --ring-size: var(--ring-tab); }
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  text-align: center;
  pointer-events: none;
}
.ring-eyebrow {
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  font-weight: var(--fw-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--t-fade) linear;
}
.ring-value {
  font-family: var(--font-display);
  font-size: var(--fs-timer);
  line-height: var(--lh-timer);
  font-weight: var(--fw-timer);
  letter-spacing: var(--ls-timer);
  font-variation-settings: var(--display-soft), var(--display-opsz-num);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.ring-sub { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums lining-nums; }
.ring.is-paused .ring-value, .ring.is-paused .ring-eyebrow { color: var(--text-muted); }
.ring-badge { position: absolute; right: 6%; bottom: 12%; animation: badge-pop var(--t-quick) var(--ease); }
@keyframes badge-pop { from { transform: scale(0.8); } to { transform: scale(1); } }
.ring-ember { animation: ember var(--t-ambient) var(--ease-ambient) infinite alternate; transform-origin: center; }
@keyframes ember { from { opacity: 0.55; } to { opacity: 1; } }
.ring.is-paused .ring-ember, [data-dim] .ring-ember { animation: none; opacity: 1; }
.ring-progress { transition: stroke var(--t-slow) linear; }
.ring.is-flash .ring-progress { stroke: var(--accent-strong); transition: none; }
.ring-overrun { opacity: 0.95; }

/* Timer digits */
.timer {
  font-family: var(--font-display);
  font-size: var(--fs-timer);
  line-height: var(--lh-timer);
  font-weight: var(--fw-timer);
  letter-spacing: var(--ls-timer);
  font-variation-settings: var(--display-soft), var(--display-opsz-num);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.timer.is-paused { color: var(--text-muted); }
.timer-sub { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums lining-nums; }
.timer-sub.is-over { color: var(--text-2); }
[data-dim] .timer { font-size: var(--fs-timer-dim); }
[data-dim] .ring { --ring-size: 180px; }
@media (max-width: 360px) {
  .timer, .ring-value { font-size: var(--fs-timer-sm); }
  .ring:not(.ring-sm, .ring-tab, .is-inline) { --ring-size: var(--ring-small); }   /* only the big smoke ring shrinks */
  [data-dim] .timer { font-size: var(--fs-timer-dim-sm); }
}

/* Thirds / confidence: three segments. data-level fills in muted (confidence);
   .is-done / .is-active fill in brass (a live smoke's thirds). */
.thirds { display: inline-flex; gap: 3px; width: 56px; height: 6px; flex: none; vertical-align: middle; }
.thirds.is-wide { width: 100%; height: 8px; gap: 4px; }
.thirds > i, .thirds-seg { flex: 1 1 0; border-radius: 3px; background: var(--border); transition: background-color var(--t-std) var(--ease); }
.thirds[data-level="1"] > :nth-child(-n+1), .thirds[data-level="2"] > :nth-child(-n+2), .thirds[data-level="3"] > :nth-child(-n+3) { background: var(--text-2); }
.thirds > .is-done { background: var(--accent-strong); }
.thirds > .is-active { background: var(--accent); }
.thirds > .is-warning { background: var(--warning); }
.conf { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); font-weight: var(--fw-caption); color: var(--text-2); white-space: nowrap; }
.stat > .conf { white-space: normal; max-width: 100%; }   /* in a half-width stat tile the words wrap instead of pushing the page wider */
.dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.dots > i { width: 8px; height: 8px; border-radius: var(--r-round); border: 1px solid var(--border-strong); background: transparent; }
.dots > i.is-on { background: var(--text-2); border-color: var(--text-2); }

/* --------------------------------------------------------------------------
   14. Rating (tap control) and stars (display)
   -------------------------------------------------------------------------- */
/* Axis label and value stack in the left column so five 48px leaves (240px) always fit beside them at 360-390px wide */
.rating-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label rating" "value rating"; align-items: center; column-gap: var(--sp-3); min-height: 56px; }
.rating-row > .rating { grid-area: rating; justify-self: end; }
.rating-label { grid-area: label; align-self: end; min-width: 0; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); color: var(--text); }
.rating-value { grid-area: value; align-self: start; font-size: var(--fs-body-lg); line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
.rating-row.is-inline { display: flex; }
.rating-row.is-inline .rating-label { flex: 1 1 auto; }
.rating-row.is-inline .rating-value { min-width: 48px; text-align: right; }
.rating-word { font-size: var(--fs-caption); font-weight: var(--fw-caption); color: var(--text-2); }
.rating { display: inline-flex; flex: none; }
.rating > button, .rating-step {
  display: grid;
  place-items: center;
  width: var(--rating-target);
  height: var(--rating-target);
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--border-strong);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.rating .icon { width: var(--rating-glyph); height: var(--rating-glyph); fill: none; transition: fill var(--t-instant) linear, color var(--t-instant) linear, transform var(--t-quick) var(--ease); }
.rating > :nth-child(1) .icon { transition-delay: 0ms; }
.rating > :nth-child(2) .icon { transition-delay: calc(var(--t-stagger) * 1); }
.rating > :nth-child(3) .icon { transition-delay: calc(var(--t-stagger) * 2); }
.rating > :nth-child(4) .icon { transition-delay: calc(var(--t-stagger) * 3); }
.rating > :nth-child(5) .icon { transition-delay: calc(var(--t-stagger) * 4); }
.rating .is-filled .icon, .rating [aria-checked="true"] .icon, .rating .is-filled.icon { color: var(--accent); fill: var(--accent); }
.rating .is-filled .icon path:nth-child(2), .rating [aria-checked="true"] .icon path:nth-child(2) { stroke: var(--accent-text); }
.rating .is-filled .icon path:nth-child(n+3), .rating [aria-checked="true"] .icon path:nth-child(n+3) { display: none; }
.rating > button:active .icon, .rating-step:active .icon { transform: scale(1.1); transition-delay: 0ms; }
.rating[aria-disabled="true"] > button, .rating > button:disabled, .rating.is-disabled > button { color: var(--border); cursor: default; }
.rating[aria-disabled="true"] .is-filled .icon { color: var(--border-strong); fill: var(--border-strong); }

.stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
  font-size: var(--fs-body);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-2);
  white-space: nowrap;
}
.stars .icon { width: var(--stars-glyph); height: var(--stars-glyph); color: var(--border); fill: none; }
.stars .icon path:nth-child(n+3) { display: none; }
.stars .is-on .icon, .stars .icon.is-on { color: var(--accent); fill: var(--accent); }
.stars .is-on .icon path:nth-child(2), .stars .icon.is-on path:nth-child(2) { stroke: var(--accent-text); }
.stars-count { margin-left: 6px; }
.stars.is-lg .icon { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   15. Badges and pills
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--surface-raised);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  line-height: 1;
  font-weight: var(--fw-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  flex: none;
}
.badge .icon { width: 12px; height: 12px; }
.badge-neutral { background: var(--surface-raised); color: var(--text-2); }
/* "Accent" badge = the oxblood band ribbon ("Home", "Box"). Never brass. */
.badge-accent, .badge-secondary, .badge-home { background: var(--secondary); color: var(--secondary-text); }
.badge-success { background-color: var(--surface); background-image: linear-gradient(var(--success-soft), var(--success-soft)); color: var(--success); }
.badge-warning { background-color: var(--surface); background-image: linear-gradient(var(--warning-soft), var(--warning-soft)); color: var(--warning); }
.badge-danger  { background-color: var(--surface); background-image: linear-gradient(var(--danger-soft), var(--danger-soft)); color: var(--danger); }
.badge-info    { background-color: var(--surface); background-image: linear-gradient(var(--info-soft), var(--info-soft)); color: var(--info); }
.badge-count { font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.02em; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--ls-caption);
  white-space: nowrap;
  vertical-align: middle;
  flex: none;
  font-variant-numeric: tabular-nums lining-nums;
}
.pill .icon { width: 14px; height: 14px; color: var(--text-muted); }
.pill .dot, .pill-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-round); background: var(--text-muted); flex: none; }
.pill-success .dot, .pill-success .pill-dot { background: var(--success); }
.pill-warning .dot, .pill-warning .pill-dot { background: var(--warning); }
.pill-danger .dot, .pill-danger .pill-dot { background: var(--danger); }
.pill-info .dot, .pill-info .pill-dot { background: var(--info); }
.pill-accent .dot, .pill-live .dot { background: var(--accent); }
.pill-neutral { color: var(--text-2); }
.pill-offline .icon { color: var(--info); }
button.pill { cursor: pointer; }
button.pill:active { background: var(--surface); }

/* --------------------------------------------------------------------------
   16. Empty states, sections, spec grid
   -------------------------------------------------------------------------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  min-height: 60vh;
  padding: 18vh 0 var(--sp-6);
  text-align: left;
}
.empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-round);
  background: var(--surface-raised);
  box-shadow: var(--edge-raised);
  color: var(--text-muted);
}
.empty-icon .icon { width: var(--icon-empty); height: var(--icon-empty); }
.empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  line-height: var(--lh-title-md);
  font-weight: var(--fw-title-md);
  letter-spacing: 0;
  font-variation-settings: var(--display-soft), var(--display-opsz-md);
  color: var(--text);
}
.empty-text { margin: 0; max-width: 36ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.empty-text code { color: var(--text-2); }
.empty-actions { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; margin-top: auto; padding-top: var(--sp-6); }
.empty.is-compact { min-height: 0; padding: var(--sp-6) 0; }
.empty.is-compact .empty-actions { margin-top: var(--sp-2); padding-top: 0; }
.dashed-box, .photo-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 120px;
  padding: var(--sp-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}
.photo-slot { min-height: 96px; }
.photo-slot .icon, .dashed-box .icon { width: var(--icon); height: var(--icon); }
.dashed-box:active, .photo-slot:active { background: var(--surface-raised); }

.section { margin-top: var(--sp-6); }
.section > .section-title { margin-bottom: var(--sp-2); }
.section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 24px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  font-weight: var(--fw-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
  font-variation-settings: normal;
}
.section-title::after { content: ""; order: 1; flex: 1 1 auto; height: 1px; background: var(--border); }
.section-title > * { order: 0; }
.section-title > .section-link, .section-title > .phase-tag { order: 2; }
.section-title.no-rule::after { display: none; }
.section-link {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--tap);
  margin: -12px calc(-1 * var(--sp-2)) -12px 0;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--accent-strong);
  font-size: var(--fs-body);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.section-link:active { background: var(--accent-soft); }
.section-link .icon { width: var(--icon-chevron); height: var(--icon-chevron); }
.section-sub { margin: calc(-1 * var(--sp-1)) 0 var(--sp-2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }

/* Spec grid: label / value rows in tobacconist order */
.spec-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; }
.spec-grid > dt, .spec-grid > dd, .spec-label, .spec-value {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
  margin: 0;
}
.spec-grid > :nth-child(-n+2) { border-top: 0; }
.spec-grid > dt, .spec-label { padding-right: var(--sp-4); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); white-space: nowrap; }
.spec-grid > dd, .spec-value {
  justify-content: flex-end;
  gap: var(--sp-2);
  text-align: right;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
  overflow-wrap: anywhere;
}
.spec-grid .swatch { width: 20px; height: 32px; }
.spec-grid .unit { font-size: var(--fs-body); }

/* --------------------------------------------------------------------------
   17. Avatars, swatches, strength
   -------------------------------------------------------------------------- */
.avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--r-round);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden;
  vertical-align: middle;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95); }
.avatar .icon { width: var(--icon); height: var(--icon); color: var(--text-muted); }
.avatar-sm { width: var(--avatar-sm); height: var(--avatar-sm); font-size: var(--fs-caption); }
.avatar-lg { width: var(--avatar-lg); height: var(--avatar-lg); font-size: 22px; }
.avatar-wrap { position: relative; display: inline-block; flex: none; }
.avatar-wrap.is-here::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--r-round);
  background: var(--success);
  box-shadow: 0 0 0 2px var(--bg0);
}
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--bg0); }
.avatar-stack .avatar + .avatar { margin-left: -8px; }

/* Wrapper swatch: data, never decoration. Always named within 8px or in aria-label. */
.swatch {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 22px;
  border-radius: var(--r-xs);
  background: var(--wrap, var(--surface-raised));
  box-shadow: inset 0 0 0 1px var(--swatch-keyline);
  vertical-align: middle;
  transition: width var(--t-std) var(--ease), height var(--t-std) var(--ease);
}
.swatch-inline, .swatch.is-inline { width: 10px; height: 16px; }
.swatch-card, .swatch.is-card { width: 20px; height: 32px; }
.swatch-ref, .swatch.is-ref { width: 44px; height: 70px; }
.swatch-band, .swatch.is-band { display: block; width: 100%; height: 96px; }
.swatch.is-revealed { width: 44px; height: 70px; }
.swatch[data-wrap="candela"] { --wrap: var(--wrap-candela); }
.swatch[data-wrap="claro"] { --wrap: var(--wrap-claro); }
.swatch[data-wrap="colorado-claro"], .swatch[data-wrap="coloradoClaro"] { --wrap: var(--wrap-colorado-claro); }
.swatch[data-wrap="colorado"] { --wrap: var(--wrap-colorado); }
.swatch[data-wrap="colorado-maduro"], .swatch[data-wrap="coloradoMaduro"] { --wrap: var(--wrap-colorado-maduro); }
.swatch[data-wrap="maduro"] { --wrap: var(--wrap-maduro); }
.swatch[data-wrap="oscuro"] { --wrap: var(--wrap-oscuro); }
.swatch-label { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); color: var(--text-2); }
.swatch-label b { font-weight: 600; color: var(--text); }
/* Wrapper guide band: swatch + bg0 "hold your cigar here" gutter */
.wrap-band { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: var(--sp-3); align-items: stretch; }
.wrap-band-gutter { border-radius: var(--r-xs); background: var(--bg0); border: 1px dashed var(--border-strong); display: grid; place-items: center; color: var(--text-muted); font-size: var(--fs-caption); text-align: center; padding: var(--sp-1); writing-mode: vertical-rl; }
.wrap-band-name { margin-top: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-title-md); line-height: var(--lh-title-md); font-weight: var(--fw-title-md); font-variation-settings: var(--display-soft), var(--display-opsz-md); color: var(--text); }
.wrap-band-leaves { font-size: var(--fs-body); color: var(--text-2); }

/* Strength: five leaf dots from Claro tan to Oscuro dark, beside the word. Never a number. */
.strength { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); color: var(--text-2); white-space: nowrap; }
.strength-dots { display: inline-flex; gap: 3px; }
.strength-dots > i, .strength-dot { width: 10px; height: 16px; border-radius: var(--r-xs); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-strong); }
.strength[data-level="1"] > .strength-dots > :nth-child(-n+1), .strength[data-level="2"] > .strength-dots > :nth-child(-n+2),
.strength[data-level="3"] > .strength-dots > :nth-child(-n+3), .strength[data-level="4"] > .strength-dots > :nth-child(-n+4),
.strength[data-level="5"] > .strength-dots > :nth-child(-n+5) { box-shadow: inset 0 0 0 1px var(--swatch-keyline); }
.strength[data-level] > .strength-dots > :nth-child(1) { --dot: var(--wrap-claro); }
.strength[data-level] > .strength-dots > :nth-child(2) { --dot: var(--wrap-colorado-claro); }
.strength[data-level] > .strength-dots > :nth-child(3) { --dot: var(--wrap-colorado); }
.strength[data-level] > .strength-dots > :nth-child(4) { --dot: var(--wrap-colorado-maduro); }
.strength[data-level] > .strength-dots > :nth-child(5) { --dot: var(--wrap-oscuro); }
.strength[data-level="1"] > .strength-dots > :nth-child(-n+1), .strength[data-level="2"] > .strength-dots > :nth-child(-n+2),
.strength[data-level="3"] > .strength-dots > :nth-child(-n+3), .strength[data-level="4"] > .strength-dots > :nth-child(-n+4),
.strength[data-level="5"] > .strength-dots > :nth-child(-n+5) { background: var(--dot); }
.strength-word { font-weight: 500; color: var(--text); }

/* --------------------------------------------------------------------------
   18. Timeline, hero photo, thumbs
   -------------------------------------------------------------------------- */
.timeline { --timeline-bg: var(--bg0); position: relative; margin: 0; padding: 0 0 0 44px; list-style: none; }
.card .timeline, .list .timeline { --timeline-bg: var(--surface); }
.timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 21px; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding: 0 0 var(--sp-5); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -28px;
  width: 12px;
  height: 12px;
  border-radius: var(--r-round);
  background: var(--border-strong);
  box-shadow: 0 0 0 3px var(--timeline-bg);
}
.timeline-item.is-done::before { background: var(--success); }
.timeline-item.is-alert::before { background: var(--warning); }
.timeline-item.is-live::before { background: var(--accent); }
.timeline-item.is-relight::before { background: var(--border-strong); }
.timeline-time { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); font-variant-numeric: tabular-nums lining-nums; color: var(--text-muted); }
.timeline-title { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; color: var(--text); }
.timeline-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.timeline-photo { display: block; width: 120px; height: 90px; margin-top: var(--sp-2); border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--border); filter: saturate(0.95); }
.timeline-caption { margin-top: var(--sp-1); font-size: var(--fs-caption); color: var(--text-muted); font-variant-numeric: tabular-nums lining-nums; }
.timeline .section-title { margin: var(--sp-2) 0 var(--sp-3); }

.hero-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 var(--sp-4);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  overflow: hidden;
}
.hero-photo > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95); }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: var(--photo-vignette); pointer-events: none; }
.hero-caption {
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--fs-title-lg);
  line-height: var(--lh-title-lg);
  font-weight: var(--fw-title-lg);
  letter-spacing: var(--ls-title-lg);
  font-variation-settings: var(--display-soft), var(--display-opsz-title);
  color: var(--on-photo);
}
.hero-caption small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; color: var(--on-photo-2); }
.hero-chip { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 1; }
.hero-photo.is-empty { display: grid; place-items: center; padding: var(--sp-6) var(--sp-8); }
.hero-photo.is-empty::after { display: none; }
.hero-photo.is-empty .hero-caption { color: var(--text); }              /* no photo, no vignette: ordinary text tokens */
.hero-photo.is-empty .hero-caption small { color: var(--text-2); }
.hero-photo .cigar-silhouette { width: 100%; max-width: 240px; height: auto; }
.cigar-silhouette { display: block; width: 100%; aspect-ratio: 12 / 5; }
.thumb { display: block; flex: none; width: var(--thumb); height: var(--thumb); border-radius: var(--r-sm); background: var(--surface-raised); object-fit: cover; filter: saturate(0.95); overflow: hidden; }
.thumb-lg { width: 72px; height: 72px; }
.thumb-hero { width: 96px; height: 72px; border-radius: var(--r-lg); }
.thumb .cigar-silhouette { width: 100%; height: 100%; padding: 4px; }
.thumb-badge { position: absolute; top: 4px; left: 4px; }
.photo-grid { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.photo-grid > * { position: relative; }

/* --------------------------------------------------------------------------
   19. Prompt card, skeleton, kbd/code
   -------------------------------------------------------------------------- */
.prompt {
  position: relative;
  overflow: hidden;
  animation: prompt-in var(--t-std) var(--ease);
}
.prompt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-soft);
  pointer-events: none;
  animation: prompt-wash calc(var(--t-slow) * 5) linear var(--t-std) forwards;
}
.prompt > * { position: relative; }
.prompt-text { margin: var(--sp-2) 0 0; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: 500; color: var(--text); }
.prompt-notice { margin: var(--sp-1) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.prompt-actions { display: flex; gap: var(--sp-2); margin: var(--sp-2) calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)); }
.prompt-actions .btn { min-height: var(--tap); padding: 0 var(--sp-3); }
.prompt.is-collapsed { padding: var(--sp-2) var(--sp-4); min-height: var(--tap); display: flex; align-items: center; }
.prompt.is-collapsed .prompt-text, .prompt.is-collapsed .prompt-notice, .prompt.is-collapsed .prompt-actions { display: none; }
@keyframes prompt-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes prompt-wash { from { opacity: 1; } to { opacity: 0; } }

.skeleton {
  position: relative;
  display: block;
  min-height: 1em;
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  color: transparent;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer 1.6s linear infinite;
}
.skeleton-text { height: 15px; width: 60%; }
.skeleton-title { height: 20px; width: 40%; }
.skeleton-row { height: var(--row-h); border-radius: 0; }
.skeleton-tile { height: var(--stat-min); }
@keyframes shimmer { to { transform: translateX(100%); } }

.kbd {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  background: var(--surface-raised);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: 1.2;
  font-weight: 600;
  vertical-align: middle;
}
.code, code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--surface-raised);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.92em;
}
pre.code, .code-block {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--bg1);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.box-code { font-family: var(--font-mono); font-size: var(--fs-body); letter-spacing: 0.04em; color: var(--text-2); }

/* Chart container (App.chart output) and legend */
.chart { display: block; max-width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-body); font-variant-numeric: tabular-nums lining-nums; }
.chart-wrap { width: 100%; }
.chart-wrap .chart { width: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); color: var(--text-2); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--chart-1); }
.legend .s2 i { background: var(--chart-2); }
.legend .s3 i { background: var(--chart-3); }
.legend .s4 i { background: var(--chart-4); }
.legend .s5 i { background: var(--chart-5); }
.legend .s6 i { background: var(--chart-6); }
.legend .band i { background: var(--chart-band); border: 1px solid var(--border); }

/* Voice note bars (fake waveform) */
.wave { display: flex; align-items: center; gap: 2px; height: 32px; }
.wave > i { flex: 1 1 0; height: calc(4px + 28px * var(--h, 0.3)); border-radius: 1px; background: var(--border-strong); }
.wave > i.is-played { background: var(--text-2); }
.record-btn { width: 72px; height: 72px; border-radius: var(--r-round); border: 2px solid var(--accent); background: transparent; color: var(--accent); display: grid; place-items: center; }
.record-btn.is-recording { background: var(--accent); color: var(--accent-text); box-shadow: var(--edge-brass); }
.record-btn .icon { width: var(--icon-lg); height: var(--icon-lg); }

/* --------------------------------------------------------------------------
   20. Extra-dim (lounge mode)
   -------------------------------------------------------------------------- */
.dim-layer, .kbd-dim {
  position: fixed;
  inset: 0;
  z-index: var(--z-dim);
  background: var(--dim-bg);
  pointer-events: none;
  opacity: 0;
  animation: dim-veil var(--t-slow) var(--ease-exit) both;   /* lights down: a one-shot veil that settles to transparent */
}
@keyframes dim-veil { from { opacity: 1; } to { opacity: 0; } }
[data-dim] .topbar, [data-dim] .tabbar, [data-dim] .fab, [data-dim] .hero-photo, [data-dim] .thumb, [data-dim] img { display: none; }
[data-dim] .card, [data-dim] .list, [data-dim] .stat { box-shadow: 0 0 0 0 transparent; }
[data-dim] .btn-secondary { background: transparent; }
.dim-hint { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); transition: opacity var(--t-slow) linear; }
.dim-hint.is-faded { opacity: 0; }
.dim-prompt { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text); }
.hold-pill { position: relative; overflow: hidden; }
.hold-pill::before { content: ""; position: absolute; inset: 0; width: var(--hold, 0%); background: var(--accent-soft); }

/* --------------------------------------------------------------------------
   21. Focus composition for components that carry their own box-shadow
   -------------------------------------------------------------------------- */
.btn-primary:focus-visible { box-shadow: var(--focus), var(--edge-brass); }
.btn-secondary:focus-visible { box-shadow: var(--focus), var(--edge-raised); }
.btn-ignite:focus-visible { box-shadow: var(--focus), var(--edge-brass), var(--shadow-float); }
.fab:focus-visible { box-shadow: var(--focus), var(--edge-brass), var(--shadow-float); }
.card:focus-visible, .stat:focus-visible, .list:focus-visible { box-shadow: var(--focus), var(--edge-raised), var(--shadow-card); }
.chip:focus-visible { box-shadow: var(--focus), var(--edge-raised); }
.toast .btn:focus-visible, .sheet-close:focus-visible, .section-link:focus-visible { box-shadow: var(--focus); }
.seg > *:focus-visible { box-shadow: var(--focus); z-index: 2; }
.rating > button:focus-visible, .rating-step:focus-visible { box-shadow: var(--focus); }
.swatch:focus-visible, .row-swipe-action:focus-visible, .photo-slot:focus-visible, .dashed-box:focus-visible { box-shadow: var(--focus); }
.sheet:focus-visible { box-shadow: var(--edge-raised), var(--shadow-sheet); }

/* --------------------------------------------------------------------------
   22. Large text and high contrast
   -------------------------------------------------------------------------- */
html[data-large-text] .actionbar .grid-2, html[data-text="large"] .actionbar .grid-2,
html[data-large-text] .sheet-actions .grid-2, html[data-text="large"] .sheet-actions .grid-2 { grid-template-columns: minmax(0, 1fr); }
html[data-large-text] .spec-grid, html[data-text="large"] .spec-grid { grid-template-columns: minmax(0, 1fr); }
html[data-large-text] .spec-grid > dt, html[data-text="large"] .spec-grid > dt { min-height: 0; padding-bottom: 0; }
html[data-large-text] .spec-grid > dd, html[data-text="large"] .spec-grid > dd { justify-content: flex-start; text-align: left; border-top: 0; padding-top: 2px; }
html[data-large-text] .spec-grid > :nth-child(2), html[data-text="large"] .spec-grid > :nth-child(2) { border-top: 0; }
html[data-large-text] .btn, html[data-text="large"] .btn { white-space: normal; }
html[data-large-text] .tab, html[data-text="large"] .tab { font-size: var(--fs-caption); }
html[data-large-text] .timer, html[data-text="large"] .timer { font-size: var(--fs-timer); }

html[data-high-contrast] .btn:disabled, html[data-contrast="high"] .btn:disabled,
html[data-high-contrast] .chip:disabled, html[data-contrast="high"] .chip:disabled,
html[data-high-contrast] .btn-icon:disabled, html[data-contrast="high"] .btn-icon:disabled {
  opacity: var(--disabled-opacity);
  outline: 1px solid var(--border-strong);
  outline-offset: -1px;
}
html[data-high-contrast] .row.is-faded > .row-lead, html[data-high-contrast] .row.is-faded > .row-body, html[data-contrast="high"] .row.is-faded > .row-lead, html[data-contrast="high"] .row.is-faded > .row-body { opacity: var(--disabled-opacity); }
html[data-high-contrast] .row.is-faded, html[data-contrast="high"] .row.is-faded { outline: 1px dashed var(--border-strong); outline-offset: -1px; }
html[data-high-contrast] .chip, html[data-contrast="high"] .chip,
html[data-high-contrast] .card, html[data-contrast="high"] .card,
html[data-high-contrast] .list, html[data-contrast="high"] .list { border-color: var(--border-strong); }
@media (prefers-contrast: more) {
  .btn:disabled, .chip:disabled, .btn-icon:disabled { opacity: var(--disabled-opacity); outline: 1px solid var(--border-strong); outline-offset: -1px; }
  .chip, .card, .list { border-color: var(--border-strong); }
}

/* --------------------------------------------------------------------------
   23. Reduced motion specifics (durations are already 0 via tokens)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sheet-layer:not(.is-open) .sheet { transform: none; opacity: 0; }
  .sheet { transition: opacity var(--t-fade) linear; }
  .sheet-backdrop { transition: opacity var(--t-fade) linear; }
  .toast { transition: opacity var(--t-fade) linear; }
  .toast:not(.is-in), .toast.is-out { transform: none; }
  .btn-primary:active, .btn-ignite:active, .fab:active, .btn-danger-fill:active { transform: none; }
  .row.is-dragging { transform: none; }
  .rating > button:active .icon, .rating-step:active .icon { transform: none; }
  .slider:active::-webkit-slider-thumb { transform: none; }
  .fab.is-hidden, body.sheet-open .fab { transform: none; }
  .ring-ember { animation: none; opacity: 1; }
  .skeleton::after { animation: none; transform: none; opacity: 0; }
  .prompt { animation: none; }
  .prompt::before { animation: none; opacity: 0; }
  .dim-layer, .kbd-dim { animation: none; opacity: 0; }
}
html[data-reduce-motion] .sheet-layer:not(.is-open) .sheet { transform: none; opacity: 0; }
html[data-reduce-motion] .sheet, html[data-reduce-motion] .sheet-backdrop, html[data-reduce-motion] .toast { transition: opacity var(--t-fade) linear; }
html[data-reduce-motion] .toast:not(.is-in), html[data-reduce-motion] .toast.is-out { transform: none; }
html[data-reduce-motion] .ring-ember { animation: none; opacity: 1; }
html[data-reduce-motion] .skeleton::after { animation: none; opacity: 0; }
html[data-reduce-motion] .prompt::before { animation: none; opacity: 0; }
html[data-reduce-motion] .btn-primary:active, html[data-reduce-motion] .btn-ignite:active, html[data-reduce-motion] .fab:active { transform: none; }

/* --------------------------------------------------------------------------
   24. Additions from the kitchen-sink review
   -------------------------------------------------------------------------- */
/* Row-as-switch: the 56px row carries role="switch" and aria-checked; the .switch inside is purely visual
   (the whole row is the target, as interaction-rules §2 asks). Works for .row, .switch-row and .field-row. */
[role="switch"][aria-checked="true"] > .switch,
[role="switch"][aria-checked="true"] .switch:not(:has(> input)) {
  background: var(--accent);
  border-color: transparent;
  box-shadow: var(--edge-brass);
}
[role="switch"][aria-checked="true"] > .switch::after,
[role="switch"][aria-checked="true"] .switch:not(:has(> input))::after {
  transform: translateX(calc(var(--switch-w) - var(--switch-knob) - 4px));
  background: var(--accent-text);
}
[role="switch"]:disabled .switch, [role="switch"][aria-disabled="true"] .switch { border-color: var(--border); box-shadow: 0 0 0 0 transparent; }
[role="switch"]:disabled .switch::after, [role="switch"][aria-disabled="true"] .switch::after { background: var(--text-muted); }
button.switch-row, button.field-row { cursor: pointer; }
button.switch-row:active .switch, button.field-row:active .switch { background: var(--surface); }
button.switch-row:focus-visible, button.field-row:focus-visible { box-shadow: var(--focus-inset); border-radius: var(--r-sm); }
/* A standalone .switch gets a 44px hit strip from a pseudo-element (never margin or outline) */
.switch::before { content: ""; position: absolute; inset: -6px -4px; }

/* Banners may be <a> or <button>: title and text are blocks whatever element carries them */
.banner-title, .banner-text { display: block; }

/* Trailing column never starves the title: a long low-stock caption wraps instead */
.row-trail { max-width: 46%; }
.row-trail > span { max-width: 100%; }
/* ...but a trail that holds stars, a button or a pill is sized by that control: it never shrinks or clips it.
   Long text values beside them keep truncating with an ellipsis. */
.row-trail > .stars, .row-trail > .btn, .row-trail > .pill { flex: none; max-width: none; }
.row-trail:has(> .stars, > .btn, > .pill) { max-width: none; }
.row-trail > span:not(.stars):not(.pill):not(.btn):not(.badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Phase pill inside a segmented control: wrap under the label instead of overflowing the document */
[data-phases] .seg > [data-phase] { flex-wrap: wrap; align-content: center; row-gap: 2px; line-height: 1.1; white-space: normal; }
[data-phases] .seg > [data-phase]::after { margin-left: 0; }
/* On a row the pill sits in the trailing slot above the value; nudge the value down so they never overlap */
[data-phases] :where(.row)[data-phase]::after { top: var(--sp-1); }
[data-phases] .row[data-phase] > .row-trail { padding-top: 22px; }


/* --------------------------------------------------------------------------
   25. Shared-layer requests (docs/spec/shared-requests*.md)
   -------------------------------------------------------------------------- */
/* Trailing chevrons never collapse: base.css `svg { max-width: 100% }` resolves against the auto grid track */
.row-trail .icon, .row-chevron { max-width: none; flex: none; min-width: 20px; }
.row-trail > .btn-icon .icon { min-width: var(--icon); }

/* .hero-photo used as a <button> (tap to open the photo viewer) keeps the full column width */
button.hero-photo { width: 100%; padding: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
button.hero-photo:focus-visible { box-shadow: var(--focus); }

/* Short section links ("Edit") still meet the tap minimum */
.section-link { min-width: var(--tap); justify-content: center; }

/* Compound chips (a chip holding its own buttons): the 48px hit pseudo-element never swallows the inner taps */
.chip > :where(button, a[href], input, label, [role="button"], [data-action]) { position: relative; z-index: 1; }
.chip:has(> button, > a[href], > [role="button"], > [data-action])::before { pointer-events: none; }

/* Chip-row fade at the real screen edge (a mask, not a sticky overlay inside the 32px padding) */
.chip-row::after { display: none; }
.chip-row {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--sp-6)), transparent);
  mask-image: linear-gradient(to right, black calc(100% - var(--sp-6)), transparent);
}
.chip-row.chip-wrap, .chip-wrap { -webkit-mask-image: none; mask-image: none; }

/* A quiet ghost button that is disabled reads disabled (the .btn-quiet colour rule came later at equal weight) */
.btn-ghost.btn-quiet:disabled, .btn-ghost.btn-quiet[aria-disabled="true"],
.btn-primary ~ .btn-ghost:disabled, .btn-primary ~ .btn-ghost[aria-disabled="true"] { color: var(--text-muted); cursor: default; }

/* Stepper whose value is a typed <input class="stepper-value"> (ring gauge, box counts) */
input.stepper-value, .stepper-value > input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 48px;
  height: 100%;
  margin: 0;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper-value > input { padding: 0; }
input.stepper-value:focus, .stepper-value > input:focus { outline: none; }
input.stepper-value:focus-visible, .stepper-value > input:focus-visible { box-shadow: var(--focus-inset); }

/* Top bar: text actions, a text leading control, pressed toggles, badges and phase tags on 48px icon buttons */
.topbar .topbar-text { min-height: var(--tap); padding: 0 var(--sp-3); white-space: nowrap; }
.topbar .topbar-text .icon { width: var(--icon-chevron); height: var(--icon-chevron); }
.topbar-actions .topbar-text { margin-right: calc(-1 * var(--sp-1)); }
.topbar.has-text-leading .topbar-title { margin-left: var(--sp-1); }
.topbar .topbar-leading.topbar-text { margin-left: calc(-1 * var(--sp-1)); }
.topbar .btn-icon[aria-pressed="true"], .topbar .btn-icon.is-on { color: var(--text); background: var(--surface-raised); }
.topbar-action { position: relative; }
.topbar-badge { position: absolute; top: 4px; right: 2px; min-width: 20px; justify-content: center; padding: 0 6px; pointer-events: none; }
.topbar-dot { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: var(--r-round); background: var(--secondary, var(--danger)); box-shadow: 0 0 0 2px var(--bg0); pointer-events: none; }
/* (only buttons built with the `phase` option carry .has-phase; screens that tag their own buttons keep their styling) */
[data-phases] .topbar .btn-icon.has-phase[data-phase]::after { top: auto; bottom: -14px; right: 0; }

/* Toasts: never under the thumb-zone primary, never over an open sheet */
body:has(.toast-layer > .toast.is-in:not(.is-out)) .fab:not(.is-hidden) { transform: translateY(calc(-1 * (var(--toast-h) + var(--sp-3)))); }
body.sheet-open .toast-layer, body[data-sheet] .toast-layer { top: calc(var(--safe-top) + var(--sp-2)); bottom: auto; }

/* Drop dock open: the action bar, the page padding and the toasts sit above it (App.dock(true) or any open .dock) */
body[data-dock-open] .actionbar, body:has(.dock.is-open) .actionbar { bottom: calc(max(var(--kb), var(--tabbar-total)) + var(--dock-h, 64px)); }
body[data-dock-open] .toast-layer, body:has(.dock.is-open) .toast-layer { bottom: calc(var(--tabbar-total) + var(--dock-h, 64px) + var(--sp-3)); }
body.has-actionbar[data-dock-open] .toast-layer, body.has-actionbar:has(.dock.is-open) .toast-layer { bottom: calc(var(--tabbar-total) + var(--actionbar-h) + var(--dock-h, 64px) + var(--sp-3)); }

/* Full-bleed screens (def.hideTabbar) */
body[data-hide-tabbar] .tabbar { display: none; }

/* Build phase (App.config.phase < 3): later-phase elements are not rendered (interaction-rules §3.8) */
html[data-build-phase="1"] [data-phase="2"]:not(.phase-tag), html[data-build-phase="1"] [data-phase="3"]:not(.phase-tag),
html[data-build-phase="2"] [data-phase="3"]:not(.phase-tag) { display: none !important; }

/* Strength dots: empty dots are dashed outlines, so a filled Oscuro fifth dot never reads as empty */
.strength-dots > i, .strength-dot { box-sizing: border-box; background: transparent; box-shadow: none; border: 1px dashed var(--border-strong); }
.strength[data-level="1"] > .strength-dots > :nth-child(-n+1), .strength[data-level="2"] > .strength-dots > :nth-child(-n+2),
.strength[data-level="3"] > .strength-dots > :nth-child(-n+3), .strength[data-level="4"] > .strength-dots > :nth-child(-n+4),
.strength[data-level="5"] > .strength-dots > :nth-child(-n+5) { border: 1px solid var(--text-muted); box-shadow: inset 0 0 0 1px var(--swatch-keyline); }

/* Half-step rating glyph: <span class="is-half">[empty leaf][filled leaf]</span>; the second glyph is clipped to its left half */
.rating .is-half, .stars .is-half { position: relative; display: inline-grid; place-items: center; }
.rating .is-half > .icon + .icon, .stars .is-half > .icon + .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent);
  fill: var(--accent);
  clip-path: inset(0 50% 0 0);
}
.rating .is-half > .icon + .icon path:nth-child(2), .stars .is-half > .icon + .icon path:nth-child(2) { stroke: var(--accent-text); }
.rating .is-half > .icon + .icon path:nth-child(n+3), .stars .is-half > .icon + .icon path:nth-child(n+3) { display: none; }

/* Extra-dim: --accent-strong text measures 4.07:1 on the lounge background; brass text uses the dim text colour */
[data-dim] .btn-ghost, [data-dim] .chip-on, [data-dim] .chip[aria-pressed="true"], [data-dim] .chip.is-on,
[data-dim] .chip-on .chip-count, [data-dim] .chip[aria-pressed="true"] .chip-count, [data-dim] .section-link,
[data-dim] .toast-action, [data-dim] .toast .btn-ghost, [data-dim] .chip-on[data-intensity]::after { color: var(--text); }
[data-dim] .btn-ghost:disabled, [data-dim] .btn-ghost[aria-disabled="true"] { color: var(--text-muted); }

/* Chart hit areas (App.chart onBar / onPoint) show the focus ring on the chart */
.chart .chart-hit:focus-visible { outline: none; stroke: var(--accent); stroke-width: 2; }

/* Roomy segmented control: inner segments clear the 44px tap minimum (48px track → 42px segments otherwise) */
.seg.seg-lg { height: calc(var(--tap-min) + 6px); }

/* Reduce transparency (Privacy & accessibility, applied to <html> at boot): solid sheet, tab bar, top bar and action bar,
   no tint layers; the scrim stays a plain dim layer. */
html[data-reduce-transparency] .topbar,
html[data-reduce-transparency] .topbar.is-scrolled { background-color: var(--bg0); background-image: none; }
html[data-reduce-transparency] .tabbar { background-color: var(--bg1); background-image: none; }
html[data-reduce-transparency] .sheet { background-color: var(--bg1); background-image: none; }
html[data-reduce-transparency]:not([data-dim]) .actionbar,
html[data-reduce-transparency]:not([data-dim]) .dock { background-color: var(--surface); background-image: none; }
html[data-reduce-transparency] .toast { background-color: var(--surface-raised); background-image: none; }