/* tso2's own (4 Oct 2026): the slide's questions (the Ask pill in the footer and its panel) and Knock on the
   door (the two actions at the end of Two ways in and their panel). After flow.css: the type floors and story
   mode's sizes of these pieces live here too. */

/* ---------------------------------------------------------------- the Ask pill, beside the Comment pill
   (canvas pixels, the Comment pill's look; a small count when the slide has questions) */
.askfoot{display:inline-flex;align-items:center;gap:6px;height:24px;margin:-6px auto -6px -14px;padding:0 10px 0 8px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.7);color:var(--blue);font:600 12px/1 "Fira Sans",Arial,sans-serif;letter-spacing:.2px;text-transform:none;white-space:nowrap;cursor:pointer;
  opacity:.8;touch-action:manipulation;transition:opacity .2s,background-color .2s,border-color .2s,box-shadow .2s}
.askfoot svg.i{width:15px;height:15px}
.askfoot .qn{min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--cyan-deep);color:#fff;font:700 10px/16px "Fira Sans",Arial,sans-serif;text-align:center;letter-spacing:0}
.askfoot:hover,.askfoot:focus-visible{opacity:1;background:#fff;border-color:var(--blue);box-shadow:0 4px 12px rgba(0,30,70,.14)}
.askfoot:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.foot:has(>.askfoot)>.fbfoot{margin-right:0}
.foot:has(.fbpres:not([hidden]))>.askfoot{margin-right:0}
.blue .askfoot,.photo .askfoot,.tone-dark .askfoot{color:#fff;background:rgba(8,24,46,.28);border-color:rgba(255,255,255,.4)}
.blue .askfoot:hover,.blue .askfoot:focus-visible,.photo .askfoot:hover,.photo .askfoot:focus-visible,.tone-dark .askfoot:hover,.tone-dark .askfoot:focus-visible{
  background:rgba(8,24,46,.5);border-color:#fff;box-shadow:0 4px 14px rgba(0,10,30,.3)}
.blue .askfoot .qn,.photo .askfoot .qn,.tone-dark .askfoot .qn{background:#fff;color:var(--blue)}
.tone-light .askfoot{color:var(--blue);background:rgba(255,255,255,.7);border-color:var(--line)}
.thumb .askfoot,.present[data-live=screen] .frame .askfoot{display:none!important}
.stagewrap>.frame>.deck .askfoot{font-size:max(12px,calc(11px / var(--zf)))}
.story .askfoot{position:relative;height:36px;min-height:36px;padding:0 12px 0 10px;margin:-8px auto -8px -14px;border-radius:18px;font-size:13px}
.story .askfoot::after{content:"";position:absolute;inset:-4px}
/* a narrow phone: the Ask pill shows its icon and count, so the footer's label keeps its room */
@media (max-width:420px){.story .askfoot .lbl{display:none}.story .askfoot{padding:0 10px}}

/* ---------------------------------------------------------------- the questions panel
   A popover over the footer at the left on the stage (the slide stays readable around it), a sheet from the
   bottom on a phone and in story mode. */
.sqwrap{position:fixed;inset:0;z-index:190;pointer-events:none;font-family:"Fira Sans",Arial,sans-serif}
.sqback{position:absolute;inset:0;pointer-events:auto;background:transparent}
.sqcard{position:absolute;left:24px;bottom:72px;width:min(420px,calc(100vw - 32px));max-height:min(72vh,660px);display:flex;flex-direction:column;
  background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 2px 6px rgba(0,20,50,.1),0 24px 60px rgba(0,20,50,.3);pointer-events:auto;overflow:hidden;
  animation:sqin .32s var(--ease)}
@keyframes sqin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.sqgrip{display:none}
.sqhead{flex:none;display:flex;align-items:flex-start;gap:10px;padding:18px 18px 12px 20px;border-bottom:1px solid var(--line)}
.sqtitles{min-width:0;flex:1 1 auto}
.sqtitles::before{content:"";display:block;width:28px;height:4px;background:var(--cyan);margin-bottom:10px}
.sqcard h2{margin:0;font-size:17px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;color:var(--blue);line-height:1.1}
.sqwhere{margin:5px 0 0;font-size:12.5px;color:var(--grey);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sqsort{flex:none;display:inline-flex;margin-top:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sqsort button{height:26px;padding:0 10px;border:0;background:#fff;color:var(--grey);font:600 12px/1 "Fira Sans",Arial,sans-serif;cursor:pointer}
.sqsort button[aria-pressed=true]{background:var(--blue);color:#fff}
.sqsort button:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
.sqx{flex:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--grey);cursor:pointer;margin:-4px -6px 0 0}
.sqx:hover{background:var(--pale);color:var(--ink)}
.sqx svg.i{width:20px;height:20px}
.sqlist{list-style:none;margin:0;padding:4px 12px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0}
.sqi{display:flex;gap:12px;align-items:flex-start;padding:12px 6px;border-bottom:1px solid var(--line)}
.sqi:last-child{border-bottom:0}
.squp{flex:none;width:42px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--blue);font:700 13px/1 "Fira Sans",Arial,sans-serif;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.squp svg.i{width:16px;height:16px}
.squp:hover:not(:disabled){border-color:var(--cyan)}
.squp[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.squp:disabled{cursor:default;color:var(--grey);background:var(--pale);border-color:transparent}
.squp:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.sqb{min-width:0;flex:1 1 auto}
.sqt{margin:0 0 4px;font-size:15px;line-height:1.42;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}
.sqm{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--grey)}
.sqdone{display:inline-flex;align-items:center;gap:3px;color:var(--green);font-weight:600;margin-left:4px}
.sqdone svg.i{width:13px;height:13px;stroke-width:2.6}
.sqa{margin:8px 0 0;padding:8px 10px 9px 12px;border-left:3px solid var(--cyan);background:var(--pale);border-radius:0 8px 8px 0}
.sqal{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--cyan-deep);margin-bottom:2px}
.sqa p{margin:0;font-size:14px;line-height:1.42;white-space:pre-line;overflow-wrap:anywhere}
.sqi.done .sqt{color:#3c4652}
.sqempty{margin:0;padding:18px 20px;font-size:14px;color:var(--grey)}
.sqform{flex:none;padding:12px 16px 14px;border-top:1px solid var(--line);background:#fff}
.sqform textarea,.sqans textarea{display:block;width:100%;box-sizing:border-box;resize:none;min-height:48px;max-height:30vh;padding:9px 12px;border-radius:10px;border:1.5px solid transparent;
  background:var(--pale);color:var(--ink);font:400 15px/1.42 "Fira Sans",Arial,sans-serif;transition:border-color .15s,box-shadow .15s,background-color .15s}
.sqform textarea::placeholder,.sqans textarea::placeholder{color:#8a96a3;opacity:1}
.sqform textarea:focus,.sqans textarea:focus{outline:none;background:#fff;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,166,226,.16)}
.sqrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.sqnote{font-size:12px;color:var(--grey)}
.sqsend{flex:none;height:36px;min-width:84px;padding:0 18px;border:0;border-radius:18px;background:var(--blue);color:#fff;font:700 12px/1 "Fira Sans",Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;cursor:pointer}
.sqsend:hover{background:#00366e}
.sqsend:focus-visible,.sqlink:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.sqerr{margin:8px 0 0;color:var(--red);font-size:13px}
.sqtools{margin:6px 0 0;display:flex;gap:14px}
.sqlink{border:0;background:none;padding:2px 0;color:var(--cyan-deep);font:600 12.5px/1.2 "Fira Sans",Arial,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.sqans{margin:8px 0 0}
@media (max-width:700px),(orientation:portrait) and (max-width:900px){
  .sqback{background:rgba(4,14,28,.38)}
  .sqcard{left:0;right:0;bottom:0;width:auto;max-height:82vh;border-radius:18px 18px 0 0;animation-name:squp}
  .sqgrip{display:block;flex:none;width:40px;height:4px;border-radius:2px;background:var(--line);margin:10px auto 0}
  .sqhead{padding-top:12px}
  .sqform{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .squp{width:46px;min-height:48px}
  .sqsort button{height:32px;padding:0 12px}
}
@keyframes squp{from{transform:translateY(100%)}to{transform:none}}
@media (pointer:coarse){.sqform textarea,.sqans textarea{font-size:16px}}
@media (prefers-reduced-motion:reduce){.sqcard,.kcard{animation:none}.askfoot,.squp,.kbtn{transition:none}}

/* ---------------------------------------------------------------- Knock on the door: the two actions
   (canvas pixels on the stage) after the slide's content */
.knock{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;align-self:flex-start;width:max-content;max-width:100%;margin-top:18px;padding:10px 12px 10px 16px;
  border:1px solid var(--line);border-radius:28px;background:var(--pale);font-family:"Fira Sans",Arial,sans-serif}
.knock .kk{display:inline-flex;align-items:center;gap:8px;margin-right:4px;font:700 12px/1 "Fira Sans",Arial,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.knock .kk svg.i{width:18px;height:18px;color:var(--cyan-deep)}
.kbtn{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px 0 12px;border:1.5px solid var(--blue);border-radius:19px;background:#fff;color:var(--blue);
  font:600 14px/1.15 "Fira Sans",Arial,sans-serif;text-align:left;cursor:pointer;touch-action:manipulation;transition:background-color .18s,color .18s,transform .18s var(--ease),box-shadow .18s}
.kbtn svg.i{flex:none;width:18px;height:18px}
.kbtn:hover,.kbtn:focus-visible{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(0,67,136,.22)}
.kbtn:active{transform:scale(.97)}
.kbtn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.stagewrap>.frame>.deck .knock .kk{font-size:max(12px,calc(10.5px / var(--zf)))}
.stagewrap>.frame>.deck .kbtn{font-size:max(14px,calc(10.5px / var(--zf)))}
.story .knock{width:auto;border-radius:16px;padding:14px;flex-direction:column;align-items:stretch;gap:10px}
.story .kbtn{min-height:48px;border-radius:24px;padding:8px 16px 8px 14px;font-size:15px}

/* the panel: the Comment panel's card (centered on the stage, a sheet on a phone) */
.kwrap{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;font-family:"Fira Sans",Arial,sans-serif}
.kback{position:absolute;inset:0;background:rgba(4,14,28,.42);-webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1);animation:kfade .3s var(--ease)}
@keyframes kfade{from{opacity:0}to{opacity:1}}
.kcard{position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;max-height:100%;overflow:auto;overscroll-behavior:contain;background:#fff;color:var(--ink);border-radius:16px;
  box-shadow:0 2px 6px rgba(0,20,50,.08),0 28px 70px rgba(0,20,50,.32);padding:24px 28px 22px;animation:kin .42s var(--ease)}
@keyframes kin{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.kgrip{display:none}
.khead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.khead .kk{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;font:700 11.5px/1 "Fira Sans",Arial,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:var(--cyan-deep)}
.khead .kk svg.i{width:17px;height:17px}
.kcard h2{margin:0;font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;color:var(--blue);line-height:1.12}
.kx{flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--grey);cursor:pointer;margin:-6px -10px 0 0}
.kx:hover{background:var(--pale);color:var(--ink)}
.kx svg.i{width:20px;height:20px}
.klead{margin:0 0 16px;font-size:16px;line-height:1.45;color:#2b3440}
.ksteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:none}
.ksteps li{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.45}
.kn{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--blue);color:var(--blue);font:800 14px/24px "Fira Sans",Arial,sans-serif;text-align:center}
.knote{margin:18px 0 0;padding:10px 14px;border-radius:10px;background:var(--pale);font-size:14px;line-height:1.45;color:#2b3440}
.kform{display:flex;flex-direction:column;gap:14px}
.krow2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kf{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0;border:0}
.kl{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35;padding:0}
.kcard select,.kcard input[type=text],.kcard textarea{width:100%;box-sizing:border-box;font:400 15px/1.45 "Fira Sans",Arial,sans-serif;color:var(--ink);background:var(--pale);
  border:1.5px solid transparent;border-radius:10px;padding:10px 13px;transition:border-color .15s,box-shadow .15s,background-color .15s}
.kcard select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004388' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px}
.kcard textarea{resize:vertical;min-height:84px;max-height:34vh}
.kcard input::placeholder,.kcard textarea::placeholder{color:#8a96a3;opacity:1}
.kcard select:hover,.kcard input[type=text]:hover,.kcard textarea:hover{border-color:var(--line)}
.kcard select:focus,.kcard input[type=text]:focus,.kcard textarea:focus{outline:none;background-color:#fff;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,166,226,.16)}
.kopts{display:flex;flex-wrap:wrap;gap:8px}
.kopt{position:relative;display:inline-flex}
.kopt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.kopt span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1.5px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);font:600 14px/1 "Fira Sans",Arial,sans-serif;cursor:pointer;
  transition:background-color .18s,border-color .18s,color .18s}
.kopt span:hover{border-color:var(--cyan)}
.kopt input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.kopt input:focus-visible+span{outline:3px solid var(--cyan);outline-offset:2px}
.kcontact{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:14px}
.kcontact .kl{font-weight:600}
.kwho{color:#2b3440;overflow-wrap:anywhere}
.kerr{margin:0;color:var(--red);font-size:14px}
.kact{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:18px}
.kform .kact{margin-top:4px}
.ksend{height:44px;min-width:128px;padding:0 26px;border:0;border-radius:22px;background:var(--blue);color:#fff;font:700 13px/1 "Fira Sans",Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;cursor:pointer;
  box-shadow:0 6px 16px rgba(0,67,136,.25);transition:background-color .18s,transform .18s var(--ease),box-shadow .18s}
.ksend:hover{background:#00366e;transform:translateY(-1px)}
.ksend:disabled{opacity:.6;cursor:progress;transform:none}
.ksend:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.kdone{text-align:center;padding:10px 4px 2px}
.kdone p{margin:10px 0 0;font-size:16px;line-height:1.45}
.kdone .ksub{font-size:14px;color:var(--grey)}
.kdone .kact{justify-content:center}
.ktick{width:64px;height:64px;fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ktick circle{stroke-dasharray:132;stroke-dashoffset:132;animation:fbdraw .55s var(--ease) forwards}
.ktick path{stroke-dasharray:40;stroke-dashoffset:40;stroke-width:3.5;animation:fbdraw .4s var(--ease) .3s forwards}
@media (max-width:600px){
  .kwrap{align-items:flex-end;padding:0}
  .kcard{max-width:none;max-height:92vh;border-radius:18px 18px 0 0;padding:10px 18px calc(16px + env(safe-area-inset-bottom));animation-name:squp}
  .kgrip{display:block;flex:none;width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px}
  .kcard h2{font-size:19px}
  .krow2{grid-template-columns:1fr}
  .kopt span{height:40px}
  .ksend{width:100%;height:48px;border-radius:24px}
}
@media (pointer:coarse){.kcard select,.kcard input[type=text],.kcard textarea{font-size:16px}}
@media (prefers-reduced-motion:reduce){.kback{animation:none}.ktick circle,.ktick path{animation:none;stroke-dashoffset:0}}