/* WNC Poll styles. One stylesheet for all four pages.
   WNC palette, measured from the live council website:
     #386193 primary blue   #0e335b dark blue   #e2ca76 gold (focus)
     #e9eef3 pale tint      #000000 body text
   No web fonts are loaded: a system stack keeps the page fast on a phone on
   conference wifi and loads nothing third party. Self-hosting Asap to match
   the council website is recorded as follow-up work. */

:root {
  --blue: #386193;
  --dark: #0e335b;
  --gold: #e2ca76;
  --pale: #e9eef3;
  --ink: #111;
  --muted: #5a6672;
  --line: #c9d4df;
  --bad: #a8201a;
  --good: #1c6b3c;
  --radius: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  font-size: 17px;
  line-height: 1.5;
}

/* The footer sits at the bottom of the window on a short page, and below the
   content on a long one.

   The body is a flex column and main is the part that grows, so on the join
   page, which is barely half a screen, the footer is pushed down to the bottom
   instead of floating under the form with white space beneath it. On a long
   page main is taller than the window, main stops growing, and the footer ends
   up after the content as normal.

   min-height uses both units on purpose: 100vh is what every browser
   understands, and 100dvh is the one that accounts for the address bar on a
   phone, which is where most people will see this. A browser that does not know
   dvh ignores the second line and keeps the first. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* A visible, high contrast focus ring everywhere. Keyboard users have to be
   able to see where they are, and the gold reads against both themes. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: #fff;
  padding: 0.5rem 1rem;
}

/* ------------------------------------------------- header, nav and footer

   Matched to NeneForms so the two look like the same family of tool. The
   values are taken from neneForms/frontend/base-styles.css rather than guessed
   at: #386193 mast, #244D7A nav, the same nav button shape, the same pill for
   sign out and the same three link footer.

   The logo is served from our own origin rather than hot linked from
   nforms.westnorthants.gov.uk, because the content security policy here is
   img-src 'self' and a cross-origin logo would be refused by the browser with
   nothing but a console message. That exact fault is recorded in the NeneForms
   README as "the council logo is missing from a generated form". */

#mast {
  background: var(--blue);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  gap: 1rem;
  flex-wrap: wrap;
}
#logo { height: 44px; width: auto; display: block; }
#mast .who {
  color: #fff;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.pill-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  padding: 5px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}
.pill-btn:hover { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.7); }

.main-nav { background: #244d7a; padding: 0 20px; flex-shrink: 0; }
.nav-inner {
  max-width: 1800px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.nav-btn {
  background: none;
  border: none;
  color: #fff;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  display: block;
  border-radius: 4px 4px 0 0;
}
.nav-btn:hover { background: rgba(255, 255, 255, 0.1); }
.nav-active { background: rgba(255, 255, 255, 0.15); border-bottom: 2px solid #fff; }

#footer {
  background: #2d333b;
  border-top: 3px solid var(--blue);
  margin-top: 2.5rem;
  padding: 1.5rem 20px;
  color: #f0f3f6;
  font-size: 0.9rem;
}
#footer ul {
  list-style: none;
  margin: 0 auto 0.75rem;
  padding: 0;
  max-width: 1800px;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
#footer a { color: #f0f3f6; text-decoration: underline; }
#footer a:hover, #footer a:focus { color: var(--gold); }
#smallprint { text-align: center; margin: 0; color: #b1bac4; }

/* The presenter screen is a projector surface, so it keeps the mast for
   branding but has no nav: a menu bar is not wanted on a wall. */
body.present #mast { background: #081320; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
body.present #footer { display: none; }

main {
  max-width: 44rem;
  /* margin-right and left auto keeps it centred, and the flex line is what
     makes it the part that absorbs the spare height so the footer is pushed to
     the bottom. "1 0 auto" rather than "1": with a basis of 0 the padding of a
     short page would be collapsed and the content would start too high. */
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  flex: 1 0 auto;
  width: 100%;
  box-sizing: border-box;
}
main.wide { max-width: 68rem; }

/* The bars above and below must not stretch or shrink to fill the column. */
#mast, .main-nav, #footer, .controls { flex-shrink: 0; }

h2 { font-size: 1.4rem; margin: 0 0 0.75rem; color: var(--dark); }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; color: var(--dark); }
p.lede { font-size: 1.05rem; color: var(--muted); margin-top: 0; }

/* -------------------------------------------------------------- controls */

label { display: block; font-weight: 600; margin: 0.9rem 0 0.25rem; }
.hint { font-weight: 400; color: var(--muted); font-size: 0.9rem; }

input[type="text"], input[type="number"], input[type="email"], textarea, select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  background: #fff;
  color: var(--ink);
}
input:focus, textarea:focus, select:focus { border-color: var(--blue); }
textarea { min-height: 5rem; resize: vertical; }

button {
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  border: 2px solid var(--blue);
  background: var(--blue);
  color: #fff;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--dark); border-color: var(--dark); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
button.secondary { background: #fff; color: var(--blue); }
button.secondary:hover:not(:disabled) { background: var(--pale); color: var(--dark); }
button.danger { background: #fff; color: var(--bad); border-color: var(--bad); }
button.danger:hover:not(:disabled) { background: var(--bad); color: #fff; }
button.link {
  background: none;
  border: none;
  color: var(--blue);
  text-decoration: underline;
  padding: 0.25rem;
  font-weight: 600;
}
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }

/* ------------------------------------------------------------------ join */

.join-code {
  font-size: clamp(2rem, 9vw, 3.2rem);
  letter-spacing: 0.35rem;
  text-align: center;
  font-weight: 700;
  padding: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.card {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0.75rem 0;
  background: #fff;
}
.card.tint { background: var(--pale); border-color: #b9c9d9; }

.notice {
  border-left: 6px solid var(--blue);
  background: var(--pale);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin: 1rem 0;
}
.notice.error { border-color: var(--bad); background: #fbeceb; }
.notice.good { border-color: var(--good); background: #eaf4ee; }
.notice[hidden] { display: none; }

/* --------------------------------------------------------- vote options */

.options { display: grid; gap: 0.6rem; margin: 1rem 0; }
.option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  background: #fff;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font-weight: 500;
  width: 100%;
}
.option:hover { border-color: var(--blue); background: var(--pale); }
.option[aria-pressed="true"] {
  border-color: var(--dark);
  background: var(--dark);
  color: #fff;
}
.option .tick { font-weight: 700; }

.scale {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1rem 0 0.25rem;
}
.scale button {
  min-width: 3.2rem;
  min-height: 3.2rem;
  font-size: 1.15rem;
  background: #fff;
  color: var(--dark);
}
.scale button[aria-pressed="true"] { background: var(--dark); color: #fff; }
.scale-labels {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------- results */

/* One grid for the whole chart, not one per row.

   Each row used to be its own grid, so the third column, sized "auto" to its
   own content, came out a different width on every row: "0 (0%)" is narrower
   than "1 (100%)", which made the 1fr track beside it WIDER. The result was an
   empty bar on a zero per cent row drawn longer than a full bar on a hundred
   per cent row, which was reported and is a fair thing to call odd.

   display: contents on the row makes its three children participate in the
   grid on .bars, so all three columns are shared and every track is identical
   whatever the numbers say. */
.bars {
  display: grid;
  grid-template-columns: minmax(6rem, 14rem) 1fr auto;
  gap: 0.6rem 0.75rem;
  align-items: center;
  margin: 0.5rem 0;
}
.bar-row { display: contents; }
.bar-label { font-weight: 600; overflow-wrap: anywhere; }
.bar-track { background: var(--pale); border-radius: 4px; height: 1.6rem; overflow: hidden; }
.bar-fill {
  background: var(--blue);
  height: 100%;
  border-radius: 4px;
  /* Transition on width only, so a changing count animates rather than jumps,
     which makes a live result readable as it moves. */
  transition: width 400ms ease-out;
  min-width: 2px;
}
.bar-value { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

.cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: baseline;
  justify-content: center;
  padding: 1rem 0;
}
.cloud span {
  line-height: 1.1;
  color: var(--blue);
  overflow-wrap: anywhere;
}
.cloud span:nth-child(3n) { color: var(--dark); }
.cloud span:nth-child(5n) { color: #6a7f99; }

.responses { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.responses .resp {
  background: var(--pale);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  overflow-wrap: anywhere;
}

.big-average {
  font-size: clamp(2.5rem, 10vw, 5rem);
  font-weight: 700;
  color: var(--blue);
  text-align: center;
  line-height: 1.1;
}

.empty { color: var(--muted); text-align: center; padding: 2rem 1rem; }

/* ------------------------------------------------------ presenter screen */

body.present {
  background: #0d1b2a;
  color: #fff;
}
body.present main { max-width: 90rem; padding-top: 1rem; }
body.present h2 { color: #fff; }
body.present .bar-track { background: rgba(255, 255, 255, 0.14); }
body.present .bar-fill { background: var(--gold); }
body.present .bar-label, body.present .bar-value { color: #fff; }
body.present .cloud span { color: var(--gold); }
body.present .cloud span:nth-child(3n) { color: #fff; }
body.present .cloud span:nth-child(5n) { color: #9fc3e8; }
body.present .responses .resp { background: rgba(255, 255, 255, 0.1); color: #fff; }
body.present .big-average { color: var(--gold); }
body.present .empty { color: #9fb3c8; }
body.present .card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.25); }

.stage-question {
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  font-weight: 700;
  margin: 0.5rem 0 1.5rem;
  line-height: 1.2;
}

.joinstrip {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.joinstrip .code {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.2rem;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.joinstrip .where { font-size: 1.05rem; color: #cfe0f0; }
.joinstrip .count { margin-left: auto; font-size: 1.2rem; font-weight: 600; }

.controls {
  position: sticky;
  bottom: 0;
  background: #081320;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.6rem 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.controls .spacer { flex: 1; }
.controls button { border-color: #5a8cc8; background: #16304d; }
.controls button:hover:not(:disabled) { background: #1f4a76; }
.controls .state { color: #cfe0f0; font-size: 0.95rem; }

/* ------------------------------------------------------- editor (admin) */

.slide-editor {
  border: 2px solid var(--line);
  border-left: 6px solid var(--blue);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin: 0.75rem 0;
}
.slide-editor header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.slide-editor header .n { font-weight: 700; color: var(--blue); }
.slide-editor header .type {
  background: var(--pale);
  border-radius: 999px;
  padding: 0.1rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark);
}
.slide-editor header .spacer { flex: 1; }
.opt-row { display: flex; gap: 0.5rem; align-items: center; margin: 0.35rem 0; }
.opt-row input { flex: 1; }

table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.list th { color: var(--dark); }

.muted { color: var(--muted); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

footer.site {
  border-top: 1px solid var(--line);
  padding: 1rem 1.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}
body.present footer.site { border-color: rgba(255, 255, 255, 0.2); color: #9fb3c8; }

@media (prefers-reduced-motion: reduce) {
  .bar-fill { transition: none; }
}

@media print {
  .controls, #mast, .main-nav, #footer { display: none; }
  body.present { background: #fff; color: #000; }
}


/* --------------------------------------------- integrity and mode chooser */

/* How trustworthy the count is, shown to the presenter rather than left to be
   assumed. A number on a screen invites more confidence than it deserves. */
.integrity {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 1rem;
}
.integrity .label { color: #9fb3c8; }
.integrity .value { font-weight: 700; }
.integrity .badge {
  border-radius: 999px;
  padding: 0.1rem 0.7rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.integrity .badge.strong { background: #1c6b3c; color: #fff; }
.integrity .badge.issued { background: #8a6d1f; color: #fff; }
.integrity .badge.open { background: #5a6672; color: #fff; }
.integrity .warn { color: var(--gold); font-weight: 600; }

.mode-choice { display: grid; gap: 0.6rem; margin: 0.75rem 0; }
.mode-choice label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}
.mode-choice label:hover { border-color: var(--blue); background: var(--pale); }
.mode-choice .what { display: block; font-weight: 700; }
.mode-choice .why { display: block; color: var(--muted); font-size: 0.9rem; font-weight: 400; }

.tickets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.4rem;
  margin: 0.75rem 0;
}
.tickets code {
  background: var(--pale);
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  text-align: center;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.ticket-input {
  font-size: 1.6rem;
  text-align: center;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}

/* The QR code on the presenter screen. Sized so it is scannable from a few
   metres on a projector: too small and nobody can read it from the back, too
   large and it crowds the join code out of the strip. */
.qr {
  width: 7.5rem;
  height: 7.5rem;
  flex-shrink: 0;
  background: #fff;
  border-radius: 6px;
  padding: 2px;
  line-height: 0;
}
.qr:empty { display: none; }
@media (max-width: 40rem) {
  .qr { width: 5.5rem; height: 5.5rem; }
}