/* ============================================
   THEORY PAGES — DEDICATED STYLESHEET
   Load after base.css and style.css
   ============================================ */

/* ============================================
   VARIABLE OVERRIDES
   ============================================ */

:root {
    /* Near-neutral dark base — more "music software", less "portfolio" */
    --black: #181818;

    /* Accessible green for correct/success states
       --green-500 (#7A8C47) and --green-600 (#5E6D36) fail contrast 
       on dark backgrounds at small sizes. This clears 4.5:1. */
    --theory-correct:   #8BB836;
    --theory-incorrect: var(--red-400); /* #C44425 — already passes */

    /* Accessible secondary text
       --gray-500 (#7A6D5E) is ~3.4:1 on dark bg — fails for small text.
       This value clears 4.5:1 against #181818. */
    --theory-muted: #A89880;

    /* Spacing scale — used throughout trainer components */
    --space-xs:  6px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;
}

/* ============================================
   FOCUS — WCAG 2.4.7 (Focus Visible)
   Absent from base and style — required everywhere
   ============================================ */

:focus-visible {
    outline: 2px solid var(--cyan-400);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Wider ring on canvases — they're the primary interaction target */
canvas:focus-visible {
    outline: 3px solid var(--cyan-400);
    outline-offset: 4px;
    border-radius: 6px;
}

/* ============================================
   BUTTONS — tighter radius, lowercase, Bauhaus
   Overrides .btn from style.css
   ============================================ */

.btn {
    padding: 10px 22px;
    font-size: 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.04em;
    text-transform: lowercase;
}

.btn:active {
    transform: translateY(1px);
}

.btn-submit {
    background: var(--cyan-500);
    color: var(--white);
}

.btn-submit:hover {
    background: var(--cyan-400);
}

.btn-clear {
    background: transparent;
    color: var(--gray-400);
    border: 1px solid var(--gray-600);
}

.btn-clear:hover {
    background: var(--gray-800);
    border-color: var(--gray-500);
}

.btn-new {
    background: transparent;
    color: var(--gray-400);
    border: 1px solid var(--gray-700);
}

.btn-new:hover {
    background: var(--gray-900);
    border-color: var(--gray-600);
}

/* ============================================
   TRAINER CONTAINER
   Overrides .transparent for theory exercises
   ============================================ */

.transparent.trainer-container {
    background: rgba(24, 24, 24, 0.97);
    border: 1px solid var(--gray-700);
    border-top: 3px solid var(--cyan-500); /* Bauhaus accent stripe */
    border-radius: 4px;
    padding: var(--space-lg) var(--space-md);
    box-shadow: none;
}

/* ============================================
   SCORE & STREAK DISPLAY
   ============================================ */

.score {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--theory-muted);
    margin-bottom: var(--space-md);
}

/* The live number values pop with white */
.score span {
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
}

/* ============================================
   RESULT FEEDBACK
   Requires aria-live="polite" aria-atomic="true" on the element
   ============================================ */

.result.correct {
    color: var(--theory-correct);
}

.result.incorrect {
    color: var(--theory-incorrect);
}

/* ============================================
   CANVAS / STAFF
   ============================================ */

canvas {
    border: 1px solid var(--gray-700);
    border-radius: 4px;
    background: #F8F6F3;
    cursor: crosshair;
}

/* Keyboard navigation hint shown below interactive canvases */
.canvas-hint {
    text-align: center;
    font-size: 11px;
    color: var(--gray-600);
    letter-spacing: 0.06em;
    margin-top: 4px;
    text-transform: lowercase;
}

/* ============================================
   PIANO KEYBOARD — accessible highlight
   Replaces green-600 (#5E6D36) which fails contrast
   ============================================ */

.white-key.highlighted {
    background: var(--theory-correct) !important;
}

.black-key.highlighted {
    background: color-mix(in srgb, var(--theory-correct) 70%, #000) !important;
}

.white-key.highlighted .key-label {
    color: #1a1a1a;
    font-size: 13px;
}

/* ============================================
   ACCIDENTAL BUTTONS
   ============================================ */

.acc-btn {
    background: var(--gray-800);
    color: var(--white);
    border: 1px solid var(--gray-700);
    border-radius: 3px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.15s ease;
    line-height: 1;
    min-width: 40px;
    text-align: center;
}

.acc-btn:hover {
    background: var(--gray-700);
}

.acc-btn.selected,
.acc-btn[aria-pressed="true"] {
    background: var(--cyan-500);
    border-color: var(--cyan-400);
    color: var(--white);
}

/* ============================================
   MODALS — WCAG 4.1.2
   HTML must include: role="dialog" aria-modal="true" aria-labelledby="[h2-id]"
   JS must: move focus in on open, trap focus, restore on close
   ============================================ */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: #1E1E1E;
    border: 1px solid var(--gray-600);
    border-top: 3px solid var(--cyan-500);
    border-radius: 4px;
    padding: var(--space-lg);
    text-align: center;
    max-width: 420px;
    width: 90%;
}

.modal-content h2 {
    color: var(--white);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    margin-bottom: var(--space-sm);
}

.modal-content p {
    color: var(--theory-muted);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.btn-keep {
    background: transparent;
    color: var(--gray-400);
    border: 1px solid var(--gray-600);
    border-radius: 3px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-keep:hover {
    background: var(--gray-800);
}

.btn-next {
    background: var(--cyan-500);
    color: var(--white);
    border: none;
    border-radius: 3px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-next:hover {
    background: var(--cyan-400);
}

/* Submission code — must be a <button> in HTML, not a <div> */
.code-display {
    display: block;
    width: 100%;
    background: var(--gray-900);
    border: 1px solid var(--gray-600);
    border-radius: 3px;
    padding: var(--space-sm) var(--space-md);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 18px;
    color: var(--cyan-400);
    cursor: pointer;
    word-break: break-all;
    margin: var(--space-sm) 0;
    text-align: center;
    transition: background-color 0.15s ease;
    letter-spacing: 0.05em;
}

.code-display:hover {
    background: var(--gray-800);
}

.copy-hint {
    font-size: 13px;
    color: var(--theory-muted);
    margin-top: -6px;
}

.copy-hint.copied {
    color: var(--theory-correct);
}

/* ============================================
   SCREEN READER UTILITIES — WCAG 1.3.1, 4.1.3
   ============================================ */

/* Visually hidden but accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   MOBILE OVERRIDES
   ============================================ */

@media (max-width: 768px) {
    .transparent.trainer-container {
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top-width: 2px;
        padding: var(--space-md) var(--space-sm);
    }

    .modal-content {
        border-radius: 4px;
    }

    .btn {
        padding: 10px 16px;
        font-size: 14px;
    }

    .score {
        font-size: 12px;
    }
}