/* Lavender sky. A living photograph behind a postcard answer. Builds on developers.css.
   Motion rule: when an answer lands, only opacity and transform move. The card never changes size. */

.sky { --soft: cubic-bezier(0.22, 1, 0.36, 1); --glide: cubic-bezier(0.65, 0, 0.35, 1); --ink-2: #4f4858; --ink-3: #5d5466; --periwinkle-ink: #5f67a3; position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: max(100svh, 760px); overflow: clip; background: #e7e0ef; color: var(--ink); }
.sky ::selection { background: #d9cdee; color: var(--ink); }
.sky-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sky-still, .sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-still { max-width: none; object-fit: cover; object-position: 60% 50%; transform: scale(1.06); }
.sky-canvas { display: block; opacity: 0; transition: opacity 1800ms ease; }
.sky-canvas.is-ready { opacity: 1; }
.sky-contrails { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sky-wash {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 44% 50% at 18% 70%, rgba(250, 249, 253, 0.72), rgba(250, 249, 253, 0) 100%),
    linear-gradient(90deg, rgba(250, 249, 253, 0.5) 0%, rgba(250, 249, 253, 0.3) 30%, rgba(250, 249, 253, 0) 52%),
    linear-gradient(180deg, rgba(250, 249, 253, 0.5) 0%, rgba(250, 249, 253, 0) 12%, rgba(250, 249, 253, 0) 80%, var(--paper) 100%);
}
.sky .dev-header { position: relative; z-index: 2; background: transparent; }
.sky .copy-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sky .btn.is-copied { background: var(--amber); border-color: var(--amber); color: var(--night) !important; }
.sky-credit { position: absolute; right: var(--gutter); bottom: 16px; margin: 0; color: var(--ink-3); font-size: 11.5px; }

/* On the full page the header stays outside the hero, sticky for the whole page.
   The hero tucks under it so the sky runs to the top, and the header stays clear until the page scrolls. */
.dev { --head: 76px; }
.sky--under-header { margin-top: calc(var(--head) * -1); padding-top: var(--head); }
.dev:has(.sky--under-header) .dev-header { transition: background-color 400ms ease, border-color 400ms ease; }
.dev:has(.sky--under-header) .dev-header:not(.is-scrolled) { background: transparent; }

/* ---------- Words ---------- */
.sky-main-wrap { display: flex; flex: 1; }
.sky-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 80px; align-items: center; padding: 12px 0 56px; }
.sky-copy h1 { color: var(--ink); font-size: clamp(44px, 5.2vw, 78px); line-height: 1; letter-spacing: -0.042em; }
.sky-accent { display: block; color: var(--periwinkle-ink); }
.sky-lede { max-width: 24em; margin-top: 24px; color: var(--ink-2); font-size: 19px; line-height: 1.5; letter-spacing: -0.01em; text-wrap: pretty; }
.sky-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sky-actions .btn-secondary { background: rgba(255, 255, 255, 0.42); }
.sky-actions .btn-secondary:hover { background: rgba(255, 255, 255, 0.72); }
.sky-fine { margin-top: 14px; color: var(--ink-3); font-size: 14px; }
/* The four live programs. Multiply drops the white ground some marks ship with, so every mark sits on the sky as ink. */
.sky-programs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 40px; color: var(--ink-3); font-size: 13px; }
.sky-programs img { width: auto; filter: grayscale(1) contrast(1.6); mix-blend-mode: multiply; opacity: 0.82; }
.sky-programs img[alt="Velocity"] { height: 22px; }
.sky-programs img[alt="Qantas Frequent Flyer"] { height: 15px; }
.sky-programs img[alt="Flying Blue"] { height: 13px; }
.sky-programs img[alt="Atmos Rewards"] { height: 21px; }

/* ---------- The postcard: one fixed frame for every answer ---------- */
.pass {
  --cut: 260px; --answer-h: 316px;
  position: relative; border-radius: 28px; color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.56));
  -webkit-backdrop-filter: blur(22px) saturate(1.45); backdrop-filter: blur(22px) saturate(1.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 44px 80px -44px rgba(72, 44, 112, 0.5);
  -webkit-mask: radial-gradient(circle 10px at 0 var(--cut), #0000 97%, #000), radial-gradient(circle 10px at 100% var(--cut), #0000 97%, #000);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 10px at 0 var(--cut), #0000 97%, #000) intersect, radial-gradient(circle 10px at 100% var(--cut), #0000 97%, #000);
}
.pass :focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

.pass-modes { display: flex; gap: 4px; margin: 12px 12px 0; padding: 4px; border-radius: var(--radius-pill); background: rgba(64, 54, 78, 0.06); }
.pass-modes button { flex: 1; min-height: 32px; padding: 5px 10px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-3); font: 650 13px Manrope, sans-serif; cursor: pointer; transition: background-color 400ms var(--soft), color 400ms var(--soft), box-shadow 400ms var(--soft); }
.pass-modes button:hover { color: var(--ink); }
.pass-modes button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(41, 37, 48, 0.1), 0 6px 14px -8px rgba(64, 40, 90, 0.35); }

.pass-ask { display: flex; align-items: center; gap: 12px; padding: 12px 14px 0 20px; }
.pass-glyph { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--plum); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pass-q { flex: 1; min-width: 0; min-height: 1.45em; overflow: hidden; color: var(--ink); font-size: 15.5px; font-weight: 550; line-height: 1.45; letter-spacing: -0.01em; white-space: nowrap; }
.pass-q span { display: inline-block; transition: opacity 760ms var(--soft), transform 900ms var(--soft); transition-delay: calc(var(--i, 0) * 38ms); }
.pass-send { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--plum); }
.pass-send svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* The place leads; the route sits on the photo */
.pass-photo { position: relative; height: 148px; margin: 12px 10px 0; overflow: hidden; border-radius: 18px; background: #d8cfe6; }
.pass-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1200ms var(--soft), transform 7s cubic-bezier(0.2, 0.6, 0.3, 1); }
.pass-photo img.is-on { opacity: 1; transform: none; }
.pass-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 12, 44, 0.26) 0%, rgba(21, 12, 44, 0) 32%, rgba(21, 12, 44, 0) 42%, rgba(21, 12, 44, 0.68) 100%); }
.pp-place { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 2px 9px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.84); color: var(--ink); font-size: 11.5px; font-weight: 700; }
.pass-route { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 0 16px 12px; color: #fff; }
.pr-end { display: grid; gap: 1px; margin: 0; transition: opacity 480ms var(--soft); }
.pr-end b { font-size: 21px; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pr-end span { color: rgba(255, 255, 255, 0.84); font-size: 11.5px; font-weight: 600; }
.pr-end--to { text-align: right; }
.pr-line { position: relative; height: 26px; margin-top: 1px; }
.pr-dots { position: absolute; left: 4px; right: 4px; top: 11px; height: 2px; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 1px, transparent 1.5px); background-size: 8px 2px; }
.pr-plane { position: absolute; top: 12px; left: 6px; width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform: translate(-50%, -50%) rotate(45deg); transition: left 1700ms var(--glide), opacity 480ms var(--soft); }
.pr-when { position: absolute; left: 50%; top: 18px; color: rgba(255, 255, 255, 0.84); font-size: 11.5px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); transition: opacity 480ms var(--soft); }

/* The perforation */
.pass-cut { height: 0; margin: 14px 18px 0; border-top: 1.5px dashed rgba(64, 54, 78, 0.2); }

/* Phases. Leaving and reset hide the question; searching moves the plane; arrived leaves it at the far end. */
.pass[data-phase="leaving"] .pass-q span, .pass[data-phase="reset"] .pass-q span { opacity: 0; transform: translateY(5px); transition-delay: 0ms; }
.pass[data-phase="leaving"] .pass-q span { transition: opacity 360ms ease, transform 360ms ease; }
.pass[data-phase="reset"] .pass-q span, .pass[data-phase="reset"] .pr-plane, .pass[data-phase="reset"] .pr-end, .pass[data-phase="reset"] .pr-when { transition: none; }
.pass[data-phase="leaving"] :is(.pr-end, .pr-when, .pr-plane) { opacity: 0; }
.pass[data-phase="searching"] .pr-plane, .pass[data-phase="arrived"] .pr-plane { left: calc(100% - 6px); }
.pass[data-phase="searching"] .pr-dots { animation: dots-run 1.6s linear infinite; }
@keyframes dots-run { to { background-position: 16px 0; } }

/* The answer: a fixed frame. Answers with fewer options leave calm space above the tool-call line, never a jump. */
.pass-body { position: relative; height: var(--answer-h); }
.pass-answer { display: flex; flex-direction: column; height: 100%; padding: 14px 12px 6px; }
.rv { opacity: 0; transform: translateY(10px); transition: opacity 340ms ease, transform 340ms ease; }
.is-in .rv { opacity: 1; transform: none; transition: opacity 900ms var(--soft), transform 1100ms var(--soft); transition-delay: calc(var(--i, 0) * 95ms); }
.pa-verdict { padding: 0 8px; color: var(--ink); font-size: 34px; font-weight: 650; line-height: 1.05; letter-spacing: -0.035em; }
.pa-sub { padding: 0 8px; margin-top: 4px; overflow: hidden; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; }
.pa-cents { display: inline-block; padding: 0 8px; border-radius: var(--radius-pill); background: var(--night); color: var(--amber); font-size: 13.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
/* Points against cash, drawn: how much of the fare the points cover */
.pa-split { margin: 12px 8px 0; }
.pa-split-bar { display: block; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: rgba(64, 54, 78, 0.12); }
.pa-split-bar i { display: block; height: 100%; border-radius: inherit; background: var(--plum); }
.pa-split-key { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--ink-3); font-size: 12.5px; }
.pa-split-key b { color: var(--plum); font-weight: 650; }

/* Options: exactly one open, so the frame never changes height */
.opts { margin: 10px 0 0; padding: 0; list-style: none; }
.opt { border-radius: 16px; }
.opt + .opt { margin-top: 2px; }
.opt.is-open { background: rgba(255, 255, 255, 0.7); box-shadow: 0 1px 2px rgba(41, 37, 48, 0.06); }
.opt-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 14px; gap: 12px; align-items: center; width: 100%; padding: 7px 8px; border: 0; border-radius: 16px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.opt.is-open .opt-head { cursor: default; }
.opt-head:hover .opt-chev { color: var(--ink); }
.opt-mark { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(64, 54, 78, 0.08); }
.mark-logo { width: 29px; height: auto; }
.mark-photo { width: 100%; height: 100%; max-width: none; border-radius: 10px; object-fit: cover; }
.mark-badge { position: absolute; right: -5px; bottom: -5px; width: 19px; height: 19px; padding: 3px; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(41, 37, 48, 0.2); }
.mark-icon { width: 20px; height: 20px; fill: none; stroke: var(--plum); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.opt-name { display: grid; gap: 1px; min-width: 0; }
.opt-name > span, .opt-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-name > span { color: var(--ink); font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.opt-name small { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.opt-price { color: var(--ink); font-size: 15px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt-price small { margin-left: 3px; color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.opt-chev { display: grid; color: #8a8292; transition: transform 600ms var(--soft), color 300ms ease; }
.opt-chev svg, .calls-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.opt.is-open .opt-chev { transform: rotate(180deg); }
.opt-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 650ms var(--soft); }
.opt.is-open .opt-more { grid-template-rows: 1fr; }
.opt-inner { min-height: 0; overflow: hidden; }
.opt-detail { padding: 0 8px 9px 56px; color: var(--ink-2); font-size: 13px; opacity: 0; transition: opacity 300ms ease; }
.opt.is-open .opt-detail { opacity: 1; transition: opacity 700ms var(--soft) 140ms; }

/* Tool calls: a line pinned to the bottom of the frame; the calls open over the options, not below them */
.pa-calls { position: relative; margin: auto 8px 0; padding-top: 8px; }
.calls-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--ink-3); font: 600 12.5px Manrope, sans-serif; cursor: pointer; }
.calls-toggle:hover { color: var(--ink); }
.calls-toggle svg { transform: rotate(180deg); transition: transform 500ms var(--soft); }
.calls-toggle[aria-expanded="true"] svg { transform: none; }
.calls-pop {
  position: absolute; left: -6px; bottom: calc(100% - 2px); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: max-content; max-width: min(420px, calc(100vw - 64px));
  padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(41, 37, 48, 0.1), 0 18px 36px -18px rgba(41, 37, 48, 0.45);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 360ms var(--soft), transform 460ms var(--soft), visibility 0s linear 460ms;
}
.pa-calls.is-open .calls-pop { opacity: 1; visibility: visible; transform: none; transition: opacity 460ms var(--soft), transform 560ms var(--soft), visibility 0s; }
.calls-pop code { padding: 3px 8px; border-radius: 7px; background: rgba(64, 54, 78, 0.07); color: var(--plum); font-size: 11.5px; font-weight: 600; }
.calls-pop span { width: 100%; color: var(--ink-3); font-size: 12px; }

.pass-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 11px 22px 14px; box-shadow: inset 0 1px 0 rgba(64, 54, 78, 0.08); color: var(--ink-3); font-size: 12px; }
.pass-doors code { margin-left: 3px; padding: 2px 7px; border-radius: 6px; background: rgba(64, 54, 78, 0.07); color: var(--plum); font-size: 11px; font-weight: 600; }

/* ---------- Contrails: no filters, so a contrail never costs the frame the answer needs ---------- */
.contrail path { fill: none; stroke-linecap: round; }
.contrail-core { stroke: #fff8ef; stroke-width: 1.6px; opacity: 0.95; transition: opacity 8s ease; }
.contrail-halo { stroke: #ffe6cf; stroke-width: 9px; opacity: 0.22; transition: opacity 11s ease, stroke-width 11s ease; }
.contrail-glow { fill: #fff3e4; opacity: 0.35; transition: opacity 1400ms ease; }
.contrail-glint { fill: #fff; transition: opacity 1400ms ease; }
.contrail--faint .contrail-core { stroke-width: 1.1px; opacity: 0.72; }
.contrail--faint .contrail-halo { opacity: 0.15; }
.contrail.is-fading .contrail-core { opacity: 0; }
.contrail.is-fading .contrail-halo { opacity: 0; stroke-width: 30px; }
.contrail.is-fading :is(.contrail-glint, .contrail-glow) { opacity: 0; }

.hero-variant--sky .hero-context { padding: 8px 0 72px; }

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

/* ---------- Narrower screens ---------- */
@media (max-width: 1060px) {
  .sky-main { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 28px; }
  .sky-copy { max-width: 640px; }
  .pass { max-width: 500px; }
}
@media (max-width: 760px) {
  .dev { --head: 64px; }
  .sky { min-height: 0; }
  .sky-main { padding: 24px 0 64px; }
  .sky-copy h1 { font-size: clamp(40px, 11.5vw, 50px); }
  .sky-lede { font-size: 17px; }
  .sky-actions .btn { flex: 1 1 auto; min-height: 48px; padding: 11px 16px; font-size: 14.5px; }
  .sky-programs { margin-top: 28px; gap: 12px 18px; }
  .sky-wash { background: linear-gradient(180deg, rgba(250, 249, 253, 0.78) 0%, rgba(250, 249, 253, 0.5) 34%, rgba(250, 249, 253, 0.12) 70%, var(--paper) 100%); }
  .pass { --answer-h: 322px; border-radius: 24px; }
  .pass-modes { margin: 10px 10px 0; }
  .pass-modes button { padding: 5px; font-size: 12.5px; }
  .pass-ask { padding: 12px 12px 0 16px; }
  /* Two lines held for every question, so a short one never moves the card */
  .pass-q { display: -webkit-box; min-height: 2.9em; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; }
  .pass-photo { height: 132px; margin: 10px 8px 0; }
  .pr-end b { font-size: 19px; }
  .pass-cut { margin: 12px 14px 0; }
  .pass-answer { padding: 14px 8px 6px; }
  .pa-verdict { font-size: 30px; }
  .opt-head { grid-template-columns: 34px minmax(0, 1fr) auto 12px; gap: 10px; padding: 7px 6px; }
  .opt-mark { width: 34px; height: 34px; }
  .opt-detail { padding-left: 50px; }
  .opt-price { font-size: 14px; }
  .pass-foot { padding: 11px 16px 14px; }
  .sky-credit { left: var(--gutter); right: auto; }
}