/* The look "Abbey Night": the colours and classes of the approved demo's phone screens.
   One file for every page. Blocks: fonts, base, shared pieces, guest pages, staff pieces of the demo.
   No inline styles anywhere on the site (the content rules forbid them). */

/* ---- fonts (files in /assets/fonts, from the @fontsource packages) */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jost-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jost-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/jost-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/dm-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/dm-mono-latin-500-normal.woff2') format('woff2'); }

/* ---- base */
:root {
  color-scheme: dark;
  --night: #0E0909; --panel: #171011; --raised: #221718; --line: #3A2A2C;
  --garnet: #621218; --garnet-deep: #2C080B; --bone: #E6DED2; --muted: #B9AB98; --gold: #FCC721; --brass: #B08B57; --ok: #7BD88F; --warn: #FF9A8A;
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body: 'Jost', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'DM Mono', Consolas, 'Courier New', monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--night); color: var(--bone); font-family: var(--body); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--bone); font: 400 18px/1.6 var(--body); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; margin: 0; letter-spacing: 0.01em; }
p { margin: 0; }
a { color: var(--gold); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }

/* the page is the demo's phone screen, filling the phone */
.screen { background: var(--panel); min-height: 100vh; min-height: 100dvh; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; }
.pad { padding: 18px 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.stack { display: flex; flex-direction: column; gap: 14px; margin: 0; }
main.plain { max-width: 460px; margin: 0 auto; min-height: 100vh; background: var(--panel); display: flex; flex-direction: column; gap: 14px; }

/* ---- shared pieces */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; min-height: 44px; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; font: 500 15px/1.2 var(--body); color: var(--bone); }
.btn:hover { border-color: var(--brass); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1205; font-weight: 600; }
.btn.gold:hover { filter: brightness(1.06); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.kicker { font: 500 12px/1.2 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); margin: 0; }
.slogan { font: 600 30px/1.04 var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.slogan.small { font-size: 26px; line-height: 1.1; }
.left { font: 500 15px/1.2 var(--body); color: var(--gold); }
input[type="text"] { width: 100%; background: #0c0707; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font: 400 16px/1.2 var(--body); color: var(--bone); }
input::placeholder { color: #8a7d6f; }
.note { font-size: 14px; line-height: 1.45; color: var(--muted); }
.note a { color: var(--bone); }
.err { color: var(--warn); font-size: 14px; text-align: center; }
.queue { background: #0c0707; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 15px; overflow-wrap: anywhere; }
.queue small { color: var(--muted); display: block; font-size: 13px; }
.set { color: var(--ok); font-weight: 500; }
.waitrow { background: #1c1406; border: 1px solid var(--gold); border-radius: 8px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.waitrow code { font: 500 17px/1 var(--mono); color: var(--gold); white-space: nowrap; flex: none; }
.waitrow small { color: var(--muted); font-size: 13px; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* ---- guest pages: the form */
.shots { font: 500 15px/1.35 var(--body); color: var(--gold); }
.nights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nights button { min-height: 68px; min-width: 0; background: #0c0707; border: 1px solid var(--line); border-radius: 10px; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--bone); }
.nights b { font: 600 14px/1.2 var(--body); overflow-wrap: anywhere; }
.nights small { font-size: 12px; line-height: 1.25; color: var(--muted); text-align: center; }
.nights small.free { color: var(--gold); }
.nights small.full { color: var(--warn); }
.nights button[aria-pressed="true"] { border-color: var(--gold); background: #1c1406; }
.nights button[disabled] { opacity: 0.55; cursor: not-allowed; }
a.passlink { text-decoration: none; color: inherit; min-height: 48px; }
.passlink small { text-align: left; font-size: 15px; color: var(--bone); display: flex; flex-direction: column; gap: 2px; }
.passlink small span { font-size: 13px; color: var(--muted); }
.passlink .go { font: 600 14px/1 var(--body); color: var(--gold); flex: none; }

/* ---- guest pages: the pass */
.ticket { background: linear-gradient(180deg, #1d1213, #120a0b); border: 1px solid var(--brass); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.ticket .code { font: 500 34px/1 var(--mono); letter-spacing: 0.08em; color: var(--gold); }
.ticket .songline { font: 600 23px/1.15 var(--display); overflow-wrap: anywhere; }
.state { font: 600 13px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; }
.state.wait { background: #2b2206; color: var(--gold); border: 1px solid #5d4a0c; }
.state.in { background: #0f2a17; color: var(--ok); border: 1px solid #235a35; }
.state.over { background: #1d1717; color: var(--muted); border: 1px solid var(--line); }
.storybox { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; background: #0c0707; border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px; }
.storybox img { width: 200px; height: 356px; border-radius: 8px; border: 1px solid var(--line); flex: none; display: block; background: var(--garnet-deep); }
.storybox div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.storybox b { font: 600 16px/1.25 var(--body); color: var(--bone); }
.storybox .btn { margin: 4px 0; }

/* ---- guest pages: privacy */
.lead { font-size: 17px; line-height: 1.5; }
.plainlist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* ---- the bar's phone: the pieces of the demo's staff screen */
.staffbar { background: #0b0606; padding: 12px 16px; font: 500 14px/1.2 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; }
.chips { display: flex; gap: 6px; }
.chips button { flex: 1 1 0; min-width: 0; min-height: 44px; background: #0c0707; border: 1px solid var(--line); border-radius: 999px; padding: 9px 0; font: 500 16px/1 var(--mono); color: var(--bone); }
.chips button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1a1205; }
.check { display: flex; gap: 10px; align-items: flex-start; background: #0c0707; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 15px; text-align: left; width: 100%; min-height: 44px; }
.check i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--brass); flex: none; display: block; margin-top: 1px; }
.check[aria-pressed="true"] i { background: var(--gold); border-color: var(--gold); box-shadow: inset 0 0 0 4px #0c0707; }
.switch { display: flex; align-items: center; gap: 14px; background: #0c0707; border: 1px solid var(--gold); border-radius: 14px; padding: 12px 14px; width: 100%; text-align: left; }
.switch .track { width: 74px; height: 40px; border-radius: 999px; background: #2a1f20; border: 1px solid var(--line); position: relative; flex: none; transition: background 0.25s; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 32px; height: 32px; border-radius: 50%; background: var(--muted); transition: left 0.25s, background 0.25s; }
.switch.on { border-color: #2f7a47; cursor: default; }
.switch.on .track { background: #1d4a2b; border-color: #2f7a47; }
.switch.on .knob { left: 37px; background: var(--ok); }
.switch b { font: 600 17px/1.2 var(--body); display: block; }
.switch small { display: block; font-size: 13px; color: var(--muted); }
.switch[disabled]:not(.on) { opacity: 0.55; cursor: not-allowed; border-color: var(--line); }
.codebox { display: flex; align-items: center; justify-content: center; gap: 8px; font: 500 26px/1 var(--mono); color: var(--gold); }
.codebox .pre { margin-right: 2px; }
.codebox .slot { width: 42px; height: 54px; border: 1px solid var(--line); border-radius: 8px; background: #0c0707; display: flex; align-items: center; justify-content: center; }
.codebox .slot.next { border-color: var(--gold); }
.keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.keys button { min-height: 48px; background: #0c0707; border: 1px solid var(--line); border-radius: 10px; font: 500 20px/1 var(--mono); color: var(--bone); }
.keys button:hover { border-color: var(--brass); }
.keys button.wide { font: 500 14px/1 var(--body); color: var(--muted); }
button.pickrow { width: 100%; min-height: 48px; text-align: left; font: inherit; color: inherit; }
.pickrow small { text-align: left; font-size: 15px; color: var(--bone); }
.pickrow .go { font: 600 14px/1 var(--body); color: var(--gold); flex: none; }

@media (prefers-reduced-motion: reduce) { .switch .track, .switch .knob { transition: none; } }

/* ---- guest pages: the reminder panel and the story page (build step 5) */
.remind { display: flex; flex-direction: column; gap: 10px; }
#rlink { overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.remind b { font: 600 16px/1.25 var(--body); color: var(--bone); }
.times { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font: 500 16px/1.3 var(--mono); color: var(--gold); }
.note.loud { color: var(--gold); font-size: 16px; font-weight: 600; border: 1px solid var(--gold); border-radius: 8px; padding: 10px 12px; background: #1c1406; }
.storybig { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 10px; border: 1px solid var(--line); display: block; background: var(--garnet-deep); -webkit-touch-callout: default; }