* { box-sizing: border-box; }
:root { --in: #1e7d3a; --in-bg: #e3f4e7; --out: #b42318; --out-bg: #fbe4e1; --dis: #a15c00; --dis-bg: #fff1cc; --none-bg: #f1f1ef; --accent: #2d5be3; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1d1d1f; background: #ecebe8; }
main { max-width: 1000px; margin: 0 auto; padding: 24px 16px 64px; }
main.narrow { max-width: 480px; padding-top: 64px; }
h1 { margin: 0 0 4px; font-size: 1.6rem; }
.sub { margin: 4px 0 16px; color: #555; font-size: .95rem; }
.card { background: #fff; border-radius: 10px; padding: 24px; box-shadow: 0 1px 3px #0002; }
label { display: block; font-weight: 600; }
input[type=password] { display: block; width: 100%; margin: 6px 0 18px; padding: 10px; font: inherit; border: 1px solid #bbb; border-radius: 6px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; margin-bottom: 6px; }
.names { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.names input { position: absolute; opacity: 0; }
.names span { display: block; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-weight: 500; cursor: pointer; }
.names input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.names input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.error { color: var(--out); min-height: 1.5em; }
button, .button { font: inherit; font-weight: 600; padding: 8px 18px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
.button.disabled { background: #bbb; cursor: not-allowed; }
button.ghost { background: none; color: var(--accent); padding: 8px 10px; }

.bar { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid #ddd; }
.bar-inner { max-width: 1000px; margin: 0 auto; padding: 8px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bar-inner > strong { margin-right: auto; }
.progress { font-variant-numeric: tabular-nums; color: #444; }

/* The "print-out" */
.doc { background: #fff; padding: 40px 48px; box-shadow: 0 1px 4px #0003; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.45; }
.doc h2 { font-size: 1.35rem; margin: 32px 0 8px; color: #104f75; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 1.1rem; margin: 28px 0 8px; color: #104f75; }
.doc h4 { font-size: 1rem; margin: 18px 0 6px; }
.doc .note { margin: 8px 0; color: #333; }
.doc u { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.item { display: grid; grid-template-columns: 1fr 190px; gap: 16px; padding: 6px 8px; border-radius: 4px; border-left: 4px solid transparent; }
.item + .item { border-top: 1px solid #f0f0f0; }
.item .text { display: flex; gap: 10px; }
.item.depth1 .text { padding-left: 32px; }
.bullet { flex: none; width: 12px; color: #444; }
.choices { display: flex; gap: 8px; }
.choices button { width: 44px; height: 36px; padding: 0; font-size: 1.2rem; background: #fff; border: 2px solid #ccc; color: #bbb; border-radius: 6px; }
.choices .tick[aria-pressed=true] { background: var(--in); border-color: var(--in); color: #fff; }
.choices .cross[aria-pressed=true] { background: var(--out); border-color: var(--out); color: #fff; }
.choices .tick:hover { border-color: var(--in); color: var(--in); }
.choices .cross:hover { border-color: var(--out); color: var(--out); }
.choices button[aria-pressed=true]:hover { color: #fff; }
.margin details { margin-top: 4px; font-family: system-ui, sans-serif; font-size: .8rem; }
.margin summary { cursor: pointer; color: var(--accent); }
.margin textarea { width: 100%; margin-top: 4px; font: inherit; padding: 4px 6px; border: 1px solid #bbb; border-radius: 4px; }
.item.unvoted { border-left-color: #e5e5e5; }
.item.saving { opacity: .7; }
.item.failed { border-left-color: var(--out); }
.end { text-align: right; }

/* Results */
.results .item { grid-template-columns: 1fr 240px; margin: 2px 0; }
.st-in { background: var(--in-bg); border-left-color: var(--in); }
.st-out { background: var(--out-bg); border-left-color: var(--out); }
.st-dispute { background: var(--dis-bg); border-left-color: var(--dis); }
.st-none { background: var(--none-bg); }
.tally { font-weight: 700; font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.who, .comments { font-family: system-ui, sans-serif; font-size: .78rem; color: #333; }
.comments { margin: 4px 0 0; padding-left: 16px; }
span.in { color: var(--in); } span.out { color: var(--out); }
.key { padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.key.in { background: var(--in-bg); } .key.out { background: var(--out-bg); } .key.dispute { background: var(--dis-bg); color: var(--dis); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: #f1f1ef; color: #333; padding: 5px 10px; font-weight: 500; font-size: .85rem; }
.chip[aria-pressed=true] { outline: 2px solid #333; }
.chip.in { background: var(--in-bg); } .chip.out { background: var(--out-bg); } .chip.dispute { background: var(--dis-bg); }
.doc[data-filter=in] .item:not(.st-in), .doc[data-filter=out] .item:not(.st-out),
.doc[data-filter=dispute] .item:not(.st-dispute), .doc[data-filter]:not([data-filter=all]) .note { display: none; }

@media (max-width: 700px) {
  .doc { padding: 20px 14px; }
  .item, .results .item { grid-template-columns: 1fr; gap: 6px; }
  .item.depth1 .text { padding-left: 16px; }
  .names { grid-template-columns: repeat(2, 1fr); }
}

/* Partial votes */
:root { --part: #0f766e; --part-bg: #dcf1ee; }
.choices .part { width: auto; padding: 0 10px; font-size: .85rem; font-weight: 700; }
.choices .part[aria-pressed=true] { background: var(--part); border-color: var(--part); color: #fff; }
.choices .part:hover { border-color: var(--part); color: var(--part); }
.hint { display: none; margin: 4px 0 0; font: .78rem system-ui, sans-serif; color: var(--part); }
.item.partial .hint { display: block; }
.item.partial .words { cursor: pointer; user-select: none; -webkit-user-select: none; }
.item.partial .w { touch-action: none; }
.item.partial .w:hover { outline: 1px dashed var(--part); }
.w.keep { background: #b9e6c5; box-shadow: 0 0 0 1px #b9e6c5; border-radius: 2px; }
.item.partial.unvoted .words { color: #555; }
.item.na { color: #888; font-style: italic; }
.item.na .margin { display: none; }
.results .item.na { background: none; }
.st-part { background: var(--part-bg); border-left-color: var(--part); }
.heat .w { background: rgb(30 125 58 / calc(var(--f) * .35)); border-radius: 2px; }
.heat .w.strong { background: #9fdcb0; }
span.partial { color: var(--part); }
.voter { all: unset; cursor: pointer; text-decoration: underline dotted; }
.voter[aria-pressed=true] { font-weight: 700; color: var(--part); }
.key.part { background: var(--part-bg); color: var(--part); }
.chip.part { background: var(--part-bg); }
.doc[data-filter=part] .item:not(.st-part) { display: none; }
.doc[data-filter]:not([data-filter=all]) .item.na { display: none; }