/* ──────────────────────────────────────────────────────────────────────────
   srg-budget.css — form 3, Monthly Budget Worksheet  (P3 / D31)
   ──────────────────────────────────────────────────────────────────────────
   D31: the worksheet is restyled to the SRG design system rather than shipping
   the standalone file's own look. Structure is preserved; the palette, the two
   brand faces and the focus idiom come from portal.css.

   TWO HARD RULES THIS FILE EXISTS TO ENFORCE

   1. NO :root. The standalone worksheet declared its own :root with
      --navy:#12304B. Loaded next to portal.css that would override the portal's
      --navy for the WHOLE app and silently revert D28 (#1F3B85). Tokens here are
      declared on #bw-root, named --bw-*, and inherit from the portal's tokens
      via var() so a future token change still propagates.

   2. EVERY selector is scoped to #bw-root. The worksheet was authored as a whole
      page, so it styled bare `section`, `button`, `input, select, button` and
      the classes .field .client .note .sub — four of which collide with
      portal.css (measured: .field appears in 15 places in the static portal
      markup plus every field portal.js generates, and there are 82 buttons and
      32 inputs in the shell). Unscoped, this file would restyle the portal.
      #bw-root also gives the collisions specificity 1,0,x against portal's 0,1,x
      so the worksheet wins inside its own subtree and nowhere else.

   Class inventory is exact: 28 classes from the markup plus the 5 the script
   assigns at runtime (on · pos · neg · over · warn). Nothing here is unused, and
   every class the markup uses is defined (QA gate 6).
   ───────────────────────────────────────────────────────────────────────── */

/* ── the one deliberate exception to the #bw-root scoping rule ──────────────
   position:sticky resolves against its nearest ancestor with a non-visible
   overflow. portal.css sets .form-card{overflow:hidden} to clip the card's 14px
   corners, which made that card the scrollport — so the running-total bar was
   never sticky at all. Measured on the public path: scroll 1200px and the tally
   went with it, to top:-1017 instead of 0.

   Releasing overflow on the worksheet's own card fixes it. It is a separate
   class (f3html emits `class="form-card bw-card"`) rather than a change to
   .form-card, so forms 0-2 keep their clipping untouched. The header gets the
   card's top radii back by hand, since nothing is clipping them now. */
.bw-card { overflow: visible; }
.bw-card > .form-header { border-radius: 14px 14px 0 0; }

#bw-root {
  /* SRG values, reached through portal.css so they track the design system.
     Fallbacks are the literal brand values in case this file is ever loaded
     without portal.css. */
  --bw-navy:    var(--navy, #1F3B85);        /* D28 — brand book, not the WP theme */
  --bw-accent:  var(--accent, #1B6AAD);
  --bw-gold:    var(--gold, #9CCDEC);        /* Sterling has no third colour; pale brand blue */
  --bw-soft:    var(--surface2, #EFF7FA);
  --bw-ink:     var(--text, #1F2124);
  --bw-ink2:    var(--text2, #33373D);
  --bw-pewter:  var(--text3, #8A9199);
  --bw-line:    var(--border, #CFE0EC);
  --bw-pos:     var(--success, #16A34A);
  --bw-neg:     var(--error, #DC2626);
  --bw-radius:  var(--radius-sm, 7px);

  /* Numerals are set in Montserrat, not the display serif. Cormorant is a light
     display face; 83 right-aligned money fields in it read badly and its figures
     are not reliably tabular. Serif is reserved for headings. */
  --bw-num:     var(--font-head, 'Montserrat', sans-serif);

  font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  color: var(--bw-ink);
  font-size: 15px;
  line-height: 1.45;
}

/* The standalone page's .wrap owned the viewport: max-width 880px plus its own
   80px bottom padding. Inside .form-body (padding 24px) that double-pads and
   fights .form-inner's 780px cap, so it is neutralised to a plain block. */
#bw-root .wrap { max-width: none; margin: 0; padding: 0; }

/* ── sticky running tally ─────────────────────────────────────────────────
   Verified in UAT: sticky binds to #formContentScroll (the portal's scrolling
   form pane) in the admin path, and to the document in the public token path.
   Both are correct.

   NO NEGATIVE MARGINS. The first version used `margin: -24px -24px 0` to bleed
   the bar flush to the .form-body edge. That hard-codes the parent's padding,
   and this form mounts in TWO different containers: .form-body (padding 24px,
   admin) and a bare div in #extContent (no padding, public link). In the second
   it bleeds 24px past its container for no reason, and in the first it only
   looked right because .form-card{overflow:hidden} happened to clip it —
   measured as 24px of subtree overflow. A sticky bar must not depend on what it
   is nested inside. */
#bw-root .tally {
  position: sticky; top: 0; z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--bw-line);
  box-shadow: 0 1px 6px rgba(31, 59, 133, .07);
  border-radius: var(--bw-radius) var(--bw-radius) 0 0;
}
#bw-root .tally-in {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px;
}
#bw-root .fig { display: flex; flex-direction: column; min-width: 104px; }
#bw-root .fig .lbl {
  font-family: var(--font-head, 'Montserrat', sans-serif);
  font-size: 9.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--bw-pewter);
}
#bw-root .fig .amt {
  font-family: var(--bw-num); font-weight: 600; font-size: 19px;
  font-variant-numeric: tabular-nums; color: var(--bw-navy);
}
#bw-root .fig.left .amt { font-size: 22px; }
#bw-root .fig.left .amt.pos { color: var(--bw-pos); }
#bw-root .fig.left .amt.neg { color: var(--bw-neg); }
#bw-root .spacer { flex: 1; }
#bw-root .barwrap { flex-basis: 100%; display: flex; align-items: center; gap: 10px; }
#bw-root .barwrap small {
  font-family: var(--font-head, 'Montserrat', sans-serif);
  font-size: 10px; color: var(--bw-pewter); white-space: nowrap;
}
#bw-root .bar {
  height: 7px; border-radius: 99px; background: var(--bw-soft);
  overflow: hidden; display: flex; width: 100%; margin-top: 2px;
}
#bw-root .bar span {
  display: block; background: var(--bw-accent); transition: width .25s ease;
}
#bw-root .bar span.over { background: var(--bw-neg); }

/* ── guidance + compatibility notices ────────────────────────────────────── */
#bw-root .howto {
  background: #fff; border: 1px solid var(--bw-line);
  border-left: 3px solid var(--bw-gold);
  border-radius: var(--bw-radius); padding: 16px 18px; margin: 24px 0 8px;
}
#bw-root .howto h2 {
  font-family: var(--font-display, 'Cormorant', Georgia, serif);
  font-size: 22px; font-weight: 600; color: var(--bw-navy);
  margin: 0 0 10px; letter-spacing: 0; text-transform: none;
}
#bw-root .howto ul { margin: 0; padding-left: 22px; font-size: 14px; color: var(--bw-ink2); }
#bw-root .howto li { margin-bottom: 7px; }
#bw-root .howto strong { color: var(--bw-navy); font-weight: 600; }

#bw-root .nojs {
  background: #FFF7ED; border: 1px solid var(--warning, #D97706);
  border-radius: var(--bw-radius); padding: 14px 16px; margin: 16px 0;
  font-size: 13.5px; color: #7C4A03;
}
#bw-root #compat { display: none; }
#bw-root #compat.on { display: block; }

#bw-root .hint {
  display: block; font-size: 11.5px; line-height: 1.35;
  color: var(--bw-pewter); margin-top: 3px; font-weight: 400;
}
#bw-root .secnote {
  margin: 10px 0 4px; padding: 10px 12px; background: var(--bw-soft);
  border-radius: var(--bw-radius); font-size: 12.5px; color: var(--bw-ink2);
}

/* ── client block ────────────────────────────────────────────────────────── */
#bw-root .client {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0 4px;
}
#bw-root .field label {
  display: block;
  font-family: var(--font-head, 'Montserrat', sans-serif);
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bw-pewter); margin-bottom: 4px;
}
#bw-root .field input,
#bw-root .field select {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 10px;
  border: 1px solid var(--bw-line); border-radius: var(--bw-radius);
  background: #fff; color: var(--bw-ink);
}

/* ── sections ────────────────────────────────────────────────────────────── */
#bw-root section {
  background: #fff; border: 1px solid var(--bw-line);
  border-radius: var(--bw-radius); margin-top: 20px; overflow: hidden;
}
#bw-root .sec-head {
  display: flex; align-items: baseline; gap: 12px; padding: 13px 18px;
  /* Matches .form-header's treatment so the section bands read as the same
     system as the card they sit in. */
  background: linear-gradient(90deg, var(--bw-navy), var(--navy-mid, #16558F));
  color: #fff;
}
#bw-root .sec-head h3 {
  margin: 0; flex: 1;
  font-family: var(--font-display, 'Cormorant', Georgia, serif);
  font-weight: 600; font-size: 19px; letter-spacing: .01em;
}
#bw-root .sec-head .sub {
  font-family: var(--bw-num); font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums; color: #fff;
}
#bw-root .sec-head .share {
  font-family: var(--font-head, 'Montserrat', sans-serif);
  font-size: 9.5px; font-weight: 500; color: var(--slate-light, #A8C4DA);
  letter-spacing: .05em; text-transform: uppercase;
}
#bw-root .rows { padding: 6px 18px 14px; }

/* 1fr 150px 1fr was drawn for an 880px page. .form-inner caps forms at 780px,
   so the amount column is pinned and the note column given the remainder. */
#bw-root .row {
  display: grid; grid-template-columns: minmax(0, 1.15fr) 132px minmax(0, 1fr);
  gap: 14px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid var(--bw-soft);
}
#bw-root .row:last-child { border-bottom: none; }
#bw-root .row label { font-size: 14px; color: var(--bw-ink); }

#bw-root .money { position: relative; }
#bw-root .money span {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--bw-pewter); font-size: 14px; pointer-events: none;
}
#bw-root .money input {
  width: 100%; font: inherit; font-family: var(--bw-num);
  font-size: 15px; font-variant-numeric: tabular-nums; text-align: right;
  padding: 9px 11px 9px 26px; border: 1px solid var(--bw-line);
  border-radius: var(--bw-radius); background: #fff; min-height: 42px;
  color: var(--bw-ink);
}
#bw-root .note input {
  width: 100%; font: inherit; font-size: 12.5px; color: var(--bw-ink2);
  border: 1px solid transparent; border-bottom: 1px solid var(--bw-line);
  border-radius: 0; background: transparent; min-height: 38px; padding: 8px 10px;
}
#bw-root .note input::placeholder { color: var(--bw-pewter); }

/* Native-control reset, scoped. Unscoped this was `input, select, button {...}`
   and would have restyled all 32 inputs and 82 buttons in the portal shell. */
#bw-root input,
#bw-root select {
  -webkit-appearance: none; appearance: none;
  border-radius: var(--bw-radius); color: var(--bw-ink); background-color: #fff;
}
#bw-root select { background-image: none; }
#bw-root input::-webkit-outer-spin-button,
#bw-root input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* SRG focus idiom: accent border + soft ring (portal.css:168), not the
   standalone file's 2px gold outline. */
#bw-root input:focus,
#bw-root select:focus {
  outline: none; border-color: var(--bw-accent);
  box-shadow: 0 0 0 3px rgba(27, 106, 173, .12);
}
#bw-root .note input:focus {
  border-color: transparent; border-bottom-color: var(--bw-accent);
  box-shadow: 0 2px 0 0 rgba(27, 106, 173, .12);
}
#bw-root input:focus-visible,
#bw-root select:focus-visible { border-color: var(--bw-accent); }

/* Read-only render (portal.js passes isReadOnly=true for a stored submission).
   portal.css:171 already styles input[readonly], but the scoped rules above
   outrank it, so a stored worksheet would look editable without this. */
#bw-root input[readonly],
#bw-root select[disabled] {
  background: var(--bw-soft); color: var(--slate, #5A7183);
  font-weight: 600; cursor: default; border-color: var(--bw-line);
}
#bw-root .note input[readonly] { background: transparent; font-weight: 500; }

/* ── snapshot ────────────────────────────────────────────────────────────── */
#bw-root .final {
  margin-top: 26px; border-radius: var(--bw-radius); padding: 22px 20px;
  background: linear-gradient(135deg, var(--bw-navy), var(--navy-mid, #16558F));
  color: #fff;
}
#bw-root .final h3 {
  margin: 0 0 14px;
  font-family: var(--font-display, 'Cormorant', Georgia, serif);
  font-weight: 600; font-size: 23px;
}
#bw-root .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#bw-root .card {
  background: rgba(255, 255, 255, .09); border-radius: var(--bw-radius);
  padding: 13px 14px;
}
#bw-root .card .lbl {
  font-family: var(--font-head, 'Montserrat', sans-serif);
  font-size: 9.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--slate-light, #A8C4DA);
}
#bw-root .card .amt {
  font-family: var(--bw-num); font-weight: 700; font-size: 21px;
  font-variant-numeric: tabular-nums; margin-top: 2px; color: #fff;
}
#bw-root .card .amt.pos { color: var(--mint-hi, #9CCDEC); }
#bw-root .card .amt.neg { color: #F0A79E; }
#bw-root .card .yr {
  font-family: var(--font-head, 'Montserrat', sans-serif);
  font-size: 10.5px; color: var(--slate-light, #A8C4DA);
  font-variant-numeric: tabular-nums;
}

/* Status line. Lives in .final now: its original home was the "Send it back to
   Sterling" block, which D30 removes. say() is ported unchanged and still
   writes here — P4 wires it to submit validation. */
#bw-root .said {
  font-size: 12.5px; color: var(--mint-hi, #9CCDEC);
  margin-top: 14px; min-height: 1.2em;
}
#bw-root .said.warn { color: #F0A79E; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #bw-root .row { grid-template-columns: minmax(0, 1fr) 128px; }
  #bw-root .note { grid-column: 1 / -1; margin-top: 2px; }
}
@media (max-width: 640px) {
  #bw-root .tally-in { padding: 8px 10px; }
  #bw-root .client { grid-template-columns: 1fr; }
  #bw-root .rows { padding: 4px 14px 12px; }
  #bw-root .row { grid-template-columns: minmax(0, 1fr) 118px; gap: 8px; padding: 10px 0; }
  /* 16px stops iOS zooming the page on focus. */
  #bw-root .money input,
  #bw-root .note input,
  #bw-root .field input,
  #bw-root .field select { font-size: 16px; }
  #bw-root .money input { padding: 11px 10px 11px 24px; }
  #bw-root .grid3 { grid-template-columns: 1fr; }
  #bw-root .fig { min-width: 72px; }
  #bw-root .fig .amt { font-size: 16px; }
  #bw-root .fig.left .amt { font-size: 18px; }
  #bw-root .sec-head { padding: 11px 14px; }
  #bw-root .sec-head h3 { font-size: 17px; }
}
@media (max-width: 400px) {
  #bw-root .row { grid-template-columns: 1fr; gap: 6px; }
  #bw-root .money { max-width: 180px; }
  #bw-root .money input { text-align: left; padding-left: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  #bw-root * { transition: none !important; }
}

/* ── print ───────────────────────────────────────────────────────────────── */
@media print {
  #bw-root .tally { display: none; }
  #bw-root section { break-inside: avoid; border-color: #999; }
  #bw-root .sec-head,
  #bw-root .final {
    background: #1F3B85 !important;          /* D28 — was the old #12304B */
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #bw-root .money input,
  #bw-root .note input { border: none; background: transparent; }
}