/* Additional Plan Options as one row per option (2026-09-24) — see js/22-plan-options.js. */
.po-hidden-tiles { display:none !important; }
.po-list { display:flex; flex-direction:column; gap:8px; margin:6px 0 18px; }
.po-group { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:14px 2px 2px; }
.po-group:first-child { margin-top:0; }
.po-group-name { font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--c-slate-45); }
.po-group-sub { flex-basis:100%; font-size:12.5px; color:var(--c-slate-60); } /* always under the name (2026-10-02) */
.po-row { border:1px solid var(--c-gray-90); border-radius:14px; background:var(--c-gray-99); overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.po-row.is-on { border-color:var(--c-sage-85b); }
.po-row.is-open { box-shadow:0 8px 22px rgba(var(--c-shadow-rgb), 0.07); }
.po-head { display:flex; align-items:center; gap:10px; padding:10px 12px 10px 14px; }
.po-row.is-on .po-head { background:var(--c-gray-99); }
.po-main { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px; padding:2px 0; border:0; background:transparent; color:var(--c-slate-30); font:inherit; text-align:left; cursor:pointer; }
.po-icon { flex:0 0 36px; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--c-gray-95); color:var(--c-slate-60); }
.po-row.is-on .po-icon { background:var(--c-sage-95); color:var(--c-teal-50); }
.po-icon svg { width:20px; height:20px; }
.po-icon svg * { stroke:currentColor; }
.po-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.po-text strong { font-size:15px; font-weight:750; line-height:1.3; }
.po-sum { font-size:13px; line-height:1.4; color:var(--c-slate-60); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.po-row.is-on .po-sum { color:var(--c-teal-45); font-weight:600; }
.po-switch { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:4px 6px; border:0; background:transparent; font:inherit; font-size:12.5px; font-weight:700; color:var(--c-slate-60); cursor:pointer; }
.po-switch-track { position:relative; width:42px; height:24px; border-radius:999px; background:var(--c-gray-90); transition:background .15s; }
.po-switch-knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--c-gray-99); box-shadow:0 1px 3px rgba(var(--c-shadow-rgb), 0.2); transition:left .15s; }
.po-switch[aria-checked="true"] { color:var(--c-teal-50); }
.po-switch[aria-checked="true"] .po-switch-track { background:var(--c-teal-50); }
.po-switch[aria-checked="true"] .po-switch-knob { left:21px; }
.po-switch:focus-visible, .po-chev:focus-visible, .po-main:focus-visible { outline:2px solid var(--c-teal-50); outline-offset:2px; border-radius:8px; }
.po-switch-text { min-width:22px; text-align:left; }
.po-chev { flex:0 0 36px; width:36px; height:36px; border:1px solid var(--c-gray-90); border-radius:10px; background:var(--c-gray-99); color:var(--c-slate-45); font:inherit; font-size:20px; line-height:1; cursor:pointer; transition:transform .15s; }
.po-chev[hidden] { display:inline-block; visibility:hidden; }
.po-row.is-open .po-chev { transform:rotate(90deg); }
.po-body { padding:6px 16px 16px; border-top:1px solid var(--c-gray-95); }
.po-body[hidden] { display:none; }
.po-elsewhere { margin:10px 0; font-size:13.5px; color:var(--c-slate-45); }
.po-hide { display:none !important; }
@media (max-width:700px) {
  .po-head { padding:10px; gap:6px; }
  .po-icon { display:none; }
  .po-sum { white-space:normal; }
  .po-switch-text { display:none; }
}
/* The moved panels keep their fields, not their old headers, summaries or spacing. */
@layer compassNavTop {
  .po-body > [id^="adv"][id$="Wrap"] { margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important; }
  .po-body > [id^="adv"][id$="Wrap"] > .section-title,
  .po-body > [id^="adv"][id$="Wrap"] > .rn-settings-summary { display:none !important; }
  .po-body .panel { margin-top:10px !important; }
  .po-about > .section-desc { margin:0 0 6px !important; padding:10px 12px !important; border-radius:10px !important; background:var(--c-gray-99) !important; font-size:13px !important; line-height:1.55 !important; max-width:none !important; }
}
.po-about { margin:10px 0 4px; }
.po-about > summary { display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none; font-size:13px; font-weight:700; color:var(--c-teal-50); padding:4px 0; }
.po-about > summary::-webkit-details-marker { display:none; }
.po-about > summary::before { content:'i'; display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%; border:1.4px solid currentColor; font-size:11px; font-weight:800; font-style:normal; }
.po-about[open] > summary { margin-bottom:6px; }
.po-about > .section-desc { margin:0 0 6px !important; padding:10px 12px; border-radius:10px; background:var(--c-gray-99); font-size:13px; line-height:1.55; }
/* Self-employment estimate under the fields (2026-09-24, js/14 updateSelfEmpEstimate) */
.se-estimate:empty { display:none; }
.se-estimate { margin:12px 0 4px; padding:10px 14px; border-radius:12px; background:var(--c-gray-99); border:1px solid var(--c-sage-90); font-size:13px; line-height:1.55; color:var(--c-sage-35); }
.se-estimate p { margin:2px 0; }

/* First result: health costs are included (Health care & state tax on by default, 2026-10-02, js/05) */
.qs-included { display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px 12px; border-radius:12px; background:var(--c-gray-95); }
.qs-included > div { flex:1; min-width:0; }
.qs-included b { color:var(--c-sage-30); }
.qs-included > div > b { display:block; font-size:13px; }
.qs-included span { display:block; font-size:12.5px; line-height:1.45; color:var(--c-slate-50); }

/* Health care & state tax as three cards (2026-10-02, js/22) */
.th-block { margin:12px 0; padding:14px 16px; border:1px solid var(--c-gray-90); border-radius:14px; background:var(--c-gray-99); }
#taxesHealthcareSection .med-panel.th-block { margin-top:12px; }
.th-h { margin:0 0 4px; font-size:15.5px; font-weight:800; color:var(--c-slate-30); }
.th-intro { margin:0 0 10px; font-size:13px; line-height:1.5; color:var(--c-slate-45); }
.th-block > .inputs-grid { margin-top:6px; }
.th-block .field[hidden], .th-block .inputs-grid[hidden] { display:none !important; }
.th-pre65 > .field { margin-top:14px !important; }
/* Before Medicare (2026-10-06, js/46): a row per person — who, their years, a three-way choice, and what it means. */
#preMedBlock[hidden], #preMedBlock .pm-row[hidden], #preMedBlock .pm-seg button[hidden] { display:none !important; }
#preMedBlock .pm-row { padding:10px 0; border-top:1px solid var(--c-gray-90); }
#preMedBlock .th-intro + .pm-row { border-top:0; padding-top:2px; }
#preMedBlock .pm-who { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin-bottom:8px; font-size:14px; color:var(--c-slate-30); }
#preMedBlock .pm-span { font-size:13px; color:var(--c-slate-45); font-variant-numeric:tabular-nums; }
#preMedBlock .pm-seg { display:inline-flex; flex-wrap:wrap; gap:0; padding:3px; border-radius:12px; background:var(--c-gray-95); }
#preMedBlock .pm-seg button { white-space:nowrap; min-height:36px; padding:6px 14px; border:0; border-radius:9px; background:transparent; font:inherit; font-size:13.5px; font-weight:700; color:var(--c-slate-45); cursor:pointer; }
#preMedBlock .pm-seg button.is-on { background:var(--c-gray-99); color:var(--c-teal-40); box-shadow:0 1px 3px rgba(var(--c-shadow-rgb), 0.16); }
#preMedBlock .pm-seg button.is-off { opacity:.45; cursor:not-allowed; }
#preMedBlock .pm-seg button:focus-visible { outline:2px solid var(--c-teal-50); outline-offset:1px; }
#preMedBlock .pm-line { margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--c-slate-45); }
#preMedBlock > .inputs-grid { margin-top:10px; padding-top:10px; border-top:1px solid var(--c-gray-90); }
#preMedBlock .pm-guard { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:6px 14px; margin-top:12px; padding-top:12px; border-top:1px solid var(--c-gray-90); }
#preMedBlock .pm-guard[hidden] { display:none !important; }
#preMedBlock .pm-guard > label { margin:0 !important; font-size:14px; font-weight:700; color:var(--c-slate-30); }
#preMedBlock .pm-guard .pm-line { grid-column:1 / -1; margin-top:0; }
#preMedBlock .pm-cost { margin:10px 0 0; font-size:13px; line-height:1.5; color:var(--c-slate-35); }
#preMedBlock .pm-cost:empty { display:none; }
@media (max-width:700px){
  #preMedBlock .pm-seg { display:flex; }
  #preMedBlock .pm-seg button { flex:1 1 auto; padding:6px 8px; font-size:13px; white-space:nowrap; }
}
.th-more { margin-top:12px; }
.th-more > summary { cursor:pointer; font-size:13.5px; font-weight:700; color:var(--c-teal-50); list-style:none; }
.th-more > summary::-webkit-details-marker { display:none; }
.th-more > summary::before { content:'+ '; }
.th-more[open] > summary::before { content:'– '; }
@media (max-width:700px){
  .th-block { padding:12px 12px; }
  .th-block .inputs-grid { grid-template-columns:1fr !important; }
  .th-pre65 .toggle-row { flex-direction:row; }
  .th-pre65 .toggle-row .toggle-btn { flex:1; text-align:center; }
}
/* Phones: inside the option's own card, the parts are flat sections with a divider, not cards in cards. */
@media (max-width:700px){
  #taxesHealthcareSection .th-block, #taxesHealthcareSection .med-panel.th-block { margin:0; padding:14px 0 6px; border:0; border-top:1px solid var(--c-gray-90); border-radius:0; background:none; }
  #taxesHealthcareSection .th-block:first-child { border-top:0; padding-top:4px; }
  #taxesHealthcareSection .med-estimate { padding:10px 12px; }
}

/* Plan options, tidied (2026-10-03). In the first-declared layer with :root body #planOptionsList, so every theme's own .po-row rule gives way (Focus's .po-row.is-on border was stronger).
   1. The open option stands out: an accent border all round, a tinted header and a soft glow; closed rows stay plain.
   2. Inside it, no cards in the card: each block (state tax, before Medicare, Medicare, inflation; cash, IRA, brokerage…)
      is a flat section with a divider; headings, labels and gaps are the same everywhere, on a computer too. */
@layer compassNavTop {
  :root body #planOptionsList .po-row.is-open { border:2px solid var(--c-teal-50) !important; box-shadow:0 10px 26px rgba(var(--c-teal-50-rgb), 0.16) !important; }
  :root body #planOptionsList .po-row.is-open > .po-head { background:rgba(var(--c-teal-50-rgb), 0.08) !important; }
  :root body #planOptionsList .po-row.is-open > .po-body { border-top:1px solid rgba(var(--c-teal-50-rgb), 0.25) !important; padding:6px 18px 18px !important; }
  :root body .po-body .th-block, :root body .po-body .med-panel.th-block {
    margin:0 !important; padding:16px 0 6px !important; border:0 !important; border-top:1px solid var(--c-gray-90) !important; border-radius:0 !important; background:none !important; box-shadow:none !important; }
  :root body .po-body .th-block:first-child, :root body .po-body .th-block:first-of-type { border-top:0 !important; padding-top:8px !important; }
  :root body .po-body .th-h, :root body .po-body .med-title, :root body .po-body .rd-group-h { margin:0 0 4px !important; font-size:15px !important; font-weight:800 !important; }
  :root body .po-body .th-intro, :root body .po-body .med-intro { margin:0 0 10px !important; font-size:13px !important; line-height:1.5 !important; }
  :root body .po-body .inputs-grid { gap:12px 18px !important; align-items:start !important; margin-top:8px !important; }
  /* Labels: one size, and no two-line reserve (the page keeps 3.45em under every label on a computer so columns line
     up when one wraps; inside an option it only pushed each field ~25px down). */
  :root body .po-body .field label { min-height:0 !important; font-size:13.5px !important; font-weight:700 !important; line-height:1.35 !important; margin-bottom:6px !important; text-transform:none !important; letter-spacing:0 !important; }
  :root body .po-body .field label + .rn-field-help, :root body .po-body .field label + .toggle-hint { margin-top:-2px !important; }
  :root body .po-body .field + .field { margin-top:0 !important; }
  :root body .po-body .th-pre65 > .field { margin-top:12px !important; }
}
@media (max-width:700px){
  :root body #planOptionsList .po-row.is-open > .po-body { padding:4px 12px 14px !important; }
}

/* In your plan · Suggested · Add to your plan (js/22, 2026-10-05) */
.po-sec { display:flex; flex-direction:column; gap:8px; }
.po-sec[hidden], .po-empty[hidden] { display:none; }
.po-sec + .po-sec { margin-top:8px; }
.po-sec-rows { display:flex; flex-direction:column; gap:8px; }
.po-empty { margin:0 2px; font-size:13px; color:var(--c-slate-60); }
.po-row.po-suggested { border-style:dashed; border-color:var(--c-teal-80); }
.po-row.po-suggested .po-sum { color:var(--c-slate-50); }
.po-chips { display:flex; flex-wrap:wrap; gap:8px; }
html body .po-chip { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 12px; border:1px solid var(--c-gray-90); border-radius:999px; background:var(--c-gray-99); color:var(--c-sage-30); font:inherit; font-size:13.5px; font-weight:650; cursor:pointer; }
html body .po-chip span { color:var(--c-teal-50); font-weight:800; }
html body .po-chip:hover { border-color:var(--c-teal-50); }

/* TIPS ladder note (js/44, 2026-10-05) */
.tips-warn { display:block; margin-top:6px; color:var(--gold-ink); font-weight:600; }
#preMedBlock .pm-why-warn { margin:10px 0 0; padding:9px 12px; border-radius:10px; background:var(--c-sand-95b); color:var(--c-amber-35); font-size:13px; line-height:1.5; } /* js/51b (2026-10-11) */
#preMedBlock .pm-why-warn[hidden] { display:none; }
#preMedBlock .pm-why-warn a { color:inherit; font-weight:700; text-decoration:underline; }