/* Daily Life Doc, round 13 (zone B5): the blocks of apps and documents (js/blocks/), as the page "Expert Plans" draws a
   form on the client's phone (the knowledge base's Preview): the question in bold, then its answer — a white box
   with a thin line, Yes and No in one tinted row, 0 to 10 as eleven small squares, options as large rows — and the
   reading blocks of a document. Also the editor's fields under a block (.qe, used by F3's block editor). Tokens only
   (css/base.css), so dark mode follows. */

.qb { display: flex; flex-direction: column; gap: 8px; }
.qb-q { font-size: var(--t-s); font-weight: 600; line-height: 1.35; color: var(--ink); }
.qb-in { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--cardline); font-size: var(--t-m); line-height: 1.4; transition: box-shadow 200ms ease; }
textarea.qb-in { resize: none; overflow: hidden; min-height: 44px; }
.qb-in::placeholder { color: var(--ink3); }
.qb-in:focus { box-shadow: 0 0 0 2px var(--sage); }
.qb-in.bad { box-shadow: 0 0 0 2px var(--bad); }
/* "Numbers only" under a number box that holds words (FX-S2). */
.qb-num { display: block; margin-top: 6px; font-size: var(--t-xs); font-weight: 500; color: var(--bad-d); }
.qb-num[hidden] { display: none; }
.qb-in[disabled] { color: var(--ink2); background: var(--field); }

/* Yes and No: one tinted row of two (the page's .seg2). */
.qb-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--soft); }
.qb-seg button { min-height: 40px; border-radius: 11px; font-size: var(--t-s); font-weight: 500; color: var(--ink2);
  transition: background var(--m-step) var(--ease-out), color var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.qb-seg button:active { transform: scale(.97); }
.qb-seg button.on { background: var(--ink); color: var(--on-ink); }

/* 0 to 10: eleven squares in one row. */
.qb-scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
.qb-scale button { height: 40px; border-radius: 9px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cardline); font-size: var(--t-sm);
  font-variant-numeric: tabular-nums; transition: background var(--m-step) ease, color var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.qb-scale button:active { transform: scale(.94); }
.qb-scale button.on { background: var(--ink); color: var(--on-ink); box-shadow: none; }
/* A narrow question (a phone at 390 or 340, the Preview's phone): 0–5 and 6–10 on two rows of boxes a finger wide
   (design review 52). Each question is its own container, so the Preview's phone frame narrows it too. */
.qb { container-type: inline-size; }
@container (max-width: 420px) {
  .qb-scale { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .qb-scale button { height: 44px; font-size: var(--t-s); }
}

/* Choice: one large row per option, a round mark (several: a square mark). */
.qb-choice { display: flex; flex-direction: column; gap: 6px; }
.qb-choice button { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border-radius: 12px; text-align: left;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--cardline); font-size: var(--t-s); transition: box-shadow var(--m-step) ease, background var(--m-step) ease; }
.qb-choice button i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line); color: transparent; }
.qb-choice.many button i { border-radius: 6px; }
.qb-choice button i svg { width: 14px; height: 14px; }
.qb-choice button.on { box-shadow: 0 0 0 2px var(--ink); }
.qb-choice button.on i { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.qb-choice button.good { background: var(--good-bg); box-shadow: inset 0 0 0 1px var(--good); }
.qb-choice button.good i { background: var(--good); color: #fff; box-shadow: none; }
.qb-choice button.miss { background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad); }
.qb-mark { font-size: var(--t-xs); font-weight: 500; }
.qb-mark.good { color: var(--good-d); }
.qb-mark.miss { color: var(--bad-d); }

/* Follow-up questions under a Yes, a little in. */
.qb-follow:empty { display: none; }
.qb-follow { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 0 12px; border-left: 2px solid var(--cardline); }
.qb-fu .qb-q { font-weight: 500; color: var(--ink2); }

/* A list, a table. */
.qb-rows { display: flex; flex-direction: column; gap: 6px; }
.qb-th, .qb-tr { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.qb-th span { font-size: var(--t-xs); color: var(--ink3); padding-left: 4px; }
.qb-add { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--soft); font-size: var(--t-sm); font-weight: 500; }

/* Photo, video, audio: what was sent, then the buttons. */
.qb-files { display: flex; flex-direction: column; gap: 8px; }
.qb-shelf:empty { display: none; }
.qb-shelf { display: flex; flex-wrap: wrap; gap: 6px; }
.qb-shelf img, .qb-shelf video { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; background: var(--field); }
.qb-shelf audio { width: 100%; }
.qb-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.qb-pick { cursor: pointer; }
.qb-acts .rec { background: var(--bad); color: #fff; }
.qb-note:empty { display: none; }
.qb-note { font-size: var(--t-xs); color: var(--ink3); }

/* Reading blocks. */
.qr h2 { font-size: var(--t-l); font-weight: 600; line-height: 1.25; }
.qr h3 { font-size: var(--t-s); font-weight: 600; margin-bottom: 6px; }
.qr p, .qr li { font-size: var(--t-m); line-height: 1.55; color: var(--ink); }
.qr p + p { margin-top: 10px; }
.qr ul, .qr ol { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.qr figure img { width: 100%; border-radius: 14px; display: block; }
.qr figcaption, .qr-cap { display: block; margin-top: 6px; font-size: var(--t-sm); color: var(--ink2); }
.qr-play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--sage-d); }
.qr-play img { width: 100%; height: 100%; object-fit: cover; }
.qr-play i { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; }
.qr-play i svg { width: 24px; height: 24px; }
.qr-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; display: block; }
.qr-link { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--field); color: inherit; text-decoration: none; }
.qr-link b { font-weight: 600; font-size: var(--t-s); }
.qr-link small { color: var(--ink3); font-size: var(--t-xs); }
.qr-tick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; text-align: left; font-size: var(--t-s); }
.qr-tick i { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line); color: transparent;
  transition: background var(--m-step) ease, color var(--m-step) ease; }
.qr-tick i svg { width: 15px; height: 15px; }
.qr-tick.on i { background: var(--sage-d); color: #fff; box-shadow: none; }
.qr-tick.on span { color: var(--ink2); }
.qr-timer, .qr-breathe { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border-radius: 16px; background: var(--field); text-align: center; }
.qr-timer b { font-size: var(--t-xxl); font-weight: 600; font-variant-numeric: tabular-nums; min-height: 36px; display: grid; place-items: center; color: var(--sage-d); }
.qr-timer b svg { width: 32px; height: 32px; }
.qr-timer span, .qr-breathe span { font-size: var(--t-sm); color: var(--ink2); }
.qr-breathe i { width: 64px; height: 64px; border-radius: 50%; background: var(--sage); opacity: .7; transform: scale(.7); transition: transform 4s ease-in-out; }
.qr-breathe i.in { transform: scale(1.25); }
.qr-breathe i.out { transform: scale(.7); }
.qr-src a { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--t-sm); color: var(--ink2); text-decoration: none; }
.qr-src a svg { width: 16px; height: 16px; flex: none; }

/* The editor's fields under a block (F3's block editor). */
.qe { display: flex; flex-direction: column; gap: 8px; }
.qe-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: center; }
.qe-row > span { font-size: var(--t-xs); color: var(--ink3); }
.qe-lines { display: flex; flex-direction: column; gap: 6px; }
.qe-line { display: flex; gap: 6px; align-items: center; }
.qe-x { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--ink3); }
.qe-x svg { width: 16px; height: 16px; }
.qe-follow { display: flex; flex-direction: column; gap: 8px; padding-left: 12px; border-left: 2px solid var(--cardline); }
.qe-h { font-size: var(--t-xs); color: var(--ink3); }
.qe-fu { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: start; }
@media (max-width: 480px) { .qe-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .qr-breathe i { transition: none; } }