/* Phones, tablets and wide screens: World, Parliament and its institutions, Cabinet, Party, the Record and the Handbook.
   Loaded after every base sheet (index.html), so a rule here overrides one
   in screens.css or game.css at equal specificity. A class defined in a
   screen module's own <style> block is changed in that block instead: a
   <style> inside #screen-root comes later than any stylesheet. Breakpoints
   are the literal queries listed in tokens.css. */

/* Each of these screens marks its root (.world-screen, .parl-screen, …) so a
   rule here reaches only the group's own rooms. */

/* ---- Every room in the group --------------------------------------------
   A panel head is a name and a note. On a phone the note takes the next line
   instead of squeezing the name into a column of single words. */
@media (max-width: 639.98px) {
  :is(.world-screen, .parl-screen, .cabinet-screen, .party-screen, .log-screen, .hb-screen) .panel-head {
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

/* A meter's ticks (the majority, a threshold) stop at the bar's own edges:
   the bar clips them there anyway, and a box drawn past its frame reads as
   lost content to a layout check. Nothing on screen moves. */
:is(.world-screen, .parl-screen, .cabinet-screen, .party-screen) .meter-mark { top: 0; bottom: 0; }

/* ---- World ----------------------------------------------------------------
   A wide screen reads the desk in three columns: the board and the open file,
   the telegrams over the escalations, and what you are bound by. */
@media (min-width: 1600px) {
  .world-screen .world-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) minmax(0, 4fr); }
}

/* ---- Cabinet ----------------------------------------------------------------
   The portfolio grid never asks for more than the screen has: one card per
   row on a phone instead of a 240px card pushing the page sideways. */
.cabinet-screen .cabinet-grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
/* A wide screen sets the card's type a step larger, so the card is wider:
   at 240px each dial's label had 110px and "effectiveness" broke in two. */
@media (min-width: 1600px) {
  .cabinet-screen .cabinet-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* ---- Handbook ---------------------------------------------------------------
   Running text stops at a readable line: the binder's paragraphs ran to 170
   characters on a laptop and 230 on a wide screen. The "go there" buttons of
   the task table are a finger high where there is a finger. */
.hb-screen .hb-p,
.hb-screen .hb-model-text,
.hb-screen .hb-gloss-row dd { max-width: var(--measure); }
/* The task table: the "how" column is running text too, so the table stops
   at a measure plus the width of its first two columns. */
.hb-screen .hb-table { max-width: calc(var(--measure) + 24rem); }
@media (max-width: 639.98px), (pointer: coarse) {
  .hb-screen .hb-nav { min-height: 44px; padding: 0 12px; }
}