/* Phones (27.10.26): the analysis page laid out for a phone.
   Every rule here starts with html.cmp3-phone. index.html adds that class only for logged-in visitors
   on a phone (the screen's short side under 600px), so nothing here can change a larger screen. */

/* ---------------------------------------------------------------- page scrolling
   The results column was its own scroll box, a full window tall under the menu bar, so its bottom was
   cut off and the page scrolled inside the page. On a phone the whole page scrolls, the menu bar scrolls
   away, and the pinned block (summary + Inputs bar + Results line) pins to the top of the screen. */
html.cmp3-phone #cmp-navbar { position: relative !important; top: auto !important; z-index: 30 !important; }  /* under the pinned block and ERIC */
/* ...so the space kept for the fixed menu bar (and for the old phone page's bottom bar, navbar.css) goes */
html.cmp3-phone body { padding-top: 0; padding-bottom: 0; }
html.cmp3-phone #mainColumn,
html.cmp3-phone body.cmp3-tabs #mainColumn { height: auto !important; overflow: visible !important; overflow-x: clip !important; }

/* ---------------------------------------------------------------- phone turned sideways (27.10.26)
   Only the chosen input or results section shows, using the whole screen (for the charts especially):
   no menu bar, Plan Summary, Inputs bar or Results line. Turning the phone upright brings them back. */
@media (orientation: landscape) {
  html.cmp3-phone #cmp-navbar,
  html.cmp3-phone #cmp3Top { display: none !important; }
  /* A wide table's scrolling box can use nearly the whole screen height, with nothing pinned above it */
  html.cmp3-phone #rvTables .rv-tcard .table-responsive.rv-wide { max-height: calc(100vh - 24px); }
}

/* ---------------------------------------------------------------- menu bar
   Logo, Premium and the menu button on one row */
html.cmp3-phone #cmp-navbar .cmp-brand { flex: 0 1 auto; min-width: 0; margin-right: 8px; }
html.cmp3-phone #cmp-navbar .cmp-nav-premium { padding-left: 12px; padding-right: 12px; font-size: 15px; white-space: nowrap; }
html.cmp3-phone #cmp-navbar .cmp-nav-toggler { flex: none; }
/* The calculators were only shown on mouse hover (styles-tablet.css), which a phone cannot do */
html.cmp3-phone #cmp-navbar .cmp-calc .dropdown-menu { visibility: visible; opacity: 1; transition: none; }

/* ---------------------------------------------------------------- Plan Summary
   It starts folded to one row (index.html). Opened, its sections stack instead of squeezing into
   four columns, and the pinned block stops pinning so the details can be scrolled past. */
html.cmp3-phone #planSummaryPanel { padding-left: 10px; padding-right: 10px; }
html.cmp3-phone .ps-panel { grid-template-columns: minmax(0, 1fr); padding-bottom: 22px; }
html.cmp3-phone .ps-cover, html.cmp3-phone .ps-pie-block { border-left: none; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 12px; }
html.cmp3-phone #cmp3Top:has(> #planSummaryPanel:not(.ps-collapsed)) { position: relative; }
/* Folded, the retirement age shows as large as when opened (27.10.26). On a phone the folded strip is
   drawn at 80% and the opened panel at 72% (plan-summary.js), so these are the opened sizes x 0.9. */
html.cmp3-phone .ps-strip .ps-st-agev { gap: 8px; }  /* closer, so the larger age still has the toggles beside it */
/* ...then 50% bigger again (27.10.26): the age box's text, padding, corners and y / m, folded and opened */
html.cmp3-phone .ps-strip .ps-st-tile { font-size: 60px; line-height: 0.9; padding: 8px 20px 10px; border: 1px solid #43a646; border-radius: 16px; min-width: 1.3em; text-align: center; }
html.cmp3-phone .ps-strip .ps-st-tile small { font-size: 20px; }
html.cmp3-phone .ps-panel .ps-age-num { font-size: 66px; padding: 9px 21px 12px; border-radius: 18px; }
html.cmp3-phone .ps-panel .ps-age-unit { font-size: 21px; }
html.cmp3-phone .ps-strip .ps-st-adj { width: 38px; height: 38px; font-size: 23px; border-width: 2px; padding: 0 0 3px; }
/* Affordable Age selected (27.10.26): the folded summary shows the age alone, without the net monthly
   income (bar and figures) or the tax and charges; Details still shows everything */
html.cmp3-phone .ps-strip:has(.ps-st-sw:not([hidden]) [data-ps="stAgeBtn"].ps-on) :is(.ps-st-cover, .ps-st-figs) { display: none; }
/* Selected Age selected (27.10.26): below the age only the net monthly income, its bar stretching across the
   full width; the Affordable / Target / Surplus and Tax / Charges figures are in Details */
html.cmp3-phone .ps-strip:has(.ps-st-sw:not([hidden]) [data-ps="stIncomeBtn"].ps-on) .ps-st-figs { display: none; }
html.cmp3-phone .ps-strip:has(.ps-st-sw:not([hidden]) [data-ps="stIncomeBtn"].ps-on) .ps-st-cover { flex: 1 1 0; min-width: 0; }
html.cmp3-phone .ps-strip:has(.ps-st-sw:not([hidden]) [data-ps="stIncomeBtn"].ps-on) .ps-st-coverv { display: flex; width: 100%; }
html.cmp3-phone .ps-strip:has(.ps-st-sw:not([hidden]) [data-ps="stIncomeBtn"].ps-on) .ps-st-bar { flex: 1 1 auto; width: auto; }
/* ...and the Affordable / Selected Age and Single / Couple toggles beside it are smaller (27.10.26) */
html.cmp3-phone .ps-strip .ps-st-switches { gap: 4px; }
/* The toggles always stay on the age's line (27.10.26): with no starting width of their own they never wrap
   below it, and they take the space left beside the age */
html.cmp3-phone .ps-strip > .ps-st-switches { flex: 1 1 0; min-width: 0; margin-left: -10px; }
html.cmp3-phone .ps-strip .ps-st-sw button { white-space: nowrap; }   /* each label on one line */
/* Below the age's line (an empty full-width item starts a new line): the net monthly income, shrinking to leave
   room, with Details at the end of the same line (27.10.26) */
html.cmp3-phone .ps-strip::after { content: ''; flex: 0 0 100%; height: 0; order: 1; }
html.cmp3-phone .ps-strip > :is(.ps-st-cover, .ps-st-figs) { order: 2; }
html.cmp3-phone .ps-strip > .ps-st-cover { margin-top: -8px; }
html.cmp3-phone .ps-strip > .ps-st-more { order: 3; margin-top: -8px; align-self: flex-end; }
/* Details as an icon: a round button with the chevron (the word stays for screen readers) */
html.cmp3-phone .ps-strip .ps-st-more {
  font-size: 0; gap: 0; width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%; flex: none;
}
html.cmp3-phone .ps-strip .ps-st-more svg { width: 20px; height: 20px; }   /* the strip is drawn at 80%: 32px on screen */
/* Narrow phones (about 360px): a little less space around the age and inside the toggles, so they fit */
@container cmp3top (max-width: 350px) {
  html.cmp3-phone .ps-strip .ps-st-agev { gap: 4px; }
  html.cmp3-phone .ps-strip .ps-st-sw button { padding: 0 5px; }
}
html.cmp3-phone .ps-strip .ps-st-sw button { min-height: 22px; padding: 0 7px; font-size: 11px; }

/* ---------------------------------------------------------------- Inputs bar and Results line (27.10.26)
   One row in place of the Inputs bar: Find An Input on the left, a small bar of three icons (Current Values,
   Contributions, Target Income) in the middle, and Ask ERIC on the right; the Results bar, as icons, below.
   The Inputs bar is that small bar, showing only those three pages. The Results line's own box steps aside
   (display: contents) so its buttons can share the pinned block's rows; click handling is unchanged.
   Other input sections are reached through Find, and each input page's Back / Next. ERIC's button is
   otherwise hidden below 1000px. */
html.cmp3-phone #cmp3Top {
  container: cmp3top / inline-size;
  flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 8px; padding-left: 10px; padding-right: 10px;
}
html.cmp3-phone #cmp3Top > #planSummaryPanel { flex: 1 1 100%; padding-left: 0; padding-right: 0; }
html.cmp3-phone #cmp3Top > .cmp3-rvline { display: contents !important; }
html.cmp3-phone .cmp3-rvline > .cmp3-feat-btn { order: 1; padding: 0 14px 0 12px; }
/* The small bar: centred between Find and ERIC, as tall as they are */
html.cmp3-phone #cmp3Top > #inputsBar { order: 2; flex: none; width: auto; margin: 0 0 0 auto; padding: 3px; gap: 2px; }
html.cmp3-phone #inputsBar > .cmp3-bar-label,
html.cmp3-phone #inputsBar > button:not([data-tab="have"], [data-tab="contrib"], [data-tab="target"]) { display: none; }
html.cmp3-phone #inputsBar > button[data-tab] { flex: none; width: 40px; min-height: 34px; padding: 0; }
html.cmp3-phone #inputsBar > button[data-tab] svg { display: block; width: 22px; height: 22px; flex: none; }
/* Icons only: their names stay for screen readers */
html.cmp3-phone #inputsBar > button[data-tab] span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html.cmp3-phone .cmp3-rvline > .cmp3-eric-btn { order: 3; margin-left: auto; display: inline-flex; padding: 0 14px 0 6px; }
/* Not room for "Find An Input" beside the small bar and ERIC: it reads "Find" (screen readers still hear the
   whole name) */
@container cmp3top (max-width: 404px) {
  html.cmp3-phone .cmp3-feat-btn span { font-size: 0; }
  html.cmp3-phone .cmp3-feat-btn span::after { content: 'Find' / ''; font-size: 14px; }
}
/* ...and on the narrowest phones "Ask ERIC" reads "ERIC", always beside his robot */
@container cmp3top (max-width: 343px) {
  html.cmp3-phone .cmp3-eric-btn span { font-size: 0; }
  html.cmp3-phone .cmp3-eric-btn span::after { content: 'ERIC' / ''; font-size: 14px; }
}
/* The Results bar: a row of icons, one for each view, sharing the width (the words stay for screen readers) */
html.cmp3-phone .cmp3-rvline > #resultsViewBar { order: 4; flex: 1 1 100%; width: auto; margin: 0; display: flex; flex-wrap: nowrap; justify-content: space-between; }
html.cmp3-phone #resultsViewBar button { flex: 1 1 0; min-width: 0; padding: 0 4px; gap: 3px; }
html.cmp3-phone #resultsViewBar button svg { display: block; width: 22px; height: 22px; flex: none; }
html.cmp3-phone #resultsViewBar button span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Chart and table pickers under the Results line: one row that scrolls sideways */
html.cmp3-phone .rv-subrow { width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; }
html.cmp3-phone .rv-subrow > .rv-sub {
  flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html.cmp3-phone .rv-subrow > .rv-sub::-webkit-scrollbar { display: none; }
html.cmp3-phone .rv-subrow > .rv-sub > * { flex: 0 0 auto; }

/* ---------------------------------------------------------------- results and inputs
   Narrower side margins, so the cards use the width a phone has */
html.cmp3-phone .cmp3-ip { width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; padding: 18px 14px 16px; }
html.cmp3-phone .rv-tcard { width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; padding: 18px 12px 16px; }
/* A table wider than the phone scrolls in its own box. The box fits in the space under the pinned block,
   its headings pin to the top of the box (not the page), and the age column stays put going sideways. */
html.cmp3-phone #rvTables .rv-tcard .table-responsive.rv-wide { max-height: max(320px, calc(100vh - 320px)); }
html.cmp3-phone #rvTables .rv-tcard .table-responsive.rv-wide table thead th { top: 0; }
html.cmp3-phone #rvTables .rv-tcard .table-responsive.rv-wide table th:first-child,
html.cmp3-phone #rvTables .rv-tcard .table-responsive.rv-wide table td:first-child {
  position: sticky; left: 0; z-index: 1; background: #ffffff; box-shadow: 1px 0 0 #d6d8cc;
}
html.cmp3-phone #rvTables .rv-tcard .table-responsive.rv-wide table thead th:first-child { z-index: 3; background: #e3e8dc; }
/* Timeline: no milestone line at the top on a phone; the year-by-year list below covers the same points (27.10.26) */
html.cmp3-phone .rv-tlx { display: none; }
/* Results cards (Timeline, Assumptions, Year One...) keep less padding, so their contents get the width */
html.cmp3-phone #resultsViewHost .rv-view { padding: 18px 14px 20px !important; }

/* ---------------------------------------------------------------- Assumptions view (27.10.26)
   Modelling choices in two columns, like the tiles above them. (results-views.css asks for two in a
   narrow space, but its four-column rule comes later in the file and wins.) */
html.cmp3-phone .rv-a-tiles,
html.cmp3-phone .rv-a-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.cmp3-phone .rv-a-choice { padding: 12px 12px 14px; }
html.cmp3-phone .rv-a-tile .rv-a-kicker,
html.cmp3-phone .rv-a-choice .rv-a-kicker { letter-spacing: 0.08em; }
/* What your money earns: less padding, as it sits inside a padded card already */
html.cmp3-phone .rv-a-real { padding: 14px 14px 16px; gap: 10px; }
html.cmp3-phone .rv-a-real-head > strong { font-size: 15px; line-height: 1.3; }
/* The bar: labels closer to the edges. (The charges figure shows only when it fits: results-views.css.) */
html.cmp3-phone .rv-a-bar { height: 34px; font-size: 12px; }
html.cmp3-phone .rv-a-seg-real { padding-left: 10px; }
html.cmp3-phone .rv-a-seg-inf { padding-left: 8px; }
html.cmp3-phone .rv-a-bar-foot { flex-wrap: wrap; gap: 4px 12px; }
html.cmp3-phone .rv-a-bar-key { gap: 12px; flex-wrap: wrap; }
html.cmp3-phone .rv-a-formula { font-size: 13px; }
/* Tax bands: each amount on one line */
html.cmp3-phone .rv-a-brow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 0.5fr); font-size: 13px; }
html.cmp3-phone .rv-a-brow > div { padding: 8px; }
html.cmp3-phone .rv-a-panel { padding: 14px 14px 14px 30px; }

/* ---------------------------------------------------------------- Stress Test view (27.10.26)
   Income before and after the crash: its natural height. Beside the verdict on a wide screen it shares the
   row (flex: 1 1 0), but stacked under it that basis left the card a sliver with its content cut off. */
html.cmp3-phone .rv-st-top > .rv-st-isec { flex: none; }
/* Chart text on a phone (the charts are drawn at their real width there: results-views.js) */
html.cmp3-phone .rv-st-svg-ph .rv-st-ax { font-size: 10.5px; }
html.cmp3-phone .rv-st-svg-ph .rv-st-tag { font-size: 10.5px; }
html.cmp3-phone .rv-st-svg-ph .rv-st-val { font-size: 10.5px; }
html.cmp3-phone .rv-st-svg-ph .rv-st-growth { font-size: 10.5px; }

/* ---------------------------------------------------------------- turn-sideways hint (27.10.26)
   Shown by static/phone.js the first time each Results view is chosen; at the foot of the screen, under
   ERIC and the pop-ups */
html.cmp3-phone .cmp3-rot {
  position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 1040;
  display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 14px; border-radius: 14px;
  background: #33352d; color: #ffffff; box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  font-family: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.35;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
}
html.cmp3-phone .cmp3-rot.cmp3-rot-on { opacity: 1; transform: none; pointer-events: auto; }
html.cmp3-phone .cmp3-rot svg { flex: none; color: #9fd8a2; }
html.cmp3-phone .cmp3-rot span { flex: 1 1 auto; min-width: 0; }
html.cmp3-phone .cmp3-rot-x {
  flex: none; width: 36px; height: 36px; border: none; border-radius: 50%; background: transparent; color: #ffffff;
  font-size: 24px; line-height: 1; cursor: pointer;
}
html.cmp3-phone .cmp3-rot-x:focus-visible { outline: 2px solid #adff2f; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html.cmp3-phone .cmp3-rot { transition: none; } }

/* ---------------------------------------------------------------- ERIC
   Opened, he fills the screen (docked or floating), rather than a fixed-size window over the page */
html.cmp3-phone body.cmp3-eric-docked { padding-right: 0 !important; }
html.cmp3-phone #ericPanel,
html.cmp3-phone #ericPanel.cmp3-eric-dock {
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important;
  max-width: none !important; max-height: none !important; border-radius: 0 !important; resize: none !important;
}
html.cmp3-phone .cmp3-eric-divider,
html.cmp3-phone #ericPanel .eric-resize-handle { display: none !important; }