/* System Announcement Banner */
#system-announcement-banner {
  position: relative;
  width: 100%;
  z-index: 10000;
}

.system-announcement-banner {
  padding: 8px 16px;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.system-announcement-banner.hidden {
  display: none !important;
}

.system-announcement-banner.info {
  background: rgba(30, 58, 138, 0.95);
  color: #eff6ff;
}

.system-announcement-banner.warning {
  background: rgba(180, 83, 9, 0.95);
  color: #fffbeb;
}

.system-announcement-banner.critical {
  background: rgba(185, 28, 28, 0.95);
  color: #fef2f2;
}

.system-announcement-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.system-announcement-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.system-announcement-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

.system-announcement-btn.hidden {
  display: none !important;
}

.system-announcement-close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  padding: 0 4px;
}

.system-announcement-close:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  #system-announcement-banner {
    position: fixed;
    top: calc(var(--mobile-hud-height, 125px) + var(--sandbox-banner-height, 0px));
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 1280;
    transition: top 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.hud-scrolled #system-announcement-banner {
    top: calc(var(--mobile-hud-compact, 48px) + var(--sandbox-banner-height, 0px));
  }
}

/* Sandbox Guest Mode Banner */
#sandbox-banner {
  position: relative;
  width: 100%;
  z-index: 9999;
}

.sandbox-banner {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.9), rgba(124, 58, 237, 0.9));
  color: #ffffff;
  padding: 8px 16px;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sandbox-banner.hidden {
  display: none !important;
}

.sandbox-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.sandbox-banner-inner .hidden {
  display: none !important;
}

.sandbox-banner-link {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.sandbox-banner-link:hover {
  opacity: 0.85;
}

/* On mobile the HUD is pinned with position:fixed (see base.css), which
   takes it out of flow — so a normal-flow banner above it in the DOM ends
   up rendered at the same viewport top:0 and the two overlap. Pin the
   banner too and let --sandbox-banner-height (measured in app.js) push the
   HUD and page content down below it. On iOS, viewport-fit=cover extends
   content into the notch/Dynamic Island area, so add safe-area-inset-top
   padding to push the banner text below the status bar. */
@media (max-width: 768px) {
  #sandbox-banner {
    position: fixed;
    top: 0;
    left: 0;
  }

  .sandbox-banner {
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px 16px;
  }
}

/* Live HUD Header styling — desktop (sticky within the flex column) */
@media (min-width: 769px) {
  .live-hud {
    background: rgba(10, 11, 13, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: calc(12px + env(safe-area-inset-top, 0px)) 0 12px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    font-family: monospace;
    height: calc(var(--hud-height) + env(safe-area-inset-top, 0px));
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
}

.hud-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 100%;
  margin: 0 auto;
  white-space: nowrap;
  width: 100%;
  padding: 0 10px 0 14px;
  box-sizing: border-box;
}

.hud-left-zone {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

/* Desktop-only: a fixed flex row lets a long milestone name grow past
   available space and push the account pill past the viewport edge (the
   left zone is flex-shrink:0, so nothing stops it). Grid tracks fix that:
   the outer "logo"/"right" columns claim their content's width up front,
   and the milestone gets only what's left over in its minmax(0,1fr)
   middle column, so it shrinks (via its own overflow:hidden) instead of
   the account pill ever being squeezed off-canvas. Mobile keeps its own
   grid-template-areas layout below in the <=768px block, untouched.
   Placed after the .hud-left-zone flex rule above so display:contents
   wins on source order within this equal-specificity cascade. */
@media (min-width: 769px) {
  .hud-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo milestone right";
  }

  .hud-left-zone {
    display: contents;
  }

  .hud-branding {
    grid-area: logo;
  }

  .hud-section.milestone {
    grid-area: milestone;
  }

  .hud-right-zone {
    grid-area: right;
    margin-left: 0;
  }
}

.btn-save-shared-hud {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--accent-hotel, #a855f7);
  color: #ffffff;
  border: none;
  border-radius: var(--border-radius-sm, 6px);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-save-shared-hud:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-save-shared-hud.is-saved {
  background: rgba(168, 85, 247, 0.2);
  color: var(--accent-hotel, #a855f7);
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.btn-save-shared-hud.hidden {
  display: none !important;
}

.hud-account-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.hud-right-zone {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Pure layout grouping — weather and the account pill are two independent
   controls, not one module, so this holds no background/border of its own.
   Each child owns its own chip styling instead. */
.hud-status-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hud-branding {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hud-branding-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
}

.hud-branding h1 {
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.75px;
  font-family: 'Space Grotesk', sans-serif;
}

.hud-branding h1 span {
  color: var(--accent-flight, #00f2fe);
}

.hud-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hud-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Split-flap character styling */
.flap-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #ffffff;
  background: #111216;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  perspective: 150px;
  overflow: hidden;
  transform-style: preserve-3d;
  box-sizing: border-box;
}

/* Horizontal split line across the middle of the flap */
.flap-char::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.45);
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}

/* Specific sizing for the milestone countdown text flaps */
#hud-countdown-text .flap-char {
  font-size: 20px;
  width: 20px;
  height: 30px;
  margin: 0 1px;
}

/* Specific sizing for the countdown timer flaps */
#hud-countdown-timer .flap-char {
  font-size: 20px;
  width: 21px;
  height: 20px;
  margin: 0 0.5px;
  border-color: rgba(255, 255, 255, 0.12);
  background: #15161c;
}

.flap-char.flip {
  animation: flapFlip 0.25s ease-in-out;
}

@keyframes flapFlip {
  0% {
    transform: rotateX(0deg);
  }

  50% {
    transform: rotateX(-90deg);
    opacity: 0.7;
  }

  100% {
    transform: rotateX(0deg);
  }
}

/* Milestone Section in HUD */
.hud-section.milestone {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  container-type: inline-size;
  container-name: hud-milestone;
}

.hud-section.milestone .hud-label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  color: rgba(from var(--text-primary) r g b / 0.8);
  font-weight: bold;
}

#hud-countdown-text {
  display: flex;
  justify-content: flex-start;
  gap: 2px;
  min-height: 23px;
  font-weight: bold;
  color: #ffffff;
}

#hud-countdown-timer {
  display: flex;
  justify-content: flex-start;
  gap: 2px;
  min-height: 17px;
  font-size: 10px;
  color: #a1a1aa;
  opacity: 0.9;
}

/* Weather Section in HUD — owns its own chip chrome (rather than sharing a
   box with the account pill) so it stays legible against every theme while
   still reading as its own, separate control. */
.hud-section.weather {
  justify-self: end;
  flex-shrink: 0;
  background: rgba(18, 20, 28, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--border-radius-md);
  text-align: left;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 12px;
}

.hud-section.weather:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.hud-section.weather:disabled {
  cursor: default;
  opacity: 0.6;
}

.hud-section.weather:disabled:hover {
  background-color: rgba(18, 20, 28, 0.5);
  border-color: rgba(255, 255, 255, 0.06);
}

.hud-section.weather:active {
  transform: scale(0.98);
}

.header-weather-widget {
  font-size: 10px;
  color: #a1a1aa;
}

.weather-fallback-btn {
  background: transparent;
  border: none;
  color: var(--text-muted, #9ca3af);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.weather-fallback-btn:hover {
  color: var(--text-primary, #ffffff);
  background: rgba(255, 255, 255, 0.08);
}

/* Weather HUD Layout */
.weather-hud-layout {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
  color: #f3f4f6;
  white-space: nowrap;
}

.weather-hud-primary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
  max-width: 180px;
}

.weather-hud-temp-block {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weather-hud-temp {
  font-size: 26px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-primary);
}

.weather-hud-range {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 1.1;
  color: var(--text-primary);
  font-weight: bold;
}

.weather-hud-location {
  font-size: 12px;
  font-weight: bold;
  color: rgba(from var(--text-primary) r g b / 0.8);
  font-family: var(--font-sans);
  text-align: right;
  letter-spacing: 0.5px;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weather-hud-location.is-approx {
  border-bottom: 1px dotted rgba(255, 255, 255, 0.35);
  padding-bottom: 1px;
  animation: approxPulse 3s ease-in-out infinite;
  cursor: pointer;
}

.weather-hud-location.is-approx:hover {
  border-bottom-color: rgba(255, 255, 255, 0.7);
}

.weather-hud-offline-badge {
  font-size: 11px;
  opacity: 0.7;
  cursor: default;
  line-height: 1;
}

@keyframes approxPulse {

  0%,
  100% {
    opacity: 0.75;
    border-bottom-color: rgba(255, 255, 255, 0.2);
  }

  50% {
    opacity: 1;
    border-bottom-color: rgba(255, 255, 255, 0.6);
  }
}

.weather-hud-trends {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 1px;
}

.weather-hud-trend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 32px;
}

.weather-hud-trend-hour {
  font-size: 11px;
  font-weight: bold;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.weather-hud-trend-emoji {
  font-size: 18px;
  line-height: 1;
  margin: 1px 0;
}

.weather-hud-trend-temp {
  font-size: 12px;
  font-weight: bold;
}

.weather-hud-arrow {
  font-size: 14px;
  color: var(--text-primary);
  margin-top: 12px;
  align-self: center;
}

.command-pill .pill-avatar-icon {
  display: none;
  flex-shrink: 0;
}

/* ============================================================
   Narrow-Desktop HUD tiers
   Between the full-width layout and the <=768px mobile stack,
   the HUD has no room to grow — so it has to shed content instead.
   Each tier below sheds a bit more, narrowest-least-essential first,
   and never removes the account (command-pill) button itself.
   ============================================================ */

/* Tier 1: drop the farthest-out weather trend (e.g. 10PM) */
@media (max-width: 1180px) {
  .weather-hud-trends>*:nth-last-child(-n+2) {
    display: none !important;
  }
}

/* Tier 1.5: drop the middle trend too, leaving just the nearest hour.
   (The old "drop remaining trend" rule used to live in the tier-2 block
   below at this same 1040px breakpoint, but tier 3 already hides the
   whole .weather-hud-trends container at 1040px, so that per-item rule
   never actually had any visible effect — this gives it a breakpoint of
   its own so there's a real "down to one trend" step instead of jumping
   straight from two trends to none.) */
@media (max-width: 1100px) {
  .weather-hud-trends>*:nth-last-child(-n+4) {
    display: none !important;
  }
}

/* Tier 2: drop to just current conditions;
   "Add to My Trips" sheds its label like Visual/Markdown & Packing/Share do */
@media (max-width: 1040px) {
  .btn-save-shared-hud #hud-save-shared-text {
    display: none;
  }

  .btn-save-shared-hud {
    padding: 6px 8px;
  }

  /* Safety net: if the status group still can't fit everything on one line
     (e.g. save-shared button + weather + account pill all present at once),
     wrap onto a second line inside the pill rather than pushing the account
     button past the viewport edge. */
  .hud-status-group {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 4px;
    max-width: 100%;
  }
}

/* Tier 3: fully hide trends, deflate the status-group chrome, shrink the
   milestone tiles, and drop the account pill straight to icon + sync-dot.
   A "truncated name, partial weather" middle state was tried here and at
   the 900px cutoff this replaced — both reliably ran out of room before
   the next tier kicked in, since a real username plus a middling-length
   milestone don't leave much slack, and the wrap fallback would trigger
   inconsistently depending on content length. Going straight to icon-only
   as soon as tier 2 starts trimming removes that gap: the account button
   stays a single, predictable, always-fits size all the way down to the
   mobile breakpoint, and it never disappears or gets pushed off-canvas. */
@media (max-width: 1040px) {

  .weather-hud-trends,
  .weather-hud-arrow {
    display: none !important;
  }

  .hud-status-group {
    gap: 8px;
  }

  .hud-section.weather {
    padding: 4px 8px;
  }

  .command-pill .pill-avatar-icon {
    display: inline-flex;
  }

  .command-pill .pill-user-id {
    display: none;
  }

  .command-pill {
    padding: 6px 10px;
    gap: 6px;
  }
}

/* Desktop-only: shrink the flap characters as the milestone box's own
   rendered width gets tight, rather than at fixed viewport widths. A
   viewport breakpoint can't know how much of the row a signed-in user's
   name or the current weather-trend count are eating into — the same
   1050px window can have 500px or 300px free for the milestone depending
   on that content, and a fixed-size flap-clock will hard-clip mid-word
   (overflow:hidden on .hud-section.milestone) instead of shrinking to
   fit. Querying the container itself reacts to whatever actually
   happened to its available space. Mobile keeps its own separate sizing
   below.
   Thresholds are each class's own worst-case rendered width at that
   size (chars * (charWidth + margin*2 + gap) - gap), so a tier is only
   used once it's actually needed:
     short  (<=15 chars, worst 15)
     medium (16-22 chars, worst 22)
     long   (23-32 chars, worst 32 — HARD_MAX_CHARS in hud.js)
   Below ~420px, long-text is down to an 11px floor and can still clip
   on the longest (32-char) names — legibility bottoms out before the
   math does. That's an accepted rare edge case, not a full fix. */
@media (min-width: 769px) {
  @container hud-milestone (max-width: 620px) {

    #hud-countdown-text.long-text .flap-char,
    #hud-countdown-timer.long-text .flap-char {
      font-size: 16px;
      width: 16px;
      height: 24px;
      margin: 0 0.5px;
    }
  }

  @container hud-milestone (max-width: 530px) {

    #hud-countdown-text.medium-text .flap-char,
    #hud-countdown-timer.medium-text .flap-char {
      font-size: 16px;
      width: 16px;
      height: 24px;
      margin: 0 0.5px;
    }
  }

  @container hud-milestone (max-width: 500px) {

    #hud-countdown-text.long-text .flap-char,
    #hud-countdown-timer.long-text .flap-char {
      font-size: 13px;
      width: 13px;
      height: 19px;
      margin: 0 0.5px;
    }
  }

  @container hud-milestone (max-width: 420px) {

    #hud-countdown-text.medium-text .flap-char,
    #hud-countdown-timer.medium-text .flap-char {
      font-size: 13px;
      width: 13px;
      height: 19px;
      margin: 0 0.5px;
    }

    #hud-countdown-text.long-text .flap-char,
    #hud-countdown-timer.long-text .flap-char {
      font-size: 11px;
      width: 11px;
      height: 17px;
      margin: 0 0.5px;
    }
  }

  @container hud-milestone (max-width: 360px) {

    #hud-countdown-text.short-text .flap-char,
    #hud-countdown-timer.short-text .flap-char {
      font-size: 16px;
      width: 16px;
      height: 24px;
      margin: 0 0.5px;
    }

    #hud-countdown-text.medium-text .flap-char,
    #hud-countdown-timer.medium-text .flap-char {
      font-size: 11px;
      width: 11px;
      height: 17px;
      margin: 0 0.5px;
    }
  }

  @container hud-milestone (max-width: 280px) {

    #hud-countdown-text.short-text .flap-char,
    #hud-countdown-timer.short-text .flap-char {
      font-size: 13px;
      width: 13px;
      height: 19px;
      margin: 0 0.5px;
    }
  }
}

/* Mobile HUD overrides */
@media (max-width: 768px) {
  :root {
    --hud-height: 125px;
    --mobile-nav-height: 60px;
  }

  body.hud-scrolled {
    --mobile-nav-height: 44px;
  }

  .hud-inner {
    display: grid;
    grid-template-areas:
      "logo weather"
      "milestone milestone";
    grid-template-columns: 1fr auto;
    gap: 0px;
    align-items: center;
    padding: 10px 12px;
  }

  /* These wrapper divs exist for desktop flex layout only; on mobile the
     grid-template-areas above needs to address logo/milestone/weather
     directly, so let the wrappers drop out of the box tree. */
  .hud-left-zone,
  .hud-right-zone {
    display: contents;
  }

  .hud-branding {
    grid-area: logo;
    align-self: center;
  }

  .hud-branding h1 {
    font-size: 20px;
  }

  .hud-status-group {
    grid-area: weather;
    justify-self: end;
    align-self: center;
    gap: 8px;
    margin-right: -20px;
  }

  .hud-section.weather {
    justify-self: end;
    align-self: center;
    border-left: none;
    padding: 0px 10px 5px 10px;
    margin: 20px 0 -10px 0;
  }

  .btn-save-shared-hud {
    padding: 6px 8px;
    margin: 0;
  }

  .btn-save-shared-hud #hud-save-shared-text {
    display: none;
  }

  .hud-section.progress {
    display: none !important;
  }

  .hud-section.milestone {
    grid-area: milestone;
    width: 100%;
    margin-left: 0;
    min-width: unset;
    align-items: flex-start;
    margin-bottom: 15px;
  }

  /* Hide weather trends & arrows in the HUD header widget on mobile */
  .weather-hud-trends,
  .weather-hud-arrow {
    display: none !important;
  }

  /* Make sure the primary weather block is clean and has no gap since trends are hidden */
  .weather-hud-layout {
    gap: 0;
  }

  /* Stack weather info vertically with range in row under temp */
  .weather-hud-primary {
    align-items: flex-end;
    gap: 2px;
  }

  .weather-hud-temp-block {
    display: contents;
  }

  .weather-hud-temp {
    font-size: 19px;
    font-weight: 800;
  }

  .weather-hud-range {
    flex-direction: row;
    gap: 6px;
    font-size: 11px;
    line-height: 1;
    margin-bottom: 2px;
  }

  .weather-hud-location {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
  }

  /* Dynamic sizing for split-flap countdown characters based on length class */
  #hud-countdown-text {
    flex-wrap: wrap;
    gap: 1px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #hud-countdown-text.short-text .flap-char {
    font-size: 16px;
    width: 16px;
    height: 23px;
    margin: 0 0.5px;
  }

  #hud-countdown-text.medium-text .flap-char {
    font-size: 13px;
    width: 13px;
    height: 19px;
    margin: 0 0.5px;
  }

  #hud-countdown-text.long-text .flap-char {
    font-size: 11px;
    width: 11px;
    height: 16px;
    margin: 0 0.5px;
  }

  #hud-countdown-timer {
    flex-wrap: wrap;
    gap: 1px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #hud-countdown-timer .flap-char {
    font-size: 13px;
    width: 13px;
    height: 16px;
    margin: 0 0.5px;
  }
}

/* ============================================================
   Mobile HUD: Compact / Collapsed state (body.hud-scrolled)
   ============================================================ */
@media (max-width: 768px) {

  /* Smooth height collapse — height is already transitioned in base.css */
  body.hud-scrolled #hud.live-hud {
    overflow: hidden;
  }

  /* Collapse the inner grid to a single-row flex strip */
  body.hud-scrolled .hud-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 100%;
    overflow: hidden;
  }

  /* Keep logo visible but scaled down slightly */
  body.hud-scrolled .hud-branding h1 {
    font-size: 16px;
  }

  /* Hide the milestone countdown row and weather widget */
  body.hud-scrolled .hud-section.milestone,
  body.hud-scrolled .hud-section.weather {
    opacity: 0;
    pointer-events: none;
    width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }

  /* Logo shrinks to make room for the compact label, which then grows to
     fill whatever space is left in the collapsed strip instead of being
     capped at a fixed width — so it only truncates when it actually runs
     out of room, not before. */
  body.hud-scrolled .hud-branding {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Show a compact inline countdown beside the logo */
  body.hud-scrolled .hud-branding::after {
    content: attr(data-compact-label);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* --- Weather Details Popover --- */

/* Popover entry/exit transition using standard rules */
[popover]:popover-open {
  opacity: 1;
  transform: translateY(0) scale(1);

  @starting-style {
    opacity: 0;
    transform: translateY(-1px) scale(0.96);
  }
}

[popover] {
  opacity: 0;
  transform: translateY(-1px) scale(0.96);
  transition-property: opacity, transform, display, overlay;
  transition-duration: 0.28s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-behavior: allow-discrete;
}

#weather-popover {
  position: fixed;
  top: calc(var(--hud-height) + 12px);
  right: 24px;
  bottom: auto;
  left: auto;
  margin: 0;
  width: 350px;
  height: auto;
  max-width: calc(100vw - 48px);
  background: rgba(18, 20, 24, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  color: #ffffff;
  padding: 20px;
  font-family: 'Space Grotesk', sans-serif;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 1000;
}

.weather-popover-updated {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
  margin-bottom: 10px;
}

.weather-popover-location-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 242, 254, 0.08);
  border: 1px solid rgba(0, 242, 254, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.weather-popover-location-notice:hover {
  background: rgba(0, 242, 254, 0.15);
  border-color: rgba(0, 242, 254, 0.4);
}

.weather-popover-location-notice:active {
  transform: scale(0.98);
}

.weather-popover-offline-notice {
  cursor: default;
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.3);
}

.weather-popover-offline-notice:hover {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.3);
}

.weather-popover-offline-notice:active {
  transform: none;
}

.weather-popover-offline-notice .notice-text strong {
  color: #f3f4f6;
}

.weather-popover-location-notice .notice-icon {
  font-size: 16px;
}

.weather-popover-location-notice .notice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.weather-popover-location-notice .notice-text strong {
  color: var(--accent-flight, #00f2fe);
  font-size: 11px;
  font-weight: 700;
}

.weather-popover-location-notice .notice-text span {
  color: #a1a1aa;
  font-size: 10px;
}

.weather-popover-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.weather-popover-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.weather-popover-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.weather-popover-location {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #ffffff;
}

.weather-popover-close-btn {
  background: none;
  border: none;
  color: #a1a1aa;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.weather-popover-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.weather-popover-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.weather-popover-hero-emoji {
  font-size: 42px;
  line-height: 1;
}

.weather-popover-hero-temp-block {
  display: flex;
  flex-direction: column;
}

.weather-popover-hero-temp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weather-popover-hero-temp {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

.weather-popover-hero-feels {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  margin-left: auto;
  align-self: flex-end;
  margin-bottom: 4px;
  white-space: nowrap;
}

.weather-popover-hero-desc {
  font-size: 14px;
  font-weight: 500;
  color: #a1a1aa;
  margin-top: 4px;
}

/* Metrics Grid */
.weather-popover-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.weather-popover-metric-tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.weather-popover-metric-tile.full-width {
  grid-column: span 2;
}

.weather-popover-metric-tile .metric-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
  font-weight: bold;
}

.weather-popover-metric-tile .metric-value {
  font-size: 14px;
  font-weight: 600;
  color: #f4f4f5;
}

.aqi-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.aqi-good {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.aqi-moderate {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.aqi-unhealthy {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Hourly Forecast Section */
.weather-popover-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  color: #71717a;
  font-weight: bold;
  margin-bottom: 8px;
}

.weather-popover-hourly-container {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 18px;
  scrollbar-width: thin;
}

.weather-popover-hourly-container::-webkit-scrollbar {
  height: 4px;
}

.weather-popover-hourly-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

.weather-popover-hourly-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}

.weather-popover-hourly-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 52px;
  padding: 6px 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.weather-popover-hourly-item.current {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.weather-popover-hourly-time {
  font-size: 9px;
  color: #a1a1aa;
}

.weather-popover-hourly-emoji {
  font-size: 16px;
  line-height: 1;
}

.weather-popover-hourly-temp {
  font-size: 11px;
  font-weight: bold;
}

.weather-popover-hourly-precip {
  font-size: 8px;
  color: #60a5fa;
  display: none;
}

.weather-popover-hourly-precip.visible {
  display: block;
}

/* Footer & Buttons */
.weather-popover-footer {
  display: flex;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}

.weather-popover-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: background-color 0.2s, transform 0.1s;
}

.weather-popover-btn:active {
  transform: scale(0.97);
}

.weather-popover-btn.radar-link {
  background: rgba(0, 242, 254, 0.12);
  color: #00f2fe;
}

.weather-popover-btn.radar-link:hover {
  background: rgba(0, 242, 254, 0.2);
}

.weather-popover-refresh-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.weather-popover-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.weather-popover-refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Mobile responsive style for weather popover */
@media (max-width: 768px) {
  #weather-popover {
    top: calc(60px + env(safe-area-inset-top, 0px));
    right: 12px;
    max-width: calc(100vw - 24px);
  }

  /* Scrim behind the popover */
  body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }

  body:has(#weather-popover:popover-open)::after {
    opacity: 1;
    pointer-events: auto;
  }

  /* Hide default popover backdrop on mobile */
  #weather-popover::backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Obscure milestone widget inside the HUD */
  body:has(#weather-popover:popover-open) .hud-section.milestone {
    opacity: 0.15;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [popover] {
    transform: none !important;
    transition-duration: 0.1s;
  }

  @starting-style {
    [popover]:popover-open {
      transform: none !important;
    }
  }
}

/* ==========================================================================
   Roadtrip Theme Odometer HUD - css/hud.css
   ========================================================================== */
.theme-roadtrip .live-hud {
  background: #1e293b !important;
  /* Dark dashboard plastic */
  border-bottom: 4px solid #0f172a !important;
}

.theme-roadtrip .hud-branding h1 {
  color: #ffffff !important;
}

.theme-roadtrip .hud-branding h1 span {
  color: #F96A00 !important;
  /* Construction Orange logo accent */
}

/* Weather widget text sits on the same dark dashboard plastic as the rest of
   the live-hud, but --text-primary is tuned dark for roadtrip's light body
   surfaces — unreadable here without its own light override (mirrors the
   landing-page mockup fix in landing.css). */
.theme-roadtrip .live-hud .weather-hud-layout,
.theme-roadtrip .live-hud .weather-hud-temp,
.theme-roadtrip .live-hud .weather-hud-range,
.theme-roadtrip .live-hud .weather-hud-trend-hour,
.theme-roadtrip .live-hud .weather-hud-trend-temp,
.theme-roadtrip .live-hud .weather-hud-arrow {
  color: #ffffff !important;
}

.theme-roadtrip .live-hud .weather-hud-location {
  color: #cbd5e1 !important;
}

.theme-roadtrip .live-hud .weather-fallback-btn {
  color: #cbd5e1 !important;
}

.theme-roadtrip .live-hud .weather-fallback-btn:hover {
  color: #ffffff !important;
}

/* Compact collapsed-HUD countdown label sits on the same dark dashboard
   plastic as the rest of the live-hud, but the global roadtrip theme's
   --text-secondary is tuned dark for the light body surfaces, not this
   chrome — so it needs its own light override to stay readable. */
.theme-roadtrip .hud-branding::after {
  color: #cbd5e1 !important;
}

/* Bottom tab bar should read as part of the same dashboard chrome as the
   HUD rather than the light "sign" surface used by the rest of the app. */
.theme-roadtrip .mobile-nav {
  background-color: #1e293b !important;
  border-top: 4px solid #0f172a !important;
}

.theme-roadtrip .mobile-nav .nav-item {
  color: #cbd5e1 !important;
  stroke: #cbd5e1 !important;
}

.theme-roadtrip .mobile-nav .nav-item.active {
  color: #F96A00 !important;
}

.theme-roadtrip .mobile-nav .nav-item.active svg {
  stroke: #F96A00 !important;
}

.theme-roadtrip .hud-label {
  color: #cbd5e1 !important;
  /* High contrast light silver for dark dashboard header */
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* Mechanical Car Odometer Digit Cells */
.theme-roadtrip .flap-char {
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.9), 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  font-family: var(--font-mono) !important;
  font-weight: bold !important;
}

/* Hide the old split-flap horizontal line */
.theme-roadtrip .flap-char::after {
  display: none !important;
}

.theme-roadtrip .flap-char.flip {
  animation: odometerRoll 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes odometerRoll {
  0% {
    transform: translateY(-60%);
    opacity: 0.4;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.theme-roadtrip .transit-alert,
.theme-roadtrip .transit-alert-inline {
  background: var(--vms-bg, #111418) !important;
  color: var(--vms-amber, #FFB000) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 176, 0, 0.35) !important;
  border-left: 6px solid #F96A00 !important;
  border-image: repeating-linear-gradient(135deg,
      #F96A00 0px,
      #F96A00 8px,
      #111418 8px,
      #111418 16px) 1 100% left !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 0 6px rgba(255, 176, 0, 0.1) !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.theme-roadtrip .transit-alert-text,
.theme-roadtrip .transit-alert-inline span {
  color: var(--vms-amber, #FFB000) !important;
  font-family: var(--font-mono) !important;
  text-shadow: 0 0 4px rgba(255, 176, 0, 0.6) !important;
}

.theme-roadtrip .transit-alert-dismiss {
  border-color: var(--vms-amber, #FFB000) !important;
  background: rgba(255, 176, 0, 0.15) !important;
  color: var(--vms-amber, #FFB000) !important;
}

.theme-roadtrip .transit-alert-dismiss:hover {
  background: rgba(255, 176, 0, 0.3) !important;
}