/* =========================================================
   Life Archive – Night Pond in jeder Umgebung (seit 0.6.0 beta)

   Home hat mit „Night Pond" (styles/look.css) eine eigene Sprache
   bekommen: ein Schein unter allem, Flächen in einem Hauch ihrer
   Farbe, Knöpfe der zweiten Reihe getönt – Fläche im Ton, Kante in
   voller Stärke, Sockel im tiefen Ton. Die Bereiche standen daneben
   noch in der alten: graue Werkzeuge, graue „+", graue Karten mit
   einem Strich oben. Wer von Home in einen Bereich ging, wechselte
   die App.

   Diese Datei trägt dieselbe Sprache in jede Umgebung. Sie fasst
   kein Modul einzeln an, sondern die Token, aus denen alle bauen:

     1  Der Ton eines Ortes steht am <body> (body[data-shell]) – dann
        erben ihn auch Popups, Toasts und das Blatt, die als eigene
        Wurzeln unter <body> hängen.
     2  Der Teich: unter jedem Bereich ein Schein in SEINER Farbe (oben
        links hell, unten rechts der tiefe Ton). Home behält die Farben
        der Tageszeit. Die Wahl „Pond light" gilt überall.
     3  Flächen: --surface, --surface-2, --surface-3 tragen im Bereich
        einen Hauch seiner Farbe – das ist „Cards: Tinted" für jede
        Karte, jede Zeile, jedes Popup auf einmal. Deckend, nicht
        durchscheinend: eine innere Fläche aus --surface liegt dann
        nie als dunkler Fleck auf einer hellen Karte.
     4  Knöpfe der zweiten Reihe: --tint-* (unten), gerechnet an jedem
        Element mit SEINEM --accent-app, wie --cut-clip in base.css.
        Die Wahl „Buttons" gilt überall.
     5  Die Linie unter der Topbar folgt der Wahl „Line" überall.

   Hierarchie, die überall gleich ist (base.css, „Drei Stufen"):
     Primary  volle Fläche im Ton – höchstens eine je Bildschirm
     Tinted   „+", Werkzeuge, Handgriffe – --tint-*
     Quiet    Zurück, Schließen, Abbrechen – nur eine Kante

   Lesbarkeit, gemessen (10. Oktober 2026, alle acht Orte): der Schein im
   Bereich bleibt bei 14 % (oben) und 10 % (unten) und liegt nur auf --bg,
   nie unter Schrift auf einer Karte; --text-muted hält auf der getönten
   --surface-3 4,9–5,3 : 1, die Schrift eines getönten Knopfes auf seiner
   Fläche 5,6–9,9 : 1, seine Kante gegen --bg 6,0–18,9 : 1.

   Im E-ink-Modus gilt nichts davon: Papier, schwarze Kanten.
   ========================================================= */

/* ---------- 1. Der Ton eines Ortes ------------------------------------------ */

body[data-shell="nutrition"]  { --accent-app: var(--c-nutrition);  --accent-deep: var(--c-nutrition-stroke); }
body[data-shell="calendar"]   { --accent-app: var(--c-calendar);   --accent-deep: var(--c-calendar-stroke); }
body[data-shell="meditation"] { --accent-app: var(--c-meditation); --accent-deep: var(--c-meditation-stroke); }
body[data-shell="cue-diary"]  { --accent-app: var(--c-cue-diary);  --accent-deep: var(--c-cue-diary-stroke); }
body[data-shell="journal"]    { --accent-app: var(--c-journal);    --accent-deep: var(--c-journal-stroke); }
body[data-shell="fitness"]    { --accent-app: var(--c-fitness);    --accent-deep: var(--c-fitness-stroke); }
body[data-shell="reader"]     { --accent-app: var(--c-reader);     --accent-deep: var(--c-reader-stroke); }
body[data-shell="finance"]    { --accent-app: var(--c-finance);    --accent-deep: var(--c-finance-stroke); }
body[data-shell="home"],
body[data-shell="not-found"]  { --accent-app: var(--c-home);       --accent-deep: var(--c-home-stroke); }

/* ---------- 2. Flächen im Hauch des Bereichs ---------------------------------
   Nur bei „Cards: Tinted" (ab Werk). Home und das Archive tönen nicht:
   Weiß und Grau machten die Flächen nur heller, nicht farbiger – dort
   tönt jede Karte selbst (styles/look.css). */

html[data-look-cards="tint"]:not([data-eink]) body:is(
  [data-shell="nutrition"], [data-shell="calendar"], [data-shell="meditation"],
  [data-shell="cue-diary"], [data-shell="journal"], [data-shell="fitness"],
  [data-shell="reader"], [data-shell="finance"]) {
  --surface:   color-mix(in srgb, var(--accent-app) 6%, var(--g-39));
  --surface-2: color-mix(in srgb, var(--accent-app) 6%, var(--g-37));
  --surface-3: color-mix(in srgb, var(--accent-app) 7%, var(--g-35));
}

/* Die stille Fläche eines Bedienelements (--btn-quiet, base.css) war
   ein heller Grauschleier – Auswahlknöpfe, Zeilen zum Antippen, Tasten,
   Schalter. Im Bereich ist sie ein Schleier in dessen Ton: dieselbe
   Helligkeit (gemessen 1,7–1,8 : 1 gegen die Karte, wie vorher), aber
   sie gehört sichtbar zum Ort. Ohne Kante – die tragen nur die Knöpfe
   der zweiten Reihe (--tint-*, unten). */
html:not([data-eink]):not([data-look-buttons="grey"]) body[data-shell] {
  --btn-quiet:       color-mix(in srgb, var(--accent-app) 16%, rgba(var(--o), .11));
  --btn-quiet-hover: color-mix(in srgb, var(--accent-app) 24%, rgba(var(--o), .17));
  --btn-quiet-lift:  color-mix(in srgb, var(--accent-app) 32%, rgba(var(--o), .16));
}

/* Rauch: die Flächen dunkler, der Teich zeigt sich in den Lücken. */
html[data-look-cards="smoke"]:not([data-eink]) body[data-shell]:not([data-shell="home"]) {
  --surface:   var(--g-42);
  --surface-2: var(--g-40);
}

/* ---------- 3. Der Teich in jedem Bereich ----------------------------------- */

body[data-shell] .la-pond { display: block; }
html[data-look-light="off"] .la-pond { display: none; }

/* Wo die ganze Fläche schon etwas zeigt – das offene Buch, die Karte
   eines Laufs, eine laufende Sitzung –, liegt kein Schein darunter. */
body:has(.rd-read, #fx-clive, .mnt-run, .brt-stage) .la-pond { display: none; }

/* Ein Bereich leuchtet in seiner eigenen Farbe, egal was die Uhr sagt:
   oben links der helle Ton (dort, wo das Zeichen sitzt), unten rechts
   der tiefe. Dieselbe Komposition wie das Blatt des ⋯-Knopfes. */
/* !important, weil „Your day" (app/home/look.js) seinen Schein als
   Inline-Stil malt – der gehört Home; im Bereich gilt dieser. */
body[data-shell]:not([data-shell="home"]) .la-pond__light {
  background-image:
    radial-gradient(75% 40% at 0% 0%, color-mix(in srgb, var(--accent-app) 14%, transparent), transparent 72%),
    radial-gradient(70% 38% at 100% 100%, color-mix(in srgb, var(--accent-deep) 10%, transparent), transparent 74%) !important;
}

/* „Deep": nur Licht von unten. */
html[data-look-light="deep"] body[data-shell]:not([data-shell="home"]) .la-pond__light {
  background-image:
    radial-gradient(90% 36% at 50% 108%, color-mix(in srgb, var(--accent-app) 16%, transparent), transparent 75%),
    radial-gradient(60% 30% at 100% 100%, color-mix(in srgb, var(--accent-deep) 10%, transparent), transparent 75%) !important;
}

/* Drifting und Ripples gelten überall (styles/look.css hängt sie an
   data-pond, das bleibt). */

/* Die Topbar lässt den Teich durchscheinen – wie auf Home. */
body[data-shell] .sh-top::before { background: color-mix(in srgb, var(--bg) 94%, transparent); }

/* ---------- 4. Die Linie unter der Topbar, überall nach der Wahl ------------ */

html[data-look-line="fade"] body[data-shell] .sh-top__rule {
  background: linear-gradient(90deg,
    var(--accent-app) 0%,
    color-mix(in srgb, var(--accent-app) 80%, transparent) 32%,
    transparent 100%);
}

html[data-look-line="glow"] body[data-shell] .sh-top__rule {
  box-shadow:
    0 0 10px 1px color-mix(in srgb, var(--accent-app) 55%, transparent),
    0 0 26px 2px color-mix(in srgb, var(--accent-app) 18%, transparent);
}

html[data-look-line="hair"] body[data-shell] .sh-top__rule { height: 1px; opacity: .85; }

/* ---------- 5. Der getönte Knopf: Token an jedem Element ---------------------
   Wie --cut-clip (base.css) auf `*` deklariert, damit jedes Element mit
   SEINEM Ton rechnet: derselbe Knopf trägt im Journal Amber, im Reader
   Braun, auf Home Weiß – und in einem Popup des Kalenders, das aus der
   Ernährung geöffnet wurde, die Farbe der Ebene, nicht die des body.

     --tint-face    die Fläche  (16 % Ton auf der Fläche darunter)
     --tint-hover   gezeigt     (30 %)
     --tint-edge    die Kante   (95 %) – hier sitzt der Kontrast
     --tint-lift    der Sockel  (60 %)
     --tint-ink     Schrift und Zeichen (der Ton selbst)

   Dieselben Anteile wie .hb-tile__act (das „+" auf Home) und
   .btn--tinted – die stehen als --btn-tinted-* in base.css. */

* {
  --tint-face:  color-mix(in srgb, var(--accent-app) var(--btn-tinted), var(--surface));
  --tint-hover: color-mix(in srgb, var(--accent-app) var(--btn-tinted-hover), var(--surface));
  --tint-edge:  color-mix(in srgb, var(--accent-app) var(--btn-tinted-edge), transparent);
  --tint-lift:  color-mix(in srgb, var(--accent-app) var(--btn-tinted-lift), transparent);
  --tint-ink:   var(--accent-app);
  --tint-glow:  none;
}

/* Die Wahl „Buttons" (⋯ › Home › Look) – jetzt für die ganze App. */
html[data-look-buttons="grey"] * {
  --tint-face:  color-mix(in srgb, rgb(var(--o)) 18%, var(--surface));
  --tint-hover: color-mix(in srgb, rgb(var(--o)) 26%, var(--surface));
  --tint-edge:  transparent;
  --tint-lift:  var(--btn-quiet-lift);
  --tint-ink:   var(--text);
}

html[data-look-buttons="glow"] * {
  --tint-glow: drop-shadow(0 0 7px color-mix(in srgb, var(--accent-app) 50%, transparent));
}

html[data-look-buttons="glass"] * {
  --tint-face:  color-mix(in srgb, rgb(var(--o)) 7%, var(--surface));
  --tint-hover: color-mix(in srgb, rgb(var(--o)) 14%, var(--surface));
  --tint-edge:  rgba(var(--o), .26);
  --tint-lift:  rgba(var(--o), .34);
  --tint-ink:   var(--text-strong);
}

html[data-look-buttons="solid"] * {
  --tint-face:  var(--accent-app);
  --tint-hover: color-mix(in srgb, var(--accent-app) 88%, #fff);
  --tint-edge:  transparent;
  --tint-lift:  var(--accent-deep);
  --tint-ink:   var(--on-accent);
}

/* Das Braun des Readers ist der einzige dunkle Bereichston: als Schrift
   auf seiner eigenen getönten Fläche maß es 3,8 : 1 (unter AA). Die
   Schrift nimmt dort einen helleren Ton derselben Farbe – 6,2 : 1; Fläche
   und Kante bleiben braun. Gemessen wurden alle acht Orte, die übrigen
   liegen zwischen 5,6 und 9,9 : 1. */
html:is([data-look-buttons="tint"], [data-look-buttons="glow"]):not([data-eink]) body[data-shell="reader"] * {
  --tint-ink: color-mix(in srgb, var(--accent-app) 62%, #ffffff);
}

/* Auf Papier: weiße Fläche, schwarze Kante, schwarzer Sockel. */
html[data-eink] * {
  --tint-face:  #ffffff;
  --tint-hover: #ececec;
  --tint-edge:  #000000;
  --tint-lift:  #000000;
  --tint-ink:   #000000;
  --tint-glow:  none;
}

/* Ein Zeichen, das die Schriftfarbe trägt (statt eines <img>, das immer
   weiß bleibt) – so steht das „+" im Ton des Knopfes, wie auf Home. */
.la-glyph {
  flex: none;
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

/* ---------- 6. Karten ----------------------------------------------------------
   Die Karte jeder Modulseite (.mnt-card) trug oben einen Strich in der
   Bereichsfarbe – die Handschrift von vor Night Pond. Ihre Farbe trägt
   sie jetzt in der Fläche selbst; dazu Licht aus der geschnittenen
   Ecke, wie die Now-Karte auf Home. */

html:not([data-eink]) .mnt-card {
  box-shadow: none;
  background-image: linear-gradient(160deg,
    color-mix(in srgb, var(--accent-app) 9%, transparent) 0%,
    transparent 58%);
}

/* Lit edge: die geschnittene Ecke fängt das Licht. */
html[data-look-cards="edge"]:not([data-eink]) :is(.mnt-card, .mnt-stat, .card) {
  background-image: linear-gradient(135deg,
    transparent calc(var(--cut) * .7071 - .5px),
    var(--accent-app) calc(var(--cut) * .7071 - .5px) calc(var(--cut) * .7071 + 1.5px),
    color-mix(in srgb, var(--accent-app) 18%, transparent) calc(var(--cut) * .7071 + 1.5px),
    transparent calc(var(--cut) * .7071 + 36px));
}

/* Clear: ein heller Schimmer statt Farbe. */
html[data-look-cards="clear"]:not([data-eink]) .mnt-card {
  background-image: linear-gradient(160deg, rgba(var(--o), .07), transparent 46%);
}

/* Die kleinen Kennzahl-Kacheln (.mnt-stat) sind Flächen wie die Karten:
   Eckschnitt statt Rundung, Rand weg, getönt. */
.mnt-stat {
  --cut: 9px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
}

/* ---------- 7. Popups: dieselbe Fläche wie das Blatt ------------------------- */

html:not([data-eink]) .modal-panel {
  background-color: var(--surface);
  background-image:
    radial-gradient(80% 40% at 0% 0%, color-mix(in srgb, var(--accent-app) 11%, transparent), transparent 72%),
    radial-gradient(70% 36% at 100% 100%, color-mix(in srgb, var(--accent-deep) 8%, transparent), transparent 74%);
}

/* ---------- 8. Das Tor: der Teich vor dem ersten Schritt ---------------------- */

.acct-gate {
  --accent-app: var(--c-home);
  --accent-deep: var(--c-home-stroke);
}

html:not([data-eink]) .acct-gate__glow {
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: none;
  background:
    radial-gradient(70% 34% at 8% 6%, color-mix(in srgb, var(--c-calendar) 13%, transparent), transparent 72%),
    radial-gradient(60% 32% at 100% 40%, color-mix(in srgb, var(--c-meditation) 12%, transparent), transparent 72%),
    radial-gradient(70% 34% at 30% 100%, color-mix(in srgb, var(--c-nutrition) 10%, transparent), transparent 72%);
}