/* Seas My Moment — CRM for Seas the Moment Travel.
   V1.2: design language ported from the Trinity Crafters Market v2
   app (card-based mobile UI, soft layered shadows, pill chips,
   sectioned screens, ≥44px tap targets, Georgia display type) in
   Seas the Moment's own livery: deep navy + teal, sand accent,
   anchor mark. The two businesses share craftsmanship, not colors. */

:root{
  --navy:#0b2a4a; --navy-2:#103a63; --navy-soft:#e8eef4;
  --teal:#0e7c86; --teal-dark:#0a5d64; --teal-soft:#e2eff0;
  --sand:#e8dcc3; --sand-dark:#7a5f14;
  --bg:#f7f2e7; --card:#ffffff; --card-2:#fdfbf6;
  --text:#1c2b33; --muted:#5d707a; --border:#e2dac4;
  --amber-bg:#fef3c7; --amber-text:#92400e; --amber-border:#fcd34d;
  --ok-bg:#dcfce7; --ok-text:#166534; --ok-border:#86efac;
  --red-bg:#fee2e2; --red-text:#991b1b; --red-border:#fca5a5;
  --shadow:0 1px 3px rgba(11,42,74,.09),0 8px 24px rgba(11,42,74,.06);
  --radius:18px;
  --nav-h:50px; /* the sticky top bar's height — sticky toolbars stack under it */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c141d; --card:#15222e; --card-2:#182833;
    --text:#e9f0f2; --muted:#93a7b1; --border:#26394c;
    --navy-soft:#1d3049; --teal-soft:#12333a;
    --amber-bg:#3a2f0f; --amber-text:#fcd34d; --amber-border:#7a6214;
    --ok-bg:#123324; --ok-text:#86efac; --ok-border:#2f6b44;
    --red-bg:#3a1818; --red-text:#fca5a5; --red-border:#7a2e2e;
    --shadow:0 1px 3px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100dvh;overflow-x:hidden}
a{color:var(--teal-dark)}
@media (prefers-color-scheme: dark){ a{color:#57c3cc} }
button{font:inherit;cursor:pointer}
main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:20px 16px 28px}
.loading,.empty{color:var(--muted)}
.loading{padding:24px 0}
.muted{color:var(--muted)}
.serif{font-family:Georgia,"Times New Roman",serif}

/* Header */
.app-head{background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff;padding:14px 0;flex-shrink:0}
.head-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:560px;margin:0 auto;padding:0 16px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:44px;height:44px;border-radius:12px;background:var(--teal);color:var(--sand);display:grid;place-items:center;font-size:22px;flex-shrink:0}
.brand h1{font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.1;margin:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand p{margin:3px 0 0;font-size:12px;letter-spacing:.6px;text-transform:uppercase;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head-user{display:flex;align-items:center;gap:10px;flex-shrink:0}
#top-nav[hidden],#head-user[hidden]{display:none}

/* Layout: content column under the header + sticky nav bar */
.layout{display:flex;flex:1;width:100%;min-height:0}
@media (min-width:900px){
  .layout{max-width:1240px;margin:0 auto;align-items:flex-start}
  .head-wrap{max-width:1240px}
  main{max-width:900px;margin:0 auto;padding:24px 28px 40px}
}

/* Navigation — V1.8.1 (Scott): ONE slim sticky TOP bar, phone and
   desktop alike. The old bottom tab bar sat at the end of the page
   flow (sticky bottom of a long column), so the menu was a full
   scroll away; the sidebar duplicated it on desktop. The bar pins
   at top:0 above everything, and the sticky toolbars / hub tabs
   stack directly beneath it at top: var(--nav-h) with a lower
   z-index, so nothing ever slides under or overlaps it. */
.topnav{position:sticky;top:0;z-index:60;flex-shrink:0;background:linear-gradient(120deg,var(--navy),var(--navy-2));box-shadow:0 2px 10px rgba(11,42,74,.25)}
.topnav-inner{display:flex;gap:2px;overflow-x:auto;max-width:1240px;margin:0 auto;padding:0 8px;scrollbar-width:none}
.topnav-inner::-webkit-scrollbar{display:none}
.nav-item{background:none;border:none;color:var(--muted);position:relative;display:flex;align-items:center;justify-content:center;gap:3px;text-decoration:none}
.topnav .nav-item{flex-direction:row;gap:6px;padding:0 11px;min-height:var(--nav-h);font-size:13.5px;font-weight:700;color:#cfe0ee;white-space:nowrap}
.topnav .nav-item .ti{font-size:16px;line-height:1}
.topnav .nav-item.active{color:#fff}
.topnav .nav-item.active::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:99px 99px 0 0;background:var(--teal)}

/* Type + cards */
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-dark);margin:0 0 6px}
@media (prefers-color-scheme: dark){ .eyebrow{color:#57c3cc} }
h2.display{font-family:Georgia,"Times New Roman",serif;font-size:28px;line-height:1.05;margin:0 0 6px;font-weight:700;color:var(--navy)}
@media (prefers-color-scheme: dark){ h2.display{color:var(--text)} }
.lede{color:var(--muted);font-size:15px;line-height:1.5;margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
section.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:14px}
section.panel h2{font-family:Georgia,"Times New Roman",serif;font-size:19px;margin:0 0 10px;color:var(--navy)}
@media (prefers-color-scheme: dark){ section.panel h2{color:var(--text)} }
section.panel h3{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 6px}
section.panel h3:first-of-type{margin-top:4px}
.section-title{font-family:Georgia,"Times New Roman",serif;font-size:19px;margin:22px 0 10px;color:var(--navy)}
@media (prefers-color-scheme: dark){ .section-title{color:var(--text)} }
.section-title.first{margin-top:0}
.empty-card{padding:20px}
.empty-card p,.empty{line-height:1.55}
.note{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.45}
.error{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red-text);border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.45}
.screen-enter{animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .screen-enter{animation:none} }

/* Hero (navy panel — the next-market analog) */
.hero{background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff;border:none;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-inner{padding:20px}
.hero .label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;font-weight:800}
.hero h2,.hero h3{font-family:Georgia,"Times New Roman",serif;font-size:24px;margin:8px 0 4px;line-height:1.15;color:#fff}
.hero p{margin:0;opacity:.92;font-size:14.5px;line-height:1.5}
.hero p a{color:var(--sand);font-weight:700}
.hero .pills{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);padding:6px 10px;border-radius:999px;font-size:12.5px;color:#fff;text-decoration:none}
a.pill:active{background:rgba(255,255,255,.28)}
.pill.sand{background:var(--sand);color:var(--navy);border-color:var(--sand);font-weight:700}

/* Stats */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 14px}
@media (min-width:900px){ .stat-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} }
.stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.stat b{font-size:20px;display:block;line-height:1.1}
.stat span{font-size:12.5px;color:var(--muted);display:block;margin-top:5px;line-height:1.35}
.stat.warn{border-color:var(--amber-border);background:var(--card-2)}
.stat.warn b{color:var(--amber-text)}
.stat.teal{border-color:#a8ced1}
.stat.teal b{color:var(--teal-dark)}
@media (prefers-color-scheme: dark){ .stat.teal b{color:#57c3cc} }

/* Buttons */
.btn{border-radius:11px;padding:11px 14px;font-weight:700;font-size:14px;border:1px solid var(--border);background:var(--card);color:var(--text);min-height:46px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn.sand{background:var(--sand);color:var(--navy);border-color:var(--sand)}
.btn.ghost{background:transparent}
.btn.ghost-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
.btn.small{padding:9px 12px;min-height:44px;font-size:13.5px}
.btn-block{width:100%}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
/* Legacy button classes from V1 markup */
button.primary{background:var(--navy);color:#fff;border:0;border-radius:11px;padding:11px 14px;cursor:pointer;font-weight:700;font-size:14px;min-height:46px}
button.primary:active{transform:scale(.98)}
button.primary:disabled{opacity:.45;cursor:not-allowed;transform:none}
button.small{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:9px 12px;cursor:pointer;font-weight:700;font-size:13.5px;min-height:44px;color:var(--text)}

/* Chips + badges (pill status language) */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.badge{font-size:12px;font-weight:700;padding:6px 9px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--muted);border-color:var(--border);display:inline-block;white-space:nowrap}
.badge.teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.badge.sand{background:var(--sand);color:var(--navy);border-color:var(--sand)}
.badge.ok{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-border)}
.badge.warn{background:var(--amber-bg);color:var(--amber-text);border-color:var(--amber-border)}
.badge.bad{background:var(--red-bg);color:var(--red-text);border-color:var(--red-border)}
.badge.cancelled{background:var(--card-2);color:var(--muted);border-color:var(--border);font-weight:700}

/* Card lists (vendor-list analog) */
.card-list{display:grid;gap:12px}
@media (min-width:1100px){ .card-list.two{grid-template-columns:1fr 1fr} }
.item-card{padding:16px;display:block;text-decoration:none;color:var(--text)}
a.item-card:active{transform:scale(.99)}
.item-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.item-card h3{margin:0;font-size:16.5px;line-height:1.25;font-weight:700}
.item-card .contact{color:var(--muted);font-size:13.5px;margin-top:2px;line-height:1.45}
.item-card .amount{font-size:16px;font-weight:800;white-space:nowrap}
.item-card .amount span{display:block;font-size:11.5px;font-weight:600;color:var(--muted);text-align:right}

/* Row links (upcoming-row analog) */
.row-link{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 16px;min-height:60px;color:var(--text);box-shadow:var(--shadow);text-decoration:none}
.row-link .main{flex:1;min-width:0}
.row-link .main b{display:block;font-size:15px}
.row-link .main span{font-size:12.5px;color:var(--muted);display:block;line-height:1.4}
.row-link .chev{color:var(--muted);font-size:20px;flex-shrink:0}
.row-stack{display:grid;gap:10px}

/* Tasks */
.task{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border)}
.task:last-child{border-bottom:0}
.task input[type="checkbox"]{width:22px;height:22px;flex-shrink:0;margin:1px 0 0;accent-color:var(--teal)}
.task .body{flex:1;min-width:0}
.task .title{font-size:15px;line-height:1.35}
.task.done .title{text-decoration:line-through;color:var(--muted)}
.task .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:3px;font-size:12.5px;color:var(--muted)}
.task .due{font-weight:700}
.task.late .due,.late-tag{color:var(--red-text);font-weight:800}
.add-task{display:grid;gap:10px;margin-top:14px}
@media (min-width:640px){ .add-task{grid-template-columns:1fr 170px auto;align-items:end} }

/* Leads pipeline — V1.10: three working stages (lost is the
   archived state, rendered in the archive strip, not a column). */
.pipeline{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media (max-width:900px){ .pipeline{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .pipeline{grid-template-columns:1fr} }
.stage-col{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.stage-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:10px}
.stage-head h3{font-family:Georgia,"Times New Roman",serif;font-size:16.5px;margin:0;color:var(--navy)}
@media (prefers-color-scheme: dark){ .stage-head h3{color:var(--text)} }
.stage-total{font-size:12.5px;color:var(--muted);white-space:nowrap}
.lead-card{border:1px solid var(--border);border-left:4px solid var(--teal);border-radius:12px;padding:12px;margin-bottom:10px;background:var(--card-2)}
.lead-card .name{font-weight:700;font-size:15px}
.lead-card .meta{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.lead-card .value{color:var(--teal-dark);font-weight:800;font-size:14px;margin-top:4px}
@media (prefers-color-scheme: dark){ .lead-card .value{color:#57c3cc} }
/* V1.10: planning-trip lead cards + the inline mark-lost form. */
.trip-lead-card{border-left-color:var(--navy)}
.lost-slot{margin-top:8px}
.lost-form{border-top:1px dashed var(--border);padding-top:10px}
.lost-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.lost-form input[type="text"]{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-size:14px;box-sizing:border-box}

/* Search */
.search{position:relative;margin-bottom:14px}
.search input{width:100%;padding:14px 14px 14px 42px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:15px;outline:none;min-height:48px}
.search input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,134,.15)}
.search::before{content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--muted)}
.searchbar{display:flex;gap:8px;margin-bottom:14px}
.searchbar .search{flex:1;margin-bottom:0}
.searchbar input{width:100%}

/* Detail rows (kv, restyled as hairline rows) */
.kv{display:grid;grid-template-columns:150px 1fr;gap:0 14px;font-size:14.5px;margin:0}
.kv dt{color:var(--muted);padding:9px 0;border-top:1px solid var(--border)}
.kv dd{margin:0;padding:9px 0;border-top:1px solid var(--border);line-height:1.45}
.kv dt:first-of-type,.kv dd:first-of-type{border-top:none}
@media (max-width:560px){ .kv{grid-template-columns:112px 1fr} }

/* Money rows (final payments — pay-row analog) */
.pay-list{display:grid}
.pay-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"who amt" "meta amt" "when amt";gap:3px 12px;padding:12px 0;border-top:1px solid var(--border);align-items:center}
.pay-row:first-child{border-top:none}
.pay-who{grid-area:who;min-width:0}
.pay-who strong{display:block;font-size:14.5px}
.pay-who span{font-size:12.5px;color:var(--muted);display:block}
.pay-meta{grid-area:meta;font-size:12.5px;color:var(--muted)}
.pay-when{grid-area:when;font-size:12.5px;color:var(--muted)}
.aging-settle{padding:0 0 12px}
.aging-settle .recipient{margin-top:2px}
.pay-amt{grid-area:amt;font-size:16px;font-weight:800;text-align:right;white-space:nowrap}
.pay-amt span{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}

/* Tables (trip-detail bookings keep a real table, scrolled in-card) */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap{overflow-x:auto;margin:2px 0}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.tbl td{text-align:left;vertical-align:top;border-bottom:1px solid var(--border);padding:8px;overflow-wrap:anywhere}
.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border-bottom:2px solid var(--border);white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}
.table-scroll .tbl{min-width:600px}
tr.cancelled td{color:var(--muted)}
/* Legacy table class, kept styled for safety */
table.list{width:100%;border-collapse:collapse;background:var(--card)}
table.list th,table.list td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);font-size:14px}
table.list th{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}

/* Documents */
.doc-row{padding:9px 0;border-top:1px solid var(--border);font-size:14.5px;line-height:1.5}
.doc-row:first-of-type{border-top:none}
.doc-row .doc-note{display:block}
.doc-note{color:var(--muted);font-size:12.5px;font-style:italic}

/* Sign-in + forms */
.signin{max-width:440px;margin:32px auto}
.signin-card{padding:22px}
.signin .brand-mark{margin-bottom:14px}
.signin h2.display{font-size:24px}
.signin .swap{text-align:center;margin:14px 0 0;font-size:14px}
label{font-size:13px;color:var(--muted);display:grid;gap:4px}
.sheet-field{display:block;font-size:13px;font-weight:700;margin:0 0 14px;color:var(--text)}
.sheet-field input,.sheet-field textarea,.sheet-field select{display:block;width:100%;margin-top:6px;padding:13px 12px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:15px;font-weight:400;min-height:48px}
.sheet-field input:focus,.sheet-field textarea:focus,.sheet-field select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,134,.15);outline:none}
input,select,textarea{font:inherit;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);min-height:48px}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,134,.15);outline:none}
.signin form{display:grid;gap:2px}

/* ---------------------------------------------------------------
   V1.3 — forms, trip-hub tabs, milestones, money lines.
   Same Trinity-derived language as V1.2; edit views share one grid. */
.form-grid{display:grid;gap:2px;max-width:640px}
.form-grid.inset{margin-top:14px;border-top:1px solid var(--border);padding-top:14px;max-width:none}
.form-h{font-family:Georgia,"Times New Roman",serif;font-size:16.5px;color:var(--navy);margin:16px 0 6px}
@media (prefers-color-scheme: dark){ .form-h{color:var(--text)} }
.form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.form-actions.danger-zone{border-top:1px solid var(--border);padding-top:14px;margin-top:20px}
.btn.danger{background:var(--red-bg);color:var(--red-text);border-color:var(--red-border)}
.btn.danger-btn{color:var(--red-text);border-color:var(--red-border)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.panel-head h2{margin:0}
.row-actions{display:inline-flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.lead-card select{min-height:44px}
.trav-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.trav-row:last-of-type{border-bottom:0}
.trav-row .meta,.doc-row .meta{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
td.actions{white-space:nowrap}
.meta-line{margin-top:8px}
.add-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.add-row select{flex:1;min-width:180px}

/* Trip-hub tabs */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:12px 2px 4px;-webkit-overflow-scrolling:touch}
.tab{flex:none;border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:999px;padding:10px 16px;font-weight:700;font-size:14px;min-height:44px}
.tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.hero-actions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Milestones */
.milestone{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border)}
.milestone:last-of-type{border-bottom:0}
.milestone .ms-icon{font-size:18px;line-height:1.3}
.milestone input[type="checkbox"]{width:20px;height:20px;flex:none;margin-top:2px}
.milestone .body{flex:1;min-width:0}
.milestone .title{font-size:15px;line-height:1.35}
.milestone .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:3px;font-size:12.5px;color:var(--muted)}
.milestone.done .title{color:var(--muted);text-decoration:line-through}
.milestone .chev{color:var(--muted);font-size:20px;text-decoration:none}

/* Money */
.money-line{display:flex;gap:18px;flex-wrap:wrap;font-size:14.5px}
.money-line b{font-size:16px}
.money-line .due b{color:var(--red-text)}
.inv-item{display:grid;grid-template-columns:1fr 110px;gap:8px;margin-bottom:8px}

/* ---------------------------------------------------------------
   V1.4 — groups, itineraries, messaging, the web-system pass and
   the functional-navigation pass (sticky actions/toolbars/tabs). */
.quick-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.quick-actions .btn{flex:1;min-width:104px}

/* Sticky form action bar: pinned to the viewport bottom (above the
   mobile tab bar) so Save is always one tap away, never a long
   scroll to the bottom of a 15-field form. */
.form-actions.sticky-actions{position:sticky;bottom:12px;z-index:30;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:10px;margin-top:14px}
/* Sticky list toolbar: search + New stay at the top mid-scroll. */
.searchbar.sticky-toolbar{position:sticky;top:var(--nav-h);z-index:30;background:var(--bg);padding:10px 0 8px;margin-bottom:8px}
/* Hub tab bars stick under the header. */
.tabs.sticky-tabs{position:sticky;top:var(--nav-h);z-index:30;background:var(--bg);padding:10px 2px 6px}

/* Lifecycle filter chips (Pending / Traveling / Closed / All) */
.filter-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.chip-btn{border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:999px;padding:9px 14px;font-weight:700;font-size:13.5px;min-height:40px}
.chip-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Retired (Closed) items: muted, still fully reachable. */
.item-card.retired{opacity:.62}
tr.retired td{color:var(--muted)}

/* Trips data table — desktop (≥1024px); cards stay on the phone. */
.trips-table-wrap{display:none}
@media (min-width:1024px){
  .trips-cards{display:none}
  .trips-table-wrap{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px 14px}
  main{max-width:1060px}
}
.trips-table td.num,.trips-table th.num{text-align:right}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .cell-sub{display:block;font-size:12px;color:var(--muted)}
.tbl tbody tr[data-open-trip]{cursor:pointer}
.tbl tbody tr[data-open-trip]:hover{background:var(--card-2)}
.th-sort{background:none;border:none;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;padding:0;font-weight:800}
.empty-cell{color:var(--muted);padding:16px 8px}

/* Itinerary day rows */
.itin-list{margin-top:6px}
.itin-row{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.itin-row:last-child{border-bottom:0}
.itin-when{min-width:118px}
.itin-when strong{display:block;font-size:14.5px}
.itin-when span{font-size:12.5px;color:var(--muted)}
.itin-what{flex:1;min-width:180px}
.itin-what strong{display:block;font-size:15px}
.itin-what span{font-size:12.5px;color:var(--muted);display:block;line-height:1.45}
.itin-what .itin-note{font-style:italic}

/* Group message recipients */
.recipient-list{display:grid;gap:6px;margin-bottom:6px}
.recipient{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--text);background:var(--card-2);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.recipient input[type="checkbox"]{width:20px;height:20px;flex:none;accent-color:var(--teal)}

/* Client travel-history rows (compact) */
.history-list{padding:8px 18px}
.history-row{display:flex;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--border);text-decoration:none;color:var(--text)}
.history-row:first-child{border-top:none}
.history-row .h-name{font-weight:700;font-size:14.5px}
.history-row .h-meta{flex:1;font-size:12.5px;color:var(--muted);text-align:right}

/* ---------------------------------------------------------------
   V1.6 — trip-page overhaul: hero banner (ship photo or branded
   fallback), countdown + completion ring, logistics chips,
   milestone edit form, and the itinerary day-list editor. */

/* Hero with the ship's own photo under a navy scrim, so the white
   type stays readable; no photo → the plain navy gradient. */
.hero.trip-hero.has-photo{background-image:linear-gradient(112deg,rgba(11,42,74,.9) 26%,rgba(11,42,74,.55) 62%,rgba(11,42,74,.35)),var(--hero-img);background-size:cover;background-position:center 36%}
.hero-ship{font-size:16px;font-weight:700;letter-spacing:.02em;opacity:1}
.hero-stats{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:16px}
.hero-stat b{font-family:Georgia,"Times New Roman",serif;font-size:27px;display:block;line-height:1.05}
.hero-stat span{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;opacity:.85}
.hero-stat.ring{display:flex;align-items:center;gap:11px}
.hero-stat.ring svg{width:46px;height:46px;flex:none}
.hero-stat.ring .ring-bg{fill:none;stroke:rgba(255,255,255,.28);stroke-width:5}
.hero-stat.ring .ring-fg{fill:none;stroke:var(--sand);stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}

/* Logistics chips (presence/counts from bookings + documents) */
.logistics{display:flex;gap:8px;flex-wrap:wrap}
.log-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:8px 14px 8px 11px;font-size:13.5px;background:var(--card-2);color:var(--muted)}
.log-chip b{font-size:15.5px;color:var(--text)}
.log-chip.on{border-color:#a8ced1;background:var(--teal-soft);color:var(--text)}
.log-chip .log-ic{font-size:16px;line-height:1}

/* Milestones: overdue rail rows + the inline edit form */
.milestone.overdue .title{font-weight:700}
.ms-edit-form{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--border)}
.ms-edit-form .muted{margin:0 0 6px;font-size:13px;line-height:1.45}

/* Itinerary editor: day list + selected-day pane */
.itin-wrap{display:grid;gap:14px;margin-top:6px}
@media (min-width:900px){ .itin-wrap{grid-template-columns:308px 1fr;align-items:start} }
.itin-days{display:grid;gap:6px;align-content:start}
.itin-day{display:flex;gap:6px;align-items:stretch}
.itin-pick{flex:1;min-width:0;display:flex;gap:10px;align-items:center;text-align:left;background:var(--card-2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--text);cursor:pointer;min-height:52px}
.itin-day.active .itin-pick{background:var(--navy-soft);border-color:var(--teal)}
.itin-dnum{font-weight:800;color:var(--teal-dark);font-size:12.5px;min-width:27px}
@media (prefers-color-scheme: dark){ .itin-dnum{color:#57c3cc} }
.itin-dmain{flex:1;min-width:0}
.itin-dmain strong{display:block;font-size:14.5px;line-height:1.25;overflow-wrap:anywhere}
.itin-dmain span{font-size:12px;color:var(--muted);display:block;line-height:1.4}
.itin-moves{display:flex;flex-direction:column;gap:6px;justify-content:center}
.mv{border:1px solid var(--border);background:var(--card);border-radius:9px;width:34px;height:26px;font-weight:800;color:var(--muted);cursor:pointer;line-height:1;padding:0}
.mv:disabled{opacity:.35;cursor:not-allowed}
.itin-detail-card{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--card-2)}
.itin-day-title{font-family:Georgia,"Times New Roman",serif;font-size:17.5px;color:var(--navy);display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
@media (prefers-color-scheme: dark){ .itin-day-title{color:var(--text)} }
.itin-form.inset{margin-top:0;border-top:0;padding-top:0}
@media (max-width:899px){ .itin-form.inset{border-top:1px solid var(--border);padding-top:14px} }

/* CruiseMapper draft review (V1.7): pulled rows sit in a dashed
   teal frame, every row badged as a draft, until Scott confirms —
   nothing in this block is saved yet. */
.cm-draft{border:1.5px dashed var(--teal);border-radius:14px;padding:14px;background:var(--teal-soft);margin-bottom:14px}
.cm-draft .panel-head{margin-bottom:10px}
.cm-draft .panel-head h3{font-family:Georgia,"Times New Roman",serif;font-size:16.5px;margin:0}
.cm-draft-list{display:grid;gap:6px}
.cm-draft-row{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:9px 12px}
.cm-draft-row .badge{margin-left:auto}

/* V1.12: lookup boxes in the entry form — a pick fills the form,
   nothing saves until the entry itself is saved. */
.lookup-box{margin:2px 0 10px}
.lookup-results{display:grid;gap:6px;margin-top:8px}
.lookup-cand{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--teal);border-radius:12px;padding:9px 12px;font-size:14.5px;cursor:pointer;color:inherit}
.lookup-cand span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.lookup-cand:active{background:var(--teal-soft)}

/* V2.0.2: the searchable picker (Scott's standing rule — every
   client/lead/household/trip choice is a search box, never a
   scroll-through select) + the proposal builder's itinerary rows. */
.search-picker [data-picker-value]{display:none}
.search-picker .search{margin-bottom:8px}
.picker-results{display:grid;gap:6px;margin-top:6px}
.picker-current{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--teal-soft);border:1px solid var(--teal);border-radius:12px;padding:8px 12px;margin-bottom:8px;font-weight:400}
.picker-label{display:block;font-size:13px;font-weight:700;margin:0 0 6px;color:var(--text)}
.add-picker{margin-bottom:6px}
.prop-itin-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.prop-itin-row input,.prop-itin-row select{padding:9px 10px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:14px;min-height:40px}
.prop-itin-row [data-pi="location"]{flex:1 1 140px}
.prop-itin-row [data-pi="note"]{flex:1 1 120px}
.prop-itin-add{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.prop-itin-add input,.prop-itin-add select{padding:9px 10px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:14px;min-height:40px}
.prop-itin-add [data-pa="location"]{flex:1 1 140px}

/* Entry-kind segmented picker (port / sea / flight / hotel / other) */
.seg{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.seg-btn{flex:1 1 30%;border:1px solid var(--border);background:var(--card);border-radius:999px;padding:10px;font-weight:700;font-size:14px;min-height:44px;color:var(--muted);cursor:pointer}
.seg-btn.active{background:var(--teal);color:#fff;border-color:var(--teal)}
/* Kind-specific field groups in the entry form show one at a time */
.itin-form [data-kinds][hidden]{display:none}
.itin-form [data-kinds] .muted{font-size:13px;line-height:1.45;margin:0 0 12px}

/* ------------------------------------------------ V1.8: document view
   A dedicated print surface (the Trinity §51 pattern): the app
   chrome (header + sticky nav) steps away entirely — the view's
   own controls never fight the nav — the sheet sits on a pale
   backdrop that is forced light even in dark mode, controls are
   ≥44px, and @media print strips everything but the document.
   The document fragment itself is inline-styled (it doubles as
   the email HTML), so these rules only dress the page around it. */
body.doc-mode{background:#dfe6ec}
body.doc-mode .app-head,body.doc-mode .topnav{display:none}
.doc-page{max-width:780px;margin:0 auto}
.doc-controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.doc-btn{min-height:44px;display:inline-flex;align-items:center;padding:10px 18px}
.doc-btn[disabled]{opacity:.45;cursor:not-allowed}
.doc-hint{color:#43536a;font-size:13px;margin:0 0 10px}
.doc-status{font-size:13.5px;margin:0 0 10px;color:#43536a}
.doc-status.ok{color:var(--ok-text);font-weight:700}
.doc-sheet{background:#fff;border-radius:10px;box-shadow:0 2px 16px rgba(11,42,74,.2);overflow:hidden}
.doc-emailed{display:block;color:var(--ok-text);font-weight:600}
@media print{
  body.doc-mode{background:#fff}
  /* The app shell caps <main> at phone widths; a printed document
     gets the page's full printable width instead. */
  body.doc-mode main{max-width:none;padding:0}
  .doc-controls,.doc-hint,.doc-status,.doc-page .error{display:none!important}
  .doc-page{max-width:none}
  .doc-sheet{box-shadow:none;border-radius:0}
  .doc-day{break-inside:avoid}
  @page{margin:12mm}
}

/* --------------------------------------- V1.8.2: invoice one-page print
   The invoice document prints on US Letter with half-inch margins
   (a NAMED page, so the itinerary keeps the default page setup),
   leaving exactly 10in = 960 CSS px of printable height. Blocks
   never split across a break. On top of that, the doc view's fit
   pass (app.js, DOC-FIT) adds .inv-compact to the sheet before
   printing: a compact scale for the invoice fragment (the inv-*
   hooks the renderer emits), plus a zoom shrink-to-fit when even
   the compact layout runs past one page — an invoice shrinks
   rather than spilling onto a second sheet. */
body.doc-invoice .doc-sheet{page:invpage}
@page invpage{size:Letter;margin:0.5in}
.doc-sheet.inv-compact .inv-head-cell{padding:13px 22px!important}
.doc-sheet.inv-compact .inv-title{font-size:25px!important}
.doc-sheet.inv-compact .inv-brand{font-size:19px!important;margin-top:4px!important}
.doc-sheet.inv-compact .inv-head-contact{margin-top:5px!important;line-height:1.45!important}
.doc-sheet.inv-compact .inv-meta-label,.doc-sheet.inv-compact .inv-meta-value{padding-top:3px!important;padding-bottom:3px!important}
.doc-sheet.inv-compact .inv-body{padding:13px 22px 12px!important}
.doc-sheet.inv-compact .inv-bar{padding:5px 10px!important;font-size:11px!important}
.doc-sheet.inv-compact .inv-billto{padding:7px 10px 0!important}
.doc-sheet.inv-compact .inv-billname{font-size:14.5px!important}
.doc-sheet.inv-compact .inv-addr{font-size:12.5px!important;line-height:1.4!important}
.doc-sheet.inv-compact .inv-trip{margin-top:10px!important;padding:7px 10px!important;font-size:12.5px!important}
.doc-sheet.inv-compact .inv-items{margin-top:10px!important}
.doc-sheet.inv-compact .inv-th{padding:5px 10px!important;font-size:11px!important}
.doc-sheet.inv-compact .inv-cell,.doc-sheet.inv-compact .inv-amt{padding:3.5px 10px!important;font-size:12.5px!important;line-height:1.3!important}
.doc-sheet.inv-compact .inv-notes-bar{padding:5px 10px!important}
.doc-sheet.inv-compact .inv-notes-body{padding:7px 10px!important;font-size:12.5px!important;line-height:1.45!important}
.doc-sheet.inv-compact .inv-questions{font-size:12px!important}
.doc-sheet.inv-compact .inv-totrow{font-size:12.5px!important;padding-top:2px!important;padding-bottom:2px!important}
.doc-sheet.inv-compact .inv-balance{padding:8px 12px!important}
.doc-sheet.inv-compact .inv-bal-amt{font-size:16px!important}
.doc-sheet.inv-compact .inv-thanks{margin-top:12px!important;font-size:14px!important}
@media print{
  .inv-bar,.inv-billto,.inv-trip,.inv-notes,.inv-totals,.inv-thanks{break-inside:avoid}
  .inv-items tr{break-inside:avoid}
}

/* ------------------------------------------------ V1.9: follow-ups panel */
.fu-switch{display:inline-flex;gap:8px;align-items:center;font-weight:700;font-size:14px;cursor:pointer}
.fu-switch input{width:20px;height:20px;flex:none}
.fu-step{border-top:1px solid var(--border);padding-top:10px;margin-top:12px}

/* ------------------------------------------------ V1.11: dedupe */
/* Possible-duplicate pair cards: the two records side by side
   (stacked on a phone), the flagging signals as chips on top. */
.dup-pair{margin-bottom:14px}
.dup-signals{margin-bottom:10px}
.dup-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.dup-cols{grid-template-columns:1fr}}
.dup-side{border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--card-2)}
.dup-side h3{margin:0 0 8px}
.dup-side .chips{margin-top:10px}

/* V2.0: proposals — builder rows + the public client page */
.comp-row{border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:12px;background:var(--card-2)}
.comp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.pub-wrap{padding:6px 0 20px}
.pub-actions{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pub-actions .big{min-height:52px;font-size:15.5px;padding:12px 22px}
.pub-banner{margin-top:14px;border-left:4px solid var(--teal)}
.pub-banner.warn{border-left-color:var(--amber-border)}
.pub-confirm{flex-basis:100%;border-top:1px dashed var(--border);padding-top:12px;margin-top:4px}
.pub-confirm textarea{width:100%}
.guest-block{border:1px solid var(--border);border-radius:12px;padding:12px 14px 2px;margin:0 0 14px}
.guest-block legend{font-size:13px;font-weight:700;letter-spacing:.4px;color:var(--text);padding:0 6px}
.prop-travelers{margin-top:4px}
.prop-travelers summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--teal)}

/* ------------------------------------------------ Stage F: client portal
   The portal page (public/portal.html + js/portal.js) reuses the
   app tokens and the .panel/.btn/.badge vocabulary; everything
   below is portal-only layout — cards, hero, thread, chips. */
.badge.navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.big{width:100%;padding:14px;font-size:15px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.portal-foot{text-align:center;color:var(--muted);font-size:12.5px;padding:18px 12px 26px}
.portal-narrow{max-width:560px;margin:18px auto}
.portal-h{font-family:Georgia,'Times New Roman',serif;font-size:21px;margin:20px 0 12px;color:var(--navy)}
.portal-h3{font-family:Georgia,'Times New Roman',serif;font-size:16.5px;margin:18px 0 8px;color:var(--navy)}
.portal-lede{font-size:15px;line-height:1.6}
.portal-fine{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:12px}
.portal-linklike{background:none;border:0;padding:0;font:inherit;color:var(--teal,#0e7c86);text-decoration:underline;cursor:pointer}
.portal-divider{display:flex;align-items:center;gap:12px;margin:22px 0 2px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.portal-divider::before,.portal-divider::after{content:'';flex:1;border-top:1px solid var(--border)}
.portal-note{background:var(--teal-soft);border:1px solid var(--teal);color:var(--navy);border-radius:10px;padding:10px 14px;font-size:14px;margin:14px 0}
.portal-err{background:var(--red-bg);color:var(--red-text);border:1px solid var(--red-border);border-radius:10px;padding:10px 14px;font-size:14px}
.portal-ok{background:var(--ok-bg);color:var(--ok-text);border:1px solid var(--ok-border);border-radius:10px;padding:10px 14px;font-size:14px}
.portal-empty{padding:18px}
.portal-form{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.portal-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:var(--navy)}
.portal-form input,.portal-form textarea{font:inherit;font-weight:400;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);min-height:46px}
.portal-form input[readonly]{background:var(--navy-soft);color:var(--muted)}
.portal-unread-dot{display:inline-block;width:9px;height:9px;border-radius:99px;background:#ffb020;margin-left:6px;vertical-align:middle}
.portal-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.portal-trip-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--text);box-shadow:0 2px 10px rgba(11,42,74,.07)}
.portal-trip-card:active{transform:scale(.99)}
.portal-trip-img{height:130px;background-size:cover;background-position:center;display:block}
.portal-trip-img.branded{background:linear-gradient(120deg,var(--navy),var(--navy-2));display:grid;place-items:center;color:var(--sand);font-size:34px}
.portal-trip-body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:4px}
.portal-trip-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.portal-trip-body strong{font-family:Georgia,'Times New Roman',serif;font-size:17.5px;color:var(--navy)}
.portal-trip-meta{font-size:13px;color:var(--muted)}
.portal-countdown{font-size:12.5px;font-weight:800;color:var(--teal-dark)}
.portal-card-bal{font-size:13.5px;font-weight:700;color:var(--amber-text)}
.portal-card-bal.paid{color:var(--ok-text)}
.portal-hero{border-radius:18px;overflow:hidden;background:linear-gradient(120deg,var(--navy),var(--navy-2));background-size:cover;background-position:center;margin-bottom:16px}
.portal-hero-shade{background:linear-gradient(180deg,rgba(11,42,74,.25),rgba(11,42,74,.82));color:#fff;padding:44px 20px 18px}
.portal-hero-shade h2{font-family:Georgia,'Times New Roman',serif;font-size:26px;margin:2px 0 6px;color:#fff}
.portal-hero-shade p{margin:3px 0}
.eyebrow.light{color:var(--sand)}
.portal-back{font-weight:700;text-decoration:none}
.portal-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){.portal-grid{grid-template-columns:1fr 1fr}.portal-grid>.panel:first-child{grid-row:span 2}}
.portal-grid .panel h3{font-family:Georgia,'Times New Roman',serif;color:var(--navy);margin-top:0}
.portal-grid .panel h4{margin:16px 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.portal-money{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;margin-bottom:6px}
.portal-money>div{background:var(--navy-soft);border-radius:12px;padding:10px 6px}
.portal-money span{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.portal-money strong{font-size:16.5px;color:var(--navy)}
.portal-money strong.due{color:var(--amber-text)}
.portal-money strong.paid{color:var(--ok-text);font-size:14.5px}
.portal-lines{list-style:none;margin:0;padding:0}
.portal-lines>li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.portal-lines>li:last-child{border-bottom:none}
.portal-line{display:flex;justify-content:space-between;align-items:center;gap:10px}
.portal-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.portal-itin{list-style:none;margin:0;padding:0}
.portal-itin-item{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border)}
.portal-itin-item:last-child{border-bottom:none}
.portal-itin-icon{font-size:17px;line-height:1.3}
.portal-chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:999px;padding:9px 14px;font-weight:700;font-size:13.5px;min-height:40px;cursor:pointer}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.chip.static{cursor:default;color:var(--text)}
.portal-thread{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto;padding:4px 2px 10px}
.portal-msg{max-width:82%;padding:10px 13px;border-radius:15px;font-size:14.5px;line-height:1.5}
.portal-msg.mine{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:5px}
.portal-msg.scott{align-self:flex-start;background:var(--navy-soft);color:var(--text);border-bottom-left-radius:5px}
.portal-msg-when{font-size:11px;opacity:.75;margin-top:4px}
.portal-msg.mine .portal-msg-when{text-align:right}
.portal-prof-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}
.portal-prof-row span{color:var(--muted)}
.portal-prof-row strong{text-align:right}
@media (prefers-color-scheme:dark){
  .portal-h,.portal-h3,.portal-trip-body strong,.portal-grid .panel h3,.portal-money strong,.portal-form label{color:var(--sand)}
}