/* The question as an object, and its two pockets: motion prototype (church-v2, 2026-10-19).
 * The app's own materials only: the callouts box and the answer's mat (dark warm browns, a gold keyline, Bodoni Moda italic for words,
 * Jost capitals for labels, Figtree for buttons, the paper ivory), the thing-circle (a dark disc in a gold ring) for the question's seal.
 * Everything over the picture is sized in u = 1/100 of the picture's width, as ask-answer.css does, so desk, sideways and upright read alike. */
@font-face { font-family: 'CO Bodoni'; src: url('fonts/bodonimoda-500-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: block; }
@font-face { font-family: 'CO Bodoni'; src: url('fonts/bodonimoda-italic-500-latin.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: block; }
@font-face { font-family: 'CO Jost'; src: url('fonts/jost-latin.woff2') format('woff2'); font-weight: 300 700; font-display: block; }
@font-face { font-family: 'NavFigtree'; src: url('fonts/figtree-latin.woff2') format('woff2'); font-weight: 300 900; font-display: block; }

:root {
  --gold: #c9a75c; --gold-hi: #efc674; --ivory: #f2ead6; --smoke: #8f8576; --ink: #0a0908; --ember: #e2b26e;
  --mat: rgba(13, 10, 7, 0.88); --box-a: rgba(27, 20, 13, 0.95); --box-b: rgba(14, 10, 6, 0.95);
  --display: 'CO Bodoni', 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  --ui: 'CO Jost', Jost, Futura, 'Century Gothic', sans-serif;
  --sans: 'NavFigtree', Figtree, 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #050403; color: var(--ivory); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; background: radial-gradient(120% 90% at 30% 40%, #17110b 0%, #070605 55%, #030302 100%); }
button { font: inherit; color: inherit; }

/* ---------------- the prototype's own shell (not part of the design) ---------------- */
.shell { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr 380px; }
.deviceWrap { position: relative; display: grid; place-items: center; overflow: hidden; }
.device { position: relative; flex: none; border-radius: 46px; padding: 12px; background: linear-gradient(160deg, #2a2420, #0c0a09 40%, #1b1714); box-shadow: 0 0 0 1px #3a322b, 0 40px 90px -30px #000, inset 0 0 0 1px #000; transform-origin: 50% 50%; }
.device[data-o="desk"] { border-radius: 12px; padding: 30px 8px 8px; background: #1a1714; }
.device[data-o="desk"]::before { content: ''; position: absolute; left: 14px; top: 11px; width: 52px; height: 9px; background: radial-gradient(circle at 4.5px 4.5px, #5a4d42 3.5px, transparent 4px) 0 0 / 18px 9px repeat-x; }
.device[data-o="desk"]::after { content: 'howtoread.bible/study/session/11/psalm-2'; position: absolute; left: 50%; top: 7px; transform: translateX(-50%); padding: 2px 14px; border-radius: 6px; background: #0e0c0a; font: 500 11px/14px var(--sans); color: #8f8576; }
.screen { position: relative; overflow: hidden; background: #000; border-radius: 36px; }
.device[data-o="desk"] .screen { border-radius: 4px; }
.phoneMode .shell { display: block; }
.phoneMode .deviceWrap { position: fixed; inset: 0; display: block; }
.phoneMode .device { position: absolute; inset: 0; border-radius: 0; padding: 0; background: #000; box-shadow: none; transform: none !important; }
.phoneMode .screen { position: absolute; inset: 0; width: auto !important; height: auto !important; border-radius: 0; }
.phoneMode .panel { display: none; }

.panel { position: relative; height: 100%; overflow: auto; padding: 26px 24px 30px; border-left: 1px solid rgba(201, 167, 92, 0.16); background: linear-gradient(180deg, rgba(20, 15, 10, 0.94), rgba(10, 8, 6, 0.96)); scrollbar-width: thin; scrollbar-color: rgba(201, 167, 92, 0.35) transparent; }
.pK { display: block; font: 500 10px/1.3 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-hi); }
.pT { margin: 8px 0 4px; font: italic 500 25px/1.15 var(--display); color: var(--ivory); }
.pS { margin: 0 0 18px; font: 400 13px/1.45 var(--sans); color: rgba(242, 234, 214, 0.66); }
.pS a { color: var(--gold-hi); }
.capBox { min-height: 124px; margin: 0 0 14px; padding: 13px 15px 14px; border-radius: 3px; background: rgba(0, 0, 0, 0.38); border: 1px solid rgba(201, 167, 92, 0.22); border-left: 2px solid var(--gold); }
.capWho { display: block; margin-bottom: 6px; font: 500 9.5px/1.2 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--smoke); }
.capWho b { color: var(--gold-hi); font-weight: 500; }
.capTx { margin: 0; font: 500 15.5px/1.42 var(--display); color: var(--ivory); }
.capTx.stage { font: italic 400 14px/1.45 var(--sans); color: rgba(242, 234, 214, 0.72); }
.capTx em.hot { font-style: normal; color: var(--gold-hi); }
.capT { display: block; margin-top: 8px; font: 500 10px/1 var(--ui); letter-spacing: 0.12em; color: var(--smoke); }
.bar { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.bar button, .chips button, .seg button, .opens button { appearance: none; cursor: pointer; border: 1px solid rgba(242, 234, 214, 0.2); background: rgba(242, 234, 214, 0.03); color: var(--ivory); border-radius: 999px; font: 600 12.5px/1 var(--sans); padding: 9px 13px; -webkit-tap-highlight-color: transparent; }
.bar button:hover, .chips button:hover, .seg button:hover, .opens button:hover { border-color: rgba(239, 198, 116, 0.6); }
.bar .play { background: var(--gold); color: var(--ink); border-color: var(--gold); min-width: 84px; }
.prog { position: relative; height: 22px; margin: 4px 0 18px; cursor: pointer; }
.prog::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: rgba(242, 234, 214, 0.12); }
.progF { position: absolute; left: 0; top: 10px; height: 2px; background: var(--gold); width: 0; }
.progM { position: absolute; top: 6px; width: 1px; height: 10px; background: rgba(239, 198, 116, 0.45); }
.pH { display: block; margin: 18px 0 8px; font: 500 9.5px/1.3 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--smoke); }
.beats { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 8px; }
.beats li { break-inside: avoid; }
.beats button { display: block; width: 100%; margin: 0 0 3px; padding: 6px 8px; text-align: left; border: 1px solid transparent; border-radius: 3px; background: transparent; color: rgba(242, 234, 214, 0.74); font: 500 12px/1.25 var(--sans); cursor: pointer; }
.beats button:hover { color: var(--ivory); border-color: rgba(201, 167, 92, 0.25); }
.beats button.on { color: var(--gold-hi); background: rgba(201, 167, 92, 0.1); }
.beats button i { font-style: normal; color: var(--smoke); margin-right: 5px; font-size: 10.5px; }
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.seg button.on, .chips button.on { background: rgba(201, 167, 92, 0.16); border-color: rgba(239, 198, 116, 0.6); color: var(--gold-hi); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips button { font-size: 12px; padding: 8px 11px; }
.opens { display: flex; flex-wrap: wrap; gap: 6px; }
.note { margin: 10px 0 0; font: 400 12px/1.45 var(--sans); color: rgba(242, 234, 214, 0.55); }

/* the phone-sized chrome when the prototype runs on a phone itself */
.mob { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2147483600; display: none; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(5, 4, 3, 0), rgba(5, 4, 3, 0.86) 34%); pointer-events: none; }
.phoneMode .mob { display: block; }
.mobCap { margin: 0 4px 6px; font: 500 13px/1.32 var(--display); color: var(--ivory); text-shadow: 0 1px 3px #000; max-height: 3.96em; overflow: hidden; }
.mobCap.stage { font: italic 400 12px/1.35 var(--sans); color: rgba(242, 234, 214, 0.75); }
.mobRow { display: flex; gap: 6px; pointer-events: auto; }
.mobRow button { flex: 1; min-height: 38px; border-radius: 999px; border: 1px solid rgba(242, 234, 214, 0.22); background: rgba(10, 8, 6, 0.7); color: var(--ivory); font: 600 12px/1 var(--sans); }
.mobRow .play { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.mob.hide .mobCap { display: none; }
.mobSheet { position: absolute; inset: 0; z-index: 2147483601; display: none; overflow: auto; padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px)); background: rgba(8, 6, 4, 0.97); }
.mobSheet.on { display: block; }
.mobSheet .panelIn { max-width: 460px; margin: 0 auto; }

/* ---------------- the film's frame (the stage) ---------------- */
.stage { position: absolute; left: 0; top: 0; overflow: hidden; background: #000; transform-origin: 50% 50%; --u: 8.54px; color: var(--ivory); -webkit-user-select: none; user-select: none; }
.picL { position: absolute; inset: -2%; background: #000 center / cover no-repeat; opacity: 0; will-change: transform, opacity; }
.black { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 3; pointer-events: none; }
.vign { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(130% 120% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.35) 100%); }

/* the page's own marks over the playing film (as the app draws them) */
.band { position: absolute; left: 7%; right: 7%; bottom: 2.5%; z-index: 4; padding: calc(var(--u) * 0.6) 8px calc(var(--u) * 0.7); text-align: center; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.62)); pointer-events: none; }
.band p { margin: 0; font: italic 500 clamp(11px, calc(var(--u) * 2.05), 24px)/1.42 var(--display); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.band sup { font: 600 0.62em/1 var(--ui); color: var(--gold-hi); margin-right: 3px; font-style: normal; }
.band mark { background: #f2d675; color: #17120b; padding: 0 3px; border-radius: 1px; text-shadow: none; }
.wk { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 2); z-index: 4; padding: 6px 10px 6px 8px; border-radius: 999px; background: rgba(10, 8, 6, 0.55); border: 1px solid rgba(201, 167, 92, 0.3); font: 500 clamp(8.5px, calc(var(--u) * 1.1), 12px)/1 var(--ui); letter-spacing: 0.16em; color: rgba(242, 234, 214, 0.86); pointer-events: none; }
.side { position: absolute; right: 0; top: calc(var(--u) * 7); z-index: 4; width: calc(var(--u) * 7.4); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.6); pointer-events: none; }
.ci { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ciG { width: clamp(30px, calc(var(--u) * 5.2), 52px); height: clamp(30px, calc(var(--u) * 5.2), 52px); border-radius: 50%; background: #0b0907 center / cover; border: 1.5px solid rgba(239, 198, 116, 0.88); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55); }
.ciT { font: 500 clamp(8px, calc(var(--u) * 1.15), 11px)/1.2 var(--ui); color: rgba(242, 231, 210, 0.9); text-shadow: 0 1px 2px #000; }

/* the hold: the ring and the words heard (the app's hold, unchanged) */
.hold { position: absolute; left: 56%; top: 44%; z-index: 9; pointer-events: none; opacity: 0; }
.ring { position: absolute; left: calc(var(--u) * -3.4); top: calc(var(--u) * -3.4); width: calc(var(--u) * 6.8); height: calc(var(--u) * 6.8); border-radius: 50%; border: 2px solid rgba(239, 198, 116, 0.95); box-shadow: 0 0 0 calc(var(--u) * 0.4) rgba(239, 198, 116, 0.18), 0 0 24px rgba(255, 200, 115, 0.35); }
.ring i { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); margin: calc(var(--u) * -0.65) 0 0 calc(var(--u) * -0.65); border-radius: 50%; background: var(--gold-hi); }
.bub { position: absolute; left: calc(var(--u) * 4.6); top: calc(var(--u) * -7.4); padding: 4px 11px 6px; border-radius: 14px; background: #f7f1e3; color: #3b3226; font: 700 clamp(12px, calc(var(--u) * 1.8), 18px)/1 var(--sans); letter-spacing: 0.1em; }
.heard { position: absolute; left: calc(var(--u) * -20); top: calc(var(--u) * 5.2); width: calc(var(--u) * 40); text-align: center; font: italic 500 clamp(11px, calc(var(--u) * 1.7), 19px)/1.3 var(--display); color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, 0.8); }

/* ---------------- THE QUESTION ---------------- */
/* its seal: the app's thing-circle (a dark disc in a gold ring) holding the display face's italic question mark */
.seal { position: relative; flex: none; display: inline-grid; place-items: center; width: var(--sz, 22px); height: var(--sz, 22px); border-radius: 50%; background: #0b0907; border: 1.5px solid rgba(239, 198, 116, 0.92); box-shadow: 0 0 0 calc(var(--sz, 22px) * 0.09) rgba(10, 8, 6, 0.55); color: var(--gold-hi); }
.seal::before { content: '?'; font: italic 500 calc(var(--sz, 22px) * 0.66)/1 var(--display); transform: translate(-3%, 4%); }

/* the title card on black: where the question is born */
.title { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 calc(var(--u) * 13); text-align: center; pointer-events: none; }
.title > * { opacity: 0; }
.title .seal { --sz: clamp(28px, calc(var(--u) * 4.6), 52px); }
.tk { display: block; margin-top: calc(var(--u) * 1.5); font: 500 clamp(11px, calc(var(--u) * 1.35), 14px)/1.3 var(--ui); letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-hi); }
.tr { display: block; width: calc(var(--u) * 4); min-width: 22px; height: 1px; margin: calc(var(--u) * 1.2) auto calc(var(--u) * 1.4); background: var(--gold); transform-origin: 50% 50%; }
.tq { margin: 0; max-width: calc(var(--u) * 70); font: italic 500 var(--ts)/1.17 var(--display); --ts: clamp(18px, calc(var(--u) * 4.1), 46px); letter-spacing: -0.006em; color: var(--ivory); text-wrap: balance; }
.title[data-len="m"] .tq { --ts: clamp(16px, calc(var(--u) * 3.4), 38px); }
.title[data-len="l"] .tq { --ts: clamp(14px, calc(var(--u) * 2.75), 31px); line-height: 1.22; }
.title[data-len="xl"] .tq { --ts: clamp(13px, calc(var(--u) * 2.35), 27px); line-height: 1.24; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.chip { display: inline-flex; align-items: center; gap: 0.55em; font: 600 clamp(11px, calc(var(--u) * 1.2), 13.5px)/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory); white-space: nowrap; }
.chip svg { width: 1.35em; height: 1.35em; fill: none; stroke: var(--gold-hi); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.tchip { margin-top: calc(var(--u) * 2.1); padding: 0.7em 1.1em 0.7em 0.9em; color: var(--ivory); border: 1px solid rgba(239, 198, 116, 0.62); border-left: 2px solid var(--gold); border-radius: 2px; font-size: clamp(9px, calc(var(--u) * 1.3), 14px); }

/* the question card: the title card, compact, upper left of the frame; the notes collect behind it */
.qs { position: absolute; left: calc(var(--u) * 3.2); top: calc(var(--u) * 3); width: calc(var(--u) * 33); min-width: 200px; z-index: 8; pointer-events: none; transform-origin: 0 0; }
.leaves { position: absolute; left: 0; top: 0; right: 0; height: 0; }
.leaf { position: absolute; left: 0; right: 0; top: 0; border-radius: 0 2px 2px 0; background: linear-gradient(180deg, #2a2015, #120d08 30%, #0f0b07); border: 1px solid rgba(239, 198, 116, 0.34); border-bottom-color: rgba(239, 198, 116, 0.5); border-left: 2px solid rgba(201, 167, 92, 0.75); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); transform-origin: 50% 0; }
.leaf.study { background: linear-gradient(180deg, #3a2b14, #1e160b); border-color: rgba(239, 198, 116, 0.8); border-left-color: var(--gold-hi); }
.leaf.glint { box-shadow: 0 0 0 1px rgba(239, 198, 116, 0.6), 0 0 14px rgba(255, 200, 115, 0.45); }
.qc { position: relative; padding: calc(var(--u) * 1.25) calc(var(--u) * 1.7) calc(var(--u) * 1.3) calc(var(--u) * 1.5); }
.qcMat { position: absolute; inset: 0; border-radius: 0 2px 2px 0; background: linear-gradient(100deg, rgba(13, 10, 7, 0.95) 0%, rgba(17, 13, 8, 0.93) 100%); border-left: 2px solid var(--gold); box-shadow: 0 0 0 1px rgba(239, 198, 116, 0.18), 0 calc(var(--u) * 1.6) calc(var(--u) * 4) calc(var(--u) * -1.2) rgba(0, 0, 0, 0.9); opacity: 0; }
.qcHd { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 0.85); }
.qcHd .seal { --sz: clamp(17px, calc(var(--u) * 2.5), 28px); }
.qk { font: 500 clamp(11px, calc(var(--u) * 1.15), 13px)/1.2 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-hi); }
.qt { position: relative; margin: calc(var(--u) * 0.75) 0 0; min-height: 2.4em; font: italic 500 clamp(13px, calc(var(--u) * 2.15), 26px)/1.2 var(--display); color: var(--ivory); text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.qf { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 0.8); }
.qn { font: 500 clamp(11px, calc(var(--u) * 1.1), 12.5px)/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.qc .qcHd, .qc .qt, .qc .qf { opacity: 0; }

/* the copy that goes to the team: the same question on a narrower slip */
.slip { position: absolute; left: calc(var(--u) * 3.2); top: calc(var(--u) * 3); width: calc(var(--u) * 32); min-width: 224px; z-index: 7; padding: calc(var(--u) * 1.1) calc(var(--u) * 1.5) calc(var(--u) * 1.1) calc(var(--u) * 1.3); border-radius: 0 2px 2px 0; background: linear-gradient(100deg, rgba(20, 15, 9, 0.96), rgba(13, 10, 7, 0.95)); border: 1px solid rgba(239, 198, 116, 0.36); border-left: 2px solid var(--gold-hi); box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3) calc(var(--u) * -1) rgba(0, 0, 0, 0.9); opacity: 0; transform-origin: 0 0; pointer-events: none; }
.slipHd { display: flex; align-items: center; gap: calc(var(--u) * 0.7); }
.slipHd .seal { --sz: clamp(14px, calc(var(--u) * 2), 22px); }
.slipK { white-space: nowrap; font: 500 clamp(10.5px, calc(var(--u) * 1.05), 12px)/1.2 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); }
.slipQ { margin: calc(var(--u) * 0.6) 0 0; font: italic 500 clamp(11.5px, calc(var(--u) * 1.75), 21px)/1.2 var(--display); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.slipF { display: block; margin-top: calc(var(--u) * 0.75); padding-top: calc(var(--u) * 0.6); border-top: 1px solid rgba(201, 167, 92, 0.22); font: 500 clamp(10.5px, calc(var(--u) * 1.05), 12px)/1.2 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke); }
.slipF b { color: var(--ivory); font-weight: 500; }

/* the black box: each note while it is spoken of (the callouts box, the quote in the display face, its reference small beneath) */
.pin { position: absolute; left: calc(var(--u) * 51); top: calc(var(--u) * 14); width: calc(var(--u) * 42); min-width: 230px; z-index: 9; padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 1.3); border-radius: 2px; border: 1px solid rgba(239, 198, 116, 0.5); border-left: 2px solid var(--gold);
  background: linear-gradient(180deg, var(--box-a), var(--box-b)); box-shadow: 0 0 0 4px rgba(10, 7, 5, 0.55), 0 0 0 5px rgba(212, 160, 74, 0.2), 0 26px 60px -18px rgba(0, 0, 0, 0.92); opacity: 0; transform-origin: 0 0; pointer-events: none; }
.pinIn { display: block; }
.pq { margin: 0; font: 500 clamp(13px, calc(var(--u) * 2.05), 24px)/1.36 var(--display); color: var(--ivory); text-wrap: pretty; }
.pr { display: block; margin-top: calc(var(--u) * 1); padding-top: calc(var(--u) * 0.75); border-top: 1px solid rgba(201, 167, 92, 0.22); font: 400 clamp(11px, calc(var(--u) * 1.2), 13px)/1.35 var(--ui); letter-spacing: 0.03em; color: rgba(242, 234, 214, 0.72); }

/* the study guide's question: a card of its own, "For next session" */
.sq { position: absolute; left: calc(var(--u) * 24); top: calc(var(--u) * 21.5); width: calc(var(--u) * 52); min-width: 260px; z-index: 9; padding: calc(var(--u) * 1.8) calc(var(--u) * 2.3) calc(var(--u) * 1.5); border-radius: 2px; border: 1px solid rgba(239, 198, 116, 0.78); border-top: 2px solid var(--gold-hi);
  background: linear-gradient(180deg, rgba(40, 29, 15, 0.96), rgba(19, 14, 8, 0.96)); box-shadow: 0 0 0 4px rgba(10, 7, 5, 0.55), 0 26px 60px -18px rgba(0, 0, 0, 0.92); opacity: 0; transform-origin: 0 0; pointer-events: none; }
.sqHd { display: flex; align-items: center; gap: calc(var(--u) * 0.8); }
.sqHd svg { width: clamp(12px, calc(var(--u) * 1.7), 19px); height: clamp(12px, calc(var(--u) * 1.7), 19px); fill: var(--gold-hi); }
.sqK { font: 500 clamp(11px, calc(var(--u) * 1.2), 13px)/1.2 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-hi); }
.sqQ { margin: calc(var(--u) * 1) 0 0; font: italic 500 clamp(13px, calc(var(--u) * 2.1), 25px)/1.28 var(--display); color: var(--ivory); text-wrap: pretty; }
.sqC { display: block; margin-top: calc(var(--u) * 1); font: 400 clamp(11px, calc(var(--u) * 1.2), 13px)/1.3 var(--ui); letter-spacing: 0.04em; color: rgba(242, 234, 214, 0.7); }

/* the week's theme, named once, quietly */
.theme { position: absolute; right: calc(var(--u) * 3.2); top: calc(var(--u) * 3); z-index: 8; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.5) calc(var(--u) * 1); text-align: right; background: linear-gradient(260deg, rgba(13, 10, 7, 0.86), rgba(13, 10, 7, 0.6)); border-right: 2px solid var(--gold); border-radius: 2px 0 0 2px; opacity: 0; pointer-events: none; }
.theme .k { display: block; font: 500 clamp(10.5px, calc(var(--u) * 1.05), 12px)/1.2 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); }
.theme .v { display: block; margin-top: calc(var(--u) * 0.35); font: italic 500 clamp(13px, calc(var(--u) * 2), 23px)/1.1 var(--display); color: var(--ivory); }

/* ---------------- THE TWO POCKETS ---------------- */
/* each is a tile at a bottom corner of the frame (the notebook left, the workshop team right), its label beside it. The flying card passes
   between the tile's back plate (behind it) and its face (in front of it), so it is seen to go INTO the pocket, never just to vanish. */
.pkBack, .pkFace { position: absolute; bottom: calc(var(--u) * 2.4); --t: clamp(40px, calc(var(--u) * 6.4), 64px); }
.pkBack.nb, .pkFace.nb { left: calc(var(--u) * 2.4); }
.pkBack.tm, .pkFace.tm { right: calc(var(--u) * 2.4); }
.pkBack { z-index: 20; width: var(--t); height: var(--t); border-radius: 7px; background: linear-gradient(180deg, #2a2014, #0b0806); border: 1px solid rgba(239, 198, 116, 0.42); opacity: 0; pointer-events: none; }
.pkFace { z-index: 22; display: flex; align-items: center; gap: calc(var(--u) * 1.1); padding: 0; margin: 0; border: 0; background: none; cursor: pointer; opacity: 0; pointer-events: none; -webkit-tap-highlight-color: transparent; text-align: left; transform-origin: 0 100%; }
.pkFace.tm { flex-direction: row-reverse; text-align: right; transform-origin: 100% 100%; }
.pkFace.live { pointer-events: auto; }
.pkTile { position: relative; flex: none; display: grid; place-items: center; width: var(--t); height: var(--t); border-radius: 7px; background: linear-gradient(180deg, rgba(30, 23, 14, 0.97), rgba(12, 9, 6, 0.97)); border: 1px solid rgba(239, 198, 116, 0.62); box-shadow: 0 0 0 3px rgba(10, 7, 5, 0.5), 0 10px 24px -8px rgba(0, 0, 0, 0.9); }
.pkTile::before { content: ''; position: absolute; left: 14%; right: 14%; top: 13%; height: 1px; background: rgba(239, 198, 116, 0.5); }
.pkG { width: 52%; height: 52%; margin-top: 10%; fill: none; stroke: var(--gold-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pkG .rib { fill: var(--gold-hi); stroke: none; transform-origin: 15px 19px; }
.pkG .flapO { opacity: 0; }
.pkN { position: absolute; right: -7px; top: -7px; min-width: clamp(17px, calc(var(--u) * 2.3), 22px); height: clamp(17px, calc(var(--u) * 2.3), 22px); padding: 0 4px; border-radius: 999px; display: grid; place-items: center; background: var(--gold-hi); color: #16110a; font: 700 clamp(9.5px, calc(var(--u) * 1.3), 12.5px)/1 var(--sans); box-shadow: 0 0 0 2px #0c0906; opacity: 0; }
.pkFace.tm .pkN { right: auto; left: -7px; }
.pkDot { position: absolute; right: -4px; bottom: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 2px #0c0906, 0 0 0 5px rgba(226, 178, 110, 0.25); opacity: 0; }
.pkFace.tm .pkDot { right: auto; left: -4px; }
.pkLbl { display: block; overflow: hidden; white-space: nowrap; padding: 5px 9px 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(10, 8, 6, 0.62), rgba(10, 8, 6, 0.4)); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.7); }
.pkK { display: block; font: 600 clamp(11px, calc(var(--u) * 1.2), 13px)/1.2 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory); }
.pkS { display: block; margin-top: 3px; font: 500 clamp(12px, calc(var(--u) * 1.4), 14.5px)/1.25 var(--sans); color: rgba(242, 234, 214, 0.78); }
.pkS b { color: var(--gold-hi); font-weight: 600; }
.pkS .ck { display: inline-block; width: 0.95em; height: 0.95em; margin: 0 0.25em -0.12em 0; fill: none; stroke: var(--gold-hi); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* the name, attached to the sent question without stopping anything */
.tag { position: absolute; right: calc(var(--u) * 2.4); bottom: calc(var(--u) * 10.6); z-index: 23; display: inline-flex; align-items: center; gap: 0.5em; min-height: 36px; padding: 0 14px 0 13px; border-radius: 999px; border: 1px solid rgba(239, 198, 116, 0.6); background: linear-gradient(180deg, rgba(30, 23, 14, 0.97), rgba(12, 9, 6, 0.97)); box-shadow: 0 10px 24px -10px #000; color: var(--ivory); font: 500 clamp(11px, calc(var(--u) * 1.5), 15px)/1 var(--sans); cursor: pointer; opacity: 0; pointer-events: none; transform-origin: 100% 100%; -webkit-tap-highlight-color: transparent; }
.tag::before { content: ''; position: absolute; inset: -8px; }
.tag.live { pointer-events: auto; }
.tag .f { color: var(--smoke); }
.tag b { font-weight: 650; }
.tag .chev { width: 0.8em; height: 0.8em; fill: none; stroke: var(--gold-hi); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tag.named b { font: italic 500 1.12em/1 var(--display); }
.tag .ck { width: 0.95em; height: 0.95em; fill: none; stroke: var(--gold-hi); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: none; }
.tag.named .ck { display: block; } .tag.named .chev { display: none; }

/* a line on black that is not an answer (a pastoral question's fixed line, a blocked question) */
.fixed { position: absolute; left: 50%; top: 50%; z-index: 13; width: max-content; max-width: calc(var(--u) * 64); padding: calc(var(--u) * 1.6) calc(var(--u) * 2.6) calc(var(--u) * 1.7); transform: translate(-50%, -50%); text-align: center; border: 1px solid rgba(201, 167, 92, 0.5); border-radius: 3px; background: rgba(10, 9, 8, 0.94); font: italic 500 clamp(13px, calc(var(--u) * 2.1), 24px)/1.32 var(--display); color: var(--ivory); opacity: 0; pointer-events: none; }

/* ---------------- the upright screens on the glass ---------------- */
.glass { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.glass > * { pointer-events: auto; }
.veil { position: absolute; inset: 0; background: rgba(6, 5, 4, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s ease; }
.veil.on { opacity: 1; }

/* the name and the notification (the app's own card, opened by a tap on the tag) */
.dlg { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; }
.card { width: min(372px, 100%); padding: 22px 22px 18px; border-radius: 16px; background: linear-gradient(180deg, #15110c, #0c0a08); border: 1px solid rgba(201, 167, 92, 0.42); box-shadow: 0 0 0 5px rgba(10, 9, 8, 0.5), 0 30px 70px -20px rgba(0, 0, 0, 0.95); }
.cardK { display: block; font: 500 10px/1.3 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); }
.cardR { display: block; width: 26px; height: 1px; margin: 9px 0 12px; background: var(--gold); }
.cardQ { margin: 0; font: italic 500 21px/1.26 var(--display); color: var(--ivory); }
.cardS { margin: 8px 0 0; font: 500 14.5px/1.4 var(--sans); color: rgba(242, 234, 214, 0.8); }
.field { display: block; margin: 16px 0 14px; }
.fieldL { display: block; margin-bottom: 6px; font: 500 10px/1.3 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--smoke); }
.field input, .field textarea { display: block; width: 100%; margin: 0; padding: 11px 12px; border: 1px solid rgba(201, 167, 92, 0.38); border-radius: 10px; background: rgba(242, 234, 214, 0.05); color: var(--ivory); font: 500 17px/1.25 var(--sans); caret-color: var(--gold-hi); outline: none; }
.field input:focus, .field textarea:focus { border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(239, 198, 116, 0.14); }
.check { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 500 14.5px/1.3 var(--sans); color: rgba(242, 234, 214, 0.86); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: #c9a75c; }
.row { display: flex; gap: 10px; }
.btn { appearance: none; text-decoration: none; flex: 1 1 0; min-height: 46px; margin: 0; padding: 0 16px; border-radius: 999px; font: 600 15px/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--ivory); border: 1px solid rgba(242, 234, 214, 0.26); -webkit-tap-highlight-color: transparent; }
.btn.yes { background: var(--gold); color: var(--ink); border-color: var(--gold); box-shadow: 0 6px 18px -6px rgba(201, 167, 92, 0.6); }
.btn:active { transform: scale(.97); }

/* the crisis card (unchanged from the app) */
.crisis .card { text-align: center; border-color: rgba(226, 178, 110, 0.7); }
.crisisT { margin: 0 0 6px; font: 600 26px/1.15 var(--sans); }
.crisisB { margin: 0 0 18px; font: 500 16px/1.4 var(--sans); color: rgba(242, 234, 214, 0.86); }
.crisisN { margin: 14px 0 0; font: 400 12.5px/1.4 var(--sans); color: var(--smoke); }
.linkBtn { appearance: none; display: block; margin: 12px auto 0; padding: 6px 10px; border: 0; background: transparent; color: var(--smoke); font: 500 14px/1.2 var(--sans); cursor: pointer; }

/* the team's reply arriving (the app's pop) */
.pop { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); width: min(440px, calc(100% - 24px)); transform: translate(-50%, -16px); opacity: 0; transition: opacity .35s ease, transform .5s var(--ease); }
.pop.on { opacity: 1; transform: translate(-50%, 0); }
.popC { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; align-items: center; padding: 12px 12px 10px 12px; border-radius: 14px; background: linear-gradient(180deg, #17120c, #0c0a08); border: 1px solid rgba(201, 167, 92, 0.5); box-shadow: 0 0 0 4px rgba(10, 9, 8, 0.45), 0 22px 50px -16px rgba(0, 0, 0, 0.92); }
.popC .seal { --sz: 34px; }
.popW b { display: block; font: 600 15px/1.3 var(--sans); }
.popW i { display: block; margin-top: 2px; font: italic 500 14px/1.3 var(--display); color: rgba(242, 234, 214, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popGo { flex: none; min-height: 38px; padding: 0 18px; }
.popL { grid-column: 1 / -1; justify-self: end; margin: 4px 0 0; padding: 4px 6px; border: 0; background: none; color: var(--smoke); font: 500 13px/1 var(--sans); cursor: pointer; }

/* the reply film's first frame: the same question object, then who answered */
.rf { position: absolute; inset: 0; background: #070605; display: grid; place-items: center; }
.rfFrame { position: relative; overflow: hidden; background: #000 center / cover no-repeat; }
.rfX { position: absolute; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(201, 167, 92, 0.35); background: rgba(10, 8, 6, 0.6); color: var(--ivory); font: 400 18px/1 var(--sans); cursor: pointer; }
.rfBy { position: absolute; padding: 0.9em 1.4em 1em 1.2em; background: linear-gradient(100deg, rgba(13, 10, 7, 0.9), rgba(13, 10, 7, 0.66)); border-left: 2px solid var(--gold); border-radius: 0 2px 2px 0; }
.rfBy .k { display: block; font: 500 10px/1.3 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); }
.rfBy .n { display: block; margin-top: 4px; font: italic 500 22px/1.15 var(--display); }
.rfBy .r { display: block; margin-top: 3px; font: 500 12px/1.2 var(--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); }
.rfCap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 16px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85)); font: 500 15px/1.4 var(--display); text-align: center; color: var(--ivory); }
.rfCap small { display: block; margin-top: 6px; font: 400 11px/1.3 var(--sans); color: var(--smoke); }

/* ---------------- the opened pockets: the notebook and the sent view ---------------- */
.drw { position: absolute; z-index: 2; display: flex; flex-direction: column; background: linear-gradient(180deg, #17120c 0%, #0d0a07 40%, #0a0806 100%); border: 1px solid rgba(201, 167, 92, 0.36); box-shadow: 0 0 0 1px #000, 0 30px 80px -10px #000; color: var(--ivory); transition: transform .5s var(--ease), opacity .3s ease; }
.drw.up { left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top, 0px) + 44px); border-radius: 18px 18px 0 0; border-bottom: 0; transform: translateY(102%); }
.drw.side { top: 0; bottom: 0; width: min(430px, 56%); }
.drw.side.l { left: 0; border-radius: 0 14px 14px 0; border-left: 0; transform: translateX(-102%); }
.drw.side.r { right: 0; border-radius: 14px 0 0 14px; border-right: 0; transform: translateX(102%); }
.drw.on { transform: none !important; }
.dGrab { flex: none; width: 38px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: rgba(242, 234, 214, 0.22); }
.drw.side .dGrab { display: none; }
.dHd { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px 18px; border-bottom: 1px solid rgba(201, 167, 92, 0.16); }
.dIc { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 7px; background: linear-gradient(180deg, rgba(30, 23, 14, 0.97), rgba(12, 9, 6, 0.97)); border: 1px solid rgba(239, 198, 116, 0.6); }
.dIc svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dIc svg .rib { fill: var(--gold-hi); stroke: none; }
.dTt { flex: 1; min-width: 0; }
.dTt b { display: block; font: italic 500 22px/1.1 var(--display); }
.dTt span { display: block; margin-top: 3px; font: 400 12.5px/1.3 var(--sans); color: rgba(242, 234, 214, 0.6); }
.dX { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(201, 167, 92, 0.32); background: rgba(10, 8, 6, 0.56); color: var(--ivory); font: 400 18px/1 var(--sans); cursor: pointer; }
.dTabs { flex: none; display: flex; gap: 6px; padding: 10px 16px 4px; }
.dTabs button { flex: 1; min-height: 36px; border-radius: 999px; border: 1px solid rgba(242, 234, 214, 0.18); background: transparent; color: rgba(242, 234, 214, 0.75); font: 600 13px/1 var(--sans); cursor: pointer; }
.dTabs button.on { background: rgba(201, 167, 92, 0.15); border-color: rgba(239, 198, 116, 0.55); color: var(--gold-hi); }
.dBody { flex: 1; overflow: auto; padding: 6px 16px 28px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(201, 167, 92, 0.35) transparent; }
.wkH { display: flex; align-items: center; gap: 10px; margin: 18px 2px 10px; }
.wkH img { width: 44px; height: 26px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(201, 167, 92, 0.3); }
.wkH b { display: block; font: 500 10px/1.3 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); }
.wkH span { display: block; font: italic 500 15px/1.2 var(--display); color: rgba(242, 234, 214, 0.86); }
.ent { margin: 0 0 14px; border-radius: 10px; border: 1px solid rgba(201, 167, 92, 0.24); background: rgba(242, 234, 214, 0.02); overflow: hidden; }
.ent.fresh { border-color: rgba(239, 198, 116, 0.55); box-shadow: 0 0 0 3px rgba(239, 198, 116, 0.08); }
.entQ { display: grid; grid-template-columns: auto 1fr; column-gap: 11px; padding: 14px 14px 12px; border-left: 2px solid var(--gold); background: linear-gradient(100deg, rgba(13, 10, 7, 0.8), rgba(13, 10, 7, 0.3)); cursor: pointer; }
.entQ .seal { --sz: 30px; margin-top: 2px; }
.entK { font: 500 9.5px/1.3 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); }
.entK span { color: var(--smoke); letter-spacing: 0.12em; }
.entT { margin: 4px 0 0; font: italic 500 18.5px/1.25 var(--display); }
.entF { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.entF .chip { font-size: 10.5px; }
.stat { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1.2 var(--sans); color: rgba(242, 234, 214, 0.66); }
.stat svg { width: 14px; height: 14px; fill: none; stroke: var(--gold-hi); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stat.hot { color: var(--ember); }
.entB { padding: 2px 14px 14px; }
.entB.shut { display: none; }
.sub { display: block; margin: 14px 0 7px; font: 500 9.5px/1.3 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--smoke); }
.nt { display: grid; grid-template-columns: 58px 1fr; gap: 10px; width: 100%; margin: 0 0 8px; padding: 9px; text-align: left; border-radius: 6px; border: 1px solid rgba(239, 198, 116, 0.22); background: linear-gradient(180deg, rgba(27, 20, 13, 0.9), rgba(14, 10, 6, 0.9)); cursor: pointer; color: var(--ivory); }
.nt img { width: 58px; height: 33px; object-fit: cover; border-radius: 3px; }
.ntQ { display: block; font: 500 14px/1.32 var(--display); }
.ntS { display: block; margin-top: 4px; font: 400 10.5px/1.3 var(--ui); letter-spacing: 0.06em; color: rgba(242, 234, 214, 0.6); }
.ntMore { display: none; grid-column: 1 / -1; margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(201, 167, 92, 0.16); font: 500 13.5px/1.45 var(--display); color: rgba(242, 234, 214, 0.86); }
.ntMore small { display: block; margin-top: 6px; font: 400 10.5px/1.35 var(--ui); color: var(--smoke); }
.nt.open .ntMore { display: block; }
.nsq { padding: 12px 13px 11px; border-radius: 6px; border: 1px solid rgba(239, 198, 116, 0.7); border-top: 2px solid var(--gold-hi); background: linear-gradient(180deg, rgba(40, 29, 15, 0.9), rgba(19, 14, 8, 0.9)); }
.nsq .sqHd svg { width: 14px; height: 14px; }
.nsq .sqK { font-size: 10px; }
.nsq p { margin: 7px 0 0; font: italic 500 16px/1.3 var(--display); }
.nsq small { display: block; margin-top: 6px; font: 400 10.5px/1.3 var(--ui); color: rgba(242, 234, 214, 0.66); }
.th { padding: 11px 12px; border-radius: 6px; border: 1px dashed rgba(242, 234, 214, 0.2); }
.th p { margin: 0 0 10px; font: italic 500 15.5px/1.35 var(--display); color: rgba(242, 234, 214, 0.92); }
.th p.ph { font: 400 13.5px/1.35 var(--sans); color: var(--smoke); }
.th .row .btn { min-height: 40px; font-size: 14px; }
.th textarea { min-height: 76px; resize: vertical; }
.rp { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 8px; border: 1px solid rgba(226, 178, 110, 0.55); background: rgba(226, 178, 110, 0.06); cursor: pointer; }
.rpV { position: relative; width: 92px; height: 52px; border-radius: 5px; background: #000 center / cover; }
.rpV::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(10, 8, 6, 0.65) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M10.5 8v10l8-5z' fill='%23f2ead6'/%3E%3C/svg%3E") center/100%; box-shadow: 0 0 0 1px rgba(239, 198, 116, 0.6); }
.rpW b { display: block; font: 600 14.5px/1.3 var(--sans); }
.rpW span { display: block; margin-top: 2px; font: 400 12px/1.3 var(--sans); color: var(--smoke); }
.none { margin: 0; font: 400 13px/1.45 var(--sans); color: var(--smoke); }
.again { display: flex; align-items: center; gap: 8px; width: 100%; margin: 10px 0 0; padding: 10px 12px; border-radius: 6px; border: 1px solid rgba(242, 234, 214, 0.16); background: transparent; color: var(--ivory); font: 600 13.5px/1 var(--sans); cursor: pointer; }
.again svg { width: 16px; height: 16px; fill: var(--gold-hi); }
.steps { display: flex; align-items: center; gap: 0; margin: 12px 0 4px; }
.stp { flex: 1; position: relative; padding-top: 16px; font: 500 11.5px/1.25 var(--sans); color: var(--smoke); }
.stp::before { content: ''; position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(242, 234, 214, 0.3); background: #0c0906; }
.stp::after { content: ''; position: absolute; left: 11px; right: 4px; top: 8px; height: 1px; background: rgba(242, 234, 214, 0.16); }
.stp:last-child::after { display: none; }
.stp.done { color: rgba(242, 234, 214, 0.86); }
.stp.done::before { background: var(--gold-hi); border-color: var(--gold-hi); }
.stp.hot { color: var(--ember); }
.stp.hot::before { background: var(--ember); border-color: var(--ember); }
.stp b { display: block; font-weight: 600; }
.from { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 9px 11px; border-radius: 6px; background: rgba(242, 234, 214, 0.04); font: 500 13.5px/1.2 var(--sans); }
.from em { font: italic 500 16px/1 var(--display); }
.from .btn { flex: none; min-height: 34px; padding: 0 14px; font-size: 13px; }

/* reduced motion: every move is a fade */
.reduced .pkG .rib { transform: none !important; }

@media (max-width: 1100px) { .shell { grid-template-columns: 1fr 340px; } }

/* stacking inside the question: the card in front of its leaves */
.leaves { z-index: 0; } .qc { z-index: 1; }
.pkG .rib { transform-box: fill-box; transform-origin: 50% 0; }
/* the reply film's frame reuses the question card as it stood */
.rfFrame { position: relative; flex: none; --u: 8.54px; }
.static .qcMat, .static .qc .qcHd, .static .qc .qt, .static .qc .qf { opacity: 1; }
/* a phone held sideways: the prototype's own controls shrink to one pill at the top so the frame's corners stay clear */
.phoneMode.sideways .mob { top: calc(env(safe-area-inset-top, 0px) + 6px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: auto; padding: 0; background: none; }
.phoneMode.sideways .mobCap { display: none; }
.phoneMode.sideways .mobRow button { flex: none; min-height: 32px; padding: 0 12px; background: rgba(10, 8, 6, 0.6); }
.phoneMode.sideways .mobRow [data-act="replay"], .phoneMode.sideways .mobRow [data-act="step"] { display: none; }
.mobCap { pointer-events: auto; cursor: pointer; }
.clean .mob { display: none !important; }

/* the idle tile stays a 44 px target */
.pkFace::before { content: ''; position: absolute; inset: -8px; }
.glassOpen .mob { display: none !important; }
.mobCap em.hot { font-style: normal; color: var(--gold-hi); }

/* a name still wanted: a small gold dot on the team tile (the reply dot is ember) */
.pkDot.need { background: var(--gold-hi); box-shadow: 0 0 0 2px #0c0906; }
/* the reply film's frame: a solid byline under the same question card, its first line in the display face */
.rfBy { background: rgba(13, 10, 7, 0.95); box-shadow: 0 0 0 1px rgba(239, 198, 116, 0.18), 0 10px 30px -10px rgba(0, 0, 0, 0.9); }
.rfBy .k { font-size: clamp(11px, calc(var(--u) * 1.15), 13px); }
.rfBy .n { font-size: clamp(17px, calc(var(--u) * 2.6), 30px); }
.rfCap { padding: 0 calc(var(--u) * 10) calc(var(--u) * 5); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55) 60%); font: italic 500 clamp(15px, calc(var(--u) * 2.4), 28px)/1.3 var(--display); color: var(--ivory); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }

/* a kept thought is a card, not an empty drop zone; its Edit is a small word on the label line */
.th.full { border: 1px solid rgba(201, 167, 92, 0.35); }
.th.full p { margin: 0; }
.subRow { display: flex; align-items: center; justify-content: space-between; }
.txtBtn { appearance: none; border: 0; background: none; padding: 4px 2px; color: var(--gold-hi); font: 500 10.5px/1 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; }
.rfBy { padding: 0.75em 1.3em 0.8em 1.1em; }

/* drawer labels at 11 px everywhere; the study block's bookmark sits by its label */
.sub, .wkH b, .entK, .fieldL, .cardK, .dTt span { font-size: 11px; }
.subMark { display: flex; align-items: center; gap: 6px; }
.subMark svg { width: 12px; height: 12px; fill: var(--gold-hi); }
.nsq p { margin-top: 0; }