/* Awgura · study form + result. Shared by /study and the #study block of awgura.com. Everything scoped to .study-box
   (the landing has its own .btn, .note, form and input styles). Uses the page tokens --bg --fg --mut --line --acc --ok --red. */
.study-box{--sp:#121214;--warn:#e5a84b}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .study-box{--sp:#fff;--warn:#a86a10}}
:root[data-theme=light] .study-box{--sp:#fff;--warn:#a86a10}
form.study-box{display:grid;gap:12px;max-width:560px}
.study-box label.lbl{display:block;font:13px var(--mono);color:var(--fg);margin:4px 0 -6px}.study-box label.lbl span{color:var(--mut)}
.study-box input[type=text],.study-box input[type=email],.study-box select{width:100%;background:var(--sp);border:1px solid var(--line);color:var(--fg);font:16px var(--sans);padding:14px 16px;border-radius:9px}
.study-box input:focus,.study-box select:focus{outline:2px solid var(--acc);outline-offset:1px}
.study-box label.ck a{color:var(--fg)}
.study-box label.ck{display:flex;gap:10px;align-items:flex-start;color:var(--mut);font-size:14px}
.study-box label.ck input{width:auto;margin-top:4px;accent-color:var(--acc)}
.study-box .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.study-box .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:9px;font:700 14px var(--mono);text-decoration:none;border:1px solid var(--fg);cursor:pointer;background:var(--fg);color:var(--bg);justify-self:start}
.study-box .btn.g{background:transparent;color:var(--fg)}
.study-box .btn.gold{background:var(--acc);border-color:var(--acc);color:#0b0b0c}
.study-box .btn[disabled]{opacity:.6;cursor:wait}
.study-box .msg{font:13px var(--mono);color:var(--mut);min-height:1.4em}
.study-box .msg.err{color:var(--red)}
.res.study-box{margin-top:28px;border:1px solid var(--line);border-radius:14px;padding:clamp(18px,4vw,32px);background:var(--sp)}
.study-box .top{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.study-box .score{font:800 clamp(64px,14vw,96px)/1 var(--sans);letter-spacing:-.04em;color:var(--acc)}
.study-box .score small{font-size:.3em;color:var(--mut);letter-spacing:0}
.study-box .top p{color:var(--mut);max-width:380px}
.study-box .top b{color:var(--fg)}
.study-box .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.study-box .chip{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font:12px var(--mono);color:var(--mut)}
.study-box .chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.study-box .chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent)}
.study-box ul.f{list-style:none;display:grid;gap:10px;margin:0 0 24px;padding:0}
.study-box ul.f li{padding-left:18px;position:relative}
.study-box ul.f li:before{content:"→";position:absolute;left:0;color:var(--acc)}
.study-box .gain{border-left:3px solid var(--acc);padding:4px 0 4px 14px;margin:0 0 22px}
.study-box .gain b{display:block;margin-bottom:4px}
.study-box .gain p{color:var(--mut)}
.study-box .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.study-box .note{font:inherit;color:var(--mut);margin-bottom:18px}
.study-box details.tech{margin-top:22px;border-top:1px solid var(--line);padding-top:12px;color:var(--mut);font-size:14px}
.study-box details.tech summary{cursor:pointer;font:13px var(--mono)}
.study-box details.tech dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin-top:10px}
.study-box details.tech dd{color:var(--fg);word-break:break-word;margin:0}
.study-box .loading{display:grid;gap:14px}
.study-box .loading .scr{font:700 clamp(18px,3.4vw,26px)/1.2 var(--mono);color:var(--acc);letter-spacing:.02em;word-break:break-all}
.study-box .loading .bar{height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.study-box .loading .bar i{display:block;height:100%;width:30%;background:var(--acc);animation:aw-ld 1.1s ease-in-out infinite}
@keyframes aw-ld{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
@media (prefers-reduced-motion:reduce){.study-box .loading .bar i{animation:none;width:100%;opacity:.4}}
@media (max-width:480px){.study-box details.tech dl{grid-template-columns:1fr}.study-box .actions .btn{width:100%}}