/* ============================================================
   gd-content.css — EINZIGE Content-Farbquelle (Ee, MoAI/BB-Auftrag 260707)
   Abnahme (verifyReadability): NUR hsl(var(--t-*)), 0 Literalfarben, 0 !important.
   0 !important reicht, weil Content in .gd-doc gekapselt wird: copas
   !important-Regeln hängen an "main > p" / "> body > h" / ".wrap > p" und
   greifen NICHT auf .gd-doc h2 / .gd-doc .card. Tokens: gdti-tokens.css (7 Styles).
   ============================================================ */

.gd-doc{ max-width:920px; margin:0 auto; padding:0 18px 120px; color:hsl(var(--t-foreground)); }

.gd-doc h1, .gd-doc h2, .gd-doc h3, .gd-doc h4{ color:hsl(var(--t-foreground)); line-height:1.18; }
.gd-doc p, .gd-doc li{ color:hsl(var(--t-foreground)); line-height:1.62; }
.gd-doc .kick{ color:hsl(var(--t-muted-foreground)); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; }
.gd-doc .lead{ color:hsl(var(--t-foreground)); font-size:1.18rem; line-height:1.5; }
.gd-doc .sub{ color:hsl(var(--t-muted-foreground)); font-size:1rem; }
.gd-doc a{ color:hsl(var(--t-accent)); }

.gd-doc .card, .gd-doc .note, .gd-doc .box, .gd-doc .step, .gd-doc .panel{
  background:hsl(var(--t-card));
  color:hsl(var(--t-card-foreground));
  border:1px solid hsl(var(--t-border));
  border-radius:14px;
  padding:16px 18px;
}
.gd-doc .card h1, .gd-doc .card h2, .gd-doc .card h3, .gd-doc .card h4,
.gd-doc .card p, .gd-doc .card li, .gd-doc .card span,
.gd-doc .note h1, .gd-doc .note h2, .gd-doc .note h3, .gd-doc .note p, .gd-doc .note li,
.gd-doc .box p, .gd-doc .box li, .gd-doc .step p, .gd-doc .step li, .gd-doc .panel p, .gd-doc .panel li{
  color:hsl(var(--t-card-foreground));
}
.gd-doc .card .sub, .gd-doc .card small, .gd-doc .card .muted,
.gd-doc .note .sub, .gd-doc .note small,
.gd-doc .box .sub, .gd-doc .step .sub, .gd-doc .panel .sub{
  color:hsl(var(--t-muted-foreground));
}
.gd-doc .card a, .gd-doc .note a, .gd-doc .box a, .gd-doc .step a, .gd-doc .panel a{
  color:hsl(var(--t-accent));
}

.gd-doc table{ border-collapse:collapse; width:100%; }
.gd-doc th, .gd-doc td{
  color:hsl(var(--t-card-foreground));
  background:hsl(var(--t-card));
  border:1px solid hsl(var(--t-border));
  padding:8px 10px; text-align:left;
}
.gd-doc th{ color:hsl(var(--t-foreground)); background:hsl(var(--t-muted)); }
.gd-doc caption{ color:hsl(var(--t-muted-foreground)); padding:6px 0; }

.gd-doc input, .gd-doc textarea, .gd-doc select{
  color:hsl(var(--t-card-foreground));
  background:hsl(var(--t-card));
  border:1px solid hsl(var(--t-border));
  border-radius:8px; padding:8px 10px;
}
.gd-doc ::placeholder{ color:hsl(var(--t-muted-foreground)); }

/* ============================================================
   TRAGE-FLÄCHE (Scrim) — BB-Anweisung A (260709) + bewiesene Erweiterung (MoAI 260710):
   Bei JEDEM Style mit dunklem Vollflächen-Deko-HG (--gf-surface: holz/paris/dawn/tokyo
   + ki-3D-Himmel) liegt freistehender .gd-doc-Text sonst NACKT auf dem HG -> unlesbar.
   Loesung: .gd-doc bekommt eine halbtransparente Token-Trage-Flaeche + backdrop-blur.
   EINE Stelle, alle Seiten, alle dunklen Styles. Helle Styles (default/hawaii) brauchen
   das nicht (heller HG) und bleiben unberuehrt. 0 Literalfarben, 0 !important.
   ============================================================ */
html[data-theme="default"] .gd-doc,
html:not([data-theme]) .gd-doc,
html[data-theme="ki"] .gd-doc,
html[data-theme="paris"] .gd-doc,
html[data-theme="holz"] .gd-doc,
html[data-theme="dawn"] .gd-doc,
html[data-theme="tokyo"] .gd-doc{
  background:hsl(var(--t-background) / 0.86);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  border-radius:16px;
  padding:22px 20px 120px;
}
html[data-theme="default"] .gd-doc .card, html[data-theme="default"] .gd-doc .note,
html[data-theme="default"] .gd-doc .box,  html[data-theme="default"] .gd-doc .panel,
html:not([data-theme]) .gd-doc .card,     html:not([data-theme]) .gd-doc .note,
html:not([data-theme]) .gd-doc .box,      html:not([data-theme]) .gd-doc .panel,
html[data-theme="ki"] .gd-doc .card,   html[data-theme="ki"] .gd-doc .note,
html[data-theme="ki"] .gd-doc .box,     html[data-theme="ki"] .gd-doc .panel,
html[data-theme="paris"] .gd-doc .card, html[data-theme="paris"] .gd-doc .note,
html[data-theme="paris"] .gd-doc .box,  html[data-theme="paris"] .gd-doc .panel,
html[data-theme="holz"] .gd-doc .card,  html[data-theme="holz"] .gd-doc .note,
html[data-theme="holz"] .gd-doc .box,   html[data-theme="holz"] .gd-doc .panel,
html[data-theme="dawn"] .gd-doc .card,  html[data-theme="dawn"] .gd-doc .note,
html[data-theme="dawn"] .gd-doc .box,   html[data-theme="dawn"] .gd-doc .panel,
html[data-theme="tokyo"] .gd-doc .card, html[data-theme="tokyo"] .gd-doc .note,
html[data-theme="tokyo"] .gd-doc .box,  html[data-theme="tokyo"] .gd-doc .panel{
  background:hsl(var(--t-card) / 0.72);
}

/* ============================================================
   MUTED-IN-CARD FIX (Ee, MoAI 260707): --t-muted-foreground ist bei holz/paris HELL
   (fuer dunklen Body-HG). In der HELLEN Card-Flaeche reisst es (CR 1.4/1.6).
   Loesung: Muted-Text INNERHALB Karten/Boxen nutzt card-foreground gedaempft (72% alpha)
   -> gedaempftes, aber lesbares Dunkel in ALLEN 7 Styles (holz 5.98, paris 6.15). 0 !important.
   ============================================================ */
.gd-doc .card .sub,  .gd-doc .card small,  .gd-doc .card .muted,  .gd-doc .card figcaption,
.gd-doc .note .sub,  .gd-doc .note small,  .gd-doc .note .muted,
.gd-doc .box .sub,   .gd-doc .box small,
.gd-doc .step .sub,  .gd-doc .panel .sub,
.gd-doc .ms-sect .kick, .gd-doc .ms-sect .sub, .gd-doc .ms-sect small,
.gd-doc .ms-sect figcaption, .gd-doc .ms-sect .ms-cap{
  color:hsl(var(--t-card-foreground) / 0.72);
}

/* ============================================================
   STYLE-GRUNDREGEL HELL/DUNKEL (Jens/MoAI 260713):
   Pauschale .gd-doc-Trageflaechen raus; nur KI-Himmel bekommt Glas-Scrim.
   Spezialflaechen bleiben semantisch, aber folgen den Style-Tokens.
   ============================================================ */
html[data-theme] .gd-doc,
html:not([data-theme]) .gd-doc{
  background:transparent;
}
html[data-theme=ki] .gd-doc{
  background:hsl(var(--t-background) / 0.72);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  border-radius:16px;
  padding:22px 20px 120px;
}
html[data-theme] .gd-doc .card,
html[data-theme] .gd-doc .note,
html[data-theme] .gd-doc .box,
html[data-theme] .gd-doc .step,
html[data-theme] .gd-doc .panel{
  background:hsl(var(--t-card) / 0.68);
}
html[data-theme] .gd-doc figure,
html[data-theme] .gd-doc figcaption{
  background:transparent;
}
html[data-theme] .gd-doc figcaption{
  color:hsl(var(--t-muted-foreground));
}

/* ============================================================
   LEGACY-VAR-BRIDGE (Jens/MoAI 260713):
   Alte Seitennamen wie --cream/--ink/--orange werden bei Themes auf --t-* gefuehrt.
   Hohe Spezifitaet schlaegt lokale :root-Kopien ohne !important.
   ============================================================ */
html[data-theme][data-theme]{
  --cream:hsl(var(--t-background));
  --cream-deep:hsl(var(--t-card));
  --ink:hsl(var(--t-foreground));
  --ink-soft:hsl(var(--t-foreground) / 0.82);
  --ink-faint:hsl(var(--t-muted-foreground));
  --orange:hsl(var(--t-accent));
  --orange-deep:hsl(var(--t-accent));
  --orange-soft:hsl(var(--t-accent) / 0.12);
  --forest:hsl(var(--t-card));
  --terracotta:hsl(var(--t-accent));
  --border:hsl(var(--t-border) / 0.72);
  --border-soft:hsl(var(--t-border) / 0.38);
}

/* ============================================================
   RELATED-LESBARKEIT HARD OVERRIDE (Jens/MoAI 260713):
   Zusammenhang-Karten folgen strikt --t-*; verhindert weisse Karten mit heller Schrift.
   ============================================================ */
html[data-theme] body .gd-related,
html:not([data-theme]) body .gd-related{
  color:hsl(var(--t-foreground));
}
html[data-theme] body .gd-related h2,
html:not([data-theme]) body .gd-related h2{
  color:hsl(var(--t-foreground));
  background:transparent;
}
html[data-theme] body .gd-related .gd-rel-sub,
html:not([data-theme]) body .gd-related .gd-rel-sub{
  color:hsl(var(--t-muted-foreground));
}
html[data-theme] body .gd-related .gd-rel-cat > h3,
html:not([data-theme]) body .gd-related .gd-rel-cat > h3{
  color:hsl(var(--t-accent));
}
html[data-theme] body .gd-related a.gd-rel-card,
html:not([data-theme]) body .gd-related a.gd-rel-card{
  background:hsl(var(--t-card) / 0.64);
  border-color:hsl(var(--t-border) / 0.72);
  color:hsl(var(--t-card-foreground));
}
html[data-theme] body .gd-related .gd-rel-card .t,
html:not([data-theme]) body .gd-related .gd-rel-card .t{
  color:hsl(var(--t-card-foreground));
}
html[data-theme] body .gd-related .gd-rel-card .k,
html:not([data-theme]) body .gd-related .gd-rel-card .k,
html[data-theme] body .gd-related a.gd-rel-ext .t,
html:not([data-theme]) body .gd-related a.gd-rel-ext .t{
  color:hsl(var(--t-accent));
}
html[data-theme] body .gd-related a.gd-rel-ext .nn,
html:not([data-theme]) body .gd-related a.gd-rel-ext .nn,
html[data-theme] body .gd-related .gd-rel-empty,
html:not([data-theme]) body .gd-related .gd-rel-empty{
  color:hsl(var(--t-muted-foreground));
}

/* RELATED-LESBARKEIT SAFETY IMPORTANT (zentral, nicht Content): alte dynamische CSS-Versionen ueberstimmen */
html[data-theme] body .gd-related h2,
html:not([data-theme]) body .gd-related h2{
  color:hsl(var(--t-foreground)) !important;
  background:transparent !important;
}
html[data-theme] body .gd-related a.gd-rel-card,
html:not([data-theme]) body .gd-related a.gd-rel-card{
  background:hsl(var(--t-card) / 0.92) !important;
  border-color:hsl(var(--t-border) / 0.72) !important;
  color:hsl(var(--t-card-foreground)) !important;
}
html[data-theme] body .gd-related .gd-rel-card .t,
html:not([data-theme]) body .gd-related .gd-rel-card .t{
  color:hsl(var(--t-card-foreground)) !important;
}
html[data-theme] body .gd-related .gd-rel-card .k,
html:not([data-theme]) body .gd-related .gd-rel-card .k,
html[data-theme] body .gd-related a.gd-rel-ext .t,
html:not([data-theme]) body .gd-related a.gd-rel-ext .t{
  color:hsl(var(--t-accent)) !important;
}

/* RELATED-LESBARKEIT FINAL: Flaeche auf Seiten-Grund statt potenziell altem Card-Token
   MoAI 260713: auf Jens' Screenshot waren Related-Karten zu transparent;
   ca. 50% weniger Transparenz: Alpha 0.58 -> 0.86. */
html[data-theme] body .gd-related a.gd-rel-card,
html:not([data-theme]) body .gd-related a.gd-rel-card{
  background:hsl(var(--t-background) / 0.86) !important;
  background-color:hsl(var(--t-background) / 0.86) !important;
  background-image:none !important;
  border-color:hsl(var(--t-border) / 0.88) !important;
  color:hsl(var(--t-foreground)) !important;
}
html[data-theme] body .gd-related .gd-rel-card .t,
html:not([data-theme]) body .gd-related .gd-rel-card .t{
  color:hsl(var(--t-foreground)) !important;
}

/* === MoAI 260713 related-headfix: Related-Head/Subline auf dunklem Voll-HG hell tragen === */
html[data-theme="default"] body[data-style="vibes"] .gd-related h2,
html:not([data-theme]) body[data-style="vibes"] .gd-related h2,
html[data-theme="holz"] body .gd-related h2,
html[data-theme="paris"] body .gd-related h2,
html[data-theme="tokyo"] body .gd-related h2,
html[data-theme="ki"] body .gd-related h2,
html[data-theme="dawn"] body .gd-related h2{
  color:hsl(var(--t-card)) !important;
  text-shadow:0 1px 10px hsl(var(--t-foreground) / .55) !important;
}
html[data-theme="default"] body[data-style="vibes"] .gd-related .gd-rel-sub,
html:not([data-theme]) body[data-style="vibes"] .gd-related .gd-rel-sub,
html[data-theme="holz"] body .gd-related .gd-rel-sub,
html[data-theme="paris"] body .gd-related .gd-rel-sub,
html[data-theme="tokyo"] body .gd-related .gd-rel-sub,
html[data-theme="ki"] body .gd-related .gd-rel-sub,
html[data-theme="dawn"] body .gd-related .gd-rel-sub{
  color:hsl(var(--t-card) / .82) !important;
  text-shadow:0 1px 8px hsl(var(--t-foreground) / .45) !important;
}

/* MoAI 260713 voice test: dark voice cards need explicit light text in default theme */
.tts-test-page .gd-doc .voice-card,
.tts-test-page .gd-doc .voice-card h2,
.tts-test-page .gd-doc .voice-card p,
.tts-test-page .gd-doc .voice-card small,
.tts-test-page .gd-doc .voice-card strong,
.tts-test-page .gd-doc .voice-card code{ color:hsl(var(--t-foreground)) !important; }
.tts-test-page .gd-doc .voice-card{ background:hsl(var(--t-card) / .88) !important; border-color:hsl(var(--t-foreground) / .24) !important; }
.tts-test-page .gd-doc .voice-status{ color:hsl(var(--t-card)) !important; }
html:not([data-theme="paris"]):not([data-theme="dawn"]):not([data-theme="tokyo"]):not([data-theme="ki"]) body.tts-test-page[class] .gd-doc [class*="voice-card"] :is(h1,h2,h3,h4,p,li,small,strong,span,code){ color:hsl(var(--t-foreground)) !important; }


/* MoAI 260717 readable standard classes — use on every new page/story */
.gd-readable{color:hsl(var(--t-foreground));}
.gd-readable-title,.gd-display-title,.gd-page-title{font-family:'Fraunces',serif;font-weight:800;line-height:.96;letter-spacing:-.025em;color:hsl(var(--t-foreground));}
.gd-readable-kicker,.gd-readable-meta,.gd-readable-sub{font-family:'Oswald',sans-serif;letter-spacing:.08em;color:hsl(var(--t-muted-foreground));}
.gd-readable-section,.gd-section-title{font-family:'Oswald',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:hsl(var(--t-foreground));border-bottom:2px solid hsl(var(--t-border));}
html[data-theme="holz"] .gd-readable-title,html[data-theme="holz"] .gd-display-title,html[data-theme="holz"] .gd-page-title,html[data-theme="holz"] .gd-section-title,
html[data-theme="paris"] .gd-readable-title,html[data-theme="paris"] .gd-display-title,html[data-theme="paris"] .gd-page-title,html[data-theme="paris"] .gd-section-title,
html[data-theme="tokyo"] .gd-readable-title,html[data-theme="tokyo"] .gd-display-title,html[data-theme="tokyo"] .gd-page-title,html[data-theme="tokyo"] .gd-section-title{color:hsl(var(--t-foreground));}