/* app.css — Yearly app styling, built on Aperture dark tokens. */

:root {
  --good: var(--sage);
  --watch: var(--amber);
  --alert: var(--terra);
  --good-dim: color-mix(in srgb, var(--good) 14%, transparent);
  --watch-dim: color-mix(in srgb, var(--watch) 14%, transparent);
  --alert-dim: color-mix(in srgb, var(--alert) 14%, transparent);
  --col-w: 440px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #E7E2D6;
  background-image: radial-gradient(120% 90% at 50% 0%, #efeadf 0%, #e3ddcf 70%);
  overflow: hidden;
}

.num { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: 0; }

/* ---- device column ---- */
.device {
  position: relative;
  width: 100%; max-width: var(--col-w);
  height: 100dvh; margin: 0 auto;
  background: var(--paper);
  display: flex; flex-direction: column;
  overflow: hidden;
}
@media (min-width: 480px) {
  body { padding: 22px 0; }
  .device {
    height: min(920px, calc(100dvh - 44px));
    border-radius: 40px;
    border: 1px solid var(--hair);
    box-shadow: 0 40px 90px rgba(60,52,38,0.22), 0 8px 24px rgba(60,52,38,0.14);
    overflow: hidden;
  }
}

/* ---- top bar ---- */
.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s-3);
  padding: max(env(safe-area-inset-top), 26px) var(--screen-pad) 14px;
  background: transparent;
  border-bottom: 0;
  z-index: 20;
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-mark { font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.spacer { flex: 1; }
.yearpill {
  display: inline-flex; align-items: center; gap: 5px;
  height: auto; padding: 4px 2px; border-radius: 0;
  background: transparent; border: 0;
  color: var(--muted); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em;
  cursor: pointer; transition: color var(--dur-fast) var(--ease);
}
.yearpill:hover { background: transparent; color: var(--ink); }
.yearpill .num { font-weight: 500; letter-spacing: 0.06em; }

/* ---- scroll body ---- */
.scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { width: 0; }
.screen { padding: 12px var(--screen-pad) 28px; display: flex; flex-direction: column; gap: 30px; min-height: 100%; }

.eyebrow {
  font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.section-h { display: flex; align-items: baseline; gap: 8px; margin: 0; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.section-h h2 { margin: 0; font-family: var(--serif); font-size: 23px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); text-wrap: balance; }
.section-h .spacer { flex: 1; }
.section-h .sec-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.linklike { color: var(--terra); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; font-weight: 500; cursor: pointer; background: none; border: 0; padding: 4px 0; display: inline-flex; align-items: center; gap: 3px; }

.panel {
  background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r-card); box-shadow: var(--shadow-rest);
}
.panel-pad { padding: 18px; }

/* ---- hero (no card, no box — content on paper) ---- */
.hero { padding: 16px 0 0; text-align: left; }
.hero .eyebrow { color: var(--muted); }
.hero-num { font-family: var(--serif); font-weight: 300; font-size: 76px; line-height: 0.98; margin: 12px 0 6px; letter-spacing: -0.03em; color: var(--ink); }
.hero-sub { display: block; font-size: 15px; color: var(--ink-2); text-wrap: pretty; }
.hero-sub .num { color: var(--ink); font-weight: 500; }
.hero-emph { font-family: var(--mono); font-weight: 700; }
.hero-emph.over { color: var(--terra); }
.hero-emph.under { color: var(--sage); }
.status-good { color: var(--sage); } .status-watch { color: var(--amber); } .status-alert { color: var(--terra); }
.bg-good { background: var(--good-dim); color: var(--sage); }
.bg-watch { background: var(--watch-dim); color: var(--amber); }
.bg-alert { background: var(--alert-dim); color: var(--terra); }
.bg-info { background: var(--paper-tint); color: var(--ink-2); }

/* pace rule — 3px track, terra fill to spent/target, ink marker at day-of-year */
.pace-rule { position: relative; height: 3px; border-radius: 2px; background: var(--chart-grid); margin-top: 22px; }
.pace-fill { position: absolute; left: 0; top: 0; height: 3px; border-radius: 2px; background: var(--terra); }
.pace-mark { position: absolute; top: -4px; width: 1.5px; height: 11px; background: var(--ink); }
.pace-legend { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* gauge */
.gauge-wrap { display: grid; place-items: center; padding: 6px 0 2px; }
.gauge-num { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; }
.gauge-label { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---- callouts — hairline list rows, never filled cards ---- */
.callouts { display: flex; flex-direction: column; }
.callout {
  display: flex; gap: 13px; align-items: flex-start;
  background: none; border: 0; border-bottom: 1px solid var(--hair);
  padding: 16px 0; cursor: pointer; text-align: left; width: 100%;
  transition: opacity var(--dur-fast) var(--ease);
}
.callout:last-child { border-bottom: 0; }
.callout:hover { opacity: 0.72; }
.callout-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 99px; margin-top: 7px; }
.callout-body { flex: 1; min-width: 0; }
.callout-text { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.callout-text .num { color: var(--ink); font-weight: 500; }
.callout-text b { font-weight: 700; color: var(--ink); }
.callout-arrow { color: var(--muted); font-family: var(--serif); font-size: 18px; margin-top: -2px; flex: 0 0 auto; }

/* ---- transaction rows ---- */
.txlist { display: flex; flex-direction: column; }
.txrow {
  display: flex; align-items: center; gap: 13px; padding: 11px 4px; cursor: pointer; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--hair);
}
.txrow:last-child { border-bottom: 0; }
.txrow:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); border-radius: 6px; }
.cat-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.tx-main { flex: 1; min-width: 0; }
.tx-desc { font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 1px; }
.tx-amt { font-size: 14px; font-weight: 500; color: var(--ink); }

/* ---- bottom nav — editorial, not a FAB blob ---- */
.nav {
  flex: 0 0 auto; position: relative;
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;
  padding: 14px var(--screen-pad) max(env(safe-area-inset-bottom), 22px);
  background: var(--paper);
  border-top: 1px solid var(--hair); z-index: 20;
}
.nav-tab {
  display: block; text-align: center;
  background: none; border: 0; cursor: pointer; color: var(--muted); padding: 6px 0;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em;
}
.nav-tab.active { color: var(--ink); font-weight: 700; }
.nav-tab.active span::after {
  content: ""; display: block; height: 2px; width: 22px; background: var(--terra); margin: 6px auto 0;
}
.nav-fab-wrap { display: grid; place-items: center; }
.fab {
  width: 44px; height: 44px; border-radius: 99px; cursor: pointer;
  background: transparent; border: 1.5px solid var(--terra); color: var(--terra);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 24px; font-weight: 300; line-height: 1;
  transition: background var(--dur-fast) var(--ease);
}
.fab:hover { background: color-mix(in srgb, var(--terra) 8%, transparent); }
.fab:active { background: color-mix(in srgb, var(--terra) 14%, transparent); }

/* ---- bottom sheet ---- */
.sheet-scrim {
  position: absolute; inset: 0; background: rgba(34, 28, 18, 0.35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 40;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.sheet-scrim.open { opacity: 1; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--paper); border-top-left-radius: 28px; border-top-right-radius: 28px;
  border-top: 1px solid var(--hair);
  box-shadow: var(--shadow-modal);
  transform: translateY(100%); transition: transform 0.34s var(--ease);
  max-height: 92%; display: flex; flex-direction: column;
  padding-bottom: max(env(safe-area-inset-bottom), 16px);
}
.sheet.open { transform: translateY(0); }
.grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--hair-strong); margin: 10px auto 4px; flex: 0 0 auto; }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 6px 18px 12px; }
.sheet-head h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.sheet-scroll { overflow-y: auto; padding: 0 18px 18px; }
.sheet-scroll::-webkit-scrollbar { width: 0; }
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-scrim { transition: none; }
}

/* template grid */
.tilegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tpl {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px 11px;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 18px; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur) var(--ease);
}
.tpl:hover { transform: translateY(-3px); border-color: var(--hair-strong); }
.tpl:active { transform: translateY(0); }
.tpl-dot { width: 10px; height: 10px; border-radius: 99px; flex: 0 0 auto; }
.tpl-name { font-size: 11.5px; font-weight: 500; color: var(--ink-2); text-align: center; line-height: 1.1; }

/* amount entry */
.amount-display { text-align: center; padding: 12px 0 6px; }
.amount-display .num { font-size: 50px; font-weight: 600; letter-spacing: -0.03em; }
.amount-display .cur { color: var(--muted); font-size: 30px; font-weight: 500; }

/* forms */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.field > label { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; padding-left: 2px; }
.inp {
  width: 100%; height: 46px; padding: 0 15px; border-radius: 13px;
  background: transparent; border: 1px solid var(--hair); color: var(--ink);
  font: 16px var(--sans); outline: none; transition: border-color var(--dur-fast) var(--ease);
}
.inp:focus { border-color: var(--terra); }
textarea.inp { height: auto; padding: 12px 15px; resize: vertical; min-height: 64px; line-height: 1.4; }
.inp-num { font-family: var(--mono); }

/* category picker grid */
.catpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.catpick-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 13px;
  background: var(--paper); border: 1px solid var(--hair); cursor: pointer; font-size: 12.5px; color: var(--ink-2);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.catpick-item.sel { border-color: var(--terra); background: color-mix(in srgb, var(--terra) 12%, transparent); color: var(--ink); }
.cat-dot { width: 8px; height: 8px; border-radius: 99px; flex: 0 0 auto; }

/* category bars (analysis) */
.catbar-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; cursor: pointer; width: 100%; background: none; border: 0; text-align: left; border-bottom: 1px solid var(--hair); }
.catbar-row:last-child { border-bottom: 0; }
.catbar-main { flex: 1; min-width: 0; }
.catbar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.catbar-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.catbar-amt { font-size: 13px; font-weight: 500; color: var(--ink); }
.catbar-track { height: 3px; border-radius: 2px; background: var(--hair); overflow: hidden; }
.catbar-fill { height: 100%; border-radius: 2px; }
.catbar-sub { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 5px; display: flex; gap: 10px; }

/* stat grid — flat hairline-separated figures, no filled cards */
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.stat { padding: 14px 4px; border-bottom: 1px solid var(--hair); }
.stat:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--hair); }
.stat-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.stat-val { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.stat-val.num { font-family: var(--mono); }
.stat-sub { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 3px; }

/* settings rows */
.setrow { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-bottom: 1px solid var(--hair); cursor: pointer; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; color: var(--ink); }
.setrow:last-child { border-bottom: 0; }
.setrow:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.setrow-ic { flex: 0 0 auto; display: grid; place-items: center; color: var(--ink-2); }
.setrow-main { flex: 1; }
.setrow-title { font-size: 15px; font-weight: 500; color: var(--ink); }
.setrow-sub { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 1px; }
.setrow-val { font-family: var(--mono); font-size: 13px; color: var(--muted); }

.year-row { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--hair); }
.year-row:last-child { border-bottom: 0; }

.muted { color: var(--muted); }
.empty { text-align: center; color: var(--muted); font-size: 13.5px; padding: 30px 20px; line-height: 1.5; }

/* slider */
.rangewrap { display: flex; align-items: center; gap: 14px; }
input[type="range"].rng { -webkit-appearance: none; appearance: none; flex: 1; height: 5px; border-radius: 4px; background: linear-gradient(to right, var(--terra) 0 var(--rng-fill, 0%), var(--paper-tint) var(--rng-fill, 0%) 100%); outline: none; }
input[type="range"].rng::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--hair-strong); cursor: pointer; }
input[type="range"].rng::-moz-range-thumb { width: 22px; height: 22px; border: 1.5px solid var(--hair-strong); border-radius: 50%; background: var(--paper); cursor: pointer; }

/* import preview */
.imp-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.imp-row.skip { opacity: 0.4; }
.imp-main { flex: 1; min-width: 0; }
.chk { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--hair-strong); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; color: var(--paper); }
.dupflag { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--amber); letter-spacing: 0.04em; }

/* tiny pill select */
.selpill { height: 30px; border-radius: var(--r-pill); background: var(--paper-tint); border: 1px solid var(--hair); color: var(--ink); font: 13px var(--sans); padding: 0 10px; cursor: pointer; }

/* entrance */
/* entrance: kept minimal & safe — no hidden start state (preview freezes anims at t=0) */

/* ---- toast ---- */
.toast {
  position: absolute; bottom: 80px; left: 16px; right: 16px; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border: 1px solid var(--hair-strong);
  border-radius: var(--r-pill); padding: 12px 8px 12px 18px;
  box-shadow: var(--shadow-modal);
  transform: translateY(16px); opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.toast.open { transform: translateY(0); opacity: 1; }
.toast-msg { flex: 1; font-size: 14px; color: var(--ink); }
.toast-btn {
  flex: 0 0 auto; background: none; border: 0; padding: 6px 12px;
  color: var(--terra); font: 600 14px var(--sans); cursor: pointer;
  border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease);
}
.toast-btn:hover { background: color-mix(in srgb, var(--terra) 12%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* ---- DS primitives (Button, SegmentedControl, Input, Chip from y/ds.jsx) ---- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 46px; padding: 0 22px; border-radius: var(--r-pill);
  font: 500 15px var(--sans); cursor: pointer; border: 0; text-align: center;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.ds-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ds-btn:not(:disabled):hover { transform: translateY(-1px); }
.ds-btn:not(:disabled):active { transform: translateY(0); }
.ds-btn-primary { background: var(--terra); color: var(--paper); font-weight: 600; }
.ds-btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--hair); }
.ds-btn-block { width: 100%; }

.ds-seg {
  display: inline-flex; background: var(--paper-tint); border-radius: var(--r-pill);
  padding: 3px;
}
.ds-seg-fill { display: flex; width: 100%; }
.ds-seg-item {
  flex: 1; height: 32px; padding: 0 14px; border-radius: var(--r-pill);
  font: 500 13.5px var(--sans); cursor: pointer; border: 0; background: transparent;
  color: var(--muted); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.ds-seg-item.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(60,52,38,0.18); }

.ds-input {
  display: flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 15px; border-radius: 13px;
  background: transparent; border: 1px solid var(--hair);
  transition: border-color var(--dur-fast) var(--ease);
}
.ds-input:focus-within { border-color: var(--terra); }
.ds-input-field {
  flex: 1; background: none; border: 0; outline: none;
  color: var(--ink); font: 15px var(--sans);
}
.ds-input-field::placeholder { color: var(--muted); }

.ds-chip {
  height: 32px; padding: 0 14px; border-radius: var(--r-pill);
  font: 500 13px var(--sans); cursor: pointer;
  border: 1px solid var(--hair); background: transparent; color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.ds-chip.pressed { background: var(--ink); border-color: var(--ink); color: var(--paper); }