/* ============================================================
   shared.css  –  broca platform: design tokens & shared components
   Single source of truth for all pages.

   3-LAYER TOKEN SYSTEM
     1) BRAND  — per-program identity (somnovia here), swappable
     2) ROLES  — semantic, program-independent; COMPONENTS use these
     3) MODE   — dark / Nachtmodus overrides (filled in Block 2b)
   Light mode == current look. All role values map 1:1 to today's colors.
   ============================================================ */

/* === BRAND LAYER (somnovia) — pro Programm austauschbar ===
   Tausche dieses Block-Set, um ein anderes Programm zu branden
   (Farben hier; Logo/Icon/Illustrationen liegen in /static/ und werden
   in den Seiten direkt referenziert, z.B. /static/Illu_*.png und inline-SVG-Logos).
   Primärfarbe ist über das Logo definiert: --brand-primary-dark (#362B62). */
:root{
  /* Raw brand palette (somnovia blue-violet) — canonical source of truth */
  --brand-primary:#6558A6;        /* dominant interactive brand hue */
  --brand-primary-light:#9088C0;
  --brand-primary-mid:#4E4290;    /* gradient mid stop */
  --brand-primary-dark:#362B62;   /* LOGO color */
  --brand-primary-deep:#2A2150;   /* deepest shade */
  --brand-secondary:#5892B5;      /* blue */
  --brand-secondary-light:#8ABBD4;
  --brand-indigo:#7079C9;         /* periwinkle accent (heatmap/checkin) */

  /* Brand RGB triplets — for rgba() alpha compositing (1:1 with hex above) */
  --brand-primary-rgb:101,88,166;        /* #6558A6 */
  --brand-primary-dark-rgb:54,43,98;     /* #362B62 */
  --brand-primary-deep-rgb:42,33,80;     /* #2A2150 */
  --brand-secondary-rgb:88,146,181;      /* #5892B5 */
  --brand-secondary-light-rgb:138,187,212; /* #8ABBD4 */

  /* Back-compat aliases — keep Block-1 names working (resolve to the same value) */
  --brand-purple:var(--brand-primary);
  --brand-purple-light:var(--brand-primary-light);
  --brand-purple-mid:var(--brand-primary-mid);
  --brand-purple-dark:var(--brand-primary-dark);
  --brand-purple-deep:var(--brand-primary-deep);
  --brand-pink:var(--brand-secondary);
  --brand-pink-light:var(--brand-secondary-light);
  --brand-purple-rgb:var(--brand-primary-rgb);
  --brand-purple-dark-rgb:var(--brand-primary-dark-rgb);
  --brand-purple-deep-rgb:var(--brand-primary-deep-rgb);
  --brand-pink-rgb:var(--brand-secondary-rgb);
  --brand-pink-light-rgb:var(--brand-secondary-light-rgb);

  /* Brand gradients (identity) */
  --gradient-bg:linear-gradient(155deg,var(--brand-primary-light) 0%,var(--brand-primary) 30%,var(--brand-primary-mid) 70%,var(--brand-primary-dark) 100%);
  --gradient-progress:linear-gradient(90deg,var(--brand-secondary-light),var(--brand-secondary));
}

/* === NEUTRALS & SHARED PRIMITIVES (program-independent base) === */
:root{
  --white:#fff;
  --white-rgb:255,255,255;
  --black-rgb:0,0,0;
  /* Opaque surface base for translucent cards. Light = white (1:1, no change);
     dark mode flips ONLY this triplet so frosted white cards become dark surfaces,
     while low-alpha white glints/borders stay white. */
  --surface-rgb:var(--white-rgb);
  /* Body/copy text base used by rgba(...,alpha) text throughout the app.
     Light = brand-dark ink (#362B62, 1:1 no change); dark mode flips this triplet
     so all alpha-based body/secondary/small text becomes light & readable. */
  --text-rgb:var(--brand-primary-dark-rgb);
  --surface-violet:#ECEAF4;       /* app canvas tint */
  --desktop-bg:#D4D2DE;           /* desktop body backdrop (>=900px) */

  /* Neutral text scale */
  --text-dark:#2A2150;
  --text-muted-dark:#6B6088;
  --text-light-page:#505050;
  --text-muted-light:#767676;

  /* Legacy accent aliases (kept; resolve 1:1) */
  --accent:#544A8A;
  --accent-light:#9088C0;
  --accent-dark:#362B62;

  /* Glass hierarchy (light → strong → dark) */
  --glass-white:rgba(var(--white-rgb),.48);
  --glass-white-strong:rgba(var(--white-rgb),.62);
  --glass-subtle:rgba(var(--white-rgb),.20);
  --glass-dark:rgba(var(--brand-primary-deep-rgb),.62);
  --glass-quote:rgba(60,50,100,.38);

  /* Shared geometry */
  --radius:16px;
  --radius-lg:20px;
  --radius-sm:12px;
  --bottom-nav-h:64px;
  /* Einheitliche Seiten-Spaltenbreite: zentrierte Spalte mit kleinem Seitenrand –
     volle, standalone Seiten (kein schmaler Feed-Streifen mehr). Alle vier
     Vollseiten (Profil, Wissen, Tracker, Tagebuch) richten ihren Inhalts-/
     Rahmenrand an --page-gutter aus, damit sie identisch fluchten und breit
     stehen (nur ein dezenter Rand zum Bildschirm). */
  --page-max:460px;
  --page-gutter:1.25rem;

  /* Typography — families */
  --font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:'Source Serif 4',Georgia,'Times New Roman',serif;

  /* Typography — scale (5 steps) */
  --text-display:1.2rem;
  --text-heading:1.1rem;
  --text-body:.9rem;
  --text-small:.78rem;
  --text-caption:.65rem;

  /* Decorative outline gradients (generic) */
  --gradient-outline:linear-gradient(170deg,rgba(var(--white-rgb),.3),rgba(var(--white-rgb),.05));
  --gradient-outline-purple:linear-gradient(170deg,rgba(160,150,200,.3),rgba(80,60,140,.06));

  /* Transitions */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
}

/* === ROLE LAYER (semantic, geteilt, programm-unabhängig) ===
   COMPONENTS should reference these. Light-mode values below = current look (1:1).
   Block 2b overrides ONLY these (globally and/or per page) for dark mode;
   the BRAND layer above stays untouched (Marken-Identität bleibt). */
:root{
  /* iOS Safari: Dokument als hell deklarieren, damit die Browser-Leisten zur
     hellen Seite (#ECEAF4) passen. Dark-Override unten via color-scheme:dark. */
  color-scheme:light;
  /* Backgrounds & surfaces */
  --color-bg:var(--surface-violet);          /* #ECEAF4 — app canvas */
  --color-bg-desktop:var(--desktop-bg);      /* #D4D2DE — desktop backdrop */
  --color-surface:var(--white);              /* #fff — cards / sheets */
  --color-surface-2:var(--surface-violet);   /* #ECEAF4 — muted panels */

  /* Text */
  --color-text:var(--brand-primary-dark);    /* #362B62 — primary text */
  --color-text-muted:var(--text-muted-dark); /* #6B6088 */
  --color-text-subtle:var(--text-muted-light); /* #767676 */
  --color-on-primary:var(--white);           /* #fff — text/icon on brand fills */

  /* Brand-driven roles */
  --color-primary:var(--brand-primary);             /* #6558A6 */
  --color-primary-strong:var(--brand-primary-dark); /* #362B62 */
  --color-accent:var(--brand-secondary);            /* #5892B5 — nav active / accents */
  --color-accent-light:var(--brand-secondary-light);/* #8ABBD4 */

  /* Schlafeffizienz-Komposition (gestapelte Nacht-Zusammensetzung in der
     7-Tage-Detailgrafik). EINE zentrale Quelle, damit Schlaf/Einschlafen/Wach
     überall identisch sind. Bewusste Semantik: der farbige Anteil = effiziente
     Schlafzeit (Brand-Violett), das Grau = verlorene Zeit (Einschlafdauer + Wach).
     Grautöne aus --text-rgb abgeleitet → flippen automatisch im Dark-/Nachtmodus
     und heben sich klar von der blauen To-Do-Palette ab. */
  --color-se-sleep:var(--color-primary);            /* effizienter Schlaf — Brand-Violett */
  --color-se-sol:rgba(var(--text-rgb),.22);         /* Einschlafen (SOL) — helleres Grau */
  --color-se-wake:rgba(var(--text-rgb),.42);        /* Wachzeit (WASO) — kräftigeres Grau */

  /* Durchgängige Zustands-Farben (EINE zentrale Quelle) für Faktor-/Toggle-Knöpfe
     und Wochenrückblick-Punkte. Bewusste, überall identische Semantik:
       grau     = nicht ausgewählt / nicht angegeben
       Violett  = „Nein" bzw. niedrigste Stufe (St1)   → Brand-Violett (--color-primary)
       Blau     = „Ja"  bzw. höchste Stufe (St3)        → etabliertes To-Do-/„heute"-Blau (#8ABBD4)
       Mischwert= 3er-Toggle-Mitte (St2)                → 50/50 zwischen Violett & Blau
     Alle token-basiert → flippen automatisch im Dark-/Nachtmodus. */
  --color-state-off:rgba(var(--text-rgb),.30);
  --color-state-low:var(--color-primary);
  --color-state-high:var(--color-accent-light);
  --color-state-mid:color-mix(in srgb,var(--color-primary) 50%,var(--color-accent-light) 50%);

  /* Tagebuch – ZWEI getrennte Stimmungs-Rampen (je 5 Stufen, gespeist von den
     somnovia-Katzenbildern schlaf-1…5.png). Bewusst zwei Farb-Familien, damit
     Farbe = Skala EINDEUTIG ist:
       Energie  → Blau/Cyan   : 1 (Hellwach, helles Cyan) → 5 (Erschöpft, tiefes Indigoblau)
       Stimmung → Violett/Rosé: 1 (Sehr gut, warmes Rosé)  → 5 (Schwer, tiefes Violett)
     Tag-Gradient = linear-gradient(135deg, var(--energie-<e>), var(--stimmung-<s>)):
     gleiche Stufe beidseitig ⇒ klarer Zwei-Familien-Verlauf, sonst echter Übergang.
     Dark-Mode-Werte unten angehoben für Kontrast auf dunklem Canvas. */
  --energie-1:#46E4F4;   /* Hellwach – helles, brillantes Cyan (beste Stufe) */
  --energie-2:#23C4DD;   /* Munter – klar positives Cyan */
  --energie-3:#2D72A4;   /* Neutral – somnovia-Blau */
  --energie-4:#294A6E;   /* Müde */
  --energie-5:#263A63;   /* Erschöpft – tiefes Indigoblau (düster, nicht schwarz) */
  --stimmung-1:#FAA6C2;  /* Sehr gut – helles, warmes Rosé (beste Stufe) */
  --stimmung-2:#E985B2;  /* Gut – klar positives Rosé */
  --stimmung-3:#9E4F92;  /* Neutral */
  --stimmung-4:#5E3878;  /* Bedrückt */
  --stimmung-5:#432F66;  /* Schwer – tiefes Violett (düster, nicht schwarz) */

  /* Tagebuch-Akzente – bewusst AUSSERHALB beider Stimmungs-Rampen:
       today  = warmes Gold/Amber → Kalender-„heute"-Outline, nicht mit Mood verwechselbar
       danger = Rosé → Löschen-Aktion
     Beide mode-aware (Dark-Werte unten). */
  --journal-today:#E2A12C;
  --journal-danger:#C0566A;

  /* Borders */
  --color-border:rgba(var(--brand-primary-rgb),.25);  /* #6558A6 @ 25% */
  --color-border-subtle:rgba(var(--black-rgb),.06);   /* hairline */

  /* Elevation / shadow */
  --shadow-color:var(--black-rgb);                    /* 0,0,0 triplet */
  --shadow-sm:0 1px 4px rgba(var(--shadow-color),.12);
  --shadow-md:0 4px 16px rgba(var(--shadow-color),.18);

  /* Knowledge-card category tints (wissen.html .wk-v1..v6) */
  --color-card-1:rgba(var(--white-rgb),.82);
  --color-card-2:rgba(var(--white-rgb),.65);
  --color-card-3:rgba(200,190,230,.35);
  --color-card-4:rgba(60,50,100,.38);
  --color-card-5:rgba(var(--brand-primary-deep-rgb),.55);
  --color-card-6:rgba(var(--brand-primary-deep-rgb),.70);
}

/* === MODE LAYER (dark / Nachtmodus) — befüllt in Block 2b ===
   Aktiviert über <html data-theme="dark"> (gesetzt vom early-theme-Script in jeder
   Seite, gespeist aus localStorage somnovia_darkmode / somnovia_nightmode).
   Überschrieben werden NUR ROLE-Variablen (--color-*, --shadow-*) und program-
   unabhängige NEUTRAL-Primitive (Text/Surface/Glass). Die BRAND-Schicht
   (--brand-* / --gradient-*) bleibt unangetastet → Marken-Identität erhalten.
   Light-Mode (ohne data-theme) bleibt 1:1 wie zuvor. */
:root[data-theme="dark"],
:root.nightmode{
  /* iOS Safari: Browser-Chrome (obere/untere Leiste) sowie native Controls/
     Scrollbars in Dunkel rendern. Ohne dies bleibt das Dokument-`color-scheme`
     hell, und Safari tönt die untere Leiste hell – sie weicht dann von der
     dunklen Seite ab (theme-color allein reicht auf iOS nicht zuverlässig). */
  color-scheme:dark;
  /* ---- ROLE overrides: deep, calm, sleep-friendly blue-violet ---- */
  /* Backgrounds & surfaces (bg darkest → surface-2 → surface raised) */
  --color-bg:#1A1226;                 /* app canvas, warm deep night-violet (26,18,38) */
  --color-bg-desktop:#120D1B;         /* desktop backdrop, near-black warm (18,13,27) */
  --color-surface:#221A31;            /* cards / sheets (raised) (34,26,49) */
  --color-surface-2:#1C152D;          /* muted panels (between bg & surface) (28,21,45) */

  /* Text — soft off-white, never #fff; muted tiers lifted for readable body/copy */
  --color-text:#E6E3F2;               /* headlines/primary — unverändert (gut lesbar) */
  --color-text-muted:#D7D2EE;         /* body/secondary copy — leicht angehoben (Dark) */
  --color-text-subtle:#C4BEE2;        /* smallest/meta text — leicht angehoben (Dark) */
  --color-on-primary:#F3F0FB;         /* on brand fills, soft not pure white */

  /* Brand-driven roles — stay violet, slightly lifted for legibility on dark */
  --color-primary:#7A6CC0;
  --color-primary-strong:#9387CF;
  --color-accent:#7FB5D6;
  --color-accent-light:#9CCBE4;

  /* Tagebuch – zwei getrennte Rampen, auf dem dunklen Canvas angehoben (gleiche
     Reihenfolge/Semantik wie Light: Energie 1 Cyan→5 Indigoblau, Stimmung 1 Rosé→5 Violett). */
  --energie-1:#5BDDEE;   /* Hellwach */
  --energie-2:#46B2D3;   /* Munter */
  --energie-3:#3E84B4;   /* Neutral */
  --energie-4:#3C5E86;   /* Müde */
  --energie-5:#34406A;   /* Erschöpft (düster, auf dunklem Canvas sichtbar) */
  --stimmung-1:#F2A0BD;  /* Sehr gut */
  --stimmung-2:#D67FAE;  /* Gut */
  --stimmung-3:#AC5FA4;  /* Neutral */
  --stimmung-4:#7A4F9E;  /* Bedrückt */
  --stimmung-5:#4E3E72;  /* Schwer (düster, auf dunklem Canvas sichtbar) */
  --journal-today:#F2C14E;   /* helleres Gold für dunklen Canvas */
  --journal-danger:#D87E8E;  /* Rosé (heller) */

  /* Mode-aware lift of the mid-violet brand alias. #4E4290 wird quer durchs
     Dashboard direkt als TEXT-Farbe genutzt (Überschriften, Inline-Links, Chips,
     Chat-Bubbles, Icon-Strokes). Auf dem dunklen Canvas saß der frühere #6f59ad
     auf --color-surface (#221A31) nur bei ~2,9:1 → bei Tageslicht zu dunkel/
     unleserlich (vom Nutzer gemeldet, v. a. der hinterlegte about_me-Link
     „Oder möchtest du …"). Auf einen kräftiger gesättigten, helleren Violett-Ton
     (#9A7BE6, ~68% Sättigung statt der ~43% von #9387CF) angehoben → wirkt
     lebendiger statt „grau-lila" und klärt ~5,0:1 (AA). Es wird NUR der Alias gehoben
     (nicht der rohe --brand-primary-mid): Light bleibt dunkler, die kanonische
     --gradient-bg (auf --brand-primary-mid) bleibt unangetastet, und alle
     rgba(--brand-purple-rgb)-Tints bleiben identisch (eigene Variable).
     EINZIGE Füllfläche mit Text darauf ist .persona-cta a:hover – die wird unten
     dark-spezifisch auf den dunkleren Ton gepinnt, damit Weiß darauf AA hält. */
  --brand-purple-mid:#9A7BE6;   /* gesättigter Violett-Ton, ~5,0:1 auf #221A31 (AA) */

  /* Borders — faint light lines on dark (instead of dark-on-dark) */
  --color-border:rgba(var(--white-rgb),.16);
  --color-border-subtle:rgba(var(--white-rgb),.08);

  /* Elevation — shadows do little on dark; rely on lighter surfaces + faint depth */
  --shadow-color:0,0,0;
  --shadow-sm:0 1px 4px rgba(0,0,0,.45);
  --shadow-md:0 8px 24px rgba(0,0,0,.55);

  /* Knowledge-card category tints — muted, distinguishable, low-glare */
  --color-card-1:rgba(var(--white-rgb),.07);
  --color-card-2:rgba(var(--white-rgb),.045);
  --color-card-3:rgba(150,140,205,.16);
  --color-card-4:rgba(95,85,150,.24);
  --color-card-5:rgba(var(--brand-primary-rgb),.30);
  --color-card-6:rgba(var(--brand-primary-rgb),.46);

  /* ---- NEUTRAL primitives flipped for dark (program-independent; NOT brand identity) ----
     These are text/surface neutrals reused across components that were not yet
     role-mapped in 2a. Flipping them here keeps text readable & cards dark without
     touching the brand gradient (--brand-* / --gradient-* stay untouched). */
  --surface-rgb:34,26,49;             /* #221A31 — frosted card base flips dark (warm) */
  --text-rgb:224,220,242;             /* #E0DCF2 — alpha-based body/copy text flips light */
  --surface-violet:#1C152D;           /* canvas-tint panels → dark (warm) */
  --desktop-bg:#120D1B;

  --text-dark:#E6E3F2;
  --text-muted-dark:#CDC8E6;          /* lifted (was too dark for body copy) */
  --text-light-page:#DAD5EE;          /* reading body — lifted */
  --text-muted-light:#B4AED4;         /* small/meta — lifted */
  --accent:#A99DDE;                   /* legacy accent (text/links) — lifted */
  --accent-dark:#A99DDA;              /* used as accent button hover bg */
  --accent-light:#C2BAE6;

  /* Glass hierarchy → dark frosted surfaces */
  --glass-white:rgba(var(--surface-rgb),.55);
  --glass-white-strong:rgba(var(--surface-rgb),.72);
  --glass-subtle:rgba(var(--surface-rgb),.30);
}

/* === REDUCED NIGHT VIEW (technically separate from dark colors) ===
   `.reduced` is applied ONLY by the Nachtmodus evening automatic (dark + reduction);
   the standalone Dunkelmodus sets dark colors WITHOUT this class.
   Keep conservative: calm down decorative effects, never hide functional UI. */
:root.reduced .logo-fab-blur{opacity:.4}
/* Nacht-/Reduced-Modus: den Hinweis NUR im sichtbaren Zustand dezenter zeigen
   (0.55 statt 1). Früher pauschal auf `.scroll-hint` → übersteuerte das
   Basis-`opacity:0` (0,3,0 > 0,1,0) und ließ die „weiterscrollen"-Pille
   dauerhaft halb sichtbar, obwohl die JS-Logik sie (buildNight: _ctaSuppressHint)
   bewusst unterdrückt. Auf `.visible` gescoped folgt sie wieder der Show/Hide-Logik. */
:root.reduced .scroll-hint.visible{opacity:.55}
:root.reduced .reveal{transition-duration:.4s}

/* === DARK: brand/literal marks that can't use var() (logo SVG strokes/fills) ===
   The wordmark logos hard-code #362B62 (brand) in SVG attributes, which would
   vanish on dark. Lift the stroked wordmark + the single filled brand dot to a
   soft lavender so identity stays readable. (`:not([fill])` keeps the stroke off
   the filled dot so no stray outline appears.) */
:root[data-theme="dark"] .top-bar-logo path:not([fill]):not([stroke="none"]),
:root[data-theme="dark"] .conv-logo path:not([fill]):not([stroke="none"]),
:root[data-theme="dark"] .sidebar-logo svg path:not([fill]):not([stroke="none"]){stroke:#C9C2E8}
:root[data-theme="dark"] .top-bar-logo path[fill="#362B62"],
:root[data-theme="dark"] .conv-logo path[fill="#362B62"],
:root[data-theme="dark"] .sidebar-logo svg path[fill="#362B62"]{fill:#C9C2E8}

/* === DARK: literal light surfaces flipped + controls/placeholders kept readable ===
   These page-local elements hard-code near-white backgrounds (so they would stay
   light islands) or are inputs with dark placeholder ink. Dark-only overrides keep
   them consistent & legible. Light mode is untouched. */
/* near-white literal boxes that hold body copy -> dark surface */
:root[data-theme="dark"] .ex-overlay-tip,
:root[data-theme="dark"] .article-tipbox{background:var(--color-surface-2)}
/* selects & filter chips (keep the dropdown-arrow image, flip color + text) */
:root[data-theme="dark"] .ex-sleep-select,
:root[data-theme="dark"] .ex-ctx-line-select,
:root[data-theme="dark"] .wk-filter-chip{background-color:var(--color-surface-2);color:var(--color-text-muted)}
/* subtle hover fills that used near-white literals */
:root[data-theme="dark"] .seg-text a:hover,
:root[data-theme="dark"] .seg-text a:active,
:root[data-theme="dark"] .followup-text a:hover,
:root[data-theme="dark"] .followup-text a:active,
:root[data-theme="dark"] .tr-open:hover,
:root[data-theme="dark"] .tr-open:active,
:root[data-theme="dark"] .am-weiche-link:hover,
:root[data-theme="dark"] .am-weiche-link:active,
:root[data-theme="dark"] .wk-chip:hover,
:root[data-theme="dark"] .wk-chip:active,
:root[data-theme="dark"] .icon-btn:hover{background-color:rgba(var(--white-rgb),.14)}
/* Inline-Link-„Pille": die hinterlegte Fläche (--color-surface #221A31) hob sich
   im Dark-Mode bei hellem Umgebungslicht kaum vom Canvas (#1A1226) ab. Etwas
   heller füllen (#2A2140) + dezenter Innen-Ring zur klaren Abgrenzung (kein
   Layout-Shift). Fill bleibt dunkel genug, dass der violette Linktext (#9A7BE6)
   weiter ~4,6:1 (AA) klärt. .tr-open/.am-weiche-link erbten zuvor keinen Dark-
   Hover-Override → ihr heller Basis-Hover (#f0eef6) wird oben mit abgefangen. */
:root[data-theme="dark"] .seg-text a,
:root[data-theme="dark"] .followup-text a,
:root[data-theme="dark"] .tr-open,
:root[data-theme="dark"] .am-weiche-link{
  background:#2A2140;
  box-shadow:inset 0 0 0 1px rgba(var(--white-rgb),.12);
}
/* .persona-cta a:hover füllt mit --brand-purple-mid (im Dark-Mode auf #9387CF
   angehoben). Der CTA-Text ist .92rem/600 → KEIN WCAG-„large text"; Weiß auf
   #9387CF läge nur bei ~3,2:1. Daher den Hover-Fill hier auf den dunkleren Ton
   (#6f59ad) pinnen, damit weiße Schrift ~5,7:1 (AA) hält – ohne die jetzt hellere
   TEXT-Variante des Alias zurückzunehmen. */
:root[data-theme="dark"] .persona-cta a:hover{background:#6f59ad}
/* input placeholders that used dark ink -> readable muted-light */
:root[data-theme="dark"] .conv-ask-field::placeholder,
:root[data-theme="dark"] .di-ref-textarea::placeholder,
:root[data-theme="dark"] .di-custom-add input::placeholder,
:root[data-theme="dark"] .ref-input::placeholder,
:root[data-theme="dark"] .ref-textarea::placeholder{color:rgba(var(--white-rgb),.45)}
/* bottom fade-out overlays (feed + FAB) hard-code light fades -> fade into the dark canvas.
   26,18,38 == --color-bg (#1A1226) in rgb form for the transparent gradient stops. */
:root[data-theme="dark"] .conv-progress-wrap{
  background:linear-gradient(to bottom, rgba(26,18,38,0) 0%, rgba(26,18,38,.8) 30%, var(--color-bg) 60%);
}
:root[data-theme="dark"] .logo-fab-blur{
  background:linear-gradient(to bottom, rgba(26,18,38,0) 0%, rgba(26,18,38,.6) 45%, rgba(26,18,38,1) 88%);
}
/* PWA-Statusleisten-Scrim: saubere Fläche unter den OS-Symbolen (Uhr/Akku) in
   Standalone. Hell im Page-CSS (#ECEAF4), hier die Dark-Variante (26,18,38 ==
   --color-bg). Höhe == env(safe-area-inset-top) -> im Browser 0px = unsichtbar. */
:root[data-theme="dark"] .pwa-status-scrim{
  background:linear-gradient(180deg, rgb(26,18,38) 0%, rgb(26,18,38) 70%, rgba(26,18,38,0) 100%);
}
/* conversation page: header + pause layer hard-code near-white -> dark surfaces.
   34,26,49 == --color-surface (#221A31). */
:root[data-theme="dark"] .conv-header{
  background:rgba(34,26,49,.92);
  border-bottom-color:rgba(var(--white-rgb),.07);
}
:root[data-theme="dark"] .pause-layer{background:rgba(26,18,38,.95)}

/* dashboard FAB menu: overlay hard-codes a near-white lavender (236,234,244,.7)
   which becomes a bright wash on dark. Flip to a dark, lightly transparent veil
   on the warm canvas (26,18,38 == --color-bg). */
:root[data-theme="dark"] .fab-overlay{background:rgba(26,18,38,.85)}

/* dashboard inline diary embed: many labels/icons use low-opacity brand-violet or a
   dark violet img filter -> too dark on the dark surface. Lift contrast (dark only). */
/* unchecked rows are dimmed to .55 in light; lift so titles/meta stay legible on dark */
:root[data-theme="dark"] .di-check:not(.checked){opacity:.78}
/* meta sub-labels ("Morgens"/"Tagsüber"/…) */
:root[data-theme="dark"] .di-check-badge{color:var(--color-text-subtle)}
/* section labels ("HEUTE AKTIVIERBAR"/"SPÄTER HEUTE") */
:root[data-theme="dark"] .di-section-label{color:rgba(var(--white-rgb),.5)}
/* habit icons (alarm/heart/bed/mug/moon): dark-violet filter -> light muted lavender.
   Aktiv (checked) klar/voll, inaktiv dezent (analog Light-Mode-Logik). */
:root[data-theme="dark"] .di-check-icon img{filter:brightness(0) invert(1);opacity:.82}
:root[data-theme="dark"] .di-check:not(.checked) .di-check-icon img{filter:brightness(0) invert(1);opacity:.5}
:root[data-theme="dark"] .di-check.checked .di-check-icon img{filter:brightness(0) invert(1);opacity:1}
:root[data-theme="dark"] .di-check-toggle img{filter:brightness(0) invert(1);opacity:.4}
:root[data-theme="dark"] .di-check.checked .di-check-toggle img{filter:brightness(0) invert(1);opacity:.9}
/* „Verwalten"-Button-Icon nutzt im Light einen dunkel-violetten Tint -> auf Dark
   kaum sichtbar. Auf helles Lavendel heben (analog übriger Diary-Icons). */
:root[data-theme="dark"] .di-custom-manage img{filter:brightness(0) invert(1);opacity:.85}
/* Morgen-Embed „Wie war Ihre Nacht?": dark-violet art + low-alpha brand fills vanish on dark */
:root[data-theme="dark"] .di-night-cta-icon img{filter:brightness(0) invert(1);opacity:.8}
:root[data-theme="dark"] .di-night-cta-sub{color:var(--color-text-muted)}
:root[data-theme="dark"] .di-night-cta{border-color:rgba(var(--white-rgb),.16)}
:root[data-theme="dark"] .di-night-field label{color:var(--color-text-muted)}
/* gesetzt = farbig hervorgehoben (background-COLOR, damit das Häkchen-SVG als
   background-image erhalten bleibt); leer = transparent/gedämpft, kein Häkchen */
:root[data-theme="dark"] .di-night-field input.di-time,
:root[data-theme="dark"] .di-night-field select{border-color:rgba(var(--brand-purple-rgb),.5);color:var(--color-text);background-color:rgba(var(--brand-purple-rgb),.2);color-scheme:dark}
:root[data-theme="dark"] .di-night-field input.di-time.is-empty,
:root[data-theme="dark"] .di-night-field input.di-time.is-prefill,
:root[data-theme="dark"] .di-night-field select.is-empty{border-color:rgba(var(--white-rgb),.22);background-color:transparent;color:var(--color-text-muted)}
:root[data-theme="dark"] .di-chip,
:root[data-theme="dark"] .di-scale-btn{border-color:rgba(var(--white-rgb),.2);color:var(--color-text-muted)}
/* getroffene Auswahl bleibt auch in Dark/Nacht klar im Akzent-Blau mit weißem Text */
:root[data-theme="dark"] .di-scale-btn.selected{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
:root[data-theme="dark"] .di-step-btn{border-color:rgba(var(--white-rgb),.22);color:var(--color-text-muted)}
:root[data-theme="dark"] .di-night-more{color:var(--color-primary-strong)}

/* dashboard follow-up after an answer: echo/recap meta use brand-violet at .5 alpha
   (brand layer stays dark) -> invisible on dark. Give them a clearly violet, readable
   lavender (not the near-white subtle token, which looked washed out). Body (.followup-text)
   stays at its lifted neutral tone. */
:root[data-theme="dark"] .followup-echo,
:root[data-theme="dark"] .followup-recap{color:#A98FD6}
:root[data-theme="dark"] .followup-recap strong{color:#C2B2E8}
:root[data-theme="dark"] .followup-text{color:rgba(var(--text-rgb),.82)}
:root[data-theme="dark"] .followup-recap img{filter:brightness(0) invert(1);opacity:.85}

/* === DARK (round 2): more-buttons, diary actions, weekly-review & detail-overlay legibility ===
   All page-local elements below lean on low-alpha brand-violet (which stays dark) or
   native-dark icon art, so they nearly vanish on the dark canvas. Dark-only lifts. */
/* "Mehr Übungen/Wissenskarten" ghost button (dashboard library/wissen embeds) */
:root[data-theme="dark"] .ex-browse-more{border-color:rgba(var(--white-rgb),.18);color:var(--color-text-muted)}
/* diary action buttons "Tag reflektieren" / "Wochenrückblick": faint border + dark icon */
:root[data-theme="dark"] .di-action-btn{border-color:rgba(var(--white-rgb),.18);color:var(--color-text-muted)}
:root[data-theme="dark"] .di-action-btn img{filter:brightness(0) invert(1);opacity:.7}
/* keep the pre-18:00 disabled state dimmer, but still clearly legible */
:root[data-theme="dark"] .di-action-btn.disabled{opacity:.6;color:var(--color-text-subtle)}
:root[data-theme="dark"] .di-action-btn.disabled img{opacity:.5}
/* diary weekly-review icons (best-value cards + observations) render dark-on-dark */
:root[data-theme="dark"] .di-hl-icon img{filter:brightness(0) invert(1);opacity:.95}
:root[data-theme="dark"] .di-obs-icon img{filter:brightness(0) invert(1);opacity:.92}
:root[data-theme="dark"] .di-obs-icon{border-color:rgba(var(--white-rgb),.28)}
/* exercise detail — soundscape mix chips (Donner/Wellen/Kamin/Wind): outline barely visible */
:root[data-theme="dark"] .ex-mix-pill{border-color:rgba(var(--white-rgb),.2);color:var(--color-text-subtle)}
/* article detail — Abstract/Subhead per Marken-/Akzentfarbe abgesetzt (Dark: hellere Brand-Lavendel) */
:root[data-theme="dark"] .article-quote{color:var(--color-primary-strong)}
/* article detail — "VERWANDTE KARTEN" label + related-item cards (label/border/accent dark) */
:root[data-theme="dark"] .article-related-label{color:var(--color-text-subtle)}
:root[data-theme="dark"] .article-related-item{border-color:rgba(var(--white-rgb),.14);color:var(--color-text)}
/* Kategorie-Icon (statt vertikaler Linie) im Dark-Mode in hellerem Brand-Lavendel */
:root[data-theme="dark"] .article-related-icon{color:var(--color-primary-strong)}
/* "Merken" bookmark (article) + favourite heart (exercise) use dark brand-violet ink */
:root[data-theme="dark"] .article-card-bookmark{color:var(--color-text-muted)}
:root[data-theme="dark"] .ex-overlay-fav svg{stroke:var(--color-text-muted)}
:root[data-theme="dark"] .ex-overlay-fav.active svg{fill:#A98FD6;stroke:#A98FD6}
/* dashboard "weiterscrollen" pill: the chevron icon strokes a dark brand-violet
   (--brand-purple-dark-rgb stays dark in dark mode) -> nearly invisible on the
   dark pill. Lift the stroke to the light text triplet so the icon matches the
   pill label and stays clearly visible. Pill text/surface already flip via tokens. */
:root[data-theme="dark"] .scroll-hint svg{stroke:rgba(var(--text-rgb),.6)}

/* desktop body backdrop (hard-coded light) -> dark */
@media(min-width:900px){
  :root[data-theme="dark"],
  :root[data-theme="dark"] body{background:var(--color-bg-desktop)}
}

/* ---- RESET ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* ---- SCROLL REVEAL ---- */
.reveal{
  opacity:0;
  transform:translateY(18px) scale(.995);
  filter:blur(2px);
  transition:opacity .7s var(--ease-out),
             transform .7s var(--ease-out),
             filter .5s var(--ease-out);
}
.reveal.visible{opacity:1;transform:none;filter:none}

/* ---- REDUCED MOTION ---- */
@media(prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none;filter:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---- GLASS OUTLINE (reusable mixin via class) ---- */
.glass-outline{position:relative;overflow:hidden}
.glass-outline::before{display:none}

/* ---- BOTTOM NAV ---- */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  height:var(--bottom-nav-h);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(var(--white-rgb),.08);
  display:flex;align-items:center;justify-content:space-around;
  z-index:9999;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.bottom-nav--dark{
  background:rgba(60,40,68,.65);
}
.bottom-nav--light{
  background:var(--color-surface);
  border-top:1px solid var(--color-border-subtle);
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:var(--text-caption);letter-spacing:.02em;
  color:rgba(var(--white-rgb),.5);
  text-decoration:none;
  padding:.4rem .5rem;
  position:relative;
  transition:color .2s;
}
.bottom-nav--light .nav-item{color:rgba(60,40,68,.4)}
.nav-item svg{width:22px;height:22px;transition:color .2s,transform .15s}
.nav-item:hover svg{transform:translateY(-1px)}

/* Active states — blue-violet for Home/Dashboard, blue for sub-pages */
.nav-item.active{color:var(--color-accent)}
.nav-item.active svg{color:var(--color-accent)}
.nav-item.active::before{
  content:"";position:absolute;top:-1px;left:25%;right:25%;
  height:2px;background:var(--color-accent);border-radius:0 0 2px 2px;
}
.bottom-nav--light .nav-item.active{color:var(--color-accent)}

.sidebar-logo{display:none}

@media(min-width:600px) and (max-width:899px){
  .bottom-nav{
    max-width:760px;left:50%;transform:translateX(-50%);
    border-radius:20px 20px 0 0;
    box-shadow:0 -4px 24px rgba(var(--shadow-color),.08);
  }
}

/* ---- DESKTOP SIDEBAR NAV ---- */
@media(min-width:900px){
  body{background:var(--color-bg-desktop)}

  .bottom-nav{
    position:fixed;top:0;bottom:0;right:auto;
    left:max(0px, calc(50vw - 480px));
    width:160px;height:100vh;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    padding:1.25rem 0 1.5rem;gap:.15rem;
    border-top:none;
    border-right:1px solid var(--color-border-subtle);
    z-index:9999;
    overflow:hidden;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .bottom-nav--light{
    background:var(--color-surface);
    border-top:none;
    border-right:1px solid var(--color-border-subtle);
  }
  .nav-item{
    flex-direction:row;gap:.55rem;justify-content:flex-start;
    padding:.65rem 1.2rem;
    width:100%;
    font-size:var(--text-small);
  }
  .nav-item svg{width:20px;height:20px}
  .nav-item.active::before{
    top:25%;bottom:25%;left:-1px;right:auto;
    width:2px;height:auto;
    border-radius:0 2px 2px 0;
  }
  .nav-item:hover svg{transform:translateY(0) scale(1.08)}

  .sidebar-logo{
    display:block !important;
    text-align:center;
    padding:.75rem 0 1.2rem;
    margin-bottom:.5rem;
    border-bottom:1px solid var(--color-border-subtle);
  }
  .sidebar-logo svg{width:80px;height:80px;display:inline-block}

  /* content centered as compact unit with sidebar */
  .page{
    margin-left:max(160px, calc(50vw - 320px));
    max-width:760px;
    padding:0 2rem 2rem;
  }

  /* top-bar follows the same centering */
  .top-bar{
    margin-left:max(160px, calc(50vw - 320px));
    max-width:760px;
    width:auto;
  }
}

/* ---- TOP BAR AVATAR (profile link, top-right) ---- */
.top-bar-avatar{
  width:32px;height:32px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--color-text);
  text-decoration:none;
  transition:opacity .2s;
  flex-shrink:0;
}
.top-bar-avatar:hover{opacity:.7}
.top-bar-avatar svg{width:22px;height:22px}
.top-bar-avatar img{width:32px;height:32px;border-radius:50%;object-fit:cover}

/* ---- SIDEBAR-ONLY NAV ITEMS (visible only on desktop) ---- */
.sidebar-only{display:none}
@media(min-width:900px){
  .sidebar-only{display:flex}
}

/* ---- TOAST ---- */
.toast{
  position:fixed;bottom:calc(var(--bottom-nav-h) + 12px);
  left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(40,25,48,.9);color:var(--color-on-primary);
  padding:.65rem 1.3rem;border-radius:12px;
  font-size:var(--text-small);font-family:var(--font);
  opacity:0;pointer-events:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity .25s,transform .25s;
  z-index:300;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* ---- LOADING SPINNER ---- */
.loading-screen{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:50vh;
}
.loading-screen .spinner{
  width:36px;height:36px;
  border:3px solid rgba(var(--brand-primary-rgb),.2);border-top-color:var(--color-primary);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- FADEUP (was missing on login) ---- */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

/* ---- PAGE CONTAINER ---- */
.page{max-width:760px;margin:0 auto;padding:0 1rem 2rem}

/* ---- GENERIC WHEEL-TIME-PICKER (sv-tp) ----
   Shared, wiederverwendbarer Bottom-Sheet-Time-Picker (siehe somnoviaOpenTimePicker
   in shared.js). Optik 1:1 wie der Tagebuch-Picker (dashboard.html `di-tp`), aber
   eigenständig, damit das Tagebuch unberührt bleibt. Token-/dark-mode-basiert. */
.sv-tp-overlay{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(var(--brand-primary-deep-rgb),.5);opacity:0;pointer-events:none;
  transition:opacity .2s ease;-webkit-tap-highlight-color:transparent;
}
.sv-tp-overlay.show{opacity:1;pointer-events:auto}
.sv-tp-sheet{
  position:relative;
  width:100%;max-width:440px;box-sizing:border-box;
  background:var(--color-bg);border-radius:20px 20px 0 0;
  padding:1rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -10px 34px rgba(0,0,0,.28);
  transform:translateY(100%);transition:transform .26s cubic-bezier(.16,1,.3,1);
}
.sv-tp-overlay.show .sv-tp-sheet{transform:translateY(0)}
/* Kopfzeile: Titel mittig, „Zurücksetzen" liegt absolut oben links, „×" oben rechts
   (neues Schließen-Schema) → genug Höhe für beide Steuerelemente. */
.sv-tp-head{display:flex;align-items:center;justify-content:center;min-height:34px;margin-bottom:.6rem}
.sv-tp-title{font-size:.92rem;font-weight:600;color:var(--color-text)}
.sv-tp-wheels{position:relative;display:flex;align-items:stretch;justify-content:center;gap:.5rem;height:200px}
.sv-tp-wheels::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:180px;max-width:80%;height:40px;border-radius:10px;
  background:rgba(var(--brand-purple-rgb),.12);pointer-events:none;
}
.sv-tp-wheel{
  flex:1;max-width:120px;overflow-y:scroll;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;text-align:center;
  padding:80px 0;position:relative;z-index:1;
}
.sv-tp-wheel::-webkit-scrollbar{display:none}
.sv-tp-colon{align-self:center;font-size:1.4rem;font-weight:700;color:var(--color-text);z-index:1}
.sv-tp-item{
  height:40px;line-height:40px;scroll-snap-align:center;cursor:pointer;
  font-size:1.15rem;font-weight:500;color:rgba(var(--text-rgb),.4);
  transition:color .15s,font-weight .15s,font-size .15s;
}
.sv-tp-item.sel{color:var(--color-primary);font-weight:700;font-size:1.35rem}
/* „Zurücksetzen" oben links (dezenter Icon+Text-Link). Das frühere Footer-Layout
   (Reset links / „Fertig" rechts unten) ist abgelöst – „Fertig" ist jetzt das „×"
   oben rechts (.sheet-x, committet beim Schließen). */
.sv-tp-reset{
  position:absolute;top:15px;left:16px;z-index:5;
  display:inline-flex;align-items:center;gap:.4rem;border:none;background:none;cursor:pointer;
  font-family:var(--font);font-size:.86rem;font-weight:600;color:var(--color-primary);
  padding:.2rem .1rem;-webkit-tap-highlight-color:transparent;
}
.sv-tp-reset svg{width:14px;height:14px;flex-shrink:0}
.sv-tp-reset:active{opacity:.6}

/* Einheitliches Schließen-„×" (siehe ui-komponenten-stil.mdc): dezente runde,
   brand-getintete Scheibe oben rechts. Hier in shared.css, damit auch der geteilte
   Wheel-Picker (und künftige geteilte Sheets) es nutzen können. */
.sheet-x{
  position:absolute;top:12px;right:12px;z-index:5;
  width:34px;height:34px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:rgba(var(--brand-purple-rgb),.10);color:var(--brand-purple);
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  -webkit-tap-highlight-color:transparent;transition:background .2s,transform .1s;
}
.sheet-x::before{content:"\00d7";font-size:21px;font-weight:400}
.sheet-x:hover{background:rgba(var(--brand-purple-rgb),.2)}
.sheet-x:active{transform:scale(.92)}
/* Dark-Mode: Sheet/Text/Auswahl folgen den theme-aware Tokens (--color-surface,
   --color-text, --color-primary, --color-accent passen sich automatisch an). Das
   zentrale Auswahl-Band auf Dark etwas kräftiger für klare Sichtbarkeit. */
:root[data-theme="dark"] .sv-tp-wheels::before{background:rgba(var(--white-rgb),.10)}
:root[data-theme="dark"] .sv-tp-item{color:var(--color-text-muted)}

/* ---- VIEW TRANSITIONS (progressive enhancement) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.2s ease-out both fade-out}
::view-transition-new(root){animation:.3s ease-out both fade-in}
@keyframes fade-out{from{opacity:1}to{opacity:0}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}