/* Cross-theme accessibility corrections discovered by the audit.
   Loaded after style.css so semantic token corrections stay small and easy to
   remove/fold into the base stylesheet during a later local cleanup. */

:root {
    /* Keep a visible hierarchy below --text-muted (#526777) while meeting
       4.5:1 even on the light theme's darkest common surface (#e7edf2). */
    --text-subtle: #5c6d7c;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Existing dark value already has sufficient contrast; preserve it. */
        --text-subtle: #8193a2;
    }
}

@media (prefers-contrast: more) {
    :root {
        --text-subtle: var(--text);
    }
}

/* --accent-text is the foreground for an accent-colored surface. These
   disclosures and the learning-summary eyebrow live on ordinary surfaces, so
   they must use ordinary text tokens in both light and dark themes. */
.random-intro__details > summary,
.choice-explanation-others > summary {
    color: var(--text);
}

.learning-summary__eyebrow {
    color: var(--text-muted);
}

.random-intro__details > summary:focus-visible,
.choice-explanation-others > summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Compact tag groups remain native disclosures on desktop as well as mobile.
   Do not leave <summary> keyboard-operable while disabling only pointer input. */
.tag-tree-group--disclosure > summary {
    pointer-events: auto;
    cursor: pointer;
}

.tag-tree-group--disclosure > summary::before {
    content: "▸";
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.tag-tree-group--disclosure[open] > summary::before {
    content: "▾";
}

.tag-tree-group--disclosure > summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Human-facing headings and link labels should wrap at natural boundaries.
   Long machine-like tokens still get an emergency break where overflow would
   otherwise escape the viewport. */
main h1,
main h2,
main h3 {
    overflow-wrap: normal;
    word-break: normal;
}

.explanation-content a {
    word-break: normal;
    overflow-wrap: break-word;
}

.explanation-content code {
    overflow-wrap: anywhere;
    word-break: break-word;
}