:root {
  --bg: #f6f4ef;
  --card: #ffffff;
  --ink: #2b2b2b;
  --muted: #6b6b6b;
  --accent: #b4551f;
  --line: #d8d2c5;
  --ok: #2e7d32;
  --warn: #b26a00;
  --bad: #b3261e;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.7rem 1.2rem;
  background: #3a2f25;
  color: #f0e9dd;
}
.topbar a { color: inherit; text-decoration: none; margin-right: 1rem; }
.topbar .brand { font-weight: 700; }
.topbar-right { margin-left: auto; font-size: 0.85rem; }
.topbar-right a { margin-right: 0; opacity: 0.85; }
.view-badge {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

.login-panel { max-width: 26rem; margin: 3rem auto; }
.login-panel h1 { margin: 0 0 0.2rem; font-size: 1.3rem; }
.login-error { color: var(--bad); font-size: 0.85rem; margin: 0.5rem 0 0; }
.revoked-row { opacity: 0.5; }
.share-url { font-size: 0.78rem; word-break: break-all; }

main { max-width: 860px; margin: 0 auto; padding: 1.2rem; }

.trip-header h1 { margin-bottom: 0.2rem; }
.trip-meta { color: var(--muted); margin-top: 0; }

.segment-banner {
  margin: 1.6rem 0 0.8rem;
  padding: 0.35rem 0.8rem;
  background: #e9e2d4;
  border-left: 4px solid var(--accent);
  font-weight: 600;
  border-radius: 4px;
}

.stop-card {
  display: flex;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin: 0.4rem 0;
}
.stop-dates { min-width: 7.5rem; text-align: right; }
.date-range { font-weight: 600; display: block; }
.nights { color: var(--muted); font-size: 0.85rem; }
.stop-body h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.stop-meta { margin: 0.2rem 0; }
.stop-notes { color: var(--muted); font-size: 0.9rem; margin: 0.4rem 0 0; }

.chip {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #eee7da;
  margin-right: 0.3rem;
  text-decoration: none;
  color: var(--ink);
}
.chip-country { background: #e3ecdf; }
.chip-border { background: #f3e3e3; }
.chip-warn { background: #ffe9c7; color: var(--warn); font-weight: 600; }
.status-confirmed, .status-booked { background: #dcefdc; color: var(--ok); }
.status-unknown { background: #f0f0f0; color: var(--muted); }
.status-inquiry, .status-not_booked { background: #fdecdc; color: var(--warn); }

.leg-row {
  padding: 0.15rem 0 0.15rem 2.2rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.leg-row .leg-line { color: var(--line); margin-right: 0.4rem; }
.route-needs_drawing .leg-info, .route-check .leg-info { color: var(--warn); }
.leg-notes { display: block; padding-left: 1.6rem; font-style: italic; }

/* Birding targets, generated from the Obsidian notes. */
/* Activities, tours, flights: the things that happen at a moment rather than
   over the whole stay. Same visual weight as the birding line -- both are
   "what happens here", as opposed to the chips, which are paperwork state. */
.moment-list { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.moment {
  font-size: 0.9rem;
  line-height: 1.45;
  padding-left: 1.4rem;
  text-indent: -1.4rem;
}
.moment-mark { margin-right: 0.35rem; }
.moment-when { font-variant-numeric: tabular-nums; color: var(--muted); margin-right: 0.3rem; }
/* text-indent is inherited, and an inline-block is a block container, so the
   hanging indent above re-applies INSIDE each chip and drags its label out of
   the pill and over the text before it. Reset it wherever a chip sits on a
   hanging-indent line. */
.moment .chip, .birding-line .chip, .leg-birding .chip { text-indent: 0; }
.moment a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.moment a:hover { border-bottom-color: var(--ink); }

/* The optional link on a booking row. Sized like the .sub lines it sits under
   so an empty one reads as blank space rather than as a second field. */
.bookings-table .sub-input { font-size: 0.75rem; color: var(--muted); }
.bookings-table .starts-on { min-width: 0; font-size: 0.78rem; }

.birding-line {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  padding-left: 1.4rem;
  text-indent: -1.4rem;
}
.birding-mark { margin-right: 0.35rem; }
.leg-birding {
  display: block;
  padding-left: 1.6rem;
  font-size: 0.85rem;
}
/* Contingency route for the same day. Same blue as the map line, so the two
   views agree about what "alternate" looks like. */
.leg-alternate {
  display: block;
  padding-left: 1.6rem;
  font-size: 0.85rem;
  color: #1f6feb;
}
.alt-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 0.25rem;
}
.leg-alt-notes {
  display: block;
  padding-left: 3rem;
  font-size: 0.78rem;
  color: var(--muted);
}
/* Species names link out to eBird. There is no global anchor rule, so left
   alone these render as default blue and shout over the line they sit in. */
.birding-line a, .leg-birding a, .birding-body a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.birding-line a:hover, .leg-birding a:hover, .birding-body a:hover {
  border-bottom-color: var(--ink);
}
.birding-link {
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
}
.birding-link:hover { color: var(--ink); }

.birding-page main { max-width: 900px; }
.birding-nav {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.birding-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.6rem 0 1.2rem;
  font-size: 0.9rem;
  display: block;
  overflow-x: auto;    /* long species tables scroll themselves, not the page */
}
.birding-body th, .birding-body td {
  border-bottom: 1px solid var(--line);
  padding: 0.3rem 0.6rem;
  text-align: left;
}
.birding-body th { background: var(--card); position: sticky; top: 0; }
.birding-body td[align="right"], .birding-body th[align="right"] { text-align: right; }
.birding-body td[align="center"], .birding-body th[align="center"] { text-align: center; }
.birding-body h2 { margin-top: 1.8rem; }
.birding-body blockquote {
  margin: 1rem 0;
  padding: 0.5rem 0.9rem;
  border-left: 3px solid var(--line);
  background: var(--card);
}
.birding-body blockquote p { margin: 0.3rem 0; }
.birding-body img { max-width: 100%; height: auto; }
.birding-body hr { border: 0; border-top: 1px solid var(--line); margin: 1.6rem 0; }

/* Click-to-edit notes (admin only). These read as plain text until hovered,
   so the itinerary looks the same as it does through a share link. */
.note-field { cursor: text; border-radius: 4px; }
.note-field:hover, .note-field:focus {
  background: #f2ede2;
  outline: none;
  box-shadow: 0 0 0 0.25rem #f2ede2;
}
/* An empty note is only an affordance, so it shrinks to a marker at the end of
   the line it belongs to rather than claiming a line of its own — otherwise
   every stop and every leg adds one, and the itinerary gains 105 blank rows.
   Faint, but never hidden behind :hover: half the trip gets read on a phone. */
.note-field.note-empty {
  display: inline-block;
  font-size: 0.75rem;
  font-style: normal;
  color: var(--line);
  margin: 0;
}
.stop-card:hover .note-empty, .leg-row:hover .note-empty { color: var(--muted); }
/* While editing it needs the full width, whatever it collapsed to when empty. */
.note-field.note-editing { display: block; width: auto; }
.note-saved { background: #e8f5e9; transition: background 0.4s; }
.note-failed { background: #fdecea; }
.note-input {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.25rem 0.4rem;
  resize: vertical;
  overflow: hidden;
}

.question-list li, .decision-list li { margin: 0.5rem 0; }
.question-list .resolved { color: var(--muted); text-decoration: line-through; }
.question-list .answer { text-decoration: none; color: var(--ok); }

/* bookings + documents — denser tables want more room than the reading column */
body.wide-page main { max-width: 1240px; }
.table-scroll { overflow-x: auto; }

/* bookings + documents */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin: 1rem 0;
}
.panel h2 { margin: 0 0 0.4rem; font-size: 1rem; }
.panel-warn { border-left: 4px solid var(--warn); }
.panel ul { margin: 0.3rem 0; padding-left: 1.1rem; }
.panel li { margin: 0.25rem 0; }
.hint { color: var(--muted); font-size: 0.85rem; margin: 0.2rem 0 0.6rem; }

.bookings-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.bookings-table th {
  text-align: left;
  border-bottom: 2px solid var(--line);
  padding: 0.3rem 0.4rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--muted);
}
.bookings-table td { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.bookings-table select, .bookings-table input[type="text"], .bookings-table input:not([type]) {
  font: inherit;
  width: 100%;
  min-width: 7rem;
  padding: 0.15rem 0.2rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
}
.bookings-table select:hover, .bookings-table input:hover,
.bookings-table select:focus, .bookings-table input:focus {
  border-color: var(--line);
  background: #fff;
}
.bookings-table .sub { color: var(--muted); font-size: 0.75rem; }
.nowrap { white-space: nowrap; }
.notes-row td { color: var(--muted); font-size: 0.78rem; padding-top: 0; border-bottom: 1px solid var(--line); }
tr.status-row-confirmed td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
tr.status-row-booked td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
tr.status-row-unknown td:first-child { box-shadow: inset 3px 0 0 #ccc; }
tr.status-row-inquiry td:first-child,
tr.status-row-not_booked td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.saved { background: #e8f5e9; transition: background 0.4s; }
tr.save-failed { background: #fdecea; }

.upload-btn { cursor: pointer; font-weight: 700; color: var(--accent); padding: 0 0.2rem; }
.upload-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.upload-form input, .upload-form select, .upload-form button {
  font: inherit;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}
.upload-form button { cursor: pointer; background: var(--accent); color: #fff; border-color: var(--accent); }
.link-btn {
  border: none; background: none; color: var(--bad);
  cursor: pointer; font: inherit; padding: 0 0.2rem; text-decoration: underline;
}

.empty { color: var(--muted); }
code { background: #eee7da; padding: 0.1rem 0.3rem; border-radius: 4px; }

/* map page — full width, map fills the space left under the bar */
body.map-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.map-page main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* max-width and the inherited `margin: 0 auto` both have to go: auto side
     margins on a flex item stop it stretching to the container width. */
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0.5rem 1rem 1rem;
}
#map {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.map-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.map-legend {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.map-legend li { white-space: nowrap; }
.map-legend i {
  display: inline-block;
  width: 18px;
  height: 3px;
  vertical-align: middle;
  margin-right: 0.35rem;
}
/* dashed swatch: a repeating gradient reads as a dashed line at this size */
.map-legend i.dashed {
  background: none !important;
  background-image: repeating-linear-gradient(
    to right, #b4551f 0 6px, transparent 6px 10px
  ) !important;
}
/* Alternate swatch: fine dots, matching ALTERNATE_STYLE's "1 7" dashArray.
   Deliberately not the guided trail's long dash — they must not be confused,
   one is a route you WILL drive and the other is one you probably will not. */
.map-legend i.dotted-alt {
  background: none !important;
  background-image: repeating-linear-gradient(
    to right, #1f6feb 0 2px, transparent 2px 7px
  ) !important;
}
/* The selected-leg label when what is selected is a contingency route. */
#selected-leg-label.is-alternate { color: #1f6feb; font-weight: 700; }

.map-toolbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.4rem 0;
  font-size: 0.9rem;
}
.map-toolbar button, .btn-link {
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
}
.hidden { display: none !important; }
#map-status { color: var(--accent); font-style: italic; }
.stop-pin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.stop-pin-end { background: #fff; color: var(--accent); border-color: var(--accent); }
/* several stops at one spot share a wider pill listing each of them */
.stop-pin-multi {
  width: auto;
  min-width: 26px;
  padding: 0 0.4rem;
  border-radius: 13px;
  background: #7b2d8b;
  letter-spacing: 0.02em;
}
.multi-popup hr { border: none; border-top: 1px solid var(--line); margin: 0.4rem 0; }

/* Paperwork for a night, listed under its stop on the itinerary. Admin only —
   share viewers never see documents. */
.stop-docs {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.88rem;
}
.stop-docs li::before {
  content: "📄";
  margin-right: 0.3rem;
}
.stop-docs a { color: var(--muted); }
.stop-docs a:hover { color: inherit; }
.doc-for {
  color: var(--muted);
  font-size: 0.8rem;
  margin-left: 0.25rem;
}