/* Scoped to the running-cost planner; shared heat-loss styles are untouched. */
.ec-planner { max-width:1200px; margin:0 auto; padding:48px 24px 12px; color:var(--color-text); }
.ec-planner h2,.ec-planner h3,.ec-planner strong { color:var(--color-text-bright); }
.ec-planner h2 { font-size:clamp(1.6rem,4vw,2.3rem); margin-bottom:16px; }
.ec-planner p { margin:12px 0; line-height:1.65; }
.ec-planner a { color:var(--color-accent); text-decoration:underline; }
.ec-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:24px 0; }
.ec-card { background:var(--color-dark-secondary); border:1px solid var(--color-border-light); border-radius:16px; padding:24px; min-width:0; }
.ec-controls { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ec-field { min-width:0; }
.ec-field label { display:block; margin-bottom:7px; color:var(--color-text-bright); font-size:.92rem; }
.ec-field input,.ec-field select { width:100%; min-height:44px; background:var(--color-dark); border:1px solid var(--color-border-light); border-radius:6px; padding:9px; color:var(--color-text-bright); font:inherit; }
.ec-field input[type=range] { padding:0; accent-color:var(--color-accent); }
.ec-field input:focus-visible,.ec-field select:focus-visible,.ec-planner summary:focus-visible { outline:3px solid var(--color-accent); outline-offset:3px; }
.ec-field input[aria-invalid=true] { border-color:#e45757; }
.ec-wide { grid-column:1/-1; }
.ec-planner small { display:block; font-size:.85rem; line-height:1.6; margin-top:6px; }
.ec-planner summary { cursor:pointer; padding:12px 0; font-weight:600; }
.ec-result-number { font-size:clamp(1.7rem,5vw,2.6rem); font-weight:700; color:var(--color-accent); }
.ec-bars { display:grid; gap:15px; margin:24px 0; }
.ec-bar-track { height:12px; background:var(--color-dark); border-radius:6px; overflow:hidden; margin-top:5px; }
.ec-bar-fill { height:100%; background:var(--color-accent); border-radius:6px; }
.ec-scroll { overflow-x:auto; }
.ec-planner table { width:100%; border-collapse:collapse; font-size:.9rem; }
.ec-planner th,.ec-planner td { padding:10px 6px; text-align:left; border-bottom:1px solid var(--color-border-light); }
.ec-planner caption { text-align:left; font-weight:600; margin-bottom:8px; }
.ec-error { border-left:4px solid #e45757; padding:12px; }
.ec-planner [hidden] { display:none !important; }
.ec-band-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; margin:12px 0; align-items:end; }
@media(max-width:780px) { .ec-grid { grid-template-columns:1fr; } }
@media(max-width:480px) { .ec-controls { grid-template-columns:1fr; } .ec-planner { padding:32px 16px; } .ec-card { padding:18px; } .ec-band-grid { grid-template-columns:1fr 1fr; } .ec-band-grid>span { grid-column:1/-1; } }
.ec-site .hamburger span { background:var(--color-text-bright); }
@media(max-width:540px) {
 .ec-site .nav-container { padding:0 16px; gap:8px; }
 .ec-site .nav-logo .logo-word { font-size:1rem; letter-spacing:.2em; }
 .ec-site .theme-toggle { margin:0 0 0 auto; flex-shrink:0; }
 .ec-site .hamburger { flex-shrink:0; }
}

.ec-mobile-summary { display:none; }
@media(max-width:780px) { .ec-mobile-summary { display:block; grid-column:1/-1; padding:16px; border-left:3px solid var(--color-accent); background:var(--color-dark); color:var(--color-text-bright); } }

/* The same accessible help pattern is available to both cost and heat-loss inputs. */
.ec-site .ec-help { display:inline-block; position:relative; vertical-align:middle; margin:3px 0 7px; }
.ec-site .ec-help button { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:1px solid var(--color-text-secondary); border-radius:50%; color:var(--color-text-bright); background:var(--color-dark); cursor:help; font:600 .9rem inherit; }
.ec-site .ec-help button:focus-visible { outline:3px solid var(--color-accent); outline-offset:3px; }
.ec-site .ec-help [role=tooltip] { display:none; position:absolute; left:0; top:calc(100% + 6px); width:min(310px,75vw); padding:14px; z-index:20; border:1px solid var(--color-border-light); border-radius:8px; background:var(--color-dark-secondary); color:var(--color-text-bright); box-shadow:0 6px 24px #0004; font-size:.86rem; font-weight:400; line-height:1.6; }
.ec-site .ec-help:hover [role=tooltip],.ec-site .ec-help:focus-within [role=tooltip] { display:block; }
.ec-headline { padding:24px; margin:24px 0; border:2px solid var(--color-accent); border-radius:16px; background:var(--color-dark-secondary); }
.ec-planner .ec-headline p { margin:6px 0; }
.ec-saving-number { font-size:clamp(2rem,6vw,3.5rem); font-weight:800; color:var(--color-accent); line-height:1.15 !important; }
.ec-saving-percent { font-size:clamp(1.2rem,3vw,1.8rem); font-weight:700; color:var(--color-text-bright); }
.ec-headline[data-direction=increase] { border-style:dashed; }
.ec-planner #ec-saving { font-size:clamp(1.2rem,3vw,1.7rem); font-weight:700; color:var(--color-text-bright); }
@media(max-width:780px) { .ec-mobile-summary { display:none; } }
@media(min-width:781px) { .ec-grid>.ec-card:last-child { align-self:start; position:sticky; top:100px; } }
.ec-planner .ec-field>label:has(+.ec-help) { display:inline-block; max-width:calc(100% - 38px); margin-right:6px; }
.ec-planner .ec-field .ec-help [role=tooltip] { right:0; left:auto; }

/* Anchor help to the whole field so short labels cannot push it off-screen. */
.ec-site :is(.ec-field,.hp-input-group) { position:relative; }
.ec-site :is(.ec-field,.hp-input-group) .ec-help { position:static; }
.ec-site :is(.ec-field,.hp-input-group) .ec-help [role=tooltip] { left:0; right:auto; top:calc(100% + 4px); width:min(310px,100%); }
@media(max-width:780px) { .ec-mobile-summary { display:block; font-size:1.2rem; font-weight:650; line-height:1.5; } }

.ec-site .ec-help [role="tooltip"] { background: var(--color-dark); }