/* The page layer laid over the 3D hall. Every value comes from DESIGN.md (ei-design, 2026-10-26); the
   section of DESIGN.md is named beside each block. Two surfaces only: paper for printed things (door,
   card, ticket) and night for things that float over the hall (bars, sheets, seat buttons) (DESIGN 1).
   Logical properties only, so Arabic can switch direction without a rebuild (DESIGN 7, decision 10).
   No text rows with thin lines between them anywhere: space does the grouping (Design decision 22, UI-A6). */
@import url("../../vendor/fonts/fonts.css");

:root {
  /* DESIGN 2: surfaces */
  --paper: #F6F0E6;
  --paper-deep: #EDE3D2;
  --night: #16244A;
  --night-glass: rgba(22, 36, 74, 0.92);
  --dusk: #2E4785;
  /* DESIGN 2: ink and text */
  --ink: #1E3168;
  --ink-soft: #5B6B8F;
  --gold-ink: #7A5A1E;
  --cream: #F6F0E6;
  --mist: #B9C6E4;
  --gold: #D6B565;
  --gold-bright: #E2BE6E;
  --candle: #FFC98A;
  --rose: #E9C4C4;
  --alert-paper: #B4483E;
  --alert-night: #F2A79A;
  --slate: #4A5C86;
  --door: #22386A;
  --door-groove: #D6B565;
  --edge-glow: #FFE2B8;
  /* DESIGN 2: side accents (the halls are never mixed, decision 3) */
  --seal: var(--rose);
  --side-mark: var(--rose);
  --sky: #4F6DB8;

  /* DESIGN 3: type */
  --f-display: "Newsreader", Georgia, "Times New Roman", serif;
  --f-ui: "Hanken Grotesk", system-ui, "Segoe UI", sans-serif;
  --f-ar: "Noto Naskh Arabic", "Segoe UI", Tahoma, serif;
  --t-show: clamp(2rem, 1.2rem + 3.6vw, 2.75rem);
  --t-h1: clamp(1.625rem, 1.2rem + 1.8vw, 2rem);
  --t-h2: 1.25rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-label: 0.8125rem;

  /* DESIGN 4: space, corners, targets */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --r-card: 4px;
  --r-field: 8px;
  --r-full: 999px;
  --seat: 52px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* DESIGN 5: the one finish */
  --night-edge: rgba(214, 181, 101, 0.35);
  --night-shadow: 0 -8px 32px rgba(8, 14, 32, 0.45);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  /* DESIGN 6: motion */
  --ease-arrive: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-show: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-leave: cubic-bezier(0.4, 0, 1, 1);
  --ease-across: cubic-bezier(0.65, 0, 0.35, 1);
  --d-press: 90ms;
  --d-small: 150ms;
  --d-arrive: 260ms;
  --d-panel: 360ms;
  --d-show: 700ms;
}
html[data-side="men"] { --seal: var(--gold); --side-mark: var(--gold); }
html[data-mood="day"] { --sky: #BFD3FF; }
html[data-mood="afternoon"] { --sky: #F6C6A8; }
html[data-mood="maghrib"] { --sky: #D9B9C8; }
html[data-mood="night"] { --sky: #4F6DB8; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--cream); }
body {
  font: 400 var(--t-body)/1.55 var(--f-ui);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow: hidden; overscroll-behavior: none; touch-action: manipulation;
}
html[lang="ar"] body { font-family: var(--f-ar); }
[lang="ar"] { font-family: var(--f-ar); font-weight: 500; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.num, .mark, output, .ticket .v { font-variant-numeric: tabular-nums lining-nums; } /* DESIGN 3, UI-B7 */
.noscript { padding: var(--s5); }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.on-paper :focus-visible { outline-color: var(--ink); }
html[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* ---------- the stage and layers (DESIGN 4, layers) ---------- */
#stage { position: fixed; inset: 0; inline-size: 100%; block-size: 100%; display: block; z-index: 0; touch-action: none; }
#still { position: fixed; inset: 0; z-index: 1; background: var(--dusk) center / cover no-repeat; opacity: 0; transition: opacity .6s var(--ease-arrive); pointer-events: none; }
html.is-still #still { opacity: 1; }
#app { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#app > * { pointer-events: auto; }
#app > .layer-pass { pointer-events: none; }
#app > .layer-pass > * { pointer-events: auto; }

/* ---------- buttons (DESIGN 4: arch main button, 56 px; every control 48 px or more, UX-C3) ---------- */
.btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: var(--s2);
  min-block-size: 48px; padding-inline: var(--s5); border: 0; text-decoration: none;
  font: 600 var(--t-body)/1.2 var(--f-ui); letter-spacing: 0.01em;
  transition: transform var(--d-press) var(--ease-arrive);   /* transform only (WEB-E4) */
}
.btn:active { transform: scale(0.97); }
.btn svg { inline-size: 20px; block-size: 20px; flex: none; }
/* the one main action: round shoulders, square feet, like the hall's doorways (DD-11, DD-18) */
.btn.main {
  inline-size: 100%; min-block-size: 56px; background: var(--gold); color: var(--night);
  border-start-start-radius: 20px; border-start-end-radius: 20px; border-end-end-radius: 8px; border-end-start-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.6), 0 6px 18px rgba(8, 14, 32, 0.35);
}
/* the second choice: an outline in the same arch, never a second gold fill (UI-A1) */
.btn.soft {
  inline-size: 100%; min-block-size: 52px; background: transparent; color: var(--cream);
  border-start-start-radius: 20px; border-start-end-radius: 20px; border-end-end-radius: 8px; border-end-start-radius: 8px;
  box-shadow: inset 0 0 0 1.5px rgba(185, 198, 228, 0.55);
}
.on-paper .btn.soft { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(30, 49, 104, 0.45); }
/* a quiet text action with a small chevron (no plain underline, ever) */
.btn.quiet { min-block-size: 48px; padding-inline: var(--s3); background: transparent; color: var(--gold); font-weight: 600; }
.btn.quiet::after { content: ''; inline-size: 7px; block-size: 7px; border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor; transform: rotate(45deg); margin-inline-start: 2px; }
html[dir="rtl"] .btn.quiet::after { transform: rotate(-135deg); }
.on-paper .btn.quiet { color: var(--ink); }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .label { opacity: 0; }
.btn .spin { display: none; position: absolute; inline-size: 22px; block-size: 22px; border-radius: 50%; border: 2.5px solid rgba(22, 36, 74, 0.25); border-block-start-color: var(--night); animation: spin .8s linear infinite; }
.btn[aria-busy="true"] .spin { display: block; }
.btn.done .label { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (hover: hover) {
  .btn.main:hover { background: var(--gold-bright); }
  .btn.soft:hover { box-shadow: inset 0 0 0 1.5px var(--gold); }
  .btn.quiet:hover { color: var(--gold-bright); }
  .icon-btn:hover { background: rgba(246, 240, 230, 0.16); }
}
.icon-btn {
  inline-size: 48px; block-size: 48px; border-radius: var(--r-full); border: 0; display: grid; place-items: center; flex: none;
  background: rgba(246, 240, 230, 0.08); color: var(--cream);
}
.icon-btn svg { inline-size: 22px; block-size: 22px; }
.on-paper .icon-btn { background: rgba(30, 49, 104, 0.07); color: var(--ink); }

/* ---------- top bar: night panel, back at the inline start (UI-G1, DESIGN 5 and 7) ---------- */
.topbar {
  position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s3);
  padding: calc(var(--safe-t) + var(--s2)) var(--s4) var(--s2);
  background: var(--night-glass); border-block-end: 1px solid var(--night-edge);
  box-shadow: 0 8px 24px rgba(8, 14, 32, 0.35);
}
.topbar .titles { flex: 1; min-inline-size: 0; }
.topbar .title { font: 400 var(--t-h2)/1.3 var(--f-display); color: var(--cream); }
.topbar .sub { display: flex; align-items: center; gap: var(--s2); font: 600 var(--t-label)/1.3 var(--f-ui); letter-spacing: .06em; font-variant-caps: all-small-caps; color: var(--mist); }
/* the hall's dot and the small sky dot that follows the prayer-day mood (DESIGN 2, time of day) */
.dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--side-mark); flex: none; }
.dot.sky { background: var(--sky); box-shadow: 0 0 0 2px rgba(246, 240, 230, 0.15); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font: 600 var(--t-label)/1.3 var(--f-ui); letter-spacing: .06em; font-variant-caps: all-small-caps; color: var(--mist); }

/* ---------- the dock: night sheets rising from where the thumb is (UI-E17, DESIGN 4 and 5) ---------- */
.dock { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; display: grid; justify-items: center; align-items: end; pointer-events: none; }
/* every sheet sits in the same cell, so the one sliding out goes under the new one instead of beside it (UI-E17) */
.dock > .sheet { grid-area: 1 / 1; }
.dock > .sheet.leaving { pointer-events: none; z-index: 0; }
.dock > .sheet:not(.leaving) { z-index: 1; }
.sheet {
  pointer-events: auto; position: relative; inline-size: min(100%, 440px);
  background: var(--night-glass); color: var(--cream);
  border-start-start-radius: 16px; border-start-end-radius: 16px;
  border-block-start: 1px solid var(--night-edge); box-shadow: var(--night-shadow);
  --pad-b: calc(var(--safe-b) + var(--s5));
  padding: var(--s2) var(--s5) var(--pad-b);
  max-block-size: calc(100dvh - var(--safe-t) - 72px); overflow: auto; overscroll-behavior: contain; touch-action: pan-y;
}
.sheet .grab { display: block; margin: calc(var(--s2) * -1) auto 0; inline-size: 64px; block-size: 48px; border: 0; background: transparent; position: relative; touch-action: none; }
.sheet .grab::before { content: ''; position: absolute; inset-inline: 18px; inset-block-start: 22px; block-size: 4px; border-radius: 2px; background: rgba(185, 198, 228, 0.4); }
/* where the grab is only drawn (not a button) it needs no 48 px box: the bar keeps its place, the sheet loses 24 px of empty space */
.sheet span.grab { block-size: 24px; }
.sheet span.grab::before { inset-block-start: 10px; }
.sheet .close { position: absolute; inset-block-start: var(--s2); inset-inline-end: var(--s3); }
.sheet h2 { font: 400 var(--t-h1)/1.15 var(--f-display); color: var(--cream); }
.sheet h3 { font: 500 var(--t-h2)/1.3 var(--f-display); color: var(--cream); }
.sheet p { color: var(--mist); }
.sheet .stack { display: grid; gap: var(--s3); }
.sheet .actions { display: grid; gap: var(--s2); margin-block-start: var(--s5); }
.sheet.peek { max-block-size: 120px; overflow: hidden; }

/* ---------- paper: the card and the ticket (DESIGN 1 and 5: printed paper, faint grain, gold keyline) ---------- */
.paper {
  position: relative; background: var(--paper); color: var(--ink); border-radius: var(--r-card);
}
.paper::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--grain); opacity: .04; mix-blend-mode: multiply; pointer-events: none; }
.paper .keyline { position: absolute; inset: 8px; border: 1px solid var(--gold); border-radius: 2px; pointer-events: none; }

/* the card sheet: paper rising over the hall, the main button kept low and in reach (UI-E17) */
.sheet.card-sheet { background: var(--paper); color: var(--ink); border-block-start: 0; padding: 0; border-start-start-radius: var(--r-card); border-start-end-radius: var(--r-card); box-shadow: 0 -10px 40px rgba(8, 14, 32, 0.55); max-block-size: calc(100dvh - var(--safe-t) - 96px); display: flex; flex-direction: column; overflow: hidden; }
.sheet.card-sheet::before { content: ''; position: absolute; inset: 0; background: var(--grain); opacity: .04; mix-blend-mode: multiply; pointer-events: none; }
.sheet.card-sheet .grab::before { background: rgba(30, 49, 104, 0.25); }
.sheet.card-sheet .grab { margin-block: 0 calc(var(--s3) * -1); flex: none; }
.sheet.card-sheet.peek { max-block-size: 150px; }
.invite { display: flex; flex-direction: column; min-block-size: 0; flex: 1; }
.invite .scroll { overflow: auto; overscroll-behavior: contain; padding: var(--s2) var(--s5) var(--s4); position: relative; }
.invite .print { position: relative; padding: var(--s6) var(--s5) var(--s5); text-align: center; }
.invite .print .keyline { inset: 0; }
.invite .basmala { font-size: 1.25rem; line-height: 1.6; color: var(--gold-ink); }
.invite .lead { margin-block-start: var(--s4); font-size: var(--t-body); line-height: 1.55; color: var(--ink); max-inline-size: 30ch; margin-inline: auto; }
.invite .groom { margin-block-start: var(--s3); font: 400 var(--t-show)/1.1 var(--f-display); color: var(--ink); }
.invite .bride { margin-block-start: var(--s2); font: italic 400 1.25rem/1.35 var(--f-display); color: var(--ink); }
.invite .star { display: block; inline-size: 22px; block-size: 22px; margin: var(--s5) auto 0; color: var(--gold); }
.invite .date { margin-block-start: var(--s4); font: 500 var(--t-h2)/1.3 var(--f-display); color: var(--ink); }
.invite .hijri { margin-block-start: var(--s1); font-size: 1.0625rem; color: var(--gold-ink); }
.invite .time, .invite .place { margin-block-start: var(--s1); font-size: var(--t-small); color: var(--ink-soft); }
.invite .time { margin-block-start: var(--s2); }
/* the guest's own notes sit in soft tiles, start-aligned (UI-B4), never as ruled rows (DD-22) */
.invite .notes { display: grid; gap: var(--s2); margin-block-start: var(--s4); text-align: start; }
.invite .tile { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-field); background: var(--paper-deep); font-size: var(--t-small); line-height: 1.45; color: var(--ink); }
.invite .tile svg { inline-size: 22px; block-size: 22px; flex: none; color: var(--gold-ink); margin-block-start: 1px; }
.invite .foot { flex: none; position: relative; padding: var(--s3) var(--s5) calc(var(--safe-b) + var(--s3)); background: var(--paper); box-shadow: 0 -12px 16px -12px rgba(30, 49, 104, 0.18); display: grid; gap: var(--s1); }
.invite .side-line { margin-block-start: var(--s4); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--s1); font-size: var(--t-small); color: var(--ink-soft); text-align: center; }
.invite .side-line .btn.quiet { min-block-size: 48px; padding-inline: var(--s1); font-size: var(--t-small); }

/* ---------- the hall's door: the opening story (option A, design/previews/08-journey-look; DD-23) ---------- */
.cover { position: fixed; inset: 0; z-index: 40; overflow: hidden; }
.cover.veil { display: grid; place-content: center; justify-items: center; gap: var(--s4); padding-inline: var(--s5); text-align: center; }
.cover.veil .star { inline-size: 44px; block-size: 44px; color: var(--gold); }
.cover.veil p { font: 400 var(--t-h2)/1.25 var(--f-display); color: var(--cream); }
.cover.veil .side { font-size: var(--t-small); color: var(--mist); }
.door-scene { background: var(--night); display: flex; flex-direction: column; align-items: center; padding: calc(var(--safe-t) + 56px) var(--s5) calc(var(--safe-b) + 40px); }
.door-scene .backdrop { position: absolute; inset: 0; background: radial-gradient(70% 45% at 50% 42%, rgba(46, 71, 133, 0.55), transparent 70%), linear-gradient(180deg, rgba(14, 24, 52, 0.9), rgba(30, 49, 104, 0.5) 45%, rgba(14, 24, 52, 0.95)); }
.door-scene .pattern { position: absolute; inset: 0; opacity: .08; background-image: var(--star-pattern); background-size: 92px 92px; mask-image: radial-gradient(70% 50% at 50% 45%, #000, transparent 80%); -webkit-mask-image: radial-gradient(70% 50% at 50% 45%, #000, transparent 80%); }
.door-scene > :not(.backdrop):not(.pattern) { position: relative; }
.door-scene .to { margin-block-start: var(--s2); font: 400 var(--t-h1)/1.15 var(--f-display); color: var(--cream); text-align: center; }
.gate { position: relative; inline-size: min(256px, 66vw); aspect-ratio: 256 / 400; max-block-size: 46dvh; margin-block-start: var(--s5); perspective: 1100px; }
.gate .view { position: absolute; inset: 0; border-start-start-radius: 48.5% 27.5%; border-start-end-radius: 48.5% 27.5%; background: var(--night) center 56% / cover no-repeat; overflow: hidden; }
.gate .view .shade { position: absolute; inset: 0; background: rgba(8, 14, 32, 0.5); }
.gate .light { position: absolute; inset: -40px -60px; background: radial-gradient(ellipse 40% 55% at 50% 52%, rgba(255, 226, 184, 0.95), rgba(255, 201, 138, 0.45) 45%, rgba(255, 201, 138, 0) 70%); opacity: 0; transform: scaleX(.08); }
.gate .leaf { position: absolute; inset-block: 0; inline-size: 50%; background: linear-gradient(180deg, #2A4380 0%, var(--door) 45%, #1B2D5A 100%); border: 2px solid var(--door-groove); transform-style: preserve-3d; }
.gate .leaf.l { inset-inline-start: 0; border-start-start-radius: 96.9% 27.5%; border-inline-end-width: 1px; transform-origin: 0 50%; }
.gate .leaf.r { inset-inline-end: 0; border-start-end-radius: 96.9% 27.5%; border-inline-start-width: 1px; transform-origin: 100% 50%; }
html[dir="rtl"] .gate .leaf.l { transform-origin: 100% 50%; }
html[dir="rtl"] .gate .leaf.r { transform-origin: 0 50%; }
.gate .leaf .groove { position: absolute; inset: 14px 12px; border: 1.5px solid rgba(214, 181, 101, 0.75); }
.gate .leaf.l .groove { border-start-start-radius: 98% 24.7%; inset-inline-end: 10px; }
.gate .leaf.r .groove { border-start-end-radius: 98% 24.7%; inset-inline-start: 10px; }
.gate .leaf svg { position: absolute; inset-block-start: 40%; inline-size: 46px; block-size: 46px; color: var(--gold); }
.gate .leaf.l svg { inset-inline-end: 18px; }
.gate .leaf.r svg { inset-inline-start: 18px; }
.gate .seam { position: absolute; inset-block: 18px 0; inset-inline-start: calc(50% - 1px); inline-size: 2px; background: linear-gradient(180deg, transparent, var(--edge-glow) 30%, var(--edge-glow) 80%, transparent); opacity: .55; filter: blur(.5px); }
.seal { position: absolute; inset-inline-start: 50%; inset-block-start: 56%; inline-size: 84px; block-size: 84px; margin-block-start: -42px; margin-inline-start: -42px; z-index: 5; border: 0; padding: 0; background: none; border-radius: 50%; }
.seal .half { position: absolute; inset: 4px; }
.seal svg { inline-size: 100%; block-size: 100%; display: block; overflow: visible; }
.seal .ring { position: absolute; inset: -6px; }
.seal .ring circle { fill: none; stroke-width: 3; }
.seal .ring .track { stroke: rgba(246, 240, 230, 0.14); }
.seal .ring .fill { stroke: var(--gold); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }  /* no transition: the load events come often, so the ring fills in small steps (WEB-E4) */
.seal .glint { position: absolute; inset: 13px; border-radius: 50%; overflow: hidden; mix-blend-mode: soft-light; pointer-events: none; }
.seal .glint::after { content: ""; position: absolute; inset-block: -20%; inline-size: 30%; inset-inline-start: -40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-18deg); animation: glint 6s 1.5s infinite both; }
@keyframes glint { 0%, 80% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(500%) skewX(-18deg); } }
.door-scene .from { margin-block-start: var(--s5); color: var(--mist); font-size: var(--t-small); text-align: center; }
.door-scene .status { margin-block-start: var(--s2); min-block-size: 1.45em; color: var(--mist); font-size: var(--t-small); text-align: center; }
.door-scene .cta { margin-block-start: auto; inline-size: 100%; max-inline-size: 390px; }
.door-scene .btn.main .mini { inline-size: 18px; block-size: 18px; color: var(--night); }

/* ---------- the flight: caption, pause and skip within reach (WEB-E2, WEB-E5) ---------- */
.flight-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; padding: 0 var(--s5) calc(var(--safe-b) + 40px); display: grid; gap: var(--s4); pointer-events: none; }
.flight-bar > * { pointer-events: auto; }
/* the runway and petals can be bright behind the caption: a soft night wash keeps it readable on every frame (contrast over imagery, 09-ui-visual) */
.flight-bar::before { content: ""; position: absolute; inset: -96px 0 0; z-index: -1; background: linear-gradient(to top, rgba(8, 14, 32, 0.78) 0%, rgba(8, 14, 32, 0.55) 55%, rgba(8, 14, 32, 0) 100%); pointer-events: none; }
.flight-bar .caption { font: 400 var(--t-h1)/1.15 var(--f-display); color: var(--cream); text-shadow: 0 2px 18px rgba(8, 14, 32, 0.85); }
.flight-bar .caption small { display: block; margin-block-end: var(--s1); }
.flight-bar .lights { font-size: var(--t-small); color: var(--cream); text-shadow: 0 1px 10px rgba(8, 14, 32, 0.9); }
.flight-bar .row { display: flex; gap: var(--s3); }
.flight-bar .row .btn.soft { inline-size: auto; flex: 1; background: var(--night-glass); }
.flight-bar .row .icon-btn { inline-size: 52px; block-size: 52px; background: var(--night-glass); box-shadow: inset 0 0 0 1.5px rgba(185, 198, 228, 0.55); }

/* ---------- table and seat buttons over the 3D (CONTRACT 5; DESIGN 2, seat states; UI-C11: never colour alone) ---------- */
.marks { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.mark-pos { position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 0; block-size: 0; will-change: transform; }
html[dir="rtl"] .mark-pos { inset-inline-start: auto; left: 0; }
.mark-pos[data-visible="false"] { visibility: hidden; }
.marks[data-cramped="true"] { opacity: 0; visibility: hidden; transition: opacity var(--d-small) var(--ease-leave), visibility 0s linear var(--d-small); }
.marks[data-cramped="true"] .mark { pointer-events: none; }
.mark {
  position: absolute; left: 0; top: 0; inline-size: var(--seat); block-size: var(--seat); margin: calc(var(--seat) / -2) 0 0 calc(var(--seat) / -2);
  border-radius: 50%; border: 0; padding: 0; pointer-events: auto; display: grid; place-items: center;
  font: 600 1.0625rem/1 var(--f-ui); color: var(--cream);
}
.mark > * { grid-area: 1 / 1; }
.mark .face { inline-size: 100%; block-size: 100%; border-radius: 50%; display: grid; place-items: center; transition: transform var(--d-small); }  /* the state change is felt through the pulse ring (marks.js), not a colour fade (WEB-E4) */
.mark svg { inline-size: 20px; block-size: 20px; }
/* tables in the hall view */
.mark.table .face { background: var(--night-glass); box-shadow: inset 0 0 0 2px var(--gold), 0 6px 16px rgba(8, 14, 32, 0.45); }
.mark.table.full .face { background: var(--slate); color: rgba(246, 240, 230, 0.75); box-shadow: inset 0 0 0 1.5px rgba(246, 240, 230, 0.5); transform: scale(.85); }
.mark.table.suggested .face { background: var(--candle); color: var(--night); box-shadow: 0 0 0 3px rgba(255, 201, 138, 0.45), 0 0 24px rgba(255, 201, 138, 0.6); }
/* r3p6, the men's hall: 24 circles, so each badge is 30 px (Design decision 22 is about lists; this is about spacing: no two numbers
   touch, none is cut off). The tap area stays 46 px through an invisible ring, and the guest's own circle is the only large one. */
.mark.table.compact { --seat: 30px; font-size: 0.9375rem; }
.mark.table.compact::before { content: ''; position: absolute; inset: -7.5px; border-radius: 50%; }   /* 45 px tap ring round the 30 px badge (r3p7 pagefix: was 46, now sized so marks.js can keep it off the neighbours' faces) */
.mark.table.compact.suggested::before { inset: -2.5px; }   /* the guest's 40 px badge: 45 px ring too */
.mark.table.compact .face { box-shadow: inset 0 0 0 1.5px var(--gold), 0 3px 8px rgba(8, 14, 32, 0.5); }
.mark.table.compact.full .face { transform: none; box-shadow: inset 0 0 0 1.5px rgba(246, 240, 230, 0.5); }
.mark.table.compact.suggested { --seat: 40px; font-size: 1.125rem; z-index: 2; }
.mark.table.compact.suggested .face { box-shadow: 0 0 0 3px rgba(255, 201, 138, 0.5), 0 0 22px rgba(255, 201, 138, 0.7); }
.mark.table.compact .flag { inset-block-start: -9px; inset-inline-end: -9px; inline-size: 20px; block-size: 20px; }
.mark.table.compact .flag svg { inline-size: 11px; block-size: 13px; }
.mark.table.compact .free { inset-block-start: -7px; inset-inline-end: -9px; min-inline-size: 17px; block-size: 17px; padding: 0 3px; border-radius: 9px; font-size: 10.5px; }
.mark .flag { position: absolute; inset-block-start: -10px; inset-inline-end: -8px; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--night); display: grid; place-items: center; color: var(--candle); box-shadow: 0 0 0 1.5px var(--candle); }
.mark .flag svg { inline-size: 14px; block-size: 14px; }
.mark .free { position: absolute; inset-block-start: -8px; inset-inline-end: -8px; min-inline-size: 22px; block-size: 22px; padding: 0 5px; border-radius: 11px; background: var(--cream); color: var(--night); font-size: 12px; display: grid; place-items: center; }
/* seats at a table */
.mark.seat.open .face { background: var(--night-glass); box-shadow: inset 0 0 0 2px var(--gold), 0 6px 14px rgba(8, 14, 32, 0.4); }
.mark.seat.taken .face { inline-size: 44px; block-size: 44px; background: var(--slate); box-shadow: inset 0 0 0 1.5px rgba(246, 240, 230, 0.5); }
.mark.seat.taken .face::after { content: ''; inline-size: 8px; block-size: 8px; border-radius: 50%; background: rgba(246, 240, 230, 0.75); }
.mark.seat.taken .face .n { display: none; }
.mark.seat.taken.named .face::after { display: none; }
.mark.seat.taken.named .face .ini { display: block; }
.mark .ini { display: none; font-size: 13px; letter-spacing: .02em; color: var(--cream); }
.mark.seat.picked .face { background: var(--gold); color: var(--night); box-shadow: inset 0 0 0 2px var(--cream), 0 0 22px rgba(214, 181, 101, 0.6); }
.mark.seat.party .face { background: var(--night-glass); color: var(--candle); box-shadow: none; outline: 2px dashed var(--candle); outline-offset: -2px; }
.mark.seat.yours .face { background: var(--candle); color: var(--night); box-shadow: 0 0 0 3px rgba(255, 201, 138, 0.45), 0 0 28px rgba(255, 201, 138, 0.55); }
.mark.seat .glyph { display: none; }
.mark.seat.picked .glyph.tick, .mark.seat.party .glyph.plus { display: block; }
.mark.seat.picked .n, .mark.seat.party .n { display: none; }
.mark.seat.yours .face { grid-template-columns: auto auto; gap: 1px; }
.mark.seat.yours .glyph.flame { display: block; inline-size: 13px; block-size: 16px; }
.mark .who { position: absolute; inset-block-start: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--cream); text-shadow: 0 1px 6px rgba(8, 14, 32, 0.95); max-inline-size: 96px; overflow: hidden; text-overflow: ellipsis; }
.mark .pulse { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; pointer-events: none; }

/* the key: three small seat chips side by side (DESIGN 2), never ruled rows (DD-22) */
.key { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s3); }
.key span { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-small); color: var(--cream); padding-block: var(--s1); padding-inline: var(--s1) var(--s3); border-radius: var(--r-full); background: rgba(246, 240, 230, 0.07); }
.key i { inline-size: 24px; block-size: 24px; border-radius: 50%; display: grid; place-items: center; }
.key .k-open { background: var(--night); box-shadow: inset 0 0 0 2px var(--gold); }
.key .k-taken { background: var(--slate); box-shadow: inset 0 0 0 1.5px rgba(246, 240, 230, 0.5); }
.key .k-taken::after { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: rgba(246, 240, 230, 0.75); }
.key .k-yours { background: var(--candle); box-shadow: 0 0 10px rgba(255, 201, 138, 0.6); color: var(--night); }
.key .k-yours svg { inline-size: 10px; block-size: 13px; }

/* table steppers in the table sheet */
.hop { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-block-start: var(--s3); }
.hop .btn.soft { min-block-size: 48px; font-size: var(--t-small); }

/* the flat layouts when the 3D cannot run (CONTRACT 8) */
.flat-table { position: fixed; z-index: 9; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 50% 40%, #fbf6ee, var(--paper-deep) 70%); box-shadow: 0 0 0 6px rgba(214, 181, 101, 0.4), 0 30px 60px rgba(8, 14, 32, 0.5); }
.flat-table.majlis { border-radius: 24px; }
.still-note { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-small); color: var(--mist); padding: var(--s3); border-radius: var(--r-field); background: rgba(246, 240, 230, 0.06); }

/* ---------- the reply (three questions only, decision 6) ---------- */
.reply .as { font-size: var(--t-small); color: var(--mist); }
.q { display: grid; gap: var(--s2); margin-block-start: var(--s5); }
.q > .label { font: 600 var(--t-body)/1.4 var(--f-ui); color: var(--cream); }
.q .help { font-size: var(--t-small); color: var(--mist); }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.choice {
  min-block-size: 52px; border-radius: var(--r-field); border: 0; background: rgba(246, 240, 230, 0.07); color: var(--cream);
  font-weight: 600; font-size: var(--t-small); padding: var(--s2) var(--s3); display: flex; align-items: center; justify-content: center; gap: var(--s2); text-align: center;
  box-shadow: inset 0 0 0 1.5px rgba(185, 198, 228, 0.35); transition: transform var(--d-small);   /* WEB-E4 */
}
.choice[aria-pressed="true"] { background: rgba(214, 181, 101, 0.16); box-shadow: inset 0 0 0 2px var(--gold); }
.choice .tick { inline-size: 18px; block-size: 18px; display: none; color: var(--gold); flex: none; }
.choice[aria-pressed="true"] .tick { display: block; }
.stepper { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: var(--s2); background: rgba(246, 240, 230, 0.07); border-radius: var(--r-full); padding: var(--s1); }
.stepper button { inline-size: 48px; block-size: 48px; border-radius: 50%; border: 0; background: var(--night); color: var(--gold); display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--gold); }
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper button svg { inline-size: 20px; block-size: 20px; }
.stepper output { text-align: center; font: 500 var(--t-h2)/1 var(--f-display); color: var(--cream); overflow: hidden; }
.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--t-small); color: var(--mist); }
.field textarea, .field input { inline-size: 100%; min-block-size: 52px; border-radius: var(--r-field); border: 0; background: rgba(246, 240, 230, 0.96); color: var(--ink); padding: var(--s3) var(--s4); resize: vertical; font-size: var(--t-body); box-shadow: inset 0 0 0 1.5px transparent; }
.field textarea:focus, .field input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.err { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-field); background: rgba(255, 201, 138, 0.13); box-shadow: inset 0 0 0 1.5px rgba(255, 201, 138, 0.55); font-size: var(--t-small); line-height: 1.45; color: var(--candle); }
.err .err-mark { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 1px; }
.err[hidden] { display: none; }
/* the warm tone must beat ".sheet p" (cool mist): candle on the panel is 7.5:1 over a dark hall and 5.9:1 even if the hall behind the glass were white (UI-C11, STD-A1 at least 4.5:1) */
.sheet p.err { color: var(--candle); }
.cap-note { font-size: var(--t-small); color: var(--candle); }

/* ---------- success: the candle (decision 13) ---------- */
.success { text-align: center; }
/* the success sheet never rises above 250 px from the top, at any screen size, so the table and its ring of
   52 px seat buttons always show above it (ei-scene's need: 24 top + 26 + 160 ring + 26 + 8 clear, UX-C3);
   on short screens it scrolls, and its one button stays in reach at the foot (UX-C3, UI-E17 sheets) */
.sheet.success-sheet { max-block-size: calc(100dvh - 250px); }
.success-sheet .success .actions { position: sticky; inset-block-end: calc(var(--pad-b) * -1); margin-block-start: 0; padding-block: var(--s4) var(--pad-b); margin-block-end: calc(var(--pad-b) * -1); background: linear-gradient(to bottom, rgba(22, 36, 74, 0), var(--night) 40%); }
/* 60 px tall (was 84) so the success sheet leaves the table above room to be seen (check round 2, item 3) */
.success .flame { inline-size: 46px; block-size: 60px; margin: 0 auto; display: block; overflow: visible; }
.success .body.party { display: flex; align-items: flex-start; justify-content: center; gap: var(--s2); color: var(--candle); text-align: start; }
.success .party-mark { inline-size: 22px; block-size: 22px; flex: none; margin-block-start: 1px; }
.success h2 { font-size: var(--t-show); line-height: 1.1; }
.success .body { text-align: start; }
.prayer { display: grid; gap: var(--s1); justify-items: center; text-align: center; margin-block-start: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-field); background: rgba(246, 240, 230, 0.06); }
.prayer .p { font-size: 1.375rem; line-height: 1.7; color: var(--cream); }

/* ---------- the seat pass (paper, notched like a real pass; reel decision 7) ---------- */
.ticket-cover { background: radial-gradient(80% 50% at 50% 20%, rgba(46, 71, 133, 0.7), transparent 70%), var(--night); overflow: auto; padding: calc(var(--safe-t) + var(--s3)) var(--s5) calc(var(--safe-b) + var(--s5)); display: flex; flex-direction: column; align-items: center; }
.ticket-cover .topbar { position: static; background: none; border: 0; box-shadow: none; padding: 0 0 var(--s3); inline-size: min(100%, 400px); }
.ticket {
  --notch: 14px; --cut: 58%; inline-size: min(100%, 360px); flex: none; box-shadow: 0 24px 60px rgba(8, 14, 32, 0.6);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--cut), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% var(--cut), #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 var(--cut), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% var(--cut), #0000 98%, #000) right / 51% 100% no-repeat;
}
.ticket .keyline { inset: 8px; }
.ticket .head { padding: var(--s5) var(--s5) var(--s3); text-align: center; }
.ticket .head .eyebrow { color: var(--gold-ink); }
.ticket .head h2 { margin-block-start: var(--s1); font: 400 var(--t-h1)/1.15 var(--f-display); color: var(--ink); }
.ticket .seatbox { margin: var(--s2) var(--s5) 0; padding: var(--s4); border-radius: var(--r-field); background: var(--night); color: var(--cream); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); text-align: center; }
.ticket .seatbox .k { display: block; font: 600 var(--t-label)/1.3 var(--f-ui); letter-spacing: .06em; font-variant-caps: all-small-caps; color: var(--mist); }
.ticket .seatbox .v { display: block; font: 400 2.75rem/1 var(--f-display); color: var(--candle); margin-block-start: var(--s1); }
.ticket .facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); padding: var(--s3) var(--s5) var(--s4); }
.ticket .fact { background: var(--paper-deep); border-radius: var(--r-field); padding: var(--s2) var(--s3); text-align: start; }
.ticket .fact.wide { grid-column: 1 / -1; }
.ticket .fact .k { display: block; font: 600 var(--t-label)/1.3 var(--f-ui); letter-spacing: .06em; font-variant-caps: all-small-caps; color: var(--ink-soft); }
.ticket .fact .v { display: block; font-size: var(--t-small); line-height: 1.4; color: var(--ink); margin-block-start: 2px; }
.ticket .stub { padding: var(--s5) var(--s5) var(--s6); display: grid; justify-items: center; gap: var(--s2); text-align: center; }
.ticket .qr { inline-size: calc(188px + 2 * var(--s3)); block-size: calc(188px + 2 * var(--s3)); padding: var(--s3); background: #fff; border-radius: var(--r-field); }
.ticket .qr svg { inline-size: 100%; block-size: 100%; display: block; }
.ticket .code { font-size: var(--t-small); letter-spacing: .14em; color: var(--ink-soft); }
.ticket .stub p { color: var(--ink-soft); font-size: var(--t-small); max-inline-size: 30ch; }
.ticket-actions { inline-size: min(100%, 360px); display: grid; gap: var(--s2); margin-block-start: var(--s5); flex: none; }
.ticket-actions .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.ticket-actions .row .btn.soft { font-size: var(--t-small); padding-inline: var(--s3); }
.ticket-actions .prayer.short-only { display: none; margin-block-start: var(--s3); }
.ticket-actions .credit { margin-block-start: var(--s3); font-size: var(--t-small); color: var(--mist); text-align: center; }

/* ---------- not coming ---------- */
.regrets-done { text-align: center; }
.regrets-done .moon { inline-size: 64px; block-size: 64px; margin: 0 auto; display: block; color: var(--gold); }
.regrets-done .body { text-align: start; }

/* ---------- a short message only when nothing to attach to (DD-8) ---------- */
.toast { position: fixed; z-index: 60; left: 50%; inset-block-end: calc(var(--safe-b) + var(--dock-h, 0px) + var(--s3)); transform: translateX(-50%); max-inline-size: calc(100% - 48px); inline-size: max-content;
  background: var(--night); color: var(--cream); padding: var(--s3) var(--s4); border-radius: var(--r-field); border: 1px solid var(--night-edge); box-shadow: var(--night-shadow); font-size: var(--t-small); pointer-events: none; text-align: center; }

/* ---------- short screens (320 x 568 and the like): the sheets pack tighter so the table above keeps
   room for its 52 px seat buttons, about 280 px of free band instead of 216 (UX-C3, UI-E17 sheets).
   Targets stay at 48 px or more (STD-B1); only the empty space and the drawn grab (not a button here) shrink. ---------- */
@media (max-height: 640px) {
  .sheet { --pad-b: calc(var(--safe-b) + var(--s3)); padding: var(--s1) var(--s4) var(--pad-b); }
  .sheet .stack { gap: var(--s2); }
  .sheet .actions { margin-block-start: var(--s3); }
  .key { margin-block-start: 0; }
  .hop { margin-block-start: var(--s1); }
  .btn.main, .btn.soft { min-block-size: 48px; }
  /* short screens: the success sheet keeps the candle, the words and the button; the prayer goes to the pass (UX-C3) */
  .success-sheet .success .prayer { display: none; }
  .ticket-actions .prayer.short-only { display: grid; }
  /* and the candle stands beside the heading, not above it, so "seats held" ends above the button (UX-C3) */
  .success-sheet .success { grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); align-items: center; column-gap: 0; }
  .success-sheet .success > * { grid-column: 1 / -1; }
  .success-sheet .success > .flame { grid-column: 2; inline-size: 36px; block-size: 46px; margin: 0 var(--s3) 0 0; }
  .success-sheet .success > h2 { grid-column: 3; font-size: 1.625rem; white-space: nowrap; }
  .success-sheet .success .actions { padding-block-start: var(--s2); }
}

/* ---------- reduced motion: every story becomes a short cross-fade (WEB-E5, DESIGN 6) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.mark .face { grid-auto-flow: column; justify-content: center; align-items: center; }

.nb { white-space: nowrap; }