/* Voting Coloring Pages. The same look as QR Code Maker and Sign Maker (whose style sheet this
   started from) and the suite's own pages, kept in this folder so the tool moves to its own repo 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: 56px; gap: 12px; }
.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(280px, 380px) 1fr; gap: 24px; align-items: start; }
@media (max-width: 820px) { .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; }
legend { font-weight: 700; padding: 0 4px; }
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: 820px) { .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; } }


.loading { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.lbl { display: block; font-weight: 700; font-size: 14px; margin: 10px 0 4px; }
.scope { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 4px 0 8px; }
.scope label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; min-height: 44px; }
.scope label .hint { margin: 0; }
label > .hint { font-weight: 400; }
.scope input { width: 20px; height: 20px; min-height: 0; flex: none; }
.nav { justify-content: center; margin-top: 12px; }
.controls > .hint { margin: 0 0 14px; }

/* The page picker: every page drawn small, as in QR Code Maker's and Sign Maker's pickers. */: signs and pictures are chosen from pictures, not a list of names. */
.lbl { display: block; font-weight: 700; font-size: 14px; margin: 10px 0 4px; }
#add { width: 100%; margin: 4px 0 6px; }
.pick-btn { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--card); color: var(--ink); border: 1px solid var(--line); font-weight: 400; text-align: left; padding: 6px 10px; }
.pick-btn img, .pick-btn canvas { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 4px; object-fit: contain; }
.pick-btn span:first-of-type { flex: 1; }
.pick-btn .chg { color: var(--muted); font-size: 14px; text-decoration: underline; }
dialog#picker { width: min(920px, 100vw - 24px); max-height: min(88vh, 900px); padding: 0; border: 0; border-radius: 10px; background: var(--card); color: var(--ink); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
dialog#picker::backdrop { background: rgba(10, 16, 30, .55); }
@media (max-width: 600px) { dialog#picker { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; } }
.pk-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.pk-head h2 { margin: 0; font-size: 20px; }
.pk-tools { padding: 10px 16px 0; }
.pk-sets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.pk-sets button { background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 400; padding: 6px 12px; min-height: 36px; border-radius: 18px; }
.pk-sets button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; padding: 10px 16px 16px; }
.pk-grid button { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; color: #1d2433; border: 1px solid var(--line); font-weight: 400; padding: 8px; min-height: 0; font-size: 13px; line-height: 1.25; text-align: center; }
.pk-grid button[aria-current="true"] { border: 3px solid var(--navy); padding: 6px; }
.pk-grid img, .pk-grid canvas { width: 100%; height: auto; max-height: 150px; object-fit: contain; }
.pk-grid .none { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; color: #5a6475; border: 1px dashed #c5ccd8; }
.pk-empty { padding: 0 16px 16px; }

.pick-btn img { width: 66px; height: 85px; }
.pk-grid img { aspect-ratio: 850 / 1100; max-height: 220px; }

/* Printing (task 34): each sheet is exactly US Letter with no page margin, the art filling it and
   the footer picture laid over the blank band at the bottom. With a margin, the browser would
   shrink the page to fit inside it and the footer would no longer line up with the band. */
#printArea { display: none; }
@media print {
  @page { size: letter; margin: 0; }
  body > *:not(#printArea) { display: none !important; }
  body { background: #fff; margin: 0; }
  #printArea { display: block; }
  #printArea .sheet { position: relative; width: 8.5in; height: 11in; overflow: hidden; break-after: page; page-break-after: always; }
  #printArea .sheet:last-child { break-after: auto; page-break-after: auto; }
  #printArea .art { display: block; width: 8.5in; height: 11in; }
  #printArea .band { position: absolute; left: 0; bottom: 0; width: 8.5in; height: 1.2in; }
}

/* 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; } }