/* Phone tidy-up (2026-09-26): less chrome, fewer boxes, more room for the page itself. Phones only (≤700px).
   Loaded last. Desktop and tablet are unchanged. */
.xb-add-select { display:none; }
@media (max-width:700px){
  /* 1. The live result bar: a thin strip attached to the header, not a floating card. */
  .lb { margin:0 -12px 10px !important; padding:5px 14px !important; border-width:0 0 1px !important; border-radius:0 !important;
    box-shadow:none !important; background:rgba(var(--c-gray-99-rgb), 0.96) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .lb .lb-item strong { font-size:15px; }
  .lb .lb-sr strong { font-size:16px; }
  .lb-dot { width:8px; height:8px; flex-basis:8px; }
  .lb-state.lb-ok { display:none; }
  .lb .lb-live { min-height:28px !important; padding:2px !important; border:0 !important; background:transparent !important; }
  .lb.lb-flash { animation:none; }

  /* 2. Page headers: the app header already names the page, so drop the eyebrow, shrink the title,
     keep the intro to two lines, and make "How this page works" a plain link. */
  #expensesView > .hero, #rothView > .hero, #cashflowView > .hero, #taxesView > .hero, #paycheckView > .hero,
  #networthView > .hero, #summaryView > .hero, #helpView > .hero { padding:4px 2px 10px !important; margin-bottom:10px !important; border:0 !important; }
  .hero > .tag, #helpView .hero-eyebrow { display:none !important; }
  #expensesView > .hero :is(h1,.pg-h1), #rothView > .hero :is(h1,.pg-h1), #cashflowView > .hero :is(h1,.pg-h1), #taxesView > .hero :is(h1,.pg-h1), #paycheckView > .hero :is(h1,.pg-h1),
  #networthView > .hero :is(h1,.pg-h1), #summaryView > .hero :is(h1,.pg-h1), #helpView > .hero :is(h1,.pg-h1) { font-size:21px !important; line-height:1.25 !important; margin:0 0 4px !important; }
  #expensesView > .hero .hero-sub, #rothView > .hero .hero-sub, #cashflowView > .hero .hero-sub, #taxesView > .hero .hero-sub, #paycheckView > .hero .hero-sub,
  #networthView > .hero .hero-sub, #summaryView > .hero .hero-sub, #helpView > .hero .hero-sub {
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px !important; line-height:1.45 !important; }
  .ug-pagehelp { margin-top:6px; min-height:0; padding:2px 0; border:0; background:transparent; font-size:12.5px; }
  .ug-pagehelp span { width:16px; height:16px; font-size:10px; line-height:16px; }

  /* 3. Expense Planner footer: one slim row — totals on the left, Prefer / Need / Flex on the right.
     (Return to Plan is the Plan tab; the last-run line is in the result bar.) */
  .xb-foot { margin:14px -12px 0 !important; padding:6px 12px !important; gap:4px 10px !important; flex-wrap:nowrap !important; align-items:center !important;
    border-radius:0 !important; border-width:1px 0 0 !important; box-shadow:0 -4px 12px rgba(var(--c-shadow-rgb), 0.06) !important; }
  html.mf-actionbar-on .xb-foot { bottom:calc(132px + env(safe-area-inset-bottom, 0px)); }
  .xb-foot .xb-return, .xb-foot .xb-foot-res, .xb-foot .xb-foot-sub, .xb-foot .xb-foot-cap { display:none !important; }
  .xb-foot-sum { flex:1 1 auto !important; flex-basis:auto !important; display:block !important; min-width:0; }
  .xb-foot-nums { flex-direction:column; align-items:flex-start; justify-content:flex-start !important; gap:0 !important; }
  .xb-foot-nums span { white-space:nowrap; }
  .xb-foot-nums b { font-size:14.5px !important; }
  .xb-foot-nums em { font-size:11px !important; display:inline-block; min-width:40px; }
  .xb-basis { flex:0 0 auto !important; padding:3px !important; }
  .xb-basis > span { display:none; }
  .xb-basis button { min-height:30px !important; padding:4px 10px !important; font-size:12.5px !important; }
  .xb-flexrow { position:absolute; left:12px; right:12px; bottom:100%; padding:6px 10px; border-radius:10px 10px 0 0; background:var(--c-gray-99); border:1px solid var(--c-gray-95); border-bottom:0; }

  /* 4. Add a category: one menu instead of twenty buttons. */
  .xb-add .xb-chips { display:none; }
  .xb-add-select { display:block; width:100%; min-height:44px; padding:0 12px; border:1px dashed var(--c-sage-85b); border-radius:12px; background:var(--c-gray-99);
    color:var(--c-teal-50); font:inherit; font-size:14.5px; font-weight:700; }
  .xb-add-title { display:none; }
}
/* Spending picture folds on a phone (js sets it closed there); the budget lines come first. */
.xb-picture > summary { list-style:none; cursor:pointer; }
.xb-picture > summary::-webkit-details-marker { display:none; }
.xb-picture > summary .num { transition:transform .15s; }
.xb-picture[open] > summary .num { transform:rotate(90deg); }
@media (max-width:700px){
  /* 5. Expense Planner: the on/off is one small switch now (2026-09-27), so it stays. */
  /* 6. Results: the tab bar already has Plan and Report, so keep only "Compare improvements". */
  .rn-result-actions > button:first-child, .rn-result-actions > button:last-child:not(:first-child) { display:none !important; }
  /* 7. Accounts: the long "how portfolios blend" paragraph lives in the User Guide. */
  #blendPortfoliosPanel > div:nth-child(2) { display:none; }
}
@media (max-width:700px){
  /* 8. Budget intro: three lines on a phone (the full explanation is in the User Guide). */
  #expensesView .xb-intro { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:13.5px; }
}

/* 2026-09-26: the sticky header bleeds 12px past .wrap's padding (3px beyond a 390px screen), which let the
   page scroll sideways. Clip (not hidden) keeps position:sticky working. */
@media (max-width: 700px){ html, body { overflow-x: clip; } }

/* 2026-09-26 (user: "too much padding on the sides", Expense Planner too wordy, landscape menu in the way).
   These live in the theme's first cascade layer: the theme (and two later layers) set these with
   !important inside layers, and a layered !important beats an unlayered one. "html body" wins within it. */
@layer compassAppRefresh {
@media (max-width:700px){
  /* Use the width: thinner page gutter and panel padding; nested cards lose a level of inset. */
  html body .wrap { padding-left:6px !important; padding-right:6px !important; }
  /* The app header spans the screen edge to edge (the wrap's 6px), with the logo and title 12px in. */
  html.mf-on body .site-header { margin-left:-6px !important; margin-right:-6px !important; padding-left:12px !important; padding-right:12px !important; }
  html body .panel, html body #resultsPanel > .panel { padding-left:12px !important; padding-right:12px !important; }
  html body #resultsPanel .dash-banner { padding-left:16px !important; padding-right:16px !important; }
  html body #cashflowView .panel, html body #cashflowView [id^="cfTab"] { padding-left:8px !important; padding-right:8px !important; }
  html body #cashflowView .fan-chart-canvas-wrap { padding-left:0 !important; padding-right:0 !important; }
  /* Expense Planner: the budget first. Nothing to picture yet → no Spending Picture; the second heading,
     the intro, the import instructions and the Back/Run panel go (the User Guide has them; results are live). */
  html.exp-empty body #expPictureDetails { display:none !important; }
  html body #expensePlannerSection > .section-title, html body #expensesView .xb-intro, html body #expensesView .xb-tools-note, html body #expRunPanel, html body #expensesView .xb-events-desc { display:none !important; }
  html body #expensesView .xb-tools { margin:0 0 10px !important; }
  html body #expensesView .xb-tools label.xb-btn { min-height:0 !important; padding:6px 0 !important; border:0 !important; background:none !important; box-shadow:none !important; color:var(--c-teal-50) !important; font-size:14px !important; text-decoration:underline; text-underline-offset:3px; }
  html body #expEventsPanel > summary { padding:12px 14px !important; }
  html body #expensesView .xb-empty { padding:18px 14px !important; }
  html body #expensesView .xb-empty p { font-size:14px !important; margin:6px 0 12px !important; }
}
/* A phone held sideways (short and touch): the section menu is a single scrolling row that scrolls away
   with the page instead of a three-row block stuck over the content. */
@media (max-height:500px) and (pointer:coarse){
  html body #mainToolNavigation { position:static !important; top:auto !important; display:flex !important; flex-wrap:nowrap !important; gap:6px !important; overflow-x:auto !important; padding:6px !important; margin-bottom:10px !important; scrollbar-width:none; grid-template-columns:none !important; }
  html body #mainToolNavigation::-webkit-scrollbar { display:none; }
  html body #mainToolNavigation > * { flex:0 0 auto !important; min-height:38px !important; padding:6px 12px !important; font-size:13px !important; white-space:nowrap !important; width:auto !important; }
  html body #mainToolNavigation br { display:none; }
}
}
/* Cash Flow, one year (2026-09-26): on phones the year controls stay pinned while the diagram is on screen
   (js/13 cfSankeyPhoneLayout adds .cf-sk-sticky and --cf-stick-top; the summary tiles move below the chart). */
.cf-sk-controls.cf-sk-sticky { position:sticky; top:var(--cf-stick-top, 0px); z-index:30; gap:6px; margin:0 -8px 8px; padding:8px 8px 6px; background:rgba(var(--c-gray-99-rgb), 0.97); border-bottom:1px solid var(--c-gray-95); box-shadow:0 6px 14px -10px rgba(var(--c-shadow-rgb), 0.35); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.cf-sk-sticky .cf-sk-head { align-items:center; flex-wrap:nowrap; }
.cf-sk-sticky .cf-sk-label { display:none; }
.cf-sk-sticky #cfSkAge { font-size:20px !important; }
.cf-sk-sticky .cf-sk-dollars button { padding:6px 10px !important; min-height:0 !important; font-size:12.5px !important; }
.cf-sk-sticky .cf-sk-btn { width:38px !important; height:38px !important; min-height:0 !important; }
.cf-sk-sticky .cf-sk-ends { font-size:11px; }
#cfSkSummary + .cf-sk-detail, .fan-chart-canvas-wrap + #cfSkSummary { margin-top:10px; }

/* QA 2026-09-27: tablets (701–1000px) and phones held sideways. The three-row section menu stayed stuck at
   the top (a fifth of an iPad screen) and the plan step bar hid behind it or under the live result bar.
   The menu now scrolls away; only the live result bar stays at the top. compassNavTop is the first layer,
   so these win over the theme's layered !important sticky rules. */
@layer compassNavTop {
  @media (min-width:701px) and (max-width:1000px), (min-width:701px) and (max-height:500px) {
    html body #mainToolNavigation.global-nav { position:relative !important; top:auto !important; }
    html body #advancedInputSections.plan-steps-on .compass-plan-steps { position:relative !important; top:auto !important; }
  }
}

/* QA 2026-09-27: on computers the live result bar floats at the bottom of the screen; leave room under the
   page so the last buttons (Next, Run) can always scroll clear of it. */
@layer compassNavTop {
  @media (min-width:1001px) { html body .wrap { padding-bottom:110px !important; } }
}
/* Phone polish (QA 2026-09-27): an opaque app header (content showed through it), 40px tap targets for the
   live toggle, and the Tools sheet stops above the tab bar so Plan / Results / Report / Guide stay tappable. */
@layer compassNavTop {
  @media (max-width:700px) {
    html.mf-on body .site-header { background:var(--c-gray-99) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
    html body .lb .lb-live { min-width:40px; min-height:40px; }
  }
}
@layer compassNavTop {
  @media (max-width:700px) {
    html body .mobile-tools-sheet:not([hidden]) { bottom:calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
    html body .mts-panel { max-height:calc(100% - 24px); overflow-y:auto; padding-bottom:14px !important; }
    /* 2026-10-05: in the height-capped column the items shrank and cut their descriptions off (worse at larger text sizes); keep their height and scroll instead. */
    html body .mts-panel > * { flex-shrink:0; }
  }
  /* Tablet Plan Summary: the year-by-year table scrolls inside its box instead of widening the page. */
  @media (max-width:1000px) { html body .pr .pr-yby { display:block; max-width:100%; overflow-x:auto; } }
}
@layer compassNavTop {
  @media (max-width:700px) {
    /* The action bar already has Print / Save PDF on Plan Summary. */
    html.mf-on body .pr-head .pr-btn[onclick*="openPrintable"] { display:none !important; }
    /* The header says "Step 3 of 4"; the old section badges (02, 02a, 02p) contradicted it. */
    html.mf-on body #toolView .section-title .num { display:none !important; }
  }
}
/* The app header already shows the logo on a phone; the report's own logo is for print. */
@media screen and (max-width:700px) { html.mf-on #summaryView .pr-logo { display:none; } }

/* Your Accounts: one quiet line to Quick & Simple instead of a full-width box (2026-09-27). */
@layer compassNavTop {
      }

/* More room on phones (2026-10-03, js/20): a slimmer header, and header + tab bar slide away while scrolling
   down (html.mf-chrome-hidden). In the app theme's layer so its 66px header minimum gives way. */
@layer compassAppRefresh {
  @media (max-width:700px){
    html.mf-on body .site-header { min-height:48px !important; padding-top:4px !important; padding-bottom:4px !important; }
    html.mf-on body .site-header #siteLogoImg, html.mf-on body .site-header .site-logo-link .site-logo { height:26px !important; }
    html.mf-on body .mf-app-title strong { font-size:14px !important; }
  }
}
html.mf-on .site-header, html.mf-on #liveBar, html.mf-on #mobileTabBar { transition:transform .22s ease; will-change:transform; }
html.mf-on #mobileActionBar { transition:bottom .22s ease, padding-bottom .22s ease; }
html.mf-on.mf-chrome-hidden .site-header { transform:translateY(calc(-1 * var(--mf-head-h, 60px) - 2px)); }
html.mf-on.mf-chrome-hidden #liveBar { transform:translateY(calc(-1 * var(--mf-head-h, 60px))); }
html.mf-on.mf-chrome-hidden #mobileTabBar { transform:translateY(calc(var(--mf-tab-h, 70px) + 4px)); }
/* The Back / Next bar sits on the bottom edge itself (2026-10-03): it was moved down by a distance measured from the
   window height, which iPhone Safari changes while its own toolbar shrinks — the bar ended up half off the screen. */
html.mf-on.mf-chrome-hidden #mobileActionBar { bottom:0; padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce){ html.mf-on .site-header, html.mf-on #liveBar, html.mf-on #mobileTabBar, html.mf-on #mobileActionBar { transition:none; } }

/* Edge to edge on iPhone (2026-10-03, viewport-fit=cover in index.html): Safari no longer keeps an empty strip under the
   page; the tab bar and the Back / Next bar already add env(safe-area-inset-bottom). In landscape, keep the page clear
   of the notch and rounded corners. */
@supports (padding: max(0px)) {
  body { padding-left:max(0px, env(safe-area-inset-left)); padding-right:max(0px, env(safe-area-inset-right)); }
}

/* All ways to improve, as cards on a phone (2026-10-03): the amount and its change are one block on the right, the change
   on its own line (it ran off the card); the "scroll sideways" hint is for the computer table only. */
@media (max-width:700px){
  html body #diagnosticTable td .dt-val { display:flex; flex-direction:column; align-items:flex-end; min-width:0; text-align:right; white-space:normal; }
  html body #diagnosticTable td .dt-delta { font-size:13px; }
  html body #diagnosticResults .rn-comparison-hint { display:none !important; }
}