/* The landing page's preview questions and locked introduction (landing-page-vision.md, section 1; B-204, B-205).
   Tokens come from landing.html. Entries and the dialog animate transform and opacity only, from @starting-style, so a
   second action retargets instead of queueing. */
:root { --you-bubble: #eaf0ff; --scrim: rgb(4 21 47 / 0.42); }

.ask-section { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 56px; align-items: start; background: var(--surface-warm); }
.ask-copy { position: sticky; top: 32px; }
.ask-rules { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 520px; }
.ask-rules li { display: flex; gap: 12px; font-size: 1rem; color: var(--text); }
.ask-rules svg { flex: none; margin-top: 3px; color: var(--blue-700); }
.ask-card { display: flex; flex-direction: column; padding: 20px 22px 16px; }
.ask-head { display: flex; align-items: center; gap: 12px; }
.ask-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-strong); }
.ask-head p { margin: 2px 0 0; font-size: 0.8125rem; color: var(--text-muted); }
.ask-head .chip { margin-left: auto; }
.ask-card .avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-control); object-fit: contain; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.chip-preview { background: var(--tint-orange-side); color: var(--label-orange-side); }
.chip-muted { background: var(--surface-control); color: var(--text-muted); }

.thread { position: relative; height: 460px; margin: 16px -10px 0; padding: 4px 10px; list-style: none; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; align-items: flex-start; gap: 10px; }
.msg.from-you { flex-direction: row-reverse; }
.msg:not(.settled) { transition: opacity var(--duration-entry) var(--ease-out), transform var(--duration-entry) var(--ease-out); }
.msg .avatar { width: 32px; height: 32px; }
.bubble { min-width: 0; max-width: 92%; padding: 10px 14px; border-radius: 16px; font-size: 0.875rem; background: var(--surface-control); }
.from-fruitful .bubble { border-top-left-radius: 6px; }
.from-you .bubble { border-top-right-radius: 6px; background: var(--you-bubble); }
.bubble p { margin: 0 0 6px; }
.bubble > p:last-child { margin-bottom: 0; }
.speaker { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-muted); }
.speaker strong { color: var(--text-strong); }
.items { margin: 4px 0 8px; padding-left: 18px; }
.items li + li { margin-top: 2px; }
.fine { margin: 6px 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--text-muted); }
.trace { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--track); font-size: 0.6875rem; color: var(--text-muted); }
.trace p { margin: 0; }

.matches { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.match { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--track); border-radius: 14px; background: var(--surface-card); }
.match p { margin: 0; }
.match-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.match-name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; color: var(--text-strong); white-space: nowrap; }
.match-name .x { font-weight: 700; color: var(--text-subtle); }
.match-q { padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--tint-both); color: var(--label-both); }
.match-q[data-quadrant="apple"] { background: var(--tint-apple-side); color: var(--label-apple-side); }
.match-q[data-quadrant="orange"] { background: var(--tint-orange-side); color: var(--label-orange-side); }
.match-q[data-quadrant="low"] { background: var(--tint-low); color: var(--label-low); }
.match-scores { font-size: 0.8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.match-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.btn-xs { height: 34px; padding: 0 12px; gap: 6px; border-radius: 10px; font-size: 0.8125rem; }
.btn-md { height: 44px; padding: 0 18px; gap: 8px; font-size: 0.9375rem; }
button.btn { border: 0; font-family: inherit; cursor: pointer; }
.lock-icon { flex: none; }

.prompts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.prompt { padding: 7px 12px; border: 1px solid var(--track); border-radius: 999px; background: var(--surface-card); font: inherit; font-size: 0.8125rem; color: var(--navy-700);
  cursor: pointer; transition: transform var(--duration-press) var(--ease-out), background-color var(--duration-small) var(--ease-out); }
.prompt:active { transform: scale(0.97); }
.ask-form { display: flex; gap: 8px; margin-top: 12px; }
.ask-form[hidden] { display: none; }
.ask-form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--track); border-radius: 12px; font: inherit; font-size: 0.9375rem; color: var(--text-strong); background: var(--surface-card); }
.send { width: 44px; height: 44px; padding: 0; justify-content: center; }
.ask-quota { margin: 8px 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ask-error { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--tint-low); color: var(--label-low); font-size: 0.8125rem; font-weight: 600; }

.ask-lock { display: flex; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--selection-surface); outline-offset: 3px;
  transition: opacity var(--duration-entry) var(--ease-out), transform var(--duration-entry) var(--ease-out); }
.ask-lock[hidden] { display: none; }
.lock-badge { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--action-primary); color: #fff; }
.ask-lock-title { margin: 0; font-weight: 700; color: var(--text-strong); }
.ask-lock p { margin: 2px 0 0; font-size: 0.875rem; }
.lock-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask-lock .btn-secondary { background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--track); }

.chart-card { scroll-margin-top: 24px; }
.pair .pair-action { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0 294px; }
.pair .pair-action p { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-muted); }

/* A native modal: the browser traps focus and closes on Escape. It scales from 0.96, never from 0, and leaves faster than it came. */
.lock-dialog { width: min(440px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 22px; background: var(--surface-card); color: var(--text);
  box-shadow: 0 1px 2px rgb(12 29 82 / 0.08), 0 32px 64px -24px rgb(12 29 82 / 0.4);
  transition: opacity var(--duration-entry) var(--ease-out), transform var(--duration-entry) var(--ease-out),
    overlay var(--duration-entry) allow-discrete, display var(--duration-entry) allow-discrete; }
.lock-dialog:not([open]) { opacity: 0; transform: scale(0.96); transition-duration: var(--duration-small); }
.lock-dialog::backdrop { background: var(--scrim); transition: opacity var(--duration-entry) var(--ease-out), overlay var(--duration-entry) allow-discrete, display var(--duration-entry) allow-discrete; }
.lock-dialog:not([open])::backdrop { opacity: 0; transition-duration: var(--duration-small); }
.lock-sheet { position: relative; padding: 26px 26px 22px; }
.lock-sheet h2 { margin: 14px 0 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-strong); }
.lock-sheet > p { margin: 8px 0 0; font-size: 0.9375rem; color: var(--text); }
.lock-sheet .lock-actions { margin-top: 20px; }
.lock-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--surface-control); color: var(--text); cursor: pointer; transition: transform var(--duration-press) var(--ease-out); }
.lock-close:active { transform: scale(0.94); }

@starting-style {
  .msg:not(.settled), .ask-lock { opacity: 0; transform: translateY(6px); }
  .lock-dialog[open] { opacity: 0; transform: scale(0.96); }
  .lock-dialog[open]::backdrop { opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .prompt:hover, .lock-close:hover, .ask-lock .btn-secondary:hover { background: var(--track); }
}
@media (prefers-reduced-motion: reduce) {
  .msg:not(.settled), .ask-lock { transition: opacity var(--duration-small) linear; }
  .lock-dialog, .lock-dialog::backdrop { transition: opacity var(--duration-small) linear, overlay var(--duration-small) allow-discrete, display var(--duration-small) allow-discrete; }
  .lock-dialog:not([open]) { transform: none; }
  @starting-style { .msg:not(.settled), .ask-lock, .lock-dialog[open] { transform: none; } }
  .prompt, .lock-close { transition: background-color var(--duration-small) linear; }
  .prompt:active, .lock-close:active { transform: none; }
}
@media (max-width: 1279px) {
  .ask-section { grid-template-columns: 1fr; gap: 40px; }
  .ask-copy { position: static; }
  .pair .pair-action { margin-left: 294px; }
}
@media (max-width: 639px) {
  .ask-card { padding: 16px 14px 14px; }
  .thread { height: 420px; }
  .bubble { max-width: 100%; }
  .match-actions .btn { flex: 1 1 0; justify-content: center; }
  .pair .pair-action { margin-left: 0; }
  .pair .pair-action .btn { width: 100%; justify-content: center; }
  .lock-sheet { padding: 22px 18px 18px; }
  .lock-actions .btn { flex: 1 1 auto; justify-content: center; }
}