/**
 * BBMT Accounts — dashboard styles, Stakkr design system.
 *
 * Self-contained: the STAKKR BRAND block below is duplicated byte-identically
 * from bbmt-calculators/assets/css/bbmt-calculators.css so the dashboard reads
 * as the same product without depending on that plugin's stylesheet.
 * bin/check-tokens.sh fails a commit if the two copies drift. Everything else
 * here is scoped under .bbmt-dashboard.
 */

/* @@STAKKR-SHARED-START@@ */
/* =============================================================================
   STAKKR BRAND — shared design tokens + signature components.
   KEEP BYTE-IDENTICAL between:
     wp-content/plugins/bbmt-calculators/assets/css/bbmt-calculators.css
     wp-content/plugins/bbmt-accounts/assets/css/bbmt-accounts.css
   Enforced by bin/check-tokens.sh (this block + assets/img/stakkr-mark.svg).

   Selectors are double-scoped so the one block works in both plugins; the
   half that doesn't match on a given page is inert.

   Stream swatches (fixed, semantic): plum = job/salary; side-income cycle is
   mustard -> terracotta -> rust -> maroon (Set A). An all-warm set can't be
   made colour-vision-deficiency-distinguishable past ~4 steps, so the stream
   NAME on every pill/segment is the primary identifier and colour is a
   secondary cue. (Pattern-fill fallback for 6+ streams: deferred.)
   ========================================================================== */
.bbmt-calculator,
.bbmt-dashboard,
.stakkr-homepage,
body.stakkr-chrome {
  --stakkr-paper: #FBF6EC;
  --stakkr-ink: #241A26;
  --stakkr-ink-soft: #6E5F67;       /* secondary text — 6.0:1 on card (WCAG AA) */
  --stakkr-plum: #3D2C3F;           /* dark accent / stream: job/salary */
  --stakkr-terracotta: #D9724B;     /* primary accent / stream 2 (fills + big numbers) */
  --stakkr-mustard: #E8A93A;        /* stream 1 */
  --stakkr-rust: #A8452F;           /* stream 3 / alerts / small accent text */
  --stakkr-maroon: #5A2A22;         /* stream 4 */
  --stakkr-line: #EADFC7;           /* decorative dividers, dashed rules */
  --stakkr-line-strong: #988A63;    /* form-field / control borders — 3:1 (WCAG 1.4.11) */
  --stakkr-card: #FFFFFF;           /* card surfaces */
  --stakkr-positive: #4F6B45;       /* "clear / ahead" states — 6:1 on card */
  --stakkr-shadow: 36 26 38;        /* = ink, for card shadow rgb(...) / alpha */
}

/* --- Stream pill: the Stakkr signature ------------------------------------- */
.bbmt-calculator .bbmt-stream-pill,
.bbmt-dashboard .bbmt-stream-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 16px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px rgb(var(--stakkr-shadow) / 0.10);
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}
.bbmt-calculator .bbmt-stream-pill + .bbmt-stream-pill,
.bbmt-dashboard .bbmt-stream-pill + .bbmt-stream-pill { margin-top: 7px; }
.bbmt-calculator .bbmt-stream-pill .bbmt-stream-pill-name,
.bbmt-dashboard .bbmt-stream-pill .bbmt-stream-pill-name {
  min-width: 0;
  overflow-wrap: anywhere;   /* a narrow funnel pill wraps to 2 lines rather than truncating the name */
}
.bbmt-calculator .bbmt-stream-pill .bbmt-stream-pill-value,
.bbmt-dashboard .bbmt-stream-pill .bbmt-stream-pill-value {
  flex: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.bbmt-calculator .bbmt-stream-pill.s1, .bbmt-dashboard .bbmt-stream-pill.s1 { background: var(--stakkr-mustard);    color: var(--stakkr-ink); }
.bbmt-calculator .bbmt-stream-pill.s2, .bbmt-dashboard .bbmt-stream-pill.s2 { background: var(--stakkr-terracotta); color: var(--stakkr-ink); }
.bbmt-calculator .bbmt-stream-pill.s3, .bbmt-dashboard .bbmt-stream-pill.s3 { background: var(--stakkr-rust);       color: #fff; }
.bbmt-calculator .bbmt-stream-pill.s4, .bbmt-dashboard .bbmt-stream-pill.s4 { background: var(--stakkr-maroon);     color: #fff; }
.bbmt-calculator .bbmt-stream-pill.job, .bbmt-dashboard .bbmt-stream-pill.job { background: var(--stakkr-plum);     color: #fff; }

/* --- Segmented stream bar + legend --------------------------------------- */
.bbmt-calculator .bbmt-stream-bar,
.bbmt-dashboard .bbmt-stream-bar {
  display: flex;
  height: 24px;
  margin: 2px 0 14px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(var(--stakkr-shadow) / 0.10);
}
.bbmt-calculator .bbmt-stream-bar > span,
.bbmt-dashboard .bbmt-stream-bar > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2px;
  overflow: hidden;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.bbmt-calculator .bbmt-stream-bar .s1, .bbmt-dashboard .bbmt-stream-bar .s1 { background: var(--stakkr-mustard);    color: var(--stakkr-ink); }
.bbmt-calculator .bbmt-stream-bar .s2, .bbmt-dashboard .bbmt-stream-bar .s2 { background: var(--stakkr-terracotta); color: var(--stakkr-ink); }
.bbmt-calculator .bbmt-stream-bar .s3, .bbmt-dashboard .bbmt-stream-bar .s3 { background: var(--stakkr-rust);       color: #fff; }
.bbmt-calculator .bbmt-stream-bar .s4, .bbmt-dashboard .bbmt-stream-bar .s4 { background: var(--stakkr-maroon);     color: #fff; }
.bbmt-calculator .bbmt-stream-bar .job, .bbmt-dashboard .bbmt-stream-bar .job { background: var(--stakkr-plum);     color: #fff; }

.bbmt-calculator .bbmt-stream-legend,
.bbmt-dashboard .bbmt-stream-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--stakkr-ink);
}
.bbmt-calculator .bbmt-stream-legend > span,
.bbmt-dashboard .bbmt-stream-legend > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.bbmt-calculator .bbmt-stream-legend .bbmt-dot,
.bbmt-dashboard .bbmt-stream-legend .bbmt-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgb(var(--stakkr-shadow) / 0.12);
}
.bbmt-calculator .bbmt-stream-legend .bbmt-dot.s1, .bbmt-dashboard .bbmt-stream-legend .bbmt-dot.s1 { background: var(--stakkr-mustard); }
.bbmt-calculator .bbmt-stream-legend .bbmt-dot.s2, .bbmt-dashboard .bbmt-stream-legend .bbmt-dot.s2 { background: var(--stakkr-terracotta); }
.bbmt-calculator .bbmt-stream-legend .bbmt-dot.s3, .bbmt-dashboard .bbmt-stream-legend .bbmt-dot.s3 { background: var(--stakkr-rust); }
.bbmt-calculator .bbmt-stream-legend .bbmt-dot.s4, .bbmt-dashboard .bbmt-stream-legend .bbmt-dot.s4 { background: var(--stakkr-maroon); }
.bbmt-calculator .bbmt-stream-legend .bbmt-dot.job, .bbmt-dashboard .bbmt-stream-legend .bbmt-dot.job { background: var(--stakkr-plum); }
.bbmt-calculator .bbmt-stream-legend .bbmt-stream-legend-val,
.bbmt-dashboard .bbmt-stream-legend .bbmt-stream-legend-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--stakkr-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .bbmt-calculator .bbmt-stream-pill,
  .bbmt-dashboard .bbmt-stream-pill,
  .bbmt-calculator .bbmt-stream-bar > span,
  .bbmt-dashboard .bbmt-stream-bar > span { transition: none !important; }
}

/* =============================================================================
   SITE CHROME — sticky nav, page-head band, footer.

   Rendered by bbmt-homepage on every front-end view (wp_body_open /
   wp_footer), OUTSIDE the .stakkr-homepage wrapper. Duplicated into all three
   plugin stylesheets so the chrome is styled even when only one loads. Class
   names kept as .hp-* (reused from the homepage build, not reimplemented).
   ========================================================================== */
body.stakkr-chrome {
  --hp-wrap: 1120px;
  --hp-pad: clamp(20px, 5vw, 56px);
  background: var(--stakkr-paper);
}
.hp-nav, .hp-nav *, .hp-nav *::before, .hp-nav *::after,
.stakkr-pagehead, .stakkr-pagehead *,
.hp-footer, .hp-footer *, .hp-footer *::before, .hp-footer *::after { box-sizing: border-box; }

/* Collapse GeneratePress's container chrome on pages the Stakkr layer owns,
   and sit the whole page on the Stakkr paper colour (continuous with the
   page-head band and the footer). */
.stakkr-chrome .site,
.stakkr-chrome .site-content,
.stakkr-chrome #content { background: var(--stakkr-paper); }
.stakkr-chrome .entry-header,
.stakkr-chrome .generate-page-header { display: none; }
.stakkr-chrome .site-content { margin-top: 0; padding: 0; }
.stakkr-chrome .site-content .content-area { padding: 0; margin: 0; }
.stakkr-chrome .site-main,
.stakkr-chrome .site-main > .entry-content,
.stakkr-chrome article.page,
.stakkr-chrome .inside-article { margin: 0; padding: 0; border: 0; }

.hp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--stakkr-paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--stakkr-line);
}
.hp-nav-inner {
  max-width: var(--hp-wrap);
  margin-inline: auto;
  padding: 14px var(--hp-pad);
  display: flex;
  align-items: center;
  gap: 20px;
}
.hp-nav a:focus-visible,
.hp-nav button:focus-visible {
  outline: 3px solid var(--stakkr-mustard);
  outline-offset: 2px;
  border-radius: 3px;
}
.hp-logo {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--stakkr-ink);
  text-decoration: none;
}
.hp-logo > span[aria-hidden] { display: inline; }
/* A standalone stacked mark before the word: three equal bars,
   terracotta / mustard / plum, top to bottom. The bars step slightly right
   going up for a gentle forward lean. inline-block + vertical-align:baseline
   sits the bottom bar exactly on the wordmark's baseline; the stack is sized
   in em (≈ the "t" height) so it tracks the nav and footer sizes. */
.hp-logo .hp-logo-mark {
  display: inline-block;
  vertical-align: baseline;
  margin-right: 0.24em;
}
.hp-logo .hp-logo-mark i {
  display: block; width: 0.7em; height: 0.16em; border-radius: 0.06em;
  margin-bottom: 0.07em;
}
.hp-logo .hp-logo-mark i:nth-child(1) { background: var(--stakkr-terracotta); margin-left: 0.08em; }
.hp-logo .hp-logo-mark i:nth-child(2) { background: var(--stakkr-mustard);    margin-left: 0.04em; }
.hp-logo .hp-logo-mark i:nth-child(3) { background: var(--stakkr-plum); margin-bottom: 0; }

.hp-nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.hp-nav-links > a,
.hp-nav-drop-trigger {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--stakkr-ink);
  text-decoration: none;
}
.hp-nav-links > a:hover,
.hp-nav-drop-trigger:hover { color: var(--stakkr-rust); }
.hp-nav-links .hp-signin {
  border: 2px solid var(--stakkr-ink);
  border-radius: 8px;
  padding: 8px 16px;
}
.hp-nav-links .hp-signin:hover,
.hp-nav-links .hp-signin:focus-visible { background: var(--stakkr-ink); color: var(--stakkr-paper); }

.hp-nav-item.hp-has-drop { position: relative; }
.hp-nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}
.hp-nav-drop-trigger .hp-caret {
  width: 14px; height: 14px;
  transition: transform 0.15s ease;
}
.hp-nav-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 320px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--stakkr-card);
  border: 1px solid var(--stakkr-line);
  border-radius: 12px;
  box-shadow: 0 18px 44px -20px rgb(var(--stakkr-shadow) / 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.hp-nav-item.hp-has-drop:hover .hp-nav-drop,
.hp-nav-item.hp-has-drop:focus-within .hp-nav-drop,
.hp-nav-drop-trigger[aria-expanded="true"] + .hp-nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hp-nav-item.hp-has-drop:hover .hp-caret,
.hp-nav-drop-trigger[aria-expanded="true"] .hp-caret { transform: rotate(180deg); }
.hp-nav-drop li { margin: 0; }
.hp-nav-drop a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--stakkr-ink);
  text-decoration: none;
}
.hp-nav-drop .hp-nav-drop-desc {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--stakkr-ink-soft);
}
.hp-nav-drop a:hover,
.hp-nav-drop a:focus-visible { background: var(--stakkr-paper); color: var(--stakkr-rust); }
.hp-nav-drop a:hover .hp-nav-drop-desc,
.hp-nav-drop a:focus-visible .hp-nav-drop-desc { color: var(--stakkr-rust); }

.hp-nav-toggle {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 2px solid var(--stakkr-ink);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stakkr-ink);
  cursor: pointer;
}
.hp-nav-toggle svg { width: 16px; height: 16px; }

.hp-nav-mobile {
  display: none;
  border-top: 1px solid var(--stakkr-line);
  background: var(--stakkr-paper);
  padding: 8px var(--hp-pad) 16px;
}
.hp-nav-mobile a {
  display: block;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--stakkr-ink);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--stakkr-line);
}
.hp-nav-mobile a:last-child { border-bottom: 0; }
.hp-nav-mobile-label {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stakkr-ink-soft);
  padding: 14px 0 6px;
  margin: 0;
}
.hp-nav-mobile a.hp-nav-mobile-sub {
  font-size: 15px;
  padding: 10px 0 10px 16px;
}
.hp-nav-mobile .hp-nav-mobile-sub-desc {
  display: block;
  margin-top: 3px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  color: var(--stakkr-ink-soft);
}
.hp-nav[data-open="true"] .hp-nav-mobile { display: block; }

/* Page-head <h1> for interior pages (the homepage and About bring their own).
   Kept in the DOM for the document outline / a11y — every page needs one
   <h1> — but visually hidden: the tool or dashboard card carries the visible
   title. */
.stakkr-pagehead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hp-footer {
  background: var(--stakkr-paper);
  border-top: 1px solid var(--stakkr-line);
  padding: 44px 0 40px;
}
.hp-footer-inner {
  max-width: var(--hp-wrap);
  margin-inline: auto;
  padding-inline: var(--hp-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.hp-footer .hp-logo { font-size: 19px; }
.hp-footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.hp-footer-links a {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--stakkr-ink);
  text-decoration: none;
}
.hp-footer-links a:hover { color: var(--stakkr-rust); }
.hp-footer a:focus-visible {
  outline: 3px solid var(--stakkr-terracotta);
  outline-offset: 2px;
  border-radius: 3px;
}
.hp-footer-copy {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--stakkr-ink-soft);
}

@media (max-width: 860px) {
  .hp-nav-links { display: none; }
  .hp-nav-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
  .hp-footer-copy { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--stakkr-paper);
  }
}
/* ============================ END STAKKR BRAND ============================= */
/* @@STAKKR-SHARED-END@@ */

.bbmt-dashboard {
  /* Legacy --bbmt-* tokens resolve to Stakkr values (same remap as
     bbmt-calculators). --bbmt-line is the STRONG line for field borders;
     small accent text uses --bbmt-brass-bright (rust). */
  --bbmt-ink: var(--stakkr-ink);
  --bbmt-ink-soft: var(--stakkr-ink-soft);
  --bbmt-ground: var(--stakkr-paper);
  --bbmt-surface: var(--stakkr-card);
  --bbmt-surface-well: var(--stakkr-paper);
  --bbmt-brass: var(--stakkr-terracotta);
  --bbmt-brass-bright: var(--stakkr-rust);
  --bbmt-stamp: var(--stakkr-rust);
  --bbmt-line: var(--stakkr-line-strong);
  --bbmt-good: var(--stakkr-positive);
  --bbmt-shadow: var(--stakkr-shadow);

  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: var(--bbmt-ink);
  margin: 20px auto 48px;
  max-width: 680px;
  padding: 0 16px;
}

/* Legacy dark palette disabled — tuned for the old Buy Back My Time colours,
   would clash with the Stakkr light identity. Stakkr dark-mode variant is a
   deferred (v2) item with its own contrast pass.
@media (prefers-color-scheme: dark) {
  .bbmt-dashboard {
    --bbmt-ink: #F1E8D6;
    --bbmt-ink-soft: #B9AC90;
    --bbmt-ground: #201A14;
    --bbmt-surface: #2A231A;
    --bbmt-surface-well: #241E17;
    --bbmt-brass: #C99A46;
    --bbmt-brass-bright: #E0B15C;
    --bbmt-stamp: #E86B54;
    --bbmt-line: #7A6A4C;
    --bbmt-good: #7CB37F;
    --bbmt-shadow: 0 0 0;
  }
}
*/

.bbmt-dashboard, .bbmt-dashboard *, .bbmt-dashboard *::before, .bbmt-dashboard *::after { box-sizing: border-box; }
.bbmt-dashboard [hidden] { display: none !important; }

/* Visually hidden, still read by screen readers (live-region announcements). */
.bbmt-dashboard .bbmt-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bbmt-dashboard .bbmt-card {
  background: var(--stakkr-card);
  border: 1px solid var(--stakkr-line);
  border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgb(var(--stakkr-shadow) / 0.18);
  position: relative;
  padding: 40px 40px 36px;
}

.bbmt-dashboard .bbmt-rivet {
  position: absolute; top: 20px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--stakkr-terracotta);
}
.bbmt-dashboard .bbmt-rivet.left { left: 22px; }
.bbmt-dashboard .bbmt-rivet.right { right: 22px; }

.bbmt-dashboard .bbmt-eyebrow {
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bbmt-brass-bright); text-align: center; margin: 0 0 18px;
}

.bbmt-dashboard h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(24px, 5vw, 30px); line-height: 1.15; text-align: center;
  text-wrap: balance; margin: 0 0 6px; letter-spacing: -0.01em; color: var(--bbmt-ink);
}

.bbmt-dashboard .bbmt-sub {
  text-align: center; color: var(--bbmt-ink-soft); font-size: 14.5px; line-height: 1.5;
  max-width: 46ch; margin: 0 auto 8px;
}

/* Welcome header */
.bbmt-dashboard .bbmt-dash-header { margin-bottom: 6px; }
.bbmt-dashboard .bbmt-headline-pct {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(20px, 4vw, 26px); text-align: center; color: var(--bbmt-brass-bright);
  margin: 4px 0 10px;
}

/* Steps / sections */
.bbmt-dashboard .bbmt-step { margin-top: 30px; padding-top: 26px; border-top: 2px dashed var(--stakkr-line); }
.bbmt-dashboard .bbmt-step--flush { border-top: none; padding-top: 6px; margin-top: 18px; }
.bbmt-dashboard .bbmt-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bbmt-dashboard .bbmt-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--bbmt-brass); color: var(--bbmt-surface);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
}
.bbmt-dashboard .bbmt-step-title {
  font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--bbmt-ink);
}
/* Section titles are real <h3>s — drop the theme's heading margin/size. */
.bbmt-dashboard h3.bbmt-step-title {
  margin: 0; font-size: 18px; line-height: 1.25;
}
.bbmt-dashboard .bbmt-step-copy { font-size: 13.5px; color: var(--bbmt-ink-soft); line-height: 1.5; margin: 0 0 14px; }
.bbmt-dashboard .bbmt-substep-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bbmt-ink-soft);
  margin: 18px 0 8px;
}

.bbmt-dashboard .bbmt-unit { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--bbmt-ink-soft); font-weight: 500; }
.bbmt-dashboard .bbmt-hint { display: block; font-size: 11px; margin-top: 1px; color: var(--bbmt-ink-soft); font-weight: 400; }
.bbmt-dashboard .bbmt-hint-row { font-size: 12.5px; color: var(--bbmt-ink-soft); line-height: 1.5; margin: 8px 0 0; }
.bbmt-dashboard .bbmt-hint-row.is-centered { text-align: center; }
.bbmt-dashboard .bbmt-empty-note { font-size: 13.5px; color: var(--bbmt-ink-soft); text-align: center; padding: 16px 0; margin: 0; }

/* Inputs */
.bbmt-dashboard .bbmt-inline-field {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--bbmt-line);
}
.bbmt-dashboard .bbmt-inline-field > span:first-child { font-size: 14px; color: var(--bbmt-ink); }
.bbmt-dashboard input[type="email"],
.bbmt-dashboard input[type="text"],
.bbmt-dashboard input[type="number"],
.bbmt-dashboard input[type="date"],
.bbmt-dashboard select {
  font: inherit; font-size: 14px; color: var(--bbmt-ink);
  background: var(--bbmt-surface-well); border: 1px solid var(--bbmt-line);
  border-radius: 8px; padding: 8px 10px; max-width: 220px; width: 100%;
}
.bbmt-dashboard .bbmt-inline-field input,
.bbmt-dashboard .bbmt-inline-field select { flex: none; width: 200px; }
.bbmt-dashboard input:focus-visible,
.bbmt-dashboard select:focus-visible,
.bbmt-dashboard textarea:focus-visible,
.bbmt-dashboard button:focus-visible,
.bbmt-dashboard a:focus-visible,
.bbmt-dashboard [tabindex]:focus-visible {
  outline: 2px solid var(--bbmt-brass); outline-offset: 2px;
}
.bbmt-dashboard .bbmt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.bbmt-dashboard .bbmt-subform { margin-top: 8px; }

/* Weekly check-in: at-a-glance which streams have a real figure saved for the
 * selected week vs. which are still blank. */
.bbmt-dashboard .bbmt-checkin-row { border-left: 2px solid transparent; padding-left: 8px; }
.bbmt-dashboard .bbmt-checkin-row.is-logged { border-left-color: var(--bbmt-good); }

/* Buttons */
.bbmt-dashboard .bbmt-primary-btn,
.bbmt-dashboard .bbmt-danger-btn {
  display: inline-block; margin-top: 16px; font: inherit; font-weight: 600; font-size: 14.5px;
  padding: 12px 20px; border-radius: 9px; border: 1px solid transparent; cursor: pointer;
}
/* Matches .hp-btn-primary: ink label on terracotta at rest (legible), white
   label on the darker fill for hover/focus (ink would not be). */
.bbmt-dashboard .bbmt-primary-btn { background: var(--bbmt-brass); color: var(--stakkr-ink); }
.bbmt-dashboard .bbmt-primary-btn:hover,
.bbmt-dashboard .bbmt-primary-btn:focus-visible { background: #C25E38; color: #fff; }
.bbmt-dashboard .bbmt-primary-btn:disabled { opacity: 0.6; cursor: default; }
.bbmt-dashboard .bbmt-danger-btn { background: transparent; border-color: var(--bbmt-stamp); color: var(--bbmt-stamp); }
.bbmt-dashboard .bbmt-danger-btn:hover { background: var(--bbmt-stamp); color: var(--bbmt-surface); }

.bbmt-dashboard .bbmt-mini-btn {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px;
  border: 1px solid var(--bbmt-line); background: var(--bbmt-surface-well); color: var(--bbmt-ink); cursor: pointer;
}
.bbmt-dashboard .bbmt-mini-btn:hover { border-color: var(--bbmt-brass); color: var(--bbmt-brass-bright); }
.bbmt-dashboard .bbmt-mini-btn:disabled { opacity: 0.5; cursor: default; }
.bbmt-dashboard .bbmt-mini-btn.is-danger:hover { border-color: var(--bbmt-stamp); color: var(--bbmt-stamp); }

.bbmt-dashboard .bbmt-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Notices / form messages */
.bbmt-dashboard .bbmt-notice {
  font-size: 13.5px; padding: 12px 14px; border-radius: 9px; margin: 0 0 18px;
  border: 1px solid var(--bbmt-line); background: var(--bbmt-surface-well); line-height: 1.5;
}
.bbmt-dashboard .bbmt-notice p { margin: 0 0 6px; }
.bbmt-dashboard .bbmt-notice.is-good { border-color: color-mix(in srgb, var(--bbmt-good) 55%, var(--bbmt-line)); color: var(--bbmt-good); }
.bbmt-dashboard .bbmt-notice.is-warning { border-color: color-mix(in srgb, var(--bbmt-stamp) 55%, var(--bbmt-line)); color: var(--bbmt-stamp); }
.bbmt-dashboard .bbmt-form-msg { font-size: 13px; margin: 12px 0 0; min-height: 1.2em; color: var(--bbmt-ink-soft); }
.bbmt-dashboard .bbmt-form-msg.is-good { color: var(--bbmt-good); }
.bbmt-dashboard .bbmt-form-msg.is-warning { color: var(--bbmt-stamp); }

/* Payslip block */
/* Dashboard by-stream pills carry both the /yr projection and the /wk avg,
   so the value area is a right-aligned two-line stack. */
.bbmt-dashboard .bbmt-stream-pill .bbmt-stream-pill-value {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15;
}
.bbmt-dashboard .bbmt-stream-pill .bbmt-stream-pill-sub { font-size: 11px; font-weight: 500; opacity: 0.8; }

/* Ledger rows — the Stakkr dashed-divider pattern (spec .result-row). */
.bbmt-dashboard .bbmt-payslip { margin-top: 10px; }
.bbmt-dashboard .bbmt-payslip-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 12px 2px; border-top: 1.5px dashed var(--stakkr-line); font-size: 14px;
}
.bbmt-dashboard .bbmt-payslip-row:first-child { border-top: none; }
.bbmt-dashboard .bbmt-payslip-label { color: var(--bbmt-ink-soft); font-weight: 500; }
.bbmt-dashboard .bbmt-payslip-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.bbmt-dashboard .bbmt-payslip-row.is-deduction .bbmt-payslip-value { color: var(--bbmt-stamp); }
.bbmt-dashboard .bbmt-payslip-row.is-total {
  border-top: 2px solid var(--stakkr-line-strong); margin-top: 2px; padding-top: 14px;
}
.bbmt-dashboard .bbmt-payslip-row.is-total .bbmt-payslip-label { color: var(--bbmt-ink); font-weight: 700; }
.bbmt-dashboard .bbmt-payslip-row.is-total .bbmt-payslip-value { color: var(--bbmt-brass); font-size: 18px; }

/* Result headline (projection) */
.bbmt-dashboard .bbmt-result { text-align: center; margin-top: 10px; }
.bbmt-dashboard .bbmt-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--bbmt-ink-soft); margin: 0 0 6px;
}
.bbmt-dashboard .bbmt-figure {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(30px, 7vw, 42px); color: var(--bbmt-brass); line-height: 1;
}
.bbmt-dashboard .bbmt-result.is-positive .bbmt-figure { color: var(--bbmt-good); }
.bbmt-dashboard .bbmt-per { font-size: 13px; color: var(--bbmt-ink-soft); margin: 8px 0 0; }

/* Stream rows */
.bbmt-dashboard .bbmt-stream-rows {
  border: 1px solid var(--bbmt-line); border-radius: 10px; overflow: hidden; margin-bottom: 8px;
}
.bbmt-dashboard .bbmt-stream-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--bbmt-line); background: var(--bbmt-surface-well);
}
.bbmt-dashboard .bbmt-stream-row:last-child { border-bottom: none; }
.bbmt-dashboard .bbmt-stream-row-name { font-size: 14px; font-weight: 600; flex: 1 1 auto; }
.bbmt-dashboard .bbmt-stream-row-actions { display: flex; gap: 6px; flex: none; }
.bbmt-dashboard .bbmt-stream-row input[type="text"] { flex: 1 1 160px; width: auto; max-width: none; }

.bbmt-dashboard .bbmt-tax-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px;
  border: 1px solid var(--bbmt-line); color: var(--bbmt-ink-soft); flex: none;
}
.bbmt-dashboard .bbmt-tax-badge.is-tax-free { color: var(--bbmt-good); border-color: color-mix(in srgb, var(--bbmt-good) 50%, var(--bbmt-line)); }

/* Breakdown pie chart — plain inline SVG, no charting dependency. Reuses the
   shared .bbmt-stream-legend component (above, in the STAKKR SHARED block)
   for the £/yr · £/wk figures; only the chart itself needs styling here. */
.bbmt-dashboard .bbmt-pie-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.bbmt-dashboard .bbmt-pie {
  width: 120px;
  height: 120px;
  flex: none;
}
.bbmt-dashboard .bbmt-pie-slice { stroke: var(--bbmt-surface); stroke-width: 1; }
.bbmt-dashboard .bbmt-pie-slice.s1 { fill: var(--stakkr-mustard); }
.bbmt-dashboard .bbmt-pie-slice.s2 { fill: var(--stakkr-terracotta); }
.bbmt-dashboard .bbmt-pie-slice.s3 { fill: var(--stakkr-rust); }
.bbmt-dashboard .bbmt-pie-slice.s4 { fill: var(--stakkr-maroon); }
.bbmt-dashboard .bbmt-pie-empty { fill: none; stroke: var(--bbmt-line); stroke-width: 1; }
.bbmt-dashboard .bbmt-pie-wrap .bbmt-stream-legend { flex: 1 1 200px; flex-direction: column; gap: 8px; }

/* Weekly planner — see bbmt-calendar.js. A self-contained drag/tap
 * calendar; nothing here feeds the payslip/pie/checkin figures above. */
.bbmt-dashboard .bbmt-planner-panels { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 4px; }
.bbmt-dashboard .bbmt-planner-panel {
  flex: 1 1 220px; padding: 12px 14px; border: 1px solid var(--bbmt-line);
  border-radius: 10px; background: var(--bbmt-surface-well);
}
.bbmt-dashboard .bbmt-planner-panel .bbmt-substep-label { margin-top: 0; }

/* A single stacked label+input — .bbmt-inline-field's side-by-side layout
 * assumes a wide row and wraps badly in a narrow planner panel. */
.bbmt-dashboard .bbmt-stacked-field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.bbmt-dashboard .bbmt-stacked-field > span { font-size: 13.5px; font-weight: 600; color: var(--bbmt-ink); }
.bbmt-dashboard .bbmt-stacked-field input { width: 100%; max-width: none; box-sizing: border-box; }

.bbmt-dashboard [data-role="streamBlockList"],
.bbmt-dashboard [data-role="nonnegBlockList"] { display: flex; flex-wrap: wrap; gap: 8px; }

/* Chips — the draggable/tappable tokens in the two panels. */
.bbmt-dashboard .bbmt-cal-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 26px 7px 12px; border-radius: 999px; border: 1px solid transparent;
  font-size: 13px; font-weight: 600; color: var(--stakkr-ink); cursor: grab;
  box-shadow: inset 0 0 0 1px rgb(var(--stakkr-shadow) / 0.10);
}
.bbmt-dashboard .bbmt-cal-chip:active { cursor: grabbing; }
.bbmt-dashboard .bbmt-cal-chip.is-picked { outline: 2px solid var(--bbmt-brass); outline-offset: 2px; }
.bbmt-dashboard .bbmt-cal-chip--stream.s1 { background: var(--stakkr-mustard); }
.bbmt-dashboard .bbmt-cal-chip--stream.s2 { background: var(--stakkr-terracotta); }
.bbmt-dashboard .bbmt-cal-chip--stream.s3 { background: var(--stakkr-rust); color: #fff; }
.bbmt-dashboard .bbmt-cal-chip--stream.s4 { background: var(--stakkr-maroon); color: #fff; }
.bbmt-dashboard .bbmt-cal-chip--nonneg { background: var(--stakkr-plum); color: #fff; }
.bbmt-dashboard .bbmt-cal-chip-del {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; line-height: 16px; text-align: center; padding: 0;
  border-radius: 50%; border: none; background: rgb(255 255 255 / 0.35); color: inherit;
  font-size: 13px; cursor: pointer;
}
.bbmt-dashboard .bbmt-cal-chip-del:hover { background: rgb(255 255 255 / 0.6); }

/* The grid itself — hour rows down the side, Monday-Sunday across the top.
 * Each day column spans all 24 hour-rows as one cell (position: relative)
 * so placed blocks can be absolutely positioned inside it by minute. */
.bbmt-dashboard .bbmt-calendar-scroll {
  overflow: hidden auto; max-height: 560px; margin-top: 4px;
  border: 1px solid var(--bbmt-line); border-radius: 10px;
}
/* All 7 days always fit the card width — the grid only ever scrolls
   vertically, never sideways. Day columns share the remaining width
   equally (minmax(0,1fr) lets them shrink below their content). */
.bbmt-dashboard .bbmt-calendar-grid {
  display: grid;
  grid-template-columns: 44px repeat(7, minmax(0, 1fr));
  grid-template-rows: 30px repeat(24, var(--bbmt-cal-hour-px, 40px));
  background: var(--bbmt-surface);
}
/* Viewing a saved plan (read-only): a muted, slightly desaturated wash so
 * it reads as "an older, saved copy" at a glance, distinct from the live
 * template. Blocks stay legible — see .bbmt-cal-watermark below for the
 * date stamped across it. */
.bbmt-dashboard .bbmt-calendar-grid.is-viewing-snapshot { background: color-mix(in srgb, var(--stakkr-line) 40%, var(--bbmt-surface)); }
.bbmt-dashboard .bbmt-calendar-grid.is-viewing-snapshot .bbmt-cal-corner,
.bbmt-dashboard .bbmt-calendar-grid.is-viewing-snapshot .bbmt-cal-daylabel,
.bbmt-dashboard .bbmt-calendar-grid.is-viewing-snapshot .bbmt-cal-hourcol { background: color-mix(in srgb, var(--stakkr-line) 55%, var(--bbmt-surface-well)); }
.bbmt-dashboard .bbmt-calendar-grid.is-viewing-snapshot .bbmt-cal-day { filter: saturate(0.5) brightness(0.98); }
.bbmt-dashboard .bbmt-cal-corner,
.bbmt-dashboard .bbmt-cal-daylabel {
  position: sticky; top: 0; z-index: 2; background: var(--bbmt-surface-well);
  border-bottom: 1px solid var(--bbmt-line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--bbmt-ink-soft);
}
.bbmt-dashboard .bbmt-cal-corner { left: 0; z-index: 3; }
.bbmt-dashboard .bbmt-cal-hourcol {
  position: sticky; left: 0; z-index: 1; display: flex; flex-direction: column;
  background: var(--bbmt-surface-well); border-right: 1px solid var(--bbmt-line);
}
.bbmt-dashboard .bbmt-cal-hourlabel {
  height: var(--bbmt-cal-hour-px, 40px); flex: none; display: block;
  padding: 2px 5px 0 0; text-align: right; box-sizing: border-box;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--bbmt-ink-soft);
  border-top: 1px dashed var(--stakkr-line);
}
.bbmt-dashboard .bbmt-cal-day {
  position: relative; border-left: 1px solid var(--bbmt-line);
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent calc(var(--bbmt-cal-hour-px, 40px) - 1px),
    var(--stakkr-line) calc(var(--bbmt-cal-hour-px, 40px) - 1px), var(--stakkr-line) var(--bbmt-cal-hour-px, 40px)
  );
  cursor: pointer;
}
.bbmt-dashboard .bbmt-cal-block {
  position: absolute; left: 3px; right: 3px; overflow: hidden;
  border-radius: 6px; padding: 3px 20px 3px 6px; box-sizing: border-box;
  font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--stakkr-ink);
  box-shadow: inset 0 0 0 1px rgb(var(--stakkr-shadow) / 0.15);
  cursor: grab;
}
.bbmt-dashboard .bbmt-cal-block:active { cursor: grabbing; }
.bbmt-dashboard .bbmt-cal-block.is-picked { outline: 2px solid var(--bbmt-brass); outline-offset: 1px; z-index: 1; }
.bbmt-dashboard .bbmt-cal-block-label { display: block; }
.bbmt-dashboard .bbmt-cal-block.s1 { background: var(--stakkr-mustard); }
.bbmt-dashboard .bbmt-cal-block.s2 { background: var(--stakkr-terracotta); }
.bbmt-dashboard .bbmt-cal-block.s3 { background: var(--stakkr-rust); color: #fff; }
.bbmt-dashboard .bbmt-cal-block.s4 { background: var(--stakkr-maroon); color: #fff; }
.bbmt-dashboard .bbmt-cal-block.nonneg { background: var(--stakkr-plum); color: #fff; }
.bbmt-dashboard .bbmt-cal-block-del {
  position: absolute; right: 3px; top: 3px; width: 15px; height: 15px; line-height: 13px;
  text-align: center; padding: 0; border-radius: 50%; border: none; cursor: pointer;
  background: rgb(255 255 255 / 0.35); color: inherit; font-size: 12px;
}
.bbmt-dashboard .bbmt-cal-block-del:hover { background: rgb(255 255 255 / 0.6); }

/* Bottom-edge grip — drag to extend/shrink a placed block across slots in
 * one motion. Always visible (not hover-only): a touch user has no hover
 * state to discover it by. */
.bbmt-dashboard .bbmt-cal-block-resize {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize;
  display: flex; align-items: center; justify-content: center; touch-action: none;
}
.bbmt-dashboard .bbmt-cal-block-resize::before {
  content: ""; width: 22px; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.55);
}
.bbmt-dashboard .bbmt-cal-block-resize:hover::before { background: rgb(255 255 255 / 0.85); }

/* The saved-plan date, written across a viewed snapshot — repeated down the
 * grid so it's visible wherever the user has scrolled to. Semi-transparent
 * and non-interactive so it never hides or blocks the placed blocks under it. */
.bbmt-dashboard .bbmt-cal-watermark { position: relative; pointer-events: none; z-index: 4; }
.bbmt-dashboard .bbmt-cal-watermark-line {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%) rotate(-8deg);
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; white-space: nowrap;
  font-size: clamp(15px, 2.6vw, 24px); color: rgb(var(--stakkr-shadow) / 0.22);
}

.bbmt-dashboard .bbmt-planner-hours { margin-top: 14px; }
.bbmt-dashboard .bbmt-planner-snapshots { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--stakkr-line); }
.bbmt-dashboard .bbmt-snapshot-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 2px; border-top: 1px solid var(--bbmt-line);
}
.bbmt-dashboard .bbmt-snapshot-row:first-child { border-top: none; }
.bbmt-dashboard .bbmt-snapshot-row.is-active { background: var(--bbmt-surface-well); }
.bbmt-dashboard .bbmt-snapshot-row-name { font-size: 13.5px; font-weight: 600; }

@media (max-width: 600px) {
  .bbmt-dashboard .bbmt-planner-panel { flex-basis: 100%; }
  .bbmt-dashboard .bbmt-calendar-scroll { max-height: 440px; }
  /* Columns get narrow on a phone — keep every day visible (no sideways
     scroll) by trimming the labels and block text to fit. */
  .bbmt-dashboard .bbmt-calendar-grid { grid-template-columns: 38px repeat(7, minmax(0, 1fr)); }
  .bbmt-dashboard .bbmt-cal-hourlabel { font-size: 9px; }
  .bbmt-dashboard .bbmt-cal-daylabel { font-size: 9.5px; letter-spacing: 0; }
  .bbmt-dashboard .bbmt-cal-block { font-size: 10px; padding: 2px 15px 2px 4px; }
}

/* Tools reference */
.bbmt-dashboard .bbmt-tool-links { display: grid; gap: 10px; }
.bbmt-dashboard .bbmt-tool-link {
  display: block; text-decoration: none; padding: 12px 14px;
  border: 1px solid var(--bbmt-line); border-radius: 10px; background: var(--bbmt-surface-well);
}
.bbmt-dashboard .bbmt-tool-link:hover { border-color: var(--bbmt-brass); }
.bbmt-dashboard .bbmt-tool-link-name { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 15px; font-weight: 600; color: var(--bbmt-brass-bright); }
.bbmt-dashboard .bbmt-tool-link-desc { display: block; font-size: 12.5px; color: var(--bbmt-ink-soft); margin-top: 2px; line-height: 1.45; }

/* Danger zone */
.bbmt-dashboard .bbmt-danger-zone { border-top-color: color-mix(in srgb, var(--bbmt-stamp) 40%, var(--bbmt-line)); }
.bbmt-dashboard .bbmt-danger-zone .bbmt-step-title { color: var(--bbmt-stamp); }
.bbmt-dashboard .bbmt-delete-panel {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--bbmt-stamp) 45%, var(--bbmt-line));
  border-radius: 10px; background: var(--bbmt-surface-well);
}
.bbmt-dashboard .bbmt-delete-panel[hidden] { display: none; }
.bbmt-dashboard .bbmt-delete-panel > p:first-child { margin-top: 0; font-size: 14px; }

.bbmt-dashboard .bbmt-foot {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--bbmt-line);
  font-size: 12px; line-height: 1.6; color: var(--bbmt-ink-soft);
}
.bbmt-dashboard .bbmt-foot a { color: var(--bbmt-brass-bright); }

.bbmt-dashboard .bbmt-login-form { margin-top: 8px; }
.bbmt-dashboard .bbmt-login-form .bbmt-inline-field { flex-wrap: wrap; }

/* 600px to match bbmt-calculators — covers large-phone landscape, small
 * tablets and ~150% desktop zoom, not just narrow phone portrait. */
@media (max-width: 600px) {
  .bbmt-dashboard .bbmt-card { padding: 30px 20px 28px; }
  .bbmt-dashboard .bbmt-inline-field { flex-direction: column; align-items: stretch; gap: 6px; }
  .bbmt-dashboard .bbmt-inline-field input,
  .bbmt-dashboard .bbmt-inline-field select { width: 100%; }
  .bbmt-dashboard .bbmt-stream-row-name { flex-basis: 100%; }
}

/* Respect a reduced-motion preference (WCAG 2.3.3) — all motion here is
 * short and cosmetic, so it's safe to drop wholesale. */
@media (prefers-reduced-motion: reduce) {
  .bbmt-dashboard *,
  .bbmt-dashboard *::before,
  .bbmt-dashboard *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}