/* QR Code Maker. The same look as 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: 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; }
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: 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 code, at its real size (the image carries its width in inches). */
#printArea { display: none; }
@media print {
  body > *:not(#printArea) { display: none !important; }
  body { background: #fff; }
  #printArea { display: block; }
  #printArea img { display: block; break-after: page; page-break-after: always; }
  #printArea img:last-child { break-after: auto; page-break-after: auto; }
}

/* Pickers (2026-10-18): 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; }

/* QR Code Maker (task 27). */
.pick-btn canvas { width: 56px; height: 56px; }
.pk-grid canvas { width: 100%; height: auto; aspect-ratio: 1; }
#canvas { image-rendering: pixelated; }
#printArea img { margin: 0.5in auto; }

/* The thank-you to the Center for Civic Design near the top of the page (task 40, Fred 2026-10-19:
   "it definitely has to have a very prominent thank you"). A card, not footer print. Text only until
   CCD agrees to their logo; .thanks-logo is the slot for it (see the comment in index.html). The red
   edge reads on both the light and dark background, where navy would vanish in dark mode. */
.thanks { display: flex; gap: 16px; align-items: center; margin: 0 0 18px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--red); border-radius: 8px; }
.thanks h2 { font-size: 20px; margin: 0 0 4px; }
.thanks p { margin: 0; }
.thanks-logo { flex: none; max-height: 56px; width: auto; }
/* Task 70: the offer to copy codes saved in this browser into the signed-in office. A card like the
   saved-code 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; }