/* =====================================================================
   app.css — components & layout ("Marquee 2.0" design).
   Link AFTER tokens.css + theme.<slug>.css.
   The screensaver's cinematic language runs through the whole app:
   photography is the surface, motion is directional, presses answer
   the finger. Home = photo hero band + photo primary tiles + a quiet
   utility grid. PORTRAIT-first; landscape reflows at the bottom.
   ===================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff-body); color:var(--ink); background:var(--app-bg);
  font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden; -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
h1,h2,h3{ font-family:var(--ff-display); font-weight:500; margin:0; line-height:var(--lh-tight); }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; }
[hidden]{ display:none !important; }

/* ---- Icon font + emoji fallback ---- */
.ic{ display:inline-grid; place-items:center; }
.ic .icon{
  font-family:"Material Symbols Rounded"; font-weight:normal; font-style:normal; line-height:1;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 48;
  -webkit-font-feature-settings:'liga'; font-feature-settings:'liga'; font-size:1em;
}
.ic.fill .icon{ font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 48; }
.ic .emoji{ display:none; font-size:1em; }
body.no-symbols .ic .icon{ display:none; }
body.no-symbols .ic .emoji{ display:inline-block; }

/* ---- Line-icon PNGs (chrome only — tiles now use Material Symbols) ---- */
.fico{ width:clamp(20px,2.6vh,26px); height:auto; opacity:.8; }

/* =====================================================================
   PRESS FEEDBACK — this device has no cursor. Every tappable answers the
   finger with a fast, visible compress; hover-only effects don't exist.
   ===================================================================== */
.pressable{ transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.pressable:active{ transform:scale(.96); }
.pressable:focus-visible{ outline:var(--ring-w) solid var(--focus); outline-offset:3px; }

/* =====================================================================
   DIRECTIONAL NAVIGATION (View Transitions API).
   Forward = the new screen slides in from the right while the old one
   drifts left under it; Back = the reverse. The chrome (topbar/footer)
   never moves. Browsers without VT get the classic rise-in fallback.
   ===================================================================== */
#app-main{ view-transition-name:screen; }
::view-transition-old(root),::view-transition-new(root){ animation:none; }
html[data-nav="fwd"]::view-transition-old(screen){ animation:vtDriftL var(--dur-nav) var(--ease-nav) both; }
html[data-nav="fwd"]::view-transition-new(screen){ animation:vtInR var(--dur-nav) var(--ease-nav) both; }
html[data-nav="back"]::view-transition-old(screen){ animation:vtDriftR var(--dur-nav) var(--ease-nav) both; }
html[data-nav="back"]::view-transition-new(screen){ animation:vtInL var(--dur-nav) var(--ease-nav) both; }
@keyframes vtInR{ from{ transform:translateX(9%); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes vtInL{ from{ transform:translateX(-9%); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes vtDriftL{ from{ transform:none; opacity:1; } to{ transform:translateX(-6%); opacity:0; } }
@keyframes vtDriftR{ from{ transform:none; opacity:1; } to{ transform:translateX(6%); opacity:0; } }
/* Fallback entrance for non-VT browsers only (VT handles motion otherwise). */
html.no-vt .screen{ animation:rise var(--dur-slow) var(--ease-out); }
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ---- Root layout ---- */
#kiosk{ display:flex; flex-direction:column; height:100vh; height:100dvh; }

/* ---- Top bar ---- */
.topbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-5); padding:clamp(8px,1.2vh,14px) clamp(20px,3vw,34px);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--hairline); box-shadow:0 6px 18px rgba(22,30,45,.04);
}
.brand{ display:flex; align-items:center; gap:var(--space-4); flex:0 1 auto; }
.brand img{ height:clamp(44px,5.6vh,60px); width:auto; max-width:220px; object-fit:contain; }
.brand-divider{ width:1px; height:clamp(34px,4.2vh,44px); background:linear-gradient(var(--hairline),transparent); }
.brand-text{ display:flex; flex-direction:column; line-height:1; gap:4px; }
.brand-welcome{ font-size:calc(clamp(12px,1.5vh,14px) * var(--text-scale)); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.brand-name{ font-family:var(--ff-display); font-weight:500; font-size:calc(clamp(22px,2.9vh,29px) * var(--text-scale));
  color:var(--ink); line-height:1.05; white-space:nowrap; }
.brand-tagline{ display:none; }
.topbar-right{ display:flex; align-items:center; gap:var(--space-3); }
.wx-widget{ display:inline-flex; align-items:center; gap:var(--space-3);
  background:var(--chip); border:1px solid var(--chip-border); border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4); min-height:clamp(48px,6vh,60px);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset; }
.wx-icon{ font-size:clamp(24px,3vh,32px); color:var(--gold); }
.wx-icon .ic{ display:inline-grid; }
.wx-temp{ font-family:var(--ff-display); font-weight:500; font-size:calc(clamp(19px,2.5vh,24px) * var(--text-scale)); color:var(--ink); }
.wx-label{ font-size:calc(clamp(13px,1.7vh,16px) * var(--text-scale)); color:var(--ink-soft); max-width:180px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Narrow (portrait) top bar: temp + icon carry the weather; the text label
   yields so the language + accessibility controls never get pushed off. */
@media (max-width:1200px){
  .wx-label{ display:none; }
  .brand img{ max-width:180px; }
  .topbar{ gap:var(--space-3); }
}
.clock-wrap{ text-align:right; white-space:nowrap; }
#clock{ font-family:var(--ff-display); font-weight:500; font-size:calc(clamp(22px,2.9vh,29px) * var(--text-scale)); color:var(--ink); line-height:1; }
#clock-date{ font-size:calc(clamp(13px,1.6vh,15px) * var(--text-scale)); color:var(--ink-soft); margin-top:3px; }
#lang-toggle{ display:inline-flex; align-items:center; gap:var(--space-2);
  min-height:clamp(52px,6.5vh,64px); padding:0 clamp(14px,1.6vw,20px); border:1px solid var(--chip-border);
  border-radius:var(--radius-pill); background:var(--chip); color:var(--ink); font-weight:600;
  font-size:calc(clamp(16px,2vh,19px) * var(--text-scale));
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 2px 6px rgba(22,30,45,.05); }
#a11y-toggle{ width:clamp(52px,6.5vh,64px); height:clamp(52px,6.5vh,64px); border-radius:var(--radius-md);
  border:1px solid var(--chip-border); background:var(--chip); color:var(--ink-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset; }
#a11y-toggle .icon{ font-size:clamp(26px,3.4vh,34px); }
#lang-toggle,#a11y-toggle{ transition:transform var(--dur-fast) ease; }
#lang-toggle:active,#a11y-toggle:active{ transform:scale(.94); }

/* ---- Quick answers strip (engine feature; may be disabled per community) ---- */
#quick-answers{ flex:0 0 auto; display:flex; align-items:center; gap:var(--space-3);
  padding:clamp(8px,1.2vh,12px) clamp(20px,3vw,34px); overflow-x:auto;
  border-bottom:1px solid var(--hairline); }
.qa-title{ font-weight:600; color:var(--ink-soft); font-size:calc(clamp(13px,1.6vh,15px) * var(--text-scale));
  text-transform:uppercase; letter-spacing:var(--ls-caps); white-space:nowrap; margin-right:var(--space-2); }
.qa-chip{ display:inline-flex; align-items:center; gap:var(--space-2); white-space:nowrap;
  min-height:clamp(52px,6.5vh,64px); padding:0 var(--space-5); border:1px solid var(--chip-border);
  border-radius:var(--radius-pill); background:var(--chip); color:var(--ink); font-weight:600;
  font-size:calc(clamp(16px,2vh,19px) * var(--text-scale));
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset; transition:transform var(--dur-fast) ease; }
.qa-chip .ic{ color:var(--brand); font-size:1.15em; }
.qa-chip:active{ transform:scale(.96); }

/* ---- Main area ---- */
#app-main{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(10px,1.6vh,20px) clamp(20px,3vw,34px) clamp(8px,1.2vh,14px);
  scrollbar-width:none; }
#app-main::-webkit-scrollbar{ display:none; }   /* touch kiosk — swipe scrolls, no scrollbar chrome */

/* =====================  HOME — MARQUEE 2.0  ===================== */
/* Exact-fit at normal scale (definite heights → no scroll). Large-Text mode
   switches to min-height so the column can grow and the page scrolls. */
.home-wrap{ display:flex; flex-direction:column; height:100%; gap:clamp(12px,1.8vh,18px); }
[data-text="large"] .home-wrap{ height:auto; min-height:100%; }

/* Cinematic hero band with slow Ken Burns crossfade (the screensaver's movement, on Home) */
.marquee{ position:relative; flex:0 0 auto; overflow:hidden; border-radius:var(--radius-xl);
  height:clamp(170px,23vh,300px);
  background:#20161a; box-shadow:var(--elev-3); }
.mq-photo{ position:absolute; inset:0; background-size:cover; background-position:center 38%;
  opacity:0; transition:opacity 1.4s ease; will-change:transform,opacity; }
.mq-photo.show{ opacity:1; }
.mq-photo.kb{ animation:kbHero 16s var(--ease-out) forwards; }
@keyframes kbHero{ from{ transform:scale(1.10) translate(1.6%,1%); } to{ transform:scale(1.0) translate(0,0); } }
.mq-scrim{ position:absolute; inset:0;
  /* Holds >=.50 alpha through 55% — the title/accent text extent even in
     Large-Text mode — so gold-on-photo contrast never depends on the photo. */
  background:linear-gradient(102deg, rgba(18,12,14,.68) 0%, rgba(18,12,14,.50) 55%, rgba(18,12,14,.04) 78%, rgba(18,12,14,0) 100%); }
.mq-scrim::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(rgba(18,12,14,0), rgba(18,12,14,.32)); }
.mq-panel{ position:absolute; left:clamp(20px,3vw,46px); bottom:clamp(14px,2.6vh,34px); max-width:72%; color:#fff; }
.mq-eyebrow{ display:inline-block; font-size:calc(clamp(11px,1.5vh,14px) * var(--text-scale)); letter-spacing:.22em;
  text-transform:uppercase; font-weight:600; opacity:.92; margin-bottom:6px; }
.mq-title{ font-family:var(--ff-display); font-weight:400; line-height:1.02; margin:0;
  font-size:calc(clamp(28px,5vh,54px) * var(--text-scale)); text-shadow:0 2px 22px rgba(0,0,0,.45); }
.mq-title .accent{ font-style:italic; color:var(--gold-soft); }
.mq-sub{ margin:clamp(6px,1vh,12px) 0 0; font-size:calc(clamp(13px,1.9vh,19px) * var(--text-scale));
  font-weight:500; opacity:.94; text-shadow:0 1px 10px rgba(0,0,0,.4); }

/* ---- Primary photo tiles (the community's marquee actions) ---- */
.home-primary{ flex:0 0 auto; display:grid; grid-template-columns:repeat(2,1fr);
  grid-auto-rows:clamp(150px,17.5vh,250px); gap:clamp(12px,1.8vh,18px); }
.ptile{ position:relative; border:0; padding:0; border-radius:var(--radius-lg); overflow:hidden;
  background:#20161a; box-shadow:var(--elev-2); text-align:left;
  transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.ptile:active{ transform:scale(.96); box-shadow:var(--elev-1); }
.ptile:focus-visible{ outline:var(--ring-w) solid var(--focus); outline-offset:3px; }
.ptile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ptile .pt-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,8,10,0) 30%, rgba(14,8,10,.42) 62%, rgba(14,8,10,.82) 100%); }
.ptile .pt-label{ position:absolute; left:clamp(14px,1.8vw,24px); right:clamp(12px,1.4vw,20px); bottom:clamp(12px,1.7vh,20px); color:#fff; }
.ptile .pt-label strong{ display:block; font-weight:700; letter-spacing:var(--ls-tight);
  font-size:calc(clamp(24px,3.2vh,38px) * var(--text-scale)); line-height:1.12; text-shadow:0 1px 12px rgba(0,0,0,.55); }
.ptile .pt-label small{ display:block; font-weight:500; margin-top:3px; opacity:.9;
  font-size:calc(clamp(14px,1.9vh,20px) * var(--text-scale)); text-shadow:0 1px 8px rgba(0,0,0,.5); }
.ptile .pt-glyph{ position:absolute; top:clamp(10px,1.4vh,16px); right:clamp(10px,1.4vh,16px);
  width:clamp(40px,5.4vh,56px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:rgba(20,10,13,.38); border:1px solid rgba(255,255,255,.35); color:#fff; backdrop-filter:blur(4px); }
.ptile .pt-glyph .ic{ font-size:clamp(22px,3vh,32px); }

/* ---- Utility tiles (quiet, glyph-chip cards) ---- */
.home-utility{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(clamp(84px,9.5vh,132px),1fr); gap:clamp(12px,1.8vh,18px); }
.utile{ display:flex; align-items:center; gap:clamp(10px,1.4vw,18px); min-width:0;
  padding:0 clamp(12px,1.6vw,22px); border-radius:var(--radius-lg); text-align:left;
  background:var(--surface); border:1px solid var(--card-border); box-shadow:var(--elev-1); color:var(--ink);
  transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.utile:active{ transform:scale(.96); }
.utile:focus-visible{ outline:var(--ring-w) solid var(--focus); outline-offset:3px; }
.utile .u-glyph{ flex:0 0 auto; width:clamp(48px,6.4vh,68px); aspect-ratio:1; border-radius:clamp(12px,1.8vh,18px);
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg, var(--cat,var(--brand)), color-mix(in srgb, var(--cat,var(--brand)) 78%, #000 22%)); }
.utile .u-glyph .ic{ font-size:clamp(26px,3.6vh,38px); }
.utile .u-text{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.utile .u-text strong{ font-weight:700; letter-spacing:var(--ls-tight); color:var(--ink);
  font-size:calc(clamp(17px,2.3vh,25px) * var(--text-scale)); line-height:1.15; }
.utile .u-text small{ color:var(--ink-soft); font-weight:500;
  font-size:calc(clamp(12px,1.6vh,17px) * var(--text-scale)); line-height:1.25;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
[data-text="large"] .utile .u-text small{ -webkit-line-clamp:3; }

/* Entrance choreography — plays only on boot / wake-from-saver (body.entrance),
   NOT on every trip back Home. */
body.entrance .marquee{ animation:rise .55s var(--ease) both; }
body.entrance .ptile,body.entrance .utile{ animation:rise .5s var(--ease) both; }
body.entrance .home-primary > :nth-child(1){ animation-delay:.04s } body.entrance .home-primary > :nth-child(2){ animation-delay:.08s }
body.entrance .home-primary > :nth-child(3){ animation-delay:.12s } body.entrance .home-primary > :nth-child(4){ animation-delay:.16s }
body.entrance .home-utility > :nth-child(-n+3){ animation-delay:.2s }
body.entrance .home-utility > :nth-child(n+4){ animation-delay:.26s }
body.entrance .home-utility > :nth-child(n+7){ animation-delay:.32s }

/* ---- Buttons ---- */
.btn{ min-height:96px; min-width:220px; padding:0 var(--space-7); border:0; border-radius:var(--radius-pill);
  font-family:var(--ff-body); font-weight:600; font-size:var(--fs-button);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3); box-shadow:var(--elev-2);
  transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.btn .ic{ font-size:1.1em; }
.btn:active{ transform:scale(.96); box-shadow:var(--elev-1); }
.btn:focus-visible{ outline:var(--ring-w) solid var(--focus); outline-offset:3px; }
.btn--primary{ background:linear-gradient(150deg,var(--brand-bright),var(--brand-2)); color:var(--on-brand);
  border:1px solid var(--brand-2); box-shadow:0 8px 20px var(--brand-glow); }
.btn--secondary{ background:var(--surface); color:var(--brand); border:3px solid var(--brand); box-shadow:var(--elev-1); }
.btn--danger{ background:var(--danger); color:#fff; }

/* ---- Footer dock (in flow — the app column always ends in this bar) ---- */
.footer{ flex:0 0 auto; display:flex; align-items:center; gap:var(--space-3);
  padding:clamp(8px,1.2vh,14px) clamp(20px,3vw,34px) calc(clamp(8px,1.2vh,14px) + env(safe-area-inset-bottom,0));
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border-top:1px solid var(--hairline); }
.footer-spacer{ flex:1; }
.foot-btn{ display:inline-flex; align-items:center; gap:var(--space-2);
  min-height:clamp(64px,8vh,88px); padding:0 clamp(18px,2vw,28px);
  border:1px solid var(--chip-border); border-radius:var(--radius-pill); background:var(--chip); color:var(--ink);
  font-weight:600; font-size:calc(clamp(18px,2.3vh,22px) * var(--text-scale));
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 3px 8px rgba(22,30,45,.05);
  transition:transform var(--dur-fast) ease; }
.foot-btn:active{ transform:scale(.95); }
.foot-btn .ic{ font-size:1.25em; color:var(--ink-soft); }
.foot-btn--home{ background:linear-gradient(150deg,var(--brand-bright),var(--brand-2)); color:var(--on-brand);
  border-color:var(--brand-2); box-shadow:0 6px 18px var(--brand-glow); }
.foot-btn--home .fico{ filter:brightness(0) invert(1); opacity:1; }
.foot-btn--emergency{ border-color:var(--brand-soft-border); color:var(--brand); }
.foot-btn--voice{ border-color:var(--brand-soft-border); color:var(--brand); }
.foot-btn--voice .ic{ color:var(--brand); }

/* ---- Floating assistant button (opt-in via cfg.assistant.fab) ---- */
.phyllis-fab{ position:fixed; width:clamp(72px,9.5vh,96px); height:clamp(72px,9.5vh,96px);
  border-radius:50%; border:1px solid var(--chip-border); background:var(--chip);
  display:grid; place-items:center; z-index:1000; left:clamp(20px,2.4vw,30px);
  bottom:calc(clamp(96px,13vh,124px) + env(safe-area-inset-bottom,0));
  box-shadow:0 10px 26px rgba(22,30,45,.16), 0 1px 0 rgba(255,255,255,.9) inset;
  transition:transform var(--dur-fast) ease; }
.phyllis-fab::after{ content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--brand); opacity:.16; }
.phyllis-fab .fico{ width:44%; opacity:.85; }
.phyllis-fab .fab-label{ display:none; }
.phyllis-fab:active{ transform:scale(.94); }

/* ---- Generic screen ---- */
.screen-head{ display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-5); }
.btn-back{ display:inline-flex; align-items:center; gap:var(--space-2); min-height:84px; padding:0 var(--space-5);
  border:1px solid var(--chip-border); border-radius:var(--radius-pill); background:var(--chip); color:var(--ink);
  font-weight:600; font-size:var(--fs-body); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, var(--elev-1);
  transition:transform var(--dur-fast) ease; }
.btn-back .ic{ font-size:36px; }
.btn-back:active{ transform:scale(.95); }
.screen-title{ font-size:var(--fs-h1); font-weight:500; color:var(--ink); flex:1; }
.screen-head-spacer{ width:0; }
.screen-intro{ font-size:var(--fs-body-lg); color:var(--ink-soft); margin:0 0 var(--space-5); max-width:1400px; }
.screen-cta{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-6); }
.empty{ font-size:var(--fs-body-lg); color:var(--ink-soft); text-align:center; padding:var(--space-6); }

.card{ background:var(--surface); border-radius:var(--radius-lg); padding:var(--space-6);
  box-shadow:var(--elev-2); border:1px solid var(--card-border); }

/* ---- QR wells — every QR lives in a quiet tinted frame with a caption ---- */
.qr-well{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  background:var(--surface-2); border:1px solid var(--chip-border); border-radius:var(--radius-lg);
  padding:var(--space-4); }
.qr-well .qr-box{ background:#fff; border-radius:var(--radius-md); padding:var(--space-2); line-height:0;
  border:1px solid var(--card-border); }
.qr-well .qr-box svg{ display:block; width:clamp(130px,17vh,200px); height:clamp(130px,17vh,200px); }
.qr-well .qr-cap{ display:flex; align-items:center; gap:6px; font-size:var(--fs-caption);
  color:var(--ink-soft); font-weight:600; }
.qr-well .qr-cap .ic{ font-size:1.1em; color:var(--brand); }
.qr-fail{ font-size:var(--fs-caption); color:var(--danger); word-break:break-all; }

/* ---- Amenities hub — photo cards ---- */
.card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); }
.big-card{ display:flex; flex-direction:column; align-items:stretch; padding:0; overflow:hidden; text-align:left;
  background:var(--surface); border:1px solid var(--card-border);
  border-radius:var(--radius-xl); box-shadow:var(--elev-2); color:var(--ink);
  transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.big-card:active{ transform:scale(.97); box-shadow:var(--elev-1); }
.big-card:focus-visible{ outline:var(--ring-w) solid var(--focus); outline-offset:3px; }
.big-card-photo{ position:relative; height:clamp(150px,22vh,330px); background-size:cover; background-position:center; }
.big-card-photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,8,10,0) 55%, rgba(14,8,10,.28)); }
.big-card-photo .big-card-icon{ position:absolute; top:12px; right:12px; width:clamp(44px,5.6vh,58px); aspect-ratio:1;
  border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(20,10,13,.38); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px); }
.big-card-photo .big-card-icon .ic{ font-size:clamp(24px,3.2vh,32px); }
.big-card-band{ position:relative; height:clamp(110px,13vh,180px); display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg, var(--tile-accent,var(--brand)), color-mix(in srgb, var(--tile-accent,var(--brand)) 74%, #000 26%)); }
.big-card-band .ic{ font-size:clamp(56px,7.5vh,84px); opacity:.95; }
.big-card-text{ display:flex; flex-direction:column; gap:4px; padding:var(--space-4) var(--space-5) var(--space-5);
  border-top:6px solid var(--tile-accent,var(--brand)); }
.big-card-title{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h2); }
.big-card-sub{ font-size:var(--fs-body); color:var(--ink-soft); }

/* ---- Amenity detail cards — photo-first ---- */
.amenity-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); align-items:start; }
[data-text="large"] .amenity-list{ grid-template-columns:1fr; }
.amenity-card{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
.amenity-photo{ position:relative; height:clamp(160px,20vh,280px); background-size:cover; background-position:center; }
.amenity-photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,8,10,0) 60%, rgba(14,8,10,.25)); }
.amenity-band{ height:clamp(110px,13vh,170px); display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg, var(--amenity-accent,var(--brand)), color-mix(in srgb, var(--amenity-accent,var(--brand)) 74%, #000 26%)); }
.amenity-band .ic{ font-size:clamp(52px,7vh,78px); opacity:.95; }
.amenity-main{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-5) var(--space-6) var(--space-6); }
.amenity-main h2{ font-size:var(--fs-h2); }
.amenity-blurb{ font-size:var(--fs-body); margin:0; color:var(--ink-soft); }
.hours-chip{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  background:var(--chip); border:1px solid var(--chip-border); border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4); font-size:var(--fs-caption); font-weight:600; color:var(--ink); }
.hours-chip .ic{ color:var(--brand); font-size:1.15em; }
.hours-chip.open{ color:var(--success); }
.hours-chip.open .ic{ color:var(--success); }
.amenity-tips summary{ font-weight:700; color:var(--brand); font-size:var(--fs-caption); padding:var(--space-1) 0; }
.amenity-tips ul{ margin:var(--space-2) 0 0; padding-left:1.3em; font-size:var(--fs-caption); color:var(--ink-soft); }
.amenity-tips li{ margin-bottom:var(--space-2); }
.amenity-actions{ margin-top:var(--space-2); }
.amenity-actions .btn{ min-height:84px; }

/* ---- Events ---- */
.event-list{ display:flex; flex-direction:column; gap:var(--space-5); }
.event-card{ display:flex; gap:var(--space-5); align-items:flex-start; }
.event-date{ flex:0 0 auto; width:130px; height:130px; border-radius:var(--radius-lg);
  background:linear-gradient(150deg,var(--brand-bright),var(--brand-2)); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.event-mo{ font-family:var(--ff-body); font-weight:700; font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--ls-caps); }
.event-day{ font-family:var(--ff-display); font-weight:500; font-size:56px; line-height:1; }
.event-main{ flex:1; }
.event-main h2{ font-size:var(--fs-h2); margin-bottom:var(--space-2); }
.event-meta{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); font-size:var(--fs-body); color:var(--ink-soft); margin:0 0 var(--space-2); }
.event-meta span{ display:inline-flex; align-items:center; gap:6px; }
.event-meta .ic{ color:var(--brand); font-size:1.05em; }
.event-blurb{ font-size:var(--fs-body); margin:0; }

/* ---- Events empty state → community highlights board ---- */
.hl-photos{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); margin-bottom:var(--space-5); }
/* Portrait shows a clean pair; the third photo joins in landscape's 3-up row. */
.hl-photo:nth-child(3){ display:none; }
@media (orientation:landscape){ .hl-photo:nth-child(3){ display:block; } }
.hl-photo{ position:relative; border-radius:var(--radius-xl); overflow:hidden; height:clamp(200px,26vh,360px); box-shadow:var(--elev-2); }
.hl-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hl-photo span{ position:absolute; left:var(--space-5); bottom:var(--space-4); right:var(--space-4); color:#fff;
  font-weight:600; font-size:var(--fs-body); text-shadow:0 1px 10px rgba(0,0,0,.6); }
.hl-photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,8,10,0) 55%, rgba(14,8,10,.55)); }
.hl-photo span{ z-index:1; }
.hl-title{ font-size:var(--fs-h2); margin:var(--space-5) 0 var(--space-4); }
.hl-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); }
.hl-fact{ display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-5); }
.hl-fact .ic{ flex:0 0 auto; font-size:clamp(34px,4.4vh,46px); color:var(--brand); }
.hl-fact div{ min-width:0; }
.hl-fact strong{ display:block; font-size:var(--fs-body); color:var(--ink); }
.hl-fact span{ font-size:var(--fs-caption); color:var(--ink-soft); }

/* ---- Photo gallery (in-kiosk) ---- */
.gal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); }
.gal-item{ position:relative; border:0; padding:0; border-radius:var(--radius-lg); overflow:hidden;
  height:clamp(200px,24vh,340px); box-shadow:var(--elev-2); background:#20161a; text-align:left;
  transition:transform var(--dur-fast) ease; }
.gal-item:active{ transform:scale(.97); }
.gal-item:focus-visible{ outline:var(--ring-w) solid var(--focus); outline-offset:3px; }
.gal-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gal-item::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,8,10,0) 58%, rgba(14,8,10,.55)); }
.gal-item span{ position:absolute; left:var(--space-4); bottom:var(--space-3); right:var(--space-3); color:#fff; z-index:1;
  font-weight:600; font-size:var(--fs-caption); text-shadow:0 1px 8px rgba(0,0,0,.6); }
.lightbox{ position:fixed; inset:0; z-index:2500; background:rgba(16,9,11,.96); display:flex; flex-direction:column; }
.lightbox img{ flex:1; min-height:0; width:100%; object-fit:contain; }
.lb-bar{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-4) var(--space-6) calc(var(--space-4) + env(safe-area-inset-bottom,0)); color:#fff; }
.lb-cap{ font-size:var(--fs-body-lg); font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.lb-btns{ display:flex; gap:var(--space-3); }
.lb-btn{ min-width:96px; min-height:96px; border-radius:50%; border:2px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center;
  transition:transform var(--dur-fast) ease; }
.lb-btn .ic{ font-size:44px; }
.lb-btn:active{ transform:scale(.92); }

/* ---- Reserve: venue chooser (#/reserve) ---- */
.reserve-facts{ display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-4); list-style:none; padding:0; margin:0 0 var(--space-5); }
.reserve-facts li{ font-size:var(--fs-caption); color:var(--ink-soft); background:var(--chip);
  border:1px solid var(--chip-border); border-radius:var(--radius-pill); padding:var(--space-3) var(--space-5); }
.venue-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); }
.venue-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.venue-photo{ flex:0 0 auto; height:clamp(150px,19vh,260px); background-size:cover; background-position:center; }
/* Landscape: two cards side by side, photo-left, both CTAs above the fold. */
@media (orientation:landscape){
  .venue-grid{ grid-template-columns:1fr 1fr; }
  .venue-card{ flex-direction:row; }
  .venue-photo{ height:auto; width:clamp(180px,26%,300px); }
}
[data-text="large"] .venue-grid{ grid-template-columns:1fr; }
.venue-main{ padding:var(--space-5) var(--space-6) var(--space-6); display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.venue-main h2{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h2); color:var(--brand); }
.venue-meta{ font-size:var(--fs-body-lg); font-weight:700; color:var(--ink); }
.venue-blurb{ font-size:var(--fs-body); color:var(--ink-soft); }
.venue-note{ font-size:var(--fs-caption); font-style:italic; color:var(--ink-soft); }
.venue-main .screen-cta{ margin-top:auto; justify-content:center; }
.venue-main .screen-cta .btn{ min-width:72%; justify-content:center; }

/* ---- Map ---- */
.map-hero{ position:relative; height:clamp(280px,30vh,440px); border-radius:var(--radius-xl); background-size:cover; background-position:center;
  display:flex; align-items:flex-end; padding:var(--space-6); box-shadow:var(--elev-2); overflow:hidden; }
/* Real offline map (cfg.mapImage) — the render is centered on the kiosk's
   building, so the marker anchors the exact center of the cover-cropped image. */
.map-hero.has-map{ padding:0; height:clamp(340px,40vh,620px); background:#EDEAE4; }
.map-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.map-marker{ position:absolute; left:50%; top:50%; transform:translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center; gap:6px; z-index:2; }
.map-marker-label{ background:var(--brand); color:var(--on-brand); font-weight:700; white-space:nowrap;
  font-size:calc(clamp(16px,2vh,20px) * var(--text-scale)); padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-pill); box-shadow:0 6px 18px rgba(20,10,13,.35); }
.map-marker-pin{ width:clamp(20px,2.6vh,26px); aspect-ratio:1; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); background:var(--brand); border:4px solid #fff;
  box-shadow:0 4px 12px rgba(20,10,13,.4); }
.map-pulse{ position:absolute; left:50%; top:50%; width:26px; height:26px; border-radius:50%;
  transform:translate(-50%,-50%); border:3px solid var(--brand); opacity:.5; z-index:1;
  animation:mapPulse 2.2s var(--ease-out) infinite; }
@keyframes mapPulse{ 0%{ transform:translate(-50%,-50%) scale(.6); opacity:.55; }
  100%{ transform:translate(-50%,-50%) scale(3.2); opacity:0; } }
.map-attrib{ position:absolute; right:10px; bottom:8px; z-index:2; font-size:13px; color:#4A423D;
  background:rgba(255,255,255,.85); padding:3px 10px; border-radius:8px; }
[data-theme="high-contrast"] .map-marker-pin{ border-color:var(--ink); }
[data-theme="high-contrast"] .map-marker-label{ border:2px solid var(--ink); }
[data-theme="high-contrast"] .map-hero.has-map{ border:3px solid var(--ink); }
.map-here{ background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5); display:flex; flex-direction:column; font-size:var(--fs-caption); }
.map-here .map-here-eyebrow{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); font-weight:600; }
.map-here .map-here-eyebrow .ic{ color:var(--brand); }
.map-here strong{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h2); color:var(--brand); }
.map-addr{ display:flex; align-items:center; gap:10px; font-size:var(--fs-body-lg); margin:var(--space-5) 0; }
.map-addr .ic{ color:var(--brand); }
.map-sub{ font-size:var(--fs-h2); margin:var(--space-5) 0 var(--space-4); }
.map-pins{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); }
.map-pin{ display:flex; align-items:center; gap:var(--space-4); min-height:110px; padding:0 var(--space-5);
  background:var(--surface); border:1px solid var(--card-border); border-radius:var(--radius-lg);
  font-weight:600; font-size:var(--fs-body); color:var(--ink); box-shadow:var(--elev-1); text-align:left;
  transition:transform var(--dur-fast) ease; }
.map-pin .pin-glyph{ flex:0 0 auto; width:clamp(48px,6vh,64px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg, var(--pin-accent,var(--brand)), color-mix(in srgb, var(--pin-accent,var(--brand)) 76%, #000 24%)); }
.map-pin .pin-glyph .ic{ font-size:clamp(24px,3.2vh,34px); }
.map-pin:active{ transform:scale(.96); }
.map-qr{ display:flex; justify-content:center; margin-top:var(--space-6); }

/* ---- Welcome tour — full-bleed photo slides ---- */
.tour{ position:relative; height:100%; min-height:clamp(480px,72vh,1360px); border-radius:var(--radius-xl); overflow:hidden;
  background:#20161a; box-shadow:var(--elev-3); display:flex; }
.tour-photo{ position:absolute; inset:0; background-size:cover; background-position:center; }
.tour-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,8,10,.06) 30%, rgba(14,8,10,.55) 62%, rgba(14,8,10,.88) 100%); }
.tour-panel{ position:relative; margin-top:auto; width:100%; padding:clamp(24px,4vh,56px); color:#fff;
  display:flex; flex-direction:column; gap:var(--space-3); }
.tour-step{ font-size:var(--fs-caption); letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--gold-soft); }
.tour-panel h2{ font-size:var(--fs-h1); color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.5); }
.tour-panel p{ margin:0; font-size:var(--fs-body-lg); max-width:70ch; opacity:.96; text-shadow:0 1px 10px rgba(0,0,0,.5); }
.tour-nav{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-4); }
.welcome-dots{ display:flex; gap:var(--space-3); }
.welcome-dots .dot{ width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.35); }
.welcome-dots .dot.on{ background:var(--gold-soft); }
.tour-btns{ display:flex; gap:var(--space-4); }
.tour .btn--secondary{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.7); backdrop-filter:blur(6px); }

/* ---- Contacts ---- */
.contact-list{ display:flex; flex-direction:column; gap:var(--space-5); }
.contact-card{ display:flex; gap:var(--space-5); align-items:center; justify-content:space-between; }
.contact-card.is-emergency{ border:3px solid var(--danger); }
.contact-main{ flex:1; min-width:0; }
.badge-emergency{ display:inline-block; background:var(--danger); color:#fff; font-weight:700; font-size:var(--fs-caption);
  padding:6px 16px; border-radius:var(--radius-pill); margin-bottom:var(--space-2); }
.contact-card h2{ font-size:var(--fs-h2); margin-bottom:var(--space-2); }
.contact-value{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h2); color:var(--brand); margin:0 0 var(--space-2); }
.contact-note{ font-size:var(--fs-body); color:var(--ink-soft); margin:0; }
.contact-note.strong{ color:var(--danger); font-weight:700; }
.contact-qr{ flex:0 0 auto; }
.board-title{ font-size:var(--fs-h2); margin:var(--space-6) 0 var(--space-4); }
.board-list{ display:flex; flex-direction:column; gap:var(--space-3); }
.board-card{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-4); padding:var(--space-4) var(--space-5); }
.board-card strong{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-body-lg); }
.board-card span{ color:var(--ink-soft); font-size:var(--fs-body); }

/* ---- Settings ---- */
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
  padding:var(--space-5) 0; border-bottom:1px solid var(--hairline); }
.set-label{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h2); }
.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--chip-border); border-radius:var(--radius-pill); padding:6px; }
.seg-btn{ min-width:160px; min-height:84px; border:0; border-radius:var(--radius-pill);
  background:transparent; color:var(--ink-soft); font-weight:700; font-size:var(--fs-body);
  transition:transform var(--dur-fast) ease; }
.seg-btn:active{ transform:scale(.96); }
.seg-btn[aria-pressed="true"]{ background:linear-gradient(150deg,var(--brand-bright),var(--brand-2)); color:var(--on-brand); }
.set-note{ font-size:var(--fs-body); color:var(--ink-soft); margin-top:var(--space-5); }

/* ---- Feedback ---- */
.feedback-faces{ display:flex; justify-content:center; gap:var(--space-6); margin:var(--space-8) 0; flex-wrap:wrap; }
.face-btn{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  background:var(--surface); border:1px solid var(--card-border); border-radius:var(--radius-xl);
  padding:var(--space-5) var(--space-6); box-shadow:var(--elev-1); min-width:200px;
  transition:transform var(--dur-fast) ease; }
.face-btn .ic{ font-size:clamp(72px,10vh,120px); color:var(--face,var(--brand)); }
.face-btn span{ font-weight:700; font-size:var(--fs-body); color:var(--ink); }
.face-btn:active{ transform:scale(.94); }
.feedback-thanks{ text-align:center; font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h1); color:var(--brand); }

/* ---- Handoff (QR) ---- */
.handoff{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-4); padding-top:var(--space-5); }
.handoff-label{ font-size:var(--fs-h1); color:var(--ink); }
.handoff .qr-well .qr-box svg{ width:clamp(260px,34vh,380px); height:clamp(260px,34vh,380px); max-width:56vw; }
.handoff-sub{ font-size:var(--fs-body-lg); color:var(--ink-soft); max-width:1000px; }
.handoff-url{ font-size:var(--fs-caption); color:var(--brand); word-break:break-all; max-width:1000px; }

/* ---- External-navigation splash (kills the white flash) ---- */
#nav-splash{ position:fixed; inset:0; z-index:4000; background:var(--app-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-5);
  animation:splashIn .18s ease both; }
#nav-splash img{ height:clamp(80px,12vh,130px); width:auto; object-fit:contain; }
#nav-splash .splash-text{ font-family:var(--ff-display); font-size:var(--fs-h2); color:var(--ink); }
#nav-splash .splash-spinner{ width:56px; height:56px; border-radius:50%;
  border:5px solid var(--chip-border); border-top-color:var(--brand); animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes splashIn{ from{ opacity:0; } to{ opacity:1; } }

/* ---- Overlays (voice / admin) ---- */
.overlay{ position:fixed; inset:0; z-index:2000; background:rgba(20,10,13,.72);
  display:grid; place-items:center; padding:var(--space-6); }
.voice-card,.admin-card{ background:var(--surface); border-radius:var(--radius-xl); box-shadow:var(--elev-4);
  padding:var(--space-8); max-width:900px; width:100%; text-align:center; position:relative; }
.voice-card h2,.admin-card h2{ font-size:var(--fs-h1); margin-bottom:var(--space-4); }
.voice-close{ position:absolute; top:var(--space-4); right:var(--space-4); width:84px; height:84px; border-radius:50%;
  border:1px solid var(--chip-border); background:var(--chip); color:var(--ink); font-size:40px;
  transition:transform var(--dur-fast) ease; }
.voice-close:active{ transform:scale(.92); }
.voice-mic{ width:160px; height:160px; border-radius:50%; margin:0 auto var(--space-5);
  background:linear-gradient(150deg,var(--brand-bright),var(--brand-2));
  color:#fff; display:grid; place-items:center; }
.voice-mic .icon{ font-family:"Material Symbols Rounded"; font-size:84px; }
.voice-mic.pulse{ animation:voicePulse 1.4s var(--ease-out) infinite; }
@keyframes voicePulse{ 0%{ box-shadow:0 0 0 0 var(--brand-glow); } 100%{ box-shadow:0 0 0 50px rgba(0,0,0,0); } }
.voice-examples{ font-size:var(--fs-body); color:var(--ink-soft); }
.voice-heard{ font-size:var(--fs-body-lg); color:var(--ink); }
.vchips{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); margin:var(--space-6) 0; }
.vchip{ display:flex; align-items:center; gap:var(--space-3); min-height:96px; padding:0 var(--space-5);
  border:1px solid var(--chip-border); border-radius:var(--radius-lg); background:var(--chip); color:var(--ink);
  font-weight:600; font-size:var(--fs-body); text-align:left; transition:transform var(--dur-fast) ease; }
.vchip:active{ transform:scale(.96); }
.vchip-emoji{ color:var(--brand); font-weight:700; }
.voice-actions{ display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap; }

/* admin keypad */
.pin-row{ display:flex; gap:var(--space-4); justify-content:center; margin:var(--space-5) 0; }
.pin-dot{ width:28px; height:28px; border-radius:50%; border:3px solid var(--brand); }
.pin-dot.on{ background:var(--brand); }
.pin-err{ color:var(--danger); font-weight:700; min-height:1.5em; }
.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); max-width:560px; margin:0 auto; }
.kp{ min-height:120px; font-size:var(--fs-h1); font-weight:700; border:1px solid var(--chip-border); border-radius:var(--radius-lg);
  background:var(--chip); color:var(--ink); transition:transform var(--dur-fast) ease; }
.kp:active{ transform:scale(.94); }
.kp-c{ background:linear-gradient(150deg,var(--brand-bright),var(--brand-2)); color:#fff; font-size:var(--fs-body); border:0; }
.admin-actions{ display:flex; flex-direction:column; gap:var(--space-4); margin:var(--space-5) 0; }
.admin-info{ font-size:var(--fs-caption); color:var(--ink-soft); }
.admin-note{ font-size:var(--fs-body); color:var(--danger); }

/* ---- Screensaver (Ken Burns attract loop — motion preserved, Marquee dress) ---- */
#screensaver{ position:fixed; inset:0; z-index:3000; background:#140A0D; overflow:hidden; }
#saver-img{ position:absolute; inset:0; background-size:cover; background-position:center; }
#saver-img.kenburns{ animation:kenburns 7s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1.12) translate(2%,1%); } to{ transform:scale(1) translate(0,0); } }
.saver-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,10,12,.18), rgba(18,10,12,.78));
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--space-9); color:#fff; }
/* Transparent brand mark sits in the column between the date and caption;
   a soft light halo keeps a dark logo legible over dark photo areas. */
.saver-logo{ height:clamp(72px,10vh,110px); width:auto; margin-bottom:var(--space-6); opacity:.98;
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.7)) drop-shadow(0 0 16px rgba(255,255,255,.55)); }
.saver-clock{ margin-top:auto; font-family:var(--ff-display); font-weight:500; font-size:clamp(80px,12vw,180px); line-height:1; text-shadow:0 4px 24px rgba(0,0,0,.4); }
.saver-date{ font-size:var(--fs-h2); opacity:.95; margin-bottom:var(--space-6); text-shadow:0 2px 12px rgba(0,0,0,.4); }
#saver-caption{ font-size:var(--fs-body); opacity:.92; margin-bottom:var(--space-2); }
#saver-fact{ font-size:var(--fs-caption); font-weight:600; color:var(--gold-soft); margin-bottom:var(--space-5);
  text-shadow:0 1px 8px rgba(0,0,0,.5); min-height:1.4em; }
.saver-touch{ margin-top:auto; font-size:var(--fs-h2); font-weight:600; padding:var(--space-4) var(--space-7);
  background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.65); border-radius:var(--radius-pill);
  backdrop-filter:blur(6px); animation:breathe 2.4s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.05); opacity:1; } }

/* offline banner */
#offline-banner{ position:fixed; top:0; left:0; width:100%; z-index:1500; background:var(--warn-fill); color:var(--ink);
  text-align:center; font-weight:700; font-size:var(--fs-body); padding:var(--space-3);
  display:flex; align-items:center; justify-content:center; gap:10px; }
#offline-banner .ic{ font-size:1.15em; }

/* ---- Landscape reflow (single row of photo tiles, wider utility grid) ---- */
@media (orientation:landscape){
  .marquee{ height:clamp(150px,20vh,260px); }
  .home-primary{ grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(170px,26vh,320px); }
  .home-utility{ grid-template-columns:repeat(5,1fr); grid-auto-rows:minmax(clamp(80px,11vh,120px),1fr); }
  .card-grid{ grid-template-columns:repeat(3,1fr); }
  .amenity-list{ grid-template-columns:repeat(3,1fr); }
  .gal-grid{ grid-template-columns:repeat(3,1fr); }
  .map-pins{ grid-template-columns:repeat(3,1fr); }
  .hl-photos{ grid-template-columns:repeat(3,1fr); }
  .hl-facts{ grid-template-columns:repeat(4,1fr); }
  .vchips{ grid-template-columns:repeat(3,1fr); }
}
body.force-landscape .marquee{ height:clamp(150px,20vh,260px); }
body.force-landscape .home-primary{ grid-template-columns:repeat(4,1fr); }
body.force-landscape .home-utility{ grid-template-columns:repeat(5,1fr); }
body.force-landscape .card-grid{ grid-template-columns:repeat(3,1fr); }

/* hide chrome while screensaver is up */
body.saver-on .footer,body.saver-on .phyllis-fab{ display:none; }

/* ---- High-contrast extras for Marquee 2.0 components ---- */
[data-theme="high-contrast"] .ptile .pt-scrim{
  background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.92) 100%); }
[data-theme="high-contrast"] .ptile{ border:3px solid var(--ink); }
[data-theme="high-contrast"] .utile{ border:3px solid var(--ink); }
[data-theme="high-contrast"] .utile .u-glyph{ background:var(--cat,var(--brand)); }
[data-theme="high-contrast"] .mq-scrim{ background:linear-gradient(102deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.3) 100%); }
[data-theme="high-contrast"] .big-card-photo::after,
[data-theme="high-contrast"] .gal-item::after,
[data-theme="high-contrast"] .hl-photo::after{
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.8)); }
[data-theme="high-contrast"] .tour-scrim{
  background:linear-gradient(180deg, rgba(0,0,0,.3) 20%, rgba(0,0,0,.92) 100%); }
[data-theme="high-contrast"] .foot-btn,
[data-theme="high-contrast"] .qa-chip,
[data-theme="high-contrast"] #lang-toggle,
[data-theme="high-contrast"] #a11y-toggle,
[data-theme="high-contrast"] .btn-back,
[data-theme="high-contrast"] .map-pin,
[data-theme="high-contrast"] .hours-chip,
[data-theme="high-contrast"] .qr-well,
[data-theme="high-contrast"] .face-btn{ border:3px solid var(--ink); background:#fff; }
[data-theme="high-contrast"] .map-pin .pin-glyph,
[data-theme="high-contrast"] .big-card-band,
[data-theme="high-contrast"] .amenity-band{ background:var(--brand); }
[data-theme="high-contrast"] .face-btn .ic{ color:var(--ink); }
/* Home keeps its dark brand fill (white label + inverted icon stay >=7:1) */
[data-theme="high-contrast"] .foot-btn--home{ background:var(--brand); color:#fff; }

/* ---- Global visible focus indicator (default for every interactive control;
   low specificity so the component-specific rings above still win where defined) ---- */
:where(button, a, [tabindex]):focus-visible{
  outline:var(--ring-w) solid var(--focus); outline-offset:3px; border-radius:var(--radius-sm);
}