/* LAskill CBT. Colours, font, corner shape and dark mode all come from the LAskill Theme (the --lst- variables).
   The values after the commas are only a fallback for when the theme is not active. */
.lcbt{--c-primary:var(--lst-primary,#d99515);--c-primary-dark:var(--lst-primary-dark,#b87a0c);--c-soft:var(--lst-primary-soft,#fbf1d9);--c-on:var(--lst-on-primary,#111);--c-ptext:var(--lst-primary-text,#8f5f06);
 --c-text:var(--lst-text,#3a3a3a);--c-head:var(--lst-heading,#232323);--c-muted:var(--lst-muted,#6b6b6b);--c-border:var(--lst-border,#ececec);--c-surface:var(--lst-surface,#fff);--c-surface2:var(--lst-surface-2,#f6f5f3);
 --c-ok:var(--lst-ok,#17803d);--c-okbg:var(--lst-ok-bg,#e6f6ec);--c-bad:var(--lst-bad,#b42318);--c-badbg:var(--lst-bad-bg,#fdecea);--c-ink:var(--lst-ink,#232323);--c-inktext:var(--lst-ink-text,#fff);
 --c-radius:var(--lst-radius,16px);--c-btn:var(--lst-radius-btn,999px);--c-shadow:var(--lst-shadow,0 12px 32px rgba(0,0,0,.08));
 font-family:var(--lst-font,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif);color:var(--c-text);line-height:1.6;max-width:1180px;margin:0 auto;padding:8px 0 0}
.lcbt *{box-sizing:border-box}
.lcbt h2,.lcbt h3,.lcbt h4{color:var(--c-head);margin:0 0 .4em;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.lcbt h2{font-size:clamp(24px,3.4vw,34px)}
.lcbt p{margin:0 0 1em}
.lcbt-muted{color:var(--c-muted)}
.lcbt-crumb{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 18px;font-size:14px;color:var(--c-muted)}
.lcbt-link{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--c-ptext);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lcbt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border:1.5px solid transparent;border-radius:var(--c-btn);background:var(--c-primary);color:var(--c-on);font:inherit;font-weight:700;cursor:pointer;text-decoration:none;transition:background .15s,transform .15s}
.lcbt-btn:hover{background:var(--c-primary-dark);color:var(--c-on);transform:translateY(-1px)}
.lcbt-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.lcbt a.lcbt-btn,.lcbt a.lcbt-btn:hover{text-decoration:none;color:var(--c-on)}
.lcbt-btn-soft{background:var(--c-surface2);color:var(--c-head);border-color:var(--c-border)}
.lcbt-btn-soft:hover{background:var(--c-surface2);color:var(--c-head);border-color:var(--c-muted)}
.lcbt :focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.lcbt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.lcbt-card{display:block;text-align:left;width:100%;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--c-radius);padding:20px;font:inherit;color:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.lcbt-card:hover{transform:translateY(-3px);box-shadow:var(--c-shadow);border-color:var(--c-primary)}
.lcbt-card strong{display:block;color:var(--c-head);font-size:1.08em;margin-bottom:4px}
.lcbt-card span{color:var(--c-muted);font-size:14px}
.lcbt-box{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--c-radius);padding:26px;box-shadow:var(--c-shadow)}
.lcbt-pills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.lcbt-pill{background:var(--c-soft);color:var(--c-ptext);padding:5px 14px;border-radius:99px;font-size:13.5px;font-weight:700}
.lcbt-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;font-size:14px;color:var(--c-muted);font-weight:600}
.lcbt-timer{font-variant-numeric:tabular-nums;color:var(--c-head);background:var(--c-surface2);border:1px solid var(--c-border);padding:4px 12px;border-radius:99px}
.lcbt-timer.is-low{color:var(--c-bad);border-color:var(--c-bad)}
.lcbt-bar{height:8px;background:var(--c-surface2);border-radius:99px;overflow:hidden;margin-bottom:22px}
.lcbt-bar span{display:block;height:100%;background:var(--c-primary);border-radius:99px;transition:width .25s}
.lcbt-q{font-size:clamp(18px,2.4vw,22px);font-weight:700;color:var(--c-head);margin:0 0 18px;white-space:pre-line}
.lcbt-opts{display:grid;gap:10px;margin:0 0 22px}
.lcbt-opt{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--c-border);border-radius:14px;background:var(--c-surface);cursor:pointer;font-weight:500;color:var(--c-text)}
.lcbt-opt:hover{border-color:var(--c-primary)}
.lcbt-opt input[type=radio]{margin:4px 0 0;width:18px;height:18px;min-width:18px;padding:0;border-radius:50%;box-shadow:none;background:transparent;accent-color:var(--c-primary);flex:none}
.lcbt-opt input[type=radio]:focus,.lcbt-opt input[type=radio]:focus-visible{box-shadow:none;outline:none}
.lcbt-opt:has(input:focus-visible){box-shadow:0 0 0 3px var(--c-primary)}
.lcbt-opt.is-picked{border-color:var(--c-primary);background:var(--c-soft)}
.lcbt-opt.is-right{border-color:var(--c-ok);background:var(--c-okbg)}
.lcbt-opt.is-wrong{border-color:var(--c-bad);background:var(--c-badbg)}
.lcbt-opt .lcbt-tag{margin-left:auto;font-size:12px;font-weight:800;white-space:nowrap}
.lcbt-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lcbt-field{width:100%;padding:13px 15px;border:1.5px solid var(--c-border);border-radius:12px;background:var(--c-surface);color:var(--c-head);font:inherit;margin:0 0 12px}
.lcbt-field:focus{outline:none;border-color:var(--c-primary)}
.lcbt-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.lcbt-note{font-size:13.5px;color:var(--c-muted)}
.lcbt-err{background:var(--c-badbg);color:var(--c-bad);border-radius:12px;padding:12px 16px;margin:0 0 14px;font-weight:600}
.lcbt-ok{background:var(--c-okbg);color:var(--c-ok);border-radius:12px;padding:12px 16px;margin:0 0 14px;font-weight:600}
.lcbt-score{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.lcbt-ring{--p:0;width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--c-primary) calc(var(--p)*1%),var(--c-surface2) 0);display:grid;place-items:center;flex:none}
.lcbt-ring b{width:86px;height:86px;border-radius:50%;background:var(--c-surface);display:grid;place-items:center;font-size:24px;color:var(--c-head)}
.lcbt-offer{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:22px 0;padding:20px;border:1.5px solid var(--c-primary);border-radius:var(--c-radius);background:var(--c-soft)}
.lcbt-offer img{width:96px;height:64px;object-fit:cover;border-radius:10px}
.lcbt-offer div{flex:1;min-width:200px}
.lcbt-offer small{color:var(--c-ptext);font-weight:700}
.lcbt-review{margin-top:28px}
.lcbt-item{border:1px solid var(--c-border);border-radius:var(--c-radius);padding:20px;margin:0 0 16px;background:var(--c-surface)}
.lcbt-why{margin:14px 0 0;padding:14px 16px;border-radius:12px;background:var(--c-ink);color:var(--c-inktext);font-size:.95em;border-left:4px solid var(--c-primary)}
.lcbt-empty{text-align:center;padding:40px 10px;color:var(--c-muted)}
@media(max-width:560px){.lcbt-box{padding:18px}.lcbt-nav .lcbt-btn{flex:1}}

/* Banner, headings and topic rows: the same look as the rest of the LAskill site */
.lcbt-stage{max-width:780px;margin:0 auto}
.lcbt-hero{position:relative;overflow:hidden;border-radius:28px;padding:54px 28px 50px;text-align:center;color:var(--c-on);background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-dark) 100%);box-shadow:0 24px 56px rgba(0,0,0,.14);margin:6px 0 8px}
.lcbt-hero::before,.lcbt-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.lcbt-hero::before{width:340px;height:340px;left:-90px;top:-150px;background:rgba(255,255,255,.2)}
.lcbt-hero::after{width:300px;height:300px;right:-80px;bottom:-180px;background:rgba(0,0,0,.1)}
.lcbt-hero>*{position:relative}
.lcbt .lcbt-hero h1{color:var(--c-on);margin:0;font-size:clamp(30px,4.6vw,52px);line-height:1.1;letter-spacing:-.02em;font-weight:800}
.lcbt .lcbt-hero p{margin:12px auto 0;max-width:640px;font-size:17px;color:var(--c-on);opacity:.85}
.lcbt-hero-icon{width:68px;height:68px;margin:0 auto 18px;display:grid;place-items:center;border-radius:20px;background:rgba(255,255,255,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);font-size:32px;line-height:1}
.lcbt .lcbt-h2{font-size:clamp(22px,2.6vw,28px);margin:44px 0 20px;padding-left:14px;border-left:4px solid var(--c-primary)}
.lcbt-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lcbt-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:18px;padding:20px 24px;transition:box-shadow .15s,border-color .15s,transform .15s}
.lcbt-row:hover{box-shadow:var(--c-shadow);border-color:var(--c-primary);transform:translateY(-2px)}
.lcbt-row strong{display:block;color:var(--c-head);font-size:17px;line-height:1.3}
.lcbt-row small{display:block;margin-top:3px;color:var(--c-muted);font-size:14px}
.lcbt-row.is-soon{background:var(--c-surface2);box-shadow:none;transform:none;border-color:var(--c-border)}
.lcbt-row.is-soon strong,.lcbt-row.is-soon small{color:var(--c-muted);opacity:.7}
.lcbt-btn-sm{padding:9px 20px;font-size:14px;white-space:nowrap}
.lcbt-more{margin:30px 0 0;font-weight:700}
.lcbt-more a{color:var(--c-ptext)}
@media(max-width:760px){.lcbt-list{grid-template-columns:1fr}.lcbt-hero{border-radius:22px;padding:40px 20px 38px}.lcbt-row{padding:18px}}
.lcbt-row.is-click{cursor:pointer}
.lcbt h1:focus,.lcbt h2:focus,.lcbt h3:focus{outline:none}

/* Smaller banner for the quiz screens: the page title and description are always in the brand banner */
.lcbt-hero-sm{padding:30px 22px 28px;border-radius:22px;margin:6px 0 20px}
.lcbt .lcbt-hero-sm h1{font-size:clamp(24px,3.4vw,36px)}
.lcbt .lcbt-hero-sm p{margin-top:8px;font-size:15.5px}
.lcbt-hero-sm::before{width:240px;height:240px;left:-70px;top:-120px}
.lcbt-hero-sm::after{width:220px;height:220px;right:-60px;bottom:-130px}
.lcbt [tabindex="-1"]:focus,.lcbt [tabindex="-1"]:focus-visible{outline:none!important;box-shadow:none!important}

/* The reason for an answer */
.lcbt-why p{margin:0 0 10px}
.lcbt-why p:last-child{margin-bottom:0}
.lcbt-rm-label{color:#d99515;font-weight:800}
.lcbt-readmore a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lcbt-readmore a:hover{opacity:.85}

/* Missed and skipped question pop-ups */
html.lcbt-lock{overflow:hidden}
.lcbt.lcbt-host{position:fixed;inset:0;z-index:100000;max-width:none;margin:0;padding:16px;display:flex;align-items:center;justify-content:center}
.lcbt-overlay{position:absolute;inset:0;background:rgba(10,10,10,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:lcbtFade .2s}
.lcbt-dialog{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border);border-radius:calc(var(--c-radius) + 6px);padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:lcbtPop .25s cubic-bezier(.2,1.2,.4,1)}
.lcbt-dialog-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:50%;background:var(--c-primary);color:var(--c-on);font-size:24px;font-weight:800;line-height:1}
.lcbt-dialog h2{font-size:clamp(21px,3.2vw,26px);margin-bottom:10px}
.lcbt-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.lcbt-chip{min-width:42px;height:42px;padding:0 12px;border-radius:99px;border:1.5px solid var(--c-primary);background:var(--c-soft);color:var(--c-ptext);font:inherit;font-weight:800;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.lcbt-chip:hover,.lcbt-chip.is-here{background:var(--c-primary);color:var(--c-on)}
.lcbt-chip:hover{transform:translateY(-2px)}
.lcbt-modal-time{margin:0 0 16px;font-size:14.5px;color:var(--c-muted)}
.lcbt-modal-time strong{color:var(--c-head)}
.lcbt-dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.lcbt-missed{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;padding:12px 14px;border-radius:14px;background:var(--c-soft);color:var(--c-ptext);font-weight:700;font-size:14.5px}
.lcbt-missed .lcbt-chip{min-width:36px;height:36px;font-size:14px}
.lcbt-missed.is-done{background:var(--c-okbg);color:var(--c-ok)}
.lcbt-missed.is-done .lcbt-link{color:var(--c-ok)}
@keyframes lcbtFade{from{opacity:0}to{opacity:1}}
@keyframes lcbtPop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:480px){.lcbt-dialog{padding:22px}.lcbt-dialog-actions .lcbt-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.lcbt-overlay,.lcbt-dialog{animation:none}.lcbt-chip{transition:none}}