/**
 * BBMT Calculators — Stakkr design system ("Stack & Flow" + "Editorial Warmth").
 * All rules are scoped under .bbmt-calculator so this can never leak into
 * (or be leaked into by) the active theme's styles.
 *
 * The STAKKR BRAND block below is duplicated byte-identically into
 * bbmt-accounts/assets/css/bbmt-accounts.css (the two plugins stay
 * self-contained). bin/check-tokens.sh fails a commit if they drift.
 */

/* @@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-calculator {
  /* Legacy --bbmt-* tokens now resolve to Stakkr values, so the rest of this
     stylesheet keeps working unchanged. AA-forced adjustments: --bbmt-line is
     the STRONG line (field borders); small accent text uses --bbmt-brass-bright
     (rust), reserving --bbmt-brass (terracotta) for fills + big display numbers. */
  --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: 620px;
  padding: 0 16px;
}

/* Legacy dark palette disabled — it is tuned for the old Buy Back My Time
   colours and would clash with the Stakkr light identity. A dedicated Stakkr
   dark-mode variant is a deferred (v2) item with its own contrast pass.
@media (prefers-color-scheme: dark) {
  .bbmt-calculator {
    --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-calculator, .bbmt-calculator *, .bbmt-calculator *::before, .bbmt-calculator *::after {
  box-sizing: border-box;
}

/* `hidden` must always win — several blocks below set display:flex/grid on
 * a class that would otherwise override the attribute. */
.bbmt-calculator [hidden] { display: none !important; }

/* Visually hidden, still read by screen readers (live-region announcements). */
.bbmt-calculator .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-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-rivet {
  position: absolute;
  top: 20px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--stakkr-terracotta);
}
.bbmt-rivet.left { left: 22px; }
.bbmt-rivet.right { right: 22px; }

.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-card h1, .bbmt-card h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(26px, 5vw, 32px);
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

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

.bbmt-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--bbmt-line);
}
.bbmt-field:first-of-type { border-top: 1px solid var(--bbmt-line); }

.bbmt-field > label {
  font-size: 14px;
  font-weight: 500;
  color: var(--bbmt-ink);
  flex: 1;
  cursor: default;
}
.bbmt-field .bbmt-hint {
  display: block;
  font-size: 12px;
  color: var(--bbmt-ink-soft);
  font-weight: 400;
  margin-top: 1px;
}

.bbmt-field-input {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.bbmt-field-input .bbmt-prefix {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px;
  color: var(--bbmt-ink-soft);
}

.bbmt-calculator input[type="number"] {
  width: 84px;
  text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 600;
  color: var(--bbmt-ink);
  background: var(--bbmt-surface-well);
  border: 1px solid var(--bbmt-line);
  border-radius: 6px;
  padding: 7px 8px;
  -moz-appearance: textfield;
}
.bbmt-calculator input[type="number"]:focus {
  outline: none;
  border-color: var(--bbmt-brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bbmt-brass) 22%, transparent);
}
.bbmt-calculator input[type="number"]::-webkit-outer-spin-button,
.bbmt-calculator input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bbmt-calculator select {
  font-family: 'Inter', ui-sans-serif, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bbmt-ink);
  background: var(--bbmt-surface-well);
  border: 1px solid var(--bbmt-line);
  border-radius: 6px;
  padding: 7px 8px;
}
.bbmt-calculator select:focus {
  outline: none;
  border-color: var(--bbmt-brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bbmt-brass) 22%, transparent);
}

.bbmt-unit {
  font-size: 13px;
  color: var(--bbmt-ink-soft);
  min-width: 42px;
}

/* Full-bleed divider between the inputs and the result. */
.bbmt-perforation {
  margin: 30px -40px 26px;
  border-top: 2px dashed var(--stakkr-line);
}
.bbmt-perforation span { display: none; }

.bbmt-result { text-align: center; }

.bbmt-result .bbmt-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bbmt-ink-soft);
  margin-bottom: 10px;
}

.bbmt-figure {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Floor low enough that a 5-figure "−£12,345/yr" doesn't overflow a ~320px
   * viewport; still large on desktop. */
  font-size: clamp(34px, 9vw, 62px);
  color: var(--bbmt-brass);
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  margin-bottom: 4px;
}

.bbmt-per {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  color: var(--bbmt-ink-soft);
  margin-bottom: 18px;
}

.bbmt-compare {
  font-size: 14px;
  color: var(--bbmt-ink);
  line-height: 1.6;
  max-width: 42ch;
  margin: 0 auto 22px;
}
.bbmt-compare strong { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; }
.bbmt-compare .bbmt-was {
  text-decoration: line-through;
  text-decoration-color: var(--bbmt-ink-soft);
  color: var(--bbmt-ink-soft);
}

/* Plain-English "here's the arithmetic" line under the compare sentence. */
.bbmt-derivation {
  max-width: 46ch;
  margin: -6px auto 22px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--bbmt-ink-soft);
}
.bbmt-derivation:empty { display: none; }
.bbmt-derivation strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  color: var(--bbmt-ink);
}

/* The paid-holiday aside — a separate "and, on top of that…" fact. */
.bbmt-derivation--aside {
  margin-top: -8px;
  padding-top: 14px;
  border-top: 1px dashed var(--bbmt-line);
}
/* Same aside, but the downside version (no paid time off). */
.bbmt-derivation--warn strong { color: var(--bbmt-stamp); }

.bbmt-stat-row {
  display: flex;
  flex-wrap: wrap;          /* under a text-spacing override the text reflows below (WCAG 1.4.12) */
  gap: 4px 12px;
  background: var(--stakkr-paper);
  border: 1px solid var(--stakkr-line);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  align-items: center;
}
.bbmt-stat-row + .bbmt-stat-row { margin-top: 10px; }

.bbmt-stat-row .bbmt-n {
  flex: none;              /* keep the figure on one line — never break "£82" / "11.5" apart */
  white-space: nowrap;
  overflow-wrap: normal;   /* the theme sets break-word site-wide; opt this back out */
  word-break: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 20px;
  color: var(--bbmt-brass-bright);
}

.bbmt-stat-row .bbmt-t {
  flex: 1 1 12ch;
  font-size: 13px;
  color: var(--bbmt-ink-soft);
  line-height: 1.45;
}

.bbmt-foot {
  margin-top: 22px;
  text-align: center;
  font-size: 11.5px;
  color: var(--bbmt-ink-soft);
  line-height: 1.5;
}

/* --- Step-based tools (e.g. Peak Performance) ---
 * Numbered sections, pill-style single-select groups, and a proportional
 * breakdown bar. Kept generic (not named after any one tool) so later
 * tools can reuse them the same way they reuse .bbmt-card / .bbmt-field. */

.bbmt-step { margin-bottom: 28px; }

.bbmt-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.bbmt-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bbmt-brass);
  color: var(--bbmt-ink);
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bbmt-step-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bbmt-ink);
}
/* Step titles are real <h3>s (screen-reader navigation) — neutralise the
 * theme's heading margins/size; specificity beats `.entry-content h3`. */
.bbmt-calculator h3.bbmt-step-title {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.3;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.bbmt-step-copy {
  font-size: 13.5px;
  color: var(--bbmt-ink-soft);
  line-height: 1.5;
  text-align: left;
  margin: 0 0 12px;
}

.bbmt-timeslot-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.bbmt-timeslot-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bbmt-surface-well);
  border: 1px solid var(--bbmt-line);
  border-radius: 8px;
}
.bbmt-timeslot-row.is-invalid { border-color: var(--bbmt-stamp); }

.bbmt-timeslot-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.bbmt-timeslot-sep {
  font-size: 12.5px;
  color: var(--bbmt-ink-soft);
}

.bbmt-timeslot-warning {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--bbmt-stamp);
}
.bbmt-timeslot-warning[hidden] { display: none; }

.bbmt-time-input {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--bbmt-ink);
  background: var(--bbmt-surface);
  border: 1px solid var(--bbmt-line);
  border-radius: 6px;
  padding: 6px 8px;
}
.bbmt-time-input:focus {
  outline: none;
  border-color: var(--bbmt-brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bbmt-brass) 22%, transparent);
}

.bbmt-remove-row {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--bbmt-line);
  background: var(--bbmt-surface);
  color: var(--bbmt-ink-soft);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.bbmt-remove-row:hover { border-color: var(--bbmt-stamp); color: var(--bbmt-stamp); }
.bbmt-remove-row:focus-visible { outline: 2px solid var(--bbmt-brass); outline-offset: 2px; }

.bbmt-dashed-btn {
  display: block;
  width: 100%;
  padding: 10px;
  font-family: 'Inter', ui-sans-serif, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bbmt-brass-bright);
  background: transparent;
  border: 1.5px dashed var(--bbmt-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.bbmt-dashed-btn:hover { border-color: var(--bbmt-brass); color: var(--bbmt-brass-bright); }
.bbmt-dashed-btn:focus-visible { outline: 2px solid var(--bbmt-brass); outline-offset: 2px; }

.bbmt-daytype-breakdown { margin-bottom: 16px; }

.bbmt-daytype-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bbmt-ink);
  margin: 0 0 8px;
}

.bbmt-daytype-mult {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--bbmt-ink-soft);
}

.bbmt-occupancy-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bbmt-empty-note {
  font-size: 13.5px;
  color: var(--bbmt-ink-soft);
  font-style: italic;
  margin: 0;
}

.bbmt-occupancy-row {
  padding: 12px 14px;
  background: var(--bbmt-surface-well);
  border: 1px solid var(--bbmt-line);
  border-radius: 8px;
}

.bbmt-occupancy-row-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bbmt-brass-bright);
  margin-bottom: 8px;
}

.bbmt-pill-group--compact .bbmt-pill span { padding: 6px 12px; font-size: 12.5px; }

.bbmt-occupancy-daytype + .bbmt-occupancy-daytype {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--bbmt-line);
}

.bbmt-occupancy-daytype-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bbmt-ink-soft);
  margin-bottom: 6px;
}

.bbmt-occupancy-other {
  margin-top: 8px;
  width: 100%;
  font-family: 'Inter', ui-sans-serif, sans-serif;
  font-size: 13px;
  color: var(--bbmt-ink);
  background: var(--bbmt-surface);
  border: 1px solid var(--bbmt-line);
  border-radius: 6px;
  padding: 6px 9px;
}
.bbmt-occupancy-other[hidden] { display: none; }
.bbmt-occupancy-other:focus {
  outline: none;
  border-color: var(--bbmt-brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bbmt-brass) 22%, transparent);
}

.bbmt-hint-row {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--bbmt-ink-soft);
  text-align: left;
  line-height: 1.5;
}

.bbmt-link {
  color: var(--bbmt-brass-bright);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--bbmt-brass) 70%, transparent);
  text-underline-offset: 2px;
}
.bbmt-link:hover { color: var(--bbmt-brass-bright); }

.bbmt-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bbmt-pill { position: relative; }

.bbmt-pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.bbmt-pill span {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--bbmt-line);
  border-radius: 999px;
  background: var(--bbmt-surface-well);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bbmt-ink);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bbmt-pill input:checked + span {
  background: var(--bbmt-brass);
  border-color: var(--bbmt-brass);
  color: var(--bbmt-surface);
}

.bbmt-pill input:focus-visible + span {
  outline: 2px solid var(--bbmt-brass);
  outline-offset: 2px;
}

.bbmt-inline-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.bbmt-inline-field[hidden] { display: none; }

.bbmt-inline-field label {
  font-size: 13px;
  color: var(--bbmt-ink-soft);
  flex: 1;
}

.bbmt-inline-field input[type="text"] {
  flex: 1;
  font-family: 'Inter', ui-sans-serif, sans-serif;
  font-size: 14px;
  color: var(--bbmt-ink);
  background: var(--bbmt-surface-well);
  border: 1px solid var(--bbmt-line);
  border-radius: 6px;
  padding: 7px 10px;
}

.bbmt-inline-field input[type="text"]:focus {
  outline: none;
  border-color: var(--bbmt-brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bbmt-brass) 22%, transparent);
}

.bbmt-bar {
  display: flex;
  height: 28px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(var(--stakkr-shadow) / 0.10);
  background: var(--stakkr-paper);
}

.bbmt-bar-segment { height: 100%; transition: width 0.2s ease; }
/* "Consumed" = neutral/muted; "free" = the opportunity, so it takes the
   terracotta accent (rust is reserved for alerts in the Stakkr palette). */
.bbmt-bar-segment.is-consumed { background: var(--stakkr-ink-soft); opacity: 0.45; }
.bbmt-bar-segment.is-free { background: var(--stakkr-terracotta); }

.bbmt-bar-legend {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--bbmt-ink-soft);
  flex-wrap: wrap;
}

.bbmt-bar-legend .bbmt-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}
.bbmt-bar-legend .bbmt-swatch.is-consumed { background: var(--stakkr-ink-soft); opacity: 0.45; }
.bbmt-bar-legend .bbmt-swatch.is-free { background: var(--stakkr-terracotta); }

.bbmt-verdict {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(19px, 4.2vw, 24px);
  line-height: 1.3;
  text-wrap: balance;
  margin: 0 0 16px;
  color: var(--bbmt-ink);
}

.bbmt-result.is-warning .bbmt-verdict,
.bbmt-result.is-warning .bbmt-n { color: var(--bbmt-stamp); }
.bbmt-result.is-positive .bbmt-verdict,
.bbmt-result.is-positive .bbmt-n { color: var(--bbmt-good); }

/* --- Stackable Income (Tool No. 3) reusable pieces --- */

.bbmt-results { display: flex; flex-direction: column; gap: 24px; }
.bbmt-step--flush { margin-bottom: 0; }
.bbmt-hint-row.is-centered { text-align: center; }


.bbmt-stream-group-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bbmt-brass-bright);
  margin: 0 0 8px;
}

.bbmt-stream-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bbmt-surface-well);
  border: 1px solid var(--bbmt-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bbmt-stream-option + .bbmt-stream-option { margin-top: 8px; }
.bbmt-stream-option:hover { border-color: var(--bbmt-brass); }
.bbmt-stream-option:has(input:checked) {
  border-color: var(--bbmt-brass);
  background: color-mix(in srgb, var(--bbmt-brass) 12%, var(--bbmt-surface-well));
}

.bbmt-stream-option input[type="checkbox"] {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  accent-color: var(--bbmt-brass);
}

.bbmt-stream-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bbmt-ink);
}

.bbmt-stream-rate {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--bbmt-ink-soft);
  overflow-wrap: anywhere; /* wrap, don't clip, under text-spacing overrides (WCAG 1.4.12) */
}

.bbmt-stream-config-row {
  padding: 12px 14px;
  background: var(--bbmt-surface-well);
  border: 1px solid var(--bbmt-line);
  border-radius: 8px;
}
.bbmt-stream-config-row + .bbmt-stream-config-row { margin-top: 10px; }

.bbmt-stream-config-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bbmt-brass-bright);
  margin-bottom: 8px;
}

/* Per-stream "Taxable income" checkbox + its mandatory helper text. */
.bbmt-taxable-field { margin-top: 10px; }
.bbmt-taxable-field .bbmt-stream-option { background: var(--bbmt-surface); }
.bbmt-taxable-field .bbmt-hint-row { margin-top: 6px; }

.bbmt-custom-stream-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bbmt-surface-well);
  border: 1px solid var(--bbmt-line);
  border-radius: 8px;
}
.bbmt-custom-stream-row + .bbmt-custom-stream-row { margin-top: 10px; }

.bbmt-custom-stream-name {
  flex: 1 1 160px;
  min-width: 140px;
  font-family: 'Inter', ui-sans-serif, sans-serif;
  font-size: 13.5px;
  color: var(--bbmt-ink);
  background: var(--bbmt-surface);
  border: 1px solid var(--bbmt-line);
  border-radius: 6px;
  padding: 7px 10px;
}
.bbmt-custom-stream-name:focus {
  outline: none;
  border-color: var(--bbmt-brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bbmt-brass) 22%, transparent);
}

.bbmt-primary-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 14px;
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bbmt-ink);
  background: var(--bbmt-brass);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
/* Match .hp-btn-primary: darken the fill and flip the label white on hover
   (ink stays legible on terracotta at rest; ink on the darker hover fill is
   not — the mustard-pill contrast lesson). */
.bbmt-primary-btn:hover,
.bbmt-primary-btn:focus-visible { background: #C25E38; color: #fff; }
.bbmt-primary-btn:focus-visible { outline: 2px solid var(--bbmt-brass); outline-offset: 2px; }
.bbmt-primary-btn:disabled { opacity: 0.55; cursor: default; }

/* Ledger rows — the Stakkr dashed-divider pattern (spec .result-row). */
.bbmt-payslip {
  display: flex;
  flex-direction: column;
}

.bbmt-payslip-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 2px;
  font-size: 13.5px;
  border-top: 1.5px dashed var(--stakkr-line);
}
.bbmt-payslip-row:first-child { border-top: none; }

.bbmt-payslip-label { color: var(--bbmt-ink-soft); font-weight: 500; }
.bbmt-payslip-label .bbmt-hint { display: block; font-size: 11px; margin-top: 1px; font-weight: 400; }

.bbmt-payslip-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--bbmt-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; /* wrap rather than clip under a text-spacing override (WCAG 1.4.12) */
}

.bbmt-payslip-row.is-deduction .bbmt-payslip-value { color: var(--bbmt-stamp); }

.bbmt-payslip-row.is-total {
  border-top: 2px solid var(--stakkr-line-strong);
  margin-top: 2px;
  padding-top: 14px;
}
.bbmt-payslip-row.is-total .bbmt-payslip-label { color: var(--bbmt-ink); font-weight: 700; font-size: 14px; }
.bbmt-payslip-row.is-total .bbmt-payslip-value { font-size: 20px; color: var(--bbmt-brass); }

/* "Where it comes from" — the Stakkr stream funnel. The pill/bar visuals
   themselves are in the shared STAKKR BRAND block; this is just the layout
   wrapper for the width-scaled pill stack. */
.bbmt-stream-pills {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* pill width (set inline) tapers with the stream's share */
  gap: 7px;
}
.bbmt-stream-pills .bbmt-stream-pill { min-width: 150px; max-width: 100%; }

@media (max-width: 460px) {
  /* Too narrow for the taper to stay legible — square everything up. */
  .bbmt-stream-pills { align-items: stretch; }
  .bbmt-stream-pills .bbmt-stream-pill { width: 100% !important; }
}

.bbmt-stream-accordion {
  border: 1px solid var(--bbmt-line);
  border-radius: 8px;
  overflow: hidden;
}
.bbmt-stream-accordion + .bbmt-stream-accordion { margin-top: 10px; }

.bbmt-stream-accordion-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bbmt-surface-well);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.bbmt-stream-accordion-summary::-webkit-details-marker { display: none; }
.bbmt-stream-accordion-summary:hover { background: color-mix(in srgb, var(--bbmt-brass) 8%, var(--bbmt-surface-well)); }
.bbmt-stream-accordion-summary:focus-visible { outline: 2px solid var(--bbmt-brass); outline-offset: -2px; }

.bbmt-accordion-chevron {
  flex-shrink: 0;
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--bbmt-brass-bright);
  font-size: 11px;
}
.bbmt-accordion-chevron::before { content: "▸"; }
.bbmt-stream-accordion[open] .bbmt-accordion-chevron { transform: rotate(90deg); }

.bbmt-stream-accordion .bbmt-stream-group-label {
  margin: 0;
  flex: 1;
}

.bbmt-stream-group-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--bbmt-ink-soft);
}

.bbmt-stream-accordion-body {
  padding: 12px;
  border-top: 1px solid var(--bbmt-line);
}

.bbmt-stat-row.is-loose { margin-top: 12px; }
.bbmt-stream-option.is-loose { margin-top: 10px; }
.bbmt-inline-field.is-loose { margin-top: 18px; }

.bbmt-hint-row.is-warning { color: var(--bbmt-stamp); }
.bbmt-hint-row.is-positive { color: var(--bbmt-good); }

/* --- Cross-tool call-to-action (Tool 1 → 2 → 3 funnel) --- */

.bbmt-cta {
  display: block;
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid var(--bbmt-line);
  border-left: 3px solid var(--bbmt-brass);
  border-radius: 10px;
  background: var(--bbmt-surface-well);
  text-align: left;
  text-decoration: none;
  color: var(--bbmt-ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bbmt-cta:hover {
  border-color: var(--bbmt-brass);
  background: color-mix(in srgb, var(--bbmt-brass) 8%, var(--bbmt-surface-well));
}
.bbmt-cta[hidden] { display: none; }

/* Two related CTAs stacked (Tool 1: explore streams / take action) sit closer
 * together than a CTA does to the result block above it. */
.bbmt-cta-group .bbmt-cta + .bbmt-cta { margin-top: 10px; }

.bbmt-cta-text {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bbmt-ink);
}

.bbmt-cta-go {
  display: block;
  margin-top: 8px;
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bbmt-brass-bright);
}
.bbmt-cta:hover .bbmt-cta-go { color: var(--bbmt-brass-bright); }

/* --- Save-as-image action --- */

.bbmt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}

.bbmt-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bbmt-brass-bright);
  background: transparent;
  border: 1.5px solid var(--bbmt-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.bbmt-share-btn:hover { border-color: var(--bbmt-brass); color: var(--bbmt-brass-bright); }
.bbmt-share-btn:focus-visible { outline: 2px solid var(--bbmt-brass); outline-offset: 2px; }

.bbmt-share-msg {
  flex-basis: 100%;
  text-align: center;
  font-size: 12.5px;
  color: var(--bbmt-good);
  margin: 4px 0 0;
}
.bbmt-share-msg.is-warning { color: var(--bbmt-stamp); }
.bbmt-share-msg:empty { display: none; }

/* --- "Save to your dashboard" (writes a target / plan to bbmt-accounts) --- */

.bbmt-save-dashboard-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stakkr-ink);
  background: var(--bbmt-brass);
  border: 1.5px solid var(--bbmt-brass);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bbmt-save-dashboard-btn:hover,
.bbmt-save-dashboard-btn:focus-visible { background: #C25E38; border-color: #C25E38; color: #fff; }
.bbmt-save-dashboard-btn:focus-visible { outline: 2px solid var(--bbmt-brass); outline-offset: 2px; }
.bbmt-save-dashboard-btn[hidden] { display: none; }
.bbmt-save-dashboard-btn:disabled { opacity: 0.6; cursor: default; }

.bbmt-dashboard-save-msg {
  flex-basis: 100%;
  text-align: center;
  font-size: 12.5px;
  color: var(--bbmt-ink-soft);
  margin: 4px 0 0;
  min-height: 1.1em;
}
.bbmt-dashboard-save-msg.is-good { color: var(--bbmt-good, #4B7A4E); }
.bbmt-dashboard-save-msg.is-warning { color: var(--bbmt-stamp, #A63A28); }
.bbmt-dashboard-save-msg a { color: var(--bbmt-brass-bright); font-weight: 600; }

/* The "are you sure?" confirm panel (.bbmt-dashboard-save-confirm et al.) is
 * built by bbmt-accounts' bbmt-calc-bridge.js and styled by the stylesheet
 * that plugin enqueues alongside it — see bbmt-accounts/assets/css/bbmt-calc-bridge.css. */

/* --- "Start over" --- */

.bbmt-reset-link {
  display: block;
  margin: 24px auto 0;
  padding: 4px 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', ui-sans-serif, sans-serif;
  font-size: 12px;
  color: var(--bbmt-ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bbmt-reset-link:hover { color: var(--bbmt-stamp); }

/* --- Inline "how to" disclosure (Peak Performance step 1) --- */

.bbmt-help {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--bbmt-ink-soft);
  line-height: 1.5;
}
.bbmt-help summary {
  cursor: pointer;
  color: var(--bbmt-brass-bright);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--bbmt-brass) 70%, transparent);
  text-underline-offset: 2px;
  list-style: none;
}
.bbmt-help summary::-webkit-details-marker { display: none; }
.bbmt-help summary:hover { color: var(--bbmt-brass-bright); }
.bbmt-help summary:focus-visible { outline: 2px solid var(--bbmt-brass); outline-offset: 2px; }
.bbmt-help ul { margin: 10px 0 0; padding-left: 18px; }
.bbmt-help li { margin-bottom: 6px; }

/* --- Replace My Hours (Tool No. 4) --- */

/* A lighter grouping than a full numbered .bbmt-step, for the sub-blocks
 * within one step (student loan, hours-to-cut, add-a-stream). */
.bbmt-substep { margin-top: 20px; }

.bbmt-substep-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bbmt-brass-bright);
  margin: 0 0 10px;
}

.bbmt-inline-field .bbmt-prefix {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  color: var(--bbmt-ink-soft);
}
.bbmt-inline-field label .bbmt-unit { min-width: 0; }
.bbmt-payslip.is-loose { margin-top: 18px; }

.bbmt-slider-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.bbmt-slider-row .bbmt-field-input { flex-shrink: 0; }

/* "Replace all my hours instead" — the hours-to-cut controls are pinned to
   the current-hours value and locked. */
[data-role="replaceAllField"] { margin-bottom: 8px; }
[data-role="replaceAllField"]:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.bbmt-substep.is-replace-all .bbmt-slider-row { opacity: 0.55; }
.bbmt-substep.is-replace-all .bbmt-slider,
.bbmt-substep.is-replace-all input:disabled { cursor: not-allowed; }

.bbmt-slider {
  flex: 1;
  min-width: 160px;
  height: 24px;            /* 24px pointer target (WCAG 2.5.8); track drawn thin below */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  outline: none;
}
.bbmt-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--bbmt-surface-well);
  border: 1px solid var(--bbmt-line);
  border-radius: 999px;
}
.bbmt-slider::-moz-range-track {
  height: 6px;
  background: var(--bbmt-surface-well);
  border: 1px solid var(--bbmt-line);
  border-radius: 999px;
}
.bbmt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;       /* centre the thumb on the 6px track */
  border-radius: 50%;
  background: var(--bbmt-brass);
  border: 2px solid var(--bbmt-surface);
  cursor: pointer;
  box-shadow: 0 1px 3px rgb(var(--bbmt-shadow) / 0.4);
}
.bbmt-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bbmt-brass);
  border: 2px solid var(--bbmt-surface);
  cursor: pointer;
}
.bbmt-slider:focus-visible { outline: 2px solid var(--bbmt-brass); outline-offset: 2px; }

/* The sticky strip can otherwise cover a field the user tabs to (WCAG 2.4.11).
 * Give focusable things in this tool clearance when scrolled into view. */
.bbmt-calculator[data-calc="replace-my-hours"] input,
.bbmt-calculator[data-calc="replace-my-hours"] select,
.bbmt-calculator[data-calc="replace-my-hours"] summary,
.bbmt-calculator[data-calc="replace-my-hours"] button,
.bbmt-calculator[data-calc="replace-my-hours"] .bbmt-slider {
  scroll-margin-top: 88px;
}

/* Live gap strip that stays pinned while the user moves the inputs. */
.bbmt-sticky-summary {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  gap: 8px;
  margin: 0 0 28px;
  padding: 12px 10px;
  background: var(--bbmt-surface);
  border: 1px solid var(--bbmt-brass);
  border-radius: 10px;
  box-shadow: 0 8px 20px -12px rgb(var(--bbmt-shadow) / 0.4);
}

.bbmt-sticky-col {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.bbmt-sticky-col.is-gap { border-left: 1px solid var(--bbmt-line); }

.bbmt-sticky-n {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  color: var(--bbmt-ink);
  line-height: 1.2;
}
.bbmt-sticky-col.is-positive .bbmt-sticky-n { color: var(--bbmt-good); }
.bbmt-sticky-col.is-warning .bbmt-sticky-n { color: var(--bbmt-stamp); }

.bbmt-sticky-l {
  display: block;
  font-size: 10.5px;
  color: var(--bbmt-ink-soft);
  margin-top: 2px;
}

.bbmt-result.is-positive .bbmt-figure { color: var(--bbmt-good); }
.bbmt-result.is-warning .bbmt-figure { color: var(--bbmt-stamp); }

/* Was 460px — raised so large-phone landscape, small tablets and ~150% desktop
 * zoom also get the stacked label/input layout instead of a crushed single row. */
@media (max-width: 600px) {
  .bbmt-card { padding: 32px 22px 30px; }
  .bbmt-perforation { margin-left: -22px; margin-right: -22px; }
  /* Stack every label above its input rather than letting a wide input
   * cluster crush the label into one-word-per-line. */
  .bbmt-field { flex-wrap: wrap; }
  .bbmt-field > label { flex-basis: 100%; }
  .bbmt-field-input { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .bbmt-inline-field { flex-wrap: wrap; }
  .bbmt-inline-field > label { flex-basis: 100%; }
  .bbmt-timeslot-row { flex-wrap: wrap; }
  .bbmt-sticky-n { font-size: 15px; }
}

/* Respect a reduced-motion preference — the tools only use short cosmetic
 * transitions, so dropping them all is safe (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .bbmt-bar-segment { transition: none !important; }
  .bbmt-calculator *,
  .bbmt-calculator *::before,
  .bbmt-calculator *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}