/* TMTR — app styles. Started from TrackingMyTeams so the two apps feel
   like one family, with the palette moved to a travel blue. Single file on
   purpose: shared hosts cache badly and one ?v= bump beats chasing three.
   Order: chrome, bits, forms, dialogs, landing, trips, the plan, the trip
   book, then the phone layer at the end. */

:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --line: #dde3ea;
  --ink: #17202b;
  --ink-soft: #5c6774;
  --accent: #1b5e8f;
  --accent-soft: #e2edf6;
  --good: #1e6f4e;
  --warn: #8a5a00;
  --bad: #b0332a;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------- chrome */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 20px; background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.brand-mark { font-weight: 700; letter-spacing: -.01em; }
.brand-club { color: var(--ink-soft); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.avatar {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 700;
}
.role-chip {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px;
}
.env-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  background: #fff4d6; color: #7a5200; border: 1px solid #f0dca6;
  border-radius: 4px; padding: 2px 7px;
}

.tabs {
  display: flex; gap: 2px; padding: 0 12px; background: var(--surface);
  border-bottom: 1px solid var(--line); overflow-x: auto;
}
.tab {
  border: 0; background: none; padding: 12px 14px; cursor: pointer;
  color: var(--ink-soft); font: inherit; font-size: 14px;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab[hidden] { display: none; }

.view { padding: 22px; max-width: 1180px; margin: 0 auto; }

/* --------------------------------------------------------------- bits */

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 26px 0 10px; }
.muted { color: var(--ink-soft); }
.sub { color: var(--ink-soft); margin: 0 0 18px; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
}
.grid { display: grid; gap: 14px; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.stat { text-align: left; }
.stat-value { font-size: 28px; font-weight: 700; line-height: 1.1; }
.stat-label { color: var(--ink-soft); font-size: 13px; margin-top: 4px; }
.stat.alert .stat-value { color: var(--bad); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 600; }
tbody tr:hover { background: #f7fafc; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

.btn {
  display: inline-block; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); border-radius: 7px; padding: 8px 14px; font: inherit;
  font-size: 14px; cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: #c9ced6; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #164e77; }
.btn-ghost { border-color: transparent; color: var(--ink-soft); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
input, select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 7px; font: inherit; font-size: 14px; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* The hidden attribute wins over any display a class sets — a flex row that is hidden is not there. */
[hidden] { display: none !important; }
.field-row > div { flex: 1 1 180px; }
.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

.pill {
  display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap;
}
.pill-good { background: #e3f0e9; color: var(--good); border-color: #bfdccc; }
.pill-warn { background: #fcf1c9; color: var(--warn); border-color: #efd98f; }
.pill-bad  { background: #fbe8e5; color: var(--bad);  border-color: #f0c4bf; }

.alert { border-radius: 8px; padding: 11px 13px; margin: 0 0 14px; font-size: 14px; }
.alert-error { background: #fbe8e5; color: var(--bad); border: 1px solid #f0c4bf; }
.alert-warn  { background: #fcf1c9; color: var(--warn); border: 1px solid #efd98f; }
.alert-info  { background: var(--accent-soft); color: #14476b; border: 1px solid #c3d9ea; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: #182420; color: #fff; padding: 11px 18px; border-radius: 8px;
  font-size: 14px; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

/* --------------------------------------------------------------- auth */

.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.auth-card {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 30px;
  box-shadow: var(--shadow);
}
.auth-title { font-size: 21px; margin: 0; }
.auth-sub { color: var(--ink-soft); margin: 4px 0 18px; font-size: 14px; }
.auth-card .btn-block { margin-top: 20px; }
.auth-foot { margin: 16px 0 0; font-size: 13px; text-align: center; }
.auth-foot a { color: var(--ink-soft); }

@media (max-width: 620px) {
  .view { padding: 16px; }
  .topbar { flex-wrap: wrap; }
}

/* On a phone the travellers table becomes a stack of cards: name, then
   access · status · share on one line, then the buttons. The sticky
   action column would otherwise sit on top of the middle columns. */
@media (max-width: 640px) {
  .people-table thead { display: none; }
  .people-table, .people-table tbody, .people-table tr, .people-table td { display: block; }
  .people-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .people-table tr:last-child { border-bottom: 0; }
  .people-table td { border: 0; padding: 0; }
  .people-table td.p-meta { display: inline; font-size: 13px; color: var(--ink-soft); }
  .people-table td.p-meta + td.p-meta::before { content: ' · '; }
  .people-table td.p-meta .pill { vertical-align: middle; }
  .people-table td.col-actions { position: static; box-shadow: none; width: auto; white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .people-table td.col-actions .btn { margin: 0; }
}

/* ------------------------------------------------------------ profile */
/* Same bones as the TMC profile modal: accent top border, compact
   upper-case field labels, name and address rows on a grid. */

button.avatar { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
button.avatar:hover, button.avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10, 20, 40, .5); z-index: 40;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow: hidden;
}
/* The page is pinned while a dialog is open; the dialog does its own scrolling. */
body.modal-open { position: fixed; width: 100%; overflow: hidden; }
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--surface); border-radius: 12px; border-top: 4px solid var(--accent);
  box-shadow: 0 4px 16px rgba(24, 36, 32, .12), 0 16px 48px rgba(0, 0, 0, .18);
  width: min(620px, 100%); max-width: 100%; min-width: 0; max-height: 88vh; overflow-y: auto; overflow-x: hidden; padding: 22px 24px 24px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  /* The bottom-right corner drags to make a dialog wider or narrower (the
     budgets grid remembers it); never on a phone, where it fills the screen. */
  resize: horizontal;
}
.modal input, .modal select, .modal textarea { max-width: 100%; min-width: 0; }
.modal .field-row > div, .modal .fx-amount > *, .modal .link-row > * { min-width: 0; }
.modal h2 { font-size: 15px; font-weight: 700; color: var(--accent); margin: 0 0 4px; }

.modal-section { background: var(--bg); border-radius: 8px; padding: 12px 14px; margin: 6px 0 10px; }
.modal-section-title {
  font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 8px;
}
.modal-msg { font-size: 11px; margin: 2px 0 6px; min-height: 14px; }
/* The item form in sections: a heading each, a rule between, and the parts
   most people skip folded away behind a summary line. */
.fs { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.fs:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }
.fs-title { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.fs .field-row + .field-row, .fs .field-row + label, .fs .field-row + .check-row { margin-top: 2px; }
details.fs-more > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; padding: 2px 0; user-select: none; }
details.fs-more > summary::-webkit-details-marker { display: none; }
details.fs-more > summary::before { content: '▸'; color: var(--ink-soft); font-size: 12px; }
details.fs-more[open] > summary::before { content: '▾'; }
details.fs-sub { margin-top: 8px; }
details.fs-sub > summary { font-size: 13px; color: var(--accent); }
.form-compact .who-row { padding-top: 8px; }
.modal-msg.ok { color: var(--good); }
.modal-msg.bad { color: var(--bad); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
/* The item form is long enough to scroll inside the dialog, so Save stays
   put at the bottom rather than being something you have to go and find. */
.modal .modal-actions {
  position: sticky; bottom: -24px; z-index: 1;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 12px 0; margin-bottom: -24px;
}

/* ------------------------------------------------------- members etc */

.auth-card-wide { max-width: 560px; }
.auth-section { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 0; }
.auth-hint { font-size: 12px; color: var(--ink-soft); margin: 6px 0 0; }

.check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 8px 0; }
.check-row input[type="checkbox"], .check-row input[type="radio"] { width: auto; margin: 0; flex: 0 0 auto; }
.seg { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 8px; }
.seg .check-row { margin: 2px 0; }
.share-row { display: grid; grid-template-columns: 1fr 130px; gap: 8px; align-items: center; padding: 2px 0; }
.share-row .check-row { margin: 0; }
.share-row .share-in { margin: 0; }
.share-row .share-in[hidden] { display: none; }
.pay-row { display: grid; grid-template-columns: 1fr 130px; gap: 8px; align-items: center; padding: 2px 0; }
.pay-row .check-row { margin: 0; }
.pay-row .pay-in { margin: 0; }
.auth-hint.good { color: var(--good); font-weight: 600; }
.auth-hint.bad { color: var(--bad); font-weight: 600; }

/* find a place, in the item form */
.place-find { position: relative; margin-top: 6px; }
.place-find input { font-size: 13px; background: var(--bg); }
.place-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14); max-height: 240px; overflow-y: auto; }
.place-hit { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; font: inherit; cursor: pointer; border-bottom: 1px solid var(--line); }
.place-hit:last-child { border-bottom: 0; }
.place-hit:hover, .place-hit:focus-visible { background: var(--accent-soft); outline: none; }
.place-name { font-weight: 600; font-size: 14px; }
.place-addr { font-size: 12px; color: var(--ink-soft); }
.place-none { padding: 8px 10px; }
.place-menu { position: fixed; z-index: 100000; left: 0; top: 0; }

/* plan with AI */
.btn-ai { background: linear-gradient(135deg, #f3ecff, #e6f0ff); border-color: #c9b8f2; }
.btn-ai:hover { border-color: #8b6fd6; }
.ai-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; max-height: 52vh; overflow-y: auto; }
.ai-row { display: grid; grid-template-columns: 22px 130px 1fr auto; gap: 8px; align-items: start; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; }
.ai-row:hover { background: var(--bg); }
.ai-row input { width: auto; margin: 3px 0 0; }
.ai-when { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 12px; padding-top: 2px; }
.ai-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-cost { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
/* On a phone: tick box, then when and cost on the first line, then the
   title and details across the full width underneath. */
@media (max-width: 640px) {
  .ai-row { grid-template-columns: 22px 1fr auto; }
  .ai-when { grid-column: 2; grid-row: 1; }
  .ai-cost { grid-column: 3; grid-row: 1; }
  .ai-main { grid-column: 2 / 4; grid-row: 2; }
}

/* versions */
.ver-card { margin-top: 14px; }
.ver-itinerary { border-left: 4px solid var(--accent); }
.ver-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ver-head .grow { flex: 1; min-width: 200px; }
.ver-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ver-body { margin-top: 10px; }
.ver-list { display: flex; flex-direction: column; gap: 4px; }
.ver-day { font-size: 12px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; margin: 8px 0 2px; }
.ver-row.picked { background: var(--accent-soft); border-color: var(--accent); }
.build-bar { position: sticky; top: 6px; z-index: 5; margin-top: 12px; border: 1px solid var(--accent); background: var(--accent-soft); }
.build-bar .inline-form { align-items: center; }
.build-bar input { min-width: 200px; }
.build-bar select { max-width: 100%; }
.q-item.selectable { grid-template-columns: 22px 50px 1fr auto; }
.q-item.selectable .q-sub { grid-column: 3 / 5; }
/* A traveller's colour, in front of their name or initials wherever money or people are named. */
.c-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 0; border: 1px solid rgba(0,0,0,.18); box-sizing: border-box; }
.who-pill .c-dot { width: 7px; height: 7px; margin-right: 2px; }
.c-swatch { display: flex; align-items: center; gap: 10px; }
.c-swatch input[type=color] { width: 44px; height: 32px; padding: 2px; margin: 0; }
.who-pill { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); border: 1px solid #c5d8ea; border-radius: 6px; padding: 1px 5px; vertical-align: 1px; white-space: nowrap; }
.qdur { color: var(--ink-soft); }
.route-link { font-size: 11px; white-space: nowrap; color: var(--accent); text-decoration: none; border: 1px solid #c5d8ea; border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.route-link:hover { background: var(--accent-soft); }
.item-pp { display: block; font-size: 11px; font-weight: 400; color: var(--ink-soft); white-space: nowrap; text-align: right; }
.who-row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0 2px; }
.ports-rows { display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow-y: auto; margin-bottom: 8px; }
.port-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; }
.port-row input { margin: 0; }
.port-day { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.flight-lookup { flex: 0 0 auto; display: flex; flex-direction: column; }
.zone-row > div { flex: 1 1 200px; min-width: 0; }
.zone-row select { min-width: 0; max-width: 100%; }
#flight-row > div { flex: 1 1 110px; min-width: 0; }
#flight-row > div:first-child { flex: 2 1 170px; }
#flight-row input, #flight-row select { min-width: 0; }
.flight-lookup label { visibility: hidden; }
.who-box { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; }
.who-box input { width: auto; margin: 0; }
.q-item .sel, .note .sel { width: auto; margin: 3px 0 0; }
.note.selectable { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: start; }
.note.selectable .qd { grid-column: 2; }
@media (max-width: 640px) { .q-item.selectable { grid-template-columns: 22px 44px 1fr; } .q-item.selectable .qr { grid-column: 2 / 4; } }
/* the item form, tightened: smaller labels and inputs, three-up rows, the
   rarely-needed fields folded away */
.form-compact label { margin: 8px 0 3px; font-size: 12px; }
.form-compact input, .form-compact select, .form-compact textarea { padding: 7px 9px; font-size: 14px; }
.form-compact .field-row { gap: 10px; }
.form-compact .field-row > div { flex: 1 1 150px; }
.form-compact .money-row { gap: 8px; }
.form-compact .money-row > div { flex: 1 1 96px; min-width: 0; }
.form-compact .money-row input, .form-compact .money-row select { min-width: 0; width: 100%; }
.form-compact .split-row { gap: 8px; }
.form-compact .split-row > div { flex: 1 1 120px; min-width: 0; }
.form-compact .split-row select { min-width: 0; width: 100%; }
.form-compact .auth-hint { margin: 4px 0 0; }
.form-compact .check-row { margin: 0; min-height: 34px; }
.form-compact .allday-row { margin: 4px 0 0 2px; min-height: 0; font-size: 12px; color: var(--ink-soft); }
.form-compact .more-details { margin: 10px 0 0; border-top: 1px dashed var(--line); padding-top: 6px; }
.form-compact .more-details > summary { margin: 0 0 4px; }
.form-compact .place-find { margin-top: 0; }
.form-compact .place-find input { background: var(--surface); }
.form-compact textarea { min-height: 54px; }
.place-hit.hi { background: var(--accent-soft); }

/* ------------------------------------------------------------- join */

/* --------------------------------------------------------- club menu */

.club-menu { position: relative; }
.club-menu > summary { list-style: none; cursor: pointer; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.club-menu > summary::-webkit-details-marker { display: none; }
.club-menu > summary .caret { font-size: 11px; }
.club-menu[open] > summary { color: var(--ink); }
.club-menu-list {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; min-width: 260px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .14); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.club-menu-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  padding: 8px 10px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 14px;
  color: var(--ink); text-decoration: none; cursor: pointer; text-align: left;
}
.club-menu-item:hover { background: var(--accent-soft); }
.club-menu-item.current { font-weight: 700; }
.club-menu-item small { color: var(--ink-soft); font-size: 12px; }
a.club-menu-item { color: var(--accent); border-top: 1px solid var(--line); border-radius: 0; margin-top: 2px; padding-top: 10px; }
a.club-menu-item + a.club-menu-item { border-top: 0; margin-top: 0; padding-top: 8px; }
/* ------------------------------------------------------------ landing */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.auth-home { color: inherit; text-decoration: none; }

body.lp { background: var(--surface); }
.lp-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px; max-width: 1080px; margin: 0 auto;
}
.lp-brand { font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.lp-nav { display: flex; align-items: center; gap: 18px; }
.lp-nav a { color: var(--ink-soft); text-decoration: none; font-size: 14px; }
.lp-nav a:hover { color: var(--ink); }
.lp-nav .btn { color: var(--ink); }
.lp-nav .btn-primary, .lp-nav .btn-primary:hover { color: #fff; }

.lp-hero {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center;
  max-width: 1080px; margin: 0 auto; padding: 48px 24px 64px;
}
.lp-hero h1 { font-size: 40px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 16px; }
.lp-hero-text p { font-size: 17px; color: var(--ink-soft); margin: 0 0 12px; max-width: 520px; }

.lp-doors { display: grid; gap: 16px; }
.lp-door {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 22px 22px 18px;
}
.lp-door h2 { margin: 0 0 6px; font-size: 20px; }
.lp-door > p { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; }
.lp-fine { font-size: 12px; color: var(--ink-soft); margin: 10px 0 0 !important; }
.lp-fine a { color: var(--accent); }
.lp-code-form { display: flex; gap: 8px; }
.lp-code-form .code-input { flex: 1; min-width: 0; }
.lp-code-form .btn { flex: 0 0 auto; }

.lp-section { max-width: 1080px; margin: 0 auto; padding: 56px 24px; }
.lp-section > h2 { font-size: 28px; letter-spacing: -.01em; margin: 0 0 28px; }
.lp-alt { max-width: none; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lp-alt .lp-features { max-width: 1032px; margin: 0 auto; }

.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-steps li { position: relative; padding-top: 44px; }
.lp-step-n {
  position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center;
}
.lp-steps h3, .lp-feature h3, .lp-role h3 { margin: 0 0 6px; font-size: 17px; }
.lp-steps p, .lp-feature p, .lp-role p { margin: 0; color: var(--ink-soft); font-size: 15px; }

.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px; }
.lp-feature { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }

.lp-cta { display: flex; gap: 10px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }

.lp-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-soft);
}
.lp-foot a { color: var(--ink-soft); }

@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; padding-top: 24px; }
  .lp-hero h1 { font-size: 32px; }
  .lp-steps, .lp-features { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .lp-nav a:not(.btn) { display: none; }
  .lp-code-form { flex-direction: column; }
}
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }

/* --------------------------------------------------------------- logo */

.brand-icon { width: 26px; height: 26px; vertical-align: -7px; margin-right: 8px; }
a.brand-mark { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
a.brand-mark .brand-icon { vertical-align: middle; }
.lp-brand .brand-icon { width: 28px; height: 28px; vertical-align: -8px; }
.lp-logo { width: 360px; max-width: 100%; height: auto; margin: 0 0 18px -4px; display: block; }
.auth-logo { display: block; margin: -4px 0 14px; }
.auth-logo img { width: 300px; max-width: 100%; height: auto; display: block; }

tr.current td { background: var(--accent-soft); }

details[open] > summary .chev { transform: rotate(45deg); }

.btn-danger:hover { color: var(--bad); border-color: var(--bad); }

/* the action icons stay visible when a wide table scrolls sideways */
.col-actions { position: sticky; right: 0; background: var(--surface); box-shadow: -8px 0 8px -8px rgba(0,0,0,.18); width: 1%; white-space: nowrap; }
thead .col-actions { background: var(--bg); }

/* -------------------------------------------------------------- print */

.print-head { display: none; }

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .topbar, .tabs, .toast, .modal-backdrop, .no-print, .col-actions, .btn, .sub, .trip-bar { display: none !important; }
  .print-head { display: block; font-size: 14pt; font-weight: 700; margin: 0 0 4pt; }
  .print-only { display: block !important; color: #444; margin-bottom: 8pt; }
  .view { padding: 0; max-width: none; }
  h1 { font-size: 18pt; margin: 0 0 6pt; }
  h2 { font-size: 13pt; margin: 12pt 0 4pt; }
  .table-wrap { overflow: visible; border: 0; box-shadow: none; }
  table { width: 100%; border-collapse: collapse; page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  th, td { border-bottom: 1px solid #bbb; padding: 4pt 6pt; font-size: 10pt; vertical-align: top; }
  th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pill, .date-chip { border: 1px solid #999; background: none !important; color: #000 !important; }
  .dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: #000; text-decoration: none; }
  @page { margin: 14mm; }
}
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { color: var(--ink); }

th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--ink); }
th.sorted { color: var(--accent); }

.modal { position: relative; }
.modal-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.modal-x:hover, .modal-x:focus-visible { color: var(--ink); background: var(--bg); outline: none; }
.modal h2 { padding-right: 32px; }
.modal h2.draggable { cursor: move; user-select: none; touch-action: none; }
.modal-grip { display: flex; align-items: center; gap: 8px; margin: -22px -24px 12px; padding: 6px 44px 6px 14px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600;
  cursor: move; user-select: none; touch-action: none; border-bottom: 1px solid #c5d8ea; }
.modal-grip .grip-dots { font-size: 14px; letter-spacing: -2px; opacity: .8; }
.modal-grip .muted { font-weight: 400; }
.modal { transition: none; }

/* password show/hide */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 40px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--ink-soft); cursor: pointer; padding: 4px; border-radius: 6px; line-height: 0; }
.pw-eye:hover, .pw-eye:focus-visible { color: var(--accent); background: var(--accent-soft); outline: none; }

/* The pinned action column is sticky, so each cell is its own layer; lift the one being hovered above the rows below. */
td.col-actions:hover, td.col-actions:focus-within { z-index: 30; }

/* =====================================================================
   TMTR — trips, itinerary, budget
   ===================================================================== */

.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.section { margin: 26px 0 10px; font-size: 16px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.good, .good { color: var(--good); }
td.bad, .bad, .over { color: var(--bad); }
.small { font-size: 12px; }

.empty { text-align: center; padding: 34px 22px; }
.empty h2 { margin: 0 0 6px; }
.empty p { max-width: 46ch; margin: 0 auto 16px; }

/* the strip under the tabs naming the open trip */
.trip-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 5px 16px;
  background: var(--surface);
}
.trip-bar-main, .trip-bar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trip-bar-name { font-size: 15px; }
.trip-tabs { margin-left: auto; display: flex; gap: 2px; }
.tab.tab-act { color: var(--ink-soft); }
a.tab { text-decoration: none; display: inline-block; }

/* trip cards */
.trip-card {
  display: block; text-align: left; padding: 0; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  border-radius: var(--radius); box-shadow: var(--shadow); font: inherit; color: inherit;
}
.trip-card:hover { border-color: var(--accent); }
.trip-card-top { display: block; height: 6px; }
.trip-card-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.trip-card-name { font-weight: 700; font-size: 16px; }
.trip-card-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pill-soon { color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.trip-card-foot {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px;
}

.meter { display: block; height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; margin-top: 8px; }
.meter-fill { display: block; height: 100%; background: var(--accent); }
.meter-fill.over { background: var(--bad); }

.item-cost { font-variant-numeric: tabular-nums; font-weight: 600; }
.item-cost b, .ai-cost b { font-weight: 700; }
.btn-pay { padding: 1px 8px; font-size: 11px; min-height: 24px; border-radius: 999px; }
.btn-pay.is-set { background: #e3f0e9; border-color: #bfdccc; color: var(--good); }
.btn-pay.is-set:hover { border-color: var(--good); }
.pay-choices { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; }
.pay-choices .btn { text-align: left; }
.import-map td, .import-map th { vertical-align: top; }
.import-map td:first-child { font-variant-numeric: tabular-nums; }
.import-map select { min-width: 160px; }
.form-error { color: var(--bad); font-weight: 600; }

/* settling up */
.settle-list { margin: 6px 0 0; padding-left: 18px; }
.settle-list li { margin: 4px 0; }
.share-list { list-style: none; margin: 0 0 10px; padding: 0; }
.share-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); }
.share-list code { font-size: 12px; background: var(--bg); padding: 2px 6px; border-radius: 4px; }

.split-row { align-items: center; }
.split-row > div:first-child { padding-top: 6px; }
details.fine > summary { cursor: pointer; color: var(--ink-soft); font-size: 13px; margin: 6px 0; }

/* =====================================================================
   print.php and plan.php — the printed trip plan
   ===================================================================== */

.doc { max-width: 800px; margin: 0 auto; padding: 24px; }
.doc-cover { border-bottom: 3px double var(--ink); padding-bottom: 14px; margin-bottom: 18px; }
.doc-cover h1 { margin: 0 0 4px; font-size: 26px; }
.doc-meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--ink-soft); font-size: 13px; }
.doc h2 { border-bottom: 1px solid var(--line); padding-bottom: 3px; margin: 22px 0 8px; font-size: 16px; }
.doc-day { page-break-inside: avoid; margin-bottom: 14px; }
.doc-day h3 { margin: 14px 0 6px; font-size: 14px; background: var(--bg); padding: 4px 8px; }
.doc-item { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.doc-item:last-child { border-bottom: 0; }
.doc-item .t { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.doc-item .d { font-size: 12px; color: var(--ink-soft); }
.doc-item .c { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-foot { margin-top: 26px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-soft); }

.doc-serif { font-family: Georgia, "Times New Roman", serif; }
.doc-serif h1, .doc-serif h2, .doc-serif h3 { font-family: Georgia, "Times New Roman", serif; }

@media print {
  .doc { max-width: none; padding: 0; }
  .doc-day h3 { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .trip-card { display: none !important; }
  .doc-item { border-bottom: 1px solid #ccc; }
}

/* the trip book */
.book-cover { padding: 36px 0 26px; margin-bottom: 26px; border-bottom: 3px double var(--ink); }
.book-band { height: 14px; background: var(--accent); border-radius: 3px; margin-bottom: 28px; }
.book-label { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: var(--ink-soft); margin: 0 0 8px; }
.book-cover h1 { font-size: 34px; line-height: 1.1; margin: 0 0 8px; }
.book-cover .doc-sub { font-size: 18px; color: var(--ink-soft); margin: 0 0 16px; }
.book-dates { font-size: 15px; margin: 0 0 4px; }
.book-people { color: var(--ink-soft); margin: 0 0 14px; }
.book-summary { max-width: 62ch; }
.book-fine { font-size: 12px; color: var(--ink-soft); margin-top: 18px; }
.book h3 { font-size: 14px; margin: 18px 0 6px; }
.book-glance table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 10px; }
.book-glance th, .book-glance td { text-align: left; vertical-align: top; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.book-glance th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); font-weight: 600; }
.daynum { display: inline-block; background: var(--ink); color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.daycost { float: right; font-weight: 400; }
.doc-night .d { font-style: italic; }
.doc-notes { font-size: 12px; margin-top: 3px; color: var(--ink); }
.doc-item.cancelled strong { text-decoration: line-through; }
.export-options { margin: 6px 0 12px 22px; }

/* the trips table: fits the page on a desktop; on a phone each trip is a
   labelled block, so nothing ever scrolls sideways */
.trips-wrap { overflow: visible; }
.trips-table { table-layout: fixed; width: 100%; font-size: 13px; }
.trips-table th, .trips-table td { padding: 8px 6px; white-space: normal; overflow-wrap: anywhere; }
.trips-table th { font-size: 11px; letter-spacing: .02em; }
.trips-table th.num { text-align: right; }
.trips-table td .num { text-align: right; display: block; }
.trips-table td { vertical-align: top; }
.trips-table th:first-child, .trips-table td.trip-cell { width: 26%; }
.trips-table .trip-cell strong { font-size: 14px; }
/* Expand: a row a kind under each trip, the kind named once in the first
   column and its figures lined up under Budget, Actual, My share, Others. */
.trips-table tr.trip-kind-row td { padding: 1px 6px 2px; font-size: 12px; color: var(--ink-soft); border-top: 0; cursor: pointer; }
.trips-table tr.trip-kind-row td.kind-name { padding-left: 26px; }
.trips-table tr.trip-kind-row:last-child td, .trips-table tbody tr.trip-kind-row + tr.trip-row td { border-top: 1px solid var(--line); }
.trips-table tr.trip-kind-row:last-child td { border-top: 0; padding-bottom: 8px; }
.trips-table tr.trip-kind-row:hover td { background: var(--accent-soft); }
.trips-table .basis-note { font-size: 10px; color: var(--ink-soft); }
.trips-table .trip-card-pills { margin-top: 4px; }
@media (max-width: 900px) {
  .trips-wrap { border: 0; background: none; }
  .trips-table thead { display: none; }
  .trips-table, .trips-table tbody, .trips-table tfoot { display: block; }
  .trips-table tr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 10px; padding: 12px 14px; margin-bottom: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  .trips-table td { display: block; border: 0; padding: 0; width: auto; }
  .trips-table td.trip-cell { grid-column: 1 / -1; width: auto; margin-bottom: 4px; }
  .trips-table td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
  .trips-table td .num { text-align: left; }
  .trip-row:hover td { background: none; }
  /* The kind rows hang off the card above them, four figures across. */
  .trips-table tr.trip-kind-row { margin: -11px 0 10px; border-top: 0; border-radius: 0; padding: 2px 14px 4px; box-shadow: none; grid-template-columns: repeat(4, 1fr); }
  .trips-table tr.trip-kind-row td.kind-name { padding-left: 0; margin-bottom: 0; }
  .trips-table tr.trip-kind-row td.blank { display: none; }
  .trips-table tr.trip-kind-row:last-child { border-radius: 0 0 var(--radius) var(--radius); padding-bottom: 10px; }
}
@media (max-width: 480px) {
  .trips-table tr { grid-template-columns: repeat(2, 1fr); }
}
.trip-row { cursor: pointer; }
.trip-row:hover td { background: var(--accent-soft); }
.trip-row.current td { background: var(--accent-soft); }
.trip-row.current td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.trip-row.current .trip-cell strong { color: var(--accent); }
.trip-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.trip-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }

@media print {
  .book-cover { border-bottom: 0; padding-top: 34mm; break-after: page; page-break-after: always; }
  .book-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .book-glance { break-after: page; page-break-after: always; }
  .book-money { break-before: page; page-break-before: always; }
  .daynum { background: #000 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* itinerary day blocks: four corners and the notes underneath */
.day-block { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 10px; box-shadow: var(--shadow); overflow: hidden; }
.day-block { scroll-margin-top: 58px; }
.day-go { position: sticky; top: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0 8px; margin: 0 0 6px; background: var(--bg); }
.day-go-pick { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.day-go-pick label { white-space: nowrap; }
/* The list is as wide as its longest day, which can be a long way; cap it and let the rest scroll off. */
.day-go-pick select { max-width: 460px; min-width: 0; text-overflow: ellipsis; }
.day-go-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.btn-expense { border-color: #bfdccc; background: #e3f0e9; color: var(--good); font-weight: 600; }
.kind-row { cursor: pointer; }
.kind-row:hover td { background: var(--accent-soft); }
.kind-row.on td { background: #e3f0e9; }
.kind-row .pill { margin-left: 6px; vertical-align: 1px; }
.expense-filter { margin: 0 0 12px; padding: 10px 16px 6px; }
.expense-filter .field-row > div { flex: 1 1 140px; }
.expense-filter label { margin-top: 4px; }
.expense-filter p { margin: 8px 0 4px; }
.expense-row { cursor: pointer; }
/* Local currencies on the trip form: a small table, one line a currency.
   The currency, the rate to the trip currency, the same the other way, the buttons. */
.fx-head, .fx-row { display: grid; grid-template-columns: minmax(120px, .9fr) minmax(200px, 1.3fr) minmax(110px, .9fr) auto; gap: 6px 10px; align-items: center; }
.fx-head { padding: 0 0 4px; }
.fx-row { padding: 6px 0; border-top: 1px solid var(--line); }
.fx-row select { margin: 0; }
.fx-eq { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fx-eq .fx-lbl { white-space: nowrap; }
.fx-eq .calc-wrap, .fx-eq input { flex: 1 1 80px; min-width: 0; }
.fx-eq input { width: auto; margin: 0; }
.fx-inv { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 0; }
.fx-x { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }
/* The rate box on "At a different exchange rate" (Budget), with Look up beside it. */
.fx-apply { display: flex; align-items: center; gap: 6px; }
.fx-apply input { flex: 1 1 80px; min-width: 0; width: auto; margin: 0; }
.fx-apply .btn { white-space: nowrap; }
.fx-x .icon-btn { width: 30px; height: 30px; }
@media (max-width: 640px) {
  .fx-head { display: none; }
  .fx-row { grid-template-columns: 1fr auto; }
  .fx-row select { grid-column: 1 / 2; }
  .fx-row .fx-x { grid-column: 2 / 3; grid-row: 1 / 3; align-self: start; }
  .fx-row .fx-eq { grid-column: 1 / 2; }
  .fx-row .fx-inv { grid-column: 1 / 3; font-size: 12px; }
}
/* A calculator button beside a money box, and the keypad it opens. */
.calc-wrap { display: flex; gap: 4px; align-items: stretch; width: 100%; }
.calc-wrap input { flex: 1 1 auto; min-width: 0; }
.calc-btn { flex: 0 0 auto; width: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--muted); font-size: 15px; cursor: pointer; padding: 0; }
.calc-btn:hover, .calc-btn:focus { color: var(--accent); border-color: var(--accent); outline: none; }
#calc { position: fixed; inset: 0; background: rgba(10, 20, 40, .45); z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
#calc[hidden] { display: none; }
.calc-sheet { background: var(--card); border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.25); padding: 12px; width: 100%; max-width: 360px; }
@media (min-width: 640px) { #calc { align-items: center; } .calc-sheet { border-radius: 14px; } }
#calc-line { font-size: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.calc-answer { text-align: right; min-height: 22px; color: var(--muted); font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc-key { font-size: 20px; padding: 12px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); cursor: pointer; }
.calc-key.op { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.calc-key.fn { color: var(--muted); }
.calc-key:active { filter: brightness(.92); }
.calc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.calc-actions #calc-equals { font-weight: 700; min-width: 48px; }
.miles-list { list-style: none; padding: 0; margin: 6px 0 0; }
.miles-list li { padding: 3px 0; }
.fx-amount { display: flex; gap: 6px; }
.fx-amount input { flex: 1 1 100px; }
.fx-amount select { width: auto; flex: 0 0 auto; }
.expense-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--accent); }
th.sortable.on { color: var(--accent); }
.btn-expense:hover { background: #d3e8dc; }
/* On the itinerary the tick-box bar sits under the sticky day row; on Versions it is the top thing. */
.day-go ~ .build-bar { top: calc(var(--tabs-h, 48px) + 52px); }
.day-go label { margin: 0; font-size: 13px; color: var(--ink-soft); }
.day-go select { width: auto; max-width: 100%; min-height: 34px; padding: 4px 28px 4px 10px; font-size: 13px; }
.day-block-head { --day: var(--accent); display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 10px; color: var(--ink); line-height: 1.2;
  background: color-mix(in srgb, var(--day) 11%, var(--surface)); border-bottom: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--day); }
.day-block-head .dnum { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--day); background: color-mix(in srgb, var(--day) 16%, var(--surface)); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.day-block-head .dname { font-size: 14px; font-weight: 700; white-space: nowrap; }
.day-block-head { cursor: pointer; }
.day-block-head .dfold { background: none; border: 0; padding: 0 2px; margin: 0 -2px 0 -4px; font: inherit; color: var(--ink-soft); cursor: pointer; line-height: 1; }
.day-block-head .dfold .chev { display: inline-block; font-size: 18px; transform: rotate(90deg); transition: transform .15s; }
.day-block.folded .day-block-head .dfold .chev { transform: rotate(0deg); }
.day-block.folded .day-grid, .day-block.folded .day-notes, .day-block.folded .day-empty { display: none; }
.day-go-pick .link-btn.small { font-size: 12px; margin-left: 8px; white-space: nowrap; }
.day-go { margin-top: 6px; }
@media (max-width: 640px) {
  .day-go { flex-wrap: wrap; }
  .day-go-pick { flex: 1 1 100%; }
  .day-go-pick select { flex: 1 1 auto; min-width: 0; }
  .day-go-actions { flex: 1 1 100%; justify-content: flex-end; }
}
.day-block-head .dloc { font-size: 13px; color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-block-head .dloc::before { content: "·"; margin-right: 8px; opacity: .7; }
.day-block-head .dloc-edit { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer; text-align: left; }
.day-block-head .dloc-edit:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.day-block-head .dloc-edit.empty { font-style: italic; opacity: .7; }
.day-block-head .darrow { opacity: .7; margin: 0 2px; }
.day-block-head .dcost { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; background: var(--surface); border: 1px solid var(--line); padding: 2px 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.day-block-head .dpp { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-block-head .dpp-one { white-space: nowrap; }
.day-block-head .btn { min-height: 28px; padding: 3px 9px; font-size: 12px; }
.day-block-head .dcost + .btn, .day-block-head .dpp + .btn { margin-left: 0; }
@media (max-width: 900px) { .day-block-head .dpp { white-space: normal; } }
.day-block-head .dloc + .btn, .day-block-head .dname + .btn { margin-left: auto; }
/* Left half: the day in time order (journeys and things to do), spanning
   both rows. Right half: the stay above the meals. */
.day-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.quad { padding: 6px 10px 8px; border-top: 1px solid var(--line); border-left: 4px solid var(--q); min-height: 0; }
.quad-day { grid-row: 1 / 3; border-right: 1px solid var(--line); }
.quad-stay   { --q: #6d5bd0; --q-soft: #f3f0fb; }
.quad-day    { --q: #1f78c1; --q-soft: #eaf3fb; }
.quad-meals  { --q: #d98324; --q-soft: #fdf3e6; }
/* Inside the day column, a thing to do keeps its own green, so the eye
   still tells a hike from a train at a glance. */
.quad-day .q-item.k-activity .qe, .quad-day .q-item.k-other .qe { filter: none; }
.quad-day .q-item.k-activity:hover, .quad-day .q-item.k-other:hover { background: #e9f6ef; }
.q-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--q); margin-bottom: 2px; }
.q-head .cnt { margin-left: auto; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; background: var(--q-soft); padding: 0 7px; border-radius: 999px; }
.q-empty { color: var(--ink-soft); font-size: 12px; font-style: italic; padding: 1px 6px 2px; }
.q-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 6px; align-items: start; padding: 3px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1.3; }
.q-item + .q-item { border-top: 1px dashed var(--line); border-radius: 0 0 8px 8px; }
.q-item:hover { background: var(--q-soft); }
.q-item:focus-visible { outline: 2px solid var(--q); outline-offset: 1px; }
.q-item .qt { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; padding-top: 1px; }
.q-item .qe { font-size: 15px; }
.q-item .qm { min-width: 0; }
.q-item .qtitle { font-weight: 600; }
.q-item .qd { font-size: 12px; color: var(--ink-soft); }
.q-item .qr { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
/* The cost may wrap, so a long run of miles never squeezes the title: the
   cash stays on its line, the miles go under it, smaller. */
.q-item .item-cost { white-space: normal; text-align: right; max-width: 160px; line-height: 1.25; }
.q-item .item-cost b { white-space: nowrap; }
.q-item .q-miles { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-soft); }
.q-item .q-sub { grid-column: 2 / 4; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-top: -2px; }
.q-item.cancelled .qtitle { text-decoration: line-through; opacity: .6; }
.q-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--q); font-weight: 700; margin-right: 2px; }
.day-notes { border-top: 1px solid var(--line); padding: 6px 10px 8px; background: #fbf9f2; }
.day-notes .q-head { color: #7a6a2f; }
.day-notes .note { padding: 3px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.day-notes .note + .note { border-top: 1px dashed #e6e0c8; }
.day-notes .note:hover { background: rgba(0,0,0,.04); }
.day-notes .note .qd { font-size: 12px; color: var(--ink-soft); white-space: pre-line; margin-top: 2px; }
.day-block.empty .day-block-head { padding: 5px 14px; opacity: .9; }
.day-empty { padding: 4px 14px 6px; color: var(--ink-soft); font-size: 12px; }
@media (max-width: 720px) {
  .day-grid { grid-template-columns: 1fr; }
  .quad:nth-child(odd) { border-right: 0; }
  .q-item { grid-template-columns: 44px 1fr; }
  .q-item .qr { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .q-item .item-cost { text-align: left; max-width: none; }
  .q-item .q-miles { display: inline; margin-left: 4px; }
  .q-item .q-sub { grid-column: 2; }
  .day-block-head .dname { font-size: 18px; }
}

/* =====================================================================
   Polish, and phones
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; overscroll-behavior-x: none; }
body { overscroll-behavior-x: none; }
.modal { overscroll-behavior-x: none; }
.tabs { position: sticky; top: 0; z-index: 20; scrollbar-width: none; }
.day-go { top: var(--tabs-h, 48px); }
.day-block { scroll-margin-top: calc(var(--tabs-h, 48px) + 62px); }
.tabs::-webkit-scrollbar { display: none; }
.btn { min-height: 38px; line-height: 1.3; }
.btn-sm { min-height: 32px; }
.brand-club { max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-bar-actions { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.trip-bar-actions::-webkit-scrollbar { display: none; }
.trip-bar-actions .btn { white-space: nowrap; flex: 0 0 auto; }
.card + .card { margin-top: 14px; }
/* Cards laid out by a grid keep to the grid: no stacking margin, equal heights. */
.grid > .card { margin-top: 0; height: 100%; box-sizing: border-box; }
.stat { display: flex; flex-direction: column; justify-content: center; min-height: 96px; }
/* Book & files: three columns — the two forms stretched to the same
   height with their buttons at the foot, and the two short cards stacked
   in the third column so the page has no hole in it. */
.files-head { margin-bottom: 14px; }
.files-head .muted { flex: 1 1 auto; }
.files-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.files-grid .card { margin: 0; display: flex; flex-direction: column; }
.files-grid .card > form { display: flex; flex-direction: column; flex: 1 1 auto; }
.files-col { display: flex; flex-direction: column; gap: 16px; }
.files-col .card { flex: 0 0 auto; }
.files-grid h3 { margin: 0 0 4px; font-size: 16px; }
.files-grid .lead { margin: 0 0 6px; }
.files-grid .group { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 14px 0 4px; }
.files-grid .ck-desc { display: block; color: var(--ink-soft); font-size: 12px; line-height: 1.3; }
.files-grid .export-options { margin: 2px 0 6px 24px; padding-left: 10px; border-left: 2px solid var(--line); }
.files-grid .export-options .group { margin-top: 6px; }
.files-sub + .files-sub { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.files-sub .modal-actions { margin-top: 8px; padding-top: 0; }
@media (max-width: 960px) {
  .files-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .files-col { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .files-col .card { flex: 1 1 280px; }
}
@media (max-width: 640px) {
  .files-grid { grid-template-columns: 1fr; }
  .files-col { flex-direction: column; }
  .files-col .card { flex: 0 0 auto; }
}
.page-head.sub { margin-top: 18px; }
.page-head.sub h2 { margin: 0; font-size: 18px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: 14px; }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; }
.files-grid .modal-actions { position: static; margin-top: auto; padding-top: 14px; }
.files-grid .check-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 8px; align-items: start; margin: 7px 0; font-size: 13px; line-height: 1.3; }
.files-grid .check-row input { margin: 2px 0 0; }

@media (max-width: 640px) {
  .view { padding: 14px 12px 40px; }
  .card { padding: 14px; }
  h1 { font-size: 20px; }
  h2 { font-size: 16px; margin-top: 20px; }

  /* top bar: the mark, the workspace, you */
  .topbar { flex-wrap: nowrap; gap: 8px; padding: 10px 12px; }
  .brand { gap: 8px; flex-wrap: nowrap; min-width: 0; }
  .brand-text { display: none; }
  .brand-icon { margin-right: 0; }
  .brand-club { max-width: 42vw; }
  .env-badge { display: none; }
  .topbar-right { gap: 6px; flex: 0 0 auto; }
  .role-chip { display: none; }
  .topbar-right .btn-ghost { padding: 6px 8px; font-size: 13px; min-height: 0; }
  .club-menu-list { min-width: 220px; max-width: calc(100vw - 24px); }

  .tab { padding: 12px 12px; font-size: 14px; }

  /* the trip strip: name on one line, the buttons scroll sideways under it */
  .trip-bar { padding: 8px 12px; gap: 6px; }
  .trip-bar-main { width: 100%; gap: 8px; }
  .trip-bar-name { font-size: 15px; }
  .trip-bar-main > .muted { display: none; }
  .trip-bar-actions { width: 100%; justify-content: flex-start; gap: 6px; padding-bottom: 2px; }
  .trip-bar-actions > .muted { display: none; }

  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .btn { width: 100%; text-align: center; min-height: 42px; }

  table { font-size: 13px; }
  th, td { padding: 8px; }
  .stat-value { font-size: 24px; }
  .grid { gap: 10px; }
  .empty { padding: 24px 14px; }

  /* forms: one field per row, and 16px text so iOS does not zoom in */
  input, select, textarea { font-size: 16px; }
  .field-row { gap: 8px; }
  .field-row > div { flex-basis: 100%; }
  label { margin-top: 10px; }

  /* dialogs slide up from the bottom and keep Save in reach */
  /* On a phone the dialog fills the screen from the top. A sheet pinned to
     the bottom rides up when the keyboard opens and the field you tapped
     is no longer under your finger; a top-anchored one stays put. */
  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal {
    width: 100%; max-width: none; max-height: none; height: 100%; border-radius: 0; border-top-width: 3px; resize: none;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .modal .modal-actions {
    bottom: calc(-16px - env(safe-area-inset-bottom));
    margin-bottom: calc(-16px - env(safe-area-inset-bottom));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .modal-actions .btn { flex: 1 1 auto; text-align: center; }
  .pay-choices .btn { min-height: 44px; }
  .toast { left: 12px; right: 12px; transform: none; bottom: calc(12px + env(safe-area-inset-bottom)); text-align: center; }

  /* day blocks */
  .day-block { border-radius: 12px; margin-bottom: 14px; }
  .day-block-head { flex-wrap: wrap; gap: 6px 10px; padding: 7px 12px; }
  .day-block-head .dloc { flex-basis: 100%; white-space: normal; }
  .day-block-head .dloc::before { content: none; }
  .quad { padding: 10px 12px 12px; min-height: 0; }
  .day-notes { padding: 8px 12px 10px; }
}

@media (max-width: 380px) {
  .tab { padding: 12px 10px; font-size: 13px; }
  .brand-club { max-width: 36vw; }
}

.expense-table td, .expense-table th { white-space: nowrap; }
.expense-table td:nth-child(2) { white-space: normal; min-width: 160px; }
.expense-table td:last-child { white-space: normal; min-width: 160px; }
.expense-table tfoot .settle-final { white-space: normal; font-weight: 600; }

/* Dragging an item to another day. */
.q-item[draggable="true"], .note[draggable="true"] { cursor: grab; }
.q-item.dragging, .note.dragging { opacity: .45; }
body.dragging-item .day-block { transition: box-shadow .1s; }
.day-block.drop-target { box-shadow: 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.day-block.drop-target .day-block-head { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }

/* The day count beside the trip's name. */
.trip-bar-days { display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 1px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }

/* The row's ⋯ menu, and the toast's one action. */
.q-menu { background: none; border: 1px solid transparent; border-radius: 6px; color: var(--ink-soft); font: inherit; font-size: 15px; line-height: 1; padding: 0 5px; cursor: pointer; }
.q-menu:hover, .q-menu:focus-visible { border-color: var(--line); background: var(--surface); color: var(--ink); }
.row-menu { position: fixed; z-index: 45; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, .16); padding: 4px; }
.row-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.row-menu button:hover, .row-menu button:focus-visible { background: var(--accent-soft); outline: none; }
.row-menu button.danger { color: var(--bad); }
.q-item.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.toast .toast-act { margin-left: 14px; background: none; border: 1px solid rgba(255, 255, 255, .55); color: #fff; border-radius: 6px; padding: 3px 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.toast .toast-act:hover { background: rgba(255, 255, 255, .12); }
/* Files on an item. */
.attach { margin-top: 12px; }
.attach-list { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 13px; }
.attach-list li { padding: 5px 0; border-bottom: 1px dashed var(--line); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.attach-list li a:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.attach-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.attach-btn { margin: 0; font-weight: 500; cursor: pointer; }
.attach-btn.busy { opacity: .6; cursor: progress; }
.link-btn.small { font-size: 12px; }
.qclip { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
/* The trip map. */
.trip-map { height: 70vh; min-height: 420px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); background: #e9eef3; z-index: 0; }
.map-pin-wrap { background: none; border: 0; }
.map-pin { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 12px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.map-pop { font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.map-pop strong { display: block; margin-bottom: 4px; }
.map-pop-item { padding: 4px 0; border-top: 1px dashed var(--line); }
.map-pop-item .link-btn { font-size: 13px; text-decoration: none; }
.map-pop-item .link-btn:hover { text-decoration: underline; }
.map-unplaced { padding-left: 18px; margin: 0; }
.map-unplaced li { margin: 4px 0; }
.leaflet-popup-content { margin: 10px 12px; }.leaflet-top.leaflet-right .map-zoom { margin: 10px; background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* Select mode on the Trips page. */
.trips-bar { margin: 0 0 12px; }
.trips-bar select { width: auto; min-width: 160px; }
.trip-cell .trip-sel { width: auto; margin: 0 8px 0 0; vertical-align: -1px; }
.trip-row.selectable { cursor: pointer; }
#trips-select.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* Sort and filter on the Trips page. */
.trips-tools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
.trips-tools label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.trips-tools select { width: auto; padding: 5px 8px; font-size: 13px; }
.trips-tools input[type=search] { width: 150px; padding: 5px 8px; font-size: 13px; }
.trips-table tfoot td { border-top: 2px solid var(--line); border-bottom: 0; background: var(--surface); }
.trips-avg .trip-cell strong { font-size: 13px; }.q-free { font-size: 11px; color: var(--ink-soft); border: 1px dashed var(--line); border-radius: 999px; padding: 1px 8px; }

/* =====================================================================
   Phones, second pass: less chrome, more screen
   ===================================================================== */

/* Buttons that say less on a small screen carry both labels. */
.l-short { display: none; }
.signout-link { display: none; }

@media (max-width: 640px) {
  /* The top bar: sign out lives in the profile dialog instead, and the
     hub link goes; the vault stays, as a lock the size of the help button,
     because a passport is wanted most on a phone at a border. */
  .topbar-right .btn-ghost:not(.vault-link) { display: none; }
  .topbar-right .vault-link { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }
  .vault-word { display: none; }
  .signout-link { display: inline-block; margin-right: auto; }

  /* The tab row: tighter, and a fade on the right while more tabs are off screen. */
  .tab { padding: 12px 10px; font-size: 13px; }
  .tabs.more-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
  }

  /* The sticky row on the itinerary: the day list on one line, four short
     buttons sharing the next. Fold all / Open all are in the day list. */
  .day-go { padding: 4px 0 6px; gap: 6px; }
  .day-go-pick .link-btn.small { display: none; }
  .day-go-pick label { font-size: 13px; white-space: nowrap; }
  .day-go-actions { gap: 6px; }
  .day-go-actions .btn { flex: 1 1 0; padding: 0 6px; min-height: 36px; font-size: 13px; white-space: nowrap; }
  .l-full { display: none; }
  .l-short { display: inline; }

  /* Page-head buttons sit side by side rather than one per line. */
  .page-head > span { display: flex; gap: 6px; flex-wrap: wrap; }
  .page-head > span .btn { flex: 1 1 auto; width: auto; }
}

/* Touch screens: the small controls get a thumb-sized target. */
@media (pointer: coarse) {
  .q-menu { min-width: 36px; min-height: 36px; font-size: 18px; }
  .btn-pay { min-height: 32px; }
  .link-btn { padding: 4px 0; }
  .day-block-head .dfold { min-width: 36px; min-height: 36px; }
}

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

.today-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.today-head .btn-sm { flex: 0 0 auto; min-width: 40px; min-height: 40px; font-size: 20px; padding: 0; }
.today-title { flex: 1 1 auto; min-width: 0; }
.today-title h1 { margin: 0; }
.today-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.today-big { cursor: pointer; }
.today-big:hover { border-color: var(--accent); }
.tb-time { font-size: 15px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tb-title { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 2px 0 8px; }
.tb-line { margin: 4px 0; font-size: 15px; }
.tb-notes { white-space: normal; }
.tb-conf {
  display: inline-block; margin: 8px 0 4px; padding: 8px 14px; border-radius: 8px;
  background: var(--accent-soft); color: var(--ink);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; letter-spacing: .08em;
}
.tb-conf small { display: block; font-family: inherit; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.tb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.tb-actions .btn { flex: 1 1 auto; text-align: center; min-height: 44px; }
.today-list { padding-top: 4px; padding-bottom: 4px; }
.today-row { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.today-row:last-child { border-bottom: 0; }
.today-row .tr-time { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 14px; padding-top: 1px; }
.today-row .tr-title { font-weight: 600; }
.today-row .tr-sub { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.today-row.done { opacity: .55; }
.today-actions { display: flex; gap: 8px; margin: 16px 0 0; }
.today-actions .btn { flex: 1 1 0; text-align: center; min-height: 44px; }
@media (min-width: 900px) {
  .today-head, .today-big, .today-list, .today-actions, .view > .alert { max-width: 640px; }
}

/* ------------------------------------------------- budget on a phone */

.x-phone { display: none; }
details.expense-filter > summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 14px; padding: 2px 0 6px; }
details.expense-filter > summary::-webkit-details-marker { display: none; }
@media (min-width: 641px) {
  details.expense-filter > summary { display: none; }
}
@media (max-width: 640px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .budget-cards { grid-template-columns: 1fr; }
  .stat { min-height: 0; }
  .stat-value { font-size: 22px; }
  /* Each person's column goes; the line under the title says who paid and who owes. */
  .p-col { display: none; }
  .x-phone { display: block; margin-top: 2px; }
  details.expense-filter > summary::after { content: ' ▾'; color: var(--ink-soft); }
  details.expense-filter[open] > summary::after { content: ' ▴'; }
  .expense-filter .field-row > div { flex-basis: 47%; }
  .expense-filter .field-row > div[style] { flex-basis: 100% !important; }
  .expense-table td:first-child, .expense-table th:first-child { white-space: normal; width: 64px; font-size: 12px; }
}

/* ---------------------------------------------- phones, third pass */

.attach-photo { display: none; }
@media (pointer: coarse) { .attach-photo { display: inline-block; } }

/* The day's photos dialog (photos.js): wider than a form, the pictures one
   under the other, each shown whole and no taller than the screen. The
   plan itself draws no pictures. */
.modal.modal-photos { width: min(900px, 100%); }
.photo-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 10px 0 14px; }
.photo-card { position: relative; margin: 0; min-width: 0; }
.photo-card a { display: block; }
.photo-card img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.photo-card .icon-btn { position: absolute; top: 8px; right: 8px; background: var(--surface); }
.photo-card input[data-caption] { width: 100%; margin-top: 8px; transition: border-color .3s; }
.photo-card input[data-caption].saved { border-color: var(--good); box-shadow: 0 0 0 2px rgba(30, 111, 78, .18); }
.photo-card figcaption { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 640px) { .photo-grid { gap: 14px; } .photo-card img { max-height: 60vh; } }
/* ▲ ▼ on a file of an item and on a day's photo: the order they are kept in. */
.attach-list .ud, .photo-card .ud { display: inline-flex; gap: 2px; }
.attach-list .ud .link-btn, .photo-card .ud .link-btn { font-size: 11px; text-decoration: none; line-height: 1.2; padding: 1px 5px; color: var(--ink-soft); }
.attach-list .ud .link-btn:hover, .photo-card .ud .link-btn:hover { color: var(--accent); }
.attach-list .ud .link-btn[disabled], .photo-card .ud .link-btn[disabled] { opacity: .3; cursor: default; color: var(--ink-soft); }
.photo-card .ud { position: absolute; top: 8px; left: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 3px 4px; }
@media (pointer: coarse) { .attach-list .ud .link-btn, .photo-card .ud .link-btn { font-size: 15px; padding: 4px 8px; } }
/* Rearrange: the day's photos small, dragged into the order wanted. */
.photo-arrange { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin: 10px 0 14px; }
.photo-thumb { position: relative; margin: 0; aspect-ratio: 1; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.photo-thumb .photo-n { position: absolute; left: 6px; top: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--surface); color: var(--ink-soft); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.photo-thumb.dragging { opacity: .35; }
.photo-thumb.drop-before { box-shadow: -6px 0 0 0 var(--accent); }
.photo-thumb.drop-after { box-shadow: 6px 0 0 0 var(--accent); }
.photo-ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: .9; cursor: grabbing; transform: rotate(-2deg) scale(1.04); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
@media (max-width: 640px) { .photo-arrange { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; } }

/* ------------------------------------------------------ the scrapbook
   scrapbook.php: the trip as an album. On screen the pages are cream
   sheets laid on a dark table, one under the other; on paper each is a
   page. A day's page has the date, the best photo pasted in with tape,
   the day's things on post-it notes and the diary on lined paper; the
   day's other photos follow, four to six a page. Nothing here is money. */
.scrap-body { background: #4a3d33; background-image: radial-gradient(ellipse at top, #5e4e42, #3c3129 70%); margin: 0; }
.scrap { --paper: #fffaf3; --paper-line: #e6d9c8; --hand: "Segoe Print", "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive; --serif: Georgia, "Times New Roman", serif;
  max-width: 880px; margin: 0 auto; padding: 28px 16px 48px; color: #3b3129; }
.scrap-run { display: none; }
.scrap-page { position: relative; background: var(--paper); border: 1px solid var(--paper-line); border-radius: 6px; padding: 34px 38px 38px; margin: 0 0 30px;
  box-shadow: 0 2px 4px rgba(40, 28, 16, .18), 0 18px 40px rgba(20, 12, 4, .35); min-height: 520px; overflow: hidden; }
.scrap-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(120, 90, 60, .035) 31px 32px); }
.scrap-page > * { position: relative; }

/* cover: a linen board in the trip's colour, a window for the best photo, a plate with the name */
.scrap-cover { background: var(--scrap); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px); border-color: rgba(0,0,0,.25); color: #fff; text-align: center; padding: 48px 38px; }
.scrap-cover::before { display: none; }
.scrap-cover-inner { border: 2px solid rgba(255,255,255,.55); border-radius: 4px; padding: 30px 26px 24px; box-shadow: inset 0 0 0 6px rgba(0,0,0,.08); }
.scrap-label { text-transform: uppercase; letter-spacing: .26em; font-size: 12px; margin: 0 0 18px; opacity: .85; }
.scrap-window { width: min(420px, 80%); margin: 0 auto 22px; padding: 10px 10px 12px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.35); transform: rotate(-1.2deg); }
.scrap-window img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #ddd; }
.scrap-plate { display: inline-block; background: #fffaf3; color: #3b3129; padding: 16px 28px 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.2); box-shadow: 0 3px 10px rgba(0,0,0,.3); min-width: 55%; }
.scrap-plate h1 { font: 700 30px/1.15 var(--serif); margin: 0 0 4px; }
.scrap-sub { font: italic 17px var(--serif); margin: 0 0 8px; color: #6b5b4b; }
.scrap-dates { font: 15px var(--serif); margin: 0; }
.scrap-people { font: 13px var(--serif); color: #6b5b4b; margin: 8px 0 0; }
.scrap-summary { max-width: 58ch; margin: 24px auto 0; font: 15px/1.5 var(--hand); color: #fff; }
.scrap-fine { margin: 22px 0 0; font-size: 12px; letter-spacing: .08em; opacity: .8; }

/* a day's page */
.scrap-day-head { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px dashed var(--paper-line); }
.scrap-n { display: inline-block; background: var(--scrap); color: #fff; font: 700 13px/1 var(--serif); letter-spacing: .08em; text-transform: uppercase; padding: 9px 12px 8px; border-radius: 0 0 6px 6px; margin-top: -34px; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.scrap-day-head h2 { font: 700 24px/1.15 var(--serif); margin: 0; }
.scrap-place { font: italic 15px var(--serif); color: #6b5b4b; margin: 2px 0 0; }
.scrap-day-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.scrap-day.no-photo .scrap-day-body, .scrap-day.no-notes .scrap-day-body { grid-template-columns: 1fr; }
.scrap-hero { padding: 10px 4px 0; }
.scrap-stickies { display: flex; flex-wrap: wrap; gap: 14px 12px; align-content: flex-start; padding: 8px 0 0; }
.scrap-day.no-photo .scrap-stickies { gap: 18px 16px; }
.sticky { position: relative; flex: 1 1 150px; max-width: 230px; min-height: 96px; padding: 14px 14px 16px; background: #fff69b; color: #3b3129; font: 14px/1.3 var(--hand);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 2px 6px 12px rgba(40, 28, 16, .22); transform: rotate(var(--tilt, 0)); word-wrap: break-word; }
.sticky::before { content: ""; position: absolute; top: -6px; left: 50%; width: 46px; height: 14px; margin-left: -23px; background: rgba(255,255,255,.55); box-shadow: 0 1px 2px rgba(0,0,0,.12); transform: rotate(-2deg); }
.sticky.c1 { background: #ffc9d9; } .sticky.c2 { background: #c6e5ff; } .sticky.c3 { background: #c9f0c9; } .sticky.c4 { background: #e4d2ff; } .sticky.c5 { background: #ffd9b3; }
.sticky.k-meal { background: #ffe2a8; } .sticky.k-stay { background: #d8ecff; } .sticky.k-more { background: #f1f1f1; }
.sticky.k-meal, .sticky.k-stay { flex-basis: 200px; max-width: 100%; }
.sticky-when { display: block; font: 700 12px var(--hand); color: #7a6650; letter-spacing: .04em; margin-bottom: 2px; }
.sticky strong { display: block; font-weight: 700; font-size: 15px; line-height: 1.25; }
.sticky-line { display: block; margin-top: 4px; font-size: 13px; color: #574838; }
.scrap-note { margin: 22px 0 0; padding: 14px 18px 10px 44px; font: 15px/26px var(--hand); color: #3a4a7a; background: #fff; border: 1px solid var(--paper-line); border-left: 0;
  background-image: linear-gradient(90deg, transparent 32px, #f3b4b4 32px, #f3b4b4 34px, transparent 34px), repeating-linear-gradient(0deg, transparent 0 25px, #cfe0f3 25px 26px); background-position: 0 0, 0 8px; box-shadow: 0 2px 6px rgba(40, 28, 16, .12); transform: rotate(.3deg); }
.scrap-note p, .scrap-note ul, .scrap-note ol { margin: 0 0 8px; }
.scrap-note > div + div { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #cfe0f3; }
.scrap-empty { font: 17px/1.5 var(--hand); color: #6b5b4b; max-width: 48ch; margin: 60px auto; text-align: center; }

/* pasted-in photos */
.polaroid { position: relative; margin: 0; padding: 10px 10px 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 6px 16px rgba(40, 28, 16, .25); transform: rotate(var(--tilt, 0)); break-inside: avoid; page-break-inside: avoid; }
.polaroid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #e9e2d8; }
.polaroid .tape { position: absolute; top: -10px; left: 50%; width: 76px; height: 22px; margin-left: -38px; background: rgba(255, 240, 200, .75); box-shadow: 0 1px 2px rgba(0,0,0,.15); transform: rotate(-3deg); }
.polaroid figcaption { padding: 9px 2px 2px; font: 15px/1.3 var(--hand); color: #3b3129; text-align: center; }
.polaroid figcaption.soft { color: #8a7a6a; font-size: 13px; }
.polaroid.wide img { aspect-ratio: auto; max-height: 420px; object-fit: contain; }

/* a page of photos: the grid takes its shape from how many there are */
.scrap-small-head { display: flex; justify-content: space-between; gap: 12px; font: italic 14px var(--serif); color: #6b5b4b; margin: -10px 0 22px; padding-bottom: 6px; border-bottom: 1px dashed var(--paper-line); }
.scrap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 26px; padding: 8px 4px 0; }
.scrap-photos.n1 .scrap-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
.scrap-photos.n3 .scrap-grid > :first-child, .scrap-photos.n5 .scrap-grid > :first-child { grid-column: 1 / -1; max-width: 560px; margin: 0 auto; width: 100%; }
.scrap-photos.n5 .polaroid img, .scrap-photos.n6 .polaroid img { aspect-ratio: 3 / 2; }
.scrap-foot { text-align: center; color: rgba(255,255,255,.7); font: 12px var(--serif); letter-spacing: .06em; margin: -6px 0 0; }

/* The day laid out to fit it (lib/scrapbook.php, scrapbook_day_page):
   the storyteller, Hello there, the photo grid, the collage, the journal,
   and the post-its above. A photo carries --dx/--dy, how far it was
   dragged as a share of the page's width (cqw: the page is a container),
   so the page reads the same on screen and on paper. An empty slot is
   kept for the editor to write in and shown nowhere else. */
.scrap-page { container-type: inline-size; }
.polaroid { transform: translate(calc(var(--dx, 0) * 100cqw), calc(var(--dy, 0) * 100cqw)) rotate(var(--tilt, 0)); }
.polaroid figcaption:empty, [data-slot]:empty { display: none; }
.story-big { font: 700 32px/1.05 var(--serif); margin: 0 0 10px; color: var(--scrap); text-transform: uppercase; letter-spacing: .02em; }
.story-lead { font: italic 17px/1.4 var(--serif); color: #574838; margin: 0 0 10px; }
.story-list { list-style: none; margin: 0 0 10px; padding: 0; }
.story-list li { margin: 0 0 8px; font: 15px/1.35 var(--hand); }
.story-list strong { font-weight: 700; }
.story-when { font-size: 12px; color: #7a6650; margin-right: 4px; }
.story-line { color: #574838; }
.story-facts { font: 14px/1.45 var(--hand); color: #574838; border-top: 1px dashed var(--paper-line); padding-top: 8px; margin-top: 6px; }
.story-facts p, .story-journey, .story-meals, .story-stay { margin: 0 0 4px; }
.story-journey::before { content: "✈ "; } .story-meals::before { content: "🍽 "; } .story-stay::before { content: "🛏 "; }
.story-notes, .journal-notes { margin-top: 14px; padding: 6px 12px; font: 14px/22px var(--hand); color: #3a4a7a; background: repeating-linear-gradient(0deg, transparent 0 21px, #cfe0f3 21px 22px); background-position: 0 6px; }
.story-notes.empty, .scrap-note.empty, .journal-notes.empty { display: none; }
/* storyteller: a column of words with a coloured rule, up to three photos down the side */
.scrap-story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 26px; align-items: start; }
.tpl-story.no-photo .scrap-story { grid-template-columns: 1fr; }
.story-text { border-left: 6px solid var(--scrap); padding-left: 16px; }
.story-photos { display: flex; flex-direction: column; gap: 28px; padding-top: 12px; }
/* hello there: the best photo in a big frame with a plate across the top, a card beside it, a row of small ones */
.scrap-hello { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr); gap: 26px; align-items: start; margin-top: 8px; }
.tpl-hello.no-photo .scrap-hello { grid-template-columns: 1fr; }
.hello-frame { position: relative; padding: 22px 14px 12px; background: #fff; border: 10px solid var(--scrap); box-shadow: 0 6px 18px rgba(40,28,16,.25); }
.hello-frame .polaroid { padding: 0; box-shadow: none; }
.hello-frame .polaroid .tape { display: none; }
.hello-frame .polaroid.wide img { max-height: 360px; }
.hello-plate { position: absolute; top: -20px; left: 50%; transform: translateX(-50%) rotate(-1.5deg); background: #fffaf3; color: var(--scrap); border: 2px solid var(--scrap); border-radius: 40px 40px 12px 12px; padding: 8px 22px 6px; font: 700 20px/1 var(--hand); white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; z-index: 2; }
.hello-card { background: #fff; padding: 16px 18px 12px; border: 1px solid var(--paper-line); box-shadow: 2px 4px 12px rgba(40,28,16,.18); transform: rotate(.6deg); }
.hello-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.hello-row .polaroid img { aspect-ratio: 1 / 1; }
/* the grid: a strip with the title and the lead, a wall of square frames */
.grid-strip { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; }
.grid-strip .story-big, .grid-strip .story-lead { margin: 0; }
.grid-strip .story-lead { flex: 1 1 200px; }
.scrap-gridwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.scrap-gridwall .polaroid { padding: 6px 6px 4px; }
.scrap-gridwall .polaroid img { aspect-ratio: 1 / 1; }
.scrap-gridwall .polaroid .tape { display: none; }
.scrap-gridwall .polaroid figcaption { font-size: 12px; padding-top: 5px; }
.scrap-gridwall.n1, .scrap-gridwall.n2, .scrap-gridwall.n4 { grid-template-columns: repeat(2, 1fr); }
.scrap-gridwall.n1 { max-width: 60%; margin: 0 auto; }
.tpl-grid .story-facts { margin-top: 16px; }
/* the collage: photos scattered over the page, a card with the lines under them */
.scrap-collage { position: relative; aspect-ratio: 1 / 1.05; margin: 6px 0 0; }
.scrap-collage.n1, .scrap-collage.n2 { aspect-ratio: 1 / .5; }
.scrap-collage.n3, .scrap-collage.n4 { aspect-ratio: 1 / .78; }
.collage-spot { position: absolute; }
.collage-spot .polaroid { width: 100%; box-sizing: border-box; }
.collage-card { position: relative; margin: 14px 0 0; width: 70%; background: #fffdf7; border: 1px solid var(--paper-line); padding: 12px 14px; box-shadow: 2px 4px 12px rgba(40,28,16,.2); transform: rotate(-.8deg); }
.collage-card .story-facts { border-top: 0; padding-top: 0; margin-top: 0; }
.collage-card .story-lead { margin-bottom: 4px; }
/* the journal: lined paper, the story in prose, one photo at the corner */
.scrap-journal { position: relative; padding: 12px 18px 16px 44px; font: 16px/28px var(--hand); color: #3a4a7a; background: #fff; border: 1px solid var(--paper-line); min-height: 400px;
  background-image: linear-gradient(90deg, transparent 32px, #f3b4b4 32px, #f3b4b4 34px, transparent 34px), repeating-linear-gradient(0deg, transparent 0 27px, #cfe0f3 27px 28px); background-position: 0 0, 0 12px; box-shadow: 0 2px 6px rgba(40, 28, 16, .12); }
.scrap-journal p { margin: 0; }
.scrap-journal .story-lead { font: italic 20px/28px var(--serif); color: #3b3129; }
.scrap-journal .story-journey, .scrap-journal .story-meals, .scrap-journal .story-stay { margin: 0; }
.journal-photo { float: right; width: 38%; margin: 6px 0 12px 20px; }
.journal-notes { background: none; padding: 0; margin-top: 10px; font: inherit; color: inherit; }
/* the magazine: a wide photo with the title over its foot, two columns under it */
.banner-top { position: relative; margin: 4px 0 18px; }
.banner-top .polaroid { padding: 0 0 2px; box-shadow: none; background: none; }
.banner-top .polaroid .tape { display: none; }
.banner-top .polaroid.wide img { width: 100%; max-height: 380px; aspect-ratio: 16 / 9; object-fit: cover; }
.banner-top .polaroid figcaption { font-size: 13px; color: #6b5b4b; text-align: right; padding: 4px 4px 0; }
.banner-title { position: absolute; left: 0; right: 0; bottom: 30px; padding: 36px 22px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.72)); color: #fff; pointer-events: none; }
.banner-title [data-slot] { pointer-events: auto; }
.banner-title .story-big { color: #fff; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.banner-title .story-lead { color: #fff; margin: 4px 0 0; opacity: .95; }
.tpl-banner.no-photo .banner-title { position: static; background: none; color: inherit; padding: 0; }
.tpl-banner.no-photo .banner-title .story-big { color: var(--scrap); text-shadow: none; }
.tpl-banner.no-photo .banner-title .story-lead { color: #574838; }
.banner-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: start; }
.banner-cols .story-facts { border-top: 0; padding-top: 0; margin-top: 0; }
.banner-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 22px; }
.banner-row .polaroid img { aspect-ratio: 3 / 2; }
/* the film strip: up to five frames in a dark band with sprocket holes */
.strip-head { margin: 0 0 12px; }
.strip-head .story-big { margin-bottom: 4px; }
.film-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; padding: 22px 12px; margin: 0 0 20px; background-color: #2b2622;
  background-image: repeating-linear-gradient(90deg, transparent 0 10px, #fffaf3 10px 18px, transparent 18px 28px), repeating-linear-gradient(90deg, transparent 0 10px, #fffaf3 10px 18px, transparent 18px 28px);
  background-size: 100% 8px, 100% 8px; background-repeat: repeat-x, repeat-x; background-position: 0 6px, 0 calc(100% - 6px); }
.film-strip .polaroid { padding: 0; background: none; box-shadow: none; }
.film-strip .polaroid .tape { display: none; }
.film-strip .polaroid img { aspect-ratio: 1 / 1; border: 2px solid #111; }
.film-strip .polaroid figcaption { color: #fffaf3; font-size: 12px; padding: 5px 0 0; }
.film-strip.n1 { grid-auto-columns: minmax(0, 40%); justify-content: center; }
.film-strip.n2 { grid-auto-columns: minmax(0, 36%); justify-content: center; }
/* the postcard: the front and the back side by side */
.postcard { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 0; border: 1px solid var(--paper-line); background: #fff; box-shadow: 0 6px 18px rgba(40,28,16,.25); transform: rotate(-.6deg); margin: 8px 0 0; }
.postcard-front { position: relative; padding: 10px; border-right: 2px dashed var(--paper-line); }
.postcard-front .polaroid { padding: 0; box-shadow: none; }
.postcard-front .polaroid .tape { display: none; }
.postcard-front .polaroid.wide img { max-height: 340px; aspect-ratio: 4 / 3; object-fit: cover; }
.postcard-greet { position: absolute; left: 18px; bottom: 44px; font: 700 26px/1 var(--hand); color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.6); letter-spacing: .02em; max-width: 90%; }
.tpl-postcard.no-photo .postcard-greet { position: static; color: var(--scrap); text-shadow: none; padding: 20px 10px; }
.postcard-back { position: relative; padding: 16px 16px 16px 18px; display: flex; flex-direction: column; min-height: 300px; }
.postcard-stamp { align-self: flex-end; border: 2px solid #c9b79a; padding: 6px 10px; text-align: center; font: 11px/1.3 var(--serif); color: #6b5b4b; background: #fffaf3; transform: rotate(3deg); margin: 0 0 10px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px #c9b79a; }
.postcard-stamp strong { display: block; font-size: 12px; }
.postcard-text { font: 14px/1.4 var(--hand); color: #3a4a7a; flex: 1 1 auto; }
.postcard-text .story-lead { font: 16px/1.4 var(--hand); color: #3a4a7a; }
.postcard-text .story-facts { border-top: 0; padding-top: 0; margin-top: 4px; color: #3a4a7a; }
.postcard-lines { margin-top: 14px; }
.postcard-lines span { display: block; height: 0; border-bottom: 1px solid #c9b79a; margin: 0 0 18px 40%; }
.postcard-lines span:last-child { margin-bottom: 0; }
/* editing, on screen only */
.scrap-tools { display: none; align-items: center; gap: 12px; max-width: 880px; margin: 0 auto 10px; padding: 8px 12px; background: rgba(255,250,243,.92); border-radius: 8px; font: 13px system-ui, sans-serif; color: #3b3129; }
.scrap-editing .scrap-tools { display: flex; flex-wrap: wrap; }
.scrap-tools select { margin: 0 0 0 6px; width: auto; display: inline-block; }
.scrap-tools .link-btn { color: #1b5e8f; }
.scrap-hint { max-width: 880px; margin: 14px auto -10px; padding: 10px 14px; background: #fff69b; border-radius: 8px; font: 14px/1.4 var(--hand, cursive); color: #3b3129; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.scrap-hint em { font-style: normal; font-weight: 700; }
.scrap-editing .scrap-page { overflow: visible; }
.scrap-editing [data-slot], .scrap-editing [data-cap] { outline: 1px dashed rgba(27,94,143,.55); outline-offset: 2px; cursor: text; border-radius: 2px; }
.scrap-editing [data-slot]:empty, .scrap-editing figcaption[data-cap]:empty, .scrap-editing .story-notes.empty, .scrap-editing .scrap-note.empty, .scrap-editing .journal-notes.empty { display: block; }
.scrap-editing [data-slot]:empty, .scrap-editing figcaption[data-cap]:empty { min-height: 1.2em; min-width: 60px; }
.scrap-editing .story-notes.empty, .scrap-editing .scrap-note.empty, .scrap-editing .journal-notes.empty { min-height: 44px; }
.scrap-editing [data-slot]:focus, .scrap-editing [data-cap]:focus { outline: 2px solid #1b5e8f; background: rgba(255,255,255,.7); }
.scrap-editing section[data-day] .polaroid, .scrap-editing section[data-day-photos] .polaroid { cursor: grab; touch-action: none; }
.scrap-editing .polaroid.dragging { cursor: grabbing; z-index: 5; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.scrap-editing .scrap-page.has-dragging { z-index: 10; }
.scrap-editing .polaroid.drop-here { outline: 3px solid #1b5e8f; outline-offset: 2px; }
.scrap-editing .scrap-page.drop-page { outline: 4px dashed #1b5e8f; outline-offset: -4px; }
.scrap-editing .scrap-page.drop-page::after { content: "Move the photo to this day"; position: absolute; top: 8px; right: 12px; background: #1b5e8f; color: #fff; font: 13px system-ui, sans-serif; padding: 4px 10px; border-radius: 12px; z-index: 6; }
.scrap-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); background: #3b3129; color: #fff; padding: 9px 16px; border-radius: 20px; font: 14px system-ui, sans-serif; opacity: 0; transition: opacity .15s, transform .15s; z-index: 30; pointer-events: none; }
.scrap-toast.on { opacity: 1; transform: translate(-50%, 0); }
.scrap-toast.bad { background: #8c2d24; }

@media (max-width: 640px) {
  .scrap { padding: 12px 8px 30px; }
  .scrap-page { padding: 26px 18px 24px; margin-bottom: 18px; min-height: 0; }
  .scrap-n { margin-top: -26px; }
  .scrap-day-body { grid-template-columns: 1fr; }
  .scrap-grid { grid-template-columns: 1fr; gap: 26px; }
  .scrap-photos .scrap-grid > :first-child { max-width: none; }
  .sticky { flex-basis: 130px; }
  .scrap-story, .scrap-hello, .banner-cols, .postcard { grid-template-columns: 1fr; }
  .hello-row, .scrap-gridwall, .banner-row { grid-template-columns: repeat(2, 1fr); }
  .postcard-front { border-right: 0; border-bottom: 2px dashed var(--paper-line); }
  .film-strip { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; }
  .story-big { font-size: 26px; }
  .journal-photo { width: 48%; }
  .collage-card { width: auto; }
}

@media print {
  .scrap-body { background: #fff; }
  .scrap { max-width: none; padding: 0; color: #000; }
  .scrap-run { display: flex; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; font: 9pt var(--serif); color: #666; }
  .scrap-page { break-after: page; page-break-after: always; margin: 0; border: 0; border-radius: 0; box-shadow: none; min-height: 0; padding: 8mm 2mm 0; overflow: visible;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .scrap-page::before { display: none; }
  .scrap-cover { padding: 20mm 10mm; min-height: 230mm; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
  .scrap-cover-inner { width: 100%; }
  .scrap-window { width: 110mm; }
  .scrap-n { margin-top: -8mm; }
  .scrap-day-body { gap: 10mm; }
  .scrap-hero .polaroid.wide img { max-height: 120mm; }
  .sticky { box-shadow: 0 1px 2px rgba(0,0,0,.2); flex-basis: 44mm; max-width: 62mm; font-size: 11.5pt; }
  .sticky-line { font-size: 10.5pt; }
  .scrap-note { box-shadow: none; font-size: 12pt; }
  .polaroid { box-shadow: 0 1px 2px rgba(0,0,0,.2); padding: 3mm 3mm 2mm; }
  .polaroid figcaption { font-size: 11pt; padding-top: 2mm; }
  .scrap-grid { gap: 9mm 8mm; }
  .scrap-photos.n5 .polaroid img, .scrap-photos.n6 .polaroid img { aspect-ratio: 16 / 10; }
  .scrap-page:last-of-type { break-after: auto; page-break-after: auto; }
  .scrap-foot { color: #666; margin: 10mm 0 0; }
  .scrap-tools, .scrap-hint, .scrap-toast { display: none !important; }
  .scrap-story, .scrap-hello { gap: 8mm; }
  .hello-frame .polaroid.wide img { max-height: 110mm; }
  .scrap-gridwall { gap: 4mm; }
  .scrap-journal { box-shadow: none; font-size: 12pt; }
  .story-big { font-size: 24pt; }
  .banner-img { max-height: 110mm; }
  .postcard { box-shadow: none; }
  .postcard-front .polaroid.wide img { max-height: 100mm; }
}
button.dcost { font-family: inherit; line-height: inherit; cursor: default; }
.leaflet-top.leaflet-right .map-me { display: block; }
@media (max-width: 640px) {
  /* the per-person figures show on a tap of the day's total */
  .day-block-head .dpp { display: none; flex-basis: 100%; white-space: normal; }
  .day-block-head.pp-open .dpp { display: block; }
  button.dcost { cursor: pointer; }
}

/* =====================================================================
   Dark mode: follows the phone's own setting. The colour tokens change
   and the few tinted backgrounds that are not tokens are restated. The
   book, the budget sheet and the shared plan carry class="paper" on
   <html> and stay light, because they are for printing.
   ===================================================================== */

:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  html:not(.paper) { color-scheme: dark; --bg: #101418; --surface: #181e25; --line: #2a333d; --ink: #e6ebf0; --ink-soft: #9aa6b2; --accent: #6fb1e6; --accent-soft: #1d3446; --good: #6ccb9a; --warn: #e6b45a; --bad: #f08a80; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .5); }
  html:not(.paper) input, html:not(.paper) select, html:not(.paper) textarea { background: #0f1317; color: var(--ink); }
  html:not(.paper) tbody tr:hover { background: #1d242c; }
  html:not(.paper) .btn:hover { border-color: #3d4854; }
  html:not(.paper) .btn-primary { color: #0b1620; }
  html:not(.paper) .btn-primary:hover { background: #8cc3ee; }
  html:not(.paper) .pill-good, html:not(.paper) .btn-pay.is-set, html:not(.paper) .btn-expense, html:not(.paper) .kind-row.on td { background: #16302a; border-color: #2c5a48; color: var(--good); }
  html:not(.paper) .btn-expense:hover { background: #1c3d34; }
  html:not(.paper) .pill-warn, html:not(.paper) .alert-warn, html:not(.paper) .env-badge { background: #3a2d10; border-color: #6b5218; color: var(--warn); }
  html:not(.paper) .pill-bad, html:not(.paper) .alert-error { background: #3d1e1b; border-color: #6e3630; color: var(--bad); }
  html:not(.paper) .alert-info { color: #bcd9f0; border-color: #2c4c65; }
  html:not(.paper) .btn-ai { background: linear-gradient(135deg, #2b2340, #1e2a3f); border-color: #5b4a99; color: var(--ink); }
  html:not(.paper) .btn-ai:hover { border-color: #8b6fd6; }
  html:not(.paper) .who-pill, html:not(.paper) .route-link { border-color: #2c4c65; }
  html:not(.paper) .quad-stay { --q: #a596f0; --q-soft: #221e33; }
  html:not(.paper) .quad-day { --q: #6fb1e6; --q-soft: #172634; }
  html:not(.paper) .quad-meals { --q: #f0a54d; --q-soft: #33261a; }
  html:not(.paper) .quad-day .q-item.k-activity:hover, html:not(.paper) .quad-day .q-item.k-other:hover { background: #16302a; }
  html:not(.paper) .day-notes { background: #23211a; }
  html:not(.paper) .day-notes .q-head { color: #c8b872; }
  html:not(.paper) .day-notes .note + .note { border-top-color: #3d3a2a; }
  html:not(.paper) .trip-map { background: #1d242c; }
  html:not(.paper) .toast { background: #e6ebf0; color: #101418; }
  html:not(.paper) .toast .toast-act { border-color: rgba(0, 0, 0, .35); color: #101418; }
  html:not(.paper) .leaflet-popup-content-wrapper, html:not(.paper) .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
  html:not(.paper) .leaflet-bar a { background: var(--surface); color: var(--ink); border-bottom-color: var(--line); }
  html:not(.paper) .leaflet-control-attribution { background: rgba(24, 30, 37, .85); color: var(--ink-soft); }
  html:not(.paper) .map-pin { border-color: #181e25; }
  html:not(.paper) .daynum { background: var(--ink-soft); color: #101418; }
  html:not(.paper) .lp-top, html:not(.paper) body.lp { background: var(--surface); }
  html:not(.paper) .tabs.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
}

/* the short add form: day and time side by side even on a phone */
.qa-when > div { flex: 1 1 120px !important; }
.qa-when { flex-wrap: nowrap; }

/* Expense sits in the Today header, beside the day arrows */
.today-head .today-exp { min-width: 0; font-size: 13px; padding: 0 10px; white-space: nowrap; }

/* ------------------------------------------- conversations with AI */

.chat-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.chat-card { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.chat-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.chat-card .chat-sum { white-space: normal; }
.chat-tools { font-size: 13px; color: var(--ink-soft); margin: -4px 0 10px; }
.chat-log { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.chat-user, .chat-ai { border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.chat-user { align-self: flex-end; max-width: 88%; background: var(--accent-soft); color: var(--ink); white-space: pre-line; }
.chat-ai { align-self: stretch; background: var(--bg); border: 1px solid var(--line); }
.chat-ai p { margin: 0 0 6px; }
.chat-who { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.ai-turn > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.ai-turn .ai-list { max-height: none; }
.chat-added { margin: 0 0 10px; padding-left: 18px; }
#ai-accept .inline-form { align-items: stretch; }
#ai-accept .inline-form select { flex: 1 1 200px; min-width: 0; }
#ai-more { margin-top: 12px; }
#ai-more .inline-form input { flex: 1 1 200px; min-width: 0; }

/* ------------------------------------------------- help and the tour */

.help-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; line-height: 1;
}
.help-btn:hover, .help-btn:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.help-top { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.help-top input { flex: 1 1 auto; min-width: 0; }
.help-top .btn { flex: 0 0 auto; }
.help-list { display: flex; flex-direction: column; gap: 6px; }
.help-sec { border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; background: var(--surface); }
.help-sec > summary { cursor: pointer; font-weight: 700; padding: 10px 0; list-style: none; }
.help-sec > summary::-webkit-details-marker { display: none; }
.help-sec > summary::before { content: '›'; display: inline-block; width: 16px; color: var(--ink-soft); transition: transform .12s; }
.help-sec[open] > summary::before { transform: rotate(90deg); }
.help-body { padding: 0 0 10px; font-size: 14px; }
.help-body ol { margin: 0; padding-left: 22px; }
.help-body li { margin: 0 0 8px; }
.help-body em { font-style: normal; color: var(--accent); }

.tour-nudge {
  background: var(--accent-soft); color: var(--ink); border-bottom: 1px solid var(--line);
  padding: 8px 20px; font-size: 14px; text-align: center;
}
.tour-block { position: fixed; inset: 0; z-index: 60; }
.tour-dim { position: absolute; background: rgba(10, 20, 40, .55); }
.tour-spot {
  position: fixed; z-index: 61; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(255, 255, 255, .6);
  transition: top .15s, left .15s, width .15s, height .15s;
}
.tour-spot[hidden] { display: none; }
.tour-card {
  position: fixed; z-index: 62; left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 24px));
  background: var(--surface); color: var(--ink); border-radius: 12px; border-top: 4px solid var(--accent);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .3); padding: 14px 16px 12px; bottom: 16px;
}
.tour-card h3 { margin: 2px 0 6px; font-size: 16px; }
.tour-card p { margin: 0 0 12px; font-size: 14px; }
.tour-actions { display: flex; gap: 8px; align-items: center; }
.tour-actions .grow { flex: 1 1 auto; }
@media (max-width: 640px) {
  .help-btn { width: 30px; height: 30px; }
  .tour-nudge { padding: 8px 12px; font-size: 13px; }
}

/* =====================================================================
   The trip book, designed for paper: the trip's colour throughout, a
   cover with a map, a contents page, an essentials page, a running head
   and page numbers, a page per day, and nothing split across a page.
   ===================================================================== */

.book { --book: var(--accent); }
.book-run { display: none; }
.book-cover { border-bottom: 0; padding: 0 0 20px; margin-bottom: 20px; }
.book-band { height: 18px; background: var(--book); border-radius: 0 0 6px 6px; margin: 0 0 34px; }
.book-cover h1 { font-size: 40px; letter-spacing: -.01em; margin: 0 0 6px; }
.book-cover .doc-sub { font-size: 20px; margin: 0 0 6px; }
.book-dates { font-size: 15px; margin: 0 0 18px; color: var(--ink); }
.book-map { position: relative; margin: 6px 0 16px; border: 1px solid #d8dde3; border-radius: 6px; overflow: hidden; background: #e9eef3; }
.book-map img { display: block; width: 100%; height: auto; }
.book-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.book-map-credit { position: absolute; right: 6px; bottom: 4px; font-size: 9px; color: #555; background: rgba(255, 255, 255, .78); padding: 1px 5px; border-radius: 3px; font-family: Helvetica, Arial, sans-serif; }
.book h2 { border-bottom: 2px solid var(--book); color: var(--ink); font-size: 20px; padding-bottom: 4px; margin: 26px 0 12px; }
.book h3 { font-size: 14px; margin: 18px 0 6px; }
.book-glance th, .book-ess th { color: var(--book); border-bottom: 1px solid var(--book); }
.book-ess table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.book-ess th, .book-ess td { text-align: left; vertical-align: top; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.book-ess th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.book .conf { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
.book-emerg { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--book); font-size: 13px; }
.toc { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.toc > li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.toc > li > span:first-child { font-weight: 700; display: inline-block; min-width: 140px; }
.toc .d { font-size: 13px; color: var(--ink-soft); }
.toc-days { list-style: none; margin: 8px 0 0; padding: 0 0 0 140px; columns: 2; column-gap: 24px; font-size: 13px; }
.toc-days li { padding: 2px 0; break-inside: avoid; }
.toc-n { display: inline-block; min-width: 52px; font-weight: 700; color: var(--book); }
.book .daynum { background: var(--book); }
.book .doc-day h3 { background: none; border-bottom: 2px solid var(--book); padding: 6px 0; font-size: 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.book .doc-day h3 .dayplace { color: var(--ink-soft); font-weight: 400; font-size: 14px; }
.book .doc-day h3 .dayplace::before { content: '· '; }
.book .doc-day h3 .daycost { margin-left: auto; float: none; font-weight: 400; color: var(--ink-soft); }
.book .doc-item .est { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.book .doc-item .t { font-size: 13px; }
@media (max-width: 640px) { .toc-days { columns: 1; padding-left: 0; } .toc > li > span:first-child { display: block; } }

@media print {
  @page {
    margin: 18mm 14mm 18mm;
    @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 9pt Georgia, "Times New Roman", serif; color: #666; }
  }
  .book { padding-top: 9mm; }
  .book-run {
    display: flex; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0;
    font-size: 9pt; color: #666; border-bottom: 1px solid #ddd; padding-bottom: 1.5mm; background: #fff;
  }
  .book-cover { break-after: page; page-break-after: always; padding-top: 0; }
  .book-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .book-toc { break-after: page; page-break-after: always; }
  .book-ess { break-before: page; page-break-before: always; }
  .book.daypages .doc-day + .doc-day { break-before: page; page-break-before: always; }
  .doc-day { break-inside: auto; page-break-inside: auto; }
  .doc-item, .book-map { break-inside: avoid; page-break-inside: avoid; }
  .book h2, .book h3 { break-after: avoid; page-break-after: avoid; }
  .book .daynum { background: var(--book) !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .book .doc-day h3 { background: none !important; }
  .book-glance th, .book-ess th, .book h2, .book-emerg, .toc-n { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .book-map-credit { background: #fff; }
}

/* The book, quieter: ink rules and grey heads; the trip's colour only on
   the cover band and the map pins stay a neutral dark. */
.book h2 { border-bottom: 1px solid #1f2937; font-size: 19px; letter-spacing: -.01em; margin: 30px 0 12px; }
.book h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #374151; margin: 18px 0 6px; }
.book table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 12px; }
.book th, .book td { text-align: left; vertical-align: top; padding: 5px 6px; border-bottom: 1px solid #e5e7eb; }
.book th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; font-weight: 600; border-bottom: 1px solid #1f2937; }
.book tfoot th { color: #1f2937; border-top: 1px solid #1f2937; border-bottom: 0; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.book .nowrap { white-space: nowrap; }
.book .num { text-align: right; font-variant-numeric: tabular-nums; }
.book .d { font-size: 11.5px; color: #6b7280; }
.book .daynum { background: #1f2937; color: #fff; }
.book .doc-day h3 { text-transform: none; letter-spacing: 0; color: var(--ink); border-bottom: 1px solid #1f2937; font-size: 16px; }
.book .doc-day h3 .dayplace { color: #6b7280; }
.book .doc-day h3 .daycost { color: #374151; }
.book-glance th, .book-ess th { color: #6b7280; border-bottom-color: #1f2937; }
.toc-n { color: #1f2937; }
.book-emerg { border-left-color: #1f2937; }
.book-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 16px; }
.book-totals > div { border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 12px; }
.book-totals .k { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.book-totals .v { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.book .settle { margin: 4px 0 0; padding-left: 20px; font-size: 13.5px; }
.book-band { height: 14px; border-radius: 0 0 4px 4px; }
.book-cover h1 { font-size: 38px; }
@media print {
  .book-transport, .book-stays, .book-money, .book-people-sec { break-before: page; page-break-before: always; }
  .book-transport table, .book-stays table, .book-money table { break-inside: auto; }
  .book tr { break-inside: avoid; page-break-inside: avoid; }
  .book .daynum { background: #1f2937 !important; }
  .book h2, .book th, .book tfoot th, .book-totals > div { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* stays in the book: one block each, dates down the side */
.book .book-stay { grid-template-columns: 96px 1fr auto; padding: 9px 4px; }
.book .book-stay .t { color: var(--ink); font-size: 13px; line-height: 1.35; }
.book .book-stay .c { color: #6b7280; font-size: 12.5px; }
.book .book-stay strong { font-size: 15px; }

/* the book's sections: a list to tick and drag */
.book-order { list-style: none; margin: 4px 0 8px; padding: 0; }
.book-sec { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; margin: 4px 0; background: var(--surface); }
.book-sec .check-row { flex: 1 1 auto; margin: 0; }
.book-sec .grip { cursor: grab; color: var(--ink-soft); font-size: 14px; letter-spacing: -3px; user-select: none; padding: 0 2px; }
.book-sec.dragging { opacity: .45; }
.book-sec .ud { display: flex; flex-direction: column; gap: 0; }
.book-sec .ud .link-btn { font-size: 10px; text-decoration: none; line-height: 1.2; padding: 1px 4px; color: var(--ink-soft); }
.book-sec .ud .link-btn:hover { color: var(--accent); }
@media (pointer: coarse) { .book-sec .ud .link-btn { font-size: 14px; padding: 4px 8px; } }
@media print { .book-restaurants { break-before: page; page-break-before: always; } }

/* the money card: what it costs, who paid, who's in, what each owes */
.cost-kind { margin: 2px 0 6px; }
.owed-block { margin-top: 8px; }
.owed-block .who-row { padding-top: 4px; }
.owe-rows { margin: 2px 0 4px; }
.owed-preview { min-height: 18px; margin: 2px 0 0; }
.owed-preview.good { color: var(--good); }
.owed-preview.bad { color: var(--bad); }
#lbl-who .link-btn { font-weight: 400; margin-left: 6px; }

.who-block { margin-top: 6px; }

/* ------------------------------------------------------------ weather */
.wx-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: thin; }
.wx-day { flex: 0 0 104px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; text-align: center; box-shadow: var(--shadow); }
.wx-day.wx-avg { border-style: dashed; }
.wx-date { font-size: 12px; font-weight: 700; white-space: nowrap; }
.wx-icon { font-size: 28px; line-height: 1.2; margin: 4px 0; }
.wx-temp { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack-list { margin: 2px 0 12px; padding-left: 20px; }
.pack-list li { margin: 3px 0; }
#weather-pack h3 { margin: 10px 0 4px; font-size: 14px; }
@media (max-width: 640px) { .wx-day { flex-basis: 92px; padding: 8px 6px; } }

/* the weather, condensed: one line per day, several to a row */
.wx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2px 18px; padding: 8px 14px; }
.wx-row { display: grid; grid-template-columns: 92px 26px 74px 1fr; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.wx-row .wx-date { font-weight: 600; white-space: nowrap; font-size: 12.5px; }
.wx-row .wx-icon { font-size: 16px; line-height: 1; text-align: center; }
.wx-row .wx-temp { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-row .wx-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-row.wx-avg .wx-date { color: var(--ink-soft); font-style: italic; }
.wx-stays { margin: -6px 0 6px; }
.page-head.sub + .wx-stays { margin-top: -8px; }
@media (max-width: 640px) { .wx-grid { grid-template-columns: 1fr; padding: 6px 12px; } }

.book-weather table { font-size: 12px; }
.book-weather .pack-title { margin: 8px 0 2px; }
@media print { .book-weather { break-before: page; page-break-before: always; } }

/* the packing list: big rows to tick with a thumb */
.pack-progress { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.pack-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; max-width: 320px; }
.pack-bar span { display: block; height: 100%; background: var(--good, #2e7d32); border-radius: 4px; transition: width .2s; }
.pack-group h3 { margin: 0 0 6px; font-size: 15px; }
.pack-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
.pack-row:first-of-type { border-top: 0; }
.pack-main { display: flex; align-items: center; gap: 10px; flex: 1; min-height: 44px; padding: 6px 0; margin: 0; cursor: pointer; font-size: 14.5px; }
.pack-main input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.pack-name { flex: 0 1 auto; }
.pack-for { font-size: 11px; padding: 1px 7px; }
.pack-why { flex: 1 1 auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack-row.packed .pack-name { text-decoration: line-through; color: var(--ink-soft); }
.pack-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.pack-actions .icon-btn { width: 28px; height: 28px; }
#pack-show { width: auto; max-width: 260px; display: inline-block; }
@media (max-width: 640px) { .pack-why { display: none; } #pack-show { width: 100%; max-width: none; } }
/* in the book: boxes to tick on paper, two to a row */
.book-packing .pack-print { list-style: none; padding-left: 0; columns: 2; column-gap: 24px; margin: 2px 0 10px; font-size: 13.5px; }
.book-packing .pack-print li { break-inside: avoid; margin: 3px 0; }
.book-packing .pack-title { margin: 8px 0 2px; }

/* settling up: a payment recorded, and the pace of the spending */
.settle-h { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.settle-list.settled li { color: var(--ink-soft); }
.settle-record { margin-left: 8px; vertical-align: middle; font-weight: 500; }
.pace-col .small { font-weight: 400; white-space: nowrap; }
.pace-line { margin: -4px 0 0; }
@media (max-width: 640px) { .pace-col .small { white-space: normal; } }

/* press-and-hold dragging on a phone: the ghost follows the finger */
.touch-ghost { position: fixed; z-index: 70; pointer-events: none; opacity: .92; background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); border-radius: 10px; transform: rotate(1.5deg); }
@media (pointer: coarse) {
  .q-item[data-drag] { -webkit-touch-callout: none; }
  body.dragging-item, body.dragging-item * { -webkit-user-select: none; user-select: none; }
}
/* the documents on the trip */
#docs-card h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.docs-day-head { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin: 10px 0 2px; }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.doc-row .doc-name { font-weight: 600; text-decoration: none; }
.doc-row .doc-on { flex: 1 1 auto; }
.doc-kept { font-size: 11px; }

/* the day's weather on the banner and on Today; typical weather is dashed */
.day-block-head .dwx { font-size: 12px; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.day-block-head .dwx.wx-avg { border-style: dashed; }
.today-wx-line:empty { display: none; }
.today-wx { display: inline-block; margin-top: 4px; font-size: 14px; font-variant-numeric: tabular-nums; }
.today-wx.wx-avg { border-bottom: 1px dashed var(--line); }
@media (max-width: 640px) { .day-block-head .dwx { padding: 1px 6px; } }

/* the paperclip is a button: the files without opening the item */
button.qclip { background: none; border: 0; padding: 0 2px; font: inherit; cursor: pointer; color: inherit; min-height: 0; line-height: inherit; }
button.qclip:hover { text-decoration: underline; text-underline-offset: 2px; }
.today-row button.qclip { margin-left: 4px; }
.files-sheet { list-style: none; padding: 0; margin: 4px 0 8px; }
.files-sheet li { padding: 8px 0; border-top: 1px solid var(--line); }
.files-sheet li a:first-child { font-weight: 600; text-decoration: none; }

.aday { font-weight: 400; white-space: nowrap; }
tfoot .aday, tfoot .pace-col .small { text-transform: none; letter-spacing: 0; }

/* the book's budget table: the per-day line under each figure, as on the tab */
.book .num .aday { display: block; font-weight: 400; font-size: 10.5px; white-space: nowrap; }
.book .num .aday.over { color: #b91c1c; }
.book tfoot th .aday { text-transform: none; letter-spacing: 0; }

/* who is on an item, above the money that says who owes for it */
.who-block + .who-block { margin-top: 10px; }
#item-on-block .auth-hint { margin: 2px 0 0; }

.who-box-off { opacity: .55; }

/* The vault: a list of papers and programmes, each a row with an icon. */
.vault-link { margin-right: 4px; }
.vault-list { list-style: none; padding: 0; margin: 0; }
.vault-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border); }
.vault-row:first-child { border-top: 0; }
.vault-icon { font-size: 22px; line-height: 1.2; flex: 0 0 30px; text-align: center; }
.vault-main { flex: 1 1 auto; min-width: 0; }
.vault-actions { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; white-space: nowrap; padding-right: 4px; }
.vault-balance { margin-top: 2px; }
.masked { cursor: pointer; border-bottom: 1px dotted var(--muted); letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.masked.shown { border-bottom: 0; letter-spacing: 0; font-weight: 600; color: var(--text); }
.vault-warn { border-left: 4px solid var(--warn, #c77700); }
.vault-warn ul { margin: 6px 0 0; padding-left: 20px; }
@media (max-width: 640px) { .vault-row { flex-wrap: wrap; } .vault-actions { flex-basis: 100%; padding-left: 42px; } }

/* Small icon buttons: a pencil, a bin. */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer; padding: 0; vertical-align: middle; }
.icon-btn:hover, .icon-btn:focus { color: var(--accent); border-color: var(--accent); outline: none; }
.icon-btn-danger:hover, .icon-btn-danger:focus { color: #b42318; border-color: #b42318; }
.icon-btn svg { display: block; }
a.icon-btn { width: 26px; height: 26px; text-decoration: none; margin-left: 4px; }

/* The vault's search, filters and sort, in a row above each list. */
.vault-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }
.vault-tools input[type=search] { flex: 1 1 160px; min-width: 120px; }
.vault-tools select { flex: 0 1 auto; width: auto; }
.vault-count { margin-left: auto; white-space: nowrap; }

/* A chevron that folds a section away and brings it back. */
.fold-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer; padding: 0; vertical-align: middle; margin-right: 2px; }
.fold-btn:hover, .fold-btn:focus { color: var(--accent); border-color: var(--accent); outline: none; }
.fold-btn svg { display: block; transition: transform .15s; }
.fold-btn[aria-expanded="false"] svg { transform: rotate(-90deg); }
.page-head.sub h2 .fold-btn { position: relative; top: -1px; }

.pill-star { color: #8a5a00; background: #fff4d6; font-weight: 700; }

.place-rating { color: #8a5a00; font-weight: 700; font-size: 12px; margin-left: 4px; }

.q-desc { color: var(--muted); font-style: italic; }

/* A town guide: the About button on a day banner, and the guide itself. */
.dguide { border: 1px solid var(--border); background: var(--card); color: var(--accent); border-radius: 999px; font-size: 12px; padding: 2px 9px; cursor: pointer; margin-left: 4px; }
.dguide:hover, .dguide:focus { border-color: var(--accent); outline: none; }
.today-about { margin: 6px 0 0; }
.guide h3 { font-size: 14px; margin: 14px 0 6px; }
.guide-sights { padding-left: 22px; margin: 0; }
.guide-sights li { margin: 0 0 8px; }
.book-sights { padding-left: 20px; }
.book-sights li { margin: 0 0 4px; }

/* About you — the one block, the same in every TrackingMy app: Teams' look. */
.about .fg { margin: 0 0 10px; min-width: 0; }
.about .fg label { display: block; font-size: 11px; font-weight: 500; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 3px; }
.about .fg label .hint { text-transform: none; letter-spacing: 0; font-size: 10px; opacity: .8; }
.about .fg input { width: 100%; box-sizing: border-box; font-size: 13px; padding: 7px 10px; border-radius: 8px; margin: 0; }
.about .fr { display: grid; gap: 10px; }
.about .about-name { grid-template-columns: .7fr 1.3fr 1fr 1.3fr .7fr; }
.about .about-when { grid-template-columns: 1fr 1fr 1fr; }
.about .about-where { grid-template-columns: 1.6fr .9fr .9fr 1.4fr; }
.about .auth-hint, .about .about-hint { font-size: 12px; color: var(--ink-soft); margin: 0 0 10px; }
@media (max-width: 560px) { .about .about-name, .about .about-when, .about .about-where { grid-template-columns: 1fr 1fr; } }

/* Paid in parts: one line a payment on the Who paid sheet, and what is left on the plan. */
.ledger-row { display: grid; grid-template-columns: 138px 1fr 108px 110px 32px; gap: 6px; align-items: center; margin: 0 0 6px; }
.ledger.has-cy .ledger-row { grid-template-columns: 138px 1fr 108px 100px 74px 32px; }
.ledger-row input, .ledger-row select { margin: 0; min-width: 0; }
.ledger .btn { margin-top: 2px; }
.q-due { display: inline-block; font-size: 11px; color: var(--ink-soft); margin-left: 6px; white-space: nowrap; }
.btn-pay.is-part { border-style: dashed; }
@media (max-width: 560px) { .ledger-row, .ledger.has-cy .ledger-row { grid-template-columns: 1fr 1fr; } .ledger-row .lg-del { justify-self: end; } }

/* The one budget table: three columns for everyone, then three a party, each party's block ruled off. */
/* Tightened so it fits a laptop screen with four parties across: smaller type, less padding, the sub-lines short and stacked. */
.one-table { font-size: 13px; }
.one-table th, .one-table td { padding: 7px 6px; }
.one-table thead tr:first-child th { padding-bottom: 2px; }
.one-table .p-days { display: block; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.one-table th.grp { text-align: center; border-bottom: 0; }
.one-table .p-first { border-left: 2px solid var(--line); }
.one-table thead tr:last-child th { font-size: 11px; }
.one-table .sub-row th:first-child { font-weight: 500; }
.one-table .sub-row td:first-child { white-space: nowrap; color: var(--ink-soft); }
.one-table .sub-row td { border-top: 0; }
.one-table td.from-budget { color: var(--ink-soft); }

.modal-sub { font-size: 13px; color: var(--ink-soft); margin: -4px 0 12px; }

/* An item's notes on the plan: a small handle, the notes under it when open, the whole text on hover. */
.q-notes-toggle { display: inline-block; font: inherit; font-size: 12px; color: var(--accent); background: none; border: 0; padding: 0; margin: 2px 0 0; cursor: pointer; }
.q-notes-toggle:hover, .q-notes-toggle:focus-visible { text-decoration: underline; outline: none; }
.q-notes { font-size: 12px; color: var(--ink-soft); margin: 4px 0 2px; padding-left: 8px; border-left: 2px solid var(--line); }

/* Notes on Today, in full: this is the screen for reading them. */
.tr-notes, .tb-notes { white-space: normal; }
.tr-notes { color: var(--ink-soft); border-left: 2px solid var(--line); padding-left: 8px; margin-top: 3px; }

/* The question sheet: small, over everything, with its × like every other sheet. */
.ask-sheet { max-width: 440px; }
.ask-text { white-space: pre-line; }
.ask-copy { display: flex; gap: 6px; margin: 8px 0 4px; }
.ask-copy input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.tour-card { position: relative; }

/* The budgets form: a budget and an allowance a person a day side by side. */
.budget-row > div:first-child, .budget-head > div:first-child { flex: 1 1 160px; }
.budget-row > div + div, .budget-head > div + div { flex: 0 1 150px; }
.budget-head { margin-bottom: 2px; }
.budget-head > div + div { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; align-self: flex-end; padding-bottom: 2px; }
/* Set budgets: a row a category, the trip's budget and a person a day,
   then a column for each group (or traveller). Scrolls sideways on a phone. */
.budget-grid-wrap { overflow-x: auto; margin: 0 -4px 6px; padding: 0 4px; }
.budget-grid { width: 100%; border-collapse: collapse; }
.budget-grid th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--ink-soft); text-align: left; padding: 4px 4px 2px; vertical-align: bottom; white-space: nowrap; }
.budget-grid th .small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.budget-grid td { padding: 3px 4px; vertical-align: top; }
.budget-grid td:first-child { white-space: nowrap; padding-top: 9px; }
.budget-grid td:first-child { width: 1%; }
.budget-grid input { margin: 0; min-width: 78px; width: 100%; }
.modal.modal-wide { width: min(980px, 100%); }
.budget-grid td.sum { padding-top: 9px; font-weight: 600; white-space: nowrap; }
.budget-grid tfoot td { border-top: 1px solid var(--line); }
.budget-grid th.p-head { border-left: 1px solid var(--line); }
.budget-grid td.p-cell { border-left: 1px solid var(--line); }

/* Plan with AI: which assistant answers, when the server has both keys. */
.ai-with { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.ai-with select { width: auto; margin: 0; }

/* The item form's Link box with its Open button beside it. */
.link-row { display: flex; gap: 6px; align-items: center; }
.link-row input { flex: 1 1 auto; min-width: 0; }
.link-row .btn { flex: 0 0 auto; white-space: nowrap; }

/* Under a plan item's notes: its booking link and its files. */
.q-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12px; }
.q-links a { color: var(--accent); text-decoration: none; }
.q-links a:hover { text-decoration: underline; }

/* An amount box with its currency beside it, and the line under it saying what it comes to. */
.fx-amount { display: flex; gap: 6px; align-items: center; }
.fx-amount input { flex: 1 1 auto; min-width: 0; }
.fx-amount select.fx-cy { flex: 0 0 auto; width: auto; margin: 0; }
.fx-hint { margin: 2px 0 0; }

/* The item form's folds: the hint beside a title fades, and the body sits a little under the summary. */
.fold-hint { font-weight: 400; text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
details.fs-more[open] > summary .fold-hint { display: none; }
details.fs-more > summary + * { margin-top: 6px; }

/* Today inside the itinerary: the large-type cards within the day block. */
.day-today { padding: 10px 12px 6px; }
.day-today .today-big { margin: 0 0 10px; }
.day-today .today-rest { margin: 0 0 10px; padding: 2px 14px; }
.day-today-done { margin: 0 0 8px; }

/* On a phone a box smaller than 16px makes iPhone Safari zoom the page in when it is tapped, which leaves the dialog off the screen. */
@media (max-width: 640px) { input, select, textarea { font-size: 16px; } }


/* The sitter's page behind its link, and the link row on the Sitter tab. */
.sitter-page { max-width: 720px; margin: 0 auto; padding: 24px 20px 40px; }
.sitter-page h1 { font-size: 26px; margin: 0 0 6px; }
.sitter-when { font-size: 16px; margin: 0 0 18px; }
.sitter-sec { margin: 0 0 18px; }
.sitter-sec h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin: 0 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.sitter-text { font-size: 16px; line-height: 1.5; white-space: pre-wrap; }
.share-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.share-row input { flex: 1 1 240px; min-width: 0; }
#sitter-form textarea { margin-bottom: 10px; }
@media print { .sitter-page { max-width: none; padding: 0; } }

.sitter-copy { background: var(--accent-soft); }
.sitter-copy .share-row { margin-top: 8px; }
.sitter-copy select { flex: 1 1 220px; width: auto; margin: 0; }

/* Photos on the sitter's notes: a grid on the tab, full width on the sitter's page. */
.sitter-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 12px; }
.sitter-photo { position: relative; min-width: 0; }
.sitter-photo img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.sitter-photo .sitter-doc { display: block; padding: 40px 8px; text-align: center; border: 1px dashed var(--line); border-radius: 8px; }
.sitter-photo .icon-btn { position: absolute; top: 6px; right: 6px; background: var(--surface); }
.sitter-photo-name { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitter-pics figure { margin: 0 0 14px; page-break-inside: avoid; }
.sitter-pics img { max-width: 100%; max-height: 70vh; border-radius: 8px; border: 1px solid var(--line); display: block; }
.sitter-pics figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* Find on the plan. */
.plan-q { width: 150px; padding: 5px 8px; font-size: 13px; margin: 0 0 0 6px; }
#plan-q-n { white-space: nowrap; }
.q-hide { display: none !important; }
.plan-searching .day-block.day-nomatch { display: none; }
.plan-searching .day-block.folded .day-grid { display: grid; }
.plan-searching .day-block.folded .day-notes, .plan-searching .day-block.folded .day-today { display: block; }
@media (max-width: 640px) { .plan-q { width: 110px; } }

/* Notes with a little formatting, wherever they show, and the editor on the item form. */
.q-notes p, .tr-notes p, .tb-notes p, .qd p, .doc-notes p, .notes-preview p { margin: 0 0 4px; }
.q-notes ul, .q-notes ol, .tr-notes ul, .tr-notes ol, .tb-notes ul, .tb-notes ol, .qd ul, .qd ol, .doc-notes ul, .doc-notes ol, .notes-preview ul, .notes-preview ol { margin: 2px 0 4px; padding-left: 20px; }
.q-notes a, .tr-notes a, .tb-notes a { color: var(--accent); }
.notes-tools { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin: 0 0 4px; }
.notes-tools .nt { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; }
.notes-tools .nt:hover { border-color: var(--accent); color: var(--accent); }
.notes-tools #notes-expand { margin-left: auto; }
.notes-preview { margin: 8px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; font-size: 14px; line-height: 1.5; background: var(--bg); }

/* The notes in a sheet of their own above the item form. */
.notes-sheet { max-width: 760px; }
.notes-sheet textarea { min-height: 45vh; font-size: 15px; line-height: 1.5; margin: 0; }
.notes-sheet .notes-preview { max-height: 28vh; overflow: auto; }
@media (max-width: 640px) { .notes-sheet textarea { min-height: 38vh; } .notes-sheet .notes-preview { max-height: 22vh; } }

/* The day's money beside a column's title. */
.q-head .q-money { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-head .q-money .q-paid { color: var(--good, #2e7d32); font-weight: 500; }

/* The calendar chooser: the plan's things by day, a tick beside each. */
.cal-pick { max-height: 50vh; overflow: auto; border: 1px solid var(--line, #e3e3e3); border-radius: 8px; padding: 6px 10px; margin: 10px 0; }
.cal-day-head { font-weight: 600; margin: 8px 0 2px; }
.cal-link { margin: 8px 0; }
.btn.disabled { opacity: .5; pointer-events: none; }
.cal-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; margin: 0; font-weight: 400; font-size: 14px; line-height: 1.35; cursor: pointer; }
.cal-row input[type="checkbox"] { width: auto; height: auto; margin: 3px 0 0; flex: 0 0 auto; }
.cal-row .cal-ico { flex: 0 0 1.3em; text-align: center; color: var(--ink-soft); }
.cal-row .cal-time { flex: 0 0 3.2em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cal-row .cal-title { flex: 1 1 auto; min-width: 0; }

/* Text size on a phone: the Aa button in the top bar. The whole page is
   scaled with zoom, so every size written in px grows with it; the map
   undoes it, since Leaflet lays its tiles out in real pixels. */
.text-btn { display: none; font-size: 13px; letter-spacing: -.02em; }
@media (max-width: 640px) { .text-btn { display: inline-block; } }
html[data-text="2"] body { zoom: 1.12; }
html[data-text="3"] body { zoom: 1.25; }
html[data-text="4"] body { zoom: 1.4; }
html[data-text="2"] #trip-map { zoom: calc(1 / 1.12); }
html[data-text="3"] #trip-map { zoom: calc(1 / 1.25); }
html[data-text="4"] #trip-map { zoom: calc(1 / 1.4); }