/* steps/questions.css: Questions, "One per screen" (option 1): one question centred on black, answers as 5% fills with
   letter keys. Everything is scoped to .qv.
   2026-11-06 (Savva's review, 13:00 to 15:54): one centred column, bigger answers and buttons, all full pills like the
   rest of the app's controls; Back beside OK; the review list centred, each answer a row that opens in place; no progress
   line under the top bar (the step's tab marks the place). */
main[data-step="questions"] { padding: 0; }
.view.qv { --f3: rgba(255,255,255,.03); --f5: rgba(255,255,255,.05); --f7: rgba(255,255,255,.07); --f10: rgba(255,255,255,.1);
  --i100: #fff; --i85: rgba(255,255,255,.85); --i70: rgba(255,255,255,.7); --i55: rgba(255,255,255,.55); --i40: rgba(255,255,255,.4); --i25: rgba(255,255,255,.25);
  max-width: none; display: block; position: relative; min-height: calc(100svh - 60px); font-size: 12.5px; animation: qs-fade .38s var(--ease) both; }
/* opacity only, so nothing fixed inside it on a phone moves with the view */
@keyframes qs-fade { from { opacity: 0; } }
.qv .num { font-variant-numeric: tabular-nums; }
.qv kbd { font: 500 11px/1 var(--font); color: var(--i70); background: var(--f7); }
.qv :focus-visible { outline: 1.5px solid rgba(90,170,255,.9); outline-offset: 2px; }
.qv .qstage { min-height: calc(100svh - 60px); display: grid; place-items: center; padding: 32px 24px 56px; overflow: hidden; }
/* the column: everything on the page's middle line */
.qv .q { width: min(600px, 100%); display: flex; flex-direction: column; align-items: stretch; margin-top: -32px; }
.qv .q.in { animation: qs-in .45s var(--ease) both; } .qv .q.in.back { animation-name: qs-back; }
.qv .q.out { animation: qs-out .22s ease-in both; } .qv .q.out.back { animation-name: qs-outback; }
@keyframes qs-in { from { opacity: 0; transform: translateY(28px); } }
@keyframes qs-back { from { opacity: 0; transform: translateY(-28px); } }
@keyframes qs-out { to { opacity: 0; transform: translateY(-28px); } }
@keyframes qs-outback { to { opacity: 0; transform: translateY(28px); } }
.qv .q h1 { margin: 0; font: 400 26px/1.35 var(--font); color: var(--i100); letter-spacing: -.01em; text-align: center; text-wrap: balance; }
.qv .why { margin: 10px 0 28px; color: var(--i55); font-size: 14.5px; text-align: center; text-wrap: balance; }
.qv .qmulti { margin: -18px 0 18px; color: var(--i70); font-size: 12.5px; text-align: center; }
/* what the intake read off the attachments, once, above the first question */
.qv .qread { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin: 0 0 28px; }
.qv .qread-a { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--i70); }
.qv .qread-a b { font-weight: 500; color: var(--i85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qv .qread-a span { color: var(--i55); white-space: nowrap; }
.qv .qread-a img { width: 40px; height: 26px; object-fit: cover; object-position: top left; border-radius: 4px; background: var(--f5); }
.qv .qread p { flex-basis: 100%; margin: 0; color: var(--i55); line-height: 1.6; text-align: center; }
.qv .qread p i { font-style: normal; color: var(--i25); margin: 0 8px; }
/* the answers: full pills, the key a circle inside (both fully round, so the nested corners hold at any height) */
.qv .qopts { display: flex; flex-direction: column; gap: 8px; }
.qv .qo { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 11px; border: 0; border-radius: 999px; background: var(--f5); color: var(--i85); text-align: left; font: inherit; font-size: 15px; line-height: 1.35; cursor: pointer; transition: background-color .15s, color .15s; }
.qv .qo:hover { background: var(--f7); color: var(--i100); }
.qv .qo kbd { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 999px; flex: none; transition: background-color .15s, color .15s; }
.qv .qo .t { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qv .qo .sug { color: var(--i55); font-size: 12px; white-space: nowrap; }
.qv .qo .from { flex: none; white-space: nowrap; }
.qv .qo .ck { width: 18px; display: grid; place-items: center; color: var(--i100); opacity: 0; transition: opacity .15s; }
.qv .qo.on { background: var(--f10); color: var(--i100); }
.qv .qo.on kbd { background: var(--i100); color: #000; }
.qv .qo.on .ck { opacity: 1; }
.qv .qo.blink { animation: qs-blink .32s steps(2, jump-none) 2; }
@keyframes qs-blink { 50% { background: var(--f5); } }
.qv .qo.other { cursor: text; }
.qv .qo.other input { flex: 1; min-width: 0; height: 34px; border: 0; padding: 0; background: none; outline: none; color: var(--i100); font: inherit; font-size: 15px; }
.qv .qo.other input::placeholder { color: var(--i55); }
/* the field's own edge carries the focus, never a ring with a gap */
.qv .qo.other:focus-within { background: var(--f7); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.qv .qok { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; min-height: 44px; }
.qv .qok .btn { height: 44px; padding: 0 22px; font-size: 14px; gap: 8px; }
.qv .qok .btn.main { min-width: 132px; justify-content: center; background: var(--i100); }
.qv .qok .btn.main:hover { background: rgba(255,255,255,.88); }
.qv .hint { align-self: center; margin-top: 12px; color: var(--i55); font-size: 11.5px; display: inline-flex; align-items: center; gap: 4px; }
.qv .hint b { font-weight: 500; color: var(--i70); }
.qv .qerr { color: var(--down); font-size: 12px; min-height: 18px; margin: 8px 0 0; text-align: center; }
.qv .qerr:empty { margin: 0; }
.qv .qthink { display: inline-flex; align-items: center; gap: 10px; color: var(--i70); font-size: 13px; }
.qv .qthink i { width: 6px; height: 6px; border-radius: 999px; background: var(--i100); flex: none; animation: qs-breathe 1.2s var(--ease) infinite; }
@keyframes qs-breathe { 50% { opacity: .2; transform: scale(.7); } }
.qv .qof { position: absolute; right: 24px; bottom: 24px; color: var(--i55); font-size: 12px; }
/* the review list: rows that open in place. Closed, a row is a 52px pill; open, its corners are 30 = 22 (the 44px pills
   inside it) + 8 (its padding), so the nested corners match */
.qv .qrecap { display: flex; flex-direction: column; gap: 8px; }
.qv .qr { background: var(--f5); border-radius: 26px; transition: border-radius .3s var(--ease), background-color .2s; }
.qv .qr.open { border-radius: 30px; background: var(--f7); }
.qv .qr-h { width: 100%; min-height: 52px; display: grid; grid-template-columns: 150px minmax(0, 1fr) 16px; gap: 14px; align-items: center; padding: 8px 18px 8px 22px; border: 0; background: none; border-radius: inherit; text-align: left; font: inherit; color: var(--i85); cursor: pointer; }
.qv .qr-h:disabled { cursor: default; }
.qv .qr-h .k { font-size: 14px; font-weight: 500; color: var(--i100); }
.qv .qr-h .v { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--i62, rgba(255,255,255,.62)); font-size: 13.5px; }
.qv .qr:not(.open) .qr-h .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.qv .qr-h .v em { font-style: normal; color: var(--down); }
.qv .qr-h .from { height: 18px; font-size: 10.5px; }
.qv .qr-h > svg { color: var(--i40); transition: transform .25s var(--ease), color .15s; }
.qv .qr-h:hover:not(:disabled) > svg { color: var(--i100); }
.qv .qr.open .qr-h > svg { transform: rotate(180deg); color: var(--i100); }
.qv .qr-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.qv .qr.open .qr-b { grid-template-rows: 1fr; }
.qv .qr-in { min-height: 0; overflow: hidden; }
.qv .qr-pad { padding: 0 8px 8px; }
.qv .qr-q { margin: 0 14px 10px; color: var(--i55); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.qv .qr-q span { color: var(--i70); }
.qv .qr .qopts { gap: 6px; }
.qv .qr .qo { min-height: 44px; font-size: 14px; padding: 6px 16px 6px 18px; background: var(--f5); }
.qv .qr .qo:hover { background: var(--f10); }
.qv .qr .qo.on { background: rgba(255,255,255,.13); }
.qv .qr .qo.other input { height: 30px; font-size: 14px; }
@media (max-width: 600px) {
  .view.qv { min-height: calc(100svh - 60px); }
  .qv .qstage { min-height: calc(100svh - 62px); place-items: start center; padding: 36px 16px 72px; }
  .qv .q { margin-top: 0; }
  .qv .qread { margin-bottom: 22px; }
  .qv .q h1 { font-size: 21px; }
  .qv .why { font-size: 13.5px; margin-bottom: 22px; }
  .qv .qo { font-size: 14px; min-height: 50px; padding-right: 14px; } .qv .qo.other input { font-size: 14px; }
  .qv .qo.has-from .t { flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 0; }
  .qv .qok .btn { flex: 1; justify-content: center; } .qv .qok .btn.main { flex: 2; }
  .qv .hint { display: none; }
  .qv .qof { position: absolute; right: 16px; top: 10px; bottom: auto; }
  .qv .qr-h { grid-template-columns: minmax(0, 1fr) 16px; row-gap: 2px; padding-left: 20px; }
  .qv .qr-h .k { grid-column: 1; } .qv .qr-h .v { grid-column: 1; grid-row: 2; } .qv .qr-h > svg { grid-column: 2; grid-row: 1 / span 2; }
  .qv .qr { border-radius: 30px; }
}
@media (prefers-reduced-motion: reduce) { .qv .qr, .qv .qr-b, .qv .qr-h > svg { transition: none; } }