/* Cross-page UI polish for Aira bare layouts (mobile + overflow) */

/* Stack tri-column / flex headers on small screens */
@media (max-width: 760px) {
  .fq-mast,
  .ab-beacon-bar,
  .cg-top,
  .tt-top {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    align-items: start !important;
    gap: 0.75rem !important;
  }

  .fq-mast-meta,
  .fq-mast-links,
  .ab-beacon-title,
  .ab-beacon-links,
  .cg-top-tag,
  .cg-top-nav,
  .tt-top-tag,
  .tt-top-nav {
    justify-self: start !important;
    text-align: left !important;
  }

  .fq-mast-links,
  .ab-beacon-links,
  .cg-top-nav,
  .tt-top-nav,
  .af-top-nav,
  .pc-top-nav,
  .vb-top-nav,
  .ca-top-nav,
  .sk-top-nav,
  .gl-top-nav,
  .gd-top-nav,
  .rs-top-nav,
  .nt-top-nav,
  .ab-chip-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.65rem 0.9rem !important;
  }

  .af-top,
  .pc-top,
  .vb-top,
  .ca-top,
  .sk-top,
  .gl-top,
  .gd-top,
  .rs-top,
  .nt-top {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    row-gap: 0.65rem !important;
  }

  .pc-top-tag,
  .vb-top-tag,
  .ca-top-tag,
  .sk-top-tag,
  .gl-top-tag,
  .gd-top-tag,
  .rs-top-tag,
  .nt-top-tag {
    margin-right: 0 !important;
    flex: 1 1 100%;
    order: 3;
  }

  .pc-top-nav,
  .vb-top-nav,
  .ca-top-nav,
  .sk-top-nav,
  .gl-top-nav,
  .gd-top-nav,
  .rs-top-nav,
  .nt-top-nav,
  .af-top-nav {
    width: 100%;
    justify-content: flex-start !important;
  }

  .fq-tuner {
    grid-template-columns: 1fr !important;
  }

  .fq-seek {
    width: 100%;
  }

  .ab-console-head {
    grid-template-columns: 1fr !important;
  }

  .ab-console {
    border-radius: 1.15rem !important;
    padding: 1rem !important;
  }

  .ab-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .cg-ops,
  .cg-wax {
    grid-template-columns: 1fr !important;
  }

  .vb-stage,
  .ca-board,
  .ca-lower,
  .sk-hero,
  .sk-rig,
  .gl-spread,
  .gd-stage,
  .rs-bark-panel,
  .nt-controls,
  .pc-hero,
  .tt-dash,
  .af-hero,
  .af-workspace {
    grid-template-columns: 1fr !important;
  }

  .pc-grid {
    grid-template-columns: 1fr !important;
  }

  .vb-city-row,
  .ab-out-grid,
  .af-stats,
  .tt-hit-grid,
  .sk-meta-grid {
    grid-template-columns: 1fr !important;
  }

  .zd-deck {
    padding-bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 520px) {
  .zd-gauges,
  .ab-tabstrip,
  .tt-gauges,
  .af-honey,
  .af-portal-grid {
    grid-template-columns: 1fr !important;
  }

  .nt-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .fq-bar {
    flex-basis: 2.55rem !important;
    min-width: 2.55rem !important;
  }

  .cg-tag {
    gap: 0.55rem !important;
  }

  .vb-ticket,
  .cg-stamp,
  .cg-luggage,
  .sk-buy,
  .gl-book {
    border-radius: 1.1rem !important;
  }
}

/* Readable form fields on iOS */
body.aira-bare input,
body.aira-bare select,
body.aira-bare textarea {
  font-size: 16px;
}

@media (min-width: 480px) {
  body.aira-bare input,
  body.aira-bare select,
  body.aira-bare textarea {
    font-size: inherit;
  }
}

/* Prevent horizontal scroll from full-bleed tricks */
.fq-yard,
.ab-room,
.af-atlas,
.tt-shore,
.cg-dock,
.pc-rack,
.vb-bench,
.ca-atlas,
.sk-studio,
.gl-inn,
.gd-grove,
.rs-archive,
.nt-house,
.zd-deck {
  max-width: 100vw;
  overflow-x: clip;
}

/* Sticky chapter bars shouldn't cover content awkwardly */
.rs-chapters {
  top: 0;
  z-index: 20;
}

/* Product stage shouldn't overflow viewport height awkwardly on short phones */
.sk-stage {
  max-height: min(62vh, 520px) !important;
}

/* Contour map SVG scaling */
.ca-map-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Checkout ticket sticky only on large screens */
@media (max-width: 899px) {
  .vb-ticket {
    position: static !important;
    top: auto !important;
  }
}

/* Flip cards: keep height stable */
.pc-face,
.pc-back {
  min-height: 200px;
}

/* Frequency EQ bars don't crush labels */
.fq-bar-label {
  font-size: 0.62rem;
  line-height: 1.15;
  text-align: center;
}

/* Help hex clusters wrap */
.af-clusters,
.af-hex-grid {
  max-width: 100%;
}

/* Links and buttons: clearer focus for keyboard */
body.aira-bare a:focus-visible,
body.aira-bare button:focus-visible,
body.aira-bare input:focus-visible,
body.aira-bare select:focus-visible,
body.aira-bare textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Long brand/order IDs wrap instead of overflowing */
body.aira-bare h1,
body.aira-bare h2,
body.aira-bare .vb-ticket,
body.aira-bare .gd-dial,
body.aira-bare .ca-badge,
body.aira-bare .sk-sku {
  overflow-wrap: anywhere;
}

/* Cart empty state breathing room */
.cg-empty {
  width: min(36rem, calc(100% - 2rem)) !important;
}

/* Germ dial: keep SVG readable on narrow screens */
.gd-dial svg,
.gd-ring {
  max-width: 100%;
  height: auto;
}

/* Beacon console shouldn't spill past viewport */
.ab-console {
  max-width: 100%;
}

/* Nursery tray scroll containment */
.nt-tray,
.nt-cells {
  max-width: 100%;
}