/* Rare Intervals - Travel Chat trial frontend.
   Visual system from design/chat.html (lean chrome + brand tokens).
   Rich modules (working tray, cards, Fieldbook, SSE states) keep using these
   CSS variables so light/dark and brand color flow through the whole UX. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
/* Guard against any single wide child (image strips, long tokens) forcing a
   horizontal page scroll on narrow screens - internal scrollers keep their own. */
body { overflow-x: hidden; }
/* Don't let mobile Safari inflate text on rotate/zoom and break our type ramp. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Mobile overlay/classic scrollbars paint as stray dashes/tracks in the empty hero and
   composer; keep scrolling, hide the chrome (Fieldbook tabs already do this). */
.scroll,
.input-row textarea {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll::-webkit-scrollbar,
.input-row textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* The `hidden` attribute must beat component `display:` rules (modal, CTAs, follow-ups). */
[hidden] { display: none !important; }

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

/* Brand tokens (BRAND_STANDARDS + design/chat.html). Appearance = light | dark. */
[data-theme] {
  --amber: #d3952d;
  --amber-soft: #f8ecd6;
  --mint: #8cdead;
  --mint-deep: #2f7d63;
  --purple: #8f55ea;
  /* Brand type scale: Lato 36 / 18 / 14 only */
  --type-title: 36px;
  --type-lede: 18px;
  --type-body: 14px;
  --type-input: 16px;
  --radius: 16px;
  --motion-seal: 700ms;
  --target-min: 44px;
}
[data-theme="light"] {
  --bg: #e7ecef; --surface: #ffffff; --surface-2: #f3f5f7; --ink: #2d3336;
  --muted: rgba(45, 51, 54, 0.55); --line: rgba(45, 51, 54, 0.12);
  --accent: #8f55ea; --accent-soft: #efe7fd;
  --chrome-icon: rgba(45, 51, 54, 0.62);
  --chrome-hover: rgba(45, 51, 54, 0.06);
  --tip-bg: #2d3336; --tip-ink: #e7ecef;
  --send-bg: #2d3336; --send-ink: #e7ecef;
  --pop-shadow: 0 14px 44px rgba(35, 39, 43, 0.18);
  --composer-shadow: 0 10px 30px rgba(35, 39, 43, 0.08);
  /* Legacy aliases used by Fieldbook / modules */
  --topbar: var(--surface); --topbar-ink: var(--ink); --topbar-line: var(--line);
  --rail: var(--surface); --rail-ink: var(--ink); --rail-muted: var(--muted); --rail-line: var(--line);
}
[data-theme="dark"] {
  --bg: #1b2022; --surface: #23292b; --surface-2: #2b3133; --ink: #f4f6f7;
  --muted: rgba(244, 246, 247, 0.55); --line: rgba(244, 246, 247, 0.12);
  --accent: #a578f0; --accent-soft: #33304a;
  --chrome-icon: rgba(244, 246, 247, 0.62);
  --chrome-hover: rgba(244, 246, 247, 0.08);
  --tip-bg: #f4f6f7; --tip-ink: #1b2022;
  --send-bg: #f4f6f7; --send-ink: #1b2022;
  --pop-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
  --composer-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --topbar: var(--surface); --topbar-ink: var(--ink); --topbar-line: var(--line);
  --rail: var(--surface); --rail-ink: var(--ink); --rail-muted: var(--muted); --rail-line: var(--line);
}

body {
  font-family: 'Lato', sans-serif;
  font-size: var(--type-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--ink);
}

/* 100dvh tracks the *visible* viewport so the composer is never hidden behind the
   mobile browser's address bar / toolbar (100vh over-counts it). 100vh stays as the
   fallback for engines without dvh support. */
.app {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden; /* page scroll lives in .scroll; avoids a second mobile scrollbar */
}

/* ───────────── Lean chrome (wordmark + icon rail) ───────────── */
.chrome {
  position: relative; flex: none; z-index: 40;
  height: 64px;
  padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; color: var(--ink);
}
.wordmark { display: flex; align-items: center; text-decoration: none; color: inherit; flex: none; }
.brand-mark { display: block; height: 20px; width: auto; }
.session-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: min(40vw, 280px); font-size: var(--type-body); font-weight: 400;
  opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none;
}
.icon-rail { display: flex; align-items: center; gap: 2px; }
.icon-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; border: none; background: transparent;
  color: var(--chrome-icon); cursor: pointer; flex: none;
}
.icon-btn:hover, .icon-btn.active { background: var(--chrome-hover); color: var(--ink); }
.icon-btn .tip {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
  background: var(--tip-bg); color: var(--tip-ink); font-size: 13px; white-space: nowrap;
  padding: 6px 11px; border-radius: 8px; box-shadow: 0 8px 24px rgba(35, 39, 43, 0.25);
  opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 45;
}
.icon-btn:hover .tip { opacity: 1; }
.icon-btn.active .tip { opacity: 0; }
.rail-divider { width: 1px; height: 20px; background: var(--line); margin: 0 6px; flex: none; }

/* Popovers (history + more) */
.popover {
  position: absolute; top: 62px; right: max(20px, env(safe-area-inset-right));
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--pop-shadow); padding: 8px; z-index: 50; max-height: min(70vh, 480px);
  overflow-y: auto;
}
#history-pop { width: 300px; right: max(20px, env(safe-area-inset-right)); }
#menu-pop { width: 230px; }
.pop-item {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  font-family: inherit; padding: 11px 12px; border-radius: 9px; font-size: var(--type-body);
  color: var(--ink); cursor: pointer;
}
.pop-item:hover { background: var(--chrome-hover); }
.pop-item.is-selected { font-weight: 700; color: var(--accent); }
.pop-row { display: flex; align-items: center; justify-content: space-between; cursor: default; }
.pop-row:hover { background: transparent; }
.pop-sep { height: 1px; background: var(--line); margin: 6px 4px; }

.credit-pill { position: relative; font-weight: 400; }
.credit-pill.tick { animation: pillpop 0.5s ease; }
.credit-value { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.credit-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  display: inline-block;
}
.credit-pill.low .credit-dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(211, 149, 45, 0.3); }
.credit-delta {
  position: absolute; top: -8px; right: 12px; color: var(--mint-deep); font-weight: 700;
  font-size: 12px; animation: tickfloat 1.4s ease forwards;
}

.rail-list { display: flex; flex-direction: column; gap: 2px; }
.rail-item {
  text-align: left; border: none; cursor: pointer; font-family: inherit; border-radius: 9px;
  padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; background: transparent;
  color: var(--ink); width: 100%;
}
.rail-item:hover { background: var(--chrome-hover); }
.rail-item.active { background: var(--accent-soft); }
.rail-item.active .rail-item-title { color: var(--accent); }
.rail-item-title {
  font-size: var(--type-body); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-item-sub { font-size: 13px; color: var(--muted); }
.rail-empty { font-size: var(--type-body); color: var(--muted); padding: 8px 12px; }

/* ───────────── Body / main ───────────── */
.body { flex: 1; display: flex; min-height: 0; position: relative; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); position: relative; }
.scroll { flex: 1; overflow-y: auto; padding: 28px 0; }
.stream { max-width: 760px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 18px; }

/* Empty / first run - hero + composer as one optically centered block */
.empty { text-align: center; padding: 0 20px 8px; animation: rise 0.5s ease; width: min(640px, 100%); margin: 0 auto; }
.empty-quiz {
  margin: 14px 0 0; font-size: var(--type-body); line-height: 1.55; color: var(--muted);
}
a.quiz-cta-glow {
  display: inline; font-weight: 700; color: var(--amber);
  text-decoration: none;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--amber) 45%, transparent),
    0 0 22px color-mix(in srgb, var(--amber) 22%, transparent);
  transition: color 0.15s ease, text-shadow 0.15s ease;
}
a.quiz-cta-glow:hover {
  color: var(--ink);
  text-shadow:
    0 0 12px color-mix(in srgb, var(--amber) 55%, transparent),
    0 0 28px color-mix(in srgb, var(--amber) 28%, transparent);
}
.empty-avatar {
  width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
  border: 3px solid var(--surface);
  box-shadow: 0 6px 18px rgba(35, 39, 43, 0.12);
  /* Face-focused crop of landscape Oliver (sky behind head, features readable) */
  background-image: url('/assets/Oliver-face.jpeg');
  background-size: cover;
  background-position: 50% 42%;
  background-repeat: no-repeat;
  background-color: #b8d4e8;
}
.empty h1 {
  font-family: 'Lato', sans-serif; font-size: var(--type-title); font-weight: 700;
  letter-spacing: 0; margin: 0 0 10px; color: var(--ink);
}
.empty p {
  font-size: var(--type-body); color: var(--muted); max-width: 420px; margin: 0 auto;
  line-height: 1.45; font-weight: 400;
}

/*
  Empty layout: hero + composer packed together, held between flex spacers.
  Bottom spacer is larger so the pack sits above geometric center (counteracts
  chrome + bottom disclaimer that otherwise push the stack into the lower half).
*/
.app.is-empty .main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.app.is-empty .main::before,
.app.is-empty .main::after {
  content: "";
  min-height: 0;
  /* Flex spacers only - never paint (some mobile WebKits draw stray 1px seams on empty flex items). */
  border: 0;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}
.app.is-empty .main::before { flex: 1 1 0; }
.app.is-empty .main::after { flex: 1.75 1 0; }
.app.is-empty .scroll {
  flex: 0 0 auto;
  overflow: visible;
  padding: 0;
}
.app.is-empty .stream { width: 100%; max-width: 640px; margin: 0 auto; }
.app.is-empty .composer {
  flex: 0 0 auto;
  border-top: none;
  background: transparent;
  padding-bottom: 0;
}
.app.is-empty .composer-inner {
  max-width: 640px;
  padding: 18px 24px 0;
}
/* Desktop empty: pin the disclaimer to the viewport floor so the hero+composer pack
   can sit above geometric center. Mobile overrides this — absolute pinning overlaps
   the composer / OOC cards on short viewports. */
.app.is-empty .composer-note {
  position: absolute;
  left: 0; right: 0;
  bottom: max(14px, env(safe-area-inset-bottom));
  margin: 0;
  opacity: 0.7;
}
.app:not(.is-empty) .session-title:not([hidden]) { display: block; }

/* Message rows */
.msg-user { display: flex; justify-content: flex-end; animation: popin 0.35s ease; }
.bubble-user {
  max-width: 78%; background: var(--accent); color: #fff; padding: 12px 16px;
  border-radius: 18px 18px 5px 18px; font-size: 14.5px; line-height: 1.6;
  box-shadow: 0 4px 14px rgba(143, 85, 234, 0.28); white-space: pre-wrap;
  overflow-wrap: break-word; word-break: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.msg-assistant { display: flex; gap: 11px; align-items: flex-start; animation: rise 0.5s ease; }
.assistant-avatar {
  /* Same face crop as .empty-avatar — not Oliver.png (white studio ground). */
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background-image: url('/assets/Oliver-face.jpeg');
  background-size: cover;
  background-position: 50% 42%;
  background-repeat: no-repeat;
  background-color: #b8d4e8;
  border: 1.5px solid var(--surface);
  box-shadow: 0 1px 4px rgba(35, 39, 43, 0.1);
  margin-top: 2px;
}
.assistant-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 15px; }

/* Working tray */
.tray-collapsed {
  /* Full-width bar so Show/Expand sits where Hide was (right), not clustered left. */
  cursor: pointer; font-family: inherit;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius);
  padding: 10px 15px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; box-sizing: border-box; text-align: left;
  min-height: 40px;
}
.tray-collapsed.is-running {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}
.tray-collapsed-status {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; font-weight: 600; color: var(--muted);
}
.tray-collapsed.is-running .tray-collapsed-status .dots i {
  /* Soft pulse — the only “still working” cue (no “Working” copy). */
  width: 5px; height: 5px; opacity: 0.75;
}
.tray-collapsed-action {
  /* Mirror .tray-hide: quiet control anchored on the right. */
  flex: none; margin-left: auto;
  color: var(--muted); font-size: 11.5px; font-weight: 500;
  white-space: nowrap; line-height: 1;
  padding: 6px 2px 6px 10px;
}
.tray-collapsed:hover .tray-collapsed-action { color: var(--ink); }
.tray-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 17px; box-shadow: 0 4px 18px rgba(34, 40, 42, 0.05);
}
.tray-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.tray-title {
  font-family: 'Lato', sans-serif; font-weight: 700; font-size: 13.5px;
  display: flex; align-items: center; gap: 8px;
}
.tray-title .accent { color: var(--accent); }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: dots 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
.tray-head-actions { display: flex; align-items: center; gap: 6px; }
.tray-hide { border: none; background: transparent; color: var(--muted); font-size: 11.5px; cursor: pointer; font-family: inherit; }
/* Compact abort control (✕) - same affordance as modal close; title/aria carry "Stop". */
.tray-stop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 15px; font-weight: 600; line-height: 1;
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  flex: none;
}
.tray-stop:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-2); }
.tray-stop[hidden] { display: none; }
.tray-card.is-reviewing-itineraries { box-shadow: inset 3px 0 0 var(--accent); }
.place-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.place-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line);
}
.place-chip.thin { background: var(--amber-soft); color: var(--amber); border-color: #ecd6a8; }
.steps { display: flex; flex-direction: column; gap: 2px; }
.step { display: flex; align-items: flex-start; gap: 12px; padding: 5px 0; }
.step.pending { opacity: 0.5; }
.step-icon {
  position: relative; width: 26px; height: 26px; flex: none; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--surface-2); font-size: 13px;
}
.step.running .step-icon::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent);
  animation: pulsering 1.3s ease-out infinite;
}
.step-main { flex: 1; min-width: 0; padding-top: 3px; }
.step-label { font-size: 13.5px; font-weight: 400; color: var(--ink); }
.step.running .step-label { font-weight: 700; }
.step-state { flex: none; padding-top: 4px; }
.spinner {
  display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-soft);
  border-top-color: var(--accent); animation: spin 0.7s linear infinite;
}
.check { color: var(--mint-deep); font-weight: 700; font-size: 14px; }

/* "Did you know?" tip shown in the working tray while the answer composes (punchlist §2.3). */
.tray-tip {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 9px 11px;
  border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
  animation: tipfade 0.4s ease both;
}
.tray-tip[hidden] { display: none; }
.tray-tip-ic { flex: none; font-size: 14px; line-height: 1.4; }
.tray-tip-tx { color: var(--ink); }
@keyframes tipfade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Answer bubble + markdown
   Typography standards applied (WCAG 2.1 / Material / HIG):
   – font-size 14.5px (within the 14–16px readable body range)
   – line-height 1.65 (optimal for prose: 1.5–1.7; slightly above 1.6 for chat density)
   – overflow-wrap: break-word — breaks only when a token genuinely won't fit;
     NEVER use `anywhere` for prose: it computes layout as if every character is a
     break opportunity, distorting word spacing and causing mid-word visual breaks.
   – word-break: normal — words never break mid-character unless overflow-wrap triggers
   – letter-spacing: 0 (default) — correct for 14–16px body; negative values for
     display headings only
   – word-spacing: normal — do not adjust; the browser's default is correct
   – -webkit-font-smoothing: antialiased — sub-pixel AA for sharper text on macOS
*/
.answer-bubble {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) var(--radius) 6px; padding: 16px 18px;
  font-size: 14.5px; line-height: 1.65;
  overflow-wrap: break-word; word-break: normal; word-spacing: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 2px 10px rgba(34, 40, 42, 0.04);
}
.answer-bubble.streaming::after {
  content: '▋'; color: var(--accent); animation: dots 1s infinite; margin-left: 1px;
}
/* Paragraphs: 0.85em gap (≈12px) between paras — enough vertical rhythm without
   wasting vertical space in a chat that may have many short paras. */
.answer-bubble p { margin: 0 0 0.85em; }
.answer-bubble p:last-child { margin-bottom: 0; }
.answer-bubble h1, .answer-bubble h2, .answer-bubble h3 {
  font-family: 'Lato', sans-serif; margin: 1em 0 0.45em; line-height: 1.25;
  letter-spacing: -0.01em;
}
.answer-bubble h1 { font-size: 19px; } .answer-bubble h2 { font-size: 17px; } .answer-bubble h3 { font-size: 15px; }
/* Lists: 0.5em above/below the list block; 0.3em between items — enough vertical
   breathing room while keeping a list compact (4–6px at 14.5px base = ~5px per item). */
.answer-bubble ul, .answer-bubble ol { margin: 0.5em 0 0.85em; padding-left: 22px; }
.answer-bubble li { margin: 0.3em 0; line-height: 1.6; }
.answer-bubble a { color: var(--accent); font-weight: 700; }
.answer-bubble code {
  background: var(--surface-2); border-radius: 5px; padding: 1px 5px; font-size: 13px;
  font-family: ui-monospace, monospace;
  /* code snippets can be long; allow break-word here but not break-all */
  overflow-wrap: break-word; word-break: break-word;
}
.answer-bubble strong { font-weight: 700; }

/* Destination card (images shown fast, before the answer) */
.dest-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) var(--radius) 6px; padding: 12px 14px; overflow: hidden;
}
.dest-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px;
}
.dest-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.dest-best { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.dest-images {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.dest-img {
  flex: 0 0 auto; width: 168px; margin: 0; scroll-snap-align: start;
  border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line);
}
.dest-img img { display: block; width: 100%; height: 116px; object-fit: cover; }
.dest-img figcaption {
  display: block; font-size: 11.5px; color: var(--muted); padding: 6px 8px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ───────────── Rich modules (climate / map / activities) ───────────── */
.mod-hedge { font-size: 10.5px; color: var(--amber); font-weight: 700; white-space: nowrap; }

/* Collapsible module chip (climate / map / activities — collapsed by default) */
.mod-chip {
  border: 1px solid var(--line); border-radius: 13px; background: var(--surface); overflow: hidden;
  box-shadow: 0 2px 10px rgba(34, 40, 42, 0.04);
}
.mod-chip[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.mod-sum {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px; cursor: pointer;
  font-family: 'Lato', sans-serif; font-weight: 700; font-size: 13.5px;
  color: var(--ink); list-style: none; user-select: none;
}
.mod-sum::-webkit-details-marker { display: none; }
.mod-ic { font-size: 15px; }
.mod-name { flex: 1; }
.mod-count {
  font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2);
  border-radius: 999px; padding: 2px 8px; min-width: 22px; text-align: center;
}
.mod-caret { color: var(--muted); font-size: 12px; transition: transform 0.2s ease; }
.mod-chip[open] .mod-caret { transform: rotate(180deg); }
.mod-body { padding: 0 14px 14px; }
.mod-stack { display: flex; flex-direction: column; }
.mod-subhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }

/* Climate: year-round temperature profile + precipitation */
.climate-best { font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.climate-best b { color: var(--mint-deep); font-weight: 700; }
.climate-note { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.climate-chart { margin-top: 4px; }
.climate-svg { display: block; width: 100%; height: auto; }
.climate-svg .cl-axis { font-size: 9px; fill: var(--muted); font-family: 'Lato', sans-serif; }
.climate-svg .cl-zero { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.climate-svg .cl-band { transition: y 0.3s ease, height 0.3s ease; }
.climate-svg .cl-band.best { stroke: var(--accent); stroke-width: 2; }
.climate-svg .cl-avg { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; }
.climate-svg .cl-bstar { font-size: 11px; fill: var(--mint-deep); }
.climate-svg .cl-mlabel { font-size: 9px; fill: var(--muted); font-weight: 700; font-family: 'Lato', sans-serif; }
.unit-toggle { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: 8px; padding: 2px; }
.unit-btn {
  cursor: pointer; font-family: inherit; border: none; background: transparent; color: var(--muted);
  font-weight: 700; font-size: 11px; padding: 3px 8px; border-radius: 6px;
}
.unit-btn.on { background: var(--accent); color: #fff; }
.climate-strip {
  display: flex; align-items: flex-end; gap: 4px; height: 124px; margin-top: 6px;
}
.cl-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%;
  justify-content: flex-end; min-width: 0;
}
.cl-star { color: var(--mint-deep); font-size: 10px; line-height: 1; height: 11px; }
.cl-bar { width: 100%; max-width: 26px; border-radius: 5px 5px 2px 2px; min-height: 6px; transition: height 0.3s ease; }
.cl-col.best .cl-bar { outline: 2px solid var(--accent); outline-offset: 1px; }
.cl-m { font-size: 9.5px; color: var(--muted); font-weight: 400; }
.cl-col.best .cl-m { color: var(--accent); font-weight: 700; }
.cl-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 11px; color: var(--muted);
}
.cl-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cl-legend .sw { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.cl-legend .cl-star-mini { color: var(--mint-deep); }

/* Map */
.map-wrap {
  position: relative; z-index: 0; isolation: isolate;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(120% 120% at 50% 30%, var(--surface-2), color-mix(in srgb, var(--accent) 7%, var(--surface-2)));
}
/* Leaflet (real OSM tiles) */
.leaf-map { height: 280px; width: 100%; }
.map-fallback { display: flex; align-items: center; justify-content: center; height: 280px; color: var(--muted); font-size: 13px; }
/* Leaflet's own CSS assumes content-box; the global `* { box-sizing: border-box }` breaks tile
   alignment, so restore content-box inside the map only. */
.leaflet-container, .leaflet-container * { box-sizing: content-box; }
/* z-index: 0 creates a stacking context so Leaflet pane/control z-indexes (~200–1000) stay
   trapped inside the map and cannot paint above the Fieldbook overlay. */
.leaflet-container { font: inherit; background: var(--surface-2); z-index: 0; }
.leaf-num {
  background: var(--accent); color: #fff; border: 2px solid #fff; border-radius: 50%;
  font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 11px; }
.map-leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); max-width: 100%; }
.map-leg-num {
  width: 17px; height: 17px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none;
}

/* Activities row */
.act-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.act-card {
  flex: 0 0 auto; width: 188px; border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
  background: var(--surface-2); display: flex; flex-direction: column;
}
.act-img { height: 104px; background: var(--surface); }
.act-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.act-body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 6px; }
.act-name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.act-cat {
  align-self: flex-start; font-size: 10.5px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border-radius: 999px; padding: 3px 9px;
}
.act-meta { font-size: 11px; font-weight: 700; color: var(--muted); }
.act-desc { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.act-link {
  align-self: flex-start; margin-top: auto; font-size: 12.5px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 9px; padding: 7px 11px; text-decoration: none;
}
.act-link.book { color: #fff; background: var(--accent); border-color: var(--accent); }
.act-link:hover { filter: brightness(1.05); }

/* Candidate-pool reel in the working tray (scanning SSE — BL-47) */
.step.is-scanning .step-label {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.step.is-scanning.is-spotlight .step-label {
  align-items: center; flex-direction: column; gap: 8px; width: 100%;
}
.scan-prefix {
  font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.scan-reel {
  font-family: 'Lato', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--accent); min-width: 8ch;
}
.scan-reel.tick { animation: scan-tick 0.12s ease-out; }
@keyframes scan-tick {
  from { opacity: 0.35; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.scan-spotlight-media {
  width: min(100%, 220px); aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
  background: linear-gradient(145deg, var(--surface-2), color-mix(in srgb, var(--accent) 14%, var(--surface-2)));
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.scan-spotlight-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  animation: scan-spotlight-in 0.35s ease-out;
}
.scan-spotlight-copy {
  font-size: 13px; line-height: 1.4; color: var(--ink); font-weight: 700;
  text-align: center; max-width: 28ch;
  animation: scan-spotlight-in 0.35s ease-out;
}
@keyframes scan-spotlight-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Itinerary handshake pillows (thicker than section chips — BL-47) */
.itin-wrap { display: flex; flex-direction: column; gap: 10px; }
.itin-kicker {
  font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 2px;
}
.itin-attribution {
  font-size: 12.5px; line-height: 1.4; color: var(--muted); padding: 0 2px 2px;
}
.itin-pillow {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 16px; background:
    linear-gradient(165deg, color-mix(in srgb, var(--accent) 7%, var(--surface)) 0%, var(--surface) 55%);
  overflow: hidden; box-shadow: 0 4px 18px rgba(34, 40, 42, 0.06);
}
.itin-pillow[open] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 6px 22px rgba(34, 40, 42, 0.08);
}
.itin-sum {
  display: flex; align-items: center; gap: 12px; padding: 16px 16px 15px; cursor: pointer;
  list-style: none; user-select: none;
}
.itin-sum::-webkit-details-marker { display: none; }
.itin-idx {
  font-family: 'Lato', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--accent); background: var(--accent-soft);
  border-radius: 8px; padding: 5px 8px; flex: none;
}
.itin-title {
  flex: 1; font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 700;
  color: var(--ink); line-height: 1.25;
}
.itin-nights {
  font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--surface-2);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.itin-caret { color: var(--muted); font-size: 12px; transition: transform 0.2s ease; }
.itin-pillow[open] .itin-caret { transform: rotate(180deg); }
.itin-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.itin-tagline { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.itin-why { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.itin-stops {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 6px;
}
.itin-stop {
  position: relative;
  display: inline-flex; flex-direction: column; gap: 6px; min-width: 112px; max-width: 160px;
  border: 1px solid var(--line); border-radius: 12px; padding: 0 0 8px;
  background: var(--surface-2); overflow: hidden;
}
.itin-stop.is-hub {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--amber, #b45309) 45%, var(--line));
}
.itin-stop.is-text-only {
  padding: 10px 12px 9px;
  /* Center the text block — bottom-pinned labels next to photo tiles read as misaligned. */
  justify-content: center;
  min-height: 0;
  background: color-mix(in srgb, var(--surface) 70%, var(--surface-2));
}
.itin-stop.is-text-only .itin-stop-place,
.itin-stop.is-text-only .itin-stop-meta { padding: 0; }
.itin-stop-media {
  position: relative;
  margin: 0; width: 100%; aspect-ratio: 4 / 3; background:
    linear-gradient(145deg, var(--surface-2), color-mix(in srgb, var(--accent) 12%, var(--surface-2)));
  overflow: hidden;
}
.itin-stop-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.itin-stop-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; border-radius: 999px; padding: 3px 8px 3px 6px;
  width: fit-content; line-height: 1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}
.itin-stop-media .itin-stop-badge {
  position: absolute; top: 7px; left: 7px; z-index: 1;
}
.itin-stop.is-text-only .itin-stop-badge { margin-bottom: 2px; }
.itin-stop-badge.is-start {
  background: color-mix(in srgb, var(--accent) 88%, #0f172a);
}
.itin-stop-badge.is-depart {
  background: color-mix(in srgb, var(--ink) 82%, var(--accent));
}
.itin-stop-badge svg { display: block; flex: none; }
.itin-stop-place {
  font-size: 13px; font-weight: 700; color: var(--ink); padding: 0 11px; line-height: 1.25;
}
.itin-stop-meta {
  font-size: 11px; font-weight: 700; color: var(--muted); text-transform: lowercase;
  padding: 0 11px;
}
.itin-arrow { color: var(--muted); font-size: 13px; padding: 0 2px; align-self: center; }
.itin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.itin-cta {
  cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: #fff; background: var(--accent); border: 1px solid var(--accent);
  border-radius: 10px; padding: 9px 14px;
}
.itin-cta:hover { filter: brightness(1.05); }

/* Section chips (expandable detail) */
.sec-wrap { display: flex; flex-direction: column; }
.sec-chips { display: flex; flex-direction: column; gap: 8px; }
.sec-chip {
  border: 1px solid var(--line); border-radius: 13px; background: var(--surface); overflow: hidden;
}
.sec-chip[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.sec-sum {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: var(--ink); list-style: none; user-select: none;
}
.sec-sum::-webkit-details-marker { display: none; }
.sec-ic { font-size: 15px; }
.sec-name { flex: 1; }
.sec-count {
  font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2);
  border-radius: 999px; padding: 2px 8px; min-width: 22px; text-align: center;
}
.sec-caret { color: var(--muted); font-size: 12px; transition: transform 0.2s ease; }
.sec-chip[open] .sec-caret { transform: rotate(180deg); }
.sec-items { margin: 0; padding: 0 16px 13px 40px; }
.sec-items li { margin: 4px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.sec-items li::marker { color: var(--accent); }
.sec-items a { color: var(--accent); font-weight: 700; }

/* Grounding footnote */
.grounding {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.ground-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted);
  margin-bottom: 9px; text-transform: uppercase;
}
.ground-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ground-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 6px 11px; border-radius: 999px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line);
}
.ground-chip.tip { background: var(--accent-soft); color: var(--accent); border-color: rgba(143, 85, 234, 0.3); }

/* Clarify (pick-one) */
.clarify-prompt {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) var(--radius) 6px; padding: 14px 16px;
  font-size: 14.5px; line-height: 1.55; box-shadow: 0 2px 10px rgba(34, 40, 42, 0.04);
}
.clarify-options { display: flex; flex-wrap: wrap; gap: 8px; }
.clarify-option {
  cursor: pointer; font-family: inherit; border: 1px solid var(--line); background: var(--surface);
  border-radius: 12px; padding: 9px 13px; font-size: 13px; font-weight: 700; color: var(--ink);
  text-align: left;
}
.clarify-option:hover { border-color: var(--accent); }
.clarify-option:disabled,
.clarify-option:disabled:hover {
  opacity: 0.5; cursor: default; border-color: var(--line);
}
.clarify-option .opt-sub { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.clarify-option.none { border-style: dashed; color: var(--muted); font-weight: 400; }
.clarify-option.none:hover { border-color: var(--accent); color: var(--ink); }
.handshake-confirm-options .clarify-option { min-width: 10rem; }
a.followup {
  display: inline-flex; align-items: center; text-decoration: none;
}

/* BL-66 thumbs feedback */
.msg-feedback {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 8px;
}
.msg-feedback-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 8px; padding: 4px 8px; cursor: pointer; font-size: 14px;
  line-height: 1; font-family: inherit;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.msg-feedback-btn:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.msg-feedback-btn:disabled { cursor: default; }
.msg-feedback-btn.is-active {
  border-color: var(--accent); background: var(--accent-soft);
}
.msg-feedback-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--muted); margin-left: 2px;
}
.msg-feedback-status::before { content: "✓"; color: var(--mint-deep); font-weight: 700; }
.msg-feedback-note-wrap {
  flex: 1 1 100%; display: flex; gap: 8px; align-items: flex-start; margin-top: 4px;
}
.msg-feedback-note {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface-2); resize: vertical;
}
.msg-feedback-note:focus { outline: none; border-color: var(--accent); }
.msg-feedback-send {
  border: none; background: var(--accent); color: #fff; font: inherit;
  font-weight: 700; font-size: 12.5px; padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
.msg-feedback-send:disabled { opacity: .6; cursor: default; }
.feedback-toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%);
  z-index: 60; background: var(--tip-bg); color: var(--tip-ink);
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 11px 16px; border-radius: 14px; box-shadow: var(--pop-shadow);
  opacity: 1; transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.3,1);
  pointer-events: none; max-width: min(90vw, 28rem);
}
.feedback-toast-mark {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: rgba(143, 85, 234, .18); color: var(--purple);
  font-size: 12px; line-height: 1;
}
.feedback-toast.has-credit .feedback-toast-mark { background: var(--amber-soft); color: var(--amber); }
.feedback-toast-title { font-size: 13px; font-weight: 600; }
.feedback-toast-sub { font-size: 12px; opacity: .75; margin-top: 1px; }
.feedback-toast.is-enter { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.98); }
.feedback-toast.is-out { opacity: 0; transform: translateX(-50%) translateY(6px); }
@media (prefers-reduced-motion: reduce) {
  .feedback-toast, .msg-feedback-btn { transition: none; }
  .feedback-toast.is-enter { opacity: 1; transform: translateX(-50%); }
}

/* Clarify "none of these" -> inline free-text (not resolved; sent as location context) */
.clarify-none-form { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.clarify-none-input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 13px; outline: none;
}
.clarify-none-input:focus { border-color: var(--accent); }
.clarify-none-input:disabled { color: var(--muted); background: var(--surface-2); }
.clarify-none-send {
  cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: #fff;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 12px; padding: 10px 16px;
}
.clarify-none-send:disabled { cursor: default; opacity: 0.5; }
.clarify-none-form.sent { opacity: 0.7; }

/* Edge cards */
.edge-thin {
  flex: 1; background: var(--surface); border: 1px dashed #cfd6db; border-radius: var(--radius);
  padding: 15px 17px;
}
.edge-thin p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.edge-care {
  flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 17px 19px;
}
.edge-care p { margin: 0 0 13px; font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.edge-ooc {
  flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 19px; box-shadow: 0 3px 16px rgba(34, 40, 42, 0.06);
}
.ooc-title {
  font-family: 'Lato', sans-serif; font-size: 18px; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 4px;
}
.ooc-sub { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.ooc-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.ooc-card { flex: 1; min-width: 200px; border-radius: 15px; padding: 15px; }
.ooc-card.tip { border: 1px solid rgba(140, 222, 173, 0.5); background: rgba(140, 222, 173, 0.1); }
.ooc-card.sub { border: 1px solid rgba(143, 85, 234, 0.4); background: var(--accent-soft); }
.ooc-card .ooc-emoji { font-size: 22px; margin-bottom: 7px; }
.ooc-card .ooc-name { font-weight: 700; font-size: 15px; margin-bottom: 5px; }
.ooc-card p { margin: 0 0 13px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ooc-card b { color: var(--ink); }
.ooc-card .premium-badge,
.ooc-card .marlo-badge {
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 8px;
  background: radial-gradient(circle at 32% 28%, #c6a6f7, var(--purple)); display: flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px;
  font-family: 'Lato', sans-serif;
}
.btn-block { cursor: pointer; font-family: inherit; width: 100%; border: none; color: #fff; font-weight: 700; font-size: 13.5px; padding: 10px; border-radius: 11px; }
.btn-block.mint { background: var(--mint-deep); }
.btn-block.accent { background: var(--accent); }
.ooc-faucet {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.ooc-faucet-label {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}

/* Composer */
.composer { flex: none; border-top: 1px solid var(--line); background: var(--surface); }
/* Bottom padding folds in the home-indicator inset so the send row clears it on notched phones. */
.composer-inner { max-width: 760px; margin: 0 auto; padding: 14px 24px calc(18px + env(safe-area-inset-bottom)); }
.cta-low {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--amber-soft); border: 1px solid #ecd6a8; border-radius: 13px; padding: 9px 13px;
  margin-bottom: 11px; font-size: 13px; color: #5a4520;
}
.btn-amber {
  cursor: pointer; font-family: inherit; border: none; background: var(--amber); color: #fff;
  font-weight: 700; font-size: 12.5px; padding: 7px 13px; border-radius: 9px; white-space: nowrap;
}
.followups { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 11px; align-items: center; }
.followups .followups-label { font-size: 12px; color: var(--muted); font-weight: 700; }
.followup {
  cursor: pointer; font-family: inherit; border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 400; color: var(--ink);
}
.followup:hover { border-color: var(--accent); }
.composer-context { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.composer-context-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 6px 4px 12px; font-size: 13px; color: var(--ink); max-width: 100%;
}
.composer-context-at {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600;
}
.composer-context-clear {
  cursor: pointer; font-family: inherit; border: none; background: transparent;
  color: var(--muted); font-size: 16px; line-height: 1; width: 22px; height: 22px;
  border-radius: 50%; padding: 0;
}
.composer-context-clear:hover { color: var(--ink); background: var(--surface); }
/* Header-rail itinerary builder armed: accent pill so it reads as a mode, not a book. */
.composer-context-pill.is-itinerary {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.composer-context-pill.is-itinerary .composer-context-at { color: var(--accent); }
.fb-chat-about {
  cursor: pointer; font-family: inherit; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600;
}
.fb-chat-about:hover { border-color: var(--accent); }
.input-row {
  display: flex; gap: 10px; align-items: flex-end; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; padding: 10px 10px 10px 20px;
  box-shadow: var(--composer-shadow); transition: box-shadow 0.2s;
}
/* Neutral focus - no purple ring (matches lean design mock) */
.input-row:focus-within {
  border-color: rgba(45, 51, 54, 0.22);
  box-shadow: var(--composer-shadow);
}
[data-theme="dark"] .input-row:focus-within {
  border-color: rgba(244, 246, 247, 0.22);
}
.input-row textarea {
  flex: 1; border: none; background: transparent; outline: none; font-family: inherit;
  font-size: 15px; color: var(--ink); resize: none; line-height: 1.5;
  /* Kill native mobile UA chrome (iOS/Android paint an inner separator beside the control). */
  -webkit-appearance: none; appearance: none;
  /* Wrap long input instead of scrolling horizontally; grow vertically up to a cap. */
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  max-height: 180px; overflow-x: hidden; overflow-y: hidden; padding: 11px 0; margin: 0;
}
.input-row textarea::placeholder { color: var(--muted); }
.btn-send {
  cursor: pointer; font-family: inherit; border: none;
  background: var(--send-bg); color: var(--send-ink);
  width: 44px; height: 44px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; flex: none;
  opacity: 0.35; transition: opacity 0.15s;
}
.btn-send.ready:not(:disabled) { opacity: 1; }
.btn-send:disabled { opacity: 0.35; cursor: default; }
.composer-note {
  text-align: center; font-size: 13px; color: var(--muted);
  margin-top: 9px; opacity: 0.8; font-weight: 400; line-height: 1.4;
}

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20, 24, 26, 0.45); display: flex;
  align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal {
  background: var(--surface); color: var(--ink); border-radius: 18px; padding: 22px;
  width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: popin 0.25s ease;
  /* Keep a tall modal (e.g. the print dialog) inside the viewport on short/landscape screens. */
  max-height: calc(100dvh - 32px); overflow-y: auto;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.modal-title { font-family: 'Lato', sans-serif; font-size: 17px; font-weight: 700; }
.modal-close { border: none; background: transparent; font-size: 16px; cursor: pointer; color: var(--muted); }
.modal-sub { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.contribute-jobs {
  display: flex; gap: 4px; margin: 0 0 14px; padding: 4px;
  background: var(--surface-2); border-radius: 12px;
}
.contribute-job {
  flex: 1; min-height: var(--target-min); display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; border: none; background: transparent;
  color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 700;
  border-radius: 10px; cursor: pointer;
}
.contribute-job.is-active {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(45, 51, 54, 0.08);
}
.contribute-job svg { flex: none; }
.contribute-chips {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
  margin: 0 0 10px; padding: 0;
}
.contribute-chips li {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 28px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  font-size: 12px; font-weight: 600;
}
.contribute-chips svg { color: var(--accent); flex: none; }
.contribute-example { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.contribute-example summary {
  cursor: pointer; font-weight: 700; color: var(--accent);
  min-height: var(--target-min); display: inline-flex; align-items: center;
}
.contribute-hint-examples {
  font-size: 12px; color: var(--muted); line-height: 1.45; margin: 8px 0 0;
}
.field-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin: 10px 0 5px; text-transform: uppercase; letter-spacing: 0.03em; }
.field {
  width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: 11px;
  /* --type-input (16px) on EVERY modal field: <16px inputs trigger the iOS focus-zoom jump,
     and the two contribute jobs must not differ in input size within one modal. */
  padding: 10px 12px; font-family: inherit; font-size: var(--type-input); color: var(--ink); outline: none;
}
.field:focus { border-color: var(--accent); }
textarea.field { resize: vertical; }
.place-resolve-row { display: flex; gap: 8px; align-items: stretch; }
.place-resolve-row .field { flex: 1; }
.place-resolve-row .btn-primary { flex: none; padding: 10px 16px; }
.place-resolve-results {
  margin-top: 10px; display: flex; flex-direction: column; gap: 6px;
}
.place-pick {
  cursor: pointer; text-align: left; font-family: inherit; font-size: 13.5px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  border-radius: 11px; padding: 10px 12px; line-height: 1.35;
}
.place-pick:hover { border-color: var(--accent); }

/* BL-59: past-favorites pane (quiz-completers; shown only after job switch). */
.past-favorites {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.past-favorites-invite {
  margin: 0 0 4px;
  font-size: var(--type-body);
  color: var(--ink);
  line-height: 1.45;
}
.past-favorites-field { display: flex; flex-direction: column; gap: 4px; }
.past-favorites-input {
  min-height: var(--target-min);
}
.past-favorites-counter {
  font-size: var(--type-body);
  color: var(--muted);
  text-align: right;
}
.past-favorites-thanks {
  margin: 0;
  font-size: var(--type-body);
  color: var(--ink);
}
.past-favorites-err {
  margin: 0;
  font-size: var(--type-body);
  color: var(--ink);
}
.past-favorites-submit {
  min-height: var(--target-min);
  align-self: stretch;
}
.place-pick strong { display: block; font-size: 14px; }
.place-pick span { color: var(--muted); font-size: 12px; }
.place-pick.is-freetext { border-style: dashed; }
.place-confirmed {
  margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-radius: 11px; padding: 10px 12px; font-size: 13.5px;
}
.place-confirmed strong { font-weight: 700; }
.place-confirmed button {
  cursor: pointer; border: none; background: transparent; color: var(--accent);
  font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 0;
}
.tip-score {
  margin-top: 14px; padding: 14px 14px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  text-align: center;
}
.tip-score.is-fail {
  background: color-mix(in srgb, #c0392b 6%, var(--surface-2));
  border-color: color-mix(in srgb, #c0392b 25%, var(--line));
}
.tip-score-stars {
  font-size: 22px; letter-spacing: 0.12em; color: var(--accent); line-height: 1.2;
}
.tip-score.is-fail .tip-score-stars { color: #a33; }
.tip-score-headline {
  margin-top: 6px; font-family: 'Lato', sans-serif;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.tip-score-msg {
  margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted);
}
.tip-score-hint {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink);
  font-weight: 600;
}
.tip-score.is-fail .tip-score-hint { color: var(--ink); }
.modal-msg { font-size: 12.5px; margin-top: 10px; min-height: 16px; }
.modal-msg.ok { color: var(--mint-deep); }
.modal-msg.err { color: #c0392b; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.btn-ghost { cursor: pointer; font-family: inherit; border: 1px solid var(--line); background: transparent; color: var(--ink); font-weight: 700; font-size: 13.5px; padding: 9px 16px; border-radius: 11px; }
.btn-primary { cursor: pointer; font-family: inherit; border: none; background: var(--accent); color: #fff; font-weight: 700; font-size: 13.5px; padding: 9px 18px; border-radius: 11px; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

/* ════════════════════════ FIELD BOOK ════════════════════════ */

/* Field Book icon + badge (lives on #btn-fieldbook in the icon rail) */
#btn-fieldbook.catch { animation: fbCatch 0.8s ease; }
#btn-fieldbook.catch svg { animation: fbBop 0.6s ease; }
.fb-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent);
  color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center;
  justify-content: center; line-height: 1; pointer-events: none;
}
.fb-badge.pop { animation: fbBadgePop 0.6s ease; }

/* BL-74: durable "profile on file" pip — status on Field Book, not a rail action. */
.profile-pip {
  position: absolute; left: 3px; bottom: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); color: var(--accent); pointer-events: none;
}
.profile-pip svg { display: block; }
.profile-pip[hidden] { display: none !important; }

/* BL-74: one-time "profile sealed" assistant-row card. Sweep is the sprint's only milestone. */
.profile-sealed {
  position: relative;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  overflow: hidden;
}
.profile-sealed::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--amber), var(--accent));
  transform: scaleX(1);
  transform-origin: left center;
}
.profile-sealed-title {
  margin: 0 0 8px; font-size: var(--type-lede); font-weight: 700; color: var(--ink);
}
.profile-sealed-line {
  margin: 0 0 4px; font-size: var(--type-body); color: var(--muted); line-height: 1.5;
}
.profile-sealed-credits {
  margin: 8px 0 0; font-size: var(--type-body); font-weight: 700; color: var(--ink);
}
.profile-sealed-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target-min); margin-top: 12px;
  padding: 0 16px; border: none; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-family: inherit; font-size: var(--type-body); font-weight: 700;
  cursor: pointer;
}
.profile-sealed-cta:hover { filter: brightness(1.06); }
.profile-sealed-cta:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .profile-sealed::before {
    transform: scaleX(0);
    animation: profile-seal-sweep var(--motion-seal) ease-out forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile-sealed::before { transform: scaleX(1); animation: none; }
}
@keyframes profile-seal-sweep {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* "Add to Field Book" chips inside chat modules (BL-27) */
.fb-save {
  cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
  font-weight: 700; font-size: 11.5px; padding: 5px 11px; border-radius: 999px;
  white-space: nowrap;
}
.fb-save:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.fb-save.right { margin-left: auto; }
.fb-save .fb-save-ic { font-size: 12px; }
.fb-save-row { display: flex; justify-content: flex-end; margin-top: 12px; }
.act-actions { display: flex; align-items: center; gap: 7px; margin-top: auto; flex-wrap: wrap; }
.act-actions .fb-save { padding: 5px 9px; font-size: 11px; }

/* Per-turn save actions under the answer */
.fb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.fb-saveall {
  cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: var(--accent-soft);
  color: var(--accent); font-weight: 700; font-size: 11.5px; padding: 5px 11px; border-radius: 999px;
}
.fb-saveall:hover { background: var(--accent); color: #fff; }

/* Bottom-of-pillow-stack CTA — same width/radius/type scale as .mod-chip so it reads as the
   stack's closing beat, not a separate fat pill. Vertical padding matches .mod-sum (11px);
   top margin ≈ assistant gap × φ (15 × 1.618 ≈ 24) for a quiet pause before the action. */
.fb-stack-footer {
  display: flex; padding: 24px 0 4px;
}
.fb-stack-add {
  cursor: pointer; font-family: 'Lato', sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 14px; border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: var(--surface); color: var(--accent);
  font-weight: 700; font-size: 13.5px; letter-spacing: 0.01em; line-height: 1.2;
  box-shadow: 0 2px 10px rgba(34, 40, 42, 0.04);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fb-stack-add:hover {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.fb-stack-add .fb-save-ic { font-size: 14px; line-height: 1; }

/* BL-92 — save destination picker (this book / other / new). */
.fb-save-picker {
  position: fixed; z-index: 1200; min-width: 220px; max-width: min(320px, 92vw);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--pop-shadow); padding: 8px;
}
.fb-save-picker-title {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 6px 10px 4px; font-weight: 700;
}
.fb-save-picker-row {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  font-family: inherit; padding: 10px 12px; border-radius: 9px;
  font-size: var(--type-body); color: var(--ink); cursor: pointer;
}
.fb-save-picker-row:hover { background: var(--chrome-hover); }
.fb-save-picker-row.is-current { font-weight: 700; color: var(--accent); }
.fb-save-picker-row.is-new { color: var(--accent); }

/* Toast + fly-to-book — sit above the book overlay (z-index 1100). */
.fb-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; padding: 11px 18px;
  border-radius: 12px; box-shadow: 0 12px 34px rgba(34, 40, 42, 0.22); z-index: 1300; opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; max-width: 80vw;
}
.fb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fb-fly {
  position: fixed; z-index: 1301; pointer-events: none; display: flex; align-items: center;
  padding: 6px; background: var(--surface); border-radius: 12px; border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(34, 40, 42, 0.14); transform: translate(-50%, -50%) scale(0.6);
}
.fb-fly-ic {
  width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent);
}
.fb-particle {
  position: fixed; z-index: 1299; pointer-events: none; width: 6px; height: 6px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--accent);
}

/* ── Field Book panel ──
   Leaflet control panes default to z-index ~1000; the book must sit above them so an open
   chat map never paints through the dimmer. */
.fb-overlay {
  position: fixed; inset: 0; z-index: 1100; background: rgba(34, 40, 42, 0.48); display: flex;
  align-items: center; justify-content: center; padding: 26px; animation: rise 0.3s ease;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fb-book {
  position: relative;
  display: flex; width: min(1040px, 96vw); height: min(720px, 92vh); border-radius: 16px;
  overflow: hidden; background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 28px 80px rgba(34, 40, 42, 0.18);
  animation: popin 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: width 0.2s ease;
}
.fb-book.is-publishing { width: min(1180px, 98vw); }
/* Floating close — desktop uses the spine button; only the stacked mobile layout reveals this. */
.fb-close-mobile { display: none; }
.fb-spine {
  width: 48px; flex: none; background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 0;
}
.fb-spine-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 12%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 0.04em;
}
.fb-spine-text {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: 'Lato', sans-serif; font-weight: 700; letter-spacing: 0.18em;
  font-size: 10px; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; white-space: nowrap;
}
.fb-spine-close {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent; color: rgba(255, 255, 255, 0.75); cursor: pointer; font-size: 14px; font-family: inherit;
}
.fb-spine-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.fb-rail {
  width: 220px; flex: none; background: var(--surface-2);
  border-right: 1px solid var(--line); padding: 18px 0 14px; display: flex; flex-direction: column;
}
.fb-rail-head {
  padding: 0 18px 12px; font-weight: 700;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.fb-tabs { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.fb-tab {
  position: relative; text-align: left; border: none; cursor: pointer; font-family: inherit;
  background: transparent; color: var(--muted); font-weight: 400; font-size: 13.5px;
  padding: 10px 12px; display: flex; align-items: center; gap: 0;
  border-radius: 10px;
}
.fb-tab .fb-tab-ic { display: none; }
.fb-tab:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink); }
.fb-tab.active { background: var(--surface); color: var(--ink); font-weight: 700;
  box-shadow: 0 1px 0 rgba(34, 40, 42, 0.04), 0 6px 16px rgba(34, 40, 42, 0.05); }
.fb-tab.active::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px;
  background: var(--accent);
}
/* Past Fieldbooks (newest-first, capped by fieldbook_params.recent_fieldbooks_count). */
.fb-recent {
  margin: 12px 10px 0; padding: 12px 6px 4px; border-top: 1px solid var(--line);
}
.fb-recent:empty { display: none; margin: 0; padding: 0; border: none; }
.fb-recent-head {
  padding: 0 8px 8px; font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.fb-recent-list { display: flex; flex-direction: column; gap: 2px; }
.fb-recent-item {
  width: 100%; text-align: left; border: none; cursor: pointer; font-family: inherit;
  background: transparent; color: var(--muted); font-weight: 400; font-size: 12.5px;
  padding: 8px 10px; border-radius: 9px; display: flex; align-items: center; gap: 8px;
}
.fb-recent-item:hover { background: var(--surface); color: var(--ink); }
.fb-recent-item.active {
  background: var(--surface); color: var(--ink); font-weight: 700;
  box-shadow: 0 1px 0 rgba(34, 40, 42, 0.04);
}
.fb-recent-ic { display: none; }
.fb-recent-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.fb-rail-foot { margin: auto 14px 0; padding-top: 14px; border-top: 1px solid var(--line); }
.fb-publish-btn {
  width: 100%; cursor: pointer; font-family: inherit; border: none;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 13px;
  padding: 11px 14px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
}
.fb-publish-btn:hover { filter: brightness(1.05); }
.fb-publish-btn .fb-pub-spark { display: none; }
.fb-publish-btn.inline { width: auto; margin-top: 14px; }
.fb-edition-badge {
  display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 11px; margin-bottom: 8px;
}
.fb-edition-seal {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent); display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700;
}
.fb-edition-no { font-size: 12px; font-weight: 700; color: var(--ink); }
.fb-edition-sub { font-size: 11px; color: var(--muted); }
.fb-download-pdf {
  width: 100%; cursor: pointer; font-family: inherit;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-weight: 700; font-size: 13px;
  padding: 10px 14px; border-radius: 11px; margin-bottom: 4px;
}
.fb-download-pdf:hover { background: var(--surface-2); }
.fb-download-pdf:disabled { opacity: 0.55; cursor: default; }
.fb-republish {
  width: 100%; cursor: pointer; font-family: inherit; border: none; background: transparent;
  color: var(--muted); font-weight: 700; font-size: 11.5px; padding: 8px 0 0; text-decoration: underline;
  text-underline-offset: 2px;
}
.fb-auto {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; color: var(--muted);
  cursor: pointer; font-weight: 400;
}
.fb-auto input { accent-color: var(--accent); }
.fb-rail-count { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 10px; }

/* ── Book page content ── */
.fb-page { flex: 1; min-width: 0; background: var(--bg); position: relative; overflow-y: auto; display: flex; flex-direction: column; }
.fb-titlebar {
  flex: none; padding: 18px 36px 0; border-bottom: 1px solid transparent;
}
.fb-title-display {
  width: 100%; text-align: left; border: 1px solid transparent; background: transparent;
  cursor: pointer; font-family: inherit; padding: 6px 10px; margin: 0 -10px;
  border-radius: 10px; display: flex; align-items: baseline; gap: 10px; color: var(--ink);
}
.fb-title-display:hover {
  background: var(--surface); border-color: var(--line);
}
.fb-title-text {
  font-family: 'Lato', sans-serif; font-size: 20px; font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-title-edit-ic {
  flex: none; font-size: 12px; color: var(--muted); opacity: 0; transition: opacity 0.15s ease;
}
.fb-title-display:hover .fb-title-edit-ic { opacity: 1; }
.fb-title-input {
  width: 100%; font-family: 'Lato', sans-serif; font-size: 20px; font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 12px; outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
}
.fb-page-inner { padding: 18px 36px 44px; flex: 1; min-height: 0; }
.fb-chapter { animation: rise 0.35s ease; color: var(--ink); }
.fb-kicker {
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; color: var(--muted);
}
.fb-kicker.gold,
.fb-kicker.purple,
.fb-kicker.green,
.fb-kicker.copper,
.fb-kicker.teal { color: var(--muted); }
.fb-h2 {
  font-family: 'Lato', sans-serif;
  font-size: 26px; font-weight: 700; letter-spacing: -0.025em;
  margin: 6px 0 8px; color: var(--ink);
}
.fb-lead { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 20px; max-width: 48ch; }

/* BL-79 A1 journey — warm paper on charcoal (design/fieldbook-edition/dashboard.css) */
.fb-page-inner:has(.fb-journey) {
  background: #1b2022;
  padding: 16px 18px 28px;
}
.fb-journey {
  background: #f7f4ee; color: #2d3336;
  padding: 26px 26px 20px;
  min-height: 100%;
  display: flex; flex-direction: column;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 16px 40px rgba(0, 0, 0, 0.28);
}
.fb-j-mast {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(45, 51, 54, 0.32);
}
.fb-j-ed { color: #8f55ea; letter-spacing: 0.14em; }
.fb-j-title {
  margin: 12px 0 0; font-size: var(--type-title); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.05; color: #2d3336;
}
.fb-j-deck {
  margin: 6px 0 0; font-size: var(--type-lede); font-weight: 400;
  letter-spacing: -0.015em; line-height: 1.25; color: #2d3336;
}
.fb-j-when { margin: 8px 0 0; font-size: var(--type-body); color: rgba(45, 51, 54, 0.52); }
.fb-j-hero {
  margin: 16px 0 8px; height: 168px; overflow: hidden;
  background: #c4b8a8;
}
.fb-j-hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.88) contrast(1.04);
}
.fb-j-facts {
  margin: 0; padding: 12px 0 14px;
  border-top: 1px solid rgba(45, 51, 54, 0.14);
  border-bottom: 1px solid rgba(45, 51, 54, 0.14);
  font-size: var(--type-body); letter-spacing: 0.01em; color: #2d3336;
}
.fb-j-facts i {
  display: inline-block; width: 1px; height: 11px;
  margin: 0 10px -1px; background: rgba(45, 51, 54, 0.18);
}
.fb-j-block { margin-top: 14px; }
.fb-j-sec {
  margin: 0 0 8px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(45, 51, 54, 0.32);
}
.fb-j-wx { display: flex; align-items: flex-end; gap: 4px; height: 42px; }
.fb-j-wx-i {
  flex: 1; display: block; height: 16px; background: rgba(45, 51, 54, 0.12);
}
.fb-j-wx-i.wet { height: 8px; background: rgba(45, 51, 54, 0.08); }
.fb-j-wx-i.best { height: 26px; background: rgba(45, 51, 54, 0.28); }
.fb-j-wx-i.now { height: 42px; background: #2d3336; }
.fb-j-wx-meta {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: var(--type-body); color: rgba(45, 51, 54, 0.52);
}
.fb-j-wx-meta em { font-style: normal; font-weight: 700; color: #2d3336; }
.fb-j-intro {
  margin: 12px 0 0; font-size: var(--type-body); line-height: 1.6; color: rgba(45, 51, 54, 0.72);
  max-width: 58ch;
}
/* Poster route: circular photo nodes on a dotted vertical path (2026-08-27 front-page pass). */
.fb-j-route { margin: 0; padding: 0; list-style: none; }
.fb-j-stop {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 9px 0;
}
.fb-j-stop:not(:last-child)::after {
  content: ""; position: absolute; left: 31px; top: calc(50% + 36px); bottom: -14px;
  border-left: 2px dotted rgba(45, 51, 54, 0.28);
}
.fb-j-stop .node {
  flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: #c4b8a8; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px #f7f4ee, 0 0 0 4px rgba(45, 51, 54, 0.22), 0 4px 10px rgba(0, 0, 0, 0.12);
}
.fb-j-stop .node img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.88) contrast(1.05);
}
.fb-j-stop .node.is-blank {
  background: #ece7dd;
}
.fb-j-stop .node i {
  font-style: normal; font-size: 15px; font-weight: 700; color: rgba(45, 51, 54, 0.45);
}
.fb-j-stop .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fb-j-stop .chip {
  width: fit-content; font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  color: #8f55ea; background: rgba(143, 85, 234, 0.1); border-radius: 999px;
  padding: 2px 8px;
}
.fb-j-stop .t { font-size: 14.5px; font-weight: 700; color: #2d3336; line-height: 1.25; }
.fb-j-stop .s { font-size: 11.5px; color: rgba(45, 51, 54, 0.5); }
.fb-j-sheet {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.fb-j-frame {
  aspect-ratio: 3 / 2; overflow: hidden; background: #c4b8a8;
}
.fb-j-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.82) contrast(1.06);
}
.fb-j-note {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(45, 51, 54, 0.14);
  font-size: var(--type-body); line-height: 1.5; color: rgba(45, 51, 54, 0.52);
}
.fb-j-note strong {
  display: block; margin-bottom: 4px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #2d3336;
}
.fb-j-oliver, .fb-j-tips { padding-top: 4px; }
.fb-j-clip {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(45, 51, 54, 0.1);
  font-size: var(--type-body); line-height: 1.5; color: #2d3336;
  white-space: pre-wrap;
}
.fb-j-oliver .fb-j-clip:first-of-type,
.fb-j-tips .fb-j-clip:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.fb-j-clip-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(45, 51, 54, 0.4); margin-bottom: 4px;
}
.fb-j-why {
  margin-top: 16px; padding-top: 10px;
  border-top: 1px solid rgba(45, 51, 54, 0.14);
}
.fb-j-why summary {
  cursor: pointer; font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(45, 51, 54, 0.32); list-style: none;
}
.fb-j-why summary::-webkit-details-marker { display: none; }
.fb-j-why[open] summary { margin-bottom: 8px; }
/* Sealed Itinerary chapter — grouped day rows on the regular tab surface. */
.fb-dayspine { margin: 0; padding: 0; list-style: none; }
.fb-dayspine li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink);
}
.fb-dayspine li:last-child { border-bottom: 0; }
.fb-dayspine .n {
  flex: none; width: 42px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.fb-dayspine .ph {
  flex: none; width: 64px; height: 44px; overflow: hidden; border-radius: 8px;
  background: var(--surface-2);
}
.fb-dayspine .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-dayspine .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fb-dayspine .t { font-weight: 700; }
.fb-dayspine .s { font-size: 11.5px; color: var(--muted); }
.fb-dayspine .hl { font-size: 12px; color: var(--muted); line-height: 1.4; }
.fb-objcard-ph {
  margin: 6px 0; width: 120px; height: 80px; overflow: hidden; border-radius: 8px;
  background: var(--surface-2);
}
.fb-objcard-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fb-images {
  margin: 0 0 14px;
  flex-wrap: wrap;
  overflow-x: visible;
  gap: 8px;
}
.fb-images .dest-img {
  border-radius: 0;
  border: 0;
  background: #c4b8a8;
}
.fb-images .dest-img img {
  filter: saturate(0.88) contrast(1.04);
}
.fb-images .dest-img.lead {
  flex: 1 1 100%; width: 100%; max-width: 100%;
}
.fb-images .dest-img.lead img { height: 180px; }
.fb-images .dest-img:not(.lead) { width: calc((100% - 16px) / 3); }
.fb-images .dest-img:not(.lead) img { height: 72px; }
.fb-subhead {
  font-size: 12px; font-weight: 700; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin: 20px 0 10px;
}

/* Note composer */
.fb-note-row {
  display: flex; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 7px 7px 7px 15px; margin-bottom: 20px;
}
/* min-width:0 lets the input shrink inside its flex row so "＋ Add note" never overflows a narrow page. */
.fb-note-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: inherit; font-size: 14px; color: var(--ink); }
.fb-note-add {
  cursor: pointer; font-family: inherit; border: none; background: var(--ink); color: #fff; font-weight: 700;
  font-size: 13px; padding: 9px 14px; border-radius: 9px; white-space: nowrap;
}
.fb-note-add:hover { background: color-mix(in srgb, var(--ink) 88%, #fff); }

/* Collected items */
.fb-items { display: flex; flex-direction: column; gap: 8px; }
.fb-item {
  display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 14px; animation: popin 0.35s ease;
}
.fb-item-ic {
  width: 28px; height: 28px; flex: none; margin-top: 0;
  border-radius: 8px; background: var(--surface-2); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
}
.fb-item-main { flex: 1; min-width: 0; }
.fb-item-type {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 3px; color: var(--muted);
}
.fb-item-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.fb-item-body { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.fb-item-spine { font-size: 13px; color: var(--ink); line-height: 1.45; margin-top: 4px; }
.fb-item-rev {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px;
}
.fb-item-rev-name { font-size: var(--type-body); font-weight: 700; color: var(--ink); }
.fb-item-rev-chip {
  display: inline-flex; align-items: center;
  min-height: 22px; padding: 0 7px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em;
}
.fb-itin-ready { font-size: 13px; color: var(--muted); }
.fb-item-rm {
  cursor: pointer; font-family: inherit; flex: none; width: 28px; height: 28px; border-radius: 8px;
  border: none; background: transparent; color: var(--muted); font-size: 15px; display: flex; align-items: center;
  justify-content: center;
}
.fb-item-rm:hover { background: var(--surface-2); color: var(--ink); }

/* Place dossiers (draft view) */
.fb-dossier { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.fb-dossier-name {
  font-family: 'Lato', sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
}
.fb-dossier-body { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.fb-ul { margin: 6px 0; padding-left: 18px; }
.fb-ul li { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin: 4px 0; }
.fb-ul li::marker { color: var(--muted); }

/* Sealed-edition field rendering */
.fb-fields { display: flex; flex-direction: column; gap: 18px; }
.fb-field-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.fb-field-text { font-size: 14px; line-height: 1.65; color: var(--ink); }
.fb-field-text p { margin: 0 0 0.7em; } .fb-field-text p:last-child { margin-bottom: 0; }
.fb-cards { display: flex; flex-direction: column; gap: 10px; }
.fb-objcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.fb-objcard-title { font-weight: 700; font-size: 14.5px; color: var(--ink); margin-bottom: 5px; }
.fb-objcard-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.5; margin: 3px 0; color: var(--ink); }
.fb-kv-k { font-weight: 700; color: var(--muted); flex: none; }
.fb-kv-v { color: var(--ink); }
.fb-mini { font-size: 13px; color: var(--muted); }
.fb-climate { display: flex; flex-direction: column; gap: 12px; }
.fb-climate-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.fb-climate-best { font-size: 13.5px; color: var(--ink); margin: 2px 0 6px; }
.fb-climate-months { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-climate-m {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 8px;
}
.fb-climate-m.best { color: var(--ink); border-color: var(--ink); }

/* Empty + "compiled later" panels */
.fb-empty {
  text-align: center; padding: 40px 20px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted);
  background: var(--surface);
}
.fb-empty-ic { display: none; }
.fb-empty-title {
  font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 700;
  color: var(--ink); margin-bottom: 5px;
}
.fb-empty-text { font-size: 13.5px; line-height: 1.55; max-width: 40ch; margin: 0 auto; }
.fb-compiled-later {
  text-align: center; padding: 36px 24px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px;
}
.fb-cl-ic {
  width: 36px; height: 36px; margin: 0 auto 12px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent); display: flex; align-items: center;
  justify-content: center; font-size: 14px; font-weight: 700;
}
.fb-cl-title {
  font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 700;
  color: var(--ink); margin-bottom: 6px;
}
.fb-cl-text { font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 42ch; margin: 0 auto 14px; }

/* Book map */
.fb-map-wrap {
  position: relative; z-index: 0; isolation: isolate;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
}
.fb-leaf { height: 360px; }

/* ── Inline publish panel (BL-33 Alt B+A: lives inside .fb-book, no modal) ── */
.fb-publish-panel {
  width: 300px; flex: none; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  padding: 18px 16px 16px;
  animation: rise 0.22s ease;
  z-index: 5;
}
.fb-book.is-publishing .fb-rail-foot .fb-publish-btn,
.fb-book.is-publishing .fb-rail-foot .fb-republish,
.fb-book.is-publishing .fb-rail-foot .fb-download-pdf { display: none; }
.fb-pub-sheet {
  display: flex; flex-direction: column; min-height: 0; height: 100%;
}
.fb-pub-scroll {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  flex: 1 1 auto; min-height: 0; padding-right: 2px;
}
.fb-pub-facts {
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line);
}
.fb-pub-questions { margin-top: 4px; }
.fb-pub-adjust {
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line);
}
details.fb-pub-adjust > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 0;
}
details.fb-pub-adjust > summary::-webkit-details-marker { display: none; }
details.fb-pub-adjust > summary::after {
  content: "+"; font-size: 16px; font-weight: 700; color: var(--muted); line-height: 1;
}
details.fb-pub-adjust[open] > summary::after { content: "–"; }
details.fb-pub-adjust > summary + .fb-pub-p-tight { margin-top: 10px; }
.fb-pub-p-tight { margin-bottom: 10px; }
.fb-pub-h {
  font-family: 'Lato', sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--ink);
  flex: none;
}
.fb-pub-p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.fb-pub-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px;
  flex: none; padding-top: 4px;
}
.fb-pub-actions.center { justify-content: center; }
.fb-pub-go { background: var(--accent); flex: 1 1 auto; }
.fb-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.fb-chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px;
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 12.5px;
  cursor: pointer;
}
.fb-chip:hover { border-color: var(--ink); }
.fb-chip.active {
  background: var(--accent); border-color: transparent; color: #fff; font-weight: 700;
}
.fb-pub-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.fb-pub-step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); }
.fb-pub-step.running { color: var(--muted); }
.fb-pub-step-ic {
  width: 22px; height: 22px; flex: none; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700;
}
.fb-pub-step.done .fb-pub-step-ic { background: rgba(140, 222, 173, 0.22); color: var(--mint-deep); }
.fb-pub-step.running .fb-pub-step-ic {
  border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: spin 0.7s linear infinite;
}
.fb-clarify-form { display: flex; flex-direction: column; gap: 12px; }
.fb-clarify-q { display: flex; flex-direction: column; }

/* ───────────── Tailor your trip (optional pre-publish step) ───────────── */
.fb-tailor { display: flex; flex-direction: column; gap: 16px; }
.fb-tailor-sec { display: flex; flex-direction: column; gap: 8px; }
.fb-tailor-label {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.fb-tailor-empty { font-size: 13px; color: var(--muted); }
/* Inside the single scroll sheet, lists grow naturally (outer .fb-pub-scroll scrolls). */
.fb-check-list { display: flex; flex-direction: column; gap: 2px; }
.fb-check {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px;
  font-size: 13.5px; color: var(--ink); cursor: pointer; border: 1px solid transparent;
}
.fb-check:hover { background: var(--surface-2); }
.fb-check input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.fb-tailor-hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.fb-slider-wrap { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.fb-slider-top { display: flex; align-items: baseline; justify-content: space-between; }
.fb-slider-label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fb-slider-val { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.fb-slider { width: 100%; accent-color: var(--accent); }
.fb-slider-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.fb-tailor-loading { display: flex; justify-content: center; padding: 24px 0; }
.fb-spin {
  width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--accent-soft);
  border-top-color: var(--accent); animation: spin 0.7s linear infinite; display: block;
}

.fb-pub-published { text-align: center; }
.fb-pub-seal {
  width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent); display: flex;
  align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
}

/* ════════════════════════ FIELD BOOK — RESPONSIVE ════════════════════════
   Desktop is a two-page spread (spine · tab rail · page). That spread does not fit a
   phone, so it degrades in two stages:

     ≤ 760px  full-screen book; spine hidden → a floating ✕ takes over; side rail slimmed
              and the note input allowed to shrink (kills the "＋ Add note" overflow).
     ≤ 600px  the side-by-side columns collapse into a single column:
                • tab rail  → a horizontal, swipeable tab strip pinned to the top
                • page      → full width, scrolls between the strip and the action bar
                • rail foot → a full-width action bar pinned to the bottom (absolute, so it
                              tracks the book's edge regardless of the open animation)
*/

/* ── ≤760: full-screen book, floating close, no horizontal overflow ── */
@media (max-width: 760px) {
  .fb-overlay { padding: 0; }
  /* Fill the visible viewport (dvh) so the page footer isn't lost behind browser chrome. */
  .fb-book { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
  .fb-spine { display: none; }
  .fb-close-mobile {
    display: flex; position: absolute; top: 10px; right: 10px; z-index: 6;
    width: 40px; height: 40px; align-items: center; justify-content: center;
    border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
    color: var(--ink); font-size: 16px; cursor: pointer; font-family: inherit;
    box-shadow: 0 2px 10px rgba(34, 40, 42, 0.1);
  }
  .fb-rail { width: 200px; }
  .fb-titlebar { padding: 14px 22px 0; }
  .fb-title-text, .fb-title-input { font-size: 18px; }
  .fb-page-inner { padding: 14px 22px 40px; }
  .fb-h2 { font-size: 22px; }
  /* Narrow tablets: seal panel becomes a bottom sheet over the journey. */
  .fb-publish-panel {
    position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-height: min(72vh, 560px);
    border-left: none; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 32px rgba(34, 40, 42, 0.12);
    padding: 16px 16px calc(14px + env(safe-area-inset-bottom));
    z-index: 5;
  }
  .fb-book.is-publishing .fb-page-inner {
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
  }
}

/* ── ≤600: collapse the spread into one column ── */
@media (max-width: 600px) {
  .fb-book { flex-direction: column; }

  /* Tab rail → top strip. The footer is lifted out (absolute) and pinned to the bottom. */
  .fb-rail {
    width: 100%; height: auto; flex: none; flex-direction: column; gap: 0; padding: 0;
    border-right: none; border-bottom: 1px solid var(--line); background: var(--surface);
  }
  .fb-rail-head { display: none; }

  .fb-tabs {
    flex-direction: row; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* right gutter keeps the last tab clear of the floating ✕ */
    padding: 10px 56px 10px 12px;
  }
  .fb-tabs::-webkit-scrollbar { display: none; }
  .fb-tab {
    flex: 0 0 auto; margin-left: 0; padding: 8px 14px; gap: 7px; font-size: 13px;
    white-space: nowrap; border-radius: 999px; background: var(--surface-2);
  }
  .fb-tab.active { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
  .fb-tab.active::before { display: none; }   /* vertical accent bar reads wrong horizontally */

  /* Footer → bottom action bar, pinned to the book (which is position:relative + full-screen). */
  .fb-rail-foot {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; margin: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: var(--surface);
    box-shadow: 0 -4px 16px rgba(34, 40, 42, 0.06);
  }
  .fb-book.is-publishing .fb-rail-foot { display: none; }
  .fb-publish-btn { width: auto; flex: 1 1 auto; }
  .fb-download-pdf { width: auto; flex: 1 1 auto; margin-bottom: 0; }
  .fb-republish { width: auto; flex: 0 0 auto; padding: 8px 4px; }
  .fb-edition-badge { flex: 1 1 100%; margin-bottom: 0; }
  .fb-auto { flex: 1 1 auto; margin-top: 0; }
  .fb-rail-count { flex: 0 0 auto; margin: 0 0 0 auto; }

  /* Page fills the gap between the top strip and bottom bar; clip stray horizontal overflow. */
  .fb-page { width: 100%; overflow-x: hidden; }
  /* Generous bottom padding clears the (taller, when published) absolute action bar. */
  .fb-titlebar { padding: 12px 16px 0; }
  .fb-title-text, .fb-title-input { font-size: 17px; }
  .fb-page-inner { padding: 12px 16px calc(168px + env(safe-area-inset-bottom)); }
  .fb-page-inner:has(.fb-journey) {
    padding: 0 0 calc(168px + env(safe-area-inset-bottom));
    background: #f7f4ee;
  }
  .fb-journey { box-shadow: none; min-height: auto; }
  .fb-book.is-publishing .fb-page-inner {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .fb-publish-panel { max-height: min(78vh, 620px); z-index: 5; }
  .fb-h2 { font-size: 22px; }
  .fb-lead { font-size: 13.5px; }
  .fb-dossier-name { font-size: 17px; }
  .fb-leaf { height: 300px; }

  .fb-note-row { padding: 6px 6px 6px 13px; }
}

/* Field Book animations */
@keyframes fbBadgePop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes fbCatch { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes fbBop { 0% { transform: translateY(0); } 30% { transform: translateY(-5px) rotate(-8deg); } 100% { transform: translateY(0); } }

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulsering { 0% { transform: scale(0.7); opacity: 0.55; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
@keyframes popin { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tickfloat { 0% { opacity: 0; transform: translateY(4px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
@keyframes pillpop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes dots { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* ════════════════════════ RESPONSIVE / MOBILE ════════════════════════
   Layered, desktop-down breakpoints. Each tier only relaxes what actually starts
   to crowd at that width, so the layout degrades gracefully instead of snapping:

     ≤ 960px  small laptop / tablet  - tighten gutters
     ≤ 720px  tablet / large phone   - larger icon hit targets, full-width history pop
     ≤ 600px  phone                  - edge-to-edge content, 16px composer input
                                        (stops iOS focus-zoom), ≥40px touch targets
     ≤ 380px  small phone            - minimal chrome, tightest gutters
*/

/* ── ≤960: trim the generous desktop gutters ── */
@media (max-width: 960px) {
  .scroll { padding: 22px 0; }
  .stream { padding: 0 20px; }
  .composer-inner { padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); }
}

/* ── ≤720: match design/chat.html mobile chrome ── */
@media (max-width: 720px) {
  .chrome {
    height: 56px;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  }
  .brand-mark { height: 17px; }
  .icon-btn { width: 44px; height: 44px; }
  /* BL-65: beat `.app:not(.is-empty) .session-title:not([hidden]) { display: block }` */
  .session-title,
  .app:not(.is-empty) .session-title:not([hidden]) { display: none; }
  #history-pop { left: 12px; right: 12px; width: auto; }
  #menu-pop { right: max(12px, env(safe-area-inset-right)); }
  .icon-btn .tip { display: none; }
  .tray-stop { width: 40px; height: 40px; }
  /* BL-68: collapsed tray stays full-width; Show stays right; ≥44px touch. */
  .tray-collapsed {
    min-height: 44px;
    padding: 10px 14px;
  }
  .tray-collapsed-action {
    font-size: 12.5px;
    padding: 10px 2px 10px 12px;
  }
  /* Icon rail is already dense on phones; the 1px rule reads as a stray dash. */
  .rail-divider { display: none; }
}

/* ── ≤600: phone layout - full-bleed content ── */
@media (max-width: 600px) {
  .scroll { padding: 16px 0; }
  .stream { padding: 0 14px; gap: 14px; }
  .bubble-user { max-width: 88%; }
  .msg-assistant { gap: 9px; }

  /* Composer: 16px input prevents the iOS auto-zoom-on-focus jump (exception to 14px body). */
  .composer-inner { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
  .input-row { padding: 8px 8px 8px 14px; }
  .input-row textarea { font-size: 16px; }

  .empty { padding: 0 12px 8px; }
  .empty h1 { font-size: 27px; }
  .empty-avatar { width: 68px; height: 68px; margin-bottom: 14px; }
  .app.is-empty .composer-inner {
    padding: 16px 14px max(12px, env(safe-area-inset-bottom));
  }
  /* Keep the disclaimer in flow under the input so it cannot overlay OOC / CTA cards. */
  .app.is-empty .composer-note {
    position: static;
    left: auto; right: auto; bottom: auto;
    margin-top: 9px;
    opacity: 0.8;
  }
  .app.is-empty .main::after { flex: 1.45 1 0; }

  /* Rich modules sized down so a single card isn't wider than the screen. */
  .dest-img { width: 150px; }
  .dest-img img { height: 104px; }
  .act-card { width: 168px; }
  .leaf-map, .map-fallback { height: 220px; }
  .climate-strip { height: 108px; }

  /* Out-of-credits offer stacks rather than squeezing two cards side by side. */
  .ooc-card { flex: 1 1 100%; }

  /* Dialogs: edge-hugging backdrop + slightly tighter padding. */
  .modal-backdrop { padding: 12px; }
  .modal { padding: 18px; border-radius: 16px; }
}

/* ── ≤380: smallest phones - shave every remaining gutter ── */
@media (max-width: 380px) {
  .brand-mark { height: 15px; }
  .icon-rail { gap: 0; }
  .icon-btn { width: 36px; height: 40px; }
  .stream { padding: 0 11px; }
  .composer-inner { padding: 9px 11px calc(11px + env(safe-area-inset-bottom)); }
}

/* ── Analytics consent banner (plan §7) ── */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  padding: 12px max(14px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg, #f7f4ef) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid color-mix(in srgb, var(--ink, #1c1917) 12%, transparent);
  box-shadow: 0 -8px 28px rgba(28, 25, 23, 0.08);
}
.consent-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}
.consent-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.consent-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #6b6560);
  max-width: 48ch;
}
.consent-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .consent-inner { flex-direction: column; align-items: stretch; }
  .consent-actions { justify-content: flex-end; }
}

/* BL-82 / BL-84 — tear-to-send + recipient gate */
.fb-book.is-sharing { width: min(1180px, 98vw); }
.fb-share-panel {
  width: 300px; flex: none; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  padding: 18px 16px 16px;
  animation: rise 0.22s ease;
  z-index: 5;
  overflow-y: auto;
}
.fb-share-close {
  align-self: flex-end; border: 0; background: none; color: var(--muted);
  cursor: pointer; font-size: 16px; padding: 0 0 8px;
}
.fb-tear-btn {
  display: block; width: 100%; border: 1px dashed rgba(45, 51, 54, 0.28);
  background: #f7f4ee; color: var(--ink); border-radius: 8px;
  padding: 10px 12px; cursor: pointer; text-align: left;
}
.fb-tear-stub { display: flex; align-items: center; gap: 10px; }
.fb-tear-perf {
  width: 0; height: 28px; border-left: 1px dashed rgba(45, 51, 54, 0.4);
}
.fb-tear-label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.fb-tear-pass {
  position: relative; display: flex; margin: 12px 0; background: #f7f4ee;
  border: 1px solid rgba(45, 51, 54, 0.14); border-radius: 8px; overflow: hidden;
}
.fb-tear-pass-main { flex: 1; padding: 12px; }
.fb-tear-kicker { font-size: 13px; font-weight: 700; }
.fb-tear-ed { font-size: 11px; color: var(--muted); margin-top: 4px; }
.fb-tear-stub-lg {
  width: 64px; flex: none; border-left: 1px dashed rgba(45, 51, 54, 0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.fb-tear-pass.is-torn .fb-tear-stub-lg {
  animation: fb-tear-fly 420ms cubic-bezier(.22, .7, .2, 1) forwards;
}
@keyframes fb-tear-fly {
  to { transform: translate(28px, -8px) rotate(8deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-tear-pass.is-torn .fb-tear-stub-lg { animation: none; opacity: 0.55; }
}
.fb-share-sign-wrap { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); margin: 8px 0; }
.fb-share-sign {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; color: var(--ink);
}
.fb-share-live { font-size: 12px; color: var(--muted); margin-top: 10px; }
.fb-share-openers { margin: 6px 0 10px; padding-left: 16px; font-size: 13px; }
.fb-share-revoke {
  border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer;
  text-decoration: underline; padding: 0; align-self: flex-start;
}
.fb-share-stamp { font-size: 11px; color: var(--muted); margin-top: 4px; }
.fb-share-from { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.share-gate, .share-gone { max-width: 28rem; margin: 12vh auto; padding: 0 20px; }
.share-gate h1, .share-gone h1 { font-size: 28px; margin: 0 0 8px; }
.share-gate h2 { font-size: 16px; margin: 20px 0 6px; }
.fb-share-kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.fb-share-nick {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font: inherit; margin: 8px 0;
}
.fb-share-nick-err { color: #a33; font-size: 13px; }
body.is-share-view .chrome .icon-rail { display: none; }
body.is-share-view .composer { display: none; }
body.is-share-view .fb-spine-close,
body.is-share-view .fb-close-mobile { display: none; }