/* ═══ Ghost Ledger — holographic terminal ═══
   Components consume tokens.css only. AA contrast verified on rendered
   surfaces; touch targets ≥44px; no hover-dependent interactions. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  min-height: 100%;
  background: var(--surface-void);
  color: var(--text-primary);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Atmosphere: glow + scanlines + grain ─────────────────────────── */

.atmosphere {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 480px at 50% -8%, rgba(0, 255, 102, 0.07), transparent 62%),
    radial-gradient(700px 500px at 110% 110%, rgba(82, 229, 255, 0.05), transparent 60%);
}

.atmosphere::before {           /* scanlines */
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  opacity: 0.35;
}

.atmosphere::after {            /* grain */
  content: '';
  position: absolute; inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── App bar / bottom nav ─────────────────────────────────────────── */

.appbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(env(safe-area-inset-top) + var(--space-2)) var(--space-3) var(--space-2);
  background: linear-gradient(var(--surface-void) 60%, transparent);
}

.appbar-brand {
  font: var(--type-title);
  letter-spacing: 0.18em;
  color: var(--accent-amber);
  text-shadow: 0 0 12px rgba(255, 194, 102, 0.45);
}

/* The logotype is a link home — the exit people reach for first on a phone. */
a.appbar-brand {
  display: inline-flex; align-items: center;
  min-height: var(--touch-target);
  text-decoration: none;
}
a.appbar-brand:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 2px; }

.appbar-actions { display: flex; gap: var(--space-2); align-items: center; }
a.appbar-sound { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.appbar-sound {
  min-height: var(--touch-target); min-width: var(--touch-target);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font: var(--type-caption);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.appbar-sound[aria-pressed="true"] { color: var(--accent-amber); border-color: var(--accent-amber); }
.appbar-sound:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 2px; }

/* Ambient "processing" scanline behind the app-bar content — a thin line
   drifting top→bottom. Green = system nominal; it turns coral (.is-error,
   toggled in app.js) while any error message is on screen, and returns to green
   the moment it clears — riding on top of that message, never the sole signal.
   Decorative: the global prefers-reduced-motion rule below disables the
   animation, leaving opacity:0 so nothing shows. A solid colour behind a soft
   horizontal mask lets the green→coral change cross-fade (gradients can't
   transition; a background-colour can). */
.appbar::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: var(--accent-phosphor);
  -webkit-mask: linear-gradient(90deg, transparent, #000 50%, transparent);
          mask: linear-gradient(90deg, transparent, #000 50%, transparent);
  box-shadow: 0 0 9px rgba(0, 255, 102, 0.5);
  transition: background-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
  animation: appbar-scan 6s linear infinite;
}
.appbar.is-error::before {
  background: var(--accent-coral);
  box-shadow: 0 0 10px rgba(255, 122, 104, 0.6);
}
@keyframes appbar-scan {
  0%   { top: -3px; opacity: 0; }
  12%  { opacity: 0.65; }
  88%  { opacity: 0.65; }
  100% { top: 100%; opacity: 0; }
}

.bottombar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 5;
  display: flex;
  justify-content: space-around;
  padding: var(--space-2) var(--space-2) calc(env(safe-area-inset-bottom) + var(--space-2));
  background: var(--surface-glass);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 72px; min-height: var(--touch-target);
  justify-content: center;
  color: var(--text-secondary);
  text-decoration: none;
  font: var(--type-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
}
.tab-icon { font-size: 1.15rem; line-height: 1; }
.tab.active { color: var(--accent-phosphor); text-shadow: 0 0 10px rgba(0, 255, 102, 0.5); }
/* Active-screen indicator: a glowing bar on the nav's top edge. This is the
   ONE "current screen" signal — a different visual language from Add's fill,
   so exactly one tab ever reads as active. */
.tab.active::before {
  content: '';
  position: absolute; top: calc(-1 * var(--space-2)); left: 50%;
  transform: translateX(-50%);
  width: 30px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--accent-phosphor);
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.6);
}
.tab:focus-visible { outline: 2px solid var(--accent-phosphor); outline-offset: 2px; }

/* Add = the primary action: a raised, filled control on EVERY screen. Its
   distinct treatment (filled disc) means it is never mistaken for "active". */
.tab-fab { color: var(--accent-phosphor); }
.tab-fab .tab-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 1px;
  border-radius: 50%;
  background: var(--accent-phosphor);
  color: var(--surface-void);
  box-shadow: 0 0 16px rgba(0, 255, 102, 0.4);
}

/* ── Page scaffold ────────────────────────────────────────────────── */

.page {
  position: relative; z-index: 1;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: var(--space-3) var(--space-3) calc(96px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--space-3);
}

.page-title {
  font: var(--type-title);
  letter-spacing: 0.12em;
  color: var(--accent-coral);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
}

/* ── Action pills: secondary actions in titles/cards ──────────────── */

.action-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--type-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent-cyan);
  border: 1px solid rgba(82, 229, 255, 0.45);
  border-radius: 999px;
  padding: var(--space-2) var(--space-3);
  min-height: 38px;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(rgba(82, 229, 255, 0.08), rgba(82, 229, 255, 0.02));
  box-shadow: inset 0 0 10px rgba(82, 229, 255, 0.07);
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.action-pill:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 16px rgba(82, 229, 255, 0.35), inset 0 0 12px rgba(82, 229, 255, 0.12);
}
.action-pill:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

.action-pill-dl {
  color: var(--accent-phosphor);
  border-color: rgba(0, 255, 102, 0.45);
  background: linear-gradient(rgba(0, 255, 102, 0.08), rgba(0, 255, 102, 0.02));
  box-shadow: inset 0 0 10px rgba(0, 255, 102, 0.07);
}
.action-pill-dl:hover {
  border-color: var(--accent-phosphor);
  box-shadow: 0 0 16px rgba(0, 255, 102, 0.35), inset 0 0 12px rgba(0, 255, 102, 0.12);
}
.action-pill-dl:focus-visible { outline-color: var(--accent-phosphor); }

/* ── Interaction primitives ──────────────────────────────────────────
   One vocabulary for every interactive control (documented in
   memory/DESIGN.md): navigation link · action button (.btn-ghost) ·
   primary CTA (.btn-primary) · action pill (.action-pill) · disclosure ·
   destructive action (undo toast). Each: icon + text, ≥44px hit area,
   visible focus ring, token-driven. */

/* Disclosure — a native <details> that expands in place. The rotating
   chevron IS the affordance; a disclosure must never read as plain text.
   The summary RESTS as a ghost-button (1px --glass-border, transparent bg —
   the .btn-ghost look) so it reads as a control WITHOUT hover. This is
   essential on touch, where :hover never fires; hover is a desktop-only
   enhancement layered on top, never the sole affordance. */
.disclosure > summary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  width: fit-content;
  min-height: var(--touch-target);
  padding: 0 var(--space-3) 0 var(--space-2);
  font: var(--type-caption);
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
  content: '\25B8';                       /* ▸ collapsed → rotates to ▾ open */
  color: var(--accent-cyan);
  transition: transform var(--dur-fast) var(--ease);
}
.disclosure[open] > summary::before { transform: rotate(90deg); }
/* Open — cyan text + border so an expanded disclosure stays clearly distinct
   from its resting siblings on every device (not gated behind hover). */
.disclosure[open] > summary { color: var(--accent-cyan); border-color: rgba(82, 229, 255, 0.28); }
/* Hover — desktop-only enhancement; the resting border above already reads as
   a button, so touch (no :hover) loses nothing. */
@media (hover: hover) {
  .disclosure > summary:hover {
    color: var(--accent-cyan);
    background: rgba(82, 229, 255, 0.08);
    border-color: rgba(82, 229, 255, 0.28);
  }
}
/* Press feedback — fires on touch (last in source so it wins over hover/open
   during an active press). */
.disclosure > summary:active {
  background: rgba(82, 229, 255, 0.16);
  border-color: rgba(82, 229, 255, 0.45);
}
.disclosure > summary:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

/* Header actions cluster — a title's 1..n actions, grouped and wrapping.
   Past ~2 actions, wrap the extras in a "⋯ more" .disclosure (see DESIGN.md). */
.header-actions {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* Back / return-to-parent link — persistent on every sub-screen. */
.back-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  align-self: flex-start;
  min-height: var(--touch-target);
  padding: 0 var(--space-2);
  margin-bottom: calc(-1 * var(--space-2));
  color: var(--accent-cyan);
  font: var(--type-caption);
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
}
.back-link:hover { text-decoration: underline; }
.back-link:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

/* Vertical-rhythm helper — stack a card's controls on one even gap. */
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack > * { margin-block: 0; }

.glass-card {
  background: var(--surface-glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: var(--space-3);
}

.card-title {
  font: var(--type-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: var(--space-2);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
}
.card-title-sum { color: var(--text-secondary); margin-left: auto; }

.empty { color: var(--text-secondary); font: var(--type-caption); }

/* ── Dashboard readout ────────────────────────────────────────────── */

.readout {
  text-align: center;
  padding: var(--space-4) 0 var(--space-2);
}

.readout-label {
  font: var(--type-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.readout-amount {
  font: var(--type-display);
  font-variant-numeric: tabular-nums;
  color: var(--accent-phosphor);
  text-shadow: 0 0 24px rgba(0, 255, 102, 0.45), 0 0 60px rgba(0, 255, 102, 0.15);
  margin: var(--space-1) 0;
}
.readout-amount.is-negative {
  color: var(--status-error);
  text-shadow: 0 0 24px rgba(255, 93, 93, 0.4);
}

.readout-sub { font: var(--type-caption); color: var(--text-secondary); }
.balance-at {
  color: var(--accent-cyan);
  margin-left: var(--space-1);
}

.balance-edit { margin-top: var(--space-2); }

.balance-form { display: flex; gap: var(--space-2); justify-content: center; }
.balance-form input {
  width: 160px;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-body);
  text-align: right;
}
.balance-form input:focus-visible { outline: none; border-color: var(--accent-phosphor); }

.btn-ghost {
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-caption);
  cursor: pointer;
}
.btn-ghost:focus-visible { outline: 2px solid var(--accent-phosphor); outline-offset: 2px; }
/* Unentitled Quick Add renders the scan control as a link to Settings. */
a.btn-ghost { text-decoration: none; }

/* ── Pay card ─────────────────────────────────────────────────────── */

.card-payday {
  border-color: var(--accent-amber);
  box-shadow: 0 0 22px rgba(255, 194, 102, 0.18);
}
.payday-banner {
  font: var(--type-caption);
  color: var(--accent-amber);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}
.pay-last { font: var(--type-caption); color: var(--text-secondary); }
.pay-last strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }

.slip-form { margin-top: var(--space-2); }
.slip-label {
  display: inline-flex; align-items: center;
  cursor: pointer;
  color: var(--accent-phosphor);
  border-color: var(--accent-phosphor);
}
.slip-label:focus-within { outline: 2px solid var(--accent-phosphor); outline-offset: 2px; }

.alert-ok {
  display: flex; gap: var(--space-2); align-items: center;
  font: var(--type-caption);
  color: var(--accent-phosphor);
  border: 1px solid var(--accent-phosphor);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}

.pay-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding-top: var(--space-2);
}
.pay-form label {
  display: flex; flex-direction: column; gap: var(--space-1);
  font: var(--type-caption);
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.pay-form input {
  min-height: var(--touch-target);
  padding: 0 var(--space-2);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-body);
  color-scheme: dark;
  width: 100%;
}
.pay-form input:focus-visible { outline: none; border-color: var(--accent-phosphor); }
.pay-form button { grid-column: span 2; }

/* ── Stats / bars / rows ──────────────────────────────────────────── */

.stat-row { display: flex; gap: var(--space-3); }
.stat { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.stat-label {
  font: var(--type-caption);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary);
}
.stat-value {
  font: var(--type-title);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.bars { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.bar-row {
  display: grid;
  grid-template-columns: minmax(80px, 34%) 1fr auto;
  gap: var(--space-2);
  align-items: center;
  font: var(--type-caption);
}
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track {
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, rgba(0, 255, 102, 0.35), var(--accent-phosphor));
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.4);
  border-radius: 4px;
}
.bar-amount { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.bar-of { color: var(--text-secondary); opacity: 0.7; }

/* Net after refunds — the quiet second figure. Gross stays the headline
   because that is what left the account; this only renders where something
   was actually refunded, so an unrefunded report looks exactly as before. */
.bar-net, .stat-net {
  display: block;
  font: var(--type-caption);
  font-size: 0.68rem;
  color: var(--accent-cyan);
  letter-spacing: 0;
  text-transform: none;
}
.bar-over-note { color: var(--status-error); margin-left: var(--space-1); }
.bar-track { position: relative; }
.bar-budget {
  position: absolute; left: 0; top: 0; height: 100%;
  background: rgba(82, 229, 255, 0.16);
  border-right: 1px solid var(--accent-cyan);
  border-radius: 4px;
}
.bar-fill { position: relative; max-width: 100%; }
.bar-fill.bar-over {
  background: linear-gradient(90deg, rgba(255, 93, 93, 0.4), var(--status-error));
  box-shadow: 0 0 10px rgba(255, 93, 93, 0.4);
}

.budget-row { gap: var(--space-3); }
.budget-row label { flex: 1; }
.budget-row input {
  width: 130px;
  min-height: var(--touch-target);
  padding: 0 var(--space-2);
  text-align: right;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-body);
}
.budget-row input:focus-visible { outline: none; border-color: var(--accent-phosphor); }

.rows { list-style: none; display: flex; flex-direction: column; }
.row {
  display: flex; gap: var(--space-2); align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed rgba(122, 255, 154, 0.12);
  font: var(--type-body);
}
.row:last-child { border-bottom: none; }
.row > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { color: var(--text-secondary); font: var(--type-caption); }
.row-amount { font-variant-numeric: tabular-nums; }
.row-badge {
  font: var(--type-caption);
  color: var(--accent-cyan);
  border: 1px solid rgba(82, 229, 255, 0.35);
  border-radius: 4px;
  padding: 0 var(--space-1);
  margin-left: var(--space-1);
}
.row-delete {
  min-width: var(--touch-target); min-height: var(--touch-target);
  background: transparent; border: none;
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  border-radius: var(--radius);
}
.row-delete:focus-visible { outline: 2px solid var(--status-error); outline-offset: 2px; }
.row-deleting { opacity: 0.4; }

/* ── Quick Add ────────────────────────────────────────────────────── */

.quickadd { gap: var(--space-2); }

.amount-display {
  display: block;
  text-align: right;
  font: var(--type-display);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-2) 0;
  transition: color var(--dur-fast) var(--ease), text-shadow var(--dur-fast) var(--ease);
}
.amount-display.has-value {
  color: var(--accent-phosphor);
  text-shadow: 0 0 24px rgba(0, 255, 102, 0.45);
}
.amount-display.flash-saved { color: var(--text-primary); text-shadow: 0 0 30px rgba(232, 246, 236, 0.6); }

.scan-zone { display: flex; gap: var(--space-2); align-items: center; }
.scan-label {
  display: inline-flex; align-items: center;
  cursor: pointer;
  color: var(--accent-cyan);
  border-color: rgba(82, 229, 255, 0.45);
}
.scan-label:focus-within { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.scan-status { font: var(--type-caption); color: var(--text-secondary); flex: 1; }

.chips-label {
  font: var(--type-caption);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary);
}

.chips {
  display: flex; gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }

.new-cat { margin-top: var(--space-2); }

/* The shared create-a-category panel. One per page, moved next to whichever
   row summoned it, so it reads as belonging to that row. */
.new-cat-panel {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius);
  background: rgba(82, 229, 255, 0.06);
}
.new-cat-panel[hidden] { display: none; }

.new-cat-form {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding-top: var(--space-2);
}
.new-cat-form input, .new-cat-form select {
  flex: 1 1 8rem; min-height: var(--touch-target);
  padding: 0 var(--space-2);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-body);
  color-scheme: dark;
}
.new-cat-form input:focus-visible, .new-cat-form select:focus-visible {
  outline: none; border-color: var(--accent-phosphor);
}

.chip {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px;
  min-height: var(--touch-target);
  padding: var(--space-1) var(--space-3);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-caption);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.chip-group { color: var(--text-secondary); font-size: 0.62rem; letter-spacing: 0.06em; }
.chip[aria-selected="true"] {
  border-color: var(--accent-phosphor);
  box-shadow: 0 0 14px rgba(0, 255, 102, 0.3), inset 0 0 10px rgba(0, 255, 102, 0.07);
  color: var(--accent-phosphor);
}
.chip:focus-visible { outline: 2px solid var(--accent-phosphor); outline-offset: 2px; }

.more-grid { display: flex; gap: var(--space-2); padding-top: var(--space-2); }
.more-grid label {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--space-1);
  font: var(--type-caption);
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.1em;
}
/* An explicit height, not min-height: WebKit gives input[type=date] an
   intrinsic height that min-height doesn't override inside a flex column,
   so Date rendered shorter than the text inputs beside it. */
.more-grid input {
  height: var(--touch-target);
  padding: 0 var(--space-2);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-body);
  color-scheme: dark;
}
.more-grid input:focus-visible { outline: none; border-color: var(--accent-phosphor); }

.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.key {
  min-height: 62px;
  font: var(--type-title);
  font-size: 1.3rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.key:active {
  transform: scale(0.96);
  box-shadow: 0 0 16px rgba(0, 255, 102, 0.35), inset 0 0 12px rgba(0, 255, 102, 0.1);
  border-color: var(--accent-phosphor);
}
.key-fn { color: var(--accent-coral); }
.key:focus-visible { outline: 2px solid var(--accent-phosphor); outline-offset: 2px; }

.btn-save { margin-top: var(--space-1); }

/* ── Quick Add: income mode ───────────────────────────────────────── */

/* Income reads cyan against the expense green, but never by colour alone:
   the pressed switch, the leading '+', the field labels and the button text
   all change with it. */
.mode-switch {
  display: flex; gap: 6px;
  padding: var(--space-1);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}
.mode-switch button {
  flex: 1; min-height: var(--touch-target);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-secondary);
  font: var(--type-caption);
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.mode-switch button:focus-visible { outline: 2px solid var(--accent-phosphor); outline-offset: 2px; }
.mode-switch button[aria-pressed="true"][data-mode="expense"] {
  color: var(--accent-phosphor); border-color: var(--accent-phosphor);
  box-shadow: 0 0 14px rgba(0, 255, 102, 0.25), inset 0 0 10px rgba(0, 255, 102, 0.06);
}
.mode-switch button[aria-pressed="true"][data-mode="income"] {
  color: var(--accent-cyan); border-color: var(--accent-cyan);
  box-shadow: 0 0 14px rgba(82, 229, 255, 0.25), inset 0 0 10px rgba(82, 229, 255, 0.06);
}

.amount-display.is-income.has-value {
  color: var(--accent-cyan);
  text-shadow: 0 0 24px rgba(82, 229, 255, 0.45);
}
.chip.chip-in[aria-selected="true"] {
  border-color: var(--accent-cyan); color: var(--accent-cyan);
  box-shadow: 0 0 14px rgba(82, 229, 255, 0.3), inset 0 0 10px rgba(82, 229, 255, 0.07);
}
.btn-primary.btn-in { border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* From / For — .more-grid's grammar, stacked and always visible. */
.io-grid { display: flex; flex-direction: column; gap: 10px; padding-top: var(--space-2); }
.io-grid label {
  display: flex; flex-direction: column; gap: var(--space-1);
  font: var(--type-caption);
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.io-grid input {
  height: var(--touch-target);
  padding: 0 var(--space-2);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-body);
  color-scheme: dark;
}
.io-grid input:focus-visible { outline: none; border-color: var(--accent-cyan); }
.io-hint {
  font: var(--type-caption); font-size: 0.68rem;
  color: var(--text-secondary);
  text-transform: none; letter-spacing: 0;
}

/* Refund → the expense it repays. */
.offset-zone { margin-top: var(--space-3); }
.offset-pick > summary { font: var(--type-caption); color: var(--accent-cyan); letter-spacing: 0.06em; }
.offset-opt { color: var(--text-secondary); }
.offset-body { padding-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.offset-body input[type="search"] {
  height: var(--touch-target);
  padding: 0 var(--space-2);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-body);
  color-scheme: dark;
}
.offset-body input[type="search"]:focus-visible { outline: none; border-color: var(--accent-cyan); }
.offset-list { max-height: 190px; overflow-y: auto; }
.offset-row {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; min-height: var(--touch-target);
  padding: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-body);
  text-align: left; cursor: pointer;
}
.offset-row > span:first-child { flex: 1; }
.offset-row:focus-visible {
  outline: none; border-color: var(--accent-cyan);
  background: rgba(82, 229, 255, 0.06);
}
.offset-linked {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius);
  background: rgba(82, 229, 255, 0.07);
  font: var(--type-caption);
  color: var(--text-primary);
  line-height: 1.5;
}
.offset-tick { color: var(--accent-cyan); font-size: 1rem; }
.offset-text { flex: 1; }
.offset-meta { color: var(--text-secondary); font-size: 0.7rem; }
.offset-clear {
  min-width: var(--touch-target); min-height: var(--touch-target);
  background: transparent; border: none;
  color: var(--text-secondary);
  border-radius: var(--radius);
  cursor: pointer;
}
.offset-clear:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

/* Income on the dashboard: cyan, always alongside a '+' and its kind glyph. */
.row-in .row-amount { color: var(--accent-cyan); }
.readout-sub .in-line { color: var(--accent-cyan); }

/* ── Buttons / forms (shared) ─────────────────────────────────────── */

.btn-primary {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--accent-phosphor);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent-phosphor);
  font: var(--type-title);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-phosphor); color: #001408; }
.btn-primary:disabled { opacity: 0.35; cursor: default; }
.btn-primary:focus-visible { outline: 2px solid var(--accent-phosphor); outline-offset: 3px; }

/* Login (pre-shell pages) */
.shell {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--space-4);
  position: relative; z-index: 1;
}
.shell .glass-card { width: min(420px, 100%); padding: var(--space-5) var(--space-4); }
.brand {
  font: var(--type-title);
  letter-spacing: 0.14em;
  color: var(--accent-phosphor);
  margin-bottom: var(--space-1);
  text-shadow: 0 0 12px rgba(0, 255, 102, 0.45);
}
.tagline { font: var(--type-caption); color: var(--text-secondary); margin-bottom: var(--space-4); }
.field { margin-bottom: var(--space-3); }
.field label {
  display: block;
  font: var(--type-caption);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.field input {
  width: 100%;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-body);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus-visible {
  outline: none;
  border-color: var(--accent-phosphor);
  box-shadow: 0 0 0 1px var(--accent-phosphor), 0 0 18px rgba(0, 255, 102, 0.25);
}

/* Long-form entry — today the admin notice body. Shares the input's skin, but
   sized by its rows attribute rather than the touch-target minimum. */
.field textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-body);
  resize: vertical;
}
.field textarea:focus-visible {
  outline: none;
  border-color: var(--accent-phosphor);
  box-shadow: 0 0 0 1px var(--accent-phosphor), 0 0 18px rgba(0, 255, 102, 0.25);
}

/* The notice exactly as it will be received. Wraps rather than scrolling
   sideways: this is the last read-through before it goes to real people, and
   a line you have to scroll to see is a line you don't read. */
.notice-body {
  white-space: pre-wrap;
  word-break: break-word;
  font: var(--type-body);
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-top: var(--space-2);
}
.alert-error {
  display: flex; gap: var(--space-2); align-items: center;
  font: var(--type-caption);
  color: var(--status-error);
  border: 1px solid var(--status-error);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.shell .alert-ok { margin-bottom: var(--space-3); }
.account-card .account-name {
  font: var(--type-body);
  color: var(--text-primary);
  margin-top: var(--space-1);
}
.account-card .account-email {
  font: var(--type-caption);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  word-break: break-all;
}
.field-hint {
  font: var(--type-caption);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.form-links {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-3);
}
.form-links .row-link { min-height: var(--touch-target); display: inline-flex; align-items: center; }

/* ── Reports ──────────────────────────────────────────────────────── */

.report-form { display: flex; flex-direction: column; gap: var(--space-3); }

.report-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.report-row label {
  flex: 1; min-width: 140px;
  display: flex; flex-direction: column; gap: var(--space-1);
  font: var(--type-caption);
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.report-row input, .report-row select {
  min-height: var(--touch-target);
  padding: 0 var(--space-2);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-body);
  color-scheme: dark;
}
.report-row input:focus-visible, .report-row select:focus-visible {
  outline: none; border-color: var(--accent-phosphor);
}

.cat-filter { border: none; }
.cat-filter legend {
  font: var(--type-caption);
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}

/* Reports category filter: a tidy equal-column grid, not a ragged wrap. */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--space-2);
}

.chip-check { position: relative; cursor: pointer; }
.chip-check input {
  position: absolute; inset: 0;
  opacity: 0;
  cursor: pointer;
}
.chip-check:has(input:checked) {
  border-color: var(--accent-phosphor);
  color: var(--accent-phosphor);
  box-shadow: 0 0 14px rgba(0, 255, 102, 0.3), inset 0 0 10px rgba(0, 255, 102, 0.07);
}
.chip-check:has(input:focus-visible) { outline: 2px solid var(--accent-phosphor); outline-offset: 2px; }

.ded-toggle { width: fit-content; flex-direction: row; align-items: center; gap: var(--space-2); }

.chart-wrap { position: relative; height: 220px; }

/* ── Tax editing (ledger) ─────────────────────────────────────────── */

.row-block { display: block; }
.row-main { display: flex; gap: var(--space-2); align-items: center; }
.row-main > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-tax { color: var(--accent-amber); border-color: rgba(255, 194, 102, 0.4); }

/* The row's edit disclosures sit side by side so a second one doesn't add a
   whole chip's height to every ledger row; whichever is open takes its own
   line so its form has the full width. */
.row-edits { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.row-edits > details[open] { flex: 1 0 100%; }

.tax-form, .category-form {
  display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center;
  padding: var(--space-2) 0;
}
.tax-form select, .tax-form input[type="number"], .category-form select {
  min-height: var(--touch-target);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-caption);
  padding: 0 var(--space-2);
  color-scheme: dark;
}
.tax-form select, .category-form select { flex: 1; min-width: 170px; }
.tax-form input[type="number"] { width: 70px; }
.pct-label {
  display: flex; align-items: center; gap: var(--space-1);
  font: var(--type-caption); color: var(--text-secondary);
}

/* ── Recurring ────────────────────────────────────────────────────── */

.recurring-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.recurring-form label {
  display: flex; flex-direction: column; gap: var(--space-1);
  font: var(--type-caption);
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.recurring-form label:first-child { grid-column: span 2; }
.recurring-form input, .recurring-form select {
  min-height: var(--touch-target);
  padding: 0 var(--space-2);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-body);
  color-scheme: dark;
  width: 100%;
}
.recurring-form input:focus-visible, .recurring-form select:focus-visible {
  outline: none; border-color: var(--accent-phosphor);
}
.recurring-form .btn-primary, .recurring-form .btn-ghost { grid-column: span 2; }

.calendar-link {
  font: var(--type-caption);
  word-break: break-all;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
}

.recurring-actions { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); }
.recurring-actions .recurring-form { flex: 1; }
.btn-danger { color: var(--status-error); border-color: var(--status-error); }
.is-inactive { opacity: 0.55; }

/* Checkbox rows + colour picker inside the shared grid form */
.recurring-form .cat-check {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; gap: var(--space-2);
  text-transform: none; letter-spacing: normal;
  color: var(--text-primary);
  min-height: var(--touch-target);
}
.recurring-form .cat-check input {
  width: 22px; height: 22px; min-height: 22px;
  accent-color: var(--accent-phosphor);
}
.recurring-form .cat-wide { grid-column: 1 / -1; }
.recurring-form input[type="color"] {
  padding: 3px; height: var(--touch-target); cursor: pointer;
}

/* ── Categories ───────────────────────────────────────────────────── */

.cat-list { list-style: none; }
.cat-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--glass-border);
}
.cat-row:first-child { border-top: none; }
.cat-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--dot, var(--accent-phosphor));
  box-shadow: 0 0 8px var(--dot, var(--accent-phosphor));
}
.cat-main { min-width: 0; }
.cat-name {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  color: var(--text-primary); font: var(--type-body);
}
.cat-actions { display: flex; gap: var(--space-1); }
.cat-actions .btn-ghost { padding: 0 var(--space-2); min-width: var(--touch-target); }
.cat-edit { grid-column: 1 / -1; }

.group-list { list-style: none; }
.group-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--glass-border);
}
.group-row:first-child { border-top: none; }
.group-actions { display: flex; align-items: center; gap: var(--space-1); }
.group-actions .btn-ghost { padding: 0 var(--space-2); min-width: var(--touch-target); }
.group-edit { grid-column: 1 / -1; }

/* ── Import ───────────────────────────────────────────────────────── */

.upload-form { display: flex; flex-direction: column; gap: var(--space-3); }
.upload-drop {
  display: block;
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
  font: var(--type-caption);
  color: var(--text-secondary);
  cursor: pointer;
}
.upload-drop:focus-within { border-color: var(--accent-phosphor); color: var(--text-primary); }
.upload-drop input { display: block; margin: 0 auto var(--space-2); color: var(--text-primary); }

.row-link { color: var(--accent-cyan); text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.row-link:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

.import-row { flex-wrap: wrap; }
.import-row > span:first-child {   /* outranks .row > span:first-child */
  flex: 1 1 100%;
  white-space: normal;
  font: var(--type-caption);
  color: var(--text-primary);
  display: flex; flex-direction: column; gap: 2px;
}
.import-select {
  flex: 1;
  min-height: var(--touch-target);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-caption);
  padding: 0 var(--space-2);
  color-scheme: dark;
}
.import-select:focus-visible { outline: none; border-color: var(--accent-phosphor); }

.suggestions-card { border-color: rgba(255, 194, 102, 0.4); }
.suggestion-form { display: flex; gap: var(--space-2); flex: 1 1 100%; flex-wrap: wrap; }
.suggestion-form .import-select { min-width: 180px; }
.suggestion-form .import-select { flex: 1; }
.suggestion-form .btn-ghost { white-space: nowrap; color: var(--accent-amber); border-color: var(--accent-amber); }

.commit-bar {
  position: sticky;
  bottom: calc(76px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--surface-glass);
  border: 1px solid var(--accent-phosphor);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  box-shadow: 0 0 24px rgba(0, 255, 102, 0.15);
}
.commit-count { flex: 1; font: var(--type-caption); color: var(--text-secondary); }
.commit-bar .btn-primary { width: auto; padding: 0 var(--space-4); }

/* ── User guide ───────────────────────────────────────────────────── */

.guide p, .guide-list { font: var(--type-body); color: var(--text-primary); }
.guide-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.guide-list li { padding-left: var(--space-3); position: relative; }
.guide-list li::before { content: '▸'; position: absolute; left: 0; color: var(--accent-phosphor); }
.guide code {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 0.85em;
}
.guide strong { color: var(--accent-phosphor-dim); }

/* ── Toast ────────────────────────────────────────────────────────── */

#toast-root {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 10;
  width: min(480px, calc(100% - 32px));
}

.toast {
  position: relative;
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--surface-glass);
  border: 1px solid var(--accent-phosphor);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: var(--space-2) var(--space-3);
  box-shadow: 0 0 24px rgba(0, 255, 102, 0.2);
  overflow: hidden;
}
.toast-msg { flex: 1; font: var(--type-caption); color: var(--text-primary); }
.toast-undo {
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid var(--accent-phosphor);
  border-radius: var(--radius);
  color: var(--accent-phosphor);
  font: var(--type-caption);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.toast-undo:focus-visible { outline: 2px solid var(--accent-phosphor); outline-offset: 2px; }
.toast-bar {
  position: absolute; left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--accent-phosphor);
  transform-origin: left;
  animation: toast-countdown 10s linear forwards;
}

@keyframes toast-countdown { to { transform: scaleX(0); } }

/* ── Reveal choreography ──────────────────────────────────────────── */

.reveal-stagger > * {
  animation: materialise var(--dur-med) var(--ease) both;
}
.reveal-stagger > *:nth-child(2) { animation-delay: 60ms; }
.reveal-stagger > *:nth-child(3) { animation-delay: 120ms; }
.reveal-stagger > *:nth-child(4) { animation-delay: 180ms; }
.reveal-stagger > *:nth-child(5) { animation-delay: 240ms; }

@keyframes materialise {
  from { opacity: 0; transform: translateY(10px); filter: brightness(1.6); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ── Report actions ───────────────────────────────────────────────── */

.report-actions { display: flex; gap: var(--space-2); align-items: stretch; }
.save-report-form { display: flex; gap: var(--space-2); flex: 1; }
.save-report-form input[name="name"] {
  flex: 1; min-width: 0;
  min-height: var(--touch-target);
  padding: 0 var(--space-2);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: var(--type-caption);
}
.save-report-form input[name="name"]:focus-visible { outline: none; border-color: var(--accent-phosphor); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Form-control floor: ≥16px everywhere ─────────────────────────────
   Readability (small monospace is hard to read on phone selects) AND it
   stops iOS Safari's forced page-zoom on focusing sub-16px controls.
   !important is deliberate: this is a floor over the shorthand `font:`
   declarations above. */
input, select, textarea { font-size: 1rem !important; }

/* ── Print: ink-friendly report output (system dialog = PDF export) ── */

.print-only { display: none; }

@media print {
  .atmosphere, .appbar, .bottombar, #toast-root, .action-pill, .back-link,
  .report-form, .report-actions, .no-print, .row-delete { display: none !important; }

  html, body { background: #fff; color: #111; }
  .page { padding: 0; width: 100%; gap: 12px; }
  .page-title { color: #111; }
  .page-title .title-action { display: none; }

  .print-only { display: block; }
  .print-header { font: var(--type-caption); color: #444; }

  .glass-card {
    background: #fff;
    border: 1px solid #ccc;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    break-inside: avoid;
  }
  .card-title { color: #333; }
  .card-title .row-link { display: none; }
  .stat-value, .row-amount, .bar-amount, .row > span:first-child { color: #111; }
  .stat-label, .row-meta, .empty, .bar-name { color: #555; }
  .row { border-bottom-color: #ddd; }
  .bar-track { background: #eee; }
  .bar-fill { background: #444; box-shadow: none; }
  .row-badge { color: #444; border-color: #999; }
}