/* The check-in face — the ONE implementation every surface renders
   (screen.html #ovl, display.html panels, console preview + thumbs).
   All sizes are container units, so the same rules produce the same
   geometry at any scale; the projector's container is the viewport. */
.face{container-type:size;position:relative;width:100%;height:100%;background:#fff;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;
  overflow:hidden}
.face .lcell{text-align:center;max-width:92%;overflow-wrap:anywhere}
/* the crew's ground (the check-in crew, UI.checkinCrew): a layer sharing the
   LEFT cell with the words, behind them, clipped to the cell — the animation
   can't reach the separator or the QR by construction. Both are pinned to
   column 1 so they stack; the divider and the QR column auto-place after. */
.face .lcell{grid-area:1/1;position:relative;z-index:1}
.face .lbg{grid-area:1/1;position:relative;width:100%;height:100%;overflow:hidden;z-index:0}
.face .lbg .crew{position:absolute;left:0;top:0;width:100%;height:100%}
.face h2{margin:0;font-weight:700;color:#1E3A8A;font-size:8cqw;line-height:1.05;
  letter-spacing:-.01em;font-family:system-ui,-apple-system,sans-serif}
.face .ssub{color:#2F5496;font-size:4.2cqw;margin-top:1.5cqh}
.face .vsep{width:.3cqw;min-width:2px;height:46cqh;background:#2F5496;align-self:center}
.face .qrcol{text-align:center}
.face img{width:min(72cqh,42cqw);max-width:92%;image-rendering:pixelated;display:block;margin:0 auto}
/* photo-mode watermark markers: sized relative to the QR, hidden until fed */
.face .wm{font:700 calc(min(72cqh,42cqw) * .075) ui-monospace,Menlo,monospace;
  letter-spacing:.06em;margin:.4cqh 0;display:none;color:#111}

/* the prompt face (Q&A): the question in an outlined box, then a SEPARATE
   outlined box below with the answer options in two columns. Both box widths
   are set inline (the Box width control). */
.promptface{container-type:size;position:relative;width:100%;height:100%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqh;
  overflow:hidden;padding:4cqw}
.promptface .ptext,.promptface .popts{box-sizing:border-box;color:#141824;flex-shrink:0;
  padding:4cqw;font-family:system-ui,-apple-system,sans-serif}   /* flex-shrink:0 so
  the box always surrounds its content; width set inline, may exceed 100% (bleed) */
/* the box outlines show only in the editor preview (.outlined), not the thumb.
   The options container has no outline — just the prompt box and column boxes. */
.promptface.outlined .ptext{border:0.4cqw dotted #C4C9D4;border-radius:2cqw}
.promptface .pq{font-weight:700;text-align:center;line-height:1.15;
  white-space:pre-wrap;overflow-wrap:anywhere}
/* the clarifier: smaller, lighter, beneath the question inside the prompt box */
.promptface .pclar{font-weight:500;text-align:center;line-height:1.2;margin-top:2.5cqh;
  color:#5B6274;white-space:pre-wrap;overflow-wrap:anywhere}
/* the options container is invisible — just a layout grid for the column
   boxes (columns/gap set inline); no outline or padding of its own */
.promptface .popts{display:grid;justify-content:center;row-gap:1.6cqh;padding:0;
  text-align:left;font-weight:500;line-height:1.25}
/* the letter in its own cell → multi-line text keeps a hanging indent */
.promptface .popt{display:flex;gap:1cqw;align-items:baseline;box-sizing:border-box;
  padding:1.5cqw 2cqw;overflow-wrap:anywhere}
.promptface .popt .pl{flex:none;font-weight:700;color:#2F5496}
.promptface .popt .ptxt{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
/* the column boxes, like the others, show their outline only in the preview */
.promptface.outlined .popt{border:0.35cqw dotted #C4C9D4;border-radius:1.5cqw}

/* card mode: the question (prompt + options) in ONE rounded box that sizes to
   its content. It is NOT the query container here — the surrounding stage is —
   so the cqw/cqh inside still resolve against the full slide geometry. */
.promptface.card{container-type:normal;position:static;width:auto;height:auto;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow:visible;padding:5cqw;border:0.4cqw solid #C4C9D4;border-radius:3cqw;background:#fff}
.promptface.card .ptext{padding:0}   /* the card's own padding is the only inset */

/* the answers slide (Q&A slide 2): a vertical divider down the middle like the
   check-in face; the question scaled into the left half (see .afstage), the
   results area on the right. */
.answersface{container-type:size;position:relative;width:100%;height:100%;background:#fff;
  display:grid;grid-template-columns:2fr auto 1fr;align-items:center;justify-items:center;overflow:hidden}
/* the question card renders on a native stage (its own size container) that
   UI.fitAnswers scales to fit this cell, centred, clearing the footer. Same
   function runs on every surface, so preview and projector share the geometry. */
.answersface .afq{position:relative;width:100%;height:100%;overflow:hidden}
.answersface .afstage{container-type:size;position:absolute;left:0;top:0;width:960px;height:540px;transform-origin:0 0}
.answersface .afsep{width:.3cqw;min-width:2px;height:46cqh;background:#C4C9D4;align-self:center}
/* the right half: the answer statistics, centered. One row per supplied option
   (share % and count), then a total; the correct option's letter is circled. */
.answersface .afr{width:100%;height:100%;display:flex;align-items:center;justify-content:flex-start;padding:4cqw 4cqw 4cqw 2cqw}
/* only the option rows are vertically centered; the total hangs just below
   them (out of flow) so it doesn't pull the options off-centre. The block
   hugs its rows (fit-content) so it centres as a unit in the right half. */
.answersface .afstats{position:relative;display:flex;flex-direction:column;width:fit-content;max-width:44cqw;
  font-family:system-ui,-apple-system,sans-serif;color:#141824}
.answersface .afsrow{display:flex;align-items:center;gap:2cqw}
/* the letter ("A.") sits in the same square box on every row, so the circle
   (drawn border-box on the correct one only) never changes its width — the
   value column stays put whether a row is circled or not */
.answersface .afsltr{flex:none;display:inline-grid;place-items:center;box-sizing:border-box;
  width:1.9em;height:1.9em;line-height:1;font-weight:700;font-size:3cqw;color:#2F5496;
  border:0.12em solid transparent;border-radius:50%}
.answersface .afsltr.correct{border-color:#2F5496}
.answersface .afsval{flex:none;font-size:3cqw;font-weight:600;color:#2F5496;white-space:nowrap}
/* the total's left edge aligns with the value column (letter box 1.9em @ 3cqw
   = 5.7cqw, plus the row's 2cqw gap), so "(n answers)" lines up under the
   first digit of the percentages */
.answersface .afstotal{position:absolute;top:100%;left:7.7cqw;
  margin-top:1.4cqh;font-size:1.9cqw;font-weight:600;color:#5B6274;white-space:nowrap}
/* faint session details in the bottom-left corner: instructor, then date ·
   time. Sized in cqw so it scales with the surface (preview → projector). */
.answersface .afmeta{position:absolute;left:3cqw;bottom:3cqw;z-index:2;text-align:left;
  font-family:system-ui,-apple-system,sans-serif;line-height:1.3;letter-spacing:.01em}
.answersface .afmeta .afmi{font-weight:600;font-size:1.7cqw;color:#9AA1AD}
.answersface .afmeta .afmd{font-weight:500;font-size:1.5cqw;color:#B6BCC6;margin-top:.3cqh}

/* ── the idle slide: what a projector face shows when nothing is being
   presented. White in every theme (a projection surface); a faint gray
   brand watermark sits top-left, its tail fainter still. Geometry (size,
   borders) belongs to each surface. ── */
.idleslide{position:relative;overflow:hidden;background:#fff;container-type:size}
/* THE WORDMARK LIVES HERE AND ONLY HERE — words, colours, weight, geometry.
   Markup is a bare <div class="brand"></div> (index.html, compositor.js);
   the console's idle stream mirrors this rule's computed style onto its
   canvas (ui.js idleStream). Change the brand in this one place.
   top: 3cqw minus the glyph's headroom (ink starts .141em below the box
   top at line-height 1), so the i's dot sits 3cqw from BOTH edges */
.idleslide .brand{position:absolute;top:calc(3cqw - .37cqw);left:3cqw;
  font:700 2.6cqw/1 system-ui;color:#B9BFCA}
.idleslide .brand::before{content:"infinisym"}
.idleslide .brand::after{content:"posium";color:#FD92A3}
.idleslide .crew{position:absolute;inset:0;width:100%;height:100%}

/* the QUESTIONS face (v4.20; a grid since 2026-09-23): the class's
   questions, for the room — see UI.questionsFace. Same white sheet and navy
   as the other faces; large type (a lecture hall reads it from the back). */
.qnface{container-type:size;position:relative;width:100%;height:100%;background:#fff;color:#141824;
  display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow:hidden;text-align:left}
/* No header bar: the brand floats over the top-right corner with
   "Questions" small beneath it; the grid opens below that height. */
.qnface .qnfloat{position:absolute;top:3cqh;right:4cqw;z-index:3;text-align:right;line-height:1;
  background:#fff;box-shadow:0 0 1.6cqw 1.6cqw #fff;border-radius:1cqw}   /* a soft white ground: text passing under it never collides with the mark */
.qnface .qnbrand{font-weight:700;font-size:3.2cqw;letter-spacing:-.01em;color:#B9BFCA}
.qnface .qnbrand span{color:#FD92A3}
/* the brand's own gray, and exactly as wide as the "posium" above it — the
   width is FITTED by UI.questionsFace (font-size set inline, in cqw); this
   size is only where the fit starts from. inline-block so it has a width of
   its own to measure. */
.qnface .qntitle{display:inline-block;margin-top:1cqh;font-weight:650;font-size:2cqw;color:#B9BFCA;
  letter-spacing:.01em;white-space:nowrap}
/* (2026-09-23) the questions are a GRID of cards — the follow-ups first,
   then the new ones, each by votes (the console's order), a thin rule between
   the two groups. Cut at the bottom when more than fit: the most important
   are the ones on screen. It opens below the brand's height. */
.qnface .qnlist{flex:1;min-height:0;overflow:hidden;box-sizing:border-box;padding:14cqh 4cqw 3cqh;
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));grid-auto-rows:min-content;
  align-content:start;gap:2.2cqw}
.qnface .qncard{display:flex;flex-direction:column;gap:1.2cqh;box-sizing:border-box;min-height:17cqh;
  padding:2.4cqh 1.8cqw 1.6cqh;border-radius:1.4cqw;background:#F1F3F7;border:.15cqw solid #E3E6EE}
.qnface .qngap{grid-column:1 / -1;height:.25cqh;background:#E3E6EE;margin:.4cqh 0}
/* a card that arrives while the face is up eases in */
@keyframes qnin{from{opacity:0;transform:translateY(3cqh)}to{opacity:1;transform:none}}
.qnface .qncard.new{animation:qnin .8s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion: reduce){ .qnface .qncard.new{animation:none} }
.qnface .qntext{flex:none;font-size:2.3cqw;line-height:1.22;font-weight:540;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.qnface .qnmeta{margin-top:auto;display:flex;gap:1.2cqw;justify-content:flex-end;align-items:center;
  font-size:2cqw;font-weight:700;min-height:2.2cqw}
.qnface .qnvote{color:#2E52F2}
.qnface .qnvote.neg{color:#98A0B4}
.qnface .qntick{color:#1E9A5A}
.qnface .qncard.ans .qntext{color:#7A8194}
/* FOCUS (2026-09-22, second shape — the first was a band across the top):
   the question under discussion is a CARD in the middle of the slide, centred
   both ways, on an opaque ground, casting a shadow. It floats over the stream,
   which keeps flowing behind it at full height. It fades and settles in, and
   keeps its words while it goes. */
.qnface .qnfocus{position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  pointer-events:none;opacity:0;transition:opacity .35s ease}
.qnface.spot .qnfocus{opacity:1}
.qnface .qnfocus > div{transform:scale(.94) translateY(1.5cqh);
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.qnface.spot .qnfocus > div{transform:none}
.qnface .qnfbody{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.4cqh;text-align:center;box-sizing:border-box;
  width:max-content;max-width:78cqw;max-height:82cqh;overflow:hidden;
  padding:6cqh 6cqw;border-radius:2.2cqw;background:#fff;
  box-shadow:0 .6cqh 1.6cqh rgba(10,14,40,.14), 0 3cqh 8cqh rgba(10,14,40,.30)}
.qnface .qnbig{font-weight:650;color:#1E3A8A;line-height:1.16;overflow-wrap:anywhere;
  text-wrap:balance}   /* even lines on the card, not one long and a stub */
/* the focus card shows the question ALONE (owner, 2026-09-23): no count, no answer */
@media (prefers-reduced-motion: reduce){ .qnface .qnfocus > div{transition:none;transform:none} }