/* Persistent chrome (foundation): header, dock, Details sheet, toast, skip, record. */
@layer base{
#ui{position:relative;z-index:var(--z-ui)}
.ui-header{position:fixed;inset:0 0 auto 0;height:calc(56px + var(--safe-t));padding:var(--safe-t) 12px 0;display:flex;align-items:center;
  justify-content:space-between;pointer-events:none;z-index:var(--z-ui)}
.ui-header>*{pointer-events:auto}
.ui-logo{width:44px;height:44px;display:grid;place-items:center;opacity:0;transition:opacity var(--dur-text) var(--ease-out-soft)}
.ui-logo.is-on{opacity:1}
.ui-logo.is-on.is-under{opacity:0;pointer-events:none;transition:opacity 200ms var(--ease-out-soft)}
.ui-logo img{width:32px;height:32px}
.ui-lang{width:44px;height:44px;border-radius:50%;background:rgba(255,253,249,.9);border:var(--hairline);color:var(--c-forest);
  font-family:'Amiri','Geeza Pro',serif;font-size:20px;line-height:1;display:grid;place-items:center;box-shadow:var(--sh-pill)}
:lang(ar) .ui-lang{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:15px;letter-spacing:.06em}
.ui-lang{transition:opacity var(--dur-text,300ms) var(--ease-out-soft,ease),transform var(--dur-text,300ms) var(--ease-out-soft,ease)}
.ui-lang.is-tucked{opacity:0;transform:scale(.8);pointer-events:none}

/* dock */
.dock{position:fixed;left:50%;bottom:var(--safe-b);transform:translateX(-50%);height:56px;display:flex;align-items:center;gap:2px;
  padding:0 6px;border-radius:var(--r-chip);background-color:rgba(255,253,249,.94);border:var(--hairline);border-top-color:rgba(169,176,182,.75);box-shadow:var(--sh-pill);
  z-index:var(--z-ui);max-width:calc(100vw - 24px);
  transition:transform var(--dur-card) var(--ease-out-expo),opacity var(--dur-text) var(--ease-out-soft),
    background-color 240ms var(--ease-out-soft),border-color 240ms var(--ease-out-soft),box-shadow 240ms var(--ease-out-soft)}
/* the intro: the dock already sits in its final, centred layout (no layout shift at the hand-over); only
   the disc shows, on a transparent pill. On intro:done the pill fades in, then its children, 40 ms apart. */
html.is-intro .dock{background-color:transparent;border-color:transparent;box-shadow:none;z-index:var(--z-ui-intro)}
html.is-intro .dock>:not(.dock-rec){opacity:0;visibility:hidden;pointer-events:none}
html.is-intro .dock-rec{background:rgba(255,253,249,.9);border-radius:50%;box-shadow:var(--sh-pill)}
html.is-dock-in .dock>*{transition:opacity 240ms var(--ease-out-soft),visibility 0s linear 0s}
html.is-dock-in .dock>:nth-child(2){transition-delay:40ms}
html.is-dock-in .dock>:nth-child(3){transition-delay:80ms}
html.is-dock-in .dock>:nth-child(4){transition-delay:120ms}
html.is-dock-in .dock>:nth-child(5){transition-delay:160ms}
html.is-dock-in .dock>:nth-child(n+6){transition-delay:200ms}
.dock.is-hidden{opacity:0;transform:translate(-50%,24px);pointer-events:none}
.dock.is-dim{opacity:.7}
/* rings: the dock folds down to the record alone, by opacity/visibility only (no layout shift) */
.dock>*{transition:opacity var(--dur-micro) var(--ease-out-soft),visibility 0s linear 0s}
.dock.is-collapsed{background:transparent;border-color:transparent;box-shadow:none}
.dock.is-collapsed .dock-clock,.dock.is-collapsed .dock-dir,.dock.is-collapsed .dock-rsvp{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-micro) var(--ease-out-soft),visibility 0s linear var(--dur-micro)}
.dock.is-collapsed .dock-rec{background:rgba(255,253,249,.94);box-shadow:var(--sh-pill)}
.dock{transition:transform var(--dur-card) var(--ease-out-expo),opacity var(--dur-text) var(--ease-out-soft),background-color var(--dur-micro),box-shadow var(--dur-micro)}
/* while the RSVP card is on screen the dock slides away below the fold */
.dock.is-away{transform:translate(-50%,120%);opacity:0;pointer-events:none;transition:transform 250ms var(--ease-out-soft),opacity 250ms var(--ease-out-soft)}
.dock-btn{min-width:44px;height:44px;border-radius:var(--r-chip);display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 10px;color:var(--c-forest);font-family:var(--font-ui);font-weight:600;font-size:15px;white-space:nowrap;text-decoration:none}
.dock-btn .ico{width:19px;height:19px;flex:none}
.dock-rec{width:44px;padding:0}
.dock-clock{font-variant-numeric:lining-nums tabular-nums;min-width:96px;min-width:max-content}
/* digits roll inside a vertical clip only; words sit whole, in their own direction, never clipped */
.dock-clock .odo{display:inline-flex;direction:ltr;overflow:hidden;overflow-x:visible;overflow-y:clip;height:1.25em;line-height:1.25em}
.dock-clock .odo.is-word{display:inline-block;overflow:visible;white-space:nowrap;unicode-bidi:isolate}
.dock-clock .odo.is-word[dir="rtl"]{direction:rtl}
/* Arabic-Indic digits in Amiri (its ٥ has the teardrop, so ٤:٥٥ never reads as ٤:00) */
:lang(ar) .dock-clock .odo:not(.is-word){font-family:'Amiri',var(--font-ui);font-weight:700;font-size:16px}
.dock-clock .ico-sun{color:var(--c-forest)}
.dock-clock .odo-d{display:inline-block;white-space:pre;transition:transform 180ms var(--ease-out-soft)}
.dock-rsvp{background:var(--c-forest);color:var(--c-ivory);padding:0 16px;box-shadow:inset 0 0 0 1px rgba(233,237,240,.4)}
.dock.is-today .dock-dir{background:var(--c-forest);color:var(--c-ivory)}
.dock.is-today .dock-rsvp{background:var(--c-ivory);color:var(--c-forest);box-shadow:inset 0 0 0 1px var(--c-sage-600)}
.dock.no-rsvp .dock-rsvp{display:none}
@media (max-width:370px){.dock-btn{padding:0 8px;font-size:14px}.dock-clock{min-width:84px;min-width:max-content}}

/* the record (music) button */
.rec{position:relative;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle,var(--c-blush-300) 0 15%,#5b6b61 16% 18%,#46564c 19% 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.rec::before{content:"";position:absolute;inset:4px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 2px,rgba(255,255,255,.07) 2px 3px)}
.rec::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 30deg,rgba(255,255,255,.28) 40deg,transparent 60deg 200deg,rgba(255,255,255,.18) 215deg,transparent 235deg)}
/* a real 33⅓ rpm record: it keeps its angle when paused (no snap back to 0) and a silver tonearm swings on */
.rec{animation:ui-spin 1.8s linear infinite;animation-play-state:paused}
.is-playing .rec{animation-play-state:running}
.dock-rec::before{content:"";position:absolute;top:6px;inset-inline-end:5px;width:2px;height:15px;border-radius:1px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#E9EDF0,#A9B0B6 70%,#6F777E);box-shadow:0 1px 1px rgba(47,74,58,.25);transform-origin:50% 1px;transform:rotate(-34deg);
  transition:transform 700ms var(--ease-out-expo)}
.is-playing .dock-rec::before{transform:rotate(-8deg)}
:lang(ar) .dock-rec::before{transform:rotate(34deg)}
:lang(ar).is-playing .dock-rec::before{transform:rotate(8deg)}
html.is-intro .dock-rec::before{display:none}
.dock-rec .slash{position:absolute;width:44px;height:44px;display:none;color:var(--c-rose-800)}
.dock-rec[aria-pressed="false"] .slash{display:block}
.dock-rec{position:relative}
.dock-rec.is-pulse::after{content:"";position:absolute;inset:2px;border-radius:50%;border:2px solid var(--c-rose);animation:ui-pulse 1.4s var(--ease-out-soft) infinite}
@keyframes ui-spin{to{transform:rotate(360deg)}}
@keyframes ui-pulse{from{transform:scale(.8);opacity:1}to{transform:scale(1.35);opacity:0}}

/* skip */
.ui-skip{position:fixed;top:calc(10px + var(--safe-t));inset-inline-end:12px;z-index:var(--z-ui-intro);min-height:44px;padding:0 16px;border-radius:var(--r-chip);
  background:rgba(255,253,249,.9);border:var(--hairline);color:var(--c-forest);font-family:var(--font-ui);font-weight:600;font-size:15px;
  opacity:0;pointer-events:none;transition:opacity var(--dur-micro)}
html.is-intro .ui-skip.is-on{opacity:1;pointer-events:auto}
html:not(.is-intro) .ui-skip{display:none}
html.is-intro .ui-header{display:none}

/* Details sheet */
.sheet{position:fixed;inset:0;z-index:var(--z-sheet);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-scrim{position:absolute;inset:0;background:rgba(62,90,69,.28);opacity:0;transition:opacity var(--dur-text)}
.sheet.is-open .sheet-scrim{opacity:1}
.sheet-panel{position:relative;width:100%;max-width:520px;max-height:calc(var(--vh-dyn) - 40px);overflow:auto;overscroll-behavior:contain;
  background:var(--c-ivory);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:0 -10px 40px rgba(47,74,58,.18);
  padding:var(--sp-3) var(--gutter) calc(var(--sp-6) + var(--safe-b));transform:translateY(100%);transition:transform var(--dur-card) var(--ease-out-expo)}
.sheet.is-open .sheet-panel{transform:none}
.sheet-grab{width:40px;height:4px;border-radius:2px;background:var(--c-paper-line);margin:0 auto var(--sp-3)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.sheet-title{font-family:var(--font-display);font-size:28px;line-height:1.15;color:var(--c-forest);font-weight:500}
.sheet-close{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--c-forest);border:1px solid var(--c-paper-line)}
.sheet-row{padding:var(--sp-4) 0;border-top:1px solid var(--c-paper-line)}
.sheet-row:first-of-type{border-top:0}
.sheet-label{font-family:var(--font-label);font-weight:600;font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-silver-ink);margin-bottom:4px}
.sheet-val{color:var(--c-ink)}
.sheet-sub{font-size:var(--fs-small);color:var(--c-ink-2)}
.sheet-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.sheet-sched{display:grid;gap:2px}
.sheet-sched button{display:flex;gap:var(--sp-3);width:100%;min-height:44px;align-items:center;text-align:start;border-radius:var(--r-field);padding:0 var(--sp-2);color:var(--c-ink)}
.sheet-sched time{min-width:5.4em;font-weight:600;color:var(--c-forest)}
.sheet-tag{font-style:italic;font-size:22px;color:var(--c-rose-700)}
:lang(ar) .sheet-tag{font-style:normal}
.sheet-tag bdi{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic}
.sheet-toggles{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.sheet-toggles [aria-pressed="true"]{background:var(--c-blush-200);color:var(--c-rose-800);border-color:var(--c-silver-500)}
.sheet-credit{margin-top:var(--sp-4);font-size:var(--fs-small);color:var(--c-ink-2);text-align:center}
.cal-choice{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.cal-choice[hidden]{display:none}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 72px);transform:translate(-50%,12px);z-index:var(--z-toast);min-height:40px;padding:8px 18px;
  border-radius:var(--r-chip);background:var(--c-forest);color:var(--c-ivory);font-family:var(--font-ui);font-weight:600;font-size:15px;
  opacity:0;pointer-events:none;transition:opacity var(--dur-micro),transform var(--dur-micro) var(--ease-out-soft)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* hints and step-inside */
.ui-film [data-film-hide],html[data-film] .ui-header,html[data-film] .dock,html[data-film] .ui-skip{display:none !important}

/* debug HUD */
.debug-hud{position:fixed;inset-inline-start:6px;top:60px;z-index:var(--z-debug);font:11px/1.35 ui-monospace,Menlo,monospace;color:var(--c-ink);
  background:rgba(255,253,249,.85);border:1px solid var(--c-paper-line);border-radius:8px;padding:4px 6px;pointer-events:none;white-space:pre}

@media (hover:hover) and (pointer:fine){
  .dock-btn:hover,.sheet-sched button:hover{background:var(--c-sage-50)}
  .dock-rsvp:hover{background:var(--c-ink)}
}
@media (min-width:900px){
  .ui-header{left:50%;right:auto;width:var(--arch-w);transform:translateX(-50%);top:24px;padding-top:calc(var(--arch-w) * .12)}
  .dock{bottom:40px}
  .ui-skip{inset-inline-end:calc(50% - var(--arch-w) / 2 + 16px);top:calc(24px + var(--arch-w) * .14)}
}
}
/* details sheet: the dress block matches the essentials card (couple-notes 01:25) */
.sheet-extra{color:var(--c-rose,#B0647C);font-style:italic}
.sheet-warm{margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-field,10px);background:rgba(227,236,221,.7);border:1px solid rgba(143,174,139,.45);font-size:var(--fs-small);color:var(--c-ink)}
.sheet-note{font-size:var(--fs-small)}
/* desktop: keep the language chip inside the arch's inner curve, not on its rim */
/* (the chip's centre sits ~180/426 of the arch radius from the curve's centre, so its rim clears the arch by ~10 px) */
@media (min-width:900px){.ui-header{padding-inline:calc(var(--arch-w) * .15);padding-top:calc(var(--arch-w) * .2)}}