/* Desktop Wheel composition: keep the introduction and interaction in separate columns. */
@media (min-width: 1100px) and (pointer: fine) and (hover: hover) {
  #page-wheel.page-wheel.active {
    display: grid !important;
    grid-template-columns: minmax(330px, 0.7fr) minmax(620px, 1.3fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  #page-wheel > .page-hero {
    grid-column: 1 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 30px !important;
  }

  #page-wheel#page-wheel#page-wheel > .page-hero > .hero-copy {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    grid-template-areas:
      "mark eyebrow"
      "mark title"
      ". prompt"
      ". subhead"
      ". actions" !important;
    align-content: center !important;
    align-items: start !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
    height: 100% !important;
    min-width: 0 !important;
  }

  #page-wheel#page-wheel#page-wheel > .page-hero > .hero-copy > .page-mark {
    grid-area: 2 / 1 / 3 / 2 !important;
    align-self: start !important;
    margin-top: 19px !important;
  }

  #page-wheel#page-wheel#page-wheel > .page-hero > .hero-copy > .eyebrow {
    grid-area: eyebrow !important;
    align-self: end !important;
    margin: 0 !important;
  }

  #page-wheel#page-wheel#page-wheel > .page-hero > .hero-copy > h1 {
    grid-area: title !important;
    align-self: start !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-top: 0 !important;
    font-size: clamp(42px, 3.4vw, 58px) !important;
    line-height: 0.98 !important;
    white-space: normal !important;
  }

  #page-wheel#page-wheel#page-wheel > .page-hero > .hero-copy > .wheel-hero-prompt {
    grid-area: prompt !important;
    margin: 12px 0 0 !important;
  }

  #page-wheel#page-wheel#page-wheel > .page-hero > .hero-copy > p {
    grid-area: subhead !important;
    width: auto !important;
    max-width: 27ch !important;
    margin: 2px 0 0 !important;
  }

  #page-wheel#page-wheel#page-wheel > .page-hero > .hero-copy > .hero-actions {
    grid-area: 5 / 1 / 6 / -1 !important;
    justify-self: center !important;
    width: min(100%, 260px) !important;
    margin: 14px 0 0 !important;
  }

  #page-wheel#page-wheel#page-wheel > .page-hero > .hero-copy > .hero-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
  }

  #page-wheel > .wheel-stage-panel {
    grid-column: 2 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    margin-top: 0 !important;
  }
}

/* Center stacked hero actions against the panel, not the medallion-offset text column. */
@media (max-width: 760px), (pointer: coarse), (hover: none) {
  .page.page.page:not(#page-home):not(#page-paths) > .page-hero > .hero-copy > .hero-actions {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    justify-self: center !important;
    width: min(100%, 320px) !important;
    margin: 8px 0 0 !important;
  }
}

/* Paths uses a custom header; align its stacked description with the headline column. */
@media (min-width: 761px) and (max-width: 1099px) {
  #page-paths#page-paths .path-page-head > p {
    box-sizing: border-box !important;
    width: calc(100% - 50px) !important;
    max-width: none !important;
    margin-left: 50px !important;
  }
}

@media (min-width: 761px) and (max-width: 1099px) and (pointer: coarse),
       (min-width: 761px) and (max-width: 1099px) and (hover: none) {
  #page-paths#page-paths .path-page-head > p {
    width: calc(100% - 62px) !important;
    margin-left: 62px !important;
  }
}

@media (max-width: 760px) {
  #page-paths#page-paths .path-page-head > p {
    box-sizing: border-box !important;
    width: calc(100% - 56px) !important;
    max-width: none !important;
    margin-left: 56px !important;
  }
}

/* Keep Paths heading and description in one structural text column at every width. */
#page-paths#page-paths .path-page-head {
  grid-template-columns: minmax(0, 1fr) !important;
}

#page-paths#page-paths .path-page-title {
  width: 100% !important;
  min-width: 0 !important;
}

#page-paths#page-paths .path-page-title > div:last-child > p {
  width: 100% !important;
  max-width: 68ch !important;
  margin: 14px 0 0 !important;
}

/* The decorative record must not reserve a blank row in the narrow Home hero. */
@media (max-width: 760px), (pointer: coarse), (hover: none) {
  html body .app-shell #page-home#page-home#page-home .hero-title {
    padding: 46px 16px 24px !important;
  }

  html body .app-shell #page-home#page-home#page-home .hero-title-copy {
    padding-top: 0 !important;
  }

  html body .app-shell #page-home#page-home#page-home .home-hero .hero-title::after,
  html body .app-shell #page-home#page-home#page-home .hero-title::after {
    display: none !important;
  }
}

/* PWA-only chrome follows the same warm structural palette as the app. */
.mobile-install-nudge {
  border-color: var(--dh-border) !important;
  background: var(--dh-surface-2) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 760px), (pointer: coarse), (hover: none) {
  .launch-screen {
    background: var(--dh-bg) !important;
  }

  .launch-orb {
    box-shadow: none !important;
  }

  .mobile-install-nudge {
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
}

.guide-reader-close {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 72px !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

/* Mobile navigation opens as a compact destination grid, not a long menu stack. */
@media (max-width: 900px) {
  html body .site-nav.mobile-menu-open .nav-pill {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body .site-nav.mobile-menu-open .nav-pill .nav-link {
    justify-content: center !important;
    text-align: center !important;
  }

  html body .site-nav.mobile-menu-open .nav-profile-link {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* The three Home quick starts are peers and should share one clear treatment. */
.page-home .home-action-row > :is(.enter-btn, .home-action-secondary),
html body .app-shell #page-home #homePathCta {
  background-color: var(--dh-gold) !important;
  background-image: none !important;
  border-color: var(--dh-gold) !important;
  color: var(--dh-bg) !important;
  box-shadow: none !important;
}

.page-home .home-action-row > :is(.enter-btn, .home-action-secondary) :is(span, small),
html body .app-shell #page-home #homePathCta :is(span, small) {
  color: var(--dh-bg) !important;
}

/* Wheel chrome uses warm structural surfaces; only the disc artwork varies by slice. */
.page-wheel :is(.wheel-stage-panel, .wheel-stage, .wheel-pick-pop, #wheelResult) {
  background-image: none !important;
  border-color: var(--dh-border) !important;
  box-shadow: none !important;
}

.page-wheel :is(.wheel-stage-panel, #wheelResult) {
  background-color: var(--dh-surface) !important;
}

.page-wheel :is(.wheel-stage, .wheel-pick-pop) {
  background-color: var(--dh-surface-2) !important;
}

.page-wheel .wheel-mobile-categories {
  background: var(--dh-surface) !important;
  border-color: var(--dh-border) !important;
  box-shadow: none !important;
}

.page-wheel .wheel-disc,
.page:not(#page-home).page-wheel .wheel-disc {
  background: conic-gradient(
    from -15deg,
    var(--dh-gold) 0 8.333%,
    var(--dh-turquoise) 8.333% 16.666%,
    var(--dh-coral) 16.666% 25%,
    var(--dh-surface-2) 25% 33.333%,
    var(--dh-gold) 33.333% 41.666%,
    var(--dh-turquoise) 41.666% 50%,
    var(--dh-coral) 50% 58.333%,
    var(--dh-surface-2) 58.333% 66.666%,
    var(--dh-gold) 66.666% 75%,
    var(--dh-turquoise) 75% 83.333%,
    var(--dh-coral) 83.333% 91.666%,
    var(--dh-surface-2) 91.666% 100%
  ) !important;
}