/* /css/fonts.css */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/geist-latin.woff2?v=3c9d09e79488b2d7') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/geist-latin-ext.woff2?v=3c9d09e79488b2d7') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/fonts/geist-mono-latin.woff2?v=3c9d09e79488b2d7') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/fonts/geist-mono-latin-ext.woff2?v=3c9d09e79488b2d7') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* /css/tokens.css */
/* Light-theme defaults. Dark mode overrides live under [data-theme="dark"] below.
   Components should consume semantic tokens so pages, dialogs, sheets, dropdowns,
   tooltips and toasts render in both themes without page-specific color forks. */
:root {
    --font-sans: 'Geist';
    --font-display: 'Geist';
    --font-mono: 'Geist Mono';
    --color-bg: #f7f8fa;
    --color-bg-alt: #ffffff;
    --color-bg-soft: #f2f4f7;
    --color-bg-deep: #eef0f5;
    --color-surface: #ffffff;
    --color-surface-strong: #ffffff;
    --color-line: #e6e8ee;
    --color-line-strong: #d4d8e0;
    --color-text: #1a1f2e;
    --color-text-soft: #3d4456;
    --color-text-muted: #5f6675;
    --color-text-faint: #626b7a;
    /* AA-compliant "text" variants of accents for use on their -soft backgrounds */
    --color-solar-text:    #b45309;
    --color-energy-text:   #047857;
    --color-water-text:    #0369a1;
    --color-pool-text:     #0e7490;
    --color-climate-text:  #be185d;
    --color-heatpump-text: #6d28d9;
    --color-garden-text:   #4d7c0f;
    --color-clean-text:    #0f766e;
    --color-tado-text:     #be123c;
    --color-unifi-text:    #0369a1;
    --color-success-text:  #047857;
    --color-warning-text:  #9a3412;
    --color-error-text:    #b91c1c;
    --color-success: #059669;
    --color-success-soft: #d1fae5;
    --color-success-rgb: 5, 150, 105;
    /* Caution orange — split off solar amber so brand/active/affirmative and
       stale/caution are no longer the same hue. Affirmative consumers that
       used to ride --color-warning (slider thumb, slider-confirm-ok, /modi +
       /verblijven amber theme) were rewired to --color-solar in the same pass. */
    --color-warning: #c2410c;
    --color-warning-soft: #ffedd5;
    --color-warning-rgb: 194, 65, 12;
    --color-error: #b91c1c;
    --color-error-soft: #fee2e2;
    --color-error-rgb: 185, 28, 28;
    /* "Beyond danger" — over-budget allowance bar, deeper than --color-error. */
    --color-error-strong: #7f1d1d;
    /* Info/accent blue (used for schedule pills, stale banners, links) — no token existed. */
    --color-info: #3b82f6;
    --color-info-rgb: 59, 130, 246;
    --color-info-soft: rgba(59, 130, 246, 0.14);
    --color-solar: #d97706;
    --color-solar-soft: #fef3c7;
    --color-energy: #059669;
    --color-energy-soft: #d1fae5;
    --color-water: #0369a1;
    --color-water-soft: #e0f2fe;
    --color-pool: #0891b2;
    --color-pool-soft: #cffafe;
    --color-climate: #be185d;
    --color-climate-soft: #fce7f3;
    --color-heatpump: #6d28d9;
    --color-heatpump-soft: #ede9fe;
    --color-tado: #e11d48;
    --color-tado-soft: #ffe4e6;
    --color-tado-rgb: 225, 29, 72;
    --color-unifi: #0288d1;
    --color-unifi-soft: #e0f2fe;
    --color-unifi-rgb: 2, 136, 209;
    --color-garden: #65a30d;
    --color-garden-soft: #ecfccb;
    --color-garden-rgb: 101, 163, 13;
    --color-clean: #0d9488;
    --color-clean-soft: #ccfbf1;
    --color-clean-rgb: 13, 148, 136;
    /* Gas/flame accent (Tado gas card) — a warm orange data class, distinct from
       --color-solar amber and --color-tado coral. */
    --color-gas: #fb923c;
    --improvements: #5b6f9c;
    --improvements-text: #41527a;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-pill: 999px;
    /* Canonical responsive breakpoints — prefer these in new code over ad-hoc px values.
       The codebase has 18 distinct max-widths historically; these four cover the meaningful
       layout cliffs. Existing media queries are not migrated en masse — only consolidate
       outliers when adjacent rules already use the canonical token. */
    --bp-xl: 1380px;
    --bp-lg: 1100px;
    --bp-md: 768px;
    --bp-sm: 480px;
    /* Canonical type ramp — prefer these in new code over ad-hoc font-size values.
       web/ historically carries 600+ font-size decls across ~30 near-duplicate
       values; these ten steps map to the dominant clusters. Existing rules are
       NOT migrated en masse (same policy as --radius-* / --bp-*) — adopt a token
       when you touch a rule or build a new surface. */
    --fs-2xs:  0.68rem;  /* micro labels, dense chips */
    --fs-xs:   0.72rem;  /* eyebrow / small caption */
    --fs-sm:   0.78rem;  /* caption, secondary row text (most common cluster) */
    --fs-md:   0.82rem;  /* small body */
    --fs-base: 0.85rem;  /* body */
    --fs-lg:   0.9rem;   /* emphasised body */
    --fs-xl:   1rem;     /* subhead */
    --fs-2xl:  1.1rem;   /* card title */
    --fs-3xl:  1.3rem;   /* section heading */
    --fs-4xl:  2rem;     /* display / big number */
    --tracking-eyebrow: 0.18em;  /* uppercase eyebrow letter-spacing */
    /* Spacing scale — 8px-based rhythm. Prefer over ad-hoc px gaps/padding in new
       code (same "adopt on touch" policy as --radius-* / --fs-* scales); the historical
       2-28px gap/padding continuum is NOT migrated en masse. */
    --space-3xs: 2px;
    --space-2xs: 4px;
    --space-xs:  6px;
    --space-sm:  8px;
    --space-md:  12px;
    --space-lg:  16px;
    --space-xl:  24px;
    --space-2xl: 32px;
    /* Amber-weight variants for scenarios where --color-warning-soft (0.15) is too heavy
       (-faint, e.g. nav cooldown chips at rest) or too light (-strong, hero unavailable
       state borders). Use the existing --color-warning-soft for default tints. */
    --color-warning-soft-faint:  rgba(194, 65, 12, 0.07);
    --color-warning-soft-strong: rgba(194, 65, 12, 0.28);
    --topbar-height: 56px;
    --sidebar-width: 252px;
    --shadow-soft: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.06);
    --shadow-panel: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.04);
    --shadow-card: 0 2px 8px rgba(17, 24, 39, 0.08), 0 1px 4px rgba(17, 24, 39, 0.05);
    --color-focus-ring: rgba(217, 119, 6, 0.35);
    --color-focus-outline: rgba(217, 119, 6, 0.6);
    /* RGB triplets for components that need rgba() alpha variants */
    --color-solar-rgb:         217, 119, 6;
    --color-water-rgb:         3, 105, 161;
    --color-pool-rgb:          8, 145, 178;
    --color-heatpump-rgb:      109, 40, 217;
    /* Light accent variants — for text/borders on very dark (near-black) surfaces */
    --color-info-light-rgb:    96, 165, 250;   /* blue-400 — for wifi badge text */
    --color-success-bright-rgb: 74, 222, 128;  /* green-400 — for lan badge text */
    --color-heatpump-light-rgb: 192, 132, 252; /* purple-400 — for vpn badge text */
    --color-water-light-rgb:   100, 160, 255;  /* bright blue — for action button highlights */
    --color-error-light-rgb:   248, 113, 113;  /* red-400 — for danger button highlights */
    /* Dark mobile shell — navy surfaces used by tabbar, sticky topbar, chart cards,
       fullscreen sheets. These are intentional dark elements within the light page theme. */
    --color-shell-900:         rgba(4, 9, 20, 1);
    --color-shell-800:         rgba(7, 17, 31, 1);
    --color-shell-700:         rgba(12, 24, 44, 1);
    --color-shell-scrim-light: rgba(17, 24, 39, 0.35); /* sidebar drawer scrim */
    --color-shell-scrim:       rgba(4, 9, 20, 0.50);   /* mobile nav scrim */
    --color-shell-modal:       rgba(4, 9, 20, 0.78);   /* modal backdrop */
    --color-shell-backdrop:    rgba(2, 6, 23, 0.76);   /* graph sheet backdrop */
    --color-shell-tabbar:      rgba(7, 17, 31, 0.96);  /* bottom tabbar */
    --color-shell-topbar:      rgba(7, 17, 31, 0.97);  /* sticky topbar at ≤640px */
    --color-shell-chart-start: rgba(12, 24, 44, 0.98); /* mobile chart card gradient start */
    --color-shell-chart-end:   rgba(7, 16, 31, 0.96);  /* mobile chart card gradient end */
    --color-shell-graph-bg:    rgba(4, 10, 21, 0.72);  /* graph scroll inner overlay */
    --color-shell-fullscreen:  rgba(7, 17, 31, 0.99);  /* fullscreen chart sheet */
    --color-shell-toast:       rgba(15, 24, 40, 0.96); /* sw-update toast + similar floating chips */
    --color-shell-list:        rgba(30, 41, 59, 0.55); /* unifi device list tinted bg */
    --color-shell-list-header: rgba(15, 23, 42, 0.35); /* unifi device group header */
    /* Text and borders for use ON dark shell surfaces (contrast-safe) */
    --color-text-on-shell:        rgba(255, 255, 255, 0.92);
    --color-text-muted-on-shell:  rgba(255, 255, 255, 0.55);
    --color-text-faint-on-shell:  rgba(255, 255, 255, 0.35);
    --color-line-on-shell:        rgba(255, 255, 255, 0.10);
    /* Theme-aware content surfaces for heroes, chart cards, and flow canvases.
       True shell chrome (tabbar, scrims, modal backdrops) keeps the shell tokens. */
    --color-content-surface:       color-mix(in srgb, var(--color-bg-alt) 94%, var(--color-bg-soft));
    --color-content-line:          var(--color-line);
    --color-content-text:          var(--color-text);
    --color-content-text-muted:    var(--color-text-muted);
    --color-content-text-faint:    var(--color-text-faint);
    --color-content-chip-bg:       color-mix(in srgb, var(--color-text) 4%, transparent);
    --color-content-chart-start:   color-mix(in srgb, var(--color-bg-alt) 94%, var(--color-bg-soft));
    --color-content-chart-end:     color-mix(in srgb, var(--color-bg-soft) 88%, var(--color-bg-alt));
    --color-content-graph-bg:      color-mix(in srgb, var(--color-bg-alt) 86%, var(--color-bg-soft));
    /* Chart palette (see web/js/utils/chart.js — mirror these in JS too). */
    --chart-solar:            #fbbf24;
    --chart-solar-rgb:        251, 191, 36;
    --chart-solar-bright:     #fcd34d;         /* lighter yellow for text on dark shell */
    --chart-loads:            #818cf8;
    --chart-loads-rgb:        129, 140, 248;
    --chart-feedin:           #34d399;
    --chart-grid-import:      #60a5fa;
    --chart-battery:          #a78bfa;
    --chart-directload:       #f59e0b;
    --chart-axis-rgb:         148, 163, 184;
    /* Dim variants for past/future bars in month charts */
    --chart-solar-past:       rgba(251, 191, 36, 0.45);
    --chart-solar-future:     rgba(251, 191, 36, 0.10);
    --chart-directload-past:  rgba(245, 158, 11, 0.65);
    --chart-loads-past:       rgba(129, 140, 248, 0.70);
    --chart-feedin-past:      rgba(52, 211, 153, 0.55);
    --chart-battery-charged:  #60a5fa;
    /* Semantic axis/gridline tokens — all built on --chart-axis-rgb so re-theming
       the chart framework requires changing only the triplet. Use via
       `style="fill: var(--chart-axis-label)"` in Vue templates (SVG attr can't take var()). */
    --chart-axis-grid:        rgba(148, 163, 184, 0.10); /* minor gridlines */
    --chart-axis-grid-base:   rgba(148, 163, 184, 0.18); /* chart baseline */
    --chart-axis-unit:        rgba(148, 163, 184, 0.40); /* unit labels (kW, kWh, %, ms) */
    --chart-axis-label-dim:   rgba(148, 163, 184, 0.45); /* time tick labels */
    --chart-axis-empty:       rgba(148, 163, 184, 0.50); /* empty-state "niet beschikbaar" text */
    --chart-axis-label:       rgba(148, 163, 184, 0.55); /* y-tick labels */
    --chart-axis-marker:      rgba(148, 163, 184, 0.60); /* "Nu" marker text */
    --chart-axis-now:         rgba(148, 163, 184, 0.30); /* "Nu" dashed line */
    --chart-axis-now-strong:  rgba(148, 163, 184, 0.70); /* "Nu" tick label emphasis */
    --chart-axis-midnight:    rgba(148, 163, 184, 0.65); /* Midnight tick label */
    /* Text color to pair with accent backgrounds (--color-solar, etc.) */
    --color-on-accent:        #ffffff;
    /* ─── Automation v2 design tokens ──────────────────────────────────── */
    --automation-column-gap: 16px;
    --automation-block-gap: 12px;
    --automation-editor-min-height: 520px;
    --automation-side-rail-width: 320px;
    --automation-node-trigger: var(--color-solar);
    --automation-node-condition: var(--color-heatpump);
    --automation-node-condition-alt: var(--color-pool);
    --automation-node-action: var(--color-energy);
    --automation-node-rollback: var(--color-info);
    --automation-status-idle: var(--color-text-muted);
    --automation-status-active: var(--color-energy);
    --automation-status-cooldown: var(--color-warning);
    --automation-status-blocked: var(--color-error);
    /* Global motion scale — promote the formerly automation-only durations so
       new/edited rules reference one vocabulary (adopt on touch, like --radius-*).
       prefers-reduced-motion is still neutralized by the global * reset. */
    --motion-fast: 140ms ease-out;
    --motion-base: 180ms ease-out;
    --motion-slow: 220ms ease-out;
    --automation-transition-fast: var(--motion-fast);
    --automation-transition-medium: var(--motion-base);
    /* ─── AuDHD staging overlay aliases ────────────────────────────────────
       The audhd-*.css overlays use these custom names; map them onto the
       canonical tokens so light/dark theming flows through automatically. */
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-soft);
    --text-tertiary: var(--color-text-muted);
    --surface-1: var(--color-surface);
    --surface-2: var(--color-surface-strong);
    --surface-3: var(--color-bg-soft);
    --accent: var(--color-info);
    /* ─── Stays / verblijven page aliases (map to canonical tokens so both themes work) */
    --amber: var(--color-solar);
    --green: var(--color-success);
    --blue: var(--color-info);
    --card-bg: var(--color-surface);
    --border-color: var(--color-line-strong);
    --color-surface-elevated: var(--color-surface-strong);
    --color-border: var(--color-line);
    /* Canonical card surface — the Zwembadlogica (.pool-shelly-logic-card)
       treatment promoted to one token so every card shares it. Auto-themes
       via --color-bg-alt. Change card color app-wide here. */
    --color-card: color-mix(in srgb, var(--color-bg-alt) 82%, transparent);
}

/* ─── Dark theme token overrides ─────────────────────────────────────────── */
[data-theme="dark"] {
    --color-bg:             #0b1120;
    --color-bg-alt:         #111827;
    --color-bg-soft:        #1e293b;
    --color-bg-deep:        #070b15;
    --color-surface:        #172033;
    --color-surface-strong: #1e2a3a;
    /* Cards lift off the navy plane on dark — bind to the brighter surface;
       the :root flat 82%-bg-alt fill resolves ~bg-identical on the dark bg,
       so cards read as wireframe outlines without it. Light theme keeps its
       translucent fill (already separates via real shadow on the pale bg). */
    --color-card:           var(--color-surface);
    --color-line:           rgba(148, 163, 184, 0.12);
    --color-line-strong:    rgba(148, 163, 184, 0.22);
    --color-text:           #f1f5f9;
    --color-text-soft:      #cbd5e1;
    --color-text-muted:     #94a3b8;
    --color-text-faint:     #8b97a8; /* lifted from #64748b: slate-500 failed WCAG AA (3.05:1) on dark surfaces; muted stays a step brighter */
    /* AA-compliant text on dark "-soft" tint backgrounds */
    --color-solar-text:    #fbbf24;
    --color-energy-text:   #34d399;
    --color-water-text:    #38bdf8;
    --color-pool-text:     #22d3ee;
    --color-climate-text:  #f472b6;
    --color-heatpump-text: #a78bfa;
    --color-garden-text:   #bef264;
    --color-clean-text:    #5eead4;
    --color-tado-text:     #fb7185;
    --color-unifi-text:    #4fc3f7;
    --color-success-text:  #34d399;
    --color-warning-text:  #fdba74;
    --color-error-text:    #f87171;
    /* Service accent colors — 400-tier for WCAG AA on dark backgrounds */
    --color-energy:   #34d399;
    --color-water:    #38bdf8;
    --color-pool:     #22d3ee;
    --color-heatpump: #a78bfa;
    --color-climate:  #f472b6;
    --color-garden:   #a3e635;
    --color-clean:    #2dd4bf;
    /* solar/tado/unifi were missing dark overrides — accent fell through to the light
       600-tier while their -text/-soft variants brightened, showing two hues at once */
    --color-solar:    #fbbf24;
    --color-tado:     #fb7185;
    --color-unifi:    #4fc3f7;
    /* Status colors — 400-tier for WCAG AA on dark backgrounds */
    --color-success: #34d399;
    --color-warning: #fb923c;
    --color-error:   #f87171;
    /* Status soft backgrounds — tinted from 400-tier accents */
    --color-success-soft: rgba(52, 211, 153, 0.15);
    --color-warning-soft: rgba(251, 146, 60, 0.15);
    --color-warning-soft-faint:  rgba(251, 146, 60, 0.07);
    --color-warning-soft-strong: rgba(251, 146, 60, 0.28);
    --color-error-soft:   rgba(248, 113, 113, 0.18);
    /* Service soft backgrounds — tinted from 400-tier accents */
    --color-solar-soft:    rgba(251, 191, 36, 0.15);
    --color-energy-soft:   rgba(52, 211, 153, 0.15);
    --color-water-soft:    rgba(56, 189, 248, 0.15);
    --color-pool-soft:     rgba(34, 211, 238, 0.15);
    --color-climate-soft:  rgba(244, 114, 182, 0.15);
    --color-heatpump-soft: rgba(167, 139, 250, 0.15);
    --color-tado-soft:     rgba(251, 113, 133, 0.18);
    --color-unifi-soft:    rgba(79, 195, 247, 0.15);
    --color-garden-soft:   rgba(163, 230, 53, 0.16);
    --color-clean-soft:    rgba(45, 212, 191, 0.16);
    --improvements: #8aa1d4;
    --improvements-text: #8aa1d4;
    /* Info blue — brighter for legibility on dark bg */
    --color-info:    #60a5fa;
    --color-info-rgb: 96, 165, 250;
    --color-info-soft: rgba(96, 165, 250, 0.15);
    /* RGB triplets updated to match overridden accent/status colors */
    --color-success-rgb:  52, 211, 153;
    --color-water-rgb:    56, 189, 248;
    --color-pool-rgb:     34, 211, 238;
    --color-heatpump-rgb: 167, 139, 250;
    --color-garden-rgb:   163, 230, 53;
    --color-clean-rgb:    45, 212, 191;
    --color-warning-rgb:  251, 146, 60;
    /* dark override — was falling through to the light ochre triplet (217,119,6),
       so rgba(var(--color-solar-rgb)) tints rendered muddy on dark. */
    --color-solar-rgb:    251, 191, 36;
    --color-error-rgb:    248, 113, 113;
    --color-error-strong: #dc2626;
    --color-tado-rgb:     251, 113, 133;
    --color-unifi-rgb:    79, 195, 247;
    /* Shadows — stronger on dark (no ambient light context) */
    --shadow-soft:  0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.50);
    --shadow-panel: 0 4px 12px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.40);
    --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.40);
    /* Focus ring — amber-400 tuned for dark backgrounds */
    /* WCAG 2.4.11: focus indicator must have ≥3:1 contrast against adjacent surfaces */
    --color-focus-ring:    rgba(251, 191, 36, 0.55);
    --color-focus-outline: rgba(251, 191, 36, 0.55);
    /* Shell — shift darker since page bg is now navy; maintain visual hierarchy */
    --color-shell-900:         rgba(2, 5, 14, 1);
    --color-shell-800:         rgba(4, 9, 20, 1);
    --color-shell-700:         rgba(7, 17, 31, 1);
    --color-shell-scrim-light: rgba(0, 0, 0, 0.45);
    --color-shell-scrim:       rgba(0, 0, 0, 0.60);
    --color-shell-modal:       rgba(0, 0, 0, 0.82);
    --color-shell-backdrop:    rgba(0, 0, 0, 0.80);
    --color-shell-tabbar:      rgba(4, 9, 20, 0.97);
    --color-shell-topbar:      rgba(4, 9, 20, 0.98);
    --color-shell-chart-start: rgba(7, 16, 31, 0.99);
    --color-shell-chart-end:   rgba(4, 9, 20, 0.97);
    --color-shell-graph-bg:    rgba(2, 6, 14, 0.78);
    --color-shell-fullscreen:  rgba(4, 9, 20, 1);
    --color-shell-toast:       rgba(4, 9, 20, 0.97);
    --color-shell-list:        rgba(15, 23, 42, 0.70);
    --color-shell-list-header: rgba(7, 14, 28, 0.55);
    --color-content-surface:       var(--color-shell-700);
    --color-content-line:          var(--color-line-on-shell);
    --color-content-text:          var(--color-text-on-shell);
    --color-content-text-muted:    var(--color-text-muted-on-shell);
    --color-content-text-faint:    var(--color-text-faint-on-shell);
    --color-content-chip-bg:       rgba(255, 255, 255, 0.05);
    --color-content-chart-start:   color-mix(in srgb, var(--color-shell-chart-start) 92%, var(--color-bg-alt));
    --color-content-chart-end:     color-mix(in srgb, var(--color-shell-chart-end) 88%, var(--color-bg-alt));
    --color-content-graph-bg:      var(--color-shell-graph-bg);
    /* AuDHD overlay aliases — re-mapped under dark theme so they pick up dark values */
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-soft);
    --text-tertiary: var(--color-text-muted);
    --surface-1: var(--color-surface);
    --surface-2: var(--color-surface-strong);
    --surface-3: var(--color-bg-soft);
    --accent: var(--color-info);
    /* Stays aliases — dark overrides so colors remain vibrant on dark bg */
    --amber: var(--color-solar);
    --green: var(--color-success);
    --blue: var(--color-info);
    --card-bg: var(--color-surface);
    --border-color: var(--color-line-strong);
    --color-surface-elevated: var(--color-surface-strong);
    --color-border: var(--color-line);
}

/* /css/base.css */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html {
    font-size: 16px;
    color-scheme: light;
    overflow-x: hidden;
    scrollbar-color: var(--color-line-strong) var(--color-bg);
    scrollbar-width: thin;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track {
    background: var(--color-bg);
}

html::-webkit-scrollbar-thumb {
    background: var(--color-line-strong);
    border: 2px solid var(--color-bg);
    border-radius: 999px;
}

body.modal-scroll-lock {
    overflow: hidden;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    /* Flat single-hue backdrop (2026-06-16). Was a navy gradient (bg-alt→bg-deep)
       plus a 9% amber + 7% green corner wash — the mixed warm/cool tints read as a
       muddy "grey-to-blue". One clean deep tone lets the cards carry the elevation. */
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(17, 24, 39, 0.06);
}

.u-no-shrink {
    flex-shrink: 0;
}

.u-mt-0 {
    margin-top: 0;
}

.u-mt-8 {
    margin-top: 8px;
}

.u-muted {
    color: var(--color-text-muted);
}

.u-muted-sm {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.u-muted-md {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
    touch-action: manipulation;
}

a {
    color: inherit;
}

.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Flat single-hue backdrop (2026-06-16). Was a navy gradient (bg-alt→bg-deep)
       plus a 9% amber + 7% green corner wash — the mixed warm/cool tints read as a
       muddy "grey-to-blue". One clean deep tone lets the cards carry the elevation. */
    background: var(--color-bg);
}

.bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-line) 52%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-line) 52%, transparent) 1px, transparent 1px);
    background-size: 52px 52px;
    opacity: 0.26;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.04));
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.04));
}

.bg--ambient {
    /* Flat single-hue backdrop (2026-06-16). Was a navy gradient (bg-alt→bg-deep)
       plus a 9% amber + 7% green corner wash — the mixed warm/cool tints read as a
       muddy "grey-to-blue". One clean deep tone lets the cards carry the elevation. */
    background: var(--color-bg);
}


#app {
    position: relative;
    z-index: 1;
}

/* /css/layout.css */
.app-layout {
    position: relative;
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 18px 14px;
    border-right: 1px solid color-mix(in srgb, var(--color-line-strong) 72%, transparent);
    border-radius: 0;
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-bg) 6%);
    box-shadow: 10px 0 42px rgba(17, 24, 39, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow-y: auto;
    scrollbar-width: none;
    z-index: 20;
}

.sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    padding: 4px 10px 12px;
    border-bottom: 1px solid var(--color-line);
}

.sidebar-logo-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    box-shadow: none;
    flex-shrink: 0;
    object-fit: cover;
}

.sidebar-logo-block {
    min-width: 0;
}

.sidebar-logo-text,
.page-title,
.hero-title,
.device-name,
.section-title,
.settings-service-title,
.sidebar-panel-value {
    font-family: var(--font-display);
}

.page-title,
.hero-title,
.section-title,
.device-name {
    text-wrap: balance;
}

.sidebar-logo-text {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
}

.sidebar-logo-subtext {
    margin-top: 2px;
    color: var(--color-text-faint);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-close {
    display: none;
    margin-left: auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    cursor: pointer;
    text-align: center;
    line-height: 36px;
}

.nav-section {
    margin-top: 10px;
    padding: 10px 10px 5px;
    color: var(--color-text-faint);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.nav-item {
    --nav-accent: var(--color-solar);
    --nav-accent-text: var(--color-solar-text);
    display: flex;
    align-items: center;
    gap: 10px;
    /* 40px floors the desktop sidebar tap target for touch laptops / iPadOS in
       desktop layout (sidebar is hidden ≤1100px so this is a touch-friendly bump,
       not a mobile concern). */
    min-height: 42px;
    padding: 8px 10px;
    border-radius: var(--radius-xs);
    color: var(--color-text-soft);
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    border: 1px solid transparent;
    width: 100%;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.nav-item:focus-visible,
.sidebar-close:focus-visible,
.mobile-nav-toggle:focus-visible,
.mobile-topbar-home-trigger:focus-visible,
.mobile-profile-link:focus-visible,
.mobile-tabbar-item:focus-visible,
.platform-tenant-trigger:focus-visible,
.toggle-btn:focus-visible,
.btn:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
.slider:focus-visible,
.comfort-power-btn:focus-visible,
.comfort-mode-pill:focus-visible,
.tado-step-btn:focus-visible,
.slider-confirm-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.nav-item:hover {
    border-color: color-mix(in srgb, var(--color-line-strong) 52%, transparent);
    background: color-mix(in srgb, var(--color-bg-soft) 78%, transparent);
    color: var(--color-text);
}

/* Neutral (pinned/system) icon chips share --color-bg-soft with the hover row
   background, so they'd visually merge on hover. Lift the chip to --color-bg-alt
   on hover. Accent chips keep their tint — their `.nav-icon.acc-*` rule has equal
   specificity but comes later in source order, so it wins. Active chips win by
   higher specificity. */
.nav-item:hover .nav-icon {
    background: var(--color-bg-alt);
}

.nav-item.active {
    border-color: color-mix(in srgb, var(--nav-accent) 28%, transparent);
    background: color-mix(in srgb, var(--nav-accent) 10%, transparent);
    box-shadow: inset 3px 0 0 0 var(--nav-accent);
    color: var(--color-text);
    font-weight: 600;
}

/* The active row's amber spine is a box-shadow; so is the keyboard focus ring.
   box-shadow doesn't stack across rules, so an active+focused item would lose
   its focus indicator (WCAG 2.4.7). Compose both shadows here: inset spine +
   outset focus ring. Covers .nav-item--pinned.active too (higher specificity). */
.nav-item.active:focus-visible {
    outline: 0;
    box-shadow: inset 3px 0 0 0 var(--nav-accent), 0 0 0 2px var(--color-focus-ring);
}

.nav-item.acc-solar,
.nav-item.acc-energy,
.nav-item.acc-water,
.nav-item.acc-pool,
.nav-item.acc-climate,
.nav-item.acc-heatpump,
.nav-item.acc-tado,
.nav-item.acc-unifi,
.nav-item.acc-garden,
.nav-item.acc-clean,
.nav-item.acc-improvements {
    --nav-accent: var(--accent);
    --nav-accent-text: var(--accent-text, var(--accent));
}

.nav-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: var(--color-bg-soft);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--color-text-soft);
    flex-shrink: 0;
    transition: color 140ms ease, background-color 140ms ease;
}
.nav-icon svg {
    width: 14px;
    height: 14px;
}

.nav-icon.acc-solar,
.nav-icon.acc-energy,
.nav-icon.acc-water,
.nav-icon.acc-pool,
.nav-icon.acc-climate,
.nav-icon.acc-heatpump,
.nav-icon.acc-tado,
.nav-icon.acc-unifi,
.nav-icon.acc-garden,
.nav-icon.acc-clean,
.nav-icon.acc-improvements {
    color: var(--accent-text, var(--accent));
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.nav-item.active .nav-icon {
    background: color-mix(in srgb, var(--nav-accent) 18%, transparent);
    border: 0;
    color: var(--nav-accent-text);
}

.nav-item.active .nav-icon.acc-solar,
.nav-item.active .nav-icon.acc-energy,
.nav-item.active .nav-icon.acc-water,
.nav-item.active .nav-icon.acc-pool,
.nav-item.active .nav-icon.acc-climate,
.nav-item.active .nav-icon.acc-heatpump,
.nav-item.active .nav-icon.acc-tado,
.nav-item.active .nav-icon.acc-unifi,
.nav-item.active .nav-icon.acc-garden,
.nav-item.active .nav-icon.acc-clean,
.nav-item.active .nav-icon.acc-improvements {
    color: var(--nav-accent-text);
    background: color-mix(in srgb, var(--nav-accent) 18%, transparent);
}

.nav-label {
    font-size: 0.86rem;
    font-weight: 500;
    color: inherit;
}

.nav-item.active .nav-label {
    font-weight: 600;
}

.nav-content {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.nav-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nav-meta {
    color: var(--color-text-faint);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
}

.nav-item.active .nav-meta {
    color: var(--color-text-muted);
}

.nav-item .nav-meta {
    transition: color 140ms ease;
}

.nav-live-value {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-muted);
    flex-shrink: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Sidebar cooldown / rate-limit indicator. Inline pill rendered next to the
 * service label when its backend envelope reports {unavailable, code:
 * cooldown|rate_limit}. Non-interactive — informational only. */
.nav-cooldown-pill {
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid var(--color-warning-soft-strong);
    border-radius: var(--radius-pill);
    background: var(--color-warning-soft-faint);
    color: var(--color-warning-text);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.nav-item.nav-item--dim {
    opacity: 0.55;
}

.nav-item.nav-item--dim .nav-live-value,
.nav-item.nav-item--dim .nav-label {
    color: var(--color-text-faint);
}

/* A configured-but-offline service can still be the active route, making a row
   both --dim and .active. Don't let 0.55 opacity wash out the amber active spine
   + focus ring (which would drop the focus ring below WCAG 2.4.11 3:1); the muted
   label/value + status dot already carry the "offline" read at full opacity. */
.nav-item.nav-item--dim.active {
    opacity: 1;
}

.nav-service-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 0 6px;
}

.nav-item--pinned {
    margin-bottom: 6px;
    border: 0;
    background: transparent;
}
.nav-item--pinned.active {
    background: var(--color-solar-soft);
    box-shadow: inset 3px 0 0 0 var(--color-solar);
}

.sidebar-spacer {
    flex: 1;
}

.sidebar-panel {
    padding: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-line);
    background: var(--color-bg-soft);
}

.sidebar-panel {
    margin-top: 10px;
    background: var(--color-bg-soft);
}

.home-switcher-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.home-context-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-line-strong);
    background: transparent;
}

/* Success tint only when every configured service is actually live — otherwise
   a "0/4 live" pill would render green/healthy. Driven by a class in Sidebar.js
   (configuredCount > 0 && liveCount === configuredCount). */
.home-context-badge--full {
    border-color: transparent;
    background: var(--color-success-soft);
}

.home-context-status-value {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

.home-context-status-label {
    color: var(--color-text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.home-context-badge--full .home-context-status-value,
.home-context-badge--full .home-context-status-label {
    color: var(--color-success-text);
}

/* Unified context panel: wraps the platform-admin tenant switcher and the
   active-home switcher in one block. The platform-admin variant stays neutral;
   amber is reserved for selected/interactive accents so the sidebar does not
   read like a permanent warning state. */
.context-panel {
    display: grid;
    gap: 0;
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 54%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-bg-alt) 42%, transparent),
            transparent 76%),
        color-mix(in srgb, var(--color-bg-soft) 72%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent);
}

.context-panel--admin {
    gap: 10px;
    border-color: color-mix(in srgb, var(--color-line-strong) 64%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-bg-alt) 46%, transparent),
            transparent),
        color-mix(in srgb, var(--color-bg-soft) 90%, var(--color-bg-alt));
    color: var(--color-text);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 7%, transparent);
}

.context-panel--admin:hover {
    border-color: color-mix(in srgb, var(--color-line-strong) 86%, transparent);
}

/* Both rows share one eyebrow → control rhythm (8px) so the tenant and home
   switchers read as a single unit. (Standalone, the home row's eyebrow carried
   margin-bottom: 6px on top of a 6px grid gap = 12px; here the gap owns the
   spacing and the nested margin is zeroed so it doesn't stack.) */
.context-panel-row {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.context-panel-row .home-switcher-row {
    margin-bottom: 0;
}

.context-panel-divider {
    height: 1px;
    margin: 1px 0;
    background: color-mix(in srgb, var(--color-line) 86%, transparent);
}

.context-panel-label--admin {
    color: var(--color-text-faint);
}

.platform-tenant-dropdown-wrap {
    position: relative;
}

.platform-tenant-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 8px 10px 8px 11px;
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 74%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--color-bg-alt) 78%, var(--color-bg-soft));
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: left;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.platform-tenant-trigger:hover,
.platform-tenant-trigger.open {
    border-color: color-mix(in srgb, var(--color-solar) 34%, var(--color-line-strong));
    background: color-mix(in srgb, var(--color-bg-alt) 70%, var(--color-bg-soft));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-solar) 7%, transparent);
}

.platform-tenant-trigger:disabled {
    cursor: progress;
    opacity: 0.75;
}

.platform-tenant-trigger-copy {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.platform-tenant-trigger-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.18;
}

.platform-tenant-caret {
    width: 10px;
    height: 7px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 200ms ease;
}

.platform-tenant-trigger.open .platform-tenant-caret {
    transform: rotate(180deg);
}

.platform-tenant-panel {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    display: grid;
    gap: 4px;
    max-height: min(58vh, 280px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 82%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-bg-alt) 94%, var(--color-bg-soft));
    box-shadow: var(--shadow-panel);
    z-index: 70;
    animation: rise-in 150ms ease both;
}

.platform-tenant-panel:focus {
    outline: 0;
}

.platform-tenant-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-soft);
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: left;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.platform-tenant-option:hover,
.platform-tenant-option.focused {
    border-color: color-mix(in srgb, var(--color-solar) 18%, var(--color-line));
    background: color-mix(in srgb, var(--color-solar) 6%, var(--color-bg-soft));
    color: var(--color-text);
}

.platform-tenant-option.active {
    border-color: color-mix(in srgb, var(--color-solar) 28%, var(--color-line));
    background: color-mix(in srgb, var(--color-solar) 9%, var(--color-bg-soft));
    color: var(--color-text);
}

.platform-tenant-option-mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg-soft) 72%, transparent);
    color: var(--color-text-muted);
}

.platform-tenant-option-mark svg {
    width: 13px;
    height: 10px;
}

.platform-tenant-option-mark--selected {
    color: var(--color-solar);
    background: color-mix(in srgb, var(--color-solar) 12%, var(--color-bg-soft));
}

.platform-tenant-option-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.platform-tenant-option-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.18;
}

.platform-tenant-message {
    padding: 0 1px;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.platform-tenant-message--error {
    color: var(--color-error);
}

.home-dropdown-wrap {
    position: relative;
}

.home-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--color-bg-alt) 78%, var(--color-bg-soft));
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 64%, transparent);
    border-radius: var(--radius-xs);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.home-dropdown-trigger:hover,
.home-dropdown-trigger.open {
    border-color: color-mix(in srgb, var(--color-solar) 26%, var(--color-line-strong));
    background: color-mix(in srgb, var(--color-bg-alt) 66%, var(--color-bg-soft));
}

.home-dropdown-caret {
    width: 10px;
    height: 7px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 200ms ease;
}

.home-dropdown-trigger.open .home-dropdown-caret {
    transform: rotate(180deg);
}

.home-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 6px;
    z-index: 50;
    box-shadow: var(--shadow-panel);
    animation: rise-in 150ms ease both;
}

.home-dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    color: var(--color-text-soft);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 140ms ease, color 140ms ease;
}

.home-dropdown-option:hover {
    background: var(--color-bg-soft);
    color: var(--color-text);
}

.home-dropdown-option.active {
    color: var(--color-text);
    font-weight: 600;
}

/* Visual counterpart to aria-activedescendant — keyboard arrow navigation
   highlights the current option. Mirrors :hover so mouse + keyboard users
   see the same indicator. */
.home-dropdown-option.focused {
    background: var(--color-bg-soft);
    color: var(--color-text);
    outline: 1px solid color-mix(in srgb, var(--color-focus-ring, currentColor) 50%, transparent);
    outline-offset: -1px;
}

.home-dropdown-option-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-dropdown-check {
    width: 14px;
    height: 10px;
    color: var(--color-solar);
    flex-shrink: 0;
    margin-left: 8px;
}

.home-dropdown-check svg {
    width: 14px;
    height: 10px;
}

.home-label {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sidebar-panel-value {
    margin-top: 10px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.sidebar-panel-value span {
    color: var(--color-text-muted);
    font-size: 1rem;
    margin-left: 4px;
}

.home-name {
    margin-top: 6px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
}

.home-switcher-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.home-switcher-caret {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-soft);
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.home-switcher-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--color-line);
}

.home-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 7px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.home-option:hover {
    background: transparent;
}

.home-option.active {
    background: var(--color-solar-soft);
}

.home-option-name {
    font-size: 0.875rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-option-meta {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
}

.home-option.active .home-option-meta {
    color: var(--color-solar);
}

.home-quick-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--color-line);
}

.home-switcher-message {
    color: var(--color-warning);
    font-size: 0.76rem;
    line-height: 1.4;
}

/* FOOT-GUN: .main-content left padding MUST stay 0 (the shorthand here has no
   left component). Sidebar margin handles the indent. Has regressed twice;
   see CLAUDE.md § feedback_main_content_padding. */
.main-content {
    position: relative;
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 28px clamp(24px, 2.5vw, 48px) 48px;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left 160ms ease;
}

.content-shell {
    position: relative;
    z-index: 1;
    max-width: 1420px;
    padding: clamp(2px, 0.8vw, 8px) 0 0;
}

.route-progress {
    position: relative;
    z-index: 3;
    max-width: 1420px;
    height: 2px;
    margin: -4px 0 12px;
    border-radius: 999px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-3px);
    background: color-mix(in srgb, var(--color-line-strong) 42%, transparent);
    transition: opacity 140ms ease, transform 140ms ease;
    pointer-events: none;
}

.route-progress::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--color-solar) 18%, transparent),
            var(--color-solar),
            var(--color-water)
        );
    transform: translateX(-115%);
    box-shadow: 0 0 18px color-mix(in srgb, var(--color-solar) 42%, transparent);
}

.route-progress--active {
    opacity: 1;
    transform: translateY(0);
}

.route-progress--active::before {
    animation: route-progress-sweep 920ms cubic-bezier(0.45, 0, 0.15, 1) infinite;
}

.route-swap-enter-active,
.route-swap-leave-active {
    transition: opacity 90ms ease, transform 90ms ease;
}

.route-swap-enter-from {
    opacity: 0;
    transform: translateY(3px);
}

.route-swap-leave-to {
    opacity: 0;
    transform: translateY(-2px);
}

@keyframes route-progress-sweep {
    0% { transform: translateX(-115%); }
    58% { transform: translateX(92%); }
    100% { transform: translateX(245%); }
}

/* Mobile: bottom tabbar + Meer own navigation; desktop sidebar is hidden. */
@media (max-width: 1100px) {
    .main-content { margin-left: 0; }
    .sidebar {
        display: none;
    }
}

.mobile-topbar {
    display: none;
}

.mobile-tabbar {
    display: none;
}

/* /css/components.css */
/* ── Phase 1 Mobile Components ────────────────────────────────────────── */

/* BottomSheet ──────────────────────────────────────────────────────────── */

.bottom-sheet-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 54;
    border: 0;
    background: var(--color-shell-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    cursor: pointer;
}

.bottom-sheet-scrim--active {
    opacity: 1;
    pointer-events: auto;
}

.bottom-sheet {
    display: grid;
    grid-template-rows: auto auto 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    max-height: 85vh;
    max-height: 85dvh;
    gap: 14px;
    padding: 10px 14px calc(22px + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
    background: var(--color-bg-alt);
    box-shadow: var(--shadow-panel);
    transform: translateY(108%);
    transition: transform 220ms ease;
    pointer-events: none;
}

.bottom-sheet--open {
    transform: translateY(0);
    pointer-events: auto;
}

/* Desktop: present as a proper centered modal (not a phone bottom-sheet
   stretched to 720px). Vertically centered, wider, fully rounded, fade+scale
   animation. Must come AFTER the base .bottom-sheet--open rule so the
   translate(-50%, -50%) centering survives the open-state transform reset. */
@media (min-width: 1101px) {
    .bottom-sheet {
        max-width: min(1100px, 92vw);
        max-height: 85vh;
        max-height: 85dvh;
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        border-radius: 24px;
        padding: 28px 32px 32px;
        box-shadow: var(--shadow-panel);
        transform: translate(-50%, -50%) scale(0.96);
        opacity: 0;
        transition: transform 220ms ease, opacity 220ms ease;
    }

    .bottom-sheet--open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    .bottom-sheet-scrim--active {
        background: var(--color-shell-modal);
    }

    .bottom-sheet-handle {
        display: none;
    }

    .bottom-sheet-title {
        font-size: 1.35rem;
        letter-spacing: 0;
    }

    .bottom-sheet-close {
        width: 36px;
        height: 36px;
    }

    .bottom-sheet-body {
        gap: 24px;
    }
}

.bottom-sheet-handle {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--color-text-muted);
    justify-self: center;
    border: 0;
    padding: 20px 0;
    margin: -20px 0;
    cursor: pointer;
    display: block;
    background-clip: content-box;
}

.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bottom-sheet-title {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-text);
}

.bottom-sheet-close {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    background: transparent;
    color: var(--color-text);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
}

.bottom-sheet-body {
    display: grid;
    gap: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* SummaryCard ──────────────────────────────────────────────────────────── */

.summary-card {
    display: grid;
    gap: 5px;
    padding: 18px 18px;
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 62%, transparent);
    border-radius: 16px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-alt) 10%, transparent), transparent 64%),
        var(--color-card);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        var(--shadow-soft);
}

.summary-card--ok {
    border-color: var(--color-success-soft);
}

.summary-card--warn {
    border-color: var(--color-warning-soft);
}

.summary-card--err {
    border-color: var(--color-error-soft);
}

.summary-card--info {
    border-color: var(--color-water-soft);
}

.summary-card-label {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.summary-card-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-text);
    line-height: 1.1;
}

.summary-card-detail {
    color: var(--color-text-soft);
    font-size: 0.82rem;
    margin-top: 2px;
}

.summary-card--loading .summary-card-value {
    min-height: 2rem;
}

@media (max-width: 1100px) {
    .summary-card {
        display: grid;
        gap: 4px;
        padding: 18px 16px;
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 62%, transparent);
        border-radius: 20px;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-bg-alt) 10%, transparent), transparent 64%),
            var(--color-card);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            var(--shadow-soft);
    }

    .summary-card--ok {
        border-color: var(--color-success-soft);
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-success) 13%, transparent), transparent 72%),
            var(--color-card);
    }

    .summary-card--warn {
        border-color: var(--color-warning-soft);
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-warning) 13%, transparent), transparent 72%),
            var(--color-card);
    }

    .summary-card--err {
        border-color: var(--color-error-soft);
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-error) 12%, transparent), transparent 72%),
            var(--color-card);
    }

    .summary-card--info {
        border-color: var(--color-water-soft);
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-water) 13%, transparent), transparent 72%),
            var(--color-card);
    }

    .summary-card-label {
        color: var(--color-text-muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .summary-card-value {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 0;
        color: var(--color-text);
        line-height: 1.1;
    }

    .summary-card-detail {
        color: var(--color-text-soft);
        font-size: 0.82rem;
        margin-top: 2px;
    }

    .summary-card--loading .summary-card-value {
        min-height: 2rem;
    }
}

@media (max-width: 640px) {
    .summary-card {
        padding: 14px 14px;
    }

    .summary-card-value {
        font-size: 1.7rem;
    }
}

/* StatRow ──────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .stat-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--color-line);
    }

    .stat-row:last-child {
        border-bottom: none;
    }

    .stat-row--muted .stat-row-label,
    .stat-row--muted .stat-row-value {
        color: var(--color-text-muted);
    }

    .stat-row-label {
        color: var(--color-text-soft);
        font-size: 0.86rem;
        flex: 1 1 0;
        min-width: 0;
    }

    .stat-row-right {
        display: flex;
        align-items: baseline;
        gap: 6px;
        flex-shrink: 0;
    }

    .stat-row-value {
        color: var(--color-text);
        font-size: 0.96rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .stat-row-detail {
        color: var(--color-text-muted);
        font-size: 0.78rem;
    }
}

/* DomainPreview ────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .domain-preview {
        display: grid;
        gap: 10px;
        padding: 16px;
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 62%, transparent);
        border-radius: 20px;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-bg-alt) 10%, transparent), transparent 64%),
            var(--color-card);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            var(--shadow-soft);
        text-decoration: none;
        color: var(--color-text);
        cursor: pointer;
        transition: background 180ms ease, border-color 180ms ease;
    }

    .domain-preview:active {
        background: transparent;
        border-color: var(--color-line-strong);
    }

    .domain-preview-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .domain-preview-icon {
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }

    .domain-preview-icon svg {
        width: 18px;
        height: 18px;
    }

    .domain-preview-title {
        font-family: var(--font-display);
        font-size: 0.96rem;
        font-weight: 700;
        letter-spacing: 0;
        flex: 1 1 0;
        min-width: 0;
    }

    .domain-preview-chevron {
        color: var(--color-text-muted);
        font-size: 1.3rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .domain-preview-summary {
        color: var(--color-text-soft);
        font-size: 0.84rem;
        margin: 0;
        line-height: 1.4;
    }

    .domain-preview-stats {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .domain-preview-stat {
        display: grid;
        gap: 2px;
    }

    .domain-preview-stat-value {
        font-size: 1.1rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
        color: var(--color-text);
    }

    .domain-preview-stat-label {
        color: var(--color-text-muted);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
}

/* ActionBlock ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .action-block {
        display: grid;
        gap: 10px;
        padding: 16px;
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 62%, transparent);
        border-radius: 20px;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-bg-alt) 10%, transparent), transparent 64%),
            var(--color-card);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            var(--shadow-soft);
    }

    .action-block--disabled {
        opacity: 0.5;
        pointer-events: none;
    }

    .action-block-label {
        color: var(--color-text-muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .action-block-body {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* InlineChartCard ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .inline-chart-card {
        display: grid;
        gap: 12px;
        padding: 16px;
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 62%, transparent);
        border-radius: 20px;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-bg-alt) 10%, transparent), transparent 64%),
            var(--color-card);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            var(--shadow-soft);
    }

    .inline-chart-card--disabled {
        opacity: 0.5;
    }

    .inline-chart-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }

    .inline-chart-card-title {
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0;
        color: var(--color-text);
    }

    .inline-chart-card-pills {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .inline-chart-card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .inline-chart-card-footer {
        display: flex;
        justify-content: flex-end;
    }

    .inline-chart-card-expand {
        padding: 7px 16px;
        border: 1px solid var(--color-line-strong);
        border-radius: 999px;
        background: transparent;
        color: var(--color-text-soft);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 140ms ease;
    }

    .inline-chart-card-expand:active {
        background: transparent;
    }

    .inline-chart-card-expand:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
}

@media (max-width: 640px) {
    .inline-chart-card {
        padding: 12px;
    }
}

/* FullscreenChartSheet ─────────────────────────────────────────────────── */

.fullscreen-chart-sheet {
    display: none;
}

@media (max-width: 1100px) {
    .fullscreen-chart-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 60;
        background: linear-gradient(180deg, var(--color-shell-fullscreen), var(--color-shell-900));
        color: var(--color-text-on-shell);
        padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
        transform: translateY(100%);
        transition: transform 220ms ease;
        gap: 16px;
        overflow-y: auto;
        max-height: 100vh;
        max-height: 100dvh;
        -webkit-overflow-scrolling: touch;
    }

    .fullscreen-chart-sheet--open {
        transform: translateY(0);
    }

    .fullscreen-chart-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-shrink: 0;
    }

    .fullscreen-chart-sheet-title {
        font-family: var(--font-display);
        font-size: 1.08rem;
        font-weight: 700;
        letter-spacing: 0;
        color: var(--color-text-on-shell);
    }

    .fullscreen-chart-sheet-close {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border: 1px solid var(--color-line-on-shell);
        border-radius: 14px;
        background: transparent;
        color: var(--color-text-on-shell);
        font-size: 1.45rem;
        line-height: 1;
        cursor: pointer;
        display: inline-grid;
        place-items: center;
    }

    .fullscreen-chart-sheet-body {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-height: 0;
    }
}

@media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
    .bottom-sheet {
        max-height: 96vh;
        max-height: 96dvh;
        gap: 8px;
        padding-top: 6px;
        border-radius: 20px 20px 0 0;
    }

    .fullscreen-chart-sheet {
        gap: 8px;
        padding: calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 8px);
    }
}

/* /css/forms.css */
.form-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.form-group {
    display: grid;
    gap: 10px;
}

.form-label {
    color: var(--color-text-soft);
    font-size: 0.84rem;
    font-weight: 700;
}

.form-input,
.form-select {
    width: 100%;
    min-height: clamp(48px, 3.2vw, 52px);
    padding: 13px 16px;
    border: 1px solid var(--color-line-strong);
    border-radius: 16px;
    background: transparent;
    color: var(--color-text);
    outline: none;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.form-input::placeholder {
    color: var(--color-line-strong);
}

.form-input:focus,
.form-select:focus {
    border-color: var(--color-water);
    background: transparent;
    box-shadow: 0 0 0 4px var(--color-water-soft);
}

.form-select--compact {
    height: auto;
    min-height: 0;
    padding: 4px 8px;
    font-size: 0.85rem;
}

.form-select option {
    background: var(--color-bg-alt);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: clamp(44px, 3vw, 46px);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 700;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-sm {
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.9rem;
}

.btn-secondary {
    border-color: var(--color-line-strong);
    background: transparent;
    color: var(--color-text);
}

.btn-danger {
    border-color: var(--color-error-soft);
    background: var(--color-error-soft);
    color: var(--color-error);
}

/* /css/charts.css */
/* ── Dagverloop grafiek ──────────────────────────── */
.day-chart-card {
    margin-bottom: 12px;
    padding: 16px 16px 10px;
    border: 1px solid color-mix(in srgb, var(--color-content-line) 58%, var(--color-line));
    border-radius: 20px;
    background: linear-gradient(180deg, var(--color-content-chart-start), var(--color-content-chart-end));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        var(--shadow-soft);
}

.chart-position-context,
.day-chart-card--position-context {
    position: relative;
}

.day-chart-card--spaced {
    margin-top: 16px;
}

.day-chart-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.day-chart-tooltip {
    position: absolute;
    top: 16px;
    padding: 10px 14px;
    border: 1px solid var(--color-line-strong);
    border-radius: 12px;
    background: var(--color-bg-alt);
    box-shadow: var(--shadow-panel);
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text);
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

.day-chart-tooltip--right { left: auto; right: 8px; }
.day-chart-tooltip--x0 { left: 0%; }
.day-chart-tooltip--x5 { left: 5%; }
.day-chart-tooltip--x10 { left: 10%; }
.day-chart-tooltip--x15 { left: 15%; }
.day-chart-tooltip--x20 { left: 20%; }
.day-chart-tooltip--x25 { left: 25%; }
.day-chart-tooltip--x30 { left: 30%; }
.day-chart-tooltip--x35 { left: 35%; }
.day-chart-tooltip--x40 { left: 40%; }
.day-chart-tooltip--x45 { left: 45%; }
.day-chart-tooltip--x50 { left: 50%; }
.day-chart-tooltip--x55 { left: 55%; }
.day-chart-tooltip--x60 { left: 60%; }
.day-chart-tooltip--x65 { left: 65%; }
.day-chart-tooltip--x70 { left: 70%; }
.day-chart-tooltip--x75 { left: 75%; }
.day-chart-tooltip--x80 { left: 80%; }
.day-chart-tooltip--x85 { left: 85%; }
.day-chart-tooltip--x90 { left: calc(100% - 244px); }
.day-chart-tooltip--x95 { left: calc(100% - 244px); }
.day-chart-tooltip--x100 { left: calc(100% - 244px); }

.day-chart-tooltip-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 5px;
}

.day-chart-tooltip-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.day-chart-tooltip-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.day-chart-tooltip-dot--solar,
.day-chart-legend-dot--solar {
    background: var(--chart-solar);
}

.day-chart-tooltip-dot--loads,
.day-chart-legend-dot--loads {
    background: var(--chart-loads);
}

.day-chart-tooltip-dot--feedin,
.day-chart-tooltip-dot--export,
.day-chart-legend-dot--feedin {
    background: var(--chart-feedin);
}

.day-chart-tooltip-dot--import,
.day-chart-legend-dot--import {
    background: var(--chart-grid-import);
}

.day-chart-tooltip-dot--directload,
.day-chart-legend-dot--directload {
    background: var(--chart-directload);
}

.day-chart-tooltip-dot--battery,
.day-chart-legend-dot--battery {
    background: var(--chart-battery);
}

.day-chart-tooltip-dot--pool {
    background: var(--color-pool);
}

.day-chart-tooltip-dot--heatpump-state {
    background: var(--color-text-muted);
}

.chart-axis-label--now { fill: var(--chart-axis-now-strong); }
.chart-axis-label--midnight { fill: var(--chart-axis-midnight); }
.chart-axis-label--dim { fill: var(--chart-axis-label-dim); }

.chart-empty-copy {
    color: var(--chart-axis-empty);
    font-size: 11px;
}

.chart-hover-line {
    stroke: var(--color-text);
    stroke-opacity: 0.35;
}
.chart-grid-line {
    stroke: var(--chart-axis-grid);
    stroke-opacity: 1;
}
/* Semantic chart axis classes — use these on SVG text/line elements instead of
   inline fill="rgba(148,163,184,...)" attributes (which can't reference CSS vars).
   Components apply the class; CSS here maps it to the theme token. */
.chart-axis-label             { fill: var(--chart-axis-label); }
.chart-axis-label-dim         { fill: var(--chart-axis-label-dim); }
.chart-axis-label--time       { fill: var(--chart-axis-label-dim); }
.chart-axis-unit              { fill: var(--chart-axis-unit); }
.chart-axis-unit--end         { fill: var(--chart-axis-empty); }
.chart-axis-empty-text        { fill: var(--chart-axis-empty); }
.chart-axis-now-line          { stroke: var(--chart-axis-now); }
.chart-axis-midnight-line     { stroke: var(--chart-axis-label-dim); opacity: 0.26; }
.chart-axis-now-text          { fill:   var(--chart-axis-marker); }
.chart-axis-hint              { fill:   var(--chart-axis-marker); }
.chart-axis-base-line         { stroke: var(--chart-axis-grid-base); }
.chart-grid-line--base        { stroke: var(--chart-axis-grid-base); }

.day-chart-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 6px;
    padding-top: 4px;
}

.day-chart-legend--compact {
    margin: 0 0 8px;
    padding-top: 0;
}

.day-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--color-line-strong);
}

.day-chart-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mobile-chart-panel {
    display: grid;
    gap: 12px;
}

.mobile-chart-toggle {
    display: none;
}

.mobile-chart-panel-body {
    display: grid;
    gap: 12px;
}

/* ── Maandoverzicht (FoxESS month chart chrome) ───────── */
.month-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 0 2px;
}

.month-chart-header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.month-chart-header-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.month-chart-header-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.month-chart-header-total {
    color: var(--chart-solar);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.month-chart-header-total--right {
    text-align: right;
}


.month-chart-total-subline {
    margin-top: 1px;
    font-size: 0.72rem;
    font-weight: 500;
}

.month-chart-total-subline--directload {
    margin-top: 2px;
    color: var(--chart-directload);
}

.month-chart-total-subline--loads {
    color: var(--chart-loads);
}

.month-chart-total-subline--feedin {
    color: var(--chart-feedin);
}

.month-chart-legend {
    display: flex;
    gap: 16px;
    padding: 4px 16px 8px;
    color: var(--color-text-muted);
    font-size: 11px;
}

.month-chart-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 2px;
}

.month-chart-legend-swatch--charged {
    background: var(--chart-battery-charged);
}

.month-chart-legend-swatch--feedin {
    background: var(--chart-feedin);
}

.month-chart-year-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.month-chart-year-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--color-line-strong);
    border-radius: 8px;
    background: var(--color-bg-alt);
    color: var(--color-text-soft);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.month-chart-year-nav-btn:hover:not(:disabled) {
    border-color: var(--color-text-muted);
    color: var(--color-text);
    background: var(--color-bg-alt);
}

.month-chart-year-nav-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.month-chart-year-nav-label {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-soft);
    letter-spacing: 0.01em;
    min-width: 48px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.month-chart-divider {
    height: 1px;
    margin: 8px 2px 12px;
    background: linear-gradient(90deg, transparent, var(--color-line), transparent);
}

@media (max-width: 640px) {
    .day-chart-card {
        margin-bottom: 10px;
        padding: 14px 14px 10px;
        border-radius: 22px;
    }

    .day-chart-card--mobile {
        padding: 14px 0 10px;
        overflow: hidden;
        border-radius: 28px;
        background:
            radial-gradient(circle at top right, transparent, transparent 34%),
            linear-gradient(180deg, var(--color-content-chart-start), var(--color-content-chart-end));
        border-color: var(--color-content-line);
        box-shadow:
            inset 0 1px 0 transparent,
            var(--shadow-card);
        color: var(--color-content-text);
    }

    .day-chart-card--mobile .mobile-graph-title {
        color: var(--color-content-text);
    }

    .day-chart-card--mobile .mobile-graph-subtitle {
        color: var(--color-content-text-muted);
    }

    .day-chart-card--mobile .mobile-graph-expand {
        border-color: var(--color-content-line);
        background: color-mix(in srgb, var(--color-content-text) 6%, transparent);
        color: var(--color-content-text-muted);
    }

    .mobile-graph-header {
        display: grid;
        gap: 12px;
        padding: 0 16px 12px;
    }

    .mobile-graph-title-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
    }

    .mobile-graph-title-block {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .mobile-graph-title {
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: 0;
    }

    .mobile-graph-subtitle {
        color: var(--color-text-muted);
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .mobile-graph-expand {
        flex-shrink: 0;
        min-height: 34px;
        padding: 0 12px;
        border: 1px solid var(--color-line);
        border-radius: 999px;
        background: var(--color-bg-soft);
        color: var(--color-text-muted);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
    }

    .mobile-graph-expand--active {
        background: rgba(var(--chart-solar-rgb), 0.12);
        border-color: rgba(var(--chart-solar-rgb), 0.22);
        color: var(--chart-solar-bright);
    }

    .mobile-graph-pills {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .mobile-graph-pills::-webkit-scrollbar {
        display: none;
    }

    .mobile-graph-pill {
        display: grid;
        gap: 3px;
        min-width: 114px;
        padding: 11px 12px;
        border-radius: 16px;
        background: linear-gradient(180deg, var(--color-bg-soft), transparent);
        border: 1px solid var(--color-line);
        box-shadow: inset 0 1px 0 var(--color-bg-soft);
    }

    .mobile-graph-pill-label {
        color: var(--color-text-muted);
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .mobile-graph-pill-value {
        font-family: var(--font-display);
        font-size: 0.98rem;
        font-weight: 700;
        letter-spacing: 0;
    }

    .mobile-graph-scroll {
        overflow-x: auto;
        margin: 0 12px;
        padding: 10px 12px 6px;
        border-radius: 22px;
        background:
            linear-gradient(180deg, var(--color-bg-soft), transparent),
            var(--color-content-graph-bg);
        border: 1px solid var(--color-line);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-graph-scroll::-webkit-scrollbar {
        display: none;
    }

    .mobile-graph-scroll .day-chart-svg {
        min-width: 600px;
    }

    .mobile-graph-scroll--bars .day-chart-svg {
        min-width: 760px;
    }

    .graph-sheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 420;
        background: var(--color-shell-backdrop);
    }

    .graph-sheet-card {
        position: fixed !important;
        inset:
            max(8px, env(safe-area-inset-top, 0px))
            8px
            max(8px, env(safe-area-inset-bottom, 0px))
            8px;
        z-index: 430;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-radius: 30px;
        box-shadow:
            var(--shadow-card),
            inset 0 1px 0 transparent;
    }

    .graph-sheet-card .mobile-graph-header {
        padding-top: 2px;
    }

    .graph-sheet-scroll {
        flex: 1;
        min-height: 0;
        overflow: auto;
        scrollbar-width: none;
    }

    .graph-sheet-scroll::-webkit-scrollbar {
        display: none;
    }

    .graph-sheet-scroll .day-chart-svg {
        min-width: max(100%, 720px);
    }

    .graph-sheet-scroll.graph-sheet-scroll--bars .day-chart-svg {
        min-width: max(100%, 860px);
    }

    .graph-sheet-card .day-chart-legend--native {
        padding-bottom: 2px;
    }

    body.graph-sheet-open {
        overflow: hidden;
    }

    .day-chart-svg--native .chart-grid-line {
        stroke: var(--color-line);
    }

    .day-chart-svg--native .chart-grid-line--vertical {
        stroke: var(--color-line);
    }

    .day-chart-svg--native .chart-grid-line--base {
        stroke: var(--color-line-strong);
    }

    .day-chart-svg--native .chart-axis-label {
        fill: var(--color-text-muted);
    }

    .day-chart-svg--native .chart-axis-label:not(.chart-axis-label--time):not(.chart-axis-label--day),
    .day-chart-svg--native .chart-axis-unit {
        display: none;
    }

    .day-chart-svg--native .chart-axis-label--time {
        fill: var(--color-line-strong);
        font-size: 10px;
    }

    .day-chart-svg--native .chart-axis-label--day {
        fill: var(--color-text-muted);
        font-size: 8px;
    }

    .day-chart-svg--native .chart-axis-hint {
        fill: var(--color-text-muted);
        font-size: 9px;
    }

    .day-chart-svg--native .chart-hover-line {
        stroke: var(--color-text-muted);
        stroke-opacity: 0.5;
    }

    .day-chart-legend--native {
        gap: 8px;
        padding: 8px 16px 0;
    }

    .day-chart-legend--native .day-chart-legend-item {
        gap: 6px;
        padding: 8px 10px;
        border-radius: 999px;
        background: transparent;
        border: 1px solid var(--color-line);
        color: var(--color-text-muted);
        font-size: 0.72rem;
        font-weight: 700;
    }

    .day-chart-legend {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
        padding: 0 14px;
    }

    .month-chart-header {
        align-items: flex-start;
        gap: 10px;
    }

    .month-chart-header-title-wrap {
        justify-content: flex-start;
    }

    .month-chart-header-total {
        width: 100%;
        text-align: left !important;
    }

    .mobile-chart-panel {
        gap: 8px;
    }

    .mobile-chart-toggle {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        width: 100%;
        padding: 14px;
        border: 1px solid var(--color-line);
        border-radius: 18px;
        background: var(--color-bg-alt);
        color: inherit;
        text-align: left;
        box-shadow: var(--shadow-soft);
    }

    .mobile-chart-toggle-copy {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .mobile-chart-toggle-label {
        color: var(--color-text-muted);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .mobile-chart-toggle-value {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0;
    }

    .mobile-chart-toggle-meta {
        color: var(--color-text-soft);
        font-size: 0.84rem;
        line-height: 1.35;
    }

    .mobile-chart-toggle-icon {
        align-self: center;
        display: inline-grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border-radius: 999px;
        background: transparent;
        color: var(--color-text-soft);
        font-size: 1.1rem;
        font-weight: 700;
    }

    .mobile-chart-panel--open .mobile-chart-toggle {
        border-color: var(--color-solar);
        background: var(--color-solar-soft);
    }

    .mobile-chart-panel-body {
        gap: 8px;
    }

    .mobile-chart-panel-body .day-chart-card {
        margin-bottom: 0;
    }

    .day-chart-legend-item {
        font-size: 12px;
    }
}

/* /css/settings-system.css */
/* Permanent owner: Settings, integration diagnostics, API keys, and system-status surfaces. */

/* ── Integration list (Settings page) ─────────────────── */
.integration-list {
    padding: 0;
    overflow: hidden;
    margin-bottom: 0;
}

.settings-page .integration-list {
    padding: 0;
    border-radius: var(--radius-lg);
}

.integration-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(156px, auto);
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--color-line);
    transition: background 150ms ease;
}
.integration-row:last-child { border-bottom: none; }
.integration-row:hover { background: var(--color-bg-soft); }

.integration-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid var(--color-line-strong);
    background: transparent;
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: border-color 200ms, color 200ms;
}
.integration-icon svg { width: 15px; height: 15px; }
.integration-icon.state-solar  { border-color: var(--color-solar-soft);  color: var(--color-solar); }
.integration-icon.state-active { border-color: var(--color-success-soft); color: var(--color-success); }
.integration-icon.state-error  { border-color: var(--color-error-soft); color: var(--color-error); }

.integration-info { flex: 1; min-width: 0; }
.integration-name { font-size: 0.82rem; font-weight: 750; color: var(--color-text); }
.integration-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    color: var(--settings-muted, var(--color-text-muted));
    margin-top: 2px;
}

.integration-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
    min-width: 0;
}

.integration-actions--confirm {
    gap: 8px;
    align-items: center;
}

.settings-compact-action {
    min-height: 28px;
    min-width: 104px;
    padding: 0 10px;
    font-size: 0.74rem;
}

.settings-confirm-label {
    color: var(--settings-muted, var(--color-text-muted));
    font-size: 0.72rem;
}

.integration-toggle {
    width: 44px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid var(--color-line-strong);
    background: var(--color-line);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background 220ms ease, border-color 220ms ease;
}
.integration-toggle::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-line-strong);
    top: 2px;
    left: 3px;
    transition: transform 220ms ease, background 220ms ease;
}
.integration-toggle.on {
    background: var(--color-solar-soft);
    border-color: var(--color-solar);
}
.integration-toggle.on::after {
    transform: translateX(20px);
    background: var(--color-solar);
}
.integration-toggle.err {
    background: var(--color-error-soft);
    border-color: var(--color-error-soft);
}
.integration-toggle.err::after {
    transform: translateX(20px);
    background: var(--color-error);
}

/* ── Cache diagnostics (Settings page) ─────────────────── */
.cache-diagnostics-card {
    padding: 12px;
    border-radius: var(--radius-lg);
}

.cache-diagnostics-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.cache-diagnostics-title {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--color-text);
}

.cache-diagnostics-meta,
.cache-diagnostics-key,
.cache-diagnostics-label,
.cache-diagnostics-next {
    font-size: 0.68rem;
    color: var(--settings-muted, var(--color-text-muted));
}

.cache-diagnostics-grid {
    display: grid;
    gap: 0;
}

.cache-diagnostics-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) 112px 92px 78px minmax(150px, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 0;
    border-top: 1px solid var(--color-line);
}

.cache-diagnostics-service {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cache-diagnostics-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--color-text);
}

.cache-diagnostics-cell {
    display: grid;
    gap: 2px;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.cache-diagnostics-cell strong {
    color: var(--color-text);
    font-size: 0.74rem;
    line-height: 1.2;
    white-space: nowrap;
}

.cache-status-pill {
    justify-self: start;
    min-width: 82px;
    border-radius: 999px;
    border: 1px solid var(--color-line);
    padding: 2px 7px;
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
    color: var(--settings-muted, var(--color-text-muted));
    background: var(--color-bg-soft);
}

.cache-status-pill--fresh {
    color: var(--color-success-text);
    border-color: var(--color-success-soft);
    background: var(--color-success-soft);
}

.cache-status-pill--grace {
    color: var(--color-warning-text);
    border-color: var(--color-warning-soft);
    background: var(--color-warning-soft);
}

.cache-status-pill--cooldown,
.cache-status-pill--stale {
    color: var(--color-warning-text);
    border-color: var(--color-warning-soft);
    background: var(--color-warning-soft);
}

.cache-status-pill--missing {
    color: var(--color-error-text);
    border-color: var(--color-error-soft);
    background: var(--color-error-soft);
}

.settings-page .home-advanced-edit {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    margin-top: 0;
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    border-color: var(--color-line);
}

.settings-form-divider,
.settings-page .home-advanced-edit .settings-form-group--wide,
.settings-page .home-advanced-edit-actions,
.settings-page .ah-danger-zone {
    grid-column: 1 / -1;
}

.settings-form-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.settings-form-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--color-line);
}

.settings-page .home-advanced-edit .form-group {
    gap: 6px;
}

.settings-page .home-advanced-edit .form-label {
    font-size: 0.76rem;
}

.settings-page .home-advanced-edit .form-help {
    color: var(--settings-muted);
    font-size: 0.72rem;
}

.settings-page .home-advanced-edit .form-input,
.settings-page .home-advanced-edit .form-select {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
}

.settings-page .home-advanced-edit-actions {
    margin-top: 0;
    padding-top: 2px;
}

@media (max-width: 1240px) {
    .settings-page {
        max-width: none;
    }
}

@media (max-width: 980px) {
    .settings-home-row {
        grid-template-columns: 1fr;
    }

    .settings-home-row-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
    }

    .home-location-row {
        margin-left: 40px;
    }

    .cache-diagnostics-row {
        grid-template-columns: minmax(180px, 1fr) 104px 88px 76px;
    }

    .cache-diagnostics-next {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .settings-page .page-header,
    .cache-diagnostics-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-block-head {
        align-items: flex-start;
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-block-meta {
        grid-column: auto;
        justify-self: start;
    }

    .settings-feature-link {
        width: 100%;
    }

    .settings-home-card,
    .settings-home-row-main,
    .home-location-row,
    .integration-row,
    .cache-diagnostics-row,
    .settings-page .home-advanced-edit {
        grid-template-columns: 1fr;
    }

    .home-location-row {
        margin-left: 0;
    }

    .settings-page .home-card-actions,
    .settings-page .integration-actions {
        justify-content: flex-start;
    }

    .integration-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .integration-actions {
        width: 100%;
    }
}

.cache-status-pill--not_configured {
    color: var(--color-text-muted);
    border-color: var(--color-line);
    background: var(--color-bg-soft);
}

.cache-diagnostics-error {
    grid-column: 1 / -1;
    color: var(--settings-muted, var(--color-text-muted));
    font-size: 0.72rem;
    line-height: 1.45;
    padding-left: 22px;
}

/* ── API-sleutels (Settings page) ─────────────────────── */
.api-keys-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) 108px 128px minmax(120px, 1fr) 100px auto;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 0;
    border-top: 1px solid var(--color-line);
    font-variant-numeric: tabular-nums;
}

.api-keys-row--head {
    min-height: 0;
    padding: 0 0 4px;
    border-top: 0;
    color: var(--settings-muted, var(--color-text-muted));
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.api-keys-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.api-keys-cell {
    font-size: 0.74rem;
    color: var(--settings-muted, var(--color-text-muted));
    min-width: 0;
    overflow-wrap: anywhere;
}

.api-keys-action {
    justify-self: end;
}

.api-key-reveal {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-warning-soft);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
}

.api-key-reveal-warning {
    color: var(--color-warning-text);
    font-size: 0.74rem;
    font-weight: 800;
}

.api-key-code {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text);
    overflow-wrap: anywhere;
    user-select: all;
}

.api-key-reveal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.api-keys-empty {
    margin: 4px 0 10px;
}

.api-keys-create {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-line);
    justify-items: start;
}

.api-keys-create .form-group {
    width: 100%;
    max-width: 420px;
}

@media (max-width: 980px) {
    .api-keys-row {
        grid-template-columns: minmax(120px, 1fr) 108px 100px auto;
    }

    .api-keys-row--head {
        display: none;
    }
}

@media (max-width: 720px) {
    .api-keys-row {
        grid-template-columns: 1fr;
    }

    .api-keys-action {
        justify-self: start;
    }
}

/* ── System status ───────────────────────────────────────────────── */
.system-page {
    display: grid;
    gap: 22px;
}

.system-refresh {
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-line-strong);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
}

.system-refresh:disabled {
    opacity: 0.55;
    cursor: default;
}

.system-overview-grid,
.system-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.system-overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 70%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-card) 84%, var(--color-bg-alt));
}

.system-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.system-kpi,
.system-panel,
.system-table-wrap {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-card);
    /* Same lift the og-cards got in the waves — the densest admin page was left
       flat (its cards share --color-card, which resolves to --color-surface on
       dark, so they read as wireframe rectangles without the elevation cue). */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-soft);
}

.system-kpi {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 0;
    border-radius: calc(var(--radius-md) - 6px);
    background: transparent;
    box-shadow: none;
}

.system-kpi + .system-kpi::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 1px;
    background: var(--color-line);
}

.system-kpi-label,
.system-section-note,
.system-stat-list span,
.system-phase-list {
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.system-kpi strong {
    color: var(--color-text);
    font-size: 1.05rem;
}

.system-kpi small {
    color: var(--color-text-muted);
}

.system-kpi--ok {
    background: color-mix(in srgb, var(--color-success-soft) 12%, transparent);
}

.system-kpi--warn {
    background: color-mix(in srgb, var(--color-warning-soft) 16%, transparent);
}

.system-kpi--error {
    background: color-mix(in srgb, var(--color-error-soft) 15%, transparent);
}

.system-kpi--muted {
    opacity: 0.82;
}

.system-section,
.system-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.system-table-wrap {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-color: var(--color-line-strong) transparent;
    scrollbar-width: thin;
}

.system-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.system-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.system-table-wrap::-webkit-scrollbar-thumb {
    background: var(--color-line-strong);
    border-radius: 999px;
}

.system-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.system-table th,
.system-table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-line);
}

.system-table th {
    color: var(--color-text-faint);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.system-table td {
    color: var(--color-text-muted);
}

.system-table select {
    max-width: 100%;
    min-width: 0;
}

.system-table tr:last-child td {
    border-bottom: 0;
}

.system-panel {
    align-content: start;
    padding: 16px;
}

.system-panel--wide {
    grid-column: span 2;
}

.system-stat-list {
    display: grid;
    gap: 10px;
}

.system-stat-list div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.system-stat-list strong {
    color: var(--color-text);
    font-size: 0.85rem;
    text-align: right;
    overflow-wrap: anywhere;
}

.system-phase-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.system-phase-list span {
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--color-bg-soft);
}

.system-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.system-inline-form {
    display: grid;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.system-text-input {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-xs);
    background: var(--color-bg-alt);
    color: var(--color-text);
    padding: 0 12px;
    font: inherit;
}

@media (max-width: 900px) {
    .system-overview-grid,
    .system-detail-grid {
        grid-template-columns: 1fr 1fr;
    }

    .system-overview-grid {
        gap: 8px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .system-overview-grid .system-kpi {
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        background: var(--color-card);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-soft);
    }

    .system-overview-grid .system-kpi::before {
        display: none;
    }

    .system-overview-grid .system-kpi--ok {
        border-color: color-mix(in srgb, var(--color-success) 28%, var(--color-line));
    }

    .system-overview-grid .system-kpi--warn {
        border-color: color-mix(in srgb, var(--color-warning) 34%, var(--color-line));
    }

    .system-overview-grid .system-kpi--error {
        border-color: color-mix(in srgb, var(--color-error) 34%, var(--color-line));
    }

    .system-panel--wide {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .system-overview-grid,
    .system-detail-grid {
        grid-template-columns: 1fr;
    }

    .system-panel--wide {
        grid-column: auto;
    }

    .system-page .page-header {
        align-items: stretch;
    }

    .system-refresh {
        width: 100%;
    }
}

.mobile-inline-action {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--color-solar);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}



/* /css/auth.css */
/* Authentication surface and shared credential-form primitives.
 * Profile and user-management password forms intentionally reuse the
 * login-field, login-input, login-button, and login-error treatments.
 */

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 18px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-solar) 11%, transparent), transparent 42%),
        linear-gradient(225deg, color-mix(in srgb, var(--color-energy) 9%, transparent), transparent 46%),
        linear-gradient(180deg, var(--color-bg-alt), var(--color-bg-deep));
}

.login-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-line) 58%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-line) 58%, transparent) 1px, transparent 1px);
    background-size: 52px 52px;
    opacity: 0.38;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.08));
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.08));
}

.login-panel {
    width: 100%;
    max-width: 430px;
    padding: 34px 32px 30px;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 74%, transparent);
    border-radius: 24px;
    box-shadow:
        0 24px 80px rgba(17, 24, 39, 0.16),
        var(--shadow-panel);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.login-brand {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
    margin-bottom: 28px;
}

.login-mark {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--color-solar);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-solar) 16%, transparent), transparent),
        var(--color-bg-soft);
    border: 1px solid color-mix(in srgb, var(--color-solar) 22%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.login-mark svg {
    width: 24px;
    height: 24px;
}

.login-kicker {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-solar);
}

.login-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0;
    line-height: 1.05;
}

.login-subtitle {
    max-width: 260px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.login-input {
    background: color-mix(in srgb, var(--color-surface-strong) 88%, var(--color-bg-soft));
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 12px 14px;
    /* 16px is the iOS Safari threshold — anything smaller triggers auto-zoom
       on focus and leaves the whole app zoomed-in after navigation. */
    font-size: 16px;
    color: var(--color-text);
    outline: none;
    transition: border-color 0.15s;
}

.login-input:focus {
    border-color: var(--color-line-strong);
}

/* WCAG 2.4.7 / 2.4.11: keyboard-only users are the security boundary on the login
   page. The :focus border swap above (rgba 0.12 → 0.22) is barely perceptible on
   the dark theme — add an explicit focus ring on top so the focused field is
   unmistakable. Mirrors the global :focus-visible pattern. */
.login-input:focus-visible {
    outline: 0;
    border-color: var(--color-focus-outline);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.login-remember {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--color-line) 82%, transparent);
    border-radius: 16px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-energy) 5%, transparent), transparent),
        var(--color-bg-soft);
    color: var(--color-text);
    cursor: pointer;
}

.login-remember-input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-solar);
    flex-shrink: 0;
}

.login-remember-input:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.login-remember-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.login-remember-title {
    font-size: 0.9rem;
    font-weight: 700;
}

.login-remember-detail {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.login-button {
    margin-top: 8px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-solar) 92%, #ffffff), var(--color-solar));
    border: 1px solid color-mix(in srgb, var(--color-solar) 70%, var(--color-line));
    border-radius: 14px;
    padding: 13px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--color-shell-900);
    cursor: pointer;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--color-solar) 24%, transparent);
    transition: opacity 0.15s, transform 0.12s;
}

.login-button:active {
    transform: translateY(1px);
}

.login-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.login-button-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.login-button-icon {
    display: grid;
    place-items: center;
}

.login-button-icon svg {
    width: 18px;
    height: 18px;
}

.login-button-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid color-mix(in srgb, var(--color-shell-900) 18%, transparent);
    border-top-color: var(--color-shell-900);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.login-error {
    background: var(--color-error-soft);
    border: 1px solid var(--color-error-soft);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--color-error);
}

.login-expired {
    background: var(--color-water-soft);
    border: 1px solid var(--color-water-soft);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--color-water);
}

.login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 28px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.login-footer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-energy);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-energy) 70%, transparent);
}

.login-hint {
    margin-top: 4px;
    font-size: 11px;
    color: var(--color-text-muted);
}

/* /css/app.css */
/* Shared dashboard, device, modal, and cross-route primitives. */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
    animation: rise-in 560ms ease both;
}

.page-title {
    font-size: clamp(1.85rem, 1.4vw + 1.35rem, 2.45rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
}

.page-subtitle {
    margin-top: 10px;
    max-width: 48rem;
    color: var(--color-text-soft);
    font-size: clamp(0.96rem, 0.26vw + 0.9rem, 1.05rem);
    line-height: 1.5;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid var(--color-success-soft);
    background: var(--color-success-soft);
    color: var(--color-success);
    font-size: clamp(0.82rem, 0.2vw + 0.78rem, 0.92rem);
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

.header-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 16px currentColor;
}

.header-badge--warning {
    color: var(--color-warning);
    background: var(--color-warning-soft);
    border-color: var(--color-warning-soft);
}

.header-badge--error {
    color: var(--color-error);
    background: var(--color-error-soft);
    border-color: var(--color-error-soft);
}

.hero {
    --hero-accent: var(--color-solar);
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(236px, 28vw, 320px);
    margin-bottom: 28px;
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 74%, transparent);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--hero-accent) 7%, transparent), transparent),
        color-mix(in srgb, var(--color-surface) 90%, transparent);
    box-shadow:
        0 24px 80px rgba(17, 24, 39, 0.10),
        var(--shadow-soft);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: rise-in 680ms ease both;
}

.hero::before,
.hero::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.hero::before {
    inset: 0;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--color-bg-alt) 26%, transparent), transparent 34%),
        radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--hero-accent) 22%, transparent), transparent 24%),
        radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--hero-accent) 12%, transparent), transparent 26%);
    opacity: 0.82;
}

.hero::after {
    right: -6%;
    top: 12%;
    width: clamp(220px, 32vw, 520px);
    height: clamp(220px, 32vw, 520px);
    border-radius: 50%;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--hero-accent) 26%, transparent) 0%, transparent 54%);
    opacity: 0.9;
}

.hero > * {
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.hero-title {
    max-width: 11ch;
    margin-top: 14px;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: 0;
}

.hero-subtitle {
    max-width: 38rem;
    margin-top: 14px;
    color: var(--color-text-soft);
    font-size: clamp(0.98rem, 0.24vw + 0.92rem, 1.08rem);
    line-height: 1.6;
}

.hero-status-strip {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.hero-status-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--color-line);
    background: transparent;
}
.hero-status-pill-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.hero-status-pill-value {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.hero-status-pill-arrow {
    font-size: 0.9em;
    opacity: 0.85;
}
.hero-status-pill--solar  { border-color: color-mix(in srgb, var(--color-solar) 25%, transparent); background: var(--color-solar-soft); }
.hero-status-pill--solar  .hero-status-pill-value { color: var(--color-solar-text); }
.hero-status-pill--energy { border-color: color-mix(in srgb, var(--color-energy) 25%, transparent); background: var(--color-energy-soft); }
.hero-status-pill--energy .hero-status-pill-value { color: var(--color-energy-text); }
.hero-status-pill--ok     { border-color: color-mix(in srgb, var(--color-success) 25%, transparent); background: var(--color-success-soft); }
.hero-status-pill--ok     .hero-status-pill-value { color: var(--color-success-text); }
.hero-status-pill--warn   { border-color: color-mix(in srgb, var(--color-warning) 25%, transparent); background: var(--color-warning-soft); }
.hero-status-pill--warn   .hero-status-pill-value { color: var(--color-warning-text); }
.hero-status-pill--neutral { border-color: var(--color-line-strong); }
.hero-status-pill--muted  { opacity: 0.72; }

.hero-skeleton-value,
.hero-skeleton-copy {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    background: transparent;
}

.hero-skeleton-value {
    width: min(8ch, 100%);
    min-height: 1.08em;
    border-radius: 18px;
}

.hero-skeleton-copy {
    width: min(28rem, 100%);
    border-radius: 999px;
}

.hero-chips {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.hero-chip {
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--color-line);
    background: var(--color-bg-soft);
    min-width: 140px;
}

.hero-chip:has(.hero-chip-stack) {
    min-width: 168px;
}

/* Hero visual region (Hero component #visual slot) — value/copy on the left,
   a data visual (HeroSparkline) filling the right. Replaces the single-column
   grid + decorative glow with a centered 2-column band. Falls back to the grid
   hero automatically when the slot has no content (e.g. before history loads). */
.hero--with-visual {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
}
.hero--with-visual::before,
.hero--with-visual::after { content: none; }
.hero--with-visual .hero-main { flex: 0 0 38%; min-width: 0; }
.hero-visual { flex: 1 1 auto; min-width: 0; }
.hero-spark { width: 100%; }
.hero-spark-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.hero-spark-cap { color: var(--color-text-faint); }
.hero-spark-peak { color: var(--color-solar); font-variant-numeric: tabular-nums; }
.hero-spark-svg {
    display: block;
    width: 100%;
    height: clamp(110px, 13vw, 150px);
}

/* R1 "data is the surface" — the #visual fills the hero as a full-bleed backdrop.
   The content surface token keeps light theme light while dark mode maps it
   back to the deep analysis shell. */
.hero--immersive {
    display: flex;
    align-items: center;
    background: var(--color-content-surface);
    border-color: var(--color-content-line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--shadow-card);
}
/* Re-use the STANDARD hero glow (same as Shelly/AquaTemp): the ::after amber
   blob is the base rule's, just lifted over the curve via z-index. ::before keeps
   the standard amber radials but swaps the base's light top-left sheen for a
   left→right wash so the white value stays legible over the curve. */
.hero--immersive::before {
    content: '';
    inset: 0;
    z-index: 1;
    opacity: 1;
    background:
        radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--hero-accent) 22%, transparent), transparent 24%),
        radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--hero-accent) 12%, transparent), transparent 26%),
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--color-content-surface) 92%, transparent) 0%,
            color-mix(in srgb, var(--color-content-surface) 46%, transparent) 46%,
            transparent 74%);
}
.hero--immersive::after {
    /* content:'' is REQUIRED: the hero also carries hero--with-visual, whose
       ::after { content:none } would otherwise suppress this glow blob. */
    content: '';
    z-index: 1;
}
.hero--immersive .hero-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    flex: none;
}
.hero--immersive .hero-visual .hero-spark,
.hero--immersive .hero-visual .hero-spark-svg {
    width: 100%;
    height: 100%;
}
.hero--immersive .hero-main {
    position: relative;
    z-index: 2;
    flex: 0 1 auto;
    max-width: 62%;
}
.hero--immersive .hero-eyebrow { color: var(--color-content-text-muted); }
.hero--immersive .hero-title { color: var(--color-content-text); }
.hero--immersive .hero-subtitle { color: var(--color-content-text-muted); }
.hero--immersive .hero-chip {
    background: var(--color-content-chip-bg);
    border-color: var(--color-content-line);
}
.hero--immersive .hero-chip-label { color: var(--color-content-text-muted); }
.hero--immersive .hero-chip-value { color: var(--color-content-text); }
.hero-corner {
    position: absolute;
    top: clamp(20px, 2.4vw, 32px);
    right: clamp(20px, 2.4vw, 34px);
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hero-accent);
}

/* HeroStatPanel — pattern-B visual inside the immersive Hero #visual slot (vendors
   without an intraday curve). Text follows the same content-surface tokens as
   the parent hero; the per-room dot inherits var(--hero-accent). */
.hero-stat-panel { width: 100%; min-width: 0; }
.hero-stat-rooms { display: flex; flex-direction: column; }
.hero-stat-room {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 34px;
    padding: 6px 2px;
    border-top: 1px solid var(--color-content-line);
}
.hero-stat-room:first-child { border-top: none; }
.hero-stat-room-name {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 0.86rem;
    color: var(--color-content-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero-stat-room-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--hero-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--hero-accent) 55%, transparent);
}
.hero-stat-room-dot--off { background: var(--color-content-text-faint); box-shadow: none; }
.hero-stat-room-temp {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    color: var(--color-content-text);
    flex: none;
    font-variant-numeric: tabular-nums;
}
.hero-stat-room-temp--off {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-content-text-muted);
}
.hero-stat-room-more {
    padding-top: 9px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-content-text-muted);
}
.hero-stat-room--skel {
    height: 18px;
    margin: 8px 0;
    border-radius: 6px;
    background: var(--color-content-line);
}
.hero-stat-band-wrap { width: 100%; }
.hero-stat-band { display: block; width: 100%; height: 26px; }
.hero-stat-band-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--color-content-text-muted);
}

/* Panel mode — the immersive #visual is a right-side content column (HeroStatPanel),
   not a full-bleed backdrop: value left, panel right, both ABOVE the glow (z2). */
.hero--immersive-panel .hero-visual {
    position: relative;
    inset: auto;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
}
.hero--immersive-panel .hero-main {
    flex: 0 0 42%;
    max-width: none;
}

/* HeroStatPanel — progress variant (pool/water: current → target + key temps). */
.hero-stat-progress { width: 100%; }
.hero-stat-prog-head {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-content-text-muted);
    margin-bottom: 11px;
}
.hero-stat-prog-bar { display: block; width: 100%; height: 12px; }
.hero-stat-prog-track { fill: var(--color-content-line); }
.hero-stat-prog-fill { fill: var(--hero-accent); }
.hero-stat-marks {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-content-text-muted);
}
.hero-stat-marks b { color: var(--color-content-text); font-weight: 500; }

/* HeroStatPanel — stats variant (key/value readout, e.g. HomeWizard import). */
.hero-stat-kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 2px;
    border-top: 1px solid var(--color-content-line);
}
.hero-stat-kv:first-child { border-top: none; }
.hero-stat-kv-l { font-size: 0.84rem; color: var(--color-content-text-muted); }
.hero-stat-kv-v {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--color-content-text);
    font-variant-numeric: tabular-nums;
}

.hero-chip-label {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero-chip-value,
.last-updated {
    margin-top: 6px;
    font-size: clamp(0.86rem, 0.16vw + 0.82rem, 0.94rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hero-chip-stack .hero-chip-value {
    margin-top: 6px;
}

.hero-chip-value--energy,
.status-value--energy {
    color: var(--color-energy);
}

.hero-chip-value--solar,
.status-value--solar {
    color: var(--color-solar);
}

.status-value--water {
    color: var(--color-water);
}

.status-value--error {
    color: var(--color-error);
}

.hero--solar { --hero-accent: var(--color-solar); }
.hero--energy { --hero-accent: var(--color-energy); }
.hero--water { --hero-accent: var(--color-water); }
.hero--pool { --hero-accent: var(--color-pool); }
.hero--climate { --hero-accent: var(--color-climate); }
.hero--heatpump { --hero-accent: var(--color-heatpump); }
.hero--tado { --hero-accent: var(--color-tado); }
.hero--unifi { --hero-accent: var(--color-unifi); }
.hero--garden { --hero-accent: var(--color-garden); }
.hero--clean { --hero-accent: var(--color-clean); }

/* ─── Variant G: clean dashboard overview ─────────────────────────── */

@keyframes flow-dash { to { stroke-dashoffset: -24; } }
@keyframes mob-ed-flow {
    to { transform: translateX(180%); }
}

/* ─── Accent classes ─────────────────────────────────────────────────────
 * Sets `--accent` via class instead of inline `:style="--accent:..."` — the
 * latter is blocked by the production CSP (`style-src 'self' ...`, no
 * `unsafe-inline`). Consumers (mob-ed-row-icon, mob-ed-tile, etc.) read
 * `var(--accent, var(--color-text-muted))` for backgrounds + foregrounds,
 * so attaching one of these classes to the element tints both at once.
 *
 * If you need a new service color, ADD A CLASS HERE — never reach for
 * `:style`. CLAUDE.md "Frontend rules" pins this convention.
 */
/* `--accent` drives tint backgrounds; `--accent-text` is the AA-compliant glyph
   color for placing the accent ON its own -soft/tint background (the raw 600-tier
   light accents fail WCAG 3:1 on their own pale tint — e.g. solar/garden). In dark
   the -text tokens equal the accent, so dark is visually unchanged. */
.acc-solar    { --accent: var(--color-solar);      --accent-text: var(--color-solar-text); }
.acc-energy   { --accent: var(--color-energy);     --accent-text: var(--color-energy-text); }
.acc-water    { --accent: var(--color-water);      --accent-text: var(--color-water-text); }
.acc-pool     { --accent: var(--color-pool);       --accent-text: var(--color-pool-text); }
.acc-climate  { --accent: var(--color-climate);    --accent-text: var(--color-climate-text); }
.acc-heatpump { --accent: var(--color-heatpump);   --accent-text: var(--color-heatpump-text); }
.acc-tado     { --accent: var(--color-tado);       --accent-text: var(--color-tado-text); }
.acc-unifi    { --accent: var(--color-unifi);      --accent-text: var(--color-unifi-text); }
.acc-garden   { --accent: var(--color-garden);     --accent-text: var(--color-garden-text); }
.acc-clean    { --accent: var(--color-clean);      --accent-text: var(--color-clean-text); }
.acc-improvements { --accent: var(--improvements); --accent-text: var(--improvements-text); }
.acc-error    { --accent: var(--color-error);      --accent-text: var(--color-error-text); }
.acc-warn     { --accent: var(--color-warning);    --accent-text: var(--color-warning-text); }
.acc-muted    { --accent: var(--color-text-muted); --accent-text: var(--color-text-muted); }

.overview-g {
    display: flex;
    flex-direction: column;
    /* Vertical rhythm: sections separate by --space-xl (24px) while the KPI/flow
       rows keep their own tighter 16px card gap, so the page reads as composed
       sections instead of one uniform tiled stack. */
    gap: var(--space-xl);
    max-width: 1360px;
}

.og-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.og-eyebrow {
    font-size: var(--fs-xs);
    font-weight: 800;
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.og-greeting {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text);
}

.og-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.og-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 7px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-line);
}

.og-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 3px var(--color-success-soft);
}

.og-live-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
}

.og-updated {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.og-card {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-alt) 12%, transparent), transparent 58%),
        var(--color-card);
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 66%, transparent);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        var(--shadow-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.og-hero-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
}

.og-hero-row--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.og-hero-row--single {
    grid-template-columns: minmax(0, 1fr);
}

.og-hero-row--three-equal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.og-hero-row--four-equal {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.og-hero-row--many {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.og-hero-row--two-pre-context {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.og-hero-row--split-context {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.og-hero-row--split-context.og-hero-row--with-battery {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

.og-hero-row--right-context {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}

.og-hero-row--right-context.og-hero-row--with-battery {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}

.og-hero-solar { position: relative; overflow: hidden; }

.og-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}

.og-card-eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.og-hero-value {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.og-hero-value--muted { color: var(--color-text-faint); }

.og-hero-unit {
    font-size: 0.5em;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-left: 4px;
}

.og-hero-sub {
    margin-top: 10px;
    font-size: 0.86rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.og-hero-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--color-solar);
    background: var(--color-solar-soft);
}

.og-hero-icon svg {
    width: 18px;
    height: 18px;
}

.og-sparkline {
    width: 100%;
    height: 84px;
    margin-top: 10px;
    display: block;
}

.og-sparkline-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--color-text-faint);
}

.og-sparkline-axis span { display: flex; flex-direction: column; gap: 3px; }
.og-sparkline-axis span:nth-child(2) { font-weight: 600; color: var(--color-text-muted); align-items: center; }
.og-sparkline-axis span:last-child { align-items: flex-end; }
.og-sparkline-axis small { font-size: 0.68rem; opacity: 0.76; }

.og-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}

.og-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    color: var(--color-text);
}

.og-card-icon--solar {
    background: var(--color-solar-soft);
    color: var(--color-solar);
}

.og-card-icon--water {
    background: var(--color-water-soft);
    color: var(--color-water);
}

.og-card-icon--battery {
    background: var(--color-heatpump-soft);
    color: var(--color-heatpump);
}

.og-card-icon--comfort {
    background: var(--color-climate-soft);
    color: var(--color-climate);
}

.og-card-icon--garden {
    background: var(--color-garden-soft);
    color: var(--color-garden);
}

.og-card-icon--muted {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
}

.og-card-icon svg {
    width: 14px;
    height: 14px;
}

.og-card-value {
    font-family: var(--font-display);
    font-size: 2.3rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* Mono telemetry numbers — tabular figures stop the horizontal jitter on
   live tick and align right-aligned columns; ligature suppression keeps the
   "--" null placeholder from rendering as one elongated em-dash glyph. */
.og-hero-value,
.og-card-value,
.mob-ed-hero-num,
.mob-ed-row-val,
.mob-ed-hero-stat .v,
.tado-gas-card-num {
    font-variant-numeric: tabular-nums;
    font-variant-ligatures: none;
    font-feature-settings: 'liga' 0, 'calt' 0;
}

.og-card-unit {
    font-size: 0.48em;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-left: 4px;
}

.og-card-pill {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.76rem;
    font-weight: 700;
}

.og-pill--energy { background: var(--color-energy-soft); color: var(--color-energy-text); }
.og-pill--neutral { background: var(--color-bg-soft); color: var(--color-text-muted); }

.og-card-detail {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 10px;
    line-height: 1.4;
}

.og-card-meta-list {
    margin-top: 18px;
    display: grid;
    gap: 8px;
}

.og-card-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--color-line);
}

.og-card-meta-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}

.og-card-meta-value {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-text-soft);
    text-align: right;
}

.og-melcloud-airco-list {
    margin-top: 18px;
    display: grid;
    gap: 8px;
}

.og-melcloud-airco-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.6rem 4.8rem;
    align-items: baseline;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-line);
}

.og-melcloud-airco-name,
.og-melcloud-airco-temp,
.og-melcloud-airco-state {
    min-width: 0;
    line-height: 1.25;
}

.og-melcloud-airco-name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    white-space: normal;
    overflow-wrap: anywhere;
}

.og-melcloud-airco-temp,
.og-melcloud-airco-state {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-text-soft);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.og-melcloud-airco-state {
    color: var(--color-text-muted);
}

.og-card-meta-list--battery {
    margin-top: 16px;
}

.og-battery-bar,
.og-battery-progress {
    margin-top: 14px;
    height: 6px;
    border-radius: 3px;
}

.og-battery-bar {
    background: var(--color-bg-soft);
    overflow: hidden;
}

.og-battery-progress {
    display: block;
    width: 100%;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-bg-soft);
    overflow: hidden;
}

.og-battery-progress::-webkit-progress-bar {
    background: var(--color-bg-soft);
}

.og-battery-progress::-webkit-progress-value {
    background: var(--color-heatpump);
    border-radius: 3px;
}

.og-battery-progress::-moz-progress-bar {
    background: var(--color-heatpump);
    border-radius: 3px;
}

.og-battery-fill {
    height: 100%;
    background: var(--color-heatpump);
    border-radius: 3px;
    transition: width 300ms ease;
}

.og-row-2 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.og-row-2--single {
    grid-template-columns: minmax(0, 1fr);
}

.og-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.og-section-heading-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.og-section-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-text);
}

.og-flow-summary {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--color-success) 38%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-success-soft) 64%, transparent);
    color: var(--color-success-text);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.og-section-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.og-section-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 4px var(--color-success-soft);
}

.og-section-live--stale {
    color: var(--color-warning);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Stale source — dim the flow grid so frozen values read as suspect.
   The 'Bron stil' badge in the head + the Meldingen entry tell the
   operator WHY. Cursor stays interactive; we're not blocking the UI. */
.og-flow--stale .og-flow-grid {
    opacity: 0.55;
    filter: saturate(0.6);
    transition: opacity 200ms ease, filter 200ms ease;
}

.og-flow-grid {
    display: grid;
    grid-template-columns: minmax(156px, 1fr) minmax(82px, 0.72fr) 108px minmax(82px, 0.72fr) minmax(156px, 1fr);
    grid-template-areas:
        "pv pv-link house net-link net"
        ". . battery . .";
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    padding: 0;
}

.og-flow {
    padding: 20px 24px;
}

.og-flow-node {
    min-width: 0;
    border: 1px solid transparent;
}

.og-flow-node--pv {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 88px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--color-solar-soft);
    border-color: color-mix(in srgb, var(--color-solar) 54%, transparent);
    color: var(--color-solar);
}

.og-flow-node--house {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    padding: 12px;
    border-radius: 50%;
    background: var(--color-bg-soft);
    border-color: color-mix(in srgb, var(--color-text-muted) 50%, transparent);
    color: var(--color-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.og-flow-node--net {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 88px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    border-color: color-mix(in srgb, var(--color-info) 40%, transparent);
    color: var(--color-text);
}

.og-flow-node--net-export {
    background: var(--color-info-soft);
    border-color: color-mix(in srgb, var(--color-info) 64%, transparent);
    color: var(--color-info);
}

.og-flow-node-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
}

.og-flow-node-icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.65;
}

.og-flow-node--house .og-flow-node-icon {
    width: 29px;
    height: 29px;
    margin-bottom: 4px;
}

.og-flow-node--house .og-flow-node-icon svg {
    width: 27px;
    height: 27px;
}

.og-flow-node-copy {
    min-width: 0;
}

.og-flow-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

.og-flow-value {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0;
    margin-top: 4px;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.og-flow-node--house .og-flow-label,
.og-flow-node--house .og-flow-value {
    text-align: center;
}

.og-flow-node--house .og-flow-value {
    font-size: 1.02rem;
}

.og-flow-detail {
    margin-top: 5px;
    color: color-mix(in srgb, currentColor 74%, var(--color-text-muted));
    font-size: 0.66rem;
    font-weight: 650;
}

.og-flow-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.og-flow-arrow {
    width: 100%;
    height: 24px;
    overflow: visible;
}

.og-flow-link-value {
    margin-top: 3px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.og-flow-link-value--solar { color: var(--color-solar-text); }
.og-flow-link-value--net { color: var(--color-info); }

.og-flow-link--pv { grid-area: pv-link; }
.og-flow-link--net { grid-area: net-link; }

.og-flow-link--pv .og-flow-arrow {
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--color-solar) 42%, transparent));
}

.og-flow-link--net .og-flow-arrow {
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--color-info) 34%, transparent));
}

.og-flow-line--active {
    animation: flow-dash 0.8s linear infinite;
    opacity: 1;
}

.og-flow-line--idle {
    animation: none;
    opacity: 0.35;
}

.og-flow-line--slow {
    animation-duration: 1.2s;
}

.og-flow-line--reverse {
    animation-direction: reverse;
}

.og-flow-node--pv { grid-area: pv; }
.og-flow-node--house { grid-area: house; }
.og-flow-node--net { grid-area: net; }

.og-flow-battery {
    grid-area: battery;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: fit-content;
    justify-self: center;
    align-self: start;
    margin-top: -2px;
}

.og-flow-battery-arrow {
    display: block;
    width: 24px;
    height: 30px;
    overflow: visible;
    margin-bottom: -4px;
}

.og-flow-battery-pill {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 270px;
    max-width: calc(100vw - 80px);
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-heatpump) 58%, transparent);
    background: var(--color-heatpump-soft);
}

.og-flow-battery-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--color-heatpump);
}

.og-flow-battery-icon svg {
    width: 38px;
    height: 38px;
    stroke-width: 1.35;
}

.og-flow-battery-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3px 12px;
    min-width: 0;
}

.og-flow-battery-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-heatpump);
}

.og-flow-battery-value {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-heatpump);
    letter-spacing: 0;
    white-space: nowrap;
    line-height: 1;
    grid-row: span 2;
}

.og-flow-battery-progress {
    width: 100%;
    height: 5px;
    border: none;
    border-radius: var(--radius-pill);
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
}

.og-flow-battery-progress::-webkit-progress-bar {
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-heatpump) 16%, transparent);
}

.og-flow-battery-progress::-webkit-progress-value {
    border-radius: var(--radius-pill);
    background: var(--color-heatpump);
}

.og-flow-battery-progress::-moz-progress-bar {
    border-radius: var(--radius-pill);
    background: var(--color-heatpump);
}

.og-flow-battery-status {
    grid-column: 1 / -1;
    margin-top: 3px;
    color: var(--color-heatpump-text);
    font-size: 0.7rem;
    font-weight: 650;
    white-space: nowrap;
}

.og-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.og-alert {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-line);
    background: var(--color-bg-soft);
}

.og-alert-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.og-alert-detail {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 4px;
    line-height: 1.4;
}

.og-alert--error {
    background: var(--color-error-soft);
    border-color: var(--color-error);
}
.og-alert--error .og-alert-title { color: var(--color-error-text); }

.og-alert--warning {
    background: var(--color-warning-soft);
    border-color: var(--color-warning);
}
.og-alert--warning .og-alert-title { color: var(--color-warning-text); }

.og-alerts-empty {
    font-size: 0.84rem;
    color: var(--color-text-muted);
    padding: 4px 0;
}

/* Laatste automatisaties — header mirrors og-table-head (Gekoppelde
   services pattern): generous top padding, count on the right.
   Body scrolls — capped height keeps the card from dominating the
   page when there are many events. */
.og-recent-auto {
    padding: 0;
    overflow: hidden;
}

.og-recent-auto-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 14px;
}

.og-recent-auto-count {
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

/* Column template — rem (not em) is critical. CSS custom properties
   substitute their value as tokens at use time, so `em` resolves
   against the LOCAL font-size of the element that uses the variable.
   Header has font-size: 0.68rem; row has font-size: 0.86rem; same
   template text would produce 1.26x wider tracks in the row context
   and the columns wouldn't line up. rem always resolves against the
   root, so the substituted value yields identical pixel tracks
   regardless of where it's used. */
.og-recent-auto {
    /* REGEL column is just wide enough to fit a typical rule name. The
       earlier minmax(20rem, 28rem) left ~10rem of internal slack inside
       the column, which pushed DETAIL visually far to the right relative
       to the tight ACTIE→REGEL gap. Fixed at 22rem keeps both gaps even. */
    --recent-cols: 6rem 4rem 11rem 22rem minmax(0, 1fr);
}

.og-recent-auto-columns {
    display: grid;
    grid-template-columns: var(--recent-cols);
    gap: 16px;
    padding: 12px 24px;
    border-top: 1px solid var(--color-line);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ACTIE header sits over a pill chip whose text is offset 8px inside the
   chip by its own padding. Indent the header label by the same amount
   so the words 'ACTIE' and 'AQUATEMP UIT' line up at their text starts,
   not at their box edges. */
.og-recent-auto-columns > :nth-child(3) {
    padding-left: 8px;
}

.og-recent-auto-scroll {
    /* Calibrated to ~5 rows visible. Each row is approximately 7px top
       padding + 1.4 × 0.86rem line-height (~19px) + 7px bottom padding +
       1px dashed border ≈ 34px, plus a 4px row gap. 5 rows + 4 gaps +
       18px container bottom padding = 204px; rounded to 220px to absorb
       sub-pixel rendering and font-metric variance across browsers.
       Adjust upward in 38px increments if the editorial preference shifts
       toward 6+ rows. */
    max-height: 220px;
    overflow-y: auto;
    padding: 0 24px 18px;
    /* Reserve the scrollbar gutter so rows don't reflow horizontally when
       overflow toggles the scrollbar on/off. (Header lives outside this
       container with its own padding, so the gutter does NOT make the
       header-vs-row alignment pixel-stable — the DETAIL flex track in
       rows ends up ~14px narrower than its header counterpart whenever
       scroll is present. Accepted as a small visual quirk. */
    scrollbar-gutter: stable;
}

.og-recent-auto-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.og-recent-auto-row {
    display: grid;
    grid-template-columns: var(--recent-cols);
    align-items: baseline;
    gap: 16px;
    padding: 7px 0;
    font-size: 0.86rem;
    line-height: 1.4;
    border-bottom: 1px dashed var(--color-line);
}

.og-recent-auto-date {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    white-space: nowrap;
}
.og-recent-auto-row:last-child {
    border-bottom: 0;
}

.og-recent-auto-time {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    white-space: nowrap;
}

.og-recent-auto-verb {
    justify-self: start;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    /* Pill chrome (background + padding) makes the chip read low against
       baseline-aligned siblings. translateY nudges the visual center up
       without affecting layout flow. */
    transform: translateY(-1px);
}
.og-recent-auto-verb--on  { color: var(--automation-node-action);  background: color-mix(in srgb, var(--automation-node-action) 14%, transparent); }
.og-recent-auto-verb--off { color: var(--color-text-muted); background: color-mix(in srgb, var(--color-text-muted) 14%, transparent); }

.og-recent-auto-name {
    color: var(--color-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.og-recent-auto-detail {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .og-recent-auto {
        --recent-cols: 6rem 4rem 11rem minmax(0, 1fr);
    }
    .og-recent-auto-columns > :nth-child(5) { display: none; }
    .og-recent-auto-detail {
        grid-column: 2 / 5;
        font-size: 0.78rem;
    }
    /* Detail spans columns 2/5 on a SECOND grid line, so each row is two
       stacked lines (~55-60px instead of desktop's ~34px). Scaling the cap
       up keeps the editorial 5-row footprint consistent on phones — at the
       desktop 220px cap mobile would only show ~3.5 rows. */
    .og-recent-auto-scroll {
        max-height: 320px;
    }
}

.og-table {
    padding: 0;
    overflow: hidden;
}

.og-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 14px;
}

.og-table-count {
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

.og-table-columns {
    display: grid;
    grid-template-columns: 2fr 1fr 1.3fr 1fr 80px;
    padding: 12px 24px;
    border-top: 1px solid var(--color-line);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.og-table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.3fr 1fr 80px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-line);
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: background 120ms ease;
}

.og-table-row:hover {
    background: var(--color-bg-soft);
}

.og-table-row:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: -2px;
    background: var(--color-bg-soft);
}

.og-row--dim { opacity: 0.6; }

.og-row-service {
    display: flex;
    align-items: center;
    gap: 10px;
}

.og-row-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.og-row-icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--accent, var(--color-text-muted));
}
.og-row-icon svg {
    width: 18px;
    height: 18px;
}

.og-row-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.og-row-desc {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.og-status-pill {
    display: inline-block;
    padding: 3.5px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
}

.og-status-pill--live    { background: var(--color-success-soft); color: var(--color-success-text); }
.og-status-pill--warn    { background: var(--color-warning-soft); color: var(--color-warning-text); }
.og-status-pill--error   { background: var(--color-error-soft);   color: var(--color-error-text); }
.og-status-pill--offline { background: var(--color-bg-soft);       color: var(--color-text-muted); }

.og-row-value {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.og-row-updated {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.og-row-action {
    text-align: right;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.og-empty {
    text-align: center;
    padding: 48px 24px;
}

.og-empty-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text);
}

.og-empty-body { font-size: 0.85rem; color: var(--color-text-muted); }
.og-empty-body a { color: var(--color-solar); font-weight: 600; text-decoration: none; }

@media (max-width: 1100px) {
    .overview-g { display: none; }
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.status-card,
.device-card,
.settings-home-card,
.service-pill,
.settings-section > .card,
.settings-section .card {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 66%, transparent);
    background: var(--color-card);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        var(--shadow-soft);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.status-card {
    grid-column: span 4;
    display: flex;
    gap: 16px;
    min-height: 148px;
    padding: 20px 22px;
    border-radius: var(--radius-lg);
    transition: border-color 180ms ease, background-color 180ms ease;
    animation: rise-in 720ms ease both;
}

.status-card--loading {
    border-color: var(--color-line);
}

.status-card:hover {
    border-color: var(--color-line-strong);
    background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent);
}

.status-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: transparent;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.status-icon svg {
    width: 20px;
    height: 20px;
}

.skeleton-block,
.skeleton-line {
    position: relative;
    overflow: hidden;
    /* Subtle resting tint so the skeleton is visible BEFORE the shimmer sweep
       reaches it. Pure transparent + transparent-gradient sweep made loading
       indistinguishable from "no data" — users couldn't tell anything was
       happening. Light alpha on dark + light themes both. */
    background: rgba(255, 255, 255, 0.06);
}

html:not([data-theme="dark"]) .skeleton-block,
html:not([data-theme="dark"]) .skeleton-line {
    background: rgba(17, 24, 39, 0.06);
}

.skeleton-block {
    border-radius: 14px;
}

.skeleton-line {
    border-radius: 999px;
}

.skeleton-line--label {
    width: 42%;
    height: 12px;
}

.skeleton-line--value {
    width: 56%;
    height: 42px;
    border-radius: 14px;
}

.skeleton-line--detail {
    width: 38%;
    height: 14px;
}

.skeleton-block::after,
.skeleton-line::after,
.hero-skeleton-value::after,
.hero-skeleton-copy::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    /* Shimmer is the moving highlight on top of the resting bg above. Without
       a visible mid-stop the loading state was invisible. */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

html:not([data-theme="dark"]) .skeleton-block::after,
html:not([data-theme="dark"]) .skeleton-line::after,
html:not([data-theme="dark"]) .hero-skeleton-value::after,
html:not([data-theme="dark"]) .hero-skeleton-copy::after {
    background: linear-gradient(90deg, transparent, rgba(17, 24, 39, 0.08), transparent);
}

.status-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.status-label {
    color: var(--color-text-muted);
    font-size: clamp(0.7rem, 0.1vw + 0.68rem, 0.76rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.status-value {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2vw, 2.15rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.status-detail,
.status-updated {
    color: var(--color-text-soft);
    font-size: clamp(0.84rem, 0.18vw + 0.8rem, 0.92rem);
    line-height: 1.45;
}

.status-updated {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.status-stale {
    color: var(--color-warning-text);
    font-size: 0.82rem;
    font-weight: 500;
}

/* Per-service glow — re-activated. The metric accent now reaches the card BODY
   as a soft top-right radial (the immersive hero's accent vocabulary) plus an
   accent-tinted border, so a solar card reads solar and a heat-pump card reads
   violet instead of every card being an anonymous navy rectangle. On HeatPump/
   Climate the glow class is applied only while the device is on, so active
   devices gently light up with their accent while idle ones stay calm.
   Restrained + static (no idle motion); reduced-motion-safe (nothing animates). */
.glow-amber  { --metric-accent: var(--color-solar); --metric-accent-soft: var(--color-solar-soft); }
.glow-green  { --metric-accent: var(--color-energy); --metric-accent-soft: var(--color-energy-soft); }
.glow-blue   { --metric-accent: var(--color-water); --metric-accent-soft: var(--color-water-soft); }
.glow-cyan   { --metric-accent: var(--color-pool); --metric-accent-soft: var(--color-pool-soft); }
.glow-purple { --metric-accent: var(--color-heatpump); --metric-accent-soft: var(--color-heatpump-soft); }
.glow-climate { --metric-accent: var(--color-climate); --metric-accent-soft: var(--color-climate-soft); }
.glow-unifi  { --metric-accent: var(--color-unifi); --metric-accent-soft: var(--color-unifi-soft); }
.glow-red    { --metric-accent: var(--color-error); --metric-accent-soft: var(--color-error-soft); }
.status-card[class*="glow-"],
.device-card[class*="glow-"],
.og-card[class*="glow-"] {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--metric-accent) 13%, transparent), transparent 60%),
        var(--color-card);
    border-color: color-mix(in srgb, var(--metric-accent) 22%, var(--color-line-strong));
}
.status-card[class*="glow-"] .status-icon {
    background: var(--metric-accent-soft, var(--color-bg-soft));
    color: var(--metric-accent, var(--color-text));
}

.services-section,
.settings-section {
    margin-top: 28px;
    animation: rise-in 760ms ease both;
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.section-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.section-header-row .section-header {
    margin-bottom: 0;
}

.section-freshness {
    flex-shrink: 0;
}

.section-freshness .last-updated,
.section-freshness .hero-chip-stack {
    display: grid;
    gap: 4px;
    text-align: right;
}

.section-freshness .hero-chip-label {
    font-size: 0.66rem;
}

.section-freshness .hero-chip-value {
    margin-top: 0;
}

.section-eyebrow {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.section-title {
    font-size: clamp(1.12rem, 0.42vw + 1.02rem, 1.3rem);
    font-weight: 700;
    letter-spacing: 0;
}

.section-subtitle {
    color: var(--color-text-soft);
    font-size: 0.95rem;
}

.services-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.service-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 999px;
    color: var(--color-text-soft);
    font-size: 0.9rem;
    font-weight: 700;
}

.service-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-text-muted);
    box-shadow: 0 0 0 6px var(--color-line);
}

.service-dot.ok { background: var(--color-success); box-shadow: 0 0 0 6px var(--color-success-soft); }
.service-dot.wait { background: var(--color-warning); box-shadow: 0 0 0 6px var(--color-warning-soft); }
.service-dot.warn { background: var(--color-warning); box-shadow: 0 0 0 6px var(--color-warning-soft); }
.service-dot.stale { background: var(--color-warning); box-shadow: 0 0 0 6px var(--color-warning-soft); }
.service-dot.err { background: var(--color-error); box-shadow: 0 0 0 6px var(--color-error-soft); }
.service-dot.off { background: var(--color-line-strong); }

.device-card {
    display: grid;
    gap: 22px;
    margin-bottom: 18px;
    padding: 24px;
    border-radius: 28px;
    animation: rise-in 780ms ease both;
}

.device-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-line);
}

.water-card-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.water-boost-action {
    display: inline-grid;
    grid-template-columns: minmax(64px, auto) 42px;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    min-width: 138px;
    padding: 6px 8px 6px 14px;
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 62%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg-soft) 86%, transparent);
    color: var(--color-text);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.water-boost-action:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-water) 54%, var(--color-line-strong));
    background: color-mix(in srgb, var(--color-water) 10%, var(--color-bg-soft));
}

.water-boost-action:active:not(:disabled) {
    transform: translateY(1px);
}

.water-boost-action:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 3px;
}

.water-boost-action:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.water-boost-action--active {
    border-color: color-mix(in srgb, var(--color-warning) 72%, var(--color-line-strong));
    background: color-mix(in srgb, var(--color-warning) 14%, var(--color-bg-soft));
    box-shadow: 0 10px 30px color-mix(in srgb, var(--color-warning) 16%, transparent);
}

.water-boost-action-copy {
    display: grid;
    gap: 2px;
    text-align: left;
    line-height: 1;
}

.water-boost-action-label {
    color: var(--color-text-muted);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.water-boost-action-state {
    min-width: 42px;
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0;
}

.water-boost-action-switch {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--color-line-strong);
    transition: background-color 180ms ease;
}

.water-boost-action-switch::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    transition: transform 180ms ease;
}

.water-boost-action--active .water-boost-action-switch {
    background: linear-gradient(90deg, var(--color-warning), var(--color-pool));
}

.water-boost-action--active .water-boost-action-switch::after {
    transform: translateX(18px);
}

.device-name {
    font-size: clamp(1.12rem, 0.5vw + 1rem, 1.32rem);
    font-weight: 700;
    letter-spacing: 0;
}

.device-subtitle {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 0.86rem;
}

.device-mode-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 4px;
    opacity: 0.7;
}

.device-mode-icon svg {
    width: 22px;
    height: 22px;
}

.device-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.device-metric {
    padding: 14px 0 6px;
    border-top: 1px solid var(--color-line);
}

.device-metric-label {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.device-metric-value {
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 0.9vw + 1.02rem, 1.58rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.device-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(200px, 0.45fr) minmax(260px, 0.5fr);
    gap: 18px;
    align-items: end;
    padding-top: 12px;
}

.device-card--garden {
    gap: 18px;
}

.device-card--garden .device-subtitle,
.device-card--garden .device-metric-value {
    overflow-wrap: anywhere;
}

.device-card--garden .device-metrics {
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--color-line);
}

.device-card--garden .device-metric {
    min-height: 70px;
    padding: 10px 12px 9px;
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 58%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-bg-alt) 54%, transparent);
}

.device-card--garden .device-metric-value {
    margin-top: 6px;
    font-size: clamp(1rem, 0.48vw + 0.92rem, 1.24rem);
    line-height: 1.18;
}

.device-card--garden .hero-actions {
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-line);
}

@media (min-width: 1101px) {
    .device-card--dense-control {
        gap: 14px;
        margin-top: 10px;
        padding: 20px 24px 22px;
        border-radius: 24px;
    }

    .device-card--dense-control .device-header {
        min-height: 44px;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .device-card--dense-control .device-name {
        font-size: clamp(1rem, 0.28vw + 0.96rem, 1.14rem);
    }

    .device-card--dense-control .device-metrics {
        grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
        gap: 10px;
        padding-top: 12px;
        border-top: 1px solid var(--color-line);
    }

    .device-card--dense-control .device-metric {
        min-height: 64px;
        padding: 10px 12px 9px;
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 58%, transparent);
        border-radius: 16px;
        background: color-mix(in srgb, var(--color-bg-alt) 54%, transparent);
    }

    .device-card--dense-control .device-metric-value {
        margin-top: 6px;
        font-size: clamp(1.08rem, 0.55vw + 0.94rem, 1.32rem);
    }

    .device-card--dense-control .device-controls {
        grid-template-columns: minmax(360px, 1fr) minmax(190px, 260px) minmax(220px, 280px);
        justify-content: space-between;
        align-items: start;
        gap: 18px;
        padding-top: 12px;
        border-top: 1px solid var(--color-line);
    }

    .device-card--dense-control .device-controls-hint {
        grid-column: 1 / -1;
    }

    .device-card--dense-control .slider-container {
        min-height: 44px;
    }

    .device-card--dense-control .form-select {
        width: 100%;
        min-width: 0;
    }

    .device-card--heatpump .fan-speed-control {
        width: 100%;
    }

    .device-card--water .device-controls--water {
        grid-template-columns: minmax(360px, 1fr) minmax(92px, auto);
    }
}

@media (max-width: 1100px) {
    .device-card--water .device-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .device-card--water .water-card-actions {
        width: 100%;
        justify-content: space-between;
    }
}

.fan-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 22px;
    vertical-align: middle;
}

.fan-bar {
    width: 4px;
    border-radius: 2px;
    background: var(--color-line-strong);
}

.fan-bar:nth-child(1) { height: 25%; }
.fan-bar:nth-child(2) { height: 43%; }
.fan-bar:nth-child(3) { height: 61%; }
.fan-bar:nth-child(4) { height: 79%; }
.fan-bar:nth-child(5) { height: 100%; }

.fan-bar--active { background: var(--color-text); }
.fan-bar--auto   { background: var(--color-info); opacity: 0.6; }

.fan-speed-control {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 52px;
    padding: 4px 5px;
    border: 1px solid var(--color-line-strong);
    border-radius: 18px;
    background: color-mix(in srgb, var(--color-bg-alt) 76%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 4%, transparent);
}

.fan-speed-segment {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--color-text-soft);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.fan-speed-segment--auto {
    min-width: 62px;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.fan-speed-segment:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-water) 50%, var(--color-line-strong));
    background: var(--color-water-soft);
    color: var(--color-text);
}

.fan-speed-segment:focus-visible {
    outline: none;
    border-color: var(--color-water);
    box-shadow: 0 0 0 4px var(--color-water-soft);
}

.fan-speed-segment:active:not(:disabled) {
    transform: translateY(1px);
}

.fan-speed-segment--active {
    border-color: var(--color-water);
    background: var(--color-water-soft);
    color: var(--color-water);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-water) 16%, transparent);
}

.fan-speed-segment:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.device-schedules {
    padding-top: 14px;
    border-top: 1px solid var(--color-line);
    display: grid;
    gap: 6px;
}

.schedule-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.schedule-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.schedule-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 99px;
}

.schedule-badge--on  { background: var(--color-success-soft); color: var(--color-success); }
.schedule-badge--off { background: var(--color-line);  color: var(--color-text-muted); }

/* .automation-chip + .chip-* color variants are defined once in the canonical
   block near .form-error (status pill next to the rule name). A duplicate base
   rule lived here and lost the cascade anyway; removed to kill the conflict. */

.schedule-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 5px 0;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--color-line-strong);
}

.schedule-row--disabled {
    opacity: 0.4;
}

.schedule-time {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.85rem;
}

.schedule-days {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.schedule-action {
    margin-left: auto;
    color: var(--color-text);
    font-size: 0.8rem;
}

.device-card--pool {
    grid-template-areas:
        "intro status"
        "metrics metrics"
        "controls controls";
    grid-template-columns: minmax(0, 1fr) minmax(300px, auto);
    align-items: start;
    gap: 14px 24px;
    margin-top: 10px;
    padding: 20px 24px 22px;
}

.device-card--pool .inline-section-head {
    grid-area: intro;
    gap: 4px;
    padding-bottom: 0;
}

.device-card--pool .inline-section-subtitle {
    max-width: 42rem;
    font-size: 0.9rem;
}

.device-card--pool .device-header {
    grid-area: status;
    justify-content: flex-end;
    gap: 12px;
    min-height: 44px;
    padding-bottom: 0;
    border-bottom: 0;
}

.device-card--pool .device-name {
    font-size: clamp(1rem, 0.28vw + 0.96rem, 1.14rem);
}

.device-card--pool .device-metrics {
    grid-area: metrics;
    grid-template-columns: repeat(5, minmax(118px, 1fr));
    gap: 10px;
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-line);
}

.device-card--pool .device-metric {
    min-height: 64px;
    padding: 10px 12px 9px;
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 58%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-bg-alt) 54%, transparent);
}

.device-card--pool .device-metric-value {
    margin-top: 6px;
    font-size: clamp(1.08rem, 0.55vw + 0.94rem, 1.32rem);
}

.inline-section-head {
    display: grid;
    gap: 6px;
    padding-bottom: 6px;
}

.inline-section-eyebrow {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.inline-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 0.5vw + 1.08rem, 1.4rem);
    font-weight: 700;
    letter-spacing: 0;
}

.inline-section-subtitle {
    color: var(--color-text-soft);
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 48rem;
}

.device-controls--water {
    grid-template-columns: minmax(0, 1fr) minmax(80px, auto);
}

.device-card--pool .device-controls--pool {
    grid-area: controls;
    grid-template-columns: minmax(360px, 640px) minmax(240px, 300px);
    justify-content: space-between;
    align-items: start;
    gap: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--color-line);
}

.device-card--pool .device-controls--pool .control-group:first-child {
    padding-right: 8px;
}

.device-card--pool .device-controls--pool .slider-container {
    min-height: 44px;
}

.device-card--pool .device-controls--pool .form-select {
    min-width: 220px;
}

.control-group {
    display: grid;
    gap: 10px;
}

.control-label {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.comfort-control-hint {
    flex: 1 0 100%;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.device-controls-hint {
    grid-column: 1 / -1;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-solar-soft), var(--color-water-soft));
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 3px solid var(--color-bg);
    border-radius: 50%;
    background: var(--color-solar);
    box-shadow: 0 8px 24px var(--color-solar);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 3px solid var(--color-bg);
    border-radius: 50%;
    background: var(--color-solar);
    box-shadow: 0 8px 24px var(--color-solar);
    cursor: pointer;
}

.slider-value {
    min-width: 72px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.slider-track-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.slider-confirm-strip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    white-space: nowrap;
    background: var(--color-bg-alt);
    border: 1px solid color-mix(in srgb, var(--color-solar) 36%, var(--color-line));
    border-radius: 14px;
    color: var(--color-text);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-card);
}

.slider-confirm-strip--p0 { left: 11px; }
.slider-confirm-strip--p5 { left: calc(5% + 9.9px); }
.slider-confirm-strip--p10 { left: calc(10% + 8.8px); }
.slider-confirm-strip--p15 { left: calc(15% + 7.7px); }
.slider-confirm-strip--p20 { left: calc(20% + 6.6px); }
.slider-confirm-strip--p25 { left: calc(25% + 5.5px); }
.slider-confirm-strip--p30 { left: calc(30% + 4.4px); }
.slider-confirm-strip--p35 { left: calc(35% + 3.3px); }
.slider-confirm-strip--p40 { left: calc(40% + 2.2px); }
.slider-confirm-strip--p45 { left: calc(45% + 1.1px); }
.slider-confirm-strip--p50 { left: 50%; }
.slider-confirm-strip--p55 { left: calc(55% - 1.1px); }
.slider-confirm-strip--p60 { left: calc(60% - 2.2px); }
.slider-confirm-strip--p65 { left: calc(65% - 3.3px); }
.slider-confirm-strip--p70 { left: calc(70% - 4.4px); }
.slider-confirm-strip--p75 { left: calc(75% - 5.5px); }
.slider-confirm-strip--p80 { left: calc(80% - 6.6px); }
.slider-confirm-strip--p85 { left: calc(85% - 7.7px); }
.slider-confirm-strip--p90 { left: calc(90% - 8.8px); }
.slider-confirm-strip--p95 { left: calc(95% - 9.9px); }
.slider-confirm-strip--p100 { left: calc(100% - 11px); }

/* upward-pointing arrow */
.slider-confirm-strip::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 7px solid color-mix(in srgb, var(--color-solar) 36%, var(--color-line));
}

.slider-confirm-strip::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid var(--color-bg-alt);
}

.slider-confirm-enter-active,
.slider-confirm-leave-active {
    transition: opacity 120ms ease, transform 120ms ease;
}

.slider-confirm-enter-from,
.slider-confirm-leave-to {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
}

.slider-confirm-label {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-solar-text);
    font-variant-numeric: tabular-nums;
}

.slider-confirm-btn {
    border: 0;
    border-radius: 10px;
    /* 44px minimum touch target per WCAG / iOS HIG */
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 150ms ease;
    flex-shrink: 0;
}

.slider-confirm-btn:hover { opacity: 0.75; }

.slider-confirm-btn--cancel {
    background: var(--color-line);
    color: var(--color-text-muted);
}

.slider-confirm-btn--ok {
    background: var(--color-solar-soft);
    color: var(--color-solar-text);
}

/* Comfort controls paused (stale/cooldown telemetry) — one calm orange line, not
   a second banner; the controls themselves are disabled via :disabled. */
.comfort-paused-note {
    color: var(--color-warning-text);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-warning) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-warning) 22%, transparent);
}

.toggle-btn {
    position: relative;
    width: 58px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: var(--color-line-strong);
    cursor: pointer;
    transition: background-color 180ms ease;
}

.toggle-btn::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    transition: transform 180ms ease;
}

.toggle-btn.active {
    background: linear-gradient(90deg, var(--color-success), var(--color-pool));
}

.toggle-btn.active::after {
    transform: translateX(24px);
}

.source-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.source-badge--local {
    color: var(--color-success);
    background: var(--color-success-soft);
}

.source-badge--cloud {
    color: var(--color-water);
    background: var(--color-water-soft);
}


.settings-page {
    display: grid;
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
    --settings-muted: var(--color-text-soft);
}

.settings-page .page-header {
    align-items: center;
    animation: none;
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-line);
}

.settings-page .page-subtitle {
    margin-top: 6px;
    color: var(--settings-muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.settings-state-pill {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    color: var(--settings-muted);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.settings-state-pill--active,
.settings-state-pill--ok {
    border-color: var(--color-success-soft);
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.settings-state-pill--wait {
    border-color: var(--color-warning-soft);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
}

.settings-state-pill--warn {
    border-color: var(--color-error-soft);
    background: var(--color-error-soft);
    color: var(--color-error-text);
}

.settings-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
}

.settings-section--cache {
    grid-column: auto;
}

.settings-feature-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--color-line-strong);
    border-radius: 8px;
    background: var(--color-surface-strong);
    color: var(--color-text);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.settings-feature-link:hover {
    border-color: var(--color-water);
    background: var(--color-bg-alt);
}

.settings-block-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
    min-height: 0;
    padding: 0 2px;
}

.settings-block-eyebrow {
    color: var(--color-text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.settings-block-title {
    margin: 2px 0 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0;
}

.settings-block-subtitle {
    max-width: 680px;
    margin: 2px 0 0;
    color: var(--settings-muted);
    font-size: 0.76rem;
    line-height: 1.3;
}

.settings-block-meta {
    flex-shrink: 0;
    padding: 3px 8px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--settings-muted);
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}

.settings-page .settings-section {
    display: grid;
    gap: 10px;
    animation: none;
    margin-top: 0;
}

.settings-page .settings-section .card,
.settings-page .settings-home-row,
.settings-page .settings-home-card {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--color-card);
    box-shadow: none;
}

.settings-home-list {
    display: grid;
    gap: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface-strong);
}

.settings-home-row {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(280px, 1.15fr) auto;
    align-items: center;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid var(--color-line);
    border-radius: 0;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.settings-home-row:first-child {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.settings-home-row:last-child {
    border-bottom: 0;
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.settings-home-row-main {
    display: contents;
}

.settings-home-row:hover {
    background: var(--color-bg-alt);
}

.settings-home-row.active {
    background: color-mix(in srgb, var(--color-solar) 5%, var(--color-surface-strong));
    box-shadow: inset 3px 0 0 var(--color-solar);
}

.settings-home-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 10px;
    margin-bottom: 0;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.settings-home-card:hover {
    border-color: var(--color-line-strong);
    background: var(--color-bg-alt);
}

.settings-home-card.active {
    border-color: color-mix(in srgb, var(--color-solar) 42%, var(--color-line));
    background: color-mix(in srgb, var(--color-solar) 7%, var(--color-surface-strong));
    box-shadow: inset 2px 0 0 var(--color-solar);
}

.settings-page .btn-sm {
    min-height: 32px;
    padding: 0 11px;
    border-radius: 8px;
    font-size: 0.74rem;
}

.settings-page .home-card-actions .settings-state-pill {
    min-width: 72px;
    justify-content: center;
}

.settings-page .home-card-actions .btn-sm,
.settings-page .home-location-row .btn-sm {
    min-width: 108px;
}

.settings-page .home-location-row .btn-sm {
    padding-right: 8px;
    padding-left: 8px;
}

.settings-page :is(button, a, input, select):focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.home-card-info,
.home-card-actions,
.settings-service-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.home-card-info > div {
    min-width: 0;
}

.home-card-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.settings-service-header {
    justify-content: space-between;
    gap: 18px;
}

.settings-service-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
}

.settings-service-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-title--solar { color: var(--color-solar); }
.hero-title--pool { color: var(--color-pool); }
.hero-title--heatpump { color: var(--color-heatpump); }

/* Chained selector: success-styled feedback for elements that ALSO carry
 * .error-banner (the project's pattern of toggling success vs error via a
 * second class). Without the chained selector .error-banner appears later
 * in the stylesheet and wins on source-order, painting success messages red. */
.error-banner.message-success,
.message-success {
    border-color: var(--color-success-soft);
    background: var(--color-success-soft);
    color: var(--color-success);
}

.home-card-glyph {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-line);
    border-radius: 9px;
    background: var(--color-bg-soft);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0;
    flex-shrink: 0;
}

.settings-home-row.active .home-card-glyph,
.settings-home-card.active .home-card-glyph {
    border-color: color-mix(in srgb, var(--color-solar) 48%, var(--color-line));
    background: var(--color-solar-soft);
    color: var(--color-solar);
}

.home-card-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.home-card-title {
    font-weight: 700;
    font-size: 0.84rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-card-subtitle {
    color: var(--settings-muted, var(--color-text-muted));
    font-size: 0.69rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-card-subtitle .is-active {
    color: var(--color-solar);
}

.status-section-label {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 4px 0 0;
}

.status-section-label:first-child {
    padding-top: 0;
}

.status-section-label--chart-inset {
    padding: 12px 16px 0;
}

.status-section-label--center {
    flex: 1 1 0;
    text-align: center;
}

.home-location-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px 112px;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
    margin-left: 0;
    border-top: 1px solid transparent;
    min-width: 0;
}

.home-location-name {
    font-size: 0.7rem;
    color: var(--settings-muted, var(--color-text-muted));
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-location-name.has-location {
    color: var(--color-text);
}

.home-location-search-wrap {
    position: relative;
    min-width: 0;
}

.home-location-searching {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    padding: 4px 2px;
}

.home-location-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-bg-soft);
    border-radius: 14px;
    overflow: hidden;
    z-index: 50;
    max-height: 200px;
    overflow-y: auto;
}

.home-location-result {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--color-text);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.4;
}

.home-location-result:last-child {
    border-bottom: none;
}

.home-location-result:hover {
    background: transparent;
}

.unifi-site-picker-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}

.unifi-site-fetch-btn {
    align-self: stretch;
    white-space: nowrap;
}

.unifi-site-select-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}

.unifi-site-select-btn {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.unifi-site-dropdown-scrim {
    position: fixed;
    inset: 0;
    z-index: 19;
}

.unifi-site-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin-top: 4px;
}

.unifi-sites-error {
    color: var(--color-error-text);
    font-size: 0.8rem;
    margin-top: 4px;
}

.home-edit-row,
.settings-add-home,
.settings-card {
    display: grid;
    gap: 12px;
}

.settings-card {
    padding: 11px 12px;
    margin-bottom: 0;
}

.settings-page .settings-add-home-card {
    border-style: dashed;
    padding: 14px 16px;
    background: var(--color-card);
}

.home-edit-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
}

.settings-add-home {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.control-static {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
    color: var(--color-text-soft);
    font-size: 0.96rem;
    font-weight: 700;
}

.card {
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 66%, transparent);
    border-radius: 24px;
    background: var(--color-card);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        var(--shadow-soft);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ── Modal ─────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-shell-modal);
    /* Modal backdrop intentionally light blur — solid scrim handles isolation; stacks on always-visible mobile topbar */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: 24px;
}

.modal-dialog {
    background: var(--color-bg-deep);
    border: 1px solid var(--color-line-strong);
    border-radius: 24px;
    padding: 28px;
    width: 100%;
    max-width: min(440px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: rise-in 220ms ease both;
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.modal-service-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--color-line-strong);
    background: transparent;
    display: grid;
    place-items: center;
    color: var(--color-solar);
    flex-shrink: 0;
}
.modal-service-icon svg { width: 20px; height: 20px; }

.modal-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
}
.modal-subtitle {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 3px;
}

.modal-close {
    margin-left: auto;
    background: none;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color 150ms, color 150ms;
    flex-shrink: 0;
}
.modal-close:hover { border-color: var(--color-line-strong); color: var(--color-text-soft); }

.modal-fields { display: flex; flex-direction: column; gap: 14px; }
.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.settings-modal-dialog {
    max-width: min(420px, calc(100vw - 24px));
    gap: 16px;
    padding: 20px;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
}

.settings-modal-dialog .modal-header {
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-line);
}

.settings-modal-dialog .modal-service-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--color-bg-soft);
}

.settings-modal-dialog .modal-service-icon svg {
    width: 16px;
    height: 16px;
}

.settings-modal-dialog .modal-title {
    font-size: 0.98rem;
}

.settings-modal-dialog .modal-subtitle {
    color: var(--color-text-soft);
    font-size: 0.74rem;
    line-height: 1.35;
}

.settings-modal-dialog .modal-fields {
    gap: 12px;
}

.settings-modal-dialog .form-group {
    gap: 6px;
}

.settings-modal-dialog .form-label {
    color: var(--color-text-soft);
    font-size: 0.76rem;
}

.settings-modal-dialog .form-input,
.settings-modal-dialog .form-select {
    min-height: 40px;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--color-bg-alt);
    font-size: 0.84rem;
}

.settings-modal-dialog .modal-actions {
    padding-top: 2px;
}

.stale-banner {
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid rgba(var(--color-warning-rgb), 0.25);
    border-radius: 16px;
    background: rgba(var(--color-warning-rgb), 0.08);
    color: var(--color-warning-text);
    font-size: 0.9rem;
}

.stale-banner--compact {
    margin: 0 0 8px;
}

.stale-banner--mobile-inset {
    margin: 0 18px 8px;
}

.mob-ed-inset-block {
    margin: 0 18px 18px;
}

/* Cooldown / rate-limit hero banner. Calmer than .error-banner — the service
 * isn't broken, it's pausing on purpose. Sits above the metric grid with a
 * subtle amber accent matching the dark control-room aesthetic. */
.unavailable-hero {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid var(--color-warning-soft-strong);
    border-radius: var(--radius-xl);
    background: var(--color-warning-soft-faint);
    color: var(--color-warning-text);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.unavailable-hero-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0;
    color: var(--color-text);
}

.unavailable-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 0.85rem;
    line-height: 1.45;
}

.unavailable-hero-hint {
    color: var(--color-text-soft);
}

.unavailable-hero-countdown {
    color: var(--color-warning-text);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Narrow viewports (iPhone SE class) — keep the hero from eating the whole
 * screen. Match the tighter padding scale used by other mobile banners. */
@media (max-width: 480px) {
    .unavailable-hero {
        padding: 12px 14px;
        margin-bottom: 12px;
        /* Keep at xl (16px) on mobile too — the previous 18→12 step was visually
           jarring against neighboring panels. xl is gentle enough for iPhone SE. */
        border-radius: var(--radius-xl);
    }
    .unavailable-hero-title { font-size: 0.95rem; }
    .unavailable-hero-meta  { font-size: 0.8rem; gap: 4px 10px; }
}

.error-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--color-error-soft);
    border-radius: 16px;
    background: var(--color-error-soft);
    color: var(--color-error);
    line-height: 1.45;
}

.error-banner-retry {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--color-error);
    border-radius: 999px;
    background: transparent;
    color: var(--color-error);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.error-banner-retry:hover {
    background: var(--color-error);
    color: var(--color-bg);
}

.error-banner-retry:focus-visible {
    outline: 2px solid var(--color-error);
    outline-offset: 2px;
}

.empty-state {
    margin-top: 26px;
    padding: 38px 28px;
    border: 1px dashed var(--color-line-strong);
    border-radius: 28px;
    background: transparent;
    text-align: center;
}

.empty-state-icon {
    font-size: 2rem;
}

.empty-state-title {
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0;
}

.empty-state-text {
    max-width: 34rem;
    margin: 10px auto 0;
    color: var(--color-text-soft);
    line-height: 1.6;
}

.status-grid > *:nth-child(2),
.services-strip > *:nth-child(2),
.device-card:nth-of-type(2) {
    animation-delay: 80ms;
}

.status-grid > *:nth-child(3),
.services-strip > *:nth-child(3),
.device-card:nth-of-type(3) {
    animation-delay: 140ms;
}

.status-grid > *:nth-child(4),
.services-strip > *:nth-child(4),
.device-card:nth-of-type(4) {
    animation-delay: 180ms;
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes skeleton-shimmer {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .route-progress--active::before {
        width: 100%;
        transform: none;
    }

    .route-swap-enter-from,
    .route-swap-leave-to {
        transform: none;
    }
}

@media (max-width: 1380px) {
    .status-card {
        grid-column: span 6;
    }

    .device-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .device-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 860px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-freshness .last-updated,
    .section-freshness .hero-chip-stack {
        text-align: left;
    }

    .hero {
        min-height: 240px;
    }

    .hero-title {
        max-width: none;
    }

    .status-card {
        grid-column: span 12;
    }

    .device-metrics,
    .device-controls,
    .form-row {
        grid-template-columns: 1fr;
    }

    .fan-speed-control {
        width: 100%;
    }

    .fan-speed-segment {
        flex: 1;
        min-width: 0;
    }

    .settings-home-card,
    .home-card-info,
    .home-card-actions,
    .settings-service-header {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-page .settings-home-row .home-card-info {
        flex-direction: row;
        align-items: center;
    }

    .settings-page .settings-home-row .home-card-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .home-edit-row,
    .settings-add-home {
        grid-template-columns: 1fr;
    }
}


.pool-temp-range-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.pool-temp-range-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-soft);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pool-temp-range-btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-pool) 34%, var(--color-line-strong));
    color: var(--color-text);
}

.pool-temp-range-btn--active,
.pool-temp-range-btn--active:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-pool) 52%, var(--color-line-strong));
    background: color-mix(in srgb, var(--color-pool) 14%, transparent);
    color: var(--color-text);
}

.pool-temp-range-btn:disabled {
    cursor: default;
    opacity: 0.62;
}

.pool-temp-off-band {
    fill: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
}

.pool-temp-log-card {
    --pool-temp-log-columns:
        7px
        minmax(132px, 1fr)
        28px
        minmax(135px, 1.05fr)
        minmax(104px, 0.78fr)
        minmax(116px, 0.72fr)
        minmax(154px, 1.05fr)
        minmax(270px, 2.4fr);
    --pool-temp-log-gap: clamp(8px, 0.65vw, 14px);
    margin-top: 14px;
    padding: 14px 16px 16px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface-elevated) 76%, transparent);
    box-shadow: var(--shadow-card);
}

.pool-temp-log-card--shelly {
    --pool-temp-log-columns:
        7px
        minmax(118px, 0.9fr)
        28px
        minmax(118px, 0.8fr)
        minmax(198px, 1.08fr)
        minmax(74px, 0.42fr)
        minmax(250px, 2.25fr);
}

.pool-temp-log-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pool-temp-log-title {
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.pool-temp-log-head {
    display: grid;
    grid-template-columns: var(--pool-temp-log-columns);
    align-items: center;
    gap: var(--pool-temp-log-gap);
    padding: 0 12px 7px;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.pool-temp-log {
    display: grid;
    gap: 8px;
    max-height: 292px;
    padding-right: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.pool-temp-log-row {
    display: grid;
    grid-template-columns: var(--pool-temp-log-columns);
    align-items: center;
    gap: var(--pool-temp-log-gap);
    min-height: 52px;
    padding: 0 12px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-bg) 56%, transparent);
    color: var(--color-text-soft);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.35;
}

.pool-temp-log-row::before {
    content: "";
    grid-column: 1;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-pool);
}

.pool-temp-log-row--up::before { background: var(--color-error); }
.pool-temp-log-row--down::before { background: var(--color-pool); }
.pool-temp-log-row--on::before { background: var(--chart-solar); }
.pool-temp-log-row--off::before { background: var(--color-text-muted); }

.pool-temp-log-row--on {
    border-color: color-mix(in srgb, var(--chart-solar) 24%, var(--color-line));
    background: color-mix(in srgb, var(--chart-solar) 8%, var(--color-bg) 92%);
}

.pool-temp-log-row--off {
    border-color: color-mix(in srgb, var(--color-text-muted) 24%, var(--color-line));
    background: color-mix(in srgb, var(--color-text-muted) 8%, var(--color-bg) 92%);
}

.pool-temp-log-time {
    grid-column: 2;
    color: var(--color-text-muted);
    font-size: inherit;
    font-weight: 400;
    white-space: nowrap;
}

.pool-temp-log-head-time { grid-column: 2; }
.pool-temp-log-head-subject { grid-column: 4; }
.pool-temp-log-head-action { grid-column: 5; }
.pool-temp-log-head-value { grid-column: 6; }
.pool-temp-log-head-duration { grid-column: 7; }
.pool-temp-log-head-context { grid-column: 8; }

.pool-temp-log-card--shelly .pool-temp-log-head-context {
    grid-column: 7;
}

.pool-temp-log-subject,
.pool-temp-log-trend,
.pool-temp-log-action,
.pool-temp-log-value,
.pool-temp-log-duration {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pool-temp-log-trend {
    grid-column: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-line) 48%, transparent);
    color: var(--color-text-muted);
    font-size: 0.98rem;
    font-weight: 850;
}

.pool-temp-log-row--up .pool-temp-log-trend {
    color: var(--color-error);
}

.pool-temp-log-row--down .pool-temp-log-trend {
    color: var(--color-pool);
}

.pool-temp-log-row--on .pool-temp-log-trend {
    color: var(--chart-solar);
}

.pool-temp-log-row--off .pool-temp-log-trend {
    color: var(--color-text-muted);
}

.pool-temp-log-subject {
    grid-column: 4;
    color: var(--color-text);
    font-weight: 500;
}

.pool-temp-log-action {
    grid-column: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-width: 88px;
    padding: 5px 10px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-line) 34%, transparent);
    color: var(--color-text);
    font-size: 0.86rem;
    font-weight: 600;
}

.pool-temp-log-value {
    grid-column: 6;
    color: var(--color-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.pool-temp-log-row--up .pool-temp-log-action {
    border-color: color-mix(in srgb, var(--color-error) 30%, var(--color-line));
    background: color-mix(in srgb, var(--color-error) 10%, transparent);
    color: var(--color-error-text);
}

.pool-temp-log-row--down .pool-temp-log-action {
    border-color: color-mix(in srgb, var(--color-pool) 34%, var(--color-line));
    background: color-mix(in srgb, var(--color-pool) 12%, transparent);
    color: var(--color-pool);
}

.pool-temp-log-row--on .pool-temp-log-action {
    border-color: color-mix(in srgb, var(--chart-solar) 32%, var(--color-line));
    background: color-mix(in srgb, var(--chart-solar) 11%, transparent);
}

.pool-temp-log-row--off .pool-temp-log-action {
    color: var(--color-text-muted);
}

.pool-temp-log-duration {
    grid-column: 7;
    color: var(--color-text);
    font-weight: 500;
}

.pool-temp-log-context {
    grid-column: 8;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    overflow-wrap: anywhere;
    white-space: normal;
}

.pool-temp-log-card--shelly .pool-temp-log-context {
    grid-column: 7;
}

@media (max-width: 760px) {
    .pool-temp-log-card {
        margin-top: 10px;
        padding: 12px;
    }

    .pool-temp-log-card-header {
        margin-bottom: 8px;
    }

    .pool-temp-log-head {
        display: none;
    }

    .pool-temp-log {
        max-height: 310px;
    }

    .pool-temp-log-row {
        grid-template-columns: 7px 28px minmax(0, 1fr) max-content;
        grid-template-rows: auto auto auto auto;
        align-items: start;
        min-height: 78px;
        height: auto;
        padding: 9px 10px;
        row-gap: 5px;
        column-gap: 8px;
        font-size: 0.82rem;
    }

    .pool-temp-log-row::before {
        grid-row: 1 / span 4;
        margin-top: 4px;
    }

    .pool-temp-log-trend {
        grid-column: 2;
        grid-row: 1 / span 4;
        align-self: center;
    }

    .pool-temp-log-time {
        grid-column: 3;
        grid-row: 1;
    }

    .pool-temp-log-duration {
        grid-column: 4;
        grid-row: 1;
    }

    .pool-temp-log-subject {
        grid-column: 3;
        grid-row: 2;
    }

    .pool-temp-log-value {
        grid-column: 4;
        grid-row: 2;
    }

    .pool-temp-log-action {
        grid-column: 3 / 5;
        grid-row: 3;
    }

    .pool-temp-log-context {
        display: block;
        grid-column: 3 / 5;
        grid-row: 4;
    }

    .pool-temp-log-card--shelly .pool-temp-log-context {
        grid-column: 3 / 5;
    }
}


@media (max-width: 640px) {
    html {
        font-size: 15px;
    }

    /* Prevent iOS auto-zoom on input focus — triggers when font-size < 16px */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 1rem;
    }

    .hero {
        min-height: 0;
        margin-bottom: 18px;
        padding: 20px 18px 18px;
        border-radius: 24px;
    }

    .hero-eyebrow {
        font-size: 0.66rem;
        letter-spacing: 0.16em;
    }

    .hero-title {
        margin-top: 10px;
        font-size: clamp(2rem, 10vw, 2.65rem);
        line-height: 0.96;
    }

    .hero-subtitle {
        margin-top: 10px;
        font-size: 0.92rem;
        line-height: 1.45;
    }

    /* iOS zooms into inputs <16px on focus — keep at threshold */
    .form-input,
    .form-select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"] {
        font-size: 16px;
    }

    .hero,
    .device-card,
    .settings-section .card,
    .settings-home-card,
    .empty-state {
        border-radius: 24px;
    }

    .services-section,
    .settings-section {
        margin-top: 20px;
    }

    .section-header {
        gap: 4px;
        margin-bottom: 12px;
    }

    .section-title {
        font-size: 1.04rem;
    }

    .section-subtitle {
        font-size: 0.86rem;
        line-height: 1.4;
    }

    .status-grid {
        gap: 10px;
        margin-bottom: 12px;
    }

    .status-section-label {
        padding: 2px 2px 0;
        font-size: 0.68rem;
        letter-spacing: 0.12em;
    }

    .status-card {
        gap: 12px;
        min-height: 0;
        padding: 16px;
        border-radius: 22px;
    }

    .status-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .status-icon svg {
        width: 18px;
        height: 18px;
    }

    .status-label {
        font-size: 0.66rem;
    }

    .status-value {
        font-size: clamp(1.2rem, 5.4vw, 1.6rem);
    }

    .status-detail {
        font-size: 0.84rem;
        line-height: 1.35;
    }

    .status-updated {
        display: none;
    }

    .hero-chips {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 16px;
    }

    .hero-chip {
        min-width: 0;
        padding: 10px 11px;
        border-radius: 14px;
    }

    .hero-chip-value,
    .last-updated {
        font-size: 0.82rem;
    }


    .slider-container {
        flex-direction: column;
        align-items: stretch;
    }

    .slider-value {
        text-align: left;
        min-width: 0;
        width: auto;
    }

}

/* ── Eyebrow (shared) ─────────────────────────────────────
   Canonical eyebrow treatment. `.eyebrow` is the reusable utility — prefer it
   for new eyebrows over a bespoke `.X-eyebrow` rule. `.page-eyebrow` is the
   long-standing alias kept for existing markup; both resolve to the same tokens. */

.eyebrow,
.page-eyebrow {
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* /css/unifi.css */
/* UniFi page-domain styles.
 * Shared hero, chart, status, and mobile editorial primitives keep their
 * permanent owners; this file owns only UniFi-specific device presentation.
 */

.unifi-device-list {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    background: var(--color-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-line);
}

.unifi-device-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-line);
}

.unifi-device-row:last-child {
    border-bottom: none;
}

.unifi-device-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.unifi-device-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unifi-device-model {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.unifi-device-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.unifi-device-uptime {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.unifi-firmware-badge {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(var(--chart-solar-rgb), 0.15);
    color: rgb(var(--chart-solar-rgb));
    border: 1px solid rgba(var(--chart-solar-rgb), 0.3);
    border-radius: 4px;
    padding: 2px 6px;
}

.unifi-badge {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 2px 6px;
    flex-shrink: 0;
}

.unifi-badge--wifi {
    background: rgba(var(--color-info-rgb), 0.15);
    color: rgb(var(--color-info-light-rgb));
    border: 1px solid rgba(var(--color-info-rgb), 0.3);
}

.unifi-badge--lan {
    background: rgba(var(--color-success-bright-rgb), 0.15);
    color: rgb(var(--color-success-bright-rgb));
    border: 1px solid rgba(var(--color-success-bright-rgb), 0.3);
}

.unifi-badge--vpn {
    background: rgba(var(--color-heatpump-light-rgb), 0.15);
    color: rgb(var(--color-heatpump-light-rgb));
    border: 1px solid rgba(var(--color-heatpump-light-rgb), 0.3);
}

@media (max-width: 640px) {
    .unifi-device-row {
        align-items: flex-start;
    }

    .unifi-device-meta {
        flex-direction: column;
        align-items: flex-end;
    }
}

.unifi-error {
    grid-column: 1 / -1;
    padding: 24px 16px;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

@media (max-width: 1100px) {
    .unifi-mobile {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 16px 16px 32px;
    }

    .unifi-mobile-device-list {
        display: flex;
        flex-direction: column;
        background: var(--color-card);
        border: 1px solid var(--color-line);
        border-radius: 12px;
        overflow: hidden;
    }

    .unifi-mobile-group-header {
        padding: 6px 14px;
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        background: var(--color-bg-soft);
        border-bottom: 1px solid var(--color-line);
    }

    .unifi-mobile-group-header--offline {
        color: var(--color-text-faint);
    }

    .unifi-mobile-device-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--color-line-strong);
    }

    .unifi-mobile-device-row:last-child {
        border-bottom: none;
    }

    .unifi-mobile-device-row--offline .unifi-mobile-device-name {
        opacity: 0.45;
    }

    .unifi-mobile-device-row--offline .unifi-mobile-device-detail {
        color: var(--color-text-muted);
    }

    .unifi-mobile-device-info {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .unifi-mobile-device-name {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--color-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .unifi-mobile-device-detail {
        font-size: 0.69rem;
        color: var(--color-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .unifi-mobile-device-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .unifi-mobile-fw-badge {
        font-size: 0.625rem;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 4px;
        background: var(--color-solar-soft);
        color: var(--color-solar-text);
        letter-spacing: 0.02em;
    }
}

/* /css/shelly.css */
/* Permanent owner: Shelly device, component, control, and pool-integration presentation. */

.shelly-device-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.shelly-flow-message {
    margin-bottom: 14px;
}

.shelly-device-delete {
    min-height: 32px;
    padding: 0 10px;
    font-size: 0.78rem;
}

.shelly-device-expand {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.shelly-device-expand:hover {
    border-color: var(--color-line-strong);
    background: var(--color-bg-alt);
}

.shelly-device-tabs {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    background: var(--color-bg-soft);
}

.shelly-device-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.shelly-device-tab:hover {
    color: var(--color-text);
}

.shelly-device-tab--active {
    border-color: var(--color-line);
    background: var(--color-surface-strong);
    color: var(--color-text);
    box-shadow: var(--shadow-soft);
}

.shelly-device-tab strong {
    min-width: 1.55rem;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: var(--color-line);
    color: var(--color-text-soft);
    font-size: 0.72rem;
    line-height: 1.25;
    text-align: center;
}

.shelly-device-tab--active strong {
    background: var(--color-energy-soft);
    color: var(--color-energy-text);
}

.shelly-device-list {
    display: grid;
    gap: 18px;
}

.device-card--muted {
    background: var(--color-surface);
}

.device-card--shelly .device-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.device-card--shelly .device-name {
    overflow-wrap: anywhere;
}

.device-card--shelly .device-subtitle {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.shelly-device-header {
    align-items: flex-start;
    cursor: pointer;
    outline: none;
    border-radius: 10px;
}

.shelly-device-header:focus-visible {
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.shelly-device-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.shelly-device-chip-row {
    display: none;
}

@media (min-width: 1101px) {
    .device-card--shelly {
        gap: 12px;
        padding: 14px 16px;
        border-radius: 20px;
    }

    .device-card--shelly .shelly-device-header {
        align-items: center;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .device-card--shelly .shelly-device-actions {
        align-items: center;
        gap: 8px;
        max-width: 70%;
    }

    .device-card--shelly .shelly-device-chip-row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
    }

    .shelly-device-chip {
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
        min-height: 30px;
        padding: 0 10px;
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 58%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--color-bg-alt) 54%, transparent);
        color: var(--color-text-soft);
        font-size: 0.76rem;
        white-space: nowrap;
    }

    .shelly-device-chip span {
        color: var(--color-text-muted);
    }

    .shelly-device-chip strong {
        color: var(--color-text);
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    .device-card--shelly .device-metrics--shelly {
        gap: 10px;
        padding-top: 12px;
        border-top: 1px solid var(--color-line);
    }

    .device-card--shelly .device-metrics--shelly .device-metric {
        min-height: 58px;
        padding: 10px 12px 9px;
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 58%, transparent);
        border-radius: 14px;
        background: color-mix(in srgb, var(--color-bg-alt) 50%, transparent);
    }

    .device-card--shelly .device-metrics--shelly .device-metric-value {
        margin-top: 5px;
        font-size: clamp(1rem, 0.48vw + 0.9rem, 1.2rem);
    }

    .device-card--shelly .shelly-component {
        min-height: 42px;
        padding: 8px 10px;
    }
}

.shelly-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 8px;
    border: 1px solid var(--color-line);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.shelly-badge--online {
    border-color: var(--color-success-soft);
    background: var(--color-success-soft);
    color: var(--color-success);
}

.shelly-badge--warn {
    border-color: var(--color-warning-soft);
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.shelly-badge--offline {
    border-color: var(--color-warning-soft);
    background: transparent;
    color: var(--color-warning);
}

.device-metrics--shelly {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shelly-components {
    display: grid;
    gap: 8px;
}

.shelly-component {
    display: grid;
    gap: 10px;
    min-height: 48px;
    padding: 9px 10px;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: var(--color-card);
}

.shelly-component-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.shelly-component--active {
    border-color: var(--color-success-soft);
}

.shelly-component--meter {
    border-color: var(--color-water-soft);
}

.shelly-component--script {
    border-color: var(--color-line-strong);
}

.shelly-component--script .shelly-component-icon {
    background: var(--color-energy-soft);
    color: var(--color-energy);
}

.shelly-component--offline {
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.shelly-component-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-soft);
    flex-shrink: 0;
}

.shelly-component-icon svg {
    width: 18px;
    height: 18px;
}

.shelly-component-main {
    min-width: 0;
    display: grid;
    gap: 2px;
    flex: 1;
}

.shelly-component-name {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shelly-component-main strong {
    color: var(--color-text);
    font-size: 0.95rem;
}

.shelly-component-energy {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.shelly-component-details,
.shelly-component-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 42px;
}

.shelly-component-details span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-surface);
    font-size: 0.75rem;
}

.shelly-component-details em {
    color: var(--color-text-muted);
    font-style: normal;
}

.shelly-component-details strong {
    color: var(--color-text);
    font-weight: 700;
}

.shelly-component-controls {
    padding-top: 2px;
}

.shelly-component-controls .btn.active {
    border-color: var(--color-success-soft);
    color: var(--color-success);
}

.pool-shelly-components {
    margin-bottom: 18px;
}

.pool-shelly-icon {
    color: var(--color-pool);
}

.pool-shelly-logic-card {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-card);
}

.pool-shelly-switch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pool-shelly-switch-tile {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 88px;
    padding: 11px 12px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface) 80%, transparent);
    color: var(--color-text-soft);
}

.pool-shelly-switch-tile::after {
    content: "";
    position: absolute;
    top: 11px;
    right: 11px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    opacity: 0.55;
}

.pool-shelly-switch-tile--active {
    border-color: color-mix(in srgb, var(--color-pool) 48%, var(--color-line-strong));
    background: color-mix(in srgb, var(--color-pool) 12%, var(--color-bg-alt));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-pool) 18%, transparent);
}

.pool-shelly-switch-tile--active::after {
    background: var(--color-pool);
    opacity: 1;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-pool) 16%, transparent);
}

.pool-shelly-switch-icon,
.pool-shelly-summary-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-pool) 12%, var(--color-surface));
    color: var(--color-pool);
    flex-shrink: 0;
}

.pool-shelly-switch-icon svg,
.pool-shelly-summary-icon svg {
    width: 19px;
    height: 19px;
}

.pool-shelly-switch-copy,
.pool-shelly-summary-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.pool-shelly-switch-label,
.pool-shelly-summary-copy span {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.pool-shelly-switch-copy strong,
.pool-shelly-summary-copy strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 0.98rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pool-shelly-switch-copy em {
    overflow: hidden;
    color: var(--color-text-soft);
    font-size: 0.78rem;
    font-style: normal;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pool-shelly-summary-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pool-shelly-summary-item {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px 14px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-pool) 10%, transparent), transparent 48%),
        color-mix(in srgb, var(--color-bg) 76%, transparent);
    color: inherit;
    text-align: left;
}

.pool-shelly-summary-item::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: color-mix(in srgb, var(--color-text-muted) 58%, transparent);
}

.pool-shelly-summary-item--active {
    border-color: color-mix(in srgb, var(--color-pool) 42%, var(--color-line-strong));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-pool) 16%, transparent), transparent 54%),
        color-mix(in srgb, var(--color-bg) 68%, transparent);
}

.pool-shelly-summary-item--active::before {
    background: var(--color-pool);
    box-shadow: 0 0 18px color-mix(in srgb, var(--color-pool) 44%, transparent);
}

.pool-shelly-summary-item--output .pool-shelly-summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-pool) 18%, var(--color-surface));
}

.pool-shelly-summary-item--script .pool-shelly-summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-energy) 18%, var(--color-surface));
    color: var(--color-energy);
}

.pool-shelly-summary-meta {
    overflow: hidden;
    color: var(--color-text-soft);
    font-size: 0.78rem;
    font-style: normal;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pool-shelly-summary-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg-soft) 72%, transparent);
    color: var(--color-text-soft);
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.pool-shelly-summary-item--active .pool-shelly-summary-state {
    border-color: color-mix(in srgb, var(--color-pool) 38%, var(--color-line-strong));
    background: color-mix(in srgb, var(--color-pool) 13%, transparent);
    color: var(--color-pool);
}

.shelly-control-field {
    display: inline-grid;
    grid-template-columns: auto minmax(100px, 150px);
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.shelly-control-field input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

.shelly-control-field input[type="number"] {
    width: 82px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    padding: 4px 6px;
}

.shelly-device-empty {
    padding: 14px;
    border: 1px dashed var(--color-line);
    border-radius: 12px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

@media (max-width: 640px) {
    .shelly-device-header,
    .shelly-device-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .shelly-device-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .shelly-device-tab {
        justify-content: center;
    }

    .device-metrics--shelly {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shelly-component-details,
    .shelly-component-controls {
        padding-left: 0;
    }

    .pool-shelly-logic-card {
        padding: 10px;
    }

    .pool-shelly-switch-grid,
    .pool-shelly-summary-strip {
        grid-template-columns: 1fr;
    }

    .pool-shelly-switch-tile {
        min-height: 72px;
        grid-template-columns: 34px minmax(0, 1fr);
        padding: 10px;
    }

    .pool-shelly-switch-icon,
    .pool-shelly-summary-icon {
        width: 34px;
        height: 34px;
    }

    .pool-shelly-summary-item {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        min-height: 66px;
        padding: 10px;
    }

    .pool-shelly-summary-item--output .pool-shelly-summary-icon,
    .pool-shelly-summary-item--script .pool-shelly-summary-icon {
        width: 34px;
        height: 34px;
    }

    .shelly-control-field {
        grid-template-columns: 1fr;
        align-items: stretch;
        width: 100%;
        padding: 8px;
    }
}



/* /css/runtime.css */
/* Permanent owner: Application initialization and offline-state presentation. */

/* ── App init loader ──────────────────────────────────── */

.app-boot-fallback {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
}

.app-boot-card {
    width: min(100%, 420px);
    padding: 28px;
    border: 1px solid var(--color-line-strong);
    border-radius: 22px;
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-bg) 6%);
    box-shadow: var(--shadow-panel);
}

.app-boot-brand {
    margin-bottom: 18px;
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.app-boot-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-soft);
    font-size: 0.9rem;
}

.app-boot-loading[hidden],
.app-boot-recovery[hidden] {
    display: none;
}

.app-boot-recovery h1 {
    margin: 0 0 10px;
    color: var(--color-text);
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    line-height: 1.1;
}

.app-boot-recovery p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

.app-boot-reload {
    width: 100%;
    min-height: 44px;
    margin-top: 20px;
    border: 0;
    border-radius: 12px;
    background: var(--color-solar);
    color: var(--color-on-accent);
    font-weight: 750;
    cursor: pointer;
}

.app-boot-reload:hover {
    filter: brightness(0.92);
}

.app-boot-reload:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-solar) 40%, transparent);
    outline-offset: 3px;
}

.app-boot-details {
    margin-top: 16px;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.app-boot-details code {
    display: block;
    margin-top: 8px;
    padding: 10px;
    border-radius: 10px;
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.app-init-loader {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-init-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-solar);
    /* Bounded iteration count — CLAUDE.md prohibits continuous idle animations.
       8 iterations × 1.2s ≈ 9.6s gives the app plenty of time to finish booting
       on a cold cache; if init takes longer, the dot quietly settles rather than
       pulsing forever. */
    animation: app-init-pulse 1.2s ease-in-out 8;
}

@keyframes app-init-pulse {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50%       { opacity: 1;   transform: scale(1.2); }
}

/* ── Offline page ─────────────────────────────────────── */

.offline-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.offline-content {
    max-width: 400px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}



/* /css/account-admin.css */
/* Permanent owner: Account navigation, users, audit, profile, access, and update-notice surfaces. */

/* ── Sidebar Account Block ────────────────────────────── */

.sidebar-account {
    padding: 10px;
    margin-top: auto;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
}

.sidebar-account-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-account-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--color-solar);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 11px;
    color: var(--color-on-accent);
    flex-shrink: 0;
}

.sidebar-account-info {
    min-width: 0;
}

.sidebar-account-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.sidebar-account-role {
    font-size: 12px;
    color: var(--color-text-muted);
}

.sidebar-account-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    padding-left: 0;
}

.sidebar-account-link {
    font-size: 13px;
    color: var(--color-text-soft);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.sidebar-account-link:hover {
    color: var(--color-text);
}

.sidebar-account-dot {
    color: var(--color-line-strong);
}

.sidebar-logout-error,
.mob-ed-logout-error {
    margin-top: 8px;
    padding: 9px 11px;
    border: 1px solid var(--color-error);
    border-radius: var(--radius-sm);
    background: var(--color-error-soft);
    color: var(--color-error);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

/* ── Users Page ───────────────────────────────────────── */

.users-layout {
    display: grid;
    grid-template-columns: 1fr minmax(0, 340px);
    gap: 24px;
    margin-top: 24px;
    max-width: 100%;
}

@media (max-width: 1100px) {
    .users-layout {
        grid-template-columns: 1fr;
    }
}

.users-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-card);
}

.users-overview-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 18px;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 70%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-card) 84%, var(--color-bg-alt));
}

.users-overview-card {
    position: relative;
    min-width: 0;
    padding: 10px 12px;
    border-radius: calc(var(--radius-sm) - 4px);
    background: transparent;
}

.users-overview-card + .users-overview-card::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 1px;
    background: var(--color-line);
}

.users-overview-card span {
    display: block;
    color: var(--color-text-faint);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.users-overview-card strong {
    display: block;
    margin-top: 5px;
    color: var(--color-text);
    font-size: 1.08rem;
    font-weight: 750;
    line-height: 1.12;
}

.users-overview-card em {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-style: normal;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-overview-card--attention {
    background: color-mix(in srgb, var(--color-warning-soft) 18%, transparent);
}

.user-row {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-line);
    border-radius: 0;
    padding: 15px 16px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background-color 0.15s;
}

.user-row:last-child {
    border-bottom: 0;
}

.user-row:hover,
.user-row.selected {
    background: color-mix(in srgb, var(--color-water-soft) 58%, transparent);
}

.user-row-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.user-row-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.user-row-status {
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    padding: 2px 8px;
}

.user-row-status.active {
    color: var(--color-success);
    background: var(--color-success-soft);
}

.user-row-status.inactive {
    color: var(--color-text-muted);
    background: var(--color-bg-soft);
}

.user-row-status.never {
    color: var(--color-warning-text);
    background: var(--color-warning-soft);
}

.user-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.user-row-dot {
    color: var(--color-line-strong);
}

.user-row-role.admin {
    color: var(--color-water);
}

.user-row-role.operator {
    color: var(--color-solar-text);
}

.user-row-role.viewer {
    color: var(--color-text-muted);
}

.users-detail {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    align-self: start;
}

.users-detail-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 20px;
}

.detail-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.detail-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.detail-value {
    font-size: 15px;
    color: var(--color-text);
}

.detail-role.admin {
    color: var(--color-water);
}

.detail-role.operator {
    color: var(--color-solar-text);
}

.detail-role.viewer {
    color: var(--color-text-muted);
}

.detail-mono {
    font-variant-numeric: tabular-nums;
}

.detail-sub {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.detail-input {
    padding: 6px 10px;
    /* ≥16px to avoid iOS Safari focus-zoom. */
    font-size: 16px;
    height: auto;
    width: 100%;
}

.detail-field-save {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.detail-field-save .btn-primary {
    width: 100%;
}

.detail-profile-feedback {
    font-size: 12px;
}

.detail-profile-error {
    color: var(--color-error);
}

.detail-profile-success {
    color: var(--color-success);
}

.detail-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-message {
    margin-top: 16px;
    font-size: 13px;
    color: var(--color-text-soft);
    padding: 10px 14px;
    background: var(--color-surface-strong);
    border-radius: var(--radius-xs);
}

.detail-inline-form {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.detail-inline-form .login-input {
    flex: 1;
    padding: 8px 12px;
    /* ≥16px to avoid iOS Safari focus-zoom. */
    font-size: 16px;
}

/* Primary call-to-action — the confident amber treatment proven on the login
   button, unified here so every primary action reads with brand conviction
   (replaced the muddy solar->water and washed water-soft->heatpump-soft
   gradients that previously left in-app CTAs looking secondary). */
.btn-primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-solar) 92%, #ffffff), var(--color-solar));
    border: 1px solid color-mix(in srgb, var(--color-solar) 70%, var(--color-line));
    border-radius: var(--radius-xs);
    padding: 10px 18px;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-shell-900);
    cursor: pointer;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-solar) 22%, transparent);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary.btn-sm {
    padding: 8px 14px;
    font-size: 13px;
}

.btn-secondary {
    background: var(--color-surface-strong);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xs);
    padding: 11px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-soft);
    cursor: pointer;
}

.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger {
    color: var(--color-error);
    border-color: var(--color-error-soft);
}

.create-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.create-error {
    background: var(--color-error-soft);
    border: 1px solid var(--color-error-soft);
    border-radius: var(--radius-xs);
    padding: 12px 16px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--color-error);
}

.create-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.create-actions .btn-secondary,
.create-actions .btn-primary {
    flex: 1;
}

.users-loading,
.users-error {
    padding: 24px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

.delete-confirm {
    background: var(--color-error-soft);
    border: 1px solid var(--color-error-soft);
    border-radius: var(--radius-xs);
    padding: 14px 16px;
}

/* Audit log */
.audit-page {
    width: min(100%, 1180px);
}

.users-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.users-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}
/* ── Audit tabs ───────────────────────────────────────────────────── */
.audit-hero {
    align-items: flex-start;
    gap: 24px;
}
.audit-scope-card {
    width: min(340px, 100%);
    padding: 14px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
}
.audit-scope-kicker {
    display: block;
    margin-bottom: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}
.audit-scope-name {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--color-text);
}
.audit-scope-detail {
    margin-top: 4px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.audit-tabs {
    display: flex;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    margin-bottom: 16px;
}
.audit-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: none;
    border: none;
    border-radius: var(--radius-xs);
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;
    white-space: nowrap;
}
.audit-tab:hover {
    color: var(--color-text-soft);
    background: var(--color-card);
}
.audit-tab:focus-visible {
    outline: 2px solid var(--color-focus-ring, var(--color-text-muted));
    outline-offset: 2px;
}
.audit-tab--active {
    color: var(--color-text);
    background: var(--color-card);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 10%, transparent);
}
.audit-tab span {
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}
.audit-status-strip {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(150px, 0.8fr) minmax(190px, 1fr);
    gap: 0;
    margin: 0 0 14px;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 70%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-card) 84%, var(--color-bg-alt));
}
.audit-status-item {
    position: relative;
    min-width: 0;
    padding: 10px 12px;
    border-radius: calc(var(--radius-sm) - 4px);
    background: transparent;
}
.audit-status-item + .audit-status-item::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 1px;
    background: var(--color-line);
}
.audit-status-item--attention {
    background: color-mix(in srgb, var(--color-warning-soft) 18%, transparent);
}
.audit-status-item span {
    display: block;
    color: var(--color-text-faint);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.audit-status-item strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audit-status-item em {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-style: normal;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audit-tab-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.audit-toolbar-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.audit-toolbar-summary span {
    color: var(--color-text);
    font-size: 0.86rem;
    font-weight: 700;
}
.audit-toolbar-summary small {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audit-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.audit-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--color-text-muted);
}
.audit-filter-toggle--active {
    border-color: color-mix(in srgb, var(--color-solar) 34%, var(--color-line-strong));
    background: color-mix(in srgb, var(--color-solar-soft) 42%, transparent);
    color: var(--color-text);
}
.audit-filter-toggle-count {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    place-items: center;
    border-radius: 999px;
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}
.audit-filters--advanced {
    margin: -2px 0 14px;
    padding: 8px 0 2px;
    border-top: 1px solid var(--color-line);
}
.audit-log-wrap {
    background: var(--color-card);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}
.audit-log-wrap--feed {
    overflow: hidden;
}
.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.audit-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-faint);
    border-bottom: 1px solid var(--color-line);
}
.audit-table td {
    padding: 9px 14px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-line);
}
.audit-table tr:last-child td { border-bottom: none; }
.audit-table tr:hover td { background: var(--color-bg-soft); }
.audit-ts { white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit-user { font-weight: 500; color: var(--color-text); }
.audit-ip { font-family: var(--font-mono); font-size: 0.78rem; }
.audit-meta { font-size: 0.78rem; color: var(--color-text-soft); }
.audit-event {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 99px;
    font-size: 0.69rem;
    font-weight: 600;
}
.audit-event--ok   { background: var(--color-success-soft); color: var(--color-success-text); }
.audit-event--warn { background: var(--color-error-soft); color: var(--color-error-text); }
.audit-event--info { background: var(--color-solar-soft); color: var(--color-solar-text); }
/* Caution tier (orange) — notable-but-not-a-failure events (key rotation,
   safe-revert) read as caution, not the alarm-red reserved for real faults. */
.audit-event--caution { background: var(--color-warning-soft); color: var(--color-warning-text); }
.audit-feed {
    display: flex;
    flex-direction: column;
}
.audit-feed-date {
    padding: 9px 16px 7px;
    border-bottom: 1px solid var(--color-line);
    background: color-mix(in srgb, var(--color-bg-alt) 72%, transparent);
    color: var(--color-text-faint);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.audit-feed-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 54px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--color-line);
}
.audit-feed-row:last-child {
    border-bottom: none;
}
.audit-feed-row:hover {
    background: var(--color-bg-soft);
}
.audit-feed-row--cluster {
    background: color-mix(in srgb, var(--color-solar-soft) 42%, var(--color-card));
}
.audit-feed-row--routine {
    background: transparent;
}
.audit-feed-row--routine .audit-event {
    border: 1px solid var(--color-line);
    background: transparent;
    color: var(--color-text-muted);
}
.audit-feed-row--routine .audit-feed-title {
    color: var(--color-text-soft);
    font-weight: 650;
}
.audit-feed-row--routine .audit-feed-muted,
.audit-feed-row--routine .audit-feed-service {
    color: var(--color-text-faint);
}
.audit-feed-row--cluster-head {
    min-height: auto;
    padding-block: 8px;
    background: var(--color-bg-alt);
}
.audit-feed-row--child {
    padding-left: 28px;
}
.audit-feed-time {
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.audit-feed-main {
    min-width: 0;
}
.audit-feed-topline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 2px;
}
.audit-feed-title {
    overflow: hidden;
    color: var(--color-text);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audit-feed-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 0.74rem;
    line-height: 1.35;
}
.audit-feed-meta span {
    min-width: 0;
}
.audit-feed-muted,
.audit-feed-service {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audit-feed-service {
    color: var(--color-text-soft);
}
.audit-feed-action {
    justify-self: end;
}
.audit-feed-row--auth-line,
.audit-feed-row--action-line {
    grid-template-columns: minmax(128px, 160px) minmax(0, 1fr);
    gap: 14px;
    min-height: 42px;
    padding-block: 7px;
}
.audit-feed-row--auth-line.audit-feed-row--cluster {
    grid-template-columns: minmax(128px, 160px) minmax(0, 1fr) auto;
}
.audit-feed-row--auth-line.audit-feed-row--cluster-head {
    grid-template-columns: minmax(0, 1fr) auto;
}
.audit-feed-row--auth-line .audit-feed-time,
.audit-feed-row--action-line .audit-feed-time {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.audit-auth-line,
.audit-action-line {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    white-space: nowrap;
}
.audit-auth-line .audit-event,
.audit-auth-line .audit-line-sep {
    flex: 0 0 auto;
}
.audit-action-line .audit-event,
.audit-action-line .audit-action-sep,
.audit-action-line .audit-action-user {
    flex: 0 0 auto;
}
.audit-action-line .audit-feed-service,
.audit-action-line .audit-feed-muted {
    flex: 0 1 auto;
    max-width: 160px;
}
.audit-line-sep,
.audit-action-sep {
    color: var(--color-text-faint);
}
.audit-auth-user,
.audit-auth-ip,
.audit-auth-context,
.audit-action-device,
.audit-action-detail {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audit-auth-user {
    flex: 0 1 220px;
    color: var(--color-text);
    font-size: 0.86rem;
    font-weight: 750;
}
.audit-auth-ip {
    flex: 0 1 170px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}
.audit-auth-context {
    flex: 1 1 auto;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 550;
}
.audit-action-device {
    flex: 0 1 220px;
    color: var(--color-text);
    font-size: 0.86rem;
    font-weight: 750;
}
.audit-action-detail {
    flex: 1 1 auto;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 550;
}
.audit-action-user {
    color: var(--color-text-soft);
    font-size: 0.76rem;
    font-weight: 650;
}
.audit-empty {
    padding: 24px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.audit-empty--error { color: var(--color-error); }

.audit-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.audit-filter-input,
.audit-filter-select {
    height: 34px;
    padding: 0 10px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-xs);
    color: var(--color-text);
    font-size: 0.82rem;
    outline: none;
    transition: border-color 120ms ease;
}
.audit-filter-input:focus-visible,
.audit-filter-select:focus-visible {
    border-color: var(--color-focus-ring, var(--color-text-muted));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-focus-ring, var(--color-text-muted)) 35%, transparent);
}
.audit-filter-input { width: 150px; }
.audit-filter-select { min-width: 170px; }

.audit-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px;
    border-top: 1px solid var(--color-line);
}
.audit-page-btn {
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-line-strong);
    background: var(--color-bg-alt);
    color: var(--color-text-soft);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease;
}
.audit-page-btn:disabled { opacity: 0.35; cursor: default; }
.audit-page-btn:not(:disabled):hover { background: var(--color-bg-soft); }
.audit-page-info { font-size: 0.82rem; color: var(--color-text-muted); }

@media (max-width: 860px) {
    .audit-scope-card {
        width: 100%;
    }
    .audit-status-strip {
        grid-template-columns: 1fr;
    }
    .audit-status-item + .audit-status-item::before {
        top: 0;
        right: 12px;
        bottom: auto;
        left: 12px;
        width: auto;
        height: 1px;
    }
    .audit-feed-row {
        grid-template-columns: 68px minmax(0, 1fr);
    }
    .audit-feed-row--auth-line,
    .audit-feed-row--action-line {
        grid-template-columns: minmax(104px, auto) minmax(0, 1fr);
        gap: 10px;
    }
    .audit-feed-row--auth-line.audit-feed-row--cluster {
        grid-template-columns: minmax(104px, auto) minmax(0, 1fr) auto;
    }
    .audit-feed-row--auth-line.audit-feed-row--cluster-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .audit-feed-row--auth-line .ah-time-rel,
    .audit-feed-row--action-line .ah-time-rel,
    .audit-action-user,
    .audit-action-user-sep {
        display: none;
    }
    .audit-feed-action {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .audit-tab-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .audit-filters {
        flex-wrap: wrap;
    }
    .audit-filter-input,
    .audit-filter-select {
        flex: 1 1 calc(50% - 4px);
        width: auto;
        min-width: 0;
        font-size: 1rem; /* prevent iOS auto-zoom on focus (triggers below 16px) */
    }
    .audit-table {
        min-width: 480px;
    }
    /* Hide lowest-priority columns on mobile */
    .audit-table--auth th:nth-child(5),
    .audit-table--auth td:nth-child(5),
    .audit-table--auth th:nth-child(6),
    .audit-table--auth td:nth-child(6) {
        display: none;
    }
    .audit-table--actions th:nth-child(6),
    .audit-table--actions td:nth-child(6) {
        display: none;
    }
}

.delete-confirm-text {
    font-size: 14px;
    color: var(--color-text-soft);
    margin-bottom: 12px;
}

.delete-confirm-actions {
    display: flex;
    gap: 8px;
}

.delete-confirm-actions .btn-secondary {
    flex: 1;
    padding: 9px;
    font-size: 13px;
}

/* ── Modal ────────────────────────────────────────────── */

.cc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-shell-modal);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 16px;
}

.cc-modal {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-card);
}

.cc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 0;
}

.cc-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.cc-modal-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.cc-modal-close:hover {
    color: var(--color-text);
}

.cc-modal-body {
    padding: 16px 20px;
}

.cc-modal-desc {
    font-size: 13px;
    color: var(--color-text-soft);
    margin: 0 0 16px;
}

.cc-modal-desc strong {
    color: var(--color-text);
    font-weight: 600;
}

.cc-modal-error {
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-error);
}

.cc-modal-footer {
    display: flex;
    gap: 8px;
    padding: 0 20px 20px;
    justify-content: flex-end;
}

/* ── Profile Page ─────────────────────────────────────── */

.profile-card {
    max-width: 440px;
    margin-top: 24px;
    background: var(--color-card);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 28px 24px;
}

.profile-success {
    background: var(--color-success-soft);
    border: 1px solid var(--color-success-soft);
    border-radius: var(--radius-xs);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--color-success);
}

/* ── Profile — Notificaties section ──────────────────── */
.profile-notif-unsupported {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.profile-notif-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-xs);
    font-size: 13px;
    margin-bottom: 12px;
}

.profile-notif-banner--warn {
    background: var(--color-warning-soft-faint);
    border: 1px solid var(--color-warning-soft-strong);
    color: var(--color-warning-text);
}

.profile-notif-banner-btn {
    margin-left: auto;
    flex-shrink: 0;
}

.profile-notif-device-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 12px;
}

.profile-notif-device-label {
    flex: 1;
    font-size: 14px;
    color: var(--color-text);
}

.profile-notif-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.profile-notif-chip--muted {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
}

.profile-notif-chip--always {
    background: var(--color-energy-soft);
    color: var(--color-energy-text);
}

.profile-notif-section-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 16px 0 8px;
}

.profile-notif-device-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}

.profile-notif-sub-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-line);
}

.profile-notif-sub-row:last-child {
    border-bottom: none;
}

.profile-notif-sub-info {
    flex: 1;
    min-width: 0;
}

.profile-notif-sub-name {
    display: block;
    font-size: 14px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-notif-sub-time {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.profile-notif-sub-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.profile-notif-pref-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin-bottom: 12px;
}

.profile-notif-pref-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-line);
}

.profile-notif-pref-row:last-child {
    border-bottom: none;
}

.profile-notif-pref-row--toggle {
    cursor: pointer;
}

.profile-notif-pref-info {
    flex: 1;
}

.profile-notif-pref-name {
    display: block;
    font-size: 14px;
    color: var(--color-text);
}

.profile-notif-pref-sub {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.profile-notif-toggle {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-solar);
    flex-shrink: 0;
}

.profile-notif-test-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}

.profile-notif-test-status {
    font-size: 13px;
}

.profile-notif-test-status--ok  { color: var(--color-energy-text); }
.profile-notif-test-status--err { color: var(--color-error-text); }

.profile-notif-error {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--color-error-text);
}

/* ── Theme picker (Profile page) ─────────────────────── */
.theme-picker {
    display: inline-flex;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 2px;
    margin-top: 16px;
}

.theme-picker--full {
    display: flex;
    width: 100%;
}

.theme-picker-btn {
    flex: 1;
    padding: 7px 18px;
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.theme-picker-btn:hover {
    background: var(--color-bg-deep);
    color: var(--color-text-soft);
}

.theme-picker-btn--active {
    background: var(--color-bg-alt);
    color: var(--color-text);
    box-shadow: var(--shadow-soft);
    outline: 1px solid var(--color-line-strong);
}

/* ── Home Access (Users admin panel) ──────────────────── */

.home-access-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.home-access-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-text);
    cursor: pointer;
}

.home-access-item input[type="checkbox"] {
    accent-color: var(--color-solar);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* ── Service worker update toast ─────────────────────── */

.sw-update-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 18px;
    background: var(--color-shell-toast);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--color-text-on-shell);
    font-size: 0.9rem;
    box-shadow: var(--shadow-card);
}

.sw-update-btn {
    appearance: none;
    background: var(--color-solar);
    color: var(--color-on-accent);
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.sw-update-btn:hover {
    filter: brightness(1.05);
}

@media (max-width: 520px) {
    .sw-update-toast {
        left: 12px;
        right: 12px;
        bottom: calc(env(safe-area-inset-bottom, 0) + 80px);
        transform: none;
        justify-content: space-between;
    }
}




/* /css/mobile-pages.css */
/* Permanent owner: Responsive page compositions below the desktop shell breakpoint. */

/* Overview mobile layout ───────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .overview--mobile .hero,
    .overview--mobile .status-grid {
        display: none;
    }

    .overview-mobile {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px 16px 24px;
    }

    .overview-mobile-eyebrow {
        color: var(--color-text-muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 0 2px 4px;
    }

    /* 2×2 grid of compact summary cards */
    .overview-mobile-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Domain preview stack */
    .overview-mobile-domains {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 4px;
    }

    /* ─── Variant A editorial overview ─── */

    .mob-ed {
        display: flex;
        flex-direction: column;
        width: min(100%, 600px);
        margin-inline: auto;
        padding-top: 2px;
    }

    .mob-ed-eyebrow {
        padding: 0 22px 3px;
        color: var(--color-text-faint);
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .mob-ed-page-title {
        padding: 0 22px 14px;
        font-family: var(--font-display);
        font-size: 30px;
        font-weight: 700;
        line-height: 1.08;
        color: var(--color-text);
        letter-spacing: 0;
    }

    .mob-ed-hero {
        margin: 4px 16px 20px;
        padding: 22px 20px 18px;
        border-radius: 24px;
        background:
            radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--color-solar) 20%, transparent), transparent 34%),
            linear-gradient(180deg, color-mix(in srgb, var(--color-solar) 8%, transparent), transparent 62%),
            linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 94%, var(--color-bg) 6%), color-mix(in srgb, var(--color-bg) 92%, black 8%));
        border: 1px solid color-mix(in srgb, var(--color-solar) 24%, transparent);
        position: relative;
        overflow: hidden;
        box-shadow:
            0 18px 52px rgba(2, 6, 23, 0.22),
            0 1px 0 color-mix(in srgb, white 6%, transparent) inset;
    }

    .mob-ed-hero::before {
        content: '';
        position: absolute;
        inset: -120px -80px auto auto;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: radial-gradient(closest-side, color-mix(in srgb, var(--color-solar) 28%, transparent), transparent 70%);
        pointer-events: none;
    }

    .mob-ed-hero-label {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--color-solar);
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .mob-ed-hero-label::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--color-solar);
        box-shadow: 0 0 10px color-mix(in srgb, var(--color-solar) 70%, transparent);
        flex: none;
    }

    .mob-ed-hero-num {
        font-family: var(--font-mono);
        /* Geist Mono ligates `--` into a single elongated em-dash glyph
           that, at 60px + negative letter-spacing, visually splits into
           two separated dashes ("- -"). Disable ligatures on the hero
           number specifically so the missing-value placeholder reads
           cleanly as `--`. Live numbers don't have digit ligatures so this
           costs nothing for the populated case. */
        font-variant-ligatures: none;
        font-feature-settings: "liga" 0, "calt" 0;
        font-size: 58px;
        line-height: 1;
        font-weight: 500;
        color: var(--color-text);
        margin: 14px 0 4px;
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
    }

    .mob-ed-hero-num small {
        font-size: 20px;
        font-weight: 400;
        color: var(--color-text-muted);
    }

    .mob-ed-hero-sub {
        color: var(--color-text-soft);
        font-size: 13px;
        line-height: 1.45;
        margin-top: 4px;
    }

    .mob-ed-hero-flow {
        display: grid;
        grid-template-columns: 34px minmax(26px, 1fr) 34px minmax(26px, 1fr) 34px;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
        padding: 10px 12px;
        border: 1px solid color-mix(in srgb, var(--color-line) 58%, transparent);
        border-radius: 18px;
        background: color-mix(in srgb, var(--color-bg) 34%, transparent);
    }

    .mob-ed-flow-node {
        display: inline-grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 13px;
        color: var(--color-text-muted);
        background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent);
    }

    .mob-ed-flow-node svg {
        width: 17px;
        height: 17px;
    }

    .mob-ed-flow-node--solar {
        color: var(--color-solar);
        background: color-mix(in srgb, var(--color-solar) 14%, transparent);
        border-color: color-mix(in srgb, var(--color-solar) 24%, transparent);
    }

    .mob-ed-flow-node--home {
        color: var(--color-water);
        background: color-mix(in srgb, var(--color-water) 12%, transparent);
        border-color: color-mix(in srgb, var(--color-water) 20%, transparent);
    }

    .mob-ed-flow-node--export {
        color: var(--color-energy);
        background: color-mix(in srgb, var(--color-energy) 12%, transparent);
        border-color: color-mix(in srgb, var(--color-energy) 22%, transparent);
    }

    .mob-ed-flow-line {
        height: 2px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--color-line-strong) 52%, transparent);
        position: relative;
        overflow: hidden;
    }

    .mob-ed-flow-line::after {
        content: '';
        position: absolute;
        inset: 0;
        width: 56%;
        border-radius: inherit;
        background: linear-gradient(90deg, transparent, currentColor, transparent);
        opacity: 0.72;
        transform: translateX(-100%);
    }

    .mob-ed-flow-line--solar,
    .mob-ed-flow-line--active {
        color: var(--color-energy);
    }

    .mob-ed-flow-line--solar::after,
    .mob-ed-flow-line--active::after {
        animation: mob-ed-flow 2.4s linear infinite;
    }

    .mob-ed-flow-line--idle::after {
        display: none;
    }

    .mob-ed-hero-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--color-line);
    }

    .mob-ed-hero-stat .l {
        color: var(--color-text-faint);
        font-family: var(--font-mono);
        font-size: 9.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .mob-ed-hero-stat .v {
        color: var(--color-text);
        font-family: var(--font-mono);
        font-size: 17px;
        font-weight: 500;
        margin-top: 4px;
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
        /* Same `--` ligature suppression as .mob-ed-hero-num — placeholder
           dashes in stale/missing state should stay visually adjacent. */
        font-variant-ligatures: none;
        font-feature-settings: "liga" 0, "calt" 0;
    }

    .mob-ed-hero-stat .v small {
        color: var(--color-text-muted);
        font-weight: 400;
        margin-left: 1px;
        font-size: 0.72em;
    }

    .mob-ed-hero-stat .v--compact {
        font-size: 13px;
    }

    .mob-ed-section-h {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 4px 22px 10px;
    }

    .mob-ed-section-h h2 {
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 600;
        color: var(--color-text);
    }

    .mob-ed-section-h .more {
        color: var(--color-text-muted);
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .mob-ed-rows {
        display: flex;
        flex-direction: column;
        margin: 0 12px;
        border: 1px solid color-mix(in srgb, var(--color-line) 58%, transparent);
        border-radius: 22px;
        overflow: hidden;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 46%, transparent), transparent),
            color-mix(in srgb, var(--color-bg) 40%, transparent);
    }

    .mob-ed-row {
        display: flex;
        align-items: center;
        min-height: 66px;
        padding: 13px 14px;
        /* `border: 0` clears button defaults; the `border-bottom` rule that
           follows re-applies the row separator. Without this reset, browsers
           render `<button class="mob-ed-row">` with a 4-side native button
           border that overlaps the row hairline. */
        border: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--color-line) 75%, transparent);
        gap: 12px;
        cursor: pointer;
        transition: background 0.15s;
        text-decoration: none;
        color: inherit;
        /* Button-safety resets: .mob-ed-row is used as <div> (telemetry),
           <router-link> (navigation), and <button> (More.js Diensten +
           Uitloggen). The button form needs these or it inherits native
           buttonface background, system font, and centered text. */
        background: transparent;
        font: inherit;
        text-align: left;
        width: 100%;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
    }

    .mob-ed-row:active {
        background: color-mix(in srgb, var(--color-surface) 44%, transparent);
    }

    .mob-ed-row:disabled {
        cursor: default;
        opacity: 0.58;
    }

    .mob-ed-row:disabled:active {
        background: transparent;
    }

    .mob-ed-row-icon {
        width: 42px;
        height: 42px;
        border-radius: 15px;
        display: grid;
        place-items: center;
        flex: none;
        background: color-mix(in srgb, var(--accent, var(--color-text-muted)) 15%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent, var(--color-text-muted)) 18%, transparent);
        color: var(--accent, var(--color-text-muted));
    }

    .mob-ed-row-icon svg {
        width: 20px;
        height: 20px;
    }

    .mob-ed-row-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .mob-ed-row-title {
        font-weight: 600;
        color: var(--color-text);
        font-size: 15px;
    }

    .mob-ed-row-sub {
        color: var(--color-text-muted);
        font-size: 12px;
    }

    .mob-ed-row-val {
        font-family: var(--font-mono);
        font-size: 17px;
        font-weight: 500;
        color: var(--color-text);
        letter-spacing: 0;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .mob-ed-row-val small {
        color: var(--color-text-faint);
        font-weight: 400;
        font-size: 11px;
        margin-left: 1px;
    }

    .mob-ed-row-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .mob-ed-device-block {
        border-bottom: 1px solid color-mix(in srgb, var(--color-line) 75%, transparent);
    }

    .mob-ed-device-block:last-child {
        border-bottom: 0;
    }

    .mob-ed-device-block > .mob-ed-row {
        border-bottom: 0;
        cursor: default;
    }

    .mobile-shelly-components {
        display: grid;
        gap: 8px;
        padding: 0 14px 14px 68px;
    }

    .shelly-component--mobile {
        border-radius: 14px;
        background: color-mix(in srgb, var(--color-surface) 62%, transparent);
    }

    .shelly-component--mobile .shelly-component-controls {
        padding-left: 0;
    }

    .shelly-component--mobile .shelly-control-field {
        min-width: min(100%, 180px);
    }

    .mob-ed-row-state {
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
    }

    .mob-ed-row-state--live {
        color: var(--color-energy);
    }

    .mob-ed-row-state--live::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--color-energy);
        box-shadow: 0 0 6px color-mix(in srgb, var(--color-energy) 70%, transparent);
        display: inline-block;
        flex: none;
    }

    /* Stale row state — amber dot + amber text, no pulse (steady-state warning,
       not a "live and working" signal). Used when svcState.stale is true. */
    .mob-ed-row-state--stale {
        color: var(--color-warning);
    }

    .mob-ed-row-state--stale::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--color-warning);
        display: inline-block;
        flex: none;
    }

    .mob-ed-row-state--error {
        color: var(--color-error);
    }

    .mob-ed-row-state--error::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--color-error);
        display: inline-block;
        flex: none;
    }

    .mob-ed-row-state--mode,
    .mob-ed-row-state--quiet {
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
    }

    .mob-ed-row-state--mode {
        color: var(--color-text-soft);
    }

    .mob-ed-row-state--quiet {
        color: var(--color-text-muted);
    }

    /* Stale hero variant — applied when a solar source is silent (FoxCloud
       with frozen telemetry). Dims the card and replaces the accent glow
       with an amber warn glow so the user can't mistake the `--` value
       for "no production" (i.e. nighttime). */
    .mob-ed-hero--stale {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-warning) 8%, transparent), transparent),
            linear-gradient(180deg, var(--color-surface), var(--color-bg));
        border-color: color-mix(in srgb, var(--color-warning) 22%, transparent);
        opacity: 0.92;
    }

    .mob-ed-hero--stale::before {
        background: radial-gradient(closest-side, color-mix(in srgb, var(--color-warning) 22%, transparent), transparent 70%);
    }

    .mob-ed-hero--stale .mob-ed-hero-label {
        color: var(--color-warning);
    }

    .mob-ed-hero--stale .mob-ed-hero-label::before {
        background: var(--color-warning);
        box-shadow: 0 0 10px color-mix(in srgb, var(--color-warning) 70%, transparent);
        animation: none;
    }

    .mob-ed-hero--stale .mob-ed-hero-num,
    .mob-ed-hero--stale .mob-ed-hero-stat .v {
        color: var(--color-text-muted);
    }

    /* Inline emphasis spans inside .mob-ed-hero-sub — class-driven colors so
       we never need inline `style="color:..."` (CSP-blocked). */
    .mob-ed-hero-sub-strong--export { color: var(--color-energy); }
    .mob-ed-hero-sub-strong--warn { color: var(--color-warning); }

    /* Net stat hero column highlights green when exporting (negative kW). */
    .mob-ed-hero-stat .v--export { color: var(--color-energy); }

    /* Energy.js (HomeWizard) hero export emphasis variants. Same job as
       .mob-ed-hero-sub-strong--export (mid-sentence emphasis), but the
       Energy hero applies it to the full sub line — net export is the
       primary signal on /energie. */
    .mob-ed-hero-sub--export {
        color: var(--color-energy);
        font-weight: 600;
    }

    /* Phase row + meter-totals export tint, matches .v--export. */
    .mob-ed-row-val--export { color: var(--color-energy); }

    .mob-ed-row-chevron {
        color: var(--color-text-muted);
        display: flex;
        align-items: center;
    }

    .mob-ed-row-chevron svg {
        width: 14px;
        height: 14px;
    }

    .mob-ed-strip {
        margin: 14px 16px 24px;
        padding: 14px 18px;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid color-mix(in srgb, var(--color-line) 75%, transparent);
        border-radius: 18px;
        display: flex;
        align-items: center;
        gap: 14px;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
    }

    .mob-ed-strip:active {
        background: rgba(255, 255, 255, 0.04);
    }

    .mob-ed-strip-icon {
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--color-solar) 16%, transparent);
        color: var(--color-solar);
        display: grid;
        place-items: center;
    }

    .mob-ed-strip-icon svg {
        width: 18px;
        height: 18px;
    }

    .mob-ed-strip-body {
        flex: 1;
        min-width: 0;
    }

    .mob-ed-strip-title {
        font-size: 13px;
        color: var(--color-text);
        font-weight: 600;
    }

    .mob-ed-strip-sub {
        font-size: 11.5px;
        color: var(--color-text-muted);
        margin-top: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ─── Variant A: Meer page (profile card + tile grid + logout row) ─── */

    .mob-ed--meer {
        padding-bottom: 24px;
    }

    .mob-ed-profile {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 4px 18px 20px;
        padding: 16px 18px;
        border-radius: 22px;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-water) 8%, transparent), transparent),
            linear-gradient(180deg, var(--color-surface), var(--color-bg));
        border: 1px solid color-mix(in srgb, var(--color-water) 14%, transparent);
    }

    .mob-ed-profile-avatar {
        flex: none;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: color-mix(in srgb, var(--color-water) 22%, transparent);
        color: var(--color-water);
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 700;
    }

    .mob-ed-profile-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .mob-ed-profile-name {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 600;
        color: var(--color-text);
        line-height: 1.2;
    }

    .mob-ed-profile-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--color-text-muted);
        font-size: 12px;
    }

    .mob-ed-profile-role {
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-water);
    }

    .mob-ed-profile-sep {
        color: var(--color-text-faint);
    }

    .mob-ed-profile-edit {
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid var(--color-line);
        background: transparent;
        color: var(--color-text-muted);
        display: grid;
        place-items: center;
        cursor: pointer;
    }

    .mob-ed-profile-edit:active {
        background: rgba(255, 255, 255, 0.04);
    }

    .mob-ed-profile-edit svg {
        width: 18px;
        height: 18px;
    }

    /* Tile grid: 2 columns, big tap targets */
    .mob-ed-tile-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 18px 18px;
    }

    .mob-ed-tile {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-height: 110px;
        padding: 16px 14px 14px;
        border-radius: 18px;
        border: 1px solid color-mix(in srgb, var(--accent, var(--color-text-muted)) 18%, transparent);
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--color-text-muted)) 10%, transparent), transparent),
            var(--color-surface);
        color: var(--color-text);
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        transition: transform 0.12s, background 0.15s;
    }

    .mob-ed-tile:active {
        transform: scale(0.98);
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--color-text-muted)) 16%, transparent), transparent),
            var(--color-surface);
    }

    .mob-ed-tile:disabled {
        cursor: not-allowed;
        opacity: 0.56;
    }

    .mob-ed-tile:disabled:active {
        transform: none;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--color-text-muted)) 10%, transparent), transparent),
            var(--color-surface);
    }

    .mob-ed-tile-icon {
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 12px;
        background: color-mix(in srgb, var(--accent, var(--color-text-muted)) 18%, transparent);
        color: var(--accent, var(--color-text-muted));
        margin-bottom: 6px;
    }

    .mob-ed-tile-icon svg {
        width: 20px;
        height: 20px;
    }

    .mob-ed-tile-label {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 600;
        color: var(--color-text);
        line-height: 1.2;
    }

    .mob-ed-tile-sub {
        font-size: 11.5px;
        color: var(--color-text-muted);
        line-height: 1.3;
    }

    /* Logout row variant */
    .mob-ed-row--logout .mob-ed-row-title {
        color: var(--color-text);
    }

    .mob-ed-row--logout.is-armed {
        background: color-mix(in srgb, var(--color-error) 8%, transparent);
    }

    .mob-ed-row--logout.is-armed .mob-ed-row-title {
        color: var(--color-error);
        font-weight: 600;
    }

    /* .mob-ed-row--cancel is a neutral sibling row used in /meer for the
       Annuleren action when Uitloggen is armed. It uses the base .mob-ed-row
       chrome but a slightly muted title color to signal it's a back-out. */
    .mob-ed-row--cancel .mob-ed-row-title {
        color: var(--color-text-muted);
        font-weight: 500;
    }

    .mob-ed-section-h--context {
        padding-top: 0;
    }

    .mob-ed-context-card {
        margin: 0 18px 18px;
        border: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent);
        border-radius: 22px;
        overflow: hidden;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 54%, transparent), transparent),
            color-mix(in srgb, var(--color-bg) 46%, transparent);
    }

    .mob-ed-context-row,
    .mob-ed-context-option {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        border: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--color-line) 72%, transparent);
        background: transparent;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
    }

    .mob-ed-context-row {
        min-height: 74px;
        padding: 14px 16px;
    }

    .mob-ed-context-row:active,
    .mob-ed-context-option:active {
        background: color-mix(in srgb, var(--color-surface) 42%, transparent);
    }

    .mob-ed-context-row:last-child,
    .mob-ed-context-options:last-child,
    .mob-ed-context-option:last-child {
        border-bottom: 0;
    }

    .mob-ed-context-icon,
    .mob-ed-context-option-icon {
        display: grid;
        place-items: center;
        flex: none;
        background: color-mix(in srgb, var(--accent, var(--color-text-muted)) 15%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent, var(--color-text-muted)) 18%, transparent);
        color: var(--accent, var(--color-text-muted));
    }

    .mob-ed-context-icon {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }

    .mob-ed-context-option-icon {
        width: 32px;
        height: 32px;
        border-radius: 11px;
    }

    .mob-ed-context-icon svg,
    .mob-ed-context-option-icon svg {
        width: 18px;
        height: 18px;
    }

    .mob-ed-context-body {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
        gap: 2px;
    }

    .mob-ed-context-kicker {
        color: var(--color-text-faint);
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .mob-ed-context-title {
        overflow: hidden;
        color: var(--color-text);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.22;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mob-ed-context-sub {
        overflow: hidden;
        color: var(--color-text-muted);
        font-size: 12px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mob-ed-context-action {
        margin-left: auto;
        color: var(--color-text-muted);
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .mob-ed-context-options {
        display: flex;
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--color-line) 72%, transparent);
        background: color-mix(in srgb, var(--color-bg) 26%, transparent);
    }

    .mob-ed-context-option {
        min-height: 58px;
        padding: 10px 14px 10px 24px;
    }

    .mob-ed-context-option:disabled {
        cursor: default;
        opacity: 1;
    }

    .mob-ed-context-option--selected {
        background: color-mix(in srgb, var(--color-solar) 8%, transparent);
    }

    .mob-ed-rows--admin-tools {
        margin-bottom: 18px;
    }

    .mob-ed-platform-message {
        margin: -8px 18px 18px;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid color-mix(in srgb, var(--color-line) 75%, transparent);
        background: color-mix(in srgb, var(--color-surface) 86%, transparent);
        color: var(--color-text-muted);
        font-size: 12px;
    }

    .mob-ed-platform-message--error {
        border-color: color-mix(in srgb, var(--color-error) 35%, transparent);
        color: var(--color-error);
    }

    /* ─── Variant A: Automatisering page-level chrome ─── */

    .automations-page--mobile {
        padding: 0 0 80px;
    }

    .automations-page-mob-head {
        position: relative;
        padding-bottom: 8px;
    }

    .mob-ed-add-btn {
        margin: 4px 18px 16px;
        padding: 11px 18px;
        border-radius: 14px;
        border: 1px solid color-mix(in srgb, var(--color-solar) 30%, transparent);
        background: color-mix(in srgb, var(--color-solar) 14%, transparent);
        color: var(--color-solar);
        font-family: var(--font-mono);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
        display: block;
        width: calc(100% - 36px);
        text-align: center;
    }

    .mob-ed-add-btn:active {
        background: color-mix(in srgb, var(--color-solar) 22%, transparent);
    }

    .mob-ed-add-btn--improvements {
        border-color: color-mix(in srgb, var(--improvements) 30%, transparent);
        background: color-mix(in srgb, var(--improvements) 14%, transparent);
        color: var(--improvements);
    }

    .mob-ed-add-btn--improvements:active {
        background: color-mix(in srgb, var(--improvements) 22%, transparent);
    }

    /* ─── Variant A: small empty state (used by /comfort with 0 rows) ─── */

    .mob-ed-empty {
        margin: 4px 18px 18px;
        padding: 24px 22px;
        border-radius: 18px;
        border: 1px dashed var(--color-line-strong);
        color: var(--color-text-muted);
        font-size: 13.5px;
        line-height: 1.5;
        text-align: center;
    }
    .mob-ed-empty--error {
        border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
        color: var(--color-error);
    }

    /* ─── Variant A: Energie hero variant (green energy accent) ─── */

    .mob-ed-hero--energy {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-energy) 10%, transparent), transparent),
            linear-gradient(180deg, var(--color-surface), var(--color-bg));
        border-color: color-mix(in srgb, var(--color-energy) 18%, transparent);
    }

    .mob-ed-hero--energy::before {
        background: radial-gradient(closest-side, color-mix(in srgb, var(--color-energy) 28%, transparent), transparent 70%);
    }

    .mob-ed-hero-label--energy {
        color: var(--color-energy);
    }

    .mob-ed-hero-label--energy::before {
        background: var(--color-energy);
        box-shadow: 0 0 10px color-mix(in srgb, var(--color-energy) 70%, transparent);
    }

    /* ─── Variant A: Netwerk hero variant (UniFi blue) ─── */

    .mob-ed-hero--unifi {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-unifi) 10%, transparent), transparent),
            linear-gradient(180deg, var(--color-surface), var(--color-bg));
        border-color: color-mix(in srgb, var(--color-unifi) 18%, transparent);
    }

    .mob-ed-hero--unifi::before {
        background: radial-gradient(closest-side, color-mix(in srgb, var(--color-unifi) 28%, transparent), transparent 70%);
    }

    .mob-ed-hero-label--unifi {
        color: var(--color-unifi);
    }

    .mob-ed-hero-label--unifi::before {
        background: var(--color-unifi);
        box-shadow: 0 0 10px color-mix(in srgb, var(--color-unifi) 70%, transparent);
    }

    /* ─── Variant A: Netwerk device rows (online/offline groups) ─── */

    .mob-ed-rows-group-head {
        padding: 14px 24px 6px;
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--color-text-faint);
    }

    .mob-ed-rows-group-head--offline {
        color: color-mix(in srgb, var(--color-error) 80%, var(--color-text-faint));
    }

    .mob-ed-row-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex: none;
        background: var(--color-text-faint);
    }

    .mob-ed-row-status-dot--online { background: var(--color-energy); box-shadow: 0 0 6px color-mix(in srgb, var(--color-energy) 60%, transparent); }
    .mob-ed-row-status-dot--offline { background: var(--color-error); }
    .mob-ed-row-status-dot--updating { background: var(--color-solar); }

    .mob-ed-row-fw-badge {
        padding: 2px 8px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--color-solar) 18%, transparent);
        color: var(--color-solar);
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* ─── Variant A: Comfort hero variants (water/pool/climate/heatpump/tado) ─── */

    .mob-ed-hero--water {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-water) 10%, transparent), transparent),
            linear-gradient(180deg, var(--color-surface), var(--color-bg));
        border-color: color-mix(in srgb, var(--color-water) 18%, transparent);
    }
    .mob-ed-hero--water::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--color-water) 28%, transparent), transparent 70%); }
    .mob-ed-hero-label--water { color: var(--color-water); }
    .mob-ed-hero-label--water::before { background: var(--color-water); box-shadow: 0 0 10px color-mix(in srgb, var(--color-water) 70%, transparent); }

    .mob-ed-hero--pool {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-pool) 10%, transparent), transparent),
            linear-gradient(180deg, var(--color-surface), var(--color-bg));
        border-color: color-mix(in srgb, var(--color-pool) 18%, transparent);
    }
    .mob-ed-hero--pool::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--color-pool) 28%, transparent), transparent 70%); }
    .mob-ed-hero-label--pool { color: var(--color-pool); }
    .mob-ed-hero-label--pool::before { background: var(--color-pool); box-shadow: 0 0 10px color-mix(in srgb, var(--color-pool) 70%, transparent); }

    .mob-ed-hero--climate {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-climate) 10%, transparent), transparent),
            linear-gradient(180deg, var(--color-surface), var(--color-bg));
        border-color: color-mix(in srgb, var(--color-climate) 18%, transparent);
    }
    .mob-ed-hero--climate::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--color-climate) 28%, transparent), transparent 70%); }
    .mob-ed-hero-label--climate { color: var(--color-climate); }
    .mob-ed-hero-label--climate::before { background: var(--color-climate); box-shadow: 0 0 10px color-mix(in srgb, var(--color-climate) 70%, transparent); }

    .mob-ed-hero--heatpump {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-heatpump) 10%, transparent), transparent),
            linear-gradient(180deg, var(--color-surface), var(--color-bg));
        border-color: color-mix(in srgb, var(--color-heatpump) 18%, transparent);
    }
    .mob-ed-hero--heatpump::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--color-heatpump) 28%, transparent), transparent 70%); }
    .mob-ed-hero-label--heatpump { color: var(--color-heatpump); }
    .mob-ed-hero-label--heatpump::before { background: var(--color-heatpump); box-shadow: 0 0 10px color-mix(in srgb, var(--color-heatpump) 70%, transparent); }

    .mob-ed-hero--tado {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-tado) 10%, transparent), transparent),
            linear-gradient(180deg, var(--color-surface), var(--color-bg));
        border-color: color-mix(in srgb, var(--color-tado) 18%, transparent);
    }
    .mob-ed-hero--tado::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--color-tado) 28%, transparent), transparent 70%); }
    .mob-ed-hero-label--tado { color: var(--color-tado); }
    .mob-ed-hero-label--tado::before { background: var(--color-tado); box-shadow: 0 0 10px color-mix(in srgb, var(--color-tado) 70%, transparent); }

    .mob-ed-hero--garden {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-garden) 10%, transparent), transparent),
            linear-gradient(180deg, var(--color-surface), var(--color-bg));
        border-color: color-mix(in srgb, var(--color-garden) 18%, transparent);
    }
    .mob-ed-hero--garden::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--color-garden) 28%, transparent), transparent 70%); }
    .mob-ed-hero-label--garden { color: var(--color-garden); }
    .mob-ed-hero-label--garden::before { background: var(--color-garden); box-shadow: 0 0 10px color-mix(in srgb, var(--color-garden) 70%, transparent); }

    .mob-ed-hero--clean {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-clean) 10%, transparent), transparent),
            linear-gradient(180deg, var(--color-surface), var(--color-bg));
        border-color: color-mix(in srgb, var(--color-clean) 18%, transparent);
    }
    .mob-ed-hero--clean::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--color-clean) 28%, transparent), transparent 70%); }
    .mob-ed-hero-label--clean { color: var(--color-clean); }
    .mob-ed-hero-label--clean::before { background: var(--color-clean); box-shadow: 0 0 10px color-mix(in srgb, var(--color-clean) 70%, transparent); }

    /* Immersive mobile hero — matches desktop content surfaces. Accent glow comes
       from the base/accent ::before. Added AFTER the accent modifiers so this
       surface wins the cascade. */
    .mob-ed-hero--immersive {
        background: var(--color-content-surface);
        border-color: var(--color-content-line);
    }
    .mob-ed-hero--immersive .mob-ed-hero-num { color: var(--color-content-text); }
    .mob-ed-hero--immersive .mob-ed-hero-num small { color: var(--color-content-text-muted); }
    .mob-ed-hero--immersive .mob-ed-hero-sub { color: var(--color-content-text-muted); }
    .mob-ed-hero--immersive .mob-ed-hero-stat .l { color: var(--color-content-text-faint); }
    .mob-ed-hero--immersive .mob-ed-hero-stat .v { color: var(--color-content-text); }
    .mob-ed-hero--immersive .mob-ed-hero-row { border-top-color: var(--color-content-line); }
    .mob-ed-hero-vis {
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid var(--color-content-line);
    }
    .mob-ed-hero-vis .hero-spark-svg { height: 58px; }

    /* ─── Variant A: Comfort control sections (power btn + mode pills wrapper) ─── */

    .mob-ed-controls {
        margin: 0 18px 18px;
        padding: 14px 16px;
        border-radius: 18px;
        background: var(--color-surface);
        border: 1px solid var(--color-line);
    }

    .mob-ed-controls-label {
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        margin-bottom: 10px;
    }

    /* ─── Variant A: Energie chart card (intraday + month chart wrapper) ─── */

    .mob-ed-energie-chart-card {
        margin: 4px 18px 24px;
        padding: 12px 14px 14px;
        border-radius: 22px;
        background: var(--color-card);
        border: 1px solid var(--color-line);
    }

    .mob-ed-energie-chart-pills {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }

    .mob-ed-energie-chart-pills .solar-mobile-pill {
        padding: 4px 10px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--color-line) 60%, transparent);
        color: var(--color-text-soft);
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.04em;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .mob-ed-energie-chart-pills .pool-temp-range-btn {
        min-height: 25px;
        padding: 4px 10px;
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 600;
    }

    .mob-ed-energie-chart-expand {
        margin-left: auto;
        flex: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid var(--color-line);
        background: transparent;
        color: var(--color-text-muted);
        display: grid;
        place-items: center;
        cursor: pointer;
    }

    .mob-ed-energie-chart-expand:active {
        background: rgba(255, 255, 255, 0.04);
    }

    .mob-ed-energie-chart-expand svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 640px) {
    .overview-mobile {
        padding: 12px 12px 20px;
        gap: 10px;
    }

    .overview-mobile-cards {
        gap: 8px;
    }

    .overview-mobile-domains {
        gap: 8px;
    }
}

/* Solar mobile layout (Phase 3) ────────────────────────────────────────── */

@media (max-width: 1100px) {
    /* Outer scroll container */
    .solar-mobile {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 16px 16px 32px;
    }

    /* Each named section: Nu / Vandaag / Maand */
    .solar-mobile-section {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Section eyebrow label */
    .solar-mobile-eyebrow {
        color: var(--color-text-muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 0 2px 2px;
    }

    /* 2×2 (or 3-cell flex) grid of SummaryCards */
    .solar-mobile-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Stat rows block with card background */
    .solar-mobile-stat-block {
        padding: 4px 16px;
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 62%, transparent);
        border-radius: 16px;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-bg-alt) 10%, transparent), transparent 64%),
            var(--color-card);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            var(--shadow-soft);
    }

    /* Month navigation row */
    .solar-mobile-month-nav {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .solar-mobile-month-nav--inset {
        padding: 0 18px 12px;
    }

    .solar-mobile-month-label {
        flex: 1 1 0;
        text-align: center;
        font-family: var(--font-display);
        font-size: 0.96rem;
        font-weight: 700;
        letter-spacing: 0;
        color: var(--color-text);
    }

    .solar-mobile-nav-btn {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border: 1px solid var(--color-line-strong);
        border-radius: 12px;
        background: transparent;
        color: var(--color-text-soft);
        font-size: 1.3rem;
        line-height: 1;
        cursor: pointer;
        display: inline-grid;
        place-items: center;
        transition: background 140ms ease;
    }

    .solar-mobile-nav-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .solar-mobile-nav-btn:not(:disabled):active {
        background: transparent;
    }

    .month-chart-year-nav-btn--push-start {
        margin-right: auto;
    }

    .month-chart-year-nav-btn--flush-start {
        margin-left: 0;
    }

    /* Summary pill in InlineChartCard header */
    .solar-mobile-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 8px;
        border-radius: 999px;
        background: transparent;
        border: 1px solid var(--color-line);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-text-soft);
        white-space: nowrap;
    }

    .solar-mobile-pill-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .solar-mobile-pill-dot--pv   { background: var(--chart-solar); }
    .solar-mobile-pill-dot--load { background: var(--chart-loads); }
    .solar-mobile-pill-dot--net,
    .solar-mobile-pill-dot--export { background: var(--chart-feedin); }
    .solar-mobile-pill-dot--import { background: var(--chart-grid-import); }

    .mob-ed-empty--error {
        border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
        color: var(--color-error);
    }

    /* Inline chart preview wrapper — fills the InlineChartCard body slot */
    .solar-mobile-chart-preview {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    /* SVG in preview mode: scale to fit width, no scroll */
    .day-chart-svg--preview {
        display: block;
        width: 100%;
        height: auto;
    }

    /* In preview, hide y-axis labels and y-unit */
    .day-chart-svg--preview .chart-axis-label--y-preview,
    .solar-mobile-chart-preview .chart-axis-unit {
        display: none;
    }

    /* In preview, show only a sparse subset of time ticks (declared explicitly in template) */
    .chart-axis-label--time-preview {
        /* visible — but hidden if nested under .day-chart-svg--preview via selector below */
    }

    /* Month bar chart preview: fixed-height and no horizontal scroll */
    .solar-mobile-chart-preview--month {
        overflow: hidden;
    }

    .day-chart-svg--month-preview {
        display: block;
        width: 100%;
        height: auto;
    }

    .solar-mobile-analysis-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        padding: 16px;
        border: 1px solid var(--color-line);
        border-radius: 20px;
        background: var(--color-card);
        color: var(--color-text);
        text-align: left;
        cursor: pointer;
    }

    .solar-mobile-analysis-copy {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .solar-mobile-analysis-title {
        font-family: var(--font-display);
        font-size: 0.96rem;
        font-weight: 700;
        letter-spacing: 0;
    }

    .solar-mobile-analysis-detail {
        color: var(--color-text-soft);
        font-size: 0.84rem;
        line-height: 1.4;
    }

    .solar-mobile-analysis-chevron {
        color: var(--color-text-muted);
        font-size: 1.3rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    /* Fullscreen chart sheet contents */
    .solar-fs-chart-wrap {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        flex: 1 1 0;
        min-height: 0;
    }

    .solar-fs-stat-block {
        flex-shrink: 0;
    }

    .solar-fs-month-nav {
        flex-shrink: 0;
    }

    /* Fullscreen chart scroll area for day chart (allows pinch-scroll on wide SVG) */
    .solar-fs-chart-scroll {
        flex: 1 1 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }

    .solar-fs-svg {
        display: block;
        width: 100%;
        min-width: 560px;
        height: auto;
    }

    /* Fullscreen month bars: horizontal scroll allowed */
    .solar-fs-chart-scroll--bars {
        overflow-x: auto;
    }

    .solar-fs-svg--bars {
        display: block;
        width: 100%;
        min-width: 560px;
        height: auto;
    }
}

@media (max-width: 640px) {
    .solar-mobile {
        padding: 12px 12px 28px;
        gap: 20px;
    }

    .solar-mobile-section {
        gap: 10px;
    }

    .solar-mobile-cards {
        gap: 8px;
    }
}

/* Phase 5 — Comfort mobile layouts ─────────────────────────────────────── */

@media (max-width: 1100px) {

    /* Shared comfort screen wrapper */
    .water-mobile,
    .pool-mobile,
    .climate-mobile,
    .heatpump-mobile {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-bottom: 16px;
    }

    /* Stat block: wraps StatRows below controls */
    .comfort-stat-block {
        padding: 4px 16px;
        border: 1px solid var(--color-line);
        border-radius: 16px;
        background: var(--color-card);
    }

    /* Power toggle button — large touch target */
    .comfort-power-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 64px;
        height: 44px;
        padding: 0 18px;
        border-radius: 20px;
        border: 1.5px solid var(--color-line-strong);
        background: var(--color-line-strong);
        color: var(--color-text-soft);
        font-size: 0.88rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
        -webkit-tap-highlight-color: transparent;
    }

    .comfort-power-btn:active {
        background: var(--color-line);
    }

    .comfort-power-btn--on {
        border-color: var(--color-success);
        background: var(--color-success-soft);
        color: var(--color-success);
    }

    .comfort-power-btn--small {
        min-width: 48px;
        height: 44px;
        padding: 0 12px;
        font-size: 0.80rem;
    }

    .comfort-power-btn:disabled {
        opacity: 0.45;
        pointer-events: none;
    }

    /* Mode pills — segmented-control style */
    .comfort-mode-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        padding: 0 14px;
        border-radius: 20px;
        border: 1.5px solid var(--color-line);
        background: var(--color-bg-soft);
        color: var(--color-text-soft);
        font-size: 0.84rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
    }

    .comfort-mode-pill:active {
        background: var(--color-line);
    }

    .comfort-mode-pill--active {
        border-color: var(--color-water);
        background: var(--color-water-soft);
        color: var(--color-water);
    }

    .comfort-mode-pill:disabled {
        opacity: 0.35;
        pointer-events: none;
    }

    /* Multi-device list block */
    .climate-device-block {
        border: 1px solid var(--color-line);
        border-radius: 18px;
        background: var(--color-card);
        overflow: hidden;
    }

    /* Always-visible device row (tap to expand) */
    .climate-device-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .climate-device-row:active {
        background: transparent;
    }

    /* Keyboard focus ring for the role="button" expandable rows (A11Y-05).
       Inset so it reads as the row's own focus state without overflowing. */
    .climate-device-row:focus-visible {
        outline: 2px solid var(--color-focus-outline);
        outline-offset: -2px;
    }

    .climate-device-row-info {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .climate-device-row-name {
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .climate-device-row-detail {
        font-size: 0.78rem;
        color: var(--color-text-soft);
    }

    .climate-device-row-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

    .climate-device-expand-chevron {
        display: inline-block;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--color-text-muted);
        transform: rotate(0deg);
        transition: transform 200ms ease;
        line-height: 1;
    }

    .climate-device-expand-chevron--open {
        transform: rotate(90deg);
    }

    /* Expanded controls area */
    .climate-device-expanded {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 12px 14px;
        border-top: 1px solid var(--color-line);
    }

    .climate-device-expanded .action-block {
        border-radius: 14px;
    }

    .climate-device-expanded .comfort-stat-block {
        border-radius: 12px;
    }
}

/* Climate history + usage insight panel ────────────────────────────────────── */
.climate-insight-panel {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-card);
}
.climate-insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.climate-insight-device {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}
.climate-insight-tooltip {
    font-size: 0.82rem;
    color: var(--color-text);
    padding: 2px 0 6px;
}
.climate-range-pills {
    display: inline-flex;
    gap: 6px;
}
.climate-insight-header h2 {
    margin: 0;
    font-size: 1rem;
}
.climate-range-pills button {
    border: 1px solid var(--color-border);
    background: var(--surface-2);
    color: var(--color-text);
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: inherit;
}
.climate-range-pills button:focus-visible {
    outline: 2px solid var(--color-climate);
    outline-offset: 2px;
}
.climate-range-pills button.active {
    border-color: var(--color-climate);
    color: var(--color-climate);
}
.climate-usage-svg {
    margin-top: 8px;
}

/* Reactief klimaat quick-entry panel ───────────────────────────────────────── */
.climate-reactive-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-card);
}
.climate-reactive-panel h2 {
    margin: 0;
    font-size: 1rem;
}
.climate-reactive-panel p {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Mobile editorial chrome for the climate panels. NOTE: this block must stay
   AFTER the base rules above — media queries add no specificity, so an
   earlier override would lose to the later 8px base declaration. */
@media (max-width: 1100px) {
    .climate-insight-panel,
    .climate-reactive-panel {
        border-radius: 18px;
    }
}

/* Phase 6 — Settings / Users / Profile mobile layouts ────────────────────── */
@media (max-width: 1100px) {

    /* ── Shared mobile page shell ── */
    .mobile-settings-page {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-bottom: calc(env(safe-area-inset-bottom) + 100px);
    }

    /* ── iOS-style grouped list sections ── */
    .mobile-list-section {
        margin: 20px 16px 0;
    }

    .mobile-list-section--flush {
        margin: 0;
    }

    .mobile-list-section--spaced {
        margin-top: 16px;
    }

    .mobile-list-header {
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        padding: 0 4px 6px;
    }

    .mobile-list-body {
        background: var(--color-card);
        border: 1px solid var(--color-line);
        border-radius: 14px;
        overflow: hidden;
    }

    .mobile-list-body--sheet {
        border-radius: 12px;
    }

    .mobile-list-row {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 10px 16px;
        /* border:0 clears button defaults; the border-bottom that follows
           re-applies the row separator. Without this, <button class="mobile-list-row">
           in the Integraties section renders with a native 4-side button border
           that overlaps the row hairline. */
        border: 0;
        border-bottom: 1px solid var(--color-line-strong);
        gap: 10px;
        background: transparent;
        width: 100%;
        text-align: left;
        color: var(--color-text);
        cursor: default;
        /* Button-safety resets: the row is used as both <div> (woningen) and
           <button> (integraties + chevron variant). The button form inherits
           native font + appearance without these. */
        font: inherit;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
    }

    .mobile-list-row:last-child {
        border-bottom: none;
    }

    button.mobile-list-row,
    .mobile-list-row--chevron {
        cursor: pointer;
        transition: background 120ms ease;
    }

    button.mobile-list-row:active,
    .mobile-list-row--chevron:active {
        background: var(--color-line);
    }

    .mobile-list-row--form {
        flex-direction: column;
        align-items: stretch;
        min-height: 64px;
        padding: 10px 16px 12px;
        gap: 4px;
    }

    .mobile-list-row--home {
        cursor: default;
    }

    .mobile-list-row--location {
        min-height: 58px;
        background: color-mix(in srgb, var(--color-surface) 38%, transparent);
    }

    .mobile-list-row--active .mobile-list-row-title {
        color: var(--color-solar);
    }

    .mobile-list-row-left {
        flex: 1;
        min-width: 0;
    }

    .mobile-list-row-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-list-row-sub {
        font-size: 0.78rem;
        color: var(--color-text-muted);
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 2px;
        flex-wrap: wrap;
    }

    .mobile-list-row-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .mobile-list-row-right--actions {
        gap: 6px;
    }

    .mobile-list-chevron {
        font-size: 1.3rem;
        color: var(--color-text-muted);
        line-height: 1;
    }

    /* ── Form inputs inside rows ── */
    .mobile-form-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-text-muted);
        letter-spacing: 0.02em;
        display: block;
    }

    .mobile-form-input {
        width: 100%;
        background: var(--color-line-strong);
        border: 1px solid var(--color-line-strong);
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 1rem;
        color: var(--color-text);
        min-height: 44px;
        outline: none;
        transition: border-color 150ms ease;
        font-family: inherit;
    }

    .mobile-form-input:focus {
        border-color: var(--color-text-muted);
    }

    /* WCAG 2.4.7: outline: none above strips the default ring; restore a visible
       indicator for keyboard users on these inline mobile forms. */
    .mobile-form-input:focus-visible,
    .mobile-form-select:focus-visible {
        outline: 0;
        border-color: var(--color-focus-outline);
        box-shadow: 0 0 0 3px var(--color-focus-ring);
    }

    .mobile-form-select {
        background: var(--color-line-strong);
        border: 1px solid var(--color-line-strong);
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 0.9rem;
        color: var(--color-text);
        min-height: 44px;
        outline: none;
        font-family: inherit;
    }

    .mobile-location-edit {
        display: grid;
        gap: 8px;
    }

    .mobile-location-results {
        display: grid;
        gap: 6px;
    }

    .mobile-location-result {
        width: 100%;
        min-height: 42px;
        padding: 8px 10px;
        border: 1px solid var(--color-line-strong);
        border-radius: 10px;
        background: var(--color-surface);
        color: var(--color-text);
        font: inherit;
        text-align: left;
    }

    /* ── Primary action button ── */
    .mobile-action-button {
        display: block;
        width: calc(100% - 32px);
        margin: 12px 16px 0;
        padding: 14px 20px;
        min-height: 52px;
        background: rgba(var(--color-water-light-rgb), 0.15);
        border: 1px solid rgba(var(--color-water-light-rgb), 0.25);
        border-radius: 14px;
        color: var(--color-water);
        font-size: 1rem;
        font-weight: 600;
        font-family: inherit;
        text-align: center;
        cursor: pointer;
        transition: background 120ms ease;
    }

    .mobile-action-button:active {
        background: rgba(var(--color-water-light-rgb), 0.22);
    }

    .mobile-action-button:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .mobile-action-button--secondary {
        background: var(--color-line);
        border-color: var(--color-line-strong);
        color: var(--color-text-soft);
    }

    .mobile-action-button--danger {
        background: rgba(var(--color-error-light-rgb), 0.12);
        border-color: rgba(var(--color-error-light-rgb), 0.25);
        color: var(--color-error);
    }

    /* ── Small row buttons ── */
    .mobile-row-btn {
        padding: 6px 12px;
        min-height: 44px;
        border-radius: 8px;
        background: var(--color-line);
        border: 1px solid var(--color-line-strong);
        color: var(--color-text-soft);
        font-size: 0.8rem;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        white-space: nowrap;
    }

    .mobile-row-btn--danger {
        background: rgba(var(--color-error-light-rgb), 0.1);
        border-color: rgba(var(--color-error-light-rgb), 0.2);
        color: var(--color-error);
    }

    /* ── Feedback messages ── */
    .mobile-section-feedback {
        margin: 8px 16px 0;
        padding: 10px 14px;
        border-radius: 10px;
        font-size: 0.85rem;
        background: var(--color-bg-alt);
        border: 1px solid var(--color-line);
    }

    .mobile-feedback-error {
        color: var(--color-error);
    }

    .mobile-feedback-success {
        color: var(--color-success);
    }

    /* ── BottomSheet confirm pattern ── */
    .mobile-sheet-confirm {
        padding: 4px 0 8px;
    }

    .mobile-sheet-confirm-text {
        font-size: 0.95rem;
        color: var(--color-text-soft);
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .mobile-sheet-confirm-actions {
        display: flex;
        gap: 10px;
    }

    .mobile-sheet-btn {
        flex: 1;
        padding: 14px 16px;
        min-height: 52px;
        border-radius: 14px;
        font-size: 1rem;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        transition: background 120ms ease;
    }

    .mobile-sheet-btn--cancel {
        background: var(--color-line);
        border: 1px solid var(--color-line-strong);
        color: var(--color-text-soft);
    }

    .mobile-sheet-btn--danger {
        background: rgba(var(--color-error-light-rgb), 0.14);
        border: 1px solid rgba(var(--color-error-light-rgb), 0.28);
        color: var(--color-error);
    }

    /* ── Service icon in integration rows ──
       Mirrors desktop `.integration-icon` chrome: rounded bordered circle
       with the SVG centered inside, color-coded by connection state.
       state-active = green (Verbonden), state-error = red (Controleer),
       default = muted gray (Niet geconfigureerd / Laden). The bordered
       circle treatment is what was missing — without it, icons rendered
       at the default text color and looked the same in every state. */
    .mobile-svc-icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        border-radius: 999px;
        border: 1px solid var(--color-line-strong);
        background: transparent;
        display: grid;
        place-items: center;
        color: var(--color-text-muted);
    }

    .mobile-svc-icon svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
    }

    .mobile-svc-icon.state-active { border-color: var(--color-success-soft); color: var(--color-success); }
    .mobile-svc-icon.state-error  { border-color: var(--color-error-soft);   color: var(--color-error); }

    /* ── Profile hero ── */
    .mobile-profile-hero {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 24px 16px 8px;
    }

    .mobile-profile-avatar {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(var(--color-water-light-rgb), 0.15);
        border: 1px solid rgba(var(--color-water-light-rgb), 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--color-water);
        flex-shrink: 0;
    }

    .mobile-profile-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--color-text);
    }

    .mobile-profile-role {
        font-size: 0.78rem;
        color: var(--color-text-muted);
        margin-top: 2px;
    }

    /* ── Shared admin mobile header ── */
    .mobile-page-header,
    .mobile-users-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 20px 16px 4px;
    }

    .mobile-page-header > div {
        min-width: 0;
    }

    .mobile-page-eyebrow {
        color: var(--color-text-faint);
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        margin-bottom: 3px;
    }

    .mobile-page-title,
    .mobile-users-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--color-text);
        line-height: 1.2;
    }

    .mobile-page-action,
    .mobile-users-add-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
        min-height: 44px;
        border-radius: 10px;
        background: rgba(var(--color-water-light-rgb), 0.12);
        border: 1px solid rgba(var(--color-water-light-rgb), 0.22);
        color: var(--color-water);
        font-size: 0.88rem;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
    }

    .mobile-users-brief {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 12px 16px 0;
        padding: 12px;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 72%, transparent), transparent),
            var(--color-card);
    }

    .mobile-users-brief-item {
        min-width: 0;
    }

    .mobile-users-brief-item span {
        display: block;
        overflow: hidden;
        color: var(--color-text-faint);
        font-family: var(--font-mono);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .mobile-users-brief-item strong {
        display: block;
        margin-top: 5px;
        color: var(--color-text);
        font-size: 1rem;
        font-weight: 750;
        line-height: 1.1;
    }

    .mobile-users-brief-item em {
        display: block;
        overflow: hidden;
        margin-top: 2px;
        color: var(--color-text-muted);
        font-size: 0.68rem;
        font-style: normal;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-users-brief-item--attention strong {
        color: var(--color-warning-text);
    }

    /* ── User row ── */
    .mobile-user-row {
        cursor: pointer;
    }

    .mobile-user-row-meta {
        overflow: hidden;
        margin-top: 3px;
        color: var(--color-text-faint);
        font-size: 0.72rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-user-role-badge {
        display: inline-block;
        padding: 2px 7px;
        border-radius: 6px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.03em;
    }

    .mobile-user-role-badge.admin {
        background: var(--color-heatpump-soft);
        color: var(--color-heatpump);
    }

    .mobile-user-role-badge.operator {
        background: var(--color-success-soft);
        color: var(--color-success);
    }

    .mobile-user-role-badge.viewer {
        background: var(--color-bg-soft);
        color: var(--color-text-muted);
    }

    .mobile-online-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .mobile-online-dot.active {
        background: var(--color-success);
        box-shadow: 0 0 5px var(--color-success);
    }

    .mobile-online-dot.inactive {
        background: var(--color-text-muted);
    }

    .mobile-online-dot.never {
        background: var(--color-warning);
    }

    /* ── User detail sheet body ── */
    .mobile-sheet-user-detail {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-bottom: 8px;
    }

    .mobile-sheet-danger-zone {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 8px;
        border-top: 1px solid var(--color-line);
        padding-top: 8px;
    }

    .mobile-home-access-row {
        cursor: pointer;
    }

    .mobile-checkbox {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        accent-color: var(--color-water);
    }

    .mobile-mono {
        font-family: var(--font-mono);
        font-size: 0.75rem;
    }

    /* ── Sheet service form padding ── */
    .mobile-sheet-service {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-bottom: 8px;
    }

    .mobile-sheet-service-actions {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 640px) {
    .mobile-list-section {
        margin: 16px 12px 0;
    }

    .mobile-list-section--flush {
        margin: 0;
    }

    .mobile-list-section--spaced {
        margin-top: 16px;
    }

    .mobile-action-button {
        width: calc(100% - 24px);
        margin-left: 12px;
        margin-right: 12px;
    }

    .mobile-section-feedback {
        margin-left: 12px;
        margin-right: 12px;
    }

    .mobile-page-header,
    .mobile-users-header {
        padding-left: 12px;
        padding-right: 12px;
    }

    .mobile-profile-hero {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* On mobile, rise-in stagger (up to 780ms) causes perceived tab-switch lag.
   Collapse to a quick 120ms fade — no translateY, no long delays. */
@media (max-width: 1100px) {
    .hero,
    .day-chart-card,
    .settings-card,
    .settings-section,
    .audit-block,
    .device-card,
    .status-card,
    .services-section,
    .page-header {
        animation-duration: 120ms !important;
        animation-delay: 0ms !important;
    }

    @keyframes rise-in {
        from { opacity: 0; transform: none; }
        to   { opacity: 1; transform: none; }
    }
}



/* /css/tado.css */
/* Permanent owner: Tado X rooms, controls, gas feedback, and responsive presentation. */

/* ── Tado X integration ──────────────────────────────────────────
   Device-code setup surface (desktop modal + mobile sheet) +
   per-room badges used by the Tado page. Kept together so any visual
   tweak lives in one block. */
.tado-setup {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    padding: 4px 0;
}
.tado-setup p {
    margin: 0;
    color: var(--color-text-soft);
    line-height: 1.45;
}
.tado-code {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    padding: 12px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text);
    align-self: center;
    text-align: center;
    max-width: 100%;
    overflow-wrap: anywhere;
    /* Allow copy/paste of the code for users on a second device. */
    user-select: all;
}
.tado-setup-meta {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.tado-setup-success {
    color: var(--color-success-text);
    font-weight: 600;
    font-size: 1.05rem;
}
.mobile-tado-setup .tado-code {
    font-size: 1.7rem;
    letter-spacing: 0.18em;
    padding: 10px 16px;
}

/* Small inline badge that flags Tado "open window detected" next to a
   room name. Stays legible on both the room row (mobile) and the
   device-card header (desktop). */
.tado-room-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    /* Opacity bumped from 0.18 → 0.30 + brighter foreground so the "Raam open"
       chip passes WCAG AA on the dark surface. */
    background: rgba(var(--color-info-light-rgb), 0.30);
    color: var(--color-info, #9ec3fc);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    vertical-align: middle;
}

/* Quick-actions row on the mobile Tado multi-room view. Parity with
   climate-device-block spacing so the two pages feel the same. */
.comfort-quick-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}

/* Optional desktop hero action row used by Tado.js. */
.hero-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ─── Tado gas card (Tado-tab heating-gas feedback strip) ───────────────────
   Slotted between the hero and the rooms list. Restrained: matches the
   editorial chrome (eyebrow + Geist label + Geist Mono numerics) so it
   reads as a continuation of the Tado page, not a foreign module. The
   `--gas` accent (warm flame) marks this as a different data class than
   Tado's coral hero without breaking the design system. */

.tado-gas-card {
    --gas: var(--color-gas);
    --gas-soft: color-mix(in srgb, var(--gas) 18%, transparent);
    margin: 0 0 24px;
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--color-card);
    border: 1px solid var(--color-line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
}

.tado-gas-card-eyebrow {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tado-gas-card-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gas);
    box-shadow: 0 0 8px var(--gas);
    flex: none;
}

.tado-gas-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tado-gas-card-num {
    font-family: var(--font-mono);
    font-size: 56px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-text);
}

.tado-gas-card-num .unit {
    font-size: 22px;
    font-weight: 500;
    margin-left: 6px;
    color: var(--color-text-muted);
}

.tado-gas-card-delta {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-soft);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tado-gas-card-delta--down { color: var(--color-success-text, #16a34a); }
.tado-gas-card-delta--up   { color: var(--gas); }
.tado-gas-card-delta--flat { color: var(--color-text-muted); }

.tado-gas-card-footnote {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-muted);
    opacity: 0.8;
    margin-top: 2px;
}

/* Right-side: SVG sparkline + day-of-week labels */
.tado-gas-card-chart {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex: none;
}

/* SVG-based 7-day bars. preserveAspectRatio="none" lets the bars stretch to
   the card width without recomputing geometry on resize. */
.tado-gas-card-bars {
    display: block;
    width: 168px;
    height: 64px;
}

.tado-gas-card-bar {
    fill: var(--gas-soft);
    transition: fill 200ms ease;
}

.tado-gas-card-bar--today {
    fill: var(--gas);
    /* SVG drop-shadow approximates the box-shadow glow; CSP-safe. */
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gas) 50%, transparent));
}

.tado-gas-card-bar--empty {
    fill: color-mix(in srgb, var(--color-line) 60%, transparent);
}

.tado-gas-card-day-labels {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 6px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--color-text-muted);
}

.tado-gas-card-day-labels span[data-today="true"] {
    color: var(--gas);
    font-weight: 700;
}

.tado-gas-card--empty {
    grid-template-columns: 1fr;
    text-align: center;
}

.tado-gas-card--empty .tado-gas-card-empty-msg {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--color-text-muted);
    padding: 20px 0 8px;
}

/* ─── End Tado gas card ─── */

.tado-holiday-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid rgba(var(--color-solar-rgb), 0.45);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(var(--color-solar-rgb), 0.18), rgba(var(--color-solar-rgb), 0.06)),
        var(--color-bg-soft);
    /* amber accent comes from the tint/border; text stays full-contrast
       (solar-text on this 18% amber tint is only ~3.8:1 in light). */
    color: var(--color-text);
    box-shadow: 0 14px 34px rgba(var(--color-solar-rgb), 0.12);
}

.tado-holiday-banner--below-hero {
    margin: -8px 0 24px;
}

.tado-holiday-banner--mobile {
    margin: 0 0 12px;
}

.tado-holiday-banner-label {
    font-family: var(--font-display);
    font-size: clamp(1.16rem, 0.5vw + 1.02rem, 1.4rem);
    font-weight: 800;
    line-height: 1.15;
}

.tado-holiday-banner-value {
    justify-self: end;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(var(--color-solar-rgb), 0.14);
    font-size: 0.88rem;
    font-weight: 800;
    white-space: nowrap;
}

.tado-room-card {
    --metric-accent: var(--color-tado);
    --metric-accent-soft: var(--color-tado-soft);
    border-color: color-mix(in srgb, var(--color-tado) 14%, var(--color-line));
}

.tado-room-card--heating {
    box-shadow: 0 0 0 1px rgba(var(--color-tado-rgb), 0.16), var(--shadow-card);
}

.tado-room-card--off {
    opacity: 0.84;
}

.tado-room-card .device-metric-value {
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.tado-room-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tado-room-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.tado-room-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-line-strong);
    box-shadow: 0 0 0 5px var(--color-bg-soft);
}

.tado-room-dot--active {
    background: var(--color-info);
}

.tado-room-dot--heating {
    background: var(--color-tado);
    box-shadow: 0 0 0 5px rgba(var(--color-tado-rgb), 0.12);
}

.tado-power-toggle {
    min-width: 74px;
    height: 40px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.tado-power-toggle--on {
    background: var(--color-tado);
    border-color: var(--color-tado);
    color: var(--color-on-accent);
}

.tado-room-controls {
    grid-template-columns: minmax(280px, 1fr) minmax(260px, 0.8fr);
    align-items: start;
}

.tado-temp-panel {
    min-height: 96px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-bg-soft);
}

.tado-temp-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: 0.84rem;
    line-height: 1.35;
}

.tado-temp-state {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.tado-temp-stepper {
    display: grid;
    grid-template-columns: 38px 66px 38px;
    align-items: center;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-bg);
    overflow: hidden;
}

.tado-step-btn {
    /* Tap target raised 38→52px (2026-05-12) — primary comfort control on
       the most-touched surface, below WCAG 2.5.5 AA (44px) and the AuDHD
       64px floor at 38px. 52px keeps the stepper visually compact while
       clearing AA + matching the +/- buttons on other comfort vendor pages. */
    width: 52px;
    height: 52px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 1.25rem;
    font-weight: 800;
    cursor: pointer;
}

.tado-step-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.tado-step-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    height: 38px;
    border-inline: 1px solid var(--color-line);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tado-mode-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tado-mode-buttons .comfort-mode-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.tado-mode-buttons .comfort-mode-pill--active {
    border-color: rgba(var(--color-tado-rgb), 0.4);
    background: var(--color-tado-soft);
    color: var(--color-tado);
}

.tado-mode-buttons .comfort-mode-pill:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

@media (max-width: 900px) {
    .tado-room-controls {
        grid-template-columns: 1fr;
    }

    /* Stack the gas card on narrow screens — number above, chart below.
       Stays restrained: the bars get full width but height is pinned so the
       card doesn't dominate the page above the rooms list. */
    /* Mobile editorial chrome aligns content to 18px gutters; the gas card
       sits between the hero and a section-header so we match that gutter. */
    .tado-gas-card {
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: stretch;
        margin: 0 18px 16px;
        padding: 16px 18px;
    }

    .tado-gas-card-num {
        font-size: 44px;
    }

    .tado-gas-card-num .unit {
        font-size: 18px;
    }

    .tado-gas-card-bars,
    .tado-gas-card-day-labels {
        width: 100%;
    }

    .tado-gas-card-bars {
        height: 56px;
    }

    .tado-holiday-banner {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .tado-holiday-banner-value {
        justify-self: start;
    }

    .tado-temp-panel {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .tado-temp-stepper {
        width: max-content;
    }
}

/* ── Tado compact room list (desktop only, >1100px) ──────────────── */
.tado-room-list {
    margin-bottom: 32px;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    overflow: hidden;
}

.tado-room-list-header {
    display: grid;
    grid-template-columns: 20px minmax(140px, 220px) 120px 150px 1fr 82px 24px;
    gap: 16px;
    align-items: center;
    padding: 8px 20px;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.tado-room-row {
    border-bottom: 1px solid var(--color-line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px 24px;
    column-gap: 16px;
    align-items: center;
}

.tado-room-row:last-child {
    border-bottom: none;
}

.tado-row-trigger {
    display: grid;
    grid-template-columns: 20px minmax(140px, 220px) 120px 150px 1fr;
    gap: 16px;
    align-items: center;
    width: 100%;
    padding: 13px 0 13px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    text-align: left;
    transition: background-color 100ms ease;
    outline: none;
}

.tado-room-list--read-only .tado-room-list-header,
.tado-room-list--read-only .tado-row-trigger {
    grid-template-columns: 20px minmax(140px, 260px) 120px 150px minmax(120px, 1fr);
}

.tado-room-list--read-only .tado-room-row {
    display: block;
}

.tado-room-list--read-only .tado-room-list-header span:nth-last-child(-n + 2),
.tado-room-list--read-only .tado-row-toggle-cell {
    display: none;
}

.tado-room-list--read-only .tado-row-trigger {
    cursor: default;
}

.tado-row-trigger:hover {
    background: var(--color-bg-soft);
}

.tado-room-list--read-only .tado-row-trigger:hover {
    background: transparent;
}

.tado-row-trigger:focus-visible {
    outline: 2px solid rgba(var(--color-tado-rgb), 0.45);
    outline-offset: -2px;
}

.tado-room-row--off .tado-row-trigger {
    opacity: 0.65;
}

.tado-room-row--off .tado-row-trigger:hover {
    opacity: 1;
}

.tado-room-list--read-only .tado-room-row--off .tado-row-trigger:hover {
    opacity: 0.65;
}

.tado-row-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tado-row-temps {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.tado-row-current {
    font-size: 0.92rem;
    font-weight: 800;
    font-family: var(--font-display);
}

.tado-row-arrow {
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.tado-row-target {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.tado-row-mode {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tado-row-heat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tado-heat-bar {
    display: block;
    flex: 1;
    height: 10px;
    appearance: none;
    border: 0;
    background: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
    border-radius: 999px;
    overflow: hidden;
    min-width: 60px;
}

[data-theme="light"] .tado-heat-bar {
    background: color-mix(in srgb, var(--color-bg-soft) 20%, transparent);
}

.tado-heat-bar-fill {
    display: block;
    height: 100%;
    min-width: 8px;
    background: var(--color-tado);
    border-radius: 999px;
    transition: width 300ms ease;
    box-shadow: 0 0 8px rgba(var(--color-tado-rgb), 0.45);
}

.tado-heat-bar::-webkit-progress-bar {
    background: transparent;
    border-radius: 999px;
}

.tado-heat-bar::-webkit-progress-value {
    min-width: 8px;
    background: var(--color-tado);
    border-radius: 999px;
    transition: width 300ms ease;
    box-shadow: 0 0 8px rgba(var(--color-tado-rgb), 0.45);
}

.tado-heat-bar::-moz-progress-bar {
    min-width: 8px;
    background: var(--color-tado);
    border-radius: 999px;
    transition: width 300ms ease;
    box-shadow: 0 0 8px rgba(var(--color-tado-rgb), 0.45);
}

.tado-row-heat-val {
    font-size: 0.85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    min-width: 36px;
    text-align: right;
}

.tado-row-toggle-cell {
    display: flex;
    align-items: center;
    padding: 13px 0;
}

.tado-row-chevron {
    font-size: 1rem;
    color: var(--color-text-muted);
    transition: transform 200ms ease;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 20px;
}

.tado-row-chevron--open {
    transform: rotate(90deg);
}

.tado-row-expanded {
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-line);
    padding: 16px 20px 20px;
    background: var(--color-bg-soft);
}



/* /css/automations.css */
/* Permanent owner: Automation rules, editors, flags, blocks, dry-run, and audit-mobile presentation. */

/* ── Automations ──────────────────────────────────────────
   Page, rule cards, status chips, editor sticky footer, and
   the dashboard widget. Reuses .card / .btn / .form-* tokens
   from the rest of the file — keep new state on these classes
   only; do not re-style .card or .btn-sm globally here.
   ─────────────────────────────────────────────────────────── */

.page {
    display: block;
}

.automations-page {
    display: grid;
    gap: 16px;
}

.automation-empty-state {
    width: min(760px, 100%);
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(var(--color-water-rgb), 0.10), rgba(var(--color-heatpump-rgb), 0.08));
    box-shadow: var(--shadow-soft);
}

.automation-empty-icon {
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--color-water-rgb), 0.24);
    background: color-mix(in srgb, var(--color-bg-soft) 55%, var(--color-surface));
    color: var(--color-water);
}

.automation-empty-icon svg {
    width: 24px;
    height: 24px;
}

.automation-empty-copy {
    min-width: 0;
}

.automation-empty-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.automation-empty-text {
    margin: 5px 0 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.automation-empty-action {
    white-space: nowrap;
}

.automations-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--automation-side-rail-width);
    gap: 20px;
    align-items: start;
}

.automations-rules-col {
    display: grid;
    gap: 14px;
}

.automations-sidebar {
    position: sticky;
    top: 18px;
}

.automation-recipe-cta {
    padding: 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-card);
    box-shadow: var(--shadow-soft);
}

.automation-recipe-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    color: var(--color-text);
    font-size: 0.98rem;
    font-weight: 800;
}

.automation-recipe-text {
    margin: 0 0 12px;
    font-size: 0.84rem;
    line-height: 1.45;
}

.automation-category {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-card);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.automation-category-header {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.automation-category-header:hover,
.automation-category-header:focus-visible {
    background: var(--color-bg-soft);
    outline: none;
}

.automation-category-chevron {
    color: var(--color-text-muted);
    font-size: 1.2rem;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform var(--automation-transition-fast);
}

.automation-category--folded .automation-category-chevron {
    transform: rotate(0deg);
}

.automation-category-title {
    min-width: 0;
    flex: 1;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 800;
}

.automation-category-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
    margin-left: auto;
}

.automation-category-count,
.automation-category-active {
    white-space: nowrap;
    font-size: 0.8rem;
}

.automation-category-active {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-energy-soft);
    color: var(--color-energy);
    font-weight: 800;
}

.automation-category-body {
    display: grid;
    gap: 14px;
    padding: 0 16px 16px;
}

.rule-card-v2 {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-card);
    box-shadow: var(--shadow-soft);
    cursor: default;
    transition: background var(--automation-transition-fast), border-color var(--automation-transition-fast), opacity var(--automation-transition-fast);
}

.rule-card-v2:hover,
.rule-card-v2:focus-visible {
    border-color: var(--color-line-strong);
    background: var(--color-bg-soft);
    outline: none;
}

.rule-card--disabled {
    opacity: 0.62;
}

.rule-card-header,
.rule-card-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Two-tier card layout: row 1 = identity left, status + controls right;
   row 2 = WANNEER/ALS/DAN summary indented under the name. */
.rule-card-titlerow {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.rule-card-titlerow-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.rule-card-edit-button {
    padding: 3px 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rule-card-edit-button:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}

.rule-card-titlerow-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rule-card-name {
    min-width: 0;
    flex: 1;
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rule-card-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--color-text-muted);
}

.dot-green { background: var(--color-energy); }
.dot-amber { background: var(--color-warning); }
.dot-solar { background: var(--color-solar); }
.dot-red { background: var(--color-error); }
.dot-gray { background: var(--color-text-muted); }

/* Row 2: WANNEER/ALS/DAN summary with colored eyebrows that mirror the
   editor's three-column color language. Indented under the name (8px dot
   + 10px gap) so name + summary read as a grouped unit. */
.rule-card-summary {
    margin-left: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    font-size: 0.82rem;
    line-height: 1.45;
}

.rule-card-action-error {
    margin-left: 18px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--color-error) 26%, transparent);
    background: color-mix(in srgb, var(--color-error) 10%, transparent);
    color: var(--color-error);
    font-size: 0.8rem;
}

.rule-card-segment {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.rule-card-eyebrow {
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.rule-card-eyebrow--trigger   { color: var(--automation-node-trigger); }
.rule-card-eyebrow--condition { color: var(--automation-node-condition); }
.rule-card-eyebrow--action    { color: var(--automation-node-action); }

.rule-card-segment-text {
    color: var(--color-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Category list — flat list per category (priority sub-grouping removed). */
.automation-category-list {
    display: grid;
    gap: 8px;
}

.automation-category-disabled {
    display: grid;
    gap: 8px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-line);
}

.automation-category-disabled-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.rule-card-footer {
    justify-content: flex-end;
}

.rule-card-toggle,
.rule-card-menu-btn {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.rule-card-toggle {
    width: 42px;
    height: 28px;
    display: inline-grid;
    place-items: center;
}

.rule-card-toggle-track {
    width: 34px;
    height: 20px;
    position: relative;
    display: block;
    border-radius: 999px;
    background: var(--color-line-strong);
}

.rule-card-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    transition: transform var(--automation-transition-fast);
}

.rule-card-toggle--on .rule-card-toggle-track {
    background: var(--color-energy);
}

.rule-card-toggle--on .rule-card-toggle-thumb {
    transform: translateX(14px);
}

.rule-card-menu-wrap {
    position: relative;
}

.rule-card-menu-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
}

.rule-card-menu-btn:hover,
.rule-card-menu-btn:focus-visible {
    background: var(--color-bg-soft);
    color: var(--color-text);
    outline: none;
}

.rule-card-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 160px;
    display: grid;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.rule-card-menu-item {
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 0.84rem;
    text-align: left;
    cursor: pointer;
}

.rule-card-menu-item:hover,
.rule-card-menu-item:focus-visible {
    background: var(--color-bg-soft);
    outline: none;
}

.rule-card-menu-item--danger {
    color: var(--color-error);
}

.rules-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rule-card {
    padding: 18px 20px;
    border: 1px solid var(--color-line);
    border-radius: 22px;
    background: var(--color-card);
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 14px;
    transition: border-color 180ms ease, opacity 180ms ease;
}

.rule-card.rule-disabled {
    opacity: 0.6;
    border-style: dashed;
}

.rule-card.rule-flap-disabled {
    opacity: 1;
    border-style: solid;
    border-color: rgba(var(--color-error-light-rgb), 0.7);
    background: linear-gradient(180deg, rgba(var(--color-error-light-rgb), 0.08), var(--color-bg-alt) 42%);
}

.rule-safety-alert {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid rgba(var(--color-error-light-rgb), 0.58);
    border-radius: 14px;
    background: var(--color-error-soft);
    color: var(--color-error-text);
}

.rule-safety-alert strong {
    font-family: var(--font-display);
    font-size: 0.95rem;
}

.rule-safety-alert p {
    margin: 0;
    color: var(--color-text);
    line-height: 1.45;
}

.rule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rule-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.rule-name {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-text);
}

.rule-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 0.82rem;
    margin-top: 4px;
}

.rule-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.text-muted {
    color: var(--color-text-muted);
}

.form-error {
    color: var(--color-error-text);
    font-size: 0.86rem;
    margin: 4px 0 0;
}

/* Status chip — inline pill rendered next to the rule name. */
.automation-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.chip-green {
    background: rgba(var(--color-success-rgb), 0.15);
    color: var(--color-success-text);
}

.chip-amber {
    background: rgba(var(--color-warning-rgb), 0.15);
    color: var(--color-warning-text);
}

/* Benign automation phases (condition_met / cooldown) — brand amber, not the
   caution-orange the de-overload split out (--color-warning). */
.chip-solar {
    background: rgba(var(--color-solar-rgb), 0.15);
    color: var(--color-solar-text);
}

.chip-gray {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
}

.chip-red {
    background: rgba(var(--color-error-rgb), 0.15);
    color: var(--color-error-text);
}

/* Editor — wraps the form inside the bottom sheet. */
.rule-editor {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
}

.rule-editor-intro {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid rgba(var(--color-water-rgb), 0.18);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(var(--color-water-rgb), 0.08), rgba(var(--color-heatpump-rgb), 0.06));
}

.rule-editor-eyebrow {
    margin: 0;
    color: var(--color-water);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rule-editor-lede {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.rule-editor-presets {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-bg-soft) 45%, transparent);
}

.rule-editor-presets-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.rule-editor-presets-head strong {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.9rem;
}

.rule-editor-presets-head span {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: right;
}

.rule-editor-preset-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rule-editor-preset {
    min-height: 74px;
    display: grid;
    gap: 5px;
    align-content: start;
    padding: 12px;
    border: 1px solid rgba(var(--color-water-rgb), 0.20);
    border-radius: var(--radius-sm);
    background: rgba(var(--color-water-rgb), 0.07);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.rule-editor-preset:hover,
.rule-editor-preset:focus-visible {
    border-color: rgba(var(--color-water-rgb), 0.48);
    background: rgba(var(--color-water-rgb), 0.12);
    outline: none;
}

.rule-editor-preset:active {
    transform: translateY(1px);
}

.rule-editor-preset strong {
    color: var(--color-text);
    font-size: 0.86rem;
}

.rule-editor-preset span {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.rule-editor-layout {
    display: grid;
    gap: 16px;
}

.rule-editor-main {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.rule-editor-section {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-bg-soft) 40%, transparent);
}

.rule-editor-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.rule-editor-section-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rule-editor-step {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(var(--color-water-rgb), 0.32);
    border-radius: 999px;
    background: rgba(var(--color-water-rgb), 0.10);
    color: var(--color-water);
    font-size: 0.8rem;
    font-weight: 800;
}

.rule-editor-section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
}

.rule-editor-section-note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
    text-align: right;
    max-width: 260px;
}

.rule-editor-section-body {
    display: grid;
    gap: 14px;
}

.rule-editor-section--compact {
    background: color-mix(in srgb, var(--color-bg-soft) 35%, transparent);
}

.rule-editor-switch-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 12px;
    align-items: stretch;
}

.rule-editor-switch {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    cursor: pointer;
}

.rule-editor-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rule-editor-switch-control {
    width: 46px;
    height: 26px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--color-line-strong);
    border: 1px solid var(--color-line-strong);
    transition: background-color 160ms ease, border-color 160ms ease;
}

.rule-editor-switch-control::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--color-text-muted);
    transition: transform 160ms ease, background-color 160ms ease;
}

.rule-editor-switch input:checked + .rule-editor-switch-control {
    background: rgba(var(--color-success-rgb), 0.18);
    border-color: rgba(var(--color-success-rgb), 0.45);
}

.rule-editor-switch input:checked + .rule-editor-switch-control::after {
    transform: translateX(20px);
    background: var(--color-success-text);
}

.rule-editor-switch input:focus-visible + .rule-editor-switch-control {
    box-shadow: 0 0 0 3px rgba(var(--color-water-rgb), 0.20);
}

.rule-editor-switch-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.rule-editor-switch-copy strong {
    color: var(--color-text);
    font-size: 0.9rem;
}

.rule-editor-switch-copy small {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.rule-editor-summary {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 16px;
    border: 1px solid rgba(var(--color-water-rgb), 0.18);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-bg-soft) 68%, var(--color-surface));
}

.rule-editor-summary-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rule-editor-summary-head strong {
    min-width: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.94rem;
    overflow-wrap: anywhere;
}

.rule-editor-summary-status {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
}

.rule-editor-summary-status.is-on {
    background: rgba(var(--color-success-rgb), 0.14);
    color: var(--color-success-text);
}

.rule-editor-summary-status.is-off {
    background: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
    color: var(--color-text-muted);
}

.rule-editor-summary-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rule-editor-summary-list li {
    display: grid;
    gap: 4px;
    padding-left: 12px;
    border-left: 2px solid rgba(var(--color-water-rgb), 0.32);
}

.rule-editor-summary-list span {
    color: var(--color-water);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rule-editor-summary-list p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.82rem;
    line-height: 1.45;
}

.rule-editor-summary-warning,
.rule-editor-summary-ok {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    line-height: 1.4;
}

.rule-editor-summary-warning {
    background: rgba(var(--color-warning-rgb), 0.11);
    color: var(--color-warning-text);
}

.rule-editor-summary-ok {
    background: rgba(var(--color-success-rgb), 0.11);
    color: var(--color-success-text);
}

.rule-editor-test {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-bg-soft) 42%, transparent);
}

.rule-editor-test-copy {
    display: grid;
    gap: 4px;
}

.rule-editor-test-copy strong {
    color: var(--color-text);
    font-size: 0.86rem;
}

.rule-editor-test-copy p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.rule-editor-test-error {
    color: var(--color-error-text) !important;
}

.rule-editor-test .btn {
    justify-self: start;
}

.rule-editor .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 0;
}

.rule-editor .form-group {
    gap: 7px;
}

.rule-editor .form-group label {
    color: var(--color-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.rule-editor .form-control {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    color: var(--color-text);
    font: inherit;
    font-size: 0.94rem;
    outline: none;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.rule-editor .form-control::placeholder {
    color: var(--color-text-faint);
}

.rule-editor .form-control:focus {
    border-color: rgba(var(--color-water-rgb), 0.65);
    background: var(--color-bg-deep);
    box-shadow: 0 0 0 3px rgba(var(--color-water-rgb), 0.16);
}

.rule-editor select.form-control {
    appearance: none;
    padding-right: 36px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text-soft) 50%),
        linear-gradient(135deg, var(--color-text-soft) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 19px,
        calc(100% - 12px) 19px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.rule-editor select.form-control option {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.rule-editor .form-hint {
    margin: -4px 0 0;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* Sticky footer — keeps Save/Cancel visible above the iOS keyboard
   inside the BottomSheet's scroll container (Issue 17). */
.rule-editor .form-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 0 0;
    margin-top: auto;
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-line);
}

.automation-editor-modal {
    display: none;
}

@media (min-width: 1101px) {
    .automation-editor-modal {
        position: fixed;
        inset: 0;
        z-index: 55;
        display: none;
        place-items: center;
        padding: 32px;
    }

    .automation-editor-modal--open {
        display: grid;
    }

    .automation-editor-modal-scrim {
        position: absolute;
        inset: 0;
        border: 0;
        background: var(--color-shell-scrim);
        cursor: pointer;
    }

    .automation-editor-modal-panel {
        position: relative;
        z-index: 1;
        width: min(1080px, calc(100vw - 64px));
        max-height: min(820px, calc(100vh - 64px));
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 0;
        padding: 0;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-lg);
        background: var(--color-bg-alt);
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
        overflow: hidden;
    }

    .automation-editor-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 22px 24px 18px;
        border-bottom: 1px solid var(--color-line);
    }

    .automation-editor-modal-title {
        margin: 0;
        font-family: var(--font-display);
        font-size: 1.24rem;
        font-weight: 700;
        color: var(--color-text);
    }

    .automation-editor-modal-close {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border: 1px solid var(--color-line);
        border-radius: 10px;
        background: transparent;
        color: var(--color-text);
        font-size: 1.3rem;
        line-height: 1;
        cursor: pointer;
        display: inline-grid;
        place-items: center;
    }

    .automation-editor-modal .rule-editor {
        min-height: 0;
        overflow-y: auto;
        padding: 20px 24px 24px;
        scrollbar-width: thin;
    }

    .automation-editor-modal .rule-editor-layout {
        grid-template-columns: minmax(0, 1fr) 310px;
        align-items: start;
    }

    .automation-editor-modal .rule-editor-summary {
        position: sticky;
        top: 0;
    }

    .automation-editor-modal .rule-editor .form-actions {
        margin: 2px -24px -24px;
        padding: 16px 24px;
        background: color-mix(in srgb, var(--color-bg-deep) 72%, transparent);
    }
}

/* ── AutomationRuleEditor — simplified UX additions ───────────────────── */

/* Direction chip pair */
.re-dir-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.re-dir-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 160ms ease;
    text-align: center;
}
.re-dir-chip--active {
    border-color: rgba(var(--color-water-rgb), 0.75);
    background: rgba(var(--color-water-rgb), 0.12);
    color: var(--color-text);
}

/* Input with unit suffix */
.re-input-with-unit {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.re-input-with-unit:focus-within {
    border-color: rgba(var(--color-water-rgb), 0.65);
    box-shadow: 0 0 0 3px rgba(var(--color-water-rgb), 0.16);
}
.re-input-with-unit input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 0.94rem;
    outline: none;
}
.re-unit-badge {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-left: 1px solid var(--color-line-strong);
    background: color-mix(in srgb, var(--color-bg-soft) 70%, var(--color-surface));
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

/* Trigger preview: compact source/on/off explanation inside the trigger section. */
.re-trigger-preview {
    margin: -4px 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(var(--color-water-rgb), 0.07);
    border: 1px solid rgba(var(--color-water-rgb), 0.18);
    color: var(--color-text-soft);
    font-size: 0.82rem;
    line-height: 1.45;
}

.re-trigger-preview-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}

.re-trigger-preview-row + .re-trigger-preview-row {
    margin-top: 4px;
}

.re-trigger-preview-row span {
    color: var(--color-water);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.re-trigger-preview strong {
    color: var(--color-text);
    font-weight: 700;
}

/* Advanced toggle */
.re-advanced-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 160ms ease;
}
.re-advanced-toggle:hover { color: var(--color-text-soft); }
.re-advanced-toggle svg { transition: transform 160ms ease; }
.re-advanced-toggle--open svg { transform: rotate(180deg); }
.re-advanced-section {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px dashed var(--color-line);
    border-radius: var(--radius-sm);
    margin-top: -4px;
}

/* Deactivation hint for power/boost */
.re-deactivate-hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 6px 0 0;
}

@media (max-width: 720px) {
    .automation-empty-state {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        padding: 18px;
    }

    .automation-empty-action {
        width: 100%;
    }

    .rule-editor-section-head {
        display: grid;
        gap: 4px;
    }

    .rule-editor-section-note {
        text-align: left;
        max-width: none;
    }

    .rule-editor-section-kicker {
        align-items: flex-start;
    }

    .rule-editor-switch-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .rule-editor-presets-head {
        display: grid;
        gap: 4px;
    }

    .rule-editor-presets-head span {
        text-align: left;
    }

    .rule-editor-preset-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .rule-editor .form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .rule-editor-summary {
        order: -1;
    }
}

/* Automation v2 modal/editor styles live in app.css because production CSP
   blocks inline <style> nodes generated from Vue string templates. */
.automation-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: none;
    place-items: center;
    padding: 32px;
}

.automation-editor-modal--open {
    display: grid;
}

.automation-editor-modal-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: var(--color-shell-scrim);
    cursor: pointer;
}

.automation-editor-modal-panel {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100vw - 64px));
    max-height: min(880px, calc(100vh - 64px));
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-card), 0 28px 80px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.automation-editor {
    min-height: min(var(--automation-editor-min-height), calc(100vh - 64px));
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 90vh;
    background: var(--color-surface);
    border-radius: inherit;
}

.automation-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-line);
}

.automation-editor__header-left,
.automation-editor__header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.automation-editor__header-left {
    flex: 1;
    min-width: 0;
}

.automation-editor__header-right {
    flex-shrink: 0;
}

.automation-editor__back {
    background: none;
    border: 0;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.automation-editor__back:hover {
    color: var(--color-text);
    background: var(--color-bg-soft);
}

.automation-editor__name-input {
    flex: 1;
    min-width: 120px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 4px 8px;
}

.automation-editor__name-input:focus {
    border-color: var(--color-solar);
    outline: none;
    background: var(--color-bg-soft);
}

.automation-editor__status {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.automation-editor__status--idle { color: var(--automation-status-idle); background: color-mix(in srgb, var(--color-text-muted) 10%, transparent); }
.automation-editor__status--active { color: var(--automation-status-active); background: rgba(var(--color-success-rgb), 0.12); }
.automation-editor__status--cooldown { color: var(--automation-status-cooldown); background: rgba(var(--color-warning-rgb), 0.12); }
.automation-editor__status--blocked { color: var(--automation-status-blocked); background: rgba(var(--color-error-rgb), 0.12); }

.automation-editor__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.automation-editor__toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.automation-editor__toggle-track {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--color-bg-soft);
    position: relative;
    transition: background 150ms ease;
}

.automation-editor__toggle-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-text-muted);
    transition: transform 150ms ease, background 150ms ease;
}

.automation-editor__toggle input:checked + .automation-editor__toggle-track {
    background: var(--color-energy);
}

.automation-editor__toggle input:checked + .automation-editor__toggle-track::after {
    transform: translateX(16px);
    background: var(--color-on-accent);
}

.automation-editor__toggle-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.automation-editor__save-btn {
    background: var(--color-solar) !important;
    border-color: var(--color-solar) !important;
    color: var(--color-on-accent) !important;
}

.automation-editor__save-btn:disabled {
    opacity: 0.5;
}

.automation-editor__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-line);
    padding: 0 20px;
}

.automation-editor__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 0;
}

.automation-editor__meta-field {
    width: min(360px, 100%);
    display: grid;
    gap: 6px;
}

.automation-editor__meta-field span {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.automation-editor__meta-field input {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: 6px;
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 4px 8px;
    outline: none;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.automation-editor__meta-field input:hover {
    border-color: var(--color-line-strong);
}

.automation-editor__meta-field input:focus {
    border-color: var(--color-solar);
    background: var(--color-bg-soft);
}

.automation-editor__tab {
    background: none;
    border: 0;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.85rem;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--automation-transition-fast), border-color var(--automation-transition-fast);
}

.automation-editor__tab:hover { color: var(--color-text); }

.automation-editor__tab--active {
    color: var(--color-solar);
    border-bottom-color: var(--color-solar);
}

.automation-editor__flow-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.automation-editor__step-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-line);
    padding: 0 12px;
    overflow-x: auto;
}

.automation-editor__step-tab {
    position: relative;
    background: none;
    border: 0;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.8rem;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--automation-transition-fast);
}

.automation-editor__step-tab:hover { color: var(--color-text); }

.automation-editor__step-tab--active {
    color: var(--color-text);
    border-bottom-color: var(--color-solar);
}

.automation-editor__step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 9px;
    padding: 0 5px;
    margin-left: 4px;
    vertical-align: middle;
}

.automation-editor__step-badge--count {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
}

.automation-editor__step-badge--warn {
    background: rgba(var(--color-warning-rgb), 0.18);
    color: var(--automation-status-cooldown);
}

.automation-editor__columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--automation-column-gap);
    padding: 20px;
    align-items: stretch;
}

.automation-editor__column {
    display: flex;
    flex-direction: column;
    gap: var(--automation-block-gap);
    min-width: 0;
    min-height: 260px;
    padding: 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-bg-soft) 52%, var(--color-surface));
}

.automation-editor__column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-line);
    flex-wrap: wrap;
}

.automation-editor__column-header--trigger { box-shadow: inset 0 -2px 0 var(--automation-node-trigger); }
.automation-editor__column-header--condition { box-shadow: inset 0 -2px 0 var(--automation-node-condition); }
.automation-editor__column-header--action { box-shadow: inset 0 -2px 0 var(--automation-node-action); }

.automation-editor__column-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.automation-editor__column-header--trigger .automation-editor__column-label { color: var(--automation-node-trigger); }
.automation-editor__column-header--condition .automation-editor__column-label { color: var(--automation-node-condition); }
.automation-editor__column-header--action .automation-editor__column-label { color: var(--automation-node-action); }

.automation-editor__logic-toggle {
    display: flex;
    gap: 2px;
    background: var(--color-bg-soft);
    border-radius: 6px;
    padding: 2px;
}

.automation-editor__logic-btn {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--automation-transition-fast), color var(--automation-transition-fast);
}

.automation-editor__logic-btn:hover {
    color: var(--color-text);
}

.automation-editor__logic-btn--active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.automation-editor__block-list {
    display: flex;
    flex-direction: column;
    gap: var(--automation-block-gap);
    min-height: 56px;
}

.automation-editor__below {
    padding: 0 20px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.automation-editor__deactivation {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    background: var(--color-bg-soft);
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--automation-node-rollback);
}

.automation-editor__knobs {
    padding: 16px;
    background: color-mix(in srgb, var(--color-bg-soft) 70%, var(--color-surface));
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
}

.automation-editor__knobs-title {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: 600;
}

.automation-editor__knob-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.automation-editor__knob-row .form-control {
    flex: 1;
    min-width: 0;
}

.automation-editor__dry-run {
    padding: 12px 20px;
    background: var(--color-bg-soft);
    border-radius: 8px;
    margin: 0 20px;
    font-size: 0.85rem;
}

.automation-editor__error {
    color: var(--color-error-text);
    padding: 0 20px;
    font-size: 0.85rem;
}

.automation-editor__validation-hint {
    color: var(--automation-status-cooldown);
    padding: 0 20px;
    font-size: 0.8rem;
}

.automation-editor__validation-hint--top {
    margin: 0 20px 12px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--color-warning-rgb), 0.34);
    border-radius: var(--radius-sm);
    background: rgba(var(--color-warning-rgb), 0.10);
}

.automation-editor__footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-line);
    z-index: 10;
}

.form-control--inline {
    display: inline-block;
    width: auto;
}

.flag-strip {
    display: grid;
    gap: 12px;
    margin: 18px 0 24px;
    padding: 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-card);
    box-shadow: var(--shadow-soft);
}

.flag-strip--empty {
    max-width: 760px;
}

.flag-strip__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.flag-strip__title-group {
    display: grid;
    gap: 3px;
}

.flag-strip__title {
    margin: 0;
    font-family: var(--font-display);
    color: var(--color-text);
    font-size: 0.94rem;
    font-weight: 800;
}

.flag-strip__text {
    margin: 0;
    max-width: 620px;
    color: var(--color-text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.flag-strip__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.flag-chip-wrap {
    display: grid;
    gap: 4px;
}

.flag-chip-error {
    max-width: 280px;
    color: var(--color-error);
    font-size: 0.76rem;
    line-height: 1.35;
}

.flag-chip,
.flag-strip__add {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px 5px 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font: inherit;
    font-size: 0.86rem;
}

.flag-strip__add {
    min-height: 38px;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
}

.flag-strip__add:hover,
.flag-strip__add:focus-visible {
    border-color: var(--color-line-strong);
    background: var(--color-bg-deep);
    color: var(--color-text);
    outline: none;
}

.flag-chip--active {
    border-color: color-mix(in srgb, var(--color-energy) 38%, var(--color-line));
    background: color-mix(in srgb, var(--color-energy) 10%, var(--color-surface));
    color: var(--color-text);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-energy) 82%, transparent);
}

.flag-chip-main {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: inherit;
}

.flag-chip-label {
    font-weight: 700;
}

.flag-chip--active .flag-chip-label {
    color: var(--color-energy);
}

.flag-chip-schedule {
    color: var(--color-text-muted);
    font-size: 0.76rem;
}

.flag-chip-edit {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.flag-chip-edit:hover,
.flag-chip-edit:focus-visible {
    background: var(--color-bg-deep);
    color: var(--color-text);
    outline: none;
}

.flag-chip-toggle {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    border: 1px solid var(--color-line);
    background: color-mix(in srgb, var(--color-bg-deep) 68%, transparent);
    color: var(--color-text-muted);
    padding: 3px 5px 3px 9px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition:
        background-color var(--automation-transition-fast),
        border-color var(--automation-transition-fast),
        color var(--automation-transition-fast);
}

.flag-chip-toggle:hover,
.flag-chip-toggle:focus-visible {
    border-color: var(--color-line-strong);
    background: var(--color-bg-deep);
    color: var(--color-text-soft);
    outline: none;
}

.flag-chip-toggle:focus-visible {
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.flag-chip-toggle-status {
    min-width: 22px;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.flag-chip-toggle-track {
    width: 28px;
    height: 16px;
    display: block;
    position: relative;
    border-radius: 999px;
    background: var(--color-line-strong);
    transition: background var(--automation-transition-fast);
}

.flag-chip-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    transition: transform var(--automation-transition-fast);
}

.flag-chip-toggle--on {
    border-color: color-mix(in srgb, var(--color-energy) 44%, var(--color-line));
    background: color-mix(in srgb, var(--color-energy) 14%, transparent);
    color: var(--color-energy);
}

.flag-chip-toggle--on .flag-chip-toggle-track {
    background: var(--color-energy);
}

.flag-chip-toggle--on .flag-chip-toggle-thumb {
    transform: translateX(12px);
}

.flag-strip__add {
    border-style: dashed;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 800;
}

.flag-strip__add-icon {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font-size: 0.9rem;
}

/* ── Flag editor modal ─────────────────────────────────────────────────── */

.flag-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: grid;
    place-items: center;
    padding: 24px;
}

.flag-editor-modal-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: var(--color-shell-scrim);
    cursor: pointer;
}

.flag-editor-modal-panel {
    position: relative;
    z-index: 1;
    width: min(480px, calc(100vw - 32px));
    max-height: min(680px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
    overflow: hidden;
}

.flag-editor-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--color-line);
    flex-shrink: 0;
}

.flag-editor-modal-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-text);
}

.flag-editor-modal-close {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    background: transparent;
    color: var(--color-text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
}

.flag-editor-modal-close:hover {
    background: var(--color-bg-soft);
}

.flag-editor-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* ── Flag editor form ──────────────────────────────────────────────────── */

.flag-editor {
    display: grid;
    gap: 16px;
}

.flag-editor-field {
    display: grid;
    gap: 6px;
}

.flag-editor-row {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.flag-editor-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-text-soft);
    letter-spacing: 0.01em;
}

.flag-editor-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.flag-editor-input:focus {
    outline: none;
    border-color: var(--color-energy);
    background: var(--color-bg);
}

.flag-editor-input[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
}

.flag-editor-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.flag-editor-toggle-track {
    width: 38px;
    height: 22px;
    display: block;
    position: relative;
    border-radius: 999px;
    background: var(--color-line-strong);
    transition: background var(--automation-transition-fast);
    flex-shrink: 0;
}

.flag-editor-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    transition: transform var(--automation-transition-fast);
}

.flag-editor-toggle--on .flag-editor-toggle-track {
    background: var(--color-energy);
}

.flag-editor-toggle--on .flag-editor-toggle-thumb {
    transform: translateX(16px);
}

.flag-editor-toggle-label {
    font-size: 0.86rem;
    color: var(--color-text-soft);
    width: 2.2ch;
    text-align: right;
}

.flag-editor-slug-hint {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
}

.flag-editor-section {
    display: grid;
    gap: 12px;
    border-top: 1px solid var(--color-line);
    padding-top: 14px;
}

.flag-editor-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-soft);
}

.flag-editor-section-arrow {
    display: inline-block;
    font-size: 0.6rem;
    transition: transform 180ms ease;
}

.flag-editor-section-arrow--open {
    transform: rotate(90deg);
}

.flag-editor-section-body {
    display: grid;
    gap: 12px;
}

.flag-editor-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.flag-editor-error {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-error) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
    color: var(--color-error);
    font-size: 0.84rem;
}

.flag-editor-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid var(--color-line);
}

@media (max-width: 600px) {
    .flag-editor-modal {
        padding: 0;
        place-items: end center;
    }

    .flag-editor-modal-panel {
        width: 100%;
        max-height: 90dvh;
        border-radius: 20px 20px 0 0;
        border-bottom-width: 0;
    }
}

/* ── Block picker ──────────────────────────────────────────────────────── */

.block-picker {
    position: relative;
}

.block-picker__trigger {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--automation-transition-fast), border-color var(--automation-transition-fast), color var(--automation-transition-fast);
}

.block-picker__trigger:hover,
.block-picker__trigger:focus-visible {
    background: var(--color-bg-soft);
    border-color: var(--color-line-strong);
    color: var(--color-text);
    outline: none;
}

.block-picker__popover {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    display: grid;
    gap: 4px;
    padding: 10px;
    max-height: min(60vh, 480px);
    overflow-y: auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.block-picker__option {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms ease, transform 120ms ease;
}

.block-picker__option:active {
    transform: scale(0.99);
}

.block-picker__option:hover,
.block-picker__option:focus-visible {
    background: var(--color-bg-soft);
    outline: none;
}

.block-picker__option-icon {
    font-size: 1rem;
    line-height: 1.25;
}

.block-picker__option-text {
    display: grid;
    gap: 2px;
}

.block-picker__option-text strong {
    font-size: 0.86rem;
    font-weight: 700;
}

.block-picker__option-text small {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.automation-block {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.automation-block--trigger { border-left: 3px solid var(--automation-node-trigger); }
.automation-block--condition { border-left: 3px solid var(--automation-node-condition); }
.automation-block--action { border-left: 3px solid var(--automation-node-action); }

.automation-block__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-line);
}

.automation-block__icon {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 7px;
    background: var(--color-bg-soft);
    font-size: 0.86rem;
}

/* Inline wrapper for SVG icons injected via v-html into the automation
   editor/flow/recipes (replaced the old decorative emoji). Self-sizing in `em`
   so it scales with the parent and renders identically regardless of the parent
   span's own font-size. Colour inherits, so accent classes still tint it. */
.auto-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.15em;
    color: inherit;
}
/* Size the SVG child, NOT the host — so .auto-glyph layered onto an already-
   sized element (a 28px .flag-chip-edit button, a 22px .automation-block__icon
   box) keeps that element's box and just normalises the glyph. A bare wrapper
   span shrink-wraps to the 1.05em glyph. */
.auto-glyph svg {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    display: block;
}

.automation-block__order-badge {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--color-energy-soft);
    color: var(--color-energy);
    font-size: 0.75rem;
    font-weight: 800;
}

.automation-block__title {
    min-width: 0;
    flex: 1;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 800;
}

.automation-block__remove {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.automation-block__remove:hover,
.automation-block__remove:focus-visible {
    border-color: var(--color-error-soft);
    background: var(--color-error-soft);
    color: var(--color-error);
    outline: none;
}

.automation-block__reorder {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.automation-block__move {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition:
        border-color var(--automation-transition-fast),
        background var(--automation-transition-fast),
        color var(--automation-transition-fast);
}

.automation-block__move:hover:not(:disabled),
.automation-block__move:focus-visible:not(:disabled) {
    border-color: var(--automation-node-action);
    background: var(--color-energy-soft);
    color: var(--automation-node-action);
    outline: none;
}

.automation-block__move:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.automation-block__body {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.automation-block .form-group,
.automation-safety .form-group {
    display: grid;
    gap: 7px;
}

.automation-block .form-group label,
.automation-block .form-group .form-label,
.automation-safety .form-group label {
    color: var(--color-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.automation-block .form-control,
.automation-safety .form-control,
.automation-editor__meta-field input,
.automation-editor__knob-row .form-control {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    color: var(--color-text);
    font: inherit;
    font-size: 0.94rem;
    outline: none;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.automation-block .form-control:focus,
.automation-safety .form-control:focus,
.automation-editor__meta-field input:focus,
.automation-editor__knob-row .form-control:focus {
    border-color: rgba(var(--color-water-rgb), 0.65);
    background: var(--color-bg-deep);
    box-shadow: 0 0 0 3px rgba(var(--color-water-rgb), 0.16);
}

.automation-block select.form-control,
.automation-safety select.form-control {
    appearance: none;
    padding-right: 36px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text-soft) 50%),
        linear-gradient(135deg, var(--color-text-soft) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 19px,
        calc(100% - 12px) 19px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.automation-block select.form-control option,
.automation-safety select.form-control option {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.automation-block__summary {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.automation-block__input-unit {
    display: flex;
    align-items: stretch;
}

.automation-block__input-unit .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.automation-block__unit {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    padding: 0 10px;
    border: 1px solid var(--color-line);
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.automation-block__days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.automation-block__day-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.automation-block__day-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.automation-block__day-chip--active {
    border-color: var(--color-info);
    background: var(--color-info-soft);
    color: var(--color-info);
}

.automation-block__rollback {
    border-top: 1px solid var(--color-line);
    padding-top: 10px;
}

.automation-block__rollback-toggle {
    color: var(--color-text-soft);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
}

.automation-block__rollback-body {
    display: grid;
    gap: 12px;
    padding-top: 10px;
}

/* Automation v2 — mode chip picker (mode_active trigger / mode_is condition) */
.automation-choice-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.automation-choice-chip {
    border: 1px solid var(--color-line);
    background: var(--color-bg-soft);
    color: var(--color-text);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.automation-choice-chip:hover { border-color: var(--color-info); }
.automation-choice-chip--active {
    background: var(--color-info-soft);
    border-color: var(--color-info);
    color: var(--color-info);
}
.form-group--empty .form-help { color: var(--color-text-soft); font-style: italic; }

.automation-safety {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}

.automation-safety__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.automation-safety__toggle::-webkit-details-marker {
    display: none;
}

.automation-safety__toggle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(-45deg);
    transition: transform var(--automation-transition-fast);
}

.automation-safety[open] .automation-safety__toggle::before {
    transform: rotate(45deg);
}

.automation-safety__icon {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    font-size: 0.95rem;
}

.automation-safety__title {
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 800;
}

.automation-safety__cooldown-badge {
    margin-left: auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.automation-safety__body {
    display: grid;
    gap: 14px;
    padding: 0 14px 14px;
}

.automation-safety__hint {
    display: block;
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.automation-safety__explanation,
.automation-safety__constraints {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
}

.automation-safety__explanation p,
.automation-safety__constraints p {
    margin: 0;
}

.automation-flow {
    position: relative;
    background: var(--color-content-surface);
    border-radius: var(--radius-lg);
    padding: 24px;
    min-height: 300px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.automation-flow__svg {
    display: block;
}

.automation-flow__node {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.automation-flow__node:hover,
.automation-flow__node:focus-visible {
    opacity: 0.85;
}

.automation-flow__node:focus-visible rect,
.automation-flow__node:focus-visible circle {
    stroke-width: 2.5;
}

.automation-flow__edge--animated {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: automation-flow-dash 1.5s ease forwards;
}

@keyframes automation-flow-dash {
    to { stroke-dashoffset: 0; }
}

.automation-flow__inspector {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: var(--color-card);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    min-width: 180px;
    max-width: 280px;
    z-index: 10;
    box-shadow: var(--shadow-panel);
}

.automation-flow__inspector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    gap: 8px;
}

.automation-flow__inspector-close {
    background: none;
    border: 0;
    color: var(--color-text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}

.automation-flow__inspector-detail {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.dryrun-panel {
    margin: 0 20px 12px;
    padding: 14px 16px;
    background: var(--color-bg-soft);
    border-radius: 10px;
    font-size: 0.84rem;
    border: 1px solid var(--color-line);
}

.dryrun-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.dryrun-panel__title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-text);
}

.dryrun-panel__close {
    background: none;
    border: 0;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}

.dryrun-panel__close:hover {
    color: var(--color-text);
    background: var(--color-line);
}

.dryrun-panel__loading,
.dryrun-panel__no-data {
    color: var(--color-text-muted);
    padding: 4px 0;
}

.dryrun-panel__loading {
    font-style: italic;
}

.dryrun-panel__section {
    margin-bottom: 10px;
}

.dryrun-panel__section-label {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dryrun-panel__logic-chip {
    font-weight: 400;
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0;
    background: var(--color-line);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--color-text-soft);
}

.dryrun-panel__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.dryrun-check,
.dryrun-cross {
    font-weight: 700;
    min-width: 16px;
    text-align: center;
}

.dryrun-check { color: var(--color-success); }
.dryrun-cross { color: var(--color-text-faint); }

.dryrun-panel__row-label {
    color: var(--color-text-soft);
}

.dryrun-panel__row-value {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.dryrun-panel__row-detail {
    color: var(--color-text-faint);
    font-size: 0.78rem;
}

.dryrun-panel__row-error {
    color: var(--color-error-text);
    font-size: 0.78rem;
}

.dryrun-panel__verdict {
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
}

.dryrun-panel__verdict--activate {
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.dryrun-panel__verdict--block {
    background: var(--color-line);
    color: var(--color-text-muted);
}

.dryrun-panel__verdict-reason {
    font-weight: 400;
    font-size: 0.8rem;
}

.dryrun-slide-enter-active,
.dryrun-slide-leave-active {
    transition: opacity 180ms ease-out, max-height 180ms ease-out;
    overflow: hidden;
}

.dryrun-slide-enter-from,
.dryrun-slide-leave-to {
    opacity: 0;
    max-height: 0;
}

.dryrun-slide-enter-to,
.dryrun-slide-leave-from {
    opacity: 1;
    max-height: 400px;
}

@media (prefers-reduced-motion: reduce) {
    .automation-flow__edge--animated {
        animation: none;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }
}

@media (max-width: 768px) {
    .automation-editor-modal {
        place-items: stretch;
        padding: 0;
    }

    .automation-editor-modal-panel {
        width: 100vw;
        max-height: 100dvh;
        border-radius: 0;
        border-width: 0;
    }

    .automation-editor {
        min-height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .automation-editor__columns {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }

    .automation-editor__column {
        min-height: 0;
    }

    .automation-editor__header {
        padding: 12px 14px;
    }

    .automation-editor__header-right {
        display: none;
    }

    .automation-editor__below {
        padding: 0 12px 12px;
    }

    .automations-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .automations-sidebar {
        position: static;
    }

    .automation-category-header {
        flex-wrap: wrap;
    }

    .automation-category-title {
        flex-basis: calc(100% - 32px);
    }

    .automation-category-meta {
        justify-content: flex-start;
        width: 100%;
        margin-left: 28px;
    }

    .automation-editor__meta {
        padding: 12px 12px 0;
    }

    .automation-editor__knob-row,
    .dryrun-panel__row {
        flex-wrap: wrap;
    }
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    padding: 4px 6px;
    font: inherit;
    font-weight: 700;
    color: var(--color-water-text);
    cursor: pointer;
    border-radius: 8px;
}

.btn-link:hover { text-decoration: underline; }

.btn-outline {
    border-color: var(--color-line-strong);
    background: transparent;
    color: var(--color-text);
}

.btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--color-text-muted);
}

.btn-ghost:hover:not(:disabled) {
    color: var(--color-text);
    background: var(--color-bg-soft);
}

.btn-ghost.btn-danger {
    color: var(--color-error);
    border-color: var(--color-error-soft);
}

.btn-ghost.btn-danger:hover:not(:disabled) {
    color: var(--color-error);
    background: var(--color-error-soft);
}

/* Mobile: bigger touch targets for the per-rule action row + the
   "+ Nieuwe regel" trigger in the SectionHeader (Issue 16). The base
   .btn-sm renders ~40px which is borderline on phones with three
   adjacent controls per card.                                       */
@media (max-width: 640px) {
    .rule-actions .btn-sm,
    .automations-page .btn-sm {
        min-height: 44px;
        padding: 10px 14px;
    }

    .rule-actions {
        width: 100%;
    }

    .rule-actions .btn-sm {
        flex: 1 1 auto;
    }
}

/* ─── Automation Rule Summary ─── */
.automation-rule-summary {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ─── Knob Control ─── */
.knob-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.knob-control__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-soft);
}

.knob-control__desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* ─── Comfort desktop grid ─── */
.comfort-desktop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

/* ─── Audit mobile layout ─── */
.audit-mobile-brief {
    margin: 10px 16px 0;
    padding: 13px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 72%, transparent), transparent),
        var(--color-card);
}
.audit-mobile-brief-main {
    min-width: 0;
}
.audit-mobile-brief-main span,
.audit-mobile-brief-stat span {
    color: var(--color-text-faint);
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.audit-mobile-brief-main strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    margin-top: 4px;
    color: var(--color-text);
    font-size: 0.96rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audit-mobile-brief-main p {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}
.audit-mobile-brief-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-line);
}
.audit-mobile-brief-stat {
    min-width: 0;
}
.audit-mobile-brief-stat strong {
    display: block;
    margin-top: 4px;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.1;
}
.audit-mobile-brief-stat em {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-style: normal;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audit-mobile-brief-stat--attention strong {
    color: var(--color-warning-text);
}
.audit-tabs--mobile {
    width: auto;
    margin: 12px 16px 0;
}

.audit-mobile-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px 4px;
}

.audit-mobile-toolbar > span {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-mobile-toolbar > div {
    display: flex;
    gap: 8px;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.audit-mobile-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 16px 0;
    padding: 12px 0 4px;
    border-top: 1px solid var(--color-line);
}

.audit-mobile-filters .audit-filter-select,
.audit-mobile-filters .audit-filter-input {
    width: 100%;
    min-width: 0;
    font-size: 1rem; /* prevent iOS auto-zoom */
}

.audit-mobile-filter-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.audit-mobile-filter-row .audit-filter-input {
    flex: 1;
}

.audit-mobile-card {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 16px;
}

.audit-mobile-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.audit-mobile-ts {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    white-space: nowrap;
}

.audit-mobile-card-context {
    overflow: hidden;
    color: var(--color-text-soft);
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-mobile-sep {
    color: var(--color-text-muted);
}

.audit-pagination--mobile {
    margin: 12px 16px 20px;
}

.audit-pagination--mobile .audit-page-btn {
    min-width: 44px;
    min-height: 44px;
}



/* /css/operations.css */
/* Permanent owner: Advanced home settings, modes, feature visibility, and stay reporting. */

/* ─────────────────────────────────────────────────────────────────────
 * Casa Joro batch 1 — Settings advanced-edit form (labels + heating + sensor)
 *
 * Used by SettingsDesktop.js (`.home-advanced-edit`) and SettingsMobile.js
 * (`.home-advanced-edit--mobile`). Chip-picker styles also reused later by
 * the FeatureVisibilityPage editor (Phase 5).
 * ───────────────────────────────────────────────────────────────────── */

.home-advanced-edit {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 20px 20px;
    margin-top: 12px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: 16px;
}

.home-advanced-edit--mobile {
    padding: 14px 16px 18px;
    gap: 16px;
    margin-top: 8px;
}

.home-advanced-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.form-help {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
    margin-top: 2px;
}

.form-help code {
    background: var(--color-bg-deep);
    color: var(--color-text-soft);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: var(--font-mono);
}

.chip-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.chip {
    background: transparent;
    color: var(--color-text-soft);
    border: 1px solid var(--color-line-strong);
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
    line-height: 1.2;
}

.chip:hover {
    border-color: var(--color-water);
    color: var(--color-text);
}

.chip--active {
    background: var(--color-water-soft);
    border-color: var(--color-water);
    color: var(--color-water-text);
}

.chip--active:hover {
    /* keep the active treatment on hover; the click is the toggle, not "preview". */
    background: var(--color-water-soft);
    border-color: var(--color-water);
    color: var(--color-water-text);
}

.chip-input {
    background: transparent;
    border: 1px dashed var(--color-line-strong);
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    min-width: 160px;
    outline: none;
    transition: border-color 160ms ease, color 160ms ease;
}

.chip-input:focus {
    border-color: var(--color-water);
    color: var(--color-text);
    border-style: solid;
}

.chip-input::placeholder {
    color: var(--color-line-strong);
}


/* ─────────────────────────────────────────────────────────────────────
 * Casa Joro batch 1 — Modes page (calendar-only UX)
 * ─────────────────────────────────────────────────────────────────────
 * Mirrors the systeem-page layout: top-level grid wrapper, no extra
 * padding (main-content already provides it), shared `.page-header` /
 * `.page-eyebrow` / `.page-title` / `.section-header` typography. Don't
 * reintroduce a custom `.mode-card-eyebrow` or `max-width` constraint —
 * the admin Systeem pages don't, and divergence here was the inconsistency
 * the user flagged.
 */

.modes-page {
    display: grid;
    gap: 22px;
}

/* .mode-status-*, .mode-calendar-list/-row/-mode/-range, .mode-editor-list/-row/-name/-bundle,
 * .mode-default-badge — pruned 2026-05-03 after the Modi de-blur (commit 7adf632) replaced
 * the row-based template with the .mode-hero / .mode-calendar-band / .mode-library-chip
 * vocabulary now defined in /css/surface-refinements.css. The .mode-edit-modal + modal-backdrop +
 * .mode-edit-form* + .mode-empty + .mode-help rules below are still in use. */

.mode-empty,
.mode-help {
    color: var(--color-text-muted);
    padding: 8px 0;
    font-size: 0.9rem;
}

.mode-calendar-editor,
.mode-editor-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 14px 16px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: 12px;
    margin-top: 12px;
}
.mode-calendar-editor label,
.mode-editor-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.84rem;
    color: var(--color-text-soft);
    flex: 1;
    min-width: 160px;
}
.mode-calendar-editor input,
.mode-calendar-editor select,
.mode-editor-form input,
.mode-editor-form select {
    background: transparent;
    border: 1px solid var(--color-line-strong);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--color-text);
    font-size: 0.92rem;
}
.mode-calendar-editor input:focus,
.mode-calendar-editor select:focus,
.mode-editor-form input:focus,
.mode-editor-form select:focus {
    outline: none;
    border-color: var(--color-water);
}

/* Modal — used by ModeEditorCard and any future small confirm dialogs.
 * .modal-title and .modal-actions are already defined upstream; only the
 * backdrop + container variants are appended here. */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-shell-modal);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal,
.modal--small {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 22px;
    min-width: 320px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-panel);
}
.modal label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.84rem;
    color: var(--color-text-soft);
}
.modal input,
.modal select {
    background: transparent;
    border: 1px solid var(--color-line-strong);
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--color-text);
    font-size: 0.94rem;
}
.modal input:focus,
.modal select:focus {
    outline: none;
    border-color: var(--color-water);
}

.mode-edit-modal {
    width: min(640px, calc(100vw - 32px));
    max-width: 640px;
    min-width: 0;
    border-color: var(--color-line-strong);
    border-radius: 18px;
}

.mode-edit-modal--mode {
    width: min(760px, calc(100vw - 32px));
    max-width: 760px;
}

.mode-edit-form {
    display: grid;
    gap: 14px;
}

.mode-edit-form--calendar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mode-edit-form--calendar label:last-child {
    grid-column: 1 / -1;
}

.mode-edit-form--mode {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mode-edit-actions {
    padding-top: 4px;
}

@media (max-width: 640px) {
    .modes-page {
        gap: 14px;
    }

    .mode-edit-modal {
        width: min(420px, calc(100vw - 24px));
        padding: 18px;
    }

    .mode-edit-form--calendar,
    .mode-edit-form--mode {
        grid-template-columns: 1fr;
    }

    .mode-edit-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────
 * Casa Joro batch 1 — FeatureVisibilityPage (/instellingen/functies)
 * ───────────────────────────────────────────────────────────────────── */

.feature-visibility-page {
    max-width: 760px;
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 auto;
}
.feature-visibility-page h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
}
.feature-visibility-page .page-eyebrow {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.feature-visibility-intro {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}
.feature-row {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.feature-row-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
}
.feature-row-title {
    font-weight: 600;
    color: var(--color-text);
}
.feature-row-keyhint {
    background: var(--color-bg-deep);
    color: var(--color-text-muted);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-family: var(--font-mono);
}
.feature-visibility-page .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
/* ── Stays page ─────────────────────────────────────────────────────────── */

.stays-page {
    display: grid;
    gap: 22px;
}

.stays-source-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: var(--color-warning-soft);
    border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--color-line));
    border-left: 4px solid var(--color-warning);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.55;
}
.stays-source-note-icon {
    color: var(--color-warning);
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1.25;
}
.stays-source-note-title {
    display: block;
    font-weight: 600;
    color: var(--color-warning-text);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}

.range-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.range-select {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-line-strong);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.9rem;
}
.range-date {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-line-strong);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.85rem;
}
.range-sep {
    color: var(--color-text-soft);
    font-size: 0.85rem;
}

.stays-summary-card .summary-grid {
    display: grid;
    gap: 8px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}
.summary-total {
    border-top: 1px solid var(--color-line-strong);
    padding-top: 10px;
    font-weight: 600;
}
.summary-cost {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.summary-cost--paid,
.stay-row-cost--paid,
.empty-days-cost--paid {
    color: var(--color-solar-text);
}
.summary-cost--earned,
.stay-row-cost--earned,
.empty-days-cost--earned {
    color: var(--color-success-text);
}
.summary-tariff {
    font-size: 0.8rem;
    color: var(--color-text-soft);
    margin-top: 6px;
}
.summary-tariff--unconfigured {
    color: var(--color-warning-text);
}

.stay-row {
    border-bottom: 1px solid var(--color-line-strong);
    cursor: pointer;
    transition: background 0.15s;
}
.stay-row:hover {
    background: var(--color-bg-soft);
}
.stay-row:last-child {
    border-bottom: none;
}
.stay-row-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    flex-wrap: wrap;
}
.stay-row-mode {
    font-weight: 500;
}
.stay-row-sep {
    color: var(--color-text-soft);
}
.stay-row-dates {
    color: var(--color-text-soft);
    font-size: 0.9rem;
}
.stay-row-cost {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    margin-left: auto;
}
.stay-row-chevron {
    color: var(--color-text-soft);
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}

.row-precision-chip {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
}
.row-precision-chip--exact {
    color: var(--color-success-text);
    background: var(--color-success-soft);
}
.row-precision-chip--hour {
    color: var(--color-info);
    background: var(--color-info-soft);
}
.row-precision-chip--day {
    color: var(--color-warning-text);
    background: var(--color-warning-soft);
}
.row-precision-chip--near-boundary {
    color: var(--color-warning-text);
    background: var(--color-warning-soft);
}
.row-precision-chip--day-export-only {
    color: var(--color-warning-text);
    background: var(--color-warning-soft);
}

.stay-row-detail {
    padding: 0 0 12px 0;
    font-size: 0.85rem;
    color: var(--color-text-soft);
    display: grid;
    gap: 4px;
}
.stay-detail-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.stay-detail-breakdown {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.stay-detail-breakdown-label {
    font-weight: 500;
    color: var(--color-text);
}

/* ── Stay Detail Sheet ─────────────────────────────────────────────────── */
.stay-sheet-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.stay-sheet-stat {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-bg-soft) 55%, var(--color-surface));
}
[data-theme="light"] .stay-sheet-stat {
    background: var(--color-bg-soft);
    border-color: var(--color-line);
}
[data-theme="light"] .stay-sheet-stat--solar {
    border-color: rgba(var(--color-solar-rgb), 0.30);
    background: rgba(var(--color-solar-rgb), 0.08);
}
[data-theme="light"] .stay-sheet-stat--import {
    border-color: rgba(var(--color-info-rgb), 0.28);
    background: rgba(var(--color-info-rgb), 0.08);
}
.stay-sheet-stat-label {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}
.stay-sheet-stat-value {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.stay-sheet-stat--solar {
    border-color: rgba(var(--chart-solar-rgb), 0.24);
    background: rgba(var(--chart-solar-rgb), 0.08);
}
.stay-sheet-stat--import {
    border-color: rgba(var(--chart-loads-rgb), 0.24);
    background: rgba(var(--chart-loads-rgb), 0.08);
}
.stay-sheet-allowance {
    padding: 12px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-bg-soft);
}
.stay-sheet-allowance-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
}
.stay-sheet-allowance-track {
    height: 8px;
    background: var(--color-line);
    border-radius: 4px;
    overflow: hidden;
}
.stay-sheet-allowance-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
    width: 0;
}
.stay-sheet-allowance-bar--w0 { width: 0%; }
.stay-sheet-allowance-bar--w5 { width: 5%; }
.stay-sheet-allowance-bar--w10 { width: 10%; }
.stay-sheet-allowance-bar--w15 { width: 15%; }
.stay-sheet-allowance-bar--w20 { width: 20%; }
.stay-sheet-allowance-bar--w25 { width: 25%; }
.stay-sheet-allowance-bar--w30 { width: 30%; }
.stay-sheet-allowance-bar--w35 { width: 35%; }
.stay-sheet-allowance-bar--w40 { width: 40%; }
.stay-sheet-allowance-bar--w45 { width: 45%; }
.stay-sheet-allowance-bar--w50 { width: 50%; }
.stay-sheet-allowance-bar--w55 { width: 55%; }
.stay-sheet-allowance-bar--w60 { width: 60%; }
.stay-sheet-allowance-bar--w65 { width: 65%; }
.stay-sheet-allowance-bar--w70 { width: 70%; }
.stay-sheet-allowance-bar--w75 { width: 75%; }
.stay-sheet-allowance-bar--w80 { width: 80%; }
.stay-sheet-allowance-bar--w85 { width: 85%; }
.stay-sheet-allowance-bar--w90 { width: 90%; }
.stay-sheet-allowance-bar--w95 { width: 95%; }
.stay-sheet-allowance-bar--w100 { width: 100%; }
.stay-sheet-allowance-bar--ok   { background: var(--color-success, #059669); }
.stay-sheet-allowance-bar--warn { background: var(--color-warning, #d97706); }
.stay-sheet-allowance-bar--danger { background: var(--color-error, #dc2626); }
.stay-sheet-allowance-bar--over { background: var(--color-error-strong); }
.stay-sheet-allowance-sub {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.3rem;
}
.stay-sheet-allowance-sub--over { color: var(--color-error, #b91c1c); }

.stay-sheet-chart {
    display: grid;
    position: relative;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.64), rgba(15, 23, 42, 0.28)),
        var(--color-bg-alt);
}
[data-theme="light"] .stay-sheet-chart {
    background: var(--color-bg-soft);
    border-color: var(--color-line);
}
.stay-sheet-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.stay-sheet-chart-title {
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}
.stay-sheet-chart-subtitle,
.stay-sheet-chart-scale {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}
.stay-sheet-chart-scale {
    flex-shrink: 0;
    padding: 4px 8px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
}
[data-theme="light"] .stay-sheet-chart-scale {
    border-color: var(--color-line-strong);
    background: var(--color-bg-deep);
}
.stay-sheet-chart-loading,
.stay-sheet-chart-error {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    padding: 2rem 0;
}
.stay-sheet-chart-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.32) transparent;
}
.stay-sheet-svg {
    width: 100%;
    min-width: 720px;
    height: auto;
    overflow: visible;
}
.stay-sheet-grid-line {
    stroke: rgba(148, 163, 184, 0.16);
}
.stay-sheet-axis-label {
    fill: rgba(148, 163, 184, 0.72);
}
.stay-sheet-bar--solar {
    fill: var(--chart-solar);
}
.stay-sheet-bar--import {
    fill: var(--chart-loads);
}
.stay-sheet-hover-band {
    fill: rgba(148, 163, 184, 0.1);
    pointer-events: none;
}
.stay-sheet-tooltip {
    top: 18px;
    left: 0;
    width: 236px;
    white-space: normal;
}
.stay-sheet-tooltip--x0 { left: 0%; }
.stay-sheet-tooltip--x5 { left: 5%; }
.stay-sheet-tooltip--x10 { left: 10%; }
.stay-sheet-tooltip--x15 { left: 15%; }
.stay-sheet-tooltip--x20 { left: 20%; }
.stay-sheet-tooltip--x25 { left: 25%; }
.stay-sheet-tooltip--x30 { left: 30%; }
.stay-sheet-tooltip--x35 { left: 35%; }
.stay-sheet-tooltip--x40 { left: 40%; }
.stay-sheet-tooltip--x45 { left: 45%; }
.stay-sheet-tooltip--x50 { left: 50%; }
.stay-sheet-tooltip--x55 { left: 55%; }
.stay-sheet-tooltip--x60 { left: 60%; }
.stay-sheet-tooltip--x65 { left: 65%; }
.stay-sheet-tooltip--x70 { left: 70%; }
.stay-sheet-tooltip--x75 { left: 75%; }
.stay-sheet-tooltip--x80 { left: 80%; }
.stay-sheet-tooltip--x85 { left: 85%; }
.stay-sheet-tooltip--x90 { left: calc(100% - 244px); }
.stay-sheet-tooltip--x95 { left: calc(100% - 244px); }
.stay-sheet-tooltip--x100 { left: calc(100% - 244px); }
.stay-sheet-tooltip-dot--solar  { background: var(--chart-solar); }
.stay-sheet-tooltip-dot--import { background: var(--chart-loads); }
.stay-sheet-tooltip-dot--total  { background: var(--color-text-muted); }
.stay-sheet-legend {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.stay-sheet-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
}
[data-theme="light"] .stay-sheet-legend-item {
    border-color: var(--color-line-strong);
    background: var(--color-bg-soft);
}
.stay-sheet-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.stay-sheet-legend-dot--solar  { background: var(--chart-solar); }
.stay-sheet-legend-dot--import { background: var(--chart-loads); }
@media (min-width: 1101px) {
    .bottom-sheet--stay-detail {
        width: min(1180px, calc(100vw - 96px));
        max-width: none;
        max-height: min(900px, calc(100vh - 96px));
        padding: 30px 36px 34px;
        border: 1px solid var(--color-line);
        background: var(--color-bg-alt);
    }

    .bottom-sheet--stay-detail .bottom-sheet-handle {
        display: none;
    }

    .bottom-sheet--stay-detail .bottom-sheet-title {
        font-size: 1.5rem;
        line-height: 1.15;
        letter-spacing: 0;
    }

    .bottom-sheet--stay-detail .bottom-sheet-close {
        width: 48px;
        height: 48px;
        font-size: 1.65rem;
    }

    .bottom-sheet--stay-detail .bottom-sheet-body {
        gap: 18px;
    }

    .bottom-sheet--stay-detail .stay-sheet-overview {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
    }

    .bottom-sheet--stay-detail .stay-sheet-stat {
        padding: 14px 16px;
    }

    .bottom-sheet--stay-detail .stay-sheet-stat-value {
        font-size: 1.12rem;
    }

    .bottom-sheet--stay-detail .stay-sheet-allowance-label {
        font-size: 0.95rem;
    }

    .bottom-sheet--stay-detail .stay-sheet-allowance-track {
        height: 12px;
        border-radius: 999px;
    }

    .bottom-sheet--stay-detail .stay-sheet-allowance-bar {
        border-radius: 999px;
    }

    .bottom-sheet--stay-detail .stay-sheet-allowance-sub {
        font-size: 0.95rem;
    }

    .bottom-sheet--stay-detail .stay-sheet-chart {
        padding: 18px 20px 16px;
    }

    .bottom-sheet--stay-detail .stay-sheet-svg {
        min-width: 0;
        min-height: 360px;
        max-height: 430px;
    }

    .bottom-sheet--stay-detail .stay-sheet-legend {
        gap: 10px;
        font-size: 0.9rem;
    }

    .bottom-sheet--stay-detail .stay-sheet-legend-dot {
        width: 13px;
        height: 13px;
    }
}
@media (min-width: 1101px) {
    [data-theme="dark"] .bottom-sheet--stay-detail {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-bg-alt) 92%, transparent), var(--color-bg-alt)),
            var(--color-bg-alt);
    }
}

@media (max-width: 520px) {
    .stay-sheet-overview {
        grid-template-columns: 1fr;
    }

    .stay-sheet-chart-head {
        display: grid;
    }

    .stay-sheet-chart-scale {
        justify-self: start;
    }
}

.empty-days-list {
    display: grid;
    gap: 2px;
}
.empty-days-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-line-strong);
}
.empty-days-row:last-child {
    border-bottom: none;
}
.empty-days-month {
    min-width: 80px;
    font-weight: 500;
}
.empty-days-info {
    color: var(--color-text-soft);
    flex: 1;
}
.empty-days-cost {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.stays-teaser-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.stays-teaser-card:hover {
    background: rgba(255, 255, 255, 0.02);
}
.stays-teaser-headline {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 4px 0;
}
.stays-teaser-detail {
    font-size: 0.85rem;
    color: var(--color-text-soft);
}
.stays-teaser-link {
    font-size: 0.85rem;
    color: var(--amber, #f5a623);
    margin-top: 6px;
}

.loading-indicator {
    text-align: center;
    padding: 40px 0;
    color: var(--color-text-soft);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .range-picker-row {
        flex-direction: column;
        align-items: stretch;
    }
    .range-select {
        width: 100%;
    }
    .stay-row-header {
        gap: 4px;
    }
    .stay-row-cost {
        margin-left: 0;
    }
    .empty-days-row {
        flex-wrap: wrap;
        gap: 4px;
    }
}


/* /css/improvements.css */
/* Permanent owner: Per-home improvement checklist and editor presentation. */

/* ============================================================
   Verbeteringen — per-home improvement checklist
   Layout aligned with /automatisering and /modi conventions:
   shared page-header pattern, .rule-card-v2-style cards on
   --color-surface, .mode-editor-form-style fields, .error-banner
   for errors, global .btn for actions. The accent color is
   --improvements (slate-blue) — only used for the card spine
   rail, focus ring, and progress chip, matching how /modi uses
   --color-warning on .mode-hero.
   ============================================================ */
.improvements-page {
    display: grid;
    gap: 22px;
}

.improvements-section {
    display: grid;
    gap: 10px;
}

.improvements-section-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    padding: 6px 10px 6px 4px;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
}
.improvements-section-head:hover {
    background: var(--color-bg-soft);
}
.improvements-section-chev {
    display: inline-block;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1;
    transition: transform 180ms ease;
}
.improvements-section-head.is-collapsed .improvements-section-chev {
    transform: rotate(-90deg);
}
.improvements-section-title {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0;
}
.improvements-section-count {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
}

.improvements-section-body {
    display: grid;
    gap: 10px;
}

.improvements-empty {
    padding: 18px 20px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* ---------- Improvement card (mirrors .rule-card-v2 chrome) ---------- */
.improvement-card {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 14px 16px 14px 24px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-card);
    box-shadow: var(--shadow-soft);
    transition: border-color 180ms ease, background 180ms ease;
}
.improvement-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--improvements);
    transition: background 180ms ease;
}
.improvement-card:hover {
    border-color: var(--color-line-strong);
    background: var(--color-bg-soft);
}
.improvement-card--done { opacity: 0.72; }
.improvement-card--done::before { background: var(--color-text-faint); }
.improvement-card--editing {
    border-color: var(--improvements);
    box-shadow: var(--shadow-card);
}

.improvement-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.improvement-card-expand {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.improvement-card-expand:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.improvement-card-done {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 180ms ease, border-color 180ms ease;
    flex-shrink: 0;
}
.improvement-card-done:hover:not(:disabled) { border-color: var(--improvements); }
.improvement-card-done:checked {
    background: var(--improvements);
    border-color: var(--improvements);
}
.improvement-card-done:checked::after {
    content: '';
    width: 10px;
    height: 5px;
    border-left: 2px solid var(--color-on-accent);
    border-bottom: 2px solid var(--color-on-accent);
    transform: rotate(-45deg) translate(1px, -1px);
}
.improvement-card-done:disabled { opacity: 0.5; cursor: not-allowed; }

.improvement-card-title {
    min-width: 0;
}
.improvement-card-title h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.improvement-card--done .improvement-card-title h3 {
    text-decoration: line-through;
    color: var(--color-text-muted);
}
.improvement-card-desc {
    margin: 3px 0 0;
    color: var(--color-text-soft);
    font-size: 0.84rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.improvement-card-progress {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.improvement-card--done .improvement-card-progress {
    background: transparent;
    color: var(--color-text-muted);
}

.improvement-card-chev {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1;
    transition: transform 180ms ease;
}

.improvement-card-stale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(var(--color-warning-rgb), 0.45);
    border-left: 4px solid var(--color-warning);
    border-radius: 8px;
    background: var(--color-warning-soft);
    color: var(--color-text);
    font-size: 0.85rem;
}
.improvement-card-stale button {
    padding: 4px 12px;
    border: 1px solid var(--color-warning);
    border-radius: 999px;
    background: transparent;
    color: var(--color-warning-text);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.improvement-card-stale button:hover {
    background: var(--color-warning-soft-strong);
    /* full-contrast text on the strong tint — orange-on-orange fails AA here,
       and no single text colour is AA on both the light and dark warning fill. */
    color: var(--color-text);
}

.improvement-card-body {
    display: grid;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-line);
}
.improvement-card-details h4,
.improvement-card-tasks-h {
    margin: 0 0 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.improvement-card-details p {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text-soft);
}
.improvement-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}
.improvement-card-meta {
    color: var(--color-text-muted);
    font-size: 0.78rem;
}
.improvement-card-actions,
.improvement-card-confirm-delete {
    display: flex;
    align-items: center;
    gap: 8px;
}
.improvement-card-confirm-delete { font-size: 0.85rem; color: var(--color-text-soft); }

/* ---------- Task list ---------- */
.task-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 4px;
}
.task-row {
    display: grid;
    gap: 4px;
    padding: 6px 6px 6px 4px;
    border-radius: var(--radius-sm);
    transition: background 180ms ease;
}
.task-row--highlight { background: color-mix(in srgb, var(--improvements) 12%, transparent); }
.task-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.task-row-main input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1.5px solid var(--color-line-strong);
    border-radius: 3px;
    background: var(--color-surface);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 180ms ease, border-color 180ms ease;
    flex-shrink: 0;
}
.task-row-main input[type="checkbox"]:hover:not(:disabled) { border-color: var(--improvements); }
.task-row-main input[type="checkbox"]:checked {
    background: var(--improvements);
    border-color: var(--improvements);
}
.task-row-main input[type="checkbox"]:checked::after {
    content: '';
    width: 8px;
    height: 4px;
    border-left: 2px solid var(--color-on-accent);
    border-bottom: 2px solid var(--color-on-accent);
    transform: rotate(-45deg) translate(0.5px, -1px);
}
.task-row-main input[type="checkbox"]:disabled { opacity: 0.55; cursor: not-allowed; }
.task-row-text {
    flex: 1;
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.4;
}
.task-row--done .task-row-text {
    text-decoration: line-through;
    color: var(--color-text-muted);
}
.task-row--blocked .task-row-text { color: var(--color-text-muted); }
.task-row-lock {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-left: -4px;
}
.task-row-blockers {
    padding-left: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}
.task-row-blocker-link {
    padding: 1px 8px;
    border: 1px solid color-mix(in srgb, var(--improvements) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--improvements) 10%, transparent);
    color: var(--improvements);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}
.task-row-blocker-link:hover {
    background: color-mix(in srgb, var(--improvements) 18%, transparent);
    border-color: var(--improvements);
}

/* ---------- Editor (mirrors .mode-editor-form chrome) ---------- */
.improvement-editor {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    box-shadow: var(--shadow-soft);
}
.ie-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ie-label {
    color: var(--color-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ie-field input,
.ie-field textarea {
    padding: 9px 11px;
    border: 1px solid var(--color-line-strong);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.4;
    transition: border-color 180ms ease;
}
.ie-field input:focus,
.ie-field textarea:focus {
    outline: none;
    border-color: var(--improvements);
}
.ie-field textarea { resize: vertical; min-height: 64px; }

.ie-tasks-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ie-add-task {
    padding: 5px 12px;
    border: 1px dashed var(--improvements);
    border-radius: 999px;
    background: transparent;
    color: var(--improvements);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 180ms ease;
}
.ie-add-task:hover { background: color-mix(in srgb, var(--improvements) 10%, transparent); }

.ie-task-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}
.ie-task-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-surface);
}
.ie-task-controls {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ie-task-controls button {
    width: 22px;
    height: 18px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
}
.ie-task-controls button:hover:not(:disabled) {
    background: var(--color-bg-soft);
    color: var(--color-text);
}
.ie-task-controls button:disabled { opacity: 0.3; cursor: not-allowed; }
.ie-task-text {
    width: 100%;
    padding: 6px 4px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 0.92rem;
    transition: border-color 180ms ease;
}
.ie-task-text:focus {
    outline: none;
    border-bottom-color: var(--improvements);
}
.ie-task-delete {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
}
.ie-task-delete:hover {
    background: var(--color-error-soft);
    color: var(--color-error);
}

.ie-error {
    padding: 10px 12px;
    border-left: 3px solid var(--color-error);
    border-radius: 6px;
    background: var(--color-error-soft);
    color: var(--color-error);
    font-size: 0.85rem;
}

.ie-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-line);
}

/* ---------- Prereq picker ---------- */
.prereq-picker { position: relative; }
.prereq-picker-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    max-width: 220px;
    padding: 5px 12px;
    border: 1px solid var(--color-line-strong);
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.prereq-picker-btn:hover {
    border-color: var(--improvements);
    color: var(--improvements);
}
.prereq-picker-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.prereq-picker-chev {
    color: var(--color-text-muted);
    font-size: 0.6rem;
    transition: transform 180ms ease;
}
.prereq-picker-chev.open { transform: rotate(180deg); }

.prereq-picker-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 180px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}
.prereq-picker-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.86rem;
    cursor: pointer;
    transition: background 180ms ease;
}
.prereq-picker-option:hover {
    background: color-mix(in srgb, var(--improvements) 10%, transparent);
}
.prereq-picker-option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1.5px solid var(--color-line-strong);
    border-radius: 3px;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.prereq-picker-option input[type="checkbox"]:checked {
    background: var(--improvements);
    border-color: var(--improvements);
}
.prereq-picker-option input[type="checkbox"]:checked::after {
    content: '';
    width: 7px;
    height: 4px;
    border-left: 2px solid var(--color-on-accent);
    border-bottom: 2px solid var(--color-on-accent);
    transform: rotate(-45deg) translate(0.5px, -1px);
}
.prereq-picker-empty {
    padding: 10px;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-style: italic;
    text-align: center;
}

/* ---------- Focus indicators (WCAG 2.4.7) — match the global ring pattern ---------- */
.improvements-section-head:focus-visible,
.improvement-card-done:focus-visible,
.improvement-card-stale button:focus-visible,
.task-row-main input[type="checkbox"]:focus-visible,
.task-row-blocker-link:focus-visible,
.ie-field input:focus-visible,
.ie-field textarea:focus-visible,
.ie-task-text:focus-visible,
.ie-add-task:focus-visible,
.ie-task-controls button:focus-visible,
.ie-task-delete:focus-visible,
.prereq-picker-btn:focus-visible,
.prereq-picker-option input[type="checkbox"]:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}
.ie-field input:focus-visible,
.ie-field textarea:focus-visible { border-color: var(--improvements); }
.ie-task-text:focus-visible { border-bottom-color: var(--improvements); }

/* ---------- Mobile (hero + tighter card padding) ---------- */
@media (max-width: 1100px) {
    .improvement-card { padding: 12px 12px 12px 20px; }
    .improvement-card::before { top: 12px; bottom: 12px; }
    .improvement-card-head { gap: 10px; grid-template-columns: auto minmax(0, 1fr); }
    .improvement-card-progress { font-size: 0.74rem; padding: 2px 8px; }
    .ie-task-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .ie-task-row .prereq-picker { grid-column: 1 / -1; margin-top: 4px; }

    .mob-ed-hero--improvements {
        background: linear-gradient(135deg, color-mix(in srgb, var(--improvements) 14%, var(--color-bg-alt)) 0%, var(--color-bg-alt) 80%);
    }
    .mob-ed-hero--improvements::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--improvements) 22%, transparent) 0%, transparent 60%);
        pointer-events: none;
    }
    .mob-ed-hero-label--improvements { color: var(--improvements); }
    .mob-ed-hero-label--improvements::before { background: var(--improvements); }
}



/* /css/casa-power.css */
/* Permanent owner: Casa Joro direct-access power overview presentation. */

/* Casa Joro direct-access power overview. Unlinked route:
   /casa-joro/stroom */
.casa-power-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.casa-power-focus,
.casa-power-hero,
.casa-power-section,
.casa-power-panel {
    border: 1px solid var(--color-line);
    background: var(--color-card);
    box-shadow: var(--shadow-soft);
}

.casa-power-focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 260px;
    padding: 28px;
    border-radius: var(--radius-lg);
}

.casa-power-focus-copy {
    display: grid;
    gap: 10px;
    max-width: 620px;
}

.casa-power-focus h1,
.casa-power-hero h1 {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.casa-power-focus p,
.casa-power-hero p,
.casa-power-section-head p,
.casa-power-panel--note p {
    color: var(--color-text-muted);
    font-size: 0.98rem;
    line-height: 1.55;
}

.casa-power-switch {
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0 16px;
    background: var(--color-energy);
    color: var(--color-on-accent);
    font-weight: 800;
    cursor: pointer;
}

.casa-power-switch:disabled {
    cursor: wait;
    opacity: 0.65;
}

.casa-power-error {
    color: var(--color-error-text);
    font-weight: 700;
}

.casa-power-eyebrow {
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.casa-power-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
    gap: 20px;
    padding: 24px;
    border-radius: var(--radius-lg);
}

.casa-power-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    min-height: 260px;
}

.casa-power-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.casa-power-meta span {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    padding: 6px 10px;
    color: var(--color-text-soft);
    background: var(--color-bg-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.casa-power-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.casa-power-live-card,
.casa-power-kpi,
.casa-power-gas-stat {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-card);
}

.casa-power-live-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    min-height: 122px;
    padding: 14px;
}

.casa-power-live-icon,
.casa-power-row-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    color: var(--color-energy-text);
    background: var(--color-energy-soft);
}

.casa-power-live-icon svg,
.casa-power-row-icon svg {
    width: 20px;
    height: 20px;
}

.casa-power-card-label {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.casa-power-live-value,
.casa-power-kpi-value,
.casa-power-row-value {
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0;
}

.casa-power-live-value {
    margin-top: 8px;
    font-size: 1.65rem;
    line-height: 1.1;
}

.casa-power-card-detail,
.casa-power-row-detail {
    margin-top: 5px;
    color: var(--color-text-muted);
    font-size: 0.86rem;
    line-height: 1.35;
}

.casa-power-value--good { color: var(--color-energy-text); }
.casa-power-value--warn { color: var(--color-warning-text); }
.casa-power-value--calm { color: var(--color-info); }
.casa-power-value--solar { color: var(--color-solar-text); }
.casa-power-value--battery { color: var(--color-heatpump-text); }

.casa-power-section,
.casa-power-panel {
    border-radius: var(--radius-lg);
    padding: 18px;
}

.casa-power-section-head,
.casa-power-panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.casa-power-section-head h2,
.casa-power-panel-head h2,
.casa-power-panel--note h2 {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 0;
}

.casa-power-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.casa-power-kpi,
.casa-power-gas-stat {
    position: relative;
    overflow: hidden;
    min-height: 126px;
    padding: 14px;
}

.casa-power-kpi::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--color-info);
}

.casa-power-kpi--energy::before { background: var(--color-energy); }
.casa-power-kpi--good::before { background: var(--color-success); }
.casa-power-kpi--solar::before { background: var(--color-solar); }
.casa-power-kpi--pool::before { background: var(--color-pool); }
.casa-power-kpi--warn::before { background: var(--color-warning); }

.casa-power-kpi-value {
    margin-top: 12px;
    font-size: 1.45rem;
    line-height: 1.1;
}

.casa-power-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 16px;
}

.casa-power-columns--lower {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
}

.casa-power-list {
    display: grid;
    gap: 10px;
}

.casa-power-list--spaced {
    margin-top: 12px;
}

.casa-power-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    border-top: 1px solid var(--color-line);
    padding-top: 10px;
}

.casa-power-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.casa-power-row--compact {
    grid-template-columns: minmax(0, 1fr) auto;
}

.casa-power-row-title {
    color: var(--color-text);
    font-weight: 800;
}

.casa-power-row-copy {
    min-width: 0;
}

.casa-power-row-value {
    white-space: nowrap;
    font-size: 1rem;
}

.casa-power-empty {
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius-sm);
    padding: 18px;
    color: var(--color-text-muted);
    background: var(--color-bg-soft);
}

.casa-power-gas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.casa-power-panel--note {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    background:
        linear-gradient(135deg, rgba(var(--color-solar-rgb), 0.12), transparent 45%),
        var(--color-surface);
}

@media (max-width: 1100px) {
    .casa-power-hero,
    .casa-power-columns,
    .casa-power-columns--lower {
        grid-template-columns: 1fr;
    }

    .casa-power-hero-copy {
        min-height: auto;
    }

    .casa-power-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .casa-power-page {
        gap: 14px;
    }

    .casa-power-focus,
    .casa-power-hero,
    .casa-power-section,
    .casa-power-panel {
        border-radius: var(--radius-sm);
    }

    .casa-power-focus {
        align-items: stretch;
        flex-direction: column;
        padding: 18px;
    }

    .casa-power-hero,
    .casa-power-section,
    .casa-power-panel {
        padding: 14px;
    }

    .casa-power-hero-grid,
    .casa-power-kpi-grid,
    .casa-power-gas-grid {
        grid-template-columns: 1fr;
    }

    .casa-power-section-head,
    .casa-power-panel-head {
        align-items: start;
        flex-direction: column;
    }
}



/* /css/resilience.css */
/* Permanent owner: Runtime failure banners and route-level recovery surfaces. */

/* ─── Runtime boot-failure banner (audit RES-03) ───────────────────────────
   Surfaces a swallowed loadHomes / loadCredentials failure that would
   otherwise leave a silent empty shell. Calm amber strip (the app isn't
   broken, the data just didn't load) with an explicit retry. */
.runtime-error-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid rgba(var(--color-warning-rgb), 0.30);
    border-radius: var(--radius-xl);
    background: rgba(var(--color-warning-rgb), 0.10);
    color: var(--color-warning-text);
    font-size: 0.9rem;
    line-height: 1.45;
}

.runtime-error-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.runtime-error-banner-btn {
    padding: 6px 14px;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-warning-text);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.runtime-error-banner-btn:hover {
    background: var(--color-warning);
    color: var(--color-on-accent);
}

.runtime-error-banner-btn:focus-visible {
    outline: 2px solid var(--color-warning);
    outline-offset: 2px;
}

.runtime-error-banner-dismiss {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-warning-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.runtime-error-banner-dismiss:hover {
    background: rgba(var(--color-warning-rgb), 0.16);
}

.runtime-error-banner-dismiss:focus-visible {
    outline: 2px solid var(--color-warning);
    outline-offset: 2px;
}

/* ─── Route-level error boundary card (audit RES-01) ───────────────────────
   Shown by ErrorBoundary.js when a route component throws during render, in
   place of a blank screen. Centered, calm, recoverable. */
.route-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 24px;
}

.route-error-card {
    max-width: 420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 32px 28px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.route-error-icon {
    color: var(--color-warning);
}

.route-error-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-2xl);
    color: var(--color-text);
}

.route-error-text {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.route-error-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.route-error-btn {
    padding: 8px 18px;
    border: 1px solid var(--color-solar);
    border-radius: var(--radius-pill);
    background: var(--color-solar);
    color: var(--color-on-accent);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.route-error-btn--ghost {
    background: transparent;
    color: var(--color-solar-text);
}

.route-error-btn:hover {
    background: var(--color-solar-text);
    color: var(--color-on-accent);
}

.route-error-btn:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}

/* Collapsed diagnostic disclosure — the app ships unminified, so the captured
   stack names the real file.js:line. Hidden by default to keep the card calm. */
.route-error-details {
    width: 100%;
    margin-top: 6px;
    text-align: left;
}

.route-error-summary {
    cursor: pointer;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    user-select: none;
}

.route-error-summary:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.route-error-trace {
    margin-top: 10px;
    max-height: 180px;
    overflow: auto;
    padding: 10px 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.route-error-copy {
    margin-top: 8px;
    padding: 5px 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-solar-text);
    font: inherit;
    font-size: var(--fs-2xs);
    font-weight: 500;
    cursor: pointer;
}

.route-error-copy:hover {
    background: var(--color-solar-soft);
}

.route-error-copy:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}


/* /css/mobile-shell.css */
@media (max-width: 1100px) {
    .mobile-topbar {
        display: block;
    }

    .main-content {
        margin-left: 0;
        padding: 14px 16px max(96px, calc(72px + env(safe-area-inset-bottom)));
        box-sizing: border-box;
        width: 100%;
        overflow-x: hidden;
    }

    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 14px;
        padding: 10px 12px;
        padding-top: calc(10px + env(safe-area-inset-top));
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 62%, transparent);
        border-radius: 21px;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-solar) 4%, transparent), transparent 70%),
            color-mix(in srgb, var(--color-surface) 94%, var(--color-bg) 6%);
        box-shadow:
            0 14px 34px rgba(17, 24, 39, 0.12),
            0 1px 0 color-mix(in srgb, white 6%, transparent) inset;
    }

    .mobile-topbar-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 11px;
        align-items: center;
    }

    .mobile-back-button,
    .mobile-topbar-home-dot {
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .mobile-back-button {
        border: 1px solid var(--color-line);
        border-radius: 14px;
        background: transparent;
        color: var(--color-text);
        cursor: pointer;
        font-size: 1.6rem;
        line-height: 1;
        padding: 0;
    }

    .mobile-topbar-home-dot::before {
        content: '';
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--color-solar), var(--color-water));
        box-shadow: 0 0 0 6px var(--color-solar-soft);
    }

    .mobile-topbar-brand {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .mobile-topbar-home-trigger {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 26px;
        grid-template-rows: auto auto;
        column-gap: 8px;
        align-items: center;
        width: 100%;
        min-width: 0;
        padding: 2px 0;
        border: 0;
        background: transparent;
        color: inherit;
        text-align: left;
        cursor: pointer;
        font: inherit;
    }

    .mobile-topbar-home-trigger .mobile-topbar-kicker,
    .mobile-topbar-home-trigger .mobile-topbar-title {
        grid-column: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-topbar-home-trigger::before {
        content: '';
        grid-column: 2;
        grid-row: 1 / 3;
        justify-self: end;
        width: 26px;
        height: 26px;
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 72%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--color-bg-alt) 72%, transparent);
    }

    .mobile-topbar-home-trigger::after {
        content: '';
        grid-column: 2;
        grid-row: 1 / 3;
        justify-self: center;
        width: 6px;
        height: 6px;
        margin-top: -3px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        color: var(--color-text-muted);
        transform: rotate(45deg);
    }

    .mobile-topbar-kicker {
        color: var(--color-text-muted);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }

    .mobile-topbar-title {
        font-family: var(--font-display);
        font-size: 0.96rem;
        font-weight: 700;
        letter-spacing: 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-profile-link {
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 13px;
        background: linear-gradient(145deg, var(--color-solar-soft), var(--color-water-soft));
        border: 1px solid var(--color-solar-soft);
        color: var(--color-text);
        text-decoration: none;
        font-weight: 800;
        font-size: 0.9rem;
    }

    .content-shell--mobile-app {
        position: relative;
    }

    .home-sheet-eyebrow {
        color: var(--color-text-muted);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .home-sheet-list {
        display: grid;
        gap: 10px;
    }

    .home-sheet-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        width: 100%;
        padding: 14px;
        border: 1px solid var(--color-line);
        border-radius: 18px;
        background: transparent;
        color: var(--color-text);
        text-align: left;
    }

    .home-sheet-item.active {
        border-color: var(--color-solar-soft);
        background: linear-gradient(180deg, var(--color-solar-soft), var(--color-bg-alt));
    }

    .home-sheet-item-copy {
        display: grid;
        gap: 3px;
        min-width: 0;
    }

    .home-sheet-item-name {
        font-size: 0.96rem;
        font-weight: 700;
    }

    .home-sheet-item-meta {
        color: var(--color-text-muted);
        font-size: 0.82rem;
    }

    .home-sheet-item-state {
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        color: var(--color-text-soft);
        font-size: 1.1rem;
        font-weight: 700;
    }

    .home-sheet-item.active .home-sheet-item-state {
        background: var(--color-solar-soft);
        color: var(--color-energy);
    }

    .home-sheet-error {
        color: var(--color-error);
        font-size: 0.86rem;
    }

    .mobile-tabbar {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: max(10px, calc(env(safe-area-inset-bottom) + 10px));
        z-index: 45;
        display: flex;
        gap: 6px;
        padding: 6px;
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 66%, transparent);
        border-radius: 21px;
        background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg) 8%);
        box-shadow:
            0 16px 42px rgba(17, 24, 39, 0.18),
            0 1px 0 color-mix(in srgb, white 6%, transparent) inset;
        overflow-x: auto;
        scrollbar-width: none;
        /* FOOT-GUN: promote to its own GPU compositor layer so route-change
           sibling repaints (rise-in animates content with opacity 0→1 +
           translateY) can't invalidate the tabbar's paint. Without this, iOS
           Safari + Brave render the tabbar's pill background as transparent
           until a scroll forces recomposite — BUG-247. `isolation: isolate`
           is the modern standards-based way to pin a stacking context; the
           translateZ + backface-visibility combo belts-and-braces the iOS
           Safari / Brave paint quirk which `isolation` alone doesn't fix. */
        isolation: isolate;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .mobile-tabbar--fill {
        justify-content: stretch;
        overflow-x: hidden;
    }

    .mobile-tabbar::-webkit-scrollbar {
        display: none;
    }

    .mobile-tabbar-item {
        display: grid;
        justify-items: center;
        gap: 5px;
        min-width: 64px;
        padding: 7px 6px 6px;
        border: 0;
        border-radius: 15px;
        background: transparent;
        color: var(--color-text-muted);
        cursor: pointer;
        flex: 0 0 auto;
        position: relative;
    }

    .mobile-tabbar-item--fill {
        min-width: 0;
        flex: 1 1 0;
    }

    .mobile-tabbar-item.active {
        background: transparent;
        color: var(--color-text);
    }

    /* Direction B: accent icon-chip behind the active tab glyph (replaces the
       Variant-A top pill — unifies with the desktop sidebar's active chip). */
    .mobile-tabbar-item.active .mobile-tabbar-icon {
        background: var(--color-solar-soft);
        /* Amber ring so the active chip stays legible on the near-white tabbar
           surface in light mode (solar-soft cream alone has too little boundary). */
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-solar) 35%, transparent);
        color: var(--color-solar-text);
    }

    .mobile-tabbar-icon {
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 24px;
        border-radius: 11px;
        transition: background-color 160ms ease, color 160ms ease;
    }

    .mobile-tabbar-icon svg {
        width: 18px;
        height: 18px;
    }

    .mobile-tabbar-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }
}

@media (max-width: 640px) {
    .main-content {
        padding: 12px 12px 24px;
        padding-bottom: max(110px, calc(24px + env(safe-area-inset-bottom)));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        gap: 10px;
        margin-bottom: 12px;
        border-radius: 18px;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-solar) 6%, transparent), transparent),
            color-mix(in srgb, var(--color-surface) 90%, transparent);
        border-color: color-mix(in srgb, var(--color-line-strong) 74%, transparent);
        color: var(--color-text);
    }

    .mobile-topbar-row {
        gap: 10px;
    }

    .mobile-tabbar {
        left: 10px;
        right: 10px;
        gap: 4px;
        padding: 7px;
        border-radius: 22px;
    }

    .mobile-tabbar-item {
        /* Tap-target floor: Apple HIG / WCAG 2.5.5 require ≥44×44 CSS px for primary
           navigation. The previous 9/4/7 padding rendered ~38px tall on iPhone SE /
           360–414px viewports. min-height pins the height directly so labels stay tight. */
        padding: 9px 4px 7px;
        border-radius: 16px;
        min-width: 62px;
        min-height: 44px;
    }

    .mobile-tabbar-label {
        font-size: 0.64rem;
    }
}

/* AuDHD additions — audhd-shell
   Shell-level UI: home-switcher option subtitle, global triage chip strip
   variant. Loaded after the base mobile page owner; overrides apply. */


/* ── T3.10 — Home dropdown option subtitle ─────────────────────────────
   Each dropdown option now renders a two-line layout: home name (primary)
   + location/service-count subtitle (secondary). Re-stacks the existing
   single-line `.home-dropdown-option` flex row by introducing an inner
   `.home-dropdown-option-copy` column. The check icon stays on the right.

   Object-permanence hint for users with similar-sounding home names
   ("Casa Joro" vs "Casa Luma"): the location anchors each option. */
.home-dropdown-option-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.home-dropdown-option-copy .home-dropdown-option-name {
    /* Override the original flex:1 — the parent column owns sizing now. */
    flex: 0 0 auto;
}

.home-dropdown-option-meta {
    color: var(--color-text-muted, rgba(230, 236, 242, 0.55));
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── T3.10 — Mobile home sheet meta lines ──────────────────────────────
   The sheet now stacks: name → location/services → state ("Actief" /
   "Overschakelen"). Tighten the second meta row so the trio reads as a
   single block, not three separate paragraphs. */
.home-sheet-item-meta--state {
    color: var(--color-text-soft, rgba(230, 236, 242, 0.7));
    font-size: 0.78rem;
    font-weight: 600;
}


/* T3.12 triage chip strip (shell variant) removed 2026-06-15 together with the
   .ah-triage-* base classes in surface-refinements.css. The strip was already
   unmounted from app.js; this rule referenced classes that no longer exist. */

/* Per-home theming v1 (T-PHT-01) was prototyped here on 2026-05-03 and
 * removed the same day per user feedback ("colors weird, very subtle in
 * the sidebar"). The companion homeContext.js slugify + watch was also
 * reverted — see commit log for details. If this idea returns, consider
 * a different surface (e.g. a small accent dot next to the home name)
 * rather than re-tinting the sidebar chrome. */

/* /css/surface-refinements.css */
/* Permanent final refinement layer. Former per-surface overlays are kept in
 * their production source order so cascade behavior remains unchanged.
 */

/* Source: audhd-automations.css */
/* AuDHD additions — audhd-automations
   Loaded after app.css; keep this as thin page-specific chrome that maps
   back to the canonical tokens in app.css. */

/* ─── Draft persistence: banner + pip ──────────────────────────────── */

.audhd-draft-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 8px;
    border-radius: var(--radius-md);
    background: rgba(var(--color-info-rgb, 59, 130, 246), 0.10);
    border: 1px solid rgba(var(--color-info-rgb, 59, 130, 246), 0.35);
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.35;
}

.audhd-draft-banner__text {
    flex: 1 1 auto;
    min-width: 0;
}

.audhd-draft-banner__text strong {
    font-weight: 600;
}

.audhd-draft-banner__actions {
    display: inline-flex;
    gap: 8px;
    flex-shrink: 0;
}

.audhd-draft-banner__btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.audhd-draft-banner__btn--primary {
    background: var(--color-info);
    color: var(--color-on-accent);
    border-color: var(--color-info);
}

.audhd-draft-banner__btn--primary:hover {
    filter: brightness(1.08);
}

.audhd-draft-banner__btn--ghost {
    color: var(--color-text-muted);
    border-color: var(--color-line);
}

.audhd-draft-banner__btn--ghost:hover {
    color: var(--color-text);
    border-color: var(--color-line-strong);
}

.audhd-draft-pip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(var(--color-success-rgb, 5, 150, 105), 0.12);
    color: var(--color-success-text);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.audhd-draft-pip > span[aria-hidden] {
    font-size: 0.65rem;
    line-height: 1;
}

/* ─── Recipe gallery ──────────────────────────────────────────────── */

.audhd-recipe-gallery {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 12px 0 24px;
}

.audhd-recipe-gallery--inline {
    padding: 24px 0 32px;
}

.audhd-recipe-gallery__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audhd-recipe-gallery__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
}

.audhd-recipe-gallery__lead {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.audhd-recipe-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 768px) {
    .audhd-recipe-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

.audhd-recipe-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.audhd-recipe-card:hover {
    border-color: var(--color-line-strong);
    transform: translateY(-1px);
}

/* Per-recipe domain accent (RECIPE_ACCENT -> .acc-*): a soft corner glow +
   accent-tinted border + an accent icon-chip, matching the og-card / sidebar
   nav-chip idiom so the gallery reads as part of the colour-coded app. */
.audhd-recipe-card[class*="acc-"] {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
        var(--color-surface);
    border-color: color-mix(in srgb, var(--accent) 20%, var(--color-line));
}

.audhd-recipe-card[class*="acc-"] .audhd-recipe-card__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.2rem;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-text);
}

.audhd-recipe-card__icon {
    font-size: 1.6rem;
    line-height: 1;
}

.audhd-recipe-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--color-text);
}

.audhd-recipe-card__desc {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--color-text-muted);
    flex: 1 1 auto;
}

.audhd-recipe-card__cta {
    align-self: flex-start;
    margin-top: 4px;
}

.audhd-recipe-gallery__footer {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.audhd-recipe-gallery__blank-link {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font: inherit;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 0.12s ease;
}

.audhd-recipe-gallery__blank-link:hover {
    color: var(--color-text);
    text-decoration: underline;
}

/* ─── Recipes modal ───────────────────────────────────────────────── */

.audhd-recipes-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.audhd-recipes-modal__scrim {
    position: absolute;
    inset: 0;
    background: var(--color-shell-scrim);
    border: none;
    appearance: none;
    cursor: pointer;
}

.audhd-recipes-modal__panel {
    position: relative;
    width: min(960px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
    padding: 24px 28px;
    box-shadow: var(--shadow-card);
}

.audhd-recipes-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.audhd-recipes-modal__close:hover {
    color: var(--color-text);
    border-color: var(--color-line-strong);
}

/* Source: audhd-overview.css */
/* AuDHD additions — audhd-overview
   Loaded after app.css; overrides apply.

   The "Wat hapert er?" triage chip strip (.ah-triage-*) was removed from the
   Overview surface — the desktop "Meldingen" card now covers triage. The dead
   rules (which also carried a latent dark-mode severity-tint bug) were stripped
   on 2026-06-15. The <link> is retained so the overlay can host future
   Overview-only polish without re-touching index.html. */

/* Source: audhd-meer.css */
/* AuDHD additions — audhd-meer
   Loaded after app.css; overrides apply. */

/* Section header inside the Meer bottom sheet — matches the sidebar
   .nav-section visual (uppercase, muted, letter-spaced) so users build a
   single mental model across desktop sidebar + mobile sheet. */
.meer-sheet-section-label {
    margin: 14px 4px 4px;
    padding: 4px 8px;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* First section label sits flush with the sheet title — no double spacing. */
.meer-sheet-list > .meer-sheet-section-label:first-child {
    margin-top: 2px;
}

/* Logout stays calm — same row treatment as other items, only a subtle
   amber accent on the label so it reads as a verb, not a danger button. */
.meer-sheet-item--logout .meer-sheet-item-label {
    color: var(--color-solar);
}

/* Beheer-availability dot on the Meer tabbar icon. Informational
   ("there's depth here"), not a notification badge — small, no count,
   no animation. Positioned at top-right of the icon glyph. */
.mobile-tabbar-item {
    position: relative;
}
.mobile-tabbar-beheer-dot {
    position: absolute;
    top: 6px;
    /* Right offset places the dot over the icon's top-right corner
       across both 4-tab and 5-tab fill modes (icon is centered). */
    right: calc(50% - 14px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-solar);
    pointer-events: none;
}

/* Source: audhd-microwins.css */
/* AuDHD additions — audhd-microwins
   Loaded after app.css; overrides apply. */

/* ---------- F1: Stale-card "Nu vernieuwen" button ---------- */

.status-stale-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.status-stale-row .status-stale {
    margin: 0;
}

.status-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
    font-family: inherit;
}

.status-refresh-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}

.status-refresh-btn:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}

.status-refresh-btn:disabled,
.status-refresh-btn.is-busy {
    cursor: progress;
    opacity: 0.85;
}

.status-refresh-btn.is-failed {
    border-color: color-mix(in srgb, var(--color-error) 45%, var(--color-line));
    color: var(--color-error-text);
}
/* Light: white-alpha base/hover invisible on white bg */
[data-theme="light"] .status-refresh-btn {
    background: var(--color-bg-soft);
    border-color: var(--color-line);
    color: var(--color-text);
}
[data-theme="light"] .status-refresh-btn:hover:not(:disabled) {
    background: var(--color-bg-deep);
    border-color: var(--color-line-strong);
}
[data-theme="light"] .status-refresh-btn.is-failed {
    border-color: rgba(185, 28, 28, 0.45);
    color: var(--color-error);
}

.status-refresh-spin {
    display: inline-block;
    animation: audhd-refresh-spin 0.9s linear infinite;
    animation-play-state: paused;
}

/* Only spin while the refresh is actively in flight. Idle animation on a
   visible button is exactly the kind of continuous motion that hurts AuDHD
   focus — keep it paused at rest. */
.status-refresh-btn.is-busy .status-refresh-spin {
    animation-play-state: running;
}

@keyframes audhd-refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.status-refresh-text {
    white-space: nowrap;
}

/* On very tight cards, hide the text label and keep the icon only */
@media (max-width: 480px) {
    .status-refresh-text {
        display: none;
    }
    .status-refresh-btn {
        padding: 4px 8px;
    }
}

/* ---------- F2: Stays RangePicker quick-preset chips ---------- */

.range-quick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px;
}

.range-quick-chip {
    appearance: none;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.2;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    font-family: inherit;
}

.range-quick-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.range-quick-chip:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}

.range-quick-chip.is-active {
    background: var(--color-info-soft);
    border-color: color-mix(in srgb, var(--color-info) 55%, var(--color-line));
    color: var(--color-info);
}

[data-theme="light"] .range-quick-chip.is-active {
    background: var(--color-info-soft);
    border-color: rgba(var(--color-info-rgb), 0.50);
    color: var(--color-info);
}
/* Light: white-alpha base/hover border and bg are invisible on white */
[data-theme="light"] .range-quick-chip {
    background: var(--color-bg-soft);
    border-color: var(--color-line-strong);
    color: var(--color-text);
}
[data-theme="light"] .range-quick-chip:hover {
    background: var(--color-bg-deep);
    border-color: var(--color-line-strong);
}

/* Source: audhd-editor.css */
/* AuDHD additions — audhd-editor
   Loaded after audhd-automations.css. Calm error UX + plain-Dutch rule
   summary for AutomationRuleEditor. */

/* ─── Plain-Dutch rule summary bar (T5.19) ────────────────────────────
   Sits between the editor header and the WANNEER/ALS/DAN columns.
   Calm, non-interactive, single-line preview of "what this rule does". */
.audhd-editor-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 4px 0 12px;
    border-radius: 10px;
    background: rgba(var(--color-info-rgb, 59, 130, 246), 0.07);
    border: 1px solid rgba(var(--color-info-rgb, 59, 130, 246), 0.20);
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.005em;
}

.audhd-editor-summary__icon {
    flex-shrink: 0;
    font-size: 1rem;
    opacity: 0.75;
}

.audhd-editor-summary__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audhd-editor-summary__text--empty {
    color: var(--color-text-muted);
    font-weight: 400;
    font-style: italic;
}

.audhd-editor-summary__arrow {
    margin: 0 4px;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* ─── Calm amber teaching banner (T1.1) ───────────────────────────────
   Replaces the shouty red validation strip when the user hasn't actively
   tried to save yet. Tone: "still missing one thing", not "ERROR". */
.audhd-editor-teaching {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 0 12px;
    border-radius: 10px;
    border-left: 3px solid var(--color-warning);
    background: var(--color-warning-soft-faint, rgba(217, 119, 6, 0.07));
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.4;
}

.audhd-editor-teaching__icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--color-warning, #d97706);
    line-height: 1.4;
}

.audhd-editor-teaching__text {
    flex: 1 1 auto;
    min-width: 0;
}

/* ─── Footer count summary (T1.2) ─────────────────────────────────────
   Tiny count-only chip that ONLY appears after a failed Opslaan attempt.
   Replaces the duplicate footer error strip. */
.audhd-editor-error-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 8px 0 0;
    border-radius: 999px;
    background: rgba(var(--color-warning-rgb, 217, 119, 6), 0.10);
    color: var(--color-warning-text, #b45309);
    font-size: 0.85rem;
    font-weight: 500;
    width: fit-content;
}

.audhd-editor-error-count__icon {
    font-size: 0.75rem;
    line-height: 1;
}

/* ─── Sticky editor header (follow-up patch to Wave D) ────────────────
   The rule editor's actions (Terug · titel · toggle · Simuleren · Opslaan)
   live in `.automation-editor__header`, NOT a footer — there is no footer
   element. The modal panel is the scroll container (overflow-y: auto), so
   when the user scrolls a tall rule the header scrolls away with the
   content and Save becomes unreachable (tunnel-feeling failure). Pinning
   the header to the top of the panel solves it on every viewport.

   Validation 2026-05-03 confirmed `.automation-editor__footer` matched
   nothing in the DOM; the original Wave D rule was a no-op. */
.automation-editor-modal-panel .automation-editor__header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-surface-strong, var(--color-surface));
    border-bottom: 1px solid var(--color-line);
}

/* Source: audhd-rangepicker.css */
/* ─────────────────────────────────────────────────────────────────────────
   T1.3 — RangePicker "Bereken" button calm-when-clean

   When the displayed report already matches the inputs (the user clicked a
   preset chip, or just submitted), the Bereken button drops to the calm
   ghost style. The primary-CTA amber returns the moment a date is manually
   edited — that's when the action genuinely needs doing.

   No new colours: reuses the .btn-ghost / .btn-primary tokens from app.css.
   This file only carries the AuDHD-specific transition + a softer
   border-when-clean so the button doesn't fully vanish into the row.
   ───────────────────────────────────────────────────────────────────────── */

.range-bereken-btn {
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        color 220ms ease,
        box-shadow 220ms ease;
}

/* Calm state: ghost. Pull a soft border in so it still reads as a button
   in the input row (without the border, ghost buttons can be invisible
   next to bordered date inputs). */
.range-bereken-btn--calm {
    border-color: var(--color-line-strong);
}

.range-bereken-btn--calm:hover:not(:disabled) {
    border-color: var(--color-line-strong);
}

/* Dirty state: keep the primary amber as-is — no extra glow, the gradient
   already does the work. Override left intentionally minimal. */
.range-bereken-btn--dirty {
    /* nothing additional — .btn-primary handles it */
}

.range-picker-error {
    flex-basis: 100%;
    margin-top: 0;
}

/* Source: audhd-modi.css */
/* AuDHD additions — audhd-modi
   Loaded after app.css; overrides apply.

   T2.7.A — replace "empty" debug-leak with calm Standaardgedrag explainer
   T2.7.B — section reorder handled in Modes.js template
   T2.7.C — 1-line action summaries in mode rows (instead of "—")
   T2.7.D — relative-time chip per calendar entry, ticked by clock.now
   T2.7.E — Verwijder behind ⋯ overflow with inline confirmation
   T2.7.F — primary CTA "+ Plan een nieuwe periode" promoted next to title
*/

/* ---------- T2.7.A: calm explainer line under "Standaardgedrag" ---------- */

.mode-status-explainer {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-soft);
}

/* ---------- T2.7.C: action summary line on Modi rows ---------- */

.mode-summary {
    color: var(--color-text-soft);
    font-size: 13px;
    line-height: 1.4;
}

.mode-summary--empty {
    font-style: italic;
    opacity: 0.75;
}

/* ---------- T2.7.D: relative-time chip on Kalender rows ---------- */

.mode-calendar-when {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    white-space: nowrap;
}

.mode-calendar-when--future {
    color: var(--color-info);
    background: var(--color-info-soft);
    border-color: color-mix(in srgb, var(--color-info) 35%, var(--color-line));
}

.mode-calendar-when--active {
    color: var(--color-success-text);
    background: var(--color-success-soft);
    border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-line));
}

/* Past variant: solid muted text + visible border instead of stacked
   opacity. Reads as quiet historical context, still legible. */
.mode-calendar-when--past {
    color: var(--color-text-soft);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Light theme: dark-tuned text colors above are invisible on white tints;
   use semantic text-color tokens with darker peer rgba. */
[data-theme="light"] .mode-calendar-when--future {
    color: var(--color-info);
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.45);
}

[data-theme="light"] .mode-calendar-when--active {
    color: var(--color-success-text);
    background: rgba(5, 150, 105, 0.12);
    border-color: rgba(5, 150, 105, 0.45);
}

[data-theme="light"] .mode-calendar-when--past {
    color: var(--color-text-soft);
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
}

/* ---------- T2.7.E: ⋯ overflow menu with inline confirmation ---------- */

.row-overflow {
    position: relative;
    display: inline-block;
}

.row-overflow-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    color: var(--color-text-soft);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    font-family: inherit;
}

.row-overflow-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--color-text);
}

.row-overflow-toggle:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}

.row-overflow-toggle.is-open {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text);
}

.row-overflow-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 220px;
    padding: 6px;
    background: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.row-overflow-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
    color: var(--color-text);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}

.row-overflow-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.row-overflow-item--danger {
    color: var(--color-error-text);
}

.row-overflow-item--danger:hover {
    background: var(--color-error-soft);
    color: var(--color-error-text);
}

[data-theme="light"] .row-overflow-item--danger {
    color: var(--color-error);
}

[data-theme="light"] .row-overflow-item--danger:hover {
    background: rgba(185, 28, 28, 0.08);
    color: var(--color-error);
}

.row-overflow-confirm {
    padding: 8px 10px;
}

.row-overflow-confirm-text {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-soft);
}

.row-overflow-confirm-actions {
    display: flex;
    gap: 6px;
}

.row-overflow-confirm-actions .btn {
    flex: 1;
}

/* Light-theme overrides for the ⋯ overflow chrome.
   The dark theme uses rgba(255,255,255,0.06–0.18) for hover/open
   states and the menu border. On light surfaces those are invisible.
   Mirror with neutral-dark tints; alphas tuned slightly higher than
   the dark counterparts because dark-on-light reads lighter at equal
   alpha. (See .mode-library-chip-more block above for the same
   pattern.) */
[data-theme="light"] .row-overflow-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.18);
    color: var(--color-text);
}

[data-theme="light"] .row-overflow-toggle.is-open {
    background: rgba(0, 0, 0, 0.10);
    color: var(--color-text);
}

[data-theme="light"] .row-overflow-menu {
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .row-overflow-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* ---------- T2.7.F: primary CTA "+ Plan een nieuwe periode" ---------- */

.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.section-header-row .section-header {
    margin: 0;
}

/* The promoted CTA reuses .btn .btn-primary tokens from app.css — same
   amber gradient as the Verblijven page Bereken button. No new colours. */
.mode-calendar-cta {
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   T2.7.G — De-blur pass: hero status block + timeline-band Kalender
   Cures the "all four cards stack identically" problem by breaking the
   shared .card chrome on the status section and replacing the calendar
   list's row-grammar with phase-tinted bands distinct from the editor
   list's rows.
   ───────────────────────────────────────────────────────────────────── */

.mode-hero {
    position: relative;
    padding: 28px 28px 24px 36px;
    border-radius: var(--radius-2xl, 24px);
    background:
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--color-solar) 18%, transparent), transparent 38%),
        var(--color-bg-alt);
    border: 1px solid var(--color-line);
    overflow: hidden;
    isolation: isolate;
}
.mode-hero::before {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--color-solar);
}
.mode-hero--fallback::before { background: var(--color-text-faint); }

.mode-hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.mode-hero-name {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-text);
}
.mode-hero-state {
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}
.mode-hero-source { color: var(--color-text-soft); font-weight: 600; }
.mode-hero-since { font-variant-numeric: tabular-nums; }
.mode-hero-explainer {
    margin-top: 8px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 60ch;
}
.mode-hero-chips {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mode-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    color: var(--color-text-soft);
    font-size: 0.88rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.mode-hero-chip-icon { font-size: 0.95rem; line-height: 1; }
.mode-hero-chip--empty {
    color: var(--color-text-muted);
    font-style: italic;
    font-weight: 400;
}

/* ── Timeline bands ─────────────────────────────────────────────────── */

.mode-calendar-bands {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mode-calendar-band {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 14px 16px 14px 22px;
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    transition: background 140ms ease, border-color 140ms ease;
}
.mode-calendar-band:hover {
    background: color-mix(in srgb, var(--color-bg-soft) 70%, var(--color-bg-alt));
    border-color: var(--color-line-strong);
}
.mode-calendar-band-rail {
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-line-strong);
}
.mode-calendar-band--active {
    background: color-mix(in srgb, var(--color-solar-soft) 60%, var(--color-bg-alt));
    border-color: color-mix(in srgb, var(--color-solar) 40%, var(--color-line-strong));
}
.mode-calendar-band--active .mode-calendar-band-rail { background: var(--color-solar); }
.mode-calendar-band--future .mode-calendar-band-rail { background: var(--color-water); }
/* Past entries stay full-contrast — rail color alone communicates phase.
   Don't stack opacity on the band; it makes historical records hard to
   read for no signal gain. */
.mode-calendar-band--past .mode-calendar-band-rail { background: var(--color-text-faint); }

.mode-calendar-band-dates {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}
.mode-calendar-band-day { font-weight: 600; color: var(--color-text); font-size: 0.95rem; }
.mode-calendar-band-arrow { color: var(--color-text-muted); font-size: 0.95rem; }

/* Body lays mode name + relative-time chip on a single line; wraps below
   only when truly narrow. Inline pill is autism-safe (single visual chunk
   instead of two stacked pieces). */
.mode-calendar-band-body {
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 4px;
}
.mode-calendar-band-mode {
    font-weight: 600;
    color: var(--color-text);
    font-size: 1rem;
}

.mode-calendar-band-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .mode-hero {
        padding: 22px 20px 20px 26px;
    }
    .mode-hero-name {
        font-size: 1.65rem;
    }
    /* Mobile: keep the desktop horizontal grid (auto 1fr auto) instead of
       stacking. Each entry collapses from 4 visual rows down to 1. Compact
       paddings + font sizes fit the narrower viewport; the body still wraps
       internally if mode + status pill won't fit on one line. */
    .mode-calendar-band {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 10px;
        padding: 10px 10px 10px 16px;
    }
    .mode-calendar-band-dates { gap: 6px; }
    .mode-calendar-band-day { font-size: 0.82rem; }
    .mode-calendar-band-arrow { font-size: 0.82rem; }
    .mode-calendar-band-mode { font-size: 0.92rem; }
    .mode-calendar-band-body {
        gap: 4px 8px;
        row-gap: 2px;
    }
    /* Hide the inline Bewerken button on mobile — the ⋯ overflow menu now
       carries both Bewerken and Verwijderen. Reduces row footprint and
       avoids the awkward two-button stack inside a constrained row. */
    .mode-calendar-band-actions .btn { display: none; }
    .mode-calendar-band-actions {
        display: flex;
        gap: 4px;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   T2.7.H — Modusbibliotheek as unframed chip strip
   "Configured once, then quiet" — drop the .card frame entirely. Section
   becomes a slim label + wrapping chip strip. Each chip = tap-to-edit,
   always-visible ⋯ (NOT hover-only — long-press on touch is undiscoverable
   and motor-control unfriendly for AuDHD users). Standaard mode marked
   inline with ★, no pill badge.
   ───────────────────────────────────────────────────────────────────── */

.mode-library {
    margin-top: 4px;
}
.mode-library-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}
.mode-library-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.mode-library-count {
    font-size: 0.75rem;
    color: var(--color-text-faint);
    font-variant-numeric: tabular-nums;
}
.mode-library-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.mode-library-chip {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    overflow: visible;
    transition: border-color 140ms ease, background 140ms ease;
}
.mode-library-chip:hover {
    border-color: var(--color-line-strong);
    background: color-mix(in srgb, var(--color-bg-soft) 70%, var(--color-bg-alt));
}
.mode-library-chip--default {
    border-color: color-mix(in srgb, var(--color-solar) 45%, var(--color-line-strong));
}

.mode-library-chip-body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 6px 12px;
    background: transparent;
    border: none;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}
.mode-library-chip-body:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
    border-radius: 999px;
}
.mode-library-chip-body--readonly {
    cursor: default;
}
.mode-library-chip-star {
    color: var(--color-solar);
    font-size: 0.85rem;
    line-height: 1;
}
.mode-library-chip-name { white-space: nowrap; }

.mode-library-chip-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    padding: 0 8px 0 4px;
    margin-left: 2px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    border-radius: 0 999px 999px 0;
    transition: color 120ms ease, background 120ms ease;
}
.mode-library-chip-more:hover,
.mode-library-chip-more.is-open {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .mode-library-chip-more:hover,
[data-theme="light"] .mode-library-chip-more.is-open {
    background: rgba(0, 0, 0, 0.04);
}
.mode-library-chip-more:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}

.mode-library-chip-menu {
    top: calc(100% + 4px);
}

.mode-library-add {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: transparent;
    border: 1px dashed var(--color-line-strong);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 140ms ease, color 140ms ease;
}
.mode-library-add:hover {
    border-color: var(--color-solar);
    color: var(--color-text);
}
.mode-library-add:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   T-STAYS-DEBLUR — /verblijven de-blur (staging prototype)

   Same recipe as the /modi de-blur: hero + bands + slim secondary list,
   different shapes for different jobs. Drops .card chrome on the summary
   (it becomes a destination), gives stays bands a cost-tinted rail
   (paid=warning, earned=success, zero=neutral), slims the empty-days
   breakdown so it doesn't compete with the stays list.
   ───────────────────────────────────────────────────────────────────── */

/* Hero — total cost is the answer the page exists to give. */
.stays-hero {
    position: relative;
    padding: 28px 28px 22px 36px;
    border-radius: var(--radius-2xl, 24px);
    background:
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--stays-hero-accent, var(--color-solar)) 18%, transparent), transparent 38%),
        var(--color-bg-alt);
    border: 1px solid var(--color-line);
    overflow: hidden;
    isolation: isolate;
}
.stays-hero::before {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--stays-hero-accent, var(--color-solar));
}
.stays-hero--paid    { --stays-hero-accent: var(--color-solar); }
.stays-hero--earned  { --stays-hero-accent: var(--color-energy); }
.stays-hero--zero    { --stays-hero-accent: var(--color-text-muted); }
.stays-hero--unknown { --stays-hero-accent: var(--color-text-muted); }

.stays-hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.stays-hero-total {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.stays-hero--paid   .stays-hero-total { color: var(--color-solar-text); }
.stays-hero--earned .stays-hero-total { color: var(--color-success-text); }

.stays-hero-chips {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.stays-hero-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    color: var(--color-text-soft);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}
.stays-hero-chip strong {
    color: var(--color-text);
    font-weight: 700;
    font-size: 1rem;
}
.stays-hero-chip-cost {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    border-left: 1px solid var(--color-line);
    padding-left: 8px;
}

.stays-hero-breakdown {
    margin-top: 16px;
    display: grid;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 6px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    min-width: 0;
    max-width: 560px;
    font-size: 0.88rem;
    line-height: 1.4;
}
.stays-hero-bd-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: baseline;
}
.stays-hero-bd-head {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 4px;
}
.stays-hero-bd-head > span {
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stays-hero-bd-head > span:first-child {
    text-align: left;
}
.stays-hero-bd-label {
    color: var(--color-text-muted);
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stays-hero-bd-val {
    text-align: right;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
    min-width: 0;
}
.stays-hero-bd-val--total {
    font-weight: 700;
    color: var(--color-text-soft);
}
.stays-hero-bd-foot {
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px solid var(--color-line);
    font-weight: 700;
}
.stays-hero-bd-foot .stays-hero-bd-label {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
}
.stays-hero-bd-foot .stays-hero-bd-val,
.stays-hero-bd-foot .stays-hero-bd-val--total {
    color: var(--color-text-soft);
}
@media (max-width: 480px) {
    .stays-hero-breakdown {
        padding: 12px 14px;
        column-gap: 10px;
        font-size: 0.78rem;
    }
    .stays-hero-bd-head {
        font-size: 0.6rem;
        letter-spacing: 0.04em;
    }
}

.stays-hero-tariff {
    margin-top: 14px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}
.stays-hero-tariff--unconfigured {
    color: var(--color-warning-text);
}

/* Stays list — slim section header (eyebrow), bands below. */
.stays-list-section {
    margin-top: 4px;
}
.stays-list-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}
.stays-list-eyebrow-count {
    color: var(--color-text-faint);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.stays-list-bands {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Stay band — date column · mode + cost body · precision chip + chevron. */
.stay-band {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 14px 16px 14px 22px;
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
}
.stay-band:hover {
    background: color-mix(in srgb, var(--color-bg-soft) 70%, var(--color-bg-alt));
    border-color: var(--color-line-strong);
}
.stay-band:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}
.stay-band:active {
    transform: scale(0.997);
}
.stay-band-rail {
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--stay-band-accent, var(--color-line-strong));
}
.stay-band--paid     { --stay-band-accent: var(--color-solar); }
.stay-band--earned   { --stay-band-accent: var(--color-energy); }
.stay-band--zero     { --stay-band-accent: var(--color-line-strong); }
.stay-band--unknown  { --stay-band-accent: var(--color-text-faint); }

.stay-band-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
    font-size: 0.88rem;
    white-space: nowrap;
}
.stay-band-day {
    color: var(--color-text);
    font-weight: 600;
}
.stay-band-arrow {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.stay-band-body {
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.stay-band-mode {
    font-weight: 600;
    color: var(--color-text);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.stay-band-cost {
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    font-weight: 600;
}
.stay-band-cost--paid    { color: var(--color-solar-text); }
.stay-band-cost--earned  { color: var(--color-success-text); }
.stay-band-cost--zero    { color: var(--color-text-soft); }
.stay-band-cost--unknown { color: var(--color-text-muted); }

.stay-band-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.stay-band-chevron {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
}

/* Older stays — scrollable overflow section below the top-4 */
.stays-older-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.stays-older-divider::before,
.stays-older-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-line);
}

.stays-older-scroll {
    max-height: 262px; /* ~4 rows at ~55px each + gaps */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-line-strong) transparent;
    padding-right: 4px;
}
.stays-older-scroll::-webkit-scrollbar {
    width: 4px;
}
.stays-older-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.stays-older-scroll::-webkit-scrollbar-thumb {
    background: var(--color-line-strong);
    border-radius: 2px;
}

/* Empty-days breakdown — slim secondary section. No card chrome, no h2;
   eyebrow label + tighter row list. Visually quieter than the stays bands. */
.empty-days-section {
    margin-top: 8px;
    padding: 12px 18px 14px;
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    opacity: 0.92;
}
.empty-days-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.undo-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-surface-elevated, var(--color-surface));
    color: var(--color-text);
    box-shadow: var(--shadow-panel);
}

@media (max-width: 760px) {
    .undo-toast {
        left: 14px;
        right: 14px;
        bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px));
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .stays-hero {
        padding: 22px 18px 18px 26px;
    }
    .stays-hero-total { font-size: 1.7rem; }

    /* Mobile: keep the desktop horizontal grid (auto 1fr auto) instead of
       stacking. Each stay collapses to a single row. */
    .stay-band {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 10px;
        padding: 10px 10px 10px 16px;
    }
    .stay-band-dates { gap: 6px; font-size: 0.82rem; }
    .stay-band-day { font-size: 0.82rem; }
    .stay-band-arrow { font-size: 0.78rem; }
    .stay-band-mode { font-size: 0.92rem; }
    .stay-band-cost { font-size: 0.85rem; }
    .stay-band-body {
        gap: 4px 8px;
        row-gap: 2px;
    }
    .stay-band-meta {
        justify-content: flex-end;
        gap: 6px;
    }
}

/* Source: audhd-vendor-heroes.css */
/* AuDHD batch — vendor page heroes
 *
 * Replaces the "bare metric / vendor name" hero pattern with
 * "headline + state subtitle". Tado's hero stays unchanged; the rest
 * (Unifi, HeatPump, Pool, Water, Solar, Energy) now use a phrase-based
 * headline with a live state line below.
 *
 * The original hero-title class scales metric values to 64px+; for the
 * new pattern we want the headline to read as a phrase, not a number.
 * .hero-title without the legacy --solar / --pool / --heatpump modifiers
 * uses calmer phrase-typography.
 *
 * Subtitle gets slightly more weight than the legacy version so the
 * state line is the second-loudest thing on the page (after the
 * headline) — important for AuDHD scanning: the user wants the
 * device's current state, not its name.
 */

/* Headline — phrase-style. Smaller than the bare-metric variant the
   page-specific modifiers used to set, so a multi-word phrase doesn't
   wrap awkwardly on 1280px desktops. */
.hero .hero-title:not(.hero-title--solar):not(.hero-title--pool):not(.hero-title--heatpump) {
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
}

/* Subtitle — give the state line a bit more weight than the legacy
   "describe what this page does" subtitle. Not bold, but readable. */
.hero .hero-subtitle {
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* MELCloud schedule rows — fixed Ma..Zo positions (T1.4 AuDHD batch).
   Backend may emit days in any order; the visual order must stay
   stable across rows so users keep their spatial map of "Tuesday is
   always the second cell". Inactive slots render as muted placeholders
   to preserve column alignment. */
.schedule-days--fixed {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.schedule-day-slot {
    display: inline-block;
    min-width: 1.4rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-faint);
    opacity: 0.55;
    letter-spacing: 0.04em;
}

.schedule-day-slot--active {
    color: var(--color-text);
    opacity: 1;
    font-weight: 700;
}

/* Source: audhd-admin.css */
/* AuDHD staging — admin pages (audit / system status / settings / users / comfort)
   Loaded after app.css and the other audhd-*.css files via index.html. */

/* ──────────────────────────────────────────────────────────────────────
   T4.13 — /audit grouped + coalesced rendering
   ────────────────────────────────────────────────────────────────────── */

/* Section divider rows. Span the full table width with a slim, calm header
   that breaks the 40-row sea into Vandaag / Gisteren / Eerder deze week /
   {Maand jaar} chunks. Calm, never sticky — a sticky header would amplify
   the scan-tax. */
.audit-table--grouped .ah-section-divider td {
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 18px 12px 8px;
    border-bottom: 1px solid var(--color-line);
}

.audit-table--grouped .ah-section-divider:first-child td {
    padding-top: 6px;
}

.ah-section-divider--mobile {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 14px 12px 6px;
}

/* Two-line timestamp: absolute (HH:MM) on top, relative (X min geleden)
   muted underneath. Both render on every row so the user can scan either
   axis. tabular-nums keeps "12:08 / 1 min geleden" stacked aligned. */
.ah-time-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
}

.ah-time-stack .ah-time-abs {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ah-time-stack .ah-time-rel,
.ah-time-rel {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

/* Coalesced cluster summary — single row standing in for many. */
.audit-table--grouped .ah-cluster-row td {
    background: rgba(255, 255, 255, 0.025);
}

.ah-cluster-expand {
    margin-left: 8px;
    background: transparent;
    border: 0;
    color: var(--color-info);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}

.ah-cluster-expand:hover,
.ah-cluster-expand:focus-visible {
    background: rgba(var(--color-info-rgb), 0.12);
    outline: none;
}

.ah-cluster-head td {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    padding: 8px 12px;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px dashed var(--color-line);
}

.ah-cluster-head--mobile {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    padding: 10px 12px;
    border-radius: 8px;
    margin: 6px 0;
}

.audit-table--grouped .ah-cluster-child td:first-child {
    padding-left: 28px;
}

.audit-table--grouped .ah-cluster-child td {
    background: rgba(255, 255, 255, 0.018);
}

.ah-cluster-card {
    border-left: 3px solid var(--color-info);
}

/* "Geen gegevens" pill replaces dual em-dash columns when both ISP and
   Locatie are null. One muted chip, no scan tax. */
.ah-empty-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ──────────────────────────────────────────────────────────────────────
   T4.15 — Settings danger zone (Verwijder behind Geavanceerd)
   ────────────────────────────────────────────────────────────────────── */

.ah-danger-zone {
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px dashed rgba(var(--color-error-rgb), 0.35);
    border-radius: 12px;
    background: rgba(var(--color-error-rgb), 0.03);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ah-danger-zone-label {
    color: rgba(var(--color-error-rgb), 0.85);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ah-danger-zone-hint {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.ah-danger-zone-confirm-text {
    color: var(--color-text);
    font-size: 0.88rem;
}

.ah-danger-zone-confirm-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────────────
   T4.17 — /gebruikers Bewerken affordance
   ────────────────────────────────────────────────────────────────────── */

.ah-user-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ah-user-row-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.ah-user-row-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: background 160ms ease, color 160ms ease;
}

.ah-user-row:hover .ah-user-row-edit,
.ah-user-row:focus-visible .ah-user-row-edit,
.ah-user-row.selected .ah-user-row-edit {
    background: rgba(var(--color-info-rgb), 0.16);
    color: var(--color-info);
}

.ah-user-row-edit-chevron {
    font-size: 1.05rem;
    line-height: 1;
}

/* ──────────────────────────────────────────────────────────────────────
   T4.18 — /comfort desktop styling
   ────────────────────────────────────────────────────────────────────── */

/* The .domain-preview rules in app.css are wrapped in @media (max-width:1100px)
   so on desktop the cards have no styling at all — broken anchor underlines,
   no spacing, "22°CInlaat" runs together because the value/label spans are
   inline by default. Mirror the mobile styling here, scaled for desktop. */
@media (min-width: 1101px) {
    .comfort-desktop-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
        margin-top: 16px;
    }

    .comfort-desktop-grid .domain-preview {
        display: grid;
        gap: 12px;
        padding: 20px;
        border: 1px solid var(--color-line);
        border-radius: 18px;
        background: var(--color-bg-alt);
        text-decoration: none;
        color: var(--color-text);
        cursor: pointer;
        transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
    }

    .comfort-desktop-grid .domain-preview:hover,
    .comfort-desktop-grid .domain-preview:focus-visible {
        border-color: var(--color-line-strong, rgba(255, 255, 255, 0.18));
        background: rgba(255, 255, 255, 0.03);
        outline: none;
    }

    .comfort-desktop-grid .domain-preview-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .comfort-desktop-grid .domain-preview-icon {
        display: inline-grid;
        place-items: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    .comfort-desktop-grid .domain-preview-icon svg {
        width: 22px;
        height: 22px;
    }

    .comfort-desktop-grid .domain-preview-title {
        font-family: var(--font-display);
        font-size: 1.02rem;
        font-weight: 700;
        letter-spacing: 0;
        flex: 1 1 0;
        min-width: 0;
    }

    .comfort-desktop-grid .domain-preview-chevron {
        color: var(--color-text-muted);
        font-size: 1.3rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .comfort-desktop-grid .domain-preview-summary {
        color: var(--color-text-soft, var(--color-text-muted));
        font-size: 0.88rem;
        margin: 0;
        line-height: 1.4;
    }

    /* Stats row — display:flex with gap fixes the "22°CInlaat" run-together
       bug (spans were defaulting to inline display with no whitespace). */
    .comfort-desktop-grid .domain-preview-stats {
        display: flex;
        gap: 18px;
        flex-wrap: wrap;
    }

    .comfort-desktop-grid .domain-preview-stat {
        display: grid;
        gap: 2px;
    }

    .comfort-desktop-grid .domain-preview-stat-value {
        font-size: 1.15rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
        color: var(--color-text);
    }

    .comfort-desktop-grid .domain-preview-stat-label {
        color: var(--color-text-muted);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
}

/* ─────────────────────────────────────────────────────────────────────
 * SystemStatus regelactiviteit panel (staging prototype)
 *
 * Backend (php/api/index.php /health/detail) returns:
 *   automations.recentFirings      — last 20 entries from actions.log
 *   automations.firingsLastHour    — { ruleId: count } for last 60 min
 *
 * The panel surfaces "frost guard fired at 03:14" / "solar surplus fired
 * 14× last hour" without scrolling actions.log. Closes the observability
 * gap on automation v2.
 * ───────────────────────────────────────────────────────────────────── */

.system-firings-top {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.system-firing-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    font-size: 0.78rem;
    color: var(--color-text-soft);
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.system-firing-chip strong {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.system-firings-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.system-firing-row {
    display: grid;
    grid-template-columns: minmax(80px, auto) 1fr minmax(40px, auto);
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-line);
}
.system-firing-row:last-child { border-bottom: none; }
.system-firing-time {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}
.system-firing-rule {
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.system-firing-event {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    text-align: right;
}
.system-firing-row--automation_activate .system-firing-event {
    color: var(--color-success-text);
}
.system-firing-row--automation_deactivate .system-firing-event {
    color: var(--color-text-muted);
}

.system-firings-empty {
    margin-top: 12px;
    padding: 10px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-align: center;
    background: var(--color-bg-soft);
    border-radius: 8px;
}

/* Flapping-rule chip — count >= 10 firings/hour gets an amber border so
   operator-mode-deliberate scanning catches the outlier without a separate
   widget. The chip's neutral chrome stays so the AAN/UIT timeline below
   reads consistently. */
.system-firing-chip--flapping {
    border-color: color-mix(in srgb, var(--color-warning) 55%, var(--color-line));
    background: color-mix(in srgb, var(--color-warning-soft) 60%, var(--color-bg-soft));
}
.system-firing-chip--flapping strong {
    color: var(--color-warning-text);
}
[data-theme="light"] .system-firing-chip--flapping {
    border-color: color-mix(in srgb, var(--color-warning) 65%, var(--color-line));
    background: color-mix(in srgb, var(--color-warning-soft) 80%, transparent);
}

/* Loading skeleton — single-line placeholder shown while /health/detail
   is in flight. Reserves a stable height so the section grids don't pop
   in late and shift the rest of the page. Per CLAUDE.md the app prohibits
   idle animation; this skeleton is a static "Statusgegevens laden…" line,
   not an infinite shimmer. */
.system-skeleton {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.system-skeleton-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ──────────────────────────────────────────────────────────────────────
   Light-theme overrides for white-rgba surfaces
   ──────────────────────────────────────────────────────────────────────
   The dark theme uses faint white tints (rgba(255,255,255,0.018–0.04))
   to distinguish cluster rows, sub-rows, status pills, and pill-on-row
   chrome from the surrounding surface. On light backgrounds those tints
   are invisible (white on white). Mirror each tint with an equivalent
   neutral-dark tint so the cluster/firing/pill chrome stays distinguishable
   against light surfaces. Alpha values are slightly higher than the dark
   counterparts because dark-on-light needs a touch more weight to feel
   equivalent. */

[data-theme="light"] .audit-table--grouped .ah-cluster-row td {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .ah-cluster-head td {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ah-cluster-head--mobile {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .audit-table--grouped .ah-cluster-child td {
    background: rgba(0, 0, 0, 0.025);
}

[data-theme="light"] .ah-empty-pill {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ah-user-row-edit {
    background: rgba(0, 0, 0, 0.04);
}

@media (min-width: 1101px) {
    [data-theme="light"] .comfort-desktop-grid .domain-preview:hover,
    [data-theme="light"] .comfort-desktop-grid .domain-preview:focus-visible {
        border-color: rgba(0, 0, 0, 0.18);
        background: rgba(0, 0, 0, 0.025);
    }
}


/* /css/mobile.css */
/* Mobile GUI standardization.
   Loaded last so these are cross-page guardrails, not page-specific chrome. */

@media (max-width: 1100px) {
    .main-content,
    .content-shell,
    .content-shell--mobile-app,
    .mob-ed,
    .mobile-settings-page {
        min-width: 0;
        overflow-x: clip;
    }

    .mobile-topbar-brand,
    .mobile-home-switch,
    .mobile-list-row-left,
    .mobile-list-row-body,
    .mob-ed-row-body,
    .mob-ed-strip-body,
    .mob-ed-profile-body {
        min-width: 0;
    }

    .mobile-topbar-kicker,
    .mobile-topbar-title,
    .mobile-home-switch-value,
    .mob-ed-row-title,
    .mob-ed-row-sub,
    .mob-ed-tile-label,
    .mob-ed-tile-sub,
    .mob-ed-profile-name,
    .mob-ed-profile-meta,
    .mob-ed-strip-title,
    .mob-ed-strip-sub {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-topbar-kicker,
    .mobile-topbar-title,
    .mobile-home-switch-value,
    .mob-ed-row-title,
    .mob-ed-profile-name,
    .mob-ed-strip-title {
        white-space: nowrap;
    }

    .mob-ed-row,
    .mobile-list-row,
    .mob-ed-tile,
    .mob-ed-strip,
    .mobile-tabbar-item,
    .mobile-home-switch,
    .mobile-profile-link,
    .mobile-back-button {
        touch-action: manipulation;
    }

    .mob-ed-row-right,
    .mobile-list-row-right {
        min-width: 0;
        max-width: 44%;
        flex-shrink: 0;
    }

    .mobile-list-row-right--actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .mob-ed-row-val,
    .mobile-list-row-right,
    .profile-notif-chip {
        max-width: 100%;
    }

    .mob-ed-row-val,
    .profile-notif-chip {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mob-ed-hero-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mob-ed-hero-stat {
        min-width: 0;
    }

    .mob-ed-hero-stat .v {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 380px) {
    .mob-ed-page-title {
        padding-left: 18px;
        padding-right: 18px;
        font-size: 29px;
    }

    .mob-ed-eyebrow,
    .mob-ed-section-h,
    .mob-ed-row {
        padding-left: 18px;
        padding-right: 18px;
    }

    .mob-ed-hero {
        margin-left: 12px;
        margin-right: 12px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .mob-ed-row-right,
    .mobile-list-row-right {
        max-width: 40%;
    }

    .mob-ed-hero-num {
        font-size: 52px;
    }

    .mob-ed-hero-stat .v {
        font-size: 16px;
    }
}