/* CityChat web demo — iOS-look shell built from the locked design tokens
   (concepts/ios/shared/tokens.css). Self-hosted variable fonts, no site-wide
   styles.css import (its page chrome would fight the phone frame). */

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-latin-var.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-latin-ext-var.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
  --brand-primary: #0EA5E9;
  --brand-primary-600: #0284C7;
  --brand-cta: #F97316;
  --bg-light: #F0F9FF;
  --surface-light: #FFFFFF;
  --surface-light-2: #F8FAFC;
  --text-light: #0C4A6E;
  --text-light-muted: #475569;
  --border-light: #E2E8F0;
  --cat-food: #F97316;
  --cat-culture: #8B5CF6;
  --cat-nature: #10B981;
  --cat-transit: #3B82F6;
  --font-display: 'Outfit', -apple-system, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --r-pill: 999px;
  --r-card: 20px;
  --r-card-sm: 14px;
  --phone-w: 393px;
  --phone-h: 852px;
  --phone-r: 55px;
  --island-w: 126px;
  --island-h: 37px;
  --safe-top: 59px;
  --tabbar-h: 76px;
  /* Defaults for the theme-swapped extras above (light values). */
  --stage-bg: #0B1220;
  --send-disabled: #BAE6FD;
  --grabber: #CBD5E1;
  --open-badge: #059669;
  /* Translucent in-phone chrome (app header, tab bar, floating pills, chips).
     These were hardcoded white, so in dark mode a white header sat over the
     dark chat with light text on it — invisible. */
  --chrome: rgba(255, 255, 255, 0.85);
  --chrome-solid: rgba(255, 255, 255, 0.92);
  --chrome-hairline: rgba(15, 23, 42, 0.08);
  --chrome-hairline-soft: rgba(15, 23, 42, 0.06);
  --inputbar-veil: rgba(240, 249, 255, 0.97);
  --accent-on-surface: var(--brand-primary-600);
  --elev-2: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
}

/* Dark theme. The stage around the phone is a deliberate dark showcase in both
   themes (it makes the device pop) — what follows re-points the in-phone tokens
   so the SCREEN shows the app the way a dark-mode visitor actually sees it,
   instead of a permanently light mockup. Values mirror the site's dark tokens in
   css/styles.css so the demo and the rest of citychat.pl agree.
   Duplicated for [data-theme="dark"] (explicit choice, wins) and the media query
   (system default, only when the user hasn't chosen light) — demo.css does not
   import styles.css, so the tokens have to be restated here. */
:root[data-theme="dark"] {
  --bg-light: #020617;
  --surface-light: #0F172A;
  --surface-light-2: #16233F;
  --text-light: #DBEAFE;
  --text-light-muted: #94A3B8;
  --border-light: rgba(148, 197, 253, 0.14);
  --elev-2: 0 4px 14px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
  --stage-bg: #010409;
  --send-disabled: #1E3A5F;
  --grabber: #334155;
  --open-badge: #34D399;
  --chrome: rgba(15, 23, 42, 0.88);
  --chrome-solid: rgba(22, 35, 63, 0.95);
  --chrome-hairline: rgba(148, 197, 253, 0.16);
  --chrome-hairline-soft: rgba(148, 197, 253, 0.10);
  --inputbar-veil: rgba(2, 6, 23, 0.97);
  --accent-on-surface: #7DD3FC;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-light: #020617;
    --surface-light: #0F172A;
    --surface-light-2: #16233F;
    --text-light: #DBEAFE;
    --text-light-muted: #94A3B8;
    --border-light: rgba(148, 197, 253, 0.14);
    --elev-2: 0 4px 14px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
    --stage-bg: #010409;
    --send-disabled: #1E3A5F;
    --grabber: #334155;
    --open-badge: #34D399;
    --chrome: rgba(15, 23, 42, 0.88);
    --chrome-solid: rgba(22, 35, 63, 0.95);
    --chrome-hairline: rgba(148, 197, 253, 0.16);
    --chrome-hairline-soft: rgba(148, 197, 253, 0.10);
  --inputbar-veil: rgba(2, 6, 23, 0.97);
  --accent-on-surface: #7DD3FC;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background: var(--stage-bg);
  background-image:
    radial-gradient(at 15% 8%, rgba(56, 189, 248, 0.14) 0, transparent 45%),
    radial-gradient(at 85% 20%, rgba(124, 58, 237, 0.10) 0, transparent 50%),
    radial-gradient(at 70% 95%, rgba(249, 115, 22, 0.10) 0, transparent 45%);
  color: #E2E8F0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 64px;
}

/* ---------- page chrome ---------- */

.page-head { text-align: center; max-width: 640px; }
/* The stage is dark in both themes, so the toggle is styled for a dark
   backdrop rather than reusing the site's surface tokens. */
.theme-toggle {
  position: fixed; top: 18px; right: 18px; z-index: 70;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid rgba(148, 197, 253, 0.22);
  background: rgba(15, 23, 42, 0.72); color: #94A3B8;
  cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { color: #F8FAFC; border-color: rgba(148, 197, 253, 0.4); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: #F8FAFC; text-decoration: none;
  font: 700 18px var(--font-display); letter-spacing: -0.01em;
}
.brand-mark { width: 28px; height: 28px; border-radius: 7px; }
.page-head h1 {
  margin-top: 22px;
  font: 700 clamp(26px, 5vw, 38px)/1.15 var(--font-display);
  letter-spacing: -0.02em; color: #F8FAFC;
}
.page-head p { margin: 12px auto 0; max-width: 52ch; color: #94A3B8; font-size: 15px; line-height: 1.55; }

.stage {
  margin-top: 36px;
  display: flex; flex-wrap: wrap; gap: 40px;
  align-items: center; justify-content: center;
}
.stage-side { max-width: 300px; display: flex; flex-direction: column; gap: 18px; }
.side-note { color: #94A3B8; font-size: 14px; line-height: 1.6; }
.store-ctas { display: flex; flex-direction: column; gap: 10px; }
.store-btn {
  display: inline-flex; justify-content: center; padding: 12px 18px;
  border-radius: 12px; font: 600 14px var(--font-display);
  background: #F8FAFC; color: #0B1220; text-decoration: none;
}
.store-btn.is-disabled { background: rgba(248,250,252,0.12); color: #64748B; cursor: default; }
.fine-print { color: #64748B; font-size: 12px; }

/* ---------- iPhone frame ---------- */

.iphone {
  width: var(--phone-w); height: var(--phone-h);
  border-radius: var(--phone-r);
  background: #0a0a0a; padding: 11px;
  position: relative; flex-shrink: 0;
  box-shadow:
    inset 0 0 0 2px #1f1f1f, 0 0 0 2px #2a2a2a,
    0 40px 80px -20px rgba(0,0,0,0.5), 0 20px 30px -15px rgba(0,0,0,0.3);
}
.iphone::after {
  content: ''; position: absolute; inset: 11px;
  border-radius: calc(var(--phone-r) - 11px); pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 30%);
  z-index: 60;
}
.screen {
  width: 100%; height: 100%;
  border-radius: calc(var(--phone-r) - 11px);
  overflow: hidden; position: relative;
  background: var(--surface-light); color: var(--text-light);
}
.island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: var(--island-w); height: var(--island-h);
  background: #000; border-radius: var(--r-pill); z-index: 50;
}
.status {
  position: absolute; top: 0; left: 0; right: 0; height: var(--safe-top);
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px 0; z-index: 40;
  font: 600 15px/1 -apple-system, system-ui, sans-serif;
  color: var(--text-light); pointer-events: none;
}
.status-right { display: inline-flex; gap: 7px; align-items: center; }

/* Tablet / large-phone-landscape: between 521px and the 900px two-column
   layout the side note squeezed the phone off-centre. Stack the note under the
   device and centre the whole stage instead. */
@media (max-width: 900px) and (min-width: 521px) {
  .stage { flex-direction: column; gap: 28px; }
  .stage-side { max-width: min(420px, 100%); text-align: center; }
  .store-ctas { align-items: center; }
  .store-btn { min-width: 220px; }
}

/* Phone-sized viewports: the demo IS the app — drop the bezel and page chrome. */
@media (max-width: 520px) {
  body { padding: 0; }
  /* Full-bleed app view: the page chrome (and its toggle) step aside — the
     stored theme still applies to the screen itself. */
  .page-head, .stage-side, .theme-toggle { display: none; }
  .stage { margin: 0; width: 100%; }
  .iphone {
    width: 100%; min-height: 100dvh; height: auto;
    border-radius: 0; padding: 0; box-shadow: none; background: none;
  }
  .iphone::after { display: none; }
  .screen { border-radius: 0; height: 100dvh; }
  .island, .status { display: none; }
  .screen { --pane-top: env(safe-area-inset-top); }
  .tabbar { padding-bottom: max(env(safe-area-inset-bottom), 12px); }
}

/* Embedded chat-only mode (?embed=chat). No page embeds it today — #422
   replaced the homepage iframe with a static card after browser-cached old
   demo assets made it render broken — but the mode is kept working for a
   future same-origin embed. Chat pane fills the frame; no bezel, page chrome or
   tab bar. Placed after the phone-viewport block so its rules win. */
body.embed-chat { padding: 0; background: none; display: block; }
body.embed-chat .page-head, body.embed-chat .stage-side, body.embed-chat .theme-toggle { display: none; }
body.embed-chat .stage { margin: 0; width: 100%; }
body.embed-chat .iphone {
  width: 100%; min-height: 100dvh; height: auto;
  border-radius: 0; padding: 0; box-shadow: none; background: none;
}
body.embed-chat .iphone::after { display: none; }
body.embed-chat .screen {
  border-radius: 0; height: 100dvh;
  --pane-top: 0px; --tabbar-h: 0px;
}
body.embed-chat .island, body.embed-chat .status, body.embed-chat .tabbar { display: none; }

/* ---------- in-app shell ---------- */

.tab-pane {
  position: absolute; inset: 0;
  padding-top: var(--pane-top, var(--safe-top));
  display: none; flex-direction: column;
  background: var(--surface-light);
}
.tab-pane.is-active { display: flex; }

.app-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 8px 20px 12px;
  border-bottom: 0.5px solid var(--chrome-hairline);
  background: var(--chrome);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10;
}
.app-title { font: 600 22px var(--font-display); letter-spacing: -0.02em; color: var(--text-light); }

.city-pill {
  margin-top: 3px;
  display: inline-flex; align-items: center; gap: 5px;
  border: none; cursor: pointer;
  background: rgba(14,165,233,0.10);
  /* Deep blue on white in light mode; a light sky in dark, where the 600 shade
     dropped to ~3.8:1 against the dark header. */
  color: var(--accent-on-surface);
  font: 600 12px var(--font-body);
  padding: 4px 10px; border-radius: var(--r-pill);
}
.city-pill.floating {
  margin: 0; background: var(--chrome-solid); box-shadow: var(--elev-2);
  padding: 8px 14px; font-size: 13px;
}
.turns-left { font: 600 11px var(--font-body); color: var(--text-light-muted); }

.app-header-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
/* EN | PL toggle — same look as the site nav's .lang-seg, restated here
   because the demo deliberately doesn't import styles.css. */
.lang-seg {
  display: inline-flex; padding: 2px; gap: 1px;
  border: 0.5px solid rgba(14,165,233,0.35);
  border-radius: var(--r-pill);
  background: var(--chrome-solid);
}
.lang-seg .lang-opt {
  border: none; background: none; cursor: pointer;
  font: 600 11px var(--font-body); color: var(--text-light-muted);
  padding: 3px 9px; border-radius: var(--r-pill);
}
.lang-seg .lang-opt.is-active {
  background: var(--brand-primary); color: #fff; cursor: default;
}

.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--tabbar-h);
  display: flex; z-index: 20;
  background: var(--chrome);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--chrome-hairline);
  padding-bottom: 18px;
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  color: #94A3B8; font: 500 10px var(--font-body);
}
.tab.is-active { color: var(--brand-primary); }

.pane-loading { padding: 32px; text-align: center; color: var(--text-light-muted); font-size: 14px; }

/* ---------- chat ---------- */

.chat-pane { background: var(--bg-light); }
.chat-scroll {
  flex: 1; overflow-y: auto;
  padding: 14px 16px calc(var(--tabbar-h) + 74px);
  display: flex; flex-direction: column; gap: 12px;
}
.chat-empty { margin: auto 0; text-align: center; padding: 0 12px; }
/* The brand mark on a soft radial glow — mirrors the app's own empty state. */
.chat-empty-logo {
  width: 110px; height: 110px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.chat-empty-logo::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,165,233,0.16), rgba(14,165,233,0.05) 60%, transparent 78%);
}
.chat-empty-logo svg {
  width: 72px; height: 72px; border-radius: 17px; position: relative;
  box-shadow: 0 10px 28px rgba(14,165,233,0.35);
}
.chat-empty h2 { font: 600 21px var(--font-display); letter-spacing: -0.01em; }
.chat-empty p { margin-top: 6px; color: var(--text-light-muted); font-size: 14px; }

.chip-row { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  border: 0.5px solid rgba(14,165,233,0.35); cursor: pointer;
  background: var(--chrome-solid); color: var(--accent-on-surface);
  font: 500 13px var(--font-body); padding: 8px 13px; border-radius: var(--r-pill);
}
.chip:active { background: rgba(14,165,233,0.12); }
.chip-row.followups { justify-content: flex-start; margin-top: 2px; }

.msg-user {
  align-self: flex-end; max-width: 78%;
  background: var(--brand-primary); color: #fff;
  padding: 10px 14px; border-radius: 22px 22px 6px 22px;
  font: 400 15px/1.4 var(--font-body);
  overflow-wrap: break-word;
}
.msg-ai {
  align-self: flex-start; max-width: 90%;
  padding: 13px 15px; border-radius: 22px 22px 22px 6px;
  background-color: rgba(14, 165, 233, 0.08);
  background-image:
    radial-gradient(at 20% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 60%),
    radial-gradient(at 90% 80%, rgba(249, 115, 22, 0.08) 0%, transparent 60%);
  border: 0.5px solid rgba(14, 165, 233, 0.18);
  color: var(--text-light);
  font: 400 15px/1.5 var(--font-body);
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.msg-ai strong { font-weight: 650; }
.msg-ai.is-note { border-style: dashed; color: var(--text-light-muted); }

.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary);
  opacity: 0.4; animation: typing 1.1s infinite;
}
.typing i:nth-child(2) { animation-delay: 0.18s; }
.typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.place-cards { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.place-cards::-webkit-scrollbar { display: none; }
.pcard {
  flex: 0 0 168px; cursor: pointer; border: none; text-align: left;
  background: var(--surface-light); border-radius: var(--r-card-sm);
  box-shadow: var(--elev-2); overflow: hidden;
  font-family: var(--font-body);
}
.pcard img, .pcard .pcard-ph { width: 100%; height: 92px; object-fit: cover; display: block; }
.pcard .pcard-ph { background: linear-gradient(135deg, rgba(14,165,233,0.25), rgba(124,58,237,0.2)); }
.pcard-body { padding: 8px 10px 10px; }
.pcard-name { font: 600 13px/1.25 var(--font-display); color: var(--text-light); }
.pcard-meta { margin-top: 3px; font: 500 11px var(--font-body); color: var(--text-light-muted); }

.chat-inputbar {
  position: absolute; left: 0; right: 0; bottom: var(--tabbar-h); z-index: 15;
  padding: 8px 12px 10px;
  background: linear-gradient(to top, var(--inputbar-veil) 75%, transparent);
}
#chat-form {
  display: flex; gap: 8px; align-items: center;
  background: var(--surface-light); border: 0.5px solid var(--border-light);
  border-radius: var(--r-pill); padding: 5px 5px 5px 16px;
  box-shadow: var(--elev-2);
}
#chat-input {
  flex: 1; border: none; outline: none; background: none;
  font: 400 15px var(--font-body); color: var(--text-light);
}
#chat-input::placeholder { color: #94A3B8; }
#chat-send {
  width: 36px; height: 36px; flex-shrink: 0; border: none; cursor: pointer;
  border-radius: 50%; background: var(--brand-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
#chat-send:disabled { background: var(--send-disabled); cursor: default; }
/* Turnstile is configured interaction-only, but once it has rendered (success
   card included) it still occupies space. In normal flow that pushed the
   composer up and covered the chat, so it is an overlay ABOVE the input bar
   instead — layout never moves — and it is only displayed while Turnstile
   actually asks for a human (see the interactive callbacks in demo.js). */
.turnstile-slot {
  display: none;
  position: absolute; left: 0; right: 0; bottom: 100%;
  justify-content: center; padding-bottom: 8px; z-index: 30;
}
.turnstile-slot.is-visible { display: flex; }

/* ---------- discover ---------- */

.discover-scroll { flex: 1; overflow-y: auto; padding: 12px 14px calc(var(--tabbar-h) + 16px); }
.discover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dcard {
  border: none; padding: 0; text-align: left; cursor: pointer;
  background: var(--surface-light); border-radius: var(--r-card);
  overflow: hidden; box-shadow: var(--elev-2);
  font-family: var(--font-body);
}
.dcard img, .dcard .dcard-ph { width: 100%; height: 108px; object-fit: cover; display: block; }
.dcard .dcard-ph { background: linear-gradient(135deg, rgba(14,165,233,0.22), rgba(124,58,237,0.18)); }
.dcard-body { padding: 9px 11px 11px; }
.dcard-name { font: 600 13.5px/1.25 var(--font-display); color: var(--text-light); }
.dcard-meta { margin-top: 4px; font: 500 11px var(--font-body); color: var(--text-light-muted); display: flex; align-items: center; gap: 5px; }
.cat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-primary); flex-shrink: 0; }
.cat-dot[data-cat="food"] { background: var(--cat-food); }
.cat-dot[data-cat="culture"] { background: var(--cat-culture); }
.cat-dot[data-cat="nature"] { background: var(--cat-nature); }
.cat-dot[data-cat="transit"] { background: var(--cat-transit); }
.open-badge { color: var(--open-badge); font-weight: 600; }
.closed-badge { color: #94A3B8; font-weight: 600; }

/* ---------- map ---------- */

.map-pane { padding-top: 0; }
#map-canvas { position: absolute; inset: 0 0 var(--tabbar-h); }
.map-topbar {
  position: absolute; top: calc(var(--safe-top) + 6px); left: 0; right: 0;
  display: flex; justify-content: center; z-index: 10; pointer-events: none;
}
.map-topbar .city-pill { pointer-events: auto; }
@media (max-width: 520px) {
  .map-topbar { top: calc(env(safe-area-inset-top) + 10px); }
}
.maplibregl-ctrl-attrib { font-size: 9px; }

/* ---------- sheets ---------- */

.sheet-backdrop {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(2,6,23,0.4);
}
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 35;
  background: var(--surface-light);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px rgba(2,6,23,0.25);
  max-height: 78%;
  display: flex; flex-direction: column;
  animation: sheet-up 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
/* [hidden] must beat the explicit display values above, or invisible sheets
   keep intercepting taps over the tab bar. */
.sheet[hidden], .sheet-backdrop[hidden] { display: none; }
.sheet-grab {
  width: 40px; height: 4.5px; border-radius: 3px;
  background: var(--grabber); margin: 9px auto 4px; flex-shrink: 0;
}
.city-sheet h3 { padding: 8px 22px 10px; font: 600 18px var(--font-display); }
.city-list { overflow-y: auto; padding-bottom: 26px; }
.city-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border: none; background: none; cursor: pointer;
  font: 500 15px var(--font-body); color: var(--text-light);
  border-top: 0.5px solid var(--chrome-hairline-soft);
}
.city-row .check { color: var(--brand-primary); font-weight: 700; }

.place-sheet-body { overflow-y: auto; padding: 4px 0 30px; }
.psheet-img { width: 100%; height: 190px; object-fit: cover; }
.psheet-pad { padding: 14px 20px 0; }
.psheet-name { font: 650 21px var(--font-display); letter-spacing: -0.01em; color: var(--text-light); }
.psheet-tier { margin-top: 4px; color: var(--text-light-muted); font: 500 12.5px var(--font-body); }
.psheet-desc { margin-top: 12px; font: 400 14px/1.6 var(--font-body); color: var(--text-light); }
.psheet-row { margin-top: 12px; display: flex; gap: 9px; font: 500 13px var(--font-body); color: var(--text-light-muted); align-items: baseline; }
.psheet-row .k { flex-shrink: 0; font-weight: 650; color: var(--text-light); }
.psheet-credit { margin-top: 14px; font: 400 10.5px var(--font-body); color: #94A3B8; }
.psheet-cta {
  display: block; margin: 18px 20px 0; padding: 13px; text-align: center;
  background: var(--brand-cta); color: #fff; text-decoration: none;
  border-radius: 13px; font: 600 15px var(--font-display);
}