/* ===========================================================================
   mobile-shell.css  —  Oimatter dashboard mobile navigation + mobile layout
   Styles the chrome that mobile-shell.js injects at runtime (mobile-shell__*),
   and adapts the desktop hero/topbar for <=760px. Native to the :root tokens.
   Shared by all 7 pages. Loads after the inline sheet, so equal-specificity
   rules win on source order.
   =========================================================================== */

/* Hidden on desktop. JS injects the shell on all widths; gate it here. */
.mobile-shell { display: none; }
.mobile-shell__strip { display: none; }

/* Bottom tab bar suppressed site-wide (drawer carries navigation). */
.mobile-shell__tabs { display: none !important; }

/* Bar stays pinned at all times, including while overlays are open. Overlays
   sit above it (their own z-index) and get top padding so their title + X
   clear the bar instead of tucking under it. */
  /* (Overlay positioning is handled inside the media query below. The old
     global position:relative overrides were breaking the drawer at all
     widths and have been removed.) */

@media (max-width: 760px) {

  /* ---- reveal shell / replace desktop chrome --------------------------- */
  .mobile-shell { display: block; }
  .topbar .wordmark--logo { display: none; }   /* desktop logo hidden; bar carries it */

  body.mobile-shell-ready { padding-top: 116px; }
  body.mobile-shell-ready.mobile-shell-no-strip { padding-top: 60px; }
  body.mobile-nav-open { overflow: hidden; }
  body.mobile-nav-open .mobile-shell__strip { display: none !important; }

  /* ---- top bar --------------------------------------------------------- */
  .mobile-shell__bar {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1100;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    height: 60px;
    padding: 0 16px;
    background: #11141a;
    border-bottom: 1px solid var(--line, #242A33);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .mobile-shell__title { display: flex; align-items: center; gap: 10px; min-width: 0; }

  .mobile-shell__brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
  .mobile-shell__logo { display: block; height: 36px; width: auto; }
  .mobile-shell__context { display: none; }

  /* ---- hamburger button ------------------------------------------------ */
  .mobile-shell__menu {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    padding: 7px 12px; font: inherit; font-size: 13px;
    height: 38px; box-sizing: border-box;
    color: var(--ink, #E8E4DA);
    background: transparent; border: 1px solid var(--line, #242A33);
    border-radius: var(--radius, 8px); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-shell__menu:active { background: var(--panel, #11151B); }
  .mobile-shell__menu-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; width: 16px; }
  .mobile-shell__menu-icon span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; }

  /* ---- backdrop + drawer ----------------------------------------------- */
  .mobile-shell__backdrop {
    position: fixed; inset: 0; z-index: 1001;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0; transition: opacity 200ms ease;
  }
  .mobile-shell__backdrop.is-open { opacity: 1; }

  .mobile-shell__drawer {
    position: fixed; top: 60px; right: 0; bottom: 0; z-index: 1002;
    display: flex; flex-direction: column;
    width: min(86vw, 360px);
    background: var(--panel-strong, #171C24);
    border-left: 1px solid var(--line, #242A33);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(100%); transition: transform 210ms ease;
    overflow-y: auto;
  }
  .mobile-shell__drawer.is-open { transform: translateX(0); }
  .mobile-shell__drawer-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 20px 18px 14px; border-bottom: 1px solid var(--line, #242A33);
  }
  .mobile-shell__drawer-title { margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft, #9BA1AB); }
  .mobile-shell__drawer-sub { margin: 4px 0 0; font-size: 15px; color: var(--ink, #E8E4DA); }
  .mobile-shell__close {
    flex: none; width: 34px; height: 34px; border-radius: var(--radius, 8px);
    background: transparent; border: 1px solid var(--line, #242A33);
    color: var(--ink-soft, #9BA1AB); font-size: 15px; line-height: 1; cursor: pointer;
  }
  .mobile-shell__close:active { background: var(--panel, #11151B); }

  .mobile-shell__drawer-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .mobile-shell__drawer-link {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 14px; border: 1px solid transparent; border-radius: var(--radius, 8px);
    color: var(--ink-soft, #9BA1AB); text-decoration: none;
  }
  .mobile-shell__drawer-link-label { font-size: 15px; }
  .mobile-shell__drawer-link:active { background: var(--panel, #11151B); }
  .mobile-shell__drawer-link.is-active {
    color: var(--ink, #E8E4DA); background: var(--panel, #11151B);
    border-color: var(--antique-bronze, #A97142);
  }
  .mobile-shell__drawer-link.is-active .rail-icon { color: var(--antique-bronze, #A97142); }

  /* desktop topbar fully hidden on mobile; bar carries the brand */
  header.topbar { display: none; }

  /* PINNED SECOND LINE: fixed strip under the bar. Holds USD/MYR toggle on the
     left (where the page has one) and the Dark Matter pill on the right. Always
     visible, never scrolls, never collides with content. */
  .oimatter-currency-toggle {
    position: fixed !important;
    top: 60px !important;
    left: 16px !important;
    z-index: 1095 !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Dark Matter pill: ALWAYS the full pill, pinned to the right of the fixed
     second line under the bar. The shrink-to-"$" behaviour is fully disabled so
     it never changes size, never overlaps a heading, never collides with a
     lightbox X. Same on every page, whether or not the page's JS adds is-floating. */
  .right-drawer-fab,
  .right-drawer-fab.is-floating,
  .right-drawer-fab.is-floating:hover,
  .right-drawer-fab.is-floating:focus-visible {
    position: fixed !important;
    top: 64px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 200px !important;
    height: 40px !important;
    padding: 0 16px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    background: var(--antique-bronze, #A97142) !important;
    z-index: 1095 !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .right-drawer-fab .right-drawer-fab__label,
  .right-drawer-fab.is-floating .right-drawer-fab__label {
    display: inline-block !important;
    max-width: none !important;
    opacity: 1 !important;
    color: #0B0B0C !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
  }
  .right-drawer-fab .right-drawer-fab__icon,
  .right-drawer-fab.is-floating .right-drawer-fab__icon {
    width: auto !important;
    font-size: 1rem !important;
    color: #0B0B0C !important;
  }
  .right-drawer-fab:not(.is-floating) {
    width: auto !important;
    max-width: 150px !important;
  }

  /* trim hero top breathing room on phones */
  .mission-hero-redesign { padding-top: 30px; }

  /* DM drawer: pinned header bar so DARK MATTER + X stay put while the body
     scrolls. Scoped to .is-open so it never bleeds onto the page or menu. */
  /* DM drawer: clean small fixed corner X, pinned top-right while body scrolls.
     No pinned title bar (it fought the drawer slide and oversized the button). */
  .right-drawer.is-open .right-drawer__close {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    background: var(--bg-raised, #11141a) !important;
    border: 1px solid var(--line, #242A33) !important;
    border-radius: 8px !important;
    outline: none !important;
    z-index: 1300 !important;
  }
  .right-drawer.is-open .right-drawer__close:focus,
  .right-drawer.is-open .right-drawer__close:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Dark Matter drawer: lift above the fixed bar + strip so its header and X
     are never covered. Full-width drawer covers the chrome cleanly. */
  .right-drawer { z-index: 1200 !important; }
  .right-drawer-backdrop { z-index: 1199 !important; }
  .right-drawer.is-open { transform: none !important; }

  /* Evaluate-drawer lightbox (Mission Control + others): it centers with a
     transform and caps at 90vh, pushing the headline above the fold on phones.
     Force it full-screen, top-anchored, scroll from the top so the headline
     shows on open. */
  .evaluate-drawer,
  .evaluate-drawer.is-open {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    z-index: 1200 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .evaluate-drawer .drawer-head {
    flex: 0 0 auto !important;
    padding: 20px 20px 14px !important;
    background: #11151B !important;
    border-bottom: 1px solid var(--line, #242A33) !important;
  }
  .evaluate-drawer .drawer-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 20px 40px !important;
    min-height: 0 !important;
  }
  .evaluate-drawer .drawer-close {
    flex: 0 0 40px !important;
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--bg-raised, #11141a) !important;
    border: 1px solid var(--line, #242A33) !important;
    border-radius: 8px !important;
    font-size: 18px !important;
  }

  /* Cost lightbox: anchor to the top and scroll from the top so the eyebrow
     and headline are always reachable; pin the X to the screen's top-right so
     it never drifts or hides. The modal sits above all chrome already. */
  .cost-modal {
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .cost-modal-panel {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 64px 20px 40px !important;
    animation: none !important;
    transform: none !important;
  }
  .cost-modal-close {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    float: none !important;
    margin: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    background: var(--bg-raised, #11141a) !important;
    border: 1px solid var(--line, #242A33) !important;
    border-radius: 8px !important;
    z-index: 9100 !important;
  }

  /* Compliance gate cards: the summary is a 2-col grid (title 1fr | pills auto);
     the pills crush the title to one-letter-per-line on phones. Stack to one
     column so the title gets full width and the pills wrap below it. */
  .accordion-summary { grid-template-columns: 1fr; row-gap: 10px; }
  .band-row { flex-wrap: wrap; }

  body.mobile-shell-ready { padding-bottom: 0 !important; }
  main { padding-bottom: 24px !important; }

  .mobile-shell__strip {
    position: fixed; top: 60px; left: 0; right: 0;
    z-index: 1095;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; height: 52px; padding: 0 16px;
    background: #11141a;
    border-bottom: 1px solid var(--line, #242A33);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .mobile-shell__strip-left { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
  .mobile-shell__strip-right { display: flex; align-items: center; justify-content: flex-end; }

  .mobile-shell__strip-left .oimatter-currency-toggle {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important; margin: 0 !important;
  }

  .mobile-shell__strip-right .right-drawer-fab,
  .mobile-shell__strip-right .right-drawer-fab.is-floating,
  .mobile-shell__strip-right .right-drawer-fab.is-floating:hover,
  .mobile-shell__strip-right .right-drawer-fab.is-floating:focus-visible {
    position: static !important;
    top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
    transform: none !important;
    height: 38px !important;
    box-sizing: border-box !important;
    width: auto !important; max-width: none !important;
    padding: 0 14px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    background: var(--antique-bronze, #A97142) !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  .mobile-shell__strip-right .right-drawer-fab .right-drawer-fab__label,
  .mobile-shell__strip-right .right-drawer-fab.is-floating .right-drawer-fab__label {
    display: inline-block !important; max-width: none !important; opacity: 1 !important;
    color: #0B0B0C !important; font-size: 0.82rem !important; font-weight: 700 !important;
  }
  .mobile-shell__strip-right .right-drawer-fab .right-drawer-fab__icon,
  .mobile-shell__strip-right .right-drawer-fab.is-floating .right-drawer-fab__icon {
    width: auto !important; font-size: 1rem !important; color: #0B0B0C !important;
  }
}

/* ---- quality floor: focus + reduced motion (all viewports) ------------- */
.mobile-shell__menu:focus-visible,
.mobile-shell__close:focus-visible,
.mobile-shell__brand:focus-visible,
.mobile-shell__drawer-link:focus-visible {
  outline: 2px solid var(--antique-bronze, #A97142); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-shell__backdrop, .mobile-shell__drawer { transition: none; }
}

/* === S53 overrides (appended; supersede earlier rules by source order) === */

/* Reformat: run-in bold lead-ins become a stacked sub-head. All widths. */
.evaluate-drawer .drawer-copy > strong:first-child {
  display: block;
  margin-bottom: 6px;
}

@media (max-width: 760px) {

  /* #1 #2 scroll-to-end: real visible height + clear the iOS bottom bar */
  .evaluate-drawer,
  .evaluate-drawer.is-open {
    height: 100vh !important;
    max-height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .evaluate-drawer .drawer-body {
    padding: 16px 20px calc(48px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .cost-modal-panel {
    min-height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* #3 X top-right like Mission Control: header stays a row on mobile */
  .evaluate-drawer .drawer-head {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  /* #4 "Check > How we evaluate" on one line */
  .evaluation-trigger {
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
  }

  /* #5 breathing room around the Signal-hierarchy label (Artist Booking) */
  .evaluate-drawer .small-label {
    margin-top: 24px !important;
    margin-bottom: 14px !important;
  }
}

/* === S54 (appended; supersede earlier rules by source order) === */
.evaluate-drawer .drawer-copy > strong:first-child {
  display: block;
  margin-bottom: 16px;
  color: var(--ink);
  font-weight: 760;
}
.evaluate-drawer .drawer-copy > strong:first-child + br { display: none; }

@media (max-width: 760px) {
  /* S55: headline-to-subline spacing is the hero grid gap, not a margin.
     Remove the +12 margin add-on and force one identical 18px gap
     (Compliance & Risk native) on every non-Artist-Booking page. */
  body:not(.page-artist-booking) #page-title { margin: 0 !important; }
  body.page-ticket-price-library h1 { margin: 0 !important; }
  body:not(.page-artist-booking) .problem-statement,
  body:not(.page-artist-booking) .mission-hero-subline { margin-top: 0 !important; }
  body:not(.page-artist-booking) .hero { row-gap: 18px !important; }
  body:not(.page-artist-booking) .mission-hero-redesign__copy { row-gap: 18px !important; }

  .signal-title { overflow-wrap: anywhere; word-break: break-word; }

  .price-band-grid { display: block !important; }
  .price-band-grid .stat-card {
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
  }
}

/* S56: authoritative headline-to-subline gap lock — last in file, wins all */
@media (max-width: 760px) {
  body:not(.page-artist-booking) #page-title,
  body:not(.page-artist-booking) .hero h1,
  body:not(.page-artist-booking) .mission-hero-redesign h1 { margin: 0 !important; }
  body:not(.page-artist-booking) .hero,
  body:not(.page-artist-booking) .mission-hero-redesign__copy { row-gap: 18px !important; }
  body:not(.page-artist-booking) .problem-statement,
  body:not(.page-artist-booking) .mission-hero-subline,
  body:not(.page-artist-booking) .hero-subhead-row { margin-top: 0 !important; }
}

/* S57: Index + Clash heroes sit ~8px looser than the Compliance reference on mobile. Pull only those two in to match. Appended last so it wins over the S56 18px lock. */
@media (max-width: 760px) {
  body.page-index .mission-hero-redesign__copy { row-gap: 10px !important; }
  body.page-clash-radar .hero { row-gap: 10px !important; }
}


/* S57c: TOP spacing — eyebrow sits exactly 47px below the bar above it, every page. Compliance = reference (47). Per-page nudge = measured excess. Compliance + Audience already 47, restored by removing S57b. */
@media (max-width: 760px) {
  body.page-deep-dive .hero          { margin-top: -68px !important; }
  body.page-clash-radar .hero        { margin-top: -19px !important; }
  body.page-ticket-price-library .hero { margin-top: -46px !important; }
}