/* =====================================================================
   chew — Soft-UI / Neumorphism (Override-Schicht)
   ---------------------------------------------------------------------
   Additiv + reversibel: wird NACH style.css/style.mobile.css geladen;
   die eine <link>-Zeile in index.html entfernen = alter Look zurück
   (gleiche Mechanik wie damals style.liquid.css).

   Prinzip (Referenz: Marcos Soft-UI-Bild):
   - Karten/Buttons wirken aus der Fläche HERAUSGEDRÜCKT
     (Doppel-Schatten: Licht oben links, Schatten unten rechts).
   - Eingabefelder/Schienen/Balken-Tracks wirken EINGELASSEN (inset).
   - Dafür teilen Karten und Grund EINE Farbe; Haarlinien entfallen.
   - Inhalt (Text, Ringe, Makro-Farben, Fokus-Ringe) bleibt unverändert
     kräftig — nur das Material wechselt. Kein Tailwind nötig: der
     Effekt ist reines CSS (zwei box-shadows).
   ===================================================================== */

/* ---- Token-Anpassung: Canvas muss ein Mittelton sein, sonst gibt es
        keinen Raum für helle UND dunkle Schatten. ---- */
:root {
  --bg:        #e9ebe3;
  --bg-2:      #eef0e8;
  --surface:   #e9ebe3;   /* Karten = Grundfarbe (extrudiert, nicht abgesetzt) */
  --surface-2: #e2e4db;
  --surface-3: #dadcd2;
  --seg-thumb: #f0f2ea;
  --glass:     #e9ebe3;
  --glass-2:   #eef0e8;
  --popover:   #eef0e8;
  --header-fade: rgba(233, 235, 227, .55);

  /* Neumorph-Schatten */
  --neu-hi: rgba(255, 255, 255, .92);
  --neu-lo: rgba(96, 104, 88, .34);

  --neu-out:    -6px -6px 14px var(--neu-hi), 6px 6px 14px var(--neu-lo);
  --neu-out-sm: -3px -3px 7px  var(--neu-hi), 3px 3px 7px  var(--neu-lo);
  --neu-in:  inset 3px 3px 7px var(--neu-lo), inset -3px -3px 7px var(--neu-hi);
  --neu-in-sm: inset 2px 2px 5px var(--neu-lo), inset -2px -2px 5px var(--neu-hi);
}

/* Dunkel: gleiche Logik, Licht wird zum feinen Glanz. (Zweimal, weil
   Media-Query- und Attribut-Regel in CSS nicht teilbar sind.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #181c19;
    --bg-2:      #1c211d;
    --surface:   #181c19;
    --surface-2: #1e231f;
    --surface-3: #242a25;
    --seg-thumb: #262c27;
    --glass:     #181c19;
    --glass-2:   #1e231f;
    --popover:   #1e231f;
    --header-fade: rgba(24, 28, 25, .5);
    --neu-hi: rgba(255, 255, 255, .055);
    --neu-lo: rgba(0, 0, 0, .62);
  }
}
:root[data-theme="dark"] {
  --bg:        #181c19;
  --bg-2:      #1c211d;
  --surface:   #181c19;
  --surface-2: #1e231f;
  --surface-3: #242a25;
  --seg-thumb: #262c27;
  --glass:     #181c19;
  --glass-2:   #1e231f;
  --popover:   #1e231f;
  --header-fade: rgba(24, 28, 25, .5);
  --neu-hi: rgba(255, 255, 255, .055);
  --neu-lo: rgba(0, 0, 0, .62);
}

/* ---- Erhaben (aus der Fläche gedrückt) ------------------------------ */
.card:not(.flat) {
  background: var(--surface);
  border: none;
  box-shadow: var(--neu-out);
}
details.sect {
  background: var(--surface);
  border: none;
  box-shadow: var(--neu-out);
}
details.sect[open] { border: none; }

.quick-card,
.home-link {
  background: var(--surface);
  border: none;
  box-shadow: var(--neu-out);
}
.quick-card:hover { background: var(--surface); border: none; }
.quick-card:active, .home-link:active { box-shadow: var(--neu-in); transform: none; }
.home-link:hover { background: var(--surface); border: none; }

.pantry-card {
  background: var(--surface);
  border: none;
  box-shadow: var(--neu-out-sm);
}
.pantry-card.open { border: none; }

/* Erfolge: Übungs-Karten erhaben */
.exprog {
  background: var(--surface);
  border: none;
  box-shadow: var(--neu-out-sm);
}
.exprog:hover { border: none; }
.exprog:active { box-shadow: var(--neu-in-sm); transform: none; }

.btn {
  background: var(--surface);
  border: none;
  box-shadow: var(--neu-out-sm);
}
.btn:hover { background: var(--surface); }
.btn:active { box-shadow: var(--neu-in-sm); transform: none; }
/* Primär-Buttons behalten den Akzent, bekommen aber die weiche Tiefe. */
.btn.primary { background: var(--accent); box-shadow: var(--neu-out-sm); }
.btn.primary:active { box-shadow: var(--neu-in-sm); }
/* Ghost-Buttons bleiben bewusst leise (kein Chrome). */
.btn.ghost { background: none; box-shadow: none; }
.btn.ghost:active { box-shadow: none; }

/* Wochentage: runde, weich erhabene Taster (aktiver Tag behält Akzent). */
.weekstrip .day .dot {
  background: var(--surface);
  border: none;
  box-shadow: var(--neu-out-sm);
}
.weeknav-btn {
  background: var(--surface); border: none;
  box-shadow: var(--neu-out-sm);
}

/* Häufig-gegessen-Kacheln (Home) */
.freq-meal, .freq-meals > button {
  background: var(--surface);
  border: none;
  box-shadow: var(--neu-out-sm);
}

/* ---- Eingelassen (in die Fläche gedrückt) --------------------------- */
.seg {
  background: var(--surface);
  box-shadow: var(--neu-in);
  padding: 4px;
  border-radius: 12px;
}
.seg button.active {
  background: var(--seg-thumb);
  box-shadow: var(--neu-out-sm);
}
/* Scroll-Hinweis-Kanten der Untertab-Leiste an den neuen Grund anpassen */
.seg-scroll::before { background: linear-gradient(90deg, var(--surface), rgba(0,0,0,0)); }
.seg-scroll.more-right::after { background: linear-gradient(270deg, var(--surface), rgba(0,0,0,0)); }

.search-row input[type="text"],
.search-row input[type="number"],
.search-row input[type="search"],
.search-row select,
.input-clear input,
.pantry-filter,
.food-res select,
form input[type="email"],
form input[type="password"],
form input[type="text"],
form input[type="number"],
form textarea,
form select {
  background: var(--surface);
  border: 1px solid transparent;
  box-shadow: var(--neu-in);
  border-radius: 12px;
}
.search-row input:hover, .input-clear input:hover,
form input:hover, form textarea:hover, form select:hover {
  border-color: transparent;
}
.search-row input:focus-visible, .input-clear input:focus-visible,
form input:focus-visible, form textarea:focus-visible, form select:focus-visible {
  border-color: transparent;
  box-shadow: var(--neu-in), var(--focus);
}

/* Makro-/Zeitraum-Balken: Rinne eingelassen, Füllung bleibt kräftig. */
.macrobar .track {
  background: var(--surface);
  border: none;
  box-shadow: var(--neu-in-sm);
}

/* Wasser-Schnellwahl wirkt sonst wie 3 schwere Karten: kleiner halten. */
.water-quick .btn { box-shadow: var(--neu-out-sm); }

/* Toast/Modal-Flächen leicht abgesetzt lassen (Lesbarkeit vor Effekt):
   sie liegen ÜBER der Seite, deshalb normaler Pop-Schatten + Popover-Ton. */
.modal, .modal-detail, .detail-sheet .sheet, .toast { border: none; }