/* Grid Costs v0.6 — navy, steel-blue and silver, matching the family of related sites.
   Dark-only data dashboard; contextual sources and responsive navigation. */
:root{--teal:#78b5f1;--wind:#68b8ee;--blue:#6ca4d7;--accent:#78b5f1;--ink:#eef4fb;--paper:#080e19;--muted-ink:#b4c5d7;--border-shared:#344a60}
.brand-text span,.footer-brand span,.eyebrow,.condition-method summary,.source-inline{color:var(--accent)}
.brand-mark i{background:#94bbec}
.page-intro .lead,.cost-hero .lead,.prices-hero .lead{max-width:none!important;width:100%;font-size:clamp(14px,1.1vw,16px);line-height:1.75}
.page-intro>div:first-child{flex:1;min-width:0;max-width:none}
.page-intro{align-items:center;gap:26px}
.explanation-intro{max-width:none;font-size:13px;line-height:1.7;color:#aabfd6;margin:12px 0 0}
.cost-hero{max-width:none}.cost-hero .lead{max-width:1100px!important}
.condition-method p,.grid-conditions p,.stat-foot,.panel-note,.section-sub,.editorial-card p,.prices-card p,.prices-explainer p,.method-p,.explainer-panel p,.next-panel p{max-width:none;line-height:1.72}
.condition-item p,.conditions-disclaimer,.condition-method,.panel-note,.prices-card p,.prices-explainer p,.method-p,.explainer-panel p,.next-panel p,.cost-metric p{font-size:13px}
.stat-foot,.demand-companion,.conditions-time{font-size:12px}
.conditions-heading{flex-wrap:wrap}.conditions-heading .source-inline{margin-left:auto}
.condition-method p{max-width:none!important}
.source-inline{border:1px solid #3d5877;border-radius:7px;background:rgba(84,128,172,.11);padding:7px 12px;cursor:pointer;line-height:1.45;font-size:12px;font-weight:700;white-space:normal;text-align:left}
.source-inline:hover,.source-inline:focus-visible{background:rgba(80,144,215,.2);border-color:var(--accent)}
.footer-sources{margin-top:10px}
.footer{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:28px}
.footer p{font-size:12px;line-height:1.7}.footer strong{font-size:12px}
.site-header .header-right{margin-left:auto;gap:20px}
.site-header .header-link[aria-current="page"]{color:var(--accent)}
.stat-primary{background:linear-gradient(135deg,#16364d,#122238)!important;border-color:#33628b!important}
.difference-box,.cost-metric.emphasized{background:linear-gradient(115deg,#193754,#142638)!important;border-color:#3d6289!important}
.household-panel{background:linear-gradient(145deg,#18283e,#111b2b)}
.grid-conditions{background:linear-gradient(130deg,#13243a,#101d2d)}
.condition-item[data-tone="normal"]{border-left-color:#83bdf4}
.mobile-nav-toggle{order:3}
#methodology[hidden]{display:none!important}
/* sources popup native dialog */
.sources-dialog{border:1px solid #47617c;background:#101d2e;color:#edf4fa;border-radius:14px;width:min(620px,calc(100vw - 30px));max-height:min(80vh,760px);padding:0;box-shadow:0 22px 80px #0009;overflow:auto}
.sources-dialog::backdrop{background:rgba(4,11,20,.72)}
.sources-dialog-inner{padding:25px 28px}
.sources-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}
.sources-dialog h2{font:700 clamp(20px,3vw,29px)/1.2 'Space Grotesk',Arial,sans-serif;margin:8px 0 10px}
.sources-dialog p{font-size:14px;line-height:1.7;color:#b7cadd}
.sources-dialog ul{list-style:none;margin:18px 0;padding:0;display:grid;gap:9px}
.sources-dialog li a{display:block;border:1px solid #38516b;background:#182b40;border-radius:8px;padding:12px 14px;color:#9bc9fd;font-size:13px;font-weight:650;line-height:1.4}
.sources-dialog li a:hover{border-color:var(--accent);background:#1f3a58}
.sources-dialog .source-caveat{font-size:12px;border-top:1px solid #38516b;padding-top:15px}
/* Make informational copy occupy the space available rather than breaking into tiny narrow columns. */
.cost-body>.panel,.prices-card,.prices-explainer,.explainer-panel,.editorial-card{min-width:0}
.household-main span{max-width:none;flex:1;font-size:13px}
@media(min-width:701px){.site-header .brand-wrap{max-width:270px}.site-header .header-right{gap:clamp(10px,1.25vw,24px)}}
@media(max-width:900px){.page-intro{align-items:flex-start}.site-header .header-right{gap:12px}.conditions-time{text-align:left}}
@media(max-width:700px){
 .site-header{gap:8px}
 .site-header .mobile-nav-toggle{order:2}
 .site-header .brand-wrap{max-width:calc(100% - 100px)}
 .page-intro{gap:12px}
 .page-intro .lead{font-size:14px}
 .explanation-intro{font-size:12px}
 .footer{grid-template-columns:1fr!important}
 .footer>div:first-child{grid-column:1!important}
 .conditions-heading .source-inline{margin-left:0}
 .source-inline{font-size:11px;padding:7px 9px}
 .sources-dialog-inner{padding:17px}
}
@media(max-width:380px){.site-header .brand-wrap{max-width:calc(100% - 94px)}.mobile-nav-toggle{font-size:10px;padding:9px 8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Light canvas, dark dashboards: deliberate low-change theme, not a wholesale component recolour. */
/* Cards, dialogs and charts deliberately retain their legible navy palette in both modes. */
/* Visibly connect live conditions to possible system improvements. */
.improvements-panel{margin-top:15px;padding:23px 24px;border:1px solid #2f4760;background:#101d2d;border-radius:11px}
.improvements-panel h2{font:650 clamp(19px,2.1vw,25px)/1.35 'Space Grotesk',Arial,sans-serif;margin:9px 0 19px}
.improvements-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.improvements-grid article{border:1px solid #31495f;background:#18273b;padding:16px 17px;border-radius:8px}
.improvements-grid h3{font-size:15px;margin:0 0 9px;font-weight:750}
.improvements-grid p,.improvements-note{font-size:13px;color:#acc1d5;line-height:1.72;margin:0}
.improvements-note{margin:16px 0 0}
@media(max-width:850px){.improvements-grid{grid-template-columns:1fr}.improvements-panel{padding:18px 15px}}
/* Prevent tiny mobile captions from undoing the readability improvements. */
@media(max-width:580px){.stat-foot{font-size:11px;line-height:1.6}.demand-companion{font-size:11px}.panel-note,.conditions-disclaimer{font-size:12px}.condition-item strong{font-size:16px}.condition-item p{font-size:12px}}
.extended-methodology{border-top:1px solid #37506b;margin-top:18px;padding-top:17px}
.extended-methodology summary{cursor:pointer;color:var(--accent);font-size:13px;font-weight:700}
.extended-methodology p{margin:10px 0;color:inherit;font-size:12px}
/* Unified, accessible action/selection colours across all pages. */
.period-tabs button.active,.tax-tab.active,.tax-tab[aria-pressed="true"]{background:#275582;color:#f5faff}
.action-button,.prices-card .action-button{background:#285f98;border:1px solid #5794cc;color:#fff}
.action-button:hover,.prices-card .action-button:hover{background:#387bb8}

/* v0.6.1: consistent header controls and sources placement. */
.site-header .header-right{margin-left:auto;gap:clamp(10px,1.2vw,22px)}
.cost-body>.panel{position:relative}
.cost-body>.panel>.eyebrow{padding-right:180px;min-height:22px}
.cost-body>.panel>button.source-inline{position:absolute;top:22px;right:22px;max-width:175px;margin:0;z-index:1}
.cost-body>.panel>.source-inline:hover{background:#223e60}
.panel-header .source-inline,.conditions-heading .source-inline{flex:none;margin-left:auto}
.panel-header .source-inline{align-self:start}
.market-history-actions{align-items:flex-start}
#usage-range{accent-color:#78b5f1}
.cost-bar i{background:#75a9e7}
.period-tabs button.active,.tax-tab.active,.tax-tab[aria-pressed="true"]{color:#eef5ff;background:#275582}
@media(max-width:700px){

 .cost-body>.panel>.eyebrow{padding-right:47px;min-height:30px}
 .cost-body>.panel>button.source-inline{top:17px;right:17px}
 .source-inline[data-sources]{font-size:0!important;width:35px;height:35px;padding:0;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;border-radius:8px;flex:none}
 .source-inline[data-sources]::before{content:"ⓘ";font-size:20px;line-height:1;color:#b6d8ff}
 .conditions-heading .source-inline{margin-left:auto}
 .panel-header:has(> .source-inline){gap:8px}
 .market-history-actions{gap:8px}
}
/* Keep text within the dark information surfaces legible against the lighter page canvas. */
/* Prices hero and costs hero remain dark-on-light; all actual data panels remain white-on-navy. */


/* v0.6.2 — UI consistency and accessible inline-source controls */
:root{color-scheme:dark}
body{font-family:'DM Sans',Arial,sans-serif}
.editorial-card h3,.editorial-card p,.editorial-card a{font-family:'DM Sans',Arial,sans-serif}
.editorial-card h3{font-size:21px;font-weight:750;letter-spacing:-.5px;line-height:1.35}
.editorial-card p{font-size:13px;line-height:1.72}
.source-inline{white-space:nowrap;flex-shrink:0;max-width:none;text-align:center}
.cost-body>.panel>.eyebrow{padding-right:194px;min-height:26px}
.cost-body>.panel>button.source-inline{width:auto;max-width:none;white-space:nowrap;right:22px;top:22px;font-size:11px;padding:8px 10px}
.prices-hero.hero-with-sources{position:relative;padding-right:0}
.prices-hero.hero-with-sources>.source-inline{position:absolute;right:0;top:25px;margin:0;font-size:11px;padding:9px 12px;white-space:nowrap}
.prices-hero.hero-with-sources>.eyebrow{padding-right:180px}
.trend-chart-wrap{padding:15px 12px 9px}
.trend-chart-wrap .chart-unit{display:block;color:#a2bdd6;font-size:11px;line-height:1.3;letter-spacing:.3px;font-weight:650;margin:0 0 5px 0}
#price-history-chart{overflow:hidden}
.balance-explainer{margin:15px 0 0}
.stats-grid + .balance-explainer + .grid-conditions{margin-top:16px}
@media(max-width:700px){
 .source-inline[data-sources]{width:29px;height:29px;min-width:29px;padding:0;border-radius:7px;font-size:0!important}
 .source-inline[data-sources]::before{font-size:15px;line-height:1}
 .cost-body>.panel>.eyebrow{padding-right:43px;min-height:31px}
 .cost-body>.panel>button.source-inline{top:15px;right:15px;width:29px;max-width:29px;padding:0;font-size:0}
 .prices-hero.hero-with-sources>.source-inline{top:26px;right:0;width:29px;height:29px;padding:0;font-size:0}
 .prices-hero.hero-with-sources>.eyebrow{padding-right:42px}
 .trend-chart-wrap{padding:12px 8px 8px}
}
@media(max-width:380px){.prices-hero.hero-with-sources>.source-inline{top:20px}}

/* v0.6.3 — compact, consistent source icons everywhere; keyboard accessible */
.source-inline[data-sources],.prices-hero.hero-with-sources>.source-inline,
.cost-body>.panel>button.source-inline{
 box-sizing:border-box!important;display:inline-flex!important;align-items:center;justify-content:center;
 width:29px!important;min-width:29px!important;max-width:29px!important;height:29px!important;
 padding:0!important;border-radius:50%!important;overflow:hidden;white-space:nowrap;
 font-size:13px!important;line-height:1!important;font-weight:800!important;flex:0 0 29px;
 color:#a9d4fa!important;text-align:center;
}
.source-inline[data-sources]::before{content:none!important}
.source-inline[data-sources] span{display:block;line-height:1;font-size:13px}
.cost-body>.panel>.eyebrow{padding-right:46px!important;min-height:30px}
.cost-body>.panel>button.source-inline{top:18px!important;right:18px!important}
.prices-hero.hero-with-sources>.eyebrow{padding-right:48px!important}
.prices-hero.hero-with-sources>.source-inline{top:25px!important;right:0!important}
.conditions-heading{position:relative;align-items:flex-start;flex-wrap:nowrap;gap:12px}
.conditions-heading>div:first-child{flex:1;min-width:0;padding-right:3px}
.conditions-heading .source-inline{margin:0!important;align-self:flex-start;flex:0 0 29px}
.footer a{color:#a5d2ff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.footer a:hover{color:#f1f8ff}
@media(max-width:700px){
 .conditions-heading{flex-direction:row!important;align-items:flex-start!important;flex-wrap:nowrap!important}
 .conditions-heading .source-inline{margin-left:auto!important;margin-top:0!important}
 .conditions-heading>div:first-child{padding-right:0}
 .cost-body>.panel>button.source-inline{top:15px!important;right:15px!important}
}
/* Even very narrow phones must not force status metric columns wider than the screen. */
.mini-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.mini-metrics>div{min-width:0;white-space:normal}
.mini-metrics span{overflow-wrap:anywhere;line-height:1.45}

/* v0.6.4 — deployment polish */
.footer .footer-author{display:inline-flex;align-items:baseline;gap:.23em;margin:0;vertical-align:baseline;line-height:inherit;text-decoration:none;font:650 13px/1.7 'DM Sans',Arial,sans-serif;letter-spacing:-.02em;color:#dce9fb}
.footer .footer-author span{font:inherit;color:inherit;letter-spacing:inherit}
.footer .footer-author:hover{text-decoration:underline;text-underline-offset:3px}
/* Unlike placeholders, these cards are informative until their dedicated pages exist. */
.improvements-grid .future-card{position:relative;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.improvements-grid .future-card:hover{transform:translateY(-3px);border-color:#6398cc;background:#213a52;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.improvements-grid .future-card::after{content:'IN DEPTH · COMING SOON';display:block;margin-top:15px;font-size:9px;font-weight:750;letter-spacing:1.2px;color:#8dbde8}
.balance-explainer{position:relative}
.balance-explainer>summary{padding-right:48px}
.balance-expanded-source{display:none;position:absolute;right:14px;top:9px;z-index:2}
.balance-explainer[open]>.balance-expanded-source{display:flex}
.balance-expanded-source .source-inline{width:27px!important;min-width:27px!important;max-width:27px!important;height:27px!important}
.balance-explainer-body .balance-source{display:none}
.price-trend[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.improvements-grid .future-card{transition:none}.improvements-grid .future-card:hover{transform:none}}

/* Compact landscape phones: viewport can be 740–940px wide but only 320–430px tall. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px){
 .site-header{position:relative;z-index:20;height:64px;min-height:64px;padding:7px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:10px}
 .site-header .brand-wrap{flex:0 1 auto;min-width:0;max-width:calc(100% - 110px);margin:0}
 .site-header .brand-text{white-space:nowrap;font-size:18px}
 .site-header .brand-text small{font-size:7px;letter-spacing:0}
 .site-header .mobile-nav-toggle{display:inline-flex;flex-shrink:0;order:2}
 .site-header .header-right{display:none!important;position:absolute;top:calc(100% - 1px);left:0;right:0;width:100%;border:1px solid #324e5e;border-radius:0 0 12px 12px;background:#102232;box-shadow:0 14px 35px #0007;padding:8px 14px 12px;z-index:22;grid-template-columns:1fr;gap:2px;margin:0}
 .site-header[data-mobile-open="true"] .header-right{display:grid!important}
 .site-header .header-right .header-link{display:block!important;min-width:0;font-size:12px;line-height:1.4;white-space:nowrap;padding:12px 11px;letter-spacing:.5px;border-radius:6px}
 .site-header .header-right .header-link[aria-current="page"]{background:#1b3652;color:#8bc1fb}
 .site-header .header-right .live-pill{display:none}
 .prices-grid,.cost-body,.cost-body.lower,.main-grid,.bottom-grid{grid-template-columns:minmax(0,1fr)}
 .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mix-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .prices-hero,.cost-hero{padding-top:25px;padding-bottom:25px}
 .prices-card,.prices-explainer,.cost-body>.panel{min-width:0;padding:20px}
 .footer{grid-template-columns:1fr!important}
 .improvements-grid{grid-template-columns:1fr}
 .sources-dialog{max-height:calc(100dvh - 12px)}
}

/* v0.6.8: mirror the personal-site header wordmark in all footers. */
.footer .footer-author{display:inline;font-family:Helvetica,Arial,sans-serif;font-size:23px;font-weight:400;letter-spacing:-.04em;line-height:1.35;color:#eef3f9;white-space:nowrap;text-decoration:none}
.footer .footer-author strong{font:inherit;font-weight:700;color:inherit}
.footer .footer-author .footer-author-dot{color:#74b9ff;font:inherit;letter-spacing:inherit}
@media(max-width:400px){.footer .footer-author{font-size:20px}}
/* Condition the named cable detail on an importing interconnector making the top three. */
.top-imports[hidden]{display:none!important}