/* Dunkelmodus.
 *
 * Eine Datei fuer alle Seiten. Sie definiert keine Bausteine neu, sondern
 * setzt nur die Farbwerte um, an denen die Seiten ohnehin haengen
 * (--paper, --ink, --card, --line, --muted ...) - plus die Glasflaechen
 * fuer Karten, Meldungen und Eingabefelder.
 *
 * Der Verlaufsgrund stand frueher hier und liegt jetzt in
 * /assets/flaeche.css - dort gilt er fuer beide Farbmodi und ist an die
 * Kundenfarbe gekoppelt. Diese Datei liefert ihm nur noch die Werte:
 * --paper als Grundton und das aufgehellte --deep weiter unten.
 *
 * Geschaltet wird ueber data-thema am <html>. Den Wert setzt
 * /assets/thema.js im Kopf der Seite, bevor gezeichnet wird: entweder aus
 * der Wahl des Nutzers oder, wenn er nichts gewaehlt hat, aus der
 * Geraeteeinstellung. Diese Datei kennt nur noch das Ergebnis.
 *
 * Warum das Attribut und keine reine @media-Abfrage: sonst gibt es keinen
 * Weg, im Hellen zu bleiben, obwohl das Handy dunkel steht - und genau das
 * ist der Zweck des Umschalters.
 *
 * Zur Spezifitaet: In mehreren Seiten steht der helle Farbsatz als
 * Inline-<style> im Kopf, also NACH dieser Datei. Bei gleicher Wertigkeit
 * gewaenne der spaetere Block. ":root[data-thema='dunkel']" zaehlt hoeher
 * und gewinnt unabhaengig von der Reihenfolge.
 */

:root[data-thema="dunkel"]{
  color-scheme:dark;

  --ink:#e9edea;
  --paper:#0d1513;
  --card:rgba(255,255,255,.055);
  --muted:#9aa7a1;
  --line:rgba(255,255,255,.14);
  --signal:#f5c945;
  --alarm:#ff7a68;
  --warn:#ff7a68;

  --glas-blur:16px;
  --glas-rand:14px;
  --glas-schatten:0 10px 30px rgba(0,0,0,.45);

  /* Zwei Kanten statt einer: oben eine Lichtlinie, unten eine dunkle.
     Ein Schatten allein traegt auf dunklem Grund nichts - er ist dort
     genauso dunkel wie das, worauf er faellt. Was eine Flaeche abhebt,
     ist die Lichtkante an ihrer Oberkante. */
  --glas-kante:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.30);
}

/* Die Kundenfarbe kommt als fester Wert aus der Datenbank und ist fuer
   einen dunklen Grund meist zu dunkel (Vorgabe ist #1e4038). Sie wird
   deshalb auf dem <body> aufgehellt: dort laesst sich der geerbte Wert
   verrechnen, auf :root selbst waere es ein Zirkelbezug. Browser ohne
   color-mix behalten die Originalfarbe - dunkler, aber nicht kaputt.
   Von hier erbt auch body::before in flaeche.css den aufgehellten Wert. */
@supports (color: color-mix(in srgb, red 50%, blue)){
  :root[data-thema="dunkel"] body{ --deep:color-mix(in srgb, var(--deep) 45%, #eaf6f1); }
}

/* --- Glasflaechen --------------------------------------------------- */

:root[data-thema="dunkel"] .karte,
:root[data-thema="dunkel"] .tagesstand,
:root[data-thema="dunkel"] .msg,
:root[data-thema="dunkel"] #tippen{
  background:var(--card);
  -webkit-backdrop-filter:blur(var(--glas-blur)) saturate(150%);
  backdrop-filter:blur(var(--glas-blur)) saturate(150%);
  border-radius:var(--glas-rand);
  box-shadow:var(--glas-schatten), var(--glas-kante);
}

/* Muss nach der Regel darueber stehen: dort wird --card gesetzt, hier
   bleibt die Einfaerbung der beiden Meldungsarten erhalten. */
:root[data-thema="dunkel"] .msg-err{background:rgba(255,122,104,.13)}
:root[data-thema="dunkel"] .msg-info{background:rgba(255,255,255,.07)}

/* Die Marke "Aufgabe" liegt auf --signal, also auf Gelb - in beiden
   Modi. Ihre Schrift kommt aus --ink, und das schlaegt hier auf fast
   Weiss um: gelbe Flaeche, weisse Schrift, praktisch unlesbar. Der
   Untergrund wechselt nicht mit dem Modus, die Schrift darf es deshalb
   auch nicht. Fester dunkler Wert statt --ink. */
:root[data-thema="dunkel"] .marke-aufgabe{color:#16150f}

:root[data-thema="dunkel"] .btn{border-radius:10px}
:root[data-thema="dunkel"] .btn-ghost{
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

:root[data-thema="dunkel"] textarea,
:root[data-thema="dunkel"] input{
  background:rgba(255,255,255,.05);
  color:var(--ink);
  border-radius:10px;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
:root[data-thema="dunkel"] textarea::placeholder,
:root[data-thema="dunkel"] input::placeholder{color:var(--muted)}

/* Auswahlfelder brauchen ihre eigene Regel: die Seiten setzen ihnen im
   Inline-Stil einen hellen Hintergrund, waehrend --ink hier auf hell
   umschlaegt. Ohne das hier steht helle Schrift auf fast weissem Grund -
   lesbar ist das nicht. Kein backdrop-filter, weil das Aufklappen der
   Liste sonst auf Android flackert. */
:root[data-thema="dunkel"] select{
  background:rgba(255,255,255,.05);
  color:var(--ink);
  border-radius:10px;
}

/* Die aufgeklappte Liste zeichnet das Betriebssystem, nicht die Seite.
   Chrome auf Android erbt dafuer nur die Farben des <option> - fehlen
   sie, steht dort dunkle Schrift auf dunklem Grund. */
:root[data-thema="dunkel"] select option{
  background:#18211f;
  color:var(--ink);
}

/* Fuellfarbe, solange ein Bild laedt oder fehlt. Der helle Wert aus dem
   Grundstil leuchtet auf dunklem Grund als weisser Block. */
:root[data-thema="dunkel"] .bild,
:root[data-thema="dunkel"] .quelle-bild{background:rgba(255,255,255,.06)}

/* --- Foto-Taste unter der Bubble ------------------------------------ */

/* Grauer Rand, graue Schrift, graues Glas: Auf dem Handy war "Foto
   aufnehmen" im Dunkeln kaum als Taste zu erkennen. Jetzt in der Farbe
   des Kunden. Bewusst nicht gefuellt wie "Fertig" - die Bubble bleibt
   der Hauptweg, das Foto die zweite Moeglichkeit (10).
   Nur mit btn-ghost: Waehrend der Fotoaufnahme nimmt diktat.js die
   Klasse weg und fuellt die Taste - dieser Zustand bleibt unberuehrt. */
:root[data-thema="dunkel"] #btn-foto.btn-ghost{
  color:var(--deep);
  border-color:var(--deep);
  font-weight:600;
}
@supports (color: color-mix(in srgb, red 50%, blue)){
  :root[data-thema="dunkel"] #btn-foto.btn-ghost{
    background:color-mix(in srgb, var(--deep) 16%, transparent);
    border-color:color-mix(in srgb, var(--deep) 75%, transparent);
  }
}

/* --- Ergebniskarten ------------------------------------------------- */

/* Gegenstueck zum gleichnamigen Abschnitt in grund.css: dort stehen
   --ergebnis, der linke Balken und das Hereingleiten. Hier Flaeche,
   Rand und Schein fuer den dunklen Grund. Das Glas bleibt, es wird nur
   eingefaerbt - der Schein in der Kundenfarbe ist das, was die Karte
   von "Zuletzt" abhebt. */
:root[data-thema="dunkel"] #karte-notiz,
:root[data-thema="dunkel"] #karte-antwort,
:root[data-thema="dunkel"] #karte-absicht{
  border-color:var(--ergebnis);
}
@supports (color: color-mix(in srgb, red 50%, blue)){
  :root[data-thema="dunkel"] #karte-notiz,
  :root[data-thema="dunkel"] #karte-antwort,
  :root[data-thema="dunkel"] #karte-absicht{
    background:color-mix(in srgb, var(--ergebnis) 14%, rgba(255,255,255,.04));
    border-color:color-mix(in srgb, var(--ergebnis) 50%, transparent);
    border-left-color:var(--ergebnis);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--ergebnis) 16%, transparent),
               0 18px 46px -16px color-mix(in srgb, var(--ergebnis) 50%, transparent),
               var(--glas-kante);
  }

  /* Die Marke "Wissen" liegt auf --deep mit weisser Schrift. Hier ist
     --deep aufgehellt - Weiss auf Pastell. Wie bei marke-aufgabe ein
     fester dunkler Wert. Nur mit color-mix: ohne bleibt --deep dunkel
     und die weisse Schrift richtig. */
  :root[data-thema="dunkel"] #notiz-art{color:#0d1513}
}
:root[data-thema="dunkel"] #karte-absicht h2{color:var(--signal)}

/* --- Ruecksicht ----------------------------------------------------- */

/* Wer Transparenz abgestellt hat, bekommt feste Flaechen. Nimmt zugleich
   die Rechenlast der Weichzeichnung von aelteren Geraeten. Der Grund
   selbst wird in flaeche.css abgeschaltet, nicht hier. */
@media (prefers-reduced-transparency: reduce){
  :root[data-thema="dunkel"] .karte,
  :root[data-thema="dunkel"] .tagesstand,
  :root[data-thema="dunkel"] .msg,
  :root[data-thema="dunkel"] #tippen,
  :root[data-thema="dunkel"] .btn-ghost,
  :root[data-thema="dunkel"] textarea,
  :root[data-thema="dunkel"] select,
  :root[data-thema="dunkel"] input{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:#18211f;
  }

  /* Die Ergebniskarten schlagen die Regel darueber ueber ihre ID - ohne
     diesen Block staende dort weiter eine durchscheinende Flaeche. */
  @supports (color: color-mix(in srgb, red 50%, blue)){
    :root[data-thema="dunkel"] #karte-notiz,
    :root[data-thema="dunkel"] #karte-antwort,
    :root[data-thema="dunkel"] #karte-absicht{
      background:color-mix(in srgb, var(--ergebnis) 12%, #18211f);
    }
  }
}