/* Polling Place Walkthrough. The suite's look, as Floor Plan Designer's style sheet (whose first part this
   is), 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; }
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; }
.who { display: flex; align-items: center; gap: 14px; font-size: 15px; flex-wrap: wrap; justify-content: flex-end; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; min-height: 44px; margin: 0; }
label.check input { width: 20px; height: 20px; min-height: 0; flex: none; }
.buttons.small button { padding: 8px 12px; min-height: 40px; }
a { color: inherit; }
.muted { color: var(--muted); }

/* The walkthrough. */
main > .showing { margin: 0 0 8px; }
.source h2 { font-size: 18px; margin: 4px 0; }
.source { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 12px; margin: 0 0 14px; }
.showing { margin: 0; font-size: 16px; }
.source .row { display: flex; flex-wrap: wrap; gap: 12px; }
.source .row > div { min-width: 220px; flex: 1; max-width: 420px; }
.tabs { display: flex; gap: 6px; margin: 0 0 -1px; flex-wrap: wrap; }
.tabs button { background: transparent; color: var(--ink); border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; }
.tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: inset 0 3px 0 var(--navy); }
.layout { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 18px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 0 8px 8px 8px; padding: 14px; }
@media (max-width: 880px) { .layout { grid-template-columns: 1fr; } }
.stage { min-width: 0; }
#map { width: 100%; aspect-ratio: 4 / 3; background: #eef1f6; border: 1px solid var(--line); border-radius: 8px; display: block; touch-action: manipulation; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #map { background: #2a3346; } }
.stagebar { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; }
.side h2 { font-size: 20px; margin: 0; }
.side h3 { font-size: 16px; margin: 14px 0 4px; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--bg); }
.who-card { display: flex; gap: 12px; align-items: center; }
.pic { flex: none; width: 72px; display: flex; justify-content: center; }
.pic svg { display: block; }
.step { margin: 0; font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.says { margin: 10px 0; }
.says p { position: relative; margin: 8px 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 17px; }
.says p.narr { background: transparent; border: 0; padding: 0; font-size: 15px; color: var(--muted); font-style: italic; }
.stops { margin: 0; padding-left: 1.6em; }
.stops li { margin: 2px 0; }
.stops button { background: none; border: 0; color: var(--ink); padding: 6px 2px; min-height: 36px; font-weight: 400; text-align: left; text-decoration: underline; text-decoration-color: var(--line); }
.stops li.now button { font-weight: 700; text-decoration-color: currentColor; }
.stops li.off { color: var(--muted); }
#jobCard ul, .facts ul { margin: 0; padding-left: 1.2em; }
#jobCard li, .facts li { margin: 3px 0; }
#jobCard dl { margin: 0; }
#jobCard dt { font-weight: 700; margin-top: 6px; }
#jobCard dd { margin: 2px 0 0; }
.facts { margin-top: 14px; }
.person { transition: none; }
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; }
.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; } }
button:disabled { cursor: default; }