/* Screen styles: planning group (Insights, Finance, Budgets, Money Plan, Bills). Uses the tokens in app.css. */

/* Toolbar month stepper */
.month-stepper { display: inline-flex; align-items: center; gap: 2px; }
.month-stepper-label { font-weight: 600; font-size: 14px; min-width: 128px; text-align: center; }
.icon-btn { padding: 3px 6px; flex: none; }

/* Budget and event-budget cards */
.plan-grid { align-items: start; }
.plan-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; text-align: left; min-width: 0; }
.plan-card:hover { box-shadow: var(--shadow-panel), inset 0 0 0 1px var(--accent-ring); }
.plan-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-card.archived { opacity: .6; }
.plan-card .panel-title { margin-bottom: 0; }
.plan-card .panel-title h2 { min-width: 0; display: block; }
.plan-card-title { font-size: 16px; font-weight: 600; }
.plan-figures { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-mid { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-h2 { font-size: 19px; font-weight: 700; }

/* Budget editor */
.cat-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 10px; max-height: 240px; overflow-y: auto; padding: 4px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair-2); }
.cat-pick-item { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 6px; border-radius: 8px; cursor: pointer; min-width: 0; }
.cat-pick-item:hover { background: var(--fill-soft); }
.cat-pick-item input { width: 16px; height: 16px; accent-color: var(--accent-fill); flex: none; }
.sub-limits { gap: 8px; }
.sub-limit-row { flex-wrap: nowrap; }
.sub-limit-row .grow { min-width: 0; }

/* Rows with a trailing actions button (Bills, Money Plan) */
.bill-line { display: flex; align-items: center; padding-right: 8px; }
.bill-line > .rec-row { flex: 1; min-width: 0; }
.bill-line + .bill-line { border-top: 1px solid var(--hair-2); }
.bill-line .rec-title, .bill-line .grow { min-width: 0; }

/* Insights */
.insights-figures .figure { font-size: 24px; }
.insights-pair { align-items: start; }
.insights-empty { min-height: 120px; display: grid; place-items: center; }
.legend-amt { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.insights-key { gap: 6px; margin-top: 10px; }
.key-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.key-dot.in { background: var(--income); }
.key-dot.out { background: var(--expense); margin-left: 8px; }
.insights-cal { max-width: 560px; }
.insights-cal .cal-cell { min-width: 0; overflow: hidden; }

/* Finance */
.finance-chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.finance-chips::-webkit-scrollbar { display: none; }
.finance-chips .nav-chip { flex: none; }
.finance-hero { border: 0; width: 100%; text-align: left; cursor: pointer; color: #fff; font: inherit; display: flex; flex-direction: column; gap: 4px; }
.finance-hero:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.finance-hero-figure { align-items: baseline; gap: 8px; }
.finance-hero-note { font-size: 12px; opacity: .8; margin-top: 4px; }
.finance-tile { border: 0; text-align: left; cursor: pointer; border-radius: 18px; padding: 14px; font: inherit; min-width: 0; }
.finance-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.finance-tile-title { font-size: 14px; font-weight: 600; }
.finance-tile-sub { font-size: 12px; opacity: .85; }
.finance-tile-figure { font-size: 17px; font-weight: 700; margin-top: 10px; }
.glance-list { gap: 12px; }
.glance-line { display: flex; flex-direction: column; gap: 6px; }
.glance-head { flex-wrap: nowrap; gap: 8px; font-size: 14px; }
.glance-head .amt { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.glance-icon { color: var(--accent); display: inline-flex; flex: none; }

/* Money Plan */
.plan-figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }

@media (max-width: 860px) {
  .grid-3.insights-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .insights-figures .figure-card { padding: 12px; min-height: 0; }
  .insights-figures .figure { font-size: 16px; overflow-wrap: anywhere; }
  .month-stepper-label { min-width: 0; }
  .finance-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .month-stepper-label { font-size: 12px; }
  .month-stepper .btn-sm { padding: 3px 5px; }
  .finance-tiles { grid-template-columns: minmax(0, 1fr); }
  .glance-head { flex-wrap: wrap; }
  .cat-pick { grid-template-columns: minmax(0, 1fr); }
  .plan-big { font-size: 19px; }
  .insights-figures .figure { font-size: 14px; }
}