.indicators-page {
  --gauge-dial: var(--surface);
  --gauge-ring: var(--line);
  --gauge-mark: var(--muted);
  --gauge-major: var(--ink);
  --gauge-needle: var(--orange);
  --gauge-pivot: var(--blue-dark);
  --gauge-reference: rgba(8, 123, 189, .18);
  min-height: 100dvh;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
}

[data-weather-theme="night"] .indicators-page,
[data-weather-theme="night"] body.indicators-page {
  --gauge-reference: rgba(85, 188, 237, .2);
}

body > .instruments-header {
  position: relative;
  z-index: 10;
  min-height: 58px;
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--page-bg) 88%, transparent);
  backdrop-filter: blur(9px);
}

.instruments-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border-radius: 9px;
  background: var(--logo-bg);
}

.instruments-brand img {
  display: block;
  width: auto;
  height: 38px;
  object-fit: contain;
}

.instruments-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.instruments-controls .theme-button {
  min-height: 40px;
}

.instruments-main {
  min-height: 0;
  padding: clamp(8px, 1.3vh, 16px);
  display: grid;
  grid-template-rows: minmax(150px, .66fr) minmax(0, 1.34fr);
  gap: clamp(8px, 1.3vh, 16px);
}

.distance-clock {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.distance-clock-time {
  max-width: 100%;
  color: var(--blue-dark);
  font-size: clamp(4rem, 11vw, 10rem);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.distance-clock-date {
  margin: clamp(12px, 2vh, 22px) 0 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 2.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.1;
}

.distance-location {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: clamp(.78rem, 1.15vw, 1.05rem);
  font-weight: 400;
}

.instruments-status-slot {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.instruments-status {
  max-width: min(92vw, 680px);
  margin: 0;
  padding: 5px 12px;
  border: 1px solid var(--status-border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted);
  box-shadow: var(--shadow);
  font-size: clamp(.7rem, 1vw, .86rem);
  opacity: 1;
  transition: opacity .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.instruments-status[data-tone="warning"] {
  background: var(--status-warning-bg);
  color: var(--status-warning-ink);
}

.instruments-status[data-tone="error"] {
  background: var(--status-error-bg);
  color: var(--status-error-ink);
}

.instruments-status.is-hidden {
  opacity: 0;
}

.gauges-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 18px);
}

.gauge-card {
  min-width: 0;
  min-height: 0;
  padding: clamp(8px, 1.1vh, 14px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(14px, 1.5vw, 22px);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.gauge-card h2 {
  margin: 0;
  color: var(--blue-dark);
  text-align: center;
  font-size: clamp(1rem, 1.55vw, 1.45rem);
  line-height: 1;
  font-weight: 600;
}

.gauge-mount {
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gauge-svg {
  display: block;
  width: min(100%, 56vh);
  height: 100%;
  max-height: 100%;
  overflow: visible;
}

.gauge-dial {
  fill: var(--gauge-dial);
  stroke: var(--gauge-ring);
  stroke-width: 2;
}

.gauge-scale {
  fill: none;
  stroke: var(--gauge-ring);
  stroke-width: 5;
  stroke-linecap: round;
}

.gauge-reference {
  fill: none;
  stroke: var(--gauge-reference);
  stroke-width: 13;
  stroke-linecap: round;
}

.gauge-tick {
  stroke: var(--gauge-mark);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.gauge-tick.is-major {
  stroke: var(--gauge-major);
  stroke-width: 3;
}

.gauge-number {
  fill: var(--gauge-major);
  font-size: 12px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: middle;
  font-variant-numeric: tabular-nums;
}

.gauge-needle-line {
  stroke: var(--gauge-needle);
  stroke-width: 6;
  stroke-linecap: round;
}

.gauge-needle-tail {
  stroke: var(--gauge-needle);
  stroke-width: 7;
  stroke-linecap: round;
}

.gauge-needle.is-unavailable {
  opacity: 0;
}

.gauge-pivot-outer {
  fill: var(--surface-raised);
  stroke: var(--gauge-pivot);
  stroke-width: 4;
}

.gauge-pivot-inner {
  fill: var(--gauge-needle);
}

.gauge-reading-backdrop {
  fill: var(--gauge-dial);
}

.gauge-reading-value {
  fill: var(--ink);
  font-size: 29px;
  font-weight: 700;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

.gauge-reading-unit {
  fill: var(--muted);
  font-size: 15px;
  font-weight: 500;
  text-anchor: middle;
}

.gauge-range-label {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-size: clamp(.68rem, .9vw, .82rem);
  font-weight: 400;
}

@media (max-width: 760px) {
  .indicators-page {
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    grid-template-rows: auto auto;
  }

  .instruments-header {
    position: sticky;
    top: 0;
    padding-inline: 10px;
  }

  .instruments-brand img {
    height: 32px;
  }

  .instruments-back {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
  }

  .instruments-back span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .instruments-controls .theme-button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .instruments-main {
    grid-template-rows: auto auto;
    padding: 12px;
  }

  .distance-clock {
    min-height: 230px;
    padding-bottom: 38px;
  }

  .distance-clock-time {
    font-size: clamp(3.7rem, 20vw, 6rem);
  }

  .gauges-grid {
    grid-template-columns: 1fr;
  }

  .gauge-card {
    min-height: min(78vh, 560px);
  }

  .gauge-svg {
    width: min(100%, 470px);
  }
}

@media (min-width: 761px) and (max-height: 700px) {
  .instruments-header {
    min-height: 48px;
    padding-block: 4px;
  }

  .instruments-brand img {
    height: 31px;
  }

  .instruments-main {
    grid-template-rows: minmax(120px, .55fr) minmax(0, 1.45fr);
  }

  .distance-clock-time {
    font-size: clamp(4rem, 9vw, 7rem);
  }

  .distance-clock-date {
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .instruments-status {
    transition-duration: .01ms !important;
  }
}