/* Layout: the guild banner floats on a night-sky page. On a laptop the front
   page lays polls out side by side (big polls take a whole row with their
   options in columns), so everything fits on one screen; phones stack them.
   Each option is one slim row whose background fills up with its share of the
   votes; options named after a WoW class or faction take its colour. */
:root {
  color-scheme: dark;

  --night: #0b1020;
  --night-glow: #1a2a57;
  --panel: #111930;
  --panel-raised: #18223f;
  --well: #070b17;
  --tray: #080d1b;
  --slot: #131b35;
  --slot-top: #19244a;
  --rim: #2a3961;
  --rim-strong: #3d5189;
  --gold: #f4c95d;
  --gold-bright: #ffe39a;
  --gold-deep: #9c7128;
  --gold-ink: #1d1404;
  --parchment: #ece3c8;
  --mist: #9ca8c6;
  --royal: #4a78e8;
  --danger: #ff7a6b;
  --success: #74d86b;
  --legendary: #ff9a2e;
  --epic: #c58cff;

  /* Class and faction colours, nudged lighter where the originals are too dark to read. */
  --c-deathknight: #ee4f66;
  --c-demonhunter: #c25ee8;
  --c-druid: #ff7c0a;
  --c-evoker: #3fae96;
  --c-hunter: #aad372;
  --c-mage: #3fc7eb;
  --c-monk: #00ff98;
  --c-paladin: #f48cba;
  --c-priest: #ffffff;
  --c-rogue: #fff468;
  --c-shaman: #2e8cff;
  --c-warlock: #8788ee;
  --c-warrior: #c69b6d;
  --c-alliance: #4f8cff;
  --c-horde: #ff5a4a;

  --font-display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --font-body: "Alegreya Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-caps: "Alegreya Sans SC", "Alegreya Sans", ui-sans-serif, system-ui, sans-serif;

  --radius: 6px;
  --col: 44rem;
  --wide-col: 78rem;
  --gutter: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--night);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--parchment);
  background: radial-gradient(70rem 34rem at 50% 0, var(--night-glow), transparent 72%) no-repeat, var(--night);
  font: 400 1.0625rem/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Masthead ---------------------------------------------------------------- */

.masthead {
  position: relative;
  padding-top: env(safe-area-inset-top, 0px);
}

.whoami {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-width: var(--col);
  min-height: 2.9rem;
  margin: 0 auto;
  padding: 0.55rem max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
}

.whoami:empty {
  min-height: 0.75rem;
  padding-top: 0;
}

.whoami-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mast-link {
  padding: 0.3rem 0.1rem;
  background: none;
  border: 0;
  color: var(--mist);
  font: 700 0.95rem/1 var(--font-caps);
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mast-link:hover {
  color: var(--gold-bright);
}

.mast-name {
  cursor: pointer;
}

.mast-name:hover {
  color: var(--gold-bright);
}

.banner-link {
  display: block;
  width: min(100%, 56rem);
  margin: 0 auto;
  border-radius: var(--radius);
}

body[data-page="inner"] .banner-link {
  width: min(72%, 26rem);
}

.banner {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
    linear-gradient(to bottom, transparent, #000 8%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
    linear-gradient(to bottom, transparent, #000 8%, #000 80%, transparent);
  mask-composite: intersect;
}

/* On a laptop the banner sizes to the screen height, and your nickname moves
   up beside it, so the polls start higher. */
@media (min-width: 60rem) {
  .whoami,
  .whoami:empty {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 0.85rem);
    right: 1.5rem;
    z-index: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .banner-link,
  body[data-page="inner"] .banner-link {
    width: fit-content;
    margin-top: 0.5rem;
  }

  .banner {
    width: auto;
    height: clamp(7rem, 19vh, 15rem);
  }

  body[data-page="inner"] .banner {
    height: clamp(6rem, 13vh, 9rem);
  }
}

/* Page frame ------------------------------------------------------------- */

.view {
  display: block;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0.75rem max(var(--gutter), env(safe-area-inset-right, 0px))
    calc(4rem + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  outline: none;
}

body[data-page="home"] .view {
  max-width: var(--wide-col);
}

.big-title {
  font: 800 2.5rem/1.05 var(--font-display);
  letter-spacing: 0.03em;
  color: var(--gold);
  text-shadow: 0 2px 0 rgb(0 0 0 / 0.6), 0 0 24px rgb(244 201 93 / 0.18);
}

.lede {
  max-width: 60ch;
  margin-top: 0.35rem;
  color: var(--mist);
}

.label {
  font: 700 0.92rem/1.2 var(--font-caps);
  letter-spacing: 0.07em;
  color: var(--mist);
}

.meta {
  color: var(--mist);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font: 700 0.95rem/1 var(--font-caps);
  letter-spacing: 0.08em;
  color: var(--mist);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}

.stack {
  display: grid;
  gap: 0.5rem;
}

.loading {
  padding-block: 1rem;
  color: var(--mist);
  font: 700 1rem/1.2 var(--font-caps);
  letter-spacing: 0.06em;
}

.error {
  color: var(--danger);
  font-weight: 700;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0;
  color: var(--mist);
  font: 700 0.95rem/1 var(--font-caps);
  letter-spacing: 0.06em;
  text-decoration: none;
}

.back:hover {
  color: var(--gold-bright);
}

.back.as-button {
  justify-self: start;
  background: none;
  border: 0;
  cursor: pointer;
}

.empty {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 2.25rem 1.25rem;
  text-align: center;
  color: var(--mist);
  border: 1px dashed var(--rim-strong);
  border-radius: var(--radius);
}

.empty-title {
  font: 800 1.5rem/1.1 var(--font-display);
  color: var(--gold);
}

.noscript {
  max-width: var(--col);
  margin: 1rem auto;
  padding-inline: var(--gutter);
}

/* Buttons and fields ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  color: var(--parchment);
  background: linear-gradient(180deg, #1f2b4f, #141c35);
  border: 1px solid var(--rim-strong);
  border-radius: 5px;
  font: 800 1.02rem/1 var(--font-caps);
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover {
  color: var(--gold-bright);
  border-color: var(--gold-deep);
}

.btn.primary {
  color: var(--gold-ink);
  background: linear-gradient(180deg, #ffe08a 0%, #e9b450 50%, #c98f2c 100%);
  border-color: #7a5512;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 2px 12px rgb(244 201 93 / 0.2);
}

.btn.primary:hover {
  color: var(--gold-ink);
  filter: brightness(1.07);
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
}

.btn.ghost:hover {
  border-color: var(--rim);
}

.btn.danger {
  color: #fff1ec;
  background: linear-gradient(180deg, #a3332a, #74201a);
  border-color: #c4473b;
}

.btn.danger-text {
  color: var(--danger);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.btn.big {
  width: 100%;
  min-height: 3.3rem;
  font-size: 1.2rem;
}

.input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.65rem 0.8rem;
  color: var(--parchment);
  background: var(--well);
  border: 1px solid var(--rim-strong);
  border-radius: 5px;
  font: 400 1.0625rem/1.4 var(--font-body);
}

.input::placeholder {
  color: var(--mist);
  opacity: 0.75;
}

.input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(244 201 93 / 0.22);
}

textarea.input {
  min-height: 5.5rem;
  resize: vertical;
}

.input-row {
  display: flex;
  gap: 0.5rem;
}

.input-row .input {
  flex: 1;
  min-width: 0;
}

/* Badges and nameplates --------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  font: 800 0.82rem/1 var(--font-caps);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.badge.open {
  color: var(--success);
}

.badge.closed {
  color: var(--mist);
}

.badge.winner {
  color: var(--legendary);
}

.badge.tie {
  color: var(--epic);
}

.nameplate {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.2rem 0.55rem;
  color: var(--parchment);
  background: var(--well);
  border: 1px solid var(--rim);
  border-radius: 4px;
  font: 700 0.95rem/1.25 var(--font-body);
  overflow-wrap: anywhere;
}

.nameplate.is-me {
  color: var(--gold);
  border-color: var(--gold-deep);
}

.nameplate.waiting {
  color: var(--mist);
  background: transparent;
  border-style: dashed;
}

.nameplate.big {
  padding: 0.55rem 0.95rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.nameplate.big:hover {
  color: var(--gold-bright);
  border-color: var(--gold-deep);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

[data-hue="deathknight"] { --hue: var(--c-deathknight); }
[data-hue="demonhunter"] { --hue: var(--c-demonhunter); }
[data-hue="druid"] { --hue: var(--c-druid); }
[data-hue="evoker"] { --hue: var(--c-evoker); }
[data-hue="hunter"] { --hue: var(--c-hunter); }
[data-hue="mage"] { --hue: var(--c-mage); }
[data-hue="monk"] { --hue: var(--c-monk); }
[data-hue="paladin"] { --hue: var(--c-paladin); }
[data-hue="priest"] { --hue: var(--c-priest); }
[data-hue="rogue"] { --hue: var(--c-rogue); }
[data-hue="shaman"] { --hue: var(--c-shaman); }
[data-hue="warlock"] { --hue: var(--c-warlock); }
[data-hue="warrior"] { --hue: var(--c-warrior); }
[data-hue="alliance"] { --hue: var(--c-alliance); }
[data-hue="horde"] { --hue: var(--c-horde); }

/* Options: one slim row each ---------------------------------------------- */

/* The options sit in a tray sunk into the panel, and each option is a slot
   raised out of it, so a poll reads as layers: panel, tray, options. */
.tray {
  padding: 0.5rem;
  background: var(--tray);
  border: 1px solid rgb(0 0 0 / 0.5);
  border-radius: 7px;
  box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.5), 0 1px 0 rgb(255 255 255 / 0.05);
}

/* Every row is as tall as the tallest, so the bars line up even when one
   option's names take two lines. */
.options {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 0.3rem;
}

.option {
  --fill-color: var(--royal);
  --pad-y: 0.3rem;
  --pad-x: 0.7rem;
  position: relative;
  isolation: isolate;
  display: flex;
  align-content: center;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: clamp(2.2rem, 4.6vh, 2.75rem);
  padding: var(--pad-y) var(--pad-x);
  overflow: hidden;
  color: var(--parchment);
  text-align: left;
  background: linear-gradient(180deg, var(--slot-top), var(--slot));
  border: 1px solid var(--rim);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 1px 3px rgb(0 0 0 / 0.5);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.option.is-lead {
  --fill-color: var(--gold);
}

.option[data-hue] {
  --fill-color: var(--hue);
}

.option.is-open:not(.is-mine):hover {
  border-color: var(--rim-strong);
}

/* Your pick gets a thicker gold border rather than an inner ring, so the bar
   (clipped to the inside of the border) can't paint over half of it. The
   padding gives back the extra pixel so nothing shifts when you vote. */
.option.is-mine {
  padding: calc(var(--pad-y) - 1px) calc(var(--pad-x) - 1px);
  border: 2px solid var(--gold);
  box-shadow: 0 0 14px rgb(244 201 93 / 0.18);
}

/* The share of votes: a tint across the row with a solid edge at the bottom,
   like a bar that has grown into the row. It sits behind everything else. */
.option > .fill {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: var(--pct, 0%);
  background: color-mix(in srgb, var(--fill-color) 28%, var(--well));
  border-bottom: 3px solid var(--fill-color);
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Never narrower than its longest word, so "Alliance" can't break into pieces. */
.option-main {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
}

button.option-main {
  cursor: pointer;
}

/* The vote button covers the whole row, so tapping anywhere on it votes. */
button.option-main::after {
  content: "";
  position: absolute;
  inset: 0;
}

button.option-main:focus-visible {
  outline: none;
}

.option:has(> button.option-main:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.option-label {
  flex: 0 1 auto;
  font: 700 1.05rem/1.2 var(--font-body);
  overflow-wrap: break-word;
}

.option[data-hue] .option-label {
  color: var(--hue);
}

.voters {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
}

.voters:empty {
  display: none;
}

.voters .nameplate {
  padding: 0.05rem 0.4rem;
  font-size: 0.82rem;
}

.option-count {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 0.4rem;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.option-count b {
  font: 800 1.15rem/1 var(--font-display);
}

.is-lead .option-count b {
  color: var(--gold);
}

.option-count span {
  min-width: 2.4rem;
  color: var(--mist);
  font-size: 0.88rem;
  text-align: right;
}

.tick {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  background: var(--well);
  border: 2px solid var(--rim-strong);
}

.tick.dot {
  border-radius: 50%;
}

.tick.box {
  border-radius: 4px;
}

.is-mine .tick {
  background: var(--gold);
  border-color: var(--gold);
}

.is-mine .tick.dot::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  background: var(--gold-ink);
  border-radius: 50%;
}

.is-mine .tick.box::after {
  content: "";
  width: 0.28rem;
  height: 0.56rem;
  border: solid var(--gold-ink);
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* A poll with a 2nd pick: a labelled tray of options for each pick. */
.pick {
  display: grid;
  gap: 0.4rem;
}

.pick-label {
  padding-left: 0.15rem;
  font-size: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
}

.pick-hint {
  font: italic 400 0.9rem/1.2 var(--font-body);
  letter-spacing: 0;
}

/* Nobody picked it: the "0 0%" fades back so the real counts stand out. */
.option.is-empty .option-count {
  opacity: 0.4;
}

/* The 2nd pick: chips that wrap, lighter than the 1st pick's rows. No bars,
   no percentages, and a count only once someone has picked it. */
.options.chips,
.poll-panel.wide .options.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.chips .option {
  width: auto;
  min-height: 0;
  gap: 0.45rem;
  --pad-y: 0.25rem;
}

.chips .option > .fill,
.chips .option-count span,
.chips .is-empty .option-count,
.chips .option:not(.is-mine) .tick {
  display: none;
}

.chips .option-label {
  font-size: 0.98rem;
}

.chips .option-count {
  margin-left: 0;
}

.chips .option-count b {
  font-size: 1rem;
}

.chips .tick {
  width: 0.95rem;
  height: 0.95rem;
}

/* Names stay inside the chip, even on a phone. */
.chips .voters {
  flex-basis: auto;
  order: 0;
  padding-left: 0;
}

/* A 2nd pick you can't take: it's your 1st pick, or you have none yet. */
.chips .option.is-locked .option-label {
  opacity: 0.4;
}

/* "No 2nd pick" isn't a class, so its chip is drawn differently, until it's
   your pick and the gold ring says enough. */
.chips .option.is-none:not(.is-mine) {
  border-style: dashed;
}

/* Home: every poll in full ------------------------------------------------ */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.page-head-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
}

.page-head-text .big-title {
  font-size: 2.1rem;
}

.page-head-text .lede {
  margin-top: 0;
}

/* Two columns when there is room. The page already puts the polls in reading
   order (see layoutOrder in app.js), and a big poll takes a whole row. */
.poll-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  align-items: start;
  gap: 1rem;
}

.poll-panel {
  --pad-x: 1rem;
  --pad-bottom: 0.95rem;
  position: relative;
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.85rem var(--pad-x) var(--pad-bottom);
  background: linear-gradient(180deg, var(--panel-raised), var(--panel));
  border: 1px solid var(--rim);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 12px 32px rgb(0 0 0 / 0.28);
}

.poll-panel.wide {
  grid-column: 1 / -1;
}

.poll-panel.wide .options {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 0.35rem 0.5rem;
}

.panel-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}

.panel-top .meta {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
}

.panel-link {
  flex: none;
  margin-left: auto;
  padding: 0.2rem 0;
  color: var(--mist);
  font: 700 0.92rem/1 var(--font-caps);
  letter-spacing: 0.05em;
  text-decoration: none;
}

.panel-link:hover {
  color: var(--gold-bright);
}

.panel-q {
  font: 700 1.3rem/1.2 var(--font-display);
  color: var(--gold);
  text-shadow: 0 2px 0 rgb(0 0 0 / 0.5);
  overflow-wrap: anywhere;
}

.panel-q a {
  color: inherit;
  text-decoration: none;
}

.panel-q a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold-deep);
  text-underline-offset: 5px;
}

.panel-details {
  max-width: 70ch;
  margin-top: -0.2rem;
  color: var(--mist);
  font-size: 0.95rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.poll-panel .options {
  margin-top: 0.15rem;
}

.closed-section {
  display: grid;
  gap: 1rem;
  margin-top: 2.25rem;
}

/* The way into the archive, at the foot of the front page. */
.archive-link {
  margin-top: 2.25rem;
  text-decoration: none;
}

.archive-link:hover {
  color: var(--gold-bright);
}

.archive > .back {
  margin-bottom: 0.5rem;
}

/* Who still hasn't voted: a darker strip across the bottom of the panel. */
.turnout.compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  margin: 0.25rem calc(-1 * var(--pad-x)) calc(-1 * var(--pad-bottom));
  padding: 0.6rem var(--pad-x) 0.65rem;
  background: rgb(0 0 0 / 0.22);
  border-top: 1px solid var(--rim);
  border-radius: 0 0 7px 7px;
}

.turnout.compact .stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
}

.turnout.compact .label {
  font-size: 0.85rem;
}

.turnout.compact .tags {
  gap: 0.3rem;
}

.turnout.compact .nameplate {
  padding: 0.05rem 0.4rem;
  font-size: 0.82rem;
}

/* Poll page --------------------------------------------------------------- */

.poll-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
}

.poll-q {
  margin-top: 0.85rem;
  font: 700 1.85rem/1.2 var(--font-display);
  color: var(--gold);
  text-shadow: 0 2px 0 rgb(0 0 0 / 0.5);
  overflow-wrap: anywhere;
}

.poll-details {
  max-width: 62ch;
  margin-top: 0.7rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.poll-rules {
  margin-top: 0.6rem;
}

.hint {
  margin-top: 1.2rem;
  color: var(--mist);
  font-style: italic;
}

.poll > .options,
.poll > .pick {
  margin-top: 0.6rem;
}

.poll > .pick + .pick {
  margin-top: 1.1rem;
}

.suggest {
  margin-top: 1.1rem;
}

.turnout {
  display: grid;
  gap: 1.1rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rim);
}

.poll-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

/* The password step before closing, reopening or deleting a poll. */
.confirm {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  padding: 0.9rem 1rem;
  background: rgb(7 11 23 / 0.6);
  border: 1px solid var(--rim-strong);
  border-radius: var(--radius);
}

.confirm.danger {
  background: rgb(255 122 107 / 0.06);
  border-color: var(--danger);
}

.confirm .label {
  color: var(--parchment);
  font-size: 1rem;
}

.confirm-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.share-link {
  margin-top: 0.25rem;
}

/* New poll ---------------------------------------------------------------- */

.form {
  display: grid;
  gap: 1.6rem;
  margin-top: 1.25rem;
}

.fieldset {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fieldset > legend {
  margin-bottom: 0.6rem;
  padding: 0;
}

.option-inputs {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: option;
}

.option-inputs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  counter-increment: option;
}

.option-inputs li::before {
  content: counter(option);
  flex: none;
  width: 1.4rem;
  color: var(--gold-deep);
  font: 800 1.1rem/1 var(--font-display);
  text-align: right;
}

.icon-btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--mist);
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.icon-btn:hover {
  color: var(--danger);
  border-color: var(--rim);
}

.add-option {
  justify-self: start;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.5rem 0;
  cursor: pointer;
}

.check input {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.1rem 0 0;
  background: var(--well);
  border: 2px solid var(--rim-strong);
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.check input:checked {
  background: var(--gold);
  border-color: var(--gold);
}

.check input:checked::after {
  content: "";
  width: 0.34rem;
  height: 0.66rem;
  border: solid var(--gold-ink);
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-1px) rotate(45deg);
}

.check-text {
  display: grid;
  gap: 0.1rem;
}

.check-text span {
  color: var(--mist);
  font-size: 0.95rem;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.segment {
  position: relative;
}

.segment input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segment span {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0 0.95rem;
  color: var(--parchment);
  background: var(--well);
  border: 1px solid var(--rim-strong);
  border-radius: 5px;
  font: 700 1rem/1 var(--font-caps);
  letter-spacing: 0.03em;
}

.segment input:checked + span {
  color: var(--gold-ink);
  background: linear-gradient(180deg, #ffe08a, #c98f2c);
  border-color: #7a5512;
}

.segment input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Countdowns -------------------------------------------------------------- */

/* Gold while there's time, orange on the last day, red in the last hour. */
.countdown,
.fuse {
  --tone: var(--gold);
}

.is-soon {
  --tone: var(--legendary);
}

.is-urgent {
  --tone: var(--danger);
}

/* The chip beside a poll's status on the front page. */
.countdown.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem 0.2rem 0.4rem;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 60%, transparent);
  border-radius: 4px;
  font: 800 0.9rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.countdown.chip.is-urgent {
  animation: urgent-pulse 1.6s ease-in-out infinite;
}

.hourglass {
  flex: none;
  width: 0.95em;
  height: 0.95em;
  background: currentColor;
  -webkit-mask: url("/hourglass.svg") center / contain no-repeat;
  mask: url("/hourglass.svg") center / contain no-repeat;
}

/* In the last hour the hourglass keeps turning over. */
.is-urgent .hourglass {
  animation: hourglass-turn 2.4s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}

.clock {
  display: inline-flex;
  align-items: center;
}

.clock .sep {
  white-space: pre;
}

/* One digit: a window one line tall. A changed digit rolls down into it,
   pushing the one it replaces out the bottom, and settles with a little bounce. */
.digit {
  display: inline-block;
  min-width: 1ch;
  text-align: center;
  overflow-x: visible;
  overflow-y: clip;
}

.digit-face {
  position: relative;
  display: block;
}

.digit.roll .digit-face {
  animation: digit-roll 0.6s both;
  animation-timing-function: cubic-bezier(0.3, 1.35, 0.5, 1);
  animation-timing-function: linear(0, 0.086, 0.279, 0.502, 0.706, 0.868, 0.981, 1.048, 1.078, 1.083, 1.073, 1.055,
      1.037, 1.021, 1.008, 1, 0.995, 0.993, 0.993, 0.994, 0.996, 0.997, 0.999, 1, 1);
}

.digit.roll .digit-face::after {
  content: attr(data-was);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  animation: digit-leave 0.35s ease-in forwards;
}

/* The big clock on a poll's own page. */
.countdown.card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  margin-top: 1.2rem;
  padding: 0.75rem 1.1rem 1rem;
  background: linear-gradient(180deg, var(--panel-raised), var(--panel));
  border: 1px solid var(--rim);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 12px 32px rgb(0 0 0 / 0.28);
}

.countdown.card .label {
  font-size: 0.85rem;
}

.units {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.unit {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

.unit .clock,
.colon {
  font: 800 2.4rem/1 var(--font-display);
}

/* The glow is a filter on the whole clock: a text-shadow would be cut off by
   each digit's window. */
.unit .clock {
  color: var(--tone);
  text-shadow: 0 2px 0 rgb(0 0 0 / 0.6);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tone) 30%, transparent));
}

.colon {
  color: var(--gold-deep);
}

.unit-label {
  color: var(--mist);
  font: 700 0.78rem/1 var(--font-caps);
  letter-spacing: 0.1em;
}

/* The fuse: a lit line along the top edge of a poll (the bottom edge of the big
   clock) that burns down from right to left, with a spark at its tip. */
.fuse {
  position: absolute;
  top: -1px;
  left: 8px;
  right: 8px;
  height: 2px;
  pointer-events: none;
}

.countdown.card .fuse {
  top: auto;
  bottom: -1px;
}

.fuse::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--left) * 100%);
  /* It rises out of nothing at its far end, and the glow follows the line's
     own brightness, so neither stops in a hard edge by the panel's corner.
     The fade shrinks with the fuse, so a short one near the end still shows. */
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tone) 30%, transparent) min(3rem, 35%), var(--tone));
  border-radius: 2px;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tone) 60%, transparent));
  transition: width 1s linear;
}

.fuse::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--left) * 100%);
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff6dc;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px var(--tone), 0 0 16px 5px color-mix(in srgb, var(--tone) 40%, transparent);
  animation: spark 1.3s ease-in-out infinite;
  transition: left 1s linear;
}

@keyframes digit-roll {
  from {
    transform: translateY(-100%);
  }
}

@keyframes digit-leave {
  to {
    opacity: 0;
  }
}

@keyframes spark {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  35% {
    opacity: 0.7;
    transform: scale(0.7);
  }
  65% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes hourglass-turn {
  0%,
  70% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes urgent-pulse {
  50% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent), 0 0 14px color-mix(in srgb, var(--danger) 30%, transparent);
  }
}

/* Gate and nickname picker ----------------------------------------------- */

.gate,
.who {
  display: grid;
  gap: 1.25rem;
  max-width: 32rem;
  margin-inline: auto;
}

.admin-box {
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rim);
}

.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Toast ------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 10;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: 0.75rem 1.1rem;
  color: var(--parchment);
  background: #0e1530;
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
  font-weight: 700;
  transform: translateX(-50%);
}

.toast[data-kind="error"] {
  color: #ffd9d3;
  border-color: var(--danger);
}

/* Small screens and motion ----------------------------------------------- */

@media (max-width: 34rem) {
  .big-title {
    font-size: 2.05rem;
  }

  /* On a phone the voters' nicknames get their own line under the option. */
  .option {
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }

  .voters {
    flex-basis: 100%;
    order: 1;
    padding-left: 1.7rem;
  }

  .poll-q {
    font-size: 1.5rem;
  }

  .panel-q {
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .option,
  .option > .fill,
  .fuse::before,
  .fuse::after {
    transition: none;
  }

  .digit.roll .digit-face,
  .digit.roll .digit-face::after,
  .fuse::after,
  .is-urgent .hourglass,
  .countdown.chip.is-urgent {
    animation: none;
  }

  .digit.roll .digit-face::after {
    content: none;
  }
}