/* Phones, tablets and wide screens: the title screen, the identity, the questionnaires, coalition talks, election night, the campaign, the debate studio, the ceremony and the front page.
   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. */

/* ---- Every full-screen view -------------------------------------------------
   The identity, the questionnaires, the night, the studio, the ceremony, the
   record and the front page grow past the screen and the document scrolls
   them, as it always has: Space and the arrow keys scroll a page whose focus
   is on nothing, which they would not do inside a box of its own. A
   .q-screen therefore must not clip either (overflow-y: auto made it the
   box a .sticky-actions row stuck to, and it never scrolled), and its
   column starts at the top rather than being stretched to the screen. */
.q-screen { overflow: visible; align-items: flex-start; }

/* A row of actions that is centred where it was written stays centred when
   it rides the bottom of a phone. */
.sticky-actions.center { justify-content: center; }
/* Two actions share the bar on a phone, each wrapping its own words, rather
   than stacking into a bar a sixth of the screen tall. */
@media (max-width: 639.98px) {
  .sticky-actions.pair { flex-wrap: nowrap; align-items: stretch; }
  .sticky-actions.pair > .btn { flex: 1 1 auto; min-height: 48px; }
  .sticky-actions.pair > .btn.ghost { flex: 0 1 auto; max-width: 40%; }
}

/* ---- The title screen ----------------------------------------------------- */

.start-hero { min-height: 212px; align-items: center; justify-content: center; text-align: center; }
.start-screen .country-name { font-family: var(--font-display); font-size: 24px; line-height: 1.15; }
.start-screen .briefing-line,
.start-note p { max-width: var(--measure); }
.folder-actions { flex-wrap: wrap; gap: var(--tap-gap); }

/* Only where it would help: a phone's browser tab, never the installed app. */
.a2hs-hint { display: none; margin: var(--sp-2) 0 0; font-size: var(--fs-caption); }
@media (display-mode: browser) and (max-width: 639.98px) {
  .a2hs-hint { display: block; }
}

@media (max-width: 639.98px) {
  .start-inner { gap: var(--sp-4); padding-top: var(--sp-4); }
  .start-hero { min-height: 148px; padding: var(--sp-4); }
  /* A dossier is a row on a phone: the flag, the name and the stamp share a
     line, so all three countries and the start of the briefing fit on the
     first screen. The landmark behind it stays a watermark. */
  .country-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3);
    min-height: 56px;
  }
  .country-card > .spread { display: contents; }
  .country-card > .spread > :first-child { grid-area: 1 / 1; }
  .country-card > .spread > .stamp { grid-area: 1 / 3; }
  .country-card > .country-name { grid-area: 1 / 2; font-size: 20px; }
  .country-card > .country-role,
  .country-card > .country-line { grid-column: 1 / -1; margin-top: 0; }
  /* The way in rides the foot of the briefing while its sides are read. */
  .start-go {
    position: sticky; bottom: 0; z-index: 2;
    margin-inline: calc(-1 * var(--sp-3));
    padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + var(--safe-b));
    background: linear-gradient(transparent, var(--bg-1) 30%);
  }
  .start-go > .btn { flex: 1 1 auto; min-height: 48px; }
}

/* A wide screen gets a wider desk, and the sides of a country wider cards:
   three to a row, so a long party name ("Kommounistiko Komma Elladas") keeps
   each word whole beside its stamp. Four to a row left the name 103px. */
@media (min-width: 1600px) {
  .start-inner { max-width: 1040px; }
  .side-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* ---- The identity ----------------------------------------------------------- */

/* Six faces in two rows of three beside the chosen one, where a phone has no
   room for six in a row. */
@media (max-width: 639.98px) {
  .id-faces { display: grid; grid-template-columns: repeat(3, 48px); flex: 0 0 auto; }
}

/* ---- The questionnaires ------------------------------------------------------
   The axis rows share the width between the two poles and the track instead
   of giving each pole a fixed 110px, so a phone's track is not a stub. A
   pole's column is never narrower than its longest word ("interventionist"):
   a two-word pole wraps between its words, never inside one. */
.axis-row { grid-template-columns: minmax(min-content, 1fr) minmax(48px, 1.2fr) minmax(min-content, 1fr); }
.axis-label { overflow-wrap: break-word; line-height: 1.3; }
/* The pole the doctrine leans to, as the radar's vertex word says it. */
.axis-label.lean { color: var(--text-mid); }
.axis-label.lean.firm { color: var(--text-hi); font-weight: 600; }

/* The doctrine radar: one drawing, scaled by its viewBox. */
.q-radar { display: block; max-width: 320px; margin: 0 auto; color: var(--text-mid); }

/* The radar's vertex words are drawn at 8.6 units into 320, which no phone
   can enlarge without the long ones ("interventionist") leaving the
   drawing. On a phone the shape stays and the words go: each axis row under
   it names both poles and marks the one the doctrine leans to. */
@media (max-width: 639.98px) {
  .q-radar text { display: none; }
  .q-radar { max-width: 260px; }
}

/* A pledge on the record: on a phone its deadline goes under the text
   instead of squeezing it into a column three words wide. */
@media (max-width: 639.98px) {
  .np-box .pledge-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 2px var(--sp-2);
  }
  .np-box .pledge-row > .num { grid-column: 2; white-space: normal; }
}

/* ---- The front page and the record ----------------------------------------- */

.np-stand {
  width: min(920px, 100%);
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
}

@media (max-width: 639.98px) {
  .np-stand { padding: var(--sp-3) var(--gutter) var(--sp-4); gap: var(--sp-3); }
  .np-stand .sticky-actions { align-self: stretch; }
  .np-mast { font-size: clamp(28px, 8.4vw, 40px); }
  .np-lead { font-size: clamp(23px, 6.6vw, 30px); }
  .np-deck { font-size: 16px; }
  /* At 3.1em the drop cap took a third of a phone's only column. */
  p.np-drop::first-letter,
  span.np-drop { font-size: 2.5em; }
  .np-strip { gap: var(--sp-1) var(--sp-3); }
}

/* A wide screen gets the broadsheet: a wider sheet, three columns again. */
@media (min-width: 1600px) {
  .np-stand { width: min(1000px, 100%); }
  .np-stand .paper { width: min(960px, 100%); }
}

/* The record's figures (a .grid-fit, as many to a row as the sheet holds),
   read left to right between the sheet's rules. */
.rc-figures { text-align: left; padding: var(--sp-3) 0; }

/* ---- Taking office ----------------------------------------------------------- */

.op-cabinet { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.ceremony-line,
.op-ceremony-grid .op-route-who { max-width: var(--measure); }

/* ---- Coalition talks --------------------------------------------------------
   The chamber and the governments on the table, the parties, the desks: one
   column on a phone and a narrow tablet, two where two fit at 380px (the
   desks beside both of the others), three on a screen wide enough that the
   parties need not share a column. */
.ct-grid { display: grid; gap: var(--sp-4); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .ct-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    grid-template-areas: "a c" "b c";
  }
  .ct-a { grid-area: a; }
  .ct-b { grid-area: b; }
  .ct-c { grid-area: c; }
}
@media (min-width: 1760px) {
  .ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; grid-template-areas: "a b c"; }
}

.ct-chamber { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.ct-chamber .chart-hemi { width: 100%; }
.ct-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px var(--sp-3);
  font-size: var(--fs-caption); color: var(--text-mid);
}
.ct-legend li { display: inline-flex; align-items: center; gap: 5px; }
.ct-legend li.in { color: var(--text-hi); font-weight: 600; }
.ct-legend .num { color: var(--text-low); font-weight: 400; }
.ct-swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.ct-cabinet {
  justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-2); padding: 6px 0; border-bottom: 1px solid var(--line);
}
.ct-cabinet > .btn { margin-left: auto; }

.ct-parties .ct-party-name { font-size: var(--fs-small); }
.ct-parties .ct-leader { gap: 6px; margin-top: 4px; font-size: var(--fs-caption); }
.ct-parties .ct-status { font-size: var(--fs-caption); }
/* A party's resolution can be one long German compound
   ("Unvereinbarkeitsbeschluss"). Its column grows to hold the word whole;
   only a box narrower than the word itself breaks it. */
.ct-parties .ct-why { margin-top: 2px; overflow-wrap: break-word; }
.ct-parties td.cell-actions { text-align: right; }
.ct-parties td.cell-actions .btn { margin: 2px 0 2px 6px; }
/* From 900px the parties share half the screen. Where that half is narrower
   than the table's four columns need (about 1100px and down), the table reads
   as the phone's cards (below) instead of running past its panel. A phone
   has them already, and a wide screen its own cards (further down). */
.ct-b .panel-body { container-type: inline-size; }
@media (min-width: 640px) and (max-width: 1759.98px) {
  @container (max-width: 459.98px) {
    .ct-parties, .ct-parties tbody, .ct-parties tr, .ct-parties td { display: block; width: 100%; }
    .ct-parties tr { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); }
    .ct-parties td { padding: 2px 0; border: 0; text-align: left; }
    .ct-parties td[data-label]::before {
      content: attr(data-label);
      display: block;
      font-size: var(--fs-micro);
      text-transform: uppercase;
      letter-spacing: var(--ls-caps);
      color: var(--text-low);
    }
    .ct-parties td.num { font-family: var(--font-mono); }
    .ct-parties td.num::before { display: inline; margin-right: var(--sp-2); }
    .ct-parties td.cell-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-2); }
    .ct-parties td.cell-actions .btn { margin: 0; }
    .ct-parties td.cell-none { display: none; }
  }
}

.ct-chips { flex-wrap: wrap; gap: 6px; }
/* "Transport, Building & Housing · asked" is wider than a phone's card. */
.ct-chips .chip { white-space: normal; text-align: left; }
.ct-item {
  justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2); padding: 5px 0; border-bottom: 1px solid var(--line);
}
/* The demand keeps the row; its answers follow it underneath once the
   column is too narrow for both. */
.ct-item > :first-child { flex: 1 1 260px; }
.ct-grants { gap: 4px; flex-wrap: wrap; margin-left: auto; }

@media (max-width: 639.98px), (pointer: coarse) {
  .ct-chips, .ct-grants { gap: var(--tap-gap); }
  .ct-cabinet { min-height: 48px; }
}

@media (max-width: 639.98px) {
  /* One card per party (components.css table.cards-sm): the party and its
     leaders are the card's title, its answers a row of full-size buttons. */
  .ct-parties td.cell-actions { justify-content: flex-start; }
  .ct-parties td.cell-actions .btn { margin: 0; }
  .ct-parties td.cell-none { display: none; }
  .ct-parties td.num { font-family: var(--font-mono); }
  .ct-parties td.num::before { display: inline; margin-right: var(--sp-2); }
}

/* In the third column of a wide screen the table has a third of the room:
   each party becomes a card there too, its seats beside its name, its
   answer and its buttons under them, rather than four columns of stubs. */
@media (min-width: 1760px) {
  .ct-parties, .ct-parties tbody, .ct-parties td { display: block; }
  .ct-parties tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--sp-3);
    padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line);
  }
  .ct-parties tr:last-child { border-bottom: 0; }
  .ct-parties td { padding: 0; border: 0; }
  .ct-parties td.num { grid-area: 1 / 2; }
  .ct-parties td.ct-status,
  .ct-parties td.cell-actions { grid-column: 1 / -1; }
  .ct-parties td.cell-actions { text-align: left; }
  .ct-parties td.cell-actions .btn { margin: 0 6px 0 0; }
  .ct-parties td.cell-none { display: none; }
}