/* Impeccable colorize — 2026-08-22.
   Contrast-only typography pass for the dark stadium/glass surface.
   No layout, spacing, background, navigation, content or interaction changes. */

:root{
  --colorize-text:#fff;
  --colorize-text-strong:rgba(255,255,255,.94);
  --colorize-muted:rgba(255,255,255,.78);
  --colorize-soft:rgba(255,255,255,.66);
  --colorize-accent:#ff334d;
  --colorize-control-active:#98142c;
  --colorize-tab-ink:#40373b;
  --colorize-on-light:#2b2226;
}

/* Shared sub-page hierarchy: headings stay crisp, explanatory copy becomes
   clearly readable over both dark stands and bright stadium light patches. */
html[data-ui="liquid-glass-v2"] body .screen:not(#today){
  color:var(--colorize-text)!important;
}
html[data-ui="liquid-glass-v2"] body .screen:not(#today) .page-head h1,
html[data-ui="liquid-glass-v2"] body .screen:not(#today) .day-detail-head h1,
html[data-ui="liquid-glass-v2"] body .screen:not(#today) .card h2,
html[data-ui="liquid-glass-v2"] body .screen:not(#today) .card h3,
html[data-ui="liquid-glass-v2"] body .screen:not(#today) .card strong,
html[data-ui="liquid-glass-v2"] body .screen:not(#today) .title{
  color:var(--colorize-text)!important;
}
html[data-ui="liquid-glass-v2"] body .screen:not(#today) .page-head p,
html[data-ui="liquid-glass-v2"] body .screen:not(#today) .day-detail-head p,
html[data-ui="liquid-glass-v2"] body .screen:not(#today) .muted{
  color:var(--colorize-muted)!important;
}
html[data-ui="liquid-glass-v2"] body .screen:not(#today) .section-kicker,
html[data-ui="liquid-glass-v2"] body .screen:not(#today) .eyebrow{
  color:var(--colorize-soft)!important;
}

/* Glass segmented controls: inactive labels use a light neutral tone. The
   selected inset is comparatively bright, so its active label uses deep red
   instead of low-contrast white. */
html[data-ui="liquid-glass-v2"] body .subnav-tab,
html[data-ui="liquid-glass-v2"] body .flow-tab{
  color:var(--colorize-muted)!important;
}
html[data-ui="liquid-glass-v2"] body .subnav-tab.active,
html[data-ui="liquid-glass-v2"] body .flow-tab.active{
  color:var(--colorize-control-active)!important;
}

/* Exercise library: these three legacy selectors still carried light-theme
   gray/red values and were the main readability problem in the approved view. */
html[data-ui="liquid-glass-v2"] body #exercises .ex-group-head{
  color:var(--colorize-soft)!important;
}
html[data-ui="liquid-glass-v2"] body #exercises .detail{
  color:var(--colorize-text-strong)!important;
}
html[data-ui="liquid-glass-v2"] body #exercises .cue{
  color:var(--colorize-accent)!important;
}
html[data-ui="liquid-glass-v2"] body #exercises .source{
  color:var(--colorize-soft)!important;
}

/* The same exercise text classes can occur in training/day-detail cards. */
html[data-ui="liquid-glass-v2"] body #day-detail .detail,
html[data-ui="liquid-glass-v2"] body #day-detail .day-prescription{
  color:var(--colorize-text-strong)!important;
}
html[data-ui="liquid-glass-v2"] body #day-detail .cue{
  color:var(--colorize-accent)!important;
}
html[data-ui="liquid-glass-v2"] body #day-detail .source{
  color:var(--colorize-soft)!important;
}

/* Day detail: only the cards inside "Deine Übungen" receive this local
   readability correction. Check-in/check-out flow cards remain untouched. */
html[data-ui="liquid-glass-v2"] body #day-detail .day-exercise h3{
  color:var(--colorize-text)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
html[data-ui="liquid-glass-v2"] body #day-detail .day-exercise p{
  color:rgba(255,255,255,.86)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
html[data-ui="liquid-glass-v2"] body #day-detail .day-exercise .day-prescription span{
  color:var(--colorize-on-light)!important;
  text-shadow:none!important;
}

/* Analytics copy and legends on the glass cards. */
html[data-ui="liquid-glass-v2"] body #analytics .an-sub,
html[data-ui="liquid-glass-v2"] body #analytics .an-empty,
html[data-ui="liquid-glass-v2"] body #analytics .an-legend,
html[data-ui="liquid-glass-v2"] body #analytics .an-key,
html[data-ui="liquid-glass-v2"] body #analytics .an-detail,
html[data-ui="liquid-glass-v2"] body #analytics .an-heat .an-lbl,
html[data-ui="liquid-glass-v2"] body #analytics .an-heat .an-day,
html[data-ui="liquid-glass-v2"] body #analytics .an-table th,
html[data-ui="liquid-glass-v2"] body #analytics .playtime-hint{
  color:var(--colorize-muted)!important;
}
html[data-ui="liquid-glass-v2"] body #analytics .an-hero-text .an-sub{
  color:var(--colorize-text-strong)!important;
}
html[data-ui="liquid-glass-v2"] body #analytics .an-table summary{
  color:var(--colorize-accent)!important;
}

/* Analytics stat boxes keep their existing light inset surface, therefore text
   inside them deliberately remains dark for contrast. */
html[data-ui="liquid-glass-v2"] body #analytics .an-stat,
html[data-ui="liquid-glass-v2"] body #analytics .an-stat b{
  color:#211a1d!important;
}
html[data-ui="liquid-glass-v2"] body #analytics .an-stat small,
html[data-ui="liquid-glass-v2"] body #analytics .an-stat em{
  color:#5d5458!important;
}

/* Analytics SVG labels are created with legacy presentation attributes in
   analytics.js. CSS intentionally overrides only their text fill; data colors,
   bars, rings and chart geometry remain untouched. */
html[data-ui="liquid-glass-v2"] body #analytics .an-hero > svg text:first-of-type{
  fill:var(--colorize-text)!important;
}
html[data-ui="liquid-glass-v2"] body #analytics .an-hero > svg text:last-of-type{
  fill:var(--colorize-soft)!important;
}
html[data-ui="liquid-glass-v2"] body #analytics .an-chart svg text{
  fill:var(--colorize-muted)!important;
}

/* The sleep range selector is intentionally a light inset control. Its labels
   therefore remain dark rather than being forced to white by the page palette. */
html[data-ui="liquid-glass-v2"] body #analytics .an-tabs button{
  color:var(--colorize-tab-ink)!important;
}
html[data-ui="liquid-glass-v2"] body #analytics .an-tabs button[aria-selected="true"]{
  color:#211a1d!important;
}

/* Bottom dock is outside the screen elements and therefore gets its own
   contrast rule. Preserve the single red active destination. */
html[data-ui="liquid-glass-v2"] body .bottom .nav{
  color:rgba(255,255,255,.82)!important;
}
html[data-ui="liquid-glass-v2"] body .bottom .nav.active{
  color:var(--colorize-accent)!important;
}
