/* Version: 1.7 — die poll se hele look. Kom uit die template: donker navy,
   amber anonymity panel, outline buttons wat oplig wanneer hulle gekies is. */
:root {
  --bg:      #0a1421;
  --card:    #101f30;
  --line:    #1c3047;
  --text:    #e8eef5;
  --muted:   #7d93aa;
  --dim:     #5d7a96;
  --amber:   #e0a24a;
  --blue:    #4a9fe0;
  --submit:  #8ec5ea;
  --no:      #e06a6a;
  --partly:  #4a9fe0;
  --yes:     #5fbf8a;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body {
  color: var(--text);
  font: 17px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(74,159,224,.10), transparent 60%),
    var(--bg);
  min-height: 100vh;
  padding: 0 20px 60px;
}
.wrap { max-width: 640px; margin: 0 auto; padding-top: 44px; }

/* Progress bar heel bo — hoeveel van die sewe is beantwoord. */
#bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--blue); transition: width .25s ease; z-index: 10;
}

/* ncc-logo.png is NCC_500_220_Trans.png — die weergawe vir 'n wit agtergrond.
   Sy CC en tagline is donkergrys en sou op hierdie navy amper wegraak, so die
   filter lig die grys op en laat die blou blou.
   ncc-logo-light.png staan langs hom: dieselfde logo met ligte grys, klaar vir
   'n donker agtergrond. Om oor te slaan, ruil die filename hieronder om en gooi
   die filter-reël weg. */
.logo { text-align: center; margin-bottom: 30px; }
.logo img {
  width: 100%; max-width: 190px; height: auto;
  filter: brightness(1.85) saturate(1.05);
}
h1 { font-size: 40px; line-height: 1.1; margin: 26px 0 14px; letter-spacing: -.8px; }
.intro { color: var(--muted); font-size: 20px; max-width: 560px; margin: 0 0 34px; }

/* Anonymity panel. Amber rand links, presies soos die template. */
.anon {
  background: linear-gradient(180deg, rgba(224,162,74,.07), rgba(224,162,74,.02));
  border: 1px solid rgba(224,162,74,.28);
  border-left: 3px solid var(--amber);
  border-radius: 8px; padding: 20px 22px; margin-bottom: 26px;
}
.anon h2 { color: var(--amber); font-size: 19px; margin: 0 0 8px; }
.anon p { color: var(--muted); margin: 0 0 14px; font-size: 17px; }
.anon ul {
  list-style: none; margin: 0; padding: 0; font-size: 16.5px; color: var(--muted);
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 22px;
}
.anon li { position: relative; padding-left: 15px; }
.anon li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--amber);
}
.anon b { color: var(--text); font-weight: 600; }
/* Die een ding wat ons wel in die browser los, hardop gesê. 'n Panel wat sy
   enigste uitsondering noem lees geloofwaardiger as een wat niks erken nie. */
.anon .fine {
  margin: 14px 0 0; padding-top: 12px; font-size: 13.5px; color: var(--dim);
  border-top: 1px solid rgba(224,162,74,.18);
}
@media (max-width: 560px) { .anon ul { grid-template-columns: 1fr; } }

.meta {
  color: var(--dim); font-size: 14px; letter-spacing: 1.6px;
  margin-bottom: 26px; text-transform: uppercase;
}
.meta span::before { content: "• "; }
.meta span + span { margin-left: 14px; }

/* Vrae */
.q {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 20px 22px 22px; margin-bottom: 14px;
  position: relative;
}
.q .num { position: absolute; left: 22px; top: 22px; color: var(--dim); font-size: 12.5px; }
.q .body { padding-left: 30px; }
.q h3 { font-size: 19px; margin: 0 0 6px; line-height: 1.35; }
.q .help { color: var(--muted); font-size: 16.5px; margin: 0 0 16px; }

.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.opts button {
  background: transparent; color: var(--text);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 12px 8px; font: inherit; font-size: 16px; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.opts button:hover { border-color: #2c4a68; background: rgba(74,159,224,.05); }
/* Gekose antwoord kry sy eie kleur: No rooi, Partly blou, Yes groen. Die
   kleur is die antwoord se identiteit — dieselfde drie kleure kom weer op die
   stats se bars terug. */
.opts button[aria-pressed="true"] { font-weight: 600; }
.opts button[data-o="no"][aria-pressed="true"] {
  color: #ffdcdc; background: rgba(224,106,106,.16); border-color: var(--no);
  box-shadow: 0 0 0 1px rgba(224,106,106,.35), 0 0 18px rgba(224,106,106,.18);
}
.opts button[data-o="partly"][aria-pressed="true"] {
  color: #d8ecff; background: rgba(74,159,224,.16); border-color: var(--partly);
  box-shadow: 0 0 0 1px rgba(74,159,224,.35), 0 0 18px rgba(74,159,224,.18);
}
.opts button[data-o="yes"][aria-pressed="true"] {
  color: #d6f4e5; background: rgba(95,191,138,.16); border-color: var(--yes);
  box-shadow: 0 0 0 1px rgba(95,191,138,.35), 0 0 18px rgba(95,191,138,.18);
}
@media (max-width: 460px) { .opts { grid-template-columns: 1fr; } }

#send {
  width: 100%; margin-top: 26px; padding: 15px;
  background: var(--submit); color: #0a1420; border: 0; border-radius: 6px;
  font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
}
#send:disabled { opacity: .45; cursor: default; }
#send:not(:disabled):hover { background: #a5d2f0; }
.note { text-align: center; color: var(--dim); font-size: 14px; margin-top: 12px; }
.err { color: #e08a8a; text-align: center; font-size: 16.5px; margin-top: 12px; min-height: 18px; }

footer {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: 13.5px;
}
footer b { color: var(--muted); font-weight: 600; }

/* Die blok wat na 'n submit oorbly. Groen wanneer alles reg is, neutraal
   wanneer dit 'n mededeling is soos "jy het al geantwoord". Hy staan reg onder
   die logo omdat daar op daardie punt niks anders op die page is nie. */
.note-box {
  margin: 6px 0 10px; padding: 34px 32px;
  border: 1px solid var(--line); border-left: 4px solid var(--dim);
  border-radius: 8px; background: var(--card);
}
.note-box h2 { font-size: 32px; line-height: 1.25; margin: 0 0 10px; font-weight: 700; }
.note-box p  { color: var(--muted); margin: 0; font-size: 17px; }
.note-box.ok {
  border-color: rgba(95,191,138,.42); border-left-color: var(--yes);
  background: linear-gradient(180deg, rgba(95,191,138,.13), rgba(95,191,138,.04));
}
.note-box.ok h2 { color: var(--yes); }

/* Boodskap-pages: closed, klaar geantwoord, dankie. */
.msg { padding: 40px 0; }
.msg h1 { font-size: 34px; }
.msg p { color: var(--muted); max-width: 500px; }

/* Stats */
.stat { font-size: 13px; color: var(--muted); margin-bottom: 30px; }
.stat b { color: var(--text); font-size: 30px; font-weight: 700; display: block; }
.sq { margin-bottom: 26px; }
.sq h3 { font-size: 15px; margin: 0 0 12px; font-weight: 600; }
.row { display: grid; grid-template-columns: 58px 1fr 84px; align-items: center; gap: 12px; margin-bottom: 7px; }
.row .lbl { color: var(--muted); font-size: 13px; }
.row .val { color: var(--muted); font-size: 12.5px; text-align: right; }
.track { background: #0d1a29; border: 1px solid var(--line); border-radius: 3px; height: 20px; overflow: hidden; }
.fill { height: 100%; border-radius: 2px 0 0 2px; transition: width .4s ease; }
.fill.no     { background: var(--no); }
.fill.partly { background: var(--partly); }
.fill.yes    { background: var(--yes); }

/* Die potential-double teller onderaan die stats. Bly grys op nul, kry 'n
   amber randjie sodra daar iets is om na te kyk. */
.dup {
  margin-top: 34px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); font-size: 13px;
}
.dup.flag { border-color: rgba(224,162,74,.45); border-left: 3px solid var(--amber); }
.dup b { color: var(--text); font-size: 20px; font-weight: 700; margin-right: 6px; }
.dup.flag b { color: var(--amber); }
.dup > span:last-child { display: block; color: var(--dim); font-size: 12px; margin-top: 4px; }

.live { color: var(--dim); font-size: 11.5px; letter-spacing: .4px; margin-top: 14px; }
.live.stale { color: var(--amber); }

/* Die een graph — al die vrae langs mekaar -------------------------------
   Die stats is die enigste page wat breed loop: hy staan op 'n screen voor 'n
   saal. Alles hier is 'n paar punte groter as op die vraelys, want die leser
   sit agter in die saal en nie met die page in sy hand nie. */
.wrap.wide { max-width: 1440px; padding-top: 26px; }
.wrap.wide .logo { margin-bottom: 16px; }
.wrap.wide .logo img { max-width: 150px; }
.wrap.wide h1 { font-size: 30px; margin: 8px 0 12px; }
.wrap.wide .stat { font-size: 16px; margin-bottom: 18px; }
.wrap.wide .stat b { display: inline; font-size: 26px; margin-right: 3px; }
.wrap.wide .dup { font-size: 16px; padding: 16px 20px; }
.wrap.wide .dup b { font-size: 26px; }
.wrap.wide .dup > span:last-child { font-size: 14px; }
.wrap.wide .live { font-size: 13px; }

.legend { display: flex; gap: 24px; margin-bottom: 14px; font-size: 15px; color: var(--muted); }
.legend .key i {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 2px; margin-right: 8px; vertical-align: -1px;
}
.legend .key.no i     { background: var(--no); }
.legend .key.partly i { background: var(--partly); }
.legend .key.yes i    { background: var(--yes); }

/* Die label-band is nie meer 'n vaste hoogte nie: die vrae staan horisontaal
   en wrap onder hul eie groep, so die band is so hoog soos die langste een. */
.chart { --plot-h: 330px; --gut: 52px; }
.plot { position: relative; display: flex; align-items: flex-start; padding-left: var(--gut); }
/* Elke gridline dra sy eie y-as label, so die syfer bly op sy lyn. */
.grid { position: absolute; left: var(--gut); right: 0; top: 0; height: var(--plot-h); }
.grid i { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.grid i:nth-child(1) { top: 0; }
.grid i:nth-child(2) { top: 25%; }
.grid i:nth-child(3) { top: 50%; }
.grid i:nth-child(4) { top: 75%; }
.grid i:nth-child(5) { top: 100%; border-top-color: #2c4a68; }
.grid i::before {
  content: attr(data-v); position: absolute; left: calc(var(--gut) * -1); top: -.7em;
  width: calc(var(--gut) - 12px); text-align: right;
  font-size: 13px; font-style: normal; color: var(--dim); line-height: 1.4;
}

.grp { flex: 1 1 0; min-width: 0; }
.bars {
  height: var(--plot-h); display: flex; align-items: flex-end;
  justify-content: center; gap: 2px; padding: 0 7px;
}
.bar {
  flex: 1 1 0; max-width: 46px; height: 100%;
  display: flex; flex-direction: column-reverse;
}
/* Die syfer ry saam op die bar se kop. i is die fill self — hy gly na sy nuwe
   hoogte wanneer die volgende tick inkom. */
.bar b { font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.5; }
.bar i { display: block; min-height: 2px; border-radius: 4px 4px 0 0; transition: height .45s ease; }
.bar.no i     { background: var(--no); }
.bar.partly i { background: var(--partly); }
.bar.yes i    { background: var(--yes); }
.bar:hover b { color: var(--text); }

/* Die vraag staan onder sy eie groep en wrap binne daardie breedte — hy word
   nooit wyer as die bars waarna hy wys nie. */
.xlab {
  max-width: var(--cluster); margin: 0 auto;
  padding: 12px 6px 0; text-align: center;
  font-size: 13.5px; line-height: 1.35; color: var(--muted);
  overflow-wrap: break-word; hyphens: auto;
}
.axisnote { color: var(--dim); font-size: 14px; margin: 18px 0 0; }

/* Die volle vrae onder die graph — die x-as dra net die kort weergawe. */
.qlist { margin: 24px 0 0; padding-left: 24px; color: var(--muted); font-size: 16px; columns: 2; column-gap: 44px; }
.qlist li { margin-bottom: 9px; break-inside: avoid; }

.tip {
  position: absolute; transform: translate(-50%, -100%); z-index: 20;
  background: #16283c; border: 1px solid #2c4a68; border-radius: 5px;
  padding: 7px 11px; font-size: 14px; color: var(--text);
  white-space: nowrap; pointer-events: none;
}

@media (max-width: 900px) {
  .chart { --plot-h: 250px; --gut: 42px; }
  .xlab { font-size: 12px; }
  .qlist { columns: 1; }
}