/* 行程頁專用：時間軸、航班、清單、相簿、編輯器、鎖頁。 */

/* ---------- 時間軸 ---------- */
.tl { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 2.5rem minmax(0,1fr); row-gap: var(--s-5); }
.tl::before {
  content: ""; position: absolute; top: 0.75rem; bottom: 0.75rem; left: 50%;
  width: 1px; background: var(--c-ink); transform: translateX(-0.5px);
}
.tl__entry { position: relative; }
.tl__entry--l { grid-column: 1; text-align: right; padding-right: var(--s-4); }
.tl__entry--r { grid-column: 3; padding-left: var(--s-4); }
/* 從卡片牽一條虛線到中軸，像手畫的引線 */
.tl__entry::after {
  content: ""; position: absolute; top: 0.9rem; width: calc(var(--s-4) + 1.25rem); height: 0;
  border-top: 1px dashed var(--c-rule-strong);
}
.tl__entry--l::after { right: calc(-1.25rem); }
.tl__entry--r::after { left: calc(-1.25rem); }
.tl__dot {
  position: absolute; top: 0.72rem; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-paper-raised); border: 1.5px solid var(--c-ink);
}
.tl__entry--l .tl__dot { right: calc(-1.25rem - 3.5px); }
.tl__entry--r .tl__dot { left: calc(-1.25rem - 3.5px); }

.tl__time { font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-seal); letter-spacing: 0.04em; }
.tl__title { font-family: var(--f-display); font-size: var(--fs-md); letter-spacing: 0.06em; margin-top: 2px; }
.tl__detail { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-top: var(--s-1); white-space: pre-line; }
.tl__note {
  display: inline-block; margin-top: var(--s-2); padding: var(--s-2) var(--s-3);
  background: var(--c-paper-sunk); border-left: 2px solid var(--c-gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm); color: var(--c-ink-soft); text-align: left; white-space: pre-line;
}
.tl__move {
  font-family: var(--f-hand); font-size: var(--fs-md); color: var(--c-ink-faint);
}

@media (max-width: 720px) {
  .tl { grid-template-columns: 1.5rem minmax(0,1fr); }
  .tl::before { left: 0.75rem; }
  .tl__entry--l, .tl__entry--r { grid-column: 2; text-align: left; padding: 0 0 0 var(--s-4); }
  .tl__entry--l::after, .tl__entry--r::after { left: calc(-1.25rem + 0.5rem); right: auto; width: 1rem; }
  .tl__entry--l .tl__dot, .tl__entry--r .tl__dot { left: calc(-0.75rem - 3.5px); right: auto; }
}

/* 日期標頭 */
.day { margin-bottom: var(--s-7); }
.day__head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-5); }
.day__badge {
  display: grid; place-items: center; padding: var(--s-2) var(--s-4);
  white-space: nowrap; flex: none;
  border: 1.5px solid var(--c-ink); border-radius: 50% / 40%;
  font-family: var(--f-hand); font-size: var(--fs-lg); line-height: 1.1;
}
.day__badge small { display: block; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-soft); }
.day__title { font-size: var(--fs-lg); letter-spacing: var(--ls-label); }
.day__closing {
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px dashed var(--c-rule-strong);
  font-family: var(--f-hand); font-size: var(--fs-lg); color: var(--c-ink-soft); text-align: center;
}

/* ---------- 航班 / 住宿 / 租車 卡 ---------- */
.ticket {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4);
  padding: var(--s-4); border: 1px solid var(--c-rule); border-radius: var(--r-md);
  background: var(--c-paper-raised);
}
.ticket + .ticket { margin-top: var(--s-3); }
.ticket__port { font-family: var(--f-display); font-size: var(--fs-md); letter-spacing: 0.06em; }
.ticket__when { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-faint); margin-top: 2px; }
.ticket__mid { text-align: center; color: var(--c-ink-faint); }
.ticket__no { font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-sea); }
.ticket__line { width: 72px; height: 1px; background: var(--c-rule-strong); margin: var(--s-2) auto; position: relative; }
.ticket__line::after { content: "✈"; position: absolute; right: -2px; top: -0.65em; font-size: var(--fs-sm); color: var(--c-ink-faint); }
.ticket__right { text-align: right; }
.ticket__foot {
  grid-column: 1 / -1; padding-top: var(--s-3); margin-top: var(--s-1);
  border-top: 1px dashed var(--c-rule);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  font-size: var(--fs-xs); color: var(--c-ink-faint);
}
.ticket__pnr { font-family: var(--f-mono); color: var(--c-seal); letter-spacing: 0.1em; }
@media (max-width: 560px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket__right { text-align: left; }
  .ticket__line { margin: var(--s-2) 0; }
}

.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); font-size: var(--fs-sm); }
.kv dt { color: var(--c-ink-faint); white-space: nowrap; }
.kv dd { margin: 0; }

/* ---------- 清單 ---------- */
.packing { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.packing__group-title {
  font-family: var(--f-display); font-size: var(--fs-sm); letter-spacing: var(--ls-label);
  padding-bottom: var(--s-1); margin-bottom: var(--s-2); border-bottom: 1px solid var(--c-rule);
}
.packing__item { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm); color: var(--c-ink-soft); padding: 2px 0; }
.packing__item::before { content: "□"; color: var(--c-rule-strong); }

/* ---------- 相簿 ---------- */
.album { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.album__cell {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--c-rule); border-radius: var(--r-md); background: var(--c-paper-sunk);
}
.album__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-base); }
.album__cell:hover img { transform: scale(1.04); }
.album__cap {
  position: absolute; inset: auto 0 0 0; padding: var(--s-2) var(--s-3);
  background: linear-gradient(transparent, rgb(30 28 25 / 0.72));
  color: #fff; font-size: var(--fs-xs); line-height: 1.4;
}
.album__del {
  position: absolute; top: var(--s-2); right: var(--s-2);
  width: 26px; height: 26px; border-radius: 50%;
  background: rgb(255 255 255 / 0.9); color: var(--c-danger);
  display: grid; place-items: center; font-size: var(--fs-sm); box-shadow: var(--e-1);
}
.album__drop {
  display: grid; place-items: center; gap: var(--s-2);
  aspect-ratio: 1; border: 1px dashed var(--c-rule-strong); border-radius: var(--r-md);
  color: var(--c-ink-faint); font-size: var(--fs-sm); text-align: center; padding: var(--s-3);
}
.album__drop:hover, .album__drop.is-over { border-color: var(--c-seal); color: var(--c-seal); }

.lightbox {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgb(20 18 16 / 0.88); padding: var(--s-5);
}
.lightbox img { max-width: min(96vw, 1200px); max-height: 82dvh; object-fit: contain; border-radius: var(--r-sm); }
.lightbox__cap { color: #e9e4db; font-size: var(--fs-sm); margin-top: var(--s-3); text-align: center; }
.lightbox__close { position: absolute; top: var(--s-4); right: var(--s-5); color: #e9e4db; font-size: var(--fs-lg); }

/* ---------- 表單 / 編輯器 ---------- */
.field { display: grid; gap: var(--s-1); margin-bottom: var(--s-3); }
.field__label { font-size: var(--fs-xs); letter-spacing: var(--ls-label); color: var(--c-ink-faint); }
.input, .textarea, .select {
  width: 100%; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-rule-strong); border-radius: var(--r-sm);
  background: var(--c-paper-raised); font-size: var(--fs-sm); line-height: 1.6;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--c-seal); outline: none; }

/*
 * iOS 會在聚焦字級小於 16px 的輸入框時，自動把整個畫面放大，
 * 而且放大後不會自己縮回去（使用者得用手指縮）。
 * 觸控裝置一律給 16px，從源頭避免這個放大。
 */
@media (pointer: coarse) {
  /* .album__cap 自己有 class 選擇器，所以這裡要寫得比它更具體才蓋得過 */
  .input, .textarea, .select, .album__cap[contenteditable], [contenteditable] { font-size: 16px; }
}
.textarea { resize: vertical; min-height: 4.5rem; font-family: inherit; }
.field-row { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.editor__item {
  position: relative; padding: var(--s-4); margin-bottom: var(--s-3);
  border: 1px solid var(--c-rule); border-left: 3px solid var(--c-rule-strong); border-radius: var(--r-md);
  background: var(--c-paper);
}
.editor__item-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.editor__item-no { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-faint); }
.editor__item-head .btn-row { margin-left: auto; }

.bar {
  position: sticky; bottom: var(--s-4); z-index: 20;
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-rule-strong); border-radius: var(--r-pill);
  background: var(--c-paper-raised); box-shadow: var(--e-3);
}
.bar__status { font-size: var(--fs-sm); color: var(--c-ink-faint); }
.bar .btn-row { margin-left: auto; }

/* ---------- 上鎖畫面 ---------- */
.lock { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-5); }
.lock__card {
  width: min(380px, 100%); padding: var(--s-7) var(--s-6); text-align: center;
  border: 1px solid var(--c-rule); border-radius: var(--r-lg);
  background: var(--c-paper-raised); box-shadow: var(--e-3);
}
.lock__mark { font-size: var(--fs-2xl); color: var(--c-rule-strong); }
.lock__title { font-size: var(--fs-lg); letter-spacing: var(--ls-title); text-indent: var(--ls-title); margin: var(--s-3) 0 var(--s-1); }
.lock__sub { font-family: var(--f-hand); font-size: var(--fs-md); color: var(--c-sakura); margin-bottom: var(--s-5); }
.lock__err { min-height: 1.5em; margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-danger); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%);
  z-index: 60; padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-paper-raised);
  font-size: var(--fs-sm); box-shadow: var(--e-3);
}
.toast--bad { background: var(--c-danger); }

/* ---------- 內嵌的 Canva 原檔 ---------- */
.canva {
  position: relative;
  height: clamp(420px, 76dvh, 900px);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-md);
  background: var(--c-paper-sunk);
  overflow: hidden;
}
.canva__frame { width: 100%; height: 100%; border: 0; display: block; }
.canva__note {
  margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--c-gold);
  background: var(--c-paper-sunk);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-xs); line-height: 1.7; color: var(--c-ink-soft);
}