/* =========================================================================
   What's Happnen — hand-authored stylesheet (no build step, no Tailwind).
   Mobile-first, bold, saturated, Sonoran-desert inspired.
   The whole palette is driven by [data-time-phase="morning"|"afternoon"|"sunset"|"night"],
   which is set on <html> server-side and updated live by the TimePhase hook.
   Primary controls retain solid surfaces; scenic header text uses phase-aware tones.
   ========================================================================= */

/* ---------- tokens: shared ---------- */

:root {
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 22px;
  --tap: 44px;
  --gutter: 16px;
  --font-sans: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --phase-ease: 480ms cubic-bezier(0.22, 0.68, 0.32, 1);
}

/* ---------- tokens: morning — first Phoenix light, soft warm desert glow ---------- */

[data-time-phase="morning"] {
  --link: #6d2504;
  --sky: #6cc5f5;
  --sky-2: #ffd7a3;
  --sky-mid: #a9dcf3;
  --on-sky: #0e1e2c;
  --surface: #fffdf8;
  --surface-2: #ffeedc;
  --ink: #14202e;
  --ink-muted: #2f4157;
  --accent: #f4782b;
  --accent-2: #ffc861;
  --on-accent: #2a1300;
  --line: rgba(20, 32, 46, 0.16);
  --shadow: rgba(120, 88, 52, 0.22);
  --wash: rgba(255, 172, 92, 0.2);
  --body-grad:
    linear-gradient(
      180deg,
      rgba(84, 182, 240, 0.5) 0%,
      rgba(158, 214, 244, 0.42) 16%,
      rgba(255, 196, 132, 0.44) 33%,
      rgba(255, 226, 190, 0.24) 50%,
      rgba(0, 0, 0, 0) 70%
    );
  --cat-music: #8f6fef;
  --cat-sports: #14b877;
  --cat-arts-theatre: #e15fa8;
  --cat-food-drink: #d98800;
  --cat-family: #1aa5d6;
  --cat-film: #c99700;
  --cat-community: #6aa32f;
}

/* ---------- tokens: afternoon — full Arizona daylight, clear saturated sky ---------- */
/* `day` is the pre-four-phase token and is kept as an alias so older clients,
   cached payloads and existing tests all keep resolving to this palette. */

[data-time-phase="afternoon"],
[data-time-phase="day"] {
  --link: #0f4c86;
  --sky: #1b9df0;
  --sky-2: #7fd4ff;
  --sky-mid: #46b7f7;
  --on-sky: #05121f;
  --surface: #ffffff;
  --surface-2: #e9f4ff;
  --ink: #08101d;
  --ink-muted: #293b55;
  --accent: #ff9f1c;
  --accent-2: #ffd166;
  --on-accent: #2a1500;
  --line: rgba(8, 16, 29, 0.16);
  --shadow: rgba(9, 40, 80, 0.2);
  --wash: rgba(27, 157, 240, 0.14);
  --body-grad:
    linear-gradient(
      180deg,
      rgba(20, 138, 232, 0.5) 0%,
      rgba(78, 186, 246, 0.34) 20%,
      rgba(158, 218, 255, 0.18) 38%,
      rgba(0, 0, 0, 0) 60%
    );
  --cat-music: #a78bff;
  --cat-sports: #3ddc97;
  --cat-arts-theatre: #ff7ac8;
  --cat-food-drink: #ffb020;
  --cat-family: #4fd1ff;
  --cat-film: #ffd166;
  --cat-community: #a0e85b;
}

/* ---------- tokens: sunset — magenta to tangerine desert, violet horizon ---------- */

[data-time-phase="sunset"] {
  --link: #500e29;
  --sky: #ff3d7f;
  --sky-2: #ffb94f;
  --sky-mid: #ff7a3d;
  --on-sky: #2b0a2f;
  --surface: #fff6ec;
  --surface-2: #ffe6d2;
  --ink: #340a2e;
  --ink-muted: #470d2c;
  --accent: #ff7a3d;
  --accent-2: #ffd166;
  --on-accent: #2b0a2f;
  --line: rgba(52, 10, 46, 0.18);
  --shadow: rgba(122, 26, 63, 0.24);
  --wash: rgba(255, 61, 127, 0.16);
  --body-grad:
    linear-gradient(
      180deg,
      rgba(108, 42, 138, 0.62) 0%,
      rgba(214, 54, 122, 0.58) 12%,
      rgba(255, 92, 84, 0.54) 26%,
      rgba(255, 148, 62, 0.46) 40%,
      rgba(255, 196, 142, 0.26) 58%,
      rgba(0, 0, 0, 0) 78%
    );
  --cat-music: #c39bff;
  --cat-sports: #4fdca0;
  --cat-arts-theatre: #ff8cc6;
  --cat-food-drink: #ffb531;
  --cat-family: #6ed6ff;
  --cat-film: #ffd979;
  --cat-community: #b2ea6a;
}

/* ---------- tokens: night — deep indigo + neon cactus ---------- */

[data-time-phase="night"] {
  --link: #3dffb0;
  --sky: #0b1030;
  --sky-2: #241b54;
  --sky-mid: #17164a;
  --on-sky: #eeecff;
  --surface: #12173a;
  --surface-2: #1c2252;
  --ink: #f4f2ff;
  --ink-muted: #c2bdf0;
  --accent: #3dffb0;
  --accent-2: #ff4fa3;
  --on-accent: #04122a;
  --line: rgba(238, 236, 255, 0.2);
  --shadow: rgba(0, 0, 0, 0.55);
  --wash: rgba(61, 255, 176, 0.12);
  --body-grad:
    linear-gradient(
      180deg,
      rgba(8, 10, 40, 0.6) 0%,
      rgba(42, 30, 96, 0.34) 24%,
      rgba(28, 34, 82, 0.16) 44%,
      rgba(0, 0, 0, 0) 66%
    );
  --cat-music: #b69bff;
  --cat-sports: #3dffb0;
  --cat-arts-theatre: #ff7abf;
  --cat-food-drink: #ffc24d;
  --cat-family: #7fe3ff;
  --cat-film: #ffe08a;
  --cat-community: #b6ff6b;
}

/* ---------- tokens: weather modifiers ----------
   Time of day owns the palette; weather only nudges two things — how far the
   sky glow reaches, and a very light scrim over the whole page. Neither touches
   --ink, --surface or --on-* , so every text/background pair keeps the contrast
   it was signed off with regardless of the conditions outside. */

:root {
  --wx-glow: 1;
  --wx-scrim: rgba(0, 0, 0, 0);
}

[data-weather="clear"] {
  --wx-glow: 1.18;
  --wx-scrim: rgba(0, 0, 0, 0);
}

[data-weather="partly-cloudy"] {
  --wx-glow: 0.86;
  --wx-scrim: rgba(184, 192, 204, 0.05);
}

[data-weather="cloudy"] {
  --wx-glow: 0.62;
  --wx-scrim: rgba(148, 157, 172, 0.11);
}

[data-weather="precip"] {
  --wx-glow: 0.72;
  --wx-scrim: rgba(44, 56, 76, 0.26);
}

/* A clear desert night wants to read crisper, not brighter: the scrim goes
   negative-space dark and the glow tightens around the mint accent. */
[data-time-phase="night"][data-weather="clear"] {
  --wx-glow: 1.05;
  --wx-scrim: rgba(2, 4, 18, 0.18);
}

[data-time-phase="night"][data-weather="cloudy"],
[data-time-phase="night"][data-weather="precip"] {
  --wx-scrim: rgba(30, 36, 62, 0.2);
}

/* Rain over a light phase pulls the whole page toward slate, which costs the
   12px meta text some of its headroom. These are the only weather rules that
   touch a text token, and they only ever deepen it — never lighten it — so the
   AA floor holds in all 32 phase x condition combinations. */
[data-time-phase="afternoon"][data-weather="precip"],
[data-time-phase="day"][data-weather="precip"] {
  --ink-muted: #1b2a3f;
  --link: #093057;
}

[data-time-phase="sunset"][data-weather="precip"] {
  --ink-muted: #30071d;
  --link: #2a0512;
}

[data-time-phase="morning"][data-weather="precip"] {
  --ink-muted: #24354a;
}

/* ---------- reset + base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--surface-2);
}

body,
h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

.hp-body {
  font-family: var(--font-sans);
  color: var(--ink);
  /* The solid colour sits underneath and is the layer that actually animates —
     CSS cannot interpolate between two gradients, so every layer above it is
     translucent and the eased background-color carries the phase change. */
  background-color: var(--surface);
  background-image:
    linear-gradient(0deg, var(--wx-scrim), var(--wx-scrim)),
    radial-gradient(
      calc(120% * var(--wx-glow)) calc(60% * var(--wx-glow)) at 50% 0%,
      var(--wash) 0%,
      rgba(0, 0, 0, 0) 62%
    ),
    var(--body-grad),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 46%, var(--surface-2) 100%);
  background-attachment: fixed;
  min-height: 100dvh;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
}

html,
body,
.hp-card,
.hp-pill,
.hp-btn,
.hp-chip,
.hp-top,
.hp-panel,
.hp-planman,
.hp-filterpanel,
.hp-nav,
.hp-search__form,
.hp-empty,
.hp-plan__item {
  transition:
    background-color var(--phase-ease),
    background-image var(--phase-ease),
    color var(--phase-ease),
    border-color var(--phase-ease),
    box-shadow var(--phase-ease);
}

.hp-hook {
  display: none;
}

.hp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
  z-index: 50;
}

.hp-skip:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- shell ---------- */

.hp-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter) calc(150px + env(safe-area-inset-bottom));
}

.hp-main {
  display: block;
}

.hp-footer {
  padding: 28px 4px 8px;
  border-top: 2px dashed var(--line);
  margin-top: 32px;
}

.hp-footer__line {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.hp-footer__line--muted {
  margin-top: 6px;
  font-weight: 500;
  color: var(--ink-muted);
}

/* ---------- icons ---------- */

.hp-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.hp-icon--xs {
  width: 15px;
  height: 15px;
}

.hp-icon--sm {
  width: 18px;
  height: 18px;
}

.hp-icon--lg {
  width: 40px;
  height: 40px;
}

.hp-icon--xl {
  width: 56px;
  height: 56px;
}

/* ---------- buttons ---------- */

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 12px 18px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hp-btn--primary {
  background-image: linear-gradient(135deg, var(--sky) 0%, var(--sky-mid) 55%, var(--sky-2) 100%);
  color: var(--on-sky);
  box-shadow: 0 8px 0 -2px var(--shadow), 0 14px 26px -14px var(--shadow);
}

.hp-btn--accent {
  background-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 0 -2px var(--shadow);
}

.hp-btn--ghost {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.hp-btn--danger {
  background-color: #d81f4a;
  color: #ffffff;
}

.hp-btn:active {
  transform: translateY(2px);
}

/* ---------- flashes ---------- */

/* Flashes sit above the bottom navigation rather than at the top: at the top they covered
   the location and radius controls, which have to stay visible. */
.hp-flash-group {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.hp-flash {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--surface);
  box-shadow: 0 18px 32px -18px var(--shadow);
  cursor: pointer;
}

.hp-flash--error {
  background: #8a0f36;
  color: #fff5f8;
}

.hp-flash__title {
  font-weight: 800;
  font-size: 15px;
}

.hp-flash__msg {
  font-size: 15px;
  font-weight: 600;
}

.hp-flash__close {
  margin-left: auto;
  background: none;
  border: 0;
  color: inherit;
  min-width: 32px;
  min-height: 32px;
  cursor: pointer;
}

/* ---------- top bar: place, radius, centred brand ---------- */

.hp-top {
  display: grid;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 0 0;
}

.hp-top__place {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-width: 0;
}

.hp-top__city {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  min-width: 0;
}

.hp-top__city-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-top__radius {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-muted);
  min-height: 32px;
}

.hp-top__radius-select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-muted);
  cursor: pointer;
  max-width: 42vw;
}

/* Native option lists paint with the OS palette, so they need explicit colours
   or the night phase renders light text on a light popup. */
.hp-top__radius-select option {
  background: var(--surface);
  color: var(--ink);
}

.hp-top__caret {
  color: var(--ink-muted);
  margin-left: -3px;
}

.hp-top__geo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}

.hp-top__geo-retry {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}

.hp-top__brand {
  display: flex;
  justify-content: center;
}

.hp-top__logo {
  width: 176px;
  height: auto;
}

/* ---------- greeting ---------- */

.hp-greeting {
  margin-top: 14px;
  text-align: center;
}

.hp-greeting__title {
  font-size: clamp(27px, 8.4vw, 46px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}

.hp-greeting__sub {
  margin-top: 8px;
  font-size: clamp(14.5px, 4vw, 19px);
  font-weight: 600;
  color: var(--ink-muted);
  text-wrap: balance;
}

.hp-greeting__accent {
  color: var(--accent);
  font-weight: 800;
}

/* ---------- search + filter button ---------- */

.hp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.hp-search__form {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 14px 30px -22px var(--shadow);
}

.hp-search__glyph {
  color: var(--ink-muted);
}

.hp-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  /* 16px keeps iOS Safari from zooming the viewport on focus. */
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.hp-search__input::placeholder {
  color: var(--ink-muted);
  font-weight: 500;
  opacity: 0.85;
}

.hp-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.hp-search__input:focus {
  outline: none;
}

.hp-search__form:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.hp-search__clear {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
  cursor: pointer;
}

.hp-search__filter {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  cursor: pointer;
  box-shadow: 0 14px 26px -18px var(--shadow);
}

.hp-search__filter--on {
  background: var(--accent);
  color: var(--on-accent);
}

/* Night inverts --ink and --surface, so the dark chip needs its own pair. */
[data-time-phase="night"] .hp-search__filter {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}

[data-time-phase="night"] .hp-search__filter--on {
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
}

/* ---------- quick actions ---------- */

.hp-quick {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  /* Bleed to the viewport edge so the row scrolls edge-to-edge on a phone. */
  margin-inline: calc(var(--gutter) * -1);
  padding: 2px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hp-quick::-webkit-scrollbar {
  display: none;
}

.hp-quick__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
}

.hp-quick__btn--on:not(.hp-quick__btn--now) {
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
}

.hp-quick__btn--now {
  background: var(--ink);
  color: var(--surface);
  border-color: transparent;
  font-weight: 800;
}

[data-time-phase="night"] .hp-quick__btn--now {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}

.hp-quick__date {
  flex: 0 0 auto;
  display: flex;
}

.hp-quick__btn--date {
  position: relative;
  overflow: hidden;
}

/* The native picker sits invisibly over its own pill so one tap opens it. */
.hp-quick__date-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- results panel ---------- */

.hp-panel {
  margin-top: 18px;
  padding: 16px 14px 18px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 26px 52px -34px var(--shadow);
}

[data-time-phase="night"] .hp-panel {
  background: rgba(18, 23, 58, 0.84);
  border-color: rgba(244, 242, 255, 0.16);
  backdrop-filter: blur(10px);
}

.hp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  /* Long window titles ('WHAT'S HAPPNEN THIS WEEKEND') push the link to its own line
     instead of overlapping it. */
  flex-wrap: wrap;
}

.hp-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
  font-size: clamp(13px, 3.6vw, 19px);
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.hp-panel__bolt {
  color: var(--accent);
}

.hp-panel__all {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}

.hp-panel__all-more {
  display: none;
}

@media (min-width: 360px) {
  .hp-panel__all {
    font-size: 13px;
  }

  .hp-panel__all-more {
    display: inline;
  }
}

.hp-panel__count {
  color: var(--ink-muted);
  font-weight: 700;
}

.hp-panel__sub {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

/* ---------- horizontal card rail ---------- */

.hp-rail {
  position: relative;
  margin-top: 14px;
}

.hp-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% - 34px);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
  margin: -2px -2px 0;
}

.hp-rail__track::-webkit-scrollbar {
  display: none;
}

.hp-rail__track > .hp-card {
  scroll-snap-align: start;
}

.hp-rail__nav {
  display: none;
}

.hp-rail__nav--off {
  opacity: 0.3;
  pointer-events: none;
}

/* ---------- expanded grid ---------- */

.hp-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- cards ---------- */

.hp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 16px 34px -26px var(--shadow);
  overflow: hidden;
}

[data-time-phase="night"] .hp-card {
  background: var(--surface-2);
}

.hp-card--promoted {
  border-color: var(--accent);
}

.hp-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(140deg, var(--surface-2) 0%, var(--sky-2) 120%);
}

/* Provider artwork is third-party and can 404, rate-limit, or be region-blocked.
   Zeroing the text metrics hides the broken-image alt text without hiding the
   alt attribute itself from assistive technology. LiveView re-patches server
   attributes, so this has to stay a CSS-only fix. */
.hp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

/* Legacy hook kept so a card without JS still degrades to the media gradient rather
   than a broken-image glyph. The runtime path swaps in a branded plate instead. */
.hp-card__img--fallback {
  display: grid;
  place-items: center;
  color: var(--ink-muted);
}

.hp-card__badge {
  position: absolute;
  left: 9px;
  top: 9px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.7);
}

.hp-card__tools {
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hp-card__tool {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #0b1030;
  cursor: pointer;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.6);
}

/* Grows the hit area to the 44px minimum without growing the visible circle. */
.hp-card__tool::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
}

.hp-card__tool--on {
  background: var(--accent);
  color: var(--on-accent);
}

.hp-sponsored {
  position: absolute;
  left: 9px;
  bottom: 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #0b1030;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hp-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px 12px;
  min-width: 0;
}

.hp-card__title {
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hp-card__when {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
}

.hp-card__venue {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-card__foot {
  margin-top: auto;
  padding-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hp-card__dist {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
}

.hp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.hp-chip--free {
  background: rgba(23, 178, 106, 0.16);
  color: #0f7a47;
}

.hp-chip--paid {
  background: rgba(43, 120, 255, 0.14);
  color: #1d5fd8;
}

.hp-chip--unknown {
  background: var(--surface-2);
  color: var(--ink-muted);
}

.hp-chip--category {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--cat, var(--line));
}

[data-time-phase="night"] .hp-chip--free {
  background: rgba(61, 255, 176, 0.16);
  color: #6bffc4;
}

[data-time-phase="night"] .hp-chip--paid {
  background: rgba(143, 182, 255, 0.18);
  color: #b9cdff;
}

/* ---------- Planman promotion ---------- */

.hp-planman {
  margin-top: 18px;
  padding: 16px;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(135deg, #ffe3c6 0%, #fff6ea 62%, #ffeeda 100%);
  color: #0b1030;
  box-shadow: 0 26px 52px -34px var(--shadow);
}

[data-time-phase="night"] .hp-planman {
  background: rgba(18, 23, 58, 0.86);
  border-color: rgba(244, 242, 255, 0.18);
  color: var(--ink);
}

.hp-planman__brand {
  display: flex;
  justify-content: center;
}

.hp-planman__badge {
  width: 148px;
  height: auto;
}

.hp-planman__copy {
  min-width: 0;
}

.hp-planman__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hp-planman__body {
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0.74;
}

.hp-planman__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #0b1030;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 16px 30px -20px rgba(11, 16, 48, 0.8);
}

[data-time-phase="night"] .hp-planman__cta {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(244, 242, 255, 0.42);
  box-shadow: none;
}

/* ---------- plan strip ---------- */

.hp-planstrip {
  margin-top: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.hp-planstrip__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
}

.hp-planstrip__link {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
}

/* ---------- filter panel ---------- */

.hp-filterpanel {
  margin-top: 12px;
  padding: 14px;
  display: grid;
  gap: 12px;
  justify-items: start;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 22px 44px -30px var(--shadow);
}

[data-time-phase="night"] .hp-filterpanel {
  background: rgba(18, 23, 58, 0.9);
  border-color: rgba(244, 242, 255, 0.16);
}

.hp-filterpanel__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hp-filterpanel__title {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hp-filterpanel__close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
  cursor: pointer;
}

.hp-filterpanel__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hp-filterpanel__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--cat, transparent);
}

.hp-pill--on {
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
  box-shadow: none;
}

.hp-filterpanel__radius {
  width: 100%;
  display: grid;
  gap: 6px;
}

.hp-filterpanel__range {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  height: 28px;
  cursor: pointer;
}

.hp-filterpanel__range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.hp-filterpanel__range::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.hp-filterpanel__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border-radius: 999px;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 6px 14px -8px var(--shadow);
}

.hp-filterpanel__range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  border: 3px solid var(--surface);
}

/* ---------- bottom navigation ---------- */

.hp-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 40;
  width: calc(100% - 20px);
  max-width: 620px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  padding: 8px 2px 6px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 22px 44px -22px var(--shadow);
}

[data-time-phase="night"] .hp-nav {
  background: rgba(18, 23, 58, 0.94);
  border-color: rgba(244, 242, 255, 0.16);
  backdrop-filter: blur(12px);
}

.hp-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 46px;
  padding: 2px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-muted);
  text-decoration: none;
  cursor: pointer;
}

.hp-nav__glyph {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.hp-nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-nav__item--on {
  color: var(--accent);
}

.hp-nav__item--on .hp-nav__glyph {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.hp-nav__item--off {
  opacity: 0.42;
  cursor: not-allowed;
}

.hp-nav__fab {
  position: relative;
  justify-self: center;
  width: 50px;
  height: 50px;
  /* Raised above the bar without changing the bar's own height. */
  top: -12px;
  margin-bottom: -12px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  box-shadow: 0 14px 26px -12px var(--shadow);
}

.hp-nav__badge {
  position: absolute;
  top: -2px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 9.5px;
  font-weight: 900;
}

/* ---------- empty + skeleton ---------- */

.hp-empty {
  text-align: center;
  padding: 34px 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 3px dashed var(--line);
  display: grid;
  justify-items: center;
  gap: 10px;
}

.hp-empty__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--on-accent);
}

.hp-empty__title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.hp-empty__body {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-muted);
  max-width: 34ch;
}

.hp-skeletons {
  display: grid;
  gap: 16px;
}

.hp-skeleton {
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 2px solid var(--line);
  overflow: hidden;
}

.hp-skeleton__media {
  aspect-ratio: 16 / 9;
  background-image: linear-gradient(
    100deg,
    var(--surface-2) 20%,
    var(--wash) 42%,
    var(--surface-2) 64%
  );
  background-size: 220% 100%;
  animation: hp-shimmer 1400ms linear infinite;
}

.hp-skeleton__lines {
  padding: 16px;
  display: grid;
  gap: 10px;
}

.hp-skeleton__line {
  height: 16px;
  border-radius: 999px;
  background-image: linear-gradient(
    100deg,
    var(--surface-2) 20%,
    var(--wash) 42%,
    var(--surface-2) 64%
  );
  background-size: 220% 100%;
  animation: hp-shimmer 1400ms linear infinite;
}

.hp-skeleton__line--sm {
  width: 40%;
  height: 13px;
}

.hp-skeleton__line--lg {
  width: 88%;
  height: 28px;
}

@keyframes hp-shimmer {
  from {
    background-position: 180% 0;
  }
  to {
    background-position: -60% 0;
  }
}

/* ---------- plan page ---------- */

.hp-plan {
  padding-bottom: 20px;
}

.hp-planner {
  padding: 20px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
}

.hp-planner h2 { font-size: 24px; margin-bottom: 8px; }
.hp-planner__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.hp-planner__fields label {
  display: grid;
  gap: 6px;
  font-weight: 700;
  min-width: 0;
}
.hp-planner__fields input,
.hp-planner__fields select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  font: inherit;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
}
.hp-planner__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.hp-planner__hint { color: var(--ink-muted); line-height: 1.5; margin: 12px 0; }
.hp-planner__status { color: var(--ink); line-height: 1.5; margin: 16px 0; font-weight: 700; }
.hp-planman-reaction {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.4;
}
.hp-planman-reaction img {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  object-fit: contain;
}
.hp-planman-reaction p { margin: 0; }
.hp-plan__item-body { min-width: 0; }
.hp-planner-option { padding: 20px 0; border-top: 1px solid var(--line); margin-top: 20px; }
.hp-planner-option h3 { font-size: 20px; overflow-wrap: anywhere; }
.hp-planner-option p { margin: 10px 0; line-height: 1.5; overflow-wrap: anywhere; }
.hp-planner-option .hp-btn {
  display: inline-flex;
  margin-top: 8px;
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  text-decoration: none;
}
.hp-plan__event, .hp-plan__venue { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .hp-planner__fields { grid-template-columns: minmax(0, 1fr); }
  .hp-planner__actions .hp-btn { flex: 1 1 auto; }
  .hp-planman-hero__badge { width: 58px; height: 58px; }
  .hp-planman-hero { align-items: flex-start; gap: 10px; }
}

.hp-plan__header {
  margin: 0 calc(-1 * var(--gutter)) 20px;
  padding: calc(20px + env(safe-area-inset-top)) var(--gutter) 22px;
  background-image: linear-gradient(120deg, var(--sky) 0%, var(--sky-mid) 55%, var(--sky-2) 100%);
  color: var(--on-sky);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.hp-planman-hero {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hp-planman-hero__badge {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.2));
}

.hp-planman-hero__copy { min-width: 0; }

.hp-planman-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 13px;
  font-weight: 800;
}

.hp-planman-thinking__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: hp-planman-pulse 1s ease-in-out infinite alternate;
}

@keyframes hp-planman-pulse {
  from { opacity: 0.35; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1.15); }
}

.hp-plan__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 900;
}

.hp-plan__title {
  margin-top: 6px;
  font-size: clamp(30px, 9vw, 44px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.hp-plan__meta {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 800;
}

.hp-plan__notes {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
}

.hp-planman-voice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 14px 0 18px;
}
.hp-planman-voice p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 700;
}

.hp-plan__list {
  display: grid;
  gap: 14px;
}

.hp-plan__item {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 0 20px 34px -26px var(--shadow);
}

.hp-plan__index {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--on-accent);
  font-weight: 900;
  font-size: 18px;
}

.hp-plan__item-body {
  display: grid;
  gap: 4px;
}

.hp-plan__when {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hp-plan__event {
  font-size: 21px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.hp-plan__venue,
.hp-plan__price,
.hp-plan__note {
  font-size: 15px;
  font-weight: 650;
  color: var(--ink-muted);
}

.hp-plan__back {
  margin-top: 24px;
}

.hp-plan__back-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--line);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

/* ---------- saved events screen ---------- */

.hp-savedhead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0 4px;
}

.hp-savedhead__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  min-height: var(--tap);
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.hp-savedhead__back:hover {
  background: var(--surface);
}

.hp-savedhead__title {
  font-size: clamp(22px, 6.4vw, 30px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* ---------- larger screens ---------- */

@media (min-width: 560px) {
  .hp-rail__track {
    grid-auto-columns: calc((100% - 12px) / 2);
  }
}

@media (min-width: 640px) {
  .hp-grid,
  .hp-skeletons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hp-planman {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: start;
    text-align: left;
    gap: 18px;
    padding: 18px 20px;
  }

  .hp-planman__copy {
    padding-left: 18px;
    border-left: 1px solid var(--line);
  }

  .hp-quick {
    margin-inline: 0;
    padding-inline: 0;
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
  }
}

@media (min-width: 720px) {
  .hp-shell {
    max-width: 1120px;
  }

  .hp-top {
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
  }

  .hp-top__place {
    grid-column: 1;
  }

  .hp-top__brand {
    grid-column: 2;
  }

  .hp-top__logo {
    width: 210px;
  }

  .hp-panel {
    padding: 22px 20px 24px;
  }

  .hp-rail__nav {
    position: absolute;
    top: 26%;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 12px 26px -14px var(--shadow);
  }

  .hp-rail__nav--prev {
    left: -14px;
  }

  .hp-rail__nav--next {
    right: -14px;
  }

  .hp-rail__track {
    grid-auto-columns: calc((100% - 24px) / 3);
  }
}

@media (min-width: 1000px) {
  .hp-grid,
  .hp-skeletons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hp-rail__track {
    grid-auto-columns: calc((100% - 36px) / 4);
  }

  .hp-planman__badge {
    width: 170px;
  }
}

@media (max-width: 359px) {
  .hp-nav__item {
    font-size: 9px;
  }

  .hp-nav__glyph {
    width: 26px;
    height: 26px;
  }
}


/* ---------- current conditions ----------
   Every state occupies the same box, so the reading arriving after the first
   paint can never push the events below it. */

.hp-weather {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  margin-top: 4px;
  color: var(--ink-muted);
}

.hp-weather__icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--accent);
}

[data-time-phase="night"] .hp-weather__icon {
  color: var(--ink-muted);
}

.hp-weather__reading {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}

.hp-weather__temp {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.hp-weather__unit {
  font-size: 11px;
  font-weight: 700;
  margin-left: 1px;
  vertical-align: super;
}

.hp-weather__condition {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-weather--unavailable .hp-weather__icon,
.hp-weather--unavailable .hp-weather__condition {
  opacity: 0.72;
}

.hp-weather__skeleton {
  display: block;
  border-radius: 999px;
  background: var(--line);
  animation: hp-weather-pulse 1.5s ease-in-out infinite;
}

.hp-weather__skeleton--icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.hp-weather__skeleton--text {
  width: 104px;
  height: 12px;
}

@keyframes hp-weather-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.95;
  }
}

/* ---------- motion preferences ---------- */

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

  .hp-btn:active {
    transform: none;
  }

  .hp-rail__track {
    scroll-behavior: auto;
  }

  .hp-weather__skeleton {
    animation: none;
    opacity: 0.7;
  }
}


/* Reviewed attractions, alongside the existing event discovery surface. */
.hp-things-entry {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink);
  background: var(--surface);
  text-decoration: none;
}
.hp-things-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hp-place-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: 20px; min-width: 0; }
.hp-place-card h2 { font-size: 1.25rem; margin: .8rem 0; }
.hp-place-card p { line-height: 1.5; margin: .6rem 0; overflow-wrap: anywhere; }
.hp-place-card__badge { font-size: .8rem; font-weight: 700; color: var(--ink-muted); }
.hp-place-card__price { font-weight: 700; }
.hp-place-card .hp-btn { max-width: 100%; white-space: normal; text-align: center; }
.hp-things .hp-planner__fields { margin-bottom: 1.25rem; }
@media (max-width: 900px) { .hp-things-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .hp-things-grid { grid-template-columns: 1fr; }
  .hp-things-entry { flex-direction: column; gap: .5rem; }
  .hp-things .hp-panel__head { align-items: flex-start; flex-wrap: wrap; }
}

.hp-business-summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.hp-place-card__hours { color: var(--ink); font-weight: 700; }
.hp-place-card .hp-btn { margin: .3rem .3rem .3rem 0; }



/* Approved Phoenix identity: four local scenic environments. Artwork is bundled
   WebP, with no image host or runtime provider dependency. Discovery controls and
   event cards retain their surfaces; the header and Planman sit in the scenery. */
:root { --phoenix-scene: url("/images/phoenix/afternoon.webp"); }
[data-time-phase="morning"] { --phoenix-scene: url("/images/phoenix/morning.webp"); }
[data-time-phase="afternoon"], [data-time-phase="day"] { --phoenix-scene: url("/images/phoenix/afternoon.webp"); }
[data-time-phase="sunset"] { --phoenix-scene: url("/images/phoenix/sunset.webp"); }
[data-time-phase="night"] { --phoenix-scene: url("/images/phoenix/night.webp"); }
.hp-body {
  background-image:
    linear-gradient(0deg, var(--wx-scrim), var(--wx-scrim)),
    linear-gradient(180deg, transparent 0, transparent 430px, var(--surface-2) 730px),
    var(--phoenix-scene);
  background-size: 100% 100%, 100% 100%, auto 740px;
  background-position: center top, center top, 36% top;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-color: var(--surface-2);
}
.hp-discovery .hp-top {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.hp-discovery .hp-top__place {
  grid-column: 1;
  grid-row: 1;
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}
.hp-discovery .hp-top__conditions { grid-column: 2; grid-row: 1; min-width: 0; }
.hp-discovery .hp-top__brand { grid-column: 1 / -1; grid-row: 2; }
.hp-discovery .hp-top__logo { width: 116px; }
.hp-discovery .hp-top__city { font-size: 13px; gap: 4px; }
.hp-discovery .hp-top__radius-select { font-size: 12px; max-width: 100%; min-width: 0; }
.hp-discovery .hp-top__geo { font-size: 11px; gap: 2px 6px; }
.hp-discovery .hp-top__geo-retry { font-size: 11px; min-height: 26px; }
.hp-top__conditions .hp-weather {
  min-height: 114px;
  margin: 0;
  padding: 14px 12px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.hp-top__conditions .hp-weather__icon { width: 22px; height: 22px; }
.hp-top__conditions .hp-weather__reading { flex-direction: column; align-items: flex-start; gap: 2px; }
.hp-top__conditions .hp-weather__temp { font-size: 17px; line-height: 1.15; }
.hp-top__conditions .hp-weather__condition { font-size: 12px; white-space: normal; }
.hp-top__conditions .hp-weather__skeleton--text { width: 65px; }
.hp-discovery .hp-greeting {
  margin: 8px auto 0;
  padding: 8px 0;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  background: transparent;
  border: 0;
}
.hp-discovery .hp-greeting__title { font-size: clamp(25px, 6.5vw, 34px); font-weight: 750; }
.hp-discovery .hp-greeting__sub { margin-top: 5px; font-size: 14px; }
.hp-discovery .hp-greeting__accent { color: var(--link); }
.hp-discovery .hp-planman {
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  padding: 14px;
  margin-top: 14px;
  text-align: left;
  justify-items: stretch;
}
.hp-discovery .hp-planman__badge { width: 100px; }
.hp-discovery .hp-planman__copy { padding-left: 0; border-left: 0; }
.hp-discovery .hp-planman__title { font-size: 15px; }
.hp-discovery .hp-planman__body { font-size: 12px; }
.hp-discovery .hp-planman__cta { grid-column: 1 / -1; min-height: 44px; font-size: 14px; }
.hp-explore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.hp-explore .hp-things-entry { flex-direction: column; margin: 0; gap: 8px; padding: 14px; font-size: 13px; }
.hp-explore .hp-things-entry strong { display: block; font-size: 16px; }
.hp-explore .hp-things-entry > span:last-child { font-weight: 800; color: var(--link); }
@media (min-width: 720px) {
  .hp-body { background-size: 100% 100%, 100% 100%, cover; background-attachment: fixed; }
  .hp-discovery .hp-top { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .hp-discovery .hp-top__place { max-width: 240px; }
  .hp-discovery .hp-top__brand { grid-column: 2; grid-row: 1; }
  .hp-discovery .hp-top__conditions { grid-column: 3; justify-self: end; width: 200px; }
  .hp-discovery .hp-top__logo { width: 136px; }
  .hp-discovery .hp-greeting { margin-top: 16px; }
  .hp-discovery .hp-planman { grid-template-columns: 140px minmax(0, 1fr) auto; padding: 14px 20px; }
  .hp-discovery .hp-planman__badge { width: 140px; }
  .hp-discovery .hp-planman__cta { grid-column: 3; }
  .hp-discovery .hp-planman__copy { padding-left: 16px; border-left: 1px solid var(--line); }
}
@media (max-width: 359px) {
  .hp-top__conditions .hp-weather { padding: 10px 8px; gap: 5px; }
  .hp-top__conditions .hp-weather__icon { width: 24px; height: 24px; }
  .hp-top__conditions .hp-weather__temp { font-size: 23px; }
}

/* Keep the three reference header anchors together on phones too. */
.hp-discovery .hp-top { grid-template-columns: minmax(0, 1.25fr) minmax(54px, .7fr) minmax(0, 1fr); gap: 8px; }
.hp-discovery .hp-top__brand { grid-column: 2; grid-row: 1; align-self: center; }
.hp-discovery .hp-top__conditions { grid-column: 3; }
.hp-discovery .hp-top__logo { width: 84px; }
.hp-discovery .hp-top__place { padding: 4px 0; }
.hp-discovery .hp-top__city, .hp-discovery .hp-top__geo, .hp-discovery .hp-top__radius { width: 100%; }
.hp-discovery .hp-top__radius { gap: 4px; }
.hp-discovery .hp-top__radius .hp-icon { width: 13px; height: 13px; }
.hp-discovery .hp-top__conditions .hp-weather { min-height: 120px; padding: 12px 8px; flex-direction: column; gap: 5px; }
.hp-discovery .hp-top__conditions .hp-weather__reading { align-items: center; text-align: center; }
.hp-discovery .hp-top__conditions .hp-weather__temp { font-size: 23px; }
.hp-discovery .hp-top__conditions .hp-weather__condition { font-size: 11px; }
@media (min-width: 720px) {
  .hp-discovery .hp-top { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; }
  .hp-discovery .hp-top__brand { align-self: start; }
  .hp-discovery .hp-top__logo { width: 136px; }
  .hp-discovery .hp-top__conditions .hp-weather { flex-direction: row; min-height: 114px; padding: 14px 12px; gap: 10px; }
  .hp-discovery .hp-top__conditions .hp-weather__reading { align-items: flex-start; text-align: left; }
  .hp-discovery .hp-top__conditions .hp-weather__temp { font-size: 26px; }
  .hp-discovery .hp-top__conditions .hp-weather__condition { font-size: 12px; }
}

/* One continuous scenic header, with quieter translucent lettering. */
:root {
  --scene-ink: rgba(10, 24, 38, 0.86);
  --scene-muted: rgba(10, 24, 38, 0.78);
  --scene-text-shadow: 0 1px 8px rgba(255, 255, 255, 0.45);
}
[data-time-phase="night"] {
  --scene-ink: rgba(245, 247, 255, 0.90);
  --scene-muted: rgba(245, 247, 255, 0.80);
  --scene-text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}
.hp-discovery .hp-top,
.hp-discovery .hp-greeting,
.hp-discovery .hp-planman__copy {
  color: var(--scene-ink);
  text-shadow: var(--scene-text-shadow);
}
.hp-discovery .hp-top__city,
.hp-discovery .hp-weather__temp,
.hp-discovery .hp-greeting__title,
.hp-discovery .hp-planman__title { color: var(--scene-ink); }
.hp-discovery .hp-top__radius,
.hp-discovery .hp-top__radius-select,
.hp-discovery .hp-top__caret,
.hp-discovery .hp-top__geo,
.hp-discovery .hp-top__geo-retry,
.hp-discovery .hp-weather,
.hp-discovery .hp-weather__icon,
.hp-discovery .hp-greeting__sub,
.hp-discovery .hp-greeting__accent,
.hp-discovery .hp-planman__body { color: var(--scene-muted); }
.hp-discovery .hp-top__radius-select { text-shadow: var(--scene-text-shadow); }
.hp-discovery .hp-top__conditions .hp-weather { min-height: 96px; padding: 4px 0; }
.hp-discovery .hp-planman {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 0;
  margin-top: 6px;
  grid-template-columns: 84px minmax(0, 1fr);
}
.hp-discovery .hp-planman__badge { width: 84px; }
.hp-discovery .hp-planman__body { opacity: 1; }
.hp-discovery .hp-planman__copy { padding-left: 0; border-left: 0; }
@media (min-width: 720px) {
  .hp-discovery .hp-top { align-items: center; }
  .hp-discovery .hp-top__brand { align-self: center; }
  .hp-discovery .hp-top__conditions .hp-weather { min-height: 96px; padding: 4px 0; justify-content: flex-end; }
  .hp-discovery .hp-planman { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 18px; }
  .hp-discovery .hp-planman__badge { width: 112px; }
}

/* Discovery shelves: real local inventory, with business-specific logos and photos. */
.hp-discovery-shelf { margin-top: 24px; }
/* A rail item must stay in its own grid column even when artwork or metadata fails. */
.hp-spots > .hp-spot {
  scroll-snap-align: start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-self: start;
}
.hp-spots > .hp-spot > .hp-spot__link { min-width: 0; width: 100%; }
.hp-spots .hp-place-cover { width: 100%; min-width: 0; flex: 0 0 170px; }
.hp-spots .hp-spot__body { min-width: 0; overflow-wrap: anywhere; }
.hp-spot { min-width: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.hp-spot__link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.hp-spot__cover { position: relative; display: flex; align-items: center; justify-content: center; height: 150px; overflow: hidden; background: linear-gradient(135deg, #ffe2a5, #ffac79); color: #64352b; }
.hp-spot--attractions .hp-spot__cover { background: linear-gradient(135deg, #c5e9e4, #79bfba); color: #164c55; }
.hp-spot--nightlife .hp-spot__cover { background: linear-gradient(135deg, #7864a4, #302951); color: #fff1d6; }
.hp-spot__cover::before { content: ""; position: absolute; width: 230px; height: 230px; border: 28px solid rgba(255,255,255,.2); border-radius: 50%; right: -90px; top: -80px; }
.hp-spot__symbol { font-size: 64px; position: relative; }
.hp-spot__city { position: absolute; bottom: 12px; left: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.9); color: #303044; font-size: 12px; font-weight: 700; text-transform: capitalize; }
.hp-spot__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px; }
.hp-spot__kind { color: var(--ink-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hp-spot h3 { font-size: 20px; line-height: 1.25; }
.hp-spot__description { font-size: 14px; line-height: 1.5; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hp-spot__action { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 700; color: var(--accent); }


/* Business artwork is served locally; name-specific covers remain underneath. */
.hp-place-cover { position: relative; height: 170px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #ede1cd; color: #38302a; }
.hp-place-cover--tone-1 { background: #d5e5e2; color: #204f50; }
.hp-place-cover--tone-2 { background: #eadadc; color: #623d43; }
.hp-place-cover--tone-3 { background: #dedeee; color: #444166; }
.hp-place-cover--tone-4 { background: #e2e6cd; color: #3c5136; }
.hp-place-cover__fallback { padding: 22px 26px 44px; text-align: center; font-size: 25px; line-height: 1.15; font-weight: 800; letter-spacing: -.04em; overflow-wrap: anywhere; }
.hp-place-cover__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #faf8f2; }
.hp-place-cover--logo .hp-place-cover__image { object-fit: contain; padding: 26px 26px 48px; }
.hp-place-cover__image[hidden] { display: none; }
.hp-place-cover__city { position: absolute; bottom: 12px; left: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.94); color: #303044; font-size: 12px; font-weight: 700; text-transform: capitalize; }
.hp-place-card .hp-place-cover { margin: -1.25rem -1.25rem 1.25rem; border-radius: 19px 19px 0 0; }

/* Keep the light Cartel wordmark legible on its own brand panel. */
.hp-place-cover__image[src="/images/places/624aeeb22c975c7c.svg"] { background: #222b2e; }

/* Published white and light brand marks need contrast on their cards. */
.hp-place-cover__image[data-background="dark"] { background: #222b2e; }

.hp-daypart { margin: 16px 0; }
.hp-daypart__title { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.hp-daypart__categories { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.hp-daypart__categories .hp-pill { flex: 0 0 auto; text-decoration: none; }

/* Keep area selection full width on mobile and desktop. */
.hp-area-selector label { grid-column: 1 / -1; }

/* A spot opens its own details before search or planning controls. */
.hp-place-detail { max-width: 50rem; margin-inline: auto; }
.hp-place-detail .hp-savedhead__title { overflow-wrap: anywhere; }
.hp-place-detail .hp-place-cover { height: 240px; margin-bottom: 1rem; border-radius: 18px; }
.hp-place-detail .hp-panel > p { margin-block: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.hp-place-detail__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-block: 1rem; }
.hp-place-detail__actions .hp-btn { white-space: normal; text-align: center; }

/* Seasonal discovery keeps the Phoenix scenery and existing swipe rails. */
.hp-october { border-color: rgba(204, 120, 55, .35); }
.hp-october__art { height: 170px; position: relative; overflow: hidden; background: #593225; color: #ffe4b8; }
.hp-october__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-october__lettering { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: .4rem; padding: 1rem; background: radial-gradient(ellipse at top right, #a55d34, transparent), linear-gradient(130deg, #322531, #67402b); }
.hp-october__lettering span { font-size: 1.7rem; }
.hp-october__lettering strong { font-size: 1.15rem; line-height: 1.2; }
.hp-october__lettering small { opacity: .85; }
.hp-october__trip { font-size: .78rem; font-weight: 700; margin: .4rem 0; }
.hp-october-detail .hp-october__art { max-width: 680px; height: 260px; border-radius: 16px; margin-bottom: 1rem; }
.hp-october__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem 1rem; margin: 1rem 0; }
.hp-october__facts dt { font-weight: 700; }
.hp-october__facts dd { margin: 0; overflow-wrap: anywhere; }
.hp-october__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.hp-browse-filters {margin: 1rem 0;}
.hp-browse-filters summary {cursor: pointer; font-weight: 700; padding: .75rem 0;}

/* Northern getaways are explicit road trips; detail browsing scrolls vertically. */
.hp-north { border-color: rgba(115, 161, 139, .4); }
.hp-north__trip { font-size: .8rem; font-weight: 700; margin: .8rem 0; }
.hp-north__art { height: 170px; position: relative; overflow: hidden; color: #fff; background: linear-gradient(145deg, #1b3939, #597c62); background-image: linear-gradient(90deg, rgba(9,20,24,.72) 0%, rgba(9,20,24,.30) 58%, rgba(9,20,24,.08) 100%), var(--north-photo); background-size: cover; background-position: center; }
.hp-north__art--sedona { --north-photo: url("https://images.unsplash.com/photo-1663536535769-1e0fca7eb8b7?auto=format&fit=crop&w=1200&q=82"); background-position: center 58%; }
.hp-north__art--prescott { --north-photo: url("https://images.unsplash.com/photo-1604877043350-1d1d97baf615?auto=format&fit=crop&w=1200&q=82"); }
.hp-north__art--prescott-valley { --north-photo: url("https://images.unsplash.com/photo-1604877043350-1d1d97baf615?auto=format&fit=crop&w=1200&q=82"); background-position: center 42%; }
.hp-north__art--flagstaff { --north-photo: url("https://images.unsplash.com/photo-1597513803301-d5c08610d4db?auto=format&fit=crop&w=1200&q=82"); background-position: center 48%; }
.hp-north__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.30)); pointer-events: none; }
.hp-north__art svg { position: absolute; width: 100%; height: 100%; bottom: 0; }
.hp-north__art > span { position: relative; z-index: 2; text-shadow: 0 2px 14px rgba(0,0,0,.72); height: 100%; padding: 1.3rem; display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.hp-north__art small { font-size: .7rem; letter-spacing: .15em; }
.hp-north__art strong { font-size: 1.65rem; line-height: 1.2; }
.hp-north__address { font-size: .78rem; line-height: 1.4; opacity: .8; overflow-wrap: anywhere; }
.hp-north-grid__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.hp-north-grid__items .hp-spot { min-width: 0; }
.hp-north-page .hp-chips { margin: 1rem 0; }
.hp-north-page .hp-pill[aria-current="page"] { background: var(--hp-accent, #8dc9ad); color: #102d29; box-shadow: inset 0 0 0 2px currentColor; }
#hp-north-details .hp-north__art { border-radius: 16px; margin-bottom: 1rem; }
@media (min-width: 700px) { .hp-north-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hp-north-grid__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Private profiles and mobile food truck discovery. */
.hp-profile__privacy { opacity: .8; font-size: .9rem; line-height: 1.5; margin-bottom: 1.5rem; }
.hp-profile__photo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.hp-profile__photo img, .hp-profile__avatar { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.hp-profile__avatar { display: grid; place-items: center; font-size: 3rem; background: rgba(255,255,255,.2); }
.hp-profile__photo input { max-width: 100%; }
.hp-profile__fields { display: grid; gap: 1rem; margin: 1.5rem 0; }
.hp-profile__fields input, .hp-profile__fields select { width: 100%; box-sizing: border-box; min-height: 44px; padding: .75rem; border: 1px solid rgba(110,100,90,.3); border-radius: 14px; color: #252326; background: #fffaf3; }
.hp-profile__fields label { display: block; margin-bottom: .35rem; }
.hp-profile__interests { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.5rem 0; }
.hp-profile__interests legend { font-weight: 700; margin-bottom: .8rem; }
.hp-profile__interests .hp-pill { display: inline-flex; gap: .5rem; align-items: center; cursor: pointer; }
.hp-profile__interests label:has(input:checked) { background: #ffe28b; color: #252326; }
.hp-profile__links { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }
.hp-profile__links .hp-pill { min-height: 44px; display: inline-flex; align-items: center; }
.hp-truck-grid { display: grid; gap: 1.2rem; margin: 1.5rem 0; }
.hp-truck-card { overflow: hidden; border-radius: 24px; background: rgba(255,250,244,.94); color: #252326; box-shadow: 0 6px 24px rgba(30,15,30,.08); }
.hp-truck-card__brand { padding: 1.5rem; background: linear-gradient(130deg,#faaf64,#ffe4a7); }
.hp-truck-card:nth-child(3n+2) .hp-truck-card__brand { background: linear-gradient(130deg,#b7dfcf,#e6f3d9); }
.hp-truck-card:nth-child(3n) .hp-truck-card__brand { background: linear-gradient(130deg,#ddc6f3,#f7d1bc); }
.hp-truck-card__brand h2 { font-size: 1.5rem; line-height: 1.2; margin-top: .4rem; }
.hp-truck-card__brand a { color: inherit; }
.hp-truck-card__cuisine { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hp-truck-card__body { padding: 1.2rem 1.5rem; line-height: 1.5; }
.hp-truck-card__region { font-size: .85rem; opacity: .75; margin: .6rem 0; }
.hp-truck-card__status { font-weight: 700; margin-top: 1rem; }
.hp-open-sign { display: inline-flex; align-items: center; justify-content: center; margin: 1rem 0 .6rem; min-width: 120px; min-height: 48px; padding: .5rem 1.1rem; border: 3px solid #85ffaf; border-radius: 12px; background: #08762d; color: #c9ffdc; font-weight: 900; font-size: 1.5rem; letter-spacing: .18em; text-decoration: none; box-shadow: 0 0 14px rgba(34,230,90,.4); }
.hp-open-sign:focus-visible { outline: 3px solid #252326; outline-offset: 4px; }
.hp-truck-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 700px) { .hp-profile__fields { grid-template-columns: repeat(2,minmax(0,1fr)); } .hp-truck-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* A short, optional profile setup and passwordless account entry. */
.hp-profile__welcome { margin-bottom: 1rem; }
.hp-profile__optional { margin: 1rem 0; }
.hp-profile__optional summary { cursor: pointer; padding: .75rem 0; font-weight: 700; }
.hp-profile__skip { display: block; margin: 1rem 0; color: inherit; }
.hp-account-card { max-width: 620px; margin-inline: auto; line-height: 1.6; }
.hp-account-card .hp-pill { display: inline-flex; margin-top: 1rem; }
.hp-account-import { display: flex; gap: .75rem; align-items: flex-start; margin: 1.25rem 0; }
.hp-account-import input { flex-shrink: 0; margin-top: .3rem; }



/* Business owners use the same readable cards and controls as discovery. */
.hp-business-dashboard .hp-profile__fields { max-width: 760px; display: flex; flex-direction: column; }
.hp-business-dashboard .hp-profile__fields input[type=checkbox] { width: 20px; min-height: 20px; flex-shrink: 0; }
.hp-business-dashboard .hp-profile__fields textarea { padding: .75rem; border-radius: 14px; color: #252326; background: #fffaf3; border: 1px solid rgba(110,100,90,.3); }
.hp-business-dashboard textarea { min-height: 96px; resize: vertical; width: 100%; }
.hp-business-dashboard input:not([type=checkbox]),
.hp-business-dashboard textarea,
.hp-business-dashboard select { box-sizing: border-box; max-width: 100%; }
.hp-business-row { padding: 16px 0; border-bottom: 1px solid var(--hp-border, rgba(255,255,255,.15)); }
.hp-business-row span { margin-left: 12px; }
.hp-business-hours { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; margin: 8px 0; border: 1px solid var(--hp-border, rgba(255,255,255,.15)); border-radius: 16px; }
.hp-business-hours label { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.hp-business-hours label:has(input[type=checkbox]) { flex-direction: row; align-items: center; }
.hp-business-hours legend { font-weight: 700; padding: 0 6px; }
.hp-business-hours p { flex-basis: 100%; }
.hp-business-dashboard { overflow-wrap: anywhere; }
@media (max-width: 540px) { .hp-business-hours label { flex-basis: 100%; } }

/* Arizona business identity: scenic front door and a warm, focused workspace. */
.hp-business-dashboard { --business-ink: #302624; --business-muted: #62544e; }
.hp-business-masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.hp-business-brand { display: flex; align-items: center; gap: 14px; color: var(--scene-ink); text-decoration: none; }
.hp-business-brand img { width: 96px; height: auto; }
.hp-business-brand span { font-size: 11px; font-weight: 800; letter-spacing: .14em; border-left: 1px solid currentColor; padding-left: 14px; }
.hp-business-hero { position: relative; overflow: hidden; isolation: isolate; padding: 40px 26px 28px; border-radius: 30px; background: #f7d6af; color: #302624; }
.hp-business-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(255,239,215,.98), rgba(255,239,215,.92) 38%, rgba(255,239,215,.2)), url("/images/phoenix/sunset.webp") center / cover; }
.hp-business-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .15em; margin-bottom: 14px; }
.hp-business-hero h1 { font-family: var(--font-sans); font-size: clamp(44px, 8vw, 74px); line-height: .98; letter-spacing: -.065em; font-weight: 900; max-width: 560px; }
.hp-business-hero__copy { max-width: 380px; margin: 22px 0; font-size: 16px; line-height: 1.65; }
.hp-business-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 32px; }
.hp-business-actions .hp-btn { background: #f9aa48; color: #302624; border: 0; box-shadow: none; }
.hp-business-demo-link { color: #302624; font-weight: 750; font-size: 14px; padding: 12px 0; text-underline-offset: 5px; }
.hp-business-local { font-size: 11px; font-weight: 650; }
.hp-business-benefits { display: grid; gap: 0; margin: 22px 0 30px; color: var(--scene-ink); }
.hp-business-benefits article { padding: 18px 8px; border-bottom: 1px solid var(--line); }
.hp-business-benefits__number { font-size: 10px; letter-spacing: .12em; font-weight: 800; }
.hp-business-benefits h2 { font-size: 21px; margin: 7px 0; letter-spacing: -.035em; }
.hp-business-benefits p { font-size: 14px; max-width: 300px; line-height: 1.6; }
.hp-business-dashboard .hp-panel { background: #fffaf2; color: var(--business-ink); border: 1px solid #e8d9c9; box-shadow: 0 8px 28px rgba(30,20,18,.06); border-radius: 24px; padding: 24px; }
.hp-business-dashboard .hp-panel__sub { color: var(--business-muted); }
.hp-business-access { display: grid; gap: 20px; }
.hp-business-access p { line-height: 1.6; }
.hp-business-notice { font-size: 14px; color: var(--business-muted); margin-bottom: 14px; }
.hp-business-status { display: inline-flex; padding: 9px 14px; background: #eee4d7; color: #62544e; border-radius: 999px; font-size: 12px; font-weight: 750; }
.hp-business-dashboard .hp-profile__fields input:not([type=checkbox]),
.hp-business-dashboard .hp-profile__fields textarea,
.hp-business-dashboard .hp-profile__fields select { background: #fff; border-color: #d7c8ba; }
.hp-business-dashboard .hp-pill { background: #f3e6d5; color: #302624; border-color: #d7c8ba; }
.hp-business-dashboard .hp-panel .hp-btn--primary { background: #302624; color: #fffaf2; }
.hp-business-dashboard .hp-business-row { border-color: #e8d9c9; }
.hp-business-dashboard .hp-business-hours { border-color: #e8d9c9; }
.hp-business-dashboard .hp-profile__fields { margin-bottom: 0; }
.hp-business-demo-banner { padding: 10px 14px; border: 1px dashed #d99e55; border-radius: 14px; background: #fff0d5; color: #694321; font-size: 12px; margin-bottom: 18px; }
.hp-business-demo-login { max-width: 500px; margin: 28px auto; }
.hp-business-demo-login h1 { font-size: 32px; letter-spacing: -.04em; line-height: 1.15; margin-bottom: 12px; }
.hp-business-demo-login p { color: var(--business-muted); }
.hp-business-demo-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0; color: var(--scene-ink); }
.hp-business-demo-top h1 { font-size: clamp(30px, 5vw, 42px); letter-spacing: -.05em; }
.hp-business-demo-top p { font-size: 14px; }
.hp-business-demo-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.hp-business-demo-tabs button { cursor: pointer; min-height: 44px; }
.hp-business-demo-tabs button[aria-pressed=true] { background: #302624; color: #fffaf2; }
.hp-business-demo-summary { display: grid; gap: 14px; margin: 20px 0; }
.hp-business-demo-summary article { padding: 20px; border-radius: 20px; color: #302624; background: #f5dbac; }
.hp-business-demo-summary article:nth-child(2) { background: #cde5d8; }
.hp-business-demo-summary article:nth-child(3) { background: #e6d7ee; }
.hp-business-demo-summary strong { display: block; margin-top: 8px; font-size: 21px; letter-spacing: -.03em; }
.hp-business-demo-summary p { margin-top: 6px; font-size: 13px; }
.hp-business-demo-summary small { font-weight: 750; font-size: 11px; }
.hp-business-demo-planman { display: flex; align-items: center; gap: 14px; margin: 26px 0; padding: 18px; border-radius: 20px; background: #fffaf2; color: #302624; }
.hp-business-demo-planman img { width: 64px; height: auto; }
.hp-business-demo-planman p { font-size: 14px; }
.hp-business-demo-planman strong { display: block; }
@media (min-width: 700px) {
  .hp-business-hero { padding: 54px 42px 32px; }
  .hp-business-benefits, .hp-business-demo-summary { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
  .hp-business-benefits article { border-bottom: 0; border-right: 1px solid var(--line); padding-right: 18px; }
  .hp-business-benefits article:last-child { border-right: 0; }
}
@media (max-width: 380px) {
  .hp-business-brand span { font-size: 9px; padding-left: 10px; }
  .hp-business-brand img { width: 76px; }
  .hp-business-hero { padding-inline: 22px; }
}

.hp-business-dashboard .hp-profile__fields textarea { font: inherit; font-size: 15px; }
.hp-footer > a.hp-footer__line { display: block; padding: 5px 0; }

/* Food truck finder */
.hp-truck-finder { margin: 24px 0; }
.hp-truck-map-canvas { height: 390px; width: 100%; border-radius: 22px; isolation: isolate; background: #e9e4db; }
.hp-truck-pin { display: flex; flex-direction: column; align-items: center; background: white; border: 2px solid #24dd63; border-radius: 16px; box-shadow: 0 4px 14px #0004; color: #063c17; }
.hp-truck-pin span { font-size: 27px; line-height: 33px; }
.hp-truck-pin b { font: 800 10px/16px sans-serif; background: #2bf16b; width: 100%; text-align: center; border-radius: 0 0 12px 12px; }
.hp-truck-finder .leaflet-popup-content { color: #202020; font: 14px/1.4 sans-serif; }
@media (max-width: 600px) { .hp-truck-map-canvas { height: 340px; } }

/* A personal Arizona front door, with the portrait visible after every update. */
.hp-profile { max-width: 1080px; margin-inline: auto; color: var(--scene-ink, var(--ink)); }
.hp-profile-studio { display: block; }
.hp-profile-hero { border-radius: 28px; overflow: hidden; background: #fffaf2; color: #302624; box-shadow: 0 12px 34px #301e1712; margin-bottom: 20px; }
.hp-profile-hero__cover { min-height: 188px; padding: 30px 24px 44px; background: linear-gradient(90deg, #ffedccef, #ffedccd9 45%, #ffd8a744), url("/images/phoenix/sunset.webp") center 55% / cover; }
.hp-profile-eyebrow { display: block; font-size: 10px; font-weight: 850; letter-spacing: .14em; margin-bottom: 12px; }
.hp-profile-hero__cover h2 { max-width: 390px; font-size: clamp(32px, 5vw, 48px); font-weight: 850; letter-spacing: -.045em; line-height: 1.05; }
.hp-profile-hero__cover p { max-width: 300px; font-size: 14px; line-height: 1.5; margin-top: 12px; }
.hp-profile-hero__identity { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 0 24px 12px; }
.hp-profile-portrait { width: 112px; height: 112px; margin-top: -28px; flex-shrink: 0; border: 5px solid #fffaf2; border-radius: 50%; background: #184f4c; color: #ffe1aa; box-shadow: 0 4px 14px #30262418; display: grid; place-items: center; overflow: hidden; position: relative; }
.hp-profile-portrait img { width: 100%; height: 100%; object-fit: cover; }
.hp-profile-portrait > span { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.hp-profile-hero__name { flex: 1; min-width: 140px; padding-top: 8px; }
.hp-profile-hero__name h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.04em; overflow-wrap: anywhere; }
.hp-profile-hero__name p { font-size: 12px; color: #766659; margin-top: 6px; }
.hp-profile-photo-picker { position: relative; }
.hp-profile-photo-picker > label { display: inline-flex; align-items: center; gap: 16px; cursor: pointer; color: #302624; background: #f4e5cf; border-color: #e2ceb4; min-height: 44px; }
.hp-profile-photo-picker > input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.hp-profile-photo-picker:focus-within > label { outline: 3px solid #184f4c; outline-offset: 3px; }
.hp-profile-photo-picker [data-photo-processing] { font-size: 12px; max-width: 210px; margin-top: 5px; }
.hp-profile-photo-note { padding: 0 24px 22px; font-size: 12px; color: #67594d; line-height: 1.55; }
.hp-profile-hero:has([data-enhanced=true]) .hp-profile-upload-fallback { display: none; }
.hp-profile-upload-fallback input { max-width: 100%; }
#hp-profile-photo-status { margin-top: 8px; font-weight: 750; color: #17614c; }
#hp-profile-photo-status[role=alert] { color: #a73126; }
.hp-profile-upload-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.hp-profile-upload-progress img { border-radius: 50%; }
.hp-profile-card { padding: 24px; background: #fffaf2; color: #302624; border: 1px solid #eadbca; border-radius: 24px; min-width: 0; }
.hp-profile-card h2 { font-size: 26px; line-height: 1.1; letter-spacing: -.04em; }
.hp-profile-card h3 { font-size: 17px; margin-top: 28px; }
.hp-profile-card__intro { font-size: 13px; color: #766659; line-height: 1.6; margin-top: 10px; max-width: 380px; }
.hp-profile-edit-grid { display: grid; gap: 16px; }
.hp-profile-card .hp-profile__fields { margin: 20px 0 0; }
.hp-profile-card .hp-profile__fields label { font-size: 12px; font-weight: 700; }
.hp-profile-card .hp-profile__fields input, .hp-profile-card .hp-profile__fields select { background: #fffdfa; border-color: #e0cfbc; font-size: 15px; font-family: inherit; }
.hp-profile-card .hp-profile__fields [role=alert] { font-size: 12px; color: #a73126; margin-top: 5px; }
.hp-profile-card .hp-profile__interests { gap: 8px; }
.hp-profile-interest { display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; border: 1px solid #e0cfbc; border-radius: 999px; background: #fffdf8; font-size: 12px; font-weight: 650; cursor: pointer; min-height: 42px; }
.hp-profile-interest input { width: 15px; height: 15px; margin: 0; accent-color: #184f4c; }
.hp-profile .hp-profile-interest:has(input:checked) { background: #184f4c; color: #fff5da; border-color: #184f4c; }
.hp-profile-interest:focus-within { outline: 3px solid #da9651; outline-offset: 3px; }
.hp-profile-planman { display: flex; align-items: center; gap: 12px; border-radius: 18px; padding: 16px; background: #f2e6d4; margin-top: 22px; font-size: 12px; line-height: 1.6; }
.hp-profile-planman img { width: 56px; height: auto; flex-shrink: 0; }
.hp-profile-planman strong { display: block; font-size: 13px; }
.hp-profile-save-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 22px 0; }
#hp-profile-save-feedback { flex-basis: 100%; font-size: 14px; font-weight: 700; }
#hp-profile-save-feedback:empty { display: none; }
#hp-profile-save-feedback [role=alert] { background: #fff0e6; color: #8c251d; padding: 12px 16px; border-radius: 14px; }
#hp-profile-save-feedback [role=status] { background: #e4f3e9; color: #174c36; padding: 12px 16px; border-radius: 14px; }
.hp-profile-save-bar .hp-btn { background: #184f4c; color: #fff4dd; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 30px; min-height: 50px; }
.hp-profile-text-link { color: inherit; font-size: 13px; text-underline-offset: 4px; }
.hp-profile-text-button { font: inherit; font-size: 12px; color: inherit; border: 0; padding: 8px 0; background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hp-profile-destinations { display: grid; gap: 12px; margin: 26px 0; }
.hp-profile-destinations > a { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 20px; background: #fffaf2; border: 1px solid #eadbca; text-decoration: none; color: #302624; }
.hp-profile-destinations > a > span:first-child { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #eedcc0; font-size: 24px; flex-shrink: 0; }
.hp-profile-destinations > a > div { flex: 1; }
.hp-profile-destinations strong { display: block; font-size: 15px; }
.hp-profile-destinations small { display: block; font-size: 12px; color: #766659; margin-top: 5px; }
.hp-profile-account { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; line-height: 1.5; margin: 24px 0; opacity: .85; }
.hp-profile-account > p { flex-basis: 100%; }
.hp-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 800px) {
  .hp-profile-hero__cover { padding: 36px 32px 44px; }
  .hp-profile-hero__identity { padding-inline: 32px; }
  .hp-profile-photo-note { padding-inline: 32px; }
  .hp-profile-edit-grid { grid-template-columns: 1.1fr 1fr; }
  .hp-profile-destinations { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .hp-profile-hero__identity { padding-inline: 18px; }
  .hp-profile-hero__name h3 { font-size: 21px; }
  .hp-profile-photo-picker { flex-basis: 100%; }
  .hp-profile-card { padding: 22px 18px; }
  .hp-profile-save-bar .hp-btn { width: 100%; }
}


/* Planman itinerary identity */
.hp-plan__pick-label {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .72;
}
.hp-plan__item {
  position: relative;
}
.hp-plan__item-body {
  min-width: 0;
}
#hp-provisional-itinerary .hp-plan__item:has(.hp-plan__pick-label) {
  border-radius: 22px;
}


/* Planman is the discovery front door, not a secondary promo. */
.hp-planman__kicker {
  margin: 0 0 .25rem;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .72;
}
.hp-planman__title {
  margin-top: 0;
}
.hp-planman__cta {
  font-weight: 800;
}


/* Place detail: answer the visit decision at a glance. */
.hp-place-detail__facts {
  display: grid;
  gap: .7rem;
  margin: 1rem 0;
}
.hp-place-detail__status,
.hp-place-detail__fact {
  display: grid;
  gap: .2rem;
  padding: .85rem 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
}
.hp-place-detail__status strong {
  font-size: 1.05rem;
  letter-spacing: .06em;
}
.hp-place-detail__status span,
.hp-place-detail__fact span {
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .68;
}
.hp-place-detail__fact strong {
  font-size: .95rem;
  line-height: 1.35;
}
.hp-place-detail__verified {
  font-weight: 750;
}


/* Your Happnen: personal discovery hub above profile settings. */
.hp-profile-happnen {
  margin: 1rem;
  padding: 1.1rem;
  border-radius: 26px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}
.hp-profile-happnen__intro h2 { margin: .25rem 0; }
.hp-profile-happnen__intro p { margin: 0; opacity: .78; }
.hp-profile-happnen__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .55rem;
  margin-top: 1rem;
}
.hp-profile-happnen__stats div {
  padding: .8rem .55rem;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  text-align: center;
}
.hp-profile-happnen__stats strong {
  display: block;
  font-size: 1.45rem;
}
.hp-profile-happnen__stats span {
  display: block;
  margin-top: .15rem;
  font-size: .7rem;
  opacity: .72;
}
.hp-profile-happnen__places {
  display: grid;
  gap: .5rem;
  margin-top: .8rem;
}
.hp-profile-happnen__places a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem .9rem;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  text-decoration: none;
  color: inherit;
}
.hp-profile-happnen__places span { opacity: .68; font-size: .78rem; }
@media (max-width: 520px) {
  .hp-profile-happnen__stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* Unified Saved: places are destinations, events keep their discovery cards. */
.hp-saved-places {
  display: grid;
  gap: .7rem;
  margin-bottom: 1.2rem;
}
.hp-saved-place {
  display: grid;
  grid-template-columns: 104px minmax(0,1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .65rem;
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  color: inherit;
  text-decoration: none;
}
.hp-saved-place .hp-place-cover {
  min-height: 78px;
  height: 78px;
  border-radius: 14px;
}
.hp-saved-place strong,
.hp-saved-place span { display: block; }
.hp-saved-place div > span {
  margin-top: .2rem;
  font-size: .76rem;
  opacity: .7;
}


.hp-saved-place--plan {
  grid-template-columns: minmax(0,1fr) auto;
  min-height: 48px;
  margin: .65rem 0;
}
.hp-saved-place--plan strong { overflow-wrap: anywhere; }
.hp-saved-place--plan div > span { font-size: .85rem; }

/* Following: businesses and mobile vendors the user wants to keep close. */
.hp-following__section {
  display: grid;
  gap: .65rem;
  margin-top: 1.2rem;
}
.hp-following__section h2 { margin: 0 0 .15rem; }
.hp-following__truck {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .8rem .9rem;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  color: inherit;
  text-decoration: none;
}
.hp-following__truck-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: rgba(255,255,255,.08);
  font-size: 1.35rem;
}
.hp-following__truck div > span {
  display: block;
  margin-top: .15rem;
  font-size: .78rem;
  opacity: .7;
}


/* Planman result payoff: once a plan exists, make the decision feel finished. */
.hp-planman-result-actions {
  color: #fffaf2;
  margin: 0 0 18px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background: rgba(15, 20, 28, 0.72);
  backdrop-filter: blur(16px);
}

.hp-planman-result-actions h2 {
  margin: 4px 0 6px;
  font-size: clamp(1.45rem, 6vw, 2.15rem);
  line-height: 1.02;
}

.hp-planman-result-actions > div > p:last-child {
  margin: 0;
  opacity: 0.78;
}

.hp-planman-result-actions .hp-planner__actions {
  margin-top: 16px;
}

.hp-planner--edit {
  margin-bottom: 18px;
}


/* Planman itinerary journey */
.hp-plan__item {
  position: relative;
  align-items: flex-start;
  overflow: visible;
}

.hp-plan__item-body {
  min-width: 0;
  width: 100%;
}

.hp-plan__cover {
  margin: -6px -6px 10px;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 6px);
}

.hp-plan__cover .hp-place-cover {
  min-height: 150px;
  border-radius: inherit;
}

.hp-plan__cover .hp-place-cover__image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.hp-plan__connector {
  position: absolute;
  left: 20px;
  bottom: -29px;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 44px;
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.hp-plan__connector span:last-child {
  font-size: 18px;
  line-height: 1;
  color: var(--accent);
}

#hp-confirmed-itinerary {
  gap: 30px;
}

@media (min-width: 640px) {
  .hp-plan__cover .hp-place-cover,
  .hp-plan__cover .hp-place-cover__image {
    min-height: 190px;
    height: 190px;
  }
}


/* Place imagery: real licensed photos when available; branded local identity when not. */
.hp-place-cover__fallback {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  min-height: inherit;
  padding: 20px 24px 46px;
  text-align: center;
}
.hp-place-cover__fallback-mark {
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  opacity: .78;
}
.hp-place-cover__fallback strong {
  max-width: 92%;
  font-size: clamp(20px, 5vw, 28px);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.hp-place-cover__fallback small {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .58;
}
.hp-place-cover__credit {
  position: absolute;
  z-index: 3;
  right: 8px;
  top: 8px;
  max-width: calc(100% - 16px);
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(10,14,18,.66);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  backdrop-filter: blur(8px);
}
.hp-place-cover__credit:hover,
.hp-place-cover__credit:focus-visible { text-decoration: underline; }


/* Focus sprint: mobile discovery readability and carousel framing. */
@media (max-width: 540px) {
  .hp-rail__track {
    grid-auto-columns: calc(100% - 34px);
    gap: 10px;
    padding-right: 34px;
  }

  .hp-live-mix__item,
  .hp-spot {
    min-width: 0;
    overflow: hidden;
  }
}

[data-time-phase="night"] .hp-place-card,
[data-time-phase="night"] .hp-spot,
[data-time-phase="night"] .hp-place-detail {
  color: #f7f6ff;
}

[data-time-phase="night"] .hp-place-card p,
[data-time-phase="night"] .hp-spot p,
[data-time-phase="night"] .hp-place-detail p,
[data-time-phase="night"] .hp-planner__hint,
[data-time-phase="night"] .hp-place-card__hours,
[data-time-phase="night"] .hp-place-card__price {
  color: #d9d6f7;
}

[data-time-phase="night"] .hp-place-card a,
[data-time-phase="night"] .hp-spot a,
[data-time-phase="night"] .hp-place-detail a {
  color: var(--accent);
}

[data-time-phase="night"] .hp-place-card__badge,
[data-time-phase="night"] .hp-spot__kind {
  color: #f0edff;
}

/* V2 planning controls follow the existing mobile planner surface. */
#hp-refine-form { display: grid; gap: .75rem; }
#hp-refine-request, #hp-plan-share-url { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: .75rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; }
#hp-plan-refinement .hp-planner__actions { margin-top: 1rem; }
#hp-confirmed-itinerary .hp-btn { min-height: 44px; }


/* Planman V2 results: show the route first, then tools. Arizona color continues
   below the scenic header instead of ending in a stack of plain white bubbles. */
.hp-plan {
  --plan-berry: #471b42;
  --plan-coral: #f75275;
  --plan-amber: #ffb45c;
  --plan-cream: #fff5e6;
  background:
    radial-gradient(ellipse at 92% 42%, rgba(255, 154, 77, 0.22), transparent 58%),
    linear-gradient(180deg, rgba(85, 33, 68, 0.06) 0%, rgba(85, 33, 68, 0.82) 34%, #321a42 100%);
  border-radius: 0 0 28px 28px;
  padding-bottom: 28px;
}

.hp-planman-itinerary-intro {
  padding: 8px 6px 18px;
  color: #fff8ec;
  text-shadow: 0 2px 16px rgba(38, 13, 34, 0.8);
}

.hp-planman-itinerary-intro h2 {
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1.12;
  margin: 4px 0 6px;
}

.hp-planman-itinerary-intro p:last-child {
  margin: 0;
  color: #fff0d8;
}

.hp-plan #hp-confirmed-itinerary,
.hp-plan #hp-provisional-itinerary .hp-plan__list {
  gap: 18px;
  margin-bottom: 22px;
}

.hp-plan .hp-plan__item {
  background: linear-gradient(145deg, #fff8ed 0%, #ffe4d0 100%);
  color: #34172f;
  border: 1px solid rgba(255, 185, 132, 0.8);
  border-left: 5px solid var(--plan-coral);
  border-radius: 16px 27px 18px 18px;
  box-shadow: 0 12px 28px rgba(37, 12, 37, 0.25);
}

.hp-plan .hp-plan__item:nth-child(even) {
  border-left-color: #ff9c37;
  background: linear-gradient(145deg, #fff8eb 0%, #ffe7d9 100%);
}

.hp-plan .hp-plan__item .hp-plan__when,
.hp-plan .hp-plan__item .hp-plan__event,
.hp-plan .hp-plan__item .hp-plan__event a {
  color: #381631;
}

.hp-plan .hp-plan__item .hp-plan__venue,
.hp-plan .hp-plan__item .hp-plan__price,
.hp-plan .hp-plan__item .hp-plan__note {
  color: #57364a;
}

.hp-plan .hp-plan__index {
  background: linear-gradient(145deg, #ff5278, #ffa143);
  color: #35112c;
  box-shadow: 0 4px 12px rgba(142, 43, 67, 0.22);
}

.hp-plan .hp-plan__item .hp-btn,
.hp-plan #hp-provisional-itinerary .hp-btn {
  background: #fff1e2;
  border: 1px solid #cf9b9c;
  color: #4b1b41;
  border-radius: 14px;
  font-weight: 800;
  box-shadow: none;
}

.hp-plan .hp-planner {
  background: linear-gradient(145deg, #fff4e5 0%, #ffdfcc 100%);
  color: #37182f;
  border: 1px solid rgba(255, 179, 131, 0.8);
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(37, 12, 37, 0.16);
}

.hp-plan .hp-planner__hint {
  color: #fff0e4;
  text-shadow: 0 1px 6px rgba(40, 16, 36, 0.7);
}

.hp-plan .hp-planner .hp-planner__hint {
  color: #51344c;
  text-shadow: none;
}

.hp-plan .hp-planman-reaction {
  background: linear-gradient(110deg, #fff3e2, #ffe1c9);
  color: #411d3a;
  border: 1px solid #e5aeaa;
  border-left: 4px solid #f65d78;
  border-radius: 15px;
}

.hp-plan .hp-planman-result-actions {
  background: linear-gradient(125deg, #4d204d 0%, #71314b 55%, #9b493f 100%);
  border: 1px solid rgba(255, 195, 146, 0.52);
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(37, 12, 37, 0.25);
}

.hp-plan .hp-planman-result-actions .hp-planner__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hp-plan .hp-planman-result-actions .hp-btn {
  min-height: 48px;
  white-space: normal;
  line-height: 1.2;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 229, 201, 0.6);
  color: #35152f;
  background: linear-gradient(130deg, #ffb65e, #ff7e74);
  font-weight: 850;
  box-shadow: 0 5px 12px rgba(29, 9, 32, 0.18);
}

.hp-plan .hp-planman-result-actions .hp-btn:last-child {
  background: linear-gradient(130deg, #ffe6c2, #ffc8a5);
}

.hp-plan .hp-planman-result-actions .hp-btn:focus-visible,
.hp-plan .hp-plan__item .hp-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.hp-plan .hp-plan__back-link {
  background: #ffe5cf;
  color: #421b3b;
  border: 1px solid #e6b0a5;
  border-radius: 14px;
}

.hp-plan .hp-plan__back {
  padding: 8px 4px 0;
}

@media (max-width: 380px) {
  .hp-plan .hp-planman-result-actions .hp-planner__actions {
    grid-template-columns: 1fr;
  }
}


/* Discovery home: compact utility controls, with the content doing the talking. */
.hp-discovery .hp-area-selector {
  display: block;
  margin: 8px 0 10px;
  max-width: 260px;
}
.hp-discovery .hp-area-selector label {
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
}
.hp-discovery .hp-area-selector select {
  min-height: 38px;
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  border-width: 1px;
  border-radius: 10px;
}
.hp-discovery .hp-planman {
  margin-top: 8px;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  border-radius: 16px;
  box-shadow: none;
}
.hp-discovery .hp-planman__badge { width: 42px; height: 42px; object-fit: contain; }
.hp-discovery .hp-planman__brand { flex: 0 0 auto; }
.hp-discovery .hp-planman__copy { flex: 1 1 85px; padding: 0; border: 0; }
.hp-discovery .hp-planman__kicker { font-size: 9px; }
.hp-discovery .hp-planman__title { font-size: 14px; }
.hp-discovery .hp-planman__cta {
  min-height: 38px;
  padding: 7px 11px;
  font-size: 12px;
  box-shadow: none;
}
@media (min-width: 640px) {
  .hp-discovery .hp-planman {
    display: flex;
    padding: 10px 14px;
    gap: 12px;
  }
  .hp-discovery .hp-planman__copy { border: 0; padding: 0; }
}


/* Keep policy links readable on the dark discovery panels. */
#hp-google-places .hp-planner__hint a,
.hp-legal a {
  color: #43ffc5;
}

/* Keep Planman visible near the top without an oversized mobile hero. */
.hp-discovery .hp-planman {
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  text-align: left;
  gap: 8px 12px;
  margin: 10px 0 14px;
  padding: 12px 14px;
}
.hp-discovery .hp-planman__badge { width: 64px; }
.hp-discovery .hp-planman__title { line-height: 1.25; font-size: clamp(16px, 4.1vw, 20px); }
.hp-discovery .hp-planman__cta { grid-column: 1 / -1; width: 100%; }
@media (min-width: 640px) {
  .hp-discovery .hp-planman { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .hp-discovery .hp-planman__badge { width: 76px; }
  .hp-discovery .hp-planman__cta { grid-column: auto; width: auto; }
}

/* Compact, nonblocking guest personalization on the discovery homepage. */
.hp-vibe-onboarding{margin:12px 14px 18px;padding:16px;border:1px solid rgba(255,255,255,.2);border-radius:20px;background:rgba(18,23,39,.75);color:#fff}
.hp-vibe-onboarding__heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hp-vibe-onboarding__heading h2{font-size:1.35rem;margin:4px 0}
.hp-vibe-onboarding__heading p{font-size:.9rem;line-height:1.4;margin:5px 0 12px;max-width:38rem}
.hp-vibe-onboarding__later{background:transparent;color:inherit;border:0;text-decoration:underline;cursor:pointer;white-space:nowrap;padding:6px 0}
.hp-vibe-onboarding__picks{display:flex;flex-wrap:wrap;gap:8px}
.hp-vibe-onboarding__pill{border-radius:99px;padding:9px 13px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.09);color:inherit;cursor:pointer;font:inherit;font-size:.88rem}
.hp-vibe-onboarding__pill[aria-pressed="true"]{background:#f6c36c;border-color:#f6c36c;color:#171b29;font-weight:700}
.hp-vibe-onboarding__pill:focus-visible,.hp-vibe-onboarding__later:focus-visible{outline:3px solid #f6c36c;outline-offset:3px}
.hp-vibe-onboarding__status{font-size:.82rem;opacity:.9;margin:12px 0 0}
@media(min-width:780px){.hp-vibe-onboarding{margin-inline:auto;max-width:960px;padding:20px 24px}}

/* Focused homepage polish; one location selector and a compact Planman entry. */
.hp-discovery .hp-top { min-height: 0; padding-block: 8px; }
.hp-discovery .hp-top__brand { margin: 0; }
.hp-discovery .hp-top__logo { width: 130px; max-height: 98px; object-fit: contain; }
.hp-discovery .hp-current-location { margin: 0 0 8px; }
.hp-current-location__device { min-height: 44px; padding: 8px 12px; border-radius: 12px; cursor: pointer; }
.hp-discovery .hp-greeting { margin: 8px 0; }
.hp-discovery .hp-greeting__title { font-size: clamp(22px, 5.8vw, 32px); line-height: 1.15; }
.hp-discovery .hp-greeting__sub { margin: 4px 0; font-size: .9rem; }
.hp-discovery .hp-planman { padding: 10px 12px; margin: 8px 0 10px; gap: 6px 10px; grid-template-columns: 44px minmax(0, 1fr) auto; }
.hp-discovery .hp-planman__badge { width: 44px; }
.hp-discovery .hp-planman__kicker { margin: 0 0 3px; font-size: .65rem; }
.hp-discovery .hp-planman__title { margin: 0; font-size: 14px; line-height: 1.3; }
.hp-discovery .hp-planman__cta { grid-column: auto; width: auto; min-height: 44px; padding: 8px 12px; font-size: .8rem; }
.hp-vibe-onboarding__pill[aria-pressed="true"] { background: #ffd38a; border: 2px solid #a65800; color: #211708; box-shadow: 0 0 0 1px #ffd38a; }
.hp-vibe-onboarding__pill { min-height: 44px; }
.hp-vibe-onboarding__check { display: inline-block; width: 1em; margin-right: 4px; font-weight: 800; }
.hp-vibe-onboarding__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.hp-vibe-onboarding__status { margin: 0; }
.hp-vibe-onboarding__continue { min-height: 44px; padding: 10px 16px; border: 2px solid #ffd38a; border-radius: 99px; background: #ffd38a; color: #211708; font: inherit; font-weight: 700; cursor: pointer; }
.hp-vibe-onboarding__continue:disabled { background: #384154; border-color: #768196; color: #e1e7f0; cursor: default; }
.hp-vibe-onboarding__continue:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 359px) {
  .hp-discovery .hp-planman { grid-template-columns: 36px minmax(0, 1fr); }
  .hp-discovery .hp-planman__badge { width: 36px; }
  .hp-discovery .hp-planman__cta { grid-column: 1 / -1; width: 100%; }
  .hp-vibe-onboarding__heading { flex-wrap: wrap; }
}

.hp-discovery .hp-top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.hp-discovery .hp-top__brand { grid-column: 1; justify-content: flex-start; }
.hp-discovery .hp-top__conditions { grid-column: 2; grid-row: 1; }

.hp-discovery #hp-weather { min-width: 100px; }

/* Quest Corner lists stay in document flow so iOS Safari scrolls the page. */
.hp-quests,
.hp-quests .hp-panel,
.hp-quest-destinations {
  height: auto;
  max-height: none;
  overflow: visible;
}
.hp-quests { touch-action: pan-y; }
.hp-quests .hp-panel__title { display: block; white-space: normal; line-height: 1.35; overflow-wrap: anywhere; }
.hp-quests .hp-quest-category,
.hp-quests .hp-quest-option {
  display: block;
  margin: 8px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.hp-quests .hp-quest-category { min-height: 44px; }
.hp-quests .hp-quest-category > span,
.hp-quests .hp-quest-option > span { display: block; overflow-wrap: anywhere; }
.hp-quests .hp-quest-option { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.hp-quests .hp-quest-option > strong { font-size: 1rem; }
.hp-quests .hp-quest-option > span { color: var(--ink-muted); font-size: .84rem; }
.hp-quest-destinations { display: grid; gap: 8px; margin-top: 10px; }
.hp-quest-destination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
}
.hp-quest-destination__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.hp-quest-destination__copy { display: grid; min-width: 0; gap: 1px; }
.hp-quest-destination__copy strong { overflow-wrap: anywhere; font-size: .96rem; line-height: 1.25; }
.hp-quest-destination__locality { color: var(--ink-muted); font-size: .76rem; line-height: 1.25; }
.hp-quest-destination__arrow { flex: 0 0 auto; color: var(--link); font-size: 1.5rem; line-height: 1; }
.hp-quest-destination__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
}
.hp-quest-destination__toggle:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.hp-quest-destination__toggle--visited { border-color: #33846d; background: #e4f5eb; color: #155742; }

/* Shared compact navigation and non-modal sidebar. */
.hp-app-navigation { position: relative; z-index: 45; display: flex; align-items: center; gap: 6px; padding: calc(8px + env(safe-area-inset-top)) 0 4px; min-width: 0; }
.hp-toolbar__icon { display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; }
.hp-app-navigation summary { list-style: none; }
.hp-app-navigation summary::-webkit-details-marker { display: none; }
.hp-app-navigation .hp-current-location { flex: 1; min-width: 0; margin: 0; font-size: 13px; }
.hp-toolbar__location { display: flex; align-items: center; gap: 6px; min-height: 44px; min-width: 0; flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; cursor: pointer; }
.hp-app-navigation .hp-current-location summary { width: auto; max-width: 100%; background: var(--surface); padding: 8px 10px; border-radius: 14px; }
.hp-toolbar__location .hp-icon { flex-shrink: 0; }
.hp-toolbar__location .hp-top__city-name { flex: 1; }
.hp-toolbar__location-panel { position: absolute; top: 100%; left: 0; right: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 30px var(--shadow); }
.hp-toolbar__location-panel .hp-area-selector { max-width: none; margin: 10px 0 0; }
.hp-toolbar__location-panel select { width: 100%; min-height: 44px; font-size: 16px; color: var(--ink); background: var(--surface-2); }
.hp-toolbar__location-panel .hp-current-location__device { width: 100%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 700; }
.hp-menu__panel { position: absolute; top: 100%; left: 0; width: min(320px, 100%); max-height: 75vh; max-height: 75dvh; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 30px var(--shadow); }
.hp-menu__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.hp-menu__heading strong { font-size: 1.1rem; }
.hp-menu__link { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 6px 10px; min-height: 48px; padding: 10px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 700; }
.hp-menu__link:hover { background: var(--surface-2); }
.hp-menu__link--quest { background: var(--surface-2); border: 1px solid var(--line); }
.hp-menu__link small { grid-column: 2; color: var(--ink-muted); font-weight: 500; font-size: .8rem; }
.hp-app-navigation a:focus-visible, .hp-app-navigation summary:focus-visible, .hp-app-navigation button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Issue #147: a rail card must always paint its own surface and ink so its
   cover, name, description and action stay visible in every phase, and its
   height must come from its content (percent heights collapse in iOS Safari). */
.hp-spot { background: var(--surface); color: var(--ink); min-height: 120px; }
.hp-spots > .hp-spot { height: auto; }
.hp-spot__link { height: auto; min-height: 100%; color: var(--ink); }
.hp-spot h3 { color: var(--ink); }
.hp-spot__action { color: var(--link, var(--accent)); }

/* Quest actions require a live LiveView socket; do not show a false reconnect banner while connected. */
.hp-quest-connection-warning { display: none; margin: 12px 0; padding: 14px; border: 1px solid #e7b968; border-radius: 12px; background: #362b20; color: #fff2d8; }
.phx-disconnected .hp-quest-connection-warning { display: block; }
.hp-quest-connection-warning button { min-height: 44px; margin-top: 10px; padding: 8px 14px; border-radius: 10px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }



/* Compact discovery entry: friendly greeting fades and yields space to nearby shelves. */
.hp-discovery .hp-greeting {
  overflow: hidden;
  animation: hp-greeting-arrival 800ms ease-in 3.2s both;
}
@keyframes hp-greeting-arrival {
  from { opacity: 1; max-height: 160px; margin-block: 8px; visibility: visible; }
  to { opacity: 0; max-height: 0; margin-block: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-discovery .hp-greeting {
    animation: hp-greeting-hide 1ms steps(1,end) 3.2s both;
  }
  @keyframes hp-greeting-hide {
    from { opacity: 1; max-height: 160px; margin-block: 8px; visibility: visible; }
    to { opacity: 0; max-height: 0; margin-block: 0; visibility: hidden; }
  }
}
/* A location pin + current locality, not another prominent input bar. */
.hp-app-navigation .hp-toolbar__location,
.hp-app-navigation .hp-current-location summary {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 10px;
  padding: 6px 4px;
  font-weight: 600;
}
.hp-app-navigation .hp-current-location { min-width: 0; }
.hp-app-navigation .hp-toolbar__location:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
.hp-app-navigation .hp-toolbar__location-panel {
  background: var(--surface);
}
.hp-discovery .hp-top__conditions,
.hp-discovery .hp-weather {
  opacity: .75;
}
.hp-discovery .hp-weather__reading { font-weight: 500; }

.hp-detail-img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 16px; margin-bottom: 1rem; background: #1b2a2a; }
.hp-detail-img[hidden] { display: none; }
.hp-october__art .hp-detail-img { margin: 0; border-radius: 0; max-height: none; }

/* Category photos use the same local asset delivery as the homepage artwork. */
[data-photo-frame] { position: relative; }
.hp-stock-label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(12, 18, 23, .68);
  color: #fff;
  font-size: 9px;
  line-height: 1.3;
  font-weight: 600;
  pointer-events: none;
}
.hp-stock-label[hidden], [data-original-credit][hidden] { display: none; }
.hp-place-cover--logo .hp-place-cover__image[data-stock-photo="true"] {
  object-fit: cover;
  padding: 0;
}
.hp-detail-photo { overflow: hidden; border-radius: 16px; }
.hp-detail-photo .hp-detail-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hp-detail-photo .hp-detail-img[hidden] { display: none; }

.hp-october__art:has(img:not([hidden])) .hp-october__lettering {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  padding-bottom: 32px;
  background: linear-gradient(0deg, rgba(12, 18, 23, .8), rgba(12, 18, 23, .06));
}

.hp-place-cover .hp-stock-label { top: 8px; bottom: auto; }

.hp-place-cover:has(.hp-stock-label:not([hidden])) .hp-place-cover__credit { top: 32px; }


/* Dedicated premium, Runway-inspired account entry; scoped to avoid discovery regressions. */
.hp-auth { min-height: 100dvh; background: #fffdfa; color: #221c23; font-family: var(--font-sans); }
.hp-auth__shell { width: min(100%, 520px); margin: 0 auto; padding: 28px 26px max(48px, env(safe-area-inset-bottom)); }
.hp-auth__back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 650; color: #5b4d51; text-decoration: none; }
.hp-auth__content { padding-top: clamp(56px, 10vh, 124px); }
.hp-auth__brand { display: flex; align-items: center; justify-content: center; gap: 9px; color: #452d36; font-size: 12px; font-weight: 900; letter-spacing: .15em; }
.hp-auth__brand-mark { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg,#ff6b5f,#ffae58); color: #fff; font-size: 20px; }
.hp-auth__title { margin: 28px 0 10px; font-size: clamp(30px, 7vw, 39px); font-weight: 800; line-height: 1.13; text-align: center; letter-spacing: -.045em; }
.hp-auth__subtitle { margin: 0 auto 34px; max-width: 370px; color: #6e6165; font-size: 16px; line-height: 1.55; text-align: center; }
.hp-auth__actions { display: grid; gap: 14px; }
.hp-auth__provider-form { display: flex; flex-direction: column; gap: 9px; }
.hp-auth__provider { width: 100%; min-height: 56px; display: flex; justify-content: center; align-items: center; gap: 13px; border: 1px solid #dcd7da; border-radius: 16px; background: #fff; color: #292328; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(42,29,34,.035); }
.hp-auth__provider:active { transform: translateY(1px); background: #faf8f7; }
.hp-auth__google-icon { font-family: Arial,sans-serif; font-size: 22px; font-weight: 800; color: #4285f4; }
.hp-auth__apple-icon { font-size: 21px; color: #1e1b1d; }
.hp-auth__import { display: flex; align-items: flex-start; gap: 10px; padding: 0 4px 5px; color: #60565a; font-size: 13px; line-height: 1.4; cursor: pointer; }
.hp-auth__import input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #f37152; }
.hp-auth__divider { position: relative; margin: 6px 0; color: #84787e; text-align: center; font-size: 13px; }
.hp-auth__divider::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: #e7e1e1; }
.hp-auth__divider span { position: relative; padding: 0 15px; background: #fffdfa; }
.hp-auth__email-form { display: grid; gap: 10px; }
.hp-auth__email-form label { font-size: 13px; font-weight: 700; }
.hp-auth__email-form input { width: 100%; min-height: 54px; padding: 12px 16px; border: 1px solid #dcd7da; border-radius: 14px; background: #fff; color: #241e23; font: inherit; font-size: 16px; }
.hp-auth__email-submit { min-height: 52px; border: 0; border-radius: 15px; background: #2b2328; color: white; font: inherit; font-size: 16px; font-weight: 750; cursor: pointer; }
.hp-auth__guest { margin-top: 8px; text-align: center; }
.hp-auth__text-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: #8e3b2d; font-size: 15px; font-weight: 750; text-underline-offset: 3px; }
.hp-auth__note, .hp-auth__footer { color: #766b70; font-size: 13px; line-height: 1.55; text-align: center; }
.hp-auth__footer { margin: 40px auto 0; max-width: 350px; }
.hp-auth__error { color: #a5193b; font-size: 14px; }
.hp-auth__notice { padding: 20px; border: 1px solid #e6dfe0; border-radius: 16px; text-align: center; }
.hp-auth__notice h2 { margin-bottom: 8px; }
@media (min-width: 760px) { .hp-auth__shell { padding-top: 32px; } .hp-auth__content { padding-top: 104px; } }