/* =============================================================================
   ballot.css — the roll-call desk's own sheet (labs 557)

   Tokens only. Every colour here is a var() that assets/css/site.css defines
   and assets/css/dark.css redefines, so this one file serves both editions.
   A literal colour in this file is a bug in the dark edition that the paper
   edition cannot show you.

   Class names are all prefixed bal-. Nothing here says Yea or Nay, a party or
   a result in a hue: a vote word, a party label and a result are TEXT, and the
   one drawing (the bar over a roll) tells its segments apart by pattern and by
   the labelled key under it. The four status hues (--free, --unsure, --taken)
   are the house's for "live / not live / no answer" and each line says the
   same thing in words.

   Phones first: one column under 620px, every control at least 44px tall,
   tables scroll inside their own box and the page never scrolls sideways.
   ========================================================================== */

/* ------------------------------------------------------------- the filters */
.bal-filters,
.bal-find,
.bal-billform { display: flex; flex-wrap: wrap; gap: .9rem 1rem; align-items: flex-end; margin: 0; }
.bal-f { flex: 1 1 9.5rem; min-width: 0; }
.bal-f--wide { flex: 2 1 15rem; }
.bal-f--year { flex: 2 1 19rem; }
.bal-f--ch { flex: 0 1 auto; }
.bal-f .field { display: block; width: 100%; min-height: 2.75rem; }
.bal-f select.field { padding-right: 2rem; }
.bal-f .lbl { margin-bottom: .45rem; }
.bal-filters .seg__b { min-height: 2.75rem; padding-left: 1rem; padding-right: 1rem; }
.bal-btn { min-height: 2.75rem; }
/* switched off but still able to hold the focus (Next, once the source has no file for the next number) */
.bal-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.bal-filters .seg__b:focus-visible,
.bal-btn:focus-visible,
.bal-link:focus-visible,
.bal-row:focus-visible,
.bal-chip:focus-visible,
.bal-focus:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------ the status lines
   One box, one sentence, never empty. The state is the first word (live / not
   live / reading / no answer); the rule down the side repeats it. */
.bal-wires { display: grid; gap: .5rem; }
.bal-wire {
    margin: 0;
    font-size: .86rem; line-height: 1.55;
    color: var(--ink-77);
    padding: .7rem .9rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-55);
    border-radius: 9px;
    background: var(--paper);
    overflow-wrap: anywhere;
}
.bal-wire b { color: var(--ink); }
/* a link inside the sentence is a finger's height too: the padding makes the target, the margin gives the line back */
.bal-wire a, .bal-mail { display: inline-block; padding: .8rem .1rem; margin: -.8rem 0; }
.bal-wire a { color: var(--ink); }
.bal-wire[data-state="ok"]    { border-left-color: var(--free); }
.bal-wire[data-state="stale"] { border-left-color: var(--unsure); }
.bal-wire[data-state="none"]  { border-left-color: var(--unsure); }
.bal-wire[data-state="err"]   { border-left-color: var(--taken); }
.bal-wire:focus { outline: none; }
.bal-wire:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bal-link {
    font: inherit; font-weight: 600; color: var(--ink);
    background: none; border: 0; cursor: pointer;
    text-decoration: underline; text-underline-offset: .18em;
    display: inline-block; padding: .7rem .45rem; margin: -.7rem 0;
}
/* the source's page and "Ask again" at the end of a list's line: one box, wrapping as a whole, each a finger tall */
.bal-wire__acts { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; margin: -.8rem 0; }
.bal-wire__acts > a, .bal-wire__acts > .bal-link { margin: 0; padding-top: .8rem; padding-bottom: .8rem; }
.bal-count { margin: 0; font-size: .84rem; color: var(--ink-77); line-height: 1.5; }
.bal-note { margin: 0; font-size: .84rem; color: var(--ink-77); }

/* ---------------------------------------------------------------- the list */
.bal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bal-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .28rem 1.2rem;
    padding: .85rem 1rem; min-height: 2.75rem;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--paper); color: var(--ink); text-decoration: none;
    transition: border-color .2s var(--ease);
}
.bal-row:hover { border-color: var(--ink); }
.bal-row.is-on { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--ink); }
.bal-row__k {
    grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem;
    font-size: .76rem; color: var(--ink-55); font-variant-numeric: tabular-nums;
}
.bal-tag {
    font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink); border: 1px solid var(--ink-55); border-radius: 999px; padding: .12rem .5rem;
}
.bal-row__when { white-space: nowrap; }
.bal-row__q { grid-column: 1; font-size: .98rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.bal-row__about {
    grid-column: 1; font-size: .86rem; line-height: 1.45; color: var(--ink-77); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bal-row__about b { color: var(--ink); font-weight: 600; }
.bal-row__r {
    grid-column: 2; grid-row: 1 / span 3; align-self: center; text-align: right;
    display: grid; gap: .12rem; font-size: .84rem; color: var(--ink-77);
    font-variant-numeric: tabular-nums; max-width: 14rem;
}
.bal-row__r b { font-size: .95rem; color: var(--ink); overflow-wrap: anywhere; }
.bal-row__open { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55); }
.bal-acts { display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; }
.bal-acts a:not(.btn) { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 .3rem; color: var(--ink); font-size: .86rem; }
@media (max-width: 620px) {
    .bal-row { grid-template-columns: minmax(0, 1fr); padding: .8rem .85rem; }
    .bal-row__r { grid-column: 1; grid-row: auto; text-align: left; display: flex; flex-wrap: wrap; gap: .1rem .7rem; align-items: baseline; max-width: none; }
    .bal-f, .bal-f--wide { flex: 1 1 100%; }
    .bal-f--half { flex: 1 1 calc(50% - .5rem); }
    .bal-acts .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- the roll */
.bal-k {
    margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-55); font-variant-numeric: tabular-nums; line-height: 1.6;
}
.bal-title { margin: 0; overflow-wrap: anywhere; }
.bal-title:focus { outline: none; }
.bal-about { margin: 0; color: var(--ink-77); line-height: 1.5; overflow-wrap: anywhere; }
.bal-plain { margin: 0; font-size: 1.02rem; font-weight: 500; line-height: 1.5; color: var(--ink); }
.bal-gloss {
    margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-77);
    border-left: 3px solid var(--line); padding-left: .8rem;
}
.bal-bar { display: flex; height: 1.15rem; border: 1px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--paper); }
.bal-bar__s { display: block; min-width: 0; border-left: 1px solid var(--paper); }
.bal-bar__s:first-child { border-left: 0; }
.bal-bar__s--0 { background: var(--ink); }
.bal-bar__s--1 { background: repeating-linear-gradient(45deg, var(--ink) 0 2px, var(--paper) 2px 6px); }
.bal-bar__s--2 { background: radial-gradient(var(--ink) 1.2px, var(--paper) 1.6px) 0 0 / 5px 5px; }
.bal-bar__s--3 { background: repeating-linear-gradient(90deg, var(--ink-55) 0 1px, var(--paper) 1px 5px); }
.bal-bar__s--4 { background: var(--paper); }
.bal-bar-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .86rem; color: var(--ink-77); }
.bal-bar-key li { display: flex; align-items: center; gap: .4rem; }
.bal-bar-key b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bal-bar-key .bal-bar__s { width: .85rem; height: .85rem; border: 1px solid var(--ink); border-radius: 2px; flex: 0 0 auto; }

.bal-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.bal-tablewrap--tall { max-height: 30rem; overflow-y: auto; }
.bal-t { width: 100%; border-collapse: collapse; font-size: .9rem; color: var(--ink); }
.bal-t caption { caption-side: top; text-align: left; padding: .7rem .8rem .5rem; font-size: .78rem; color: var(--ink-55); line-height: 1.45; }
.bal-t th, .bal-t td { padding: .5rem .8rem; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: top; font-weight: 400; }
.bal-t thead th {
    font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55);
    position: sticky; top: 0; background: var(--paper); border-top: 0; border-bottom: 1px solid var(--line);
}
.bal-t tbody th { font-weight: 600; }
.bal-t .bal-num { text-align: right; font-variant-numeric: tabular-nums; }
.bal-t .bal-total th, .bal-t .bal-total td { border-top: 2px solid var(--ink); font-weight: 700; }
.bal-t .bal-vote { font-weight: 600; }
@media (max-width: 420px) {
    .bal-t th, .bal-t td { padding: .5rem .4rem; }
    .bal-t { font-size: .86rem; }
    .bal-t thead th { letter-spacing: .04em; font-size: .6rem; }
    .bal-t th:first-child, .bal-t td:first-child { padding-left: .7rem; }
}

/* --------------------------------------------------------------- the bills */
.bal-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1.1rem; margin: 0; font-size: .9rem; }
.bal-facts dt { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); padding-top: .22rem; }
.bal-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.bal-latest {
    margin: 0; padding: .8rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--ink);
    border-radius: 9px; background: var(--paper); display: grid; gap: .2rem;
}
.bal-latest b { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); }
.bal-latest > span { font-size: 1rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.bal-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; }
.bal-step {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .5rem; align-content: start;
    padding: .6rem .7rem; border: 1px dashed var(--ink-55); border-radius: 9px;
    font-size: .82rem; line-height: 1.4; color: var(--ink-55);
}
.bal-step b { font-weight: 600; }
.bal-step > span:last-child { grid-column: 2; font-variant-numeric: tabular-nums; }
.bal-step__m { font-weight: 700; }
.bal-step.is-done { border: 1px solid var(--ink); color: var(--ink); background: var(--paper); }
.bal-h4 { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); }
.bal-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.bal-actions li { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: .1rem 1rem; padding: .55rem 0; border-top: 1px solid var(--line-soft); font-size: .88rem; line-height: 1.5; }
.bal-actions li:first-child { border-top: 0; }
.bal-actions b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.bal-actions span { color: var(--ink); overflow-wrap: anywhere; }
.bal-actions i { grid-column: 2; font-style: normal; font-size: .76rem; color: var(--ink-55); }
.bal-votes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bal-votes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; align-items: center; font-size: .86rem; color: var(--ink-77); }
@media (max-width: 620px) {
    .bal-actions li, .bal-votes li { grid-template-columns: minmax(0, 1fr); }
    .bal-actions i { grid-column: 1; }
}

.bal-chip {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: .3rem .85rem;
    border: 1px solid var(--ink-55); border-radius: 999px; background: var(--paper);
    font-size: .84rem; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.bal-chip:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
/* a recorded vote that cannot be opened here is not a link, and does not look like one */
.bal-chip--off, .bal-chip--off:hover { border: 1px dashed var(--ink-55); background: var(--paper); color: var(--ink-77); }
.bal-chips { list-style: none; margin: 0; padding: .15rem; display: flex; flex-wrap: wrap; gap: .4rem; max-height: 25.5rem; overflow-y: auto; }
.bal-bills { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.bal-bills li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .8rem; align-items: center; }
.bal-bills li > a:not(.bal-chip), .bal-bills li > b { color: var(--ink); font-weight: 600; }
.bal-bills li > a:not(.bal-chip) { display: inline-flex; align-items: center; min-height: 2.75rem; }
.bal-bill__t { font-size: .92rem; font-weight: 600; color: var(--ink); line-height: 1.4; overflow-wrap: anywhere; }
.bal-bill__la { grid-column: 2; font-size: .84rem; color: var(--ink-77); line-height: 1.5; overflow-wrap: anywhere; }
.bal-move { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.bal-panel { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 1rem 1.1rem 1.1rem; display: grid; gap: .7rem; align-content: start; }
.bal-panel h3 { margin: 0; }
.bal-panel .bal-wire { border: 0; border-left: 3px solid var(--ink-55); border-radius: 0; padding: .1rem 0 .1rem .8rem; background: none; }
.bal-panel .bal-wire[data-state="ok"]    { border-left-color: var(--free); }
.bal-panel .bal-wire[data-state="stale"] { border-left-color: var(--unsure); }
.bal-panel .bal-wire[data-state="err"]   { border-left-color: var(--taken); }
@media (max-width: 820px) { .bal-move { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .bal-bills li { grid-template-columns: minmax(0, 1fr); } .bal-bill__la { grid-column: 1; } }

/* -------------------------------------------------------------- the method */
.bal-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 3rem; margin-top: 1.6rem; }
.bal-cols p, .bal-cols li { font-size: .95rem; line-height: 1.65; color: var(--ink-77); }
.bal-cols p { margin: 0 0 .9rem; }
.bal-cols a { color: var(--ink); }
.bal-cols code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; overflow-wrap: anywhere; }
.bal-h3 { margin: 1.4rem 0 .5rem; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.bal-h3:first-child { margin-top: 0; }
.bal-ul { margin: 0 0 .9rem; padding-left: 1.1rem; }
.bal-ul li { margin: 0 0 .45rem; }
@media (max-width: 820px) { .bal-cols { grid-template-columns: minmax(0, 1fr); } }

.bal-stack { display: grid; gap: 1rem; }
/* [hidden] must win over the display each of these classes sets (a .btn is inline-flex, a list is a grid) */
.bal-stack[hidden], .bal-t[hidden], .bal-list[hidden], .bal-chips[hidden], .bal-bills[hidden], .bal-votes[hidden],
.bal-btn[hidden], .bal-acts > [hidden], .bal-wire[hidden], .bal-count[hidden], .bal-note[hidden], .bal-gloss[hidden],
.bal-about[hidden], .bal-h4[hidden] { display: none; }