/* Density pass (UI-020): Spending lenses, Month calendar, Compare and shared chrome.
   Desktop is dense and uses the full 1200px content width; phone is lean and drops secondary fields.
   Loaded after the inline styles in index.html (same specificity, later wins). Flow keeps its own CSS. */

/* ---------- Shared chrome, desktop ---------- */
@media (min-width: 769px) {
  :root { --nav-h: 50px; }
  .app-main { padding-top: 16px; padding-bottom: 32px; }
  .spend-seg { margin: 6px 0; }
}

/* ---------- Merchants and Subscriptions ---------- */
.spend-view:not(.flow-view) { gap: 10px; padding-top: 0; }

@media (min-width: 769px) {
  .spend-view:not(.flow-view) { max-width: none; }
  .spend-hero-num { font-size: 34px; }
  .spend-row { padding: 6px 8px; }
  .spend-row .txn-logo { width: 26px; height: 26px; font-size: 10px; }
  .spend-group-h { padding: 10px 8px 4px; }

  /* Merchants: one line per row, the habit gets its own column, bar takes the slack */
  .spend-merchant-row { grid-template-columns: 24px 26px minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(120px, 1fr) 90px; }
  .spend-merchant-row .spend-name-stack { display: contents; }
  .spend-merchant-row .spend-habit { font-size: 12.5px; }

  /* Subscriptions: wider number columns, row on one line already */
  .spend-sub-row { grid-template-columns: 26px minmax(0, 1fr) 110px 110px 130px; }
}

/* Phone: name and amount only */
@media (max-width: 768px) {
  .spend-row { padding: 8px 4px; gap: 10px; }
  .spend-row .txn-logo { width: 30px; height: 30px; font-size: 11px; }
  .spend-merchant-row { grid-template-columns: 18px 30px minmax(0, 1fr) auto; }
  .spend-merchant-row .spend-habit { display: none; }
  .spend-sub-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .spend-hero { gap: 6px; }
  .spend-hero-num { font-size: 30px; }
  .spend-hero-meta { text-align: left; font-size: 12.5px; line-height: 1.45; }
  .spend-toolbar { gap: 6px; }
  .spend-periods { width: 100%; }
  .spend-period { flex: 1; padding: 6px 4px; }
  .spend-foot { font-size: 12px; }
}

/* ---------- Month (calendar) ---------- */
@media (min-width: 769px) {
  #dsub-month .month-workspace-head { margin-bottom: 10px; align-items: center; }
  #dsub-month .view-title { font-size: 20px; }
  #dsub-month .view-subtitle { margin-top: 2px; }
  #dsub-month .ana-glance-head { padding: 10px 14px; }
  #dsub-month .ana-calendar-wrap { padding: 10px 14px 14px; }
  #dsub-month .ana-calendar-day { min-height: 80px; padding: 7px 9px; }
  #dsub-month .ana-calendar-date { margin-bottom: 4px; }
}

@media (max-width: 768px) {
  #dsub-month .month-workspace-head { flex-direction: row; align-items: center; margin-bottom: 8px; }
  #dsub-month .view-subtitle { display: none; }
  #dsub-month .ana-glance-head { padding: 10px; gap: 8px; }
  /* Title and the two 44px arrows share the first row; the three modes get a full-width second row */
  #dsub-month .ana-glance-head { flex-wrap: wrap; align-items: center; }
  #dsub-month .ana-glance-head > div:first-child { margin-right: auto; }
  #dsub-month .ana-glance-nav { display: contents; }
  #dsub-month .ana-calendar-modes { order: 3; flex: 1 0 100%; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
  #dsub-month .ana-calendar-mode { padding: 0 4px; }
  /* Cells carry the amount only; names and counts do not fit at this width */
  #dsub-month .ana-calendar-note,
  #dsub-month .ana-calendar-count,
  #dsub-month .ana-calendar-bill b,
  #dsub-month .ana-calendar-merchant-visits { display: none; }
  #dsub-month .ana-calendar-day { min-height: 54px; }
  #dsub-month .ana-calendar-date { margin-bottom: 4px; }
  #dsub-month .ana-calendar-spent { font-size: 10px; }
}

/* ---------- Phone chrome ---------- */
@media (max-width: 768px) {
  /* The 36px bottom padding from the inline rule left the last row under the 60px bottom nav */
  #page-app .app-main { padding: 12px 14px 76px; }
  #view-dashboard .view-title { font-size: 18px; }
}

/* ---------- Plan (Flexible spending and Goals side by side on desktop; budgets rows live in budgets.css) ---------- */
#view-budgets { gap: 16px; }
.plan-flex { padding: 14px 16px; gap: 8px; }
.plan-goals, .plan-budgets { gap: 8px; }
#plan-goals .bh-row { margin-bottom: 10px; }
#plan-goals .bh-row-label { flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
#plan-goals .bh-vals { white-space: nowrap; }
@media (min-width: 1000px) {
  #view-budgets:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 22px; align-items: start; }
  #view-budgets .plan-header, #view-budgets .plan-budgets { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .plan-flex-note, #plan-goals .goal-hist-row { display: none; }
  #view-budgets { gap: 12px; }
}