/* SPACING: reach for a token — `--card-pad`, `--card-gap`, `--sp-1`…`--sp-6` —
   not a raw rem, and not the value in the rule above. Cards on the padding
   contract are enforced by `test/layout-tokens.test.js`; the contract and the
   list of what is on it are in `docs/visual-language.md` → Tokens. Raw values
   still in this file are legacy from a 2px grid, not a precedent to follow. */
/* Base: typography weights, card surfaces, tints and elevation, dialogs, menus, inputs. */
body{
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  font-weight:400;
  font-family:'Heebo','Quicksand',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
/* Heebo for description text. !important because the rule above is !important —
   without it the universal font-family wins (this is what left the Upcoming
   Bills / Recurring Expenses names in Quicksand while every other description used
   Heebo). */
.stmt .desc-text,.exp-name.desc-text,.subs-nm,#inc-desc,#qa-desc,#ee-desc,#ie-desc,#rie-desc,#rxe-desc{
  font-family:'Heebo','Quicksand',system-ui,sans-serif !important;
}
/* Numeric figures keep the app face with tabular figures. */
.pill,
.amt,
.amt-green,
.ee-amt-view,
.kpi .v,
.catbar-meta,
.budget-val,
.tr-delta,
.tr-pair-val,
.plan-tile .v,
.bal-row .bv,
.trip-buffer-val,
.trip-total b,
.sb-val{
  font-family:'Quicksand','Heebo',system-ui,sans-serif !important;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{font-weight:500;}
.amt,.amt-green,.kpi .v,.plan-tile .v,.trip-total b,.bal-row .bv,.tr-delta{font-weight:600;}
.field-label{font-size:var(--fs-label);color:var(--muted);font-weight:500;}
tbody td input,tbody td select{
  background:var(--input-bg);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:0.3125rem 0.4375rem;
  font-size:var(--fs-body);
  width:100%;
  outline:none;
  transition:border-color .15s;
  border-width:1px;
}
.trip-when select,.trip-when input{
  background:var(--input-bg);
  border:1px solid var(--border);
  color:var(--text);
  padding:var(--sp-2) 0.6875rem;
  font-size:var(--fs-body);
  border-radius:var(--radius-sm);
}
/* ── Phase-4 polish: quick-add modal, toast, hover/motion ── */
/* Cards carry no outline; depth comes from a soft resting shadow, lifting on hover. */
/* Elevation comes from the --elev token so it can differ per theme. */
.table-wrap,.trip-card{
  border:none;
  box-shadow:var(--elev);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
/* KPI signed sub-lines: money uses chart tokens, not the pink danger-strong. */
.kpi .s.green{color:var(--pos);font-weight:600;}
.kpi .s.red{color:var(--neg);font-weight:600;}
/* Date-selection controls cards (Expenses, Income, Budget) get a violet tint of their own. */
/* Cards holding a list sit at the wide step — enough for the row content,
   short of the full column. */
#ov-anomaly-card{max-width:var(--card-wide);}
/* Date-selection cards hug their controls instead of stretching. align-items:end
   puts every control on one baseline (labelled groups are taller than bare
   buttons), and the month/year selects get a shared width so the three cards
   line up with each other across sections and don't resize as months change. */
/* Month needs the extra room: "December (12)" plus the dropdown arrow. Scoped
   with both ids so it outranks the shared `#card select` width above. */
/* Upcoming Bills (Overview) and Recurring Expenses (Analytics) row lists. */
.subs-row{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-2) 0;
  border-bottom:1px solid var(--border);
  font-size:var(--fs-body);
}
/* Last data row drops its rule so it doesn't double up against the total's top border. */
.subs-row:last-of-type,.subs-row:nth-last-child(2){border-bottom:none;}
.subs-nm{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:'Heebo','Quicksand',system-ui,sans-serif;
}
.subs-total{border-top:1px solid var(--border);border-bottom:none;font-weight:600;margin-top:2px;}
/* Per-source expense summary cards are tinted by their Admin-picked color (inline style). */
.trip-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--elev-hover);
}
.table-wrap:hover{box-shadow:var(--elev-hover);}
@media (prefers-reduced-motion: reduce){
  .trip-card:hover{transform:none;}
}
/* Expenses: per-source spend cards — every source in Admin, for the selected
   month. The row itself is the outer card; the tiles inside are subcards.
   Grid, not wrapping flex: the subcards share each row evenly instead of
   sitting at a fixed width and leaving a ragged tail. minmax(…,50%) floors the
   track count at two, so a source never lands alone on its own row. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{
  transition:border-color .15s ease;
}
/* Regular (400) for: section tabs, field labels above selects, and the KPI titles/date lines */
.tab{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  width:100%;
  border:none;
  background:transparent;
  cursor:pointer;
  text-align:start;
  transition:color .1s ease;
  padding:0.5625rem 0.625rem;
  border-radius:var(--radius-sm);
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--text);
  gap:0.6875rem;
}
/* color-mix off --text, not a white wash: white over the light theme's own white
   ground is nothing at all. Same trick as the shared list hover. */
.tab:hover:not(.active){color:var(--text);}
.tab.active svg{color:var(--accent);}
/* Field-level hover — every text/number/date entry and select box, app-wide.
   Deliberately a plain neutral border brighten (no lift, no shadow, no accent
   color) so it reads as a distinct signal from the card hover above and from
   the accent-colored :focus state below, even when a hovered field sits inside
   a hovered card. No !important — a hovered+focused field (the normal case
   right after clicking in) must keep the accent focus border, not this one.
   Kept as the LAST rule in the stylesheet on purpose: several earlier rules
   (e.g. .modal input,.modal select) re-assert a plain `border` shorthand at
   the same specificity, and the later rule wins ties — this must always be
   the latest one, or hover silently loses on whichever fields come after it. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):hover,select:hover,textarea:hover{
  border-color:var(--border-hover);
}
@media (prefers-reduced-motion: reduce){
  #tour-overlay{transition:none;}
}
/* ── Desktop app only (preload adds .electron to <html>) ──────────────────
   The window is titleBarStyle:'hidden', so macOS draws the traffic lights at
   their standard top-left spot but gives us no title bar and no drag area.
   The sidebar gains top padding to sit clear of the lights, and that padded
   strip plus the header become the drag regions. */
/* Desktop-only element — kept out of the flex row entirely in a plain browser,
   where it has no traffic lights to sit under. */
.drag-strip{display:none;}
html.electron .sidebar{padding-top:var(--titlebar-h);}
/* Covers the full width of the sidebar and the whole height the sidebar reserves
   above its logo. It was 140px x 38px — the v7 sidebar's width — so once v9 took
   the sidebar to 236px, the strip between the traffic lights and the "Ledger"
   mark was dead space you could not drag the window by. Both numbers now come
   from the same tokens the sidebar uses, so they cannot drift again. */
html.electron .drag-strip{
  display:block;
  position:fixed;
  top:0;
  inset-inline-start:0;
  width:var(--sidebar-w);
  height:var(--titlebar-h);
  z-index:400;
  -webkit-app-region:drag;
}
html.electron .topbar{-webkit-app-region:drag;}
html.electron[dir="rtl"] .topbar{padding-inline-end:var(--traffic-lights-w);}
html.electron .topbar button,
html.electron .topbar input,
html.electron .topbar select,
html.electron .topbar a{
  -webkit-app-region:no-drag;
}
/* the sliding pill behind the active tab belongs to the old look */
#tab-indicator{display:none !important;}
#topbar-title{font-size:var(--fs-display);font-weight:600;letter-spacing:-.022em;}
/* ── surfaces: flat cards, hairline border, roomier ── */
.card,.admin-card,.trip-card,.plan-tile{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--elev);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.card:hover{box-shadow:var(--elev);}
/* ── inputs ── */
input,select,textarea{
  border-radius:var(--radius-sm) !important;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
}
/* Kept after everything above on purpose: each of these must win over an
   equally specific rule earlier in the base (checked when the design layer was folded in). */
/* Hover fill is the sliding .tab-hover-pill in the nav, not a per-tab background. */
.tab.active{background:transparent;color:var(--accent) !important;font-weight:600;}
/* ── tables: airier rows, hairline separators ── */
table th{
  font-size:var(--fs-meta);
  color:var(--muted);
  font-weight:500;
  padding:0.8125rem 0.875rem;
  border-bottom:1px solid var(--border);
  text-transform:none;
  letter-spacing:0;
}
table td{padding:var(--sp-3) 0.875rem;border-bottom:1px solid var(--border);}
table tr:last-child td{border-bottom:0;}
.danger{background:var(--neg);color:var(--bg);}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;}