/* Hearth theme for Energy Cost Modeller. Loaded after app.css, fonts.css and tokens.css (the shipped Hearth files, unchanged).
   app.css keeps the layout; this file restyles it using Hearth tokens only: no raw colours, no new shadows, one radius.
   The app's own variable names are re-pointed at Hearth tokens first, so every rule in app.css follows Hearth in light and dark. */

/* ---------- 1. app variable names -> Hearth tokens ---------- */
/* Listed with the same selectors app.css uses for dark mode, so these win at equal specificity because they load later. */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
  --surface-2: var(--sunken);
  --border: var(--line-soft);
  --text-2: var(--muted);
  --text-3: var(--muted);
  --accent-hover: var(--accent);
  --accent-soft: var(--tint);
  --good: var(--success);   --good-bg: color-mix(in srgb, var(--success) 12%, var(--raised));
  --warn: var(--warning);   --warn-bg: color-mix(in srgb, var(--warning) 14%, var(--raised));
  --bad: var(--danger);     --bad-bg: color-mix(in srgb, var(--danger) 12%, var(--raised));
  --grid: var(--line-soft);
  --font: var(--font-ui);
  --shadow: var(--elev-1);
  /* chart colours: navy and plum lead, then the status colours and mixes of those */
  --series-1: var(--accent); --series-2: var(--secondary); --series-3: var(--success); --series-4: var(--warning);
  --series-5: color-mix(in srgb, var(--accent) 55%, var(--secondary)); --series-6: color-mix(in srgb, var(--success) 55%, var(--accent));
  --series-7: color-mix(in srgb, var(--secondary) 60%, var(--danger)); --series-8: var(--danger);
}
/* app.css uses --accent-text for text on a filled accent; in Hearth that token is the link colour, so say it explicitly here */

/* ---------- 2. type ---------- */
body { font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-md); }
p { max-width: var(--measure); text-wrap: pretty; }
small, .small { font-size: var(--text-sm); }
a { color: var(--accent-text); text-underline-offset: .2em; }
a:hover { color: var(--accent-text); text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); }
/* Hearth: sentence case, no small caps or letter-spaced labels */
.tile .label, th, .scenario-row .metric .l { text-transform: none; letter-spacing: 0; }
.tile .label, .scenario-row .metric .l { font-size: var(--text-sm); }
th { font-size: var(--text-sm); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
html { scroll-padding-top: 5rem; }

/* ---------- 3. header: flat, tonal, current page underlined like a Hearth tab ---------- */
.site-header { background: var(--bg); border-bottom: 0; }
.site-header .wrap { min-height: 3.5rem; }
.brand { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--text); }
.brand svg { color: var(--accent); }
.site-nav { gap: var(--space-5); }
.site-nav a { color: var(--muted); padding: 0; min-height: var(--target); display: inline-flex; align-items: center; border-radius: 0; border-bottom: 3px solid transparent; font-weight: 600; }
.site-nav a:hover { background: none; color: var(--text); }
.site-nav a[aria-current="page"] { background: none; color: var(--text); border-bottom-color: var(--accent); }
.userbox { color: var(--muted); font-size: var(--text-sm); }
main { padding-top: var(--space-6); }
.crumbs, .crumbs a { color: var(--muted); }
.page-head { margin-bottom: var(--space-5); }
.footer { color: var(--muted); }
.footer .wrap { border-top: 0; padding-top: var(--space-3); }

/* theme toggle sits at the end of the header row */
.theme-toggle { margin-left: auto; }
.userbox + .theme-toggle { margin-left: var(--space-3); }
.site-nav ~ .userbox { margin-left: auto; }
.site-nav ~ .userbox + .theme-toggle { margin-left: var(--space-2); }

/* ---------- 4. surfaces: tone and a faint lift instead of outlines ---------- */
.card, .tile { background: var(--surface); border: 0; border-radius: var(--radius); box-shadow: var(--elev-1); }
.card { padding: var(--space-5); }
.card-head { margin-bottom: var(--space-3); }
.tile { padding: var(--space-4); }
.tile .value { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.tile .value.good { color: var(--success); }
.tile .value.bad { color: var(--danger); }
.compare-card { background: var(--raised); border: 0; border-radius: var(--radius); box-shadow: var(--elev-1); }
.compare-card.now { background: var(--sunken); box-shadow: var(--field-inset); }
.upgrade { border-top: 0; padding: var(--space-4) 0; }
.upgrade + .upgrade { box-shadow: 0 -1px 0 var(--line-soft); }
details.advanced, details.refine { border-top: 0; padding-top: var(--space-2); }
details > summary { min-height: var(--target); display: flex; align-items: center; }
.form-actions { background: var(--bg); border-top: 0; box-shadow: var(--elev-bar); }
.check-item { border-bottom: 0; }
.check-item + .check-item { box-shadow: 0 -1px 0 var(--line-soft); }
.scenario-row { border-bottom: 0; }
.scenario-row + .scenario-row { box-shadow: 0 -1px 0 var(--line-soft); }

/* ---------- 5. buttons: filled accent for the one main action, tonal for the rest, text for links ---------- */
.btn {
  min-height: var(--target); padding: 0 var(--space-5); border: 0; border-radius: var(--radius);
  font-weight: 600; font-size: var(--text-base); color: var(--text);
  background-color: var(--tint); background-image: none; box-shadow: var(--elev-1);
  transition: filter var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { background-color: var(--tint); color: var(--text); filter: brightness(.96); }
.btn:active { box-shadow: var(--press); }
.btn.primary { background-color: var(--accent); background-image: var(--sheen); box-shadow: var(--btn-shadow); color: var(--accent-on); }
.btn.primary:hover { background-color: var(--accent); color: var(--accent-on); filter: brightness(1.12); }
.btn.primary:active { filter: brightness(.96); box-shadow: var(--press); }
.btn.danger { color: var(--danger); border: 0; background-color: var(--tint); }
.btn.danger:hover { background-color: var(--tint); color: var(--danger); }
.btn.small { min-height: 2.25rem; padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn.link { background: transparent; box-shadow: none; color: var(--accent-text); padding: 0 var(--space-3); }
.btn.link:hover { background-color: var(--tint); text-decoration: none; filter: none; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- 6. fields: tonal fill, one underline that thickens on focus ---------- */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=time], select, textarea {
  font-size: var(--text-base); min-height: var(--target); padding: var(--space-3) var(--space-4);
  background: var(--sunken); color: var(--text); border: 0; border-bottom: 2px solid var(--line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; box-shadow: var(--field-inset);
}
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--focus); box-shadow: var(--field-inset), 0 2px 0 0 var(--focus); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
.field.has-error input, .field.has-error select { border-bottom-color: var(--danger); }
.field label { font-size: var(--text-sm); }
.field .help { color: var(--muted); font-size: var(--text-sm); }
.field .error-text, .error-text { color: var(--danger); font-size: var(--text-sm); }
.unit { color: var(--muted); }
.appliance-table input { min-height: 2.25rem; padding: var(--space-1) var(--space-2); }
.check { align-items: center; gap: var(--space-3); min-height: var(--target); }
.check input { appearance: none; margin: 0; width: 1.375rem; height: 1.375rem; flex: none; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); display: grid; place-content: center; box-shadow: none; padding: 0; min-height: 0; }
.check input[type=radio] { border-radius: 50%; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ""; width: .7rem; height: .7rem; background: var(--accent-on); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
.check input:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ---------- 7. choices, steps, tabs: rectangles, not pills; the chosen one is filled ---------- */
.btn-group .choice { border: 0; border-radius: var(--radius); background: var(--tint); box-shadow: var(--elev-1); color: var(--text); min-height: var(--target); padding: 0 var(--space-4); }
.btn-group .choice:hover { background: var(--tint); filter: brightness(.96); }
.btn-group .choice[aria-pressed="true"] { background-color: var(--accent); background-image: var(--sheen); box-shadow: var(--btn-shadow); color: var(--accent-on); font-weight: 600; }
.btn-group.stacked .choice { border-radius: var(--radius); padding: var(--space-3) var(--space-4); min-height: var(--target); }
.btn-group .choice.tile { border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.btn-group .choice.tile[aria-pressed="true"] { background-color: var(--tint); background-image: none; box-shadow: var(--elev-1), 0 0 0 3px var(--accent); color: var(--text); }
.btn-group .choice.tile[aria-pressed="true"] svg.hs .hs-ground { fill: color-mix(in srgb, var(--accent) 22%, var(--hs-ground)); }
.btn-group .choice:disabled { opacity: .4; }
.steps { gap: var(--space-4); }
.steps button { border: 0; border-radius: 0; background: none; color: var(--muted); font-weight: 600; font-size: var(--text-base); min-height: var(--target); padding: 0; border-bottom: 3px solid transparent; }
.steps button:hover { color: var(--text); }
.steps button .n { border-radius: var(--radius-sm); background: var(--tint); color: var(--text); width: 1.5rem; height: 1.5rem; }
.steps button[aria-current="step"] { background: none; color: var(--text); border-bottom-color: var(--accent); }
.steps button[aria-current="step"] .n { background: var(--accent); color: var(--accent-on); }
.plan-tabs { gap: var(--space-5); margin-bottom: var(--space-4); }
.plan-tabs .tab { background: none; border: 0; border-radius: 0; padding: 0; min-height: var(--target); font-weight: 600; font-size: var(--text-base); color: var(--muted); border-bottom: 3px solid transparent; }
.plan-tabs .tab:hover { color: var(--text); }
.plan-tabs .tab[aria-selected="true"] { background: none; color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.results-toolbar .seg { background: var(--sunken); border: 0; border-radius: var(--radius); box-shadow: var(--field-inset); padding: 3px; gap: 3px; overflow: visible; display: inline-flex; height: auto; }
.results-toolbar .seg button { border-radius: var(--radius-sm); background: transparent; color: var(--muted); min-height: 2.25rem; padding: 0 var(--space-4); font-size: var(--text-sm); font-weight: 600; }
.results-toolbar .seg button[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: var(--elev-1); }
.chip { border-radius: var(--radius-sm); background: var(--tint); color: var(--text); }
.chip.new { background: var(--tint); box-shadow: inset 0 0 0 2px var(--success); }
.stepper { border: 0; border-radius: var(--radius); background: var(--sunken); box-shadow: var(--field-inset); }
.stepper button { background: transparent; }
.stepper button:hover { background: var(--tint); }

/* ---------- 8. status: icon, words and tone; never colour alone ---------- */
.badge { border-radius: var(--radius-sm); background: var(--tint); color: var(--text); font-size: var(--text-sm); padding: 0 var(--space-2); }
.badge.good { background: var(--good-bg); color: var(--success); }
.badge.warn { background: var(--warn-bg); color: var(--warning); }
.badge.bad { background: var(--bad-bg); color: var(--danger); }
.badge.accent { background: var(--tint); color: var(--accent-text); }
.alert { --tone: var(--info); position: relative; padding: var(--space-4) var(--space-4) var(--space-4) 3rem; border: 0; border-radius: var(--radius); background: color-mix(in srgb, var(--tone) 12%, var(--raised)); color: var(--text); }
.alert::before { content: ""; position: absolute; left: var(--space-4); top: calc(var(--space-4) + 2px); width: 1.25rem; height: 1.25rem; background: var(--tone);
  -webkit-mask: var(--alert-icon) center / contain no-repeat; mask: var(--alert-icon) center / contain no-repeat; }
.alert.success { --tone: var(--success); background: color-mix(in srgb, var(--tone) 12%, var(--raised)); color: var(--text); --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-1.2 13L4.9 10.1l1.4-1.4 2.5 2.5 5-5 1.4 1.4-6.4 6.4Z'/%3E%3C/svg%3E"); }
.alert.info { --tone: var(--info); background: color-mix(in srgb, var(--tone) 12%, var(--raised)); color: var(--text); --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-.9 5h1.8v1.8H9.1V6Zm0 3h1.8v5H9.1V9Z'/%3E%3C/svg%3E"); }
.alert.warn { --tone: var(--warning); background: color-mix(in srgb, var(--tone) 14%, var(--raised)); color: var(--text); --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15 14H1L8 1Zm-.75 5v4h1.5V6h-1.5Zm0 5v1.5h1.5V11h-1.5Z'/%3E%3C/svg%3E"); }
.alert.error { --tone: var(--danger); background: color-mix(in srgb, var(--tone) 12%, var(--raised)); color: var(--text); --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15 14H1L8 1Zm-.75 5v4h1.5V6h-1.5Zm0 5v1.5h1.5V11h-1.5Z'/%3E%3C/svg%3E"); }
.alert:not(.success):not(.warn):not(.error):not(.info) { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-.9 5h1.8v1.8H9.1V6Zm0 3h1.8v5H9.1V9Z'/%3E%3C/svg%3E"); }
.compare-card .alert { padding-left: 3rem; }
/* the one highlight on the results screen: the headline saving */
.saving.good { background: var(--highlight); color: var(--highlight-on); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); align-self: flex-start; }
.saving.bad { color: var(--danger); }
.delta.good, td.best { color: var(--success); }
.delta.bad { color: var(--danger); }

/* ---------- 9. tables and lists: hairlines between rows only ---------- */
th, td { border-bottom: 0; }
tbody tr + tr > td, tbody tr + tr > th { box-shadow: 0 -1px 0 var(--line-soft); }
th { background: transparent; color: var(--muted); }
tr.heading th, .appliance-table tr.group th { background: var(--sunken); color: var(--text); }
tr.base td, tr.base th { background: color-mix(in srgb, var(--tint) 60%, transparent); }
.compare-table th:first-child, .compare-table td:first-child { background: var(--surface); }
.meter { background: var(--sunken); box-shadow: var(--field-inset); }
.meter > span { background: var(--success); }
.meter > span.tight { background: var(--warning); }
.meter > span.exceeds { background: var(--danger); }
.stackbar, .bartrack, .hz-track { background: var(--sunken); box-shadow: var(--field-inset); }
.hz-range { background: var(--success); }
.stackbar { border-radius: var(--radius-sm); }
.bartrack, .bar { border-radius: var(--radius-sm); }
.legend i { border-radius: var(--radius-sm); }
.tooltip { background: var(--raised); border: 0; box-shadow: var(--elev-2); border-radius: var(--radius); }
.chart .bar { stroke: var(--surface); }
.chart .dot { stroke: var(--surface); }
.auth-card { margin-top: var(--space-7); }

/* ---------- 10. the isometric houses sit on the Hearth page tone ---------- */
:root { --hs-ground: color-mix(in srgb, var(--success) 14%, var(--sunken)); }
:root[data-theme="dark"] { --hs-ground: color-mix(in srgb, var(--success) 18%, var(--sunken)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hs-ground: color-mix(in srgb, var(--success) 18%, var(--sunken)); } }

@media (forced-colors: active) {
  .card, .tile, .compare-card, .btn:not(.link), .alert, input, select, textarea { border: 1px solid CanvasText; }
}

/* ---------- 11. alignment and breathing room ---------- */
/* a label and its select on one row, level with the buttons beside them */
.actions form.inline { display: flex; align-items: center; gap: var(--space-2); }
.actions form.inline select { width: auto; min-width: 12rem; }
.actions form.inline label { margin: 0; }
/* rows of small inputs in the wizard sit apart from the question before and after */
.q { margin-bottom: var(--space-5); }
.q-row { gap: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.mini { gap: var(--space-2); }
.q-label { margin-bottom: var(--space-2); }
.with-unit { gap: var(--space-2); }
details > summary { gap: var(--space-2); flex-wrap: wrap; }
.btn-group + p, .btn-group + .small, .btn-group + .muted { margin-top: var(--space-2); }
.legend + p, .legend + .small { margin-top: var(--space-3); }
/* app.css sets some margins after the .mt helper, which then loses; the helper means what it says */
.mt { margin-top: var(--space-4) !important; }
.mt-0 { margin-top: 0 !important; }
/* stacked form fields, list items, label/value pairs */
.field + .field { margin-top: var(--space-4); }
.field-grid > .field + .field { margin-top: 0; }
.card li + li { margin-top: var(--space-2); }
.steps li + li, .site-nav li + li { margin-top: 0; }
.scenario-row .metric .v { margin-top: var(--space-1); }
.tile .sub { margin-top: var(--space-1); }
.legend + .chart { margin-top: var(--space-4); }
.field-grid + p, .field-grid + .small { margin-top: var(--space-3); }
.tile .value { margin-top: var(--space-1); }
/* the public calculator's "Sign in" link sits beside the theme button, pushed to the right with it */
.site-header .wrap > a.btn.small { margin-left: auto; }
.site-header .wrap > a.btn.small + .theme-toggle { margin-left: var(--space-2); }