/*
 * mobile-override.css — appended responsive layer for the Culture House shell.
 *
 * WHY: index.html shipped with zero @media rules. It has a viewport meta and
 * fluid clamp() type, but no breakpoint adaptation, so the app-shell layout
 * renders as a squeezed desktop grid on a phone.
 *
 * DESIGN CONSTRAINT: this file is APPENDED, not merged. It only restacks the
 * shell rows and relaxes fixed spacing. It deliberately does not touch colour,
 * typography, spacing scale, or any component styling, so the existing brand
 * surface is preserved. Specificity is kept at or below the original rules by
 * relying on later-in-cascade ordering rather than !important where possible.
 */

/* ── Phone: stack the shell vertically ── */
@media (max-width: 860px) {
  /* The shell rows become a single column instead of a squeezed grid. */
  .shell-top,
  .shell-center,
  .shell-status,
  .shell-right {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: left;
  }

  .shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Any row that was laid out with flex/grid collapses to one column. */
  .shell-top,
  .shell-nav {
    flex-wrap: wrap;
  }

  /* Long unbroken strings (ids, hashes, status codes) must not force
     horizontal scrolling on a narrow viewport. */
  .shell-center,
  .shell-status,
  .shell-right,
  .nav-group,
  .brand-text {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Fluid type already uses clamp(); clamp the upper bound on small screens
     so headings cannot overflow their container. */
  h1, h2, h3 {
    overflow-wrap: anywhere;
  }

  /* Full-width controls are easier to hit on touch. */
  .ch-btn {
    min-height: 44px;
  }

  /* Never allow a wide child to create horizontal page scroll. */
  img, table, pre, code {
    max-width: 100%;
  }
}

/* ── Very narrow phones ── */
@media (max-width: 420px) {
  .shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .ch-brand,
  .brand-mark {
    font-size: 22px;
  }
}

/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}