/* Light and dark (Oct 2026). theme.js sets <html data-mode="light|dark"> from the phone's setting or the switch.
   Dark is the same KB02: a deep midnight sky, dark frosted cards, soft white words, the same orange candy buttons and mint.
   Loaded last on every customer page and the website. */

/* ---------- the switch (both modes) ---------- */
.mode-switch { flex: none; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; }
.mode-switch .ms-track { position: relative; display: block; width: 78px; height: 44px; border-radius: 999px; background: #e3e5f0; box-shadow: inset 0 0 0 1.5px rgba(29, 26, 61, .14), inset 0 2px 4px rgba(29, 26, 61, .12); transition: background .25s; }
.mode-switch .ms-ico { position: absolute; top: 10px; width: 24px; height: 24px; }
.mode-switch .ms-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mode-switch .ms-sun { left: 9px; color: #c2560a; }
.mode-switch .ms-moon { right: 9px; color: #6f6c96; }
.mode-switch .ms-moon svg { fill: currentColor; stroke: none; }
.mode-switch .ms-knob { position: absolute; top: 4px; left: 4px; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(180deg, #ffb35c, #ff8a2b); box-shadow: 0 3px 8px rgba(255, 110, 20, .5), inset 0 -2px 0 rgba(0, 0, 0, .12); transition: transform .25s cubic-bezier(.3, 1.4, .6, 1); }
.mode-switch[aria-checked="true"] .ms-track { background: #2c2858; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
.mode-switch[aria-checked="true"] .ms-knob { transform: translateX(34px); background: linear-gradient(180deg, #f3f1ff, #c9c4f2); box-shadow: 0 3px 10px rgba(185, 175, 255, .45); }
.mode-switch[aria-checked="true"] .ms-sun { color: #8e8bb8; }
.mode-switch[aria-checked="true"] .ms-moon { color: #ffd77a; }
.mode-switch:focus-visible { outline: 3px solid #ff8a2b; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mode-switch .ms-knob, .mode-switch .ms-track { transition: none; } }

/* ---------- dark: shared colours ---------- */
html[data-mode="dark"] {
  --ink: #ecebfa; --ink-2: #d4d2ee; --ink-muted: #b3b1d6; --muted: #b3b1d6;
  --on-navy: #ecebfa; --on-navy-muted: #b3b1d6;
  --navy-line: rgba(255, 255, 255, .14); --line: rgba(255, 255, 255, .12);
  --orange-deep: #ffad66;
  --mint-soft: rgba(95, 224, 192, .14);
  --paper: #221f48;
  --card-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 20px 44px -22px rgba(0, 0, 0, .8), 0 2px 8px rgba(0, 0, 0, .3);
  --card: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 26px 50px -28px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .3);
  --lift: 0 10px 28px -14px rgba(0, 0, 0, .8);
  --lift-sm: 0 6px 16px -8px rgba(0, 0, 0, .7);
  --d-bg: #14122e; --d-surface: #221f48; --d-surface-2: #2a2754; --d-glass: rgba(34, 31, 72, .82); --d-line: rgba(255, 255, 255, .12);
  background: #14122e;
  color-scheme: dark;
}
html[data-mode="dark"] body, html.silver[data-mode="dark"] body {
  color: var(--ink);
  background:
    radial-gradient(70% 45% at 15% -5%, rgba(255, 138, 43, .16), transparent 65%),
    radial-gradient(60% 40% at 95% 10%, rgba(130, 115, 255, .16), transparent 65%),
    radial-gradient(70% 50% at 50% 105%, rgba(95, 224, 192, .1), transparent 65%),
    linear-gradient(180deg, #17153a 0%, #14122e 55%, #100e26 100%) fixed;
}
html[data-mode="dark"] .blob { opacity: .14; }
html[data-mode="dark"] :is(p, li, dd, small, figcaption, .fine, .note) a:not([class]) { color: #ffad66; }
html[data-mode="dark"] .checker { opacity: .5; }
html[data-mode="dark"] .foot { background: #0c0b1f; }
html[data-mode="dark"] img.foot-logo, html[data-mode="dark"] .logo img, html[data-mode="dark"] .brand img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 18px -8px rgba(0, 0, 0, .8); }

/* ---------- dark: the website ---------- */
html[data-mode="dark"] .nav { background: var(--d-glass); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 34px -18px rgba(0, 0, 0, .8); }
html[data-mode="dark"] .links a:hover { background: rgba(255, 255, 255, .08); }
html[data-mode="dark"] .links a.nl-book { color: #ffad66; }
html[data-mode="dark"] .btn-glass { background: rgba(255, 255, 255, .08); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
html[data-mode="dark"] .btn-glass:hover { background: rgba(255, 255, 255, .14); color: #fff; }
html[data-mode="dark"] .facts li, html[data-mode="dark"] .steps li, html[data-mode="dark"] .day-card, html[data-mode="dark"] .faq details,
html[data-mode="dark"] .quote, html[data-mode="dark"] .compare, html[data-mode="dark"] .price:not(.featured) { background: var(--d-surface); box-shadow: var(--card); }
html[data-mode="dark"] .extras-row .note { background: rgba(255, 255, 255, .06); }
html[data-mode="dark"] .g figcaption { background: rgba(20, 18, 46, .86); color: var(--ink); }
html[data-mode="dark"] .price .tag { color: #1d1a3d; }
html[data-mode="dark"] .skip { background: #ecebfa; color: #1d1a3d; }
html[data-mode="dark"] .cmp.them { background: rgba(255, 255, 255, .05); }
html[data-mode="dark"] .us li::before { color: #1d1a3d; }
html[data-mode="dark"] .final-card { background: radial-gradient(90% 120% at 0% 0%, #2c2758 0%, #241f4c 55%, #3a2742 100%); }
html[data-mode="dark"] .final-photos img { border-color: #2a2754; }
html[data-mode="dark"] .pc.red, html[data-mode="dark"] .eyebrow .suit.red, html[data-mode="dark"] .suit.red { color: #ff7a85; }
html[data-mode="dark"] .price .tag, html[data-mode="dark"] span.tag { background: var(--mint); color: #1d1a3d; }

/* the website's top bar has one more button now (the switch): keep the links on one line */
.links a { white-space: nowrap; }
@media (min-width: 980px) and (max-width: 1199px) { .links a { padding: 8px 9px; font-size: 16px; } }

/* ---------- dark: the booking pages (book, party page, pay, viewings, schools, auctions, policies) ---------- */
/* white cards and buttons become dark cards */
html[data-mode="dark"] :is(.wide.slot, .b:not(.b-main):not(.b-orange):not(.b-text), .chip:not([aria-pressed="true"]), .cal-wrap, .cal-head button, .counter .step, .counter .big,
  .stepper button, .jbar .back, .age:not([aria-pressed="true"]), .pay-opt, .sd, .ticket, .speech, .photo, .invite, .point, .goes button, .quick button:not(.quick-pick), .extras .in,
  .tabs button:not([aria-pressed="true"]), .other-row, .playing-card, .tests button, .card-ink, .nudge, a.nudge, .rabbit-card, dialog.modal, .tour-off, .toast, .au-date, .trust-strip,
  .dh-tour, .call-pill.desk-only, .pill-out, .note-box, .wait-nudge, .wait-card, .jmap .card.past, .deposit-hero, .hold-alert, .mv-cal .cal-wrap, .lv-card, .au-card, .rp-card) {
  background: var(--d-surface); color: var(--ink); border-color: var(--d-line);
}
html[data-mode="dark"] :is(.wide.slot, .b:not(.b-main):not(.b-orange):not(.b-text), .pay-opt, .sd, .card-ink, .nudge, .trust-strip, .dh-tour, .other-row, .invite, .ticket, .speech, .playing-card) {
  box-shadow: inset 0 0 0 1.5px var(--d-line), var(--lift-sm);
}
html[data-mode="dark"] .wide.slot:hover, html[data-mode="dark"] .b:not(.b-main):not(.b-orange):not(.b-text):hover { background: var(--d-surface-2); }
/* frosted glass panels */
html[data-mode="dark"] :is(.wl-head, .jbar, .kind-switch, .steps2, .times-hint, .lv-calc, .pill-out, .wide:not(.slot):not([aria-pressed="true"]), .portal-foot-links, .sh-mint) {
  background: var(--d-glass); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--lift-sm);
}
html.silver[data-mode="dark"] .wl-head { background: var(--d-glass); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 34px -18px rgba(0, 0, 0, .8); }
html[data-mode="dark"] .site-links a { color: var(--ink-2); }
html[data-mode="dark"] .site-links a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html[data-mode="dark"] .site-links .nl-book { color: #ffad66; }
@media (max-width: 1199px) { html.silver[data-mode="dark"] .site-links { border-top-color: rgba(255, 255, 255, .1); } }
/* the steps along the top */
html[data-mode="dark"] .steps2 > span.on { background: #ecebfa; color: #1d1a3d; }
html[data-mode="dark"] .steps2 > span.done { color: #5fe0c0; }
/* anything orange or mint keeps dark writing, so it can be read */
html[data-mode="dark"] :is(.quick-pick, .quick-pick *, .kind-switch button[aria-pressed="true"], .day.picked, .day.picked *, .wide[aria-pressed="true"], .wide[aria-pressed="true"] *,
  .chip[aria-pressed="true"], .ticket .band, .ticket .band *, .next-steps .n, .tag, .wc-free, .wc-go, .sd .df, .soon-btn[aria-expanded="true"], .wide.slot .go, .age[aria-pressed="true"],
  .tabs button[aria-pressed="true"], .b-main, .b-orange, .b-main *, .b-orange *, .tour-badge, .cp-ico, .ts-score b, .day-available:hover, .day-available:hover *, .hear) { color: #1d1a3d; }
html[data-mode="dark"] :is(.b-main, .b-orange, .quick-pick, .chip[aria-pressed="true"], .day.picked, .wide[aria-pressed="true"], .kind-switch button[aria-pressed="true"]) { color: #fff; }
/* the calendar */
html[data-mode="dark"] .day { background: rgba(255, 255, 255, .04); color: var(--ink); border-color: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
html[data-mode="dark"] .day-available, html[data-mode="dark"] .mv-cal .day-available { background: rgba(95, 224, 192, .16); box-shadow: inset 0 0 0 2px rgba(95, 224, 192, .7); color: #e9fff8; }
html[data-mode="dark"] .day-available:hover { background: var(--mint); }
html[data-mode="dark"] .day-closed, html[data-mode="dark"] .day-closed .dnum, html[data-mode="dark"] .cal-wrap .day-closed { color: #6f6c96; background: transparent; }
html[data-mode="dark"] .cal-wrap.big .day.day-booked:disabled, html[data-mode="dark"] .day-booked { background: rgba(255, 95, 120, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 120, 140, .35); color: #ff9fae; }
html[data-mode="dark"] .day-booked .dnum { color: #ff9fae; }
html[data-mode="dark"] .day-blank { background: transparent; box-shadow: none; }
html[data-mode="dark"] .mv-cal .day.mine { background: #ecebfa; color: #1d1a3d; }
html[data-mode="dark"] .cal-key .k-booked { background: rgba(255, 95, 120, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 120, 140, .35); }
html[data-mode="dark"] .cal-key .k-free, html[data-mode="dark"] .mv-cal .k-free { background: rgba(95, 224, 192, .16); }
html[data-mode="dark"] .cal-key .k-full, html[data-mode="dark"] .mv-cal .k-full { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .15); }
html[data-mode="dark"] .cal-head button { background: rgba(95, 224, 192, .16); color: #e9fff8; }
html[data-mode="dark"] .mv-cal .cal-head button { background: #ecebfa; color: #1d1a3d; }
html[data-mode="dark"] .cal .dow, html[data-mode="dark"] .mv-cal .dow { color: #9d9ac6; }
/* forms */
html[data-mode="dark"] :is(.f input, .f textarea, .f select, .pd-form select, .pd-form input, .pd-form textarea, .yours .inp, .mv-body input) {
  background: #1a1840; color: var(--ink); border-color: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}
html[data-mode="dark"] ::placeholder { color: #8e8bb8; }
html[data-mode="dark"] .sl-track { background: rgba(255, 255, 255, .14); }
html[data-mode="dark"] .sl-thumb { background: #ecebfa; }
/* misc */
html[data-mode="dark"] .dh-kicker, html[data-mode="dark"] .lv-kicker { color: #5fe0c0; }
html[data-mode="dark"] .wa-round { color: #fff; }
html[data-mode="dark"] .ts-item b, html[data-mode="dark"] .ts-score { color: var(--ink); }
html[data-mode="dark"] .ts-score span:last-child { color: #ffad66; }
html[data-mode="dark"] .msg { color: #ff9fae; }
html[data-mode="dark"] .rabbit-card { background: linear-gradient(160deg, #2c2858, #1e1b44); }
html[data-mode="dark"] .skeleton { background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .1), rgba(255, 255, 255, .05)); }
html[data-mode="dark"] .quick-pick { background: var(--candy); }
html[data-mode="dark"] .day-closed .dnum, html[data-mode="dark"] .day[disabled] .dnum { color: #8b88b5; }
html[data-mode="dark"] .dfree { color: #5fe0c0; }
html[data-mode="dark"] .dfull { color: #ff9fae; }
html[data-mode="dark"] .date-btn { background: #1a1840; color: var(--ink); border-color: rgba(255, 255, 255, .16); }
html[data-mode="dark"] .date-btn.empty { color: #ffad66; }
html[data-mode="dark"] .rp-tile { background: rgba(95, 224, 192, .12); border-color: rgba(95, 224, 192, .4); }
html[data-mode="dark"] .rp-tile b { color: #5fe0c0; }
html[data-mode="dark"] .rp-tile.none { background: rgba(255, 138, 43, .12); border-color: rgba(255, 138, 43, .4); }
html[data-mode="dark"] .rp-tile.none b { color: #ffad66; }
/* the party page */
html[data-mode="dark"] { --orange-soft: rgba(255, 138, 43, .14); }
html[data-mode="dark"] .invite .band, html[data-mode="dark"] .invite .band * { color: #1d1a3d; }
html[data-mode="dark"] .todo .n { background: #ecebfa; color: #1d1a3d; }
html[data-mode="dark"] .todo .n.done { background: var(--mint); color: #1d1a3d; }
html[data-mode="dark"] .hold-alert { color: #ffad66; }
html[data-mode="dark"] .pip, html[data-mode="dark"] .playing-card .pip { color: #ff7a85; }
html[data-mode="dark"] .potion { background: rgba(255, 255, 255, .1); }
html[data-mode="dark"] { --bad: #ff8f86; --bad-bg: rgba(255, 95, 110, .14); --ok: #5fe0c0; --ok-bg: rgba(95, 224, 192, .14); --warn: #ffc56b; --warn-bg: rgba(255, 190, 90, .14); --purple-soft: rgba(160, 140, 255, .16); --paper-2: rgba(255, 255, 255, .08); }
/* small phones: a slightly smaller switch so the top bar stays on one line */
@media (max-width: 420px) {
  .mode-switch .ms-track { width: 64px; height: 40px; }
  .mode-switch .ms-ico, .mode-switch .ms-ico svg { width: 20px; height: 20px; }
  .mode-switch .ms-ico { top: 10px; }
  .mode-switch .ms-sun { left: 8px; } .mode-switch .ms-moon { right: 8px; }
  .mode-switch .ms-knob { width: 32px; height: 32px; }
  .mode-switch[aria-checked="true"] .ms-knob { transform: translateX(24px); }
  header.nav { gap: 8px; }
  header.nav .brand img { height: 32px; }
  header.nav .nav-acts { gap: 6px; }
}
@media (max-width: 420px) {
  html.silver .wl-head { gap: 8px; padding-left: 10px; }
  html.silver .wl-head .logo img { height: 32px; }
  html.silver .wl-head .title { font-size: 16px; line-height: 1.1; min-width: 0; flex: 1 1 0; }
  html.silver .wl-head nav[aria-label="Primary"] { flex: none; }
}
header.nav .brand { flex: none; }
/* mid-size screens: "Book a party" is already in the links, so the extra Book now button steps aside to make room */
@media (min-width: 980px) and (max-width: 1199px) { header.nav .nav-acts .btn-main { display: none; } }

/* the booking calendar at night: make it read like the light one. Free days are the bright, obvious boxes;
   past and closed days are plain faint numbers with no box; full days are soft pink and clearly "Full". */
html[data-mode="dark"] .cal-wrap .day.day-closed, html[data-mode="dark"] .cal-wrap .day.day-closed:disabled,
html[data-mode="dark"] .mv-cal .day.day-closed { background: transparent; box-shadow: none; border-color: transparent; color: #6f6c96; }
html[data-mode="dark"] .cal-wrap .day.day-closed .dnum { color: #6f6c96; }
html[data-mode="dark"] .cal-wrap .day.day-available, html[data-mode="dark"] .mv-cal .day.day-available {
  background: rgba(95, 224, 192, .26); box-shadow: inset 0 0 0 2.5px #5fe0c0, 0 6px 16px -8px rgba(95, 224, 192, .7); color: #ffffff; }
html[data-mode="dark"] .cal-wrap .day.day-available .dnum { color: #ffffff; font-weight: 700; }
html[data-mode="dark"] .cal-wrap .day.day-available .dfree { color: #8ff0d6; }
html[data-mode="dark"] .cal-wrap .day.day-available:hover { background: #5fe0c0; }
html[data-mode="dark"] .cal-wrap .day.day-available:hover .dnum, html[data-mode="dark"] .cal-wrap .day.day-available:hover .dfree { color: #1d1a3d; }
html[data-mode="dark"] .cal-wrap.big .day.day-booked:disabled, html[data-mode="dark"] .cal-wrap .day.day-booked {
  background: rgba(255, 95, 120, .08); box-shadow: inset 0 0 0 1px rgba(255, 120, 140, .22); color: #c98a97; }
html[data-mode="dark"] .cal-wrap .day.day-booked .dnum { color: #c98a97; }
html[data-mode="dark"] .cal-wrap .day.day-booked .dfull { color: #ff9fae; }
html[data-mode="dark"] .cal-key .k-free { background: rgba(95, 224, 192, .26); box-shadow: inset 0 0 0 2px #5fe0c0; }
/* free days: solid mint with dark numbers, the brightest thing on the calendar */
html[data-mode="dark"] .cal-wrap .day.day-available, html[data-mode="dark"] .mv-cal .day.day-available { background: #5fe0c0; box-shadow: 0 6px 16px -8px rgba(95, 224, 192, .8); color: #1d1a3d; }
html[data-mode="dark"] .cal-wrap .day.day-available .dnum { color: #1d1a3d; }
html[data-mode="dark"] .cal-wrap .day.day-available .dfree { color: #0b5c48; }
html[data-mode="dark"] .cal-wrap .day.day-available:hover { background: #8ff0d6; }
html[data-mode="dark"] .cal-key .k-free, html[data-mode="dark"] .mv-cal .k-free { background: #5fe0c0; box-shadow: none; }
/* the day you've tapped: orange, like in light mode */
html[data-mode="dark"] .cal-wrap .day.picked, html[data-mode="dark"] .cal-wrap .day.day-available.picked, html[data-mode="dark"] .mv-cal .day.picked {
  background: var(--candy); box-shadow: 0 0 0 3px #ffffff, 0 8px 18px -8px rgba(255, 110, 20, .9); color: #fff; }
html[data-mode="dark"] .cal-wrap .day.picked .dnum, html[data-mode="dark"] .cal-wrap .day.picked .dfree { color: #fff; }

/* night-time words: brighter, so the smaller grey-blue text reads as easily as the white headings */
html[data-mode="dark"] { --ink: #f4f3fd; --ink-2: #ebeafa; --ink-muted: #dad8f2; --muted: #dad8f2; --on-navy: #f4f3fd; --on-navy-muted: #dad8f2; }
html[data-mode="dark"] :is(.small-note, .ink-muted, .muted, .fine, .note, .lead, .ts-item, .ts-foot, .cal-key, .rf-note, .src, figcaption, .faq p, .steps li span, .day-card span, .facts li span) { color: #dad8f2; }
html[data-mode="dark"] .steps .n { color: #fff; } /* the numbers sit on orange badges: keep them dark so they can be read */
html[data-mode="dark"] .cal .dow, html[data-mode="dark"] .mv-cal .dow { color: #cfcdea; }
html[data-mode="dark"] .foot, html[data-mode="dark"] .foot p, html[data-mode="dark"] .pwhen, html[data-mode="dark"] .price.featured p { color: #e6e4f8; }
html[data-mode="dark"] .cal-wrap .day.day-booked .dnum { color: #ecc2ca; }
html[data-mode="dark"] .b-purple, html[data-mode="dark"] .b-purple:hover { color: #fff; }

/* ---------- Oct 2026 audit fixes ---------- */
/* calendar "FULL" labels: bigger, and pink that reads clearly on the navy */
html[data-mode="dark"] .dfull, html[data-mode="dark"] .cal-wrap .day.day-booked .dfull { font-size: 16px; font-weight: 700; color: #ffb3bf; }
/* party page sign-in: "Stuck on anything?" and the small words in the same card were grey on navy */
html[data-mode="dark"] .help-note, html[data-mode="dark"] .signin p, html[data-mode="dark"] .signin label, html[data-mode="dark"] .signin .opt, html[data-mode="dark"] .pt .card-ink p { color: #dad8f2; }
/* the note under a time when it is a different hire type from the rest of the day (e.g. the 3 Hour Special) */
html[data-mode="dark"] .wide.slot .slot-note { color: #dad8f2; }