/* ============================================
   WORKSHOP SHELL — driller picker + back chrome
   ============================================ */

.wk-picker {
    display: flex;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
}

/* One or two suggested mini-game sessions (grammar and/or vocabulary —
   see engine/recommend.js), ahead of the picker list — patched in
   asynchronously once Recommend.recommend() resolves (see
   Workshop.render()), so it can appear a beat after the picker itself
   rather than blocking it. Same bordered-card language as Home's
   .hm-continue, since both answer the same question ("what should I do
   right now?"). Not itself a button — .wk-recommend-actions holds up to
   two independent action buttons instead of one whole-card click, since
   either half (or both) may be present. */
.wk-recommend {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 20px;
    text-align: left;
    background: var(--bg);
    border: 1px solid var(--accent-dark);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
}

.wk-recommend-eyebrow {
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--accent-dark);
    font-weight: 600;
    margin-bottom: 6px;
}

.wk-recommend-body {
    font-size: 15px;
    color: var(--text);
    line-height: 1.4;
}

.wk-recommend-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

.wk-recommend-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-dark);
    cursor: pointer;
}

.wk-recommend-btn:hover {
    text-decoration: underline;
}

/* Shared "what's next" action mounted at the end of every driller's
   results screen, and (since 2026-09-11) lessons.js's/srs.js's own
   completion summaries too — see RecommendationEngine.mountNextAction() in
   engine/recommendationEngine.js. Same bordered-card language as
   .wk-recommend above (both answer "what should I do right now?"), but
   sits at the END of a screen the learner is about to leave rather than
   the top of one they just entered. */
.wk-next-action {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    margin: 20px auto 0;
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.wk-next-eyebrow {
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 6px;
}

.wk-next-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-dark);
    cursor: pointer;
}

.wk-next-btn:hover {
    text-decoration: underline;
}

.wk-next-sub {
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
}

/* Open rows divided by hairlines, matching the Lessons list — see the note
   on .level-card in styles/layout.css. */
.wk-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 4px;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-standard);
}

.wk-card:last-child {
    border-bottom: none;
}

.wk-card:hover .wk-card-title {
    color: var(--accent-dark);
}

.wk-card:hover .wk-card-arrow,
.wk-card:focus-visible .wk-card-arrow {
    background: var(--accent-dark);
    transform: translateX(3px);
}

.wk-card-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.wk-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.wk-card-title {
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--text);
}

.wk-card-sub {
    font-size: 13px;
    color: var(--muted);
}

.wk-card-arrow {
    --geo-size: 12px;
    flex: none;
    background: var(--muted);
    transition: transform var(--dur-fast) var(--ease-standard),
                background var(--dur-fast) var(--ease-standard);
}

.wk-back {
    display: inline-block;
    margin: 12px 0 4px 16px;
    font-size: 14px;
    color: var(--primary-mid);
    background: none;
    border: none;
    cursor: pointer;
}

.wk-back:hover {
    color: var(--primary);
}

/* ============================================
   GRAMMAR DRILLER
   ============================================ */

.gd-loading,
.gd-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--muted);
}

.gd-settings {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px;
}

.gd-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--primary);
    margin-bottom: 16px;
}

.gd-setting {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.gd-setting label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.gd-hint {
    font-size: 0.85rem;
    color: var(--muted);
    margin: -8px 0 16px;
}

/* ---- Session HUD ---- */
.gd-hud {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 480px;
    margin: 0 auto 16px;
    padding: 0 16px;
}

.gd-hud-score {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.gd-hud .vspeed-timer-display {
    font-size: 1.1rem;
}

.gd-change-skill {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--primary-mid);
    background: none;
    border: none;
    cursor: pointer;
}

/* Tier 2 cross-link — same treatment as its Reader sibling
   (.wp-lesson-link), just matching this driller's own centred HUD width
   instead of theirs. Decks had the same link once too, but it was
   removed 2026-09-02 — decks stayed a straightforward review place. */
.gd-word-lesson-link {
    display: block;
    max-width: 480px;
    margin: -8px auto 16px;
    padding: 0 16px;
    text-align: left;
}

.gd-change-skill:hover {
    color: var(--primary);
}

.gd-exercise {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px 24px;
}

/* ---- Question / options (multiple-choice, dialogue-complete, sentence-order) ---- */
.gd-question {
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: 16px;
}

.gd-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

/* Bordered, rounded box with a fill-tint highlight for state — matches
   .lsn-option in styles/components.css. Reversed 2026-08-14. Background
   switched from --surface (pure white) to --bg (cream, matches the page)
   2026-08-19 — same "boxy white rectangle" issue the Home/Decks fix in
   6722cbe called out, just not caught there since that pass covered
   card/bar-scale fills, not exercise option buttons. Reads via its
   hairline border instead of a filled block now. .lsn-option and
   .lsn-tile (styles/components.css) had the exact same --surface fill and
   got the same fix on 2026-08-20. */
.gd-option {
    position: relative;
    padding: 12px 16px;
    text-align: left;
    font-size: 0.98rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    min-height: 48px;
    transition: color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                background-color var(--dur-fast) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard),
                opacity var(--dur-fast) var(--ease-standard);
}

.gd-option:hover {
    border-color: var(--primary-mid);
}

.gd-option.selected {
    border-color: var(--primary);
    border-width: 2px;
    background: rgba(16, 42, 71, 0.05);
    color: var(--primary);
}

.gd-option.correct {
    border-color: var(--success);
    background: var(--success-bg);
    color: var(--success);
    font-weight: 600;
}

.gd-option.correct::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    transform: translateY(-50%);
}

.gd-option.wrong {
    border-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
    opacity: .85;
    transform: translateX(-6px);
}

.gd-option.used {
    opacity: 0.55;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .gd-option.wrong {
        transform: none;
    }
}

/* ---- Dialogue-complete prompt ---- */
.gd-dialogue {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
}

.gd-dialogue-line {
    display: flex;
    gap: 8px;
    font-size: 0.95rem;
    padding: 4px 0;
}

.gd-dialogue-speaker {
    font-weight: 600;
    color: var(--muted);
    flex-shrink: 0;
}

/* ---- Fill-blank / error-correction ---- */
.gd-blank {
    display: inline-block;
    min-width: 2em;
    border-bottom: 2px solid var(--primary-mid);
    text-align: center;
}

.gd-broken-sentence {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 12px;
    font-style: italic;
}

.gd-input {
    width: 100%;
    padding: 12px 4px;
    font-size: 1rem;
    border: none;
    border-bottom: 2px solid var(--border);
    border-radius: 0;
    background: none;
    color: var(--text);
    min-height: 48px;
    margin-bottom: 8px;
}

.gd-input:focus {
    outline: none;
    border-bottom-color: var(--primary-mid);
}

.gd-input.gd-correct {
    border-bottom-color: var(--primary);
    color: var(--primary);
}

.gd-input.gd-wrong {
    border-bottom-style: dashed;
    border-bottom-color: var(--danger);
    color: var(--danger);
}

/* ---- Sentence builder ---- */
.gd-build-target {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 48px;
    padding: 10px;
    margin-bottom: 12px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
}

.gd-target-empty {
    color: var(--muted);
    font-size: 0.9rem;
    padding: 6px 4px;
}

.gd-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.gd-tile {
    padding: 8px 12px;
    font-size: 0.95rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}

.gd-tile.used {
    opacity: 0.35;
    cursor: default;
}

.gd-built {
    display: inline-block;
    font-size: 1.05rem;
    padding: 4px 2px;
}

.gd-built.gd-correct {
    color: var(--primary);
}

.gd-built.gd-wrong {
    color: var(--danger);
}

.gd-build-english {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 8px;
}

/* ---- Reveal (sentence-order, on failure) ---- */
.gd-reveal {
    margin: 8px 0;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text);
}

/* ---- Feedback / explanation ---- */
.gd-feedback {
    font-weight: 600;
    font-size: 0.95rem;
    min-height: 1.3em;
    margin: 10px 0;
}

/* Navy for correct, not green — see spec section 18 and .lsn-option's
   correctness treatment in components.css. */
.gd-feedback-correct {
    color: var(--primary);
}

.gd-feedback-wrong {
    color: var(--accent-dark);
}

.gd-explanation {
    font-size: 0.9rem;
    color: var(--muted);
    padding: 10px 12px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

/* A general reference on the grammar concept, not the per-word "why"
   .gd-explanation already gives — collapsed by default (native <details>,
   no extra JS) so it stays a step further away than the feedback itself. */
.gd-more-info {
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.gd-more-info summary {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}

.gd-more-info summary::marker {
    color: var(--muted);
}

.gd-more-info p {
    font-size: 0.9rem;
    color: var(--text);
    margin-top: 8px;
}

.gd-more-info-suffix {
    font-family: monospace;
    color: var(--muted) !important;
    font-size: 0.85rem !important;
}

.gd-more-info-example {
    font-style: italic;
}

.gd-more-info-example em {
    color: var(--muted);
    font-style: normal;
}

/* ---- Actions ---- */
.gd-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.gd-actions .vbtn {
    flex: 1;
}

/* ============================================
   TRANSLATION DRILLER
   ============================================ */

.td-source-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.td-source {
    font-size: 1.15rem;
    color: var(--text);
    margin-bottom: 16px;
}

.td-input {
    width: 100%;
    padding: 12px 4px;
    font-size: 1rem;
    border: none;
    border-bottom: 2px solid var(--border);
    border-radius: 0;
    background: none;
    color: var(--text);
    min-height: 48px;
    margin-bottom: 8px;
}

.td-input:focus {
    outline: none;
    border-bottom-color: var(--primary-mid);
}

.td-input:disabled {
    background: var(--bg);
    color: var(--muted);
}

.td-model-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.td-model {
    font-size: 1.05rem;
    color: var(--primary);
    margin-bottom: 12px;
}

.td-self-rate {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.td-self-rate .vbtn {
    flex: 1;
}

.td-self-rate.td-rated .vbtn {
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================
   LISTENING DRILLER
   ============================================
   Audio is the primary information source (PARLOUR_LISTENING_SPEC.md §3),
   so Play is the one prominent control on an otherwise quiet screen — the
   answer controls (.lr-answer, reused .gd-* classes) stay hidden until it's
   been pressed at least once. */

.lr-audio {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.lr-play-btn {
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.lr-play-btn:hover {
    background: var(--primary-dark);
}

.lr-answer {
    margin-bottom: 8px;
}

.lr-answer.hidden {
    display: none;
}

/* "reveal the transcript after the answer" (spec §3) — shown for every
   exercise kind, even the choice types where no Spanish text appeared
   anywhere before this point. */
.lr-reveal {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 8px;
}

.lr-transcript {
    font-size: 1.05rem;
    color: var(--primary);
    margin-bottom: 4px;
}

.lr-translation {
    font-size: 0.9rem;
    color: var(--muted);
}

@media (min-width: 600px) {
    .wk-picker,
    .gd-settings,
    .gd-hud,
    .gd-exercise {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Verb Driller's "What's this?" explainers (Tense / Definite toggles) —
   a small text link next to the toggle's own label, not a full button,
   since it's a secondary action next to the switch that actually does
   something. The expanded paragraph reuses .gd-hint's own type scale. */
.hv-info-link {
    display: inline;
    margin-left: 8px;
    padding: 0;
    border: none;
    background: none;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: underline;
    text-transform: none;
    letter-spacing: normal;
    color: var(--accent-dark);
    cursor: pointer;
}

.hv-info-link:hover {
    color: var(--accent);
}

.hv-info {
    margin: -4px 0 16px;
    padding: 10px 12px;
    border-left: 3px solid var(--primary-mid);
    background: var(--bg);
}