/* app.css — TripForge app pages (lab rebuild: every page works, made-up places, demo data only).
   Builds on the tokens and components in style.css. */
:root { --content-wide: 1320px; }
body { padding-bottom: 0; }
button { font: inherit; }
a { color: inherit; }
.skip-link:not(:focus) { transform: translateY(-200%); }
.topbar { top: var(--lab-bar-h, 0px); }
.topbar__link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.topbar__link .count { min-width: 20px; padding: 1px 6px; border-radius: var(--radius-full); background: var(--color-surface-offset); font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-align: center; }
.topbar__logo { min-height: 44px; }
.avatar-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); cursor: pointer; }
.avatar-btn:hover .avatar { box-shadow: 0 0 0 3px var(--color-primary-highlight); }
.avatar[data-tone="1"] { --avatar-color: var(--color-secondary); background: var(--color-secondary); }
.avatar[data-tone="2"] { --avatar-color: var(--color-accent); background: var(--color-accent); }
.avatar[data-tone="3"] { --avatar-color: #7a5aa6; background: #7a5aa6; }
.avatar[data-tone="4"] { --avatar-color: var(--color-warning); background: var(--color-warning); }
.avatar.pending { background: var(--color-surface-offset) !important; color: var(--color-text-muted); border-style: dashed; }

/* Page scaffold */
.page { max-width: var(--content-wide); margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-16); }
@media (min-width: 1024px) { .page { padding-left: var(--space-6); padding-right: var(--space-6); } }
.view { animation: tf-fade 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.page-title { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--color-text); margin: 0 0 var(--space-2); }
.page-sub { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); max-width: 64ch; }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--color-text-muted); }

/* Buttons & controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-full); border: 1px solid oklch(from var(--color-text) l c h / 0.14); background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive), box-shadow var(--transition-interactive); }
.btn:hover { background: var(--color-surface-offset); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-accent { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-text-muted); }
.btn-ghost:hover { background: var(--color-surface-offset); color: var(--color-text); }
.btn-danger { color: var(--color-error); }
.btn-danger:hover { background: var(--color-error-highlight); border-color: var(--color-error); }
.btn-glass { background: oklch(1 0 0 / 0.18); border-color: oklch(1 0 0 / 0.28); color: inherit; backdrop-filter: blur(8px); }
.btn-glass:hover { background: oklch(1 0 0 / 0.3); }
.btn-sm { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.icon-only { width: 44px; padding: 0; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--radius-full); background: var(--color-surface-offset); flex-wrap: wrap; }
.seg button { min-height: 38px; padding: 0 var(--space-4); border-radius: var(--radius-full); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--color-text); }
.seg button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-full); border: 1px solid oklch(from var(--color-text) l c h / 0.14); background: var(--color-surface); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); cursor: pointer; }
.chip:hover { color: var(--color-text); border-color: var(--color-primary); }
.chip[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; background: var(--color-surface-offset); color: var(--color-text-muted); white-space: nowrap; }
.tag.primary { background: var(--color-primary-highlight); color: var(--color-primary); }
.tag.accent { background: var(--color-accent-highlight); color: var(--color-accent); }
.tag.success { background: var(--color-success-highlight); color: var(--color-success); }
.tag.warning { background: var(--color-warning-highlight); color: var(--color-warning); }
.search-field { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; flex: 1 1 260px; max-width: 420px; padding: 0 var(--space-4); border-radius: var(--radius-full); border: 1px solid oklch(from var(--color-text) l c h / 0.14); background: var(--color-surface); }
.search-field:focus-within { border-color: var(--color-primary); }
.search-field svg { width: 18px; height: 18px; color: var(--color-text-faint); flex-shrink: 0; }
.search-field input { flex: 1; min-width: 0; min-height: 40px; border: 0; outline: 0; background: none; color: var(--color-text); font-size: var(--text-sm); }
.select, .input, .textarea { width: 100%; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); }
.select { appearance: none; padding-right: var(--space-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6b7e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.select.inline { width: auto; border-radius: var(--radius-full); }
.textarea { min-height: 90px; padding: var(--space-3); resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.16); }

/* Trip cards */
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-6); }
.trip-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid oklch(from var(--color-text) l c h / 0.08); box-shadow: var(--shadow-sm); text-decoration: none; transition: box-shadow var(--transition-interactive), transform var(--transition-interactive); }
.trip-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.trip-art { position: relative; height: 168px; padding: var(--space-4); display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: var(--art); overflow: hidden; }
.trip-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, oklch(1 0 0 / 0.25), transparent 45%), repeating-linear-gradient(45deg, transparent 0 18px, oklch(1 0 0 / 0.05) 18px 19px); pointer-events: none; }
.trip-art > * { position: relative; z-index: 1; }
.trip-art h3 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 2px 10px oklch(0 0 0 / 0.25); }
.trip-art .tag { background: oklch(1 0 0 / 0.9); color: #1a2332; }
.trip-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); }
.trip-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.trip-meta span { display: inline-flex; align-items: center; gap: 6px; }
.trip-meta svg { width: 15px; height: 15px; }
.stack { display: flex; }
.stack .avatar { width: 32px; height: 32px; font-size: 12px; border: 2px solid var(--color-surface); margin-left: -8px; }
.stack .avatar:first-child { margin-left: 0; }
.bar { height: 8px; border-radius: var(--radius-full); background: var(--color-surface-offset); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.new-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 280px; padding: var(--space-6); border-radius: var(--radius-xl); border: 2px dashed var(--color-border); color: var(--color-text-muted); font-weight: 600; cursor: pointer; background: transparent; transition: border-color var(--transition-interactive), color var(--transition-interactive), background var(--transition-interactive); }
.new-card:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-highlight); }
.new-card svg { width: 32px; height: 32px; }

/* Trip detail */
.trip-banner__content { max-width: var(--content-wide); }
.banner-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.banner-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.trip-banner__bg { background: var(--art, linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%)); }
.trip-banner__content, [data-theme="dark"] .trip-banner__content { color: #fff; }
.trip-members .avatar--member { border-color: oklch(1 0 0 / 0.6); }
.trip-tabs { position: sticky; top: calc(var(--lab-bar-h, 0px) + 65px); z-index: 60; background: var(--color-surface); border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.08); }
.trip-tabs__inner { max-width: var(--content-wide); margin: 0 auto; padding: 0 var(--space-4); display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1024px) { .trip-tabs__inner { padding: 0 var(--space-6); } }
.trip-tabs__inner::-webkit-scrollbar { display: none; }
.trip-tab { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-4); border-bottom: 3px solid transparent; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.trip-tab svg { width: 18px; height: 18px; }
.trip-tab:hover { color: var(--color-text); }
.trip-tab[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.content-area { padding-top: var(--space-6); padding-bottom: var(--space-12); }
.day-tabs { position: static; padding-top: 0; }
.day-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.timeline-card { position: relative; }
.timeline-card.is-booked { border-color: oklch(from var(--color-success) l c h / 0.45); }
.card-actions { display: flex; gap: var(--space-1); margin-left: auto; }
.card-actions .icon-btn { width: 40px; height: 40px; }
.book-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--color-border); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); cursor: pointer; }
.book-toggle:hover { border-color: var(--color-success); color: var(--color-success); }
.book-toggle[aria-pressed="true"] { background: var(--color-success-highlight); border-color: var(--color-success); color: var(--color-success); }
.book-toggle svg { width: 14px; height: 14px; }
.timeline-card__footer { align-items: center; }
.timeline-note { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-accent); background: var(--color-accent-highlight); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--text-xs); color: var(--color-text); }
.sidebar { gap: var(--space-4); }
.quick-action-btn { width: 100%; min-height: 44px; text-decoration: none; }
.budget-value { text-align: right; }

/* Map */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); align-items: start; }
.map-card { position: relative; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid oklch(from var(--color-text) l c h / 0.08); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.map-svg { display: block; width: 100%; height: auto; }
.map-svg .water { fill: #cfe4ee; } .map-svg .land { fill: #f1ede1; stroke: #d9d1bb; stroke-width: 2; }
.map-svg .park { fill: #d5e8c8; } .map-svg .road { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; } .map-svg .road-edge { fill: none; stroke: #e2d9c3; stroke-width: 9; stroke-linecap: round; }
.map-svg .contour { fill: none; stroke: #d9cfb6; stroke-width: 1.5; } .map-svg .label { font: 600 13px var(--font-body); fill: #8a8572; letter-spacing: .08em; text-transform: uppercase; }
[data-theme="dark"] .map-svg .water { fill: #12324a; } [data-theme="dark"] .map-svg .land { fill: #1f2a37; stroke: #2e3e55; }
[data-theme="dark"] .map-svg .park { fill: #1d3a2f; } [data-theme="dark"] .map-svg .road { stroke: #33445c; } [data-theme="dark"] .map-svg .road-edge { stroke: #263445; }
[data-theme="dark"] .map-svg .contour { stroke: #2b3a4d; } [data-theme="dark"] .map-svg .label { fill: #6d7f95; }
.map-svg .route { fill: none; stroke: var(--color-accent); stroke-width: 4; stroke-dasharray: 2 10; stroke-linecap: round; }
.pin { cursor: pointer; }
.pin circle { stroke: #fff; stroke-width: 3; transition: r 150ms ease; }
.pin text { font: 700 13px var(--font-display); fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.pin:hover circle, .pin.is-active circle { r: 19; }
.pin:focus-visible { outline: none; } .pin:focus-visible circle { stroke: var(--color-text); }
.map-info { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); max-width: 420px; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid oklch(from var(--color-text) l c h / 0.08); }
.map-info h4 { margin: 0 0 4px; font-family: var(--font-display); font-size: var(--text-base); }
.map-info p { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.stop-list { display: flex; flex-direction: column; gap: var(--space-2); }
.stop { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid oklch(from var(--color-text) l c h / 0.08); text-align: left; cursor: pointer; }
.stop:hover, .stop.is-active { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.stop-num { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 13px var(--font-display); color: #fff; }
.stop strong { display: block; font-size: var(--text-sm); color: var(--color-text); }
.stop small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }

/* Panels (cards) */
.panel { padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid oklch(from var(--color-text) l c h / 0.08); box-shadow: var(--shadow-sm); min-width: 0; }
.panel h2, .panel h3 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; color: var(--color-text); }
.panel-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }
.col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); line-height: 1.1; }
.stat span { font-size: var(--text-xs); color: var(--color-text-muted); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.vchart { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: var(--space-3); height: 240px; margin-top: var(--space-4); }
.vchart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--color-text-faint); text-align: right; transform: translateY(-6px); }
.vchart-plot { position: relative; display: flex; align-items: flex-end; gap: clamp(6px, 2vw, 22px); padding: 0 var(--space-2); border-bottom: 1px solid var(--color-border); background-image: linear-gradient(to bottom, var(--color-divider) 1px, transparent 1px); background-size: 100% 25%; }
.vchart-col { flex: 1; max-width: 64px; margin: 0 auto; height: 100%; display: flex; flex-direction: column-reverse; }
.vchart-col span { display: block; width: 100%; }
.vchart-col span:last-child { border-radius: 6px 6px 0 0; }
.vchart-x { grid-column: 2; display: flex; gap: clamp(6px, 2vw, 22px); padding: var(--space-2) var(--space-2) 0; }
.vchart-x span { flex: 1; max-width: 64px; margin: 0 auto; text-align: center; font-size: 12px; color: var(--color-text-muted); }
.split-row { display: grid; grid-template-columns: 120px 1fr 48px; align-items: center; gap: var(--space-3); min-height: 36px; font-size: var(--text-sm); }
.split-row b { text-align: right; font-size: var(--text-xs); color: var(--color-text-muted); }
.mini-list { display: flex; flex-direction: column; }
.mini-item { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
.mini-item:last-child { border-bottom: 0; }
.mini-item strong { display: block; font-size: var(--text-sm); color: var(--color-text); }
.mini-item small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.mini-item .grow { flex: 1; min-width: 0; }

/* Chat */
.chat { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.chat-thread { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); min-height: 420px; max-height: 62vh; overflow-y: auto; }
.msg { display: flex; gap: var(--space-3); align-items: flex-end; max-width: 80%; }
.msg .bubble { padding: var(--space-3) var(--space-4); border-radius: 18px 18px 18px 4px; background: var(--color-surface-offset); color: var(--color-text); font-size: var(--text-sm); line-height: 1.5; }
.msg .meta { display: block; margin-bottom: 4px; font-size: 11px; color: var(--color-text-muted); }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.me .bubble { background: var(--color-primary); color: var(--color-text-inverse); border-radius: 18px 18px 4px 18px; }
.msg.me .meta { text-align: right; }
.msg .avatar { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; }
.chat-compose { display: flex; gap: var(--space-2); padding: var(--space-4); border-top: 1px solid var(--color-divider); }
.chat-compose .input { border-radius: var(--radius-full); padding: 0 var(--space-4); }
.chat-day { align-self: center; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); }

/* Explore */
.dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); }
.dest-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid oklch(from var(--color-text) l c h / 0.08); box-shadow: var(--shadow-sm); text-align: left; cursor: pointer; transition: box-shadow var(--transition-interactive), transform var(--transition-interactive); }
.dest-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.dest-art { position: relative; height: 180px; background: var(--art); overflow: hidden; }
.dest-art svg.scene { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; }
.dest-body { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.dest-body h3 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-text); }
.dest-body p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.heart { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-full); color: var(--color-text-faint); cursor: pointer; transition: color var(--transition-interactive), background var(--transition-interactive); }
.heart:hover { background: var(--color-accent-highlight); color: var(--color-accent); }
.heart[aria-pressed="true"] { color: var(--color-accent); }
.heart[aria-pressed="true"] svg { fill: currentColor; }
.heart svg { width: 20px; height: 20px; }
.place-row { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.place-row:last-child { border-bottom: 0; }
.place-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary-highlight); color: var(--color-primary); }
.place-ico svg { width: 18px; height: 18px; }
.place-row .grow { flex: 1; min-width: 0; }
.place-row strong { display: block; font-size: var(--text-sm); color: var(--color-text); }
.place-row small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.fav-group { margin-bottom: var(--space-6); }
.fav-group h2 { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-lg); }
.empty-box { padding: var(--space-12) var(--space-6); text-align: center; border-radius: var(--radius-xl); border: 2px dashed var(--color-border); color: var(--color-text-muted); }
.empty-box h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); color: var(--color-text); }
.empty-box p { margin: 0 auto var(--space-5); max-width: 42ch; font-size: var(--text-sm); }

/* Drawer / modal / menus / toasts */
.scrim { position: fixed; inset: 0; z-index: 150; background: oklch(0.15 0.02 250 / 0.5); animation: tf-in 160ms ease both; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 151; display: flex; flex-direction: column; width: min(520px, 100vw); background: var(--color-surface); box-shadow: var(--shadow-lg); animation: tf-slide 240ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.modal { position: fixed; top: 50%; left: 50%; z-index: 151; display: flex; flex-direction: column; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); transform: translate(-50%, -50%); animation: tf-pop 200ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.p-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-divider); }
.p-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); }
.p-head p { margin: 4px 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.p-body { flex: 1; overflow-y: auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.p-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-divider); background: var(--color-surface-2); }
.p-foot .left { margin-right: auto; }
.drawer-art { height: 200px; margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; background: var(--art); position: relative; overflow: hidden; }
.drawer-art svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field .lbl { font-size: var(--text-xs); font-weight: 600; color: var(--color-text); }
.field .hint { font-size: 12px; color: var(--color-text-muted); }
.check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-sm); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--color-primary); }
.form-error { grid-column: 1 / -1; margin: 0; font-size: var(--text-xs); font-weight: 600; color: var(--color-error); }
.demo-note { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-primary-highlight); color: var(--color-text); font-size: var(--text-xs); line-height: 1.5; }
.demo-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.copy-row { display: flex; gap: var(--space-2); }
.copy-row .input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 140; min-width: 240px; padding: var(--space-2); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid oklch(from var(--color-text) l c h / 0.1); box-shadow: var(--shadow-lg); animation: tf-pop-sm 140ms ease both; }
.menu[hidden] { display: none; }
.menu-head { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-2); }
.menu-head strong { display: block; font-size: var(--text-sm); }
.menu-head small { font-size: var(--text-xs); color: var(--color-text-muted); }
.menu-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text); text-align: left; cursor: pointer; text-decoration: none; }
.menu-item:hover { background: var(--color-surface-offset); }
.menu-item svg { width: 18px; height: 18px; color: var(--color-text-muted); }
.toasts { position: fixed; left: 50%; bottom: var(--space-6); z-index: 200; display: flex; flex-direction: column; gap: var(--space-2); width: min(440px, calc(100vw - 24px)); transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-text); color: var(--color-bg); box-shadow: var(--shadow-lg); font-size: var(--text-sm); line-height: 1.45; animation: tf-up 220ms cubic-bezier(0.16, 1, 0.3, 1) both; pointer-events: auto; }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.toast.out { animation: tf-out 200ms ease both; }

/* Bottom nav (phones) */
.mobile-tab-bar { z-index: 120; }
.mobile-tab { text-decoration: none; min-width: 64px; font-size: 11px; }
.mobile-tab svg { width: 22px; height: 22px; }
.mobile-tab[aria-current="page"] { color: var(--color-primary); font-weight: 700; }

@keyframes tf-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tf-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tf-slide { from { transform: translateX(100%); } to { transform: none; } }
@keyframes tf-pop { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes tf-pop-sm { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes tf-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tf-out { to { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1023px) {
  .main-wrap { padding-bottom: 84px; }
  .toasts { top: calc(var(--lab-bar-h, 0px) + 78px); bottom: auto; }
  .map-layout, .chat { grid-template-columns: minmax(0, 1fr); }
  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .col-4, .col-5 { grid-column: span 6; } .col-7, .col-8 { grid-column: span 12; } .col-6 { grid-column: span 6; }
}
@media (max-width: 640px) {
  .page { padding-top: var(--space-6); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .p-head, .p-body, .p-foot { padding-left: var(--space-4); padding-right: var(--space-4); }
  .drawer-art { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); }
  .page-head .btn { flex: 1; }
  .banner-actions { width: 100%; }
  .banner-actions .btn { flex: 1; }
  .search-field { max-width: none; flex-basis: 100%; }
  .msg { max-width: 92%; }
  .timeline-item { grid-template-columns: 16px 1fr; gap: var(--space-3); }
  .timeline-item::before { left: 7px; }
  .split-row { grid-template-columns: 100px 1fr 44px; }
  .chat-thread { max-height: none; min-height: 300px; }
  .place-row { flex-wrap: wrap; }
  .place-row .grow { flex: 1 1 calc(100% - 110px); }
  .place-row .btn { order: 3; margin-left: 52px; }
}
@media print {
  .lab-bar, .topbar, .trip-tabs, .mobile-tab-bar, .sidebar, .card-actions, .add-activity-btn, .banner-actions, .invite-btn, .toasts, #layer, .day-tabs { display: none !important; }
  .content-area { display: block; }
  .day-panel--print { display: block !important; }
  body { background: #fff; }
}
@media (prefers-reduced-motion: reduce) { .view, .drawer, .modal, .menu, .toast, .scrim { animation: none; } }