/* Every component: header, banner, sky field, strip, gauges, verdict, tab bar,
   Control view, Log view, and the boot-status screens. Layout positions these
   pieces; layout.css never sets colours or type. */

/* --- Header --- */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--gutter);
  gap: var(--s-3);
}

.app-title {
  font-size: var(--t-head);
  font-weight: var(--w-bold);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.mode-pill,
.override-chip {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  min-height: 0;
}

.mode-pill {
  min-height: var(--tap);
  min-width: var(--tap);
}

.mode-pill--auto {
  background: var(--ink);
  color: var(--ink-inverse);
}

.mode-pill--observe {
  background: transparent;
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
}

.mode-pill--off {
  background: transparent;
  color: var(--ink);
  border: var(--stroke) dashed var(--line-strong);
}

.override-chip {
  background: transparent;
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
}

/* --- Alert banner --- */

.alert-banner {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4) var(--gutter);
  background: var(--loss-soft);
  color: var(--ink);
}

.alert-banner-icon {
  color: var(--loss);
  width: 1.5rem;
  height: 1.5rem;
}
.alert-banner-icon .icon {
  width: 100%;
  height: 100%;
}

.alert-banner-action {
  color: var(--ink-2);
  margin-top: var(--s-1);
}

.mock-banner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--gutter);
  background: var(--warn-soft);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
}
.mock-banner-icon { display: inline-flex; color: var(--ink); }

/* --- Sky field / arc.js --- */

.arc {
  position: relative;
  width: 100%;
  max-width: var(--arc-max-width);
  aspect-ratio: 390 / 384;
  margin: 0 auto;
}

.arc-svg {
  width: 100%;
  height: 100%;
}

.arc-foot-text { fill: var(--on-sky-2); font-size: var(--svg-label); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; }
.arc-figure-text { fill: var(--ink); font-size: var(--svg-figure); font-weight: var(--w-bold); letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.arc-phrase-text { fill: var(--on-sky-2); font-size: var(--svg-phrase); font-weight: var(--w-medium); }
.arc-node-label { fill: var(--on-sky-2); font-size: var(--svg-label); font-weight: var(--w-medium); letter-spacing: var(--track-label); text-transform: uppercase; }
.arc-node-value { fill: var(--ink); font-size: var(--svg-value); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.arc-node-state { fill: var(--on-sky-2); font-size: var(--svg-state); font-variant-numeric: tabular-nums; }

.arc-freshness {
  position: absolute;
  top: var(--header-overlay-h);
  right: var(--s-4);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  color: var(--on-sky-2);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.arc-freshness.is-stale {
  border: var(--stroke) dashed var(--on-sky-2);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-2);
}

.arc.is-scrubbing .arc-figure-text, .arc.is-scrubbing .arc-phrase-text { opacity: 0.55; }

/* --- Time strip / strip.js --- */

.strip {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  height: var(--strip-height);
  position: relative;
  display: flex;
  flex-direction: column;
}

.strip-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  position: relative;
  -webkit-overflow-scrolling: touch;
  padding-top: 0;
  scrollbar-width: none;
}
.strip-scroll::-webkit-scrollbar { display: none; }

.strip-track {
  position: relative;
  /* Height is set inline by strip.js to match its drawn content exactly. */
}

.strip-svg {
  display: block;
}

.strip-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.strip-zone-label,
.strip-week-placeholder,
.strip-empty-placeholder {
  position: absolute;
  color: var(--ink-2);
}

.strip-week-text {
  position: absolute;
  color: var(--ink);
  white-space: nowrap;
}

.strip-week-temp {
  font-variant-numeric: tabular-nums;
}

.strip-price-bar {
  cursor: pointer;
}
.strip-price-label {
  fill: var(--ink-2);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}
.strip-line-label { fill: var(--ink-2); font-size: var(--svg-state); font-weight: var(--w-medium); }
.strip-line-label--solar { fill: var(--ink-2); }

.strip-week-mark {
  pointer-events: none;
}

.strip-day-hit {
  cursor: pointer;
}

.strip-now-line {
  position: absolute;
  top: calc(var(--strip-pill-top) + var(--strip-pill-h));
  width: var(--stroke-heavy);
  background: var(--ink);
  transform: translateX(-50%);
  pointer-events: none;
}

.strip-now-pill {
  position: absolute;
  top: var(--strip-pill-top);
  height: var(--strip-pill-h);
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  pointer-events: auto;
  cursor: pointer;
  border: none;
}
.strip-now-price.is-positive { color: var(--ink-inverse); }
.strip-now-price.is-negative { color: var(--ink-inverse); }

.strip-readout {
  min-height: 1.4rem;
  padding: 0 var(--gutter) var(--s-2);
  font-size: var(--t-small);
  color: var(--ink-2);
}

/* --- Device gauges / gauges.js --- */

.gauges {
  padding: var(--s-5) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.gauge-row {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--s-3);
  row-gap: var(--s-1);
}

.gauge-label {
  grid-row: 1 / 3;
}

.gauge-track {
  height: var(--gauge-track-h);
  border-radius: var(--r-pill);
  background: var(--track);
  overflow: hidden;
  position: relative;
}
.gauge-track--planned {
  background: transparent;
  border: var(--stroke) dashed var(--line-strong);
}
.gauge-track--offline {
  background: transparent;
  border: var(--stroke) dashed var(--line-strong);
}

.gauge-fill {
  height: 100%;
  background: var(--blue);
  border-radius: var(--r-pill);
}
.gauge-fill--hatched {
  background-image: repeating-linear-gradient(135deg, var(--blue) 0 3px, transparent 3px 6px);
  opacity: 0.7;
}

.gauge-value {
  text-align: right;
}

.gauge-state {
  grid-column: 2 / 4;
}

/* --- Verdict --- */

.verdict {
  padding: var(--s-2) var(--gutter) var(--s-6);
}
.verdict-title {
  margin-bottom: var(--s-2);
}
.verdict-reason {
  color: var(--ink-2);
}

/* --- Tab bar --- */

.tab-bar {
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3) 0 var(--s-2);
  min-height: var(--tap);
  color: var(--ink-2);
  position: relative;
}

.tab-btn.is-active {
  color: var(--ink);
  font-weight: var(--w-bold);
}

.tab-btn.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.75rem;
  height: 3px;
  background: var(--ink);
  border-radius: var(--r-pill) var(--r-pill) 0 0;
}

.tab-label {
  font-size: var(--t-small);
}

/* --- Control view --- */

.control-view {
  padding: var(--s-5) var(--gutter);
}

.control-section {
  padding: var(--s-5) 0;
}
.control-section:first-child {
  padding-top: 0;
}

.control-section h2 {
  margin-bottom: var(--s-3);
}

.control-explain {
  margin-top: var(--s-3);
}

.segmented-control {
  display: flex;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: var(--s-1);
  gap: var(--s-1);
}

.segmented-btn {
  flex: 1;
  text-align: center;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  min-height: calc(var(--tap) - var(--s-2));
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
}

.segmented-btn.is-selected {
  background: var(--ink);
  color: var(--ink-inverse);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.control-section .button-row:first-child {
  margin-top: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  font-weight: var(--w-medium);
  font-size: var(--t-body);
  transition: opacity var(--d-ui) ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--ink-inverse);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
}

.btn-destructive {
  background: transparent;
  color: var(--loss);
  border: var(--stroke) solid var(--loss);
}

.btn:hover:not(:disabled) {
  opacity: 0.85;
}
.btn:active:not(:disabled) {
  opacity: 0.7;
}

.duration-picker {
  margin-top: var(--s-3);
}

.kv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--s-2) 0;
}

.control-error {
  margin-top: var(--s-4);
}

/* --- Log view --- */

.log-view {
  padding: var(--s-5) var(--gutter);
}

.log-filters {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.chip {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  border: var(--stroke) solid var(--line-strong);
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  min-height: calc(var(--tap) - var(--s-3));
}

.chip.is-selected {
  background: var(--ink);
  color: var(--ink-inverse);
  border-color: var(--ink);
}

.log-day {
  margin-bottom: var(--s-4);
}

.log-day-heading {
  margin-bottom: var(--s-2);
}

.log-row {
  display: grid;
  grid-template-columns: 1.5rem auto 1fr;
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}

.log-row-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ink-2);
}
.log-row-icon .icon {
  width: 100%;
  height: 100%;
}

.log-row-time {
  white-space: nowrap;
}

.log-row--alert .log-row-icon,
.log-row--alert .log-row-message {
  color: var(--loss);
}

.log-row--warn {
  background: var(--warn-soft);
  border-radius: var(--r-small);
  padding: var(--s-2);
  margin: var(--s-1) calc(-1 * var(--s-2));
}

.log-row--info .log-row-icon {
  color: var(--ink-2);
}

.log-empty {
  padding: var(--s-5) 0;
  max-width: 32rem;
}

.log-load-more {
  margin-top: var(--s-3);
}

/* --- Boot status: loading / unreachable --- */

.boot-status {
  padding: var(--s-7) var(--gutter);
  max-width: 28rem;
  margin: 0 auto;
  text-align: left;
}

.boot-status-inner > div > p {
  margin-top: var(--s-3);
}
.boot-status-inner > div > p:first-child {
  margin-top: 0;
}

/* --- Sign-in (login.html) and the Control view's Account section --- */

.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
}

.login-sky {
  height: auto;
  max-width: var(--arc-max-width);
}

.login-heading {
  position: absolute;
  top: var(--s-4);
  left: var(--gutter);
  color: var(--ink);
}
.mock-banner:not([hidden]) ~ .login-heading {
  top: calc(var(--tap) + var(--s-4));
}

.login-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s-6) var(--gutter);
  background: var(--ground);
}

.login-panel {
  background: var(--surface);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
  padding: var(--s-6);
  width: 100%;
  max-width: 24rem;
}

.login-panel h2 {
  margin-bottom: var(--s-4);
}

.login-form,
.account-password-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.text-input,
.password-input {
  width: 100%;
}

.login-message {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.form-alert-icon { display: inline-flex; flex: 0 0 auto; }

.login-note {
  margin-top: var(--s-3);
}