/* G: the generated seat booth pages (232 seats, TA + the Tamil-with-English-subtitle twins) on phones, 13 Oct 2026 -- owner's rule "one screen = one idea".
   Screen 1 = the seat's whole answer (who won, by how much, every party's share, the vacancy line) with the village search peeking in at the bottom;
   screen 2 = the village / booth search. On desktop (>= 900 px) the template already shows the result card first; there only the moved winner sentence gets a row of its own.
   Everything is gated by <main data-g> so a page without the attribute is exactly as before. */
/* the winner sentence moved into the card (all widths) */
.bw-wrap[data-g] .hx-who { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-strong); }
.bw-wrap[data-g] .hx-who strong { font-weight: 800; }
.bw-wrap[data-g] .hx-who .pp { display: inline-block; padding: 0 7px; border-radius: 999px; color: #fff; font: 800 12px/1.6 var(--sans); vertical-align: 1px; }
.bw-wrap[data-g] .hx-share { display: none; }
/* tablets up to 979 px: the card comes first (the template's flex column) */
@media (max-width: 979px) {
  .bw-wrap[data-g] > .hx { order: 0; }
  .bw-wrap[data-g] > .bw-layout { order: 1; }
}
/* phones and small tablets */
@media (max-width: 899px) {
  .bw-wrap[data-g] > .hx { margin: 2px 0 10px; padding: 10px 10px 8px; }
  .bw-wrap[data-g] > .bw-head { margin: 0 0 6px; }
  .bw-wrap[data-g] .bw-head h1 { font-size: clamp(20px, 5.6vw, 24px); line-height: 1.25; }
  /* the result card: small map, name, winner pill, then the sentence with the winner's name, votes and margin */
  .bw-wrap[data-g] .hx-top { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
  .bw-wrap[data-g] .hx-map, .bw-wrap[data-g] .hx-map svg.shape { width: 52px; height: 52px; }
  .bw-wrap[data-g] .hx-map svg.loc { display: none; }
  .bw-wrap[data-g] .hx-k { display: none; }                      /* "constituency 103 · district" is already the eyebrow line above the title */
  .bw-wrap[data-g] .hx-t { font-size: 19px; margin: 0 0 4px; }
  /* the three counts in one quiet row (the fourth tile, the margin, is the sentence above) */
  .bw-wrap[data-g] .hx-tiles { margin: 8px 0 0; gap: 5px; }
  .bw-wrap[data-g] .hx-tile { padding: 4px 3px 3px; }
  .bw-wrap[data-g] .hx-tile svg { display: none; }
  .bw-wrap[data-g] .hx-tile:last-child { display: none; }
  .bw-wrap[data-g] .hx-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .bw-wrap[data-g] .hx-b { font-size: 16px; }
  .bw-wrap[data-g] .hx-s { font-size: 12px; }
  .bw-wrap[data-g] .hx .vs { margin: 8px 0 0; padding: 7px 8px 6px; }
  .bw-wrap[data-g] .hx .vs-list { gap: 3px; }
  /* the vacancy line: one row */
  .bw-wrap[data-g] .bypoll-banner { margin: 0 0 8px; padding: 8px 10px; }
  /* the page-level share: one round icon in the card's top row (the floating stack covered the numbers) */
  html:has(.bw-wrap[data-g]) .tn-fab-stack { display: none !important; }
  .bw-wrap[data-g] .hx-top { grid-template-columns: 52px minmax(0, 1fr) 44px; }
  .bw-wrap[data-g] .hx-share { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; align-self: start; border: 1.5px solid var(--ink-strong); border-radius: 50%;
    background: #fffaf0; color: var(--ink-strong); cursor: pointer; text-decoration: none; }
  .bw-wrap[data-g] .hx-share svg { width: 20px; height: 20px; flex: none; }
  .bw-wrap[data-g] .hx-share .sr-only { position: absolute; }
}
/* short phones (360x740 and the like): trim air so the answer + the vacancy line still fit one screen, and an opened village stays one screen */
@media (max-width: 899px) and (max-height: 800px) {
  .bw-wrap[data-g] > .hx { padding: 8px 10px 6px; margin-bottom: 8px; }
  .bw-wrap[data-g] .hx-who { margin-top: 6px; }
  .bw-wrap[data-g] .hx-tiles { margin-top: 6px; }
  .bw-wrap[data-g] .hx .vs { margin-top: 6px; padding: 6px 8px 5px; }
  .bw-wrap[data-g] .hx .vs-row { min-height: 0; }
  .bw-wrap[data-g] .sb-board { padding: 6px 8px; }
  .bw-wrap[data-g] .sb-lead { margin-top: 6px; font-size: 15px; }
  .bw-wrap[data-g] .sb-third { margin-top: 0; }
  .bw-wrap[data-g] .sb-note { margin-top: 3px; }
  .bw-wrap[data-g] .sb { margin-bottom: 8px; }
  .bw-wrap[data-g] .vs2-bars { padding: 8px 10px; gap: 8px; }
  .bw-wrap[data-g] .vs2-foot { margin-top: 6px; padding: 5px 12px; }
  .bw-wrap[data-g] .v-share { margin: 8px 0; }
}
/* desktop (>= 900 px): row 1 = map + name | the four tiles, row 2 = the winner sentence, row 3 = the party bars; the page-level share stays the floating stack */
@media (min-width: 900px) {
  .bw-wrap[data-g] .hx-top { grid-row: 1; grid-column: 1; }
  .bw-wrap[data-g] .hx-tiles { grid-row: 1; grid-column: 2; }
  .bw-wrap[data-g] .hx-who { grid-row: 2; grid-column: 1 / -1; margin: 0; }
  .bw-wrap[data-g] .hx .vs { grid-row: 3; }
}