/* Compass navigation (2026-09-23): plan steps as pages, slim plan bar, mobile bottom tab bar.
   Loaded last so it can override the older layered stylesheets. See js/19-ui-navigation.js. */

/* ---------- 1. Plan steps as pages (screen only: printing still shows the whole form) ---------- */
@media screen {
  #advancedInputSections.plan-steps-on[data-current-step="1"] [data-plan-step]:not([data-plan-step~="1"]),
  #advancedInputSections.plan-steps-on[data-current-step="2"] [data-plan-step]:not([data-plan-step~="2"]),
  #advancedInputSections.plan-steps-on[data-current-step="3"] [data-plan-step]:not([data-plan-step~="3"]),
  #advancedInputSections.plan-steps-on[data-current-step="4"] [data-plan-step]:not([data-plan-step~="4"]),
  #advancedInputSections.plan-steps-on[data-current-step="5"] [data-plan-step]:not([data-plan-step~="5"]),
  #advancedInputSections.plan-steps-on[data-current-step="6"] [data-plan-step]:not([data-plan-step~="6"]),
  #advancedInputSections.plan-steps-on[data-current-step="7"] [data-plan-step]:not([data-plan-step~="7"]) { display:none !important; } /* seven steps since 2026-10-15 (Property & debts) */
  #advancedInputSections.plan-steps-on #tocPanel { display:none !important; }
  #advancedInputSections.plan-steps-on .compass-plan-steps { position:sticky; top:0; z-index:30; }
  #advancedInputSections.plan-steps-on .compass-plan-step { cursor:pointer; }
}
@media print { .plan-step-nav, .plan-bar, .mobile-tabbar, .mobile-tools-sheet { display:none !important; } }
.plan-step-nav { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  margin:26px 0 8px; padding-top:18px; border-top:1px solid var(--border, var(--c-gray-90)); }
.plan-step-nav .plan-step-next { margin:0 0 0 auto !important; width:auto !important; min-height:48px; padding:12px 22px !important; font-size:15px !important; }
.plan-step-nav .plan-step-back { min-height:44px; padding:10px 16px; font-size:14px; font-weight:600; }

/* ---------- 2. Slim plan bar ---------- */
#toolView .compass-main-flow > .hero.plan-hero-retired { display:none !important; }
html.plan-bar-on #modeIndicator { display:none !important; }
.plan-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 0 18px; padding:10px 14px; background:var(--panel, var(--c-gray-99)); border:1px solid var(--border, var(--c-gray-90)); border-radius:12px; }
.plan-bar-main { display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 260px; }
.plan-bar-label { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted, var(--c-slate-55b)); margin:0; }
.plan-bar-name-slot { flex:1 1 auto; min-width:0; max-width:380px; display:flex; align-items:center; gap:10px; }
.plan-bar #clientName { width:100%; min-height:40px; padding:8px 12px; font-size:15px; font-weight:600; }
.plan-bar #autosaveIndicator { white-space:nowrap; }
.plan-bar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.plan-bar-btn { min-height:40px; padding:8px 14px; border-radius:9px; border:1px solid var(--border, var(--c-slate-85)); background:var(--panel2, var(--c-gray-99));
  color:var(--text, var(--c-slate-30)); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.plan-bar-btn:hover { background:var(--c-gray-95); }
.plan-bar-btn[hidden] { display:none; }
.plan-bar-btn .pb-short { display:none; }
@media (max-width:700px) { .plan-bar-btn .pb-long { display:none; } .plan-bar-btn .pb-short { display:inline; } }
.plan-file-menu { position:relative; }
.plan-file-pop { position:absolute; right:0; top:calc(100% + 6px); z-index:60; width:280px; max-width:calc(100vw - 32px);
  padding:10px; background:var(--panel, var(--c-gray-99)); border:1px solid var(--border, var(--c-gray-90)); border-radius:12px; box-shadow:0 12px 30px rgba(var(--c-shadow-rgb), 0.16); }
.plan-file-pop[hidden] { display:none; }
.plan-file-group { display:flex; flex-direction:column; gap:6px; padding:6px 0; }
.plan-file-group + .plan-file-group { border-top:1px solid var(--border, var(--c-gray-95)); }
.plan-file-actions .preset-btn { width:100%; justify-content:flex-start; min-height:42px; margin:0 !important; }
.plan-file-date label { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted, var(--c-slate-55b)); }
.plan-file-date input { width:100%; min-height:40px; }
.plan-file-danger span { font-size:13px !important; padding:6px 2px; align-self:flex-start; }
@media (min-width:701px) { .plan-bar #autosaveIndicator { display:none; } } /* the desktop header already shows it */
@media (max-width:700px) {
  .plan-bar { padding:8px 10px; border-radius:10px; }
  .plan-bar-label { display:none; }
  .plan-bar-main { flex:1 1 100%; }
  .plan-bar-name-slot { max-width:none; }
  .plan-bar-actions { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .plan-bar-actions > [hidden] { display:none; }
  .plan-bar-btn { width:100%; min-height:40px; padding:8px 6px; }
  .plan-file-menu .plan-file-toggle { width:100%; }
  .plan-file-pop { right:0; left:auto; }
  #mobilePlanToolsToggle { display:none !important; }
}

/* ---------- 3. Mobile bottom tab bar ---------- */
.mobile-tabbar, .mobile-tools-sheet { display:none; }
@media (max-width:700px) {
  html.mobile-tabbar-on body { padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:900;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); background:var(--c-gray-99); border-top:1px solid var(--c-gray-90); box-shadow:0 -4px 16px rgba(var(--c-shadow-rgb), 0.08); }
  .mobile-tabbar button { flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    min-height:56px; padding:4px 2px; border:0; border-radius:10px; background:transparent; color:var(--c-slate-50b); font:inherit; font-size:11.5px; font-weight:600; }
  .mobile-tabbar button.is-active { color:var(--c-teal-50); background:var(--c-gray-95); }
  .mobile-tabbar button:focus-visible { outline:2px solid var(--c-teal-50); outline-offset:-2px; }
  .mobile-tools-sheet:not([hidden]) { display:block; position:fixed; inset:0; z-index:950; }
  .mts-backdrop { position:absolute; inset:0; background:rgba(var(--c-slate-25-rgb), 0.35); }
  .mts-panel { position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:6px;
    padding:10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background:var(--c-gray-99); border-radius:16px 16px 0 0; box-shadow:0 -10px 30px rgba(var(--c-shadow-rgb), 0.2); }
  .mts-handle { width:40px; height:4px; border-radius:2px; background:var(--c-gray-90); margin:2px auto 8px; }
  .mts-panel button[data-view] { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
    min-height:56px; padding:10px 14px; border:1px solid var(--c-gray-90); border-radius:12px; background:var(--c-gray-99); color:var(--c-slate-30); font:inherit; }
  .mts-panel button[data-view] strong { font-size:15px; }
  .mts-panel button[data-view] span { font-size:12.5px; color:var(--c-slate-50b); }
  .mts-link { padding:10px 14px; font-size:14px; color:var(--c-teal-50); font-weight:600; text-decoration:none; }
  .mts-close { min-height:48px; border:0; border-radius:12px; background:var(--c-gray-95); color:var(--c-slate-30); font:inherit; font-weight:700; }
  html.mts-open { overflow:hidden; }
}

/* Overrides that must beat the layered !important rules of compass-app-theme.css / retirenerd-analyzer.css.
   The compassNavTop layer is declared first in index.html, and for !important the first layer wins. */
@layer compassNavTop {
  @media (max-width:700px) {
    html.mobile-tabbar-on #mobileMenuToggle, html.mobile-tabbar-on #compassGuideTrigger { display:none !important; }
    html.mobile-tabbar-on #mainToolNavigation { display:none !important; }
  }
  #toolView .compass-main-flow > .hero.plan-hero-retired { display:none !important; }
  html.plan-bar-on #modeIndicator { display:none !important; }
  /* Next is the primary action, Back the secondary one, whatever the older button themes say. */
  .plan-step-nav .plan-step-next { background:var(--c-teal-50) !important; color:var(--c-gray-99) !important; border:1px solid var(--c-teal-50) !important; box-shadow:0 4px 12px rgba(var(--c-shadow-rgb), 0.22) !important; }
  .plan-step-nav .plan-step-back { background:var(--c-gray-99) !important; color:var(--c-teal-50) !important; border:1px solid var(--c-slate-85) !important; box-shadow:none !important; }
  .plan-bar .plan-bar-btn { background:var(--c-gray-99) !important; color:var(--c-slate-30) !important; border:1px solid var(--c-slate-85) !important; }
  @media (max-width:700px) { .plan-bar { margin-bottom:12px !important; } }
}

/* ---------- 4. Desktop sidebar (≥1001px) — see js/19 section 4 ---------- */
.sb-hd, .sb-steps, .sb-bottom { display:none; }
@media (min-width:1001px) {
  html.sidebar-plus .global-nav::before { content:none !important; display:none !important; }
  html.sidebar-plus .global-nav { gap:3px !important; padding-top:18px !important; flex-wrap:nowrap !important; }
  html.sidebar-plus #mainToolNavigation .rn-website-link { margin:0 !important; width:100% !important; }
  html.sidebar-plus .global-nav .global-tab, html.sidebar-plus .global-nav .rn-website-link { min-height:36px !important; padding:6px 12px !important; }
  html.sidebar-plus .compass-side-note { display:none !important; }
  .sb-hd:not([hidden]) { display:block; margin:8px 12px 2px; color:var(--compass-muted, var(--c-slate-55b)); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
  .sb-hd-plan:not([hidden]) { margin-top:0; }
  /* order: Plan · Results · Tools · Help · status */
  .sb-hd-plan { order:1; } #navTool { order:2; } .sb-steps { order:3; }
  .sb-hd-results { order:4; } #navResults { order:5; } #navPaycheck { order:5; } #navCashflow { order:6; } #navNetWorth { order:6; } #navStress { order:6; } #navScenarios { order:6; } #navDash { order:7; } #navSummary { order:7; }
  .sb-hd-tools { order:8; } #navExpenses { order:9; } #navRoth { order:10; } #navTaxes { order:10; } #navAca { order:10; }
  .sb-hd-help { order:11; } #navHelp { order:12; } .global-nav .rn-website-link { order:13; margin-top:0 !important; border-top:0 !important; }
  .sb-bottom { order:14; }
  .sb-steps:not([hidden]) { display:flex; flex-direction:column; gap:1px; list-style:none; width:auto !important; min-width:0; box-sizing:border-box; margin:4px 0 2px 14px; padding:0 0 0 12px; border-left:2px solid var(--c-gray-90); }
  .sb-steps li { min-width:0; }
  .sb-steps button { box-sizing:border-box; min-width:0; display:flex; align-items:flex-start; gap:9px; width:100%; padding:5px 8px; border:0; border-radius:8px; background:transparent; color:var(--c-slate-45); font:inherit; text-align:left; cursor:pointer; }
  .sb-steps button:hover { background:var(--c-gray-95); }
  .sb-steps .sb-num { flex:0 0 20px; height:20px; display:grid; place-items:center; margin-top:1px; border-radius:50%; background:var(--c-gray-95); color:var(--c-slate-50b); font-size:11px; font-weight:800; }
  .sb-steps .sb-txt { display:flex; flex-direction:column; min-width:0; }
  .sb-steps strong { font-size:12.5px; font-weight:700; line-height:1.3; }
  .sb-steps small { font-size:11px; color:var(--c-slate-60); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sb-steps button.is-current { background:var(--c-gray-95); color:var(--c-teal-40); }
  .sb-steps button.is-current .sb-num { background:var(--c-teal-50); color:var(--c-gray-99); }
  .sb-steps button.is-warn small { color:var(--c-orange-55); font-weight:700; }
  .sb-bottom { flex-shrink:0; display:flex; flex-direction:column; gap:8px; margin-top:auto; padding:12px 0 2px; position:sticky; bottom:-22px; background:var(--c-gray-99); box-shadow:0 -10px 12px -8px rgba(var(--c-gray-99-rgb), 0.95); }
  .sb-guide { display:flex; align-items:center; gap:8px; min-height:42px; padding:9px 12px; border:1px solid var(--c-sage-90); border-radius:10px; background:var(--c-gray-99); color:var(--c-teal-45); font:inherit; font-size:13px; font-weight:700; cursor:pointer; text-align:left; }
  .sb-guide:hover { background:var(--c-gray-95); }
  .sb-guide.has-alert { border-color:var(--c-amber-75); background:var(--c-sand-99); color:var(--c-amber-50b); }
  .sb-guide-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sb-status { display:flex; flex-direction:column; gap:5px; padding:12px 14px; border:1px solid var(--c-sage-90); border-radius:13px; background:var(--compass-teal-soft, var(--c-gray-95)); }
  .sb-status p { margin:0; font-size:12px; line-height:1.45; color:var(--c-slate-50); }
  .sb-eyebrow { font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--c-slate-60); }
  .sb-none { font-size:16px; color:var(--c-slate-30); }
  .sb-score { display:flex; align-items:baseline; gap:8px; }
  .sb-score strong { font-size:30px; line-height:1; font-weight:800; }
  .sb-score span { font-size:13px; font-weight:800; }
  .sb-good strong, .sb-good span { color:var(--c-green-50); } .sb-mid strong, .sb-mid span { color:var(--c-orange-60); } .sb-bad strong, .sb-bad span { color:var(--c-red-55b); }
  .sb-stale { color:var(--c-orange-55) !important; font-weight:700; }
  .sb-btn { min-height:38px; padding:8px 12px; border:1px solid var(--c-sage-85); border-radius:9px; background:var(--c-gray-99); color:var(--c-teal-45); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
  .sb-btn-primary { background:var(--c-teal-50); border-color:var(--c-teal-50); color:var(--c-gray-99); }
  .sb-btn:disabled { opacity:.7; cursor:progress; }
}
@layer compassNavTop {
  @media (min-width:1001px) {
    html.sidebar-plus #compassGuideTrigger { display:none !important; }
    html.sidebar-plus .global-nav { flex-wrap:nowrap !important; gap:3px !important; }
    html.sidebar-plus #mainToolNavigation .rn-website-link { margin:0 !important; width:100% !important; border-top:0 !important; }
    html.sidebar-plus #mainToolNavigation .sb-steps { width:auto !important; }
    html.sidebar-plus body .global-nav .global-tab, html.sidebar-plus body .global-nav .rn-website-link { min-height:36px !important; padding:6px 12px !important; }
  }
}

/* Tablet (701–1000px): tabs stay a 4-column bar, but in the same order as the sidebar, without the
   step numbers (they skip when a tab is hidden), and with the Guide as a tab instead of a floating button. */
@media (min-width:701px) and (max-width:1000px) {
  html.sidebar-plus .sb-bottom { display:contents; }
  html.sidebar-plus .sb-status { display:none; }
  html.sidebar-plus .sb-guide { order:14; display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:9px 10px; border:1px dashed var(--c-sage-85); border-radius:10px; background:var(--c-gray-99); color:var(--c-teal-45); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
  html.sidebar-plus .sb-guide.has-alert { border-style:solid; border-color:var(--c-amber-75); background:var(--c-sand-99); color:var(--c-amber-50b); }
  html.sidebar-plus .sb-guide-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #navTool { order:2; } #navDash { order:7; } #navResults { order:5; } #navPaycheck { order:5; } #navCashflow { order:6; } #navNetWorth { order:6; } #navStress { order:6; } #navScenarios { order:6; } #navSummary { order:7; }
  #navExpenses { order:9; } #navRoth { order:10; } #navTaxes { order:10; } #navAca { order:10; } #navHelp { order:12; }
}
@layer compassNavTop {
  @media (min-width:701px) and (max-width:1000px) {
    html.sidebar-plus #compassGuideTrigger { display:none !important; }
    html.sidebar-plus #mainToolNavigation .rn-website-link { display:none !important; }
    html.sidebar-plus #mainToolNavigation .global-tab-num { display:none !important; }
    html.sidebar-plus .global-nav { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  }
}

/* ---------- 5. Expense Planner: totals, row status, Clear (2026-09-24) ---------- */
.rn-exp-sum-total { padding:7px 12px; border:1px solid var(--c-slate-85); border-radius:8px; background:var(--c-gray-99); color:var(--c-blue-30); font-size:18px; font-weight:700; line-height:1.3; white-space:nowrap; text-align:left; font-variant-numeric:tabular-nums; }
.rn-exp-sum-total::before { content:"At retirement"; display:block; font-size:11px; font-weight:600; color:var(--c-slate-50b); }
#expCatTotal_events::before { content:"One-time"; }
.rn-exp-sum-total .rn-expense-inactive-note { display:block; margin-top:3px; max-width:180px; white-space:normal; font-size:10px; line-height:1.25; font-weight:600; color:var(--c-amber-55b); }
.rn-exp-row-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:4px 0 6px; }
.rn-exp-row-status { font-size:12.5px; line-height:1.4; color:var(--muted, var(--c-slate-55b)); }
.rn-exp-row-status.is-ok { color:var(--c-green-50); }
.rn-exp-row-status.is-later { color:var(--c-amber-50b); }
.rn-exp-row-status.is-warn { color:var(--c-orange-55); font-weight:700; }
.rn-exp-row-btns { display:flex; gap:6px; margin-left:auto; }
.rn-exp-row-btns .preset-btn { padding:4px 11px !important; font-size:12px !important; min-height:30px; }
.rn-exp-row-btns .rn-exp-remove { color:var(--red, var(--c-red-55b)) !important; }
.rn-exp-not-in-chart { margin-top:12px; padding:10px 14px; border:1px dashed var(--border, var(--c-gray-90)); border-radius:10px; font-size:12.5px; line-height:1.5; color:var(--muted, var(--c-slate-50)); }
.rn-exp-not-in-chart[hidden] { display:none; }
.rn-exp-not-in-chart p { margin:0; }
.rn-exp-not-in-chart p + p { margin-top:6px; }

/* Review & run: "Check your plan" (2026-10-02, js/19) */
.rv-box { margin:14px 0 6px; padding:14px 16px; border:1px solid var(--c-gray-90); border-radius:14px; background:var(--c-gray-99); }
.rv-h strong { display:block; font-size:16px; font-weight:800; color:var(--c-slate-30); }
.rv-h span { display:block; margin-top:2px; font-size:13px; color:var(--c-slate-50); }
.rv-list { list-style:none; margin:10px 0 0; padding:0; }
.rv-list li { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--c-gray-95); }
.rv-list li > div { flex:1; min-width:0; }
.rv-list b { display:block; font-size:13.5px; color:var(--c-sage-30); }
.rv-list li span { display:block; font-size:13px; line-height:1.45; color:var(--c-slate-45); }
.rv-miss { display:inline !important; color:var(--c-orange-55) !important; font-weight:700; }
html body .rv-edit { flex:none; min-height:0; padding:6px 14px; border:1px solid var(--c-gray-90); border-radius:999px; background:var(--c-gray-99); box-shadow:none; font:inherit; font-size:13px; font-weight:700; color:var(--c-teal-50); cursor:pointer; }
.rv-list li.has-miss .rv-edit { border-color:var(--c-orange-55); }
@media (max-width:700px){ .rv-box { padding:12px 12px; } }

/* First visit (2026-10-03, js/19 .plan-bar-new): only File until there's a result. */
.plan-bar.plan-bar-new .plan-bar-name-slot, .plan-bar.plan-bar-new .plan-bar-status-slot, .plan-bar.plan-bar-new #planBarMode { display:none !important; }
.plan-bar.plan-bar-new { justify-content:flex-end; background:transparent !important; border-color:transparent !important; box-shadow:none !important; padding-top:0 !important; padding-bottom:0 !important; min-height:0 !important; }
/* The skip link keeps its 44px tap target on its own line (inline, it stretched a line of the intro). */
.qs-intro .qs-skip-link { display:flex; align-items:center; min-height:44px; margin:2px 0 0; }
/* Quick Start progress (2026-10-03): a thin bar instead of the ring. */
#qsPanel .qs-bar { height:6px; margin:0 0 18px; border-radius:999px; background:var(--c-gray-95); overflow:hidden; }
#qsPanel .qs-bar span { display:block; height:100%; width:20%; border-radius:inherit; background:var(--c-teal-50); transition:width .3s ease; }
#qsPanel .qs-ring[hidden] { display:none !important; }
.rn-review .rv-list { margin:0; }
.rn-review .rv-list li:first-child { border-top:0; }

/* Two ways to start (2026-10-03, index.html #qsChoose, js/17 .qs-choosing): the choice comes before the questions. */
.qs-choose { display:none; }
#qsWrapper.qs-choosing .qs-choose { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:6px 0 18px; }
#qsWrapper.qs-choosing #qsPanel, #qsWrapper.qs-choosing .qs-skip-link { display:none !important; }
html body .qs-choice { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:0; padding:18px 18px 16px; text-align:left;
  border:1px solid var(--c-gray-90); border-radius:16px; background:var(--c-gray-99); color:var(--c-slate-30); font:inherit; cursor:pointer; box-shadow:0 6px 18px rgba(var(--c-shadow-rgb), 0.06); }
html body .qs-choice:hover { border-color:var(--c-teal-50); }
html body .qs-choice:focus-visible { outline:3px solid var(--c-teal-50); outline-offset:2px; }
.qs-choice strong { font-size:19px; font-weight:800; color:var(--c-slate-25); }
.qs-choice-tag { font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--c-teal-45); }
html body .qs-choice-time { font-size:13px; font-weight:700; color:var(--c-slate-45); }
html body .qs-choice-what { font-size:14px; font-weight:400; line-height:1.45; color:var(--c-slate-45); }
.qs-choice-go { margin-top:auto; padding-top:8px; font-size:15px; font-weight:800; color:var(--c-teal-50); }
html body .qs-choice-quick { border:2px solid var(--c-teal-50); }
@media (max-width:700px){ #qsWrapper.qs-choosing .qs-choose { grid-template-columns:1fr; gap:12px; } html body .qs-choice { padding:16px; } }
/* 2026-10-04: File menu in the header on every page */
.plan-file-in-header { flex:0 0 auto; margin-left:12px; }
.plan-file-in-header .plan-file-toggle { width:auto !important; min-height:34px !important; padding:6px 12px !important; font-size:13px; }
.compass-workspace-header .plan-file-in-header { margin-left:16px; }
html.mf-on .site-header .plan-file-in-header { margin-left:8px; }
html.mf-on .site-header .plan-file-in-header .plan-file-toggle { min-height:32px !important; padding:4px 10px !important; }
.plan-file-in-header .plan-file-pop { z-index:950; }
/* 2026-10-04: "Go to …" buttons under "Fix this before running" */
.sim-warn-go { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.sim-warn-go .sim-warn-btn { min-height:36px; padding:6px 12px; font-size:13px; font-weight:700; }
/* 2026-10-04: "Working it out…" — the spinning compass (js/34-busy.js) */
.cb-busy { position:fixed; left:50%; top:42%; z-index:2000; display:flex; align-items:center; gap:12px; padding:12px 18px 12px 14px; border:1px solid var(--c-gray-90); border-radius:999px; background:var(--c-gray-99); box-shadow:0 14px 40px rgba(var(--c-shadow-rgb), 0.18); transform:translate(-50%, -50%) scale(.96); opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease; }
.cb-busy[hidden] { display:none; }
.cb-busy.cb-on { opacity:1; transform:translate(-50%, -50%) scale(1); transition:opacity .18s ease .15s, transform .18s ease .15s; }
.cb-compass { width:40px; height:40px; flex:none; }
.cb-ring { fill:var(--c-gray-99); stroke:var(--c-teal-50); stroke-width:2.5; }
.cb-ticks { stroke:var(--c-slate-75); stroke-width:2; stroke-linecap:round; fill:none; }
.cb-needle { transform-origin:24px 24px; transform-box:view-box; animation:cb-seek 1.6s cubic-bezier(.45,.05,.3,1) infinite; }
.cb-n { fill:var(--c-red-55b); }
.cb-s { fill:var(--c-slate-35); }
.cb-hub { fill:var(--c-gray-99); stroke:var(--c-slate-35); stroke-width:1.6; }
.cb-text { font-size:14px; font-weight:700; color:var(--c-slate-25); white-space:nowrap; }
/* swings past north, swings back, settles — then looks again */
@keyframes cb-seek { 0% { transform:rotate(0deg); } 35% { transform:rotate(290deg); } 55% { transform:rotate(380deg); } 70% { transform:rotate(345deg); } 82% { transform:rotate(365deg); } 100% { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .cb-needle { animation:cb-pulse 1.4s ease-in-out infinite; } @keyframes cb-pulse { 50% { opacity:.45; } } }
/* Keeping a plan safe (2026-10-04, js/35-backup.js): File menu status, the reminder, Earlier versions */
.bk-file { display:flex; flex-direction:column; gap:4px; padding-top:4px; }
.bk-status { margin:0; font-size:12.5px; line-height:1.45; color:var(--c-slate-45); }
.bk-status b { color:var(--c-slate-25); }
.bk-changed { color:var(--c-amber-40); font-weight:700; }
.bk-link { align-self:flex-start; padding:4px 0; border:0; background:none; font:inherit; font-size:13px; font-weight:700; color:var(--c-teal-40); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.bk-nudge { position:fixed; left:16px; bottom:16px; z-index:900; width:min(520px, calc(100vw - 32px)); box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px; border:1px solid var(--c-teal-80); border-radius:14px; background:var(--c-gray-99); box-shadow:0 14px 40px rgba(var(--c-shadow-rgb), 0.18); }
.bk-nudge[hidden] { display:none; }
.bk-nudge p { flex:1 1 260px; margin:0; font-size:13px; line-height:1.45; color:var(--c-slate-35); }
.bk-nudge p b { color:var(--c-slate-20); }
.bk-acts { display:flex; gap:8px; flex-wrap:wrap; }
.bk-acts button { min-height:38px; padding:8px 14px; border-radius:999px; border:1px solid var(--c-teal-40); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.bk-go { background:var(--c-teal-40); color:var(--c-gray-99); }
.bk-later { background:var(--c-gray-99); color:var(--c-teal-40); }
html.mobile-tabbar-on .bk-nudge { bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
.bk-vers { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; }
.bk-ver { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--border-soft, var(--c-gray-95)); }
.bk-ver div { display:flex; flex-direction:column; gap:2px; min-width:0; font-size:13.5px; }
.bk-ver small { font-size:12px; color:var(--muted, var(--c-slate-55)); overflow-wrap:anywhere; }
.bk-tag { display:inline-block; margin-left:4px; padding:1px 8px; border-radius:999px; background:var(--c-gray-95); font-size:11px; font-weight:600; color:var(--c-slate-45); }
.bk-ver button { flex:0 0 auto; padding:7px 14px; border-radius:999px; border:1px solid var(--c-teal-40); background:var(--c-gray-99); color:var(--c-teal-40); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.bk-same { flex:0 0 auto; font-size:12px; color:var(--c-slate-55); }
/* File menu in the phone's top bar (2026-10-04 fix): it opened lined up with the button's right edge, which on a
   phone put most of it off the left of the screen, and was taller than the space above the tab bar. Now it spans the
   screen under the bar (16px each side) and scrolls. */
@media (max-width:700px){
  .plan-file-in-header .plan-file-pop { position:fixed; top:56px; left:16px; right:16px; width:auto; max-width:none; max-height:calc(100vh - 56px - 84px); max-height:calc(100dvh - 56px - 84px - env(safe-area-inset-bottom, 0px)); overflow-y:auto; overscroll-behavior:contain; }
}
.bk-nudge.bk-aside { visibility:hidden; }
/* Text for screen readers only (js/37-a11y.js, 2026-10-04) */
.a11y-sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Keyboard focus you can see in every theme (2026-10-04 accessibility check). Fields showed focus as a faint teal glow
   (1.2–1.7:1 against their background in 6 of 8 themes) and buttons as a light amber outline (1.8:1 in Classic and
   Vivid); WCAG asks for 3:1. Now one outline in the page's text color, which by design contrasts with the page in
   every theme. Mouse clicks don't show it (:focus-visible). */
/* In compassNavTop (declared first, so its !important beats the themes' layered focus rules) and made specific
   enough (two :not(#…)) to win over the theme rules in the same layer. */
@layer compassNavTop {
  html body :is(button, a, summary, input, select, textarea, [tabindex], [role="button"]):focus-visible:not(#a11y-a):not(#a11y-b) {
    outline:3px solid var(--text, var(--c-slate-20)) !important; outline-offset:2px !important;
  }
  html body .ug-sec:focus:not(#a11y-a):not(#a11y-b) { outline:none !important; } /* a section the guide scrolls to, not a control */
  /* Bold's top bar is navy: a light outline there (the File menu itself is a light panel, so its items keep the dark one). */
  :root[data-theme="bold"] body .site-header :is(button, a, input, select, [tabindex]):focus-visible:not(.plan-file-pop *):not(#a11y-a):not(#a11y-b) { outline-color:var(--c-gray-99) !important; }
}

/* ---------- 5. Desktop sidebar (2026-10-06): logo always in view, no scrolling, Display panel, collapse to icons ---------- */
.sb-collapse, .sb-mark { display:none; }
#navResults .sb-long { display:none; } /* "Projections" in the sidebar and tablet tabs; the full name is its tooltip */
/* the Display card (computer sidebar and tablet tabs) */
.sb-disp-pop { position:fixed; z-index:1300; width:252px; padding:12px; border:1px solid var(--c-gray-90); border-radius:14px; background:var(--c-gray-99); box-shadow:0 14px 34px rgba(var(--c-shadow-rgb), 0.18); }
.sb-disp-pop[hidden] { display:none !important; }
.sb-disp-hd { margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c-slate-55); }
.sb-disp-pop .ts-pick { margin-top:10px; }
@media (min-width:701px) and (max-width:1000px) {
  html.sidebar-plus .sb-display { order:15; display:flex; }
  html.sidebar-plus .sb-disp-btn { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:48px; padding:9px 10px; border:1px dashed var(--c-sage-85); border-radius:10px; background:var(--c-gray-99); color:var(--c-teal-45); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
}
@layer compassNavTop {
  @media (min-width:1001px) {
    /* the logo stays at the top; the menu sits right under it */
    html.sidebar-plus body .site-header { position:sticky !important; top:0 !important; z-index:46 !important; }
    html.sidebar-plus body .global-nav { top:84px !important; min-height:0 !important; max-height:calc(100vh - 84px) !important; padding:10px 14px 12px !important; gap:2px !important; overflow-y:auto !important; scrollbar-width:thin; }
    /* tighter, so it fits a laptop screen without scrolling */
    html.sidebar-plus body .global-nav .global-tab, html.sidebar-plus body .global-nav .rn-website-link { min-height:32px !important; padding:5px 10px !important; }
    html.sidebar-plus body .sb-hd:not([hidden]) { margin:7px 10px 1px !important; }
    html.sidebar-plus body .sb-steps button { padding:3px 8px !important; }
    html.sidebar-plus body .sb-bottom { gap:6px !important; padding:8px 0 0 !important; bottom:-12px !important; }
    html.sidebar-plus body .sb-guide { min-height:36px !important; padding:6px 12px !important; }
    html.sidebar-plus body .sb-status { padding:9px 12px !important; gap:3px !important; }
    html.sidebar-plus body .sb-status p:not(.sb-stale) { display:none !important; }
    html.sidebar-plus body .sb-score strong { font-size:24px !important; }
    @media (max-height:860px){ html.sidebar-plus body .sb-steps small { display:none !important; } }
    /* fit without scrolling: the plan steps only on Plan Details; one-line names; Display (icon) and the Guide share a row;
       the result card is just the score (the Results tab is above it) unless inputs changed */
    html.sidebar-plus body #navTool:not(.active) ~ .sb-steps { display:none !important; }
    html.sidebar-plus body .global-nav .global-tab { white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
    html.sidebar-plus:not(.sb-collapsed) body .sb-bottom { display:grid !important; grid-template-columns:auto minmax(0,1fr); }
    html.sidebar-plus:not(.sb-collapsed) body .sb-bottom .sb-status { grid-column:1 / -1; }
    html.sidebar-plus:not(.sb-collapsed) body .sb-disp-btn { width:42px; justify-content:center; padding:0; height:100%; }
    html.sidebar-plus body .sb-disp-label { display:none !important; }
    html.sidebar-plus body .sb-status [data-sb-act="results"] { display:none !important; }
    html.sidebar-plus body .sb-status .sb-score { flex-wrap:wrap; }
    html.sidebar-plus body #navResults .sb-long { display:none; }
    /* a tab shown again by script can lose its inline display:inline-flex (the Roth tab): keep every shown tab a flex row */
    html.sidebar-plus body .global-nav .global-tab:not([style*="none"]) { display:flex !important; align-items:center !important; }
    /* a bit tighter still (Plan Details shows the step list) */
    html.sidebar-plus body .global-nav .global-tab, html.sidebar-plus body .global-nav .rn-website-link { min-height:30px !important; padding:4px 10px !important; }
    html.sidebar-plus body .sb-hd:not([hidden]) { margin:5px 10px 1px !important; }
    html.sidebar-plus body .sb-steps button { padding:2px 8px !important; }
    html.sidebar-plus body .sb-steps strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    html.sidebar-plus body .sb-status .sb-eyebrow { display:none !important; }
    /* collapsed: a compass mark in place of the wide logo */
    html.sidebar-plus.sb-collapsed body .site-header #siteLogoImg { display:none !important; }
    html.sidebar-plus.sb-collapsed body .sb-mark { display:grid !important; place-items:center; width:46px; height:46px; margin:0 auto; border-radius:50%; background:var(--c-gray-95); }
    html.sidebar-plus.sb-collapsed body .sb-mark svg { width:30px; height:30px; }
    /* Display: one small button; its card opens over the page */
    .sb-display { position:relative; }
    .sb-disp-btn { display:flex; align-items:center; gap:8px; width:100%; min-height:34px; padding:5px 12px; border:1px solid var(--c-sage-90); border-radius:10px; background:var(--c-gray-99); color:var(--c-slate-35); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
    .sb-disp-btn:hover, .sb-disp-btn[aria-expanded="true"] { background:var(--c-gray-95); color:var(--c-teal-45); }
    .sb-disp-pop { position:fixed; z-index:1300; width:252px; padding:12px; border:1px solid var(--c-gray-90); border-radius:14px; background:var(--c-gray-99); box-shadow:0 14px 34px rgba(var(--c-shadow-rgb), 0.18); }
    .sb-disp-pop[hidden] { display:none !important; }
    .sb-disp-hd { margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c-slate-55); }
    .sb-disp-pop .ts-pick { margin-top:10px; }
    /* the ☰ in the workspace header */
    html.sidebar-plus .sb-collapse { display:inline-grid !important; place-items:center; flex:none; width:36px; height:36px; margin-right:6px; border:0; border-radius:9px; background:none; color:var(--c-slate-35); cursor:pointer; }
    html.sidebar-plus .sb-collapse:hover { background:var(--c-gray-95); }
    html.sidebar-plus body .compass-workspace-header { justify-content:flex-start !important; }
    html.sidebar-plus body .compass-workspace-header > div { flex:1; }
    /* collapsed: a strip of icons; names show as tooltips */
    html.sidebar-plus.sb-collapsed body .wrap { grid-template-columns:72px minmax(0,1fr) !important; }
    html.sidebar-plus.sb-collapsed body .site-header { padding:18px 10px !important; }
    html.sidebar-plus.sb-collapsed body .global-nav { padding:10px 8px !important; align-items:center !important; }
    html.sidebar-plus.sb-collapsed body .global-nav .global-tab, html.sidebar-plus.sb-collapsed body .global-nav .rn-website-link { width:44px !important; min-height:40px !important; padding:0 !important; justify-content:center !important; font-size:0 !important; gap:0 !important; }
    html.sidebar-plus.sb-collapsed body .global-nav .global-tab svg { width:20px !important; height:20px !important; flex:0 0 20px !important; }
    html.sidebar-plus.sb-collapsed body .global-nav .rn-website-link > span { font-size:16px !important; }
    html.sidebar-plus.sb-collapsed body .sb-hd, html.sidebar-plus.sb-collapsed body .sb-steps { display:none !important; }
    html.sidebar-plus.sb-collapsed body .sb-bottom { width:100%; align-items:center; background:none !important; box-shadow:none !important; }
    html.sidebar-plus.sb-collapsed body .sb-disp-btn { width:44px; justify-content:center; padding:0; }
    html.sidebar-plus.sb-collapsed body .sb-disp-label, html.sidebar-plus.sb-collapsed body .sb-guide-label { display:none !important; }
    html.sidebar-plus.sb-collapsed body .sb-guide { width:44px !important; justify-content:center !important; padding:0 !important; }
    html.sidebar-plus.sb-collapsed body .sb-status { width:56px; padding:6px 4px !important; align-items:center; }
    html.sidebar-plus.sb-collapsed body .sb-status > :not(.sb-score) { display:none !important; }
    html.sidebar-plus.sb-collapsed body .sb-score span { display:none !important; }
    html.sidebar-plus.sb-collapsed body .sb-score strong { font-size:15px !important; }
  }
}

/* Plan name rename pencil, and the footer under the page (2026-10-06) */
.ws-rename { display:inline-grid; place-items:center; width:26px; height:26px; margin:0 4px 0 -8px; padding:0; border:0; border-radius:7px; background:none; color:var(--c-slate-60); cursor:pointer; vertical-align:middle; }
.ws-rename[hidden] { display:none; }
.ws-rename:hover { background:var(--c-gray-95); color:var(--c-teal-45); }
.ws-rename-input { min-width:0; width:min(320px, 40vw); padding:4px 8px; border:1px solid var(--c-teal-50); border-radius:8px; background:var(--c-gray-99); color:var(--c-slate-25); font:inherit; font-size:16px; font-weight:700; }
@layer compassNavTop {
  @media (min-width:1001px) {
    html body .wrap > .app-footer { grid-column:2 !important; padding-left:34px !important; padding-right:34px !important; padding-bottom:18px !important; }
  }
}

/* ---------- 6. Desktop sidebar, option B (2026-10-15): one-line steps with ✓ / to fill, "5 of 7", Tools fold when it
   wouldn't fit, Help · Display · Ask in one row, the result card only when the bottom bar isn't showing it ---------- */
.plan-file-site .preset-btn { width:100%; justify-content:flex-start; min-height:42px; margin:0 !important; text-decoration:none; }
@layer studio { /* studio: the sidebar's look lives there, and its !important rules come first */
  .sb-prog, .sb-left, .sb-tools-more, .sb-help, .sb-count, .sb-em { display:none !important; }
  @media (min-width:1001px) {
    html.sidebar-plus body #mainToolNavigation .global-tab { min-height:33px !important; padding-top:3px !important; padding-bottom:3px !important; }
    html.sidebar-plus body #mainToolNavigation .sb-count { display:inline !important; margin-left:auto !important; padding-left:8px !important; font-size:12px !important; font-weight:600 !important; color:var(--s-muted, var(--c-slate-55)) !important; }
    html.sidebar-plus body #mainToolNavigation .sb-prog:not([hidden]) { order:2 !important; display:block !important; height:5px !important; margin:1px 10px 5px !important; border-radius:5px !important; background:var(--s-track, var(--c-gray-95)) !important; overflow:hidden !important; }
    html.sidebar-plus body #mainToolNavigation .sb-prog i { display:block !important; height:100% !important; border-radius:5px !important; background:var(--s-green, var(--c-green-50)) !important; transition:width .3s ease !important; }
    html.sidebar-plus body #mainToolNavigation .sb-left:not([hidden]) { order:2 !important; display:block !important; margin:-2px 10px 4px 37px !important; padding:0 !important; border:0 !important; background:none !important; font:inherit !important; font-size:12px !important; font-weight:600 !important; text-align:left !important; color:var(--s-amber, var(--c-orange-55)) !important; cursor:pointer !important; }
    html.sidebar-plus body #mainToolNavigation .sb-left:hover { text-decoration:underline !important; }
    /* the steps: one 28-px line each */
    html.sidebar-plus body #mainToolNavigation .sb-steps:not([hidden]) { margin:0 0 4px !important; padding:0 !important; border-left:0 !important; gap:0 !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps button { position:relative !important; align-items:center !important; gap:10px !important; height:28px !important; padding:0 10px !important; border-radius:8px !important; color:var(--s-ink2, var(--c-slate-35)) !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps button:hover { background:var(--s-soft, var(--c-gray-95)) !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps small { display:none !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps .sb-txt { flex:0 1 auto !important; min-width:0 !important; overflow:hidden !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps strong { font-size:13px !important; font-weight:500 !important; color:inherit !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps .sb-num { box-sizing:border-box !important; flex:0 0 18px !important; height:18px !important; margin:0 !important; border:1.5px solid var(--s-line2, var(--c-gray-90)) !important; background:transparent !important; color:var(--s-muted, var(--c-slate-55)) !important; font-size:10px !important; font-weight:800 !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps .sb-em { display:inline !important; margin-left:auto !important; padding-left:6px !important; font-style:normal !important; font-size:11.5px !important; white-space:nowrap !important; color:var(--s-muted, var(--c-slate-55)) !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps .is-done .sb-num { border-color:var(--s-green-l, var(--c-green-85)) !important; background:var(--s-green-l, var(--c-green-85)) !important; color:var(--s-green, var(--c-green-50)) !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps .is-todo .sb-num { border-color:var(--s-amber-l, var(--c-sand-99)) !important; background:var(--s-amber-l, var(--c-sand-99)) !important; color:var(--s-amber, var(--c-orange-55)) !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps .sb-em.is-fill { color:var(--s-amber, var(--c-orange-55)) !important; font-weight:600 !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps button.is-current { background:var(--s-blue-l, var(--c-gray-95)) !important; color:var(--s-blue, var(--c-teal-40)) !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps button.is-current strong { font-weight:600 !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps button.is-current .sb-num { border-color:var(--s-blue, var(--c-teal-50)) !important; background:var(--s-blue, var(--c-teal-50)) !important; color:var(--s-on, var(--c-gray-99)) !important; }
    html.sidebar-plus body #mainToolNavigation .sb-steps button.is-current::before { content:'' !important; position:absolute !important; left:0 !important; top:6px !important; bottom:6px !important; width:3px !important; border-radius:3px !important; background:var(--s-blue, var(--c-teal-50)) !important; }
    /* Tools: folded to one row only when the menu would scroll */
    html.sidebar-plus.sb-tools-fold body #mainToolNavigation :is(#navExpenses, #navRoth, #navTaxes, #navAca) { display:none !important; }
    html.sidebar-plus body #mainToolNavigation .sb-tools-more:not([hidden]) { order:8 !important; display:flex !important; align-items:center !important; gap:6px !important; min-height:33px !important; padding:0 10px 0 37px !important; border:0 !important; border-radius:10px !important; background:none !important; font:inherit !important; font-size:13.5px !important; font-weight:600 !important; color:var(--s-link, var(--c-teal-45)) !important; cursor:pointer !important; text-align:left !important; }
    html.sidebar-plus body #mainToolNavigation .sb-tools-more:hover { background:var(--s-soft, var(--c-gray-95)) !important; }
    /* Help joins Display and Ask in the bottom row; the website link is in the File menu */
    html.sidebar-plus body #mainToolNavigation :is(#navHelp, .sb-hd-help, .rn-website-link) { display:none !important; }
    html.sidebar-plus body #mainToolNavigation .sb-help { display:grid !important; place-items:center !important; width:42px !important; min-height:36px !important; padding:0 !important; border:1px solid var(--s-line, var(--c-sage-90)) !important; border-radius:12px !important; background:var(--s-card, var(--c-gray-99)) !important; color:var(--s-ink2, var(--c-slate-35)) !important; cursor:pointer !important; }
    html.sidebar-plus body #mainToolNavigation .sb-help:hover { background:var(--s-soft, var(--c-gray-95)) !important; }
    html.sidebar-plus:not(.sb-collapsed) body #mainToolNavigation .sb-bottom { grid-template-columns:auto auto minmax(0,1fr) !important; }
    html.sidebar-plus:not(.sb-collapsed) body #mainToolNavigation .sb-bottom { gap:6px !important; }
    html.sidebar-plus:not(.sb-collapsed) body #mainToolNavigation :is(.sb-help, .sb-disp-btn) { width:36px !important; }
    html.sidebar-plus:not(.sb-collapsed) body #mainToolNavigation .sb-guide { justify-content:center !important; gap:5px !important; padding:0 5px !important; }
    html.sidebar-plus:not(.sb-collapsed) body #mainToolNavigation .sb-guide > [aria-hidden="true"] { display:none !important; } /* the ✦ only on the icon strip: the words need the room */
    html.sidebar-plus:not(.sb-collapsed) body #mainToolNavigation .sb-guide-label { font-size:13px !important; }
    html.sidebar-plus body #mainToolNavigation .sb-status { order:-1 !important; }
    html.sidebar-plus.lb-on body #mainToolNavigation .sb-status, html.sidebar-plus body #mainToolNavigation .sb-status[data-fresh="1"] { display:none !important; } /* the bar under the page, or the page, shows the result */
    html.sidebar-plus.sb-collapsed body #mainToolNavigation :is(.sb-count, .sb-prog, .sb-left, .sb-tools-more) { display:none !important; }
    html.sidebar-plus.sb-collapsed body #mainToolNavigation .sb-help { width:44px !important; }
    /* a short window: smaller rows before the menu has to scroll (the bottom row stays put) */
    @media (max-height:760px){
      html.sidebar-plus body #mainToolNavigation .sb-steps button { height:24px !important; }
      html.sidebar-plus body #mainToolNavigation .global-tab { min-height:30px !important; padding-top:2px !important; padding-bottom:2px !important; }
    }
    /* focus: a blue ring for the keyboard, nothing after a click (2026-10-15: the black ring read as an error) */
    html body #mainToolNavigation :is(.global-tab, .sb-steps button, .sb-left, .sb-tools-more, .sb-help, .sb-guide, .sb-disp-btn):focus-visible:not(#a11y-a):not(#a11y-b) { outline:2px solid var(--s-blue, var(--c-teal-50)) !important; outline-offset:-2px !important; }
    html body #mainToolNavigation :is(.global-tab, .sb-steps button, .sb-left, .sb-tools-more, .sb-help):focus:not(:focus-visible) { outline:none !important; }
  }
}

/* ---------- 7. The welcome (2026-10-15, index.html .qsw-*): while the two ways to start show (#qsWrapper.qs-choosing) —
   a picture, the question / the two ways in / the promises in one panel over its lower edge, what you'll find out, and
   how your plan stays private. In @layer studio so it wins over the older Quick Start rules. ---------- */
@layer studio {
  .qsw-band, .qsw-more, .qsw-lede, .qsw-promise, .qs-h1-short { display:none !important; }
  html body #qsWrapper.qs-choosing .qsw-band { display:block !important; height:400px; margin:0; border-radius:22px; overflow:hidden; background:var(--s-track, var(--c-gray-95)); }
  html body #qsWrapper.qs-choosing .qsw-img { display:block; width:100%; height:100%; object-fit:cover; object-position:64% 58%; }
  html body #qsWrapper.qs-choosing .qsw-panel { position:relative; width:min(720px, calc(100% - 48px)); margin:-96px 0 0 24px; padding:30px 32px 24px; border-radius:18px; background:var(--s-card, var(--c-gray-99)); box-shadow:0 18px 40px -18px rgba(var(--s-shadow-rgb, var(--c-shadow-rgb)), .3); }
  html body #qsWrapper.qs-choosing .qsw-panel .section-title { margin:0 !important; padding:0 !important; border:0 !important; }
  html body #qsWrapper.qs-choosing .qs-h1 { font-size:40px !important; line-height:1.08 !important; letter-spacing:-.025em !important; }
  html body #qsWrapper.qs-choosing :is(.qs-h1-long, .qs-h1-sub, .qs-intro, .section-title .st-qm, .section-title .qm) { display:none !important; }
  html body #qsWrapper.qs-choosing .qs-h1-short { display:inline !important; }
  html body #qsWrapper.qs-choosing .qsw-lede { display:block !important; margin:10px 0 22px; max-width:56ch; font-size:17px; line-height:1.55; color:var(--s-ink2, var(--c-slate-35)); }
  /* the two ways in: real buttons, the first one filled */
  html body #qsWrapper.qs-choosing .qs-choose { display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; margin:0 !important; }
  html body #qsWrapper.qs-choosing .qs-choice { gap:1px !important; padding:15px 18px !important; border:1.5px solid var(--s-line2, var(--c-gray-90)) !important; border-radius:13px !important; background:var(--s-card, var(--c-gray-99)) !important; box-shadow:none !important; }
  html body #qsWrapper.qs-choosing .qs-choice:hover { border-color:var(--s-blue, var(--c-teal-50)) !important; }
  html body #qsWrapper.qs-choosing .qs-choice strong { font-size:17px !important; font-weight:700 !important; color:var(--s-ink, var(--c-slate-25)) !important; }
  html body #qsWrapper.qs-choosing .qs-choice-time { font-size:14px !important; font-weight:400 !important; color:var(--s-muted, var(--c-slate-45)) !important; }
  html body #qsWrapper.qs-choosing :is(.qs-choice-tag, .qs-choice-what, .qs-choice-go) { display:none !important; }
  html body #qsWrapper.qs-choosing .qs-choice-quick { background:var(--s-blue, var(--c-teal-50)) !important; border-color:var(--s-blue, var(--c-teal-50)) !important; }
  html body #qsWrapper.qs-choosing .qs-choice-quick:hover { background:var(--s-blue-d, var(--c-teal-45)) !important; }
  html body #qsWrapper.qs-choosing .qs-choice-quick :is(strong, .qs-choice-time) { color:var(--s-on, var(--c-gray-99)) !important; }
  html body #qsWrapper.qs-choosing .qs-choice-quick .qs-choice-time { opacity:.86; }
  html body #qsWrapper.qs-choosing .qs-choice:focus-visible { outline:3px solid var(--s-blue, var(--c-teal-50)) !important; outline-offset:3px !important; }
  /* the promises: three checks, right where people decide */
  html body #qsWrapper.qs-choosing .qsw-promise { display:flex !important; flex-wrap:wrap; gap:6px 22px; margin:18px 0 0; padding:0; list-style:none; font-size:14px; color:var(--s-ink2, var(--c-slate-35)); }
  html body #qsWrapper.qs-choosing .qsw-promise li { display:flex; align-items:center; gap:7px; }
  html body #qsWrapper.qs-choosing .qsw-promise li::before { content:''; flex:none; width:15px; height:15px; background:var(--s-blue, var(--c-teal-50)); -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>") center/15px no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>") center/15px no-repeat; }
  /* below the panel */
  html body #qsWrapper.qs-choosing .qsw-more { display:block !important; max-width:1040px; }
  html body #qsWrapper.qs-choosing .qsw-back { margin:14px 0 0 26px; font-size:14.5px; color:var(--s-muted, var(--c-slate-50)); }
  html body #qsWrapper.qs-choosing .qsw-open { display:inline; min-height:0; padding:0; border:0; background:none; font:inherit; font-weight:600; color:var(--s-link, var(--c-teal-45)); cursor:pointer; }
  html body #qsWrapper.qs-choosing .qsw-open:hover { text-decoration:underline; }
  html body #qsWrapper.qs-choosing .qsw-h2 { margin:52px 0 14px !important; padding:0 !important; font-size:22px !important; font-weight:700 !important; letter-spacing:-.01em; color:var(--s-ink, var(--c-slate-25)) !important; }
  html body #qsWrapper.qs-choosing .qsw-qa { margin:0; border-top:1px solid var(--s-line, var(--c-gray-90)); }
  html body #qsWrapper.qs-choosing .qsw-qa > div { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:6px 32px; padding:15px 2px; border-bottom:1px solid var(--s-line, var(--c-gray-90)); }
  html body #qsWrapper.qs-choosing .qsw-qa dt { font-weight:600; font-size:16px; color:var(--s-ink, var(--c-slate-25)); }
  html body #qsWrapper.qs-choosing .qsw-qa dd { margin:0; max-width:62ch; font-size:15px; color:var(--s-ink2, var(--c-slate-35)); }
  html body #qsWrapper.qs-choosing .qsw-priv { display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; margin:40px 0 8px; padding:22px 24px; border-radius:16px; background:var(--s-amber-l, var(--c-sand-99)); }
  html body #qsWrapper.qs-choosing .qsw-priv svg { width:26px; height:26px; margin-top:2px; fill:none; stroke:var(--s-ink2, var(--c-slate-35)); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  html body #qsWrapper.qs-choosing .qsw-priv h3 { margin:0 0 4px; font-size:17px; color:var(--s-ink, var(--c-slate-25)); }
  html body #qsWrapper.qs-choosing .qsw-priv p { margin:0; max-width:70ch; font-size:15px; color:var(--s-ink2, var(--c-slate-35)); }
  @media (max-width:760px){
    html body #qsWrapper.qs-choosing .qsw-band { height:210px; border-radius:16px; }
    html body #qsWrapper.qs-choosing .qsw-panel { width:auto; margin:-40px 10px 0; padding:22px 20px 18px; }
    html body #qsWrapper.qs-choosing .qs-h1 { font-size:30px !important; }
    html body #qsWrapper.qs-choosing .qs-choose { grid-template-columns:1fr !important; }
    html body #qsWrapper.qs-choosing .qsw-back { margin-left:12px; }
    html body #qsWrapper.qs-choosing .qsw-qa > div { grid-template-columns:1fr; }
  }
  /* the sidebar's "Not run yet" card has nothing to do here */
  html body #mainToolNavigation .sb-status[data-welcome="1"] { display:none !important; }
}