/* Narrow ------------------------------------------------------------------ */

/* ⚠️ Last of the stylesheets, and it has to stay last: these rules carry the
   same specificity as the ones they override, so the cascade is doing the
   work. What is here is the *shell* giving way — two panes becoming one at
   a time, and the two utilities for showing a control at one width only. A
   surface with a narrow shape of its own keeps that rule in its own file
   (story-editor.css is the one). */

/* Collapsing only means anything where the two panes are side by side; on a
   narrow screen the panes already take turns. The column count follows how
   many panes are actually rendered: a zero-width track would just be handed
   to the next pane by grid auto-placement. Wide-only — narrow screens show one
   pane at a time, so a second column there would strand the visible pane in
   the first one. */
@media (min-width: 861px) {
  .app.side-closed { grid-template-columns: minmax(0, 1fr); }
  .app.side-closed > .pane.side { display: none; }
  .app.side-closed > .pane.chat { border-left: none; }
}
@media (max-width: 1100px) {
  .app { --side: 214px; }
  .brand { font-size: 22px; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app > .pane { display: none; }
  .app > .pane.show { display: flex; }
  .pane + .pane { border-left: none; }
  /* The phone header takes the bar's and the pills' place: a row of the grid
     above the pane that is showing, so whatever that pane does under it — a
     long editor, a field scrolled into view for a keyboard — the game's name
     and the view changer hold still (spec.md §17). */
  .app.has-head { grid-template-rows: auto minmax(0, 1fr); }
  .phone-header { display: flex; }
  .pane.chat > .bar.game-bar, .modes { display: none; }
  .messages { padding: 16px; }
  .composer { padding: 12px 16px 16px; }
  .pane.chat > .bar { padding: 10px 16px; }

  /* The frame around the picture spent on the picture instead. */
  .drawing .media { padding: 6px; }
}
.only-narrow { display: none; }
@media (max-width: 860px) { .only-narrow { display: inline-flex; } }
.only-wide { display: inline-flex; }
@media (max-width: 860px) { .only-wide { display: none; } }