/* Hallmark · existing Hikma identity · pre-emit critique: P4 H5 E4 S5 R5 V4 */
html,body{overflow-x:clip}.challenge{--card-surface:var(--brand-paper);--card-focus:var(--brand-deep);--card-ink:var(--brand-ink);--card-accent:var(--brand-yellow);font-family:var(--brand-font)}
.challenge-lead{font-size:clamp(20px,3vw,28px);color:var(--card-ink)}.challenge-setup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-block:28px}.challenge-setup label{display:grid;gap:8px;font-weight:700;min-width:0}.challenge-setup label span{font-weight:400;font-size:13px}.challenge-setup input,.challenge-setup select{width:100%;box-sizing:border-box;min-height:52px}.challenge-note,#testHint{font-size:14px;line-height:1.9}.challenge .test-toolbar{justify-content:space-between;border-block:1px solid var(--color-line);padding-block:16px}.challenge #testClock{font-size:36px;color:var(--card-focus);font-variant-numeric:tabular-nums}.challenge textarea{box-sizing:border-box;min-width:0}.challenge button{white-space:nowrap;min-height:48px;transition:transform 160ms,opacity 160ms}.challenge button:active{transform:translateY(2px)}.challenge button:disabled{opacity:.5;cursor:not-allowed}.challenge :focus-visible{outline:3px solid var(--card-focus);outline-offset:4px}.challenge [aria-busy=true]{cursor:progress;opacity:.7}
#resultCard{width:100%;max-width:540px;aspect-ratio:1;display:block;margin:24px auto;border-radius:22px;box-shadow:0 8px 0 var(--card-accent)}#shareResult{text-align:center}#shareResult h2{overflow-wrap:anywhere}.share-actions{justify-content:center;margin-top:32px}.test-explanation{margin-block:28px}#shareResult:not([hidden]){animation:card-arrive 400ms ease-out}
@keyframes card-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover){.challenge button:not(:disabled):hover{transform:translateY(-2px)}}
@media(max-width:600px){.challenge-setup{grid-template-columns:repeat(2,minmax(0,1fr))}.challenge-setup label:first-child{grid-column:1/-1}.challenge .test-toolbar{gap:8px}.challenge .test-toolbar p{font-size:13px}.challenge .test-passage{max-height:190px}.share-actions{gap:10px}.share-actions button{font-size:14px;padding-inline:16px}}
@media(prefers-reduced-motion:reduce){#shareResult:not([hidden]){animation:none}.challenge button{transition:none}}

.typing-surface{position:relative;cursor:text;margin-block:24px}
.challenge .test-passage{border:0;background:transparent;border-radius:0;padding:12px 4px;font-size:clamp(25px,4vw,34px);line-height:2.1;color:#788992;max-height:230px;scrollbar-width:none;white-space:pre-wrap;overflow-wrap:normal}
.challenge textarea.typing-capture{position:absolute;top:45%;right:8px;width:2px;height:2px;min-height:0;padding:0;border:0;opacity:.01;resize:none;overflow:hidden;pointer-events:none}
.typed-correct{color:var(--brand-ink)}.typed-wrong{color:#b33136;text-decoration:underline;text-decoration-color:#b33136}
.typing-current{position:relative}.typing-current:before{content:"";position:absolute;right:0;top:10%;height:85%;width:2px;background:var(--brand-deep)}
.typing-surface:focus-within .typing-current:before{animation:typing-blink 1s step-end infinite}
@keyframes typing-blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.typing-surface:focus-within .typing-current:before{animation:none}}


/* Compact time controls; existing Hikma palette. */
.test-controls{display:flex;justify-content:center;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:32px auto 64px}.control-group{display:flex;align-items:center;gap:12px;padding:4px 16px;background:var(--color-line);border-radius:12px;min-height:48px;color:var(--brand-ink);font-size:14px}.control-group [role=group]{display:flex;direction:ltr;gap:4px}.control-group button{border:0;background:transparent;color:var(--brand-ink);font:inherit;min-width:44px;min-height:44px;border-radius:8px;padding:4px}.control-group button[aria-pressed=true]{background:var(--brand-deep);color:var(--brand-paper);font-weight:700}.control-label{color:var(--brand-deep);font-weight:700}.control-language{border-inline-end:1px solid var(--brand-paper);padding-inline-end:12px}.test-options{position:relative}.test-options summary{cursor:pointer;min-height:44px;display:flex;align-items:center;white-space:nowrap;list-style:none}.test-options summary::-webkit-details-marker{display:none}.test-options .challenge-setup{position:absolute;z-index:5;top:100%;inset-inline-end:0;width:280px;max-width:calc(100vw - 48px);display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:8px 0;padding:20px;box-sizing:border-box;background:var(--brand-paper);border:1px solid var(--brand-deep);border-radius:12px;text-align:start;box-shadow:0 8px 24px var(--color-line)}.test-options label:first-child{grid-column:auto}.challenge .test-toolbar{border:0;padding:0}.challenge .test-toolbar button{background:transparent;color:var(--brand-ink);box-shadow:none;border:0;font-size:14px}.challenge .test-toolbar p{margin:0}.challenge .test-toolbar #testClock{font-size:28px}.member-page:has(.test-controls)>h1{font-size:24px;margin-bottom:12px}
@media(max-width:500px){.test-controls{gap:8px;margin-block:20px 32px}.control-group{gap:8px;padding-inline:12px;font-size:13px}.test-options .challenge-setup{inset-inline-end:-20px}}

@media(max-width:500px){.test-controls{position:relative}.test-options{position:static}.test-options .challenge-setup{inset-inline:0;top:100%;margin-inline:auto;width:280px;max-width:100%}}

.challenge .test-passage{height:6.3em;max-height:none;overflow:hidden;overflow-anchor:none;scroll-behavior:auto}
.control-group{gap:8px;padding:2px 12px;font-size:13px;min-height:40px;border-radius:10px}.control-group button{min-width:38px;min-height:40px;font-size:13px}.test-options summary{min-height:40px;font-size:13px}.test-controls{gap:12px}.test-options .challenge-setup input,.test-options .challenge-setup select{min-height:44px;padding:8px;font-size:14px}

.result-announcement{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0!important;outline:0!important}
