/* Sketchbook Quizzy panel — design test for the extension, shown in the landing demo.
   Same markup and qc-* hooks as the real panel (panel.css), so it can be ported later. */
@font-face{font-family:'Josefin Sans';src:url('/assets/JosefinSans.ttf') format('truetype');font-weight:100 700;font-display:swap}
@font-face{font-family:'Amatic SC';src:url('/assets/amatic-sc-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Playfair Display';src:url('/assets/playfair-display-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/assets/playfair-display-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

#quiz-corrector-panel{
  --ink:#1d2939;--muted:#52636d;--paper:#f4f8f9;--sky:#d3e6eb;--chalk:#e3ebc8;--chalk-hi:#edf2d8;--ease:cubic-bezier(.22,1,.36,1);
  position:relative;width:374px;max-width:calc(100vw - 16px);padding:16px 20px 14px;color:var(--ink);font-family:'Josefin Sans',sans-serif;
  background:var(--paper);border:1.5px solid var(--ink);border-radius:30px;box-shadow:3px 5px 0 var(--ink)
}
#quiz-corrector-panel *{box-sizing:border-box}
:where(#quiz-corrector-panel) button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:where(#quiz-corrector-panel) button:focus-visible{outline:3px solid #68d9c1;outline-offset:3px}

/* Header: logo, handwritten wordmark, help toggle. */
.qc-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
#qc-logo{display:grid;place-items:center;width:50px;height:50px;padding:0;border:0;background:none;transition:transform .45s var(--ease)}
#qc-logo:hover{transform:rotate(-6deg) scale(1.05)}
#qc-logo-image{width:46px;height:50px;object-fit:contain}
.qc-wordmark{display:flex;flex-direction:column;line-height:1;flex:1;min-width:0}
.qc-wordmark span{font-family:'Amatic SC',sans-serif;font-weight:700;font-size:46px;letter-spacing:.02em;text-transform:uppercase}
.qc-wordmark small{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;color:var(--muted);margin-top:-2px}
#qc-settings-toggle{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1.5px solid var(--ink);border-radius:50%;background:var(--sky);box-shadow:1px 2px 0 var(--ink);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
#qc-settings-toggle:hover{transform:translateY(-1px);box-shadow:1px 3px 0 var(--ink)}
#qc-settings-toggle svg{width:18px;height:14px;fill:var(--chalk);stroke:var(--ink);stroke-width:4;stroke-linejoin:round}

/* Log: a little note card. */
#qc-log{min-height:62px;display:grid;place-items:center;padding:12px 16px 10px;margin-bottom:14px;text-align:center;font-size:16px;line-height:1.4;background:var(--sky);border:1.5px solid var(--ink);border-radius:18px}
.qc-running #qc-log{font-family:'Playfair Display',Georgia,serif;font-size:21px}

/* Actions. Off: one blue Start pill. Hints on: mint "On" and Auto share the row
   equally. Auto on: Auto takes the row and "On" tucks into a small pill.
   Widths animate through flex-grow; labels cross-fade in a single grid cell. */
.qc-actions{display:flex;gap:0;transition:gap .5s var(--ease)}
.qc-running .qc-actions{gap:10px}
#qc-capture,#qc-auto{position:relative;display:grid;place-items:center;min-width:0;min-height:54px;padding:0 10px;overflow:hidden;border:1.5px solid var(--ink);border-radius:999px;font-family:'Playfair Display',Georgia,serif;font-size:28px;line-height:1;white-space:nowrap;box-shadow:2px 3px 0 var(--ink);transition:flex-grow .6s var(--ease),flex-basis .6s var(--ease),background-color .4s ease,color .4s ease,font-size .5s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease),opacity .35s ease,border-width .3s ease,padding .5s var(--ease)}
#qc-capture>span,#qc-auto>.qc-auto-label{grid-area:1/1}
#qc-capture:hover,#qc-auto:hover{transform:translateY(-2px);box-shadow:2px 5px 0 var(--ink)}
#qc-capture:active,#qc-auto:active{transform:translateY(1px);box-shadow:none}

#qc-capture{flex:1 1 0;background:var(--sky)}
#qc-capture>span{transition:opacity .3s ease,transform .45s var(--ease)}
#qc-capture>[aria-hidden=true]{opacity:0;transform:translateY(10px) scale(.9)}
.qc-running #qc-capture{background:var(--chalk)}
/* Auto on: "On" folds into a 54px circle (same as the row height). */
.qc-popsauce-auto #qc-capture{flex:0 0 54px;font-size:17px;padding:0}

#qc-auto{flex:0 1 0;padding:0;opacity:0;border-width:0;box-shadow:none;background:transparent}
.qc-running #qc-auto{flex-grow:1;padding:0 10px;opacity:1;border-width:1.5px;box-shadow:2px 3px 0 var(--ink)}
.qc-popsauce-auto #qc-auto{flex-grow:1}
/* Hold-to-enable fill: a pill that grows from the left edge, concentric with the
   button's own rounding (the clip uses the same radius), and drains back on release. */
.qc-fill{position:absolute;inset:0;background:var(--chalk);clip-path:inset(0 100% 0 0 round 999px);transition:clip-path .35s var(--ease),opacity .4s ease;pointer-events:none}
#qc-auto.holding .qc-fill{clip-path:inset(0 0 0 0 round 999px);transition:clip-path .5s cubic-bezier(.45,.05,.55,.95)}
.qc-auto-label{position:relative;transition:transform .5s var(--ease)}
#qc-auto.holding .qc-auto-label{transform:scale(1.06)}
#qc-auto.on{background:var(--ink);color:var(--chalk)}
#qc-auto.on .qc-fill{opacity:0;clip-path:inset(0 0 0 0 round 999px)}
#qc-auto.pop{animation:qc-pop .5s var(--ease)}
@keyframes qc-pop{0%{transform:scale(1)}35%{transform:scale(1.05)}100%{transform:scale(1)}}
#qc-full-auto[hidden]{display:none}

/* Settings drawer: slides open under the header; the toggle arrow flips. */
#qc-settings-toggle svg{transition:transform .5s var(--ease)}
.qc-settings-expanded #qc-settings-toggle svg{transform:rotate(180deg)}
#qc-settings{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--ease),opacity .35s ease,margin .5s var(--ease)}
.qc-settings-expanded #qc-settings{grid-template-rows:1fr;opacity:1;margin-bottom:14px}
.qc-settings-inner{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:0 2px}
.qc-settings-expanded .qc-settings-inner{padding:2px 2px 4px}
#qc-settings label{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-top:4px}
#qc-realism-value{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;color:var(--muted)}
#qc-model{appearance:none;width:100%;padding:11px 40px 9px 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d2939' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center/12px no-repeat;border:1.5px solid var(--ink);border-radius:14px;cursor:pointer}
#qc-realism{--fill:100%;appearance:none;width:100%;height:12px;margin:6px 0 0;border:1.5px solid var(--ink);border-radius:999px;background:linear-gradient(90deg,var(--chalk) var(--fill),#fff var(--fill));cursor:pointer}
#qc-realism::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border-radius:50%;background:var(--sky);border:1.5px solid var(--ink);box-shadow:1px 2px 0 var(--ink)}
#qc-realism::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--sky);border:1.5px solid var(--ink);box-shadow:1px 2px 0 var(--ink)}
.qc-realism-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.qc-account-actions{display:flex;margin-top:6px}
#qc-connect{flex:1;display:grid;place-items:center;min-height:42px;font-family:'Playfair Display',Georgia,serif;font-size:18px;color:var(--ink);text-decoration:none;background:transparent;border:1.5px solid var(--ink);border-radius:999px;box-shadow:2px 3px 0 var(--ink);transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-color .3s ease}
#qc-connect:hover{background:#fff;transform:translateY(-2px);box-shadow:2px 5px 0 var(--ink)}
#qc-model:focus-visible,#qc-realism:focus-visible,#qc-connect:focus-visible{outline:3px solid #68d9c1;outline-offset:3px}

#qc-token-stats{margin-top:12px;text-align:center;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:13px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){#quiz-corrector-panel *{transition:none!important}}