/* SkyDaze — mobile-first midnight-atmosphere UI. */

:root {
  /* Typography — Inter with the system stack as fallback. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.6rem;
  --text-2xl: 2.1rem;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --tracking-wide: 0.08em;

  /* Anthracite surfaces: near-black page, #171C26 cards, lighter controls. */
  --surface-0: #0B0F17;
  --surface-1: #171C26;
  --surface-2: #1C2230;
  --surface-3: #222A3A;
  --surface-hover: #2A3446;
  --surface-sunken: #0F141D;

  /* Restrained atmospheric canvas: deep navy with a faint blue haze */
  --atmosphere-midnight: #0B0F17;
  --atmosphere-violet: #0E1420;
  --atmosphere-mauve: #101725;
  --atmosphere-coral: #0D131D;
  --haze-midnight: rgba(91, 157, 255, 0.08);
  --haze-violet: rgba(72, 126, 214, 0.07);
  --haze-mauve: rgba(120, 150, 200, 0.05);
  --haze-coral: rgba(76, 120, 190, 0.05);

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #a7b4c8;
  --text-tertiary: #8c9ab0;

  /* Accents */
  --accent: #5b9dff;
  --accent-soft: rgba(91, 157, 255, 0.14);
  --accent-muted: #6f86a8;
  --positive: #8fd6b4;
  --negative: #f0a6ad;
  --warning-surface: rgba(92, 62, 68, 0.28);
  --warning-border: rgba(216, 160, 168, 0.26);
  --danger: #f0b7bd;

  /* Borders and soft shadows */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(2, 6, 12, 0.38);
  --shadow-lg: 0 24px 64px rgba(2, 6, 12, 0.5);

  /* Spacing scale: every primary step is an exact multiple of 8px. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --gap: var(--space-3);

  /* Page frame: gutters and vertical rhythm stay replaceable per breakpoint,
     while the safe-area insets are added on top for notched devices. */
  --page-gutter: var(--space-4);
  --page-top: var(--space-7);
  --page-bottom: var(--space-8);
  --header-gutter: 0px;
  --touch-target: 44px;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-fast: 140ms;
  --motion-short: 240ms;
  --motion-fade: 200ms;

  /* Radii: cards sit inside the 20-24px band. */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Cards and motion */
  --card: var(--surface-1);
  --card-border: var(--border-subtle);
  --transition: 160ms ease;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background-color: var(--surface-0);
  overflow-x: hidden;
}

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--surface-0);
  background-image:
    radial-gradient(58rem 38rem at 14% -10%, var(--haze-midnight), transparent 66%),
    radial-gradient(52rem 36rem at 82% -6%, var(--haze-violet), transparent 64%),
    radial-gradient(44rem 30rem at 32% 18%, var(--haze-mauve), transparent 62%),
    radial-gradient(50rem 34rem at 78% 104%, var(--haze-coral), transparent 66%),
    linear-gradient(
      180deg,
      var(--atmosphere-midnight) 0%,
      var(--atmosphere-violet) 38%,
      var(--atmosphere-mauve) 72%,
      var(--atmosphere-coral) 100%
    );
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: var(--surface-0);
  background: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app {
  max-width: 46rem;
  margin: 0 auto;
  padding: calc(var(--page-top) + env(safe-area-inset-top, 0px))
    max(var(--page-gutter), env(safe-area-inset-right, 0px))
    calc(var(--page-bottom) + env(safe-area-inset-bottom, 0px))
    max(var(--page-gutter), env(safe-area-inset-left, 0px));
}

header.site {
  padding: var(--space-4) 0 var(--space-2);
}

header.site h1 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #ffffff 15%, #b7c6dc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.site__intro {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.location {
  position: relative;
  min-width: 0;
}

.location__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  max-width: 100%;
  padding: 0.35rem 0.7rem;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    transform var(--transition);
}

.location__trigger:active {
  transform: scale(0.97);
}

.location__trigger:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.location__trigger[aria-expanded="true"] {
  border-color: var(--accent);
}

.location__icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.location__current {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.location__chevron {
  font-size: 0.8rem;
  line-height: 1;
  color: var(--text-tertiary);
}

.location__panel {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.location__panel[hidden] {
  display: none;
}

.controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.controls label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

.controls input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-md);
  color: var(--text-primary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.controls input::placeholder {
  color: var(--text-tertiary);
}

.controls input:hover {
  border-color: var(--border-strong);
}

.controls input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.location__hint,
.location__error,
.location__status {
  grid-column: 1 / -1;
}

.location__hint {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-secondary);
}

.location__error {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--danger);
  background: var(--warning-surface);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
}

.location__error[hidden] {
  display: none;
}

.location__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.location__actions button {
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    transform var(--transition), opacity var(--transition);
}

.location__actions button:hover:not(:disabled) {
  background: var(--surface-hover);
}

.location__actions button:active:not(:disabled) {
  transform: translateY(1px);
}

.location__geolocate {
  background: var(--accent-soft);
  border-color: rgba(91, 157, 255, 0.35);
}

.location__close {
  color: var(--text-secondary);
  background: transparent;
  border-color: var(--border-default);
}

.location__actions button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.location__status {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-secondary);
}

.location__status:empty {
  display: none;
}

.location__status[data-kind="error"] {
  color: var(--danger);
}

.location__status[data-kind="info"] {
  color: var(--positive);
}

.status {
  min-height: 1.2rem;
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition),
    border-color var(--transition), padding var(--transition);
}

/* Loading: a quiet inline indicator instead of a bare text swap. */
.status[data-kind="loading"] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-1);
  border-color: var(--border-subtle);
  border-radius: var(--radius-lg);
}

.status[data-kind="loading"]::before {
  content: "";
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: var(--radius-pill);
  animation: status-spin 900ms linear infinite;
}

.status[data-kind="error"] {
  padding: var(--space-2) var(--space-3);
  color: var(--danger);
  background: var(--warning-surface);
  border-color: var(--warning-border);
}

@keyframes status-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Loading placeholders reuse the event card silhouette, so the first paint
   already reserves the final layout instead of jumping when data lands. */
.events__loading {
  display: grid;
  gap: var(--gap);
}

.event-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: linear-gradient(165deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.skeleton-line {
  height: 0.7rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-pill);
}

.skeleton-line--icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
}

.skeleton-line--title {
  width: min(12rem, 60%);
  height: 0.9rem;
}

.skeleton-line--score {
  width: 5.25rem;
  height: 5.25rem;
  border-radius: var(--radius-pill);
}

.skeleton-line--short {
  width: 45%;
}


.day {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  touch-action: pan-y;
}


.day[hidden] {
  display: none;
}

.day__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.day__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-2);
  font-family: inherit;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--text-primary);
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    opacity var(--transition), transform var(--transition);
}

.day__arrow:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.day__arrow:active:not(:disabled) {
  transform: scale(0.94);
}

.day__arrow:disabled {
  opacity: 0.32;
  cursor: default;
}

.day__label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  overflow-wrap: anywhere;
}

.day[data-slide="next"] .day__label {
  animation: day-label-in-right var(--motion-short) var(--ease-standard) both;
}

.day[data-slide="prev"] .day__label {
  animation: day-label-in-left var(--motion-short) var(--ease-standard) both;
}

@keyframes day-label-in-right {
  from {
    opacity: 0;
    transform: translateX(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes day-label-in-left {
  from {
    opacity: 0;
    transform: translateX(-0.5rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.day__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 0.5rem;
  margin-top: var(--space-2);
}

.day__dots:empty {
  display: none;
}

.day__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.2);
}

.day__dot--active {
  background: var(--accent);
}

.events {
  display: grid;
  gap: var(--gap);
  margin-top: var(--space-4);
  position: relative;
  overflow-x: clip;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

.events__page {
  display: grid;
  gap: var(--gap);
  min-width: 0;
}

.events__page--out {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.events__page--out--next {
  animation: day-slide-out-left var(--motion-short) var(--ease-standard) both;
}

.events__page--in--next {
  animation: day-slide-in-right var(--motion-short) var(--ease-standard) both;
}

.events__page--out--prev {
  animation: day-slide-out-right var(--motion-short) var(--ease-standard) both;
}

.events__page--in--prev {
  animation: day-slide-in-left var(--motion-short) var(--ease-standard) both;
}

@keyframes day-slide-out-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-1.75rem);
  }
}

@keyframes day-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(1.75rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes day-slide-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(1.75rem);
  }
}

@keyframes day-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-1.75rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.event {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(255, 255, 255, 0.05), transparent 62%),
    linear-gradient(165deg, #1a2130 0%, var(--surface-1) 58%, #141a24 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow:
    0 24px 64px rgba(2, 6, 12, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--transition), border-color var(--transition),
    box-shadow var(--transition);
}

/* Tactile press: a shallow scale keeps the card reading as a surface without
   shifting the layout. */
.event:active {
  transform: scale(0.995);
  border-color: var(--border-strong);
}

.event__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.event__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  color: #ffcf8a;
  background: rgba(255, 207, 138, 0.1);
  border: 1px solid rgba(255, 207, 138, 0.18);
  border-radius: var(--radius-pill);
}

.event__icon--sunset {
  color: #ff9f86;
  background: rgba(255, 159, 134, 0.1);
  border-color: rgba(255, 159, 134, 0.18);
}

.event__icon-svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.event__kind {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}

.event__time {
  margin: var(--space-4) 0 0;
  font-size: var(--text-md);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.event__summary {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.event__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.score {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-2);
}

.score__value {
  max-width: 24rem;
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-secondary);
  text-align: center;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Linear score bar: same clamped 0-100 percentage as the ring, rendered as a
   width so the value can never overflow its track. */
.score__bar {
  width: 100%;
  max-width: 12rem;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
}

.score__bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 600ms var(--ease-standard);
}

.score-ring {
  --ring-accent: var(--accent);
  --ring-glow: rgba(91, 157, 255, 0.25);
  --ring-track: rgba(255, 255, 255, 0.09);
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  width: 9.5rem;
}

.score-ring__svg {
  display: block;
  width: 9.5rem;
  height: 9.5rem;
}

.score-ring__track {
  fill: none;
  stroke: var(--ring-track);
  stroke-width: 8;
}

.score-ring__progress {
  fill: none;
  stroke: var(--ring-accent);
  stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  filter: drop-shadow(0 0 5px var(--ring-glow));
}

.score-ring__center {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 9.5rem;
  pointer-events: none;
}

.score-ring__value {
  font-size: 2.35rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.score-ring__scale {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.score-ring__rating {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  text-align: center;
  color: var(--text-primary);
}

/* Threshold-aligned dark-theme accents: backend rating bands are
   Poor < 25 <= Fair < 50 <= Good < 70 <= Great < 85 <= Vivid/Epic. */
.score-ring--rating-poor {
  --ring-accent: #8e93a6;
  --ring-glow: rgba(142, 147, 166, 0.2);
}

.score-ring--rating-fair {
  --ring-accent: #b3a8d8;
  --ring-glow: rgba(179, 168, 216, 0.22);
}

.score-ring--rating-good {
  --ring-accent: #f3c77d;
  --ring-glow: rgba(243, 199, 125, 0.22);
}

.score-ring--rating-great {
  --ring-accent: #ff9f6e;
  --ring-glow: rgba(255, 159, 110, 0.24);
}

.score-ring--rating-vivid {
  --ring-accent: #e07ae3;
  --ring-glow: rgba(224, 122, 227, 0.24);
}

/* Missing weather is a dotted empty track, never a rendered 0% arc. */
.score-ring--unavailable {
  --ring-track: rgba(255, 255, 255, 0.16);
}

.score-ring--unavailable .score-ring__track {
  stroke-dasharray: 3 8;
}

.score-ring--unavailable .score-ring__value {
  color: var(--text-secondary);
}

.score-ring--unavailable .score-ring__rating {
  color: var(--text-secondary);
}

.event__details {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.event__details-summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  list-style: none;
  cursor: pointer;
  transition: color var(--transition);
}

.event__details-summary::-webkit-details-marker {
  display: none;
}

.event__details-summary::after {
  content: "+";
  margin-left: auto;
  font-size: var(--text-sm);
  line-height: 1;
}

.event__details[open] .event__details-summary::after {
  content: "–";
}

.event__details-summary:hover {
  color: var(--text-primary);
}

.event__details-summary:active {
  color: var(--accent);
}

.event__details-body {
  padding-top: var(--space-2);
}

.horizon {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-secondary);
  display: grid;
  gap: var(--space-1);
}

.horizon strong {
  font-weight: 600;
  color: var(--text-primary);
}

.location input,
.location button {
  min-height: 44px;
}

.classes,
.factors,
.confidence,
.models {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.classes h3,
.factors h3,
.confidence h3,
.models h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.section__hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-secondary);
}

.classes__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.classes__chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.45rem 0.65rem;
  font-size: var(--text-xs);
  line-height: 1.35;
  overflow-wrap: anywhere;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.classes__drawer {
  margin-top: var(--space-2);
}

.classes__drawer summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition);
}

.classes__drawer summary:hover {
  color: var(--text-primary);
}

.classes__drawer summary:active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.classes__list,
.factors__list,
.models__list,
.confidence__notes {
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.classes__row {
  padding: 0.5rem var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.45;
  border-bottom: 1px solid var(--border-subtle);
}

.classes__row:last-child {
  border-bottom: 0;
}

.factors__group {
  margin-top: var(--space-2);
}

.factors__group h4 {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
}

.factor {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: 0.3rem 0;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.factor__label {
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--text-secondary);
}

.factor__points {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.factors__group--positive .factor__points {
  color: var(--positive);
}

.factors__group--negative .factor__points {
  color: var(--negative);
}

.confidence__value {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
}

.confidence__notes {
  margin-top: var(--space-2);
  padding-left: var(--space-4);
  list-style: disc;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-secondary);
}

.models__headline {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.models__list {
  display: grid;
  gap: var(--space-2);
}

.model {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.model--unavailable {
  opacity: 0.82;
}

.model__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.model__name {
  font-size: var(--text-sm);
  font-weight: 600;
}

.model__badge {
  padding: 0.12rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
}

.model__values {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}

.model__score {
  font-variant-numeric: tabular-nums;
}

.model__unavailable {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--danger);
}

.models__spread,
.models__agreement {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.models__spread-heading {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.models__layers {
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.models__layer {
  padding: 0.35rem var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.45;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--border-subtle);
}

.models__layer:last-child {
  border-bottom: 0;
}

.models__optical {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-secondary);
}

.models__warning {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  color: var(--text-primary);
  background: var(--warning-surface);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
}

.models__empty {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}

.model__rating {
  color: var(--text-secondary);
}

.window__label {
  font-weight: 600;
  color: var(--text-primary);
}

.event--no-data {
  border-style: dashed;
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xs);
}

footer.site {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-subtle);
}

footer.site a {
  color: var(--text-primary);
}

/* ---------------------------------------------------------------------------
   Detail view — bottom sheet on smartphones, centered modal on desktop.
   The overlay is mounted by frontend/app.js: the open class drives the
   slide/fade transition, while [hidden] keeps the closed overlay inert.
   --------------------------------------------------------------------------- */

body.detail-open {
  overflow: hidden;
}

.detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(7, 7, 11, 0.68);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 0s linear 220ms;
}

.detail-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 220ms ease,
    visibility 0s linear 0s;
}

.detail-view {
  position: fixed;
  z-index: 41;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 48rem);
  margin: 0 auto;
  color: var(--text-primary);
  background: linear-gradient(
    180deg,
    var(--surface-2) 0%,
    var(--surface-1) 22%,
    var(--surface-0) 100%
  );
  border: 1px solid var(--border-default);
  border-bottom: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  overscroll-behavior: contain;
  transition:
    transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 200ms ease,
    visibility 0s linear 280ms;
}

.detail-view::before {
  content: "";
  position: absolute;
  top: var(--space-2);
  left: 50%;
  width: 2.5rem;
  height: 0.25rem;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  transform: translateX(-50%);
}

.detail-view.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    transform 300ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 200ms ease,
    visibility 0s linear 0s;
}

.detail-view[hidden],
.detail-backdrop[hidden] {
  display: none;
}

.detail-view__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
}

.detail-view__heading {
  min-width: 0;
}

.detail-view__context {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.detail-view__title {
  margin: var(--space-1) 0 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.detail-view__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition),
    border-color var(--transition), transform var(--motion-fast) var(--ease-standard);
}

.detail-view__close:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.detail-view__close:active {
  transform: scale(0.97);
  background: var(--surface-hover);
}

.detail-view__close:focus-visible {
  color: var(--text-primary);
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.detail-view__close-icon {
  display: block;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.detail-view__close-label {
  white-space: nowrap;
}

.detail-view__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Compact German data rows: a quiet uppercase label column and a
   tabular value column, collapsing to stacked rows on very small screens. */
.detail-rows {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  border-bottom: 1px solid var(--border-subtle);
}

.detail-row:last-child {
  border-bottom: 0;
}

.detail-row__label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.detail-row__value {
  min-width: 0;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.detail-row__value--muted {
  color: var(--text-secondary);
}

.detail-row__value--positive {
  color: var(--positive);
}

.detail-row__value--negative {
  color: var(--negative);
}

.detail-section {
  margin: 0;
}

.detail-section + .detail-section {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.detail-section__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.detail-section__hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-secondary);
}

.detail-note {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

/* Weather metrics: compact rounded cards behind a restrained disclosure so
   the dossier stays short until the reader actually asks for numbers. */
.forecast-details {
  margin-top: var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.forecast-details__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: left;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition),
    transform var(--motion-fast) var(--ease-standard);
}

.forecast-details__trigger::after {
  content: "+";
  margin-left: auto;
  font-size: var(--text-sm);
  line-height: 1;
}

.forecast-details[data-state="open"] .forecast-details__trigger {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.forecast-details[data-state="open"] .forecast-details__trigger::after {
  content: "–";
}

.forecast-details__trigger:hover {
  color: var(--text-primary);
}

.forecast-details__trigger:active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.forecast-details__trigger:focus-visible {
  color: var(--text-primary);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Closed panels collapse through height/opacity/visibility (never
   display:none), so the measured transition can run in both directions.
   The body itself carries no padding: a border-box can never shrink below
   its padding, so the inset lives on the inner grid and the measured height
   really reaches zero with no residual strip under the trigger. */
.forecast-details__body {
  height: 0;
  padding: 0;
  overflow: clip;
  opacity: 0;
  visibility: hidden;
  transition: height var(--motion-short) var(--ease-standard),
    opacity var(--motion-fade) var(--ease-standard),
    visibility 0s linear var(--motion-fade);
}

.forecast-details[data-state="open"] .forecast-details__body {
  height: auto;
  opacity: 1;
  visibility: visible;
  transition: height var(--motion-short) var(--ease-standard),
    opacity var(--motion-fade) var(--ease-standard),
    visibility 0s linear 0s;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-2);
  padding: var(--space-3);
}

.metric-card {
  min-width: 0;
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.metric-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.metric-card__rows {
  margin: 0;
}

/* Wins over the shared .detail-row grid, including the narrow-screen
   overrides further down that would otherwise collapse the icon column. */
.detail-row.metric {
  grid-template-columns: 1.15rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.metric__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--text-tertiary);
}

.metric__icon-svg,
.factor__icon-svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metric__icon-svg {
  width: 1.15rem;
  height: 1.15rem;
}

.metric__value {
  font-size: var(--text-md);
  font-weight: 600;
  text-align: right;
}

.metric--unavailable .metric__value {
  font-weight: 500;
  color: var(--text-secondary);
}

.factor__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-right: var(--space-1);
  color: var(--text-tertiary);
}

.factor__icon-svg {
  width: 1rem;
  height: 1rem;
}

/* Collapsible technical diagnostics (models, factors, confidence) stay out
   of the primary detail rows until the reader expands them. */
.detail-technical {
  margin-top: var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.detail-technical > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  list-style: none;
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition);
}

.detail-technical > summary::-webkit-details-marker {
  display: none;
}

.detail-technical > summary::after {
  content: "+";
  margin-left: auto;
  font-size: var(--text-sm);
  line-height: 1;
}

.detail-technical[open] > summary {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}

.detail-technical[open] > summary::after {
  content: "–";
}

.detail-technical > summary:hover {
  color: var(--text-primary);
}

.detail-technical > summary:active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.detail-technical > summary:focus-visible {
  color: var(--text-primary);
  border-radius: var(--radius-md);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.detail-technical__body {
  padding: 0;
  overflow: clip;
  transition: height var(--motion-short) var(--ease-standard),
    opacity var(--motion-fade) var(--ease-standard);
}

/* The inset belongs to the inner wrapper so the animated body can measure
   and settle at exactly zero height. */
.detail-technical__inner {
  padding: var(--space-3);
}

@keyframes detail-body-in {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.event {
  transition: transform var(--transition), border-color var(--transition),
    box-shadow var(--transition);
}

.event:hover {
  border-color: var(--border-strong);
}

.event:focus-within {
  border-color: var(--border-strong);
}

.event__details[open] .event__details-body {
  animation: detail-body-in 180ms ease both;
}

.event__details-summary:focus-visible {
  color: var(--text-primary);
  border-radius: var(--radius-xs);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 30rem) {
  :root {
    --page-gutter: var(--space-3);
    --page-top: var(--space-5);
    --page-bottom: var(--space-7);
  }

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

  .location__panel {
    padding: var(--space-3);
  }

  .location__current {
    max-width: 8rem;
  }

  .event {
    padding: var(--space-5) var(--space-4) var(--space-4);
    border-radius: var(--radius-lg);
  }

  .event-skeleton {
    padding: var(--space-5) var(--space-4) var(--space-4);
    border-radius: var(--radius-lg);
  }
  .detail-row {
    grid-template-columns: minmax(5.5rem, 42%) minmax(0, 1fr);
  }

}

/* Smartphone compact layout: 360-430 px keep the header, day bar and both
   daily cards short enough that both score rings stay above the fold. */
@media (max-width: 26.875rem) {
  :root {
    --page-gutter: var(--space-3);
    --page-top: var(--space-4);
    --page-bottom: var(--space-6);
    --gap: var(--space-2);
  }

  header.site {
    padding: 0 0 var(--space-1);
  }

  header.site h1 {
    font-size: var(--text-lg);
  }

  .site__intro {
    display: none;
  }

  .status {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
  }

  .status[data-kind="loading"],
  .status[data-kind="error"] {
    padding: var(--space-1) var(--space-2);
  }

  .day {
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-2);
  }

  .day__arrow {
    min-width: 44px;
    min-height: 44px;
  }

  .day__label {
    font-size: var(--text-sm);
  }

  .day__dots {
    margin-top: var(--space-1);
  }

  .events {
    margin-top: var(--space-2);
    gap: var(--space-2);
  }

  .event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "score time"
      "score summary"
      "details details";
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }

  .event-skeleton {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }

  .event__head {
    grid-area: head;
    gap: var(--space-2);
  }

  .event__icon {
    width: 2rem;
    height: 2rem;
  }

  .event__icon-svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .event__kind {
    font-size: var(--text-md);
  }

  .score {
    grid-area: score;
    margin: 0;
    gap: 0;
  }

  .score-ring,
  .score-ring__svg {
    width: 5.25rem;
  }

  .score-ring__svg,
  .score-ring__center {
    height: 5.25rem;
  }

  .score-ring__value {
    font-size: 1.4rem;
  }

  .score-ring__scale {
    font-size: 0.5rem;
  }

  .score-ring__rating {
    font-size: var(--text-xs);
  }

  .score__value {
    display: none;
  }

  .event__time {
    grid-area: time;
    margin: 0;
    font-size: var(--text-sm);
  }

  .event__summary {
    grid-area: summary;
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: var(--text-xs);
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .event__details {
    grid-area: details;
    margin-top: 0;
    padding-top: 0;
  }

  .event__details-summary {
    min-height: 44px;
  }
}

/* Dedicated handset breakpoints. 360 px: tightest gutter and ring. */
@media (max-width: 22.5rem) {
  :root {
    --page-gutter: var(--space-2);
  }

  header.site h1 {
    font-size: var(--text-md);
  }

  .site__bar {
    gap: var(--space-1);
  }

  .location__current {
    max-width: 6.5rem;
  }

  .event {
    column-gap: var(--space-2);
  }

  .score-ring,
  .score-ring__svg {
    width: 4.75rem;
  }

  .score-ring__svg,
  .score-ring__center {
    height: 4.75rem;
  }

  .score-ring__value {
    font-size: 1.25rem;
  }
}

/* 390 px: standard handset width, roomier gutter and ring. */
@media (min-width: 22.51rem) and (max-width: 24.375rem) {
  :root {
    --page-gutter: var(--space-3);
  }

  .score-ring,
  .score-ring__svg {
    width: 5.25rem;
  }

  .score-ring__svg,
  .score-ring__center {
    height: 5.25rem;
  }
}

/* 430 px: large handset, widest gutter and largest compact ring. */
@media (min-width: 24.376rem) and (max-width: 26.875rem) {
  :root {
    --page-gutter: var(--space-4);
  }

  .score-ring,
  .score-ring__svg {
    width: 5.75rem;
  }

  .score-ring__svg,
  .score-ring__center {
    height: 5.75rem;
  }

  .event__summary {
    -webkit-line-clamp: 2;
  }
}

@media (min-width: 40rem) {
  header.site h1 {
    font-size: var(--text-2xl);
  }

  /* The per-day wrapper is always a grid (see .events__page above); repeat
     the display here so the two-column rule never depends on cascade order. */
  .events__page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .events__page > .event:only-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 40rem) {
  .detail-view {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(44rem, calc(100vw - 3rem));
    max-height: min(84vh, 46rem);
    border-bottom: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    transform: translate(-50%, calc(-50% + 1.25rem));
  }

  .detail-view::before {
    display: none;
  }

  .detail-view.is-open {
    transform: translate(-50%, -50%);
  }

  .detail-view__header {
    padding: var(--space-5) var(--space-5) var(--space-3);
  }

  .detail-view__body {
    padding: var(--space-5);
  }

  .detail-row {
    grid-template-columns: minmax(9rem, 32%) minmax(0, 1fr);
  }
}

/* Tablet: keep the side-by-side cards and arrow day bar, with a little more
   breathing room around the two-column grid. */
@media (min-width: 40rem) and (max-width: 63.9375rem) {
  :root {
    --page-gutter: var(--space-5);
  }

  .day {
    padding: var(--space-3) var(--space-5);
  }
}

/* Desktop: same multi-column presentation on a wider reading measure. */
@media (min-width: 64rem) {
  :root {
    --page-top: var(--space-8);
  }

  .app {
    max-width: 58rem;
  }

  .site__intro {
    max-width: 42rem;
  }

  .day {
    padding: var(--space-3) var(--space-5);
  }

  .event {
    padding: var(--space-6) var(--space-6) var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .status[data-kind="loading"]::before {
    animation: none;
  }

  .event:active,
  .day__arrow:active:not(:disabled),
  .location__trigger:active,
  .location__actions button:active:not(:disabled),
  .forecast-details__trigger:active,
  .detail-technical > summary:active,
  .classes__drawer summary:active,
  .detail-view__close:active {
    transform: none;
  }
  .detail-view,
  .detail-backdrop,
  .detail-view__body,
  .forecast-details__body,
  .detail-technical__body,
  .event__details-body {
    transition: none !important;
    animation: none !important;
  }
}

@media (min-width: 40rem) and (prefers-reduced-motion: reduce) {
  .detail-view {
    transform: translate(-50%, -50%);
  }
}