/* ===========================================================================
   13.15 — the phone pass. `_global/mobile/SPEC.md` 2026-09-08, answer 34.

   "Every surface at 390 and 360 wide: Home, Discover (13.7's sheet), the
    profile tabs, edit mode, Create, Messages, pelts."

   TWO WIDTHS, NOT ONE. 390 is an iPhone 15; 360 is the Android floor and the
   width almost everything breaks at first. The rules below are ordered the
   same way: the 480 block is the phone layout, the 380 block is what has to
   give at the floor.

   THE RULE THIS FILE FOLLOWS: nothing here hides a control. A surface that is
   out at launch on a phone is out in the JAVASCRIPT (Scan draws its own card,
   the graph button and Shared cards are not built) and says so; CSS that hid
   a live control would leave a page that silently does less than it claims.

   Nothing here touches a desktop. This sheet is loaded last and every rule is
   inside a max-width query.
   =========================================================================== */

@media (max-width: 480px) {
  /* THE PAGE NEVER SCROLLS SIDEWAYS. One rule, at the root of the layout,
     because a single wide child anywhere below it moves the whole page. */
  body { overflow-x: hidden; }
  .surface, .surface-wide { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }

  /* Home: one column, edge to edge; the aside goes above the feed. */
  .home-cols { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 100%; padding: 0 0 84px; }
  .home-aside { grid-column: 1; grid-row: 1; }
  .home-feed { grid-column: 1; grid-row: 2; gap: 10px; } /* 2026-09-15 — Nick wants the small whitespace between posts on a phone too */

  /* The post card is the width of the screen, as it is on Instagram: the
     picture is the point and a 12px margin either side halves it. */
  .pc { border-left: 0; border-right: 0; border-radius: 0; }
  .pc-head { padding: 10px 12px 0; }
  /* 20.6 — the artwork joins the list, so "the same side padding as the body
     text" is one value here rather than two that nearly agree (the first
     phone shot measured body 12px against media 14px). */
  .pc-body, .pc-caption, .pc-identity, .pc-list,
  .pc-media, .pc-media.is-preview { padding-left: 12px; padding-right: 12px; }
  /* 18.3: the caption keeps its small indent on a phone too, from the phone's
     own 12px gutter rather than the desktop's 16. */
  .pc-caption { padding-left: 24px; }
  /* 20.6 (`post-card/SPEC.md` entry 20) — THE SAME SIDE PADDING AS THE BODY.
     This rule's `padding: 10px 0` is loaded after home.css and was quietly
     undoing the inset on the phone, which is where Nick's screenshot was
     taken. The vertical value is kept; only the sides change. */
  .pc-media { padding-top: 10px; padding-bottom: 10px; }
  .pc-frame { width: 100%; max-width: 100%; max-height: none; }
  .pc-foot { padding: 8px 8px 4px; }
  .pc-title { font-size: 17px; }
  /* The identity row stacks: a title, its facts, and In Library beside them
     is three things on one 360px line. */
  .pc-identity { flex-wrap: wrap; gap: 4px 10px; }

  /* The profile: the tabs are a full-width strip, the header stacks. */
  .pfp { max-width: 100%; padding: 0 12px 84px; }
  .pfp-tabs { justify-content: space-around; }
  .pfp-tab { flex: 1 1 0; }
  /* Edit mode is the body, so it gets the body's width and nothing more. */
  .pfp-editing { padding: 0 0 84px; }
  .pfp-editing .ep-sec { border-radius: 0; }
  .ep-sec-head { flex-wrap: wrap; gap: 6px; }
  .ep-sec-tools { margin-left: auto; }

  /* Create: a sheet from the bottom, not a dialog in the middle. */
  .cmp-scrim { align-items: flex-end; padding: 0; }
  .cmp { --ig-dialog-w: 100%; width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; }
  .cmp-body { padding: 12px; }
  .cmp-foot { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 8px; }
  .cmp-tools { order: 3; width: 100%; }

  /* Messages: one pane at a time — the list, or the conversation. */
  .msg { grid-template-columns: minmax(0, 1fr); }
  .msg-pane { width: 100%; }

  /* Pelts: the card and the send sheet come from the bottom. */
  .ps-sheet.is-bottom { width: 100%; max-width: 100%; border-radius: 12px 12px 0 0; }
  .plt-actions { flex-wrap: wrap; gap: 6px; }
  .plt-act { flex: 1 1 auto; justify-content: center; }
  /* 15.9: entry 9 asks for 2×3 ON A BIG SCREEN. Three columns at 390 puts
     "Pelt onward" on two lines, so a phone gets 2 × 3 the other way up —
     still a grid, still the DO row before the verdicts, labels on one line. */
  .plt-actions.plt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Every dialog in the app is a bottom sheet on a phone. A 560px box
     centred on a 360px screen is a box with no margins that cannot scroll. */
  .ig-scrim { align-items: flex-end; }
  .ig-dialog { --ig-dialog-w: 100%; width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; }

  /* Discover's deck is already a sheet (13.7); this is only its floor. */
  .ch-deck.is-sheet { max-height: 80vh; }

  /* Scan, on a phone, is one card and an address (src/ui/scan.js). */
  .sc-phone { display: grid; place-items: center; min-height: 60vh; padding: 24px 16px 84px; }
  .sc-phone-card { max-width: 34ch; text-align: center; display: grid; gap: 10px; justify-items: center; }
  .sc-phone-i { color: var(--ink-faint); }
  .sc-phone-card h2 { margin: 0; font-family: var(--font-serif); font-size: 21px; }
  .sc-phone-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
  .sc-phone-addr { display: grid; gap: 2px; }
  .sc-phone-addr b { font-family: var(--font-mono); font-size: 13px; color: var(--ink); word-break: break-all; }

  /* Settings: the sidebar and the pane are two screens, not two columns. */
  .stg { grid-template-columns: minmax(0, 1fr); }
  .stg-plan { flex-wrap: wrap; }
}

/* ------------------------------------------------------------- the floor --
   360px. What gives here gives ONLY here. */
@media (max-width: 380px) {
  .pc-actions { gap: 2px; }
  .pfp-tab svg { width: 20px; height: 20px; }
  .pfp-meta { gap: 10px; }
  /* Two words on a button is one word too many at 360. */
  .plt-act span, .plt-act { font-size: 12.5px; }
  .stg-plan-c b { font-size: 16px; }
  .cmp-tools .ig-btn span { display: none; }   /* the glyphs still say which is which */
}

/* ------------------------------------------------------------ standalone --
   Installed from the manifest, the app has no browser chrome, so the safe
   areas are ours to respect — otherwise the bottom bar sits under the home
   indicator and the top of the page under the notch. */
@media (display-mode: standalone) {
  .ig-bottom, .ig-tabbar { padding-bottom: env(safe-area-inset-bottom); }
  .ig-top { padding-top: env(safe-area-inset-top); }
}

/* 2026-09-15 — a solid page: nothing drags sideways, and no input is smaller
   than 16px, because iOS zooms the page into any smaller field on focus and
   leaves it zoomed (Nick's "zoomed in by like 2-3%"). */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  input, textarea, select, .ch-input, .srch-input { font-size: 16px; }
}