/* iVote kiosk
   Two worlds on one screen, deliberately unmistakable. The ATTENDANT's screens
   are dark; the VOTER's ballot is light and full-bleed. An attendant glancing
   over should be able to tell at a distance whose screen is showing, because
   the whole point of the handover is that they stop looking. */
:root {
  --navy:      #0F2340;
  --navy-2:    #16304F;
  --navy-3:    #1E3F66;
  --gold:      #C9A84C;
  --gold-2:    #B8964A;
  --paper:     #FAF7F2;
  --paper-2:   #F0E8DC;
  --line:      #DDD0BE;
  --ink:       #1A1614;
  --ink-2:     #3D322C;
  --ink-3:     #6B5B52;
  --green:     #2D6A4F;
  --green-lt:  #E8F5EE;
  --red:       #8B2020;
  --red-lt:    #FDECEA;
  --amber:     #8A6A12;
  --amber-lt:  #FFF7E0;
  --tap:       56px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--sans);
  background: var(--navy);
  color: var(--paper);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input  { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.screen { display: none; min-height: 100vh; flex-direction: column; }
.screen.on { display: flex; }

/* ── Status bar: always visible, so the desk knows its own state ── */
.bar {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .55rem 1.1rem; background: #0A1A2F;
  border-bottom: 1px solid rgba(255,255,255,.09); font-size: .8rem;
}
.bar .brand { font-family: var(--serif); font-weight: 600; color: var(--gold); font-size: 1rem; }
.bar .sep { color: rgba(255,255,255,.2); }
.bar .muted { color: rgba(255,255,255,.55); }
.bar .right { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: .35rem; }
.dot.on  { background: #4FD18A; }
.dot.off { background: var(--gold); }
.pill {
  font-size: .72rem; padding: .18rem .6rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8);
}
.pill.warn { border-color: var(--gold); color: var(--gold); }

/* ── Shared blocks ── */
.pad { padding: 1.6rem 1.2rem 3rem; }
.mid { width: 100%; max-width: 560px; margin: 0 auto; }
h1 { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1.15; }
h2 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.lede { color: rgba(255,255,255,.62); margin-top: .35rem; }
label { display: block; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
        color: rgba(255,255,255,.5); margin-bottom: .3rem; font-weight: 600; }
.field {
  width: 100%; min-height: var(--tap); padding: .7rem .9rem;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 10px; color: var(--paper); font-size: 1.05rem;
}
.field::placeholder { color: rgba(255,255,255,.32); }
.field:focus { border-color: var(--gold); background: rgba(255,255,255,.1); }
.stack { display: flex; flex-direction: column; gap: .95rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; }

.btn {
  min-height: var(--tap); padding: .75rem 1.4rem; border-radius: 10px;
  font-weight: 650; font-size: 1rem; display: inline-flex;
  align-items: center; justify-content: center; gap: .5rem; transition: filter .12s;
}
.btn:active { filter: brightness(.92); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn-gold  { background: var(--gold); color: #14243B; }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.25); color: var(--paper); }
.btn-lg    { min-height: 68px; font-size: 1.15rem; width: 100%; }
.btn-danger{ border: 1.5px solid rgba(220,120,120,.5); color: #F0A8A8; }

.msg { padding: .8rem 1rem; border-radius: 10px; font-size: .92rem; }
.msg.err  { background: rgba(200,60,60,.14); border: 1px solid rgba(220,120,120,.4); color: #F3B4B4; }
.msg.ok   { background: rgba(79,209,138,.12); border: 1px solid rgba(79,209,138,.35); color: #9BE7BF; }
.msg.warn { background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.4); color: #E6CF8C; }

/* ── Attendant: the search result list ── */
.hit {
  display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
  padding: .85rem 1rem; border-radius: 12px; background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.1); margin-bottom: .55rem;
}
.hit:hover { border-color: var(--gold); background: rgba(255,255,255,.09); }
.hit.voted { opacity: .55; }
.hit.voted:hover { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.05); }
.hit .who { flex: 1; min-width: 0; }
.hit .nm { font-size: 1.08rem; font-weight: 600; }
.hit .sub { font-size: .82rem; color: rgba(255,255,255,.5); font-family: var(--mono); }
.hit .tag { font-size: .72rem; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.tag-voted { background: rgba(255,255,255,.12); color: rgba(255,255,255,.65); }
.tag-ok    { background: rgba(79,209,138,.18); color: #9BE7BF; }

.avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 700; font-size: 1rem;
  background: rgba(201,168,76,.18); color: var(--gold);
}

/* ══ VOTER SIDE — light, so the handover is visible across the room ══ */
#s-ballot, #s-nominate, #s-review, #s-done { background: var(--paper); color: var(--ink); }
#s-ballot .vbar, #s-nominate .vbar, #s-review .vbar {
  position: sticky; top: 0; z-index: 10; background: #fff;
  border-bottom: 2px solid var(--navy); padding: .7rem 1.1rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.vbar .voter { font-weight: 700; font-size: 1.02rem; color: var(--navy); }
.vbar .count { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.counter { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; color: var(--navy);
           font-variant-numeric: tabular-nums; }
.counter small { color: var(--ink-3); font-weight: 400; }
.meter { height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden; width: 130px; }
.meter i { display: block; height: 100%; background: var(--gold); transition: width .18s; }

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .7rem; padding: 1rem 1.1rem 8rem;
}
.cand {
  display: flex; align-items: center; gap: .75rem; text-align: left;
  background: #fff; border: 2px solid var(--line); border-radius: 14px;
  padding: .8rem .85rem; min-height: 84px; transition: border-color .12s, background .12s;
}
.cand:hover { border-color: var(--gold-2); }
.cand.sel { border-color: var(--navy); background: #F4F7FC; }
.cand.sel .tick { background: var(--navy); color: #fff; border-color: var(--navy); }
.cand[disabled] { opacity: .38; }
.cand .ph {
  width: 50px; height: 50px; border-radius: 50%; flex: 0 0 auto; display: grid;
  place-items: center; font-weight: 700; background: var(--paper-2); color: var(--navy);
  overflow: hidden; font-size: 1.02rem;
}
.cand .ph img { width: 100%; height: 100%; object-fit: cover; }
.cand .nm { flex: 1; font-size: 1.02rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.tick {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line);
  flex: 0 0 auto; display: grid; place-items: center; font-size: .95rem; color: transparent;
}

.dock {
  position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
  border-top: 1px solid var(--line); padding: .8rem 1.1rem;
  display: flex; gap: .7rem; align-items: center;
  box-shadow: 0 -6px 20px rgba(15,35,64,.1);
}
.dock .btn-gold { background: var(--navy); color: #fff; }
.dock .btn-ghost { border-color: var(--line); color: var(--ink-2); }

/* Review */
.rev { padding: 1.2rem 1.1rem 8rem; }
.rev ol { list-style: none; }
.rev li { display: flex; gap: .8rem; align-items: center; padding: .6rem .2rem;
          border-bottom: 1px solid var(--line); }
.rev li .n { font-family: var(--mono); font-size: .82rem; color: var(--ink-3); width: 1.8rem; }
.rev li .nm { flex: 1; font-weight: 600; }
.rev li button { color: var(--red); font-size: .84rem; font-weight: 600; padding: .4rem; }

/* Done */
#s-done .inner { margin: auto; text-align: center; padding: 2rem 1.2rem; }
#s-done .big { font-size: 4rem; line-height: 1; }
#s-done h1 { color: var(--navy); margin: .8rem 0 .4rem; }
#s-done p { color: var(--ink-3); }
#s-done .next { margin-top: 1.6rem; font-size: .86rem; color: var(--ink-3); }

/* The nomination search sits in the voter's light world, not the desk's dark
   one, so the controls that were styled for navy need restating here. */
#s-nominate .field { background: #fff; border-color: var(--line); color: var(--ink); }
#s-nominate .field::placeholder { color: var(--ink-3); }
#s-nominate .field:focus { border-color: var(--navy); background: #fff; }
#s-nominate .hit { background: #fff; border: 1.5px solid var(--line); color: var(--ink); }
#s-nominate .hit:hover { border-color: var(--navy); background: #F4F7FC; }
#s-nominate .hit .nm { color: var(--ink); }
#s-nominate .hit .sub { color: var(--ink-3); }
#s-nominate .msg.warn { background: var(--amber-lt); border-color: var(--amber); color: var(--amber); }

.hide { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ══ ADMIN CONSOLE ═══════════════════════════════════════════════════════
   The organiser's world. Denser than the kiosk because it is read and
   operated rather than walked through, but the same palette so the two
   read as one system. */
.adm { display: flex; flex-direction: column; min-height: 100vh; }
.adm-body { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 1.1rem 1.1rem 5rem; }
.tabs { display: flex; gap: .15rem; background: rgba(255,255,255,.05); border-radius: 10px;
        padding: .22rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tabs button { padding: .5rem .95rem; border-radius: 7px; font-size: .86rem;
               color: rgba(255,255,255,.6); white-space: nowrap; }
.tabs button.on { background: var(--gold); color: #14243B; font-weight: 650; }
.panel { display: none; } .panel.on { display: block; }

.card { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
        border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: .9rem; }
.card h3 { font-size: .95rem; font-weight: 650; margin-bottom: .2rem; }
.card .hint { font-size: .82rem; color: rgba(255,255,255,.5); margin-bottom: .8rem; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: .55rem;
        margin-bottom: .9rem; }
.kpi { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
       border-radius: 10px; padding: .6rem .75rem; }
.kpi b { display: block; font-size: 1.35rem; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kpi span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
            color: rgba(255,255,255,.45); font-weight: 600; }
.kpi.good b { color: #4FD18A; } .kpi.warn b { color: var(--gold); } .kpi.bad b { color: #F0A8A8; }

table.t { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.t th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
             color: rgba(255,255,255,.45); padding: .45rem .6rem; font-weight: 600;
             border-bottom: 1px solid rgba(255,255,255,.12); }
table.t td { padding: .45rem .6rem; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: middle; }
table.t td.n, table.t th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }
.tall { max-height: 420px; overflow-y: auto; }

.chip { font-size: .7rem; padding: .15rem .5rem; border-radius: 999px;
        border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.75); }
.chip.on   { border-color: #4FD18A; color: #9BE7BF; }
.chip.gold { border-color: var(--gold); color: var(--gold); }
.chip.off  { opacity: .55; }
.btn-sm { min-height: 38px; padding: .3rem .8rem; font-size: .82rem; border-radius: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }
.steps { counter-reset: st; }
.steps > div { counter-increment: st; position: relative; padding-left: 2.2rem; margin-bottom: .8rem; }
.steps > div::before { content: counter(st); position: absolute; left: 0; top: .05rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: .72rem; color: var(--gold);
  border: 1px solid rgba(201,168,76,.5); }
.steps > div.done::before { content: '✓'; background: rgba(79,209,138,.2);
  border-color: rgba(79,209,138,.5); color: #9BE7BF; }