/* Vote counting — one stylesheet for all pages.
   Colours come from CSS variables set per page (artefont for the main admin, the counting's
   own colour set elsewhere): --bg --fg --primary --on-primary --tint --band */

@font-face { font-family: 'SpaceGrotesk'; src: url('fonts/SpaceGrotesk.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.45 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0.005em;
}
h1, h2, h3 { font-family: 'SpaceGrotesk', 'Inter', system-ui, sans-serif; line-height: 1.15; margin: 0 0 12px; }
h1 { font-size: 26px; } h2 { font-size: 20px; } h3 { font-size: 16px; margin-top: 20px; }
a { color: inherit; text-underline-offset: 3px; }
[hidden] { display: none !important; }
.muted { opacity: .68; }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .06em; }
.hint { font-size: 13px; opacity: .7; margin: 4px 0 12px; }
.eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin: 0 0 12px; }

/* ---------------------------------------------------------------- band / header */
.band-in { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand-logo { height: 40px; width: auto; display: block; max-width: 180px; object-fit: contain; }
.brand-title { font-family: 'SpaceGrotesk', 'Inter', sans-serif; font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band-nav { display: flex; align-items: center; gap: 14px; font-size: 14px; flex-shrink: 0; }
.band-nav a { text-decoration: none; }
.band-nav a:hover { text-decoration: underline; }
.langs { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; overflow: hidden; }
.langs a { padding: 2px 9px; font-size: 12px; font-weight: 600; opacity: .7; }
.langs a.on { opacity: 1; background: currentColor; }
.langs a.on { color: inherit; }

/* artefont: magenta band, white logo */
.look-artefont .band { background: var(--band); color: #fff; }
.look-artefont .band-in { padding: 14px 16px; }
.look-artefont .artefont-logo { height: 44px; }
.artefont-letters { display: inline-flex; gap: 2px; align-items: flex-end; }
.artefont-letters img { height: 30px; width: auto; }
.look-artefont .langs a.on { background: #fff; color: var(--band); }
.look-artefont .btn.primary:hover { background: var(--band); border-color: var(--band); color: #fff; }
.look-artefont h1, .look-artefont h2 { letter-spacing: -.01em; }

/* a counting: its colour as a band at the top edge, title on the page colour (always readable) */
.look-counting .band { background: var(--bg); color: var(--fg); border-top: 8px solid var(--band); border-bottom: 1px solid var(--tint); }
.look-counting .langs a.on { background: var(--fg); color: var(--bg); }

/* ---------------------------------------------------------------- layout */
main { padding: 20px 16px 48px; }
main.narrow { max-width: 440px; margin: 0 auto; padding-top: 40px; }
main.wide { max-width: 1120px; margin: 0 auto; }
.card { background: var(--bg); border: 1px solid var(--tint); border-radius: 12px; padding: 20px; margin: 0 0 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.cols > .card { margin: 0 0 18px; }
@media (max-width: 820px) { .cols { grid-template-columns: 1fr; } }
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h2 { display: inline; margin: 0; }
details.card > summary::before { content: '▸ '; font-size: 14px; }
details.card[open] > summary::before { content: '▾ '; }
details.card[open] > summary { margin-bottom: 14px; }

/* ---------------------------------------------------------------- forms */
label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 10px; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
input[type=text], input[type=password], input[type=number], select, textarea {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px; font: inherit; font-weight: 400;
  color: var(--fg); background: var(--bg); border: 1.5px solid var(--tint); border-radius: 8px;
  filter: contrast(1.1);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
textarea { resize: vertical; font-size: 14px; }
.code-input { font-size: 28px !important; text-align: center; letter-spacing: .3em; text-transform: uppercase; font-family: ui-monospace, Consolas, monospace !important; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grid2 .span2 { grid-column: 1 / -1; }
.grid2 .hint { margin-top: -4px; }
.self-end { align-self: end; }
@media (max-width: 600px) { .grid2 { grid-template-columns: 1fr; } }
.narrow-form { max-width: 420px; }
.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.inline-form label { margin: 0; flex: 1 1 200px; }
fieldset.theme-box { border: 1px solid var(--tint); border-radius: 10px; padding: 12px 14px; margin: 6px 0 16px; }
fieldset legend { font-size: 14px; font-weight: 600; padding: 0 6px; }
.theme-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.theme-pick { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border: 1.5px solid #ccc; border-radius: 8px; background: var(--bg); color: var(--fg); cursor: pointer; font-weight: 500; }
.theme-pick:has(input:checked) { outline: 3px solid #ff00ff; outline-offset: 1px; }
.swatch { display: inline-flex; border-radius: 4px; overflow: hidden; border: 1px solid rgba(0,0,0,.15); }
.swatch i { width: 14px; height: 18px; display: block; }
.color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.color-grid label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.color-grid input[type=color] { width: 40px; height: 30px; padding: 0; border: 1px solid #bbb; border-radius: 6px; background: none; }
@media (max-width: 600px) { .color-grid { grid-template-columns: 1fr 1fr; } }
.logo-now { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.logo-now img { height: 48px; width: auto; border: 1px solid var(--tint); border-radius: 6px; padding: 4px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 8px 16px; font: inherit; font-weight: 600; font-size: 15px; line-height: 1.2;
  color: var(--fg); background: var(--bg); border: 1.5px solid var(--fg); border-radius: 999px;
  cursor: pointer; text-decoration: none; touch-action: manipulation; user-select: none;
}
.btn:hover { background: var(--tint); }
.btn.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn.primary:hover { filter: brightness(1.12); }
.btn.big { min-height: 54px; font-size: 18px; padding: 10px 24px; }
.btn.small { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.btn.danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.btn.danger-outline { border-color: #b3261e; color: #b3261e; }
.btn:disabled { opacity: .35; cursor: not-allowed; filter: none; }
.btn:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.link { background: none; border: 0; padding: 4px; font: inherit; font-size: 14px; color: inherit; text-decoration: underline; cursor: pointer; opacity: .75; }
.link.danger { color: #b3261e; opacity: 1; }
.login .btn.big { width: 100%; margin-top: 8px; }

/* ---------------------------------------------------------------- messages */
.flash { padding: 10px 14px; border-radius: 8px; margin: 0 0 14px; font-weight: 500; }
.flash.ok { background: #e3f4e8; color: #0d5a27; }
.flash.warn { background: #fff4d6; color: #6b4b00; }
.flash.err { background: #fde7e6; color: #8c1d18; }
.ok-text { color: #0d7a35; font-weight: 600; }
.err-text { color: #b3261e; font-weight: 600; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.pill.ok { background: #d9f2e1; color: #0d5a27; }
.pill.off { background: #eee; color: #555; }

/* ---------------------------------------------------------------- tables */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; font-weight: 600; padding: 6px 8px; border-bottom: 1.5px solid var(--tint); }
td { padding: 8px; border-bottom: 1px solid var(--tint); vertical-align: middle; }
td.num, th.num { text-align: right; }
td.num-cell { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.act { white-space: nowrap; text-align: right; }
td.act .btn { margin-left: 4px; }
table.results tr.prize td { background: var(--tint); }
table.results tr.prize td:first-child { font-weight: 700; }
table.results tr.cut td { border-top: 3px dashed var(--primary); }
table.results td.num { position: relative; min-width: 110px; }
table.results .bar { position: absolute; right: 44px; top: 50%; height: 10px; transform: translateY(-50%); background: var(--primary); opacity: .25; border-radius: 3px; max-width: calc(100% - 52px); }
table.results td.num b { position: relative; font-size: 18px; font-variant-numeric: tabular-nums; }
table.sheets tr.deleted td { text-decoration: line-through; opacity: .5; }
table.sheets tr.deleted td.act { text-decoration: none; opacity: 1; }
.row-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.big-stat { font-size: 18px; font-weight: 600; margin: 16px 0 0; }
.status-line { display: flex; gap: 10px; align-items: center; }

/* ---------------------------------------------------------------- share / QR */
.qr-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; }
@media (max-width: 560px) { .qr-wrap { grid-template-columns: 1fr; } .qr { max-width: 240px; } }
.qr { background: #fff; border-radius: 8px; padding: 6px; border: 1px solid var(--tint); min-height: 120px; }
.qr svg { display: block; }
.label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin: 10px 0 2px; font-weight: 600; }
.url { margin: 0 0 6px; word-break: break-all; font-weight: 600; }
.url.small { font-weight: 400; font-size: 13px; opacity: .75; }
.qr-overlay { position: fixed; inset: 0; background: #fff; color: #000; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: zoom-out; padding: 20px; }
.qr-big { width: min(78vh, 88vw); }
.qr-big-url { font-size: clamp(18px, 3.2vw, 40px); font-weight: 700; margin: 0; word-break: break-all; text-align: center; font-family: 'SpaceGrotesk', sans-serif; }
.qr-big-title { font-size: clamp(14px, 2vw, 24px); margin: 0; opacity: .7; }

/* ---------------------------------------------------------------- disabled posters (admin) */
.dis-grid, .num-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.dis-grid .num, .num-grid .num {
  min-height: 42px; font: inherit; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums;
  color: var(--fg); background: var(--bg); border: 1.5px solid var(--tint); border-radius: 8px; cursor: pointer;
  filter: contrast(1.15);
}
.dis-grid .num:hover { border-color: var(--fg); }
.dis-grid .num.off { background: repeating-linear-gradient(135deg, #eee 0 6px, #ddd 6px 12px); color: #999; text-decoration: line-through; border-color: #ccc; }

/* ---------------------------------------------------------------- the counting page */
main.count { max-width: 760px; margin: 0 auto; padding: 10px 14px 120px; }
.count-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 8px; }
.who { opacity: .7; }
.corner { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-variant-numeric: tabular-nums; opacity: .75; white-space: nowrap; }
.corner .dot { width: 8px; height: 8px; border-radius: 50%; background: #1fa34a; display: inline-block; }
.corner.offline .dot { background: #d93025; }
.corner.offline::after { content: attr(data-offline); color: #b3261e; font-weight: 600; max-width: 200px; white-space: normal; }
.pick-title { font-size: 18px; margin: 4px 0 0; }
#hint { margin-top: 2px; }

/* phone: one column per digit */
.picker.phone { display: flex; justify-content: center; gap: 14px; margin: 6px 0 10px; }
.digit-col { display: flex; flex-direction: column; gap: 3px; }
.digit-head { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; opacity: .65; margin-bottom: 1px; }
.digit {
  width: 84px; height: 34px; font: inherit; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--fg); background: var(--bg); border: 1.5px solid var(--fg); border-radius: 10px; cursor: pointer;
  touch-action: manipulation;
}
.digit.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.digit:disabled { opacity: .18; cursor: default; }
@media (max-height: 700px) { .digit { height: 30px; font-size: 18px; } .digit-col { gap: 2px; } .mode-phone .slot { min-height: 60px; } .mode-phone .slot .big { font-size: 42px; } }

/* the header folds away on phones (after 4 s or the first digit); ▾ brings it back */
.hdr-toggle, .mini-title { display: none; }
.mode-phone .hdr-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; flex: none;
  border: 1.5px solid var(--tint); border-radius: 6px; background: var(--bg); color: var(--fg); font-size: 13px; cursor: pointer; filter: contrast(1.15); }
.mode-phone .count-top .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-phone.hdr-collapsed .band,
.mode-phone.hdr-collapsed .count-top .who,
.mode-phone.hdr-collapsed .pick-title,
.mode-phone.hdr-collapsed #hint { display: none; }
.mode-phone.hdr-collapsed .count-top { border-top: 5px solid var(--band); margin: -10px -14px 6px; padding: 6px 14px 0; }
.mode-phone.hdr-collapsed .mini-title { display: block; flex: 1; min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-phone .picker.phone { margin-top: 4px; }

/* laptop: all numbers */
.picker.desk { margin: 8px 0 12px; }
.num-grid .num.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.num-grid .num.off { opacity: .2; text-decoration: line-through; cursor: default; }
.num-grid .num:disabled:not(.off) { opacity: .35; cursor: default; }
.num-grid .num:hover:not(:disabled) { border-color: var(--fg); }

/* the numbers of this sheet, large */
.chosen { display: flex; gap: 12px; justify-content: center; margin: 6px 0 4px; }
.slot { position: relative; flex: 1 1 0; max-width: 200px; min-height: 92px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--tint); border-radius: 14px; filter: contrast(1.1); }
.slot .big { font-family: 'SpaceGrotesk', 'Inter', sans-serif; font-size: 64px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; opacity: .25; }
.slot.full { border: 2px solid var(--primary); background: var(--tint); filter: none; }
.slot.full .big { opacity: 1; }
.slot.next { border-color: var(--primary); }
.slot.next.typing .big { opacity: .6; }
.slot-label { position: absolute; top: 4px; left: 9px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; opacity: .55; }
.slot .rm { position: absolute; top: 4px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--fg); font-size: 22px; cursor: pointer; opacity: .55; }
.slot .rm:hover { opacity: 1; background: var(--bg); }
.chosen.bump .slot.full:last-of-type { animation: bump .25s ease-out; }
@keyframes bump { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (max-width: 420px) { .slot { min-height: 76px; } .slot .big { font-size: 50px; } }
.mode-desk .slot { min-height: 120px; } .mode-desk .slot .big { font-size: 84px; }

.msg { min-height: 22px; margin: 4px 0; text-align: center; font-weight: 600; font-size: 14px; }
.msg.err { color: #b3261e; }
.pending { text-align: center; font-size: 14px; font-weight: 600; color: #8a5a00; margin: 4px 0; }

.last-sent { flex: 1 1 100%; order: -2; margin: 0; }
.last-sent:empty { display: none; }
.actions .pending { flex: 1 1 100%; order: -2; }
/* after counting: the sheet number large on the left — it goes on the paper */
.sent { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: #e6f5ea; color: #0b4a22; }
.sent .sent-num { flex: none; min-width: 64px; padding: 2px 8px; text-align: center; border-radius: 8px; background: #0b4a22; color: #fff;
                  font-family: 'SpaceGrotesk', 'Inter', sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sent .sent-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sent .sent-what { font-weight: 700; font-variant-numeric: tabular-nums; }
.sent .sent-write { font-size: 13px; }
.sent .btn { flex: none; color: #0b4a22; border-color: #0b4a22; background: transparent; }
.sent.sending { background: #fff4d6; color: #6b4b00; flex-direction: column; align-items: flex-start; gap: 0; }
.sent.sending .sent-title { font-weight: 700; }
.sent.undone { background: #eee; color: #555; }
.sent.undone .sent-num { background: #999; text-decoration: line-through; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }
.actions #btnCount { flex: 1 1 100%; order: -1; }
@media (max-width: 700px) {
  /* phone: the buttons stay at the bottom of the screen */
  .mode-phone .actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--tint); box-shadow: 0 -4px 14px rgba(0,0,0,.06);
  }
  .mode-phone .actions { gap: 6px; padding-top: 8px; }
  .mode-phone .actions .btn:not(.big) { flex: 1 1 0; min-height: 34px; font-size: 13px; padding: 4px 6px; }
  .mode-phone .actions .btn.big { min-height: 46px; font-size: 17px; }
  .mode-phone main.count { padding-bottom: 190px; }
  .mode-phone .sent { padding: 6px 10px; gap: 10px; }
  .mode-phone .sent .sent-num { font-size: 26px; min-width: 58px; }
  .mode-phone .sent .sent-what { font-size: 14px; }
  .mode-phone .sent .sent-write { font-size: 12px; }
  .mode-phone .actions .sent .btn { flex: none; min-height: 32px; padding: 2px 12px; }   /* not stretched like the others */
  .mode-phone .msg { min-height: 18px; margin: 2px 0; }
  .mode-phone .slot-label { font-size: 10px; top: 3px; left: 7px; }
}
.recent-box { margin: 18px 0 6px; font-size: 14px; }
.recent-box summary { cursor: pointer; opacity: .75; }
.recent { margin: 8px 0 0; padding-left: 0; list-style: none; }
.recent li { padding: 4px 0; border-bottom: 1px solid var(--tint); font-variant-numeric: tabular-nums; }
.recent li b { display: inline-block; min-width: 64px; }
.recent li.undone { text-decoration: line-through; opacity: .55; }
.recent li.rejected { color: #b3261e; }
.foot-row { text-align: center; margin-top: 18px; opacity: .9; }
.closed-box { text-align: center; margin-top: 30px; }

/* ---------------------------------------------------------------- optional poster list */
#plText { font-family: ui-monospace, Consolas, monospace; font-size: 13px; tab-size: 6; white-space: pre; overflow-x: auto; }
.pl-preview { margin: 10px 0 14px; font-size: 14px; }
.pl-preview p { margin: 4px 0; }
.pl-table td, .pl-table th { padding: 5px 8px; font-size: 14px; }
details.card > summary .muted { margin-left: 8px; }

/* ---------------------------------------------------------------- print */
.print h1 { font-size: 28px; }
@media print {
  .band-nav, .noprint, .langs { display: none !important; }
  body { font-size: 12pt; }
  .look-counting .band { border-top-width: 4px; }
  table.results .bar { display: none; }
  main { padding: 0; }
}