/* Design options: the styles for each choice in js/options.js, scoped to its attribute on <html>
 * (warmDark -> :root[data-opt-warm-dark]), so they only apply while that option is on.
 * Options that change markup are read in the page scripts with option(); their notes below say where.
 */

/* =============================================================================
   printAnimation
   After voting, the sheet (now the receipt stub) feeds up out of the bottom of the screen in short jumps,
   like paper out of a receipt printer (see openVoteSheet in vote.js). Reduced motion: no animation.
   ========================================================================== */

:root[data-opt-print-animation] .sheet.is-printing .sheet-panel {
  animation: sheet-print 1.5s steps(14, end) both;
}

@keyframes sheet-print {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* On wide screens the sheet is a centred dialog, so it has further to come up from the bottom edge. */
@media (min-width: 40rem) {
  :root[data-opt-print-animation] .sheet.is-printing .sheet-panel {
    animation-name: sheet-print-wide;
  }

  @keyframes sheet-print-wide {
    from {
      transform: translateY(calc(50vh + 50%));
    }
    to {
      transform: translateY(0);
    }
  }
}

/* =============================================================================
   topNow
   The best-rated hall you can rate right now gets a TOP NOW stamp next to OPEN (see topNowId in index.js).
   It's a second badge, so it shares the stamp's shape; only its colour and tilt differ.
   ========================================================================== */

:root[data-opt-top-now] .stamp-top {
  background: var(--accent-soft);
  color: var(--text);
  transform: rotate(1.5deg);
  white-space: nowrap;
}

/* =============================================================================
   receiptHeader
   The home page opens like the top of a receipt: centred title, the date and how many halls are open,
   then a tear line (see renderMeta in index.js).
   ========================================================================== */

:root[data-opt-receipt-header] .home-title {
  margin-bottom: 0.15rem;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:root[data-opt-receipt-header] #receipt-meta {
  display: block;
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--border);
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
/* =============================================================================
   warmDark
   Dark mode only (each value keeps Receipt's light half). Brown-grey slips on a softer counter, warm ink at
   lower contrast, and amber instead of cream-white for the solid things (Rate buttons, the active tab), so
   there's no big white block on a dark screen. Contrast checked: text 4.5:1 or better.
   ========================================================================== */

:root[data-opt-warm-dark] {
  --bg:            light-dark(#e6e6e1, #1e1b17);
  --surface:       light-dark(#fbfbf7, #302b25);
  --text:          light-dark(#1b1b1a, #e4dccb);
  --muted:         light-dark(#56564f, #b3aa98);
  --border:        light-dark(#1b1b1a, #d8cfbc);
  --divider:       light-dark(#bdbdb4, #57503f);
  --accent:        light-dark(#1b1b1a, #d6ad5c);
  --accent-text:   light-dark(#fbfbf7, #241d10);
  --accent-soft:   light-dark(#fff0a0, #5a4a22);
  --link:          light-dark(#1b1b1a, #e4dccb);
  --focus:         light-dark(#1b1b1a, #e7c467);
  --good:          light-dark(#0b6a2c, #79bb87);
  --good-soft:     light-dark(#daf2e1, #2f4132);
  --neutral-soft:  light-dark(#ecece6, #3a342c);
  --closed-soft:   light-dark(#dcdcd5, #463f36);
  --star:          light-dark(#1b1b1a, #e4dccb);
  --star-edge:     light-dark(#1b1b1a, #e4dccb);
  --star-empty:    light-dark(#cbcbc3, #6a6152);
  --star-line:     light-dark(#1b1b1a, #b9b09d);
  --skeleton:      light-dark(#e7e7e1, #3a342c);
  --skeleton-hi:   light-dark(#f3f3ee, #453e34);
  --on-good:       light-dark(#ffffff, #142017);
  --vote-bg:       light-dark(var(--accent-soft), #3d3524);
}

/* =============================================================================
   plainTags
   Home rows' top tags as plain text with a middle dot between them.
   ========================================================================== */

:root[data-opt-plain-tags] .hall-row-foot .tag {
  padding: 0;
  background: none;
  color: var(--muted);
}

:root[data-opt-plain-tags] .hall-row-foot .tag-list {
  gap: 0;
}

:root[data-opt-plain-tags] .hall-row-foot .tag + .tag::before {
  content: "·";
  margin-inline: 0.5rem;
}

/* =============================================================================
   stampedStars
   Choosing a star or a tag presses it in like an ink stamp: a quick pop, then it settles.
   ========================================================================== */

:root[data-opt-stamped-stars] .star-option input:checked + .star-glyph {
  animation: stamp-in 0.28s ease-out;
}

:root[data-opt-stamped-stars] .chip input:checked + span {
  animation: stamp-in 0.22s ease-out;
}

@keyframes stamp-in {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.3) rotate(-6deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}