/*=====================================================================
   1️⃣  Global reset & basic typography
   =====================================================================*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Base font – the app’s UI inherits this */
html {
    font-size: 100%;
    /* 16 px = 1 rem */
    line-height: 1.5;
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/*--------------------------------------------------------------
   2️⃣  Colours – the same custom properties that were in index.html
   --------------------------------------------------------------*/
:root {
    --bg-page: #fafafa;
    --bg-surface: #ffffff;
    --border-surface: #ddd;
    --txt-primary: #212121;
    --txt-secondary: #424242;
    --heading-accent: #00695c;
    --link: #1565c0;
    --error: #d32f2f;
}

[data-theme="dark"] {
    --bg-page: #121212;
    --bg-surface: #1e1e1e;
    --border-surface: #333;
    --txt-primary: #e0e0e0;
    --txt-secondary: #b0b0b0;
    --heading-accent: #80cbc4;
    --link: #90caf9;
    --error: #ef9a9a;
    --heading-accent: #4caf50;
}

/* -------------------------------------------------------------
   Highlight for the token currently being spoken
   ------------------------------------------------------------- */
.highlighted-token {
    /* Background – use the accent colour for good contrast */
    background: var(--heading-accent);
    /* Optional border for extra definition */
    /*    box-sizing: border-box;
    border: 2px solid var(--link);
    */
    /* Enlarge and bold the text */
    font-size: 115%;
    /* ~15 % larger */
    font-weight: 600;
    /* semi‑bold */
    /* Ensure the text colour stays readable */
    color: var(--bg-surface);
    /* Smooth visual change */
    transition: background 0.2s, color 0.2s,
        font-size 0.2s, font-weight 0.2s,
        border 0.2s;
}

/* -------------------------------------------------------------
   Page‑level backgrounds – now theme aware
   ------------------------------------------------------------- */
body,
nav.menu-nav,
main.main {
    /* Use the same surface colour that cards and panels already use */
    background: var(--bg-surface);
    /* Optional – a subtle border so the edges are visible in both modes */
    border-color: var(--border-surface);
}

/* -------------------------------------------------------------
   Theme‑aware text colour for the main layout elements
   ------------------------------------------------------------- */
body,
nav.menu-nav,
main.main,
header.toolbar,
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a,
button,
details,
summary {
    /* Primary colour – used for most body text */
    color: var(--txt-primary);
}

/* Secondary / muted text (e.g. subtitles, hints) */
small,
.caption,
.help-detail summary,
.menu-item .summary,
.book-card p,
.book-card h3,
details p {
    color: var(--txt-secondary);
}

/* Links – keep them recognisable in both themes */
a {
    color: var(--link);
    text-decoration: underline;
}

/* Ensure form controls (inputs, selects) inherit the colour */
input,
select,
textarea,
button {
    background: var(--bg-surface);
    border: 1px solid var(--border-surface);
    color: var(--txt-primary);
}

/* Buttons – give them a subtle surface colour so they stand out */
button {
    background: var(--bg-surface);
    border-radius: .4rem;
    padding: .4rem .8rem;
}

/* Hover / active states – a slight contrast that works in both modes */
button:hover,
button:focus {
    background: var(--border-surface);
}

/* Headings – you may want them a bit bolder */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
}

/*=====================================================================
   3️⃣  Layout helpers (flex & grid utilities)
   =====================================================================*/
.flex {
    display: flex;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.flex-between {
    justify-content: space-between;
    align-items: center;
}

.grid {
    display: grid;
}

.grid-gap {
    gap: .75rem;
}

/* --------------------------------------------------------------
   Simple toolbar layout
   --------------------------------------------------------------
   The header (#toolbar) contains ONLY two child <div>s.
   • The first child is forced to the left edge.
   • The second child is forced to the right edge.
   -------------------------------------------------------------- */
#toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-surface);
    /*    border-bottom: 1px solid var(--border-surface); */
}

/* (Optional – keep the original look of the buttons inside the toolbar) */
#toolbar button {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--txt-primary);
}

#toolbar button#reloadSoundBtn {
    background-color: var(--link);
    padding: 0 0.25rem;
    margin-right: 0.5rem;
}

/* --------------------------------------------------------------
   Dark‑mode support – the colour variables already switch
   automatically when `[data‑theme="dark"]` is set on <html>.
   No extra rules needed here.
   -------------------------------------------------------------- */

/*=====================================================================
   5️⃣  Navigation selectors (language & font)
   =====================================================================*/

/* -------------------------------------------------------------
   1️⃣  Nav bar – full‑width, same height as the header
   ------------------------------------------------------------- */
nav.menu-nav {
    width: 100%;
    /* match the header width */
    box-sizing: border-box;
    padding: 0.15rem;
    /* same vertical padding as the toolbar */
    border-bottom: 1px solid var(--border-surface);
}

/* -------------------------------------------------------------
   1️⃣  Wrapper that holds the two selects – never wrap
   ------------------------------------------------------------- */
.selectors-row {
    display: flex;
    /* flex container */
    flex-wrap: nowrap;
    /* <-- crucial – prevents line‑break */
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    /* small gap between the two selects */
}

/* -------------------------------------------------------------
   2️⃣  The selects themselves – equal width, shrinkable
   ------------------------------------------------------------- */
.selectors-row select {
    /* Take half the row (minus the gap).  Using flex‑basis 0 with
       flex‑grow 1 makes them share the space equally. */
    flex: 1 1 0;
    /* grow, shrink, start from 0 */
    max-width: 50%;
    /* never exceed half the container */
    min-width: 80px;
    /* stay usable on the tiniest screens */
    padding: 0.2rem 0.4rem;
    /*   font-size: 1rem; */
    border: 1px solid var(--border-surface);
    border-radius: .4rem;
    background: var(--bg-surface);
    color: var(--txt-primary);
}

/* -------------------------------------------------------------
   3️⃣  Tight‑screen tweak – keep them on one line down to
       ~320 px (typical smallest phone width).  We simply let the
       selects shrink further; the `flex‑wrap: nowrap` above guarantees
       they stay side‑by‑side.
   ------------------------------------------------------------- */
@media (max-width: 340px) {
    .selectors-row select {
        /* Reduce the minimum width a bit more for ultra‑small screens */
        min-width: 70px;
        /* Optional: make the font a tad smaller so the text still fits */
        font-size: 0.78rem;
    }
}

/* -------------------------------------------------------------
   4️⃣  (Optional) If you ever want a fallback for *extremely*
       narrow viewports where the text would become unreadable,
       you can force the selects to scroll horizontally instead of
       wrapping.  Uncomment the block below if you need it.
   ------------------------------------------------------------- */


@media (max-width: 280px) {
    .selectors-row {
        overflow-x: auto;
        /* allow horizontal scrolling */
    }
}


/*=====================================================================
   6️⃣  Main content area
   =====================================================================*/
main.main {
    padding: 0 1rem;
}

.exerciseDiv {
    padding: 1rem;
}

.exerciseDiv select {
    width: 100%;
    box-sizing: border-box;
    /* Ensures padding and border are included in the total width */
    min-width: 80px;
    /* stay usable on the tiniest screens */
    padding: 0.2rem 0.4rem;
    font-size: 1rem;
    border: 1px solid var(--border-surface);
    border-radius: .4rem;
    background: var(--bg-surface);
    color: var(--txt-primary);
}

/*=====================================================================
   7️⃣  Card list (exercise list, books & blogs)
   =====================================================================*/
.menu-list,
.books-cards-grid {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

.menu-item,
.book-card {
    background: var(--bg-surface);
    padding: 1rem;
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.menu-item:hover,
.book-card:hover {
    transform: scale(1.02);
    background: var(--bg-surface);
    box-shadow: 0 0 8px 2px var(--link);
}

/* Tablet & desktop break‑points (same as original) */
@media (min-width:600px) {

    .menu-list,
    .books-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width:900px) {

    .menu-list,
    .books-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*=====================================================================
   8️⃣  Details panels (Help, Books, Dictionary options)
   =====================================================================*/
details {
    background: var(--bg-surface);
    border: 1px solid var(--border-surface);
    border-radius: .5rem;
    padding: .5rem;
    margin: .5rem 0;
}

details summary {
    font-weight: 600;
    cursor: pointer;
}

/*=====================================================================
   9️⃣  Dictionary exercise UI
   =====================================================================*/
/* Container that holds the whole dictionary view */

/* --------------------------------------------------------------
   Scrollable wrapper for the dictionary grid.
   It lives *inside* <main id="main"> and only affects the
   dictionary‑exercise page.
   --------------------------------------- */
.dict-scroll-wrapper {
    /* Let the wrapper grow to fill the remaining viewport space */
    overflow-y: auto;
    /* The height is the viewport minus the known heights of the
      toolbar, language‑options <details>, and the speech panel.
       Those heights are approximations – adjust if you change the
      UI later. */
    max-height: calc(100vh
            /* full viewport */
            - 60px
            /* toolbar (approx.) */
            - 48px
            /* language‑options <details> header */
            - 80px
            /* speech panel (buttons, sliders) */
            - 2rem
            /* a little breathing room */
        );
}

/* Optional – smooth scrolling when the controller highlights a row */
.dict-scroll-wrapper {
    scroll-behavior: smooth;
}


.dict-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem;
/*    padding: 0 1rem 1rem 1rem; */
    overflow-y: auto;
}

.dict-grid .category-header {
    flex-basis: 100%;
    flex-shrink: 0;
    max-width: 100%;
    /* keep the visual margins you already set in JS */
    margin: 0.4rem 0 0.2rem 0;
    font-weight: 600;
    color: var(--txt-primary);
}

/* One column (source token + its visible translations) */
.token-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 .5rem;
}

.token-col .trans {
    font-size: 1rem;
}

/* Language‑options panel (inside <details>) */
.options-grid {
    display: grid;
    grid-template-columns: 6fr 2fr 2fr;
    gap: .5rem;
    align-items: center;
}

/* Headers inside the options grid */
.options-grid h4 {
    margin: 0;
}

.options-grid .header {
    text-align: center;
}

/* Category headers that span the full width of the grid */
.category-header {
    grid-column: 1 / -1;
    /* full‑width */
    font-weight: 600;
    margin: .4rem 0 .2rem 0;
    color: var(--txt-primary);
}

/* Speech‑control panel (Play / Pause / Reset / Delay) */
#speechPanel {
    margin-bottom: .5rem;
    border: 1px solid var(--border-surface);
    border-radius: .5rem;
    padding: .5rem;
    background: var(--bg-surface);
}

/* Row 1 – the buttons */
#speechPanel #controlsRow {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

#speechPanel #controlsRow button {
    margin-bottom: 0.2rem;
    font-size: 1.2rem;
    background: none;
    border: none;
    cursor: pointer;
    border: 1px solid var(--border-surface);
}

/* Row 2 – status line + voice selector */
#speechPanel .status-voice-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

#speechPanel .status-el {
    flex: 0 0 25%;
    min-height: 1.2rem;
    font-style: italic;
    /*    font-size: .8rem; */
    border: 1px solid var(--border-surface);
    border-radius: 4px;
    background: var(--bg-surface);
    padding: .15rem;
}

#speechPanel select {
    flex: 0 0 75%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: .11rem;
}

/* Disabled / dimmed state (used by setPanelEnabled) */
.disabled {
    pointer-events: none;
    opacity: .5;
    filter: grayscale(80%);
}

/*=====================================================================
   10️⃣  Multiple‑Choice exercise UI
   =====================================================================*/
.mc-wrapper {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-surface);
    border-radius: .5rem;
    background: var(--bg-surface);
    position: relative;
    /* for the loading overlay */
}

/* Loading overlay */
.mc-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .8);
    /*    font-size: 1.2rem; */
    z-index: 10;
}

/* Controls (language selectors + start button) */
.mc-controls {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1rem;
}

.mc-controls>div {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.mc-controls label {
    margin-right: .5rem;
}

/* Prompt line */
.mc-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    /*   font-size: 1.4rem; */
    font-weight: 600;
    text-align: center;
}

.icon,
.mc-prompt span.icon {
    margin: 0 1rem;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Answer list */
.mc-answers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.mc-answers button {
    width: 100%;
    padding: .5rem;
    font-size: 1rem;
    cursor: pointer;
}

/* Bottom info row (feedback / score / reset) */
.mc-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    gap: 1rem;
}

.mc-feedback {
    font-style: italic;
    margin-bottom: .5rem;
}

/* Navigation (Back / Next) */
.mc-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

/* -------------------------------------------------------------
   Dim‑and‑Grayscale for any disabled UI element
   ------------------------------------------------------------- */
button:disabled,
select:disabled,
input:disabled,
textarea:disabled,
.disabled {
    /* catches elements that get the .disabled class */
    /*   opacity: 0.6; */
    /* keep a subtle see‑through effect */
    /*   filter: grayscale(80%); */
    /* strip most colour, leaving a grey tone */
    cursor: not-allowed;
    /* visual cue that interaction is blocked */
}

/* Optional – make the disabled state a little smoother */
button:disabled,
select:disabled,
input:disabled,
textarea:disabled,
.disabled {
    transition: opacity 0.2s ease, filter 0.2s ease;
}


/*=====================================================================
   11️⃣  Help page
   =====================================================================*/
.help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--border-surface);
}

.help-header h2 {
    margin: 0;
}

.help-header label {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.help-header input {
    padding: 0;
    border: 1px solid var(--border-surface);
    border-radius: 4px;
    width: 12rem;
}

/*=====================================================================
   12️⃣  Miscellaneous utility classes
   =====================================================================*/
.correct {
    color: #fff;
    background-color: #4caf50;
}

.incorrect {
    color: #fff;
    background-color: #ff5252;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.mt-1 {
    margin-top: .5rem;
}

.mb-1 {
    margin-bottom: .5rem;
}

.p-1 {
    padding: .5rem;
}

.rounded {
    border-radius: .5rem;
}

.shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/*=====================================================================
   13️⃣  Responsive tweaks (tablet & desktop)
   =====================================================================*/
/* Larger screens – give the toolbar more breathing room */
@media (min-width:600px) {
    #toolbar {
        padding: .25rem 1.5rem;
    }
}

/* Desktop – increase font size a little for readability */
@media (min-width:900px) {
    html {
        font-size: 112%;
    }

    /* ≈18 px */
}