/* THE PHONE. One shared sheet — the surfaces are otherwise self-contained
   by design (no build step), but six copies of a nav rule is a trap.

   The bug this fixes (8/10): every surface did `.rail-nav{display:none}`
   below 1100px, so on a phone you landed on Today and could never leave.
   Hiding navigation is not responsive design. The rail becomes a bottom
   bar instead — thumb-reachable, the way phones actually work. */

@media (max-width: 1100px) {

  /* Nothing may be wider than the phone. The cockpit grid declares
     minmax(640px,1fr), which sets a 640px floor and pushes the whole
     document — and with it the fixed bottom bar — off the right edge. */
  html, body { max-width: 100vw; overflow-x: hidden; }
  .app, .inner, .work, .glance, .card, .panel, .pcard, .tile,
  .head, .fact, .row, .lrow, .big, .live, .gate, .read, .band {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .app { width: 100% !important; }
  img, canvas { max-width: 100%; height: auto; }

  /* the rail stops being a sidebar and becomes a bottom bar */
  .rail-nav {
    display: flex !important;
    flex-direction: row !important;
    left: 0; right: 0; top: auto; bottom: 0;
    width: auto !important;
    height: 62px;
    padding: 0 !important;
    border-right: none;
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 14px rgba(46, 51, 56, 0.08);
    z-index: 40;
    /* iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }
  .rail-nav .wordmark,
  .rail-nav .gap,
  .rail-nav .foot { display: none !important; }

  .rail-nav a {
    flex: 1 1 0;
    min-width: 0;                    /* six labels must share 390px */
    flex-direction: column;
    justify-content: center;
    gap: 0 !important;
    padding: 8px 1px !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-left: none !important;
    border-top: 3px solid transparent;
  }
  .rail-nav a.on {
    border-top-color: var(--amber);
    background: #fdf7ec;
  }
  .rail-nav a .dot {
    position: absolute; margin: 0 !important;
    transform: translate(16px, -10px);
  }

  /* every surface's content column loses the sidebar gutter and gains
     room for the bar */
  .app {
    margin-left: 0 !important;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
    display: block !important;
    padding: 14px 16px calc(78px + env(safe-area-inset-bottom, 0)) !important;
  }

  /* the cockpit's fixed columns stack; nothing scrolls inside anything */
  .work, .glance, .stack, .cols, .attn, .roll, .grid, .plist, .strip {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  .glance { margin-top: 18px; }

  /* headers wrap instead of squeezing */
  .hline { flex-wrap: wrap; gap: 8px !important; }
  .hline h1 { font-size: 23px !important; }
  .hline .sub { margin-left: 0 !important; font-size: 13px; width: 100%; }
  .chip-left, .pmark { margin-left: 0 !important; }

  /* the ask bar sits above the tab bar, not under it */
  .askrow {
    position: sticky; bottom: 0; z-index: 30;
    background: linear-gradient(transparent, var(--paper) 22%);
    padding-bottom: 10px !important;
  }

  /* thumbs need 44px; Canon's verbs were sized for a mouse */
  .verbs button, .act, .ask, .gate .ask { min-height: 44px; }
  .lens button { min-height: 40px; }
}

/* very small phones: one column everywhere, quieter type */
@media (max-width: 560px) {
  .rail-nav a { font-size: 10px !important; }
  .card .body, .panel, .pcard .body { padding: 13px 14px !important; }
  .lrow { flex-wrap: wrap; gap: 6px !important; }
  .lrow .co { max-width: 100% !important; }
  .row .kind { width: auto !important; min-width: 0 !important; }
}