/* --- Basic Setup (Light Theme) --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    /* Light "ivory" background and dark text */
    background-color: #fffff0;
    color: #333;
    font-size: 1.2rem;
    padding: 1rem;
}

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

/* --- 1. Controls Styling --- */
#controls {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    padding: 1em 1.5em;
}
#controls h3 {
    margin-top: 0;
    color: #005a9e; /* Dark Blue */
}
#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;
    transition: all 1s ease-in-out;
}

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

.narrator.external, .speaker {
    border-left: 0.5rem solid #ccc; /* Medium Grey */
}

.narrator.internal {
    font-style: italic;
    color: #555;
    background: #f5f5f5; /* Light grey background */
    border-left: 0.5rem solid #aaa; /* Darker grey */
}

/* Speaker default styles (plain) */
.speaker {
    /* Base style for all speakers */
}
.speaker.nnedi { }
.speaker.nahsequa { }
.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 */

body.show-speakers .speaker {
    color: #333;
    background-color: #f9f9f9;
    padding: 0 0 0 1em;
    margin-bottom: 0.5em;    
}

/* Using a new, bright, high-contrast color palette */
body.show-speakers .speaker.nnedi {
    border-left: 0.5rem solid #007acc; /* Bright Blue */
}

body.show-speakers .speaker.nahsequa {
    border-left: 0.5rem solid #d13438; /* Strong Red */
}

body.show-speakers .speaker.malik {
    border-left: 0.5rem solid #107c10; /* Dark Green */
}

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

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

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

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

body.show-speakers .speaker.abdi {
    border-left: 0.5rem solid #e6a700; /* Gold */
}

body.show-speakers .speaker.fancy-hair {
    border-left: 0.5rem solid #d13438; /* Strong Red */
}

body.show-speakers .speaker.bolt {
    border-left: 0.5rem solid #007acc; /* Bright Blue */
}

body.show-speakers .speaker.heart {
    border-left: 0.5rem solid #5c2d91; /* Strong Purple */
}


/* --- 4b. Speaker Name Labels (Toggled ON) --- */
/* (These just inherit the color, so no changes needed) */

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;
}
/* (All other speaker ::before rules are unchanged) */
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 --- */

.term {
    text-decoration: underline dotted #007acc; /* Bright Blue */
    cursor: help;
}

.annotation {
    display: none;
}

/* --- 6. Annotation STYLED (Toggled ON) --- */

/* Vocabulary Toggle (English) */
body.show-vocab-en .annotation.vocab-en {
    display: inline;
    font-size: 1em;
    font-weight: normal;
    color: #333; /* Dark text */
    background-color: #fff498; /* Light 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: #333; /* Dark text */
    background-color: #ffdfb8; /* Light Peach */
    padding: 0.1em 0.4em;
    border-radius: 4px;
    margin-left: 0.5em;
}

/* Explanation Toggle (English) */
body.show-explanation-en .annotation.explanation-en {
    display: block;
    font-size: 1em;
    font-style: italic;
    color: #333;
    background-color: #e6f4e6; /* Light Green */
    border: 1px dashed #107c10; /* Dark Green */
    padding: 0.5em;
    margin-top: 0.5em;
}

/* Explanation Toggle (Spanish) */
body.show-explanation-es .annotation.explanation-es {
    display: block;
    font-size: 1em;
    font-style: italic;
    color: #333;
    background-color: #e6f0fA; /* Light Blue */
    border: 1px dashed #007acc; /* Bright Blue */
    padding: 0.5em;
    margin-top: 0.5em;
}

/* Image Toggle) */
body.show-graphics .graphic {
    display: block;
    background-color: #e6f0fA; /* Light Blue */
    border: 1px solid #007acc; /* Bright Blue */
    padding: 0.25em;
    margin: 0.25em;
}

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

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

.details.speaking {
    display: none;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.5em 1.5em;
}

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


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

/* --- DEFAULT (Chunking OFF) --- */
.chunk-trigger {
    display: none;
}
.chunk-content {
    display: block;
    border-left: none;
    padding-left: 0;
    margin-top: 0;
}

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

body.show-chunking .chunk-trigger {
    display: block;
    cursor: pointer;
    color: #005a9e; /* Dark Blue */
    font-size: 1.5rem;
    margin-top: 2rem;
    position: relative;
    padding-left: 1.2em;
}

body.show-chunking .chunk-trigger::before {
    content: '►';
    position: absolute;
    left: 0;
    top: 0.1em;
    font-size: 0.8em;
    color: #007acc; /* Bright Blue */
}

body.show-chunking .chunk-content {
    display: none;
    border-left: 3px solid #ccc;
    padding-left: 1.5rem;
    margin-top: 1rem;
}

body.show-chunking .chunk.chunk-open .chunk-trigger::before {
    content: '▼';
}

body.show-chunking .chunk.chunk-open .chunk-content {
    display: block;
}

/* --- 10. Accessibility Focus --- */
:focus-visible {
    outline: 0.2rem solid #007acc; /* Bright Blue */
    outline-offset: 0.2rem;
}

/* The theme switch button  */

p.switcher {
    margin: 0;
}