/* Floor Plan Designer. The same look as QR Code Maker and 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: 820px) { .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; }
.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, 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; }
.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); }

/* Floor Plan Designer (task 28). The editor wants room, so the controls column is narrower and
   the plan takes the rest. */
.layout { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
@media (max-width: 820px) { .layout { grid-template-columns: minmax(0, 1fr); } .stage { order: -1; } }
.dims { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.dims > div { min-width: 0; }
.dims.three { grid-template-columns: 1fr 1fr 1fr; }
.dims.three label { font-size: 13px; }
.lbl { display: block; font-weight: 700; font-size: 14px; margin: 10px 0 4px; }
.ftin { display: flex; align-items: center; gap: 4px; }
.ftin input { min-width: 0; padding: 8px 6px; }
.ftin span { font-size: 14px; color: var(--muted); }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; min-height: 44px; margin: 6px 0 0; }
label.check input { width: 20px; height: 20px; min-height: 0; flex: none; }
.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.palette button { display: flex; align-items: center; gap: 8px; background: var(--card); color: var(--ink); border: 1px solid var(--line); font-weight: 400; text-align: left; padding: 6px 8px; font-size: 14px; line-height: 1.2; touch-action: none; cursor: grab; min-width: 0; }
.palette svg { width: 28px; height: 28px; flex: none; }
.ghost { position: fixed; z-index: 10; pointer-events: none; padding: 6px 10px; background: var(--navy); color: #fff; border-radius: 6px; font-size: 14px; font-weight: 700; transform: translate(-50%, -130%); }
.stage { position: sticky; top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; min-width: 0; }
@media (max-width: 820px) { .stage { position: static; } }
.stagebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.stagebar button { padding: 6px 12px; min-height: 40px; }
button:disabled { cursor: default; }
.chip { margin-left: auto; padding: 6px 10px; border-radius: 16px; font-size: 14px; font-weight: 700; }
.chip.ok { background: #e3f3e6; color: #1e5e2a; }
.chip.bad { background: #fde7e7; color: #8e1b1b; }
.chip.note { background: var(--warnbg); color: var(--ink); }
/* The plan is drawn on white, in light and dark mode alike, the same as it prints. */
#canvas { display: block; width: 100%; height: auto; max-height: 78vh; background: #fff; border: 1px solid var(--line); border-radius: 4px; touch-action: none; user-select: none; -webkit-user-select: none; }
#canvas:focus-visible { outline: 3px solid #4d7bd6; outline-offset: 2px; }
#canvas .it, #canvas .path { cursor: move; }
#canvas .handle { cursor: grab; }
#canvas .wall { cursor: copy; }
#canvas.drawing, #canvas.drawing * { cursor: crosshair; }
.problems { margin: 6px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.problems li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; border-left: 4px solid var(--red); padding: 4px 0 4px 8px; }
.problems li.other { border-color: var(--warnline); }
.problems .n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 12px; background: #c62828; color: #fff; font-weight: 700; font-size: 13px; }
.problems li span.msg { flex: 1; min-width: 0; }
.problems button { padding: 2px 10px; min-height: 32px; font-size: 13px; flex: none; }
/* The rule behind each flag (task 39), under its sentence. */
.problems .cite { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.problems .cite a, .sq .cite a, #surveyNote a { color: inherit; }
/* The accessibility survey (task 39). Answers are big buttons, a fingertip wide on an iPad or a phone. */
.status.strong { font-weight: 700; }
#moreChecks .dims { margin-bottom: 4px; }
.sgroup { border-top: 1px solid var(--line); margin-top: 12px; }
.sgroup > summary { padding: 8px 0 4px; }
.sq { padding: 10px 0 12px; border-bottom: 1px dashed var(--line); }
.sq:last-child { border-bottom: 0; }
.sq .qt { margin: 0 0 8px; font-size: 15px; }
.ans { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.ans label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; font-size: 14px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); cursor: pointer; }
.ans input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; }
.ans label:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.ans label.no:has(input:checked) { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.ans label:has(input:focus-visible) { outline: 3px solid #4d7bd6; outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ans label:has(input:checked) { border-color: #9fb7ea; box-shadow: inset 0 0 0 1px #9fb7ea; } }
.sq .meas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; }
.sq .meas label { display: inline; margin: 0; font-weight: 700; }
.sq .meas input { width: 96px; flex: none; }
.sq .row { margin-top: 8px; }
.sq .row label { font-size: 13px; margin: 0 0 2px; }
.sq .cite { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.snum { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; font-size: 13px; margin-top: 6px; }
.snum input { width: 76px; padding: 6px; }
/* Printing: only the plan's page, at its real size (the page size is set by the page when it prints). */
#printArea { display: none; }
@media print {
  body > *:not(#printArea) { display: none !important; }
  body { background: #fff; margin: 0; }
  #printArea { display: block; }
  #printArea svg { display: block; break-after: page; }
  #printArea svg:last-child { break-after: auto; }
}


/* Plans kept in this browser before signing in (task 70, 2026-11-05): the offer to copy them into
   the office. Never done without a click. */
.offer { margin: 16px 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: 4px; font-size: 14px; }
.offer p { margin: 0 0 6px; }

/* 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: "Alignment issues"): the note above the tool gets the same 16px
   gap as the other boxes; it used to touch the tool. */
#localNote { margin-bottom: 16px; }