/* Light theme fixes + theme/language controls in the top bar (2026-09-19).
   Linked from index.html after the app stylesheets.

   Light theme: a handful of tokens used as TEXT colour still held the dark
   theme's pale mint (#95FFB2, #C8F5AD, #39E6C5...), which is ~1.2:1 on the light
   canvas - "Arabic + English", "Up next", "16 min" and friends were invisible.
   Their other uses are progress fills, dots and one button with light text, all
   of which read better darker too. Every rule is light-only; dark is untouched. */
@media (prefers-color-scheme: light) {
  html:root:not([data-theme="dark"]) {
    --violet-bright: #1F7A4D;
    --violet-light: #2E7D55;
    --kv-sky: #1D6B52;
    --cyan: #0F7F6B;
    --kv-violet-59: #2E7D55;
    --amethyst: #2E7D55;
    --kv-orchid: #3B8A57;
  }
  html:root:not([data-theme="dark"]) .kavvi-logo:not(.on-ink) > svg:first-child { filter: brightness(0.62) saturate(1.8); }
  html:root:not([data-theme="dark"]) .kv-app-shell .workspace-hero-action-col {
    background: rgba(var(--kv-ink-rgb, 17, 21, 17), 0.035);
    border-color: var(--kv-line-3);
  }
}
html:root[data-theme="light"] {
  --violet-bright: #1F7A4D;
  --violet-light: #2E7D55;
  --kv-sky: #1D6B52;
  --cyan: #0F7F6B;
  --kv-violet-59: #2E7D55;
  --amethyst: #2E7D55;
  --kv-orchid: #3B8A57;
}
html:root[data-theme="light"] .kavvi-logo:not(.on-ink) > svg:first-child { filter: brightness(0.62) saturate(1.8); }
html:root[data-theme="light"] .kv-app-shell .workspace-hero-action-col {
  background: rgba(var(--kv-ink-rgb, 17, 21, 17), 0.035);
  border-color: var(--kv-line-3);
}

/* ---- Theme + language controls (nav-prefs-20260919.js) ------------------- */
.kv-prefs { display: flex; align-items: center; gap: 8px; flex: none; position: relative; }
.kv-prefs .kv-prefs__btn { display: inline-grid; place-items: center; }
.kv-prefs .kv-prefs__lang { font: inherit; font-size: 14px; font-weight: 700; line-height: 1; }
.kv-prefs .kv-prefs__more { display: none !important; }
.kv-prefs svg { width: 18px; height: 18px; }

.kv-prefs__pop {
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0; z-index: 1300;
  width: 248px; padding: 14px; border-radius: 16px; box-sizing: border-box;
  background: var(--kv-card-raised); color: var(--kv-text); border: 1px solid var(--kv-line-3);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}
.kv-prefs__pop[hidden] { display: none; }
.kv-prefs__pop p { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--kv-text-muted); }
.kv-prefs__pop p + .kv-prefs__seg { margin-block-end: 12px; }
.kv-prefs__seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(var(--kv-ink-rgb, 17, 21, 17), 0.06); }
.kv-prefs__seg:last-child { margin: 0; }
.kv-app-shell .kv-prefs__seg button, .kv-prefs__seg button {
  min-height: 38px; padding: 0 6px; border: 0; border-radius: 9px; background: transparent;
  color: var(--kv-text-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.kv-app-shell .kv-prefs__seg button[aria-pressed="true"], .kv-prefs__seg button[aria-pressed="true"] {
  background: var(--kv-accent-fill); color: var(--kv-on-accent);
}
.kv-prefs__busy { opacity: 0.55; pointer-events: none; }

/* Phones: the bar is already full, so the two buttons fold into one menu. */
@media (max-width: 639px) {
  .kv-prefs .kv-prefs__theme, .kv-prefs .kv-prefs__langbtn { display: none !important; }
  .kv-prefs .kv-prefs__more { display: inline-grid !important; }
  .kv-prefs__pop { position: fixed; inset-block-start: 62px; inset-inline: 12px auto; }
}