/* Tally Sheet Maker. QR Code Maker's style sheet (itself Sign Maker's), so the free tools look alike,
   with the tally sheet's own parts at the end. Kept in this folder so the tool can move on its own. */
/* A Latin-only cut of Noto Sans (English, Spanish and other Latin-alphabet languages): 45 KB each
   instead of 630 KB for the whole font (2026-10-18). */
@font-face { font-family: 'Noto Sans'; src: url('/fonts/NotoSans-400Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Noto Sans'; src: url('/fonts/NotoSans-700Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root { --navy: #1b2a4a; --red: #b22234; --ink: #1d2433; --muted: #5a6475; --line: #d5dae3; --bg: #f3f5f9; --card: #fff; --warnbg: #fff7e0; --warnline: #c99a1a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #e8ecf3; --muted: #a9b2c2; --line: #3a4458; --bg: #141a26; --card: #1e2636; --warnbg: #3a3218; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: 'Noto Sans', system-ui, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.45; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.mast { background: var(--navy); color: #fff; }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 12px; } /* task 122: 72px, Fred's 11-05 header rule (was 56px) */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.brand svg { width: 24px; height: 24px; }
.tool { font-weight: 700; opacity: .9; }
.stripe { height: 8px; background: repeating-linear-gradient(90deg, var(--red) 0 40px, #fff 40px 52px); }
h1 { font-size: 28px; margin: 18px 0 6px; }
.lede { margin: 0 0 18px; color: var(--muted); max-width: 70ch; }
.beta { margin: 16px 0 0; padding: 8px 12px; background: var(--warnbg); border-left: 4px solid var(--warnline); border-radius: 4px; font-size: 14px; }
.layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 520px); gap: 24px; align-items: start; }
@media (max-width: 699px) { .layout { grid-template-columns: 1fr; } .preview { order: -1; } }
fieldset { border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 12px 14px 14px; margin: 0 0 14px; min-width: 0; }
/* Box headings sit inside the box, at the top, lined up with the rest of the box (Fred, 2026-11-06:
   "alignment off on desktop"). A plain <legend> is drawn across the box's top border, a few pixels in
   from the corner, so it looked out of line with the labels and fields under it. A floated legend is
   drawn inside the box like any heading; screen readers still read it as the box's name. */
legend { float: left; width: 100%; font-weight: 700; font-size: 17px; padding: 0; margin: 0 0 8px; }
fieldset > :not(legend) { clear: both; }
label { display: block; font-weight: 700; font-size: 14px; margin: 10px 0 4px; }
input, select, textarea { width: 100%; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); min-height: 44px; }
input[type=file] { padding: 8px; }
textarea { resize: vertical; }
.hint { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.warn { font-size: 14px; background: var(--warnbg); border-left: 4px solid var(--warnline); padding: 6px 10px; margin: 10px 0 0; }
.colors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick { display: flex; gap: 6px; }
.pick input[type=color] { width: 52px; padding: 2px; flex: none; }
details { margin-top: 12px; }
summary { cursor: pointer; font-weight: 700; color: var(--navy); min-height: 32px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) summary { color: #9fb7ea; } }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
button { font: inherit; font-weight: 700; border-radius: 6px; padding: 10px 16px; min-height: 44px; cursor: pointer; border: 2px solid var(--navy); background: var(--navy); color: #fff; }
button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
button.link { background: none; border: 0; padding: 6px 0; min-height: 32px; color: var(--ink); text-decoration: underline; font-weight: 400; }
button:disabled { opacity: .6; cursor: progress; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #4d7bd6; outline-offset: 2px; }
.status { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; }
.preview { position: sticky; top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; text-align: center; }
@media (max-width: 699px) { .preview { position: static; } }
canvas { max-width: 100%; height: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); background: #fff; }
.foot { margin-top: 32px; padding: 18px 0 28px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.foot a { color: inherit; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Signed-in parts (2026-10-18): who's signed in, the gate, sign groups, backup. */
.who { display: flex; align-items: center; gap: 14px; font-size: 15px; flex-wrap: wrap; justify-content: flex-end; }
.who a { color: #fff; }
button.link.light { color: #fff; }
.gate, .loading { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.gate a.btn { display: inline-block; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 6px; font-weight: 700; text-decoration: none; min-height: 44px; }
.buttons.small button { padding: 8px 12px; min-height: 40px; }
.chips { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chips li { display: flex; gap: 6px; }
.chips button.pick { flex: 1; text-align: left; background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 400; }
.chips button.pick[aria-current="true"] { border: 2px solid var(--navy); font-weight: 700; }
.chips button.rm { background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 8px 12px; }
.addrow { display: flex; gap: 6px; }
.addrow select { flex: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.last { margin: 10px 0; padding-left: 8px; border-left: 4px solid var(--line); font-size: 14px; }
.last.ok { border-color: #2e7d32; } .last.soon { border-color: var(--warnline); } .last.late { border-color: var(--red); }

/* Print or download: one sign or the whole group (2026-10-18). */
.scope { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 8px; }
.scope label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; min-height: 44px; }
.scope input { width: 20px; height: 20px; min-height: 0; }
/* Printing: only the pages, each at its real size (each drawing carries its size in millimetres). */
#printArea { display: none; }
@media print {
  body > *:not(#printArea) { display: none !important; }
  body { background: #fff; }
  #printArea { display: block; }
  #printArea .print-page { break-after: page; page-break-after: always; }
  #printArea .print-page:last-child { break-after: auto; page-break-after: auto; }
  #printArea svg { display: block; }
}


/* Task 70: the offer to copy sheets saved in this browser into the signed-in office. A card like the
   saved-sheet boxes, with the suite's navy edge so it reads as a question, not a warning. */
.offer { margin: 16px 0 14px; padding: 12px 16px 14px; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--navy); border-radius: 8px; }
.offer h2 { font-size: 18px; margin: 0 0 6px; }
.offer p { margin: 0 0 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .offer { border-left-color: #8fa6d6; } }
.who #signin { font-weight: 700; }

/* Suite page-width standard (task 75, Fred 11-05): the header runs the full screen width with
   24px sides, like Poll Worker Management and the Task Tracker; the tool itself (one form and
   its preview) stays centered but may use up to 1440px. It used to stop at 1180px (curbside
   1040px), which left the header's logo floating mid-screen on a wide monitor. */
.wrap { max-width: 1440px; padding-left: 24px; padding-right: 24px; }
.mast .wrap { max-width: none; }
@media (max-width: 640px) { .wrap { padding-left: 12px; padding-right: 12px; } }

/* Tablets (Fred, 11-05 6:56 PM ET, iPad screenshot: "Alignment issues"). Every box above the tool
   (the thank-you, the notes) now runs the same width as the tool below it; they used to stop at
   900px while the note and the tool ran full width, so their right edges did not line up. The
   note just above the tool gets the same 16px gap as the other boxes (it used to touch it). The
   tool keeps its two columns, with the preview beside the form, down to 700px wide, so an iPad held
   upright (744 to 1024px) still sees the sign change while typing; below 700px it stacks as before.
   The preview is also kept shorter than the screen so the whole sign stays in view. */
#localNote { margin-bottom: 16px; }
.preview canvas { max-height: calc(100vh - 110px); width: auto; }

/* Decision 8A (Fred, 7:05 PM ET 11-07): one header order in every suite tool. Left: the suite name (or
   the office's logo, signed in), a thin line, then the tool's name. Right: switcher.js v6 draws save
   status, ? Help, the badge or "Sign in", then the 9 dots. The tool's name used to sit at the far right
   beside the dots until someone signed in; now it's in the same spot signed in or out. */
.lead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lead .tool { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.3); font-size: 18px; font-weight: 700; opacity: 1; line-height: 1.2; }
.who { margin-left: auto; }
@media (max-width: 640px) { .lead { gap: 10px; } .lead .tool { padding-left: 10px; font-size: 15px; } .brand { font-size: 15px; } }
/* A phone: the star stands for the suite's name, so the tool's name fits on one line. */
@media (max-width: 420px) { .lead .brand:not([data-suite-look]) { font-size: 0; gap: 0; } }
/* "Your saved codes" box (uniform interface Decision 7A, 11-07): the same box, words and button order
   in every suite tool that keeps several things. Delete is the only red button (Decision 4A). */
button.secondary.danger { color: var(--red); border-color: var(--red); }
/* GAP 6 WCAG 2.1 AA check (11-08): in dark mode links kept the browser's default blue (#0000ee),
   1.6:1 on the dark card. Light blue matches the dark-mode summary color (about 7:1). :where()
   keeps this as weak as a plain "a" rule, so header and footer colors still win. */
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) a { color: #9fb7ea; } }
:where(:root[data-theme="dark"]) a { color: #9fb7ea; }
/* GAP 6 WCAG 2.1 AA check (11-08): the red Delete button kept the flag red (#b22234) in dark mode,
   2.3:1 on the dark card. The dark-mode warning pink is about 7:1. The stripe keeps its red. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.danger { color: #ff8a95; border-color: #ff8a95; } }
:root[data-theme="dark"] button.danger { color: #ff8a95; border-color: #ff8a95; }

/* Suite task 122 (3A): the page's own question box (ask.js). */
dialog.ask { max-width: min(480px, calc(100vw - 24px)); border: 0; border-radius: 10px; padding: 20px 22px; box-shadow: 0 10px 40px rgba(0,0,0,.35); background: var(--card); color: var(--ink); }
dialog.ask::backdrop { background: rgba(10,16,30,.55); }
dialog.ask h2 { margin: 0 0 6px; font-size: 1.2rem; }
dialog.ask p { margin: 0 0 14px; }
dialog.ask .ask-btns { display: flex; flex-wrap: wrap; gap: 10px; }
button.danger-fill { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- Tally Sheet Maker's own parts (11-15-2026) ---------- */
.num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 14px; margin-right: 8px; vertical-align: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .num { background: #8fa6d6; color: #141a26; } }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .two { grid-template-columns: 1fr; } }
.checks label, .radios label, label.inline { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: 15px; margin: 8px 0 0; min-height: 32px; }
.checks input, .radios input, label.inline input { width: 22px; height: 22px; min-height: 0; flex: none; margin: 0; accent-color: var(--navy); }
.checks .hint { margin: 0 0 4px 32px; }
.seg { display: inline-flex; border: 2px solid var(--navy); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; color: var(--ink); min-width: 64px; }
.seg button[aria-checked="true"] { background: var(--navy); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg { border-color: #8fa6d6; } :root:not([data-theme="light"]) .seg button[aria-checked="true"] { background: #8fa6d6; color: #141a26; } }
.saved-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; margin: 6px 0 8px; }
.saved-row { display: flex; gap: 12px; align-items: baseline; text-align: left; background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 400; padding: 8px 12px; min-height: 44px; }
.saved-row .sd { flex: none; width: 104px; color: var(--muted); font-size: 14px; }
.saved-row .sn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.saved-row[aria-current="true"] { border: 2px solid var(--navy); font-weight: 700; padding: 7px 11px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .saved-row[aria-current="true"] { border-color: #8fa6d6; } }
.race { display: grid; grid-template-columns: 1fr 132px; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin: 10px 0; }
@media (max-width: 480px) { .race { grid-template-columns: 1fr; } }
.race .rname { font-weight: 700; margin-bottom: 6px; }
.race-side label { margin-top: 0; }
.race-move { display: flex; gap: 6px; margin: 8px 0 0; }
button.icon { padding: 4px 12px; min-height: 40px; min-width: 44px; }
button.link.danger { color: var(--red); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.link.danger { color: #ff8a95; } }
.preview { text-align: left; }
.preview h2 { margin: 0 0 6px; font-size: 20px; }
.preview .two { margin-bottom: 4px; }
.count { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; font-size: 14px; color: var(--muted); }
.count b { font-size: 26px; color: var(--ink); }
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.pager button { padding: 4px 10px; min-height: 36px; font-weight: 400; font-size: 14px; }
.pager button[aria-pressed="true"] { border: 2px solid var(--navy); font-weight: 700; }
.page-view { width: 100%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); margin: 0 0 12px; max-height: calc(100vh - 300px); overflow: auto; }
.page-view svg { display: block; width: 100%; height: auto; }
button.print { background: var(--red); border-color: var(--red); }
#pasteDlg { max-width: min(640px, calc(100vw - 24px)); }
#pasteDlg textarea { margin: 0 0 8px; font-size: 15px; }
.lbl { display: block; font-weight: 700; font-size: 14px; margin: 10px 0 4px; }