/* Shared sizing rules: wide results scroll inside their own panel. */
html,body{max-width:100%;overflow-x:clip}
main{width:100%;min-width:0}
.workspace,.dashboard,.intro,.heading,.hero,.two-cols,.chart-grid,.kpis,
.option-grid,.vat-grid,.custom-panel,.custom-fields,.month-card,.rules-grid,
.gift-grid,.calc-grid,.principles{min-width:0;max-width:100%}
/* An implicit auto track otherwise adopts the min-content width of a table. */
.dashboard{grid-template-columns:minmax(0,1fr)}
.workspace>*,.dashboard>*,.intro>*,.heading>*,.hero>*,.two-cols>*,
.chart-grid>*,.kpis>*,.option-grid>*,.vat-grid>*,.custom-panel>*,
.custom-fields>*,.month-card>*,.rules-grid>*,.gift-grid>*,.calc-grid>*,
.principles>*,.method>div>*,.about>div>*{min-width:0;max-width:100%}
.panel,.chart,.table-wrap,.view,.controls,.chart-head,.section-head{min-width:0;max-width:100%}
.chart-head>*,.section-head>*,.panel-title>*,.breakdown>*,.notice>*,
.warning>*,.creator-hero>*,.flow>*,.total-list div>*{min-width:0}
.table-wrap{width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.chart svg,.donut svg{display:block;width:100%;max-width:100%;height:auto}
.controls input,.controls select,.custom-fields input,.month-card input,.search input{min-width:0;max-width:100%}
.switches,.market-tabs,.mode-tabs,.presets{min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.switches button,.market-tabs button,.mode-tabs button,.presets button{flex-shrink:0}
.market-tabs>div{flex-shrink:0}
.kpis strong,.option strong,.vat-card strong,.rec-sum strong,.custom-result strong,
.headline-result strong,.hero-result strong,.budget-card strong,.verdict strong,
.currency-pills strong,.currency-pills b,.total-list strong{overflow-wrap:anywhere}
.sources a,.source-line a,.calculator-guide a,.related-tools a,.breadcrumbs span{overflow-wrap:anywhere}
.columns,.sensitivity,.load-chart,.month-chart{min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.columns>div,.sensitivity>.sens,.load-chart>.load-item,.month-chart>.month-bar{flex:1 0 54px;min-width:0}
.columns strong,.sens strong,.load-item strong,.month-bar strong{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center}
.bar-row>*,.heatmap>*{min-width:0;overflow-wrap:anywhere}
@media(max-width:1120px){
  .workspace{grid-template-columns:minmax(0,1fr)}
  .workspace>.controls{position:static;max-height:none}
}
@media(max-width:760px){
  .intro,.heading{grid-template-columns:minmax(0,1fr)}
  .chart-head,.section-head{flex-wrap:wrap}
  .chart-head .switches{width:100%}
  .recommendation,.breakdown,.creator-hero{flex-wrap:wrap}
  .recommendation .rec-sum{min-width:0;max-width:100%}
  .total-list div{flex-wrap:wrap;gap:8px 16px}
  .topbar{gap:12px}
  .topbar .brand{min-width:0;font-size:14px}
  .topbar .brand-mark{flex-shrink:0}
  .topbar .all-link{flex-shrink:0}
  .waterfall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wf-item{min-width:0}
  .wf-item strong,.wf-item span{max-width:100%;overflow-wrap:anywhere;text-align:center}
  .legend{flex-wrap:wrap}
}
@media(max-width:620px){
  .bar-row{grid-template-columns:minmax(0,110px) minmax(0,1fr)}
}
@media(max-width:400px){
  .topbar .updated,.topbar .all-link{display:none}
  .controls,.table-card,.table-panel,.chart-card,.main-chart{padding:16px}
  .waterfall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notice,.warning{flex-direction:column}
  .heatmap{grid-template-columns:44px repeat(4,minmax(0,1fr))}
  .currency-pills{grid-template-columns:1fr}
  .quick-stats div{flex-wrap:wrap}
}