/* app.css — shared responsive layer for Lorite.
   See design/MOBILE.md for the class contract. Inline styles win specificity,
   so the mobile overrides below use !important on purpose. Above the
   breakpoint every rule here is inert, so desktop stays pixel-identical. */

/* Never allow sideways scroll from full-bleed decorative layers. Harmless on
   desktop; does not clip the tribal drawer (position:fixed is viewport-relative). */
html, body { overflow-x: hidden; }

/* Drawer chrome is desktop-inert by default; the breakpoint turns it on. */
.mobilebar { display: none; }
.scrim { display: none; }

@media (max-width: 820px) {
  /* page root: stop vertical-centering + overflow-clip that traps scroll on
     tall stacked content. Block flow lets the body scroll naturally. */
  .page {
    display: block !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  /* multi-column splits collapse to a single stacked column */
  .split { grid-template-columns: 1fr !important; gap: 32px 0 !important; }
  .rail  { display: none !important; }               /* 1px vertical divider */

  /* decorative chrome tightens */
  .frame { inset: 10px !important; }

  /* content wrapper: use the width, center it, breathe less at the edges */
  .shell {
    width: min(100%, 92vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 40px !important;
  }

  /* sticky side columns un-stick and drop their viewport-tall min-height so
     they don't dominate the scroll on a phone */
  .unstick  { position: static !important; top: auto !important; min-height: 0 !important; }

  /* profile cameo: 25% smaller on phones (aspect-ratio keeps it proportional) */
  .cameo { width: 75% !important; }
  .fluidcol { width: auto !important; }              /* fixed inner columns */

  /* top-bar nav wraps instead of clipping on very narrow screens */
  .topbar { flex-wrap: wrap !important; gap: 12px 18px !important; }

  /* touch hit targets (inline-flex so min-height/width actually apply to links) */
  .tap { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* inquiry sliders: fatten track + thumb for fingers */
  .track { height: 14px !important; }
  .thumb { width: 30px !important; height: 30px !important; }

  /* tribal: sidebar becomes an off-canvas drawer + hamburger top bar */
  .mobilebar {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    position: sticky;
    top: 0;
    z-index: 6;
    background: rgba(233, 222, 199, .92);
    border-bottom: 1px solid rgba(43, 38, 32, .18);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .drawer {
    position: fixed !important;
    left: 0; top: 0;
    height: 100vh !important;
    width: 272px !important;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 8;
    background: rgba(233, 222, 199, .97) !important;   /* opaque over content */
    box-shadow: 2px 0 24px rgba(43, 38, 32, .18);
  }
  .drawer.open { transform: translateX(0); }
  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(43, 38, 32, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
    z-index: 7;
  }
  .scrim.open { opacity: 1; pointer-events: auto; }

  /* fixed 3-up stat grids go single column on the smallest screens */
  .stats3 { grid-template-columns: 1fr !important; }
}