/* Dark, light and system view (#33).
 *
 * player.css draws the app as it always looked: a dark start page, dark
 * phone views and light cards (help, features, pairing, interactions). This
 * file turns that into two consistent themes, keyed on the RESOLVED theme on
 * <html data-theme> (assets/theme.js; "system" resolves to one of the two):
 *
 *   dark  — the dark start page and phone views as they are, and the cards
 *           and the toolbar made dark to match;
 *   light — the cards as they are, and the start page, overview, remote and
 *           audience views made light to match.
 *
 * Inside a dark card the colour TOKENS are redefined (--paper is the card's
 * ground, --ink its text), so every rule of player.css that is written with
 * tokens follows by itself; only the colours player.css spells out are
 * overridden here. Never themed: the slide, the black letterbox around it,
 * the mirror (it shows the slide) and the ink on the slide — a talk looks the
 * same on the projector whatever the presenter's laptop prefers.
 */

/* ── the switch (start page, help, remote, audience) ────────────────────── */
.theme-switch {
  display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px;
  border: 1px solid var(--ts-border, rgba(255,255,255,.22));
  background: var(--ts-bg, rgba(255,255,255,.04));
  vertical-align: middle;
}
.theme-switch button {
  display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer;
  background: transparent; color: var(--ts-fg, #C9CBD1);
  font: 600 12.5px var(--font); padding: 4px 10px; border-radius: 999px;
}
.theme-switch button svg { width: 15px; height: 15px; flex: none; }
.theme-switch button[aria-checked="true"] { background: var(--ts-on-bg, #F4F5F7); color: var(--ts-on-fg, #111); }
.theme-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* on a phone header there is little room: icons only */
.ctl-head .theme-switch span, .aud-head .theme-switch span { display: none; }
.ctl-head .theme-switch button, .aud-head .theme-switch button { padding: 5px 7px; min-width: 40px; min-height: 40px; }
.help-theme { display: flex; align-items: center; gap: 12px; padding: 4px 22px 0; font: 700 13px var(--font);
  text-transform: uppercase; letter-spacing: .08em; color: var(--gray); }
/* the start page's footer carries it between the privacy line and the version */
.attribution .theme-switch { justify-self: end; margin-right: 10px; }
.attribution { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; }
@media (max-width: 760px) { .attribution .theme-switch span { display: none; } }
/* a phone (UX review: UX-18): the privacy line on its own row, the switches
   and the version below it — side by side the version chip covered "Dark" */
@media (max-width: 760px) {
  .attribution { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .attribution .att-who { display: none; }
  .attribution .att-privacy { grid-column: 1 / -1; white-space: normal; }
  .attribution .att-switches { justify-self: start; margin-right: 0; }
}
/* switches on light ground */
.help-theme .theme-switch, html[data-theme="light"] .theme-switch {
  --ts-border: rgba(0,0,0,.16); --ts-bg: rgba(0,0,0,.03); --ts-fg: #3F4450; --ts-on-bg: #111; --ts-on-fg: #fff;
}
html[data-theme="dark"] .help-theme .theme-switch {
  --ts-border: rgba(255,255,255,.2); --ts-bg: rgba(255,255,255,.04); --ts-fg: #C9CBD1; --ts-on-bg: #F4F5F7; --ts-on-fg: #111;
}

/* ══ dark ═════════════════════════════════════════════════════════════════ */

/* cards and the toolbar: the tokens flip, the rules follow */
html[data-theme="dark"] :is(.help-card, .feat-card, .pair-card, .ia-card, #tut-card, #toolbar, #ctl-note, .aud-card) {
  --paper: #17191D;
  --ink: #E9EAEE;
  --line: #2E3239;
  --gray: #A1A7B0;
}
/* what player.css spells out */
html[data-theme="dark"] #toolbar {
  background: rgba(24,26,30,.90); border-color: rgba(255,255,255,.10);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] #toolbar .tool:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] #toolbar .tool-sep { background: rgba(255,255,255,.18); }
html[data-theme="dark"] #toolbar .sw { border-color: rgba(255,255,255,.22); }
html[data-theme="dark"] #t-cursor svg path { stroke: #17191D; }
html[data-theme="dark"] :is(.help-card, .pair-card) .ghost-btn { color: #D6D8DD; border-color: #444A53; }
html[data-theme="dark"] :is(.help-card, .feat-card) kbd { border-color: #444A53; }
html[data-theme="dark"] #tut-card p { color: #C4C8CF; }
html[data-theme="dark"] .tut-actions button { border-color: #444A53; }
html[data-theme="dark"] .pair-cols p { color: #B7BCC4; }
html[data-theme="dark"] #pin-input { background: #1F2227; border-color: #3A3F47; }
html[data-theme="dark"] .pair-warn { background: #3A1614; }
html[data-theme="dark"] .pair-status[data-tone="ok"], html[data-theme="dark"] .ia-count,
html[data-theme="dark"] .ia-counter, html[data-theme="dark"] .aud-sent { color: #5EE08E; }
html[data-theme="dark"] .ia-btn { background: #22262C; color: #E9EAEE; border-color: #3A3F47; }
html[data-theme="dark"] .ia-btn:hover { border-color: #E9EAEE; }
html[data-theme="dark"] .ia-row-main .ia-row-icon { color: #8DB6FF; }
html[data-theme="dark"] .ia-row.ia-off .ia-row-icon { color: var(--gray); }
html[data-theme="dark"] .ia-btn.ia-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
html[data-theme="dark"] .ia-btn.ia-danger { background: var(--red); border-color: var(--red); color: #fff; }
html[data-theme="dark"] :is(#ia-vis, .ia-part-vis) { background: #22262C; color: #E9EAEE; border-color: #3A3F47; }
html[data-theme="dark"] :is(.ia-ed-field input:not([type="checkbox"]), .ia-ed-field select, .ia-ed-field textarea, .ia-ed-head .ia-ed-type) { background: #22262C; color: #E9EAEE; border-color: #3A3F47; }
html[data-theme="dark"] .ia-ed-msg { color: #FF9C8F; }
html[data-theme="dark"] .ia-bar { background: #2A2E35; }
html[data-theme="dark"] .ia-check-result[data-tone="ok"] { background: #10311F; color: #A7F3C7; }
html[data-theme="dark"] .ia-check-result[data-tone="bad"] { background: #3A1614; color: #FECACA; }
html[data-theme="dark"] .ia-tag_cloud .ia-word { color: #8DB6FF; }
html[data-theme="dark"] .aud-option { background: #1F2227; color: #E9EAEE; border-color: #3A3F47; }
html[data-theme="dark"] .aud-option[aria-checked="true"] { background: #1D2D4A; border-color: var(--blue); }
html[data-theme="dark"] .aud-text { background: #1F2227; color: #E9EAEE; border-color: #3A3F47; }
html[data-theme="dark"] .aud-change { background: #22262C; color: #E9EAEE; border-color: #3A3F47; }
html[data-theme="dark"] #ctl-note input { background: #1F2227; color: #E9EAEE; }
html[data-theme="dark"] :is(.help-cols dd, .feat-grid p) { color: #C4C8CF; }
html[data-theme="dark"] .ia-caption { color: #B7BCC4; }
html[data-theme="dark"] .help-card { border-color: #3A3F47; }
html[data-theme="dark"] .help-card header { border-bottom-color: #3A3F47; }
html[data-theme="dark"] .ia-item.active { background: #E9EAEE; color: #111; border-color: #E9EAEE; }
html[data-theme="dark"] .ia-item.active small { color: #4A4E55; }
/* dark text stays on the yellow and red it is printed on */
html[data-theme="dark"] :is(#pair-pin, .ia-pin, .aud-send, #ctl-note button, .tut-actions button.primary) { color: #111; }

/* ══ light ════════════════════════════════════════════════════════════════ */

/* the start page: a pale ground; the mesh MULTIPLIES instead of screening,
   so the same colour points tint the page instead of lighting a dark one */
html[data-theme="light"] #opener { background: #F4F5F7; }
html[data-theme="light"] .mesh { filter: blur(85px) saturate(1.2); opacity: .55; }
html[data-theme="light"] .mesh span { mix-blend-mode: multiply; }
html[data-theme="light"] #opener::after {
  background: radial-gradient(125% 90% at 50% 42%, transparent 0%, rgba(244,245,247,.30) 56%, rgba(244,245,247,.85) 100%);
}
html[data-theme="light"] .mesh-grain { opacity: .025; }
html[data-theme="light"] #opener h1 { color: #111; }
html[data-theme="light"] #opener h1 em { color: #B8860B; }
html[data-theme="light"] #opener h1 .title-mark { filter: drop-shadow(0 5px 12px rgba(0,0,0,.18)); }
html[data-theme="light"] #opener .lede { color: #3F4450; }
html[data-theme="light"] #opener .hint { color: #5B616B; }
html[data-theme="light"] .feature-tags li { border-color: rgba(0,0,0,.14); background: rgba(255,255,255,.55); color: #3F4450; }
html[data-theme="light"] .keys-preview { color: #5B616B; }
html[data-theme="light"] kbd { background: rgba(0,0,0,.05); color: #222; border-color: rgba(0,0,0,.16); }
html[data-theme="light"] .ghost-btn { color: #333; border-color: rgba(0,0,0,.22); }
html[data-theme="light"] .ghost-btn:hover { color: #111; border-color: #111; }
html[data-theme="light"] #recent { background: linear-gradient(to top, rgba(255,255,255,.72), rgba(255,255,255,.45)); border-top-color: rgba(0,0,0,.08); }
html[data-theme="light"] #recent h2 { color: #5B616B; }
html[data-theme="light"] #recent .storage-use { color: #5B616B; }
html[data-theme="light"] #recent .storage-use.low { color: #B3261E; }
html[data-theme="light"] .attribution { background: rgba(255,255,255,.78); border-top-color: rgba(0,0,0,.08); color: #5B616B; }
html[data-theme="light"] .att-privacy strong { color: #222; }
html[data-theme="light"] .attribution a { color: #333; border-bottom-color: rgba(0,0,0,.25); }
html[data-theme="light"] .attribution a:hover { color: #111; border-bottom-color: #111; }
html[data-theme="light"] .version-chip { color: #5B616B !important; border-color: rgba(0,0,0,.2) !important; }

/* the page overview and the scrims behind cards */
html[data-theme="light"] #overview { background: #ECEEF1; }
html[data-theme="light"] #overview header { color: #111; border-bottom-color: rgba(0,0,0,.1); }
html[data-theme="light"] #overview header button { color: #111; }
html[data-theme="light"] #ov-search { border-color: #9AA1A9; background: #fff; }
html[data-theme="light"] #ov-search:focus { border-color: #1f6feb; }
html[data-theme="light"] #ov-found { color: #4A4E55; }
html[data-theme="light"] :is(#help, #features, #pair, #ia-panel, #version-info, #html-trust, #gs-add, #forget-ask, #talk-ask, #preflight) { background: rgba(228,231,236,.88); }

/* the remote and the audience's phones */
html[data-theme="light"] :is(#control-view, #audience-view) { background: #F4F5F7; color: #111; }
/* audience.html's PIN form (feature options, risk 8), as the audience view */
html[data-theme="light"] body.audience-page { background: #F4F5F7; color: #111; }
html[data-theme="light"] body.audience-page #pin-input { border-color: #5B616B; background: #fff; }
html[data-theme="light"] .aud-join .ghost-btn { color: #111; border-color: #5B616B; }
html[data-theme="light"] :is(.ctl-head, .aud-head) { color: #3F4450; border-bottom-color: rgba(0,0,0,.1); }
html[data-theme="light"] #ctl-page { color: #9A6B00; }
html[data-theme="light"] #ctl-pad { border-color: rgba(0,0,0,.2); background: rgba(0,0,0,.03); }
html[data-theme="light"] #ctl-pad.has-slide { background: #0B0B0C; }   /* the slide keeps its black */
html[data-theme="light"] #ctl-pad-hint { color: #5B616B; }
html[data-theme="light"] #ctl-tools button { border-color: rgba(0,0,0,.2); color: #333; }
html[data-theme="light"] #ctl-tools button.active { background: #111; color: #fff; border-color: #111; }
html[data-theme="light"] #ctl-colors button { border-color: rgba(0,0,0,.2); }
html[data-theme="light"] #ctl-colors button.active { border-color: #111; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; }
html[data-theme="light"] .aud-wait { color: #5B616B; }
html[data-theme="light"] .aud-card { box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06); }
/* the preview's phone shows the phone as it looks in this theme */
html[data-theme="light"] .ia-phone { background: #F4F5F7; border-color: #C9CDD3; }

/* ── review round (#36) ─────────────────────────────────────────────────── */
/* the help's close button: an ID rule used to paint it in the card's own
   colour (white on white before this PR, dark on dark with it) */
#help .help-card header button { color: var(--ink); }
/* the remote's page counter keeps to one line next to the switch */
#ctl-page { white-space: nowrap; flex: none; }
html[data-theme="dark"] .help-remote p { color: #C4C8CF; }
html[data-theme="dark"] :is(.help-diag p, .diag-list) { color: #C4C8CF; }
html[data-theme="dark"] .diag-list li:is([data-kind="error"], [data-kind="uncaught"]) { color: #FF8A80; }
html[data-theme="light"] .recent-item .rname { color: #111; }
html[data-theme="light"] :is(.recent-item .rmeta, .recent-item .rwhen) { color: #4A4F57; }
html[data-theme="light"] #recent .drop-hint { color: #8A5F00; }
/* the last add's ring on the light row: yellow alone is about 1.5:1 against
   it, so a dark gold edge carries the contrast (#79 review) */
html[data-theme="light"] .recent-item.shine .rshot :is(img, .noshot) {
  box-shadow: 0 0 0 3px var(--yellow), 0 0 0 4.5px #8A5F00, 0 0 9px 2px rgba(253,204,16,.6), 0 6px 16px rgba(0,0,0,.25);
}
html[data-theme="light"] .ov-item .n { color: #4A4F57; }
html[data-theme="light"] .ov-item .n.marked { color: #8A5F00; }
html[data-theme="light"] #ctl-page { color: #7A5400; }
html[data-theme="light"] #opener h1 em { color: #8A5F00; }
html[data-theme="light"] .version-chip:hover { color: #111 !important; border-color: #111 !important; }
/* #39: the interaction panel's views */
html[data-theme="dark"] .ia-live { color: #5EE08E; }
html[data-theme="dark"] .ia-btn.ia-primary { background: #2563EB; border-color: #2563EB; color: #fff; }
html[data-theme="dark"] .ia-row.active { box-shadow: inset 4px 0 0 #E9EAEE; }
html[data-theme="dark"] .ia-row.live { box-shadow: inset 4px 0 0 #5EE08E; }
/* #42: the language switch, next to every theme switch */
.lang-switch { font: 600 12.5px var(--font); padding: 5px 6px; border-radius: 9px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: inherit; cursor: pointer; }
.lang-switch option { color: #111; background: #fff; }
.lang-switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
html[data-theme="light"] .lang-switch { border-color: rgba(0,0,0,.2); background: #fff; color: #111; }
.attribution .lang-switch { justify-self: end; margin-right: 8px; }
.help-card .lang-switch, .feat-card .lang-switch { border-color: var(--line); background: var(--paper); color: var(--ink); }
.attribution .att-switches { justify-self: end; display: flex; align-items: center; gap: 8px; margin-right: 10px; }
.attribution .att-switches .theme-switch { margin-right: 0; }
/* #42 review: the footer with the language switch — below 1400 px the
   privacy line gets a row of its own; on phones the attribution goes (it
   is in the features overlay) and the switches and the version share a row */
@media (max-width: 1400px) {
  .attribution { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 6px; }
  .attribution .att-privacy { grid-column: 1 / -1; grid-row: 2; text-align: center; white-space: normal; }
}
@media (max-width: 760px) {
  .attribution .att-who { display: none; }
  .attribution { grid-template-columns: minmax(0, 1fr) auto; }
  .attribution .att-switches { justify-self: start; margin-right: 0; }
}
/* the compact switch in the remote's and the phone's header */
.lang-switch[data-compact] { padding: 4px 3px; font-size: 12px; }
/* #65: the poll's End button keeps its colours, the reset rows follow the theme */
html[data-theme="dark"] .ia-btn.ia-warn { background: #C2410C; border-color: #C2410C; color: #fff; }
html[data-theme="dark"] .ia-btn.ia-highlight { background: var(--yellow); border-color: var(--yellow); color: #111; }
html[data-theme="dark"] .ia-choice { background: #22262C; color: #E9EAEE; border-color: #3A3F47; }
html[data-theme="dark"] .ia-choice:hover { border-color: #E9EAEE; }
html[data-theme="dark"] .ia-side-size .ia-btn[aria-checked="true"] { background: #E9EAEE; border-color: #E9EAEE; color: #111; }
html[data-theme="light"] #opener :is(.html-pick, .pick-types) { color: #4A4F57; }

/* #86: the add dialog's error, readable on the dark card */
html[data-theme="dark"] #gs-add .gs-add-error { color: #FF9C8F; }
html[data-theme="dark"] #gs-add input { border-color: #626A72; }
html[data-theme="dark"] #talk-ask input { border-color: #626A72; }
html[data-theme="dark"] #talk-ask .talk-error { color: #FF9C8F; }
/* #108: the lengths to choose from */
html[data-theme="dark"] :is(#talk-minutes-list, #talk-minutes-list .talk-choice, #talk-ask .talk-colours) { border-color: #626A72; }
/* F-08: the audience's questions, dark */
html[data-theme="dark"] .ia-qa-note { color: #FBBF24; }
html[data-theme="dark"] .aud-qa { --paper: #17191D; --ink: #E9EAEE; --line: #2E3239; --gray: #A1A7B0; }
html[data-theme="dark"] #aud-ask-text { background: #1F2227; color: #E9EAEE; border-color: #3A3F47; }
html[data-theme="dark"] #aud-ask-send { color: #111; }
html[data-theme="dark"] #aud-ask-status { color: #5EE08E; }
html[data-theme="light"] .aud-qa { box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06); }
html[data-theme="dark"] .aud-q { border-color: #3A3F47; }
html[data-theme="dark"] .aud-vote { background: #1F2227; color: #E9EAEE; border-color: #3A3F47; }
html[data-theme="dark"] .aud-vote[aria-pressed="true"] { background: #1D2D4A; border-color: var(--blue); color: #fff; }