/* The live deck (design notes 2026-10-05-build16, item 6): the welcome's first three cards are close-ups of the app itself,
   built from its own markup and styles.css, played by deck.js. Each stage is a window the width of the card; inside it the
   app's components sit at their own size. With no data-phase the stage shows the finished state (a still frame, reduce
   motion); deck.js sets data-phase as it plays. Only the stage's own look and the phases live here. */

.deck-card.deck-live-card { padding: var(--s-4) var(--s-12); }
.deck-live { position: relative; width: 100%; height: min(58vh, 490px); height: min(58dvh, 490px);   /* the dynamic viewport (build19, 14) */
  height: min(calc(58dvh + 60px), 550px);   /* plus the row Next used (build22, item 3): the chevrons share the dots' line now */
  overflow: hidden; border-radius: 16px; border: 1px solid var(--line);
  background: var(--bg); box-shadow: var(--shadow); text-align: left; }
.deck-live > * { transition: opacity .22s ease; }
.deck-live.dl-resetting > * { opacity: 0; }
.deck-live .dl-view { overflow: hidden; }
.deck-live .dl-follow { transition: transform .3s ease; }

/* A finger's tap: a ring at the target, and the target dips. */
.dl-tap { position: absolute; z-index: 5; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: var(--brand); opacity: 0; pointer-events: none; }
.dl-tap.on { animation: dl-tap .6s ease-out; }
@keyframes dl-tap { 0% { transform: scale(.35); opacity: .5; } 60% { opacity: .3; } 100% { transform: scale(1.35); opacity: 0; } }
.deck-live .dl-pressed { transform: scale(.95); filter: brightness(.93); transition: transform .1s ease, filter .1s ease; }
@keyframes dl-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes dl-blink { 50% { opacity: 0; } }

/* 1. The request comes in: the Mailbox's card (Build 17's row is its head), the note, the reply typing, Send lighting up.
   Since design notes 2026-10-06-build22, item 2, nothing on the card moves while the reply types: the note sits under the name
   and the date the way the Mailbox row shows a request (the quote's 14 px, three short lines). The camera that slid the card up
   (and pinned the head, build18 item 11) is gone from this card. Since 2026-10-06-build23, item 4, nothing scrolls either: the
   reply's box is the finished reply's height from the first frame (an unseen copy of it, .dl-ghost, holds the room while the
   typed one fills it in the same grid cell), so the whole reply, the Send row and the dots are on one screen at the end. The
   stage grows past the shared height when the card needs it (the track takes the tallest card's height). */
.dl-request { height: auto; min-height: min(58vh, 490px); min-height: min(calc(58dvh + 60px), 550px); }
.dl-request .dl-view { padding: var(--s-12); box-sizing: border-box; }
/* A tall phone (390x844) gives the stage more height than the card needs: the card sits in the middle of it, the band even above
   and below (build26, item 4), not all of it under the card. Where the card fills the stage (375x667) the auto margins are 0 and
   nothing moves. */
.dl-request { display: flex; flex-direction: column; }
.dl-request > .dl-view { margin-block: auto; }
.dl-request .dl-reply { display: grid; }
.dl-request .dl-reply > .text { grid-area: 1 / 1; }
.dl-request .dl-ghost { visibility: hidden; }
.dl-request .dl-card { transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.dl-request .dl-note { margin: var(--s-4) 0 0; font: 400 14px/1.45 var(--ui); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* A phone under 720 tall (build23, item 4): the reply a size down (17 to 16 px, these phones only), less air over the stage, and
   the caption a step down; the stage and the card's own padding a little tighter. */
@media (max-height: 719px) {
  .dl-request .dl-reply > .text { font-size: 16px; }
  .welcome-card.deck { padding-top: var(--s-8); }
  .deck-card.deck-live-card { padding-top: 0; }
}
.deck-card figcaption.dl-cap-request { font-size: .95rem; min-height: 0; }
.dl-request .dl-writing, .dl-request .dl-drafting { display: none; }
.dl-request:is([data-phase="empty"], [data-phase="arrived"], [data-phase="typing"]) .dl-ready { display: none; }
.dl-request:is([data-phase="empty"], [data-phase="arrived"], [data-phase="typing"]) .dl-drafting { display: inline-flex; }
.dl-request .send-split, .dl-request .btn.book { transition: opacity .3s ease, filter .3s ease; }
.dl-request[data-phase="empty"] .dl-card { opacity: 0; transform: translateY(-18px); }
.dl-request:is([data-phase="empty"], [data-phase="arrived"]) .draft .label.corner { display: none; }
.dl-request:is([data-phase="empty"], [data-phase="arrived"]) .dl-writing { display: inline; }
.dl-request:is([data-phase="empty"], [data-phase="arrived"], [data-phase="typing"]) :is(.send-split, .btn.book) { opacity: .38; filter: saturate(0); }
.dl-request[data-phase="typing"] [data-live-type="reply"]::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px;
  margin-right: -3px; vertical-align: -.15em;   /* no room of its own, so the typed lines break where the finished ones do */ background: var(--brand); animation: dl-blink .8s steps(1) infinite; }
.dl-request[data-phase="lit"] .send-main { animation: dl-glow .8s ease-out; }
@keyframes dl-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

/* 2. Ask: the Ask box, the question typing, the arrow, the answer streaming in line by line. */
.dl-ask { display: flex; flex-direction: column; }
.dl-ask .dl-chat-bar { justify-content: center; min-height: 52px; }
.dl-ask .chat-title { display: inline-flex; align-items: center; gap: var(--s-8); margin: 0; font: 700 1.05rem/1.2 var(--ui); }
.dl-ask .chat-title .mark-inline { width: 22px; height: 22px; }
.dl-ask .dl-view { flex: 1; min-height: 0; }
.dl-ask .chat-thread { flex: none; overflow: visible; min-height: 100%; justify-content: flex-end; padding-top: var(--s-16); gap: var(--s-16); }
.dl-ask .chat-empty { display: none; }
.dl-ask .chat-thread .me, .dl-ask .chat-thread .bot { font-size: 1.1rem; }
.dl-ask .chat-thread .bot { min-width: 76%; }
.dl-ask .compose { padding: var(--s-12); }
.dl-ask .compose textarea { height: 46px; font-size: 16px; }
.dl-ask .send-btn { transition: opacity .2s ease, transform .1s ease; }
.dl-ask .dl-thinking { display: none; color: var(--muted); }
.dl-ask .bot .dl-owe { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-12); align-items: baseline; }
.dl-ask .bot .dl-owe b { font-weight: 700; }
.dl-ask .bot .dl-owe .dl-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.dl-ask .bot .dl-owe small { grid-column: 1 / -1; color: var(--muted); font-size: .84rem; }
.dl-ask .bot .dl-offer { margin-top: var(--s-4); }
.dl-ask .dl-wait { display: none; }
.dl-ask:is([data-phase="empty"], [data-phase="typing"], [data-phase="typed"]) .chat-empty { display: block; }
.dl-ask:is([data-phase="empty"], [data-phase="typing"], [data-phase="typed"]) :is(.me, .bot) { display: none; }
.dl-ask:is([data-phase="empty"], [data-phase="typing"]) .send-btn { opacity: .45; }
.dl-ask[data-phase="sent"] .bot { display: none; }
.dl-ask[data-phase="sent"] .me { animation: dl-rise .3s ease-out; }
.dl-ask[data-phase="thinking"] .bot { animation: dl-rise .3s ease-out; }
.dl-ask[data-phase="thinking"] .dl-thinking { display: inline; }
.dl-ask[data-phase="stream"] .bot [data-live-line] { animation: dl-rise .25s ease-out; }

/* 3. The calendar: the list, a tap, the event's sheet sliding up with its details, a tap on Read the conversation. */
.dl-calendar .dl-list { padding: var(--s-4) var(--s-12) var(--s-12); }
.dl-calendar .dl-list .divider { padding-top: var(--s-8); padding-bottom: var(--s-4); }
.dl-calendar .ev { cursor: default; }
.dl-calendar .dl-scrim { position: absolute; inset: 0; background: rgba(20, 16, 12, .32); transition: opacity .3s ease; }
.dl-calendar .dl-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 44px; background: var(--bg); border-radius: 16px 16px 0 0;
  border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .14); transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
.dl-calendar .dl-grab { position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line); }
.dl-calendar .dl-sheet > .dl-view { position: absolute; inset: 18px 0 0; }
.dl-calendar .cal-sheet { min-height: 100%; align-content: start; padding-top: var(--s-4); gap: var(--s-12); }
.dl-calendar .ev-facts { row-gap: var(--s-12); font-size: .95rem; }
.dl-calendar .dl-read { min-height: 0 !important; padding-block: var(--s-4) !important; }
.dl-calendar .dl-conv .msg { max-width: 100%; }
.dl-calendar:is([data-phase="list"]) .dl-scrim { opacity: 0; }
.dl-calendar:is([data-phase="list"]) .dl-sheet { transform: translateY(105%); }
.dl-calendar:is([data-phase="list"], [data-phase="sheet"]) .dl-conv { display: none; }
.dl-calendar[data-phase="open"] .dl-conv { animation: dl-rise .35s ease-out; }

/* A short phone: the sheet comes up higher over the list, so the event's name and the conversation both fit. */
@media (max-height: 720px) {
  .dl-calendar .dl-sheet { top: 10px; }
  .dl-calendar .dl-sheet > .dl-view { top: 14px; }
  .dl-calendar .cal-sheet { padding-top: 0; }
  .dl-calendar .cal-sheet { gap: var(--s-8); }
  .dl-calendar .ev-facts { row-gap: var(--s-8); }
}

@media (prefers-reduced-motion: reduce) {
  .deck-live, .deck-live * { transition: none !important; animation: none !important; }
}
/* Card 3's last beat (build19, item 13): the pin by the address, then the app's choice sheet slides up and the loop ends there. */
.dl-calendar .dl-maps { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .18); transition: transform .3s ease; }
.dl-calendar .dl-maps .pick-sheet { padding: var(--s-16) var(--s-16) var(--s-24); }
.dl-calendar .dl-maps .sheet-title { margin: 0; font-size: 1.05rem; }
.dl-calendar .dl-maps-scrim { transition: opacity .3s ease; }
.dl-calendar:is([data-phase="list"], [data-phase="sheet"], [data-phase="open"], [data-phase="contact"]) .dl-maps { transform: translateY(110%); }
.dl-calendar:is([data-phase="list"], [data-phase="sheet"], [data-phase="open"], [data-phase="contact"]) .dl-maps-scrim { opacity: 0; }
.dl-calendar .ev-pin, .dl-calendar .ev-where { border: 0; background: none; box-shadow: none; }
/* Card 3's Contact (build22, item 4): the app's own contact sheet (nav.js contactMenuHtml), under the Contact button, shown only in
   its beat; the finished frame (and reduce motion) is the map step, so it is hidden there. */
.dl-calendar .dl-contact { z-index: 4; max-width: calc(100% - 16px); visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.dl-calendar[data-phase="contact"] .dl-contact { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
.dl-calendar[data-phase="contact"] [data-live-contact] { border-color: var(--brand); color: var(--brand-soft); }

/* Design notes 2026-10-05-build19, item 12 (c): the Ask card ends with the app's own bottom bar (nav.js barHtml), sitting in the card
   instead of on the screen's bottom edge, at full strength (the app's bar is dim until it loads), Ask marked, its circle the loop's
   first tap. (Item 12 (b)'s title over the deck went in build20, item 1: the welcome card owns it.) */
.dl-ask .compose { padding-bottom: var(--s-40); }   /* room for the bar's raised circle, as in the app */
.dl-ask .dl-nav { position: relative; z-index: 1; left: auto; right: auto; bottom: auto; max-width: none; margin: 0; padding-bottom: 0; flex: none; }
.dl-ask .dl-nav button:disabled { opacity: 1; }
.dl-ask .dl-nav .ask-slot.dl-pressed .ask-circle { transform: scale(.93); transition: transform .1s ease; }
/* Item 10: the request card's row shows only what fits whole (the name, the tag, the date), so on a 375 wide phone the stage
   gives the card a little more of its width rather than cut the name. */
@media (max-width: 380px) {
  .deck-card.deck-live-card { padding-inline: var(--s-8); }
  .dl-request .dl-view { padding: var(--s-8); }   /* the card's padding, on its window since build22, item 2 */
}
.dl-request .mh-who, .dl-request .mh-name { flex: none; }