/* HQ - the device fit layer.
 *
 * Jason: "i would like the page to not be larger then 1 screen on my sons ipad
 * mini." Harrison uses this app on one device and nothing else, so no screen
 * here may be taller than one viewport - 744x1133 standing up, 1133x744 lying
 * down - and nothing may hang below the fold in either.
 *
 * There is no smaller device to write for. HQ was opened on an iPhone once and
 * Jason ruled it out the same day - "Ok no iPhone. iPad mini only" - so nothing
 * in this file is gated below 744px, and a rule that could only fire on a phone
 * is a rule nothing can reach.
 *
 * This file is loaded last and holds only that rule. Everything in it is a
 * size or a spacing; there is no color here, because nothing about fitting a
 * screen is a color decision. Each block below names what was running over and
 * by how much, measured by tests/ipad.py, which is the file that will say if
 * any of it stops being true.
 *
 * Why svh rather than vh: on iPad Safari 100vh is the LARGE viewport, the one
 * you get with the browser chrome hidden, so a height capped in vh is taller
 * than the screen whenever the toolbar is showing. svh is the small viewport -
 * what is visible at the worst moment - which is the only honest cap for a
 * page that must never scroll.
 */

/* --------------------------------------------------------------- everywhere */

/* main carried a 40px tail below the last thing on every screen. On a page that
   scrolls that is breathing room; on a page that must not, it is 40px of the
   fold spent on nothing. Every overflow named below had this in it. */
main { padding-bottom: 14px; }

/* ------------------------------------------------------------------- the HUD
 *
 * The top bar is on every screen, so its height is charged to every screen, and
 * it held four things stacked in a single column: the level, the rank, the XP
 * bar and the XP count. Measured on an iPad mini that column is 63px tall and
 * 466px wide standing up, 622px wide lying down - a tall thin stack in a box
 * with width going spare.
 *
 * That is why the level was at 10px and the rank and the count at 8px: stacking
 * them was the only way four lines fitted, and the type paid for it. None of
 * them could be read. Pairing them instead - the words on the left, the meter
 * on the right - makes the bar two rows rather than four, which is 43px at the
 * new sizes: twenty pixels SHORTER than the unreadable version it replaces, and
 * the same twenty pixels handed back to every screen under it.
 *
 * The HUD is four sibling elements with no wrapper between them, so the pairing
 * is done by placing each one in a grid rather than by nesting two columns.
 */
.meter {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(120px, 1fr);
  align-items: center;
  column-gap: 16px;
}
.level   { grid-column: 1; grid-row: 1; }
.rank    { grid-column: 1; grid-row: 2; }
.xp      { grid-column: 2; grid-row: 1; }
.xp-text { grid-column: 2; grid-row: 2; }

/* "Walk me through it" sat 18px below the card and measured 43px tall, one
   short of a thumb. Pulling the gap in buys 8px back on the play screen and
   the extra padding puts the button over the 44px floor rather than under it. */
.ghost-btn { margin-top: 10px; padding-top: 13px; padding-bottom: 13px; }

/* ---------------------------------------------------------------- the play
 * screen, which was the worst of them.
 *
 * A Triangle Quiz question - the set with the full-size SVG figures - measured
 * 1270px in a 1133px viewport standing up (137px over) and 904px in 744px lying
 * down (160px over). The two orientations were over for different reasons, so
 * they are fixed in different places.
 *
 * Lying down the figure is already beside the answers, and what makes the
 * screen tall is the number pad: four rows of 74px keys plus an 80px CHECK,
 * 424px of keys under a 75px display. Standing up the pad is the same height
 * and the figure is stacked on top of it, so both have to come down.
 */

/* 64px keys are still a long way above the 44px floor, and a 12-key pad loses
   52px of height. This is the same on both orientations because the pad is the
   same shape on both. */
.key { min-height: 64px; }
.key.go { min-height: 68px; }

/* The card's 20px inset is generous for a bezel and costs 8px of fold. */
#question.card { padding: 16px; }

/* The display above the keys was 75px tall for a number that is at most seven
   digits. 26px still reads across a room and the box comes down to 61px. */
.pad-display { padding: 10px 14px; font-size: 26px; }

/* The stage pips are 10px of content wearing 30px of margin. */
.trail { margin: 8px 0 10px; }
.play-head { margin-top: 4px; }

/* The hint opens under the card after a wrong answer, and it is the tallest
   this screen ever gets - about 50px taller than the same question with no
   hint on it. That state has to fit too, so the gap above it comes in. */
.hint { margin-top: 10px; }

@media (orientation: portrait) {
  /* Standing up the figure was drawing at its full 380px width and 339px tall,
     directly above a 509px pad. Capping it at 23svh - about 260px on an iPad
     mini - is the last 79px, and a triangle on a grid reads perfectly well at
     that size because it is drawn as vector, not shrunk from a photograph. */
  #question .figure { max-height: 23svh; }
}

@media (orientation: landscape) and (min-width: 820px) {
  /* Lying down, the figure column is as tall as the pad beside it, so capping
     the figure does not shorten the screen - but a choice question with a
     figure and no pad measured 737px in 744px, three pixels from the fold.
     40svh instead of 46vh is what gives that one room. */
  #question .figure { max-height: 40svh; }

  /* CHECK moves from a full-width row under the keys to a full-height column
     beside them, the way the equals key sits on a calculator. It is the single
     biggest saving on this screen - 80px - and it costs nothing, because lying
     down the pad has width to spare and no height at all. The 3x3 block of
     digits is left exactly where his hand expects it, which a four-column pad
     would not have been.

     Four rows is stated rather than implied: CHECK holds column four for every
     row, so the twelve keys have exactly the twelve cells of columns one to
     three to fall into. A pad with a different number of keys would need this
     number changed with it. */
  .pad-keys {
    grid-template-columns: repeat(3, 1fr) 1.15fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .key.go { grid-area: 1 / 4 / 5 / 5; }

  /* The last of it, four pixels at a time, because lying down there are only
     744 of them: a shallower top bar and a tighter card inset. */
  .topbar { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
  #question.card { padding: 12px; }
}

/* ------------------------------------------------------------- HQ Control
 *
 * The parent panel is one long form - photograph a sheet, correct what it read,
 * build the set, then add a memory verse - and it does not fit a laid-down iPad
 * mini by any amount of tightening: 925px in 744px empty (181px over), and
 * 1271px once the photograph comes back as a table (527px over). Standing up it
 * fits empty and runs 138px over with the table.
 *
 * So this is the one screen that answers with an internally-scrolling region
 * rather than smaller type. The page itself is pinned to the viewport and the
 * panel scrolls inside it, which keeps the way out and the status line on
 * screen at all times. Shrinking a form a parent types into, on a screen a
 * child never sees, would have been the wrong trade.
 */
body.parent #screen-hq.on {
  display: flex;
  flex-direction: column;
  /* The top bar is hidden in parent mode, so main's own bottom padding is the
     only thing between this screen and the edge of the glass. */
  height: calc(100svh - 14px);
}
body.parent #screen-hq .hq-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
body.parent #hq-panel.on {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* so the last field does not sit flush against the edge of the scroll */
  scrollbar-gutter: stable;
}