/*!
 * Typing Tutor — passage, virtual keyboard and overlay styling.
 * India Study Institute. SRS §14, §15, §33.
 *
 * Served as a plain stylesheet rather than through Vite: the engine it belongs
 * to is a standalone script for CSP reasons (see typing-engine.js), and keeping
 * the pair together means one place to look.
 *
 * Colour is never the only signal (SRS §33 — colour-blind friendly): a correct
 * character is also underlined, a wrong one is also boxed, and the cursor has a
 * solid left edge. Someone who cannot separate the red from the green can still
 * read the state.
 */

/* ------------------------------------------------------------------ passage */

.typing-passage {
    /*
     * `normal`, NOT pre-wrap, and NOT word-break: break-word.
     *
     * The passage is one span per character. With break-word the browser may wrap
     * at any character, so a word splits across two lines and the whole passage
     * reads as loose letters instead of words — which makes a learner read
     * character by character and type worse. Words are grouped in .typing-word
     * below and the line breaks at the spaces between them, as prose should.
     */
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;

    /* Monospace keeps the caret aligned under the character being typed, which is
       the point of it here. The size and generous line height are what make it
       read as text rather than as a grid of glyphs. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 1.35rem;
    line-height: 2.1;
    letter-spacing: .01em;

    max-height: 40vh;
    overflow-y: auto;
    padding: .75rem 1rem;
    background: #fbfbfd;
    border-radius: .375rem;
    scroll-behavior: smooth;
}

/* One word, never split across lines. */
.typing-word {
    display: inline-block;
    white-space: nowrap;
}

.typing-char {
    border-radius: 2px;
    transition: background-color 60ms linear;
}

/*
 * The gap between words. A span holding only a space collapses to nothing under
 * `white-space: normal`, so the space is preserved explicitly and given a width —
 * otherwise the caret vanishes between every word. Kept modest: too wide and the
 * words drift apart again, which is the problem this file exists to fix.
 */
.typing-char-space {
    display: inline-block;
    white-space: pre;
    min-width: .38em;
}

.typing-char.is-correct {
    color: #146c43;
    text-decoration: underline;
    text-decoration-color: rgba(20, 108, 67, .35);
}

.typing-char.is-wrong {
    color: #b02a37;
    background-color: rgba(220, 53, 69, .14);
    box-shadow: inset 0 0 0 1px rgba(176, 42, 55, .45);
}

.typing-char.is-current {
    background-color: rgba(13, 110, 253, .16);
    box-shadow: inset 2px 0 0 #0d6efd;
}

@media (prefers-reduced-motion: reduce) {
    .typing-passage { scroll-behavior: auto; }
    .typing-char { transition: none; }
}

/* --------------------------------------------------------- virtual keyboard */

[data-typing-keyboard] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    /* The keyboard is fixed-aspect and wide; on a narrow screen it scrolls
       inside its own box rather than making the whole page scroll sideways. */
    overflow-x: auto;
    padding-bottom: .25rem;
}

.tk-main,
.tk-numpad {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
}

.tk-numpad {
    display: grid;
    grid-auto-flow: row;
    gap: 4px;
}

.tk-row {
    display: flex;
    gap: 4px;
}

.tk-key {
    --tk-w: 1;
    --tk-h: 1;

    position: relative;
    box-sizing: border-box;
    width: calc(var(--tk-w) * 2.35rem);
    height: calc(var(--tk-h) * 2.35rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    line-height: 1;
    color: #333;
    background: #f4f4f6;
    border: 1px solid #d6d6dd;
    border-bottom-width: 2px;
    border-radius: .3rem;
    user-select: none;
}

.tk-label {
    font-weight: 600;
}

.tk-shift {
    font-size: .6rem;
    opacity: .6;
    line-height: 1;
}

/* The raised bumps on F, J and numpad 5 — the whole point of the home row is
   finding them without looking, so the diagram shows them. */
.tk-bump::after {
    content: "";
    position: absolute;
    bottom: 5px;
    width: 10px;
    height: 2px;
    background: #9a9aa5;
    border-radius: 1px;
}

.tk-home {
    background: #eef2ff;
}

/* State: expected next key. Outline plus a weight change, so it is not
   colour alone. */
.tk-key.is-expected {
    background: #0d6efd;
    border-color: #0a58ca;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, .3);
}

.tk-key.is-shift-expected {
    background: #cfe2ff;
    border-color: #9ec5fe;
    color: #084298;
}

.tk-key.is-pressed {
    background: #198754;
    border-color: #146c43;
    color: #fff;
    transform: translateY(1px);
}

.tk-key.is-wrong {
    background: #dc3545;
    border-color: #b02a37;
    color: #fff;
    transform: translateY(1px);
}

/* ------------------------------------------------------------------ overlay */

.typing-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 20, .72);
    padding: 1rem;
}

.typing-overlay[hidden] {
    display: none;
}

.typing-overlay-box {
    background: #fff;
    border-radius: .5rem;
    padding: 1.5rem;
    max-width: 30rem;
    text-align: center;
}

/* ---------------------------------------------------------------- sidebar */

.typing-syllabus .list-group-item {
    border-left: 0;
    border-right: 0;
}

/* ------------------------------------------- distraction-free module chrome */

/*
 * Used by public_items/layouts/typing.blade.php, which drops the site navbar and
 * footer for this module. See that file for why.
 */
.typing-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid #e5e5ea;
}

.typing-topbar-logo {
    height: 32px;
    width: auto;
}

.typing-topbar-title {
    color: #212529;
}

.typing-main {
    /* The public layout pushed content down for a fixed navbar that is not here. */
    padding-top: .5rem;
    padding-bottom: 2rem;
}

/* ------------------------------------------------------------- small screens */

@media (max-width: 575.98px) {
    .tk-key {
        width: calc(var(--tk-w) * 1.9rem);
        height: calc(var(--tk-h) * 1.9rem);
        font-size: .65rem;
    }

    .typing-passage {
        font-size: 1.15rem;
        line-height: 1.9;
    }

    .typing-topbar-title {
        font-size: .95rem;
    }
}