/* AD8-016 — compact cinematic desktop override */

@media (min-width: 900px) {

  /* Prevent any horizontal overflow */
  html,
  body,
  .experience-main,
  .ad-experience,
  .ad-experience-stage,
  .ad-experience-view,
  .ad-local-interface,
  .ad-local-panel-host,
  .ad-local-panel,
  .hero-home,
  .hero-side-stack,
  .discord-panel,
  .discord-panel * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  html,
  body,
  .experience-main,
  .ad-experience,
  .ad-experience-stage,
  .ad-experience-view,
  .ad-local-panel,
  .hero-side-stack,
  .discord-panel {
    overflow-x: hidden !important;
  }

  /* Main working area */
  .ad-experience-stage {
    inset: 66px 78px 70px 78px !important;
  }

  .ad-local-interface {
    grid-template-columns: 58px minmax(0, 700px) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 790px !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  .ad-local-panel-host {
    width: 700px !important;
    max-width: 700px !important;
  }

  /* Left tabs */
  .ad-local-tabs {
    width: 58px !important;
    gap: 3px !important;
  }

  .ad-local-tab {
    width: 58px !important;
    min-height: 24px !important;
    padding: 3px 5px !important;

    font-size: 5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
  }

  /* Home two-column layout */
  .ad-view-home .hero-home {
    width: 690px !important;
    max-width: 690px !important;

    grid-template-columns: 285px 315px !important;
    gap: 30px !important;

    align-items: center !important;
    justify-content: center !important;
  }

  /* HOME LEFT */

  .ad-view-home .hero-copy {
    width: 285px !important;
    max-width: 285px !important;
  }

  .ad-view-home .hero-network-line .eyebrow {
    font-size: 5px !important;
    letter-spacing: .14em !important;
  }

  .ad-view-home .hero-copy h1 {
    width: 280px !important;
    max-width: 280px !important;

    margin: 0 0 7px !important;

    font-size: 22px !important;
    font-weight: 650 !important;

    line-height: .97 !important;
    letter-spacing: -.018em !important;
  }

  .ad-view-home .hero-tagline {
    margin: 0 0 7px !important;

    font-size: 5px !important;
    font-weight: 500 !important;

    line-height: 1.3 !important;
    letter-spacing: .14em !important;
  }

  .ad-view-home .lead {
    width: 270px !important;
    max-width: 270px !important;

    margin: 0 !important;

    font-size: 7px !important;
    font-weight: 400 !important;

    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }

  /* Redundant CTA is not needed */
  #heroDiscordCta {
    display: none !important;
  }

  .ad-view-home .hero-actions {
    margin-top: 6px !important;
  }

  /* RIGHT DISCORD MODULE */

  .ad-view-home .hero-side-stack {
    width: 315px !important;
    max-width: 315px !important;
    min-width: 0 !important;
  }

  .ad-view-home .discord-panel {
    width: 315px !important;
    max-width: 315px !important;
    min-width: 0 !important;

    padding: 7px !important;

    border-radius: 6px !important;
  }

  .ad-view-home .discord-panel-topline {
    margin-bottom: 4px !important;
  }

  .ad-view-home .discord-panel-kicker {
    font-size: 4.5px !important;
  }

  .ad-view-home .discord-panel-topline strong {
    font-size: 7px !important;
  }

  .ad-view-home .discord-live-state {
    padding: 3px 5px !important;
    font-size: 5px !important;
  }

  .ad-view-home .discord-invite-banner {
    width: 100% !important;
    min-width: 0 !important;

    padding: 5px 6px !important;
    gap: 6px !important;
  }

  .ad-view-home .discord-brand-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;

    font-size: 5px !important;
  }

  .ad-view-home .discord-invite-banner strong {
    font-size: 7px !important;
    font-weight: 600 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .ad-view-home .discord-invite-banner span {
    font-size: 5px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Metrics must fit exactly */
  .ad-view-home .discord-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    width: 100% !important;
    min-width: 0 !important;

    overflow: hidden !important;
  }

  .ad-view-home .discord-metrics > div {
    width: auto !important;
    min-width: 0 !important;
    min-height: 32px !important;

    padding: 3px 4px !important;

    overflow: hidden !important;
  }

  .ad-view-home .discord-metrics strong {
    font-size: 7px !important;
  }

  .ad-view-home .discord-metrics small {
    font-size: 4.5px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .ad-view-home .metric-icon {
    transform: scale(.45) !important;
  }

  /* Online list */
  .ad-view-home .discord-online {
    padding: 4px 5px !important;
  }

  .ad-view-home .discord-section-label {
    margin-bottom: 3px !important;
    font-size: 4.5px !important;
  }

  .ad-view-home .discord-online-list {
    gap: 4px !important;
  }

  .ad-view-home .discord-member {
    gap: 4px !important;
  }

  .ad-view-home .discord-member-avatar {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;

    font-size: 5px !important;
  }

  .ad-view-home .discord-member strong {
    font-size: 5.5px !important;
  }

  .ad-view-home .discord-member small {
    font-size: 4.5px !important;
  }

  /* Single Discord CTA */
  .ad-view-home .discord-open-button {
    min-height: 21px !important;

    padding: 3px 5px !important;

    font-size: 5.5px !important;
  }

  .ad-view-home .discord-panel-foot {
    margin-top: 3px !important;

    font-size: 4.5px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Network status */
  .ad-view-home .network-status-card {
    width: 315px !important;
    max-width: 315px !important;

    padding: 5px 7px !important;
  }

  .ad-view-home .network-status-heading,
  .ad-view-home .signal-label,
  .ad-view-home .network-progress-meta,
  .ad-view-home .signal-stats {
    font-size: 4.5px !important;
  }

  .ad-view-home .status-radar {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }

  .ad-view-home .network-status-copy strong {
    font-size: 5.5px !important;
  }

  .ad-view-home .network-status-copy h2 {
    font-size: 6px !important;
  }

  .ad-view-home .network-status-copy p {
    font-size: 4.5px !important;
  }

  /* EX101 */
  .ad-view-ex101 .page-hero h1 {
    font-size: 20px !important;
    line-height: .98 !important;
  }

  .ad-view-ex101 .page-hero .lead {
    font-size: 7px !important;
  }

  .ad-view-ex101 .page-hero .eyebrow,
  .ad-view-ex101 .section-heading .eyebrow {
    font-size: 5px !important;
  }

  .ad-view-ex101 .section-heading h2 {
    font-size: 12px !important;
  }

  .ad-view-ex101 .metric-card span {
    font-size: 4.5px !important;
  }

  .ad-view-ex101 .metric-card strong {
    font-size: 11px !important;
  }

  .ad-view-ex101 .tag-grid span {
    font-size: 5px !important;
  }

  .ad-view-ex101 .feature-card h3 {
    font-size: 7px !important;
  }

  .ad-view-ex101 .feature-card p {
    font-size: 5px !important;
  }

  /* Persistent HUD */
  .ad-experience-hud {
    font-size: 5px !important;
  }

  .ad-experience-hud strong {
    font-size: 7px !important;
  }

  .ad-exp-hud-center,
  .ad-exp-hud-right {
    font-size: 5px !important;
  }

  /* Bottom dock */
  .ad-experience-dock {
    width: 720px !important;
    min-height: 30px !important;
  }

  .ad-experience-dock a {
    min-height: 30px !important;
    padding: 3px 4px !important;
  }

  .ad-experience-dock a span {
    font-size: 4.5px !important;
  }

  .ad-experience-dock a strong {
    font-size: 5.5px !important;
  }
}

/* AD8-016 APPROVED CLEANUP START */

@media (min-width: 900px) {

  /*
   * Preserve the user-approved compact scale.
   * Only finish the right-side panel behavior.
   */

  .ad-view-home .hero-side-stack {
    display: grid !important;
    grid-template-rows: auto auto !important;

    align-content: center !important;
    align-items: start !important;

    gap: 8px !important;

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
  }

  .ad-view-home .discord-panel {
    height: auto !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: hidden !important;

    scrollbar-width: none !important;
  }

  .ad-view-home .discord-panel::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .ad-view-home .discord-online,
  .ad-view-home .discord-online-list,
  .ad-view-home .discord-metrics {
    height: auto !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .ad-view-home .network-status-card {
    margin: 0 !important;

    height: auto !important;
    max-height: none !important;

    overflow: hidden !important;
  }

  /*
   * Open Discord is the single visible Discord action.
   * Preserve heroDiscordCta in the DOM for existing JS/tests.
   */

  .ad-view-home #heroDiscordCta {
    display: none !important;
  }
}

/* AD8-016 APPROVED CLEANUP END */
/* ============================================================
   AD8-016 — APPROVED COMPACT LAYOUT PASS 06
   Rebalance whitespace, tab rail, and bottom navigation.
   Typography scale intentionally unchanged.
   ============================================================ */

@media (min-width: 1100px) {

  /* Pull the main experience upward to use the empty upper field. */
  .ad-experience-stage {
    inset: 48px 78px 92px 78px !important;
  }

  /*
   * Keep tabs visually attached to the Home content instead
   * of floating far out in the left field.
   */
  .ad-local-interface {
    grid-template-columns: 54px minmax(0, 700px) !important;
    gap: 10px !important;

    max-width: 770px !important;

    margin: 0 auto !important;

    transform: translateX(-18px) !important;
  }

  .ad-local-tabs {
    width: 54px !important;

    justify-content: center !important;

    transform: translateY(18px) !important;
  }

  .ad-local-tab {
    width: 54px !important;
  }

  /*
   * Raise the actual Home composition.
   */
  .ad-view-home .hero-home {
    align-self: start !important;

    margin-top: 28px !important;
  }

  /*
   * Right-side stack follows the same upper alignment,
   * eliminating the large blank band above it.
   */
  .ad-view-home .hero-side-stack {
    align-self: start !important;

    margin-top: 4px !important;
  }

  /*
   * Slightly tighten the two Home columns without changing
   * any approved font sizes.
   */
  .ad-view-home .hero-home {
    grid-template-columns: 285px 315px !important;
    gap: 24px !important;
  }

  /*
   * Bottom navigation: narrower, raised, and visually lighter.
   */
  .ad-experience-dock {
    width: 640px !important;

    left: 50% !important;
    right: auto !important;

    bottom: 25px !important;

    transform: translateX(-50%) !important;

    min-height: 28px !important;
  }

  .ad-experience-dock a {
    min-height: 28px !important;
    padding: 2px 4px !important;
  }

  /*
   * Reduce the dock's visual weight without altering text size.
   */
  .ad-experience-dock {
    background:
      linear-gradient(
        180deg,
        rgba(7, 20, 35, .76),
        rgba(2, 8, 16, .82)
      ) !important;

    border-color: rgba(126, 226, 255, .15) !important;

    box-shadow:
      0 10px 30px rgba(0,0,0,.28),
      inset 0 1px rgba(255,255,255,.018) !important;
  }

  /*
   * Keep the vertical EX101 rail subtle and out of the way.
   */
  .ad-experience-rail {
    left: 29px !important;

    opacity: .52 !important;
  }
}

/* AD8-016 — APPROVED COMPACT LAYOUT PASS 06 END */
/* ============================================================
   AD8-016 — CINEMATIC LAYOUT PASS 07
   Use viewport width. Preserve approved typography.
   ============================================================ */

@media (min-width: 1100px) {

  /*
   * Stop compressing the entire experience into a narrow
   * centered 700px column.
   */

  .ad-experience-stage {
    inset:
      48px
      clamp(44px, 4vw, 82px)
      88px
      clamp(44px, 4vw, 82px) !important;
  }

  .ad-local-interface {
    width: 100% !important;
    max-width: 1180px !important;

    grid-template-columns:
      60px
      minmax(0, 1080px) !important;

    gap: 12px !important;

    margin: 0 auto !important;

    transform: none !important;
  }

  .ad-local-panel-host {
    width: 100% !important;
    max-width: 1080px !important;
  }

  /*
   * HOME
   *
   * Use the viewport:
   * left tabs | hero | air | Discord/status
   */

  .ad-view-home .hero-home {
    width: 100% !important;
    max-width: 1080px !important;

    grid-template-columns:
      minmax(300px, 390px)
      minmax(390px, 470px) !important;

    justify-content: space-between !important;

    gap: clamp(70px, 8vw, 150px) !important;

    margin:
      18px
      auto
      0 !important;
  }

  /*
   * Move the hero into the left empty field instead of
   * keeping everything clustered around center.
   */

  .ad-view-home .hero-copy {
    width: 100% !important;
    max-width: 390px !important;

    justify-self: start !important;
  }

  .ad-view-home .hero-copy h1 {
    width: auto !important;
    max-width: 330px !important;
  }

  .ad-view-home .lead {
    width: auto !important;
    max-width: 360px !important;
  }

  /*
   * Pull the local tabs toward the hero so they remain
   * visually connected while occupying the left field.
   */

  .ad-local-tabs {
    width: 60px !important;

    transform: translateY(40px) !important;
  }

  .ad-local-tab {
    width: 60px !important;
  }

  /*
   * Push the right systems outward so the far-right side of
   * the screen becomes part of the composition.
   */

  .ad-view-home .hero-side-stack {
    width: 100% !important;
    max-width: 470px !important;

    justify-self: end !important;

    margin-top: 0 !important;
  }

  .ad-view-home .discord-panel,
  .ad-view-home .network-status-card {
    width: 100% !important;
    max-width: 470px !important;
  }

  /*
   * Discord contents remain compact. Only the container gets
   * room to breathe horizontally.
   */

  .ad-view-home .discord-invite-banner {
    width: 100% !important;
  }

  .ad-view-home .discord-metrics {
    width: 100% !important;
  }

  .ad-view-home .discord-online {
    width: 100% !important;
  }

  /*
   * Make the network status card line up exactly with Discord.
   */

  .ad-view-home .network-status-card {
    margin-top: 2px !important;
  }

  /*
   * Top HUD:
   * center it in the large upper field rather than leaving
   * an awkward undefined void.
   */

  .ad-experience-hud {
    left: clamp(50px, 6vw, 100px) !important;
    right: clamp(50px, 6vw, 100px) !important;

    grid-template-columns:
      220px
      minmax(300px, 1fr)
      220px !important;
  }

  .ad-exp-hud-center {
    justify-self: center !important;

    width: min(480px, 100%) !important;

    justify-content: center !important;
  }

  .ad-exp-hud-center i {
    flex: 1 1 auto !important;

    max-width: 100px !important;
  }

  /*
   * Slightly expand the decorative orbital composition into
   * the right empty field.
   */

  .ad-exp-orbit {
    right: -14vw !important;

    width: min(88vw, 1280px) !important;
  }

  .ad-exp-globe {
    right: -2vw !important;
  }

  /*
   * Bottom dock remains compact but can breathe a little more
   * now that the main composition is wider.
   */

  .ad-experience-dock {
    width: min(760px, calc(100% - 320px)) !important;

    bottom: 24px !important;
  }

  /*
   * Vertical EX101 rail stays subtle.
   */

  .ad-experience-rail {
    left: 32px !important;

    opacity: .45 !important;
  }
}

/*
 * Extra-wide screens: spread the composition further without
 * touching approved typography.
 */

@media (min-width: 1500px) {

  .ad-local-interface {
    max-width: 1280px !important;

    grid-template-columns:
      64px
      minmax(0, 1180px) !important;
  }

  .ad-local-panel-host {
    max-width: 1180px !important;
  }

  .ad-view-home .hero-home {
    max-width: 1180px !important;

    grid-template-columns:
      390px
      490px !important;

    gap: 170px !important;
  }

  .ad-view-home .hero-side-stack,
  .ad-view-home .discord-panel,
  .ad-view-home .network-status-card {
    max-width: 490px !important;
  }
}

/* AD8-016 — CINEMATIC LAYOUT PASS 07 END */
/* ============================================================
   AD8-016 — HOME CONTENT RAISE PASS 08
   Move approved Home content into unused upper-left space.
   Typography remains unchanged.
   ============================================================ */

@media (min-width: 1100px) {

  /*
   * Raise the complete Home information column:
   * eyebrow
   * title
   * tagline
   * description
   * Explore EX101
   * crew / universe stats
   */

  .ad-view-home .hero-copy {
    transform: translateY(-118px) !important;
  }

  /*
   * Raise the local Home tabs as well so they remain
   * visually associated with the content column.
   */

  .ad-view-home .ad-local-tabs,
  .ad-view-home + .ad-local-tabs {
    transform: translateY(-55px) !important;
  }

  /*
   * Because the tab rail actually belongs to the surrounding
   * interface rather than hero-copy, target it directly.
   */

  .ad-local-interface > .ad-local-tabs {
    transform: translateY(-55px) !important;
  }

  /*
   * Keep the content comfortably inside the top HUD.
   */

  .ad-view-home .hero-network-line {
    margin-top: 0 !important;
  }

  /*
   * Compact the vertical rhythm slightly now that the content
   * occupies the upper field.
   */

  .ad-view-home .hero-copy h1 {
    margin-top: 3px !important;
    margin-bottom: 6px !important;
  }

  .ad-view-home .hero-tagline {
    margin-bottom: 6px !important;
  }

  .ad-view-home .lead {
    margin-bottom: 0 !important;
  }

  .ad-view-home .hero-actions {
    margin-top: 7px !important;
  }

  .ad-view-home .hero-mini-stats {
    margin-top: 10px !important;
  }
}

/*
 * Slightly smaller displacement on shorter desktop displays.
 */

@media (min-width: 1100px) and (max-height: 850px) {

  .ad-view-home .hero-copy {
    transform: translateY(-88px) !important;
  }

  .ad-local-interface > .ad-local-tabs {
    transform: translateY(-40px) !important;
  }
}

/* AD8-016 — HOME CONTENT RAISE PASS 08 END */

/* AD8-016 HOME POSITION PASS 11 START */

@media (min-width: 1100px) {

  /*
   * Use the Home panel itself as the positioning surface.
   */
  body.experience-page
  .ad-experience
  .ad-view-home
  .hero-home {
    position: relative !important;

    height: 100% !important;
    min-height: 100% !important;

    align-items: stretch !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * Put the ENTIRE left content block at the top of the
   * available Home panel rather than letting the legacy
   * homepage grid vertically center it.
   */
  body.experience-page
  .ad-experience
  .ad-view-home
  .hero-home
  .hero-copy {
    position: absolute !important;

    top: 10px !important;
    left: 0 !important;

    width: 390px !important;
    max-width: 390px !important;

    margin: 0 !important;

    align-self: auto !important;
    justify-self: auto !important;

    transform: none !important;

    z-index: 3 !important;
  }

  /*
   * The right systems retain their approved placement.
   */
  body.experience-page
  .ad-experience
  .ad-view-home
  .hero-home
  .hero-side-stack {
    position: relative !important;

    width: 470px !important;
    max-width: 470px !important;

    margin-left: auto !important;
    margin-right: 0 !important;

    top: auto !important;

    align-self: center !important;

    transform: none !important;
  }

  /*
   * Raise Overview / Explore / Build so the controls align
   * with the newly raised Home content.
   */
  body.experience-page
  .ad-experience
  .ad-local-interface
  > .ad-local-tabs {
    justify-content: flex-start !important;

    padding-top: 120px !important;

    position: relative !important;

    top: auto !important;

    transform: none !important;
  }
}

/* AD8-016 HOME POSITION PASS 11 END */
/* ============================================================
   AD8-016 — ACTUAL DESKTOP POSITION FIX
   This machine renders the full browser at ~1018 CSS px.
   ============================================================ */

@media (min-width: 900px) {

  /*
   * heroHome begins at y=66.
   * heroCopy was centered down at y=128.
   * Anchor it to the top of the Home grid instead.
   */
  body.experience-page
  .ad-experience
  .ad-view-home
  .hero-home
  .hero-copy {
    align-self: start !important;

    position: relative !important;

    top: 0 !important;

    margin-top: 0 !important;

    transform: none !important;
  }

  /*
   * Do not vertically center the left Home column.
   * Right-side systems retain their existing placement.
   */
  body.experience-page
  .ad-experience
  .ad-view-home
  .hero-home {
    align-items: stretch !important;
  }

  body.experience-page
  .ad-experience
  .ad-view-home
  .hero-home
  .hero-side-stack {
    align-self: center !important;
  }
}

/* AD8-016 — ACTUAL DESKTOP POSITION FIX END */
/* ============================================================
   AD8-016 — RIGHT STACK FIT PASS 12
   Based on measured 1018x529 desktop viewport.
   Left layout and typography intentionally unchanged.
   ============================================================ */

@media (min-width: 900px) {

  /*
   * Measured:
   * stage        = 394px high
   * right stack  = 440px high
   * discordOnline min-height = 94px
   * actual member list        = 19px
   *
   * Remove the legacy 94px reservation.
   */

  body.experience-page
  .ad-experience
  .ad-view-home
  .discord-online {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    padding-top: 5px !important;
    padding-bottom: 5px !important;

    overflow: hidden !important;
  }

  body.experience-page
  .ad-experience
  .ad-view-home
  .discord-online-list {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    overflow: hidden !important;
  }

  /*
   * Allow Discord itself to collapse to its real content.
   */

  body.experience-page
  .ad-experience
  .ad-view-home
  .discord-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    overflow: hidden !important;
  }

  /*
   * Keep the complete right stack inside the 394px stage.
   */

  body.experience-page
  .ad-experience
  .ad-view-home
  .hero-side-stack {
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;

    align-self: center !important;

    overflow: visible !important;
  }

  /*
   * Home now fits entirely in the viewport, so it should not
   * expose the internal panel scrollbar.
   *
   * EX101 keeps its own scroll behavior.
   */

  body.experience-page
  .ad-experience
  .ad-view-home
  > .ad-local-interface
  .ad-local-panel {
    overflow-y: hidden !important;
  }

  /*
   * Status card remains unchanged in scale, but must not
   * inherit any minimum-height from legacy page styling.
   */

  body.experience-page
  .ad-experience
  .ad-view-home
  .network-status-card {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* AD8-016 — RIGHT STACK FIT PASS 12 END */
/* ============================================================
   AD8-016 — HOME TAB POSITION PASS 13
   Move Overview / Explore / Build into upper-left open space.
   ============================================================ */

@media (min-width: 900px) {

  body.experience-page
  .ad-experience
  .ad-local-interface
  > .ad-local-tabs {
    position: relative !important;

    left: -72px !important;
    top: -82px !important;

    padding-top: 0 !important;

    justify-content: flex-start !important;

    transform: none !important;

    z-index: 20 !important;
  }
}

/* AD8-016 — HOME TAB POSITION PASS 13 END */
/* ============================================================
   AD8-016 — HOME TAB RESTORE PASS 14
   Restore tabs inside visible grid and place them higher.
   ============================================================ */

@media (min-width: 900px) {

  body.experience-page
  .ad-experience
  .ad-local-interface
  > .ad-local-tabs {
    position: static !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    width: 58px !important;

    padding-top: 72px !important;

    justify-content: flex-start !important;
    align-self: stretch !important;

    overflow: visible !important;

    z-index: 20 !important;
  }

  body.experience-page
  .ad-experience
  .ad-local-interface
  > .ad-local-tabs
  .ad-local-tab {
    width: 58px !important;
  }
}

/* AD8-016 — HOME TAB RESTORE PASS 14 END */

/* AD8-016 ALL ROUTES LOCAL MIGRATION START */

@media (min-width: 900px) {

  /*
   * Remaining public routes use the same persistent
   * environment/HUD/dock as Home.
   */

  .ad-route-view {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }

  .ad-route-view .ad-local-interface {
    width: 100% !important;
    height: 100% !important;

    max-width: 860px !important;

    margin: 0 auto !important;

    grid-template-columns:
      72px
      minmax(0, 1fr) !important;

    gap: 14px !important;

    transform: none !important;
  }

  .ad-route-view
  .ad-local-interface-single {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .ad-route-view
  .ad-local-interface-single
  .ad-local-panel-host {
    max-width: 820px !important;
    margin: 0 auto !important;
  }

  .ad-route-view
  .ad-local-interface
  > .ad-local-tabs {
    position: static !important;

    width: 72px !important;

    padding-top: 22px !important;

    transform: none !important;

    justify-content: flex-start !important;

    overflow: visible !important;
  }

  .ad-route-view .ad-local-tab {
    width: 72px !important;

    min-height: 26px !important;

    padding: 4px 6px !important;

    font-size: 6px !important;
    font-weight: 600 !important;

    line-height: 1.05 !important;
    letter-spacing: .06em !important;
  }

  .ad-route-view .ad-local-panel-host {
    width: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    height: 100% !important;

    overflow: hidden !important;
  }

  .ad-route-view .ad-local-panel {
    height: 100% !important;

    padding:
      10px
      10px
      22px
      4px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /*
   * Compact professional typography across all remaining
   * route content.
   */

  .ad-route-view .eyebrow {
    font-size: 6px !important;
    letter-spacing: .14em !important;
  }

  .ad-route-view .page-hero {
    padding:
      4px
      0
      14px !important;
  }

  .ad-route-view .page-hero h1 {
    max-width: 640px !important;

    margin:
      5px
      0
      8px !important;

    font-size: 22px !important;
    font-weight: 650 !important;

    line-height: .98 !important;
    letter-spacing: -.015em !important;
  }

  .ad-route-view .lead {
    max-width: 640px !important;

    font-size: 8px !important;
    line-height: 1.5 !important;
  }

  .ad-route-view .section {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .ad-route-view .section-heading h2,
  .ad-route-view .section h2 {
    font-size: 13px !important;
    font-weight: 600 !important;

    line-height: 1.18 !important;
  }

  .ad-route-view h3 {
    font-size: 9px !important;
    font-weight: 600 !important;
  }

  .ad-route-view p,
  .ad-route-view li,
  .ad-route-view small,
  .ad-route-view label {
    font-size: 7px !important;
    line-height: 1.45 !important;
  }

  .ad-route-view .feature-card,
  .ad-route-view .metric-card,
  .ad-route-view .signal-card {
    padding: 10px !important;
  }

  .ad-route-view .feature-card span,
  .ad-route-view .metric-card span {
    font-size: 5px !important;
  }

  .ad-route-view .feature-card h3 {
    font-size: 9px !important;
  }

  .ad-route-view .feature-card p {
    font-size: 6px !important;
  }

  .ad-route-view .metric-card strong {
    font-size: 14px !important;
  }

  .ad-route-view .tag-grid {
    gap: 6px !important;
  }

  .ad-route-view .tag-grid span {
    padding: 5px 7px !important;

    font-size: 6px !important;
  }

  .ad-route-view .button,
  .ad-route-view button:not(.ad-local-tab) {
    min-height: 27px !important;

    padding: 5px 8px !important;

    font-size: 7px !important;
  }

  .ad-route-view input,
  .ad-route-view select,
  .ad-route-view textarea {
    font-size: 8px !important;

    padding: 6px 8px !important;
  }

  .ad-route-view table {
    font-size: 7px !important;
  }
}

@media (max-width: 899px) {

  .ad-route-view
  .ad-local-interface {
    display: block !important;
  }

  .ad-route-view
  .ad-local-panel {
    height: auto !important;
    overflow: visible !important;
  }
}

/* AD8-016 ALL ROUTES LOCAL MIGRATION END */
/* ============================================================
   AD8-016 — READABILITY PASS
   Improve small-font readability without enlarging the layout.
   ============================================================ */

@media (min-width: 900px) {

  /*
   * Global small-text tone improvement.
   */
  body.experience-page .ad-experience {
    --ad-readable-soft: rgba(214, 232, 255, 0.88);
    --ad-readable-mid: rgba(226, 240, 255, 0.92);
    --ad-readable-strong: rgba(241, 248, 255, 0.98);
  }

  /*
   * Top HUD / small system text.
   */
  body.experience-page .ad-experience-hud,
  body.experience-page .ad-experience-rail,
  body.experience-page .site-audio-toggle,
  body.experience-page .site-audio-label {
    font-size: 7px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.08em !important;
    color: var(--ad-readable-soft) !important;
  }

  body.experience-page .ad-exp-hud-center span,
  body.experience-page .ad-exp-hud-right span,
  body.experience-page .ad-experience-rail span {
    font-size: 7px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.08em !important;
    color: var(--ad-readable-soft) !important;
  }

  /*
   * Left local tabs.
   */
  body.experience-page .ad-local-tab {
    font-size: 7px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.06em !important;
    color: var(--ad-readable-mid) !important;
  }

  /*
   * Eyebrows and small headings.
   */
  body.experience-page .eyebrow,
  body.experience-page .hero-tagline,
  body.experience-page .network-progress-meta span,
  body.experience-page .signal-stats span,
  body.experience-page .discord-online-label,
  body.experience-page .discord-card-kicker,
  body.experience-page .discord-member small,
  body.experience-page .metric-card span,
  body.experience-page .feature-card span,
  body.experience-page .section-heading p,
  body.experience-page .section small,
  body.experience-page .section label {
    font-size: 7px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.08em !important;
    color: var(--ad-readable-soft) !important;
  }

  /*
   * Main small body copy.
   */
  body.experience-page .lead,
  body.experience-page p,
  body.experience-page li,
  body.experience-page .feature-card p,
  body.experience-page .metric-card p,
  body.experience-page .discord-panel p,
  body.experience-page .network-status-card p {
    font-size: 8.5px !important;
    line-height: 1.55 !important;
    letter-spacing: 0.01em !important;
    color: var(--ad-readable-mid) !important;
  }

  /*
   * Small labels inside cards and data areas.
   */
  body.experience-page .discord-metrics small,
  body.experience-page .signal-stats small,
  body.experience-page .network-progress-meta,
  body.experience-page .discord-member small,
  body.experience-page .status-copy small,
  body.experience-page .metric-card small,
  body.experience-page .feature-card small {
    font-size: 7px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.05em !important;
    color: var(--ad-readable-soft) !important;
  }

  /*
   * Important numeric / compact informational text:
   * preserve compactness but improve legibility.
   */
  body.experience-page .signal-stats strong,
  body.experience-page .discord-metrics strong,
  body.experience-page .metric-card strong,
  body.experience-page .network-progress-meta strong {
    color: var(--ad-readable-strong) !important;
  }

  /*
   * Bottom dock readability.
   */
  body.experience-page .ad-experience-dock a span {
    font-size: 6.5px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.08em !important;
    color: rgba(199, 222, 247, 0.82) !important;
  }

  body.experience-page .ad-experience-dock a strong {
    font-size: 8px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.07em !important;
    color: var(--ad-readable-mid) !important;
  }

  /*
   * Form controls / table-like content for the other pages
   * you are finishing locally.
   */
  body.experience-page input,
  body.experience-page select,
  body.experience-page textarea,
  body.experience-page table,
  body.experience-page td,
  body.experience-page th {
    font-size: 8.5px !important;
    line-height: 1.45 !important;
  }
}

/* AD8-016 — READABILITY PASS END */

/* AD8-016 HOME STATUS LEFT START */

@media (min-width: 900px) {

  /*
   * Operational / Version 8 status now belongs to the
   * left information column directly beneath the intro.
   */

  body.experience-page
  .ad-experience
  .ad-view-home
  .hero-copy
  .home-operational-card {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin:
      14px
      0
      0 !important;

    padding: 10px !important;

    overflow: hidden !important;
  }

  /*
   * Keep it compact enough for the left column.
   */

  body.experience-page
  .ad-view-home
  .hero-copy
  .home-operational-card
  .network-status-heading {
    margin-bottom: 6px !important;
  }

  body.experience-page
  .ad-view-home
  .hero-copy
  .home-operational-card
  .network-status-body {
    gap: 8px !important;
  }

  body.experience-page
  .ad-view-home
  .hero-copy
  .home-operational-card
  .status-radar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  body.experience-page
  .ad-view-home
  .hero-copy
  .home-operational-card
  .network-status-copy {
    min-width: 0 !important;
  }

  body.experience-page
  .ad-view-home
  .hero-copy
  .home-operational-card
  .network-status-copy h2 {
    margin:
      2px
      0
      3px !important;
  }

  body.experience-page
  .ad-view-home
  .hero-copy
  .home-operational-card
  .network-progress-meta {
    margin-top: 7px !important;
  }

  body.experience-page
  .ad-view-home
  .hero-copy
  .home-operational-card
  .signal-stats {
    margin-top: 6px !important;
  }

  /*
   * Right column now belongs exclusively to Discord.
   */

  body.experience-page
  .ad-experience
  .ad-view-home
  .hero-side-stack {
    display: block !important;

    align-self: start !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
  }

  body.experience-page
  .ad-experience
  .ad-view-home
  .hero-side-stack
  .discord-panel {
    margin:
      0
      0
      0
      auto !important;
  }
}

/* AD8-016 HOME STATUS LEFT END */
/* ============================================================
   AD8-016 — DISCORD RIGHT COLUMN STRETCH
   Fill available right-side vertical space.
   Left Home column unchanged.
   ============================================================ */

@media (min-width: 900px) {

  /*
   * Right column fills the complete Home stage height.
   */
  body.experience-page
  .ad-experience
  .ad-view-home
  .hero-side-stack {
    align-self: stretch !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;

    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
  }

  /*
   * Discord is now the only right-side card, so let it
   * consume the entire right column.
   */
  body.experience-page
  .ad-experience
  .ad-view-home
  .hero-side-stack
  .discord-panel {
    box-sizing: border-box !important;

    width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;

    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
  }

  /*
   * Keep the fixed header/metric areas compact.
   */
  body.experience-page
  .ad-view-home
  .discord-panel-topline,
  body.experience-page
  .ad-view-home
  .discord-invite-banner,
  body.experience-page
  .ad-view-home
  .discord-metrics,
  body.experience-page
  .ad-view-home
  .discord-open-button,
  body.experience-page
  .ad-view-home
  .discord-panel-foot {
    flex: 0 0 auto !important;
  }

  /*
   * Use the extra vertical space for the member/presence area
   * instead of leaving an arbitrary blank block.
   */
  body.experience-page
  .ad-view-home
  .discord-online {
    flex: 1 1 auto !important;

    min-height: 0 !important;
    height: auto !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
  }

  body.experience-page
  .ad-view-home
  .discord-online-list {
    flex: 1 1 auto !important;

    align-content: start !important;

    min-height: 0 !important;
    height: auto !important;
  }

  /*
   * No internal scrollbar.
   */
  body.experience-page
  .ad-view-home
  .discord-panel,
  body.experience-page
  .ad-view-home
  .discord-online,
  body.experience-page
  .ad-view-home
  .discord-online-list {
    scrollbar-width: none !important;
  }

  body.experience-page
  .ad-view-home
  .discord-panel::-webkit-scrollbar,
  body.experience-page
  .ad-view-home
  .discord-online::-webkit-scrollbar {
    display: none !important;
  }
}

/* AD8-016 — DISCORD RIGHT COLUMN STRETCH END */
/* ============================================================
   AD8-016 — HOME EXPLORE PANEL COMPACT PASS
   Preserve approved Overview layout.
   ============================================================ */

@media (min-width: 900px) {

  /*
   * Home panel 2 = EXPLORE.
   */
  body.experience-page
  .ad-view-home
  #home-panel-2 {
    box-sizing: border-box !important;

    width: 100% !important;
    height: 100% !important;

    padding:
      10px
      14px
      42px
      8px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    scrollbar-width: thin !important;
  }

  /*
   * Eyebrow.
   */
  body.experience-page
  .ad-view-home
  #home-panel-2
  .eyebrow {
    margin: 0 0 6px !important;

    font-size: 7px !important;
    line-height: 1.2 !important;
    letter-spacing: .09em !important;
  }

  /*
   * Large legacy Explore heading.
   */
  body.experience-page
  .ad-view-home
  #home-panel-2
  h1 {
    max-width: 620px !important;

    margin:
      0
      0
      16px !important;

    font-size: 24px !important;
    font-weight: 650 !important;

    line-height: 1.02 !important;
    letter-spacing: -.02em !important;
  }

  /*
   * Generic Explore section headings.
   */
  body.experience-page
  .ad-view-home
  #home-panel-2
  h2 {
    margin:
      0
      0
      6px !important;

    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  body.experience-page
  .ad-view-home
  #home-panel-2
  h3 {
    margin:
      0
      0
      5px !important;

    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /*
   * Card grid.
   */
  body.experience-page
  .ad-view-home
  #home-panel-2
  .feature-grid {
    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 9px !important;

    margin-top: 10px !important;
  }

  /*
   * Individual route cards.
   */
  body.experience-page
  .ad-view-home
  #home-panel-2
  .feature-card {
    box-sizing: border-box !important;

    min-height: 104px !important;

    padding: 12px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    overflow: hidden !important;
  }

  body.experience-page
  .ad-view-home
  #home-panel-2
  .feature-card span {
    margin-bottom: 7px !important;

    font-size: 6px !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;
  }

  body.experience-page
  .ad-view-home
  #home-panel-2
  .feature-card h3 {
    font-size: 11px !important;
    font-weight: 600 !important;

    line-height: 1.15 !important;
  }

  body.experience-page
  .ad-view-home
  #home-panel-2
  .feature-card p {
    margin: 0 !important;

    font-size: 7px !important;
    line-height: 1.4 !important;
  }

  /*
   * Any wide cards should still fit the compact grid.
   */
  body.experience-page
  .ad-view-home
  #home-panel-2
  .feature-card.wide {
    grid-column: span 1 !important;
  }

  /*
   * Prevent the persistent dock from covering Explore content.
   */
  body.experience-page
  .ad-view-home
  #home-panel-2::after {
    content: '';

    display: block;

    height: 24px;
  }
}

/* AD8-016 — HOME EXPLORE PANEL COMPACT PASS END */
/* ============================================================
   AD8-016 — HOME BUILD PANEL SCROLL
   Roadmap scrolls inside the cinematic stage.
   ============================================================ */

@media (min-width: 900px) {

  body.experience-page
  .ad-view-home
  #home-panel-3 {
    box-sizing: border-box !important;

    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;

    padding:
      8px
      18px
      54px
      8px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain !important;

    scrollbar-width: thin !important;
    scrollbar-color:
      rgba(89, 209, 238, .58)
      rgba(5, 17, 29, .38) !important;
  }

  body.experience-page
  .ad-view-home
  #home-panel-3::-webkit-scrollbar {
    width: 7px !important;
  }

  body.experience-page
  .ad-view-home
  #home-panel-3::-webkit-scrollbar-track {
    background: rgba(5, 17, 29, .38) !important;
  }

  body.experience-page
  .ad-view-home
  #home-panel-3::-webkit-scrollbar-thumb {
    background: rgba(89, 209, 238, .58) !important;
    border-radius: 999px !important;
  }

  body.experience-page
  .ad-view-home
  #home-panel-3::-webkit-scrollbar-thumb:hover {
    background: rgba(119, 225, 249, .76) !important;
  }

  /*
   * Keep the roadmap header visible while the milestone list scrolls.
   */
  body.experience-page
  .ad-view-home
  #home-panel-3
  .page-hero,
  body.experience-page
  .ad-view-home
  #home-panel-3
  .section-heading:first-child {
    position: sticky !important;
    top: 0 !important;

    z-index: 5 !important;

    background:
      linear-gradient(
        180deg,
        rgba(3, 12, 22, .98) 0%,
        rgba(3, 12, 22, .94) 82%,
        rgba(3, 12, 22, 0) 100%
      ) !important;
  }
}

/* AD8-016 — HOME BUILD PANEL SCROLL END */
/* ============================================================
   AD8-016 — BUILD HEADER / SCROLL FIX
   Smaller roadmap title + solid sticky header.
   ============================================================ */

@media (min-width: 900px) {

  /*
   * Keep BUILD as the internal scrolling surface.
   */
  body.experience-page
  .ad-view-home
  #home-panel-3 {
    position: relative !important;

    padding:
      0
      18px
      54px
      8px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    scroll-padding-top: 82px !important;
  }

  /*
   * The roadmap header stays fixed at the top of the BUILD
   * panel and completely covers rows scrolling beneath it.
   */
  body.experience-page
  .ad-view-home
  #home-panel-3
  .page-hero,
  body.experience-page
  .ad-view-home
  #home-panel-3
  .section-heading:first-child {
    position: sticky !important;

    top: 0 !important;
    z-index: 50 !important;

    box-sizing: border-box !important;

    margin:
      0
      0
      10px !important;

    padding:
      10px
      8px
      12px !important;

    background: rgb(3, 12, 22) !important;

    border-bottom:
      1px solid rgba(102, 211, 240, .14) !important;

    box-shadow:
      0 12px 18px rgba(3, 12, 22, .96) !important;
  }

  /*
   * BUILD LOG eyebrow.
   */
  body.experience-page
  .ad-view-home
  #home-panel-3
  .eyebrow {
    margin:
      0
      0
      5px !important;

    font-size: 7px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
  }

  /*
   * VERSION 8 ROADMAP — intentionally much smaller.
   */
  body.experience-page
  .ad-view-home
  #home-panel-3
  h1,
  body.experience-page
  .ad-view-home
  #home-panel-3
  .page-hero h1,
  body.experience-page
  .ad-view-home
  #home-panel-3
  .section-heading:first-child h2 {
    max-width: none !important;

    margin:
      0 !important;

    font-size: 21px !important;
    font-weight: 650 !important;

    line-height: 1.05 !important;
    letter-spacing: -.015em !important;
  }

  /*
   * Last-updated text stays compact beside/below the heading.
   */
  body.experience-page
  .ad-view-home
  #home-panel-3
  .page-hero small,
  body.experience-page
  .ad-view-home
  #home-panel-3
  .page-hero time,
  body.experience-page
  .ad-view-home
  #home-panel-3
  .section-heading:first-child small,
  body.experience-page
  .ad-view-home
  #home-panel-3
  .section-heading:first-child time {
    font-size: 7px !important;
    line-height: 1.3 !important;
  }

  /*
   * Ensure roadmap rows always paint below the sticky header.
   */
  body.experience-page
  .ad-view-home
  #home-panel-3
  .roadmap-list,
  body.experience-page
  .ad-view-home
  #home-panel-3
  .roadmap-grid {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* AD8-016 — BUILD HEADER / SCROLL FIX END */