/* =========================================================
   Lets Plan and Go — styling (3-pane: trips · itinerary · map)
   ========================================================= */
:root {
  --bg:#e9edf0; --surface:#ffffff; --surface-2:#f4f7f9; --ink:#1b2026; --muted:#6b7682;
  --line:#d7dee3; --line-soft:#e6ebee; --accent:#0e8f86; --accent-ink:#0a6760;
  --confirmed:#2f8f4e; --changed:#c98a16; --cancelled:#9aa4ad; --pending:#6b7682; --over:#c0492f;
  --shadow-sm:0 1px 2px rgba(27,32,38,.06),0 1px 3px rgba(27,32,38,.08);
  --shadow-md:0 6px 18px rgba(27,32,38,.10),0 2px 6px rgba(27,32,38,.06);
  --shadow-lg:0 18px 50px rgba(27,32,38,.22);
  --r-sm:8px; --r-md:12px; --r-lg:18px;
  --display:"Fraunces",Georgia,serif; --ui:"Archivo",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  --t-fast:120ms; --t-med:220ms; --t-slow:320ms; --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; height:100%; }
body{ font-family:var(--ui); background:var(--bg); color:var(--ink); font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* buttons */
.btn{ font-family:var(--ui); font-weight:600; font-size:14px; border:1px solid transparent; border-radius:var(--r-sm); padding:10px 16px; min-height:44px; transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:#fff; } .btn-primary:hover{ background:var(--accent-ink); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line); } .btn-ghost:hover{ background:var(--surface-2); }
.btn-danger{ background:transparent; color:var(--over); border-color:rgba(192,73,47,.35); } .btn-danger:hover{ background:rgba(192,73,47,.08); }
.ico{ display:inline-block; vertical-align:middle; flex:0 0 auto; }
.icon-btn{ background:transparent; border:none; color:var(--muted); font-size:20px; width:44px; height:44px; border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center; transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease); }
.icon-btn:hover{ background:var(--surface-2); color:var(--ink); }
.icon-btn-sm{ background:transparent; border:none; color:var(--muted); font-size:14px; width:30px; height:30px; border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center; }
.icon-btn-sm:hover{ background:var(--surface-2); color:var(--ink); }
.mini-btn{ background:transparent; border:1px solid var(--line); color:var(--accent-ink); font-size:12px; font-weight:600; border-radius:999px; padding:5px 10px; }
.mini-btn:hover{ background:var(--surface-2); }

/* PIN gate */
.pin-gate{ position:fixed; inset:0; background:radial-gradient(120% 100% at 50% 0%,#20323a 0%,#161b21 55%,#0f1318 100%); display:flex; align-items:center; justify-content:center; padding:24px; z-index:100; }
.pin-card{ background:var(--surface); border-radius:var(--r-lg); padding:36px 30px; width:100%; max-width:360px; text-align:center; box-shadow:var(--shadow-lg); animation:pin-in var(--t-slow) var(--ease); }
@keyframes pin-in{ from{opacity:0;transform:translateY(14px) scale(.98);} to{opacity:1;transform:none;} }
.pin-mark{ font-size:26px; color:var(--accent); letter-spacing:4px; margin-bottom:10px; }
.pin-title{ font-family:var(--display); font-weight:600; font-size:24px; line-height:1.15; }
.pin-sub{ color:var(--muted); font-size:14px; margin:8px 0 22px; }
.pin-input{ width:100%; font-family:var(--ui); font-size:16px; text-align:left; padding:13px 14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); color:var(--ink); transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease); }
.pin-input-code{ font-family:var(--mono); font-size:24px; letter-spacing:8px; text-align:center; padding:14px; }
.pin-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,143,134,.15); }
.pin-strong{ color:var(--ink); font-weight:600; }
.pin-btn{ width:100%; margin-top:16px; } .pin-btn+.pin-btn{ margin-top:8px; } .pin-error{ color:var(--over); font-size:13px; margin:12px 0 0; }

/* ===== APP GRID ===== */
.app{ display:flex; height:100vh; height:100dvh; overflow:hidden; }
.col{ min-height:0; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.col-left{ flex:0 0 300px; background:var(--surface); border-right:1px solid var(--line); }
.col-mid{ flex:1 1 0; background:var(--bg); border-right:1px solid var(--line); }
.col-right{ flex:1 1 0; position:relative; }

/* ===== LEFT: brand + trips + people ===== */
.brand{ display:flex; align-items:center; gap:9px; padding:calc(16px + var(--safe-top)) 16px 14px; border-bottom:1px solid var(--line-soft); }
.brand-mark{ color:var(--accent); font-size:18px; }
.brand-name{ font-family:var(--display); font-weight:600; font-size:18px; flex:1; }
/* dropdown panels — bannermaker look: white, soft shadow, rounded, icon+label rows */
.menu-pop{ position:absolute; background:var(--surface); border:1px solid var(--line-soft); border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.12); padding:6px; min-width:228px; z-index:45; display:flex; flex-direction:column; gap:2px; animation:pop-in var(--t-fast) var(--ease); }
.menu-pop-up{ left:12px; right:12px; bottom:calc(100% + 8px); transform-origin:bottom; }
@keyframes pop-in{ from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:none;} }
.menu-item{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:transparent; border:none; border-radius:8px; padding:10px 11px; font-size:13.5px; font-weight:500; color:var(--ink); cursor:pointer; transition:background var(--t-fast) var(--ease); }
.menu-item:hover{ background:var(--surface-2); }
.menu-item .ico{ color:var(--muted); }
.menu-item-danger{ color:var(--over); } .menu-item-danger .ico{ color:var(--over); }

/* active-user bar pinned to the bottom of the left column */
.side-foot{ position:relative; flex:0 0 auto; padding:10px 12px calc(12px + var(--safe-bottom)); border-top:1px solid var(--line-soft); }
.user-bar{ display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px; border:none; background:transparent; border-radius:10px; cursor:pointer; transition:background var(--t-fast) var(--ease); }
.user-bar:hover{ background:var(--surface-2); }
.user-avatar{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; overflow:hidden; }
.user-avatar img{ width:100%; height:100%; object-fit:cover; }
.user-name{ flex:1; min-width:0; text-align:left; font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-more{ flex:0 0 auto; color:var(--muted); display:inline-flex; }
/* PDF drag-and-drop zone at the top of the Add modal */
.dropzone{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; padding:18px 16px; margin:6px 0 2px; border:1.5px dashed var(--line); border-radius:var(--r-md); background:var(--surface-2); color:var(--muted); text-align:center; cursor:pointer; transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease); }
.dropzone:hover{ border-color:var(--accent); background:rgba(14,143,134,.05); }
.dropzone.is-drag{ border-color:var(--accent); background:rgba(14,143,134,.10); color:var(--accent-ink); }
.dropzone-ico{ width:26px; height:26px; color:var(--accent); margin-bottom:2px; }
.dropzone-title{ font-size:14px; font-weight:600; color:var(--ink); }
.dropzone-sub{ font-size:12px; }
.dropzone-or{ display:flex; align-items:center; text-align:center; color:var(--muted); font-size:12px; margin:12px 0 4px; }
.dropzone-or::before,.dropzone-or::after{ content:""; flex:1; height:1px; background:var(--line-soft); }
.dropzone-or span{ padding:0 10px; white-space:nowrap; }
.import-status{ font-size:13px; color:var(--muted); margin:0 2px 12px; }
/* PDF import loading: spinner + indeterminate progress bar */
.im-loading{ display:flex; align-items:center; gap:10px; color:var(--ink); font-size:14px; font-weight:500; }
.im-spin{ flex:0 0 auto; width:18px; height:18px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:im-spin .8s linear infinite; }
@keyframes im-spin{ to{ transform:rotate(360deg); } }
.im-bar{ margin-top:12px; height:4px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.im-bar>span{ display:block; height:100%; width:40%; border-radius:999px; background:var(--accent); animation:im-bar 1.1s ease-in-out infinite; }
@keyframes im-bar{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(360%); } }
.import-list{ display:flex; flex-direction:column; gap:14px; }
.import-card{ border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px 0; background:var(--surface-2); }
.import-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.import-card-head .im-name{ flex:1; min-width:0; font-family:var(--ui); font-weight:600; font-size:15px; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); }
.import-rm{ flex:0 0 auto; width:30px; height:30px; border:none; background:transparent; border-radius:var(--r-sm); color:var(--muted); font-size:15px; line-height:1; cursor:pointer; }
.import-rm:hover{ background:var(--line-soft); color:var(--over); }

.col-scroll{ flex:1; overflow-y:auto; padding:6px 14px calc(20px + var(--safe-bottom)); }
.side-section{ margin-top:16px; }
.col-head{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 8px; }
.col-head span{ font-family:var(--display); font-size:15px; font-weight:600; }
.side-hint{ font-size:12px; color:var(--muted); margin:0 2px 8px; }

.trips-list{ display:flex; flex-direction:column; gap:8px; }
.trip-card{ display:flex; align-items:center; gap:8px; width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; cursor:pointer; transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease); }
.trip-card:hover{ background:var(--surface-2); }
.trip-card.is-active{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(14,143,134,.16); background:var(--surface); }
.trip-card-info{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; text-align:left; }
.trip-card-name{ font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.trip-card-budget{ font-size:12px; color:var(--muted); }
.trip-card-menu{ flex:0 0 auto; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; border-radius:var(--r-sm); color:var(--muted); font-size:18px; line-height:1; cursor:pointer; }
.trip-card-menu:hover{ background:var(--line-soft); color:var(--ink); }
.trips-head-actions{ display:flex; align-items:center; gap:8px; }
.trip-filter{ font-family:var(--ui); font-size:12px; font-weight:600; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px 9px; cursor:pointer; }
.trip-menu{ position:fixed; min-width:160px; }

.people-list{ display:flex; flex-direction:column; gap:2px; }
.person-row{ display:flex; align-items:center; gap:6px; }
.person-check{ display:flex; align-items:center; gap:9px; flex:1; padding:7px 4px; cursor:pointer; min-height:40px; }
.person-check input{ width:18px; height:18px; accent-color:var(--accent); }
.person-dot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.person-name{ font-size:14px; } .person-name.is-out{ color:var(--muted); }
.person-check input:disabled{ cursor:default; }
.person-tag{ margin-left:2px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:var(--surface-2); border:1px solid var(--line-soft); border-radius:999px; padding:1px 6px; }
.make-owner-btn{ background:transparent; border:1px solid var(--line); color:var(--accent-ink); font-size:11px; font-weight:600; border-radius:999px; padding:3px 9px; white-space:nowrap; flex:0 0 auto; transition:background var(--t-fast) var(--ease); }
.make-owner-btn:hover{ background:var(--surface-2); }

/* ===== MIDDLE: header + summary + content ===== */
.trip-header{ display:flex; align-items:center; gap:12px; padding:calc(14px + var(--safe-top)) 18px 8px; }
.trip-header-main{ flex:1; min-width:0; }
.trip-title{ font-family:var(--display); font-weight:600; font-size:clamp(20px,3vw,26px); line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trip-meta{ display:flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; margin-top:2px; }
.trip-countdown{ color:var(--accent-ink); font-weight:600; } .dot-sep{ opacity:.5; }

.summary-bar{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; width:auto; margin:0 18px 14px; padding:0; }
.mode-pills{ position:relative; display:inline-flex; gap:4px; flex:0 0 auto; background:var(--surface); border-radius:999px; padding:4px; }
.cost-figures{ display:contents; }   /* its cb-seg/cb-bar children flow as items of the summary bar */
.pill-ind{ position:absolute; left:0; top:4px; height:34px; width:0; border-radius:999px; background:var(--accent); opacity:0; z-index:0; pointer-events:none; transition:transform var(--t-med) var(--ease),width var(--t-med) var(--ease); }
.pill{ position:relative; z-index:1; border:none; background:transparent; color:var(--muted); font-family:var(--ui); font-size:13px; font-weight:600; padding:7px 15px; min-height:34px; border-radius:999px; cursor:pointer; transition:color var(--t-fast) var(--ease); }
.pill:hover{ color:var(--ink); }
.pill.is-active,.pill.is-active:hover{ color:#fff; }   /* the green is the sliding .pill-ind behind it */
.pill-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; margin-left:5px; border-radius:999px; background:var(--over); color:#fff; font-size:10px; font-weight:700; line-height:1; vertical-align:middle; }
.cb-seg{ display:flex; flex-direction:column; gap:1px; }
.cb-label{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.cb-val{ font-family:var(--mono); font-weight:600; font-size:16px; } .cb-val.is-over{ color:var(--over); }
.cb-bar{ flex:1; min-width:70px; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line-soft); }
.cb-fill{ display:block; height:100%; background:var(--accent); transition:width var(--t-slow) var(--ease); } .cb-fill.is-over{ background:var(--over); }

.mid-scroll{ flex:1; overflow-y:auto; padding:0 18px calc(110px + var(--safe-bottom)); }
/* fade each view's content in whenever it becomes the visible pane (plays regardless of OS reduced-motion — gentle UI motion is fine) */
@keyframes midFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.mid-pane:not([hidden]){ animation:midFade var(--t-med) var(--ease) both; }

/* ===== ITINERARY ===== */
.next-stop{ background:linear-gradient(135deg,#15323a,#1c4a47); color:#eaf4f2; border-radius:var(--r-lg); padding:16px 18px; margin:6px 0 18px; box-shadow:var(--shadow-md); }
.next-stop-label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#8fc6bf; }
.next-stop-name{ font-family:var(--display); font-size:22px; font-weight:600; margin-top:2px; }
.next-stop-meta{ font-size:13px; color:#b8d6d1; margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; } .next-stop-meta .num{ color:#eaf4f2; }

.itin-card{ position:relative; background:var(--surface); border-radius:var(--r-md); padding:14px 16px; margin-bottom:12px; transition:background var(--t-fast) var(--ease); }
.itin-card:hover{ background:var(--surface-2); }
.itin-card.is-active-day{ background:rgba(14,143,134,.07); }
.itin-card.is-cancelled{ opacity:.6; } .itin-card.is-cancelled .itin-name{ text-decoration:line-through; color:var(--muted); }
.itin-daynum{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; font-weight:600; background:var(--surface-2); color:var(--ink); }
.itin-card.is-active-day .itin-daynum{ background:var(--accent); color:#fff; border-color:var(--accent); }
.itin-daynum-empty{ background:transparent; border-style:dashed; }
.itin-daynum-stop{ background:transparent; border-color:var(--accent); color:var(--accent); font-size:12px; }
.itin-card.is-stop{ border-left:3px solid var(--accent); }
.itin-card.is-stop .itin-name{ font-size:16px; }
.itin-head{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:transparent; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; }
.itin-main{ flex:1; min-width:0; }                               /* name block fills the row */
.itin-top-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }   /* date + badge, vertically centred */
.itin-place{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); letter-spacing:.03em; text-transform:uppercase; }
.itin-type-ico{ color:var(--accent); flex:0 0 auto; }
.itin-name{ font-family:var(--display); font-size:18px; font-weight:600; line-height:1.2; margin-top:1px; }
.itin-flag{ margin-top:6px; font-size:13px; }
.itin-dates{ font-family:var(--mono); font-size:13px; color:var(--muted); white-space:nowrap; }
.itin-expand{ overflow:hidden; height:0; opacity:0; padding-left:44px; }
.itin-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; padding-top:12px; border-top:1px solid var(--line-soft); margin-top:12px; }
.itin-detail-grid .kv-label{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.itin-detail-grid .kv-val{ font-size:14px; }
.itin-quick{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.itin-detail-link{ display:inline-flex; align-items:center; background:none; border:none; padding:0 4px; color:var(--accent-ink); font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; }
.itin-detail-link:hover{ text-decoration:underline; }
.itin-nav{ margin-left:auto; display:flex; gap:6px; }
.nav-btn{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); transition:background var(--t-fast) var(--ease); }
.nav-btn:hover{ background:var(--surface-2); } .nav-btn img,.nav-btn svg{ width:22px; height:22px; display:block; }

/* combined stop (two separate bookings shown as one) */
.btn-sm{ padding:5px 10px; font-size:13px; }
.itin-bk-badge{ display:inline-block; vertical-align:middle; margin-left:6px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--accent-ink); background:rgba(14,143,134,.12); border-radius:999px; padding:1px 8px; }
.badge-combined{ color:var(--accent-ink); background:rgba(14,143,134,.12); }
.itin-group-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:12px; margin-top:12px; border-top:1px solid var(--line-soft); font-size:15px; font-weight:600; }
.itin-group-total .kv-label{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; }
.itin-bookings{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.itin-bk{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--surface-2); }
.itin-bk.is-cancelled{ opacity:.62; } .itin-bk.is-cancelled .itin-bk-name{ text-decoration:line-through; }
.itin-bk-info{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.itin-bk-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.itin-bk-name{ font-weight:600; font-size:14px; }
.itin-bk-meta{ font-size:12px; color:var(--muted); }
.itin-bk-actions{ display:flex; gap:6px; flex-wrap:wrap; }

/* combine picker */
.combine-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.combine-opt{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; }
.combine-opt:hover{ background:var(--surface-2); }
.combine-opt input{ flex:0 0 auto; }
.combine-opt-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.combine-opt-name{ font-weight:600; font-size:14px; }
.combine-opt-meta{ font-size:12px; color:var(--muted); }

/* hide-cancelled toggle */
.itin-controls{ display:flex; align-items:center; gap:12px; margin:0 0 12px; }
.itin-controls .switch{ margin-left:auto; }   /* hide-cancelled stays right; type filter sits left */
.itin-type-filter{ font-family:var(--ui); font-size:12px; font-weight:600; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px 10px; cursor:pointer; }
.switch{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch-label{ font-size:13px; color:var(--muted); font-weight:600; }
.switch-track{ position:relative; width:38px; height:22px; border-radius:999px; background:var(--line); transition:background var(--t-fast) var(--ease); flex:0 0 auto; }
.switch-thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--t-fast) var(--ease); }
.switch input:checked + .switch-track{ background:var(--accent); }
.switch input:checked + .switch-track .switch-thumb{ transform:translateX(16px); }
.switch input:focus-visible + .switch-track{ box-shadow:0 0 0 3px rgba(14,143,134,.25); }

/* inline route legs between itinerary stops + total */
.leg-connector{ position:relative; display:flex; align-items:center; padding-left:56px; margin:-2px 0 10px; min-height:22px; }
.leg-connector::before{ content:""; position:absolute; left:28px; top:-8px; bottom:-8px; width:2px; background:var(--accent); opacity:.35; }
.leg-text{ font-size:12px; color:var(--muted); font-weight:600; }
.leg-total{ display:flex; justify-content:space-between; align-items:center; margin-top:2px; padding:13px 16px; }
.leg-total-label{ font-family:var(--display); font-weight:600; font-size:15px; }
.leg-total-val{ font-family:var(--mono); font-weight:600; }

/* badges */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; letter-spacing:.02em; padding:3px 9px; border-radius:999px; text-transform:capitalize; }
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge-confirmed{ color:var(--confirmed); background:rgba(47,143,78,.12); }
.badge-changed{ color:var(--changed); background:rgba(201,138,22,.14); }
.badge-cancelled{ color:var(--cancelled); background:rgba(154,164,173,.18); }
.badge-pending{ color:var(--pending); background:rgba(107,118,130,.14); }
.cancel-warn{ color:var(--over); font-weight:600; } .cancel-soon{ color:var(--changed); font-weight:600; }

/* ===== CANCELLATION-DEADLINE ALERTS (banner) ===== */
.cancel-alerts{ margin:0 0 16px; border:1px solid rgba(201,138,22,.4); border-radius:var(--r-md); background:rgba(201,138,22,.08); padding:11px 13px; animation:pop-in var(--t-med) var(--ease); }
.ca-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ca-ico{ font-size:15px; line-height:1; }
.ca-title{ font-size:13px; font-weight:700; color:var(--changed); text-transform:uppercase; letter-spacing:.03em; }
.ca-list{ display:flex; flex-direction:column; gap:6px; }
.ca-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:9px 11px; color:inherit; transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease); }
.ca-item:hover{ background:var(--surface-2); border-color:var(--line); }
.ca-item:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--accent); }
.ca-name{ font-weight:600; font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ca-loc{ color:var(--muted); font-weight:500; }
.ca-when{ flex:0 0 auto; font-size:12px; font-weight:600; color:var(--changed); background:rgba(201,138,22,.14); border-radius:999px; padding:3px 9px; }
.ca-item.is-soon .ca-when{ color:var(--over); background:rgba(192,73,47,.12); }
.ca-item.is-today .ca-when{ color:#fff; background:var(--over); }

/* ===== SETTINGS ===== */
.settings-who{ font-size:13px; color:var(--muted); margin:0 0 16px; }
.settings-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 0; }
.settings-row-text{ min-width:0; }
.settings-row-title{ font-weight:600; font-size:15px; }
.settings-row-sub{ font-size:13px; color:var(--muted); margin-top:3px; line-height:1.4; }
.settings-row .switch{ flex:0 0 auto; margin-top:2px; }
.settings-row + .settings-row{ border-top:1px solid var(--line-soft); }

/* ===== ACTIVITY (trip change feed) ===== */
.icon-btn-badge{ position:relative; }
.icon-btn-badge svg{ width:20px; height:20px; }
.activity-badge{ position:absolute; top:5px; right:5px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--over); color:#fff; font-family:var(--ui); font-size:10px; font-weight:700; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--surface); }
.activity-list{ display:flex; flex-direction:column; }
.act-item{ padding:11px 4px; border-bottom:1px solid var(--line-soft); }
.act-item:last-child{ border-bottom:none; }
.act-item.is-new{ position:relative; }
.act-item.is-new::before{ content:""; position:absolute; left:-4px; top:16px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.act-top{ display:flex; align-items:baseline; gap:8px; font-size:14px; }
.act-top .act-actor{ font-weight:700; }
.act-top .act-obj{ font-weight:600; }
.act-time{ margin-left:auto; flex:0 0 auto; font-size:12px; color:var(--muted); }
.act-diff{ display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:6px; }
.act-field{ font-size:12.5px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line-soft); border-radius:999px; padding:2px 9px; }
.act-flabel{ color:var(--muted); font-weight:600; }
.act-empty{ color:var(--muted); }

/* ===== CHECKLIST ===== */
.todo-pane{ padding-top:4px; }
/* Fill the width with deliberate column counts. On desktop the left trips column
   (300px) is fixed and the map collapses here, so the mid pane ≈ viewport − 300. */
/* tidy grid: sections flow in rows, 1–4 across depending on the available width */
.todo-cols{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); align-items:start; }
.todo-cols .todo-group{ margin-bottom:0; }   /* grid gap handles spacing */
.todo-top{ margin:4px 0 16px; }
.todo-progress-row{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; }
.todo-progress-label{ font-size:13px; font-weight:600; color:var(--muted); }
.todo-progress-pct{ font-size:13px; font-weight:700; color:var(--accent-ink); }
.todo-bar{ height:8px; border-radius:999px; background:var(--line-soft); overflow:hidden; }
.todo-bar-fill{ display:block; height:100%; background:var(--accent); border-radius:999px; transition:width var(--t-med) var(--ease); }
.todo-group{ background:var(--surface); border-radius:var(--r-md); padding:13px 14px; margin-bottom:18px; }
.todo-group-head{ display:flex; align-items:baseline; justify-content:space-between; margin:0 0 8px; }
.todo-group-title{ display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-size:16px; font-weight:600; }
.todo-group-ico{ width:17px; height:17px; flex:0 0 auto; color:var(--accent); }
.todo-group-count{ font-size:12px; color:var(--muted); }
.todo-items{ display:flex; flex-direction:column; margin-bottom:8px; }
.todo-item{ position:relative; display:flex; align-items:center; gap:10px; padding:9px 6px; transition:background var(--t-fast) var(--ease); }
.todo-item + .todo-item{ border-top:1px solid var(--line-soft); }   /* divider between items */
.todo-item:hover{ background:var(--surface-2); }
.todo-check-wrap{ position:relative; display:inline-flex; flex:0 0 auto; cursor:pointer; }
.todo-cb{ position:absolute; inset:0; opacity:0; width:20px; height:20px; margin:0; cursor:pointer; }
.todo-check{ width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease); }
.todo-cb:checked + .todo-check{ background:var(--accent); border-color:var(--accent); }
.todo-cb:checked + .todo-check::after{ content:""; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg); }
.todo-cb:focus-visible + .todo-check{ box-shadow:0 0 0 3px rgba(14,143,134,.25); }
.todo-textwrap{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.todo-text{ font-size:14px; line-height:1.25; overflow-wrap:anywhere; }
.todo-remind{ font-size:11px; font-weight:600; color:var(--accent-ink); }
.todo-item.is-done .todo-text{ color:var(--muted); text-decoration:line-through; }
.todo-item.is-done .todo-remind{ opacity:.5; }
.todo-assignee{ flex:0 0 auto; background:transparent; border:none; padding:2px; border-radius:50%; display:inline-flex; cursor:pointer; transition:margin-right var(--t-fast) var(--ease); }
.todo-item:hover .todo-assignee{ margin-right:26px; }   /* make room for the × in the corner */
.todo-ava{ width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
.todo-ava-empty{ border:1.5px dashed var(--line); background:transparent; }
.todo-assignee:not(.is-assigned):hover .todo-ava-empty{ border-color:var(--accent); }
.todo-assignee:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(14,143,134,.25); }
.todo-del{ position:absolute; top:50%; right:4px; transform:translateY(-50%); background:transparent; border:none; color:var(--muted); font-size:13px; width:24px; height:24px; border-radius:var(--r-sm); opacity:0; pointer-events:none; transition:opacity var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease); }
.todo-item:hover .todo-del,.todo-del:focus-visible{ opacity:1; pointer-events:auto; }
.todo-del:hover{ background:var(--line-soft); color:var(--over); }
.todo-suggest-toggle{ display:flex; align-items:center; gap:5px; width:100%; margin-top:9px; padding:2px 0; background:transparent; border:none; color:var(--accent-ink); font-family:var(--ui); font-size:12.5px; font-weight:600; cursor:pointer; }
.todo-suggest-toggle:hover{ color:var(--accent); }
.todo-suggest-chev{ display:inline-block; font-size:11px; transition:transform var(--t-fast) var(--ease); }
.todo-suggest-toggle.is-open .todo-suggest-chev{ transform:rotate(180deg); }
.todo-suggest{ overflow:hidden; }   /* height animated by animateExpand */
.todo-suggest-inner{ display:flex; flex-wrap:wrap; gap:6px; padding-top:9px; }
.todo-chip{ background:var(--surface-2); border:1px solid var(--line-soft); color:var(--accent-ink); font-size:12.5px; font-weight:600; border-radius:999px; padding:4px 11px; transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease); }
.todo-chip:hover{ background:var(--surface); border-color:var(--accent); }
.todo-chip:active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.todo-chip:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(14,143,134,.25); }
.todo-add{ display:flex; gap:6px; margin:0; }
.todo-add-input{ flex:1; min-width:0; font-family:var(--ui); font-size:13px; padding:8px 11px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); }
.todo-add-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,143,134,.12); }
.todo-add-btn{ flex:0 0 auto; width:36px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--accent-ink); font-size:18px; font-weight:600; line-height:1; }
.todo-add-btn:hover{ background:var(--surface-2); }
@media (hover:none){ .todo-del{ opacity:.7; pointer-events:auto; } .todo-assignee{ margin-right:26px; } }

/* ===== TRIP INFO ("Before you go" card atop the Checklist) ===== */
/* checklist splits into the section list (main) + the trip-info panel (right) */
.todo-layout{ display:flex; gap:24px; align-items:flex-start; }
.todo-main{ flex:1 1 0; min-width:0; }
.todo-side{ flex:0 0 318px; }
@media (max-width:1023px){ .todo-layout{ flex-direction:column; } .todo-side{ flex:none; width:100%; max-width:560px; order:2; } }

.trip-info{ margin:0; }
.ti-head{ font-family:var(--display); font-weight:600; font-size:15px; color:var(--ink); margin:0 2px 10px; }
.ti-countries{ display:flex; flex-direction:column; gap:10px; }
/* each country is an accordion: always-visible header + collapsible facts; one stays open */
.ti-country{ background:var(--surface); border-radius:var(--r-md); overflow:hidden; }
.ti-c-head{ display:flex; align-items:center; gap:9px; width:100%; background:transparent; border:none; cursor:pointer; padding:11px 13px; text-align:left; font-family:var(--ui); }
.ti-flag{ font-size:20px; line-height:1; flex:0 0 auto; }
.ti-c-name{ font-weight:700; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ti-temp-wrap{ margin-left:auto; flex:0 0 auto; }
.ti-temp{ font-weight:700; font-size:14px; color:var(--accent-ink); }
.ti-w-load,.ti-w-na{ font-size:12px; color:var(--muted); }
.ti-chev{ flex:0 0 auto; color:var(--muted); display:inline-flex; transition:transform var(--t-fast) var(--ease); }
.ti-country.is-open .ti-chev{ transform:rotate(180deg); }
.ti-body{ overflow:hidden; }
.ti-facts{ display:flex; flex-direction:column; padding:0 13px 12px; }
.ti-fact{ display:flex; justify-content:space-between; gap:14px; font-size:12.5px; line-height:1.35; padding:7px 0; border-top:1px solid var(--line-soft); }
.ti-fact:first-child{ border-top:none; padding-top:0; }
.ti-fact-l{ color:var(--muted); flex:0 0 auto; }
.ti-fact-v{ color:var(--ink); text-align:right; overflow-wrap:anywhere; }

/* ===== NOTES (per-trip messenger) ===== */
/* fill the scroller so the composer rides the bottom; cap the column width on desktop */
.notes-pane{ display:flex; flex-direction:column; min-height:100%; padding-top:2px; }
.app[data-view="notes"] .mid-scroll{ padding-bottom:0; }
.notes-thread{ flex:1 0 auto; display:flex; flex-direction:column; gap:14px; padding-bottom:10px; }
.notes-empty{ color:var(--muted); font-size:13.5px; padding:14px 2px; }
.note-thread{ background:var(--surface); border-radius:var(--r-md); padding:12px 13px; }
.note{ position:relative; display:flex; gap:10px; }
.note-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; margin-top:5px; }
.note-body{ flex:1; min-width:0; }
.note-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.note-author{ font-size:13px; font-weight:700; color:var(--ink); }
.note-time{ font-size:11.5px; color:var(--muted); }
.note-del{ margin-left:auto; border:none; background:transparent; color:var(--muted); font-size:13px; line-height:1; cursor:pointer; opacity:0; transition:opacity var(--t-fast) var(--ease),color var(--t-fast) var(--ease); padding:2px 5px; border-radius:6px; }
.note:hover .note-del{ opacity:1; } .note-del:hover{ color:var(--over); background:var(--surface-2); }
.note-text{ font-size:13.5px; line-height:1.45; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; margin-top:2px; }
.note-mention{ color:var(--accent-ink); font-weight:600; }
.note-mention.is-you{ background:rgba(14,143,134,.14); border-radius:5px; padding:0 3px; }
.note.is-pending{ opacity:.55; }
.note-replies{ margin:10px 0 0 19px; padding-left:12px; border-left:2px solid var(--line-soft); display:flex; flex-direction:column; gap:11px; }
.note-thread-foot{ margin:8px 0 0 19px; }
.note-reply-btn{ border:none; background:transparent; color:var(--accent-ink); font-family:var(--ui); font-size:12px; font-weight:600; cursor:pointer; padding:2px 0; }
.note-reply-btn:hover{ text-decoration:underline; }
.note-reply-form{ display:flex; gap:6px; margin:9px 0 0 19px; }
.note-reply-input{ flex:1; min-width:0; font-family:var(--ui); font-size:13px; padding:8px 11px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); }
.note-reply-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,143,134,.12); }
.note-reply-send{ flex:0 0 auto; padding:6px 14px; }
@media (hover:none){ .note-del{ opacity:.7; } }

/* composer pinned to the bottom; send button lives inside the field */
.note-composer{ position:sticky; bottom:0; z-index:5; padding:14px 0 calc(12px + var(--safe-bottom));
  background:linear-gradient(to top, var(--bg) 0%, var(--bg) 72%, transparent 100%); }
.note-field{ position:relative; display:flex; align-items:flex-end; gap:6px; background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:5px 5px 5px 14px; transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease); }
.note-field:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,143,134,.12); }
.note-input{ flex:1; min-width:0; resize:none; border:none; outline:none; background:transparent; font-family:var(--ui); font-size:14px; line-height:1.45; color:var(--ink); padding:7px 0; max-height:150px; overflow-y:auto; }
.note-send{ flex:0 0 auto; width:34px; height:34px; border:none; border-radius:50%; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease); }
.note-send:hover{ background:var(--accent-ink); } .note-send:active{ transform:scale(.92); }
/* #mention type-ahead, floated just above the field */
.note-mention-pop{ position:absolute; left:0; right:0; bottom:100%; margin-bottom:8px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:5px; z-index:10; max-height:220px; overflow-y:auto; }
.note-mention-opt{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:transparent; font-family:var(--ui); font-size:13px; font-weight:600; color:var(--ink); padding:7px 9px; border-radius:8px; cursor:pointer; }
.note-mention-opt:hover,.note-mention-opt.is-active{ background:var(--surface-2); }
.note-chip-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
@media (min-width:760px){ #mid-notes{ max-width:50%; } }

/* ===== COSTS ===== */
.cost-cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1px; margin:6px 0 16px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; }
.cost-cat{ background:var(--surface); padding:12px 14px; border:none; width:100%; text-align:left; color:inherit; cursor:pointer; transition:background var(--t-fast) var(--ease); }
.cost-cat:hover{ background:var(--surface-2); } .cost-cat:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--accent); }
.cost-cat-name{ display:block; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.cost-cat-val{ display:block; font-family:var(--mono); font-size:17px; font-weight:600; margin-top:3px; }
.ledger-group{ margin-top:20px; }
.ledger-group-title{ font-family:var(--display); font-size:16px; font-weight:600; margin:0 2px 8px; display:flex; justify-content:space-between; align-items:baseline; }
.ledger-group-sum{ font-family:var(--mono); font-size:14px; color:var(--muted); }
.ledger-scroll{ overflow-x:auto; }   /* narrow panes scroll rather than crushing the columns */
.ledger-table{ width:100%; min-width:680px; table-layout:fixed; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
/* Fixed per-column widths (by class, so column order never matters); Name is the only flexible column. */
.ledger-table .lr-w-d{ width:84px; } .ledger-table .lr-w-c{ width:62px; } .ledger-table .lr-w-p{ width:74px; }
.ledger-table .lr-w-v{ width:84px; } .ledger-table .lr-w-f{ width:82px; } .ledger-table .lr-w-ch{ width:104px; } .ledger-table .lr-w-s{ width:116px; }   /* fits the widest status badge */
.ledger-table td:not(.lr-namecell){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ledger-table th{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.ledger-table th.r,.ledger-table td.r{ text-align:right; }
.ledger-table td{ padding:11px 12px; border-bottom:1px solid var(--line-soft); font-size:14px; vertical-align:middle; }
.ledger-table tr:last-child td{ border-bottom:none; }
.ledger-row{ cursor:pointer; transition:background var(--t-fast) var(--ease); } .ledger-row:hover{ background:var(--surface-2); }
.ledger-row.is-cancelled td{ color:var(--muted); } .ledger-row.is-cancelled .lr-name{ text-decoration:line-through; }
.lr-name{ font-weight:600; } .lr-cost{ font-family:var(--mono); font-weight:600; } .lr-sub{ font-size:12px; color:var(--muted); }
.ledger-link{ color:var(--accent-ink); text-decoration:none; } .ledger-link:hover{ text-decoration:underline; }

/* ===== MAP ===== */
.map{ position:absolute; inset:0; }
.map-overlay{ position:absolute; top:12px; left:12px; right:64px; display:flex; justify-content:center; pointer-events:none; z-index:5; }
.map-style{ position:absolute; top:12px; right:12px; z-index:6; }
.map-style-btn{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-md); color:var(--ink); cursor:pointer; transition:background var(--t-fast) var(--ease); }
.map-style-btn:hover{ background:var(--surface-2); } .map-style-btn svg{ width:20px; height:20px; }
.map-style-menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:148px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-md); padding:6px; display:flex; flex-direction:column; gap:2px;
  opacity:0; transform:translateY(-6px); visibility:hidden; transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),visibility 0s linear var(--t-fast); }
.map-style-menu.is-open{ opacity:1; transform:none; visibility:visible; transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease); }
.map-style-opt{ text-align:left; background:transparent; border:none; border-radius:var(--r-sm); padding:9px 12px; font-family:var(--ui); font-size:14px; color:var(--ink); cursor:pointer; white-space:nowrap; }
.map-style-opt:hover{ background:var(--surface-2); } .map-style-opt.is-active{ background:var(--accent); color:#fff; font-weight:600; }
.map-search{ position:relative; width:min(420px,100%); pointer-events:auto; }
.map-search-input{ width:100%; height:46px; border:1px solid var(--line); border-radius:999px; padding:0 18px; font-family:var(--ui); font-size:15px; color:var(--ink); background:var(--surface); box-shadow:var(--shadow-md); }
.map-search-input::placeholder{ color:var(--muted); }
.map-search-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,143,134,.15),var(--shadow-md); }
.map-search-results{ position:absolute; left:0; right:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-md); overflow-y:auto; max-height:50vh; }
.mb-pin-search{ background:var(--accent); }
.mb-popup-add{ width:100%; min-height:38px; margin-top:8px; padding:8px 12px; }
.route-panel{ position:absolute; left:12px; right:12px; bottom:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-md); max-height:42%; overflow-y:auto; z-index:5; padding:12px 14px; }
.route-total{ display:flex; justify-content:space-between; align-items:baseline; padding-bottom:8px; border-bottom:1px solid var(--line-soft); margin-bottom:8px; }
.route-total-label{ font-family:var(--display); font-weight:600; font-size:15px; } .route-total-val{ font-family:var(--mono); font-weight:600; }
.route-leg{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:6px 0; font-size:13px; }
.route-leg-day{ color:var(--muted); font-family:var(--mono); font-size:12px; } .route-leg-path{ flex:1; min-width:0; } .route-leg-stat{ font-family:var(--mono); color:var(--muted); white-space:nowrap; }
.route-empty{ color:var(--muted); font-size:13px; text-align:center; padding:8px; }
.mb-pin{ width:22px; height:22px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:2px solid #fff; box-shadow:var(--shadow-sm); cursor:pointer; }
.mb-pin.s-confirmed{ background:var(--confirmed); } .mb-pin.s-changed{ background:var(--changed); }
.mb-pin.s-cancelled{ background:var(--cancelled); width:16px; height:16px; opacity:.65; } .mb-pin.s-pending{ background:var(--pending); }
.mapboxgl-popup-content{ font-family:var(--ui); border-radius:var(--r-md); padding:10px 13px; box-shadow:var(--shadow-md); }
.mb-popup-name{ font-family:var(--display); font-weight:600; font-size:15px; }
.mb-popup-meta{ font-size:12px; color:var(--muted); margin-top:2px; } .mb-popup-meta .num{ color:var(--ink); }

/* ===== FAB ===== */
.add-fab{ position:fixed; right:20px; bottom:calc(20px + var(--safe-bottom)); z-index:35; width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff; border:none; font-size:28px; line-height:1; box-shadow:var(--shadow-lg); transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease); }
.add-fab:hover{ background:var(--accent-ink); } .add-fab:active{ transform:scale(.94); }
.app[data-view="todo"] .add-fab,
.app[data-view="notes"] .add-fab{ display:none; }   /* checklist + notes have their own inputs */
/* Costs + Checklist don't need the map — collapse it so the middle pane fills the width (deterministic, no JS animation to glitch). */
@media (min-width:760px){ .app[data-view="costs"] .col-right, .app[data-view="todo"] .col-right, .app[data-view="notes"] .col-right{ display:none; } }

/* ===== DETAIL PANEL ===== */
.detail-panel{ position:fixed; top:0; right:0; bottom:0; z-index:60; width:min(420px,92vw); background:var(--surface); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform var(--t-med) var(--ease), visibility 0s linear var(--t-med); overflow-y:auto; visibility:hidden; }
.detail-panel.is-open{ transform:translateX(0); visibility:visible; transition:transform var(--t-med) var(--ease), visibility 0s; }
.detail-body{ padding:calc(20px + var(--safe-top)) 22px calc(28px + var(--safe-bottom)); }
.detail-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.detail-place{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.detail-name{ font-family:var(--display); font-size:24px; font-weight:600; line-height:1.12; margin-top:2px; } .detail-name.is-cancelled{ text-decoration:line-through; color:var(--muted); }
.detail-hero{ display:flex; align-items:baseline; gap:12px; margin:12px 0 4px; }
.detail-cost{ font-family:var(--mono); font-size:26px; font-weight:600; } .detail-dates{ font-family:var(--mono); color:var(--muted); font-size:14px; }
.detail-kv{ display:grid; grid-template-columns:110px 1fr; gap:9px 14px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }
.detail-kv dt{ font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); } .detail-kv dd{ margin:0; font-size:14px; } .detail-kv dd.num{ font-family:var(--mono); } .detail-kv a{ color:var(--accent-ink); word-break:break-word; }
.detail-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px; }
.detail-actions .btn{ width:100%; justify-content:center; display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
.detail-edit-row{ display:flex; gap:8px; margin-top:10px; } .detail-edit-row .btn{ flex:1; }
.nearby{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line-soft); }
.nearby-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.nearby-head>span{ font-family:var(--display); font-weight:600; font-size:16px; }
.nearby-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.nearby-chip{ border:1px solid var(--line); background:transparent; color:var(--muted); font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; cursor:pointer; transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease); }
.nearby-chip:hover{ color:var(--ink); }
.nearby-chip.is-active,.nearby-chip.is-active:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.nearby-list{ display:flex; flex-direction:column; gap:2px; }
.nearby-item{ display:flex; align-items:center; gap:6px; }
.nearby-go{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; text-align:left; background:transparent; border:none; border-radius:var(--r-sm); padding:8px 10px; cursor:pointer; transition:background var(--t-fast) var(--ease); }
.nearby-go:hover{ background:var(--surface-2); }
.nearby-name{ font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nearby-sub{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nearby-rating{ color:var(--changed); font-weight:600; } .nearby-price{ color:var(--muted); }
.nearby-reviews{ color:var(--muted); font-weight:500; }
.nearby-open{ font-weight:600; } .nearby-open.is-open{ color:var(--changed); } .nearby-open.is-closed{ color:var(--muted); }
.nearby-link{ flex:0 0 auto; color:var(--accent-ink); text-decoration:none; font-size:15px; padding:6px 8px; border-radius:var(--r-sm); }
.nearby-link:hover{ background:var(--surface-2); }
.nearby-loading{ font-size:13px; color:var(--muted); padding:8px 2px; }
.nearby-attrib{ display:flex; align-items:center; padding:8px 2px 0; margin-top:6px; border-top:1px solid var(--line-soft); }
.nearby-attrib .g-attrib{ font-size:11px; color:var(--muted); white-space:nowrap; letter-spacing:.02em; }
.nearby-thumb{ flex:0 0 auto; width:52px; height:52px; padding:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2); cursor:pointer; }
.nearby-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
/* photo lightbox */
.photo-lb{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(15,20,22,.82); cursor:zoom-out; opacity:0; transition:opacity var(--t-med) var(--ease); }
.photo-lb.is-open{ opacity:1; }
.photo-lb-box{ max-width:min(92vw,860px); display:flex; flex-direction:column; gap:10px; align-items:center; }
.photo-lb-box img{ max-width:100%; max-height:80vh; border-radius:var(--r-md); box-shadow:var(--shadow-lg); background:var(--surface-2); object-fit:contain; }
.photo-lb-cap{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; color:#fff; font-size:13px; }
.photo-lb-name{ font-weight:600; } .photo-lb-credit{ color:rgba(255,255,255,.7); } .photo-lb-credit a{ color:rgba(255,255,255,.92); }

/* ===== MODALS ===== */
.modal{ position:fixed; inset:0; z-index:70; display:flex; align-items:flex-end; justify-content:center; visibility:hidden; transition:visibility 0s linear var(--t-med); }
.modal.is-open{ visibility:visible; transition-delay:0s; }
.modal-card{ background:var(--surface); width:100%; max-width:560px; max-height:92vh; border-radius:var(--r-lg) var(--r-lg) 0 0; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); transform:translateY(100%); transition:transform var(--t-med) var(--ease); }
.modal-card-sm{ max-width:440px; }
.modal.is-open .modal-card{ transform:translateY(0); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 8px; }
.modal-title{ font-family:var(--display); font-size:20px; font-weight:600; }
.modal-scroll{ overflow-y:auto; padding:8px 18px 18px; -webkit-overflow-scrolling:touch; }
.modal-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px calc(14px + var(--safe-bottom)); border-top:1px solid var(--line-soft); background:var(--surface); }
.modal-foot-right{ display:flex; gap:10px; margin-left:auto; }
/* confirm dialog: sits above any open modal it's launched from */
.modal-confirm{ z-index:80; }
.confirm-body{ font-size:14.5px; line-height:1.5; color:var(--ink); white-space:pre-line; }
.field{ display:block; margin-bottom:14px; }
.field-label{ display:block; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:5px; }
.field input,.field select,.field textarea{ width:100%; font-family:var(--ui); font-size:16px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 12px; min-height:46px; transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,143,134,.13); }
.field textarea{ resize:vertical; min-height:70px; } .field input[type="number"]{ font-family:var(--mono); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .field-row .field{ margin-bottom:14px; }
/* when one field in a 2-col row is type-hidden, let the remaining field take the full width */
.field-row:has(> .field[hidden]){ grid-template-columns:1fr; }
.field-group{ border:1px solid var(--line-soft); border-radius:var(--r-md); padding:12px 14px 2px; margin:4px 0 14px; }
.field-group-title{ font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; padding:0 4px; }
.field-group .field-row{ grid-template-columns:1fr 1fr 1fr; }

/* date-range picker: one field for both dates */
.dr-trigger{ width:100%; display:flex; align-items:center; gap:10px; text-align:left; font-family:var(--ui); font-size:16px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 12px; min-height:46px; cursor:pointer; transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease); }
.dr-trigger:hover{ border-color:var(--muted); }
.dr-trigger[aria-expanded="true"],.dr-trigger:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,143,134,.13); }
.dr-ico{ flex:0 0 auto; width:18px; height:18px; color:var(--muted); }
.dr-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dr-label.is-placeholder{ color:var(--muted); }
.dr-cal{ margin-top:0; height:0; opacity:0; overflow:hidden; }
.dr-cal-inner{ position:relative; border:1px solid var(--line); border-radius:var(--r-md); padding:14px 12px 12px; background:var(--surface); box-shadow:var(--shadow-sm); }
.dr-nav{ position:absolute; top:12px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:18px; line-height:1; cursor:pointer; z-index:1; }
.dr-nav:hover{ background:var(--surface-2); } .dr-prev{ left:10px; } .dr-next{ right:10px; }
.dr-months{ display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center; }
.dr-month{ flex:1 1 220px; min-width:0; max-width:250px; }
.dr-month-title{ text-align:center; font-family:var(--display); font-weight:600; font-size:14px; margin-bottom:10px; }
.dr-grid{ display:grid; grid-template-columns:repeat(7,1fr); }
.dr-dow{ text-align:center; font-size:11px; font-weight:600; color:var(--muted); padding-bottom:6px; }
.dr-day{ height:36px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; font-family:var(--ui); font-size:13px; color:var(--ink); cursor:pointer; border-radius:0; }
.dr-day:not(.dr-empty):not(.is-start):not(.is-end):not(.in-range):hover{ background:var(--surface-2); border-radius:var(--r-sm); }
.dr-empty{ visibility:hidden; cursor:default; }
.dr-day.is-today{ font-weight:700; }
.dr-day.in-range{ background:var(--surface-2); }
.dr-day.is-start{ background:var(--accent); color:#fff; border-radius:var(--r-sm) 0 0 var(--r-sm); }
.dr-day.is-end{ background:var(--accent); color:#fff; border-radius:0 var(--r-sm) var(--r-sm) 0; }
.dr-day.is-single{ background:var(--accent); color:#fff; border-radius:var(--r-sm); }
.dr-day:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--accent); border-radius:var(--r-sm); position:relative; z-index:2; }
.dr-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px solid var(--line-soft); }
.dr-clear,.dr-done{ background:none; border:none; font-weight:600; font-size:13px; cursor:pointer; padding:4px 6px; }
.dr-clear{ color:var(--muted); } .dr-done{ color:var(--accent-ink); }
.dr-clear:hover,.dr-done:hover{ text-decoration:underline; }
.dr-nav:focus-visible,.dr-clear:focus-visible,.dr-done:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(14,143,134,.13); }
@media (max-width:759px){ .dr-day{ height:42px; } .dr-month-title{ padding:0 34px; } }
.more-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:12px 14px; margin:4px 0 14px; font-weight:600; font-size:14px; color:var(--ink); }
.more-chev{ transition:transform var(--t-fast) var(--ease); } .more-toggle[aria-expanded="true"] .more-chev{ transform:rotate(180deg); }
.more-fields{ overflow:hidden; height:0; opacity:0; }
.geo-wrap{ position:relative; }
.geo-results{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:5; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-md); overflow:hidden; }
.geo-item{ padding:11px 12px; font-size:14px; cursor:pointer; border-bottom:1px solid var(--line-soft); } .geo-item:last-child{ border-bottom:none; } .geo-item:hover,.geo-item.is-active{ background:var(--surface-2); }
.geo-name{ font-weight:600; font-size:14px; } .geo-sub{ font-size:12px; color:var(--muted); margin-top:1px; }
.geo-confirm{ display:block; font-size:12px; color:var(--accent-ink); margin-top:6px; }
.color-picker{ display:flex; gap:8px; flex-wrap:wrap; }
.swatch{ width:30px; height:30px; border-radius:50%; border:2px solid transparent; } .swatch.is-active{ border-color:var(--ink); box-shadow:0 0 0 2px var(--surface) inset; }

/* ===== BACKDROP / TOAST ===== */
.backdrop{ position:fixed; inset:0; z-index:50; background:rgba(20,26,32,.42); opacity:0; transition:opacity var(--t-med) var(--ease); }
.backdrop.is-open{ opacity:1; }
.toast{ position:fixed; left:50%; bottom:calc(90px + var(--safe-bottom)); z-index:90; transform:translateX(-50%) translateY(10px); background:var(--ink); color:#fff; padding:11px 18px; border-radius:999px; font-size:14px; font-weight:500; box-shadow:var(--shadow-lg); opacity:0; transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease); pointer-events:none; max-width:90vw; }
.toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0); } .toast.is-error{ background:var(--over); }

/* ===== MOBILE TAB BAR (hidden on desktop) ===== */
.tab-nav{ display:none; }
.tab{ flex:1; display:inline-flex; flex-direction:column; align-items:center; gap:2px; background:transparent; border:none; color:var(--muted); padding:6px 4px; min-height:48px; border-radius:var(--r-md); }
.tab[aria-selected="true"]{ background:var(--surface-2); color:var(--accent-ink); }
.tab-ico{ font-size:17px; } .tab-label{ font-size:11px; font-weight:600; }

/* desktop modal refinement */
@media (min-width:760px){
  .modal{ align-items:center; padding:24px; }
  .modal-card{ border-radius:var(--r-lg); transform:translateY(16px) scale(.98); opacity:0; transition:transform var(--t-med) var(--ease),opacity var(--t-med) var(--ease); }
  .modal.is-open .modal-card{ transform:none; opacity:1; }

  /* Compact route summary on desktop: total distance + duration only, one row, bottom-left. */
  .route-panel{ right:auto; max-width:min(440px,calc(100% - 24px)); max-height:none; overflow:visible; padding:8px 12px; }
  .route-total{ border-bottom:none; padding-bottom:0; margin-bottom:0; justify-content:flex-start; gap:8px; }
  .route-total-label{ font-size:13px; } .route-total-val{ font-size:13px; }
  .route-leg{ display:none; }
}

/* ===== MOBILE: single panel + bottom tabs ===== */
@media (max-width:759px){
  .app{ display:block; height:auto; overflow:visible; }
  .col{ display:none; height:100dvh; }
  .app[data-view="trips"] .col-left{ display:flex; }
  .app[data-view="itinerary"] .col-mid{ display:flex; }
  .app[data-view="costs"] .col-mid{ display:flex; }
  .app[data-view="todo"] .col-mid{ display:flex; }
  .app[data-view="notes"] .col-mid{ display:flex; }
  .app[data-view="map"] .col-right{ display:flex; height:100dvh; }
  .col-left{ border-right:none; } .col-mid{ border-right:none; }

  .tab-nav{ display:flex; position:fixed; bottom:0; left:0; right:0; justify-content:space-around; gap:4px; padding:8px 10px calc(8px + var(--safe-bottom)); background:rgba(255,255,255,.94); backdrop-filter:saturate(1.2) blur(10px); border-top:1px solid var(--line); z-index:40; }
  .add-fab{ bottom:calc(78px + var(--safe-bottom)); }
  .mid-scroll, .col-scroll{ padding-bottom:calc(96px + var(--safe-bottom)); }
  .app[data-view="notes"] .mid-scroll{ padding-bottom:calc(64px + var(--safe-bottom)); }   /* keep the sticky composer above the tab bar */

  /* stacked ledger cards */
  .ledger-scroll{ overflow-x:visible; }   /* cards, not a wide table — no horizontal scroll */
  .ledger-table,.ledger-table thead,.ledger-table tbody,.ledger-table tr,.ledger-table td{ display:block; }
  .ledger-table{ border:none; background:transparent; min-width:0; } .ledger-table thead{ display:none; }
  .ledger-table td.lr-w-d,.ledger-table td.lr-w-c,.ledger-table td.lr-w-p,.ledger-table td.lr-w-v,.ledger-table td.lr-w-f,.ledger-table td.lr-w-ch,.ledger-table td.lr-w-s{ width:auto; }
  .ledger-row{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:10px; padding:12px 14px; box-shadow:var(--shadow-sm); }
  .ledger-row td{ border:none; padding:3px 0; display:flex; justify-content:space-between; gap:12px; white-space:normal; }
  .ledger-row td::before{ content:attr(data-label); color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
  .ledger-row td.lr-namecell{ padding-bottom:8px; margin-bottom:4px; border-bottom:1px solid var(--line-soft); } .ledger-row td.lr-namecell::before{ display:none; } .ledger-row td.r{ text-align:left; }
  .field-group .field-row{ grid-template-columns:1fr; }
  .detail-panel{ width:100vw; top:auto; height:86vh; border-radius:var(--r-lg) var(--r-lg) 0 0; transform:translateY(100%); } .detail-panel.is-open{ transform:translateY(0); }
}
@media (max-width:380px){ .field-row{ grid-template-columns:1fr; } .detail-actions{ grid-template-columns:1fr; } }