/* Compass — compass-fields.css (2026-10-05). Short labels: units drawn inside the boxes (js/42 builds .unit-box),
   and yes/no questions on one line — a short name on the left, a compact No | Yes switch on the right. */
.unit-box { position:relative; display:block; height:max-content !important; flex:none !important; align-self:start; } /* a grid/flex field must not stretch it, or the $ slides off the input */
.unit-box > .unit-pre, .unit-box > .unit-suf { position:absolute; top:50%; transform:translateY(-50%); color:var(--muted2);
  font-size:14px; line-height:1; pointer-events:none; z-index:2; font-variant-numeric:tabular-nums; white-space:nowrap; }
.unit-box > .unit-pre { left:12px; }
.unit-box > .unit-suf { right:12px; }
.unit-box > input::-webkit-outer-spin-button, .unit-box > input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.unit-box > input[type=number] { -moz-appearance:textfield; appearance:textfield; }

/* Yes/no questions */
.field:not(.po-hide):not([hidden]):has(> .toggle-row > [id$="Yes"]), .field:not(.po-hide):not([hidden]):has(> .rd-spouse-row) {
  display:flex !important; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; }
.field:has(> .toggle-row > [id$="Yes"]) > label, .field:has(> .rd-spouse-row) > label { flex:1 1 auto; margin:0 !important; }
.field:has(> .toggle-row > [id$="Yes"]) > .toggle-hint { display:none !important; }
.field:has(> .toggle-row > [id$="Yes"]) > .toggle-row, .field > .rd-spouse-row {
  display:inline-flex !important; flex:0 0 auto; width:auto !important; margin:0 !important; gap:12px !important; } /* No and Yes apart (2026-10-15: "buttons are to close together") */
.field:has(> .toggle-row > [id$="Yes"]) > .toggle-row > .toggle-btn, .field > .rd-spouse-row > .toggle-btn {
  flex:0 0 auto !important; min-width:58px; padding:7px 14px !important; height:auto !important; text-align:center; }
.field:has(> .toggle-row > [id$="Yes"]) > :not(label):not(.toggle-row):not(.toggle-hint), .field:has(> .rd-spouse-row) > :not(label):not(.toggle-row) { flex-basis:100%; }

/* Outlined fields: the name sits small inside the top of its box (js/42 marks them .ofl). In the compassAppRefresh
   layer: the themes' !important label rules live in layers, and a layered !important beats an unlayered one. */
@layer compassAppRefresh {
.ofl { position:relative; }
html body #toolView .ofl > label:first-child { position:absolute !important; top:7px !important; left:13px !important; max-width:calc(100% - 26px); z-index:1; margin:0 !important;
  display:block !important; min-height:0 !important; height:auto !important; font-size:11.5px !important; font-weight:600 !important; line-height:1.25 !important; color:var(--muted2) !important; -webkit-text-fill-color:var(--muted2) !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:0 !important; text-transform:none !important;
  border-bottom:0 !important; padding:0 !important; background:none !important; }
html body #toolView .ofl > label.has-tip:first-child { text-decoration:underline dotted; text-underline-offset:3px; text-decoration-color:var(--border); }
html body #toolView .ofl-sel > label:first-child { max-width:calc(100% - 44px); }
html body #toolView .ofl > label.ofl-tight:first-child .fld-opt { display:none !important; }
html body #toolView .ofl > label:first-child .fld-opt { font-size:10px !important; padding:0 5px !important; margin-left:4px; vertical-align:1px; }
.ofl > .unit-box > .unit-pre, .ofl > .unit-box > .unit-suf { top:29px !important; bottom:auto !important; transform:none !important; }
}
/* Filing status needs room for "Married Filing Jointly" on a wide grid. */
@media (min-width:700px){ #toolView .inputs-grid > .field:has(> #filingStatus) { grid-column:span 2; } }

/* Account editor (js/accounts.js, .aw): the same outlined look without changing its markup — the name is pulled down
   into the top of the box that follows it (negative margin), and the box makes room under it. */
@layer compassAppRefresh {
html body .aw .aw-lbl:has(+ .aw-input, + .aw-money) { position:relative; z-index:1; display:block; box-sizing:border-box; height:27px;
  margin:14px 0 -27px !important; padding:9px 17px 0 !important; font-size:11.5px !important; font-weight:600 !important; line-height:1.25 !important;
  color:var(--muted2) !important; -webkit-text-fill-color:var(--muted2) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
html body .aw .aw-lbl:has(+ .aw-input, + .aw-money) .aw-opt { font-size:10.5px !important; font-weight:500 !important; }
html body .aw .aw-lbl + .aw-input { padding-top:25px !important; padding-bottom:8px !important; height:auto !important; min-height:58px !important; }
html body .aw .aw-lbl + .aw-money { height:auto !important; min-height:66px !important; padding-top:22px !important; padding-bottom:6px !important; }
html body .aw .aw-lbl + .aw-money.aw-pct { min-height:58px !important; padding-top:24px !important; }
html body .aw .aw-add-row .aw-lbl:has(+ .aw-input) { margin-top:0 !important; }
}

/* Page tops (2026-10-06, user: smaller tops, charts nearer the top — Expense Planner, Taxes, Cash Flow, Net Worth):
   a short title with one line under it and "How this page works" on the title's row; the first section heading,
   which repeated the page name, is hidden (.pg-first); section headings are smaller. Phones: the top bar names the
   page, so only the links show. */
@layer compassNavTop {
  html body .hero.pg-hero { display:flex !important; flex-wrap:wrap; align-items:baseline; gap:2px 14px; padding:4px 2px 6px !important; margin:0 0 8px !important; border:0 !important; min-height:0 !important; background:none !important; }
  html body .hero.pg-hero > .tag { display:none !important; }
  html body .hero.pg-hero::before, html body .hero.pg-hero::after { display:none !important; content:none !important; } /* the old hero's decorative glow hung off the right edge (Projections scrolled sideways) */
  html body .hero.pg-hero :is(h1,.pg-h1) { font-size:22px !important; line-height:1.25 !important; margin:0 !important; }
  html body .hero.pg-hero .hero-sub { flex-basis:100%; order:3; margin:0 !important; font-size:13px !important; line-height:1.45 !important; color:var(--c-slate-55) !important; max-width:none !important; }
  html body .hero.pg-hero .ug-pagehelp { order:2; margin:0 0 0 auto !important; }
  html body .hero.pg-hero .xp-off-link + .ug-pagehelp, html body .hero.pg-hero .ug-pagehelp:not(:only-of-type) { margin-left:0 !important; }
  html body :is(#expensesView, #taxesView, #cashflowView, #networthView, #resultsView, #paycheckView, #rothView, #summaryView) .section-title.pg-first { display:none !important; }
  html body :is(#expensesView, #taxesView, #cashflowView, #networthView, #resultsView, #paycheckView, #rothView, #summaryView) .section-title h2 { font-size:19px !important; line-height:1.3 !important; }
  html body :is(#expensesView, #taxesView, #cashflowView, #networthView, #resultsView, #paycheckView, #rothView, #summaryView) .section-title { margin-top:18px !important; margin-bottom:10px !important; padding-bottom:6px !important; }
  /* Plan Summary: the report has its own title block, so "How this page works" sits in its top-right corner */
  html body #summaryView > .ug-pagehelp-row { margin:0 0 -46px !important; padding:14px 18px 0 0; position:relative; z-index:3; pointer-events:none; }
  html body #summaryView > .ug-pagehelp-row .ug-pagehelp { pointer-events:auto; }
  @media (max-width:700px){
    html body .hero.pg-hero :is(h1,.pg-h1), html body .hero.pg-hero .hero-sub { display:none !important; }
    html body .hero.pg-hero { align-items:center; justify-content:space-between; padding:2px 2px 4px !important; margin-bottom:6px !important; }
    html body .hero.pg-hero .ug-pagehelp { order:1; margin:0 !important; }
  }
}

/* Outlined fields' room for the name inside the box (js/42, 2026-10-08; was an inline !important style). */
@layer compassNavTop { html body .ofl-box { padding-top:23px !important; padding-bottom:7px !important; min-height:54px !important; } }

/* Who's in the plan, the state, what the plan really spends (js/53, 2026-10-09). Theme tokens only. */
.hh-box { margin:0 0 14px; }
.hh-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hh-k { font-size:13px; font-weight:600; color:var(--c-slate-45); }
.hh-seg { display:inline-flex; }
.hh-note { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:10px 0 0; padding:9px 12px; border-radius:10px; background:var(--c-slate-95b); color:var(--c-slate-35); font-size:13px; line-height:1.45; }
.hh-note.hh-warn { background:rgba(var(--c-amber-55-rgb), .16); color:var(--c-slate-25); }
.hh-act { min-height:30px; padding:0 12px; border:1px solid var(--c-gray-90); border-radius:8px; background:var(--c-gray-99); color:var(--c-slate-35); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.hh-act:hover { border-color:var(--c-blue-60d); color:var(--c-blue-60d); }
.hh-spend { margin:14px 0 0; padding:9px 12px; border-radius:10px; background:var(--c-slate-95b); color:var(--c-slate-35); font-size:13px; line-height:1.45; }
.hh-spend b { color:var(--c-slate-25); }
.hh-spend .hh-sub { color:var(--c-slate-55); }
.hh-spend[hidden], .hh-note[hidden], #hhStateField[hidden] { display:none !important; }
/* under Filing status, full width of the fields grid (2026-10-09) */
.hh-fs-note { grid-column:1 / -1; margin:-4px 0 4px; }
#hhBox { grid-column:1 / -1; } /* above Filing status, full width (2026-10-10) */

/* Plan steps (js/19, 2026-10-09): a step passed with things missing shows how many, in amber; "optional" on step 3. */
.compass-plan-step > span:not(.compass-step-number) { display:inline-flex; flex-direction:column; align-items:flex-start; position:relative; z-index:1; padding-right:8px; background:var(--c-gray-99); }
.compass-plan-step.is-active > span:not(.compass-step-number) { background:transparent; }
.compass-plan-step .compass-step-todo { display:block; margin-top:1px; font-size:11.5px; font-weight:600; color:var(--c-slate-55); line-height:1.2; }
.compass-plan-step .compass-step-todo[hidden] { display:none; }
.compass-plan-step[hidden] { display:none !important; } /* no spouse: no step 2 in the bar (2026-10-11: it showed as "Your spouse ✓") */
.compass-plan-step.is-todo .compass-step-todo, .compass-plan-step.is-active .compass-step-todo { color:var(--c-orange-65b); }
.compass-plan-step.is-todo .compass-step-number { background:rgba(var(--c-amber-55-rgb), .2) !important; color:var(--c-orange-65b) !important; border-color:transparent !important; }

/* "Future dollars" in the page header while it's on (js/45, 2026-10-09) */
.dollar-badge { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px; margin-right:8px; border:1px solid rgba(var(--c-amber-55-rgb), .5); border-radius:999px;
  background:rgba(var(--c-amber-55-rgb), .14); color:var(--c-slate-25); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.dollar-badge::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--c-amber-55); }
.dollar-badge[hidden] { display:none; }

/* Health care check in the Spending card (js/53, 2026-10-09). Theme tokens only. */
.hc-box { margin:16px 0 0; padding:14px 16px; border:1px solid var(--c-gray-90); border-radius:12px; background:var(--c-gray-99); }
.hc-box[hidden] { display:none !important; }
.hc-box, .hc-box p, .hc-box .hc-q { opacity:1 !important; } /* a rule for the spending card's notes faded it */
.hc-box { margin:4px 0 18px; }
.hc-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; font-size:14px; color:var(--c-slate-25); }
.hc-tag { margin-left:auto; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:700; background:rgba(var(--c-amber-55-rgb), .18); color:var(--c-orange-65b); }
.hc-tag.ok { background:rgba(var(--c-teal-65b-rgb), .15); color:var(--c-teal-55b); }
.hc-line { margin:0; font-size:13px; line-height:1.6; color:var(--c-slate-35); }
.hc-line select { display:inline-block !important; width:auto !important; max-width:100%; margin:0 2px !important; height:30px !important; min-height:30px !important; padding:0 26px 0 8px !important; font-size:13px !important; border-radius:8px !important; vertical-align:baseline; }
.hc-who { margin:6px 0 6px; padding-left:18px; font-size:13px; line-height:1.6; color:var(--c-slate-35); } /* each person's Medicare from 65 (2026-10-11) */
.hc-q { display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; margin-top:12px; font-size:13px; font-weight:600; color:var(--c-slate-30); }

.sa-none { font-size:24px; letter-spacing:-.3px; } /* "Not by 75" (js/38) */