/* Compass mobile app layout (2026-09-24) — see js/20-mobile-app.js. Loaded after compass-navigation.css.
   Everything here is scoped to ≤700px except the Run button fix, which applies everywhere. */

/* ---------- Run button: a normal wide button, not a 340×370 tile (all widths) ----------
   Its icon/text styles were keyed to onclick="runSimulation()", which changed to
   runSimulationFromButton(), so the SVG grew to fill the button. */
@layer compassNavTop {
  #runSimBtn.runbtn { display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:14px !important;
    width:100% !important; max-width:440px !important; height:auto !important; min-height:60px !important; margin:18px 0 6px !important; padding:10px 18px 10px 12px !important; text-align:left !important; }
  #runSimBtn .mc-cta-icon { flex:0 0 40px !important; width:40px !important; height:40px !important; display:grid !important; place-items:center !important; border-radius:10px !important; background:rgba(var(--c-gray-99-rgb), 0.18) !important; margin:0 !important; }
  #runSimBtn .mc-cta-icon svg { width:22px !important; height:22px !important; }
  #runSimBtn .mc-cta-copy { display:flex !important; flex-direction:column !important; gap:1px !important; min-width:0 !important; }
  #runSimBtn .mc-cta-title { font-size:16px !important; font-weight:800 !important; line-height:1.2 !important; color:var(--c-gray-99) !important; }
  #runSimBtn .mc-cta-subtitle { font-size:12px !important; font-weight:600 !important; line-height:1.2 !important; opacity:.85 !important; color:var(--c-gray-99) !important; letter-spacing:.02em !important; text-transform:none !important; }
    @media (max-width:700px) { #runSimBtn.runbtn { max-width:none !important; } }
  /* keep the step pages working: the display:flex above must not show it on steps 1–3 */
  #advancedInputSections.plan-steps-on:not([data-current-step="7"]) #runSimBtn.runbtn { display:none !important; }
}

/* ---------- mobile only ---------- */
.mf-row, .mf-steps, .mf-actionbar, .mf-app-title, .mf-progress, .mf-only { display:none; }
@media (max-width:700px) {
  html.mf-on .mf-folded { display:none !important; }

  /* one-line summary rows */
  html.mf-on .mf-row:not([hidden]) { grid-column:1 / -1; display:flex; align-items:center; gap:10px; width:100%; min-height:56px; margin:0 0 8px; padding:10px 14px;
    border:1px solid var(--c-gray-90); border-radius:14px; background:var(--c-gray-99); color:var(--c-slate-30); font:inherit; text-align:left; cursor:pointer; box-shadow:0 1px 2px rgba(var(--c-shadow-rgb), 0.04); }
  html.mf-on .mf-row.is-open { border-color:var(--c-sage-85); background:var(--c-gray-99); min-height:44px; margin-bottom:6px; }
  .mf-row-main { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
  .mf-row-main strong { font-size:15px; font-weight:750; line-height:1.25; }
  .mf-row-main small { font-size:13px; color:var(--c-slate-50); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mf-row-side { flex:0 0 auto; display:flex; align-items:center; gap:8px; }
  .mf-check { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--c-sage-95); color:var(--c-green-50); font-weight:800; font-size:13px; }
  .mf-chev { color:var(--c-slate-70); font-size:22px; line-height:1; }
  .mf-todo { color:var(--c-orange-55); font-size:13px; font-weight:700; }
  .mf-need { padding:4px 9px; border-radius:999px; background:rgba(var(--c-orange-55-rgb), 0.12); color:var(--c-orange-55); font-size:12px; font-weight:800; white-space:nowrap; }
  html.mf-on .mf-row.has-missing:not(.is-open) { border-color:rgba(var(--c-orange-55-rgb), 0.45); }
  .mf-chip { padding:5px 10px; border-radius:999px; background:var(--c-gray-95); color:var(--c-teal-45); font-size:12.5px; font-weight:700; }
  html.mf-on .mf-row-group:not(.is-open) small { color:var(--c-teal-45); }

  /* other steps as rows */
  html.mf-on .mf-steps { display:flex; flex-direction:column; gap:8px; margin:0 0 12px; }
  html.mf-on .mf-steps:empty { display:none; }
  html.mf-on .mf-steps-after { margin-top:16px; }
  .mf-step { display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:10px 14px; border:1px solid var(--c-gray-90); border-radius:14px; background:var(--c-gray-99); color:var(--c-slate-30); font:inherit; text-align:left; cursor:pointer; }
  .mf-step-num { flex:0 0 28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--c-gray-95); color:var(--c-slate-50b); font-weight:800; font-size:13px; }
  .mf-step.is-done .mf-step-num { background:var(--c-teal-50); color:var(--c-gray-99); }
  html.mf-on #advancedInputSections.plan-steps-on .compass-plan-steps { display:none !important; }

  /* action bar above the bottom tabs */
  html.mf-on .mf-actionbar:not([hidden]) { display:flex; gap:8px; position:fixed; left:0; right:0; z-index:890;
    bottom:calc(64px + env(safe-area-inset-bottom, 0px)); padding:8px 12px; background:rgba(var(--c-gray-99-rgb), 0.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--c-gray-95); }
  .mf-ab-btn { flex:1 1 0; min-width:0; min-height:48px; padding:8px 12px; border-radius:12px; border:1px solid var(--c-slate-85); background:var(--c-gray-99); color:var(--c-teal-40); font:inherit; font-size:15px; font-weight:750; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mf-ab-narrow { flex:0 0 auto; }
  .mf-ab-primary { flex:2 1 0; background:var(--c-teal-50); border-color:var(--c-teal-50); color:var(--c-gray-99); box-shadow:0 6px 14px rgba(var(--c-shadow-rgb), 0.22); }
  .mf-ab-run { background:var(--c-amber-65); border-color:var(--c-amber-65); box-shadow:0 6px 14px rgba(var(--c-amber-65-rgb), 0.25); }
  .mf-ab-warn { background:var(--c-sand-95); border-color:var(--c-amber-75); color:var(--c-amber-50b); box-shadow:none; }
  html.mf-on.mf-actionbar-on body { padding-bottom:calc(136px + env(safe-area-inset-bottom, 0px)) !important; }
  html.mf-on .plan-step-nav { display:none !important; }

  /* app header */
  html.mf-on .site-header { position:sticky; top:0; z-index:880; display:flex !important; align-items:center; gap:12px; min-height:52px;
    margin:0 -12px 10px !important; padding:6px 14px !important; background:rgba(var(--c-gray-99-rgb), 0.96) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:0 !important; border-bottom:1px solid var(--c-gray-95) !important; border-radius:0 !important; box-shadow:none !important; }
  html.mf-on .site-header .site-logo-link { flex:0 0 auto; width:auto !important; max-width:none !important; }
  html.mf-on .site-header #siteLogoImg { height:30px !important; width:auto !important; max-width:120px !important; }
  html.mf-on .mf-app-title { display:flex; flex-direction:column; align-items:flex-end; margin-left:auto; min-width:0; text-align:right; }
  .mf-app-title strong { font-size:14.5px; color:var(--c-slate-30); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px; }
  .mf-app-title span { font-size:11.5px; color:var(--c-slate-60); font-weight:600; }
  html.mf-on .mf-progress:not([hidden]) { display:flex; gap:4px; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; }
  .mf-progress span { flex:1; border-radius:2px; background:var(--c-gray-95); }
  .mf-progress span.is-done { background:var(--c-teal-50); }
  .mf-progress span.is-current { background:var(--c-teal-75); }

  /* less chrome: the step rows and header already say where you are */
  html.mf-on .adv-group-label { display:none !important; }
  html.mf-on #toolView .compass-plan-glance { display:none !important; }
  html.mf-on .mf-only { display:flex; }
  html.mf-on.mf-actionbar-on #resultsView .rn-result-actions { display:none !important; } /* same three actions live in the action bar */
  html.mf-on #planBarMode, html.mf-on #planBarTour { display:none !important; }

  /* app touch feel */
  html.mf-on button, html.mf-on .toggle-btn, html.mf-on .preset-btn { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  html.mf-on .mf-row:active, html.mf-on .mf-step:active, html.mf-on .mf-ab-btn:active, html.mf-on .toggle-btn:active, html.mf-on .preset-btn:active { transform:scale(.985); transition:transform .08s; }
  html.mf-on .field input:not([type=checkbox]):not([type=radio]):not([type=range]), html.mf-on .field select { font-size:16px !important; } /* no iOS zoom on focus */
  html.mf-on #advancedInputSections [data-plan-step] { animation:mfIn .18s ease-out; }
  @keyframes mfIn { from { opacity:.4; } to { opacity:1; } }
  @media (prefers-reduced-motion:reduce) { html.mf-on #advancedInputSections [data-plan-step] { animation:none; } }
}
@layer compassNavTop {
  @media (max-width:700px) {
    html.mf-on .field input:not([type=checkbox]):not([type=radio]):not([type=range]), html.mf-on .field select { font-size:16px !important; }
    html.mf-on .site-header { position:sticky !important; top:0 !important; z-index:880 !important; }
    html.mf-on .plan-bar-actions { display:flex !important; width:auto !important; }
    html.mf-on .plan-bar-main { flex:1 1 0 !important; }
    html.mf-on .plan-bar { flex-wrap:nowrap !important; }
    html.mf-on .plan-bar #autosaveIndicator { display:none !important; }
  }
}
/* Phones: each Retirement details group folds under its own row, which already names it (2026-10-01). */
@media (max-width:700px) { html.mf-on .rd-group:is(.rd-you,.rd-saving,.rd-match,.rd-ss,.rd-assume,.rd-spend,.rd-heirs) .rd-group-h h3 { display:none; } html.mf-on .rd-group:is(.rd-you,.rd-saving,.rd-match,.rd-ss,.rd-assume,.rd-spend,.rd-heirs) { border-bottom:0; padding-bottom:4px; margin-bottom:4px; } }

/* Retirement details on wider screens (2026-10-02): Assumptions and Heirs fold to one summary line (js/17).
   Phones keep their own folded rows (js/20), so the bar is hidden there. */
.rd-fold { display:none; }
@media (min-width:701px) {
  .rd-fold { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 10px; }
  .rd-fold-sum { font-size:14px; color:var(--c-slate-35); }
  html body .rd-fold-btn { 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:13.5px; font-weight:700; color:var(--c-teal-50); cursor:pointer; }
  .rd-group.rd-collapsed > .inputs-grid, .rd-group.rd-collapsed > .rd-group-h p { display:none; }
}

/* About you · spouse question (2026-10-02, js/17) */
.rd-spouse-row { max-width:360px; margin-bottom:0; }
.rd-spouse-row .toggle-btn { flex:1; justify-content:center; text-align:center; }

/* Spending goal per month / per year, and the withdrawal method beside it (2026-10-02, js/17) */
.rd-spend-h { margin:6px 0 6px; font-size:14px; font-weight:700; color:var(--c-sage-30); }
.rd-spend-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:520px; }
.rd-spend-grid > div { display:flex; flex-direction:column; min-width:0; }
/* Quick Start's spending question (2026-10-03, index.html #qsIncomeField): the full row, not one grid cell. */
#qsIncomeField { grid-column:1 / -1; }
.rd-wd { grid-column:1 / -1; margin-top:6px; }
.rd-wd .toggle-row { flex-wrap:wrap; }

/* 2026-10-13 (user: "the mobile workflow needs to be looked at"): the steps before this one are a row of small chips
   ("✓ You  ✓ Sam  ✓ Savings"), not a screenful of cards, so each step's own questions start near the top; the plan's name
   box only on the first step. The steps after it stay as cards below. */
@media (max-width:700px){
  html.mf-on .mf-steps-before { flex-direction:row !important; flex-wrap:wrap; gap:6px !important; margin:0 0 10px !important; }
  html.mf-on .mf-steps-before .mf-step { width:auto; min-height:36px; padding:4px 12px 4px 5px; gap:6px; border-radius:999px; }
  html.mf-on .mf-steps-before .mf-step-num { flex:0 0 24px; height:24px; font-size:11px; }
  html.mf-on .mf-steps-before .mf-row-main strong { font-size:13.5px; }
  html.mf-on .mf-steps-before :is(.mf-row-main small, .mf-chev) { display:none; }
  html.mf-on:has(#advancedInputSections[data-current-step]:not([data-current-step="1"])) :is(.plan-bar-name-slot, .plan-bar-main) { display:none !important; }
  html.mf-on:has(#advancedInputSections[data-current-step]:not([data-current-step="1"])) #planBar { padding:0 !important; margin:0 !important; min-height:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
}