:root {
  color-scheme: light;
  --bg: #f7f4ef;
  --surface: #ffffff;
  --surface-soft: #f1eee7;
  --ink: #151515;
  --muted: #70706b;
  --line: rgba(15, 31, 27, 0.1);
  --accent: #111111;
  --mint: #dff4e8;
  --sky: #dcecff;
  --rose: #ffe3df;
  --gold: #f5df9c;
  --shadow: 0 24px 70px rgba(28, 25, 20, 0.12);
  --surface-translucent: rgba(255, 255, 255, 0.84);

  /* Premium OS accent palette: deep emerald/graphite chrome (nav, hero,
     glow states) layered over the light content surface above. Content
     stays light so existing text-contrast rules remain valid; the emerald
     tones are reserved for chrome, glass, and accent moments. */
  --emerald-900: #0f1f1b;
  --emerald-800: #11241f;
  --emerald-700: #152620;
  --emerald-600: #1e3a30;
  --emerald-glow: rgba(52, 211, 153, 0.45);
  /* Text color for "green" chips/icons/links drawn on a translucent
     mint tint or transparent background (badge-workmode, open-now,
     verified chips, active save/heart icons, etc.) — a legible dark
     green in light mode. --emerald-700 itself stays reserved for solid
     chrome backgrounds (see comment above) and is not theme-flipped;
     this token is what those text-on-tint components should use instead,
     so dark mode gets a bright mint that's actually visible. */
  --emerald-text: var(--emerald-700);
  --ink-inverse: #f7f6f3;
  --shadow-premium: 0 20px 60px rgba(15, 31, 27, 0.35);
  --shadow-glow: 0 0 0 1px rgba(52, 211, 153, 0.28), 0 8px 24px rgba(52, 211, 153, 0.25);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Dark mode — same token set, dark values. Applied via data-theme so JS
   controls it explicitly (Settings toggle + system-preference default)
   rather than relying on prefers-color-scheme cascade timing. Accent
   buttons (dark bg + literal white text) are intentionally left alone —
   they're self-contained and already read correctly on either surface. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14181a;
  --surface: #1c2226;
  --surface-soft: #242b2f;
  --ink: #f2f1ee;
  --muted: #9aa3a0;
  --line: rgba(255, 255, 255, 0.14);
  --mint: #16332a;
  --sky: #17242f;
  --rose: #2e2019;
  --gold: #332c17;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  --surface-translucent: rgba(36, 43, 47, 0.84);
  --emerald-text: #34d399;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 15% 0%, rgba(52, 211, 153, 0.14), transparent 30rem),
    radial-gradient(circle at 90% 10%, rgba(15, 31, 27, 0.1), transparent 28rem),
    var(--bg);
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

/* Canonical .app-shell sizing/overflow. Later blocks only add responsive
   padding-inline and state-specific tweaks (is-home-shell, has-alwen-open) —
   do not reintroduce width/max-width/padding-bottom/overflow overrides here. */
.app-shell {
  position: relative;
  width: 100%;
  max-width: 1200px;
  min-height: 100vh;
  margin-inline: auto;
  padding: 14px 18px calc(156px + env(safe-area-inset-bottom));
  overflow-x: clip;
  overflow-y: visible;
}

.app-shell.is-home-shell {
  padding-top: 0;
}

.app-shell.is-home-shell .main {
  margin-top: -88px;
}

.app-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 88px;
  margin-inline: -2px;
  padding: 14px 4px 16px;
  border: 1px solid transparent;
  border-radius: 0 0 22px 22px;
  color: var(--ink);
  transition:
    background 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease,
    color 320ms ease,
    backdrop-filter 320ms ease;
}

.app-top.header-transparent {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.app-top.header-solid {
  border-color: rgba(20, 20, 20, 0.08);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 46px rgba(28, 25, 20, 0.1);
  backdrop-filter: blur(22px);
}

:root[data-theme="dark"] .app-top.header-solid {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(28, 34, 38, 0.86);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.35);
}

/* Dark mode card surfaces. Many card components have scattered/duplicate
   light-background declarations from iterative sessions (see the repo's
   long-standing CSS archaeology notes) — rather than hunting down every
   one individually, this single block wins by specificity ([data-theme]
   attribute + class beats a bare class everywhere) regardless of source
   order, and covers every card family that visibly stayed light-on-dark
   during the accessibility pass. */
:root[data-theme="dark"] .section-shell,
:root[data-theme="dark"] .living-section,
:root[data-theme="dark"] .market-card,
:root[data-theme="dark"] .imported-card,
:root[data-theme="dark"] .pro-card,
:root[data-theme="dark"] .food-card,
:root[data-theme="dark"] .visual-card,
:root[data-theme="dark"] .live-card,
:root[data-theme="dark"] .earn-card,
:root[data-theme="dark"] .market-mini-card,
:root[data-theme="dark"] .real-place-card,
:root[data-theme="dark"] .pulse-card,
:root[data-theme="dark"] .social-post-card,
:root[data-theme="dark"] .request-card,
:root[data-theme="dark"] .review-grid article,
:root[data-theme="dark"] .achievement-grid article,
:root[data-theme="dark"] .reputation-grid article,
:root[data-theme="dark"] .signal-grid article,
:root[data-theme="dark"] .profile-list article,
:root[data-theme="dark"] .draft-grid article,
:root[data-theme="dark"] .score-grid article,
:root[data-theme="dark"] .contribution-card,
:root[data-theme="dark"] .connection-list article,
:root[data-theme="dark"] .conversation-bubble,
:root[data-theme="dark"] .business-stats-grid article,
:root[data-theme="dark"] .my-business-row,
:root[data-theme="dark"] .settings-section,
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .reputation-card,
:root[data-theme="dark"] .timeline-list article,
:root[data-theme="dark"] .knowledge-grid article,
:root[data-theme="dark"] .intent-suggestions button,
:root[data-theme="dark"] .city-intents button,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .capability-rail span,
:root[data-theme="dark"] .tag-row span,
:root[data-theme="dark"] .quote-list span,
:root[data-theme="dark"] .trust-row span,
:root[data-theme="dark"] .pulse-author-row small,
:root[data-theme="dark"] .community-summary article,
:root[data-theme="dark"] .create-grid button,
:root[data-theme="dark"] .alwen-recommendation-card,
:root[data-theme="dark"] .floating-card-actions button,
:root[data-theme="dark"] .mini-save,
:root[data-theme="dark"] .favourite-float,
:root[data-theme="dark"] .header-icon {
  background: rgba(36, 43, 47, 0.86);
  color: var(--ink);
}

/* .create-primary-action gets its own !important + separate rule (rather
   than joining the block above) because its per-position :nth-child(2)/(3)
   gradient overrides sit much later in the file at equal specificity —
   without !important, source order would let those later light-mode-only
   gradients win back over in dark mode. */
:root[data-theme="dark"] .create-primary-action,
:root[data-theme="dark"] .create-secondary-action {
  background: rgba(36, 43, 47, 0.86) !important;
  color: var(--ink) !important;
}

/* The 14%-opacity mint tint used across badge/icon "green" components
   stays mostly dark on a dark card, so bump it slightly for contrast —
   text color on these is handled by the theme-aware --emerald-text
   token instead (see :root definitions above). */
:root[data-theme="dark"] .quote-list span.verified-chip,
:root[data-theme="dark"] .profile-narrative-section h3 .icon {
  background: rgba(52, 211, 153, 0.22) !important;
}

/* Same root cause, different literal colors: each of these pairs a
   low/mid-opacity tinted background with a fixed, dark accent text
   color that was only ever tuned for a light card. On a dark card the
   tint stays mostly dark and the text nearly disappears — brighten the
   text (and for the two lowest-opacity notice banners, the tint too)
   specifically in dark mode. Light mode is untouched. */
:root[data-theme="dark"] .conversation-you .conversation-avatar,
:root[data-theme="dark"] .post-request-success-icon,
:root[data-theme="dark"] .pro-stat-availability,
:root[data-theme="dark"] .live-status-pill,
:root[data-theme="dark"] .mini-price-line em,
:root[data-theme="dark"] .post-alwen-summary,
:root[data-theme="dark"] .price-row span,
:root[data-theme="dark"] .ai-price-pill,
:root[data-theme="dark"] .auth-notice {
  color: #34d399;
}

:root[data-theme="dark"] .auth-error,
:root[data-theme="dark"] .settings-danger-button {
  color: #f87171;
}

:root[data-theme="dark"] .auth-error {
  background: rgba(192, 57, 43, 0.16);
}

:root[data-theme="dark"] .auth-notice {
  background: rgba(35, 134, 90, 0.18);
}

:root[data-theme="dark"] .inline-ai-verified,
:root[data-theme="dark"] .imported-card-actions .waze-btn {
  color: #60a5fa;
}

:root[data-theme="dark"] .sheet-option-grid button,
:root[data-theme="dark"] .claim-form input:not([type="file"]),
:root[data-theme="dark"] .claim-form select,
:root[data-theme="dark"] .claim-form textarea,
:root[data-theme="dark"] .auth-form input:not([type="checkbox"]),
:root[data-theme="dark"] .auth-form select,
:root[data-theme="dark"] .auth-form textarea,
:root[data-theme="dark"] .select,
:root[data-theme="dark"] .ai-search:not(.city-hero .ai-search) {
  background: rgba(36, 43, 47, 0.86);
  color: var(--ink);
  border-color: var(--line);
}

:root[data-theme="dark"] .selection-sheet:not(.tyt-sheet) {
  background: rgba(28, 34, 38, 0.98);
}

/* The brand wordmark/icon swap is keyed to header-light/header-dark
   (transparent-over-photo vs solid header), which assumed "solid" always
   means a white background. In dark mode the solid header is dark too,
   so force the light-on-dark logo variant there regardless of that
   transparency state. */
:root[data-theme="dark"] .header-solid .brand-wordmark-dark,
:root[data-theme="dark"] .header-solid .brand-dark {
  display: none !important;
}

:root[data-theme="dark"] .header-solid .brand-wordmark-light,
:root[data-theme="dark"] .header-solid .brand-light {
  display: block !important;
}

/* ============================================================
   Brand header — single source of truth for the app-wide brand
   lockup rendered by BrandHeader() in main.js. Wordmark SVG only;
   the standalone icon glyph never appears here (it is reserved for
   the app icon, splash, floating Alwen assistant, bottom nav,
   notifications, and loading animation).
   ============================================================ */
.brand {
  display: grid;
  gap: 4px;
  min-width: 0;
  text-align: left;
}

.brand-main {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.avatar,
.business-logo,
.large-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-weight: 850;
}

/* BrandLogo({variant, tone, size}) base — generic, low-specificity defaults.
   Real sizing per placement (nav icon, wordmark, watermark) comes from the
   more specific classes layered on top of these. */
.brand-logo {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

.brand-logo-sm {
  max-height: 22px;
}

.brand-logo-md {
  max-height: 32px;
}

.brand-logo-lg {
  max-height: 48px;
}

.app-icon {
  display: block;
  width: 34px;
  height: 34px;
  mix-blend-mode: normal;
  object-fit: contain;
}

.brand-wordmark-swap {
  position: relative;
  display: inline-grid;
}

.brand-wordmark {
  grid-area: 1 / 1;
  display: none;
  width: clamp(148px, 22vw, 176px);
  height: auto;
  max-width: 100%;
  mix-blend-mode: normal;
  object-fit: contain;
  object-position: left center;
}

.brand-city {
  justify-self: start;
  margin-left: 0;
  padding: 0;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 550;
  color: var(--muted);
  line-height: 1;
  transition: color 320ms ease;
}

.top-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.header-icon,
.header-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(28, 25, 20, 0.08);
  transition:
    background 320ms ease,
    border-color 320ms ease,
    color 320ms ease,
    box-shadow 320ms ease,
    transform 180ms ease;
}

.header-icon:hover,
.header-avatar:hover {
  transform: translateY(-1px);
}

.header-avatar {
  overflow: hidden;
  padding: 2px;
}

.header-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.header-icon.has-unread::after {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border: 2px solid white;
  border-radius: 999px;
  background: #1f8f68;
  content: "";
}

.theme-dark-header {
  color: white;
}

.theme-dark-header .brand-main,
.theme-dark-header .brand-city {
  color: white;
}

.theme-dark-header .brand-city {
  color: rgba(255, 255, 255, 0.78);
}

.app-top.theme-dark-header .app-icon {
  filter: none;
  mix-blend-mode: normal;
}

.theme-dark-header .header-icon,
.theme-dark-header .header-avatar {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.16);
  color: white;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(18px);
}

.theme-dark-header .header-icon.has-unread::after {
  border-color: rgba(17, 17, 17, 0.2);
}

.theme-light-header .brand-main,
.theme-light-header .brand-city {
  color: var(--ink);
}

.theme-light-header .brand-city {
  color: var(--muted);
}

.app-top.theme-light-header .app-icon {
  filter: none;
  mix-blend-mode: normal;
}

.select,
.ai-search,
.request-form input,
.translation-grid select,
textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-translucent);
  color: var(--ink);
}

.select {
  width: 164px;
  min-height: 42px;
  padding: 0 28px 0 12px;
}

.language-select {
  position: relative;
  z-index: 30;
  width: 148px;
}

.main,
.view {
  min-width: 0;
}

.view {
  display: grid;
  gap: 18px;
}

.is-home-shell .city-hero {
  padding-top: clamp(112px, 13vw, 156px);
}

/* JS toggles this on <body> whenever state.activeSheet is set (see
   render()) — without it the page behind a sheet stays scrollable, so a
   scroll gesture over the backdrop (or one that runs past the sheet's own
   content) moves the screen underneath at the same time. */
body.has-open-sheet {
  overflow: hidden;
}

/* Built by openPhotoZoom() in main.js as a plain DOM node appended to
   body — not part of the render() cycle — so pinch/pan transforms update
   every frame without a re-render (e.g. the AI placeholder rotation
   timer) fighting the gesture mid-way. */
.photo-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 9, 0.94);
  animation: photoZoomFadeIn 180ms ease;
}

@keyframes photoZoomFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.photo-zoom-img {
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
  object-fit: contain;
  touch-action: none;
  user-select: none;
  cursor: zoom-in;
  transition: transform 120ms ease;
}

.photo-zoom-overlay.is-zoomed .photo-zoom-img {
  cursor: grab;
  transition: none;
}

.photo-zoom-close {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
  color: white;
  font-size: 1.5rem;
  line-height: 1;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  padding: 18px;
  background: rgba(17, 17, 17, 0.24);
  backdrop-filter: blur(8px);
  overscroll-behavior: contain;
}

.selection-sheet {
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 10px 16px 18px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
  overscroll-behavior: contain;
}

.sheet-handle {
  width: 46px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.18);
}

.sheet-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.sheet-title h2,
.sheet-title p {
  margin: 0;
}

.sheet-title h2 {
  font-size: 1.35rem;
}

.sheet-title p {
  margin-top: 4px;
  color: var(--muted);
}

.sheet-title .place-detail-specialty {
  color: var(--ink);
  font-weight: 700;
}

.sheet-title .badge-rating {
  margin-left: 8px;
}

.sheet-title button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 1.35rem;
}

/* Directions app picker — one "Directions" button opens this instead of
   three separate Google Maps/Waze/Apple Maps buttons crowding the card's
   action row; the user picks their navigation app at the moment they
   actually tap Directions. */
.directions-app-list {
  display: grid;
  gap: 8px;
}

.directions-app-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
}

.directions-app-row .icon:last-child {
  margin-left: auto;
  color: var(--muted);
}

.directions-app-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}

.directions-app-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Booking sheet — real date/time slot picker opened from "Book now" on
   a professional's public profile, instead of that button just dumping
   the user onto the generic "post a task" form with no actual calendar. */
.booking-sheet {
  display: grid;
  gap: 10px;
  max-height: 82vh;
  overflow-y: auto;
}

.booking-section-label {
  margin: 6px 0 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.booking-day-row .chip,
.booking-time-row .chip {
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.booking-no-slots {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.88rem;
}

/* "Anytime, flexible" — an alternative to picking a specific day/time
   for people who just want to get on this professional's list without
   committing to a slot. Dashed border sets it apart from the specific
   day chips it sits alongside. */
.booking-flexible-chip {
  border-style: dashed !important;
}

.booking-flexible-chip.is-active {
  border-style: solid !important;
}

.booking-flexible-hint {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(52, 211, 153, 0.14);
  color: var(--emerald-text);
  font-size: 0.86rem;
}

:root[data-theme="dark"] .booking-flexible-hint {
  background: rgba(52, 211, 153, 0.2);
}

.booking-confirm-button {
  margin-top: 6px;
  width: 100%;
}

.booking-confirm-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.booking-sheet .post-request-success {
  align-items: stretch;
}

.booking-sheet .post-request-success button {
  width: 100%;
}

.booking-sheet .post-request-success .auth-link {
  width: auto;
  justify-self: center;
}

.sheet-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.sheet-option-grid button {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(247, 244, 239, 0.76);
  color: var(--ink);
  text-align: left;
}

.sheet-option-grid button span {
  color: var(--muted);
  font-size: 0.82rem;
}

.sheet-option-grid button.is-selected {
  border-color: #111;
  background: #111;
  color: white;
}

.sheet-option-grid button.is-selected span {
  color: rgba(255, 255, 255, 0.72);
}

/* Premium language picker — flag, native name + English subtitle, and a
   checkmark that animates in on the active row. Shared by the language
   sheet, Settings, and onboarding so switching languages feels like one
   deliberate piece of UI rather than three different plain chip rows. */
.language-option-list {
  display: grid;
  gap: 10px;
}

.language-option-list-compact,
.onboarding-language-row {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.language-option-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 22px);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.language-option-row:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.language-option-flag {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 1.3rem;
}

.language-option-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.language-option-names strong {
  font-size: 0.98rem;
  font-weight: 800;
}

.language-option-names span {
  font-size: 0.8rem;
  color: var(--muted);
}

.language-option-check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--emerald-glow, #34d399);
  color: #06231a;
  font-size: 0.7rem;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}

.language-option-row.is-selected {
  border-color: rgba(52, 211, 153, 0.5);
  background: var(--mint);
  box-shadow: var(--shadow-glow);
}

.language-option-row.is-selected .language-option-names strong {
  color: var(--emerald-text);
}

.language-option-row.is-selected .language-option-check {
  opacity: 1;
  transform: scale(1);
}

.intent-hero {
  display: grid;
  gap: 18px;
  min-height: 520px;
  align-content: center;
  padding: clamp(22px, 7vw, 72px);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.44)),
    url("./assets/vilnius-hero.png");
  background-position: center;
  background-size: cover;
  color: white;
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0;
  color: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intent-hero h1,
.screen-heading h1,
.profile-hero h1 {
  margin: 0;
  letter-spacing: 0;
  line-height: 0.98;
}

.intent-hero h1 {
  max-width: 820px;
  font-size: clamp(2.8rem, 8vw, 6.5rem);
}

.city-hero {
  position: relative;
  display: grid;
  gap: 18px;
  min-height: clamp(520px, 72vh, 720px);
  align-content: end;
  overflow: hidden;
  padding: clamp(22px, 6vw, 64px);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(52, 211, 153, 0.16) 0%, rgba(15, 31, 27, 0.35) 42%, rgba(15, 31, 27, 0.88) 100%),
    url("./assets/vilnius-hero.png");
  background-position: center;
  background-size: cover;
  color: white;
  box-shadow: var(--shadow-premium);
}

.city-hero::before {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  content: "";
  pointer-events: none;
}

/* Shorter hero band for secondary pages (Marketplace, Community, Explore).
   Two-class selector (0,2,0) beats every legacy single-class .city-hero
   override in this file regardless of source order, so this is the one
   safe place to shrink the hero without fighting the cascade. */
.city-hero.page-hero {
  min-height: clamp(300px, 38vw, 420px);
  align-content: end;
  padding: clamp(20px, 5vw, 40px);
}

.city-hero.page-hero .city-hero-copy {
  gap: 6px;
}

.city-hero.page-hero h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
}

.city-hero > * {
  position: relative;
  z-index: 1;
}

.city-hero-copy {
  display: grid;
  gap: 8px;
  max-width: 780px;
}

.city-hero h1 {
  margin: 0;
  font-size: clamp(2.7rem, 7vw, 6.4rem);
  letter-spacing: 0;
  line-height: 0.96;
}

.city-hero-copy p:not(.eyebrow) {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.05rem, 2.5vw, 1.45rem);
}

.today-digest {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.today-digest li {
  position: relative;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.94rem;
  font-weight: 600;
}

.today-digest li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--emerald-glow, #34d399);
}

.city-hero .ai-search {
  width: min(100%, 820px);
  min-height: 72px;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  backdrop-filter: blur(24px);
}

/* Fixed dark text, not var(--ink) — .city-hero .ai-search keeps its
   frosted white pill in both themes (see background above), so the
   typed text must stay dark in both too. var(--ink) flips to near-white
   in dark mode, which made this input's text invisible (white on white). */
.city-hero .ai-search input {
  font-size: clamp(1rem, 2vw, 1.18rem);
  color: #151515;
}

.city-intents button {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.18);
  color: white;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.12);
}

.living-signal-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 920px;
}

.living-signal-row article {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
}

.living-signal-row span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.living-signal-row strong {
  font-size: clamp(1.4rem, 4vw, 2.15rem);
  line-height: 1;
}

/* Weather/Events/Jobs/Apartments are now real links to the screen each
   number is about (Explore, or Marketplace pre-filtered to that
   category) instead of static decoration — cursor + hover lift + a
   small corner arrow signal that. */
.living-signal-tile {
  position: relative;
  cursor: pointer;
  transition: transform var(--motion-fast, 0.15s) var(--ease, ease), background var(--motion-fast, 0.15s) var(--ease, ease);
}

.living-signal-tile:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.26) !important;
}

.living-signal-tile-arrow {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.7rem;
}

.living-signal-row p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  line-height: 1.3;
}

/* Canonical .ai-search. This absorbed ~10 scattered/dead redeclarations
   (base sizing, two "polish pass" overrides, and a dead .city-hero-specific
   min-height that never actually applied — .ai-search.is-large already
   wins that fight at equal specificity by coming later). Only the width
   !important guard near the overflow-safety rules still lives elsewhere;
   everything else about this component belongs here. */
.ai-search,
.ai-search.is-large {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-height: 58px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 46px rgba(28, 25, 20, 0.1);
}

.ai-search:focus-within {
  box-shadow: 0 18px 54px rgba(28, 25, 20, 0.14);
  transform: translateY(-1px);
}

.intent-hero .ai-search {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}

.ai-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.02rem;
}

.ai-search button,
.section-title button,
.content-card button,
.business-card button,
.offer-card button,
.request-form button,
.match-row button,
.need-help-card button,
.market-card button,
.pro-card button,
.help-meta button,
.compact-form button,
.claim-form button,
.need-help-wide,
.profile-list button,
.ops-actions button {
  min-height: 42px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-weight: 800;
}

.ai-search button {
  padding: 0 16px;
}

.ops-actions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
}

.ops-actions button span {
  font-weight: 600;
  opacity: 0.82;
}

.need-help-wide {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 18px;
  text-align: left;
}

.need-help-wide-text {
  display: grid;
  gap: 2px;
}

.need-help-wide-text small {
  font-weight: 600;
  opacity: 0.82;
}

.alwen-mini {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-weight: 900;
}

.alwen-mini .app-icon {
  width: 24px;
  height: 24px;
  filter: none;
  mix-blend-mode: normal;
}

.icon {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
}

.icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

.intent-suggestions,
.chip-row,
.mode-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.intent-suggestions button,
.chip,
.mode-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font-weight: 780;
  backdrop-filter: blur(14px);
}

.chip.is-active {
  border-color: transparent;
  background: var(--accent);
  color: var(--ink-inverse);
}

.chip .icon {
  min-width: 26px;
  height: 26px;
  font-size: 20px;
  line-height: 1;
}

.category-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-cloud button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  white-space: nowrap;
}

.category-cloud button.is-selected {
  border-color: transparent;
  background: var(--accent);
  color: var(--ink-inverse);
}

.section-shell {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 48px rgba(28, 25, 20, 0.07);
}

.living-section {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 3vw, 24px) 0;
}

.living-section .section-title {
  padding-inline: 2px;
}

.living-rail {
  display: grid;
  grid-auto-columns: minmax(210px, 250px);
  grid-auto-flow: column;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scroll-snap-type: x mandatory;
}

/* .live-card/.market-mini-card/.earn-card/.food-card/.visual-card are all
   fully re-styled later (shared --radius-lg/--shadow-soft card system, plus
   their own layout overrides) — removed from here since these three
   properties would never apply. .pro-pill's border/radius/shadow/background
   come from its own block further down too, but it still needs the padding
   below, and .community-summary article / .create-grid button /
   .alwen-recommendation-card have no later override, so this is still their
   only source. */
.community-summary article,
.create-grid button,
.alwen-recommendation-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 48px rgba(28, 25, 20, 0.08);
}

.pro-pill {
  display: grid;
  gap: 8px;
  padding: 16px;
  scroll-snap-align: start;
}

.live-card h3,
.live-card p,
.live-card small,
.market-mini-card h3,
.market-mini-card p,
.earn-card h3,
.earn-card p,
.pro-pill p,
.visual-card h3,
.visual-card p,
.food-card h3,
.food-card p {
  margin: 0;
}

.live-card strong,
.market-mini-card strong,
.earn-card strong {
  font-size: clamp(1.55rem, 4vw, 2.25rem);
  line-height: 1;
}

.live-card span:not(.live-status-pill),
.market-mini-card span,
.earn-card span,
.visual-card span,
.pro-pill span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.live-card p,
.live-card small,
.market-mini-card p,
.earn-card p,
.pro-pill p,
.visual-card p,
.food-card p {
  color: var(--muted);
  line-height: 1.35;
}

.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ff5d42;
  box-shadow: 0 0 0 6px rgba(255, 93, 66, 0.12);
}

.market-mini-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(241, 238, 231, 0.86)),
    var(--surface);
}

.earn-card {
  background:
    linear-gradient(145deg, rgba(223, 244, 232, 0.9), rgba(255, 255, 255, 0.9)),
    var(--mint);
}

.visual-card-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  gap: 12px;
}

.visual-card {
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: 210px;
  overflow: hidden;
  padding: 18px;
  color: var(--ink);
}

.visual-card:first-child {
  grid-row: span 2;
  min-height: 432px;
}

.tone-mint { background: linear-gradient(145deg, var(--mint), var(--surface)); }
.tone-gold { background: linear-gradient(145deg, var(--gold), var(--surface)); }
.tone-rose { background: linear-gradient(145deg, var(--rose), var(--surface)); }
.tone-sky { background: linear-gradient(145deg, var(--sky), var(--surface)); }
.tone-ink { background: linear-gradient(145deg, #111111, #49443c); color: white; }
.tone-cream { background: linear-gradient(145deg, var(--surface-soft), var(--surface)); }
.tone-ink p,
.tone-ink span { color: rgba(255, 255, 255, 0.72); }

.food-grid,
.pro-strip,
.community-preview,
.community-summary,
.create-grid {
  display: grid;
  gap: 10px;
}

.food-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.food-card {
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: 140px;
  padding: 16px;
}

.pro-strip {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.pro-pill {
  min-height: 130px;
}

.community-preview {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.alwen-recommendation-card {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr auto;
  gap: 18px;
  align-items: center;
  padding: clamp(18px, 4vw, 30px);
  background:
    linear-gradient(135deg, rgba(17, 17, 17, 0.96), rgba(51, 48, 42, 0.94)),
    var(--accent);
  color: white;
}

/* The 3-column layout above only works once there's enough width for all
   three columns to breathe — below that it was squeezing the middle
   column into a tower of 1-2-word lines and pushing the button off the
   right edge of the screen. Stack instead. */
@media (max-width: 720px) {
  .alwen-recommendation-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .alwen-recommendation-card button {
    width: 100%;
  }
}

.alwen-recommendation-card h2,
.alwen-recommendation-card p {
  margin: 0;
}

.recommendation-list {
  display: grid;
  gap: 7px;
}

.recommendation-list p {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
}

.recommendation-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.8rem;
}

.alwen-recommendation-card button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 850;
}

.create-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.create-grid button {
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 16px;
  color: var(--ink);
  text-align: left;
}

.create-grid span,
.community-summary span {
  color: var(--muted);
}

.community-summary {
  grid-template-columns: repeat(3, 1fr);
}

.community-summary article {
  display: grid;
  gap: 4px;
  padding: 16px;
}

.community-summary strong {
  font-size: 2rem;
}

.card-photo,
.visual-card-image,
.food-card-image {
  overflow: hidden;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
}

.card-photo {
  min-height: 132px;
  margin: -4px -4px 4px;
}

.live-card,
.market-mini-card,
.earn-card,
.food-card,
.visual-card {
  overflow: hidden;
}

.live-card .card-photo,
.market-mini-card .card-photo {
  min-height: 150px;
}

.visual-card {
  position: relative;
  color: white;
  isolation: isolate;
}

.visual-card-image,
.food-card-image {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.visual-card::after,
.food-card::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.68));
  content: "";
}

.visual-card p,
.visual-card span {
  color: rgba(255, 255, 255, 0.78);
}

.food-card {
  position: relative;
  overflow: hidden;
  color: white;
  isolation: isolate;
}

.food-card p {
  color: rgba(255, 255, 255, 0.78);
}

.marketplace-shell {
  background: rgba(255, 255, 255, 0.58);
}

.market-grid {
  display: block;
  column-count: 3;
  column-gap: 16px;
}

.visual-market-card {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  margin: 0 0 16px;
  break-inside: avoid;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 60px rgba(28, 25, 20, 0.11);
}

.market-photo {
  position: relative;
  min-height: 240px;
  background-position: center;
  background-size: cover;
}

.visual-market-card.is-tall .market-photo {
  min-height: 340px;
}

.visual-market-card.is-wide .market-photo {
  min-height: 210px;
}

.favourite-float,
.ai-verified {
  position: absolute;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
  backdrop-filter: blur(18px);
}

.favourite-float {
  right: 12px;
  width: 38px;
  justify-content: center;
}

.ai-verified {
  left: 12px;
  padding: 0 10px;
}

.market-card-body {
  display: grid;
  gap: var(--sp-8);
  padding: var(--sp-16);
}

.seller-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.seller-row img,
.review-grid img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
}

.seller-row strong,
.seller-row span {
  display: block;
}

.seller-row strong,
.business-card h3,
.profile-badges span,
.verified-meta {
  align-items: center;
}

.seller-row strong,
.business-card h3 {
  display: inline-flex;
  gap: 6px;
  min-width: 0;
}

.verified-check {
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 auto;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.28);
  text-transform: none !important;
  white-space: nowrap;
  vertical-align: middle !important;
}

.verified-check .icon {
  color: #fff !important;
  font-size: 0.72rem;
  line-height: 1;
}

.verified-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.market-photo .ai-verified {
  top: 12px;
  right: auto;
  bottom: auto;
  left: 12px;
  min-height: 28px;
  height: 28px;
  max-width: calc(100% - 72px);
  padding: 0 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-ai-verified {
  position: static !important;
  width: fit-content;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  font-size: 0.76rem;
  font-weight: 850;
  backdrop-filter: none;
}

.seller-row span {
  color: var(--muted);
  font-size: 0.82rem;
}

.price-row,
.market-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.price-row strong {
  font-size: 1.45rem;
}

.price-row span {
  color: var(--muted);
  font-weight: 820;
}

.ai-price-pill {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(223, 244, 232, 0.92), rgba(220, 236, 255, 0.72));
  color: #1e4d3a;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.45;
}

.ai-price-pill .icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.visual-trust {
  gap: 6px;
}

.market-actions button {
  min-height: 38px;
  padding: 0 12px;
}

.market-actions button:first-child {
  background: var(--accent);
  color: white;
}

.market-actions button:last-child {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.visual-business-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.visual-business-card {
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 0 0 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 55px rgba(28, 25, 20, 0.1);
}

.business-photo {
  position: relative;
  min-height: 210px;
  background-position: center;
  background-size: cover;
}

.business-photo span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
  backdrop-filter: blur(14px);
}

.visual-business-card > div:not(.business-photo),
.visual-business-card > button {
  margin-inline: 14px;
}

.visual-business-card > .market-actions {
  margin-inline: 14px;
  margin-bottom: 0;
}

.business-profile-shell {
  display: grid;
  gap: var(--space-3);
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}

.business-profile-hero {
  position: relative;
  display: flex;
  align-items: end;
  min-height: clamp(180px, 24vh, 260px);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-position: center;
  background-size: cover;
  box-shadow: var(--shadow-premium);
}

.business-profile-hero::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 31, 27, 0.05) 0%, rgba(15, 31, 27, 0.35) 60%, rgba(15, 31, 27, 0.85) 100%);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.business-profile-hero-copy {
  position: relative;
  z-index: 1;
  color: white;
}

.business-profile-hero-copy h1 {
  margin: 0 0 4px;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1.05;
}

.business-profile-hero-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

.business-gallery-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.business-gallery-photo {
  flex: 0 0 auto;
  width: min(240px, 70vw);
  height: 150px;
  border-radius: var(--radius-md);
  background-position: center;
  background-size: cover;
  scroll-snap-align: start;
  box-shadow: var(--shadow-soft);
}

/* Category, address, and phone were already on every business record
   but never actually shown anywhere on the profile — address/phone only
   existed as hidden hrefs behind the Directions/Call buttons. Surfacing
   them as real text (plus the existing-but-unused amenity tags) gives a
   comprehensive view instead of requiring a tap-through to find out
   where the place even is. */
.business-detail-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: -4px 0 4px;
}

.business-detail-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.business-detail-line .icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.business-detail-phone {
  color: var(--ink);
  font-weight: 700;
}

.business-profile-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.business-profile-actions button,
.business-profile-actions .directions-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.84rem;
  text-align: center;
}

.business-profile-actions button:first-child {
  background: var(--emerald-600);
  color: var(--ink-inverse);
}

.business-services-list,
.business-hours-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
}

.business-service-row,
.business-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
}

.business-service-row span,
.business-hours-row span {
  color: var(--muted);
}

.visual-pulse-card {
  overflow: hidden;
}

.pulse-photo {
  grid-column: 1 / -1;
  min-height: 160px;
  margin: -16px -16px 8px;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
}

.premium-profile-hero {
  position: relative;
  min-height: 264px;
  align-items: end;
  padding: clamp(16px, 4vw, 26px);
  border-radius: 8px;
  background-position: center;
  background-size: cover;
  box-shadow: var(--shadow-premium);
}

.premium-profile-hero::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 31, 27, 0.1) 0%, rgba(15, 31, 27, 0.32) 55%, rgba(15, 31, 27, 0.82) 100%);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.premium-profile-hero > * {
  position: relative;
  z-index: 1;
}

.profile-glass {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(100%, 760px);
  padding: 16px;
  border: 1px solid rgba(52, 211, 153, 0.28);
  border-radius: 8px;
  background: rgba(21, 38, 32, 0.32);
  color: white;
  backdrop-filter: blur(22px);
}

.avatar-frame {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: clamp(96px, 18vw, 148px);
  height: clamp(96px, 18vw, 148px);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--shadow-glow);
}

.public-profile-initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--emerald-700);
  color: var(--ink-inverse);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
}

.profile-portrait {
  grid-area: 1 / 1;
  width: clamp(96px, 18vw, 148px);
  height: clamp(96px, 18vw, 148px);
  border: 3px solid rgba(52, 211, 153, 0.65);
  border-radius: 999px;
  object-fit: cover;
}

/* Embedded brand watermark: both layers sit at once, using blend modes
   that are naturally inert against their non-target background, so the
   right variant reads through depending on the photo underneath it,
   without needing per-photo brightness detection. */
.avatar-watermark {
  grid-area: 1 / 1;
  width: 46%;
  height: 46%;
  align-self: center;
  justify-self: center;
  object-fit: contain;
  pointer-events: none;
}

.avatar-watermark-dark {
  opacity: 0.3;
  mix-blend-mode: multiply;
}

.avatar-watermark-light {
  opacity: 0.3;
  mix-blend-mode: screen;
}

.profile-glass h1,
.profile-glass p {
  margin: 0;
}

.profile-glass h1 {
  font-size: clamp(2.2rem, 6vw, 5rem);
  line-height: 0.95;
}

.profile-glass p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.78);
}

.profile-tagline {
  margin-top: 6px !important;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92) !important;
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.profile-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: white;
  font-weight: 850;
}

.profile-visual-section {
  display: grid;
  gap: 12px;
}

.achievement-grid,
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.achievement-grid article,
.review-grid article,
.timeline-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 48px rgba(28, 25, 20, 0.07);
}

.achievement-grid article {
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 16px;
}

.achievement-grid article > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #111;
  color: white;
}

.achievement-grid h3,
.achievement-grid p,
.review-grid p,
.timeline-list h3,
.timeline-list p {
  margin: 0;
}

.achievement-grid p,
.review-grid p,
.timeline-list p {
  color: var(--muted);
}

.review-grid article {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.review-grid article div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.review-grid span {
  color: #b88700;
  font-weight: 900;
}

.timeline-list {
  display: grid;
  gap: 8px;
}

.timeline-list article {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 14px;
}

.timeline-list article > span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
  text-transform: uppercase;
}

.section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.section-title h2,
.section-title p,
.screen-heading p,
.content-card h3,
.business-card h3,
.place-card h3,
.pulse-card h3,
.offer-card h3,
.match-row h3 {
  margin: 0;
}

.section-title p,
.screen-heading p,
.content-card p,
.business-card p,
.place-card p,
.pulse-card p,
.match-row p,
.integration-list p,
.translation-output {
  color: var(--muted);
}

.section-title button {
  padding: 0 14px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  white-space: nowrap;
  flex-shrink: 0;
}

.section-title > div {
  min-width: 0;
}

.action-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.primary-action {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 104px;
  padding: 18px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 14px 40px rgba(28, 25, 20, 0.06);
}

.primary-action strong,
.primary-action small {
  display: block;
}

.primary-action small {
  margin-top: 4px;
  color: var(--muted);
}

.place-carousel {
  display: grid;
  grid-auto-columns: minmax(230px, 1fr);
  grid-auto-flow: column;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.place-card,
.content-card,
.market-card,
.contribution-card,
.offer-card,
.match-row,
.pulse-card,
.business-card,
.pro-card,
.reputation-card,
.reputation-grid article,
.need-help-card,
.request-card,
.imported-card,
.connection-flow article,
.connection-list article,
.profile-list article,
.ops-list article,
.import-source-grid article,
.integration-list article,
.workflow-card,
.mini-market-grid article,
.event-list article,
.notification-list article,
.message-list article,
.summary-card,
.workspace-panel,
.automation-grid article,
.business-ai-grid article,
.memory-grid div,
.score-grid article,
.briefing-grid article,
.earning-grid article,
.knowledge-grid article,
.signal-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.import-runner {
  display: grid;
  gap: var(--sp-16);
  padding: var(--sp-16);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.import-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-12);
  align-items: end;
}

.import-controls label {
  display: grid;
  gap: var(--sp-4);
  font-size: var(--text-caption);
  color: var(--muted);
  font-weight: 800;
}

.import-controls select {
  min-height: var(--control-h-md);
  padding: 0 var(--sp-12);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink);
  font-size: var(--text-body);
}

.import-controls button {
  min-height: var(--control-h-md);
  padding: 0 var(--sp-16);
  border-radius: var(--radius-sm);
  background: var(--emerald-600);
  color: var(--ink-inverse);
  font-weight: 800;
}

.import-controls button:disabled {
  opacity: 0.6;
}

.import-attribution {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-caption);
}

.import-warning {
  margin: 0;
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--radius-sm);
  background: rgba(245, 223, 156, 0.35);
  color: var(--ink);
  font-size: var(--text-caption);
  font-weight: 700;
}

.import-preview-list {
  display: grid;
  gap: var(--sp-12);
}

.import-preview-card {
  display: grid;
  gap: var(--sp-8);
  padding: var(--sp-16);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.import-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

.import-preview-head h3 {
  margin: 0;
}

.import-ai-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  color: var(--muted);
}

.badge-duplicate {
  background: rgba(255, 227, 223, 0.7);
  color: #a3372a;
}

.place-card {
  display: grid;
  gap: 10px;
  min-height: 170px;
  padding: 16px;
  scroll-snap-align: start;
}

.place-card span,
.badge,
.match-row > span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: var(--chip-h);
  padding: 0 var(--sp-12);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 800;
  text-transform: capitalize;
}

.badge-workmode {
  margin-inline-start: 6px;
  background: rgba(52, 211, 153, 0.14);
  color: var(--emerald-text);
}

.place-card button {
  align-self: end;
  min-height: 38px;
  border-radius: 8px;
  background: var(--mint);
  color: var(--ink);
  font-weight: 800;
}

.pulse-list,
.stack-list,
.match-list,
.offer-list,
.event-list,
.workflow-grid,
.mini-market-grid,
.notification-list,
.message-list,
.workspace-grid,
.automation-grid,
.business-ai-grid,
.memory-grid,
.score-grid,
.briefing-grid,
.earning-grid,
.knowledge-grid,
.signal-grid,
.market-grid,
.contribution-grid,
.connection-list,
.pro-list,
.request-list,
.imported-list,
.import-source-grid,
.ops-actions,
.integration-list {
  display: grid;
  gap: 10px;
}

/* Shared "no results" state — was a single unstyled <p class="empty">
   reused across search, the business directory, and both professional
   lists, with zero visual design (no icon, no centering, browser
   default text). Spans the full row when it lands inside a grid
   container (search results, directory, pro list) instead of hugging
   the first column. */
.empty-state {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px 20px;
  text-align: center;
}

.empty-state-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 1.4rem;
}

.empty-state p {
  margin: 0;
  max-width: 320px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Discover local places — up to three tiles per row on wide screens
   instead of one full-bleed card per screen. Pairs with the compact
   .imported-card tile redesign below (photo-overlay badges, tighter
   body) which is what actually makes three-per-row legible. */
.imported-list {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

/* Top AI-search matches — was a plain stacked text row with no visual
   at all (badge, title, meta, arrow), one full-width row per match.
   Now a picture-first tile grid, matching every other browse surface
   in the app (.imported-list, .pro-list). */
.match-list {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
}

.match-row {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.match-tile-photo {
  position: relative;
  height: 110px;
  background: var(--surface-soft);
  overflow: hidden;
}

.match-tile-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.match-tile-photo.is-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(52, 211, 153, 0.06));
}

.match-tile-initials {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-weight: 800;
  font-size: 0.9rem;
}

.match-tile-fallback-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.16);
  color: var(--emerald-text);
  font-size: 1.2rem;
}

.match-row > .match-tile-kind {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #151515;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.match-tile-body {
  display: grid;
  gap: 4px;
  padding: 10px 12px 44px;
}

.match-tile-body p {
  font-size: 0.82rem;
}

.match-row button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
}

/* Reservations screen — request form card, "My requests" tiles, and the
   "Popular to book" carousel. Previously a bare heading + three unstyled
   inputs in a row + plain text-list cards, with a lot of empty space
   below and no photos anywhere. */
.request-form-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 20px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.request-form-card h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
}

.request-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
  gap: 10px;
  align-items: stretch;
}

.request-form label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-translucent);
  color: var(--muted);
}

.request-form label .icon {
  flex-shrink: 0;
}

.request-form label:focus-within {
  border-color: var(--ink);
}

.request-form input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 44px;
}

.request-form button {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 10px;
  background: #111;
  color: white;
  font-weight: 800;
  white-space: nowrap;
}

.reservation-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.reservation-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 18px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.reservation-card-photo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background-position: center;
  background-size: cover;
  background-color: var(--surface-soft);
}

.reservation-card-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
  font-size: 1.3rem;
}

.reservation-card-body {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.reservation-card-body h3 {
  margin: 0;
}

.reservation-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.reservation-card > button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}

.status-badge-amber {
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
}

.status-badge-sky {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.status-badge-muted {
  background: var(--surface-soft);
  color: var(--muted);
}

.status-badge-green {
  background: rgba(52, 211, 153, 0.14);
  color: var(--emerald-text);
}

:root[data-theme="dark"] .status-badge-amber {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

:root[data-theme="dark"] .status-badge-sky {
  background: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

:root[data-theme="dark"] .status-badge-green {
  background: rgba(52, 211, 153, 0.22);
}

.reservation-suggestion-card {
  display: grid;
  gap: 6px;
  width: 220px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 18px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.reservation-suggestion-card .card-photo {
  min-height: 130px;
  margin: -12px -12px 4px;
  border-radius: var(--radius-lg, 18px) var(--radius-lg, 18px) 0 0;
}

.reservation-suggestion-card h3,
.reservation-suggestion-card p {
  margin: 0;
}

.reservation-suggestion-card p {
  color: var(--muted);
  font-size: 0.86rem;
}

.reservation-suggestion-card button {
  margin-top: 4px;
  min-height: 38px;
  border-radius: 999px;
  background: #111;
  color: white;
  font-weight: 800;
}

/* Matching professionals — up to four tiles per row on wide screens
   (three on tablet, one on phone) instead of one full-width card eating
   the whole row. auto-fit + minmax handles the step-down on its own, no
   separate breakpoints needed. Pairs with the vertical .pro-card tile
   layout above, which is what actually makes four-per-row legible. */
.pro-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.alwen-workspace {
  display: grid;
  gap: 18px;
}

.workspace-hero {
  display: grid;
  gap: 18px;
  min-height: 520px;
  align-content: center;
  padding: clamp(24px, 7vw, 76px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(17, 17, 17, 0.92), rgba(42, 50, 45, 0.78)),
    radial-gradient(circle at 20% 10%, rgba(223, 244, 232, 0.5), transparent 24rem),
    radial-gradient(circle at 88% 22%, rgba(220, 236, 255, 0.48), transparent 22rem);
  color: white;
  box-shadow: var(--shadow);
}

.workspace-hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(3rem, 8vw, 7rem);
  letter-spacing: 0;
  line-height: 0.95;
}

.workspace-hero .ai-search {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}

.conversation-router {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 860px;
}

.conversation-router button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: white;
  font-weight: 820;
  backdrop-filter: blur(16px);
}

.workspace-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.workspace-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
}

.workspace-panel.is-primary {
  background: #111;
  color: white;
}

.workspace-panel.is-primary .section-title p,
.workspace-panel.is-primary .step-list span {
  color: rgba(255, 255, 255, 0.74);
}

.workspace-panel.is-primary .step-list span {
  background: rgba(255, 255, 255, 0.1);
}

.task-list {
  display: grid;
  gap: 8px;
}

.task-list div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.task-list p,
.task-list span {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.memory-grid,
.score-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.memory-grid div,
.score-grid article {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.memory-grid span,
.score-grid span,
.automation-grid span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.score-grid strong {
  font-size: clamp(1.5rem, 4vw, 2.3rem);
}

/* Contribute page's action cards — was a single-column stack of
   identical bordered boxes with zero internal spacing (icon-less badge
   pill jammed against the heading, heading against the description),
   reading as one dense undifferentiated wall. Multi-column tile grid,
   breathing room, and a leading icon per action instead. */
.contribution-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}

.contribution-card {
  display: grid;
  gap: 8px;
  padding: 18px !important;
  border-radius: 22px !important;
}

.contribution-card h3 {
  margin: 0;
}

.contribution-card > p {
  margin: 0;
  color: var(--muted);
}

.contribution-value {
  justify-self: start;
}

.contribution-card button {
  margin-top: 4px;
  min-height: 42px;
  border-radius: 10px;
  background: #111;
  color: white;
  font-weight: 800;
}

/* "Connected city" graph — was a flat list of "From → To" text rows
   with no icon and no card weight, reading like a debug dump of the
   data model rather than a showcase of how the city connects. */
.connection-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}

.connection-list article {
  display: grid;
  gap: 8px;
  padding: 18px !important;
  border-radius: 22px !important;
}

.connection-list article span.tile-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #111;
  color: white;
  font-size: 0.85rem;
}

.connection-edge {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.connection-edge strong {
  font-size: 0.96rem;
}

.connection-edge .icon {
  color: var(--muted);
  flex-shrink: 0;
}

.connection-list article > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.automation-grid,
.business-ai-grid,
.briefing-grid,
.earning-grid,
.knowledge-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.automation-grid article,
.business-ai-grid article,
.briefing-grid article,
.earning-grid article,
.knowledge-grid article {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.automation-grid h3,
.automation-grid p,
.business-ai-grid h3,
.briefing-grid h3,
.briefing-grid p,
.earning-grid h3,
.earning-grid p,
.knowledge-grid h3 {
  margin: 0;
}

.automation-grid p,
.briefing-grid p,
.earning-grid p {
  color: var(--muted);
}

.automation-grid button,
.business-ai-grid button {
  min-height: 40px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-weight: 820;
}

.briefing-grid article {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7)),
    var(--surface);
  box-shadow: 0 18px 42px rgba(28, 25, 20, 0.06);
}

.briefing-grid span,
.earning-grid span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.earning-grid article {
  background: linear-gradient(180deg, var(--surface), var(--mint));
}

.earning-grid strong {
  font-size: clamp(1.4rem, 4vw, 2.2rem);
}

.knowledge-grid article {
  background: rgba(255, 255, 255, 0.78);
}

.signal-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.signal-grid article {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.signal-grid span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.signal-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.api-placeholder-shell {
  background: rgba(255, 255, 255, 0.5);
}

.reputation-grid-headline {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  max-width: 620px;
}

/* Top border + extra top padding separates the three narrative blocks
   (Trust & verification / Skills & expertise / Community impact) inside
   one shared .reputation-card — previously just an <h3> with no visual
   break between them, reading as one dense wall of content. */
.profile-narrative-section {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.profile-narrative-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--text-title, 1.05rem);
}

.profile-narrative-section h3 .icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.14);
  color: var(--emerald-text);
  font-size: 0.9rem;
}

.quote-list span.verified-chip {
  background: rgba(52, 211, 153, 0.14) !important;
  color: var(--emerald-text) !important;
}

.profile-narrative-section > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
  .primary-action,
  .workflow-card,
  .earning-grid article,
  .briefing-grid article,
  .market-card,
  .pro-card,
  .notification-list article,
  .message-list article {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }

  .primary-action:hover,
  .workflow-card:hover,
  .earning-grid article:hover,
  .briefing-grid article:hover,
  .market-card:hover,
  .pro-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 48px rgba(28, 25, 20, 0.1);
  }
}

/* Product polish foundation: shared design system rules. */
:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --shadow-soft: 0 1px 1px rgba(15, 31, 27, 0.04), 0 10px 28px rgba(15, 31, 27, 0.09);
  --shadow-card: 0 1px 1px rgba(15, 31, 27, 0.05), 0 20px 52px rgba(15, 31, 27, 0.14);
  --shadow-float: 0 4px 16px rgba(15, 31, 27, 0.12), 0 28px 84px rgba(15, 31, 27, 0.22);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-fast: 160ms;
  --motion: 260ms;

  /* Strict spacing scale (4/8/12/16/20/24/32) for the card/chip/button
     system below. Legacy --space-N tokens above stay as-is (widely used
     already); new component work should use --sp-N instead. */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;

  /* Typography scale: display > hero > h1 > h2 > title > subtitle > body > caption > meta */
  --text-display: clamp(2.6rem, 7vw, 4.5rem);
  --text-hero: clamp(2.1rem, 6vw, 3.2rem);
  --text-h1: clamp(1.5rem, 4vw, 2rem);
  --text-h2: 1.25rem;
  --text-title: 1.05rem;
  --text-subtitle: 0.92rem;
  --text-body: 0.9rem;
  --text-caption: 0.8rem;
  --text-meta: 0.72rem;

  /* Control heights for the button/chip system */
  --control-h-sm: 36px;
  --control-h-md: 44px;
  --control-h-lg: 52px;
  --chip-h: 36px;
}

body {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3,
strong {
  letter-spacing: 0;
}

h1 {
  font-size: clamp(2.35rem, 6vw, 4.5rem);
  line-height: 0.96;
}

h2 {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.08;
}

h3 {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.18;
}

p,
small,
span {
  line-height: 1.45;
}

button,
a,
input,
.market-card,
.live-card,
.visual-card,
.food-card,
.social-post-card,
.create-primary-action,
.create-secondary-action,
.pro-card,
.alwen-card {
  transition:
    transform var(--motion-fast) var(--ease),
    background var(--motion) var(--ease),
    border-color var(--motion) var(--ease),
    box-shadow var(--motion) var(--ease),
    color var(--motion) var(--ease),
    opacity var(--motion) var(--ease);
}

button:active {
  transform: scale(0.98);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(10, 132, 255, 0.26);
  outline-offset: 2px;
}

.app-shell {
  padding-inline: var(--space-3) !important;
}

.main,
.view {
  gap: var(--space-3);
}

.app-top {
  min-height: 88px;
  padding: var(--space-2) var(--space-1);
}

.brand-city {
  font-size: 0.78rem;
}

.header-icon,
.header-avatar {
  width: 40px;
  height: 40px;
  box-shadow: var(--shadow-soft);
}

.city-hero {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.city-hero-copy {
  display: grid;
  gap: var(--space-2);
  max-width: 760px;
}

.city-hero-copy p:not(.eyebrow) {
  max-width: 640px;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.6;
}

.intent-suggestions,
.city-intents {
  gap: var(--space-1);
}

.intent-suggestions button,
.city-intents button,
.chip,
.capability-rail span,
.tag-row span,
.quote-list span,
.trust-row span,
.pulse-author-row small {
  display: inline-flex;
  align-items: center;
  min-height: var(--chip-h);
  padding: 0 var(--sp-12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font-size: var(--text-caption);
  font-weight: 800;
  box-shadow: none;
}

.living-signal-row {
  gap: var(--space-2);
}

.living-signal-row article {
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px);
}

.living-section,
.section-shell {
  display: grid;
  gap: var(--space-2);
}

.section-title {
  align-items: end;
  margin-bottom: 0;
  padding-top: var(--space-1);
}

.section-title h2,
.screen-heading h1 {
  margin-bottom: 0;
}

.section-title p,
.screen-heading p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.live-card,
.market-mini-card,
.earn-card,
.visual-card,
.food-card,
.social-post-card,
.visual-market-card.market-card,
.pro-card,
.reputation-card,
.alwen-card,
.need-help-card,
.request-card,
.content-card,
.business-card,
.offer-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* These cards have no photo, so (unlike the other cards sharing the
   overflow:hidden rule above) their text sits directly on the padding box —
   they need their own inset or the rounded corner clips the first line. */
.need-help-card,
.reputation-card,
.request-card,
.profile-builder {
  padding: var(--space-3);
}

.need-help-card button {
  margin-top: var(--space-2);
}

.live-card:hover,
.market-mini-card:hover,
.earn-card:hover,
.visual-card:hover,
.food-card:hover,
.social-post-card:hover,
.visual-market-card.market-card:hover,
.pro-card:hover,
.create-primary-action:hover,
.create-secondary-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card) !important;
}

.card-photo,
.visual-card-image,
.food-card-image,
.market-photo,
.pulse-photo {
  animation: alwendaMediaIn 420ms var(--ease) both;
}

@keyframes alwendaMediaIn {
  from {
    opacity: 0;
    transform: scale(1.015);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.market-card-body {
  gap: var(--space-1);
}

.market-card-body > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.visual-trust span:nth-child(n + 2) {
  display: none;
}

.ai-price-pill {
  max-width: 100%;
}

.seller-row span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.social-post-card {
  padding: var(--space-2);
}

.social-post-card .pulse-photo {
  min-height: 240px;
  border-radius: calc(var(--radius-lg) - 4px);
}

.pulse-author-row {
  gap: 12px;
}

.post-actions {
  padding-top: var(--space-1);
  border-top: 1px solid rgba(20, 20, 20, 0.07);
}

.post-actions button {
  min-height: 36px;
  background: rgba(20, 20, 20, 0.04);
}

.create-shell .screen-heading {
  padding-top: var(--space-2);
}

.create-command-centre {
  gap: var(--space-2);
}

.create-primary-action,
.create-secondary-action {
  border-radius: var(--radius-lg);
}

.create-primary-action {
  box-shadow: var(--shadow-soft);
}

.create-secondary-actions {
  border-radius: var(--radius-lg);
}

.profile-hero,
.premium-profile-hero {
  border-radius: var(--radius-xl) !important;
}

.reputation-grid article,
.signal-grid article,
.profile-list article,
.achievement-grid article,
.review-grid article {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
}

.alwen-dock .alwen-panel {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-float) !important;
}

.alwen-dock.is-open .alwen-panel {
  animation: alwenSheetIn 240ms var(--ease) both;
}

@keyframes alwenSheetIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bottom-nav {
  border-radius: var(--radius-lg) !important;
}

.bottom-nav button {
  transition:
    background var(--motion) var(--ease),
    color var(--motion) var(--ease),
    transform var(--motion-fast) var(--ease),
    box-shadow var(--motion) var(--ease);
}

@media (max-width: 640px) {
  .app-shell {
    padding-inline: var(--space-2) !important;
  }

  h1 {
    font-size: clamp(2.15rem, 12vw, 3.4rem);
  }

  .app-top {
    min-height: 80px;
  }

  .top-controls {
    gap: 6px;
  }

  .header-icon,
  .header-avatar {
    width: 38px;
    height: 38px;
  }

  .city-hero-copy {
    gap: 12px;
  }

  .section-title {
    gap: var(--space-1);
  }

  .social-post-card .pulse-photo {
    min-height: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Social-grade consumer polish for the living city experience. */
.living-section {
  padding: 4px 0;
}

.living-section .section-title {
  align-items: end;
  margin-bottom: 10px;
}

.living-section .section-title h2 {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.living-section .section-title p {
  max-width: 560px;
}

.living-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 28%);
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.living-rail::-webkit-scrollbar {
  display: none;
}

.live-card,
.market-mini-card,
.earn-card,
.visual-card,
.food-card,
.pro-pill {
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 46px rgba(28, 25, 20, 0.09);
}

.live-card,
.market-mini-card {
  position: relative;
  min-height: 310px;
  padding: 12px;
  align-content: end;
}

.live-card .card-photo,
.market-mini-card .card-photo {
  min-height: 178px;
  margin: -12px -12px 12px;
  border-radius: 22px 22px 18px 18px;
  background-position: center;
  background-size: cover;
}

.floating-card-actions,
.mini-save {
  position: absolute;
  top: 12px;
  right: 12px;
}

.floating-card-actions button,
.mini-save,
.favourite-float {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(14px);
}

.live-status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 8px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(31, 143, 104, 0.12);
  color: #176747;
  font-size: 0.74rem;
  font-weight: 900;
}

.mini-price-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mini-price-line em {
  color: #176747;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
}

.earn-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px;
  min-height: 138px;
  padding: 10px;
}

.earn-image {
  min-height: 118px;
  border-radius: 18px;
  background-position: center;
  background-size: cover;
}

.earn-body {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 4px 2px 4px 12px;
}

.earn-body span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.earn-body h3,
.earn-body p {
  margin: 0;
}

.earn-body strong {
  font-size: 1.25rem;
}

.community-preview {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 38%);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 14px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.community-preview::-webkit-scrollbar {
  display: none;
}

.social-post-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.86);
}

.social-post-card .post-actions {
  margin-top: auto;
}

.pulse-author-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  /* Fixed to the avatar's own height (below) rather than left to auto —
     the nowrap/ellipsis rules further down stop the name/area text from
     ever wrapping, but the row's grid track was still sizing itself a
     few pixels taller on some cards for reasons that didn't trace back
     to any single child's rendered box. Pinning the row height directly
     is what actually guarantees every card's photo starts at the same Y
     regardless of author name/area length. */
  height: 42px;
}

.post-avatar,
.seller-row img {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
}

/* Truncate to a single line instead of letting long names/areas wrap —
   without this, whichever card had the longest text got a taller author
   row than its neighbours, which pushed its photo (and everything below
   it) down by a different amount card to card, so the photos across one
   carousel row never lined up at the same height. */
.pulse-author-row > div {
  min-width: 0;
}

.pulse-author-row strong,
.pulse-author-row span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pulse-author-row span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 760;
}

.pulse-author-row small {
  display: block;
  flex-shrink: 1;
  min-width: 0;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface-soft);
  padding: 0 8px;
  font-size: 0.7rem;
  line-height: var(--chip-h);
}

.social-post-card .pulse-photo {
  min-height: 190px;
  /* .pulse-photo's base rule (above) bleeds the photo to the card edge
     with a -16px margin sized for a 16px-padded card — .social-post-card
     only has 12px padding, so that margin overshot the edge by 4px on
     each side. Match it to this card's actual padding instead; the
     bottom spacing comes from the parent's own `gap`, so no bottom
     margin is needed here (the base rule's 8px would double up). */
  margin: -12px -12px 0;
  border-radius: 22px;
  background-position: center;
  background-size: cover;
}

.pulse-content {
  display: grid;
  gap: 8px;
}

.pulse-content h3,
.pulse-content p {
  margin: 0;
}

.post-alwen-summary {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--mint);
  color: #176747;
  font-weight: 760;
}

.post-alwen-summary .icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.post-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--chip-h);
  padding: 0 var(--sp-12);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: var(--text-caption);
  font-weight: 800;
}

.marketplace-shell .screen-heading,
.create-shell .screen-heading,
.community-shell .screen-heading {
  padding: 18px 0 2px;
}

.market-grid {
  column-gap: 18px;
}

.visual-market-card.market-card {
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 58px rgba(28, 25, 20, 0.11);
}

.visual-market-card .market-photo {
  position: relative;
  min-height: 250px;
  background-position: center;
  background-size: cover;
}

.visual-market-card.is-tall .market-photo {
  min-height: 350px;
}

.visual-market-card.is-wide .market-photo {
  min-height: 220px;
}

.ai-verified {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 880;
  backdrop-filter: blur(14px);
}

.market-card-body {
  gap: var(--sp-8);
  padding: var(--sp-16);
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.price-row strong {
  font-size: 1.32rem;
}

.ai-price-pill {
  background: var(--mint);
  color: #176747;
  font-size: 0.78rem;
}

.price-row span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  width: fit-content;
  padding: 7px 9px;
  border-radius: 999px;
  background: var(--mint);
  color: #176747;
  font-size: 0.78rem;
  font-weight: 850;
}

.visual-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.market-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.market-actions button,
.draft-actions button {
  min-height: 42px;
  border-radius: 999px;
  background: #111;
  color: white;
  font-weight: 850;
}

.market-actions button:first-child,
.draft-actions button:not(:first-child) {
  background: var(--surface-soft);
  color: var(--ink);
}

.alwen-listing-studio {
  border-radius: 30px;
  padding: var(--space-3);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(241, 238, 231, 0.78)),
    radial-gradient(circle at 100% 0%, rgba(220, 236, 255, 0.8), transparent 16rem);
}

/* This card is a deliberate exception: it keeps its glossy white/cream
   gradient in dark mode too instead of flattening to the dark surface
   like every other card — a light "AI draft" panel floating on the dark
   page reads as a premium accent, not a bug. But its title/body text has
   no color of its own here, so it was inheriting the theme-aware --ink/
   --muted tokens, which go near-white in dark mode — invisible against a
   background that never changed. Pin the text to a fixed dark color so
   it stays readable on this always-light card regardless of theme. */
:root[data-theme="dark"] .alwen-create-copy h3,
:root[data-theme="dark"] .alwen-create-copy p,
:root[data-theme="dark"] .alwen-listing-studio .alwen-prompt p,
:root[data-theme="dark"] .alwen-listing-studio .draft-list strong,
:root[data-theme="dark"] .alwen-listing-studio .draft-list p {
  color: #151515 !important;
}

.alwen-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 18px;
  align-items: stretch;
}

.alwen-create-copy {
  display: grid;
  gap: 14px;
  align-content: center;
}

.alwen-create-copy h3 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
}

.alwen-create-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.editable-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.editable-chip-row button {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 820;
  box-shadow: 0 8px 22px rgba(28, 25, 20, 0.08);
}

.alwen-preview-card {
  max-width: 420px;
  justify-self: end;
}

.create-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.create-grid button {
  min-height: 184px;
  align-content: end;
  justify-items: start;
  overflow: hidden;
  padding: 16px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.94)),
    radial-gradient(circle at 100% 0%, rgba(223, 244, 232, 0.9), transparent 10rem);
  text-align: left;
  box-shadow: 0 18px 46px rgba(28, 25, 20, 0.1);
}

.create-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: auto;
  border-radius: 16px;
  background: #111;
  color: white;
}

.premium-profile-hero {
  min-height: 264px;
  align-items: end;
  border-radius: 30px;
}

.profile-glass {
  width: min(100%, 780px);
}

.reputation-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.reputation-grid article,
.profile-list article,
.achievement-grid article,
.review-grid article {
  border-radius: 24px;
  background: var(--surface-translucent);
  box-shadow: 0 16px 44px rgba(28, 25, 20, 0.08);
}

/* Flex, not CSS Grid — a `display:grid; grid-auto-flow:column` row
   combined with `overflow-x:auto` doesn't reliably stretch shorter
   items to match the tallest one in every engine (WebKit in particular
   can size each auto-flow track to its own content instead), which is
   exactly what produced uneven review-card heights on wide screens
   where the review text line-wraps differently per card. Flexbox's
   `align-items:stretch` is the well-supported way to do an equal-height
   horizontally-scrolling row. */
.achievement-grid,
.review-grid {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  gap: 12px;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.achievement-grid > *,
.review-grid > * {
  flex: 0 0 28%;
  min-width: 220px;
}

.achievement-grid::-webkit-scrollbar,
.review-grid::-webkit-scrollbar {
  display: none;
}

.achievement-grid article,
.review-grid article {
  scroll-snap-align: start;
}

.bottom-nav {
  border: 1px solid rgba(52, 211, 153, 0.16);
  background: linear-gradient(180deg, rgba(21, 38, 32, 0.94), rgba(15, 31, 27, 0.96));
  box-shadow: var(--shadow-premium);
  backdrop-filter: blur(24px);
}

.bottom-nav button {
  border-radius: 18px;
  color: rgba(247, 246, 243, 0.6);
  transition: background 220ms ease, color 220ms ease, transform 180ms ease, box-shadow 220ms ease;
}

.bottom-nav button.is-active {
  background: var(--emerald-600);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.alwen-orb:hover {
  transform: translateY(-3px) scale(1.03);
}

.alwen-panel {
  border-radius: 26px;
  box-shadow: 0 24px 80px rgba(28, 25, 20, 0.18);
}

.alwen-actions {
  display: grid;
  gap: 8px;
}

.alwen-actions button,
.alwen-mode-row button {
  justify-content: flex-start;
  border-radius: 16px;
}

@media (max-width: 760px) {
  .living-rail,
  .community-preview {
    grid-auto-columns: minmax(250px, 82%);
  }

  .achievement-grid > *,
  .review-grid > * {
    flex-basis: 82%;
    min-width: 250px;
  }

  .alwen-create-layout {
    grid-template-columns: 1fr;
  }

  .alwen-preview-card {
    max-width: none;
    justify-self: stretch;
  }

  .create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .create-grid button {
    min-height: 158px;
  }

  .social-post-card .pulse-photo {
    min-height: 160px;
  }

  .premium-profile-hero {
    min-height: 312px;
  }
}

@media (max-width: 430px) {
  .create-grid {
    grid-template-columns: 1fr;
  }

  .living-rail,
  .community-preview {
    grid-auto-columns: minmax(238px, 88%);
  }

  .achievement-grid > *,
  .review-grid > * {
    flex-basis: 88%;
    min-width: 238px;
  }
}

@media (min-width: 768px) {
  .carousel-control {
    display: grid;
  }

  .carousel-control-right {
    right: 72px;
  }

  .carousel-track,
  .carousel-track.living-rail,
  .carousel-track.visual-card-grid,
  .carousel-track.food-grid,
  .carousel-track.pro-strip,
  .carousel-track.community-preview {
    padding-inline: 56px;
    scroll-padding-inline: 56px;
    scroll-snap-type: x proximity;
  }

  .carousel-track,
  .carousel-track.living-rail {
    grid-auto-columns: minmax(246px, 31%);
  }

  .carousel-track.visual-card-grid,
  .carousel-track.food-grid {
    grid-auto-columns: minmax(236px, 28%);
  }

  .carousel-track.pro-strip {
    grid-auto-columns: minmax(228px, 25%);
  }

  .carousel-track.community-preview {
    grid-auto-columns: minmax(280px, 33%);
  }
}

/* Adaptive brand and carousel refinement */
.brand-icon-swap {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.brand-icon-swap img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.app-icon-frame {
  width: 24px;
  height: 24px;
}

.brand-light {
  display: none !important;
}

.header-dark .brand-dark,
.nav-active .brand-dark {
  display: none !important;
}

.header-dark .brand-light,
.nav-active .brand-light {
  display: block !important;
}

.header-light .brand-dark,
.nav-inactive .brand-dark {
  display: block !important;
}

.header-light .brand-light,
.nav-inactive .brand-light {
  display: none !important;
}

.brand-wordmark-light {
  display: none;
}

.header-dark .brand-wordmark-dark {
  display: none;
}

.header-dark .brand-wordmark-light {
  display: block;
}

.header-light .brand-wordmark-dark {
  display: block;
}

.header-light .brand-wordmark-light {
  display: none;
}

.app-top,
.app-top .brand-main,
.app-top .brand-city,
.app-top .header-icon,
.app-top .header-avatar,
.bottom-nav button,
.bottom-nav .icon,
.bottom-nav span {
  transition:
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease,
    color 280ms ease,
    opacity 280ms ease,
    transform 220ms ease;
}

.header-dark {
  color: #fff;
}

.header-dark .brand-main,
.header-dark .brand-city,
.header-dark .header-icon {
  color: #fff;
}

.header-light {
  color: var(--ink);
}

.bottom-nav {
  overflow: hidden;
}

.bottom-nav button {
  position: relative;
  overflow: hidden;
  color: rgba(247, 246, 243, 0.6);
  background: transparent;
}

.bottom-nav button::after {
  position: absolute;
  inset: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.08);
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 220ms ease, transform 320ms ease;
  content: "";
  pointer-events: none;
}

.bottom-nav button:hover::after,
.bottom-nav button:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(13);
}

.bottom-nav button.nav-active,
.bottom-nav button.is-active {
  color: var(--ink-inverse);
  background: var(--emerald-600);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.bottom-nav button.nav-active::after,
.bottom-nav button.is-active::after {
  background: rgba(255, 255, 255, 0.12);
}

.bottom-nav button.nav-active .icon,
.bottom-nav button.nav-active span,
.bottom-nav button.is-active .icon,
.bottom-nav button.is-active span {
  color: #fff;
}

.bottom-nav button.nav-inactive .icon {
  color: rgba(247, 246, 243, 0.65);
}

.bottom-nav button.nav-inactive span {
  color: rgba(247, 246, 243, 0.55);
}

.bottom-nav button:focus-visible,
.carousel-control:focus-visible {
  outline: 2px solid rgba(17, 17, 17, 0.72);
  outline-offset: 3px;
}

.carousel-shell {
  position: relative;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.carousel-track,
.carousel-track.living-rail,
.carousel-track.visual-card-grid,
.carousel-track.food-grid,
.carousel-track.pro-strip,
.carousel-track.community-preview {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(246px, 31%);
  grid-template-columns: none;
  align-items: stretch;
  gap: 14px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 56px 18px;
  scroll-behavior: smooth;
  scroll-padding-inline: 56px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track > * {
  min-width: 0;
  max-width: 100%;
  scroll-snap-align: start;
}

.carousel-track.is-programmatic-scroll {
  scroll-snap-type: none !important;
}

.carousel-track.visual-card-grid,
.carousel-track.food-grid {
  grid-auto-columns: minmax(236px, 28%);
}

.carousel-track.pro-strip {
  grid-auto-columns: minmax(228px, 25%);
}

.carousel-track.community-preview {
  grid-auto-columns: minmax(280px, 33%);
}

/* Real-place rails (Pharmacies, Hotels, Groceries, etc.) — exactly two
   cards visible per row instead of three-plus cramped narrow ones, so
   there's room for the photo, name, and address to breathe.
   Deliberately NOT minmax(MIN, MAX): grid-auto-columns only grows a
   track toward its minmax() max when the row has leftover space to
   distribute, and a horizontally-overflowing carousel (more cards than
   fit) never has leftover space — so every one of the minmax() rules
   above actually renders at MIN, full stop, regardless of what MAX says.
   A bare calc() has no such ambiguity: it's simply the size.
   This rule only governs ≥768px — below that, .carousel-track switches
   to display:flex entirely (see the flex-basis override further down),
   at which point grid-auto-columns has no effect at all. */
.carousel-track.real-place-rail {
  grid-auto-columns: calc(50vw - 40px);
}

.carousel-control {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #111;
  box-shadow: 0 16px 40px rgba(17, 17, 17, 0.14);
  backdrop-filter: blur(18px);
  cursor: pointer;
  transform: translateY(-50%);
}

.carousel-control .icon {
  font-size: 1.05rem;
  line-height: 1;
}

.carousel-control-left {
  left: 8px;
}

.carousel-control-left .icon {
  transform: rotate(180deg);
}

.carousel-control-right {
  right: 72px;
}

.carousel-control:disabled {
  cursor: default;
  opacity: 0.26;
  pointer-events: none;
}

.carousel-control:not(:disabled):hover {
  transform: translateY(-50%) scale(1.04);
}

@media (max-width: 768px) {
  .carousel-control {
    display: none;
  }

  /* Flex, not grid: grid's minmax(min, vw) only grows a track past its
     minimum when there is leftover free space, and a scroll-snap rail is
     deliberately always overflowing (zero leftover space), so the "vw" part
     was never actually taking effect and every card silently rendered at
     its bare minimum width. flex-basis is resolved against the container's
     own content box directly, so it reliably yields a consistent card width
     and a predictable "peek" ratio (~1.2 cards visible, hinting more
     content) with no left/right clipping. */
  .carousel-track,
  .carousel-track.living-rail,
  .carousel-track.visual-card-grid,
  .carousel-track.food-grid,
  .carousel-track.pro-strip,
  .carousel-track.community-preview {
    display: flex;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
  }

  .carousel-track > *,
  .carousel-track.living-rail > *,
  .carousel-track.visual-card-grid > *,
  .carousel-track.food-grid > *,
  .carousel-track.pro-strip > *,
  .carousel-track.community-preview > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  /* Real-place rails (Pharmacies, Hotels, Groceries, etc.) — two cards per
     row instead of one, at this same flex-basis breakpoint. The extra
     class here gives this higher specificity than the shared 82% rule
     just above, so it wins without needing !important. (grid-auto-columns
     tuning elsewhere for .real-place-rail has no effect at this width —
     this whole block runs the rail as flexbox, not grid, so flex-basis is
     what actually governs card width here.) */
  .carousel-track.real-place-rail > * {
    flex: 0 0 46%;
  }
}

@media (min-width: 768px) {
  .carousel-control {
    display: grid;
  }

  .carousel-track,
  .carousel-track.living-rail,
  .carousel-track.visual-card-grid,
  .carousel-track.food-grid,
  .carousel-track.pro-strip,
  .carousel-track.community-preview {
    padding-inline: 56px;
    scroll-padding-inline: 56px;
    scroll-snap-type: x proximity;
  }

  .carousel-track,
  .carousel-track.living-rail {
    grid-auto-columns: minmax(246px, 31%);
  }

  .carousel-track.visual-card-grid,
  .carousel-track.food-grid {
    grid-auto-columns: minmax(236px, 28%);
  }

  .carousel-track.pro-strip {
    grid-auto-columns: minmax(228px, 25%);
  }

  .carousel-track.community-preview {
    grid-auto-columns: minmax(280px, 33%);
  }
}

.app-shell.is-home-shell .main {
  margin-top: -74px;
}

.app-top {
  min-height: 76px;
  padding: 10px 4px 12px;
}

.nav-active .app-icon-frame {
  background: rgba(255, 255, 255, 0.96);
}

.section-shell,
.living-section {
  gap: 18px;
  padding: clamp(14px, 2.6vw, 22px);
  border: 1px solid rgba(20, 20, 20, 0.07);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 34px rgba(28, 25, 20, 0.06);
}

.city-hero {
  min-height: clamp(440px, 62vh, 620px);
  gap: 14px;
  padding: clamp(18px, 4.5vw, 44px);
}

.city-hero::before {
  inset: 10px;
  border-radius: 22px;
}

.city-hero h1 {
  font-size: clamp(2.35rem, 6.6vw, 5.5rem);
}

.living-signal-row {
  gap: 8px;
}

.living-signal-row article {
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
}

.market-grid {
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr));
}

.visual-market-card .market-photo,
.visual-market-card.is-tall .market-photo,
.visual-market-card.is-wide .market-photo {
  aspect-ratio: 4 / 3;
  border-radius: 22px 22px 0 0;
}

.market-card-body,
.visual-market-card.market-card > div:last-child {
  gap: var(--sp-8);
  padding: var(--sp-16);
}

.verified-check {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px;
  min-height: 19px;
}

.selection-sheet {
  max-height: min(78vh, 680px);
  overflow: auto;
}

.bottom-nav {
  padding: 5px;
  border-radius: 20px;
}

.bottom-nav button {
  min-height: 48px;
  border-radius: 15px;
}

.bottom-nav button .app-icon-frame {
  width: 22px;
  height: 22px;
  padding: 1px;
  border-radius: 7px;
  box-shadow: none;
}

.translator-hero,
.translation-card,
.translation-panel,
.smart-suggestions,
.alwen-insight-panel {
  border-radius: 28px;
}

/* .smart-suggestions/.alwen-insight-panel previously had no background,
   padding, or border at all — just the radius above with nothing to round.
   Their .suggestion-chip-grid/.insight-chip-row buttons had zero CSS
   too, so they rendered as unstyled native <button> elements: browser-
   default light-gray background paired with this app's theme-aware
   (light-in-dark-mode) inherited text color — exactly the low-contrast
   "same colour" bug reported in dark mode, just from missing rules
   rather than a hardcoded-color mismatch like the other fixes above. */
.smart-suggestions,
.alwen-insight-panel {
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.suggestion-chip-grid,
.insight-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.suggestion-chip-grid button,
.insight-chip-row button {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
}

.translation-card {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card, 0 20px 52px rgba(15, 31, 27, 0.14));
}

.translation-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.translation-panel {
  min-height: 260px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-soft);
}

.translation-panel-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.translation-panel-top > span:first-child {
  font-weight: 800;
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.translation-select {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 700;
}

.translation-speak-button {
  display: grid !important;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin-left: auto;
  padding: 0 !important;
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 1.2rem;
}

.translation-speak-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.translation-speak-button.is-speaking {
  background: var(--mint);
  color: var(--emerald-text);
  box-shadow: var(--shadow-glow);
  animation: translationSpeakPulse 1.1s ease-in-out infinite;
}

@keyframes translationSpeakPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.translation-output.is-error strong {
  color: #c0392b;
}

.translation-result {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  animation: translationResultIn 260ms var(--ease, ease-out);
}

@keyframes translationResultIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.translation-loading-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.translation-loading-dots {
  display: inline-flex;
  gap: 3px;
}

.translation-loading-dots span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.35;
  animation: translationLoadingBounce 1s ease-in-out infinite;
}

.translation-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.translation-loading-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes translationLoadingBounce {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.translation-voice-notice {
  margin: -4px 0 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.8rem;
}

.quick-language-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-language-row button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.86rem;
}

.quick-language-row button.is-selected {
  border-color: rgba(52, 211, 153, 0.5);
  background: var(--mint);
  color: var(--emerald-text);
}

.translation-actions {
  display: grid;
  gap: 10px;
}

.translation-submit-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px !important;
  border-radius: 16px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}

:root[data-theme="dark"] .translation-submit-button {
  background: var(--emerald-glow, #34d399) !important;
  color: #06231a !important;
}

.translation-submit-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.translation-actions-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.translation-actions-secondary button:not(.translation-swap-button) {
  padding: 0 16px;
  min-height: 40px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
}

.translation-actions-secondary button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.translation-actions-secondary [data-translate-copy].is-copied {
  border-color: rgba(52, 211, 153, 0.5);
  background: var(--mint);
  color: var(--emerald-text);
}

.translation-swap-button {
  display: grid !important;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 !important;
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 1.35rem;
}

.translation-swap-button:hover {
  transform: rotate(180deg);
}

.translation-input,
.premium-output {
  min-height: 190px;
}

.premium-output {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-translucent);
}

.translation-mode-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
  border-radius: 18px;
  background: var(--surface-soft);
}

.translation-mode-cards button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 8px 6px;
  border-radius: 13px;
  background: transparent;
  color: var(--ink);
  text-align: center;
}

.translation-mode-cards button .icon {
  font-size: 1.15rem;
  min-width: 0;
  height: auto;
}

.translation-mode-cards button strong {
  font-size: 0.82rem;
  font-weight: 800;
}

.translation-mode-cards button span {
  display: none;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

@media (min-width: 560px) {
  .translation-mode-cards button span {
    display: block;
  }
}

.translation-mode-cards button.is-active {
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--emerald-text);
}

.translation-input-wrap {
  position: relative;
  width: 100%;
}

.translation-input-wrap .translation-input {
  width: 100%;
  padding-right: 52px;
  transition: box-shadow var(--motion-fast, 160ms) var(--ease, ease-out), border-color var(--motion-fast, 160ms) var(--ease, ease-out);
}

.translation-input:focus-visible,
.translation-select:focus-visible {
  outline: none !important;
  border-color: rgba(52, 211, 153, 0.6);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
}

.translation-char-count {
  position: absolute;
  left: 12px;
  bottom: 10px;
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.translation-record-button {
  display: grid !important;
  place-items: center;
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0 !important;
  border-radius: 999px;
  background: var(--emerald-glow, #34d399);
  color: #06231a;
  font-size: 1.3rem;
  box-shadow: var(--shadow-soft);
}

.translation-record-button.is-recording {
  background: #e74c3c;
  color: #fff;
  animation: translationRecordPulse 1.1s ease-in-out infinite;
}

@keyframes translationRecordPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.45); }
  50% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
}

.translation-recording-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 10px;
  color: #c0392b;
  font-size: 0.82rem;
  font-weight: 700;
}

.translation-camera-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.translation-recording-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #e74c3c;
  animation: translationRecordPulse 1.1s ease-in-out infinite;
}

.translation-voice-notice.is-error {
  color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
}

@media (max-width: 768px) {
  .app-shell {
    padding-inline: 10px;
  }

  .app-shell.is-home-shell .main {
    margin-top: -66px;
  }

  .app-top {
    min-height: 70px;
  }

  .city-hero {
    min-height: auto;
    padding: 86px 16px 16px;
  }

  .city-hero h1 {
    font-size: clamp(2rem, 10vw, 3.5rem);
  }

  .city-hero-copy p:not(.eyebrow) {
    font-size: 1rem;
  }

  .ai-search,
  .ai-search.is-large {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 56px;
  }

  .city-hero .ai-search {
    min-height: 56px;
  }

  .ai-search button {
    grid-column: auto;
    min-height: 40px;
    padding-inline: 12px;
  }

  .living-signal-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 58vw);
    grid-template-columns: none !important;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .living-signal-row::-webkit-scrollbar {
    display: none;
  }

  .living-signal-row article {
    min-height: 74px;
    padding: 10px;
    scroll-snap-align: start;
  }

  .living-signal-row article p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .section-shell,
  .living-section {
    padding: 13px;
    border-radius: 22px;
  }

  .translation-panels,
  .translator-support-grid {
    grid-template-columns: 1fr !important;
  }

  .translation-panel {
    min-height: 220px;
  }
}

@media (max-width: 430px) {
  .city-hero {
    gap: 12px;
    padding-top: 82px;
  }

  .ai-search,
  .ai-search.is-large {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ai-search button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .city-hero .ai-search {
    min-height: 96px;
  }

  .living-signal-row {
    grid-auto-columns: minmax(142px, 62vw);
  }
}
/* Page overflow clamps for pilot polish. */
.main,
.view,
.section-shell,
.living-section,
.city-hero {
  max-width: 100%;
}

.city-hero {
  overflow-x: clip;
}

.intent-suggestions,
.city-intents {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.intent-suggestions::-webkit-scrollbar,
.city-intents::-webkit-scrollbar {
  display: none;
}

.carousel-shell {
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 768px) {
  .intent-suggestions,
  .city-intents {
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
  }

  .intent-suggestions button,
  .city-intents button {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

.bottom-nav {
  position: fixed !important;
  left: max(10px, calc((100vw - 1200px) / 2 + 10px)) !important;
  right: max(10px, calc((100vw - 1200px) / 2 + 10px)) !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  z-index: 70 !important;
  display: grid !important;
  /* Two mirrored button groups either side of a reserved centre gap sized
     to the TYT orb, so the orb never overlaps or shifts weight onto either
     group — the two 1fr columns are always exactly equal. */
  grid-template-columns: 1fr 78px 1fr !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  max-width: calc(100vw - 20px) !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 auto !important;
  padding: 5px !important;
  overflow: hidden !important;
  border: 1px solid rgba(52, 211, 153, 0.16) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(21, 38, 32, 0.96), rgba(15, 31, 27, 0.98)) !important;
  box-shadow: var(--shadow-premium) !important;
  backdrop-filter: blur(24px);
  /* Curved notch: a radial-gradient mask centred on the bar's own top edge.
     Only the lower half of the circle is ever inside the bar's box, so
     this reads as a smooth concave scoop cut from the top-center — the
     bar visually wraps around the TYT orb instead of the orb just sitting
     on top of a flat bar. */
  -webkit-mask-image: radial-gradient(circle 45px at 50% 0px, transparent 99%, black 100%);
  mask-image: radial-gradient(circle 45px at 50% 0px, transparent 99%, black 100%);
}

.bottom-nav-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 100%;
}

.bottom-nav-gap {
  min-width: 0;
  height: 100%;
  pointer-events: none;
}

/* TYT — the signature action, not a nav tab. Rendered outside .bottom-nav
   (which clips via overflow:hidden) so it can float above the bar rather
   than being clipped to its rectangle. Centred the same way the bar
   itself is centred, so it always lands exactly in the middle. */
.tyt-orb {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 75;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  border: 0;
  background: transparent;
}

.tyt-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.4);
  animation: tytPulseRing 2.8s ease-out infinite;
}

.tyt-orb-core {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, var(--emerald-600), var(--emerald-900) 72%);
  border: 3px solid rgba(52, 211, 153, 0.55);
  box-shadow: var(--shadow-glow), 0 18px 36px rgba(15, 31, 27, 0.45);
  animation: tytBreathe 3.6s ease-in-out infinite;
  transition: transform var(--motion-fast) var(--ease);
}

.tyt-orb:active .tyt-orb-core {
  transform: scale(0.94);
}

.tyt-orb-mark {
  color: var(--ink-inverse);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

@keyframes tytBreathe {
  0%,
  100% {
    transform: scale(1);
    box-shadow: var(--shadow-glow), 0 18px 36px rgba(15, 31, 27, 0.45);
  }

  50% {
    transform: scale(1.035);
    box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.16), 0 18px 36px rgba(15, 31, 27, 0.45);
  }
}

@keyframes tytPulseRing {
  0% {
    opacity: 0.7;
    transform: scale(0.92);
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tyt-orb-core,
  .tyt-orb-ring {
    animation: none;
  }
}

.tyt-sheet .sheet-title h2 {
  margin: 4px 0 2px;
  font-size: 1.4rem;
}

.tyt-ai-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-soft);
}

.tyt-ai-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
}

.tyt-ai-search button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--emerald-600);
  color: var(--ink-inverse);
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 430px) {
  .tyt-ai-search {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px;
  }

  .tyt-ai-search input {
    font-size: 0.88rem;
  }

  .tyt-ai-search button {
    padding: 0 12px;
    font-size: 0.86rem;
  }
}

.tyt-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tyt-action-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion) var(--ease);
}

.tyt-action-card:hover,
.tyt-action-card:active {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.tyt-action-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.14);
  color: var(--emerald-text);
  font-size: 1.05rem;
}

/* TYT modal — always the same premium dark sheet, regardless of the
   Home header's scroll-driven light/dark theme class. Previously this
   sheet had no explicit background/text colour of its own, so its text
   silently inherited `color` from whichever theme class happened to be
   on the ancestor `.app-shell` at the moment it opened (white at the top
   of Home, dark everywhere else) — white text over a near-white sheet
   background is what caused the "white-on-white" bug. Every colour here
   is explicit so scroll position and route can never change it again. */
.tyt-sheet {
  background: linear-gradient(165deg, var(--emerald-800), var(--emerald-900) 60%, #0b1512);
  color: var(--ink-inverse);
  border-color: rgba(255, 255, 255, 0.1);
}

.tyt-sheet .sheet-handle {
  background: rgba(255, 255, 255, 0.28);
}

.tyt-sheet .sheet-title .eyebrow {
  color: #6ee7b7;
}

.tyt-sheet .sheet-title p {
  color: rgba(247, 246, 243, 0.74);
}

.tyt-sheet .sheet-title button {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.tyt-sheet .tyt-ai-search {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
}

.tyt-sheet .tyt-ai-search input {
  color: #ffffff;
}

.tyt-sheet .tyt-ai-search input::placeholder {
  color: rgba(247, 246, 243, 0.5);
}

.tyt-sheet .tyt-action-card {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow: none;
}

.tyt-sheet .tyt-action-icon {
  background: rgba(52, 211, 153, 0.24);
  color: #6ee7b7;
}

/* Place-detail sheet — a light card (default .selection-sheet theme),
   opened by tapping a place card. Large photo up top, then the same
   action-row markup the compact cards use, About, similar places, and a
   quiet claim link at the very bottom. */
.place-detail-photo {
  height: 200px;
  margin: -10px -16px 14px;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}

.place-detail-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.place-detail-hours {
  color: var(--muted);
  font-size: 0.84rem;
}

.place-detail-sheet .imported-card-actions {
  margin-bottom: 10px;
}

.place-detail-section {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: 14px;
}

.place-detail-section h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.place-detail-section p {
  margin: 0;
  color: var(--muted);
}

.place-detail-similar-list {
  display: grid;
  gap: 8px;
}

.place-detail-similar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  text-align: left;
}

.place-photo-mini {
  display: block;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
}

.place-detail-similar-text {
  display: grid;
  min-width: 0;
}

.place-detail-similar-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place-detail-similar-text small {
  color: var(--muted);
}

.place-detail-footer {
  margin-top: 14px;
}

.bottom-nav button,
.bottom-nav button.is-active,
.bottom-nav button.nav-active,
.bottom-nav button.nav-inactive {
  display: grid !important;
  grid-template-rows: 22px 16px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 4px 2px !important;
  overflow: hidden !important;
  border-radius: 15px !important;
  transform: none !important;
}

.bottom-nav button.is-active,
.bottom-nav button.nav-active {
  background: var(--emerald-600) !important;
  color: var(--ink-inverse) !important;
  box-shadow: var(--shadow-glow) !important;
}

.bottom-nav .brand-icon-swap,
.bottom-nav .app-icon-frame,
.bottom-nav button .app-icon-frame {
  display: inline-grid !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  padding: 1px !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  transform: none !important;
}

.bottom-nav .app-icon,
.bottom-nav .icon {
  display: grid !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

.bottom-nav .brand-dark,
.bottom-nav .brand-light {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* The whole bar is dark emerald now (not just the active pill), so the
   Home tab's logo must stay in its light variant regardless of active state. */
.bottom-nav .nav-inactive .brand-dark,
.bottom-nav .is-active .brand-dark,
.bottom-nav .nav-active .brand-dark {
  display: none !important;
}

.bottom-nav .nav-inactive .brand-light,
.bottom-nav .is-active .brand-light,
.bottom-nav .nav-active .brand-light {
  display: block !important;
}

.bottom-nav button span:not(.icon):not(.brand-icon-swap) {
  display: block !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
  max-width: 100% !important;
  height: 16px !important;
  overflow: hidden !important;
  color: inherit;
  font-size: 0.64rem !important;
  font-weight: 780 !important;
  line-height: 16px !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.bottom-nav button.nav-inactive {
  background: transparent !important;
  color: rgba(247, 246, 243, 0.55) !important;
  box-shadow: none !important;
}

.bottom-nav button.nav-inactive .icon {
  color: rgba(247, 246, 243, 0.65) !important;
}

.bottom-nav button.nav-active .icon,
.bottom-nav button.nav-active span,
.bottom-nav button.is-active .icon,
.bottom-nav button.is-active span {
  color: var(--ink-inverse) !important;
}

.bottom-nav button.nav-active .brand-icon-swap,
.bottom-nav button.is-active .brand-icon-swap,
.bottom-nav button.nav-inactive .brand-icon-swap {
  background: transparent !important;
}

.alwen-dock {
  position: fixed !important;
  display: grid !important;
  justify-items: end !important;
  width: min(360px, calc(100vw - 24px)) !important;
  height: 56px !important;
  right: max(14px, calc((100vw - 1200px) / 2 + 14px)) !important;
  bottom: calc(94px + env(safe-area-inset-bottom)) !important;
  z-index: 60 !important;
  pointer-events: none !important;
}

.alwen-orb {
  position: relative !important;
  width: 56px !important;
  height: 56px !important;
  pointer-events: auto !important;
}

.alwen-panel {
  position: absolute !important;
  right: 0 !important;
  bottom: 66px !important;
  width: min(360px, calc(100vw - 24px)) !important;
  max-height: min(58vh, 380px);
  overflow: auto;
  pointer-events: auto !important;
}

@media (max-width: 430px) {
  .bottom-nav {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 16px) !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    gap: 2px !important;
    padding: 5px !important;
  }

  .bottom-nav-group {
    gap: 2px;
  }

  .bottom-nav button,
  .bottom-nav button.is-active,
  .bottom-nav button.nav-active,
  .bottom-nav button.nav-inactive {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }

  .bottom-nav button span:not(.icon):not(.brand-icon-swap) {
    font-size: 0.6rem !important;
  }

  .alwen-dock {
    right: 12px !important;
    bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 24px) !important;
  }
}

/* Full visual stability pass: assistant, cards, and raw-text hardening. */
body {
  -webkit-font-smoothing: antialiased;
}

.app-shell {
  padding-bottom: calc(156px + env(safe-area-inset-bottom)) !important;
}

.main {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.app-shell.has-alwen-open .main {
  padding-bottom: 300px;
}

.section-shell,
.living-section,
.marketplace-shell,
.create-shell,
.profile-panel,
.community-shell {
  min-width: 0;
  max-width: 100%;
}

.section-title,
.screen-heading {
  min-width: 0;
}

.section-title {
  gap: 12px;
}

.section-title h2,
.section-title p,
.screen-heading h1,
.screen-heading p {
  overflow-wrap: anywhere;
}

.ai-search button {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 850;
  white-space: nowrap;
}

.capability-rail,
.chip-row,
.tag-row,
.quote-list,
.editable-chip-row,
.draft-actions,
.trust-row,
.visual-trust,
.profile-badges,
.post-actions,
.alwen-mode-row,
.alwen-actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.capability-rail span,
.chip,
.tag-row span,
.quote-list span,
.editable-chip-row button,
.trust-row span,
.profile-badges span,
.post-actions button,
.post-actions .post-comment-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

.post-actions .post-comment-count {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.pulse-author-row[role="button"] {
  cursor: pointer;
}

.post-actions button.is-active {
  color: var(--emerald-text, #0f766e);
}

.capability-rail span {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 820;
  box-shadow: 0 8px 22px rgba(28, 25, 20, 0.06);
}

.alwen-dock {
  position: fixed !important;
  right: max(16px, calc((100vw - 1200px) / 2 + 16px)) !important;
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  z-index: 65 !important;
  display: grid !important;
  justify-items: end !important;
  width: min(380px, calc(100vw - 24px)) !important;
  height: 58px !important;
  pointer-events: none !important;
}

.alwen-orb {
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
  background: #111111 !important;
  color: white !important;
  box-shadow: 0 18px 48px rgba(17, 17, 17, 0.24) !important;
  pointer-events: auto !important;
}

@media (max-width: 480px) {
  .alwen-orb {
    width: 52px !important;
    height: 52px !important;
  }

  .alwen-orb .app-icon-frame {
    width: 28px !important;
    height: 28px !important;
  }
}

.alwen-orb .app-icon-frame {
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  padding: 0 !important;
}

.alwen-panel {
  position: absolute !important;
  right: 0 !important;
  bottom: 70px !important;
  display: none !important;
  width: min(380px, calc(100vw - 24px)) !important;
  max-height: min(58vh, 430px) !important;
  padding: 16px !important;
  overflow: auto !important;
  border: 1px solid var(--line) !important;
  border-radius: 28px !important;
  background: var(--surface) !important;
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(28, 25, 20, 0.22) !important;
  backdrop-filter: blur(24px);
  pointer-events: auto !important;
}

.alwen-dock.is-open {
  height: 58px !important;
}

.alwen-dock.is-open .alwen-panel {
  display: grid !important;
  gap: 12px !important;
}

.alwen-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.alwen-panel-head strong {
  display: block;
  margin-top: 2px;
  font-size: 1.08rem;
  line-height: 1.2;
}

.alwen-panel-head button {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 850;
}

.alwen-panel-intro {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.alwen-mode-row button,
.alwen-actions button {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px !important;
  background: var(--surface-soft) !important;
  color: var(--ink) !important;
  font-size: 0.86rem;
  font-weight: 840;
  box-shadow: none !important;
}

.alwen-mode-row {
  flex-wrap: nowrap !important;
}

.alwen-mode-row button {
  flex: 1 1 0;
  min-height: 52px !important;
  gap: 8px;
}

.alwen-mode-row button .icon {
  font-size: 1.35rem;
  min-width: 0;
  height: auto;
}

.alwen-actions button:first-child {
  background: #111 !important;
  color: #fff !important;
}

.alwen-quick-translate {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 20px;
  background: var(--mint);
}

.alwen-quick-translate-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--emerald-text);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.alwen-quick-translate-langs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alwen-quick-translate-langs .translation-select {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 0.82rem;
}

.alwen-quick-translate-langs .translation-swap-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  font-size: 1.1rem;
}

.alwen-quick-mic-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.alwen-quick-mic-button {
  display: grid !important;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0 !important;
  border-radius: 999px;
  background: var(--emerald-glow, #34d399);
  color: #06231a;
  font-size: 1.3rem;
  box-shadow: var(--shadow-glow);
}

.alwen-quick-mic-button.is-recording {
  background: #e74c3c;
  color: #fff;
  animation: translationRecordPulse 1.1s ease-in-out infinite;
}

.alwen-quick-translate-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.alwen-quick-translate-source {
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.86rem;
  font-style: italic;
}

.alwen-quick-translate-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.alwen-quick-translate-target {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 700;
}

.alwen-quick-translate-result .translation-speak-button {
  flex: 0 0 auto;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  font-size: 1.15rem;
}

.alwen-quick-translate-open {
  width: 100%;
  padding: 10px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: var(--emerald-text) !important;
  font-size: 0.84rem;
  font-weight: 800;
  text-align: center;
}

.living-rail,
.community-preview,
.visual-card-grid,
.food-grid,
.pro-strip,
.carousel-track {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  padding-bottom: 16px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.living-rail > *,
.community-preview > *,
.visual-card-grid > *,
.food-grid > *,
.pro-strip > *,
.carousel-track > * {
  scroll-snap-align: start;
}

.live-card,
.market-mini-card,
.earn-card,
.visual-card,
.food-card,
.social-post-card,
.market-card,
.visual-market-card,
.pro-card,
.need-help-card,
.alwen-card,
.reputation-card,
.profile-list article,
.profile-list button,
.achievement-grid article,
.review-grid article,
.request-card,
.content-card,
.business-card,
.offer-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.live-card,
.market-mini-card {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 8px;
  min-height: 0;
  padding: 12px;
}

.live-card .card-photo,
.market-mini-card .card-photo,
.visual-market-card .market-photo,
.social-post-card .pulse-photo,
.visual-card-image,
.food-card-image {
  width: 100%;
  background-position: center;
  background-size: cover;
}

.live-card .card-photo,
.market-mini-card .card-photo {
  min-height: 168px;
  aspect-ratio: 1.35 / 1;
}

.visual-market-card .market-photo,
.visual-market-card.is-tall .market-photo,
.visual-market-card.is-wide .market-photo {
  min-height: 0 !important;
  aspect-ratio: 1.12 / 1;
}

.market-card-body,
.pulse-content,
.earn-body,
.alwen-create-copy,
.conversation,
.draft-grid article,
.reputation-grid article,
.signal-grid article,
.profile-list article,
.achievement-grid article,
.review-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.market-card-body {
  padding: var(--sp-16) !important;
}

.seller-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.seller-row div,
.seller-row strong,
.seller-row span,
.market-card-body h3,
.market-card-body p,
.pulse-content h3,
.pulse-content p,
.profile-list strong,
.profile-list span,
.draft-grid strong,
.draft-grid span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.market-actions,
.draft-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.market-actions button,
.need-help-card button,
.profile-list button,
.create-grid button {
  color: var(--ink);
}

.market-actions button:last-child,
.need-help-card button,
.profile-list button {
  background: #111 !important;
  color: #fff !important;
}

.create-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 14px !important;
}

.create-grid button {
  display: grid !important;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-height: 164px !important;
  padding: 16px !important;
}

.create-grid button strong,
.create-grid button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.reputation-grid,
.signal-grid,
.profile-list,
.draft-grid,
.score-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px !important;
}

.reputation-grid article,
.signal-grid article,
.profile-list article,
.draft-grid article,
.score-grid article {
  align-content: start;
  padding: 16px !important;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.88);
}

/* Icon badge leads every stat/reputation/generated-profile tile — wins
   over the plain `article span` caption styling above via the extra
   class, same 42px circle treatment as .achievement-grid so every "here's
   a fact about you" card family in the app reads as one consistent
   system instead of some tiles having icons and others being bare text. */
.draft-grid article span.tile-icon,
.reputation-grid article span.tile-icon,
.signal-grid article span.tile-icon,
.score-grid article span.tile-icon,
.contribution-card span.tile-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
  border-radius: 999px;
  background: #111;
  color: white;
  font-size: 0.85rem;
  text-transform: none;
}

.reputation-grid article span,
.signal-grid article span,
.profile-list article span,
.draft-grid article span,
.score-grid article span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.25;
  text-transform: capitalize;
}

.reputation-grid article strong,
.signal-grid article strong,
.profile-list article strong,
.draft-grid article strong,
.score-grid article strong {
  color: var(--ink);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.25;
}

.profile-list button {
  min-height: 56px;
  border-radius: 18px;
  font-weight: 850;
}

/* Chat-style transcript — a distinct avatar + speaker label per turn,
   with "You" flipped to the right and mint-tinted so the two voices
   read apart at a glance instead of identical stacked paragraphs. */
.conversation p {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

.conversation-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #111;
  color: white;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.conversation-bubble {
  display: grid;
  gap: 2px;
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}

.conversation-bubble strong {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.conversation-you {
  flex-direction: row-reverse;
}

.conversation-you .conversation-avatar {
  background: var(--mint);
  color: #06341f;
}

.conversation-you .conversation-bubble {
  margin-left: auto;
  background: rgba(52, 211, 153, 0.16);
  text-align: right;
}

/* Vertical tile layout unconditionally (not just on narrow viewports) —
   identity block on top spanning both columns, Book/Contact as an even
   two-up row underneath. This is what actually holds up when .pro-list
   packs several cards per row (see minmax() below): the old single-row
   layout (identity | Book | Contact all side by side) only ever worked
   at full card width and visibly broke — overlapping text, a button
   sitting on top of the avatar — as soon as cards got narrower than
   roughly one-per-row. */
.pro-card {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 10px;
  padding: 14px !important;
}

.pro-card-identity {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  cursor: pointer;
}

.pro-card-identity > div:nth-child(2) {
  min-width: 0;
}

.pro-card button {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 840;
}

.pro-card button + button {
  background: var(--surface-soft);
  color: var(--ink);
}

@media (min-width: 1280px) {
  .app-shell.has-alwen-open {
    width: min(100%, 1120px);
  }
}

@media (max-width: 900px) {
  .app-shell.has-alwen-open .main {
    padding-bottom: 420px;
  }
}

@media (max-width: 640px) {
  .app-shell {
    padding-inline: 10px;
  }

  .app-shell.is-home-shell .main {
    margin-top: -72px;
  }

  .app-shell.has-alwen-open .main {
    padding-bottom: 430px;
  }

  .section-title {
    align-items: start;
  }

  .ai-search,
  .ai-search.is-large {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ai-search button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .create-grid {
    grid-template-columns: 1fr !important;
  }

  .market-actions,
  .draft-actions {
    grid-template-columns: 1fr;
  }

  .reputation-grid,
  .signal-grid,
  .profile-list {
    grid-template-columns: 1fr;
  }

  .alwen-dock {
    right: 16px !important;
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 32px) !important;
  }

  .alwen-panel {
    right: 0 !important;
    bottom: 68px !important;
    width: calc(100vw - 32px) !important;
    max-height: min(54vh, 420px) !important;
    border-radius: 24px !important;
  }

  .bottom-nav {
    z-index: 80 !important;
  }
}

/* Create page command centre polish. */
.create-shell {
  gap: 18px;
}

.create-command-centre {
  display: grid;
  gap: 14px;
  padding: 6px 0 2px;
}

.create-primary-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.create-primary-action,
.create-secondary-action {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(20, 20, 20, 0.08);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  text-align: left;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.create-primary-action {
  gap: 12px;
  min-height: 118px;
  padding: 16px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.72)),
    radial-gradient(circle at 96% 8%, rgba(223, 244, 232, 0.62), transparent 9rem);
  box-shadow: 0 14px 40px rgba(28, 25, 20, 0.08);
}

.create-primary-action:nth-child(2) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.74)),
    radial-gradient(circle at 96% 8%, rgba(220, 236, 255, 0.72), transparent 9rem);
}

.create-primary-action:nth-child(3) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.74)),
    radial-gradient(circle at 96% 8%, rgba(245, 223, 156, 0.58), transparent 9rem);
}

.create-secondary-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(20, 20, 20, 0.07);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.46);
}

.create-secondary-action {
  gap: 8px;
  min-height: 58px;
  padding: 10px;
  border-color: transparent;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

.create-secondary-action .create-action-copy small {
  display: none;
}

.create-primary-action:hover,
.create-secondary-action:hover {
  transform: translateY(-1px);
  border-color: rgba(20, 20, 20, 0.13);
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 34px rgba(28, 25, 20, 0.09);
}

.create-primary-action:focus-visible,
.create-secondary-action:focus-visible {
  outline: 3px solid rgba(10, 132, 255, 0.28);
  outline-offset: 2px;
}

.create-command-centre .create-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 12px;
  background: #111;
  color: white;
  font-size: 0.95rem;
  line-height: 1;
}

.create-secondary-action .create-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(20, 20, 20, 0.07);
  color: var(--ink);
  font-size: 0.86rem;
}

.create-action-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.create-action-copy strong {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.18;
}

.create-action-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.create-chevron {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.05);
  color: var(--muted);
  font-size: 0.78rem;
}

.create-primary-action .create-chevron {
  align-self: start;
}

@media (max-width: 980px) {
  .create-primary-actions {
    grid-template-columns: 1fr;
  }

  .create-primary-action {
    min-height: 82px;
  }

  .create-secondary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .create-command-centre {
    gap: 8px;
    padding-top: 2px;
  }

  .create-primary-actions,
  .create-secondary-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    border: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    overflow: hidden;
  }

  .create-secondary-actions {
    margin-top: 8px;
  }

  .create-primary-action,
  .create-secondary-action {
    min-height: 72px;
    padding: 12px 14px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  .create-primary-action + .create-primary-action,
  .create-secondary-action + .create-secondary-action {
    border-top: 1px solid rgba(20, 20, 20, 0.07);
  }

  .create-primary-action:hover,
  .create-secondary-action:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.7) !important;
  }

  .create-command-centre .create-icon,
  .create-secondary-action .create-icon {
    width: 32px;
    height: 32px;
    border-radius: 11px;
  }

  .create-action-copy strong {
    font-size: 0.96rem;
  }

  .create-action-copy small {
    display: -webkit-box;
    -webkit-line-clamp: 1;
  }
}

/* Mobile-first overflow guard: no screen should pan sideways. */
html,
body,
#app {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-width: 0;
}

#app {
  position: relative;
  isolation: isolate;
}

.app-shell {
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)) !important;
}

@media (min-width: 481px) {
  .app-shell {
    padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)) !important;
  }
}

@media (min-width: 1025px) {
  .app-shell {
    padding-inline: max(32px, env(safe-area-inset-left)) max(32px, env(safe-area-inset-right)) !important;
  }
}

.app-shell,
.main,
.view,
.section-shell,
.living-section,
.city-hero,
.app-top,
.screen-heading,
.section-title,
.carousel-shell,
.carousel-track,
.living-rail,
.community-preview,
.visual-card-grid,
.food-grid,
.pro-strip,
.intent-suggestions,
.city-intents,
.living-signal-row,
.ai-search {
  min-width: 0 !important;
  max-width: 100% !important;
}

.city-hero {
  width: 100% !important;
  overflow: hidden;
  padding-inline: clamp(16px, 5vw, 48px) !important;
}

.city-hero > *,
.city-hero-copy,
.city-hero h1,
.city-hero p {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ai-search,
.ai-search.is-large,
.city-hero .ai-search {
  width: 100% !important;
  max-width: 760px !important;
  justify-self: stretch;
}

.intent-suggestions,
.city-intents,
.chip-row,
.mode-tabs {
  width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  padding-inline: 2px 24px;
  scroll-padding-inline: 2px 24px;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.intent-suggestions button,
.city-intents button,
.chip-row button,
.mode-tabs button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.chip-row button.is-selected {
  border-color: rgba(52, 211, 153, 0.5);
  background: var(--mint);
  color: var(--emerald-text);
}

.living-signal-row {
  width: 100%;
}

.carousel-shell {
  overflow: hidden;
}

.carousel-track,
.carousel-track.living-rail,
.carousel-track.visual-card-grid,
.carousel-track.food-grid,
.carousel-track.pro-strip,
.carousel-track.community-preview,
.living-rail,
.community-preview,
.visual-card-grid,
.food-grid,
.pro-strip {
  width: 100%;
  overflow-x: auto !important;
  padding-inline: 0 16px !important;
  scroll-padding-inline: 0 16px !important;
}

.carousel-track > *,
.living-rail > *,
.community-preview > *,
.visual-card-grid > *,
.food-grid > *,
.pro-strip > * {
  max-width: 100%;
}

@media (max-width: 480px) {
  .app-shell {
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)) !important;
  }

  .app-top {
    margin-inline: 0 !important;
  }

  .city-hero {
    border-radius: 24px !important;
    padding: 112px 16px 24px !important;
  }

  .city-hero h1 {
    font-size: clamp(2.05rem, 11vw, 3.25rem) !important;
  }

  .ai-search,
  .ai-search.is-large,
  .city-hero .ai-search {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .ai-search button {
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0;
  }

  .living-signal-row {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 46%);
    grid-template-columns: none !important;
    overflow-x: auto;
    padding-inline: 0 16px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .living-signal-row article {
    scroll-snap-align: start;
  }

  .carousel-track,
  .carousel-track.living-rail,
  .carousel-track.visual-card-grid,
  .carousel-track.food-grid,
  .carousel-track.pro-strip,
  .carousel-track.community-preview,
  .living-rail,
  .community-preview,
  .visual-card-grid,
  .food-grid,
  .pro-strip {
    grid-auto-columns: minmax(236px, calc(100vw - 64px)) !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .living-signal-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .carousel-track,
  .carousel-track.living-rail,
  .carousel-track.visual-card-grid,
  .carousel-track.food-grid,
  .carousel-track.pro-strip,
  .carousel-track.community-preview,
  .living-rail,
  .community-preview,
  .visual-card-grid,
  .food-grid,
  .pro-strip {
    grid-auto-columns: minmax(260px, 52vw) !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .carousel-track,
  .carousel-track.living-rail,
  .carousel-track.visual-card-grid,
  .carousel-track.food-grid,
  .carousel-track.pro-strip,
  .carousel-track.community-preview {
    padding-inline: 48px !important;
    scroll-padding-inline: 48px !important;
  }
}

/* Narrow-phone correction: keep the immersive hero inside the visible canvas. */
.main,
.view {
  grid-template-columns: minmax(0, 1fr) !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  overflow-x: clip;
}

.city-hero,
.section-shell,
.living-section {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  justify-self: stretch !important;
}

@media (max-width: 480px) {
  .city-hero {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    inline-size: calc(100vw - 32px) !important;
    max-inline-size: calc(100vw - 32px) !important;
    justify-self: center !important;
    margin-inline: auto !important;
    padding-inline: 16px !important;
  }

  .city-hero .ai-search,
  .city-intents,
  .living-signal-row {
    width: 100% !important;
    max-width: 100% !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    justify-self: stretch !important;
  }
}

/* QA polish: capability chips should read and wrap as individual items. */
.capability-rail {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 8px !important;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.capability-rail span {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: nowrap;
}

/* Fixed-tone icon contexts: .alwen-orb's background is an unconditional
   dark emerald circle, which doesn't change with header scroll state, so
   its icon choice must be pinned regardless of which header-theme class
   happens to be an ancestor at the time. */
.alwen-orb .brand-dark {
  display: none !important;
}

.alwen-orb .brand-light {
  display: block !important;
}

.alwen-mini .brand-dark {
  display: none !important;
}

.alwen-mini .brand-light {
  display: block !important;
}

/* Header brand lockup — the wordmark SVG is the only mark rendered here
   (no standalone icon), sized to double as hero-level branding on the
   transparent Home header. Aspect ratio comes from the SVG itself via
   height: auto, so it is never stretched or cropped. */
.brand-wordmark-swap {
  height: auto;
}

.brand-main .brand-wordmark {
  width: clamp(148px, 42vw, 176px);
  height: auto;
  max-width: none;
  max-height: none;
}

.header-dark .brand-main .brand-wordmark-dark {
  display: none;
}

.header-dark .brand-main .brand-wordmark-light {
  display: inline-block;
}

.header-light .brand-main .brand-wordmark-dark {
  display: inline-block;
}

.header-light .brand-main .brand-wordmark-light {
  display: none;
}

.brand-city {
  margin-left: 0;
  font-size: 12px;
  font-weight: 550;
}

/* ============================================================
   SplashScreen — one-time brand moment on first load. The
   wordmark's own first/last "a" groups are tagged and moved by
   main.js (prepareSplashLetters); every visual here builds on the
   official SVG assets already in the DOM, never recreated text.
   ============================================================ */
#splash-root {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 42%, var(--emerald-600), var(--emerald-900) 78%);
  opacity: 1;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

#splash-root.splash-exit {
  opacity: 0;
  pointer-events: none;
}

.splash-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(70vw, 320px);
}

.splash-glow,
.splash-wordmark,
.splash-icon {
  grid-area: 1 / 1;
}

.splash-glow {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, var(--emerald-glow), transparent 68%);
  opacity: 0;
  pointer-events: none;
}

.splash-wordmark,
.splash-icon {
  display: grid;
  place-items: center;
  width: 100%;
}

.splash-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.splash-wordmark {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.splash-stage.is-visible .splash-wordmark {
  opacity: 1;
  transform: scale(1);
}

.splash-mid {
  transition: opacity 320ms ease;
}

.splash-stage.is-converging .splash-mid {
  opacity: 0;
}

.splash-a-first,
.splash-a-last {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.splash-stage.is-converging .splash-a-first,
.splash-stage.is-converging .splash-a-last {
  transform: translateX(var(--dx, 0px)) scale(1.06);
}

.splash-stage.is-handoff .splash-wordmark {
  transition: opacity 200ms ease;
  opacity: 0;
}

.splash-icon-img {
  width: 34%;
  max-width: 128px;
  height: auto;
}

.splash-icon {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.splash-stage.is-handoff .splash-icon {
  opacity: 1;
  transform: scale(1);
}

.splash-stage.is-alive .splash-icon {
  animation: splashBlink 450ms ease-in-out;
}

.splash-stage.is-alive .splash-glow {
  opacity: 1;
  animation: splashGlowPulse 800ms ease-out;
}

@keyframes splashBlink {
  0%,
  100% {
    transform: scale(1);
  }
  38% {
    transform: scaleY(0.16) scaleX(1.03);
  }
  55% {
    transform: scaleY(0.16) scaleX(1.03);
  }
  80% {
    transform: scale(1.04);
  }
}

@keyframes splashGlowPulse {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  45% {
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

/* Reduced motion: no sliding, scaling, or blinking — a brief, calm fade. */
.splash-stage-reduced .splash-icon-img {
  width: 30%;
  max-width: 96px;
}

.splash-stage-reduced .splash-icon {
  opacity: 0;
  transform: none;
  transition: opacity 220ms ease;
}

.splash-stage-reduced.is-visible .splash-icon {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #splash-root {
    transition-duration: 220ms;
  }
}

/* ============================================================
   Real city data — imported place cards (Explore directory, Ops
   import runner) and compact carousel cards (Home sections). Every
   card always has a real, loadable photo: a real source photo when
   available, otherwise a real category-representative photo (never a
   blank/placeholder graphic). The category-icon tile is only ever an
   invisible safety net underneath, for the rare case a photo URL
   fails to load at runtime.
   ============================================================ */
.imported-card {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.imported-card > div {
  display: grid;
  gap: 8px;
}

.imported-card h3 {
  margin: 0;
}

.imported-card > p {
  margin: 0;
}

/* `.imported-card > div { display: grid }` above outranks the plain
   `.imported-card-actions` class on specificity, which was silently
   forcing this (and the footer below) into a single-column grid and
   stacking every button full-width regardless of flex-basis. Scoping
   with the `.imported-card >` parent restores the intended flex row. */
.imported-card > .imported-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.imported-card-actions .directions-btn,
.imported-card-actions button {
  flex: 1 1 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--radius-sm, 8px);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.imported-card-actions .directions-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.imported-card-actions .waze-btn {
  border-color: rgba(51, 204, 255, 0.4);
  background: rgba(51, 204, 255, 0.1);
  color: #0a8fbf;
}

.imported-card-actions button {
  background: #111111;
  color: #ffffff;
}

.imported-card-actions-secondary .directions-btn,
.imported-card-actions-secondary button {
  flex: 0 1 auto;
  min-width: 100px;
}

/* Tighter action buttons inside the directory grid tile specifically —
   the place-detail sheet (full-width, one place at a time) keeps the
   roomier default sizing above. */
.imported-card .imported-card-actions .directions-btn,
.imported-card .imported-card-actions button {
  flex: 1 1 90px;
  min-height: 38px;
  padding: 0 10px;
  font-size: 0.82rem;
}

.hours-chip {
  flex: 1 1 auto;
  min-height: 42px;
  white-space: normal;
  text-align: left;
}

.open-now-badge {
  background: rgba(52, 211, 153, 0.16);
  color: var(--emerald-text);
}

.imported-card-photo {
  margin: -16px -16px 0;
  cursor: pointer;
  position: relative;
}

/* Category/open-status/distance/rating badges float directly on the
   photo (top and bottom rows) instead of a separate row below it —
   frees up vertical space so more cards fit on screen and reads like
   the photo-first cards in Airbnb/Google Maps rather than a plain
   text list with a picture bolted on top. */
.place-photo-overlay {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  flex-wrap: wrap;
  pointer-events: none;
}

.place-photo-overlay-top {
  top: 0;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0));
}

.place-photo-overlay-bottom {
  bottom: 0;
  justify-content: flex-start;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

/* Fixed dark text, not var(--ink) — this badge's white/frosted
   background is intentionally the same over a photo in both themes, so
   the text must stay dark in both too. var(--ink) flips to near-white
   in dark mode, which made every one of these badges unreadable
   (white text on a white pill). */
.place-photo-overlay .badge {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.92);
  color: #151515;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}

.place-photo-overlay .open-now-badge {
  background: rgba(52, 211, 153, 0.94);
  color: #06341f;
}

.badge-rating,
.photo-count-badge {
  gap: 4px;
}

.imported-card > div[data-sheet] {
  cursor: pointer;
}

/* Footer row: quiet source metadata + save/share icons + the subtle
   claim link. Deliberately NOT styled like the primary action buttons —
   claiming a business is a secondary path, not the card's headline.
   Scoped with `.imported-card >` for the same specificity reason as
   .imported-card-actions above — otherwise `.imported-card > div`
   forces this back into a single-column grid. */
.imported-card > .imported-card-footer,
.place-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.imported-source-meta {
  color: var(--muted);
  font-size: 0.74rem;
}

.place-footer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-action {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}

.icon-action.is-active {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(52, 211, 153, 0.14);
  color: var(--emerald-text);
}

.claim-subtle {
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.photo-strip {
  height: 168px;
  border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
  overflow: hidden;
}

.imported-card-photo .place-photo {
  height: 190px;
  border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
  overflow: hidden;
}

.place-photo {
  position: relative;
  width: 100%;
  height: 100%;
}

.place-photo .category-placeholder {
  position: absolute;
  inset: 0;
}

.place-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Brand logos aren't a scene to fill the frame with — cropping them via
   object-fit:cover cuts off wordmarks and looks broken. Show the full
   mark, centred, on a clean white plate instead (logos are designed for
   light backgrounds regardless of app theme). */
.place-photo-logo {
  background: #ffffff;
}

/* The category-placeholder tint sits under the logo image at the same
   inset:0 position; since object-fit:contain leaves transparent padding
   around the logo, that tint would otherwise bleed through instead of
   showing the white plate. Suppress it — a logo URL always loads. */
.place-photo-logo .category-placeholder {
  display: none;
}

.place-photo-logo img {
  object-fit: contain;
  padding: 18%;
  box-sizing: border-box;
}

.category-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 2.2rem;
  color: rgba(17, 17, 17, 0.68);
}

.category-placeholder-food-drink { background: #f5df9c; }
.category-placeholder-nightlife { background: #e3d3f5; }
.category-placeholder-groceries { background: #dff4e8; }
.category-placeholder-pharmacy { background: #ffd9d3; }
.category-placeholder-healthcare { background: #d3ecec; }
.category-placeholder-hotels { background: #f2e2c8; }
.category-placeholder-shops { background: #dcecff; }
.category-placeholder-beauty-wellness { background: #ffe0ef; }
.category-placeholder-transport { background: #e0e6ef; }
.category-placeholder-public-services { background: #e2ece0; }
.category-placeholder-attractions { background: #ffe9b8; }
.category-placeholder-parks { background: #d7ecd1; }
.category-placeholder-finance { background: #eaf1c8; }
.category-placeholder-education { background: #dee0f7; }
.category-placeholder-automobile { background: #dbe2e6; }
.category-placeholder-default,
.category-placeholder-uncategorised { background: var(--surface-soft); }

.category-chip {
  text-transform: none !important;
}

.badge-distance {
  background: rgba(52, 211, 153, 0.14);
  color: var(--emerald-text);
}

.badge-open-data {
  background: rgba(17, 17, 17, 0.06);
  color: var(--muted);
}

.imported-address {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.86rem;
}

.imported-address .icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.place-pin-icon svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.imported-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
}

.imported-hours,
.imported-contact {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-caption, 0.82rem);
}

.imported-contact a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.imported-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--muted);
  font-size: 0.76rem;
}

.claim-status {
  font-weight: 800;
}

.explore-category-row {
  padding-bottom: 4px;
  overflow-x: auto;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.explore-category-row::-webkit-scrollbar {
  display: none;
}

.explore-category-row button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  white-space: nowrap;
}

.explore-category-row button.is-selected {
  border-color: transparent;
  background: #111111;
  color: #ffffff;
}

/* Second-tier "pick and choose" filters (cuisine, star rating) nested
   under the primary category row — visually lighter/smaller so it
   reads as a refinement of the row above it, not a second equal-weight
   filter, and uses the emerald accent instead of black-on-selected to
   stay distinguishable from the primary row at a glance. */
.explore-subfilter-row {
  margin-top: -6px;
}

.explore-subfilter-row button {
  min-height: 30px;
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 650;
  background: var(--surface-soft);
}

.explore-subfilter-row button.is-selected {
  background: var(--emerald-text);
  color: #ffffff;
}

.explore-subfilter-row button .icon {
  min-width: 12px;
  height: 14px;
  font-size: 0.7rem;
}

/* Compact "real place" carousel card — Home sections fed by real
   imported city data (src/data/seedCityData.js). Photo-on-top,
   white-body tile language shared with .market-mini-card (Trending
   Marketplace): the photo is a fixed-height header, name/category/
   status sit in their own padded box below it on the card surface,
   never overlaid on the image itself. */
.real-place-card {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-top: 3px solid rgba(20, 20, 20, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(28, 25, 20, 0.08);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.real-place-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(28, 25, 20, 0.14);
}

/* A thin top accent in the card's own category colour — the same palette
   already used for the photo-placeholder tint — so a whole rail reads as
   one category at a glance even before the icon/text registers. */
.real-place-card:has(.category-placeholder-food-drink) { border-top-color: #e0b400; }
.real-place-card:has(.category-placeholder-nightlife) { border-top-color: #9b6fd6; }
.real-place-card:has(.category-placeholder-groceries) { border-top-color: #34d399; }
.real-place-card:has(.category-placeholder-pharmacy) { border-top-color: #ef8a7a; }
.real-place-card:has(.category-placeholder-healthcare) { border-top-color: #4fb3b3; }
.real-place-card:has(.category-placeholder-hotels) { border-top-color: #c99a4a; }
.real-place-card:has(.category-placeholder-shops) { border-top-color: #5b93e0; }
.real-place-card:has(.category-placeholder-beauty-wellness) { border-top-color: #e26fa8; }
.real-place-card:has(.category-placeholder-transport) { border-top-color: #7b8ba3; }
.real-place-card:has(.category-placeholder-public-services) { border-top-color: #6b9e64; }
.real-place-card:has(.category-placeholder-attractions) { border-top-color: #e0a83a; }
.real-place-card:has(.category-placeholder-parks) { border-top-color: #5fa855; }
.real-place-card:has(.category-placeholder-finance) { border-top-color: #a8c14a; }
.real-place-card:has(.category-placeholder-automobile) { border-top-color: #6f838f; }

.real-place-photo {
  position: relative;
  height: 132px;
  margin: -10px -10px 10px;
  border-radius: 18px 18px 14px 14px;
  overflow: hidden;
}

/* Small category "seal" over the photo corner — a quick visual
   identifier you can scan across a whole grid of cards without
   reading any text, on top of the text badge below the photo. */
.real-place-category-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #151515;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.real-place-card > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.real-place-card h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}

.real-place-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.real-place-card .open-now {
  color: var(--emerald-text);
  font-weight: 700;
}

.real-place-card .real-place-specialty {
  color: var(--ink);
  font-weight: 700;
}

/* Cover-Flow 3D scroller — a real scrollable track (touch/trackpad/
   scrollbar all work); bindCoverflow() in main.js applies each slide's
   rotateY/translateZ/scale based on live scroll position every frame. The
   perspective lives on the viewport so every slide shares one vanishing
   point instead of tilting around its own center.
   Edge-to-edge breakout: .coverflow-viewport sits inside several padded/
   centered containers (.app-shell max-width 1200px, .section-shell,
   .living-section). `width: 100vw` + `margin-inline: calc(50% - 50vw)` is
   the standard "full-bleed" trick — it cancels out however much this
   element is inset from the viewport's own edges, however many nested
   padding layers cause that inset, without needing to know their exact
   px values (those change across three separate breakpoints elsewhere in
   this file). .app-shell has overflow-x: clip, so the bleed is naturally
   capped at the app frame's own edge rather than spilling onto the page
   background around it on wide desktop viewports — on mobile, where the
   app frame IS the viewport, this reaches the true screen edge. */
.coverflow-viewport {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  perspective: 1400px;
}

.coverflow-viewport::-webkit-scrollbar {
  display: none;
}

.coverflow-track {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 24px 20px;
  transform-style: preserve-3d;
}

.coverflow-slide {
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: center;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
}

.coverflow-slide .real-place-card {
  width: 300px;
  height: 100%;
}

.coverflow-slide .real-place-photo {
  height: 190px;
}

.coverflow-slide.is-active {
  z-index: 100 !important;
}

.coverflow-slide.is-active .real-place-card {
  box-shadow: 0 32px 64px rgba(15, 31, 27, 0.28);
}

@media (max-width: 900px) {
  .coverflow-slide,
  .coverflow-slide .real-place-card {
    width: 250px;
  }

  .coverflow-slide .real-place-photo {
    height: 160px;
  }
}

@media (max-width: 560px) {
  .coverflow-track {
    gap: 14px;
    padding-inline: 16px;
  }

  .coverflow-slide,
  .coverflow-slide .real-place-card {
    width: 76vw;
  }

  .coverflow-slide .real-place-photo {
    height: 150px;
  }
}

.import-controls button.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}

.explore-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-caption, 0.82rem);
  color: var(--muted);
  font-weight: 700;
}

.explore-sort select {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
}

.tranche-summary {
  display: grid;
  gap: 8px;
}

.tranche-row {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
}

.tranche-row-category {
  font-weight: 800;
}

.tranche-row-stats {
  color: var(--muted);
  font-size: 0.82rem;
}

.tranche-row-quality {
  font-size: 0.76rem;
}

.claim-file-label {
  display: grid;
  gap: 4px;
  font-size: var(--text-caption, 0.82rem);
  color: var(--muted);
  font-weight: 700;
}

.claim-file-label input {
  font-weight: 400;
  color: var(--ink);
}

.claim-form,
.auth-form {
  display: grid;
  gap: 18px;
}

.claim-form input:not([type="file"]),
.claim-form select,
.claim-form textarea,
.auth-form input:not([type="checkbox"]),
.auth-form select,
.auth-form textarea {
  min-height: var(--control-h-md, 44px);
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  font-size: 0.94rem;
}

.claim-form textarea,
.auth-form textarea {
  min-height: 96px;
  padding: 12px 14px;
}

.auth-field {
  display: grid;
  gap: 6px;
}

.auth-field label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.auth-field-error input {
  border-color: #c0392b;
}

.auth-input-row {
  position: relative;
  display: grid;
}

.auth-form .auth-input-row input {
  width: 100%;
  padding-right: 64px;
}

.auth-toggle-visibility {
  position: absolute;
  top: 0;
  right: 4px;
  bottom: 0;
  padding: 0 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

/* ============================================================
   Authentication, onboarding, and settings screens.
   ============================================================ */

.auth-shell {
  display: grid;
  justify-items: center;
  padding-top: var(--space-3, 24px);
}

.auth-card {
  display: grid;
  gap: 16px;
  width: min(100%, 440px);
  padding: var(--space-4, 32px);
  border-radius: var(--radius-xl, 28px);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.auth-card h1 {
  margin: 0;
  font-size: var(--text-h2, 1.5rem);
}

.auth-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.auth-error {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(192, 57, 43, 0.3);
  border-radius: var(--radius-sm, 8px);
  background: rgba(192, 57, 43, 0.08);
  color: #c0392b;
  font-size: 0.86rem;
  font-weight: 700;
}

.auth-notice {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(35, 134, 90, 0.3);
  border-radius: var(--radius-sm, 8px);
  background: rgba(35, 134, 90, 0.08);
  color: #1c7a4d;
  font-size: 0.86rem;
  font-weight: 700;
}

.auth-primary-button {
  min-height: var(--control-h-lg, 52px);
  border-radius: 999px;
  background: #111;
  color: white;
  font-weight: 800;
}

.auth-link {
  justify-self: center;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-footer-line {
  margin: 0;
  justify-self: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.auth-footer-line .auth-link {
  display: inline;
  padding: 0;
  text-decoration: underline;
}

.auth-oauth-row {
  display: grid;
  gap: 10px;
}

.auth-oauth-button {
  min-height: var(--control-h-lg, 52px);
  border-radius: 999px;
  font-weight: 800;
}

.auth-oauth-apple {
  background: #111;
  color: white;
}

.auth-oauth-google {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}

.auth-divider {
  position: relative;
  display: grid;
  place-items: center;
  height: 1px;
  margin: 2px 0;
  background: var(--line);
}

.auth-divider span {
  padding: 0 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.auth-tab-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-soft);
}

.auth-tab-row button {
  min-height: 38px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
}

.auth-tab-row button.is-active {
  background: #111;
  color: white;
}

.auth-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--muted);
}

.auth-checkbox-row input {
  margin-top: 3px;
}

.auth-code-input {
  letter-spacing: 0.5em;
  font-size: 1.3rem;
  font-weight: 800;
  text-align: center;
}

.auth-dev-hint {
  margin: 0;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm, 8px);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.auth-avatar-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.auth-avatar-option {
  width: 56px;
  height: 56px;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
}

.auth-avatar-option.is-selected {
  border-color: var(--emerald-600, #16a34a);
}

.auth-avatar-option img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

.auth-avatar-upload {
  display: grid;
  place-items: center;
  border: 2px dashed var(--border-strong, #9ca3af);
  cursor: pointer;
  color: var(--muted);
  font-size: 1.1rem;
}

.auth-avatar-upload:hover {
  border-color: var(--emerald-600, #16a34a);
  color: var(--emerald-600, #16a34a);
}

.header-avatar.header-avatar-guest {
  display: grid;
  place-items: center;
  background: var(--surface-soft);
  color: var(--muted);
}

.profile-settings-button {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: white;
  backdrop-filter: blur(12px);
}

.settings-shell {
  display: grid;
  gap: var(--space-3, 24px);
}

.settings-section {
  display: grid;
  gap: 10px;
  padding: var(--space-2, 16px);
  border-radius: var(--radius-lg, 22px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.settings-section h3 {
  margin: 0;
  font-size: var(--text-title, 1.05rem);
}

.settings-section-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.settings-account-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-account-row img {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
}

.settings-account-row div {
  display: grid;
  gap: 2px;
}

.settings-account-row span {
  color: var(--muted);
  font-size: 0.84rem;
}

.settings-row-button {
  justify-self: start;
  padding: 0;
  background: transparent;
  color: var(--emerald-text, #0f766e);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.92rem;
}

.settings-toggle-row input {
  width: 20px;
  height: 20px;
}

.settings-legal-item summary {
  cursor: pointer;
  font-weight: 700;
}

.settings-legal-item p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.settings-signout-button {
  min-height: var(--control-h-md, 44px);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 800;
}

.settings-danger-zone {
  border: 1px solid rgba(192, 57, 43, 0.2);
}

.settings-danger-button {
  justify-self: start;
  padding: 0;
  background: transparent;
  color: #c0392b;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.settings-danger-actions {
  display: flex;
  gap: 10px;
}

.settings-danger-actions .settings-signout-button {
  background: #c0392b;
  color: white;
}

.settings-version {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
}

.business-dashboard-shell {
  display: grid;
  gap: var(--space-3, 24px);
}

.business-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.business-stats-grid article {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: var(--radius-md, 16px);
  background: var(--surface-soft);
}

.business-stats-grid strong {
  font-size: 1.6rem;
}

.business-stats-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.business-photo-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.business-photo-preview {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-md, 16px);
  background-position: center;
  background-size: cover;
  background-color: var(--surface-soft);
  flex-shrink: 0;
}

.profile-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 10px;
}

.profile-quick-action {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: var(--radius-md, 16px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.profile-quick-action-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--surface-soft);
}

.my-business-list {
  display: grid;
  gap: 8px;
}

.my-business-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 16px);
  background: var(--surface);
  text-align: left;
}

.my-business-photo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm, 8px);
  background-position: center;
  background-size: cover;
  background-color: var(--surface-soft);
  flex-shrink: 0;
}

.my-business-row div {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.my-business-row span {
  color: var(--muted);
  font-size: 0.82rem;
}

.onboarding-page {
  display: grid;
  min-height: 100vh;
  align-content: center;
  padding: var(--space-3, 24px) 18px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg);
}

.onboarding-shell {
  padding-top: 0;
}

.onboarding-card {
  width: min(100%, 420px);
}

.onboarding-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.onboarding-progress span {
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}

.onboarding-progress span.is-active {
  background: var(--emerald-600, #16a34a);
}

.onboarding-language-row {
  justify-content: center;
}

.welcome-sequence-page {
  background: linear-gradient(165deg, var(--emerald-800), var(--emerald-900) 60%, #0b1512);
}

.welcome-sequence-content {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
}

.welcome-sequence-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  animation: welcomeMarkPulse 1.7s var(--ease) infinite;
}

@keyframes welcomeMarkPulse {
  0%, 100% { opacity: 0.7; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

.welcome-sequence-line {
  margin: 0;
  color: var(--ink-inverse);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 700;
}

.welcome-sequence-page .onboarding-progress span {
  background: rgba(255, 255, 255, 0.24);
}

.welcome-sequence-page .onboarding-progress span.is-active {
  background: var(--emerald-glow, #34d399);
}

.claim-step {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.claim-step:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.claim-step-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.claim-business-summary {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-soft);
}

.claim-business-summary span {
  color: var(--muted);
  font-size: 0.84rem;
}

.claim-business-summary-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.place-detail-contact-list {
  margin: 0;
  color: var(--muted);
}

.place-detail-contact-list a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* === Post a request — one plain-language field, a couple of optional
   one-tap refinements, done. Self-contained (not layered on the shared
   .alwen-card/.request-card selectors above) so it can't be pulled off
   course by unrelated rules in those large combined selectors. === */
.post-request-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.post-request-input {
  width: 100%;
  min-height: 100px;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  color: var(--ink);
  font: inherit;
  font-size: 1.02rem;
  line-height: 1.55;
  resize: vertical;
}

.post-request-input::placeholder {
  color: var(--muted);
}

.post-request-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

.post-request-refine {
  display: grid;
  gap: var(--space-1);
}

.post-request-refine-label {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* .chip's default translucent-white styling is meant for photo/hero
   backdrops — on this plain card it has almost no contrast, so give it a
   solid, visible surface here instead. */
.post-request-refine .chip {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  backdrop-filter: none;
  box-shadow: none;
  text-transform: capitalize;
}

.post-request-refine .chip.is-active {
  background: var(--accent);
  border-color: transparent;
  color: var(--ink-inverse);
}

/* Instant match preview shown the moment a category chip is picked —
   real professionals filtered right there, not just a chip changing
   colour with the actual matches buried further down the page. */
.inline-pro-suggestions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.inline-pro-suggestions-label {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--emerald-text);
}

.inline-pro-suggestions-empty {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}

.inline-pro-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-pro-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  text-align: left;
}

.inline-pro-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #111;
  color: white;
  font-size: 0.72rem;
  font-weight: 800;
}

.inline-pro-chip-body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.inline-pro-chip-body strong {
  font-size: 0.86rem;
  white-space: nowrap;
}

.inline-pro-chip-body small {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 0.76rem;
}

.inline-pro-suggestions-more {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  font-size: 0.84rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-request-submit {
  justify-self: start;
  min-width: 220px;
  margin-top: var(--space-1);
}

.post-request-signin {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.post-request-signin p {
  margin: 0;
  color: var(--muted);
}

.post-request-success {
  display: grid;
  gap: 4px;
  justify-items: start;
  text-align: left;
  padding: var(--space-1) 0;
}

.post-request-success-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--mint);
  color: #16a34a;
  margin-bottom: var(--space-1);
}

.post-request-success-icon .icon {
  font-size: 1.2rem;
}

.post-request-success h2 {
  margin: 0;
}

.post-request-success p {
  margin: 0 0 var(--space-1);
  color: var(--muted);
}

.post-request-success blockquote {
  margin: 0 0 var(--space-2);
  padding: var(--space-2);
  width: 100%;
  border-left: 3px solid var(--accent);
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  font-style: italic;
  color: var(--ink);
}

@media (max-width: 480px) {
  .post-request-submit {
    width: 100%;
  }
}

/* === Public profile (person) — compact identity + a scannable row of the
   facts that actually drive a hire/contact decision (rating, price,
   availability, distance), instead of a tall generic photo hero that ate
   most of the screen without saying anything about this specific person. === */
.public-profile-identity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.public-profile-avatar {
  width: 72px;
  height: 72px;
  box-shadow: var(--shadow-soft);
}

.public-profile-avatar .public-profile-initials {
  font-size: 1.5rem;
}

.public-profile-identity h1 {
  margin: 2px 0 0;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  line-height: 1.15;
}

/* Any heading/strong that directly wraps a name immediately followed by a
   verified badge (see verifiedCheck() in main.js) needs the badge centred
   against the actual rendered line box. vertical-align: middle alone
   undershoots for bold/large text — it anchors to the font's x-height
   metric, not the visual box — so the badge consistently sits a few
   pixels low. Using :has() here covers every such heading in one rule
   instead of chasing each parent selector individually. */
h1:has(> .verified-check),
h3:has(> .verified-check),
strong:has(> .verified-check) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.public-profile-meta {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.public-profile-decision-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 1px;
  margin-top: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--line);
  overflow: hidden;
}

.decision-stat {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface);
}

.decision-stat span {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.decision-stat strong {
  font-size: 0.98rem;
  white-space: nowrap;
}

.public-profile-context-hint {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.public-profile-primary-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.public-profile-primary-actions .auth-primary-button {
  flex: 1;
}

.public-profile-secondary-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.public-profile-secondary-actions button {
  background: transparent;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 480px) {
  .public-profile-primary-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* === Professional list cards ("Matching professionals") — bigger avatar,
   a real stat row instead of a flat wall of grey text, and a fixed
   .verified-meta stretch bug (see .verified-meta above) that was rendering
   the verified badge as a stretched oval instead of a circle. === */
.pro-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  font-size: 1.05rem;
}

.pro-card-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.pro-card-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.pro-stat-rating {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.86rem;
}

.pro-stat-rating small {
  color: var(--muted);
  font-weight: 600;
}

.pro-stat-price,
.pro-stat-availability {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.pro-stat-price {
  background: var(--surface-soft);
  color: var(--ink);
}

.pro-stat-availability {
  background: var(--mint);
  color: #0f5132;
}

:root[data-theme="dark"] .pro-stat-availability {
  color: #b3f5d1;
}