* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--color-bg-page);
  color: var(--color-ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  appearance: none;
  border: 0;
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.aurora-shell {
  width: min(100vw, 1120px);
  min-height: 100svh;
  margin: 0 auto;
  padding: var(--pad-desktop);
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto auto;
  gap: var(--gap-lg);
  background: var(--color-bg);
  overflow: hidden;
}

.topbar,
.bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
}

.brand,
.clock,
.status-line {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--color-dim);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
}

.clock {
  letter-spacing: var(--ls-caps-xs);
  text-align: right;
}

.chart-wrap {
  position: relative;
  min-height: 220px;
}

.chart {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  touch-action: none;
}

.axis-label,
.x-label {
  font-family: var(--font-mono);
  fill: var(--color-dim);
  font-size: var(--fs-tick);
  letter-spacing: var(--ls-caps-xs);
}

.target-label {
  fill: var(--color-ink);
  opacity: 0.72;
}

.note-pin {
  pointer-events: none;
}

.note-pin-halo,
.note-pin-pulse,
.note-pin-core,
.note-pin-glyph {
  transform-box: fill-box;
  transform-origin: center;
}

.note-pin-halo {
  opacity: 0;
  filter: blur(0.35px);
  transition: opacity 160ms var(--ease-out), transform 180ms var(--ease-out);
}

.note-pin-pulse {
  opacity: 0;
}

.note-pin-core {
  transition: stroke-opacity 160ms var(--ease-out), transform 180ms var(--ease-out);
}

.note-pin-glyph {
  transition: opacity 160ms var(--ease-out), transform 180ms var(--ease-out);
}

.note-pin.active .note-pin-halo {
  animation: noteHalo 900ms var(--ease-out) infinite alternate;
  opacity: 0.68;
}

.note-pin.active .note-pin-pulse {
  animation: notePulse 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.note-pin.active .note-pin-core {
  stroke-opacity: 0.95;
  transform: scale(1.12);
}

.note-pin.active .note-pin-glyph {
  opacity: 1;
  transform: scale(1.04);
}

.note-callout {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  width: min(520px, calc(100% - 24px));
  padding: 10px 14px 11px;
  border: 1px solid rgba(241, 237, 228, 0.18);
  border-radius: var(--radius-card);
  background: rgba(24, 27, 34, 0.92);
  color: var(--color-ink);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.note-callout:not([hidden]) {
  animation: noteCalloutIn 180ms var(--ease-out) both;
}

.note-callout[hidden] {
  display: none;
}

.note-callout-meta {
  font-family: var(--font-mono);
  color: var(--color-dim);
  font-size: var(--fs-tick);
  letter-spacing: var(--ls-caps-xs);
  text-transform: uppercase;
}

.note-callout-text {
  margin-top: 4px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.scrub-tooltip {
  position: absolute;
  min-width: 102px;
  padding: 6px 10px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-hair);
  background: var(--color-card);
  color: var(--color-ink);
  pointer-events: none;
  transform: translate(8px, 8px);
}

.tip-time {
  font-family: var(--font-mono);
  font-size: var(--fs-tick);
  color: var(--color-dim);
}

.tip-value {
  margin-top: 2px;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
}

.tip-value small {
  color: var(--color-dim);
  font-size: var(--fs-tick);
  font-weight: 400;
}

@keyframes noteHalo {
  from {
    opacity: 0.42;
    transform: scale(0.94);
  }

  to {
    opacity: 0.72;
    transform: scale(1.12);
  }
}

@keyframes notePulse {
  from {
    opacity: 0.72;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(2.35);
  }
}

@keyframes noteCalloutIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(0.985);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .note-pin.active .note-pin-halo,
  .note-pin.active .note-pin-pulse,
  .note-callout:not([hidden]) {
    animation: none;
  }

  .note-pin-halo,
  .note-pin-core,
  .note-pin-glyph {
    transition: none;
  }
}

.reading {
  min-height: 172px;
}

.state-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--chip-h);
  padding: 0 12px;
  border-radius: var(--radius-chip);
  border: 1px solid;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
}

.state-chip span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.state-chip.in {
  color: var(--color-ink);
  border-color: rgba(67, 160, 71, 0.6);
  background: rgba(67, 160, 71, 0.15);
}

.state-chip.in span {
  background: var(--zone-in);
}

.state-chip.low {
  color: var(--color-ink);
  border-color: rgba(58, 123, 213, 0.6);
  background: rgba(58, 123, 213, 0.18);
}

.state-chip.low span {
  background: var(--zone-low);
}

.state-chip.high {
  color: var(--color-ink);
  border-color: rgba(246, 166, 9, 0.6);
  background: rgba(246, 166, 9, 0.18);
}

.state-chip.high span {
  background: var(--zone-high);
}

.state-chip.veryhigh {
  color: var(--color-ink);
  border-color: rgba(239, 106, 59, 0.6);
  background: rgba(239, 106, 59, 0.18);
}

.state-chip.veryhigh span {
  background: var(--zone-veryhigh);
}

.state-chip.lost {
  color: var(--color-ink);
  border-color: rgba(124, 117, 104, 0.6);
  background: rgba(124, 117, 104, 0.20);
}

.state-chip.lost span {
  background: var(--zone-unknown);
}

.reading-row {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.current-value {
  font-size: var(--fs-number-xl-desktop);
  font-weight: var(--fw-thin);
  line-height: 0.88;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

.reading-meta {
  min-width: 124px;
  margin-left: 28px;
  padding-top: 18px;
}

.trend-arrow {
  height: 62px;
  font-size: 68px;
  font-weight: var(--fw-light);
  line-height: 0.8;
}

.unit-label {
  margin-top: 8px;
  color: var(--color-dim);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
}

.delta-label {
  margin-top: 8px;
  font-size: var(--fs-label-lg);
  font-weight: var(--fw-medium);
}

.freshness-label {
  margin-top: 6px;
  color: var(--color-dim);
  font-size: 12px;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.pill {
  width: var(--pill-w);
  height: var(--pill-h);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hair);
  background: transparent;
  color: var(--color-dim);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}

.pill.active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-bg);
}

@media (max-width: 720px) {
  .aurora-shell {
    width: 100vw;
    padding: var(--pad-mobile);
    gap: var(--gap-md);
    grid-template-rows: auto minmax(220px, 1fr) auto auto;
  }

  .topbar,
  .bottom-bar {
    align-items: flex-start;
  }

  .brand,
  .clock,
  .status-line {
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .chart-wrap {
    min-height: 240px;
  }

  .note-callout {
    top: 2px;
    width: calc(100% - 18px);
    padding: 9px 12px;
  }

  .note-callout-text {
    font-size: 13px;
  }

  .reading {
    min-height: 154px;
  }

  .current-value {
    font-size: var(--fs-number-xl-mobile);
  }

  .reading-meta {
    min-width: 84px;
    margin-left: 14px;
    padding-top: 12px;
  }

  .trend-arrow {
    height: 44px;
    font-size: 44px;
  }

  .bottom-bar {
    flex-direction: column;
    gap: var(--gap-md);
  }

  .controls {
    align-self: flex-end;
  }
}

@media (max-width: 380px) {
  .pill {
    width: 40px;
  }
}