/* First Ballot comic builder. The suite's look (masthead, stripe, cards) from the other tools, kept
   in this folder so the tool moves to its own repo on its own; the comic's Comic Neue for headings. */
@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; }
@font-face { font-family: 'Comic Neue'; src: url('/fonts/ComicNeue-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; --soft: #f6f8fb;
  --warnbg: #fff7e0; --warnline: #c99a1a; --warn: #7a5200;
  --drawn: #1f6f4a; --drawnbg: #e3f3ea; --words: #1d4f91; --wordsbg: #e5eefb; --pref: #5b3fa0; --prefbg: #efe9fb;
  --chg: #9a3412; --chgbg: #fde9dc; --ok: #1f6f4a; --okbg: #e3f3ea; --need: #a1172a; --needbg: #fde4e6; --link: #1d4f91;
  --display: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8ecf3; --muted: #a9b2c2; --line: #3a4458; --bg: #141a26; --card: #1e2636; --soft: #232c3e;
    --warnbg: #3a3218; --warn: #ffd27a; --drawn: #7fd6a8; --drawnbg: #183327; --words: #9cc0f5; --wordsbg: #1a2a44;
    --pref: #c7b5f5; --prefbg: #2a2140; --chg: #ffb08a; --chgbg: #3d2216; --ok: #7fd6a8; --okbg: #183327; --need: #ff9aa5; --needbg: #3d1a20; --link: #9fb7ea;
    color-scheme: dark;
  }
}
* { 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; }
a { color: var(--link); }
.wrap { max-width: 1240px; 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; text-align: right; }
.mast .wrap { flex-wrap: wrap; }
.acctbar { font-size: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acctbar a, .acctbar button.link { color: #fff; }
.gate, .carry { margin: 14px 0; max-width: 75ch; }
.carry { border-left: 4px solid var(--warnline); }
.gate .offices { display: grid; gap: 8px; }
.stripe { height: 8px; background: repeating-linear-gradient(90deg, var(--red) 0 40px, #fff 40px 52px); }
h1 { font-family: var(--display); font-size: clamp(28px, 4.5vw, 40px); line-height: 1.1; margin: 18px 0 8px; color: var(--navy); }
h1 span { color: var(--red); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) h1 { color: #e8ecf3; } :root:not([data-theme="light"]) h1 span { color: #ff8a8a; } }
.lede { margin: 0 0 10px; max-width: 75ch; }
.beta { margin: 16px 0 0; padding: 8px 12px; background: var(--warnbg); border-left: 4px solid var(--warnline); border-radius: 4px; font-size: 14px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); margin: 0 0 16px; }
.loading { color: var(--muted); }
.warn { font-size: 14px; background: var(--warnbg); border-left: 4px solid var(--warnline); padding: 6px 10px; margin: 10px 0 0; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
@media (max-width: 920px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.formcol { display: grid; gap: 18px; min-width: 0; }
form { display: grid; gap: 18px; }

fieldset.sec { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 0; margin: 0; min-width: 0; }
fieldset.sec > legend { display: contents; }
.sechead { display: flex; gap: 12px; align-items: baseline; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--soft); border-radius: 10px 10px 0 0; }
.sechead .letter { font-family: var(--display); font-size: 26px; color: var(--red); line-height: 1; }
.sechead h2 { margin: 0; font-size: 19px; color: var(--ink); }
.sechead p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.q { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 4px 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.q.state { background: var(--prefbg); }
.qid { font-size: 13px; font-weight: 700; color: var(--muted); padding-top: 3px; }
.qbody { display: grid; gap: 7px; min-width: 0; }
.qlabel { font-weight: 700; }
.help, .hint { font-size: 14px; color: var(--muted); margin: 0; }
.drives { font-size: 13px; color: var(--muted); margin: 0; }
select, input[type=text], input[type=date], input[type=time], input[type=number], textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; min-height: 44px; max-width: 100%;
}
select, input[type=text] { width: min(100%, 32em); }
input[type=number] { width: 6em; }
textarea { width: 100%; min-height: 5em; resize: vertical; }
:focus-visible { outline: 3px solid #2f6fd6; outline-offset: 2px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; border: 0; padding: 0; margin: 0; }
.checks label, .toggle, .tick { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; min-height: 32px; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--navy); flex: none; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.chip.drawn { background: var(--drawnbg); color: var(--drawn); }
.chip.words { background: var(--wordsbg); color: var(--words); }
.chip.pref { background: var(--prefbg); color: var(--pref); }
.chip.chg { background: var(--chgbg); color: var(--chg); }
.chip.need { background: var(--needbg); color: var(--need); }
.badge { font-size: 13px; display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.auto { border-radius: 6px; padding: 8px 10px; font-size: 15px; margin: 0; }
.auto.ok { background: var(--okbg); color: var(--ok); }
.auto.warn { background: var(--warnbg); color: var(--warn); }
.auto.none { background: var(--soft); color: var(--muted); }

.other { padding: 14px 18px; background: var(--soft); border-top: 1px dashed var(--line); border-radius: 0 0 10px 10px; display: grid; gap: 8px; }
.other label { font-weight: 700; }
.proposals { display: grid; gap: 8px; }
.prop { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; font-size: 15px; }
.prop .kind { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prop.done { opacity: .75; }
.prop .what { background: var(--wordsbg); border-radius: 6px; padding: 8px 10px; }

button { font: inherit; font-weight: 700; border-radius: 6px; padding: 8px 16px; min-height: 44px; cursor: pointer; border: 1px solid var(--navy); background: var(--navy); color: #fff; }
button.secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
button.link { background: none; border: 0; color: var(--link); text-decoration: underline; padding: 4px 2px; min-height: 0; font-weight: 400; }
button:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button:not(.secondary):not(.link) { background: #9fb7ea; border-color: #9fb7ea; color: #141a26; } }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.status { font-size: 14px; margin: 6px 0 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; display: grid; gap: 10px; }
.card h2 { margin: 0; font-size: 19px; }
.checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }

aside.story { position: sticky; top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 0; }
@media (max-width: 920px) { aside.story { position: static; } }
.story h2 { margin: 0; padding: 12px 16px; font-family: var(--display); font-size: 21px; color: #fff; background: var(--navy); }
.story .sub { padding: 8px 16px 0; font-size: 14px; color: var(--muted); margin: 0; }
.pages { list-style: none; margin: 0; padding: 8px 10px 12px; display: grid; gap: 4px; max-height: calc(100vh - 260px); overflow: auto; }
@media (max-width: 920px) { .pages { max-height: none; } }
.pages li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px; border-radius: 6px; }
.pages li.variant { background: var(--soft); }
.thumb { padding: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--card); min-height: 0; width: 56px; height: 87px; overflow: hidden; display: block; }
.thumb img { width: 56px; height: 87px; display: block; object-fit: cover; }
.thumb.cover { display: grid; place-items: center; font-family: var(--display); font-size: 11px; color: var(--muted); text-align: center; cursor: default; }
.ptitle { font-weight: 700; font-size: 15px; }
.ptitle .pnum { font-family: var(--display); color: var(--red); margin-right: 4px; }
.pnote { font-size: 13px; color: var(--muted); }
.added { padding: 8px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.added h3 { margin: 0 0 4px; font-size: 15px; }
.added ul { margin: 0; padding-left: 1.2em; }
.checksum { padding: 10px 16px 14px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 14px; }
.check { border-radius: 6px; padding: 6px 10px; }
.check.ok { background: var(--okbg); color: var(--ok); }
.check.warn { background: var(--warnbg); color: var(--warn); }
.check.need { background: var(--needbg); color: var(--need); }

dialog { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px 16px; max-width: min(800px, calc(100vw - 32px)); background: var(--card); color: var(--ink); }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog img { width: 100%; height: auto; border: 1px solid var(--line); }
.pk-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pk-head h2 { margin: 0; font-size: 19px; }

.foot { margin-top: 28px; padding: 18px 0 28px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot p { max-width: 90ch; }
@media (max-width: 520px) { .q { grid-template-columns: minmax(0, 1fr); } .qid { padding-top: 0; } .mast .tool { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.sechead p.aheadnote { margin-top: 6px; color: var(--ink); font-size: 14px; }
.sechead p.aheadnote::before { content: "✎ "; color: var(--red); }
.comicout { margin-top: 28px; margin-bottom: 28px; }
.comicout h2 { font-size: 24px; }
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 12px 0 18px; }
.downloads .dl { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 8px; align-content: start; }
.comicpages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.comicpages li { display: grid; gap: 4px; }
.pagebtn { padding: 0; border: 1px solid var(--line); background: #fff; border-radius: 4px; cursor: zoom-in; line-height: 0; }
.pagebtn canvas { width: 100%; height: auto; display: block; border-radius: 4px; }
.pcap { font-size: 14px; color: var(--muted); }
/* The page and Back/Next come first and fit one screen, phone included (Fred 2026-10-19 19:56). */
dialog#pageViewer { width: min(760px, 100vw - 16px); max-width: none; max-height: calc(100dvh - 16px); padding: 8px 8px 4px; border: 0; border-radius: 10px; background: var(--card); color: var(--ink); overflow: hidden; }
#pageViewerBody { touch-action: pan-y; display: flex; justify-content: center; }
#pageViewerBody img { display: block; max-width: 100%; max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); width: auto; height: auto; }
.pvnav { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0 0; }
.pvnav h2 { margin: 0; font-size: 15px; text-align: center; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvnav button { min-height: 44px; }
.pvfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0; font-size: 14px; }
.dl.host { grid-column: 1 / -1; }
dialog#howDlg { width: min(680px, 100vw - 24px); }
.howbody h3 { font-size: 16px; margin: 14px 0 4px; }
.howbody ol, .howbody ul { padding-left: 22px; margin: 4px 0; }
.howbody li { margin-bottom: 6px; }
.howbody code { overflow-wrap: anywhere; }
.howbody .note { background: var(--warnbg); border-left: 4px solid var(--warnline); padding: 6px 10px; margin-top: 10px; font-size: 14px; }
.comicout > p.hint:last-child { margin-top: 14px; }
a.btn { display: inline-flex; align-items: center; font-weight: 700; border-radius: 6px; padding: 8px 16px; min-height: 44px; background: var(--navy); color: #fff; text-decoration: none; border: 1px solid var(--navy); }
#viewerImg { display: block; margin: 8px auto 0; max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); width: auto; height: auto; }
/* The story map (story-map.html). */
.castlist li { margin-bottom: 4px; }
.slots { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.slot { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.slot h3 { margin: 0 0 10px; font-size: 19px; }
.versions { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.version { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
.version img { width: 120px; height: auto; display: block; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.version h4 { margin: 0 0 4px; font-size: 16px; }
.version p { margin: 4px 0; }
.version summary { cursor: pointer; color: var(--ink); font-size: 14px; margin-top: 4px; }
.statelist { font-size: 14px; color: var(--muted); }
.maprow { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 8px 0; }
.maprow label { display: grid; gap: 4px; }
.maprow label.tick { display: flex; align-items: center; gap: 6px; }
.mapcomic { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.mapcomic li { display: grid; gap: 4px; }
.mapthumb { width: 100%; height: auto; display: block; border-radius: 4px; }
dialog#mapView { width: min(760px, 100vw - 16px); max-width: none; max-height: calc(100dvh - 16px); padding: 8px 8px 4px; border: 0; border-radius: 10px; background: var(--card); color: var(--ink); overflow: hidden; }
#mapViewBody { touch-action: pan-y; display: flex; justify-content: center; }
#mapViewBody img { display: block; max-width: 100%; max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); width: auto; height: auto; }
@media (max-width: 420px) { .version { grid-template-columns: 90px 1fr; } .version img { width: 90px; } }
.slot h3 .chip { margin-left: 8px; vertical-align: middle; }

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