/*
 * Listening Lab theme adapter. This is deliberately separate from layout and
 * from the independently deployed React bundle. Map its existing *semantic*
 * utility groups rather than painting every descendant with the same colors.
 * New upstream colors or component structures need a visual/contrast check.
 */
body.zh-tool-tts {
  --tts-paper: #f7f8f5;
  --tts-surface: #fffefa;
  --tts-soft: #eef2e8;
  --tts-selected: #dfead5;
  --tts-ink: #263a32;
  --tts-muted: #5e6a59;
  --tts-line: #dce3d5;
  --tts-forest: #244d3d;
  --tts-forest-hover: #32614b;
  color-scheme: light;
  color: var(--tts-ink);
  background: var(--tts-paper);
}

body.zh-tool-tts #root {
  color: var(--tts-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Paper, cards and secondary controls. Preserve transparent modal overlays. */
body.zh-tool-tts #root .bg-slate-950 {
  background-color: var(--tts-paper);
}
body.zh-tool-tts #root :is(.bg-slate-900, [class~="bg-slate-900/90"]) {
  background-color: var(--tts-surface);
}
body.zh-tool-tts #root :is(.bg-slate-800, [class~="bg-slate-800/80"], [class~="bg-slate-950/20"], [class~="bg-slate-950/40"], [class~="bg-slate-950/60"], [class~="bg-slate-950/70"], [class~="bg-slate-950/80"]) {
  background-color: var(--tts-soft);
}
body.zh-tool-tts #root .fixed[class~="bg-slate-950/70"] {
  background-color: rgb(26 43 33 / 38%);
}
body.zh-tool-tts #root :is([class~="bg-brand-500/10"], [class~="bg-brand-500/15"], [class~="bg-brand-500/20"], [class~="bg-brand-950/20"], [class~="bg-brand-950/30"], [class~="bg-brand-950/40"], [class~="bg-brand-950/60"]) {
  background-color: #e7efdd;
}
body.zh-tool-tts #root :is([class~="bg-indigo-500/10"], [class~="bg-indigo-950/60"]) {
  background-color: #ecefdf;
}
body.zh-tool-tts #root .bg-gradient-to-br.from-slate-900 {
  background-image: linear-gradient(135deg, #edf2e5, #f6f7ef);
}
body.zh-tool-tts #root .bg-gradient-to-tr.from-brand-600 {
  background-image: linear-gradient(135deg, #244d3d, #5e7850);
}

/* Body text, labels, links and quiet metadata retain separate contrast levels. */
body.zh-tool-tts #root :is(.text-white, .text-slate-100, .text-slate-200) {
  color: var(--tts-ink);
}
body.zh-tool-tts #root .text-slate-300 {
  color: #465c4d;
}
body.zh-tool-tts #root :is(.text-slate-400, .text-slate-500) {
  color: var(--tts-muted);
}
body.zh-tool-tts #root :is(.text-brand-200, .text-brand-300, .text-brand-400, .text-brand-500, [class~="text-brand-300/80"], .text-indigo-300, .text-indigo-400) {
  color: var(--tts-forest);
}

body.zh-tool-tts #root :is(.border-slate-700, .border-slate-800, .border-slate-900, [class~="border-slate-700/80"], [class~="border-slate-800/40"], [class~="border-slate-800/60"], [class~="border-slate-800/80"]) {
  border-color: var(--tts-line);
}
body.zh-tool-tts #root :is([class~="border-brand-500/30"], [class~="border-brand-500/40"], [class~="border-brand-800/30"], [class~="border-brand-800/40"], [class~="border-indigo-500/20"], [class~="border-indigo-800/40"]) {
  border-color: #ccdabe;
}
body.zh-tool-tts #root .border-brand-500 {
  border-color: var(--tts-forest);
}

/* Primary actions keep white text; tinted selections use dark forest text. */
body.zh-tool-tts #root .bg-brand-600 {
  color: #fffefa;
  background-color: var(--tts-forest);
}
body.zh-tool-tts #root .bg-brand-600 .text-white,
body.zh-tool-tts #root .bg-gradient-to-tr.from-brand-600 .text-white {
  color: #fffefa;
}
body.zh-tool-tts #root :is([class~="hover:bg-brand-500"], [class~="hover:bg-brand-600"]):hover {
  color: #fffefa;
  background-color: var(--tts-forest-hover);
}
body.zh-tool-tts #root :is([class~="hover:bg-slate-700"], [class~="hover:bg-slate-800"], [class~="hover:bg-slate-800/60"], [class~="hover:bg-slate-950/40"], [class~="hover:bg-brand-500/20"]):hover {
  color: var(--tts-forest);
  background-color: var(--tts-selected);
}
body.zh-tool-tts #root :is([class~="hover:text-white"], [class~="hover:text-slate-200"], [class~="hover:text-brand-200"], [class~="hover:text-brand-300"]):hover {
  color: var(--tts-forest);
}
body.zh-tool-tts #root :is([class~="hover:border-slate-600"], [class~="hover:border-slate-700"], [class~="hover:border-brand-500"], [class~="hover:border-brand-500/40"], [class~="hover:border-brand-500/50"]):hover {
  border-color: #92ad83;
}
body.zh-tool-tts #root .group:hover :is([class~="group-hover:text-brand-300"], [class~="group-hover:text-brand-400"]) {
  color: var(--tts-forest);
}
body.zh-tool-tts #root :is(input, textarea, select) {
  color: var(--tts-ink);
  accent-color: var(--tts-forest);
  caret-color: var(--tts-forest);
}
body.zh-tool-tts #root :is(input, textarea)::placeholder {
  color: #65735e;
  opacity: 1;
}
body.zh-tool-tts #root :is(button, a, input, select, textarea):focus-visible {
  outline-color: #5b8051;
}
body.zh-tool-tts #root :is([class~="focus:border-brand-500"], [class~="focus:border-brand-500/50"]):focus {
  border-color: #5b8051;
}
body.zh-tool-tts #root ::selection {
  color: var(--tts-ink);
  background-color: #d1e3c4;
}

/* Keep feedback semantic: green success, amber caution, rose failure and blue
 * information. These are intentionally not remapped to the primary color. */
body.zh-tool-tts #root :is(.text-emerald-200, .text-emerald-400) {
  color: #246746;
}
body.zh-tool-tts #root :is([class~="bg-emerald-500/10"], [class~="bg-emerald-950/30"]) {
  background-color: #e5f1e4;
}
body.zh-tool-tts #root :is([class~="border-emerald-500/20"], [class~="border-emerald-500/60"]) {
  border-color: #9ebf99;
}
body.zh-tool-tts #root :is(.bg-emerald-400, .bg-emerald-500) {
  background-color: #36744a;
}
body.zh-tool-tts #root .bg-emerald-500.text-white {
  color: #fffefa;
}
body.zh-tool-tts #root :is(.text-amber-300, .text-amber-400, [class~="text-amber-400/80"]) {
  color: #865b10;
}
body.zh-tool-tts #root [class~="bg-amber-500/10"] {
  background-color: #fbf0d9;
}
body.zh-tool-tts #root :is([class~="border-amber-500/20"], [class~="border-amber-500/30"]) {
  border-color: #d9bd7c;
}
body.zh-tool-tts #root .bg-amber-400 {
  background-color: #b58221;
}
body.zh-tool-tts #root :is(.text-rose-200, .text-rose-300, .text-rose-400) {
  color: #a13d4a;
}
body.zh-tool-tts #root :is([class~="bg-rose-500/10"], [class~="bg-rose-950/30"], [class~="bg-rose-950/40"]) {
  background-color: #fae9e9;
}
body.zh-tool-tts #root :is([class~="border-rose-500/20"], [class~="border-rose-500/60"], [class~="border-rose-800/50"], [class~="border-rose-800/60"]) {
  border-color: #d6a0a7;
}
body.zh-tool-tts #root .bg-rose-500 {
  background-color: #ad4051;
}
body.zh-tool-tts #root .bg-rose-500.text-white {
  color: #fffefa;
}
body.zh-tool-tts #root .text-sky-400 {
  color: #326983;
}
body.zh-tool-tts #root [class~="bg-sky-500/10"] {
  background-color: #e7f0f3;
}
body.zh-tool-tts #root [class~="border-sky-500/20"] {
  border-color: #b6cdd7;
}

/* The original dark theme's large black/indigo glows overwhelm light paper. */
body.zh-tool-tts #root :is(.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl) {
  box-shadow: 0 4px 16px rgb(34 62 36 / 6%);
}
body.zh-tool-tts #root .shadow-2xl {
  box-shadow: 0 14px 38px rgb(34 62 36 / 9%);
}
body.zh-tool-tts #root > div > header {
  background-color: rgb(255 254 250 / 96%);
  backdrop-filter: blur(12px);
}
body.zh-tool-tts #root > div > footer {
  background-color: #f0f3e9;
}
body.zh-tool-tts #root main > div > div[class~="rounded-3xl"] {
  box-shadow: none;
}

/* High contrast mode keeps native system controls and visible state borders. */
@media (forced-colors: active) {
  body.zh-tool-tts #root :is(button, input, select, textarea) {
    border: 1px solid ButtonText;
  }
}