/* ===== Explore forecast dock chrome (bust: explore-forecast-*) =====
 * OWNERSHIP: Now / Today / Feels / metric gutters / Today temp+icon.
 * Loads AFTER boatatlas-dark-atlas.inline.css so these dual-selector rules win.
 * Do NOT put Rain/Clouds/Play overlay spine styles here.
 * Source mirror also lives in src/styles/explore-v2-shell.css (Next bundle);
 * keep both in sync when changing dock chrome. See docs/explore/weather-overlays.md.
 */

/* Winning overrides for Now/Today dock (dual selectors for hydration lag). */
body.explore-v2 .insp-now,
.explore-v2 .insp-now,
body.atlas-scope.explore-v2 #insp-now {
  padding: 20px 36px 52px !important;
  box-sizing: border-box !important;
}
/*
 * NWS advisory chip — #wx-nws-alert is a leftover direct child of .insp-now.
 * With order:-1 + default grid stretch it stole column 1 and inflated into a
 * huge empty amber box above Tide. Keep it a compact banner row above the
 * summary / metrics / tide columns (same “do not steal a grid column” rule as
 * .insp-forecast-disclaimer). Dual-write: explore-v2-shell.css.
 */
body.explore-v2 .insp-now > .wx-nws-alert,
.explore-v2 .insp-now > .wx-nws-alert,
body.atlas-scope.explore-v2 #insp-now > #wx-nws-alert {
  grid-column: 1 / -1 !important;
  justify-self: start !important;
  align-self: start !important;
  width: max-content !important;
  max-width: min(100%, 420px) !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 0 8px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font: 600 11px/1.25 var(--font-ba-sans, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.explore-v2 .v2-now-summary,
.explore-v2 .v2-now-summary {
  display: flex !important;
  flex-direction: column !important;
  padding: 2px 24px 16px 8px !important;
  box-sizing: border-box !important;
}
body.explore-v2 .insp-now-range,
.explore-v2 .insp-now-range,
body.atlas-scope.explore-v2 #wx-now-range {
  display: flex !important;
  flex: 0 0 auto !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding-bottom: 28px !important;
  color: var(--x-muted, rgba(238, 246, 248, 0.72)) !important;
  font: 500 12px/1.25 var(--font-ba-sans, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: 0.01em !important;
  gap: 6px 12px !important;
}
body.explore-v2 .insp-now-range #wx-feels-now,
.explore-v2 .insp-now-range #wx-feels-now,
body.explore-v2 .insp-now-range #wx-hi,
.explore-v2 .insp-now-range #wx-hi,
body.explore-v2 .insp-now-range #wx-lo,
.explore-v2 .insp-now-range #wx-lo {
  color: var(--x-text, #f7fbfc) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}
/* Metric column gutters — keep text off the vertical rules (BA-341). */
body.explore-v2 .v2-now-metrics .inq,
.explore-v2 .v2-now-metrics .inq,
body.explore-v2 .v2-now-metrics .v2-live-metric,
.explore-v2 .v2-now-metrics .v2-live-metric {
  padding: 8px 20px !important;
  box-sizing: border-box !important;
}
body.explore-v2 .v2-now-metrics,
.explore-v2 .v2-now-metrics {
  padding: 0 14px 0 22px !important;
}
body.explore-v2 .v2-now-tide,
.explore-v2 .v2-now-tide {
  padding: 0 8px 0 20px !important;
  box-sizing: border-box !important;
}
body.explore-v2 .inspector.view-now.on,
.explore-v2 .inspector.view-now.on {
  height: 288px !important;
}

/* Today metric gutters — same vertical-rule clearance as Now. */
body.explore-v2 .v2-today-ready .wx-metric,
.explore-v2 .v2-today-ready .wx-metric {
  padding: 10px 16px !important;
  box-sizing: border-box !important;
}
body.explore-v2 .v2-today-ready .wx-metric .v,
.explore-v2 .v2-today-ready .wx-metric .v {
  padding-right: 8px !important;
  box-sizing: border-box !important;
}
body.explore-v2 .v2-today-ready .wx-metric .v .arrow.wind-dir,
.explore-v2 .v2-today-ready .wx-metric .v .arrow.wind-dir {
  flex-shrink: 0 !important;
}
@media (max-width: 900px) {
  /* Phone Today: 2-up; Wind value is tick + "18 kn" (no NNW letters). */
  body.explore-v2 .v2-today-ready .wx-metrics-primary,
  .explore-v2 .v2-today-ready .wx-metrics-primary,
  body.explore-v2 .v2-today-ready .wx-metrics-more,
  .explore-v2 .v2-today-ready .wx-metrics-more {
    grid-template-columns: 1fr 1fr !important;
    overflow-x: visible !important;
  }
  body.explore-v2 .v2-today-ready .wx-metric,
  .explore-v2 .v2-today-ready .wx-metric {
    padding: 10px 14px !important;
    overflow: visible !important;
  }
  body.explore-v2 .v2-today-ready .wx-metric:nth-child(even),
  .explore-v2 .v2-today-ready .wx-metric:nth-child(even) {
    border-right: 0 !important;
  }
  body.explore-v2 .v2-today-ready .wx-metric .v,
  .explore-v2 .v2-today-ready .wx-metric .v {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    padding-right: 8px !important;
  }
}

/* Today left summary: larger temp + weather icon. */
body.explore-v2 .v2-today-ready .wx-today-main .temp,
.explore-v2 .v2-today-ready .wx-today-main .temp,
body.atlas-scope.explore-v2 #wx-temp-today {
  font-size: 44px !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
body.explore-v2 .v2-today-ready .wx-today-main .insp-wicon,
.explore-v2 .v2-today-ready .wx-today-main .insp-wicon,
body.explore-v2 .v2-today-ready .wx-today-main .insp-wicon-lg,
.explore-v2 .v2-today-ready .wx-today-main .insp-wicon-lg,
body.atlas-scope.explore-v2 #wx-wicon-today {
  width: 58px !important;
  height: 50px !important;
  flex-shrink: 0 !important;
  display: grid !important;
  place-items: center !important;
}
body.explore-v2 .v2-today-ready .wx-today-main .insp-wicon svg,
.explore-v2 .v2-today-ready .wx-today-main .insp-wicon svg,
body.explore-v2 .v2-today-ready .wx-today-main .insp-wicon-lg svg,
.explore-v2 .v2-today-ready .wx-today-main .insp-wicon-lg svg,
body.atlas-scope.explore-v2 #wx-wicon-today svg {
  width: 54px !important;
  height: 46px !important;
  display: block !important;
}
body.explore-v2 .v2-today-ready .wx-today-main .cond,
.explore-v2 .v2-today-ready .wx-today-main .cond,
body.atlas-scope.explore-v2 #wx-cond-today {
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* ===== Living forecast-panel sky glyphs (Now / Today / Hourly / 7-Day) =====
 * Restored from known-good wx-sky-live loops. Forecast dock only — not overlay
 * spine or Motion Forecast scrub playback logic.
 */
body.explore-v2 .insp-wicon.wx-sky-live,
body.explore-v2 .insp-wicon-lg.wx-sky-live,
body.explore-v2 .v2-hour-icon.wx-sky-live,
body.explore-v2 .ba-v2-forecast-icon.wx-sky-live,
body.explore-v2 .ba-v2-glance-ico.wx-sky-live,
body.explore-v2 .ba-v2-glance-toggle-ico.wx-sky-live,
body.explore-v2 .wx-week-col .icon.wx-sky-live,
body.explore-v2 .wx-week-sidebar .icon.wx-sky-live {
  overflow: visible;
}

body.explore-v2 .insp-wicon.wx-sky-live .wx-sky-svg,
body.explore-v2 .insp-wicon-lg.wx-sky-live .wx-sky-svg,
body.explore-v2 .v2-hour-icon.wx-sky-live .wx-sky-svg,
body.explore-v2 .ba-v2-forecast-icon.wx-sky-live .wx-sky-svg,
body.explore-v2 .ba-v2-glance-ico.wx-sky-live .wx-sky-svg,
body.explore-v2 .ba-v2-glance-toggle-ico.wx-sky-live .wx-sky-svg,
body.explore-v2 .wx-week-col .icon.wx-sky-live .wx-sky-svg,
body.explore-v2 .wx-week-sidebar .icon.wx-sky-live .wx-sky-svg {
  overflow: visible;
}

body.explore-v2 .wx-sky-live .wx-sky-svg .wx-sky-rays,
body.explore-v2 .wx-sky-live .wx-sky-svg .wx-sky-cloud,
body.explore-v2 .wx-sky-live .wx-sky-svg .wx-sky-cloud-front,
body.explore-v2 .wx-sky-live .wx-sky-svg .wx-sky-sun,
body.explore-v2 .wx-sky-live .wx-sky-svg .wx-sky-drop,
body.explore-v2 .wx-sky-live .wx-sky-svg .wx-sky-flake,
body.explore-v2 .wx-sky-live .wx-sky-svg .wx-sky-bolts {
  transform-box: view-box;
}

body.explore-v2 .wx-sky-live .wx-sky-svg .wx-sky-rays {
  transform-origin: 20px 17px;
}
body.explore-v2 .wx-sky-live .wx-sky-svg .wx-sky-sun {
  transform-box: fill-box;
  transform-origin: center;
}
body.explore-v2 .wx-sky-live .wx-sky-svg .wx-sky-cloud,
body.explore-v2 .wx-sky-live .wx-sky-svg .wx-sky-cloud-front {
  transform-origin: 20px 16px;
}
body.explore-v2 .wx-sky-live .wx-sky-svg .wx-sky-drop,
body.explore-v2 .wx-sky-live .wx-sky-svg .wx-sky-flake {
  transform-origin: center;
}

/* Clear: slow rotating shine rays + soft sun pulse */
body.explore-v2 .wx-sky-live .wx-sky--clear .wx-sky-rays {
  animation: ba-fc-sky-rays-spin 15s linear infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--clear .wx-sky-sun {
  animation: ba-fc-sky-sun-shimmer 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Clear night: soft moon shimmer (no rays) */
body.explore-v2 .wx-sky-live .wx-sky--clear.wx-sky--night .wx-sky-moon {
  animation: ba-fc-sky-moon-shimmer 4.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transform-box: fill-box;
  transform-origin: center;
}
body.explore-v2 .wx-sky-live .wx-sky--clear.wx-sky--night .wx-sky-rays {
  animation: none;
}

/* Sunrise / sunset: gentle lift or settle on the horizon */
body.explore-v2 .wx-sky-live .wx-sky--sunrise .wx-sky-sun,
body.explore-v2 .wx-sky-live .wx-sky--clear.wx-sky--sunrise .wx-sky-sun {
  animation: ba-fc-sky-sunrise-lift 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}
body.explore-v2 .wx-sky-live .wx-sky--sunset .wx-sky-sun,
body.explore-v2 .wx-sky-live .wx-sky--clear.wx-sky--sunset .wx-sky-sun {
  animation: ba-fc-sky-sunset-dip 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}
body.explore-v2 .wx-sky-live .wx-sky--sunrise .wx-sky-rays,
body.explore-v2 .wx-sky-live .wx-sky--sunset .wx-sky-rays {
  animation: none;
}
body.explore-v2 .wx-sky-live .wx-sky--night .wx-sky-moon {
  animation: ba-fc-sky-moon-shimmer 4.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transform-box: fill-box;
  transform-origin: center;
}
body.explore-v2 .wx-sky-live .wx-sky--night .wx-sky-cloud-front {
  animation: ba-fc-sky-cloud-cross 5.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Partly: front cloud drifts across sun; sun soft-pulses */
body.explore-v2 .wx-sky-live .wx-sky--partly .wx-sky-cloud-front {
  animation: ba-fc-sky-cloud-cross 5.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--partly .wx-sky-sun {
  animation: ba-fc-sky-sun-shimmer 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Cloudy / overcast: layered L→R drift (back right, front left) */
body.explore-v2 .wx-sky-live .wx-sky--cloudy .wx-sky-cloud {
  animation: ba-fc-sky-cloud-drift 6.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--overcast .wx-sky-cloud ellipse:first-child {
  animation: ba-fc-sky-cloud-drift 6.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--overcast .wx-sky-cloud--front,
body.explore-v2 .wx-sky-live .wx-sky--overcast .wx-sky-cloud ellipse:nth-child(2) {
  animation: ba-fc-sky-cloud-drift-alt 7.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

body.explore-v2 .wx-sky-live .wx-sky--fog .wx-sky-cloud {
  animation: ba-fc-sky-fog-drift 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Rain: staggered drops + slow cloud drift */
body.explore-v2 .wx-sky-live .wx-sky--rain .wx-sky-drop--a {
  animation: ba-fc-sky-rain-fall 1.1s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--rain .wx-sky-drop--b {
  animation: ba-fc-sky-rain-fall 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--rain .wx-sky-drop--c {
  animation: ba-fc-sky-rain-fall 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--rain .wx-sky-cloud {
  animation: ba-fc-sky-cloud-drift 7s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

body.explore-v2 .wx-sky-live .wx-sky--snow .wx-sky-flake--a {
  animation: ba-fc-sky-flake-fall 1.45s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--snow .wx-sky-flake--b {
  animation: ba-fc-sky-flake-fall 1.45s cubic-bezier(0.22, 1, 0.36, 1) 0.28s infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--snow .wx-sky-flake--c {
  animation: ba-fc-sky-flake-fall 1.45s cubic-bezier(0.22, 1, 0.36, 1) 0.55s infinite;
}

body.explore-v2 .wx-sky-live .wx-sky--storm .wx-sky-bolts {
  animation: ba-fc-sky-bolt-pulse 1.75s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--storm .wx-sky-cloud {
  animation: ba-fc-sky-cloud-drift 6.3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes ba-fc-sky-rays-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ba-fc-sky-sun-shimmer {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.78; transform: scale(0.97); }
}
@keyframes ba-fc-sky-moon-shimmer {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.82; transform: scale(0.96); }
}
@keyframes ba-fc-sky-sunrise-lift {
  0%, 100% { transform: translateY(1.2px); opacity: 0.92; }
  50% { transform: translateY(-1.4px); opacity: 1; }
}
@keyframes ba-fc-sky-sunset-dip {
  0%, 100% { transform: translateY(-0.8px); opacity: 1; }
  50% { transform: translateY(1.6px); opacity: 0.88; }
}
@keyframes ba-fc-sky-cloud-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2.8px, -0.6px); }
}
@keyframes ba-fc-sky-cloud-drift-alt {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2.2px, 0.5px); }
}
@keyframes ba-fc-sky-cloud-cross {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-3.4px, 0.4px); }
}
@keyframes ba-fc-sky-fog-drift {
  0%, 100% { transform: translateX(0); opacity: 0.88; }
  50% { transform: translateX(3.2px); opacity: 0.58; }
}
@keyframes ba-fc-sky-rain-fall {
  0% { transform: translateY(-2.5px); opacity: 0.2; }
  30% { opacity: 0.98; }
  100% { transform: translateY(5.5px); opacity: 0.08; }
}
@keyframes ba-fc-sky-flake-fall {
  0% { transform: translate(0, -2px); opacity: 0.28; }
  40% { opacity: 0.98; }
  100% { transform: translate(1.4px, 4.2px); opacity: 0.12; }
}
@keyframes ba-fc-sky-bolt-pulse {
  0%, 68%, 100% { opacity: 0.5; }
  76% { opacity: 1; }
  84% { opacity: 0.35; }
  90% { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  body.explore-v2 .wx-sky-live .wx-sky-rays,
  body.explore-v2 .wx-sky-live .wx-sky-cloud,
  body.explore-v2 .wx-sky-live .wx-sky-cloud-front,
  body.explore-v2 .wx-sky-live .wx-sky-cloud--front,
  body.explore-v2 .wx-sky-live .wx-sky-drop,
  body.explore-v2 .wx-sky-live .wx-sky-flake,
  body.explore-v2 .wx-sky-live .wx-sky-bolts,
  body.explore-v2 .wx-sky-live .wx-sky-sun,
  body.explore-v2 .wx-sky-live .wx-sky-moon,
  body.explore-v2 .wx-sky-live .wx-sky--overcast .wx-sky-cloud ellipse {
    animation: none !important;
  }
}

/*
 * 7-day Marine charts sit below the day rail. When the dock is shorter than
 * the content, the week body must scroll (shell CSS also sets this).
 */
body.explore-v2.insp-view-week .inspector.view-week .wx-week {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-padding-bottom: 20px;
}

/*
 * Mutually exclusive Now / Today / 7D panels.
 * Mobile layout used to force #insp-now { display:flex !important } for every
 * view. The ID selector beat .inspector.view-today .insp-now { display:none },
 * so Today/7D left Now metrics stacked above Today content. Scope the flex
 * layout to view-now and re-assert hide with matching #insp-now specificity.
 * Dual-write: src/styles/explore-v2-shell.css.
 */
body.explore-v2 .inspector.view-today .insp-now,
.explore-v2 .inspector.view-today .insp-now,
body.explore-v2 .inspector.view-week .insp-now,
.explore-v2 .inspector.view-week .insp-now,
body.atlas-scope.explore-v2 .inspector.view-today #insp-now,
body.atlas-scope.explore-v2 .inspector.view-week #insp-now,
body.explore-v2.insp-view-today #insp-now,
body.explore-v2.insp-view-week #insp-now {
  display: none !important;
}

/* Mobile Now sheet — keep summary from flex-shrinking over Wind/Waves.
 * Dual-write: src/styles/explore-v2-shell.css @media (max-width: 900px). */
@media (max-width: 900px) {
  body.explore-v2 .inspector.view-now .insp-now,
  .explore-v2 .inspector.view-now .insp-now,
  body.atlas-scope.explore-v2 .inspector.view-now #insp-now,
  body.explore-v2.insp-view-now #insp-now {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 20px 24px !important;
  }

  body.explore-v2 .v2-now-summary,
  .explore-v2 .v2-now-summary {
    flex: 0 0 auto !important;
    min-height: min-content !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 4px 12px !important;
  }

  body.explore-v2 .v2-now-summary .insp-loc-head,
  body.explore-v2 .v2-now-summary .insp-now-main,
  body.explore-v2 .v2-now-summary .insp-factual,
  .explore-v2 .v2-now-summary .insp-loc-head,
  .explore-v2 .v2-now-summary .insp-now-main,
  .explore-v2 .v2-now-summary .insp-factual {
    flex: 0 0 auto !important;
    position: relative !important;
  }

  body.explore-v2 .v2-now-summary .insp-factual,
  .explore-v2 .v2-now-summary .insp-factual {
    max-width: none !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  body.explore-v2 .v2-now-metrics,
  .explore-v2 .v2-now-metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex: 0 0 auto !important;
    gap: 8px 16px !important;
    padding: 4px 0 8px !important;
  }

  body.explore-v2 .v2-now-metrics .inq,
  .explore-v2 .v2-now-metrics .inq,
  body.explore-v2 .v2-now-metrics .v2-live-metric,
  .explore-v2 .v2-now-metrics .v2-live-metric {
    padding: 4px 0 !important;
    border-right: 0 !important;
  }

  body.explore-v2 .v2-now-tide,
  .explore-v2 .v2-now-tide {
    flex: 0 0 auto !important;
    padding: 8px 0 0 !important;
  }

  body.explore-v2 .inspector.view-now.on.m-open,
  .explore-v2 .inspector.view-now.on.m-open {
    height: auto !important;
    max-height: none !important;
  }

  /* 7D model-split / marine agreement: readable tracks + facts on ~390px. */
  body.explore-v2 .wx-week-col .model-note,
  .explore-v2 .wx-week-col .model-note {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    pointer-events: auto !important;
  }
  body.explore-v2 .wx-model-compare,
  .explore-v2 .wx-model-compare {
    overflow: visible !important;
    max-height: none !important;
    min-width: 0 !important;
  }
  body.explore-v2 .wx-model-compare-head,
  .explore-v2 .wx-model-compare-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  body.explore-v2 .wx-model-compare-summary,
  .explore-v2 .wx-model-compare-summary {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-row,
  .explore-v2 .wx-model-compare .model-compare-row {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-areas:
      "name track"
      "facts facts" !important;
    gap: 6px 10px !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-name,
  .explore-v2 .wx-model-compare .model-compare-name {
    grid-area: name !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-track,
  .explore-v2 .wx-model-compare .model-compare-track {
    grid-area: track !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 6px !important;
    overflow: hidden !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-rain,
  .explore-v2 .wx-model-compare .model-compare-rain {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    display: block !important;
    min-width: 2px !important;
    background: #60a5fa !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-facts,
  .explore-v2 .wx-model-compare .model-compare-facts {
    grid-area: facts !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: left !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-axis,
  .explore-v2 .wx-model-compare .model-compare-axis {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 8px 10px !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-axis > span:not(.ticks),
  .explore-v2 .wx-model-compare .model-compare-axis > span:not(.ticks) {
    display: none !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-axis .ticks,
  .explore-v2 .wx-model-compare .model-compare-axis .ticks {
    grid-column: 2 !important;
  }
  body.explore-v2 .wx-hour-chart .hour-head,
  .explore-v2 .wx-hour-chart .hour-head {
    flex-wrap: wrap !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  body.explore-v2 .wx-hour-chart .hour-cap,
  .explore-v2 .wx-hour-chart .hour-cap {
    white-space: normal !important;
    min-width: 0 !important;
  }
  body.explore-v2 .wx-hour-chart .hour-best,
  .explore-v2 .wx-hour-chart .hour-best {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    text-align: left !important;
    color: #12B886 !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }
}