/* Poll Worker Spotlight. The same look as the other free suite tools (navy bar, red and white
   stripe), kept in this folder so the tool can move to its own repo on its own. System fonts only:
   nothing to download, so the page works the moment it opens. */
:root {
  --navy: #1b2a4a; --red: #b22234; --ink: #1d2433; --muted: #59627a; --line: #d5dae3; --bg: #f3f5f9; --card: #fff;
  --warnbg: #fff7e0; --warnline: #c99a1a; --okbg: #e8f4ea; --okline: #2e7d32;
  --longbg: #fff1b8; --jbg: #fde2e4; --jline: #b22234; --pline: #2f5fb8; --flash: #ffd24d; --link: #1b2a4a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8ecf3; --muted: #a9b2c2; --line: #3a4458; --bg: #141a26; --card: #1e2636;
    --warnbg: #3a3218; --okbg: #1d3322; --longbg: #4a3f12; --jbg: #4d2228; --jline: #ff8a95; --pline: #8fb3ff; --flash: #8a6d00; --link: #9fb7ea;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e8ecf3; --muted: #a9b2c2; --line: #3a4458; --bg: #141a26; --card: #1e2636;
  --warnbg: #3a3218; --okbg: #1d3322; --longbg: #4a3f12; --jbg: #4d2228; --jline: #ff8a95; --pline: #8fb3ff; --flash: #8a6d00; --link: #9fb7ea;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 16px; overflow-wrap: anywhere; }
.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; flex-wrap: wrap; min-height: 56px; gap: 4px 12px; padding-top: 6px; padding-bottom: 6px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.brand svg { width: 24px; height: 24px; flex: none; }
.tool { font-weight: 700; opacity: .9; }
/* Right side of the header (Fred, 3:44 PM ET 11-05): the app's own buttons, then the account badge,
   then the 9 dots. Signed in, suite-look.js moves the tool's name to the title and hides .tool. */
.who { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.stripe { height: 8px; background: repeating-linear-gradient(90deg, var(--red) 0 40px, #fff 40px 52px); }
h1 { font-size: 28px; line-height: 1.2; margin: 18px 0 6px; }
h2 { font-size: 20px; margin: 0 0 10px; }
h3 { font-size: 16px; margin: 0 0 8px; }
.lede { margin: 0 0 12px; 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; }
.private { margin: 0 0 16px; padding: 10px 12px; background: var(--okbg); border-left: 4px solid var(--okline); border-radius: 4px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px 16px; margin: 0 0 16px; min-width: 0; }
label { display: block; font-weight: 700; font-size: 14px; margin: 0 0 4px; }
label.inline { display: inline; margin: 0; font-size: 16px; font-weight: 400; }
textarea, input { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); min-height: 44px; }
textarea { resize: vertical; min-height: 200px; line-height: 1.5; }
.hint { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
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: 4px 0; min-height: 32px; color: var(--link); text-decoration: underline; font-weight: 400; }
button.use { padding: 6px 12px; min-height: 40px; font-size: 15px; }
button:disabled { opacity: .5; cursor: default; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button:not(.secondary):not(.link) { background: #3b5b9a; border-color: #3b5b9a; } }
:root[data-theme="dark"] button:not(.secondary):not(.link) { background: #3b5b9a; border-color: #3b5b9a; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #4d7bd6; outline-offset: 2px; }
.status { min-height: 1.5em; margin: 8px 0 0; font-size: 15px; }
.keep { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.keep .hint { margin-top: 0; }
.tips ul { margin: 0; padding-left: 1.2em; }
.tips li { margin: 4px 0; }
.foot { margin-top: 32px; padding: 18px 0 28px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.foot a { color: inherit; }
a { color: var(--link); }

/* This tool's own parts. */
.opt { font-weight: 400; color: var(--muted); }
input + label, textarea + label, .hint + label, .buttons + label { margin-top: 12px; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 16px; margin: 14px 0 0; }
label.check input { width: 24px; height: 24px; min-height: 24px; flex: none; margin: 1px 0 0; padding: 0; }
.q { margin: 14px 0 0; }
.q .hint { margin: 0 0 4px; }
textarea.short { min-height: 80px; }
.transcript { margin: 0 0 8px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 6px; }
.transcript summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.transcript[open] summary { margin-bottom: 8px; }
.photo { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.photoRow { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.photoRow > div { flex: 1 1 260px; min-width: 0; }
#photoImg { width: 140px; height: 140px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.note { margin: 10px 0 0; padding: 8px 12px; background: var(--warnbg); border-left: 4px solid var(--warnline); border-radius: 4px; }
.status.bad { color: var(--red); font-weight: 700; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .status.bad { color: #ff8a95; } }
:root[data-theme="dark"] .status.bad { color: #ff8a95; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; border-bottom: 2px solid var(--line); }
.tab { border: 2px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; margin-bottom: -2px; font-weight: 700; }
.tab[aria-selected="true"] { border-color: var(--line); background: var(--card); border-bottom: 2px solid var(--card); }
.tab[aria-selected="false"] { color: var(--muted); }
.pvh { margin-top: 18px; }
.preview { border: 1px solid var(--line); border-radius: 6px; padding: 20px 24px; background: #fff; color: #1d2433; max-height: 640px; overflow: auto; }
.warnline { color: var(--ink); background: var(--warnbg); border-left: 4px solid var(--warnline); padding: 6px 10px; border-radius: 4px; }

/* The feature itself: the same rules on screen (the preview) and on paper (#print). */
.feature { font-family: Georgia, 'Times New Roman', serif; font-size: 17px; line-height: 1.55; color: #1d2433; }
.feature .kicker { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b22234; margin: 0 0 4px; }
.feature h1 { font-size: 30px; line-height: 1.15; margin: 0 0 8px; }
.feature .by { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 14px; color: #59627a; margin: 0 0 14px; }
.feature figure { float: right; width: 38%; margin: 4px 0 12px 18px; }
.feature figure img { width: 100%; border-radius: 4px; display: block; }
.feature figcaption { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; color: #59627a; margin-top: 4px; }
.feature p { margin: 0 0 12px; }
.feature blockquote { margin: 14px 0; padding: 4px 0 4px 16px; border-left: 4px solid #b22234; font-size: 22px; line-height: 1.35; font-style: italic; }
.feature .qq { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; margin: 16px 0 4px; }
.feature .empty { color: #59627a; font-style: italic; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.feature::after { content: ""; display: block; clear: both; }
.sheet h1 { font-size: 24px; }
.sheet .line { border-bottom: 1px solid #999; height: 30px; }
.sheet .qq { margin-top: 18px; }

#print { display: none; }
@media (max-width: 560px) { .feature figure { float: none; width: 100%; margin: 0 0 12px; } .preview { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print {
  @page { margin: 0.75in; }
  body { background: #fff; }
  body > *:not(#print) { display: none !important; }
  #print { display: block !important; }
  .feature { font-size: 12pt; }
  .feature h1 { font-size: 24pt; }
  .feature blockquote { font-size: 16pt; break-inside: avoid; }
  .feature figure { break-inside: avoid; }
}