/* ==========================================================================
   WISDM — Soho House inspired design system
   Cream parchment, deep oxblood, forest green, brass accents.
   Display: Cormorant Garamond · Body: Work Sans
   Faithful port of the Lovable build's styles.css tokens.
   ========================================================================== */

:root {
  --radius: 0.25rem;

  /* Brand atoms (oklch, as in the original build) */
  --parchment: oklch(0.957 0.005 80);
  --parchment-deep: oklch(0.928 0.008 78);
  --ink: oklch(0.22 0.025 40);
  --oxblood: oklch(0.36 0.105 22);
  --oxblood-soft: oklch(0.46 0.095 22);
  --forest: oklch(0.36 0.055 155);
  --brass: oklch(0.74 0.105 78);

  /* Semantic mapping */
  --background: var(--parchment);
  --foreground: var(--ink);
  --card: oklch(0.985 0.012 80);
  --card-foreground: var(--ink);
  --popover: oklch(0.985 0.012 80);
  --primary: var(--oxblood);
  --primary-foreground: var(--parchment);
  --secondary: var(--parchment-deep);
  --secondary-foreground: var(--ink);
  --muted: oklch(0.92 0.018 78);
  --muted-foreground: oklch(0.42 0.025 40);
  --accent: var(--forest);
  --accent-foreground: var(--parchment);
  --destructive: oklch(0.5 0.18 25);
  --destructive-foreground: var(--parchment);
  --border: oklch(0.86 0.022 70);
  --input: oklch(0.88 0.022 70);
  --ring: var(--oxblood);

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-sans: "Work Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --shadow-elegant: 0 1px 2px oklch(0.25 0.06 30 / 0.06), 0 24px 60px -20px oklch(0.25 0.06 30 / 0.18);
  --shadow-soft: 0 1px 2px oklch(0.25 0.06 30 / 0.04), 0 8px 24px -12px oklch(0.25 0.06 30 / 0.12);
}

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }

html, body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .app-shell { font-size: 1.0625rem; line-height: 1.55; }
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* ------------------------------------------------------------- primitives */

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted-foreground);
}

.rule {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
}

.shell6 { max-width: 72rem; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.shell3 { max-width: 48rem; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.shell5 { max-width: 64rem; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.muted { color: var(--muted-foreground); }
.small { font-size: 0.875rem; }
.xs { font-size: 0.75rem; }
.mono { font-family: var(--font-mono); }
.italic { font-style: italic; }
.pre-line { white-space: pre-line; }
.center { text-align: center; }
.hidden { display: none !important; }

.track {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ header */

.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 94%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* Launched from the Home Screen the app runs edge to edge, so the header has
     to hold its own space under the clock rather than sitting beneath it. In a
     normal browser tab these insets are zero and nothing moves. */
  padding-top: env(safe-area-inset-top);
}

.app-header .bar {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  text-decoration: none;
  color: var(--foreground);
}

/* iOS renders unstyled <button> text in its default blue and washes out
   disabled fields — keep everything in the house palette instead. */
button { color: inherit; -webkit-tap-highlight-color: transparent; }
input:disabled, select:disabled, textarea:disabled {
  -webkit-text-fill-color: var(--muted-foreground);
  color: var(--muted-foreground);
  opacity: 1;
}

.app-shell { min-height: 100vh; padding-top: calc(80px + env(safe-area-inset-top)); display: flex; flex-direction: column; }
/* min-width: 0 is critical — as flex items, main/footer otherwise refuse to
   shrink below their content's natural width, so one wide horizontal strip
   forced EVERY page out to desktop width on phones. (No max-width here —
   that overrode the shell's 72rem column and left content hugging the left
   edge while the header stayed centred.) */
.app-shell > main { flex: 1; min-width: 0; }
.app-shell > * { min-width: 0; }
/* Explicit width is the load-bearing part: the shell centres with auto
   margins inside a flex body, and without width:100% that combination
   resolves to CONTENT width when a strip is wider than a phone — the page
   then lays out desktop-size and iOS zooms out to match. width:100% +
   max-width + auto margins is correct at every size. */
.app-shell > main, .app-shell > footer { width: 100%; }
body { overflow-x: clip; }

/* nav dropdown */

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
  padding: 6px 12px;
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.15s ease;
}
.nav-trigger:hover { background: var(--muted); }

.menu-pop {
  position: absolute;
  top: 58px;
  right: 24px;
  width: min(85vw, 24rem);
  background: var(--popover);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elegant);
  padding: 8px;
  display: none;
  z-index: 40;
}
.menu-pop.open { display: block; }

.menu-pop a, .menu-pop button.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--foreground);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
}
.menu-pop a:hover, .menu-pop button.menu-item:hover { background: var(--muted); }
.menu-pop .sep { height: 1px; background: var(--border); margin: 6px 4px; }
.menu-pop .mi-label { flex: 1; }
.menu-pop svg { width: 20px; height: 20px; }
.menu-pop .exit { color: var(--muted-foreground); }

/* notifications */

.bell-wrap { position: relative; }
.bell-btn {
  position: relative;
  display: inline-flex;
  border: none;
  background: none;
  color: var(--foreground);
  padding: 8px;
}
.bell-btn:hover { color: var(--primary); }
.bell-btn .badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
}

.notif-pop {
  position: absolute;
  top: 44px;
  right: 0;
  width: min(92vw, 22rem);
  max-height: 70vh;
  overflow: auto;
  background: var(--popover);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elegant);
  display: none;
  z-index: 40;
}
/* The bell sits inside the header with the section menu to its right, so a
   right-anchored panel 92vw wide overhangs the left edge of a phone and the
   sender's name gets clipped. On narrow screens pin the panel to the viewport
   instead of to the bell, so it always fits without any sideways jigging.
   (.app-header uses backdrop-filter, which makes it the containing block for
   fixed descendants — it spans the full width at top:0, so these insets still
   resolve against the screen edges.) */
@media (max-width: 600px) {
  .notif-pop {
    position: fixed;
    top: 72px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
  }
}
.notif-pop.open { display: block; }
.notif-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.notif-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-decoration: none;
}
.notif-item.unread { background: color-mix(in oklab, var(--primary) 5%, transparent); }
.notif-item:hover { background: var(--muted); }
.notif-item .t { font-size: 0.875rem; font-weight: 500; }
.notif-item .b { font-size: 0.8125rem; color: var(--muted-foreground); }
.notif-item .when { font-size: 0.6875rem; color: var(--muted-foreground); letter-spacing: 0.08em; }
.notif-empty { padding: 28px 14px; text-align: center; font-style: italic; color: var(--muted-foreground); font-size: 0.875rem; }

/* ------------------------------------------------------------------ footer */

.app-footer { margin-top: 96px; border-top: 1px solid var(--border); }
.app-footer .inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.app-footer .wise {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  color: var(--foreground);
  text-transform: none;
}
/* T&C's, Support and the confidentiality line were three inline children of a
   plain span, so they ran together as "T&C'SSUPPORTPRIVATE & CONFIDENTIAL".
   Flex gap rather than typed separators: the Support link is hidden unless a
   support address is set, and gaps collapse around a display:none child where
   a middot would be left stranded. */
.app-footer .right {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
}
.app-footer a { color: inherit; text-decoration: none; }
.app-footer a:hover { color: var(--foreground); }
@media (min-width: 640px) {
  .app-footer .inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .app-footer .left { justify-self: start; text-align: left; }
  .app-footer .wise { justify-self: center; }
  .app-footer .right { justify-self: end; display: flex; gap: 16px; align-items: center; }
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn:hover { background: var(--secondary); }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.btn-primary:hover { background: var(--oxblood-soft); border-color: var(--oxblood-soft); }

.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-foreground); }
.btn-destructive-outline { border-color: var(--destructive); color: var(--destructive); }
.btn-destructive-outline:hover { background: color-mix(in oklab, var(--destructive) 8%, transparent); }
.btn-ghost { border-color: transparent; }
.btn-sm { padding: 6px 10px; }
.btn-block { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  transition: color 0.15s ease;
}
.text-link:hover { color: var(--foreground); }
.text-link.primary { color: var(--primary); }
.text-link svg { width: 13px; height: 13px; flex: none; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px;
  color: var(--muted-foreground);
  transition: color 0.15s ease;
}
.icon-btn:hover { color: var(--foreground); }
.icon-btn.danger:hover { color: var(--destructive); }
.icon-btn svg { width: 16px; height: 16px; }

/* pill toggles (segmented) */

.pill {
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--input);
  border-radius: 2px;
  background: transparent;
  color: var(--muted-foreground);
  transition: all 0.15s ease;
}
.pill:hover { color: var(--foreground); background: var(--secondary); }
.pill.active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.chip {
  display: inline-block;
  border: 1px solid var(--border);
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
}
.chip.primary { border-color: color-mix(in oklab, var(--primary) 40%, transparent); background: color-mix(in oklab, var(--primary) 8%, transparent); color: var(--primary); }
.chip.accent { border-color: color-mix(in oklab, var(--accent) 40%, transparent); background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--accent); }
.chip.destructive { border-color: color-mix(in oklab, var(--destructive) 45%, transparent); background: color-mix(in oklab, var(--destructive) 8%, transparent); color: var(--destructive); }
.chip.muted { background: var(--muted); border-color: var(--muted); color: var(--muted-foreground); }

/* ------------------------------------------------------------------- cards */

.card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 2px;
}
.card.pad { padding: 24px; }
.card.pad-lg { padding: 32px; }
.card-hover { transition: border-color 0.2s ease; }
.card-hover:hover { border-color: var(--primary); }

.empty {
  border: 1px dashed var(--border);
  border-radius: 2px;
  padding: 28px;
  text-align: center;
  color: var(--muted-foreground);
  font-style: italic;
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------- sections */

.section { border-top: 1px solid var(--border); padding: 40px 0; }
.section:first-child { border-top: 0; padding-top: 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section h2 { font-size: 1.875rem; line-height: 1.2; }
.section .desc { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 6px; max-width: 46rem; }
.section-body { margin-top: 24px; }

.page-hero { padding: 48px 0 40px; }
.page-hero h1 { font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1.1; }
.page-hero .lead { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 12px; max-width: 44rem; }

/* ------------------------------------------------------------------ inputs */

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.field .req { color: var(--primary); }

.input, .textarea, .select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--foreground);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--input);
  border-radius: 0;
  padding: 8px 0;
  transition: border-color 0.15s ease;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-bottom-color: var(--primary); }
.textarea { resize: vertical; min-height: 78px; }

.select { appearance: none; padding-right: 22px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}

.input-boxed, .select-boxed {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: 2px;
  padding: 9px 12px;
}
.input-boxed:focus, .select-boxed:focus { outline: none; border-color: var(--primary); }
.select-boxed { appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.checkbox-line { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; cursor: pointer; }
.checkbox-line input { accent-color: var(--primary); margin-top: 3px; }
.checkbox-line .hint { color: var(--muted-foreground); font-size: 0.8125rem; }

.form-grid { display: grid; gap: 24px 40px; }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ modals */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--background) 80%, transparent);
  backdrop-filter: blur(4px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  /* clears the iPhone notch / Dynamic Island in the installed app (James) */
  padding: max(7vh, calc(env(safe-area-inset-top, 0px) + 30px)) 16px 40px;
}
.modal-overlay.open { display: flex; }
.modal {
  width: 100%;
  max-width: 40rem;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elegant);
  padding: 28px;
  position: relative;
}
.modal.narrow { max-width: 28rem; }
.modal .modal-close { position: absolute; top: 14px; right: 14px; }
.modal h3 { font-size: 1.5rem; margin-bottom: 18px; }

/* ------------------------------------------------------------------ toasts */

.toast-stack {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: min(92vw, 420px);
}
.toast {
  background: var(--foreground);
  color: var(--background);
  padding: 12px 18px;
  font-size: 0.875rem;
  border-radius: 2px;
  box-shadow: var(--shadow-elegant);
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  animation: toast-in 0.25s ease;
}
.toast.err { background: var(--destructive); color: var(--destructive-foreground); }
.toast .toast-action {
  margin-left: auto;
  background: none;
  border: 1px solid color-mix(in oklab, var(--background) 40%, transparent);
  color: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- avatars etc */

.avatar {
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  overflow: hidden;
  flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.watermark {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}
.watermark img {
  /* Sized against the shorter edge so it stays a background mark rather than
     filling the screen — it was 110vh, which on a phone ran well past both
     sides and read as a graphic instead of a watermark. */
  width: min(62vh, 62vw); height: min(62vh, 62vw);
  max-width: none;
  object-fit: contain;
  opacity: 0.07;
}

/* --------------------------------------------------------------- carousels */

/* Full-bleed carousel: pulled out to the screen edges with a negative margin,
   then re-inset with padding so the first card still lines up with the section
   headings while later cards can run off the edge.

   scroll-padding is the part that's easy to miss. Mandatory snapping measures
   snap positions against the *snapport*, and without scroll-padding WebKit
   takes that as the border box — so on load it snapped the first card flush to
   the screen edge, eating the 24px inset and leaving Upcoming Events hard
   against the left of the phone while every heading above it sat indented.
   Chrome happened not to, which is why it only showed up on mobile. */
.hscroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  scroll-padding-left: 24px;
  scroll-padding-right: 24px;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex: none; }

/* --------------------------------------------------------------- utilities */

.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; gap: 16px; }
.grid3 { display: grid; gap: 16px; }
@media (min-width: 768px) { .grid2 { grid-template-columns: 1fr 1fr; } .grid3 { grid-template-columns: repeat(3, 1fr); } }
.divide > * + * { border-top: 1px solid var(--border); }

.spin {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  color: var(--muted-foreground);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* demo banner */
.demo-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 80;
  background: var(--forest);
  color: var(--parchment);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
}
.demo-banner button { background: none; border: none; color: inherit; text-decoration: underline; font-size: inherit; letter-spacing: inherit; text-transform: inherit; }

/* admin page legibility override (as source) */
.admin-page, .admin-page .muted, .admin-page .eyebrow { color: var(--foreground) !important; }

/* star rating */
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 14px; height: 14px; }
.stars .on { color: var(--brass); fill: currentColor; }
.stars .off { color: var(--border); }

/* skeleton */
.skel { background: var(--muted); border-radius: 2px; animation: pulse 1.4s ease infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ------------------------------------------------------------ placeholders
   Elegant branded tiles used wherever final imagery hasn't been supplied.
   Swap for real photography by giving the element a background image or an
   <img> — the tile disappears once media exists. */

.ph-tile {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 120px;
  background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in oklab, var(--brass) 14%, transparent), transparent 60%),
    linear-gradient(160deg, var(--parchment-deep), var(--muted));
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
}
.ph-tile::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent);
  pointer-events: none;
}
.ph-mark {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 44px);
  letter-spacing: 0.18em;
  color: color-mix(in oklab, var(--foreground) 45%, transparent);
}
.ph-note {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--foreground) 35%, transparent);
}
.ph-tile.dark {
  background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in oklab, var(--brass) 20%, transparent), transparent 60%),
    linear-gradient(160deg, oklch(0.28 0.03 40), oklch(0.2 0.025 40));
}
.ph-tile.dark .ph-mark { color: color-mix(in oklab, var(--parchment) 75%, transparent); }
.ph-tile.dark .ph-note { color: color-mix(in oklab, var(--parchment) 45%, transparent); }

/* --- Google Places autocomplete -------------------------------------------
   The dropdown is injected into <body> by the Maps SDK, so it can't inherit
   anything. Restyled here to match the console and lifted above the modal. */
.pac-container {
  z-index: 120;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0;
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
  background: var(--background);
  font-family: var(--font-sans);
}
.pac-item {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  color: var(--muted-foreground);
  cursor: pointer;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover,
.pac-item-selected { background: var(--muted); }
.pac-item-query { font-size: .9rem; color: var(--foreground); }
.pac-icon { display: none; }
.pac-logo::after { margin: 6px 12px; }