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

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

.gauge-note { font-size: var(--fs-subheadline); color: var(--text-secondary); }
.gauge-muted { font-size: var(--fs-footnote); color: var(--text-tertiary); }
.gauge-hint { font-size: var(--fs-caption); color: var(--text-tertiary); }
.gauge-foot { font-size: var(--fs-caption); color: var(--text-tertiary); }
.gauge-ok { display: flex; align-items: center; gap: var(--s); font-size: var(--fs-subheadline); color: var(--accent); }

/* ---------- the power now ---------- */

.gauge-now { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--l); }
.gauge-now .small-value { text-align: right; align-items: flex-end; }

/* ---------- the phases ---------- */

.gauge-phases { display: flex; flex-direction: column; gap: var(--m); }
.gauge-phase { display: flex; flex-direction: column; gap: var(--xs); }
.gauge-phase .row {
  display: flex; align-items: baseline; gap: var(--s);
  font-size: var(--fs-subheadline);
  font-variant-numeric: tabular-nums;
}
.gauge-phase .l { width: 28px; font-weight: 600; }
.gauge-phase .a { flex: 1; }
.gauge-phase .v { font-size: var(--fs-footnote); color: var(--text-tertiary); }
.gauge-phase .w { min-width: 70px; text-align: right; color: var(--text-secondary); }
.gauge-phase .track { position: relative; height: 4px; border-radius: 999px; background: var(--surface-sunken); }
.gauge-phase .track.with-fuse { height: 8px; background: none; }
.gauge-phase .track.with-fuse::before {
  content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 4px;
  border-radius: 999px; background: var(--surface-sunken);
}
.gauge-phase .fill { position: absolute; left: 0; top: 0; height: 4px; border-radius: 999px; background: var(--energy); transition: width 300ms ease; }
.gauge-phase .track.with-fuse .fill { top: 2px; }
.gauge-phase .fill.over { background: var(--warning); }
.gauge-phase .mark { position: absolute; top: 0; width: 1.5px; height: 8px; margin-left: -0.75px; background: var(--text-tertiary); }

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

.gauge-chart svg { touch-action: pan-y; cursor: crosshair; }
.gauge-chart .rule-label { font-size: 10px; fill: var(--text-secondary); }
.gauge-readout {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--m);
  font-size: var(--fs-footnote);
  font-variant-numeric: tabular-nums;
}
.gauge-readout .when { font-weight: 600; }
.gauge-readout .what { color: var(--text-secondary); text-align: right; }

/* ---------- controls ---------- */

.gauge-setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--m); font-size: var(--fs-subheadline); }

.gauge-inline { display: flex; align-items: center; gap: var(--m); }
.gauge-inline input {
  flex: 1; min-width: 0;
  padding: 9px var(--m);
  border: 0;
  border-radius: var(--r-small);
  background: var(--surface-sunken);
  font-size: var(--fs-subheadline);
  color: var(--text);
}
.gauge-inline input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.gauge-btn-row { display: flex; align-items: center; gap: var(--m); margin-top: var(--xs); flex-wrap: wrap; }

/* ---------- the settings sheet ---------- */

.gauge-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--m); }
.gauge-name { font-weight: 500; }
.gauge-id { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-tertiary); }

.gauge-list { display: flex; flex-direction: column; }
.gauge-list-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--m);
  width: 100%;
  padding: 12px 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.gauge-list-row.static { cursor: default; }
.gauge-list-row + .gauge-list-row { border-top: 1px solid var(--line); }
.gauge-list-row:disabled { opacity: 0.6; cursor: default; }
.gauge-list-row .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gauge-list-row .who > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }