/* ── Functional utilities ── */

.hidden { display: none !important; }

/* ── Flash messages ── */
flash-message {
  display: block;
  border: 1px solid var(--accent);
  background: var(--panel);
  padding: var(--s-1) var(--s0);
  margin-block: var(--s-1);
  border-radius: var(--radius);
  color: var(--fg-bright);
}

/* ── Flash toast (auto-fading notice) ── */
.flash-toast {
  position: fixed;
  top: var(--s1);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: #1a3d2b;
  border: 1.5px solid #2ecc71;
  border-radius: var(--radius);
  padding: var(--s-1) var(--s1);
  color: #a8f0c6;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(46,204,113,0.25);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
html[data-theme="light"] .flash-toast {
  background: #d4f5e3;
  border-color: #27ae60;
  color: #1a5c35;
}
.flash-toast.fading {
  opacity: 0;
  transform: translateX(-50%) translateY(-0.5rem);
}

/* ── Landing page hero ── */
cover-l.hero {
  background: url('hero-image.jpg') center/cover no-repeat;
  position: relative;
}
cover-l.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5,12,20,0.55) 50%, rgba(5,12,20,0.8) 100%);
}
cover-l.hero > * {
  position: relative;
  z-index: 1;
}
cover-l.hero header {
  text-align: center;
  color: #e8f4fd;
  max-inline-size: 42rem;
  margin-inline: auto;
}
cover-l.hero h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  color: #fff;
  line-height: 1.1;
}
cover-l.hero p {
  color: rgba(232, 244, 253, 0.85);
  font-size: 1.1rem;
}
cover-l.hero a {
  background: var(--accent);
  color: #fff;
  padding: var(--s-2) var(--s0);
  border-radius: var(--radius);
  text-decoration: none;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
cover-l.hero a:hover {
  background: var(--accent-hi);
  text-decoration: none;
}
cover-l.hero section {
  padding-inline: var(--s0);
  padding-block-end: var(--s1);
  max-inline-size: var(--measure);
  margin-inline: auto;
}
cover-l.hero section article {
  background: rgba(10, 22, 32, 0.5);
  border-color: rgba(41, 120, 160, 0.35);
  color: #e8f4fd;
}
cover-l.hero section strong {
  color: #fff;
}
body:has(cover-l.hero) {
  display: flex;
  flex-direction: column;
  block-size: 100dvh;
  overflow: hidden;
}
body:has(cover-l.hero) main {
  padding: 0;
  flex: 1;
}

/* ── Global: button children inherit color (keeps hover/active states readable) ── */
button > * { color: inherit; }

/* ── Site header / nav ── */
body > header {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: var(--s-1) var(--s0);
}

nav a, nav button {
  color: var(--fg-mid);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  padding: 0;
  transition: color 0.15s;
}

nav a:hover, nav button:hover {
  color: var(--fg-bright);
  text-decoration: none;
}

nav a.active, nav button.active {
  color: var(--accent-hi);
  font-weight: 600;
}

/* Subtle timezone clock in nav */
.nav-tz {
  font-size: 0.75rem;
  color: var(--fg-dim, var(--fg-mid));
  opacity: 0.65;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .nav-tz { display: none; }
}

/* Logo link */
body > header nav > cluster-l > a:first-child {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-hi);
  letter-spacing: 0.05em;
}

/* ── Prefs slide-in panel ── */
#prefs-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
}
#prefs-overlay.open { display: block; }

#prefs-panel {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(26rem, 100vw);
  background: var(--panel);
  border-inline-start: 1px solid var(--border);
  overflow-y: auto;
  padding: var(--s0);
  transform: translateX(100%);
  transition: transform 0.2s;
  z-index: 200;
}
#prefs-panel.open { transform: none; }

/* ── Mobile nav: hide header links, surface them in the prefs panel ── */
/* .nav-primary wraps Trips / Connections / Explore in the header cluster */
.nav-primary {
  display: contents; /* transparent on wide screens — links sit inline */
}

/* Nav links inside the prefs panel — hidden by default on wide screens */
.prefs-nav-mobile {
  display: none;
}

/* Below the Switcher threshold (~600 px) collapse the header links */
@media (max-width: 600px) {
  /* Tighter header padding */
  body > header {
    padding-inline: var(--s-2);
    padding-block: var(--s-2);
  }

  /* Lock the header row to a single line — never wrap */
  body > header nav > cluster-l,
  body > header nav > cluster-l > cluster-l {
    flex-wrap: nowrap;
    min-inline-size: 0;
  }

  /* Logo: slightly smaller on very narrow screens */
  body > header nav > cluster-l > a:first-child {
    font-size: 1.1rem;
    white-space: nowrap;
  }

  /* Hide nav links from the header */
  .nav-primary {
    display: none;
  }

  /* Prefs toggle: show a hamburger icon instead of the username text */
  #prefs-toggle {
    font-size: 0;        /* collapse the text */
    white-space: nowrap;
  }
  #prefs-toggle::before {
    content: '☰';
    font-size: 1.1rem;
    display: inline-block;
  }

  /* Nav links inside the prefs panel */
  .prefs-nav-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding-block: var(--s-1);
    border-block: 1px solid var(--border);
    margin-block: var(--s-1);
  }
  .prefs-nav-mobile a {
    font-size: 1.1rem;
    padding-block: var(--s-2);
  }

  /* ── Trip title bar: single line on mobile ── */
  .trip-title-bar {
    flex-wrap: nowrap;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-2);
  }
  .trip-title-bar-name {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
  }
  /* dates and role badge are secondary — hide to reclaim space */
  .trip-title-bar-dates,
  .trip-title-bar-role {
    display: none;
  }
  /* mobile controls: theme + menu, shown when site header is hidden */
  .trip-mobile-controls {
    display: flex;
    gap: var(--s-2);
    margin-inline-start: auto;
    flex-shrink: 0;
  }
  .trip-mobile-controls button {
    background: none;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius);
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.1em 0.5em;
    line-height: 1.4;
  }
  .trip-mobile-controls button:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.5);
  }

}

/* ── Trip title bar (above tabs) ── */
.trip-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s0);
    flex-wrap: wrap;
    padding: var(--s-1) var(--s0);
    background: #1a2c3a;
    border-radius: 5px 5px 0 0;
    border-bottom: 2px solid #c8962a;
}
.trip-title-bar-name {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: rgba(255,255,255,0.95);
}
.trip-title-bar-dates {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c8962a;
    flex: 1;
}
.trip-title-bar-back {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: var(--s0);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    padding: 0.15em 0.6em;
    flex-shrink: 0;
    line-height: 1.4;
}
.trip-title-bar-back:hover { border-color: rgba(255,255,255,0.7); color: #fff; }
.trip-title-bar-role {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: var(--s0);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius);
    padding: 0.15em 0.6em;
    flex-shrink: 0;
    line-height: 1.4;
}

/* Mobile controls only shown on narrow screens (site header visible otherwise) */
.trip-mobile-controls { display: none; }

/* ── Tab bar (trip page) ── */
nav[role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  border-block-end: 1px solid var(--border);
  background: var(--panel);
}

nav[role="tablist"] button {
  background: none;
  border: none;
  border-block-end: 2px solid transparent;
  padding: var(--s-1) var(--s-1);
  margin-block-end: -1px;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  color: var(--fg-mid);
  transition: color 0.15s;
  white-space: nowrap;
}

nav[role="tablist"] button:hover { color: var(--fg-bright); }

nav[role="tablist"] button.active {
  border-block-end-color: var(--accent-hi);
  color: var(--fg-bright);
  font-weight: 600;
}

/* ── Mini tabs (e.g. Note / Document switcher) ── */
[role="tablist"].mini {
  border-block-end: 1px solid var(--border);
  margin-block-end: var(--s-1);
  background: transparent;
}
[role="tablist"].mini button {
  font-size: 0.8rem;
  padding: var(--s-2) var(--s-1);
}

/* ── Forms ── */
label {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-mid);
  margin-block-end: 0.2em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="file"],
input[type="search"],
textarea,
select {
  display: block;
  inline-size: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-1);
  font: inherit;
  font-size: 0.9rem;
  background: var(--panel2);
  color: var(--fg);
  transition: border-color 0.15s;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}

textarea { resize: vertical; }

.input-with-prefix {
  display: flex;
  align-items: stretch;
}
.input-with-prefix .prefix {
  display: flex;
  align-items: center;
  padding: var(--s-2) var(--s-1);
  background: var(--panel);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  color: var(--fg-muted);
  font-size: 0.9rem;
  white-space: nowrap;
}
.input-with-prefix input {
  border-radius: 0 var(--radius) var(--radius) 0;
  flex: 1;
  min-width: 0;
}

button, input[type="submit"] {
  cursor: pointer;
  font: inherit;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--s-2) var(--s0);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: none;
  color: var(--fg-mid);
  transition: all 0.15s;
}

button:hover { border-color: var(--accent); color: var(--fg-bright); }

input[type="submit"],
button[type="submit"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #e8f4fd;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: #fff;
}

/* ── Main padding ── */
main { padding: var(--s0); }

/* ── HR ── */
hr {
  border: none;
  border-block-start: 1px solid var(--border);
  margin-block: var(--s0);
}

/* ── Fieldset ── */
fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-1) var(--s0);
}
legend {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--fg-mid);
  padding-inline: var(--s-2);
}

/* ── Trip role badge ── */
.trip-role {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hi);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-1);
  margin: 0;
}

/* ── Trip header bar ── */
.trip-header {
  padding-block: var(--s-2);
}
.trip-header-bar {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.trip-header-back {
  flex-shrink: 0;
  font-size: var(--s0);
}
.trip-header-meta {
  text-align: center;
  font-size: var(--s0);
  line-height: 1.3;
}
.trip-header-meta strong {
  font-size: var(--s1);
  display: block;
}
.trip-header-desc {
  color: var(--fg-mid);
  font-size: var(--s0);
  margin: 0;
  line-height: 1.5;
}
.trip-header-dates {
  color: var(--fg-mid);
  font-size: var(--s0);
  margin-block-start: var(--s-3);
}
.trip-header-controls {
  flex-shrink: 0;
  flex-grow: 0;
  align-self: flex-start;
  justify-self: end;
  width: fit-content;
  max-width: 20%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--s0);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-1);
  line-height: 1.4;
}
.trip-role {
  color: var(--fg-muted);
  font-size: var(--s0);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.trip-header-actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.trip-header-actions form {
  display: contents;
}
button[type="submit"].btn-danger,
input[type="submit"].btn-danger,
.btn-danger {
  background: transparent;
  border-color: #e07262;
  color: #e07262;
}
button[type="submit"].btn-danger:hover,
input[type="submit"].btn-danger:hover,
.btn-danger:hover {
  border-color: #c0392b;
  color: #c0392b;
}
.btn-sm {
  font-size: var(--s0);
  padding: 0.25em 0.75em;
  line-height: 1.4;
}

.btn-lg {
  font-size: 1.1rem;
  padding: 0.6em 1.6em;
}

/* ── Username status ── */
.username-status, .un-status {
  font-size: 0.8em;
  color: var(--fg-muted);
}
.username-status.ok, .un-status.ok { color: #4ecba0; }
.username-status.err, .un-status.err { color: #e07262; }

/* ── Chip-style radio/checkbox labels ── */
.chip {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-1);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--fg-mid);
  transition: all 0.15s;
}
.chip:hover { border-color: var(--accent); color: var(--fg-bright); }
input[type="radio"]:checked + .chip,
input[type="checkbox"]:checked + .chip {
  border-color: var(--accent-hi);
  color: var(--fg-bright);
  background: rgba(var(--accent-rgb), 0.15);
}
input[type="radio"], input[type="checkbox"] { display: none; }

/* ── Login multi-step ── */
.step { display: none; }
.step.active { display: block; }

/* ── Password eye toggle ── */
.pw-wrap { position: relative; }
.pw-eye {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--s-1);
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--fg-mid);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Modal dialogs ── */
dialog:not([open]) { display: none; }
dialog {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  padding: var(--s0);
  max-inline-size: min(40rem, 90vw);
  max-block-size: 80vh;
  overflow-y: auto;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.rel-picker { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.rel-picker-prefix { color: var(--fg-mid); white-space: nowrap; }
.rel-type-btn { background: transparent; border: 1px solid var(--border); color: var(--fg-muted); font-size: var(--s0); padding: 0.15em 0.5em; border-radius: var(--radius); cursor: pointer; }
.rel-type-btn:hover { border-color: var(--accent); color: var(--fg); }
.rel-type-btn.active { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--bg-deep) !important; font-weight: 600; }
.connect-edit-modal { display: flex; flex-direction: column; gap: var(--s1); }
.connect-edit-modal h3 { margin: 0; }
.connect-modal-footer { display: flex; flex-direction: column; gap: var(--s-1); border-top: 1px solid var(--border); padding-top: var(--s0); margin-top: var(--s-1); }
.connect-modal-secondary { display: flex; gap: var(--s-1); }
/* Save: big, prominent — scoped to beat button[type=submit] specificity */
.connect-modal-footer .connect-save-btn { width: 100%; background: var(--accent); color: var(--bg-deep); border: 1px solid var(--accent); padding: 0.45em 1em; font-size: 0.95rem; font-weight: 700; border-radius: var(--radius); cursor: pointer; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; }
.connect-modal-footer .connect-save-btn:hover { background: var(--accent-hi); border-color: var(--accent-hi); box-shadow: none; }
/* Cancel and Remove: same size, aligned */
.connect-modal-secondary .connect-cancel-btn,
.connect-modal-secondary .connect-remove-btn { flex: 1; background: none; border: 1px solid var(--border); color: var(--fg-muted); font-size: var(--s0); cursor: pointer; padding: 0.35em 0.5em; border-radius: var(--radius); text-align: center; text-transform: none; letter-spacing: normal; }
.connect-modal-secondary .connect-cancel-btn:hover { border-color: var(--fg-muted); color: var(--fg); }
/* Remove: red */
.connect-modal-secondary .connect-remove-btn { color: #c0392b; border-color: #c0392b; opacity: 0.75; }
.connect-modal-secondary .connect-remove-btn:hover { opacity: 1; background: #c0392b; color: #fff; }
button.danger { background: transparent; border-color: #c0392b; color: #e05545; }
button.danger:hover { background: #c0392b; color: #fff; }
.invite-link-box { background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius); padding: var(--s0); }
.invite-link-box p { margin: 0 0 var(--s-1); }
.invite-link-row { display: flex; gap: var(--s-1); }
.invite-link-row input { flex: 1; font-family: monospace; font-size: 0.85em; }
/* ── Connect page: type picker + method tabs ── */
.conn-type-section { text-align: center; }
.conn-type-label { margin: 0 0 var(--s-1); font-size: var(--s0); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); }
.conn-type-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); }
.conn-type-btn { background: transparent; border: 2px solid var(--border); color: var(--fg-mid); font-size: 1rem; font-weight: 600; padding: 0.35em 0.9em; border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.conn-type-btn:hover { border-color: var(--accent); color: var(--fg); }
.conn-type-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg-deep); }
.conn-method-tabs { display: flex; gap: var(--s-1); }
.conn-method-tab { flex: 1; background: var(--panel); border: 1px solid var(--border); color: var(--fg-muted); font-size: var(--s0); font-weight: 600; padding: 0.5em 0.75em; border-radius: var(--radius); cursor: pointer; text-align: center; transition: border-color 0.15s, color 0.15s; }
.conn-method-tab:hover { border-color: var(--accent); color: var(--fg); }
.conn-method-tab.active { background: var(--panel); border-color: var(--accent); color: var(--accent); }
.conn-method-panel { }
/* ── Connect page: pending invitations ── */
.conn-pending-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s0); align-self: flex-start; }
.conn-pending-heading { margin: 0 0 var(--s0); font-size: var(--s0); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); font-weight: 600; }
.conn-pending-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s0); flex-wrap: wrap; padding: var(--s-1) 0; border-bottom: 1px solid var(--border); }
.conn-pending-row:last-child { border-bottom: none; padding-bottom: 0; }
.conn-pending-info { display: flex; align-items: baseline; gap: 0.5em; }
.conn-pending-email { font-size: var(--s0); font-weight: 500; }
.conn-pending-type { color: var(--fg-muted); font-size: var(--s0); }
.conn-pending-actions { display: flex; gap: var(--s-1); }
.conn-pending-actions button { background: transparent; border: 1px solid var(--border); color: var(--fg-muted); font-size: var(--s0); padding: 0.25em 0.7em; border-radius: var(--radius); cursor: pointer; }
.conn-pending-actions button:hover { border-color: var(--accent); color: var(--fg); }
.conn-pending-actions button.danger { border-color: #c0392b; color: #c0392b; opacity: 0.75; }
.conn-pending-actions button.danger:hover { opacity: 1; background: #c0392b; color: #fff; }

/* ── Map pin (numbered circle, used in list and as Leaflet divIcon) ── */
.map-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-hi);
  color: var(--bg-deep);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  border: 2px solid var(--bg);
  flex-shrink: 0;
}
.map-pin-home {
  background: var(--muted, #888);
  font-size: 0.9rem;
}

/* ── Reactions ── */
.reaction {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  padding: 0 var(--s-2);
  font-size: 0.8em;
  color: var(--fg-mid);
}
.reaction:hover { border-color: var(--accent); }
.reaction.mine { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.15); }
.react-add {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  padding: 0 var(--s-2);
  color: var(--fg-muted);
  font-size: 0.8em;
  text-transform: none;
  letter-spacing: 0;
}
.symbol-picker {
  position: fixed;
  z-index: 300;
}

/* ── Place autocomplete ── */
.suggestion {
  padding: var(--s-2) var(--s-1);
  cursor: pointer;
  border-block-end: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--fg);
}
.suggestion:hover { background: var(--panel2); }

/* ── Place chevron ── */
.chevron { transition: transform 0.15s; color: var(--fg-muted); }


/* ── Note page header (back + actions row) ── */
.note-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: var(--s0);
}
#note-view-controls {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

/* ── Note document container (shared by view + edit) — notebook paper aesthetic ── */
.note-document {
  --note-paper:  #f3f8ff;
  --note-ink:    #2c3a50;
  --note-line:   #c2d8ec;
  --note-margin: rgba(210, 75, 75, 0.45);
  background: var(--note-paper);
  border-inline-start: 4px solid var(--note-margin);
  border-radius: var(--radius);
  box-shadow: 2px 4px 18px rgba(0,0,0,0.22), -1px 0 0 #aabccc;
  color: var(--note-ink);
  padding: var(--s1);
  max-inline-size: 52rem;
}

/* ── Note view mode ── */
.note-doc-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--note-ink);
  margin: 0 0 var(--s-1) 0;
  line-height: 1.3;
  border-bottom: 2px solid var(--note-line);
  padding-bottom: var(--s-2);
}
#note-modal-body {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--note-ink);
}
/* Markdown overrides for paper background */
.note-document .md-content h1,
.note-document .md-content h2,
.note-document .md-content h3 { color: var(--note-ink); font-family: 'IBM Plex Mono', monospace; }
.note-document .md-content a {
  color: var(--link);
  text-decoration: none;
  padding: 0.05em 0.4em;
  background: rgba(var(--link-rgb), 0.08);
  border: 1px solid rgba(var(--link-rgb), 0.30);
  border-radius: 4px;
  transition: color 0.15s ease,
              background-color 0.15s ease,
              border-color 0.15s ease;
}
.note-document .md-content a:hover {
  color: var(--link-hi);
  background: rgba(var(--link-rgb), 0.18);
  border-color: rgba(var(--link-rgb), 0.55);
  box-shadow: none;
}
.note-document .md-content code { background: rgba(194,216,236,0.35); color: var(--note-ink); }
.note-document .md-content pre { background: rgba(194,216,236,0.2); }
.note-document .md-content blockquote { border-left-color: var(--note-margin); color: rgba(44,58,80,0.65); }

/* ── Note view page nav (shown when content overflows) ── */
#note-view-nav {
  display: none;
  align-items: center;
  gap: var(--s-2);
  padding: 2px var(--s-1);
  background: #dce8f4;
  border-top: 1px solid #b8ccda;
  margin-inline: calc(-1 * var(--s1));
}
#note-view-nav.visible { display: flex; }
#note-view-nav .note-card-nav-btn:hover { color: var(--note-ink); }

.note-doc-meta {
  display: flex;
  gap: var(--s0);
  margin-block-start: var(--s0);
  padding-block-start: var(--s-1);
  border-top: 1px solid var(--note-line);
  font-size: 0.72rem;
  color: rgba(44, 58, 80, 0.5);
}

/* ── Note editor (edit mode) ── */
.note-editor {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.note-title-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--note-line);
  color: var(--note-ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0 0 var(--s-2) 0;
  box-sizing: border-box;
}
.note-title-input:focus {
  outline: none;
  border-bottom-color: var(--note-margin);
}
.note-title-input::placeholder { color: rgba(44,58,80,0.38); font-weight: 400; }
.note-content-input {
  width: 100%;
  min-block-size: 18rem;
  background: transparent;
  border: none;
  color: var(--note-ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  resize: vertical;
  padding: 0;
  box-sizing: border-box;
}
.note-content-input:focus { outline: none; }

/* ── Markdown rendered content ── */
.md-content h1, .md-content h2, .md-content h3 {
  font-family: 'Rajdhani', system-ui, sans-serif;
  color: var(--fg-bright);
  font-weight: 600;
}
.md-content h1 { font-size: 1.3rem; }
.md-content h2 { font-size: 1.1rem; }
.md-content h3 { font-size: 0.95rem; }
.md-content p  { line-height: 1.7; }
.md-content ul, .md-content ol { padding-inline-start: 1.5em; }
.md-content li { line-height: 1.6; }
.md-content code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82em;
  background: var(--bg-deep);
  border-radius: var(--radius);
  padding: 0.1em 0.35em;
}
.md-content pre { background: var(--bg-deep); border-radius: var(--radius); padding: var(--s-1); overflow-x: auto; }
.md-content pre code { background: none; padding: 0; }
.md-content blockquote {
  border-left: 3px solid var(--accent);
  color: var(--fg-mid);
  padding-inline-start: var(--s-1);
}
.md-content a {
  color: var(--link);
  text-decoration: none;
  border-radius: 3px;
  transition: color 0.15s ease,
              background-color 0.15s ease,
              box-shadow 0.15s ease;
}
.md-content a:hover {
  color: var(--link-hi);
  background: rgba(var(--link-rgb), 0.14);
  box-shadow: 0 0 0 0.2em rgba(var(--link-rgb), 0.14);
}


/* ── Chat layout ── */
.chat-layout {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.chat-scroll {
  overflow-y: auto;
  min-height: 10rem;
  max-height: 60vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-deep);
  scrollbar-width: thin;
}

/* ── Chat messages ── */
article.msg {
  display: flex;
  align-items: flex-start;
  gap: var(--s0);
  padding: var(--s-2) var(--s0);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
article.msg:last-child { border-bottom: none; }
article.msg:hover { background: var(--panel2); border-bottom-color: var(--border); }

.msg-content { flex: 1; min-width: 0; }

.msg-meta {
  flex-shrink: 0;
  width: 5.5rem;
  text-align: right;
  padding-top: 0.1em;
}

.msg-author {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

.msg-time {
  display: block;
  font-size: 0.65rem;
  color: var(--fg-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-body {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--fg);
  word-break: break-word;
}
.msg-body p { margin: 0 0 0.3em; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body a {
  color: var(--link);
  text-decoration: none;
  border-radius: 3px;
  transition: color 0.15s ease,
              background-color 0.15s ease,
              box-shadow 0.15s ease;
}
.msg-body a:hover {
  color: var(--link-hi);
  background: rgba(var(--link-rgb), 0.14);
  box-shadow: 0 0 0 0.2em rgba(var(--link-rgb), 0.14);
}
.msg-body ul, .msg-body ol { padding-inline-start: 1.3em; margin: 0.25em 0; }
.msg-body li { margin-block: 0.05em; }
.msg-body code { font-size: 0.8em; background: var(--bg-deep); padding: 0.1em 0.3em; border-radius: 3px; }
.msg-body pre { background: var(--bg-deep); padding: var(--s-1); border-radius: var(--radius); overflow-x: auto; margin: 0.3em 0; }
.msg-body pre code { background: none; padding: 0; }
.msg-body h1, .msg-body h2, .msg-body h3 { font-size: 1em; margin: 0.4em 0 0.15em; }
.msg-body blockquote { border-inline-start: 3px solid var(--border); padding-inline-start: var(--s-1); margin: 0.25em 0; color: var(--fg-mid); font-style: italic; }

.msg-footer { margin-block-start: var(--s-2); min-height: 0; }

.chat-empty {
  color: var(--fg-muted);
  font-style: italic;
  text-align: center;
  padding: var(--s1);
}

/* ── Chat composer ── */
#chat-form {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

#chat-input {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--fg-bright);
  font-family: inherit;
  font-size: 0.875rem;
  padding: var(--s-1) var(--s0);
  resize: vertical;
  outline: none;
  min-height: 3.5rem;
}

#chat-input::placeholder { color: var(--fg-muted); }
#chat-input:focus { background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }

.chat-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s0);
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
}

.chat-hint {
  font-size: 0.68rem;
  color: var(--fg-muted);
  font-family: 'IBM Plex Mono', monospace;
}

.chat-send-btn {
  font-size: 0.82rem;
  padding: 0.2em 0.9em;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.chat-send-btn:hover { background: var(--accent-hi); }

/* ── Mention highlight ── */
.mention { color: var(--accent-hi); font-weight: 600; }

/* ── Chat: message images ── */
.msg-body img { max-width: 100%; height: auto; display: block; }

/* ── Chat: edited indicator ── */
.msg-edited {
  display: block;
  font-size: 0.6rem;
  color: var(--fg-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Chat: edit button (pencil) ── */
.msg-edit-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.65rem;
  padding: 0;
  line-height: 1;
  color: var(--fg);
  filter: grayscale(1);
  opacity: 0.5;
}
article.msg:hover .msg-edit-btn { display: inline; }
.msg-edit-btn:hover { opacity: 1; }

/* ── Chat: compose tabs (Write / Preview) ── */
.chat-compose-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
}
.chat-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.25em 0.75em;
  font-size: 0.75rem;
  color: var(--fg-muted);
  cursor: pointer;
}
.chat-tab-btn.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

/* ── Chat: compose preview pane ── */
.chat-preview-pane {
  min-height: 3.5rem;
  padding: var(--s-1) var(--s0);
  font-size: 0.875rem;
  color: var(--fg);
  line-height: 1.45;
}

/* ── Chat: inline edit form ── */
.msg-edit-wrap { margin-block: var(--s-2); }

.msg-edit-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.msg-edit-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.2em 0.6em;
  font-size: 0.7rem;
  color: var(--fg-muted);
  cursor: pointer;
}
.msg-edit-tab-btn.active { color: var(--fg); border-bottom-color: var(--accent); }

.msg-edit-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-top: none;
  color: var(--fg-bright);
  font-family: inherit;
  font-size: 0.875rem;
  padding: var(--s-2) var(--s-1);
  resize: vertical;
  outline: none;
}
.msg-edit-input:focus { border-color: var(--accent); }

.msg-edit-preview {
  border: 1px solid var(--border);
  border-top: none;
  padding: var(--s-2) var(--s-1);
  min-height: 2rem;
}

.msg-edit-footer {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
  align-items: center;
}
.msg-edit-save {
  font-size: 0.78rem;
  padding: 0.2em 0.8em;
  background: var(--fg);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
}
.msg-edit-save:hover { background: var(--fg-bright); }
.msg-edit-cancel {
  font-size: 0.75rem;
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 0;
}
.msg-edit-cancel:hover { color: var(--fg); }

/* ── Chat: location picker button (in compose tab strip) ── */
.chat-loc-btn { margin-inline-start: auto; padding-inline: var(--s-1); }

/* Inline link-style "add location" inside the chat hint line */
.chat-hint-loc {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--link);
  cursor: pointer;
}
.chat-hint-loc:hover { color: var(--link-hi); }

/* ── Chat: location picker modal ── */
.loc-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--s-1);
}
.loc-picker-overlay[hidden] { display: none; }
body.loc-picker-open { overflow: hidden; }

.loc-picker {
  background: var(--panel);
  color: var(--fg);
  border: 1px solid #000;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  width: min(36rem, 100%);
  max-height: calc(100dvh - var(--s0));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.loc-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-1) var(--s0);
  border-block-end: 1px solid var(--border);
}
.loc-picker-close {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.loc-picker-close:hover { color: var(--fg); }

.loc-picker-search {
  position: relative;
  z-index: 10;
  padding: var(--s-1) var(--s0);
}
#loc-picker-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-1);
  font-size: 1rem;
  outline: none;
}
#loc-picker-search-input:focus { border-color: var(--accent); }

.loc-picker-suggestions {
  position: absolute;
  inset-inline: var(--s0);
  z-index: 1100;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 12rem;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.loc-picker-suggestions[hidden] { display: none; }
.loc-picker-sugg-item {
  padding: var(--s-2) var(--s-1);
  cursor: pointer;
  border-block-end: 1px solid var(--border);
  font-size: 0.9rem;
}
.loc-picker-sugg-item:last-child { border-block-end: none; }
.loc-picker-sugg-item:hover { background: var(--panel); }

.loc-picker-map {
  flex: 1 1 auto;
  min-height: 16rem;
  border-block: 1px solid #000;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.loc-picker-fields {
  padding: var(--s-1) var(--s0);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.loc-picker-label {
  font-size: 0.75rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#loc-picker-desc {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-1);
  font-size: 1rem;
  outline: none;
}
#loc-picker-desc:focus { border-color: var(--accent); }
.loc-picker-coords {
  font-size: 0.75rem;
  color: var(--fg-muted);
  font-family: ui-monospace, monospace;
}

.loc-picker-footer {
  display: flex;
  gap: var(--s-1);
  justify-content: flex-end;
  padding: var(--s-1) var(--s0);
  border-block-start: 1px solid var(--border);
}
.loc-picker-cancel {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  padding: var(--s-2) var(--s0);
  font-size: 0.9rem;
}
.loc-picker-cancel:hover { color: var(--fg); }
.loc-picker-insert {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  padding: var(--s-2) var(--s0);
  font-size: 0.95rem;
  font-weight: 600;
}
.loc-picker-insert:hover { background: var(--accent-hi); }

/* Mobile: full-screen modal */
@media (max-width: 32rem) {
  .loc-picker-overlay { padding: 0; }
  .loc-picker {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border-inline: none;
  }
  .loc-picker-map { min-height: 14rem; }
}

/* ── Note-link picker modal ── */
.note-link-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--s-1);
}
.note-link-picker-overlay[hidden] { display: none; }
body.note-link-picker-open { overflow: hidden; }

.note-link-picker {
  background: var(--panel);
  color: var(--fg);
  border: 1px solid #000;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  width: min(32rem, 100%);
  max-height: calc(100dvh - var(--s0));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.note-link-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-1) var(--s0);
  border-block-end: 1px solid var(--border);
}
.note-link-picker-close {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.note-link-picker-close:hover { color: var(--fg); }

.note-link-picker-search {
  padding: var(--s-1) var(--s0);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1 1 auto;
  min-height: 0;
}
#note-link-picker-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-1);
  font-size: 1rem;
  outline: none;
}
#note-link-picker-search-input:focus { border-color: var(--accent); }

.note-link-picker-suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 22rem;
}
.note-link-picker-sugg-item {
  padding: var(--s-2) var(--s-1);
  cursor: pointer;
  border-block-end: 1px solid var(--border);
  font-size: 1rem;
}
.note-link-picker-sugg-item:last-child { border-block-end: none; }
.note-link-picker-sugg-item:hover,
.note-link-picker-sugg-item.is-active { background: var(--panel); }
.note-link-picker-empty {
  padding: var(--s-1) var(--s0);
  color: var(--fg-muted);
  font-style: italic;
}

.note-link-picker-footer {
  display: flex;
  gap: var(--s-1);
  justify-content: flex-end;
  padding: var(--s-1) var(--s0);
  border-block-start: 1px solid var(--border);
}
.note-link-picker-cancel {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  padding: var(--s-2) var(--s0);
  font-size: 0.95rem;
}
.note-link-picker-cancel:hover { color: var(--fg); }

@media (max-width: 32rem) {
  .note-link-picker-overlay { padding: 0; }
  .note-link-picker {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border-inline: none;
  }
}

/* ── Location viewer (read-only popup opened by clicking a mini map) ── */
.loc-view-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--s-1);
}
.loc-view-overlay[hidden] { display: none; }
body.loc-view-open { overflow: hidden; }

.loc-view {
  background: var(--panel);
  color: var(--fg);
  border: 1px solid #000;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  width: min(36rem, 100%);
  max-height: calc(100dvh - var(--s0));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.loc-view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s0);
  border-block-end: 1px solid var(--border);
}
.loc-view-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loc-view-close {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.loc-view-close:hover { color: var(--fg); }

.loc-view-map {
  flex: 1 1 auto;
  min-height: 18rem;
  position: relative;
  z-index: 0;
  isolation: isolate;
  border-block-end: 1px solid #000;
}

.loc-view-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s0);
}
.loc-view-coords {
  font-size: 0.8rem;
  color: var(--fg-muted);
  font-family: ui-monospace, monospace;
}
.loc-view-gmaps {
  color: var(--link);
  font-size: 0.95rem;
}
.loc-view-gmaps:hover { color: var(--link-hi); }

@media (max-width: 32rem) {
  .loc-view-overlay { padding: 0; }
  .loc-view {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border-inline: none;
  }
  .loc-view-map { min-height: 14rem; }
}

/* ── Chat & note: embedded mini map (rendered from [lat:..,lon:..](desc)) ── */
.msg-body .chat-mini-map,
.chat-preview-pane .chat-mini-map,
.msg-edit-preview .chat-mini-map,
.note-editor .chat-mini-map {
  display: inline-block;
  vertical-align: middle;
  margin: var(--s-2) var(--s-2) var(--s-2) 0;
  border: 1px solid #000;
  border-radius: var(--radius);
  overflow: hidden;
  width: min(14rem, 100%);
  background: var(--panel2);
}
/* Tiptap marks the selected atom node — give a clear focus ring. */
.note-editor .chat-mini-map.ProseMirror-selectednode {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-mini-map-canvas {
  width: 100%;
  height: 6rem;
  cursor: pointer;
}
.chat-mini-map-caption {
  font-size: 0.75rem;
  padding: var(--s-2) var(--s-1);
  border-block-start: 1px solid var(--border);
  color: var(--fg);
  background: var(--panel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tab-link (overview → places) ── */
.tab-link { cursor: pointer; color: var(--link); }
.tab-link:hover { color: var(--link-hi); background: rgba(var(--link-rgb), 0.14); border-radius: 3px; }

/* ── Itinerary calendar ── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
  gap: 0;
  border-inline-start: 1px solid var(--border);
  border-block-start: 1px solid var(--border);
}
.cal-dow {
  display: block;
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-block-end: 0.15em;
}
.cal-day, .cal-empty {
  border-inline-end: 1px solid var(--border);
  border-block-end: 1px solid var(--border);
}
.cal-day {
  background: var(--panel);
  min-block-size: 7rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.cal-day:hover { background: var(--panel2); }
.cal-day-num {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg-mid);
  line-height: 1;
  text-align: end;
  padding-inline: var(--s-2);
  padding-block-start: var(--s-2);
}
.cal-notes {
  flex: 1;
  padding-inline: var(--s-2);
}
.cal-place {
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  padding-block: 0.2em;
  letter-spacing: 0.03em;
}
.cal-place:empty { display: none; }

/* Today highlight */
.cal-grid .cal-day.cal-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-grid .cal-day.cal-today .cal-day-num { color: var(--accent); }

/* Per-place color accents — applied via data-place-hue on .cal-day */
.cal-day[data-place-hue] { border-block-end: 3px solid; }
.cal-day[data-place-hue="0"] { border-block-end-color: #2cb5b5; }
.cal-day[data-place-hue="0"] .cal-place { color: #2cb5b5; border-block-start: 1px solid #2cb5b540; }
.cal-day[data-place-hue="1"] { border-block-end-color: #e88a4a; }
.cal-day[data-place-hue="1"] .cal-place { color: #e88a4a; border-block-start: 1px solid #e88a4a40; }
.cal-day[data-place-hue="2"] { border-block-end-color: #a87fe8; }
.cal-day[data-place-hue="2"] .cal-place { color: #a87fe8; border-block-start: 1px solid #a87fe840; }
.cal-day[data-place-hue="3"] { border-block-end-color: #6cbf72; }
.cal-day[data-place-hue="3"] .cal-place { color: #6cbf72; border-block-start: 1px solid #6cbf7240; }
.cal-day[data-place-hue="4"] { border-block-end-color: #e8c84a; }
.cal-day[data-place-hue="4"] .cal-place { color: #e8c84a; border-block-start: 1px solid #e8c84a40; }
.cal-day[data-place-hue="5"] { border-block-end-color: #e8608a; }
.cal-day[data-place-hue="5"] .cal-place { color: #e8608a; border-block-start: 1px solid #e8608a40; }
.cal-day[data-place-hue="6"] { border-block-end-color: #6898e8; }
.cal-day[data-place-hue="6"] .cal-place { color: #6898e8; border-block-start: 1px solid #6898e840; }
.cal-day[data-place-hue="7"] { border-block-end-color: #8cbe9a; }
.cal-day[data-place-hue="7"] .cal-place { color: #8cbe9a; border-block-start: 1px solid #8cbe9a40; }
.cal-notes.md-content > * { margin-block: 0; }
.cal-notes.md-content p  { font-size: 0.72rem; line-height: 1.4; }
.cal-notes.md-content ul,
.cal-notes.md-content ol { font-size: 0.72rem; }

/* ── Day edit panel — shown when a calendar cell is clicked ── */
#day-edit-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.day-edit-topbar { flex-wrap: wrap; }
.day-edit-back {
  background: transparent;
  border: 1px solid var(--panel2);
  color: var(--fg-muted);
  padding: var(--s-2) var(--s-1);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.day-edit-back:hover { color: var(--fg); background: var(--panel2); }

/* Autosave status indicator — matches the notes editor's .note-status */
.day-edit-save-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--fg-muted);
  font-size: 0.8rem;
}
.day-edit-save-status:empty { display: none; }
.day-edit-save-status.is-saving { color: #d2a44b; }
.day-edit-save-status.is-saving .note-status-dot {
  background: #d2a44b;
  animation: note-pulse 1s ease-in-out infinite;
}
.day-edit-save-status.is-dirty .note-status-dot { background: #c9a14a; }
.day-edit-save-status.is-error  { color: #c75858; }
.day-edit-save-status.is-error .note-status-dot { background: #c75858; }
@keyframes note-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210,164,75,0.6); }
  50%      { box-shadow: 0 0 0 4px rgba(210,164,75,0.0); }
}

/* The "I'm editing this day" card — mirrors .cal-day at a much larger size
   so you feel like you've zoomed into a single calendar cell. */
.day-edit-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: minmax(10rem, auto) 1fr;
  align-items: stretch;
  overflow: hidden;
  /* Default accent uses the trip accent; per-place hue overrides below. */
  border-block-end: 4px solid var(--accent);
}
.day-edit-card-num {
  background: var(--panel2);
  padding: var(--s-1) var(--s0);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15em;
  border-inline-end: 1px solid var(--border);
}
.day-edit-place-context {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin-block-end: 0.1em;
}
.day-edit-place-context.is-empty { color: var(--fg-muted); font-weight: 600; }
.day-edit-dow-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}
.day-edit-dow {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.day-edit-day-num {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 0.95;
  color: var(--fg-bright);
}
.day-edit-month {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--fg-mid);
  margin-block-start: 0.2em;
}
.day-edit-staying {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: 0.9rem;
}
.day-edit-staying-label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.day-edit-staying-name {
  color: var(--accent-hi);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: pointer;
}
.day-edit-staying-name:hover { color: var(--fg-bright); border-bottom-style: solid; }
.day-edit-card-meta {
  padding: var(--s-1) var(--s0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
}
.day-edit-day-count {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.day-edit-day-count:empty { display: none; }
.day-edit-where {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg-bright);
  flex-wrap: wrap;
}
.day-edit-where-name.is-empty {
  color: var(--fg-muted);
  font-weight: 400;
  font-style: italic;
}

/* Per-place hue accent on the card — same palette as .cal-day */
#day-edit-panel[data-place-hue="0"] .day-edit-card { border-block-end-color: #2cb5b5; }
#day-edit-panel[data-place-hue="0"] .day-edit-where-name:not(.is-empty) { color: #2cb5b5; }
#day-edit-panel[data-place-hue="1"] .day-edit-card { border-block-end-color: #e88a4a; }
#day-edit-panel[data-place-hue="1"] .day-edit-where-name:not(.is-empty) { color: #e88a4a; }
#day-edit-panel[data-place-hue="2"] .day-edit-card { border-block-end-color: #a87fe8; }
#day-edit-panel[data-place-hue="2"] .day-edit-where-name:not(.is-empty) { color: #a87fe8; }
#day-edit-panel[data-place-hue="3"] .day-edit-card { border-block-end-color: #6cbf72; }
#day-edit-panel[data-place-hue="3"] .day-edit-where-name:not(.is-empty) { color: #6cbf72; }
#day-edit-panel[data-place-hue="4"] .day-edit-card { border-block-end-color: #e8c84a; }
#day-edit-panel[data-place-hue="4"] .day-edit-where-name:not(.is-empty) { color: #e8c84a; }
#day-edit-panel[data-place-hue="5"] .day-edit-card { border-block-end-color: #e8608a; }
#day-edit-panel[data-place-hue="5"] .day-edit-where-name:not(.is-empty) { color: #e8608a; }
#day-edit-panel[data-place-hue="6"] .day-edit-card { border-block-end-color: #6898e8; }
#day-edit-panel[data-place-hue="6"] .day-edit-where-name:not(.is-empty) { color: #6898e8; }
#day-edit-panel[data-place-hue="7"] .day-edit-card { border-block-end-color: #8cbe9a; }
#day-edit-panel[data-place-hue="7"] .day-edit-where-name:not(.is-empty) { color: #8cbe9a; }

/* Form fields inside the day-edit panel */
.day-edit-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.day-edit-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.day-edit-notes-head { flex-wrap: wrap; }
.day-edit-notes-head .note-organize-btn {
  font-size: 0.8rem;
  padding: var(--s-3) var(--s-2);
}
/* Place "display mode" — visible when a destination is picked. Shows the
   place name and a small "edit" affordance that reveals the chooser. */
.day-edit-place-display {
  font-size: 1rem;
}
.day-edit-place-display-name {
  font-weight: 600;
  color: var(--fg-bright);
}
.day-edit-place-edit {
  background: transparent;
  border: none;
  color: var(--link);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 var(--s-3);
  border-radius: 3px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.day-edit-place-edit:hover { color: var(--link-hi); background: rgba(var(--link-rgb), 0.14); }

/* Clickable picker: one button per destination + "Not sure yet" */
.day-edit-place-picker {
  flex-wrap: wrap;
}
.day-edit-place-btn {
  background: var(--panel);
  border: 1px solid var(--panel2);
  color: var(--fg);
  padding: var(--s-2) var(--s-1);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.1;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.day-edit-place-btn:hover { background: var(--panel2); }
.day-edit-place-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--panel);
  font-weight: 600;
}
/* When a button has a per-place hue and isn't active, dot it with the hue
   color so users see the same color coding as in the calendar. */
.day-edit-place-btn[data-place-hue]::before {
  content: '';
  display: inline-block;
  inline-size: 0.55em;
  block-size: 0.55em;
  border-radius: 50%;
  margin-inline-end: 0.45em;
  vertical-align: 0.05em;
  background: currentColor;
}
.day-edit-place-btn[data-place-hue="0"] { color: #2cb5b5; }
.day-edit-place-btn[data-place-hue="1"] { color: #e88a4a; }
.day-edit-place-btn[data-place-hue="2"] { color: #a87fe8; }
.day-edit-place-btn[data-place-hue="3"] { color: #6cbf72; }
.day-edit-place-btn[data-place-hue="4"] { color: #e8c84a; }
.day-edit-place-btn[data-place-hue="5"] { color: #e8608a; }
.day-edit-place-btn[data-place-hue="6"] { color: #6898e8; }
.day-edit-place-btn[data-place-hue="7"] { color: #8cbe9a; }
.day-edit-place-btn[data-place-hue].is-active {
  color: var(--panel);
  background: currentColor;
  border-color: currentColor;
}
.day-edit-place-btn[data-place-hue].is-active::before { display: none; }
/* Active button colored fill: keep the text readable by re-setting it via
   the parent .is-active rule above. The hue lives on background only. */
.day-edit-place-btn[data-place-hue="0"].is-active { background: #2cb5b5; border-color: #2cb5b5; color: var(--panel); }
.day-edit-place-btn[data-place-hue="1"].is-active { background: #e88a4a; border-color: #e88a4a; color: var(--panel); }
.day-edit-place-btn[data-place-hue="2"].is-active { background: #a87fe8; border-color: #a87fe8; color: var(--panel); }
.day-edit-place-btn[data-place-hue="3"].is-active { background: #6cbf72; border-color: #6cbf72; color: var(--panel); }
.day-edit-place-btn[data-place-hue="4"].is-active { background: #e8c84a; border-color: #e8c84a; color: var(--panel); }
.day-edit-place-btn[data-place-hue="5"].is-active { background: #e8608a; border-color: #e8608a; color: var(--panel); }
.day-edit-place-btn[data-place-hue="6"].is-active { background: #6898e8; border-color: #6898e8; color: var(--panel); }
.day-edit-place-btn[data-place-hue="7"].is-active { background: #8cbe9a; border-color: #8cbe9a; color: var(--panel); }

/* Row that holds [prev pill | day card | next pill] side by side, so the
   user can jump between days at the same eye-level as the day heading. */
.day-edit-card-row {
  display: flex;
  align-items: stretch;
  gap: var(--s-1);
  flex-wrap: wrap;
}
.day-edit-card-row .day-edit-card {
  flex: 1 1 20rem;
  min-width: 0;
}

/* Adjacent-day pills (day before / day after) — narrow, in-row companions */
.day-edit-adj {
  flex: 0 0 auto;
  min-inline-size: 9rem;
  max-inline-size: 14rem;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--panel);
  border: 1px solid var(--panel2);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-1);
  text-align: start;
  cursor: pointer;
  color: var(--fg-mid);
  font-size: 0.85rem;
}
.day-edit-adj:hover { background: var(--panel2); color: var(--fg); }
.day-edit-adj-next { justify-content: flex-end; text-align: end; }
.day-edit-adj-arrow {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 1.3rem;
  color: var(--fg-muted);
  line-height: 1;
}
.day-edit-adj:hover .day-edit-adj-arrow { color: var(--fg-bright); }
.day-edit-adj-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  line-height: 1.2;
  min-width: 0;
}
.day-edit-adj-when {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.day-edit-adj-where {
  font-weight: 600;
  color: var(--fg-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.day-edit-adj-where.is-empty {
  color: var(--fg-muted);
  font-weight: 400;
  font-style: italic;
}
/* Color the adjacent-day pills' left/right border to match the destination
   so the user feels the trip's color flow even while editing one day. */
.day-edit-adj-prev[data-place-hue] { border-inline-start-width: 4px; }
.day-edit-adj-next[data-place-hue] { border-inline-end-width:   4px; }
.day-edit-adj[data-place-hue="0"] { border-color: #2cb5b5; }
.day-edit-adj[data-place-hue="1"] { border-color: #e88a4a; }
.day-edit-adj[data-place-hue="2"] { border-color: #a87fe8; }
.day-edit-adj[data-place-hue="3"] { border-color: #6cbf72; }
.day-edit-adj[data-place-hue="4"] { border-color: #e8c84a; }
.day-edit-adj[data-place-hue="5"] { border-color: #e8608a; }
.day-edit-adj[data-place-hue="6"] { border-color: #6898e8; }
.day-edit-adj[data-place-hue="7"] { border-color: #8cbe9a; }
@media (max-width: 32rem) {
  .day-edit-card { grid-template-columns: 1fr; }
  .day-edit-card-num { border-inline-end: none; border-block-end: 1px solid var(--border); align-items: center; }
}

/* ── Itinerary "Settings for this plan" details ── */
.itin-version-manage {
  margin-block-start: var(--s-2);
  font-size: 0.85rem;
}
.itin-version-manage > summary {
  cursor: pointer;
  color: var(--fg-muted);
  display: inline-block;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--radius);
  list-style: none;
}
.itin-version-manage > summary::-webkit-details-marker { display: none; }
.itin-version-manage > summary::before {
  content: '▸';
  display: inline-block;
  margin-inline-end: 0.4em;
  transition: transform 0.15s;
}
.itin-version-manage[open] > summary::before { transform: rotate(90deg); }
.itin-version-manage > summary:hover { color: var(--fg); background: var(--panel2); }
.itin-version-manage[open] > summary { color: var(--fg); }
.itin-version-manage-body {
  padding: var(--s-1);
  margin-block-start: var(--s-2);
  border: 1px solid var(--panel2);
  border-radius: var(--radius);
  background: var(--panel);
}
.itin-version-manage-label {
  font-size: 0.78rem;
  color: var(--fg-muted);
  display: block;
  margin-block-end: var(--s-3);
}
.itin-version-manage .itin-ver-input { width: 16em; padding: var(--s-3); }
.itin-version-manage-save {
  font-size: 0.85rem;
  padding: var(--s-3) var(--s-1);
  background: var(--panel2);
  border: 1px solid var(--panel2);
  color: var(--fg);
  border-radius: var(--radius);
  cursor: pointer;
}
.itin-version-manage-save:hover { background: var(--accent); color: var(--panel); }
.itin-version-manage-delete {
  font-size: 0.85rem;
  padding: var(--s-3) var(--s-1);
  background: transparent;
  border: 1px solid #c75858;
  color: #c75858;
  border-radius: var(--radius);
  cursor: pointer;
}
.itin-version-manage-delete:hover { background: #c75858; color: var(--panel); }
.cal-notes.md-content h1,
.cal-notes.md-content h2,
.cal-notes.md-content h3 { font-size: 0.78rem; }
.cal-stop {
  font-size: 0.78rem;
}
.cal-stop-title {
  display: block;
  color: var(--fg-bright);
  font-size: 0.78rem;
}
.cal-stop-meta {
  color: var(--fg-muted);
  font-size: 0.72rem;
}
.cal-stop-text {
  color: var(--fg-mid);
  font-size: 0.72rem;
  line-height: 1.4;
}
.cal-btn {
  font-size: 0.7rem;
  border-color: transparent;
  color: var(--fg-muted);
}
.cal-btn:hover {
  color: var(--fg-bright);
  border-color: var(--border);
}

/* ── Overview layout ── */
.overview-layout {
    display: flex;
    gap: var(--s1);
    align-items: flex-start;
    flex-wrap: wrap;
}
.overview-map-wrap {
    flex: 0 0 22rem;
    min-width: 0;
}
.overview-panel {
    flex: 1 1 18rem;
    min-width: 0;
}
.overview-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s-1);
}
.overview-title-meta { min-width: 0; }
.overview-trip-name {
    font-size: var(--s1);
    font-weight: bold;
    line-height: 1.2;
    color: var(--fg-bright);
}
.overview-dates {
    color: var(--fg-mid);
    font-size: var(--s0);
    margin-block-start: var(--s-3);
}
.overview-dates-empty {
    color: var(--fg-muted);
    font-style: italic;
}
.overview-desc {
    color: var(--fg-mid);
    font-size: var(--s0);
    line-height: 1.5;
    margin: 0;
}

/* ── Map ── */
#overview-map { block-size: 320px; inline-size: 100%; border: 1px solid var(--border); border-radius: var(--radius); isolation: isolate; }

/* ── File drop zone ── */
#file-drop {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--s1);
  text-align: center;
  cursor: pointer;
  color: var(--fg-mid);
}
#file-drop:hover { border-color: var(--accent); }
#file-drop.drag-over { border-style: solid; border-color: var(--accent-hi); }
#file-drop.has-file { border-color: var(--accent-hi); color: var(--fg-bright); }
#file-drop input[type="file"] { display: none; }

/* ── Tom Select ── */
.ts-people-rel { font-size: 1em; color: var(--fg-muted); margin-inline-start: var(--s-1); }

/* ── Plan page input hint ── */
.input-hint { font-size: 0.65em; color: var(--fg-muted); margin: 0; }

/* ── Plan chat messages ── */
.message {
  padding: var(--s-1) var(--s0);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel2);
}
.user-message {
  border-inline-start: 3px solid var(--accent);
  background: var(--panel);
}
.assistant-message {
  border-inline-start: 3px solid var(--accent-hi);
}
.message-label {
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-block-end: 0.3em;
}
.user-message .message-label   { color: var(--accent); }
.assistant-message .message-label { color: var(--accent-hi); }

/* ── Plan page header ── */
.plan-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s0); }
.plan-header h2 { margin: 0; }
.plan-header p  { margin: 0; }
.plan-header-actions { display: flex; gap: var(--s-1); flex-shrink: 0; padding-block-start: 0.25rem; }

/* ── Saved chats slide panel ── */
.slide-panel {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(24rem, 100vw);
  background: var(--panel);
  border-inline-start: 1px solid var(--border);
  overflow-y: auto;
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.slide-panel[hidden] { display: none; }
.slide-panel-inner { padding: var(--s0); display: flex; flex-direction: column; gap: var(--s0); }
.slide-panel-header { display: flex; align-items: center; justify-content: space-between; }
.slide-panel-header h3 { margin: 0; }
.slide-panel-header button { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--fg-mid); }
.saved-chat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-1) var(--s0);
  border-radius: var(--radius);
  background: var(--panel2);
  gap: var(--s-1);
}
.saved-chat-row + .saved-chat-row { margin-block-start: var(--s-2); }
.saved-chat-name { cursor: pointer; flex: 1; color: var(--fg); font-size: 0.9em; }
.saved-chat-name:hover { color: var(--accent-hi); }
.saved-chat-delete { background: none; border: none; cursor: pointer; color: var(--fg-muted); font-size: 1.1rem; padding: 0 0.25rem; flex-shrink: 0; }
.saved-chat-delete:hover { color: var(--danger, #e05); }
.loading-text { color: var(--fg-muted); font-size: 0.9em; }

/* ── Figure It Out ── */
.fio-chip {
    font-size: var(--s0);
    padding: var(--s-4) var(--s-2);
    background: var(--panel2);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--fg-mid);
    white-space: nowrap;
}
.fio-warn {
    color: var(--fg-muted);
    font-size: 0.88em;
    padding: var(--s-2) var(--s-1);
    border-left: 2px solid var(--accent);
    margin-block-start: var(--s-1);
}
.fio-preview-box {
    background: var(--bg-deep);
    border: 1px solid var(--panel2);
    border-radius: var(--radius);
    padding: var(--s0);
    max-height: 60vh;
    overflow-y: auto;
}
.fio-dryrun-badge {
    font-size: 0.8em;
    color: var(--fg-muted);
    background: var(--panel2);
    border: 1px dashed var(--accent);
    border-radius: var(--radius);
    padding: 0.25em 0.75em;
    margin-bottom: var(--s-1);
    display: inline-block;
}
.fio-section {
    margin-block-start: var(--s-1);
}
.fio-section-label {
    font-weight: 600;
    margin-block-end: var(--s-2);
}
/* Destination table — used in info panel and in "What Apply will do" */
.fio-dest-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    margin-block-start: var(--s-2);
}
.fio-dest-table thead th {
    text-align: left;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
    padding: var(--s-4) var(--s-2);
    border-bottom: 1px solid var(--panel2);
}
.fio-dest-table tbody tr {
    border-bottom: 1px solid var(--panel2);
}
.fio-dest-table tbody tr:last-child { border-bottom: none; }
.fio-dest-table tbody td {
    padding: var(--s-2) var(--s-2);
    vertical-align: middle;
}
.fio-dest-num {
    font-size: 0.8em;
    color: var(--fg-muted);
    width: 2em;
    text-align: center;
}
.fio-dest-name {
    font-weight: 600;
    color: var(--fg-bright);
}
.fio-dest-date {
    font-variant-numeric: tabular-nums;
    color: var(--accent-hi);
    font-weight: 600;
    min-width: 9em;
}
.fio-dest-lodging {
    color: var(--fg-mid);
}
.fio-dest-empty {
    color: var(--fg-muted);
    font-weight: 400;
}
/* Updates preview (shown after generate) */
.fio-updates-wrap {
    border-top: 1px solid var(--panel2);
    padding: var(--s-1) var(--s0);
    background: color-mix(in srgb, var(--accent-hi) 5%, var(--panel));
}
.fio-updates-label {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--accent-hi);
    font-weight: 700;
    margin-block-end: var(--s-3);
}
.fio-updates-table { margin-block-start: 0; }
.fio-date-old {
    color: var(--fg-muted);
    text-decoration: line-through;
    font-weight: 400;
    font-size: 0.9em;
}
.fio-date-new {
    color: var(--accent-hi);
}

/* ── Itinerary version bar ── */
.itin-version-bar {
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--panel2);
    margin-bottom: var(--s-1);
}
.itin-version-label {
    font-size: 0.75em;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.itin-ver-pill {
    font-size: 0.8em;
    padding: 0.25em 0.8em;
    border-radius: 0;
    border: 1px solid var(--panel2);
    border-right: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.itin-ver-pill:first-of-type { border-radius: 0; }
.itin-ver-pill:last-of-type  { border-right: 1px solid var(--panel2); }
.itin-ver-old {
    color: var(--fg-muted);
    background: transparent;
}
.itin-ver-old:hover { color: var(--fg); background: var(--panel2); }
.itin-ver-active {
    background: var(--panel2);
    color: var(--fg-bright);
    border-color: var(--panel2);
    cursor: default;
    font-weight: 600;
}
.itin-ver-wrap { display: inline-flex; align-items: stretch; }
.itin-ver-wrap:last-child .itin-ver-del { border-right: 1px solid var(--panel2); }
.itin-ver-del {
    background: transparent;
    border: 1px solid var(--panel2);
    border-left: none;
    border-right: none;
    color: var(--fg-muted);
    cursor: pointer;
    font-size: 0.85em;
    padding: 0 0.4em;
    line-height: 1;
}
.itin-ver-del:hover { color: var(--fg); background: var(--panel2); }
.itin-ver-input {
    background: var(--bg-deep);
    border: none;
    border-bottom: 1px solid var(--accent);
    color: var(--fg);
    font-size: inherit;
    width: 8em;
    outline: none;
    padding: 0;
}

/* ── Passport Book Card ── */
/* Outer shell = the colored passport cover, fixed to 88×125mm book proportions */
.passport-card {
    display: flex;
    flex-direction: column;
    background: var(--passport-color, #1a3a52);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 3px 0 8px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35);
    padding: 2px 2px 2px 5px;  /* extra left = book spine gutter */
    aspect-ratio: 88 / 125;
    max-width: 18rem;
}
/* Pages container — grid-stacks all pages so only the active one takes space */
.passport-pages-container {
    flex: 1;
    min-height: 0;
    display: grid;
}
/* Inner data page — always cream so text is readable on any cover color */
.passport-page {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    visibility: hidden;
    background: #f8f4ec;
    color: #1a1209;
    border: 1px solid #c8b89a;
    padding: var(--s-2) var(--s-1) 0;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.passport-page.active {
    visibility: visible;
}
.passport-card-auto {
    aspect-ratio: unset;
}
.passport-card-auto .passport-page {
    padding-bottom: var(--s0);
}
.passport-page-form::before {
    display: none;
}
.passport-page::before {
    content: 'V';
    position: absolute;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 11em;
    color: rgba(139, 115, 78, 0.07);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    user-select: none;
}
.passport-header,
.passport-body,
.passport-mrz { position: relative; z-index: 1; }
.passport-header {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.5em;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    text-align: center;
    padding: 4px 0;
    margin-bottom: 5px;
    flex-shrink: 0;
    background: var(--passport-color, #1a3a52);
    color: rgba(255,255,255,0.8);
}
.passport-body {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.passport-body-top {
    display: flex;
    gap: var(--s-1);
    align-items: flex-start;
}
/* Photo: standard passport photo is 35×45mm = 7:9 ratio */
.passport-photo {
    width: 32%;
    flex-shrink: 0;
    aspect-ratio: 35 / 45;
    overflow: hidden;
    border: 1px solid #b0a080;
    background: #e8e0d0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.passport-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.passport-photo svg { color: #a09070; width: 40%; height: 40%; }
/* ── Place Brochure Card ── */
.place-brochure {
    --place-color: #e8420a;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.28);
    width: 18rem;
    height: 22rem;
    background: var(--panel);
}
.place-brochure-hero {
    position: relative;
    overflow: hidden;
    min-height: 9rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: var(--place-color);
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(0,0,0,0.07) 0px,
            rgba(0,0,0,0.07) 2px,
            transparent 2px,
            transparent 10px
        );
}
.place-brochure-hero-overlay {
    position: absolute;
    top: var(--s-1);
    right: var(--s-1);
    z-index: 2;
}
/* Map-pin icon with number */
.place-brochure-pin {
    position: relative;
    width: 2.2rem;
    height: 2.75rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.45));
}
.place-brochure-pin-svg {
    width: 100%;
    height: 100%;
    color: var(--place-color);
}
.place-brochure-pin-num {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bangers', cursive;
    font-size: 1.1em;
    letter-spacing: 0.04em;
    color: #fff;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    user-select: none;
}
.place-brochure-hero-text {
    position: relative;
    z-index: 2;
    padding: var(--s-2) var(--s0) var(--s-1);
}
.place-brochure-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55em;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    margin-bottom: 2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.place-brochure-name {
    font-family: 'Bangers', cursive;
    font-size: 2.6em;
    letter-spacing: 0.06em;
    line-height: 0.95;
    color: #fff;
    margin: 0 0 2px;
    word-break: break-word;
    /* old-school 3-D drop shadow */
    text-shadow:
        2px  2px 0 rgba(0,0,0,0.35),
        4px  4px 0 rgba(0,0,0,0.22),
        6px  6px 0 rgba(0,0,0,0.12),
        7px  7px 0 rgba(0,0,0,0.06);
}
.place-brochure-subname {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.58em;
    color: rgba(255,255,255,0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.place-brochure-details {
    padding: var(--s-1) var(--s0);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.place-brochure-chip-row {
    display: flex;
    gap: var(--s0);
}
.place-brochure-chip-row .place-brochure-chip {
    flex: 1;
}
.place-brochure-empty {
    opacity: 0.35;
}
.place-brochure-chip {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.place-brochure-chip-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.place-brochure-chip-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--fg-bright);
    letter-spacing: 0.02em;
}
.place-brochure-chip-coords .place-brochure-chip-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72em;
    font-weight: 400;
    color: var(--fg-mid);
}
.place-gmaps-row {
    margin-top: var(--s-1);
    text-align: center;
}
.gmaps-link {
    display: inline-block;
    color: var(--fg-mid);
    text-decoration: none;
    font-size: var(--s0);
    border: 1px solid var(--border);
    padding: var(--s-2) var(--s-1);
    border-radius: 0.25em;
    background: var(--bg);
}
.gmaps-link:hover {
    color: var(--fg-bright);
    border-color: var(--fg-mid);
}
.gmaps-link--inline {
    padding: 0 var(--s-1);
    border: none;
    background: transparent;
}
.place-brochure-notes {
    font-size: 0.8em;
    color: var(--fg-mid);
    border-top: 1px solid var(--border);
    padding-top: var(--s-2);
    margin-top: var(--s-3);
    line-height: 1.5;
}
.place-brochure-actions {
    border-top: 1px solid var(--border);
    padding: var(--s-1) var(--s0);
}
/* pages */
.place-brochure-pages {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.place-brochure-page {
    grid-row: 1;
    grid-column: 1;
    display: none;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.place-brochure-page.active { display: flex; }
/* map page */
.place-brochure-map {
    flex: 1;
    min-height: 12rem;
    border: 1px solid #000;
}
.place-brochure-map-nocoords {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.8em;
    color: var(--fg-muted);
    font-family: 'IBM Plex Mono', monospace;
}
/* nav bar */
.place-brochure-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-1);
    padding: 2px var(--s-1);
    background: var(--place-color);
    flex-shrink: 0;
}
.place-brochure-page-indicator {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55em;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.1em;
}
.place-brochure-nav-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
}
.place-brochure-nav-btn svg { width: 1.1rem; height: 1.1rem; }
.place-brochure-nav-btn:hover { color: #fff; }
.place-lodging-list { list-style: none; padding: 0; margin: var(--s-2) 0 0; }
.place-lodging-list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--border); }
.place-lodging-list li:last-child { border-bottom: none; }
.place-lodging-item { padding: var(--s-1) 0; }
.lodging-delete-btn {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--s-1);
    cursor: pointer;
    color: var(--text-muted, #888);
    padding: .1em .5em;
    font-size: .75rem;
    letter-spacing: .03em;
    flex-shrink: 0;
}
details.sp-panel[open] .lodging-delete-btn { display: inline-block; }
.lodging-delete-btn:hover { border-color: #c00; color: #c00; }
.place-lodging-body { flex: 1; }
.place-lodging-name { font-weight: 600; }
.place-lodging-dates {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-block-start: var(--s-3);
}
.place-lodging-date-block {
    display: flex;
    flex-direction: column;
}
.place-lodging-date-label {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
}
.place-lodging-date-val {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--accent-hi);
    font-variant-numeric: tabular-nums;
}
.place-lodging-date-sep {
    color: var(--fg-muted);
    font-size: 0.9em;
    margin-block-start: 0.9em;
}
.place-lodging-detail {
    font-size: 0.85em;
    color: var(--fg-muted);
    margin-block-start: var(--s-4);
}
.place-lodging-gap-warn {
    font-size: 0.85em;
    color: var(--danger, #c44);
    border-left: 2px solid var(--danger, #c44);
    padding: var(--s-4) var(--s-2);
    margin-block-start: var(--s-2);
}
.lodging-dup-warn {
    font-size: 0.85em;
    color: var(--danger, #c44);
    border-left: 2px solid var(--danger, #c44);
    padding: var(--s-4) var(--s-2);
    margin-block-end: var(--s-2);
}
/* ── sp-panel summary badge ── */
.sp-panel-badge {
    display: inline-block;
    font-size: 1em;
    font-weight: 700;
    padding: 0.15em 0.5em;
    border-radius: 0.3em;
    margin-inline-start: auto;
    margin-inline-end: 0.5em;
    flex-shrink: 0;
}
.sp-panel-badge--warn {
    background: #b83232;
    color: #fff;
    border: 1px solid #a02828;
}
.sp-panel-badge--ok {
    background: #217a3c;
    color: #fff;
    border: 1px solid #185e2e;
}

/* ── arrival info row ── */
.arrival-label-row {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin-block-end: var(--s-2);
}
.arrival-label {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
    flex-shrink: 0;
}
.arrival-current {
    color: var(--accent-hi);
    font-size: 0.95em;
    font-variant-numeric: tabular-nums;
}
.arrival-unset {
    font-size: 0.85em;
    color: var(--danger, #c44);
    font-style: italic;
}
.arrival-hint {
    font-size: 0.8em;
    color: var(--fg-muted);
    margin-block: var(--s-3) var(--s-2);
}

.arrival-date-picker { margin-block-end: var(--s-1); }
.arrival-date-label {
    display: block;
    font-size: 0.85em;
    color: var(--fg-muted);
    margin-block-end: var(--s-3);
}
.arrival-date-btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}
.arrival-date-btns .date-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    font-size: 0.8em;
    padding: var(--s-3) var(--s-2);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--s-2);
    color: var(--fg);
    cursor: pointer;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.arrival-date-btns .date-btn:hover {
    border-color: var(--accent-hi);
    background: var(--accent-hi);
}
.arrival-date-btns .date-btn--sel {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}
.date-btn-dow {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.date-btn-date {
    font-size: 1em;
}
.lodging-warn-note {
    font-size: 0.85em;
    color: var(--danger, #c44);
    border-left: 2px solid var(--danger, #c44);
    padding: var(--s-4) var(--s-2);
}
.passport-fields-top {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.passport-fields {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.passport-fields .passport-value {
    white-space: normal;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.passport-field-row {
    display: flex;
    gap: var(--s-1);
    flex-shrink: 0;
    border-bottom: 1px solid #d4c8b0;
    padding-bottom: 2px;
}
.passport-field-row .passport-field {
    flex: 1;
    min-width: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.passport-field {
    border-bottom: 1px solid #d4c8b0;
    padding-bottom: 2px;
    flex-shrink: 0;
}
.passport-field:last-child { border-bottom: none; }
.passport-label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.48em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a7455;
    line-height: 1;
    margin-bottom: 1px;
}
.passport-none {
    opacity: 0.35;
    font-style: italic;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 0.65em;
}

.passport-value {
    display: block;
    min-height: 1em;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75em;
    font-weight: 500;
    color: #1a1209;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Machine-readable zone — bleeds to page edges */
.passport-mrz {
    margin-top: auto;
    margin-left: calc(-1 * var(--s-1));
    margin-right: calc(-1 * var(--s-1));
    border-top: 1px solid #c8b89a;
    padding: 3px var(--s-1) 2px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.45em;
    letter-spacing: 0.04em;
    color: #8a7455;
    opacity: 0.65;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.5;
    flex-shrink: 0;
}
/* "see attached" italic note on page 1 when note is truncated */
.passport-see-attached {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-style: italic;
    font-size: 0.6em;
    color: #8a7455;
    opacity: 0.8;
    margin-top: 1px;
}
/* Notes page — full note text wraps freely */
.passport-body-notes {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.passport-value-notes {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    font-size: 0.7em;
    line-height: 1.5;
    overflow-wrap: break-word;
}
/* Stamp pages — decorative lined interior */
.passport-stamp-area {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    padding: var(--s-2) 0;
    min-height: 0;
}
.passport-stamp-slot {
    border: 1px dashed #c8b89a;
    border-radius: 2px;
    background: rgba(200, 184, 154, 0.08);
    position: relative;
    opacity: 0.55;
}
.passport-stamp-slot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(139, 115, 78, 0.18);
    border-radius: 1px;
}
.passport-stamp-slot.passport-stamp-filled {
    border: none;
    background: transparent;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.passport-stamp-slot.passport-stamp-filled::after {
    display: none;
}
.passport-stamp-svg-wrap {
    flex: 1;
    min-height: 0;
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.passport-stamp-svg-wrap svg.stamp-svg {
    inline-size: 100%;
    block-size: 100%;
    max-block-size: 100%;
}
.passport-stamp-date {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55em;
    letter-spacing: 0.12em;
    color: rgba(60, 40, 20, 0.7);
    text-align: center;
    line-height: 1;
    padding-block-end: 2px;
}
/* Navigation bar — sits between the page and actions, inside cover */
.passport-nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-1);
    padding: 2px var(--s-1);
}
.passport-page-indicator {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55em;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.1em;
}
.passport-next-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: rgba(255,255,255,0.6);
    width: 1.4em;
    height: 1.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.passport-next-btn:hover {
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.12);
}
.passport-next-btn svg {
    width: 100%;
    height: 100%;
}
/* Actions zone — sits outside the page, inside the cover */
.passport-actions {
    flex-shrink: 0;
    padding: 2px var(--s-2);
    font-size: 0.82em;
    color: rgba(255,255,255,0.82);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-1);
}
.passport-actions strong,
.passport-actions em,
.passport-actions small,
.passport-actions label { color: inherit; }
.passport-actions a { color: rgba(255,255,255,0.85); text-decoration: none; border-radius: 3px; transition: color 0.15s ease, background-color 0.15s ease; }
.passport-actions a:hover { color: #fff; background: rgba(255,255,255,0.14); }
.passport-actions button,
.passport-actions select,
.passport-actions input[type="text"] {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
}

.destination-stop-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-bright);
    text-align: center;
    padding-block: var(--s-2);
}

.passport-with-note {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 18rem;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
.passport-with-note .place-brochure {
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    flex-shrink: 0;
}
.passport-outside-note {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7em;
    color: var(--fg-mid);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-1);
    border: none;
    border-top: 2px solid var(--passport-color, var(--accent));
    background: var(--bg-deep);
}
.passport-outside-note small,
.passport-outside-note em {
    font-family: inherit;
    font-size: 1em;
    color: var(--fg-mid);
}
.passport-outside-note strong {
    color: var(--fg-bright);
}
.passport-outside-note a {
    color: var(--fg-mid);
    text-decoration: none;
    letter-spacing: 0.04em;
}
.passport-outside-note a:hover {
    color: var(--fg-bright);
}
.passport-ctrl-btn {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9em;
    padding: 2px var(--s0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg-mid);
    cursor: pointer;
    letter-spacing: 0.04em;
    text-decoration: none;
}
.passport-ctrl-btn:hover {
    border-color: var(--accent);
    color: var(--fg-bright);
}
.passport-outside-note button,
.passport-outside-note input[type="submit"] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9em;
    padding: 2px var(--s0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--fg-mid);
    cursor: pointer;
    letter-spacing: 0.04em;
}
.passport-outside-note button:hover,
.passport-outside-note input[type="submit"]:hover {
    border-color: var(--accent);
    color: var(--fg-bright);
}
.passport-outside-note select,
.passport-outside-note input[type="text"],
.passport-outside-note textarea {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9em;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg);
    padding: 2px var(--s-1);
}
.passport-outside-note label {
    display: block;
    font-size: 0.85em;
    color: var(--fg-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.passport-outside-note cluster-l {
    --cluster-gap: var(--s-1);
}
.passport-outside-note-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-1);
    padding-inline-end: var(--s-1);
}

/* Force places grid to 18rem columns matching card width */
#pane-places grid-l {
    grid-template-columns: repeat(auto-fill, 18rem);
    justify-content: start;
}

.add-place-cell {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-height: 8rem;
    width: fit-content;
    padding: var(--s0);
    border: 2px dashed var(--border);
    border-radius: 4px;
    background: transparent;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    margin-block-start: var(--s1);
}
.add-place-cell #toggle-add-place {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9em;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg-mid);
    cursor: pointer;
    padding: var(--s-1) var(--s0);
    letter-spacing: 0.04em;
}
.add-place-cell #toggle-add-place:hover {
    border-color: var(--accent);
    color: var(--fg-bright);
}

.add-person-cell {
    display: flex;
    flex-direction: column;
    aspect-ratio: 88 / 125;
    max-width: 18rem;
    padding: var(--s0);
    border: 2px dashed var(--border);
    border-radius: 3px;
    background: transparent;
    box-sizing: border-box;
    overflow: auto;
}

/* ── Note Card (spiral notebook) ──────────────────────────────────────────── */

.note-card {
    --note-line:   #c2d8ec;
    --note-margin: rgba(210, 75, 75, 0.32);
    --note-paper:  #f3f8ff;
    --note-ink:    #2c3a50;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 17rem;
    height: 22rem;
    border-radius: 0px 0px 0px 0px;
    box-shadow: 2px 4px 18px rgba(0,0,0,0.26), -1px 0 0 #aabccc;
    overflow: hidden;
    background: var(--note-paper);
}

/* Note card body: ruled lines + red margin */
.note-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0.25rem 0.6rem 0.25rem 1rem;
    background-color: var(--note-paper);
    background-image:
        linear-gradient(90deg,
            transparent .9rem,
            var(--note-margin) .9rem,
            var(--note-margin) calc(.9rem + 1px),
            transparent calc(.9rem + 1px)
        ),
        repeating-linear-gradient(
            transparent 0px,
            transparent calc(1.1rem - 1px),
            var(--note-line) calc(1.1rem - 1px),
            var(--note-line) 1.1rem
        );
    background-attachment: local;
    line-height: 1.1rem;
    cursor: pointer;
}
.note-card:hover .note-card-body { opacity: 0.88; }

.note-card-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68em;
    font-weight: 700;
    color: var(--note-ink);
    line-height: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 2px solid var(--note-line);
    flex-shrink: 0;
}

.note-card-content {
    font-size: 0.63em;
    color: var(--note-ink);
    line-height: 1.1rem;
    overflow: hidden;
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* Scale markdown elements to fit the small notebook card */
.note-card-content p { margin: 0; }
.note-card-content h1, .note-card-content h2, .note-card-content h3 {
    font-size: inherit;
    font-weight: 700;
    margin: 0;
    border-bottom: 1px solid var(--note-line);
    line-height: 1.1rem;
}
.note-card-content ul, .note-card-content ol {
    padding-inline-start: 0.9em;
    margin: 0;
}
.note-card-content li { line-height: 1.1rem; }
.note-card-content code { font-family: 'IBM Plex Mono', monospace; font-size: 0.9em; }
.note-card-content a {
    color: var(--link);
    text-decoration: none;
    padding: 0 0.3em;
    background: rgba(var(--link-rgb), 0.08);
    border: 1px solid rgba(var(--link-rgb), 0.30);
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.note-card-content a:hover {
    color: var(--link-hi);
    background: rgba(var(--link-rgb), 0.18);
    border-color: rgba(var(--link-rgb), 0.55);
}

.note-card-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.48em;
    color: rgba(44, 58, 80, 0.45);
    line-height: 1.1rem;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Per-note content pagination nav */
.note-card-nav {
    display: none; /* shown by JS when content overflows */
    align-items: center;
    gap: var(--s-2);
    padding: 2px var(--s-1) 2px 2.2rem;
    background: #dce8f4;
    border-top: 1px solid #b8ccda;
    flex-shrink: 0;
    height: 1.8rem;
    box-sizing: border-box;
}
.note-card-nav.visible { display: flex; }
.note-card-page-indicator {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.52em;
    color: #5a7890;
    letter-spacing: 0.08em;
    flex: 1;
    text-align: center;
}
.note-card-nav-btn {
    background: none;
    border: none;
    padding: 1px;
    cursor: pointer;
    color: #6a8aaa;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.note-card-nav-btn svg { width: 0.9rem; height: 0.9rem; }
.note-card-nav-btn:hover { color: #2a4060; }

.note-card-spiral {
}

/* Add-note cell: blank notebook page in the grid */
.add-note-cell {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    width: 17rem;
    min-height: 22rem;
    border-radius: 2px 5px 5px 2px;
    box-shadow: 2px 4px 14px rgba(0,0,0,0.10), -1px 0 0 #aabccc;
    box-sizing: border-box;
    padding: var(--s0) var(--s-1) var(--s0) 2.2rem;
    background-color: #f3f8ff;
    background-image:
        linear-gradient(
            90deg,
            var(--note-paper, #f3f8ff) 10px, transparent 10px,
            #4a6070 13px, transparent 13px,
            #c0d4e2 18px, transparent 18px,
            transparent 1.95rem,
            rgba(210,75,75,0.22) 1.95rem,
            rgba(210,75,75,0.22) calc(1.95rem + 1px),
            transparent calc(1.95rem + 1px)
        ),
        repeating-linear-gradient(
            transparent 0px,
            transparent calc(1.1rem - 1px),
            #c2d8ec calc(1.1rem - 1px),
            #c2d8ec 1.1rem
        );
    border: none;
}

.add-note-cell #toggle-add-resource,
.add-note-cell #quick-new-note-btn {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78em;
    background: transparent;
    border: 1px dashed #8aaac4;
    border-radius: var(--radius);
    color: #5a7890;
    cursor: pointer;
    padding: var(--s-2) var(--s0);
    letter-spacing: 0.04em;
    align-self: flex-start;
    line-height: 1.1rem;
}
.add-note-cell #toggle-add-resource:hover,
.add-note-cell #quick-new-note-btn:hover {
    border-color: #3a6080;
    color: #2a4060;
}
.add-note-cell #quick-new-note-btn {
    border-style: solid;
    border-color: #3a6080;
    color: #2a4060;
    font-weight: 600;
}

a.action-link-btn {
  display: inline-block;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--s-2) var(--s0);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-mid);
  text-decoration: none;
  transition: all 0.15s;
}
a.action-link-btn:hover { border-color: var(--accent); color: var(--fg-bright); }

/* ── Profile page ─────────────────────────────────────────────────────────── */

.profile-section {
    padding: var(--s-1);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.profile-section h2 {
    margin-block-end: var(--s-2);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
}

.profile-section label {
    font-size: 0.8rem;
}

.profile-section input[type="text"],
.profile-section input[type="email"],
.profile-section input[type="password"],
.profile-section select,
.profile-section textarea {
    font-size: 0.85rem;
    padding: 0.25em var(--s-2);
}

.profile-section .input-with-prefix .prefix {
    font-size: 0.85rem;
    padding: 0.25em var(--s-2);
}

.profile-section button[type="submit"],
.profile-section input[type="submit"] {
    font-size: 0.8rem;
    padding: 0.3em var(--s0);
}

.profile-section fieldset {
    padding: var(--s-2) var(--s-1);
}

.profile-section cluster-l {
    gap: var(--s-2);
}

.profile-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s1);
    align-items: start;
}

.profile-left {
    display: block;
}

.profile-right {
    align-self: start;
}

.passport-travel-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s0);
    align-items: start;
}

.passport-col {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.travel-col h2 {
    margin-block-end: var(--s-2);
}

.profile-divider {
    padding-block-start: var(--s-2);
    border-block-start: 1px solid var(--border);
}

.profile-current-pw-block {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius);
    padding: var(--s-1);
}

.profile-current-pw-label {
    font-weight: 700;
    color: var(--accent-hi);
    font-size: 0.9rem;
    margin-block-end: var(--s-3);
}

.profile-current-pw-hint {
    font-size: 0.78rem;
    color: var(--accent-hi);
    margin-block-end: var(--s-2);
    opacity: 0.85;
}

.profile-divider h2 {
    margin-block-end: var(--s-2);
}

.profile-current {
    margin: 0;
    font-size: 0.8rem;
    color: var(--fg-muted);
}

.profile-section p {
    margin: 0;
}

@media (max-width: 52rem) {
    .profile-main-grid {
        grid-template-columns: 1fr;
    }
    .passport-travel-grid {
        grid-template-columns: 1fr;
    }
}

.profile-section legend {
    font-size: 0.75rem;
    padding-inline: var(--s-3);
}

.profile-section .chip {
    padding: 0.15em 0.45em;
    font-size: 0.75rem;
}

.profile-section stack-l,
.profile-section p {
    font-size: 0.85rem;
}

.split-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
}

.sublabel {
    display: block;
    font-size: 0.72rem;
    color: var(--fg-muted);
    margin-block-end: 0.15em;
}

button.link-btn {
    background: none;
    border: none;
    padding: 0 0.2em;
    cursor: pointer;
    color: var(--link);
    font: inherit;
    font-size: 0.9rem;
    border-radius: 3px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
button.link-btn:hover { color: var(--link-hi); background: rgba(var(--link-rgb), 0.14); }

/* ═══════════════════════════════════════════════════════════════════════════
   Trip Ticket Card
   ═══════════════════════════════════════════════════════════════════════════ */

.ticket-card {
    --ticket-color: #c8962a;
    --ticket-bg:    #f5f0e8;
    --ticket-ink:   #1a1209;
    --ticket-muted: rgba(26,18,9,0.45);
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.18),
        0 6px 22px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 22rem;
    height: 23rem;       /* fixed height keeps all pages the same size */
    background: var(--ticket-bg);
    color: var(--ticket-ink);
    position: relative;
}

/* Urgency colour overrides */
.ticket-card[data-urgency="now"]  { --ticket-color: #1faa57; }
.ticket-card[data-urgency="week"] { --ticket-color: #d0720e; }
.ticket-card[data-urgency="past"] { --ticket-color: #7a8a95; --ticket-bg: #eeeae2; }

/* ── Header strip ── */
.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
    background: #1a2c3a;
    border-radius: 5px 5px 0 0;
    flex-shrink: 0;
}
.ticket-header-brand {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.5em;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
}
.ticket-header-type {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.48em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ticket-color);
}

/* ── Pages container ── */
.ticket-pages {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 0 0 5px 5px;
}
.ticket-page {
    grid-row: 1;
    grid-column: 1;
    display: none;
    flex-direction: column;
}
.ticket-page.active { display: flex; }

/* ── Main body ── */
.ticket-body {
    padding: var(--s-1) var(--s0) 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: 1;
    min-height: 0;
    justify-content: space-between;
}

/* Trip name — Bangers for that bold travel poster feel */
/* font-size is set inline by the template based on name length */
.ticket-trip-name {
    font-family: 'Bangers', cursive;
    font-size: 2.1em;   /* fallback; template overrides via style= */
    letter-spacing: 0.06em;
    line-height: 1.0;
    color: var(--ticket-ink);
    text-shadow:
        1px 1px 0 rgba(0,0,0,0.12),
        2px 2px 0 rgba(0,0,0,0.07);
    overflow-wrap: break-word;  /* break mid-word only as last resort, not aggressively */
    padding-inline-end: 0.15em;
}

/* ── Route stops ── */
.ticket-route-wrap {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-bottom: var(--s-2);
    border-bottom: 1px dashed rgba(26,18,9,0.18);
}
.ticket-route {
    display: flex;
    align-items: flex-start;
    padding-top: 2px;  /* room for dot box-shadow ring */
    min-width: 0;
    width: 100%;
}
.ticket-no-stops {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65em;
    color: var(--ticket-muted);
    font-style: italic;
    letter-spacing: 0.04em;
    width: 100%;
}
.ticket-stop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 1;
    min-width: 0;
}
.ticket-stop-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ticket-color);
    border: 1.5px solid var(--ticket-bg);
    box-shadow: 0 0 0 1.5px var(--ticket-color);
    flex-shrink: 0;
}
.ticket-stop:first-child .ticket-stop-dot,
.ticket-stop:last-child  .ticket-stop-dot {
    background: var(--ticket-ink);
    box-shadow: 0 0 0 1.5px var(--ticket-ink);
}
.ticket-stop-code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65em;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ticket-ink);
    line-height: 1;
}
.ticket-stop-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.42em;
    color: var(--ticket-muted);
    white-space: nowrap;
    width: 100%;
    max-width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.2;
}
.ticket-route-connector {
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(
        90deg,
        var(--ticket-color) 0px, var(--ticket-color) 3px,
        transparent 3px, transparent 7px
    );
    margin-top: 4px;   /* align with dot center (9px / 2 ≈ 4.5px) */
    min-width: 6px;
    opacity: 0.65;
}
.ticket-route-empty {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55em;
    letter-spacing: 0.1em;
    color: var(--ticket-muted);
}
.ticket-route-empty-line {
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(
        90deg,
        var(--ticket-muted) 0px, var(--ticket-muted) 3px,
        transparent 3px, transparent 7px
    );
    opacity: 0.4;
}

/* ── Field chips ── */
.ticket-chips-block {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding-bottom: var(--s-1);
}
.ticket-chips {
    display: flex;
    gap: 0;
}
.ticket-chips-row2 {
    padding-top: var(--s-1);
    border-top: 1px dashed rgba(26,18,9,0.18);
}
.ticket-chip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    padding-right: var(--s-1);
}
.ticket-chip + .ticket-chip {
    border-left: 1px solid rgba(26,18,9,0.14);
    padding-left: var(--s-1);
    padding-right: 0;
}
.ticket-chip-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.47em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ticket-muted);
    line-height: 1;
}
.ticket-chip-weekday {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.52em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ticket-color);
    line-height: 1.3;
    display: block;
    min-height: 0.8em; /* reserve space while JS populates */
}
.ticket-chip-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9em;
    font-weight: 700;
    color: var(--ticket-ink);
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticket-chip-value.empty { opacity: 0.28; }

/* ── Perforated tear ── */
.ticket-tear {
    position: relative;
    flex-shrink: 0;
    height: 1px;
    border: none;
    margin: 0;
    background: repeating-linear-gradient(
        90deg,
        rgba(26,18,9,0.22) 0px, rgba(26,18,9,0.22) 4px,
        transparent 4px, transparent 8px
    );
    z-index: 1;
}
/* Semicircle notches punched into the sides */
.ticket-tear::before,
.ticket-tear::after {
    content: '';
    position: absolute;
    top: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg);
}
.ticket-tear::before { left: -10px; }
.ticket-tear::after  { right: -10px; }

/* ── Stub (below the tear) ── */
.ticket-stub {
    padding: var(--s-2) var(--s0) var(--s-1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
    background: #ede8de;
    border-radius: 0 0 5px 5px;
}
.ticket-card[data-urgency="past"] .ticket-stub { background: #e5e1d9; }

/* Decorative barcode strip */
.ticket-barcode {
    width: 100%;
    height: 2rem;
    background: repeating-linear-gradient(
        90deg,
        rgba(26,18,9,0.72) 0px,  rgba(26,18,9,0.72) 2px,
        transparent          2px,  transparent          4px,
        rgba(26,18,9,0.72) 4px,  rgba(26,18,9,0.72) 5px,
        transparent          5px,  transparent          8px,
        rgba(26,18,9,0.72) 8px,  rgba(26,18,9,0.72) 11px,
        transparent          11px, transparent          14px,
        rgba(26,18,9,0.72) 14px, rgba(26,18,9,0.72) 16px,
        transparent          16px, transparent          20px,
        rgba(26,18,9,0.72) 20px, rgba(26,18,9,0.72) 21px,
        transparent          21px, transparent          24px,
        rgba(26,18,9,0.72) 24px, rgba(26,18,9,0.72) 26px,
        transparent          26px, transparent          30px,
        rgba(26,18,9,0.72) 30px, rgba(26,18,9,0.72) 33px,
        transparent          33px, transparent          37px,
        rgba(26,18,9,0.72) 37px, rgba(26,18,9,0.72) 38px,
        transparent          38px, transparent          41px,
        rgba(26,18,9,0.72) 41px, rgba(26,18,9,0.72) 44px,
        transparent          44px, transparent          49px,
        rgba(26,18,9,0.72) 49px, rgba(26,18,9,0.72) 50px,
        transparent          50px, transparent          55px,
        rgba(26,18,9,0.72) 55px, rgba(26,18,9,0.72) 58px,
        transparent          58px, transparent          62px,
        rgba(26,18,9,0.72) 62px, rgba(26,18,9,0.72) 63px,
        transparent          63px, transparent          66px
    );
    border-radius: 1px;
    opacity: 0.22;
}

/* Big countdown */
.ticket-countdown {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.55em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ticket-color);
    text-align: center;
    line-height: 1;
}

/* ── Page 2: description ── */
.ticket-detail-body {
    padding: var(--s-1) var(--s0);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.ticket-detail-desc {
    font-size: 0.82em;
    color: rgba(26,18,9,0.7);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
.ticket-detail-empty {
    font-style: italic;
    opacity: 0.35;
    font-size: 0.8em;
}
.ticket-detail-meta {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    border-top: 1px solid rgba(26,18,9,0.12);
    padding-top: var(--s-2);
}
.ticket-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.ticket-detail-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.48em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ticket-muted);
}
.ticket-detail-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--ticket-ink);
}

/* ── Nav bar ── */
.ticket-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-1);
    padding: 3px 10px;
    background: #1a2c3a;
    border-radius: 0 0 5px 5px;
    flex-shrink: 0;
}
.ticket-nav-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
}
.ticket-nav-btn svg { width: 1.1rem; height: 1.1rem; }
.ticket-nav-btn:hover { color: #fff; }
.ticket-page-indicator {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.52em;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.1em;
}

/* ── Ticket card: people list (page 3) ── */
.ticket-people-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.ticket-person-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--s-3) 0;
    border-bottom: 1px solid rgba(26,18,9,0.1);
    gap: var(--s-1);
}
.ticket-person-row:last-child { border-bottom: none; }
.ticket-person-name {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--ticket-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticket-person-role {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.48em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ticket-muted);
    flex-shrink: 0;
}

/* ── Trip Companions Panel ─────────────────────────────────────────────────── */
.trip-companions-panel {
    padding: var(--s-1);
    background: var(--panel);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.trip-companions-panel h3 {
    margin: 0 0 var(--s-1);
    font-size: var(--s-1);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.trip-companions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--s-1);
}
.trip-companions-table th {
    text-align: left;
    color: var(--fg-muted);
    font-weight: 600;
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--border);
}
.trip-companions-table td {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.trip-companions-table tr:last-child td { border-bottom: none; }
.trip-count {
    font-variant-numeric: tabular-nums;
    color: var(--fg-muted);
    padding-inline: var(--s-2);
    white-space: nowrap;
}
.trip-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}
.trip-chip {
    display: inline-block;
    padding: 0.1em 0.35em;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--accent);
    text-decoration: none;
    font-size: var(--s-1);
    white-space: nowrap;
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trip-chip:hover { background: var(--accent); color: var(--bg-deep); }
.muted-note { color: var(--fg-muted); font-size: var(--s-1); }

/* ── Home dashboard ── */
.home-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.home-panel-row { display: flex; align-items: stretch; }
.home-panel-row > :last-child { flex: 1; padding: var(--s-1) var(--s0); min-width: 0; }
.home-panel-empty { color: var(--fg-muted); font-size: var(--s0); margin: 0; }
.home-panel-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  width: 7rem;
  min-width: 7rem;
  padding: var(--s-1) var(--s-1);
  background: var(--bg-deep);
  border-right: 3px solid var(--accent);
  color: var(--fg);
  text-decoration: none !important;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.home-panel-btn-count {
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--s2);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-hi);
}
.home-panel-btn-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--s-1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.home-panel-btn:hover { background: var(--accent); border-color: var(--accent-hi); text-decoration: none !important; }
.home-panel-btn:hover .home-panel-btn-count { color: var(--bg-deep); }
.home-panel-btn:hover .home-panel-btn-label { color: var(--bg-deep); }
.home-quick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.home-quick-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-1);
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.home-quick-list li:last-child { border-bottom: none; }
.home-quick-list li:hover { background: var(--panel2); }
.home-quick-link {
  font-size: var(--s-1);
  color: var(--fg);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-quick-link:hover { color: var(--accent-hi); text-decoration: none; }
.home-quick-list li small { font-size: var(--s-1); color: var(--fg-muted); white-space: nowrap; flex-shrink: 0; }

/* ── Conversations panel: unread bubbles ── */
.home-panel-btn-static {
  cursor: default;
  pointer-events: none;
}
.convo-count-alert {
  color: #e05545 !important;
}
.convo-panel.has-unread {
  border-color: rgba(224, 85, 69, 0.55);
  box-shadow: 0 0 0 1px rgba(224, 85, 69, 0.25);
}
.convo-list li { gap: var(--s-2); }
.convo-pip {
  flex-shrink: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--s-1);
  color: var(--fg-muted);
  padding: 0.1em 0.55em;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--border);
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.convo-pip.has-unread {
  background: #e05545;
  border-color: #e05545;
  color: #fff;
  font-weight: 600;
}
.convo-pip.has-unread .convo-unread { color: #fff; }
.convo-pip.has-unread .convo-sep    { color: rgba(255, 255, 255, 0.55); margin: 0 0.1em; }
.convo-pip.has-unread .convo-total  { color: rgba(255, 255, 255, 0.75); font-weight: 500; }
.home-quick-list li:has(.convo-pip.has-unread) .home-quick-link {
  color: var(--fg-bright);
  font-weight: 500;
}

/* ── Today's itinerary dashboard section ── */
.today-itin {
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
}
.today-itin-banner {
  background: var(--accent);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--s-1) var(--s0);
  gap: var(--s0);
  flex-wrap: wrap;
}
.today-itin-banner-left {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.today-itin-banner-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15em;
}
.today-itin-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.today-itin-daycount {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.85;
}
.today-itin-location {
  font-size: 0.85rem;
  opacity: 0.9;
}
.today-itin-date {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  opacity: 0.8;
  white-space: nowrap;
}
.today-itin-trip-row {
  display: flex;
  justify-content: center;
  padding: var(--s-1) var(--s0);
  border-block-end: 1px solid var(--border);
}
.today-itin-trip-link {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-hi);
  text-decoration: none;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.3em 1.2em;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.today-itin-trip-link:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  text-decoration: none;
}
.today-itin-arrow { display: inline-block; transition: transform 0.15s; }
.today-itin-trip-link:hover .today-itin-arrow { transform: translateX(3px); }
.today-itin-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 30rem) {
  .today-itin-cols { grid-template-columns: 1fr; }
}
.today-itin-col {
  padding: var(--s-1) var(--s0) var(--s0);
}
.today-itin-col-tomorrow {
  border-inline-start: 1px solid var(--border);
  opacity: 0.7;
}
.today-itin-col-heading {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-hi);
  margin-block-end: var(--s-2);
}
.today-itin-stop {
  padding-block-start: var(--s-2);
  border-block-start: 1px solid var(--border);
}
.today-itin-stop:first-of-type { border-block-start: none; padding-block-start: 0; }
.today-itin-place   { font-weight: 600; font-size: var(--s0); color: var(--fg-bright); }
.today-itin-lodging { font-size: var(--s0); color: var(--fg-muted); }
.today-itin-notes   { font-size: var(--s0); }
.today-itin-notes > * { margin-block: 0.2em; }
.today-itin-empty   { font-size: var(--s0); padding-block-start: var(--s-2); }

.paper {
  width: 80vw;
  height: 200px;
  margin: 2em auto;
  background: #fff;
  box-shadow: 4px 4px 0 #00486B;
  background-image:
    linear-gradient(
      90deg,
      #fff 12px, 0,
      #00486B 15px, 0,
      #1373A9 20px, 0,
      #fff 100%
    ),
    radial-gradient(
      circle closest-side,
      rgba(255,255,255,0) 88%,
      #fff 100%
    ),
    radial-gradient(
      circle at 22px 8px,
      #1373A9 40%,
      #00486B 40%,
      #00486B 100%
    );
  background-size: 32px 8px, 32px 16px, 32px 16px;
  background-repeat: space no-repeat;
  background-position: center top, center 6px, center 6px;

  &--alt {
    background-image: linear-gradient(90deg, #fff 12px, 0, #00486B 15px, 0 ,#1373A9 20px, 0,#fff 100%),radial-gradient(circle closest-side,rgba(255,255,255,0) 88%,#fff 100%),radial-gradient(circle at 22px 8px,#1373A9 40%,#00486B 40%,#00486B 100%);
    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 21'%3E%3Cpath d='M20 0h-7v6.9a7.5 7.5 0 107 0V0z' fill='%231373A9'/%3E%3Cpath d='M13 0h3v6.9a7.5 7.5 0 002 14 7.5 7.5 0 01-9-7.4c0-2.9 1.6-5.4 4-6.6V0z' fill='%2300486B'/%3E%3C/svg%3E");
    background-size: 2em 1.3125em;
  }
}

/* ── Figure It Out: collapsible instructions ── */
.fio-howto {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-1);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.fio-howto summary {
  font-weight: 600;
  color: var(--accent-hi);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.fio-howto summary::-webkit-details-marker { display: none; }
.fio-howto summary::after {
  content: '▶';
  font-size: 0.65rem;
  color: var(--fg-muted);
  transition: transform 0.15s;
  margin-inline-start: auto;
}
.fio-howto[open] summary::after { transform: rotate(90deg); }

/* ── Mobile overrides — must live AFTER all base styles to win the cascade ── */
@media (max-width: 600px) {
  /* Tab bar: single scrollable row, never wraps */
  nav[role="tablist"] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* fade + arrow hint that more tabs are off-screen to the right */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent 100%);
  }
  nav[role="tablist"]::-webkit-scrollbar { display: none; }
  nav[role="tablist"] button {
    flex-shrink: 0;
    padding-inline: var(--s-1);
    font-size: 0.8rem;
  }
  /* Wrapper needed for the › arrow — added via JS below, but style it here */
  .tablist-wrapper {
    position: relative;
  }
  .tablist-scroll-btn {
    position: absolute;
    inset-block: 4px;
    inline-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--panel);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
  }
  .tablist-scroll-btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
  }
  .tablist-scroll-btn:hover { background: var(--panel2); border-color: var(--accent-hi); }
  .tablist-scroll-btn:hover::after { border-left-color: #fff; border-right-color: #fff; }

  .tablist-scroll-btn.right {
    inset-inline-end: 4px;
    box-shadow: -4px 0 8px var(--bg);
  }
  .tablist-scroll-btn.right::after {
    border-left: 14px solid var(--accent-hi);
  }

  .tablist-scroll-btn.left {
    inset-inline-start: 4px;
    box-shadow: 4px 0 8px var(--bg);
  }
  .tablist-scroll-btn.left::after {
    border-right: 14px solid var(--accent-hi);
  }

  /* hide each button when already at that edge */
  .tablist-wrapper.at-start .tablist-scroll-btn.left  { display: none; }
  .tablist-wrapper.at-end   .tablist-scroll-btn.right { display: none; }
  .tablist-wrapper.at-end nav[role="tablist"] {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* ── Trip tab panes: hide redundant h2 headings (tab already labels the section) ── */
  #pane-people   > stack-l > h2,
  #pane-places   > stack-l > h2,
  #pane-resources > stack-l > h2 {
    display: none;
  }

  /* ── My Trips page: compact section labels ── */
  .trips-section-header h2 { font-size: 0.78rem; }
}

/* ── Dashboard trips calendar ─────────────────────────────────────────────── */
.trips-cal-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  align-items: flex-start;
  margin-block-start: var(--s1);
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--s1);
}

.trips-cal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0);
  flex: 1 1 auto;
}

.cal-month {
  min-width: 13rem;
}

.cal-caption {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mid);
  margin: 0 0 var(--s-2);
  text-align: center;
}

/* 7-column grid scoped to dashboard calendar only */
.trips-cal .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--fg-muted);
  border: 1px solid var(--fg-muted);
  border-radius: 4px;
  overflow: visible;
  list-style: none;
  padding: 0;
  margin: 0;
}

.trips-cal .cal-dh {
  background: var(--panel2);
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: center;
  padding: 2px 0;
}

.trips-cal .cal-day {
  background: var(--panel);
  min-block-size: 0;
  display: block;
  font-size: 0.72rem;
  text-align: center;
  padding: 3px 2px;
  color: var(--fg);
  line-height: 1.4;
  cursor: default;
  transition: background 0.1s;
}

.trips-cal .cal-day[data-tip] { position: relative; cursor: default; }
.trips-cal .cal-day[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  background: var(--panel2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.trips-cal .cal-day.cal-today {
  background: var(--accent-hi);
  color: #fff;
  font-weight: 800;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}

/* ── Trip legend ── */
.cal-trip-list {
  min-width: 10rem;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.cal-trip-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-1);
}

.cal-trip-swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
  border: 1px solid var(--fg-muted);
  flex-shrink: 0;
}

.cal-trip-name {
  font-size: 1rem;
  color: var(--fg);
  font-weight: 500;
}

/* indent dd to align with name text (swatch width + gap) */
.cal-trip-dates {
  margin-inline-start: calc(0.75rem + var(--s-2));
  margin-block-end: var(--s-1);
  font-size: 0.72rem;
  color: var(--fg-muted);
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
}