/* =========================================================
   home.css — homepage layout
   3/6/3 grid: day summary | capture + stream | todos
   ========================================================= */

.page-home {
  padding-top: 56px;
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  column-gap: 56px;
}

/* 2-column intermediate: left = day + capture + stream stacked, right = todos */
@media (max-width: 1200px) and (min-width: 721px) {
  .page-home {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: 48px;
    row-gap: 36px;
    align-items: start;
  }
  .col-left { order: 1; }
  .col-mid  { order: 2; grid-column: 1; }
  .col-right { order: 3; grid-column: 2; grid-row: 1 / span 2; }
  .capture-wrap { max-width: none; margin: 0; }
}

@media (max-width: 720px) {
  .page-home {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 32px;
  }
  .capture-wrap { max-width: none !important; }
  .capture { padding: 14px 16px; }
}

/* =========================================================
   DAY SUMMARY (left column)
   ========================================================= */
.day-sum {}
.day-sum__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.day-sum__date {
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}
.day-sum__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  flex-wrap: wrap;
}
.day-sum__meta .item { display: inline-flex; align-items: center; gap: 6px; }
.day-sum__meta .sep { color: var(--ink-4); }
@media (max-width: 720px) {
  .day-sum__meta { font-size: 13px; }
}
.moon-wrap {
  display: inline-flex;
  align-items: center;
}
.moon {
  display: inline-block;
  width: 10px; height: 10px;
  vertical-align: -1px;
}
/* ===== Active trip strip (2-line) ===== */
.trip-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  text-align: left;
  transition: color 140ms ease;
}
.trip-strip:hover { color: var(--blue); }
.trip-strip:hover .trip-strip__open { transform: translate(2px, -2px); color: var(--blue); }
.trip-strip__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.trip-strip__name {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.15;
}
.trip-strip__sub {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.trip-strip__arc { color: var(--ink-2); }
.trip-strip__sep { color: var(--ink-4); }
.trip-strip__dates { color: var(--ink-3); }
.trip-strip__open {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink-3);
  padding: 6px 8px;
  margin-right: -8px;
  flex-shrink: 0;
  transition: transform 200ms ease, color 140ms ease;
}

/* Today/Next sub-rows */
.trip-now {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trip-now__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.trip-now__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 48px;
  flex-shrink: 0;
}
.trip-now__value {
  color: var(--ink);
}

.day-sum__section {
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.day-sum__section:first-of-type { border-top: 0; }
.day-sum__section__label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
  font-weight: 500;
}

/* note button — opens the overlay editor */
.note-btn {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 8px 0;
  cursor: pointer;
  color: var(--ink);
  transition: color 140ms ease;
}
.note-btn:hover { color: var(--blue); }
.note-btn:hover .note-btn__arrow { color: var(--blue); transform: translateX(2px); }
.note-btn__preview {
  font-size: 14px;
  letter-spacing: -0.005em;
  color: inherit;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.note-btn__preview.is-empty {
  color: var(--ink-3);
  font-style: italic;
}
.note-btn__arrow {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink-3);
  flex-shrink: 0;
  padding: 4px 6px;
  margin-right: -6px;
  transition: transform 200ms ease, color 140ms ease;
}

/* idle empty state */
.day-sum__idle {
  padding: 28px 0 8px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.day-sum__idle__svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
  color: var(--ink);
}
.day-sum__idle__quote {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: -0.011em;
  color: var(--ink);
  line-height: 1.45;
  font-weight: 400;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  margin: 0;
}
.day-sum__idle__caption {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* =========================================================
   CAPTURE + STREAM (middle)
   ========================================================= */
.col-mid {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.capture-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}
.capture {
  background: var(--field);
  padding: 14px 20px;
  border-radius: 2px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: background 200ms ease;
}
.capture:focus-within { background: var(--field-focus); }
.capture__plus {
  font-size: 16px;
  color: var(--ink-3);
  flex-shrink: 0;
  line-height: 22px;
  position: relative;
  top: 0;
}
.capture__input {
  flex: 1;
  min-width: 0; /* allow shrink in flex row */
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 22px;
  color: var(--ink);
  outline: none;
  padding: 0;
  margin: 0;
  min-height: 22px;
  resize: none;
  overflow-y: auto;
  letter-spacing: -0.005em;
}
.capture__input::placeholder { color: var(--ink-3); }
.capture__send {
  font-size: 13px;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity 140ms ease, color 140ms ease;
  flex-shrink: 0;
}
.capture__send.is-on { opacity: 1; }
.capture__send:hover { color: var(--blue); }
.capture__tags {
  padding: 0 4px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 14px;
  font-size: 12px;
  color: var(--ink-3);
}
.capture__tags .tag {
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.capture__tags .tag.is-on {
  opacity: 1;
  transform: translateY(0);
}
.capture__topline {
  display: flex;
  justify-content: flex-end;
  padding: 0 4px 4px;
}
.capture__batch-link {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 140ms ease;
}
.capture__batch-link:hover { color: var(--blue); }

/* stream */
.stream__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.stream__label {
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-weight: 500;
}
.stream__more {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stream__more:hover { color: var(--blue); }

.stream {
  display: flex;
  flex-direction: column;
}
.stream__empty {
  padding: 24px 0;
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
}
.stream__item {
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  cursor: pointer;
  transition: opacity 140ms ease;
}
.stream__item:hover .stream__name { color: var(--blue); }
.stream__item.stream__ghost { cursor: default; }
.stream__item.stream__ghost:hover .stream__name { color: var(--ink); }
.stream__item:first-child { border-top: 0; padding-top: 4px; }
.stream__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.stream__name {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.3;
  word-break: break-word;
}
.stream__meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.stream__meta .dot { color: var(--ink-4); margin: 0 5px; }
.stream__when {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: start;
  padding-top: 2px;
}

/* Structured save rendering (when AI parsed a place_name) */
.stream__name--raw {
  font-weight: 400;
  font-size: 15px;
  color: var(--ink-2);
}
.stream__name--tip {
  /* Tip without a place_name: render the tip as the heading, italic to signal "not a venue yet" */
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.stream__tip {
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  line-height: 1.45;
  margin-top: 3px;
}
.stream__pending {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 6px;
  vertical-align: 1px;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

/* Ghost row shown immediately on capture, while AI parse runs */
.stream__ghost .stream__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stream__ghost-bar {
  display: block;
  background: var(--rule);
  border-radius: 2px;
  animation: ghostPulse 1.2s ease-in-out infinite;
}
.stream__ghost-bar--name { width: 38%; height: 14px; }
.stream__ghost-bar--tip  { width: 62%; height: 11px; opacity: 0.7; animation-delay: 120ms; }
.stream__ghost-bar--meta { width: 22%; height: 9px;  opacity: 0.55; animation-delay: 240ms; }
@keyframes ghostPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}
.stream__ghost .stream__when {
  font-family: var(--mono);
  color: var(--ink-3);
  opacity: 0.6;
}

/* =========================================================
   TODOS (right column) — notes-style, API-persisted
   ========================================================= */
.todos__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.todos__label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.todos__expand {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 6px 8px;
  margin: -6px -8px;
  transition: color 140ms ease, transform 140ms ease;
}
.todos__expand:hover {
  color: var(--blue);
  transform: translate(2px, -2px);
}

.todo-list { display: flex; flex-direction: column; gap: 0; }
.todo {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 2px 0;
  align-items: baseline;
}
.todo__dot {
  position: relative;
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  background: transparent;
  margin-top: 4px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
  flex-shrink: 0;
}
.todo:hover .todo__dot { border-color: var(--ink); }
.todo.is-done .todo__dot {
  background: var(--ink);
  border-color: var(--ink);
}
.todo__text {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  outline: none;
  cursor: text;
  min-height: 1.4em;
  padding: 0;
  word-break: break-word;
}
.todo.is-done .todo__text {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 0.5px;
}
.todos__add-zone {
  min-height: 24px;
  cursor: text;
  padding: 4px 0 0;
}

/* Empty state — ghost row prompting first todo */
.todo.is-ghost,
.todo-fs__row.is-ghost {
  cursor: text;
  opacity: 0.6;
  transition: opacity 140ms ease;
}
.todo.is-ghost:hover,
.todo-fs__row.is-ghost:hover {
  opacity: 1;
}
.is-ghost-text {
  color: var(--ink-3) !important;
  font-style: italic;
}

/* =========================================================
   TODO FULLSCREEN EDITOR — Apple Notes style
   ========================================================= */
.todo-fs .modal__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 26px var(--gutter) 28px;
}
.todo-fs__title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  justify-self: start;
}
.todo-fs__date {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: -0.005em;
  justify-self: center;
  font-variant-numeric: tabular-nums;
}
.todo-fs .modal__close { justify-self: end; }

.todo-fs__inner {
  max-width: 720px;
  padding-top: 4px;
}
.todo-fs__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.todo-fs__row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  padding: 3px 0;
  align-items: baseline;
}
.todo-fs__dot {
  position: relative;
  width: 20px; height: 20px;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  background: transparent;
  margin-top: 4px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
  flex-shrink: 0;
}
.todo-fs__row:hover .todo-fs__dot { border-color: var(--ink); }
.todo-fs__row.is-done .todo-fs__dot {
  background: var(--ink);
  border-color: var(--ink);
}
.todo-fs__text {
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -0.008em;
  outline: none;
  cursor: text;
  min-height: 1.45em;
  padding: 2px 0;
  word-break: break-word;
}
.todo-fs__row.is-done .todo-fs__text {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 0.5px;
}
.todo-fs__addzone {
  min-height: 40px;
  cursor: text;
  margin-top: 4px;
}

/* =========================================================
   NOTE OVERLAY — full screen editor
   ========================================================= */
.note-textarea {
  width: 100%;
  min-height: 60vh;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--ink);
  resize: none;
  padding: 0;
  font-weight: 400;
}
.note-textarea::placeholder {
  color: var(--ink-3);
  font-style: italic;
}

/* =========================================================
   ITINERARY OVERLAY (full-screen modal)
   ========================================================= */
.itin-fs__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.itin-fs__title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.05;
  color: var(--ink);
}
.itin-fs__dates {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.itin-fs__inner {
  max-width: 720px;
}
.itin-fs__meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.itin-fs__meta:empty { display: none; }
.itin-fs__trip-notes {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 540px;
  margin: 0 0 32px;
  padding: 18px 0;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
}
.itin-fs__trip-notes:empty { display: none; }
.itin-fs__trip-notes code,
.itin-fs__seg-notes code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--field);
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--ink);
  letter-spacing: 0;
}
.itin-fs__trip-notes a,
.itin-fs__seg-notes a {
  color: var(--blue);
  border-bottom: 1px solid var(--rule);
  transition: border-color 140ms ease;
}
.itin-fs__trip-notes a:hover,
.itin-fs__seg-notes a:hover {
  border-bottom-color: var(--blue);
}
.itin-fs__trip-notes strong,
.itin-fs__seg-notes strong {
  color: var(--ink);
  font-weight: 500;
}
.itin-fs__segments {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 48px;
}
.itin-fs__seg {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}
.itin-fs__seg:last-child { border-bottom: 1px solid var(--rule); }
.itin-fs__seg-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 4px;
}
.itin-fs__seg-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 0 0 6px;
  color: var(--ink);
}
.itin-fs__seg-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.itin-fs__here {
  color: var(--blue);
  font-weight: 500;
}
.itin-fs__seg.is-here .itin-fs__seg-name {
  position: relative;
}
.itin-fs__seg.is-here .itin-fs__seg-name::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.itin-fs__seg-notes {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin: 6px 0 0;
  max-width: 540px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.itin-fs__empty {
  padding: 24px 0;
  font-size: 14px;
  color: var(--ink-3);
  font-style: italic;
}
.itin-fs__placeholders {
  margin-top: 24px;
  padding: 24px 0;
  border-top: 1px dashed var(--rule);
}
.itin-fs__placeholder {
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
  max-width: 520px;
}
.itin-fs__edit-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.itin-fs__edit-link:hover { color: var(--blue); }

@media (max-width: 720px) {
  .itin-fs__seg {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 0;
  }
  .itin-fs__seg-date { padding-top: 0; }
  .itin-fs__seg-name { font-size: 18px; }
}

/* =========================================================
   SAVE EDITOR (fullscreen modal for editing a save)
   ========================================================= */
.save-fs__title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: -0.005em;
  margin: 0;
}
.save-fs__inner {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.save-fs__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.save-fs__label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.save-fs__captured {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--field);
  border-radius: 2px;
  letter-spacing: -0.005em;
}
.save-fs__readonly {
  font-size: 14px;
  color: var(--ink-2);
  padding: 6px 0;
}
.save-fs__input,
.save-fs__textarea,
.save-fs__select {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--field);
  border: 0;
  outline: 0;
  padding: 11px 12px;
  border-radius: 2px;
  letter-spacing: -0.005em;
  width: 100%;
  transition: background 140ms ease;
}
.save-fs__input:focus,
.save-fs__textarea:focus,
.save-fs__select:focus { background: var(--field-focus); }
.save-fs__textarea { resize: vertical; min-height: 56px; line-height: 1.45; }
.save-fs__select { appearance: none; cursor: pointer; }

/* City autocomplete suggestions */
.save-fs__suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  z-index: 5;
  max-height: 260px;
  overflow-y: auto;
}
.save-fs__suggest:empty { display: none; }
.save-fs__suggest-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 9px 12px;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.save-fs__suggest-item:hover { background: var(--field); }
.save-fs__suggest-item--create { color: var(--blue); border-top: 1px solid var(--rule); }
.save-fs__suggest-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-left: 6px;
}

/* Footer actions */
.save-fs__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.save-fs__foot-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.save-fs__danger,
.save-fs__reparse {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: color 140ms ease;
}
.save-fs__danger:hover { color: #c33; }
.save-fs__reparse:hover { color: var(--blue); }

/* ===== Mini-month under trip strip (CdG-inspired, days only) ===== */
.mm {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--rule);
}
.mm__cell {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  text-align: center;
  padding: 4px 2px;
  line-height: 1.2;
}
.mm__cell--empty {
  color: transparent;
}
.mm__cell--trip {
  color: var(--blue);
}

/* Day-of-year — clickable to open year overlay (easter egg) */
.day-sum__doy--clickable {
  cursor: pointer;
  user-select: none;
  transition: color 140ms ease;
}
.day-sum__doy--clickable:hover {
  color: var(--blue);
}
.day-sum__doy--clickable:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Hide mini-month on mobile — too much vertical real estate */
@media (max-width: 720px) {
  .mm { display: none; }
}

/* ===== Year-view calendar overlay (CdG 1986) ===== */
.year-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.year-overlay.is-open {
  display: block;
}
.year-overlay__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 40px 80px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.year-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.year-overlay__title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.year-overlay__close {
  font-family: var(--sans);
  font-size: 28px;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0 8px;
  margin-right: -8px;
  cursor: pointer;
  line-height: 1;
  font-weight: 300;
  transition: color 140ms ease;
}
.year-overlay__close:hover { color: var(--blue); }
.year-overlay__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 32px;
  row-gap: 56px;
  flex: 1;
}

/* Each month block */
.ym__month {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ym__num {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.ym__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.ym__cell {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  text-align: center;
  padding: 5px 2px;
  line-height: 1.3;
}
.ym__cell--empty {
  color: transparent;
}
.ym__cell--trip {
  color: var(--blue);
}

/* Responsive: 3 cols on tablet, 2 cols on mobile */
@media (max-width: 1100px) {
  .year-overlay__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .year-overlay__inner { padding: 24px 20px 60px; }
  .year-overlay__head { margin-bottom: 28px; }
  .year-overlay__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 36px;
  }
  .ym__num { font-size: 26px; }
  .ym__cell { font-size: 12px; padding: 4px 1px; }
  .year-overlay__close { font-size: 26px; }
}