/* Fonts are in fonts.css (also used by the admin). */

/* ==========================================================================
   Brand themes
   --------------------------------------------------------------------------
   Everything that differs between ELIC and Pinnacle is a variable in the two
   blocks below. Designers: change values here, not further down.

   ELIC is based on www.elic.org; Pinnacle on www.pinnacleteachingsolutions.com
   (Oct 2026). Text colours are chosen to meet WCAG AA contrast (4.5:1).
   ========================================================================== */

[data-brand="elic"] {
  --color-bg: #fbf6ee;            /* warm cream page */
  --color-surface: #fffdf9;       /* cards */
  --color-surface-alt: #f5e8d4;   /* soft sand: banners, table heads */
  --color-text: #3f3423;          /* dark brown */
  --color-muted: #6b5f4d;
  --color-border: #dcd8d1;
  --color-accent: #b32a2e;        /* brick red: links, buttons, nav */
  --color-accent-strong: #8f1f23; /* hover */
  --color-accent-soft: #fbe3e4;
  --color-on-accent: #ffffff;
  --color-accent-decor: #b32a2e;  /* underlines and rules */

  --header-bg: #fbf6ee;
  --header-text: #3f3423;
  --header-border: transparent;
  --footer-bg: #fbf6ee;
  --footer-text: #6b5f4d;

  --font-body: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-heading: var(--font-body);
  --heading-weight: 800;
  --heading-tracking: -0.04em;
  --label-transform: uppercase;
  --label-tracking: 0.04em;
  --radius: 4px;
  --radius-card: 8px;
}

[data-brand="pinnacle"] {
  --color-bg: #f8f9fa;            /* light grey page */
  --color-surface: #ffffff;
  --color-surface-alt: #eef8fc;   /* very light cyan */
  --color-text: #212529;
  --color-muted: #5c656d;
  --color-border: #dee2e6;
  --color-accent: #00759a;        /* darker Pinnacle cyan, readable on white */
  --color-accent-strong: #005a77;
  --color-accent-soft: #e0f5fb;
  --color-on-accent: #ffffff;
  --color-accent-decor: #00b1e1;  /* Pinnacle cyan: logo, rules, highlights */

  --header-bg: #ffffff;
  --header-text: #212529;
  --header-border: #dee2e6;
  --footer-bg: #343a40;           /* charcoal */
  --footer-text: #ced4da;

  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-heading: var(--font-body);
  --heading-weight: 500;
  --heading-tracking: -0.03em;
  --label-transform: uppercase;
  --label-tracking: 0.06em;
  --radius: 0;
  --radius-card: 0;
}

/* Shared, brand-neutral values. Data colours mean the same thing on both sites. */
:root {
  --color-danger: #b42318;
  --color-received: #1d6b45;
  --color-pending: #b26a00;
  --color-forecast: #7aa7d1;
  --color-track: #e7e9ee;
  --color-notice-bg: #fff6e5;
  --color-notice-border: #f0d49a;
  --color-info-bg: var(--color-accent-soft);
  --color-info-border: var(--color-accent-decor);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: 1.15;
  color: var(--color-text);
}
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 6px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; letter-spacing: calc(var(--heading-tracking) / 2); }

a { color: var(--color-accent); text-underline-offset: 2px; }
a:hover { color: var(--color-accent-strong); }

:focus-visible { outline: 3px solid var(--color-accent-decor); outline-offset: 2px; }

.muted { color: var(--color-muted); }
.small { font-size: 0.875rem; }

input, button, select, textarea { font: inherit; color: inherit; }

/* ==========================================================================
   Page frame: header, navigation, footer
   ========================================================================== */

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  padding: 14px 24px;
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 1px solid var(--header-border);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--header-text);
  white-space: nowrap;
}
.logo { display: block; width: auto; }
[data-brand="elic"] .logo { height: 40px; }
[data-brand="pinnacle"] .logo { height: 26px; }
.wordmark-text {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  padding-left: 12px;
  border-left: 1px solid var(--color-border);
}
[data-brand="elic"] .wordmark-text { color: var(--color-accent); font-weight: 700; letter-spacing: -0.02em; }
[data-brand="pinnacle"] .wordmark-text {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; flex: 1; }
.site-nav a {
  color: var(--header-text);
  opacity: 0.8;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
}
[data-brand="pinnacle"] .site-nav a {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: var(--label-transform);
  letter-spacing: var(--label-tracking);
}
[data-brand="elic"] .site-nav a { color: var(--color-accent); opacity: 0.85; }
.site-nav a:hover { opacity: 1; }
.site-nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--color-accent-decor); }

.sign-out { margin-left: auto; }

.page { width: 100%; max-width: 1100px; margin: 0 auto; padding: 28px 24px; flex: 1; }

.site-footer {
  padding: 24px;
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 0.875rem;
  text-align: center;
}
.site-footer a { color: inherit; }

/* ==========================================================================
   Building blocks
   ========================================================================== */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-bottom: 18px;
}
[data-brand="pinnacle"] .card { border-top: 3px solid var(--color-accent-decor); }

/* Buttons: solid for the main action, outlined for secondary ones. */
.button,
button[type="submit"]:not(.link-button):not(.button-secondary):not(.icon-button):not(.currency-option) {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 9px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: var(--label-transform);
  letter-spacing: var(--label-tracking);
  text-decoration: none;
  cursor: pointer;
}
.button:hover,
button[type="submit"]:not(.link-button):not(.button-secondary):not(.icon-button):not(.currency-option):hover {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-on-accent);
}

.button-secondary {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: var(--label-transform);
  letter-spacing: var(--label-tracking);
  cursor: pointer;
}
.button-secondary:hover { background: var(--color-accent-soft); }

.link-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--header-text);
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Form fields (login, password reset, two-factor, search). */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input:not([type]), select, textarea {
  width: 100%;
  max-width: 28rem;
  padding: 9px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { border-color: var(--color-accent); }
label { font-size: 0.875rem; font-weight: 600; }

.messages { list-style: none; padding: 0; margin: 0 0 16px; }
.message {
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent-decor);
}
.message.error { border-color: var(--color-danger); color: var(--color-danger); }

.notice {
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--color-notice-bg);
  border: 1px solid var(--color-notice-border);
}

/* ==========================================================================
   Dashboard
   --------------------------------------------------------------------------
   Received / pending / forecast is one blue running dark to light: money that
   is more certain is darker. Same on both brands, so a colour always means the
   same thing. Checked with the dataviz palette validator (ordinal ramp: one
   hue, monotone lightness, visible steps, light end visible on both surfaces).
   ========================================================================== */

:root {
  --color-carried: #06213f;     /* beginning balance: money already in hand */
  --color-received: #104281;
  --color-pending: #256abf;
  --color-forecast: #86b6ef;
  --color-track: #e6edf7;      /* lighter step of the same blue */
  /* Trends chart: green for gifts received, red for expenses. Checked with the
     palette validator on both brands' card colours: contrast and normal vision
     pass, but red-green colour-blind separation is only 7.2 (target 8), so the
     expense bars and their key also carry diagonal stripes; colour is never
     the only cue. */
  --color-income: #008300;
  --color-expense: #e34948;
  /* Balance line on the Trends tab: green above zero, red below (the status
     colours, as on "Healthy" / "In deficit"), black at zero. */
  --color-balance-zero: #000000;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 22px;
}
.refresh { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dot-sep { margin: 0 6px; }

.eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--color-muted);
}

/* The one headline number. Proportional figures look right at this size. */
.hero { margin-bottom: 18px; }
.hero-value {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 6vw, 3.5rem);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: 1;
}
.hero-context { margin: 8px 0 0; color: var(--color-muted); }
.hero-context strong { color: var(--color-text); font-weight: 700; }
.hero.centered { text-align: center; }


/* Progress meter */
.meter { margin-bottom: 22px; }
.meter-bar { display: block; overflow: visible; }
.meter-track { fill: var(--color-track); }
.meter-segment { cursor: default; transition: opacity 0.15s; }
.meter-segment.received { fill: var(--color-received); }
.meter-segment.pending { fill: var(--color-pending); }
.meter-segment.forecast { fill: var(--color-forecast); }
.meter-segment:focus { outline: none; }
.meter-bar:has(.is-active) .meter-segment:not(.is-active) { opacity: 0.55; }
.meter-gap { stroke: var(--color-surface); stroke-width: 2; }
.meter-goal { stroke: var(--color-text); stroke-width: 2; }
.meter-scale { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }

/* Stat tiles: also the bar's legend. */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.stat-tile {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.stat-tile dt { display: flex; align-items: center; color: var(--color-muted); font-size: 0.85rem; font-weight: 600; }
.stat-tile dd { margin: 6px 0 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; }
.stat-note { margin: 2px 0 0; color: var(--color-muted); font-size: 0.78rem; }

/* Colour keys: identity sits beside the text; text keeps its own colour. */
.key { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.key.received { background: var(--color-received); }
.key.pending { background: var(--color-pending); }
.key.forecast { background: var(--color-forecast); }
.key.remaining { background: var(--color-track); box-shadow: inset 0 0 0 1px var(--color-border); }
.key.goal { width: 2px; height: 12px; border-radius: 0; background: var(--color-text); vertical-align: middle; }

.footnote { margin: 0; }

.chart-tooltip {
  position: absolute;
  z-index: 10;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  background: var(--color-text);
  color: var(--color-surface);
  border-radius: 6px;
  font-size: 0.85rem;
  pointer-events: none;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.15);
}
.chart-tooltip[hidden] { display: none; }
.chart-tooltip strong { font-size: 1rem; }

/* Tables */
.card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.card-head h2 { margin: 0; }
.count {
  min-width: 1.6em;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover td, tbody tr:hover th { background: var(--color-surface-alt); }
th {
  font-size: 0.72rem;
  color: var(--color-muted);
  font-weight: 600;
  text-transform: var(--label-transform);
  letter-spacing: var(--label-tracking);
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Row labels (e.g. the health view's month-by-month table) read as body text. */
tbody th[scope="row"] { font-size: inherit; color: var(--color-text); text-transform: none; letter-spacing: normal; }
.status { display: inline-flex; align-items: center; }
.empty { margin: 4px 0 0; }
.empty-state { text-align: center; padding: 36px 20px; }

/* ==========================================================================
   Staff: view a teacher's dashboard
   ========================================================================== */

/* Teacher search in the header */
.header-search-wrap { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.header-search { display: flex; align-items: center; gap: 6px; }
.stop-viewing { display: flex; }
.stop-viewing .icon-button { cursor: pointer; padding: 0; }
.header-search input { width: 15rem; max-width: none; padding: 6px 10px; font-size: 0.875rem; }
.header-search .button-secondary { padding: 6px 12px; }
.header-search-wrap + .sign-out { margin-left: 0; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-muted);
  background: var(--color-surface);
}
.icon-button:hover { color: var(--color-accent); border-color: var(--color-accent); }

.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.title-row h1 { margin-bottom: 0; }
.viewing-label {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.result-list { margin: 0; padding-left: 20px; }
.result-list li { padding: 4px 0; }

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 600px) {
  .site-header { padding: 12px 16px; }
  .wordmark-text { display: none; }  /* the logo alone identifies the site on phones */
  .header-search-wrap { order: 4; flex-basis: 100%; margin-left: 0; }
  .header-search { flex: 1; }
  .header-search input { flex: 1; width: auto; min-width: 0; }
  .site-nav { order: 3; flex-basis: 100%; }
  .page { padding: 20px 16px; }
  .refresh { align-items: flex-start; }
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-tile dd { font-size: 1.15rem; }
}

/* ==========================================================================
   Sign-in and account pages
   ========================================================================== */

.signin { max-width: 32rem; margin: 0 auto; }
.stack { display: grid; gap: 14px; }
.stack label { display: block; margin-bottom: 4px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.field-error { margin: 4px 0 0; color: var(--color-danger); font-size: 0.875rem; }
.button-block { display: block; width: 100%; max-width: 28rem; text-align: center; }
.signin input { max-width: 28rem; }
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 28rem;
  margin: 18px 0;
  color: var(--color-muted);
  font-size: 0.8rem;
  text-transform: var(--label-transform);
  letter-spacing: var(--label-tracking);
}
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }

/* Staging banner (SITE_ENVIRONMENT=staging) */
.environment-banner {
  padding: 6px 16px;
  background: #5b2a86;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* --- Tabs (gifts, recurring gifts, expenses) -------------------------------- */
.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: -4px 0 14px;
  border-bottom: 1px solid var(--color-border);
}
.tablist [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 8px 2px 10px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--color-muted);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.tablist [role="tab"]:hover { color: var(--color-text); }
.tablist [role="tab"][aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent-decor);
}
[data-brand="pinnacle"] .tablist [role="tab"] {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: var(--label-transform);
  letter-spacing: var(--label-tracking);
}
.tabpanel:focus-visible { outline-offset: 4px; }
/* With the script, the tab names act as headings; keep them for screen readers. */
.tabs-ready .panel-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Without it, panels show one under another with their own headings. */
.tabs:not(.tabs-ready) .tabpanel + .tabpanel { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.coming-soon { padding: 28px 16px; text-align: center; }
.coming-soon p { margin: 0 0 6px; }

/* --- Carry-over, expenses and Financial Health -------------------------------- */
.key.carried { background: var(--color-carried); }
.key.deficit { background: #ffffff; box-shadow: inset 0 0 0 2px var(--color-danger); }
.meter-segment.carried { fill: var(--color-carried); }

.subheading {
  margin: 22px 0 8px;
  font-size: 0.95rem;
  letter-spacing: calc(var(--heading-tracking) / 3);
}
/* Collapsible section (<details>): the heading is the toggle, with a chevron. */
.collapsible > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; margin: 22px 0 8px; }
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.collapsible[open] > summary::before { transform: rotate(45deg); }
.collapsible > summary .subheading { margin: 0; }
@media (prefers-reduced-motion: reduce) { .collapsible > summary::before { transition: none; } }
/* Trends chart (health view) */
.trend-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 6px; }
.trend-legend > span { display: inline-flex; align-items: center; }
.key.income { background: var(--color-income); }
.key.expenses {
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.35) 0 1.5px, transparent 1.5px 4px), var(--color-expense);
}
.trend-chart { display: block; overflow: visible; }
.trend-grid { stroke: var(--color-border); stroke-width: 1; }
.trend-zero { stroke: var(--color-muted); stroke-width: 1; }
.trend-axis { fill: var(--color-muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.trend-bar { transition: opacity 0.15s; }
.trend-bar.income { fill: var(--color-income); }
.trend-bar.expenses { fill: var(--color-expense); }
.trend-hatch { pointer-events: none; }
.trend-hatch-line { fill: rgb(255 255 255 / 0.3); }
.trend-bar:focus { outline: none; }
.trend-bar:focus-visible { stroke: var(--color-text); stroke-width: 2; }
.trend-chart:has(.is-active) .trend-bar:not(.is-active) { opacity: 0.55; }
.trend-months { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 6px; text-align: center; }
.balance-chart { display: block; overflow: visible; margin-top: 4px; }
.balance-line { stroke-width: 2; stroke-linecap: round; }
.balance-dot { stroke: var(--color-surface); stroke-width: 2; }
.balance-line.surplus { stroke: var(--status-good); }
.balance-dot.surplus { fill: var(--status-good); }
.balance-line.deficit { stroke: var(--status-critical); }
.balance-dot.deficit { fill: var(--status-critical); }
.balance-line.zero { stroke: var(--color-balance-zero); }
.balance-dot.zero { fill: var(--color-balance-zero); }
.balance-hit { fill: transparent; cursor: default; }
.balance-hit:focus { outline: none; }
.balance-hit:focus-visible { stroke: var(--color-text); stroke-width: 2; fill: none; }
@media (prefers-reduced-motion: reduce) { .trend-bar { transition: none; } }
td.wrap { white-space: normal; min-width: 14rem; }
td.negative { color: var(--color-danger); }
tfoot th, tfoot td { border-top: 2px solid var(--color-border); border-bottom: 0; font-weight: 700; }
tfoot th { text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--color-text); background: none; }

/* Status: icon + word, in a status colour (never colour alone). */
:root {
  --status-good: #1d6b45;
  --status-warning: #8a5300;
  --status-critical: #b42318;
}
.health-status { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.health-status.healthy { color: var(--status-good); }
.health-status.building { color: var(--status-warning); }
.health-status.deficit { color: var(--status-critical); }
.health-status.surplus { color: var(--status-good); }
.health-status.balanced { color: var(--color-muted); }

.health-gauge { display: block; overflow: visible; }
.health-gauge .zone-deficit { fill: #f8dcd9; }
.health-gauge .zone-building { fill: var(--color-track); }
.health-gauge .zone-healthy { fill: #d5ecdf; }
.health-gauge .gauge-zero { stroke: var(--color-muted); stroke-width: 1; }
.health-gauge .gauge-marker { stroke: var(--color-surface); stroke-width: 2; }
.health-gauge .gauge-marker.healthy { fill: var(--status-good); }
.health-gauge .gauge-marker.building { fill: var(--status-warning); }
.health-gauge .gauge-marker.deficit { fill: var(--status-critical); }
/* Labels under -1, 0, 2 and 3 months: the gauge's 0%, 25%, 75% and 100% points. */
.gauge-scale { display: grid; grid-template-columns: 25% 50% 25%; margin-top: 6px; }
.gauge-scale span:nth-child(1) { grid-column: 1; }
.gauge-scale span:nth-child(2) { grid-column: 2; }
.gauge-scale span:nth-child(3) { grid-column: 3; grid-row: 1; justify-self: start; }
.gauge-scale span:nth-child(4) { grid-column: 3; grid-row: 1; justify-self: end; }

/* ==========================================================================
   Profile Builder
   ========================================================================== */
.page-wide { max-width: none; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 18px; }
.filters .field { display: flex; flex-direction: column; gap: 4px; }
.filters .field-grow { flex: 1 1 14rem; }
.filters select { min-width: 9rem; }

.pb-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: var(--label-transform);
  letter-spacing: var(--label-tracking);
  white-space: nowrap;
}
.pb-status-open { border-color: var(--color-accent); color: var(--color-accent); }
.pb-status-submitted { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-strong); }
.pb-status-locked { background: var(--color-surface-alt); color: var(--color-muted); }
.pb-status-declined { border-color: var(--color-danger); color: var(--color-danger); }

.pb-setup { margin: 6px 0 0; }
.pb-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pb-summary .eyebrow { margin: 0; }
.pb-total { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pb-note { margin-bottom: 16px; }
a.button-secondary { display: inline-block; text-decoration: none; }
.pb-row-buttons { display: flex; gap: 6px; }
.pb-row-buttons a { padding: 3px 10px; font-size: 0.72rem; }

.pb-dialog {
  max-width: 26rem;
  padding: 20px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
}
.pb-dialog::backdrop { background: rgb(0 0 0 / 0.35); }
.pb-dialog p { margin: 0 0 18px; }
.pb-dialog-buttons { display: flex; justify-content: flex-end; gap: 10px; }

/* The budget grid: line items down the side, months across. */
.pb-sheet-card { padding: 0; overflow: hidden; }
.pb-sheet-wrap { max-height: calc(100vh - 160px); min-height: 18rem; overflow: auto; }
.pb-sheet { font-size: 0.85rem; }
.pb-sheet th, .pb-sheet td { padding: 5px 8px; }
.pb-sheet thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-alt);
}
.pb-sheet .pb-label {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 15rem;
  max-width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--color-surface);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text);
  border-right: 1px solid var(--color-border);
}
.pb-sheet thead .pb-label { z-index: 3; background: var(--color-surface-alt); }
.pb-sheet tbody tr:hover .pb-label { background: var(--color-surface-alt); }
.pb-sheet .pb-row-total { font-weight: 600; border-left: 1px solid var(--color-border); }
.pb-sheet tr.pb-parent td, .pb-sheet tr.pb-parent .pb-label { font-weight: 600; }
.pb-sheet tr.pb-depth-0 td, .pb-sheet tr.pb-depth-0 .pb-label { background: var(--color-surface-alt); }
.pb-sheet tr.pb-tax td, .pb-sheet tr.pb-tax .pb-label { color: var(--color-muted); font-style: italic; }
.pb-depth-1 .pb-label { padding-left: 22px; }
.pb-depth-2 .pb-label { padding-left: 36px; }
.pb-depth-3 .pb-label { padding-left: 50px; }
.pb-depth-4 .pb-label { padding-left: 64px; }
.pb-depth-5 .pb-label, .pb-depth-6 .pb-label { padding-left: 78px; }
.pb-sheet input {
  width: 6.5rem;
  max-width: none;
  padding: 3px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.pb-sheet input:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; }
.pb-sheet input.pb-changed { background: var(--color-accent-soft); border-color: var(--color-accent); }

.pb-save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -2px 8px rgb(0 0 0 / 0.08);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.pb-preview-note { font-size: 0.8rem; }
.pb-preview-note.pb-unsaved { color: var(--color-accent-strong); font-weight: 600; }
.pb-sheet input.pb-invalid { border-color: var(--color-danger); background: var(--color-surface); color: var(--color-danger); }
/* Room for the fixed save bar, so it never covers the last rows or the footer. */
.page-wide:has(.pb-save-bar) { padding-bottom: 84px; }

.pb-subnav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: -8px 0 20px; border-bottom: 1px solid var(--color-border); }
.pb-subnav a {
  padding: 6px 0 10px;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pb-subnav a:hover { color: var(--color-text); }
.pb-subnav a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-accent-decor); }

/* Profile Builder forms and lists */
.pb-form { max-width: 60rem; }
.pb-form h2 { margin: 10px 0 0; }
.pb-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 14px 18px; }
.pb-field label, .pb-field legend { display: block; margin-bottom: 4px; font-size: 0.875rem; font-weight: 600; }
.pb-field fieldset { margin: 0; padding: 0; border: 0; }
.pb-field fieldset > div { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pb-field fieldset label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.pb-field input[type="number"] { width: 100%; max-width: 28rem; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.pb-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.pb-help { margin: 4px 0 0; font-size: 0.8rem; }
.pb-rules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 16px 24px; }
.pb-rules-grid fieldset > div { max-height: 12rem; overflow: auto; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius); flex-direction: column; flex-wrap: nowrap; }
.pb-actions-left { justify-content: flex-start; }
.pb-picked summary { cursor: pointer; font-weight: 600; }
.pb-picked ul { margin: 8px 0 0; padding-left: 20px; max-height: 12rem; overflow: auto; font-size: 0.875rem; }

.pb-bulk-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.pb-bulk-bar button[disabled] { opacity: 0.45; cursor: not-allowed; }

.pb-tree .pb-label { min-width: 18rem; }
.pb-tree .pb-label a { color: inherit; }
.pb-tree td { white-space: normal; }
.pb-tree tr.pb-retired th, .pb-tree tr.pb-retired td { color: var(--color-muted); text-decoration: line-through; }
.pb-rules span { display: block; font-size: 0.8rem; }
.pb-row-buttons form { display: flex; gap: 4px; }
.pb-icon-button { padding: 2px 8px; font-size: 0.85rem; }

/* --- Currency switch (dashboard header) ------------------------------------ */
.head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.currency-switch form { display: inline-flex; }
.currency-switch { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.currency-option {
  padding: 5px 12px;
  border: 0;
  background: var(--color-surface);
  color: var(--color-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}
.currency-option + .currency-option { border-left: 1px solid var(--color-border); }
.currency-option:hover { color: var(--color-text); }
.currency-option[aria-pressed="true"], .currency-option[aria-current="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
@media (max-width: 640px) { .head-actions { align-items: flex-start; } }

/* --- Year selector and past years ------------------------------------------- */
/* The "Profile year" line under the title is the selector: it reads as text,
   with a light outline so it's still clearly something to change. */
.profile-year { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 1em; }
.year-select { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.year-select label { margin: 0; white-space: nowrap; font: inherit; color: inherit; }
.year-select select {
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-muted);
  font: inherit;
  cursor: pointer;
}
.year-select select:hover { color: var(--color-text); border-color: var(--color-muted); }
.past-bars { display: grid; gap: 12px; margin-bottom: 18px; }
.past-row { display: grid; gap: 6px; }
.past-label { font-size: 0.9rem; }
.past-label strong { margin-left: 6px; }
.meter-segment.spent { fill: var(--color-expense); }
.meter-segment.deficit { fill: var(--status-critical); }