/* Typing-screen settings bar (js/typing-prefs.js), keyboard styles, speed on each word and story scenes
   (js/pro/stories.js). Loaded after future.css; the accessibility file still comes last. */

/* ---- settings bar and its panels */
.tb-bar { display: flex; justify-content: flex-end; gap: 6px; margin: 0 0 8px; }
.tb-btn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer;
}
.tb-btn:hover, .tb-btn:focus-visible { color: var(--text); border-color: var(--primary); }
.tb-btn[aria-pressed="false"] { opacity: 0.7; }
.tb-pop {
  position: fixed; inset: auto; margin: 0; max-height: min(72vh, 640px); overflow: auto; padding: 16px 18px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.45);
}
.tb-pop h3 { margin: 0 0 10px; font-size: 1.05rem; }
.tb-field { margin: 12px 0; }
.tb-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 6px; }
.tb-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-choices.tb-cols, .tb-choices.tb-stories, .tb-choices.tb-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-choices.tb-stories, .tb-choices.tb-big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb-choice {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 7px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-size: 0.88rem; cursor: pointer;
}
.tb-cols .tb-choice, .tb-fonts .tb-choice { align-items: flex-start; text-align: left; }
.tb-fonts .tb-choice { min-width: 0; overflow: hidden; }
.tb-fonts .tb-choice span { font-size: 1rem; max-width: 100%; overflow-wrap: anywhere; }
.tb-choice:hover { border-color: var(--primary); }
.tb-choice[aria-checked="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.tb-big .tb-choice { padding: 12px 6px; }
.tb-hand-ico { font-size: 1.6rem; line-height: 1; }
.tb-big .tb-choice:nth-child(3) .tb-hand-ico { transform: scaleX(-1); }
.tb-stories .tb-choice { padding: 6px; font-size: 0.8rem; }
.tb-switch { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; }
.tb-switch input {
  appearance: none; width: 42px; height: 24px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--border); position: relative; cursor: pointer; flex: none; margin: 0;
}
.tb-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform 0.15s; }
.tb-switch input:checked { background: var(--primary); border-color: var(--primary); }
.tb-switch input:checked::after { transform: translateX(18px); background: #fff; }
.tb-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tb-detect { flex: 1; min-width: 160px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.tb-note { font-size: 0.82rem; color: var(--muted); margin: 6px 0; }
/* in the top bar, after the menu */
.topbar > .tb-bar { margin: 0 0 0 auto; gap: 4px; }
.topbar > .tb-bar .tb-btn { width: 36px; height: 36px; }
/* log in / sign up person icon (js/pro/account-link.js): right after the settings icons, in the primary colour */
.topbar > .tb-account { width: 36px; height: 36px; margin-left: 4px; text-decoration: none; color: var(--primary); border-color: var(--primary); }
.topbar > .tb-account.signed-in { background: var(--primary); color: var(--primary-text); font-weight: 700; }
.tb-fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; max-height: 340px; overflow: hidden auto; padding-right: 4px; }
.tb-font-group { grid-column: 1 / -1; font-size: 0.8rem; color: var(--muted); margin: 8px 0 2px; }
.tb-font-search { width: 100%; box-sizing: border-box; }
.tb-fonts [hidden] { display: none; }

/* ---- display options */
/* the font chosen under Display -> Font face: every text you read to type or have typed */
:is(.typing-text, .ks-words, .ks-track .ks-track-input, .ks-custom-text, .pr-words, .pr-replay-text, .pp-daily-quote p) { font-family: var(--type-font, var(--mono)); }
:root.hide-live .typing-area .metrics { display: none; }
:root.word-speed .typing-text .word[data-wpm] { position: relative; }
:root.word-speed .typing-text .word[data-wpm]::after {
  content: attr(data-wpm); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  font: 600 0.62rem/1 var(--mono); color: var(--primary); opacity: 0.85; pointer-events: none; white-space: nowrap;
}

/* ---- keyboard styles: shape everywhere; colours only on the plain keyboard (finger colours keep theirs) */
:root .keyboard-wrap.kbs-mech .kb .kb-key { border-radius: 7px; border-bottom-width: 5px; font-weight: 700; box-shadow: 0 3px 0 rgb(0 0 0 / 0.35); }
:root .keyboard-wrap.kbs-mech.kb-plain .kb .kb-key { background: linear-gradient(#3b4062, #262a44); color: #e9ebff; border-color: #14172a; }
:root .keyboard-wrap.kbs-neon .kb .kb-key { border: 1.5px solid var(--primary); border-radius: 10px; box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--primary) 25%, transparent); }
:root .keyboard-wrap.kbs-neon.kb-plain .kb .kb-key { background: transparent; color: var(--primary); text-shadow: 0 0 6px var(--primary); }
:root .keyboard-wrap.kbs-holo .kb .kb-key { border-radius: 12px; border-color: rgb(255 255 255 / 0.5); }
:root .keyboard-wrap.kbs-holo.kb-plain .kb .kb-key {
  background: linear-gradient(135deg, #ffb3ec, #a9dcff 35%, #b9ffe0 65%, #ffe9a8) 0 0 / 300% 300%; color: #1b1340;
  animation: holo-shift 8s ease-in-out infinite alternate;
}
@keyframes holo-shift { to { background-position: 100% 100%; } }
:root .keyboard-wrap.kbs-retro .kb .kb-key { border-radius: 4px; border-bottom-width: 4px; font-family: "Courier New", Courier, monospace; font-weight: 700; }
:root .keyboard-wrap.kbs-retro.kb-plain .kb .kb-key { background: #e9dec6; color: #4a3b2a; border-color: #b4a382; box-shadow: none; }
:root .keyboard-wrap.kbs-terminal .kb .kb-key { border-radius: 2px; font-family: ui-monospace, Consolas, monospace; }
:root .keyboard-wrap.kbs-terminal.kb-plain .kb .kb-key { background: #021a0c; color: #39ff88; border-color: #0f5c2e; text-shadow: 0 0 6px #39ff88; box-shadow: none; }
:root .keyboard-wrap.kbs-flat .kb .kb-key { border: 0; border-radius: 10px; box-shadow: none; }
:root .keyboard-wrap.kbs-flat.kb-plain .kb .kb-key { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }

/* ---- story scenes */
#ks-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#ks-scene .sc-svg { width: 100%; height: 100%; display: block; }
:is(#ks-scene, .sc-thumb) :is([data-path], [data-shift], [data-grow], [data-glow]) { transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.7s; }
:is(#ks-scene, .sc-thumb) [data-grow] { transform-box: fill-box; transform-origin: 50% 100%; }
.sc-caption {
  position: fixed; left: 16px; bottom: 14px; padding: 6px 12px; border-radius: 999px; font-size: 0.8rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);

}
:root[data-ks-story] :is(.card, .typing-area, .results, .stat, .lesson-card, .home-hero, .hero, .test-form, .topbar, .kt-card, .gm-card, .chart-wrap, .today-item, .badge, .page > .table) {
  background-color: var(--surface); /* solid, not frosted: text on a blurred layer renders soft */
}
.sc-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; }
.sc-thumb svg { width: 100%; height: 100%; display: block; }
.sc-thumb * { animation: none !important; }
.sc-default { background: radial-gradient(60% 70% at 20% 10%, rgb(47 230 255 / 0.4), transparent), radial-gradient(60% 70% at 85% 10%, rgb(124 108 255 / 0.55), transparent), #04050f; }
.kt-story .sc-thumb { margin-bottom: 6px; }
.kt-blurb { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 4px; text-align: left; }

#ks-scene .sc-twinkle { animation: sc-twinkle 3.5s ease-in-out infinite alternate; }
#ks-scene .sc-blink { animation: sc-twinkle 1.4s steps(2) infinite; }
#ks-scene .sc-pulse { animation: sc-twinkle 2.2s ease-in-out infinite alternate; }
#ks-scene .sc-flicker { animation: sc-flicker 4s linear infinite; }
#ks-scene .sc-bob { animation: sc-bob 3.2s ease-in-out infinite alternate; }
#ks-scene .sc-sway { animation: sc-sway 2.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
#ks-scene .sc-rain { animation: sc-rain 0.7s linear infinite; }
#ks-scene .sc-snow { animation: sc-snow 14s linear infinite; }
#ks-scene .sc-bubbles { animation: sc-rise 6s linear infinite; }
#ks-scene :is(.sc-drift, .sc-dust) { animation: sc-drift 18s ease-in-out infinite alternate; }
#ks-scene .sc-wave { animation: sc-drift 12s ease-in-out infinite alternate; }
@keyframes sc-twinkle { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes sc-flicker { 0%, 46%, 50%, 100% { opacity: 1; } 48% { opacity: 0.3; } }
@keyframes sc-bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes sc-sway { from { transform: skewX(-6deg); } to { transform: skewX(6deg); } }
@keyframes sc-rain { from { transform: translateY(-120px); } to { transform: translateY(0); } }
@keyframes sc-snow { from { transform: translateY(-900px); } to { transform: translateY(0); } }
@keyframes sc-rise { from { transform: translateY(40px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-260px); opacity: 0; } }
@keyframes sc-drift { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
@media (prefers-reduced-motion: reduce) { #ks-scene *, .keyboard-wrap .kb-key { animation: none !important; transition: none !important; } }
:root.contrast #ks-scene { display: none; }
@media (max-width: 600px) { .sc-caption { display: none; } .tb-fonts, .tb-choices.tb-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }