/* ZiloHub contrast and legibility follow-up, 22 Oct 2026.
   Standalone external CSS: compatible with style-src 'self'.
   Keep emergency severity colours and their meanings unchanged. */
html[data-theme=light] .shell{
  --card:#fff;--surface:#f5f9fc;--line:#cad9e4;--muted:#3e566a;
}
html[data-theme=dark] .shell{
  --card:#17283b;--surface:#20364a;--line:#486277;--muted:#d0e2ef;
}
/* Recurring bill headings and the Manage Bill / water-details drawer. */
html[data-theme=light] .shell :is(.modal-header .overline,.overline){color:#0d6259}
html[data-theme=dark] .shell :is(.modal-header .overline,.overline){color:#a8ead8}
.shell :is(.modal-header .overline,.overline){opacity:1;font-size:12px;letter-spacing:.06em}
.shell .table-header{font-size:13px;line-height:1.5;letter-spacing:.02em}
.shell .detail-pairs :is(span,strong){font-size:13px;line-height:1.5;opacity:1}
.shell :is(.detail-bill-heading>span:last-child,.detail-total small,.detail-notes){font-size:13px;line-height:1.55;opacity:1}
.shell .detail-panel :is(.utility-history h3 span,.utility-history>p,.utility-history-entry,.utility-statement-head span,.utility-statement-note,.utility-statement-grid label,.water-analytics-table th small,.water-analytics-table td small,.water-portal-chart .water-portal-bar small,.water-portal-table td small,.water-trends-metrics small,.water-trends-note,.ai-model-panel>p){
  opacity:1;line-height:1.55;font-size:max(12px,.78rem);
}
.shell .detail-panel .utility-history h3 span{font-weight:650;font-size:13px}
html[data-theme=light] .shell .detail-panel :is(.utility-history h3 span,.utility-history>p,.utility-history-entry,.utility-statement-head span,.utility-statement-note,.utility-statement-grid label,.water-analytics-table th small,.water-analytics-table td small,.water-portal-chart .water-portal-bar small,.water-portal-table td small,.water-trends-metrics small,.water-trends-note,.ai-model-panel>p){color:#344e62}
html[data-theme=dark] .shell .detail-panel :is(.utility-history h3 span,.utility-history>p,.utility-history-entry,.utility-statement-head span,.utility-statement-note,.utility-statement-grid label,.water-analytics-table th small,.water-analytics-table td small,.water-portal-chart .water-portal-bar small,.water-portal-table td small,.water-trends-metrics small,.water-trends-note,.ai-model-panel>p){color:#d0e2ef}
/* Match nested surfaces to foreground tones in BOTH themes. */
html[data-theme=dark] .shell :is(.utility-statement-editor,.water-analytics-panel,.water-analytics-kpis>div,.water-analytics-seasonal>div,.water-analytics-explainer,.water-analytics-reminder,.water-trends,.water-trends-metrics>div,.water-portal-panel,.water-portal-preview,.ai-model-panel,.utility-history-entry,.water-cost-panel,.water-analytics-year-card){
  background:#20364a;border-color:#486277;color:#edf6fc;
}
html[data-theme=dark] .shell :is(.water-portal-table th,.water-analytics-table th){background:#20364a;color:#edf6fc}
html[data-theme=dark] .shell :is(.water-portal-table td,.water-analytics-table td,.utility-history h3,.utility-history summary,.utility-statement-charges>strong){color:#edf6fc}
html[data-theme=light] .shell :is(.utility-statement-editor,.water-analytics-panel,.water-analytics-kpis>div,.water-analytics-seasonal>div,.water-analytics-explainer,.water-analytics-reminder,.water-trends,.water-trends-metrics>div,.water-portal-panel,.water-portal-preview,.ai-model-panel,.utility-history-entry,.water-cost-panel,.water-analytics-year-card){color:#172c41}
html[data-theme=light] .shell :is(.water-portal-table th,.water-analytics-table th,.water-portal-table td,.water-analytics-table td){color:#172c41}
/* Labels, controls and placeholders stay distinct from their surfaces. */
html[data-theme=light] .shell :is(.field>span,.utility-statement-grid label,.water-analytics-subheading label){color:#344e62}
html[data-theme=dark] .shell :is(.field>span,.utility-statement-grid label,.water-analytics-subheading label){color:#d0e2ef}
.shell :is(.field>span,.utility-statement-grid label,.water-analytics-subheading label){font-size:max(13px,.82rem);opacity:1}
.shell :is(.nav-caption,.brand small,.side-property small,.profile small){font-size:12px;line-height:1.5;opacity:1}
@media(max-width:540px){
 .shell .detail-panel :is(.utility-history h3 span,.utility-history>p,.utility-history-entry,.utility-statement-head span,.utility-statement-note,.water-portal-table td small){font-size:12px}
 .shell .table-header{font-size:12px}
}