/*
 * A THUMB, AND ANY SCREEN. What is here is only what CHANGES with the pointer
 * or the width; everything it changes is defined in the sheets above.
 */

text { font-family: ui-sans-serif, system-ui, sans-serif; }

/*
 * ------------------------------------------------------------- A THUMB, ANY
 *                                                                    SCREEN
 *
 * HOW BIG A THING TO HIT IS, asked of what is doing the pointing rather than of
 * how wide the screen is. A tablet on its side is as wide as a laptop and takes
 * the desk layout below, and none of that makes a finger any more precise --
 * 44px was written into the phone's rules, so a tablet got a row of 30px
 * buttons. Two questions, and they were one.
 *
 * What a pointer can do that a finger cannot is settled the other way about,
 * at each rule that assumes it: see (hover: hover) above.
 */
@media (pointer: coarse) {
  /* 44px is the smallest thing worth aiming at with one hand */
  button, #overlay button, .dbg { min-height: 44px; }
  header .hbtns button { min-height: 44px; }
  /* and a zone a card is aimed at is aimed at with the whole hand */
}

/*
 * -------------------------------------------------------------- ONE COLUMN
 *
 * The board is drawn for a desk: a column of panels beside a building, both
 * of them as tall as the window. Narrower than that -- a phone, and a tablet
 * held upright, which is most of a tablet -- there is one column, so the same
 * pieces are stacked in the order they are used: the building, what you give
 * up, your hand, and the counting panels under all of it, since they are read
 * between turns and never during one.
 *
 * THE LINE IS WHERE THE PANEL STOPS FITTING BESIDE THE BOARD, not where a
 * phone stops. It was at 760px, which is under every tablet ever made: an
 * upright tablet took the desk layout, gave a third of its width to a panel of
 * numbers and drew the building in what was left, about the size of a
 * postcard. The panel wants 330px and the building wants 550 to be worth
 * looking at, so below their sum they stop sharing a line.
 *
 * Nothing here is a different screen. Every rule below moves or resizes what
 * the desk already draws, so there is one board and one set of markings, and a
 * change to either shows up in both.
 */
@media (max-width: 900px) {
  /* the window scrolls now: a phone cannot hold the whole night at once */
  body { overflow: auto; }
  main {
    flex-direction: column; padding: 8px; gap: 10px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    overflow: visible; min-height: 0;
  }
  /*
   * ONE COLUMN, AND ONE FLEX CONTAINER TO ORDER IT IN. The building and the
   * panel beside it are two boxes on a desk, so each could only order its own
   * pieces -- and the two that have to end up next to each other are one in
   * each: the row you play ON is in the board, the hand you play FROM is in the
   * panel. Whatever order each box put its own children in, the other box sat
   * between them.
   *
   * display:contents takes both boxes out of the layout and leaves their
   * children as items of `main`, so the whole column is ordered at once. The
   * DOM is untouched, so every `#side > …` rule still matches.
   */
  #board, #side { display: contents; }
  /*
   * ...AND EACH PIECE HOLDS ITS OWN HEIGHT. `main` is a flex item as tall as the
   * window, so anything that may shrink gets squeezed into it -- and the board
   * was two boxes deep inside a `flex: 0 0 auto` one, which is what used to stop
   * that. Out of those boxes, the building shrank to nothing and the column read
   * as a row, a line and a hand with no museum between them.
   */
  #mapWrap, #mapHost, #trailsFar, #trailsNear { flex: 0 0 auto; }
  /*
   * ...AND THE ORDER IS REACH, not reading. A turn on a phone is: read what the
   * table is waiting for, put a card on your row, take it from your hand. Those
   * three are the bottom of the column, where a thumb is, and everything you
   * read BETWEEN turns is under them.
   *
   * The other burglar's row goes back above the building, which is where it
   * sits at a table anyway -- across from you, with the board between. Both
   * rows were up there once and the board started a screen and a half down;
   * one row is a hundred pixels.
   */
  #side > * { order: 6; }             /* the counters, the log: read at leisure */
  #side > .result { order: 0; }       /* ...except what the night was worth */
  #trailsFar { order: 1; }
  #mapWrap { order: 2; }
  #side > .turnstate, #side > .note { order: 3; }
  #trailsNear { order: 4; }
  #side > .handbox, #side > .lastlook { order: 5; }

  /*
   * THE BUILDING TAKES THE HEIGHT ITS OWN SHAPE ASKS FOR. On a desk the map
   * fills whatever is left of a fixed-height column and centres itself in it.
   * A phone scrolls, so there is nothing to fill -- and a box given a share of
   * the screen just puts the drawing in the middle of a field of paper, since
   * the plan is wider than it is tall and preserveAspectRatio will not stretch
   * it. Width drives it and the height follows.
   */
  #mapHost { min-height: 0; }
  /*
   * ...UP TO A POINT, and the point is a screen with no height. A phone turned
   * on its side is 844 across and 390 down: width alone drew a building taller
   * than the whole window, with the row you play on and the hand you play from
   * a screen and a half below it. Capped, the drawing keeps its shape and
   * centres in the width instead -- preserveAspectRatio was always going to.
   */
  #mapHost svg { width: 100%; height: auto; max-height: 60vh; }
  /* the joker's floors go UNDER the building rather than beside it: a column
     of two card-widths is most of a phone */
  #mapWrap { flex-direction: column; gap: 6px; }
  #pick { width: auto; }

  /*
   * A row too long for its column scrolls its cards sideways at every width, and
   * keeps the room a fan needs to leave the row -- both in base.css: a row longer
   * than the column it is in was never a phone's problem, it was a column's.
   *
   * A ROW OPENS IN PLACE HERE, though, rather than lying over the building. On a
   * desk an opened ribbon lifts out of the flow so that nothing below it moves,
   * which is worth doing where the window holds the whole night at once. A phone
   * scrolls the night anyway, so the shell gives up its fixed height and the page
   * grows instead -- which is what a page that scrolls is for, and it keeps an
   * opened row off the little of the building a phone can show.
   */
  /* named through the strip, because that is how the height it is giving up was
     set -- an id outranks any number of classes, and a plain .trail.ribbon.open
     lost to it silently, leaving the shell at the closed ribbon's 56px */
  #trailsFar .trail.ribbon.open, #trailsNear .trail.ribbon.open { height: auto; }
  .trail.ribbon.open .tray { position: static; }

  /*
   * THE HEADER IS TWO LINES ON PURPOSE. Four buttons and a title do not fit
   * across a phone, and shrinking them to fit is how a control becomes one
   * nobody can hit: they take the second line at full size instead.
   */
  header {
    gap: 6px 10px; padding: 8px 10px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-top: max(8px, env(safe-area-inset-top));
  }
  header .hbtns { width: 100%; margin-left: 0; gap: 6px; }
  header .hbtns .hsep { display: none; }
  header .hbtns button {
    flex: 1 1 0; min-height: 42px; padding: 6px 8px; font-size: 12px;
  }

  /*
   * THE FRONT PAGE STACKS. The hero is a grid of "whatever is left" beside a
   * board drawn at a fixed 380px -- which on a 390px phone leaves the pitch one
   * word wide and hangs the board off the right-hand edge. The board goes under
   * the words and takes the width it is given.
   */
  #overlay { padding: 14px 12px; }
  /*
   * A TALLY IS FOUR COLUMNS ON A DESK and does not fit across a phone: the
   * score fell off the right and the rows ran past both edges, 35px wider than
   * the screen. Two rows of two instead -- who and what it was worth on the
   * first, where they went and how it ended under it -- which is the same four
   * things without asking a 390px screen to hold them side by side.
   */
  .tallies { width: 100%; }
  .tally {
    grid-template-columns: 15px minmax(0, 1fr) auto;
    gap: 2px 10px; padding: 10px 12px;
  }
  .tally b { grid-column: 2; grid-row: 1; }
  .tally .pts { grid-column: 3; grid-row: 1; font-size: 20px; min-width: 0; }
  .tally .took { grid-column: 2 / span 2; grid-row: 2; }
  .tally .verdict { grid-column: 2 / span 2; grid-row: 3; text-align: left; }
  #overlay .home { gap: 20px; }
  #overlay .home .hero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #overlay .home .heroplan svg { width: 100%; }
  #overlay .plans { grid-template-columns: 1fr 1fr; }
  #overlay .seatgroups { flex-direction: column; }
  #overlay .roomcode { font-size: 38px; letter-spacing: 5px; }
}