/* ── 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;
}
.emoji-picker {
  position: fixed;
  z-index: 300;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: var(--s-2);
}
.emoji-picker button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 2px;
  font-size: 1.2rem;
  text-transform: none;
  letter-spacing: 0;
}

/* ── 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: #3a6090; }
.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(--accent-hi); }


/* ── Chat messages ── */
article.msg {
  padding: var(--s-2) var(--s-1);
}
article.msg p {
  margin: 0;
  line-height: 1.4;
}
article.msg strong {
  font-size: 0.8rem;
  color: var(--fg-mid);
  padding-block-start: 0.15em;
}

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

/* ── Tab-link (overview → places) ── */
.tab-link { cursor: pointer; color: var(--accent-hi); text-decoration: underline; }

/* ── 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; }
.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-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;
}
/* 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.75); text-decoration: underline; }
.passport-actions a:hover { color: #fff; }
.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(--note-ink); text-decoration: underline; }

.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 {
    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 {
    border-color: #3a6080;
    color: #2a4060;
}

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;
    cursor: pointer;
    color: var(--accent);
    font: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
}
button.link-btn:hover { color: var(--accent-hi); }

/* ═══════════════════════════════════════════════════════════════════════════
   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; }

/* ── 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;
}