/* =====================================================================
   Business Apostle - Cashflow Planner
   styles.css : design tokens, layout, components, print.
   Mobile-first. No framework, no external font, no gradient, no 3D.
   Palette shared with Business Apostle Money Diagnostics and Wealth Score.
   ===================================================================== */

:root {
  color-scheme: light;

  --ink: #16202c;
  --ink-soft: #4a5563;
  --navy: #0f2a43;
  --navy-dark: #0a1e30;
  --gold: #a8842b;
  --green: #1a6f47;
  --green-dark: #145637;
  --green-tint: #e7f2ec;
  --amber: #96580a;
  --amber-tint: #fdf1de;
  --red: #a92318;
  --red-tint: #fbe9e7;
  --bg: #f6f5f2;
  --surface: #ffffff;
  --surface-alt: #f1f0ec;
  --border: #d5d8dd;
  /* 3.8:1 against white, so a control outline is distinguishable (WCAG 1.4.11). */
  --border-strong: #7b838f;
  --focus: #0b57d0;

  --chart-in: #1a6f47;
  --chart-out: #a92318;
  --chart-out-bg: #fbe9e7;
  --chart-consume: #0f2a43;
  --chart-alloc: #2f7d95;
  --chart-alloc-bg: #e6f0f4;
  --chart-grid: #e2e4e8;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(16, 32, 44, 0.06);
  --shadow: 0 2px 8px rgba(16, 32, 44, 0.08);

  --measure: 68ch;
  --tap: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.25; color: var(--navy); margin: 0 0 var(--space-3); }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.25rem; margin-top: var(--space-6); }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.98rem; }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }
li { margin-bottom: var(--space-2); }
strong { font-weight: 650; }
small, .small { font-size: 0.85rem; }
.muted { color: var(--ink-soft); }
.lede { font-size: 1.05rem; color: var(--ink-soft); }

a { color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 60;
}
.skip-link:focus { left: 0; }

/* ------------------------------ header ------------------------------ */

.app-header {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
}
.app-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  max-width: 1120px;
  margin: 0 auto;
}
.app-header__tools { display: flex; gap: var(--space-2); flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: var(--space-3); margin: 0; min-width: 0; }
.brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand__name { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #c9d4e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__product { font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-menu { background: var(--navy-dark); border-top: 1px solid rgba(255,255,255,0.14); }
.app-menu ul { list-style: none; margin: 0; padding: var(--space-2) var(--space-3); max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.app-menu li { margin: 0; }
.app-menu button {
  background: transparent; color: #e6ecf3; border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  font: inherit; font-size: 0.88rem; min-height: var(--tap); cursor: pointer;
}
.app-menu button:hover { background: rgba(255,255,255,0.1); }

.progress { padding: 0 var(--space-4) var(--space-3); max-width: 1120px; margin: 0 auto; }
.progress__label { margin: 0 0 var(--space-2); font-size: 0.78rem; color: #c9d4e0; letter-spacing: 0.04em; }
.progress__track { height: 5px; background: rgba(255,255,255,0.2); border-radius: 3px; overflow: hidden; }
.progress__bar { height: 100%; background: #e6c569; transition: width 220ms ease; }

/* ------------------------------ layout ------------------------------ */

main { display: block; }

.view {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) calc(var(--space-7) + 76px);
}
.view > p, .view > ol, .view > ul:not(.badge-row):not(.excluded-list) { max-width: var(--measure); }

.app-footer {
  background: var(--navy-dark);
  color: #c9d4e0;
  padding: var(--space-5) var(--space-4) calc(var(--space-5) + 64px);
  font-size: 0.85rem;
}
.app-footer p { max-width: var(--measure); margin: 0 auto var(--space-2); }
.app-footer strong { color: #fff; }

/* ------------------------------ buttons ------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap); min-width: var(--tap);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  cursor: pointer;
  text-align: center;
}
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-dark); }
.btn--secondary { background: var(--surface); color: var(--navy); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-alt); }
.btn--quiet { background: transparent; color: inherit; border-color: currentColor; opacity: 0.92; }
.btn--quiet:hover { opacity: 1; }
.btn--danger { background: var(--red); color: #fff; }
.btn--large { width: 100%; font-size: 1.02rem; padding: var(--space-4); }
.btn--small { min-height: var(--tap); padding: var(--space-2) var(--space-3); font-size: 0.85rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

.sticky-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  margin-top: var(--space-6);
  background: linear-gradient(to top, var(--bg) 72%, rgba(246,245,242,0));
  z-index: 10;
}
.sticky-actions .btn { flex: 1; }
.sticky-actions--inline { position: static; background: none; }
.sticky-actions--inline .btn { flex: 0 0 auto; }

/* ------------------------------ cards & callouts ------------------------------ */

.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.badge {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: var(--space-2) var(--space-3);
  font-size: 0.85rem; margin: 0;
}

.callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.callout h2 { margin-top: 0; font-size: 1rem; }
.callout p:last-child { margin-bottom: 0; }
.callout--privacy { border-left-color: var(--green); background: var(--green-tint); }
.callout--note { border-left-color: var(--amber); background: var(--amber-tint); }
.callout--warn { border-left-color: var(--red); background: var(--red-tint); }

.how-list li { margin-bottom: var(--space-3); }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.panel h3 { margin-top: 0; }

/* ------------------------------ forms ------------------------------ */

.field { margin-bottom: var(--space-5); border: 0; padding: 0; }
.field > label, .field > legend, legend {
  display: block; font-weight: 600; margin-bottom: var(--space-2); color: var(--navy);
  padding: 0;
}
.field__optional { font-weight: 400; color: var(--ink-soft); }
.field__help { font-size: 0.85rem; color: var(--ink-soft); margin: var(--space-2) 0 0; max-width: var(--measure); }
.field--inline { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.field--inline > label { margin-bottom: 0; }

input[type="text"], input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-3);
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--red); border-width: 2px; }
textarea { min-height: 80px; resize: vertical; }

.choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice-col { display: flex; flex-direction: column; gap: var(--space-2); }
.choice {
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-weight: 400;
  flex: 1 1 auto;
}
.choice input { margin-top: 3px; width: 20px; height: 20px; flex-shrink: 0; }
.choice span { flex: 1; }
.choice small { display: block; color: var(--ink-soft); }
.choice:has(input:checked) { border-color: var(--navy); border-width: 2px; padding: calc(var(--space-3) - 1px); background: #f3f6f9; }

.grid-2 { display: grid; gap: var(--space-4); }

.error-summary {
  background: var(--red-tint);
  border: 1px solid var(--red);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.error-summary h2 { margin-top: 0; font-size: 1rem; color: var(--red); }
.error-summary ul { margin-bottom: 0; }
.error-summary a { color: var(--red); }
.field-error { color: var(--red); font-size: 0.85rem; margin: var(--space-2) 0 0; font-weight: 600; }

.form-slot:empty { display: none; }
.entry-form {
  background: var(--surface);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.entry-form h3 { margin-top: 0; }

/* ------------------------------ item lists ------------------------------ */

.item-list { margin-bottom: var(--space-4); }
.item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.item-card__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.item-card__name { font-weight: 650; color: var(--navy); }
.item-card__amount { font-weight: 650; white-space: nowrap; }
.item-card__meta { font-size: 0.85rem; color: var(--ink-soft); margin: var(--space-2) 0 0; }
.item-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.empty-note { color: var(--ink-soft); font-style: normal; padding: var(--space-3) 0; }

.pill {
  display: inline-block; font-size: 0.75rem; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface-alt); color: var(--ink-soft); margin-right: var(--space-2);
}
.pill--essential { background: var(--navy); color: #fff; border-color: var(--navy); }
.pill--important { background: var(--surface-alt); color: var(--ink); }
.pill--optional { background: transparent; }
.pill--confirmed { background: var(--green-tint); color: var(--green-dark); border-color: var(--green); }
.pill--likely { background: var(--amber-tint); color: var(--amber); border-color: var(--amber); }
.pill--uncertain { background: var(--red-tint); color: var(--red); border-color: var(--red); }
.pill--actual { background: var(--green); color: #fff; border-color: var(--green); }

/* ------------------------------ stats ------------------------------ */

.stat-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-5); }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.stat__label { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 var(--space-1); text-transform: uppercase; letter-spacing: 0.06em; }
.stat__value { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin: 0; line-height: 1.2; }
.stat__note { font-size: 0.85rem; color: var(--ink-soft); margin: var(--space-2) 0 0; }
.stat--good { border-left: 4px solid var(--green); }
.stat--warn { border-left: 4px solid var(--amber); }
.stat--bad { border-left: 4px solid var(--red); }

.headline {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  border: 1px solid var(--border);
  background: var(--surface);
}
.headline--good { background: var(--green-tint); border-color: var(--green); }
.headline--warn { background: var(--amber-tint); border-color: var(--amber); }
.headline--bad { background: var(--red-tint); border-color: var(--red); }
.headline h2 { margin-top: 0; }
.headline p:last-child { margin-bottom: 0; }
.headline__status { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin: 0 0 var(--space-2); }

/* ------------------------------ tables ------------------------------ */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--space-4); }
.data-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; min-width: 420px; }
.data-table caption { text-align: left; font-weight: 600; color: var(--navy); padding-bottom: var(--space-2); }
.data-table th, .data-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table thead th { background: var(--surface-alt); border-bottom: 2px solid var(--border-strong); white-space: nowrap; }
.data-table td:not(:first-child), .data-table th:not(:first-child) { text-align: right; }
.data-table tbody th { font-weight: 500; }

/* ------------------------------ agenda ------------------------------ */

.agenda-week {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.agenda-week__head {
  background: var(--surface-alt);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.agenda-week__head h3 { margin: 0 0 var(--space-1); font-size: 0.98rem; }
.agenda-week__totals { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.agenda-day { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.agenda-day:last-child { border-bottom: 0; }
.agenda-day--shortfall { background: var(--red-tint); border-left: 4px solid var(--red); }
.agenda-day--quiet { color: var(--ink-soft); }
.agenda-day__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.agenda-day__date { font-weight: 650; color: var(--navy); }
.agenda-day__balance { font-weight: 650; white-space: nowrap; }
.agenda-day__balance--negative { color: var(--red); }
.agenda-entry {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0; border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.agenda-entry__main { flex: 1 1 60%; min-width: 0; }
.agenda-entry__name { display: block; }
.agenda-entry__amount { font-weight: 600; white-space: nowrap; }
.agenda-entry__amount--in { color: var(--green-dark); }
.agenda-entry__amount--out { color: var(--ink); }
.agenda-entry__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; width: 100%; margin-top: var(--space-2); }
.agenda-entry__planned { font-size: 0.8rem; color: var(--ink-soft); display: block; }

/* ------------------------------ charts ------------------------------ */

.chart {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.chart__title { font-weight: 650; color: var(--navy); margin-bottom: var(--space-2); font-size: 1rem; }
.chart__conclusion { font-size: 0.92rem; margin-bottom: var(--space-3); max-width: var(--measure); }
.chart__canvas { width: 100%; }
.chart__svg { width: 100%; height: auto; display: block; }
.chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart__zero { stroke: var(--ink); stroke-width: 1.5; }
.chart__line { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart__tick { font-size: 11px; fill: var(--ink-soft); font-family: var(--font); }
.chart__tick--y { text-anchor: end; }
.chart__tick--muted { fill: #5c6673; font-size: 10px; }
.chart__value { font-size: 11px; fill: var(--ink); font-weight: 600; font-family: var(--font); }
.chart__callout { font-size: 11px; fill: var(--red); font-weight: 700; font-family: var(--font); }
.chart__marker--in { fill: var(--chart-in); }
.chart__marker--out { fill: var(--surface); stroke: var(--chart-out); stroke-width: 2; }
.chart__lowdot { fill: var(--red); stroke: var(--surface); stroke-width: 2; }
.chart__bar--in { fill: var(--chart-in); }
.chart__data { margin-top: var(--space-3); }
.chart__data summary { cursor: pointer; font-weight: 600; color: var(--navy); min-height: var(--tap); display: flex; align-items: center; }

/* ------------------------------ segmented control ------------------------------ */

.view-controls { margin-bottom: var(--space-4); }
.view-controls__help { font-size: 0.85rem; color: var(--ink-soft); margin: var(--space-2) 0 0; max-width: var(--measure); }
.segmented { border: 0; padding: 0; margin: 0; }
.segmented__legend { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: var(--space-2); font-weight: 600; }
.segmented__options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.segmented__options label {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.9rem;
  text-align: center;
}
.segmented__options label:has(input:checked) {
  background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 600;
}
.segmented__options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented__options label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ------------------------------ sliders ------------------------------ */

.slider { margin-bottom: var(--space-5); }
.slider__label { display: block; font-weight: 600; color: var(--navy); margin-bottom: var(--space-2); }
.slider__row { display: flex; align-items: flex-start; gap: var(--space-3); }
.slider__track { flex: 1 1 auto; min-width: 0; display: block; }
.slider__row input[type="range"] { width: 100%; min-width: 0; height: var(--tap); }
.slider__row input[type="text"], .slider__row input[type="number"], .slider__row input[type="date"] { flex: 0 0 120px; width: 120px; }
.slider__scale { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--ink-soft); margin-top: calc(var(--space-1) * -1); }
.slider__value { font-weight: 650; color: var(--navy); margin: var(--space-2) 0 0; }
.slider__help { font-size: 0.85rem; color: var(--ink-soft); margin: var(--space-2) 0 0; max-width: var(--measure); }
.slider__presets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.slider__presets button {
  min-height: var(--tap); padding: var(--space-1) var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); font: inherit; font-size: 0.85rem; cursor: pointer;
}
input[type="range"] { accent-color: var(--navy); }

/* ------------------------------ scenarios ------------------------------ */

.scenario-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.scenario-card h3 { margin-top: 0; }
.scenario-card__interpretation { font-size: 0.92rem; }
.assumption-list { font-size: 0.88rem; color: var(--ink-soft); }

/* ------------------------------ actions ------------------------------ */

.action-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.action-card h3 { margin-top: 0; font-size: 1.02rem; }
.action-card dl { margin: 0 0 var(--space-3); }
.action-card dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-top: var(--space-3); }
.action-card dd { margin: var(--space-1) 0 0; }
.action-card__step { background: var(--surface-alt); border-radius: var(--radius-sm); padding: var(--space-3); font-size: 0.92rem; }

/* ------------------------------ card preview ------------------------------ */

.card-preview {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.card-preview canvas { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.excluded-list { font-size: 0.88rem; color: var(--ink-soft); }
.status-note { font-size: 0.9rem; min-height: 1.4em; }

/* ------------------------------ tabbar ------------------------------ */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
  z-index: 25;
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar ul { display: flex; list-style: none; margin: 0; padding: 0; max-width: 1120px; margin: 0 auto; }
.tabbar li { flex: 1; margin: 0; }
.tabbar button {
  width: 100%;
  min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: 0; border-top: 3px solid transparent;
  font: inherit; font-size: 0.76rem; color: var(--ink-soft);
  cursor: pointer;
  padding: var(--space-2) var(--space-1);
}
.tabbar__icon { font-size: 1.05rem; line-height: 1; }
.tabbar button[aria-current="page"] { color: var(--navy); font-weight: 650; border-top-color: var(--navy); background: var(--surface-alt); }

/* ------------------------------ modal ------------------------------ */

.modal { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; padding: var(--space-4); }
/* The hidden attribute must win over the flex display above, or the backdrop
   would sit invisibly over the whole page and swallow every click. */
.modal:not([hidden]) { display: flex; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(10, 30, 48, 0.55); }
.modal__panel {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow);
}
.modal__panel h2 { margin-top: 0; }

/* ------------------------------ print ------------------------------ */

.print-only { display: none; }

@media print {
  .app-header, .tabbar, .app-footer, .sticky-actions, .btn, .view, .modal,
  .skip-link, .live-region, .app-menu { display: none !important; }
  .print-only { display: block !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  #print-report { padding: 0; }
  #print-report h1 { font-size: 18pt; }
  #print-report h2 { font-size: 13pt; margin-top: 18pt; page-break-after: avoid; }
  #print-report h3 { font-size: 11.5pt; page-break-after: avoid; }
  .print-section { page-break-inside: avoid; }
  .data-table { font-size: 9pt; min-width: 0; width: 100%; }
  .data-table thead { display: table-header-group; }
  .data-table th, .data-table td { padding: 3pt 4pt; border-bottom: 0.5pt solid #999; }
  .chart { border: 0.5pt solid #999; padding: 6pt; page-break-inside: avoid; }
  .chart__data { display: none; }
  .print-note { font-size: 9pt; color: #333; }
  a[href]:after { content: ""; }
  @page { margin: 14mm; }
}

/* ------------------------------ responsive ------------------------------ */

/* Below 420px the brand and the two header buttons cannot share a row
   without the name being clipped, so the buttons drop to their own line. */
@media (max-width: 419px) {
  .app-header__inner { flex-wrap: wrap; row-gap: var(--space-2); }
  .brand { flex: 1 1 100%; }
  .app-header__tools { flex: 1 1 100%; justify-content: flex-end; }
}

@media (min-width: 480px) {
  h1 { font-size: 1.75rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .btn--large { width: auto; min-width: 260px; }
}

@media (min-width: 768px) {
  .view { padding: var(--space-6) var(--space-5) var(--space-7); }
  h1 { font-size: 2rem; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .sticky-actions { position: static; background: none; }
  .sticky-actions .btn { flex: 0 0 auto; min-width: 180px; }
  /* The tab bar stays anchored to the bottom at every width. It is the last
     landmark in the DOM, so bottom placement also keeps the visual order and
     the reading order the same. Pinning it to the top instead would put the
     two sticky bars on top of each other. */
  .tabbar button { flex-direction: row; gap: var(--space-2); min-height: 52px; font-size: 0.9rem; }
}

@media (min-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .view { padding: var(--space-7) var(--space-5) calc(var(--space-7) + 76px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .btn, .choice, .item-card, .stat, .chart { border: 1px solid CanvasText; }
  .chart__line { stroke: CanvasText; }
}