/* Reader themes for the MasterBook interactive edition.
   Every colour in the page comes from these variables, so a theme is one block. The book's own identity
   (teal for IELTS) is the default; the other four are designed for comfort, projection and accessibility. */
html, html[data-theme="book"] {
  --t-accent: #0e7c7b; --t-deep: #0a4f55; --t-tint: #e7f4f3; --t-tint2: #cfe9e6; --t-line2: #c6e0dd; --t-soft: #8cc3bd;
  --t-panel: #f6fbfa; --t-paper: #ffffff; --t-ground: #eef6f5; --t-ink: #172a2e; --t-mute: #56706f; --t-line: #d4e6e3;
  --t-bar: #0a4f55; --t-ok: #157a4a; --t-bad: #b42335;
}
html[data-theme="navy"] {
  --t-accent: #0b5ea8; --t-deep: #0b2a4a; --t-tint: #eaf2fb; --t-tint2: #d6e6f6; --t-line2: #cddcec; --t-soft: #9db9d8;
  --t-panel: #f7fafd; --t-paper: #ffffff; --t-ground: #eef3f8; --t-ink: #1c2733; --t-mute: #5b6b7b; --t-line: #d5dde6;
  --t-bar: #0b2a4a; --t-ok: #157a4a; --t-bad: #c2161f;
}
html[data-theme="paper"] {
  --t-accent: #8a5a24; --t-deep: #5a3a17; --t-tint: #f6ecd9; --t-tint2: #eedcbc; --t-line2: #e3d2b4; --t-soft: #c9ab7e;
  --t-panel: #fbf5e9; --t-paper: #fffaf0; --t-ground: #f3ead8; --t-ink: #2f2a22; --t-mute: #6f6455; --t-line: #e6d9c2;
  --t-bar: #5a3a17; --t-ok: #3f7a2a; --t-bad: #a8322a;
}
html[data-theme="night"] {
  --t-accent: #4cc9bd; --t-deep: #a4ece4; --t-tint: #1b2b2e; --t-tint2: #23393c; --t-line2: #2e4649; --t-soft: #3f6f6b;
  --t-panel: #172326; --t-paper: #131c1e; --t-ground: #0c1314; --t-ink: #e4eeee; --t-mute: #9fb4b2; --t-line: #2a3b3e;
  --t-bar: #0f2a2c; --t-ok: #5fd39a; --t-bad: #ff8a95;
}
html[data-theme="contrast"] {
  --t-accent: #0040a8; --t-deep: #000000; --t-tint: #fff6bf; --t-tint2: #ffe97a; --t-line2: #000000; --t-soft: #000000;
  --t-panel: #ffffff; --t-paper: #ffffff; --t-ground: #ffffff; --t-ink: #000000; --t-mute: #1a1a1a; --t-line: #000000;
  --t-bar: #000000; --t-ok: #00602a; --t-bad: #b00000;
}
html[data-mark="yellow"] { --t-mark: #ffe58a; } html { --t-mark: #ffe58a; }
html[data-mark="green"] { --t-mark: #b9f0c9; }
html[data-mark="pink"] { --t-mark: #ffc6dd; }
html[data-theme="night"][data-mark="yellow"], html[data-theme="night"]:not([data-mark]) { --t-mark: #6b5a12; }
html[data-theme="night"][data-mark="green"] { --t-mark: #1f5a37; }
html[data-theme="night"][data-mark="pink"] { --t-mark: #6a2443; }

/* page chrome and the scoped book take their colours from the theme */
:root, html[data-theme] {
  --paper: var(--t-paper); --ground: var(--t-ground); --ink: var(--t-ink); --mute: var(--t-mute); --line: var(--t-line);
  --accent: var(--t-accent); --accent-deep: var(--t-deep); --tint: var(--t-tint); --tint2: var(--t-tint2); --soft: var(--t-soft);
  --on-accent: #ffffff; --mark: var(--t-mark); --ok: var(--t-ok); --bad: var(--t-bad); --ok-tint: color-mix(in srgb, var(--t-ok) 14%, var(--t-paper)); --bad-tint: color-mix(in srgb, var(--t-bad) 12%, var(--t-paper));
}
html[data-theme="night"] { --on-accent: #0c1314; color-scheme: dark; }
html[data-theme] .lesson {
  --navy: var(--t-deep); --blue: var(--t-accent); --sky: var(--t-soft); --th: var(--t-accent); --th-tint: var(--t-tint);
  --ink: var(--t-ink); --mute: var(--t-mute); --line: var(--t-line); --tint: var(--t-tint); --tint2: var(--t-tint2);
  --accent: var(--t-accent); --accent-deep: var(--t-deep); --accent-tint: var(--t-tint); --accent-tint2: var(--t-tint2);
  background: var(--t-paper); color: var(--t-ink); border-color: var(--t-line);
}
body { background: var(--t-ground); color: var(--t-ink); }
body::before { background: var(--t-bar); }
.bar { background: var(--t-bar) !important; }
.modes button[aria-pressed="true"], .bar .btn.solid, .bar .btn[aria-pressed="true"] { color: var(--t-bar) !important; }
.lesson svg { color: var(--t-accent); }
.lesson button svg, .lesson .btn svg { color: inherit; }   /* icons inside buttons follow the button text, e.g. white on a filled Pause button */
.lesson h2, .lesson h3, .lesson h4, .lesson h5 { color: var(--t-deep); }
.lesson, .lesson p, .lesson li, .lesson td, .lesson th:not([class]) { color: inherit; }
.ix-in { background: var(--t-paper); color: var(--t-deep); }
html[data-theme="night"] .lesson img { filter: brightness(.88) contrast(1.05); border-radius: 6px; background: #fff; }
html[data-theme="contrast"] .lesson a, html[data-theme="contrast"] .btn.ghost { text-decoration: underline; }
html[data-theme="contrast"] .ix-in, html[data-theme="contrast"] .ix-choice button { border-width: 2px; border-color: #000; }

/* text size */
html[data-size="s"] .lesson { zoom: 1.16; } html[data-size="m"] .lesson { zoom: 1.32; } html[data-size="l"] .lesson { zoom: 1.5; } html[data-size="xl"] .lesson { zoom: 1.7; }
@media (max-width: 700px) { html[data-size] .lesson { zoom: 1; } html[data-size="l"] .lesson { font-size: 18px; } html[data-size="xl"] .lesson { font-size: 20px; } }

/* the picker */
.th-btn { margin-left: 4px; }
.th-pop { position: absolute; right: 12px; top: calc(100% + 8px); z-index: 20; width: min(360px, calc(100vw - 32px)); background: var(--t-paper); color: var(--t-ink);
  border: 1px solid var(--t-line); border-radius: 16px; box-shadow: 0 18px 50px -18px rgba(0,0,0,.45); padding: 16px; font: 400 14px/1.4 var(--sans); }
.th-pop h4 { margin: 0 0 10px; font: 800 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--t-mute); }
.th-pop h4 + * { margin-bottom: 16px; }
.th-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.th-theme { display: grid; gap: 6px; text-align: left; border: 2px solid var(--t-line); background: var(--t-paper); color: var(--t-ink); border-radius: 12px; padding: 8px; font: 700 12.5px/1.2 var(--sans); }
.th-theme[aria-pressed="true"] { border-color: var(--t-accent); box-shadow: 0 0 0 3px var(--t-tint2); }
.th-theme .sw { display: flex; height: 30px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(0,0,0,.12); }
.th-theme .sw i { flex: 1; }
.th-theme small { font-weight: 500; color: var(--t-mute); }
.th-row { display: flex; gap: 8px; align-items: center; }
.th-row button { min-width: 44px; height: 38px; border: 2px solid var(--t-line); background: var(--t-paper); color: var(--t-ink); border-radius: 10px; font: 800 14px var(--sans); }
.th-row button[aria-pressed="true"] { border-color: var(--t-accent); background: var(--t-tint); }
.th-row .mk { width: 44px; border-radius: 50%; }
.th-note { margin: 0; font-size: 12px; color: var(--t-mute); }
.modes button[aria-pressed="true"], .bar .btn.solid { background: #fff !important; }
html[data-theme="night"] .modes button[aria-pressed="true"], html[data-theme="night"] .bar .btn.solid { background: var(--t-accent) !important; color: #0c1314 !important; border-color: var(--t-accent) !important; }
html[data-theme="night"] .ix-in.ok, html[data-theme="night"] .ix-in.reveal { color: var(--t-ok); }
html[data-theme="night"] .ix-in.bad { color: var(--t-bad); }
html[data-theme] .ix-in.reveal::placeholder { color: var(--t-ok); opacity: 1; }
.th-mast { margin-left: auto; }
.hero { background: linear-gradient(135deg, var(--t-bar), color-mix(in srgb, var(--t-bar) 55%, var(--t-accent))) !important; color: #fff; }
html[data-theme="night"] .hero { background: linear-gradient(135deg, var(--t-bar), color-mix(in srgb, var(--t-bar) 70%, var(--t-accent))) !important; }
@media (max-width: 560px) { .th-pop { left: 0; right: 0; width: auto; } }