/* ==========================================================================
   Ecobee Utility Monitor — styles

   Contents
     1.  Design tokens (light + dark)       9.  Home: tiles, stores, thermostat cards
     2.  Base                               10. Thermostat detail
     3.  Shell: sidebar, tab bar            11. Charts
     4.  Page chrome: nav bar, titles       12. Usage
     5.  Cards, grouped lists, rows         13. Alerts and Activity
     6.  Buttons and controls               14. Settings
     7.  Overlays: sheet, dialog, toast     15. Sign-in screens
     8.  Banners, pills, chips, states      16. Utilities, motion, print

   Mobile first. Desktop layout starts at 1024px.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */

:root {
  color-scheme: light dark;

  /* surfaces */
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --card-2: #F2F2F7;                 /* a fill inside a card */
  --material: rgba(249, 249, 251, 0.88);   /* translucent bars */
  --sidebar: rgba(255, 255, 255, 0.72);
  --overlay: rgba(0, 0, 0, 0.36);

  /* text */
  --label: #000000;
  --label-2: #5C5C63;
  --label-3: #8A8A8F;
  --separator: rgba(60, 60, 67, 0.16);
  --fill: rgba(120, 120, 128, 0.12);
  --fill-2: rgba(120, 120, 128, 0.2);

  /* system colours: the plain name is for fills and icons, -text passes contrast as small text */
  --blue: #007AFF;      --blue-text: #0062CC;    --blue-soft: rgba(0, 122, 255, 0.12);
  --green: #34C759;     --green-text: #1D7A36;   --green-soft: rgba(52, 199, 89, 0.16);
  --orange: #FF9500;    --orange-text: #A94F00;  --orange-soft: rgba(255, 149, 0, 0.16);
  --red: #FF3B30;       --red-text: #C7221A;     --red-soft: rgba(255, 59, 48, 0.12);
  --teal: #30B0C7;      --teal-text: #00728A;    --teal-soft: rgba(48, 176, 199, 0.16);
  --indigo: #5856D6;    --indigo-soft: rgba(88, 86, 214, 0.14);
  --gray: #8E8E93;

  /* chart ink */
  --grid: rgba(60, 60, 67, 0.1);
  --grid-strong: rgba(60, 60, 67, 0.22);
  --line-indoor: #1C1C1E;
  --line-cool: #007AFF;
  --line-heat: #E26F00;
  --line-outdoor: #9A9AA0;
  /* categorical series (validated for colour-blind separation on both card colours) */
  --series-1: #2A78D6; --series-2: #EB6834; --series-3: #1BAF7A; --series-4: #EDA100;
  --series-5: #E87BA4; --series-6: #008300; --series-7: #4A3AA7; --series-8: #8E8E93;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);

  --radius: 18px;
  --radius-sm: 12px;
  --gutter: 16px;
  --tabbar-h: 54px;
  --navbar-h: 44px;
  --sidebar-w: 248px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.25, 0.9, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1C1C1E;
    --card-2: #2C2C2E;
    --material: rgba(22, 22, 24, 0.86);
    --sidebar: rgba(28, 28, 30, 0.72);
    --overlay: rgba(0, 0, 0, 0.56);

    --label: #FFFFFF;
    --label-2: #AEAEB4;
    --label-3: #8A8A90;
    --separator: rgba(120, 120, 128, 0.34);
    --fill: rgba(120, 120, 128, 0.24);
    --fill-2: rgba(120, 120, 128, 0.36);

    --blue: #0A84FF;      --blue-text: #4DA2FF;    --blue-soft: rgba(10, 132, 255, 0.22);
    --green: #30D158;     --green-text: #3DDC66;   --green-soft: rgba(48, 209, 88, 0.2);
    --orange: #FF9F0A;    --orange-text: #FFB340;  --orange-soft: rgba(255, 159, 10, 0.2);
    --red: #FF453A;       --red-text: #FF6B62;     --red-soft: rgba(255, 69, 58, 0.2);
    --teal: #40C8E0;      --teal-text: #5AD0E6;    --teal-soft: rgba(64, 200, 224, 0.2);
    --indigo: #5E5CE6;    --indigo-soft: rgba(94, 92, 230, 0.26);

    --grid: rgba(235, 235, 245, 0.1);
    --grid-strong: rgba(235, 235, 245, 0.24);
    --line-indoor: #FFFFFF;
    --line-cool: #0A84FF;
    --line-heat: #FF9F0A;
    --line-outdoor: #8A8A90;
    --series-1: #3987E5; --series-2: #D95926; --series-3: #199E70; --series-4: #C98500;
    --series-5: #D55181; --series-6: #008300; --series-7: #9085E9; --series-8: #8E8E93;

    --shadow-card: none;
    --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.6);
  }
}

/* ---------- 2. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  scroll-padding-top: calc(var(--navbar-h) + var(--safe-top) + 8px);
}
html.has-overlay { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--label);
  font: 400 17px/1.35 var(--font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
a { color: var(--blue-text); text-decoration: none; }
.tab, .btn, .side-link, .tile-link, .thermo-card, a.row-nav, .alert-link, .banner-action, .navbar-back { text-decoration: none !important; }
@media (hover: hover) { a:hover { text-decoration: underline; } }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
img, svg { display: block; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

:focus { outline: none; }
.sheet:focus-visible, .dialog:focus-visible, .chart-plot:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--blue); outline: 3px solid color-mix(in srgb, var(--blue) 70%, transparent); outline-offset: 2px; border-radius: 6px; }

.num, .tile-value, .thermo-temp, .hero-value, .stat-value, .total-value, .stepper-value, .data-table td, .row-value, .setpoint-value {
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--label-2); font-size: 15px; }
.center { text-align: center; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 300; padding: 11px 14px; border-radius: 10px; background: var(--card); box-shadow: var(--shadow-pop); }
.skip-link:focus { top: calc(var(--safe-top) + 8px); }

.boot { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 24px; }
.boot img { border-radius: 16px; }
.boot-spinner, .btn.is-busy::after, .icon-btn.is-busy::after {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--fill-2); border-top-color: var(--label-2);
  animation: spin 0.8s linear infinite;
}
.noscript { padding: 24px; text-align: center; }

/* ---------- 3. Shell ---------- */

.shell { min-height: 100vh; min-height: 100dvh; }
.sidebar { display: none; }
.content { min-width: 0; padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 24px); }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 0 max(4px, var(--safe-left)) var(--safe-bottom) max(4px, var(--safe-right));
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--separator);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--tabbar-h); min-width: 0; color: var(--label-2); font-size: 10.5px; font-weight: 500; letter-spacing: 0;
}
@media (hover: hover) { .tab:hover { text-decoration: none; } }
.tab .icon { width: 26px; height: 26px; }
.tab.is-active { color: var(--blue); }
.nav-icon { position: relative; display: block; }
.badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.tab .badge { position: absolute; top: -4px; left: 15px; box-shadow: 0 0 0 2px var(--bg); }

.net-banner {
  display: flex; align-items: center; gap: 10px; margin: calc(var(--safe-top) + 8px) var(--gutter) 0; padding: 10px 14px;
  border-radius: var(--radius-sm); background: var(--orange-soft); color: var(--orange-text); font-size: 15px; font-weight: 500;
}
.net-banner span { flex: 1; }

@media (min-width: 1024px) {
  :root { --gutter: 32px; --navbar-h: 64px; }
  .tabbar { display: none; }
  .content { margin-left: var(--sidebar-w); padding-bottom: 48px; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-w);
    display: flex; flex-direction: column; gap: 20px; padding: 22px 14px 18px;
    background: var(--sidebar);
    -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
    border-right: 0.5px solid var(--separator);
  }
  .brand { display: flex; align-items: center; gap: 12px; padding: 2px 8px 6px; }
  .brand img { border-radius: 9px; }
  .brand-name { font-size: 16px; font-weight: 700; line-height: 1.15; }
  .brand-sub { font-size: 13px; color: var(--label-2); }
  .side-nav { display: flex; flex-direction: column; gap: 2px; }
  .side-link {
    display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px; border-radius: 10px;
    color: var(--label); font-size: 15px; font-weight: 500;
  }
@media (hover: hover) { .side-link:hover { background: var(--fill); text-decoration: none; } }
  .side-link .icon { width: 21px; height: 21px; color: var(--blue); }
  .side-link .nav-label { flex: 1; }
  .side-link.is-active { background: var(--fill-2); font-weight: 600; }
  .side-feed { margin-top: auto; padding: 0 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .net-banner { margin-top: 12px; }
}

/* ---------- 4. Page chrome ---------- */

.view { min-width: 0; }
.view-body { padding: 0 max(var(--gutter), var(--safe-right)) 0 max(var(--gutter), var(--safe-left)); max-width: 880px; margin: 0 auto; }
.view-wide .view-body { max-width: 1320px; }

.navbar {
  position: sticky; top: 0; z-index: 30; padding-top: var(--safe-top);
  border-bottom: 0.5px solid transparent;
  transition: background-color 0.2s, border-color 0.2s;
}
.navbar.is-scrolled {
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--separator);
}
.navbar-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--navbar-h);
  padding: 0 max(8px, var(--safe-right)) 0 max(8px, var(--safe-left)); max-width: 880px; margin: 0 auto;
}
.view-wide .navbar-inner { max-width: 1320px; }
.navbar-title { font-size: 17px; font-weight: 600; opacity: 0; transition: opacity 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar.is-scrolled .navbar-title { opacity: 1; }
.navbar-leading { display: flex; align-items: center; min-width: 0; }
.navbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding-right: 4px; }
.navbar-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px 0 0; font-size: 17px; color: var(--blue); }
.navbar-back:hover { text-decoration: none; }
.navbar-back .icon { width: 26px; height: 26px; margin-left: -4px; }

.large-title { font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: -0.022em; margin: 2px 0 6px; }
.view-sub { margin-bottom: 14px; min-height: 0; }
.view-sub:empty { margin-bottom: 8px; }
.view-content { display: flex; flex-direction: column; gap: 18px; }
.view-content.is-refreshing .usage-results, .view-content.is-refreshing .card-chart { opacity: 0.55; transition: opacity 0.15s; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.section-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 0; }
.footnote { color: var(--label-2); font-size: 13px; line-height: 1.4; padding: 0 4px; }
.lead { color: var(--label-2); font-size: 16px; line-height: 1.45; }
.hint { color: var(--label-2); font-size: 14px; line-height: 1.4; }

@media (min-width: 1024px) {
  .navbar { background: var(--material); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .navbar-inner { grid-template-columns: auto 1fr auto; padding: 0 var(--gutter); gap: 12px; }
  .navbar-title { opacity: 1; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; grid-column: 2; grid-row: 1; }
  .navbar-leading { grid-column: 1; }
  .navbar-leading:empty { display: none; }
  .navbar:not(.has-back) .navbar-title { grid-column: 1 / span 2; }
  /* The large title is only a scroll sentinel on desktop. */
  .large-title { height: 1px; margin: 0; overflow: hidden; opacity: 0; pointer-events: none; }
  .view-sub { margin-top: 16px; }
  .view-sub:empty { margin-top: 12px; }
  .view-content { gap: 22px; }
}

/* ---------- 5. Cards, grouped lists, rows ---------- */

.card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-card); min-width: 0; }
.card-title { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head .card-title { margin: 0; }
.card > .hint { margin-top: 12px; }
.card-list { padding: 0; overflow: hidden; }

.group { min-width: 0; }
.group + .group, .form-fields > * + * { margin-top: 22px; }
.group-header {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--label-2);
  padding: 0 16px; margin-bottom: 7px;
}
.group-footer { font-size: 13px; line-height: 1.4; color: var(--label-2); padding: 0 16px; margin-top: 7px; }
.group-body { background: var(--card); border-radius: var(--radius-sm); overflow: hidden; }
.card .group-body { background: var(--card-2); }

.row {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 9px 16px;
  background: none; border: 0; text-align: left; color: inherit;
}
.row + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--separator); }
.row-main { flex: 1 1 auto; min-width: 0; }
.row-label { font-size: 17px; line-height: 1.3; }
label.row-label { display: block; cursor: pointer; }
.row-sub { font-size: 13.5px; line-height: 1.35; color: var(--label-2); margin-top: 2px; }
.row-value { color: var(--label-2); text-align: right; flex: 0 1 auto; min-width: 0; }
.row-control { flex: none; display: flex; align-items: center; justify-content: flex-end; }
.row-error { color: var(--red-text); font-size: 13.5px; margin-top: 3px; font-weight: 500; }
.row-stacked { flex-direction: column; align-items: stretch; gap: 2px; }
.row-wide { flex-wrap: wrap; }
.row-wide .row-main { flex: 1 1 130px; }
.row-wide .row-control { flex: 1 1 210px; }
.row-wide .field, .row-wide .input-wide { width: 100%; }
.row-wide .field { justify-content: flex-end; }
.row-wide .select-wrap, .row.row-wide .select { width: 100%; max-width: none; }
.row-wide .row-control { justify-content: stretch; }
.row-icon {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--gray);
}
.row-icon .icon { width: 19px; height: 19px; }
.row-icon.tone-blue { background: var(--blue); }
.row-icon.tone-green { background: var(--green); }
.row-icon.tone-orange { background: var(--orange); }
.row-icon.tone-red { background: var(--red); }
.row-icon.tone-teal { background: var(--teal); }
.row-icon.tone-indigo { background: var(--indigo); }
.row-icon.tone-gray { background: var(--gray); }
.row-nav { cursor: pointer; }
a.row-nav:hover { text-decoration: none; }
@media (hover: hover) { .row-nav:hover, .row-choice:hover:not(:disabled) { background: var(--fill); } }
.row-nav:active, .row-choice:active:not(:disabled) { background: var(--fill-2); }
.row-nav.is-selected { background: var(--fill-2); }
.row-nav.is-destructive .row-label { color: var(--red-text); }
.row-chevron { color: var(--label-3); flex: none; margin-right: -4px; }
.row-chevron .icon { width: 18px; height: 18px; }
.row-icon + .row-main { margin-left: 2px; }
.row:has(> .row-icon) + .row:has(> .row-icon)::before { left: 60px; }
.row-choice { cursor: pointer; }
.row-choice:disabled { opacity: 0.5; }
.row-check { flex: none; width: 22px; color: var(--blue); }
.row-check .icon { width: 22px; height: 22px; stroke-width: 2.4; }

/* ---------- 6. Buttons and controls ---------- */

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 0 18px; border: 0; border-radius: 13px;
  font-size: 17px; font-weight: 600; white-space: nowrap; text-decoration: none;
  background: var(--fill); color: var(--label);
  transition: opacity 0.15s, transform 0.1s, background-color 0.15s;
}
@media (hover: hover) { .btn:hover { text-decoration: none; filter: brightness(0.97); } }
.btn:active:not(:disabled) { transform: scale(0.98); opacity: 0.85; }
.btn:disabled { opacity: 0.42; }
.btn .icon { width: 19px; height: 19px; stroke-width: 2; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-tinted { background: var(--blue-soft); color: var(--blue-text); }
.btn-plain { background: none; color: var(--blue-text); padding: 0 10px; }
.btn-danger { background: var(--red-soft); color: var(--red-text); }
.btn-gray { background: var(--fill); color: var(--label); }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 34px; padding: 0 14px; border-radius: 17px; font-size: 15px; }
.btn-sm::before { content: ""; position: absolute; inset: -5px 0; }      /* 44px touch target */
.btn.is-busy { color: transparent !important; }
.btn.is-busy > * { visibility: hidden; }
.btn.is-busy::after, .icon-btn.is-busy::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: color-mix(in srgb, currentColor 30%, transparent); }
.btn.is-busy::after { border: 2.5px solid rgba(140, 140, 150, 0.45); border-top-color: var(--label-2); }
.btn-primary.is-busy::after { border-color: rgba(255, 255, 255, 0.4); border-top-color: #fff; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }

.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: none; color: var(--blue);
}
.icon-btn .icon { width: 23px; height: 23px; }
@media (hover: hover) { .icon-btn:hover { background: var(--fill); } }
.icon-btn.is-busy .icon { visibility: hidden; }
.icon-btn.is-busy::after { border: 2.5px solid var(--fill-2); border-top-color: var(--label-2); }

/* segmented control */
.segmented {
  position: relative; display: grid; grid-template-columns: repeat(var(--count, 2), minmax(0, 1fr));
  padding: 2px; border-radius: 10px; background: var(--fill); min-width: 0;
}
.segmented-thumb {
  position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / var(--count, 2));
  border-radius: 8px; background: var(--card); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transform: translateX(calc(var(--index, 0) * 100%)); transition: transform 0.25s var(--ease); opacity: 0;
}
.segmented.has-value .segmented-thumb { opacity: 1; }
.segmented-option {
  position: relative; z-index: 1; min-height: 36px; padding: 0 4px; border: 0; background: none; border-radius: 8px;
  font-size: 15px; font-weight: 500; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.segmented-option::before { content: ""; position: absolute; inset: -4px 0; }
.segmented-option.is-active { font-weight: 600; }
.segmented-option:disabled { color: var(--label-3); }
.segmented-sm .segmented-option { min-height: 30px; font-size: 14px; padding: 0 12px; }
.segmented-sm .segmented-option::before { inset: -7px 0; }
@media (prefers-color-scheme: dark) { .segmented-thumb { background: #636366; box-shadow: none; } }

/* switch */
.switch { position: relative; display: inline-block; width: 51px; height: 31px; flex: none; }
.switch-input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch-track { position: absolute; inset: 0; border-radius: 16px; background: var(--fill-2); transition: background-color 0.2s; }
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.06); transition: transform 0.22s var(--ease);
}
.switch-input:checked + .switch-track { background: var(--green); }
.switch-input:checked + .switch-track::after { transform: translateX(20px); }
.switch-input:focus-visible + .switch-track { outline: 3px solid var(--blue); outline-offset: 2px; }
.switch-input:disabled + .switch-track { opacity: 0.5; }

/* inputs */
.input, .select {
  min-height: 44px; padding: 7px 12px; border: 1px solid transparent; border-radius: 10px; background: var(--fill);
  font-size: 17px; color: var(--label); min-width: 0; -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--label-3); }
.input:focus, .select:focus { outline: none; border-color: var(--blue); background: var(--card); box-shadow: 0 0 0 3px var(--blue-soft); }
.input[aria-invalid="true"] { border-color: var(--red); }
.input-num { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.input-wide { width: 100%; }
.input-block { display: block; width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 12px; background: var(--card); border-color: var(--separator); }
.input-code { text-align: center; font-size: 28px; font-weight: 600; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; padding-left: calc(14px + 0.3em); }
input[type="date"].input { min-width: 150px; }
.field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.field-unit { color: var(--label-2); font-size: 15px; white-space: nowrap; }
.field-error, .form-error { color: var(--red-text); font-size: 14px; font-weight: 500; line-height: 1.35; }
.form-error { padding: 11px 14px; border-radius: var(--radius-sm); background: var(--red-soft); margin-top: 14px; }
.field-help { color: var(--label-2); font-size: 13.5px; line-height: 1.4; margin-top: -8px; }
.select-wrap { position: relative; display: flex; align-items: center; min-width: 0; max-width: 100%; }
.select-wrap .select { padding-right: 36px; max-width: 100%; text-overflow: ellipsis; cursor: pointer; }
.select-wrap .icon { position: absolute; right: 10px; width: 16px; height: 16px; color: var(--label-2); pointer-events: none; }
.select-pill .select { border-radius: 22px; font-weight: 500; font-size: 15px; padding-left: 16px; }
.row .select { max-width: 230px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.stack-field { display: flex; flex-direction: column; gap: 6px; }
.stack-label { font-size: 14px; font-weight: 600; color: var(--label-2); padding-left: 2px; }
.stack .form-error { margin-top: 0; }
.label-with-pill { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* stepper */
.steppers { display: grid; gap: 8px; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 16px; padding: 10px 10px 10px 16px; background: var(--card-2); }
.stepper-label { display: flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 600; white-space: nowrap; }
.stepper-label .icon { width: 20px; height: 20px; stroke-width: 2; }
.stepper-cool .stepper-label { color: var(--blue-text); }
.stepper-heat .stepper-label { color: var(--orange-text); }
.stepper-controls { display: flex; align-items: center; gap: 2px; }
.stepper-value { width: 96px; text-align: center; font: 600 38px/1.05 var(--font-rounded); letter-spacing: -0.02em; white-space: nowrap; }
.stepper.is-changed .stepper-value { color: var(--blue-text); }
.stepper-heat.is-changed .stepper-value { color: var(--orange-text); }
.stepper-btn {
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--card); color: var(--label); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.1s, opacity 0.15s;
}
.stepper-btn .icon { width: 24px; height: 24px; stroke-width: 2.2; }
.stepper-btn:active:not(:disabled) { transform: scale(0.93); }
.stepper-btn:disabled { opacity: 0.35; box-shadow: none; }
@media (prefers-color-scheme: dark) { .stepper-btn { background: #48484A; box-shadow: none; } }
@media (max-width: 400px) {
  .stepper { padding-left: 12px; }
  .stepper-value { width: 76px; font-size: 34px; }
  .stepper-btn { width: 44px; height: 44px; }
}

/* forms */
.form { min-width: 0; }
.save-bar {
  position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 10px); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 8px 8px 8px 16px;
  border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card);
}
.form.is-dirty .save-bar { box-shadow: var(--shadow-pop); background: var(--material); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.form:not(.is-dirty) .save-bar { background: none; box-shadow: none; padding-left: 0; padding-right: 0; position: static; justify-content: flex-end; }
.save-bar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.form-status { font-size: 15px; font-weight: 500; color: var(--label-2); }
.save-bar .btn { min-height: 44px; }
.sheet .save-bar { bottom: 8px; }
@media (min-width: 1024px) { .save-bar { bottom: 16px; } }
.form-block { min-width: 0; }
.form-block + .form-block, .form-block + .button-row, .account + .button-row, .empty + .button-row { margin-top: 10px; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-right: 4px; }
.block-head .group-header { margin: 0; }
.block-title { display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.block-title .group-header { padding: 0; font-size: 17px; text-transform: none; letter-spacing: -0.01em; color: var(--label); }
.form-block > .group-footer { margin: 0 0 10px; }
.block-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 4px 0 16px; }
.block-foot .btn-danger { margin-left: auto; }

/* ---------- 7. Overlays ---------- */

.overlay { position: fixed; inset: 0; z-index: 100; display: flex; }
.overlay-backdrop { position: absolute; inset: 0; background: var(--overlay); opacity: 0; transition: opacity 0.25s; }
.overlay.open .overlay-backdrop { opacity: 1; }

.sheet {
  position: relative; display: flex; flex-direction: column; width: 100%; margin-top: auto;
  max-height: calc(100vh - var(--safe-top) - 12px);
  max-height: calc(100dvh - var(--safe-top) - 12px);
  background: var(--bg); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-pop);
  transform: translateY(104%); transition: transform 0.34s var(--ease);
}
.overlay.open .sheet { transform: none; }
.sheet-lg { height: calc(100vh - var(--safe-top) - 12px); height: calc(100dvh - var(--safe-top) - 12px); }
.sheet-grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--fill-2); margin: 6px auto 0; flex: none; }
.sheet-header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 4px 56px; flex: none; }
.sheet-title { font-size: 17px; font-weight: 600; line-height: 1.25; text-align: center; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.sheet-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--label-2); }
.sheet-close .icon { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--fill); stroke-width: 2.4; }
.sheet-close:hover { background: none; }
.sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 8px max(16px, var(--safe-right)) calc(24px + var(--safe-bottom)) max(16px, var(--safe-left));
}
.sheet-footer { flex: none; padding: 10px 16px calc(12px + var(--safe-bottom)); border-top: 0.5px solid var(--separator); }
.sheet-lead { color: var(--label-2); font-size: 16px; line-height: 1.4; }
.fine-print { display: flex; gap: 8px; color: var(--label-2); font-size: 13px; line-height: 1.45; }
.fine-print .icon { width: 17px; height: 17px; margin-top: 1px; }
.step-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 8px auto 0; }
.step-icon .icon { width: 32px; height: 32px; stroke-width: 2; }
.step-icon.tone-blue { background: var(--blue-soft); color: var(--blue-text); }
.step-icon.tone-green { background: var(--green-soft); color: var(--green-text); }
.step-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

@media (prefers-color-scheme: dark) {
  /* sheets sit one level up, like iOS */
  .sheet { --bg: #1C1C1E; --card: #2C2C2E; --card-2: #3A3A3C; }
}

@media (min-width: 720px) {
  .overlay-sheet { align-items: center; justify-content: center; padding: 28px; }
  .sheet {
    margin: 0; border-radius: 20px; max-height: min(88vh, 940px); height: auto;
    transform: translateY(14px) scale(0.975); opacity: 0; transition: transform 0.24s var(--ease), opacity 0.2s;
  }
  .overlay.open .sheet { opacity: 1; }
  .sheet-sm { width: 460px; }
  .sheet-md { width: 620px; }
  .sheet-lg { width: min(1120px, 100%); height: min(88vh, 940px); }
  .sheet-grabber { display: none; }
  .sheet-header { justify-content: flex-start; min-height: 60px; padding: 8px 64px 4px 24px; }
  .sheet-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; text-align: left; }
  .sheet-close { right: 14px; }
  .sheet-body { padding: 8px 24px 24px; }
}

/* alert-style dialog */
.overlay-dialog { align-items: center; justify-content: center; padding: 24px; z-index: 110; }
.dialog {
  position: relative; width: min(320px, 100%); border-radius: 16px; overflow: hidden;
  background: #F7F7F9;
  box-shadow: var(--shadow-pop); text-align: center;
  transform: scale(1.08); opacity: 0; transition: transform 0.2s var(--ease), opacity 0.15s;
}
.overlay.open .dialog { transform: none; opacity: 1; }
.dialog-content { padding: 20px 18px 18px; }
.dialog-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.dialog-message { margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: var(--label); }
.dialog-message p + p { margin-top: 8px; }
.dialog-line { color: var(--orange-text); font-weight: 500; }
.dialog-warning { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 11px 12px; border-radius: 12px; text-align: left; background: var(--orange-soft); color: var(--label); font-size: 14.5px; line-height: 1.38; }
.dialog-warning .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--orange-text); stroke-width: 2; }
.dialog-warning-title { font-weight: 700; color: var(--orange-text); margin-bottom: 1px; }
.stepper-error { margin: -2px 4px 4px; }
.dialog-actions { display: flex; border-top: 0.5px solid var(--separator); }
.dialog-btn { flex: 1; min-height: 46px; border: 0; background: none; font-size: 17px; color: var(--blue-text); padding: 0 8px; }
.dialog-btn + .dialog-btn { border-left: 0.5px solid var(--separator); }
.dialog-btn-primary { font-weight: 600; }
.dialog-btn.is-destructive { color: var(--red-text); }
@media (hover: hover) { .dialog-btn:hover { background: var(--fill); } }
.dialog-btn:focus-visible { outline-offset: -3px; }
@media (prefers-color-scheme: dark) { .dialog { background: #2C2C2E; } }
@media (min-width: 720px) { .dialog { width: 360px; } .dialog-content { padding: 24px 22px 20px; } .dialog-message { font-size: 15px; } }

/* toast */
/* At the bottom, clear of the page or sheet title. ui.js raises it above whatever is fixed there at the moment
   (tab bar, a form's Save bar, a sheet's action area) and, on desktop, centres it on the content area. */
.toast-host {
  position: fixed; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px); left: 0; right: 0; z-index: 200; display: grid; justify-items: center;
  padding: 0 14px; pointer-events: none;
}
.toast {
  grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; max-width: min(520px, 100%); padding: 11px 18px 11px 14px; border-radius: 24px;
  background: var(--material); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-pop), 0 0 0 0.5px var(--separator); font-size: 15px; font-weight: 500; line-height: 1.3; pointer-events: auto;
  transform: translateY(18px) scale(0.96); opacity: 0; transition: transform 0.28s var(--ease), opacity 0.2s;
}
.toast.open { transform: none; opacity: 1; }
.toast .icon { width: 22px; height: 22px; stroke-width: 2; }
.toast-success .icon { color: var(--green-text); }
.toast-error .icon { color: var(--red-text); }
.toast-info .icon { color: var(--blue-text); }

/* ---------- 8. Banners, pills, chips, states ---------- */

.banner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); }
.banner-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.banner-icon .icon { width: 19px; height: 19px; stroke-width: 2; }
/* The text keeps a readable width: a wide action button drops below it on a phone instead of squeezing it. */
.banner-main { flex: 1 1 190px; min-width: 0; align-self: center; }
.banner-title { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.banner-text { font-size: 14.5px; line-height: 1.38; color: var(--label-2); margin-top: 1px; }
.banner-action {
  flex: none; align-self: center; min-height: 34px; padding: 0 14px; border: 0; border-radius: 17px; display: inline-flex; align-items: center;
  font-size: 15px; font-weight: 600; background: var(--blue-soft); color: var(--blue-text); white-space: nowrap; position: relative;
  margin-left: auto;   /* when it wraps below the text it sits at the right edge */
}
.banner-action::before { content: ""; position: absolute; inset: -5px 0; }
.banner-action:hover { text-decoration: none; }
.banner-info .banner-icon { background: var(--blue-soft); color: var(--blue-text); }
.banner-warn .banner-icon { background: var(--orange-soft); color: var(--orange-text); }
.banner-error .banner-icon { background: var(--red-soft); color: var(--red-text); }
.banner-ok .banner-icon { background: var(--green-soft); color: var(--green-text); }
.banner-warn { background: color-mix(in srgb, var(--orange) 9%, var(--card)); }
.banner-error { background: color-mix(in srgb, var(--red) 9%, var(--card)); }
.card .banner { background: var(--card-2); box-shadow: none; margin-top: 12px; }
.card .banner-warn { background: var(--orange-soft); }
.card .banner-error { background: var(--red-soft); }

.pill {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 9px; border-radius: 12px; flex: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0; white-space: nowrap; background: var(--fill); color: var(--label-2);
}
.pill .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.pill-blue { background: var(--blue-soft); color: var(--blue-text); }
.pill-green { background: var(--green-soft); color: var(--green-text); }
.pill-orange { background: var(--orange-soft); color: var(--orange-text); }
.pill-red { background: var(--red-soft); color: var(--red-text); }
.pill-teal { background: var(--teal-soft); color: var(--teal-text); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 12px 3px 9px; border-radius: 15px;
  font-size: 15px; font-weight: 600; white-space: nowrap; background: var(--fill); color: var(--label-2);
}
.chip-icon { display: grid; place-items: center; }
.chip .icon { width: 18px; height: 18px; stroke-width: 2; }
.chip-cool { background: var(--blue-soft); color: var(--blue-text); }
.chip-heat { background: var(--orange-soft); color: var(--orange-text); }
.chip-fan { background: var(--teal-soft); color: var(--teal-text); }
.chip-offline { background: var(--red-soft); color: var(--red-text); }
.chip.is-running .chip-icon { animation: breathe 2.6s ease-in-out infinite; }
.chip-fan.is-running .chip-icon { animation: spin 3.2s linear infinite; }

.feed { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--label-2); flex-wrap: wrap; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray); flex: none; }
.feed-ok .feed-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.feed-bad .feed-dot { background: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.feed-bad { color: var(--orange-text); font-weight: 500; }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 44px 20px; border-radius: var(--radius); background: var(--card); }
.empty-icon { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--label-2); margin-bottom: 6px; }
.empty-icon .icon { width: 34px; height: 34px; }
.empty.tone-ok .empty-icon { background: var(--green-soft); color: var(--green-text); }
.empty.tone-warn .empty-icon { background: var(--orange-soft); color: var(--orange-text); }
.empty.tone-blue .empty-icon { background: var(--blue-soft); color: var(--blue-text); }
.empty-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.empty-text { max-width: 440px; color: var(--label-2); font-size: 16px; line-height: 1.42; }
.empty-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 14px; width: min(320px, 100%); }
.empty-progress { display: flex; align-items: center; gap: 12px; padding: 12px 4px; text-align: left; color: var(--label-2); font-size: 15px; line-height: 1.35; }
.empty-progress .boot-spinner { flex: none; }

.skeleton { display: flex; flex-direction: column; gap: 16px; }
.skel { border-radius: var(--radius); background: linear-gradient(100deg, var(--fill) 30%, var(--fill-2) 50%, var(--fill) 70%) 0 0 / 300% 100%; animation: shimmer 1.6s ease-in-out infinite; }
.skel-card { height: 212px; }
.skel-tile { height: 104px; }
.skel-chart { height: 300px; }
.skel-line { height: 18px; width: 62%; border-radius: 9px; }

/* ---------- 9. Home ---------- */

.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { container-type: inline-size; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-card); color: var(--label); }
@media (hover: hover) { .tile-link:hover { text-decoration: none; filter: brightness(0.985); } }
.tile-label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--label-2); white-space: nowrap; }
.tile-label .icon { width: 16px; height: 16px; color: var(--blue); stroke-width: 2; }
.tile-value { font: 700 24px/1.15 var(--font-rounded); letter-spacing: -0.02em; white-space: nowrap; }
@supports (font-size: 1cqw) { .tile-value { font-size: clamp(21px, 14cqw, 32px); } }
.tile-unit { font-size: 17px; font-weight: 600; color: var(--label-2); margin-left: 5px; }
.tile-sub { font-size: 13.5px; line-height: 1.3; color: var(--label-2); min-height: 18px; overflow-wrap: anywhere; }
.tile.tone-red .tile-value, .tile.tone-red .tile-label .icon { color: var(--red-text); }
.tile.tone-orange .tile-value, .tile.tone-orange .tile-label .icon { color: var(--orange-text); }
.tile.tone-ok .tile-label .icon { color: var(--green-text); }
.tile.tone-red .tile-sub { color: var(--red-text); font-weight: 600; }

.location { min-width: 0; }
.location + .location { margin-top: 8px; }
.location-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 0 4px; margin-bottom: 10px; }
.location-title { min-width: 0; }
.location-title h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.location-sub { font-size: 14px; color: var(--label-2); margin-top: 1px; }
.location-totals { display: flex; gap: 18px; flex: none; text-align: right; }
.location-cost { display: flex; flex-direction: column; }
.location-empty { padding: 18px 16px; border-radius: var(--radius); background: var(--card); color: var(--label-2); font-size: 15px; }
.stat-label { font-size: 12.5px; font-weight: 600; color: var(--label-2); text-transform: uppercase; letter-spacing: 0.03em; }
.stat-value { font-size: 17px; font-weight: 600; white-space: nowrap; }

.thermo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.thermo-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px; border-radius: 20px;
  background: var(--card); color: var(--label); box-shadow: var(--shadow-card);
  transition: transform 0.15s var(--ease), box-shadow 0.15s;
}
@media (hover: hover) { .thermo-card:hover { text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } }
.thermo-card:active { transform: scale(0.985); }
.thermo-card:focus-visible { border-radius: 20px; }
.thermo-card.tone-cool { background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 9%, var(--card)), var(--card) 62%); }
.thermo-card.tone-heat { background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 11%, var(--card)), var(--card) 62%); }
.thermo-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 26px; }
.thermo-name { font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.alert-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.alert-dot .icon { width: 17px; height: 17px; stroke-width: 2.2; }
.alert-dot.tone-red { background: var(--red); color: #fff; }
.alert-dot.tone-orange { background: var(--orange-soft); color: var(--orange-text); }
.alert-dot.tone-blue { background: var(--blue-soft); color: var(--blue-text); }
.thermo-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; min-height: 30px; }
.thermo-running { font-size: 13.5px; color: var(--label-2); font-weight: 500; }
.thermo-mid { container-type: inline-size; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; }
.thermo-temp { font: 600 52px/0.98 var(--font-rounded); letter-spacing: -0.035em; white-space: nowrap; }
@supports (font-size: 1cqw) { .thermo-temp { font-size: clamp(46px, 22.6cqw, 62px); } }
.thermo-setpoints { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; padding-bottom: 5px; }
.setpoint { display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; color: var(--label-2); white-space: nowrap; }
.setpoint-value { font-size: 19px; font-weight: 600; color: var(--label); min-width: 34px; text-align: right; }
.setpoint-cool .setpoint-value { color: var(--blue-text); }
.setpoint-heat .setpoint-value { color: var(--orange-text); }
.thermo-meta { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14.5px; color: var(--label-2); min-width: 0; }
.thermo-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thermo-meta .icon { width: 17px; height: 17px; }
.thermo-meta.is-hold { color: var(--label); font-weight: 500; }
.thermo-meta.is-stale { color: var(--red-text); font-weight: 600; }
.thermo-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 11px; border-top: 0.5px solid var(--separator); }
.thermo-meta, .policy-badge { margin-bottom: 12px; }
.thermo-meta:has(+ .policy-badge) { margin-bottom: 0; }
.thermo-stat { display: flex; flex-direction: column; min-width: 0; }
.thermo-stat:last-child { text-align: right; }
.policy-badge {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; padding: 9px 11px; border-radius: 12px;
  background: var(--orange-soft); color: var(--orange-text); font-size: 13.5px; font-weight: 600; line-height: 1.32;
}
.policy-badge .icon { width: 17px; height: 17px; stroke-width: 2.2; margin-top: 0.5px; }
.thermo-card.is-offline .thermo-temp, .thermo-card.is-offline .thermo-setpoints, .thermo-card.is-offline .thermo-foot { opacity: 0.42; }
/* Cards that sit side by side share their row tracks, so a card whose state line wraps ("Cooling · stage 2" +
   "Running 30 min") or whose name takes two lines does not push its temperature lower than its neighbours'. */
@supports (grid-template-rows: subgrid) {
  .thermo-grid { row-gap: 0; margin-bottom: -12px; }
  .thermo-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; margin-bottom: 12px; }
  .thermo-top { grid-row: 1; }
  .thermo-state { grid-row: 2; align-self: start; }
  .thermo-mid { grid-row: 3; align-self: end; }
  .thermo-meta { grid-row: 4; }
  .policy-badge { grid-row: 5; }
  .thermo-foot { grid-row: 6; align-self: end; margin-top: 0; }
  .thermo-grid > .skel { margin-bottom: 12px; }
}

@media (min-width: 720px) {
  .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .tile { padding: 16px 18px; }
  .thermo-grid { gap: 16px; }
  @supports (grid-template-rows: subgrid) { .thermo-grid { row-gap: 0; margin-bottom: -16px; } .thermo-card { margin-bottom: 16px; } }
}
@media (max-width: 420px) {
  .location-totals .location-cost:last-child { display: none; }
}

/* ---------- 10. Thermostat detail ---------- */

.detail { display: flex; flex-direction: column; gap: 14px; }
.detail-head { display: flex; flex-direction: column; gap: 12px; }
.hero { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; padding: 18px; border-radius: 22px; background: var(--card); }
.hero.tone-cool { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 13%, var(--card)), var(--card) 70%); }
.hero.tone-heat { background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 15%, var(--card)), var(--card) 70%); }
.hero-value { font: 600 76px/0.95 var(--font-rounded); letter-spacing: -0.04em; }
.hero.is-offline .hero-value { opacity: 0.42; }
.hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.hero-hold { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; }
.hero-hold .icon { width: 17px; height: 17px; color: var(--label-2); }
.hero-where { font-size: 14px; color: var(--label-2); }
.hero-side { flex: 1 1 150px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.fact { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 12px 3px 9px; border-radius: 15px; background: var(--fill); font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.fact .icon { width: 17px; height: 17px; color: var(--label-2); }
.detail-grid { display: grid; gap: 14px; min-width: 0; }
.detail-col, .detail-controls, .detail-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.detail-controls.is-busy { opacity: 0.6; pointer-events: none; transition: opacity 0.15s; }
.choice-group { margin-top: 16px; }
.choice-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--label-2); margin: 0 0 7px 4px; }
.choice-group .row { min-height: 46px; }
.control-row { display: flex; align-items: center; gap: 14px; }
.control-row + .control-row { margin-top: 12px; }
.control-label { font-size: 16px; font-weight: 600; width: 46px; flex: none; }
.control-row .segmented { flex: 1; }
.hold-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hold-text { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hold-text > .icon { width: 26px; height: 26px; color: var(--orange-text); }
.hold-title { font-size: 16px; font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.stat dt { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--label-2); }
.stat dd { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 1px; }
.mini-table th, .mini-table td { padding: 10px 0; font-size: 16px; text-align: left; font-weight: 400; border-top: 0.5px solid var(--separator); }
.mini-table thead th { border-top: 0; padding-top: 0; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--label-2); }
.mini-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mini-table tbody th .pill { margin-left: 8px; vertical-align: 1px; }
/* Connection & Wi-Fi card: a foldable history and the on-site steps */
.fold { margin-top: 4px; border-top: 0.5px solid var(--separator); }
.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 0; font-size: 16px; color: var(--blue-text); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.fold-chevron { display: inline-flex; color: var(--label-3); transition: transform 0.2s ease; }
.fold-chevron .icon { width: 18px; height: 18px; }
.fold[open] .fold-chevron { transform: rotate(180deg); }
.fold .mini-table { width: 100%; border-collapse: collapse; }
.fold .mini-table tr:first-child th, .fold .mini-table tr:first-child td { border-top: 0; padding-top: 2px; }
.row-count { color: var(--label-2); font-size: 17px; }
.fold > .hint { margin: 8px 0 4px; font-size: 13.5px; }
.steps-box { margin-top: 12px; padding: 14px; border-radius: var(--radius-sm); background: var(--card-2); }
.steps-box.is-urgent { background: var(--orange-soft); }
.steps-title { font-size: 15px; font-weight: 600; }
.steps { margin: 8px 0 0; padding-left: 22px; list-style: decimal; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.4; }
.steps li::marker { font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.steps-box .hint { margin-top: 10px; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .fold-chevron { transition: none; } }
.chart-note { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 0; }

@media (min-width: 720px) {
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .detail-grid { grid-template-columns: 372px minmax(0, 1fr); gap: 18px; align-items: start; }
  .detail, .detail-col, .detail-controls, .detail-info { gap: 18px; }
  .hero { padding: 22px 26px; gap: 26px; flex-wrap: nowrap; }
  .hero-facts { flex: 0 1 auto; flex-direction: column; align-items: flex-end; margin-left: auto; }
  .hero-value { font-size: 88px; }
  .card { padding: 18px 20px; }
}

/* ---------- 11. Charts ---------- */

.chart { min-width: 0; }
.chart.is-loading .chart-plot { opacity: 0.45; transition: opacity 0.15s; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 6px; margin: -2px 0 10px -6px; }
.legend-item {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 2px 8px; border: 0; border-radius: 8px; background: none;
  font-size: 13.5px; font-weight: 500; color: var(--label-2); white-space: nowrap; max-width: 100%; min-width: 0;
}
.legend-item > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 519px) { .chart-history .chart-legend { margin-bottom: 4px; } }   /* compact chart on a phone; the legend buttons keep their 44 px touch height */   /* a long store name must not widen the page */
@media (hover: hover) { button.legend-item:hover { background: var(--fill); } }
button.legend-item::before { content: ""; position: absolute; inset: -4px 0; }
.legend-static { min-height: 24px; }
.legend-item.is-off { opacity: 0.45; text-decoration: line-through; }
.legend-key { flex: none; display: inline-block; }
.legend-line { width: 16px; height: 3px; border-radius: 2px; background: currentColor; }
.legend-box { width: 11px; height: 11px; border-radius: 3px; background: currentColor; }
.key-indoor { color: var(--line-indoor); fill: var(--line-indoor); }
.key-cool { color: var(--line-cool); fill: var(--line-cool); }
.key-heat { color: var(--line-heat); fill: var(--line-heat); }
.key-outdoor { color: var(--line-outdoor); fill: var(--line-outdoor); }

.chart-plot { position: relative; touch-action: pan-y; border-radius: 10px; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart-grid .grid-major, .chart-grid .grid-base { stroke: var(--grid-strong); }
.axis-label { font: 500 11.5px var(--font); fill: var(--label-3); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.axis-strong { fill: var(--label-2); font-weight: 600; }
.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line-indoor { stroke: var(--line-indoor); stroke-width: 2.25; }
.line-cool { stroke: var(--line-cool); stroke-width: 1.75; stroke-dasharray: 5 4; stroke-linecap: butt; }
.line-heat { stroke: var(--line-heat); stroke-width: 1.75; stroke-dasharray: 5 4; stroke-linecap: butt; }
.line-outdoor { stroke: var(--line-outdoor); stroke-width: 1.5; opacity: 0.8; }
.dot { stroke: var(--card); stroke-width: 2; }
.dot-indoor { fill: var(--line-indoor); }
.band-track { fill: var(--fill); }
.band-cooling { fill: var(--line-cool); opacity: 0.5; }
.band-heating { fill: var(--line-heat); opacity: 0.5; }
.band-stage2 { opacity: 1; }
.cursor-line { stroke: var(--label-3); stroke-width: 1; }
.cursor-band { fill: var(--fill); }
.bar { shape-rendering: geometricPrecision; }
.series-1 { fill: var(--series-1); color: var(--series-1); background: var(--series-1); }
.series-2 { fill: var(--series-2); color: var(--series-2); background: var(--series-2); }
.series-3 { fill: var(--series-3); color: var(--series-3); background: var(--series-3); }
.series-4 { fill: var(--series-4); color: var(--series-4); background: var(--series-4); }
.series-5 { fill: var(--series-5); color: var(--series-5); background: var(--series-5); }
.series-6 { fill: var(--series-6); color: var(--series-6); background: var(--series-6); }
.series-7 { fill: var(--series-7); color: var(--series-7); background: var(--series-7); }
.series-8 { fill: var(--series-8); color: var(--series-8); background: var(--series-8); }

.chart-tip {
  position: absolute; top: -6px; left: 0; transform: translateX(-50%); z-index: 3; pointer-events: none; min-width: 132px;
  padding: 9px 12px; border-radius: 12px; background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16), 0 0 0 0.5px var(--separator); font-size: 13px; white-space: nowrap;
}
.tip-title { font-weight: 600; color: var(--label-2); margin-bottom: 4px; }
.tip-row { display: flex; align-items: center; gap: 7px; line-height: 1.5; }
.tip-key { width: 12px; height: 3px; border-radius: 2px; background: currentColor; flex: none; }
.tip-key-none { background: none; }
.tip-key[class*="series-"] { height: 9px; width: 9px; border-radius: 2.5px; }
.tip-value { font-weight: 600; color: var(--label); font-variant-numeric: tabular-nums; min-width: 40px; }
.tip-label { color: var(--label-2); }
.tip-total { margin-top: 3px; padding-top: 3px; border-top: 0.5px solid var(--separator); }

/* ---------- 12. Usage ---------- */

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 14px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-card); }
.filter { min-width: 0; flex: 1 1 100%; }
.filter-label { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--label-2); margin: 0 0 6px 2px; }
.filter-export .btn { width: 100%; }
.filter-custom { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; flex: 1 1 100%; }
.date-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--label-2); flex: 1 1 140px; }
.filter-custom .field-error { flex-basis: 100%; }
.usage-results { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: var(--radius); overflow: hidden; background: var(--separator); box-shadow: var(--shadow-card); }
.total { background: var(--card); padding: 12px 16px; min-width: 0; }
.total-label { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--label-2); }
.total-value { font-size: 20px; font-weight: 600; margin-top: 2px; white-space: nowrap; }
.total:first-child .total-value { font: 700 22px var(--font-rounded); }

/* Sideways scrolling stays inside the card. On a phone the table is as tall as it needs to be (the page scrolls);
   only on desktop is a long table given its own scroll area, with the Total row pinned. */
.table-wrap { overflow-x: auto; margin: 0 -16px -6px; padding: 0 0 6px; -webkit-overflow-scrolling: touch; }
.data-table { font-size: 15px; white-space: nowrap; }
.data-table th, .data-table td { padding: 11px 12px; text-align: left; font-weight: 400; border-bottom: 0.5px solid var(--separator); }
.data-table .num { text-align: right; }
.data-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--card); padding-top: 6px; padding-bottom: 8px;
  font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--label-2);
}
.data-table .col-name { position: sticky; left: 0; z-index: 1; background: var(--card); padding-left: 16px; max-width: min(50vw, 420px); }
.data-table thead .col-name { z-index: 3; }
.data-table td:last-child, .data-table th:last-child { padding-right: 16px; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tfoot th, .data-table tfoot td { font-weight: 700; border-top: 1px solid var(--grid-strong); border-bottom: 0; }
.th-sort { position: relative; display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 6px 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.th-sort::before { content: ""; position: absolute; inset: -8px -6px; }
.num .th-sort { flex-direction: row-reverse; }
.th-sort.is-active { color: var(--label); }
.sort-arrow { width: 13px; height: 13px; display: inline-block; }
.sort-arrow .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.sort-arrow.is-up .icon { transform: rotate(180deg); }
.name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.name-cell > span:last-child { min-width: 0; }
.name-main { display: block; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.name-sub { display: block; font-size: 13px; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 720px) {
  .totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .filters { padding: 16px 18px; }
  .filter { flex: 1 1 250px; }
  .filter:nth-child(1) { flex-basis: 300px; }
  .filter:nth-child(2) { flex-basis: 290px; }
  .filter-export { flex: 0 0 auto; }
  .date-field { flex: 0 0 180px; }
  .table-wrap { margin: 0 -20px -6px; }
  .data-table .col-name { padding-left: 20px; }
  .data-table td:last-child, .data-table th:last-child { padding-right: 20px; }
}

@media (min-width: 1024px) {
  .table-wrap { overflow: auto; max-height: 70vh; }
  .data-table tfoot th, .data-table tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--card); box-shadow: 0 -1px 0 var(--grid-strong); }
  .data-table tfoot .col-name { z-index: 3; }
}

/* Ameren actual vs estimate: stacked blocks on a phone, the table from 600 px. */
.actual-list { margin: 0 -4px; }
.actual-table { display: none; }
.actual-item { padding: 12px 4px; border-top: 0.5px solid var(--separator); }
.actual-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.actual-day { font-weight: 600; }
.actual-store { color: var(--label-2); font-size: 14px; }
.actual-share { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--label-2); white-space: nowrap; }
.actual-lines { margin-top: 6px; display: grid; gap: 3px; }
.actual-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; gap: 10px; align-items: baseline; font-size: 15px; }
.actual-line dt { color: var(--label-2); font-size: 14px; min-width: 0; }
.actual-line dd { text-align: right; white-space: nowrap; }
@media (min-width: 600px) {
  .actual-list { display: none; }
  .actual-table { display: block; }
}
.date-field input[aria-invalid="true"] { border-color: var(--red); }

@media (min-width: 1280px) {
  .totals { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- 13. Alerts and Activity ---------- */

.alert-list, .activity-list { display: flex; flex-direction: column; gap: 20px; }
.list-header { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0 4px 8px; }
.list-count { font-size: 13px; font-weight: 600; color: var(--label-2); background: var(--fill); border-radius: 10px; padding: 1px 8px; letter-spacing: 0; }
.list-header.tone-red { color: var(--red-text); }
.list-header.tone-orange { color: var(--orange-text); }
.alert-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.alert-item + .alert-item::before, .activity-item + .activity-item::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 0.5px; background: var(--separator); }
.alert-icon, .activity-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.alert-icon .icon, .activity-icon .icon { width: 20px; height: 20px; stroke-width: 2; }
.alert-icon.tone-red { background: var(--red); color: #fff; }
.alert-icon.tone-orange, .activity-icon.tone-orange { background: var(--orange-soft); color: var(--orange-text); }
.alert-icon.tone-blue, .activity-icon.tone-blue { background: var(--blue-soft); color: var(--blue-text); }
.activity-icon.tone-green { background: var(--green-soft); color: var(--green-text); }
.activity-icon.tone-gray { background: var(--fill); color: var(--label-2); }
.alert-link { flex: 1; min-width: 0; color: inherit; }
.alert-link:hover { text-decoration: none; }
.alert-main { flex: 1; min-width: 0; }
.alert-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; font-weight: 600; line-height: 1.3; }
.alert-message { font-size: 15px; line-height: 1.4; color: var(--label); margin-top: 3px; }
.alert-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 6px; font-size: 13.5px; color: var(--label-2); }
.alert-where { font-weight: 600; }
.alert-action { flex: none; align-self: center; }
.alert-item.is-quiet .alert-icon { background: var(--fill); color: var(--label-2); }
.alert-item.is-quiet .alert-title > span:first-child { color: var(--label-2); }
@media (max-width: 560px) {
  .alert-item { flex-wrap: wrap; }
  .alert-action { flex-basis: 100%; padding-left: 46px; }
}

.activity-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; }
.activity-main { flex: 1; min-width: 0; }
.activity-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.activity-name { font-size: 17px; font-weight: 600; }
.activity-time { font-size: 14px; color: var(--label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.diffs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; }
.diff { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.diff-label { color: var(--label-2); font-size: 14.5px; margin-right: 1px; }
.diff-from { color: var(--label-2); text-decoration: line-through; text-decoration-color: var(--label-3); }
.diff .icon { width: 15px; height: 15px; color: var(--label-3); }
.diff-to { font-weight: 700; }
.activity-summary { font-size: 14.5px; line-height: 1.4; color: var(--label-2); margin-top: 4px; }
.activity-tags { margin-top: 7px; }

/* ---------- 14. Settings ---------- */

.settings-menu-list { display: flex; flex-direction: column; gap: 22px; }
.settings-menu-list .group + .group { margin-top: 0; }
.settings[data-section=""] .settings-pane { display: none; }
.settings:not([data-section=""]) .settings-menu { display: none; }
.settings-pane .view-content { gap: 20px; }
.account { padding: 14px 16px; }
.account + .account { margin-top: -6px; }
.account-head { display: flex; align-items: flex-start; gap: 12px; }
.account-top { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; }
.account-head .row-icon { margin-top: 2px; }
.account-main { flex: 1; min-width: 0; }
.account-name { font-size: 17px; font-weight: 600; }
.account-message { margin-top: 10px; font-size: 14.5px; font-weight: 500; }
.account-message.tone-red { color: var(--red-text); }
.account-message.tone-orange { color: var(--orange-text); }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.account-actions .btn-danger { margin-left: auto; }
.howto { margin: 0 0 12px; padding: 0 16px 0 36px; color: var(--label-2); font-size: 14.5px; line-height: 1.5; }
.test-result { font-size: 14.5px; font-weight: 500; flex: 1 1 200px; }
.test-result.is-ok { color: var(--green-text); }
.test-result.is-bad { color: var(--red-text); }
.file-pick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-name { font-size: 14.5px; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.file-pick:focus-within .btn { outline: 3px solid var(--blue); outline-offset: 2px; }

@media (min-width: 1024px) {
  .settings { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
  .settings[data-section=""] .settings-pane, .settings:not([data-section=""]) .settings-menu { display: block; }
  .settings-menu { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 0.5px solid var(--separator); padding-bottom: 32px; }
  .settings-menu .view-body { padding: 0 16px; }
  .settings-menu .navbar-inner { padding: 0 24px; }
  .settings-menu .navbar { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
  .settings-menu-list { gap: 18px; }
  .settings-menu .row { min-height: 44px; }
  .settings-menu .row-label { font-size: 15px; font-weight: 500; }
  .settings-menu .group-body { background: none; border-radius: 0; overflow: visible; }
  .settings-menu .row { border-radius: 10px; padding: 6px 10px; }
  .settings-menu .row::before { display: none; }
  .settings-menu .row-chevron { display: none; }
  .settings-menu .pill { font-size: 12px; }
  .settings-pane .navbar-back { display: none; }
  .settings-pane .view-body { max-width: 760px; margin: 0; }
  .settings-pane .navbar-inner { max-width: 760px; margin: 0; }
}

/* ---------- 15. Sign-in screens ---------- */

.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: calc(var(--safe-top) + 24px) 20px calc(var(--safe-bottom) + 24px); }
.auth-card { width: min(400px, 100%); display: flex; flex-direction: column; }
.auth-logo { border-radius: 16px; margin: 0 auto 18px; box-shadow: 0 8px 24px rgba(10, 98, 230, 0.28); }
.auth-title { font-size: 30px; font-weight: 700; letter-spacing: -0.022em; text-align: center; }
.auth-lead { color: var(--label-2); text-align: center; font-size: 16px; line-height: 1.4; margin: 6px 0 24px; }
.auth-foot { color: var(--label-2); font-size: 13px; text-align: center; }
.auth .btn { margin-top: 4px; min-height: 50px; }

/* ---------- 16. Utilities, motion, print ---------- */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.84); opacity: 0.6; } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .boot-spinner, .btn.is-busy::after, .icon-btn.is-busy::after { animation: spin 1.2s linear infinite !important; }
}

@media (forced-colors: active) {
  .segmented-option.is-active { outline: 2px solid CanvasText; }
  .switch-track { border: 1px solid CanvasText; }
  .bar, .band { forced-color-adjust: none; }
}

@media print {
  .sidebar, .tabbar, .navbar-actions, .save-bar, .toast-host { display: none !important; }
  .content { margin: 0; padding: 0; }
  body { background: #fff; }
}