/* ============================================================================
   mvmcp.css, Mickey's Very Merry Christmas Party 2026 sold out tracker.
   The signature object is an advent calendar of the 25 party nights: a door
   per night on an evergreen board, sold out doors swung open and stamped,
   nights still on sale shut with their price and the Magic Kingdom crowd.
   Built on v1.css tokens with local fallbacks; holiday accents are local.
   ========================================================================== */

/* Light by default (cream paper), dark with the OS or the site toggle. The board
   itself is evergreen in both, so only the page around it changes. */
.mvmcp {
  --mv-bg: oklch(96% 0.018 88);
  --mv-ink: oklch(22% 0.025 280);
  --mv-ink-2: oklch(34% 0.025 70);
  --mv-ink-3: oklch(46% 0.03 70);
  --mv-line: oklch(45% 0.04 70 / 0.22);
  --mv-gold: oklch(50% 0.11 75);
  --mv-surface: oklch(99% 0.01 88);
  --mv-open: oklch(48% 0.13 152);
  --mv-berry-ink: oklch(50% 0.19 25);
  --mv-track: oklch(30% 0.03 70 / 0.08);
  --mv-price-fill: oklch(78% 0.13 86 / 0.75);
  --mv-crowd-fill: oklch(72% 0.13 152 / 0.6);
  background: var(--mv-bg);
  color: var(--mv-ink);
  color-scheme: light;
  --mv-pine: oklch(31% 0.065 160);
  --mv-pine-deep: oklch(23% 0.05 165);
  --mv-paper: oklch(95% 0.025 88);
  --mv-paper-2: oklch(90% 0.035 86);
  --mv-paper-ink: oklch(27% 0.04 60);
  --mv-berry: oklch(55% 0.19 22);
  --mv-stamp: oklch(72% 0.17 20);   /* stamps on the dark board, both schemes */
  --mv-display: var(--display, "Bricolage Grotesque", system-ui, sans-serif);
  --mv-ui: var(--ui, "Hanken Grotesk", system-ui, sans-serif);
  overflow-x: clip;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mvmcp {
    --mv-bg: oklch(21% 0.046 280); --mv-ink: oklch(93% 0.03 84); --mv-ink-2: oklch(82% 0.03 84);
    --mv-ink-3: oklch(72% 0.032 84); --mv-line: oklch(40% 0.05 280); --mv-gold: oklch(84% 0.13 86);
    --mv-surface: oklch(27% 0.05 279); --mv-open: oklch(80% 0.14 152); --mv-berry-ink: oklch(72% 0.17 20);
    --mv-track: oklch(100% 0 0 / 0.06); --mv-price-fill: oklch(84% 0.13 86 / 0.5); --mv-crowd-fill: oklch(72% 0.13 152 / 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] .mvmcp {
  --mv-bg: oklch(21% 0.046 280); --mv-ink: oklch(93% 0.03 84); --mv-ink-2: oklch(82% 0.03 84);
  --mv-ink-3: oklch(72% 0.032 84); --mv-line: oklch(40% 0.05 280); --mv-gold: oklch(84% 0.13 86);
  --mv-surface: oklch(27% 0.05 279); --mv-open: oklch(80% 0.14 152); --mv-berry-ink: oklch(72% 0.17 20);
  --mv-track: oklch(100% 0 0 / 0.06); --mv-price-fill: oklch(84% 0.13 86 / 0.5); --mv-crowd-fill: oklch(72% 0.13 152 / 0.5);
  color-scheme: dark;
}

.mv-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- the answer */
.mv-top { padding: clamp(26px, 5vw, 52px) 0 clamp(14px, 2.5vw, 22px); }
.mv-top .wrap { max-width: 980px; }
.mv-kicker {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font: 600 0.8rem/1.2 var(--mv-ui); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mv-open);
}
.mv-live {
  width: 9px; height: 9px; border-radius: 50%; background: var(--mv-open);
  box-shadow: 0 0 0 4px oklch(80% 0.14 152 / 0.18);
}
.mvmcp h1 {
  font: 800 clamp(1.9rem, 5.4vw, 3.3rem)/1.04 var(--mv-display);
  letter-spacing: -0.02em; margin: 0 0 14px; color: var(--mv-ink); text-wrap: balance;
}
.mv-answer {
  font: 400 clamp(1.04rem, 1.9vw, 1.2rem)/1.55 var(--mv-ui); color: var(--mv-ink-2);
  max-width: 64ch; margin: 0 0 20px;
}
.mv-answer b { color: var(--mv-ink); font-weight: 700; }

.mv-tally { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.mv-tally div {
  flex: 1 1 120px; padding: 10px 14px; border-radius: var(--r-sm, 9px);
  border: 1px solid var(--mv-line); background: var(--mv-surface);
}
.mv-tally dt { font: 600 0.74rem/1.2 var(--mv-ui); color: var(--mv-ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.mv-tally dd { margin: 2px 0 0; font: 800 1.7rem/1.1 var(--mv-display); color: var(--mv-ink); font-variant-numeric: tabular-nums; }
.mv-tally .is-gone dd { color: var(--mv-berry-ink); }
.mv-tally .is-open dd { color: var(--mv-open); }

/* ------------------------------------------------------- the advent board */
.mv-board-sec { padding: 6px 0 clamp(30px, 5vw, 54px); }
.mv-board-sec .wrap { max-width: 980px; }
.mv-board {
  display: grid; gap: 16px;
  padding: clamp(12px, 2.6vw, 26px);
  border-radius: var(--r-lg, 18px);
  background:
    radial-gradient(120% 80% at 50% 0%, oklch(36% 0.07 160), transparent 70%),
    linear-gradient(180deg, var(--mv-pine), var(--mv-pine-deep));
  border: 3px solid oklch(62% 0.11 80);
  box-shadow: inset 0 0 0 5px var(--mv-pine-deep), inset 0 0 0 6px oklch(62% 0.11 80 / 0.45), var(--shadow, 0 14px 36px rgb(0 0 0 / 0.5));
}
@media (min-width: 860px) {
  .mv-board { grid-template-columns: minmax(0, 1fr) 270px; grid-template-areas: "head head" "doors slip" "legend slip"; align-items: start; }
  .mv-board-head { grid-area: head; }
  .mv-doors { grid-area: doors; }
  .mv-legend { grid-area: legend; }
  .mv-slip { grid-area: slip; position: sticky; top: 90px; }
}
.mv-board-head h2 {
  margin: 0; font: 800 clamp(1.25rem, 3vw, 1.6rem)/1.15 var(--mv-display); color: var(--mv-paper);
}
.mv-board-head p { margin: 4px 0 0; font: 400 0.95rem/1.45 var(--mv-ui); color: oklch(86% 0.04 120); }

.mv-doors {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(5px, 1.2vw, 10px);
}
.mv-doors li { display: contents; }

.mv-door {
  position: relative; isolation: isolate;
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center;
  min-height: clamp(82px, 13vw, 112px); padding: 6px 3px 7px;
  border: 0; border-radius: 7px; cursor: pointer;
  font: inherit; color: var(--mv-paper-ink); text-align: center;
  perspective: 600px;
}
/* The shut door: cream card stock with a gold rule. */
.mv-door.is-open {
  background: linear-gradient(180deg, var(--mv-paper), var(--mv-paper-2));
  box-shadow: 0 0 0 1px oklch(70% 0.09 80), 0 2px 0 oklch(18% 0.04 160 / 0.6);
}
.mv-door.is-open::after {
  content: ""; position: absolute; inset: 3px; border-radius: 5px; pointer-events: none;
  border: 1px dashed oklch(66% 0.08 80 / 0.7);
}
/* The opened door: the dark recess behind, with the leaf swung off its left hinge. */
.mv-door.is-sold {
  background: oklch(19% 0.04 165);
  box-shadow: inset 0 3px 10px oklch(8% 0.03 165 / 0.9), 0 0 0 1px oklch(40% 0.06 160);
  color: oklch(78% 0.03 120);
}
.mv-door.is-sold::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: -1;
  border-radius: 7px 3px 3px 7px;
  background: linear-gradient(90deg, oklch(70% 0.05 86), oklch(56% 0.05 86));
  transform-origin: left center;
  transform: rotateY(0deg);
  animation: mv-swing 900ms cubic-bezier(.3,.7,.2,1) 250ms forwards;
}
@keyframes mv-swing {
  to { transform: rotateY(-76deg); opacity: 0.85; }
}

.mv-door-mo { font: 700 0.62rem/1.1 var(--mv-ui); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; justify-self: start; padding-left: 4px; }
.mv-door-mo span { font-weight: 500; }
.mv-door.is-sold .mv-door-mo { padding-left: 12px; }
@media (max-width: 560px) { .mv-door-mo span { display: none; } }
.mv-door-num { font: 800 clamp(1.35rem, 3.6vw, 2rem)/1 var(--mv-display); font-variant-numeric: tabular-nums; }
.mv-door.is-sold .mv-door-num { opacity: 0.35; }
.mv-door-price { font: 700 clamp(0.78rem, 1.9vw, 0.95rem)/1 var(--mv-ui); font-variant-numeric: tabular-nums; }

.mv-stamp {
  position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(-11deg);
  display: grid; justify-items: center; gap: 1px;
  padding: 3px 4px 2px; border: 2px solid var(--mv-stamp); border-radius: 4px;
  color: var(--mv-stamp); background: oklch(19% 0.04 165 / 0.6);
  white-space: nowrap; line-height: 1;
}
.mv-stamp b { font: 800 clamp(0.56rem, 1.5vw, 0.74rem)/1 var(--mv-ui); text-transform: uppercase; letter-spacing: 0.04em; }
.mv-stamp span { font: 600 clamp(0.5rem, 1.3vw, 0.64rem)/1 var(--mv-ui); }

/* Crowd pip, 1 calm to 10 packed, five steps of colour. */
.mv-pip {
  position: absolute; top: 4px; right: 4px;
  min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px;
  font: 800 0.66rem/17px var(--mv-ui); color: oklch(20% 0.03 160);
}
.mv-pip.lvl-1 { background: oklch(82% 0.15 152); }
.mv-pip.lvl-2 { background: oklch(86% 0.14 125); }
.mv-pip.lvl-3 { background: oklch(86% 0.14 90); }
.mv-pip.lvl-4 { background: oklch(78% 0.15 55); }
.mv-pip.lvl-5 { background: oklch(70% 0.18 25); color: oklch(98% 0.01 20); }

.mv-door:focus-visible { outline: 3px solid var(--mv-gold); outline-offset: 2px; }
.mv-door.is-open:hover { transform: translateY(-2px); }
.mv-door { transition: transform 160ms ease; }
.mv-door[aria-pressed="true"] { outline: 3px solid var(--mv-gold); outline-offset: 2px; }
.mv-door.is-best.is-open { box-shadow: 0 0 0 2px var(--mv-gold), 0 0 22px oklch(84% 0.13 86 / 0.45); }

.mv-legend {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px;
  font: 500 0.82rem/1.3 var(--mv-ui); color: oklch(86% 0.04 120);
}
.mv-legend li { display: inline-flex; align-items: center; gap: 7px; }
.mv-key { width: 16px; height: 16px; border-radius: 4px; display: inline-block; flex: none; }
.mv-key.is-open { background: var(--mv-paper); }
.mv-key.is-sold { background: oklch(19% 0.04 165); border: 2px solid var(--mv-stamp); }
.mv-key.is-pip { width: auto; min-width: 17px; height: 17px; border-radius: 9px; background: oklch(86% 0.14 90); color: oklch(20% 0.03 160); font: 800 0.66rem/17px var(--mv-ui); text-align: center; padding: 0 3px; }

/* The ticket slip under (or beside) the board. */
.mv-slip {
  position: relative; padding: 16px 16px 18px; border-radius: 10px;
  background: var(--mv-paper); color: var(--mv-paper-ink);
  box-shadow: 0 10px 26px oklch(10% 0.04 160 / 0.5);
}
.mv-slip::before, .mv-slip::after {
  content: ""; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; background: var(--mv-pine-deep);
}
.mv-slip::before { left: -8px; }
.mv-slip::after { right: -8px; }
.mv-slip-tag { margin: 0; font: 700 0.72rem/1.2 var(--mv-ui); letter-spacing: 0.08em; text-transform: uppercase; color: oklch(48% 0.12 150); }
.mv-slip-tag.is-sold { color: var(--mv-berry); }
.mv-slip-date { margin: 4px 0 10px; font: 800 1.3rem/1.15 var(--mv-display); }
.mv-slip-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0 0 10px; padding: 10px 0; border-block: 1px dashed oklch(70% 0.06 80); }
.mv-slip-prices dt { font: 600 0.72rem/1.2 var(--mv-ui); color: oklch(45% 0.04 60); }
.mv-slip-prices dd { margin: 1px 0 0; font: 800 1.1rem/1.1 var(--mv-ui); font-variant-numeric: tabular-nums; }
.mv-slip-why { margin: 0 0 12px; font: 400 0.92rem/1.45 var(--mv-ui); }
.mv-slip .mv-buy, .mv-slip :where(a).mv-buy {
  display: inline-block; padding: 9px 14px; border-radius: var(--r-pill, 999px);
  background: var(--mv-pine); color: var(--mv-paper); text-decoration: none;
  font: 700 0.88rem/1.2 var(--mv-ui);
}
.mv-slip .mv-buy:hover { background: var(--mv-pine-deep); }
.mv-slip-alt { margin: 0; font: 500 0.88rem/1.45 var(--mv-ui); }
.mv-slip-alt button {
  font: 700 0.86rem/1.2 var(--mv-ui); color: oklch(40% 0.11 150); background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer;
}

/* ------------------------------------------------------------- sections */
.mv-sec { padding: clamp(26px, 4.5vw, 48px) 0; border-top: 1px solid var(--mv-line); }
.mv-narrow { max-width: 820px; }
.mv-eyebrow { margin: 0 0 6px; font: 700 0.76rem/1.2 var(--mv-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mv-gold); }
.mv-sec h2 { margin: 0 0 10px; font: 800 clamp(1.4rem, 3.4vw, 2rem)/1.12 var(--mv-display); color: var(--mv-ink); text-wrap: balance; }
.mv-lede { margin: 0 0 18px; font: 400 1.02rem/1.6 var(--mv-ui); color: var(--mv-ink-2); max-width: 66ch; }
.mv-note { margin: 14px 0 0; font: 400 0.86rem/1.5 var(--mv-ui); color: var(--mv-ink-3); }

/* Picker slider */
.mv-slider { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-sm, 9px); background: var(--mv-surface); border: 1px solid var(--mv-line); }
.mv-slider label { display: block; margin-bottom: 6px; font: 700 0.84rem/1.2 var(--mv-ui); color: var(--mv-ink); }
.mv-slider-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font: 600 0.8rem/1.2 var(--mv-ui); color: var(--mv-ink-3); }
.mv-slider input { width: 100%; accent-color: var(--mv-gold); min-height: 28px; }

/* Ranked nights */
.mv-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: rk; }
.mv-rank-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; align-items: start;
  padding: 12px 14px; border-radius: var(--r-sm, 9px);
  background: var(--mv-surface); border: 1px solid var(--mv-line);
  counter-increment: rk;
}
.mv-rank-row:first-child { border-color: var(--mv-gold); box-shadow: var(--halo, 0 0 0 1px oklch(84% 0.13 86 / 0.3)); }
.mv-rank-n::before { content: counter(rk); font: 800 1.4rem/1 var(--mv-display); color: var(--mv-gold); font-variant-numeric: tabular-nums; }
.mv-rank-n { grid-row: span 2; padding-top: 2px; }
.mv-rank-date { margin: 0; font: 800 1.08rem/1.2 var(--mv-display); color: var(--mv-ink); }
.mv-rank-why { margin: 2px 0 0; font: 400 0.9rem/1.45 var(--mv-ui); color: var(--mv-ink-2); }
.mv-rank-bars { grid-column: 2; display: grid; gap: 5px; margin-top: 6px; }
.mv-bar { position: relative; display: block; height: 20px; border-radius: 5px; background: var(--mv-track); overflow: hidden; }
.mv-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; }
.mv-bar.is-price::before { background: var(--mv-price-fill); }
.mv-bar.is-crowd::before { background: var(--mv-crowd-fill); }
.mv-bar b { position: relative; padding-left: 8px; font: 700 0.78rem/20px var(--mv-ui); color: var(--mv-ink); font-variant-numeric: tabular-nums; }
@media (min-width: 640px) {
  .mv-rank-row { grid-template-columns: 34px minmax(0, 1fr) 220px; }
  .mv-rank-bars { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
}

/* Price table */
.mv-table-wrap { border: 1px solid var(--mv-line); border-radius: var(--r-sm, 9px); overflow: hidden; }
.mv-table { width: 100%; border-collapse: collapse; font: 500 0.92rem/1.3 var(--mv-ui); color: var(--mv-ink-2); font-variant-numeric: tabular-nums; }
.mv-table th, .mv-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--mv-line); }
.mv-table thead th { font: 700 0.74rem/1.2 var(--mv-ui); text-transform: uppercase; letter-spacing: 0.05em; color: var(--mv-ink-3); background: var(--mv-surface); }
.mv-table tbody th { font-weight: 700; color: var(--mv-ink); white-space: nowrap; }
.mv-table tbody tr:last-child > * { border-bottom: 0; }
.mv-table tr.is-sold td, .mv-table tr.is-sold th { color: var(--mv-ink-3); }
.mv-st { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill, 999px); font: 700 0.74rem/1.4 var(--mv-ui); white-space: nowrap; }
.mv-st.is-sold { color: var(--mv-berry-ink); border: 1px solid currentColor; }
.mv-st.is-open { color: var(--mv-bg); background: var(--mv-open); }
@media (max-width: 480px) {
  .mv-table { font-size: 0.84rem; }
  .mv-table th, .mv-table td { padding: 8px 6px; }
  .mv-table thead th { font-size: 0.66rem; letter-spacing: 0.02em; }
}

/* Sell out ledger */
.mv-ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mv-ledger li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 14px; padding: 12px 0;
  border-bottom: 1px dashed var(--mv-line);
}
.mv-led-day { margin: 0; font: 800 1rem/1.3 var(--mv-display); color: var(--mv-ink); }
.mv-led-stamps { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-led-stamp {
  padding: 3px 7px; border: 2px solid var(--mv-berry-ink); border-radius: 4px;
  font: 800 0.74rem/1.2 var(--mv-ui); text-transform: uppercase; letter-spacing: 0.03em; color: var(--mv-berry-ink);
  transform: rotate(-2deg);
}
.mv-led-stamp:nth-child(even) { transform: rotate(1.5deg); }
.mv-led-total { grid-column: 2; margin: 0; display: flex; align-items: center; gap: 10px; font: 500 0.84rem/1.2 var(--mv-ui); color: var(--mv-ink-3); }
.mv-led-total b { color: var(--mv-ink); font-variant-numeric: tabular-nums; }
.mv-led-bar { position: relative; flex: 0 1 180px; height: 6px; border-radius: 3px; background: var(--mv-track); overflow: hidden; }
.mv-led-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--mv-berry-ink); border-radius: 3px; }

/* Prose sections */
.mv-prose p { font: 400 1.02rem/1.65 var(--mv-ui); color: var(--mv-ink-2); margin: 0 0 14px; }
.mv-prose :where(a) { color: var(--mv-gold); }
.mv-incl { margin: 0 0 14px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.mv-incl li { padding: 10px 12px 10px 34px; position: relative; border-radius: var(--r-sm, 9px); background: var(--mv-surface); border: 1px solid var(--mv-line); font: 500 0.95rem/1.35 var(--mv-ui); color: var(--mv-ink); }
.mv-incl li::before { content: "❄"; position: absolute; left: 12px; top: 10px; color: oklch(80% 0.08 230); }
.mv-steps { margin: 0 0 16px; padding: 0 0 0 22px; display: grid; gap: 10px; font: 400 1rem/1.6 var(--mv-ui); color: var(--mv-ink-2); }
.mv-steps b { color: var(--mv-ink); }
.mv-steps :where(a) { color: var(--mv-gold); }

/* Plan links */
.mv-plan-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.mv-plan-links :where(a) {
  display: grid; gap: 3px; height: 100%; padding: 12px 14px; border-radius: var(--r-sm, 9px);
  background: var(--mv-surface); border: 1px solid var(--mv-line); text-decoration: none;
}
.mv-plan-links :where(a):hover { border-color: var(--mv-gold); }
.mv-plan-links b { font: 700 0.95rem/1.3 var(--mv-ui); color: var(--mv-ink); }
.mv-plan-links span { font: 400 0.85rem/1.35 var(--mv-ui); color: var(--mv-ink-3); }

/* FAQ */
.mv-faq details { border-bottom: 1px solid var(--mv-line); padding: 12px 0; }
.mv-faq summary { cursor: pointer; font: 700 1.02rem/1.4 var(--mv-ui); color: var(--mv-ink); }
.mv-faq p { margin: 8px 0 0; font: 400 0.98rem/1.6 var(--mv-ui); color: var(--mv-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .mv-door.is-sold::before { animation: none; transform: rotateY(-76deg); opacity: 0.85; }
  .mv-door, .mv-door.is-open:hover { transition: none; transform: none; }
}