/* tryit-skin.css: the quiz skin, applied to the try-it onboarding (/start/ and the top of /try-it/). Presentation only.
   Same look as the quiz pages (modules/css/quiz-skin.css in cefr-quiz-plugin): Quiet blanks, Poppins, periwinkle + ink,
   calm mobile dock. Fraunces stays for the big "You captured N words" moments.
   Scope: everything sits under :is(#tryit-onboarding,.tryit-experience) (the onboarding root), or body:has(:is(#tryit-onboarding,.tryit-experience)) for the mobile dock,
   so quiz pages and classroom are untouched. Used by [tryit_onboarding], [tryit_modal], [tryit_teacher] and [try_it_experience].
   Roll back: remove the 'tryit-skin' enqueue line in try-it-landing-page.php, or delete this file. */

:is(#tryit-onboarding,.tryit-experience){
  --q-ink:#0f172a; --q-text:#1e293b; --q-muted:#475569; --q-line:#e2e8f0; --q-line-strong:#cbd5e1; --q-tint:#f1f4fb;
  --q-brand:#7d92ff; --q-ease:cubic-bezier(.2,.7,.2,1);
}

/* 1) Font: the quiz area, buttons and hints use the same Poppins as the quiz pages (private family from modules/fonts.php) */
:is(#tryit-onboarding,.tryit-experience) .tob-quiz-slot,
:is(#tryit-onboarding,.tryit-experience) .tob-quiz-slot :is(p,span,div,a,button,input,label,form,li,small,strong,em),
:is(#tryit-onboarding,.tryit-experience) .tob-step-headline,
:is(#tryit-onboarding,.tryit-experience) .tob-hint-btn,
:is(#tryit-onboarding,.tryit-experience) .tob-ear-cta-trust{
  font-family:"SIR Poppins","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important}

/* 2) Start / Stop: flat periwinkle with ink text (was a purple-to-indigo gradient) and ink for Stop (was green) */
:is(#tryit-onboarding,.tryit-experience) #start-quiz-button.cefr-start-btn{
  background:var(--q-brand)!important;color:var(--q-ink)!important;border:0!important;border-radius:999px!important;
  min-height:48px!important;padding:0 24px!important;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 20px -8px rgba(125,146,255,.7)!important;
  transition:background .28s var(--q-ease),color .28s,transform .16s var(--q-ease),box-shadow .28s!important}
:is(#tryit-onboarding,.tryit-experience) #start-quiz-button.cefr-start-btn:active{transform:scale(.98)}
:is(#tryit-onboarding,.tryit-experience) #start-quiz-button.cefr-start-btn.is-active{background:var(--q-ink)!important;color:#fff!important;box-shadow:0 8px 20px -10px rgba(15,23,42,.55)!important}

/* 3) Transcript rhythm: a normal word space between words, shown words as wide as their letters, punctuation hugging.
      (The plugin pads every word and gives shown words a 50px minimum, so gaps were uneven.) */
:is(#tryit-onboarding,.tryit-experience) #quiz-form-id{line-height:2.25!important;text-align:left}
:is(#tryit-onboarding,.tryit-experience) #quiz-form-id .inline_block{padding:0!important;margin:0 0 8px .3em!important;font-size:17px!important}
:is(#tryit-onboarding,.tryit-experience) #quiz-form-id .inline_block.is_visible{min-width:0!important;width:auto!important;text-align:left!important}
:is(#tryit-onboarding,.tryit-experience) #quiz-form-id .symbol-container{margin-left:.3em!important;padding:0!important}
:is(#tryit-onboarding,.tryit-experience) #quiz-form-id .symbol-container + .inline_block{margin-left:0!important}
:is(#tryit-onboarding,.tryit-experience) #quiz-form-id .q-keep{white-space:nowrap}
@media (min-width:768px){:is(#tryit-onboarding,.tryit-experience) #quiz-form-id .inline_block{font-size:19px!important}}

/* 4) Blanks: QUIET. A written line at rest; a tray only on focus, correct, wrong and hint. */
:is(#tryit-onboarding,.tryit-experience) .single_input{
  font-family:inherit;font-size:1em!important;font-weight:500;color:var(--q-ink)!important;text-align:center;caret-color:#4338ca;
  box-sizing:content-box!important;height:calc(2.1em - 2px)!important;padding:0 .35em!important;outline:0;
  background:transparent!important;border:0!important;border-bottom:2px solid #94a3b8!important;border-radius:0!important;box-shadow:none!important;
  transition:background .18s,border-color .18s,box-shadow .18s,color .18s}
:is(#tryit-onboarding,.tryit-experience) .single_input:focus{background:#dfe5ff!important;border:2px solid #0f172a!important;border-radius:10px!important;box-shadow:0 0 0 4px rgba(125,146,255,.55)!important;color:#0f172a!important}
:is(#tryit-onboarding,.tryit-experience) .single_input.is_hint,
:is(#tryit-onboarding,.tryit-experience) .single_input.is_hint.is_correct{background:#faf5ff!important;border:1.5px solid #a97dff!important;border-radius:10px!important;color:#7c3aed!important}
:is(#tryit-onboarding,.tryit-experience) .single_input.is_error{background:#fff1f4!important;border:2px solid #e11d48!important;border-radius:10px!important;color:#be123c!important}
:is(#tryit-onboarding,.tryit-experience) .single_input.is_correct:not(.is_hint){background:#e8f8ee!important;border:2px solid #22c55e!important;border-radius:10px!important;color:#14532d!important}
/* exact width from modules/blank-width.php (--bw); irl-quiz-ui.css forces min-width:5ch on every blank */
:is(#tryit-onboarding,.tryit-experience) #quiz-form-id .single_input[style*="--bw"]{
  width:calc(var(--bw) + .45em)!important;padding-left:.2em!important;padding-right:.2em!important;min-width:2.1em!important}

/* 5) Clip 2 hint pill: periwinkle outline pill, kept inside the screen edge */
:is(#tryit-onboarding,.tryit-experience) .tob-hint-btn{
  border:1px solid var(--q-line-strong)!important;border-radius:999px!important;color:var(--q-ink)!important;background:#fff!important;
  min-height:44px;height:auto;padding:0 16px!important;max-width:calc(100% - 8px);margin-right:4px;font-size:13px!important;font-weight:500!important;white-space:nowrap}
:is(#tryit-onboarding,.tryit-experience) .tob-hint-btn svg{color:var(--q-brand)}

/* 6) Mobile dock: the same calm system as the quiz pages (was green rewind, orange 85%, blue hint) */
body:has(:is(#tryit-onboarding,.tryit-experience)) .cefr-mobile-bar{background:rgba(255,255,255,.96)!important;-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
body:has(:is(#tryit-onboarding,.tryit-experience)) .cefr-mobile-bar .cefr-mb-play{background:#7d92ff!important;color:#0f172a!important;border:0!important;border-radius:50%!important}
body:has(:is(#tryit-onboarding,.tryit-experience)) .cefr-mobile-bar .cefr-mb-rewind,
body:has(:is(#tryit-onboarding,.tryit-experience)) .cefr-mobile-bar .cefr-mb-slow,
body:has(:is(#tryit-onboarding,.tryit-experience)) .cefr-mobile-bar .cefr-mb-hint{background:#fff!important;color:#0f172a!important;border:1px solid #cbd5e1!important;border-radius:50%!important;font-weight:600!important}
body:has(:is(#tryit-onboarding,.tryit-experience)) .cefr-mobile-bar .cefr-mb-slow.is-slow,
body:has(:is(#tryit-onboarding,.tryit-experience)) .cefr-mobile-bar .cefr-mb-slow.is-active{background:#0f172a!important;color:#fff!important;border-color:#0f172a!important}
body:has(:is(#tryit-onboarding,.tryit-experience)) .cefr-mobile-bar button:focus-visible{outline:2px solid #0f172a!important;outline-offset:2px!important}
body:has(:is(#tryit-onboarding,.tryit-experience)) .cefr-mobile-bar .cefr-ring-fill{stroke:#0f172a!important}
body:has(:is(#tryit-onboarding,.tryit-experience)) .cefr-mobile-bar .cefr-ring-track{stroke:#dde3f3!important}
body:has(:is(#tryit-onboarding,.tryit-experience)) .cefr-mobile-bar .cefr-ring-label{color:#0f172a;font-weight:600}

/* 7) "Keep listening": the Next Actions series card, shown a little shorter than on the dashboard */
:is(#tryit-onboarding,.tryit-experience) .tob-rec-section--card{margin-top:24px}
:is(#tryit-onboarding,.tryit-experience) .tob-rec-section--card .tob-rec-section-header{font-family:"SIR Poppins","Poppins",system-ui,sans-serif;font-size:13px;font-weight:500;color:#475569;text-align:left;margin:0 0 12px}
:is(#tryit-onboarding,.tryit-experience) .tob-rec-section--card .sir-sc-card{max-width:360px;margin:0 auto;font-family:"SIR Poppins","Poppins",system-ui,sans-serif}
:is(#tryit-onboarding,.tryit-experience) .tob-rec-section--card .sir-sc-media{aspect-ratio:16/10}

:is(#tryit-onboarding,.tryit-experience) .tob-join-first{display:flex;align-items:center;justify-content:center;max-width:360px;margin:12px auto 0;min-height:48px;padding:0 24px;box-sizing:border-box;
  background:transparent;border:2px solid #22c55e;border-radius:999px;color:#14532d;font:600 15px/1 "SIR Poppins","Poppins",system-ui,sans-serif;text-decoration:none;transition:background .18s}
:is(#tryit-onboarding,.tryit-experience) .tob-join-first:hover{background:#e8f8ee;color:#14532d}
:is(#tryit-onboarding,.tryit-experience) .tob-join-first:focus-visible{outline:2px solid #0f172a;outline-offset:2px}

/* 8) Tool row (Hint / 85% / Show / Clear): generated from the same rules as modules/css/quiz-skin.css (scope swapped) */
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn{
  min-height:44px;border-radius:999px;background:#fff;color:var(--q-ink);
  border:1px solid var(--q-line-strong);font-weight:500;
  transition:border-color .16s,background .16s;
}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn:hover{border-color:var(--q-ink);background:var(--q-tint)}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--clear{color:var(--q-bad)}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn:focus-visible{outline:2px solid var(--q-ink);outline-offset:2px}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn.btn{
  background:#fff!important;color:#0f172a!important;border:1px solid #cbd5e1!important;
  border-radius:999px!important;min-height:44px!important;padding:0 16px!important;font-weight:500!important;
  box-shadow:none!important;
  transition:transform .14s cubic-bezier(.2,.7,.2,1),border-color .16s,background .16s!important;
}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn.btn:hover{border-color:#0f172a!important;background:#f1f4fb!important}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn.btn:active{transform:scale(.96)}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--clear.btn{color:#be123c!important}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn.btn svg{color:currentColor!important;stroke:currentColor}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-buttons{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--hint{order:1}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--slow{order:2}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--reveal{order:3}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--clear{order:4}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--slow.btn.is-active{background:#0f172a!important;color:#fff!important;border-color:#0f172a!important}
:is(#tryit-onboarding,.tryit-experience):has(.single_input.is_hint) .quiz-action-btn--hint.btn{background:#faf5ff!important;color:#7c3aed!important;border-color:#a97dff!important}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--slow.btn.is-active:hover{background:#0f172a!important;color:#fff!important;border-color:#0f172a!important}
:is(#tryit-onboarding,.tryit-experience):has(.single_input.is_hint) .quiz-action-btn--hint.btn:hover{background:#f3e8ff!important}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--slow .wps-slow-icon-wrap>svg{display:none!important}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--slow .wps-slow-icon-wrap::before{
  content:"";flex:none;display:inline-block;width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M114.34,154.34l96-96a8,8,0,0,1,11.32,11.32l-96,96a8,8,0,0,1-11.32-11.32ZM128,88a63.9,63.9,0,0,1,20.44,3.33,8,8,0,1,0,5.11-15.16A80,80,0,0,0,48.49,160.88,8,8,0,0,0,56.43,168c.29,0,.59,0,.89-.05a8,8,0,0,0,7.07-8.83A64.92,64.92,0,0,1,64,152,64.07,64.07,0,0,1,128,88Zm99.74,13a8,8,0,0,0-14.24,7.3,96.27,96.27,0,0,1,5,75.71l-181.1-.07A96.24,96.24,0,0,1,128,56h.88a95,95,0,0,1,42.82,10.5A8,8,0,1,0,179,52.27a112,112,0,0,0-156.66,137A16.07,16.07,0,0,0,37.46,200H218.53a16,16,0,0,0,15.11-10.71,112.35,112.35,0,0,0-5.9-88.3Z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M114.34,154.34l96-96a8,8,0,0,1,11.32,11.32l-96,96a8,8,0,0,1-11.32-11.32ZM128,88a63.9,63.9,0,0,1,20.44,3.33,8,8,0,1,0,5.11-15.16A80,80,0,0,0,48.49,160.88,8,8,0,0,0,56.43,168c.29,0,.59,0,.89-.05a8,8,0,0,0,7.07-8.83A64.92,64.92,0,0,1,64,152,64.07,64.07,0,0,1,128,88Zm99.74,13a8,8,0,0,0-14.24,7.3,96.27,96.27,0,0,1,5,75.71l-181.1-.07A96.24,96.24,0,0,1,128,56h.88a95,95,0,0,1,42.82,10.5A8,8,0,1,0,179,52.27a112,112,0,0,0-156.66,137A16.07,16.07,0,0,0,37.46,200H218.53a16,16,0,0,0,15.11-10.71,112.35,112.35,0,0,0-5.9-88.3Z%22/%3E%3C/svg%3E") center/contain no-repeat}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--hint::after,
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--reveal::after,
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--clear::after,
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--mcq::after{font-size:13px!important;font-weight:500!important;line-height:1!important}
:is(#tryit-onboarding,.tryit-experience) .quiz-action-btn--slow .wps-slow-label{font-size:13px!important;font-weight:500!important}

:is(#tryit-onboarding,.tryit-experience) .tob-ear-cta-trust{font-size:13px!important;line-height:1.4!important} /* page designs (e.g. For Schools) set p{font-size:18px} */

@media (prefers-reduced-motion:reduce){:is(#tryit-onboarding,.tryit-experience) *{transition:none!important;animation:none!important}}