/* Reset, type scale, shell layout (rail / bottom tabs / sticky header / content column), focus,
   reduced motion, hide-amounts. Tokens only (tokens.css). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--paper); color: var(--ink);
  font: 400 14px/22px var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
svg { display: block; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
code { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 0 4px; }
[hidden] { display: none !important; }

/* --- type scale (px / line-height / weight) ------------------------------------------------ */
.t-display { font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -.01em; }
.t-h1      { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.005em; }
.t-h2      { font-size: 17px; line-height: 24px; font-weight: 600; }
.t-body    { font-size: 14px; line-height: 22px; font-weight: 400; }
.t-small   { font-size: 12.5px; line-height: 18px; font-weight: 400; }
.t-micro   { font-size: 11px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }
.num, .tabular { font-variant-numeric: tabular-nums lining-nums; }
.num { text-align: right; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- money ----------------------------------------------------------------------------------- */
.money { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.money .paise { color: var(--ink-3); font-size: .85em; }
html[data-hide="1"] .money { filter: blur(6px); user-select: none; }

/* --- focus ------------------------------------------------------------------------------------ */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }

/* --- shell ------------------------------------------------------------------------------------ */
.skip {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 4px 12px;
}
.skip:focus { top: 8px; }

.shell { min-height: 100vh; padding-left: var(--rail-w); }

/* Rail: fixed left column. Expanded 232 at >=1280, collapsed 64 at 1024-1279 by default; the
   user toggle (html[data-rail]) overrides either way and is remembered. */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 30;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 12px; background: var(--paper-2); border-right: 1px solid var(--line);
  overflow-y: auto;
}
.rail-brand { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; margin-bottom: 16px; }
.rail-mark {
  flex: none; width: 24px; height: 24px; border-radius: var(--radius-sm);
  display: grid; place-items: center; background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 700; line-height: 1;
}
.rail-name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.rail-toggle { margin-left: auto; }
.rail-list { display: flex; flex-direction: column; gap: 2px; }
.rail-item {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px;
  border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 500;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rail-item:hover { background: var(--line); color: var(--ink); text-decoration: none; }
.rail-item[aria-current="page"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.rail-item svg { flex: none; }
.rail-label { white-space: nowrap; }
.rail-item .badge { margin-left: auto; }
.rail-foot { margin-top: auto; padding: 8px 10px 0; color: var(--ink-3); }

html[data-rail="collapsed"] .shell { padding-left: var(--rail-w-collapsed); }
html[data-rail="collapsed"] .rail { width: var(--rail-w-collapsed); padding: 16px 8px; }
html[data-rail="collapsed"] .rail .rail-label,
html[data-rail="collapsed"] .rail .rail-name,
html[data-rail="collapsed"] .rail .rail-foot { display: none; }
html[data-rail="collapsed"] .rail-brand { flex-direction: column; height: auto; gap: 8px; padding: 0; }
html[data-rail="collapsed"] .rail-toggle { margin-left: 0; }
html[data-rail="collapsed"] .rail-item { justify-content: center; padding: 0; position: relative; }
html[data-rail="collapsed"] .rail-item .badge { position: absolute; top: 4px; right: 6px; margin: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 11px; }

@media (min-width: 1024px) and (max-width: 1279.98px) {
  html:not([data-rail="expanded"]) .shell { padding-left: var(--rail-w-collapsed); }
  html:not([data-rail="expanded"]) .rail { width: var(--rail-w-collapsed); padding: 16px 8px; }
  html:not([data-rail="expanded"]) .rail .rail-label,
  html:not([data-rail="expanded"]) .rail .rail-name,
  html:not([data-rail="expanded"]) .rail .rail-foot { display: none; }
  html:not([data-rail="expanded"]) .rail-brand { flex-direction: column; height: auto; gap: 8px; padding: 0; }
  html:not([data-rail="expanded"]) .rail-toggle { margin-left: 0; }
  html:not([data-rail="expanded"]) .rail-item { justify-content: center; padding: 0; position: relative; }
  html:not([data-rail="expanded"]) .rail-item .badge { position: absolute; top: 4px; right: 6px; margin: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 11px; }
}

/* Sticky page header: title left; month picker + hide-amounts + theme right. */
.pagehead {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.pagehead-in {
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter);
  min-height: var(--head-h); display: flex; align-items: center; gap: 16px;
}
.pagehead-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagehead-status { color: var(--ink-3); white-space: nowrap; transition: opacity var(--dur) var(--ease); }
.pagehead-status.is-error { color: var(--danger); }
.pagehead-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.view {
  max-width: var(--content-max); margin: 0 auto;
  padding: 24px var(--gutter) 48px;
}
.view:focus-visible { outline: none; }
/* Single-month page under a longer range: which month it shows (app.js renderScopeNote). */
.scopenote { margin: 0 0 16px; color: var(--ink-2); }
.page { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.page > * { grid-column: 1 / -1; min-width: 0; }
.span-4 { grid-column: span 4 !important; }
.span-6 { grid-column: span 6 !important; }
.span-8 { grid-column: span 8 !important; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* No page-level fade: content swaps in from same-size skeletons, so there is no jump to soften,
   and a fade caught mid-way reads as low contrast (seen in headless screenshots). */

/* Bottom tab bar + "More" sheet: under 1024 px only. */
.tabbar { display: none; }

@media (max-width: 1023.98px) {
  .shell { padding-left: 0 !important; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }
  .rail { display: none; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; inset: auto 0 0 0; z-index: 30;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--paper-2); border-top: 1px solid var(--line);
  }
  .tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 0; background: none; color: var(--ink-3); font-size: 11px; line-height: 16px; font-weight: 500;
    text-decoration: none;
  }
  .tab:hover { text-decoration: none; color: var(--ink); }
  .tab[aria-current="page"] { color: var(--ink); }
  .tab .badge { position: absolute; top: 4px; left: calc(50% + 6px); }
  .span-4, .span-6, .span-8 { grid-column: 1 / -1 !important; }
}

@media (max-width: 599.98px) {
  :root { --gutter: 16px; }
  .pagehead-in { flex-wrap: wrap; row-gap: 0; padding-top: 8px; }
  .pagehead-title { flex: 1 1 auto; font-size: 20px; line-height: 28px; }
  .pagehead-status { display: none; }
  .pagehead-tools { flex: 1 0 100%; height: 48px; margin-left: 0; }
  .pagehead-tools .monthpicker { margin-right: auto; }
  /* Month-less pages (recurring, review, employment, loans, statements, settings) have nothing to
     put in that second row, so the eye/theme icons stay on the title row instead. */
  .pagehead:not(.has-month) .pagehead-tools { flex: 0 0 auto; height: auto; margin-left: auto; }
  .view { padding-top: 16px; }
  .page { gap: 12px; }
}

/* --- motion ----------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; scroll-behavior: auto !important;
  }
}