@font-face { font-family: "Instrument Sans"; src: url("/fonts/InstrumentSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: block; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/InstrumentSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: block; }
@font-face { font-family: "Lora"; src: url("/fonts/Lora-Bold.ttf") format("truetype"); font-weight: 700; font-display: block; }

:root {
  --navy: #0d1b2e;      /* page, from the original directory design */
  --navy-deep: #081322; /* news panel + contact band */
  --steel: #c7cdd6;     /* brushed-steel frame on the lobby wall */
  --ink: #ffffff;
  --muted: #8d9bb0;
  --rule: rgba(199, 205, 214, 0.16);

  /* --u is 1% of the stage width; display.js sets it. 10.8px on a 1080-wide portrait screen. */
  --u: 10.8px;
  --pad: calc(var(--u) * 5);
  --tf: calc(var(--u) * 4.6); /* tenant font size, fitted by display.js */
  /* Per-screen sizes (editor → Sizes; 1 = standard). display.js sets them from the screen's sizes. */
  --title-scale: 1; --logo-scale: 1; --brand-scale: 1; --welcome-scale: 1;
  --news-scale: 1; --clock-scale: 1; --weather-scale: 1; --contacts-scale: 1; /* DP-08 round 10 */
  --qr-scale: 1; /* DP-08 round 12 */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--navy); cursor: none; }
/* Touch lockdown (DP-08 round 13): no zooming, scrolling, selecting, dragging or long-press menus (display.js too) */
html, body { touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, svg { -webkit-user-drag: none; }
body { font-family: "Instrument Sans", "Segoe UI", Arial, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }

#stage {
  position: absolute; left: 0; top: 0;
  width: var(--W, 100vw); height: var(--H, 100vh);
  display: flex; flex-direction: column;
  background: var(--navy);
  transform-origin: 0 0;
  transition: opacity 0.6s ease;
}
#stage.is-loading { opacity: 0; }

/* ── Background photo (optional) ─────────────
   The photo sits behind everything under a navy tint. --bg-show is how much of it shows through.
   The tint is heavier behind the tenant list, where legibility matters most. */
.bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* The photo is pinned to the top and scaled by width (--bg-size), so a building photo shows whole behind
   the header and tenant list; the street falls behind the news panel, and the bottom fades to navy. */
.bg-photo {
  position: absolute; top: var(--bg-top, 0px); left: var(--bg-left, 0px);
  width: var(--bg-width, 100%); height: auto; max-width: none;
  filter: grayscale(0.35) blur(calc(var(--u) * 0.2));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 72%, transparent 100%);
}
.bg-tint {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(13, 27, 46, calc(1 - var(--bg-show) * 1.6)) 0%,
    rgba(13, 27, 46, calc(1 - var(--bg-show))) 16%,
    rgba(13, 27, 46, calc(1 - var(--bg-show))) 100%);
}
#stage > :not(.bg):not(.offline):not(.identify):not(.card):not(.kbd) { position: relative; z-index: 1; }
.offline { z-index: 2; }
#stage.has-bg { background: #0d1b2e; }
#stage.has-bg .contacts, #stage.has-bg .welcome { background: rgba(8, 19, 34, 0.82); }

/* ── Masthead ───────────────────────────────── */
.masthead {
  display: flex; justify-content: space-between; align-items: flex-end; gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 5) var(--pad) calc(var(--u) * 3.4);
  border-bottom: 2px solid var(--steel);
}
.masthead-id { min-width: 0; flex: 1 1 auto; }
/* Every logo stays inside its own column (min(100%, …)), so a larger one never pushes the clock and weather aside */
.logo { display: block; max-height: calc(var(--u) * 8 * var(--logo-scale)); max-width: min(100%, calc(var(--u) * 40 * var(--logo-scale))); object-fit: contain; object-position: left center; margin-bottom: calc(var(--u) * 2.6); }
/* Logo standing in for the property name: larger, and no gap below it */
#stage.wordmark .logo { width: 100%; max-width: min(100%, calc(var(--u) * 58 * var(--logo-scale))); height: auto; max-height: calc(var(--u) * 11 * var(--logo-scale)); margin-bottom: 0; }
#stage.wordmark .label { margin-top: calc(var(--u) * 1.6); }
.property {
  font-family: "Lora", Georgia, serif; font-weight: 700;
  font-size: calc(var(--u) * 7.2 * var(--title-scale)); line-height: 1.02; letter-spacing: -0.01em;
  text-wrap: balance;
}
.label { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.7); color: var(--muted); }

.masthead-now { text-align: right; flex-shrink: 0; }
.time { font-size: calc(var(--u) * 6 * var(--clock-scale)); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.time small { font-size: 0.42em; margin-left: 0.18em; color: var(--muted); letter-spacing: 0; }
.date { margin-top: calc(var(--u) * 1 * var(--clock-scale)); font-size: calc(var(--u) * 2.5 * var(--clock-scale)); color: var(--muted); }
.weather { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.2 * var(--weather-scale)); margin-top: calc(var(--u) * 1.8); }
.wx-icon { width: calc(var(--u) * 4.6 * var(--weather-scale)); height: calc(var(--u) * 4.6 * var(--weather-scale)); display: inline-flex; }
.wx-icon svg { width: 100%; height: 100%; }
.wx-temp { font-size: calc(var(--u) * 4 * var(--weather-scale)); font-weight: 700; line-height: 1; }
.wx-text { font-size: calc(var(--u) * 2.3 * var(--weather-scale)); color: var(--muted); max-width: calc(var(--u) * 20 * var(--weather-scale)); text-align: left; line-height: 1.15; }

/* ── Tenant listing ─────────────────────────── */
.listing { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: calc(var(--u) * 3.6) var(--pad) calc(var(--u) * 2); }
.listing-head {
  display: flex; justify-content: space-between;
  font-size: calc(var(--u) * 2.4); color: var(--muted);
  padding-bottom: calc(var(--u) * 1.2);
  border-bottom: 1px solid var(--rule);
}
.list-frame { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.tenants { list-style: none; }
.tenant {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; column-gap: calc(var(--tf) * 0.6);
  padding: calc(var(--tf) * 0.46) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--tf); font-weight: 700; line-height: 1.14;
}
.tenant-name { min-width: 0; text-wrap: pretty; }
.tenant-note { display: block; margin-top: 0.12em; font-size: 0.56em; font-weight: 400; font-style: italic; color: var(--muted); line-height: 1.2; }
.tenant-suite { font-variant-numeric: tabular-nums; min-width: 3.1ch; text-align: right; }
.tenant-dir { width: 0.9em; align-self: start; margin-top: 0.14em; display: flex; }
.tenant-dir svg { width: 100%; height: auto; }
.tenants.no-arrows .tenant { grid-template-columns: 1fr auto; }
.tenants.no-arrows .tenant-dir { display: none; }
.tenants.two-col { columns: 2; column-gap: calc(var(--u) * 5); }
.tenants.two-col .tenant { break-inside: avoid; }
.listing.two-col-head .listing-head { display: none; }
.empty { font-size: calc(var(--u) * 3); color: var(--muted); padding-top: calc(var(--u) * 4); }

/* ── News ───────────────────────────────────── */
.news { flex: 0 0 auto; padding: 0 var(--pad) calc(var(--u) * 3.6); }
/* The news size scales its text, and the panel grows with it; the tenant list still keeps its room first (display.js) */
.news-slides { position: relative; height: calc(var(--u) * 42 * var(--news-scale)); overflow: hidden; background: var(--navy-deep); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.slide.on { opacity: 1; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: calc(var(--u) * 10 * var(--news-scale)) calc(var(--u) * 3.4) calc(var(--u) * 3);
  background: linear-gradient(to top, rgba(8, 19, 34, 0.96) 0%, rgba(8, 19, 34, 0.86) 45%, rgba(8, 19, 34, 0) 100%);
}
.slide.text-only .slide-text { top: 0; display: flex; flex-direction: column; justify-content: center; background: none; padding-top: calc(var(--u) * 3); }
.slide-headline { font-size: calc(var(--u) * 3.7 * var(--news-scale)); font-weight: 700; line-height: 1.16; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.slide.text-only .slide-headline { font-size: calc(var(--u) * 4.6 * var(--news-scale)); -webkit-line-clamp: 4; }
.slide-meta { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.1 * var(--news-scale)); color: var(--steel); }

/* ── Information slides (DP-08 round 11): traffic map, travel times, nearby amenities; sized with the news ── */
.info-slide { background: var(--navy-deep); display: flex; flex-direction: column; padding: calc(var(--u) * 3.2 * var(--news-scale)) calc(var(--u) * 3.4); }
.info-head { font-size: calc(var(--u) * 2.4 * var(--news-scale)); color: var(--steel); letter-spacing: 0.02em; margin-bottom: calc(var(--u) * 1.6 * var(--news-scale)); }
.info-head span { color: var(--muted); margin-left: 0.5em; }
.info-list { list-style: none; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-evenly; }
.info-list li { padding: calc(var(--u) * 1 * var(--news-scale)) 0; border-bottom: 1px solid var(--rule); }
.info-list li:last-child { border-bottom: 0; }
.info-row { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 2); }
.info-name { font-size: calc(var(--u) * 3.3 * var(--news-scale)); font-weight: 700; line-height: 1.15; min-width: 0; }
.info-value { font-size: calc(var(--u) * 4.4 * var(--news-scale)); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.info-value small { font-size: 0.5em; font-weight: 400; color: var(--muted); }
.info-value.small { font-size: calc(var(--u) * 2.4 * var(--news-scale)); font-weight: 400; color: var(--steel); }
.info-line { margin-top: calc(var(--u) * 0.5); font-size: calc(var(--u) * 2.2 * var(--news-scale)); color: var(--muted); line-height: 1.25; }
.info-foot { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.7 * var(--news-scale)); color: var(--muted); }
.map-slide { overflow: hidden; background: var(--navy-deep); }
.map-canvas { position: absolute; inset: 0; }
.map-pin { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); margin: calc(var(--u) * -1.2) 0 0 calc(var(--u) * -1.2);
  border-radius: 50%; background: #f2c14e; border: calc(var(--u) * 0.5) solid #0d1b2e; box-shadow: 0 0 0 calc(var(--u) * 0.3) #f2c14e; z-index: 2; pointer-events: none; }
.map-head { position: absolute; left: 0; top: 0; z-index: 2; margin: 0; padding: calc(var(--u) * 1.2) calc(var(--u) * 2); background: rgba(8, 19, 34, 0.86); }

/* Place lists with pictures (DP-08 round 12): a small card, picture on the left */
.info-list li.has-img { display: flex; align-items: center; gap: calc(var(--u) * 2.2); }
/* .slide .info-img outranks the news photo's full-box rule (.slide img) */
.slide .info-img { position: static; inset: auto; flex: none; width: calc(var(--u) * 10 * var(--news-scale)); height: calc(var(--u) * 10 * var(--news-scale)); object-fit: cover; border-radius: calc(var(--u) * 0.8); background: var(--navy); }
.info-body { flex: 1 1 auto; min-width: 0; }

/* ── Contacts ───────────────────────────────── */
.contacts {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--navy-deep);
  border-top: 2px solid var(--steel);
}
.contacts.single { grid-template-columns: 1fr; }
/* Directory to Go (DP-08 round 12): the QR code at the end of the contacts band, with its line */
.contacts.has-togo { grid-template-columns: 1fr 1fr auto; }
.contacts.has-togo.single { grid-template-columns: 1fr auto; }
.contacts.togo-only { grid-template-columns: 1fr; justify-items: end; }
.togo { display: flex; align-items: center; gap: calc(var(--u) * 1.8); padding: calc(var(--u) * 2.2) var(--pad) calc(var(--u) * 2.2) calc(var(--u) * 2.4); border-left: 1px solid var(--rule); }
.contacts.togo-only .togo { border-left: 0; }
.togo-line { font-size: calc(var(--u) * 2.1 * var(--qr-scale)); color: var(--steel); line-height: 1.2; max-width: calc(var(--u) * 17 * var(--qr-scale)); text-align: right; text-wrap: balance; }
.togo-code { flex: none; width: calc(var(--u) * 12 * var(--qr-scale)); height: calc(var(--u) * 12 * var(--qr-scale)); border-radius: calc(var(--u) * 0.6); overflow: hidden; background: #fff; }
.togo-code svg { display: block; width: 100%; height: 100%; }
.contact { padding: calc(var(--u) * 3.2 * var(--contacts-scale)) var(--pad) calc(var(--u) * 3.4 * var(--contacts-scale)); }
.contact + .contact { border-left: 1px solid var(--rule); }
.contact-role { font-size: calc(var(--u) * 2.2 * var(--contacts-scale)); color: var(--muted); }
.contact-name { margin-top: calc(var(--u) * 0.8 * var(--contacts-scale)); font-size: calc(var(--u) * 3 * var(--contacts-scale)); font-weight: 700; line-height: 1.15; }
.contact-line { margin-top: calc(var(--u) * 0.4 * var(--contacts-scale)); font-size: calc(var(--u) * 2.5 * var(--contacts-scale)); color: var(--steel); }
.contact-phone { font-variant-numeric: tabular-nums; }

.welcome {
  background: var(--navy-deep); color: var(--muted);
  font-size: calc(var(--u) * 2.3 * var(--welcome-scale)); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 var(--pad) calc(var(--u) * 2.8);
}
/* Made larger than standard: wraps to a second line rather than being cut off with … */
.welcome.wrap { white-space: normal; text-wrap: balance; line-height: 1.25; }

/* The bottom logo strip: the owner's or manager's logo (or the building's, when they're swapped) */
.brand {
  display: flex; justify-content: center; align-items: center;
  background: var(--navy-deep); padding: calc(var(--u) * 1.4) var(--pad) calc(var(--u) * 2.4);
}
.brand img { display: block; max-height: calc(var(--u) * 6 * var(--brand-scale)); max-width: min(100%, calc(70% * var(--brand-scale)), calc(var(--u) * 46 * var(--brand-scale))); object-fit: contain; }
#stage.has-bg .brand { background: rgba(8, 19, 34, 0.82); }
#stage.landscape .brand { grid-column: 1 / -1; padding-top: calc(var(--u) * 1); padding-bottom: calc(var(--u) * 1.6); }
#stage.landscape .brand img { max-height: calc(var(--u) * 5 * var(--brand-scale)); }

/* "Powered by WayTuGo" (DP-08 round 12): the product's mark, at the very bottom, visible but quiet; hidden while the
   Reconnecting note is up so the two never overlap */
.powered {
  background: var(--navy-deep); color: var(--muted); opacity: 0.6; text-align: center; letter-spacing: 0.02em;
  font-size: calc(var(--u) * 1.35); padding: 0 var(--pad) calc(var(--u) * 1.2); white-space: nowrap;
}
#stage.has-bg .powered { background: rgba(8, 19, 34, 0.82); }
#stage:has(#offline:not([hidden])) .powered { visibility: hidden; }

.offline {
  position: absolute; right: calc(var(--u) * 2); bottom: calc(var(--u) * 1); 
  font-size: calc(var(--u) * 1.4); color: var(--muted); opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) { .slide, #stage { transition: none; } }

/* ── Landscape ──────────────────────────────
   Header across the top, tenants on the left, news on the right, contacts across the bottom.
   When the list needs the room, the news steps aside and the list takes the full width. */
#stage.landscape {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * (40 + 24 * var(--news-scale))); /* 64 at standard; 56.8 to 76 */
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
}
#stage.landscape .masthead { grid-column: 1 / -1; }
#stage.landscape .property { font-size: calc(var(--u) * 6 * var(--title-scale)); }
#stage.landscape .listing { grid-column: 1; grid-row: 2; }
#stage.landscape.no-news .listing { grid-column: 1 / -1; }
#stage.landscape .news { grid-column: 2; grid-row: 2; display: flex; padding: calc(var(--u) * 3.6) var(--pad) calc(var(--u) * 2) 0; }
#stage.landscape .news-slides { flex: 1; height: auto; }
#stage.landscape .slide.text-only .slide-headline { font-size: calc(var(--u) * 3.8 * var(--news-scale)); }
#stage.landscape .contacts, #stage.landscape .welcome, #stage.landscape .powered { grid-column: 1 / -1; }
#stage.landscape .contact { padding-top: calc(var(--u) * 2.2 * var(--contacts-scale)); padding-bottom: calc(var(--u) * 2.4 * var(--contacts-scale)); }

/* Identify: big, unmistakable, temporary */
.identify {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2);
  background: rgba(8, 19, 34, 0.9); border: calc(var(--u) * 1.2) solid #f2c14e; text-align: center; padding: calc(var(--u) * 6);
}
.identify-name { font-size: calc(var(--u) * 9); font-weight: 700; line-height: 1.05; }
.identify-key { font-size: calc(var(--u) * 3.4); color: #f2c14e; font-variant-numeric: tabular-nums; }
.identify[hidden] { display: none !important; }

/* The bare address, with no screen chosen */
.no-screen { margin: auto; padding: 40px; text-align: center; font-size: 20px; line-height: 1.5; color: var(--muted); cursor: auto; }
.no-screen h1 { font-family: "Lora", Georgia, serif; font-size: 36px; color: var(--ink); margin-bottom: 12px; }
.no-screen a { color: var(--steel); }
body:has(.no-screen) { cursor: auto; }

/* ── The touch directory (DP-09 round 15): only on screens marked touch. --finger is about 15 mm on this screen ── */
html.show-cursor, html.show-cursor body { cursor: auto; }
html.show-cursor #stage.touch button, html.show-cursor #stage.touch .tenant { cursor: pointer; }
#stage.touch button { font: inherit; color: inherit; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
#stage.touch .tenant { -webkit-tap-highlight-color: transparent; }
#stage.touch .tenant:active { background: rgba(199, 205, 214, 0.12); }
/* Too long to fit at a finger's size: the list scrolls (with a fade showing there's more), A to Z below it */
#stage.scrolling .list-frame { overflow-y: auto; touch-action: pan-y; scrollbar-width: none; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent); }
#stage.scrolling .list-frame::-webkit-scrollbar { display: none; }
.touchbar { display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding-top: calc(var(--u) * 1.6); }
.kbd-btn { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 1); min-height: calc(var(--finger, 60px) * 0.85);
  padding: 0 calc(var(--u) * 2.2); border-radius: calc(var(--u) * 1) !important; background: rgba(199, 205, 214, 0.14) !important;
  font-size: calc(var(--u) * 2.4) !important; font-weight: 700; }
.kbd-btn svg { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.az { flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 0.5); }
.az-key { min-width: calc(var(--finger, 60px) * 0.78); height: calc(var(--finger, 60px) * 0.78); border-radius: calc(var(--u) * 0.8) !important;
  background: rgba(199, 205, 214, 0.1) !important; font-size: calc(var(--u) * 2.4) !important; font-weight: 700; }
.az-key:active, .key:active, .card-back:active, .kbd-btn:active { background: rgba(199, 205, 214, 0.3) !important; }

/* A company's card, over the directory; the way back is at the bottom, in reach */
#stage > .card, #stage > .kbd { position: absolute; inset: 0; z-index: 4; }
.card { background: rgba(8, 19, 34, 0.72); display: flex; align-items: flex-end; padding: calc(var(--u) * 6) var(--pad); }
.card-panel { width: 100%; max-height: 82%; display: flex; flex-direction: column; background: var(--navy); border: 2px solid var(--steel);
  border-radius: calc(var(--u) * 1.4); padding: calc(var(--u) * 4); gap: calc(var(--u) * 2); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, 0.5); }
.card-name { font-family: "Lora", Georgia, serif; font-weight: 700; font-size: calc(var(--u) * 5.6); line-height: 1.08; text-wrap: balance; }
.card-note { margin-top: calc(var(--u) * 0.8); font-size: calc(var(--u) * 2.4); font-style: italic; color: var(--muted); }
.card-suite { margin-top: calc(var(--u) * 1.6); display: flex; align-items: center; gap: calc(var(--u) * 1.2); font-size: calc(var(--u) * 4.2); font-weight: 700; font-variant-numeric: tabular-nums; }
.card-suite > span:first-child { font-size: 0.55em; font-weight: 400; color: var(--muted); }
.card-dir { width: 1em; display: inline-flex; } .card-dir svg { width: 100%; height: auto; }
.card-people-head { font-size: calc(var(--u) * 2.2); color: var(--muted); letter-spacing: 0.02em; border-top: 1px solid var(--rule); padding-top: calc(var(--u) * 1.6); }
.card-people { list-style: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none; }
.card-people::-webkit-scrollbar { display: none; }
.card-people li { padding: calc(var(--u) * 1.4) 0; border-bottom: 1px solid var(--rule); }
.card-people li:last-child { border-bottom: 0; }
.person-name { font-size: calc(var(--u) * 3.2); font-weight: 700; line-height: 1.15; }
.person-title { margin-top: calc(var(--u) * 0.3); font-size: calc(var(--u) * 2.4); color: var(--steel); }
.person-lines { margin-top: calc(var(--u) * 0.4); font-size: calc(var(--u) * 2.3); color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.person-lines .dot { margin: 0 0.5em; }
.card-back { flex: none; width: 100%; min-height: var(--finger, 60px); border-radius: calc(var(--u) * 1) !important; background: var(--steel) !important;
  color: var(--navy) !important; font-size: calc(var(--u) * 2.8) !important; font-weight: 700; }

/* The accessible keyboard (round 16): the lower part of the screen, where everyone can reach. --key is about 12 mm
   (0.8 of a fingertip), held between 4 and 7 units so it stays a compact block on any screen; the matches sit above the
   keys and always keep room for three; Show puts the keys away and the matches take the whole panel. */
.kbd { display: flex; align-items: flex-end; background: rgba(8, 19, 34, 0.5);
  --key: clamp(calc(var(--u) * 4), calc(var(--finger, 60px) * 0.8), calc(var(--u) * 7)); --kgap: calc(var(--key) * 0.1); }
.kbd-panel { width: 100%; height: 64%; max-height: 96%; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); background: var(--navy-deep);
  border-top: 2px solid var(--steel); padding: calc(var(--u) * 2) calc(var(--u) * 2.4) calc(var(--u) * 2.4); }
#stage.landscape .kbd-panel { height: 90%; }
.kbd-top { flex: none; display: flex; gap: calc(var(--u) * 1.2); align-items: stretch; width: min(100%, calc(var(--key) * 16)); align-self: center; }
.kbd-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: var(--key); padding: 0 calc(var(--u) * 2) !important;
  background: var(--navy) !important; border: 1px solid var(--steel) !important; border-radius: calc(var(--u) * 1) !important;
  font-size: calc(var(--key) * 0.46) !important; font-weight: 700; white-space: pre; overflow: hidden; text-align: left; }
.kbd-caret { width: 0.08em; height: 1.1em; background: var(--steel); margin-left: 0.04em; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.keys-away .kbd-caret { display: none; }
.kbd-hint { color: var(--muted); font-weight: 400; margin-left: 0.3em; }
.kbd-close, .kbd-again { flex: none; padding: 0 calc(var(--u) * 2.4); border-radius: calc(var(--u) * 1) !important; background: rgba(199, 205, 214, 0.14) !important;
  font-size: calc(var(--key) * 0.34) !important; font-weight: 700; }
.kbd-results { list-style: none; flex: 1 1 auto; min-height: calc(var(--key) * 3); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none;
  width: min(100%, calc(var(--key) * 16)); align-self: center; }
.kbd-results::-webkit-scrollbar { display: none; }
.kbd-results li { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 2); min-height: var(--key);
  padding: 0 calc(var(--u) * 1); border-bottom: 1px solid var(--rule); font-size: calc(var(--key) * 0.4); font-weight: 700; }
.kbd-results li:active { background: rgba(199, 205, 214, 0.12); }
.kbd-results li.none { color: var(--muted); font-weight: 400; justify-content: flex-start; border-bottom: 0; }
.r-suite { font-variant-numeric: tabular-nums; color: var(--steel); }
.kbd-keys { flex: none; display: flex; flex-direction: column; gap: var(--kgap); width: min(100%, calc(var(--key) * 12.4)); align-self: center; }
.keys-away .kbd-keys { display: none; }
.kbd-row { display: flex; gap: var(--kgap); justify-content: center; }
.key { flex: 1 1 0; min-width: 0; max-width: calc(var(--key) * 1.16); height: var(--key);
  border-radius: calc(var(--key) * 0.12) !important; background: rgba(199, 205, 214, 0.16) !important; font-size: calc(var(--key) * 0.42) !important; font-weight: 700; }
.key.wide { flex: 1.7 1 0; max-width: calc(var(--key) * 2); font-size: calc(var(--key) * 0.3) !important; }
.key.space { flex: 5 1 0; max-width: none; }
.key.enter { background: var(--steel) !important; color: var(--navy) !important; }

/* ── Places and promotions on touch screens (DP-10 round 18): the Places button opens every list; a place's card ── */
.places .kbd-panel { gap: calc(var(--u) * 1.4); }
.places-tabs { flex: 1 1 auto; min-width: 0; display: flex; gap: calc(var(--u) * 0.8); overflow-x: auto; scrollbar-width: none; }
.places-tab { flex: none; min-height: var(--key); padding: 0 calc(var(--u) * 2) !important; border-radius: calc(var(--u) * 1) !important;
  background: rgba(199, 205, 214, 0.1) !important; font-size: max(calc(var(--key) * 0.34), calc(var(--u) * 2.4)) !important; font-weight: 700; white-space: nowrap; }
.places-tab.on { background: var(--steel) !important; color: var(--navy) !important; }
.places .kbd-top { width: 100%; }
.places-list { list-style: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none; }
.places-list::-webkit-scrollbar { display: none; }
.places-list li { display: flex; align-items: center; gap: calc(var(--u) * 2); min-height: calc(var(--finger, 60px) * 1.1); padding: calc(var(--u) * 1) calc(var(--u) * 0.6);
  border-bottom: 1px solid var(--rule); }
.places-list li:active { background: rgba(199, 205, 214, 0.12); }
.places-list img, .pl-noimg { flex: none; width: calc(var(--finger, 60px) * 1.1); height: calc(var(--finger, 60px) * 1.1); border-radius: calc(var(--u) * 0.8); object-fit: cover; }
.pl-noimg { background: rgba(199, 205, 214, 0.08); }
.pl-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.3); }
.pl-name { font-size: calc(var(--u) * 3); font-weight: 700; line-height: 1.15; }
.pl-line { font-size: calc(var(--u) * 2.2); color: var(--muted); }
.pl-dist { flex: none; font-size: calc(var(--u) * 2.4); color: var(--steel); font-weight: 700; }
.place-top { display: flex; gap: calc(var(--u) * 3); align-items: flex-start; }
.place-img { flex: none; width: min(36%, calc(var(--u) * 30)); aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--u) * 1.2); background: var(--navy-deep); }
.place-dist { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 3); font-weight: 700; color: var(--steel); }
.place-line { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 2.6); color: var(--muted); line-height: 1.3; }
.place-qr { display: flex; align-items: center; gap: calc(var(--u) * 2.4); border-top: 1px solid var(--rule); padding-top: calc(var(--u) * 2); }
.place-qr-code { flex: none; width: calc(var(--u) * 17); }
.place-qr-code svg { display: block; width: 100%; height: auto; border-radius: calc(var(--u) * 0.6); }
.place-qr-line { font-size: calc(var(--u) * 2.6); font-weight: 700; line-height: 1.3; }
#stage.touch .info-list.amenities li[data-l]:active { background: rgba(199, 205, 214, 0.12); }