/* Branson '26 — UI Kit styles.
 *
 * Imports:
 *   - colors_and_type.css → tokens (palette, type, spacing, radii, shadows)
 *   - components.css       → shared component styles (cards, buttons, badges,
 *                            avatars, roster, heart, status-line, empty/warn)
 *
 * This file holds ONLY kit-specific layout — the things unique to the
 * Branson dashboard app shell: page chrome, nav, segmented toggles, the
 * Home/Timeline/Profile/QuickPick page-level layouts, and the activity
 * detail modal. Any component reused across pages lives in components.css
 * so the live UI and the style-guide previews can't drift apart.
 */
@import url("./colors_and_type.css");
@import url("./components.css");

:root {
  /* ─── Committed / Scheduled surface tokens ───────────────────────── */
  --committed-bg:   color-mix(in srgb, var(--dusk) 22%, var(--color-surface));
  --committed-line: color-mix(in srgb, var(--dusk) 60%, var(--color-line));
  --committed-rail: var(--dusk);
  --committed-ink:  var(--dusk-on-surface);

  --scheduled-bg:   color-mix(in srgb, var(--moss) 18%, var(--color-surface));
  --scheduled-line: color-mix(in srgb, var(--moss) 55%, var(--color-line));
  --scheduled-rail: var(--moss);
  --scheduled-ink:  var(--moss-on-surface);
}

html, body { min-height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--color-ink);
  /* Wash defaults (overrideable via Tweaks).
     Current: warm-palette preset, dialled back for readability. */
  --wash-1: #F1DDB9;             /* sandstone */
  --wash-2: #EFC9B5;             /* clay-rose */
  --wash-intensity: 60;          /* 0–100 -> percent */
  --wash-falloff: 40;            /* 20–80 -> percent */
  background:
    radial-gradient(1000px 520px at -10% -10%,
      color-mix(in srgb, var(--wash-1) calc(var(--wash-intensity) * 1%), transparent) 0%,
      transparent calc(var(--wash-falloff) * 1%)),
    radial-gradient(900px 520px at 110% 10%,
      color-mix(in srgb, var(--wash-2) calc(var(--wash-intensity) * 1%), transparent) 0%,
      transparent calc(var(--wash-falloff) * 1%)),
    var(--color-bg);
  background-attachment: fixed;
}

/* The site header, segmented toggle (.seg2), and filter chip (.chip-btn)
   live in components.css — the kit just uses them. */

/* ─── Page main ─────────────────────────────────────────────────── */
.page-main {
  max-width: 1100px; margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) 120px;
}
.page-hero { margin-bottom: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.page-hero .eyebrow {
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--moss-on-surface);
  margin: 0;
}
.page-hero h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.1; font-weight: 800; }
.page-hero p {
  color: var(--color-ink-dim);
  margin: 0;
  max-width: 64ch;
}

.page-hero__top {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.page-hero__top h1 { margin: 0; }
.page-hero__top .seg2 { flex-shrink: 0; }
.seg2 button { white-space: nowrap; min-width: 132px; }

/* Narrow screens: let the 3-option toggle drop to a full-width second
   row and shrink each button to fit. 132px × 3 was wider than an
   iPhone SE (320px); below ~640px we hand the whole row to the toggle
   so buttons can breathe at whatever width is available. */
@media (max-width: 640px) {
  .page-hero__top .seg2 {
    flex-basis: 100%;
    width: 100%;
    flex-shrink: 1;
  }
  .page-hero__top .seg2 button {
    min-width: 0;
    padding: 9px 8px;
    font-size: 12px;
    gap: 4px;
  }
}

/* ─── Catalog grid ─────────────────────────────────────────────── */
.catalog-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1024px) { .catalog-grid { grid-template-columns: repeat(4, 1fr); } }

/* Filter row only — the .chip-btn rules live in components.css. */
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-4); }

/* ─── Standalone avatars wrapper ───────────────────────────────
   `.avatars` inside `.roster` is laid out via grid in components.css. The
   bare wrapper (used in Home rows, Timeline, etc) needs flex. */
.avatars { display: flex; align-items: center; }

/* ─── Activity Detail Modal (Apple Photos-style sheet) ─────────────── */
.dm-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 26, 18, 0.5);
  backdrop-filter: blur(8px);
  display: flex;
  /* Mobile = bottom sheet · Desktop ≥640px = centered modal */
  align-items: flex-end; justify-content: center;
  padding: 0;
  animation: dm-fade 220ms var(--ease-out);
}
@media (min-width: 640px) {
  .dm-backdrop { align-items: center; padding: 24px; }
}
@keyframes dm-fade { from { opacity: 0; } to { opacity: 1; } }

.dm-sheet {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: 85vh;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Touch-action per child: pan-y everywhere lets the browser scroll
     long content vertically while Swiper intercepts horizontal swipes. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: contain;
  background: var(--color-surface);
  color: var(--color-ink);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.25);
  animation: dm-slide-up 380ms cubic-bezier(0.2, 0.9, 0.25, 1.05);
  transform-origin: bottom center;
}
/* The intro animation runs once on mount; never toggle it during nav. */
@media (min-width: 640px) {
  .dm-sheet {
    border-radius: 18px;
    height: 88vh;
    max-height: 88vh;
    box-shadow: var(--shadow-2);
    animation: dm-pop 240ms var(--ease-out);
  }
}
@keyframes dm-slide-up {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}
@keyframes dm-pop {
  0%   { transform: translateY(20px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* The sheet intro animation runs once on mount. Don't toggle it on/off
   during navigation — toggling `animation` restarts the slide-up which
   reads as a "dip" when a card snaps into place. */

/* ── Modal pager — Swiper.js virtual carousel (renderExternal) ──────
   .dm-pager clips; Swiper owns the swiper-wrapper transform.
   React always renders exactly 3 .dm-pane slots, absolutely positioned
   at idx * slideWidth inside the wrapper. */
.dm-pager {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Swiper container and wrapper must fill the full pager height.
   position:relative on wrapper is required for absolutely-positioned panes. */
.dm-pager .swiper {
  height: 100%;
}
.dm-pager .swiper-wrapper {
  height: 100%;
  position: relative;
}

.dm-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: pan-y;
}

.dm-pane-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}

@media (prefers-reduced-motion: reduce) {
  .dm-backdrop, .dm-sheet { animation: none; }
}

.dm-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--color-line);
  margin: 8px auto 0;
  flex-shrink: 0;
  /* The handle is a small pull-to-dismiss target; horizontal touches
     still belong to the native pager. */
  touch-action: pan-x;
  pointer-events: auto;
}
@media (min-width: 640px) { .dm-handle { display: none; } }

.dm-close-x {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 999px;
  appearance: none; cursor: pointer;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(6px);
  border: 1.5px solid var(--color-line);
  color: var(--color-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
  z-index: 2;
  /* Always tappable; no gesture interference. */
  touch-action: manipulation;
}
.dm-close-x:hover { background: var(--color-bg); }

.dm-hero {
  width: 100%; aspect-ratio: 16/9;
  background: var(--color-bg);
  overflow: hidden;
  flex-shrink: 0;
  /* pan-y: browser handles vertical scroll, Swiper handles horizontal swipe */
  touch-action: pan-y;
}
.dm-hero img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

.dm-body { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.dm-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 4vw, 28px); line-height: 1.15;
  margin: 4px 0 0; color: var(--color-ink);
}
.dm-meta { font-family: var(--font-body); font-size: 14px; color: var(--color-ink); opacity: 0.78; }
.dm-desc { font-family: var(--font-body); font-size: 16px; line-height: 1.55; margin: 0; color: var(--color-ink); }
.dm-link {
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  color: var(--moss-on-surface);
  text-decoration: underline;
  transition: color var(--dur-fast), opacity var(--dur-fast);
}
.dm-link:hover {
  color: var(--moss-on-surface);
  opacity: 0.8;
}

.dm-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dm-tag {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-ink);
  border: 1.5px solid var(--color-ink-dim);
  letter-spacing: 0.02em;
}

.dm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

.dm-close {
  appearance: none; cursor: pointer;
  width: 100%;
  margin-top: 8px;
  padding: 14px; min-height: 52px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  background: transparent; color: var(--color-ink); opacity: 0.7;
  border: none; border-top: 1.5px solid var(--color-line);
  border-radius: 0;
}
.dm-close:hover { background: var(--color-bg); opacity: 1; }

/* ─── Home page event cards ───────────────────────────────── */
.day-section {
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: 16px 18px 12px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-1);
}
.day-section h2 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-ink-dim);
  margin: 0 0 10px;
}
.day-section h2 .day-num {
  background: var(--moss); color: white;
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}
.event-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px; align-items: center;
  padding: 12px 8px;
  border-top: 1px dashed var(--color-line);
  position: relative;
}
/* Viewer-relative row treatments: a soft tinted background + a 4px colored
 * rail on the left edge. The rail is `inset` on the row's padding so it
 * draws under the row's actual content. Same committed/scheduled semantics
 * as the catalog cards and timeline. */
.event-row--committed,
.event-row--scheduled {
  border-radius: 10px;
  padding-left: 16px;
}
.event-row--committed { background: var(--committed-bg); }
.event-row--scheduled { background: var(--scheduled-bg); }
.event-row--committed::before,
.event-row--scheduled::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 4px;
  border-radius: 2px;
}
.event-row--committed::before { background: var(--committed-rail); }
.event-row--scheduled::before { background: var(--scheduled-rail); }
/* When a row carries a state-tint, the dashed top-border above the next
 * non-tinted row is the only one drawn — drop the tinted row's own
 * top-border so they don't double up. */
.event-row--committed,
.event-row--scheduled {
  border-top-color: transparent;
}
.event-row:first-of-type { border-top: 0; }
.event-row[role="button"] { cursor: pointer; border-radius: 8px; transition: background var(--dur-fast); }
.event-row[role="button"]:hover { background: color-mix(in srgb, var(--color-ink) 8%, transparent); }
.event-row__time {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--color-ink);
}
.event-row__time small { display: block; font-weight: 500; color: var(--color-ink-dim); font-size: 11px; }
.event-row__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--color-ink); }
.event-row__sub { font-family: var(--font-body); font-size: 13px; color: var(--color-ink-dim); margin-top: 2px; }
.event-row__chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Event-row CTA — pill-shaped outlined-moss button used inline in Home
   event rows ("+ Count me in"). Distinct from .btn (rounded-rect, taller)
   because it lives inside a tight chip row alongside status pills. */
.event-row__cta {
  appearance: none; cursor: pointer;
  background: transparent;
  color: var(--moss-on-surface);
  border: 1.5px solid var(--moss-on-surface);
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  padding: 5px 11px; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase;
  min-height: 32px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.event-row__cta:hover {
  background: var(--moss-on-surface);
  color: var(--color-surface);
}

/* ─── Timeline ──────────────────────────────────────────────────────
 *
 * Day-view calendar page. Layout has three vertical bands:
 *   1. site-header   (sticky, owned by components.css — 60/64px tall)
 *   2. .day-tabs     (FIXED — architectural rule, owned here)
 *   3. .tl-page      (= .page-main on this page; padded-top to clear the strip)
 *
 * The strip exposes its rendered height as `--tl-tabs-h` so the page below uses
 * one source of truth for top padding — no more 60/62/66 padding scattered across
 * three rules trying to keep up with the strip's actual size.
 * ──────────────────────────────────────────────────────────────────── */

/* ─── Fixed day-tab strip ───────────────────────────────────────────
   ARCHITECTURAL CONSTRAINT (do not change): position MUST stay `fixed`.
   The strip is a continuation of the site-header chrome — same translucent
   surface, same max-width container — and pins to the bottom of the header.

   The strip has two rows: the date title (always visible, since the strip
   itself is fixed) and the horizontally-scrollable rail of day pills. The
   `.day-tabs--overflow-right` / `--overflow-left` classes get added by JS
   when there are off-screen days; CSS uses them to fade-and-chevron the
   appropriate side.
*/
.day-tabs {
  position: fixed;
  top: 60px;                 /* mobile site-header height */
  left: 0; right: 0;
  z-index: 40;               /* below site-header (z:50), above page content */
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 720px) { .day-tabs { top: 64px; } }

.day-tabs__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px var(--sp-4) 12px;
  display: flex; flex-direction: column;
  gap: 4px;
}

/* Date title row — eyebrow inline with long-form date. Force single-line so
   even on narrow phones it never wraps. */
.day-tabs__title {
  margin: 0;
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
}
.day-tabs__eyebrow {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--moss-on-surface);
}
.day-tabs__date {
  flex: 1 1 auto; min-width: 0;
  font-size: clamp(17px, 4.4vw, 22px);
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  overflow: hidden; text-overflow: ellipsis;
}

/* The rail wrapper holds the scrollable pill row + the two scroll-chevrons. */
.day-tabs__rail-wrap {
  position: relative;
}
.day-tabs__rail {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  /* Inset padding so the first/last pill don't hug the edge under the fade. */
  padding: 0 4px;
  margin: 0 -4px;
}
.day-tabs__rail::-webkit-scrollbar { display: none; }
@media (min-width: 720px) {
  .day-tabs__rail { gap: 8px; }
}

/* Individual day pill — two stacked glyphs: weekday small-caps + day number. */
.day-tab {
  appearance: none; cursor: pointer; background: transparent; border: none;
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 14px 8px;
  min-width: 56px;
  border-radius: var(--radius-pill);
  color: var(--color-ink-dim);
  font-family: var(--font-display);
  position: relative;
  scroll-snap-align: center;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.day-tab__dow {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.78;
}
.day-tab__num {
  font-size: 18px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.day-tab:hover {
  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
  color: var(--color-ink);
}
.day-tab[aria-current="page"] {
  background: var(--moss);
  color: white;
}
.day-tab[aria-current="page"] .day-tab__dow { opacity: 0.95; }
.day-tab:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}

/* "Today" pip — small dot under the day number on the live current date,
   independent of the currently-selected day. */
.day-tab__pip {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--moss);
}
.day-tab[aria-current="page"] .day-tab__pip { background: white; }

/* Scroll affordance: a fade gradient and a chevron button on whichever edge
   has more pills off-screen. Hidden when there's nothing further to scroll. */
.day-tabs__more {
  appearance: none; border: none; cursor: pointer;
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--color-ink);
  background: var(--color-surface);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px var(--color-line);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.day-tabs__more--right { right: 2px; }
.day-tabs__more--left  { left:  2px; }
.day-tabs__more:hover { transform: translateY(-50%) scale(1.06); }
.day-tabs--overflow-right .day-tabs__more--right,
.day-tabs--overflow-left  .day-tabs__more--left {
  opacity: 1; pointer-events: auto;
}

/* Fade gradients on whichever edge has overflow. Pseudo-elements on the rail
   wrapper, sitting behind the chevron. */
.day-tabs__rail-wrap::before,
.day-tabs__rail-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 48px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 1;
}
.day-tabs__rail-wrap::before {
  left: 0;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--color-surface) 95%, transparent) 20%,
    transparent 100%);
}
.day-tabs__rail-wrap::after {
  right: 0;
  background: linear-gradient(to left,
    color-mix(in srgb, var(--color-surface) 95%, transparent) 20%,
    transparent 100%);
}
.day-tabs--overflow-right .day-tabs__rail-wrap::after  { opacity: 1; }
.day-tabs--overflow-left  .day-tabs__rail-wrap::before { opacity: 1; }

/* ─── Page padding under the strip ────────────────────────────────── */
.tl-page {
  --tl-tabs-h: 96px;             /* date title + tab row + padding (mobile) */
  padding-top: calc(var(--tl-tabs-h) + var(--sp-4));
}
@media (min-width: 720px) {
  .tl-page { --tl-tabs-h: 100px; }
}

/* ─── The grid (hour rail + stage) ────────────────────────────────── */
.tl-grid {
  --rail-w: 64px;
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  overflow: clip;
  min-height: calc(var(--tl-hour-px, 80px) * var(--tl-rows, 16) + 40px);
}
@media (min-width: 720px) { .tl-grid { --rail-w: 84px; } }

/* Hour rail — labels float on the hour line, riding subtle tonal wash. */
.tl-hours {
  position: relative;
  padding: 4px 0;
  border-right: 1px solid var(--color-line);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sand) 6%, transparent) 0%,
    transparent 28%,
    transparent 70%,
    color-mix(in srgb, var(--dusk) 7%, transparent) 100%
  );
}
.tl-hour { height: var(--tl-hour-px, 80px); position: relative; }
.tl-hour:first-child .tl-hour__label { top: 0; }
.tl-hour__label {
  position: absolute;
  top: -7px;
  right: 8px;
  padding: 0 4px;
  background: var(--color-surface);
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink-dim);
  font-variant-numeric: tabular-nums;
}

/* Stage — gridlines drawn as a layered repeating background; events absolute-positioned. */
.tl-stage {
  position: relative;
  padding: 4px 12px 24px;
  background-image:
    /* full-hour line at the bottom of each band */
    linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--tl-hour-px, 80px) - 1px),
      var(--color-line) calc(var(--tl-hour-px, 80px) - 1px),
      var(--color-line) var(--tl-hour-px, 80px)
    );
  background-size: 100% var(--tl-hour-px, 80px);
  background-repeat: repeat-y;
  background-position: 0 4px;
}

/* ─── Now-line ─────────────────────────────────────────────────────
   Only rendered (in JSX) when the user is viewing today. Three pieces:
   dot, time chip, line — laid out with flex so the line auto-expands. */
.tl-now {
  position: absolute;
  left: 12px; right: 12px;
  display: flex; align-items: center;
  pointer-events: none;
  z-index: 4;
}
.tl-now__dot {
  flex: 0 0 14px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brick);
  margin-left: -6px;
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brick) 22%, transparent);
  animation: tl-now-pulse 2.4s ease-in-out infinite;
}
.tl-now__time {
  margin-left: 8px;
  padding: 2px 7px; border-radius: 4px;
  background: var(--brick); color: white;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.tl-now__line {
  flex: 1; height: 2px;
  margin-left: 8px;
  background: var(--brick);
  border-radius: 999px;
}
@keyframes tl-now-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brick) 22%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brick) 8%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .tl-now__dot { animation: none; }
}

/* ─── Event blocks ─────────────────────────────────────────────────
   Each event is a flex row: 4px colored rail + body. Rail color is by kind,
   body is tinted from the same hue. "is-mine" adds an outer ring; "is-conflict"
   adds a brick ring; "is-clickable" lifts on hover. */
.tl-event {
  position: absolute;
  left: 8px; right: 8px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-btn);
  overflow: hidden;
  display: flex;
  box-shadow: var(--shadow-1);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.tl-event__rail {
  flex: 0 0 4px;
  background: var(--color-ink-dim);
}
.tl-event__body {
  flex: 1 1 auto; min-width: 0;
  padding: 6px 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.tl-event__time {
  margin: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink-dim);
  font-variant-numeric: tabular-nums;
}
.tl-event__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  line-height: 1.18;
  color: var(--color-ink);
  display: flex; align-items: center; gap: 5px;
  /* Long titles ellipsize via parent overflow:hidden — calendar UI standard. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-event__lock {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  opacity: 0.92;
}
.tl-event__sub {
  margin: 0;
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.35;
  color: var(--color-ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-event__roster {
  margin-top: 4px; padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, currentColor 22%, transparent);
  display: flex; flex-direction: column; gap: 2px;
  min-height: 0;
}
.tl-event__count {
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink-dim);
}
.tl-event__names {
  font-family: var(--font-body); font-size: 11.5px; line-height: 1.35;
  color: var(--color-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* — kind palettes —
 *   - .tl-event--mine-commit : viewer is committed to this activity. Solid
 *     dusk purple per DESIGN.md ("tertiary reserved for committed").
 *   - .tl-event--scheduled    : event is on the schedule but viewer isn't on
 *     the commit list. Soft moss tint — readable but recedes vs. mine.
 *   - .tl-event--meal         : breakfast / lunch / dinner. Soft sand tint.
 * Locked-paid status is communicated by the 🔒 icon in the title row, not
 * by color. */
.tl-event--meal {
  background: color-mix(in srgb, var(--sand) 14%, var(--color-surface));
  border-color:  color-mix(in srgb, var(--sand) 38%, var(--color-line));
}
.tl-event--meal .tl-event__rail { background: var(--sand); }

.tl-event--scheduled {
  background: var(--scheduled-bg);
  border-color: var(--scheduled-line);
}
.tl-event--scheduled::before { background: var(--scheduled-rail); }

.tl-event--mine-commit {
  background: var(--committed-bg);
  border-color: var(--committed-line);
}
.tl-event--mine-commit::before { background: var(--committed-rail); }
.tl-event--mine-commit h4 { color: var(--committed-ink); }

/* — interactive / status — */
.tl-event.is-clickable { cursor: pointer; }
.tl-event.is-clickable:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.tl-event.is-clickable:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}
.tl-event.is-mine {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--moss) 65%, transparent), var(--shadow-1);
}
.tl-event.is-mine.is-clickable:hover {
  box-shadow: 0 0 0 2px var(--moss), var(--shadow-2);
}

/* ─── Legend ──────────────────────────────────────────────────────── */
.tl-legend {
  list-style: none; padding: 0;
  margin: var(--sp-4) 0 0;
  display: flex; flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--font-body); font-size: 13px; color: var(--color-ink-dim);
}
.tl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tl-legend__sw {
  display: inline-block;
  width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.tl-legend__sw--mine      { background: var(--dusk); border-color: var(--dusk); }
.tl-legend__sw--scheduled { background: color-mix(in srgb, var(--moss) 70%, white); border-color: var(--moss); }
.tl-legend__sw--meal      { background: color-mix(in srgb, var(--sand) 80%, white); border-color: var(--sand); }
.tl-legend li { white-space: nowrap; }

/* ─── Profile ────────────────────────────────────────────── */
.profile-page { max-width: 640px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) 120px; }
.profile-section {
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-1);
}
.profile-section h2 { font-size: 18px; margin: 0 0 6px; }
.profile-section p.help { font-family: var(--font-body); font-size: 15px; color: var(--color-ink-dim); margin: 0 0 var(--sp-3); }
.profile-section label {
  display: block; font-family: var(--font-display); font-size: 12px; font-weight: 800;
  color: var(--color-ink-dim); text-transform: uppercase; letter-spacing: 0.06em;
  margin: var(--sp-3) 0 var(--sp-2);
}
.profile-section select, .profile-section input[type="text"], .profile-section input[type="date"], .profile-section input[type="password"] {
  width: 100%; font-family: var(--font-body); font-size: 15px;
  padding: 11px 12px; border-radius: 10px;
  border: 1.5px solid var(--color-line);
  background: var(--color-bg); color: var(--color-ink);
  min-height: 44px;
}
.profile-section select:focus, .profile-section input:focus { outline-color: var(--moss-on-surface); }

.name-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 8px;
}
.name-chip {
  appearance: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  padding: 10px 8px; border-radius: 10px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-line);
  color: var(--color-ink);
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  min-height: 56px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.name-chip small { font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--color-ink-dim); }
.name-chip:hover { border-color: var(--moss-on-surface); }
.name-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--moss) 12%, transparent);
  border-color: var(--moss-on-surface);
  color: var(--moss-on-surface);
}

/* ─── QuickPick deck ─────────────────────────────────────── */
.deck-wrap { display: flex; flex-direction: column; gap: 18px; align-items: center; padding: 0 0 12px; }
.deck-count { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--color-ink-dim); }
.deck-stage {
  position: relative; width: 100%; max-width: 480px; height: 520px;
}
.deck-card {
  position: absolute; inset: 0;
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  display: flex; flex-direction: column;
  cursor: grab;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.deck-card.top { z-index: 1; }
.deck-card.dragging { cursor: grabbing; transition: none; }
.deck-card.dragging .deck-card__thumb img { pointer-events: none; }

.deck-card.flying { z-index: 2; pointer-events: none; cursor: default; }
.deck-card.flying--right { animation: bd-fly-right 360ms var(--ease-in-out) forwards; }
.deck-card.flying--left  { animation: bd-fly-left  360ms var(--ease-in-out) forwards; }
@keyframes bd-fly-right {
  to { transform: translate(140%, 40px) rotate(20deg); opacity: 0; }
}
@keyframes bd-fly-left {
  to { transform: translate(-140%, 40px) rotate(-20deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-card.flying--right, .deck-card.flying--left {
    animation: bd-fly-fade 200ms ease forwards;
  }
  @keyframes bd-fly-fade { to { opacity: 0; } }
}
.deck-card__thumb { aspect-ratio: 16/10; flex-shrink: 0; background: var(--color-bg); position: relative; overflow: hidden; }
.deck-card__thumb img, .deck-card__thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.deck-card__stamp {
  position: absolute;
  top: 20px;
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 8px;
  border: 3px solid currentColor;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(3px);
  pointer-events: none;
  transition: opacity 80ms linear;
}
.deck-card__stamp--wish { right: 18px; color: var(--lake-on-surface); transform: rotate(14deg); }
.deck-card__stamp--skip { left: 18px;  color: var(--brick-on-surface); transform: rotate(-14deg); }
@media (prefers-reduced-motion: reduce) {
  .deck-card__stamp { transform: none !important; }
}
.deck-card__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.deck-card__body h3 { font-size: 22px; line-height: 1.2; margin: 0; }
.deck-card__desc { font-family: var(--font-body); font-size: 15px; color: var(--color-ink); line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.deck-card__meta { display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--font-body); font-size: 12px; color: var(--color-ink-dim); margin-top: auto; }
.deck-card__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 10px;
  border-top: 1px dashed var(--color-line);
}

.deck-actions { display: flex; gap: 16px; align-items: center; }
.deck-btn {
  appearance: none; cursor: pointer;
  width: 64px; height: 64px; border-radius: 50%;
  border: 2.5px solid var(--color-line); background: var(--color-surface);
  font-size: 26px; line-height: 1;
  display: grid; place-items: center;
  box-shadow: var(--shadow-1);
  transition: transform 120ms, border-color var(--dur-fast), background var(--dur-fast);
}
.deck-btn:hover { transform: translateY(-2px); }
.deck-btn--skip { color: var(--brick-on-surface); border-color: color-mix(in srgb, var(--brick) 45%, var(--color-line)); }
.deck-btn--wish { color: var(--lake-on-surface); border-color: color-mix(in srgb, var(--lake) 45%, var(--color-line)); width: 72px; height: 72px; font-size: 30px; }
.deck-btn--commit { color: var(--moss-on-surface); border-color: color-mix(in srgb, var(--moss) 45%, var(--color-line)); }
.deck-btn--undo { width: 48px; height: 48px; font-size: 18px; color: var(--color-ink-dim); }

.deck-kbd {
  font-family: var(--font-body); font-size: 12px; color: var(--color-ink-dim);
}
.deck-kbd .kbd {
  font-family: ui-monospace, Menlo, monospace;
  background: var(--color-bg); border: 1px solid var(--color-line);
  padding: 2px 6px; border-radius: 4px; margin: 0 2px;
}

/* ─── Trending tab ──────────────────────────────────────────────
   Third tab on Activities. Sectioned layout: Heating up (3 hero
   cards) · On the bubble (rows) · Locked in (rows). Reuses .av /
   .btn / trend-chip from components.css; only layout chrome here.
   (New-picks scroller deferred — needs per-pick timestamps.) */

.trending { display: flex; flex-direction: column; }

.trending__lede {
  font-family: var(--font-body); font-size: 15px;
  color: var(--color-ink-dim);
  margin: 0 0 var(--sp-3);
  max-width: 68ch; line-height: 1.5;
}
.trending__lede b { color: var(--color-ink); }

/* Section header — title + count + italic "why" */
.trending__sec-h {
  display: flex; align-items: baseline; gap: 12px;
  margin: var(--sp-5) 0 var(--sp-3);
  flex-wrap: wrap;
}
.trending__sec-h__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 19px; color: var(--color-ink);
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 8px;
}
.trending__sec-h__emoji { font-size: 18px; }
.trending__sec-h__count {
  font-family: var(--font-body); font-size: 13px;
  color: var(--color-ink-dim);
}
.trending__sec-h__why {
  font-family: var(--font-body); font-size: 13px;
  color: var(--color-ink-dim);
  font-style: italic;
  margin-left: auto;
}

/* ─── Heating up — 3 hero cards ──────────────────────────────── */
.hot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .hot-grid { grid-template-columns: repeat(3, 1fr); }
}

.hot-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.hot-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.hot-card:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}
.hot-card__thumb {
  aspect-ratio: 16/10;
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
}
.hot-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hot-card__rank {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  color: white; letter-spacing: -0.02em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45), 0 0 2px rgba(0,0,0,0.5);
}
.hot-card__heat {
  position: absolute; top: 12px; right: 12px;
  background: var(--clay); color: white;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.hot-card__heat-flame { font-size: 12px; }

.hot-card__body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.hot-card__title {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  color: var(--color-ink); margin: 0;
  line-height: 1.2; letter-spacing: -0.01em;
}
.hot-card__meta {
  font-family: var(--font-body); font-size: 13px;
  color: var(--color-ink-dim);
}
.hot-card__pile-row {
  margin-top: 2px;
}
.hot-card__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
}

/* ─── Trending chip ── shared by hot cards + rows ───────────── */
.trend-chip {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.trend-chip--commit {
  background: color-mix(in srgb, var(--moss) 14%, var(--color-surface));
  color: var(--moss-on-surface);
}
.trend-chip--wish {
  background: color-mix(in srgb, var(--lake) 14%, var(--color-surface));
  color: var(--lake-on-surface);
}
.trend-chip--zero {
  background: var(--color-bg);
  color: var(--color-ink-dim);
  border: 1px solid var(--color-line);
}
.trend-chip--lock {
  background: color-mix(in srgb, var(--dusk) 14%, var(--color-surface));
  color: var(--dusk-on-surface);
}
.trend-chip--you {
  background: color-mix(in srgb, var(--sand) 22%, var(--color-surface));
  color: var(--sand-on-surface);
  border: 1px solid color-mix(in srgb, var(--sand) 40%, var(--color-line));
}

/* ─── Pile — overlapping avatar cluster ─────────────────────── */
.pile {
  display: inline-flex; align-items: center;
}
.pile .av {
  margin-left: -8px;
  border: 1.5px solid var(--color-surface);
}
.pile .av:first-child { margin-left: 0; }
.pile .av--more {
  background: var(--color-bg);
  color: var(--color-ink-dim);
  border-color: var(--color-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
}

/* ─── Generic Trending row (used by On-the-bubble + Locked-in) ─ */
.trending__rows {
  display: grid; gap: 8px;
}
.trending-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px; align-items: center;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: 14px;
}
.trending-row__thumb {
  width: 64px; height: 56px; border-radius: 10px;
  object-fit: cover; display: block;
  background: var(--color-bg);
}
.trending-row__body {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.trending-row__title {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--color-ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.trending-row__sub {
  font-family: var(--font-body); font-size: 13px;
  color: var(--color-ink-dim);
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.trending-row__cta {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}

/* Locked-in variant — soft dusk wash to echo the locked card visual */
.trending-row--locked {
  background: color-mix(in srgb, var(--dusk) 6%, var(--color-surface));
  border-color: color-mix(in srgb, var(--dusk) 25%, var(--color-line));
}

/* Narrow-screen behavior — rows collapse cta below body */
@media (max-width: 540px) {
  .trending-row {
    grid-template-columns: 56px 1fr;
  }
  .trending-row__cta {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px dashed var(--color-line);
    margin-top: 4px;
  }
  .trending-row__thumb {
    width: 56px; height: 56px;
  }
  .trending__sec-h__why {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* ============================================================
   SEARCH BAR -- extracted from design/search-bar/Activities Search.html
   Do not edit this block manually; update the source mockup instead.
   ============================================================ */

.search-bar {
  max-width: 1100px; margin: 0 auto;
  padding: var(--sp-2) var(--sp-4) 0;
}
.search-bar__inner { /* no-op wrapper, kept for markup symmetry */ }
.search-input {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-2) 0 var(--sp-4);
  background: var(--color-bg);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  height: 48px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.search-input:focus-within {
  border-color: var(--moss-on-surface);
  background: var(--color-surface);
  outline: 2px solid color-mix(in srgb, var(--moss-on-surface) 25%, transparent);
  outline-offset: 1px;
}
.search-input__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: var(--color-ink-dim);
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.search-input:focus-within .search-input__icon { color: var(--moss-on-surface); }
.search-input input {
  flex: 1; min-width: 0;
  appearance: none; background: transparent; border: 0; outline: 0;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-ink);
  padding: 0; height: 100%;
}
.search-input input::placeholder { color: var(--color-ink-dim); opacity: 0.85; }
.search-input__clear {
  appearance: none; cursor: pointer;
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
  border: none;
  color: var(--color-ink-dim);
  font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1;
  display: grid; place-items: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.search-input__clear:hover {
  background: color-mix(in srgb, var(--brick-on-surface) 14%, transparent);
  color: var(--brick-on-surface);
}

.result-count {
  max-width: 1100px; margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--color-ink-dim);
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.result-count b { color: var(--color-ink); font-weight: 700; }
.result-count .q {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  color: var(--moss-on-surface);
}
.result-count .q::before { content: '\201C'; }
.result-count .q::after { content: '\201D'; }
.result-count__sep { opacity: 0.45; }

.empty-wrap {
  max-width: 1100px; margin: 0 auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-7);
}
.empty-wrap .empty {
  padding: 56px 24px; text-align: center;
  background: var(--color-surface);
  border: 1.5px dashed var(--color-line);
  border-radius: var(--radius-card);
  color: var(--color-ink-dim);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
}
.empty-wrap .empty__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-ink) 5%, transparent);
  color: var(--color-ink-dim);
}
.empty-wrap .empty__icon svg {
  width: 28px; height: 28px;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.empty-wrap .empty h3 { color: var(--color-ink); font-size: var(--text-xl); font-weight: 700; }
.empty-wrap .empty p { max-width: 48ch; margin-inline: auto; line-height: 1.55; }
.empty-wrap .empty .q {
  font-family: var(--font-display); font-weight: 700;
  color: var(--color-ink);
}
.empty-wrap .empty .q::before { content: '\201C'; }
.empty-wrap .empty .q::after { content: '\201D'; }
.empty-wrap .empty__suggest {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-2);
}
.empty-wrap .empty__suggest .chip {
  appearance: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  padding: 7px 13px; border-radius: 999px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  color: var(--color-ink);
}
.empty-wrap .empty__suggest .chip:hover { border-color: var(--moss-on-surface); color: var(--moss-on-surface); }
.empty-wrap .empty__clear {
  appearance: none; cursor: pointer;
  margin-top: var(--sp-3);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  padding: 9px 16px; border-radius: var(--radius-btn);
  background: transparent;
  border: 1.5px solid var(--moss-on-surface);
  color: var(--moss-on-surface);
}
.empty-wrap .empty__clear:hover { background: color-mix(in srgb, var(--moss-on-surface) 12%, transparent); }

/* END SEARCH BAR */