/* =====================================================================
   ShiftPocket v0.4 - SHARED COMPONENTS
   DESIGN PROTOTYPE ONLY. Not production code.

   Every repeated piece of interface, defined once, for both the mobile
   app and the admin console.

   RULE: no literal colour, radius, blur or timing value here.
   Layout stance: hairline-separated rows on the page ground; sections
   separated by space and a quiet eyebrow; a card never contains a card;
   glass only on the dock, sticky bars and overlays.
   ===================================================================== */

/* =====================================================================
   1. DEVICE FRAME + SCREEN SCAFFOLD (mobile)
   ===================================================================== */
.device {
  position: relative;
  width: 100%;
  max-width: 24.375rem;
  margin: 0 auto;
  background: var(--bg);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-dock);
  overflow: hidden;
  isolation: isolate;
}
.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 52.75rem;
  overflow: hidden;
}
.screen::before {
  content: "";
  position: absolute;
  inset: -18% -30% auto -30%;
  height: 22rem;
  background:
    radial-gradient(60% 60% at 25% 20%, var(--bg-glow-1), transparent 70%),
    radial-gradient(55% 55% at 85% 5%, var(--bg-glow-2), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.screen > * { position: relative; z-index: 1; }

.scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--gutter);
  padding-bottom: var(--sp-8);
}
/* Bottom clearance so content always scrolls clear of fixed controls. */
.scroll-dock        { padding-bottom: var(--clear-dock); }
.scroll-dock-action { padding-bottom: var(--clear-dock-action); }
.scroll-action      { padding-bottom: var(--clear-action); }
.scroll-flush       { padding-left: 0; padding-right: 0; }

.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--gutter) 0;
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  color: var(--fg-muted); letter-spacing: 0.02em;
}

/* A screen title in content, never a separate header bar. */
.screen-head { padding: var(--sp-3) 0 var(--sp-4); }
.topbar {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); padding: var(--sp-1) 0;
}
.topbar-title {
  font-size: var(--fs-heading); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}
.topbar-spacer { width: var(--tap); flex: none; }

/* =====================================================================
   2. FLOATING DOCK
   ===================================================================== */
.dock {
  position: absolute;
  left: var(--dock-inset); right: var(--dock-inset);
  bottom: calc(var(--dock-inset) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: var(--dock-h);
  padding: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--glass);
  border: var(--hairline) solid var(--glass-border);
  box-shadow: var(--shadow-dock);
  -webkit-backdrop-filter: blur(var(--blur-dock)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--blur-dock)) saturate(var(--glass-sat));
}
.dock-3 { grid-template-columns: repeat(3, 1fr); }
.dock-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.0625rem;
  border: 0; background: transparent;
  border-radius: var(--r-pill);
  color: var(--fg-muted);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  text-decoration: none; cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.dock-item:hover { color: var(--fg-2); text-decoration: none; }
.dock-item .icon { width: 1.25rem; height: 1.25rem; }
.dock-item[aria-current="page"] { background: var(--accent-wash); color: var(--accent-ink); }
.dock-item[aria-current="page"] .icon { stroke-width: 2.2; }

/* =====================================================================
   3. BUTTONS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-5);
  border: var(--hairline) solid transparent; border-radius: var(--r-md);
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-block { display: flex; width: 100%; }
.btn .icon { width: 1.125rem; height: 1.125rem; }
.btn-sm { min-height: var(--tap-min); padding: 0 var(--sp-4); font-size: var(--fs-label); }

.btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  background: var(--neutral-btn); color: var(--neutral-btn-fg);
  border-color: var(--neutral-btn-border);
}
.btn-secondary:hover { border-color: var(--line-strong); }
.btn-ghost { background: transparent; color: var(--accent-ink); }
.btn-ghost:hover { background: var(--accent-wash); }
.btn-danger { background: transparent; color: var(--danger-ink); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-wash); }
.btn-danger-solid { background: var(--danger); color: var(--fg-on-accent); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--fg-2); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.btn-icon:hover { background: var(--surface-sunken); text-decoration: none; }
a.btn-icon { color: var(--fg-2); text-decoration: none; }

/* The one primary action, inline and full width. Never a floating button:
   a FAB covers list rows while scrolling. */
.action-primary {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: var(--tap);
  border: 0; border-radius: var(--r-lg);
  background: var(--accent); color: var(--accent-fg);
  font-size: var(--fs-body); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-accent);
  transition: background-color var(--t-fast) var(--ease);
}
.action-primary:hover { background: var(--accent-hover); text-decoration: none; }
.action-primary[aria-disabled="true"], .action-primary:disabled {
  opacity: 0.45; box-shadow: none; cursor: default;
}
.action-primary .icon { width: 1.125rem; height: 1.125rem; stroke-width: 2.4; }

/* Busy state for simulated network work */
.btn-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn-busy::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 1.125rem; height: 1.125rem; margin: -0.5625rem 0 0 -0.5625rem;
  border-radius: var(--r-pill);
  border: 2px solid var(--accent-fg); border-top-color: transparent;
  animation: spin 640ms linear infinite;
}
.btn-secondary.btn-busy::after, .btn-ghost.btn-busy::after { border-color: var(--fg-2); border-top-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   4. SEGMENTED CONTROL
   ===================================================================== */
.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--sp-1); width: 100%;
  padding: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
}
.segmented-item {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--fg-muted);
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.segmented-item:hover { color: var(--fg-2); }
.segmented-item[aria-selected="true"],
.segmented-item[aria-pressed="true"],
.segmented-item[aria-checked="true"] {
  background: var(--surface); color: var(--fg); box-shadow: var(--shadow-sm);
}

/* =====================================================================
   5. HERO EARNINGS
   ===================================================================== */
.hero { padding: var(--sp-1) 0 0; }
.hero-label {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--fg-muted); font-size: var(--fs-sub); font-weight: var(--fw-medium);
  margin-bottom: var(--sp-1);
}
.hero-meta {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-2); color: var(--fg-2); font-size: var(--fs-sub);
}
.hero-meta-item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero-meta-item .icon { width: 0.9375rem; height: 0.9375rem; color: var(--fg-muted); }
.hero-meta-value { font-weight: var(--fw-semibold); color: var(--fg); }

/* =====================================================================
   6. CHART
   ===================================================================== */
.chart { margin-top: var(--rhythm-section); }
.chart-caption {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-2);
}
.chart-plot {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: end; gap: var(--sp-2); height: var(--chart-h);
}
.chart-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.chart-bar {
  width: var(--bar-w); min-height: 0.1875rem;
  border-radius: var(--bar-r); background: var(--data-empty);
}
.chart-bar-value { background: var(--data-bar-idle); }
.chart-col[data-current="true"] .chart-bar { background: var(--accent); }
.chart-axis {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--sp-2); margin-top: var(--sp-2);
}
.chart-tick { text-align: center; font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--fg-muted); }
.chart-tick-current { color: var(--accent-ink); }

/* =====================================================================
   7. SECTIONS
   ===================================================================== */
.section { margin-top: var(--rhythm-section); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-2);
}
.section-link {
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  color: var(--accent-ink); background: none; border: 0; padding: 0;
  cursor: pointer; min-height: var(--tap-min);
}
.section-link:hover { text-decoration: underline; }

/* =====================================================================
   8. TIMELINE
   ===================================================================== */
.timeline { border-top: var(--hairline) solid var(--line); }
.tl-row {
  display: grid; grid-template-columns: 2.5rem 1fr auto;
  align-items: center; gap: var(--sp-3);
  min-height: var(--tap); padding: var(--sp-3) 0;
  border-bottom: var(--hairline) solid var(--line);
  background: none; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left;
  color: var(--fg); text-decoration: none; cursor: pointer;
}
.tl-row:hover { text-decoration: none; }
.tl-date { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.tl-day {
  font-size: var(--fs-heading); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); color: var(--fg);
}
.tl-dow {
  margin-top: 0.125rem; font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted);
}
.tl-row[data-today="true"] .tl-day, .tl-row[data-today="true"] .tl-dow { color: var(--accent-ink); }
.tl-main { min-width: 0; }
.tl-times {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2); row-gap: var(--sp-1);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums; color: var(--fg);
}
.tl-time-text { white-space: nowrap; }
.tl-sub { margin-top: 0.0625rem; font-size: var(--fs-sub); color: var(--fg-muted); }
.tl-amount {
  font-size: var(--fs-body); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight);
  color: var(--fg); text-align: right;
}
.tl-amount-sub { display: block; font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--fg-muted); }
.tl-group {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-4) 0 var(--sp-2);
}
.tl-group-label { font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--fg-2); }
.tl-group-total { font-size: var(--fs-label); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--fg); }

/* =====================================================================
   9. CHIPS AND BADGES
   ===================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 0.1875rem;
  padding: 0.0625rem var(--sp-2); border-radius: var(--r-xs);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); white-space: nowrap;
}
.chip .icon { width: 0.6875rem; height: 0.6875rem; stroke-width: 2.4; }
.chip-ot      { background: var(--cyan-wash);    color: var(--cyan-ink); }
.chip-night   { background: var(--accent-wash);  color: var(--accent-ink); }
.chip-premium { background: var(--accent-wash);  color: var(--accent-ink); }
.chip-ok      { background: var(--success-wash); color: var(--success-ink); }
.chip-warn    { background: var(--warn-wash);    color: var(--warn-ink); }
.chip-danger  { background: var(--danger-wash);  color: var(--danger-ink); }
.chip-neutral { background: var(--surface-sunken); color: var(--fg-muted); }

.filter-row { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: var(--tap-min); padding: 0 var(--sp-4);
  border: var(--hairline) solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--fg-2);
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.filter-chip .icon { width: 0.875rem; height: 0.875rem; }
.filter-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* =====================================================================
   10. PANELS AND CALLOUTS
   ===================================================================== */
.panel {
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: var(--surface); border: var(--hairline) solid var(--line);
}
.panel-quiet { background: var(--surface-muted); border-color: transparent; }
.panel-tight { padding: var(--sp-3); }

.callout {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-sub); line-height: var(--lh-snug);
}
.callout .icon { width: 1.0625rem; height: 1.0625rem; flex: none; margin-top: 0.0625rem; }
.callout strong { font-weight: var(--fw-semibold); }
.callout-info    { background: var(--accent-wash);  color: var(--accent-ink); }
.callout-ok      { background: var(--success-wash); color: var(--success-ink); }
.callout-warn    { background: var(--warn-wash);    color: var(--warn-ink); }
.callout-danger  { background: var(--danger-wash);  color: var(--danger-ink); }
.callout-neutral { background: var(--surface-muted); color: var(--fg-2); border: var(--hairline) solid var(--line); }

/* One-line explainer with an inline details link */
.explainer {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin-top: var(--sp-4); font-size: var(--fs-sub);
  line-height: var(--lh-snug); color: var(--fg-muted);
}
.explainer .icon { width: 0.9375rem; height: 0.9375rem; flex: none; margin-top: 0.125rem; }
.explainer-link {
  color: var(--accent-ink); font-weight: var(--fw-semibold);
  text-decoration: underline; background: none; border: 0; padding: 0;
  cursor: pointer; font-size: inherit;
}

/* =====================================================================
   11. FORMS
   ===================================================================== */
.form-section { margin-top: var(--rhythm-group); }
.form-section:first-child { margin-top: var(--sp-2); }
.form-section-head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2); color: var(--fg-muted);
}
.form-section-head .icon { width: 0.9375rem; height: 0.9375rem; }
.form-section-title {
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}

.field + .field { margin-top: var(--rhythm-field); }
.grid-2 > .field, .grid-2 > .field + .field { margin-top: 0; }
.field-label {
  display: block; font-size: var(--fs-label); font-weight: var(--fw-semibold);
  color: var(--fg-2); margin-bottom: var(--sp-1);
}
.field-optional { font-weight: var(--fw-regular); color: var(--fg-muted); }

.control {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; min-height: var(--control-h); padding: 0 var(--sp-3);
  border: var(--hairline) solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--fg);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  text-align: left; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.control:hover { border-color: var(--line-strong); }
.control-split { justify-content: space-between; }
.control .icon { color: var(--fg-muted); }
.control-prefix { color: var(--fg-muted); font-weight: var(--fw-semibold); }
.control-placeholder { color: var(--fg-muted); font-weight: var(--fw-regular); }
input.control, textarea.control, select.control { cursor: text; font-weight: var(--fw-medium); }
input.control::placeholder, textarea.control::placeholder { color: var(--fg-muted); font-weight: var(--fw-regular); }
select.control { cursor: pointer; appearance: none; }
textarea.control { min-height: 5rem; padding: var(--sp-3); resize: vertical; line-height: var(--lh-body); }

.time-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-2); }
.time-box {
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  min-height: var(--control-h-lg); padding: var(--sp-2) var(--sp-3);
  border: var(--hairline) solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.time-box:hover { border-color: var(--accent); }
.time-box-label {
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted);
}
.time-box-value {
  font-size: var(--fs-title); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); color: var(--fg);
}
.time-arrow { color: var(--fg-muted); }

.overnight {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); background: var(--accent-wash);
  color: var(--accent-ink); font-size: var(--fs-sub); font-weight: var(--fw-medium);
}
.overnight .icon { width: 1rem; height: 1rem; }
.overnight strong { font-weight: var(--fw-bold); white-space: nowrap; }

.field-hint { margin-top: var(--sp-1); font-size: var(--fs-sub); color: var(--fg-muted); }
.control-invalid { border-color: var(--danger); border-width: 2px; background: var(--danger-wash); }
.field-error {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin-top: var(--sp-1); font-size: var(--fs-sub); font-weight: var(--fw-medium);
  line-height: var(--lh-snug); color: var(--danger-ink);
}
.field-error .icon { width: 0.9375rem; height: 0.9375rem; flex: none; margin-top: 0.0625rem; }

/* =====================================================================
   12. DISCLOSURE
   ===================================================================== */
.disclosure { margin-top: var(--rhythm-field); }
.disclosure-trigger {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: var(--tap); padding: var(--sp-2) var(--sp-3);
  border: var(--hairline) solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--fg);
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  text-align: left; cursor: pointer;
}
.disclosure-trigger:hover { border-color: var(--line-strong); }
.disclosure-trigger .icon { color: var(--fg-muted); }
.disclosure-chevron { transition: transform var(--t-base) var(--ease); margin-left: auto; }
.disclosure-trigger[aria-expanded="true"] { border-radius: var(--r-md) var(--r-md) 0 0; }
.disclosure-trigger[aria-expanded="true"] .disclosure-chevron { transform: rotate(180deg); }
.disclosure-summary {
  margin-left: auto; font-size: var(--fs-label); font-weight: var(--fw-medium);
  color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.disclosure-trigger[aria-expanded="true"] .disclosure-summary + .disclosure-chevron { margin-left: var(--sp-2); }
.disclosure-panel {
  padding: var(--sp-3); border: var(--hairline) solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md); background: var(--surface-muted);
}

/* =====================================================================
   13. STICKY ACTION BAR (in layout flow, never over a field)
   ===================================================================== */
.actionbar {
  flex: none;
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  border-top: var(--hairline) solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur-overlay)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--blur-overlay)) saturate(var(--glass-sat));
}
.estimate { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.estimate-label { font-size: var(--fs-sub); color: var(--fg-muted); }
.estimate-value {
  font-size: var(--fs-title); font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); color: var(--accent-ink);
}
.estimate-value-empty { color: var(--fg-muted); }

/* =====================================================================
   14. PROPORTION BAR + BREAKDOWN
   ===================================================================== */
.proportion { margin-top: var(--sp-3); }
.proportion-track { display: flex; height: 0.625rem; border-radius: var(--r-pill); overflow: hidden; background: var(--data-empty); }
.proportion-seg { height: 100%; }
.proportion-regular  { background: var(--data-regular); }
.proportion-overtime { background: var(--data-overtime); }
.proportion-legend { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: var(--sp-2); }
.legend-dot { width: 0.5625rem; height: 0.5625rem; border-radius: var(--r-xs); flex: none; }
.legend-regular { background: var(--data-regular); }
.legend-overtime { background: var(--data-overtime); }
.legend-text { font-size: var(--fs-sub); color: var(--fg-2); }
.legend-value { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--fg); }

.breakdown { width: 100%; border-collapse: collapse; }
.breakdown th, .breakdown td {
  padding: var(--sp-2) 0; border-bottom: var(--hairline) solid var(--line);
  font-size: var(--fs-sub); font-weight: var(--fw-regular);
  text-align: left; color: var(--fg-2);
}
.breakdown td { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--fg); white-space: nowrap; }
.breakdown tr:last-child th, .breakdown tr:last-child td { border-bottom: 0; }
.breakdown-note { display: block; font-size: var(--fs-micro); color: var(--fg-muted); }
.breakdown-total th, .breakdown-total td {
  padding-top: var(--sp-3); font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--fg);
}
.breakdown-sub th, .breakdown-sub td { color: var(--fg-muted); font-size: var(--fs-micro); }

/* =====================================================================
   15. LIST GROUPS (settings, admin detail)
   ===================================================================== */
.group { margin-top: var(--rhythm-group); }
.group-title {
  margin-bottom: var(--sp-2); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted);
}
.list-card {
  border-radius: var(--r-lg); background: var(--surface);
  border: var(--hairline) solid var(--line); overflow: hidden;
}
.list-row {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: var(--tap); padding: var(--sp-3) var(--sp-4);
  border: 0; border-bottom: var(--hairline) solid var(--line);
  background: transparent; color: var(--fg); text-align: left; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--surface-muted); }
.list-row-static { cursor: default; }
.list-row-static:hover { background: transparent; }
.list-title { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.list-sub { display: block; margin-top: 0.0625rem; font-size: var(--fs-sub); color: var(--fg-muted); }
.list-value { font-size: var(--fs-sub); font-weight: var(--fw-semibold); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.list-row .icon { color: var(--fg-muted); }
.list-danger .list-title { color: var(--danger-ink); }

/* =====================================================================
   16. APPEARANCE PICKER
   ===================================================================== */
.appearance-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); padding: var(--sp-3); }
.appearance-option {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2); min-height: var(--tap);
  border: 2px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--fg-2);
  font-size: var(--fs-label); font-weight: var(--fw-semibold); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.appearance-option:hover { border-color: var(--line-strong); }
.appearance-option[aria-checked="true"] { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.appearance-swatch {
  width: 100%; height: 1.875rem; border-radius: var(--r-sm);
  border: var(--hairline) solid var(--line); overflow: hidden; display: flex;
}
.swatch-half { flex: 1; }
.swatch-light { background: var(--preview-light); }
.swatch-dark  { background: var(--preview-dark); }

/* =====================================================================
   17. SWITCH - 28px visual inside a 44px target
   ===================================================================== */
.switch {
  position: relative; flex: none;
  width: 3.25rem; height: var(--tap-min);
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.switch::before {
  content: ""; position: absolute; top: 50%; left: 0.125rem;
  width: 3rem; height: 1.75rem; margin-top: -0.875rem;
  border: var(--hairline) solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface-sunken);
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 50%; left: 0.25rem;
  width: 1.375rem; height: 1.375rem; margin-top: -0.6875rem;
  border-radius: var(--r-pill); background: var(--fg-muted);
  transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.switch[aria-checked="true"]::before { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"]::after { background: var(--accent-fg); transform: translateX(1.1875rem); }
.switch[aria-disabled="true"] { opacity: 0.45; cursor: default; }

/* =====================================================================
   18. OVERLAY, DIALOG, SHEET
   ===================================================================== */
.overlay {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  background: var(--scrim);
  -webkit-backdrop-filter: blur(var(--blur-overlay));
  backdrop-filter: blur(var(--blur-overlay));
}
.overlay-bottom { align-items: flex-end; padding: 0; }
.dialog {
  width: 100%; max-width: 20rem; padding: var(--sp-5);
  border-radius: var(--r-xl); background: var(--bg-elevated);
  border: var(--hairline) solid var(--line); box-shadow: var(--shadow-dock);
  max-height: 90%; overflow-y: auto;
}
.sheet {
  width: 100%; max-height: 88%; overflow-y: auto;
  padding: var(--sp-5) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: var(--bg-elevated); border-top: var(--hairline) solid var(--line);
  box-shadow: var(--shadow-dock);
}
.sheet-grip {
  width: 2.25rem; height: 0.25rem; border-radius: var(--r-pill);
  background: var(--line-strong); margin: 0 auto var(--sp-4);
}
.dialog-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: var(--sp-3);
  border-radius: var(--r-pill);
}
.dialog-icon-danger { background: var(--danger-wash); color: var(--danger-ink); }
.dialog-icon-info   { background: var(--accent-wash); color: var(--accent-ink); }
.dialog-icon-ok     { background: var(--success-wash); color: var(--success-ink); }
.dialog-icon-warn   { background: var(--warn-wash); color: var(--warn-ink); }
.dialog-title { font-size: var(--fs-heading); font-weight: var(--fw-bold); color: var(--fg); margin-bottom: var(--sp-2); }
.dialog-body { font-size: var(--fs-sub); line-height: var(--lh-body); color: var(--fg-2); margin-bottom: var(--sp-4); }
.dialog-actions { display: flex; gap: var(--sp-2); }
.dialog-actions .btn { flex: 1; }
.dialog-actions-stack { flex-direction: column; }

/* =====================================================================
   19. EMPTY STATES
   ===================================================================== */
.empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--sp-8) var(--sp-4) var(--sp-6);
}
.empty-art { margin-bottom: var(--sp-4); color: var(--accent); }
.empty-title { font-size: var(--fs-heading); font-weight: var(--fw-bold); color: var(--fg); margin-bottom: var(--sp-1); }
.empty-body { font-size: var(--fs-sub); line-height: var(--lh-body); color: var(--fg-muted); max-width: 30ch; margin-bottom: var(--sp-4); }
.empty-compact { padding: var(--sp-6) var(--sp-4); }

/* =====================================================================
   20. PLANS AND PREMIUM
   ===================================================================== */
.plan-card {
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: var(--surface); border: 2px solid var(--line);
  cursor: pointer; width: 100%; text-align: left;
  transition: border-color var(--t-fast) var(--ease);
}
.plan-card[aria-checked="true"] { border-color: var(--accent); background: var(--accent-wash); }
.plan-badge {
  display: inline-flex; padding: 0.0625rem var(--sp-2); border-radius: var(--r-xs);
  background: var(--accent); color: var(--accent-fg);
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
}
.price { font-size: var(--fs-amount); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); color: var(--fg); }
.price-tbd { font-size: var(--fs-title); color: var(--fg-muted); font-weight: var(--fw-bold); }
.price-period { font-size: var(--fs-sub); font-weight: var(--fw-medium); color: var(--fg-muted); }

.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td {
  padding: var(--sp-2) var(--sp-2);
  border-bottom: var(--hairline) solid var(--line);
  font-size: var(--fs-sub); text-align: left; vertical-align: top;
}
.compare thead th {
  font-size: var(--fs-micro); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--ls-wide); color: var(--fg-muted);
}
.compare td.mark { text-align: center; width: 3.25rem; }
.compare .yes { color: var(--success-ink); }
.compare .no  { color: var(--fg-muted); }
.compare tbody th { font-weight: var(--fw-medium); color: var(--fg); }

.lock-row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: var(--tap); padding: var(--sp-3);
  border: var(--hairline) dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--surface-muted); color: var(--fg-2);
  text-align: left; cursor: pointer;
}
.lock-row:hover { border-color: var(--accent); }
.lock-row .icon { color: var(--accent-ink); }

/* =====================================================================
   21. STAT TILES (mobile + admin)
   ===================================================================== */
.stat {
  padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--surface); border: var(--hairline) solid var(--line);
}
.stat-key { display: block; font-size: var(--fs-micro); color: var(--fg-muted); }
.stat-value {
  display: block; margin-top: 0.125rem;
  font-size: var(--fs-heading); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; color: var(--fg);
}
.stat-delta { display: block; margin-top: 0.125rem; font-size: var(--fs-micro); color: var(--fg-muted); }

/* Progress meter for goals and sync */
.meter { height: 0.5rem; border-radius: var(--r-pill); background: var(--data-empty); overflow: hidden; }
.meter-fill { height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.meter-fill-ok { background: var(--success); }

/* =====================================================================
   22. TOAST
   ===================================================================== */
.toast {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: calc(var(--dock-inset) + var(--dock-h) + var(--sp-3));
  z-index: 60;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--glass); border: var(--hairline) solid var(--glass-border);
  box-shadow: var(--shadow-dock);
  font-size: var(--fs-sub); font-weight: var(--fw-medium); color: var(--fg);
  -webkit-backdrop-filter: blur(var(--blur-overlay));
  backdrop-filter: blur(var(--blur-overlay));
}
.toast .icon { width: 1.0625rem; height: 1.0625rem; color: var(--success-ink); }

/* =====================================================================
   23. SKELETON / LOADING
   ===================================================================== */
.skeleton { background: var(--surface-sunken); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--surface-muted), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.skeleton-line { height: 0.75rem; margin-bottom: var(--sp-2); }
.spinner {
  width: 1.5rem; height: 1.5rem; border-radius: var(--r-pill);
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  animation: spin 640ms linear infinite;
}

/* =====================================================================
   24. NARROW SCREENS
   ===================================================================== */
@media (max-width: 400px) {
  [data-theme] { --gutter: var(--sp-3); --fs-hero: 2.5rem; --dock-inset: var(--sp-2); }
}

/* =====================================================================
   25. PREVIEW CHROME (page around the device - not part of the app)
   ===================================================================== */
.stage {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-5) var(--sp-4) var(--sp-10);
  background:
    radial-gradient(55% 40% at 15% 0%, var(--bg-glow-1), transparent 70%),
    radial-gradient(45% 35% at 88% 4%, var(--bg-glow-2), transparent 70%),
    var(--bg-sunken);
}
.stage-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--sp-2); width: 100%; max-width: 30rem; margin-bottom: var(--sp-4);
}
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: var(--surface); border: var(--hairline) solid var(--line);
  color: var(--fg-muted); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  max-width: 100%; text-align: center;
}
.tag-dot { width: 0.4375rem; height: 0.4375rem; border-radius: var(--r-pill); background: var(--accent); }

.appearance-inline {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  max-width: 100%;
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill); border: var(--hairline) solid var(--line);
  background: var(--surface);
}
.appearance-inline-label {
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted);
  white-space: nowrap;
}
.segmented-compact {
  display: flex; flex-wrap: wrap; width: auto; max-width: 100%;
  background: transparent; padding: 0; gap: var(--sp-1);
}
.segmented-compact .segmented-item { flex: 1 1 auto; }
.segmented-compact .segmented-item { min-height: var(--tap-min); padding: 0 var(--sp-3); font-size: var(--fs-micro); }

.backlink {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: 0 var(--sp-3);
  border-radius: var(--r-pill); border: var(--hairline) solid var(--line);
  background: var(--surface); color: var(--fg-2);
  font-size: var(--fs-label); font-weight: var(--fw-semibold); text-decoration: none;
}
.backlink:hover { text-decoration: none; border-color: var(--line-strong); }

/* Quiet account / plan entry point on Home */
.account-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: 0 var(--sp-2) 0 var(--sp-1);
  border: var(--hairline) solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); cursor: pointer;
}
.account-pill:hover { border-color: var(--line-strong); text-decoration: none; }
a.account-pill { color: var(--fg); text-decoration: none; }
.account-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 1.625rem; height: 1.625rem; border-radius: var(--r-pill);
  background: var(--accent-wash); color: var(--accent-ink);
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
}
.account-plan { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--fg-2); }
.account-pill .icon { color: var(--fg-muted); }

/* =====================================================================
   26. PLAN BLOCKS (Premium comparison)
   ===================================================================== */
.plan-block {
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: var(--surface); border: var(--hairline) solid var(--line);
}
.plan-block + .plan-block { margin-top: var(--sp-3); }
.plan-block-premium { border-color: var(--accent); background: var(--surface); }
.plan-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.plan-block-name { font-size: var(--fs-heading); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }

.feature-group-title {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted);
}
.feature-group-title:first-of-type { margin-top: 0; }

.feature-list { display: grid; gap: var(--sp-2); }
.feature-list li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sub); line-height: var(--lh-snug); color: var(--fg-2); }
.feature-list .icon { flex: none; margin-top: 0.1875rem; color: var(--accent-ink); }
.feature-list strong { color: var(--fg); font-weight: var(--fw-semibold); }

.preview-note {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  color: var(--warn-ink);
}
.preview-note .icon { color: var(--warn-ink); }

.price-row { align-items: flex-start; }

/* =====================================================================
   27. ACCOUNT FLOWS
   Every value below is a token. No literal colour, radius, blur or
   timing appears in this file.
   ===================================================================== */

/* Long screen titles must wrap inside the top bar rather than push the
   back button off the edge. */
.topbar-title { min-width: 0; overflow-wrap: break-word; }

/* Centred intro block used by entry, verify, expired-link and the
   completed states. */
.account-hero { padding: var(--sp-5) 0 var(--sp-2); text-align: center; }
.account-hero .t-sub { max-width: 22rem; margin-inline: auto; }

.account-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: var(--r-pill);
  background: var(--accent-wash); color: var(--accent-ink);
}
.account-mark-warn { background: var(--warn-wash); color: var(--warn-ink); }
.account-mark-ok   { background: var(--success-wash); color: var(--success-ink); }
.account-mark .icon { width: 1.75rem; height: 1.75rem; }

/* Signed-in identity row. */
.account-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: var(--surface); border: var(--hairline) solid var(--line);
}
.account-avatar-lg {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill);
  background: var(--accent-wash); color: var(--accent-ink);
  font-size: var(--fs-heading); font-weight: var(--fw-bold);
}
.account-card .t-heading { overflow-wrap: anywhere; }
/* The verified / not-verified tick sits on the same line as its label,
   so it reads as one status rather than a stray mark above it. */
.account-card .icon { display: inline-block; vertical-align: -0.125rem; }

/* Password field: the reveal control sits inside the input's own box, so
   the tap target never overlaps the text the person is reading back. */
.pw-wrap { position: relative; }
.pw-input { padding-right: calc(var(--tap) + var(--sp-1)); }
.pw-toggle {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--fg-muted); cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.pw-toggle:hover { color: var(--fg-2); }
.pw-toggle[aria-pressed="true"] { color: var(--accent-ink); }

/* The fictional credentials, shown in the interface because there is no
   real account to sign in to. */
.demo-creds {
  padding: var(--sp-3); border-radius: var(--r-lg);
  background: var(--surface-muted);
  border: var(--hairline) dashed var(--line-strong);
}
.demo-creds code {
  padding: 0 var(--sp-1); border-radius: var(--r-xs);
  background: var(--surface-inset); color: var(--fg);
  font-family: var(--font-mono); font-size: var(--fs-label);
}

/* Two record counts, side by side, so guest and account totals are never
   presented as one number. */
.count-grid {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}

/* =====================================================================
   28. REVIEWER DRAWER (outside the app interface, never inside the phone)
   ===================================================================== */
.reviewer {
  width: 100%; max-width: 30rem; margin-top: var(--sp-5);
  border-radius: var(--r-lg); background: var(--surface);
  border: var(--hairline) solid var(--line);
  overflow: hidden;
}
.reviewer-summary {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-4);
  cursor: pointer; list-style: none;
  font-size: var(--fs-label); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-2);
}
.reviewer-summary::-webkit-details-marker { display: none; }
.reviewer-summary .icon { width: 1rem; height: 1rem; color: var(--fg-muted); }
.reviewer[open] .reviewer-summary { border-bottom: var(--hairline) solid var(--line); }
.reviewer-body { padding: var(--sp-4); }
.reviewer-note {
  margin-bottom: var(--sp-3); font-size: var(--fs-sub);
  line-height: var(--lh-snug); color: var(--fg-muted);
}
.reviewer-label {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted);
}
.reviewer-grid {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
}
.reviewer-chip {
  min-height: var(--tap-min); padding: 0 var(--sp-3);
  border: var(--hairline) solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--fg-2);
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  text-align: left; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.reviewer-chip:hover { border-color: var(--line-strong); }
.reviewer-chip[aria-pressed="true"] {
  background: var(--accent-wash); border-color: var(--accent);
  color: var(--accent-ink);
}
.reviewer-jump {
  display: grid; gap: var(--sp-2); margin-top: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

/* A flex child's default minimum is its content width, so one unbroken
   token inside a callout or explainer widens the whole row at large text
   sizes. These two rules let the text wrap instead. */
.callout > span, .explainer > span { min-width: 0; overflow-wrap: anywhere; }

/* The preview tag is an inline flex row, so a single long screen name
   becomes an unshrinkable flex item and widens the page at 200% text. */
.tag > span:not(.tag-dot) { min-width: 0; overflow-wrap: anywhere; }