/* EverList — U1–U6 chat-first redesign (ui-ux-v2 plan).
   Palette: original blue-black + green; category coding via .vtag-<category> classes. */
/* ============================================================
   EverList design tokens — Wave 1 (board-cards-design-audit §2).
   THE CONTRACT — one job per color:
   - --money touches ONLY: price figures, escrow/lock badge, primary
     booking CTA, send button, live dot. Never headings, hovers,
     category tags, or links.
   - Links/hovers use --text/--line emphasis or the category hue.
   - Featured = plum tag tint, never a money border.
   ============================================================ */
:root {
  /* surfaces (deep slate is the frame) */
  --bg: #1A252B;       /* page */
  --bg2: #212F37;      /* header, cards */
  --bg3: #283943;      /* inputs, chips */
  --bg4: #283943;      /* date blocks, agent bubbles */
  --surface: #212F37;
  --line: #3B525D;
  --line-soft: #2B3D47;
  --text: #EAF0ED;
  --text2: #BCCBCE;
  --muted: #8AA0A8;
  /* accents — THE contract */
  --money: #86C0A6;    /* sage, light: price, escrow, primary CTA, live dot ONLY */
  --money-ink: #12211A;
  --accent: var(--money);        /* legacy alias: primary CTA/focus/send */
  --accent-dim: #6FA98B;         /* dimmer money tone for borders/focus */
  --accent-ink: var(--money-ink);
  --accent-soft: rgba(134,192,166,.14);
  --cat-events: #C0A1BE;   /* plum — events family (WCAG 4.5+ on tint) */
  --cat-services: #93ACD0; /* dusty blue — services family */
  --cat-wellness: #90AFBD; /* slate-blue — wellness family */
  --cat-food: #C6A0AF;     /* wine — food family */
  --cat-jobs: #9DB2BC;     /* deep slate — jobs/other */
  --cat-other: #9BAEB4;    /* muted — uncategorised */
  --warm: #E8A44C;         /* urgency only: low capacity, deadlines */
  --danger: #E57368;
  --glass: rgba(26,37,43,.92);
  --shadow: rgba(0,0,0,.4);
  --radius: 14px;
  /* type scale — 1.25 modular */
  --fs-xs: 11px; --fs-s: 12.5px; --fs-b: 14px; --fs-h3: 17px; --fs-h2: 21px;
  --fs-h1: clamp(28px, 4vw, 40px);
  --lh-tight: 1.2; --lh-body: 1.55;
  /* 4px spacing grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* radius ladder */
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-pill: 999px;
  /* elevation */
  --e1: 0 1px 2px var(--shadow); --e2: 0 6px 18px var(--shadow); --e3: 0 18px 48px var(--shadow);
  --tint1: rgba(255,255,255,.03);
  --tint2: rgba(255,255,255,.06);
  --tint3: rgba(255,255,255,.08);
  --tint4: rgba(255,255,255,.14);
  --tint5: rgba(255,255,255,.17);
  --tint6: rgba(255,255,255,.2);
  --hero-grad: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(134,192,166,.07), transparent 70%);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--bg); }   /* bug fix: canvas color must reach the page bottom */
html, body { overflow-x: clip; }   /* owner fix: nothing may widen the mobile layout viewport */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---- header ---- */
.top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.2px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
/* Item 5 (owner fixes 2026-09-21): the wordmark is a link but must never
   render like a bare link — inherits text color, no underline, both themes. */
.brand a { color: inherit; text-decoration: none; }
.brand a:visited { color: inherit; }
.brand a span { color: inherit; }
.wordmark { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.wordmark:visited { color: inherit; }
.nav { display: flex; gap: 4px; }
.nav a { color: var(--muted); text-decoration: none; padding: 8px 13px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.nav a.on { color: var(--text); background: var(--bg4); }
/* B4 2026-10-22: CSP-safe brand links (404 pages) — replaces inline styles */
.brandlink { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brandlink:visited { color: inherit; }
.brandlink.small { gap: 7px; }
/* V2 2026-10-22: narrow screens — nav row scrolls instead of truncating */
@media (max-width: 640px) {
  .nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
  .nav::-webkit-scrollbar { display: none; }
}
.status { margin-left: auto; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.dot.ok { background: var(--accent); box-shadow: 0 0 9px var(--accent); }
.dot.down { background: var(--danger); }

/* ---- U1: hero ---- */
.hero {
  padding: 52px 0 28px;
  text-align: center;
  background: var(--hero-grad);
}
.hero-title {
  margin: 0 0 8px;
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.05;
}
.hero-title em {
  font-style: normal;
  color: var(--accent);
}
.hero-sub {
  max-width: 580px;
  margin: 0 auto 24px;
  color: var(--text2);
  font-size: 15px;
  line-height: 1.6;
}
.hero-form {
  display: flex;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
  align-items: flex-end;
}
.hero-form textarea {
  flex: 1;
  resize: none;
  background: var(--bg2);
  border: 2px solid var(--line);
  color: var(--text);
  border-radius: 18px;
  padding: 16px 18px;
  font: inherit;
  font-size: 16px;
  max-height: 160px;
  transition: border-color .15s;
}
.hero-form textarea:focus {
  outline: none;
  border-color: var(--accent-dim);
}
.hero-form textarea::placeholder { color: var(--muted); }
.hero-form button {
  background: var(--accent);
  border: none;
  color: var(--accent-ink);
  font-size: 18px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .1s;
}
.hero-form button:hover { transform: scale(1.05); }
.hero-form button:active { transform: scale(.98); }

/* owner 2026-10-21: on mobile the hero row (menu + input + send) leaves the
   textarea ~156px of text width, so even the short placeholder wraps to two
   lines. Give the box two lines instead of a scrollbar; typed text keeps
   auto-growing. Measured: line-height 24.8px + 32px padding + 4px borders. */
@media (max-width: 860px) {
  .hero-form textarea { min-height: calc(2 * 1.55em + 36px); }
}
.hero-live {
  max-width: 920px;
  margin: 32px auto 0;
  text-align: left;
}
.hero-live-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted); /* money contract: section labels never carry --money */
  margin-bottom: 10px;
}
.hero-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.hero-card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: .15s;
}
.hero-card:hover { border-color: var(--accent-dim); }
.hero-card .hc-top { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.hero-card .hc-title { font-weight: 650; font-size: 14px; }
.hero-card .hc-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text2); }
.hero-card .hc-price { font-weight: 700; font-size: 14px; }

/* hero engaged state: choreographed handoff (Wave 1 item 6).
   JS keeps the hero visible until the first agent reply starts, then adds
   .engaged-leaving (fade) and .engaged (remove from flow) once the dock has
   scrolled into view. Reduced motion: instant cut, as before. */
body.engaged-leaving .hero {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .32s ease-out, transform .32s ease-out;
}
body.engaged .hero { display: none; }
.dock { transition: opacity .28s ease-out, transform .28s ease-out; }
body.engaged-leaving .dock { opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) {
  body.engaged-leaving .hero { transition: none; opacity: 1; transform: none; }
  .dock { transition: none; }
  body.engaged-leaving .dock { opacity: 1; transform: none; }
}

/* ---- discover ---- */
.discover { padding: 18px 0 8px; }
.dhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dhead h1 { margin: 0; font-size: 21px; letter-spacing: -.4px; font-weight: 650; }
.cnt { color: var(--muted); font-size: 13px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.flex { flex: 1; }
.chip {
  background: var(--bg3); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.chip:hover { border-color: var(--accent-dim); }
.chip.on { background: var(--accent-soft); border-color: var(--accent-dim); color: var(--accent); }
.postbtn {
  background: var(--bg2); border: 1px dashed var(--accent-dim); color: var(--accent);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.postbtn:hover { background: var(--accent-soft); }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
/* card-level category hover tint: pure CSS via per-category class (audit §4.3) */
.card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
  cursor: default; transition: .18s; box-shadow: var(--e1);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--e2); border-color: var(--line); filter: brightness(1.06); }
html[data-theme="light"] .card:hover { filter: none; background: var(--surface-2, #F6F8F4); }
.card:hover:has(.vtag.c-events), .card:hover:has(.vtag.c-concert), .card:hover:has(.vtag.c-workshop),
.card:hover:has(.vtag.c-community), .card:hover:has(.vtag.c-market), .card:hover:has(.vtag.c-cinema),
.card:hover:has(.vtag.c-quiz), .card:hover:has(.vtag.c-tour) { border-color: color-mix(in srgb, var(--cat-events) 55%, var(--line)); }
.card:hover:has(.vtag.c-services), .card:hover:has(.vtag.c-repair) { border-color: color-mix(in srgb, var(--cat-services) 55%, var(--line)); }
.card:hover:has(.vtag.c-wellness), .card:hover:has(.vtag.c-yoga), .card:hover:has(.vtag.c-massage) { border-color: color-mix(in srgb, var(--cat-wellness) 55%, var(--line)); }
.card:hover:has(.vtag.c-food), .card:hover:has(.vtag.c-sushi) { border-color: color-mix(in srgb, var(--cat-food) 55%, var(--line)); }
.card:hover:has(.vtag.c-jobs), .card:hover:has(.vtag.c-shift) { border-color: color-mix(in srgb, var(--cat-jobs) 55%, var(--line)); }
/* featured: approved tint treatment — never a money border (F8) */
.r1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.date { background: var(--bg4); border: 1px solid var(--line); border-radius: var(--r-s); padding: 4px 9px; text-align: center; line-height: 1.1; min-height: 24px; }
.date b { font-size: var(--fs-h3); font-weight: 700; color: var(--text2); }
.date s { text-decoration: none; display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .9px; color: var(--muted); }
/* Category coding is FAMILY-level (learnable): the tag text may name a
   subcategory, the color always comes from its family token (audit §2.1). */
.vtag {
  font-size: 12px; text-transform: uppercase; letter-spacing: .7px; font-weight: 700;
  border-radius: var(--r-pill); padding: 4px 11px;
  /* Item 6 (owner fixes 2026-09-21): badges carry their family hue as a
     tinted fill + a same-hue border — more visual weight, still tasteful,
     no neon. The per-family rules below only set `color`; background and
     border derive from it via currentColor, so both themes stay in token. */
  background: color-mix(in srgb, currentColor 22%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  color: var(--cat-other);
}
.vtag.c-events, .vtag.c-concert, .vtag.c-workshop, .vtag.c-community,
.vtag.c-market, .vtag.c-cinema, .vtag.c-quiz, .vtag.c-tour { color: var(--cat-events); }
.vtag.c-services, .vtag.c-repair { color: var(--cat-services); }
.vtag.c-wellness, .vtag.c-yoga, .vtag.c-massage { color: var(--cat-wellness); }
.vtag.c-food, .vtag.c-sushi { color: var(--cat-food); }
.vtag.c-jobs, .vtag.c-shift { color: var(--cat-jobs); }
.vtag.c-other { color: var(--cat-other); }
.card h3 { margin: 0; font-size: var(--fs-h3); font-weight: 650; letter-spacing: -.2px; line-height: var(--lh-tight); }
.card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.meta { color: var(--muted); font-size: var(--fs-s); }
.desc { color: var(--text2); font-size: var(--fs-b); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }
/* money contract: price figure carries --money; title outranks it by weight, not size */
.price { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.3px; color: var(--money); }
.price.free { color: var(--text); }
/* D2 2026-10-15: compact price badge in the always-visible card top row */
.pricebadge { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: -.2px; color: var(--money); background: color-mix(in srgb, var(--money) 14%, transparent); border: 1px solid color-mix(in srgb, var(--money) 38%, transparent); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.pricebadge.free { color: var(--text); border-color: var(--line-soft); background: color-mix(in srgb, var(--text) 7%, transparent); }
/* D3 2026-10-15: client-side distance chip (location never leaves the browser) */
.distbadge { font-size: 11px; font-weight: 600; color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.locbtn { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.locbtn:hover { border-color: var(--accent-dim); color: var(--accent); }
.esc { font-size: var(--fs-s); color: var(--money); font-weight: 600; cursor: help; }
.cap { margin-left: auto; font-size: var(--fs-s); color: var(--muted); }
.cap.urgent { color: var(--warm); font-weight: 600; }
/* low-capacity warm tint on the whole card body (≤20% left, real counts only) */
.card.lowcap { border-color: color-mix(in srgb, var(--warm) 35%, var(--line)); }
/* sold out: muted treatment, no money color anywhere */
.card.soldout { opacity: .55; }
.card.soldout .price, .card.soldout .esc { color: var(--muted); }
.cta { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 10px; padding: 9px 13px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.empty { color: var(--muted); font-size: 14px; padding: 24px 4px; }
.empty b { color: var(--text2); }

/* ---- chat-driven board ---- */
/* ---------- Owner 2026-09-29: chat->board 'show me' chip + pill nudge ---- */
.showme {
  display: inline-block; margin-top: 8px; padding: 5px 12px;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-dim); border-radius: var(--r-pill, 999px);
  transition: border-color .15s, background .15s;
}
.showme:hover { border-color: var(--accent); background: var(--tint3); }

/* Demo polish (owner 2026-10-10): latency as a quiet right-aligned meta line
   under a reply — no bubble chrome, reads like a timestamp. */
.lat {
  text-align: right; font-size: 10.5px; letter-spacing: .02em;
  color: color-mix(in srgb, var(--text) 42%, transparent);
  padding: 0 4px 2px 0; user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .lat { animation: chipin .25s cubic-bezier(.2,.7,.2,1) backwards; }
}

/* Smart recovery (owner 2026-09-30): tappable example chips under a decline
   reply. Same chip language as .showme, staggered entrance. */
.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.suggestchip {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-dim); border-radius: 999px;
  padding: 5px 12px; transition: border-color .15s, background .15s;
  animation: chipin .25s cubic-bezier(.2,.7,.2,1) backwards;
}
.suggestchip:hover { border-color: var(--accent); background: var(--tint3); }

/* Round 2 (owner 2026-09-30): booked ✓ chip, pill intent, resume note. */
.bookedchip {
  display: inline-block; margin-left: 6px; padding: 2px 7px;
  font-size: 11px; font-weight: 700; line-height: 1.2;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-dim); border-radius: 999px;
}
.card.booked .title { color: var(--text2); }
.pill.intent { box-shadow: 0 0 0 2px var(--accent-dim), var(--e2); }
.resume { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.resume .resumechip { margin-top: 0; }
@keyframes chipin { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* First-load cascade (owner 2026-09-30): on the very first board render,
   cards fade-rise in once with a 40ms stagger. One-shot class, removed on
   subsequent renders so searches stay instant. */
.firstload .card { animation: cardfirst .4s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes cardfirst { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .suggestchip { animation: none; }
  .firstload .card { animation: none; }
}
.nudgetip {
  position: fixed; right: 18px; bottom: 148px; z-index: 44;
  max-width: 240px; text-align: left; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1.4;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--accent-dim); border-radius: 14px 14px 4px 14px;
  padding: 10px 14px; box-shadow: var(--e2);
  animation: nudgetip-in .35s cubic-bezier(.2,.9,.3,1.2);
}
.nudgetip:hover { border-color: var(--accent); }
@keyframes nudgetip-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nudgetip { animation: none; } }

.bkn {
  font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft);
  border-radius: 6px; padding: 3px 7px; letter-spacing: .3px;
}
/* ---------- polish bundle 2026-09-25: #4 instant click ack ----------
   Ring pulse on the clicked card the same frame — the board answers
   before the panel grow starts. Guarded: no ring under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cardPulse {
    0% { box-shadow: 0 0 0 0 var(--accent-soft); }
    100% { box-shadow: 0 0 0 9px transparent; }
  }
  .card.pulse { animation: cardPulse .28s ease-out; }
}

/* ---- detail panel: full-row expansion in the row ABOVE the clicked card ----
   Restored from board v6-v8 (owner call 2026-09-21: panel grows UPWARD out
   of the clicked card into the row above, never sideways). JS geometry in
   app.js (openDetail/closeDetail/rowsOfGrid) is the v8 original; these rules
   give the panel its full-row grid slot and the clicked card its ghost hole. */
.card.ghost {
  border-style: dashed;
  border-color: var(--accent-dim);
  opacity: .35;
  pointer-events: auto;      /* clicking the hole closes the panel */
  filter: saturate(.4);
  transition: opacity .18s, filter .18s;
}
.card.ghost:hover { transform: none; box-shadow: var(--e1); filter: none; border-color: var(--accent-dim); }
.detail-panel,
.detail-panel.ldetail {   /* 0-2-0: must beat the SSR .ldetail rule below (max-width 760px centered) */
  max-width: 760px;          /* owner call 2026-09-22: panel not full-row wide — old page width */
  margin: 0 auto;            /* centered inside its full-row grid slot */
  grid-column: 1 / -1;       /* still occupies the row above the clicked card (grows upward) */
  background: var(--bg2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-l);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 12px;
  align-items: center;       /* owner call 2026-09-21: details view text centered */
  text-align: center;
  position: relative;
  z-index: 1;
  box-shadow: var(--e3);
  scroll-margin: 24px;       /* breathing room when scrolled into view */
}
/* content classes (.ldetail .lmeta/.ldesc/.lcta/.lnote/.esc.note) are shared
   with the SSR /l/{id} page and already styled below; panel-scoped only */
.detail-panel .dtitle { margin: 2px 0 0; padding-right: 40px; font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.3px; }
.detail-panel .ldesc { margin: 0; color: var(--text2); font-size: 14px; line-height: 1.6; max-width: 72ch; }
.detail-panel .drel { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.detail-panel .drelrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
/* Owner 2026-09-25: panel content is centered, but flex ROWS defaulted to
   flex-start — CTA buttons and related chips hugged the left edge while
   all text sat centered. Rows center to match. */
.detail-panel .lcta,
.detail-panel .drelrow { justify-content: center; }
.detail-panel .drelitem {
  background: var(--bg4); border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--text2); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; cursor: pointer; text-align: left;
}
.detail-panel .drelitem:hover { border-color: var(--accent-dim); color: var(--text); }
/* owner call 2026-09-23: organizer link as a designed pill (domain only) */
.orglink { margin-top: 2px; }
.orglink-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg4); border: 1px solid var(--line);
  border-radius: var(--r-pill); color: var(--text2);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 16px; text-decoration: none; cursor: pointer;
  transition: border-color .15s, color .15s, transform .15s;
}
.orglink-btn:hover { border-color: var(--accent-dim); color: var(--text); transform: translateY(-1px); }
.dclose {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--muted); font-size: 15px; line-height: 1;
  width: 30px; height: 30px; cursor: pointer; font-family: inherit;
}
.dclose:hover { color: var(--text2); border-color: var(--accent-dim); }

.boardin { animation: boardin .38s cubic-bezier(.2,.7,.2,1); }
@keyframes boardin {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .boardin { animation: none; }
  .card { transition: none; }
}

/* ---- chat dock (companion mode, after engagement) ---- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center; padding: 0 22px 18px;
}
/* C-fix 2026-10-11: while the dock is up, page content (site footer, last
   cards) must clear it — the fixed dock overlapped the footer text (owner
   video review). Same clearance pattern the mobile tabbar already uses. */
body.engaged .sitefoot { padding-bottom: 120px; }
.dock[hidden] { display: none; }
.dock .panel {
  width: 100%; max-width: 780px; background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 24px 60px var(--shadow); overflow: hidden;
  display: flex; flex-direction: column;
}
.dhead2 { display: flex; align-items: center; gap: 9px; padding: 10px 15px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 12.5px; }
.dhead2 b { color: var(--text2); font-weight: 600; }
.dhead2 .live { display: flex; align-items: center; gap: 7px; }
.dhead2 .tag { opacity: .7; }
.minbtn { cursor: pointer; color: var(--text2); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 15px; font-family: inherit; line-height: 1; }
.minbtn:hover { border-color: var(--accent-dim); color: var(--accent); }

/* ---- Owner ask 2026-09-24: cinematic close/open -------------------------
   Close: the panel DEFORMS (squash + slight skew, border-radius morphing
   toward a circle) and gets sucked into the chat pill's measured position
   (--sx/--sy set per-frame by JS), fading only at the end. Open: pops out
   of the pill from a tiny circle with elastic overshoot. Reduced motion:
   JS falls back to instant hide/show. */
@media (prefers-reduced-motion: no-preference) {
  .dock.sucking .panel {
    /* oscillation fix (owner retest): monotonic ease-in, NO negative control
       points and NO grow keyframe — the panel must only ever shrink. */
    animation: suckin .34s cubic-bezier(.5, 0, .75, .45) forwards;
  }
  /* Perf fix (owner: "it lags"): while animating, drop the glass backdrop-filter
     and heavy shadow — recompositing blur per frame is the jank source. A solid
     surface reads identically while the panel is in motion. Pause competing
     animations (levitate, glow breathe) and block re-triggers. */
  .dock.sucking .panel,
  .dock.popout .panel {
    backdrop-filter: none !important;
    will-change: transform, opacity, border-radius;
    pointer-events: none;
  }
  /* Owner: the panel must come OUT of the pill without a background —
     the solid in-flight surface is for the suck-in only; forcing it on the
     pop-out made a background flash that vanished when the morph ended. */
  .dock.sucking .panel {
    background: var(--bg2) !important;
    box-shadow: 0 10px 30px var(--shadow);
  }
  .dock.sucking .bubble,
  .dock.popout .bubble { animation: none !important; }   /* pause glow breathe + shimmer */
  body.chatcompact .dock.sucking { animation: none; }    /* pause levitate during morph */
  /* Wobble fix (owner round 4): the deformation flourish itself was the
     oscillation — skew flipped -3deg -> +6deg (a literal left-right swing)
     and the split scale (.28,.5) flipped the panel's aspect mid-flight.
     The suck-in is now a PURE uniform shrink: one scale factor, zero skew,
     straight flight into the pill. Nothing left that can move back and
     forth. border-radius 20px -> 60px clamps to a circle once shrunk. */
  @keyframes suckin {
    0% {
      transform: translate(0, 0) scale(1);
      border-radius: 20px;
      opacity: 1;
    }
    100% {
      transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(.04);
      border-radius: 60px;
      opacity: 0;
    }
  }
  .dock.popout .panel {
    /* bounce fix (owner round 5): the elastic bezier (.34,1.56,…) overshot
       past 100% and the 75% keyframe grew to 1.04 — an intentional spring
       that reads as a bounce. Now a pure monotonic grow, ease-out, no
       overshoot: the panel rises out of the pill and stops exactly at size. */
    animation: popout .38s cubic-bezier(.2, .75, .3, 1) both;
    /* origin fix: --sx/--sy are measured center-to-center; a non-default
       transform-origin scaled around the wrong point -> panel seemed to pop
       from a place other than the pill. Keep the default center origin. */
  }
  @keyframes popout {
    0% {
      transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(.04);
      border-radius: 60px; opacity: 0;
    }
    100% {
      transform: translate(0, 0) scale(1);
      border-radius: 20px; opacity: 1;
    }
  }
  .pill.pop { animation: pillpop .25s ease-out; }
  @keyframes pillpop { 0% { transform: scale(.9); } 100% { transform: scale(1); } }
}

.chat { flex: 1; overflow-y: auto; max-height: 210px; padding: 14px 15px 6px; scroll-behavior: smooth; }
.msg { display: flex; margin: 6px 0; }
.msg.user { justify-content: flex-end; }
.bubble {
  max-width: 84%; padding: 9px 13px; border-radius: 14px; font-size: 14px;
  white-space: pre-wrap; overflow-wrap: break-word;
}
.msg.user .bubble { background: #1d3a2a; border: 1px solid #2b5a3f; color: var(--text); }
.msg.agent .bubble { background: var(--bg4); border: 1px solid var(--line); }
.msg.err .bubble { border-color: var(--danger); color: #fca5a5; }
.msg.think .bubble { color: var(--muted); font-style: italic; background: none; border: none; padding: 2px 8px; font-size: 12px; }

/* U6: typing indicator */
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typb 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typb { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing span { animation: none; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 15px 4px; }
.inputbar { display: flex; gap: 10px; align-items: flex-end; padding: 10px 14px 6px; }
.inputbar textarea {
  flex: 1; resize: none; background: var(--bg3); border: 1px solid var(--line);
  color: var(--text); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 14px; max-height: 180px;
}
.inputbar textarea:focus { outline: none; border-color: var(--accent-dim); }
.inputbar button {
  background: var(--accent); border: none; color: var(--accent-ink); font-size: 16px;
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer; flex-shrink: 0;
}
.inputbar button:disabled { opacity: .45; cursor: default; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 15px 12px; color: var(--muted); font-size: 12px; }
.linkbtn { background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; flex-shrink: 0; }
.linkbtn:hover { color: var(--text); }

/* ---- corner pill (minimised state) ---- */
.pill {
  position: fixed; right: 22px; bottom: 22px; z-index: 41; display: none;
  align-items: center; gap: 9px; background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: 999px; padding: 14px 20px; font: inherit; font-size: 14px;
  font-weight: 700; cursor: pointer; box-shadow: 0 14px 34px var(--shadow);
}
body.min .dock { display: none; }
body.min .pill { display: flex; }
/* Owner 2026-10-19: the minimized pill wears the EverList logo (the approved
   brand mark served as /favicon.svg) instead of emoji glyphs. White chip
   keeps the mark readable on the accent-green pill in both themes. */
.pill .pilllogo {
  display: block; width: 26px; height: 26px;
  border-radius: 9px; padding: 3px; box-sizing: content-box;
  background: rgba(255, 255, 255, 0.94);
}

/* ---- site footer (U4/F13) ---- */
.sitefoot {
  margin-top: 48px;
  padding: 20px 0 26px;
  border-top: 1px solid var(--line-soft);
}
.footrow {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.brandline { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; }
.brandline img { border-radius: 6px; }
.footnav { display: flex; gap: 16px; flex-wrap: wrap; }
.footnav a { color: var(--muted); text-decoration: none; font-size: 13px; }
.footnav a:hover { color: var(--accent); }
.footnote { margin-left: auto; color: var(--muted); font-size: 12px; }
@media (max-width: 860px) { .footnote { margin-left: 0; flex: 1 1 100%; } }

/* ---- responsive ---- */
@media (max-width: 1080px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .top { flex-wrap: wrap; }
  .nav { flex: 1 1 100%; order: 3; }
  .grid { grid-template-columns: 1fr; }
  .dock { padding: 0 12px 12px; }
  .chat { max-height: 150px; }
  .foot { flex-wrap: wrap; }
  .hero { padding: 32px 0 20px; }
  .hero-form { gap: 8px; }
  .hero-form button { width: 48px; height: 48px; }
  .hero-strip { grid-template-columns: 1fr 1fr; }
}

/* ---- W1 dashboard: bookings + orders ---- */
.dashwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 4px; }
.dh2 { margin: 6px 0 10px; font-size: 13px; font-weight: 640; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
.dashcard { cursor: default; }
.dashcard .r1 { display: flex; align-items: center; gap: 8px; }
.escbadge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--text2); }
.escbadge.e-held { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.escbadge.e-waived { background: transparent; color: var(--muted); }
.escbadge.e-released { background: rgba(96,165,250,.15); color: #7ab3f5; border-color: transparent; }
.escbadge.e-refunded { background: rgba(248,113,113,.12); color: var(--danger); border-color: transparent; }
.escbadge.e-direct { background: rgba(96,165,250,.15); color: #7ab3f5; border-color: transparent; }
.escbadge.e-disputed { background: rgba(245,158,11,.15); color: #d97706; border-color: transparent; }
.batchbar { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.batchhint { font-size: 11px; color: var(--muted); }

/* ---------- command menu (owner 2026-10-21): discoverability layer ---------- */
.menubtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg3); color: var(--text); font: inherit; font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.menubtn:hover { border-color: var(--accent); color: var(--accent); }

/* menu button inline in the input bars (owner 2026-10-21: standalone button
   wasted a row; chips superseded by the menu) — icon-only, theme-bound */
.menuicon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg3); color: var(--text);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.menuicon:hover { border-color: var(--accent-dim); color: var(--accent); }
.hero-form .menuicon { border-radius: 14px; width: 56px; height: 56px; font-size: 20px; }
.menuback { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .menuback { align-items: center; } }
.menusheet { background: var(--surface); width: min(560px, 100vw); max-height: min(78vh, 640px); overflow-y: auto; border-radius: 18px 18px 0 0; padding: 14px 14px 18px; box-shadow: 0 -8px 32px rgba(0,0,0,.18); }
@media (min-width: 640px) { .menusheet { border-radius: 18px; } }
.menuhead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.menuhead b { font-size: 16px; }
.menuhint { font-size: 11px; color: var(--muted); }
.menux { margin-left: auto; border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--muted); padding: 10px 12px; margin-top: -6px; margin-right: -4px; }
.menux:hover { color: var(--text); }
.menugroup { margin: 10px 0; }
.menugtitle { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 4px 6px; }
.menuitem { display: block; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; font-size: 14px; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--text); }
.menuitem:hover, .menuitem:focus-visible { background: var(--accent-soft, rgba(37,99,235,.08)); outline: none; }
.menuitemlabel { display: block; }
.menusub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.menuhandle { display: none; }
@media (max-width: 639px) { .menuhandle { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line, #e2e8f0); margin: 0 auto 10px; } }
.menusheet { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.menusheet::-webkit-scrollbar { width: 6px; }
.menusheet::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.cta.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.cta.danger:hover { background: rgba(248,113,113,.12); }
.loginrow { display: flex; gap: 9px; margin-top: 10px; max-width: 560px; }
.loginrow .loginseed { flex: 1; background: var(--bg3); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; color: var(--text); font: inherit; font-size: 13px; }
.loginrow .loginseed:focus { outline: none; border-color: var(--accent-dim); }
@media (max-width: 860px) { .dashwrap { grid-template-columns: 1fr; } }

/* ---------- W2: server-rendered detail pages (/l/{id}) ---------- */
.ldetail { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.ldetail .lmain { background: var(--surface, #161a1d); border: 1px solid var(--tint3); border-radius: 16px; padding: 24px; }
.ldetail h1 { margin: 8px 0 4px; font-size: 26px; line-height: 1.2; }
.ldetail .lmeta { color: var(--muted, #9aa4a9); font-size: 13px; }
.ldetail .ldesc { margin: 14px 0; line-height: 1.55; white-space: pre-line; }
.ldetail .lcta { margin: 18px 0 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.ldetail .lcta .btn { background: var(--accent, #4ade80); color: #0d1117; font-weight: 700; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.ldetail .lcta .chip { text-decoration: none; }
.ldetail .lnote { color: var(--muted, #9aa4a9); font-size: 12.5px; margin-top: 10px; overflow-wrap: anywhere; }
.ldetail .esc.note { margin: 12px 0; }
/* B11 2026-10-22: honesty banners (.note on SSR pages) get real emphasis */
.note { border: 1px solid var(--warm, #AD5009); border-left-width: 4px; border-radius: 10px; padding: 10px 14px; margin: 12px 0; color: var(--text); background: var(--surface, #161a1d); }
.ldetail .lsmall { color: var(--muted, #9aa4a9); font-size: 11px; opacity: .75; margin-top: 14px; letter-spacing: .02em; }
.ldetail .lrel { margin-top: 28px; }
.ldetail .lrel h2 { font-size: 16px; margin-bottom: 10px; }
.ldetail .lgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ldetail a.lcard { display: block; background: var(--surface, #161a1d); border: 1px solid var(--tint3); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: inherit; }
.ldetail a.lcard h3 { font-size: 14.5px; margin: 4px 0 0; }
/* details link on grid cards */
.card .foot .dlink { color: var(--muted, #9aa4a9); font-size: 12px; text-decoration: underline; margin-left: 8px; }
.card .foot .dlink:hover { color: var(--accent, #4ade80); }
.ldetail .lmain a { color: var(--accent, #4ade80); } /* default blue is unreadable on dark */

/* ---------- W3: my-listings (wizard form styles kept for account signup) ---------- */
.wiz { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; max-width: 760px; }
.wiz label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted, #9aa4a9); }
.wiz .wfull { grid-column: 1 / -1; }
.wiz input, .wiz select, .wiz textarea { background: var(--surface, #161a1d); color: inherit; border: 1px solid var(--tint4); border-radius: 8px; padding: 8px 10px; font: inherit; }
.wiz input:focus, .wiz select:focus, .wiz textarea:focus { outline: 1px solid var(--accent, #4ade80); }
.myrow { display: flex; align-items: center; gap: 10px; background: var(--surface, #161a1d); border: 1px solid var(--tint3); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; flex-wrap: wrap; }
.myrow .t { font-weight: 600; }
.myrow .m { color: var(--muted, #9aa4a9); font-size: 12px; }
.myrow .grow { flex: 1; }
.myrow .linkbtn { cursor: pointer; }

/* ---------- W3: booking detail + signup ---------- */
.btl { display: flex; gap: 18px; align-items: center; margin: 14px 0 18px; flex-wrap: wrap; }
.btl-step { display: flex; align-items: center; gap: 6px; color: var(--muted, #9aa4a9); font-size: 13px; }
.btl-step .btl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tint5); }
.btl-step.done .btl-dot { background: var(--accent, #4ade80); opacity: .45; }
.btl-step.now { color: var(--text, #e6edf2); font-weight: 600; }
.btl-step.now .btl-dot { background: var(--accent, #4ade80); box-shadow: 0 0 8px var(--accent, #4ade80); }
.bcard { background: var(--surface, #161a1d); border: 1px solid var(--tint3); border-radius: 10px; padding: 14px 16px; max-width: 560px; }
.brow { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--tint2); }
.brow:last-child { border-bottom: none; }
.brow .bk { width: 110px; color: var(--muted, #9aa4a9); font-size: 12.5px; }
.brow .bv { font-weight: 600; }
#signup-area { margin: 0 0 18px; }
#signup-area .cnt { margin-left: 10px; }

.seedbox { background: var(--surface, #161a1d); border: 1px solid var(--tint5); border-radius: 8px; padding: 10px 12px; font-size: 13px; letter-spacing: .3px; word-break: break-all; user-select: all; }
a.esc:hover { text-decoration: underline; }

/* ---------- W4: ratings + transparency + network ---------- */
.rline { color: var(--accent, #4ade80); font-size: 12.5px; margin-top: 6px; }
.ldetail .rline { margin-top: 8px; }
.foot .footlinks { opacity: .85; }
.foot .footlinks a { color: var(--muted, #9aa4a9); text-decoration: underline; }
.foot .footlinks a:hover { color: var(--accent, #4ade80); }
.ltot { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0 22px; max-width: 760px; }
.ltable { width: 100%; max-width: 860px; border-collapse: collapse; font-size: 13px; margin: 10px 0 18px; }
.ltable th { text-align: left; color: var(--muted, #9aa4a9); font-weight: 500; font-size: 12px; padding: 6px 10px; border-bottom: 1px solid var(--tint4); }
.ltable td { padding: 7px 10px; border-bottom: 1px solid var(--tint2); vertical-align: top; overflow-wrap: anywhere; }
.ltable tr:hover td { background: var(--tint1); }
.tier { text-transform: uppercase; letter-spacing: .8px; font-size: 11.5px; }
.tier-verified { color: var(--accent, #4ade80); }
.tier-open { color: var(--muted, #9aa4a9); }
.ldetail .tier-verified { color: var(--accent, #4ade80); }

/* ---------- W5: light theme + a11y ---------- */
html[data-theme="light"] {
  --bg: #F2F5F1;  --bg2: #FFFFFF;  --bg3: #F6F8F4;  --bg4: #F6F8F4;
  --surface: #FFFFFF;
  --line: #D3DDD2;  --line-soft: #E4EBE3;
  --text: #26343D;  --text2: #4A5B64;  --muted: #7E8D94;
  --money: #457462;  --money-ink: #FFFFFF;
  --accent: var(--money);  --accent-dim: #3E6A58;  --accent-ink: #FFFFFF;
  --accent-soft: rgba(69,116,98,.12);
  --cat-events: #654363;  --cat-services: #566B8D;  --cat-wellness: #4E6E7E;
  --cat-food: #7A4A5E;  --cat-jobs: #364B57;  --cat-other: #5F6C73;
  --warm: #AD5009;
  --danger: #B3261E;
  --glass: rgba(255,255,255,.94);  --shadow: rgba(38,52,61,.12);
  --tint1: rgba(38,52,61,.04);  --tint2: rgba(38,52,61,.07);
  --tint3: rgba(38,52,61,.09);  --tint4: rgba(38,52,61,.15);  --tint5: rgba(38,52,61,.19);  --tint6: rgba(38,52,61,.22);
  --hero-grad: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(76,127,107,.08), transparent 70%);
  color-scheme: light;
}

:focus-visible { outline: 2px solid var(--accent, #4ade80); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--bg2); color: var(--text); padding: 8px 14px; border-radius: 0 0 8px 0; z-index: 99; }
.skip:focus { left: 0; }
#theme-btn { cursor: pointer; }
/* Owner nit 2026-09-24: the theme toggle must never look like a hyperlink —
   override the .linkbtn underline with a proper chip-button treatment. */
#theme-btn {
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--bg3);
  transition: border-color .15s, color .15s;
}
#theme-btn:hover { border-color: var(--accent-dim); color: var(--accent); }

/* ---- U3: chat dock on SSR pages (dock2) ---- */
body.dock2-min #dock2 { display: none; }
body:not(.dock2-min) #chat-pill2 { display: none; }
@media (max-width: 860px) {
  /* SSR dock: slimmer on phones; input stays reachable */
  #dock2 .chat { max-height: 130px; }
}

/* ---- U5: mobile bottom tab bar ---- */
.tabbar { display: none; }
@media (max-width: 860px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 39;
    display: flex; background: var(--glass); backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .tabbar .tab {
    flex: 1; background: none; border: none; color: var(--muted);
    font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
    padding: 6px 2px; border-radius: 10px;
  }
  .tabbar .tab.on { color: var(--accent); background: var(--accent-soft); }
  /* keep the chat dock + pill clear of the tab bar */
  .dock { bottom: 58px; }
  .pill { bottom: 66px; }
  .sitefoot { padding-bottom: 92px; }
}

/* Wave 0: past-event ended state */
.lended { color: var(--muted); font-style: italic; padding: 12px 0; font-size: 15px; }

/* ---------- W2 item 15: ONE theme transition token (reduced-motion guarded) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme] body,
  html[data-theme] .page,
  html[data-theme] .top,
  html[data-theme] .card,
  html[data-theme] .dock {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
}

/* ---------- W2 item 14: "happening this week" strip (content pages) ---------- */
.weekstrip { margin: 26px 0 8px; }
.weekstrip h2 { font-size: var(--fs-h3, 19px); margin: 0 0 10px; }
.weekgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3, 12px); }
@media (max-width: 860px) { .weekgrid { grid-template-columns: 1fr; } }
.weekcard { display: block; text-decoration: none; color: inherit; }

/* ---------- W2 item 13: organizer card on detail ---------- */
.orgcard {
  margin: 18px 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-2, 14px);
  background: var(--surface, transparent);
}
.orgrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.orgk { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.orgname { font-weight: 650; color: var(--text); text-decoration: none; }
.orgname:hover { text-decoration: underline; }
.orgmeta { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.orgmeta a { color: inherit; }

/* ---------- W2 item 11: draft preview slot ---------- */
.draftslot { margin: 0 0 14px; }
.draftlabel {
  color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; margin: 0 0 6px;
}
.draftholder {
  display: inline-block; min-width: 280px; max-width: 360px;
  padding: 10px; border: 2px dashed var(--line);
  border-radius: var(--r-2, 14px);
}
.draftholder .card.draftcard { border-style: dashed; border-color: var(--muted); opacity: .92; }
.draftnote { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .draftslot.draftin { animation: draftin .32s ease-out; }
  @keyframes draftin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .draftslot.draftbye { opacity: 0; transition: opacity .3s; }
  .card.spotlight { animation: spotlight 1.6s ease-out; }
  @keyframes spotlight {
    0% { box-shadow: 0 0 0 3px var(--accent, #4ade80); }
    100% { box-shadow: 0 0 0 3px transparent; }
  }
}

/* ---------- W2 item 6 / owner refinement 2026-09-23 v3: the minimal state
   is exactly TWO floating bubbles — the answer and the reply input. No
   history line, no expand button (tap the answer bubble to expand), no
   panel chrome. Both are deliberately HIGH-CONTRAST against the page:
   elevated surface, accent-tinted border, soft shadow — they must read
   instantly as the two live elements on the page. */
body.chatcompact .panel {
  background: none; border: none; box-shadow: none;
  backdrop-filter: none; padding: 0 4px;
}
body.chatcompact .dhead2 { display: none; }      /* no header chrome */
body.chatcompact .historyline { display: none; } /* no text outside bubbles */
body.chatcompact .chat { max-height: none; overflow: visible; padding: 0 0 10px; }
body.chatcompact .chat .msg.folded { display: none; }
body.chatcompact .chat .msg { margin: 0; }
body.chatcompact .chat .msg.agent .bubble {
  background: var(--bg2);
  border: 1.5px solid var(--accent-dim);
  box-shadow: 0 8px 28px var(--shadow), 0 0 0 4px var(--accent-soft);
  padding: 12px 16px; font-size: 14px; line-height: 1.5;
  border-radius: 16px 16px 16px 6px;
  cursor: pointer;
}
body.chatcompact .chips { display: none; }        /* no chip wall in minimal state */
body.chatcompact .inputbar { padding: 0 2px; gap: 10px; align-items: center; }
body.chatcompact .inputbar textarea {
  height: 44px; min-height: 44px; max-height: 44px; resize: none;
  overflow: hidden;   /* owner: no scrollbar icon on the one-line reply field */
  border-radius: 999px; padding: 12px 20px;
  background: var(--bg2); border: 1.5px solid var(--line);
  box-shadow: 0 8px 28px var(--shadow);
  font-size: 14.5px;
}
body.chatcompact .inputbar textarea:focus {
  border-color: var(--accent-dim);
  box-shadow: 0 8px 28px var(--shadow), 0 0 0 4px var(--accent-soft);
}
body.chatcompact .inputbar button {
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 17px; box-shadow: 0 8px 28px var(--shadow); flex-shrink: 0;
}
body.chatcompact .foot { display: none; }        /* two bubbles only */

/* ---------- Alive chat (owner bundle 2026-09-24): levitate + breathing ----
   The compact pair floats (gentle drift, never hard-docked), the answer
   bubble's glow breathes (~4s), thinking gets a shimmer sweep, results ping
   the board (tether), bookings bloom once. ALL guarded for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  body.chatcompact .dock { animation: levitate 7s ease-in-out infinite; }
  @keyframes levitate {
    /* owner: idle motion must be even — symmetric rise/fall, no rotation */
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
  }
  body.chatcompact .chat .msg.agent .bubble { animation: glowbreathe 4.2s ease-in-out infinite; }
  @keyframes glowbreathe {
    0%, 100% { box-shadow: 0 8px 28px var(--shadow), 0 0 0 4px var(--accent-soft); }
    50%      { box-shadow: 0 10px 32px var(--shadow), 0 0 0 7px var(--accent-soft); }
  }
  /* thinking shimmer: light sweeps across the thinking bubble */
  .msg.think .bubble {
    background: linear-gradient(100deg, transparent 35%, var(--tint3) 50%, transparent 65%) var(--bg4);
    background-size: 220% 100%;
    animation: thinkshimmer 1.6s linear infinite;
  }
  @keyframes thinkshimmer { from { background-position: 130% 0; } to { background-position: -90% 0; } }
  /* board tether: answer bubble pings toward freshly rendered cards */
  .bubble.bubbleping { animation: bubbleping .7s ease-out; }
  @keyframes bubbleping {
    0%   { box-shadow: 0 8px 28px var(--shadow), 0 0 0 4px var(--accent-soft); }
    35%  { box-shadow: 0 8px 28px var(--shadow), 0 0 0 12px var(--accent-soft); }
    100% { box-shadow: 0 8px 28px var(--shadow), 0 0 0 4px var(--accent-soft); }
  }
  .card.cardping { animation: cardping 1.1s ease-out; }
  @keyframes cardping {
    0%, 100% { box-shadow: var(--e1); }
    30%      { box-shadow: 0 0 0 3px var(--accent-soft), var(--e2); transform: translateY(-2px); }
  }
  /* success bloom: one-time soft ring on booking confirmations */
  .bubble.bloom { animation: bloom 1.3s ease-out; }
  @keyframes bloom {
    0%   { box-shadow: 0 8px 28px var(--shadow), 0 0 0 4px var(--accent-soft); }
    40%  { box-shadow: 0 8px 28px var(--shadow), 0 0 0 16px var(--accent-soft); }
    100% { box-shadow: 0 8px 28px var(--shadow), 0 0 0 4px var(--accent-soft); }
  }
}
/* Owner fix 2026-09-24: mobile optimizations — the pair stays still and
   light on phones (no levitate drift, cheaper shadows), with a tighter
   footprint that never crowds the bottom tab bar. */
@media (max-width: 860px) {
  body.chatcompact .dock { animation: none; }
  body.chatcompact .chat .msg.agent .bubble {
    box-shadow: 0 4px 14px var(--shadow), 0 0 0 3px var(--accent-soft);
    padding: 10px 13px; font-size: 13.5px;
  }
  body.chatcompact .inputbar textarea { height: 40px; min-height: 40px; max-height: 40px; padding: 10px 16px; font-size: 14px; }
  body.chatcompact .inputbar button { width: 40px; height: 40px; font-size: 15px; }
  .msg.think .bubble { background-size: 100% 100%; animation: none; }  /* no sweep on mobile GPUs */
}
/* ---------- Alive chat round 2 (owner picks 2026-09-24) --------------------
   Mobile: scroll never minimizes — the pair dims after 7s idle (chatdim),
   any touch restores. Tap outside still minimizes. Desktop: cursor tilt
   (--tiltX/--tiltY) and scroll-aware settle (chatlow). Item 6: inline
   preview chips inside the answer bubble. Item 1: --livehue recolors the
   answer glow on card hover. Item 2: ambient echo on matched cards.
   Item 7: draft heartbeat synced with the bubble glow. Item 9: pill bounce.
   Item 10: time-of-day warmth classes on html. All reduced-motion guarded. */
body.chatdim .dock { opacity: .38; transition: opacity .8s ease; }
body.chatdim .dock:hover { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .dock { transform: perspective(600px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)); transition: transform .18s ease-out; }
  body.chatlow .dock { transform: translateY(6px) scale(.985); }
  .pill.bounce { animation: pillbounce .5s cubic-bezier(.3,1.6,.4,1); }
  @keyframes pillbounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-10px); } }
  .card.draftcard.heartbeat { animation: heartglow 4.2s ease-in-out infinite; }
  @keyframes heartglow {
    0%,100% { box-shadow: 0 0 0 0 var(--accent-soft); }
    50%     { box-shadow: 0 0 0 6px var(--accent-soft); }
  }
  .prevrow { animation: previn .3s ease-out; }
  @keyframes previn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
.prevrow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.prevchip {
  font: inherit; font-size: 12px; cursor: pointer;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-dim); border-radius: 999px;
  padding: 3px 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prevchip:hover { background: var(--accent); color: var(--accent-ink); }
/* Item 1: hover-hue — --livehue set by JS recolors the answer bubble ring */
body.chatcompact .chat .msg.agent .bubble,
body:not(.chatcompact) .chat .msg.agent:last-child .bubble {
  border-color: var(--livehue, var(--accent-dim));
}
body:not(.chatcompact) .chat .msg.agent:last-child .bubble { box-shadow: 0 8px 28px var(--shadow), 0 0 0 4px color-mix(in srgb, var(--livehue, var(--accent)) 14%, transparent); }
/* Item 2: ambient echo — matched cards keep a faint glow tint */
.grid.echo .card { box-shadow: 0 0 0 2px var(--accent-soft); }
.expandbtn {
  display: block; width: 100%; text-align: center;
  background: none; border: 0;
  color: var(--muted); font-size: 12px; padding: 3px 0 2px; cursor: pointer;
}
.expandbtn:hover { color: var(--text); }
body:not(.chatcompact) .expandbtn { display: none; }
.historyline {
  color: var(--muted); font-size: 12.5px; cursor: pointer;
  padding: 4px 10px; user-select: none;
}
.historyline:hover { color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  body.chatcompact .chat { transition: max-height .24s ease; }
}

/* ---------- Breathing chat (spec 2026-09-23): the fold is a breath ----
   The panel glides into the compact pair (one transition on max-height,
   already present) while the surviving bubble settles. Reduced-motion: cut. */
@media (prefers-reduced-motion: no-preference) {
  body.chatcompact .panel { animation: breathe .3s cubic-bezier(.2,.7,.2,1); }
  @keyframes breathe {
    from { transform: translateY(6px) scale(.99); opacity: .85; }
    to   { transform: none; opacity: 1; }
  }
}

/* ---------- W3 item 16: hero entrance stagger + live-signal pulse ----------
   Title -> sub -> input -> chips -> strip, 60-90ms steps. Pulse ONLY on the
   live label when listings exist (.hero-live.has-live set by JS). Everything
   inside prefers-reduced-motion guards. */
@media (prefers-reduced-motion: no-preference) {
  .hero-title, .hero-sub, .hero-form, .hero-live {
    opacity: 0;
    animation: heroStagger .5s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .hero-title { animation-delay: 0s; }
  .hero-sub   { animation-delay: .07s; }
  .hero-form  { animation-delay: .14s; }
  .hero-live  { animation-delay: .27s; }
  @keyframes heroStagger {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  .hero-live.has-live .hero-live-label {
    animation: livePulse 2.4s ease-in-out infinite;
  }
  @keyframes livePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
  }
}

/* ---------- W3 item 18: type-ahead suggest panel ---------- */
.hero-suggest {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: -6px 0 10px;
}
.hero-suggest .sugg {
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  color: var(--text2);
  background: var(--card, rgba(127,127,127,.06));
  border: 1px solid var(--line, rgba(127,127,127,.25));
  border-radius: var(--r-s, 8px);
  padding: 7px 12px;
  cursor: pointer;
}
.hero-suggest .sugg:hover { border-color: var(--accent-dim); }

/* P0 human paid bookings (spec 2026-09-29): Pay button under the reply */
.paybar { display:flex; flex-direction:column; gap:6px; margin:10px 0 4px; }
.paybtn { background:linear-gradient(135deg,#0e7d66,#0a5c4c); color:#fff; border:none;
  border-radius:14px; padding:12px 18px; font-size:15px; font-weight:600; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease; }
.paybtn:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(14,125,102,.35); }
.paybtn:active { transform:translateY(0); }
.payhint { font-size:12px; opacity:.75; }

/* Mobile & Accessibility Optimizations */
@media (max-width: 640px) {
  .chat { max-width: 100vw; padding: 8px; }
  input[type="text"] { padding: 12px 16px; font-size: 16px; }
  .paybtn { padding: 14px 20px; font-size: 16px; border-radius: 16px; }
}
input[type="text"]:focus, button:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
a:focus { outline: 2px dashed var(--accent); }
/* Smooth scrolling for new messages */
.chat { scroll-behavior: smooth; }
/* Better button hover states */
button:hover { filter: brightness(1.1); }
button:active { filter: brightness(0.95); }


/* ===== A0-style secret reveal (compact, owner 2026-10-18) ===== */
.secretbox { margin: 6px 0 2px 0; }
.secretval {
  display: block; max-width: 340px; overflow-wrap: anywhere;
  word-break: break-all; white-space: normal; vertical-align: middle;
  font-size: 0.78em; padding: 6px 10px; border-radius: 8px;
  font-family: ui-monospace, monospace; line-height: 1.5;
  background: rgba(127,127,127,0.14); cursor: copy;
}
.secretval:active { background: rgba(127,127,127,0.28); }