/* Trips (docs/design/screens/trips): the list, a trip's plan table beside its map, the day panel with
   options, suggestions, questions and Claude, people and flights, places, and the to-do list.
   House style from style.css: paper and ink, hairlines, square corners; sakura for "you", "now" and Claude's fresh changes. */

/* The plan table sits beside its map, so trips get the design's wider column (1360px, as in the mockups) rather than main's 1200px. */
body:has(#view-trips:not([hidden])) main { max-width: 1360px; }

.phone-only { display: none; }
.narrow-only { display: none; }

/* ---------- the list (01-trips) ---------- */
.trip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 28px; }
.trip-grid.past { margin-top: 28px; }
.trip-card { cursor: pointer; }
.trip-card h3 { font-size: 32px; margin: 4px 0 10px; }
.trip-card .meta { margin: 16px 0 0; font-size: 15px; }
.trip-mosaic { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; gap: 4px; aspect-ratio: 2.1 / 1; background: var(--stone); }
.trip-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.trip-mosaic img:first-child { grid-row: 1 / 3; }
.trip-mosaic img:only-child { grid-column: 1 / 3; }
.trip-card-foot { display: flex; align-items: center; gap: 14px; }
.trip-card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.trip-pick { max-height: 320px; overflow-y: auto; }
.trip-pick li { padding: 8px 0; }
.trip-create-row { align-items: center; gap: 18px; }

/* ---------- a trip: cover and head ---------- */
.trip-cover { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 4px; height: 200px; overflow: hidden; background: var(--stone); }
.trip-cover img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
.trip-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: 28px; }
.trip-back { margin: 0 0 18px; font-size: 16px; }
.trip-back .link { color: var(--muted); }
.trip-title h1 { font-size: 60px; }
.trip-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0; }
.trip-actions { display: grid; justify-items: end; gap: 12px; }
.presence { margin: 0; min-height: 20px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sakura); margin-right: 8px; vertical-align: 2px; }
.c-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); color: var(--ink); font: 400 12px/1 var(--font-text); margin-right: 6px; vertical-align: 1px; border: 1px solid var(--line); }
.btn.primary .c-mark { border-color: var(--paper); }
.c-mark.big { width: 44px; height: 44px; font-size: 20px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* The tabs, and on People / Places / Money / To-do the Focus button at the row's end. */
.trip-tabs-row { display: flex; align-items: flex-end; gap: 16px; margin-top: 28px; border-bottom: 1px solid var(--line); }
.trip-tabs-row > .trip-tabs { flex: 1; min-width: 0; margin-top: 0; border-bottom: 0; }
.trip-tabs-row > .view-ctl { padding-bottom: 6px; }

/* ---------- plan (03-plan) ---------- */
.plan-cols { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; margin-top: 24px; }
.plan-cols.with-panel { grid-template-columns: minmax(0, 1fr) minmax(380px, 520px); }
.plan-tbl { width: 100%; border-collapse: collapse; }
.plan-tbl th { text-align: left; font-size: 14px; font-weight: 400; color: var(--muted); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); }
.plan-tbl td { padding: 18px 12px 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 16px; }
.plan-row, .plan-note { cursor: pointer; }
/* a day is its row plus, when something changed lately, a full-width note under it */
.plan-day:hover, .plan-day.sel { background: var(--stone-2); }
.plan-day.sel tr { box-shadow: inset 3px 0 0 var(--sakura); }
.plan-row td:first-child, .plan-note td { padding-left: 12px; }
.plan-row.has-note td { border-bottom: 0; padding-bottom: 6px; }
.plan-tbl .plan-note td { padding-top: 0; }
.pc-day { width: 88px; }
.pc-day .meta { display: block; }
.pc-day b { display: block; font-family: var(--font-display); font-weight: 300; font-size: 22px; white-space: nowrap; }
.pc-photo { width: 72px; }
.pc-photo img { width: 56px; height: 56px; object-fit: cover; display: block; }
.pc-what b { display: block; font-weight: 500; margin-bottom: 4px; }
.pl { display: grid; grid-template-columns: 48px 1fr; gap: 0 4px; }
.pl-t { color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.pc-eat { width: 22%; }
.pc-stay { width: 16%; }
.pc-who { width: 120px; white-space: nowrap; }
.opt-badge { display: inline-block; font-size: 12px; padding: 1px 6px; border: 1px solid var(--ink); vertical-align: 2px; white-space: nowrap; }
.recent { margin: 0; }
.recent .c-mark { width: 16px; height: 16px; font-size: 10px; background: var(--sakura); color: var(--paper); border-color: var(--sakura); }
.plan-foot { margin-top: 14px; }
.change-log { margin-top: 28px; }
.change-log summary { cursor: pointer; color: var(--muted); }
.change-log .list li { padding: 10px 0; }
.flash { animation: flash 2.4s ease-out; }
@keyframes flash { 0%, 30% { background: color-mix(in srgb, var(--sakura) 18%, transparent); } }

/* the map: the drawn route first, then the real map (Google) over it once it loads */
.trip-map { border: 1px solid var(--line); background: var(--stone-2); position: sticky; top: 100px; }
.trip-map.wide { position: static; margin-bottom: 20px; }
.trip-map svg { display: block; width: 100%; height: auto; }
.trip-map .pin circle { fill: var(--ink); }
.trip-map .pin.on circle { fill: var(--sakura); }
.trip-map .pin-name { font: 400 19px var(--font-text); fill: var(--ink); }
.trip-map .pin-days { font: 400 13px var(--font-text); fill: var(--muted); }
.map-box { position: relative; }
.map-box > .live-map { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; background: var(--stone-2); }
.map-box > .live-map.ready { opacity: 1; }
.map-layer { position: absolute; left: 0; top: 0; }
.map-layer svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.map-layer .route, .trip-map svg .route { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.2; stroke-dasharray: 4 5; }
/* The leg back to bed: fainter and dotted. The arrowhead halfway along a leg shows which way it goes. */
.map-layer .route.home, .trip-map svg .route.home { stroke-opacity: .35; stroke-dasharray: 1 4; stroke-linecap: round; }
.map-layer .route-arrow, .trip-map svg .route-arrow { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.2; stroke-linejoin: round; }
.map-layer .route-arrow.home, .trip-map svg .route-arrow.home { stroke-opacity: .35; }
/* A pin is a point; its dot and label hang off it, the label on whichever side placeLabels() found room. */
.map-pin { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; cursor: pointer; --g: 12px; }
.map-pin.on { z-index: 2; left: -11px; top: -11px; width: 22px; height: 22px; --g: 16px; }
.map-pin i { position: absolute; inset: 0; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); box-sizing: border-box; transition: transform .15s; }
.map-pin.on i { background: var(--sakura); }
.map-pin.hot { z-index: 3; }
.map-pin.hot i { transform: scale(1.35); }
.map-pin:focus-visible { outline: 2px solid var(--sakura); outline-offset: 2px; border-radius: 50%; }
.map-pin .pin-text { position: absolute; display: grid; white-space: nowrap; line-height: 1.15; pointer-events: none;
  text-shadow: 0 0 2px var(--stone-2), 0 0 2px var(--stone-2), 0 0 4px var(--stone-2); }
.map-pin[data-side="right"] .pin-text { left: calc(50% + var(--g)); top: 50%; transform: translateY(-50%); }
.map-pin[data-side="left"] .pin-text { right: calc(50% + var(--g)); top: 50%; transform: translateY(-50%); text-align: right; }
.map-pin[data-side="above"] .pin-text { bottom: calc(50% + var(--g)); left: 50%; transform: translateX(-50%); text-align: center; }
.map-pin[data-side="below"] .pin-text { top: calc(50% + var(--g)); left: 50%; transform: translateX(-50%); text-align: center; }
/* No room for the label: it shows on hover, or when its day's row is hovered, on a paper chip. */
.map-pin[data-side="none"] .pin-text { left: calc(50% + var(--g)); top: 50%; transform: translateY(-50%); visibility: hidden; background: var(--paper); padding: 3px 6px; border: 1px solid var(--line); text-shadow: none; }
.map-pin[data-side="none"]:is(:hover, :focus-visible, .hot) .pin-text { visibility: visible; z-index: 4; }
.map-pin .pin-text b { font: 300 18px var(--font-display); color: var(--ink); }
.map-pin .pin-text span { font: 400 13px var(--font-text); color: var(--muted); }
.map-pin:hover .pin-text b, .map-pin:focus-visible .pin-text b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.trip-map.wide .map-pin .pin-text b { font: 400 15px var(--font-text); }
.map-foot { display: flex; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--paper); }
.empty-map p { padding: 120px 20px; text-align: center; margin: 0; }

/* ---------- the day panel (04-day-panel) and Claude ---------- */
.plan-side.is-panel { border: 1px solid var(--line); background: var(--paper); position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; }
/* the head stays put as the panel scrolls, so Close is always there */
.dp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; background: var(--paper); }
.dp-head p { margin: 0 0 4px; }
.dp-head h3 { font-size: 30px; }
.dp-sec { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dp-sec > .meta:first-child { margin: 0 0 10px; }
.dp-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.dp-sec-head p { margin: 0; }
.act { display: flex; gap: 14px; }
.act-photo { width: 96px; height: 72px; object-fit: cover; flex-shrink: 0; }
.act-main { min-width: 0; flex: 1; }
.act-title { font-size: 17px; font-weight: 500; }
/* Getting from A to B: a line between two stops, not a numbered stop (the design's .leg). */
.dp-sec.dp-leg { padding-top: 0; padding-bottom: 0; border-bottom: 0; }
.dp-stop:has(+ .dp-leg) { border-bottom: 0; }
.dp-stop { cursor: pointer; }
.leg { display: flex; gap: 12px; align-items: stretch; font-size: 14px; color: var(--muted); cursor: default; }
/* The line stays inside its own row, 6px clear of whatever is above and below. */
.leg .lg-line { width: 22px; flex-shrink: 0; position: relative; background: linear-gradient(var(--line), var(--line)) center / 1px calc(100% - 12px) no-repeat; }
/* A leg that opens the day starts at a small bed square, 12px under the Stay row; one that closes it ends at one. */
.dp-sec.dp-leg-start { padding-top: 12px; }
.dp-sec.dp-leg-end { padding-bottom: 12px; }
.dp-leg-start .lg-line { background-size: 1px calc(100% - 22px); background-position: center 16px; }
.dp-leg-end .lg-line { background-size: 1px calc(100% - 22px); background-position: center 6px; }
.dp-leg-start .lg-line::before, .dp-leg-end .lg-line::after { content: ""; position: absolute; left: 6px; width: 10px; height: 10px; box-sizing: border-box; background: var(--paper); border: 1.5px solid var(--ink); }
.dp-leg-start .lg-line::before { top: 6px; }
.dp-leg-end .lg-line::after { bottom: 6px; }
.leg .lg-hotel { color: var(--muted); font-size: 13px; }
.leg .lg-b { padding: 6px 0; min-width: 0; flex: 1; }
.leg .lg-l { overflow-wrap: anywhere; }
.leg .lg-t { font-variant-numeric: tabular-nums; margin-right: 4px; }
.leg b { font-weight: 500; color: var(--ink); margin-right: 4px; }
.leg .lg-what { color: var(--ink); }
.leg .tag.warn { margin-top: 0; }
.leg .lg-l .dir { margin-left: 4px; color: var(--ink); }
.leg .leg-acts { display: none; margin-top: 2px; }
.leg:hover .leg-acts, .leg:focus-within .leg-acts, .leg.open .leg-acts { display: flex; }
.act .desc { margin: 2px 0 6px; }
.act-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.sugg { display: flex; gap: 10px; align-items: flex-start; background: var(--stone-2); padding: 10px 12px; margin: 8px 0; font-size: 15px; }
.sugg .row-btns { margin-top: 6px; gap: 14px; }
.opt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.opt-card { border: 1px solid var(--line); display: grid; align-content: start; }
.opt-card.voted { border-color: var(--ink); }
.opt-photo > img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.opt-body { padding: 10px 12px 12px; display: grid; gap: 6px; }
.opt-body p { margin: 0; }
.opt-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.opt-body .row-btns { align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ask-form input { min-height: 44px; }
/* The "@" picker: fixed to the screen and placed by tripMentionPlace (trips.js), so a scrolling sheet can't clip it. */
.mention-pick { position: fixed; z-index: 60; max-height: 50vh; overflow-y: auto; min-width: 220px; max-width: 100%; list-style: none; margin: 0; padding: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgb(0 0 0 / 0.12); }
.mention-pick li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; min-height: 40px; }
.mention-pick li.on, .mention-pick li:hover { background: var(--line); }
.mention-pick .c-mark { width: 24px; height: 24px; margin: 0; flex: none; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.claude-box { background: var(--stone-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* A long URL, route or table rule in a question or answer wraps instead of widening the panel. */
.dp .chat-q, .dp .desc, .a-changes > div { overflow-wrap: anywhere; }
.claude-title { margin: 0; }
.claude-title .c-mark, .chat-q + .a .c-mark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.claude-head { display: flex; gap: 14px; align-items: center; }
.claude-head .c-mark { margin: 0; }
.chat-q { justify-self: end; max-width: 85%; background: var(--ink); color: var(--paper); padding: 12px 14px; white-space: pre-wrap; }
.chat-q.theirs { background: var(--stone); color: var(--ink); }
.chat-q .meta { display: block; color: inherit; opacity: .7; }
.a { background: var(--paper); border: 1px solid var(--line); padding: 12px 14px; }
.a .desc { margin: 0; }
.a.failed { border-color: var(--danger); }
.a.thinking { color: var(--muted); }
.a.thinking .dot { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.a-changes { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; font-size: 15px; display: grid; gap: 4px; }
.a-changes .row-btns { gap: 18px; margin-top: 6px; }
.ask-form { display: flex; gap: 8px; }
.ask-form input { flex: 1; min-width: 0; }
.ask-form .btn { min-height: 44px; padding: 8px 18px; }
.claude-box > p.meta:last-child { margin: 0; }

/* ---------- people and flights (05) ---------- */
.flight-add { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px; background: var(--stone-2); margin: 24px 0 8px; }
.flight-add p { margin: 2px 0 0; }
.fl-form { display: flex; gap: 8px; flex: 0 1 440px; }
.fl-form input { flex: 1; min-width: 0; }
.pf-tbl td { vertical-align: top; }
.pf-status { text-align: right; white-space: nowrap; }
.pf-status .link { display: inline-block; margin-left: 12px; }
.tag.warn { border-color: var(--danger); color: var(--danger); margin-top: 4px; }
.act-title .tag.warn { margin-top: 0; }
.who-chart { display: grid; grid-template-columns: 90px repeat(var(--n), minmax(0, 1fr)); gap: 6px 3px; align-items: center; margin: 28px 0 16px; overflow-x: auto; }
.wc-day { text-align: center; white-space: nowrap; }
.wc-name { font-size: 15px; }
.wc-bar { height: 12px; background: var(--stone-2); }
.wc-bar.on { background: var(--ink); }
.fl-copy { display: grid; gap: 6px; margin-bottom: 4px; }
.fl-leg { border: 0; border-top: 1px solid var(--line); padding: 14px 0 0; margin: 0; display: grid; gap: 12px; }
.fl-leg legend { padding: 0 8px 0 0; color: var(--muted); }

/* ---------- places (06) ---------- */
.place-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin: 24px 0 28px; }
.place-filters #show-map { margin-left: auto; }
.place-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px; margin-bottom: 28px; }
.place-card { cursor: pointer; display: grid; align-content: start; }
.place-card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--stone); }
.place-card .meta { margin: 14px 0 4px; }
.place-card h3 { font-size: 22px; }
.place-card > .you, .place-card > .link { margin: 6px 0 0; justify-self: start; }
.place-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.place-photos { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 16px; }
.place-photos img { height: 160px; width: auto; display: block; }
.cover-strip { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cov-item { display: grid; gap: 4px; }
.cov-item img { width: 96px; height: 72px; object-fit: cover; display: block; }

/* ---------- to do (07) ---------- */
.todo-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; margin-top: 8px; }
.todo-h { font-size: 32px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-top: 32px; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.todo-check input { width: 20px; height: 20px; accent-color: var(--ink); margin: 3px 0 0; }
.todo-list .main { flex: 1; min-width: 0; }
.todo-list li.done .todo-title { text-decoration: line-through; color: var(--muted); }
.todo-side { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.due { color: var(--muted); font-size: 15px; }
.due.late { color: var(--danger); }
.todo-side-box { background: var(--stone-2); padding: 20px; position: sticky; top: 100px; margin-top: 32px; }
.todo-side-box h3 { font-size: 24px; margin-bottom: 10px; }

/* ---------- phones (phone-01 … phone-04) ---------- */
@media (max-width: 960px) {
  .plan-cols, .plan-cols.with-panel { grid-template-columns: minmax(0, 1fr); }
  .place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .todo-cols { grid-template-columns: minmax(0, 1fr); }
  .todo-side-box { position: static; }
}
@media (max-width: 760px) {
  .phone-only { display: block; }
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  .trip-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .trip-card h3 { font-size: 28px; }
  .trip-cover { grid-template-columns: 2fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); height: 260px; }
  .trip-cover img:first-child { grid-row: 1 / 3; }
  .trip-cover img:nth-child(n + 4) { display: none; }
  .trip-head { margin-top: 20px; }
  .trip-title h1 { font-size: 42px; }
  .trip-actions { justify-items: start; }
  .trip-actions .btn-row #ask-claude { display: none; }
  .trip-tabs { gap: 20px; overflow-x: auto; }
  .trip-tabs button { white-space: nowrap; }
  .trip-map { position: static; margin-bottom: 8px; }
  .trip-map .pin-name { font-size: 17px; }
  /* The table becomes rows: day, what, a photo. */
  .plan-tbl thead { display: none; }
  .plan-tbl tr { display: grid; grid-template-columns: 84px minmax(0, 1fr) 72px; }
  .plan-tbl td { border: 0; padding: 0; }
  .plan-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .plan-row td:first-child { padding-left: 0; }
  .plan-day.sel tr { box-shadow: none; }
  .plan-row.has-note { border-bottom: 0; padding-bottom: 6px; }
  .plan-tbl .plan-note { display: block; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
  .plan-note td { display: block; padding: 0 0 0 84px; }
  .pc-day b { font-size: 22px; white-space: normal; }
  .pc-mon { display: none; }
  .pc-photo { grid-column: 3; grid-row: 1; width: auto; }
  .pc-photo img { width: 68px; height: 68px; }
  .pc-what { grid-column: 2; grid-row: 1; }
  .pc-what .pl { display: none; }
  .pc-eat, .pc-stay, .pc-who { display: none; }
  .claude-fab { position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 5; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); }
  /* A day or Claude takes the whole screen, with Close as the way back. */
  .plan-side.is-panel { position: fixed; inset: 0; z-index: 15; max-height: none; border: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
  .plan-side:not(.is-panel) { display: none; }
  .dp-head { padding-top: max(18px, env(safe-area-inset-top)); }
  .claude-box { background: var(--paper); }
  .flight-add { flex-direction: column; align-items: stretch; }
  .fl-form { flex: 1 1 auto; }
  .pf-tbl thead { display: none; }
  .pf-tbl tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .pf-tbl td { border: 0; padding: 0; }
  .pf-tbl td:first-child, .pf-status { grid-column: 1 / -1; text-align: left; }
  .pf-status .link { margin: 0 12px 0 0; }
  .who-chart { grid-template-columns: 64px repeat(var(--n), minmax(14px, 1fr)); }
  .wc-day { font-size: 11px; writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; }
  .place-grid { gap: 28px 12px; }
  .place-card h3 { font-size: 19px; }
  .place-filters #show-map { margin-left: 0; }
  .todo-h { font-size: 28px; }
  .todo-side .avatar { --s: 24px !important; }
}
/* Phones (style guide "Section tabs"): short labels, no count, 15px, spread edge to edge; they never scroll. */
@media (max-width: 600px) {
  .trip-tabs { gap: 8px; justify-content: space-between; overflow-x: visible; }
  .trip-tabs button { font-size: 15px; }
  .trip-tabs .tab-n { display: none; }
}
.pic-credit { margin: -8px 0 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-photo { position: relative; }
.pic-credit a { color: inherit; }

/* ---------- day maps: numbered stops (03-plan, 04-day-panel, phone-02-day) ---------- */
.day-map { position: relative; top: auto; border: 0; border-bottom: 1px solid var(--line); }
.day-map .map-box { height: 280px; }
.day-map .map-box > svg { width: 100%; height: 100%; }
.day-map.empty-map { border: 0; border-bottom: 1px solid var(--line); }
.day-map.empty-map p { padding: 48px 24px; }
.map-open { position: absolute; top: 10px; right: 10px; z-index: 3; background: var(--paper); border: 1px solid var(--line); padding: 4px 10px; font-size: 14px; color: var(--ink); text-decoration: none; }
.map-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.trip-map .stop-pin circle { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.trip-map .stop-pin.opt circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 2; }
.trip-map .stop-pin-no { fill: var(--paper); font: 500 10px var(--font-text); text-anchor: middle; }
.trip-map .stop-pin.opt .stop-pin-no { fill: var(--ink); }
.trip-map .bed-pin rect { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.trip-map g.hl circle { fill: var(--sakura); stroke: var(--sakura); }
/* On the real map: a numbered disc, a dashed one for each option, a square for the bed. */
.map-pin.stop { left: -12px; top: -12px; width: 24px; height: 24px; --g: 16px; z-index: 1; }
.map-pin.stop i { display: grid; place-items: center; font: 500 11px/1 var(--font-text); font-style: normal; color: var(--paper); letter-spacing: -.02em; }
.map-pin.stop.opt i { background: var(--paper); color: var(--ink); border: 1.5px dashed var(--ink); }
.map-pin.bed { left: -8px; top: -8px; width: 16px; height: 16px; }
.map-pin.bed i { border-radius: 0; background: var(--paper); border: 2px solid var(--ink); }
/* Where they woke up, on a day they move on: the same square, fainter. */
.map-pin.bed.last i, .trip-map .bed-pin.last rect { opacity: .55; }
.map-pin.bed .pin-text b, .map-pin.stop .pin-text b { font: 400 14px var(--font-text); }
.map-pin.hl i { background: var(--sakura); border-color: var(--sakura); color: var(--paper); animation: pulse-pin 1.6s ease-out; }
@keyframes pulse-pin { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* The numbers on the plan match the map. */
.stop-no, .stop-tag { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; margin-right: 8px; border: 0; border-radius: 11px; background: var(--ink); color: var(--paper); font: 500 11px/1 var(--font-text); cursor: pointer; vertical-align: 1px; }
.stop-tag { border-radius: 0; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); margin-right: 4px; }
.stop-no.off, .stop-tag.off { background: var(--paper); color: var(--muted); border: 1px dashed var(--line); cursor: default; }
.stop-no.hl, .stop-tag.hl { background: var(--sakura); border-color: var(--sakura); color: var(--paper); }
.dp-stop:has(.stop-no.hl), .opt-card:has(.stop-tag.hl) { animation: flash 2.4s ease-out; }
.bed-mark { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--ink); margin-right: 8px; vertical-align: -1px; }

/* The top of a day: map, then ‹ day ›, then what the numbers mean. Stays put while the plan scrolls. */
.dp-top { position: sticky; top: 0; z-index: 2; background: var(--paper); border-bottom: 1px solid var(--line); }
.day-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px 6px; text-align: center; }
.day-nav-mid p { margin: 0 0 2px; }
.day-nav-mid h3 { font-size: 28px; }
.day-step { min-height: 40px; min-width: 40px; padding: 0; font-size: 20px; }
.dp-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0; padding: 0 16px 12px; }
.dp-caption-links { display: flex; gap: 14px; }
/* Short windows: a shorter map, so the day's top (and "Back to all days") still stays in sight. */
@media (max-height: 760px) and (min-width: 761px) {
  .dp-panel .day-map .map-box { height: 150px; }
  .dp-panel .day-nav { padding-top: 8px; }
  .dp-panel .day-nav-mid h3 { font-size: 22px; }
}

/* The day strip: "All", then each day with its city. */
.day-strip { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin: 14px 0 0; background: var(--paper); }
.day-strip::-webkit-scrollbar { display: none; }
.day-strip button { flex: none; display: grid; justify-items: start; gap: 1px; border: 0; background: none; padding: 8px 2px 10px; cursor: pointer; color: var(--ink); text-align: left; }
.day-strip button b { font: 400 19px var(--font-display); font-weight: 300; white-space: nowrap; }
.day-strip button span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.day-strip button.on { box-shadow: inset 0 -2px 0 var(--sakura); }
.day-strip button.on b { color: var(--sakura); }

/* Full screen: the strip across the top, the map on the left two thirds, the day on the right. */
.full-plan .day-strip { margin-top: 0; border-bottom: 0; flex: 1; min-width: 0; padding-left: 14px; }
.full-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 0; border: 1px solid var(--line); border-top: 0; height: calc(100vh - 230px); min-height: 520px; }
.full-map { position: relative; border-right: 1px solid var(--line); }
.full-map .trip-map:not(.inset-map) { position: absolute; inset: 0; border: 0; display: flex; flex-direction: column; }
.full-map .trip-map:not(.inset-map) .map-box { flex: 1; height: auto; }
.full-map .trip-map:not(.inset-map) .map-box > svg { width: 100%; height: 100%; }
.full-side { overflow-y: auto; background: var(--paper); }
.full-side .dp-top { position: sticky; }
.full-foot { display: flex; gap: 16px; align-items: baseline; margin: 12px 0 0; }
.days-list { list-style: none; margin: 0; padding: 0; }
.days-row { display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 12px 16px; cursor: pointer; color: var(--ink); }
.days-row:hover { background: var(--stone-2); }
.days-row > :nth-child(1) { grid-row: 1 / 4; }
.days-row b { font: 300 20px var(--font-display); }

@media (max-width: 760px) {
  /* A day on a phone: inline under the sticky day strip, not a separate screen. */
  .day-strip { position: sticky; top: var(--topbar-h, 0px); z-index: 4; margin: 0 -16px; padding: 0 16px; }
  .phone-day .dp-top { position: sticky; top: calc(var(--topbar-h, 0px) + var(--strip-h, 57px)); z-index: 3; }
  .phone-day .day-map { margin: 0 -16px; }
  .phone-day .day-map .map-box { height: 300px; }
  .phone-day .dp-sec { padding-left: 0; padding-right: 0; }
  .phone-day .dp-caption { justify-content: center; text-align: center; }
  .phone-day .dp-caption-links { display: none; }
  .day-nav { padding: 12px 0 4px; }
}

/* ---------- photos: the hero, the filmstrip, voting, the day grid (08–11, phone-05–08) ---------- */
.full-head { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); background: var(--paper); }
.full-tools { display: flex; align-items: center; gap: 18px; padding: 0 14px; flex: none; }
.view-seg { padding: 0; gap: 0; background: var(--paper); border: 1px solid var(--line); }
.view-seg button { padding: 6px 14px; font-size: 15px; }
.full-map.photos { overflow-y: auto; background: var(--paper); }
.map-key { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--paper); }
.full-map .day-map + .map-key { position: absolute; left: 0; right: 0; bottom: 0; }
.full-map:has(.map-key) .day-map:not(.inset-map) { bottom: 41px; }

.hero-wrap { position: relative; }
.hero { position: relative; height: max(420px, calc(100vh - 360px)); background: var(--ink); overflow: hidden; }
.hero-shot { position: relative; height: 100%; overflow: hidden; }
.hero-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* The caption carries its own shade, so however many lines it runs to, the words sit on dark, even on a bright sky. */
.hero-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 72px 22px 22px; color: var(--on-photo); text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .6) 55%, rgba(0, 0, 0, 0)); }
.hero-cap .btn, .hero-cap .hero-no { text-shadow: none; }
.hero-cap h2 { font: 300 36px/1.08 var(--font-display); margin: 4px 0 6px; color: var(--on-photo); }
.hero-meta { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; opacity: .95; }
.hero-note { margin: 0; font-size: 16px; line-height: 1.35; max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-no { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--paper); color: var(--ink); font: 500 12px/1 var(--font-text); }
.hero-no.opt { border-radius: 0; }
.hero-votes { margin: 8px 0 10px; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.hero-vote { background: var(--paper); color: var(--ink); border-color: var(--paper); min-height: 40px; padding: 8px 16px; }
.hero-vote:hover:not(:disabled) { background: var(--paper); opacity: .9; }
.hero-vote.on, .hero-vote.on:hover:not(:disabled) { background: var(--sakura); border-color: var(--sakura); color: var(--paper); opacity: 1; }
.hero-opts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 100%; }
.hero-opt.lead::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--paper); z-index: 2; pointer-events: none; }
.sample { position: absolute; right: 12px; bottom: 10px; z-index: 1; font-size: 12px; color: var(--on-photo); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
/* The day's map as an inset, top right of the hero, with "Bigger map". */
.inset-map { position: absolute; top: 14px; right: 14px; z-index: 2; width: 260px; border: 1px solid var(--line); background: var(--stone-2); }
.inset-map .map-box { height: 170px; }
.inset-map .map-box > svg { width: 100%; height: 100%; }
.inset-map .map-open { top: auto; bottom: 6px; right: 6px; font-size: 12px; padding: 2px 8px; cursor: pointer; }
.map-pin.bare .pin-text { display: none; }
.film { display: flex; gap: 8px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.film::-webkit-scrollbar { display: none; }
.film-shot { position: relative; flex: none; width: 96px; height: 68px; padding: 0; border: 0; background: var(--stone); cursor: pointer; }
.film-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-shot .hero-no { position: absolute; top: 4px; left: 4px; min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; background: rgba(22, 22, 20, .75); color: var(--paper); }
.film-shot.on { outline: 2px solid var(--sakura); outline-offset: 2px; }
/* No day open: a photo a day. */
.days-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.day-tile { position: relative; aspect-ratio: 4 / 3; padding: 0; border: 0; background: var(--stone); cursor: pointer; overflow: hidden; text-align: left; }
.day-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.day-tile:hover img { transform: scale(1.03); }
.tile-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; padding: 36px 12px 10px; color: var(--on-photo); text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, 0)); }
.tile-cap span { font-size: 13px; }
.tile-cap b { font: 300 24px/1.1 var(--font-display); }
/* The right side: day header, the plan. */
.dp-plan-head { margin: 14px 16px 0; }
.days-row { grid-template-columns: 56px 1fr 18px; align-items: start; }
.days-row img { grid-row: 1 / 4; width: 56px; height: 56px; object-fit: cover; }
.days-row > :not(img):not(.days-go) { grid-column: 2; }
.days-row .days-go { grid-column: 3; grid-row: 1; color: var(--muted); }
.days-row > :nth-child(1) { grid-row: 1 / 4; }

@media (max-width: 760px) {
  .hero-wrap.phone { margin: 0 -16px; }
  .hero-wrap.phone .hero { height: auto; aspect-ratio: 4 / 3.4; }
  /* The bottom padding keeps the description clear of the photo credit. */
  .hero-wrap.phone .hero-cap { padding: 56px 16px 32px; }
  .hero-wrap.phone .hero-cap h2 { font-size: 26px; }
  .hero-wrap.phone .hero-opts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hero-wrap.phone .hero-opt { flex: 0 0 84%; scroll-snap-align: start; }
  .hero-wrap.phone .inset-map { width: 150px; top: 10px; right: 10px; }
  .hero-wrap.phone .inset-map .map-box { height: 96px; }
  .hero-wrap.phone .film { padding: 10px 16px; }
  .hero .view-seg, .days-grid .view-seg, .phone-map .view-seg { position: absolute; top: 10px; left: 10px; z-index: 3; }
  .phone-map { position: relative; margin: 0 -16px; }
  .phone-map .trip-map { border-left: 0; border-right: 0; }
  .days-grid.phone { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -16px 20px; }
  .days-grid.phone .tile-cap b { font-size: 20px; }
  .plan-cols.photos-first .plan-tbl { display: none; }
  .plan-cols.photos-first .plan-foot { display: none; }
  .dp-plan-head { margin: 14px 0 0; }
}

/* ---------- fixes from the real trip (2026-10-12) ---------- */
/* Option cards: Vote and the count on one line, then Pick this / Remove. */
.opt-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.opt-count { display: inline-flex; align-items: center; gap: 6px; }
.opt-links { display: flex; gap: 14px; flex-wrap: wrap; }
.dp-sec-head > button, .dp-sec-head > .link { flex: none; white-space: nowrap; }
.dp-sec-head > p { min-width: 0; }
/* The trip map beside the table fits the window rather than running off the bottom. */
.plan-side > .wide-only > .trip-map .map-box { height: min(560px, calc(100vh - 170px)); }
.plan-side > .wide-only > .trip-map .map-box > svg { width: 100%; height: 100%; }
/* The small map in the photo: "Bigger map" top left, clear of Google's own footer. */
.inset-map .map-open { top: 6px; left: 6px; right: auto; bottom: auto; }
.hero .sample { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
@media (max-width: 760px) {
  .hero-wrap.phone .inset-map { width: 170px; }
  .hero-wrap.phone .inset-map .map-box { height: 120px; }
  /* Options in the plan: a photo on the left, the words on the right. */
  .phone-day .opt-cards { grid-template-columns: minmax(0, 1fr); }
  .phone-day .opt-card { grid-template-columns: 104px minmax(0, 1fr); display: grid; }
  .phone-day .opt-card .opt-photo { grid-row: 1; height: 100%; min-height: 96px; }
  .phone-day .opt-card .opt-photo img { height: 100%; aspect-ratio: auto; }
}

/* ---------- the plan without the table (2026-10-12): it fits the window ---------- */
.full-cols { height: calc(100vh - var(--topbar-h, 80px) - var(--strip-h, 58px) - 16px); min-height: 480px; }
.full-map { min-height: 0; overflow: hidden; }
.full-map.photos { display: flex; flex-direction: column; overflow-y: auto; }
.full-map.photos > .hero-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.full-map.photos > .hero-wrap > .hero { flex: 1; height: auto; min-height: 320px; }
.full-map.photos > .hero-wrap > .film { flex: none; padding: 10px 12px; }
.full-plan .change-log { margin-top: 20px; }
.full-side { min-height: 0; }
@media (max-width: 760px) {
  .phone-map + .dp.dp-full { margin: 0 -16px; }
}
/* The big map shrinks to its box instead of growing with its drawing (it ran off the bottom). */
.full-map .trip-map:not(.inset-map) .map-box { flex: 1 1 0; min-height: 0; height: auto; overflow: hidden; }
.full-map .trip-map:not(.inset-map) .map-box > svg { width: 100%; height: 100%; }
.full-map .trip-map:not(.inset-map) > .map-foot { flex: none; }

/* ---------- money (12-money … 16-money-balances): sub-tabs, quick add, the list, balances, settle up ----------
   Owed and owing are the only colours: --positive for money coming back, --danger for money owed; sakura for you. */
.m-subtabs { position: sticky; top: var(--topbar-h, 0); z-index: 4; display: flex; gap: 6px; padding: 14px 0; margin-bottom: 4px; background: var(--paper); border-bottom: 1px solid var(--line); }
.m-subtabs button { font: inherit; font-size: 16px; padding: 7px 14px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.m-subtabs button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.m-pos { color: var(--positive); }
.m-neg { color: var(--danger); }
.m-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; margin: 18px 0 0; background: var(--stone-2); }
/* quick add: the main thing on the tab */
.m-qa { border: 1px solid var(--ink); padding: 16px 16px 14px; margin-top: 20px; display: grid; gap: 12px; }
.m-qa-r1 { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 16px; align-items: end; }
.m-qa-amt { display: flex; align-items: baseline; gap: 6px; border-bottom: 1px solid var(--ink); }
.m-qa-amt input { border: 0; background: none; font-family: var(--font-display); font-weight: 300; font-size: 34px; width: 100%; min-width: 0; padding: 0; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.m-qa-r1 > input { border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: 18px; padding: 8px 0; min-width: 0; color: var(--ink); }
.m-qa input:focus, .m-qa select:focus { outline: none; }
.m-qa-amt:focus-within, .m-qa-r1 > input:focus { border-bottom-color: var(--sakura); }
.m-qa-r2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 15px; }
.m-qa select { width: auto; min-height: 0; font: inherit; font-size: 15px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); padding: 2px 18px 2px 0; }
.m-qa-amt select { border-bottom: 0; color: var(--muted); }
.m-qa-r2 label { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink); font-size: 15px; }
.m-qa-go { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.m-you { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 22px 0 0; font-size: 17px; }
.m-you b { font-family: var(--font-display); font-weight: 300; font-size: 26px; color: var(--sakura); }
.m-you b.neg { color: var(--danger); }
.m-listh { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 0 0; }
.m-listh h2 { font-size: 30px; }
.m-dayh { margin: 18px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.m-row { display: flex; justify-content: space-between; gap: 16px; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; cursor: pointer; }
.m-row:hover { background: var(--stone-2); }
.m-row-l, .m-row-r { display: grid; gap: 2px; }
.m-row-l b { font-weight: 400; font-size: 17px; }
.m-row-r { text-align: right; justify-items: end; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.m-row-r b { font-weight: 400; font-size: 17px; }
/* balances */
.m-card { border: 1px solid var(--line); max-width: 640px; margin-top: 16px; }
.m-card > section, .m-card > details { padding: 18px 18px; border-bottom: 1px solid var(--line); }
.m-card > :last-child { border-bottom: 0; }
.m-card h3 { font-size: 22px; }
.m-card .btn.wide { margin-top: 14px; }
.m-bal { display: grid; grid-template-columns: 120px 1fr 110px; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; }
.m-bal.me .m-bal-n { color: var(--sakura); }
.m-bal-n { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.m-bar { position: relative; height: 10px; }
.m-bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line); }
.m-bar i { position: absolute; top: 0; bottom: 0; min-width: 1px; }
.m-bar i.pos { background: var(--positive); }
.m-bar i.neg { background: var(--danger); }
.m-bal-v { text-align: right; font-variant-numeric: tabular-nums lining-nums; font-size: 14px; }
.m-cat { display: grid; grid-template-columns: 120px 1fr 100px; align-items: center; gap: 10px; padding: 4px 0; font-size: 15px; }
.m-cbar { height: 6px; background: var(--stone-2); }
.m-cbar i { display: block; height: 100%; background: var(--ink); }
.m-cat .meta { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.m-cur summary { cursor: pointer; font-family: var(--font-display); font-weight: 300; font-size: 20px; }
.m-cur form { margin-top: 12px; }
.m-rates { display: grid; gap: 8px; }
.m-rate { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
.m-rate input { width: 110px; }
/* settle up */
.m-settle { max-width: 720px; display: grid; gap: 18px; margin-top: 18px; }
.m-shead { font-size: 22px; margin: 0; }
.m-shead b { font-family: var(--font-display); font-weight: 300; font-size: 26px; }
.m-shead b.m-pos { color: var(--positive); }
.m-lab { margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.m-xf { padding: 14px 0; border-bottom: 1px solid var(--line); }
.m-xl { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 17px; }
.m-xl span:first-child { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-xv { font-family: var(--font-display); font-weight: 300; font-size: 24px; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.m-xfor { margin: 4px 0 10px; }
.m-xa { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.m-qr { display: grid; grid-template-columns: 168px 1fr; gap: 18px; align-items: start; background: var(--stone); padding: 14px; margin-top: 12px; }
.m-qr p { margin: 0 0 8px; }
.m-qr-img { width: 168px; height: 168px; background: #fff; display: grid; place-items: center; padding: 6px; }
.m-qr-img svg { width: 100%; height: 100%; display: block; }
.m-man { background: var(--stone-2); padding: 14px; margin-top: 12px; }
.m-mob { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; background: var(--stone); padding: 14px; margin-top: 18px; }
.m-mob .field { flex: 1 1 260px; color: var(--ink); }
.m-pay { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.m-others summary { cursor: pointer; font-size: 16px; }
.m-xr { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.m-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.m-ck { display: flex; align-items: center; gap: 8px; font-size: 15px; }
/* the full form */
.m-form .m-hrow, .m-hrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chip { font: inherit; font-size: 15px; padding: 6px 12px; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; }
.m-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.m-among, .m-payers { display: grid; margin-top: 8px; }
.m-pr { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--stone-2); color: var(--ink); font-size: 16px; }
.m-pr > span { flex: 1; }
.m-sm { width: 96px !important; }
.m-items { display: grid; gap: 12px; margin-top: 10px; }
.m-item { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--stone-2); }
.m-item-r { display: grid; grid-template-columns: 1fr 96px auto; gap: 8px; align-items: center; }
.m-prev { color: var(--ink); line-height: 1.5; }
.m-dpick select, .m-dpick input { width: 100%; }
.m-qa .m-dpick select, .m-qa .m-dpick input { width: auto; }

@media (max-width: 760px) {
  .m-qa-r1 { grid-template-columns: 1fr; gap: 10px; }
  .m-qa-go { margin-left: 0; width: 100%; }
  .m-qa-go .btn { flex: 1; }
  .m-you { flex-direction: column; }
  .m-bal { grid-template-columns: 90px 1fr 96px; }
  .m-cat { grid-template-columns: 96px 1fr 84px; }
  .m-qr { grid-template-columns: 1fr; justify-items: center; }
  .m-xr { grid-template-columns: 1fr auto; }
  .m-xr .link { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- questions (threads): style guide, "Open questions" (.q, .qc, .thr) ---------- */
/* Sakura here means "still being discussed", never an error. */
.qc { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--sakura); color: var(--paper); font: 500 11px/1 var(--font-text); font-style: normal; font-variant-numeric: tabular-nums; vertical-align: 2px; box-sizing: border-box; }
.q { display: inline-flex; align-items: center; font: 400 12px/1.6 var(--font-text); padding: 0 7px; border: 1px solid var(--sakura); color: var(--sakura); background: none; white-space: nowrap; vertical-align: 1px; text-decoration: none; }
button.q { cursor: pointer; }
button.q:hover { background: var(--sakura); color: var(--paper); }
.q.big { font-size: 14px; padding: 3px 10px; }
.q.qt { background: var(--sakura); border-color: var(--sakura); color: var(--paper); }
.trip-q-row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 14px; }
/* Day-strip slots are a fixed width, so a count never shifts the days beside it. */
.day-strip button { width: 100px; overflow: hidden; }
.day-strip button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tile-cap .q { margin-left: 8px; }
.film-shot .q { position: absolute; right: 4px; bottom: 4px; font-size: 10px; padding: 0 4px; }
.days-q { margin-top: 6px; }
/* One question: a stone block under its stop. */
.thr { margin-top: 10px; background: var(--stone-2); padding: 12px 14px; }
.thr-h { display: flex; gap: 8px; align-items: baseline; margin-bottom: 10px; font-size: 15px; }
.thr-h b { font-weight: 500; overflow-wrap: anywhere; }
.thr-m { display: flex; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.thr-m > div { min-width: 0; }
.thr-m b { font-weight: 500; }
.thr-m .desc { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.thr-claude { background: var(--ink); color: var(--paper); font: 300 13px/1 var(--font-display); }
.thr-sug { background: var(--paper); padding: 10px 12px; margin: 0 0 10px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.thr-sug del { color: var(--muted); }
.thr-sug ins { text-decoration: none; border-bottom: 1px solid var(--sakura); }
.thr-reply, .thr-new { display: flex; gap: 6px; margin-top: 8px; }
.thr-reply input, .thr-new input { flex: 1; min-width: 0; min-height: 40px; }
.thr-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: 14px; }
.wait-you { color: var(--ink); }
/* Resolved: one hairline row, the decision first; it opens to the messages and Reopen. */
.thr.done { background: none; padding: 0; }
.thr-res { display: flex; width: 100%; align-items: flex-start; gap: 10px; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 10px 0 0; margin-top: 10px; cursor: pointer; font: inherit; font-size: 14px; color: var(--ink); }
.thr-res .tag { font-size: 12px; padding: 0 7px; flex: none; }
.thr-res-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.thr-res-n { white-space: nowrap; }
.thr-more { padding-top: 10px; }
.day-q { margin-top: 12px; }
.dp-whole-day > .meta:last-child { margin: 10px 0 0; }
.tag-claude .c-mark { width: 16px; height: 16px; font-size: 10px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.place-qs { margin-top: 20px; }
.place-qs > .meta:first-child { margin: 0 0 6px; }
/* The trip's open questions: top of the list of days, or the bottom of the page on phones. */
.oqs { border-bottom: 1px solid var(--line); }
.oqs-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.oqs-h h3 { font: 300 20px var(--font-display); margin: 0; }
.oq { display: grid; gap: 2px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; color: var(--ink); font: inherit; }
.oq:hover { background: var(--stone-2); }
.oq b { font-weight: 500; }
.oq.done > span:nth-child(2) { font-size: 15px; }
.oqs-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; }
.oqs-none { padding: 12px 16px; margin: 0; }
@media (max-width: 760px) {
  .trip-q-row { justify-content: flex-start; }
  .day-strip button { width: 92px; }
  #trip-body > .oqs { margin: 28px 0 0; border-top: 1px solid var(--line); }
  #trip-body > .oqs .oq, #trip-body > .oqs .oqs-h, #trip-body > .oqs .oqs-f, #trip-body > .oqs .oqs-none { padding-left: 0; padding-right: 0; }
}

/* ---------- a long question: a row in the plan (.tqr), the thread in a sheet / drawer (phone-16-thread-open) ---------- */
.tqr { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 10px; padding: 10px 12px; background: var(--stone-2); border: 0; text-align: left; cursor: pointer; font: inherit; font-size: 14px; color: var(--ink); }
.tqr:hover { outline: 1px solid var(--line); }
.tq-top { display: flex; gap: 8px; align-items: baseline; font-size: 15px; }
.tq-top b { font-weight: 500; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tq-last { display: flex; gap: 8px; align-items: center; min-width: 0; }
.tq-last .avatar { flex: none; }
.tq-last > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--muted); }
.tq-last b { font-weight: 500; color: var(--ink); }
.tq-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.tq-meta .go { color: var(--ink); font-size: 18px; line-height: 1; }
#tsheet .ts-veil { position: fixed; inset: 0; z-index: 25; background: rgba(22, 22, 20, .45); }
#tsheet .ts {
  position: fixed; left: 0; right: 0; bottom: 0; top: calc(72px + env(safe-area-inset-top)); z-index: 26;
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); animation: up .18s ease-out;
}
.ts-hd { padding: 8px 18px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.ts-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 6px; }
.ts-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ts-row h3 { font-size: 22px; margin: 0; overflow-wrap: anywhere; }
.ts-row .link { min-height: 32px; }
.ts-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.ts-body .thr-m, .ts-body .thr-sug { margin: 0; }
.ts-body .thr-sug { background: var(--stone-2); }
.ts-sum { background: var(--stone-2); padding: 12px 14px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.ts-sum-who { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
.ts-earlier { align-self: center; }
.ts-decided { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ts-decided .tag { justify-self: start; font-size: 12px; padding: 0 7px; }
.ts-ft { border-top: 1px solid var(--line); padding: 10px 18px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; background: var(--paper); }
.ts-ft .thr-reply { margin: 0; }
.ts-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
@media (min-width: 960px) {
  #tsheet .ts { top: 0; left: auto; width: min(460px, 92vw); border-top: 0; border-left: 1px solid var(--line); animation: none; }
  .ts-grab { display: none; }
  .ts-hd { padding-top: 18px; }
}

/* Trips: the Address sheet (phone-15): the stop in the local script, big enough for a taxi driver to read. */
/* A block, not flex: a flex box sits beside the sheet's floated close button, so it came out narrower than the buttons under it. */
.addr-card { border: 1px solid var(--ink); padding: 16px; margin: 14px 0 10px; }
.addr-card > * { display: block; }
.addr-card > * + * { margin-top: 6px; }
.addr-card .addr-name { font-size: 30px; line-height: 1.25; letter-spacing: .02em; }
.addr-card .addr-lines { font-size: 22px; line-height: 1.4; overflow-wrap: anywhere; }
.addr-card:lang(ja) .addr-name, .addr-card:lang(ja) .addr-lines { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }
.addr-card:lang(zh) .addr-name, .addr-card:lang(zh) .addr-lines { font-family: "Songti SC", "Noto Serif SC", "Noto Serif TC", serif; }
.addr-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.addr-apps .btn { min-height: 48px; text-decoration: none; justify-content: center; }
/* Still finding the place on Google: not a link yet, so a quick tap can't open the wrong pin. */
.addr-apps .btn:not([href]) { opacity: 0.5; pointer-events: none; }
.addr-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.addr-pref { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.addr-seg button { padding: 6px 12px; font-size: 14px; }
.dp-resolved .thr-res:first-of-type { border-top: 0; margin-top: 4px; padding-top: 0; }
.dp-resolved .thr-res + .thr-res { margin-top: 10px; }

/* ---------- itinerary (03-plan-itinerary, phone-01-plan-itinerary; style guide "Itinerary") ---------- */
.it-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 18px 0 0; }
.it-legend { display: flex; gap: 8px 22px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 14px; }
.it-dash { display: inline-block; width: 10px; margin-right: 6px; vertical-align: 4px; border-top: 1px dashed var(--muted); }
.it-move { display: flex; gap: 14px; align-items: center; padding: 16px 0; color: var(--muted); font-size: 14px; }
.it-move::before { content: ""; width: 28px; flex: none; border-top: 1px dashed var(--muted); }
.it-head + .it-chapter, .it-head + .it-move { margin-top: 20px; }
.it-chap { position: relative; height: 150px; overflow: hidden; background: #2a2622; }
.it-chap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.it-chap::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.it-chap .sample { top: 10px; bottom: auto; right: 10px; z-index: 1; text-shadow: none; }
.it-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; color: var(--on-photo); }
.it-cap h2 { margin: 0; font: 300 40px/1 var(--font-display); letter-spacing: -.015em; color: inherit; }
.it-bed { text-align: right; }
.it-grid { display: grid; grid-template-columns: 150px repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.it-dh { position: sticky; top: var(--topbar-h, 0px); z-index: 2; background: var(--paper); padding: 10px 0 8px; border-bottom: 1px solid var(--ink); color: var(--muted); font-size: 14px; }
.it-row { padding: 16px 0; border-top: 1px solid var(--line); cursor: pointer; }
.it-grid + .it-row { border-top: 0; }
.it-date { display: grid; justify-items: start; border: 0; background: none; padding: 0; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.it-date b { font: 300 24px/1.1 var(--font-display); }
.it-row:hover .it-date b, .it-date:focus-visible b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.it-where { margin-top: 4px; }
.it-li { display: block; font-size: 16px; line-height: 1.35; margin: 0 0 7px; }
.it-li.muted { color: var(--muted); }
.it-li.t { position: relative; padding-left: 16px; color: var(--muted); font-size: 14px; }
.it-li.t::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; border-top: 1px dashed var(--muted); }
.it-sg { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px dashed var(--muted); color: var(--muted); font-size: 12px; line-height: 1.4; vertical-align: 1px; white-space: nowrap; }
.it-mk { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--positive); color: var(--positive); font-size: 12px; line-height: 1.4; vertical-align: 1px; white-space: nowrap; }
.it-mk.q { border-color: var(--sakura); color: var(--sakura); }
.it-legend .it-sg, .it-legend .it-mk { margin-left: 0; }
.it-ob { display: block; margin: 0 0 8px; padding: 7px 10px 8px; border: 1px solid var(--ink); }
.it-ob b { display: flex; justify-content: space-between; gap: 8px; font-weight: 500; font-size: 14px; }
.it-ob b i { font-style: normal; font-weight: 400; color: var(--muted); }
.it-ob > span { display: block; font-size: 15px; line-height: 1.35; }
.it-ob > span > .it-mk { margin-left: 0; }
.it-ob.it-key { display: inline-block; margin: 0; padding: 0 8px; }
.it-foot { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.itin .change-log { margin-top: 20px; }

/* Stays (style guide "Stays", .sy-*; 17-stays, phone-17-stays): bases across the top, one row per option, the
   selected one in a panel beside the list (under its row on phones) with a map of the base's stops. */
.sy { margin-top: 22px; }
.sy * { box-sizing: border-box; }
.sy .m { color: var(--muted); }
.sy .s { font-size: 14px; }
.sy .n { font-variant-numeric: tabular-nums lining-nums; }
.sy-bases { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: 1px solid var(--line); }
.sy-base { padding: 12px 16px; border: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sy-base:last-child { border-right: 0; }
.sy-base b { font: 300 22px/1.1 var(--font-display); }
.sy-base.on { background: var(--ink); color: var(--paper); }
.sy-base.on .m { color: var(--line); }
.sy-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 18px 0 12px; }
.sy-bar2 { margin-top: 0; }
.sy-t { font-weight: 500; font-size: 17px; }
.sy-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sy-chips > .m { margin-right: 4px; }
.sy-chip { border: 1px solid var(--line); background: none; padding: 4px 10px; min-height: 34px; font: 14px var(--font-text); color: var(--ink); cursor: pointer; white-space: nowrap; }
.sy-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sy-seg { display: inline-flex; border: 1px solid var(--line); }
.sy-seg button { border: 0; background: none; padding: 4px 10px; min-height: 32px; font: 14px var(--font-text); color: var(--muted); cursor: pointer; white-space: nowrap; }
.sy-seg button.on { background: var(--ink); color: var(--paper); }
.sy-segs { display: flex; gap: 8px; justify-content: space-between; width: 100%; }
.sy-cols { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 24px; align-items: start; }
.sy-list { border-top: 1px solid var(--ink); }
.sy-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 130px 150px; gap: 16px; align-items: start; padding: 14px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.sy-row.sel { background: var(--stone-2); }
.sy-row.lead { box-shadow: inset 3px 0 0 var(--ink); }
.sy-ph { position: relative; width: 96px; height: 72px; background: var(--stone-2); }
.sy-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sy-ph .k { position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; background: var(--paper); border: 1px dashed var(--ink); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.sy-row.sel .sy-ph .k { background: var(--sakura); color: var(--paper); border: 1px solid var(--sakura); }
.sy-nm { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sy-nm .t, .sy-det h3 .t { font-weight: 500; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.sy-nm a.t:hover, .sy-det h3 a.t:hover { text-decoration: underline; text-underline-offset: 4px; }
.sy-close { font-size: 14px; }
.sy-close b { font-weight: 500; }
.sy-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.sy-tag { font-size: 12px; line-height: 1.6; padding: 0 7px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.sy-tag.hit { border-color: var(--ink); color: var(--ink); }
.sy-tag.lt { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sy-tag.new { background: var(--sakura); border-color: var(--sakura); color: var(--paper); }
.sy-base .sy-nn { font: inherit; font-weight: 500; color: var(--sakura); }
.sy-base.on .sy-nn { color: inherit; }
.sy-pr { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.sy-pr b { font-weight: 500; font-size: 17px; }
.sy-v { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.sud { display: inline-flex; gap: 6px; }
.sud button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; min-width: 48px; padding: 3px 9px; border: 1px solid var(--line); background: none; font: 500 14px var(--font-text); font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }
.sud button.on { background: var(--sakura); border-color: var(--sakura); color: var(--paper); }
.sfa { display: inline-flex; }
.sfa .avatar { border: 2px solid var(--paper); margin-left: -6px; box-sizing: content-box; }
.sfa .avatar:first-child { margin-left: 0; }
.sy-empty { padding: 14px 0; color: var(--muted); }
.sy-hid { margin: 10px 0 0; }
.sy-fold { margin-top: 10px; }
.sy-add { display: flex; gap: 8px; margin-top: 14px; }
.sy-add input { flex: 1; min-width: 0; min-height: 42px; border: 1px solid var(--line); background: var(--open-day); padding: 9px 12px; font: 15px var(--font-text); color: var(--ink); border-radius: 0; }
.sy-add .btn { min-height: 42px; }
.sy-note { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.sy-det { border: 1px solid var(--ink); background: var(--paper); position: sticky; top: calc(var(--topbar-h, 0px) + 12px); }
.sy-det .hd { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--line); cursor: auto; }
.sy-det h3 { font: 300 26px/1.1 var(--font-display); margin: 0; }
.sy-det h3 .t { font-weight: 300; }
.sy-det .acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.sy-det .acts .btn { min-height: 42px; text-decoration: none; }
.sy-det .thr-new { margin-top: 8px; }
.sy-mapbox { height: 380px; background: var(--stone-2); overflow: hidden; }
.sy-mapbox > svg { width: 100%; height: 100%; display: block; }
.sy-map-none { padding: 40px 16px; text-align: center; }
.sy-map .sy-ring { fill: var(--sakura); fill-opacity: 0.06; stroke: var(--sakura); stroke-width: 1.2; }
.sy-map .sy-dot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.sy-map .sy-dot.in { fill: var(--ink); }
.sy-map .sy-opt { cursor: pointer; }
.sy-map .sy-opt rect { fill: var(--paper); stroke: var(--ink); stroke-dasharray: 3 2; }
.sy-map .sy-opt text { font: 12px var(--font-text); fill: var(--ink); }
.sy-map .sy-me rect { fill: var(--sakura); }
.sy-map .sy-me text { font: 13px var(--font-text); fill: var(--paper); }
/* The same marks on Google's map (drawLive "stays"): only the selected place carries its name. */
.map-pin.sy-dot { left: -5px; top: -5px; width: 10px; height: 10px; cursor: default; }
.map-pin.sy-dot i { background: var(--paper); border: 1.5px solid var(--ink); }
.map-pin.sy-dot.in i { background: var(--ink); border-color: var(--paper); }
.map-pin.sy-o { left: -10px; top: -10px; width: 20px; height: 20px; z-index: 1; }
.map-pin.sy-o i, .map-pin.sy-me i { border-radius: 0; display: grid; place-items: center; font: 12px/1 var(--font-text); font-style: normal; }
.map-pin.sy-o i { background: var(--paper); color: var(--ink); border: 1.5px dashed var(--ink); }
.map-pin.sy-me { left: -12px; top: -12px; width: 24px; height: 24px; z-index: 2; --g: 16px; cursor: default; }
.map-pin.sy-me i { background: var(--sakura); color: var(--paper); border: 2px solid var(--paper); }
.map-pin.sy-me .pin-text b { font: 500 14px var(--font-text); }
.map-pin.sy-dot .pin-text b, .map-pin.sy-o .pin-text b { font: 400 14px var(--font-text); }
.map-pin.sy-dot:not(:hover) .pin-text, .map-pin.sy-o:not(:hover) .pin-text { visibility: hidden; }
.sy-key { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.sy-k { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); margin-left: 8px; }
.sy-k:first-child { margin-left: 0; }
.sy-k.in { background: var(--ink); }
.sy-k.o { border-radius: 0; border-style: dashed; width: 12px; height: 12px; }
.sy-sec { padding: 12px 16px; border-top: 1px solid var(--line); }
.sy-sec h4 { margin: 0 0 8px; font-weight: 500; font-size: 15px; }
.sy-sec p { margin: 0; }
.sy-sec .sy-tr { margin-top: 8px; }
.sy-far { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; }
.sy-facts { display: grid; grid-template-columns: 130px 1fr; font-size: 14px; }
.sy-facts span { padding: 6px 0; border-top: 1px solid var(--stone-2); }
.sy-facts span:nth-child(odd) { color: var(--muted); }
.sy .change-log { margin-top: 40px; }
@media (max-width: 1180px) {
  .sy-cols { grid-template-columns: minmax(0, 1fr) 440px; }
  .sy-row { grid-template-columns: 80px minmax(0, 1fr) 110px; }
  .sy-row .sy-ph { width: 80px; height: 60px; }
  .sy-row .sy-v { grid-column: 2 / -1; flex-direction: row; align-items: center; }
}
@media (max-width: 960px) {
  .sy-cols { grid-template-columns: minmax(0, 1fr); }
  .sy-det { position: static; }
}
/* Phones: the bases scroll sideways; the selected option's panel opens under its row. */
.sy.ph { margin-top: 16px; }
.sy.ph .sy-bases { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; border-left: 0; border-right: 0; }
.sy.ph .sy-bases::-webkit-scrollbar { display: none; }
.sy.ph .sy-base { flex: 0 0 auto; padding: 8px 14px; }
.sy.ph .sy-base b { font-size: 18px; }
.sy.ph .sy-row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; }
.sy.ph .sy-row .sy-v { grid-column: auto; flex-direction: column; align-items: flex-end; }
.sy.ph .sy-ph { width: 72px; height: 56px; }
.sy.ph .sy-row.sel { margin: 0 -16px; padding: 12px 16px; }
.sy.ph .sy-det { position: static; margin: 0 -16px; border-left: 0; border-right: 0; border-top: 0; }
.sy.ph .sy-facts { grid-template-columns: 120px 1fr; }
.sy.ph > .sy-mapbox { margin: 0 -16px; height: 360px; }
.sy.ph .sy-det .sy-mapbox { height: 260px; }
/* The Itinerary's one line per undecided base (.sysum), under the chapter photo. */
.sysum { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--stone); padding: 10px 14px; font-size: 15px; }
.sysum b { font-weight: 500; }
.sysum .m { color: var(--muted); }
.sysum .link { white-space: nowrap; color: var(--ink); }
.sysum .tg { font-size: 12px; line-height: 1.6; padding: 0 7px; border: 1px solid var(--ink); margin-right: 8px; white-space: nowrap; }
.itin.phone .sysum { margin: 0 -16px; }
.stp-tag { display: inline-block; border: 1px solid var(--ink); font-size: 13px; padding: 1px 7px; }
.stay-tonight { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stay-tonight b { font-weight: 500; }
.stay-tonight .link { margin-left: auto; }
.it-bed a, .it-pbed a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.it-pbed { margin-top: 4px; }

@media (max-width: 760px) {
  .itin.phone .it-head { justify-content: flex-end; }
  .it-strip { position: sticky; top: var(--topbar-h, 0px); z-index: 4; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 16px -16px 0; padding: 8px 16px; background: var(--paper); }
  .it-strip::-webkit-scrollbar { display: none; }
  .it-strip button { flex: none; display: grid; justify-items: center; border: 1px solid var(--line); background: none; padding: 4px 9px; color: var(--ink); font: 400 14px/1.2 var(--font-text); cursor: pointer; }
  .it-strip button b { font-weight: 400; font-size: 12px; color: var(--muted); }
  .it-strip button.on { border-color: var(--ink); }
  .itin.phone .it-head + .it-strip + .it-chapter { margin-top: 10px; }
  .it-chap { height: 110px; margin: 0 -16px; }
  .it-cap h2 { font-size: 30px; }
  .it-move { padding: 12px 0; gap: 10px; }
  .it-move::before { width: 20px; }
  .it-pday { padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer; }
  .it-chap + .it-pday { border-top: 0; }
  .it-phead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .it-pdate { border: 0; background: none; padding: 0; color: var(--ink); font: 300 22px/1.2 var(--font-display); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 5px; }
  .it-fold { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; }
  .it-chev { width: 12px; height: 12px; flex: none; }
  .it-chip { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.5; white-space: nowrap; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; }
  .it-chip.pick { border-color: var(--ink); color: var(--ink); }
  .it-chip.q { border-color: var(--sakura); color: var(--sakura); }
  .it-chip.ok { border-color: var(--positive); color: var(--positive); }
  .it-pbody { margin-top: 4px; }
  .it-pwhere { font-weight: 500; }
  .it-phl { font-size: 15px; }
  .it-slot { margin: 12px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--stone-2); color: var(--muted); font-size: 13px; }
  .itin.phone .it-foot { border-top: 0; }
}

/* ---------- Focus (03b-plan-itinerary-focus, 09b-full-day-focus; style guide "Focus") ---------- */
/* The button sits just left of Itinerary / Photos / Map; on, it fills ink and "Esc to exit" follows. */
.view-ctl, .full-tools.view-ctl { display: flex; align-items: center; gap: 8px; flex: none; }
.fxb { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 12px; border: 1px solid var(--ink); background: none; color: var(--ink); font: 500 14px var(--font-text); white-space: nowrap; flex: none; cursor: pointer; }
.fxb.on { background: var(--ink); color: var(--paper); }
.fxesc { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* In Focus the window never scrolls: the site nav goes and the trip fills the window under one 64px bar. */
body:has(#view-trips:not([hidden]) > .fbar) { overflow: hidden; }
body:has(#view-trips:not([hidden]) > .fbar) .topbar { display: none; }
#view-trips:has(> .fbar) { position: fixed; inset: 0; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter) 16px; display: flex; flex-direction: column; background: var(--paper); }
.fbar { display: flex; align-items: center; gap: 22px; height: 64px; flex: none; border-bottom: 1px solid var(--line); }
.ftn { border: 0; background: none; padding: 0; margin-right: 6px; font: 300 24px/1 var(--font-display); letter-spacing: -.015em; color: var(--ink); white-space: nowrap; cursor: pointer; }
.fbar .trip-tabs { flex: 1; min-width: 0; margin: 0; border-bottom: 0; align-items: center; overflow-x: auto; scrollbar-width: none; }
.fbar .trip-tabs::-webkit-scrollbar { display: none; }
.fbar .trip-tabs button { padding: 0; white-space: nowrap; }
.fbar .trip-tabs button.on { border-bottom: 0; margin-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
#view-trips:has(> .fbar) #trip-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Itinerary: only the list scrolls, each chapter's Morning / Afternoon / Evening stuck to its top. */
#view-trips:has(> .fbar) .itin { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#view-trips:has(> .fbar) .it-dh { top: 0; }
/* ...under the same day strip as a day, pinned: a date scrolls the list to its day, and the day at the top is marked. */
#trip-body > .full-head { flex: none; margin-top: 14px; }
#trip-body > .full-head .day-strip { margin-top: 0; border-bottom: 0; flex: 1; min-width: 0; padding-left: 14px; }
/* A day: the strip and the photo or map stay put; only the plan column scrolls. */
#view-trips:has(> .fbar) .full-plan { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 14px; }
#view-trips:has(> .fbar) .full-cols { flex: 1; height: auto; min-height: 0; }
#view-trips:has(> .fbar) .full-plan > .change-log { display: none; }
/* People, Places, Money and To-do: the tab's own page scrolls under the bar, its sticky parts stuck to the bar. */
#view-trips:has(> .fbar) #trip-body:not(.tb-plan) { display: block; overflow-y: auto; overscroll-behavior: contain; padding-top: 4px; }
#view-trips:has(> .fbar) :is(.trip-map, .todo-side-box) { top: 14px; }
@media (max-width: 760px) { .view-ctl .fxb, .fxesc { display: none; } }

/* ---------- Focus on phones (phone-01b-plan-itinerary-focus, phone-06b-day-focus; style guide "Focus") ---------- */
/* Focus sits at the right end of the date strip on a paper plate, so the days scroll under it; on, it reads Exit. */
.fxp { position: sticky; right: 0; margin-left: auto; flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 16px 0 10px; background: var(--paper); z-index: 2; }
.day-strip:has(> .fxp), .it-strip:has(> .fxp) { padding-right: 0; }
.it-strip > .fxp { margin-top: -8px; margin-bottom: -8px; }
.day-strip .fxp .fxi, .it-strip .fxp .fxi { display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 36px; padding: 6px 10px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: 500 14px var(--font-text); box-shadow: none; overflow: visible; }
.day-strip .fxp .fxi.fx-on, .it-strip .fxp .fxi.fx-on { background: var(--ink); color: var(--paper); }
@media (min-width: 761px) { .fxp { display: none; } }
/* On: the app bar, cover, trip header and section tabs go. A 48px bar stays (trip name, the switch), the date
   strip sticks under it, and on a day the ‹ day › header under that; the window still does the scrolling. */
.fzbar { display: none; }
@media (max-width: 760px) {
  body:has(#view-trips:not([hidden]) > .fzbar) .topbar { display: none; }
  .fzbar { position: sticky; top: 0; z-index: 7; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 48px; margin: 0 -16px; padding: 0 16px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 -100vh 0 0 var(--paper); }
  .fzn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 300 20px/1 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
  .fzbar .view-seg { flex: none; }
  .fzbar .view-seg button { padding: 4px 9px; font-size: 13px; }
  #view-trips:has(> .fzbar) :is(.it-head, .hero .view-seg, .days-grid .view-seg, .phone-map .view-seg, .claude-fab) { display: none; }
  #view-trips:has(> .fzbar) .it-strip { margin-top: 0; border-bottom: 1px solid var(--line); }
  #view-trips:has(> .fzbar) .itin.phone .it-strip + .it-chapter { margin-top: 0; }
}

/* ---------- screen sizes (STYLE_GUIDE "Screen sizes") ---------- */
/* Tablet: the day sits above Morning / Afternoon / Evening, and the tabs take their own row. */
@media (min-width: 761px) and (max-width: 1023px) {
  .it-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
  .it-grid > :first-child { grid-column: 1 / -1; }
  .it-grid > .it-dh:first-child { display: none; }
  .it-row > :first-child { padding-bottom: 10px; }
  .trip-tabs-row { flex-wrap: wrap; justify-content: flex-end; }
  .trip-tabs-row > .trip-tabs { flex: 1 1 100%; }
  .trip-cover { height: 150px; }
}
/* Wide: trips fill the 1600px frame, in Focus too. */
@media (min-width: 1800px) {
  body:has(#view-trips:not([hidden])) main, #view-trips:has(> .fbar) { max-width: 1600px; }
}