/* Breakpoints. Three desktop widths, then a fall back to the iOS layout —
   never a fourth layout. */

/* 1200–1439: the two side columns give ground, the map stays elastic. */
@media (max-width: 1439px) {
  :root {
    --list-w: 320px;
    --inspector-w: 356px;
    --side-w: 380px;
    --meter-w: 364px;
  }

  .wire__title { font-size: 40px; }
  .entry__panel { right: 40px; width: 424px; }
  .entry__hero { left: 40px; }
}

/* 1024–1199: the selected thing becomes an overlay panel. The left / work
   column never collapses — it is the screen's reason to exist. */
@media (max-width: 1199px) {
  :root {
    --list-w: 300px;
    --inspector-w: 340px;
  }

  .screen--discovery .inspector,
  .screen--wire .wire__pane,
  .screen--wallet .column--right,
  .screen--reporter .console__side {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 12;
    width: min(var(--inspector-w), 92vw);
    box-shadow: -24px 0 52px rgba(0, 0, 0, 0.55);
  }

  .screen--discovery,
  .screen--wire,
  .screen--wallet,
  .screen--reporter {
    position: relative;
  }

  .stage__portrait { aspect-ratio: 3 / 5; }
  .console__bottom { flex-direction: column; }
  .console__air { padding: 18px 0; }
}

/* < 1024: the iOS layout — single column, bottom sheet, glass tab bar. */
@media (max-width: 1023px) {
  .app,
  .app--bare {
    grid-template-columns: 1fr;
  }

  .app__main { grid-template-rows: 56px 1fr; }

  /* rail → glass tab bar, pinned to the bottom */
  .rail {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 30;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--glass-rim);
    border-radius: var(--r-panel);
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur-panel);
    -webkit-backdrop-filter: var(--glass-blur-panel);
    box-shadow: var(--glass-highlight), var(--glass-lift-panel);
  }

  .rail__mark,
  .rail__avatar,
  .rail .spacer { display: none; }

  .rail__item { width: auto; flex: 1; padding: 10px 0; }

  .topbar { padding: 0 14px; gap: 10px; }
  .topbar__wordmark,
  .topbar__divider,
  .topbar__status { display: none; }
  .search { max-width: none; }

  /* discovery: map full bleed, list as a bottom sheet over it */
  .screen--discovery { position: relative; }

  .screen--discovery .column--left {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 10;
    width: auto;
    height: 52%;
    border: 1px solid var(--glass-rim);
    border-bottom: 0;
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    background: rgba(10, 11, 14, 0.86);
    backdrop-filter: var(--glass-blur-panel);
    -webkit-backdrop-filter: var(--glass-blur-panel);
    padding-bottom: 78px;
  }

  .screen--discovery .inspector {
    position: absolute;
    inset: 0;
    z-index: 20;
    width: auto;
    padding-bottom: 78px;
  }

  .map__chrome--bl,
  .map__chrome--br { display: none; }

  /* wire / wallet / reporter: one column, the selected thing full-screen */
  .screen--wire .wire__pane,
  .screen--wallet .column--right,
  .screen--reporter .console__side,
  .screen--live .column--meter {
    position: absolute;
    inset: 0;
    z-index: 20;
    width: auto;
    padding-bottom: 78px;
  }

  .wire__header { padding: 18px 18px 14px; }
  .wire__title { font-size: 34px; }
  .wire-row { padding: 16px 18px; }
  .wire-row__rail { width: 42px; }

  .wallet__left { padding: 18px; gap: 18px; }
  .wallet__balance { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; }
  .wallet__balance-value { font-size: 48px; }

  /* live: the portrait feed fills the phone-shaped viewport */
  .stage__portrait {
    left: 0;
    transform: none;
    width: 100%;
    aspect-ratio: auto;
  }

  .stage__codename { font-size: 34px; }
  .stage__tr { display: none; }

  /* entry stacks: panel first, headline below, backdrop map kept */
  .entry { overflow-y: auto; }

  .entry__header { position: static; padding: 22px 18px 0; left: auto; right: auto; top: auto; }

  .entry__panel {
    position: static;
    width: auto;
    margin: 20px 18px 0;
  }

  .entry__hero {
    position: static;
    width: auto;
    padding: 28px 18px 40px;
  }

  .entry__headline { font-size: clamp(40px, 11vw, 60px); }
  .entry__stats { flex-wrap: wrap; }
}

/* Coarse pointers get no hover-only affordances. */
@media (hover: none) {
  .row:hover,
  .wire-row:hover,
  .agent-card:hover,
  .nearby:hover { background: inherit; }

  .pin:hover .pin__dot { transform: none; }
}