/* src/styles/views/itinerary.css — owned by T2 (Itinerary view). Scope every rule under .view-itinerary. */

.view-itinerary { --rail-w: 44px; --rail-gap: 12px; --time-w: 52px; }
.view-itinerary ol, .view-itinerary ul { list-style: none; margin: 0; padding: 0; }

/* ── Route strip ─────────────────────────────────────────────── */
.view-itinerary .itin-route { margin: var(--s-2) 0 var(--s-7); }

/* ── Timeline ────────────────────────────────────────────────── */
.view-itinerary .itin-timeline { display: flex; flex-direction: column; }
.view-itinerary .itin-day-slot { display: block; }

/* ── Chapter opener ──────────────────────────────────────────── */
.view-itinerary .itin-chapter { margin: var(--s-6) 0 var(--s-4); }
.view-itinerary .itin-chapter:first-child { margin-top: 0; }
.view-itinerary .itin-chapter-plate {
  position: relative; overflow: hidden; display: flex; align-items: stretch; gap: var(--s-3);
  min-height: 96px; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-radius: var(--r-3); background: var(--tone-wash); color: var(--tone-ink);
}
.view-itinerary .itin-chapter.is-travel .itin-chapter-plate,
.view-itinerary .itin-chapter.is-open .itin-chapter-plate {
  background: transparent; border: 1px dashed var(--line-strong); color: var(--text-2);
}
.view-itinerary .itin-chapter-text { position: relative; flex: 1; min-width: 0; align-self: center; }
.view-itinerary .itin-chapter-range {
  display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s-1);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label);
  text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--tone-ink); opacity: .85;
}
.view-itinerary .itin-chapter-name {
  margin: 0; font: 500 var(--fs-chapter)/var(--lh-chapter) var(--font-serif);
  font-optical-sizing: auto; letter-spacing: -.01em; color: var(--tone-ink);
}
.view-itinerary .itin-chapter.is-travel .itin-chapter-name,
.view-itinerary .itin-chapter.is-open .itin-chapter-name { color: var(--text); font-style: italic; font-weight: 400; }
.view-itinerary .itin-chapter-sub {
  margin: var(--s-1) 0 0; font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-itinerary .itin-chapter-kanji {
  position: relative; align-self: center; font-size: 16px; letter-spacing: .3em; color: var(--tone-ink);
}
.view-itinerary .itin-chapter.is-travel .itin-chapter-kanji,
.view-itinerary .itin-chapter.is-open .itin-chapter-kanji { color: var(--text-3); }

/* ── Day: rail + card ────────────────────────────────────────── */
.view-itinerary .itin-day {
  display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); column-gap: var(--rail-gap);
  scroll-margin-top: var(--s-2); /* html already has scroll-padding-top for the app bar */
}
.view-itinerary .itin-rail { display: flex; flex-direction: column; align-items: center; padding-top: 14px; }
.view-itinerary .itin-rail .stamp { flex-shrink: 0; }
.view-itinerary .itin-rail-line {
  flex: 1; width: 3px; margin: var(--s-2) 0 calc(-1 * var(--s-1)); min-height: var(--s-4);
  background: var(--tone-ink); border-radius: 2px;
}
.view-itinerary .itin-day.is-moving .itin-rail-line {
  background: repeating-linear-gradient(to bottom, var(--tone-ink) 0 6px, transparent 6px 11px);
}
.view-itinerary .tone-travel .itin-rail-line,
.view-itinerary .tone-open .itin-rail-line { background: repeating-linear-gradient(to bottom, var(--line-strong) 0 6px, transparent 6px 11px); }

.view-itinerary .itin-card {
  position: relative; min-width: 0; margin-bottom: var(--card-gap);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
}
.view-itinerary .itin-card.is-today { border: 1.5px solid var(--accent); }
.view-itinerary .itin-card-kanji {
  position: absolute; top: 14px; right: 14px; font-size: 12px; letter-spacing: .25em;
  color: var(--tone-ink); opacity: .6; pointer-events: none; display: none;
}
@media (min-width: 390px) { .view-itinerary .itin-card-kanji { display: block; } }

/* Header (a full-width button) */
.view-itinerary .itin-day-head {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1);
  width: 100%; padding: 14px 44px 14px var(--s-4); margin: 0;
  background: transparent; border: 0; border-radius: var(--r-3); color: var(--text);
  text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.view-itinerary div.itin-day-head { cursor: default; }
.view-itinerary .itin-day-head:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.view-itinerary .itin-card.is-today .itin-day-head { background: var(--accent-wash); border-radius: 11px 11px 0 0; }
.view-itinerary .itin-day:not(.is-open) .itin-card.is-today .itin-day-head { border-radius: 11px; }
.view-itinerary .itin-eyebrow {
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.view-itinerary .itin-card.is-today .itin-eyebrow { color: var(--accent-text); }
.view-itinerary .itin-title {
  font: 500 var(--fs-title-2)/var(--lh-title-2) var(--font-serif); font-optical-sizing: auto;
  letter-spacing: -.005em; color: var(--text); text-wrap: balance;
}
.view-itinerary .itin-arrow { font-family: var(--font-sans); font-weight: 400; color: var(--text-3); }
.view-itinerary .itin-subtitle {
  font: 400 italic var(--fs-aside)/var(--lh-aside) var(--font-serif); color: var(--text-2); margin-top: -2px;
}
.view-itinerary .itin-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); max-width: 100%; }
.view-itinerary .itin-meta .tag { max-width: 100%; }
.view-itinerary .itin-meta .tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-itinerary .itin-summary {
  display: none; font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-2);
  font-variant-numeric: tabular-nums; margin-top: var(--s-1);
}
.view-itinerary .itin-day:not(.is-open) .itin-summary { display: block; }
.view-itinerary .itin-chev {
  position: absolute; right: 12px; bottom: 16px; color: var(--text-3);
  transition: transform var(--dur-2) var(--ease-out);
}
.view-itinerary .itin-day.is-open .itin-day-head > .itin-chev { transform: rotate(180deg); } /* the day's own, not a block's */
.view-itinerary .itin-day.is-past:not(.is-open) .itin-title { color: var(--text-2); }

/* Body: grid-rows 0fr ↔ 1fr */
.view-itinerary .itin-day-body {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 280ms var(--ease-out), visibility 0s linear 280ms;
}
.view-itinerary .itin-day.is-open .itin-day-body {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows 280ms var(--ease-out), visibility 0s;
}
.view-itinerary .itin-day-inner { min-height: 0; overflow: hidden; padding: 0 var(--s-4); }
.view-itinerary .itin-day.is-open .itin-day-inner { padding-bottom: var(--s-1); }
.view-itinerary .itin-day-inner > :first-child { margin-top: 0; }
.view-itinerary .itin-day-inner { opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.view-itinerary .itin-day.is-open .itin-day-inner { opacity: 1; transition-delay: 60ms; }
.view-itinerary .itin-day-summary {
  margin: 0 0 var(--s-2); font: 400 italic var(--fs-aside)/var(--lh-aside) var(--font-serif); color: var(--text-2);
}
.view-itinerary .itin-compact-note {
  margin: 0 0 var(--s-3); font: 400 italic var(--fs-body)/var(--lh-body) var(--font-serif); color: var(--text-3);
}
.view-itinerary .itin-compact-note::first-letter { text-transform: uppercase; }

/* Compact (no file yet) */
.view-itinerary .itin-day.is-compact .itin-card { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.view-itinerary .itin-day.is-compact .itin-day-head { padding-bottom: var(--s-2); }
.view-itinerary .itin-day.is-compact .itin-title { font-size: var(--fs-title-3); line-height: var(--lh-title-3); }
.view-itinerary .itin-day.is-compact .itin-items { margin-bottom: var(--s-2); }

/* ── Item rows: [time][icon][body][action] ────────────────────── */
.view-itinerary .itin-items { position: relative; }
.view-itinerary .itin-item {
  display: grid; grid-template-columns: var(--time-w) 24px minmax(0, 1fr) 44px; column-gap: 10px;
  align-items: start; padding: var(--s-3) 0; border-top: 1px solid var(--line);
}
.view-itinerary .itin-items > .itin-item:first-child,
.view-itinerary .itin-now + .itin-item { border-top: 0; }
.view-itinerary .itin-time { padding-top: 1px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.view-itinerary .itin-time .time-part { white-space: normal; font-size: var(--fs-caption); line-height: 18px; }
.view-itinerary .itin-zone {
  font: 500 var(--fs-micro)/var(--lh-micro) var(--font-sans); letter-spacing: .04em; color: var(--text-3);
}
.view-itinerary .itin-glyph { display: flex; justify-content: center; padding-top: 1px; color: var(--text-2); }
.view-itinerary .itin-body { min-width: 0; }
.view-itinerary .itin-act { display: flex; justify-content: flex-end; margin: -10px 0 -10px; }
.view-itinerary .itin-act:empty { margin: 0; }
.view-itinerary .itin-act .btn-icon { width: 44px; height: 44px; }

.view-itinerary .itin-name-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; }
.view-itinerary .itin-name {
  font: 500 var(--fs-body)/22px var(--font-sans); color: var(--text); text-align: left;
  overflow-wrap: anywhere;
}
.view-itinerary button.itin-name {
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  text-decoration: underline 1px dotted var(--text-3); text-underline-offset: 4px;
}
.view-itinerary button.itin-name:hover { text-decoration-color: var(--text); }
.view-itinerary .itin-star { color: var(--text); align-self: center; flex-shrink: 0; }
.view-itinerary .itin-option,
.view-itinerary .itin-undecided {
  font: 400 italic var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--text-3);
}
.view-itinerary .itin-undecided { display: block; margin-bottom: 1px; }
.view-itinerary .itin-item.is-optional .itin-name { font-weight: 400; color: var(--text-2); }
.view-itinerary .itin-sub {
  display: block; margin: 2px 0 0; font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-3);
}

/* Notes with 'more' */
.view-itinerary .itin-note-wrap { margin-top: var(--s-1); }
.view-itinerary .itin-note { margin: 0; font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-2); }
.view-itinerary .itin-note.is-clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.view-itinerary .itin-note-muted { color: var(--text-3); }
.view-itinerary .itin-more {
  min-height: 32px; padding: 0 var(--s-2) 0 0; margin: -4px 0 -8px; border: 0; background: none; cursor: pointer;
  font: 500 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text);
  text-decoration: underline 1px var(--line-strong); text-underline-offset: 3px;
}
.view-itinerary .itin-more[hidden] { display: none; }

/* Warnings: shu text + glyph, never a red fill */
.view-itinerary .itin-warns { margin-top: var(--s-2); display: grid; gap: var(--s-1); }
.view-itinerary .itin-warn {
  display: flex; gap: 6px; align-items: flex-start;
  font: 500 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--accent-text);
}
.view-itinerary .itin-warn .icon { flex-shrink: 0; margin-top: 2px; }

/* Block of places */
.view-itinerary .itin-block-head {
  display: flex; align-items: flex-start; gap: var(--s-2); width: 100%; min-height: var(--tap-min);
  margin: -6px 0 -4px; padding: 6px 0 4px; border: 0; background: none; color: var(--text);
  text-align: left; font: inherit; cursor: pointer; border-radius: var(--r-2);
}
.view-itinerary .itin-block-head:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.view-itinerary .itin-block-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.view-itinerary .itin-block-meta {
  display: block; margin-top: 2px; font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-2);
}
.view-itinerary .itin-block-hi { color: var(--text); font-weight: 500; }
.view-itinerary .itin-block-hi .icon { vertical-align: -2px; }
.view-itinerary .itin-block-head .itin-chev { position: static; flex-shrink: 0; margin-top: 2px; }
.view-itinerary .itin-block-head[aria-expanded="true"] .itin-chev { transform: rotate(180deg); }
.view-itinerary .itin-block-list {
  margin-top: var(--s-2); border-top: 1px solid var(--line);
  grid-column: 1 / -1;
}
.view-itinerary .itin-block-list .place-row { min-height: 56px; padding: var(--s-2) 0; }
.view-itinerary .itin-block-list .place-row:first-child { border-top: 0; }
.view-itinerary .itin-block-list[hidden] { display: none; }

/* Transit leg: dotted connector through the icon column, mode in a circle */
.view-itinerary .itin-transit { padding: var(--s-2) 0; }
.view-itinerary .itin-transit .itin-glyph { position: relative; align-self: stretch; margin: calc(-1 * var(--s-2)) 0; padding: var(--s-2) 0; }
.view-itinerary .itin-transit .itin-glyph::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: radial-gradient(circle, var(--text-3) 1px, transparent 1.2px) center top / 2px 5px repeat-y;
}
.view-itinerary .itin-mode {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px; margin: 0 -2px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--text-2);
}
.view-itinerary .itin-leg-title { margin: 3px 0 0; font: 500 var(--fs-time)/var(--lh-time) var(--font-sans); color: var(--text); }
.view-itinerary .itin-leg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.view-itinerary .itin-dur { font-variant-numeric: tabular-nums; }
.view-itinerary .itin-cost { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.view-itinerary .itin-transit .itin-act { margin-top: -4px; }

/* Transport + arrival: compact boarding line */
.view-itinerary .itin-board {
  display: flex; flex-direction: column; gap: 2px; min-height: var(--tap-min); justify-content: center;
  margin: -10px 0; padding: 10px 0; color: var(--text); text-decoration: none;
}
.view-itinerary .itin-board-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.view-itinerary .itin-board .leg-line { font-size: var(--fs-time); display: flex; max-width: 100%; min-width: 0; }
.view-itinerary .itin-board .leg-route { flex-wrap: wrap; row-gap: 0; min-width: 0; }
.view-itinerary .itin-arrive { font: 500 var(--fs-time)/var(--lh-time) var(--font-sans); font-variant-numeric: tabular-nums; }
.view-itinerary .itin-home { margin: 0; font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Stay inset (check-in / check-out / included meals) */
.view-itinerary .itin-inset {
  padding: 10px 12px; border-radius: var(--r-2); background: var(--tone-wash); margin-top: -4px;
}
.view-itinerary .itin-stayrow .itin-glyph { color: var(--tone-ink); }
.view-itinerary .itin-stayrow .itin-name { font-size: var(--fs-time); }
.view-itinerary .itin-inset-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: 2px 0 -8px; }
.view-itinerary .itin-text-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0; border: 0; background: none;
  font: 500 var(--fs-caption)/1 var(--font-sans); color: var(--text); cursor: pointer;
  text-decoration: underline 1px var(--line-strong); text-underline-offset: 3px;
}
.view-itinerary .itin-stayrow .itin-act,
.view-itinerary .itin-placeholder .itin-act,
.view-itinerary .itin-todo .itin-act { display: none; }
.view-itinerary .itin-stayrow .itin-body,
.view-itinerary .itin-placeholder .itin-body { grid-column: 3 / -1; }
.view-itinerary .itin-placeholder .tbd-body { color: var(--text-2); }

/* To-do */
.view-itinerary .itin-todo .itin-glyph { display: none; }
.view-itinerary .itin-todo .itin-body { grid-column: 2 / -1; }
.view-itinerary .itin-todo .checkbox { min-height: var(--tap-min); margin: -10px 0 -6px; }
.view-itinerary .itin-todo .itin-note-wrap,
.view-itinerary .itin-todo .link-ext { margin-left: 34px; }
.view-itinerary .itin-todo .link-ext { display: inline-flex; margin-top: var(--s-1); font-size: var(--fs-caption); }
.view-itinerary .itin-todo.is-done .checkbox-label { color: var(--text-3); text-decoration: line-through 1px; }

/* Info note row */
.view-itinerary .itin-noteitem { display: block; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.view-itinerary .itin-items > .itin-noteitem:first-child { border-top: 0; }

/* Passed rows on today's card */
.view-itinerary .itin-item.is-passed .itin-name,
.view-itinerary .itin-item.is-passed .itin-leg-title,
.view-itinerary .itin-item.is-passed .time,
.view-itinerary .itin-item.is-passed .itin-note,
.view-itinerary .itin-item.is-passed .itin-glyph,
.view-itinerary .itin-item.is-passed .leg-line { color: var(--text-3); }
.view-itinerary .itin-item.is-passed .time-hard .time-val { text-decoration-color: var(--line-strong); }

/* Now line (today only): pill in the time column, hinomaru on the icon column, 1px shu rule */
.view-itinerary .itin-now {
  position: relative; display: grid; grid-template-columns: var(--time-w) 24px minmax(0, 1fr); column-gap: 10px;
  align-items: center; height: 0; margin: 10px 0; z-index: 1;
}
.view-itinerary .itin-now-time {
  justify-self: start; padding: 1px 5px; border-radius: var(--r-1); background: var(--accent); color: var(--on-accent);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); font-variant-numeric: tabular-nums;
}
.view-itinerary .itin-now-dot { display: flex; justify-content: center; }
.view-itinerary .itin-now-dot .hinomaru { box-shadow: 0 0 0 2px var(--surface); border-radius: 50%; }
.view-itinerary .itin-now-rule { height: 1px; background: var(--accent); margin-right: calc(-1 * var(--s-4)); }
.view-itinerary .itin-now + .itin-item { border-top: 0; }

/* Walk connector: stands in for the hairline between two stops — a dotted tick on the icon column and the time */
.view-itinerary .itin-walk {
  display: grid; grid-template-columns: var(--time-w) 24px minmax(0, 1fr); column-gap: 10px; align-items: center;
  color: var(--text-3); font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); letter-spacing: 0.01em;
}
.view-itinerary .itin-walk-line { grid-column: 2; justify-self: center; width: 0; height: 18px; border-left: 2px dotted var(--line-strong); }
.view-itinerary .itin-walk-text { grid-column: 3; min-width: 0; }
.view-itinerary .itin-walk + .itin-item { border-top: 0; padding-top: var(--s-2); }
.view-itinerary .itin-item:has(+ .itin-walk) { padding-bottom: var(--s-2); }
.view-itinerary .itin-now + .itin-walk { margin-top: var(--s-3); }

/* Footer: tonight */
.view-itinerary .itin-foot {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
  margin: 0 calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
}
.view-itinerary .itin-items:empty + .itin-foot, .view-itinerary .itin-day-inner > .itin-foot:first-child { border-top: 0; }
.view-itinerary .itin-foot-glyph { color: var(--tone-ink); }
.view-itinerary .itin-foot-text { display: flex; flex-direction: column; min-width: 0; }
.view-itinerary .itin-foot-label {
  font: 600 var(--fs-micro)/var(--lh-micro) var(--font-sans); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-3);
}
/* A long stay name wraps (two balanced lines on a phone) rather than being cut off. */
.view-itinerary .itin-foot-name {
  padding: 0; margin: 1px 0 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 500 var(--fs-title-3)/var(--lh-title-3) var(--font-serif); color: var(--text);
  overflow-wrap: break-word; text-wrap: balance;
}
.view-itinerary .itin-foot-addr {
  font: 400 var(--fs-caption)/var(--lh-caption) var(--font-jp); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A planned or placeholder stay: "Not booked yet" in place of the address, as quiet as the meta lines. */
.view-itinerary .itin-foot-status { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-3); }
.view-itinerary .itin-foot-plain { font: 400 italic var(--fs-aside)/var(--lh-aside) var(--font-serif); color: var(--text-2); }
.view-itinerary .itin-taxi { white-space: nowrap; }
@media (max-width: 519px) {
  /* The taxi card drops under the name, so the third column would stay empty and only cost its gap. */
  .view-itinerary .itin-foot { grid-template-columns: 24px minmax(0, 1fr); }
  .view-itinerary .itin-taxi { grid-column: 2; justify-self: start; margin-top: var(--s-2); }
}
@media (min-width: 520px) {
  .view-itinerary .itin-foot { padding-left: calc(var(--s-4) + var(--time-w) + 10px); }
}

/* ── End: つづく ─────────────────────────────────────────────── */
.view-itinerary .itin-end {
  display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr) auto; column-gap: var(--rail-gap);
  align-items: start; padding-bottom: var(--s-8);
}
.view-itinerary .itin-end-rail {
  justify-self: center; width: 3px; height: 80px;
  background: repeating-linear-gradient(to bottom, var(--text-3) 0 3px, transparent 3px 8px);
  -webkit-mask-image: linear-gradient(var(--mask-ink), transparent); mask-image: linear-gradient(var(--mask-ink), transparent);
}
.view-itinerary .itin-end-text {
  margin: 64px 0 0; font: 400 italic 17px/24px var(--font-serif); color: var(--text-3);
}
.view-itinerary .itin-end-kanji { margin-top: 48px; font-size: 14px; letter-spacing: .25em; color: var(--text-3); padding-right: var(--s-2); }

/* ── Floating 'Today' pill ───────────────────────────────────── */
.view-itinerary .itin-today-pill {
  position: fixed; z-index: 20; left: 50%; bottom: calc(var(--tabbar-total) + var(--s-3)); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap-min); padding: 0 var(--s-4) 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text);
  font: 600 var(--fs-small)/1 var(--font-sans); cursor: pointer; box-shadow: var(--shadow-float);
  animation: itin-pill-in var(--dur-2) var(--ease-out) both;
}
.view-itinerary .itin-today-pill[hidden] { display: none; }
.view-itinerary .itin-today-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@keyframes itin-pill-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Wider screens ───────────────────────────────────────────── */
@media (min-width: 600px) {
  .view-itinerary { --rail-w: 52px; --rail-gap: 16px; --time-w: 60px; }
  .view-itinerary .itin-day-head { padding: 16px 56px 16px 20px; }
  .view-itinerary .itin-day-inner { padding: 0 20px; }
  .view-itinerary .itin-foot { margin: 0 -20px; padding-right: 20px; padding-left: calc(20px + var(--time-w) + 10px); }
  .view-itinerary .itin-now-rule { margin-right: -20px; }
  .view-itinerary .itin-chapter-plate { padding-left: calc(var(--rail-w) + var(--rail-gap) + 20px); }
}
@media (min-width: 1024px) {
  .view-itinerary .itin-today-pill { bottom: var(--s-6); left: calc(50% + var(--sidenav-w) / 2); }
}

@media (prefers-reduced-motion: reduce) {
  .view-itinerary .itin-day-body, .view-itinerary .itin-day-inner, .view-itinerary .itin-chev { transition: none !important; }
  .view-itinerary .itin-today-pill { animation: none; }
}

/* ── Review pass: 44px hit areas without changing the visual rhythm ── */
.view-itinerary button.itin-name { position: relative; }
.view-itinerary button.itin-name::after,

.view-itinerary .itin-more::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }

.view-itinerary .itin-more { position: relative; }
.view-itinerary button.itin-name:focus-visible,
.view-itinerary .itin-foot-name:focus-visible,
.view-itinerary .itin-more:focus-visible,
.view-itinerary .itin-text-btn:focus-visible,
.view-itinerary .itin-board:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
.view-itinerary .itin-foot-name { padding: 10px 0; margin: -9px 0 -10px; } /* padding, not a pseudo: a 44px hit area on one line */

/* ── Phones (≤480px): time stacks above the title ────────────────
   [icon][time ........ action]
   [icon][title, sub, notes — full width]
   so the text column is ~240px at 390 instead of a ~120px sliver. */
@media (max-width: 480px) {
  .view-itinerary { --rail-gap: 8px; }
  .view-itinerary .itin-item {
    grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px;
    grid-template-areas: "glyph time act" "glyph body body";
  }
  .view-itinerary .itin-time { grid-area: time; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; align-self: center; }
  .view-itinerary .itin-glyph { grid-area: glyph; }
  .view-itinerary .itin-time .time-bound { flex-direction: row; align-items: baseline; gap: 5px; }
  .view-itinerary .itin-body,
  .view-itinerary .itin-stayrow .itin-body,
  .view-itinerary .itin-placeholder .itin-body { grid-area: body; }
  .view-itinerary .itin-act { grid-area: act; margin: -12px -10px -12px 0; align-self: center; }
  .view-itinerary .itin-act:empty { margin: 0; }
  .view-itinerary .itin-time:empty { display: none; }
  /* Rows without a time: the body takes the first line */
  .view-itinerary .itin-item:has(> .itin-time:empty) { grid-template-areas: "glyph body act"; }
  .view-itinerary .itin-item:has(> .itin-time:empty):has(> .itin-act:empty) { grid-template-areas: "glyph body body"; }
  /* To-do: no icon; checkbox runs from the left edge */
  .view-itinerary .itin-todo { grid-template-areas: "time time time" "body body body"; }
  .view-itinerary .itin-todo:has(> .itin-time:empty) { grid-template-areas: "body body body"; }
  /* Transit: dotted connector keeps running down the icon column through both lines */
  .view-itinerary .itin-transit .itin-mode { width: 24px; height: 24px; margin: 0 -2px; }
  /* Now line: hinomaru on the icon column, pill then rule */
  .view-itinerary .itin-now { grid-template-columns: 20px auto minmax(0, 1fr); column-gap: 8px; }
  .view-itinerary .itin-now-dot { grid-column: 1; grid-row: 1; }
  .view-itinerary .itin-now-time { grid-column: 2; grid-row: 1; }
  .view-itinerary .itin-now-rule { grid-column: 3; grid-row: 1; }
  .view-itinerary .itin-walk { grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; }
  .view-itinerary .itin-walk-line { grid-column: 1; }
  .view-itinerary .itin-walk-text { grid-column: 2; }
}

/* ── P3 integration: timetable cards + hike strip on the day cards ───────── */
/* Above the phone breakpoint the card takes the action column too; below it the
   mobile grid-areas rules (≤480px) already give a time-less row the full width. */
@media (min-width: 481px) {
  .view-itinerary .itin-timetable { grid-template-columns: var(--time-w) 24px minmax(0, 1fr); }
}
.view-itinerary .itin-timetable .tt-card { margin: 0; }
.view-itinerary .itin-day-inner > .hike-strip { margin-bottom: var(--s-3); }
.view-itinerary .itin-meta .wx-chip { max-width: 100%; }

/* ── Day card "Map" action (journey map, Day scope) — sits on the eyebrow line, left of the kanji ── */
.view-itinerary .itin-day-map {
  position: absolute; top: 0; right: var(--s-1); z-index: 1;
  display: inline-flex; align-items: center; gap: 5px; min-width: var(--tap-min); height: var(--tap-min); padding: 0 var(--s-2);
  justify-content: center; border-radius: var(--r-2);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-2); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.view-itinerary .itin-day-map .icon { color: var(--tone-ink); }
.view-itinerary .itin-day-map:hover { color: var(--text); }
.view-itinerary .itin-day-map:active { background: var(--surface-pressed); }
.view-itinerary .itin-day-map:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (min-width: 390px) { .view-itinerary .itin-day-map { right: 30px; } }
@media print { .view-itinerary .itin-day-map { display: none; } }

/* ── Under the day header: the tide chip (a link to the tide clock) and the season strip (features/season-ui.js),
      siblings of the header button on one quiet wrapping line. The header gives up its bottom padding to them; on
      today's card they carry the same wash. ── */
.view-itinerary .itin-card.has-extras .itin-day-head { padding-bottom: 2px; }
.view-itinerary .itin-head-extras {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-3); padding: 0 var(--s-3) 6px var(--s-4);
}
/* The chip is 28 px; its link reaches 44 px through its own ::after (8 px above and below). */
.view-itinerary .itin-head-extras > .tide-chip { margin: 6px 0; }
.view-itinerary .itin-card.is-today .itin-head-extras { background: var(--accent-wash); }
/* On the wash a peak chip's own wash would vanish: give it the full leaf line. */
.view-itinerary .itin-card.is-today .itin-head-extras .leaf-chip.is-peak { border-color: var(--lf-line); }
.view-itinerary .itin-day .itin-card.is-today.has-extras .itin-day-head { border-radius: 11px 11px 0 0; }
.view-itinerary .itin-day:not(.is-open) .itin-card.is-today .itin-head-extras { border-radius: 0 0 11px 11px; }
@media (min-width: 600px) { .view-itinerary .itin-head-extras { padding: 0 20px 8px; } }

/* ── The walk picked in the hike profile: the chosen option says so in the region's tone, the others go quiet
      (still readable, the note on one line), and the open question above them is hidden. ── */
.view-itinerary .itin-item[hidden] { display: none; }
.view-itinerary .itin-items > .itin-item[hidden]:first-child + .itin-item { border-top: 0; }
.view-itinerary .itin-chosen {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 3px;
  font: 600 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--tone-ink);
}
.view-itinerary .itin-unchosen {
  display: block; margin-bottom: 1px; font: 400 italic var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--text-3);
}
.view-itinerary .itin-item.is-chosen .itin-glyph { color: var(--tone-ink); }
.view-itinerary .itin-item.is-unchosen .itin-name,
.view-itinerary .itin-item.is-unchosen .itin-glyph,
.view-itinerary .itin-item.is-unchosen .itin-block-meta,
.view-itinerary .itin-item.is-unchosen .itin-block-hi { font-weight: 400; color: var(--text-3); }
.view-itinerary .itin-item.is-unchosen .itin-note { color: var(--text-3); }
.view-itinerary .itin-item.is-unchosen .itin-note.is-clamped { -webkit-line-clamp: 1; line-clamp: 1; }