/* ==========================================================
   culturALT — tokens from Figma "CulturALT — Design System"
   ========================================================== */
@font-face {
  font-family: "Nohemi";
  src: local("Nohemi Medium"), local("Nohemi-Medium"),
       url("../assets/fonts/Nohemi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Brand */
  --orange: #E05326;      /* Brand/Terracota */
  --orange-soft: #F9DDD4; /* District favourite fill */
  --blue: #A4C9E4;
  --mustard: #FBCB69;
  /* Neutrals */
  --ink: #2E2E2E;         /* Neutral/Black */
  --ink-soft: #726C5F;
  --gray: #9E9E9A;        /* Neutral/Gray */
  --line: #DFDFDB;        /* Neutral/Gray Light */
  --white-gray: #F0F0F0;  /* Neutral/White Gray */
  --paper: #FFFFFF;
  --map-bg: #F3F1EA;
  /* Status */
  --success: #748B57;
  --error: #CC4B4E;
  --error-bg: #FBE9E9;

  --font-heading: "Nohemi", system-ui, sans-serif;
  --font-button: "Inter", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 28px;
  --space-3xl: 32px;
  --radius-pill: 999px;
  --shadow-card: 0 12px 26px -18px rgba(46, 44, 40, .5);

  /* Top spacing: real status bar on phones, 54px (Figma status bar) in the desktop frame */
  --top: calc(env(safe-area-inset-top) + 12px);

  --device-w: 393px;
  --device-h: 852px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink);
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  display: grid;
  place-items: center;
  min-height: 100dvh;
}
h1, h2, h3, p, ul { margin: 0; }
/* Copy without widows: titles and centred texts split into even lines ("Disfruta de la / experiencia completa"),
   paragraphs never leave a single word alone on the last line. No justified text, so no rivers. */
h1, h2, h3, .title, .title-s, .center { text-wrap: balance; }
p, li { text-wrap: pretty; }
.title-line { display: block; }   /* a line break chosen by hand */
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- Device frame ---------- */
.device {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
}
/* On a computer or tablet the app is always an iPhone 16 (393 × 852, the Figma screens). If the window is smaller,
   the whole phone is scaled down (--device-scale, set by js/device.js): it never stretches or changes proportions.
   On a phone (narrower than 500px) it fills the screen. */
@media (min-width: 500px) {
  :root { --top: 54px; }
  html, body { height: 100%; overflow: hidden; }
  body { min-height: 0; }
  .device {
    position: fixed;          /* centred on the window, whatever its size */
    left: 50%;
    top: 50%;
    margin: calc(var(--device-h) / -2) 0 0 calc(var(--device-w) / -2);
    width: var(--device-w);
    height: var(--device-h);
    border-radius: 44px;
    box-shadow: 0 0 0 10px #111, 0 30px 80px rgba(0, 0, 0, .5);
    transform: scale(var(--device-scale, 1));
  }
}

/* ---------- Icons ---------- */
.icon-18 { width: 18px; height: 18px; flex: none; }
.icon-20 { width: 20px; height: 20px; flex: none; }
.icon-24 { width: 24px; height: 24px; flex: none; }
.icon-32 { width: 32px; height: 32px; flex: none; }

/* ---------- Screens & router ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--paper);
}
.screen.is-active { display: flex; animation: screen-in .28s ease both; }
.screen.is-back.is-active { animation-name: screen-back; }
@keyframes screen-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes screen-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

.screen__form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.screen__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--top) var(--space-lg) var(--space-xl);
  scrollbar-width: none;
}
.screen__body::-webkit-scrollbar { display: none; }

/* ---------- Header ---------- */
.head { display: flex; flex-direction: column; gap: var(--space-md); }
.head--tight { gap: 14px; }
.head__text { display: flex; flex-direction: column; gap: var(--space-2xs); }
/* Onboarding (epic 1): content starts 8px below the status bar (Figma y = 62) */
.screen--onboarding .screen__body { padding-top: calc(var(--top) + 8px); }
.title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  color: var(--ink);
}
.title-s {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: var(--ink);
}
.subtitle { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.small { font-size: 12px; line-height: 16px; color: var(--ink-soft); }
.center { text-align: center; }

.back {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  transition: background-color .15s ease;
}
.back:hover { background: var(--white-gray); }

/* Stepper row: back · progress · skip */
.stepper-row {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  height: 40px;
}
.stepper { display: flex; gap: var(--space-2xs); justify-self: center; }
.stepper span { width: 40px; height: 4px; border-radius: 99px; background: var(--line); }
.stepper[data-step="1"] span:nth-child(-n+1),
.stepper[data-step="2"] span:nth-child(-n+2),
.stepper[data-step="3"] span:nth-child(-n+3),
.stepper[data-step="4"] span:nth-child(-n+4) { background: var(--orange); }
.skip {
  justify-self: end;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
  text-decoration: none;
}

/* ---------- Buttons ---------- */
.btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 27px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-button);
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}
.btn:active { transform: scale(.98); }
.btn > .icon-20 { margin-block: -1px; }   /* 20px logos inside the 19px line: the button stays 51px */
.btn--primary { background: var(--orange); color: var(--paper); border-color: var(--orange); }
.btn--primary:hover { filter: brightness(1.06); }
.btn--outline { background: transparent; color: var(--orange); border-color: var(--orange); }
.btn--outline:hover { background: rgba(224, 83, 38, .08); }
.btn--social { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn--social:hover { background: #fafaf8; }
.btn--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--dark:hover { filter: brightness(1.15); }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--line);
  border-color: var(--line);
  color: var(--gray);
  pointer-events: none;
}

.link { font-weight: 600; font-size: 14px; line-height: 20px; text-decoration: none; }
.link--accent { color: var(--orange); }
.link--light { color: var(--paper); text-decoration: underline; text-underline-position: from-font; height: 26px; }

.inline-link { font-size: 14px; line-height: 20px; color: var(--ink-soft); text-align: center; }
.inline-link a,
.inline-link .text-btn {
  margin-left: 6px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}

.bottom-bar {
  position: relative;
  z-index: 6;
  flex: none;
  display: flex;
  padding: var(--space-lg) var(--space-xl) calc(var(--space-3xl) + env(safe-area-inset-bottom) / 2);
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.bottom-bar--split { gap: 9px; }
.bottom-bar--split .btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; }

/* ---------- Form fields ---------- */
.fields { display: flex; flex-direction: column; gap: var(--space-md); }
.field { display: flex; flex-direction: column; gap: var(--space-xs); }
.field__label { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ink); }
.field__help { font-size: 12px; line-height: 16px; color: var(--ink-soft); }
.field__help:empty { display: none; }
.field__help a,
.field__help button { margin-left: 4px; font-weight: 700; color: var(--orange); text-decoration: none; }

.input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);   /* 46px high with the border, as in Figma */
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease;
}
.input::placeholder { color: var(--gray); }
.input:focus { border-color: var(--ink-soft); }
.field.is-success .input { border-color: var(--success); }
.field.is-success .field__help { color: var(--success); }
.field.is-error .input { border-color: var(--error); }
.field.is-error .field__help { color: var(--error); }

.input-wrap { position: relative; }
.input-wrap .input { padding-right: 48px; }
.input-wrap__eye {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  color: var(--gray);
}
.field.is-error .input-wrap__eye { color: var(--error); }
.input-wrap__eye[aria-pressed="true"] { color: var(--ink); }

/* Password strength (4 bars) */
.strength { display: flex; gap: 6px; }
.strength span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background-color .2s ease; }
.strength[data-score="1"] span:nth-child(-n+1) { background: var(--error); }
.strength[data-score="2"] span:nth-child(-n+2) { background: var(--mustard); }
.strength[data-score="3"] span:nth-child(-n+3),
.strength[data-score="4"] span:nth-child(-n+4) { background: var(--success); }

.terms { padding: 0 0 var(--space-md); }

/* ---------- Sign up providers (1.3a/b) ---------- */
.providers {
  margin-top: auto;
  margin-bottom: 61px;   /* + 24px body padding = 85px, as in Figma */
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}
.stack-12 { display: flex; flex-direction: column; gap: var(--space-md); }
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: 20px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-soft);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.providers__foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); }

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: var(--space-sm) 14px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 16px;
}
.banner--error { background: var(--error-bg); color: var(--error); }

/* ---------- Log in footer ---------- */
.login-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding-bottom: var(--space-md);
}

/* ---------- Empty state (1.1d) ---------- */
.empty {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-bottom: 40px;
}
.empty__img { width: 250px; height: 250px; object-fit: cover; }
.empty--sent { gap: var(--space-xs); padding-bottom: 41px; }   /* centred between the status bar and the bottom bar, as in Figma */
.empty--sent .empty__text { gap: 0; margin-top: calc(-1 * var(--space-xs)); }
.empty__text { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); max-width: 287px; }

/* ---------- Interests (1.2) ---------- */
.search {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 7px var(--space-xs);   /* 8px − 1px border */
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  margin-top: calc(var(--space-md) - var(--space-xl));
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}
.search input::placeholder { color: var(--ink-soft); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search:focus-within { box-shadow: inset 0 0 0 1px var(--ink-soft); }

.topics { display: flex; flex-direction: column; gap: 18px; margin-top: calc(var(--space-md) - var(--space-xl)); }
.topic__head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  text-align: left;
}
.topic__head svg { width: 22px; height: 22px; color: var(--orange); flex: none; }
.topic__head .i-up { display: none; }
.topic.is-open .topic__head .i-up { display: block; }
.topic.is-open .topic__head .i-down { display: none; }
.topic__chips { display: none; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.topic.is-open .topic__chips { display: flex; }

.chip {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--blue); }
.chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); }

/* ---------- Map (1.6) ---------- */
.screen__body--map { gap: var(--space-md); padding-bottom: 0; overflow: hidden; position: relative; }
.map {
  flex: 1;
  min-height: 0;
  margin: 0 calc(-1 * var(--space-lg));
  background: var(--map-bg);
  overflow: hidden;
}
.map { position: relative; }
.map svg { display: block; width: 100%; height: 100%; }

/* Map zoom (onboarding, Search, venue profile): pinch or wheel to zoom, drag to move */
.zoomable > svg { touch-action: none; }
.zoomable.is-movable > svg { cursor: grab; }
.venue__map { touch-action: pan-y; }                         /* the page still scrolls over the map… */
.venue__map.is-zoomed { touch-action: none; }                /* …until it is zoomed in and can be moved */
.district { cursor: pointer; outline: none; }
.district path {
  fill: var(--paper);
  stroke: var(--line);
  stroke-width: 1;
  stroke-linejoin: round;
  fill-rule: evenodd;
  transition: fill .15s ease;
}
/* Onboarding maps (1.6a/b) use the Figma "Outline" state over parks and roads: no fill, only the border */
.map-base { pointer-events: none; }
.map-base :is(path, use) { vector-effect: non-scaling-stroke; }   /* roads keep their width when zoomed */
.map .district path { fill: transparent; stroke: #A79E84; stroke-width: 1.1; }
.district text {
  font-family: var(--font-body);
  font-weight: 600;
  fill: var(--ink-soft);
  text-anchor: middle;
  pointer-events: none;
}
.district--label { pointer-events: none; }
/* District names: a halo in the map colour keeps lines and other names at a distance (stroke width set by fitLabels) */
.map-label { paint-order: stroke; stroke: var(--map-bg); stroke-linejoin: round; }
.district.is-live .map-label { stroke: var(--orange); }
.district.is-fav .map-label { stroke: var(--orange-soft); }
.district .marker { display: none; pointer-events: none; }
@media (hover: hover) { .district:hover path { fill: #FDF3EF; } }
@media (hover: hover) { .map .district:not(.is-live):not(.is-fav):hover path { fill: rgba(224, 83, 38, .08); } }
.district:focus-visible path { stroke: var(--orange); stroke-width: 2; }
.district.is-live path { fill: var(--orange); fill-opacity: .9; stroke: var(--orange); }
.district.is-live text { fill: var(--paper); font-weight: 700; }
.district.is-fav path { fill: var(--orange-soft); stroke: var(--orange); stroke-width: 1.5; }
.district.is-fav text { fill: var(--orange); font-weight: 700; }
.district.is-live .marker--pin,
.district.is-fav .marker--check { display: inline; }
.map .district path.district__fill { stroke: none; }   /* L'Eixample: fill (Ruzafa cut out) + outer border only */
.map .district path.district__line { fill: none; stroke-linecap: round; }

.map-hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-xl);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: 48px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: 0 6px 20px rgba(46, 44, 40, .08);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--ink);
  color: var(--ink);
}
.map-hint svg { color: var(--gray); }
.map-hint.is-selected svg { color: var(--orange); }

/* ---------- Notifications (1.4) ---------- */
.notif-list { display: flex; flex-direction: column; gap: var(--space-md); margin-top: 4px; }
.notif-list li { display: flex; align-items: center; gap: var(--space-md); }
.notif-list__icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--blue);
  color: var(--ink);
}
.notif-list__title { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ink); }
.notif-list__desc { font-size: 12px; line-height: 16px; color: var(--ink-soft); }

.notif-preview { position: relative; height: 176px; margin: auto var(--space-2xs) 10px; flex: none; }
.notif-preview__card {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 96px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: .5px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow-card);
  transform-origin: 50% 0;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s ease;
}
.notif-preview__card > * { transition: opacity .3s ease; }
.notif-preview__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.notif-preview__text p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-preview__text b { font-weight: 600; }
/* The stack (1.4a): front card, then two lighter ones peeking out below. Every few seconds the front one
   slides up and fades out, the others move forward and it comes back in at the back. */
.notif-preview__card[data-slot="0"] { z-index: 3; }
.notif-preview__card[data-slot="1"] { z-index: 2; transform: translateY(18px) scale(.94); opacity: .7; }
.notif-preview__card[data-slot="2"] { z-index: 1; transform: translateY(34px) scale(.88); opacity: .45; }
.notif-preview__card[data-slot="out"] { z-index: 4; transform: translateY(-28px) scale(1.02); opacity: 0; }
.notif-preview__card[data-slot="in"] { z-index: 0; transform: translateY(46px) scale(.82); opacity: 0; transition: none; }
.notif-preview__card:not([data-slot="0"]) > * { opacity: 0; }   /* only the front card shows its text */

/* Snackbar / toast (1.4c) */
.snackbar,
.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--ink);
  box-shadow: var(--shadow-card);
  color: var(--paper);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}
.snackbar { position: relative; z-index: 7; margin: 0 var(--space-lg); }
.snackbar__action { color: var(--orange); font-weight: 600; }

.toast {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: 124px;
  width: calc(100% - 40px);
  max-width: 353px;
  justify-content: center;
  text-align: center;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* iOS permission alert (1.4b) */
.dim {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .4);
  animation: fade .2s ease both;
}
@keyframes fade { from { opacity: 0; } }
.ios-alert {
  width: 270px;
  overflow: hidden;
  border-radius: 14px;
  background: #F5F5F7;
  font-family: var(--font-button);
  color: #000;
  text-align: center;
  animation: pop .25s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes pop { from { transform: scale(1.1); opacity: 0; } }
.ios-alert__body { display: flex; flex-direction: column; gap: 4px; padding: 20px 16px 18px; }
.ios-alert__title { font-weight: 600; font-size: 17px; line-height: 22px; }
.ios-alert__desc { font-size: 13px; line-height: 18px; }
.ios-alert__actions { display: flex; border-top: .5px solid rgba(61, 61, 66, .3); }
.ios-alert__actions button { flex: 1; height: 44px; font-family: var(--font-button); font-size: 17px; color: #007AFF; }
.ios-alert__actions button + button { border-left: .5px solid rgba(61, 61, 66, .3); }
.ios-alert__actions .is-bold { font-weight: 600; }

/* ==========================================================
   For you page (568:330 · 569:492 · 570:859 · 624:3449 · 634:5508 · 634:5407 · 573:4158 · 783:5840 · 507:759)
   ========================================================== */
.screen__body--feed { gap: var(--space-md); padding-bottom: 128px; }   /* room for the floating tab bar */
.title--brand { color: var(--orange); text-wrap: balance; }
.feed-head { display: flex; flex-direction: column; gap: var(--space-2xs); }
.feed-head__greeting { font-size: 16px; line-height: 24px; color: var(--ink-soft); }
.feed-block { display: flex; flex-direction: column; gap: var(--space-xl); }
.list-head { display: flex; flex-direction: column; gap: var(--space-xs); }

/* Reason on the pick card ("Because you like Photography"), opens 2.1d */
.pick__reason {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(158, 158, 154, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  color: var(--paper);
}

/* "Not quite right?" (588:6605) */
.tune-card { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); border: 1px solid var(--line); border-radius: 20px; }
.tune-card__title { font-weight: 700; font-size: 16px; line-height: 24px; color: var(--ink); }
.tune-card__desc { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.tune-card__link { align-self: flex-start; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--orange); text-decoration: none; }
.tune-card__link:hover { text-decoration: underline; }

/* "Tell us what you like" / "Your next plan starts here" (769:5623) */
.cta-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: var(--space-xl) var(--space-xs); border: 1px solid var(--line); border-radius: 16px; }
.cta-card__text { display: flex; flex-direction: column; align-items: center; max-width: 305px; text-align: center; }

/* Could not load (570:859) */
/* 847:13093: text only, "Try again" as an orange link under it */
.empty--error { gap: var(--space-xs); padding-bottom: 20px; }
.empty--error .empty__text { gap: 0; max-width: none; text-align: center; }
.empty__link { padding: 4px 8px; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--orange); }
.empty--error .btn,
.btn--wide { width: 287px; max-width: 100%; }

/* 2.1d Why you are seeing this (624:3449) */
.why-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: 37px var(--space-lg) 0;
  border-radius: 24px 24px 0 0;
  background: var(--paper);
  touch-action: none;           /* swipe down to close (the slide in and out is animated in app.js) */
}
#why-layer .sheet-dim { animation: none; }
.why-sheet__handle { position: absolute; left: 50%; top: 10px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line); }
.why-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.why-list li { display: flex; align-items: center; gap: var(--space-md); }
.why-list li[hidden] { display: none; }
.why-list__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); }
.why-list__title { font-size: 14px; line-height: 20px; color: var(--ink); }
.why-list__desc { font-size: 12px; line-height: 16px; color: var(--ink-soft); }
.why-sheet__bar { display: flex; gap: 9px; margin: var(--space-xs) calc(-1 * var(--space-lg)) 0; padding: var(--space-md) var(--space-lg) calc(var(--space-3xl) + env(safe-area-inset-bottom) / 2); }
.why-sheet__bar .btn { flex: 1; padding-inline: 12px; }

.quick-filters {
  flex: none;
  display: flex;
  gap: var(--space-xs);
  margin: 0 calc(-1 * var(--space-lg));
  padding: 0 var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
}
.quick-filters::-webkit-scrollbar { display: none; }
/* Carousels can be dragged with the mouse (see dragScroll in app.js) */
@media (hover: hover) and (pointer: fine) {
  .quick-filters, .search-cards { cursor: grab; }
  .quick-filters.is-dragging, .search-cards.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
  .quick-filters.is-dragging *, .search-cards.is-dragging * { pointer-events: none; }
}

.feed-section { display: flex; flex-direction: column; gap: var(--space-md); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 26px; }   /* long titles may wrap */
.see-all { flex: none; white-space: nowrap; font-weight: 700; font-size: 12px; line-height: 16px; color: var(--orange); text-decoration: none; }   /* "See all (11)" on one line */
.event-count { font-size: 16px; line-height: 24px; color: var(--ink-soft); }

/* The whole card/row opens the event (click handled in JS); the title button gives keyboard access */
.stretch { font: inherit; color: inherit; text-align: left; }
.pick, .event-row { cursor: pointer; }

/* Card Event Highlight */
.pick {
  position: relative;
  height: 200px;
  margin-bottom: 4px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.pick__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pick::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 34.25%, rgba(0, 0, 0, .8));
  z-index: 1;
}
.pick__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  line-height: 20px;
}
.pick__text { min-width: 0; }
.pick__title { font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 26px; }
.pick__price { font-weight: 600; }

/* Event List Element */
.event-list { display: flex; flex-direction: column; gap: var(--space-md); }
.event-list:empty { display: none; }   /* an empty list takes no space, so a note sits 16px under its title */
.event-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-right: var(--space-2xs);
  border-radius: 16px;
  background: var(--paper);
}
.event-row__img { width: 80px; height: 80px; flex: none; border-radius: 16px; object-fit: cover; }
.event-row__text { flex: 1; min-width: 0; }
.event-row__name,
.event-row__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-row__name { display: block; width: 100%; font-weight: 700; font-size: 16px; line-height: 24px; color: var(--ink); }
.event-row__meta,
.event-row__price { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.event-row__meta { max-width: 196px; }
.event-row__price { font-weight: 600; }
@media (hover: hover) { .event-row:hover .event-row__name { color: var(--orange); } }

/* Save (bookmark) — the Figma icon used as a mask so it can change colour */
.save {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.save--light { padding: var(--space-xs); border-radius: 9999px; background: rgba(158, 158, 154, .5); color: var(--paper); }
.save__icon {
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("../assets/home/save.svg") center / contain no-repeat;
  mask: url("../assets/home/save.svg") center / contain no-repeat;
}
.save--light .save__icon {
  -webkit-mask-image: url("../assets/home/bookmark-white.svg");
  mask-image: url("../assets/home/bookmark-white.svg");
}
.save[aria-pressed="true"] { color: var(--orange); }
.save--light[aria-pressed="true"] { color: var(--paper); }   /* on a photo (Your pick for today): white, filled */
.save[aria-pressed="true"] .save__icon {
  -webkit-mask-image: url("../assets/event/save-filled.svg");
  mask-image: url("../assets/event/save-filled.svg");
}
.save:active .save__icon { transform: scale(.9); }

/* Empty states */
.empty--feed { gap: 0; padding-bottom: 0; }
.empty--feed .empty__text { max-width: 250px; text-align: center; }
.empty__title { font-weight: 700; font-size: 16px; line-height: 24px; color: var(--ink); }
.empty__desc { font-size: 14px; line-height: 20px; color: var(--ink); }
.btn--fit { width: auto; min-width: 200px; max-width: 100%; }   /* 200px as in Figma, wider when the text needs it (Spanish) */

/* Navigation bar (floating) */
.tabbar {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom) / 2);
  transform: translateX(-50%);
  width: min(366px, calc(100% - 24px));
  height: 70px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 24px 44px 90px rgba(46, 44, 40, .55);
}
.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-md) var(--space-xs);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 12px;
  line-height: 10px;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background-color .15s ease;
}
.tabbar__item img { flex: none; }
.tabbar__item span { padding-top: 2px; }
.tabbar__item.is-active { background: var(--white-gray); color: var(--orange); }
@media (hover: hover) { .tabbar__item:not(.is-active):hover { background: #F7F7F5; } }

/* ==========================================================
   Event detail (252:5396 · 248:4354 · 252:5494 · 507:777)
   ========================================================== */
.event { padding: 0; gap: 0; }

.event__hero {
  position: relative;
  flex: none;
  height: 384px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;          /* title and buttons at the bottom; back/share sit above the page */
  padding: calc(var(--top) + 2px) var(--space-lg) 48px;
  background: var(--ink);
  color: var(--paper);
}
.event__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 16.667%, #000);
}
.event__bar,
.event__head { position: relative; z-index: 2; }
/* Event detail and venue profile: back and share stay pinned to the top while the page scrolls */
.screen > .event__bar--sticky {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(var(--top) + 2px) var(--space-lg) 0;
  pointer-events: none;
}
.event__bar--sticky > * { pointer-events: auto; }
.event__bar { display: flex; align-items: center; justify-content: space-between; }
.event__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.event__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  margin-bottom: -10px;   /* Figma text box is 26px tall with a 36px line */
}
/* Event detail: title · 12px · attendees · 12px · Going / Save */
[data-screen="event"] .event__title { margin-bottom: 0; }

/* Attendees: Users icon of the Design System (70:1010, Phosphor light, 20px = smallest icon size) + text */
.attendees { display: flex; align-items: center; gap: var(--space-xs); }
.attendees__icon { width: 20px; height: 20px; flex: none; color: var(--paper); }
.attendees__text { font-weight: 600; font-size: 12px; line-height: normal; color: var(--paper); }
/* 24px between Going/Save and the white sheet (the sheet overlaps the photo by 35px) */
[data-screen="event"] .event__hero { padding-bottom: calc(35px + var(--space-xl)); }

.event__actions { display: flex; gap: var(--space-xs); }

/* Glass buttons over the photo */
.glass-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: rgb(158 158 154 / 80%);   /* color/glass/button: Neutral/Gray at 80% */
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--paper);
  transition: background-color .15s ease, transform .15s ease;
}
.glass-btn span { padding-right: 4px; }
.glass-btn--icon { width: 40px; height: 40px; padding: 0; }
.glass-btn:active { transform: scale(.96); }
/* Active states (476:9527 · 476:9621) keep the glass background and swap to the filled icon */
@media (hover: hover) { .glass-btn:hover { background: rgb(142 142 138 / 80%); } }

/* Sheet ("Event details modal") */
.event__sheet {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: -35px;
  padding: var(--space-2xl) var(--space-lg) var(--space-xl);
  border-radius: 20px 20px 0 0;
  background: var(--paper);
  color: #181818;
  font-size: 16px;
  line-height: 24px;
}
.event__info { display: flex; flex-direction: column; gap: var(--space-sm); }
.event__when { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
.event__row { display: flex; align-items: center; gap: var(--space-xs); }
.event__row img { flex: none; }
.event__address { color: inherit; text-decoration: underline; text-underline-position: from-font; }
.event__link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--orange);
}
.event__link img { transition: transform .2s ease; }
.event__link[aria-expanded="true"] img { transform: rotate(180deg); }

.event__block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.event__label { font-weight: 700; font-size: 16px; line-height: 24px; color: #000; }
.event__desc { color: #000; }
.event__desc.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Venue Info Card */
.venue-card {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 67px;
  padding: 13px 17px;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.venue-card__logo {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border: .8px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  color: var(--orange);
}
.venue-card__logo img { width: 100%; height: 100%; object-fit: cover; }   /* the square logo fills the box */
.venue-card { cursor: pointer; }
.venue-card__name { flex: 1; min-width: 0; font-weight: 600; line-height: 22.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow {
  flex: none;
  padding: 7px 15px;
  border: 1px solid var(--mustard);
  border-radius: var(--radius-pill);
  background: var(--mustard);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  transition: background-color .15s ease;
}
.follow[aria-pressed="true"] { padding: 9px 17px; background: transparent; border-color: var(--line); }   /* Following (476:9005) */

/* Price event detail (bottom bar) */
.price-bar {
  position: relative;
  z-index: 6;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: calc(88px + env(safe-area-inset-bottom) / 2);
  padding: 13px var(--space-lg) calc(var(--space-xl) + env(safe-area-inset-bottom) / 2);
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #181818;
}
.price-bar--tickets { justify-content: space-between; }
.btn--tickets { width: auto; height: 48px; padding: 0 var(--space-3xl); font-family: var(--font-body); }

/* No internet (507:777) */
.offline { gap: 0; padding-bottom: calc(var(--top) + 40px); }
.round-btn {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: rgba(124, 124, 124, .8);
  transition: background-color .15s ease;
}
@media (hover: hover) { .round-btn:hover { background: rgba(110, 110, 110, .9); } }
.empty--offline { gap: var(--space-xl); padding-bottom: 0; }
.empty--offline .empty__text { max-width: none; gap: var(--space-xs); text-align: center; }
.empty--offline .empty__title,
.empty--offline .empty__desc { font-size: 16px; line-height: 22.5px; color: #000; }
.empty--offline .empty__title { min-height: 28px; }
.btn--retry { width: 128px; margin-top: -2px; }   /* 12px gap + 10px wrapper padding in Figma */

/* ==========================================================
   Venue profile (316:4267 · 430:4867 · 346:2256 · 351:3647 · 347:2546)
   ========================================================== */
.venue .event__label { color: var(--ink); }
.venue__head { gap: var(--space-sm); }
/* 24px between the Follow button and the white sheet (the sheet overlaps the photo by 35px) */
[data-screen="venue"] .event__hero { padding-bottom: calc(35px + var(--space-xl)); }
.venue__title { margin-bottom: 0; max-width: 313px; }
.venue__sheet { gap: var(--space-3xl); color: var(--ink); }   /* no tab bar on the venue profile */
.venue__about { display: flex; flex-direction: column; gap: var(--space-md); }
.venue__info { color: var(--ink); }
.venue__map {
  position: relative;
  align-self: stretch;
  display: block;
  height: 160px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--map-bg);
}
.venue__map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }   /* the whole map opens Google Maps */
.venue__map-svg .map-base path { vector-effect: non-scaling-stroke; }
.venue__map-svg .district path { fill: transparent; stroke: #A79E84; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.venue__map-svg .district-label { font-family: var(--font-body); font-weight: 600; fill: var(--ink-soft); text-anchor: middle; }
.venue__map .venue__credit { left: auto; right: 14px; bottom: 6px; padding: 0 4px; border-radius: 4px; background: rgb(243 241 234 / 85%); }   /* readable over district names, clear of the rounded corner */
.venue__pin { left: 50%; top: 50%; width: 32px; height: 32px; margin: -32px 0 0 -16px; pointer-events: none; }

.venue__lists { display: flex; flex-direction: column; gap: var(--space-lg); }
.venue__section { display: flex; flex-direction: column; gap: var(--space-md); }
.venue__section-head { display: flex; align-items: center; justify-content: space-between; height: 26px; }
.venue__section-head .see-all { font-family: var(--font-body); }

/* Empty state (847:15252 · 847:15295): NoPastEvents animation, title and text centred */
.venue-empty { display: flex; flex-direction: column; align-items: center; text-align: center; }
.venue-empty[hidden] { display: none; }
.venue-empty .empty__text { gap: 0; max-width: none; }
.venue-empty .title-s { white-space: nowrap; }
.venue-empty .subtitle { max-width: 287px; }

/* Maybe you would also like... */
.venue-suggest {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.venue-suggest:not([hidden]) { animation: suggest-in .35s ease both; }
@keyframes suggest-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.venue-suggest__list { display: flex; flex-direction: column; gap: var(--space-lg); }
.suggest-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 41px; cursor: pointer; }
.suggest-row__info { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; }
.suggest-row__info .venue-card__logo { width: 39px; height: 39px; }
.suggest-row__text { display: flex; flex-direction: column; min-width: 0; }
.suggest-row__name { font-weight: 600; font-size: 16px; line-height: 22.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-row__street { font-size: 14px; line-height: 20px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ==========================================================
   Search (274:4188 · 221:2929 list · 594:680 · 599:842 typing · 389:839 · 391:6964 · 596:1268 map · 221:3176 · 590:10569 filters)
   ========================================================== */
.search-body { padding-top: calc(var(--top) + 16px); }
.search-head { display: flex; align-items: center; gap: 11px; }
.search-head__actions { display: flex; gap: var(--space-xs); flex: none; }
.search-field {
  flex: 1;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-xs);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
}
.search-field__clear { flex: none; display: grid; }
.search-field img { flex: none; }
.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}
.search-field input::placeholder { color: var(--ink-soft); }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-field:focus-within { border-color: var(--ink); }
/* Typing (594:680): right under the status bar, back + field, nothing else */
[data-screen="search-list"].is-typing .search-body { padding-top: var(--top); gap: var(--space-lg); }
[data-screen="search-list"].is-typing .search-head { gap: var(--space-xs); }
[data-screen="search-list"].is-typing .search-head__actions,
[data-screen="search-list"].is-typing [data-search-chips] { display: none; }
.search-sections { display: flex; flex-direction: column; gap: var(--space-xl); }
.search-results .event-row { padding-right: 0; }
.hl { background: none; color: var(--orange); }
.search-none { display: flex; flex-direction: column; align-items: center; padding: var(--space-xl) var(--space-xs); text-align: center; }
.search-none .subtitle { max-width: 305px; }
.icon-btn { flex: none; display: grid; width: 40px; height: 40px; border-radius: 50%; }
.icon-btn:active { transform: scale(.95); }
.search-note { margin-top: -12px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }   /* 4px under the section title (16px gap − 12px) */
.see-all { font-family: var(--font-body); }

/* Map view */
[data-screen="search-map"] { background: #F3F1EA; }
.search-top {
  order: -1;
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: calc(var(--top) + 16px) 0 18px var(--space-lg);
  background: var(--paper);
}
.search-head--map { gap: 0; justify-content: space-between; padding-right: var(--space-lg); }
.search-head--map .search-field { flex: 0 1 254px; }
.search-top .quick-filters { margin: 0 0 0 calc(-1 * var(--space-lg)); }

.search-map { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #F3F1EA; }
.search-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.search-map__svg .map-base { pointer-events: none; }
.search-map__svg .map-base path { vector-effect: non-scaling-stroke; }   /* roads keep their width when zoomed in */
.search-map__streets { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform-origin: 0 0; }
.search-map__svg .district { cursor: default; }
.search-map__svg .district path { fill: transparent; stroke: #A79E84; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
@media (hover: hover) { .search-map__svg .district:hover path { fill: transparent; } }
.search-map__svg .district.is-area path { fill: rgba(224, 83, 38, .07); stroke: var(--orange); stroke-width: 1.6; stroke-dasharray: 6 4; }
.search-map__svg .map-veil { fill: #F3F1EA; fill-opacity: .4; pointer-events: none; }
.search-map__svg .district-label { font-family: var(--font-body); font-weight: 600; fill: var(--ink-soft); text-anchor: middle; pointer-events: none; }
.search-map__svg .district-label.is-area { font-weight: 700; fill: var(--orange); }
.search-map__pins { position: absolute; inset: 0; pointer-events: none; }
/* MapPin (556:6191 Normal · 556:6193 Recommended): slate, orange for events for you; 32px for the card in view */
.map-pin {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -24px 0 0 -12px;      /* the tip of the pin sits on the point */
  pointer-events: auto;
  background: url("../assets/search/pin-normal.svg") center / contain no-repeat;
  transition: width .3s cubic-bezier(.2, .8, .2, 1), height .3s cubic-bezier(.2, .8, .2, 1), margin .3s cubic-bezier(.2, .8, .2, 1);
}
.map-pin--for-you { background-image: url("../assets/search/pin-for-you.svg"); z-index: 1; }
.map-pin.is-active { width: 32px; height: 32px; margin: -32px 0 0 -16px; z-index: 2; }
.map-pin__label {
  position: absolute;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 10px;
  line-height: 13px;
  color: var(--ink);
  white-space: nowrap;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff;
  pointer-events: none;
}
.search-map__credit { position: absolute; left: 10px; bottom: 4px; font-size: 9px; line-height: 12px; color: #9E9E99; }
.search-map__none {
  position: absolute;
  left: 50%;
  bottom: calc(24px + 70px + 24px + env(safe-area-inset-bottom) / 2);   /* 24px above the tab bar, as in Figma (374:275) */
  transform: translateX(-50%);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: 0 44px 90px -34px rgba(46, 44, 40, .55);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

/* Selected district chip (395:880) */
.district-chip {
  position: absolute;
  z-index: 2;
  top: var(--space-xs);
  right: 8px;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: 0 6px 20px #F0F0F0;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}
.district-chip button { display: grid; }

/* Card Search (460:3036) carousel */
.search-cards {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: calc(125px + env(safe-area-inset-bottom) / 2);
  display: flex;
  gap: var(--space-sm);
  padding: 16px max(16px, calc(50% - 164px)) 30px;   /* the card in view sits in the centre (33px each side on a 393px screen) */
  margin-bottom: -30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  scrollbar-width: none;
}
.search-cards::-webkit-scrollbar { display: none; }
.search-card {
  flex: none;
  width: 328px;
  height: 112px;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-left: var(--space-md);
  border-radius: 16px;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 16px 30px rgba(158, 158, 154, .8);
  scroll-snap-align: center;
  text-align: left;
  transform: scale(.94);        /* the cards at the sides are a little smaller than the one in view */
  transition: background-color .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
  cursor: pointer;
}
.search-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.search-card__date { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--orange); text-transform: uppercase; }
.search-card__name { font-weight: 700; font-size: 16px; line-height: 24px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-card__venue { font-size: 14px; line-height: 20px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The card in view is opaque; the ones at the sides stay at 80% · events for you have an orange border */
.search-card.is-active { background: var(--paper); transform: none; }
.search-cards.is-gliding { scroll-snap-type: none; }   /* tapping a pin: glide to its card without snapping on the way */
.search-card.is-for-you { border: .5px solid var(--orange); }
.search-card__img { width: 112px; height: 112px; flex: none; border-radius: 0 16px 16px 0; object-fit: cover; }

/* Filters sheet (221:3176) */
.filters-layer { position: absolute; inset: 0; z-index: 25; background: var(--white-gray); animation: fade .2s ease both; }
.filters-sheet {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--top);
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  background: var(--paper);
  animation: sheet-up .3s cubic-bezier(.2, .8, .2, 1) both;
}
.filters-sheet__head, .filters-sheet__handle { touch-action: none; }   /* swipe down to close */
.filters-sheet__handle { position: absolute; left: 50%; top: 10px; width: 37px; height: 4px; margin-left: -18.5px; border-radius: 2px; background: var(--gray); }
.filters-sheet__head { position: relative; flex: none; display: flex; justify-content: flex-end; align-items: center; height: 40px; margin: 20px var(--space-lg) 0; }
.filters-sheet__title { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 700; font-size: 16px; line-height: 24px; }
.filters-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: 20px var(--space-lg) var(--space-xl);
  scrollbar-width: none;
}
.filters-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.filters-group__label { font-weight: 600; font-size: 14px; line-height: 20px; }
.filters-group__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.filters-group .chip[aria-pressed="true"],
[data-search-chips] .chip[aria-pressed="true"] { font-weight: 400; }
.filters-sheet__bar { border-top: 1px solid var(--line); }
.filters-sheet__bar .btn { flex: 0 1 auto; width: 175px; }
.filters-sheet__bar .btn--primary { width: 169px; }
.filters-sheet__bar { justify-content: space-between; }

/* ==========================================================
   My plans (326:1336 · 329:190 · 329:295 · 348:504 · 330:324 · 339:3909)
   ========================================================== */
.plans-head {
  position: relative;
  z-index: 5;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--top) + 8px) var(--space-lg) 0;
  background: var(--paper);
}
.plans-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}
.plans-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: var(--space-lg);
  width: 190px;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 12px 26px -18px rgba(46, 44, 40, .5);
  animation: fade .15s ease both;
}
.plans-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
}
.plans-menu button[aria-checked="true"] { font-weight: 700; }
.plans-menu__check { width: 20px; height: 20px; flex: none; }
.plans-menu button[aria-checked="false"] .plans-menu__check img { visibility: hidden; }
@media (hover: hover) { .plans-menu button:hover { background: #F7F7F5; } }
.plans-scrim { position: absolute; inset: 0; z-index: 4; background: rgba(46, 46, 46, .1); }

.plans-body { padding-top: var(--space-xl); padding-bottom: 128px; overflow-x: hidden; }
.plans-list { display: flex; flex-direction: column; gap: var(--space-xl); }
.plans-month { display: flex; flex-direction: column; gap: var(--space-md); }

/* Plan row = Event List Element with the date in ink and the venue below */
.plan-swipe { position: relative; }
.plan-swipe__remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 88px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 16px;
  background: var(--orange);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  color: var(--paper);
  visibility: hidden;
}
.plan-swipe.is-open .plan-swipe__remove,
.plan-swipe.is-dragging .plan-swipe__remove { visibility: visible; }
.plan-row { position: relative; z-index: 1; transition: transform .25s cubic-bezier(.2, .8, .2, 1); touch-action: pan-y; }
.plan-swipe.is-dragging .plan-row { transition: none; }
.plan-swipe.is-open .plan-row { transform: translateX(-96px); }
.plan-row .event-row__meta { color: var(--ink); max-width: none; }
.plan-row .event-row__price { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-row__icon { width: 24px; height: 24px; flex: none; display: grid; }   /* status only: a tap opens the event */
.plan-swipe.is-leaving { animation: plan-out .25s ease forwards; }
@keyframes plan-out { to { opacity: 0; transform: translateX(-40px); } }

.plans-empty {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: 60px;
}
.plans-empty__img { margin-bottom: calc(-1 * var(--space-sm)); }   /* the text sits right under the animation */
.plans-empty .empty__text { text-align: center; }   /* title centred as in Figma (478:10927), also when it wraps in Spanish */
/* 6.1 New account (847:17551): centred on the page, wide button */
.plans-empty--new { padding-bottom: 0; }
.plans-empty--new .btn { width: 287px; }

/* "Removed from My plans · Undo" (339:3694) */
.undo-toast {
  position: absolute;
  z-index: 7;
  left: var(--space-lg);
  right: var(--space-lg);
  bottom: calc(104px + env(safe-area-inset-bottom) / 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);              /* the text never touches "Undo" */
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--ink);
  box-shadow: 0 12px 26px -18px rgba(46, 44, 40, .5);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--paper);
  white-space: nowrap;
  animation: fade .2s ease both;
}
.undo-toast button { color: var(--orange); font-weight: 600; }
.undo-toast--low { bottom: calc(34px + env(safe-area-inset-bottom) / 2); }   /* screens without tab bar (venue) */
.undo-toast--bar { bottom: calc(88px + var(--space-sm)); }                    /* event: above the price bar */

/* Reminder push for events that are today (Going / Saved), drawn like an iOS notification: frosted glass,
   app icon, small uppercase label, bold title and "now". Drops in at the top of the phone; tap opens the event. */
.push-banner {
  position: absolute;
  z-index: 20;
  top: calc(var(--top, 0px) + 6px);
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 24px;
  background: rgba(245, 245, 245, .72);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 30px -8px rgba(0, 0, 0, .25);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  color: #000;
  text-align: left;
  animation: push-in .45s cubic-bezier(.2, .8, .2, 1) both;
}
.push-banner[hidden] { display: none; }
.push-banner__icon { flex: none; width: 38px; height: 38px; border-radius: 9px; }
.push-banner__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; line-height: 20px; }
.push-banner__head { display: flex; justify-content: space-between; gap: 8px; }
.push-banner__label { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: rgba(60, 60, 67, .7); }
.push-banner__time { font-size: 13px; line-height: 18px; color: rgba(60, 60, 67, .6); }
.push-banner__title { font-weight: 600; }
.push-banner__body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes push-in { from { transform: translateY(-120%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .push-banner { animation: none; } }

/* ==========================================================
   Profile — with account (556:2786 · 362:1870 · 362:1954 · 362:2075 · 358:225
   · 359:217 · 359:269 · 360:264 · 360:295 · 360:328 · 360:402 · 360:348)
   ========================================================== */
.profile-body { padding-top: calc(var(--top) + 8px); padding-bottom: 128px; gap: var(--space-xl); }
.profile-head { display: flex; align-items: center; justify-content: space-between; }
#profile-account { display: flex; flex-direction: column; gap: var(--space-xl); }

/* Rows with icon · text · caret (Row / …) */
.list-group { display: flex; flex-direction: column; }
.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}
.list-row:last-child { border-bottom: 0; }
.list-row > img { flex: none; }
.list-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list-row > .list-row__title { flex: 1; }
.list-row__title { font-size: 16px; line-height: 24px; }
.list-row__sub { font-size: 12px; line-height: 16px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row--danger .list-row__title { color: var(--error); }
@media (hover: hover) { a.list-row:hover .list-row__title, button.list-row:hover .list-row__title { text-decoration: underline; text-underline-offset: 3px; } }

/* Sub-pages with an orange title (Past events, Followed venues) */
.profile-sub { padding-top: calc(var(--top) + 8px); padding-bottom: 128px; gap: var(--space-md); }   /* 7.2 · 7.4: back at y = 62, title 16px below */
.profile-sub__title { display: flex; flex-direction: column; }
.profile-sub__count { font-size: 16px; line-height: 24px; color: var(--ink-soft); }
.past-list { margin-top: var(--space-xs); gap: 28px; }
.past-row { cursor: default; }
.past-row .event-row__meta { color: var(--ink); max-width: none; }
.past-row .event-row__price { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.past-row > img:last-child { flex: none; }
#venues-list { margin-top: var(--space-sm); }

/* Settings-style pages: back · centred title · optional action */
.page { padding-top: calc(var(--top) + 4px); gap: var(--space-md); }
.page-head { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.page-head .title-s { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.page-head__action { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--orange); text-decoration: none; }
.page .fields { margin-top: var(--space-xs); }
/* My interests (7.3 · 1023:6612): back, big title, note, search and topics, 16px apart */
[data-screen="interests-edit"] .page { padding-top: calc(var(--top) + 8px); }   /* back at y = 62, as in the onboarding */
[data-screen="interests-edit"] :is(.search, .topics) { margin-top: 0; }
[data-screen="interests-edit"] .note--blue { background: rgba(164, 201, 228, .5); }

.note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink);
}
.note img { flex: none; }
.note--blue { background: rgba(164, 201, 228, .5); }   /* Note / affects recommendations (1023:6906) */
.note--gray { background: var(--white-gray); }

/* Edit interests */

/* Settings */
/* Settings (7.0 · 847:18336 · 847:18387): back, big title, three groups, tab bar */
.settings-page,
.personal-page { padding-top: calc(var(--top) + 8px); padding-bottom: 128px; }   /* back at y = 62; room for the tab bar */
.settings-groups { display: flex; flex-direction: column; gap: 20px; }
.settings-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
}
.settings-card__text { display: flex; flex-direction: column; gap: 4px; }
.settings-card .btn { min-width: 200px; }

/* Personal data (7.1): "Delete account" link and its confirmation (7.7 · 847:18656) */
.text-danger { align-self: flex-start; margin-top: var(--space-xl); font-size: 16px; line-height: 24px; color: var(--error); }
.confirm-layer { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 0 40px; background: rgba(46, 46, 46, .4); }
.confirm-layer[hidden] { display: none; }
.confirm { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: var(--space-lg) var(--space-lg) var(--space-lg); border-radius: 20px; background: var(--paper); text-align: center; }
.confirm__actions { display: flex; gap: 12px; width: 100%; margin-top: var(--space-md); }
.confirm__actions .btn { flex: 1; }

/* Settings › Language (js/i18n.js): the row shows the language in use; the dialog lists both */
.list-row__value { flex: none; font-size: 16px; line-height: 24px; color: var(--ink-soft); }
.lang-options { display: flex; flex-direction: column; width: 100%; margin-top: var(--space-md); }
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  text-align: left;
}
.lang-option:last-child { border-bottom: 0; }
.lang-option img { visibility: hidden; }
.lang-option[aria-pressed="true"] { font-weight: 600; }
.lang-option[aria-pressed="true"] img { visibility: visible; }
.lang-dialog .confirm__actions { margin-top: var(--space-xs); }

/* Personal data / Notifications lists */
.data-list { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-2xs); }
.data-list__label { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ink); }   /* 7.1: "Account", "Saved from onboarding" */
.data-group + .data-list__label { margin-top: 10px; }
.data-group { display: flex; flex-direction: column; }
.data-row,
.toggle-row {
  display: flex;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.data-group > :last-child { border-bottom: 0; }
.data-row { flex-direction: column; gap: 2px; }
.data-row span,
.toggle-row small { font-size: 12px; line-height: 16px; color: var(--ink-soft); }
.data-row strong,
.toggle-row strong { font-weight: 400; font-size: 16px; line-height: 24px; color: var(--ink); }
.toggle-row { align-items: center; gap: var(--space-sm); cursor: pointer; }
.toggle-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toggle-row.is-disabled { cursor: default; }
.toggle-row.is-disabled > span { opacity: .4; }

/* Toggle (367:4207): 48 × 28 track, white knob */
.toggle {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  margin: 0;
  border-radius: 14px;
  background: var(--line);
  cursor: pointer;
  transition: background-color .2s ease;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  transition: transform .2s ease;
}
.toggle:checked { background: var(--orange); }
.toggle:checked::after { transform: translateX(20px); }
.toggle:disabled { opacity: .4; cursor: default; }

/* Notifications (7.6 · 847:18244 · 847:18286): back, big title, groups 24px apart, nav bar */
.notif-page { padding-top: calc(var(--top) + 8px); gap: var(--space-xl); padding-bottom: 128px; }   /* room for the tab bar */
.notif-group { display: flex; flex-direction: column; }
.notif-group__label { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ink); }
.notif-group .note { margin: var(--space-md) 0 0; }
.notif-group .note--blue { background: rgba(164, 201, 228, .5); }

.btn--auto { width: auto; }

/* Profile without account & sign-in providers (354:2812 · 358:292 · 585:981 · 585:1053 · 359:299 · 359:336) */
.profile-body--guest .profile-head { justify-content: flex-end; }
.list-row--static { cursor: default; }
.list-row--static svg { width: 24px; height: 24px; flex: none; }
.data-row--icon { position: relative; padding-right: 32px; }
.data-row--icon img { position: absolute; right: 0; top: 50%; margin-top: -10px; }
.field .input:disabled { background: var(--white-gray); color: var(--ink-soft); }

.legal__updated { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.legal { display: flex; flex-direction: column; gap: 22px; padding-bottom: var(--space-xl); color: var(--ink); }
.legal section { display: flex; flex-direction: column; gap: 6px; }
.legal h2 { font-size: 16px; line-height: 24px; font-weight: 700; }
.legal p { font-size: 14px; line-height: 20px; }
.legal a { color: inherit; text-decoration: none; }

/* ---------- iOS mockups over the event detail (system chrome, not culturALT UI) ---------- */
.sheet-layer,
.ios-event { position: absolute; inset: 0; z-index: 20; }
.sheet-dim { position: absolute; inset: 0; background: rgba(46, 46, 46, .5); animation: fade .2s ease both; }

/* Share sheet (476:9160) */
.share-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #F2F2F7;
  font-family: var(--font-button);
  color: #000;
  animation: sheet-up .3s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes sheet-up { from { transform: translateY(100%); } }
.share-sheet__title { display: flex; align-items: center; justify-content: space-between; padding: 16px; }
.share-sheet__app { display: flex; align-items: center; gap: 8px; }
.share-sheet__name { font-weight: 600; font-size: 15px; line-height: 20px; letter-spacing: -.24px; }
.share-sheet__sub { font-size: 13px; line-height: 18px; letter-spacing: -.08px; color: #99989B; }
.share-sheet__close { display: grid; }
.share-sheet__divider { flex: none; width: 375px; max-width: 100%; height: 1px; background: rgba(60, 60, 67, .1); }

.share-sheet__people,
.share-sheet__apps {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.share-sheet__people::-webkit-scrollbar,
.share-sheet__apps::-webkit-scrollbar { display: none; }
.share-sheet__people { gap: 20px; }
.share-sheet__apps { gap: 25px; }

.share-person {
  position: relative;
  flex: none;
  width: 64px;
  height: 93px;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
}
.share-person__pic { position: absolute; left: 0; top: 0; width: 60px; height: 60px; overflow: hidden; border-radius: 50%; background: #D9D9D9; }
.share-person__pic img { width: 100%; height: 100%; object-fit: cover; }
.share-person__badge { position: absolute; left: 41px; top: 40px; width: 24px; height: 24px; }
.share-person__name {
  position: absolute;
  left: 30px;
  top: 67px;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 13px;
  letter-spacing: .07px;
  text-align: center;
  white-space: nowrap;
}

.share-app {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 60px;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  font-size: 11px;
  white-space: nowrap;
}
.share-app--twitter { font-size: 12px; }
.share-app__icon { position: relative; width: 60px; height: 60px; }
.share-app__icon img { width: 100%; height: 100%; }
.share-app__icon--shadow img { position: absolute; inset: -10px; width: 80px; height: 80px; max-width: none; }   /* icon SVG includes its shadow */

.share-sheet__buttons { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.share-action {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  border-radius: 9px;
  background: #FFF;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, .05));
  font-family: var(--font-button);
  font-size: 17px;
  line-height: normal;
  color: #000;
  text-align: left;
}
.share-action > span:first-child { flex: 1; }
.share-action__icon { position: relative; width: 24px; height: 24px; display: grid; place-items: center; }
.share-action__copy { width: 20.9px; height: 25.5px; max-width: none; }
.share-action__reading { width: 31.5px; height: 12.5px; max-width: none; }
.share-action:active,
.share-person:active,
.share-app:active { opacity: .6; }

/* Add to calendar — iOS 16 New Event (478:9918) */
.ios-event {
  display: flex;
  flex-direction: column;
  padding-top: var(--top);
  background: #F2F2F7;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: normal;
  color: #181818;
  animation: sheet-up .3s cubic-bezier(.2, .8, .2, 1) both;
}
.ios-event__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background: #FFF;
  white-space: nowrap;
}
.ios-event__title { font-weight: 600; font-size: 16px; }
.ios-event__btn { font-size: 15px; color: #007AFF; }
.ios-event__btn--bold { font-weight: 600; }
.ios-event__body { display: flex; flex-direction: column; gap: 20px; padding: 16px 16px 0; background: #FFF; }
.ios-group { overflow: hidden; border-radius: 10px; background: #FFF; }
.ios-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; white-space: nowrap; }
.ios-row--toggle { min-height: 48px; }
.ios-row__value { overflow: hidden; text-overflow: ellipsis; color: #9E9E9E; }
.ios-row__value--dot { display: flex; align-items: center; gap: 8px; }
.ios-sep { height: 1px; margin-left: 16px; background: #E5E5E5; }
.ios-toggle { position: relative; width: 40px; height: 24px; flex: none; }
.ios-toggle img { position: absolute; left: 0; top: -3px; width: 46px; height: 36px; max-width: none; }   /* SVG includes the knob shadow */

/* ==========================================================
   Splash + Welcome (dark screens)
   ========================================================== */
.splash {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: var(--orange);
  transition: opacity .5s ease;
}
.splash__logo { display: block; width: 100%; height: 100%; }
/* The logo is drawn like a pen stroke along its middle, from the left leg to the tail; at the end the exact
   logo shape (assets/splash.svg) takes over from the line */
.splash__stroke { stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: splash-draw 1.3s cubic-bezier(.55, 0, .35, 1) .2s forwards; }
.splash__shape { opacity: 0; animation: splash-show .15s linear 1.45s forwards; }
@keyframes splash-draw { to { stroke-dashoffset: 0; } }
@keyframes splash-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .splash__stroke { display: none; } .splash__shape { animation: none; opacity: 1; } }
.splash.is-leaving { opacity: 0; pointer-events: none; }

.screen--dark { background: #000; color: var(--paper); }
.welcome { touch-action: pan-y; user-select: none; }
.welcome__track {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.welcome__track.is-dragging { transition: none; }
.welcome__slide {
  flex: 0 0 100%;
  height: 100%;
  background-color: #000;
  background-size: cover;
  background-position: center top;
}
.welcome__content {
  position: absolute;
  left: var(--space-lg);
  right: var(--space-lg);
  bottom: calc(26px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.welcome__intro { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.welcome__titles { display: grid; width: 100%; }
.welcome__title {
  grid-area: 1 / 1;
  align-self: end;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: min(28px, 7.8vw);   /* always two lines (the <br>): a bit smaller only on very narrow phones */
  line-height: normal;
  white-space: nowrap;
  text-align: center;
  color: var(--paper);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.welcome__title.is-active { opacity: 1; transform: none; }
.dots { display: flex; gap: 6px; height: 6px; }
.dots__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .45);
  transition: width .3s ease, background-color .3s ease;
}
.dots__dot.is-active { width: 18px; background: var(--paper); }
.welcome__buttons { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.welcome .btn--outline:hover { background: rgba(224, 83, 38, .15); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* Presentation mode (?presentacion, js/presentacion.js): "3 / 17" under the phone. Only on a computer, never inside the app */
.demo-counter {
  position: fixed; left: 0; right: 0; bottom: 4px; margin: 0;
  text-align: center; font: 600 12px/16px var(--font-body); color: var(--gray);
  pointer-events: none; z-index: 1000;
}
@media (max-width: 499px) { .demo-counter { display: none; } }