/* Formwork editor mode: Focus. One question at a time on a calm graphite stage. */
.cv--focus .cv-main{overflow:hidden}
.fq{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;height:100%;background:var(--g0)}
.fq-stage{grid-column:1;grid-row:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:32px 40px 24px;overflow:auto;min-height:0;
  background-image:radial-gradient(rgba(236,236,240,.05) 1px,transparent 1px);background-size:24px 24px}
.fq-sheet.panel{grid-column:2;grid-row:1 / span 2;position:relative;top:auto;right:auto;bottom:auto;width:340px;margin:12px 12px 12px 0;align-self:stretch;display:none}
.fq-sheet.panel.is-open{display:flex}

/* the question card, in the form's own theme */
.fq-frame{width:100%;display:flex;justify-content:center}
.fq-card{--fw-line:color-mix(in oklab,var(--fw-ink) 14%,transparent);--fw-soft:color-mix(in oklab,var(--fw-ink) 5%,transparent);
  width:min(760px,100%);background:var(--fw-card);color:var(--fw-ink);font-family:var(--fw-font);border-radius:calc(var(--fw-radius) + 10px);padding:40px 52px 32px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 80px -30px rgba(0,0,0,.9),0 12px 28px -12px rgba(0,0,0,.6)}
.fq-card.is-in{animation:fqIn .34s var(--ease)}
.fq-card.is-in-back{animation:fqBack .34s var(--ease)}
@keyframes fqIn{from{opacity:0;transform:translateX(18px)}}
@keyframes fqBack{from{opacity:0;transform:translateX(-18px)}}
.fq-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.fq-num{display:inline-flex;align-items:center;gap:2px;font-size:15px;font-weight:600;color:var(--fw-accent)}
.fq-kick,.fq-kicker{font-size:14px;color:var(--fw-muted);font-family:var(--ui);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fq-kicker{margin:0 0 20px}
.fq-type{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 12px;border-radius:999px;border:1px solid var(--fw-line);background:var(--fw-bg);color:var(--fw-ink);font:500 13px/1 var(--ui);cursor:pointer;transition:transform .15s var(--ease),border-color .15s}
.fq-type:hover{transform:translateY(-1px);border-color:var(--fw-accent)}
.fq-type:active{transform:scale(.97)}
.fq-q{margin:0 0 8px;font-size:clamp(26px,2.5vw,36px);line-height:1.16;letter-spacing:-.024em;font-weight:600;text-wrap:balance}
.fq-req{color:var(--fw-accent);margin-left:6px}
.fq-desc{margin:0 0 28px;font-size:17px;line-height:1.5;color:var(--fw-muted)}
.fq-ce{outline:none;border-radius:6px;transition:box-shadow .15s,background .15s;min-width:2ch;display:inline-block;max-width:100%;cursor:text;white-space:pre-wrap;word-break:break-word}
.fq-q .fq-ce{display:inline}
.fq-ce:hover{background:var(--fw-soft)}
.fq-ce:focus{background:transparent;box-shadow:0 0 0 2px color-mix(in oklab,var(--fw-accent) 45%,transparent)}
.fq-ce:empty::before{content:attr(data-ph);color:color-mix(in oklab,var(--fw-muted) 70%,transparent);pointer-events:none}
.fq-chip{font-family:var(--ui);font-size:.62em;vertical-align:.12em;background:color-mix(in oklab,var(--fw-accent) 16%,transparent);color:var(--fw-accent);padding:1px 7px;border-radius:6px;cursor:default;user-select:all}
.fq-ans{margin-bottom:28px}
.fq-line{display:flex;align-items:center;gap:12px;border-bottom:1.5px solid var(--fw-line);padding:10px 2px;font-size:20px;color:var(--fw-muted)}
.fq-line .fq-ce{flex:1}
.fq-line .i{color:color-mix(in oklab,var(--fw-muted) 60%,transparent)}
.fq-static span{flex:1}
.fq-area{border:1.5px solid var(--fw-line);border-radius:var(--fw-radius);padding:14px 16px;min-height:112px;font-size:18px;color:var(--fw-muted)}
.fq-area .fq-ce{display:block}
.fq-drop{display:flex;align-items:center;gap:12px;border:1.5px dashed var(--fw-line);border-radius:var(--fw-radius);padding:22px;color:var(--fw-muted);font-size:16px}
.fq-opts{display:grid;gap:8px;max-width:520px}
.fq-opts--row{grid-template-columns:1fr 1fr;max-width:360px}
.fq-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--fw-line);border-radius:var(--fw-radius);background:var(--fw-bg);font-size:17px;color:var(--fw-ink);font-family:inherit;text-align:left}
.fq-opt--edit{position:relative;transition:border-color .15s}
.fq-opt--edit:focus-within{border-color:var(--fw-accent)}
.fq-opt--edit .fq-ce{flex:1}
.fq-odel{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:6px;background:none;color:var(--fw-muted);cursor:pointer;opacity:0;transition:opacity .15s,background .15s}
.fq-opt--edit:hover .fq-odel,.fq-opt--edit:focus-within .fq-odel{opacity:1}
.fq-odel:hover{background:var(--fw-soft);color:var(--fw-ink)}
.fq-opt--add{border-style:dashed;color:var(--fw-muted);cursor:pointer;transition:border-color .15s,color .15s,transform .15s var(--ease)}
.fq-opt--add:hover{border-color:var(--fw-accent);color:var(--fw-ink);transform:translateY(-1px)}
.fq-key{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:6px;border:1px solid var(--fw-line);background:var(--fw-card);font:600 12px/1 var(--ui);color:var(--fw-muted)}
.fq-stars{display:flex;gap:6px;color:color-mix(in oklab,var(--fw-ink) 22%,transparent)}
.fq-nps{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
.fq-npsb{display:grid;place-items:center;height:46px;border:1px solid var(--fw-line);border-radius:calc(var(--fw-radius) - 4px);background:var(--fw-bg);font-size:15px;font-weight:500}
.fq-npsl{display:flex;justify-content:space-between;gap:16px;margin-top:10px}
.fq-small{font-size:14px;color:var(--fw-muted)}
.fq-r{text-align:right}
.fq-note{display:flex;align-items:center;gap:6px;margin:0 0 12px;font-size:14px;color:var(--fw-muted);font-family:var(--ui)}
.fq-empty{font-size:22px;letter-spacing:-.015em;margin:0 0 24px;color:var(--fw-muted)}
.fq-foot{display:flex;align-items:center;gap:8px;padding-top:20px;border-top:1px solid var(--fw-line);font-family:var(--ui)}
.fq-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--fw-line);background:transparent;color:var(--fw-muted);font:500 13px/1 var(--ui);cursor:pointer;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:transform .15s var(--ease),border-color .15s,color .15s}
.fq-pill:hover{transform:translateY(-1px);color:var(--fw-ink)}
.fq-pill:active{transform:scale(.97)}
.fq-pill.is-on{color:var(--fw-accent);border-color:color-mix(in oklab,var(--fw-accent) 45%,transparent)}
.fq-pill.is-cond{color:var(--fw-ink);background:var(--fw-soft)}
.fq-ok{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;background:var(--fw-accent);color:#fff;font-size:15px;font-weight:500;opacity:.92;flex:none}
.fq-card--end{text-align:center;padding:56px 52px}
.fq-card--end .fq-kicker{text-align:left}
.fq-endmark{width:56px;height:56px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;background:var(--fw-accent);color:#fff}
.fq-card--end .fq-desc{margin:8px auto 0;max-width:46ch}
.fq-nav{display:flex;align-items:center;gap:12px;color:var(--ink3);font-size:13px}
.fq-nav .ib{border:1px solid var(--line2);border-radius:999px}

/* filmstrip */
.fq-strip{grid-column:1;grid-row:2;min-width:0;overflow-x:auto;overflow-y:hidden;background:var(--g1);border-top:1px solid var(--line);scrollbar-width:thin;scrollbar-color:var(--g4) transparent}
.fq-strip-in{display:flex;align-items:flex-start;gap:20px;padding:12px 16px 14px;width:max-content}
.fq-grp{display:flex;flex-direction:column;gap:8px;padding-left:20px;border-left:1px solid var(--line)}
.fq-grp:first-child{padding-left:0;border-left:0}
.fq-grp.is-drop-g .fq-row{box-shadow:0 0 0 1px var(--acc) inset;border-radius:10px}
.fq-gh{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px 0 4px;border:0;border-radius:6px;background:none;color:var(--ink3);font-size:13px;cursor:pointer;white-space:nowrap;align-self:flex-start;transition:background .15s,color .15s}
.fq-gh b{font-weight:500;color:var(--ink2)}
.fq-gh em{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--acc)}
.fq-gh:hover,.fq-gh.is-on{background:var(--g3);color:var(--ink)}
.fq-gh:hover b,.fq-gh.is-on b{color:var(--ink)}
.fq-gh--static{cursor:default}.fq-gh--static:hover{background:none;color:var(--ink3)}
.fq-row{display:flex;align-items:center;gap:6px}
.fq-thumb{position:relative;display:flex;flex-direction:column;gap:6px;width:158px;height:80px;padding:9px 10px;border-radius:10px;background:var(--g2);border:1px solid var(--line2);cursor:pointer;user-select:none;transition:transform .18s var(--ease),border-color .15s,background .15s,box-shadow .15s}
.fq-thumb:hover{transform:translateY(-2px);border-color:var(--line3);background:var(--g3)}
.fq-thumb:active{transform:scale(.98)}
.fq-thumb.is-on{border-color:var(--acc);background:color-mix(in oklab,var(--acc) 10%,var(--g2));box-shadow:0 0 0 3px rgba(90,185,252,.16)}
.fq-thumb.is-ghost{opacity:.35}
.fq-thumb.is-drop-l{box-shadow:-4px 0 0 -1px var(--acc)}
.fq-thumb.is-drop-r{box-shadow:4px 0 0 -1px var(--acc)}
.fq-th-h{display:flex;align-items:center;gap:6px;color:var(--ink3);font-size:12px}
.fq-th-h .mono{color:var(--ink2)}
.fq-thumb.is-on .fq-th-h .i{color:var(--acc)}
.fq-th-c{display:inline-flex;color:var(--acc)}
.fq-th-r{margin-left:auto;font-style:normal;color:var(--acc);font-weight:600}
.fq-th-l{font-size:13px;line-height:1.3;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fq-th-l em{font-style:normal;color:var(--ink3)}
.fq-thumb--empty{border-style:dashed;justify-content:center;background:transparent}
.fq-thumb--empty .fq-th-l{color:var(--ink3)}
.fq-thumb--end{background:rgba(63,207,142,.06);border-color:rgba(63,207,142,.25)}
.fq-thumb--end .fq-th-h{color:var(--ok)}
.fq-thumb--end.is-on{border-color:var(--ok);box-shadow:0 0 0 3px rgba(63,207,142,.16)}
.fq-ins{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:999px;border:1px dashed var(--line3);background:transparent;color:var(--ink3);cursor:pointer;opacity:.55;transition:opacity .15s,transform .15s var(--spring),color .15s,border-color .15s}
.fq-row:hover .fq-ins{opacity:1}
.fq-ins:hover{transform:scale(1.15);color:var(--acc);border-color:var(--acc);opacity:1}
.fq-ins--end{opacity:.9}
.fq-strip.is-dragging .fq-ins{opacity:.2}
.fq-addpage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:96px;height:80px;border-radius:10px;border:1px dashed var(--line3);background:transparent;color:var(--ink3);font-size:13px;cursor:pointer;transition:transform .18s var(--ease),color .15s,border-color .15s}
.fq-addpage:hover{transform:translateY(-2px);color:var(--acc);border-color:var(--acc)}
.fq-gh--ghost{color:var(--ink3)}

/* sheet extras */
.fq-sheet .ps h3{margin-bottom:10px}
.fq-pipes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.fq-pipe{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line2);background:var(--g0);color:var(--ink2);font-size:13px;cursor:pointer;transition:transform .15s var(--ease),border-color .15s,color .15s}
.fq-pipe span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fq-pipe:hover{transform:translateY(-1px);border-color:var(--acc);color:var(--ink)}
.fq-pipe:active{transform:scale(.97)}

/* sub-bar tools */
.fq-count{color:var(--ink2);font-size:13px;white-space:nowrap}
.fq-sep{width:1px;height:18px;background:var(--line2);flex:none}
.fq-hint{display:inline-flex;align-items:center;gap:5px;color:var(--ink3);white-space:nowrap}
.fq-hint .i{color:var(--acc)}
.fq-sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink2);white-space:nowrap;font-size:13px}
.fq-sw:hover{color:var(--ink)}
.fq-sw input{position:absolute;opacity:0;pointer-events:none}
.fq-sw i{position:relative;flex:none;width:32px;height:18px;border-radius:999px;background:rgba(236,236,240,.2);transition:background .2s}
.fq-sw i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .25s var(--spring)}
.fq-sw input:checked+i{background:var(--acc)}
.fq-sw input:checked+i::after{transform:translateX(14px)}
.fq-sw input:checked~span{color:var(--ink)}
.fq-sw input:focus-visible+i{outline:2px solid var(--acc);outline-offset:2px}
#modeTools .ib.is-on{background:var(--g3);color:var(--acc)}

@media (max-width:1180px){.fq-hint{display:none}}
@media (max-width:1180px){.fq-sheet.panel{width:300px}.fq-card{padding:32px 36px 28px}.fq-stage{padding:24px 24px 20px}}
@media (max-width:900px){
  .fq-sheet.panel{position:absolute;right:12px;top:12px;bottom:12px;margin:0;z-index:8;box-shadow:0 30px 70px -20px rgba(0,0,0,.85)}
}
@media (max-width:640px){
  .fq-stage{padding:16px 12px;justify-content:flex-start}
  .fq-card{padding:24px 20px 20px;border-radius:calc(var(--fw-radius) + 4px)}
  .fq-head{flex-wrap:wrap}
  .fq-kick{order:3;flex-basis:100%}
  .fq-q{font-size:24px}
  .fq-nps{grid-template-columns:repeat(6,1fr)}
  .fq-opts--row{grid-template-columns:1fr 1fr}
  .fq-sheet.panel{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;height:min(72vh,620px);z-index:30}
  .fq-thumb{width:132px;height:76px}
  .fq-strip-in{padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){.fq-card.is-in,.fq-card.is-in-back{animation:none}.fq *{transition:none!important}}
.fq-mob,.fq-mprops{display:none!important}
@media (max-width:640px){.fq-mob{display:block!important}.fq-mprops{display:inline-grid!important}}