/* --- questions from the room ---
     The panel is the only part of this the audience is meant to see, and
     only for as long as it takes them to scan. Everything else — the
     count on the rail, the answers in the summary — is presenter side. */
  .qa-panel{position:fixed; inset:0; z-index:60; display:flex; align-items:center;
    justify-content:center; background:rgba(10,10,10,.94); padding:var(--s-lg)}
  .qa-panel[hidden]{display:none}
  /* QR on one side, the questions on the other: while the code is up for people
     still arriving, the presenter is reading what has already come in. */
  .qa-card{display:flex; gap:var(--s-xl); align-items:flex-start;
    max-width:1100px; width:100%; max-height:84vh}
  .qa-side{display:flex; flex-direction:column; align-items:center; gap:var(--s-sm);
    flex:0 0 auto; text-align:center}
  .qa-acts{display:flex; gap:var(--s-xs); flex-wrap:wrap; justify-content:center}
  .qa-feed{flex:1 1 auto; min-width:0; overflow-y:auto; max-height:84vh; text-align:left}
  .qa-feedh{display:flex; align-items:baseline; justify-content:space-between; margin:0 0 var(--s-xs);
    font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--muted)}
  .qa-newest{color:var(--muted-soft)}

  /* A question raised onto the shared screen. Sized to be read from the back of
     a room, and it sits over the slide rather than replacing it so the page it
     is about is still there behind. */
  .qa-stage{position:fixed; left:0; right:0; bottom:0; z-index:26; pointer-events:none;
    padding:0 var(--s-lg) 84px; display:flex; justify-content:center}
  .qa-stage[hidden]{display:none}
  .qa-stage-in{max-width:1000px; width:100%; padding:var(--s-lg) var(--s-xl);
    background:rgba(10,10,10,.93); border:1px solid var(--primary);
    border-radius:var(--r-lg); pointer-events:auto}
  .qa-stage-meta{margin:0 0 var(--s-xs); font-family:var(--mono); font-size:13px;
    color:var(--muted); display:flex; gap:var(--s-sm)}
  .qa-stage-meta b{color:var(--primary); font-weight:700}
  .qa-stage-q{margin:0; font-size:30px; line-height:1.4; font-weight:600;
    color:var(--on-dark); word-break:keep-all}

  .qa-corner{position:fixed; right:var(--s-md); bottom:80px; z-index:25;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:10px; background:#fff; border-radius:var(--r-lg)}
  .qa-corner[hidden]{display:none}
  .qa-corner canvas{width:104px; height:104px; display:block}
  .qa-corner span{font-family:var(--mono); font-size:10px; font-weight:700;
    letter-spacing:.5px; color:#0a0a0a}
  body.hide-chrome .qa-corner{bottom:var(--s-md)}
  .qa-corner-n{position:absolute; top:-8px; right:-8px; min-width:24px; height:24px;
    padding:0 7px; border-radius:var(--r-pill); background:var(--on-primary);
    color:var(--primary); font-family:var(--mono); font-size:12px; font-weight:700;
    line-height:24px; text-align:center; box-shadow:0 0 0 2px #fff}
  .qa-corner{position:fixed}
  .qa-corner-n[hidden]{display:none}

  /* The count while presenting.

     It appears only once the toolbar has faded, because until then the badge on
     the Questions button is already saying it. Muted at rest and accent for a
     moment when one lands: this sits on somebody's slide, and a thing that
     blinks forever there is worse than no thing at all.

     Not red. In this palette red is the fix tag and the laser, so a red dot in
     the corner of a deck reads as "something is wrong on this page". */
  .qa-ping{position:fixed; right:var(--s-md); bottom:80px; z-index:25;
    display:none; align-items:center; gap:7px; height:32px; padding:0 12px 0 10px;
    border-radius:var(--r-pill); background:var(--surface-card);
    border:1px solid var(--hairline); color:var(--muted);
    transition:background .3s var(--ez), color .3s var(--ez), border-color .3s var(--ez)}
  body.hide-chrome .qa-ping.has{display:inline-flex; bottom:var(--s-md)}
  .qa-ping i{width:7px; height:7px; border-radius:50%; background:currentColor; display:block}
  .qa-ping b{font-family:var(--mono); font-size:13px; font-weight:700; line-height:1}
  .qa-ping.beat{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
  @media (prefers-reduced-motion:reduce){ .qa-ping{transition:none} }
  /* White plate behind the code: a QR on a near-black canvas is a QR most
     phone cameras will refuse, and this one has to work from a back row. */
  #qaQr{width:min(52vh,360px); height:min(52vh,360px); background:#fff;
    border-radius:var(--r-lg); padding:14px; display:block}
  .qa-scan{margin:0; font-size:16px; color:var(--body-strong); word-break:keep-all}
  .qa-url{margin:0; font-family:var(--mono); font-size:11px; color:var(--muted-soft);
    word-break:break-all; max-width:400px}

  /* The rail already marks decisions; a page carrying questions gets a dot
     above it rather than another colour inside it. */
  .tick.hasq::after{content:''; position:absolute; left:50%; top:-5px; width:4px; height:4px;
    margin-left:-2px; border-radius:50%; background:var(--primary)}
  .tick{position:relative}

  .qa-count{display:inline-flex; align-items:center; justify-content:center; min-width:18px;
    height:18px; padding:0 5px; margin-left:6px; border-radius:var(--r-pill);
    background:var(--primary); color:var(--on-primary);
    font-family:var(--mono); font-size:10.5px; font-weight:700; line-height:18px}
  /* Once the button is pressed it is accent on accent, so the count inverts.
     The label and icon are left alone — they already read as --on-primary, and
     recolouring them to the accent was what made this button illegible in the
     one state it most needed to be read. */
  #btnQa[aria-pressed="true"] .qa-count{background:var(--on-primary); color:var(--primary)}
  /* Not yet available: dimmed but still there, and still says what it is.
     Hiding it would leave people wondering whether it ever existed. */
  .btn.soon{opacity:.45}
  .btn.soon:hover{background:var(--surface-card)}
  .btn.soon .lbl{color:var(--muted)}

  /* --- the Q&A section of the summary --- */
  .qa-list{margin:0 0 var(--s-lg)}
  .qa-row{padding:var(--s-md) 0; border-bottom:1px solid var(--hairline)}
  .qa-row:last-child{border-bottom:0}
  .qa-meta{display:flex; align-items:center; gap:var(--s-xs); margin-bottom:6px;
    font-family:var(--mono); font-size:11px; color:var(--muted)}
  .qa-go{border:0; background:transparent; padding:0; cursor:pointer; color:var(--primary);
    font-family:var(--mono); font-size:11px; font-weight:700; text-decoration:underline;
    text-underline-offset:3px}
  .qa-go:hover{color:var(--primary-active)}
  .qa-q{margin:0 0 var(--s-xs); font-size:15px; line-height:1.6; color:var(--on-dark);
    word-break:keep-all; white-space:pre-wrap}
  /* Live rows are read-only and tappable: the presenter picks one and it goes
     up on the screen. Typing an answer belongs to the summary afterwards, not
     to the middle of a talk. */
  #qaLive .qa-row{cursor:pointer; border-radius:var(--r-md); padding:var(--s-sm) var(--s-md);
    margin-bottom:2px; border-bottom:1px solid var(--hairline)}
  #qaLive .qa-row:hover{background:var(--surface-card)}
  .qa-cue{display:block; margin-top:6px; font-family:var(--mono); font-size:10px;
    letter-spacing:.5px; color:var(--muted-soft); opacity:0; transition:opacity .15s}
  #qaLive .qa-row:hover .qa-cue{opacity:1}
  @media (pointer:coarse){ .qa-cue{opacity:1} }
  /* Selected rows used to carry a bar down their left edge. What the state
     actually means is "this one is up on the screen right now", so it says
     that: a quiet lift of the surface, and a badge that names the state. A
     stripe made it look like a checkbox nobody could tick. */
  #qaLive .qa-row.on{background:var(--surface-elevated)}
  .qa-onair{display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px;
    border-radius:var(--r-pill); background:var(--primary); color:var(--on-primary);
    font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.3px;
    text-transform:uppercase; white-space:nowrap}
  .qa-onair i{width:5px; height:5px; border-radius:50%; background:currentColor;
    display:inline-block; animation:onair 1.6s ease-in-out infinite}
  @keyframes onair{50%{opacity:.25}}
  @media (prefers-reduced-motion:reduce){ .qa-onair i{animation:none} }
  .qa-likes{margin-left:auto; display:inline-flex; align-items:center; gap:4px;
    font-family:var(--mono); font-size:11px; color:var(--muted)}
  .qa-likes svg{width:12px; height:12px; fill:currentColor}
  .qa-likes.hot{color:var(--primary)}

  /* Collapsed by default: a quiet link, not a field. */
  .qa-slot{margin-top:var(--s-xs)}
  .qa-link{border:0; background:transparent; padding:0; cursor:pointer;
    font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted);
    text-decoration:underline; text-underline-offset:3px}
  .qa-link:hover{color:var(--primary)}
  /* An answer that exists is text, not an editable box sitting open. */
  .qa-ans{padding:var(--s-sm) var(--s-md); background:var(--surface-card);
    border-left:2px solid var(--primary); border-radius:0 var(--r-md) var(--r-md) 0}
  .qa-ans span{display:block; font-family:var(--mono); font-size:10px; letter-spacing:1px;
    text-transform:uppercase; color:var(--muted); margin-bottom:4px}
  .qa-ans p{margin:0 0 var(--s-xs); font-size:14.5px; line-height:1.6; color:var(--body);
    white-space:pre-wrap}

  .qa-a{display:flex; gap:var(--s-xs); align-items:flex-start}
  .qa-a textarea{flex:1; min-height:44px; font-family:inherit; font-size:14px; line-height:1.55;
    color:var(--on-dark); background:var(--surface-soft); border:1px solid var(--hairline);
    border-radius:var(--r-md); padding:9px var(--s-sm); resize:vertical}
  .qa-a textarea:focus{outline:2px solid var(--primary); outline-offset:1px; border-color:transparent}
  .qa-a button{flex:0 0 auto; height:38px; padding:0 var(--s-md); border:0;
    border-radius:var(--r-md); background:var(--surface-elevated); color:var(--on-dark);
    font-family:inherit; font-size:13px; font-weight:600; cursor:pointer}
  .qa-a button:hover{background:var(--primary); color:var(--on-primary)}
  .qa-a button.saved{background:var(--emerald); color:#04120a}
  .qa-empty{padding:var(--s-md) 0; font-size:14px; color:var(--muted)}

  @media (max-width:900px){
    .qa-card{flex-direction:column; align-items:center; max-height:none; overflow-y:auto}
    .qa-feed{width:100%; max-height:none}
    #qaQr{width:min(56vw,260px); height:min(56vw,260px)}
    .qa-stage-q{font-size:21px}
    .qa-a{flex-direction:column} .qa-a button{width:100%}
  }
  @media (max-height:500px){
    #qaQr{width:min(38vh,190px); height:min(38vh,190px)}
    .qa-stage{padding-bottom:56px}
    .qa-stage-q{font-size:20px}
    .qa-corner{bottom:56px}
    .qa-corner canvas{width:78px; height:78px}
  }

  /* --- the landing section, held behind QA_READY --- */
  .qasec{padding-bottom:96px}
  html:not([data-qa]) .qasec{display:none}
  .soon-tag{display:inline-flex; align-items:center; height:22px; padding:0 10px;
    border-radius:var(--r-pill); background:var(--primary); color:var(--on-primary);
    font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.5px}
  .qasec-top{max-width:760px; margin-bottom:var(--s-xl)}
  .qasec-top h3{margin:0 0 var(--s-sm); font-family:var(--display); font-size:38px;
    font-weight:700; line-height:1.25; letter-spacing:-.8px; word-break:keep-all}
  .qasec-top p{margin:0; font-size:17px; line-height:1.7; color:var(--body); word-break:keep-all}

  /* A drawing of both ends of the same moment. Deliberately not a live thing.

     The first version of this was two bare panels with empty boxes standing in
     for a text field and a button, which read as unfinished rather than as a
     phone. A thing has to look like the thing: the left side is a handset, down
     to the island and the home bar, and the right side is a screen with a room
     in front of it. Nothing here is an image file — it is all borders and
     gradients, so it costs no request and inverts with the light table. */
  /* Both figures are cut from one height, so the two captions start on the same
     line without being nudged there. Centring them, which is what this used to
     do, only hid the fact that the handset and the screen were different sizes
     and their captions sat on different lines. The screen's width is whatever
     the column leaves; its height is not negotiable. */
  .qasec-art{--art-h:372px; --dev-w:204px;
    display:grid; grid-template-columns:var(--dev-w) 1fr; gap:var(--s-xl);
    align-items:start; max-width:960px; margin-bottom:var(--s-xl)}
  .art-cell{margin:0; min-width:0}
  .art-cell figcaption{margin-top:var(--s-sm); font-family:var(--mono); font-size:11px;
    line-height:1.6; color:var(--muted); word-break:keep-all}

  /* --- the handset --- */
  .dev{position:relative; width:var(--dev-w); height:var(--art-h); border-radius:30px;
    background:var(--surface-elevated); border:1px solid var(--hairline-strong);
    padding:9px}
  .dev-scr{height:100%; border-radius:26px; background:var(--canvas); overflow:hidden;
    display:flex; flex-direction:column}
  .dev-island{position:absolute; top:17px; left:50%; transform:translateX(-50%);
    width:62px; height:17px; border-radius:var(--r-pill); background:var(--canvas)}
  .dev-home{position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
    width:82px; height:4px; border-radius:var(--r-pill); background:var(--hairline-strong)}
  .dev-status{display:flex; justify-content:space-between; align-items:center;
    padding:11px 16px 0; font-size:10px; font-weight:600; color:var(--body-strong)}
  .dev-ind{display:flex; align-items:center; gap:4px}
  .ic-sig{width:11px; height:8px; background:
    linear-gradient(to top, var(--muted) 3px, transparent 0) left/2px 100% no-repeat,
    linear-gradient(to top, var(--muted) 5px, transparent 0) 4.5px 0/2px 100% no-repeat,
    linear-gradient(to top, var(--muted-soft) 8px, transparent 0) right/2px 100% no-repeat}
  .ic-bat{width:15px; height:8px; border:1px solid var(--muted); border-radius:2px;
    position:relative}
  .ic-bat::before{content:""; position:absolute; inset:1.5px; background:var(--muted)}

  .dev-app{flex:1; padding:20px 16px 0; display:flex; flex-direction:column; gap:8px}
  .dv-deck{margin:0; font-size:10.5px; color:var(--muted); overflow:hidden;
    white-space:nowrap; text-overflow:ellipsis}
  .dv-now{display:flex; align-items:baseline; gap:6px; margin:0 0 2px}
  .dv-now span{font-size:11px; color:var(--body)}
  .dv-now b{font-family:var(--mono); font-size:23px; font-weight:700; letter-spacing:-1px;
    color:var(--primary)}
  .dv-now i{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--muted)}
  /* A field with something typed in it, and a caret. Empty, it said nothing at
     all about what the phone is for. */
  .dv-field{min-height:46px; padding:9px 10px; border-radius:var(--r-sm);
    background:var(--surface-soft); border:1px solid var(--hairline);
    font-size:11.5px; line-height:1.5; color:var(--body-strong); word-break:keep-all}
  .dv-field::after{content:""; display:inline-block; width:1px; height:11px;
    margin-left:2px; vertical-align:-1px; background:var(--primary)}
  .dv-send{height:30px; border-radius:var(--r-sm); background:var(--primary);
    color:var(--on-primary); font-size:11.5px; font-weight:700;
    display:flex; align-items:center; justify-content:center}
  .dv-h{margin:6px 0 0; font-family:var(--mono); font-size:9px; letter-spacing:1px;
    text-transform:uppercase; color:var(--muted-soft)}
  .dv-row{display:flex; align-items:baseline; gap:6px; padding:8px 0 0;
    border-top:1px solid var(--hairline); font-size:10.5px; color:var(--body)}
  .dv-row b{font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--primary);
    flex:0 0 auto}
  .dv-row span{flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap;
    text-overflow:ellipsis}
  .dv-row em{font-style:normal; font-family:var(--mono); font-size:9.5px;
    color:var(--muted); flex:0 0 auto}

  /* --- the screen, and the room in front of it --- */
  .room{position:relative}
  .room-scr{position:relative; height:var(--art-h); border-radius:var(--r-lg);
    background:var(--surface-card); border:1px solid var(--hairline);
    padding:var(--s-lg); overflow:hidden}
  /* Light off a projection surface. Not a drop shadow — the system has none —
     but the reason this reads as a lit screen in a dim room rather than as one
     more card on the page. */
  .room-scr::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(120% 90% at 50% 0%, rgba(250,255,105,.055), transparent 62%)}
  /* On the light table the screen is already the brightest thing on the page,
     so the wash has nothing to add and only tints it yellow. */
  html[data-theme="light"] .room-scr::after{background:none}
  .sl{display:flex; flex-direction:column; gap:9px; height:100%}
  .sl-e{width:64px; height:6px; border-radius:3px; background:var(--primary); opacity:.55}
  .sl-h{width:58%; height:15px; border-radius:4px; background:var(--hairline-strong)}
  .sl-l{width:78%; height:6px; border-radius:3px; background:var(--hairline)}
  .sl-l.s{width:52%}
  .sl-bars{margin-top:auto; display:flex; align-items:flex-end; gap:10px; height:56%}
  .sl-bars i{flex:1 1 0; border-radius:3px 3px 0 0; background:var(--hairline-strong)}
  .sl-bars i:nth-child(1){height:38%} .sl-bars i:nth-child(2){height:62%}
  .sl-bars i:nth-child(3){height:47%} .sl-bars i:nth-child(4){height:88%; background:var(--primary); opacity:.4}
  .sl-bars i:nth-child(5){height:54%} .sl-bars i:nth-child(6){height:71%}

  .scr-tag{position:absolute; top:var(--s-sm); right:var(--s-sm); display:flex;
    align-items:center; gap:6px; height:22px; padding:0 10px; border-radius:var(--r-pill);
    background:var(--canvas); border:1px solid var(--primary);
    font-family:var(--mono); font-size:10px; font-weight:700; color:var(--primary)}
  .scr-tag i{width:5px; height:5px; border-radius:50%; background:var(--primary)}
  /* The question sits on the slide, which is the whole idea — it is pinned to
     the page behind it, not floating beside the deck in another tool. */
  .scr-q{position:absolute; left:var(--s-lg); right:var(--s-lg); bottom:56px; z-index:2;
    border:1px solid var(--primary); border-radius:var(--r-md);
    padding:10px var(--s-sm); background:var(--canvas)}
  .scr-meta{display:block; font-family:var(--mono); font-size:10px; color:var(--muted);
    margin-bottom:4px}
  .scr-txt{font-size:15px; font-weight:600; color:var(--on-dark); word-break:keep-all}

  /* Backs of heads, cropped by the bottom edge of the frame.

     Inside the screen's box rather than under it. Under it they were seven grey
     blobs in a tidy row, and they also made the right-hand figure taller than
     the left, which is what pushed the two captions onto different lines. In
     here they are between us and what is lit, cropped by the frame — which is
     what a room looks like from the back of it — and they cost the figure no
     height at all.

     Filled with --hairline: it is the one token that sits on the far side of
     the floor colour in both themes — lighter than the canvas in the dark,
     darker than it on the light table — so the heads read the same way round
     either way up. --surface-soft looked right in the dark and turned them
     into white blobs on the light table. */
  .crowd{position:absolute; left:0; right:0; bottom:0; z-index:1;
    display:flex; align-items:flex-end; justify-content:center; gap:20px; height:38px}
  /* The floor the heads stand on. Without it the silhouettes sat directly on
     the bar chart and the two shapes read as one confused thing at the bottom
     of the frame; the slide has to fall away into the dark before the room
     starts. Painted before the heads, so it is behind them. */
  .crowd::before{content:""; position:absolute; left:0; right:0; bottom:0; height:96px;
    background:linear-gradient(to top, var(--canvas) 26%, transparent)}
  .crowd i{position:relative; width:54px; height:34px; border-radius:32px 32px 0 0;
    background:var(--hairline); flex:0 0 auto; transform-origin:50% 100%}
  .crowd i::before{content:""; position:absolute; left:50%; bottom:23px;
    transform:translateX(-50%); width:25px; height:25px; border-radius:50%;
    background:var(--hairline)}
  .crowd i:nth-child(2n){transform:scale(.84)}
  .crowd i:nth-child(3n){transform:scale(1.1)}
  .crowd i:nth-child(5){transform:scale(.92)}

  .qasec-steps{list-style:none; margin:0 0 var(--s-xl); padding:0;
    display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-xl);
    border-top:1px solid var(--hairline); padding-top:var(--s-lg)}
  .qasec-steps b{display:block; margin-bottom:var(--s-xs); font-size:17px; font-weight:700;
    letter-spacing:-.3px; word-break:keep-all}
  .qasec-steps span{font-size:14.5px; line-height:1.7; color:var(--body); word-break:keep-all}
  .qasec-why{margin:0 0 var(--s-md); max-width:70ch; font-size:15px; line-height:1.8;
    color:var(--muted); word-break:keep-all}
  .qasec-ask a{font-size:15px; font-weight:600; color:var(--primary);
    text-decoration:underline; text-underline-offset:4px}

  @media (max-width:900px){
    .qasec-top h3{font-size:26px}
    /* Stacked, and the handset centred at its own size rather than stretched —
       a phone the width of the column stops being a phone. */
    .qasec-art{grid-template-columns:1fr; gap:var(--s-xl); justify-items:center}
    .art-cell{width:100%; max-width:520px}
    .art-cell:first-child{max-width:204px}
    /* A 16/9 screen 345px wide is 194px tall, and the question card alone is
       most of that. Give it a squarer frame and thinner margins so the slide
       behind the card is still a slide. */
    /* Stacked, the two are no longer side by side, so nothing has to match a
       height — and a 372px screen 345px wide would be a portrait one. */
    .room-scr{height:auto; aspect-ratio:16/10; padding:var(--s-md)}
    .scr-q{left:var(--s-md); right:var(--s-md); bottom:44px; padding:8px 10px}
    .sl-bars{height:46%}
    .scr-txt{font-size:14px}
    .qasec-steps{grid-template-columns:1fr; gap:var(--s-lg)}
  }