/* ballot.css · P36, Ballot: the layout of the voter's page, the trustees,
   the verifier and the board on the design system's tokens. The buttons,
   segmented controls, fields, switches, badges, banners, cards, stats and
   tables are the design system's; this file places them and draws what an
   election's pages add: the steps with their times, a receipt, the bars of
   a result and the board's hashes. Every class starts with bl-. */

.bl { flex: 1; min-height: 0; overflow: auto; background: var(--paper); }
.bl-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 32px 32px 80px; box-sizing: border-box; }
.bl-head { display: flex; flex-direction: column; gap: 6px; max-width: 780px; }
.bl-head > h1 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
.bl-head > p { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.bl-h { margin: 0 0 8px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.bl-note { margin: 0; color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); text-wrap: pretty; }
.bl-dim { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.bl-spacer { flex: 1; }
.bl-status, .bl-controls, .bl-acts { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.bl-controls { align-items: flex-end; }
.bl-control { display: flex; flex-direction: column; gap: 4px; }
.bl-label { color: var(--ink-3); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); }
.bl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bl-grid > [data-r="card"], .bl-wrap > [data-r="card"] { min-width: 0; }
.bl-wrap [data-r="card"] > [data-part="body"] { display: flex; flex-direction: column; gap: 12px; }
.bl-wrap [data-part="table"] { overflow-x: auto; }
.bl-form { display: flex; flex-direction: column; gap: 12px; }
/* hashes and keys: the design system keeps the mono face for its code blocks, so they are set in Inter with even figures */
.bl-mono { font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums slashed-zero; overflow-wrap: anywhere; }

/* the voter's page: free codes, the candidates, the steps in the browser, the receipt */
.bl-free { display: flex; gap: 4px 6px; flex-wrap: wrap; margin-top: -6px; }
.bl-free [data-r="button"] { font-variant-numeric: tabular-nums slashed-zero; }
.bl-choices { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.bl-choices > legend { padding: 0; margin-bottom: 6px; color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); }
.bl-choices [role="radiogroup"] { display: flex; flex-direction: column; gap: 8px; }
.bl-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bl-steps > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding-bottom: 8px; border-bottom: var(--px) solid var(--line-1, var(--line-2)); }
.bl-steps > li:last-child { border-bottom: 0; padding-bottom: 0; }
.bl-steps b { color: var(--ink); font-weight: var(--fw-500); }
.bl-steps .bl-ms { color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-steps .bl-dim { grid-column: 1 / -1; }
.bl-steps > li[data-state="waiting"] b { color: var(--ink-3); }
.bl-hash { display: block; padding: 10px 12px; border-radius: var(--r-value); background: var(--well); color: var(--ink); font-family: inherit; font-size: var(--fs-13); line-height: var(--lh-13); font-variant-numeric: tabular-nums slashed-zero; overflow-wrap: anywhere; }
.bl-found:empty { display: none; }
.bl-found { display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.bl-found b { color: var(--ink); font-weight: var(--fw-550); }
.bl-sees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.bl-sees h3 { margin: 0 0 6px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-550); color: var(--ink); }
.bl-sees ul { margin: 0; padding-left: 18px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; text-wrap: pretty; }

/* the trustees: three cards side by side, one at a time on a phone */
.bl-roles { display: none; }
.bl-trustees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bl-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; margin: 0; align-items: baseline; }
.bl-facts dt { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.bl-facts dd { margin: 0; min-width: 0; color: var(--ink); }
.bl-checks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bl-checks > li { display: flex; gap: 6px 8px; align-items: center; flex-wrap: wrap; color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.bl-switch { align-self: flex-start; }
.bl-dec { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bl-bars + .bl-note, .bl-facts + .bl-h, [data-out="totals"] + [data-out="result"] > .bl-h { margin-top: 12px; }
.bl-bars { margin-bottom: 10px; }
.bl-bars { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bl-bars > li { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 2.5em; gap: 10px; align-items: center; }
.bl-bars .bl-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-bars .bl-track { height: 8px; border-radius: var(--r-press); background: var(--well); overflow: hidden; }
.bl-bars .bl-fill { display: block; height: 100%; background: var(--brand, var(--accent)); border-radius: inherit; }
.bl-bars .bl-n { text-align: right; color: var(--ink); font-weight: var(--fw-550); font-variant-numeric: tabular-nums; }

/* the verifier's numbers */
.bl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.bl-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.bl-why { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); white-space: normal; overflow-wrap: anywhere; }
/* the result badge beside the check's name, shown when the result column is folded away on a phone */
.bl-check-head { display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; }
.bl-inline { display: none; }
/* the rehearsal's steps and the verifier's checks wrap inside their cells, so a table fits a phone */
.bl-wrap [data-out="rehearsal"] td:first-child, .bl-wrap [data-out="checks"] td:first-child { white-space: normal; overflow-wrap: anywhere; }

/* the board: the log beside the entry that was pressed */
.bl-board { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bl-board .bl-link { all: unset; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 2px; }
.bl-board .bl-link:focus-visible { box-shadow: var(--ring-inline); border-radius: 2px; }
.bl-board tr[aria-current] > td { background: var(--plane-selected); }
.bl-board tr[data-found] > td { background: var(--accent-tint); }
.bl-entry { position: sticky; top: 0; min-width: 0; }
.bl-json { margin: 0; max-height: 70vh; overflow: auto; padding: 12px 14px; border-radius: var(--r-contain); background: var(--well); color: var(--ink); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-12); line-height: var(--lh-12); white-space: pre-wrap; }
/* a JSON line: a long hex string breaks at the panel's edge and its continuation keeps the line's indent */
.bl-jl { display: block; overflow-wrap: anywhere; word-break: break-all; }
.bl-board td.bl-mono { white-space: nowrap; }

@media (max-width: 1023px) {
  .bl-trustees { grid-template-columns: minmax(0, 1fr); }
  .bl-roles { display: block; }
  .bl-trustees > [data-r="card"]:not([data-shown]) { display: none; }
}
@media (max-width: 899px) { .bl-grid, .bl-board { grid-template-columns: minmax(0, 1fr); } .bl-entry { position: static; } }
@media (max-width: 759px) {
  /* the verifier's table on a phone: the result beside the check's name, the time and result columns folded */
  .bl-wrap [data-out="checks"] .bl-inline { display: inline-flex; }
  .bl-wrap table:has([data-out="checks"]) tr > :nth-child(n+3) { display: none; }
  .bl-wrap { padding: 20px 16px 48px; }
  .bl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-sees { grid-template-columns: minmax(0, 1fr); }
  .bl-bars > li { grid-template-columns: minmax(0, 7em) minmax(0, 1fr) 2em; }
  /* on a phone the board keeps each entry's own hash; the hash it points to is the row above */
  .bl-board tr > :nth-child(4) { display: none; }
}
.bl-check { display: block; color: var(--ink); font-weight: var(--fw-500); white-space: normal; }