/* Jacopo's Travels: calm, Apple-like. Cloud white + sky blue, pink for "now". */

:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: #F5F8FC;
  --surface: #FFFFFF;
  --surface-2: #EDF2F8;
  --ink: #0C1A2E;
  --ink-2: #4D5E76;
  --ink-3: #8796AB;
  --hair: #DCE3ED;
  --hover: #F3F7FB;
  --sky: #0EA5E9;
  --sky-text: #0369A1;
  --sky-tint: #E0F2FE;
  --pink: #EC4899;
  --pink-text: #BE185D;
  --pink-tint: #FCE7F3;
  --trail: #0284C7;
  --glass: rgba(255, 255, 255, .86);
  --shadow: 0 1px 2px rgba(12, 26, 46, .06), 0 14px 36px -16px rgba(12, 26, 46, .28);
  --shadow-sm: 0 1px 2px rgba(12, 26, 46, .12);
  --glow: rgba(14, 165, 233, .13);
  --radius: 18px;
  --bar-h: 52px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070B14;
    --surface: #0F1727;
    --surface-2: #172236;
    --ink: #E7EDF6;
    --ink-2: #9DABC0;
    --ink-3: #6A7A92;
    --hair: #1E2A3E;
    --hover: #131D30;
    --sky: #38BDF8;
    --sky-text: #38BDF8;
    --sky-tint: rgba(56, 189, 248, .14);
    --pink: #F472B6;
    --pink-text: #F472B6;
    --pink-tint: rgba(244, 114, 182, .15);
    --trail: #38BDF8;
    --glass: rgba(15, 23, 39, .86);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 36px -16px rgba(0, 0, 0, .7);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --glow: rgba(56, 189, 248, .10);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
[hidden] { display: none !important; }
::selection { background: var(--sky-tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 10px; }
button { font: inherit; color: inherit; }
h1, h2 { text-wrap: balance; margin: 0; }
p { margin: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 13.5px; letter-spacing: -.01em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 2000; background: var(--surface); color: var(--ink); padding: 8px 12px; border-radius: 10px; box-shadow: var(--shadow); }
.skip:focus { top: 8px; }

/* Buttons */
.btn {
  border: 0; border-radius: 12px; padding: 11px 22px; cursor: pointer;
  font-weight: 600; font-size: 16px; letter-spacing: -.01em;
  background: var(--surface-2); color: var(--ink);
  transition: background-color .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--sky); color: #fff; }
.btn.primary:hover { background: color-mix(in srgb, var(--sky) 88%, #000); }
.btn.small { padding: 7px 14px; font-size: 14px; border-radius: 10px; background: var(--sky); color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent;
  display: inline-grid; place-items: center; cursor: pointer; color: var(--ink-2); flex: none;
  transition: background-color .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn.sm { width: 30px; height: 30px; }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.sm svg { width: 16px; height: 16px; }
.icon-btn.done { color: var(--sky-text); }
.link-btn { border: 0; background: none; padding: 0; color: var(--sky-text); font-weight: 500; cursor: pointer; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Boot + signed-out */
.boot { position: fixed; inset: 0; display: grid; place-items: center; }
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--hair); border-top-color: var(--sky);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.gate {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(900px 480px at 50% -120px, var(--glow), transparent 70%), var(--bg);
}
.gate-inner { text-align: center; max-width: 360px; display: grid; justify-items: center; gap: 10px; }
.gate-mark { width: 64px; height: 64px; margin-bottom: 14px; }
.gm-ring { fill: var(--sky-tint); }
.gm-halo { fill: var(--pink-tint); }
.gm-dot { fill: var(--pink); stroke: var(--surface); stroke-width: 3; }
.gate h1 { font: 700 34px/1.1 var(--font-display); letter-spacing: -.025em; }
.gate-sub { color: var(--ink-2); font-size: 17px; margin-bottom: 18px; }
.gate .btn { min-width: 180px; }
.gate-note { color: var(--ink-2); font-size: 14px; margin-top: 10px; text-wrap: pretty; }
.gate-note a { color: var(--sky-text); text-underline-offset: 3px; }
.gate-note code { font-family: var(--mono); font-size: 13px; }

/* App shell */
.app { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--bar-h) auto auto minmax(0, 1fr); }
.app > .bar { grid-row: 1; }
.app > .banner { grid-row: 2; }
.app > .progress { grid-row: 3; }
.app > .stage, .app > .page { grid-row: 4; }
.bar {
  position: relative; z-index: 1001;
  display: flex; align-items: center; gap: 10px;
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: var(--bg);
  border-bottom: .5px solid var(--hair);
}
.brand { display: inline-flex; align-items: center; gap: 7px; font: 600 16px/1 var(--font-display); letter-spacing: -.015em; white-space: nowrap; margin-right: 8px; }
.brand-mark { width: 20px; height: 20px; flex: none; }
.bm-trail { fill: none; stroke: var(--trail); stroke-width: 92; stroke-linecap: round; }
.bm-plane { fill: var(--pink); }
.spacer { flex: 1; }
.nav { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface-2); }
.nav a, .nav-soon {
  font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-decoration: none;
  padding: 4px 13px; border-radius: 8px;
}
.nav a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.nav a:not([aria-current="page"]):hover { color: var(--ink); }
.nav-soon { color: var(--ink-3); cursor: default; }
.demo-tag { font-size: 12px; font-weight: 600; color: var(--pink-text); letter-spacing: .02em; }
#refresh.spinning svg { animation: spin .9s linear infinite; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: var(--sky-tint); color: var(--sky-text); font-size: 12.5px; font-weight: 650; letter-spacing: .02em;
  display: grid; place-items: center;
}
.menu {
  position: fixed; inset: auto; top: calc(var(--bar-h) - 4px); right: 12px; left: auto; margin: 0;
  min-width: 220px; max-width: calc(100vw - 32px); padding: 14px 6px 6px; border: .5px solid var(--hair); border-radius: 14px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
.menu-name { font-weight: 600; padding: 0 10px; }
.menu-email { color: var(--ink-2); font-size: 13px; padding: 0 10px 10px; border-bottom: .5px solid var(--hair); margin-bottom: 6px; overflow-wrap: anywhere; }
.menu-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 9px; cursor: pointer; color: var(--pink-text); font-weight: 500; }
.menu-item:hover { background: var(--hover); }

.banner {
  background: var(--pink-tint); color: var(--pink-text); font-size: 13.5px; font-weight: 500;
  padding: 7px 16px; text-align: center; position: relative; z-index: 1000;
}
.progress { position: relative; height: 0; z-index: 1002; }
.progress.on::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 35%;
  background: var(--sky); border-radius: 2px; animation: slide 1.1s ease-in-out infinite;
}
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

.stage { position: relative; min-height: 0; }
.map { position: absolute; inset: 0; background: var(--surface-2); }

/* Floating details card (wide screens) */
.panel {
  position: absolute; z-index: 1000; top: 16px; left: 16px; bottom: auto;
  width: 344px; max-height: calc(100% - 32px); overflow: auto; overscroll-behavior: contain;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  border: .5px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 18px 16px;
  scrollbar-width: thin;
}
.panel:focus { outline: none; }
.grab { display: none; }

.hero { margin-bottom: 16px; }
.eyebrow { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot.live { background: var(--pink); box-shadow: 0 0 0 4px var(--pink-tint); }
.seen { font: 700 30px/1.15 var(--font-display); letter-spacing: -.025em; margin-top: 4px; }
.seen-abs { color: var(--ink-2); font-size: 14px; margin-top: 2px; min-height: 1.45em; }

.seg {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px; margin: 0 0 12px;
  border: 0; border-radius: 10px; background: var(--surface-2); min-width: 0;
}
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: block; text-align: center; padding: 5px 4px; border-radius: 8px; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--ink-2); transition: background-color .15s, color .15s;
}
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 1px; }

.custom { display: grid; gap: 8px; margin-bottom: 12px; }
.custom label { display: grid; grid-template-columns: 44px 1fr; align-items: center; font-size: 13px; font-weight: 500; color: var(--ink-2); min-width: 0; }
.custom input {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); min-width: 0; width: 100%;
  border: .5px solid var(--hair); border-radius: 9px; padding: 6px 8px; font-variant-numeric: tabular-nums;
}
.custom .btn { justify-self: end; }

.notice {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 14px; color: var(--ink-2); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px;
}
.notice.error { background: var(--pink-tint); color: var(--pink-text); }
.notice.error .link-btn { color: var(--pink-text); }
.notice p { text-wrap: pretty; }
.notice .link-btn { white-space: nowrap; font-size: 14px; }

.group { margin-top: 18px; }
.group-head { display: flex; align-items: center; justify-content: space-between; min-height: 30px; padding: 0 4px 4px; }
.group h2 { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.pt-nav { display: flex; gap: 2px; margin-right: -6px; }
.pt-when { font-size: 13px; color: var(--ink-2); padding: 0 4px 6px; }
.list { margin: 0; background: var(--surface); border-radius: 12px; border: .5px solid var(--hair); }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 42px; padding: 0 12px; position: relative;
}
.row + .row::before { content: ""; position: absolute; top: 0; left: 12px; right: 0; border-top: .5px solid var(--hair); }
.row dt { color: var(--ink-2); flex: none; }
.row dd { margin: 0; text-align: right; font-weight: 500; min-width: 0; }
.coords-row dd { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-right: -6px; text-align: left; }
.coords-row .mono { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse { font-size: 14px; margin: 10px 4px 0; }

.foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 0 2px; }
.updated { font-size: 12.5px; color: var(--ink-3); }
.switch { display: inline-flex; align-items: center; gap: 9px; border: 0; background: none; padding: 2px; cursor: pointer; font-weight: 500; border-radius: 999px; }
.switch-track { width: 40px; height: 24px; border-radius: 999px; background: var(--hair); position: relative; transition: background-color .2s; }
.switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch[aria-checked="true"] .switch-track { background: var(--sky); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(16px); }

/* MapLibre, in our language */
.maplibregl-map { font: 12px/1.4 var(--font); background: var(--surface-2); }
.maplibregl-canvas:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.maplibregl-ctrl-group { border: .5px solid var(--hair); border-radius: 12px; box-shadow: var(--shadow) !important; overflow: hidden; background: var(--glass) !important; }
.maplibregl-ctrl-group button, .maplibregl-ctrl-group a { width: 34px; height: 34px; color: var(--ink); background: transparent; }
.maplibregl-ctrl-group button + button, .maplibregl-ctrl-group a + a { border-top: .5px solid var(--hair); }
.maplibregl-ctrl-group button:not(:disabled):hover, .maplibregl-ctrl-group a:hover { background: var(--surface) !important; }
.maplibregl-ctrl-group button:focus:focus-visible, .maplibregl-ctrl-group a:focus-visible { box-shadow: inset 0 0 0 2px var(--sky); outline: none; }
.maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 10px 10px 0 0; }
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon, .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon { background-image: none !important; }
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::before, .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon::before {
  content: ""; display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask: var(--glyph) center / 18px 18px no-repeat; mask: var(--glyph) center / 18px 18px no-repeat;
}
.maplibregl-ctrl-zoom-in { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); }
.maplibregl-ctrl-zoom-out { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); }
.maplibregl-ctrl-group button:disabled .maplibregl-ctrl-icon::before { opacity: .35; }
.maplibregl-ctrl.maplibregl-ctrl-attrib { background: var(--glass); color: var(--ink-2); font-size: 11px; border-radius: 8px 0 0 0; padding: 1px 7px; margin: 0; }
.maplibregl-ctrl-attrib a { color: var(--sky-text); }
.maplibregl-ctrl-attrib.maplibregl-compact { border-radius: 12px; margin: 0 8px 8px 0; min-height: 24px; }
.maplibregl-ctrl-attrib-button:focus { box-shadow: none; }
.jt-pop .maplibregl-popup-content {
  background: var(--surface); color: var(--ink); border: .5px solid var(--hair); border-radius: 9px; box-shadow: var(--shadow);
  font: 500 12.5px/1.3 var(--font); padding: 5px 9px; white-space: nowrap;
}
.jt-pop .maplibregl-popup-tip { display: none; }
.jt-latest {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--pink); border: 3px solid var(--surface); box-shadow: 0 1px 3px rgba(12, 26, 46, .35);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--pink) 28%, transparent), 0 1px 3px rgba(12, 26, 46, .35); } }
@media (prefers-reduced-motion: reduce) {
  .jt-latest, .progress.on::after, #refresh.spinning svg { animation: none; }
}

/* Phone: the panel becomes a bottom sheet; the map ends where the sheet begins
   so attribution and the latest fix stay visible. */
@media (max-width: 760px) {
  .brand { font-size: 15px; margin-right: 2px; }
  .bar { gap: 6px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .map { bottom: calc(var(--sheet-h, 220px) - var(--radius)); }
  .panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: min(78%, 620px);
    border-radius: var(--radius) var(--radius) 0 0; border-width: .5px 0 0;
    background: var(--surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 4px 16px max(14px, env(safe-area-inset-bottom));
    box-shadow: 0 -10px 30px -18px rgba(12, 26, 46, .35);
  }
  .grab { display: grid; place-items: center; width: 100%; height: 22px; border: 0; background: none; cursor: pointer; padding: 0; margin-bottom: 4px; }
  .grab-bar { width: 38px; height: 5px; border-radius: 3px; background: var(--hair); }
  .hero { margin-bottom: 12px; }
  .seen { font-size: 26px; }
  .panel:not(.open) .panel-body { display: none; }
  .panel:not(.open) .custom { display: none; }
  .maplibregl-ctrl.maplibregl-ctrl-attrib { font-size: 10.5px; line-height: 1.35; max-width: calc(100vw - 20px); }
  .stage .maplibregl-ctrl-bottom-right { margin-bottom: var(--radius); }
}
@media (max-width: 420px) {
  .brand-mark { display: none; }
  .demo-extra { display: none; }
}
@media (max-width: 360px) {
  .nav a, .nav-soon { padding: 4px 9px; }
}
/* With three nav entries (Live, Trips, Me) the wordmark doesn't fit on phones: keep only the mark. */
@media (max-width: 480px) {
  .brand { font-size: 0; gap: 0; margin-right: 0; }
  .brand-mark { display: block; width: 22px; height: 22px; }
  .nav a { padding: 4px 11px; }
}


/* ===================== Trips ===================== */

:root { --ok: #15803D; --ok-tint: #DCFCE7; --danger: #DC2626; }
@media (prefers-color-scheme: dark) {
  :root { --ok: #4ADE80; --ok-tint: rgba(74, 222, 128, .13); --danger: #F87171; }
}

.page {
  overflow: auto; overscroll-behavior: contain; min-height: 0; position: relative;
  padding-bottom: env(safe-area-inset-bottom);
}
.page:focus { outline: none; }
.page-inner { max-width: 760px; margin: 0 auto; padding: 28px 24px 48px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.page-title { font: 700 30px/1.15 var(--font-display); letter-spacing: -.025em; }
.page-title:focus, .trip-title:focus, .section-title:focus { outline: none; }
.page-notice { margin: 0 0 16px; }
.notice-actions { display: inline-flex; align-items: center; gap: 6px; flex: none; margin: -6px -6px -6px 0; }
.notice.error .icon-btn { color: var(--pink-text); }

.btn.with-ic { display: inline-flex; align-items: center; gap: 6px; }
.btn.with-ic .ic { width: 17px; height: 17px; margin-left: -3px; }
.btn.small.with-ic { padding-left: 12px; }
.btn.tiny { padding: 5px 11px; font-size: 13.5px; font-weight: 600; border-radius: 9px; background: var(--surface-2); }
.btn.tiny:hover { background: var(--hair); }
.btn.danger, .btn.tiny.danger, .btn.danger-text { color: var(--pink-text); }
.btn.danger-text { background: transparent; padding-left: 8px; padding-right: 8px; }
.btn.danger-text:hover { background: var(--pink-tint); }
.btn.primary.danger-fill { background: var(--pink-text); }
.btn.primary.danger-fill:hover { background: color-mix(in srgb, var(--pink-text) 88%, #000); }
.btn:not(.primary):not(.small):not(.tiny):not(.danger-text):hover { background: var(--hair); }
.icon-btn.danger:hover { color: var(--pink-text); background: var(--pink-tint); }

.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.loading-row { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 14px; padding: 18px 4px; }
.loading-row .spinner { width: 16px; height: 16px; border-width: 2px; }
.skeleton { color: transparent; background: var(--surface-2); border-radius: 8px; }

.section { margin-top: 28px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; min-height: 34px; }
.section-title { font: 650 19px/1.25 var(--font-display); letter-spacing: -.015em; }
.list-page .section-title, .page-inner > .section > .section-title { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; padding: 0 4px 8px; font-family: var(--font); }
.section-help { color: var(--ink-2); font-size: 14px; margin: -2px 0 6px; text-wrap: pretty; max-width: 62ch; }
.sub-title { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; margin: 18px 4px 8px; }
.sub-title.in-sheet { margin: 8px 0 -4px; font-size: 14px; color: var(--ink); }
.muted-line { color: var(--ink-3); font-size: 14px; padding: 0 4px; }
.empty { background: var(--surface); border: .5px solid var(--hair); border-radius: 14px; padding: 18px 16px; color: var(--ink-2); font-size: 14.5px; text-wrap: pretty; }
.empty .page-title { color: var(--ink); margin-bottom: 6px; }

/* Status chips */
.chip {
  display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
.chip.ongoing { background: var(--pink-tint); color: var(--pink-text); }
.chip.upcoming, .chip.pending { background: var(--sky-tint); color: var(--sky-text); }
.chip.accepted { background: var(--ok-tint); color: var(--ok); }
.chip.revoked { color: var(--ink-3); }

/* Trip list */
.trip-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: .5px solid var(--hair); border-radius: 14px; overflow: hidden; }
.trip-list li + li { border-top: .5px solid var(--hair); }
.trip-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; min-height: 64px;
  color: inherit; text-decoration: none; transition: background-color .15s;
}
.trip-card:hover { background: var(--hover); }
.trip-card:focus-visible { outline-offset: -2px; }
.trip-card-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.trip-card-title { font-weight: 600; font-size: 16px; letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: balance; }
.trip-card-meta { color: var(--ink-2); font-size: 13.5px; }
.trip-card-perms { color: var(--ink-3); font-size: 13px; text-wrap: pretty; }
.chev { color: var(--ink-3); width: 16px; height: 16px; }

/* Trip detail */
.trip { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "body"; }
.trip-head { grid-area: head; padding: 18px 16px 4px; }
.trip-map-card { grid-area: map; position: relative; margin: 14px 16px 0; height: 320px; border-radius: var(--radius); overflow: hidden; border: .5px solid var(--hair); background: var(--surface-2); isolation: isolate; }
.trip-map { position: absolute; inset: 0; }
.trip-body { grid-area: body; padding: 0 16px 48px; }
@media (min-width: 900px) {
  .trip {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 46%);
    grid-template-areas: "head map" "body map"; grid-template-rows: auto 1fr;
    max-width: 1400px; margin: 0 auto;
  }
  .trip-head { padding: 28px 28px 4px 32px; }
  .trip-body { padding: 0 28px 56px 32px; }
  .trip-map-card {
    position: sticky; top: 16px; align-self: start; margin: 16px 16px 16px 0;
    height: calc(100dvh - var(--bar-h) - 32px); min-height: 360px;
  }
}
.back { display: inline-flex; align-items: center; gap: 2px; color: var(--sky-text); text-decoration: none; font-weight: 500; font-size: 15px; margin: 0 0 10px -5px; padding: 2px 4px; border-radius: 8px; }
.back .ic { width: 18px; height: 18px; }
.back:hover { text-decoration: underline; text-underline-offset: 3px; }
.trip-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.trip-title { font: 700 30px/1.15 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.head-actions { display: flex; gap: 2px; margin: 0 -6px 0 0; flex: none; }
.trip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-2); font-size: 14px; margin-top: 8px; }
.trip-meta .sep { color: var(--ink-3); margin-right: 8px; }
.trip-meta .nw { white-space: nowrap; }
.trip-meta .zone { color: var(--ink-3); }
.can-see {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 11px 13px; border-radius: 12px;
  background: var(--sky-tint); color: var(--ink); font-size: 14px; text-wrap: pretty;
}
.can-see .ic { color: var(--sky-text); margin-top: 1px; }
.can-see strong { font-weight: 600; }

.map-cap {
  position: absolute; z-index: 1000; left: 10px; top: 10px; max-width: calc(100% - 70px);
  display: flex; align-items: center; gap: 9px; padding: 8px 8px 8px 12px; min-height: 40px;
  background: var(--glass); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  border: .5px solid var(--hair); border-radius: 12px; box-shadow: var(--shadow);
}
.map-cap .dot { margin-left: 1px; }
.map-cap-text { display: grid; min-width: 0; padding-right: 4px; }
.map-cap-main { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.map-cap-sub { font-size: 12.5px; color: var(--ink-2); }
.map-cap .link-btn { font-size: 13.5px; padding: 0 4px; }

/* Itinerary */
.day { margin-top: 8px; }
.day + .day { margin-top: 18px; }
.day-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; margin: 0 4px 8px; }
.day-n { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.items { list-style: none; margin: 0; padding: 0; background: var(--surface); border: .5px solid var(--hair); border-radius: 14px; position: relative; }
.item { display: flex; gap: 12px; align-items: flex-start; padding: 13px 10px 13px 12px; position: relative; }
.item + .item::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; border-top: .5px solid var(--hair); }
.item-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--ink-2); }
.item-ic .ic { width: 18px; height: 18px; }
.item-ic.t-flight, .item-ic.t-transport { background: var(--sky-tint); color: var(--sky-text); }
.item-ic.t-stay { background: var(--pink-tint); color: var(--pink-text); }
.item-main { flex: 1; min-width: 0; display: grid; gap: 2px; padding-top: 1px; }
.item-title { font-weight: 600; letter-spacing: -.01em; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.item-time { color: var(--ink-2); font-size: 14px; }
.item-sub { color: var(--ink-2); font-size: 12.5px; }
.item-place { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 14px; color: var(--ink-2); }
.place-btn { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; text-align: left; }
.place-btn .ic { width: 15px; height: 15px; align-self: center; }
.item-addr { color: var(--ink-3); font-size: 13px; }
.item-notes { color: var(--ink-2); font-size: 13.5px; background: var(--surface-2); border-radius: 9px; padding: 6px 9px; margin-top: 5px; white-space: pre-line; overflow-wrap: anywhere; }
.badge { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); }
.badge .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.item > .icon-btn { margin-top: 0; }
/* Flight live status + Updates timeline (flight-updates.js) */
.fl-live { display: grid; gap: 6px; margin-top: 6px; padding: 8px 10px; background: var(--surface-2); border-radius: 11px; min-width: 0; }
.fl-live[hidden] { display: none; }
.fl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.fl-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); flex: none; }
.fl-head .td-chip { max-width: 100%; overflow-wrap: anywhere; }
.fl-upd > summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
.fl-upd > summary::-webkit-details-marker { display: none; }
.fl-upd > summary::before { content: "›"; display: inline-block; width: 8px; color: var(--ink-3); transition: transform .15s; flex: none; }
.fl-upd[open] > summary::before { transform: rotate(90deg); }
.fl-upd[open] .fl-latest { display: none; }
.fl-latest { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-upd > summary:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 6px; }
.fl-tl { list-style: none; margin: 8px 0 0; padding: 0; }
.fl-ev { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: start; column-gap: 9px; padding-bottom: 9px; font-size: 13.5px; color: var(--ink-2); }
.fl-ev:last-child { padding-bottom: 0; }
.fl-ev:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 16px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--hair); }
.fl-dot { width: 9px; height: 9px; margin: 5px 0 0 1.5px; border-radius: 50%; background: var(--ink-3); }
.fl-ev.latest .fl-dot { background: var(--sky); box-shadow: 0 0 0 3px var(--sky-tint); }
.fl-ev.sev-1 .fl-dot { background: var(--warn); }
.fl-ev.sev-2 .fl-dot { background: var(--danger); }
.fl-ev.latest .fl-txt { color: var(--ink); font-weight: 600; }
.fl-txt { overflow-wrap: anywhere; }
.fl-at { color: var(--ink-3); font-size: 12.5px; padding-top: 1px; }

/* People */
.people { list-style: none; margin: 0; padding: 0; background: var(--surface); border: .5px solid var(--hair); border-radius: 14px; }
.person { display: flex; gap: 12px; align-items: flex-start; padding: 12px; position: relative; }
.person + .person::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; border-top: .5px solid var(--hair); }
.person-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--sky-tint); color: var(--sky-text); font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.person-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.person-name { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.person-email { color: var(--ink-2); font-size: 13.5px; overflow-wrap: anywhere; }
.person-sub { color: var(--ink-2); font-size: 13.5px; text-wrap: pretty; }
.person-sub + .person-sub { color: var(--ink-3); font-size: 13px; }
.person-actions { display: flex; gap: 6px; flex: none; }
@media (max-width: 560px) {
  .person { flex-wrap: wrap; }
  .person-main { flex-basis: calc(100% - 44px); }
  .person-actions { margin-left: 44px; }
}

/* Sheets (modal dialogs). Centered on wide screens, bottom sheet on phones. */
dialog.sheet {
  border: .5px solid var(--hair); padding: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  width: min(460px, calc(100vw - 32px)); max-height: min(calc(100dvh - 48px), 860px);
  overflow: hidden;
}
dialog.sheet.wide { width: min(600px, calc(100vw - 32px)); }
dialog.sheet[open] { display: flex; flex-direction: column; animation: sheet-in .18s ease-out; }
dialog.sheet::backdrop { background: rgba(7, 11, 20, .42); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.sheet-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 10px 20px; border-bottom: .5px solid var(--hair); }
.sheet-head h2 { font: 650 18px/1.25 var(--font-display); letter-spacing: -.015em; }
.sheet-body { padding: 16px 20px 20px; overflow: auto; overscroll-behavior: contain; min-height: 0; flex: 1; display: grid; gap: 14px; align-content: start; }
.sheet-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: .5px solid var(--hair); background: var(--surface); }
.sheet-foot .foot-left { flex: 1; display: flex; }
.sheet-foot .btn { font-size: 15px; padding: 9px 18px; }
.sheet-foot .btn.danger-text { padding: 9px 10px; }
.sheet-body > .notice { margin: 0; }
.sheet-lead { color: var(--ink-2); font-size: 14px; margin-top: -4px; }
.confirm-text { color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 760px) {
  dialog.sheet, dialog.sheet.wide {
    width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--radius) var(--radius) 0 0;
    border-width: .5px 0 0; max-height: 92dvh;
  }
  @keyframes sheet-in { from { transform: translateY(24px); opacity: .6; } }
  .sheet-body { padding: 14px 16px 18px; }
  .sheet-head { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } }

/* Form fields */
.field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.field > label, .field-label { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } }
.input {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); width: 100%; min-width: 0;
  border: 1px solid var(--hair); border-radius: 10px; padding: 9px 11px; min-height: 40px;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--glow); }
.input:focus-visible { outline: none; }
.input::placeholder { color: var(--ink-3); }
select.input { padding-right: 8px; }
textarea.input { resize: vertical; min-height: 72px; line-height: 1.4; }
@media (max-width: 760px) { .input { font-size: 16px; } }
.help { font-size: 12.5px; color: var(--ink-3); text-wrap: pretty; }
.strong-help { color: var(--ink-2); font-size: 13.5px; }
.dt-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
@media (max-width: 420px) { .dt-row { grid-template-columns: 1fr; } }
.group-box { border: .5px solid var(--hair); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.group-box > legend { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0 5px; }

.type-pick { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; min-width: 0; }
.type-pick legend { margin-bottom: 6px; }
.type-pick label { position: relative; }
.type-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.type-pick label > span {
  display: grid; justify-items: center; gap: 5px; padding: 9px 2px 7px; border-radius: 12px; border: 1px solid var(--hair);
  font-size: 12px; font-weight: 500; color: var(--ink-2); transition: border-color .15s, background-color .15s;
}
.type-pick .item-ic { width: 28px; height: 28px; border-radius: 9px; }
.type-pick input:checked + span { border-color: var(--sky); background: var(--sky-tint); color: var(--ink); box-shadow: inset 0 0 0 1px var(--sky); }
.type-pick input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 2px; }
@media (max-width: 520px) { .type-pick { grid-template-columns: repeat(3, 1fr); } }

/* Switch (a styled checkbox with role=switch) */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 2px 0; }
.switch-label { display: grid; gap: 1px; font-weight: 500; cursor: pointer; }
.switch-input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 44px; height: 26px; border-radius: 999px; background: var(--hair); position: relative; transition: background-color .2s;
}
.switch-input::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s;
}
.switch-input:checked { background: var(--sky); }
.switch-input:checked::after { transform: translateX(18px); }
.switch-input:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* Permissions editor */
.perms { display: grid; gap: 14px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.preset {
  border: 1px solid var(--hair); background: var(--surface); color: var(--ink); border-radius: 999px;
  padding: 6px 12px; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.preset:hover { background: var(--hover); }
.preset[aria-pressed="true"] { background: var(--sky-tint); border-color: var(--sky); color: var(--sky-text); }
.types { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
.types legend { margin-bottom: 6px; }
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (max-width: 420px) { .type-grid { grid-template-columns: repeat(2, 1fr); } }
.check { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); cursor: pointer; font-size: 14px; font-weight: 500; }
.check.all { justify-self: start; padding-right: 14px; }
.check input { width: 17px; height: 17px; margin: 0; accent-color: var(--sky); flex: none; }
.perm-preview { font-size: 14px; color: var(--ink); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; text-wrap: pretty; }

/* Invite link */
.invite-done { display: grid; gap: 8px; }
.ok-line { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 6px; }
.ok-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-tint); color: var(--ok); flex: none; }
.ok-ic .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.link-field { font-size: 13px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.btn-row .btn { font-size: 15px; padding: 9px 16px; }
.btn.primary-soft { background: var(--sky-tint); color: var(--sky-text); }

/* Gate, invite variant */
.gate.invited .gm-halo { fill: var(--sky-tint); }

@media (max-width: 760px) {
  .page-inner { padding: 20px 16px 40px; }
  .page-title, .trip-title { font-size: 26px; }
}

/* Map pins for itinerary places */
.jt-pin {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink-2); border: 2px solid currentColor;
  box-shadow: 0 1px 2px rgba(12, 26, 46, .18), 0 4px 10px -2px rgba(12, 26, 46, .3);
}
.jt-pin .ic { width: 16px; height: 16px; stroke-width: 2; }
.jt-pin.t-flight, .jt-pin.t-transport { color: var(--sky-text); }
.jt-pin.t-stay { color: var(--pink-text); }
@media (max-width: 760px) {
  .map-cap { left: 8px; top: 8px; padding: 6px 6px 6px 10px; min-height: 0; gap: 7px; border-radius: 10px; max-width: calc(100% - 64px); }
  .map-cap-main { font-size: 13px; }
  .map-cap-sub { font-size: 12px; }
}
.jt-pin { position: relative; cursor: pointer; }
.jt-pin-n {
  position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--ink); color: var(--surface); border: 1.5px solid var(--surface);
  font: 600 11px/15px system-ui, sans-serif; text-align: center; box-sizing: border-box;
}

/* Map tools: search + my location */
.jt-tools a { display: grid; place-items: center; color: var(--ink); }
.jt-tools .ic { width: 18px; height: 18px; }
.jt-tools a.on { color: var(--sky-text); }
.jt-search {
  position: absolute; z-index: 1001; top: 10px; right: 56px; width: min(380px, calc(100% - 66px)); box-sizing: border-box;
  display: grid; gap: 6px; padding: 8px; background: var(--surface); color: var(--ink);
  border: .5px solid var(--hair); border-radius: 14px; box-shadow: var(--shadow); font: 15px/1.35 var(--font);
}
.jt-search-row { display: flex; align-items: center; gap: 6px; }
.jt-search-ic { width: 18px; height: 18px; color: var(--ink-3); margin-left: 4px; flex: none; }
.jt-search-input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent !important; padding-left: 4px; }
.jt-search-input::-webkit-search-cancel-button { display: none; }
.jt-search-close { flex: none; }
.jt-search-near { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 13.5px; padding: 2px 6px; }
.jt-search-near .ic { width: 15px; height: 15px; }
.jt-search-status { margin: 0; padding: 0 6px; font-size: 12.5px; color: var(--ink-3); }
.jt-search-status:empty { display: none; }
.jt-search-list { list-style: none; margin: 0; padding: 0; max-height: min(320px, 50vh); overflow-y: auto; }
.jt-search-list:empty { display: none; }
.jt-search-hit {
  display: grid; gap: 1px; width: 100%; text-align: left; border: 0; background: none; color: inherit;
  font: inherit; padding: 8px 8px; border-radius: 9px; cursor: pointer;
}
.jt-search-hit:hover, .jt-search-hit:focus-visible { background: var(--surface-2); outline: none; }
.jt-search-hit:focus-visible { box-shadow: inset 0 0 0 2px var(--sky); }
.jt-search-name { font-weight: 600; font-size: 14.5px; }
.jt-search-sub { font-size: 12.5px; color: var(--ink-2); }
.jt-pin-found { color: var(--pink-text); border-width: 2.5px; }
.jt-found-tip strong { font-weight: 600; }
.jt-tip-sub { color: var(--ink-2); font-size: 12px; }
.jt-you { width: 18px; height: 18px; border-radius: 50%; background: var(--sky); border: 3px solid var(--surface); box-shadow: 0 1px 3px rgba(12, 26, 46, .35); }
.jt-map-msg {
  position: absolute; z-index: 1001; left: 50%; bottom: 40px; transform: translateX(-50%); margin: 0;
  max-width: calc(100% - 32px); padding: 7px 12px; border-radius: 10px; background: var(--ink); color: var(--surface);
  font: 500 13px/1.35 var(--font); box-shadow: var(--shadow); text-align: center;
}

/* ===================== Files ===================== */

:root { --warn: #B45309; --warn-tint: #FEF3C7; }
@media (prefers-color-scheme: dark) {
  :root { --warn: #FBBF24; --warn-tint: rgba(251, 191, 36, .13); }
}

.drop {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; margin: 4px 0 10px;
  border: 1.5px dashed var(--hair); border-radius: 14px; background: var(--surface);
  transition: border-color .15s, background-color .15s;
}
.drop.over { border-color: var(--sky); background: var(--sky-tint); }
.drop-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--sky-tint); color: var(--sky-text); }
.drop-text { flex: 1; min-width: 0; }
.drop-title { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.drop-or { font-weight: 400; color: var(--ink-2); }
.drop-hint { color: var(--ink-3); font-size: 12.5px; }
@media (hover: none) { .drop-or { display: none; } }

.uploads { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.upload { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--surface-2); }
.upload-ic { color: var(--sky-text); display: grid; }
.upload.done .upload-ic { color: var(--ok); }
.upload.failed { background: var(--pink-tint); }
.upload.failed .upload-ic, .upload-err { color: var(--pink-text); }
.upload-main { flex: 1; min-width: 0; display: grid; gap: 5px; }
.upload-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-err { font-size: 13px; }
.upload-pct { font-size: 12.5px; color: var(--ink-2); min-width: 36px; text-align: right; padding-right: 4px; }
.bar-track { height: 4px; border-radius: 999px; background: var(--hair); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--sky); transition: width .2s; }
.upload.done .bar-fill { background: var(--ok); }

.sub-title .count { margin-left: 6px; font-weight: 500; color: var(--ink-3); }
.files { list-style: none; margin: 0; padding: 0; background: var(--surface); border: .5px solid var(--hair); border-radius: 14px; }
.file { display: flex; gap: 12px; align-items: center; padding: 10px 8px 10px 12px; position: relative; }
.file + .file::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; border-top: .5px solid var(--hair); }
.file-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--ink-2); }
.file-main { flex: 1; min-width: 0; display: grid; gap: 1px; justify-items: start; }
.file-name { color: var(--ink); font-weight: 600; letter-spacing: -.01em; text-align: left; overflow-wrap: anywhere; font-size: 15px; }
.file-meta { color: var(--ink-2); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.file-link { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-3); min-width: 0; overflow-wrap: anywhere; }
.file-link .ic { width: 13px; height: 13px; }
.file-warn { color: var(--warn); font-size: 12.5px; text-wrap: pretty; }
.file-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.files-empty { padding: 4px 4px 0; }

.vis-toggle {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 8px; margin-right: 4px;
  border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); color: var(--ink-2);
  font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s;
}
.vis-toggle .ic { width: 14px; height: 14px; stroke-width: 2; }
.vis-toggle:hover { background: var(--hover); }
.vis-toggle.shared { background: var(--sky-tint); border-color: transparent; color: var(--sky-text); }
.vis-toggle:disabled { opacity: .6; cursor: progress; }
.vis-toggle.static { cursor: default; background: transparent; border-color: transparent; color: var(--ink-3); padding: 0 6px; }
.vis-toggle.static:hover { background: transparent; }
@media (max-width: 560px) {
  .file { flex-wrap: wrap; row-gap: 4px; }
  .file-main { flex-basis: calc(100% - 44px); }
  .file-actions { margin-left: 44px; width: calc(100% - 44px); }
  .file-actions .vis-toggle { margin-right: auto; }
  .files .file + .file::before { left: 12px; }
}

.file-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.file-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 26px; padding: 0 10px 0 7px;
  border: .5px solid var(--hair); border-radius: 999px; background: var(--surface-2); color: var(--ink);
  font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background-color .15s;
}
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .ic { width: 13px; height: 13px; color: var(--sky-text); }
.file-chip:hover { background: var(--sky-tint); }

.file-sheet-name { display: flex; align-items: center; gap: 10px; }
.file-sheet-name > span:last-child { display: grid; min-width: 0; }
.file-sheet-file { font-weight: 600; overflow-wrap: anywhere; }

/* ===================== Me ===================== */

.private-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 18px; padding: 11px 13px; border-radius: 12px;
  background: var(--ok-tint); color: var(--ink); font-size: 14px; text-wrap: pretty;
}
.private-note .ic { color: var(--ok); margin-top: 1px; }
.private-note strong { font-weight: 600; }
.me-form { display: grid; gap: 16px; }
.me-box { padding: 12px 14px 14px; gap: 12px; background: var(--surface); }
.me-box > legend { font-size: 14px; color: var(--ink); }
.me-box-help { margin-top: -4px; }
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) { .field-row.three { grid-template-columns: 1fr 1fr; } .field-row.three > :first-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { .field-row.three { grid-template-columns: 1fr; } }
.input.upper { text-transform: uppercase; }
.input.mono-in { font-family: var(--mono); font-size: 14px; }
.input.last4 { max-width: 120px; letter-spacing: .12em; }

.me-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.me-row { display: flex; gap: 6px; align-items: flex-start; padding: 10px 6px 10px 12px; border-radius: 12px; background: var(--surface-2); }
.me-row-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.me-row-grid .field.wide { grid-column: 1 / -1; }
.me-row .input { background: var(--surface); }
.me-row-del { margin-top: 20px; }
.add-row { justify-self: start; display: inline-flex; align-items: center; gap: 4px; }
.add-row .ic { width: 15px; height: 15px; }

.imported { display: grid; gap: 10px; padding: 12px 14px 14px; border-radius: 12px; border: 1px solid var(--warn); background: var(--warn-tint); }
.imported-head { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.imported-head .ic { color: var(--warn); }
.imported textarea.input { font-family: var(--mono); font-size: 13.5px; }

.notice.warn { background: var(--warn-tint); color: var(--ink); }
.expiry { justify-content: flex-start; align-items: flex-start; margin: 0; }
.expiry > .ic { flex: none; margin-top: 2px; color: var(--warn); }
.expiry.error > .ic { color: var(--pink-text); }
.expiry > div { display: grid; gap: 2px; }
.expiry-help { color: var(--ink-2); font-size: 13px; }

.me-save {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin: 0 -4px; padding: 10px 4px max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--bg) 30%);
}
.save-status { color: var(--ink-2); font-size: 13.5px; }
.me-form > .notice { margin: 0; }

/* ---- spotlight ---- */
/* Spotlight search (search.js): a modal <dialog> over a blurred page, the card a fifth of the way down. */
.search-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; min-width: 190px; padding: 0 6px 0 11px;
  border: 0; border-radius: 10px; background: var(--surface-2); color: var(--ink-3); cursor: pointer; font-size: 13.5px;
  transition: background-color .15s, color .15s;
}
.search-btn:hover { color: var(--ink-2); background: color-mix(in srgb, var(--surface-2) 70%, var(--hair)); }
.search-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.search-btn-label { flex: 1; text-align: left; }
.search-btn kbd { font: inherit; font-size: 11.5px; padding: 1px 6px; border-radius: 6px; background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-sm); }
@media (max-width: 900px) {
  .search-btn { min-width: 0; width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; background: transparent; color: var(--ink-2); }
  .search-btn:hover { background: var(--surface-2); color: var(--ink); }
  .search-btn svg { width: 19px; height: 19px; }
  .search-btn-label, .search-btn kbd { display: none; }
}

dialog.sx {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  padding: 20vh 16px 24px; border: 0; background: transparent; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; overflow: hidden;
  animation: sx-fade .12s ease-out;
}
dialog.sx:not([open]) { display: none; }
dialog.sx::backdrop {
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sx-card {
  width: min(640px, 100%); max-height: min(560px, 72vh); display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: 16px;
  box-shadow: 0 0 0 .5px var(--hair), 0 2px 6px rgba(12, 26, 46, .08), 0 24px 60px -20px rgba(12, 26, 46, .45);
  animation: sx-in .14s ease-out;
}
@keyframes sx-fade { from { opacity: 0; } }
@keyframes sx-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

.sx-head { display: flex; align-items: center; gap: 10px; height: 56px; flex: none; padding: 0 10px 0 18px; border-bottom: .5px solid var(--hair); }
.sx-head-ic { width: 19px; height: 19px; color: var(--ink-3); }
.sx-input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; padding: 0;
  color: var(--ink); font: inherit; font-size: 17px; letter-spacing: -.01em;
}
.sx-input::placeholder { color: var(--ink-3); }
.sx-input::-webkit-search-cancel-button { display: none; }
.sx-esc {
  flex: none; display: inline-grid; place-items: center; height: 24px; min-width: 32px; padding: 0 7px; border: 0; border-radius: 7px;
  background: var(--surface-2); color: var(--ink-2); font-size: 11.5px; cursor: pointer;
}
.sx-esc:hover { color: var(--ink); }
.sx-esc-x { display: none; width: 16px; height: 16px; }

.sx-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 8px 8px; overscroll-behavior: contain; }
.sx-group-label { padding: 12px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.sx-list > :first-child .sx-group-label { padding-top: 8px; }
.sx-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.sx-row.sel { background: var(--hover); box-shadow: inset 0 0 0 .5px var(--hair); }
.sx-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); }
.sx-ic .ic { width: 17px; height: 17px; }
.sx-ic.g-flight, .sx-ic.g-transport, .sx-ic.g-trip, .sx-ic.g-map { background: var(--sky-tint); color: var(--sky-text); }
.sx-ic.g-stay, .sx-ic.g-live { background: var(--pink-tint); color: var(--pink-text); }
.sx-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sx-title, .sx-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-title { font-size: 14.5px; color: var(--ink); }
.sx-sub { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sx-row mark { background: var(--sky-tint); color: var(--sky-text); font-weight: 600; border-radius: 3px; padding: 0 1px; margin: 0 -1px; }
.sx-tag { flex: none; color: var(--ink-3); display: grid; }
.sx-tag .ic { width: 14px; height: 14px; }
.sx-more { min-height: 36px; }
.sx-more .sx-ic { background: none; width: 30px; height: 20px; color: var(--sky-text); }
.sx-more .sx-ic .ic { width: 14px; height: 14px; transform: rotate(90deg); }
.sx-more .sx-title { font-size: 13px; color: var(--sky-text); font-weight: 500; }
.sx-ask .sx-ic { background: var(--pink-tint); color: var(--pink-text); }
.sx-ask b { font-weight: 600; }
.sx-none { padding: 16px 12px 8px; font-size: 13.5px; color: var(--ink-2); }

.sx-foot {
  flex: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 9px 18px; border-top: .5px solid var(--hair);
  font-size: 11.5px; color: var(--ink-3); background: var(--bg);
}
.sx-foot span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sx-foot kbd { font: inherit; font-size: 11px; color: var(--ink-2); }

/* An item the search went to: lit for a moment. */
.sx-flash { animation: sx-flash 2s ease-out; border-radius: 12px; }
@keyframes sx-flash { 0%, 45% { box-shadow: 0 0 0 3px var(--sky-tint), inset 0 0 0 1.5px var(--sky); } 100% { box-shadow: 0 0 0 0 transparent; } }
.sx-flash:focus-visible { outline: none; }

@media (max-width: 760px) {
  dialog.sx { padding: max(10px, env(safe-area-inset-top)) 10px 10px; }
  .sx-card { max-height: min(640px, 82vh); border-radius: 14px; }
  .sx-input { font-size: 16px; }
  .sx-foot { display: none; }
  .sx-esc { min-width: 32px; height: 32px; border-radius: 50%; background: transparent; }
  .sx-esc-key { display: none; }
  .sx-esc-x { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.sx, .sx-card { animation: none; }
  .sx-flash { animation: none; box-shadow: 0 0 0 3px var(--sky-tint); }
}
@media (forced-colors: active) {
  .sx-row.sel { outline: 2px solid Highlight; }
  .sx-row mark { forced-color-adjust: none; }
}
/* ---- end spotlight ---- */

/* ---- chat ---- */
/* Desktop only (web/app/chat.js): a right-side panel. Floating by default; pinned pushes the page. */
:root { --chat-w: 400px; }
.nav-chat {
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-2); background: none; border: 0; cursor: pointer;
  padding: 4px 13px; border-radius: 8px;
}
.nav-chat:hover { color: var(--ink); }
.nav-chat.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.chat {
  position: fixed; z-index: 1002; top: calc(var(--bar-h) + 8px); right: 8px; bottom: 8px; width: var(--chat-w); max-width: calc(100vw - 16px);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border: .5px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.chat[hidden] { display: none; }
.chat-resize { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 8px; cursor: ew-resize; touch-action: none; }
.chat-resize::after { content: ''; position: absolute; top: 50%; left: 2px; width: 3px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--hair); opacity: 0; transition: opacity .15s; }
.chat-resize:hover::after, .chat-resize:focus-visible::after, html.chat-resizing .chat-resize::after { opacity: 1; }
.chat-resize:focus-visible { outline: none; }
html.chat-resizing, html.chat-resizing * { cursor: ew-resize !important; user-select: none !important; }
html.chat-resizing .chat { animation: none; }
.chat.pinned { top: var(--bar-h); right: 0; bottom: 0; border-radius: 0; border-width: 0 0 0 .5px; box-shadow: none; }
.app.chat-pinned > .stage, .app.chat-pinned > .page, .app.chat-pinned > .banner, .app.chat-pinned > .progress { margin-right: var(--chat-w); }

.chat-head { display: flex; align-items: center; gap: 2px; padding: 8px 8px 8px 6px; border-bottom: .5px solid var(--hair); flex: none; }
.chat-title { margin: 0 0 0 4px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.chat-head-sp { flex: 1; }
.chat .icon-btn svg, .chat .ic { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.chat .ic { width: 16px; height: 16px; flex: none; }
.chat-head .icon-btn[aria-pressed="true"], .chat-head .icon-btn[aria-expanded="true"] { color: var(--sky-text); background: var(--sky-tint); }

.chat-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.chat-log:focus { outline: none; }
.chat-msg { max-width: 100%; }
.chat-msg.user { align-self: flex-end; max-width: 88%; }
.chat-msg.user .bubble { background: var(--sky); color: #fff; padding: 8px 12px; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; }
.chat-msg.assistant { align-self: stretch; position: relative; }
.chat-actions { display: flex; gap: 2px; margin-top: 2px; opacity: 0; transition: opacity .12s; }
.chat-msg.assistant:hover .chat-actions, .chat-actions:focus-within { opacity: 1; }
.chat-copy.done { color: var(--sky-text); }

.md { font-size: 14px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 8px; }
.md .md-h { margin: 12px 0 6px; font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.md h3.md-h { font-size: 15.5px; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 20px; }
.md li { margin: 2px 0; }
.md li > ul, .md li > ol { margin: 2px 0 0; }
.md a { color: var(--sky-text); text-decoration: underline; text-underline-offset: 2px; }
.md code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.md .md-pre { margin: 0 0 8px; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; overflow-x: auto; }
.md .md-pre code { background: none; padding: 0; white-space: pre; }
.md blockquote { margin: 0 0 8px; padding: 2px 0 2px 10px; border-left: 3px solid var(--hair); color: var(--ink-2); }
.md hr { border: 0; border-top: .5px solid var(--hair); margin: 10px 0; }
.md .md-table { overflow-x: auto; margin: 0 0 8px; }
.md table { border-collapse: collapse; font-size: 13px; }
.md th, .md td { text-align: left; padding: 5px 9px; border-bottom: .5px solid var(--hair); vertical-align: top; }
.md th { font-weight: 600; color: var(--ink-2); }
.md .caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--sky); border-radius: 1px; animation: chat-blink 1s steps(2, start) infinite; }
@keyframes chat-blink { to { visibility: hidden; } }

.chat-tool { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); padding: 4px 9px; border-radius: 9px; background: var(--surface-2); align-self: flex-start; max-width: 100%; }
.chat-tool > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-tool .ic { width: 13px; height: 13px; color: var(--ink-3); }
.chat-tool.error, .chat-tool.error .ic { color: var(--pink-text); }
.chat-error { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--pink-text); background: var(--pink-tint); padding: 8px 10px; border-radius: 10px; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-error .ic { margin-top: 2px; }
.chat-note { font-size: 12.5px; color: var(--ink-3); text-align: center; }
.chat-thinking { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.chat-thinking .dots { display: inline-flex; gap: 3px; }
.chat-thinking .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: chat-dot 1.2s infinite ease-in-out; }
.chat-thinking .dots i:nth-child(2) { animation-delay: .15s; }
.chat-thinking .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

.chat-empty { margin: auto 0; padding: 12px 6px 24px; display: grid; justify-items: center; text-align: center; gap: 6px; }
.chat-empty-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--sky-tint); color: var(--sky-text); margin-bottom: 4px; }
.chat-empty-mark .ic { width: 22px; height: 22px; }
.chat-empty-title { margin: 0; font-size: 16px; font-weight: 650; }
.chat-empty-sub { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); max-width: 290px; }
.chat-suggest { display: grid; gap: 6px; width: 100%; max-width: 300px; }
.chat-chip { font: inherit; font-size: 13.5px; text-align: left; color: var(--ink); background: var(--surface-2); border: .5px solid var(--hair); border-radius: 12px; padding: 8px 12px; cursor: pointer; }
.chat-chip:hover { border-color: var(--sky); color: var(--sky-text); }

.chat-install { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); }
.chat-install p { margin: 0; }
.chat-install-title { font-size: 15px; font-weight: 650; color: var(--ink); }
.chat-install-why { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.chat-install code { font-family: var(--mono); font-size: 12.5px; background: var(--surface); padding: 1px 5px; border-radius: 5px; }
.chat-install-actions { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.chat-install-actions .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.chat-install-actions .btn .ic { width: 14px; height: 14px; }
.chat-install-actions .link-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; }

.chat-history { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 8px; }
.chat-history[hidden] { display: none; }
.chat-hhead { margin: 2px 8px 8px; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.chat-hlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chat-hrow { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.chat-hrow:hover, .chat-hrow.current { background: var(--surface-2); }
.chat-hopen { flex: 1; min-width: 0; display: grid; gap: 1px; text-align: left; font: inherit; background: none; border: 0; padding: 7px 10px; cursor: pointer; color: var(--ink); }
.chat-htitle { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-hmeta { font-size: 12px; color: var(--ink-3); }
.chat-hrow .icon-btn { opacity: 0; }
.chat-hrow:hover .icon-btn, .chat-hrow .icon-btn:focus-visible { opacity: 1; }
.chat-hnone { margin: 8px; color: var(--ink-3); font-size: 13.5px; }

.chat-compose { flex: none; display: flex; align-items: flex-end; gap: 8px; margin: 6px 12px 0; padding: 6px 6px 6px 12px; border: .5px solid var(--hair); border-radius: 16px; background: var(--surface-2); }
.chat-compose:focus-within { border-color: var(--sky); box-shadow: 0 0 0 3px var(--glow); }
.chat-input { flex: 1; min-width: 0; resize: none; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.45; padding: 5px 0; max-height: 180px; outline: none; }
.chat-input:disabled { opacity: .5; }
.chat.chat-drop .chat-compose { border-color: var(--sky); border-style: dashed; box-shadow: 0 0 0 3px var(--glow); }
.chat-send { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--sky); color: #fff; cursor: pointer; }
.chat-send .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.chat-send.stop { background: var(--ink); color: var(--surface); }
.chat-send.stop .ic { fill: currentColor; }
.chat-send:disabled { opacity: .4; cursor: default; }
.chat-foot { flex: none; margin: 6px 14px 10px; font-size: 11.5px; color: var(--ink-3); text-align: center; }

@media (max-width: 900px) {
  .app.chat-pinned > .stage, .app.chat-pinned > .page, .app.chat-pinned > .banner, .app.chat-pinned > .progress { margin-right: 0; }
  .chat.pinned { top: calc(var(--bar-h) + 8px); right: 8px; bottom: 8px; border-radius: var(--radius); border-width: .5px; box-shadow: var(--shadow); }
}
@media (prefers-reduced-motion: reduce) {
  .md .caret, .chat-thinking .dots i { animation: none; }
}
/* ---- end chat ---- */

/* ---- google maps link ---- */
.gmaps-link { display: inline-block; margin-left: .5em; font-size: .85em; color: var(--sky-text); font-weight: 500; text-decoration: none; white-space: nowrap; }
.gmaps-link:hover, .gmaps-link:focus-visible { text-decoration: underline; }
.gmaps-link::after { content: " ↗"; }
.jt-tip-link { display: block; margin: .35em 0 0; }
/* ---- end google maps link ---- */

/* ---- settings ---- */
/* Theme override from Settings › Appearance (prefs.js sets html[data-theme]). Higher specificity
   than the plain :root tokens and the prefers-color-scheme block above, so it wins either way. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F8FC; --surface: #FFFFFF; --surface-2: #EDF2F8;
  --ink: #0C1A2E; --ink-2: #4D5E76; --ink-3: #8796AB; --hair: #DCE3ED; --hover: #F3F7FB;
  --sky: #0EA5E9; --sky-text: #0369A1; --sky-tint: #E0F2FE;
  --pink: #EC4899; --pink-text: #BE185D; --pink-tint: #FCE7F3;
  --trail: #0284C7; --glass: rgba(255, 255, 255, .86);
  --shadow: 0 1px 2px rgba(12, 26, 46, .06), 0 14px 36px -16px rgba(12, 26, 46, .28);
  --shadow-sm: 0 1px 2px rgba(12, 26, 46, .12); --glow: rgba(14, 165, 233, .13);
  --ok: #15803D; --ok-tint: #DCFCE7; --danger: #DC2626; --warn: #B45309; --warn-tint: #FEF3C7;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070B14; --surface: #0F1727; --surface-2: #172236;
  --ink: #E7EDF6; --ink-2: #9DABC0; --ink-3: #6A7A92; --hair: #1E2A3E; --hover: #131D30;
  --sky: #38BDF8; --sky-text: #38BDF8; --sky-tint: rgba(56, 189, 248, .14);
  --pink: #F472B6; --pink-text: #F472B6; --pink-tint: rgba(244, 114, 182, .15);
  --trail: #38BDF8; --glass: rgba(15, 23, 39, .86);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 36px -16px rgba(0, 0, 0, .7);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --glow: rgba(56, 189, 248, .10);
  --ok: #4ADE80; --ok-tint: rgba(74, 222, 128, .13); --danger: #F87171; --warn: #FBBF24; --warn-tint: rgba(251, 191, 36, .13);
}

/* Compact lists (Settings › Appearance) */
.compact .item { padding-top: 6px; padding-bottom: 6px; }
.compact .items { gap: 4px; }
.compact .person, .compact .file { padding-top: 7px; padding-bottom: 7px; }
.compact .trip-card { padding-top: 10px; padding-bottom: 10px; }
.compact .set-row { padding-top: 8px; padding-bottom: 8px; }
.compact .row { padding-top: 7px; padding-bottom: 7px; }

/* Header: gear + Settings nav entry (the nav entry only where there's room) */
#settings-link { display: grid; place-items: center; text-decoration: none; color: var(--ink-2); }
#settings-link[aria-current="page"], .nav-settings[aria-current="page"] ~ * #settings-link { color: var(--sky-text); }
@media (max-width: 1000px) { .nav a.nav-settings { display: none; } }
a.menu-item { color: var(--ink); text-decoration: none; }
a.menu-item + button.menu-item { margin-top: 4px; border-top: .5px solid var(--hair); border-radius: 0 0 9px 9px; }

/* Layout: tab list on the left, content on the right */
.set { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 32px; max-width: 1040px; margin: 0 auto; padding: 28px 24px 56px; align-items: start; }
.set-side { position: sticky; top: 0; display: grid; gap: 10px; }
.set-side-title { font: 700 22px/1.2 var(--font-display); letter-spacing: -.02em; padding: 0 8px 4px; }
.set-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 10px; background: var(--surface-2); color: var(--ink-3); }
.set-search .ic { width: 16px; height: 16px; flex: none; }
.set-search-input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; padding: 8px 0; outline: none; }
.set-search:focus-within { outline: 2px solid var(--sky); outline-offset: 1px; }
.set-search-input::-webkit-search-cancel-button { cursor: pointer; }
.set-tabs { display: grid; gap: 2px; }
.set-tab { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.set-tab .ic { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.set-tab:hover { background: var(--hover); color: var(--ink); }
.set-tab[aria-current="page"] { background: var(--sky-tint); color: var(--sky-text); }
.set-tab[aria-current="page"] .ic { color: var(--sky-text); }

.set-main { min-width: 0; display: grid; gap: 6px; }
.set-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.set-title { font: 700 28px/1.15 var(--font-display); letter-spacing: -.025em; }
.set-title:focus { outline: none; }
.set-sync { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.set-sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.set-sync.synced .set-sync-dot { background: var(--ok); }
.set-sync.syncing .set-sync-dot { background: var(--sky); animation: set-pulse 1s ease-in-out infinite; }
.set-sync.error { color: var(--pink-text); }
.set-sync.error .link-btn { color: var(--pink-text); font-size: 12.5px; }
@keyframes set-pulse { 50% { opacity: .35; } }
.set-lead { color: var(--ink-2); font-size: 14.5px; margin-bottom: 10px; text-wrap: pretty; }
.set-body { display: grid; gap: 22px; }
.set-empty { color: var(--ink-3); padding: 24px 4px; }

.set-group { display: grid; gap: 8px; }
.set-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px; }
.set-group-title { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; font-family: var(--font); }
.set-group-link { font-size: 13px; color: var(--sky-text); text-decoration: none; }
.set-group-link:hover { text-decoration: underline; }
.set-card { background: var(--surface); border: .5px solid var(--hair); border-radius: 14px; }
.set-note { font-size: 12.5px; color: var(--ink-3); padding: 0 4px; text-wrap: pretty; }

.set-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 16px; position: relative; border-radius: 14px; transition: background-color .6s; }
.set-row + .set-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--hair); }
.set-row.wide { display: grid; justify-content: stretch; gap: 10px; }
.set-row.flash { background: var(--sky-tint); transition: none; }
.set-row-text { min-width: 0; display: grid; gap: 2px; }
.set-row-title { font-weight: 550; }
.set-row-desc { font-size: 13px; color: var(--ink-2); text-wrap: pretty; }
.set-row-ctl { flex: none; display: flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 0; }
.set-row.wide .set-row-ctl { justify-content: stretch; display: block; }

.set-seg { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--surface-2); gap: 2px; }
.set-seg button { border: 0; background: none; padding: 5px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.set-seg button:hover { color: var(--ink); }
.set-seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.set-select { width: auto; min-width: 160px; padding-top: 7px; padding-bottom: 7px; }
.set-text { width: 260px; max-width: 100%; padding-top: 7px; padding-bottom: 7px; }
.set-static { font-size: 14px; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.set-static.muted { color: var(--ink-3); }
.set-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.set-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.set-status.active .set-status-dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tint); }
.set-status.quiet .set-status-dot { background: var(--sky); }
.set-status.stale .set-status-dot { background: var(--warn); }
.set-inline-notice { margin: 0; }
.set-types { display: flex; flex-wrap: wrap; gap: 6px; }
.set-links { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; justify-content: flex-end; }
.set-links a { color: var(--sky-text); text-decoration: none; font-size: 14px; }
.set-links a:hover { text-decoration: underline; }
.set-invite .perms { gap: 12px; }

.set-people { display: grid; gap: 8px; }
.set-people-head { display: flex; justify-content: flex-end; }
.set-people .people { border: 0; background: none; }
.set-people .person { padding-left: 0; padding-right: 0; }
.set-people .person + .person::before { left: 44px; }
.set-access { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.set-access-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.set-access-main { min-width: 0; display: grid; gap: 2px; }
.set-access-trip { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 14px; }
.set-access-trip:hover { color: var(--sky-text); }
.set-access-main .chip { justify-self: start; }

.set-account { display: flex; align-items: center; gap: 14px; padding: 16px; }
.set-account-av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--sky-tint); color: var(--sky-text); font-size: 18px; font-weight: 650; }
.set-account-main { min-width: 0; display: grid; gap: 2px; }
.set-account-name { font: 650 18px/1.25 var(--font-display); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.set-account-main .person-email { font-size: 14px; }
.set-verified { color: var(--ok); }
.chip.role-owner { background: var(--pink-tint); color: var(--pink-text); }
.chip.role-viewer { background: var(--surface-2); color: var(--ink-2); }
.chip.role-editor { background: var(--ok-tint); color: var(--ok); }

/* Phones: the tab list becomes a scrolling pill strip above the content */
@media (max-width: 760px) {
  .set { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 16px 48px; }
  .set-side { position: static; gap: 8px; }
  .set-side-title { display: none; }
  .set-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
  .set-tabs::-webkit-scrollbar { display: none; }
  .set-tab { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13.5px; }
  .set-tab .ic { width: 15px; height: 15px; }
  .set-title { font-size: 24px; }
  .set-row { flex-wrap: wrap; padding: 12px 14px; gap: 10px 14px; }
  .set-row-text { flex: 1 1 200px; }
  .set-row-ctl { flex: 0 1 auto; }
  .set-select { min-width: 0; }
  .set-text { width: 100%; }
  .set-seg { flex-wrap: wrap; }
}

/* People section (people.js): roles, personal info, the owner's shared details */
.pp-roles { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-roles legend { margin-bottom: 6px; }
.pp-role { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hair); cursor: pointer; }
.pp-role > span { display: grid; gap: 2px; }
.pp-role input { margin: 3px 0 0; accent-color: var(--sky); flex: none; }
.pp-role:has(input:checked) { border-color: var(--sky); background: var(--sky-tint); box-shadow: inset 0 0 0 1px var(--sky); }
.pp-role:has(input:focus-visible) { outline: 2px solid var(--sky); outline-offset: 2px; }
@media (max-width: 420px) { .pp-roles { grid-template-columns: 1fr; } }
.pp-pii { gap: 8px; }
.pp-pii-row { align-items: flex-start; background: var(--surface-2); }
.pp-pii-row > span { display: grid; gap: 1px; }
.pp-pii-row input { margin-top: 2px; }
.pp-pii-row.warn:has(input:checked) { background: var(--warn-tint); }
.pp-warn { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; border: 1px solid var(--warn); }
.pp-warn .ic { color: var(--warn); flex: none; margin-top: 1px; }
.pp-preview { display: grid; gap: 6px; }
.pp-summary { color: var(--ink); }
.pp-owner { display: grid; gap: 8px; margin-top: 14px; }
.pp-owner-body { display: grid; gap: 10px; }
.pp-dl .row dd { overflow-wrap: anywhere; }
.pp-docs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.pp-docs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface); border: .5px solid var(--hair); }
.chip.role-editor, .chip.role-viewer { margin-left: 2px; }

/* Trip: jump links to the sections */
.trip-sections { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; border: .5px solid var(--hair); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.chip-btn .ic { width: 15px; height: 15px; }
.chip-btn:hover { color: var(--ink); background: var(--hover); }
/* ---- end settings ---- */

/* ---- push-offline ---- */
.set-inline { display: flex; align-items: center; gap: 10px; }
.files-offline-note { margin: 0 0 8px; font-size: 0.85em; }
/* ---- end push-offline ---- */
/* ---- today ---- */
.today .td-trip { color: var(--ink-2); margin: 0 0 14px; font-size: 14.5px; }
.today .td-trip a { color: var(--sky-text); text-decoration: none; font-weight: 600; }
.td-muted { color: var(--ink-3); }
.td-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.td-count, .td-clock { background: var(--surface); border: .5px solid var(--hair); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px; }
.td-count-label, .td-card-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.td-count-val { font: 700 28px/1.1 var(--font-display); letter-spacing: -.02em; }
.td-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.td-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: .5px solid var(--hair); border-radius: var(--radius); padding: 14px 16px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); }
.td-card:hover { background: var(--hover); }
.td-card-title { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 16.5px; }
.td-card .ic, .td-row .ic, .td-dist .ic, .td-day-body .ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; }
.td-dist { display: inline-flex; align-items: center; gap: 6px; color: var(--sky-text); font-size: 14px; }
.td-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.td-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: .5px solid var(--hair); }
.td-row-time { width: 64px; color: var(--ink-2); font-size: 14px; }
.td-row-title { flex: 1 1 200px; min-width: 0; }
.td-chip { display: inline-block; align-self: flex-start; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--ok-tint); color: var(--ok); }
.td-chip.warn { background: var(--warn-tint); color: var(--warn); }
.td-chip.bad { background: var(--pink-tint); color: var(--danger); }
/* Tight flight connection (connections.js): Today chip and the trip page line. */
.td-chip.conn-warn { white-space: normal; }
/* Friends' flights (today.js friendCard): a div card (holds a <details>), the title is the link. */
.td-ff:hover { background: var(--surface); }
.td-ff .td-card-title { margin: 0; }
.td-ff .td-card-title a { color: inherit; text-decoration: none; }
.td-ff .td-card-title a:hover { text-decoration: underline; }
.td-ff .td-chip { max-width: 100%; overflow-wrap: anywhere; }
.td-ff-route { font-weight: 600; }
.item-conn { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600; border-radius: 8px; padding: 3px 8px; background: var(--pink-tint); color: var(--danger); }
.td-price { font-size: 14px; }
.td-fx-rate { margin: 8px 0; font-size: 15px; }
.td-fx-conv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-fx-conv .input { width: 130px; }
.td-fx-out { font: 650 20px/1.2 var(--font-display); }
.td-fx-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px; }
.td-fx-meta select { width: auto; }
.td-group { background: var(--surface); border: .5px solid var(--hair); border-radius: var(--radius); padding: 12px 16px; margin-top: 12px; }
.td-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.td-group-head h3 { font: 650 17px/1.3 var(--font-display); margin: 0; }
.td-days { list-style: none; margin: 6px 0 0; padding: 0; }
.td-day { display: grid; grid-template-columns: 96px 150px 1fr; gap: 10px; padding: 8px 0; border-top: .5px solid var(--hair); font-size: 14.5px; }
.td-day-date { font-weight: 600; }
.td-day-body > div { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .td-day { grid-template-columns: 1fr auto; }
  .td-day-body { grid-column: 1 / -1; }
  .td-count-val { font-size: 22px; }
}
/* ---- end today ---- */
/* ---- journal ---- */
.jr-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.jr-seg { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 2px; }
.jr-seg button { border: 0; background: none; color: var(--ink-2); font: 600 13.5px/1 var(--font); padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.jr-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.jr-days { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.jr-day-title { font: 650 15px/1.3 var(--font-display); color: var(--ink); margin: 0 0 8px; }
.jr-place { margin: 0 0 10px; }
.jr-place-name { display: flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; margin: 0 0 6px; }
.jr-place-name .ic, .jr-onmap .ic, .jr-link .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.jr-entries { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.jr-entry { background: var(--surface); border: .5px solid var(--hair); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; }
.jr-entry:focus { outline: 2px solid var(--sky); outline-offset: 2px; }
.jr-entry-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-2); font-size: 13px; }
.jr-entry-meta .icon-btn { margin-left: auto; }
.jr-link { display: inline-flex; align-items: center; gap: 4px; color: var(--sky-text); }
.badge.shared { background: var(--sky-tint); color: var(--sky-text); }
.jr-text { white-space: pre-wrap; text-wrap: pretty; font-size: 15px; line-height: 1.5; margin: 0; }
.jr-grid { display: grid; gap: 4px; grid-template-columns: repeat(3, 1fr); border-radius: 10px; overflow: hidden; }
.jr-grid.n1 { grid-template-columns: 1fr; max-width: 420px; }
.jr-grid.n2, .jr-grid.n4 { grid-template-columns: repeat(2, 1fr); }
.jr-grid.n1 .jr-thumb { aspect-ratio: 4 / 3; }
.jr-cell { border: 0; padding: 0; background: none; cursor: zoom-in; display: block; min-width: 0; }
.jr-thumb { position: relative; display: block; aspect-ratio: 1; background: var(--surface-2); overflow: hidden; }
.jr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-thumb-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); }
.jr-thumb-ph .ic { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.jr-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.jr-play .ic { width: 34px; height: 34px; fill: rgba(255,255,255,.92); stroke: rgba(0,0,0,.25); stroke-width: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.jr-onmap { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; justify-self: start; }
.jr-pin { border: 0; padding: 0; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); border: 2px solid #fff; }
.jr-pin .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.jr-pin.photo { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: #fff; }
.jr-pin.photo .jr-thumb { width: 100%; height: 100%; }
.jr-pin.photo .jr-play .ic { width: 18px; height: 18px; }
.jr-lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(5, 8, 14, .94); color: #fff; }
.jr-lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.jr-lightbox::backdrop { background: rgba(5, 8, 14, .94); }
.jr-lb-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; }
.jr-lightbox .icon-btn { color: #fff; }
.jr-lightbox .icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.jr-lb-stage { display: grid; place-items: center; min-height: 0; padding: 0 16px 16px; }
.jr-lb-stage img, .jr-lb-stage video { max-width: 100%; max-height: calc(100dvh - 80px); object-fit: contain; border-radius: 6px; }
.jr-lb-prev, .jr-lb-next { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.35); }
.jr-lb-prev { left: 12px; } .jr-lb-next { right: 12px; }
.jr-recap { display: grid; gap: 12px; }
.jr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.jr-stat { background: var(--surface); border: .5px solid var(--hair); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.jr-stat-n { font: 700 22px/1.15 var(--font-display); letter-spacing: -.02em; }
.jr-stat-l { color: var(--ink-2); font-size: 13px; }
.jr-countries { color: var(--ink-2); font-size: 14px; margin: 0; }
.jr-recap-map { height: 360px; border-radius: 14px; overflow: hidden; border: .5px solid var(--hair); }
.jr-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 96px; gap: 6px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.jr-strip .jr-cell { scroll-snap-align: start; border-radius: 8px; overflow: hidden; }
.jr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .jr-row { grid-template-columns: 1fr; } }
.field .label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.jr-loc-text { font-size: 14px; color: var(--ink); margin: 2px 0 6px; }
.jr-loc-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.jr-pick-map { height: 200px; border-radius: 12px; overflow: hidden; border: .5px solid var(--hair); margin-bottom: 8px; }
.jr-edit-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.jr-edit-cell { position: relative; border-radius: 8px; overflow: hidden; }
.jr-edit-cell .icon-btn { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.55); color: #fff; width: 24px; height: 24px; }
.jr-add-media { display: grid; place-items: center; align-content: center; gap: 2px; aspect-ratio: 1; border: 1.5px dashed var(--hair); border-radius: 8px; color: var(--sky-text); font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; padding: 4px; }
.jr-add-media .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.jr-add-media:focus-within { outline: 2px solid var(--sky); }
/* ---- end journal ---- */

/* ---- chat writes ---- */
.chat-confirm { margin: 8px 0; padding: 12px 14px; border: 1px solid var(--sky); border-radius: 12px; background: var(--sky-tint); }
.chat-confirm.danger { border-color: var(--pink-text); background: var(--pink-tint); }
.chat-confirm-title { margin: 0 0 4px; font-size: 12px; font-weight: 600; opacity: .8; }
.chat-confirm-summary { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.chat-confirm-lines { margin: 6px 0 0; padding-left: 18px; font-size: 13px; overflow-wrap: anywhere; }
.chat-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
/* ---- end chat writes ---- */

/* ---- calendar-feed ---- */
.imp-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.imp-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.imp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.imp-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-sub { color: var(--ink-2); font-size: .86em; }
.imp-cal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.imp-cal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 12px; }
/* ---- end calendar-feed ---- */

/* ---- links-expenses ---- */
.lk { margin-top: 22px; }
.lk-head { margin-bottom: 4px; }
.lk-av { background: var(--sky-tint); color: var(--sky-text); }
.lk-av .ic { width: 18px; height: 18px; }
.lk-pw { display: grid; gap: 8px; }
.lk-pass { font-size: 1.05rem; letter-spacing: .02em; }
.lk-list .person-actions { flex-wrap: wrap; justify-content: flex-end; }

.lv { max-width: 920px; margin: 0 auto; padding: 20px 16px 48px; min-height: 100vh; background: var(--bg); color: var(--ink); }
.lv-gate { max-width: 400px; margin: 12vh auto 0; display: grid; gap: 10px; text-align: center; }
.lv-gate h1 { font-family: var(--font-display); font-size: 1.6rem; margin: 0; }
.lv-badge { justify-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sky-tint); color: var(--sky-text); }
.lv-badge .ic { width: 24px; height: 24px; }
.lv-sub { color: var(--ink-2); margin: 0; }
.lv-form { display: grid; gap: 8px; text-align: left; margin-top: 12px; }
.lv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lv-kicker { margin: 0; color: var(--sky-text); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.lv-map-card { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
.lv-map { height: min(56vh, 460px); }
.lv-status { padding: 8px 12px; margin: 0; color: var(--ink-2); font-size: .9rem; }
.lv-sec { margin-top: 22px; }
.lv-items, .lv-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lv-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hair); }
.lv-ic .ic { width: 20px; height: 20px; color: var(--ink-2); }
.lv-item p { margin: 0; }
.lv-item-title { font-weight: 600; }
.lv-notes { white-space: pre-wrap; color: var(--ink-2); margin-top: 4px !important; }
.lv-foot { margin-top: 32px; color: var(--ink-3); font-size: .85rem; text-align: center; }

.ex-summary { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hair); }
.ex-total { display: grid; gap: 2px; }
.ex-big { font-family: var(--font-display); font-size: 1.7rem; }
.ex-unconv { margin: 0; color: var(--warn); }
.ex-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 16px; font-size: .92rem; }
.ex-cats li { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-2); }
.ex-budget, .ex-settle { margin-top: 16px; }
.ex-bars { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.ex-bar-head { display: flex; justify-content: space-between; gap: 8px; font-size: .92rem; margin-bottom: 4px; }
.ex-bars li.near .bar-fill { background: var(--warn); }
.ex-bars li.over .bar-fill { background: var(--danger); }
.ex-over { margin: 2px 0 0; color: var(--danger); }
.ex-transfers { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.ex-transfers li { padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.ex-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.ex-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hair); }
.ex-row .person-actions { grid-column: 1 / -1; justify-content: flex-end; }
.ex-row p { margin: 0; }
.ex-title { font-weight: 600; overflow-wrap: anywhere; }
.ex-amt { display: grid; justify-items: end; }
.ex-add-person { margin-top: 8px; align-items: center; }
.ex-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.ex-cat-in { display: grid; gap: 4px; font-size: .9rem; color: var(--ink-2); }
@media (max-width: 520px) { .lv-map { height: 46vh; } .ex-big { font-size: 1.45rem; } }
/* ---- end links-expenses ---- */

/* ---- toolbar ---- */
/* The top toolbar, laid out like Stella's title bar (stella-studio src/panel/panel.css .titlebar, .title-actions,
   .sx-trigger.title-search, .chat-dock): left the brand and sections, search in the middle, actions on the right.
   Desktop app (toolbar.js sets html.desktop / html.mac): the bar is the window's drag region and leaves 88px for
   the traffic lights (desktop/src/main.js titleBarStyle 'hiddenInset'); everything clickable is no-drag. */
.titlebar { justify-content: space-between; gap: 10px; user-select: none; -webkit-user-select: none; }
.title-left { display: flex; align-items: center; gap: 4px; min-width: 0; flex: none; }
.title-actions { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.titlebar .brand { color: inherit; text-decoration: none; margin-left: -8px; padding: 4px 8px; border-radius: 8px; transition: background-color .15s; }
.titlebar .brand:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.tb-arrow { width: 28px; height: 28px; border-radius: 8px; }
.tb-arrow svg { width: 16px; height: 16px; }
.tb-arrow:disabled { opacity: .35; pointer-events: none; }
/* Search: in the middle of the bar, up to 460 wide, the first thing to give way (Stella: flex 0 1 460px, min 76) */
.search-btn.title-search { container-type: inline-size; flex: 0 1 460px; min-width: 76px; margin: 0 auto; border-radius: 999px; padding: 0 8px 0 13px; }
@container (max-width: 130px) { .title-search .search-btn-label { display: none; } }
/* The chat button, top right (Stella: #toggle-chat in the title bar) */
.chat-toggle.on, .chat-toggle[aria-expanded="true"] { color: var(--sky-text); background: var(--sky-tint); }
/* The chat floats in from the top right, under the bar (Stella's .chat-dock: 392 wide, 12 from the edges, radius 20, dockIn) */
:root { --chat-w: 392px; }
.chat:not(.pinned) { top: calc(var(--bar-h) + 8px); right: 12px; bottom: 12px; border-radius: 20px; animation: tb-dock-in .24s cubic-bezier(.2, 1, .3, 1); transform-origin: 100% 0; }
@keyframes tb-dock-in { from { opacity: 0; transform: scale(.55, .2); } }
@media (prefers-reduced-motion: reduce) { .chat:not(.pinned) { animation: none; } }
/* Desktop app: the bar is the title bar */
html.desktop .titlebar { -webkit-app-region: drag; }
html.desktop .titlebar :is(a, button, input, kbd, .nav, .menu, [popover]) { -webkit-app-region: no-drag; }
html.mac .titlebar { padding-left: 88px; }
/* no bar before sign-in: the whole screen drags the window (Stella's .splash) */
html.desktop :is(.gate, .boot) { -webkit-app-region: drag; }
html.desktop .gate :is(a, button) { -webkit-app-region: no-drag; }
@media (max-width: 900px) {
  .search-btn.title-search { flex: none; margin: 0 0 0 auto; min-width: 0; padding: 0; }
  .titlebar .brand-name { display: none; }
}
@media (max-width: 760px) {
  .titlebar .brand { margin-left: -6px; padding: 4px 6px; }
  .title-actions { gap: 2px; }
}
@media (max-width: 420px) {
  .titlebar .brand-mark { display: block; }
}
/* ---- end toolbar ---- */

/* ---- sidebar ---- */
/* Stella's layout (stella-studio src/panel/panel.css "The sidebar", .titlebar, .side-toggle, .profile-menu):
   the title bar keeps the whole width (traffic lights, back / forward, the sidebar's button, the brand), and
   the sidebar is fixed on the left under it. Open: 248 wide, the page beside it. Folded (html.side-rail, ⌘\):
   a 60 wide rail of icons; hovering an icon opens it over the page (side-peek, at once, with a shadow).
   Every icon sits at the same place open and folded (its middle at x 29.5): the sidebar's 10px padding, then
   each row's own left padding (11px before a 17px icon, 3.5px before the 32px avatar); folding only narrows
   the rows and hides the words. toolbar.js sets the classes on <html>. Phone widths: a drawer. */
html { --side: 248px; --rail: 60px; --sw: var(--side); }
html.side-rail { --sw: var(--rail); }
html.has-side .app { grid-template-columns: var(--sw) minmax(0, 1fr); }
html.has-side .app > * { grid-column: 2; }
html.has-side .app > .bar { grid-column: 1 / -1; }
/* the title bar and the sidebar are one surface, like Stella's (no line under the bar) */
.titlebar { border-bottom-color: transparent; }

/* The title bar's left: ← → (desktop app), the sidebar's button, the brand. On the web the button's middle is
   over the rail's icons (x 29.5); in the Mac app the three sit right after the traffic lights, on their line
   (Stella: 82.5 / 112.5 / 142.5, the brand at 184; main.js puts the lights where Stella's are). */
.titlebar { padding-left: max(14.5px, env(safe-area-inset-left)); }
html.mac .titlebar { padding-left: 82.5px; }
.title-left { gap: 0; }
.side-toggle { width: 30px; height: 30px; margin: 0; padding: 0; border-radius: 8px; color: var(--ink); }
.side-toggle svg { width: 20px; height: 20px; stroke-width: 1.9; }
.side-toggle.tb-arrow svg { width: 18px; height: 18px; }
.side-toggle:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.side-toggle.tb-arrow:disabled { opacity: .3; }
.side-toggle .st-menu { display: none; }
.titlebar .side-toggle + .brand { margin-left: 3.5px; }
/* more room in the bar now that the sections are in the sidebar: the name and the search field stay longer */
@media (min-width: 761px) and (max-width: 900px) {
  .titlebar .brand-name { display: inline; }
  .search-btn.title-search { flex: 0 1 460px; width: auto; height: 32px; min-width: 76px; margin: 0 auto; padding: 0 8px 0 13px; border-radius: 999px; justify-content: flex-start; background: var(--surface-2); color: var(--ink-3); }
  .search-btn.title-search svg { width: 16px; height: 16px; }
  .search-btn.title-search :is(.search-btn-label, kbd) { display: revert; }
}

.sidebar {
  position: fixed; top: var(--bar-h); left: 0; bottom: 0; z-index: 1001; width: var(--rail);
  display: flex; flex-direction: column; padding: 4px 10px 10px;
  background: var(--bg); border-right: .5px solid var(--hair);
  font-size: 13.5px; user-select: none; -webkit-user-select: none;
  transition: width .18s ease, box-shadow .18s;
}
html.side-wide .sidebar { width: var(--side); }
html.side-peek .sidebar { transition: none; }
html.side-rail.side-wide .sidebar { box-shadow: var(--shadow); border-top-right-radius: 14px; }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 1px; scrollbar-width: none; }
.side-scroll::-webkit-scrollbar { width: 0; }
.side-nav { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.side-item {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%; height: 36px; padding: 0 10px 0 11px; border-radius: 10px; flex: none;
  font-size: 13.5px; color: var(--ink); white-space: nowrap; text-align: left; text-decoration: none; overflow: hidden; transition: background-color .12s;
}
.side-item svg { width: 17px; height: 17px; flex: none; color: var(--ink-2); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.side-item[aria-current="page"] { background: color-mix(in srgb, var(--ink) 9%, transparent); font-weight: 600; }
.side-item[aria-current="page"] svg { color: var(--ink); }
.side-item:focus-visible, .side-proj:focus-visible, .side-me:focus-visible { outline-offset: -2px; }
/* your trips (Stella's "Recent projects") */
.side-recent { margin-top: 20px; display: flex; flex-direction: column; min-height: 0; }
.side-recent h3 { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 0 10px 6px; }
.side-projects { display: flex; flex-direction: column; gap: 1px; }
.side-proj {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 10px; border-radius: 9px; flex: none;
  font-size: 13px; color: var(--ink); text-decoration: none; transition: background-color .12s;
}
.side-proj span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-proj:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.side-proj.on { background: color-mix(in srgb, var(--ink) 9%, transparent); font-weight: 600; }
.side-now { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); flex: none; }
/* the foot: the account, then Settings */
.side-foot { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; border-top: .5px solid var(--hair); }
.side-foot .profile { min-width: 0; }
.side-foot .side-gear { color: var(--ink-2); }
.side-foot .side-gear:hover { color: var(--ink); }
.side-foot .side-gear[aria-current="page"] { color: var(--ink); }
.side-me {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 6px 6px 6px 3.5px; border: 0; border-radius: 10px;
  background: none; text-align: left; cursor: pointer; overflow: hidden; transition: background-color .12s;
}
.side-me:hover, .side-me:has(+ .menu:popover-open) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.side-me .avatar { cursor: inherit; }
.side-me-text { min-width: 0; display: flex; flex-direction: column; }
.side-me-text b, .side-me-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-me-text b { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--ink); }
.side-me-text small { font-size: 11.5px; line-height: 15px; color: var(--ink-2); }
.side-me-text small:empty { display: none; }
/* the account menu above it (Stella's .side-foot .profile-menu: 8 over the row, 270 wide, radius 16) */
#account-menu.menu {
  top: auto; right: auto; left: 10px; bottom: calc(10px + 36px + 2px + 44px + 8px);
  width: 270px; min-width: 0; border-radius: 16px; padding: 12px 6px 6px;
}
/* folded: icons only */
@media (min-width: 761px) {
  html:not(.side-wide) :is(.side-item span, .side-recent, .side-me-text) { display: none; }
}
html.desktop .sidebar { -webkit-app-region: no-drag; }
.side-scrim { display: none; }

/* Phone: a drawer over the page, from the bar's button (a hamburger there); a tap outside, Esc or going somewhere closes it */
@media (max-width: 760px) {
  html.has-side .app { grid-template-columns: minmax(0, 1fr); }
  html.has-side .app > *, html.has-side .app > .bar { grid-column: 1; }
  .titlebar { padding-left: max(8px, env(safe-area-inset-left)); }
  .side-toggle .st-side { display: none; }
  .side-toggle .st-menu { display: block; }
  .sidebar, html.side-wide .sidebar {
    top: 0; z-index: 1003; width: min(300px, 86vw); border-radius: 0 16px 16px 0; box-shadow: none;
    padding: max(14px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    transform: translateX(-100%); visibility: hidden;
    transition: transform .24s cubic-bezier(.2, 1, .3, 1), visibility 0s linear .24s;
  }
  html.side-drawer .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow); transition: transform .24s cubic-bezier(.2, 1, .3, 1); }
  .side-scrim { display: block; position: fixed; inset: 0; z-index: 1002; background: rgba(7, 11, 20, .32); animation: side-fade .2s ease-out; }
  .side-item { height: 40px; font-size: 15px; }
  .side-proj { height: 36px; font-size: 14px; }
  #account-menu.menu { left: 10px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 40px + 2px + 44px + 8px); max-width: calc(100vw - 20px); }
}
@keyframes side-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sidebar, html.side-drawer .sidebar { transition: none; }
  .side-scrim { animation: none; }
}
/* ---- end sidebar ---- */

/* ---- map-markers ---- */
/* MapLibre places every marker with position:absolute + a transform. `.jt-pin { position: relative }`
   (for the count badge) overrode that, so pins sat in normal flow and each one was pushed down by the
   ones before it: on a short phone-width map the last pins (Sydney) fell off the bottom. Absolute is
   also a containing block for .jt-pin-n, so the badge is unaffected. */
.maplibregl-marker.jt-pin, .maplibregl-marker { position: absolute; }
/* Itinerary pins sit at their point; journal photo pins (anchor bottom) rise above theirs. Keep the itinerary
   pin on top so a photo taken at the same place (Sydney in the demo) doesn't hide it. */
.maplibregl-marker.jt-pin { z-index: 1; }
/* ---- end map-markers ---- */

/* ---- location-sharing ---- */
/* Title-bar button (location-sharing.js): filled sky arrow = visible to others, slashed grey = hidden. */
.locshare-wrap { position: relative; display: inline-flex; }
.locshare-ic { width: 19px; height: 19px; overflow: visible; }
.locshare-ic .locshare-arrow { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.locshare-ic .locshare-slash { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.locshare-btn.on { color: var(--sky-text); }
.locshare-btn.on .locshare-arrow { fill: var(--sky); stroke: var(--sky); }
.locshare-btn.off { color: var(--ink-3); }
.locshare-btn.off .locshare-arrow { stroke-dasharray: none; opacity: .75; }
.locshare-btn svg { width: 19px; height: 19px; }
.locshare-pop {
  position: absolute; top: calc(100% + 8px); right: -6px; z-index: 60; width: min(340px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); border: 1px solid var(--hair); border-radius: 14px;
  box-shadow: var(--shadow); padding: 14px; -webkit-app-region: no-drag; user-select: text; -webkit-user-select: text;
}
.locshare-pop[hidden] { display: none; }
.locshare-body { display: grid; gap: 12px; }
.locshare-head { display: flex; gap: 12px; align-items: flex-start; }
.locshare-badge {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-3);
}
.locshare-badge.on { background: var(--sky-tint); color: var(--sky-text); }
.locshare-badge.on .locshare-arrow { fill: var(--sky); stroke: var(--sky); }
.locshare-badge .locshare-ic { width: 18px; height: 18px; }
.locshare-head-text { min-width: 0; }
.locshare-title { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.3; }
.locshare-sub { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.locshare-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 500; font-size: 14.5px; cursor: pointer; padding: 8px 0; border-top: 1px solid var(--hair); }
.locshare-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.locshare-opts-label { font-size: 13px; color: var(--ink-2); margin-right: 2px; }
.locshare-opts .btn.tiny { color: var(--ink); }
.locshare-note { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.locshare-err { margin: 0; font-size: 13px; color: var(--pink-text); }
.locshare-link { justify-self: start; font-size: 13.5px; text-decoration: none; }
.locshare-link:hover { text-decoration: underline; }
.set-row[data-row="location-visible"] .locshare-body { max-width: 520px; }
.locshare-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) {
  .locshare-pop { position: fixed; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 6px); left: 16px; right: 16px; width: auto; }
}
/* ---- end location-sharing ---- */

/* ---- trip-pages ---- */
/* Each part of a trip is its own page (trip-pages.js): header, a sticky tab bar, one page. */
.trip.trip-paged { display: block; max-width: 1180px; margin: 0 auto; grid-template-areas: none; }
.trip-paged .trip-head { padding: 18px 16px 6px; }
.trip-paged .trip-page { padding: 4px 16px 56px; min-width: 0; }
.trip-paged .trip-page > .section:first-child { margin-top: 18px; }
.trip-tabs-wrap { position: sticky; top: 0; z-index: 6; background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: .5px solid var(--hair); }
.trip-tabs-wrap:empty { display: none; }
.trip-tabs { min-width: 0; }
.tt-track { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 12px; -webkit-overflow-scrolling: touch; }
.tt-track::-webkit-scrollbar { display: none; }
.tt-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 12px 10px 11px; color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; border-radius: 8px; }
.tt-tab .ic { width: 16px; height: 16px; opacity: .8; }
.tt-tab:hover { color: var(--ink); }
.tt-tab:focus-visible { outline-offset: -3px; }
.tt-tab.on { color: var(--ink); font-weight: 600; }
.tt-tab.on .ic { color: var(--sky); opacity: 1; }
.tt-tab.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -.5px; height: 2px; border-radius: 2px; background: var(--sky); }
@media (min-width: 761px) {
  .trip-paged .trip-head { padding: 26px 32px 8px; }
  .tt-track { padding: 0 22px; gap: 4px; }
  .trip-paged .trip-page { padding: 4px 32px 64px; }
}

/* The one trip map, moved between the Overview card and the Map page */
.trip-paged .trip-map-card { position: relative; top: auto; grid-area: auto; margin: 0; height: 280px; min-height: 0; align-self: auto; }
.trip-paged .trip-map-card.big { height: calc(100dvh - var(--bar-h) - 230px); min-height: 340px; max-height: 760px; }
.map-places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.map-place { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 10px; border-radius: 12px; border: .5px solid var(--hair); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.map-place:hover { background: var(--hover); }
.map-place-main { min-width: 0; display: grid; gap: 1px; }
.map-place-title { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-place-sub { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Overview */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.ov-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ov-card { background: var(--surface); border: .5px solid var(--hair); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.ov-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ov-card-head h3 { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.ov-more { color: var(--sky-text); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.ov-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.ov-hero { display: grid; gap: 6px; padding: 18px 20px; }
.ov-hero.ongoing { background: linear-gradient(160deg, color-mix(in srgb, var(--pink-tint) 70%, var(--surface)), var(--surface) 70%); }
.ov-hero.upcoming { background: linear-gradient(160deg, color-mix(in srgb, var(--sky-tint) 80%, var(--surface)), var(--surface) 70%); }
.ov-kicker { margin: 0; }
.ov-big { margin: 2px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ov-big strong { font: 700 40px/1.05 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.ov-big span { color: var(--ink-2); font-size: 15px; font-weight: 500; }
.ov-bar { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin: 6px 0 2px; }
.ov-bar-fill { display: block; height: 100%; border-radius: 6px; background: var(--pink); }
.ov-dates { color: var(--ink); font-size: 14.5px; font-weight: 500; margin: 4px 0 0; }
.ov-dates .sep { color: var(--ink-3); }
.ov-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.ov-next { padding-bottom: 8px; }
.ov-next-list { list-style: none; margin: 0 -8px; padding: 0; }
.ov-next-row { width: 100%; display: flex; align-items: center; gap: 11px; padding: 8px; border: 0; background: none; border-radius: 12px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.ov-next-row:hover { background: var(--hover); }
.ov-next-main { min-width: 0; flex: 1; display: grid; gap: 1px; }
.ov-next-title { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-next-when { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-chev { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.ov-map { padding: 14px; display: grid; grid-template-rows: auto 1fr; }
.ov-map .ov-card-head { padding: 2px 4px 0; }
.ov-map .trip-map-card { border-radius: 12px; }
.ov-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; }
.ov-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: .5px solid var(--hair); color: var(--ink); text-decoration: none; min-width: 0; }
.ov-link:hover { background: var(--hover); }
.ov-link-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--ink-2); }
.ov-link-ic .ic { width: 18px; height: 18px; }
.ov-link-ic.l-itinerary, .ov-link-ic.l-map { background: var(--sky-tint); color: var(--sky-text); }
.ov-link-ic.l-journal, .ov-link-ic.l-people { background: var(--pink-tint); color: var(--pink-text); }
.ov-link-ic.l-expenses { background: var(--ok-tint); color: var(--ok); }
.ov-link-main { min-width: 0; flex: 1; display: grid; gap: 1px; }
.ov-link-label { font-weight: 600; font-size: 14.5px; }
.ov-link-count { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) {
  .ov-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .ov-map .trip-map-card { height: 100%; min-height: 340px; }
}
@media (max-width: 760px) {
  .tt-tab { padding: 11px 9px 10px; font-size: 13.5px; gap: 6px; }
  .tt-tab .ic { width: 15px; height: 15px; }
  .ov-big strong { font-size: 34px; }
  .ov-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .ov-link { padding: 10px 11px; gap: 10px; }
  .ov-link .ov-chev { display: none; }
  .ov-link-ic { width: 30px; height: 30px; }
  .map-places { grid-template-columns: minmax(0, 1fr); }
  .trip-paged .person { flex-wrap: wrap; }
  .trip-paged .person-actions { flex-wrap: wrap; flex: 1 1 100%; min-width: 0; box-sizing: border-box; padding-left: 44px; }
}
/* ---- end trip-pages ---- */

/* ---- groups ---- */
/* Shared expense groups (groups.js, group-guest.js). Only theme tokens, so light/dark follow. */
.side-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.side-badge[hidden] { display: none; }
/* folded sidebar (icons only): the count becomes a dot on the icon */
@media (min-width: 761px) { html:not(.side-wide) .side-item .side-badge { position: absolute; left: 24px; top: 6px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; } }
.grp { display: grid; gap: 14px; min-width: 0; }
.grp-back { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 14px; text-decoration: none; margin: 4px 0 6px; }
.grp-back:hover { color: var(--ink); }
.grp-ic-sm { width: 15px; height: 15px; vertical-align: -2px; }
.grp-ic { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
.grp-head { display: grid; gap: 8px; }
.grp-head-main { display: flex; gap: 12px; align-items: center; min-width: 0; }
.grp-head-text { min-width: 0; }
.grp-head-text .help { margin: 2px 0 0; }
.grp-head-text .sub-title { margin: 0; font-size: 15px; color: var(--ink); }
.grp-title { margin: 0; overflow-wrap: anywhere; }
.grp-emoji { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--surface-2); font-size: 24px; line-height: 1; }
.grp-emoji.big { justify-self: center; width: 60px; height: 60px; font-size: 32px; border-radius: 18px; }
.grp-mybal { margin: 0; font-weight: 600; color: var(--ink-2); }
.grp-mybal.pos, .grp-lent { color: var(--ok); }
.grp-mybal.neg, .grp-owe { color: var(--pink-text); }
.grp-actions { flex-wrap: wrap; }
.grp-tabs { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface-2); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.grp-tabs::-webkit-scrollbar { display: none; }
.grp-tab { position: relative; flex: 1 0 auto; border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.grp-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.grp-tab:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.grp-dot { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--pink); vertical-align: 2px; }
.grp-page { display: grid; gap: 14px; min-width: 0; }
.grp-card { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hair); min-width: 0; }
.grp-card > .sub-title, .grp-card .section-head .sub-title { margin: 0; }
.grp-card .section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0; }
.grp-card summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.grp-card p { margin: 0; }
.grp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.grp-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hair); min-width: 0; flex-wrap: wrap; }
.grp-card .grp-row { background: var(--surface-2); border-color: transparent; }
.grp-row-btn { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; flex-wrap: nowrap; }
.grp-row-btn:hover { background: var(--hover); }
.grp-row-btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.grp-row.transfer { background: var(--surface-2); }
.grp-row-main { flex: 1 1 140px; min-width: 0; display: grid; gap: 1px; }
.grp-row-main .help { font-size: 12.5px; overflow-wrap: anywhere; }
.grp-row-title { font-weight: 600; overflow-wrap: anywhere; }
.grp-row-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.grp-amt { display: grid; justify-items: end; text-align: right; gap: 1px; font-size: 13px; flex: none; max-width: 48%; }
.grp-amt strong { font-size: 15px; }
.grp-row.income .grp-amt strong { color: var(--ok); }
.grp-month { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; padding: 8px 4px 0; }
.grp-cat { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--surface-2); font-size: 18px; line-height: 1; }
.grp-card .grp-cat { background: var(--surface); }
.grp-cat.c-food, .grp-cat.c-groceries { background: color-mix(in srgb, #F59E0B 18%, var(--surface)); }
.grp-cat.c-lodging, .grp-cat.c-rent { background: color-mix(in srgb, #8B5CF6 18%, var(--surface)); }
.grp-cat.c-transport { background: color-mix(in srgb, var(--sky) 20%, var(--surface)); }
.grp-cat.c-activities, .grp-cat.c-entertainment { background: color-mix(in srgb, #10B981 18%, var(--surface)); }
.grp-cat.c-shopping, .grp-cat.c-gifts { background: color-mix(in srgb, var(--pink) 18%, var(--surface)); }
.grp-cat.c-transfer { background: var(--ok-tint); }
.grp-filter { max-width: 320px; }
.grp-quick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-width: 0; }
.grp-quick > .input { flex: 1 1 140px; min-width: 0; width: auto; }
.grp-quick > .grp-qa-amt { flex: 0 1 110px; }
.grp-quick > select.input { flex: 0 1 150px; }
.grp-inline { display: inline-flex; align-items: center; gap: 6px; }
.grp-cursel { width: auto; min-width: 84px; }
.grp-bal { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.grp-bal-row { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(80px, 1.4fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.grp-bal-name { overflow-wrap: anywhere; }
.grp-bal-track { display: grid; grid-template-columns: 1fr 1fr; height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.grp-bal-half { display: flex; }
.grp-bal-half.l { justify-content: flex-end; border-right: 1px solid var(--hair); }
.grp-bal-amt { text-align: right; font-weight: 600; white-space: nowrap; }
.grp-bal-row.pos .grp-bal-amt { color: var(--ok); }
.grp-bal-row.neg .grp-bal-amt { color: var(--pink-text); }
.grp-cap { grid-column: 1 / -1; color: var(--warn); }
.grp-bar { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; display: flex; }
.grp-bar-fill { display: block; height: 100%; background: var(--sky); border-radius: inherit; }
.grp-bar-fill.pos { background: var(--ok); }
.grp-bar-fill.neg { background: var(--pink); }
.grp-bar-fill.warn { background: var(--warn); }
.grp-bar-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; margin-bottom: 4px; }
.grp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.grp-stat-top { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; }
.grp-stat-top .btn-row { grid-column: 1 / -1; flex-wrap: wrap; }
.grp a.btn, .grp-paylinks a.btn, .section-head a.btn { text-decoration: none; }
.grp-big { font-family: var(--font-display); font-size: 1.5rem; margin: 0; font-weight: 600; }
.grp-days { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.grp-day { flex: 1 1 0; min-width: 2px; height: 100%; display: flex; align-items: flex-end; }
.grp-day-fill { display: block; width: 100%; background: var(--sky); border-radius: 3px 3px 0 0; }
.grp-days-axis { display: flex; justify-content: space-between; font-size: 12px; }
.grp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.grp-table th, .grp-table td { padding: 6px 4px; border-bottom: 1px solid var(--hair); text-align: left; }
.grp-table .tnum { text-align: right; }
.grp-table thead th { color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
.grp-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.grp-feed li { padding: 8px 4px; border-bottom: 1px solid var(--hair); overflow-wrap: anywhere; }
.grp-feed p { margin: 0; }
.grp-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--sky-tint); color: var(--sky-text); font-weight: 700; }
.grp-form { display: grid; gap: 10px; }
.grp-emoji-in { width: 72px; text-align: center; }
.grp-sugg .grp-list { margin-top: 8px; }
.grp-head-text a { color: var(--sky-text); text-decoration: none; }
.grp-head-text a:hover { text-decoration: underline; }
.grp-cards { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 8px; }
.grp-gcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hair); color: inherit; text-decoration: none; min-width: 0; }
.grp-gcard:hover { background: var(--hover); }
.grp-gcard:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.grp-gcard .grp-amt { font-size: 13.5px; font-weight: 600; }
.grp-paycard { margin-top: 8px; }
/* expense sheet */
.grp-seg span { white-space: normal; line-height: 1.2; }
.grp-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.grp-catopt { position: relative; }
.grp-catopt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.grp-catopt > span { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--hair); font-size: 13px; color: var(--ink-2); }
.grp-catopt input:checked + span { border-color: var(--sky); background: var(--sky-tint); color: var(--ink); }
.grp-catopt input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 1px; }
.grp-split, .grp-payers { display: grid; gap: 6px; margin-top: 8px; }
.grp-split-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 110px) minmax(64px, auto); gap: 8px; align-items: center; }
.grp-payers .grp-split-row { grid-template-columns: minmax(0, 1fr) minmax(90px, 130px); }
.grp-split-row .check { min-width: 0; overflow-wrap: anywhere; }
.grp-split-row .input[hidden] { display: block; visibility: hidden; }
.grp-share { text-align: right; font-size: 13px; color: var(--ink-2); }
.grp-preview { margin-top: 8px; font-size: 13.5px; }
.grp-preview p { margin: 2px 0; }
.grp-ok { color: var(--ok); }
.grp-bad { color: var(--danger); }
.grp-note { white-space: pre-wrap; background: var(--surface-2); padding: 8px 10px; border-radius: 10px; }
.grp-hist ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }
.grp-comments { display: grid; gap: 8px; }
.grp-foot-btns { display: inline-flex; gap: 8px; }
.grp-paylinks { display: grid; gap: 6px; }
.grp-pay-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }
/* trip page embed */
.grp-embed { margin-top: 18px; }
.ex-legacy { margin-top: 16px; }
.ex-legacy > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.ex-legacy > .btn-row { margin-top: 8px; }
/* guest page */
.grp-guest .lv-body { display: grid; gap: 14px; }
.grp-guest-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.grp-pick-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.grp-pick .lv-form { margin-top: 16px; }
/* print summary */
.grp-print { display: none; }
@media print {
  html.grp-printing body > *:not(.grp-print) { display: none !important; }
  html.grp-printing, html.grp-printing body { overflow: visible !important; height: auto !important; background: #fff !important; color: #000 !important; }
  html.grp-printing .grp-print { display: block; font: 12pt/1.4 system-ui, sans-serif; color: #000; }
  .grp-print table { width: 100%; border-collapse: collapse; margin-bottom: 12pt; }
  .grp-print th, .grp-print td { border-bottom: 1px solid #ccc; padding: 3pt 4pt; text-align: left; }
  .grp-print h2 { font-size: 13pt; margin: 14pt 0 6pt; }
}
@media (max-width: 520px) {
  .grp-row { padding: 8px 10px; gap: 8px; }
  .grp-cat { width: 32px; height: 32px; font-size: 16px; }
  .grp-bal-row { grid-template-columns: minmax(60px, 1fr) minmax(50px, 1fr) auto; gap: 8px; }
  .grp-split-row { grid-template-columns: minmax(0, 1fr) 76px 64px; }
}
/* ---- end groups ---- */
/* ---- friends-location ---- Friends map (friends.js) */
#friends-view { overflow: hidden; }
.fr-page { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; }
.fr-head { padding: 20px 24px 12px; }
.fr-sub { color: var(--ink-2); font-size: 14.5px; margin-top: 2px; }
.fr-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 0; border-top: .5px solid var(--hair); }
.fr-map-wrap { position: relative; min-height: 0; min-width: 0; }
.fr-map { position: absolute; inset: 0; background: var(--surface-2); }
.fr-side { overflow: auto; overscroll-behavior: contain; border-left: .5px solid var(--hair); padding: 12px 18px 40px; background: var(--bg); min-width: 0; }
.fr-sec + .fr-sec { margin-top: 26px; }
.fr-sec .section-head { margin-bottom: 8px; }
.fr-count { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.fr-search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 0 10px; min-height: 40px; }
.fr-search:focus-within { border-color: var(--sky); box-shadow: 0 0 0 3px var(--glow); }
.fr-search .ic { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.fr-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); padding: 8px 0; outline: none; }
.fr-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.fr-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.fr-row:hover { background: var(--hover); }
.fr-row.on { background: var(--sky-tint); }
.fr-row:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.fr-row.dim .fr-av { filter: grayscale(.8); opacity: .7; }
.fr-av, .fr-pin-av { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; font: 650 14px/1 var(--font); color: #fff; background: hsl(var(--fr-h, 200) 62% 42%); box-shadow: 0 0 0 2px var(--surface); letter-spacing: .02em; }
.fr-row-text { display: grid; min-width: 0; flex: 1; }
.fr-row-text b { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-row-text small { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-row-text .fr-via { color: var(--ink-3); font-size: 12.5px; }
.fr-live { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tint); flex: none; }
.fr-none, .fr-hint { color: var(--ink-2); font-size: 13.5px; text-wrap: pretty; }
.fr-none { padding: 12px 4px; }
.fr-hint { margin-top: 4px; }
.fr-error { margin-bottom: 12px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.fr-pin { border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; justify-items: center; }
.fr-pin .fr-pin-av { width: 34px; height: 34px; font-size: 12.5px; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.fr-pin::after { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fff; margin-top: -2px; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .2)); }
.fr-pin.stale .fr-pin-av { filter: grayscale(.7); opacity: .8; }
.fr-pin.on { z-index: 2; }
.fr-pin.on .fr-pin-av { width: 42px; height: 42px; font-size: 14px; box-shadow: 0 0 0 4px var(--sky), 0 4px 12px rgba(0, 0, 0, .35); }
.fr-pin:focus-visible { outline: none; }
.fr-pin:focus-visible .fr-pin-av { box-shadow: 0 0 0 3px var(--sky); }
.fr-card { position: absolute; left: 12px; bottom: 28px; z-index: 3; width: min(320px, calc(100% - 24px)); box-sizing: border-box; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: .5px solid var(--hair); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); }
.fr-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fr-card-top b { font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-x { border: 0; background: transparent; color: var(--ink-2); padding: 4px; border-radius: 8px; cursor: pointer; display: grid; }
.fr-x:hover { background: var(--hover); }
.fr-x .ic { width: 18px; height: 18px; }
.fr-card-meta { color: var(--ink-2); font-size: 13.5px; margin: 2px 0 10px; }
.fr-dir { display: flex; gap: 8px; flex-wrap: wrap; }
.fr-dir .btn { text-decoration: none; color: var(--ink); }
.fr-status { font-size: 14.5px; text-wrap: pretty; }
.fr-status small { color: var(--ink-2); font-size: 13px; }
.fr-note { font-size: 13.5px; color: var(--ok); margin-top: 8px; }
.fr-note.err { color: var(--danger); }
.fr-shares { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.fr-shares li { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: .5px solid var(--hair); border-radius: 12px; padding: 9px 12px; }
.fr-shares li > span { display: grid; min-width: 0; }
.fr-shares b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-shares small { color: var(--ink-2); font-size: 12.5px; }
.fr-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fr-form { margin-top: 18px; background: var(--surface); border: .5px solid var(--hair); border-radius: 14px; padding: 12px 14px; }
.fr-form h3 { font: 650 15px/1.3 var(--font-display); }
.fr-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.fr-inline select { flex: 1 1 130px; width: auto; }
.fr-inline select[hidden] { display: none; }
.fr-send { margin-top: 14px; }
@media (max-width: 760px) {
  #friends-view { overflow: auto; }
  .fr-page { display: block; height: auto; }
  .fr-head { padding: 16px 16px 10px; }
  .fr-body { display: block; }
  .fr-map-wrap { height: 46vh; min-height: 260px; }
  .fr-side { border-left: 0; overflow: visible; padding: 14px 16px 40px; }
  .fr-card { bottom: 20px; }
}
/* ---- end friends-location ---- */
/* ---- trip intelligence ---- */
/* Prepare page (intel.js): your passport, entry checklist cards, country cheat sheets, search. */
.pp-h { font: 650 15px/1.3 var(--font-display); color: var(--ink-2); margin: 22px 0 10px; letter-spacing: -.005em; }
.pp-muted { color: var(--ink-3); font-size: 13px; }
.pp-flag { font-size: 18px; line-height: 1; }
.pp-flag.big { font-size: 28px; flex: none; }
.pp-pass { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: 14px; padding: 14px 16px; background: var(--surface); border: .5px solid var(--hair); border-radius: var(--radius); }
.pp-pass-main { min-width: 0; flex: 1 1 260px; display: grid; gap: 2px; }
.pp-kicker { font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.pp-nat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 650 18px/1.3 var(--font-display); }
.pp-nat.none { font: 500 15px/1.4 var(--font); color: var(--warn); }
.pp-src { font: 500 12.5px/1.3 var(--font); color: var(--ink-3); }
.pp-note { font-size: 13px; color: var(--ink-2); }
.pp-sel { min-width: 0; max-width: 100%; }
.pp-sel select { max-width: 100%; font: inherit; font-size: 14.5px; padding: 8px 10px; border-radius: 10px; border: .5px solid var(--hair); background: var(--surface-2); color: var(--ink); }
.pp-entry, .pp-sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.pp-card, .cc { background: var(--surface); border: .5px solid var(--hair); border-radius: var(--radius); padding: 14px 16px; min-width: 0; display: grid; gap: 10px; align-content: start; }
.pp-card { border-top: 3px solid var(--hair); }
.pp-card.tone-ok { border-top-color: var(--ok); }
.pp-card.tone-warn { border-top-color: var(--warn); }
.pp-card.tone-bad { border-top-color: var(--danger); }
.pp-card-head, .cc-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-card-title, .cc-head > div { flex: 1; min-width: 0; }
.pp-card-head h4, .cc-head h4 { font: 650 16.5px/1.25 var(--font-display); overflow-wrap: anywhere; }
.pp-dates { font-size: 13px; color: var(--ink-2); }
.pp-status { flex: none; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.pp-status.ok { background: var(--ok-tint); color: var(--ok); }
.pp-status.warn { background: var(--warn-tint); color: var(--warn); }
.pp-status.bad { background: var(--pink-tint); color: var(--danger); }
.pp-summary { font-size: 14px; color: var(--ink); text-wrap: pretty; }
.pp-stay { color: var(--ink-2); }
.pp-tasks { list-style: none; margin: 0; padding: 0; display: grid; border-top: .5px solid var(--hair); }
.pp-task { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0 8px; border-bottom: .5px solid var(--hair); }
.pp-task input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--sky); }
.pp-task-main { min-width: 0; flex: 1; display: grid; gap: 3px; }
.pp-task-title { font-weight: 600; font-size: 14.5px; cursor: pointer; overflow-wrap: anywhere; }
.pp-task.done .pp-task-title { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.pp-task-detail { font-size: 13.5px; color: var(--ink-2); text-wrap: pretty; }
.pp-task-when { font-size: 12.5px; color: var(--ink-3); }
.pp-task.overdue .pp-task-when { color: var(--danger); font-weight: 600; }
.pp-opt { margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.pp-ok, .pp-bad { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.pp-ok { color: var(--ok); }
.pp-bad { color: var(--danger); }
.pp-ok .ic, .pp-bad .ic { width: 15px; height: 15px; }
.pp-left { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pp-notes { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-2); }
.pp-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; }
.pp-link { display: inline-flex; align-items: center; gap: 4px; color: var(--sky-text); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.pp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-link .ic { width: 13px; height: 13px; }
.pp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 12px; color: var(--ink-3); padding-top: 2px; }
.pp-res { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.pp-res input { accent-color: var(--sky); }
.pp-disclaimer { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--warn-tint); color: var(--ink); font-size: 13px; text-wrap: pretty; }
.pp-disclaimer .ic { width: 16px; height: 16px; color: var(--warn); margin-top: 1px; }
.pp-search { margin-top: 8px; }
.pp-q { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; border: .5px solid var(--hair); background: var(--surface); color: var(--ink-3); max-width: 520px; }
.pp-q input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; padding: 10px 0; outline: none; }
.pp-q:focus-within { outline: 2px solid var(--sky); outline-offset: 1px; }
.pp-found { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pp-found-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: .5px solid var(--hair); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.pp-found-btn:hover { background: var(--hover); }
/* Country cheat sheet */
.cc-grid { margin: 0; display: grid; }
.cc-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: .5px solid var(--hair); font-size: 13.5px; }
.cc-row dt { color: var(--ink-3); font-weight: 600; font-size: 12.5px; padding-top: 1px; }
.cc-row dd { margin: 0; color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
.cc-rate { display: block; margin-top: 2px; color: var(--sky-text); font-weight: 600; }
.cc-tel { display: inline-block; margin-right: 12px; text-transform: capitalize; color: var(--ink-2); }
.cc-tel a { color: var(--ink); font-weight: 650; text-decoration: none; }
.cc-more summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--sky-text); padding: 4px 0; }
.cc-phrases { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.cc-phrases li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0 10px; font-size: 13.5px; padding: 6px 0; border-top: .5px solid var(--hair); }
.cc-en { color: var(--ink-2); }
.cc-local { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.cc-say { grid-column: 2; color: var(--ink-3); font-style: italic; font-size: 12.5px; }
.cc-dlg .sheet-body { gap: 12px; }
.cc-dlg .cc { border: 0; padding: 0; }
.cc-dlg .cc-head .pp-flag, .cc-dlg .cc-head h4 { display: none; }
/* Itinerary: travel-time connectors between items */
.items .dp-leg { display: flex; gap: 12px; padding: 2px 10px 2px 12px; position: relative; }
.dp-line { width: 32px; flex: none; display: flex; justify-content: center; }
.dp-line::before { content: ""; width: 0; border-left: 2px dotted var(--hair); }
.dp-body { min-width: 0; flex: 1; display: grid; gap: 3px; padding: 6px 0; }
.dp-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--ink-2); }
.dp-main .ic { width: 16px; height: 16px; color: var(--ink-3); }
.dp-leave { font-weight: 600; color: var(--ink); }
.dp-warn { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; font-weight: 500; text-wrap: pretty; padding: 6px 9px; border-radius: 10px; }
.dp-warn .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.warn-tight .dp-warn, .warn-early .dp-warn { background: var(--warn-tint); color: var(--ink); }
.warn-tight .dp-warn .ic, .warn-early .dp-warn .ic { color: var(--warn); }
.warn-impossible .dp-warn { background: var(--pink-tint); color: var(--pink-text); }
.warn-impossible .dp-leave { color: var(--danger); }
.warn-tight .dp-line::before, .warn-early .dp-line::before { border-left-color: var(--warn); }
.warn-impossible .dp-line::before { border-left-color: var(--danger); }
.dp-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
.dp-links a { color: var(--sky-text); text-decoration: none; font-weight: 500; }
.dp-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dp-leg + .item::before { display: none; }
.dp-note { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; font-size: 12.5px; color: var(--ink-3); }
.dp-note .ic { width: 14px; height: 14px; flex: none; }
/* Today: getting around */
.dp-tlist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: .5px solid var(--hair); border-radius: 14px; }
.dp-trow { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; }
.dp-trow + .dp-trow { border-top: .5px solid var(--hair); }
.dp-ttime { flex: none; min-width: 52px; font: 650 17px/1.3 var(--font-display); color: var(--ink); padding-top: 4px; }
.dp-trow.warn-impossible .dp-ttime { color: var(--danger); }
.dp-trow.warn-tight .dp-ttime, .dp-trow.warn-early .dp-ttime { color: var(--warn); }
.dp-tmsg { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; text-wrap: pretty; }
.dp-tmsg .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ink-3); }
.dp-trow.warn-impossible .dp-tmsg .ic { color: var(--danger); }
.dp-trow.warn-tight .dp-tmsg .ic, .dp-trow.warn-early .dp-tmsg .ic { color: var(--warn); }
.dp-today .dp-tlist + .td-muted { margin-top: 6px; font-size: 12.5px; }
  .cc-row { grid-template-columns: 82px minmax(0, 1fr); }
  .cc-phrases li { grid-template-columns: minmax(0, 1fr); }
  .cc-say { grid-column: 1; }
  .pp-sel, .pp-sel select { width: 100%; }
/* ---- end trip intelligence ---- */
/* ---- collab ---- Plan page (polls, ideas, checklists), RSVP chips, Today sections */
.cb .section-head.cb-head { margin-top: 26px; }
.cb .cb-head .sub-title { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 15px; color: var(--ink); }
.cb .cb-head .sub-title .ic { width: 18px; height: 18px; color: var(--sky-text); }
.cb-jump { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.cb-jump-a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: .5px solid var(--hair); color: var(--ink-2); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.cb-jump-a:hover { background: var(--hover); color: var(--ink); }
.cb-jump-a .ic { width: 15px; height: 15px; }
.cb-jump-a .count { font-size: 12px; color: var(--sky-text); font-weight: 600; }
.cb-note { margin: 10px 0; }
.cb-block { min-width: 0; }
.cb-polls, .cb-ideas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.cb-ideas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cb-lists { display: grid; gap: 12px; margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cb-card { background: var(--surface); border: .5px solid var(--hair); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); min-width: 0; }
.cb-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cb-card-head > p { flex: 1 1 auto; min-width: 0; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cb-q { font-size: 16px; }
.cb-meta { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; overflow-wrap: anywhere; }
.cb-meta .ic { width: 13px; height: 13px; vertical-align: -2px; }
.cb-meta .gmaps-link { font-size: 13px; }
.badge.sky { background: var(--sky-tint); color: var(--sky-text); }
.badge.ok { background: var(--ok-tint); color: var(--ok); }
.cb-poll.closed .cb-q { color: var(--ink-2); }
.cb-fs { border: 0; margin: 10px 0 0; padding: 0; min-width: 0; }
.cb-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-opt { position: relative; border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.cb-bar { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--sky-tint); transition: width .25s ease; }
.cb-opt.win .cb-bar { background: var(--ok-tint); }
.cb-opt.mine { box-shadow: inset 0 0 0 1.5px var(--sky); }
.cb-opt-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; min-height: 44px; box-sizing: border-box; }
.cb-opt-row input { flex: none; width: 18px; height: 18px; accent-color: var(--sky); margin: 0; }
.cb-opt-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.cb-opt-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14.5px; overflow-wrap: anywhere; }
.cb-oi { width: 15px; height: 15px; color: var(--ink-2); flex: none; }
.cb-opt.hidden-item .cb-opt-label { color: var(--ink-3); font-style: italic; }
.cb-opt-who { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.cb-opt-n { flex: none; font-weight: 600; font-size: 14px; color: var(--ink-2); min-width: 1.5em; text-align: right; }
.cb-actions, .cb-idea-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cb-actions .btn .ic, .cb-idea-foot .btn .ic { width: 15px; height: 15px; }
.cb-actions .icon-btn, .cb-idea-foot .icon-btn { margin-left: auto; }
.cb-kind { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--sky-tint); color: var(--sky-text); }
.cb-kind .ic { width: 16px; height: 16px; }
.cb-idea-title a { color: inherit; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.cb-note-text { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.cb-up { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px; border-radius: 999px; border: .5px solid var(--hair); background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cb-up .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.cb-up.on { background: var(--sky-tint); color: var(--sky-text); border-color: transparent; }
.cb-up:disabled { cursor: default; opacity: .7; }
.cb-by { font-size: 12.5px; color: var(--ink-3); }
.cb-list-title { font-size: 15.5px; }
.cb-count { font-size: 13px; color: var(--ink-3); flex: none; }
.cb-prog { display: block; height: 4px; border-radius: 4px; background: var(--surface-2); margin: 10px 0 4px; overflow: hidden; }
.cb-prog-in { display: block; height: 100%; width: var(--w, 0%); background: var(--ok); border-radius: 4px; }
.cb-entries { list-style: none; margin: 6px 0 0; padding: 0; }
.cb-entry { display: flex; align-items: center; gap: 6px; border-bottom: .5px solid var(--hair); }
.cb-entry:last-child { border-bottom: 0; }
.cb-entry-row { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; row-gap: 0; padding: 8px 0; cursor: pointer; }
.cb-entry-row input { width: 18px; height: 18px; accent-color: var(--ok); margin: 0; flex: none; align-self: center; }
.cb-entry-row input:disabled { cursor: not-allowed; }
.cb-entry-text { flex: 1 1 0; min-width: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.cb-entry-sub { flex: 1 1 100%; padding-left: 28px; font-size: 12.5px; color: var(--ink-3); }
.cb-entry.done .cb-entry-text { color: var(--ink-3); text-decoration: line-through; }
.cb-entry.mine .cb-entry-sub { color: var(--sky-text); }
.cb-add { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cb-add .input { flex: 1 1 140px; min-width: 0; height: 36px; font-size: 14px; }
.cb-add .cb-who, .cb-add .cb-due { flex: 0 1 130px; }
.cb-pickset { border: .5px solid var(--hair); border-radius: 12px; padding: 8px 12px; }
.cb-pickset summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cb-picks { display: grid; gap: 4px; margin-top: 8px; max-height: 200px; overflow: auto; }
.cb-pick { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.cb-pick .ic { width: 15px; height: 15px; color: var(--ink-2); flex: none; }
.cb-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-dates { display: grid; gap: 6px; }
.cb-addrange { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.cb-addrange .ic { width: 15px; height: 15px; }
.cb-date-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cb-date-row .input { flex: 1 1 0; min-width: 0; }
.cb-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* RSVP on itinerary items */
.rsvp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rsvp-count { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); margin-right: 2px; }
.rsvp-count .ic { width: 14px; height: 14px; }
.rsvp-chip { height: 28px; padding: 0 11px; border-radius: 999px; border: .5px solid var(--hair); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rsvp-chip:hover { background: var(--hover); }
.rsvp-chip.on.s-going { background: var(--ok-tint); color: var(--ok); border-color: transparent; }
.rsvp-chip.on.s-maybe { background: var(--warn-tint); color: var(--warn); border-color: transparent; }
.rsvp-chip.on.s-no { background: var(--pink-tint); color: var(--pink-text); border-color: transparent; }
/* Today */
.cb-td-row > .ic { width: 16px; height: 16px; color: var(--sky-text); flex: none; }
.cb-td-row .td-row-title { color: var(--ink); text-decoration: none; flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.cb-td-check { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.cb-td-check input { width: 18px; height: 18px; accent-color: var(--ok); margin: 0; flex: none; }
.cb-td-sub { padding-left: 28px; font-size: 13px; }
.cb-td-sub.late { color: var(--pink-text); }
.cb-td-sub a, .cb-td-sub a:visited { color: var(--sky-text); }
  .cb-ideas, .cb-lists { grid-template-columns: minmax(0, 1fr); }
  .cb-card { padding: 12px 13px; }
  .cb-2col { grid-template-columns: minmax(0, 1fr); }
  .cb-add .cb-who, .cb-add .cb-due { flex: 1 1 120px; }
/* ---- end collab ---- */
/* ---- offline ---- */
.banner.off-banner { background: var(--warn-tint); color: var(--warn); }
.off-card { display: grid; gap: 8px; min-width: 0; }
.off-card p { margin: 0; }
.off-card .section-title { display: flex; align-items: center; gap: 6px; }
.off-card .section-title .ic { width: 17px; height: 17px; }
.off-status { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); flex-wrap: wrap; overflow-wrap: anywhere; }
.off-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.off-dot.on { background: var(--ok); }
.off-muted { color: var(--ink-2); font-size: 13px; text-wrap: pretty; overflow-wrap: anywhere; }
.off-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.off-bar > span { display: block; height: 100%; background: var(--sky); border-radius: 3px; transition: width .3s ease; }
.off-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.off-actions .btn .ic { width: 15px; height: 15px; }
.btn.ghost { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 .5px var(--hair); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); }
.off-opts { display: grid; gap: 8px; padding-top: 8px; border-top: .5px solid var(--hair); }
.off-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.off-check input { margin: 2px 0 0; flex: none; accent-color: var(--sky); }
.off-budget { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
.off-budget select { font: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface-2); border: 0; border-radius: 8px; padding: 3px 6px; }
.off-toasts { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1500; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.off-toasts:empty { display: none; }
.off-toast { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-size: 13.5px; border: .5px solid var(--hair); pointer-events: auto; }
.off-toast.warn { background: var(--warn-tint); color: var(--warn); }
/* ---- end offline ---- */

/* ---- day recap ---- */
.recap { display: grid; gap: 10px; min-width: 0; }
.recap p { margin: 0; }
.recap-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.recap-actions { display: flex; align-items: center; gap: 6px; }
.recap-go .ic { width: 16px; height: 16px; }
.recap-flash { font-size: 13px; color: var(--ok); }
.recap-quick, .recap-card { background: var(--surface); border: .5px solid var(--hair); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; min-width: 0; }
.recap-headline { font-weight: 600; font-size: 15px; color: var(--ink); text-wrap: pretty; }
.recap-lines { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14px; color: var(--ink-2); }
.recap-lines li { overflow-wrap: anywhere; }
.recap-lines .rl-next, .recap-lines .rl-reminder { color: var(--ink); }
.recap-lines .rl-reminder::marker { color: var(--pink); }
.recap-todos { display: grid; gap: 6px; }
.recap-todos h3 { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
.recap-todos > .btn { justify-self: start; }
.recap-todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.recap-todo-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.recap-box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--ink-3); flex: none; display: grid; place-items: center; color: var(--ok); }
.recap-box .ic { width: 12px; height: 12px; }
.recap-todo-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.recap-todo-text small { color: var(--ink-3); }
.recap-note { font-size: 12.5px; color: var(--ink-3); text-wrap: pretty; }
.recap-card.warn { background: var(--warn-tint); color: var(--warn); }
.recap-running { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; }
.recap-running .spinner { width: 14px; height: 14px; border-width: 2px; }
.recap-md { font-size: 14.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.recap-md > :first-child { margin-top: 0; }
.recap-md > :last-child { margin-bottom: 0; }
.recap-md h1, .recap-md h2, .recap-md h3 { font-size: 15px; margin: 10px 0 4px; }
.recap-md ul, .recap-md ol { padding-left: 20px; margin: 4px 0; }
/* ---- end day recap ---- */
/* ---- album + review ---- */
/* Trip album (album.js) */
.al-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.al-bar-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 4px 0 14px; }
.al-bar-row .jr-seg button.with-ic { display: inline-flex; align-items: center; gap: 5px; }
.al-bar-row .jr-seg .ic { width: 15px; height: 15px; }
.al-progress { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: .5px solid var(--hair); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; color: var(--ink-2); }
.al-bar { flex: 1 1 120px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.al-bar > span { display: block; height: 100%; background: var(--sky); transition: width .2s; }
.al-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.al-day-title { display: flex; align-items: baseline; gap: 8px; font: 600 15px/1.3 var(--font-display); margin: 0 0 8px; }
.al-day-n { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.al-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.al-tile { position: relative; background: var(--surface); border: .5px solid var(--hair); border-radius: 12px; overflow: hidden; min-width: 0; }
.al-open { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; }
.al-thumb { display: block; aspect-ratio: 1; background: var(--surface-2); overflow: hidden; }
.al-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-open:hover .al-thumb img { transform: scale(1.03); transition: transform .25s; }
.al-meta { display: flex; align-items: center; gap: 6px; padding: 7px 9px; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.al-by { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.al-when { margin-left: auto; flex: none; }
.al-has-loc .ic { width: 13px; height: 13px; color: var(--ink-3); }
.al-like { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px/1 var(--font); border-radius: 999px; padding: 5px 8px; }
.al-like .ic { width: 16px; height: 16px; }
.al-like.on .ic path { fill: currentColor; }
.al-like-tile { position: absolute; top: 6px; right: 6px; background: rgba(5, 8, 14, .45); color: #fff; backdrop-filter: blur(6px); }
.al-like-tile.on { color: #E11D74; background: rgba(255, 255, 255, .92); }
.al-like-lb { background: rgba(255, 255, 255, .12); color: #fff; padding: 8px 12px; }
.al-like-lb.on { color: #E11D74; background: rgba(255, 255, 255, .92); }
.al-lightbox[open] { grid-template-rows: auto minmax(0, 1fr) auto; }
.al-lightbox .jr-lb-stage img { max-height: calc(100dvh - 170px); }
.al-lb-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .08); }
.al-lb-who { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.al-lb-who span { color: rgba(255, 255, 255, .7); font-size: 13px; }
.al-lb-cap { margin: 4px 0 0; overflow-wrap: anywhere; }
.al-lb-acts { display: flex; align-items: center; gap: 4px; }
.al-lightbox .icon-btn.danger { color: #FDA4AF; }
.al-pin { border: 2px solid #fff; padding: 0; cursor: pointer; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.al-pin .al-thumb { width: 100%; height: 100%; aspect-ratio: auto; }
.al-map { height: 420px; border-radius: 14px; overflow: hidden; border: .5px solid var(--hair); }
.al-map-wrap { display: grid; gap: 8px; }
.al-drop { width: 100%; display: grid; place-items: center; gap: 8px; padding: 40px 16px; border: 1.5px dashed var(--hair); border-radius: 16px; background: var(--surface); color: var(--ink-2); font: 600 15px var(--font); cursor: pointer; }
.al-drop .ic { width: 34px; height: 34px; color: var(--sky); }
.al-drop:hover { border-color: var(--sky); color: var(--ink); }
.al-fieldset { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.al-fieldset legend { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0 0 6px; }
.al-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: .5px solid var(--hair); border-radius: 12px; cursor: pointer; }
.al-radio > span { display: grid; gap: 2px; }
.al-radio input { margin-top: 3px; }
.al-people { display: grid; gap: 2px; margin-top: 8px; }
.al-fail { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
/* Album photos in the journal (journal.js) */
.al-jstrip { margin-top: 10px; display: grid; gap: 6px; min-width: 0; }
.al-jstrip-label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.al-jstrip-label .ic { width: 15px; height: 15px; }
.al-jstrip-row { display: grid; grid-auto-flow: column; grid-auto-columns: 84px; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.al-jcell { border: 0; padding: 0; border-radius: 9px; overflow: hidden; cursor: zoom-in; background: none; }
/* Year in review (review.js) */
.rv { max-width: 980px; }
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rv-top .page-title { margin: 0; }
.rv-years { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; padding: 2px; background: var(--surface-2); border-radius: 12px; scrollbar-width: none; }
.rv-year { flex: none; border: 0; background: none; color: var(--ink-2); font: 600 13.5px/1 var(--font); padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.rv-year.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.rv-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 30px 28px 26px; color: #F8FAFC; background:
  radial-gradient(600px 300px at 90% 0%, rgba(236, 72, 153, .55), transparent 70%),
  radial-gradient(500px 260px at 0% 100%, rgba(14, 165, 233, .45), transparent 70%),
  linear-gradient(135deg, #0B1026, #251552 60%, #3B0F3A); box-shadow: var(--shadow); }
.rv-kicker { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; font-weight: 700; color: rgba(248, 250, 252, .75); }
.rv-year-big { margin: 2px 0 6px; font: 800 clamp(64px, 14vw, 128px)/0.95 var(--font-display); letter-spacing: -.04em; background: linear-gradient(90deg, #fff, #FBCFE8 60%, #BAE6FD); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-lede { margin: 0; font-size: clamp(17px, 2.4vw, 21px); line-height: 1.4; max-width: 34em; text-wrap: pretty; }
.rv-note { margin: 6px 0 0; font-size: 13px; color: rgba(248, 250, 252, .7); }
.rv-hero-acts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.rv-hero .btn.primary { background: #fff; color: #1B1446; }
.rv-hero .btn.primary .ic { color: #DB2777; }
.rv-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(248, 250, 252, .85); cursor: pointer; }
.rv-toggle input { width: 18px; height: 18px; accent-color: #EC4899; }
.rv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 14px 0; }
.rv-stat { position: relative; overflow: hidden; background: var(--surface); border: .5px solid var(--hair); border-radius: 16px; padding: 14px 16px; display: grid; align-content: start; gap: 2px; min-width: 0; }
.rv-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c, var(--sky)); }
.rv-stat.a { --c: #EC4899; } .rv-stat.b { --c: #8B5CF6; } .rv-stat.c { --c: #F59E0B; } .rv-stat.d { --c: #0EA5E9; }
.rv-stat.e { --c: #10B981; } .rv-stat.f { --c: #6366F1; } .rv-stat.g { --c: #F43F5E; }
.rv-stat-n { font: 800 26px/1.1 var(--font-display); letter-spacing: -.03em; white-space: nowrap; }
.rv-stat-l { color: var(--ink-2); font-size: 13.5px; }
.rv-stat-sub { color: var(--ink-3); font-size: 12px; }
.rv-card { background: var(--surface); border: .5px solid var(--hair); border-radius: 18px; padding: 16px 18px; margin: 0 0 14px; min-width: 0; }
.rv-h { margin: 0 0 12px; font: 700 16px/1.3 var(--font-display); }
.rv-map { height: 420px; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.rv-legend { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); }
.rv-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: -8px; vertical-align: middle; }
.rv-key.c { background: color-mix(in srgb, var(--pink) 50%, transparent); border: 1px solid var(--pink); }
.rv-key.f { height: 3px; border-radius: 2px; background: #F59E0B; }
.rv-key.p { border-radius: 50%; background: var(--ink); border: 1.5px solid var(--pink); }
.rv-firsts { background: linear-gradient(135deg, color-mix(in srgb, var(--pink) 10%, var(--surface)), var(--surface)); }
.rv-first-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.rv-first-list li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rv-first-list li > span:last-child { display: grid; min-width: 0; }
.rv-flag { font-size: 30px; line-height: 1; }
.rv-flag.sm { font-size: 17px; margin-right: 6px; }
.rv-sub { color: var(--ink-2); font-size: 13px; }
.rv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.rv-cols .rv-card { margin: 0; }
.rv-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rv-bars li { display: grid; grid-template-columns: minmax(0, 9em) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.rv-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-bar { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.rv-bar > span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--pink), #8B5CF6); }
.rv-bar-n { font-weight: 600; min-width: 2ch; text-align: right; }
.rv-also { margin: 10px 0 0; }
.rv-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rv-places li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.rv-rank { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; font-size: 13px; }
.rv-places li:first-child .rv-rank { background: linear-gradient(135deg, #D97706, #DB2777); color: #fff; }
.rv-place { display: grid; min-width: 0; }
.rv-place strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-trips { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rv-trip { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; color: inherit; text-decoration: none; }
a.rv-trip:hover { background: var(--hover); }
.rv-trip-flags { font-size: 18px; letter-spacing: 2px; overflow: hidden; white-space: nowrap; }
.rv-big-line { margin: 0 0 4px; font: 700 20px/1.3 var(--font-display); }
.rv-big-line .rv-sub { font: 400 14px var(--font); }
.rv-routes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rv-chip { background: var(--surface-2); border-radius: 999px; padding: 5px 10px; font-size: 12.5px; font-weight: 600; }
.rv-alltime-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rv-mini { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rv-mini span { display: grid; color: var(--ink-2); font-size: 13px; }
.rv-mini strong { font: 800 22px/1.15 var(--font-display); color: var(--ink); }
.rv-yearlist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.rv-yearlist a { display: grid; padding: 8px 10px; border-radius: 10px; border: .5px solid var(--hair); color: inherit; text-decoration: none; }
.rv-yearlist a:hover, .rv-yearlist a.on { border-color: var(--pink); }
.rv-foot { color: var(--ink-3); font-size: 12.5px; margin: 6px 4px 0; text-wrap: pretty; }
.rv-share .sheet-body { display: grid; gap: 12px; }
.rv-theme { justify-self: start; }
.rv-preview { display: grid; place-items: center; }
.rv-preview canvas { width: min(100%, 360px); height: auto; border-radius: 14px; box-shadow: var(--shadow); }
@media (max-width: 600px) {
  .rv-hero { padding: 22px 18px 20px; border-radius: 20px; }
  .rv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-map { height: 300px; }
  .rv-cols { grid-template-columns: minmax(0, 1fr); }
  .al-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .al-map { height: 340px; }
  .al-head-actions .btn { padding-inline: 10px; }
  .al-lb-info { padding-inline: 12px; }
}
/* ---- end album + review ---- */

/* ---- friends-social ---- Friends tabs, requests, add friend, QR (friends-social.js) */
.fr-page { grid-template-rows: auto auto minmax(0, 1fr); }
.fs-tabs { display: flex; gap: 4px; padding: 0 24px 10px; overflow-x: auto; scrollbar-width: none; }
.fs-tab { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 550; padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.fs-tab:hover { background: var(--hover); color: var(--ink); }
.fs-tab[aria-selected="true"] { background: var(--sky-tint); color: var(--sky-text); }
.fs-tab:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.fs-badge, .fs-nav-badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.side-item .fs-nav-badge { margin-left: auto; flex: none; }
.fs-panel { overflow: auto; overscroll-behavior: contain; border-top: .5px solid var(--hair); padding: 16px 24px 48px; min-height: 0; }
.fs-panel > * { max-width: 680px; }
.fs-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.fs-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; }
.fs-row:hover { background: var(--hover); }
.fs-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.fs-panel .btn.tiny.primary { background: var(--sky); color: #fff; }
.fs-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); padding: 4px 10px; border-radius: 999px; background: var(--hover); }
.fs-pill.ok { color: var(--ok); background: var(--ok-tint); }
.fs-pill .ic { width: 14px; height: 14px; }
.fs-prompt { border: 1px solid var(--hair); background: var(--sky-tint); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; display: grid; gap: 10px; }
.fs-prompt p { font-size: 14px; color: var(--ink); text-wrap: pretty; }
.fs-un-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-un-form .input { flex: 1; min-width: 140px; max-width: 280px; }
.fs-at { color: var(--ink-3); font-weight: 600; }
.fs-err { color: var(--danger); font-size: 13px; flex-basis: 100%; }
.fs-me { border: 1px solid var(--hair); border-radius: 16px; padding: 16px; background: var(--surface); margin-top: 26px; }
.fs-qr-wrap { display: grid; place-items: center; padding: 6px 0 10px; }
.fs-qr { width: min(240px, 70vw); height: auto; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.fs-me-name { text-align: center; font-weight: 600; font-size: 16px; }
.fs-me-name span { color: var(--ink-2); font-weight: 500; }
.fs-me .fr-hint { text-align: center; }
.fs-link { margin: 12px 0 8px; }
.fs-link .input { width: 100%; font-size: 13px; color: var(--ink-2); }
.fs-me .fr-actions, .fs-addcard .fr-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fs-addcard { border: 1px solid var(--sky); box-shadow: 0 0 0 3px var(--glow); border-radius: 16px; padding: 14px 16px; margin-bottom: 20px; background: var(--surface); }
.fs-addcard .fr-card-top { display: flex; align-items: center; justify-content: space-between; }
.fs-add-who { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.fs-add-who .fr-av { width: 48px; height: 48px; font-size: 17px; }
.fs-paste { display: flex; gap: 8px; margin-top: 14px; }
.fs-paste .input { flex: 1; min-width: 0; }
.fs-blocked summary { cursor: pointer; color: var(--ink-2); font-size: 14px; padding: 6px 0; }
.fs-set-un { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fs-set-un .input { width: 180px; }
.fs-set-msg { flex-basis: 100%; text-align: right; color: var(--ink-2); font-size: 12.5px; }
.fs-set-msg.fs-err { color: var(--danger); }
@media (max-width: 720px) {
  .fs-tabs { padding-inline: 16px; }
  .fs-panel { padding-inline: 16px; }
  .fs-row { flex-wrap: wrap; }
  .fs-actions { width: 100%; justify-content: flex-start; padding-left: 50px; }
}
/* ---- end friends-social ---- */
/* ---- google places ---- */
.place-search { position: relative; }
.place-hits { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); overflow: hidden; }
.place-hits:empty { display: none; }
.place-hits li + li { border-top: 1px solid var(--hair); }
.place-hit { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 12px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.place-hit:hover, .place-hit:focus-visible { background: var(--hover); outline: none; }
.place-hit .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
.place-hit-text { display: flex; flex-direction: column; min-width: 0; }
.place-hit-name { font-weight: 600; }
.place-hit-sub { color: var(--ink-2); font-size: .875em; overflow-wrap: anywhere; }
.place-credit { margin: 4px 0 0; color: var(--ink-3); font-size: .75rem; text-align: right; }
/* ---- end google places ---- */
/* ---- feedback ---- Help & feedback (feedback.js) */
.fb { --fb-bug: var(--danger); --fb-bug-tint: color-mix(in srgb, var(--danger) 13%, transparent); --fb-idea: var(--warn); --fb-idea-tint: var(--warn-tint); --fb-q: var(--sky-text); --fb-q-tint: var(--sky-tint); --fb-love: var(--pink-text); --fb-love-tint: var(--pink-tint); }
.fb .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fb-tabs { display: flex; gap: 4px; margin: 14px 0 18px; overflow-x: auto; scrollbar-width: none; border-bottom: .5px solid var(--hair); padding-bottom: 10px; }
.fb-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; color: var(--ink-2); font-size: 14px; font-weight: 550; text-decoration: none; white-space: nowrap; }
.fb-tab .ic { width: 16px; height: 16px; }
.fb-tab:hover { background: var(--hover); color: var(--ink); }
.fb-tab[aria-current="page"] { background: var(--sky-tint); color: var(--sky-text); }
.fb-tab-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }

/* new message */
.fb-compose { display: grid; gap: 22px; }
.fb-kinds { border: 0; margin: 0; padding: 0; min-width: 0; }
.fb-legend, .fb-label { display: block; font: 650 17px/1.3 var(--font-display); letter-spacing: -.01em; margin-bottom: 10px; padding: 0; }
.fb-kind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fb-kind { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hair); cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.fb-kind:hover { border-color: color-mix(in srgb, var(--sky) 45%, var(--hair)); }
.fb-kind input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fb-kind:has(input:checked) { border-color: var(--sky); box-shadow: 0 0 0 3px var(--glow); }
.fb-kind:has(input:focus-visible) { outline: 2px solid var(--sky); outline-offset: 2px; }
.fb-kind:has(input:disabled) { opacity: .6; cursor: default; }
.fb-kind-ic, .fb-row-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.fb-kind-ic .ic { width: 20px; height: 20px; }
.fb-kind-text { display: grid; gap: 3px; }
.fb-kind-text b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.fb-kind-text small { color: var(--ink-2); font-size: 13px; line-height: 1.35; text-wrap: pretty; }
.fb-k-bug { --k: var(--fb-bug); --kt: var(--fb-bug-tint); }
.fb-k-idea { --k: var(--fb-idea); --kt: var(--fb-idea-tint); }
.fb-k-question { --k: var(--fb-q); --kt: var(--fb-q-tint); }
.fb-k-praise { --k: var(--fb-love); --kt: var(--fb-love-tint); }
.fb-kind-ic, .fb-row-ic { color: var(--k, var(--ink-2)); background: var(--kt, var(--surface-2)); }
.fb-k-bug .fb-kind-ic, .fb-k-idea .fb-kind-ic, .fb-k-question .fb-kind-ic, .fb-k-praise .fb-kind-ic { color: var(--k); background: var(--kt); }

.fb-form, .fb-reply { display: grid; gap: 14px; }
.fb-text-wrap { display: grid; gap: 4px; }
.fb-text { min-height: 140px; font-size: 15px; line-height: 1.45; }
.fb-reply .fb-text { min-height: 84px; }
.fb-text-foot { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-3); font-size: 12px; padding: 0 2px; }
.fb-count.near { color: var(--pink-text); font-weight: 600; }
.fb-shots { display: grid; gap: 6px; }
.fb-shots-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fb-shot { position: relative; margin: 0; width: 88px; height: 66px; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: .5px solid var(--hair); }
.fb-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-shot-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(12, 26, 46, .72); color: #fff; cursor: pointer; }
.fb-shot-x .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.fb-shot-add { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--ink-3) 60%, transparent); background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 550; cursor: pointer; }
.fb-shot-add:hover { background: var(--hover); color: var(--ink); border-color: var(--sky); }
.fb-hint { color: var(--ink-3); font-size: 12.5px; text-wrap: pretty; }
.fb-diag { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: .5px solid var(--hair); }
.fb-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.fb-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--sky); flex: none; }
.fb-check span { display: grid; gap: 2px; }
.fb-check b { font-weight: 600; font-size: 14.5px; }
.fb-check small { color: var(--ink-2); font-size: 13px; text-wrap: pretty; }
.fb-diag-more summary, .fb-diag-msg summary { cursor: pointer; color: var(--sky-text); font-size: 13.5px; font-weight: 550; width: fit-content; padding: 2px 0; margin-left: 28px; }
.fb-diag-json { margin: 8px 0 0; padding: 10px 12px; max-height: 260px; overflow: auto; border-radius: 10px; background: var(--surface-2); font: 12px/1.5 var(--mono); color: var(--ink-2); white-space: pre; }
.fb-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.fb-progress { color: var(--ink-2); font-size: 13px; margin-right: auto; }
.fb-send { font-size: 15px; padding: 9px 20px; }
.fb-send .ic { width: 16px; height: 16px; }

/* sent */
.fb-sent { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 32px 20px 28px; border-radius: 20px; background: var(--surface); border: .5px solid var(--hair); box-shadow: var(--shadow-sm); }
.fb-sent-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-tint); color: var(--ok); }
.fb-sent-ic .ic { width: 26px; height: 26px; stroke-width: 2.4; }
.fb-sent h2 { font: 700 22px/1.2 var(--font-display); letter-spacing: -.02em; }
.fb-sent h2:focus { outline: none; }
.fb-ref-block { display: grid; gap: 4px; margin-top: 6px; }
.fb-ref-block small { color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.fb-ref-line { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 16px; border-radius: 12px; background: var(--sky-tint); }
.fb-ref-big { font-size: 24px; font-weight: 700; letter-spacing: .08em; color: var(--sky-text); user-select: all; }
.fb-sent-note { color: var(--ink-2); font-size: 14px; max-width: 46ch; text-wrap: pretty; }
.fb-sent-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.fb-sent-actions .btn.small { text-decoration: none; }

/* lists */
.fb-list-wrap { display: grid; gap: 12px; }
.fb-filter { grid-template-columns: repeat(4, auto); justify-content: start; width: fit-content; max-width: 100%; margin: 0; overflow-x: auto; }
.fb-filter span { padding: 5px 12px; }
.fb-filter span.fb-n { display: inline; margin-left: 6px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink-3); font-size: 12px; }
.fb-form .fb-label { margin-bottom: -6px; }
.fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fb-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: .5px solid var(--hair); color: inherit; text-decoration: none; transition: background-color .15s, border-color .15s; }
.fb-row:hover { background: var(--hover); }
.fb-row.unread { border-color: color-mix(in srgb, var(--sky) 55%, var(--hair)); }
.fb-row-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.fb-row-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.fb-row-top b { font-weight: 650; font-size: 15px; }
.fb-row.unread .fb-row-top b { color: var(--ink); }
.fb-row-kind { color: var(--ink-2); font-size: 13.5px; }
.fb-row-ref { color: var(--ink-3); font-size: 12px; letter-spacing: .04em; }
.fb-row-preview { color: var(--ink-2); font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.fb-row.unread .fb-row-preview { color: var(--ink); }
.fb-row-meta { display: flex; gap: 10px; flex-wrap: wrap; color: var(--ink-3); font-size: 12.5px; }
.fb-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.fb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); margin-right: 4px; }
.fb-plat { display: inline-flex; align-items: center; padding: 0 7px; height: 18px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.fb-st-open { background: var(--sky-tint); color: var(--sky-text); }
.fb-st-progress { background: var(--warn-tint); color: var(--warn); }
.fb-st-answered { background: var(--ok-tint); color: var(--ok); }
.fb-st-closed { background: var(--surface-2); color: var(--ink-3); }
.fb-empty { display: grid; gap: 6px; justify-items: start; }
.fb-empty .btn { margin-top: 6px; text-decoration: none; }
.fb-none { padding: 12px 4px; }

/* a thread */
.fb-back { display: inline-flex; align-items: center; gap: 4px; color: var(--sky-text); font-size: 14px; font-weight: 550; text-decoration: none; margin: 0 0 14px -4px; padding: 4px; border-radius: 8px; }
.fb-back .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.fb-back:hover { background: var(--hover); }
.fb-thread { display: grid; }
.fb-thread-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.fb-row-ic.big { width: 46px; height: 46px; border-radius: 14px; }
.fb-row-ic.big .ic { width: 24px; height: 24px; }
.fb-thread-title { min-width: 0; display: grid; gap: 6px; }
.fb-thread-title .page-title { font-size: 26px; overflow-wrap: anywhere; }
.fb-thread-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-2); font-size: 13.5px; }
.fb-ref { font-weight: 650; letter-spacing: .06em; color: var(--ink); font-size: 13.5px; }
.fb-copy { margin-left: -6px; }
.fb-status { width: 100%; max-width: 480px; margin: 0 0 18px; }
.fb-status .seg { margin: 0; }
.fb-status-label { padding: 0 2px 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.fb-status .seg:disabled { opacity: .7; }
.fb-msgs { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
.fb-msg { display: grid; gap: 4px; max-width: min(560px, 88%); justify-self: start; }
.fb-msg.mine { justify-self: end; }
.fb-msg-head { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--ink-3); padding: 0 6px; }
.fb-msg.mine .fb-msg-head { justify-content: flex-end; }
.fb-msg-head b { color: var(--ink-2); font-weight: 650; }
.fb-bubble { padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--surface); border: .5px solid var(--hair); display: grid; gap: 8px; }
.fb-msg.mine .fb-bubble { border-radius: 18px 18px 6px 18px; background: var(--sky-tint); border-color: transparent; }
.fb-msg.owner.theirs .fb-bubble { box-shadow: inset 3px 0 0 var(--sky); }
.fb-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.45; }
.fb-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-thumb { display: grid; place-items: center; width: 132px; height: 92px; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: .5px solid var(--hair); color: var(--ink-3); font-size: 12px; text-decoration: none; }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-thumb .ic { width: 22px; height: 22px; }
.fb-thumb-err { color: var(--pink-text); }
.fb-diag-msg { padding: 0 6px; }
.fb-msg.mine .fb-diag-msg { justify-self: end; }
.fb-diag-msg summary { margin-left: 0; color: var(--ink-2); font-size: 12.5px; }
.fb-diag-msg[open] { padding: 8px 12px 10px; border-radius: 12px; background: var(--surface); border: .5px solid var(--hair); justify-self: stretch; }
.fb-diag-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 8px 0; font-size: 13px; }
.fb-diag-dl div { display: contents; }
.fb-diag-dl dt { color: var(--ink-3); }
.fb-diag-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.fb-diag-dl dd.mono { font-size: 12.5px; }
.fb-errs { list-style: none; margin: 4px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); display: grid; gap: 4px; font-size: 12px; }
.fb-errs li { display: flex; gap: 10px; align-items: baseline; }
.fb-errs time { color: var(--ink-3); flex: none; }
.fb-errs code { font-family: var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.fb-reply { padding-top: 16px; border-top: .5px solid var(--hair); }

@media (max-width: 720px) {
  .fb-kind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fb-msg { max-width: 94%; }
  .fb-thread-title .page-title { font-size: 22px; }
  .fb-filter { grid-template-columns: repeat(4, max-content); }
}
@media (max-width: 480px) {
  .fb-tab { padding: 7px 11px; gap: 5px; }
  .fb-tab > .ic { display: none; }
}
@media (max-width: 380px) {
  .fb-kind { padding: 12px; }
  .fb-kind-text small { display: none; }
  .fb-row-side .chip { display: none; }
}
/* "New reply on JT-XXXXX" (feedback.js newReplyToast): bottom right, clear of the centred offline toasts */
.fb-toasts { position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 1490; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.fb-toasts:empty { display: none; }
.fb-toast { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-radius: 12px; background: var(--surface); color: var(--ink); border: .5px solid var(--hair); box-shadow: var(--shadow); font-size: 14px; pointer-events: auto; animation: fb-toast-in .22s ease-out; }
.fb-toast > .ic { color: var(--sky-text); }
.fb-toast-link { flex: 1; min-width: 0; color: inherit; text-decoration: none; font-weight: 550; }
.fb-toast-link:hover .fb-toast-ref, .fb-toast-link:focus-visible .fb-toast-ref { text-decoration: underline; }
.fb-toast-ref { color: var(--sky-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.fb-toast-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; }
.fb-toast-x:hover { background: var(--hair); }
.fb-toast-x .ic { width: 15px; height: 15px; }
@keyframes fb-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fb-toast { animation: none; } }
@media (max-width: 760px) { .fb-toasts { left: 16px; right: 16px; width: auto; bottom: max(76px, calc(env(safe-area-inset-bottom) + 64px)); } }
/* ---- end feedback ---- */
/* ---- place time zone ---- */
.field.when .help:empty { display: none; }
/* ---- end place time zone ---- */
/* ---- trip-chat ---- trip chat page (trip-chat.js) and its unread badges (trip-chat-badge.js) */
.tc-head { align-items: flex-start; flex-wrap: wrap; row-gap: 6px; }
.tc-titles { min-width: 0; flex: 1 1 220px; }
.tc-sub { color: var(--ink-3); font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-sub:empty { display: none; }
.tc-head-side { display: flex; align-items: center; gap: 10px; flex: none; min-height: 34px; }
.tc-live { font-size: 12.5px; font-weight: 600; color: var(--warn); }
.tc-live[hidden], .tc-ai-off[hidden], .tc-ai-switch[hidden] { display: none; }
.tc-ai-switch { gap: 10px; font-size: 13.5px; }
.tc {
  display: flex; flex-direction: column; height: calc(100dvh - var(--bar-h) - 250px); min-height: 380px; max-height: 920px;
  background: var(--surface); border: .5px solid var(--hair); border-radius: var(--radius); overflow: hidden;
}
.tc-scroll-wrap { position: relative; flex: 1; min-height: 0; }
.tc-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 12px; }
.tc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100%; justify-content: flex-end; }
.tc-list > li { flex: none; }

/* messages */
.tc-msg { align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: min(600px, 86%); margin-top: 10px; }
.tc-msg.cont { margin-top: 2px; }
.tc-msg.mine { align-self: flex-end; align-items: flex-end; }
.tc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font-size: 12.5px; color: var(--ink-3); padding: 0 6px; }
.tc-name { color: var(--ink-2); font-weight: 650; }
.tc-msg.ai .tc-name { color: var(--sky-text); }
.tc-ai-mark { display: inline-grid; place-items: center; color: var(--sky); flex: none; }
.tc-ai-mark .ic { width: 14px; height: 14px; }
.tc-via { color: var(--ink-3); }
.tc-time { font-variant-numeric: tabular-nums; }
.tc-only { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--warn-tint); color: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.tc-only .ic { width: 11px; height: 11px; }
.tc-row { display: flex; align-items: flex-end; gap: 2px; max-width: 100%; min-width: 0; }
.tc-msg.mine .tc-row { flex-direction: row-reverse; }
.tc-bubble { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 18px 18px 18px 6px; background: var(--surface-2); color: var(--ink); }
.tc-msg.theirs.cont .tc-bubble { border-top-left-radius: 6px; }
.tc-msg.mine .tc-bubble { border-radius: 18px 18px 6px 18px; background: var(--sky-tint); }
.tc-msg.mine.cont .tc-bubble { border-top-right-radius: 6px; }
.tc-msg.ai .tc-bubble { background: var(--surface); border: .5px solid var(--hair); box-shadow: inset 3px 0 0 var(--sky); }
.tc-msg.deleted .tc-bubble { background: transparent; border: .5px dashed var(--hair); box-shadow: none; }
.tc-msg.held .tc-bubble { background: var(--surface); border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--hair)); box-shadow: none; padding: 10px 12px; }
.tc-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.42; }
.tc-gone { color: var(--ink-3); font-style: italic; font-size: 14px; }
.tc-edited { align-self: flex-end; font-size: 11.5px; color: var(--ink-3); }
.tc-acts { display: flex; flex: none; opacity: 0; transition: opacity .12s; }
.tc-msg:hover .tc-acts, .tc-msg:focus-within .tc-acts, .tc-msg.acts-on .tc-acts { opacity: 1; }
@media (hover: none) { .tc-msg.mine .tc-acts { opacity: 1; } }
.tc-acts .icon-btn { color: var(--ink-3); }
.tc-hid {
  display: inline; font: inherit; font-size: .8em; letter-spacing: .08em; line-height: 1; vertical-align: .05em;
  border: 0; border-radius: 6px; padding: 2px 6px; margin: 0 1px; cursor: help;
  background: color-mix(in srgb, var(--ink) 11%, transparent); color: var(--ink-2);
}
.tc-hid:hover { background: color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink); }
.tc-why { display: flex; align-items: center; gap: 5px; margin: 0; padding: 0 6px; font-size: 12.5px; color: var(--ink-2); text-wrap: pretty; }
.tc-why .ic { width: 14px; height: 14px; flex: none; color: var(--ink-3); }
.tc-doubt { background: var(--warn-tint); color: inherit; border-radius: 4px; padding: 0 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 50%, transparent); }

/* held answer (asker only) */
.tc-held { display: grid; gap: 8px; }
.tc-held-title { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13.5px; line-height: 1.35; text-wrap: pretty; }
.tc-held-title .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--warn); }
.tc-held-sub { margin: 0; font-size: 12.5px; color: var(--ink-3); text-wrap: pretty; }
.tc-held .tc-text { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.tc-held-acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* the line under a message that asked @AI */
.tc-job { display: flex; align-items: flex-start; gap: 6px; padding: 1px 6px; font-size: 12.5px; line-height: 17px; color: var(--ink-3); }
.tc-job > span:not([class]) { min-width: 0; text-wrap: pretty; }
.tc-job > .ic, .tc-job > .tc-pulse, .tc-job > .tc-dots { margin-top: 4.5px; }
.tc-job > .ic { margin-top: 1.5px; }
.tc-msg.mine .tc-job { text-align: right; }
.tc-job.busy { color: var(--sky-text); }
.tc-job.bad { color: var(--pink-text); }
.tc-job > .ic { width: 14px; height: 14px; flex: none; }
.tc-retry { flex: none; font-size: 12.5px; line-height: 17px; }
.tc-dots { display: inline-flex; gap: 3px; }
.tc-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--sky); animation: tc-dot 1.2s infinite ease-in-out; }
.tc-dots i:nth-child(2) { animation-delay: .15s; }
.tc-dots i:nth-child(3) { animation-delay: .3s; }
.tc-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; animation: tc-pulse 1.6s infinite ease-in-out; }
@keyframes tc-dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes tc-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tc-dots i, .tc-pulse { animation: none; } }

/* separators, cards, states */
.tc-day, .tc-unread { align-self: stretch; display: flex; align-items: center; gap: 10px; margin: 16px 0 2px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.tc-day::before, .tc-day::after, .tc-unread::before, .tc-unread::after { content: ""; flex: 1; height: .5px; background: var(--hair); }
.tc-unread { color: var(--pink-text); }
.tc-unread::before, .tc-unread::after { background: color-mix(in srgb, var(--pink) 55%, transparent); }
.tc-sys { align-self: center; display: flex; gap: 6px; margin: 10px 0 2px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.tc-card { align-self: center; width: min(520px, 94%); margin: 10px 0 2px; }
.tc-card-in { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 14px; background: var(--surface); border: .5px solid var(--hair); color: var(--ink); text-decoration: none; font-size: 13.5px; }
a.tc-card-in:hover { background: var(--hover); }
.tc-card-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--ok-tint); color: var(--ok); }
.tc-card-ic .ic { width: 16px; height: 16px; }
.tc-card-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tc-card .tc-time { font-size: 12px; color: var(--ink-3); }
.tc-card-chev { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.tc-older { align-self: center; margin: 2px 0 6px; }
.tc-empty { margin: auto; max-width: 340px; padding: 24px 8px; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 14px; color: var(--ink-2); text-wrap: pretty; }
.tc-empty-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--sky-tint); color: var(--sky-text); }
.tc-empty-ic .ic { width: 22px; height: 22px; }
.tc-empty-title { font-weight: 650; color: var(--ink); }
.tc-state { align-self: stretch; margin: auto 0; padding: 12px 0; }
.tc-jump {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 7px 14px; background: var(--sky); color: #fff; font: inherit; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow); cursor: pointer;
}
.tc-jump[hidden] { display: none; }
.tc-jump .ic { width: 15px; height: 15px; }

/* edit in place */
.tc-edit { display: grid; gap: 6px; width: min(460px, 70vw); }
.tc-edit-input { font: inherit; font-size: 15px; line-height: 1.4; color: var(--ink); background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 8px 10px; resize: none; max-height: 220px; }
.tc-edit-input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--glow); }
.tc-edit-acts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.tc-edit-hint { margin-right: auto; font-size: 12px; color: var(--ink-3); }

/* approvals (asker only), above the composer */
.tc-approvals { display: grid; gap: 8px; max-height: 40%; overflow-y: auto; padding: 8px 10px 0; border-top: .5px solid var(--hair); }
.tc-approvals[hidden] { display: none; }
.tc-appr { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--sky-tint); }
.tc-appr-title { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 14px; line-height: 1.35; text-wrap: pretty; }
.tc-appr-title .tc-ai-mark { margin-top: 1px; }
.tc-appr-lines { margin: 0; padding-left: 26px; display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-2); }
.tc-appr-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tc-appr-note { margin-right: auto; font-size: 12px; color: var(--ink-3); }

/* composer */
.tc-compose { display: grid; gap: 6px; padding: 8px 10px 10px; border-top: .5px solid var(--hair); background: var(--surface); }
.tc-note { display: grid; gap: 4px; }
.tc-note:empty { display: none; }
.tc-note-line { display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 4px 4px 10px; min-height: 30px; border-radius: 10px; font-size: 13px; background: var(--surface-2); color: var(--ink-2); }
.tc-note-line.warn { background: var(--warn-tint); color: var(--ink); }
.tc-note-line.error { background: var(--pink-tint); color: var(--pink-text); }
.tc-note-line.info { background: var(--sky-tint); color: var(--sky-text); }
.tc-note-line > .ic { width: 15px; height: 15px; flex: none; }
.tc-note-line > span { flex: 1; min-width: 0; text-wrap: pretty; }
.tc-note-line .icon-btn { color: inherit; margin: -2px 0; }
.tc-compose-row { display: flex; align-items: flex-end; gap: 6px; }
.tc-input {
  flex: 1; min-width: 0; min-height: 40px; max-height: 168px; resize: none; overflow-y: auto;
  font: inherit; font-size: 15px; line-height: 1.35; color: var(--ink); background: var(--bg);
  border: 1px solid var(--hair); border-radius: 20px; padding: 9px 14px; transition: border-color .15s, box-shadow .15s;
}
.tc-input::placeholder { color: var(--ink-3); }
.tc-input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--glow); }
.tc-compose.sending .tc-input { opacity: .6; }
.tc-ai-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border: 0; border-radius: 20px; background: var(--sky-tint); color: var(--sky-text); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.tc-ai-btn:hover { background: color-mix(in srgb, var(--sky) 22%, var(--sky-tint)); }
.tc-ai-btn .ic { width: 15px; height: 15px; }
.tc-send { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--sky); color: #fff; cursor: pointer; }
.tc-send:disabled { background: var(--surface-2); color: var(--ink-3); cursor: default; }
.tc-send .ic { width: 18px; height: 18px; }
.tc-count { justify-self: end; font-size: 12px; color: var(--ink-3); }
.tc-count[hidden] { display: none; }

/* unread badges: trip list cards, sidebar trips, the Chat tab */
.tc-badge { flex: none; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; line-height: 1; }
.tc-badge[hidden] { display: none; }
.tc-badge-side { margin-left: auto; }
.tc-badge-tab { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10.5px; margin-left: -2px; }
.ov-link-ic.l-chat { background: var(--sky-tint); color: var(--sky-text); }

@media (max-width: 760px) {
  .tc { height: calc(100dvh - var(--bar-h) - 150px - env(safe-area-inset-bottom)); min-height: 320px; margin: 0 -6px; border-radius: 14px; }
  .tc-scroll { padding: 8px 10px 10px; }
  .tc-msg { max-width: 90%; }
  .tc-input, .tc-edit-input { font-size: 16px; } /* iOS doesn't zoom into 16px fields */
  .tc-ai-btn { padding: 0 10px; }
  .tc-edit { width: min(460px, 76vw); }
}
/* ---- end trip-chat ---- */
/* ---- avatar ---- profile photos: list avatars, map photo markers with a first-name pill, Settings › Profile photo */
.av { position: relative; display: grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; width: var(--av, 38px); height: var(--av, 38px); font: 650 calc(var(--av, 38px) * .37)/1 var(--font); color: #fff; background: hsl(var(--fr-h, 200) 62% 42%); letter-spacing: .02em; user-select: none; }
.av img, .pm-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.av.has-photo { background: var(--surface-2); }
.person-av.av, .grp-avatar.av { padding: 0; }
.set-av-wrap { overflow: hidden; padding: 0; }
.pm { position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pm-av { box-sizing: border-box; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; border: 3px solid #fff; background: hsl(var(--fr-h, 200) 62% 42%); color: #fff; font: 650 13.5px/1 var(--font); box-shadow: 0 2px 8px rgba(12, 26, 46, .32); transition: transform .15s ease, box-shadow .15s ease; }
.pm-av.has-photo { background: #fff; }
.pm-name { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 7px; border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 11.5px/1.35 var(--font); box-shadow: 0 1px 4px rgba(12, 26, 46, .25); pointer-events: none; }
.pm.stale .pm-av { filter: grayscale(.85); opacity: .72; }
.pm.stale .pm-name { color: var(--ink-3); }
.pm.on { z-index: 2; }
.pm.on .pm-av { transform: scale(1.1); box-shadow: 0 0 0 3px var(--sky), 0 4px 12px rgba(12, 26, 46, .35); }
.pm:hover .pm-av { transform: scale(1.06); }
.pm:focus-visible { outline: none; }
.pm:focus-visible .pm-av { box-shadow: 0 0 0 3px var(--sky), 0 2px 8px rgba(12, 26, 46, .32); }
.jt-latest-pm:not(.stale) .pm-av { animation: pm-breathe 2.6s ease-in-out infinite; }
@keyframes pm-breathe { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pink) 30%, transparent), 0 2px 8px rgba(12, 26, 46, .32); } }
@media (prefers-reduced-motion: reduce) { .jt-latest-pm .pm-av, .pm-av { animation: none; transition: none; } }
.set-photo { display: flex; align-items: center; gap: 14px; }
.set-photo-main { display: grid; gap: 6px; }
.set-photo-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.set-photo-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.set-photo-input:focus-visible + label { outline: 2px solid var(--sky); outline-offset: 2px; }
.set-photo-btns label.btn { cursor: pointer; }
.set-photo-btns label.btn.disabled { opacity: .55; pointer-events: none; }
.set-photo-note { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.set-photo-note.err { color: var(--pink-text); }
/* ---- end avatar ---- */
/* ---- me-profile ---- Me page: documents as cards, masked numbers, scans, trip checks, address, nationality, copy sheet */
.me .page-head { flex-wrap: wrap; }
.me-copy-btn { flex: none; }
.me-private .me-sharing-link { font-size: inherit; white-space: nowrap; }
.me-sharing:focus { outline: none; }
.me-sharing:empty { display: none; }

.me-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.me-doc { border-radius: 14px; background: var(--surface-2); padding: 10px 10px 14px 14px; display: grid; gap: 10px; min-width: 0; }
.me-doc .input { background: var(--surface); }
.me-doc-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.me-doc-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--sky-tint); color: var(--sky-text); }
.me-doc-ic .ic { width: 18px; height: 18px; }
.me-doc-title { display: grid; min-width: 0; flex: 1; }
.me-doc-kind { font-weight: 600; font-size: 15px; }
.me-doc-sub { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.me-doc-chip.valid { background: var(--ok-tint); color: var(--ok); }
@media (max-width: 520px) { .me-doc-head { flex-wrap: wrap; row-gap: 4px; } .me-doc-head > .icon-btn { order: 1; } .me-doc-head > .me-doc-title { flex-basis: calc(100% - 110px); } .me-doc-head > .me-doc-chip { order: 2; margin-left: 42px; } }
.me-doc-chip.soon { background: var(--warn-tint); color: var(--warn); }
.me-doc-chip.expired { background: var(--pink-tint); color: var(--pink-text); }
.me-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding-right: 4px; }
.me-doc-grid .field.wide, .me-doc-grid .me-scan, .me-doc-grid .me-doc-num { grid-column: span 2; }
.me-doc-grid .field.wide { grid-column: 1 / -1; }
@media (max-width: 420px) { .me-doc-grid { grid-template-columns: 1fr 1fr; padding-right: 0; } .me-doc-grid .field { grid-column: 1 / -1; } .me-doc-grid .field.me-doc-date { grid-column: auto; } }

.me-num { display: flex; align-items: center; gap: 2px; min-width: 0; }
.me-num .input { flex: 1; min-width: 0; }
.me-num-mask { text-align: left; cursor: pointer; color: var(--ink); letter-spacing: .04em; }
.me-num-mask:hover { border-color: var(--sky); }
.me-num .icon-btn .ic, .me-num .icon-btn svg { width: 16px; height: 16px; }
.me-scan-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.me-scan-row select { flex: 1; min-width: 0; }
.me-scan-status:empty { display: none; }

.me-checks { display: grid; gap: 10px; padding: 12px 14px 14px; border-radius: 12px; border: .5px solid var(--hair); background: var(--surface); }
.me-checks.bad { border-color: color-mix(in srgb, var(--pink-text) 40%, var(--hair)); }
.me-checks-head { display: grid; gap: 2px; }
.me-checks-title { font: 600 15px/1.3 var(--font); }
.me-checks-trips, .me-checks-countries { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.me-checks-trip { display: grid; gap: 6px; }
.me-checks-trip + .me-checks-trip { border-top: .5px solid var(--hair); padding-top: 10px; }
.me-checks-trip-title { font-size: 14px; }
.me-checks-country { display: flex; gap: 10px; align-items: flex-start; }
.me-checks-flag { font-size: 20px; line-height: 1.2; width: 24px; text-align: center; flex: none; }
.me-checks-name { font-weight: 600; font-size: 14px; }
.me-check { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; color: var(--ink); margin-top: 2px; text-wrap: pretty; }
.me-check > .ic { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.me-check.ok > .ic { color: var(--ok); }
.me-check.bad > .ic { color: var(--pink-text); }
.me-check.unknown > .ic, .me-check.idp > .ic { color: var(--warn); }
.me-check.idp.not_needed > .ic { color: var(--ok); }
.me-check-go { margin-left: 6px; font-size: 13.5px; }

.me-nat { display: grid; gap: 6px; }
.me-nat-second { display: flex; align-items: center; gap: 4px; }
.me-nat-second select { flex: 1; min-width: 0; }
.me-nat-add { justify-self: start; font-size: 13.5px; }
.me-x { font-size: 20px; line-height: 1; }

.me-addr { display: grid; gap: 10px; }
.me-addr-title { margin-bottom: -4px; }
.me-addr-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 12px; }
.me-addr-line1, .me-addr-line2 { grid-column: 1 / -1; }
.me-addr-city { grid-column: span 3; }
.me-addr-region { grid-column: span 3; }
.me-addr-postcode { grid-column: span 2; }
.me-addr-country { grid-column: span 4; }
@media (max-width: 420px) { .me-addr-grid > .field { grid-column: 1 / -1; } }
.me-addr-legacy { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.me-addr-text { white-space: pre-line; font-size: 14px; }
.me-addr-legacy .link-btn { justify-self: start; font-size: 13.5px; }

.me-copy-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.me-copy-group { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 8px; min-width: 0; }
.me-copy-group > legend { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; padding: 0; }
.me-copy-opt { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; }
.me-copy-opt:hover { background: var(--hover); }
.me-copy-opt input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--sky); flex: none; }
.me-copy-preview { font-family: var(--mono); font-size: 13px; white-space: pre; }
/* ---- end me-profile ---- */
/* ---- profile-sharing ---- shared profile view (pv-), document picker (pk-), Me › Who can see my data (psh-), Friends › trusted contacts (pf-) */
.pv { gap: 14px; }
.pv-group { display: grid; gap: 6px; }
.pp-docs li.pv-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 12px; }
.pv-doc-main { display: grid; gap: 2px; min-width: 0; }
.pv-doc-main strong { font-weight: 600; overflow-wrap: anywhere; }
.pv-num-wrap { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pv-num { font-size: 14px; overflow-wrap: anywhere; }
.pv-reveal { font-size: 13px; }
.pv-scans { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pv-err { grid-column: 1 / -1; color: var(--danger); font-size: 13px; }
@media (max-width: 520px) { .pp-docs li.pv-doc { grid-template-columns: 1fr; } .pv-scans { justify-content: flex-start; } }

.pk-docs { display: grid; gap: 8px; margin: 4px 0 2px; padding: 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--surface); }
.pk-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-mode-opt { align-items: flex-start; }
.pk-mode-opt > span { display: grid; gap: 1px; }
.pk-mode-opt input { margin-top: 2px; }
.pk-mode-opt:has(input:checked) { background: var(--sky-tint); box-shadow: inset 0 0 0 1px var(--sky); }
.pk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pk-doc { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.pk-doc-pick { flex: 1 1 240px; align-items: flex-start; min-width: 0; }
.pk-doc-pick > span { display: grid; gap: 1px; min-width: 0; }
.pk-doc-pick strong { font-weight: 600; overflow-wrap: anywhere; }
.pk-doc-pick input { margin-top: 2px; }
.pk-doc-pick:has(input:disabled) { cursor: default; }
.pk-scan { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; padding: 4px 2px; }
.pk-scan.off, .pk-scan:has(input:disabled) { color: var(--ink-3); cursor: default; }
.pk-scan:has(input:checked) { color: var(--ink); font-weight: 550; }

.psh-log-head { margin-top: 26px; }
.psh .section-title:focus { outline: none; }
.psh .section-title:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 4px; }
.psh-empty { margin: 6px 0 2px; }
.psh-k { color: var(--ink-3); }
.psh-secs { color: var(--ink); }
.psh-docs.psh-scans { color: var(--warn-text, var(--ink)); }
.psh-row .person-actions { align-self: center; }
.psh-log-wrap { display: grid; gap: 10px; justify-items: start; }
.psh-log { list-style: none; margin: 0; padding: 0; width: 100%; background: var(--surface); border: .5px solid var(--hair); border-radius: 14px; }
.psh-log-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 14px; position: relative; }
.psh-log-row + .psh-log-row::before { content: ""; position: absolute; top: 0; left: 42px; right: 0; border-top: .5px solid var(--hair); }
.psh-log-ic { flex: none; width: 20px; display: grid; place-items: center; color: var(--ink-3); }
.psh-log-ic .ic { width: 17px; height: 17px; }
.psh-log-row.scan .psh-log-ic { color: var(--warn); }
.psh-log-text { flex: 1; min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.psh-log-at { flex: none; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
@media (max-width: 520px) { .psh-log-row { flex-wrap: wrap; } .psh-log-at { margin-left: 30px; } }

.pf-who { display: flex; align-items: center; gap: 10px; }
.pf-who > span { display: grid; min-width: 0; }
.pf-who b { font-weight: 600; }
.pf-who small { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.pf-exp { margin: -2px 0 2px; }
.fs-row:has(.pf-btn) { flex-wrap: wrap; }
.fs-row:has(.pf-btn) .fr-row-text { flex-basis: calc(100% - 60px); }
.fs-row:has(.pf-btn) .fr-row-text small { white-space: normal; }
.fs-row:has(.pf-btn) .fs-actions { margin-left: 50px; justify-content: flex-start; }
@media (min-width: 720px) { .fs-row:has(.pf-btn) { flex-wrap: nowrap; } .fs-row:has(.pf-btn) .fr-row-text { flex-basis: auto; } .fs-row:has(.pf-btn) .fs-actions { margin-left: 0; justify-content: flex-end; } }
/* ---- end profile-sharing ---- */

/* ---- chat-effort ---- the effort ▾ in the chat box (web/app/chat.js initEffort) */
.chat-compose { position: relative; }
.chat-effort { flex: none; height: 30px; padding: 0 8px; border: 0; border-radius: 15px; background: none; color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 550; white-space: nowrap; cursor: pointer; }
.chat-effort:hover, .chat-effort[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.chat-effort:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.chat-effort-menu { position: absolute; z-index: 3; right: 6px; bottom: calc(100% + 6px); min-width: 230px; max-width: calc(100% - 12px); padding: 5px; border: .5px solid var(--hair); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.chat-effort-item { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 7px 10px 7px 28px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; }
.chat-effort-item:hover, .chat-effort-item:focus-visible { background: var(--hover); outline: none; }
.chat-effort-item[aria-checked="true"]::before { content: '✓'; position: absolute; left: 10px; top: 7px; color: var(--sky-text); font-weight: 700; font-size: 13px; }
.chat-effort-name { font-size: 13.5px; font-weight: 600; }
.chat-effort-desc { font-size: 12px; color: var(--ink-2); }
/* ---- end chat-effort ---- */

/* ---- chat-core ---- the chat's robustness (web/app/chat.js, desktop/src/chat.js): signed out, the plan's limits, suggested replies */
.chat-signin { border: 1px solid var(--warn); background: var(--warn-tint); }
.chat-signin .chat-install-why { color: var(--ink-2); }
.chat-signin .chat-install-actions .btn { white-space: nowrap; }
.chat-error.warn { color: var(--ink); background: var(--warn-tint); border: .5px solid var(--warn); }
.chat-error.warn > .ic { color: var(--warn); }
.chat-error.warn a { color: inherit; font-weight: 600; }
.chat-usage { flex: none; margin: 6px 14px 0; font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.chat-usage::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.chat-usage.limited { color: var(--ink); font-weight: 600; }
.chat-usage[hidden] { display: none; }
.chat-replies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.chat-reply { font: inherit; font-size: 13px; line-height: 1.3; text-align: left; color: var(--sky-text); background: transparent; border: .5px solid var(--hair); border-radius: 999px; padding: 5px 11px; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.chat-reply:hover, .chat-reply:focus-visible { border-color: var(--sky); background: var(--surface-2); outline: none; }
/* ---- end chat-core ---- */

/* ---- chat-ui ---- the chat's UX (web/app/chat.js `---- chat-ui ----`, after Stella's chat redesign) */
/* folded tool lines and the live line */
.chat-work { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; color: var(--ink-2); background: none; border: 0; border-radius: 8px; padding: 3px 8px 3px 4px; cursor: pointer; max-width: 100%; }
.chat-work:hover, .chat-work:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
.chat .chat-work-chev { width: 13px; height: 13px; transition: transform .15s; color: var(--ink-3); }
.chat-work.open .chat-work-chev, .chat-live-more.open .chat-work-chev { transform: rotate(90deg); }
.chat-work-failed { font-weight: 500; color: var(--pink-text); }
.chat-tool.in-work, .chat-msg.in-work { margin-left: 14px; }
.chat-msg.in-work { opacity: .85; }
.chat-live { display: grid; gap: 2px; font-size: 12.5px; color: var(--ink-2); padding: 6px 10px; border-radius: 10px; background: var(--surface-2); align-self: stretch; }
.chat-live-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-live .dots { display: inline-flex; gap: 3px; margin-right: 2px; }
.chat-live .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--sky); animation: chat-dot 1.2s infinite ease-in-out; }
.chat-live .dots i:nth-child(2) { animation-delay: .15s; }
.chat-live .dots i:nth-child(3) { animation-delay: .3s; }
.chat-live-more { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 1px 4px; margin-left: -4px; border-radius: 6px; cursor: pointer; }
.chat-live-more:hover, .chat-live-more:focus-visible { background: var(--hover); outline: none; }
.chat-live-time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chat-live-now { margin: 0 0 0 26px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-live-steps { margin: 4px 0 2px 26px; padding-left: 16px; color: var(--ink-3); display: grid; gap: 2px; }
.chat-live-steps li.now { color: var(--ink); }
.chat-live-steps li.failed { color: var(--pink-text); }
@media (prefers-reduced-motion: reduce) { .chat-live .dots i { animation: none; } .chat .chat-work-chev { transition: none; } }
/* the queue above the box */
.chat-queue { flex: none; list-style: none; margin: 6px 12px 0; padding: 4px; border: .5px dashed var(--hair); border-radius: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.chat-queue[hidden] { display: none; }
.chat-queue-head { font-size: 11.5px; color: var(--ink-3); padding: 2px 8px 3px; }
.chat-queue-row { display: flex; align-items: center; gap: 2px; padding: 0 0 0 8px; border-radius: 8px; }
.chat-queue-row:hover { background: var(--surface-2); }
.chat-queue-text { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-queue-row .icon-btn { width: 26px; height: 26px; }
.chat-queue-row .ic { width: 14px; height: 14px; }
/* a reply's buttons */
.chat-msg.assistant.rated .chat-actions { opacity: 1; }
.chat-actions .chat-rate[aria-pressed="true"] { color: var(--sky-text); background: var(--sky-tint); }
.chat-actions .chat-rate[aria-pressed="false"] { color: var(--ink-3); }
/* the feedback card */
.chat-fb { flex: none; position: relative; margin: 6px 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 .5px var(--hair); display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.chat-fb[hidden] { display: none; }
.chat-fb-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; }
.chat-fb-x .ic { width: 14px; height: 14px; }
.chat-fb-title { margin: 0; padding-right: 26px; font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.chat-fb-title a { color: var(--sky-text); }
.chat-fb-sub { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.chat-fb-err { margin: 0; padding-right: 26px; font-size: 12.5px; color: var(--pink-text); }
.chat-fb-text { width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px; max-height: 40vh; font: inherit; font-size: 13px; line-height: 1.45; color: var(--ink); background: var(--surface); border: .5px solid var(--hair); border-radius: 8px; padding: 7px 9px; }
.chat-fb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chat-fb-acts .btn { padding: 5px 12px; font-size: 13px; border-radius: 8px; }
.chat-fb-count { margin-left: auto; font-size: 11px; color: var(--ink-3); }
/* what a message points at: the About chip, the @ picker, references in a bubble */
.chat-ctx { flex: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 12px 0; }
.chat-ctx[hidden] { display: none; }
.chat-about { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; padding: 3px 4px 3px 9px; border-radius: 999px; font-size: 12px; color: var(--sky-text); background: var(--sky-tint); }
.chat-about .ic { width: 13px; height: 13px; flex: none; }
.chat-about-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-about-x { flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.chat-about-x:hover { background: color-mix(in srgb, var(--sky) 18%, transparent); }
.chat-about-x .ic { width: 11px; height: 11px; }
.chat-about-tag { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-bottom: 3px; font-size: 11.5px; color: var(--ink-3); }
.chat-about-tag .ic { width: 12px; height: 12px; }
.chat-ref { padding: 0 4px; border-radius: 5px; font-weight: 600; background: color-mix(in srgb, #fff 22%, transparent); }
.chat-at { flex: none; list-style: none; margin: 6px 12px 0; padding: 4px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 .5px var(--hair); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; max-height: 260px; overflow-y: auto; }
.chat-at[hidden] { display: none; }
.chat-at-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.chat-at-row.sel, .chat-at-row:hover { background: var(--sky-tint); }
.chat-at-row .ic { width: 14px; height: 14px; flex: none; color: var(--ink-3); }
.chat-at-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-at-sub { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--ink-3); text-align: right; }
.chat-at-none { padding: 6px 8px; font-size: 12.5px; color: var(--ink-3); }
/* what Claude can see */
.chat-reach { flex: none; margin: 8px 12px 0; padding: 10px 12px 12px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 .5px var(--hair); max-height: 55%; overflow-y: auto; }
.chat-reach[hidden] { display: none; }
.chat-reach-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.chat-reach-title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.chat-reach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.chat-reach-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; }
.chat-reach-row > .ic { width: 15px; height: 15px; margin-top: 1px; color: var(--ink-3); }
.chat-reach-k { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.chat-reach-v, .chat-reach-sub { margin: 1px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.chat-reach-v a { color: var(--sky-text); }
.chat-reach-path { font-family: var(--mono); font-size: 11px; color: var(--ink-3); overflow-wrap: anywhere; }
.chat-head .icon-btn.on { color: var(--sky-text); background: var(--sky-tint); }
/* ---- end chat-ui ---- */
/* ---- dictation ---- the mic beside the chat and feedback boxes (dictation.js), its recording bar and cards */
.dict-mic { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; display: inline-grid; place-items: center; background: none; color: var(--ink-2); cursor: pointer; }
.dict-mic:hover { background: var(--hover); color: var(--ink); }
.dict-mic:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.dict-mic:disabled { opacity: .45; cursor: default; }
.dict-mic .ic { width: 17px; height: 17px; stroke-width: 2; }
.fb-actions .dict-mic { width: 36px; height: 36px; margin-right: auto; order: -1; }
.fb-actions .dict-mic .ic { width: 19px; height: 19px; }
.dict-host { position: relative; }
.dict-bar { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; border-radius: inherit; background: var(--surface-2); color: var(--ink); font-size: 13.5px; }
.fb-text-wrap > .dict-bar { inset: auto 0 0 0; min-height: 48px; border-radius: 0 0 12px 12px; border-top: .5px solid var(--hair); }
.dict-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: dict-pulse 1.2s ease-in-out infinite; }
@keyframes dict-pulse { 50% { opacity: .35; } }
.dict-time { flex: none; min-width: 34px; font-weight: 600; }
.dict-level { flex: 1; min-width: 40px; height: 22px; color: var(--sky); }
.dict-writing { flex: 1; color: var(--ink-2); }
.dict-spin { flex: none; width: 16px; height: 16px; border-width: 2px; }
.dict-bar .btn.tiny { flex: none; }
.dict-bar .btn.tiny.primary, .dict-card .btn.tiny.primary, [data-row="dictation"] .btn.tiny.primary { background: var(--sky); color: #fff; }
.dict-bar .btn.tiny.primary:hover, .dict-card .btn.tiny.primary:hover, [data-row="dictation"] .btn.tiny.primary:hover { background: color-mix(in srgb, var(--sky) 88%, #000); }
.dict-card { position: absolute; z-index: 4; right: 0; bottom: calc(100% + 8px); width: min(340px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px 36px 14px 14px; border-radius: 14px; background: var(--surface); color: var(--ink); border: .5px solid var(--hair); box-shadow: var(--shadow); text-align: left; }
.fb-text-wrap > .dict-card { bottom: 34px; right: 8px; }
.dict-card-title { margin: 0 0 4px; font-size: 14px; font-weight: 650; }
.dict-card-body { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.dict-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.dict-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.dict-x:hover { background: var(--hover); color: var(--ink); }
.dict-x .ic { width: 14px; height: 14px; }
.dict-progress { height: 6px; margin-top: 10px; border-radius: 3px; background: var(--hair); overflow: hidden; flex: 1; }
.set-row-ctl .dict-progress { width: 160px; margin-top: 0; }
.dict-progress-fill { display: block; height: 100%; width: 0; background: var(--sky); border-radius: inherit; transition: width .4s; }
.dict-set-btns { display: flex; gap: 8px; }
.dict-credit { margin-top: 6px; }
.dict-credit a { color: var(--sky-text); }
@media (prefers-reduced-motion: reduce) { .dict-dot { animation: none; } .dict-progress-fill { transition: none; } }
/* ---- end dictation ---- */
/* ---- feedback log ---- the Mac app's log tail in a message's diagnostics (feedback.js diagBlock) */
.fb-diag-log { margin-top: 8px; }
.fb-diag-log summary { cursor: pointer; color: var(--ink-2); font-size: 12.5px; width: fit-content; }
.fb-diag-log .fb-diag-json { font-size: 11px; }
/* ---- location-precision ---- */
.lp-field.lp-off { opacity: 0.55; }
.lp-around { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; font-weight: 600; }
.lp-around svg { width: 16px; height: 16px; color: var(--trail); flex: none; }
.lp-around small { font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
.fr-inline .lp-select { max-width: 15rem; }
/* ---- end location-precision ---- */
/* ---- legal ---- public pages without the app's JS (privacy.html, support.html, -it twins) + links on the sign-in screen */
.gate-legal { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 18px; font-size: 13px; }
.gate-legal a { color: var(--ink-3); text-decoration: none; }
.gate-legal a:hover { color: var(--sky-text); text-decoration: underline; text-underline-offset: 3px; }
body.legal-page { overflow: auto; height: auto; min-height: 100%; background: radial-gradient(900px 420px at 50% -160px, var(--glow), transparent 70%), var(--bg); }
.legal-top { max-width: 760px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.legal-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 600 17px/1 var(--font-display); letter-spacing: -.015em; }
.legal-mark { width: 24px; height: 24px; flex: none; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.legal-nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: 9px; }
.legal-nav a:hover { background: var(--hover); color: var(--ink); }
.legal-nav a[aria-current="page"] { background: var(--sky-tint); color: var(--sky-text); font-weight: 600; }
.legal { max-width: 760px; margin: 0 auto; padding: 12px 16px 40px; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.legal h1 { font: 700 34px/1.15 var(--font-display); letter-spacing: -.025em; margin: 18px 0 6px; }
.legal .legal-meta { color: var(--ink-2); font-size: 14px; margin-bottom: 22px; }
.legal .legal-lede { font-size: 17.5px; margin-bottom: 8px; }
.legal h2 { font: 650 21px/1.25 var(--font-display); letter-spacing: -.012em; margin: 36px 0 10px; padding-top: 6px; scroll-margin-top: 16px; }
.legal h3 { font: 600 16.5px/1.3 var(--font-display); margin: 22px 0 6px; }
.legal p, .legal ul, .legal ol { margin: 0 0 12px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin: 4px 0; }
.legal li::marker { color: var(--ink-3); }
.legal a { color: var(--sky-text); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal strong { font-weight: 600; }
.legal .legal-path { font-weight: 600; }
.legal-toc { background: var(--surface); border: .5px solid var(--hair); border-radius: var(--radius); padding: 14px 18px 12px; margin: 18px 0 8px; box-shadow: var(--shadow-sm); }
.legal .legal-toc h2 { margin: 0 0 6px; padding: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.legal-toc ol { columns: 2 240px; column-gap: 28px; margin: 0; font-size: 15px; }
.legal-toc li { break-inside: avoid; margin: 3px 0; }
.legal-card { background: var(--surface); border: .5px solid var(--hair); border-radius: var(--radius); padding: 16px 18px; margin: 14px 0; box-shadow: var(--shadow-sm); }
.legal-card > :last-child { margin-bottom: 0; }
.legal .legal-card > h3:first-child, .legal .legal-card > h2:first-child { margin-top: 0; padding-top: 0; }
.legal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0; }
.legal-cards .legal-card { margin: 0; }
.legal-table-wrap { overflow-x: auto; margin: 0 0 14px; border: .5px solid var(--hair); border-radius: 14px; background: var(--surface); }
.legal table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.45; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: .5px solid var(--hair); }
.legal tr:last-child td { border-bottom: 0; }
.legal th { font-weight: 600; color: var(--ink-2); background: var(--surface-2); font-size: 13px; }
.legal td:first-child { font-weight: 600; min-width: 120px; }
.legal mark.legal-todo { background: var(--pink-tint); color: var(--pink-text); padding: 0 4px; border-radius: 4px; font-family: var(--mono); font-size: 14px; }
.legal-foot { max-width: 760px; margin: 0 auto; padding: 18px 16px max(28px, env(safe-area-inset-bottom)); border-top: .5px solid var(--hair); color: var(--ink-3); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legal-foot a { color: var(--ink-2); text-underline-offset: 3px; }
@media (max-width: 520px) {
  .legal { font-size: 15.5px; }
  .legal h1 { font-size: 28px; }
  .legal h2 { font-size: 19px; margin-top: 30px; }
  .legal table { font-size: 13.5px; }
}
@media print {
  body.legal-page { background: #fff; color: #000; }
  .legal-nav, .legal-toc { display: none; }
}
/* ---- end legal ---- */

/* ---- account-delete ---- Settings › Account › Delete account (account-delete.js) */
.ad-warn { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 700; color: var(--pink-text); }
.ad-warn .ic { width: 18px; height: 18px; flex: none; }
.ad-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); }
.ad-list li.ad-strong { color: var(--ink); font-weight: 600; }
.ad-list li.ad-strong::marker { color: var(--pink-text); }
.ad-list li.ad-loading { list-style: none; margin-left: -20px; }
.ad-type { display: block; margin-top: 8px; font-weight: 600; }
.ad-confirm { width: 100%; letter-spacing: .08em; text-transform: uppercase; }
.ad-confirm::placeholder { text-transform: none; letter-spacing: normal; }
/* ---- end account-delete ---- */
/* ---- location-history ---- Settings › Tracking › Delete location history (location-history.js) */
.lh-presets { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.lh-presets legend { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0 0 6px; }
.lh-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.lh-opt:hover { background: color-mix(in srgb, var(--ink-2) 8%, transparent); }
.lh-opt:has(input:checked) { background: color-mix(in srgb, var(--pink-text) 10%, transparent); font-weight: 600; }
.lh-opt input { margin: 0; accent-color: var(--pink-text); }
.lh-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lh-custom[hidden] { display: none; }
@media (max-width: 520px) { .lh-custom { grid-template-columns: 1fr; } }
.lh-status { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink-2) 7%, transparent); }
.lh-status.bad { color: var(--pink-text); }
.lh-done { color: var(--ink); font-weight: 600; }
/* ---- end location-history ---- */
/* ---- moderation ---- Report sheet, the admin's report panel in Help & feedback, support contact (moderation.js) */
.fb-k-report { --k: var(--pink-text); --kt: var(--pink-tint); }
.fb-row-ic.fb-k-report { color: var(--k); background: var(--kt); }
.mod-support { color: var(--ink-2); font-size: 13px; margin: -4px 0 14px; }
.mod-support a { color: var(--sky-text); }
.mod-intro { color: var(--ink-2); margin: 0 0 12px; font-size: 14px; }
.mod-reasons { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.mod-reasons legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0; }
.mod-reason { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--hair); border-radius: 12px; cursor: pointer; font-size: 14px; }
.mod-reason:hover { background: var(--hover); }
.mod-reason:has(input:checked) { border-color: var(--sky); background: var(--sky-tint); }
.mod-reason input { margin: 0; accent-color: var(--sky); }
.mod-block-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); margin-top: 6px; cursor: pointer; }
.mod-block-check input { margin-top: 3px; }
.mod-block-check span { display: grid; gap: 2px; font-size: 14px; }
.mod-block-check small { color: var(--ink-2); font-size: 12.5px; }
.mod-done { display: flex; gap: 12px; align-items: flex-start; }
.mod-done p { margin: 0; }
.mod-done-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-tint); color: var(--ok); }
.mod-ref { font-size: 14px; margin: 12px 0 0; }
.mod-ref a { color: var(--sky-text); font-weight: 600; }
.mod-done ~ .mod-support { margin: 14px 0 0; }
.mod-report-btn .ic { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.mod-report-ic { color: var(--ink-3); }
.mod-report-ic:hover { color: var(--pink-text); }
.mod-report-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--ink-3); font-size: 13px; }
.mod-report-link:hover { color: var(--pink-text); }
.mod-report-link .ic { width: 15px; height: 15px; }
.mod-panel { border: 1px solid var(--hair); border-left: 3px solid var(--pink); border-radius: 14px; padding: 14px 16px; margin: 14px 0; background: var(--surface); }
.mod-panel-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--pink-text); }
.mod-panel-head h2 { font-size: 16px; margin: 0; color: var(--ink); }
.mod-reason-chip { background: var(--pink-tint); color: var(--pink-text); }
.mod-sla { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.mod-dl { display: grid; gap: 6px; margin: 12px 0; font-size: 14px; }
.mod-dl > div { display: grid; grid-template-columns: 80px 1fr; gap: 10px; }
.mod-dl dt { color: var(--ink-3); }
.mod-dl dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.mod-av img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.mod-flag { background: var(--surface-2); color: var(--ink-2); }
.mod-snap { margin: 0 0 12px; padding: 10px; border-radius: 12px; background: var(--surface-2); }
.mod-snap figcaption { font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.mod-snap img { max-width: 100%; max-height: 260px; border-radius: 8px; display: block; }
.mod-snap blockquote { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--hair); white-space: pre-wrap; overflow-wrap: anywhere; }
.mod-taken { font-size: 13px; color: var(--ok); margin: 0 0 10px; }
.mod-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.mod-actions .btn.done { opacity: .6; }
.mod-ok { color: var(--ok); font-size: 13px; margin: 6px 0 0; }
.mod-reporter-note { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--pink-tint); color: var(--pink-text); font-size: 14px; }
@media (max-width: 560px) { .mod-sla { margin-left: 0; width: 100%; } .mod-dl > div { grid-template-columns: 1fr; gap: 2px; } }
/* ---- end moderation ---- */
/* ---- chat-files ---- files on this Mac shared with the desktop chat (web/app/chat.js shareCard) */
.chat-msg.user .chat-files { margin: 4px 2px 0; font-size: 12px; color: var(--ink-3); text-align: right; overflow-wrap: anywhere; }
.chat-share .chat-share-where, .chat-share .chat-share-no { color: var(--ink-2); }
.chat-share .chat-confirm-actions { align-items: center; }
.chat-share .chat-confirm-actions .link-btn { margin-right: auto; }
/* ---- end chat-files ---- */