/* No-Campaign Zone Map Builder. 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. */
: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; }
.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; max-width: 80ch; }
.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, select { 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; }


a.brand { color: #fff; text-decoration: none; }
.nav a { color: #fff; font-size: 15px; }
.mast .wrap { justify-content: flex-start; }
.mast .tool { margin-right: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
label.btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; border-radius: 6px; padding: 10px 16px; min-height: 44px; cursor: pointer; border: 2px solid var(--navy); background: var(--navy); color: #fff; margin: 0; }
label.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
label.btn:focus-within { outline: 3px solid #4d7bd6; outline-offset: 2px; }
button.small { padding: 4px 12px; min-height: 36px; font-size: 15px; }
select { min-height: 44px; }
textarea { min-height: 110px; }
input[type="checkbox"] { width: auto; min-height: 0; margin: 0 8px 0 0; }
label.check { display: flex; align-items: flex-start; font-weight: 400; font-size: 15px; margin: 4px 0; }
label + input, label + select, label + textarea, label + .unitrow { margin-bottom: 10px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.two input { margin-bottom: 10px; }
.unitrow { display: flex; gap: 8px; align-items: center; }
.unitrow input { max-width: 9em; }
.unitrow select { width: auto; }
.sub { margin-top: 8px; }
.center { justify-content: center; }
.warn { margin: 10px 0 0; padding: 8px 12px; background: var(--warnbg); border-left: 4px solid var(--warnline); border-radius: 4px; font-size: 15px; }
.good { margin: 10px 0 0; padding: 8px 12px; background: var(--okbg); border-left: 4px solid var(--okline); border-radius: 4px; font-size: 15px; }
.rules { margin: 0 0 16px; padding: 10px 14px; border: 2px solid var(--warnline); background: var(--warnbg); border-radius: 8px; }
.rules h2 { font-size: 17px; margin: 0 0 4px; }
.rules ul { margin: 0; padding-left: 1.2em; }
.rules li { margin: 3px 0; }
.layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.mapcard { position: sticky; top: 8px; }
.drop { position: relative; height: min(72vh, 760px); min-height: 320px; border: 2px dashed var(--line); border-radius: 6px; background: #20242c; overflow: hidden; touch-action: none; }
.drop.over { border-color: #4d7bd6; }
.drop.has { border-style: solid; }
#view { display: block; width: 100%; height: 100%; cursor: grab; }
#view.pick { cursor: crosshair; }
#view:focus-visible { outline: 3px solid #4d7bd6; outline-offset: -3px; }
.empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--card); padding: 16px; text-align: center; }
.empty p { margin: 0 0 8px; }
.viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.viewbar .hint { margin: 0; flex: 1 1 200px; }
#mode.active { color: var(--ink); font-weight: 700; background: var(--warnbg); padding: 2px 8px; border-radius: 4px; }
.refs { margin: 10px 0 0; padding: 0; list-style: none; }
.refs li { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 0 0 8px; }
.refs li.used { border-color: var(--okline); box-shadow: inset 4px 0 0 var(--okline); }
.refs .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.refs .name { font-weight: 700; flex: 1 1 auto; }
.refs .unitrow { margin: 6px 0 0; flex-wrap: wrap; }
.refs .unitrow input { max-width: 7em; }
.refs .meta { font-size: 14px; color: var(--muted); margin: 4px 0 0; }
.refs .off { color: var(--red); font-weight: 700; }
.refs label.use { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 14px; margin: 0; }
.refs label.use input { width: auto; min-height: 0; }
.logo { margin: 0 0 10px; }
.logo .lbl { display: block; font-weight: 700; font-size: 14px; }
.logo img { display: block; max-height: 64px; max-width: 200px; margin: 6px 0 0; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 4px; }
.socialprev { margin: 12px 0 0; }
.socialprev canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; display: block; }
.socialprev figcaption { font-size: 13px; color: var(--muted); margin-top: 4px; }
.notes details { margin: 6px 0; }
.notes ul { margin: 6px 0; padding-left: 1.2em; }
.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 (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .mapcard { position: static; }
  .drop { height: 60vh; }
}
@media (max-width: 560px) {
  h1 { font-size: 24px; }
  .two { grid-template-columns: 1fr; }
  .buttons button, .buttons label.btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
summary { cursor: pointer; font-weight: 700; color: var(--link); min-height: 32px; }
details p { max-width: 75ch; }

/* Section 6 (task 70, 2026-11-05): maps kept in this browser, backup and one-place files. */
#h-save ~ h3 { margin: 18px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); }

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