/* ═══════════════════════════════════════════════════════════
   Dashboard cards — shared structure (loaded after style.css on
   the dashboard and in the layout editor's previews).

   Every card fills its block, uses one surface, one title style and
   one way of showing numbers. Numbers scale with the block's width
   through container queries (cqi), so small blocks don't clip and
   large blocks don't look empty.
   ═══════════════════════════════════════════════════════════ */

.dashboard-block { container-type: inline-size; }
.dashboard-block > * { height: 100%; }

:root {
  --card-pad: clamp(10px, 3.2cqi, 18px);
  --card-gap: clamp(6px, 2cqi, 12px);
}

/* ── Surface ──────────────────────────────────────────────── */
.ep-card,
.stats-grid.ep-tiles,
.multi-value-card,
.chart-container,
.daily-breakdown-container,
.bar-single-card,
.bar-stacked-card,
.bar-threshold-card,
.switch-block,
.state-select-block,
.flow-card,
.flow-card-2,
.flow-card-square,
.flow-card-square2 {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  border-radius: var(--radius);
}
.ep-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  overflow: hidden;
}
.ep-card-flush { padding: 0; }
.ep-card-empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-secondary);
  font-size: calc(0.85rem * var(--card-font-scale, 1));
  line-height: 1.45;
}

.ep-card-title, .chart-header h3, .fc-title, .daily-breakdown-header h3 {
  margin: 0;
  font-size: calc(clamp(0.8rem, 2.6cqi, 0.95rem) * var(--card-font-scale, 1)) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.3;
}

/* Labels and values */
.ep-label {
  font-size: calc(clamp(0.7rem, 2.4cqi, 0.85rem) * var(--card-font-scale, 1));
  font-weight: 600;
  color: var(--text-secondary);
  opacity: 1;
  margin: 0;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.ep-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  margin: 0;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  max-width: 100%;
}
.ep-num { overflow: hidden; text-overflow: ellipsis; }
.ep-unit { font-size: 0.55em; font-weight: 600; color: var(--text-secondary); letter-spacing: 0; }
.ep-value.is-empty { color: var(--text-secondary); font-weight: 500; }
/* Text values (modes, states) wrap instead of being cut off. */
.ep-value.is-text { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
.ep-tiles > .ep-tile .ep-value.is-text { font-size: calc(clamp(1rem, 4.6cqi, 1.5rem) * var(--card-font-scale, 1)); }

/* ── Tiles: metric cards, multi-value, savings, grid hours ── */
.ep-tiles {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: var(--card-gap);
  align-content: stretch;
  background: none;
}
.ep-tiles > .ep-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.35em;
  padding: var(--card-pad);
  text-align: left;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ep-tiles > .ep-tile .ep-value { font-size: calc(clamp(1.15rem, 6cqi, 2.1rem) * var(--card-font-scale, 1)); }
/* Inside a card (savings, grid) tiles are flat sub-areas, not cards. */
.ep-card .ep-tiles > .ep-tile { background: var(--bg); border-color: transparent; box-shadow: none; padding: 0.6em 0.75em; }
.ep-card .ep-tiles > .ep-tile .ep-value { font-size: calc(clamp(1rem, 4.6cqi, 1.6rem) * var(--card-font-scale, 1)); }
.ep-card .ep-tiles { flex: 1 1 auto; }
@container (max-width: 260px) {
  .ep-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ── Text metric ──────────────────────────────────────────── */
.text-metric-card {
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  padding: var(--card-pad) !important;
  gap: 0.35em;
}
.text-metric-card .text-metric-value { font-size: calc(clamp(1.1rem, 5.5cqi, 2rem) * var(--card-font-scale, 1)) !important; font-weight: 700; line-height: 1.15; }
.text-metric-card .text-metric-label { font-size: calc(clamp(0.7rem, 2.4cqi, 0.85rem) * var(--card-font-scale, 1)); font-weight: 600; margin: 0; }

/* ── Gauges ───────────────────────────────────────────────── */
.ep-gauge { align-items: center; justify-content: center; text-align: center; padding: var(--card-pad) !important; }
.ep-gauge-wrap { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ep-gauge-svg { width: 100%; height: 100%; max-height: 100%; display: block; overflow: visible; }
.ep-gauge-track { stroke: var(--border); }
.ep-gauge-fill { transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease, stroke 0.3s; }
.ep-gauge-readout {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15em;
  pointer-events: none;
}
.ep-gauge-ring .ep-value { font-size: calc(clamp(1.05rem, 12cqi, 2.4rem) * var(--card-font-scale, 1)); }
.ep-gauge-half { aspect-ratio: 200 / 112; flex: 0 1 auto; max-height: 100%; }
.ep-gauge-half .ep-gauge-readout { justify-content: flex-end; padding-bottom: 2%; }
.ep-gauge-half .ep-value { font-size: calc(clamp(0.95rem, 8cqi, 1.9rem) * var(--card-font-scale, 1)); }
.ep-gauge > .ep-label { flex-shrink: 0; }
.ep-gauge-zero {
  position: absolute; left: 50%; top: 3%; width: 2px; height: 14%;
  transform: translateX(-50%); background: var(--text-secondary); opacity: 0.5; border-radius: 1px;
}

/* ── Bar gauges ───────────────────────────────────────────── */
.bar-gauge-card, .bar-gauge-retro-card { justify-content: center !important; gap: clamp(8px, 3cqi, 16px) !important; padding: var(--card-pad) !important; }
.bar-gauge-row, .bg-retro-row { display: grid !important; grid-template-columns: minmax(3.5em, 28%) minmax(0, 1fr) auto; align-items: center; gap: 0.6em; }
.bar-gauge-label, .bg-retro-label {
  font-size: calc(clamp(0.75rem, 3cqi, 0.95rem) * var(--card-font-scale, 1)) !important; font-weight: 600; color: var(--text-secondary);
  min-width: 0 !important; max-width: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-gauge-track { height: clamp(10px, 3.4cqi, 18px) !important; background: var(--bg) !important; border: 1px solid var(--border); border-radius: 99px !important; }
.bar-gauge-fill { border-radius: 99px !important; }
.bar-gauge-value, .bg-retro-value { font-size: calc(clamp(0.85rem, 3.6cqi, 1.15rem) * var(--card-font-scale, 1)) !important; min-width: 0 !important; }
.bg-retro-segments { gap: 3px !important; }
.bg-retro-seg { height: clamp(12px, 4cqi, 22px) !important; border-radius: 3px !important; background: var(--border); }

/* ── History and threshold bars ───────────────────────────── */
.bar-single-card, .bar-stacked-card, .bar-threshold-card {
  display: flex !important; flex-direction: column !important;
  align-items: stretch !important; justify-content: flex-start !important; text-align: left !important;
  gap: var(--card-gap); padding: var(--card-pad) !important;
}
.bar-single-title, .bar-stacked-title, .bar-threshold-title {
  margin: 0 !important; font-size: calc(clamp(0.8rem, 2.6cqi, 0.95rem) * var(--card-font-scale, 1)) !important; font-weight: 700 !important; color: var(--text) !important; text-align: left;
}
.bar-single-body, .bar-stacked-body { flex: 1 1 auto; min-height: 60px !important; align-self: stretch; gap: clamp(1px, 0.6cqi, 4px) !important; }
.bar-single-bar, .bar-stacked-body > * { border-radius: 3px 3px 0 0; }
.bar-single-status, .bar-stacked-status { font-style: normal !important; font-size: calc(0.82rem * var(--card-font-scale, 1)); }

/* ── Savings ──────────────────────────────────────────────── */
/* Same columns and sizing as the grid card's tiles (below), so a long total
   such as ₦1,894,880 isn't cut off. */
.savings-block-container .ep-tiles { grid-template-columns: repeat(var(--grid-cols, 4), minmax(0, 1fr)) !important; --tile-chars: 7; }

/* ── Grid status ──────────────────────────────────────────── */
.grid-card.ep-card { gap: var(--card-gap); padding: var(--card-pad); }
/* Only the bars give up height when the card is short; the rest keeps its own. */
.grid-card.ep-card > * { flex-shrink: 0; }
.grid-card.ep-card > .ep-grid-days { flex-shrink: 1; }
.ep-grid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.grid-card .grid-date { margin: 0 !important; font-size: calc(0.72rem * var(--card-font-scale, 1)) !important; font-weight: 500 !important; color: var(--text-secondary) !important; }
.ep-grid-now { display: flex; align-items: baseline; gap: 0.6em; flex-wrap: wrap; }
.ep-grid-state { font-size: calc(clamp(1.15rem, 6cqi, 1.8rem) * var(--card-font-scale, 1)); font-weight: 800; color: var(--text-secondary); }
.ep-grid-state[data-state="on"] { color: var(--color-battery); }
.ep-grid-state[data-state="off"] { color: var(--color-grid); }
.ep-grid-since { font-size: calc(0.78rem * var(--card-font-scale, 1)) !important; color: var(--text-secondary); opacity: 1 !important; }
.ep-grid-hours-title { margin-top: 2px; }
.grid-card [id^="grid-timeline"] { overflow: hidden; }
.grid-card .grid-stats { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 72px), 1fr)); flex: 0 0 auto; }
/* One row of tiles where they fit; on narrower cards 2 × 2 (four) or 3 + 2
   (five). The numbers shrink with the column, never below 0.8rem, so a long
   total such as 3210:00 isn't clipped; wide cards keep the usual size. */
.grid-card .grid-stats { grid-template-columns: repeat(var(--grid-cols, 4), minmax(0, 1fr)) !important; }
:is(.grid-card .grid-stats, .savings-block-container .ep-tiles)[data-count="1"] { --grid-cols: 1; }
:is(.grid-card .grid-stats, .savings-block-container .ep-tiles)[data-count="2"] { --grid-cols: 2; }
:is(.grid-card .grid-stats, .savings-block-container .ep-tiles)[data-count="3"] { --grid-cols: 3; }
:is(.grid-card .grid-stats, .savings-block-container .ep-tiles)[data-count="5"] { --grid-cols: 5; }
@container (max-width: 699px) { :is(.grid-card .grid-stats, .savings-block-container .ep-tiles)[data-count="5"] { --grid-cols: 3; } }
@container (max-width: 559px) { .grid-card .grid-stats[data-count="4"] { --grid-cols: 2; } }
/* Savings tiles carry no second line, so four stay in a row longer. */
@container (max-width: 399px) { .savings-block-container .ep-tiles[data-count="4"] { --grid-cols: 2; } }
@container (max-width: 299px) { :is(.grid-card .grid-stats, .savings-block-container .ep-tiles):is([data-count="3"], [data-count="5"]) { --grid-cols: 2; } }
:is(.grid-card .grid-stats, .savings-block-container .ep-tiles) > .ep-tile .ep-value { font-size: calc(clamp(0.8rem, min(4.6cqi, (100cqi - 3rem) / var(--grid-cols, 4) / var(--tile-chars, 5.4)), 1.6rem) * var(--card-font-scale, 1)); }
:is(.grid-card .grid-stats, .savings-block-container .ep-tiles) > .ep-tile { min-width: 0; }
:is(.grid-card .grid-stats, .savings-block-container .ep-tiles) > .ep-tile .ep-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-grid-cost { display: block; margin-top: 2px; font-size: calc(0.74rem * var(--card-font-scale, 1)); font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Grid hours per day: one bar per day, out of 24 h; today is still running. */
.ep-grid-days-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
/* The day range uses the charts' .chart-controls look. */
.ep-grid-range { display: inline-flex; }
.ep-grid-range button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The bars take the card's spare height (64px at least, 240px at most). */
.ep-grid-days { position: relative; display: flex; align-items: flex-end; gap: clamp(1px, 0.8cqi, 4px); flex: 1 1 64px; min-height: 64px; max-height: 240px; margin-right: 30px; border-bottom: 1px solid var(--border); }
.ep-grid-days::before, .ep-grid-days::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border); pointer-events: none; }
.ep-grid-days::before { top: 0; }
.ep-grid-days::after { top: 50%; }
.ep-grid-days-y { position: absolute; left: calc(100% + 4px); transform: translateY(-50%); font-size: calc(0.62rem * var(--card-font-scale, 1)); color: var(--text-secondary); white-space: nowrap; }
.ep-grid-day { flex: 1 1 0; position: relative; z-index: 1; min-width: 2px; border-radius: 3px 3px 0 0; background: var(--success); cursor: pointer; }
.ep-grid-day.today { background: repeating-linear-gradient(45deg, var(--success) 0 4px, color-mix(in srgb, var(--success) 45%, transparent) 4px 8px); }
.ep-grid-day.none, .ep-grid-day.unknown { height: 2px !important; background: var(--border); }
.ep-grid-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ep-grid-days-axis { display: flex; justify-content: space-between; margin-right: 30px; font-size: calc(0.68rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.ep-grid-days-sum { font-size: calc(0.74rem * var(--card-font-scale, 1)); color: var(--text-secondary); min-height: 1.3em; }
.ep-grid-days-sum b { color: var(--text); }

/* ── Text and embeds ──────────────────────────────────────── */
.text-card.ep-card { white-space: pre-wrap; word-break: break-word; font-size: calc(clamp(0.85rem, 2.8cqi, 1rem) * var(--card-font-scale, 1)); line-height: 1.55; color: var(--text); overflow: auto; }
.text-card.ep-card.ep-card-empty { white-space: normal; color: var(--text-secondary); }
.iframe-card iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: inherit; }

/* ── Charts ───────────────────────────────────────────────── */
.chart-container { padding: var(--card-pad) !important; gap: 4px; }
.chart-header { margin-bottom: 4px !important; gap: 8px; flex-wrap: wrap; }
.chart-controls { gap: 2px !important; padding: 2px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.chart-controls button {
  min-height: 28px !important; min-width: 0 !important; padding: 0 10px !important;
  border: none !important; border-radius: 8px !important; background: none !important;
  color: var(--text-secondary) !important; font-size: calc(0.75rem * var(--card-font-scale, 1)) !important; font-weight: 700;
}
.chart-controls button:hover { color: var(--text) !important; }
.chart-controls button.active { background: var(--card-bg) !important; color: var(--text) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.chart-empty { text-align: center; font-size: calc(0.82rem * var(--card-font-scale, 1)); color: var(--text-secondary); padding: 8px; }

/* ── Tables ───────────────────────────────────────────────── */
.daily-breakdown-container { padding: var(--card-pad) !important; }
.energy-table th { font-size: calc(0.72rem * var(--card-font-scale, 1)); font-weight: 700; color: var(--text-secondary); }
.energy-table td { font-variant-numeric: tabular-nums; }

/* ── Flow squares: fit the block instead of fixed paddings ── */
.flow-card-square, .flow-card-square2 { padding: var(--card-pad) !important; overflow: hidden; }
.fcs-grid, .fcs2-grid { height: 100%; gap: var(--card-gap) !important; }
.fcs-cell, .fcs2-cell { padding: clamp(4px, 2.5cqi, 16px) !important; min-width: 0; min-height: 0; }
.fcs-icon, .fcs2-icon { font-size: calc(clamp(1.6rem, 9cqi, 3rem) * var(--card-font-scale, 1)) !important; width: auto !important; }
.fcs-inverter-icon, .fcs2-inv { width: clamp(1.8rem, 9cqi, 3rem) !important; height: clamp(2.6rem, 14cqi, 5rem) !important; color: var(--color-text-on-accent, #111) !important; }
.fcs-label, .fcs2-label { font-size: calc(clamp(0.62rem, 2.2cqi, 0.75rem) * var(--card-font-scale, 1)) !important; }
.fcs-value, .fcs2-value { font-size: calc(clamp(0.85rem, 4.2cqi, 1.3rem) * var(--card-font-scale, 1)) !important; font-variant-numeric: tabular-nums; }
.fcs-sub, .fcs2-sub { font-size: calc(clamp(0.62rem, 2.4cqi, 0.8rem) * var(--card-font-scale, 1)) !important; }

/* Flow card (four nodes) */
.flow-value { font-size: calc(clamp(1rem, 5cqi, 1.7rem) * var(--card-font-scale, 1)) !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-label { font-size: calc(clamp(0.72rem, 2.4cqi, 0.85rem) * var(--card-font-scale, 1)) !important; }
.flow-icon { font-size: calc(clamp(1.4rem, 7cqi, 2.4rem) * var(--card-font-scale, 1)); }

/* ── Controls ─────────────────────────────────────────────── */
.toggle-switch.action-toggle .slider { background: var(--switch-off-color, #a8a59e) !important; }
[data-theme="dark"] .toggle-switch.action-toggle .slider { background: var(--switch-off-color, #4a4a4a) !important; }
.toggle-switch.action-toggle input:checked + .slider { background: var(--switch-on-color, #3a8c4f) !important; }
[data-theme="dark"] .toggle-switch.action-toggle input:checked + .slider { background: var(--switch-on-color, #4da863) !important; }
.toggle-switch.action-toggle .slider::before { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
[data-theme="dark"] .toggle-switch.action-toggle .slider::before { background: #111111; }
.toggle-switch.action-toggle input:focus-visible + .slider { outline: 2px solid var(--st-amber-text, #b45309); outline-offset: 2px; }
.switch-block { padding: var(--card-pad) !important; }
.state-select-block { padding: var(--card-pad) !important; overflow: auto; }

/* ── Forecast and weather: quieter error notices ──────────── */
.fc-error, .wx-error {
  font-size: calc(0.8rem * var(--card-font-scale, 1)) !important; color: var(--text-secondary) !important;
  padding: 8px 10px; border-radius: 8px; background: var(--bg); border: 1px dashed var(--border);
}

/* Phones: blocks stack and lose their fixed height, so cards that draw
   to their height get a sensible minimum. */
@media (max-width: 768px) {
  .dashboard-block > .ep-gauge { min-height: 180px; }
  .dashboard-block > .bar-single-card, .dashboard-block > .bar-stacked-card { min-height: 180px; }
  .dashboard-block > .chart-container { min-height: 260px; }
  .dashboard-block > .flow-card-square, .dashboard-block > .flow-card-square2 { min-height: 280px; }
  .dashboard-block > .iframe-card { min-height: 300px; }
}
/* Built-in icons for the .fi icon classes (replaces the external icon font). */
.fi { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask: var(--fi) center / contain no-repeat; mask: var(--fi) center / contain no-repeat; font-style: normal; }
.fi::before { content: none !important; }
.fi-sr-solar-panel { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M3 15l2.5-10h13L21 15z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M4.3 10h15.4M9.5 5l-1 10M14.5 5l1 10M12 15v4M8 19h8%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-battery-full { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%226%22 y=%225%22 width=%2212%22 height=%2214%22 rx=%222%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M10 3h4%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Crect x=%227.5%22 y=%227.5%22 width=%229%22 height=%2210.0%22 rx=%221%22 fill=%22black%22/%3E%3C/svg%3E"); }
.fi-sr-battery-three-quarters { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%226%22 y=%225%22 width=%2212%22 height=%2214%22 rx=%222%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M10 3h4%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Crect x=%227.5%22 y=%2210.0%22 width=%229%22 height=%227.5%22 rx=%221%22 fill=%22black%22/%3E%3C/svg%3E"); }
.fi-sr-battery-half { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%226%22 y=%225%22 width=%2212%22 height=%2214%22 rx=%222%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M10 3h4%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Crect x=%227.5%22 y=%2212.5%22 width=%229%22 height=%225.0%22 rx=%221%22 fill=%22black%22/%3E%3C/svg%3E"); }
.fi-sr-battery-quarter { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%226%22 y=%225%22 width=%2212%22 height=%2214%22 rx=%222%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M10 3h4%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Crect x=%227.5%22 y=%2215.0%22 width=%229%22 height=%222.5%22 rx=%221%22 fill=%22black%22/%3E%3C/svg%3E"); }
.fi-sr-battery-empty { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%226%22 y=%225%22 width=%2212%22 height=%2214%22 rx=%222%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M10 3h4%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-home { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M3 11l9-7 9 7%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M5 9.5V20h14V9.5%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M10 20v-5h4v5%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-bolt { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M13 2L4 14h7l-1 8 9-12h-7z%22 fill=%22black%22/%3E%3C/svg%3E"); }
.fi-sr-cloud { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 18h10a4 4 0 00.5-8 6 6 0 00-11.4 1.5A3.3 3.3 0 007 18z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-clouds { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M6 19h10a3.5 3.5 0 00.4-7 5 5 0 00-9.6 1.2A2.9 2.9 0 006 19z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M9 7.5A5 5 0 0118.5 9a3.5 3.5 0 012.5 3.4%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-cloud-sun { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M8 19h9a3.5 3.5 0 00.4-7 5 5 0 00-9.6 1.2A2.9 2.9 0 008 19z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M7 10.5a3.5 3.5 0 015-4.6M7 3v1.5M2.5 7.5H4M3.8 3.8l1 1%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-cloud-moon { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M8 19h9a3.5 3.5 0 00.4-7 5 5 0 00-9.6 1.2A2.9 2.9 0 008 19z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M9.5 6.5A4 4 0 014 10.5a4 4 0 015.5-4z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-cloud-rain { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 15h10a4 4 0 00.5-8 6 6 0 00-11.4 1.5A3.3 3.3 0 007 15z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M8 18l-1 3M12 18l-1 3M16 18l-1 3%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-cloud-snow { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 15h10a4 4 0 00.5-8 6 6 0 00-11.4 1.5A3.3 3.3 0 007 15z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M8 19h.01M12 19h.01M16 19h.01M10 21.5h.01M14 21.5h.01%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 stroke-width=%222.6%22/%3E%3C/svg%3E"); }
.fi-sr-thunderstorm { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 14h10a4 4 0 00.5-8 6 6 0 00-11.4 1.5A3.3 3.3 0 007 14z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M12.5 15l-2.5 4h3l-2 4%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
/* Weather icons for every code weatherFormat.js and the server can return. */
.fi-sr-cloud-drizzle { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 15h10a4 4 0 00.5-8 6 6 0 00-11.4 1.5A3.3 3.3 0 007 15z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M8 18.5v.01M12 18.5v.01M16 18.5v.01M10 21.5v.01M14 21.5v.01%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-cloud-hail { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 15h10a4 4 0 00.5-8 6 6 0 00-11.4 1.5A3.3 3.3 0 007 15z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M8 19v.01M12 19v.01M16 19v.01M10 22v.01M14 22v.01%22 stroke=%22black%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-cloud-showers { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 15h10a4 4 0 00.5-8 6 6 0 00-11.4 1.5A3.3 3.3 0 007 15z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M8 17.5l-1.5 4M12 17.5l-1.5 4M16 17.5l-1.5 4%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-cloud-showers-heavy { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 15h10a4 4 0 00.5-8 6 6 0 00-11.4 1.5A3.3 3.3 0 007 15z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M7 17.5l-1.5 4.5M10.5 17.5L9 22M14 17.5L12.5 22M17.5 17.5L16 22%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-cloud-sleet { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 15h10a4 4 0 00.5-8 6 6 0 00-11.4 1.5A3.3 3.3 0 007 15z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M8 18l-1 3M16 18l-1 3%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M12 18.5v.01M12 21.5v.01%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-cloud-sun-rain { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M9 15h8.5a3.5 3.5 0 00.4-7 5 5 0 00-9.6 1.2A2.9 2.9 0 009 15z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M6.5 9a3 3 0 014.3-4M6.5 2v1.3M2 6.5h1.3M3.3 3.3l.9.9%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M10 18l-1 3M14 18l-1 3M18 18l-1 3%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-cloud-moon-rain { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M9 15h8.5a3.5 3.5 0 00.4-7 5 5 0 00-9.6 1.2A2.9 2.9 0 009 15z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M9.5 4.5A3.5 3.5 0 015 9a3.5 3.5 0 014.5-4.5z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M10 18l-1 3M14 18l-1 3M18 18l-1 3%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-cloud-question { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 18h10a4 4 0 00.5-8 6 6 0 00-11.4 1.5A3.3 3.3 0 007 18z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M10.6 11.6a1.5 1.5 0 112.6 1c-.6.4-1.2.7-1.2 1.4M12 16.3v.01%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-moon-stars { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M20 14.5A8 8 0 019.5 4 8 8 0 1020 14.5z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M17 2.5v3M15.5 4h3M20.5 8v2M19.5 9h2%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-snowflake { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9M10 4.5l2 1.5 2-1.5M10 19.5l2-1.5 2 1.5%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-snowflakes { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M10 3v14M4 6.5l12 7M4 13.5l12-7%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M18.5 15v6M16 16.5l5 3M16 19.5l5-3%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-thunderstorm-sun { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M9 15h8.5a3.5 3.5 0 00.4-7 5 5 0 00-9.6 1.2A2.9 2.9 0 009 15z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M6.5 9a3 3 0 014.3-4M6.5 2v1.3M2 6.5h1.3M3.3 3.3l.9.9%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M14.5 15l-2.5 4h3l-2 4%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-thunderstorm-moon { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M9 15h8.5a3.5 3.5 0 00.4-7 5 5 0 00-9.6 1.2A2.9 2.9 0 009 15z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M9.5 4.5A3.5 3.5 0 015 9a3.5 3.5 0 014.5-4.5z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M14.5 15l-2.5 4h3l-2 4%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-fog { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 12h10a3.5 3.5 0 00.4-7 5 5 0 00-9.6 1.2A2.9 2.9 0 007 12z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M4 16h16M6 20h12%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-moon { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M20 14.5A8 8 0 019.5 4 8 8 0 1020 14.5z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-sun { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.4 1.4M17.6 17.6L19 19M5 19l1.4-1.4M17.6 6.4L19 5%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-sun-dust { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%223.5%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M10 2.5V4M2.5 10H4M4.7 4.7l1 1M15.3 4.7l-1 1M14 16h7M11 19.5h9M4 16h4%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-sunrise { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M5 16a7 7 0 0114 0M2 20h20M12 3v5M9 6l3-3 3 3%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-sunset { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M5 16a7 7 0 0114 0M2 20h20M12 8V3M9 5l3 3 3-3%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-temperature-high { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M10 14.5V4.5a2 2 0 014 0v10a4 4 0 11-4 0z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M12 9v7%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-humidity { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 3s6 6.5 6 11a6 6 0 01-12 0c0-4.5 6-11 6-11z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-wind { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M3 8h11a3 3 0 10-3-3M3 12h15a3 3 0 11-3 3M3 16h7%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-umbrella { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M3 12a9 9 0 0118 0z%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M12 12v7a2 2 0 01-4 0%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.fi-sr-tachometer-average { --fi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 17a8 8 0 1116 0%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M12 17l3-5%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }

/* PV Today weather row: one icon and one cloud bar per hour, aligned. */
.pvt-timeline-icons { display: flex !important; justify-content: stretch !important; gap: 2px; padding: 0 !important; margin-bottom: 4px !important; }
.pvt-timeline-icons > .pvt-timeline-icon { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; font-size: calc(clamp(0.8rem, 3.4cqi, 1.3rem) * var(--card-font-scale, 1)) !important; overflow: hidden; }
.pvt-timeline-icons > .pvt-timeline-icon .wx-ic { font-size: inherit !important; }
.pvt-timeline-bar { display: flex; gap: 2px; margin-bottom: 6px; }
.pvt-timeline-seg { flex: 1 1 0; height: 4px; border-radius: 2px; }

/* ── Configurable gauge ──────────────────────────────────────
   Shared card surface; the dial fits the block's width AND height
   (it used to be sized by width only and got cut off in short blocks);
   the readout scales with the dial unless a size is set. */
.configurable-gauge-card {
  display: flex; flex-direction: column; align-items: center;
  container-type: size;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius, 12px);
  padding: var(--card-pad) !important; gap: 4px !important;
}
.configurable-gauge-title { align-self: stretch; text-align: left; }
.configurable-gauge-viz {
  position: relative; flex: 0 0 auto; margin: auto;
  width: min(100cqw - 2 * var(--card-pad), var(--cg-size, 400px), 100cqh - 2 * var(--card-pad) - 1.6em);
  aspect-ratio: 1; container-type: inline-size;
}
.configurable-gauge-readout {
  /* Position and default size come from innerLayout() (inside the ring's hole). */
  position: absolute; display: flex; align-items: center; justify-content: center; gap: 0.15em;
  text-align: center; color: var(--text); white-space: nowrap; line-height: 1;
}
.configurable-gauge-history { position: absolute; max-height: none !important; overflow: hidden; }

/* ── Metric Trend / Dual metric: text follows the card size and the
   Text size setting unless the person set an explicit size. ── */
.metric-trend-card .metric-trend-value { font-size: calc(var(--mt-value-size, clamp(1.4rem, 15cqi, 3.2rem)) * var(--card-font-scale, 1)); }
.metric-trend-card .metric-trend-unit { font-size: calc(var(--mt-unit-size, clamp(0.8rem, 6cqi, 1.4rem)) * var(--card-font-scale, 1)); color: var(--text-secondary); }
.metric-trend-card { container-type: inline-size; }
.metric-trend-header .metric-trend-title { flex: 1 1 auto; }
.metric-trend-graph-unit { display: none; }
.metric-trend-context { font-size: calc(0.75rem * var(--card-font-scale, 1)); }

.dual-metric-title { font-size: calc(clamp(0.9rem, 1rem + 0.5cqi, 1.15rem) * var(--card-font-scale, 1)) !important; }
.dual-metric-card { container-type: inline-size; }
.dual-metric-header[hidden] { display: none !important; }
.dual-metric-header { padding: 10px var(--dual-padding, 14px) !important; }
.dual-metric-header .dual-metric-title { flex: 1 1 auto; }
.dual-metric-help { flex: 0 0 28px !important; width: 28px !important; height: 28px !important; min-height: 28px !important; margin: -4px -6px -4px 0; border: 1px solid var(--border) !important; font-weight: 700; color: var(--text-secondary) !important; }
.dual-metric-help-text { flex-basis: 100%; font-size: calc(0.8rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.dual-metric-header { flex-wrap: wrap; }
.dual-metric-pane { padding: 8px var(--dual-padding, 14px) !important; }
.dual-metric-label { font-size: calc(var(--dual-label-size, clamp(0.72rem, 7cqi, 0.95rem)) * var(--card-font-scale, 1)) !important; color: var(--text-secondary); font-weight: 600; }
.dual-metric-value { font-size: calc(var(--dual-value-size, clamp(1.1rem, 17cqi, 2.6rem)) * var(--card-font-scale, 1)) !important; }
.dual-metric-unit { font-size: calc(var(--dual-unit-size, clamp(0.75rem, 7cqi, 1.1rem)) * var(--card-font-scale, 1)) !important; color: var(--text-secondary); }

/* ── Power chart with statistics ─────────────────────────────
   Inside a dashboard block (fixed height) the chart takes the free
   space and the table scrolls, instead of the table being cut off at
   the block's edge. A chart height set in the editor still wins. */
.dashboard-block > .chart-container:has(.power-stats) { display: flex; flex-direction: column; height: 100% !important; overflow: hidden; }
.dashboard-block > .chart-container:has(.power-stats) > .power-chart-canvas-wrap:not([style*="height"]) { flex: 1 1 auto; height: auto; min-height: 140px; }
.dashboard-block > .chart-container:has(.power-stats) > .power-stats { flex: 0 1 auto; min-height: 0; max-height: 45%; overflow: auto; }
.power-stats h4 { font-size: calc(0.75rem * var(--card-font-scale, 1)) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary) !important; }
.power-stats-table thead th { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.power-stats-table tbody tr { cursor: pointer; }
.power-stats-table tbody tr:hover th, .power-stats-table tbody tr:hover td { background: var(--hover, rgba(127,127,127,0.06)); }
.power-stats-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.power-stats-table tbody tr[aria-pressed="false"] { opacity: 0.45; }
.power-stats-warning, .power-stats-unavailable { margin: 6px 0 0; font-size: 0.75rem; color: var(--text-secondary); }

/* Phones: blocks stack and take their content's height, so cards that size
   themselves to the block need a height of their own. */
@media (max-width: 768px) {
  .dashboard-block > .configurable-gauge-card { height: 260px !important; }
  .dashboard-block > .metric-trend-card { height: 220px !important; }
  .dashboard-block > .dual-metric-card { min-height: 130px; }
}

/* ── Energy day card ───────────────────────────────────────────────────── */
.energy-day-card {
  background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border);
  padding: var(--card-pad, 12px); height: 100%; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 6px; overflow: hidden; min-height: 0;
}
.ed-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.ed-title { margin: 0; font-size: calc(var(--fs-large) * var(--card-font-scale, 1)); font-weight: 500; color: var(--text); }
.ed-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ed-daynav { display: inline-flex; align-items: center; gap: 4px; }
.ed-day { min-width: 6.5em; text-align: center; font-size: calc(0.8rem * var(--card-font-scale, 1)); font-weight: 600; color: var(--text); padding: 0 4px; }
.ed-btn {
  background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius);
  min-height: 30px; min-width: 30px; padding: 0 10px; font: inherit; font-size: calc(0.78rem * var(--card-font-scale, 1)); cursor: pointer;
}
.ed-btn:hover:not(:disabled) { border-color: var(--accent); }
.ed-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ed-btn:disabled { opacity: .35; cursor: default; }
.ed-prev, .ed-next { padding: 0; font-size: 1rem; line-height: 1; }
.ed-btn[hidden] { display: none; }
.ed-panels { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.ed-panel { position: relative; min-height: 0; }
.ed-energy { flex: 3 1 0; min-height: 120px; }
.ed-battery { flex: 1 1 0; min-height: 72px; max-height: 140px; }
.ed-panel[hidden] { display: none; }
.ed-panel canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.ed-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; flex-shrink: 0; font-size: calc(0.72rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.ed-key { display: inline-flex; align-items: center; gap: 6px; }
.ed-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.ed-swatch-solid { background: var(--c); }
.ed-swatch-hatch { border: 1px solid var(--c); background: repeating-linear-gradient(135deg, var(--c) 0 1.5px, transparent 1.5px 4px); }
.ed-swatch-dash, .ed-swatch-line, .ed-swatch-dots { height: 0; width: 16px; border-radius: 0; border-top: 2px dashed var(--c); }
.ed-swatch-line { border-top-style: solid; }
.ed-swatch-dots { border-top-style: dotted; }
.ed-status { margin: 0; flex-shrink: 0; font-size: calc(0.72rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.ed-status:empty { display: none; }

/* ── Day totals card ───────────────────────────────────────────────────── */
.energy-totals-card { height: 100%; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; min-height: 0; container-type: inline-size; }
.et-title { margin: 0; font-size: calc(var(--fs-large) * var(--card-font-scale, 1)); font-weight: 500; color: var(--text); }
.et-tiles { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px; }
.et-tile {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--card-pad, 12px); min-width: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden;
}
.et-label { margin: 0; display: flex; align-items: center; gap: 6px; font-size: calc(0.8rem * var(--card-font-scale, 1)); font-weight: 600; color: var(--text-secondary); }
.et-icon { display: inline-flex; color: var(--et-c); }
.et-icon svg { width: 16px; height: 16px; }
.et-value { margin: 0; color: var(--text); line-height: 1.1; }
.et-num { font-size: calc(clamp(1.4rem, 1rem + 2cqi, 2rem) * var(--card-font-scale, 1)); font-weight: 600; font-variant-numeric: tabular-nums; }
.et-unit { font-size: calc(0.9rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.et-compare { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.et-compare[hidden] { display: none; }
.et-row { display: flex; justify-content: space-between; gap: 8px; font-size: calc(0.72rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.et-row span:last-child { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.et-track { position: relative; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.et-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: var(--et-c); }
.et-band {
  position: absolute; top: 0; bottom: 0; border-radius: 3px;
  background: repeating-linear-gradient(135deg, var(--et-c) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--et-c);
}
.et-status { margin: 0; font-size: calc(0.72rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.et-status:empty { display: none; }

/* ── Costs and earnings card ───────────────────────────────────────────── */
.ec-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; flex-shrink: 0; }
.ec-total { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; min-width: 0; background: var(--bg); }
.ec-total h4 { margin: 0 0 2px; font-size: calc(0.72rem * var(--card-font-scale, 1)); font-weight: 600; color: var(--text-secondary); }
.ec-amount { margin: 0; font-size: calc(clamp(1.05rem, 0.9rem + 0.8cqi, 1.4rem) * var(--card-font-scale, 1)); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-sub { margin: 0; font-size: calc(0.7rem * var(--card-font-scale, 1)); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ec-prices { margin: 0; flex-shrink: 0; font-size: calc(0.7rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.energy-costs-card { container-type: inline-size; }

/* ── System overview card ──────────────────────────────────────────────── */
.system-overview-card { height: 100%; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; min-height: 0; container-type: inline-size; }
.so-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.so-title { margin: 0; font-size: calc(var(--fs-large) * var(--card-font-scale, 1)); font-weight: 500; color: var(--text); }
.so-strip { display: flex; gap: 18px; margin: 0; flex-wrap: wrap; }
.so-strip div { display: flex; flex-direction: column; }
.so-strip dt { font-size: calc(0.7rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.so-strip dd { margin: 0; font-size: calc(0.8rem * var(--card-font-scale, 1)); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.so-status[data-state="warn"] { color: var(--color-grid); }
.so-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.so-body.has-extras { grid-template-columns: minmax(0, 1fr) minmax(150px, 22%); }
.so-diagram { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 18%) minmax(0, 1fr); gap: 0 14%; min-height: 0; }
.so-diagram .so-col { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; min-height: 0; position: relative; z-index: 1; }
.so-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.so-line { fill: none; stroke: var(--border); stroke-width: 2; }
.so-line[data-flow="in"], .so-line[data-flow="out"] { stroke: var(--so-c); stroke-dasharray: 2 10; stroke-linecap: round; stroke-width: 3; animation: so-flow 1.2s linear infinite; }
.so-line[data-flow="out"] { animation-direction: reverse; }
@keyframes so-flow { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) { .so-line[data-flow] { animation: none; } }
.so-hub { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.so-hub-box {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; width: 100%; max-width: 120px; box-sizing: border-box;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text);
}
.so-hub-icon { display: inline-flex; color: var(--accent); }
.so-hub-icon svg { width: 30px; height: 30px; }
.so-hub-img { max-width: 100%; max-height: 70px; object-fit: contain; }
.so-hub-state { font-size: calc(0.72rem * var(--card-font-scale, 1)); font-weight: 700; color: var(--text-secondary); text-align: center; }
.so-tile {
  position: relative; overflow: hidden; min-width: 0; min-height: 0; padding: 10px 12px; box-sizing: border-box;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
}
.so-tile header { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; position: relative; }
.so-tile h4 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: calc(0.8rem * var(--card-font-scale, 1)); font-weight: 600; color: var(--text-secondary); min-width: 0; }
.so-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-icon { display: inline-flex; color: var(--so-c); }
.so-icon svg { width: 16px; height: 16px; }
.so-corner { font-size: calc(0.72rem * var(--card-font-scale, 1)); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.so-value { margin: 0; position: relative; z-index: 1; color: var(--text); line-height: 1.05; }
.so-tile header { z-index: 1; }
.so-num { font-size: calc(clamp(1.2rem, 0.8rem + 2cqi, 2rem) * var(--card-font-scale, 1)); font-weight: 600; font-variant-numeric: tabular-nums; }
.so-unit { font-size: calc(0.9rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.so-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 40%; pointer-events: none; }
.so-spark-line { fill: none; stroke: var(--so-c); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .8; }
.so-spark-area { fill: var(--so-c); opacity: .12; stroke: none; }
.so-extras { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.so-extras .so-tile { flex: 1 1 0; }
/* Narrow: a 2x2 grid of tiles; the hub's state moves into the strip. */
.so-strip-inverter { display: none !important; }
@container (max-width: 620px) {
  .so-body.has-extras { grid-template-columns: 1fr; }
  .so-extras { display: grid; grid-template-columns: 1fr 1fr; }
  .so-diagram { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; }
  .so-diagram .so-col { display: contents; }
  .so-hub, .so-lines { display: none; }
  .so-strip-inverter { display: flex !important; }
  .so-strip { gap: 12px; }
  .so-tile { padding: 8px 10px; }
  .so-tile header { flex-wrap: wrap; }
  .so-spark { height: 28%; opacity: .7; }
}

/* ── Energy, tabbed ─────────────────────────────────────────────────────── */
.energy-tabs-card {
  background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border);
  padding: var(--card-pad, 12px); height: 100%; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden;
}
.etabs-title { margin: 0; font-size: calc(var(--fs-large) * var(--card-font-scale, 1)); font-weight: 500; color: var(--text); }
.etabs-list { display: flex; gap: 2px; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.etabs-tab {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 8px 12px; min-height: 36px; font: inherit; font-size: calc(0.82rem * var(--card-font-scale, 1)); font-weight: 600;
  color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.etabs-tab:hover { color: var(--text); }
.etabs-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.etabs-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.etabs-panel { flex: 1 1 auto; min-height: 0; display: flex; }
.etabs-panel[hidden] { display: none; }
/* The card inside a tab drops its own frame: the tabbed card is the frame. */
.etabs-panel > .energy-day-card, .etabs-panel > .energy-totals-card { border: 0; box-shadow: none; background: none; padding: 0; border-radius: 0; }
.etabs-panel > .energy-day-card .ed-header { justify-content: flex-end; }
.etabs-panel > .energy-totals-card .et-tiles { flex: 0 0 auto; align-content: start; }
/* Wide cards: the tab's controls sit at the right end of the tab bar. */
.energy-tabs-card { position: relative; container-type: inline-size; }
@container (min-width: 760px) {
  .etabs-list { padding-right: 330px; }
  .etabs-panel > .energy-day-card .ed-header { position: absolute; right: var(--card-pad, 12px); top: calc(var(--etabs-row-top, 0px) + 2px); }
}
/* PV split: three tiles on the right (PV inverter, Home, PV charger). */
.so-body.is-split .so-right { grid-template-rows: repeat(3, 1fr); }
.so-weather .so-value { display: flex; align-items: baseline; gap: 4px; }
.so-wx-icon { margin-left: auto; font-size: calc(1.8rem * var(--card-font-scale, 1)); color: var(--accent); line-height: 1; }
.so-wx-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
/* Weather details: one line each (label, value), in two columns when the
   tile is wide; fitWeather() hides the lines a short tile has no room for. */
.so-wx-facts { flex: 1 1 0; min-height: 0; overflow: hidden; margin: 6px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5em), 1fr)); gap: 3px 14px; align-content: start; }
.so-wx-facts > div { min-width: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 3px; border-top: 1px solid var(--border); }
.so-wx-facts dt { font-size: calc(0.72rem * var(--card-font-scale, 1)); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-wx-facts dd { margin: 0; font-size: calc(0.78rem * var(--card-font-scale, 1)); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Switch / selector placeholder (the working controls are on the Controls page) */
.control-placeholder { display: flex; flex-direction: column; justify-content: center; gap: .35rem; height: 100%; box-sizing: border-box; padding: 1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); }
.control-placeholder-name { font-weight: 600; color: var(--text); }
.control-placeholder-text { margin: 0; font-size: var(--fs-small, .85rem); color: var(--text-secondary); }
.control-placeholder-text a { color: var(--text); }

/* ── Button card (Home Assistant style) ─────────────────────── */
.button-card {
  box-sizing: border-box; width: 100%; height: 100%; min-width: 0;
  container-type: size;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: var(--card-pad); margin: 0; font: inherit; text-align: center; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
button.button-card { cursor: pointer; transition: transform .08s ease, border-color .15s ease; }
button.button-card:hover { border-color: var(--text-secondary, #888); }
button.button-card:active { transform: scale(.98); }
button.button-card:focus-visible { outline: 2px solid var(--bc-on, #ffc107); outline-offset: 2px; }
.button-card .bc-icon {
  display: flex; align-items: center; justify-content: center;
  width: 100%; flex: 1 1 0; min-height: 20px; max-height: min(62cqh, 80cqw);
  color: var(--bc-off); transition: color .2s ease;
}
.button-card.is-on .bc-icon, .button-card.is-press .bc-icon { color: var(--bc-on); }
.button-card.bc-pressed .bc-icon { animation: bc-press .6s ease; }
@keyframes bc-press { 0% { transform: scale(1); } 30% { transform: scale(.86); opacity: .7; } 100% { transform: scale(1); } }
.button-card.is-unknown .bc-icon { opacity: .45; }
.button-card .bc-icon svg { height: 100%; width: auto; max-width: 100%; }
.button-card .bc-icon img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.button-card.is-off .bc-icon img { opacity: .55; filter: grayscale(.4); }
.button-card .bc-emoji { font-size: min(44cqh, 60cqw); line-height: 1; }
.button-card .bc-name {
  max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2;
  font-size: calc(clamp(.8rem, 9cqh, 1rem) * var(--card-font-scale, 1)); font-weight: 500; color: var(--text);
}
.button-card .bc-state {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: calc(clamp(.68rem, 7cqh, .82rem) * var(--card-font-scale, 1)); color: var(--text-secondary);
}
.button-card.bc-busy { opacity: .7; }
.button-card.bc-error { border-color: var(--color-danger, #dc2626); animation: switch-shake .4s ease; }
.button-card.bc-error .bc-state { color: var(--color-danger, #dc2626); white-space: normal; }
/* Short blocks: the icon gives way to the text */
@container (max-height: 90px) { .button-card .bc-state { display: none; } }

/* A Tuya device that is not answering (readingAge.js): its last reading is not shown as live. */
.switch-block.is-unavailable,
.state-select-block.is-unavailable { opacity: 0.55; }