/* Amit Quiz - one question per screen.
   Colours come from the theme tokens, so light and dark follow the site. */

.amq{
  --amq-ok:#087d49;
  --amq-no:#e5342f;
  font-family:var(--sans,system-ui,sans-serif);
  color:var(--text,#101826);
  max-width:820px;
  margin:0 auto;
  padding:8px 0 48px;
}
html[data-theme="dark"] .amq{--amq-ok:#3ee98a;--amq-no:#ff5252}

.amq *{box-sizing:border-box}
.amq .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.amq-screen{animation:amq-in .28s ease both;scroll-margin-top:84px}
.amq-sub-lead{margin-top:0}
/* Once a run starts the quiz takes over the fold, so nothing above it competes. */
.amq.is-running [data-screen="run"]{min-height:calc(100svh - 120px);display:flex;flex-direction:column}
.amq.is-running .amq-card{flex:1;display:flex;flex-direction:column;justify-content:center}
@keyframes amq-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- start ---------- */
.amq-kicker{
  font-family:var(--mono,monospace);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim,#8494ab);margin:0 0 10px;
}
.amq-h{font-size:clamp(28px,4.4vw,44px);line-height:1.1;margin:0 0 12px;letter-spacing:-.02em}
.amq-sub{color:var(--muted,#51617a);font-size:17px;line-height:1.55;margin:0 0 28px;max-width:60ch}

.amq-field{margin:0 0 22px}
.amq-label{
  display:block;font-family:var(--mono,monospace);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim,#8494ab);margin:0 0 10px;
}
.amq-chips{display:flex;flex-wrap:wrap;gap:8px}
.amq-chip{
  font:inherit;font-size:14px;cursor:pointer;
  padding:9px 14px;border-radius:999px;
  border:1px solid var(--pill-border,#cdd7e4);
  background:var(--pill-bg,#fff);color:var(--text,#101826);
  display:inline-flex;align-items:center;gap:8px;
  transition:border-color .15s,background .15s,color .15s;
}
.amq-chip i{
  font-style:normal;font-family:var(--mono,monospace);font-size:11px;
  color:var(--dim,#8494ab);
}
.amq-chip:hover{border-color:var(--accent-border,#087d4970)}
.amq-chip.is-on{
  border-color:var(--accent,#087d49);
  background:var(--accent-soft,rgba(8,125,73,.08));
  color:var(--accent,#087d49);
}
.amq-chip.is-on i{color:inherit;opacity:.7}
.amq-len{min-width:56px;justify-content:center;font-family:var(--mono,monospace)}

.amq-go{
  font:inherit;font-weight:600;font-size:16px;cursor:pointer;
  padding:13px 26px;border-radius:10px;border:0;
  background:var(--btn-bg,#0d9d5c);color:var(--btn-fg,#fff);
  display:inline-flex;align-items:center;gap:10px;
  transition:background .15s,transform .1s;
}
.amq-go:hover{background:var(--btn-bg-h,#0bb268)}
.amq-go:active{transform:translateY(1px)}
.amq-kbd{
  font-family:var(--mono,monospace);font-size:11px;font-weight:400;
  padding:2px 6px;border-radius:4px;
  background:rgba(255,255,255,.22);
}
.amq-note{font-size:13px;color:var(--dim,#8494ab);margin:14px 0 0}

/* ---------- run ---------- */
.amq-bar{height:3px;background:var(--line,#e3e9f1);border-radius:3px;overflow:hidden}
.amq-bar-fill{
  display:block;height:100%;width:0;
  background:var(--accent,#087d49);
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.amq-meta{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono,monospace);font-size:12px;
  color:var(--dim,#8494ab);margin:12px 0 26px;
}
.amq-topic{
  padding:3px 9px;border-radius:999px;
  border:1px solid var(--line,#e3e9f1);
  color:var(--muted,#51617a);
}
.amq-quit{
  margin-left:auto;font:inherit;font-family:var(--mono,monospace);font-size:12px;
  background:none;border:0;color:var(--dim,#8494ab);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;padding:2px;
}
.amq-quit:hover{color:var(--text,#101826)}

.amq-card{min-height:46vh}
.amq-card.is-swap{animation:amq-in .26s ease both}
.amq-qnum{
  font-family:var(--mono,monospace);font-size:13px;color:var(--accent,#087d49);
  margin:0 0 10px;letter-spacing:.06em;
}
.amq-q{
  font-size:clamp(21px,3.1vw,31px);line-height:1.28;
  margin:0 0 26px;letter-spacing:-.01em;max-width:26ch;
}
.amq-opts{display:flex;flex-direction:column;gap:10px}
.amq-opt{
  font:inherit;font-size:16px;text-align:left;cursor:pointer;
  display:flex;align-items:flex-start;gap:14px;
  padding:15px 17px;border-radius:11px;
  border:1px solid var(--line,#e3e9f1);
  background:var(--panel,#fff);color:var(--text,#101826);
  transition:border-color .14s,background .14s,transform .1s;
}
.amq-opt:hover:not(:disabled){border-color:var(--accent-border,#087d4970);transform:translateX(2px)}
.amq-opt:disabled{cursor:default}
.amq-opt .k{
  flex:0 0 auto;width:24px;height:24px;border-radius:6px;
  display:grid;place-items:center;
  font-family:var(--mono,monospace);font-size:12px;
  border:1px solid var(--line,#e3e9f1);color:var(--dim,#8494ab);
  transition:border-color .14s,background .14s,color .14s;
}
.amq-opt .v{padding-top:1px}
.amq-opt.is-right{border-color:var(--amq-ok);background:color-mix(in srgb,var(--amq-ok) 9%,transparent)}
.amq-opt.is-right .k{border-color:var(--amq-ok);background:var(--amq-ok);color:#fff}
.amq-opt.is-wrong{border-color:var(--amq-no);background:color-mix(in srgb,var(--amq-no) 8%,transparent)}
.amq-opt.is-wrong .k{border-color:var(--amq-no);background:var(--amq-no);color:#fff}
.amq-opt.is-dim{opacity:.62}

.amq-why{
  margin:20px 0 0;padding:15px 17px;border-radius:11px;
  border-left:3px solid var(--accent,#087d49);
  background:var(--bg-soft,#f2f5f9);
  font-size:15px;line-height:1.55;color:var(--muted,#51617a);
  animation:amq-in .22s ease both;
}
.amq-why b{color:var(--text,#101826);font-weight:600}
.amq-why.is-bad{border-left-color:var(--amq-no)}

.amq-foot{display:flex;align-items:center;gap:16px;margin:26px 0 0;flex-wrap:wrap}
.amq-next{
  font:inherit;font-weight:600;font-size:15px;cursor:pointer;
  padding:11px 22px;border-radius:10px;border:0;
  background:var(--btn-bg,#0d9d5c);color:var(--btn-fg,#fff);
  display:inline-flex;align-items:center;gap:9px;
}
.amq-next:hover{background:var(--btn-bg-h,#0bb268)}
.amq-hint{font-size:13px;color:var(--dim,#8494ab);font-family:var(--mono,monospace)}
.amq-hint b{color:var(--muted,#51617a)}

/* ---------- done ---------- */
.amq-score{position:relative;width:132px;height:132px;margin:0 0 22px}
.amq-ring{width:132px;height:132px;transform:rotate(-90deg)}
.amq-ring circle{fill:none;stroke-width:8}
.amq-ring-bg{stroke:var(--line,#e3e9f1)}
.amq-ring-fg{
  stroke:var(--accent,#087d49);stroke-linecap:round;
  stroke-dasharray:327;stroke-dashoffset:327;
  transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1);
}
.amq-score-num{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;
}
.amq-score-num b{display:block;font-size:34px;line-height:1;letter-spacing:-.02em}
.amq-score-num span{font-family:var(--mono,monospace);font-size:12px;color:var(--dim,#8494ab)}

.amq-topics{display:flex;flex-direction:column;gap:11px;margin:26px 0 30px}
.amq-trow{margin:0 0 2px;display:grid;grid-template-columns:1fr 62px;gap:12px;align-items:center;font-size:14px}
.amq-tname{display:flex;flex-direction:column;gap:6px}
.amq-tbar{height:5px;border-radius:3px;background:var(--line,#e3e9f1);overflow:hidden}
.amq-tbar i{display:block;height:100%;background:var(--accent,#087d49);border-radius:3px}
.amq-tnum{font-family:var(--mono,monospace);font-size:13px;color:var(--muted,#51617a);text-align:right}

.amq-lead{
  border:1px solid var(--line,#e3e9f1);border-radius:14px;
  padding:22px;background:var(--panel,#fff);margin:0 0 30px;
}
.amq-lead-h{font-size:18px;font-weight:600;margin:0 0 6px}
.amq-lead-p{font-size:14px;color:var(--muted,#51617a);margin:0 0 16px;line-height:1.5}
.amq-lead-row{display:flex;gap:9px;flex-wrap:wrap}
.amq-lead-row input{
  font:inherit;font-size:15px;flex:1 1 180px;min-width:0;
  padding:11px 13px;border-radius:9px;
  border:1px solid var(--line,#e3e9f1);
  background:var(--bg,#fafbfd);color:var(--text,#101826);
}
.amq-lead-row input:focus{outline:2px solid var(--accent,#087d49);outline-offset:1px;border-color:transparent}
.amq-lead-row button{
  font:inherit;font-weight:600;font-size:15px;cursor:pointer;flex:0 0 auto;
  padding:11px 20px;border-radius:9px;border:0;
  background:var(--btn-bg,#0d9d5c);color:var(--btn-fg,#fff);
}
.amq-lead-msg{font-size:14px;margin:12px 0 0;color:var(--muted,#51617a)}
.amq-lead-msg.is-ok{color:var(--amq-ok)}
.amq-lead-msg.is-bad{color:var(--amq-no)}

.amq-review{margin:0 0 28px}
.amq-review-h{
  font-family:var(--mono,monospace);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim,#8494ab);margin:0 0 12px;
}
.amq-rev{
  border:1px solid var(--line,#e3e9f1);border-radius:11px;
  padding:0;margin:0 0 9px;background:var(--panel,#fff);overflow:hidden;
}
.amq-rev summary{
  cursor:pointer;list-style:none;padding:14px 16px;
  display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;
}
.amq-rev summary::-webkit-details-marker{display:none}
.amq-rev .mark{
  flex:0 0 auto;width:20px;height:20px;border-radius:5px;
  display:grid;place-items:center;font-size:12px;color:#fff;margin-top:1px;
}
.amq-rev.hit .mark{background:var(--amq-ok)}
.amq-rev.miss .mark{background:var(--amq-no)}
.amq-rev-body{padding:0 16px 16px 48px;font-size:14px;line-height:1.55;color:var(--muted,#51617a)}
.amq-rev-body p{margin:0 0 7px}
.amq-rev-body .a-ok{color:var(--amq-ok);font-weight:600}
.amq-rev-body .a-no{color:var(--amq-no);font-weight:600}

.amq-again{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:560px){
  .amq-q{max-width:none}
  .amq-opt{font-size:15px;padding:14px}
  .amq-lead-row button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .amq-screen,.amq-card.is-swap,.amq-why{animation:none}
  .amq-bar-fill,.amq-ring-fg,.amq-opt{transition:none}
}