/* 新版離線殼提示：保留使用者正在填寫的內容，由使用者決定何時重整。 */
.travel-update-notice {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 40px);
  padding: 11px 12px 11px 15px;
  border: 1px solid #e2c7b5;
  border-radius: 14px;
  background: #fffdfa;
  box-shadow: 0 12px 32px rgba(58, 42, 27, .16);
  color: #5e4d40;
  font-size: 13px;
  font-weight: 600;
}
.travel-update-notice button {
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  padding: 8px 10px;
  color: #fff;
  font: 700 12px inherit;
  cursor: pointer;
}
.item-actions { display: flex; align-items: center; gap: 6px; }
.item-readonly { color: var(--muted); font-size: 11px; font-weight: 600; }
.task-complete { border: 1px solid #cddccf; border-radius: 8px; background: #f7fbf7; padding: 4px 7px; color: #477057; font: 700 11px inherit; cursor: pointer; }
.task-complete[aria-pressed="true"] { border-color: #adcab3; background: #eaf5ec; }
.task-complete:disabled { cursor: not-allowed; opacity: .52; }
.task-done > .itinerary-row-top > b { color: var(--muted); text-decoration: line-through; }
.review-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.review-summary > div { padding: 12px 9px; border: 1px solid var(--line); border-radius: 13px; background: #fffaf6; text-align: center; }
.review-summary b, .review-summary span { display: block; }
.review-summary b { font-size: 20px; letter-spacing: -.04em; }
.review-summary span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.review-day { margin-top: 19px; }
.review-day h3 { margin: 0 0 8px; color: #6d5d50; font-size: 13px; }
.review-entry { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.review-entry b, .review-entry small, .review-entry p, .review-entry em { display: block; }
.review-entry b { font-size: 14px; }
.review-entry small, .review-entry em { margin-top: 4px; color: var(--muted); font-size: 11px; font-style: normal; }
.review-entry p { margin: 7px 0 0; color: #655b51; font-size: 12px; line-height: 1.55; }
.review-add { width: 100%; margin-top: 20px; }
@media (max-width: 540px) {
  .travel-update-notice { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
  .item-actions { flex-wrap: wrap; justify-content: flex-end; }
  .review-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.integration-status { min-height: 18px; margin: 10px 2px 0; color: #81766c; font-size: 12px; line-height: 1.45; }
.integration-ready { color: #527a66; }
.integration-needs-reconnect, .integration-needs-permission { color: #b8582a; }
.toolbar-actions { display: flex; align-items: center; gap: 9px; }
.trash-trigger { border: 1px solid #d9c8ba; border-radius: 13px; background: transparent; padding: 10px 13px; color: #735f50; font: 700 12px inherit; cursor: pointer; }
.trash-trigger:hover { border-color: #b9784e; background: #fff8f2; color: #9f4f22; }
.trash-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 0; border-top: 1px solid var(--line); }
.trash-card:first-child { border-top: 0; }
.trash-card-main { min-width: 0; }
.trash-card-main h3 { margin: 5px 0 5px; font-size: 18px; letter-spacing: -.025em; }
.trash-card-main p:not(.eyebrow) { margin: 0; color: #675c52; font-size: 12px; }
.trash-card-main small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.trash-card-actions { display: flex; flex: 0 0 auto; gap: 7px; }
/* #e0b9a8 對淺底只有 1.68:1，1.4.11 要 3:1——這個邊框等於不存在。
   沿用本檔已驗證過的 #c8705c（3.54:1）。 */
.secondary-danger { border-color: #c8705c !important; color: #a64d25 !important; }
.secondary-danger:hover { background: #fff2ec !important; }
.trash-loading, .trash-retention-note { color: var(--muted); font-size: 13px; line-height: 1.6; }
.trash-empty { padding: 26px 0 10px; text-align: center; }
.trash-empty h3 { margin: 8px 0; font-size: 20px; }
.trash-empty p:not(.eyebrow) { margin: 0 auto; max-width: 420px; color: #675c52; font-size: 13px; line-height: 1.65; }
.trash-retention-note { margin: 17px 0 0; padding-top: 13px; border-top: 1px solid var(--line); }
@media (max-width: 620px) {
  .toolbar-actions { width: 100%; justify-content: space-between; }
  .toolbar-actions .create-trigger { flex: 1; }
  .trash-card { align-items: flex-start; flex-direction: column; gap: 12px; }
  .trash-card-actions { width: 100%; }
  .trash-card-actions button { flex: 1; min-height: 42px; }
}
.integration-unavailable { color: #81766c; }
.feature-detail { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.finance-summary { margin: 14px 0; padding: 16px; border: 1px solid #f0d9c9; border-radius: 18px; background: #fffaf6; }
.finance-summary h3 { margin: 2px 0 0; font-size: 17px; }
.finance-summary-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0; }
.finance-summary-groups p { margin: 0; padding: 11px 12px; border-radius: 12px; background: #fff; }
.finance-summary-groups b, .finance-summary-groups span { display: block; }
.finance-summary-groups span, .finance-summary-note, .finance-summary-warning { color: var(--muted); font-size: 12px; line-height: 1.55; }
.finance-summary-warning { color: #c7562b; }
.finance-summary-note { margin: 12px 0 0; }

/* 文件匯入先預覽、後寫入。這些卡只呈現非敏感航段摘要；訂位號與原始 PDF
   留在私有票夾，避免在家庭工作區或螢幕上過度曝光。 */
.workspace-card-priority { border-color: #efc2a5 !important; background: linear-gradient(145deg, #fff8f3, #fff0e7) !important; }
.itinerary-import-result { margin: 6px 0 2px; padding: 15px; border: 1px solid #f0d3c1; border-radius: 16px; background: #fff9f5; }
.itinerary-import-result .eyebrow { margin: 0; font-size: 10px; }
.itinerary-import-result h3 { margin: 4px 0 12px; font-size: 17px; letter-spacing: -.04em; }
.itinerary-import-legs { display: grid; gap: 8px; }
.itinerary-import-legs article { display: grid; gap: 3px; padding: 10px 11px; border-radius: 11px; background: #fff; }
.itinerary-import-leg { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 11px; border: 1px solid transparent; border-radius: 11px; background: #fff; color: var(--ink); cursor: pointer; }
.itinerary-import-leg:has(input:focus-visible) { outline: 2px solid #f7772d; outline-offset: 2px; }
.itinerary-import-leg:has(input:checked) { border-color: #f1c7ae; background: #fffdfb; }
.itinerary-import-leg input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: #f36f2a; }
.itinerary-import-leg > span { display: grid; gap: 3px; min-width: 0; }
.itinerary-import-legs b { font-size: 12px; line-height: 1.45; }
.itinerary-import-legs span, .itinerary-import-legs small, .itinerary-import-note, .itinerary-import-success { color: var(--muted); font-size: 11px; line-height: 1.55; }
.itinerary-import-legs small { color: #8d8176; }
.itinerary-import-note { margin: 12px 0 0; color: #9e5b33; }
.itinerary-import-success { margin: 4px 0; padding: 12px; border-radius: 12px; background: #edf7ee; color: #3f6e4b; font-weight: 700; }
.itinerary-import-success p { margin: 0; }
.itinerary-import-success .save { width: 100%; margin-top: 11px; }
.flight-import-review { display: grid; gap: 12px; }
.flight-import-review > header { padding: 15px 16px; border: 1px solid #ead9cb; border-radius: 15px; background: linear-gradient(135deg, #fff8f2, #fffefd 72%); }
.flight-import-review > header h3 { margin: 3px 0 5px; font-size: 19px; letter-spacing: -.045em; }
.flight-import-review > header p:not(.eyebrow) { margin: 0; color: #82756a; font-size: 12px; line-height: 1.55; }
.flight-review-travellers { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid #eaded4; border-radius: 14px; background: #fffdfb; color: #5b4739; }
.flight-review-travellers b { font-size: 12px; }
.flight-review-travellers span { color: #7b6657; font-size: 11px; line-height: 1.55; }
.flight-review-travellers small { color: #a05932; font-size: 10px; line-height: 1.5; }
.flight-import-legs { display: grid; gap: 12px; }
.flight-review-leg { overflow: hidden; border: 1px solid #eaded4; border-radius: 16px; background: #fffdfb; }
.flight-review-select { display: block; cursor: pointer; }
.flight-review-select > input { position: absolute; opacity: 0; pointer-events: none; }
.flight-review-ticket { position: relative; display: grid; gap: 9px; padding: 16px 17px 14px 24px; background: radial-gradient(circle at 94% 8%, rgba(239, 109, 44, .1), transparent 25%), linear-gradient(90deg, #fffaf6, #fffefd); transition: background .22s ease, box-shadow .22s ease; }
.flight-review-ticket::before { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: #d8cfc6; content: ""; transition: background .22s ease; }
.flight-review-ticket::after { position: absolute; top: 50%; right: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fffdfb; box-shadow: inset 0 0 0 1px #eaded4; content: ""; transform: translateY(-50%); }
.flight-review-select > input:checked + .flight-review-ticket { background: radial-gradient(circle at 94% 8%, rgba(239, 109, 44, .17), transparent 26%), linear-gradient(90deg, #fff5ed, #fffefd); box-shadow: inset 0 0 0 1px rgba(239, 109, 44, .14); }
.flight-review-select > input:checked + .flight-review-ticket::before { background: var(--accent); }
.flight-review-select > input:focus-visible + .flight-review-ticket { outline: 2px solid var(--accent); outline-offset: -2px; }
.flight-review-kicker { color: #b26238; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.flight-review-route { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; gap: 8px; }
.flight-review-route b { color: #342a23; font-size: 22px; letter-spacing: -.04em; }
.flight-review-route b:last-child { text-align: right; }
.flight-review-route i { position: relative; height: 1px; background: repeating-linear-gradient(90deg, #eca57d 0 5px, transparent 5px 10px); }
.flight-review-route i::after { position: absolute; top: 50%; right: -1px; width: 7px; height: 7px; border-top: 1px solid #d7763c; border-right: 1px solid #d7763c; content: ""; transform: translateY(-50%) rotate(45deg); }
.flight-review-cities { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; color: #7e7166; font-size: 11px; }
.flight-review-cities strong { color: #4b382d; font-size: 12px; letter-spacing: .04em; }
.flight-review-cities small:last-child { text-align: right; }
.flight-review-times { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding-top: 9px; border-top: 1px dashed #ead8ca; color: #51443a; font-size: 12px; font-variant-numeric: tabular-nums; }
.flight-review-times span { display: grid; gap: 2px; }
.flight-review-times b { color: #9c8170; font-size: 10px; letter-spacing: .08em; }
.flight-review-meta, .flight-review-seat { color: #806f62; font-size: 11px; line-height: 1.45; }
.flight-review-seat { color: #a8562c; font-weight: 700; }
.flight-review-leg .journey-account-picker { margin: 0 13px 13px; }
@media (prefers-reduced-motion: no-preference) { .flight-review-select > input:checked + .flight-review-ticket::before { animation: flightTicketConfirm .42s cubic-bezier(.2,.8,.2,1) both; } }
@keyframes flightTicketConfirm { from { transform: scaleY(.2); transform-origin: center; } to { transform: scaleY(1); transform-origin: center; } }
@media (max-width: 560px) { .flight-review-ticket { padding-right: 14px; padding-left: 19px; }.flight-review-route { grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); }.flight-review-route b { font-size: 18px; }.flight-review-times { grid-template-columns: 1fr; gap: 7px; } }

/* v2 規劃器：桌面以日期看板安排，旅途中收斂為同一份資料的每日簡報。 */
.travel-modal-open { overflow: hidden; }
.travel-planner { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; overflow: hidden; background: rgba(31, 25, 18, .46); }
.planner-shell { position: relative; width: min(1380px, 100%); height: min(860px, calc(100vh - 48px)); overflow: hidden; border: 1px solid rgba(232, 225, 216, .92); border-radius: 26px; background: var(--bg); box-shadow: 0 26px 80px rgba(26, 19, 12, .27); }
.planner-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 92px; padding: 18px 24px; border-bottom: 1px solid var(--line); background: rgba(255, 253, 250, .9); }
.planner-top h2 { margin: 3px 0 0; font-size: 24px; letter-spacing: -.05em; }
.planner-top-actions { display: flex; align-items: center; gap: 9px; }
.planner-copy-status { margin: -3px 28px 12px; color: #b94b21; font-size: 14px; line-height: 1.45; }
.planner-mode { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: #f1ece5; }
.planner-mode button { border: 0; border-radius: 9px; background: transparent; padding: 8px 12px; color: var(--muted); font: 700 12px inherit; cursor: pointer; }
.planner-mode button.on { background: #fff; box-shadow: 0 1px 4px rgba(58, 42, 27, .12); color: var(--ink); }
.planner-body { height: calc(100% - 92px); overflow: auto; overscroll-behavior: contain; padding: 18px 20px 22px; }
.planner-loading { margin: 50px 0; color: var(--muted); text-align: center; }
.planner-load-retry { display: grid; justify-items: start; gap: 10px; width: min(520px, 100%); margin: min(15vh, 120px) auto 0; padding: 24px; border: 1px solid #ead4c4; border-radius: 18px; background: linear-gradient(135deg, #fffaf6, #fff); box-shadow: 0 12px 32px rgba(74, 48, 31, .07); }
.planner-load-retry h3, .planner-load-retry p, .planner-load-retry small { margin: 0; }
.planner-load-retry h3 { font-size: 22px; letter-spacing: -.045em; }
.planner-load-retry p:not(.eyebrow) { color: #75685d; line-height: 1.6; }
.planner-load-retry small { color: #9a6a4c; line-height: 1.5; }
.planner-load-retry .save { min-width: 144px; margin-top: 4px; }
.planner-date-strip { display: flex; gap: 7px; overflow-x: auto; margin-top: 14px; padding: 0 0 14px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.planner-range-notice { margin: 12px 0 0; border: 1px solid #eadfd4; border-radius: 12px; background: rgba(255, 252, 249, .8); color: #74675b; font-size: 12px; }
.planner-range-notice summary { cursor: pointer; padding: 11px 13px; color: #745842; font-weight: 800; }
.planner-range-notice p, .planner-range-notice ul { margin: 0 13px 10px; line-height: 1.55; }
.planner-range-notice ul { display: grid; gap: 4px; padding-left: 16px; }
.planner-range-notice li { display: flex; gap: 8px; }
.planner-range-notice li b { flex: 0 0 auto; color: #a26c44; font-weight: 700; }
.planner-range-notice small { display: block; margin: 0 13px 12px; color: #95867a; }
.planner-preparation { display: grid; grid-template-columns: minmax(190px, .95fr) minmax(360px, 1.35fr) minmax(185px, .8fr); align-items: center; gap: 18px; margin: 0 0 16px; padding: 17px 18px; border: 1px solid #ecd3c2; border-radius: 18px; background: linear-gradient(120deg, #fff9f4 0%, #fffdfb 72%); }
.planner-preparation h3 { margin: 2px 0 5px; font-size: 18px; letter-spacing: -.045em; }
.planner-preparation > div > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.planner-preparation ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.planner-preparation li { min-width: 0; padding: 8px 9px; border-radius: 10px; background: rgba(255, 255, 255, .84); }
.planner-preparation li b, .planner-preparation li span { display: block; }
.planner-preparation li b { font-size: 11px; }
.planner-preparation li span { overflow: hidden; margin-top: 3px; color: #887c70; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.planner-preparation-actions { display: grid; gap: 6px; }
.planner-preparation-actions button { width: 100%; border: 1px solid #e6c5b2; border-radius: 9px; background: #fff; padding: 7px 9px; color: #98502a; font: 700 11px inherit; text-align: left; cursor: pointer; }
.planner-preparation-actions button:first-child { border-color: #ed6d2c; background: #ed6d2c; color: #fff; }
.planner-preparation-actions button:hover { filter: brightness(.98); }
.planner-guide { display: grid; gap: 16px; max-width: 920px; margin: 0 auto; padding: 6px 0 28px; }
.guide-intro, .planner-overview-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 22px; padding: 22px 23px; border: 1px solid #ecd9ca; border-radius: 18px; background: linear-gradient(120deg, #fff9f4, #fffefd); }
.guide-intro h3, .planner-overview-head h3 { margin: 3px 0 6px; font-size: 25px; letter-spacing: -.055em; }
.guide-intro p:not(.eyebrow), .planner-overview-head p:not(.eyebrow) { max-width: 620px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.guide-suggestions, .guide-lane, .guide-history { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.72); }
.guide-suggestions h4, .guide-lane h4 { margin: 0 0 10px; font-size: 14px; }
.guide-lane h4 span { display: inline-grid; min-width: 20px; height: 20px; margin-left: 5px; padding: 0 5px; place-items: center; border-radius: 999px; background: #f2ece6; color: #82766b; font-size: 11px; }
.guide-now { padding: 4px; border: 1px solid #efb991; border-radius: 17px; background: #fff4ea; }
.guide-step { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.guide-step:first-of-type { border-top: 0; }
.guide-now .guide-step { padding: 15px; border: 0; }
.guide-step-state { margin-top: 5px; padding: 4px 7px; border-radius: 999px; background: #f3e9df; color: #896c56; font-size: 10px; font-weight: 800; white-space: nowrap; }
.guide-step.state-ready .guide-step-state { background: #fee4d4; color: #d35a23; }
.guide-step.state-waiting .guide-step-state { background: #e8edf7; color: #536a92; }
.guide-step.state-done, .guide-step.state-skipped { opacity: .58; }
.guide-step h4 { margin: 2px 0 4px; font-size: 15px; letter-spacing: -.03em; }
.guide-step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.guide-step small { display: block; margin-top: 7px; color: #a0613a; font-size: 11px; }
.guide-step .secondary { align-self: center; }
.guide-step-actions { display: grid; gap: 7px; align-self: center; }
.guide-steps-focused { margin-top: 14px; }
.guide-steps-focused .guide-step { min-height: 74px; }
.planner-preparation-queue { margin: 12px 0 0; padding: 9px 11px; border-left: 2px solid rgba(118, 102, 86, .32); color: #7f7064; font-size: 11px; line-height: 1.5; }
.journey-planning-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 16px 0 18px; }
.journey-planning-preview article { display: grid; gap: 4px; min-height: 106px; padding: 13px; border: 1px solid #eadfd6; border-radius: 14px; background: linear-gradient(145deg, #fffdfb, #fff7f1); }
.journey-planning-preview span { color: #a2643d; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.journey-planning-preview b { color: #3d2c22; font-size: 13px; line-height: 1.35; }
.journey-planning-preview small { color: #847466; font-size: 11px; line-height: 1.5; }
.guide-history summary { cursor: pointer; color: #6d6157; font-size: 12px; font-weight: 700; }
.planning-step-form { display: grid; gap: 13px; }
.planning-step-form label { display: grid; gap: 6px; color: #655b52; font-size: 12px; font-weight: 700; }
.planning-step-form select, .planning-step-form input, .planning-step-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #ddd1c4; border-radius: 10px; background: #fff; padding: 10px; color: var(--ink); font: inherit; font-weight: 500; }
.planner-prep-readonly { color: var(--muted); font-size: 11px; line-height: 1.55; }
.planner-date { flex: 0 0 auto; min-width: 84px; border: 1px solid var(--line); border-radius: 12px; background: #fffdfa; padding: 8px 10px; color: var(--muted); text-align: left; font: inherit; cursor: pointer; }
.planner-date b, .planner-date small { display: block; white-space: nowrap; }
.planner-date b { font-size: 12px; }
.planner-date small { margin-top: 3px; font-size: 10px; }
.planner-date.on { border-color: #efb894; background: #fff4ed; color: #9e491f; }
.planner-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; margin-top: 16px; min-height: calc(100% - 64px); }
.planner-candidates { align-self: start; max-height: 100%; overflow: auto; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: #fffaf6; }
.planner-section-head, .planner-drawer-head, .travel-brief-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.planner-candidates h3, .planner-drawer h3, .travel-brief h3 { margin: 3px 0 0; font-size: 17px; letter-spacing: -.04em; }
.planner-candidates > p, .planner-drawer > p { margin: 10px 0 13px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.planner-board { display: flex; gap: 12px; min-width: max-content; overflow-x: auto; padding-bottom: 9px; }
.planner-layout-focus { align-items: start; }
.planner-focus-board { display: grid; min-width: 0; gap: 12px; align-content: start; }
.planner-focus-summary { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #eadfd4; border-radius: 16px; background: linear-gradient(120deg, #fffaf6, #fffefd); }
.planner-focus-summary h4, .planner-focus-summary p { margin: 0; }
.planner-focus-summary h4 { margin-top: 3px; color: var(--ink); font-size: 18px; letter-spacing: -.045em; }
.planner-focus-summary p:not(.eyebrow) { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.planner-focus-board > .planner-day { width: min(620px, 100%); min-height: 470px; }
.planner-focus-board > .planner-day .planner-day-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.planner-focus-board > .planner-day .planner-card:first-child:last-child { grid-column: 1 / -1; }
.planner-day { width: 252px; min-height: 470px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 253, 250, .78); transition: border-color .15s ease, background .15s ease; }
.planner-day.is-drop-target { border-color: var(--accent); background: #fff2e9; }
.planner-day > header { padding: 13px 14px 10px; border-bottom: 1px solid var(--line); }
.planner-day > header p, .planner-day > header small { display: block; margin: 0; }
.planner-day > header p { color: var(--ink); font-size: 13px; font-weight: 700; }
.planner-day > header small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.planner-day > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.planner-day-actions { display: flex; gap: 4px; }
.planner-day-actions button { border: 0; border-radius: 8px; background: #f6ede6; padding: 5px 6px; color: #98502a; font: 700 10px inherit; cursor: pointer; white-space: nowrap; }
.planner-day-actions button:hover { background: #ffe7d7; }
.planner-day-slots { display: grid; gap: 0; padding: 7px 10px 3px; border-bottom: 1px solid #eee5db; }
.planner-slot { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 31px; border-bottom: 1px dashed #eee6de; }
.planner-slot:last-child { border-bottom: 0; }
.planner-slot-label { color: #887e73; font-size: 10px; font-weight: 700; }
.planner-slot-content { min-width: 0; padding: 3px 0; }
.planner-slot-content .planner-card { padding: 7px 8px; }
.planner-slot-content .planner-card-meta { display: none; }
.planner-slot-content .planner-card p, .planner-slot-content .planner-card small { display: none; }
.planner-slot-empty { display: block; width: 100%; border: 0; border-radius: 7px; background: transparent; padding: 5px 4px; color: #a69a8d; text-align: left; font: 11px inherit; cursor: pointer; }
.planner-slot-empty:hover { background: #fff1e7; color: #b95b28; }
.planner-slot-empty.is-readonly { cursor: default; }
.planner-slot.is-drop-target { border-radius: 8px; background: #fff0e5; outline: 1px dashed #e88b54; outline-offset: -2px; }
.planner-day-cards, .planner-candidate-list, .travel-brief-list { display: grid; gap: 8px; padding: 10px; }
.planner-card { border: 1px solid #e9dfd4; border-radius: 13px; background: #fff; padding: 11px; box-shadow: 0 3px 10px rgba(69, 55, 40, .035); cursor: pointer; }
.planner-card[draggable="true"] { cursor: grab; }
.planner-card[draggable="true"]:active { cursor: grabbing; }
.planner-card:hover { border-color: #edba99; }
.planner-card-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; color: #887e73; font-size: 10px; }
.planner-card-meta span { padding: 2px 5px; border-radius: 6px; background: #f7f1eb; }
.planner-card-meta .planner-status-已確認 { background: #eaf5ec; color: #477057; }
.planner-card-meta .planner-status-候選 { background: #edf0fa; color: #5475c8; }
.planner-card-meta .planner-status-未採用 { background: #f2eeea; color: #7b7066; }
.planner-card b { display: block; color: var(--ink); font-size: 13px; line-height: 1.4; }
.planner-card p, .planner-card small { display: block; margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.planner-card small { color: #958a7e; }
.planner-card .planner-candidate-proposer, .journey-candidate-proposer { color: #a55b32; font-weight: 800; }
.planner-candidate-history { margin-top: 13px; border-top: 1px solid #eadfd4; padding-top: 10px; }
.planner-candidate-history summary { color: #776d63; cursor: pointer; font-size: 11px; font-weight: 800; list-style: none; }
.planner-candidate-history summary::-webkit-details-marker { display: none; }
.planner-candidate-history summary::after { content: "⌄"; float: right; color: #aa9c8e; }
.planner-candidate-history[open] summary::after { transform: rotate(180deg); }
.planner-candidate-history > p { margin: 8px 0 0; color: #958a7e; font-size: 10px; line-height: 1.5; }
.planner-day-cards .planner-card small { display: none; }
.planner-empty, .planner-empty-day { margin: 15px 4px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.planner-drawer { position: absolute; top: 92px; right: 0; z-index: 2; width: min(360px, 100%); max-height: calc(100% - 92px); overflow-x: hidden; overflow-y: auto; padding: 18px; border-left: 1px solid var(--line); background: #fffdfa; box-shadow: -12px 0 28px rgba(69, 55, 40, .08); scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #c8c1b8 transparent; }
.planner-drawer::-webkit-scrollbar { width: 8px; }
.planner-drawer::-webkit-scrollbar-track { background: transparent; }
.planner-drawer::-webkit-scrollbar-thumb { border: 2px solid #fffdfa; border-radius: 999px; background: #c8c1b8; }
.planner-drawer::-webkit-scrollbar-thumb:hover { background: #aa9f93; }
.planner-drawer:empty { display: none; }
.planner-drawer.is-entering { animation: plannerDrawerEnter .32s cubic-bezier(.2,.82,.25,1) both; }
.planner-drawer-head .x { font-size: 25px; }
/* 抽屜標題列已經有「返回旅程摘要／返回目前分支」，JS 會把重複的 × 設為
   hidden。這條規則的選擇器權重（0,2,1）必須高於下面 RWD 區塊裡的
   .planner-drawer-head .x（0,1,1），否則 media query 內的 display:grid
   會把 [hidden] 的預設 display:none 蓋掉，× 又冒出來。 */
.planner-drawer-head .x[hidden] { display: none; }
.planner-detail { display: grid; gap: 13px; margin-top: 17px; }
.planner-detail p { margin: 0; color: #62584f; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.planner-detail .planner-detail-meta { color: var(--accent); font-size: 12px; font-weight: 700; }
.planner-detail-empty { color: var(--muted) !important; }
.planner-detail-actions { display: grid; gap: 8px; margin-top: 20px; }
.planner-form { display: grid; gap: 13px; margin-top: 16px; }
.planner-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.planner-form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* 注意：不要在這裡用 `.planner-form-pair:has(input[type="date"])` 之類的規則
   去「保護」日期欄位寬度。這個檔案下方的窄螢幕 media query 有
   `.planner-form-pair { grid-template-columns: 1fr; }` 讓窄螢幕改成單欄，
   而 media query 本身不增加任何特異度；`:has()` 會把它參數的特異度算進來
   （`.planner-form-pair:has(input[type="date"])` = 0,2,1 高於 `.planner-form-pair`
   = 0,1,0），所以那種規則會反過來蓋掉窄螢幕的單欄設定，強迫日期那一列在
   窄螢幕硬擠成兩欄、把日期欄壓到比 WebKit 原生日期控制項還窄，日期文字就
   溢出蓋到隔壁欄位（2026-07-25 實測重現過）。日期欄位在寬螢幕本來就有
   足夠寬度、窄螢幕本來就會單欄，不需要額外規則。 */
.planner-form input, .planner-form textarea, .planner-form select { width: 100%; min-width: 0; border: 1px solid #dcd3c8; border-radius: 12px; background-color: #fff; padding: 11px; color: var(--ink); font: 14px inherit; }
.planner-form select { min-height: 48px; appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23746a60' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 14px 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
.planner-form select:hover { border-color: #cbb9aa; background-color: #fffdfa; }
.planner-form select:focus { outline: none; border-color: #ed6d2c; background-color: #fffdfa; box-shadow: 0 0 0 3px #fff0e6; }
.form select { min-height: 48px; padding-right: 44px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23746a60' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
.form select:hover { border-color: #cbb9aa; background-color: #fffdfa; }
.planner-form textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.planner-detail-fieldset { display: grid; gap: 11px; margin: 0; border: 1px solid #eaded3; border-radius: 15px; padding: 13px; background: #fffaf6; }
.planner-detail-fieldset legend { padding: 0 5px; color: #806553; font-size: 11px; font-weight: 800; }
.planner-participant-choices { display: grid; gap: 8px; }
.planner-participant-choices .journey-account-choice { margin: 0; }
.planner-detail-fieldset .field-note { margin: 0; }
.travel-brief { width: min(760px, 100%); margin: 20px auto; }
.travel-day-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 16px; }
.travel-day-nav button { border: 0; background: transparent; padding: 7px 3px; color: #8b7f73; font: 700 12px inherit; cursor: pointer; }
.travel-day-nav button:last-child { text-align: right; }
.travel-day-nav button:nth-child(2) { color: #9e491f; text-decoration: underline; text-underline-offset: 3px; }
.travel-day-nav button:disabled { color: #d6cec5; cursor: default; text-decoration: none; }
.travel-brief-head { padding: 2px 2px 15px; border-bottom: 1px solid var(--line); }
.travel-brief-head > p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.travel-next { margin-top: 16px; padding: 18px; border: 1px solid #f0c8ae; border-radius: 18px; background: linear-gradient(135deg, #fff8f3, #fff1e8); }
.travel-next > span { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .07em; }
.travel-next h4 { margin: 6px 0 3px; font-size: 20px; letter-spacing: -.04em; }
.travel-next p, .travel-next small { display: block; margin: 5px 0 0; color: #665c53; font-size: 13px; line-height: 1.5; }
.travel-next .travel-route-brief { color: #98502a; font-weight: 700; }
.travel-next small { color: var(--muted); }
.travel-next div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.travel-next button, .travel-next a, .travel-ticket-shortcut button { border: 0; border-radius: 10px; background: var(--ink); padding: 9px 10px; color: #fff; text-decoration: none; font: 700 12px inherit; cursor: pointer; }
.travel-next a { background: #fff; color: #9e491f; border: 1px solid #edba99; }
.travel-transit-cue { display: grid; gap: 3px; width: 100%; margin: 12px 0 0; padding: 11px 12px; border: 1px solid #b9ccdc; border-radius: 12px; background: #f4f9fc; color: #29485e; text-align: left; }
button.travel-transit-cue { cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
button.travel-transit-cue:hover, button.travel-transit-cue:focus-visible { transform: translateY(-1px); border-color: #7195ad; box-shadow: 0 8px 16px rgba(53, 91, 117, .12); outline: none; }
.travel-transit-cue b { font-size: 11px; letter-spacing: .03em; }
.travel-transit-cue span { color: #577287; font-size: 12px; line-height: 1.5; }
.travel-important-note { margin-top: 12px; padding: 10px 12px; border-left: 3px solid #ef762f; border-radius: 0 10px 10px 0; background: rgba(255,255,255,.62); }
.travel-important-note b { color: #9a4f29; font-size: 11px; letter-spacing: .04em; }
.travel-important-note p { margin: 4px 0 0; color: #5e5148; font-size: 12px; line-height: 1.55; }
.travel-complete-day { margin: 16px 0; padding: 16px; border: 1px solid #cde0d0; border-radius: 16px; background: #f6fbf6; }
.travel-complete-day b { color: #3f6f4a; }
.travel-complete-day p { margin: 5px 0 0; color: #5f7764; font-size: 12px; line-height: 1.55; }
.travel-timeline { margin-top: 16px; border-top: 1px solid #e7ddd4; }
.travel-section-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 1px 8px; }
.travel-section-head b { color: #43352c; font-size: 13px; }
.travel-section-head span { color: #907e70; font-size: 11px; }
.travel-timeline ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.travel-timeline li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 9px; align-items: stretch; padding: 10px 0; border-top: 1px solid #eee5dc; }
.travel-timeline time { padding-top: 3px; color: #9a725d; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 800; }
.travel-timeline li > button { display: grid; gap: 2px; border: 0; background: transparent; padding: 0; color: #31261f; text-align: left; cursor: pointer; }
.travel-timeline li > button:hover b, .travel-timeline li > button:focus-visible b { color: #c95d2a; text-decoration: underline; text-underline-offset: 3px; outline: none; }
.travel-timeline li b { font-size: 13px; }
.travel-timeline li small { overflow: hidden; color: #87786b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.travel-timeline li.is-done { opacity: .48; }
.travel-timeline li.is-done b { text-decoration: line-through; }
.travel-ticket-shortcut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 15px 0; padding: 13px; border: 1px solid #d7e0ef; border-radius: 14px; background: #f5f8fd; }
.travel-ticket-shortcut b { margin-right: 4px; font-size: 12px; }
.travel-ticket-shortcut button { background: #5475c8; }
.travel-quick-brief { margin: 15px 0 18px; border: 1px solid #ecd8c8; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #fffaf6, #fffefd 66%); box-shadow: 0 8px 24px rgba(103, 65, 38, .06); animation: travelBriefEnter .26s ease both; }
.travel-quick-brief-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 15px 10px; border-bottom: 1px solid #f0e5da; }
.travel-quick-brief-head .eyebrow { margin: 0; color: #dc692f; font-size: 10px; }
.travel-quick-brief-head b { color: #745d4d; font-size: 11px; font-weight: 700; }
.travel-quick-brief dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.travel-quick-brief dl > div { min-width: 0; padding: 12px 15px 14px; border-top: 1px solid #f2e8df; }
.travel-quick-brief dl > div:nth-child(-n+2) { border-top: 0; }
.travel-quick-brief dl > div:nth-child(odd) { border-right: 1px solid #f2e8df; }
.travel-quick-brief dt { margin-bottom: 4px; color: #9a6a50; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.travel-quick-brief dd { display: -webkit-box; overflow: hidden; margin: 0; color: #392b22; font-size: 12px; font-weight: 700; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; }
.travel-quick-ticket dd { overflow: visible; }
.travel-quick-ticket button { max-width: 100%; overflow: hidden; border: 0; border-radius: 8px; background: #5475c8; padding: 6px 8px; color: #fff; font: 700 11px inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.travel-crossday-status { margin: 0; padding: 8px 15px; border-bottom: 1px solid #dce7f1; background: #f2f7fc; color: #496b87; font-size: 11px; font-weight: 700; line-height: 1.45; }
.travel-offline-status { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid #c7d6e9; border-radius: 12px; background: #f2f7fe; color: #53708b; font-size: 11px; line-height: 1.5; }
.travel-offline-status b { flex: 0 0 auto; color: #385c80; }
.travel-offline-status span { min-width: 0; }
.travel-brief > [data-travel-today] { margin: -4px 0 12px; border: 0; background: transparent; padding: 3px 0; color: #9e491f; font: 700 11px inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@keyframes travelBriefEnter { from { opacity: .01; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.guide-step.is-due { border-color: #e4a375; background: #fff9f4; }
.guide-step.is-due .guide-step-state { color: #a9481b; }
.planner-story { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 11px; }
.planner-story summary { color: #98502a; font-weight: 700; cursor: pointer; }
.planner-story p { margin-top: 10px !important; }

/* v3 首用旅程流：同一條會前進的路線，取代並列的功能卡與待辦清單。
   每個結果使用同一套收集→確認→抵達動畫；在減少動態模式下保留所有狀態與文字。 */
.journey-flow { max-width: 850px; margin: 18px auto 34px; padding: 26px; border: 1px solid #ead8c9; border-radius: 24px; background: radial-gradient(circle at 92% 8%, rgba(245, 155, 93, .16), transparent 24%), linear-gradient(135deg, #fffaf6, #fffefd 72%); overflow: hidden; }
.journey-flow-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; }
.journey-flow-head h3 { margin: 3px 0 8px; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.065em; }
.journey-flow-head p:not(.eyebrow) { max-width: 570px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.journey-flow-status { flex: 0 0 auto; margin: 0 !important; color: #a35b33 !important; font-size: 11px !important; font-weight: 800; white-space: nowrap; }
.journey-arrival { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 18px auto -16px; padding: 8px 11px; border: 1px solid #cfe3d2; border-radius: 999px; background: rgba(246, 251, 246, .92); color: #55735c; font-size: 11px; line-height: 1.35; box-shadow: 0 8px 20px rgba(64, 104, 70, .08); animation: journeyArrivalNote .46s .1s ease both; }
.journey-arrival b { color: #3f704a; white-space: nowrap; }
.journey-arrival span { color: #687a6b; }
.journey-flow-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 30px 0 25px; padding: 0; list-style: none; }
/* 舊旅程有五個節點；新版把「起點」也可見化，因此六個節點必須仍在同一
   行，而不能把最後的出發前確認擠到第二行。 */
.journey-flow-progress:has(li:nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.journey-flow-progress li { position: relative; display: grid; justify-items: start; gap: 7px; color: #a89a8d; font-size: 11px; font-weight: 700; }
.journey-flow-progress li::before { content: ""; position: absolute; z-index: 0; top: 8px; left: 10px; width: calc(100% + 4px); height: 2px; background: #e9e0d7; }
.journey-flow-progress li:last-child::before { display: none; }
.journey-flow-progress i { position: relative; z-index: 1; width: 17px; height: 17px; border: 3px solid #e9e0d7; border-radius: 50%; box-sizing: border-box; background: #fffdfa; }
.journey-flow-progress .is-done { color: #7a6759; }
.journey-flow-progress .is-done i { border-color: #ef7b36; background: #ef7b36; box-shadow: inset 0 0 0 3px #fff8f2; }
.journey-flow-progress .is-done::before, .journey-flow-progress .is-current::before { background: linear-gradient(90deg, #ef7b36, #f2c7a9); }
.journey-flow-progress .is-current { color: #9d4a21; }
.journey-flow-progress .is-current i { border-color: #ef6e2a; box-shadow: 0 0 0 6px rgba(239, 110, 42, .12); }
.journey-focus { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 24px; padding: 22px; border: 1px solid #f0c4a7; border-radius: 20px; background: rgba(255, 246, 239, .76); }
.journey-focus h4 { margin: 2px 0 6px; font-size: 21px; letter-spacing: -.045em; }
.journey-focus p:not(.eyebrow) { margin: 0 0 15px; color: #74675b; font-size: 12px; line-height: 1.6; }
.journey-focus .save { min-width: 196px; }
.journey-inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 11px; }
.journey-inline-actions .text-action, .journey-focus > div > .text-action { border: 0; background: transparent; padding: 5px 0; color: #9e552d; font: 700 11px inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.journey-focus-copy > .text-action { display: block; width: fit-content; margin-top: 14px; }
.journey-backfill { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; color: #8b7a6e; font-size: 11px; }
.journey-backfill button { border: 0; border-bottom: 1px solid #e4b99c; background: transparent; padding: 3px 0; color: #8f502f; font: 700 11px inherit; cursor: pointer; }
.journey-backfill button:hover { color: #e66427; border-color: #e66427; }
.journey-orbit { position: relative; width: 124px; height: 124px; margin: auto; border: 1px solid rgba(236, 142, 82, .45); border-radius: 50%; background: radial-gradient(circle at 43% 42%, #fff 0 12%, #ffefe2 13% 26%, rgba(255,255,255,.15) 27% 100%); }
.journey-orbit::before, .journey-orbit::after { content: ""; position: absolute; border: 1px solid rgba(239, 114, 43, .33); border-radius: 50%; }
.journey-orbit::before { inset: 19px -8px; transform: rotate(-29deg); }
.journey-orbit::after { inset: -8px 25px; transform: rotate(38deg); }
.journey-orbit i, .journey-orbit b, .journey-orbit em { position: absolute; display: block; border-radius: 50%; }
.journey-orbit i { width: 13px; height: 13px; top: 17px; right: 20px; background: #ef712d; box-shadow: 0 0 0 7px rgba(239, 113, 45, .13); }
.journey-orbit b { width: 8px; height: 8px; bottom: 22px; left: 19px; background: #283f56; }
.journey-orbit em { width: 5px; height: 5px; top: 55px; left: 55px; background: #f4ad75; }
.journey-private-note { margin: 10px 0 0; color: #9e5b33; font-size: 11px; line-height: 1.5; }
.journey-import-success, .journey-confirmed-flight { margin-top: 18px; padding: 13px 15px; border-radius: 14px; background: #eff8f0; color: #416d4d; font-size: 12px; line-height: 1.55; }
.journey-import-success { display: grid; gap: 10px; border: 1px solid #cfe3d2; animation: journeyConfirmation .42s ease both; }
.journey-import-success .eyebrow { margin: 0; color: #558061; font-size: 10px; }
.journey-import-success h3 { margin: 0; color: #284c31; font-size: 21px; letter-spacing: -.045em; }
.journey-import-success p, .journey-import-success small { margin: 0; }
.journey-import-success small { color: #5f7664; }
.journey-import-success ol { display: grid; gap: 4px; margin: 0; padding: 10px 0 0 20px; border-top: 1px solid #d9e9db; color: #4d6d53; }
.journey-import-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding-top: 3px; }
.journey-import-actions .save { flex: 1 1 220px; }
.journey-import-actions .secondary { flex: 0 1 auto; }
.journey-booking-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 17px 0 12px; }
.journey-booking-type { position: relative; display: grid; min-height: 152px; gap: 8px; padding: 16px 38px 15px 16px; border: 1px solid #e6ddd4; border-radius: 16px; background: rgba(255, 253, 250, .78); color: #594c41; text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.journey-booking-type:hover, .journey-booking-type:focus-visible { border-color: rgba(232, 116, 53, .58); background: #fffaf6; box-shadow: 0 12px 26px rgba(92, 62, 37, .11); transform: translateY(-2px); outline: none; }
.journey-booking-type.is-recommended { border-color: rgba(232, 116, 53, .46); background: linear-gradient(145deg, #fff7f0, #fffdfb); }
.journey-booking-type-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.journey-booking-type-head b { color: #342c26; font-size: 15px; line-height: 1.35; }
.journey-booking-type-head small { color: #c66533; font-size: 10px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.journey-booking-type > span:not(.journey-booking-type-head) { color: #76695f; font-size: 12px; line-height: 1.52; }
.journey-booking-type em { align-self: end; color: #9b6749; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.35; }
.journey-booking-type i { position: absolute; right: 15px; bottom: 14px; color: #d86c33; font-size: 19px; font-style: normal; line-height: 1; transition: transform .18s ease; }
.journey-booking-type:hover i, .journey-booking-type:focus-visible i { transform: translateX(3px); }
.journey-reminder-picker { margin: 0; padding: 0; border: 0; }
.journey-reminder-picker legend { padding: 0; color: #3a2d25; font-size: 14px; font-weight: 800; }
.journey-reminder-picker > p { margin: 5px 0 10px; color: #7a6d62; font-size: 12px; line-height: 1.55; }
.journey-reminder-options { display: grid; gap: 8px; }
.journey-reminder-option { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px !important; align-items: center; margin: 0 !important; padding: 11px 12px !important; border: 1px solid #e4d8cc; border-radius: 13px; background: #fffdfb; cursor: pointer; }
.journey-reminder-option:has(input:checked) { border-color: #ec7c39; background: #fff7f0; box-shadow: 0 0 0 3px rgba(239, 110, 42, .09); }
.journey-reminder-option input { width: 16px; height: 16px; margin: 0; accent-color: #ef6e2a; }
.journey-reminder-option span { display: grid; gap: 1px; }
.journey-reminder-option b { color: #46362c; font-size: 13px; }
.journey-reminder-option small { color: #8a7a6d; font-size: 11px; }
.journey-preparation-review .journey-reminder-option { align-items: start; }
.journey-preparation-review .journey-reminder-option input { margin-top: 2px; }
.journey-preparation-review .journey-reminder-option.is-recommended { border-left: 3px solid #ef7a34; }
.journey-booking-support { margin: 14px 0 0; color: #79695c; font-size: 12px; line-height: 1.55; }
.journey-booking-support summary { display: inline-flex; align-items: center; gap: 6px; color: #9c5734; font-weight: 800; cursor: pointer; list-style: none; }
.journey-booking-support summary::-webkit-details-marker { display: none; }
.journey-booking-support summary::after { content: "＋"; font-size: 16px; font-weight: 500; line-height: 1; }
.journey-booking-support[open] summary::after { content: "−"; }
.journey-booking-support p { margin: 7px 0 8px; }
.journey-booking-support > div { display: flex; flex-wrap: wrap; gap: 12px; }
.journey-booking-support .text-action { padding: 0; color: #b55f33; font-size: 12px; }
.journey-reminder-date { margin-top: 2px !important; }
.journey-day-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 14px; }
.journey-day-context { margin: 0 0 14px; border-left: 3px solid #f48a4b; padding: 7px 10px; color: #8a6d5a; font-size: 12px; line-height: 1.5; }
.journey-day-primary { margin: 18px 0 0; border: 1px solid #efc9ae; border-radius: 18px; background: linear-gradient(135deg, #fff9f4, #fffdfb); padding: 19px; box-shadow: 0 14px 30px rgba(154, 82, 38, .07); }
.journey-day-primary .eyebrow { margin: 0 0 5px; color: #e77436; font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.journey-day-primary h4 { margin: 0; color: #34251d; font-size: 18px; letter-spacing: -.035em; }
.journey-day-primary p:not(.eyebrow) { margin: 7px 0 14px; color: #78685b; font-size: 12px; line-height: 1.6; }
.journey-day-primary .save { min-width: 220px; }
.journey-day-optional { margin-top: 16px; border-top: 1px solid #eaded3; padding-top: 14px; }
.journey-day-optional > summary { cursor: pointer; color: #815c47; font-size: 12px; font-weight: 800; list-style: none; }
.journey-day-optional > summary::after { content: "＋"; margin-left: 7px; color: #dc7138; }
.journey-day-optional[open] > summary::after { content: "−"; }
.journey-day-optional > p { margin: 8px 0 0; color: #8a7a6d; font-size: 11px; line-height: 1.55; }
.journey-day-option { display: grid; justify-items: start; gap: 4px; min-height: 106px; border: 1px solid #ead9cc; border-radius: 16px; background: linear-gradient(145deg, #fffdfb, #fff6f0); padding: 15px; color: #3d2c22; text-align: left; cursor: pointer; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.journey-day-option:hover, .journey-day-option:focus-visible { transform: translateY(-2px); border-color: #ef8b4a; box-shadow: 0 12px 22px rgba(164, 91, 45, .12); outline: 0; }
.journey-day-option b { font-size: 16px; }
.journey-day-option small { color: #887869; font-size: 11px; line-height: 1.5; }
.journey-day-option span { margin-top: auto; color: #d7662d; font-size: 11px; font-weight: 800; }
.journey-day-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.journey-day-choice { display: grid; gap: 5px; min-height: 96px; border: 1px solid #e9ddd3; border-radius: 15px; background: #fffdfb; padding: 14px; color: #3d2c22; text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.journey-day-choice:hover, .journey-day-choice:focus-visible { transform: translateY(-2px); border-color: #e88c50; box-shadow: 0 10px 20px rgba(163, 85, 41, .1); outline: 0; }
.journey-day-choice b { font-size: 15px; }
.journey-day-choice small { min-height: 30px; color: #857568; font-size: 11px; line-height: 1.4; }
.journey-day-choice span { color: #a55a31; font-size: 11px; font-weight: 800; }
.journey-day-choice.is-recommended { border-color: #ee975e; background: linear-gradient(145deg, #fff5ee, #fffdfb); box-shadow: inset 0 0 0 1px rgba(240, 139, 76, .12); }
.journey-day-choice.is-free { background: linear-gradient(145deg, #f8fbf7, #fffdfb); }
.journey-candidate-list { display: grid; gap: 9px; margin-top: 18px; }
.journey-candidate-choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid #ead9cc; border-radius: 15px; background: linear-gradient(145deg, #fffdfb, #fff7f1); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.journey-candidate-choice:hover { transform: translateY(-1px); border-color: #e99b6c; box-shadow: 0 10px 20px rgba(155, 87, 44, .09); }
.journey-candidate-choice > div { min-width: 0; display: grid; gap: 4px; }
.journey-candidate-choice b { overflow: hidden; color: #3d2c22; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.journey-candidate-choice small { overflow: hidden; color: #8a786a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.journey-candidate-choice .secondary { min-height: 34px; padding: 7px 10px; border-radius: 10px; font-size: 11px; }
.journey-candidate-empty { display: grid; gap: 8px; margin-top: 18px; padding: 18px; border: 1px dashed #e5bea5; border-radius: 16px; background: #fffaf6; }
.journey-candidate-empty p { margin: 0; color: #89796d; font-size: 12px; line-height: 1.55; }
.journey-candidate-empty .save { width: fit-content; min-height: 40px; }
.journey-slot-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.journey-confirmed-flight { display: grid; gap: 3px; border: 1px solid #d3e5d5; background: #f7fcf7; }
.journey-confirmed-flight p, .journey-confirmed-flight b, .journey-confirmed-flight span { margin: 0; }
.journey-confirmed-flight p { color: #5b8667; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.journey-confirmed-flight span { color: #6e7c70; font-size: 11px; }
.journey-booking-summary { gap: 12px; }
.journey-booking-summary-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.journey-booking-summary-head > div { display: grid; gap: 2px; }
.journey-booking-summary-head small { max-width: 48%; color: #63806a; font-size: 11px; line-height: 1.45; text-align: right; }
.journey-booking-rows { display: grid; gap: 7px; }
.journey-booking-row { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid #dfece0; border-radius: 11px; background: rgba(255,255,255,.7); }
.journey-booking-row b { color: #34533b; font-size: 12px; }
.journey-booking-row span { color: #53705b; font-size: 11px; line-height: 1.45; }
.journey-booking-row small { color: #788a7c; font-size: 10px; line-height: 1.45; }
.journey-booking-followup { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; border-top: 1px solid #dceadc; color: #59705f; font-size: 11px; line-height: 1.5; }
.journey-booking-followup .secondary { flex: 0 0 auto; min-height: 34px; padding: 7px 10px; border-color: #b7d2bb; color: #3b6544; background: #fff; font-size: 11px; }
/* 規劃轉場只用短暫淡出與路徑／節點抵達。標題與整個場景不縮放、不位移，
   因為使用者正在閱讀資料；任何超過一次互動的動態都不是狀態提示。 */
.journey-flow.is-leaving { animation: journeyStepLeave .18s ease-out both; pointer-events: none; }
@keyframes journeyStepLeave { from { opacity: 1; } to { opacity: .58; } }
.journey-advance-status { margin: 14px auto 0; max-width: 920px; color: #a35a32; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.trip-visibility-choice { margin: 0; padding: 0; border: 0; }
.trip-visibility-choice legend { margin-bottom: 7px; color: var(--ink); font-weight: 800; }
.trip-visibility-choice > p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.trip-visibility-choice > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.trip-visibility-choice label { position: relative; display: block; margin: 0; cursor: pointer; }
.trip-visibility-choice input { position: absolute; opacity: 0; pointer-events: none; }
.trip-visibility-choice span { display: grid; min-height: 92px; gap: 5px; padding: 14px; border: 1px solid #e5d6c9; border-radius: 15px; background: #fffdfb; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease; }
.trip-visibility-choice b { color: #4e3728; font-size: 14px; }
.trip-visibility-choice small { color: #83766c; font-size: 11px; line-height: 1.5; }
.trip-visibility-choice input:checked + span { border-color: #e9793c; background: #fff7f1; box-shadow: 0 8px 20px rgba(206, 104, 46, .12); }
.trip-visibility-choice input:checked + span::after { content: "已選擇"; align-self: end; color: #b55a2b; font-size: 10px; font-weight: 800; }
.trip-visibility-choice label:hover span { border-color: #dfaa87; transform: translateY(-1px); }
@keyframes journeyPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes journeyConfirmation { 0% { transform: translateY(8px) scale(.985); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes plannerDrawerEnter { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .journey-flow, .journey-flow *, .journey-flow *::before, .journey-flow *::after, .planner-drawer, .planner-drawer *, .travel-brief, .travel-brief * { animation: none !important; transition: none !important; } }
@media (max-width: 760px) {
  .travel-planner { display: block; padding: 0; }
  .planner-shell { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .planner-top { align-items: flex-start; min-height: 82px; padding: 14px; }
  .planner-top h2 { font-size: 19px; }
  .planner-top-actions { gap: 5px; }
  .planner-top .header-action { display: none; }
  .planner-mode button { padding: 7px 9px; }
  .planner-body { height: calc(100% - 82px); padding: 14px; }
  .planner-layout { display: block; }
  .planner-layout-focus { display: flex; flex-direction: column; }
  .planner-layout-focus .planner-focus-board { order: 1; }
  .planner-layout-focus .planner-candidates { order: 2; }
  .planner-focus-summary { align-items: start; gap: 10px; padding: 13px; }
  .planner-focus-summary .text-action { flex: 0 0 auto; padding: 5px 0; font-size: 11px; }
  .planner-focus-board { margin-top: 13px; }
  .planner-focus-board > .planner-day { width: 100%; min-height: 0; }
  .planner-focus-board > .planner-day .planner-day-cards { grid-template-columns: 1fr; }
  .planner-preparation { display: block; padding: 15px; }
  .planner-preparation ol { margin: 13px 0; }
  .planner-preparation-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner-candidates { max-height: none; margin-bottom: 13px; }
  .planner-board { display: grid; min-width: 0; overflow: visible; }
  .planner-day { width: auto; min-height: 0; }
  .planner-drawer { top: auto; right: 0; bottom: 0; width: 100%; max-height: 64%; border-top: 1px solid var(--line); border-left: 0; border-radius: 20px 20px 0 0; }
  .planner-drawer.is-entering { animation-name: plannerDrawerEnterMobile; }
  .guide-intro, .planner-overview-head { display: grid; align-items: start; padding: 17px; }
  .guide-intro h3, .planner-overview-head h3 { font-size: 22px; }
  .guide-step { grid-template-columns: 1fr auto; }
  .guide-step-state { grid-column: 1 / -1; justify-self: start; }
  .journey-flow { margin: 4px 0 22px; padding: 18px; border-radius: 18px; }
  .journey-flow-head { display: grid; align-items: start; gap: 9px; }
  .journey-flow-status { white-space: normal; }
  .journey-focus { grid-template-columns: 1fr; gap: 13px; padding: 17px; }
  .journey-orbit { width: 94px; height: 94px; margin-left: 0; }
  .journey-focus .save { width: 100%; }
}

/* v4：規劃時只保留「現在要完成的下一步」。原本的模式列、工具列與抽象軌道
   都不參與首用流程；視覺必須直接對應同行人、訂位、錨點與每日骨架。 */
.planner-shell { width: min(1500px, calc(100vw - 48px)); }
.planner-top { min-height: 72px; padding: 13px 28px; }
.planner-top h2 { max-width: min(680px, 55vw); overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.planner-body { height: calc(100% - 72px); padding: 20px 34px 28px; }
.planner-drawer { top: 72px; max-height: calc(100% - 72px); }
.planner-top-link { border: 0; background: transparent; padding: 8px 4px; color: #8b6c58; font: 700 12px inherit; cursor: pointer; text-decoration: underline; text-decoration-color: #dfb292; text-underline-offset: 5px; }
.planner-top-link:hover { color: #9d4a21; }
.planner-more { display: inline-flex; align-items: center; }
.planner-edit-trip { border: 1px solid #e8c8b4; border-radius: 999px; background: #fff8f3; padding: 7px 10px; color: #955334; text-decoration: none; }
.planner-edit-trip:hover { border-color: #e39d72; background: #fff1e8; }
.planner-body:has(.journey-flow) { background: radial-gradient(ellipse at 84% 19%, rgba(247, 188, 142, .13), transparent 42%), linear-gradient(90deg, rgba(255,250,246,.5), rgba(255,253,251,.82)); }
.journey-flow { display: grid; grid-template-rows: auto; align-content: start; max-width: 1120px; min-height: calc(100% - 4px); margin: 0 auto; padding: 28px 22px 10px; border: 0; border-radius: 0; background: transparent; }
/* 每一步抵達時，程式會把焦點移到這個語意區域，讓螢幕閱讀器立即讀到
   新步驟。它不是鍵盤可停留的表單控制項，不該因此讓瀏覽器替整個流程畫出
   巨大的預設外框；真正可操作的按鈕仍保留既有 focus-visible 提示。 */
.journey-flow:focus { outline: none; }
.journey-flow-head { max-width: 920px; align-items: end; margin: 0 auto; width: 100%; }
.journey-flow-head h3 { font-size: clamp(31px, 3.2vw, 46px); line-height: 1.12; }
.journey-flow-head p:not(.eyebrow) { max-width: 620px; font-size: 14px; }
.journey-arrival { max-width: 920px; width: 100%; box-sizing: border-box; margin: 14px auto 0; }
.journey-flow-progress { max-width: 920px; width: 100%; margin: 22px auto 0; }
.journey-focus { width: min(920px, 100%); min-height: 330px; margin: 0 auto; padding: 38px 8px 12px; grid-template-columns: minmax(285px, .82fr) minmax(0, 1fr); gap: 62px; border: 0; border-radius: 0; background: transparent; }
.journey-focus { position: relative; isolation: isolate; }
.journey-focus::before { position: absolute; z-index: -1; inset: 16px -56px 8px; border-radius: 48% 52% 46% 54%; background: radial-gradient(ellipse at 18% 54%, rgba(247, 174, 128, .16), transparent 32%), radial-gradient(ellipse at 82% 45%, rgba(74, 111, 136, .075), transparent 29%); content: ""; pointer-events: none; }
.journey-focus::after { position: absolute; z-index: -1; top: 56%; right: 9%; left: 7%; height: 1px; background: repeating-linear-gradient(90deg, rgba(234, 138, 81, .12) 0 5px, transparent 5px 14px); content: ""; opacity: .8; pointer-events: none; }
.journey-focus-copy { align-self: center; max-width: 430px; }
.journey-focus h4 { font-size: clamp(25px, 2.4vw, 34px); }
.journey-focus p:not(.eyebrow) { font-size: 13px; }
.journey-focus .save { min-width: 236px; min-height: 48px; border-radius: 14px; }
.journey-focus-copy > .save { margin-top: 2px; }
.journey-focus-copy .journey-inline-actions { margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(213, 190, 171, .58); }
.journey-focus-copy .journey-backfill { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(225, 211, 199, .72); }
/* 規劃第一步直接在主舞台決定，不把使用者送進第二層抽屜，也不放兩顆
   語意相近的開始按鈕。選項只提供背景資料，唯一主要動作永遠是「開始規劃」。 */
.journey-inline-start { display: grid; gap: 9px; margin-top: 16px; }
.journey-inline-start .journey-account-picker { margin: 0; padding: 0; border: 0; }
.journey-inline-start .journey-account-picker legend { color: #4d3b2e; font-size: 14px; font-weight: 800; }
.journey-inline-start .journey-account-picker legend small { margin-left: 6px; color: #8a7566; font-size: 10px; font-weight: 600; }
.journey-inline-start .journey-account-picker > p { margin: 5px 0 11px; font-size: 12px; }
.journey-inline-start .journey-account-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.journey-inline-start .journey-account-choice { min-height: 58px; padding: 9px 11px; }
.journey-inline-start .journey-account-choice b { font-size: 12px; }
.journey-inline-start .journey-account-choice small { font-size: 10px; }
.journey-inline-start .journey-inline-actions { margin-top: 2px; }
.journey-inline-companions { display: grid; gap: 10px; margin-top: 16px; }
.journey-inline-companions .journey-member-roster { margin: 0; }
.journey-inline-companions .journey-member-row { min-height: 42px; box-sizing: border-box; }
.journey-inline-companions .planner-detail-empty { margin: 0; padding: 13px; border: 1px dashed rgba(207, 173, 146, .7); border-radius: 13px; background: rgba(255, 253, 250, .66); }
.journey-inline-companions > .planner-detail-meta { margin: 0; }
.journey-inline-companions .journey-inline-actions { margin-top: 2px; }
.journey-inline-booking { display: grid; gap: 8px; margin-top: 16px; }
.journey-inline-booking > .planner-detail-meta { margin: 0; padding: 12px 13px; border-left: 2px solid rgba(232, 116, 53, .48); background: rgba(255, 249, 244, .64); }
.journey-inline-booking .journey-inline-actions { margin-top: 1px; }
.journey-inline-stay { display: grid; gap: 8px; margin-top: 16px; }
.journey-inline-stay > .planner-detail-meta { margin: 0; padding: 12px 13px; border-left: 2px solid rgba(184, 121, 69, .5); background: rgba(255, 249, 243, .62); }
.journey-inline-stay .journey-inline-actions { margin-top: 1px; }
.journey-inline-day { display: grid; gap: 9px; margin-top: 16px; }
.journey-inline-day > .planner-detail-meta { margin: 0; padding: 12px 13px; border-left: 2px solid rgba(74, 111, 136, .46); background: rgba(247, 251, 253, .7); }
.journey-inline-day .journey-inline-actions { margin-top: 1px; }
.journey-inline-day-alternatives { margin: 2px 0 0; padding: 11px 0 0; border-top: 1px solid rgba(221, 210, 199, .72); }
.journey-inline-day-alternatives > summary { color: #7d6f63; font-size: 12px; font-weight: 700; cursor: pointer; }
.journey-inline-day-alternatives[open] > summary { color: #9b5632; }
.journey-inline-day-alternatives .journey-inline-actions { margin-top: 11px; }
.journey-inline-day-more { gap: 12px; padding-top: 10px; border-top: 1px solid rgba(221, 210, 199, .72); }
.journey-inline-anchors { display: grid; gap: 10px; margin-top: 16px; }
.journey-inline-anchor-summary { padding: 13px; border: 1px solid rgba(216, 197, 180, .7); border-radius: 15px; background: rgba(255, 253, 250, .7); }
.journey-inline-anchor-summary > .eyebrow { margin: 0 0 8px; }
.journey-inline-anchor-list { display: grid; gap: 6px; }
.journey-inline-anchor-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 9px 0; border: 0; border-top: 1px solid rgba(225, 213, 201, .7); background: transparent; color: #3b3028; text-align: left; cursor: pointer; }
.journey-inline-anchor-row:first-child { border-top: 0; }
.journey-inline-anchor-row b { font-size: 13px; }
.journey-inline-anchor-row span { color: #897b70; font-size: 11px; text-align: right; }
.journey-inline-anchor-row:hover b, .journey-inline-anchor-row:focus-visible b { color: #df6d2c; }
.journey-inline-preparation { display: grid; gap: 10px; margin-top: 16px; }
.journey-inline-preparation > .planner-detail-meta { margin: 0; padding: 12px 13px; border-left: 2px solid rgba(109, 128, 95, .48); background: rgba(249, 251, 246, .7); }
.journey-inline-preparation-list { display: grid; gap: 7px; }
.journey-inline-preparation-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 11px; border: 1px solid rgba(222, 212, 200, .8); border-radius: 13px; background: rgba(255, 253, 250, .76); cursor: pointer; }
.journey-inline-preparation-choice:has(input:checked) { border-color: rgba(211, 136, 78, .45); background: rgba(255, 248, 241, .82); }
.journey-inline-preparation-choice input { margin-top: 3px; accent-color: #e8762a; }
.journey-inline-preparation-choice b, .journey-inline-preparation-choice small { display: block; }
.journey-inline-preparation-choice b { color: #3b3028; font-size: 13px; }
.journey-inline-preparation-choice small { margin-top: 3px; color: #87786d; font-size: 11px; line-height: 1.45; }

/* 卡片與建立旅行入口是閱讀／輸入狀態，不應在靜置時不停移動。
   動效只在建立、儲存或切換步驟時發生；旅程地球與使用者主動操作的
   互動則保留自己的動態。 */
.trip-card .mini-route path, .start-pin-b { animation: none; }

/* 骨架是可選的補充，而不是第二個主畫面。展開後改為安靜的固定欄位，
   讓「加入已確定的安排」仍然是閱讀與操作的第一優先。 */
.journey-day-optional[open] .journey-day-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.journey-day-optional[open] .journey-day-option { min-height: 88px; padding: 12px; border-radius: 13px; background: #fffdfb; box-shadow: none; }
.journey-day-optional[open] .journey-day-option:hover, .journey-day-optional[open] .journey-day-option:focus-visible { transform: none; box-shadow: inset 0 0 0 1px rgba(239, 139, 74, .2); }
.journey-day-optional[open] .journey-day-option b { font-size: 14px; }
.journey-guest-actions { display: grid; justify-items: start; gap: 10px; }
.journey-guest-actions .planner-detail-meta { margin: 0; }
.journey-member-roster { display: grid; gap: 9px; margin: 18px 0; }
.journey-member-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid #ecdfd4; border-radius: 13px; background: #fffdfb; }
.journey-member-row > div:first-child { display: grid; min-width: 0; gap: 3px; }
.journey-member-row b { color: #372c25; font-size: 14px; }
.journey-member-row span { color: #8b7b6e; font-size: 11px; text-align: right; }
.journey-member-row-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.journey-member-row-actions .text-action { min-height: 34px; padding: 6px 8px; border-radius: 9px; color: #a9562b; font-size: 12px; }
.journey-member-row-actions .text-action:hover, .journey-member-row-actions .text-action:focus-visible { background: #fff2e9; }
.journey-member-paused { margin-top: 3px; border-top: 1px solid #eaded4; }
.journey-member-paused > summary { padding: 11px 2px 2px; color: #867467; font-size: 12px; font-weight: 750; cursor: pointer; }
.journey-member-paused > div { display: grid; gap: 9px; padding-top: 9px; }
.journey-roster-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.journey-roster-actions .save { min-width: 220px; }
.journey-member-preferences { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid #eaded4; border-radius: 14px; background: linear-gradient(135deg, #fffdfb, #fff8f3); }
.journey-member-preferences legend { padding: 0 3px; color: #49382d; font-size: 14px; font-weight: 800; }
.journey-member-preferences > p { margin: 0; color: #7b6d60; font-size: 11px; line-height: 1.55; }
.journey-member-preferences > label { max-width: calc(50% - 6px); }
.journey-member-optional { margin: 2px 0; padding: 12px 0 0; border-top: 1px solid rgba(225, 213, 201, .78); }
.journey-member-optional > summary { color: #705f52; font-size: 13px; font-weight: 800; cursor: pointer; }
.journey-member-optional[open] > summary { color: #a5532a; }
.journey-member-optional > p { margin: 6px 0 12px; color: #827367; font-size: 11px; line-height: 1.5; }
.journey-member-optional > label, .journey-member-optional > fieldset { margin: 0 0 12px; }
.journey-trip-cover-input { display: grid; gap: 7px; padding: 13px 14px; border: 1px dashed #e8c9b5; border-radius: 14px; background: linear-gradient(135deg, #fffaf6, #fffdfb); }
.journey-trip-cover-input input[type="file"] { max-width: 100%; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: #5e4c3e; font: inherit; }
.journey-trip-cover-input small { color: #8a7362; font-size: 11px; line-height: 1.5; }
.journey-account-choice.is-unavailable { border-style: dashed; background: #f7f4f0; color: #8b8178 !important; cursor: not-allowed; opacity: .72; }
.journey-account-choice.is-unavailable:hover { border-color: #ddd2c5; background: #f7f4f0; transform: none; }
.journey-account-choice.is-unavailable span:before { border-color: #c9bfb4; background: #eee8e1; }
.journey-stage-visual { position: relative; min-height: 284px; display: grid; place-items: center; overflow: visible; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.journey-stage-visual::before { content: ""; position: absolute; width: 310px; height: 310px; border-radius: 50%; background: radial-gradient(circle, rgba(255,250,245,.96) 0 27%, rgba(255,232,216,.38) 28% 46%, transparent 47%); }
/* 同行人：三個人是旅程軌跡的節點，不是一張另插進來的圖卡。 */
.journey-focus:has(.visual-companions) { grid-template-columns: minmax(310px, .82fr) minmax(0, 1fr); gap: 52px; }
.journey-focus:has(.visual-companions)::after { top: 50%; right: -7%; left: -7%; height: 2px; background: repeating-linear-gradient(90deg, rgba(233, 125, 63, .32) 0 6px, transparent 6px 16px); opacity: .9; transform: rotate(-2deg); }
.visual-companions { min-height: 300px; padding: 0 12px; box-sizing: border-box; }
.visual-companions::before { width: min(470px, 122%); height: 226px; border-radius: 51% 49% 48% 52%; background: radial-gradient(ellipse at 50% 50%, rgba(255,250,245,.96) 0 23%, rgba(255,231,214,.34) 24% 48%, transparent 49%); transform: rotate(-4deg); }
.visual-companions::after { position: absolute; z-index: 0; top: 49%; right: -4%; left: -8%; height: 122px; border-top: 1px solid rgba(237, 116, 47, .18); border-radius: 50%; content: ""; transform: rotate(-7deg); pointer-events: none; }
.companion-field { position: relative; z-index: 1; width: min(420px, 100%); height: 194px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.companion-field::before, .companion-field::after { position: absolute; border: 1px solid rgba(237, 116, 47, .24); border-radius: 50%; background: transparent !important; box-shadow: none !important; content: ""; }
.companion-field::before { inset: 15px -44px 22px; transform: rotate(-10deg); }
.companion-field::after { inset: 46px 30px -13px; border-color: rgba(50, 73, 97, .16); transform: rotate(18deg); }
.companion-field .manifest-route { top: 91px; right: 16.666667%; left: 16.666667%; z-index: 1; height: 2px; opacity: .92; }
.companion-field .traveller { top: 72px; z-index: 2; width: 44px; height: 44px; border-width: 6px; }
.companion-field .traveller::after { top: 8px; left: 8px; width: 12px; height: 12px; }
.companion-field .traveller-one { left: calc(16.666667% - 22px); }
.companion-field .traveller-two { left: calc(50% - 22px); }
.companion-field .traveller-three { right: auto; left: calc(83.333333% - 22px); }
.companion-field small { position: absolute; z-index: 2; right: 0; bottom: 9px; left: 0; color: #806f62; font-size: 11px; font-weight: 700; text-align: center; letter-spacing: .08em; }
.manifest-route { position: absolute; top: 53px; right: 42px; left: 42px; height: 1px; background: repeating-linear-gradient(90deg, #e99a70 0 5px, transparent 5px 10px); }
.traveller { position: absolute; top: 75px; width: 34px; height: 34px; border: 5px solid #fffaf5; border-radius: 50%; box-sizing: border-box; background: #ef762f; box-shadow: 0 4px 12px rgba(113, 64, 34, .16); }
.traveller::after { content: ""; position: absolute; top: 7px; left: 7px; width: 10px; height: 10px; border-radius: 50%; background: #fff5ed; }
.traveller-one { left: 48px; background: #ef762f; animation: travellerArrive .42s ease both; }
.traveller-two { left: 102px; background: #324961; animation: travellerArrive .42s .10s ease both; }
.traveller-three { left: 156px; background: #f0ad76; animation: travellerArrive .42s .20s ease both; }
@keyframes travellerArrive { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes journeyDash { from { background-position-x: 0; } to { background-position-x: 30px; } }
@keyframes journeyArrivalNote { from { opacity: 0; transform: translateY(-7px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes plannerDrawerEnterMobile { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

/* 規劃動效是焦點區域的一部分，而不是一張張假資料卡。每個場景都只呈現
   當前關係：資料整理、第一晚落點、一天節奏、出發前核對。 */
.booking-field, .anchor-field, .day-field, .prepare-field { position: relative; z-index: 1; width: 278px; height: 168px; }
.booking-field::before, .booking-field::after, .anchor-field::before, .anchor-field::after, .prepare-field::before, .prepare-field::after { position: absolute; content: ""; pointer-events: none; }
.booking-field::before { inset: 16px 13px 29px; border: 1px solid rgba(56, 92, 118, .19); border-radius: 50%; transform: rotate(-13deg); }
.booking-field::after { inset: 39px 33px 6px; border: 1px solid rgba(237, 116, 47, .25); border-radius: 50%; transform: rotate(16deg); }
.booking-field .booking-route { position: absolute; top: 78px; right: 25px; left: 24px; height: 2px; background: repeating-linear-gradient(90deg, rgba(72, 112, 137, .72) 0 5px, transparent 5px 12px); }
.booking-node { position: absolute; top: 68px; z-index: 1; width: 19px; height: 19px; border: 4px solid #fffaf5; border-radius: 50%; box-sizing: border-box; box-shadow: 0 4px 12px rgba(71, 102, 126, .13); }
.booking-node-start { left: 25px; background: #ef762f; }.booking-node-now { left: 128px; background: #324f68; }.booking-node-end { right: 25px; background: #f3b27d; }
.booking-field b, .anchor-field b, .day-field b, .prepare-field b { position: absolute; top: 12px; left: 0; color: #584638; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.booking-field small, .anchor-field small, .day-field small, .prepare-field small { position: absolute; right: 0; bottom: 12px; left: 0; color: #806f62; font-size: 11px; font-weight: 700; text-align: center; letter-spacing: .04em; }
.anchor-field::before { inset: 15px -13px 33px; border: 1px solid rgba(193, 152, 102, .28); border-radius: 47% 53% 49% 51%; transform: rotate(-16deg); }
.anchor-field::after { inset: 55px 17px 14px; border: 1px solid rgba(237, 116, 47, .18); border-radius: 51% 49% 46% 54%; transform: rotate(18deg); }
.anchor-route { position: absolute; height: 1px; background: repeating-linear-gradient(90deg, #d5b38d 0 5px, transparent 5px 11px); }
.anchor-route-one { top: 74px; right: 12px; left: 23px; transform: rotate(-14deg); }.anchor-route-two { top: 96px; right: 31px; left: 46px; opacity: .7; transform: rotate(17deg); }
.anchor-pin { position: absolute; top: 61px; left: 123px; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: #ed702d; box-shadow: 0 0 0 8px rgba(237,112,45,.11); transform: rotate(-45deg); }
.anchor-pin::after { position: absolute; top: 9px; left: 9px; width: 12px; height: 12px; border-radius: 50%; background: #fff9f2; content: ""; }
.day-field { display: flex; align-items: flex-end; justify-content: center; gap: 28px; padding: 34px 30px 34px; box-sizing: border-box; }
.day-field::before { position: absolute; top: 103px; right: 21px; left: 21px; height: 1px; background: repeating-linear-gradient(90deg, rgba(234, 138, 81, .22) 0 4px, transparent 4px 10px); content: ""; }
.day-beat { position: relative; z-index: 1; display: block; width: 32px; border-radius: 14px 14px 3px 3px; transform-origin: bottom; animation: dayFieldBuild .58s ease both; }
.day-beat-one { height: 52px; background: #f5b184; }.day-beat-two { height: 83px; background: #ef772f; animation-delay: .12s; }.day-beat-three { height: 65px; background: #354d62; animation-delay: .24s; }
.day-route { position: absolute; top: 48px; left: 132px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(239,119,47,.14); }
.day-field b { top: 12px; }.day-field small { bottom: 1px; }
.prepare-field::before { inset: 19px 21px 15px; border: 1px solid rgba(80, 139, 95, .25); border-radius: 49% 51% 46% 54%; transform: rotate(-13deg); }
.prepare-field::after { inset: 42px 42px 28px; border: 1px solid rgba(239, 119, 47, .20); border-radius: 50%; }
.prepare-beacon { position: absolute; top: 57px; left: 118px; width: 43px; height: 43px; border-radius: 50%; background: #4f9a67; box-shadow: 0 0 0 9px rgba(79,154,103,.10); }
.prepare-beacon::after { position: absolute; top: 12px; left: 12px; width: 17px; height: 8px; border-bottom: 3px solid #fff; border-left: 3px solid #fff; content: ""; transform: rotate(-45deg); }
.prepare-route { position: absolute; top: 78px; right: 35px; left: 35px; height: 1px; background: repeating-linear-gradient(90deg, rgba(78, 141, 94, .56) 0 5px, transparent 5px 12px); }
.prepare-field em { position: absolute; bottom: 36px; padding: 4px 7px; border: 1px solid rgba(91,142,105,.24); border-radius: 999px; background: rgba(255,255,255,.48); color: #52735b; font-size: 10px; font-style: normal; font-weight: 800; }
.prepare-field em:nth-of-type(1) { left: 23px; }.prepare-field em:nth-of-type(2) { left: 108px; }.prepare-field em:nth-of-type(3) { right: 19px; }
@keyframes bookingNodePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.23); } }
@keyframes anchorFieldPulse { 0%,100% { transform: rotate(-45deg) scale(1); } 50% { transform: rotate(-45deg) scale(1.12); } }
@keyframes dayFieldBuild { from { opacity: .2; transform: scaleY(.12); } to { opacity: 1; transform: scaleY(1); } }
@keyframes dayRouteMove { 0%,100% { transform: translateX(-34px); } 50% { transform: translateX(34px); } }
@keyframes prepareBeaconPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 9px rgba(79,154,103,.10); } 50% { transform: scale(1.08); box-shadow: 0 0 0 15px rgba(79,154,103,.04); } }
@media (max-width: 760px) {
  .planner-shell { width: 100%; }
  .planner-top { min-height: 64px; gap: 8px; padding: 11px 15px; }
  .planner-top > div:first-child { flex: 1 1 auto; min-width: 0; }
  .planner-top h2 { max-width: none; font-size: 17px; }
  .planner-top-actions { flex: 0 0 auto; gap: 5px; white-space: nowrap; }
  .planner-top-actions > * { flex: 0 0 auto; white-space: nowrap; }
  /* 手機只保留「目前視圖、更多、返回」三件事；同行人與旅行設定仍可
     從更多進入，避免長名稱和四個文字按鈕互相擠壓。 */
  /* data-planner-members 已無產生端（見 app.js 那段註解），只留 edit-trip。 */
  .planner-top .planner-edit-trip { display: none; }
  .planner-top .planner-more { display: inline-flex; align-items: center; }
  .planner-top-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 6px 3px; font-size: 0; line-height: 1; text-decoration: none; }
  .planner-top-link::after { content: attr(data-mobile-label); font-size: 10px; line-height: 1; }
  .planner-edit-trip { padding: 6px 7px; font-size: 0; }
  .planner-top .x { width: 36px; height: 36px; padding: 0; font-size: 25px; line-height: 1; }
  .planner-body { height: calc(100% - 64px); padding: 14px; }
  /* 抽屜必須屬於同一個面板，而不是在中央露出一條獨立捲軸。標題與主要
     動作固定在可見區域內，長表單仍可順暢捲動且不會被瀏覽器工具列吃掉。 */
  /* 行動版抽屜永遠從同一個 82px 頂欄以下展開。不要同時維護「64%」與
     另一個幾乎全高的公式，否則不同瀏覽器會像是有兩張互相搶位的面板。 */
  .planner-drawer { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: calc(100dvh - 82px - env(safe-area-inset-top)); padding: 0 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; overscroll-behavior: contain; scroll-padding-bottom: calc(94px + env(safe-area-inset-bottom)); scroll-padding-top: 140px; scrollbar-gutter: stable; }
  .planner-drawer > .planner-drawer-head { position: sticky; z-index: 2; top: 0; margin: 0 -18px 14px; padding: 16px 18px 12px; background: linear-gradient(#fffdfa 82%, rgba(255,253,250,0)); }
  /* 手機抽屜標題：標題自成一行，返回與關閉在下方右側排開，× 永遠在最右，
     不再把標題、×、返回上一層三者擠在同一行、也不讓 × 卡在中間。 */
  .planner-drawer-head { flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 8px; }
  .planner-drawer-head > div:first-child { flex: 1 1 100%; min-width: 0; }
  .planner-drawer-head .planner-drawer-return { order: 2; margin-left: auto; }
  /* margin-left: 0 只有在同排存在帶 margin-left:auto 的返回鈕時才會被推到右邊；
     只有一顆裸 × 的抽屜（管理同行人、誰會一起出發？、成功頁）會靠左，
     於是標題下方浮著一個沒有歸屬的 ×，而 header 吃掉 126px。 */
  .planner-drawer-head .x { order: 3; margin-left: auto; }
  .planner-drawer > form { padding-bottom: 70px; }
  /* sticky 主動作用實色 box-shadow 做上下遮罩帶（畫在按鈕背後、與抽屜底色
     同色），捲動時上下欄位被乾淨遮住，不會從按鈕邊緣透出來像黏在一起。 */
  .planner-drawer > form > .save:last-child { position: sticky; z-index: 1; bottom: calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -16px 0 14px #fffdfa, 0 16px 0 14px #fffdfa; }
  .journey-flow { min-height: auto; padding: 18px 4px; }
  .journey-flow-head h3 { font-size: 30px; }
  .journey-arrival { align-items: flex-start; width: auto; margin: 15px 0 -8px; border-radius: 13px; }
  .journey-arrival span { min-width: 0; }
  .journey-flow-progress { gap: 1px; margin-top: 24px; }
  .journey-flow-progress li { min-width: 0; gap: 6px; }
  .journey-flow-progress li::before { width: calc(100% + 1px); }
  .journey-flow-progress li span { overflow: hidden; font-size: 0; line-height: 1; text-overflow: clip; white-space: nowrap; }
  .journey-flow-progress li span::after { content: attr(data-compact-label); font-size: 10px; line-height: 1; }
  .journey-focus { min-height: 0; grid-template-columns: 1fr; gap: 22px; padding: 32px 8px 20px; }
  .journey-focus:has(.visual-companions) { grid-template-columns: 1fr; gap: 12px; }
  .journey-focus-copy { order: -1; width: 100%; }
  .journey-focus-copy > .save { width: 100%; min-width: 0; }
  .journey-focus-copy .journey-inline-actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: 8px; }
  .journey-focus-copy .journey-inline-actions .secondary { width: 100%; }
  .journey-inline-start .journey-account-choices { grid-template-columns: 1fr; }
  .journey-inline-start .journey-inline-actions .save { width: 100%; }
  .journey-inline-companions .journey-inline-actions .save { width: 100%; }
  .journey-inline-booking .journey-inline-actions .save { width: 100%; }
  .journey-inline-stay .journey-inline-actions .save { width: 100%; }
  .journey-inline-day .journey-inline-actions .save { width: 100%; }
  .journey-inline-anchors .journey-inline-actions .save { width: 100%; }
  .journey-inline-preparation .journey-inline-actions .save { width: 100%; }
  .journey-inline-day-more { gap: 8px; }
  .journey-inline-anchor-row { align-items: flex-start; flex-direction: column; gap: 3px; }
  .journey-inline-anchor-row span { text-align: left; }
  .journey-focus-copy .journey-backfill { align-items: flex-start; flex-direction: column; gap: 4px; }
  .journey-backfill { margin-top: 14px; }
  .journey-stage-visual { min-height: 210px; overflow: hidden; }
  .visual-companions { min-height: 208px; padding: 0; }
  .visual-companions::before { width: min(118%, 350px); height: 186px; }
  .visual-companions::after { top: 48%; right: -4%; left: -8%; height: 98px; }
  .journey-member-row { align-items: start; flex-direction: column; gap: 4px; }
  .journey-member-row span { text-align: left; }
  .journey-member-preferences > label { max-width: none; }
  .journey-roster-actions { display: grid; }
  .journey-roster-actions .save { width: 100%; }
  .journey-stage-visual::before { width: 220px; height: 220px; }
  .journey-focus::before { inset: 10px -22px 6px; }
  .journey-focus::after { right: 0; left: 0; }
  .companion-field { width: min(272px, 100%); height: 166px; }
  .booking-field, .anchor-field, .day-field, .prepare-field { width: 248px; height: 154px; }
  .booking-node-now { left: 114px; }
  .anchor-pin { left: 109px; }
  .prepare-beacon { left: 104px; }
  .prepare-field em:nth-of-type(1) { left: 12px; }.prepare-field em:nth-of-type(2) { left: 95px; }.prepare-field em:nth-of-type(3) { right: 8px; }
  .companion-field .manifest-route { top: 75px; right: 16.666667%; left: 16.666667%; }
  .companion-field .traveller { top: 56px; width: 40px; height: 40px; }
  .companion-field .traveller-one { left: calc(16.666667% - 20px); }
  .companion-field .traveller-two { left: calc(50% - 20px); }
  .companion-field .traveller-three { right: auto; left: calc(83.333333% - 20px); }
  .journey-day-options { grid-template-columns: 1fr; }
  .journey-day-optional[open] .journey-day-options { grid-template-columns: 1fr; }
  .journey-day-primary .save { width: 100%; min-width: 0; }
  .journey-day-picker { grid-template-columns: 1fr; }
  .journey-slot-options { grid-template-columns: 1fr; }
  .journey-day-option { min-height: 84px; }
  .journey-candidate-choice { grid-template-columns: minmax(0, 1fr); }
  .journey-candidate-choice .secondary { justify-self: start; }
  .journey-planning-preview { grid-template-columns: 1fr; }
  .planner-form-pair { grid-template-columns: 1fr; }
  .journey-booking-summary-head, .journey-booking-followup { align-items: flex-start; flex-direction: column; }
  .journey-booking-summary-head small { max-width: none; text-align: left; }
  .journey-booking-followup .secondary { width: 100%; }
  .journey-booking-type-grid { grid-template-columns: 1fr; }
  .journey-booking-type { min-height: 0; }
  .trip-visibility-choice > div { grid-template-columns: 1fr; }
  .travel-quick-brief-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .travel-quick-brief dl { grid-template-columns: 1fr; }
  .travel-quick-brief dl > div { border-right: 0; }
  .travel-quick-brief dl > div:nth-child(2) { border-top: 1px solid #f2e8df; }
  .travel-offline-status { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* 旅程入口卡：資料多寡不能改變格線節奏；有代表照片時，照片只是同一位置的
   真實辨識線索。照片未提供時保留留白，不以目的地插畫或漸層假裝內容。 */
.trip-card { height: 286px; min-height: 286px; max-height: 286px; overflow: hidden; }
.trip-card.has-cover .trip-cover { width: 42%; border-left: 1px solid rgba(116, 92, 70, .16); box-shadow: none; }
.trip-card.has-cover .trip-cover::after { background: rgba(42, 30, 21, .08); }

/* 固定安排確認不是單純的完成畫面：把系統真的能判斷與還不能判斷的事
   用同一個低干擾區塊說清楚，避免橙色被誤讀成系統已替使用者解決衝突。 */
.journey-anchor-check { margin: 16px 0; padding: 17px 18px; border: 1px solid #efcfba; border-radius: 18px; background: #fff9f4; }
.journey-anchor-check.is-clear { border-color: #dfe7df; background: #fbfdfb; }
.journey-anchor-check h4 { margin: 3px 0 6px; font-size: 17px; }
.journey-anchor-check > p:not(.eyebrow) { margin: 0; color: #716a63; font-size: 14px; line-height: 1.55; }
.journey-anchor-check ul { display: grid; gap: 9px; margin: 13px 0 0; padding: 0; list-style: none; }
.journey-anchor-check li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; padding-top: 9px; border-top: 1px solid rgba(144, 112, 81, .14); color: #625b54; font-size: 14px; line-height: 1.5; }
.journey-anchor-check li b { color: #c7642a; white-space: nowrap; }
.journey-anchor-check li.is-warning b { color: #b74d28; }
.journey-anchor-check li.is-check b { color: #82776a; }

@media (max-width: 760px) {
  .trip-card { height: 268px; min-height: 268px; max-height: 268px; }
  .trip-card.has-cover .trip-cover { width: 40%; }
  .journey-anchor-check { padding: 15px; }
  .journey-anchor-check li { grid-template-columns: 1fr; gap: 2px; }
}

/* rgba(239,110,42,.45) 在 #fffdfa 上合成後只有 1.62:1，WCAG 1.4.11 要 3:1——
   而且它排在 style.css 之後，會蓋掉那條本來合格的 2px 實色輪廓。 */
.planner-drawer :focus-visible, .planner-top :focus-visible { outline: 3px solid #b8501c; outline-offset: 3px; }

/* v5：規劃的動態不是貼在內容旁邊的插圖。它是一段會在「目前步驟」抵達時
   展開的資訊地景：路徑、節點與文字共享同一個座標系；靜止時保持安靜，只有
   真正切換步驟、聚焦操作或確認資料時才有回應。 */
.journey-focus {
  --journey-accent: #ef712d;
  --journey-accent-soft: rgba(239, 113, 45, .17);
  --journey-ink: #324f68;
  min-height: 352px;
  gap: clamp(34px, 6vw, 68px);
}
.journey-focus-task {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  color: #51483f;
  line-height: 1.35;
}
.journey-focus-task span {
  color: var(--journey-accent);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.journey-focus-task b { font-size: clamp(1.35rem, 2vw, 1.8rem); }
.journey-focus:has(.visual-booking) { --journey-accent: #e87435; --journey-accent-soft: rgba(232, 116, 53, .16); --journey-ink: #31536c; }
.journey-focus:has(.visual-anchors) { --journey-accent: #b87945; --journey-accent-soft: rgba(184, 121, 69, .15); --journey-ink: #685442; }
.journey-focus:has(.visual-days) { --journey-accent: #e7682f; --journey-accent-soft: rgba(231, 104, 47, .16); --journey-ink: #314d63; }
.journey-focus:has(.visual-prepare) { --journey-accent: #4b9464; --journey-accent-soft: rgba(75, 148, 100, .14); --journey-ink: #356044; }
.journey-focus::before {
  inset: 2px -68px -2px;
  border-radius: 50% 50% 46% 54%;
  background:
    radial-gradient(ellipse at 17% 54%, var(--journey-accent-soft) 0 4%, transparent 31%),
    radial-gradient(ellipse at 80% 42%, rgba(50, 79, 104, .065) 0 3%, transparent 28%),
    linear-gradient(108deg, rgba(255, 250, 245, .2), rgba(255, 253, 251, .9) 47%, rgba(255, 250, 246, .36));
}
.journey-focus::after {
  top: 54%; right: -3%; left: -4%; height: 2px;
  background: linear-gradient(90deg, transparent 0 4%, color-mix(in srgb, var(--journey-accent) 38%, transparent) 4% 72%, transparent 72% 100%);
  opacity: .78;
  transform: rotate(-1.5deg);
}
.journey-stage-visual {
  min-height: 302px;
  isolation: isolate;
  overflow: visible;
}
.journey-stage-visual::before {
  width: min(430px, 118%);
  height: 238px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .9) 0 20%, color-mix(in srgb, var(--journey-accent) 12%, transparent) 21% 34%, transparent 58%);
  opacity: .9;
}
.journey-stage-visual::after {
  position: absolute;
  z-index: -1;
  top: 48%; right: 2%; left: 2%;
  height: 1px;
  border-top: 1px dashed color-mix(in srgb, var(--journey-accent) 48%, transparent);
  content: "";
  opacity: .62;
  transform: scaleX(.18);
  transform-origin: left center;
}
.journey-flow.is-entering .journey-stage-visual::after { animation: journeySceneRoute .72s .18s cubic-bezier(.2,.8,.2,1) both; }
.journey-focus:focus-within .journey-stage-visual::after { opacity: .95; transition: opacity .2s ease; }

/* 旅行不是一張插圖。已訂資料這一步改成像登機前確認的立體場景：
   航線、機翼與三個可核對節點一起抵達，但不假裝任何尚未確認的航班資料。 */
.visual-booking .booking-field { perspective: 680px; transform-style: preserve-3d; }
.visual-booking .booking-field::before {
  position: absolute; z-index: -1; top: 37px; left: calc(50% - 35px); width: 70px; height: 70px;
  display: block; border: 1px solid rgba(49, 83, 108, .18); border-radius: 17px 35px 17px 35px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(219,233,240,.72));
  box-shadow: 0 15px 26px rgba(36, 68, 93, .13); content: ""; transform: rotateX(51deg) rotateZ(-22deg);
}
.visual-booking .booking-field::after {
  position: absolute; z-index: 2; top: 57px; left: calc(50% - 10px); width: 34px; height: 18px;
  display: block; border-radius: 68% 12% 60% 18%; background: var(--journey-ink);
  box-shadow: 9px 5px 0 -5px var(--journey-accent), -8px 5px 0 -5px var(--journey-accent); content: "";
  transform: rotate(-18deg) translateZ(13px);
}
.journey-flow.is-entering .visual-booking .booking-field::before { animation: journeyBoardingCard .48s .1s cubic-bezier(.17,.82,.25,1) both; }
.journey-flow.is-entering .visual-booking .booking-field::after { animation: journeyBoardingPlane .46s .2s cubic-bezier(.17,.82,.25,1) both; }
@keyframes journeyBoardingCard { from { opacity: 0; transform: rotateX(66deg) rotateZ(-36deg) translateY(18px); } to { opacity: 1; transform: rotateX(51deg) rotateZ(-22deg) translateY(0); } }
@keyframes journeyBoardingPlane { from { opacity: 0; transform: rotate(-18deg) translate(-18px, 12px) translateZ(13px); } to { opacity: 1; transform: rotate(-18deg) translate(0, 0) translateZ(13px); } }

/* 三個等距節點代表「名單正在被確認」，不假裝已經有三位使用者或三筆資料。 */
.visual-companions { min-height: 302px; padding: 0; }
.visual-companions::before { width: min(430px, 118%); height: 238px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0 20%, rgba(239,113,45,.12) 21% 34%, transparent 58%); transform: none; }
.visual-companions::after { top: 49%; right: 2%; left: 2%; height: 1px; border-top: 1px dashed rgba(237, 116, 47, .38); border-radius: 0; transform: none; }
.companion-field { width: min(342px, 100%); height: 176px; }
.visual-companions .companion-field,
.visual-booking .booking-field,
.visual-anchors .anchor-field,
.visual-days .day-field,
.visual-prepare .prepare-field { animation: none; }
.companion-field::before, .companion-field::after { display: none; }
.companion-field .manifest-route { top: 79px; right: 16.666667%; left: 16.666667%; height: 1px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--journey-accent) 68%, transparent) 0 5px, transparent 5px 12px); animation: none; }
.companion-field .traveller { top: 57px; width: 46px; height: 46px; border: 6px solid #fffaf5; background: #fffdfb; box-shadow: 0 8px 21px rgba(74, 51, 36, .12); animation: none; }
.companion-field .traveller::after { top: 10px; left: 10px; width: 14px; height: 14px; background: var(--journey-accent); }
.companion-field .traveller-one { left: calc(16.666667% - 23px); background: #fffaf5; }
.companion-field .traveller-two { left: calc(50% - 23px); background: #fffdfb; }
.companion-field .traveller-three { left: calc(83.333333% - 23px); background: #fffaf5; }
.companion-field .traveller-two::after { background: var(--journey-ink); }
.companion-field .traveller-three::after { background: #f0ad76; }
.companion-field small { bottom: 9px; color: #806f62; letter-spacing: .12em; }

/* 其餘步驟沿用同一張「路徑」而非每一步重畫一張插圖；顏色和核心節點只
   依目前的真實流程狀態而變。 */
.booking-field, .anchor-field, .day-field, .prepare-field { width: min(300px, 100%); height: 176px; }
.booking-field::before, .booking-field::after,
.anchor-field::before, .anchor-field::after,
.prepare-field::before, .prepare-field::after { display: none; }
/* 覆寫共用場景的隱藏規則：已訂資料才需要展現一次性的登機確認動態。 */
.visual-booking .booking-field::before, .visual-booking .booking-field::after { display: block; }
.booking-field .booking-route, .prepare-route { top: 82px; right: 20px; left: 20px; height: 1px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--journey-ink) 72%, transparent) 0 5px, transparent 5px 12px); animation: none; }
.booking-node { top: 72px; width: 21px; height: 21px; border: 4px solid #fffaf5; background: #fffdfb; box-shadow: 0 7px 17px rgba(71, 102, 126, .12); }
.booking-node-start { left: 20px; background: #fffaf5; }.booking-node-now { left: calc(50% - 10px); background: #fffdfb; animation: none; }.booking-node-end { right: 20px; background: #fffaf5; }
.booking-node-start::after, .booking-node-now::after, .booking-node-end::after { position: absolute; inset: 4px; border-radius: inherit; background: var(--journey-accent); content: ""; }
.booking-node-now::after { background: var(--journey-ink); }
.booking-field b, .anchor-field b, .day-field b, .prepare-field b { top: 15px; left: 50%; color: #584638; font-size: 11px; letter-spacing: .12em; transform: translateX(-50%); white-space: nowrap; }
.booking-field small, .anchor-field small, .day-field small, .prepare-field small { bottom: 8px; color: #806f62; letter-spacing: .08em; }
.anchor-route { height: 1px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--journey-accent) 59%, transparent) 0 5px, transparent 5px 11px); }
.anchor-route-one { top: 81px; right: 20px; left: 20px; transform: rotate(-4deg); }.anchor-route-two { top: 92px; right: 44px; left: 44px; transform: rotate(4deg); }
.anchor-pin { top: 67px; left: calc(50% - 15px); width: 30px; height: 30px; background: var(--journey-accent); animation: none; }
.day-field { gap: clamp(22px, 7vw, 34px); padding: 38px 30px 32px; }
.day-field::before { top: 112px; right: 21px; left: 21px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--journey-accent) 32%, transparent) 0 4px, transparent 4px 10px); }
.day-beat { width: 34px; animation: none; }
.day-beat-one { background: #f5b184; }.day-beat-two { background: var(--journey-accent); }.day-beat-three { background: var(--journey-ink); }
.day-route { top: 55px; left: calc(50% - 6px); background: #fff; box-shadow: 0 0 0 5px var(--journey-accent-soft); animation: none; }
.prepare-beacon { top: 65px; left: calc(50% - 21px); background: var(--journey-accent); box-shadow: 0 0 0 9px var(--journey-accent-soft); animation: none; }
.prepare-route { top: 86px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--journey-accent) 68%, transparent) 0 5px, transparent 5px 12px); }
.prepare-field em { bottom: 30px; border-color: color-mix(in srgb, var(--journey-accent) 30%, transparent); color: color-mix(in srgb, var(--journey-accent) 70%, #4d6253); }

/* 有資料或步驟真的抵達時才展開；不做無限迴圈以免使用者把裝飾誤認成通知。 */
.journey-flow.is-entering .companion-field .traveller { animation: journeyNodeArrive .44s cubic-bezier(.2,.8,.2,1) both; }
.journey-flow.is-entering .companion-field .traveller-two { animation-delay: .09s; }
.journey-flow.is-entering .companion-field .traveller-three { animation-delay: .18s; }
.journey-flow.is-entering .booking-node-start, .journey-flow.is-entering .booking-node-now, .journey-flow.is-entering .booking-node-end { animation: journeyNodeArrive .42s cubic-bezier(.2,.8,.2,1) both; }
.journey-flow.is-entering .booking-node-now { animation-delay: .12s; }.journey-flow.is-entering .booking-node-end { animation-delay: .24s; }
.journey-flow.is-entering .anchor-pin, .journey-flow.is-entering .prepare-beacon { animation: journeyPinLand .5s .2s cubic-bezier(.2,.8,.2,1) both; }
.journey-flow.is-entering .day-beat { animation: journeyBarBuild .46s cubic-bezier(.2,.8,.2,1) both; }
.journey-flow.is-entering .day-beat-two { animation-delay: .1s; }.journey-flow.is-entering .day-beat-three { animation-delay: .2s; }
.journey-focus:focus-within .booking-node-now, .journey-focus:focus-within .anchor-pin, .journey-focus:focus-within .prepare-beacon { box-shadow: 0 0 0 10px var(--journey-accent-soft); transition: box-shadow .25s ease; }
@keyframes journeySceneRoute { from { opacity: 0; transform: scaleX(.18); } to { opacity: .62; transform: scaleX(1); } }
@keyframes journeyNodeArrive { from { opacity: 0; transform: translateY(12px) scale(.72); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes journeyPinLand { 0% { opacity: 0; transform: translateY(-18px) scale(.65) rotate(-45deg); } 72% { opacity: 1; transform: translateY(2px) scale(1.06) rotate(-45deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(-45deg); } }
@keyframes journeyBarBuild { from { opacity: 0; transform: scaleY(.16); } to { opacity: 1; transform: scaleY(1); } }

/* 規劃的第一屏先讓使用者完成一個選擇；路徑是低調背景，不再把表單擠到
   首屏以下。同行人、訂位與每日安排才保留較完整的情境場景。 */
@media (min-width: 761px) {
  .journey-flow.is-start-stage .journey-focus { min-height: 0; grid-template-columns: 1fr; gap: 8px; padding: 12px 0 8px; }
  .journey-flow.is-start-stage .journey-focus-copy { order: 1; max-width: 620px; }
  .journey-flow.is-start-stage .journey-stage-visual { display: none; }
  .journey-flow.is-start-stage .journey-flow-handoff { display: none; }
}

/* 規劃導引只有一個主路徑。設定與同行人仍可從「更多」抵達，但不應與
   首用流程的下一個動作並排在標題列。 */
.travel-planner[data-planner-mode="guide"] [data-planner-edit-trip] { display: none !important; }
.travel-planner[data-planner-mode="guide"] .planner-more { display: inline-flex; align-items: center; }

/* 一次性的抵達編排：標題 → 進度 → 路徑 → 操作。它只在真正跨步時出現，
   沒有循環，並由既有 reduced-motion 規則完整關閉。 */
@media (prefers-reduced-motion: no-preference) {
  .journey-flow.is-entering .journey-flow-head { animation: journeyStageHeader .34s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .journey-flow-progress { animation: journeyStageProgress .3s .1s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .journey-focus-copy { animation: journeyStageAction .32s .22s cubic-bezier(.2,.8,.2,1) both; }
}
/* 內容永遠先可讀，再以很短的位移告知步驟已抵達。避免標題、按鈕先消失
   才淡入而被感知成畫面閃白／重新載入。 */
@keyframes journeyStageHeader { from { opacity: .88; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes journeyStageProgress { from { opacity: .9; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes journeyStageAction { from { opacity: .9; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .journey-focus { min-height: 0; gap: 18px; padding: 26px 6px 18px; }
  .journey-focus::before { inset: 7px -14px 4px; }
  .journey-focus::after { top: 62%; right: -6px; left: -6px; }
  .journey-focus-task { gap: 7px; margin-bottom: 8px; }
  .journey-focus-task span { font-size: .7rem; }
  .journey-focus-task b { font-size: 1.22rem; }
  .journey-stage-visual, .visual-companions { min-height: 194px; overflow: hidden; }
  .journey-stage-visual::before, .visual-companions::before { width: 290px; height: 194px; }
  /* 新旅行的首步不能因共用的大型場景而把輸入與下一步推到首屏外；
     手機同樣先讓人看見現在該做什麼，動效退到低干擾的背景。 */
  .journey-flow.is-start-stage .journey-focus { gap: 8px; padding-top: 10px; }
  .journey-flow.is-start-stage .journey-focus-copy { order: 1; }
  .journey-flow.is-start-stage .journey-stage-visual { display: none; }
  .journey-flow.is-start-stage .journey-flow-handoff { display: none; }
  .companion-field { width: min(286px, 100%); height: 150px; }
  .companion-field .manifest-route { top: 69px; }
  .companion-field .traveller { top: 48px; width: 42px; height: 42px; }
  .companion-field .traveller-one { left: calc(16.666667% - 21px); }.companion-field .traveller-two { left: calc(50% - 21px); }.companion-field .traveller-three { left: calc(83.333333% - 21px); }
  .booking-field, .anchor-field, .day-field, .prepare-field { width: 248px; height: 152px; }
  .booking-field .booking-route { top: 72px; }.booking-node { top: 62px; }.booking-node-now { left: calc(50% - 10px); }
  .anchor-route-one { top: 70px; }.anchor-route-two { top: 82px; }.anchor-pin { top: 56px; left: calc(50% - 15px); }
  .day-field { padding-top: 30px; gap: 25px; }.day-field::before { top: 98px; }.day-route { top: 45px; }
  .prepare-beacon { top: 54px; left: calc(50% - 21px); }.prepare-route { top: 75px; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-flow *, .journey-flow *::before, .journey-flow *::after { animation: none !important; transition: none !important; }
}

/* 規劃引導動效稽核：六個步驟都在同一條旅行路徑上抵達，而不是各自跳出
   一張插圖。動效僅在真正換步時播放一次，且完整節奏控制在約 .4 秒內。 */
.journey-flow[data-journey-stage] .journey-focus { align-items: center; }
.journey-flow[data-journey-stage] .journey-stage-visual,
.journey-flow[data-journey-stage] .journey-focus-copy { justify-self: stretch; }
/* 桌機與手機都先閱讀「現在要做什麼」，再把動效當成同一個旅程地景的一部分。
   不讓版面寬度改變使用者理解每一步的順序。 */
.journey-flow[data-journey-stage] .journey-focus-copy { order: -1; }
.journey-flow[data-journey-stage] .journey-stage-visual { order: 1; }

/* 起點是填寫／選擇畫面：保留一條低調的路徑當背景，不再用獨立大場景
   把主操作推離首屏。data selector 同時相容尚未補上輔助 class 的舊畫面。 */
.journey-flow[data-journey-stage="start"] .journey-focus,
.journey-flow.is-start-stage .journey-focus {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 18px 8px 12px;
}
.journey-flow[data-journey-stage="start"] .journey-focus-copy,
.journey-flow.is-start-stage .journey-focus-copy {
  position: relative;
  z-index: 1;
  max-width: 660px;
}
.journey-flow[data-journey-stage="start"] .journey-stage-visual,
.journey-flow.is-start-stage .journey-stage-visual {
  position: absolute;
  top: 10px;
  right: 0;
  left: 0;
  display: grid;
  min-height: 84px;
  height: 84px;
  overflow: hidden;
  pointer-events: none;
  opacity: .62;
}
.journey-flow[data-journey-stage="start"] .journey-stage-visual::before,
.journey-flow.is-start-stage .journey-stage-visual::before {
  width: min(510px, 78%);
  height: 84px;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.7) 0 20%, rgba(232,116,53,.11) 21% 42%, transparent 43%);
}
.journey-flow[data-journey-stage="start"] .journey-stage-visual::after,
.journey-flow.is-start-stage .journey-stage-visual::after { top: 42px; right: 12%; left: 12%; }
/* 起點只留 stage visual 裡那一條路徑；外層的通用路徑會隨表單高度移動，
   兩條線一起出現時會像被插入的裝飾。 */
.journey-flow[data-journey-stage="start"] .journey-focus::after,
.journey-flow.is-start-stage .journey-focus::after { display: none; }
.journey-flow[data-journey-stage="start"] .booking-field,
.journey-flow.is-start-stage .booking-field { width: min(360px, 70%); height: 84px; }
.journey-flow[data-journey-stage="start"] .booking-field b,
.journey-flow[data-journey-stage="start"] .booking-field small,
.journey-flow.is-start-stage .booking-field b,
.journey-flow.is-start-stage .booking-field small { display: none; }
.journey-flow[data-journey-stage="start"] .booking-field .booking-route,
.journey-flow.is-start-stage .booking-field .booking-route { top: 41px; }
.journey-flow[data-journey-stage="start"] .booking-field .booking-node,
.journey-flow.is-start-stage .booking-field .booking-node { top: 32px; }

@media (prefers-reduced-motion: no-preference) {
  /* header → progress → scene → action：每段只播一次，最晚在 .42 秒完成。 */
  .journey-flow.is-entering .journey-flow-head { animation: journeyStageHeader .32s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .journey-flow-progress { animation: journeyStageProgress .28s .04s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .journey-stage-visual { animation: journeyStageScene .3s .08s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .journey-stage-visual::after { animation: journeySceneRoute .3s .08s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .journey-focus-copy { animation: journeyStageAction .28s .14s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .companion-field .traveller,
  .journey-flow.is-entering .booking-node-start,
  .journey-flow.is-entering .booking-node-now,
  .journey-flow.is-entering .booking-node-end { animation: journeyNodeArrive .28s .1s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .companion-field .traveller-two,
  .journey-flow.is-entering .booking-node-now { animation-delay: .14s; }
  .journey-flow.is-entering .companion-field .traveller-three,
  .journey-flow.is-entering .booking-node-end { animation-delay: .18s; }
  .journey-flow.is-entering .anchor-pin,
  .journey-flow.is-entering .prepare-beacon { animation: journeyPinLand .32s .1s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .day-beat { animation: journeyBarBuild .28s .1s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .day-beat-two { animation-delay: .14s; }
  .journey-flow.is-entering .day-beat-three { animation-delay: .18s; }
}
@keyframes journeyStageScene { from { opacity: .78; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .journey-flow.is-entering,
  .journey-flow.is-entering .journey-flow-head,
  .journey-flow.is-entering .journey-flow-progress,
  .journey-flow.is-entering .journey-stage-visual,
  .journey-flow.is-entering .journey-focus-copy { animation: none !important; transform: none !important; transition: none !important; }
}

/* 航班核對：這不是另一張登機證，而是解析結果到確認結果之間的一段路徑。
   起點／終點文字由 PDF 的真實航段提供；視覺只幫人更快確認「這段是否要寫入」。 */
.flight-review-journey {
  --flight-route: #df7134;
  --flight-route-ink: #36536a;
  --flight-route-soft: rgba(223, 113, 52, .13);
  position: relative;
  display: grid;
  gap: 14px;
  isolation: isolate;
}
.flight-review-journey::before {
  position: absolute;
  z-index: -1;
  top: 30px; right: 5%; left: 5%;
  height: min(240px, 42%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, var(--flight-route-soft), transparent 62%);
  content: "";
  pointer-events: none;
}
.flight-review-journey::after {
  position: absolute;
  z-index: -1;
  top: 34px; right: 8%; left: 8%;
  height: 1px;
  border-top: 1px dashed color-mix(in srgb, var(--flight-route) 44%, transparent);
  content: "";
  opacity: .62;
  transform: rotate(-1deg);
  transform-origin: left center;
}
.flight-review-journey.is-entering::after,
.flight-review-journey[data-flight-state="parsed"]::after { animation: flightReviewRouteReveal .62s cubic-bezier(.2,.8,.2,1) both; }
.flight-review-boarding {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 156px;
  padding: 20px clamp(18px, 3vw, 30px) 18px;
  overflow: hidden;
  border: 1px solid rgba(224, 180, 150, .55);
  border-radius: 22px;
  background: linear-gradient(108deg, rgba(255, 249, 244, .9), rgba(255, 253, 251, .98) 56%, rgba(246, 250, 251, .88));
  box-shadow: 0 16px 38px rgba(106, 65, 36, .06);
  isolation: isolate;
}
.flight-review-boarding::before {
  position: absolute;
  z-index: -1;
  top: -66px; right: -44px;
  width: 220px; height: 220px;
  border: 1px solid color-mix(in srgb, var(--flight-route) 34%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(241, 176, 130, .045), 0 0 0 60px rgba(52, 83, 106, .025);
  content: "";
}
.flight-review-boarding::after {
  position: absolute;
  z-index: -1;
  top: 50%; right: 8%; left: 8%;
  height: 1px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--flight-route) 72%, transparent) 0 6px, transparent 6px 14px);
  content: "";
  opacity: .7;
  transform: translateY(-50%);
}
.flight-review-boarding .flight-review-route {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) minmax(88px, .65fr) minmax(0, 1fr);
  gap: 14px;
}
.flight-review-boarding .flight-review-route i {
  height: 2px;
  background: linear-gradient(90deg, var(--flight-route), color-mix(in srgb, var(--flight-route-ink) 62%, var(--flight-route)));
  opacity: .92;
}
.flight-review-boarding .flight-review-route i::before {
  position: absolute;
  top: 50%; left: 0;
  width: 9px; height: 9px;
  border: 3px solid #fffdfa;
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--flight-route);
  box-shadow: 0 0 0 5px var(--flight-route-soft);
  content: "";
  transform: translate(-1px, -50%);
}
.flight-review-boarding .flight-review-route i::after {
  width: 8px; height: 8px;
  border-top-color: var(--flight-route-ink);
  border-right-color: var(--flight-route-ink);
}
.flight-review-boarding .flight-review-route b {
  font-size: clamp(23px, 3vw, 34px);
  font-variant-numeric: tabular-nums;
}
.flight-review-boarding-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 5px 12px;
}
.flight-review-boarding-top .flight-review-kicker { grid-column: 1 / -1; color: color-mix(in srgb, var(--flight-route) 82%, #74432a); }
.flight-review-boarding-top > strong { color: #433126; font-size: 14px; letter-spacing: .045em; }
.flight-review-boarding-top > small { color: #887769; font-size: 11px; text-align: right; }
.flight-review-boarding .flight-review-route > span { display: grid; gap: 2px; min-width: 0; }
.flight-review-boarding .flight-review-route > span:last-child { text-align: right; }
.flight-review-boarding .flight-review-route > span small { overflow: hidden; color: #87776a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.flight-review-boarding .flight-review-cities { position: relative; z-index: 1; }
.flight-review-boarding .flight-review-times {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 5vw, 42px);
  padding-top: 12px;
  border-top-color: rgba(222, 190, 168, .68);
}
.flight-review-boarding .flight-review-times > span:last-child { text-align: right; }
.flight-review-boarding .flight-review-times strong { color: #4d4036; font-size: 13px; font-variant-numeric: tabular-nums; }
.flight-review-boarding .flight-review-times small { color: #8b7b6d; font-size: 10px; line-height: 1.35; }
.flight-review-boarding .flight-review-meta,
.flight-review-boarding .flight-review-seat { position: relative; z-index: 1; }
.flight-review-facts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 2px;
}
.flight-review-facts > span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(225, 209, 196, .8);
  border-radius: 999px;
  background: rgba(255, 253, 251, .68);
  color: #756458;
  font-size: 11px;
}
.flight-review-facts > span > b { color: #9a887b; font-size: 10px; font-weight: 800; letter-spacing: .055em; }
.flight-review-facts .flight-review-seat { border-color: color-mix(in srgb, var(--flight-route) 29%, #e9ddd3); color: color-mix(in srgb, var(--flight-route) 74%, #7d533a); }
.flight-review-boarding-travellers {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(222, 196, 178, .72);
  color: #74665b;
  font-size: 11px;
  line-height: 1.45;
}
.flight-review-boarding-travellers > b { color: #5d4a3d; font-size: 11px; white-space: nowrap; }
.flight-review-confirm-cue {
  position: relative;
  z-index: 1;
  margin-top: 1px;
  color: color-mix(in srgb, var(--flight-route) 76%, #6c5f55);
  font-size: 10px;
  line-height: 1.5;
}

/* 複選與確認只推進現有資料，不把勾選誤導成已完成登機或已確定選位。 */
.flight-review-journey:has(.flight-review-select > input:checked) { --flight-route: #e96f2d; --flight-route-soft: rgba(233, 111, 45, .16); }
.flight-review-journey:has(.flight-review-select > input:checked) .flight-review-boarding,
.flight-review-boarding.is-confirmed,
.flight-review-boarding[data-confirmed="true"] {
  border-color: rgba(227, 132, 77, .65);
  box-shadow: 0 18px 42px rgba(144, 77, 35, .09);
}
.flight-review-journey:has(.flight-review-select > input:checked) .flight-review-boarding::after,
.flight-review-boarding.is-confirmed::after,
.flight-review-boarding[data-confirmed="true"]::after { opacity: 1; }
.flight-review-journey:has(.flight-review-select > input:checked) .flight-review-boarding .flight-review-route i::before,
.flight-review-boarding.is-confirmed .flight-review-route i::before,
.flight-review-boarding[data-confirmed="true"] .flight-review-route i::before { animation: flightReviewCheckpoint .38s cubic-bezier(.2,.8,.2,1) both; }
.flight-review-boarding:focus-within { border-color: color-mix(in srgb, var(--flight-route) 68%, #eaded4); box-shadow: 0 0 0 4px var(--flight-route-soft), 0 18px 42px rgba(144, 77, 35, .09); }

/* 每段航班都有明確的可寫入狀態；差異不是最後送出時才用錯誤訊息攔下。 */
.flight-review-data-state {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -2px 2px 0;
  color: #776b60;
  font-size: 12px;
  line-height: 1.55;
}
.flight-review-data-state::before {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: .58em;
  border-radius: 50%;
  background: #b5aa9e;
  content: "";
}
.flight-review-data-state.is-matched { color: #39705f; }
.flight-review-data-state.is-matched::before { background: #55a486; }
.flight-review-data-state.is-confirmed { color: #39705f; }
.flight-review-data-state.is-confirmed::before { background: #55a486; }
.flight-review-data-state.is-manual { color: #736756; }
.flight-review-data-state.is-manual::before { background: #a58e67; }
.flight-review-data-state.is-blocked { color: #a84b25; font-weight: 700; }
.flight-review-data-state.is-blocked::before { background: #e96f2d; box-shadow: 0 0 0 4px rgba(233, 111, 45, .12); }
.flight-review-traveller-guard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid rgba(233, 111, 45, .42);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 245, 237, .98), rgba(255, 250, 246, .76));
  color: #643c2b;
  cursor: pointer;
}
.flight-review-traveller-guard input { margin: 3px 0 0; accent-color: #e96f2d; }
.flight-review-traveller-guard span { display: grid; gap: 3px; }
.flight-review-traveller-guard b { font-size: 13px; line-height: 1.35; }
.flight-review-traveller-guard small { color: #806d61; font-size: 11px; line-height: 1.5; }
.flight-review-traveller-guard:has(input:focus-visible) { outline: 3px solid rgba(233, 111, 45, .24); outline-offset: 2px; }
.flight-review-journey.is-matched .flight-review-traveller-guard,
.flight-review-journey.is-manual .flight-review-traveller-guard,
.flight-review-journey.is-unselected .flight-review-traveller-guard { display: none; }
.flight-review-journey.is-unselected { opacity: .58; }
.flight-review-journey.is-unselected .flight-review-data-state { color: #8a8077; }
.flight-review-journey.is-unselected .flight-review-data-state::before { background: #b8afa5; box-shadow: none; }
.flight-review-journey.is-blocked .flight-review-boarding { border-color: rgba(233, 111, 45, .54); box-shadow: 0 12px 28px rgba(144, 77, 35, .08); }

@keyframes flightReviewRouteReveal {
  from { opacity: 0; transform: rotate(-1deg) scaleX(.16); }
  to { opacity: .62; transform: rotate(-1deg) scaleX(1); }
}
@keyframes flightReviewCheckpoint {
  0% { transform: translate(-1px, -50%) scale(.65); box-shadow: 0 0 0 0 var(--flight-route-soft); }
  72% { transform: translate(-1px, -50%) scale(1.12); box-shadow: 0 0 0 11px transparent; }
  100% { transform: translate(-1px, -50%) scale(1); box-shadow: 0 0 0 5px var(--flight-route-soft); }
}

@media (max-width: 560px) {
  .flight-review-journey { gap: 10px; }
  .flight-review-journey::before { top: 12px; right: -10%; left: -10%; height: 210px; }
  .flight-review-boarding { min-height: 0; padding: 17px 15px 15px; border-radius: 18px; }
  .flight-review-boarding::before { top: -95px; right: -92px; }
  .flight-review-boarding .flight-review-route { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 8px; }
  .flight-review-boarding .flight-review-route b { font-size: 21px; }
  .flight-review-boarding .flight-review-times { grid-template-columns: 1fr 1fr; gap: 12px; }
  .flight-review-boarding-top > small { max-width: 122px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .flight-review-facts { gap: 6px; }
  .flight-review-facts > span { padding: 4px 7px; }
  .flight-review-boarding-travellers { grid-template-columns: 1fr; gap: 2px; }
  .flight-review-data-state { margin-right: 0; font-size: 11px; }
  .flight-review-traveller-guard { gap: 8px; padding: 11px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .flight-review-journey *, .flight-review-journey *::before, .flight-review-journey *::after { animation: none !important; transition: none !important; }
}

/* 已訂交通／PDF 核對是新手第一次會遇到的高風險資料輸入。它不能長得像
   一般檔案欄位後面接一串按鈕：先選文件、再讀取、最後逐段確認，三個動作
   要在掃視時就能分開。這些規則刻意只限於航班匯入表單，不影響一般附件。 */
.planner-form[data-journey-itinerary-form] {
  gap: 15px;
  padding-bottom: 6px;
}
.planner-form[data-journey-itinerary-form] > label:has(input[type="file"]) {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px dashed rgba(213, 132, 82, .58);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255, 247, 240, .94), rgba(255, 253, 250, .88));
  color: #573f31;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.planner-form[data-journey-itinerary-form] > label:has(input[type="file"]):hover {
  border-color: rgba(226, 105, 41, .82);
  background: linear-gradient(135deg, #fff5ed, #fffdfb);
}
.planner-form[data-journey-itinerary-form] > label:has(input[type="file"]:focus-visible) {
  border-color: #e96f2d;
  box-shadow: 0 0 0 4px rgba(233, 111, 45, .16), inset 0 1px 0 rgba(255, 255, 255, .78);
}
.planner-form[data-journey-itinerary-form] input[type="file"] {
  min-height: 51px;
  border: 1px solid rgba(220, 198, 181, .92);
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  padding: 7px 9px;
  color: #76695f;
  font-size: 12px;
  line-height: 1.35;
  cursor: pointer;
}
.planner-form[data-journey-itinerary-form] input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 0;
  border-radius: 9px;
  background: #e96f2d;
  padding: 8px 11px;
  color: #fff;
  font: 800 12px inherit;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.planner-form[data-journey-itinerary-form] input[type="file"]:hover::file-selector-button { background: #cf5d22; }
.planner-form[data-journey-itinerary-form] input[type="file"]:active::file-selector-button { transform: scale(.97); }
.planner-form[data-journey-itinerary-form] [data-journey-booking-roster] {
  position: relative;
  margin: -4px 2px 0;
  padding-left: 13px;
  color: #76685d;
}
.planner-form[data-journey-itinerary-form] [data-journey-booking-roster]::before {
  position: absolute;
  top: .48em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e96f2d;
  box-shadow: 0 0 0 4px rgba(233, 111, 45, .1);
  content: "";
}
.planner-form[data-journey-itinerary-form] .journey-import-preview {
  min-height: 72px;
  border: 1px solid #eadfd5;
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255, 253, 250, .9), rgba(252, 248, 244, .86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}
.planner-form[data-journey-itinerary-form] .journey-import-preview > .planner-detail-empty {
  display: flex;
  align-items: center;
  min-height: 70px;
  margin: 0;
  padding: 13px 14px 13px 37px;
  color: #817367;
  background: linear-gradient(90deg, rgba(233, 111, 45, .14) 0 3px, transparent 3px);
  font-size: 12px;
  line-height: 1.55;
}
.planner-form[data-journey-itinerary-form] .journey-import-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 3px 0 0;
}
.planner-form[data-journey-itinerary-form] .journey-import-actions .secondary {
  display: grid;
  min-height: 47px;
  place-items: center;
  padding: 10px 12px;
  border-color: #e2cbbb;
  background: #fffdfb;
  color: #614a3b;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}
.planner-form[data-journey-itinerary-form] .journey-import-actions [data-journey-read-pdf] {
  border-color: rgba(233, 111, 45, .58);
  background: #fff6ef;
  color: #ad4e23;
}
.planner-form[data-journey-itinerary-form] .journey-import-actions [data-journey-manual-reservation] { grid-column: 1 / -1; }
.planner-form[data-journey-itinerary-form] .journey-import-actions .secondary:disabled {
  border-color: #e8dfd7;
  background: #f5f1ed;
  color: #9b9087;
  opacity: 1;
}
.planner-form[data-journey-itinerary-form] .flight-review-leg {
  scroll-margin-block: 20px;
  transition: opacity .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.planner-form[data-journey-itinerary-form] .flight-review-leg.is-selected {
  border-color: rgba(233, 111, 45, .45);
  box-shadow: 0 11px 24px rgba(116, 66, 35, .055);
}
.planner-form[data-journey-itinerary-form] .flight-review-leg.is-blocked {
  border-color: rgba(213, 87, 35, .68);
  box-shadow: 0 0 0 3px rgba(233, 111, 45, .09), 0 11px 24px rgba(116, 66, 35, .055);
}
.planner-form[data-journey-itinerary-form] > .save {
  position: sticky;
  bottom: -1px;
  z-index: 3;
  min-height: 52px;
  margin: 2px -1px -1px;
  border: 4px solid var(--bg);
  box-shadow: 0 -12px 22px rgba(255, 252, 248, .94), 0 8px 20px rgba(105, 64, 37, .1);
}
.planner-form[data-journey-itinerary-form] > .save:disabled { box-shadow: 0 -12px 22px rgba(255, 252, 248, .94); }
@media (max-width: 560px) {
  .planner-form[data-journey-itinerary-form] > label:has(input[type="file"]) { padding: 12px; border-radius: 15px; }
  .planner-form[data-journey-itinerary-form] input[type="file"] { min-height: 48px; }
  .planner-form[data-journey-itinerary-form] .journey-import-actions { grid-template-columns: 1fr; }
  .planner-form[data-journey-itinerary-form] .journey-import-actions [data-journey-manual-reservation] { grid-column: auto; }
  .planner-form[data-journey-itinerary-form] .journey-import-actions .secondary { min-height: 44px; }
}

/* 出品檢核：捲動條不能在內容變長時才突然擠動整個規劃畫面；封面圖一旦
   到位也必須立刻停止骨架動畫。兩者都是資料載入時常被誤認為「畫面閃一下」
   的來源。只在真正切換步驟時預告瀏覽器即將變動的元素，避免靜置頁面持續
   佔用合成層。 */
.planner-body { scrollbar-gutter: stable; }
.trip-cover-loading { opacity: .88; transition: opacity .16s ease; }
.trip-cover.has-image .trip-cover-loading { opacity: 0; animation: none; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .journey-flow.is-entering .journey-flow-head,
  .journey-flow.is-entering .journey-flow-progress,
  .journey-flow.is-entering .journey-stage-visual,
  .journey-flow.is-entering .journey-focus-copy { will-change: transform, opacity; }
}
@media (prefers-reduced-motion: reduce) {
  .planner-body { scrollbar-gutter: auto; }
  .trip-cover-loading { transition: none; }
}

/* 規劃主線（住宿／固定安排／每日安排）出品修整：這三步的目標不是塞滿
   表單，而是每次只看懂「現在要決定甚麼」。保留既有的場景轉場，不新增常駐
   插圖或循環動畫；狀態只在使用者主動切換、聚焦或確認時才給出回應。 */
.journey-inline-stay,
.journey-inline-anchors,
.journey-inline-day {
  isolation: isolate;
}
.journey-all-days-skeleton {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 14px;
  border: 1px solid rgba(221, 201, 184, .78);
  border-radius: 14px;
  background: rgba(255, 252, 248, .68);
}
.journey-all-days-skeleton > summary {
  color: #745f4e;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.journey-all-days-skeleton[open] > summary { color: #a2552d; }
.journey-all-days-skeleton > p {
  margin: 0;
  color: #7b6d60;
  font-size: 12px;
  line-height: 1.58;
}
.journey-all-days-skeleton > .secondary { width: fit-content; }
@media (max-width: 640px) {
  .journey-all-days-skeleton > .secondary { width: 100%; }
}
.journey-inline-stay > .planner-detail-meta,
.journey-inline-day > .planner-detail-meta,
.journey-inline-anchors > .planner-detail-meta {
  position: relative;
  padding: 12px 14px 12px 30px;
  border-radius: 0 12px 12px 0;
  line-height: 1.55;
}
.journey-inline-stay > .planner-detail-meta::before,
.journey-inline-day > .planner-detail-meta::before,
.journey-inline-anchors > .planner-detail-meta::before {
  position: absolute;
  top: 18px;
  left: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: "";
}
.journey-inline-stay > .planner-detail-meta::before { background: #b87945; }
.journey-inline-day > .planner-detail-meta::before { background: #4a6f88; }
.journey-inline-anchors > .planner-detail-meta::before { background: #b87945; }

/* 一個階段只提高一個動作；其餘選項仍可找到，但不會和主按鈕爭奪視線。 */
.journey-inline-stay .journey-inline-actions .save,
.journey-inline-anchors .journey-inline-actions .save,
.journey-inline-day .journey-inline-actions .save {
  min-height: 48px;
  box-shadow: 0 9px 18px rgba(132, 76, 39, .12);
}
.journey-inline-stay .journey-inline-actions .secondary,
.journey-inline-anchors .journey-inline-actions .secondary,
.journey-inline-day .journey-inline-actions .secondary {
  min-height: 42px;
  border-color: rgba(210, 187, 169, .9);
  background: rgba(255, 253, 250, .86);
}
.journey-inline-stay .journey-inline-actions .text-action,
.journey-inline-anchors .journey-inline-actions .text-action,
.journey-inline-day .journey-inline-actions .text-action {
  color: #856c5a;
  font-weight: 700;
}
.journey-inline-stay .journey-inline-actions .save:hover,
.journey-inline-anchors .journey-inline-actions .save:hover,
.journey-inline-day .journey-inline-actions .save:hover {
  box-shadow: 0 12px 24px rgba(132, 76, 39, .16);
}

/* 固定錨點是「請檢查」而非另一組卡片。整段可點、日期與名稱可快速掃讀。 */
.journey-inline-anchor-summary {
  padding: 15px;
  border-color: rgba(203, 174, 148, .72);
  background: linear-gradient(115deg, rgba(255, 251, 247, .98), rgba(252, 247, 241, .86));
  box-shadow: 0 7px 18px rgba(105, 70, 45, .035);
}
.journey-inline-anchor-list { gap: 0; }
.journey-inline-anchor-row {
  position: relative;
  min-height: 52px;
  padding: 11px 25px 11px 2px;
  transition: background-color .16s ease, color .16s ease;
}
.journey-inline-anchor-row::after {
  position: absolute;
  top: 50%;
  right: 3px;
  color: #b87945;
  content: "›";
  font-size: 19px;
  line-height: 1;
  transform: translateY(-50%);
}
.journey-inline-anchor-row b { line-height: 1.4; }
.journey-inline-anchor-row:hover,
.journey-inline-anchor-row:focus-visible { background: rgba(255, 244, 235, .72); outline: 0; }
.journey-inline-anchor-row:hover::after,
.journey-inline-anchor-row:focus-visible::after { transform: translate(2px, -50%); }

/* 每日安排先說清楚可不可以留白；展開的餐食／住宿選項採平靜的工具列，不
   以四張同權重卡片搶走「先決定一件事」的焦點。 */
.journey-inline-day-alternatives {
  border-top-color: rgba(207, 197, 185, .82);
}
.journey-inline-day-alternatives > summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: #695d54;
}
.journey-inline-day-alternatives > summary:focus-visible {
  outline: 3px solid rgba(74, 111, 136, .22);
  outline-offset: 3px;
}
.journey-day-primary {
  border-color: rgba(222, 166, 122, .72);
  box-shadow: 0 14px 28px rgba(130, 78, 46, .06);
}
.journey-day-primary.is-continuing {
  border-color: rgba(74, 111, 136, .35);
  background: linear-gradient(135deg, #f7fbfd, #fffdfb);
}
.journey-day-primary.is-continuing .eyebrow,
.journey-day-primary.is-continuing .save { --journey-accent: #4a6f88; }
.journey-day-primary.is-continuing .eyebrow { color: #4a6f88; }
.journey-day-optional[open] {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(222, 212, 200, .82);
  border-radius: 14px;
  background: rgba(255, 253, 250, .72);
}
.journey-day-optional[open] .journey-day-options {
  margin-bottom: 0;
}
.journey-day-optional[open] .journey-day-option {
  min-height: 82px;
  border-color: rgba(224, 212, 201, .82);
  background: rgba(255, 255, 255, .72);
}
.journey-day-optional[open] .journey-day-option span { color: #a8653f; }

/* 住宿、預約與交通輸入的底部確認要一直可辨識。這是既有表單的同一個
   儲存語意，不用新增第二個按鈕，也不在閱讀時強制捲動。 */
.planner-form[data-journey-manual-stay-form] > .save,
.planner-form[data-journey-manual-reservation-form] > .save,
.planner-form[data-journey-manual-transport-form] > .save {
  position: sticky;
  z-index: 2;
  bottom: -1px;
  min-height: 52px;
  margin: 4px -1px -1px;
  border: 4px solid var(--bg);
  box-shadow: 0 -12px 22px rgba(255, 252, 248, .94), 0 8px 20px rgba(105, 64, 37, .1);
}
.planner-form[data-journey-manual-stay-form] .check-row,
.planner-form[data-journey-manual-reservation-form] .check-row,
.planner-form[data-journey-manual-transport-form] .check-row {
  padding: 10px 11px;
  border: 1px solid rgba(228, 217, 207, .86);
  border-radius: 12px;
  background: rgba(255, 253, 250, .72);
}
.planner-form[data-journey-manual-stay-form] .journey-account-picker,
.planner-form[data-journey-manual-reservation-form] .journey-account-picker,
.planner-form[data-journey-manual-transport-form] .journey-account-picker {
  padding: 13px;
  border: 1px solid rgba(229, 217, 206, .88);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 253, 251, .9), rgba(255, 248, 242, .68));
}
.planner-form[data-journey-manual-stay-form] .journey-account-picker > p,
.planner-form[data-journey-manual-reservation-form] .journey-account-picker > p,
.planner-form[data-journey-manual-transport-form] .journey-account-picker > p {
  margin: 6px 0 10px;
  color: #7d6e62;
  font-size: 11px;
  line-height: 1.55;
}

/* 日期草案在窄畫面以可預期的橫向時間帶顯示；選中的日期保持在可視範圍，
   但不做自動滑動或會令人迷路的動畫。 */
.planner-date-strip {
  scroll-padding-inline: 10px;
  scroll-snap-type: inline proximity;
}
.planner-date {
  scroll-snap-align: start;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.planner-date:focus-visible { outline-offset: 3px; }

@media (max-width: 560px) {
  .journey-inline-stay > .planner-detail-meta,
  .journey-inline-day > .planner-detail-meta,
  .journey-inline-anchors > .planner-detail-meta { padding-right: 12px; }
  .journey-inline-anchor-summary { padding: 13px; }
  .journey-inline-anchor-row { min-height: 48px; padding-right: 23px; }
  .journey-inline-anchor-row span { max-width: none; line-height: 1.45; }
  .journey-day-optional[open] { padding: 12px; }
  .journey-day-optional[open] .journey-day-option { min-height: 72px; }
  .planner-form[data-journey-manual-stay-form] > .save,
  .planner-form[data-journey-manual-reservation-form] > .save,
  .planner-form[data-journey-manual-transport-form] > .save {
    bottom: calc(4px + env(safe-area-inset-bottom));
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-inline-anchor-row,
  .journey-inline-anchor-row::after,
  .planner-date { transition: none; }
}

/* 最終手機／可及性稽核：鍵盤焦點、手指點擊與降低動態效果必須是同一套
   體驗。這一層不改變資料或流程，只補齊在窄螢幕、觸控與系統減少動態設定
   下容易被漏掉的互動回饋。 */
.travel-planner :is(button, a, summary):focus-visible,
.overlay :is(button, a, summary):focus-visible,
.travel-update-notice button:focus-visible {
  outline: 3px solid #a94b1c;
  outline-offset: 3px;
}
/* 文字／日期／下拉欄位已各自有貼合圓角的 box-shadow 焦點樣式（見上方
   .form / .planner-form / .planning-step-form 規則），這裡只補 :not(radio/checkbox)
   以外沒有專屬樣式的極少數欄位，用途一致但外框改用不超出容器的窄版本。 */
.travel-planner input:not([type="radio"]):not([type="checkbox"]):focus-visible,
.overlay input:not([type="radio"]):not([type="checkbox"]):focus-visible,
.travel-planner textarea:focus-visible, .overlay textarea:focus-visible,
.travel-planner select:focus-visible, .overlay select:focus-visible {
  outline: none;
  border-color: #ed6d2c;
  box-shadow: 0 0 0 3px #fff0e6;
}

/* 觸控裝置沒有可靠的 hover；不要讓點過一次的卡片或動作停在「浮起」狀態。
   主按鈕仍用按下狀態回饋，避免把靜止頁面做得像持續在動。 */
@media (hover: none) {
  .trip-card:hover,
  .trip-card:hover .trip-cover,
  .journey-inline-stay .journey-inline-actions .save:hover,
  .journey-inline-anchors .journey-inline-actions .save:hover,
  .journey-inline-day .journey-inline-actions .save:hover,
  .journey-inline-anchor-row:hover::after {
    box-shadow: none;
    transform: none;
  }
  .journey-inline-anchor-row:hover { background: transparent; }
}

/* 320px 是最窄的正式支援寬度：頂欄只保留可辨識的三個控制，內容區不因
   安全區、長標題或系統字級而產生橫向捲動。 */
@media (max-width: 360px) {
  .travel-planner,
  .planner-shell { min-width: 0; }
  .planner-top { gap: 4px; padding-right: 10px; padding-left: 10px; }
  .planner-top h2 { max-width: calc(100vw - 142px); font-size: 16px; }
  .planner-top-actions { gap: 1px; }
  .planner-top-link,
  .planner-top .x { min-width: 34px; min-height: 34px; width: 34px; height: 34px; }
  .planner-body { padding-right: 11px; padding-left: 11px; }
  .journey-flow { padding-right: 0; padding-left: 0; }
  .journey-flow-head h3 { font-size: 27px; }
  .journey-focus { padding-right: 3px; padding-left: 3px; }
  .planner-drawer { padding-right: 14px; padding-left: 14px; }
  .planner-drawer > .planner-drawer-head { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
  .flight-review-boarding { padding-right: 13px; padding-left: 13px; }
  .flight-review-boarding .flight-review-route { grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); gap: 6px; }
  .flight-review-boarding .flight-review-route b { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .travel-planner *,
  .travel-planner *::before,
  .travel-planner *::after,
  .overlay *,
  .overlay *::before,
  .overlay *::after,
  .travel-update-notice * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .travel-planner :is(button, a, input, textarea, select, summary):focus-visible,
  .overlay :is(button, a, input, textarea, select, summary):focus-visible { outline: 3px solid CanvasText; }
  .journey-flow-progress li.is-current::before,
  .planner-date.on { forced-color-adjust: auto; }
}

/* v6 規劃動態：這一層把視覺做成整個規劃舞台的空間，而不是放在旁邊的
   小插圖。所有場景共用同一條航線語言；只在使用者真的抵達新步驟時演出一
   次。這保留 FocusFlight 類產品的「正在啟程」感，但不捏造任何航班資料。 */
.journey-focus {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 34px;
  padding: clamp(24px, 4vw, 48px);
  background:
    radial-gradient(ellipse at 4% 22%, color-mix(in srgb, var(--journey-accent) 13%, transparent), transparent 34%),
    radial-gradient(ellipse at 92% 78%, color-mix(in srgb, var(--journey-ink) 8%, transparent), transparent 39%),
    linear-gradient(118deg, rgba(255,250,246,.96), rgba(255,253,251,.88) 57%, rgba(255,248,242,.93));
}
.journey-focus::before {
  z-index: -3;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--journey-accent) 20%, #eadfd6);
  border-radius: inherit;
  background: transparent;
}
.journey-focus::after {
  z-index: -2;
  top: 58%;
  right: -12%;
  left: -12%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--journey-accent) 40%, transparent) 14%, color-mix(in srgb, var(--journey-ink) 38%, transparent) 58%, transparent 88%);
  transform: rotate(-4deg);
}
.journey-stage-visual {
  z-index: 0;
  min-height: 324px;
  overflow: visible;
}
.journey-stage-visual::before {
  z-index: -2;
  width: min(510px, 130%);
  height: 294px;
  border: 1px solid color-mix(in srgb, var(--journey-accent) 17%, transparent);
  border-radius: 50% 46% 54% 48%;
  background:
    radial-gradient(ellipse at 54% 49%, rgba(255,255,255,.84) 0 13%, color-mix(in srgb, var(--journey-accent) 10%, transparent) 14% 34%, transparent 62%);
  box-shadow: inset 0 0 58px rgba(255,255,255,.6);
  transform: rotate(-8deg);
}
.journey-stage-visual::after { display: none; }
.journey-scene-photo {
  position: absolute;
  z-index: 0;
  inset: 10% 5% 9%;
  display: block;
  overflow: hidden;
  border-radius: 48% 52% 46% 54%;
  background-position: center;
  background-size: cover;
  filter: saturate(.76) contrast(.88) brightness(1.18);
  opacity: 0;
  transform: rotate(-8deg) scale(.97);
  transition: opacity .45s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.journey-scene-photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(128deg, rgba(255,251,247,.9), rgba(255,249,244,.3) 46%, rgba(255,247,239,.82));
  content: "";
}
.journey-scene-photo.has-image { opacity: .32; transform: rotate(-8deg) scale(1); }
.journey-stage-visual .companion-field,
.journey-stage-visual .booking-field,
.journey-stage-visual .anchor-field,
.journey-stage-visual .day-field,
.journey-stage-visual .prepare-field { z-index: 2; }

/* 同行人：三個等距節點代表可加入的名單。這是名單關係，不以無關的彗星、
   花草或假通知裝飾。 */
.visual-companions .companion-field { width: min(370px, 100%); height: 196px; }
.visual-companions .manifest-route { top: 90px; right: 13%; left: 13%; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--journey-accent) 70%, transparent), color-mix(in srgb, var(--journey-ink) 65%, transparent)); }
.visual-companions .traveller { top: 66px; width: 52px; height: 52px; border-width: 7px; box-shadow: 0 13px 28px rgba(83, 51, 30, .15); }
.visual-companions .traveller::after { top: 12px; left: 12px; width: 14px; height: 14px; }
.visual-companions .traveller-one { left: calc(16.666667% - 26px); }
.visual-companions .traveller-two { left: calc(50% - 26px); }
.visual-companions .traveller-three { left: calc(83.333333% - 26px); }

/* 已訂資料：由一張半透明「核對面」穿越路徑；飛行記號是抽象機翼而非假的
   登機證。沒有航班資料時也不會顯示任何座號、航線或航空公司。 */
.visual-booking .booking-field { width: min(350px, 100%); height: 206px; }
.visual-booking .booking-route { top: 105px; right: 26px; left: 26px; background: linear-gradient(90deg, color-mix(in srgb, var(--journey-accent) 70%, transparent), color-mix(in srgb, var(--journey-ink) 66%, transparent)); }
.visual-booking .booking-node { top: 94px; width: 23px; height: 23px; border-width: 5px; box-shadow: 0 9px 22px rgba(45, 75, 105, .14); }
.visual-booking .booking-node-start { left: 24px; }.visual-booking .booking-node-now { left: calc(50% - 11px); }.visual-booking .booking-node-end { right: 24px; }
.visual-booking .boarding-ribbon { position: absolute; z-index: -1; top: 52px; left: calc(50% - 68px); width: 136px; height: 91px; border: 1px solid color-mix(in srgb, var(--journey-ink) 24%, transparent); border-radius: 21px 42px 20px 38px; background: linear-gradient(135deg, rgba(255,255,255,.95), color-mix(in srgb, var(--journey-ink) 8%, #f8fbfc)); box-shadow: 0 20px 34px rgba(41, 65, 85, .13); transform: perspective(520px) rotateX(54deg) rotateZ(-18deg); }
.visual-booking .boarding-ribbon::before,
.visual-booking .boarding-ribbon::after { position: absolute; left: 17px; width: 64%; height: 1px; background: color-mix(in srgb, var(--journey-ink) 29%, transparent); content: ""; }
.visual-booking .boarding-ribbon::before { top: 29px; }.visual-booking .boarding-ribbon::after { top: 44px; width: 42%; }
.visual-booking .boarding-plane-mark { position: absolute; z-index: 3; top: 76px; left: calc(50% - 15px); width: 30px; height: 14px; border-radius: 86% 12% 66% 18%; background: var(--journey-ink); transform: rotate(-18deg); box-shadow: 10px 6px 0 -6px var(--journey-accent), -10px 6px 0 -6px var(--journey-accent); }
.visual-booking .booking-field b { top: 8px; }.visual-booking .booking-field small { bottom: 2px; }

/* 固定錨點與每日安排各有自己的狀態：落點會向外展開、一天的三個時段會
   從同一條時間軸排列。這些都是規劃資訊的關係，不是景點圖片的替代品。 */
.visual-anchors .anchor-field { width: min(352px, 100%); height: 202px; }
.visual-anchors .anchor-route-one { top: 93px; right: 18px; left: 20px; }.visual-anchors .anchor-route-two { top: 111px; right: 42px; left: 42px; }.visual-anchors .anchor-route-three { position: absolute; top: 80px; right: 80px; left: 78px; height: 1px; background: color-mix(in srgb, var(--journey-ink) 24%, transparent); transform: rotate(22deg); }
.visual-anchors .anchor-pin { top: 75px; left: calc(50% - 17px); width: 34px; height: 34px; box-shadow: 0 0 0 11px color-mix(in srgb, var(--journey-accent) 13%, transparent); }
.visual-anchors .anchor-radius { position: absolute; top: 50px; left: calc(50% - 42px); width: 84px; height: 84px; border: 1px solid color-mix(in srgb, var(--journey-accent) 36%, transparent); border-radius: 50%; opacity: .66; }
.visual-anchors .anchor-field b { top: 5px; }.visual-anchors .anchor-field small { bottom: 0; }
.visual-days .day-field { position: relative; width: min(350px, 100%); height: 204px; padding: 48px 42px 37px; gap: clamp(28px, 7vw, 48px); }
.visual-days .day-time-line { position: absolute; top: 118px; right: 18px; left: 18px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--journey-accent) 42%, transparent), color-mix(in srgb, var(--journey-ink) 38%, transparent)); }
.visual-days .day-beat { z-index: 2; width: 39px; box-shadow: 0 12px 20px rgba(71, 57, 46, .11); }
.visual-days .day-route { top: 36px; left: calc(50% - 6px); }
.visual-days .day-field b { top: 4px; left: 50%; transform: translateX(-50%); white-space: nowrap; }.visual-days .day-field small { bottom: 0; }
.visual-prepare .prepare-field { width: min(350px, 100%); height: 202px; }
.visual-prepare .prepare-ticket { position: absolute; top: 53px; width: 65px; height: 88px; border: 1px solid color-mix(in srgb, var(--journey-accent) 26%, transparent); border-radius: 14px; background: linear-gradient(135deg, #fffefa, color-mix(in srgb, var(--journey-accent) 7%, #fffaf5)); box-shadow: 0 12px 22px rgba(79, 56, 38, .08); }
.visual-prepare .prepare-ticket::after { position: absolute; top: 19px; right: 12px; left: 12px; height: 1px; background: color-mix(in srgb, var(--journey-accent) 42%, transparent); content: ""; }
.visual-prepare .prepare-ticket-one { left: 50px; transform: rotate(-12deg); }.visual-prepare .prepare-ticket-two { right: 50px; transform: rotate(12deg); }
.visual-prepare .prepare-beacon { z-index: 3; top: 65px; left: calc(50% - 21px); }.visual-prepare .prepare-route { top: 91px; right: 35px; left: 35px; }.visual-prepare .prepare-field b { top: 4px; left: 50%; transform: translateX(-50%); white-space: nowrap; }.visual-prepare .prepare-field small { bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .journey-flow.is-entering .journey-scene-photo.has-image { animation: journeyCoverArrive .82s .08s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .visual-booking .boarding-ribbon { animation: journeyBoardingRibbon .7s .12s cubic-bezier(.17,.82,.25,1) both; }
  .journey-flow.is-entering .visual-booking .boarding-plane-mark { animation: journeyPlanePass .68s .28s cubic-bezier(.17,.82,.25,1) both; }
  .journey-flow.is-entering .visual-anchors .anchor-radius { animation: journeyRadiusOpen .64s .22s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .visual-days .day-time-line { animation: journeyTimelineDraw .58s .17s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .visual-prepare .prepare-ticket-one { animation: journeyTicketInLeft .56s .16s cubic-bezier(.2,.8,.2,1) both; }
  .journey-flow.is-entering .visual-prepare .prepare-ticket-two { animation: journeyTicketInRight .56s .25s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes journeyCoverArrive { from { opacity: 0; transform: rotate(-12deg) scale(.9); } to { opacity: .32; transform: rotate(-8deg) scale(1); } }
@keyframes journeyBoardingRibbon { from { opacity: 0; transform: perspective(520px) rotateX(70deg) rotateZ(-35deg) translateY(26px); } to { opacity: 1; transform: perspective(520px) rotateX(54deg) rotateZ(-18deg) translateY(0); } }
@keyframes journeyPlanePass { from { opacity: 0; transform: translate(-30px, 14px) rotate(-26deg) scale(.72); } to { opacity: 1; transform: translate(0, 0) rotate(-18deg) scale(1); } }
@keyframes journeyRadiusOpen { from { opacity: 0; transform: scale(.32); } to { opacity: .66; transform: scale(1); } }
@keyframes journeyTimelineDraw { from { transform: scaleX(.14); transform-origin: left; opacity: 0; } to { transform: scaleX(1); transform-origin: left; opacity: 1; } }
@keyframes journeyTicketInLeft { from { opacity: 0; transform: translate(28px, 14px) rotate(-24deg); } to { opacity: 1; transform: translate(0, 0) rotate(-12deg); } }
@keyframes journeyTicketInRight { from { opacity: 0; transform: translate(-28px, 14px) rotate(24deg); } to { opacity: 1; transform: translate(0, 0) rotate(12deg); } }

@media (max-width: 760px) {
  .journey-focus { border-radius: 24px; padding: 24px 16px 18px; }
  .journey-stage-visual { min-height: 215px; }
  .journey-stage-visual::before { width: 330px; height: 214px; }
  .journey-scene-photo { inset: 12% 7% 10%; }
  .visual-companions .companion-field { width: 290px; height: 166px; }
  .visual-companions .traveller { top: 55px; width: 43px; height: 43px; border-width: 6px; }
  .visual-companions .traveller-one { left: calc(16.666667% - 22px); }.visual-companions .traveller-two { left: calc(50% - 22px); }.visual-companions .traveller-three { left: calc(83.333333% - 22px); }
  .visual-companions .manifest-route { top: 76px; }
  .visual-booking .booking-field, .visual-anchors .anchor-field, .visual-days .day-field, .visual-prepare .prepare-field { width: 282px; height: 174px; }
  .visual-booking .booking-route { top: 88px; }.visual-booking .booking-node { top: 77px; }.visual-booking .boarding-ribbon { top: 41px; }.visual-booking .boarding-plane-mark { top: 62px; }
  .visual-anchors .anchor-route-one { top: 79px; }.visual-anchors .anchor-route-two { top: 95px; }.visual-anchors .anchor-route-three { top: 68px; }.visual-anchors .anchor-pin { top: 63px; }.visual-anchors .anchor-radius { top: 41px; }
  .visual-days .day-field { padding: 37px 34px 29px; }.visual-days .day-time-line { top: 102px; }.visual-prepare .prepare-ticket { top: 43px; width: 55px; height: 76px; }.visual-prepare .prepare-ticket-one { left: 36px; }.visual-prepare .prepare-ticket-two { right: 36px; }.visual-prepare .prepare-beacon { top: 54px; }.visual-prepare .prepare-route { top: 79px; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-focus *, .journey-focus *::before, .journey-focus *::after { animation: none !important; transition: none !important; }
}

/* 出發交通不是一個原生下拉式表單：每一種方式都讓人先看見下一個要確認的
   決定。欄位仍維持與旅行抽屜同一套留白與圓角，避免進入支線後像跳到舊系統。 */
.ground-journey { display: grid; gap: 20px; }
.ground-journey header { display: grid; gap: 7px; }
.ground-journey header h3, .ground-journey h4 { margin: 0; }
.ground-journey header p:not(.eyebrow), .ground-journey-note { margin: 0; color: #81776c; line-height: 1.65; }
.ground-journey-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ground-journey-field { display: grid; gap: 7px; color: #6f655a; font-weight: 700; font-size: 14px; }
.ground-journey-field input, .ground-journey-field textarea { width: 100%; box-sizing: border-box; border: 1px solid #dfd5c9; border-radius: 14px; background: #fffefa; color: #2d2925; font: inherit; font-weight: 500; padding: 12px 13px; }
.ground-journey-field textarea { min-height: 78px; resize: vertical; }
.ground-journey-luggage, .ground-journey-checks { display: grid; gap: 13px; padding: 17px; border: 1px solid #eadfd4; border-radius: 18px; background: rgba(255,251,246,.68); }
.ground-journey-travellers { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.ground-journey-travellers li { display: grid; gap: 2px; min-width: 150px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 5px 14px rgba(84,61,42,.05); }
.ground-journey-travellers span { color: #8a7d70; font-size: 12px; line-height: 1.45; }
.ground-journey-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 0; padding: 0; margin: 0; }
.ground-journey-modes legend { grid-column: 1 / -1; margin-bottom: 2px; color: #655a50; font-weight: 800; }
.ground-journey-mode { position: relative; min-height: 88px; border: 1px solid #e5d9cc; border-radius: 16px; background: #fffefa; cursor: pointer; }
.ground-journey-mode input { position: absolute; opacity: 0; pointer-events: none; }
.ground-journey-mode span { display: grid; gap: 5px; height: 100%; box-sizing: border-box; padding: 14px; }
.ground-journey-mode small { color: #887b70; line-height: 1.45; }
.ground-journey-mode.is-selected { border-color: #ee7130; background: #fff4ed; box-shadow: 0 0 0 3px rgba(238,113,48,.11); }
.ground-journey-choice { display: flex; flex-wrap: wrap; gap: 7px; }
.ground-journey-choice label { position: relative; cursor: pointer; }
.ground-journey-choice input { position: absolute; opacity: 0; }
.ground-journey-choice span { display: block; padding: 8px 10px; border: 1px solid #e4d8cc; border-radius: 999px; background: #fff; color: #766b60; font-size: 13px; }
.ground-journey-choice input:checked + span { border-color: #ef7130; background: #fff1e8; color: #a64f22; }
.ground-journey-checks ol { display: grid; gap: 10px; margin: 0; padding-left: 20px; }
.ground-journey-checks li { display: grid; gap: 3px; color: #75695e; }
.ground-journey-checks li strong { color: #3b342e; }.ground-journey-checks li span { line-height: 1.5; font-size: 13px; }
.ground-journey-checks li[data-ground-check="required"]::marker { color: #de5d30; }.ground-journey-checks li[data-ground-check="waiting"]::marker { color: #b49570; }
.ground-journey-leave, .ground-journey-ready { display: grid; gap: 4px; margin: 0; padding: 11px 12px; border-radius: 12px; background: #edf7f0; color: #375a45; }.ground-journey-leave span { font-size: 13px; line-height: 1.45; }
.ground-journey-field select { width: 100%; box-sizing: border-box; border: 1px solid #dfd5c9; border-radius: 14px; background: #fffefa; color: #2d2925; font: inherit; font-weight: 500; padding: 12px 13px; }
.ground-journey-segments { display: grid; gap: 12px; }
.ground-journey-segments-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ground-journey-segments-head h4 { margin: 0 0 4px; }
.ground-journey-segment { display: grid; gap: 12px; padding: 15px; border: 1px solid #e5d9cc; border-radius: 16px; background: #fffefa; }
.ground-journey-segment header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ground-journey-segment header div { display: grid; gap: 3px; }
.ground-journey-segment header small { color: #887b70; font-size: 12px; font-weight: 500; }
.ground-journey-empty { margin: 0; padding: 15px; border: 1px dashed #d9cabc; border-radius: 14px; color: #81776c; line-height: 1.55; }
@media (max-width: 700px) { .ground-journey-grid, .ground-journey-modes { grid-template-columns: 1fr; }.ground-journey-mode { min-height: 0; }.ground-journey-mode span { padding: 12px 13px; } }

/* 全盤準備與旅途中每日運作：完整思考留在同一個安靜的層級，不再長成另一
   面卡片牆。主畫面只凸顯下一步；其餘面向以可展開的清單保留。 */
.pretrip-map { display: grid; gap: 14px; margin: 18px 0; padding: 20px; border: 1px solid #eadfd4; border-radius: 22px; background: linear-gradient(135deg, rgba(255,249,242,.98), rgba(255,253,250,.82)); box-shadow: 0 13px 30px rgba(89,63,42,.055); }
.pretrip-map > header { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.pretrip-map h3, .pretrip-map p { margin: 0; }.pretrip-map header > div { display: grid; gap: 5px; }.pretrip-map header > div > p:not(.eyebrow) { color: #81776c; line-height: 1.55; }
.pretrip-map > header > span { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: #fff3e9; color: #b85c2b; font-size: 13px; font-weight: 800; white-space: nowrap; }
.pretrip-map-next { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 15px 16px; border: 1px solid #f0c9b1; border-radius: 16px; background: #fffefa; }.pretrip-map-next > div { display: grid; gap: 5px; }.pretrip-map-next b { color: #332b25; }.pretrip-map-next p { color: #76695d; line-height: 1.55; }.pretrip-map-next small { color: #a76640; }
.pretrip-map-details { border-top: 1px solid #eadfd4; padding-top: 12px; }.pretrip-map-details summary { cursor: pointer; color: #705b4a; font-weight: 800; }.pretrip-map-details ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; list-style: none; padding: 13px 0 0; margin: 0; }.pretrip-map-details li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(230,218,207,.7); color: #61564d; font-size: 13px; }.pretrip-map-details li > div { display: grid; min-width: 0; gap: 3px; }.pretrip-map-details li b { line-height: 1.4; }.pretrip-map-details li span { color: #998d81; white-space: nowrap; }.pretrip-map-details li.is-ready span { color: #48745a; }.pretrip-map-details li.is-needs-input span { color: #bf632f; }.pretrip-map-action { flex: 0 0 auto; padding: 4px 0; white-space: nowrap; }
.intrip-brief { display: grid; gap: 12px; margin: 16px 0; padding: 18px; border: 1px solid #dfe6eb; border-radius: 20px; background: linear-gradient(135deg, #f9fcfe, #f4f7fa); }.intrip-brief header { display: grid; gap: 4px; }.intrip-brief header h3, .intrip-brief header p, .intrip-brief-next { margin: 0; }.intrip-brief header > p:not(.eyebrow) { color: #68747c; line-height: 1.5; }.intrip-brief-next { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: #fff; color: #4f5d65; }.intrip-brief-next b { color: #2e4656; white-space: nowrap; }.intrip-brief ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.intrip-brief li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; padding: 11px 0; border-bottom: 1px solid #dfe7ec; }.intrip-brief li:last-child { border-bottom: 0; }.intrip-brief li b { color: #33444e; }.intrip-brief li > span { grid-column: 1; color: #6f7c83; line-height: 1.45; }.intrip-brief li small { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #8c9599; text-align: right; max-width: 150px; line-height: 1.4; }.intrip-brief li[data-intrip-priority="required"] b { color: #b7522b; }.intrip-brief-more { margin: 0; color: #758189; font-size: 13px; }
.pretrip-decision-context { display: grid; gap: 12px; margin: 0 0 20px; padding: 16px; border: 1px solid #eadfd4; border-radius: 17px; background: #fffaf6; }.pretrip-decision-context > p { margin: 0; color: #665c53; line-height: 1.6; }.pretrip-decision-context dl { display: grid; gap: 8px; margin: 0; }.pretrip-decision-context dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }.pretrip-decision-context dt { color: #9e6040; font-weight: 800; }.pretrip-decision-context dd { margin: 0; color: #7c7166; line-height: 1.5; }.pretrip-offline-status { min-height: 50px; padding: 14px 15px; border: 1px solid #d8e5db; border-radius: 14px; background: #f5faf6; color: #3f654b; line-height: 1.55; }
.journey-readiness-peek { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 14px 0 0; padding: 14px 16px; border-top: 1px solid #eadfd4; color: #675c53; }.journey-readiness-peek > div { display: grid; gap: 3px; min-width: 0; }.journey-readiness-peek p { margin: 0; color: #867b70; font-size: 13px; line-height: 1.5; }.journey-readiness-peek .eyebrow { color: #b36a3f; font-size: 11px; }.journey-readiness-peek b { color: #473a31; }.journey-readiness-peek .text-button { flex: 0 0 auto; color: #bd5d2a; font-weight: 800; white-space: nowrap; }
@media (max-width: 700px) { .pretrip-map { padding: 16px; border-radius: 18px; }.pretrip-map > header, .pretrip-map-next { display: grid; }.pretrip-map > header > span { justify-self: start; }.pretrip-map-next .secondary { width: 100%; }.pretrip-map-details ol { grid-template-columns: 1fr; }.pretrip-map-details li { align-items: start; }.pretrip-map-action { margin-top: 2px; }.intrip-brief { padding: 15px; border-radius: 17px; }.intrip-brief li { grid-template-columns: minmax(0, 1fr); }.intrip-brief li small { grid-column: 1; grid-row: auto; text-align: left; max-width: none; }.journey-readiness-peek { align-items: start; gap: 12px; padding: 13px 0 0; }.journey-readiness-peek .text-button { padding: 6px 0; } }

/* ---- 手機可讀性與可點性（2026-07-24） ----
   最小字級 12px、關鍵按鈕點擊面積至少 44px；標題與段落避免孤字換行。
   只放大字與觸控範圍，不改桌面版佈局。 */
.planner-shell h2, .planner-shell h3, .planner-drawer h3, .planner-overview-head h3, .guide-intro h3 { text-wrap: balance; }
.planner-shell p, .planner-drawer p, .planner-shell small, .planner-drawer small, .planner-summary-card small, .planner-summary-card em { text-wrap: pretty; }
@media (max-width: 760px) {
  .planner-date { min-width: 92px; padding: 10px 12px; }
  .planner-date b { font-size: 14px; }
  .planner-date small { font-size: 12px; }
  .planner-slot-label { font-size: 12px; }
  .planner-slot-empty { min-height: 44px; padding: 10px 8px; font-size: 14px; }
  .planner-day-actions { gap: 6px; }
  .planner-day-actions button { min-height: 40px; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
  .journey-inline-actions .text-action, .journey-focus > div > .text-action { min-height: 44px; padding: 10px 2px; font-size: 14px; }
  .planner-focus-summary .text-action { min-height: 40px; padding: 8px 2px; font-size: 13px; }
  .journey-member-row-actions .text-action { min-height: 44px; padding: 10px 12px; font-size: 14px; }
  .journey-member-row b { font-size: 15px; }
  .journey-member-row span { font-size: 13px; }
  .journey-member-row .journey-member-gap, .journey-booking-support .text-action { font-size: 13px; }
  .planner-drawer-head .x { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; }
  .planner-overview-head p:not(.eyebrow), .guide-intro p:not(.eyebrow) { font-size: 14px; }
  .planner-candidates > p, .planner-drawer > p { font-size: 13px; }
  .planner-focus-summary p:not(.eyebrow) { font-size: 13px; }
  .planner-day > header small { font-size: 12px; }
  .planner-range-notice small { display: block; margin: 0 13px 10px; font-size: 12px; }
  .planner-overview-actions .text-action { min-height: 44px; padding: 10px 2px; font-size: 14px; }
  .planner-card-meta { font-size: 12px; }
  /* 零特異性樓地板：沒有明確字級的 small／em 至少 12px；有明確規則的不受影響。 */
  :where(.planner-shell small, .planner-shell em, .planner-drawer small, .planner-drawer em) { font-size: 12px; }
  .ground-journey-mode small { font-size: 12px; }
  .journey-booking-type em { font-size: 12px; }
  .itinerary-import-legs span, .itinerary-import-legs small, .itinerary-import-note, .itinerary-import-success { font-size: 12px; }
  .journey-inline-start .journey-account-choice small, .journey-account-choice small { font-size: 12px; }
  .journey-inline-start .journey-account-picker legend small { font-size: 12px; }
  .planner-form[data-journey-manual-stay-form] .journey-account-picker > p,
  .planner-form[data-journey-manual-reservation-form] .journey-account-picker > p,
  .planner-form[data-journey-manual-transport-form] .journey-account-picker > p { font-size: 13px; }
  .planner-shell .text-button, .planner-drawer .text-button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 14px; }
  .journey-planning-preview span { font-size: 12px; }
  .journey-planning-preview b { font-size: 14px; }
  .journey-planning-preview small { font-size: 12px; }
  /* 旅途中：日期切換與提示是移動中單手操作的重點，必須好點好讀。 */
  .travel-day-nav button { min-height: 44px; padding: 10px 6px; font-size: 14px; }
  .travel-transit-cue b, .travel-important-note b { font-size: 12px; }
  .travel-quick-brief dt { font-size: 12px; }
  .travel-next > span { font-size: 12px; }
  .travel-quick-brief-head .eyebrow, .itinerary-import-result .eyebrow, .journey-import-success .eyebrow, .journey-readiness-peek .eyebrow { font-size: 12px; }
  .travel-brief > [data-travel-today] { min-height: 44px; padding: 10px 0; font-size: 14px; }
  .travel-quick-brief-head b { font-size: 13px; }
}

/* ---- 檔案上傳按鈕統一設計（2026-07-24） ----
   原生「選擇檔案」按鈕不符合設計語言；以 ::file-selector-button 全站統一
   成既有的膠囊按鈕（同 .secondary／分支導覽按鈕），涵蓋票券、確認單、
   證件影本與代表照片等所有上傳欄位。 */
input[type="file"] { color: #8a7362; font-size: 12px; line-height: 1.6; }
input[type="file"]::file-selector-button { margin-right: 10px; border: 1px solid #e8c8b4; border-radius: 999px; background: #fff8f3; padding: 9px 14px; color: #955334; font: 700 13px "DM Sans", "Noto Sans TC", sans-serif; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
input[type="file"]::file-selector-button:hover { border-color: #e39d72; background: #fff1e8; }
input[type="file"]:focus-visible { outline: 2px solid rgba(237, 109, 44, .45); outline-offset: 2px; border-radius: 10px; }
@media (max-width: 760px) {
  input[type="file"]::file-selector-button { min-height: 44px; padding: 10px 16px; font-size: 14px; }
}

/* ── 家庭旅客檔案（人層級） ───────────────────────────── */
.person-actions { margin: 4px 0 16px; }
.person-actions .save { width: 100%; }
.person-trust-device { margin-top: 10px; font-size: 13px !important; color: #7a6a5d !important; }
.person-list { display: grid; gap: 14px; }
.person-card { display: grid; gap: 10px; padding: 16px 17px; border: 1px solid #ecd9ca; border-radius: 16px; background: linear-gradient(135deg, #fffdfb, #fff8f2); }
.person-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.person-card-head b { display: block; color: #3d2c22; font-size: 16px; }
.person-card-head small { display: block; margin-top: 3px; color: #94857a; font-size: 12px; }
.person-card-head small.person-card-english-name { margin-top: 1px; color: #7a6a5d; letter-spacing: .01em; }
.person-card-meta { margin: 0; color: #6a5c50; font-size: 13px; line-height: 1.5; }
.person-card-meta-empty { color: #a2968b; }
.person-card-meta-sep { color: #c9bcae; }
.person-doc-list { display: grid; gap: 7px; margin: 2px 0 0; padding: 0; list-style: none; }
.person-doc-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #eadfd5; border-radius: 12px; background: #fffdfb; }
.person-doc-row b { display: block; color: #4d4037; font-size: 13px; }
.person-doc-expiry { display: block; margin-top: 3px; font-size: 12px; }
.person-doc-expiry.is-ok { color: #4a7a5b; }
.person-doc-expiry.is-soon { color: #b26a2c; }
.person-doc-expiry.is-expired { color: #b5462f; font-weight: 700; }
.person-doc-expiry.is-unknown { color: #9a897d; }
.person-doc-empty { margin: 2px 0 0; color: #9a897d; font-size: 12px; }
.person-add-doc { justify-self: start; margin-top: 2px; }
.person-form-wrap { display: grid; gap: 4px; }
.person-back { justify-self: start; margin: 0 0 6px; }
.person-form-title { margin: 0 0 6px; font-size: 20px; letter-spacing: -.03em; }
.person-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.person-form-actions .save { flex: 1 1 auto; }
.person-doc-pages { display: grid; gap: 8px; margin: 4px 0 2px; padding: 13px 14px; border: 1px solid #eadfd5; border-radius: 14px; background: #fffdfb; }
.person-doc-pages b { color: #4d4037; font-size: 13px; }
.person-doc-pages ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.person-doc-pages li { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #61564d; font-size: 12px; }
.person-doc-pages .is-danger { color: #a64e26; }
.secondary-danger { border-color: #e6b7a6; color: #a64e26; }
@media (max-width: 760px) {
  .person-card-head { flex-direction: column; }
  .person-card-head .secondary { min-height: 40px; align-self: flex-start; }
  .person-form-actions .secondary-danger { min-height: 44px; }
}

/* 讀取式帶入：同行人連到家庭旅客檔案時的顯示 */
.journey-member-profile-doc { display: block; margin-top: 5px; color: #5e6b73; font-size: 12px; line-height: 1.45; }
.journey-profile-doc-badge { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: #eef3f6; color: #4a6472; font-size: 11px; font-weight: 700; }
.journey-member-profile-doc .is-expired { color: #b5462f; font-weight: 700; }
.journey-member-profile-doc .is-soon { color: #b26a2c; }
.journey-member-profile-doc .is-ok { color: #4a7a5b; }
.member-profile-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; padding: 13px 15px; border: 1px solid #d9e4ea; border-left: 4px solid #6f96ab; border-radius: 13px; background: linear-gradient(135deg, #f6fafc, #f1f6f9); }
.member-profile-banner > div { display: grid; gap: 3px; min-width: 0; }
.member-profile-banner b { color: #2e4653; font-size: 14px; }
.member-profile-banner small { color: #607680; font-size: 12px; line-height: 1.45; }
.member-profile-banner-note { color: #7c9099 !important; }
.member-profile-banner .secondary { flex: 0 0 auto; }
@media (max-width: 760px) {
  .member-profile-banner { flex-direction: column; align-items: stretch; }
  .member-profile-banner .secondary { min-height: 42px; }
}

/* 「誰可以看」跟「哪些同行人」是兩組不同的決定，樣式相同、緊貼在一起
   時完全看不出分界。加上標題與分隔線，明確區分兩組卡片。 */
.journey-audience-members-block { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e6dbcd; }
.journey-audience-members-heading { margin: 0 0 8px; color: #8a7362; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* 新增證件表單：指向家庭旅客檔案的提示（護照等長期證件的正確去處） */
.journey-vault-redirect { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 12px; padding: 11px 13px; border: 1px solid #d9e4ea; border-left: 4px solid #6f96ab; border-radius: 12px; background: linear-gradient(135deg, #f6fafc, #f1f6f9); }
.journey-vault-redirect span { color: #4a6472; font-size: 12px; line-height: 1.5; }
.journey-vault-redirect button { flex: 0 0 auto; }
@media (max-width: 760px) {
  .journey-vault-redirect { flex-direction: column; align-items: stretch; }
  .journey-vault-redirect button { min-height: 42px; }
}

/* 家庭旅客檔案：已保存證件影像縮圖（中圖，非純檔名列表） */
.person-doc-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 8px; }
.person-doc-thumb { position: relative; display: grid; gap: 5px; margin: 0; padding: 0; }
.person-doc-thumb-img { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid #e8ddd1; border-radius: 12px; background: #f3ede4; color: #a2968b; font-size: 12px; }
.person-doc-thumb-img img { width: 100%; height: 100%; object-fit: cover; }
.person-doc-thumb figcaption { overflow: hidden; color: #8b8178; font-size: 11px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.person-doc-thumb-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(31, 25, 18, .55); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.person-doc-thumb-remove:hover { background: rgba(165, 70, 40, .85); }
/* 已保存影像也能旋轉／裁切；裁切編輯器展開時要橫跨整排，不能被縮圖格
   自己的欄寬夾住，拖曳控制點才有足夠空間。 */
.person-doc-page-actions { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 2px; }
.person-doc-page-actions .text-action { font-size: 11px !important; }
.person-doc-thumb:has([data-saved-crop-editor]) { grid-column: 1 / -1; }
.person-doc-thumb [data-saved-crop-editor] { margin-top: 8px; }
.person-doc-thumb [data-saved-crop-editor] .capture-crop-stage { max-width: 320px; margin: 0 auto; }
@media (max-width: 760px) {
  .person-doc-thumbs { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .person-doc-thumb-remove { width: 30px; height: 30px; font-size: 17px; }
}

/* ── 家庭旅客檔案：證件卡包（像蘋果錢包）疊卡效果 ─────────────── */
.person-doc-wallets { display: grid; gap: 12px; margin-top: 10px; }
.person-doc-wallet { border: 1px solid #eadfd5; border-radius: 14px; background: #fffdfb; overflow: hidden; }
.person-doc-wallet-toggle { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 11px 13px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.person-doc-wallet-toggle:disabled { cursor: default; }
.person-doc-stack { position: relative; width: 64px; height: 80px; }
.person-doc-stack-top { position: absolute; inset: 0; z-index: 3; margin: 0; }
.person-doc-stack-layer { position: absolute; inset: 0; z-index: 1; border: 1px solid #e8ddd1; border-radius: 11px; background: #f3ede4; }
.person-doc-stack-layer-1 { z-index: 2; transform: rotate(-4deg) translate(-2px, 1px); }
.person-doc-stack-layer-2 { transform: rotate(5deg) translate(3px, 2px); }
.person-doc-wallet .person-doc-thumb { display: block; }
.person-doc-wallet .person-doc-thumb-img { width: 64px; height: 80px; aspect-ratio: auto; border-radius: 10px; font-size: 10px; }
.person-doc-wallet-info { display: grid; gap: 3px; min-width: 0; }
.person-doc-wallet-info b { overflow: hidden; color: #4d4037; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.person-doc-number { color: #6a5c50; font-size: 12px; font-variant-numeric: tabular-nums; }
.person-doc-wallet-chevron { flex: 0 0 auto; color: #a9562b; font-size: 12px; font-weight: 700; white-space: nowrap; }
.person-doc-wallet-toggle[aria-expanded="true"] .person-doc-wallet-chevron { color: #8b7c70; }
.person-doc-wallet-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 0 13px 12px; }
.person-doc-wallet-pages .person-doc-thumb-img { aspect-ratio: 3 / 4; }
.person-doc-wallet-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 13px 11px; }
.person-doc-wallet-actions .text-action.is-disabled { color: #b5a99a !important; cursor: not-allowed; text-decoration: none; }
/* 一個人超過一份長期證件時，收合成蘋果錢包那種疊卡預覽：最前面一張卡
   完整顯示，後面兩張只在上緣露出一小截，暗示「還有更多」；點擊展開才
   看到完整清單，避免每個人的所有證件都攤開列出把卡片撐得無限長。 */
.person-doc-collection { border: 1px solid #eadfd5; border-radius: 14px; background: #fffdfb; overflow: hidden; }
.person-doc-collection-toggle { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 15px 13px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.person-doc-collection-toggle:hover .person-doc-fan-card-1 { box-shadow: 0 3px 8px rgba(70, 50, 30, .16); }
.person-doc-fan { position: relative; width: 64px; height: 92px; }
.person-doc-fan-card { position: absolute; left: 0; right: 0; height: 80px; border: 1px solid #e8ddd1; border-radius: 10px; background: #f3ede4; }
.person-doc-fan-card-3 { top: 0; z-index: 1; }
.person-doc-fan-card-2 { top: 6px; z-index: 2; }
.person-doc-fan-card-1 { top: 12px; z-index: 3; border: 0; background: none; transition: box-shadow .15s ease; }
.person-doc-fan-card-1 .person-doc-thumb { display: block; }
.person-doc-fan-card-1 .person-doc-thumb-img { width: 64px; height: 80px; aspect-ratio: auto; border-radius: 10px; font-size: 10px; }
.person-doc-collection-info { display: grid; gap: 3px; min-width: 0; }
.person-doc-collection-info b { overflow: hidden; color: #4d4037; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.person-doc-collection > .person-doc-wallets { padding: 0 13px 13px; margin-top: 2px; }
@media (max-width: 760px) {
  .person-doc-collection-toggle { grid-template-columns: 56px 1fr auto; }
  .person-doc-fan { width: 56px; height: 82px; }
  .person-doc-fan-card { height: 70px; }
  .person-doc-fan-card-1 { top: 12px; }
  .person-doc-fan-card-2 { top: 6px; }
  .person-doc-fan-card-1 .person-doc-thumb-img { width: 56px; height: 70px; }
}
/* 慢性病與常備藥：只在編輯表單顯示，預設收合、點擊才展開；卡片與同行人
   讀取式摘要都不顯示這兩項（依使用者要求移除）。 */
.person-health-hidden-form { margin: -4px 0 2px; padding: 10px 12px; border: 1px dashed #dbcfc3; border-radius: 12px; }
.person-health-hidden-form summary { color: #8a7362; font-size: 13px; font-weight: 700; cursor: pointer; }
.person-health-hidden-form label { margin-top: 10px; }
.person-mobility-checks { margin: -2px 0 2px; }
[data-doc-expiry-field].is-disabled-field { opacity: .5; }
@media (max-width: 760px) {
  .person-doc-wallet-toggle { grid-template-columns: 56px 1fr auto; padding: 12px; }
  .person-doc-stack, .person-doc-wallet .person-doc-thumb-img { width: 56px; height: 70px; }
}

/* ══════════════════════════════════════════════════════════════
   家庭旅客卡片（A1 證件資料頁）與扇形卡包（B3）
   證件不再攤在卡片裡，卡片維持固定高度、點擊才展開卡包。
   ══════════════════════════════════════════════════════════════ */
.person-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }

.person-card { display: grid; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 12px 35px rgba(69,55,40,.09); overflow: hidden; }
.person-card-main { display: grid; border: 0; background: transparent; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .16s ease; }
.person-card-main:hover { background: #fffaf6; }
.person-card-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.person-card-body { display: flex; gap: 14px; padding: 16px; }
.person-card-data { display: grid; gap: 8px; align-content: start; min-width: 0; flex: 1; }
.person-card-name { display: grid; gap: 1px; }
.person-card-name b { font-size: 18px; letter-spacing: -.03em; line-height: 1.15; }
.person-card-english-name { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; }
.person-card-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 12px; }
.person-card-key { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; letter-spacing: .07em; padding-top: 3px; }
.person-card-val { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.person-card-expiry { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.person-card-expiry::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3f8967; flex: none; }
.person-card-expiry.is-soon { color: var(--accent); } .person-card-expiry.is-soon::before { background: var(--accent); }
.person-card-expiry.is-expired { color: #b54732; } .person-card-expiry.is-expired::before { background: #b54732; }
.person-card-expiry.is-unknown { color: var(--muted); } .person-card-expiry.is-unknown::before { background: #cfc6ba; }
/* 「阿嬤有沒有護照」這一行在白卡上 4.16:1，在 picker 的深底 #ebe3d8 上掉到
   3.32:1，狀態圓點更只有 1.33:1。深底那一格要自己的顏色。 */
.journey-member-pick .person-card-expiry.is-unknown { color: #696158; }
.journey-member-pick .person-card-expiry.is-unknown::before { background: #8d8478; }
.person-card-mrz { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 16px; border-top: 1px dashed var(--line); background: #faf7f2; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .12em; overflow: hidden; }
.person-card-mrz-code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-card-mrz b { flex: none; color: var(--ink); letter-spacing: .02em; }
.person-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px 13px; border-top: 1px solid var(--line); }
.person-card-actions > small { color: var(--muted); font-size: 11.5px; }
.person-card-actions > span { display: flex; align-items: center; gap: 10px; }

/* 照片 */
.person-photo { position: relative; display: block; border-radius: 6px; background: #ece5da; overflow: hidden; flex: none; }
.person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.person-photo-empty { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center 88%; background-size: 74%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='36' r='18' fill='%23b9ac9c'/%3E%3Cpath d='M13 100c0-22 17-37 37-37s37 15 37 37z' fill='%23b9ac9c'/%3E%3C/svg%3E"); }
.person-photo-id { width: 70px; height: 88px; }
.person-photo-edit { width: 64px; height: 80px; }
.person-avatar-picker { display: flex !important; align-items: center; gap: 13px; }
.person-avatar-picker > span { display: grid; gap: 3px; min-width: 0; }
.person-avatar-picker small { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.person-avatar-picker input[type="file"] { margin-top: 5px; font-size: 12px; }

/* 扇形卡包 */
.person-wallet-sheet { max-width: 380px; padding: 12px 18px 20px; }
.person-wallet-sheet .sheet-head { align-items: flex-start; }
.person-wallet-sheet .sheet-head b { display: block; font-size: 16px; letter-spacing: -.025em; }
.person-wallet-sheet .sheet-head small { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.person-fan { position: relative; height: 252px; margin-top: 10px; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.person-fan.is-dragging { cursor: grabbing; }
.person-fan:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 14px; }
.person-fan-card { position: absolute; left: 50%; top: 14px; width: 132px; height: 176px; margin-left: -66px; display: grid; align-content: space-between; padding: 10px; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; background: linear-gradient(150deg, #e4d3bf, #c8b096); box-shadow: 0 8px 22px rgba(69,55,40,.22); transform-origin: 50% 168%; will-change: transform; overflow: hidden; }
.person-fan-card.is-settling { transition: transform .32s cubic-bezier(.22,.9,.3,1), opacity .32s ease; }
.person-fan-thumb { position: absolute; inset: 0; background: #ded2c2; }
.person-fan-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.person-fan-label { position: relative; align-self: end; display: grid; gap: 3px; border-radius: 9px; background: rgba(255,253,250,.92); padding: 7px 9px; }
.person-fan-label b { font-size: 12.5px; letter-spacing: -.02em; line-height: 1.25; }
.person-fan-label small { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--muted); }
.person-fan-label small.is-soon { color: var(--accent); }
.person-fan-label small.is-expired { color: #b54732; }
.person-fan-meta { display: grid; gap: 3px; justify-items: center; margin-top: 10px; text-align: center; }
.person-fan-meta b { font-size: 14.5px; letter-spacing: -.02em; }
.person-fan-meta small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.person-fan-meta small.is-soon { color: var(--accent); }
.person-fan-meta small.is-expired { color: #b54732; }
.person-fan-rail { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.person-fan-rail i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); transition: width .2s ease, background .2s ease; }
.person-fan-rail i.on { width: 16px; border-radius: 99px; background: var(--accent); }
.person-fan-hint { margin-top: 9px; text-align: center; }
.person-wallet-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }

/* 放大展示（臨櫃出示） */
.person-present { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(18,14,10,.94); }
.person-present-inner { display: grid; gap: 15px; justify-items: center; width: min(430px, 100%); }
.person-present-doc { width: 100%; aspect-ratio: 3 / 4; max-height: 58vh; border-radius: 16px; background: #ded2c2; box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; display: grid; place-items: center; }
.person-present-img { display: block; width: 100%; height: 100%; }
.person-present-img img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.person-present-empty { color: #6f655a; font-size: 13px; }
.person-present-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; color: #f3eee7; }
.person-present-who { display: grid; gap: 1px; min-width: 0; }
.person-present-who b { font-size: 15px; letter-spacing: -.02em; }
.person-present-who small { color: rgba(243,238,231,.66); font-size: 11.5px; }
.person-present-nav { display: flex; align-items: center; gap: 13px; flex: none; color: rgba(243,238,231,.8); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.person-present-nav button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(243,238,231,.28); border-radius: 50%; background: transparent; color: #f3eee7; font: inherit; font-size: 15px; cursor: pointer; }
.person-present-nav button:hover { background: rgba(243,238,231,.14); }
.person-present-num { min-height: 22px; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; font-weight: 700; letter-spacing: .12em; }
.person-present-close { border: 1px solid rgba(243,238,231,.28); border-radius: 999px; background: rgba(243,238,231,.1); padding: 9px 18px; color: #f3eee7; font: inherit; font-size: 13px; cursor: pointer; }
.person-present-close:hover { background: rgba(243,238,231,.2); }

@media (max-width: 760px) {
  .person-list { grid-template-columns: 1fr; }
  .person-fan { height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .person-fan-card.is-settling { transition: none; }
  .person-card-main { transition: none; }
}

/* ── 同行人名單：與家庭旅客檔案共用旅客卡片語彙 ──
   照片＋中英文姓名並置；已連結檔案的人整個身分區塊是按鈕，點下去開同一個
   扇形卡包，出門在外要出示證件時不必先跳回家庭旅客檔案再找人。 */
.journey-member-identity {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  border: 0; background: transparent; padding: 0; margin: 0;
  color: inherit; font: inherit; text-align: left;
  border-radius: 10px; cursor: pointer;
  transition: background .15s ease;
}
.journey-member-identity.is-plain { cursor: default; }
button.journey-member-identity:hover { background: #fff4ec; }
button.journey-member-identity:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.journey-member-lines { display: grid; gap: 2px; min-width: 0; }
.journey-member-lines > b { font-size: 14.5px; letter-spacing: -.02em; }
.journey-member-en {
  color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
}
.person-photo-roster { width: 40px; height: 50px; border-radius: 6px; }

@media (max-width: 760px) {
  .journey-member-row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .journey-member-identity { width: 100%; }
  .journey-member-row-actions { width: 100%; }
}

/* 從旅程規劃器點同行人開卡包時，卡包必須蓋在規劃器上面。
   .overlay 預設 z-index:50，但 .travel-planner 是 70，所以沿用預設會被蓋住。
   放 90：高於規劃器，低於放大展示（.person-present 是 95）。 */
.person-wallet-overlay { z-index: 90; }

/* ── 同行名單／管理同行人：與家庭旅客檔案共用同一張旅客卡片 ── */
/* 一列兩張，卡片更寬、更接近護照資料頁的比例（原本 300px 底線會排到三張，
   卡片被壓窄反而不像證件）。 */
.journey-member-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 14px; }
.journey-member-card, .journey-member-pick { position: relative; }
.person-card-main.is-plain { cursor: default; }

/* 參與期間：預設一行字，要改成部分才就地展開日期欄位 */
.journey-member-participation {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--line); background: #fffaf6;
}
.journey-member-range { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.journey-member-range.is-partial { color: var(--accent); }
.journey-member-range-editor { flex-basis: 100%; display: grid; gap: 10px; margin-top: 4px; }
.journey-member-card .journey-member-gap {
  margin: 0; padding: 9px 16px; border-top: 1px solid var(--line);
  color: #b94b21; font-size: 12px; line-height: 1.5;
}

/* 管理畫面的勾選：卡片本身仍可點開卡包，勾選框獨立在右上角 */
.journey-member-pick-check {
  /* 原本 z-index:2，和 sticky 標題（也是 2）平手而 DOM 在後 → 畫在標題之上。
     × 靠右之後正好落進這顆 pill 的欄位：30px 的捲動窗內按「關閉」會取消一位
     旅客的參與，而畫面什麼都不說。壓到標題底下，讓標題永遠贏。 */
  position: absolute; top: 10px; right: 12px; z-index: 1;
  display: inline-flex !important; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 253, 250, .94); padding: 5px 11px 5px 9px;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 8px rgba(69, 55, 40, .1);
}
.journey-member-pick-check input { margin: 0; }
/* 「未選取」要用邊框與底色表達，不能用 opacity 把文字一起洗淡：
   .person-card-key 只有 9.5px，套 .62 之後對比剩 2.20:1。 */
/* 兩態要在 1.4.11 的 3:1 之上分得出來。原本底色 1.05:1、邊框 1.26:1，
   四口之家掃一眼判斷誰在名單上，這一頁做不到。 */
/* 實測：底色 1.13:1、邊框 1.48:1、色條 2.69:1，三個都在 3:1 之下；而「已選取」的
   底色與面板完全相同（1.00:1）——想要的狀態零視覺重量，被排除的才有底色。
   把未選取壓深、已選取的邊框與色條加深到 3:1 以上。 */
.journey-member-pick { position: relative; background: #ebe3d8; border-color: #a89684; transition: background .16s ease, border-color .16s ease; }
.journey-member-pick.is-joined { background: #fffdfa; border-color: #b8501c; }
/* 顏色之外再給一條可觸知的色條：色弱與強光下都還分得出來。 */
.journey-member-pick.is-joined::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: #b8501c; }
.journey-member-manager-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .journey-member-cards { grid-template-columns: 1fr; }
}

/* 「修改／補充」和「刪除」原本沒有任何間距，在手機上會黏成一團「修改／補充刪除」，
   看起來像一顆按鈕。刪除又是破壞性動作，點錯無法反悔，所以除了顏色區分，還要給
   足夠的間距與符合 44px 觸控目標的按鈕框——不能只靠文字顏色去分辨。
   注意：這一段放在檔案最後，權重與下面的 @media 相同但位置更後面，所以窄螢幕的
   覆寫必須寫在這個區塊之內，不能倚賴前面那些 RWD 段落。 */
.journey-private-document-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.journey-private-document-actions .text-action { min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: 10px; color: #a9562b; font-size: 13px; line-height: 1.2; }
.journey-private-document-actions .text-action:hover,
.journey-private-document-actions .text-action:focus-visible { border-color: #edd9c8; background: #fff2e9; }
.journey-private-document-actions .is-danger { color: #a64e26; }
.journey-private-document-actions .is-danger:hover,
.journey-private-document-actions .is-danger:focus-visible { border-color: #e8c3b1; background: #fdeee6; }
@media (max-width: 760px) {
  .journey-private-document-actions { gap: 10px; }
  .journey-private-document-actions .text-action { min-height: 44px; padding: 10px 14px; font-size: 14px; }
}

/* 整列是「開啟閱讀」的按鈕，但視覺上必須維持一段文字的樣子，不能長得像
   一顆真的按鈕——否則和右下角真正的動作鈕互相搶。 */
.journey-private-document-copy { width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.journey-private-document-copy:hover b, .journey-private-document-copy:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.journey-private-document-copy:focus-visible { outline: 2px solid #d98a55; outline-offset: 3px; border-radius: 10px; }
/* 閱讀畫面是縮圖網格：一列三個，一眼掃過整份文件有哪幾頁。每格是開啟原檔的
   連結，點下去交給瀏覽器的原生檢視器放大／捲動／列印。 */
/* 一列三個，但格子要保持「縮圖」的尺寸——不加上限的話，在寬螢幕上三格會撐成
   將近 300px 的大圖，就不是掃一眼用的縮圖了。align-items: start 讓三個頁碼與
   說明對齊在同一條基線上。 */
.journey-document-reader { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; margin: 14px 0; max-width: 560px; }
.journey-document-reader-page { margin: 0; display: grid; gap: 6px; min-width: 0; }
.journey-document-reader-frame { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 11px; background: #fff; }
.journey-document-reader-frame:hover, .journey-document-reader-frame:focus-visible { border-color: #d98a55; box-shadow: 0 0 0 3px var(--accent-soft); }
.journey-document-reader-frame img { width: 100%; height: 100%; object-fit: cover; }
/* PDF 縮小塞進格子仍看得出是什麼文件；pointer-events 交給外層連結，
   否則點擊會被 PDF 檢視器吃掉，變成怎麼點都沒反應。 */
.journey-document-reader-frame iframe { position: absolute; inset: 0; width: 300%; height: 300%; border: 0; transform: scale(.3334); transform-origin: 0 0; pointer-events: none; }
.journey-document-reader-page figcaption { display: grid; gap: 2px; font-size: 12px; }
.journey-document-reader-page figcaption b { opacity: .62; font-weight: 600; }
/* 上傳時填的重點記錄：寫給未來的自己看的提示，不該比頁碼還不明顯。
   格子很窄，長記錄限制三行，完整內容仍在編輯畫面看得到。 */
.journey-document-reader-note { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.4; opacity: .9; }
@media (max-width: 520px) {
  .journey-document-reader { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
}

/* 清單縮圖：第一頁的影像，讓人不必逐一點開就知道哪份是哪份。
   縮圖是固定尺寸的方框，圖片以 cover 填滿；還沒載入時顯示頁數，
   PDF 沒有渲染庫（見 openPrivateDocumentReader 的說明）只顯示標記。 */
.journey-private-document-copy { display: flex; align-items: flex-start; gap: 12px; }
.journey-private-document-text { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.journey-private-document-thumb { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 72px; overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 9px; background: color-mix(in srgb, currentColor 5%, transparent); font-size: 11px; opacity: .75; }
.journey-private-document-thumb.has-image, .journey-private-document-thumb.is-file { opacity: 1; }
.journey-private-document-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .journey-private-document-thumb { width: 48px; height: 62px; }
}

/* 效期與適用範圍不再折疊，改成表單裡的一段。入境專屬欄位由 JS 依類型 hidden。 */
.journey-document-details { display: grid; gap: 12px; margin: 16px 0; }
.journey-document-detail-head { font-size: 13px; opacity: .72; }
.journey-document-details [data-document-entry-fields] { display: grid; gap: 12px; padding-top: 4px; border-top: 1px dashed color-mix(in srgb, currentColor 18%, transparent); }
.journey-document-details [data-document-entry-fields][hidden] { display: none; }
/* 已保存頁面的縮圖：和閱讀畫面同一個尺寸語彙，讓人知道哪一頁是哪一頁。 */
.journey-document-saved-page-head { display: flex; align-items: flex-start; gap: 12px; }
.journey-document-saved-page-thumb { flex: 0 0 auto; width: 56px; display: grid; place-items: center; font-size: 11px; opacity: .75; }
.journey-document-saved-page-thumb.has-image, .journey-document-saved-page-thumb.is-file { opacity: 1; }
.journey-document-saved-page-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* PDF 走瀏覽器原生渲染；放大三倍再縮回來，縮圖才不會糊。pointer-events 關掉，
   否則點擊會被 PDF 檢視器吃掉。 */
.journey-document-saved-page-thumb iframe { position: absolute; inset: 0; width: 300%; height: 300%; border: 0; transform: scale(.3334); transform-origin: 0 0; pointer-events: none; }
.journey-document-saved-page-head > div { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.journey-document-saved-page-note { display: grid; gap: 4px; margin-top: 6px; font-size: 12px; opacity: .82; }
.journey-document-saved-page-note textarea { font-size: 13px; }
@media (max-width: 760px) {
  .journey-document-saved-page-thumb { width: 48px; }
}

/* 全螢幕頁面編輯：先看，要改才進來。工具列固定在底部，和 Apple 檔案／Google
   掃描／Notion 的做法一致——清單保持乾淨，控制項只在你真的要改時才出現。 */
.page-editor { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr auto auto; gap: 10px; padding: 14px; background: rgba(24, 20, 17, .96); color: #f6f1ea; }
.page-editor-head { display: flex; align-items: baseline; gap: 10px; }
.page-editor-head b { font-size: 15px; }
.page-editor-head small { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .65; }
.page-editor-close { flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: rgba(255,255,255,.1); color: inherit; font-size: 22px; cursor: pointer; }
.page-editor-stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.page-editor-stage img, .page-editor-stage iframe { max-width: 100%; max-height: 100%; }
.page-editor-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.page-editor-empty { opacity: .7; }
/* 裁切遮罩：直接拖四邊，即時看到範圍。維持 inset 百分比的資料模型，所以縮圖、
   閱讀畫面與保存都不必改。 */
.page-editor-crop { position: absolute; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.9); }
.page-editor-handle { position: absolute; background: #fff; border-radius: 3px; }
.page-editor-handle[data-crop-handle="top"] { top: -3px; left: 50%; width: 46px; height: 6px; margin-left: -23px; cursor: ns-resize; }
.page-editor-handle[data-crop-handle="bottom"] { bottom: -3px; left: 50%; width: 46px; height: 6px; margin-left: -23px; cursor: ns-resize; }
.page-editor-handle[data-crop-handle="left"] { left: -3px; top: 50%; width: 6px; height: 46px; margin-top: -23px; cursor: ew-resize; }
.page-editor-handle[data-crop-handle="right"] { right: -3px; top: 50%; width: 6px; height: 46px; margin-top: -23px; cursor: ew-resize; }
.page-editor-toolbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.page-editor-toolbar button, .page-editor-retake { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; background: rgba(255,255,255,.08); color: inherit; font-size: 14px; cursor: pointer; }
.page-editor-toolbar button:disabled { opacity: .38; cursor: default; }
.page-editor-toolbar .is-danger { color: #ffb59a; border-color: rgba(255,150,120,.35); }
.page-editor-toolbar .save { background: var(--accent); border-color: transparent; color: #fff; }
.page-editor-retake input { display: none; }
.page-editor-note { display: grid; gap: 5px; font-size: 12px; opacity: .9; }
.page-editor-note textarea { width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: inherit; font: inherit; }

/* 層級標記：卡包（跟著人）與旅程文件（這趟用完即作廢）的卡片外觀相近，
   使用者容易搞不清楚現在看的是哪一層。用一個小標籤直接講出來。 */
.doc-layer-badge { display: inline-block; align-self: start; margin-bottom: 3px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.doc-layer-person { background: #e7efe4; color: #3f6b46; }
.doc-layer-trip { background: #f6e5d6; color: #8a5227; }

/* 起訖日：保險等文件的兩個日期是一組區間，用「～」串起來而不是兩個各自獨立的
   欄位——視覺上就看得出是「從…到…」。窄螢幕改成上下排列，不硬塞成一列。 */
.journey-document-date-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.journey-document-date-range > label { display: grid; gap: 4px; min-width: 0; }
.journey-document-date-range > label > span { font-size: 11px; opacity: .68; }
.journey-document-date-sep { padding-bottom: 12px; opacity: .5; }
.journey-document-detail-head small { display: block; margin-top: 2px; font-size: 12px; opacity: .72; font-weight: 400; }
@media (max-width: 520px) {
  .journey-document-date-range { grid-template-columns: 1fr; gap: 8px; }
  .journey-document-date-sep { display: none; }
}

/* 機票英文姓名比對：不符的那一列要一眼看到，因為登機真的會被攔。 */
.flight-name-rows { display: grid; gap: 8px; margin: 10px 0; }
.flight-name-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 11px; }
.flight-name-row small { display: block; font-size: 11px; opacity: .66; }
.flight-name-ticket b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.flight-name-pick { display: grid; gap: 3px; min-width: 0; }
.flight-name-state { grid-column: 1 / -1; margin: 0; font-size: 12px; }
.flight-name-row.is-ok { border-color: #b9cfae; background: #f4f8f1; }
.flight-name-row.is-ok .flight-name-state { color: #3f6b46; }
.flight-name-row.is-mismatch { border-color: #d99a7a; background: #fdf1ea; }
.flight-name-row.is-mismatch .flight-name-state { color: #a3502a; font-weight: 700; }
.flight-name-row.is-unassigned, .flight-name-row.is-unknown { border-style: dashed; }
.flight-name-alert { margin: 8px 0; padding: 9px 11px; border-radius: 10px; background: #fdeee6; color: #8f4520; font-size: 13px; font-weight: 700; }
.flight-name-ok { margin: 8px 0; font-size: 13px; color: #3f6b46; }
@media (max-width: 560px) { .flight-name-row { grid-template-columns: 1fr; } }

/* 表單依「什麼時候會知道」分段：必填的事實 → 訂位資料 → 出發前才確定。
   使用者最常卡在「這個我現在不知道」，分段就是在說「不知道沒關係」。 */
.journey-form-section { margin: 18px 0 6px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.journey-form-section b { font-size: 13px; }
.journey-form-section small { display: block; margin-top: 2px; font-size: 12px; opacity: .7; }
.journey-baggage-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.journey-baggage-fieldset legend { padding: 0; color: var(--muted); font-size: 13px; font-weight: 700; }

/* 轉機停留時間插在兩段之間，讀起來才像「銜接」而不是兩張獨立的卡。 */
.journey-layover { margin: 6px 0; padding: 7px 11px; border-left: 3px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 12px; opacity: .85; }
.journey-layover.is-tight { border-left-color: #d07a4e; background: #fdf1ea; color: #8f4520; font-weight: 700; opacity: 1; }

/* 【iOS Safari 的原生選擇器不肯為隱形輸入開啟】原本把原生 date／time 輸入做成
   1px、opacity:0、pointer-events:none，於是 showPicker() 被擋、fallback 的
   .click() 對隱形元素也無效——結果只能手動打字，選不了。
   改成讓原生輸入「真的蓋在日曆／時鐘按鈕上」：正常尺寸、opacity:0，但保留
   pointer-events。使用者點到的其實就是原生輸入本身，iOS 一定會開自己的選擇器；
   視覺上仍然只看到我們畫的按鈕，版面也不受影響（絕對定位、不佔空間）。
   權重要高於 style.css 那條帶 !important 的規則，所以這裡也用 !important。 */
.date-input-wrap { position: relative; }
.date-pick-native {
  position: absolute !important;
  right: 0 !important; top: 50% !important; bottom: auto !important;
  width: 44px !important; height: 44px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  opacity: 0 !important;
  pointer-events: auto !important;
  z-index: 2;
  -webkit-appearance: none; appearance: none;
}
/* 按鈕只負責視覺，實際接收點擊的是上面那個原生輸入。 */
.date-pick { pointer-events: none; }

/* 登機資訊卡：出發當天要的是一眼看到航班、時間、座位，不是一堆輸入框。
   刻意做出機票的骨架——兩端機場代碼放大、中間一條航線、下方票根資訊，
   並用一排打孔的分隔線把「航段」與「票根」分開。 */
.flight-pass { position: relative; margin: 14px 0; padding: 16px 18px 18px; border-radius: 18px; background: linear-gradient(160deg, #fffaf5, #fff3e8); border: 1px solid #efd9c4; box-shadow: 0 10px 26px -18px rgba(120, 70, 30, .5); overflow: hidden; }
.flight-pass-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.flight-pass-head small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.flight-pass-head b { font-size: 20px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.flight-pass-cabin { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: #f0dcc7; color: #8a5227; font-size: 11px; font-weight: 700; }
/* 中間的航線要吃掉剩下的寬度——原本兩側各佔 1fr、中間固定寬，於是圖形兩邊
   留下一大片空白。改成兩端依內容收縮、中間 1fr 撐滿。 */
.flight-pass-route { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 14px; margin: 16px 0 6px; }
.flight-pass-port b { display: block; font-size: 26px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; line-height: 1.1; }
.flight-pass-port small { display: block; font-size: 12px; opacity: .72; }
.flight-pass-port.is-arrival { text-align: right; }
/* 航線：兩端圓點加一架朝右的紙飛機，用純 CSS 畫，不引入圖檔。 */
.flight-pass-arc { display: flex; align-items: center; gap: 7px; }
.flight-pass-arc span { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid #c9a184; }
.flight-pass-arc span:last-child { border-color: #b06c45; background: #b06c45; }
/* 線條撐滿中間欄；漸層由淡到深，把視線從出發推向目的地。 */
.flight-pass-arc i { position: relative; flex: 1 1 auto; display: block; min-width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(201,161,132,.3), #b06c45); }
/* 機頭抵達終點，不再停在正中間。 */
.flight-pass-arc i::after { content: ""; position: absolute; right: -2px; top: 50%; width: 0; height: 0; transform: translateY(-50%); border-left: 10px solid #b06c45; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
/* 票根：打孔分隔線 */
.flight-pass-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #dcc0a4; }
.pass-cell small { display: block; font-size: 10px; letter-spacing: .06em; opacity: .58; }
.pass-cell b { font-size: 13px; word-break: break-word; }
/* 訂位代號是機場櫃檯要念出來的東西，機場又亮——不可用淡色小字。 */
.flight-pass-refs { margin: 12px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 700; letter-spacing: .03em; user-select: all; }
.flight-pass-note { margin: 8px 0 0; font-size: 12px; color: #8a5227; }
@media (max-width: 560px) {
  .flight-pass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flight-pass-port b { font-size: 22px; }
  .flight-pass-arc i { min-width: 28px; }
}

/* 已訂交通的每一段就是一張票；動作列做成肥手指友善的實體按鈕，
   不再是兩個擠在一起的文字連結。 */
.journey-booked-leg { display: grid; gap: 10px; margin: 0 0 16px; }
.journey-booked-leg .flight-pass { margin: 0; }
.journey-booked-leg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.journey-booked-leg-actions > button, .journey-booked-leg-actions > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 16px; border: 1px solid #e3c9b1; border-radius: 12px; background: #fff; color: #9e552d; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.journey-booked-leg-actions > button:hover, .journey-booked-leg-actions > a:hover,
.journey-booked-leg-actions > button:focus-visible, .journey-booked-leg-actions > a:focus-visible { border-color: #d98a55; background: #fff5ec; }
@media (max-width: 520px) {
  .journey-booked-leg-actions { display: grid; grid-template-columns: 1fr; }
}

/* 渲染失敗時的訊息：可讀、可重試、可回報。空白頁最傷的是完全沒有出路。 */
.planner-load-retry-detail { margin: 8px 0 12px; padding: 8px 11px; border-radius: 9px; background: color-mix(in srgb, currentColor 6%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-word; }

/* 航廈緊貼機場代碼（CAN T2），字級小一階、往上對齊基線——讀起來是「哪個航廈」
   而不是另一個代碼。抵達端跟著整欄右對齊。 */
.flight-pass-port b em { margin-left: 5px; font-size: 13px; font-style: normal; font-weight: 700; letter-spacing: 0; color: #b06c45; vertical-align: 2px; }

/* 存的是無位移的壁鐘時間；兩個時間並排會讓人自己相減算出錯的飛行時長。 */
.flight-pass-tz { margin: 4px 0 0; font-size: 11px; opacity: .6; }

/* 沒有 IATA 代碼時票根改用地名排版：小字、可換行，不用 26px 等寬字撐爆卡片 */
.flight-pass-port.is-place > b {
  font-size: 15px;
  font-family: inherit;
  letter-spacing: 0;
  line-height: 1.25;
  word-break: break-word;
}

/* 交通方式圖示放在票根表頭，讓自駕那段一眼就不會被當成航班 */
.flight-pass-mode { flex: 0 0 auto; font-size: 20px; line-height: 1; margin-right: 4px; }

/* 同行舒適度與交通細節：填了就要看得到，否則那些格子只是在騙人 */
.planner-comfort-summary { margin: 14px 0 0; padding: 12px 14px; border: 1px solid #e6d2be; border-radius: 12px; background: #fffaf4; }
.planner-comfort-summary > b { display: block; font-size: 13px; letter-spacing: .04em; margin-bottom: 8px; }
.planner-comfort-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }
.planner-comfort-summary dt { font-size: 12px; opacity: .62; }
.planner-comfort-summary dd { margin: 0; font-size: 13px; word-break: break-word; }

/* 已訂交通表單：一開始只問四格，其餘按「什麼時候才會知道」收起來。
   已經有值的段落自動展開，所以維護與新增是同一份東西，只差展開狀態。 */
.booking-section { margin: 14px 0 0; border: 1px solid #e6d2be; border-radius: 12px; background: #fffaf4; overflow: hidden; }
.booking-section > summary {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 15px; min-height: 44px; cursor: pointer;
  list-style: none; -webkit-tap-highlight-color: transparent;
}
.booking-section > summary::-webkit-details-marker { display: none; }
.booking-section > summary::after {
  content: "＋ 現在補"; position: absolute; right: 15px;
  font-size: 12px; font-weight: 600; color: #9e552d;
}
.booking-section[open] > summary::after { content: "－ 收起"; }
.booking-section > summary { position: relative; padding-right: 84px; }
.booking-section > summary > b { font-size: 14px; }
.booking-section > summary > small { font-size: 12px; opacity: .62; line-height: 1.4; }
.booking-section > summary:hover, .booking-section > summary:focus-visible { background: #fff3e6; }
.booking-section-body { display: grid; gap: 12px; padding: 4px 15px 15px; border-top: 1px dashed #e6d2be; }
.booking-section-body > label:first-child { margin-top: 11px; }

/* 離線證件：關員面前要直接看得到，不是一個下載連結 */
.offline-media-pdf { width: 100%; min-height: 62vh; border: 1px solid #e3c9b1; border-radius: 12px; background: #fff; }

/* 非建立者看到的說明，取代一顆按了會 403 的按鈕 */
.person-card-readonly { font-size: 12px; opacity: .62; line-height: 1.4; }

/* 文件清單的效期狀態：哪一份撐不到回程要一眼看得出來 */
.journey-document-meta.is-expired { color: #a3341f; font-weight: 600; }
.journey-document-meta.is-soon { color: #8a5227; font-weight: 600; }

/* 離線證件的載入槽：關口沒網路時也要有明確的等待狀態 */
.offline-media-slot { min-height: 120px; display: grid; place-items: center; border: 1px dashed #e3c9b1; border-radius: 12px; }

/* ── 同行人：設計師檢核後補齊的觸控、對比與視覺一致性 ──────────────
   使用情境是「單手、移動中、光線不佳」，所以這一段的每一條都不是美化，
   是可用性。 */

/* 【觸控目標】.text-action 的基礎樣式是 padding:0 + margin-top:20px，
   其他容器都各自補過 44px，唯獨這幾個新容器漏了：可點高度只有一行文字
   （約 17px），而且按鈕會比旁邊的說明整體往下掉 20px。 */
.person-card-actions .text-action,
.journey-member-participation .text-action,
.person-wallet-actions .text-action,
.journey-member-profile-summary .text-action,
.journey-member-preferences .text-action,
.journey-member-rich-details .text-action {
  min-height: 44px;
  margin-top: 0;
  padding: 10px 12px;
  border-radius: 10px;
  line-height: 1.2;
  /* accent 橘在白底只有 3.08:1；沿用本檔既有的 #a9562b（5.18:1）。 */
  color: #a9562b;
  /* is-danger 有 1px 邊框；沒有這行的話同一個 flex row 裡一顆 44px、一顆 46px。 */
  border: 1px solid transparent;
}
.person-card-actions .text-action:hover,
.journey-member-participation .text-action:hover,
.person-wallet-actions .text-action:hover,
.journey-member-profile-summary .text-action:hover,
.journey-member-rich-details .text-action:hover,
.journey-member-preferences .text-action:hover,
.person-card-actions .text-action:focus-visible,
.journey-member-participation .text-action:focus-visible,
.person-wallet-actions .text-action:focus-visible,
.journey-member-profile-summary .text-action:focus-visible,
.journey-member-rich-details .text-action:focus-visible,
.journey-member-preferences .text-action:focus-visible { background: #fff3e6; }

/* 破壞性動作不能只靠文字顏色區分，也不該被推到右手拇指的休息位置。 */
.person-card-actions .text-action.is-danger {
  color: #a3341f;
  /* #e6c3ba 對白底只有 1.6:1，WCAG 1.4.11 非文字對比要 3:1——那個邊框等於不存在。 */
  border: 1px solid #c8705c;
}
.person-card-actions .text-action.is-danger:hover { background: #fdeee9; border-color: #c8705c; }
.person-card-actions .person-card-action-group {
  display: flex; gap: 8px; flex-wrap: wrap;
  /* space-between 會把這一組推到最右緣，也就是右手拇指的休息位置。 */
  margin-right: auto;
}

/* 勾選 pill 是「管理同行人」這一頁的主要動作，卻只有 24px 高，
   而它疊在一顆 300px 的卡片按鈕上——邊緣誤觸就開了無關的證件卡包。 */
.journey-member-pick-check { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 14px; }
.check-row { min-height: 44px; display: flex; align-items: center; gap: 10px; }
/* .date-pick 是 pointer-events:none，真正接點擊的是它上面的原生 input（已 44px）。
   對它加尺寸是 no-op，移除以免誤導後續維護。 */
.person-present-nav button { min-width: 44px; min-height: 44px; }

/* 【視覺一致性】這四個選擇器完全沒有樣式，退回瀏覽器預設的 border:2px groove
   灰色 3D 凹槽，和整套米白＋圓角的語彙毫無關係。 */
.journey-member-subfieldset,
.journey-member-rich-details,
.journey-member-profile-summary,
.journey-member-relink {
  border: 1px solid #e6d2be;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf4, #fff);
  padding: 14px 15px;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}
.journey-member-subfieldset > legend,
/* .journey-member-rich-details 是 <details>，子元素是 <summary> 不是 <legend>；
   原本寫 legend 永不匹配，那顆 summary 拿不到字重。 */
.journey-member-rich-details > summary {
  font-size: 14px;
  font-weight: 800;
  padding: 0 6px;
}

/* 【對比度】這個分支把大量意義放在說明小字，而那些字正是最不可讀的。
   原本 .field-note 用 accent 橘（3.06:1）、小字用 muted（4.09–4.19:1），
   都低於 AA 4.5:1；.person-card-key 甚至只有 9.5px。 */
.planner-drawer .field-note,
.journey-member-cards .field-note,
/* personForm 畫在 #peopleRegion（.sheet 裡），不加這一條的話整份表單的 field-note
   退回 style.css 的 accent 橘，實測 3.03:1。 */
.sheet .field-note { color: #a34a17; font-size: 12px; }
.journey-reminder-option small,
.journey-account-choice small { color: #6f6157; font-size: 12px; }
.planner-drawer > p { color: #6f6157; font-size: 12px; }
.person-card-key { font-size: 11px; color: #6f6157; }

/* 離線出示：關員面前要一眼分辨「誰的、還有效嗎」 */
.offline-entry-document { display: grid; gap: 6px; }
.offline-entry-holder { font-size: 13px; font-weight: 700; color: #6f6157; }
.offline-entry-expiry { font-size: 13px; font-weight: 700; }
.offline-entry-expiry.is-expired { color: #a3341f; }
.offline-entry-expiry.is-soon { color: #8a5227; }

/* 關口出示：一次只看一個人。原本是平鋪長捲軸，五個人的證件混在一起，
   要找爸爸的簽證得從頭捲，而關員在等。 */
.offline-vault-people {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px;
  -webkit-overflow-scrolling: touch;
}
.offline-vault-person {
  flex: 0 0 auto; min-height: 44px; padding: 8px 16px;
  border: 1px solid #e3c9b1; border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 700; color: #6f4423; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.offline-vault-person > small { font-size: 12px; font-weight: 600; color: #7a5a3f; }
.offline-vault-person.is-active { background: #9e552d; border-color: #9e552d; color: #fff; }
.offline-vault-person.is-active > small { color: #f6e6da; }
.offline-vault-items { display: grid; gap: 14px; }

/* 【複選要長得像複選】.journey-account-choice 的視覺是寫死的圓點單選鈕，
   而「哪些同行人適用」是 checkbox，還緊接在真正的單選卡片下面、外觀完全相同。
   「勾選誰就是適用誰、全家共用只要上傳一份」這個核心設計因此被視覺否定——
   使用者不會去試著點第二個。方框＋打勾才說得出「可以複選」。 */
.journey-account-choice--multi span:before {
  border-radius: 5px;
  border-width: 2px;
}
.journey-account-choice--multi input:checked + span:before {
  border: 2px solid var(--accent);
  background: var(--accent);
  /* 打勾用 clip-path 畫，不依賴額外的字型或圖檔 */
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
}
/* 分層說明被 nowrap + ellipsis 截掉後半，而被截掉的正是分層規則本身
   （「多次／長效簽證請存到家庭旅客檔案」）。允許兩行。 */
.journey-account-choice small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.45;
}

/* 勾選失敗要說原因：靜默彈回去等於告訴使用者「這個 App 壞了」 */
.journey-member-pick-error { margin: 6px 0 0; font-size: 12px; color: #a3341f; }
/* 新增單次旅客改用畫面內欄位，不再用 window.prompt */
.journey-one-off-form { display: grid; gap: 8px; width: 100%; }
.journey-one-off-form label { display: grid; gap: 4px; font-size: 13px; }
.journey-one-off-form input { min-height: 44px; }
.journey-one-off-form button { min-height: 44px; }

/* 這幾行小字就在剛加上 44px 的兩顆按鈕旁邊，同一個 flex 容器裡，卻仍是 4.23:1 */
.person-card-actions > small { color: #6f6157; font-size: 12px; }
.person-card-english-name { color: #6f6157; font-size: 12px; }
.person-card-mrz { color: #6f6157; font-size: 11px; }
/* 勾選 pill 拉到 44px 之後會壓到英文姓名列；給資料區預留空間。
   一定要限定在 .journey-member-pick：travellerCardCoreMarkup 有三個呼叫點，
   另外兩個（家庭旅客檔案、同行名單）沒有 pill，無作用域會讓 375px 下的
   文字欄從 223px 掉到 115px，右邊三分之一憑空空白。 */
/* pill 實測閒置 96.99px、更新中 108.74px，預留的 84px 不夠；而 .person-card-name
   沒有 overflow-wrap，單一不可斷的拉丁字串（護照英文姓名、朋友的英文名）會直接
   鑽到 pill 底下被 rgba(255,253,250,.94) 蓋掉 13px，讀成「Bartholomev」，
   沒有 ellipsis、沒有任何提示。 */
.journey-member-pick .person-card-name { padding-right: 112px; }
.person-card-name, .person-card-name b { overflow-wrap: anywhere; }

/* 「待補 N 項」是唯一告訴你還缺什麼的地方，要能點過去補 */
button.journey-member-gap {
  display: block; width: 100%; text-align: left;
  min-height: 44px; padding: 10px 12px;
  border: 1px solid #e6c3ba; border-radius: 10px; background: #fff8f4;
  color: #a3341f; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
button.journey-member-gap:hover, button.journey-member-gap:focus-visible { background: #fdeee9; border-color: #c8705c; }

/* 對比度：這幾處是關口與拍攝流程的狀態文字，光線最差時最需要看得清楚 */
.journey-document-capture-copy small,
.journey-document-capture-empty,
.journey-document-capture-head small,
.capture-crop-hint { color: #6f665e; }
.journey-private-document-copy small { color: #6f665e; }
.page-editor-head small { opacity: 1; color: #d9cfc4; }
/* 裁切控制點原本是 6px 寬的 span，不可聚焦、不可鍵盤操作 */
.page-editor-handle {
  min-width: 44px; min-height: 44px;
  background: transparent; border: 0; padding: 0; cursor: grab;
}
.page-editor-handle:focus-visible { outline: 3px solid #ffd9a8; outline-offset: 2px; }

/* 移出同行人的確認頁蓋在原本的抽屜之上：原節點只是遮起來，不重建，
   否則直接綁在 panel 上的 listener 會全部消失（取消之後整片變成死的）。 */
.planner-drawer > .is-confirm-masked { display: none !important; }
/* 90°／270° 的旋轉發生在 layout 之後：影像先被 contain 進直式框、再整個轉，
   於是橫拍的護照資料頁被裁掉。轉四分之一圈時改用置中的正方形版面，
   旋轉後邊界不變，關口看到的才是完整而且正的那一份。 */
/* 要變正方形的是外框，不是 img。原本寫在 img 上：height:100% 是確定值、
   aspect-ratio:1 只作用於 auto 軸、max-width:100% 又把寬度壓回外框寬——
   量過 375x812／375x667／390x844 三種螢幕，img 盒恆等於外框，一像素都沒改變。
   直式外框轉 90° 之後左右各被裁掉 25%，而那正是橫拍的護照資料頁。 */
.person-present-doc.is-quarter-turn { aspect-ratio: 1; max-width: min(100%, 58vh); margin: 0 auto; }
.person-present-img.is-quarter-turn { position: relative; }
.person-present-img.is-quarter-turn img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; }
/* 兩條出示路徑的 affordance 要一致：護照插槽有 inline cursor:zoom-in，
   簽證的 .is-presentable 在任何 CSS 檔裡都沒有規則，鍵盤也沒有 focus ring。 */
.offline-media.is-presentable { cursor: zoom-in; }
.offline-media.is-presentable:focus-visible { outline: 3px solid #b8501c; outline-offset: 3px; }
.offline-media-fallback { display: inline-block; margin-top: 8px; }
/* .offline-entry small 的 (0,1,1) 壓過這兩條 (0,1,0)：字級與顏色兩項都沒生效，
   而註解寫的是「關員面前要一眼分辨誰的、還有效嗎」。提高到同級才蓋得過。 */
.offline-entry small.offline-entry-holder { font-size: 13px; color: #6f6157; }
.offline-entry small.offline-entry-expiry { font-size: 13px; }
/* 四口之家 + 一份全家共用保單 = 5 組，375px（可用寬 275px）只放得下 3 顆 pill，
   而捲軸原本被 scrollbar-width:none 關掉、也沒有任何提示：第 4、5 個人在關口
   既看不到、也不知道要往左滑。捲軸留著，它就是那個提示。 */
.offline-vault-people { scrollbar-width: thin; scrollbar-color: rgba(130,122,112,.42) transparent; }
.offline-vault-people::-webkit-scrollbar { height: 6px; }
.offline-vault-people::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(130,122,112,.38); }

/* 移出同行人是破壞性確認，不能沿用 .journey-import-success 的綠色成功底——
   語意正好相反。這裡覆寫成中性警示底，並讓標題與清單回到一般文字色。 */
.planner-drawer-confirm .journey-import-success { background: #fdf6f1; color: #5c4436; border: 1px solid #e6c3ba; }
.planner-drawer-confirm .journey-import-success h3 { color: #7a3a22; }
.planner-drawer-confirm .journey-import-success ol,
.planner-drawer-confirm .journey-import-success p { color: #5c4436; }

/* 「待補 N 項」底下要看得到是哪幾項——數字本身不能被追蹤時，使用者只會學會忽略它。 */
.flow-branch-missing { display: block; margin-top: 3px; color: #a3341f; font-size: 11.5px; font-style: normal; line-height: 1.5; }
/* 離線出示的獨立浮層：關口那一刻不管使用者在哪個模式都要叫得出來。 */
.travel-offline-status button[data-travel-offline-vault] { margin-top: 8px; min-height: 44px; }
.offline-vault-overlay { z-index: 92; }

/* 出示證件的入口在旅途模式一直都在（不只離線時）：關口那一刻使用者不會有
   多餘的心力去猜它藏在哪，也需要能在家先演練一次。 */
.travel-vault-shortcut { display: grid; gap: 4px; justify-items: start; margin: 12px 0 4px; }
.travel-vault-shortcut button { min-height: 44px; }
.travel-vault-shortcut small { color: #6f665e; font-size: 12px; }
.journey-member-profile-stale { border-color: #e6c3ba; background: #fdf6f1; }

/* 移出確認的兩顆按鈕：預設動作（維持同行）拿焦點，但不拿橘色——橘色 .save 在
   這個 App 每一個其他地方都代表「繼續／保存」，用它當取消會讓照顏色按的人按錯。
   破壞性動作用實心危險底，白字對 #a3341f 是 6.84:1。 */
.planner-drawer-confirm .journey-import-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.planner-confirm-keep { flex: 1 1 200px; min-height: 44px; }
.planner-confirm-danger {
  flex: 0 1 auto; min-height: 44px; padding: 12px 18px;
  border: 1px solid #8c2b19; border-radius: 999px; background: #a3341f;
  color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.planner-confirm-danger:hover { background: #8c2b19; }
/* 移出成功要有人被告知，而且焦點要落在這句話上，不是掉回 body 再被送到名單第一顆。 */
p.journey-member-removed-note {
  margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid #9dc4a8; border-radius: 13px; background: #eff8f0;
  /* .planner-detail-empty 帶 !important，不用同等武器蓋不過去。實測原本 3.90:1。 */
  color: #23503a !important; font-size: 13px; line-height: 1.55;
}
.journey-member-removed-note:focus-visible { outline: 3px solid #b8501c; outline-offset: 3px; }

/* 未旋轉的直式證件（單次簽證貼紙多半是直式）被 style.css 的 max-height:360px
   鎖死：768px 寬的 iPad 上只顯示 257×360，比旁邊旋轉過的護照小 26%，而垂直
   還空著 600px。關員要看的那一份不該是螢幕上最小的東西。 */
.offline-vault-items .offline-media { max-height: min(70vh, 520px); }
/* 清單縮圖的四分之一圈：和出示層同一套（外框轉方形、影像絕對定位置中）。
   量測過內聯 rotate(90deg) 會讓視覺高度變成版面寬度，往下溢出約 36px
   直接壓在下一份文件的卡片上，而那是關口那一刻使用者先看到的畫面。 */
.offline-media-frame.is-quarter-turn { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; }
/* style.css 的 .offline-media 帶 margin-top:12px 與 max-height:360px。絕對定位的
   img 帶著那 12px 往下推，外框的 overflow:hidden 就把底部切掉——旋轉 90° 之後
   那是原圖右緣整條，五種螢幕、兩條路徑一次都沒漏，而且不留痕跡。 */
.offline-media-frame.is-quarter-turn img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; margin: 0; max-height: none; object-fit: contain; }
/* outline 也會被外框的 overflow:hidden 吃掉（實測被裁 99.5%）：畫在外框上。 */
.offline-media-frame.is-quarter-turn:has(img:focus-visible) { outline: 3px solid #b8501c; outline-offset: 3px; }
/* overlay scrollbar 在 iOS／macOS 佔 0px 版面、靜止時不繪製，所以「留著捲軸」
   在目標平台上等於沒有提示。量測：5 顆 pill 時第 5 顆只露出 -0.4px。
   用右緣淡出 + 保留露出寬度，讓「還有人在右邊」看得出來。 */
.offline-vault-people { padding-right: 26px; }
/* 原本用 mask 淡出，但它洗掉的正是最後那個人的名字（實測對比 8.31:1 → 4.47:1，
   六顆 pill 時第四顆只露 7px 且被淡到 1.00:1 —— 白色淡進白色給不出訊號）。
   改成一行不覆蓋任何內容的說明，並且說出總共幾人。 */
.offline-vault-scroll-hint {
  margin: 2px 0 8px; padding: 0 2px;
  color: #6f6157; font-size: 12px; font-weight: 600;
}

/* 選填提醒不擋「已完成」，但也不能消失：綠色卡片若等於「什麼都沒有」，
   那句「這趟一份保險都沒記錄」就從產生到丟棄只活在測試裡。 */
.flow-branch-followup { display: block; margin-top: 2px; color: #6f665e; font-size: 11.5px; font-style: normal; line-height: 1.5; }

/* 叫不出影像時要看得到字：原本是空的格子被畫成實心米色方塊，
   在關口那一刻使用者會以為它還在載入，就一直等。 */
/* #6f665e 對出示層與扇形封面的 #ded2c2 只有 3.77:1；#565049 對 #ded2c2 是 5.34:1、
   對米色格 #f3ede4 是 6.84:1，兩個容器一起過 AA。 */
.person-doc-thumb-missing {
  display: block; padding: 10px 12px;
  color: #565049; font-size: 11.5px; line-height: 1.5; text-align: left;
}
/* 卡包那三個容器只有 56×70：整句 32 字會排成 16 行、只露出 2 行，看起來像資料損毀。
   小容器只放一個短標記，全文交給 title／aria-label。 */
/* .person-doc-stack-top 與 .person-doc-wallet-pages 在整個 repo 從來沒有被產生過，
   留著只會讓下一輪以為卡包那條路已經處理過。
   而在 430px 寬的全螢幕出示層裡把唯一的錯誤說明降到 10.5px，對長輩是反向優化——
   實測三個真的存在的插槽是 124–430px 寬，11.5px 全文本來就放得下。 */

/* 讀不到檔案時那條橫幅裡的「重新載入」是唯一的出路，不能只有一行字高。 */
.journey-people-stale { display: grid; gap: 6px; justify-items: start; }
.journey-people-stale .text-action { min-height: 44px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; color: #a9562b; }
.journey-people-stale .text-action:hover, .journey-people-stale .text-action:focus-visible { background: #fff3e6; }

/* 「已確認沒有」是 flow-v2 唯一的逃生口，要看得出來它屬於上面那一格，
   而且要有 44px 的命中區——它是勾了才算的關鍵動作，不是裝飾。 */
/* 這四列是上一格的逃生口，不是新的題目。style.css 的 .check-row 帶 !important、
   .form label 是 (0,2,0)——不用同等武器與同等特異度，宣告全部是死的
   （實測 declared 12.5px/600/#6f6157 → actual 14px/700/#27231e，子項比母項更大更黑）。 */
.check-row.confirmed-none-row {
  display: flex; align-items: center;
  gap: 8px !important;
  min-height: 44px; margin: -6px 0 4px; padding: 0 2px 0 26px;
  color: #6f6157 !important; font-size: 12.5px !important; font-weight: 600;
}
.form .check-row.confirmed-none-row { font-size: 12.5px; font-weight: 600; }
/* color／font-size／gap 都補了 !important，width 漏了 → 實測 16×20 的長方形。 */
.check-row.confirmed-none-row input { width: 20px !important; height: 20px; margin: 0; flex: none; }

/* 「我選完了」是這個抽屜的主要動作，卻是唯一沒到 44px 的鈕（實測 42.5px）。 */
[data-journey-manager-done] { min-height: 44px; }
/* 勾選寫入中要看得出來：只把 checkbox disabled 的話，opacity／cursor／底色全不變。 */
/* 只淡化不擋點等於做一半：寫入飛在半空時整張卡片仍可點，疊一層卡包之後
   render() 改的是被埋在下面那一層，使用者按返回看到的是過期名單。
   同一個 repo 的 .itinerary-preview.is-updating 早就寫對過。
   擋掉點擊之後，11px 欄名那個 3.21:1 也才落進 1.4.3 的 inactive 例外。 */
.journey-member-pick.is-updating { opacity: .72; pointer-events: none; }
.journey-member-pick.is-updating .journey-member-pick-check { cursor: progress; }

/* 共用文件在每一位持有人底下各出現一次；不標「共用」的話會被當成兩份不同的簽證。 */
/* (0,1,0) 被 .offline-entry small.offline-entry-holder (0,2,1) 蓋掉：
   宣告 #7a5a3f、實際 rgb(111,97,87)，和普通持有人名同色同粗——分級是死的。 */
/* 【改的是 cascade，不是使用者的眼睛】上一輪只把顏色從 #6f6157 換成 #7a5a3f：
   實測兩者對比 1.05、字級字重完全相同，唯一分辨得出來的訊號還是那四個字本身。
   共用是關口前要一眼看出來的事，給它一個 chip。 */
.offline-entry small.offline-entry-shared {
  justify-self: start; padding: 3px 9px 3px 7px;
  border: 1px solid #c8a97f; border-radius: 999px; background: #fdf3e2;
  color: #6b4a24; font-weight: 700;
}
.offline-entry small.offline-entry-shared::before { content: "👥 "; }

/* 「待補 N 項」原本八項擠成一句、六句掛著同一個「（在家庭旅客檔案補充）」尾巴，
   在手機上是一片橘紅色的字牆。改成標題＋分行，並收斂重複的尾巴。 */
button.journey-member-gap { display: grid; gap: 3px; }
button.journey-member-gap b { font-size: 13px; }
button.journey-member-gap span { font-weight: 600; line-height: 1.5; }
/* 名單卡片寫入中也要擋掉整張卡的點擊：只把按下的那一顆變灰，旁邊的「移出這趟」
   照樣能按，確認頁會被接著回來的重繪整片抹掉。 */
.person-card.is-updating { opacity: .72; pointer-events: none; }
/* 從「待補」點進來就地補得到的照護欄位。 */
.journey-member-profile-edit textarea { min-height: 56px; }

/* 讀取失敗時唯一的出路不能長得像一段文字（實測底色對面板 1.04:1、邊框 1.55:1、
   高 42.5px），而名單那三顆主要動作也差 1.5px 到 44。 */
.journey-people-stale .text-action { min-height: 44px; border-color: #c8705c; background: #fff6f1; }
.journey-roster-actions button { min-height: 44px; }
/* 上一輪只修到旁邊那一顆。「重新載入名單」（data-roster-retry）與「重新載入」
   （data-manager-retry）是名單／管理頁讀取失敗時唯一的出路，實測 42.5px、
   min-height:auto、邊框對面板 1.55:1——長得像一段文字。 */
[data-roster-retry], [data-manager-retry] {
  min-height: 44px; padding: 10px 16px;
  border: 1px solid #c8705c; border-radius: 999px; background: #fff6f1; color: #8f3d1c;
}
/* 【修 CSS 前先讀一次 computed value】上一輪這條寫成 (0,1,1)，輸給
   `.journey-member-card .journey-member-gap` (0,2,0)：上緣仍是灰的，而且被一起
   壓掉的還有 font-size（12.5→12）、color（#a3341f→#b94b21）、padding（10px 12px
   →9px 16px）。那顆按鈕的規則有一半是死的，不只邊框那一行。 */
.journey-member-card button.journey-member-gap {
  border-top-color: #e6c3ba;
  padding: 10px 12px; color: #a3341f; font-size: 12.5px;
}

/* 名單卡片寫入中：只變半透明沒有說話。給一句可讀的狀態。
   【不要在 picker 上再說第二次】管理畫面的卡片右上角已經有 pill 寫「正在更新…」
   （那顆有 role="status"，讀屏收得到）。這條 ::after 原本也命中
   .journey-member-pick，同一個動作在同一張卡上出現兩個不同的名字，而且
   position:absolute 的它壓進 .person-card-actions，切掉「移出這趟」的右下角。
   ::after 的 content 本來就不進 a11y 名稱，所以它只負責視覺，範圍要收窄。 */
.person-card.is-updating:not(.journey-member-pick) { position: relative; }
.person-card.is-updating:not(.journey-member-pick)::after {
  content: "正在保存…"; display: block; width: fit-content; margin: 8px 0 0 auto;
  min-height: 24px; padding: 4px 10px;
  border-radius: 999px; background: #fffdfa; border: 1px solid #c9bdae;
  color: #5c4436; font-size: 12px; font-weight: 700;
}

/* 白字對 --accent（#ed6d2c）實測 3.08:1，而按鈕字是 13.33px，不算大字 → 需要 4.5。
   底色改用同色系深階 #c74e16（白字 4.64:1）；--accent 本身留給文字、線條與圓點，
   那些地方它是對淺底用的，沒有問題。 */
.save:hover, .create-trigger:hover, .page-editor-toolbar .save { background: #c74e16; }
.planner-preparation-actions button:first-child { border-color: #c74e16; background: #c74e16; }

/* ── 三分支共用的「下一步／待補行動」提示 ────────────────────────────
   同行人、單次簽證與保險的引導語用同一個結構與同一個 class；不要每個分支
   再長一套平行的狀態樣式，否則同一句話在三個地方會有三種輕重。
   底層仍是 .field-note（顏色與字級沿用），這裡只加一條可辨識的左邊界。 */
.journey-next-step {
  margin: 8px 0; padding: 8px 11px;
  border-left: 3px solid var(--accent); border-radius: 0 9px 9px 0;
  background: rgba(255, 247, 240, .78);
}
/* 三步引導的小標題：和 fieldset 的 legend 同一個語氣，但用在沒有 fieldset
   的區塊（例如日期與影像那一段）。 */
.journey-step-legend { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #5c4436; }

/* ── 同一個互動角色 → 同一組狀態 ────────────────────────────────────
   同行人、單次簽證與保險共用兩種選取卡：
     單選 = .journey-reminder-option（原生 radio）或 .journey-account-choice（圓點）
     複選 = .journey-account-choice.journey-account-choice--multi（方框打勾）
   選中的顏色本來就一致，但 focus-visible 與 disabled 只有其中一種有，
   於是同一個動作在三個分支的鍵盤回饋與停用外觀不一樣。這裡把兩種狀態
   補成同一組，不改任何已生效的選中樣式。 */
.journey-account-choice:has(input:focus-visible),
.journey-reminder-option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.journey-reminder-option:hover:not(:has(input:disabled)) { border-color: #e4ae87; background: #fffaf6; }
/* 停用不能只靠 .is-unavailable：那個 class 只有家庭帳號那一條路會加，
   其他分支把 input 設成 disabled 之後卡片看起來仍然可以按。 */
.journey-account-choice:has(input:disabled),
.journey-reminder-option:has(input:disabled) {
  border-style: dashed;
  background: #f7f4f0;
  color: #8b8178 !important;
  cursor: not-allowed;
  opacity: .72;
}
.journey-account-choice:has(input:disabled):hover,
.journey-reminder-option:has(input:disabled):hover {
  border-color: #ddd2c5;
  background: #f7f4f0;
  transform: none;
}
.journey-account-choice:has(input:disabled) span:before { border-color: #c9bfb4; background: #eee8e1; }
/* 複選卡片停用時仍要看得出它是複選（方框，不是圓點） */
.journey-account-choice--multi:has(input:disabled) span:before { border-radius: 5px; }