/* program — the cream epilogue (module: program): date card, departure-board countdown, status card,
   Le classement, venue grid, arches, travel rows, the wall (teaser + full-height chat sheet), sign out.
   The chrome (topbar/actbar/sound) on the cream page is styled in shell.css. All motion here is GSAP
   (js/scenes/program.js); this file only holds rest states, so a page without GSAP still reads whole. */
.program { background: var(--paper); color: var(--ink); }
.program .fg { padding-top: calc(var(--safe-top) + 24px); padding-bottom: calc(var(--safe-bottom) + 96px); }
.program .kicker { color: var(--ink-3); }
.program .muted, .program .link, .program .who, .program .chat-empty { color: var(--ink-3); }
.program .muted { font-size: var(--t-s); }
.program .btn { background: var(--ink); color: var(--paper); }
.program .btn.ghost { background: transparent; color: var(--ink); border-color: rgba(16, 24, 39, 0.2); }
.program .btn.sm { margin-top: 14px; }

/* ---------- date card: graded venue plate, gold wash, cream kicker, wedding day, italic month ---------- */
.datecard { position: relative; border-radius: var(--r-l); overflow: hidden; color: var(--cream); aspect-ratio: 4 / 5; background: var(--night-2); box-shadow: 0 40px 60px -36px rgba(16, 24, 39, 0.7); }
.datecard .plates { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.datecard .plates img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 79% 50%); filter: saturate(0.98) brightness(0.82) contrast(1.06); }
.datecard .wash { position: absolute; inset: 0; z-index: 1; background: var(--gold); mix-blend-mode: soft-light; opacity: 0.25; pointer-events: none; }
.datecard::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to top, rgba(5, 8, 15, 0.86), rgba(5, 8, 15, 0.38) 38%, rgba(5, 8, 15, 0) 66%);
  box-shadow: inset 0 0 0 var(--hairline) rgba(244, 238, 227, 0.2); }
.datecard .in { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; }
.datecard .kicker { color: var(--cream); margin-bottom: 14px; text-shadow: 0 1px 12px rgba(5, 8, 15, 0.55); }
.datecard .big { display: flex; align-items: baseline; font-family: var(--display); font-weight: 300; font-size: 88px; line-height: 0.9; letter-spacing: -0.04em; font-variation-settings: "opsz" 144; text-shadow: 0 2px 18px rgba(5, 8, 15, 0.45); }
.datecard .big .d, .datecard .big .dash { display: inline-block; will-change: transform; }
.datecard .big .dash { font-style: italic; color: var(--clay); font-size: 0.6em; margin: 0 0.05em; font-variation-settings: var(--wonk); }
.datecard .month { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 28px; margin-top: 8px; text-shadow: 0 1px 10px rgba(5, 8, 15, 0.4); }

/* ---------- countdown: five split-flap units on white tiles (core flap() builds the digits) ---------- */
.countdown { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 18px; text-align: center; }
.countdown .unit b { display: inline-flex; font-family: var(--display); font-weight: 300; font-size: 34px; line-height: 1; letter-spacing: -0.02em; font-variation-settings: "opsz" 48; color: var(--ink); }
.countdown .flap { gap: 2px; perspective: 300px; }
.countdown .flap .digit { width: 0.64em; height: 1.24em; border-radius: 8px; background: #fff; border: 1px solid rgba(16, 24, 39, 0.08); box-shadow: 0 8px 16px -12px rgba(16, 24, 39, 0.4); }
.countdown .flap .digit .top { border-bottom-color: rgba(16, 24, 39, 0.1); }
.countdown .flap .digit .top > span, .countdown .flap .digit .leaf > span, .countdown .flap .digit .bot > span { line-height: 1.24; }
.countdown .lbl { display: block; margin-top: 8px; letter-spacing: 0.2em; color: var(--ink-3); }

/* ---------- status card: what you said · score + rank · where the paper goes ---------- */
.wedding-question-card { display:flex; flex-direction:column; align-items:flex-start; width:100%; margin-top:24px; padding:20px; text-align:left; border:1px solid rgba(81,91,69,.24); border-radius:var(--r-m); background:#e9eadf; color:var(--ink); cursor:pointer; }
.question-card-kicker { font:600 10px/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#515b45; }
.question-card-prompt { margin-top:8px; font:400 24px/1.15 var(--display); text-wrap:pretty; }
.question-card-action { display:block; margin-top:12px; color:#515b45; font:600 12px/1.5 var(--sans); }
.wedding-question-card:focus-visible { outline:2px solid var(--clay); outline-offset:3px; }
.status { margin-top: 18px; padding: 2px 16px; border-radius: var(--r-m); background: #fff; border: 1px solid rgba(16, 24, 39, 0.08); box-shadow: 0 24px 40px -34px rgba(16, 24, 39, 0.5); }
.status .srow { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; }
.status .srow + .srow { border-top: var(--hairline) solid rgba(16, 24, 39, 0.1); }
.status .srow > div { min-width: 0; }
.status .line { margin: 0; font-size: var(--t-s); line-height: 1.4; }
.status .line b { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 17px; font-variation-settings: var(--wonk); }
.status .line.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status .score { margin: 3px 0 0; font-size: 13px; }
.status .score[hidden] { display: none; }
.status .link { flex: none; padding: 10px 2px; }

/* ---------- sections ---------- */
.psec { margin-top: 48px; }
.psec h2 { font-size: 30px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.08; margin: 2px 0 14px; font-variation-settings: "opsz" 72; }
.psec h2 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 0.04em 0.16em 0; margin-bottom: -0.16em; }
.psec h2 .w > * { display: inline-block; will-change: transform; }
.psec h2 .amp { font-style: italic; font-weight: 400; color: var(--clay); font-variation-settings: var(--wonk); }
.fr { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 15px; color: var(--clay); letter-spacing: 0; text-transform: none; display: block; margin-bottom: 2px; }
.psec .sub { margin: -4px 0 14px; }

/* photos: one gold soft-light wash + an inset hairline on every photo */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.pgrid .tile { position: relative; aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden; background: var(--paper-2); }
.pgrid .tile:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
.pgrid .tile img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.photo { position: relative; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-2); box-shadow: 0 30px 50px -30px rgba(16, 24, 39, 0.6); }
.photo.arch { border-radius: 999px 999px 18px 18px; aspect-ratio: 4 / 5.2; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; will-change: transform; }
.photo img.ph { object-position: 20% 50%; }
.photo::before, .pgrid .tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--gold); mix-blend-mode: soft-light; opacity: 0.22; pointer-events: none; }
.photo::after, .pgrid .tile::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 var(--hairline) rgba(16, 24, 39, 0.14); pointer-events: none; }
.photo .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 14px 16px; font-family: var(--display); font-style: italic; font-size: 15px; color: var(--cream); background: linear-gradient(transparent, rgba(5, 8, 15, 0.7)); font-variation-settings: var(--wonk); }
.program .addr { margin-top: 12px; }

/* travel rows: a hairline that draws itself above each */
.info { position: relative; display: flex; gap: 14px; padding: 15px 0; }
.info .rule { position: absolute; left: 0; right: 0; top: 0; height: var(--hairline); margin: 0; background: rgba(16, 24, 39, 0.16); animation: none; transform: none; transform-origin: 0 50%; }
.info b { flex: none; width: 70px; font-family: var(--display); font-weight: 400; font-size: 19px; font-style: italic; font-variation-settings: var(--wonk); }
.info p { margin: 0; color: var(--ink-2); font-size: var(--t-s); line-height: 1.45; }

/* ---------- Le classement: top 5 + you in the ink palette ---------- */
.board, .board-tail, .board-rest { list-style: none; margin: 0; padding: 0; }
.board-rest { height: 0; overflow: hidden; }
.board-tail { overflow: hidden; }
.board::before { content: ""; display: block; height: var(--hairline); background: rgba(16, 24, 39, 0.1); }
.brow { position: relative; display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto 2px; column-gap: 12px; row-gap: 7px; align-items: baseline; min-height: 48px; padding: 9px 0 8px; border-bottom: var(--hairline) solid rgba(16, 24, 39, 0.1); }
.brow .rank { grid-row: 1 / span 2; align-self: start; font-family: var(--display); font-weight: 300; font-size: 19px; line-height: 20px; letter-spacing: -0.01em; color: var(--ink-3); white-space: nowrap; }
.brow .rank b { display: inline-block; line-height: 20px; color: var(--gold); }
.brow .name { font: 500 14px/20px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow .pts { font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 20px; white-space: nowrap; }
.brow .bar { grid-column: 2 / span 2; height: 2px; border-radius: 1px; background: rgba(16, 24, 39, 0.06); overflow: hidden; align-self: end; }
.brow .bar i { display: block; height: 100%; width: 100%; border-radius: 1px; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, var(--gold), var(--clay)); }
.brow.mine { margin: 4px -12px; padding: 9px 12px 8px; border-radius: var(--r-s); border-bottom: 0; background: var(--ink); color: var(--cream); }
.brow.mine .rank { color: var(--gold); }
.brow.mine .bar { background: rgba(244, 238, 227, 0.14); }
.brow.mine .bar i { background: var(--gold); }
.brow.mine .badge { display: inline-block; margin-left: 8px; padding: 5px 8px 4px; border-radius: var(--r-pill); background: var(--gold); color: var(--ink); vertical-align: 2px; }
.brow.mine .ring { position: absolute; inset: -2px; border-radius: inherit; border: 1.5px solid var(--gold); opacity: 0; pointer-events: none; }
.brow.more { display: flex; justify-content: center; align-items: center; min-height: 32px; padding: 0; color: var(--ink-3); border-bottom: 0; }
.board-rest .brow:last-child { border-bottom: 0; }
.lbfoot { margin-top: 4px; }
.lbfoot .link { padding-left: 0; padding-right: 0; }
.lbnote { margin: 10px 0 0; font-family: var(--display); font-style: italic; font-size: 16px; line-height: 1.35; color: var(--ink-3); font-variation-settings: var(--wonk); text-wrap: pretty; }
.lbplay { margin-top: 14px; }
.share-slot { margin-top: 10px; }
.share-slot:empty { display: none; }

/* ---------- the wall: teaser (latest three) + the sheet ---------- */
.wall-teaser { margin-top: 14px; }
.tlist { display: flex; flex-direction: column; gap: 10px; }
.open-wall { margin-top: 14px; }
.msg { position: relative; max-width: 86%; align-self: flex-start; }
.msg.mine { align-self: flex-end; }
.msg .who { margin: 0 0 4px 12px; font-size: 12px; letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums; }
.msg .who b { font: var(--caps-xs); letter-spacing: 0.16em; text-transform: uppercase; }
.msg.mine .who { text-align: right; margin: 0 12px 4px 0; }
.msg .txt { background: #fff; border: 1px solid rgba(16, 24, 39, 0.08); border-radius: 18px 18px 18px 6px; padding: 10px 14px; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.msg.mine .txt { background: var(--ink); color: var(--paper); border-color: var(--ink); border-radius: 18px 18px 6px 18px; }
.msg.pending { opacity: 0.6; }
.msg.failed { cursor: pointer; }
.msg.failed .txt { background: #fff; color: var(--ink); border-color: var(--clay); }
.msg .retry { margin: 5px 12px 0 0; text-align: right; font-size: 12px; color: var(--clay); }
.chat-empty { text-align: center; font-family: var(--display); font-style: italic; font-size: 15px; padding: 20px 0; font-variation-settings: var(--wonk); }

.wall-sheet { position: absolute; inset: 0; z-index: 28; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); padding-top: var(--safe-top); will-change: transform; box-shadow: 0 -20px 60px rgba(5, 8, 15, 0.35); }
.wall-head { position: relative; flex: none; padding: 0 var(--pad); }
.wall-head .handle { height: 60px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.wall-head .handle i { width: 36px; height: 4px; border-radius: 2px; background: rgba(16, 24, 39, 0.2); }
.wall-head .bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: var(--hairline) solid rgba(16, 24, 39, 0.1); }
.wall-head h2 { font-size: 28px; font-weight: 400; letter-spacing: -0.01em; line-height: 1; }
.wall-head .count { display: block; margin-top: 8px; color: var(--ink-3); }
.wall-head .done { padding: 10px 2px; margin-bottom: -2px; }
.wall-list { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px var(--pad) 16px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wall-list::-webkit-scrollbar { display: none; }
.wall-list > :first-child { margin-top: auto; }
.newpill { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 92px + var(--kb)); z-index: 2; transform: translateX(-50%); padding: 10px 14px; border-radius: var(--r-pill); border: 0; background: var(--ink); color: var(--paper); box-shadow: 0 12px 24px -12px rgba(16, 24, 39, 0.6); cursor: pointer; white-space: nowrap; }
.newpill[hidden] { display: none; }
.composer { flex: none; display: flex; gap: 8px; align-items: center; padding: 10px var(--pad) calc(var(--safe-bottom) + 12px + var(--kb)); border-top: var(--hairline) solid rgba(16, 24, 39, 0.1); background: var(--paper); }
.composer .field { position: relative; flex: 1; min-width: 0; }
.composer input { width: 100%; min-height: 52px; padding: 0 56px 0 16px; border-radius: var(--r-pill); border: 1px solid rgba(16, 24, 39, 0.14); background: #fff; color: var(--ink); font: 500 15px var(--sans); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.composer input:focus { border-color: var(--clay); box-shadow: 0 0 0 4px rgba(210, 104, 74, 0.15); }
.composer .ph { position: absolute; left: 17px; right: 56px; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; pointer-events: none; color: var(--ink-3); font: 500 15px var(--sans); }
.composer .ph span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer .field.filled .ph { display: none; }
.composer .counter { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.composer .counter[hidden] { display: none; }
.composer .counter.hot { color: var(--clay); }
.composer .send { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; background: var(--clay); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(210, 104, 74, 0.8); overflow: hidden; }
.composer .send svg { width: 20px; height: 20px; display: block; }

/* footer */
.program .foot { margin-top: 40px; }
.program .credits { margin-top: 18px; font-size: var(--t-xs); line-height: 1.5; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .brow.mine .ring { display: none; }
}

/* Shared program photo, countdown and message states. The tabbed layout follows below. */
.program .fg { padding-bottom: calc(var(--safe-bottom) + 40px); }
.program .plates .plate { position: absolute; inset: 0; }
.program .plate img { width: 100%; height: 100%; object-fit: cover; }
.program .countdown .unit > b { font-size: 31px; }
.program .countdown .lbl { font-size: 9px; letter-spacing: .1em; }
.program .chat { display: flex; flex-direction: column; gap: 12px; max-height: 430px; overflow-y: auto; margin-top: 20px; padding: 6px 1px; overscroll-behavior: contain; }
.program .chat-form { padding: 14px 0 0; margin-top: 16px; }
.program .chat-form .send:disabled { opacity: .4; cursor: default; }
.program .brow .name { min-width: 0; }
.program .lbnote { min-height: 22px; }
.program .board + .link { padding-left: 0; }
.program .board + .link[hidden] { display: none; }
.program .info .rule { transform: none; }
.program .status .line.ellipsis { max-width: 230px; }

.datecard .details-to-come { margin: 14px 0 0; font-size: 14px; line-height: 1.4; color: var(--cream); text-shadow: 0 1px 10px rgba(5, 8, 15, 0.6); }

.status .tentative-note { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-3); text-wrap: pretty; }
.status .sms-choice { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 28px; }
.status .sms-choice input { width: 18px; height: 18px; min-width: 18px; margin: 0; padding: 0; accent-color: var(--clay); }
.status .sms-feedback { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.status .sms-feedback:empty { display: none; }

.travel-detail { min-width: 0; flex: 1; }
.travel-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 12px; color: var(--ink-2); text-underline-offset: 3px; }

/* A shared wedding anniversary, ready for the real family photograph. */
.anniversary-intro { margin: 12px 0 20px; color: var(--ink-2); line-height: 1.5; text-wrap: pretty; }
.program .anniversary .photo:not(.anniversary-photo-placeholder) { border-radius: 3px; aspect-ratio: 622 / 872; }
.program .anniversary .photo img { object-fit: contain; object-position: center; }
.program .anniversary .photo::before { display: none; }
.anniversary-photo-placeholder { display: grid; place-items: center; padding: 32px; background: linear-gradient(145deg, #eee5d4, #e4dac5); box-shadow: inset 0 0 0 1px rgba(16, 24, 39, 0.12); }
.anniversary-photo-placeholder::before { display: none; }
.photo-placeholder-label { max-width: 230px; margin: 0; text-align: center; color: var(--ink-3); font-family: var(--display); font-style: italic; font-size: 22px; line-height: 1.35; }

/* The final program is a set of independently scrolling panels. Earlier scenes keep their existing chrome. */
.scene.program.tabbed {
  --program-nav-height: calc(70px + var(--safe-bottom));
  overflow: hidden;
}
.program.tabbed .program-panels { position: absolute; inset: 0 0 var(--program-nav-height); min-height: 0; }
.program.tabbed .program-panel { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.program.tabbed .program-panel::-webkit-scrollbar { display: none; }
.program.tabbed .program-panel[hidden] { display: none !important; }
.program.tabbed .program-panel > .fg { min-height: 100%; padding-top: calc(var(--safe-top) + 76px); padding-bottom: 32px; }
.program.tabbed .program-panel[data-tab="event"] > .fg { padding-top: calc(var(--safe-top) + 24px); }
.program.tabbed .program-panel > .fg > .psec:first-child { margin-top: 0; }
.program.tabbed .program-panel:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }

/* Three quiet destinations, pinned inside the phone frame above its safe area. */
.program-tabs {
  position: absolute; z-index: 26; left: 0; right: 0; bottom: 0; height: var(--program-nav-height);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  padding: 7px 12px calc(var(--safe-bottom) + 7px);
  background: rgba(247, 242, 232, 0.96); border-top: 1px solid rgba(16, 24, 39, 0.12);
  box-shadow: 0 -12px 30px -22px rgba(16, 24, 39, 0.28);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transition: opacity .2s ease, transform .2s ease;
}
.program-tab {
  position: relative; min-width: 0; min-height: 52px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px; padding: 5px 4px 4px;
  border: 0; border-radius: 14px; background: transparent; color: var(--ink-3); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color .2s ease, background-color .2s ease;
}
.program-tab svg { display: block; flex: none; width: 21px; height: 21px; stroke-width: 1.6; }
.program-tab span { font-family: var(--sans); font-size: 10px; line-height: 1.2; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.program-tab[aria-selected="true"] { color: #a44d35; background: rgba(210, 104, 74, .09); }
.program-tab[aria-selected="true"] svg { stroke-width: 1.9; }
.program-tab:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
@media (hover: hover) { .program-tab:hover { color: var(--ink); background: rgba(16, 24, 39, .04); } .program-tab[aria-selected="true"]:hover { color: #a44d35; background: rgba(210, 104, 74, .13); } }

/* Wall is a full-height conversation: only messages scroll, while its composer stays above the tabs. */
.program.tabbed .program-panel[data-tab="wall"] { overflow: hidden; }
.program.tabbed .program-panel[data-tab="wall"] > .fg { height: 100%; min-height: 0; padding-bottom: 0; }
.program.tabbed .wall-section { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
.program.tabbed .wall-section > .fr, .program.tabbed .wall-section > h2, .program.tabbed .wall-section > .muted { flex: none; }
.program.tabbed .wall-section > h2 { margin-bottom: 8px; }
.program.tabbed .wall-section > .muted { margin: 0 0 8px; line-height: 1.45; }
.program.tabbed .wall-section .chat { flex: 1; min-height: 0; max-height: none; margin: 0; padding: 14px 1px 16px; overflow-y: auto; }
.program.tabbed .wall-section .chat > :first-child { margin-top: auto; }
.program.tabbed .wall-section .chat-empty:only-child { margin-top: auto; margin-bottom: auto; }
.program.tabbed .wall-section .chat-form { flex: none; margin-top: 0; padding: 12px 0 12px; }
.program.tabbed .wall-section .chat-form input { min-width: 0; }

/* During typing, reclaim the tab strip for the conversation and follow the visual keyboard inset. */
.kb .scene.program.tabbed .program-panels { bottom: var(--kb); }
.kb .scene.program.tabbed .program-tabs { opacity: 0; transform: translateY(100%); pointer-events: none; }
.kb .scene.program.tabbed .wall-section .chat-form { padding-bottom: 10px; }
@media (max-height: 650px) {
  .program.tabbed .program-panel[data-tab="wall"] > .fg { padding-top: calc(var(--safe-top) + 65px); }
  .program.tabbed .wall-section > h2 { font-size: 26px; margin-bottom: 6px; }
  .program.tabbed .wall-section > .muted { font-size: 13px; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .program-tabs, .program-tab { transition: none; } }
.program.tabbed .wall-section .composer input::placeholder { color: var(--ink-3); opacity: .85; }

/* Travel: adapted from Charlie’s supplied scrapbook template. */
@font-face { font-family:'Travel Newsreader'; font-style:normal; font-weight:400 500; font-display:swap; src:url('/assets/travel/claude-template/newsreader-latin.woff2') format('woff2'); }
@font-face { font-family:'Travel Newsreader'; font-style:italic; font-weight:400; font-display:swap; src:url('/assets/travel/claude-template/newsreader-italic-latin.woff2') format('woff2'); }
@font-face { font-family:'Travel Manrope'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/travel/claude-template/manrope-latin.woff2') format('woff2'); }
.program.tabbed[data-program-tab="travel"] { background:#f4efe6; }
.program.tabbed .program-panel[data-tab="travel"] > .fg { padding-left:24px; padding-right:24px; }
.travel-guide { --travel-olive:#4e5641; --travel-line:#dcd4c5; --travel-muted:#63645a; --travel-card:#fbf8f2; --travel-display:'Travel Newsreader',Georgia,serif; font-family:'Travel Manrope',var(--sans); color:#22231f; }
.travel-guide > h2 { font:400 40px/1.05 var(--travel-display); letter-spacing:-.01em; margin:0; }
.travel-guide h3,.travel-guide h4,.travel-guide p,.travel-guide figure { margin:0; }
.travel-guide .travel-link { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:44px; font-size:15px; line-height:1.5; font-weight:600; color:#22231f; text-underline-offset:3px; }
.travel-guide .travel-link:focus-visible { outline:2px solid var(--clay-2); outline-offset:3px; border-radius:2px; }
.travel-guide .travel-link:hover { color:#9e4430; }
.travel-icon { display:inline-flex; flex:none; width:16px; height:16px; vertical-align:middle; }
.travel-icon svg { display:block; width:100%; height:100%; }
.arrival-flow { text-align:center; }
.arrival-venue { padding:0; }
.venue-collage { position:relative; width:100%; aspect-ratio:342 / 296; margin-top:28px; }
.venue-thumbs { position:absolute; inset:0; }
.travel-photo { min-width:0; }
.venue-thumbs .travel-photo { position:absolute; box-sizing:border-box; padding:7px 7px 28px; background:#fffdf8; box-shadow:0 8px 22px rgba(34,35,31,.16); }
.venue-thumbs .travel-photo:nth-child(1) { left:1.17%; top:8%; width:57.3%; transform:rotate(-5deg); z-index:1; }
.venue-thumbs .travel-photo:nth-child(2) { right:.58%; top:0; width:43.3%; padding:6px 6px 26px; transform:rotate(6deg); z-index:2; }
.venue-thumbs .travel-photo:nth-child(3) { left:43.86%; top:54%; width:45.6%; padding:6px 6px 26px; transform:rotate(-2deg); z-index:3; box-shadow:0 10px 24px rgba(34,35,31,.2); }
.travel-thumb { display:block; overflow:hidden; }
.travel-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.venue-thumbs .travel-thumb { aspect-ratio:182 / 150; }
.venue-thumbs .travel-photo:nth-child(2) .travel-thumb { aspect-ratio:136 / 124; }
.venue-thumbs .travel-photo:nth-child(3) .travel-thumb { aspect-ratio:144 / 104; }
.venue-thumbs figcaption { position:absolute; left:0; right:0; bottom:6px; text-align:center; font:italic 400 14px/1 var(--travel-display); color:#55564c; }
.venue-thumbs .travel-photo:nth-child(3) figcaption { font-size:13px; white-space:nowrap; }
.venue-ribbon { position:absolute; left:-2.3%; top:-2.2%; z-index:4; width:46.8%; height:auto; transform:rotate(-8deg); filter:drop-shadow(0 4px 6px rgba(34,35,31,.28)); }
.arrival-venue h3 { margin:14px 0 4px; font:400 34px/1.08 var(--travel-display); color:var(--travel-olive); }
.arrival-venue .venue-town { font-size:13px; line-height:1.5; color:var(--travel-muted); }
.venue-map-link { text-decoration:none; }
.arrival-venue .venue-history { margin:4px auto 0; max-width:380px; font-size:13px; line-height:1.55; color:var(--travel-muted); text-wrap:pretty; }
.arrival-last-leg { display:flex; flex-direction:column; align-items:center; padding-top:12px; }
.arrival-last-leg::before { content:''; width:1px; height:30px; background:linear-gradient(to bottom,transparent,#cfc6b5); }
.arrival-drive { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:7px 14px; border:1px solid #d3cab9; border-radius:999px; background:var(--travel-card); color:var(--travel-olive); font-size:15px; font-weight:600; line-height:1.5; }
.arrival-to { display:flex; flex-direction:column; align-items:center; gap:3px; font:italic 400 18px/1 var(--travel-display); color:var(--travel-muted); }
.arrival-to::before,.arrival-to::after { content:''; height:10px; width:1px; background:#cfc6b5; }
.arrival-hub { position:relative; padding:34px 20px 20px; border:1px solid var(--travel-line); border-radius:20px; background:var(--travel-card); }
.city-seal { position:absolute; right:-14px; top:-40px; z-index:2; width:67px; height:auto; transform:rotate(12deg); filter:drop-shadow(0 4px 6px rgba(34,35,31,.28)); }
.arrival-kicker { display:block; font-size:12px; font-weight:700; letter-spacing:.12em; line-height:1.5; text-transform:uppercase; color:var(--travel-muted); }
.arrival-hub h3 { margin-top:4px; font:400 32px/1.1 var(--travel-display); color:var(--travel-olive); }
.city-thumbs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px; }
.city-thumbs .travel-thumb { aspect-ratio:1; border-radius:10px; }
.arrival-hub .city-description { margin-top:14px; font-size:15px; line-height:1.55; color:var(--travel-muted); }
.arrival-branches { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding-top:62px; }
.arrival-branch-label { position:absolute; top:15px; left:0; right:0; font:italic 400 18px/1 var(--travel-display); color:var(--travel-muted); }
.arrival-branches::before { content:''; position:absolute; top:0; left:50%; width:1px; height:12px; background:#cfc6b5; box-shadow:0 36px 0 -0.1px #cfc6b5; }
.arrival-branches::after { content:''; position:absolute; top:44px; left:calc(25% - 3px); right:calc(25% - 3px); height:18px; border:1px solid #cfc6b5; border-bottom:0; }
.arrival-branch { min-width:0; display:flex; flex-direction:column; align-items:center; padding:16px 12px; border:1px solid var(--travel-line); border-radius:18px; background:var(--travel-card); }
.arrival-rail { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:5px 10px; background:#ece6d9; border-radius:999px; color:var(--travel-olive); }
.arrival-rail .travel-icon { width:14px; height:14px; }
.arrival-rail b { font-size:13px; font-weight:700; line-height:1.5; white-space:nowrap; }
.arrival-city { width:100%; border-bottom:1px solid var(--travel-line); padding:12px 0 14px; }
.arrival-city h4 { font:400 27px/1.1 var(--travel-display); color:var(--travel-olive); }
.arrival-station { display:block; margin-top:2px; font-size:12px; line-height:1.5; color:var(--travel-muted); }
.arrival-air { width:100%; padding-top:14px; }
.arrival-air p { font-size:15px; line-height:1.5; color:var(--travel-muted); }
.arrival-air .arrival-airport { display:flex; justify-content:center; align-items:baseline; gap:5px; font-weight:700; color:#22231f; }
.arrival-airport .travel-icon { width:14px; height:14px; transform:translateY(2px); }
.arrival-air p + p { margin-top:6px; }
.arrival-air .arrival-transfer { margin-top:10px; }
.arrival-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:0 14px; margin-top:auto; padding-top:8px; }
.arrival-direct { margin:24px 0 0; border:0; border-top:1px solid var(--travel-line); border-radius:0; padding:20px 0 0; background:transparent; box-shadow:none; }
.arrival-direct-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:5px 8px; }
.arrival-direct .arrival-kicker { color:var(--travel-muted); font-size:11px; font-weight:600; letter-spacing:.06em; }
.arrival-direct-date { color:var(--travel-muted); font-size:11px; font-weight:500; }
.arrival-direct h3 { margin-top:6px; font:400 21px/1.2 var(--travel-display); color:var(--travel-muted); }
.arrival-direct p { margin-top:4px; font-size:14px; line-height:1.5; color:var(--travel-muted); }
.arrival-direct .travel-link { font-size:14px; font-weight:500; color:var(--travel-muted); }
.direct-actions { display:flex; flex-wrap:wrap; column-gap:16px; margin-top:4px; }
.travel-stays { margin-top:40px; border-top:1px solid var(--travel-line); padding-top:40px; }
.travel-stays h3 { font:400 28px/1.15 var(--travel-display); }
.travel-stays p { font-size:15px; line-height:1.55; color:var(--travel-muted); }
.travel-stays .stay-pending { margin-top:6px; }
.stay-main { margin:16px 0; border:1px solid var(--travel-line); border-radius:20px; padding:20px 20px 18px; background:var(--travel-card); }
.stay-main h4 { font:400 26px/1.15 var(--travel-display); color:var(--travel-olive); }
.stay-main p { margin-top:6px; }
.stay-option { border-top:1px solid var(--travel-line); padding:14px 0; }
.stay-option:last-child { border-bottom:1px solid var(--travel-line); }
.stay-option h4 { font-size:17px; font-weight:600; line-height:1.5; }
.stay-option p { margin-top:3px; }
.travel-guide .travel-timing { margin-top:24px; font-size:12px; line-height:1.6; color:var(--travel-muted); }
@media(max-width:350px){
 .program.tabbed .program-panel[data-tab="travel"] > .fg { padding-left:20px; padding-right:20px; }
 .travel-guide > h2 { font-size:36px; }
 .venue-collage { margin-top:32px; margin-bottom:8px; }
 .venue-thumbs .travel-photo:nth-child(3) figcaption { font-size:11px; }
 .arrival-venue h3 { font-size:31px; }
 .arrival-hub { padding-left:16px; padding-right:16px; }
 .arrival-hub .arrival-kicker { font-size:10px; }
 .arrival-branch { padding-left:9px; padding-right:9px; }
 .arrival-rail { gap:4px; padding-left:6px; padding-right:6px; }
 .arrival-rail b { font-size:12px; }
 .arrival-city h4 { font-size:25px; }
 .arrival-air p,.arrival-actions .travel-link { font-size:14px; }
 .arrival-actions { column-gap:10px; }
}