/* Retirement Maths: mobile-only enhancement, 31 October 2026.
   This stylesheet deliberately does not address .floating-disclosure,
   .legalnotice, #fullDisclosure, or any desktop breakpoint. */
.mobile-visual,.mobile-dock{display:none}
@media (max-width:850px){
  html{scroll-padding-top:80px}
  body.mobile-enhanced{padding-bottom:76px}
  body.mobile-enhanced main{padding:12px 12px 0;max-width:540px;margin:auto}
  body.mobile-enhanced header{padding:12px 14px 9px;gap:6px;min-height:0}
  body.mobile-enhanced header .brandblock{width:100%}
  body.mobile-enhanced header .brand h1{font-size:18px}
  body.mobile-enhanced header .brandtagline{display:none}
  body.mobile-enhanced header nav{gap:9px;font-size:12px}
  body.mobile-enhanced header nav .donate{display:none}
  body.mobile-enhanced .languagebar{gap:2px;padding:4px 10px}
  body.mobile-enhanced .languagebar button{padding:6px 7px;font-size:12px;min-height:34px}
  body.mobile-enhanced #mobileResultPeek{display:none!important}
  body.mobile-enhanced .modebar{gap:4px;padding:4px;margin:4px 0 12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));box-shadow:0 2px 8px #123d2310}
  body.mobile-enhanced .modebar button{font-size:0!important;min-height:54px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:6px 3px;gap:0;border-radius:9px;line-height:1.15}
  body.mobile-enhanced .modebar button::before{font-size:20px;line-height:24px;margin:0 auto 3px}
  body.mobile-enhanced .modebar button::after{font-size:11px;line-height:15px;font-weight:750;white-space:normal}
  body.mobile-enhanced #fullmode::before{content:'▤'}
  body.mobile-enhanced #simplemode::before{content:'✦'}
  body.mobile-enhanced #wizardmode::before{content:'◈'}
  body.mobile-enhanced #fullmode::after{content:var(--mobile-plan,'Plan')}
  body.mobile-enhanced #simplemode::after{content:var(--mobile-events,'Life events')}
  body.mobile-enhanced #wizardmode::after{content:var(--mobile-guide,'Wizard')}
  body.mobile-enhanced .mobile-visual{display:block!important;border:1px solid #cbded3;background:#fff;border-radius:18px;padding:15px 13px 11px;box-shadow:0 4px 20px #163b3012;margin-bottom:14px;scroll-margin-top:76px;min-width:0}
  .mobile-visual-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .mobile-kicker{color:#39765d;font-size:10px;font-weight:800;letter-spacing:.12em}
  .mobile-quick-action{display:inline-flex;align-items:center;gap:6px;min-height:42px;flex:none;padding:8px 11px!important;border:1px solid #b7cfc1!important;border-radius:10px!important;background:#eff8f1!important;color:#18533d!important;font-size:12px!important;font-weight:700;cursor:pointer}
  .mobile-quick-action svg,.mobile-secondary svg,.mobile-dock svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none}
  .mobile-visual-title h2{margin:4px 0 2px;color:#183f31;font-size:21px;letter-spacing:-.6px}
  .mobile-visual-title p{margin:0 0 12px;color:#61756a;font-size:12px;line-height:1.45}
  .mobile-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:12px}
  .mobile-kpi{background:#eff7f1;border:1px solid #d5e9da;border-radius:12px;padding:10px 12px;min-width:0}
  .mobile-kpi:nth-child(2){background:#f2f7fb;border-color:#d8e6ef}
  .mobile-kpi-label{display:block;color:#496859;font-size:11px;line-height:1.35}
  .mobile-kpi strong{display:block;margin-top:3px;font-weight:800;color:#194c39;font-size:22px;line-height:1.24;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
  .mobile-chart-mount{min-width:0}
  .mobile-chart-mount .segmented{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:#edf3ef;border-radius:10px;margin:0 0 11px;width:100%}
  .mobile-chart-mount .segmented button{font-size:11px;min-height:42px;line-height:1.2;padding:7px 8px;white-space:normal;border-radius:8px}
  .mobile-chart-mount .chartpanel{border:0;border-radius:0;box-shadow:none;background:transparent;padding:0;overflow:visible;position:static!important;margin:0}
  .mobile-chart-mount .chartheading{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;margin-bottom:6px}
  .mobile-chart-mount .chartheading>div{min-width:0}
  .mobile-chart-mount .chartheading h2{font-size:15px;line-height:1.32;margin:0 0 3px;color:#163f30}
  .mobile-chart-mount .chartheading p{font-size:11px;line-height:1.35;color:#68796f;margin:0}
  .mobile-chart-mount .chartselect{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:4px;font-size:10px;max-width:45%;color:#536a60}
  .mobile-chart-mount .chartselect select{max-width:100%;min-height:43px;padding:5px 7px;font-size:12px;border-radius:9px;background:#fff;color:#174031;border:1px solid #bcd4c6}
  .mobile-chart-mount #chart{margin:7px -5px 0;padding:0 3px;min-height:155px;border:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .mobile-chart-mount #chart svg{min-width:0!important;max-width:none!important;width:100%!important;height:auto!important;display:block;overflow:visible}
  .mobile-chart-mount #chart.mobile-chart-zoom svg{min-width:670px!important;width:670px!important}
  .mobile-chart-mount #chart text{font-size:11px}
  .mobile-chart-mount .chartlegend{display:flex;flex-wrap:wrap;gap:6px 12px;padding:8px 1px 4px;font-size:11px;line-height:1.35}
  .mobile-chart-mount .chartEvents{padding:9px;margin:8px 0;font-size:11px}
  .mobile-chart-mount .eventreferences{gap:5px}
  .mobile-chart-mount .eventreferences button{font-size:11px;min-height:40px}
  .mobile-chart-mount .chartprompts{margin:6px 0 5px}
  .mobile-chart-mount .chartRisk{font-size:12px}
  .mobile-chart-mount #warnings{font-size:12px;line-height:1.4}
  .mobile-chart-mount .chartReadout{font-size:12px;line-height:1.5;padding:10px 11px;margin:8px 0;background:#f0f6fa;border-radius:9px;border-left:3px solid #316e90;min-height:35px}
  .mobile-chart-mount .chartfoot{padding:7px 0 0;border-top:1px solid #e4eae7;font-size:10px;line-height:1.4}
  .mobile-chart-actions{display:flex;gap:8px;margin:12px 0 0}
  .mobile-secondary{display:inline-flex;justify-content:center;align-items:center;gap:5px;flex:1;min-width:0;min-height:43px;padding:8px 6px;font-size:11px;font-weight:700;background:#fff;color:#245f48;border:1px solid #bdd5c6;border-radius:10px;cursor:pointer}
  .mobile-secondary[aria-pressed=true]{background:#e9f3ef;border-color:#338361}
  .mobile-section-intro{display:flex;align-items:center;gap:10px;border-top:1px solid #e6eee8;margin-top:13px;padding:13px 1px 1px}
  .mobile-section-icon{width:33px;height:33px;display:grid;place-items:center;border-radius:10px;background:#e8f2e9;color:#205e43;font-size:19px}
  .mobile-section-intro h2{font-size:15px;letter-spacing:-.2px;color:#194735;margin:0}
  .mobile-section-intro p{font-size:11px;line-height:1.45;color:#66776d;margin:2px 0 0}
  body.mobile-enhanced .inputs{padding:4px 0 6px;background:transparent;border:0;box-shadow:none;overflow:visible}
  body.mobile-enhanced .inputs>details{border:1px solid #d2dfd7;border-radius:13px;background:#fff;box-shadow:0 2px 7px #18402c0b;margin:0 0 9px;overflow:hidden;scroll-margin-top:80px}
  body.mobile-enhanced .inputs>details[open]{border-color:#9fc2ab}
  body.mobile-enhanced .inputs>details>summary{display:flex;gap:9px;align-items:center;padding:14px 12px;font-size:14px;line-height:1.3;background:#f5f9f5;min-height:53px;flex-wrap:wrap}
  body.mobile-enhanced .inputs>details[open]>summary{background:#eaf4ed}
  body.mobile-enhanced .inputs .sectionicon{display:none}
  .mobile-acc-icon{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;min-width:29px;border-radius:9px;background:#dfebe3;color:#1c6046;margin-left:0}
  .mobile-acc-icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
  body.mobile-enhanced .inputs>details>summary .sectiontotal{margin-left:auto;font-size:11px;color:#5b6e60;font-weight:650}
  body.mobile-enhanced .inputs>details>.inner{padding:13px 13px 15px}
  body.mobile-enhanced .inputs>details .field{margin:10px 0 17px}
  body.mobile-enhanced .inputs .fieldtop{gap:8px;flex-wrap:wrap}
  body.mobile-enhanced .inputs .fieldtop label{font-size:14px;font-weight:600;line-height:1.35}
  body.mobile-enhanced .inputs .numberbox{margin-left:auto;max-width:135px}
  body.mobile-enhanced .inputs .numberbox input{font-size:16px;max-width:97px}
  body.mobile-enhanced .inputs .field input[type=range]{min-height:30px;accent-color:#197356;touch-action:pan-y}
  body.mobile-enhanced .inputs select{font-size:16px;min-height:45px;border-radius:9px;max-width:100%}
  body.mobile-enhanced .inputs .hint{font-size:12px;line-height:1.5}
  body.mobile-enhanced .inputs label{line-height:1.4}
  body.mobile-enhanced .inputs .inner>details{border:1px solid #d8e4da;border-radius:10px;overflow:hidden;margin:9px 0;background:#fff}
  body.mobile-enhanced .inputs .inner>details>summary{font-size:13px;font-weight:700;min-height:45px;padding:10px 12px;background:#f5f9f5;cursor:pointer}
  .mobile-more{border:1px dashed #bcd1c0!important;border-radius:10px!important;background:#fbfdfb!important;margin:9px 0 12px!important}
  .mobile-more>summary{display:flex;align-items:center;gap:8px;background:#f2f8f3!important;color:#1c6045!important;font-size:13px!important;line-height:1.35;padding:11px!important;min-height:45px!important;font-weight:750!important}
  .mobile-more>summary:before{content:'⚙';display:inline-block;font-size:17px;color:#31785a}
  .mobile-more[open]>summary{border-bottom:1px solid #d5e2d6}
  .mobile-more-body{padding:12px 11px}
  .mobile-more-note{color:#5b7063;font-size:12px;line-height:1.45;margin:3px 0 11px}
  body.mobile-enhanced #assetBuilder>.iconchoices{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  body.mobile-enhanced #assetBuilder>.iconchoices button{width:auto;min-height:50px;padding:8px 10px;margin:0;text-align:left;font-size:12px;line-height:1.35}
  body.mobile-enhanced #assetsSection .inner>.hint{font-size:12px}
  body.mobile-enhanced #spendingSection .lifestyleblock>label{font-weight:700}
  body.mobile-enhanced #wizard{padding:13px;border-radius:12px;margin:0 0 12px}
  body.mobile-enhanced #wizard .panelhead{flex-wrap:wrap}
  body.mobile-enhanced #wizardfields .field{margin-bottom:14px}
  body.mobile-enhanced #scenarioMode{padding:12px}
  body.mobile-enhanced #scenarioMode .eventcategories{gap:7px}
  body.mobile-enhanced #scenarioMode .eventcategory{padding:10px}
  body.mobile-enhanced .results{margin-top:7px;scroll-margin-top:75px}
  body.mobile-enhanced .results>.annualmetrics{display:none}
  body.mobile-enhanced .results .resulttop{padding:2px 0}
  body.mobile-enhanced .results .resulttop h2{font-size:18px}
  body.mobile-enhanced .results .breakdown{padding:12px}
  body.mobile-enhanced .results .panelhead{flex-wrap:wrap}
  body.mobile-enhanced .results .tablepanel{margin-top:13px}
  body.mobile-enhanced .results .tablepanel>summary{min-height:46px}
  body.mobile-enhanced .results .chart-explanation{margin-top:20px;border:1px solid #d6e1dc;border-radius:11px;padding:12px;background:#fff}
  body.mobile-enhanced .results .chart-explanation h3{font-size:13px}
  body.mobile-enhanced .results .chart-explanation .chart-disclosures{font-size:12px}
  body.mobile-enhanced .mobile-dock{display:grid!important;grid-template-columns:repeat(3,1fr);position:fixed;bottom:0;left:0;right:0;z-index:80;background:#fff;border-top:1px solid #c9dbd0;padding:7px 10px max(7px,env(safe-area-inset-bottom));box-shadow:0 -6px 23px #17483416;gap:6px}
  body.mobile-enhanced .mobile-dock button{border:0;background:transparent;border-radius:10px;min-height:49px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#456957;font-size:11px;font-weight:700;cursor:pointer}
  body.mobile-enhanced .mobile-dock button:focus-visible,body.mobile-enhanced .mobile-secondary:focus-visible{outline:3px solid #316f9a;outline-offset:2px}
  body.mobile-enhanced .mobile-dock button[data-mobile-dock="chart"]{background:#e9f4ec;color:#18553d}
  body.mobile-enhanced #rules,body.mobile-enhanced footer{scroll-margin-top:85px}
}
@media(max-width:380px){
  body.mobile-enhanced .mobile-visual{padding:12px 10px}
  body.mobile-enhanced .mobile-chart-mount .chartheading{flex-wrap:wrap}
  body.mobile-enhanced .mobile-chart-mount .chartselect{max-width:100%;width:100%;flex-direction:row;align-items:center}
  body.mobile-enhanced .mobile-chart-mount .chartselect select{flex:1}
  body.mobile-enhanced .mobile-quick-action{padding:8px!important}
}
@media(prefers-reduced-motion:reduce){body.mobile-enhanced{scroll-behavior:auto}}
