@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');

/* Bleya page themes, the same as the landing page (css/bleya.css, from
   docs/explorations/bleya/landing-page-bleya.html): light = paper (#EFEFDF ground,
   forest #294735 ink), dark = forest (#294735 ground, wool #FFF8E6 ink). Meadow
   #97C785 is only an accent and the tint of the glows; brass #E9B44C is the bell's.
   Every page follows the device setting. --page, --ink, --ink-2, --ink-3, --orb-*
   and --badge-* carry the same names and values as css/bleya.css, which redefines
   them on <body> for the landing page (with its ?theme= testing hook), with one
   exception: the dark --ink-2 is .82 here, not .76, because the sub-pages put it
   on wool-washed cards over the meadow glows, where .76 measured only 4.3-4.5:1.
   The other tokens are for the sub-pages. Small text never uses --ink-3 (about
   3.2:1 on paper, 4.2:1 on forest); text uses --ink or --ink-2, measured at 4.6:1
   or more on every ground the sub-pages draw (paper, card, inset; forest and its
   wool washes), the glows included.
   The phone replica on the landing page does not use any of these: it draws the
   app's own light theme, with the app's literal colours. */
:root {
  color-scheme: light dark;

  --page: #EFEFDF;
  --ink: #294735;
  --ink-2: rgba(41, 71, 53, 0.78);
  --ink-3: rgba(41, 71, 53, 0.6);
  --orb-1: #97C785;
  --orb-2: #FFFFFF;
  --orb-3: #C9DDB4;
  --orb-op: 0.55;
  --badge-bg: #294735;
  --badge-ink: #FFF8E6;
  --badge-line: #294735;
  --badge-hover: #33573F;

  --card: #FAFAF2;
  --card-line: #E3E3CF;
  --card-inset: #EFEFDF;
  --fill: #294735;
  --on-fill: #FFF8E6;
  --fill-hover: #33573F;
  --fill-shadow: 0 4px 14px rgba(41, 71, 53, 0.24);
  --fill-shadow-hover: 0 6px 20px rgba(41, 71, 53, 0.3);
  --link: #294735;
  --link-line: rgba(41, 71, 53, 0.38);
  --accent-tint: rgba(151, 199, 133, 0.24);
  --accent-line: rgba(41, 71, 53, 0.16);
  --glow-1: rgba(151, 199, 133, 0.34);
  --glow-2: rgba(201, 221, 180, 0.6);
  --glow-3: rgba(151, 199, 133, 0.4);
  --highlight-bg: linear-gradient(135deg, rgba(151, 199, 133, 0.16) 0%, rgba(201, 221, 180, 0.34) 52%, rgba(151, 199, 133, 0.12) 100%);
  --highlight-line: rgba(41, 71, 53, 0.14);
  --shadow-media: 0 2px 8px rgba(41, 71, 53, 0.12);

  /* Older names still read by style.css. --gradient-* is the gradient text of
     .lp-minimal__brand, as text on the page ground, so it turns light on
     forest; the landing page's wordmark (css/bleya.css) switches it off. */
  --gradient-blue: #294735;
  --gradient-purple: #3F6B4A;
  --gradient-pink: #4C7D57;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --border-radius: 12px;
  --transition: all 0.3s ease;
  --shadow-soft: 0 24px 60px rgba(41, 71, 53, 0.08);
  --shadow-card: 0 18px 45px rgba(41, 71, 53, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #294735;
    --ink: #FFF8E6;
    --ink-2: rgba(255, 248, 230, 0.82);
    --ink-3: rgba(255, 248, 230, 0.55);
    --orb-1: #97C785;
    --orb-2: #3E6B4E;
    --orb-3: #E9B44C;
    --orb-op: 0.22;
    --badge-bg: rgba(255, 248, 230, 0.1);
    --badge-ink: #FFF8E6;
    --badge-line: rgba(255, 248, 230, 0.18);
    --badge-hover: rgba(255, 248, 230, 0.18);

    --card: rgba(255, 248, 230, 0.06);
    --card-line: rgba(255, 248, 230, 0.14);
    --card-inset: rgba(255, 248, 230, 0.06);
    --fill: #FFF8E6;
    --on-fill: #294735;
    --fill-hover: #FFFFFF;
    --fill-shadow: 0 4px 14px rgba(12, 22, 16, 0.3);
    --fill-shadow-hover: 0 6px 20px rgba(12, 22, 16, 0.38);
    --link: #FFF8E6;
    --link-line: rgba(255, 248, 230, 0.45);
    --accent-tint: rgba(151, 199, 133, 0.16);
    --accent-line: rgba(151, 199, 133, 0.36);
    --glow-1: rgba(151, 199, 133, 0.16);
    --glow-2: rgba(233, 180, 76, 0.08);
    --glow-3: rgba(151, 199, 133, 0.18);
    --highlight-bg: linear-gradient(135deg, rgba(151, 199, 133, 0.14) 0%, rgba(62, 107, 78, 0.32) 52%, rgba(233, 180, 76, 0.07) 100%);
    --highlight-line: rgba(151, 199, 133, 0.3);
    --shadow-media: 0 2px 8px rgba(12, 22, 16, 0.28);

    --gradient-blue: #FFF8E6;
    --gradient-purple: #C9DDB4;
    --gradient-pink: #97C785;
    --shadow-soft: 0 24px 60px rgba(12, 22, 16, 0.22);
    --shadow-card: 0 18px 45px rgba(12, 22, 16, 0.18);
  }
}

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

body {
  min-height: 100vh;
  color: var(--ink);
  background: var(--page);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md);
}

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

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.05); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-20px, 30px) scale(1.08); }
}

/* ===== LANDING PAGE ===== */

.lp-body {
  background: var(--page);
  min-height: 100vh;
}

/* Minimal layout */
.lp-minimal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 60px 24px 40px;
  text-align: center;
  overflow: hidden;
}

/* Orbs: the meadow glows behind the page (paper: meadow, white, pale meadow;
   forest: meadow, a lighter forest and brass, fainter). */
.lp-minimal__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: var(--orb-op);
  pointer-events: none;
}

.lp-minimal__orb--1 {
  width: 500px; height: 500px;
  top: -15%; left: -10%;
  background: radial-gradient(circle, var(--orb-1), transparent 70%);
  animation: orbFloat 12s ease-in-out infinite;
}

.lp-minimal__orb--2 {
  width: 400px; height: 400px;
  top: 30%; right: -12%;
  background: radial-gradient(circle, var(--orb-2), transparent 70%);
  animation: orbFloat2 15s ease-in-out infinite;
}

.lp-minimal__orb--3 {
  width: 350px; height: 350px;
  bottom: -10%; left: 25%;
  background: radial-gradient(circle, var(--orb-3), transparent 70%);
  animation: orbFloat 18s ease-in-out infinite reverse;
}

/* Content */
.lp-minimal__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  animation: fadeInUp 0.8s ease both;
}

.lp-minimal__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-minimal__brand {
  font-family: 'Arial Black', 'Inter', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--gradient-blue), var(--gradient-purple), var(--gradient-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 24px;
}

.lp-minimal__title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 12px;
}

.lp-minimal__subtitle {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--ink-2);
  margin-bottom: 40px;
  line-height: 1.6;
  animation: fadeInUp 0.8s ease 0.15s both;
}

/* Phone */
.lp-minimal__phone-wrap {
  margin-bottom: 48px;
  animation: fadeInUp 1s ease 0.25s both;
}

.lp-phone--minimal {
  width: 260px;
}

/* Badges */
.lp-minimal__badges {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeInUp 0.8s ease 0.4s both;
}

/* Footer */
.lp-minimal__footer {
  position: relative;
  z-index: 2;
  padding-top: 48px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeInUp 0.8s ease 0.5s both;
}

.lp-minimal__footer a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.lp-minimal__footer a:hover { text-decoration: underline; }

.lp-minimal__footer span {
  color: var(--ink);
  opacity: 0.5;
  font-size: 0.7rem;
}

/* ===== Desktop Layout (≥1024px) ===== */

@media (min-width: 1024px) {
  .lp-minimal {
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    padding: 40px 48px 24px;
  }

  .lp-minimal__content {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 16px 64px;
    max-width: none;
  }

  .lp-minimal__phone-wrap {
    grid-column: 1;
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .lp-minimal__text {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-start;
    text-align: left;
    align-self: end;
  }

  .lp-minimal__badges {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .lp-phone--minimal {
    width: 300px;
  }

  .lp-feed {
    /* (300px phone - 12px padding) / 390px feed = 0.738 */
    transform: scale(0.738);
  }

  .lp-minimal__brand {
    margin-bottom: 16px;
  }

  .lp-minimal__title {
    font-size: clamp(2rem, 3.5vw, 3rem);
  }

  .lp-minimal__subtitle {
    margin-bottom: 32px;
  }

  .lp-badge {
    white-space: nowrap;
  }

  .lp-minimal__footer {
    padding-top: 24px;
    margin-top: 0;
  }
}

/* Larger viewports: bigger phone */
@media (min-width: 1024px) and (min-height: 800px) {
  .lp-phone--minimal {
    width: 360px;
  }

  .lp-feed {
    /* (360px phone - 12px padding) / 390px feed = 0.892 */
    transform: scale(0.892);
  }
}

/* Store Badges: forest with wool text on paper, a wool wash on forest */
.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-radius: 14px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-line);
  color: var(--badge-ink);
  text-decoration: none;
  transition: all 0.25s ease;
}

.lp-badge:hover {
  background: var(--badge-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 52, 38, 0.25);
}

.lp-badge__icon { width: 24px; height: 24px; flex-shrink: 0; }

.lp-badge__text {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}

.lp-badge__text small {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

/* ===== Phone Mockup ===== */

.lp-phone {
  width: 260px;
  aspect-ratio: 9 / 19.5;
  border-radius: 22px;
  border: 2px solid #333;
  background: linear-gradient(180deg, #3a3a3a 0%, #222 25%, #1a1a1a 100%);
  overflow: visible;
  position: relative;
  padding: 3px 6px;
  /* A forest-tinted drop shadow, which reads on paper and on forest; the old
     white glow and the white top-edge highlight were for the navy page. */
  box-shadow:
    0 0 0 1px rgba(20, 36, 26, 0.35),
    0 26px 60px rgba(25, 45, 32, 0.38),
    0 6px 16px rgba(25, 45, 32, 0.18);
}

.lp-phone::after {
  content: '';
  position: absolute;
  top: 0;
  left: -3px;
  width: calc(100% + 6px);
  height: 100%;
  pointer-events: none;
  z-index: 20;
  background:
    /* Power button — right */
    linear-gradient(to bottom, #444, #2a2a2a) no-repeat calc(100% - 0px) 85px / 3px 32px,
    /* Volume up — left */
    linear-gradient(to bottom, #444, #2a2a2a) no-repeat 0px 60px / 3px 22px,
    /* Volume down — left */
    linear-gradient(to bottom, #444, #2a2a2a) no-repeat 0px 88px / 3px 36px;
}

.lp-phone__notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #111;
  border-radius: 50%;
  z-index: 10;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
}

.lp-phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
}

/* ===== Feed Mockup (inline app recreation) ===== */

.lp-feed {
  width: 390px;
  height: 883px;
  transform: scale(0.626);
  transform-origin: top left;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #FBF9F6;
  position: relative;
  overflow: hidden;
  /* The replica is the app's LIGHT theme on both page themes. Its brand
     colours are the app's Bleya green (xplr_colors.dart, light): forest
     #294735 for fills, text, links and selection (white on fills), #3F6B4A
     active, #1F3829 pressed / pill ink, #E4EFDB tint, #F2F7EE soft tint,
     #4C7D57 secondary accent, #97C785 pale accent, #C9DDB4 soft border. */
  color-scheme: light;
}

/* Extra-large viewports (4K / ultrawide): scale phone + text up substantially */
@media (min-width: 1600px) and (min-height: 800px) {
  .lp-minimal__phone-wrap {
    /* CSS 'scale' property is independent of 'transform',
       so it composes with the fadeInUp animation instead of being overridden */
    scale: 1.35;
  }

  .lp-minimal__content {
    gap: 16px 80px;
  }

  .lp-minimal__brand {
    font-size: 2.8rem;
  }

  .lp-minimal__title {
    font-size: clamp(2.8rem, 4.5vw, 4.2rem);
  }

  .lp-minimal__subtitle {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
  }

  .lp-badge {
    padding: 14px 28px;
    font-size: 1.1rem;
  }
}

/* === Tab panes (MainTab.home / chats / plans) ===
   The status-bar spacer, the overlays and the floating nav all live OUTSIDE the
   panes — an overlay opened from Plans must still render once Home is active. */
.lp-pane {
  display: none;
  /* Everything in a pane is inert unless it is one of the four affordances
     re-enabled below — there is nothing behind the rest in a mockup. */
  cursor: default;
}

.lp-pane--active {
  display: block;
}

/* Each tab scrolls under the fixed status spacer, like the real screen, so the
   feed below the fold (and Plans' Saved row) is reachable. 110px bottom room
   clears the floating nav pill. Scrollbar hidden, as on a phone. */
.lp-pane {
  height: calc(100% - 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 110px;
  box-sizing: border-box;
  scrollbar-width: none;
}

.lp-pane::-webkit-scrollbar { display: none; }

/* The only clickable things: nav tabs, switcher tabs, story rings, event cards,
   and — since the catalog detail overlays landed — movie, play and exhibition
   cards. All four content types now open a detail overlay. */
.lp-feed__story,
.lp-feed__card,
.lp-feed__ongoing-card,
.lp-today-card,
.lp-next-card,
.lp-movie-card,
.lp-play-card,
.lp-exh-card,
.lp-switcher__tab,
.lp-feed__nav-item {
  cursor: pointer;
}

/* Home content-type sub-panes (Events / Movies / Theater / Museums) */
.lp-subpane {
  display: none;
}

.lp-subpane--active {
  display: block;
}

/* Masthead rhythm — 12px top / 56px row / 8px bottom on Home, Chats and Plans
   alike, so the wordmark centre lands 40px below the top on all three
   (home_header.dart:96, plans_screen.dart:210 — "no per-tab logo drift"). */
.lp-feed__header {
  padding: 12px 12px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Chats + Plans use the 16px gutter of their own screens. */
.lp-feed__header--wide {
  padding: 12px 16px 8px;
}

.lp-feed__header-btn {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

/* Balances the trailing affordance so the wordmark stays centred. */
.lp-feed__header-slot {
  width: 40px;
  height: 56px;
}

/* Inert — a mockup has nothing behind the avatar. */
.lp-feed__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: default;
}

.lp-feed__logo {
  width: 80px;
  text-align: center;
  font-family: 'Roboto', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -1.2px;
  background: linear-gradient(135deg, #294735, #3F6B4A, #4C7D57);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* The phone mock's header logo, now the Bleya wordmark image. */
.lp-feed__logo--img {
  display: block;
  height: 24px;
  width: auto;
  background: none;
}

.lp-feed__bell {
  position: relative;
}

/* adr-0021 (2026-06-18 amendment): unseen badges carry the brand colour, now
   Bleya green (home_header.dart:183-190) — the pre-2.0 red dot is gone. */
.lp-feed__bell-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: #294735;
  border-radius: 50%;
}

/* Re-homed to Plans in v2.0 (plans_screen.dart:272) — the 16px bottom keeps the
   rail off the Pending section header. */
.lp-feed__stories {
  padding: 6px 16px 16px;
  display: flex;
  gap: 8px;
  overflow: hidden;
}

.lp-feed__story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.lp-feed__story-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  padding: 2px;
}

.lp-feed__story-ring--unseen {
  background: conic-gradient(from 0deg, #97C785, #4C7D57, #294735, #97C785);
  animation: lp-feed-spin 4s linear infinite;
}

.lp-feed__story-ring--seen {
  border: 2px solid #FFFFFF;
  padding: 0;
}

.lp-feed__story-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #FFFFFF;
  padding: 2px;
}

.lp-feed__story-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.lp-feed__story-name {
  font-size: 11px;
  color: #000;
  font-weight: 500;
  line-height: 1.1;
}

.lp-feed__story-name--you {
  font-size: 12px;
}

/* === Content-type switcher (matches systems/product/xplr-app/lib/features/home/components/home_type_switcher.dart) ===
   A soft track holds a white pill that glides under the active type. */
.lp-switcher {
  padding: 4px 12px 6px;
}

.lp-switcher__track {
  position: relative;
  display: flex;
  padding: 5px;
  background: #F6F4F0;
  border-radius: 16px;
}

.lp-switcher__pill {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc((100% - 10px) / 4);
  height: calc(100% - 10px);
  background: #FFFFFF;
  border-radius: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  /* AnimatedAlign 300ms Cubic(0.34, 1.56, 0.64, 1) — a gentle overshoot */
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lp-switcher__tab {
  position: relative;
  flex: 1;
  padding: 12px 4px;
  text-align: center;
  font-size: 13px;
  letter-spacing: -0.1px;
  line-height: 16px;
  font-weight: 500;
  color: #746E66;
  cursor: pointer;
}

.lp-switcher__tab--active {
  color: #1B1813;
  font-weight: 600;
}

.lp-feed__location {
  padding: 0 16px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Context-aware search glyph — every content surface carries it
   (home_screen.dart `_buildSearchGlyph`). Inert in the mockup. */
.lp-feed__location-search {
  margin-left: auto;
  cursor: default;
}

.lp-feed__compass {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  margin-right: 8px;
}

.lp-feed__compass > svg {
  animation: lp-feed-spin 20s linear infinite;
}

.lp-feed__compass-inner {
  position: absolute;
  top: 3.5px;
  left: 3.5px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #F2F7EE;
  border: 1px solid #C9DDB4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-feed__location-country {
  font-size: 14px;
  color: #A7A29B;
}

.lp-feed__location-city {
  font-size: 14px;
  color: #294735;
  font-weight: 600;
}

.lp-feed__ongoing {
  margin: 4px 12px 8px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.lp-feed__ongoing-header {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-feed__ongoing-dot {
  width: 10px;
  height: 10px;
  background: #22C55E;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.lp-feed__ongoing-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #22C55E;
  border-radius: 50%;
  animation: lp-feed-pulse 1.2s ease-out infinite;
}

.lp-feed__ongoing-title {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.lp-feed__ongoing-cards {
  padding: 0 4px 10px 14px;
  display: flex;
  gap: 10px;
  overflow: hidden;
  height: 112px;
}

.lp-feed__ongoing-card {
  width: 140px;
  height: 104px;
  border-radius: 12px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.lp-feed__ongoing-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.6));
}

.lp-feed__ongoing-card-title {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  font-size: 12px;
  text-align: left;
  font-weight: 500;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
  z-index: 1;
}

.lp-feed__ongoing-badge {
  position: absolute;
  z-index: 1;
  border-radius: 6px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-feed__ongoing-badge--live {
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  padding: 0;
}

.lp-feed__ongoing-badge--live-dot {
  width: 10px;
  height: 10px;
  background: #22C55E;
  border-radius: 50%;
  position: relative;
}

.lp-feed__ongoing-badge--live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #22C55E;
  border-radius: 50%;
  animation: lp-feed-pulse 1.2s ease-out infinite;
}

.lp-feed__ongoing-badge--star {
  top: 6px;
  right: 6px;
  background: #4C7D57;
}

.lp-feed__ongoing-badge--time {
  top: 6px;
  left: 6px;
  background: #22C55E;
  padding: 3px 6px;
  display: flex;
  align-items: center;
}

.lp-feed__ongoing-badge--time span {
  font-size: 10px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.2px;
  line-height: 1;
}

/* === Day Divider (matches systems/product/xplr-app/lib/features/home/components/day_divider.dart) ===
   The feed lives inside a transform: scale(0.626) wrapper, so all dimensions
   below are iPhone-native dp values just like the rest of .lp-feed__*. */
.lp-day-divider {
  display: flex;
  align-items: center;
  padding: 18px 20px 10px;
  text-align: left;
}

.lp-day-divider__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.lp-day-divider--today .lp-day-divider__label {
  color: #10B981;
}

.lp-day-divider--future .lp-day-divider__label {
  color: #F97316;
}

.lp-day-divider--past .lp-day-divider__label {
  color: rgba(119, 119, 119, 0.7);
}

.lp-day-divider__date {
  font-size: 13px;
  font-weight: 500;
  color: #746E66;
  line-height: 1;
  margin-left: 8px;
}

.lp-day-divider__rule {
  flex: 1;
  height: 1px;
  background: #F0EDE8;
  margin-left: 4px;
}

/* === What's New banner (matches systems/product/xplr-app/lib/features/home/components/whats_new_banner.dart "new events" state) === */
.lp-whats-new {
  position: relative;
  margin: 14px 12px 0;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid #F6F4F0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-align: left;
}

.lp-whats-new__glow {
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  pointer-events: none;
  display: none; /* the perpetual glow is gone from the app (adr-0027) */
}

@keyframes lp-whats-new-glow {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

.lp-whats-new__thumb {
  position: relative;
  width: 64px;
  height: 36px;
  flex: 0 0 64px;
  margin-right: 12px;
  border-radius: 6px;
  background: linear-gradient(135deg, #DC2626, #F97316);
  box-shadow: 0 0 0 2px #FFF, 0 1px 4px rgba(0, 0, 0, 0.1);
}

.lp-whats-new__chip {
  position: absolute;
  right: -4px;
  bottom: -4px;
  padding: 1px 5px;
  background: rgba(16, 12, 9, 0.7);
  color: #FFF;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.lp-whats-new__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lp-whats-new__top {
  font-size: 14px;
  font-weight: 600;
  color: #1A1613;
  line-height: 1.2;
}

.lp-whats-new__bottom {
  font-size: 12px;
  color: #7C766E;
  line-height: 1.2;
  margin-top: 2px;
}

.lp-whats-new__chevron {
  flex: 0 0 20px;
  margin-left: 8px;
  color: #746E66;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === Feed Card (horizontal — matches systems/product/xplr-app/lib/features/home/components/feed_card.dart) ===
   The feed is wrapped in transform: scale(0.626), so all dimensions below are
   iPhone-native dp values, identical to feed_card.dart. */
.lp-feed__card {
  margin: 0 16px 12px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 0.73px solid #F6F4F0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: stretch;
  text-align: left;
}

.lp-feed__card-thumb {
  position: relative;
  width: 160px;
  flex: 0 0 160px;
  align-self: stretch;
  /* Height is intentionally unset — align-self: stretch lets the thumb fill
     the card's full height (driven by the body's intrinsic height) so no
     white gap appears below the image. */
  /* gradient is set inline per-card via style="" */
}

/* 3-px category-colored accent strip down the right edge of the thumbnail */
.lp-feed__card-thumb-accent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  /* color set inline per-card */
}

/* LIVE badge (top-left of thumbnail) — only badge that remains on the image. Hidden by default. */
.lp-feed__card-thumb-live {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 7px;
  background: #EF4444;
  color: #FFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  line-height: 1;
}

.lp-feed__card-body {
  flex: 1;
  min-width: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.lp-feed__card-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
  /* color set inline per-card (category color) */
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-feed__card-title-new {
  font-size: 16px;
  font-weight: 500;
  color: #1A1613;
  line-height: 1.25;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-feed__card-venue {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #746E66;
  line-height: 1.1;
  overflow: hidden;
}

.lp-feed__card-venue svg {
  flex-shrink: 0;
  fill: #746E66;
}

.lp-feed__card-venue span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-feed__card-online {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #4CAF50;
  line-height: 1.1;
}

.lp-feed__card-online::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CAF50;
  flex-shrink: 0;
}

/* Bottom row — time on the left, actions on the right, pushed to the bottom of the body */
.lp-feed__card-bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
}

.lp-feed__card-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #2C2822;
  line-height: 1;
}

.lp-feed__card-time svg {
  flex-shrink: 0;
}

.lp-feed__card-time--day svg { fill: #B45309; }
.lp-feed__card-time--night svg { fill: #294735; }

.lp-feed__card-actions-new {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-feed__card-actions-new svg {
  width: 20px;
  height: 20px;
  fill: #746E66;
}

.lp-feed__card-actions-new .is-active {
  fill: #3F6B4A;
}

/* === Movie card (matches systems/product/xplr-app/lib/features/explore/components/movie_card.dart) ===
   88x132 poster flush left, neutral genre eyebrow (adr-0050 amended 2026-06-25 —
   movies carry no content-type accent), icon-based meta row, synopsis filling
   whatever room is left below the data. */
.lp-cardlist {
  padding: 8px 16px 0;
  text-align: left;
}

.lp-movie-card {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 0.73px solid #F6F4F0;
  overflow: hidden;
  position: relative;
}

.lp-movie-card__poster {
  width: 88px;
  height: 132px;
  flex: 0 0 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-movie-card__poster svg {
  width: 32px;
  height: 32px;
}

.lp-movie-card__body {
  flex: 1;
  min-width: 0;
  height: 132px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}

.lp-movie-card__genres {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.735px;
  text-transform: uppercase;
  line-height: 1;
  color: #746E66;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-movie-card__title {
  font-size: 16px;
  font-weight: 500;
  color: #1A1613;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Meta row anchored to the bottom of the poster-height column (operator ruling
   2026-09-16: synopsis sits between title and meta); 28px right gutter keeps
   it clear of the Interested star. */
.lp-movie-card__meta {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-right: 28px;
  font-size: 14px;
  line-height: 20px;
}

/* CardInterestStar — bottom-right corner of the card */
.lp-movie-card__interest {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 20px;
  height: 20px;
  fill: #746E66;
}

.lp-movie-card__star {
  width: 16px;
  height: 16px;
  fill: #EAB308;
  flex-shrink: 0;
}

.lp-movie-card__clock {
  width: 14px;
  height: 14px;
  fill: #746E66;
  flex-shrink: 0;
}

.lp-movie-card__rating {
  color: #1A1613;
  margin: 0 12px 0 4px;
}

.lp-movie-card__dur {
  color: #746E66;
  margin: 0 12px 0 4px;
}

.lp-movie-card__year {
  color: #746E66;
}

.lp-movie-card__synopsis {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: #746E66;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* === Today row (matches systems/product/xplr-app/lib/features/home/components/today_row.dart, v2.8.0) ===
   Everything on today, above the feed: shows first, then multi-day items running
   today. From three items it is a snap-scrolling rail of 204px cards; with one or
   two the cards stretch to share the row (spec rule 15). Same card anatomy as the
   feed card, stacked: 16:9 cover, category strip along its bottom edge. */
.lp-today-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  padding: 2px 16px 8px;
  scrollbar-width: none;
  align-items: flex-start;
  text-align: left;
}

.lp-today-rail::-webkit-scrollbar { display: none; }

.lp-today-rail--stretch {
  overflow: visible;
  scroll-snap-type: none;
}

.lp-today-card {
  scroll-snap-align: start;
  flex: 0 0 204px;
  background: #FFFFFF;
  border: 0.73px solid #F6F4F0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.lp-today-rail--stretch .lp-today-card {
  flex: 1 1 0;
  min-width: 0;
}

.lp-today-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  /* gradient is set inline per-card via style="" */
}

.lp-today-card__strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  /* color set inline per-card */
}

.lp-today-card__body {
  padding: 9px 10px 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lp-today-card .lp-feed__card-eyebrow { font-size: 10px; margin-bottom: 0; }
.lp-today-card .lp-feed__card-title-new { font-size: 14px; margin: 3px 0 0; }
.lp-today-card .lp-feed__card-venue { font-size: 11px; margin-top: 3px; }
.lp-today-card .lp-feed__card-bottom { margin-top: 8px; padding-top: 0; min-height: 26px; gap: 6px; }
.lp-today-card .lp-feed__card-time { font-size: 12px; }
.lp-today-card .lp-feed__card-actions-new { gap: 2px; }
.lp-today-card .lp-feed__card-actions-new svg { width: 18px; height: 18px; padding: 4px; box-sizing: content-box; }

/* Multi-day items on Home show their day range (FeedCard.showDayRange, v2.8.0):
   outlined date_range glyph in brand ink instead of the sun/moon start time. */
.lp-feed__card-time { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-feed__card-time--range svg { fill: #294735; }

/* === Next screenings row (matches systems/product/xplr-app/lib/features/home/components/next_screenings_row.dart, v2.9.0) ===
   Every film with a show still to start today, ordered by that next show. From
   three films a snap rail of 88x132 poster cards; the next show is drawn as big
   chrome-white HH:mm numerals over a bottom scrim, sun/moon glyph (moon from 18:00). */
.lp-day-divider--tomorrow .lp-day-divider__label {
  color: #F59E0B;
}

.lp-next-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  padding: 2px 16px 6px;
  scrollbar-width: none;
  align-items: flex-start;
}

.lp-next-rail::-webkit-scrollbar { display: none; }

.lp-next-card {
  position: relative;
  flex: 0 0 88px;
  height: 132px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  /* poster gradient is set inline per-card via style="" */
}

.lp-next-card > svg {
  width: 32px;
  height: 32px;
  fill: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}

.lp-next-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 61px;
  background: linear-gradient(to top, rgba(16, 12, 9, 0.78), rgba(16, 12, 9, 0));
  pointer-events: none;
}

.lp-next-card__time {
  position: absolute;
  left: 7px;
  bottom: 5px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #F5F1EA;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.34px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(14, 11, 9, 0.5);
  white-space: nowrap;
}

.lp-next-card__time svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(14, 11, 9, 0.5));
}

.lp-next-card__time--day svg { fill: #B45309; }
.lp-next-card__time--night svg { fill: #294735; }

/* The movie list sits 6px under the row (home_movies_sliver.dart) */
.lp-next-rail + .lp-cardlist {
  padding-top: 6px;
}

/* === Play card (matches systems/product/xplr-app/lib/features/theater/components/play_card.dart) ===
   160-wide 16:9 image with the 3px theater accent strip on its inner edge. */
.lp-play-card {
  display: flex;
  align-items: stretch;
  margin-bottom: 12px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 0.73px solid #F6F4F0;
  overflow: hidden;
  cursor: pointer;
}

.lp-play-card__thumb {
  position: relative;
  width: 160px;
  flex: 0 0 160px;
  align-self: stretch;
  min-height: 90px;
}

.lp-play-card__strip {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  background: #A21CAF;
}

.lp-play-card__body {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lp-play-card__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  line-height: 1;
  color: #A21CAF;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-play-card__title {
  font-size: 16px;
  font-weight: 500;
  color: #1A1613;
  line-height: 1.25;
  margin-bottom: 3px;
}

.lp-play-card__auteur {
  font-size: 14px;
  color: #746E66;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-play-card__pill {
  align-self: flex-start;
  margin-top: 8px;
  padding: 5px 9px;
  background: #F6F4F0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #2C2822;
  line-height: 1;
}

/* === Exhibition card (matches systems/product/xplr-app/lib/features/museum/components/exhibition_card.dart) ===
   Full-width 16:9 cover, museum-accent eyebrow, title, run-status line. */
.lp-exh-card {
  margin-bottom: 12px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 0.73px solid #F6F4F0;
  overflow: hidden;
  cursor: pointer;
}

.lp-exh-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.lp-exh-card__body {
  padding: 12px 14px 13px;
}

.lp-exh-card__eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1;
  color: #3B82F6;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-exh-card__title {
  font-size: 16px;
  font-weight: 500;
  color: #1A1613;
  line-height: 1.25;
}

.lp-exh-card__status {
  margin-top: 6px;
  font-size: 14px;
  color: #777;
  line-height: 1.2;
}

/* === Chats (matches systems/product/xplr-app/lib/features/chat/screens/chat_inbox_screen.dart) === */
.lp-chat__tabs {
  position: relative;
  margin: 0 16px 8px;
  height: 41px;
  padding: 4px;
  display: flex;
  background: #FFFFFF;
  border: 0.64px solid #EAE6E1;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.lp-chat__tabs-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  height: 32px;
  background: #294735;
  border-radius: 10px;
}

.lp-chat__tab {
  position: relative;
  flex: 1;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: #746E66;
  cursor: default;
}

.lp-chat__tab--active {
  color: #FFFFFF;
}

.lp-chat__search {
  margin: 16px;
  height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #EAE6E1;
  border-radius: 14px;
  font-size: 14px;
  color: #9E9891;
  cursor: default;
}

.lp-chat__filter {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #746E66;
}

.lp-chat__filter-action {
  margin-left: auto;
  font-weight: 500;
  color: #746E66;
}

.lp-chat__list {
  margin: 0 16px;
  background: #FFFFFF;
  border: 0.727px solid rgba(229, 231, 235, 0.6);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: left;
}

.lp-chat__row {
  position: relative;
  height: 72px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: default;
}

/* Hairline inset to the text column (chat_list_item.dart: 16 + 60) */
.lp-chat__row + .lp-chat__row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 76px;
  right: 0;
  height: 1px;
  background: #F6F4F0;
}

.lp-chat__avatar {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
}

.lp-chat__avatar--event {
  border-radius: 12px;
}

.lp-chat__avatar--group {
  background: none;
}

.lp-chat__avatar-a,
.lp-chat__avatar-b {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
  box-sizing: border-box;
}

.lp-chat__avatar-a { top: 0; left: 0; }
.lp-chat__avatar-b { top: 16px; left: 16px; }

.lp-chat__type-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #294735, #3F6B4A);
  border: 1.5px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-chat__type-badge svg {
  width: 10px;
  height: 10px;
}

.lp-chat__body {
  flex: 1;
  min-width: 0;
}

.lp-chat__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-chat__title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #746E66;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-chat__time {
  font-size: 12px;
  line-height: 16px;
  color: #746E66;
  flex-shrink: 0;
}

.lp-chat__row--unread .lp-chat__title,
.lp-chat__row--unread .lp-chat__time {
  color: #1A1613;
}

.lp-chat__row--unread .lp-chat__time {
  font-weight: 600;
}

.lp-chat__preview-row {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-chat__preview {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 16px;
  color: #A7A29B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-chat__badge {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #294735, #3F6B4A);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === Plans (matches systems/product/xplr-app/lib/features/plans/screens/plans_screen.dart) === */
.lp-plans__plus {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #294735;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.lp-plans__section {
  padding: 0 16px;
  margin-bottom: 20px;
  text-align: left;
}

/* Uppercase neutral grouping label + inline hairline (plan_section_header.dart) */
.lp-section-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.lp-section-header__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: #444;
  line-height: 1;
}

.lp-section-header__rule {
  flex: 1;
  height: 1px;
  background: #F0EDE8;
  margin: 0 12px;
}

.lp-section-header__more {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #746E66;
}

.lp-section-header__more svg {
  width: 16px;
  height: 16px;
}

.lp-ongoing-dot {
  width: 10px;
  height: 10px;
  margin-right: 8px;
  background: #22C55E;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.lp-ongoing-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #22C55E;
  border-radius: 50%;
  animation: lp-feed-pulse 1.2s ease-out infinite;
}

.lp-ongoing__rail {
  display: flex;
  gap: 12px;
  height: 112px;
  overflow: hidden;
}

/* Pending invite (plan_invite_card.dart) */
.lp-invite {
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid #F0EDE8;
  border-radius: 14px;
  cursor: default;
}

/* The card body opens the event (plan_invite_card.dart:47); Accept/Decline sit
   outside it and stay inert. */
.lp-invite__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.lp-invite__avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
}

.lp-invite__text {
  flex: 1;
  min-width: 0;
}

.lp-invite__kicker {
  font-size: 12px;
  font-weight: 500;
  color: #59534C;
  line-height: 1.2;
}

.lp-invite__title {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: #1A1613;
  line-height: 1.2;
}

.lp-invite__when {
  margin-top: 2px;
  font-size: 12px;
  color: #59534C;
  line-height: 1.2;
}

.lp-invite__actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.lp-invite__btn {
  flex: 1;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: default;
}

/* adr-0023: a per-row repeating action never takes the solid brand fill */
.lp-invite__btn--accept {
  background: #E4EFDB;
  color: #1F3829;
  font-weight: 600;
}

.lp-invite__btn--decline {
  background: #F6F4F0;
  border: 1px solid #EAE6E1;
  color: #454039;
  font-weight: 500;
}

/* My Plans / Saved rails (my_events_carousel.dart, plan_carousel.dart) */
.lp-myplans__rail {
  display: flex;
  gap: 12px;
  overflow: hidden;
}

.lp-myplans__tile {
  width: 144px;
  flex-shrink: 0;
}

.lp-saved__tile {
  width: 195px;
  flex-shrink: 0;
}

.lp-myplans__cover,
.lp-saved__cover {
  height: 112px;
  border-radius: 12px;
}

.lp-myplans__title {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #1A1613;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-myplans__date {
  font-size: 12px;
  font-weight: 500;
  color: #746E66;
  line-height: 1.3;
}

/* === Floating nav pill (matches systems/product/xplr-app/lib/app/components/floating_nav_bar.dart) ===
   Frosted translucent pill, centred, 12px off the bottom; content scrolls under
   it. 64x48 tabs, 2px gaps, 6px pill padding, brand-tinted active well. */
.lp-feed__nav {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.lp-feed__nav-pill {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid #EAE6E1;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18), 0 2px 6px rgba(16, 24, 40, 0.08);
}

.lp-feed__nav-item {
  position: relative;
  width: 64px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  cursor: pointer;
}

/* Selected = a brand-tinted full-pill well with a brand-ink glyph; the glyph
   keeps its outline form in both states (mockup parity). */
.lp-feed__nav-item--active {
  background: #E4EFDB;
  color: #1F3829;
}

.lp-feed__nav-badge {
  position: absolute;
  top: 4px;
  right: 10px;
  min-width: 17px;
  height: 17px;
  background: #294735;
  border-radius: 9px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-feed__nav-item--active .lp-feed__nav-badge {
  display: none;
}

.lp-feed__nav-badge span {
  font-size: 10px;
  font-weight: 700;
  color: white;
}

/* === Chats' New group button (chat_inbox_screen.dart _buildNewGroupButton) ===
   Forest pill, 44 high, radius 14, the light-theme fabGlow; right 16, 12px above
   the nav pill (12 + 62 + 12 = 86). The Chats list ends at its top edge. */
.lp-chat__new-group {
  position: absolute;
  right: 16px;
  bottom: 86px;
  height: 44px;
  padding: 0 16px 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 14px;
  background: #294735;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 15px #C9DDB4, 0 4px 6px #C9DDB4;
  /* Inert, like everything in the panes: nothing behind it in a mockup. */
  cursor: default;
}

.lp-chat__new-group[hidden] {
  display: none;
}

#pane-chats {
  padding-bottom: 130px;
}

/* ===== Feed Mockup Animations ===== */

@keyframes lp-feed-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes lp-feed-pulse {
  0% { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ===== LANDING PAGE RESPONSIVE ===== */

@media (max-width: 640px) {
  .lp-minimal {
    padding: 48px 20px 32px;
  }

  .lp-minimal__orb--1 { width: 300px; height: 300px; }
  .lp-minimal__orb--2 { width: 250px; height: 250px; }
  .lp-minimal__orb--3 { width: 200px; height: 200px; }

  .lp-phone--minimal { width: 220px; }

  .lp-minimal__badges {
    flex-direction: column;
    align-items: center;
  }

  .lp-badge {
    width: 100%;
    max-width: 280px;
    justify-content: flex-start;
  }

  .lp-feed {
    /* (220px phone - 12px padding - 8px gap) / 390px feed = 0.513 */
    transform: scale(0.513);
  }
}

/* ===== Story Overlay ===== */

.lp-story {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #1A1A1E;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  padding: 0 20px;
}

.lp-story--active {
  opacity: 1;
  pointer-events: auto;
}

.lp-story__progress {
  width: 100%;
  height: 2.5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  flex-shrink: 0;
  margin-top: 12px;
  overflow: hidden;
}

.lp-story__progress-fill {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 100px;
}

.lp-story__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  margin-left: 12px;
}

.lp-story__close svg {
  width: 18px;
  height: 18px;
}

.lp-story__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0 0;
}

.lp-story__spacer {
  flex: 1;
}

.lp-story__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lp-story__user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.lp-story__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-story__name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

.lp-story__time {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.2;
}

.lp-story__visibility {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #fff;
}

.lp-story__visibility svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.lp-story__visibility--public svg {
  fill: #4CAF6A;
}

/* The story viewer is a fixed near-black stage, so its greens are the app's
   frozen story tokens (story_viewer.dart): storyBrandAccent #4C7D57 for thin
   glyphs, storyBrandFill #3F6B4A for fills — forest would sink into the dark. */
.lp-story__visibility--friends svg {
  fill: #4C7D57;
}

.lp-story__visibility--invited svg {
  fill: #FF9800;
}

.lp-story__visibility strong {
  font-weight: 700;
}

.lp-story__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.17;
  max-height: 340px;
  border-radius: 16px;
  overflow: visible;
  flex-shrink: 1;
  min-height: 0;
}

.lp-story__image-glow {
  position: absolute;
  width: 110%;
  height: 140%;
  top: -25%;
  left: -5%;
  filter: blur(80px);
  opacity: 0.35;
  border-radius: 16px;
  z-index: 0;
}

.lp-story__image {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  z-index: 1;
}

.lp-story__image-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 14px;
  color: #69F0AE;
  font-size: 12px;
  font-weight: 500;
}

.lp-story__details {
  padding: 0;
  flex-shrink: 0;
  text-align: left;
}

.lp-story__title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 8px;
}

.lp-story__meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.lp-story__meta-row svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: #fff;
}

.lp-story__meta-row span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.lp-story__action {
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 400;
  height: 31px;
  box-sizing: border-box;
  background: rgba(63, 107, 74, 0.15);
  color: #fff;
  align-self: center;
  flex-shrink: 0;
}

.lp-story__action svg {
  width: 13px;
  height: 13px;
  fill: #4C7D57;
  flex-shrink: 0;
}

.lp-story__action strong {
  font-weight: 700;
  color: #fff;
}

.lp-story__action span {
  color: rgba(255, 255, 255, 0.85);
}

.lp-story__buttons {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding-bottom: 20px;
  flex-shrink: 0;
}

.lp-story__btn {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-story__btn--view {
  background: rgba(174, 174, 174, 0.35);
}

.lp-story__btn--primary {
  background: #3F6B4A;
  gap: 6px;
}

.lp-story__btn--primary svg {
  flex-shrink: 0;
}

.lp-feed__story-ring {
  cursor: pointer;
}

.lp-feed__story-ring--seen-after {
  background: none !important;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 0;
  animation: none !important;
}

/* Story overlay font bump for larger screens */
@media (min-width: 1024px) {
  .lp-story__name { font-size: 18px; }
  .lp-story__time { font-size: 16px; }
  .lp-story__visibility { font-size: 14px; }
  .lp-story__visibility svg { width: 14px; height: 14px; }
  .lp-story__title { font-size: 26px; }
  .lp-story__meta-row span { font-size: 16px; }
  .lp-story__meta-row svg { width: 17px; height: 17px; }
  .lp-story__action { font-size: 16px; height: 34px; }
  .lp-story__action svg { width: 15px; height: 15px; }
  .lp-story__btn { font-size: 16px; height: 48px; }
}

/* ===== Detail Overlay ===== */

.lp-detail {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.lp-detail--active {
  opacity: 1;
  pointer-events: auto;
}

.lp-detail__hero {
  position: relative;
  width: 100%;
  height: 240px;
  flex-shrink: 0;
}

.lp-detail__hero-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.12) 30%, transparent 100%);
  z-index: 1;
}

.lp-detail__back {
  position: absolute;
  top: 19px;
  left: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.lp-detail__back svg {
  width: 20px;
  height: 20px;
}

.lp-detail__menu {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.lp-detail__menu svg {
  width: 20px;
  height: 20px;
}

.lp-detail__pills {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.lp-detail__pill {
  height: 30px;
  border-radius: 15px;
  padding: 0 14px 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255,255,255,0.8);
  color: #454039;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.lp-detail__pill svg {
  width: 18px;
  height: 18px;
  fill: #454039;
}

.lp-detail__pill--active {
  background: #294735;
  color: #FFFFFF;
}

.lp-detail__pill--active svg {
  fill: #FFFFFF;
}

.lp-detail__content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 80px;
  -webkit-overflow-scrolling: touch;
  text-align: left;
}

.lp-detail__title {
  font-size: 24px;
  font-weight: 700;
  color: #000000;
  line-height: 1.2;
  margin-bottom: 16px;
  text-align: left;
}

/* ── Detail content cards (mirrors xplr-app event-details redesign) ── */
/* Shared card chrome: anchor, about, participants and map cards all use it. */
.lp-detail__card {
  background: #FFFFFF;
  border: 1px solid #F6F4F0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 16px;
}

/* Anchor card — optional SOURCE strip + date tile + meta column */
.lp-detail__source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #FBFAF7;
  border-bottom: 1px solid #F6F4F0;
}

.lp-detail__source-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.88px;
  color: #746E66;
  flex-shrink: 0;
}

.lp-detail__source-host {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #294735;
}

.lp-detail__source-host span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-detail__source-host svg {
  width: 11px;
  height: 11px;
  fill: #294735;
  flex-shrink: 0;
}

.lp-detail__anchor-body {
  display: flex;
  gap: 14px;
  padding: 14px;
}

/* Date tile (date_tile.dart): brandTint ground, brandText ink in light. */
.lp-detail__date-tile {
  width: 76px;
  flex-shrink: 0;
  background: #E4EFDB;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
}

.lp-detail__date-month {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #294735;
  line-height: 1;
}

.lp-detail__date-day {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #294735;
  line-height: 1;
  margin-top: 6px;
}

.lp-detail__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.lp-detail__meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-detail__meta-row svg {
  width: 14px;
  height: 14px;
  fill: #746E66;
  flex-shrink: 0;
}

.lp-detail__meta-row span {
  font-size: 14px;
  color: #4B5563;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-detail__meta-row strong {
  font-weight: 700;
  color: #1A1613;
}

/* About card */
.lp-detail__about {
  padding: 16px;
}

.lp-detail__about-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.76px;
  color: #746E66;
  margin-bottom: 10px;
}

.lp-detail__about p {
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
  margin: 0;
}

/* Map card — faux decorative map canvas + "Open in Maps" footer strip */
.lp-detail__map-canvas {
  position: relative;
  height: 172px;
  background-color: #E7ECF1;
  background-image:
    linear-gradient(90deg, transparent calc(38% - 4px), #FFFFFF calc(38% - 4px), #FFFFFF calc(38% + 4px), transparent calc(38% + 4px)),
    linear-gradient(0deg, transparent calc(45% - 3px), #FFFFFF calc(45% - 3px), #FFFFFF calc(45% + 3px), transparent calc(45% + 3px)),
    linear-gradient(58deg, transparent calc(70% - 2px), #EDF1F5 calc(70% - 2px), #EDF1F5 calc(70% + 2px), transparent calc(70% + 2px)),
    linear-gradient(125deg, transparent 62%, #CFE3F2 62%, #CFE3F2 74%, transparent 74%),
    radial-gradient(circle at 18% 82%, #D8E8D4 0, #D8E8D4 64px, transparent 65px);
}

.lp-detail__map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

.lp-detail__map-pin svg {
  width: 30px;
  height: 30px;
  fill: #294735;
}

.lp-detail__map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #FFFFFF;
  border-top: 1px solid #EAE6E1;
}

.lp-detail__map-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "Open in Maps" takes brandText (event_map_preview.dart). */
.lp-detail__map-footer-left svg {
  width: 14px;
  height: 14px;
  fill: #294735;
}

.lp-detail__map-footer-left span {
  font-size: 14px;
  font-weight: 600;
  color: #294735;
}

.lp-detail__map-footer > svg {
  width: 12px;
  height: 12px;
  fill: #746E66;
}

.lp-detail__cta {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #F0EDE8;
  background: #FFFFFF;
  flex-shrink: 0;
}

.lp-detail__cta-invite {
  flex: 1;
  height: 48px;
  border: none;
  border-radius: 16px;
  background: #294735;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: default;
}

.lp-detail__cta-invite svg {
  width: 20px;
  height: 20px;
  fill: #FFFFFF;
}

.lp-detail__cta-calendar {
  width: 48px;
  height: 48px;
  border: 1.5px solid #F0EDE8;
  border-radius: 12px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  flex-shrink: 0;
}

.lp-detail__cta-calendar svg {
  width: 22px;
  height: 22px;
  fill: #294735;
}

/* Detail overlay font bump for larger screens */
@media (min-width: 1024px) {
  .lp-detail__title { font-size: 26px; }
  .lp-detail__meta-row span { font-size: 16px; }
  .lp-detail__about p { font-size: 16px; }
  .lp-detail__cta-invite { font-size: 18px; }
  .lp-detail__cta-chat { font-size: 18px; }
  .lp-detail__cta-apply { font-size: 18px; }
}

/* ===== Event Detail (hero badges, participants, CTA variants) ===== */

.lp-detail__visibility {
  position: absolute;
  top: 13px;
  right: 54px;
  height: 36px;
  border-radius: 18px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  z-index: 2;
}

.lp-detail__visibility svg {
  width: 16px;
  height: 16px;
  fill: #FFFFFF;
}

.lp-detail__visibility--public {
  background: rgba(5,150,105,0.9);
}

.lp-detail__visibility--friends {
  background: rgba(99,102,241,0.9);
}

.lp-detail__visibility--private {
  background: rgba(217,119,6,0.9);
}

.lp-detail__creator {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 36px 6px 8px;
  background: rgba(0,0,0,0.5);
  border-radius: 20px;
  z-index: 2;
}

.lp-detail__creator-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lp-detail__creator-name {
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
}

.lp-detail__count {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #294735;
  border-radius: 20px;
  z-index: 2;
}

.lp-detail__count svg {
  width: 16px;
  height: 16px;
  fill: #FFFFFF;
}

.lp-detail__count span {
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
}

/* Participants card (custom events) — row list */
.lp-detail__plist {
  padding: 14px 16px 6px;
}

.lp-detail__plist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.lp-detail__plist-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.88px;
  color: #746E66;
}

.lp-detail__plist-seeall {
  font-size: 12px;
  font-weight: 600;
  color: #294735;
}

.lp-detail__prow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #F6F4F0;
}

.lp-detail__prow:last-child {
  border-bottom: none;
}

.lp-detail__pavatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lp-detail__pbadge {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-detail__pbadge svg {
  width: 10px;
  height: 10px;
  fill: #FFFFFF;
}

.lp-detail__pbadge--host { background: #294735; }
.lp-detail__pbadge--going { background: #16A34A; }
.lp-detail__pbadge--invited { background: #FBBF24; }

.lp-detail__pinfo {
  flex: 1;
  min-width: 0;
}

.lp-detail__pname {
  font-size: 14px;
  font-weight: 500;
  color: #1A1613;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-detail__pname--pending {
  color: #59534C;
}

.lp-detail__psub {
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-detail__psub--user { color: #A7A29B; }
.lp-detail__psub--invited { color: #B45309; }

.lp-detail__pchat {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #EAE6E1;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-detail__pchat svg {
  width: 18px;
  height: 18px;
  fill: #454039;
}

.lp-detail__cta-chat {
  flex: 1;
  height: 48px;
  border: none;
  border-radius: 16px;
  background: #294735;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: default;
}

.lp-detail__cta-chat svg {
  width: 20px;
  height: 20px;
  fill: #FFFFFF;
}

.lp-detail__cta-apply {
  flex: 1;
  height: 48px;
  border: none;
  border-radius: 16px;
  background: #294735;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: default;
}

.lp-detail__cta-apply svg {
  width: 20px;
  height: 20px;
  fill: #FFFFFF;
}

/* ===== Catalog detail overlays =====
   (systems/product/xplr-app/lib/features/theater/screens/play_details_screen.dart and
    systems/product/xplr-app/lib/features/museum/screens/exhibition_details_screen.dart)

   Both screens share one scaffold that differs from the event-detail overlays
   above: a landscape 4:3 hero instead of the 240px band (adr-0047 §2), the
   warm app ground (#FBF9F6 = bgApp) under the sheet so its white cards lift
   off, and inline sections (fact strip, credits, performances, hours) rather
   than the event screen's bordered cards.

   NOT replicated: the 24px sheet-over-hero lip. The app draws it with a
   Transform.translate inside a SingleChildScrollView, where hero and sheet
   scroll as one body; here the hero is a fixed flex child and only the sheet
   scrolls, so a pinned rounded lip would read as a mask over a stationary
   image. The six event overlays above are flush hero-to-content too. */
.lp-detail--catalog {
  background: #FBF9F6;
}

.lp-detail--catalog .lp-detail__hero {
  height: 292px;                /* screenWidth * 3/4 at the 390px canvas */
}

.lp-detail--catalog .lp-detail__content {
  padding: 20px 20px 28px;      /* EdgeInsets.fromLTRB(20, 20, 20, 16) */
}

/* Signed-in exhibitions carry the bottom CTA bar, so the last hours rows need
   room to clear it (exhibition_details_screen.dart:269 — 140 vs 24). */
.lp-detail--catalog .lp-detail__content--cta {
  padding-bottom: 140px;
}

.lp-detail--catalog .lp-detail__title {
  font-weight: 900;
  color: #1A1613;
  line-height: 1.15;
}

/* Top-right chrome stack (§4.10/§4.11): three-dot on top, share 44px below. */
.lp-detail__share {
  position: absolute;
  top: 57px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.lp-detail__share svg {
  width: 18px;
  height: 18px;
}

/* Over-media category caption (adr-0020): the frozen dark substrate carries a
   pastel family dot. Plays pass their work type as the label and ride the
   'theater' family colour. */
.lp-detail__caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.8);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.68px;
  color: #FFFFFF;
}

.lp-detail__caption-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #A5B4FC;
  box-shadow: 0 0 4px rgba(165, 180, 252, 0.5);
}

/* Over-photo interest toggle (adr-0036), inactive state: one constant
   warm-near-black frosted substrate, outline glyph in muted near-white. */
.lp-detail__toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 12, 9, 0.78);
  border: 1px solid rgba(245, 241, 234, 0.18);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: rgba(245, 241, 234, 0.72);
}

.lp-detail__toggle svg {
  width: 16px;
  height: 16px;
  fill: rgba(245, 241, 234, 0.72);
}

/* Fact strip under the title — 15px muted glyph, 9px gutter, 8px row gap,
   20px below (play_details_screen.dart _buildFactStrip). */
.lp-detail__facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.lp-detail__fact {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lp-detail__fact svg {
  width: 15px;
  height: 15px;
  fill: #746E66;
  flex-shrink: 0;
}

.lp-detail__fact span {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #2C2822;
}

/* Synopsis — heading + body on plays ("About the play"); the exhibition
   overview is body-only (exhibition_details_screen.dart _buildOverview). */
.lp-detail__synopsis-label {
  font-size: 18px;
  font-weight: 500;
  color: #1B1813;
  margin-bottom: 4px;
}

.lp-detail__prose {
  font-size: 14px;
  line-height: 1.625;
  color: #59534C;
  margin: 0;
}

.lp-detail__prose + .lp-detail__prose {
  margin-top: 10px;
}

/* Section label: uppercase 11/700/0.8 + trailing hairline rule. Shared by
   CAST & CREDITS, PERFORMANCES and OPENING HOURS. */
.lp-detail__seclabel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}

/* The credits header is a tap target in the app, so it adds vertical:6 on top
   of the 22 gap — do not "fix" the resulting 28. */
.lp-detail__seclabel--toggle {
  padding: 6px 0;
}

.lp-detail__seclabel-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #746E66;
}

.lp-detail__seclabel-rule {
  flex: 1;
  height: 1px;
  background: #F6F4F0;
}

.lp-detail__seclabel svg {
  width: 18px;
  height: 18px;
  fill: #746E66;
  flex-shrink: 0;
}

/* Credits definition list: fixed 116px uppercase key column, hairline between
   rows, the director row a weight heavier. */
.lp-detail__credits {
  margin-top: 2px;
}

.lp-detail__credit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid #F6F4F0;
}

.lp-detail__credit:first-child {
  border-top: none;
}

.lp-detail__credit-key {
  width: 116px;
  flex: 0 0 116px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.3;
  color: #746E66;
}

.lp-detail__credit-val {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #1B1813;
}

.lp-detail__credit-val--lead {
  font-weight: 600;
}

/* Month stepper (play_month_stepper.dart). A lone upcoming month sits at index
   0 of 1, so BOTH arrows render disabled — the adr-0010 §2 flattened trio. */
.lp-detail__monthstep {
  margin: 14px 0 12px;
  padding: 7px 8px;
  background: #FFFFFF;
  border: 1px solid #F6F4F0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lp-detail__monthstep-arrow {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #F6F4F0;
  border: 1px solid #EFEBE7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-detail__monthstep-arrow svg {
  width: 20px;
  height: 20px;
  fill: #CAC5BF;
}

.lp-detail__monthstep-label {
  font-size: 16px;
  font-weight: 600;
  color: #1B1813;
}

/* Performances card (play_performances_list.dart): 44px date block, time,
   then the brand-tinted invite square and the neutral tickets square. */
.lp-detail__perfs {
  background: #FFFFFF;
  border: 1px solid #F6F4F0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.lp-detail__perf {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border-top: 1px solid #F6F4F0;
}

.lp-detail__perf:first-child {
  border-top: none;
}

.lp-detail__perf-date {
  width: 44px;
  flex: 0 0 44px;
  text-align: center;
}

.lp-detail__perf-wd {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #746E66;
}

.lp-detail__perf-day {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #1B1813;
}

.lp-detail__perf-time {
  flex: 1;
  min-width: 0;
  margin-left: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #2C2822;
}

.lp-detail__perf-action {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-detail__perf-action svg {
  width: 16px;
  height: 16px;
}

.lp-detail__perf-action--invite {
  background: #E4EFDB;
  margin-right: 6px;
}

.lp-detail__perf-action--invite svg {
  fill: #1F3829;
}

.lp-detail__perf-action--tickets {
  background: #FFFFFF;
  border: 1px solid #F6F4F0;
  margin-left: 10px;
}

.lp-detail__perf-action--tickets svg {
  fill: #59534C;
}

/* "More info" external-link card (exhibition_details_screen.dart _buildMoreInfo) */
.lp-detail__moreinfo {
  margin-top: 20px;
  padding: 12px 16px;
  background: #FCFAF6;
  border: 1px solid #F6F4F0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #2C2822;
}

.lp-detail__moreinfo svg {
  width: 16px;
  height: 16px;
  fill: #59534C;
  flex-shrink: 0;
}

/* Opening-hours table — a fixed Mon-Sun list with the "· Today" marker on the
   mock's frozen day (Thursday). */
.lp-detail__hours {
  margin-top: 14px;
}

.lp-detail__hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 14px;
  color: #59534C;
}

/* The map is the LAST section on both screens (operator ruling 2026-07-28),
   with the 16px card-to-card gap its call sites supply. */
.lp-detail--catalog .lp-detail__map {
  margin-top: 16px;
  margin-bottom: 0;
}

/* Exhibition plan CTA (exhibition_bottom_bar.dart): a 52px brand pill under a
   fade to the app ground. Inert in the mockup — pointer-events are off. */
.lp-detail__catalog-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 56px 16px 14px;
  background: linear-gradient(to bottom, rgba(251, 249, 246, 0) 0%, #FBF9F6 30%);
  pointer-events: none;
}

.lp-detail__catalog-cta-btn {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 16px;
  background: #294735;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: default;
}

.lp-detail__catalog-cta-btn svg {
  width: 20px;
  height: 20px;
  fill: #FFFFFF;
}

/* ===== Movie detail (movie_details_screen.dart) =====
   The one catalog detail whose title lives ON the photo, because the hero is a
   full poster rather than a landscape cover.

   Geometry deviation, deliberate: the app's poster is screenWidth * 1.5 (585px
   at this 390px canvas) and shares ONE scroll view with the sheet, so it
   scrolls away and the content still gets the whole screen. This mockup pins
   the hero (.lp-detail__hero is flex-shrink:0) and scrolls only the content, so
   a 585px poster would letterbox the sheet into ~250px. The poster is capped at
   400px instead: the canvas is 390 wide, so 400 is about the floor that still
   reads PORTRAIT — go lower and it becomes a landscape cover like the other
   three details, which is the one thing this hero must not look like. At 400 the
   Synopsis, Director and Cast all land above the fold and the showtimes card is
   one scroll down. Every other measurement on this screen is the app's. */
.lp-detail--movie .lp-detail__hero {
  height: 400px;
}

/* Poster stand-in, the movie-card treatment at hero scale (the .lp-movie-card__
   poster glyph is the same 50%-white film camera on the same gradient). Sits
   under .lp-detail__hero-gradient so the bottom half scrims for the title. */
.lp-detail__movie-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-detail__movie-glyph svg {
  width: 72px;
  height: 72px;
  fill: rgba(255, 255, 255, 0.5);
}

/* MovieTitleOverlay + the meta row: left/right 16, bottom 16 from the visible
   image edge. The original-title second line is omitted — these cards carry
   English titles, and the server suppresses original_title when it duplicates. */
.lp-detail__movie-overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  /* The phone column is centred, and unlike the other details' hero chrome this
     one carries flowing text — without this the title centres itself. */
  text-align: left;
}

/* text2xl / w500 / pure white — NOT .lp-detail__title, which is the dark 700
   (900 under --catalog) title the other three details put below the hero. */
.lp-detail__movie-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: #FFFFFF;
}

.lp-detail__movie-metarow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.lp-detail__movie-meta {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.8);
}

/* The star over the photo is #FACC15 — a step brighter than the movie CARD's
   #EAB308, which sits on white. Do not copy one into the other. */
.lp-detail__movie-star {
  width: 14px;
  height: 14px;
  fill: #FACC15;
  flex-shrink: 0;
  margin-right: 4px;
}

.lp-detail__movie-clock {
  width: 14px;
  height: 14px;
  fill: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
  margin-right: 4px;
}

/* The app's separator is the literal string '  ·  ' — two spaces either side. */
.lp-detail__movie-sep {
  padding: 0 6px;
}

/* On a movie the Interested toggle rides the END of the meta row, not the
   hero's bottom-right corner the way the play's does. */
.lp-detail--movie .lp-detail__toggle {
  position: static;
  margin-left: auto;
  flex-shrink: 0;
}

/* Genre pills ride the Synopsis heading, right-aligned and clipped to one 20px
   row (the app wraps them in a fixed-height ClipRect, so a fourth genre that
   does not fit is simply not seen). */
.lp-detail__synopsis-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.lp-detail__synopsis-row .lp-detail__synopsis-label {
  margin-bottom: 0;
  flex-shrink: 0;
}

.lp-detail__genres {
  flex: 1;
  min-width: 0;
  height: 20px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.lp-detail__genre {
  padding: 2px 8px;
  border-radius: 100px;
  background: #F6F4F0;
  font-size: 12px;
  line-height: 16px;
  color: #746E66;
  white-space: nowrap;
}

/* Director and Cast reuse the Synopsis heading (18/500) over a 14px body, each
   12px below the block before it — the movie screen has no uppercase-rule
   section labels and no credits table; that is the play screen's treatment. */
.lp-detail__movie-section {
  margin-top: 12px;
}

/* Trailer pill (trailer_pill.dart, v2.9.0): 28px glass pill in the top bar,
   left of the three-dot plate (plate right 10 + 36 + 8 gap), vertically centred
   on it. Only films with a trailer get it. */
.lp-detail__trailer-pill {
  position: absolute;
  top: 17px;
  right: 54px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  padding: 0 10px 0 7px;
  border-radius: 99px;
  background: rgba(16, 12, 9, 0.4);
  border: 1px solid rgba(245, 241, 234, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(245, 241, 234, 0.9);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

.lp-detail__trailer-pill svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Trailer section (trailer_preview_tile.dart TrailerSection): between Cast and
   the showtimes. 16:9 radius-16 tile, 48px glass play mark, version caption
   bottom-left only when the cinema states it. The mockup shows the still state. */
.lp-detail__trailer {
  position: relative;
  margin-top: 8px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  /* still-frame stand-in: the film's poster gradient, set inline */
}

.lp-detail__trailer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 12, 9, 0.18);
}

.lp-detail__trailer-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(16, 12, 9, 0.5);
  border: 1px solid rgba(245, 241, 234, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.lp-detail__trailer-play svg {
  width: 28px;
  height: 28px;
  fill: #F5F1EA;
}

.lp-detail__trailer-version {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(16, 12, 9, 0.5);
  color: #F5F1EA;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

/* Day stepper (movie_date_stepper.dart). Unlike the play month stepper — where
   a lone upcoming month leaves BOTH arrows flat — a movie run has more days
   ahead of day one, so at index 0 only the left arrow takes the adr-0010 §2
   flattened trio and the right one stays live. */
.lp-detail__daystep {
  margin: 26px 0 12px;
  padding: 7px 8px;
  background: #FFFFFF;
  border: 1px solid #F6F4F0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lp-detail__daystep-arrow {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #F6F4F0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-detail__daystep-arrow svg {
  width: 18px;
  height: 18px;
  fill: #59534C;
}

.lp-detail__daystep-arrow--off {
  background: #F6F4F0;
  border-color: #EFEBE7;
}

.lp-detail__daystep-arrow--off svg {
  fill: #CAC5BF;
}

.lp-detail__daystep-labels {
  text-align: center;
}

.lp-detail__daystep-main {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1B1813;
}

.lp-detail__daystep-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #A7A29B;
}

/* Showtime rows (movie_showtimes_list.dart) share the performances card chrome
   — .lp-detail__perfs / .lp-detail__perf and the invite square. Only the leading
   column differs: a 50px tabular time instead of the play's 44px date block,
   because every row in the card belongs to the one stepped day.
   Rows are ordered by TIME across cinemas, never grouped by cinema.
   The app's second per-row square (Tickets / open_in_new, on sessions with a
   booking_url) is deliberately absent here — operator call 2026-08-14, so the
   row carries one action. Do not "restore" it for fidelity. */
.lp-detail__show-time {
  width: 50px;
  flex: 0 0 50px;
  font-size: 17px;
  font-weight: 600;
  color: #1B1813;
  font-variant-numeric: tabular-nums;
}

.lp-detail__show-cinema {
  flex: 1;
  min-width: 0;
  margin: 0 10px 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: #2C2822;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== END LANDING PAGE ===== */

/* Event Page Styles (e/index.html, the shared-event page): text on the page
   ground, the cover and the map as framed media, the store links as buttons. */
.event-container {
  min-height: 100vh;
  padding: var(--spacing-lg) var(--spacing-md);
  background: transparent;
}

/* Logo row above the event, aligned with the details column. */
.event-topbar {
  display: flex;
  align-items: center;
  max-width: 800px;
  margin: 0 auto var(--spacing-lg);
}

.event-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.event-header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--ink);
}

.event-image {
  width: 100%;
  max-width: 800px;
  height: 400px;
  object-fit: cover;
  border-radius: var(--border-radius);
  margin: 0 auto var(--spacing-lg);
  display: block;
  background: var(--card);
  box-shadow: var(--shadow-media);
}

.event-details {
  max-width: 800px;
  margin: 0 auto;
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  color: var(--ink-2);
  font-size: 0.9rem;
}

.event-meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.event-description {
  margin-bottom: var(--spacing-xl);
  line-height: 1.8;
  color: var(--ink-2);
  font-size: 1rem;
}

.event-map-container {
  margin-bottom: var(--spacing-xl);
}

.event-map {
  width: 100%;
  max-width: 800px;
  height: 400px;
  object-fit: cover;
  border-radius: var(--border-radius);
  display: block;
  margin: 0 auto;
  box-shadow: var(--shadow-media);
  background: var(--card);
}

.event-participants {
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: var(--spacing-lg);
  font-weight: 500;
}

.loading {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--ink-2);
  background: transparent;
}

.error {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--ink-2);
  background: transparent;
}

.error h2 {
  color: var(--ink);
  margin-bottom: var(--spacing-sm);
}

/* App Store Links */
.app-links {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--card-line);
  text-align: center;
}

.app-links h3 {
  margin-bottom: var(--spacing-md);
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.store-badges {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* Buttons: forest with wool text on paper, wool with forest text on forest. */
.store-badge {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--fill);
  border: none;
  border-radius: var(--border-radius);
  color: var(--on-fill);
  text-decoration: none;
  transition: var(--transition);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--fill-shadow);
}

.store-badge:hover {
  background: var(--fill-hover);
  transform: translateY(-2px);
  box-shadow: var(--fill-shadow-hover);
}

/* Deep Link Page Styles */
.deeplink-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, var(--glow-1), transparent 40%),
    radial-gradient(circle at bottom right, var(--glow-2), transparent 40%),
    var(--page);
  background-attachment: fixed;
  padding: var(--spacing-md);
}

.deeplink-card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 20px;
  padding: var(--spacing-xl) var(--spacing-lg);
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-soft);
  animation: fadeInUp 0.6s ease both;
}

.deeplink-logo {
  margin-bottom: var(--spacing-lg);
}

.deeplink-logo-img {
  width: 120px;
  height: auto;
}

.deeplink-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-sm);
}

.deeplink-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--spacing-xs);
  line-height: 1.3;
}

.deeplink-subtitle {
  font-size: 0.95rem;
  color: var(--ink-2);
  margin-bottom: var(--spacing-sm);
}

.deeplink-status {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  min-height: 1.2em;
  margin-bottom: var(--spacing-sm);
}

.open-app-btn {
  display: inline-block;
  width: 100%;
  padding: 14px 24px;
  background: var(--fill);
  color: var(--on-fill);
  text-decoration: none;
  border-radius: var(--border-radius);
  font-size: 1.05rem;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: var(--fill-shadow);
}

.open-app-btn:hover {
  background: var(--fill-hover);
  transform: translateY(-2px);
  box-shadow: var(--fill-shadow-hover);
}

.store-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--card-line);
}

.store-heading {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.store-section .store-badges {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.store-section .store-badge {
  font-size: 0.8rem;
  padding: 10px 16px;
}

.deeplink-footer {
  margin-top: var(--spacing-lg);
  color: var(--ink-2);
  font-size: 0.8rem;
}


/* Legal Pages (privacy, terms, support, delete-account): the page ground with
   two meadow glows at the top, cards on it, forest/wool links underlined
   (the hue matches the text, so the underline marks a link). */
.legal-page {
  min-height: 100vh;
  color: var(--ink);
  /* Fixed radii: a percentage of a long policy page would wash the whole
     first screen, and the ground has to stay paper (or forest). */
  background:
    radial-gradient(circle 560px at left top, var(--glow-1), transparent),
    radial-gradient(circle 480px at right top, var(--glow-2), transparent),
    var(--page);
}

.legal-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.site-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* The wordmark is a <picture>: bleya-wordmark.svg (forest) on paper,
   bleya-wordmark-dark.svg (wool) on forest. */
.brand-link picture {
  display: block;
}

.brand-link .logo {
  display: block;
  width: 116px;
  max-width: none;
}

.top-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.top-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
  background: var(--card);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  transition: var(--transition);
}

.top-nav-link:hover {
  color: var(--ink);
  border-color: var(--accent-line);
  background: var(--accent-tint);
}

/* The current page: a filled pill (forest with wool text on paper, wool with
   forest text on forest). */
.top-nav-link.is-active {
  color: var(--on-fill);
  border-color: var(--fill);
  background: var(--fill);
}

.legal-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.legal-hero {
  position: relative;
  /* its own stacking context, so the glow below can sit under the text */
  isolation: isolate;
  overflow: hidden;
  min-height: 250px;
  padding: 34px;
  border-radius: 28px;
  border: 1px solid var(--card-line);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

/* The meadow glow in the hero's corner: over the hero's ground, under its
   text and chips (z-index -1 inside the isolated hero). Drawn over them it
   took the last chip's text to 3.8:1 in the light theme. */
.legal-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -60px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--glow-3) 0%, transparent 70%);
  pointer-events: none;
}

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.legal-hero h1 {
  margin: 18px 0 12px;
  font-size: clamp(2.35rem, 5vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.legal-lead {
  max-width: 760px;
  font-size: 1.06rem;
  color: var(--ink-2);
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.legal-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
  background: var(--card-inset);
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 500;
}

.legal-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.legal-card {
  border-radius: 24px;
  border: 1px solid var(--card-line);
  background: var(--card);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
}

.policy-toc {
  position: sticky;
  top: 20px;
  min-height: 500px;
  padding: 24px;
}

.policy-toc-title {
  margin-bottom: 14px;
  color: var(--ink-2);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.policy-toc-list {
  list-style: none;
}

.policy-toc-list li + li {
  margin-top: 6px;
}

.policy-toc-list a {
  display: block;
  padding: 11px 12px;
  border-radius: 14px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: var(--transition);
}

.policy-toc-list a:hover {
  color: var(--ink);
  background: var(--accent-tint);
}

.policy-content {
  padding: 34px;
}

.policy-content section + section {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--card-line);
}

.policy-content h2 {
  margin-bottom: 12px;
  font-size: 1.46rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.policy-content h3 {
  margin: 18px 0 8px;
  font-size: 1.04rem;
  line-height: 1.3;
}

.policy-content p {
  color: var(--ink-2);
}

.policy-content p + p {
  margin-top: 12px;
}

.policy-content ul {
  margin: 14px 0 0 20px;
  color: var(--ink-2);
}

.policy-content li + li {
  margin-top: 8px;
}

.policy-content a {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.policy-content a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.policy-highlight {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--highlight-bg);
  border: 1px solid var(--highlight-line);
}

.policy-highlight p,
.policy-highlight ul {
  color: var(--ink);
}

.policy-highlight ul {
  margin-top: 10px;
}

.policy-contact-card {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--card-inset);
  border: 1px solid var(--card-line);
}

.policy-contact-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
  .event-header h1 {
    font-size: 1.5rem;
  }

  .event-image {
    height: 250px;
  }

  .event-map {
    height: 250px;
  }

  .event-meta {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .deeplink-card {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .deeplink-title {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .deeplink-logo-img {
    width: 90px;
  }

  .deeplink-icon {
    font-size: 2.5rem;
  }

  .deeplink-title {
    font-size: 1.1rem;
  }

  .store-section .store-badges {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 960px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .policy-toc {
    position: static;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .legal-shell {
    padding: 18px 16px 48px;
  }

  .site-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .top-nav {
    width: 100%;
  }

  .top-nav-link {
    flex: 1 1 auto;
  }

  .legal-hero {
    padding: 26px 22px;
    border-radius: 24px;
  }

  .policy-content,
  .policy-toc {
    padding: 24px 20px;
  }

  .legal-meta {
    flex-direction: column;
    align-items: flex-start;
  }

}

/* prefers-reduced-motion: the pages hold still. The landing page's own motion
   (js/bleya.js, css/bleya.css) already stops on this setting; this stops the
   rest: the floating glows, the entrance slide, the spinning, pulsing and
   glowing parts of the phone replica, and the deep-link card's entrance. */
@media (prefers-reduced-motion: reduce) {
  .lp-minimal__orb,
  .lp-minimal__content,
  .lp-minimal__subtitle,
  .lp-minimal__phone-wrap,
  .lp-minimal__badges,
  .lp-minimal__footer,
  .lp-feed__story-ring--unseen,
  .lp-feed__compass > svg,
  .lp-feed__ongoing-dot::after,
  .lp-feed__ongoing-badge--live-dot::after,
  .lp-ongoing-dot::after,
  .lp-whats-new__glow,
  .deeplink-card {
    animation: none;
  }
}

/* === App parity pass, 2026-10-13 (app 3.3.0, main a8bafcdd) === */

/* City bar trailing chips (home_screen.dart _buildMapGlyph / _buildSearchGlyph):
   44 px bgCard circles at elevation 3, fg600 22 px glyph; the map chip shows on
   Events only, 8 px left of search. */
.lp-feed__chips {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.lp-feed__chip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.lp-feed__chip svg {
  width: 22px;
  height: 22px;
  fill: #59534C;
}

#pane-home:not([data-type="events"]) .lp-feed__chip--map { display: none; }

/* Switcher new-content dot (home_type_switcher.dart): 8 px brandSolid over the
   label's top-right corner (top -3, right -7), never on the open tab. */
.lp-switcher__label {
  position: relative;
}

.lp-switcher__dot {
  position: absolute;
  top: -3px;
  right: -7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #294735;
}

.lp-switcher__tab--active .lp-switcher__dot { display: none; }

/* Caught-up variant (whats_new_banner.dart CaughtUpBanner, at rest): bgCard,
   borderInput hairline, centred "You're all caught up!" over the linkInk CTA. */
.lp-whats-new--caught {
  flex-direction: column;
  padding: 12px 14px;
  border-color: #EAE6E1;
  text-align: center;
}

.lp-whats-new__caught {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #7C766E;
  line-height: 1.25;
}

.lp-whats-new__caught svg { width: 16px; height: 16px; fill: #7C766E; }

.lp-whats-new__latest {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: #294735;
  line-height: 1.25;
}

.lp-whats-new__latest svg { width: 16px; height: 16px; fill: #746E66; }

/* Interested star on the play and exhibition cards (card_interest_star.dart):
   20 px fg500 glyph, 14 px from the right, 11 px from the bottom. */
.lp-play-card,
.lp-exh-card { position: relative; }

.lp-card-star {
  position: absolute;
  right: 14px;
  bottom: 11px;
  width: 20px;
  height: 20px;
  fill: #746E66;
}

.lp-play-card__pill,
.lp-exh-card__pill { margin-right: 28px; }

/* Next performances row (next_performances_row.dart + play_stub_card.dart):
   204 px ticket stubs, 10 px apart, from three plays a snap rail. */
.lp-stub-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
  padding: 2px 16px 8px;
  margin-bottom: 4px;
  text-align: left;
}

.lp-stub-rail::-webkit-scrollbar { display: none; }

.lp-stub {
  flex: 0 0 204px;
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.lp-stub__photo {
  aspect-ratio: 16 / 9;
  border-radius: 14px 14px 0 0;
}

.lp-stub__title {
  padding: 8px 10px 9px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: #1B1813;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The tear: a 1.5 px dashed line (4 on, 3 off) inset 10 px, with a
   page-coloured 14 px bite centred on each edge. */
.lp-stub__tear {
  position: relative;
  height: 1.5px;
  margin: 0 10px;
  background: repeating-linear-gradient(90deg, #D8D4CE 0 4px, transparent 4px 7px);
}

.lp-stub__tear::before,
.lp-stub__tear::after {
  content: '';
  position: absolute;
  top: -6.25px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FBF9F6;
}

.lp-stub__tear::before { left: -17px; }
.lp-stub__tear::after { right: -17px; }

.lp-stub__stub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 9px;
}

.lp-stub__stub > :first-child { flex: none; }

.lp-stub__day {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #746E66;
  line-height: 1.2;
}

.lp-stub__time {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1;
  color: #1B1813;
  font-variant-numeric: tabular-nums;
}

.lp-stub__where {
  flex: 1;
  min-width: 0;
  padding-left: 8px;
  border-left: 1px solid #F0EDE8;
}

.lp-stub__theater {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #A21CAF;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-stub__stage {
  margin-top: 2px;
  font-size: 11px;
  color: #746E66;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Exhibition card since 2026-09-16 (exhibition_card.dart): PlayCard's shape,
   a 160 px 16:9 image with the 3 px museum accent strip, the museum eyebrow,
   the title and the "can I visit it now?" hours line. Overrides the old
   image-led vertical card above. */
.lp-exh-card {
  display: flex;
  align-items: stretch;
  border-radius: 14px;
}

.lp-exh-card__img {
  position: relative;
  width: 160px;
  flex: 0 0 160px;
  aspect-ratio: auto;
  min-height: 90px;
}

.lp-exh-card__img::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  background: #3B82F6;
}

.lp-exh-card__body {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lp-exh-card__eyebrow {
  font-size: 12px;
  letter-spacing: 0.48px;
  margin-bottom: 3px;
}

.lp-exh-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* museum_hours_status.dart (openAccent): 6 px success dot, then
   "Open now" in successStrong, 14 px. The " · until 19:00" tail is dropped
   when the line does not fit beside the star, which on a 390 dp card it
   never does, so the markup carries the state word alone. */
.lp-exh-card__hours {
  margin: 8px 28px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.2;
  color: #7C766E;
  white-space: nowrap;
  overflow: hidden;
}

.lp-exh-card__hours::before {
  content: '';
  flex: 0 0 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
}

.lp-exh-card__hours b {
  font-weight: 400;
  color: #15803D;
}

/* Venue pages (spec 2026-09-25 §4.2): on a detail page the place row links to
   the venue page — the name in linkInk, w600, no chevron — and the venue's
   logo takes the pin's place as a 20 px circle (venue_logo_slot.dart). The
   landing draws images as colour blocks, so a logo is a colour-block circle. */
.lp-venue-link {
  font-weight: 600;
  color: #294735;
}

.lp-venue-logo {
  position: relative;
  flex: 0 0 auto;
  width: 17px;                  /* iconSize + 2, the logo overhangs it */
  height: 15px;
}

.lp-detail__meta-row .lp-venue-logo {
  width: 16px;
  height: 14px;
}

.lp-venue-logo::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: var(--logo, #294735);
  box-shadow: inset 0 0 0 0.73px #F6F4F0;
}

.lp-detail__meta-row span { color: #59534C; }

/* An enabled month arrow (play_month_stepper.dart): bgCard, borderCard, fg600. */
.lp-detail__monthstep-arrow--on {
  background: #FFFFFF;
  border-color: #F6F4F0;
}

.lp-detail__monthstep-arrow--on svg { fill: #59534C; }

/* "More at this place" (more_at_venue_section.dart): up to five other
   upcoming items at the venue under a listing, play or exhibition, below the
   map; "See all" only when there are more than five. Rows are
   venue_item_row.dart: 64×48 thumb, one-line title, one date line. */
.lp-more {
  background: #FFFFFF;
  border: 0.73px solid #F6F4F0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-top: 4px;              /* the map's 20 px tail, after its 16 px card gap */
  text-align: left;
}

.lp-detail--catalog .lp-more { margin-top: 20px; }

.lp-more__eyebrow {
  padding: 16px 16px 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.04px;
  color: #1B1813;
}

.lp-more__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  cursor: pointer;
}

.lp-more__row + .lp-more__row { border-top: 0.73px solid #F6F4F0; }

.lp-more__thumb {
  flex: 0 0 64px;
  height: 48px;
  border-radius: 10px;
}

.lp-more__text {
  flex: 1;
  min-width: 0;
}

.lp-more__title,
.lp-more__date {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-more__title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: #1B1813;
}

.lp-more__date {
  margin-top: 2px;
  font-size: 13px;
  color: #746E66;
}

.lp-more__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px 16px;
  border-top: 1px solid #EAE6E1;
  font-size: 14px;
  font-weight: 600;
  color: #746E66;
}

.lp-more__all svg {
  width: 16px;
  height: 16px;
  fill: #746E66;
}

/* The exhibition hours fact row (museum_hours_status.dart, plain): 14 px,
   regular weight; "Open now" in textPrimary, the tail in textSecondary. */
.lp-detail__fact--hours span {
  font-weight: 400;
  color: #7C766E;
}

.lp-detail__fact--hours b {
  font-weight: 400;
  color: #1A1613;
}

/* Group icon (group_avatar.dart, ruling 2026-09-28) at the Chats row's 48:
   27 px faces ringed 1.5 in bgCard — two on top, one centred below — and a
   18 px "+N" pill (bgMuted, fg700 bold 10) past three members. Replaces the
   two-face stack with the people badge. */
.lp-chat__face {
  position: absolute;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
  box-sizing: border-box;
}

.lp-chat__face--a { left: 0; top: 0; }
.lp-chat__face--b { left: 21px; top: 0; }
.lp-chat__face--c { left: 11px; top: 21px; }

.lp-chat__more {
  position: absolute;
  right: -10px;
  bottom: -2px;
  height: 18px;
  min-width: 18px;
  padding: 0 4.5px;
  box-sizing: border-box;
  border-radius: 9px;
  background: #F6F4F0;
  border: 1.5px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #454039;
}