/* Styles for the dial page only. Shared styles live in app.css; tokens in tokens.css. */

/* A card title with one of the page's own symbols (dial/bits.js titled): the title node holds
 * the icon and the words, laid out as the card's own icon and title would be. */
.card.with-icon .card-title > span { display: inline-flex; align-items: center; gap: var(--s); min-width: 0; }
.card.with-icon .card-title > span > .icon { color: var(--text-tertiary); flex: none; }

/* ---------- words ---------- */

.dial-text { font-size: var(--fs-footnote); color: var(--text); }
.dial-text.secondary { color: var(--text-secondary); }
.dial-muted { font-size: var(--fs-footnote); color: var(--text-tertiary); }
.dial-note { font-size: var(--fs-caption); color: var(--text-tertiary); }
.dial-note.warning { color: var(--warning); }
.dial-note.danger { color: var(--danger); }
.dial-footer { font-size: var(--fs-caption); color: var(--text-tertiary); }
.dial-waiting {
  display: flex; align-items: center; gap: var(--s);
  font-size: var(--fs-footnote); color: var(--text-secondary);
}

/* ---------- the room, the weather ---------- */

.dial-room { display: flex; flex-direction: column; gap: var(--m); }
.dial-room-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--l); }
.dial-outside-row { display: flex; justify-content: space-between; gap: var(--l); }
.dial-outside-row .small-value:last-child { text-align: right; }

/* ---------- the heat pump ---------- */

.dial-pump .dial { margin-bottom: var(--xs); }

/* ---------- the suggestion and the override ---------- */

.dial-actions { display: flex; gap: var(--s); }
.dial-actions .btn { flex: 1; width: auto; }
.dial-actions .btn.primary { padding: 12px var(--l); font-size: var(--fs-subheadline); }

.dial-override {
  display: flex; align-items: center; gap: var(--s);
  font-size: var(--fs-footnote); color: var(--text);
}
.dial-override > span { flex: 1; min-width: 0; }
.dial-override .icon { flex: none; }

/* ---------- the plan ---------- */

.dial-runs { display: flex; flex-direction: column; gap: 2px; }
.dial-run {
  display: flex; align-items: center; gap: var(--s);
  font-size: var(--fs-caption); color: var(--text-secondary);
}
.dial-run .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dial-run .amount { margin-left: auto; font-variant-numeric: tabular-nums; }
.dial-strip-empty { font-size: var(--fs-caption); text-align: center; padding-top: var(--xs); }

/* ---------- the last hours ---------- */

.dial-segments {
  display: flex;
  padding: 2px;
  border-radius: var(--r-small);
  background: var(--surface-sunken);
}
.dial-segments button {
  flex: 1;
  padding: 6px 0;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: var(--fs-footnote);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}
.dial-segments button.selected { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

.dial-power-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s);
  padding-top: var(--s);
}
.dial-power-head .meter { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dial-power-head .name { font-size: var(--fs-caption); font-weight: 600; color: var(--text-secondary); }
.dial-power-head .now { font-size: var(--fs-caption); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

.dial-energy {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dial-energy .reading { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-secondary); }
.dial-energy .today { display: flex; align-items: baseline; gap: 4px; }
.dial-energy .today b { font-size: var(--fs-title3); font-weight: 600; color: var(--text); }
.dial-energy .today .word { font-size: var(--fs-caption); color: var(--text-secondary); }
.dial-energy .since { font-size: var(--fs-caption2); color: var(--text-tertiary); }
.dial-energy .yesterday { font-size: var(--fs-caption); color: var(--text-secondary); }
.dial-energy .span { font-size: var(--fs-caption2); color: var(--text-tertiary); }

/* ---------- the charts ---------- */

.dial-graph .mark-label { font-size: 10px; font-weight: 600; }
.dial-legend {
  display: flex; flex-wrap: wrap; gap: var(--s) var(--m);
  margin-top: var(--s);
  font-size: var(--fs-caption); color: var(--text-secondary);
}
.dial-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dial-legend svg { display: inline-block; }

.sun-arc { width: 100%; }
.sun-arc svg { width: 100%; height: auto; overflow: visible; }