/* --- Basic Setup (Zenburn Palette) --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    /* Main Zenburn background and text */
    background-color: #3f3f3f;
    color: #dcdccc;
    font-size: 1.2rem;
    padding: 1em;
}

main {
    max-width: min(80%, 60ch);
    margin: 2rem auto;
}

/* --- 1. Controls Styling --- */
#controls {
    /* Slightly lighter bg for controls */
    background: #4f4f4f;
    border: 1px solid #6f6f6f;
    border-radius: 0.25rem;
    padding: 1em 1.5em;
    /* position: sticky; */
    /* top: 10px; */
    /* z-index: 100; */
}
#controls h3 {
    margin-top: 0;
    color: #f0dfaf; /* Zenburn Yellow for heading */
}
#controls label {
    display: inline-block;
    margin-right: 2em;
    cursor: pointer;
}

/* --- 2. Text Elements Styling --- */
.narrator, .speaker {
    padding: 0.5em;
    margin-bottom: 0.5em;
    border-radius: 0.25rem;
    /* Smooth transition for when styles are added/removed */
    transition: all 1s ease-in-out;
}

/* --- 3. Speaker Default Styling (Before Toggle) --- */

/* External (normal) narration */
.narrator.external, .speaker {
    border-left: 0.5rem solid #6f6f6f; /* Muted grey */
}

/* Internal narration (thoughts) */
.narrator.internal {
    font-style: italic;
    color: #9fafaf; /* Grey-cyan */
    background: #4a4a4a;
    border-left: 0.5rem solid #7f9f7f; /* Zenburn Comment Green */
}

/* Speaker default styles (plain) */
.speaker {
    /* Base style for all speakers */
}
.speaker.nnedi { }
.speaker.nahsequa { } /* Fixed typo */
.speaker.martin { }
.speaker.malik { }
.speaker.michael { }
.speaker.omar { }
.speaker.maria { }
.speaker.abdi { }
.speaker.fancy-hair { }
.speaker.bolt { }
.speaker.heart { }

/* Graphics default style */
.graphic {
    display: none;
}

/* --- 4. Speaker STYLED (Toggled ON) --- */
/* These styles ONLY apply if the body has the 'show-speakers' class */

/* Base style for all speakers when highlighted */
body.show-speakers .speaker {
    color: #dcdccc;
    background-color: #4a4a4a;
    padding: 0 0 0 1em;
    margin-bottom: 0.5em;    
}

body.show-speakers .speaker.nnedi {
    border-left: 0.5rem solid #8cd0d3; /* Zenburn Blue */
}

body.show-speakers .speaker.nahsequa { /* Fixed typo */
    border-left: 0.5rem solid #cc9393; /* Zenburn Red */
}

body.show-speakers .speaker.malik {
    border-left: 0.5rem solid #8cd0a3; /* Muted Green */
}

body.show-speakers .speaker.martin {
    border-left: 0.5rem solid #dc8cc3; /* Zenburn Purple */
}

body.show-speakers .speaker.michael {
    border-left: 0.5rem solid #93e0e3; /* Cyan */
}

body.show-speakers .speaker.omar {
    border-left: 0.5rem solid #f0a0a0; /* Orange */
}

body.show-speakers .speaker.maria {
    border-left: 0.5rem solid #b3b393; /* Light Green */
}

body.show-speakers .speaker.abdi {
    border-left: 0.5rem solid #f0dfaf; /* Zenburn Yellow */
}

body.show-speakers .speaker.fancy-hair {
    border-left: 0.5rem solid #cc9393; /* Zenburn Red (same as nahsequa) */
}

body.show-speakers .speaker.bolt {
    border-left: 0.5rem solid #8cd0d3; /* Zenburn Blue (same as nnedi) */
}

body.show-speakers .speaker.heart {
    border-left: 0.5rem solid #dc8cc3; /* Zenburn Purple (same as martin) */
}


/* --- 4b. Speaker Name Labels (Toggled ON) --- */
/* These also only appear when 'show-speakers' is active */


body.show-speakers .narrator.internal::before {
    content: "Narrator (thinking): ";
    font-weight: bold;
    margin-right: 0.4em;
}

body.show-speakers .narrator.external::before {
    content: "Narrator: ";
    font-weight: bold;
    margin-right: 0.4em;
}

body.show-speakers .speaker.nnedi::before {
    content: "Nnedi: ";
    font-weight: bold;
    margin-right: 0.4em;
}

body.show-speakers .speaker.nahsequa::before {
    content: "NahSequa: ";
    font-weight: bold;
    margin-right: 0.4em;
}

body.show-speakers .speaker.malik::before {
    content: "Malik: ";
    font-weight: bold;
    margin-right: 0.4em;
}

body.show-speakers .speaker.martin::before {
    content: "Martin: ";
    font-weight: bold;
    margin-right: 0.4em;
}

body.show-speakers .speaker.michael::before {
    content: "Michael: ";
    font-weight: bold;
    margin-right: 0.4em;
}

body.show-speakers .speaker.omar::before {
    content: "Omar: ";
    font-weight: bold;
    margin-right: 0.4em;
}

body.show-speakers .speaker.maria::before {
    content: "Maria: ";
    font-weight: bold;
    margin-right: 0.4em;
}

body.show-speakers .speaker.abdi::before {
    content: "Abdi: ";
    font-weight: bold;
    margin-right: 0.4em;
}

body.show-speakers .speaker.fancy-hair::before {
    content: "Ms. Fancy Hair: ";
    font-weight: bold;
    margin-right: 0.4em;
}

body.show-speakers .speaker.bolt::before {
    content: "Mr. Bolt: ";
    font-weight: bold;
    margin-right: 0.4em;
}

body.show-speakers .speaker.heart::before {
    content: "Mx Heart: ";
    font-weight: bold;
    margin-right: 0.4em;
}

/* --- 5. Annotation Styling --- */

/* The word to be annotated */
.term {
    text-decoration: underline dotted #f0dfaf; /* Zenburn Yellow */
    cursor: help;
}

/* The annotation content itself (HIDDEN BY DEFAULT) */
.annotation {
    display: none;
}

/* --- 6. Annotation STYLED (Toggled ON) --- */
/* These styles ONLY apply if the body has the corresponding class */

/* Vocabulary Toggle (English) */
body.show-vocab-en .annotation.vocab-en {
    display: inline;
    font-size: 1em;
    font-weight: normal;
    color: #3f3f3f; /* Dark text for high contrast */
    background-color: #f0dfaf; /* Zenburn Yellow */
    padding: 0.1em 0.4em;
    border-radius: 4px;
    margin-left: 0.5em;
}

/* Vocabulary Toggle (Spanish) */
body.show-vocab-es .annotation.vocab-es {
    display: inline;
    font-size: 1em;
    font-weight: normal;
    color: #3f3f3f; /* Dark text for high contrast */
    background-color: #f0a0a0; /* Zenburn Orange */
    padding: 0.1em 0.4em;
    border-radius: 4px;
    margin-left: 0.5em;
}

/* Explanation Toggle (English) */
body.show-explanation-en .annotation.explanation-en {
    display: block; /* Makes it appear on its own line */
    font-size: 1em;
    font-style: italic;
    color: #dcdccc;
    background-color: #4a594a; /* Dark green background */
    border: 1px dashed #7f9f7f; /* Zenburn Comment Green */
    padding: 0.5em;
    margin-top: 0.5em;
}

/* Explanation Toggle (Spanish) */
body.show-explanation-es .annotation.explanation-es {
    display: block; /* Makes it appear on its own line */
    font-size: 1em;
    font-style: italic;
    color: #dcdccc;
    background-color: #4a4a5f; /* Dark blue background */
    border: 1px dashed #8cd0d3; /* Zenburn Blue */
    padding: 0.5em;
    margin-top: 0.5em;
}

/* Image Toggle) */
body.show-graphics .graphic {
    display: block;
    background-color: #4a4a5f; /* Dark blue background */
    border: 1px solid #8cd0d3; /* Zenburn Blue */
    padding: 0.25em;
    margin: 0.25em;
}

.graphic img {
    max-width: 50%;
    max-height: 50%;
}

/* --- 7. Details Sections --- */

.details.speaking {
    display: none;
    background: #4a4a4a;
    border: 1px solid #6f6f6f;
    border-radius: 8px;
    padding: 0.5em 1.5em;
}

body.show-speaker-list .details.speaking {
    display: block;
}


/* --- 9. Chunking / Collapsible Sections --- */

/* --- DEFAULT (Chunking OFF) --- */

/* 1. Hide the chunk trigger by default */
.chunk-trigger {
    display: none;
}

/* 2. The content is visible by default */
.chunk-content {
    display: block;
    /* Remove chunk-specific styling */
    border-left: none;
    padding-left: 0;
    margin-top: 0;
}

/* --- CHUNKING ON (body.show-chunking) --- */

/* 1. Show the chunk trigger when chunking is on */
body.show-chunking .chunk-trigger {
    display: block;
    cursor: pointer;
    color: #f0dfaf; 
    font-size: 1.5rem;
    margin-top: 2rem;
    position: relative;
    padding-left: 1.2em; /* This can stay 'em' to scale with the trigger's font-size */
}

/* 2. Add the '►' (closed) icon */
body.show-chunking .chunk-trigger::before {
    content: '►';
    position: absolute;
    left: 0;
    top: 0.1em;
    font-size: 0.8em;
}

/* 3. Hide the content by default when chunking is on */
body.show-chunking .chunk-content {
    display: none;
    
    /* Add back the "inside" styling */
    border-left: 3px solid #6f6f6f;
    padding-left: 1.5rem; /* Use rem for layout padding */
    margin-top: 1rem;
}

/* 4. Change icon when chunk is open */
body.show-chunking .chunk.chunk-open .chunk-trigger::before {
    content: '▼';
}

/* 5. Show content when chunk is open */
body.show-chunking .chunk.chunk-open .chunk-content {
    display: block;
}

/* --- 10. Accessibility Focus --- */

/* Style for any element that is focused by keyboard */
:focus-visible {
    outline: 0.2rem solid #f0dfaf; /* Zenburn Yellow */
    outline-offset: 0.2rem;
}

p.switcher {
    margin: 0;
}


/*
=================================================================
   PRINT STYLESHEET
   This only applies when the user prints the page.
=================================================================
*/

@media print {

    /* --- 1. Basic Page Setup --- */
    body {
        /* Use a standard serif font for printed text */
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 12pt;
        /* Force black text on a white background */
        color: #000 !important;
        background-color: #fff !important;
    }

    /* --- 2. Hide Unnecessary UI --- */
    /* Hide the entire controls panel */
    #controls {
        display: none !important;
    }

    /* --- 3. Reset Main Layout --- */
    main {
        /* Let the text flow to the full page width */
        max-width: none;
        width: 100%;
        margin: 0;
    }

    /* --- 4. Reset Speaker/Narrator Styles --- */
    /* Remove all borders, backgrounds, and padding */
    .narrator, .speaker {
        background-color: #fff !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 0.5em;
    }

    /* Make sure speaker names (if toggled on) are black */
    body.show-speakers .speaker::before,
    body.show-speakers .narrator::before {
        color: #000 !important;
    }

    /* --- 5. Clean Up Annotations (if toggled on) --- */
    .annotation {
        /* Just make them italic, no background */
        font-style: italic;
        color: #000 !important;
        background-color: #fff !important;
    }

    .annotation.explanation-en,
    .annotation.explanation-es {
        /* For explanations, put them in a simple box */
        border: 1px solid #ccc;
        background-color: #f9f9f9 !important;
        padding: 0.5em;
    }

    /* --- 6. Clean Up Chunks (if toggled on) --- */
    .chunk-trigger {
        /* Make chunk triggers simple black headings */
        color: #000 !important;
        font-size: 1.5rem;
        margin-top: 1.5rem;
    }
    .chunk-content {
        /* Remove the chunk border */
        border: none !important;
        padding-left: 0;
    }

    /* --- 7. Make Links Printable --- */
    /* Show the full URL in parentheses after any link */
    a[href]::after {
        content: " (" attr(href) ")";
    }
}