:root {
  --bg: #f4f6fa;
  --card: #ffffff;
  --line: #e9edf5;
  --line-soft: #eef1f6;
  --text: #222533;
  --muted: #7d8597;
  --clock: #44506a;
  --tile-bg: #fafbfd;
  --tile-hover: #eef3ff;
  --tile-text: #2b3140;
  --accent: #2f5bea;
  --bar-h: 52px;
}
html.theme-dark {
  --bg: #12151c;
  --card: #1a1e27;
  --line: #2a3040;
  --line-soft: #242a38;
  --text: #e8ebf2;
  --muted: #8d95a8;
  --clock: #c5cbd8;
  --tile-bg: #202531;
  --tile-hover: #28304a;
  --tile-text: #e3e7f0;
  --accent: #7c9cff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
/* Specificity must beat `.brand img` below, otherwise both logos render side by side */
.brand img.logo-dark { display: none; }
html.theme-dark .brand img.logo-light { display: none; }
html.theme-dark .brand img.logo-dark { display: block; }

/* Two side boxes of --side width (logo left, clock right); the home card spans exactly between their dividers */
:root { --side: 232px; }
.topbar {
  height: var(--bar-h);
  flex: 0 0 var(--bar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.side-right {
  flex: 0 0 var(--side); width: var(--side); height: 100%;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  padding: 0 8px 0 12px;
  border-left: 1px solid var(--line);
}
.brand {
  flex: 0 0 var(--side); width: var(--side); height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line);
}
.brand img { display: block; height: 26px; width: auto; }
/* Inside an app: icon + name instead of the logo; long names end in an ellipsis */
.brand-app { gap: 10px; padding: 0 14px; color: inherit; text-decoration: none; min-width: 0; }
.brand-app i { color: var(--accent); font-size: 1.15rem; flex: 0 0 auto; }
.brand-name { font-weight: 600; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.switch { position: relative; margin-left: -4px; flex: 0 0 auto; }
.switch-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 9px;
  border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; max-width: 100%;
}
.switch-trigger > span { display: none; }
.switch-trigger > i { flex-shrink: 0; }
.switch-trigger:hover, .switch-trigger[aria-expanded="true"] { background: var(--tile-hover); }
.switch-trigger .switch-icon { display: inline-block; font-size: 1.05rem; color: var(--accent); }
.switch-trigger .fa-chevron-down { font-size: 0.7rem; color: var(--muted); }
.switch-trigger kbd {
  font: 600 0.68rem/1 system-ui, sans-serif; color: var(--muted);
  padding: 3px 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--tile-bg);
}
.switch-pop {
  position: absolute; top: calc(100% + 8px); left: 6px; z-index: 50;
  width: 320px; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); overflow: hidden;
}
.switch-search {
  margin: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--tile-bg); color: var(--text); font: inherit; outline: none;
}
.switch-search:focus { border-color: var(--accent); }
.switch-list { overflow-y: auto; padding: 0 6px 6px; }
.switch-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; color: var(--tile-text);
}
.switch-item i { width: 20px; text-align: center; color: var(--accent); }
.switch-item span { flex: 1 1 auto; }
.switch-item .switch-ext { width: auto; color: var(--muted); font-size: 0.7rem; }
.switch-item small { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.switch-item.is-active, .switch-item:hover { background: var(--tile-hover); }
.switch-item[hidden], .switch-pop[hidden] { display: none; }
.switch-empty { padding: 12px; color: var(--muted); text-align: center; }
/* Right side: clock then a fixed 36px slot, empty on home, X on framed pages */
.close-slot { flex: 0 0 36px; width: 36px; height: 36px; margin-left: 4px; }
/* Weather: icon, big temperature, wind arrow + m/s, description; popover with the next hours */
.wx { position: relative; }
.wx[hidden] { display: none; }
.weather {
  display: flex; align-items: baseline; gap: 10px;
  padding: 4px 10px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; color: var(--text); line-height: 1; cursor: pointer;
}
.weather:hover, .weather[aria-expanded="true"] { background: var(--tile-hover); }
.weather-icon { font-size: 1.35rem; color: var(--accent); align-self: center; }
.weather-temp { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.weather-wind { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 600; color: var(--clock); font-variant-numeric: tabular-nums; white-space: nowrap; }
.weather-wind i { font-size: 0.8rem; transition: transform 0.4s ease; }
.weather-wind i[hidden] { display: none; }
.weather-desc { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
/* Placeholder widths close to a typical reading, so the bar barely moves when data lands */
.wx.is-loading .weather, .ev.is-loading .ev-btn { pointer-events: none; }
.wx.is-loading .weather-icon, .ev.is-loading .ev-btn i { color: var(--line); }
.wx.is-loading .weather-wind i { display: none; }
.is-loading .sk { border-radius: 5px; }
.wx.is-loading .weather-temp { width: 1.6em; }
.wx.is-loading [data-weather-wind] { width: 3.8em; }
.wx.is-loading .weather-desc { width: 13em; }
.ev.is-loading .ev-who { width: 4.5em; }
.wx-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  width: 360px; padding: 10px 12px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.wx-pop[hidden] { display: none; }
.wx-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 6px; }
.wx-head span { color: var(--muted); font-size: 0.8rem; }
.wx-now { display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px; }
.wx-now i { font-size: 1.9rem; color: var(--accent); }
.wx-now-temp { font-size: 1.9rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.wx-now-desc { color: var(--muted); }
.wx-details {
  margin: 0; padding: 8px 4px; border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 0.82rem;
}
.wx-details div { display: flex; justify-content: space-between; gap: 8px; }
.wx-details dt { color: var(--muted); }
.wx-details dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Hour strip, scrolls sideways: time, icon, temperature, wind */
.wx-hours { display: flex; gap: 4px; overflow-x: auto; padding: 10px 2px 4px; border-top: 1px solid var(--line-soft); scrollbar-width: thin; }
.wx-hour {
  flex: 0 0 52px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 2px; border-radius: 8px; background: var(--tile-bg); font-size: 0.78rem;
}
.wx-hour-t { color: var(--muted); }
.wx-hour i.wx-hour-i { font-size: 1.05rem; color: var(--accent); }
.wx-hour-temp { font-weight: 700; font-size: 0.9rem; }
.wx-hour-wind { display: flex; align-items: center; gap: 3px; color: var(--clock); font-variant-numeric: tabular-nums; }
.wx-hour-wind i { font-size: 0.65rem; }
.wx-link { display: block; margin-top: 8px; padding: 6px 4px 0; border-top: 1px solid var(--line); color: var(--accent); font-size: 0.85rem; font-weight: 600; }
.wx-link i { font-size: 0.7rem; margin-left: 4px; }
/* Coffee and birthday pills left of the weather: icon, who is next, when; popover lists everyone */
.events { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.ev { position: relative; }
.ev-btn {
  display: flex; align-items: baseline; gap: 7px;
  padding: 6px 10px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; color: var(--text); line-height: 1; cursor: pointer; white-space: nowrap;
}
.ev-btn:hover, .ev-btn[aria-expanded="true"] { background: var(--tile-hover); }
.ev-btn i { font-size: 1.05rem; color: var(--accent); position: relative; top: -0.125em; }
.ev-who { font-weight: 700; }
.ev-when { color: var(--muted); font-size: 0.85rem; }
.ev-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  width: 280px; padding: 10px 6px 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.ev-pop[hidden] { display: none; }
.ev-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 10px 8px; }
.ev-head span { color: var(--muted); font-size: 0.8rem; }
.ev-scroll { position: relative; }
.ev-list { max-height: 60vh; overflow-y: auto; scrollbar-width: none; border-top: 1px solid var(--line-soft); padding-top: 4px; }
.ev-list::-webkit-scrollbar { display: none; }
.ev-fade { pointer-events: none; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, transparent, var(--card)); transition: opacity 0.15s; }
.ev-fade.is-hidden { opacity: 0; }
.ev-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; margin: 0 -6px; border-top: 1px solid var(--line-soft); border-radius: 0 0 12px 12px;
  background: var(--tile-hover); color: var(--muted); font-size: 0.75rem;
}
.ev-more[hidden] { display: none; }
.ev-more i { font-size: 0.7rem; }
.ev-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; border-radius: 8px; font-size: 0.9rem; }
.ev-row .ev-date { flex: 0 0 88px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ev-row .ev-name { font-weight: 600; }
.ev-row .ev-age { margin-left: auto; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.ev-row.is-past { opacity: 0.45; }
.ev-row.is-next { background: var(--tile-hover); }
.ev-row.is-next .ev-date { color: var(--accent); font-weight: 600; }
.ev-note { padding: 8px 10px 4px; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ev-absence[hidden], .absence-off .ev-absence { display: none; }
.ev-absence .ev-when { display: none; }
.ev-absence .ev-pop { width: min(320px, calc(100vw - 32px)); }
.ev-absence .ev-head { gap: 12px; }
.ev-absence .ev-head > span { margin-left: auto; white-space: nowrap; }
.ev-absence .ev-row { justify-content: space-between; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 0; }
.ev-absence .ev-row + .ev-row { border-top: 1px solid var(--line-soft); }
.absence-person { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.absence-period { display: flex; flex-direction: column; align-items: stretch; gap: 7px; flex-shrink: 0; }
.absence-time { color: var(--accent); font-size: 0.8rem; font-weight: 700; }
.absence-day { display: flex; gap: 3px; }
.absence-day span { height: 5px; flex: 1; border-radius: 2px; background: var(--line); }
.absence-day .is-away { background: var(--accent); }
.ev-detail { color: var(--muted); font-size: 0.8rem; }
.ev-empty { display: block; padding: 10px; color: var(--muted); font-size: 0.85rem; }
.ev-link { display: block; padding: 10px; border-top: 1px solid var(--line-soft); color: var(--accent); font-size: 0.85rem; font-weight: 600; }
.ev-link i { margin-left: 4px; font-size: 0.7rem; }

/* Weather hugs the clock box; the box itself is pushed to the right edge when there is no weather yet */
.side-right { margin-left: auto; }
.wx { margin-left: auto; margin-right: -6px; }
.events + .wx { margin-left: 0; }
.wx + .side-right { margin-left: 0; }
.wx[hidden] + .side-right { margin-left: auto; }
.clock { text-align: right; color: var(--clock); line-height: 1.1; white-space: nowrap; }
.clock-date { display: block; font-size: 0.76rem; font-weight: 600; }
.clock-time { display: block; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.close {
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--muted);
  font-size: 1.1rem;
}
.close:hover { background: var(--tile-hover); color: var(--text); }

/* Framed app fills the rest of the viewport */
body.is-frame { height: 100dvh; overflow: hidden; }
.app-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--card); }

/* Home */
.home { flex: 1 1 auto; width: 100%; margin: 0; padding: 22px var(--side); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.group { padding: 12px 14px 14px; border-bottom: 1px solid var(--line-soft); }
.group:last-child { border-bottom: 0; }
.group-label {
  margin: 0; padding: 0 2px 8px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
/* Several small groups on one row, each with its own label. The row uses the same tracks as .tiles
   and each group spans one track per link, so every tile is the width of a Kerfi tile. */
.group-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 12px 14px 14px; border-bottom: 1px solid var(--line-soft); }
.group-row .group { grid-column: span var(--span, 1); min-width: 0; padding: 0; border-bottom: 0; }
.group-row .tiles { grid-template-columns: repeat(var(--span, 1), 1fr); }
@media (max-width: 1000px) { .group-row .group { grid-column: 1 / -1; } .group-row .tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
.tile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--tile-bg);
  color: var(--tile-text);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tile:hover { background: var(--tile-hover); border-color: var(--accent); }
.tile-icon { width: 28px; text-align: center; color: var(--accent); }
.tile-label { flex: 1 1 auto; font-weight: 500; }
.tile-meta { color: var(--muted); font-size: 0.8rem; }
/* Dagatal tile menu: chevron inside the tile's right edge, popover under it */
.tile-wrap { position: relative; }
.tile-wrap .tile { height: 100%; }
.tile-wrap.has-menu .tile { padding-right: 44px; }
.tile-more {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); font-size: 0.8rem; cursor: pointer;
}
.tile-more:hover, .tile-more[aria-expanded="true"] { background: var(--tile-hover); color: var(--accent); }
.tile-more[hidden] { display: none; }
.tile-wrap .ev-pop { top: calc(100% + 6px); left: 0; right: auto; min-width: 100%; }
/* No "N fleiri" footer when the list fits, so the last row needs its own gap */
.tile-wrap .ev-pop:has(> .ev-more[hidden]) { padding-bottom: 6px; }
/* The card clips its corners; the tile menu has to drop past it */
.card:has([data-calendars]) { overflow: visible; }
.cal-row { align-items: center; color: var(--text); }
.cal-row i { width: 18px; text-align: center; color: var(--accent); }
.cal-row:hover { background: var(--tile-hover); }

/* Narrower windows: 1400 and 1250 trim text, 1000 is the compact layout, 760 icon-only pills, 640 tightens the side boxes */
.weather, .ev-btn, .clock { flex-shrink: 0; }
@media (max-width: 1400px) {
  .weather-desc { display: none; }
}
@media (max-width: 1250px) { .ev-when { display: none; } }
@media (max-width: 1000px) {
  :root { --side: 130px; }
  .topbar { gap: 8px; }
  .clock-date { display: none; }
  .weather-wind { display: none; }
  .weather { gap: 6px; padding: 4px 6px; }
  .ev-btn { padding: 6px 8px; }
  .events { gap: 0; }
  .home { padding-left: 18px; padding-right: 18px; }
  .brand img { height: 22px; }
  /* Pills sit mid-bar, so the popover is centred under the bar instead of hugging the pill */
  .ev-pop { position: fixed; top: calc(var(--bar-h) + 6px); left: 50%; right: auto; transform: translateX(-50%); width: min(280px, calc(100vw - 32px)); }
  .switch-pop { width: min(320px, calc(100vw - 32px)); }
  .wx-pop { width: min(360px, calc(100vw - 32px)); }
}
@media (max-width: 760px) {
  .ev-who { display: none; }
  .ev-btn { padding: 6px 7px; }
  /* Centre the switcher popover under the bar on narrow screens */
  .switch-pop { position: fixed; top: calc(var(--bar-h) + 6px); left: 50%; transform: translateX(-50%); width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - var(--bar-h) - 24px); }
}
@media (max-width: 640px) {
  :root { --side: 96px; }
  .brand-name { display: none; }
  .side-right { padding: 0 4px 0 6px; }
  .close-slot { flex-basis: 28px; width: 28px; margin-left: 0; }
  .brand img { height: 20px; }
  .weather-temp, .weather-icon { font-size: 1.15rem; }
}

/* Home footer: theme switch and logout */
.home-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.theme-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.theme-switch button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; color: var(--muted);
  padding: 6px 12px; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.theme-switch button + button { border-left: 1px solid var(--line); }
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] { background: var(--tile-hover); color: var(--accent); font-weight: 600; }
.logout {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--muted); font-size: 0.85rem; text-decoration: none;
}
.logout:hover { color: #d33a3a; border-color: #d33a3a; }

/* Login card shown when innri has no session */
.login-card { padding: 18px 20px; margin-bottom: 16px; }
.login-card p { margin: 6px 0 14px; color: var(--muted); }
.button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 8px;
  background: var(--accent); color: #fff; font-weight: 600;
}
.button:hover { filter: brightness(1.08); }

/* Tool dialog: modal iframe for `dialog` links. No padding, so a click on the dialog itself is the backdrop. */
.tool-dialog {
  width: min(1100px, calc(100vw - 32px)); height: min(820px, calc(100dvh - 32px));
  max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3); overflow: hidden;
}
.tool-dialog::backdrop { background: rgba(10, 14, 24, 0.55); }
.tool-dialog-box { display: flex; flex-direction: column; height: 100%; }
.tool-dialog-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.tool-dialog-head > i { color: var(--accent); }
.tool-dialog-head h2 { flex: 1 1 auto; margin: 0; font-size: 1rem; font-weight: 600; }
.tool-dialog-head .close, .tool-dialog-ext { width: 34px; height: 34px; border: 0; background: none; cursor: pointer; }
.tool-dialog-ext { display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--muted); font-size: 0.9rem; }
.tool-dialog-ext:hover { background: var(--tile-hover); color: var(--text); }
.tool-dialog-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }

/* EV chargers (Easee), same tiles as innri's home, shell colour tokens */
.chargers { margin-top: 16px; container-type: inline-size; }
.chargers[hidden] { display: none; }
/* One of the two charger cards shows, per html[data-charger-view] (saved as rf-chargers) */
html[data-charger-view="tiles"] .charger-scene, html:not([data-charger-view="tiles"]) .chargers { display: none; }
/* Switch fits inside the label's height (text plus its 8px bottom padding), pulled up so it clears what follows */
.group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.view-switch { display: inline-flex; margin-top: -4px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.view-switch button { border: 0; background: var(--tile-bg); color: var(--muted); padding: 1px 8px; font-size: 0.72rem; line-height: 1.4; cursor: pointer; }
.view-switch button + button { border-left: 1px solid var(--line); }
.view-switch button:hover { color: var(--text); }
html[data-charger-view="tiles"] [data-charger-view="tiles"], html[data-charger-view="low"] [data-charger-view="low"],
html[data-charger-view="scene"] [data-charger-view="scene"] { background: var(--accent); color: #fff; }
/* "low" crops the same SVG to the orange floor and the parking: top 186 of 440 viewBox units cut off */
.hq-wrap { overflow: hidden; border-radius: 10px; }
html[data-charger-view="low"] .hq-wrap { aspect-ratio: 1000 / 254; }
html[data-charger-view="low"] .hq { margin-top: -18.6%; }
.charger-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@container (max-width: 560px) { .charger-grid { grid-template-columns: 1fr; } }
.charger-tile {
  background: var(--tile-bg); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.charger-head { display: flex; align-items: center; gap: 8px; }
.charger-head i { color: var(--accent); }
.charger-head strong { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.charger-status, .charger-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 9999px; padding: 0.2rem 0.65rem; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  background: var(--card); color: var(--muted); border: 1px solid var(--line-soft);
}
.charger-status.is-charging { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.charger-status.is-done { background: #bbf7d0; color: #166534; border-color: #bbf7d0; }
.charger-status.is-error { background: #cc0f35; color: #fff; border-color: #cc0f35; }
.charger-status.is-free { background: #d9f5e3; color: #157347; border-color: #d9f5e3; }
.charger-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.charger-pill.is-blue { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.charger-pill.is-locked { background: #fde8e8; color: #c81e1e; border-color: #fbd5d5; }
.charger-pill.is-unlocked { background: #d9f5e3; color: #157347; border-color: #c3ecd2; }
.charger-pill i { font-size: 0.7rem; opacity: 0.8; color: inherit; }

/* Skeleton tiles and scene rows until the first /easee/status, topbar weather and absence until their first fetch */
.charger-skeleton .sk, .scene-skeleton .sk, .is-loading .sk {
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 50%, var(--line-soft) 75%);
  background-size: 200% 100%; animation: charger-shimmer 1.4s ease-in-out infinite;
  border-color: transparent; color: transparent;
}
.charger-skeleton .charger-head i, .scene-skeleton .scene-head > i { color: var(--line); }
.charger-skeleton strong.sk { max-width: 90px; border-radius: 5px; }
.scene-skeleton strong.sk { max-width: 70px; border-radius: 5px; }
.charger-skeleton .charger-pill.sk, .scene-skeleton .charger-pill.sk { width: 72px; }
.charger-skeleton .sk-wide, .scene-skeleton .sk-wide { width: 84px; }
/* Bays before the first status: post and label drawn, LED grey, no car */
.bay.is-loading .post, .bay.is-loading .bay-label { opacity: 0.6; }
@keyframes charger-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .charger-skeleton .sk, .scene-skeleton .sk, .is-loading .sk { animation: none; } }

/* Charger scene (test): HQ facade with four bays, filled from /easee/status */
.charger-scene { margin-top: 16px; }
.charger-scene[hidden] { display: none; }
.scene-updated { margin-left: 8px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.hq { display: block; width: 100%; height: auto; }
.hq-sky { fill: #dfe8f2; }
html.theme-dark .hq-sky { fill: #1c2230; }
.hq-asphalt { fill: #8a8f97; }
html.theme-dark .hq-asphalt { fill: #3a3f49; }
.hq-curb { stroke: #5d6168; stroke-width: 2; }
.hq-upper { fill: #cdb98c; }
.hq-lower { fill: #e2562b; }
.hq-roof { fill: #3a3f45; }
.hq-win { fill: #b9cbd8; stroke: #3a4048; stroke-width: 2; }
.hq-mull { stroke: #3a4048; stroke-width: 1.5; }
.hq-panel { fill: #2e3740; }
.hq-sign { fill: #1f2429; }
.hq-sign-text { fill: #ffffff; font: 700 14px system-ui, sans-serif; letter-spacing: 0.1em; }
/* LED loop over the sign; the text shows until the video has a frame */
.hq-sign-video { width: 100%; height: 100%; border-radius: 2px; overflow: hidden; }
.hq-sign-video video { display: block; width: 100%; height: 100%; object-fit: fill; opacity: 0; transition: opacity 0.4s; }
.hq-sign-g.has-video video { opacity: 1; }
.hq-sign-g.has-video .hq-sign-text { display: none; }
.hq-tower { fill: #2e3740; }
.hq-mullion line { stroke: #8fa5b5; stroke-width: 2; }
.hq-door { fill: #9fb6c6; stroke: #1f2429; stroke-width: 2; }
.hq-num { fill: #ffffff; font: 700 13px system-ui, sans-serif; }
.bay-ground { fill: #6fbf9a; opacity: 0.55; }
.bay-line { stroke: #ffffff; stroke-width: 3; }
.bay-label { fill: #ffffff; font: 600 12px system-ui, sans-serif; }
.post rect { fill: #e9ecf1; stroke: #3a3f45; stroke-width: 1.5; }
.post-led { fill: #9aa3b2; }
.bay.is-free .post-led { fill: #22c55e; }
.bay.is-charging .post-led { fill: #3b82f6; animation: led-pulse 1.2s ease-in-out infinite; }
.bay.is-done .post-led { fill: #16a34a; }
.bay.is-error .post-led { fill: #dc2626; }
.bay.is-empty .post, .bay.is-empty .bay-label { opacity: 0.35; }
.car, .cable, .kw { display: none; }
.bay.has-car .car { display: block; }
.bay.has-car .cable { display: block; }
.bay.is-charging .kw { display: block; }
.car-body { fill: #4b5563; stroke: #1f2429; stroke-width: 1.5; }
.car-glass { fill: #b9d0e0; }
.car-lamp { fill: #ef4444; }
.car-plate { fill: #f4f4f4; }
.car-wheel { fill: #111827; }
.car-port { fill: #9ca3af; }
.bay.is-charging .car-port { fill: #3b82f6; }
.cable { fill: none; stroke: #9aa3b2; stroke-width: 3; stroke-linecap: round; }
.bay.is-locked .cable { stroke: #6b7280; }
.bay.is-charging .cable { stroke: #3b82f6; stroke-dasharray: 6 8; animation: cable-flow 0.9s linear infinite; }
.kw rect { fill: #3b82f6; }
.kw text { fill: #ffffff; font: 700 11px system-ui, sans-serif; }
@keyframes cable-flow { to { stroke-dashoffset: -14; } }
@keyframes led-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .bay.is-charging .cable, .bay.is-charging .post-led { animation: none; } }
/* Detail rows live inside the SVG on the asphalt, sized in viewBox units so they scale with the scene */
.scene-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 100%; }
.scene-row { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 6px 9px; border-radius: 7px; background: var(--card); border: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; }
.scene-head, .scene-pills { display: flex; align-items: center; gap: 5px; }
.scene-head > i { color: var(--accent); font-size: 13px; }
.scene-row strong { flex: 1 1 auto; font-size: 16px; margin-right: 2px; }
.scene-row .charger-status, .scene-row .charger-pill { font-size: 12px; padding: 2px 9px; gap: 4px; }
.scene-row .charger-pill i { font-size: 10px; }