/* Phones, tablets and wide screens: the Overview, the opposition office and its toolkit, the path to power, the shadow programme, Policies, Economy and Voters.
   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. */

/* ---- Title cards: the Overview, the office, the path to power -------------
   On a phone the masthead is the first screenful, and everything the month
   needs is under it. It keeps the date, the face and the one number, and
   gives the rest of the height back. */

@media (max-width: 639.98px) {
  .hero-tight { min-height: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .hero-tight .hero-body { gap: 6px; }
  .hero-tight .hero-title { font-size: var(--fs-title); }
  .hero-tight .hero-sub { gap: 6px var(--sp-3); }
  .hero-tight .hero-sub > .portrait { width: 40px; height: 40px; }
  /* The name and office stay beside the face and wrap there, rather than
     the whole block dropping under the portrait as one unbreakable line. */
  .hero-tight .hero-who { flex: 1 1 12rem; min-width: 0; }
  /* The dial drops under the name; it spans the row so the stamp sits on
     the left and the instrument on the right, not both crowded right. */
  .hero-tight .hero-dial { width: 100%; justify-content: space-between; }
  .hero-tight .op-hero-poll { margin-left: 0; width: 100%; justify-content: flex-end; }
  .hero-tight .op-big { font-size: var(--fs-kpi); }
}

/* ---- The Overview ---------------------------------------------------------- */

/* Eight figures two abreast: a phone sees four of them without scrolling,
   where one column showed two. The label may take two lines rather than end
   in an ellipsis — "Healthcare quality" is the reading, not decoration. */
@media (max-width: 639.98px) {
  .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .dash-tiles .tile { padding: var(--sp-2) var(--sp-3) var(--sp-3); gap: 6px; }
  .dash-tiles .tile-label { white-space: normal; align-items: flex-start; line-height: 1.25; }
  .dash-tiles .tile-label > svg { flex: none; margin-top: 1px; }
  .dash-tiles .tile-foot { flex-wrap: wrap; justify-content: flex-start; gap: 2px 6px; }
  .dash-tiles .tile-why { margin-left: auto; }
}

/* A wide monitor: standing, trend and the situation board side by side, the
   four advisers under them in two columns so no speech bubble runs to a
   hundred characters a line. */
@media (min-width: 1600px) {
  .dash-lower { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-lower > .dash-advisers { grid-column: 1 / -1; }
  .dash-advisers > .panel-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-5);
  }
}
/* Wherever the advisers' panel is a single column wider than a laptop's
   half (below 1100px), or two across a wide monitor, a speech bubble stops
   at a reading width instead of running the panel's length. */
@media (max-width: 1100px), (min-width: 1600px) {
  .dash-advisers .advisor-say { max-width: 64ch; }
}

/* ---- Policies and the shadow programme: the ministry tabs -----------------
   At a desk the tabs are a column beside the levers, pinned while the levers
   scroll, with the drafting button and the note under them (.ministry-col
   is that column now; the tabs inside it no longer need to stick on their
   own). Below 900px the column used to stack above the list and scroll away.
   Now its box dissolves (display: contents) and the tabs become a strip
   pinned to the top of the screen, swiped sideways, with the button above
   the levers and the note after them — and every ministry is one tap away.
   A phone on its side (520px of height or less) gets the strip too: its
   screen is wide enough for the column but some 300px short of holding it. */

.ministry-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  min-width: 0;
  /* Taller than the room it is pinned in (a tablet's finger-sized tabs, a
     short window), the column scrolls on its own, so the last ministries and
     the note under them stay in reach. The 3px keep a focus ring inside the
     box that clips it. */
  max-height: calc(100dvh - var(--topbar-h) - var(--ticker-h) - var(--actionbar-h) - 2 * var(--gutter));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 3px;
  margin: -3px;
}
.ministry-col > .ministry-tabs { position: static; }
.ministry-draft { margin-top: var(--sp-2); }

@media (max-width: 900px), (max-height: 520px) {
  /* No box, so nothing of the pinned column's own scrolling either. */
  .ministry-col { display: contents; max-height: none; overflow: visible; padding: 0; margin: 0; }
  .ministry-col > .ministry-tabs {
    position: sticky;
    /* Stuck to the scroller's top edge, not its content edge: what scrolls
       through the padding above would otherwise show over the strip. */
    top: calc(-1 * var(--gutter));
    z-index: 2;
    flex-direction: row;
    gap: var(--sp-2);
    margin: calc(-1 * var(--sp-2)) calc(-1 * var(--gutter)) 0;
    padding: var(--sp-2) 24px var(--sp-2) var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter) 24px;
    scrollbar-width: none;
    background: var(--bg-0);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.6);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  .ministry-col > .ministry-tabs::-webkit-scrollbar { display: none; }
  /* A phone on its side has some 270px of page: the strip gives back its
     breathing room and keeps only the finger-sized tabs. */
  @media (max-height: 520px) {
    .ministry-col > .ministry-tabs { padding-top: 4px; padding-bottom: 4px; margin-top: -4px; }
  }
  .ministry-col > .ministry-tabs > .ministry-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    min-height: var(--tap, 36px);
  }
  /* The note on how a move is routed follows the ministry's list rather
     than pushing the levers a screen down. Only the note moves: it holds no
     control, so the keyboard's order still matches the eye's. */
  .ministry-col > .ministry-draft { justify-self: start; margin-top: 0; }
  .ministry-col > .ministry-note { order: 2; padding: 0 var(--sp-1); max-width: var(--measure); }
  .ministry-col ~ .policy-list { order: 1; }
}

/* The levers on a phone: the move's price, its pass-or-fail chip and the two
   buttons wrap under the slider and start at the left, where the thumb is. */
@media (max-width: 639.98px) {
  .policy-preview { justify-content: flex-start; }
  .policy-preview > .btn { flex: 1 1 0; }
  .op-shadow-act { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .op-shadow-act > .btn { width: 100%; }
  .op-shadow-act > .op-reason { text-align: left; max-width: none; }
}
@media (max-width: 639.98px), (pointer: coarse) {
  .policy-preview, .op-shadow [role="group"] { gap: var(--tap-gap); }
}
@media (max-width: 639.98px) {
  /* A label and a long reading share a line only while both fit. */
  .op-shadow .policy-control .spread { flex-wrap: wrap; row-gap: 4px; }
}

/* ---- The opposition office and the toolkit ------------------------------- */

/* Never a column wider than the screen, wherever the panel is mounted (the
   toolkit also sits in the Parliament screen's narrow column). */
.op-tiles { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
/* The standing orders' choices; spaced for a finger under the touch query below. */
.op-order-choices { flex-wrap: wrap; gap: 4px; }
.op-moves { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.op-routes { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
@media (max-width: 720px) {
  .op-moves, .op-routes { grid-template-columns: minmax(0, 1fr); }
}

/* A tile's foot (a reading and a button or a note) wraps rather than
   spilling out of a tile narrower than a laptop's. */
@media (max-width: 1023.98px) {
  .op-tiles .tile-foot { flex-wrap: wrap; justify-content: flex-start; gap: 2px 6px; }
}
@media (max-width: 639.98px) {
  .op-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .op-tiles .tile { padding: var(--sp-2) var(--sp-3) var(--sp-3); gap: 6px; }
  .op-tiles .tile-label { white-space: normal; align-items: flex-start; line-height: 1.25; }
  .op-path-line { padding: var(--sp-3); }
  .op-path-line > .btn { flex: 1 1 100%; }
  .op-toolkit > .panel-head, .op-votes > .panel-head { flex-wrap: wrap; row-gap: 4px; }
  /* A move: its argument and its button each take the full width, one
     under the other, after the odds. */
  .op-move-foot > .op-select,
  .op-move-foot > .btn { flex: 1 1 100%; }
  .op-move-foot > .fill { display: none; }
  .op-reason { text-align: left; max-width: none; }
  .op-route-go { width: 100%; }
  .op-date { flex-wrap: wrap; }
  /* "Planned", "Taken back", a refusal: written at the top of the panel, and
     a phone has usually scrolled far below it to press the button. Pinned,
     the answer is where the thumb is for as long as the panel is. */
  .op-toolkit .op-notice, .op-votes .op-notice {
    position: sticky;
    top: calc(-1 * var(--gutter) + var(--sp-2));
    z-index: 2;
    box-shadow: var(--shadow-2);
  }
}
@media (max-width: 639.98px), (pointer: coarse) {
  .op-queued li { min-height: var(--tap); }
  .op-queued ul { gap: 0; }
  .op-vote-buttons, .op-order-choices, .op-move-foot { gap: var(--tap-gap); }
  .op-vote-buttons > .btn, .op-order-choices > .btn { flex: 1 1 0; }
}

/* The law glyph before a rule's citation sits in the line it heads. Icons
   are blocks by default (game.css), which put it on a line of its own. */
.op-move-rule > svg.icon { display: inline-block; vertical-align: -1px; }

/* A meter's ticks (the majority, a threshold) stop at the bar's own edges:
   the bar clipped them there anyway, and a box drawn past its frame reads as
   lost content to a layout check. Each also steps back its own width, so a
   tick at 100% — a majority reached at the bar's end — is drawn, not lost. */
.op-office .meter-mark, .op-toolkit .meter-mark, .op-votes .meter-mark, .op-shadow .meter-mark,
.op-power-grid .meter-mark, .voter-groups .meter-mark, .op-routes .meter-mark { top: 0; bottom: 0; margin-left: -1px; }

/* Prose in the office and on the path to power stops at a reading width
   where a single column is wider than a laptop's. */
@media (min-width: 640px) and (max-width: 1023.98px), (min-width: 1600px) {
  .op-office .op-note, .op-office .op-objective > .dim, .op-power-grid .op-note,
  .op-power-grid .op-route-who, .op-power .hero-sub { max-width: 64ch; }
}

/* ---- Voters ---------------------------------------------------------------- */

/* The mood meter in a group's row. meter() writes an inline span, which
   has no width of its own inside the row's flexible cell: it was drawn at
   0×0 at every size. As a block it fills the cell, as it was meant to. */
.voter-groups .gh-meter > .meter { display: block; }

/* A group on a phone, or in one of a wide monitor's two columns, is two
   lines: the name, its share, the score and the face on the first; the
   meter, and in opposition the party's own standing, on the second. The
   name keeps its width instead of a fixed 170px. */
@media (max-width: 639.98px), (min-width: 1600px) {
  .voter-groups .group-head {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "glyph name share pct  mood"
      ".     bar  bar   chip chip";
    align-items: center;
    gap: 4px var(--sp-2);
    min-height: 48px;
    padding: var(--sp-2);
  }
  .voter-groups .gh-glyph { grid-area: glyph; }
  .voter-groups .group-name { grid-area: name; min-width: 0; }
  .voter-groups .gh-share { grid-area: share; }
  .voter-groups .gh-meter { grid-area: bar; }
  .voter-groups .gh-pct { grid-area: pct; }
  .voter-groups .group-head > .mood { grid-area: mood; }
  .voter-groups .op-affinity { grid-area: chip; justify-self: end; }
}
/* A wide monitor: the groups in two newspaper columns, angriest first down
   the left and on down the right, so a row is not a meter stretched across
   eight hundred pixels and an opened group pushes only its own column. */
@media (min-width: 1600px) {
  .voter-groups > .panel-body { display: block; columns: 2; column-gap: var(--sp-5); }
  .voter-groups .group-row { break-inside: avoid; margin-bottom: var(--sp-2); }
}