/* Overthink — warm, unhurried, spreadsheet-replacing.
   Palette and type per design_handoff_overthink_mobile: warm paper instead of
   blue-grey, Newsreader for dates and place names, deep olive for structure,
   plum kept for things that are live right now, clay for anything you eat. */

:root {
  /* Surfaces */
  --paper: #F5F1E8;      /* app background behind cards */
  --surface: #FDFBF6;    /* cards, header, bottom nav */
  --surface-2: #FBF8F1;  /* inset rows — stay button, icon buttons */
  --surface-3: #EFEBDD;  /* today's day-header, icon medallion */

  /* Ink — secondary greys must clear 4.5:1 on --surface, so do not lighten. */
  --ink: #2A2A24;
  --ink-2: #5F5E52;
  --ink-3: #6B6A5C;

  /* Lines */
  --line: #E6DFD0;
  --line-2: #EBE4D5;
  --line-3: #E3DAC6;
  --line-dashed: #DCD4C0;

  /* Olive — the primary accent: active nav, date card, links, activity dots. */
  --olive: #4A5A35;
  --olive-dark: #3A4729;
  --olive-tint: #DCE1CB;
  --olive-on-dark: #D5DAC5;

  --clay: #B4694A;       /* meals and place pins only */
  --plum: #6B3350;       /* live state only — countdown, "right now" dot */
  --plum-tint: #F3E7EE;

  --font-display: "Newsreader", Georgia, serif;
  --font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Legacy names, kept so the desktop grid, forms, map and modals warm up
     through the same values without every rule being rewritten. */
  --bg: var(--paper);
  --text: var(--ink);
  --muted: var(--ink-3);
  --line-strong: #D8CFBB;
  --accent: var(--olive);
  --accent-soft: var(--olive-tint);
  --danger: #b3402f;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(60, 55, 35, 0.04), 0 8px 20px rgba(60, 55, 35, 0.05);

  --ppm: 0.8; /* schedule pixels per minute */
  --foot-h: 42px; /* night footer under each day column */
  --travel-bg: #cfe1ec;
  --travel-border: #7ba6c4;
  --travel-text: #1c3a52;
  --cruise-bg: #d6ebe7;
  --cruise-border: #4c9d90;
  --cruise-text: #14504a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 8px; }
a { color: var(--accent); }
.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 12.5px; }

/* ---------- header ---------- */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
/* A fixed two-column header: brand eyebrow + serif trip name + one-line meta on
   the left, two round icon buttons on the right. Replaces the old wrapping row
   of brand word, buttons and title that reflowed unpredictably when narrow. */
.topbar-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 16px 12px;
}
.brand-eyebrow {
  display: block;
  font: 600 10px/1 var(--font-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}
.trip-heading { flex: 1; min-width: 0; }
.trip-title {
  margin: 3px 0 0;
  font: 400 22px/1.15 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.trip-title:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; border-radius: 3px; }
.trip-meta {
  margin-top: 3px;
  font: 400 11.5px/1.3 var(--font-ui);
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.travellers-count { cursor: help; }
.topbar-icons { display: flex; gap: 8px; flex: none; padding-top: 6px; }
.topbar-icon-btn {
  position: relative;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid #E0D9C8;
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
}
/* 36px sits above the 44px target, so a hit area is padded back out. */
.topbar-icon-btn::after { content: ''; position: absolute; inset: -4px; }
.topbar-icon-btn:active { background: var(--surface-3); }
.topbar-icon-btn:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }

/* Trip details are edited in the header rather than on a Setup tab: tapping the
   trip name expands this panel in place, under the heading and above the tabs. */
.trip-editor-slot:not(:empty) { border-top: 1px solid var(--line); background: var(--surface-2); }
.trip-editor { padding: 14px 18px 16px; max-width: 720px; }
.trip-editor-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px;
}
/* Repeatable rows: destinations, and travellers as name + email. */
.rep-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.rep-row { display: flex; align-items: center; gap: 6px; }
.rep-row > :first-child { flex: 1; min-width: 0; }
.rep-row .form-row { margin: 0; }

.tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 8px 12px 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ---------- buttons & inputs ---------- */

.btn {
  font: inherit;
  font-size: 13.5px;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--olive-dark); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-ghost { border-color: transparent; background: none; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-sm { padding: 4px 9px; font-size: 12.5px; border-radius: 7px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.icon-btn {
  border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--muted);
  padding: 4px 8px; border-radius: 7px;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }

.input, select.input, textarea.input {
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  width: 100%;
}
.input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
label.field { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
label.field > * { margin-top: 4px; font-weight: 400; }
.form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 130px; }
/* A display rule outranks the UA [hidden] rule, so el.hidden needs help here. */
.form-row[hidden], label.field[hidden] { display: none; }

/* ---------- layout ---------- */

#view { padding: 16px 18px 60px; max-width: 1500px; margin: 0 auto; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}
.card h2 { font: 400 18px/1.2 var(--font-display); letter-spacing: 0; margin-bottom: 10px; }
.row-list { display: flex; flex-direction: column; gap: 6px; }
.row-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2);
}
.row-item .grow { flex: 1; min-width: 0; }
/* Banding so the eye can track a row across to its duration and buttons. */
.row-item.alt { background: var(--surface-3); }
.row-del { flex: none; font-size: 13px; padding: 3px 7px; line-height: 1; }
.row-del:hover { background: #fae9e6; color: var(--danger); }
.list-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  display: inline-block; padding: 1px 8px; border-radius: 20px;
  font-size: 12px; font-weight: 600; border: 1px solid transparent;
}
/* Cuisine reads as a property of the place, not a trip category, so it gets a
   neutral outline rather than a category colour. */
.cuisine-chip {
  background: #fff; border-color: var(--line-strong); color: var(--muted);
  text-transform: lowercase;
}
.rest-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.rest-links a { text-decoration: none; }
.rest-links a:hover { text-decoration: underline; }
.hours-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
  margin-top: 4px; padding: 8px 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
}

/* ---------- landing ---------- */

.landing { max-width: 520px; margin: 8vh auto 0; padding: 0 18px; }
.landing .hero { text-align: center; margin-bottom: 26px; }
.landing .hero h1 { font: 400 34px/1.1 var(--font-display); letter-spacing: -0.01em; }
.landing .hero p { color: var(--ink-3); margin-top: 10px; line-height: 1.5; }

/* ---------- schedule ---------- */

.sched { display: flex; gap: 14px; align-items: flex-start; }
.sched-side {
  width: 250px; flex: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: sticky; top: 96px;
  max-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
}
.sched-side h3 { font-size: 13.5px; padding: 12px 12px 6px; }
/* Takes the slack so the drag sources stay pinned to the bottom of the
   sidebar and the list scrolls between them and the filters. */
.sched-side .side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 10px; }
.side-filters {
  padding: 0 10px 8px; display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid var(--line);
}
.kind-switch { width: 100%; }
.kind-switch button { flex: 1; padding: 5px 4px; font-size: 11.5px; }
.side-filters .input { font-size: 13px; padding: 6px 9px; }
/* Type select and sort buttons share one row; the select gives up width first
   because the sort labels can't ellipsis without becoming unreadable. */
.side-filter-row { display: flex; gap: 6px; align-items: center; }
.side-filter-row .input { flex: 1 1 auto; min-width: 0; }
.side-filter-row .seg { flex: none; }
.act-item {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; margin-bottom: 6px;
  background: #fff; cursor: grab; user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
}
.act-item:active { cursor: grabbing; }
.act-item .nm { font-weight: 600; font-size: 13.5px; }
.act-item .meta { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.act-item.scheduled { opacity: 0.55; background: var(--surface-3); }
.act-item.scheduled .nm::after { content: ' ✓'; color: var(--accent); }

/* Sidebar rows carry what the Activities and Restaurants tabs used to: the
   address, the no-location warning, hours and links, and buttons to edit or
   delete. The tap-to-add sheets reuse .act-item without .act-row and stay a
   simple stack. */
.act-row { display: flex; align-items: flex-start; gap: 2px; }
.act-row .act-main { flex: 1; min-width: 0; }
.act-row .act-actions { flex: none; display: flex; gap: 0; }
.act-row .act-actions .icon-btn { font-size: 12px; padding: 2px 5px; line-height: 1.2; }
.act-row .act-actions .row-del { font-size: 12px; }
.act-item .meta { flex-wrap: wrap; }
.act-item .act-sub,
.act-item .act-links { margin-top: 2px; overflow-wrap: anywhere; }
.act-item .act-links { display: flex; gap: 10px; flex-wrap: wrap; }
.act-item .act-links a { text-decoration: none; }
.act-item .act-links a:hover { text-decoration: underline; }
/* Loud enough to notice while dragging, quiet enough not to shout in a long
   list — this place simply won't appear in any drive time. */
.act-item .act-warn { color: var(--danger); margin-top: 2px; }

.side-count { padding: 6px 12px 0; }
.side-empty { padding: 8px 10px; margin: 0; }
.side-sources {
  border-top: 1px solid var(--line);
  padding-top: 4px;
  display: flex; flex-direction: column;
}
.side-sources .drag-source { margin-bottom: 6px; }
.side-sources .drag-source:last-child { margin-bottom: 12px; }

.sched-main { flex: 1; min-width: 0; }
.sched-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.sched-toolbar .spacer { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.seg button {
  font: inherit; font-size: 12.5px; border: 0; background: var(--surface);
  padding: 5px 11px; cursor: pointer; color: var(--muted);
}
.seg button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:disabled { opacity: 0.4; cursor: default; }
.seg button:hover:not(:disabled):not(.active) { background: var(--surface-2); color: var(--text); }
.seg.seg-sm button { padding: 4px 6px; font-size: 11px; }

/* Weeks stack vertically now, so only the page scrolls sideways-free. */
.sched-scroll.weeks { overflow: visible; max-height: none; border: 0; box-shadow: none; background: none; }
/* min-width:fit-content came from the sideways-scrolling design and would
   push the seventh day off the edge; the columns share the width instead. */
.sched-scroll.weeks .sched-grid {
  min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  overflow: hidden; margin-bottom: 16px;
}
.sched-weekhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 2px 6px; }
.sched-weekhead .wk-n { font-weight: 700; font-size: 14px; }
/* Stacked weeks are short columns, so a bottom-sticky footer would clamp
   awkwardly part-way up; it just sits at the foot of each column. */
.sched-scroll.weeks .col-foot, .sched-scroll.weeks .gutter-foot { position: static; }
.sched-scroll.weeks .col-head, .sched-scroll.weeks .gutter-head { position: static; }

.sched-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  max-height: calc(100vh - 170px);
  position: relative;
}
.sched-grid {
  display: flex; min-width: fit-content;
  /* Dragging blocks/items across date headers and hour labels shouldn't
     trigger native text selection along the drag path. */
  user-select: none; -webkit-user-select: none;
}
.sched-gutter {
  width: 46px; flex: none; position: sticky; left: 0; z-index: 10;
  background: var(--surface); border-right: 1px solid var(--line);
}
.sched-gutter .gutter-head { height: 44px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 11; }
.hour-label {
  position: absolute; right: 6px; transform: translateY(-7px);
  font-size: 10.5px; color: var(--muted);
}
.gutter-body { position: relative; }

.sched-col { flex: 1 1 0; min-width: 0; border-right: 1px solid var(--line); position: relative; }
.sched-col:last-child { border-right: 0; }
/* A trip of 7+ days pins every column to a seventh of the width, so the last
   short week's days match the full weeks' rather than stretching to fill.
   A trip under a week keeps stretching (nothing to line up against). */
.sched-grid.fixed-cols .sched-col { max-width: calc((100% - 46px) / 7); }
.col-head {
  height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); z-index: 9;
  font-size: 12.5px;
}
.col-head .dow { font-weight: 650; }
.col-head .dt { color: var(--muted); font-size: 11.5px; }
.sched-col.pretrip .col-head { color: var(--muted); background: var(--surface-2); }
.sched-col.pretrip .col-body { background: var(--surface-2); }
.sched-col.today .col-head .dow { color: var(--accent); }

/* Night footer: sticks to the bottom of the scrollport like .col-head sticks
   to the top, so the day's stay stays visible at any scroll position. Fixed
   height keeps every column aligned with the gutter's matching spacer. */
.col-foot {
  position: sticky; bottom: 0; z-index: 9;
  height: var(--foot-h);
  padding: 3px 6px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--surface); border-top: 1px solid var(--line-strong);
  overflow: hidden;
}
.col-foot .foot-drive,
.col-foot .foot-acc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-foot .foot-drive { min-height: 13px; font-size: 10.5px; color: var(--muted); }
.col-foot .foot-drive.est { font-style: italic; }
/* The stay strip is the way accommodation is entered, so it's a button — but
   it has to keep sitting flush in the footer as if it were still text. */
.col-foot .foot-acc {
  font: inherit; font-size: 11.5px; font-weight: 650; color: inherit;
  border: 0; background: none; padding: 0; width: 100%; text-align: left;
  cursor: pointer; border-radius: 5px;
}
.col-foot .foot-acc:hover { background: var(--accent-soft); color: var(--accent); }
.col-foot .foot-acc.none { font-weight: 400; color: var(--line-strong); }
.col-foot .foot-acc.none:hover { color: var(--accent); }
.sched-col.pretrip .col-foot { background: var(--surface-2); }
.sched-gutter .gutter-foot {
  position: sticky; bottom: 0; z-index: 11;
  height: var(--foot-h);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 6px;
  background: var(--surface); border-top: 1px solid var(--line-strong);
  font-size: 10px; color: var(--muted);
}

.col-body {
  position: relative;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(60px * var(--ppm) - 1px),
    var(--line) calc(60px * var(--ppm) - 1px),
    var(--line) calc(60px * var(--ppm))
  );
}

/* Subtle band behind the 9–5 window so the working part of the day stands out. */
.daytime-shade {
  position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  background: rgba(74, 90, 53, 0.045);
  border-top: 1px solid rgba(74, 90, 53, 0.1);
  border-bottom: 1px solid rgba(74, 90, 53, 0.1);
}

.blk {
  position: absolute; left: 4px; right: 4px;
  border-radius: 7px; border: 1px solid;
  padding: 3px 7px; font-size: 12px; overflow: hidden;
  cursor: grab; user-select: none; -webkit-user-select: none;
  touch-action: pan-x pan-y; /* allow horizontal day-scrolling to start on a block */
  z-index: 3;
  box-shadow: 0 1px 2px rgba(60, 55, 35, 0.08);
  transition: box-shadow 0.12s;
}
.blk:hover { box-shadow: 0 2px 8px rgba(60, 55, 35, 0.16); z-index: 4; }
.blk .nm { font-weight: 650; line-height: 1.25; }
.blk .tm { font-size: 10.5px; opacity: 0.75; }
.blk.dragging { opacity: 0.35; }
.blk .hdl {
  position: absolute; left: 0; right: 0; height: 8px; cursor: ns-resize; touch-action: none;
}
.blk .hdl.top { top: -2px; }
.blk .hdl.bot { bottom: -2px; }

/* Restaurants keep their category colour but get a dashed edge and the fork in
   their label, so they read as a different sort of thing on a busy day. */
.blk.eat { border-style: dashed; border-width: 1.5px; }

.blk.travel-leg {
  cursor: default; border-style: dashed; z-index: 2;
  background: var(--travel-bg); border-color: var(--travel-border); color: var(--travel-text);
}

.blk.transfer-blk {
  background: repeating-linear-gradient(135deg, #dce8f0 0 6px, #cfe0ec 6px 12px);
  border-color: var(--travel-border); color: var(--travel-text);
}

.drive-blk {
  position: absolute; left: 10px; right: 10px; z-index: 1;
  border-radius: 5px;
  background: repeating-linear-gradient(135deg, #EFEBDD 0 5px, #E3DAC6 5px 10px);
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  font-size: 10.5px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  overflow: hidden; white-space: nowrap;
  pointer-events: none;
}
.drive-blk.est { font-style: italic; }

.ghost-blk {
  position: absolute; left: 4px; right: 4px; z-index: 20;
  border: 2px dashed var(--accent); border-radius: 7px;
  background: rgba(74, 90, 53, 0.08);
  pointer-events: none;
  font-size: 11px; color: var(--accent); padding: 2px 6px; font-weight: 600;
}
.drag-chip {
  position: fixed; z-index: 100; pointer-events: none;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 8px;
  padding: 5px 10px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow);
  transform: translate(-50%, -110%);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- board (slot planner) ---------- */

.board-main { flex: 1; min-width: 0; }
.board-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.board-toolbar .spacer { flex: 1; }

/* --- slots: parts of the day, seven days a row, weeks stacked --- */
.board-week { margin-bottom: 18px; }
.board-week-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px; padding: 0 2px;
}
.board-week-head .wk-n { font-weight: 700; font-size: 14px; }
/* One row per piece of a day — header, the six slots, then the stay — shared
   by all seven days so the same slot begins at the same height across the
   week. Each row takes the height of the busiest day; a slot no day in the
   week uses collapses to nothing, so unused mealtimes still cost no space. */
.board-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* head · cruise strip (top) · 6 slots · stay · cruise strip (board day) —
     the two cruise rows collapse to nothing on days without one. */
  grid-template-rows: auto auto repeat(6, auto) auto auto;
  gap: 8px;
}
.board-day {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
/* Without subgrid the days can't share rows; they fall back to independent
   columns, which is how this looked before — content-height, unaligned. */
@supports not (grid-template-rows: subgrid) {
  .board-grid { align-items: start; }
  .board-day { display: flex; flex-direction: column; }
}
.board-day-head {
  display: flex; align-items: baseline; gap: 4px;
  padding: 6px 8px; background: var(--surface-3); border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.board-day-head .dow { font-weight: 700; }
.board-day-head .dt { color: var(--muted); font-size: 11px; margin-left: auto; }
.day-add { padding: 0 4px; font-size: 13px; line-height: 1; color: var(--line-strong); }
.day-add:hover { color: var(--accent); background: none; }
.col-head .day-add, .agenda-head .day-add { margin-left: auto; }

/* "Where you are today" breadcrumb under each day header. */
.day-loc {
  font-size: 10.5px; font-weight: 650; color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.sched-col > .day-loc { padding: 2px 6px 0; }
.board-day-head { flex-wrap: wrap; }
.board-day-head .day-loc { flex-basis: 100%; order: 9; }
.adv-daycell .day-loc { flex-basis: 100%; }
.board-day.today .board-day-head { background: var(--accent-soft); }
.board-day.today .board-day-head .dow { color: var(--accent); }

.board-slot { padding: 5px 6px; border-bottom: 1px dashed var(--line); min-height: 38px; }
.board-slot .slot-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--line-strong); margin-bottom: 3px;
}
.board-slot.meal { background: #fbfaf6; }
.board-slot.meal .slot-label { color: #b08a5a; }
/* Empty meal slots stay hidden until a drag needs somewhere to land. */
.board-slot.when-dragging { display: none; }
.dragging .board-slot.when-dragging { display: block; }
.board-slot.drop-target { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }

.board-card {
  position: relative;
  border: 1px solid; border-radius: 6px; padding: 4px 7px; margin-bottom: 4px;
  font-size: 12px; font-weight: 600; line-height: 1.25;
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  overflow-wrap: anywhere;
}
.board-card:active { cursor: grabbing; }
.board-card.eat { border-style: dashed; }
.board-card.lifted { opacity: 0.35; }
.board-card.leg-card {
  background: var(--travel-bg); border-color: var(--travel-border); color: var(--travel-text);
}
/* Shows exactly where in the slot the card will land. */
.drop-line {
  height: 0; margin: 2px 0;
  border-top: 2px solid var(--accent); border-radius: 2px;
  pointer-events: none;
}

/* Where you're sleeping, pinned to the foot of every day column. */
.board-stay {
  padding: 5px 7px; width: 100%; text-align: left;
  border: 0; border-top: 1px solid var(--line-strong); background: var(--surface-2);
  font: inherit; font-size: 11px; font-weight: 650; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.board-stay:hover { background: var(--accent-soft); color: var(--accent); }
.board-stay.none { font-weight: 400; color: var(--line-strong); }
.board-stay.none:hover { color: var(--accent); }

/* The drag sources that aren't picked from a list — travel and a meal. Every
   drop is a new one, so they're dashed: an outline waiting to be filled in. */
.drag-source {
  margin: 8px 10px 12px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 1px;
  border: 1px dashed var(--line-strong); border-radius: 8px;
  background: var(--surface-2); color: var(--text);
  font-size: 13px; font-weight: 650;
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.drag-source:active { cursor: grabbing; }
.drag-source .muted { font-weight: 400; }
.travel-source {
  border-color: var(--travel-border);
  background: var(--travel-bg); color: var(--travel-text);
}
/* Meals carry the Food category's own pink so a dropped one looks like what it
   becomes on the day. */
.meal-source {
  border-color: #e6b3a8;
  background: #FCE7E4; color: #7a3a2c;
}

/* No intermediate wrap: days are pinned to shared rows, so they can't reflow
   onto a second line — asking for four columns just created three implicit
   ones. Seven across down to the phone breakpoint, a vertical list below. */
/* Phones get one day per row, scrolled through vertically — the same day
   layout as the week grid, just stacked instead of side by side. */
@media (max-width: 860px) {
  .board-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 8px; }
  .board-day { display: flex; flex-direction: column; grid-row: auto; }
  .board-day > * { grid-row: auto !important; }
  /* Deliberately not sticky: each day is its own titled card here, and a
     sticky header inside a short flex card clamps to the card's bottom edge
     on the way past, which reads as the title being in the wrong place. */
  .board-slot { min-height: 34px; }
  .board-card { font-size: 13px; padding: 6px 9px; }
}

/* --- advanced: one day per row, the clock running left to right --- */
.adv {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.adv-row, .adv-ruler {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 150px;
  border-bottom: 1px solid var(--line);
}
.adv-row:last-child { border-bottom: 0; }
.adv-ruler {
  position: sticky; top: var(--topbar-h, 96px); z-index: 6;
  background: var(--surface-3); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
}
.adv-week { background: var(--bg); padding: 8px 10px 4px; border-bottom: 1px solid var(--line); }
.adv-week .board-week-head { margin: 0; }
.adv-daycell {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 8px; font-size: 12px; background: var(--surface-2); border-right: 1px solid var(--line);
}
.adv-daycell .dow { font-weight: 700; }
.adv-daycell .dt { color: var(--muted); font-size: 11px; margin-left: auto; }
.adv-row.today .adv-daycell .dow { color: var(--accent); }
.adv-staycell {
  display: flex; align-items: center; padding: 6px 8px; font-size: 11.5px;
  border-left: 1px solid var(--line); overflow-wrap: anywhere;
  font-family: inherit; color: inherit; background: none; text-align: left;
  border-top: 0; border-right: 0; border-bottom: 0;
}
/* The header cell is a plain div; only the per-day ones are buttons. */
button.adv-staycell { cursor: pointer; }
button.adv-staycell:hover { background: var(--accent-soft); }

.adv-lane { position: relative; min-height: 46px; padding: 4px 0; }
.adv-lane.ticks { min-height: 0; padding: 6px 0; }
.adv-tick { position: absolute; top: 4px; transform: translateX(-50%); font-size: 10px; }
.adv-grid-line {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(60, 55, 35, 0.08); pointer-events: none;
}

.adv-bar {
  position: absolute; top: 5px; bottom: 5px;
  border: 1px solid; border-radius: 6px; padding: 0 6px;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  z-index: 2;
}
.adv-bar:active { cursor: grabbing; }
.adv-bar.eat { border-style: dashed; }
.adv-bar.leg-bar {
  background: var(--travel-bg); border-color: var(--travel-border); color: var(--travel-text);
}
.adv-bar.resizing { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 5; }
.adv-name { overflow: hidden; text-overflow: ellipsis; }
/* Wide enough to grab without swallowing the bar itself on short blocks. */
.adv-edge {
  position: absolute; top: 0; bottom: 0; width: 8px;
  cursor: ew-resize; touch-action: none; z-index: 3;
}
.adv-edge.start { left: -1px; border-radius: 6px 0 0 6px; }
.adv-edge.end { right: -1px; border-radius: 0 6px 6px 0; }
.adv-bar:hover .adv-edge { background: rgba(74, 90, 53, 0.28); }

.adv-drive {
  position: absolute; top: 14px; bottom: 14px; z-index: 1;
  border-radius: 4px; font-size: 9.5px; color: var(--muted);
  background: repeating-linear-gradient(135deg, #EFEBDD 0 5px, #E3DAC6 5px 10px);
  border: 1px dashed var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; white-space: nowrap; pointer-events: none;
}
.adv-drive.est { font-style: italic; }

@media (max-width: 860px) {
  .adv-row, .adv-ruler { grid-template-columns: 76px minmax(0, 1fr); }
  .adv-staycell { grid-column: 1 / -1; border-left: 0; border-top: 1px dashed var(--line); }
}

/* ---------- timeline spine (shared: agenda days + Today's plan) ---------- */

/* One continuous spine per day instead of a bordered row per stop and another
   per drive. A dot sits on a hairline rule; drives are a short segment of that
   rule, not a list item. --tl-time is the width of the time column. */
.tl { display: flex; flex-direction: column; --tl-time: 44px; }
.tl-row { display: flex; gap: 12px; align-items: stretch; }
button.tl-row {
  width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; cursor: pointer;
}
button.tl-row:active { background: var(--surface-3); }
.tl-time {
  flex: none; width: var(--tl-time); padding-top: 1px;
  font: 600 12px/1.2 var(--font-ui); font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.tl-spine { flex: none; width: 9px; display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--olive); margin-top: 4px; flex: none; }
.tl-dot.meal {
  width: 7px; height: 7px; margin-top: 5px;
  background: var(--surface); border: 1.5px solid var(--clay);
}
.tl-rule { flex: 1; width: 1px; background: var(--line); }
.tl-body { flex: 1; min-width: 0; padding-bottom: 11px; }
.tl-title { display: flex; align-items: center; gap: 7px; font: 600 14.5px/1.3 var(--font-ui); color: var(--ink); }
.tl-title svg { flex: none; }
.tl-title.meal { font-weight: 500; }
.tl-title.port { color: var(--cruise-text); }
.tl-row.leg .tl-title { color: var(--travel-text); }
.tl-sub { margin-top: 1px; font: 400 11px/1.4 var(--font-ui); color: var(--ink-3); }

/* A leg's "where" line — just the destination, with a pin that unfolds the
   full from → to. Used inside .nn-note and .tl-sub, so it inherits their type. */
.ev-pin {
  display: inline-flex; vertical-align: -0.18em; margin-left: 3px;
  color: var(--ink-3); cursor: pointer; border-radius: 4px;
}
.ev-pin:active { color: var(--ink); background: var(--surface-3); }
.ev-pin svg { display: block; }
.ev-addr { margin-top: 2px; opacity: 0.9; }

/* A small zone label under a time, e.g. "EST" — shown only when it differs
   from this device's zone. */
.tl-time { display: flex; flex-direction: column; }
.tl-time .tl-tz, .tl-jt small {
  font: 600 8.5px/1.35 var(--font-ui); letter-spacing: 0.03em;
  color: var(--ink-3); opacity: 0.85; text-transform: uppercase;
}

/* A journey: a departure marker and an arrival marker, the row spanning the
   height of both — so mid-transit the landing time sits right there, before
   whatever's next. Its length (and "in transit") ride in the sub-line. */
.tl-row.leg.journey { align-items: stretch; min-height: 72px; }
.tl-jtime {
  flex: none; width: var(--tl-time); padding-top: 1px; padding-bottom: 11px;
  display: flex; flex-direction: column; justify-content: space-between;
  font: 600 12px/1.15 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.tl-jt { display: flex; flex-direction: column; }
.tl-spine.journey { justify-content: flex-start; }
.tl-spine.journey .tl-dot { background: var(--travel-text); }
.tl-spine.journey .tl-rule-tail { flex: none; height: 11px; }
.tl-row.leg.journey.in-transit .tl-spine.journey .tl-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--travel-text) 20%, transparent);
}

/* A drive sits between two stops as a spine segment: empty time column, a bare
   16px of rule, then the car and the duration in words. */
.tl-drive { display: flex; gap: 12px; align-items: center; margin: -7px 0 5px; }
.tl-drive-gap { flex: none; width: var(--tl-time); }
.tl-drive-spine { flex: none; width: 9px; display: flex; justify-content: center; }
.tl-drive-spine::before { content: ''; width: 1px; height: 16px; background: var(--line); }
.tl-drive-label { display: flex; align-items: center; gap: 6px; font: 400 11px/1 var(--font-ui); color: var(--ink-3); }
.tl-drive-label svg { flex: none; }

/* ---------- agenda (day-by-day list) ---------- */

.agenda { max-width: 860px; }
.agenda-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 12px; }
.agenda-toolbar .spacer { flex: 1; min-width: 12px; }
.agenda-range { font: 400 16px/1.2 var(--font-display); color: var(--ink); }

/* The detail toggle as a pill segmented control. Scoped to this toolbar so the
   planner's other .seg controls (zoom, sort) keep their bordered style. */
.agenda-toolbar .seg {
  display: inline-flex; border: 0; overflow: visible;
  background: #EAE5D8; border-radius: 20px; padding: 2px;
}
.agenda-toolbar .seg button {
  border: 0; border-radius: 20px; background: none;
  font: 500 11.5px/1 var(--font-ui); color: var(--ink-2);
  padding: 6px 12px; cursor: pointer;
}
.agenda-toolbar .seg button + button { border-left: 0; }
.agenda-toolbar .seg button.active { background: var(--olive); color: var(--paper); font-weight: 600; }
.agenda-toolbar .seg button:hover:not(.active) { color: var(--ink); background: none; }

/* One card per day, 12px apart. */
.agenda-body { display: flex; flex-direction: column; gap: 12px; }
.agenda-day {
  border: 1px solid var(--line-2); border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
}
.agenda-day.today {
  border-color: var(--line-3);
  box-shadow: 0 1px 2px rgba(60, 55, 35, 0.04), 0 8px 20px rgba(60, 55, 35, 0.06);
}
.agenda-day.pretrip { opacity: 0.9; }
.agenda-day.empty { background: var(--surface-2); border: 1px dashed var(--line-dashed); box-shadow: none; }

.agenda-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px 11px; border-bottom: 1px solid #F0EADC; }
.agenda-day.today .agenda-head { background: var(--surface-3); border-bottom: 0; }
.agenda-day.empty .agenda-head { border-bottom: 0; padding-bottom: 11px; }
.ah-main { flex: 1; min-width: 0; }
.ah-dateline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ah-date { font: 400 19px/1.15 var(--font-display); color: var(--ink); }
.agenda-day.today .ah-date { color: var(--olive-dark); }
.agenda-day.empty .ah-date, .agenda-day.pretrip .ah-date { color: #5A5950; }
.ah-pill {
  font: 600 10px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--olive); background: var(--olive-tint);
  padding: 2px 7px; border-radius: 20px;
}
.ah-pill.pre { color: var(--ink-3); background: var(--surface-3); }
.ah-loc { display: flex; align-items: center; gap: 5px; margin-top: 4px; font: 400 11.5px/1.3 var(--font-ui); color: #5A5950; min-width: 0; }
.ah-loc svg { flex: none; color: var(--clay); }
.ah-loc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-add {
  position: relative;
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid #E0D9C8; background: var(--surface-2); color: var(--olive);
  cursor: pointer;
}
.ah-add::after { content: ''; position: absolute; inset: -6px; }
.agenda-day.today .ah-add { border-color: #CFC9B4; }
.ah-add:active { background: var(--surface-3); }
.ah-add:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }

.agenda-day .tl { padding: 12px 16px 4px; }
.agenda-emptyline { margin: 0; padding: 0 16px 14px; font: italic 400 13px/1.4 var(--font-display); color: var(--ink-3); }

.agenda-stay {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; margin-top: 8px;
  padding: 11px 16px 13px;
  border: 0; border-top: 1px solid #EDE6D7; background: var(--surface-2);
  font: inherit; color: var(--ink); cursor: pointer;
}
.agenda-stay:active { background: var(--surface-3); }
.agenda-stay .as-icon { flex: none; display: flex; color: var(--olive); }
.agenda-stay .as-name { flex: 1; min-width: 0; font: 500 13px/1.3 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-stay .as-drive { flex: none; display: inline-flex; align-items: center; gap: 5px; font: 400 11px/1 var(--font-ui); color: var(--ink-3); white-space: nowrap; }
.agenda-stay .as-drive svg { flex: none; }
.agenda-stay.none .as-name { font-weight: 400; color: var(--ink-3); }
.agenda-stay.ship .as-icon { color: var(--cruise-text); }

/* ---------- activity grouping ---------- */

.grp-header {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin: 12px 6px 4px; padding-top: 8px; border-top: 1px dashed var(--line-strong);
}
.grp-header:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.side-scroll .grp-header { margin: 10px 4px 4px; }
/* Divider between the unscheduled half of the sidebar and the scheduled half. */
.grp-header.sect { color: var(--accent); border-top-style: solid; border-top-color: var(--line-strong); }

/* ---------- driving grid ---------- */

.grid-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); max-height: 75vh; }
table.dgrid { border-collapse: collapse; font-size: 12.5px; }
.dgrid th, .dgrid td { border: 1px solid var(--line); padding: 6px 9px; text-align: right; white-space: nowrap; }
.dgrid thead th {
  position: sticky; top: 0; background: var(--surface-3); z-index: 2; font-size: 11.5px;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.dgrid tbody th {
  position: sticky; left: 0; background: var(--surface-3); z-index: 1; text-align: left;
  font-size: 12px; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}
.dgrid thead th:first-child { left: 0; z-index: 3; }
.dgrid td.self { background: var(--surface-2); color: var(--line-strong); text-align: center; }
.dgrid td:hover { background: var(--accent-soft); }
.dgrid .est { color: var(--muted); font-style: italic; }

/* ---------- map ---------- */

.map-wrap { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
#map { height: calc(100vh - 210px); min-height: 420px; }
.map-legend {
  position: absolute; bottom: 12px; left: 12px; z-index: 5;
  background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 11px; font-size: 12px; max-width: 220px;
}
.legend-row { display: flex; align-items: center; gap: 7px; margin: 2px 0; }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); flex: none; }
.pin {
  width: 20px; height: 20px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pin span { transform: rotate(45deg); font-size: 10px; font-weight: 700; color: #fff; }
.pin.home { border-radius: 5px; transform: none; }
.pin.home span { transform: none; }
.pin.dim { opacity: 0.45; width: 13px; height: 13px; border-radius: 50%; }
.pin.eat { border-radius: 50%; transform: none; width: 22px; height: 22px; }
.pin.eat span { transform: none; font-size: 11px; }
/* Travel start/end points — lighter than the trip's own places. */
.pin.travel { width: 18px; height: 18px; border-radius: 50%; transform: none; background: #7c8794; }
.pin.travel span { transform: none; font-size: 10px; }
.legend-dot.legend-eat {
  background: #fff; border-color: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; width: 13px; height: 13px;
}
.mapboxgl-popup-content { font: 12.5px/1.4 inherit; padding: 8px 12px; border-radius: 8px; }

/* ---------- history panel ---------- */

.panel-scrim { position: fixed; inset: 0; background: rgba(42, 40, 30, 0.25); z-index: 60; }
.history-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); z-index: 61;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -8px 0 30px rgba(42, 40, 30, 0.12);
  display: flex; flex-direction: column;
  animation: slide-in 0.18s ease-out;
}
@keyframes slide-in { from { transform: translateX(30px); opacity: 0; } }
.history-panel .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.history-panel .panel-head h3 { font: 400 18px/1.2 var(--font-display); letter-spacing: 0; }
.history-panel .panel-body { overflow-y: auto; padding: 10px 16px 30px; }
.hist-item { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.hist-item .who { font-weight: 650; }
.hist-item .when { color: var(--muted); font-size: 11.5px; }
.hist-item .what { margin-top: 1px; }
.hist-item .diff { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ---------- modal & toast ---------- */

.overlay {
  position: fixed; inset: 0; background: rgba(42, 42, 36, 0.4); z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: var(--surface); border-radius: 18px; box-shadow: 0 12px 50px rgba(42, 40, 30, 0.28);
  width: 100%; max-width: 440px; max-height: 88vh; display: flex; flex-direction: column;
  animation: pop-in 0.15s ease-out;
}
.modal.wide { max-width: 620px; }
@keyframes pop-in { from { transform: scale(0.97); opacity: 0; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 0; }
.modal-head h3 { font: 400 19px/1.2 var(--font-display); letter-spacing: 0; }
.modal-body { padding: 12px 18px; overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 16px; }

#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px);
  background: #2E2B24; color: #fff; padding: 10px 18px; border-radius: 10px;
  font-size: 13.5px; opacity: 0; pointer-events: none; transition: all 0.2s; z-index: 120;
  max-width: 90vw;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--danger); }

/* ---------- add to a day ---------- */

/* Four ways to start, given equal weight — the question is what you're adding
   before it's anything about the thing itself. */
.add-types { display: flex; gap: 8px; flex-wrap: wrap; }
.add-type {
  flex: 1 1 140px; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--surface-2); color: inherit; font: inherit; text-align: left;
  cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.add-type:hover { border-color: var(--olive); background: var(--accent-soft); }
.add-type-icon { display: flex; color: var(--olive); margin-bottom: 2px; }
.add-type-label { font: 400 15px/1.2 var(--font-display); }
.add-type-hint { line-height: 1.3; }

/* A rule with the alternative written into it, so the list below reads as the
   second option rather than an unexplained pile of names. */
.add-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 8px; color: var(--muted); font-size: 12.5px;
}
.add-divider::before, .add-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.add-existing { max-height: 46vh; overflow-y: auto; }
.add-existing-row { display: block; width: 100%; text-align: left; cursor: pointer; }
.add-existing-row:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- geocode candidates ---------- */

.cand-list { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.cand {
  text-align: left; font: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); cursor: pointer;
}
.cand:hover, .cand.sel { border-color: var(--accent); background: var(--accent-soft); }
.cand .addr { color: var(--muted); font-size: 12px; }
.minimap { height: 190px; border-radius: 8px; margin-top: 10px; border: 1px solid var(--line); }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  #view { padding: 10px 8px 60px; }
  .sched-side { display: none; }
  .sched-scroll { max-height: calc(100vh - 130px); }
  .topbar-inner { padding: 8px 10px 0; gap: 8px; }
  .trip-heading h1 { font-size: 15px; }
  .modal { align-self: flex-end; border-radius: 18px 18px 0 0; max-width: none; }
  .overlay { padding: 0; align-items: flex-end; }
}

/* ---------- drive times ---------- */

/* Sits under the map tab's own toolbar, so it needs a little air above it. */
.sub-toolbar { margin-top: 2px; }

.route-card .route-list {
  list-style: none; margin: 6px 0 0; padding: 0;
}
.route-stop {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--line);
}
.route-stop:last-child { border-bottom: 0; }
.route-stop .grow { flex: 1; min-width: 0; }
.route-icon { flex: none; width: 18px; text-align: center; }
/* The drive between two stops, indented under the stop it leaves from so the
   list reads as a chain rather than a flat sequence. */
.route-drive {
  padding: 3px 0 3px 26px; font-size: 12.5px; color: var(--accent);
}
.route-drive.est { font-style: italic; }

/* ---------- cruises ---------- */

/* The per-day strip: foot of the day you board, top of every day after. Shared
   by all four planner layouts and the agenda. */
.cruise-strip {
  display: flex; align-items: center; gap: 6px;
  width: 100%; text-align: left; font: inherit;
  font-size: 11.5px; font-weight: 650; line-height: 1.2;
  padding: 4px 8px; border: 1px solid var(--cruise-border); border-radius: 6px;
  background: var(--cruise-bg); color: var(--cruise-text);
  cursor: pointer; overflow: hidden; white-space: nowrap;
}
.cruise-strip:hover { filter: brightness(0.97); }
.cruise-strip svg { flex: none; }
.cruise-strip .cruise-text { overflow: hidden; text-overflow: ellipsis; }
.cruise-strip.k-sea {
  background: repeating-linear-gradient(135deg, #e1efec 0 6px, #d6ebe7 6px 12px);
}

/* Timed week grid: between the day head and the clock, or in the foot. */
.sched-col > .cruise-strip { margin: 2px 3px 0; border-radius: 5px; }
.col-foot .cruise-strip { font-size: 10.5px; padding: 3px 6px; }

/* Slot board: the two reserved grid rows; empty on days without a cruise. */
.board-cruise { padding: 2px 4px; min-width: 0; }
.board-cruise .cruise-strip { font-size: 10.5px; }
.col-foot .cruise-strip svg,
.board-cruise .cruise-strip svg { width: 11px; height: 11px; }

/* Advanced rows: a full-width band between the day rows. */
.adv-cruise { padding: 3px 10px; background: var(--bg); border-bottom: 1px solid var(--line); }

/* Agenda list. */
.agenda-day > .cruise-strip { margin: 6px 12px; width: auto; }

/* A port of call: a stop on the day, but cruise-owned — dashed teal, a pointer
   (click edits the cruise), never a drag handle. */
.blk.port,
.board-card.port,
.adv-bar.port {
  background: var(--cruise-bg); color: var(--cruise-text);
  border: 1px dashed var(--cruise-border); cursor: pointer;
}
/* The port block is a backdrop for the in-port hours: excursions and the
   driving between them sit on top of it, not behind. */
.blk.port { z-index: 0; box-shadow: none; }
.adv-bar.port { z-index: 1; border-left-width: 1px; }

/* Ship standing in for the night's stay strip. */
.foot-acc.ship, .board-stay.ship, .agenda-stay.ship { color: var(--cruise-text); }
.adv-staycell.ship .stay-tag { color: var(--cruise-text); }

/* Map: an anchor pin and its legend dot. */
.pin.port { border-radius: 50%; transform: none; width: 22px; height: 22px; }
.pin.port span { transform: none; font-size: 11px; }
.legend-dot.legend-port {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; font-size: 8px; color: #fff;
}

/* Cruise form: the day-by-day ports editor. */
.cruise-ports-wrap .field-label {
  font-size: 12px; font-weight: 650; color: var(--muted); margin-bottom: 4px;
}
.cruise-ports { display: flex; flex-direction: column; gap: 10px; }
.cruise-port-row {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface-2);
}
.cruise-port-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px;
}
.cruise-port-date { font-weight: 650; font-size: 13px; }
.cruise-atsea { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.cruise-port-body { display: flex; flex-direction: column; gap: 8px; }
.cruise-port-body[hidden] { display: none; }

/* ---------- today ---------- */

.today { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.today .card {
  margin-bottom: 0;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 15px 16px 16px;
}
.today-eyebrow {
  font: 600 10px/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2);
}

/* Date card — a serif date, not a departures board. The eyebrow and the clock
   share the top line; the date gets the full width under them so it never has
   to wrap around the clock. The clock is live (the tick swaps .tdc-clockwrap)
   and shows the time where the traveller is, its zone, and — when this device
   is elsewhere — the device's own time under it. */
.today-datecard {
  background: var(--olive); border-radius: 18px; padding: 14px 18px 15px;
  color: #F1EEE2;
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: start;
}
.tdc-eyebrow {
  align-self: center;
  font: 600 10px/1.2 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--olive-on-dark);
}
.tdc-date {
  grid-column: 1 / -1; margin-top: 6px;
  font: 400 26px/1.15 var(--font-display); color: #FBF9F2;
}
.tdc-loc {
  grid-column: 1 / -1; margin-top: 9px; min-width: 0;
  display: flex; align-items: center; gap: 5px;
  font: 400 12px/1.3 var(--font-ui); color: var(--olive-on-dark);
}
.tdc-loc svg { flex: none; }
.tdc-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdc-clockwrap {
  grid-column: 2; grid-row: 1; justify-self: end;
  display: flex; flex-direction: column; align-items: flex-end;
}
.tdc-clock {
  font: 400 22px/1 var(--font-display); font-variant-numeric: tabular-nums; color: #FBF9F2;
  display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 2px 5px;
}
.tdc-tz { font: 600 10px/1 var(--font-ui); letter-spacing: 0.05em; color: var(--olive-on-dark); }
.tdc-local { margin-top: 4px; font: 400 11.5px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--olive-on-dark); }

/* Today's plan — progress. What's finished dims back; "now" and what's next
   carry a flag (and the next stop a live countdown) so the rest of the day
   reads first. */
@keyframes nn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.today-plan .tl-row.tl-past { opacity: 0.4; }
.today-plan .tl-drive.past { opacity: 0.3; }
.today-plan .tl-row.tl-now .tl-dot { background: var(--plum); }
.today-plan .tl-row.tl-now .tl-dot.meal { border-color: var(--plum); }
@media (prefers-reduced-motion: no-preference) {
  .today-plan .tl-row.tl-now .tl-dot { animation: nn-pulse 2.4s ease-in-out infinite; }
}
.tl-flag {
  font: 600 9.5px/1 var(--font-ui); letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 4px;
}
.tl-flag.now { color: var(--plum); }
.tl-flag.next { color: var(--olive); }
.tl-flag.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tl-cd {
  font: 600 10px/1 var(--font-ui); font-variant-numeric: tabular-nums;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: var(--plum); background: var(--plum-tint); padding: 3px 8px; border-radius: 20px;
}
.tl-time .tl-tmr {
  font: 600 8.5px/1.35 var(--font-ui); letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--olive);
}
.nn-empty { font: 400 13px/1.5 var(--font-ui); color: var(--ink-3); padding: 4px 0 0; }

.today-cruise {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--cruise-bg); border-color: var(--cruise-border);
}
.tcr-ship { display: flex; align-items: center; gap: 7px; font: 400 17px/1.2 var(--font-display); color: var(--cruise-text); }
.tcr-ship svg { flex: none; }
.tcr-line { font-weight: 600; margin: 2px 0 4px; color: var(--cruise-text); }

.today-plan .tp-head { display: flex; align-items: baseline; gap: 10px; }
.tp-title { font: 400 18px/1.2 var(--font-display); color: var(--ink); }
.today-plan .tl { --tl-time: 56px; margin-top: 12px; }
.today-plan .tl-body { padding-bottom: 12px; }
.today-plan .tl-drive { margin: -6px 0 6px; }
.today-plan .tl-drive-spine::before { height: 18px; }
.today-plan .tl-drive-label { font-size: 11.5px; }
.today-navlink {
  display: inline-block; margin-top: 12px;
  font: 600 12px/1 var(--font-ui); color: var(--olive); text-decoration: none; white-space: nowrap;
}
.today-navlink:hover { text-decoration: underline; }

/* Tonight — a bed medallion, the stay name in serif, the town not the street. */
.today-tonight { display: flex; align-items: flex-start; gap: 12px; text-align: left; font: inherit; cursor: pointer; }
.tt-medallion {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--surface-3); color: var(--olive); display: grid; place-items: center;
}
.tt-body { min-width: 0; flex: 1; }
.tt-eyebrow { font: 600 10px/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.tt-name { font: 400 18px/1.2 var(--font-display); color: var(--ink); margin-top: 2px; }
.tt-name.ship { display: flex; align-items: center; gap: 8px; }
.tt-name.ship svg { flex: none; color: var(--cruise-text); }
.tt-meta { font: 400 11.5px/1.4 var(--font-ui); color: var(--ink-3); margin-top: 2px; overflow-wrap: anywhere; }
.tt-chev { flex: none; color: #B3AF9E; padding-top: 4px; }

/* Map — a full-width card row consistent with Tonight; taps to expand the map. */
.today-map-card { padding: 0; overflow: hidden; }
.tmc-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
}
.tmc-row .tmc-icon { flex: none; display: flex; color: var(--olive); }
.tmc-row .tmc-label { flex: 1; font: 500 13.5px/1.3 var(--font-ui); color: var(--ink); }
.tmc-row .tmc-chev { flex: none; display: flex; color: #B3AF9E; }
#today-map { height: 0; transition: height 0.15s; }
#today-map.loaded { height: 240px; }

/* Quick-add — a small "＋ Add" at the foot of Today's plan that unfolds into a
   short form in place. What you add lands straight on the plan. */
.ta-slot { margin-top: 6px; border-top: 1px solid var(--line-2); padding-top: 6px; }
.ta-open {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 2px; border: 0; background: none; cursor: pointer;
  font: 500 12.5px/1 var(--font-ui); color: var(--olive);
}
.ta-open:active { color: var(--olive-dark); }
.ta-open svg { flex: none; }

.ta-form {
  display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 12px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px;
}
.ta-types { align-self: flex-start; flex-wrap: wrap; max-width: 100%; }
.ta-name.input { font: 400 16px/1.35 var(--font-display); }
.ta-name.input::placeholder { color: var(--ink-3); }
.ta-status { margin: 0; }
.ta-hits { display: flex; flex-direction: column; gap: 6px; }
.ta-hit {
  display: flex; flex-direction: column; gap: 1px; text-align: left; cursor: pointer;
  padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); font: inherit;
}
.ta-hit.sel { border-color: var(--olive); background: var(--olive-tint); }
.ta-hit-name { font: 500 13px/1.3 var(--font-ui); color: var(--ink); }
.ta-hit-addr { font: 400 11px/1.3 var(--font-ui); color: var(--ink-3); }
.ta-altlink {
  align-self: flex-start; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: 500 12px/1 var(--font-ui); color: var(--olive); text-decoration: underline;
}
.ta-alt-row { display: flex; gap: 8px; }
.ta-alt-row .input { flex: 1; min-width: 0; }
.ta-field {
  display: flex; flex-direction: column; gap: 4px;
  font: 600 10px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.ta-field select { text-transform: none; letter-spacing: normal; }
.ta-travel { margin: 0; }
.ta-actions { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.ta-actions .ta-add { flex: 1; }

/* ---------- bottom nav (mobile) ---------- */

.bottom-nav { display: none; }

@media (max-width: 860px) {
  /* Keep wide content inside its own scroller rather than moving the page. */
  html, body { width: 100%; max-width: 100%; overflow-x: clip; overscroll-behavior-x: none; }
  #app, #view { width: 100%; min-width: 0; }
  .input, select.input, textarea.input { min-width: 0; max-width: 100%; }
  .tabs { display: none; }
  .bottom-nav {
    display: grid; grid-template-columns: repeat(4, minmax(0, 76px));
    justify-content: center; gap: 4px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 2px max(12px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(12px, env(safe-area-inset-left, 0px));
  }
  .bn-btn {
    min-width: 0; width: 100%; border: 0; background: none; font: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 0 10px; min-height: 52px; color: var(--ink-3);
  }
  .bn-icon { display: flex; line-height: 1; }
  .bn-icon svg { width: 21px; height: 21px; }
  .bn-label { font: 500 10.5px/1 var(--font-ui); letter-spacing: 0.02em; }
  .bn-btn.active { color: var(--olive); }
  .bn-btn.active .bn-label { font-weight: 600; }

  #view { padding: 12px 12px calc(66px + env(safe-area-inset-bottom, 0px)); }

  /* Header stays the fixed two-column layout — just a touch tighter. */
  .topbar-inner { padding: 6px 12px 12px; }
  .trip-title { font-size: 21px; }

  /* Bigger touch targets. */
  .agenda-day .tl-row { min-height: 44px; }
  .agenda-stay { min-height: 44px; }
  .seg button { padding: 7px 10px; }
  .seg.seg-sm button { padding: 6px 8px; }
  .agenda-toolbar .seg button { padding: 7px 13px; }
  .icon-btn.day-add { padding: 7px 10px; }
  .add-type { min-height: 58px; }

  /* Forms always reach their Save button. */
  .modal { max-height: 92vh; }
  .modal-body { max-height: 74vh; }

  .today { max-width: none; }
}

/* Places: a trip-wide collection, usable before anything has a date. */
.places-page { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.places-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.places-heading h2 { margin: 0 0 5px; }
.places-heading p { margin: 0; }
.places-heading .btn { min-height: 44px; gap: 6px; }
.places-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.places-filters .btn { min-height: 40px; }
.places-filters [aria-pressed="true"] { background: var(--accent-soft); border-color: var(--olive); color: var(--olive); }
.places-list { display: flex; flex-direction: column; gap: 8px; }
.places-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; text-align: left; font: inherit; cursor: pointer; }
.places-item:hover { border-color: var(--olive); }
.places-icon { color: var(--olive); display: flex; }
.places-item > svg, .places-icon { flex-shrink: 0; }
.places-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.places-empty { padding: 28px 16px; text-align: center; border: 1px dashed var(--line); border-radius: 14px; }

.location-map-picker { margin-top: 6px; }
.location-map-picker > .btn { padding-left: 0; }
.location-map-picker [hidden] { display: none; }
.location-picker-map { height: 280px; width: 100%; max-width: 100%; touch-action: none; }
.location-map-picker .muted { margin-top: 6px; }

/* Search and map selection are equally visible on desktop and mobile. */
.place-search-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.place-search-row > .input { flex: 1 1 160px; min-width: 0; width: auto; }
.place-search-row > .btn { flex: none; min-height: 36px; }
.location-map-toggle { display: inline-flex; align-items: center; justify-content: center; }

/* Per-drive measurements stay readable inside the map overlay on phones too. */
.map-legend.driving-legend { width: 420px; max-width: calc(100% - 24px); max-height: 50%; overflow-y: auto; }
.daily-drive-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.daily-drive-table th, .daily-drive-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
.daily-drive-table th:first-child { text-align: left; overflow-wrap: anywhere; font-weight: 500; }
.daily-drive-table thead th, .daily-drive-table tfoot th, .daily-drive-table tfoot td { font-weight: 650; }
.daily-drive-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }