/* Clarity: find your tool (docs/design/clarity/brief.md, "find your tool, and found on Google"). clarity-quiz.js draws the
   panel only when the clarity-quiz flag is on, and every rule here names a cq- class, so with the flag off it styles nothing.
   Words: --ink on --panel 16.0, --dim on --panel 7.1, --ice on --panel for the links (clarity.css's measured tokens). */
.cq{margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.25rem,3vw,2.25rem);background:var(--panel);border:1px solid var(--frame);
  border-radius:var(--r-3);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.cq-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem}
.cq-kicker{margin:0;font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;color:var(--ice)}
.cq-title{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.125rem,.95rem + .6vw,1.5rem);line-height:1.3;text-wrap:balance}
.cq-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cq-stage{margin-top:clamp(1rem,2vw,1.5rem)}
.cq-view{display:grid;gap:1rem}
.cq-count{margin:0;font-family:var(--mono);font-size:.8125rem;line-height:1.4;color:var(--dim)}
.cq-q{margin:-.5rem 0 0;font-size:clamp(1.125rem,1rem + .4vw,1.375rem);font-weight:600;line-height:1.35;color:var(--ink);text-wrap:balance}
.cq-q:focus,.cq-name:focus{outline:none}
.cq-q:focus-visible,.cq-name:focus-visible{outline:2px solid var(--ice);outline-offset:4px;border-radius:6px}
.cq-answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.75rem}
.cq-a{min-height:3.5rem;padding:.875rem 1.125rem;text-align:left;font:600 1rem/1.4 var(--text);color:var(--ink);background:var(--ground);
  border:1px solid var(--frame-2);border-radius:var(--r-2);cursor:pointer;transition:border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
.cq-a:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
@media (hover:hover){.cq-a:hover{border-color:var(--ice);background:#122034}}
.cq-nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.cq-link{display:inline-flex;align-items:center;min-height:2.75rem;padding:0;font:600 1rem/1.3 var(--text);color:var(--ice);background:none;border:0;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--frame-3);cursor:pointer}
.cq-link:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:6px}
@media (hover:hover){.cq-link:hover{color:var(--ice-hi);text-decoration-color:var(--ice)}}
.cq-result{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1rem,3vw,2rem);align-items:center}
.cq-art{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:680 / 491;object-fit:cover;border-radius:var(--r-2);border:1px solid var(--frame)}
.cq-copy{display:grid;gap:.5rem;min-width:0}
.cq-name{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,1rem + .9vw,1.75rem);line-height:1.25}
.cq-rq{margin:0;font-weight:600;color:var(--ink);line-height:1.4}
.cq-say{margin:0;color:var(--dim);line-height:1.55;max-width:46ch;text-wrap:pretty}
.cq-say strong{color:var(--ink);font-weight:600}
.cq-acts{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-top:.5rem}
.cq-pair{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:1rem;align-items:center;padding-top:1rem;border-top:1px solid var(--hair)}
.cq-tile{display:block;width:100%;max-width:100%;height:auto;border-radius:var(--r-1);border:1px solid var(--frame)}
.cq-pair-copy{display:grid;gap:.125rem;min-width:0}
.cq-pair-name{margin:0;font-weight:600;color:var(--ink)}
@media (max-width:700px){
  .cq-result{grid-template-columns:minmax(0,1fr)}
  .cq-pair{grid-template-columns:minmax(0,7rem) minmax(0,1fr)}
}
@media (prefers-reduced-motion:no-preference){
  .cq-enter{animation:cq-in 200ms var(--ease-out) backwards}
}
@keyframes cq-in{from{opacity:0;transform:translateY(8px)}}