/* kWhKoll — "Elcentralen" visual language. A household's real fuse box/
   distribution board: near-black steel panel, graph-paper backing (the
   kind used to plot a load curve), an amber warning-lamp accent for
   primary actions and headline numbers, a cyan LED-readout accent for
   secondary data. Condensed industrial display face, engineering-grade
   sans for body text, monospace for every number — a household
   electricity ledger is fundamentally about reading digits off a panel.
   Fonts are self-hosted (public/fonts/, SIL OFL) rather than pulled from
   a CDN at runtime, same "nothing fetched from elsewhere" posture as the
   rest of this app. */

@font-face {
    font-family: "Big Shoulders Display";
    src: url("/static/fonts/BigShouldersDisplay-Variable.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("/static/fonts/IBMPlexSans-Variable.ttf") format("truetype-variations");
    font-weight: 100 700;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("/static/fonts/IBMPlexMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("/static/fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
}

/* Dark ("Elcentralen" — a dim utility room) is the primary/default
   identity, so it lives on the bare :root; light ("the same fuse box,
   daylight instead of a dim utility room") is the override — the
   inverse of the usual light-first token structure, deliberately,
   since this product committed to dark as its signature look. A
   prefers-color-scheme:light OS setting applies it automatically
   unless data-theme="dark" is explicitly stamped (the toggle button,
   public/wizard.js); data-theme="light" applies it unconditionally,
   winning over both the default and the OS setting. */
:root {
    /* Tells the browser which palette native controls (scrollbars,
       date/number-input spinners, the <dialog> UA background) should
       assume — without this they default to a light-OS assumption
       regardless of our own dark palette. */
    color-scheme: dark;
    --bg: #1c2024;
    --bg-card: #262b31;
    --bg-inset: #15181b;
    --fg: #f3f5f7;
    --muted: #b3bcc4;
    --line: #3c424a;
    --accent: #f5c344;
    --accent-deep: #e0a92e;
    --on-accent: #14171a;
    --verdigris: #6fd3c7;
    --danger: #e0685c;
    --grid-line: rgba(255, 255, 255, 0.035);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
    /* Primary-button hover: "brighten to white" reads as a hover state
       on a dark ground but would nearly vanish on a light one — light
       mode instead deepens the accent, with the text flipping to match. */
    --btn-hover-bg: #ffffff;
    --btn-hover-fg: var(--on-accent);

    --font-display: "Big Shoulders Display", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
    --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --radius: 4px;
}

/* Light "steel panel" — same identity (amber/cyan accents, mono data,
   graph-paper grid, panel framing), just on a light steel-grey ground.
   Accent/verdigris/danger are deepened from their dark-theme values —
   the originals are too pale to read as text on a light background —
   while --on-accent stays dark in both themes, since every fill color
   in both palettes is light/mid-tone, never dark enough for light text. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: #dde1e4;
        --bg-card: #f5f6f7;
        --bg-inset: #c9ced3;
        --fg: #1c2024;
        --muted: #5a6169;
        --line: #b7bcc1;
        --accent: #b8790a;
        --accent-deep: #96630a;
        --on-accent: #14171a;
        --verdigris: #0d7d6e;
        --danger: #b23325;
        --grid-line: rgba(0, 0, 0, 0.045);
        --shadow: 0 1px 2px rgba(28, 32, 36, 0.08), 0 6px 20px rgba(28, 32, 36, 0.06);
        --btn-hover-bg: var(--accent-deep);
        --btn-hover-fg: #ffffff;
        color-scheme: light;
    }
}
:root[data-theme="light"] {
    --bg: #dde1e4;
    --bg-card: #f5f6f7;
    --bg-inset: #c9ced3;
    --fg: #1c2024;
    --muted: #5a6169;
    --line: #b7bcc1;
    --accent: #b8790a;
    --accent-deep: #96630a;
    --on-accent: #14171a;
    --verdigris: #0d7d6e;
    --danger: #b23325;
    --grid-line: rgba(0, 0, 0, 0.045);
    --shadow: 0 1px 2px rgba(28, 32, 36, 0.08), 0 6px 20px rgba(28, 32, 36, 0.06);
    --btn-hover-bg: var(--accent-deep);
    --btn-hover-fg: #ffffff;
    color-scheme: light;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    color: var(--fg);
    background: var(--bg);
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 28px 28px;
    margin: 0;
    line-height: 1.55;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--fg);
    line-height: 1.05;
    text-wrap: balance;
}
h1 { font-size: 2.1rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 0.75rem; }

a { color: var(--accent); }
a:hover { color: var(--fg); }

.icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
}
.icon-link:hover { color: var(--accent); }

.help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.3rem;
    padding: 0;
    border: 1px solid var(--muted);
    border-radius: 50%;
    background: none;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.help-btn:hover { color: var(--accent); border-color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.lede { color: var(--muted); font-size: 1.05rem; max-width: 60ch; }
.empty-state { color: var(--muted); font-style: italic; }
.fine-print { color: var(--muted); font-size: 0.85rem; max-width: 65ch; }
.error { color: var(--danger); font-weight: 600; }

/* --- Layout --- */

header {
    padding: 1.1rem 2rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--bg-card);
}
.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.3rem;
    text-decoration: none;
    color: var(--accent);
}
.logo:hover { color: var(--accent); }
.logo-mark { width: 1.6rem; height: 1.6rem; color: var(--accent); flex-shrink: 0; }

.theme-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; }
/* Icon shown = the theme currently in effect, mirroring the same
   default/media-query/explicit-override precedence as the color tokens
   above, so the icon and the actual palette never disagree. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: block; }
    :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

nav { display: flex; gap: 1.5rem; }
/* Scoped to the header specifically — the footer also uses a <nav>
   (semantically correct, it's a set of links) but must not inherit the
   header's bold uppercase-mono treatment; that mismatch (footer links
   accidentally uppercase, the "Om & feedback" button — not an <a>, so
   unaffected — staying plain) is exactly the "mixed casing" bug this
   comment is here to prevent regressing. */
header nav a {
    text-decoration: none;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid transparent;
}
header nav a:hover { border-bottom-color: var(--accent); color: var(--fg); }

main {
    max-width: 900px;
    margin: 2.5rem auto;
    padding: 0 1.25rem 2rem;
}

footer {
    margin-top: 4rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
}
footer a { color: var(--muted); text-decoration: underline; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}
.link-button:hover { color: var(--fg); }

/* --- Cards --- */

.card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    max-width: 480px;
}

/* --- Buttons --- */

.btn-primary, .btn-secondary, button[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--accent);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.05s;
}
.btn-primary, button[type="submit"] {
    background: var(--accent);
    color: var(--on-accent);
}
.btn-primary:hover, button[type="submit"]:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-fg); }
.btn-secondary {
    background: transparent;
    color: var(--accent);
}
.btn-secondary:hover { background: var(--accent); color: var(--on-accent); }
.btn-primary:active, .btn-secondary:active, button[type="submit"]:active { transform: translateY(1px); }

button.btn-danger {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}
button.btn-danger:hover { background: var(--danger); color: var(--on-accent); }

/* --- Forms --- */

.field { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.field label {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.field small { color: var(--muted); font-size: 0.85rem; }
/* A compact reference table dropped inline in a field's hint text —
   smaller/tighter than the full-page .data-table it borrows from, since
   it's a quick-glance aside, not primary content. */
.cop-hint-table { width: auto; margin: 0.4rem 0; }
.cop-hint-table th, .cop-hint-table td { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
/* A checkbox field's label is a full sentence, not a short field name —
   the uppercase-mono treatment above reads fine for "Namn"/"Antal" but
   turns into shouty noise across a whole sentence. */
.field-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--fg);
    cursor: pointer;
}
.field-checkbox input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    accent-color: var(--accent);
}
input, select {
    padding: 0.55rem 0.7rem;
    font-size: 1rem;
    font-family: var(--font-body);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-inset);
    color: var(--fg);
}
input:focus, select:focus { border-color: var(--accent); }

/* --- Tables --- */

.table-wrap { overflow-x: auto; padding: 0; max-width: none; }
.data-table { border-collapse: collapse; width: 100%; }
.data-table th, .data-table td {
    text-align: left;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.data-table thead th {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    border-bottom: 2px solid var(--line);
}
.data-table .num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.data-table tbody tr:hover { background: rgba(245, 195, 68, 0.06); }
.total-row { font-weight: 700; color: var(--accent); }
.total-row td { border-top: 2px solid var(--line); border-bottom: none; }

/* --- Cost-breakdown category history chart (kostnader) --- */

.cost-row.has-chart { cursor: pointer; }
.cost-row.has-chart:hover { background: rgba(245, 195, 68, 0.1); }
.chart-row { display: none; }
.chart-row.open { display: table-row; }
.category-chart { padding: 0.75rem 0; }
.category-chart-svg { width: 100%; max-width: 500px; height: 90px; display: block; background: var(--bg-inset); border-radius: var(--radius); }
.chart-line { fill: none; stroke-width: 2; }
.chart-line-kwh { stroke: var(--accent); }
.chart-line-kr { stroke: var(--verdigris); }
.category-chart-legend { display: flex; gap: 1rem; margin-top: 0.4rem; font-family: var(--font-mono); font-size: 0.75rem; }
.legend-kwh { color: var(--accent); }
.legend-kr { color: var(--verdigris); }

/* --- Cost-breakdown overview chart (kostnader) --- */

.overview-chart-card { max-width: none; }
.overview-chart-svg { width: 100%; height: 220px; display: block; background: var(--bg-inset); border-radius: var(--radius); margin-bottom: 1rem; }
.overview-chart-svg .chart-line { fill: none; stroke-width: 2; }
/* Lines up with whichever month the "Välj månad" pills below currently
   show — drawn before the data polylines in source order so it sits
   behind them, a quiet reference line rather than another data series. */
.chart-marker-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.overview-legend { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.overview-legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; cursor: pointer; }
.overview-legend-extra { display: none; margin-top: 0.75rem; }
#overview-show-more-btn { margin-top: 0.75rem; font-size: 0.85rem; }
.legend-swatch { width: 0.8rem; height: 0.8rem; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.month-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.month-pill {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
    text-decoration: none;
}
.month-pill:hover { border-color: var(--accent); color: var(--fg); }
.month-pill.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

.forecast-table .sticky-col {
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 1;
}

.summary-table { border-collapse: collapse; width: 100%; }
.summary-table td { padding: 0.6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.summary-table td:first-child { color: var(--muted); width: 40%; }
.summary-table td:nth-child(2) { text-align: right; padding-right: 0.75rem; font-family: var(--font-mono); }
.summary-table td:last-child { text-align: right; white-space: nowrap; width: 1%; }

/* --- Bar chart (cost breakdown) --- */

.bar-track { background: var(--bg-inset); border-radius: 2px; height: 0.9rem; overflow: hidden; min-width: 100px; }
.bar-fill { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); height: 100%; border-radius: 2px; }

/* --- Wizard step indicator --- */

.wizard-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.85rem;
}
.step.active { color: var(--fg); font-weight: 600; }
.dot {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.step.active .dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.step.done .dot { background: var(--verdigris); border-color: var(--verdigris); color: var(--on-accent); }
.step-connector { flex: 0 1 2rem; height: 1px; background: var(--line); margin: 0 0.5rem; }

/* --- House shape diagram (step 1) --- */

.house-diagram-field { align-items: center; }
.house-diagram {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.5rem;
}
.hd-ground { stroke: var(--line); stroke-width: 3; }
.hd-house { fill: var(--bg-card); stroke: var(--accent); stroke-width: 2; }
.hd-roof { fill: var(--accent); stroke: var(--accent); }
.hd-floor-line { stroke: var(--accent); stroke-width: 1.5; }
.hd-basement { fill: rgba(111, 211, 199, 0.14); stroke: var(--verdigris); stroke-width: 1.5; }
.hd-garage { fill: rgba(154, 164, 172, 0.1); stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.hd-label { font-family: var(--font-mono); font-size: 9px; fill: var(--muted); }
.hd-label-strong { font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: var(--fg); }

/* --- Appliance wizard (step 3) --- */

.appliance-group h2 { margin-top: 2rem; }
.appliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}
.appliance-tile {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.9rem 0.6rem;
    text-align: center;
    background: var(--bg-card);
}
.tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto;
    border-radius: 50%;
    background: rgba(111, 211, 199, 0.12);
    color: var(--verdigris);
    border: none;
    cursor: pointer;
    padding: 0.6rem;
}
.tile-icon svg { width: 100%; height: 100%; }
.tile-icon:hover { background: rgba(111, 211, 199, 0.22); }
.tile-label { font-size: 0.82rem; margin-top: 0.5rem; min-height: 2.2em; }
.count-badge { font-family: var(--font-mono); font-weight: 700; margin-top: 0.2rem; color: var(--accent); }
.tile-reset {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    margin-top: 0.4rem;
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
}
.tile-reset:hover { border-color: var(--danger); color: var(--danger); }

dialog.app-dialog {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0;
    background: transparent;
    /* Browsers' UA stylesheet sets color:black directly on <dialog> — an
       explicit value, not "unset", so it breaks inheritance from body
       and every un-classed <p>/<dt> inside renders black-on-dark-card
       unless overridden here. */
    color: var(--fg);
    box-shadow: none;
}
dialog.app-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog.app-dialog .card { max-width: 360px; box-shadow: none; margin: 0; }
dialog.app-dialog h2 { margin-top: 0; }
dialog.app-dialog.wide .card { max-width: 480px; }
.modal-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }

/* --- "Om & feedback" tab modal --- */

.fb-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}
.fb-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.2rem;
    margin-bottom: -1px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    cursor: pointer;
}
.fb-tab:hover { color: var(--fg); }
.fb-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.fb-tab-panel { display: none; }
.fb-tab-panel.active { display: block; }
.fb-tab-panel textarea {
    padding: 0.55rem 0.7rem;
    font-size: 1rem;
    font-family: var(--font-body);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-inset);
    color: var(--fg);
    resize: vertical;
}
.about-info { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.75rem; margin: 1rem 0; font-family: var(--font-mono); font-size: 0.85rem; }
.about-info dt { color: var(--muted); }
.about-producer { text-align: center; padding-top: 0.75rem; border-top: 1px solid var(--line); margin-bottom: 1rem; }
.about-producer-label { display: block; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.5rem; }
.about-producer a { display: inline-block; opacity: 0.75; transition: opacity 0.15s; }
.about-producer a:hover { opacity: 1; }
.vikk-logo { width: 120px; height: auto; }

.owned-appliances { list-style: none; padding: 0; }
.owned-appliances li { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.owned-icon { color: var(--verdigris); }
.owned-icon svg { display: block; width: 1.5rem; height: 1.5rem; }
.owned-count { margin-left: auto; font-family: var(--font-mono); color: var(--muted); }

/* Level fine-tuning table (step 4) overrides .summary-table's 3-column
   nth-child rules, which don't fit this table's 5 columns (icon, apparat,
   antal, nivå, säsong). */
.level-form { max-width: 640px; }
.level-table th, .level-table td { padding: 0.5rem 0.6rem; }
.level-table td:first-child { width: 2.5rem; color: inherit; }
.level-table td:nth-child(2) { text-align: left; padding-right: 0; font-family: inherit; }
.level-table td:nth-child(4), .level-table td:last-child { width: auto; white-space: normal; text-align: left; }
.level-table input { padding: 0.4rem 0.5rem; font-size: 0.9rem; }
.level-table select { padding: 0.3rem 0.4rem; font-size: 0.9rem; }
.freq-input { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.85rem; }
.freq-input input { padding: 0.3rem; }
.exact-input-wrap { align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }

.month-grid { display: grid; grid-template-columns: repeat(6, minmax(2.4rem, 1fr)); gap: 0.25rem; max-width: 18rem; }
.month-toggle {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 0.25rem 0.2rem;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    cursor: pointer;
}
.month-toggle:hover { border-color: var(--verdigris); color: var(--verdigris); }
.month-toggle.active { background: var(--verdigris); border-color: var(--verdigris); color: var(--on-accent); }
/* "Året runt" sits above the 12-month grid rather than inside it as a
   13th cell — mutually exclusive with picking specific months, so it
   reads as a separate choice, not one more month. */
.month-all-toggle { grid-column: 1 / -1; text-transform: none; font-family: var(--font-body); }

/* --- Home page --- */

.home-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 2.5rem; }
.home-steps { display: flex; flex-direction: column; gap: 0.75rem; max-width: 320px; }
.home-step { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); }
.home-step .dot { background: var(--bg-card); }

/* --- Forecast price form --- */

.price-form { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; max-width: none; }
.price-form .field { margin-bottom: 0; }

/* --- Assumed heating curve (prognos) --- */

.heating-curve-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.35rem; max-width: 56rem; margin: 1rem 0 2rem; }
.heating-curve-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.2rem;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--on-accent);
}
.heating-curve-month { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; }
.heating-curve-pct { font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; }

/* --- Accuracy indicator (kostnader/prognos) --- */

.accuracy-box { border-left: 3px solid var(--muted); padding: 0.6rem 1rem; margin: 1rem 0; max-width: 60ch; background: var(--bg-card); }
.accuracy-label { margin: 0; }
.accuracy-notes { margin: 0.4rem 0 0; padding-left: 1.2rem; color: var(--muted); font-size: 0.88rem; }
.accuracy-notes li { margin-bottom: 0.2rem; }
.accuracy-low { border-left-color: var(--danger); }
.accuracy-low strong { color: var(--danger); }
.accuracy-medium { border-left-color: var(--accent); }
.accuracy-medium strong { color: var(--accent); }
.accuracy-high { border-left-color: var(--verdigris); }
.accuracy-high strong { color: var(--verdigris); }

/* --- Responsive --- */

@media (max-width: 640px) {
    body { overflow-x: hidden; }
    header {
        padding: 1rem;
        flex-wrap: nowrap;
    }
    .logo { flex-shrink: 0; }
    /* Scroll horizontally instead of wrapping to a second line — a
       wrapped header looks broken (logo and nav overlapping the next
       row), a scrollable one-line nav reads as intentional. Scoped to
       the header (not bare `nav`) for the same reason as `header nav a`
       above — an unscoped rule's font-size would leak into the footer's
       <nav>, growing its links a touch past the "Om & feedback" button
       next to them. */
    header nav {
        gap: 1rem;
        font-size: 0.9rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
    }
    footer { padding: 1.1rem 1rem; }
    .footer-links {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
    }
    main { padding: 0 1rem 1.5rem; margin: 1.5rem auto; }
    h1 { font-size: 1.6rem; }
    .card { max-width: none; }
    .wizard-steps .step-label { display: none; }
    .step-connector { flex-basis: 0.75rem; }

    /* The plain key/value recap table (household summary) stacks instead
       of staying tabular — a 3-column row (label, value, "Ändra") doesn't
       fit a phone width, and unlike .level-table this one has no reason
       to scroll since it's just text. .level-table keeps its table layout
       and scrolls inside its own .table-wrap instead (see below) — it has
       real per-column structure (icon/count/select/month-grid) that
       doesn't stack cleanly. */
    .summary-table:not(.level-table),
    .summary-table:not(.level-table) tbody,
    .summary-table:not(.level-table) tr,
    .summary-table:not(.level-table) td {
        display: block;
        width: auto;
    }
    .summary-table:not(.level-table) tr { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
    .summary-table:not(.level-table) td {
        padding: 0.1rem 0;
        border-bottom: none;
        text-align: left;
        white-space: normal;
    }
    .summary-table:not(.level-table) td:first-child {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .level-form .table-wrap { margin: 0 -1.5rem; padding: 0 1.5rem; }
    .month-grid { max-width: none; }

    /* 12 columns is far too cramped on a phone — two 6-month rows reads
       fine and still shows the whole year at a glance. */
    .heating-curve-strip { grid-template-columns: repeat(6, 1fr); }
}

/* Narrower still: the wordmark next to the icon is the first thing to
   go, not the nav (which already scrolls on its own) — an icon-only
   logo reads fine at this width, "kWhKoll" spelled out doesn't fit
   alongside the theme toggle without crowding it. */
@media (max-width: 400px) {
    .logo span { display: none; }
}