/* Home (UI-022, UI-026): bento tiles read top-left to bottom-right in four zones. Home only: lists keep the Ledger grid.
   12 columns, 12px gaps, 12px radius, no hairline grid. Tiles never grow: lists scroll inside or link to "Show all".
   Zones: 1 Right now (violet) · 2 Needs you (amber) · 3 This month (rose out / teal in / sky where / indigo pace) · 4 Behind the numbers (muted).
   Design: docs/design/home-landing-v2.md · Board: design/home-landing-v2.html, Option A. */

/* Colours for the This month tiles (one meaning each; numbers stay text colour) */
:root {
  --rose: #FB7185; --rose-dim: rgba(251,113,133,.24);
  --teal: #2DD4BF; --teal-dim: rgba(45,212,191,.22);
  --sky: #38BDF8; --sky-dim: rgba(56,189,248,.22);
  --indigo: #A5B4FC; --indigo-dim: rgba(165,180,252,.18);
}
[data-theme="light"] {
  --yellow-text: #7A4D0B;
  --rose: #BE3455; --rose-dim: rgba(190,52,85,.14);
  --teal: #0F766E; --teal-dim: rgba(15,118,110,.14);
  --sky: #0369A1; --sky-dim: rgba(3,105,161,.13);
  --indigo: #4338CA; --indigo-dim: rgba(67,56,202,.11);
}

#dsub-overview { max-width: var(--lg-max); width: 100%; margin: 0 auto; gap: 12px; }

/* Greeting: one line built from real numbers (homeGreeting) */
.hg-greet { display: grid; gap: 2px; margin-bottom: 4px; }
.hg-greet-t { font: 700 19px/1.25 var(--font-sans); letter-spacing: -.01em; color: var(--text); }
.hg-greet-l { font: 14px/1.45 var(--font-sans); color: var(--text-mid); }
.hg-greet-l b { font-weight: 700; color: var(--text); }
.hg-greet-l .is-good { color: var(--green); }
.hg-greet-l .is-bad { color: var(--red); }

/* One grid, DOM order = reading order. Zone labels are grid items. */
.lg-grid.hg-grid { --hg-r1: 252px; --hg-r2: 176px; --hg-r4: 196px; gap: 12px; background: transparent; border: 0; }
.hg-grid .lg-tile { border-radius: 12px; border: 1px solid transparent; padding: 16px 18px; }
/* Section headers: readable, sentence case; the small square carries the zone colour */
.hg-zl { grid-column: span 12; display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font: 700 14px/1.2 var(--font-sans); color: var(--text); }
.hg-zl:first-child, .hg-zl.is-z2 { margin-top: 0; }
.hg-zl i { width: 9px; height: 9px; border-radius: 2px; background: var(--text-mid); flex: none; }
.hg-zl.is-z1 { grid-column: span 5; } .hg-zl.is-z1 i { background: var(--accent); }
.hg-zl.is-z2 { grid-column: span 7; } .hg-zl.is-z2 i { background: var(--yellow); }
.hg-zl.is-z4 i { background: var(--border-hi); }
.hg-hero { grid-column: span 5; height: var(--hg-r1); position: relative; }
.hg-needs { grid-column: span 7; height: var(--hg-r1); }
.hg-pace { grid-column: span 5; height: var(--hg-r2); }
.hg-quick { display: contents; }
.hg-acct, .hg-recent, .hg-up { grid-column: span 4; height: var(--hg-r4); }

.hg-empty { margin: 0; font: 13px/1.5 var(--font-sans); color: var(--text-mid); }
.hg-dim { color: var(--text-dim); font-weight: 400; }
.hg-hero > .lg-btn, .hg-acct > div > .lg-btn { justify-self: start; }

/* Safe to spend */
.hg-grid .hg-hero { background: linear-gradient(160deg, var(--accent-dim), var(--surface) 70%); border-color: var(--accent-glow); }
.hg-hero-num { font: 700 52px/1 var(--font-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.hg-hero-num.is-negative { color: var(--red); }
.hg-lines { display: grid; margin-top: 2px; }
.hg-line { display: flex; justify-content: space-between; align-items: center; height: 26px; border-top: 1px solid var(--lg-line);
  font: 12.5px var(--font-sans); color: var(--text-mid); }
.hg-line:first-child { border-top: 0; }
.hg-line .lg-num { font-size: 12.5px; color: var(--text); }
.hg-runway-wrap { margin-top: auto; display: grid; gap: 6px; }
.hg-runway { height: 8px; border-radius: 4px; overflow: hidden; background: var(--accent-dim); display: flex; }
.hg-runway .is-committed { background: var(--accent); }
.hg-runway-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 11.5px var(--font-sans); color: var(--text-dim); }
.hg-brow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 9px; align-items: center; height: var(--lg-row);
  border-top: 1px solid var(--lg-line); font: 12.5px var(--font-sans); }
.hg-brow:first-child { border-top: 0; }
.hg-brow .lg-num { font-size: 12px; }
.hg-panel { position: absolute; inset: 0; background: var(--surface); padding: var(--lg-pad); display: flex; flex-direction: column; gap: 8px; z-index: 2; }

/* September pace: the chart is drawn at the tile's pixel size (home.js drawPace), so text is never stretched */
.hg-pace .lg-tile-h { align-items: center; }
.pace-legend { display: flex; gap: 14px; font: var(--lg-fs-xs) var(--font-sans); color: var(--text-dim); }
.pace-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pace-legend i { width: 14px; height: 0; border-top: 2px solid var(--accent-hi); }
.pace-legend i.is-usual { border-top: 2px dashed var(--text-dim); }
.hg-pace .pace-desk { flex: 1; min-height: 0; position: relative; }
.pace-box { position: absolute; inset: 0; }
.pace-svg { position: absolute; inset: 0; }
.pace-chart svg { display: block; overflow: visible; }
.pace-chart svg text { fill: var(--text-dim); font: 11px var(--font-sans); }
.pace-chart svg .grid { stroke: var(--border); stroke-width: 1; }
.pace-chart svg .usual { stroke: var(--text-dim); stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
.pace-chart svg .mine { stroke: var(--accent-hi); stroke-width: 2; fill: none; }
.pace-chart svg .area { fill: var(--accent-dim); stroke: none; }
.pace-chart svg .today { stroke: var(--border-hi); stroke-width: 1; }
.pace-chart svg .dot { fill: var(--accent-hi); stroke: var(--surface); stroke-width: 2; }
.pace-chart svg .end-label { fill: var(--text); font: 700 12px var(--font-mono); }
.pace-chart svg .hit { fill: transparent; stroke: none; cursor: crosshair; }
.pace-chart svg .cross { stroke: var(--text-dim); stroke-width: 1; }
.pace-tip {
  position: absolute; top: 8px; pointer-events: none; white-space: nowrap; padding: 6px 9px;
  background: var(--surface-2, var(--surface)); border: 1px solid var(--border-hi);
  font: 11px/1.5 var(--font-mono); color: var(--text); z-index: 2;
}
.pace-tip b { font-family: var(--font-sans); }
.pace-verdict { font: 12px var(--font-sans); color: var(--text-mid); }
.pace-verdict b { font-weight: 700; }
.pace-verdict .is-under, .hg-stat-m .is-under { color: var(--green); }
.pace-verdict .is-over, .hg-stat-m .is-over { color: var(--red); }
/* Line draws once on first paint; reduced motion skips it */
.hg-pace.is-drawing .mine { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pace-draw 900ms ease-out forwards; }
@keyframes pace-draw { to { stroke-dashoffset: 0; } }

/* Needs you (amber = act): fixed tile, max 3 rows; "Show all" scrolls inside the tile. Clear = neutral tile. */
.hg-grid .hg-needs { background: var(--surface); }
.hg-needs .lg-tile-h > b { color: var(--yellow-text, var(--yellow)); font-size: 13px; }
.hg-needs-list { list-style: none; margin: 0; padding: 0; }
.hg-need { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--lg-line); }
.hg-need:first-child { border-top: 0; }
.hg-need.is-leaving { animation: hg-need-out 320ms ease-in forwards; }
@keyframes hg-need-out { to { opacity: 0; transform: translateX(24px); } }
.hg-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font-sans); }
.hg-dot.is-accent { background: var(--accent-dim); color: var(--accent-hi); }
.hg-dot.is-yellow { background: var(--yellow-dim); color: var(--yellow); }
.hg-dot.is-red { background: var(--red-dim); color: var(--red); }
.hg-dot.is-green { background: var(--green-dim); color: var(--green); }
.hg-need-text { min-width: 0; }
.hg-need-text b { display: block; font: 600 12.5px/1.3 var(--font-sans); color: var(--text); }
.hg-need-sub { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.hg-need-sub small { color: var(--text-dim); font: 11.5px/1.3 var(--font-sans); }
.hg-need-sub .lg-link { flex: none; font-size: 11.5px; }

/* This month tiles: flat --surface, an 18px icon chip + label, a ~20px number, then Behind-the-numbers style detail rows */
.hg-grid .hg-stat, .hg-grid .hg-pace { padding: 12px 14px; }
.hg-grid .hg-stat { grid-column: span 2; height: var(--hg-r2); gap: 2px; justify-content: flex-start; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.hg-grid .hg-stat.is-phone-only { display: none; }
.hg-stat:hover { background: var(--surface-2); }
.hg-stat:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
.hg-st-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hg-ic { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; flex: none; }
.hg-ic svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hg-m-out .hg-ic { background: var(--rose-dim); color: var(--rose); }
.hg-m-in .hg-ic { background: var(--teal-dim); color: var(--teal); }
.hg-m-where .hg-ic { background: var(--sky-dim); color: var(--sky); }
.hg-m-pace .hg-ic { background: var(--indigo-dim); color: var(--indigo); }
.hg-stat-v { font: 700 20px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0 2px; }
.hg-stat-m { font: var(--lg-fs-xs) var(--font-sans); color: var(--text-mid); }
.hg-stat-m.is-phone-meta { display: none; }
.hg-sl { display: grid; margin-top: 2px; }
.hg-sl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 28px; border-top: 1px solid var(--lg-line); font: 12px var(--font-sans); color: var(--text-mid); }
.hg-sl-row:first-child { border-top: 0; }
.hg-sl-row .lg-num { font-size: 12px; color: var(--text); }
.hg-sl-row .lg-num.is-good { color: var(--green); }
.hg-sl-row .lg-num.is-bad { color: var(--red); }
.hg-sl-merch { grid-template-columns: 20px minmax(0, 1fr) auto; }
.hg-tag { color: var(--text-dim); font-size: 10.5px; margin-left: 3px; }
.hg-check { color: var(--green); margin-right: 2px; }
.hg-needs.is-clear .lg-tile-h > b { color: var(--text); }
.hg-clear-list { display: grid; margin-top: 4px; }
.hg-clear-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 9px; align-items: center; height: 28px; border-top: 1px solid var(--lg-line); font: 12px var(--font-sans); color: var(--text-mid); }
.hg-clear-row:first-child { border-top: 0; }
.hg-clear-row.hg-fact { grid-template-columns: minmax(0, 1fr) auto auto; }
.hg-clear-row.hg-fact .hg-dim { font-size: 11.5px; }
.hg-clear-row .lg-num { font-size: 12px; color: var(--text); }
.hg-clear-row .lg-num.hg-dim { color: var(--text-dim); font-weight: 400; }
.hg-clear-row .lg-num.is-in { color: var(--green); }
.hg-sl-merch > .lg-ellip { color: var(--text); }
.hg-m-where .hg-st-top { margin-bottom: 2px; }
.hg-grid .hg-stat.hg-m-where { grid-column: span 3; }
.hg-sl-row > .lg-ellip > .hg-dim { margin-right: 2px; }

/* Zone 4, behind the numbers: smaller and muted */
.hg-grid .hg-z4 { background: var(--surface-2); padding: 12px 14px; gap: 6px; }
.hg-z4 .lg-tile-h > b { color: var(--text-dim); font-size: 11.5px; }
.hg-z4 .lg-row { height: 28px; font-size: 12px; color: var(--text-mid); }

/* Accounts, Recent activity, Upcoming */
.hg-acct .lg-row, .hg-recent .lg-row, .hg-up .lg-row { flex: none; }
.hg-arow .lg-sub { font-size: var(--lg-fs-xs); }
.hg-arow .is-owed { color: var(--red); }
.lg-row .is-in { color: var(--green); }
.hg-recent .lg-row { cursor: pointer; }
.hg-recent .lg-row:hover { background: var(--surface-2, transparent); }
.hg-up .hg-urow { grid-template-columns: 52px minmax(0, 1fr) auto; }
.hg-up .hg-urow .lg-num:first-child { white-space: nowrap; }
.hg-up .hg-urow .lg-num:first-child { font-size: 11.5px; }
.hg-fit { flex: 1; min-height: 0; overflow: hidden; }
.hg-fit-row:first-child { border-top: 0; }
.lg-mlogo, .lg-blogo { letter-spacing: 0; }
.hg-acct .lg-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
.hg-acct .lg-blogo { justify-self: start; }

/* Tablet: pace takes a full row, its three stats share the next one, Upcoming gets its own row */
@media (max-width: 1100px) {
  .hg-grid .hg-pace { grid-column: span 12; }
  .hg-grid .hg-stat, .hg-grid .hg-stat.hg-m-where { grid-column: span 4; height: auto; }
  .hg-acct, .hg-recent { grid-column: span 6; }
  .hg-up { grid-column: span 12; height: 196px; }
}

/* Phone: the tighter version. Right now (number + runway), Needs you (top 2 + "All"), This month as Spent and Net worth halves. Zone 4 is hidden. */
@media (max-width: 768px) {
  #dsub-overview { gap: 12px; }
  .hg-greet-t { font-size: 17px; }
  .hg-greet-l { font-size: 13px; }
  .lg-grid.hg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hg-zl, .hg-zl.is-z1, .hg-zl.is-z2 { grid-column: span 2; margin-top: 4px; }
  .hg-zl.is-z1 { margin-top: 0; }
  .hg-grid .hg-zl.is-z4 { display: none; }
  .hg-hero { grid-column: span 2; height: auto; }
  .hg-grid .hg-pace, .hg-grid .hg-acct, .hg-grid .hg-recent, .hg-grid .hg-up, .hg-grid .hg-stat.is-desk-only { display: none; }
  .hg-grid .hg-needs { grid-column: span 2; height: auto; max-height: 300px; }
  .hg-grid .hg-stat { grid-column: span 1; height: 96px; order: 6; }
  .hg-sl { display: none; }
  .hg-stat-m.is-phone-meta { display: block; }
  .hg-zl.is-z1 { order: 1; } .hg-hero { order: 2; } .hg-zl.is-z2 { order: 3; } .hg-grid .hg-needs { order: 4; } .hg-zl.is-z3 { order: 5; }
  .hg-grid .hg-stat.is-phone-only { display: flex; }
  .hg-hero-num { font-size: 40px; }
  .hg-lines { display: none; }
  .hg-runway-wrap { margin-top: 4px; }
  .hg-need { padding: 9px 0; }
  .hg-need .lg-btn { height: 30px; }
  .hg-panel { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-pace.is-drawing .mine { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .hg-need.is-leaving { animation: none; }
}

/* Slim scrollbars inside tiles */
.hg-grid .lg-scroll { scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; }
.hg-arow .hg-signin { color: var(--red); font-weight: 600; }