/* =========================================================
   Life Archive – Komponenten (Hexagon, Menü-Button, Cards)
   ========================================================= */

/* ---------- Hexagon ---------------------------------------------------- */

.hex {
  /* Höhe und Randstärke lokal aus --hex-w ableiten, damit
     Größenvarianten (--hex-w Override) Proportionen behalten. */
  --rim: calc(var(--hex-w) * var(--hex-rim-ratio));
  --clip: var(--hex-clip);

  position: relative;
  display: grid;
  place-items: center;
  width: var(--hex-w);
  height: calc(var(--hex-w) * .866);   /* regelmäßiges Sechseck, flat-top */
  isolation: isolate;
  transition:
    transform var(--dur) var(--ease-spring),
    filter    var(--dur) var(--ease-out);
  will-change: transform;
}

/* Äußere Fläche = Stroke-Farbe, innere Fläche = Fill-Farbe.
   Die Differenz --rim bildet die Umrandung. */
.hex__shape {
  position: absolute;
  inset: 0;
  clip-path: var(--clip);
  background: var(--hex-stroke);
  transition: filter var(--dur) var(--ease-out);
}

.hex__face {
  position: absolute;
  inset: var(--rim);
  clip-path: var(--clip);
  background: var(--hex-color);
}

/* Gedrehte Variante: Spitze oben und unten, senkrechte Kanten links
   und rechts. Damit greifen waagerechte Reihen ineinander. */
.hex--pointy {
  --clip: var(--hex-clip-pointy);
  height: calc(var(--hex-w) * 1.1547);
}

.hex__icon {
  position: relative;
  z-index: 1;
  width: 52%;
  height: 52%;
  object-fit: contain;
  pointer-events: none;
  transition: transform var(--dur) var(--ease-spring);
}

/* Klick-Feedback */
.hex.is-tapped { animation: hex-pop 420ms var(--ease-spring); }

@keyframes hex-pop {
  0%   { transform: scale(.9); }
  55%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Größenvarianten */
.hex--sm { --hex-w: 56px; }
.hex--xs { --hex-w: 44px; --hex-rim: 1.5px; }

/* ---------- Sechseckiger Icon-Knopf ------------------------------------ */

/* Für einzelne Handgriffe – Zurück, Schließen. Gebaut wie das große
   Hexagon: außen der Rand, darin die Fläche, beide mit derselben
   Kontur. Vorher waren das Kreise (.back-btn, .mnt-home); mit der
   Sechseck-Sprache der App hatte das nichts zu tun. */
.hex-btn {
  --hex-w: 42px;

  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--hex-w);
  height: calc(var(--hex-w) * .866);
  clip-path: var(--hex-clip);
  background: var(--line-strong);
  transition: transform var(--dur-fast) var(--ease-out);
}

.hex-btn__face {
  position: absolute;
  inset: calc(var(--hex-w) * var(--hex-rim-ratio));
  clip-path: var(--hex-clip);
  background: var(--surface);
  transition: background-color var(--dur) var(--ease-out);
}

.hex-btn__icon {
  position: relative;
  z-index: 1;
  width: 33%;
}

.hex-btn:hover .hex-btn__face { background: var(--surface-2); }
.hex-btn:active { transform: scale(.9); }

.hex-btn--sm { --hex-w: 34px; }

/* Der alte runde Zurück-Knopf ist derselbe Knopf – nur der Name
   blieb, damit vorhandene Aufrufe weiter stimmen. */
.back-btn {
  --hex-w: 42px;

  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--hex-w);
  height: calc(var(--hex-w) * .866);
  clip-path: var(--hex-clip);
  background: var(--line-strong);
  transition: transform var(--dur-fast) var(--ease-out);
}

.back-btn img { width: 13px; }
.back-btn:active { transform: scale(.9); }

/* ---------- Icon-Helfer ------------------------------------------------- */

/* Die SVGs in assets/icons sind schwarz – für dunkle Flächen invertieren */
.icon-inv { filter: invert(1); }

/* ---------- Cards / Buttons -------------------------------------------- */

.card {
  position: relative;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.card--link:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.card--link:active { transform: scale(.99); }

.card__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}

.card__meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-dim);
}

.card__accent {
  position: absolute;
  inset-inline-start: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent, var(--line-strong));
}



/* Der handelnde Knopf. Er setzt nicht mehr `background` – die Fläche
   liegt seit dem Eckschnitt in ::after, und eine Hintergrundfarbe am
   Element selbst läge darunter und wäre nie zu sehen. Er setzt statt
   dessen die Tokens, aus denen ::before und ::after ihre Farbe holen. */
/* Die drei Stufen des Knopfsystems stehen weiter unten in dieser Datei,
   direkt hinter .btn – dort, wo auch .btn3d seine hat. Hier stand
   früher eine eigene Fassung von --accent, die auf --surface-2
   zurückfiel: also auf 1,11:1, praktisch unsichtbar. */

/* ---------- Sheet (Schnellmenü des Center-Buttons) ---------------------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  align-items: end;
  justify-items: center;
}

.sheet[hidden] { display: none; }

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--o-deep), .6);
  backdrop-filter: blur(3px);
  animation: fade-in var(--dur) var(--ease-out) both;
}

.sheet__panel {
  position: relative;
  width: var(--shell);
  margin-bottom: var(--safe-bottom);
  padding: 14px 16px calc(22px + var(--safe-bottom));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  animation: sheet-up 340ms var(--ease-out) both;
}

.sheet__grip {
  width: 40px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: var(--line-strong);
}

.sheet__title {
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.sheet__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.sheet__item {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 6px;
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--text-dim);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.sheet__item:hover { background: var(--surface-2); color: var(--text); transform: translateY(-2px); }
.sheet__item:active { transform: scale(.96); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes sheet-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   Speichermeldung

   Kein Toast: eine fatale Meldung bleibt stehen, bis der Nutzer
   handelt. Sie sitzt oben, damit sie nicht mit den Erinnerungs-
   Bannern (.nt-toast, unten) um denselben Platz streitet, und
   über der Sticky-Nav (z-index 50) sowie dem Sheet (75) – aber
   unter den Popups (80), damit „Daten sichern" bedienbar bleibt.
   ========================================================= */

.la-alert {
  position: fixed;
  top: calc(12px + var(--safe-top, 0px));
  inset-inline-start: 50%;
  z-index: 78;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: min(460px, calc(100% - 24px));
  padding: 12px 14px;
  transform: translateX(-50%);
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
  animation: la-alert-in 260ms var(--ease-spring) both;
}

/* Über dem Inhalt, nicht über dem Bildschirm: ab 900 nimmt die
   Schiene links 128px weg, und die Mitte des Fensters ist nicht mehr
   die Mitte dessen, worauf sich die Meldung bezieht. Ohne Umgebung
   (Speicher-Warnung vor der Anmeldung) gibt es keine Schiene, also
   hängt die Regel an [data-shell]. */
@media (min-width: 900px) {
  body[data-shell] .la-alert { inset-inline-start: calc(50% + var(--rail-w) / 2); }
}

@keyframes la-alert-in {
  from { opacity: 0; transform: translate(-50%, -14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.la-alert.is-out { opacity: 0; transition: opacity 200ms var(--ease-out); }

/* Dieselbe Gefahrensprache wie .acct-danger – nicht eine zweite erfinden. */
.la-alert--fatal { border-color: rgba(var(--t-fitness-stroke), .55); }

.la-alert__body { display: grid; gap: 3px; min-width: 0; }

.la-alert__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--g-03);
}

.la-alert--fatal .la-alert__title { color: var(--c-fitness); }

/* --text-faint waere hier zu blass: der Satz sagt, was zu tun ist. */
.la-alert__meta {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-dim);
}

.la-alert__act {
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--c-fitness);
  color: var(--on-accent);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.la-alert__act:hover { filter: brightness(1.1); }
.la-alert__act:active { transform: scale(.96); }

.la-alert__close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.la-alert__close:hover { background: var(--surface-3); color: var(--text); }

/* Hinweis statt Gefahr: „Neue Fassung bereit" (app/pwa.js) benutzt
   dasselbe Banner, aber nicht dieselbe Farbe. --c-fitness ist die
   Gefahrensprache der App; ein Update ist keine.
   Kontrast Knopf: #c7b3ff auf --bg – Schrift --bg auf #c7b3ff. */
.la-alert--info { border-color: rgba(var(--t-meditation), .45); }
.la-alert--info .la-alert__title { color: var(--accent-app); }
.la-alert--info .la-alert__act { --btn-face: var(--accent-app); background: none; }

/* #########################################################
   Geteilte Bausteine aller Bereiche

   Alles ab hier benutzen mindestens zwei Module – oder einer der
   gemeinsamen Bauer (app/modal.js, app/views/module-base.js,
   app/doc/links.js). Es stand früher in styles/meditation.css und
   styles/fitness.css, den Stilblättern einzelner Module: wer eine
   Karte im Reader ändern wollte, musste sie in der Meditation
   suchen. Jetzt steht jede geteilte Klasse genau einmal, und zwar
   hier.

   Diese Datei wird VOR allen Modul-Stilblättern geladen (siehe
   index.html). Das ist Absicht: modul-eigene Feinheiten wie
   `.cd .mnt-stat` oder `.rd-stats4 .mnt-stat__value` stehen in
   ihrem eigenen Blatt und gewinnen weiterhin.

   Verschoben, nicht umbenannt: die Namen (.mnt-*, .pop__*) tragen
   noch die Herkunft aus der Meditation. Ein Umbenennen wäre eine
   eigene Änderung – und eine, die jede JS-Abfrage mitzieht
   (closest('.mnt-card') in app/nutrition/settings.js).
   ######################################################### */

/* =========================================================
   Seitengerüst

   Der Rahmen jeder Modulseite. `body[data-shell] .mnt` in
   styles/shell.css nimmt den Abstand wieder weg, wo die feste
   Leiste ihn schon macht.
   ========================================================= */

/* .mnt ist der Rahmen JEDER Modulseite – knapp fünfzig Bildschirme
   hängen darin. Deshalb steht die Grenze hier und nicht fünfzig Mal
   einzeln: eine Modulseite ist ein Stapel Karten, und der hört bei
   --board auf und steht in der Mitte von --shell.

   --board und nicht --flow: was in diesen Karten steht, sind Listen,
   Kacheln, Legenden und Zeilen. Die brechen um und werden mit Platz
   besser. Der enge Fluss (--flow) gilt weiter dort, wo wirklich
   Fließtext steht – im Block-Editor – und --measure für die
   Beschreibungszeile unter einer Kartenüberschrift.

   Ausgenommen sind die vier Bildschirme, die von der Breite leben:
   das Monatsgitter, das Rezeptbuch, das Bücherregal und der
   Lesebildschirm. Sie nehmen --shell ganz, ihre Raster (auto-fill,
   auto-fit) füllen ihn von selbst mit mehr Spalten. Der
   Lesebildschirm hat seine eigene Grenze (.rd-stage, --measure). */
.mnt {
  padding-top: calc(10px + var(--safe-top));
  max-width: var(--board);
  margin-inline: auto;
}

#cal-root,
#nu-book,
.mnt.rd-lib,
.mnt.rd-read { max-width: none; }

/* =========================================================
   Karten und Statistik

   Die Karte ist der Grundbaustein jeder Modulseite: Kopfzeile mit
   Symbol, Titel und einem Platz rechts, darunter der Inhalt.
   Benutzt von Calendar, Cue Diary, Fitness, Journal, Meditation,
   Nutrition und Reader.
   ========================================================= */

/* ---------- Statistik ----------------------------------------------------- */

.mnt-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mnt-stat {
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  text-align: center;
}

.mnt-stat__value {
  font-family: var(--font-mono);
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--accent-app);
}

.mnt-stat__label {
  display: block;
  margin-top: 2px;
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.mnt-rate {
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  color: var(--text-faint);
}

/* ---------- Container ------------------------------------------------------ */

.mnt-card {
  margin-top: 18px;
  padding: 12px 14px 16px;
  background: var(--surface);
  border: 1px solid rgba(var(--o), .07);
  border-top: 1.5px solid var(--accent-app);
  border-radius: 8px;
}

.mnt-card__head {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  margin-bottom: 14px;
}

.mnt-card__icon { width: 26px; }
.mnt-card__slot { display: block; }

.mnt-card__title {
  font-size: 17px;
  font-weight: 400;
  text-align: center;
  color: var(--g-04);
}

.mnt-add {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.mnt-add img { width: 26px; }
.mnt-add:hover { background: rgba(var(--t-meditation), .14); }
.mnt-add:active { transform: scale(.9); }

/* =========================================================
   Aktionsknöpfe und Listen

   .mnt-act steht in Fitness, Meditation und Nutrition; die Liste
   benutzt heute die Meditation und LA.ui.list (module-base.js).
   ========================================================= */

/* Aktionsknöpfe */

/* Der geteilte Aktionsknopf. Er HANDELT – also rechter Winkel und
   ein Sockel dahinter, kein Eckschnitt (siehe die Notiz bei .btn3d
   weiter unten und den nachgezogenen Teil in styles/nutrition.css).

   Er trug als Letzter der geteilten Bausteine noch `border-radius`
   und ein `scale(.94)` beim Druck. Der Radius fiel bei der Prüfung
   der Meditation auf; weil der Knopf geteilt ist, stand er damit
   auch in Nutrition und Fitness. */
.mnt-act {
  --depth: 2.5px;
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 15px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 500;
  transition: transform var(--dur-fast) var(--ease-out);
}

.mnt-act::before,
.mnt-act::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.mnt-act::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.mnt-act::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
  transition: background-color var(--dur) var(--ease-out);
}

.mnt-act:hover::after { background: var(--btn-face-hover); }
.mnt-act:active { transform: translate(var(--depth), var(--depth)); }
.mnt-act:active::before { opacity: 0; }

/* Dunkler Glyph auf der Akzentfläche: 6,4:1 statt 3,1:1 in Weiß. */
.mnt-act img { width: 16px; filter: brightness(0) saturate(100%); }

.mnt-act--icon { padding: 5px 8px; }
.mnt-act--icon img { width: 17px; }

/* Liste der übrigen Sessions */

.mnt-list {
  display: grid;
  max-height: 216px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.mnt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
}

.mnt-row:last-child { border-bottom: 0; }

.mnt-row__name {
  font-size: 14px;
  color: var(--g-09);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mnt-row__meta { font-size: 12.5px; color: var(--text-dim); }
.mnt-row__actions { display: flex; gap: 6px; }

.mnt-empty, .mnt-missing {
  padding: 14px 0;
  font-size: 14px;
  color: var(--text-dim);
}

/* Der eine Weg hinaus, den ein leerer Bildschirm anbietet – „Back to the
   Journal", wenn der Eintrag weg ist. Ohne Farbe und Unterstrich stünde er
   im selben Grau wie der Satz darum und wäre als Verweis nicht zu erkennen. */
.mnt-empty a, .mnt-missing a { color: var(--accent-app); text-decoration: underline; }

/* =========================================================
   Popups

   Der Rahmen kommt aus app/modal.js, die Innenteile (.pop__*) aus
   allen Modulen und aus app/doc/links.js. Die modulspezifischen
   Varianten (.pop--nu, .pop--note, .pop--fast …) bleiben in den
   jeweiligen Blättern, ebenso die Akzente je Ebene
   (.modal-layer.cd, .modal-layer.jr …).
   ========================================================= */

.modal-root { position: fixed; inset: 0; z-index: 80; pointer-events: none; }

.modal-layer {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: auto;
}

.modal-layer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--o-bg2), .60);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: fade-in 180ms var(--ease-out) both;
}

.modal-layer.is-closing { opacity: 0; transition: opacity 160ms var(--ease-out); }

body.is-modal-open { overflow: hidden; }

/* Das Popup ist eine Fläche wie jede andere – also zwei geschnittene
   Ecken, oben links und unten rechts.

   Der Rand und der Schatten von vorher gehen dabei verloren: clip-path
   schneidet beide mit weg. Der übliche Ausweg – eine zweite Lage als
   ::before dahinter – trägt hier nicht, weil das Feld `overflow-y:
   auto` hat und damit alles wegschneidet, was außerhalb des
   Innenrahmens liegt; ein Rand bei inset:-1px wäre unsichtbar.

   Also anders herum:
     · Der Schatten wandert von box-shadow zu filter: drop-shadow().
       Der folgt der geschnittenen Kontur, statt sie zu ignorieren.
     · Die Akzentfarbe des Moduls, die vorher im Rand steckte, steht
       jetzt als Linie unter der Kopfzeile (.pop__head). Sie liegt
       damit INNERHALB der Fläche, überlebt den Schnitt, und sagt
       dasselbe: „dieses Fenster gehört zu diesem Bereich."

   Die Einblendung skaliert nicht mehr von 94 % hoch: eine Fläche mit
   fester Schnittkante bekommt beim Skalieren eine mitwachsende Ecke
   und wirkt dabei weich. Sie steigt jetzt nur noch auf. */
/* Das Fenster selbst trägt beim Öffnen den Fokus (app/modal.js) –
   ohne Ring: es ist kein Bedienelement, nur der Startpunkt für Tab. */
.modal-panel:focus, .modal-panel:focus-visible { outline: none; }

.modal-panel {
  --cut: 16px;
  position: relative;
  width: min(430px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--surface);
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  filter: drop-shadow(0 18px 40px rgba(var(--o-deep), .6));
  animation: pop-in 240ms var(--ease-out) both;
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.modal-discard__text { text-align: center; margin-bottom: 14px; }

/* „Save and leave" – nur auf Bildschirmen, die sich selbst sichern
   können (View.save, app/modal.js). Volle Breite unter den beiden
   Antworten: der dritte Weg, nicht die Frage selbst. */
.modal-discard__save { width: 100%; margin-top: 12px; }

/* Die Akzentlinie, die vorher als Rand um das ganze Fenster lief.
   Sie steht jetzt hier, weil sie hier den Eckschnitt überlebt – und
   sie trennt zugleich Kopf von Inhalt, was der Rand nie tat. */
.pop__head {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  padding: 12px 12px 10px;
  border-bottom: 2px solid var(--accent-deep);
}

/* Ein Knopf: rechte Winkel, Sockel dahinter, sinkt beim Druck ein.
   Er trug border-radius:10px und schrumpfte beim Antippen auf 90 % –
   beides ist in dieser Sprache kein Druck, sondern ein Zucken. */
.pop__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 0;
}

/* Zurück und Schließen im Kopf eines Fensters sind die stille Stufe
   (Night Pond, 0.6.0 beta): keine Fläche, eine Kante, der Sockel hell –
   wie „Later" auf Home. Der Knopf zum Anlegen daneben ist getönt
   (button.pop__icon--add), damit klar ist, welcher von beiden handelt. */
button.pop__icon {
  --depth: 2.5px;
  --btn-face: transparent;
  --btn-face-hover: rgba(var(--o), .10);
  --btn-lift: rgba(var(--o), .22);
  --btn-edge: rgba(var(--o), .26);
  --btn-under: transparent;

  position: relative;
  isolation: isolate;
  border: 0;
  background: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

button.pop__icon::before,
button.pop__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

button.pop__icon::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

button.pop__icon::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
  box-shadow: inset 0 0 0 1.5px var(--btn-edge, transparent);
  transition: background-color var(--dur) var(--ease-out);
}

/* Der Sockel steht jetzt auch im Ruhezustand.

   Vorher erschien er erst beim Zeigen – der Rückwärtspfeil im Kopf
   eines Fensters war ohne Zeiger also weder Fläche noch Sockel,
   sondern ein Pfeil im Nichts. Auf dem Handy gibt es kein Zeigen:
   dort blieb er das ganze Leben lang unsichtbar. Er ist der einzige
   Weg zurück aus einem Fenster, und der darf nicht raten lassen. */
button.pop__icon:focus-visible::after { background: var(--btn-face-hover); }
button.pop__icon:hover::after { background: var(--btn-face-hover); }
button.pop__icon:active { transform: translate(var(--depth), var(--depth)); }
button.pop__icon:active::before { opacity: 0; }
.pop__icon img { width: 17px; }

.pop__icon--danger img { width: 19px; opacity: .82; }
.pop__icon--danger:hover { background: rgba(var(--t-fitness-stroke), .16); }
.pop__icon--danger:hover img { opacity: 1; }

.pop__title {
  font-size: clamp(19px, 5.4vw, 22px);
  font-weight: 500;
  text-align: center;
}

.pop__title--plain { padding: 16px 20px 2px; }

.pop__body { padding: 8px 20px 22px; display: grid; gap: 20px; }

/* Felderzeilen im Editor */

.pop__fields { display: grid; gap: 18px; }

.pop__field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1.5px solid var(--accent-app);
}

.pop__label { font-size: 18px; }

.pop__value {
  text-align: end;
  font-size: 14px;
  color: var(--g-16);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pop__hint {
  margin-top: 12px;
  font-size: max(var(--fs-floor), 11.5px);
  text-align: center;
  color: var(--text-faint);
}

/* Optionsknöpfe – die Zeilen im Dreipunkt-Menü */

.opt-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--btn-quiet);
  font-size: 17px;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.opt-btn__mark {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  background: var(--accent-app);
}

.opt-btn:hover { background: var(--btn-quiet-hover); }
.opt-btn:active { transform: scale(.98); }

.opt-btn img { width: 22px; flex: none; }

.opt-btn--danger {
  background: rgba(var(--t-fitness-stroke), .26);
  border: 1px solid rgba(var(--t-fitness-stroke), .5);
  color: #ff9a9a;
}

.opt-btn--danger:hover { background: rgba(var(--t-fitness-stroke), .38); }

/* Fließtext in Popups */
.pop__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* =========================================================
   Felder und Auswahl

   Kommt aus dem Fitness-Blatt, steht aber genauso in Nutrition
   (Statistik-Filter, Gewicht, Einstellungen).
   ========================================================= */

.fit-select { position: relative; display: block; min-width: 0; }

.fit-select select {
  width: 100%;
  padding: 8px 30px 8px 12px;
  border: 1.5px solid var(--accent-deep);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}

.fit-select select option,
.fit-select select optgroup { background: var(--surface); color: var(--text); }

.fit-select::after {
  content: "";
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-inline-end: 2.2px solid var(--text);
  border-bottom: 2.2px solid var(--text);
  transform: rotate(45deg);
  pointer-events: none;
}

.fit-field { display: grid; gap: 6px; }

.fit-field__label {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.fit-date {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--accent-deep);
  border-radius: 8px;
  background: var(--field-bg, var(--g-47));
  color: var(--text);
  font: inherit;
  font-size: 16px;
  outline: none;
}

.fit-date::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; cursor: pointer; }

/* ---------- Die Zeile unter einer Kartenüberschrift ----------------------
   „Every muscle group drawn in the colour of its highest exercise
   rank. Tap a muscle or a name below it to single one out." – solche
   Sätze stehen in fast jeder Karte, und sie sind das Einzige darin,
   was echter Fließtext ist. Auf 780px Kartenbreite wären das rund
   140 Zeichen je Zeile; beim Rücksprung findet das Auge die nächste
   nicht mehr.

   Sie hören deshalb bei --measure auf. Links bündig wie bisher – die
   Grenze fällt nicht auf, sie bricht nur früher um. Die Klassen sind
   von Haus aus je Modul benannt; hier stehen sie zusammen, weil es
   dieselbe Rolle ist.
   ------------------------------------------------------------------ */

.fit-tracks,
.fit-note,
.nu-note,
.cd-note { max-width: var(--measure); }

/* ---------- Sofort eintragen -------------------------------------------
   Das Popup hinter dem Dreipunkt-Knopf und später hinter dem Knopf oben
   rechts in jedem Bereich (app/track.js).

   Es trägt die neue Form der App: ein Rechteck, dem links oben und
   rechts unten die Ecke fehlt. Gebaut wie ein Hexagon – außen die
   Randfarbe, darin dieselbe Kontur noch einmal in der Flächenfarbe.
   Ein `border` ginge nicht: clip-path nähme ihn an den Schnitten mit
   weg, und die beiden Schrägen blieben offen. */

.modal-panel--bare {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.trk {
  clip-path: var(--cut-clip);
  background: var(--accent-app);
  padding: 1px;
  box-shadow: 0 24px 60px rgba(var(--o-deep), .6);
}

.trk__body {
  clip-path: var(--cut-clip);
  background: var(--surface);
  padding: 18px 16px 16px;
}

.trk__head { padding: 0 4px 14px; }

.trk__title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-strong);
}

.trk__hint {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-subtle);
}

.trk-rows,
.trk-areas { display: grid; gap: 6px; }

/* Leise Überschrift über einer Gruppe seltenerer Zeilen. */
.trk__group {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Eine Zeile ist ein Knopf – aber kein Knopf mit Tiefe. Tiefe hat in
   dieser App, was allein für sich steht; eine Liste gleichrangiger
   Zeilen wäre mit sechs Sockeln ein Setzkasten.

   Sie trägt dieselbe Form wie die Zeilen in „Add to …" des Kalenders
   und in „Link to …" (.lk-row, styles/doc.css): leicht in der Farbe
   ihres Bereichs getönt, die Farbe als Kante links, das Zeichen in
   der Farbe. --tone kommt von der Gruppe darum (.lk-group) oder von
   der Zeile selbst; ohne beides bleibt sie neutral. */
.trk-row,
.trk-area {
  --cut: 8px;
  --row-tone: var(--tone, var(--text-subtle));
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 9px 14px 9px 13px;
  border: 0;
  text-align: start;
  color: inherit;
  background:
    linear-gradient(90deg, var(--row-tone) 0 3px, transparent 3px),
    color-mix(in srgb, var(--row-tone) 7%, var(--field-bg));
  clip-path: var(--cut-clip);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.trk-row:hover,
.trk-row:focus-visible,
.trk-area:hover,
.trk-area:focus-visible {
  background:
    linear-gradient(90deg, var(--row-tone) 0 3px, transparent 3px),
    color-mix(in srgb, var(--row-tone) 16%, var(--field-bg));
}
.trk-row:focus-visible,
.trk-area:focus-visible { outline: 2px solid var(--row-tone); outline-offset: 2px; }

.trk-row:active,
.trk-area:active { transform: scale(.99); }

.trk-row__icon {
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--row-tone);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.trk-row__body { display: grid; gap: 2px; min-width: 0; }

.trk-row__name {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--text-strong);
}

.trk-row__hint {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ein Workout in der Auswahl: links das Zeichen, rechts das Dreieck,
   das sagt, dass es hier losgeht. Beide sind Masken, damit sie die
   Farbe der Zeile annehmen statt eine eigene mitzubringen. */
.trk-row__go {
  flex: none;
  margin-inline-start: auto;
  width: 14px;
  height: 14px;
  background: var(--row-tone);
  opacity: .7;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
  transition: opacity var(--dur) var(--ease-out);
}

.trk-row:hover .trk-row__go { opacity: 1; }

/* Der Pfeil einer Zeile, die eine zweite Auswahl öffnet (wie .lk-row__more). */
.trk-row__more {
  flex: none;
  margin-inline-start: auto;
  font-size: 22px;
  line-height: 1;
  color: var(--row-tone);
  transition: transform var(--dur) var(--ease-out);
}
.trk-row:hover .trk-row__more { transform: translateX(2px); }

/* Die erste Zeile einer Auswahl – das geplante Workout des Tages, die
   Mahlzeit, deren Fenster offen ist, die zuletzt gelaufene Meditation.
   Sie ist dieselbe Zeile, nur wacher getönt und mit einer Kontur in
   der Bereichsfarbe: die erste, nicht eine andere. */
.trk-row--lead {
  background:
    linear-gradient(90deg, var(--row-tone) 0 3px, transparent 3px),
    color-mix(in srgb, var(--row-tone) 15%, var(--field-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--row-tone) 45%, transparent);
}

.trk-row--lead:hover,
.trk-row--lead:focus-visible {
  background:
    linear-gradient(90deg, var(--row-tone) 0 3px, transparent 3px),
    color-mix(in srgb, var(--row-tone) 22%, var(--field-bg));
}

.trk-row--lead .trk-row__go { opacity: 1; }

/* Ein gelesenes Etikett, kein Knopf: unter 30 px Höhe ohne Schnitt. */
.trk-row__tag {
  flex: none;
  margin-inline-start: auto;
  padding: 4px 8px;
  font-size: max(var(--fs-floor), 10px);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--row-tone);
}

/* Steht das Etikett schon rechts, müssen Dreieck und Pfeil den Rand
   nicht mehr an sich ziehen. */
.trk-row__tag + .trk-row__go,
.trk-row__tag + .trk-row__more { margin-inline-start: 10px; }

/* Das Fenster selbst: dieselbe Fläche wie „Add to …" im Kalender. */
.pop--trk .pop__body { gap: 12px; }
.pop--trk .pop__text { margin: 0; text-align: center; color: var(--text-muted); }
.pop--trk .lk-group__rows .trk__group { margin-top: 6px; }

/* Eine leise Überschrift innerhalb einer Gruppe trägt deren Ton. */
.lk-group .trk__group {
  border-top-color: color-mix(in srgb, var(--tone) 22%, transparent);
  color: color-mix(in srgb, var(--tone) 70%, var(--text-subtle));
}

html[data-eink] .trk-row,
html[data-eink] .trk-area,
html[data-eink] .trk-row--lead { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
html[data-eink] .trk-row--lead { box-shadow: inset 0 0 0 2px currentColor; }
html[data-eink] .trk-row__tag { background: #1c1c1c; color: var(--eink-paper); }


.trk__empty {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-subtle);
}

.trk-area__name {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--text);
}

.trk-area:hover .trk-area__name { color: var(--tone); }


/* ---------- Bereichs-Verzeichnis ----------------------------------------
   Das Popup hinter „More areas" auf der Startseite (app/areas.js).
   Panel, Zeile und Sechseck sind von oben geliehen; hier steht nur,
   was das Aufklappen dazu braucht. */

/* Sieben Bereiche plus vier aufgeklappte Reiter sind mehr, als auf ein
   Telefon passt. Scrollen tut deshalb die Liste, nicht das Popup: der
   Kopf bleibt stehen, und die geschnittene Kontur bleibt an ihrem
   Platz, statt unter dem Bildschirmrand zu verschwinden. */
.ah-list {
  display: grid;
  gap: 6px;
  max-height: min(58dvh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Platz für den Balken, damit er nicht auf den Zeilen liegt. */
  padding-inline-end: 2px;
}

/* Aufgeklappt rücken Bereichszeile und Reiter zusammen und werden zu
   einem Block – das ist der Unterschied zwischen „darin" und
   „darunter". */
.ah-group { display: grid; gap: 4px; }

.ah-area__count {
  margin-inline-start: auto;
  font-size: max(var(--fs-floor), 11.5px);
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);
}

.ah-area__chev {
  flex: none;
  width: 13px;
  height: auto;
  opacity: .65;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.ah-area__chev.is-open { transform: rotate(180deg); opacity: 1; }

.trk-area.ah-area:hover .ah-area__chev { opacity: 1; }

/* Ein Bereich mit nur einem Bildschirm klappt nicht auf, er führt –
   deshalb das Dreieck des Losgehens statt des Pfeils. */
.ah-area__go { margin-inline-start: auto; }

.ah-group.is-open .trk-area {
  background: color-mix(in srgb, var(--tone) 12%, var(--surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 45%, transparent);
}

/* Der aufgeklappte Bereich traegt seinen Ton – und mehr Gewicht.
   Der Ton allein reichte im E-ink-Modus nicht: dort sind alle
   Bereichsfarben Grauwerte, und der offene laese blasser als seine
   Nachbarn statt wacher. */
.ah-group.is-open .trk-area__name { color: var(--tone); font-weight: 600; }

/* Die Reiter eines Bereichs stehen eingerückt: sie gehören zu der Zeile
   darüber und nicht neben sie. */
.ah-tabs {
  display: grid;
  gap: 4px;
  margin-inline-start: 18px;
  animation: ah-drop var(--dur) var(--ease-out) both;
}

.ah-tabs[hidden] { display: none; }

/* Eine eigene Fläche, sonst stünden die Reiter als bloßer Text im
   Popup und sähen nicht aus, als ließe sich einer anfassen. Flacher
   als die Bereichszeile darüber bleiben sie trotzdem: keine Kontur,
   nur die Farbe des Bereichs als Kante links – das ist der Faden,
   an dem man sieht, wozu sie gehören. */
.ah-tab {
  --cut: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--tone) 60%, transparent);
}

.ah-tab:hover { background: var(--surface-3); }
.ah-tab .trk-row__name { font-size: 14px; }

/* Das Zeichen nimmt den Bereichston an – dieselbe Zeile, sechsmal
   grau, wäre eine Liste ohne Herkunft. */
.ah-tab .trk-row__icon {
  background: color-mix(in srgb, var(--tone) 65%, var(--text-muted));
}

@keyframes ah-drop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   Knöpfe – die Form der App
   =========================================================

   Zwei Bausteine, und eine Regel, die beide zusammenhält.

   .cut    Rechteck, dem links oben und rechts unten die Ecke fehlt.
           Diagonal gegenüber, nicht nebeneinander: zwei Schnitte auf
           derselben Seite lesen schief, diagonal liest gewollt. Für
           alles, was eine Fläche ist – Reiter, Marken, Filter.

   .btn3d  Dasselbe, aber mit einem Sockel nach rechts unten. Beim
           Drücken wandert der Knopf genau um die Sockeltiefe dorthin
           und deckt ihn zu: er geht ein. Ohne dieses Eindrücken wäre
           die Tiefe ein Aufkleber.

   Die Regel: Tiefe hat, was etwas TUT – anlegen, hinzufügen, senden.
   Sie hat nicht, was etwas UMSCHALTET – Reiter, Filter, Marken. Wenn
   jede Fläche einen Sockel bekäme, hieße der Sockel nichts mehr, und
   man müsste wieder lesen statt sehen. Genau das soll er ersparen.

   Der Sockel ist ein Pseudoelement, kein box-shadow: clip-path
   schneidet Schatten mit weg. Er liegt hinter der Fläche, trägt
   dieselbe Kontur und ist um --depth verschoben. Beide Pseudoelemente
   stehen auf z-index -1, damit die Beschriftung ohne eigenes Element
   darüber bleibt – ::after wird nach ::before gemalt und deckt ihn.
   ========================================================= */

.cut {
  --cut: 9px;
  clip-path: var(--cut-clip);
}

/* Der Grundzustand IST die stille Stufe.
 *
 * Bis hierher war er eine graue Fläche (--btn-quiet, gemessen 1,78:1).
 * Das reichte, um den Knopf zu finden, und führte trotzdem dazu, dass
 * jeder Bildschirm aussah wie ein Stapel gleich lauter grauer Balken:
 * ein Knopf ohne Modifier ist der HÄUFIGSTE Knopf der App, und er sah
 * überall gleich aus wie der wichtigste daneben.
 *
 * Jetzt trägt er eine Kante statt einer Fläche. Der Kontrast steigt
 * dabei (die Kante misst rund 3,4:1 gegen den Grund, die Beschriftung
 * darauf 10,8:1 statt vorher 8,9:1 auf dem hellen Grau), die
 * Lautstärke sinkt – und ein Knopf, der etwas zu sagen hat, kann sich
 * mit --accent oder --tinted davon abheben.
 *
 * Wer die alte Fläche ausdrücklich will, nimmt .btn3d--solid. */
.btn3d {
  --depth: 3px;
  --btn-face: transparent;
  --btn-face-hover: rgba(var(--o), .10);
  --btn-lift: rgba(var(--o), .22);
  --btn-edge: rgba(var(--o), .26);
  /* Ohne das läge unter der durchsichtigen Fläche der Grund einer
     Karte (--surface) – auf einem anderen Grund als der Karte wäre
     das ein Rechteck in der falschen Farbe. */
  --btn-under: transparent;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-out);
}

/* KEIN clip-path hier. Ein Rechteck mit abgeschnittenen Ecken IST ein
   Sechseck, und das Sechseck gehört in dieser App der Fläche – der
   Karte, dem Popup, dem Feld, dem Reiter. Ein Knopf ist das Gegenteil
   davon: ein Ding, das man drückt. Er ist eckig und hat einen Sockel,
   und daran erkennt man ihn, ohne ihn anzufassen.

   Solange Knöpfe denselben Schnitt trugen wie die Flächen, sagten
   beide Formen dasselbe und der Unterschied war umsonst da. Auf einem
   breiten Knopf kam dazu, dass neun Pixel Schnitt nicht wie Absicht
   aussehen, sondern wie eine schlecht gesetzte Ecke. */
.btn3d::before,
.btn3d::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Der Sockel war bis hierher ein eigenes Rechteck (::before), um
   --depth nach unten rechts geschoben und von der Fläche darüber
   verdeckt. Das ging, solange die Fläche undurchsichtig war.

   Seit der Grundzustand eine Kante statt einer Fläche trägt, ist sie
   das nicht mehr – und der Sockel schien durch den ganzen Knopf
   hindurch. Im E-ink-Modus, wo er ausdrücklich auf Schwarz steht, war
   der Knopf dadurch ein schwarzer Block mit schwarzer Schrift darauf.

   Jetzt ist der Sockel ein versetzter `box-shadow` an der Fläche. Er
   liegt damit außerhalb ihres Rahmens – er kann durch nichts mehr
   durchscheinen, egal wie durchsichtig sie ist. Möglich ist das erst,
   seit Knöpfe kein clip-path mehr tragen: ein Schatten unter clip-path
   wäre weggeschnitten worden. Die Form und diese Lösung hängen also
   zusammen. */
.btn3d::before { display: none; }

.btn3d::after {
  /* Zwei Schatten in einem: innen die Kante, außen der Sockel.
     Die Kante gehört zur Fläche und nicht zum Element – ein `border`
     zählte zur Größe und verschöbe die Schrift um einen Pixel, sobald
     der Stand wechselt. */
  box-shadow: inset 0 0 0 1.5px var(--btn-edge, transparent),
              var(--depth) var(--depth) 0 0 var(--btn-lift);
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
  transition: background-color var(--dur) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.btn3d:hover::after,
.btn3d:focus-visible::after { background: var(--btn-face-hover); }

/* Eingedrückt: der Knopf wandert auf den Sockel, der Sockel geht weg. */
.btn3d:active { transform: translate(var(--depth), var(--depth)); }
.btn3d:active::after {
  box-shadow: inset 0 0 0 1.5px var(--btn-edge, transparent);
}

.btn3d[disabled],
.btn3d.is-soon {
  color: var(--text-disabled);
  cursor: default;
  transform: none;
}
/* Abgeschaltet heißt: keine Tiefe. Der Sockel steckt seit dem Umbau im
   Schatten der Fläche, also wird er dort abgeschaltet und nicht am
   (nicht mehr vorhandenen) ::before. */
.btn3d[disabled]::after,
.btn3d.is-soon::after,
.btn[disabled]::after {
  box-shadow: inset 0 0 0 1.5px var(--btn-edge, transparent);
  background: none;
}

.btn[disabled] {
  color: var(--text-disabled);
  cursor: default;
  transform: none;
}

/* Der handelnde Knopf steht weiter unten bei den drei Stufen –
   zusammen mit .btn--accent, damit beide Sammelklassen dieselbe
   Farbe tragen und nicht zwei Fassungen davon. */

.btn3d--sm {
  --cut: 7px;
  --depth: 2.5px;
  padding: 7px 13px;
  font-size: 12.5px;
}

/* Der alte runde/eckige Sammelknopf trägt jetzt dieselbe Form. */
/* Derselbe Grundzustand wie .btn3d – Kante statt grauer Fläche.
   Siehe die Begründung dort. */
.btn {
  --depth: 3px;
  --btn-face: transparent;
  --btn-face-hover: rgba(var(--o), .10);
  --btn-lift: rgba(var(--o), .22);
  --btn-edge: rgba(var(--o), .26);
  --btn-under: transparent;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 14px;
  font-weight: 500;
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Eckig, wie .btn3d darüber – siehe die Begründung dort. */
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Sockel als versetzter Schatten, nicht als eigenes Rechteck –
   dieselbe Begründung wie bei .btn3d weiter oben. */
.btn::before { display: none; }

.btn::after {
  box-shadow: inset 0 0 0 1.5px var(--btn-edge, transparent),
              var(--depth) var(--depth) 0 0 var(--btn-lift);
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
  transition: background-color var(--dur) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.btn:hover::after { background: var(--btn-face-hover); }
.btn:active { transform: translate(var(--depth), var(--depth)); }
.btn:active::after {
  box-shadow: inset 0 0 0 1.5px var(--btn-edge, transparent);
}

/* =========================================================
   Die drei Stufen

   Warum es drei sind und nicht eine, steht bei den Tokens in
   styles/base.css (--btn-tinted-*). Kurz: Kontrast allein ist
   keine Hierarchie. Sechs gleich laute graue Balken unter-
   einander sagen nicht, welcher der Weg nach vorn ist – und
   genau so sah das Account-Fenster aus.

   Beide Sammelklassen (.btn und .btn3d) tragen dieselben drei
   Stufen. Sie unterscheiden sich nur im Innenmaß.
   ========================================================= */

/* --- Stufe 1: die eine Handlung ------------------------------------------

   Volle Akzentfläche, dunkle Schrift. --accent ist die Farbe des
   Bereichs, in dem der Knopf steht; ohne Bereich der App-Akzent.
   Höchstens einer je Bildschirm – zwei nebeneinander heben sich auf. */
.btn--accent,
.btn3d--accent,
.btn--primary,
.btn3d--primary {
  --btn-face: var(--accent, var(--accent-app));
  --btn-face-hover: var(--accent, var(--accent-app));
  --btn-lift: var(--g-42);
  --btn-edge: transparent;      /* volle Fläche braucht keine Kante */
  color: var(--on-accent);
  font-weight: 600;
}

.btn--accent:hover::after,
.btn3d--accent:hover::after,
.btn--primary:hover::after,
.btn3d--primary:hover::after { filter: brightness(1.08); }

/* --- Stufe 2: der tragende Zweitweg --------------------------------------

   Schwache Fläche im Akzent, Kante aus demselben Ton in voller Stärke,
   Schrift im Akzent. Der Kontrast sitzt in der Kante und nicht unter
   der Schrift – deshalb bleibt beides lesbar.

   Die Kante ist kein `border`: ein Rand zählt zur Größe des Knopfes
   und verschöbe die Schrift um einen Pixel, sobald der Stand wechselt.
   Sie ist ein `inset`-Schatten auf der Fläche, und die ist eckig – es
   gibt hier kein clip-path, das ihn zerschneiden könnte. */
/* Seit Night Pond (0.6.0 beta) dieselben Token wie das „+" auf Home und
   jedes Werkzeug in der Topbar (--tint-*, styles/pond.css): der helle Ton
   des Bereichs, nicht mehr der tiefe – und die Wahl „Buttons" gilt mit. */
.btn--tinted,
.btn3d--tinted {
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover);
  --btn-lift: var(--tint-lift);
  --btn-edge: var(--tint-edge);
  color: var(--tint-ink);
  font-weight: 600;
  filter: var(--tint-glow);
}

/* --- Stufe 3: was man auch lassen kann -----------------------------------

   Keine Fläche, nur eine Kante und die Schrift in voller Stärke.
   --text misst 10,8:1 – die Beschriftung ist damit besser lesbar als
   auf dem alten grauen Knopf, obwohl der Knopf selbst leiser ist.
   Genau darum geht es: leise heißt nicht undeutlich. */
/* Der Grundzustand trägt sie bereits – die Klasse steht trotzdem hier,
   damit man sie hinschreiben kann, wo die Absicht wichtig ist
   („Abbrechen" neben „Löschen"), und damit sie eine kräftigere Fläche
   ausdrücklich zurücknimmt. */
.btn--quiet,
.btn3d--quiet {
  --btn-face: transparent;
  --btn-face-hover: rgba(var(--o), .10);
  --btn-lift: rgba(var(--o), .22);
  --btn-edge: rgba(var(--o), .26);
  color: var(--text);
  font-weight: 500;
}

/* Und wo doch einmal eine Fläche gebraucht wird – ein Knopf auf einem
   Bild, ein Segment, das gefüllt sein muss. */
.btn--solid,
.btn3d--solid {
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  --btn-lift: var(--btn-quiet-lift);
  --btn-edge: transparent;
  --btn-under: var(--surface);
}

/* --- Und das, was man nur einmal tut -------------------------------------

   Löschen ist kein Zweitweg, sondern ein eigener Ton. Derselbe Aufbau
   wie Stufe 2, nur in der Warnfarbe – dadurch liest es sich als das,
   was es ist, und nicht als „das gleiche wie oben, aber rot". */
.btn--danger,
.btn3d--danger {
  --btn-face: rgba(var(--t-fitness-stroke), .16);
  --btn-face-hover: rgba(var(--t-fitness-stroke), .30);
  --btn-lift: rgba(var(--t-fitness-stroke), .55);
  --btn-edge: rgba(var(--t-fitness-stroke), .90);
  color: var(--c-fitness);
  font-weight: 600;
}

/* Der Knopf im Hinweisbanner (neue Fassung, Speicher voll) handelt –
   er lädt neu. Also trägt auch er einen Sockel. */
.la-alert__act {
  --cut: 7px;
  --depth: 2.5px;
  --btn-face: var(--c-fitness);
  --btn-face-hover: var(--c-fitness);
  --btn-lift: var(--g-42);

  position: relative;
  border-radius: 0;
  background: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.la-alert__act::before,
.la-alert__act::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.la-alert__act::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.la-alert__act::after { background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface)); }

.la-alert__act:hover { filter: none; }
.la-alert__act:hover::after { filter: brightness(1.1); }
.la-alert__act:active { transform: translate(var(--depth), var(--depth)); }
.la-alert__act:active::before { opacity: 0; }

/* Der Schließen-Knopf daneben ist keine Handlung, sondern ein
   Wegwischen – Eckschnitt ja, Sockel nein. */
.la-alert__close { --cut: 6px; border-radius: 0; clip-path: var(--cut-clip); }

/* ---------- Warum diese Zeile nötig ist ---------------------------------
   Fläche und Sockel dieser Knöpfe sind Pseudoelemente auf z-index -1.
   Das geht so lange gut, wie kein Vorfahre einen eigenen Stapelkontext
   aufmacht – tut er es doch (das Hinweisbanner tut es, weil es fest
   steht und ein z-index trägt), rutschen beide hinter dessen Fläche und
   sind weg. Der Knopf war dann wieder rund und in der falschen Farbe.

   `isolation: isolate` macht jeden Knopf zu seinem eigenen Stapel: die
   beiden Pseudoelemente können ihn nicht mehr verlassen, liegen aber
   weiterhin über seiner eigenen (leeren) Fläche und unter der Schrift.
   Damit stimmt es unabhängig davon, wo der Knopf steht. */

.btn,
.btn3d,

.nt-icon,
.nt-add,
.nt-toast__open,
.la-alert__act,
.nt-card,
.nt-filters,
.nt-empty { isolation: isolate; }

/* =========================================================
   Zeichen-Knöpfe – Rechteck mit Sockel
   =========================================================

   Die Regel der App, in einem Satz: eine FLÄCHE ist ein Sechseck,
   ein KNOPF ist ein Rechteck mit Tiefe.

     Sechseck (Eckschnitt)   Textfelder, Popups, Karten, Reiter,
                             Marken – alles, was man liest oder
                             durchblättert
     Rechteck mit Sockel     alles, was man drückt

   Ich hatte das zuerst vertauscht und Zeichen-Knöpfe als Sechsecke
   gebaut. Falsch: die Form IST der Hinweis. Ein Ding zum Drücken muss
   sich ohne Beschriftung von einem Ding zum Lesen unterscheiden – wenn
   beide Sechsecke sind, sagt die Form nichts mehr.

   Einzige gewollte Ausnahme bleibt der zentrale Knopf im Ring: ein um
   30° gedrehtes Sechseck. Er ist kein Zeichen-Knopf, sondern die Mitte
   der Startseite, und seine sechs Ecken zeigen auf die sechs Bereiche.

   Diese Regel gilt für alle Zeichen-Knöpfe der App – die drei über dem
   Notiz-Board, die vier im Kopf des Sheets, die Zurück-Pfeile. Sie
   stehen deshalb hier zusammen und nicht je einmal pro Stilblatt. */

.iconbtn,
.nt-icon,
.sheet-tab,
.hex-btn,
.back-btn {
  --cut: 7px;
  --depth: 3px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  --btn-lift: var(--btn-quiet-lift);

  position: relative;
  isolation: isolate;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: none;
  clip-path: none;
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-out);
}

.iconbtn::before,  .iconbtn::after,
.nt-icon::before,  .nt-icon::after,
.sheet-tab::before, .sheet-tab::after,
.hex-btn::before,  .hex-btn::after,
.back-btn::before, .back-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--cut-clip);
}

.iconbtn::before,
.nt-icon::before,
.sheet-tab::before,
.hex-btn::before,
.back-btn::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.iconbtn::after,
.nt-icon::after,
.sheet-tab::after,
.hex-btn::after,
.back-btn::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
  transition: background-color var(--dur) var(--ease-out);
}

.iconbtn:hover::after,   .iconbtn:focus-visible::after,
.nt-icon:hover::after,   .nt-icon:focus-visible::after,
.sheet-tab:hover::after, .sheet-tab:focus-visible::after,
.hex-btn:hover::after,   .hex-btn:focus-visible::after,
.back-btn:hover::after,  .back-btn:focus-visible::after {
  background: var(--btn-face-hover);
}

.iconbtn:active,
.nt-icon:active,
.sheet-tab:active,
.hex-btn:active,
.back-btn:active {
  transform: translate(var(--depth), var(--depth));
}

.iconbtn:active::before,
.nt-icon:active::before,
.sheet-tab:active::before,
.hex-btn:active::before,
.back-btn:active::before { opacity: 0; }

/* Eingeschaltet: Akzentfläche statt Rahmen – ein Rahmen überlebt den
   Eckschnitt nicht. */
.iconbtn.is-on,
.nt-icon.is-on,
.sheet-tab.is-on {
  --btn-face: color-mix(in srgb, var(--accent-app) 30%, var(--surface-2));
  --btn-face-hover: color-mix(in srgb, var(--accent-app) 40%, var(--surface-2));
}

/* Night Pond (0.6.0 beta): die Zeichen-Knöpfe sind Knöpfe der zweiten
   Reihe – getönt wie das „+" auf Home (--tint-*, styles/pond.css).
   Der Zurück-Pfeil ist die stille Stufe: nur eine Kante, wie „Later". */
.iconbtn,
.nt-icon,
.hex-btn {
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover);
  --btn-lift: var(--tint-lift);
  color: var(--tint-ink);
  filter: var(--tint-glow);
}

.iconbtn::after,
.nt-icon::after,
.hex-btn::after { box-shadow: inset 0 0 0 1.5px var(--tint-edge); }

.back-btn {
  --btn-face: transparent;
  --btn-face-hover: rgba(var(--o), .10);
  --btn-lift: rgba(var(--o), .22);
  --btn-under: transparent;
  color: var(--text);
}

.back-btn::after { box-shadow: inset 0 0 0 1.5px rgba(var(--o), .26); }

/* Die alte Innenfläche des Sechsecks trägt nichts mehr – ::after ist
   die Fläche. Das Markup bleibt, damit vorhandene Aufrufe stimmen. */
.hex-btn__face { display: none; }

.hex-btn__icon,
.back-btn img,
.nt-icon img { position: relative; width: 16px; }

.hex-btn--sm,
.iconbtn--sm { width: 34px; height: 30px; --cut: 6px; --depth: 2.5px; }

/* =========================================================
   Ein Knopf ist ein RECHTECK
   =========================================================

   Zweimal falsch gemacht, hier steht es endgültig.

   Der Eckschnitt gehört den FLÄCHEN: Textfeldern, Popups, Karten,
   Reitern, Marken, Zeilen einer Liste. Er gehört NICHT den Knöpfen.
   Ein Knopf mit abgeschnittenen Ecken sieht aus wie ein Sechseck –
   und dann sagt die Form wieder nichts, weil alles Sechseck ist.

   Ein Knopf ist also: gerade Ecken, keine Rundung, kein Schnitt –
   und dahinter der Sockel nach rechts unten. Der Sockel allein macht
   ihn zum Knopf, und er reicht auch völlig.

   Die Zeile steht am Ende der Datei, damit sie jede frühere Regel
   sticht; die Blöcke weiter oben setzen den Schnitt noch. */

.iconbtn::before,   .iconbtn::after,
.nt-icon::before,   .nt-icon::after,
.sheet-tab::before, .sheet-tab::after,
.hex-btn::before,   .hex-btn::after,
.back-btn::before,  .back-btn::after,
.btn::before,       .btn::after,
.btn3d::before,     .btn3d::after,
.la-alert__act::before, .la-alert__act::after {
  clip-path: none;
  border-radius: 0;
}

.la-alert__close { clip-path: none; border-radius: 0; }

/* =========================================================
   Der Schalter – einer für die ganze App
   =========================================================

   Es gab zwei. Der in der Layer-Liste (.lay-switch) war ein Rechteck
   mit rechteckigem Knauf; der aus dem Reader (.rd-check--switch), den
   sich das Sheet, die Bereichs-Einstellungen und der Kalender teilen,
   war eine Kapsel mit border-radius 999px – der runde Schalter, den
   man im E-ink-Schalter der Einstellungen sah.

   Beide stehen jetzt hier und teilen sich dieselben Maße aus
   styles/base.css (--sw-*). Zwei Bauweisen bleiben, weil das Markup
   verschieden ist: der eine ist ein <button> mit aria-checked, der
   andere ein <input type=checkbox> mit einer Fläche daneben. Was man
   sieht, ist ab hier identisch.

   Kein Eckschnitt und kein Sockel: der Schalter ist die eine Form, die
   der Nutzer so haben wollte – schlichte Bahn, schlichter Knauf.

   ACHTUNG Spezifität: reader.css wird NACH dieser Datei geladen und
   trägt für den Zustand `input:checked` dieselbe Spezifität wie ein
   naiver Selektor hier. Deshalb steht unten .rd-check.rd-check--switch
   mit der Klasse doppelt – sonst gewinnt weiter das alte Blatt, und
   die Änderung käme nie auf dem Bildschirm an. */

/* ---------- Bahn ---------- */

.lay-switch,
.rd-check--switch .rd-check__box {
  position: relative;
  flex: none;
  width: var(--sw-w);
  height: var(--sw-h);
  border: 0;
  border-radius: 0;
  clip-path: none;
  box-shadow: none;
  background: var(--g-35);
  transition: background-color var(--dur) var(--ease-out);
}

/* ---------- Knauf ---------- */

.lay-switch::after,
.rd-check--switch .rd-check__box::after {
  content: "";
  position: absolute;
  top: var(--sw-inset);
  inset-inline-start: var(--sw-inset);
  width: var(--sw-knob-w);
  height: var(--sw-knob-h);
  border-radius: 0;
  clip-path: none;
  background: var(--text-faint);
  transition:
    transform var(--dur) var(--ease-spring),
    background-color var(--dur) var(--ease-out);
}

/* ---------- Eingeschaltet ---------- */

.lay-switch.is-on,
.rd-check.rd-check--switch input:checked + .rd-check__box {
  background: color-mix(in srgb, var(--accent-app) 42%, var(--surface-3));
  border-color: transparent;
  box-shadow: none;
}

.lay-switch.is-on::after,
.rd-check.rd-check--switch input:checked + .rd-check__box::after {
  transform: translateX(var(--sw-travel));
  background: var(--accent-app);
}

/* Das Kästchen daneben – dieselbe Sprache, nur quadratisch. Unter 30 px
   und mit einem Haken darin: kein Eckschnitt, nur gerade Ecken. */
.rd-check .rd-check__box { border-radius: 0; }

/* ---------- Was die Prüfung noch gefunden hat --------------------------
   Ein zweiter Durchgang mit weiterer Grenze (jeder Radius, nicht nur der
   volle) hat vier Flächen zutage gefördert, die noch rund waren. Alle
   vier sind Flächen, keine Knöpfe – sie bekommen den Eckschnitt.

   Das Sheet ist bewusst dabei: dass sein unterer Schnitt unter dem
   Bildschirmrand liegt und man nur den oberen sieht, ist kein Grund für
   eine Ausnahme. Die Form gilt oder sie gilt nicht. */

/* Der Sprung zum Inhalt – nur mit der Tastatur sichtbar, aber sichtbar. */
.skip-link { --cut: 8px; border-radius: 0; clip-path: var(--cut-clip); }

/* Das Hinweisbanner (neue Fassung, Speicher voll). */
.la-alert {
  --cut: 12px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  box-shadow: none;
}

/* Das Sheet des Dreipunkt-Knopfes. */
.sheet__panel {
  --cut: 20px;
  border-top: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
}



/* =========================================================
   Formensprache, nachgezogen: die geteilten Bausteine

   Vier Bausteine dieser Datei standen noch auf border-radius,
   und weil sie geteilt sind, standen sie damit in fast jedem
   Modul der App: die Karte selbst, ihr Plus-Knopf, das
   Auswahlfeld und das Datumsfeld.

   Karte, Auswahlfeld und Datumsfeld sind FLÄCHEN – zwei
   geschnittene Ecken. Der Plus-Knopf HANDELT – rechte Winkel,
   Sockel dahinter, sinkt beim Druck ein.

   Alle drei Flächen trugen ihre Kontur auf einem `border`, und
   ein Rand überlebt clip-path nicht: er verschwindet entlang
   beider Diagonalen und lässt farbige Splitter stehen. Die
   Kontur liegt deshalb jetzt als innerer Schatten an. Der wird
   mit der Fläche zusammen geschnitten und folgt der Silhouette,
   statt sie zu ignorieren.
   ========================================================= */

/* Die Karte. Der Akzentstrich oben war ein border-top und sagte
   „dieses Modul"; er sagt es weiterhin, nur als innere Linie, die
   der geschnittenen Ecke folgt statt über sie hinauszulaufen. */
.mnt-card {
  --cut: 12px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  box-shadow: inset 0 2px 0 var(--accent-app);
}

/* ---------- Klappe (.la-fold) -----------------------------------------------
   JEDE „mehr davon"-Klappe der App: unter einem Formular (More, Traffic
   light & micronutrients), unter einer Liste (Ready-made, Archived).
   Eine ganze Zeile zum Antippen – Titel in Textgröße, darunter was in
   ihr liegt, rechts ein eckiger Knopf mit Pfeil in der Bereichsfarbe.
   Ein leises „More ⌄" sah aus wie ein Rest, nicht wie eine Tür.

   Markup:  <details class="la-fold …"><summary class="la-fold__sum">
              <span class="la-fold__text"><span class="la-fold__title">…</span>
              <span class="la-fold__sub">…</span></span>
              <span class="la-fold__icon" aria-hidden="true"></span>
            </summary> … </details>
   --fold-accent wählt die Pfeilfarbe; ohne sie gilt --accent-app. */
.la-fold__sum {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.la-fold__sum::-webkit-details-marker { display: none; }
.la-fold__sum::marker { content: ""; }

.la-fold__text { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; }

.la-fold__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text);
}

.la-fold__sub {
  font-size: 12.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.la-fold__icon {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  --cut: 7px;
  clip-path: var(--cut-clip);
  background: rgba(var(--o), .06);
  transition: background-color var(--dur) var(--ease-out);
}

.la-fold__icon::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid var(--fold-accent, var(--accent-app));
  border-bottom: 2px solid var(--fold-accent, var(--accent-app));
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}

.la-fold__sum:hover .la-fold__icon,
.la-fold__sum:focus-visible .la-fold__icon { background: rgba(var(--o), .12); }

.la-fold__sum:focus-visible { outline: none; }
.la-fold__sum:focus-visible .la-fold__title { color: var(--fold-accent, var(--accent-app)); }

details[open] > .la-fold__sum .la-fold__icon::after {
  transform: translate(-50%, -30%) rotate(-135deg);
}

details[open] > .la-fold__sum {
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(var(--o), .08);
}

@media (prefers-reduced-motion: reduce) {
  .la-fold__icon::after { transition: none; }
}

/* ---------- Schein (.la-shine) ----------------------------------------------
   Die Farbe des Bereichs steigt aus der oberen linken Ecke und ist bei
   70 % verklungen – dieselbe Geste wie die Kacheln in Stats und die
   Now-Karte auf Home. Sie heißt: „das hier ist für dich, jetzt".

   Deshalb sparsam, und nach einer Regel statt nach Geschmack:
     · höchstens EINE Fläche je Bildschirm,
     · nur die, die den nächsten Schritt trägt (Workout von heute,
       Weiterlesen, Weitermeditieren, Schreiben, offene Check-ins,
       „Start here", solange es offen ist),
     · sie geht aus, sobald der Schritt getan ist (Check-in erledigt,
       Workout absolviert) – ein Schein, der immer leuchtet, sagt nichts.
     · im Cue Diary nur auf der Fläche, die das Bemerken startet
       (Today-Karte, Einstieg, Kopf eines Starter-Kits) – dort
       dauerhaft, denn Bemerken ist immer der nächste Schritt, und
       nie als Lohn: kein Schein nach „Let it pass", keiner auf
       Zahlen oder Serien (seit 0.6.0 beta; vorher: nie im Cue Diary).

   Nur background-image: die Fläche behält ihre eigene Farbe darunter,
   in jedem Thema. Die doppelte Klasse schlägt die `background:`-
   Kurzschrift der Module, die später geladen werden. --shine wählt die
   Farbe; ohne sie gilt der Akzent der Umgebung. */
.la-shine.la-shine {
  background-image: linear-gradient(160deg,
    color-mix(in srgb, var(--shine, var(--accent-app)) 12%, transparent) 0%,
    transparent 70%);
}

html[data-eink] .la-shine.la-shine { background-image: none; }

/* Die Kennzahl-Kachel. Sie stand als einzige der geteilten Bausteine
   noch auf einem Radius und fiel dadurch in JEDEM Bereich auf, der
   Zahlen zeigt – Reader, Cue Diary, Meditation. Eine Zahl mit ihrer
   Beschriftung ist Inhalt, kein Bedienelement: zwei geschnittene
   Ecken, kein Sockel.

   Die Kontur lag auf einem `border` und überlebt den Schnitt nicht –
   sie bricht auf beiden Diagonalen ab und lässt Splitter stehen. Als
   innerer Schatten folgt sie der Silhouette. */
.mnt-stat {
  --cut: 10px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  box-shadow: inset 0 0 0 1px var(--line);
}

html[data-eink] .mnt-stat { box-shadow: inset 0 0 0 1px #1c1c1c; }

/* Der Plus-Knopf in der Kartenüberschrift: er legt etwas an, also
   trägt er Tiefe. Vorher schrumpfte er beim Antippen auf 90 %. */
.mnt-add {
  --depth: 2.5px;
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover);
  --btn-lift: var(--tint-lift);
  color: var(--tint-ink);
  filter: var(--tint-glow);

  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.mnt-add::before,
.mnt-add::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.mnt-add::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.mnt-add::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
  box-shadow: inset 0 0 0 1.5px var(--tint-edge);
  transition: background-color var(--dur) var(--ease-out);
}

.mnt-add:hover::before,
.mnt-add:focus-visible::before { opacity: 1; }
.mnt-add:hover { background: none; }
.mnt-add:hover::after { background: var(--btn-face-hover); }
.mnt-add:active { transform: translate(var(--depth), var(--depth)); }
.mnt-add:active::before { opacity: 0; }

/* Auswahlfeld und Datumsfeld sind Eingaben, also Flächen. Ein
   <select> kann keine Pseudoelemente tragen, mit denen sich eine
   Kontur als zweite Lage bauen ließe – der innere Schatten ist hier
   nicht nur bequemer, er ist das Einzige, was geht. */
.fit-select select,
.fit-date {
  --cut: 8px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  box-shadow: inset 0 0 0 1.5px var(--accent-deep);
}

.fit-select select:focus,
.fit-date:focus {
  box-shadow: inset 0 0 0 2px var(--accent-app);
  outline: none;
}

/* Auf Papier ist der Akzent ein Grauton und trüge die Kontur eines
   Eingabefeldes nicht mehr – dort zieht sie Tinte. */
html[data-eink] .fit-select select,
html[data-eink] .fit-date { box-shadow: inset 0 0 0 1.5px #1c1c1c; }
html[data-eink] .fit-select select:focus,
html[data-eink] .fit-date:focus { box-shadow: inset 0 0 0 2.5px #000000; }
html[data-eink] .mnt-card { box-shadow: inset 0 2px 0 #1c1c1c; }
html[data-eink] .mnt-add { --btn-lift: #000000; }

/* ---------- Die zusammenklappbare Karte ---------------------------------
   Der Kopf wird zum <summary> und damit selbst zum Bedienelement. Er ist
   eine Zeile, keine Handlung: Eckschnitt trägt die Karte darum, ein
   Sockel steht ihm nicht zu.

   Die Markierung rechts ist ein Winkel aus zwei Rändern, kein Zeichen aus
   der Schrift – so dreht sie sich beim Aufklappen weich mit, statt von
   einem Glyph auf den anderen zu springen. Rund ist an ihr nichts. */

.mnt-card--acc { padding-bottom: 0; }
.mnt-card--acc[open] { padding-bottom: 16px; }

.mnt-card__head--sum {
  margin-bottom: 0;
  padding: 4px 0 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.mnt-card--acc[open] .mnt-card__head--sum { margin-bottom: 14px; }
.mnt-card__head--sum::-webkit-details-marker { display: none; }
.mnt-card__head--sum::marker { content: ""; }

.mnt-card__mark {
  justify-self: center;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-inline-end: 2px solid var(--text-subtle);
  border-bottom: 2px solid var(--text-subtle);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}

.mnt-card--acc[open] .mnt-card__mark {
  margin-top: 4px;
  transform: rotate(225deg);
}

.mnt-card__head--sum:hover .mnt-card__mark {
  border-color: var(--accent-app);
}

/* Die Aktion der Karte steht unter dem Kopf statt darin – ein Knopf im
   <summary> klappte die Karte beim Anklicken mit zu. */
.mnt-card__acts {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 8px;
}

/* ---------- Formensprache: die Zeilen im Dreipunkt-Menü ------------------
   `.opt-btn` ist trotz des Namens keine Handlung, sondern eine ZEILE –
   so beschreibt es der Kommentar an seiner Definition auch selbst. Also
   Eckschnitt, kein Sockel.

   Der rote Rand der Löschzeile überlebt den Schnitt nicht (er bricht auf
   beiden Diagonalen ab und lässt Splitter stehen). Die Warnung liegt
   deshalb in der Fläche: derselbe Ton, geringe Deckkraft, Schrift in
   voller Stärke – das hält auch den Kontrast über AA.

   Und kein `transform: scale(.98)` beim Druck: eine Zeile, die schrumpft,
   sieht aus wie ein Fehler. Sie wird heller, das genügt. */

.opt-btn {
  --cut: 10px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
}
.opt-btn:active { transform: none; background: var(--g-42); }

/* 26px – unter der Größenschwelle. Ein Schnitt liefe hier durch die
   Marke selbst, und eine Marke von 26px hat dafür keine Fläche übrig. */
.opt-btn__mark { border-radius: 0; }

.opt-btn--danger {
  border: 0;
  background: rgba(var(--t-fitness-stroke), .26);
  box-shadow: inset 0 0 0 1px rgba(var(--t-fitness-stroke), .5);
  color: #ffb3b3;
}

.opt-btn--danger:hover { background: rgba(var(--t-fitness-stroke), .38); }

/* Plus-Knopf im Kopf eines Fensters – die Handlung neben dem Titel
   („Create your own supplement"). Getönt in der Farbe des Bereichs,
   damit er sich vom stillen Zurück-Knopf links abhebt, aber leiser
   als ein gefüllter Hauptknopf: das Fenster dient dem Eintragen. */
button.pop__icon--add {
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover);
  --btn-lift: var(--tint-lift);
  --btn-edge: var(--tint-edge);
  color: var(--tint-ink);
  filter: var(--tint-glow);
}

.pop__glyph {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

html[data-eink] button.pop__icon--add { --btn-face: transparent; color: currentColor; }

/* ---------- Dauer zum Tippen (app/duration.js) -------------------------------
   −15 · m:ss · +15, darunter Abkürzungen. Das Feld ist eine Fläche
   (Eckschnitt), die Knöpfe sind Knöpfe (.btn3d, eckig mit Sockel).
   Die Ziffern in Mono, groß genug, um sie mit einem Blick zu lesen. */

.dur { display: grid; gap: 10px; width: 100%; min-width: 0; }

.dur__field {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: stretch;
  gap: 8px;
}

.dur__step { padding-inline: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.dur__input {
  --cut: 8px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--surface-3);
  color: var(--text-strong);
  font: 600 22px/1.1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
  caret-color: var(--accent-app);
}

.dur__input::placeholder { color: var(--text-subtle); }
.dur__input:focus-visible { outline: none; background: color-mix(in srgb, var(--accent-deep) 14%, var(--surface-3)); }

.dur__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.dur__chip { font-family: var(--font-mono); font-variant-numeric: tabular-nums; padding-inline: 10px; }

.dur__chip.is-on {
  --tone: var(--accent-deep, var(--accent-app));
  --btn-face: color-mix(in srgb, var(--tone) var(--btn-tinted), transparent);
  --btn-face-hover: color-mix(in srgb, var(--tone) var(--btn-tinted-hover), transparent);
  --btn-lift: color-mix(in srgb, var(--tone) var(--btn-tinted-lift), transparent);
  --btn-edge: color-mix(in srgb, var(--tone) var(--btn-tinted-edge), transparent);
  color: var(--accent-app);
  font-weight: 600;
}

html[data-eink] .dur__input { background: #ffffff; color: #000000; box-shadow: inset 0 0 0 2px #000000; clip-path: none; }
html[data-eink] .dur__chip.is-on { --btn-face: #000000; --btn-face-hover: #000000; --btn-edge: #000000; color: #ffffff; }

/* =========================================================
   LA.wheel – eine Farbe frei wählen (app/wheel.js)

   Das Rad ist ein Sechseck, Spitze oben, wie der ⋯-Knopf. Darunter
   der Regler für die Helligkeit, dann Vorschau und Hex-Feld. Die
   Vorschau zeigt die Farbe so, wie eine Karte sie trägt: Fläche mit
   einem Hauch der Farbe, Schrift in der Farbe selbst.
   ========================================================= */

.pop--wheel .pop__body { gap: 16px; }

.wh__stage {
  position: relative;
  width: min(100%, 240px);
  aspect-ratio: 1;
  margin: 2px auto 0;
  filter: drop-shadow(3px 3px 0 var(--btn-quiet-lift));
}

.wh__hex {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.wh__hex:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 4px; }

/* Die Marke: ein Quadrat in der gewählten Farbe, schwarz-weiß gerahmt,
   damit sie auf jedem Ton zu sehen bleibt. */
.wh__mark {
  position: absolute;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: var(--tone);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px rgba(0, 0, 0, .55), 3px 3px 0 3px rgba(0, 0, 0, .35);
  pointer-events: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.wh__row,
.wh__hexfield { display: grid; gap: 8px; }

.wh__label {
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Die Bahn zeigt, was der Regler tut: von der dunkelsten erlaubten
   Fassung des Tons zur hellsten. */
.wh__light {
  width: 100%;
  height: 26px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
}

.wh__light::-webkit-slider-runnable-track {
  height: 10px;
  background: linear-gradient(90deg, var(--lo, #555555), var(--hi, #eeeeee));
}
.wh__light::-moz-range-track {
  height: 10px;
  background: linear-gradient(90deg, var(--lo, #555555), var(--hi, #eeeeee));
}

.wh__light::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 22px;
  margin-top: -6px;
  border: 0;
  border-radius: 0;
  background: var(--text-strong);
  box-shadow: 2px 2px 0 var(--btn-quiet-lift);
}
.wh__light::-moz-range-thumb {
  width: 14px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: var(--text-strong);
  box-shadow: 2px 2px 0 var(--btn-quiet-lift);
}
.wh__light:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 3px; }

.wh__out {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: end;
  gap: 12px;
}

.wh__swatch {
  --cut: 10px;
  display: grid;
  place-items: center;
  height: 64px;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--tone) 14%, var(--surface));
  box-shadow: inset 0 -4px 0 var(--tone);
}

.wh__swatch-text {
  font: 600 20px/1 var(--font-serif);
  color: var(--tone);
}

.wh__input {
  --cut: 8px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  clip-path: var(--cut-clip);
  background: var(--field-bg);
  color: var(--text-strong);
  font: 500 16px/1.2 var(--font-mono);   /* 16 px: iOS zoomt sonst beim Fokus */
  text-transform: lowercase;
}

.wh__input:focus { outline: none; background: color-mix(in srgb, var(--accent-deep) 14%, var(--field-bg)); }
.wh__input.is-bad { box-shadow: inset 0 -2px 0 var(--state-over); }

.wh__note {
  margin: -6px 0 0;
  min-height: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-subtle);
}
.wh__note:empty { display: none; }

.wh__recent { display: grid; gap: 8px; }
.wh__recent-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Ein Feld unter 30 px: kein Eckschnitt, ein Rechteck. */
.wh__chip {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: var(--tone);
  transition: transform var(--dur-fast) var(--ease-out);
}
.wh__chip:hover { transform: translateY(-1px); }
.wh__chip:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

html[data-eink] .wh__stage { filter: none; }
html[data-eink] .wh__swatch { background: #ffffff; box-shadow: inset 0 0 0 2px #000000; clip-path: none; }
html[data-eink] .wh__swatch-text { color: #000000; }
html[data-eink] .wh__input { background: #ffffff; color: #000000; box-shadow: inset 0 0 0 2px #000000; clip-path: none; }
html[data-eink] .wh__light::-webkit-slider-thumb { background: #000000; box-shadow: none; }

/* ---------- Gedrückt halten (LA.hold, app/hold.js) ------------------------------
   Die Zeile hebt sich über den Grund, ihr Menü steht direkt darunter –
   dieselbe Form in jedem Bereich. Das Popup selbst ist dabei keine
   Fläche: es trägt nur die Kopie der Zeile und das Menü, beide mit
   eigenem Schatten. Ohne Zeile (Tastatur, ⋯ ohne Anker) steht das Menü
   mittig wie jedes andere Fenster. */

.modal-layer--hold.modal-layer { display: block; padding: 0; }
.modal-layer--hold .modal-layer__backdrop {
  background: rgba(var(--o-bg2), .55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Ohne Anker: wie jedes Popup in die Mitte. */
.modal-layer--hold .hold-pop:not(.is-anchored):not(.is-placed) {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100% - 32px));
}

.modal-panel.hold-pop {
  position: absolute;
  display: grid;
  gap: 8px;
  max-height: none;
  overflow: visible;
  background: none;
  clip-path: none;
  filter: none;
  animation: none;
}

.hold-pop__lift {
  pointer-events: none;
  filter: drop-shadow(0 14px 28px rgba(var(--o-deep), .55));
  animation: hold-lift 200ms var(--ease-out) both;
}

.hold-pop__lift > * { box-sizing: border-box; }

.hold-pop__menu {
  --cut: 12px;
  display: grid;
  padding: 6px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  filter: drop-shadow(0 16px 36px rgba(var(--o-deep), .6));
  animation: hold-menu 220ms var(--ease-out) both;
}

.hold-pop__head {
  display: grid;
  gap: 1px;
  padding: 8px 10px 9px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.hold-pop__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hold-pop__meta {
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hold-pop__note {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
  text-wrap: pretty;
}

.hold-pop__item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.hold-pop__item:hover,
.hold-pop__item:focus-visible {
  background: rgba(var(--o), .07);
  outline: none;
}

.hold-pop__item:focus-visible { box-shadow: inset 2px 0 0 var(--accent-app); }
.hold-pop__item[disabled] { color: var(--text-disabled); cursor: default; }
.hold-pop__item[disabled]:hover { background: none; }

.hold-pop__icon {
  width: 16px;
  height: 16px;
  background: var(--text-dim);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.hold-pop__icon--flip { transform: rotate(180deg); }

/* Ohne eigenes Symbol: eine kleine Raute in der Farbe des Bereichs. */
.hold-pop__icon:not([style]) {
  width: 7px;
  height: 7px;
  justify-self: center;
  background: var(--accent-app);
  -webkit-mask: none;
          mask: none;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.hold-pop__label { display: grid; gap: 1px; min-width: 0; }
.hold-pop__label small { font-size: max(var(--fs-floor), 11.5px); color: var(--text-dim); }

.hold-pop__item--danger { color: var(--danger); }
.hold-pop__item--danger .hold-pop__icon { background: var(--danger); }

.hold-pop__sep { height: 1px; margin: 4px 10px; background: var(--line); }

@keyframes hold-lift {
  from { transform: scale(.98); }
  to   { transform: scale(1.02); }
}
.hold-pop__lift { transform: scale(1.02); transform-origin: center; }

@keyframes hold-menu {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Der Druck selbst: die Zeile gibt langsam nach, solange gehalten wird.
   `user-select: none` erst ab dem Druck – sonst begänne das Telefon
   nach einer halben Sekunde, Text zu markieren. */
.is-pressing {
  transform: scale(.975);
  transition: transform 450ms var(--ease-out) !important;
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}

/* Ein Tipp, der wartet, bis der Rest der App geladen ist (app/loader.js):
   die Fläche gibt sofort nach und kommt zurück, wenn der Tipp nachgeholt
   wird. Nur Deckkraft – .is-pressing setzt transform, das ließe gedrehte
   Sechsecke und verschobene Knöpfe springen. */
[data-la-held] {
  opacity: .62;
  transition: opacity 120ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .is-pressing { transform: none; }
  .hold-pop__lift, .hold-pop__menu { animation: none; }
  .hold-pop__lift { transform: none; }
}

html[data-eink] .modal-layer--hold .modal-layer__backdrop {
  background: var(--eink-scrim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-eink] .hold-pop__menu {
  background: #ffffff;
  filter: none;
  box-shadow: inset 0 0 0 2px #000000;
  clip-path: none;
}
html[data-eink] .hold-pop__lift { filter: none; }
html[data-eink] .hold-pop__item--danger { text-decoration: underline; }

/* =========================================================
   Das kleine „i" und seine Erklärung (LA.infotip, app/infotip.js)

   Das „i" ist ein Knopf: ein Quadrat mit Sockel, ohne Eckschnitt –
   unter 30 px schnitte der Schnitt ins Zeichen. Solange seine
   Erklärung angeheftet ist, steht es eingedrückt da: man sieht,
   wozu die Erklärung gehört. Die Trefferfläche ist größer als das
   Zeichen (Polster, das der negative Rand wieder aufhebt).
   Die Erklärung ist eine Fläche: Eckschnitt wie jedes Popup, der
   Schatten am äußeren Element – clip-path schnitte ihn sonst ab.
   ========================================================= */

.la-i {
  --depth: 1.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: -6px;
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.la-i__mark {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 15px;
  height: 15px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur) var(--ease-out);
}

/* Sockel und Fläche – ohne clip-path: ein Knopf ist ein Rechteck. */
.la-i__mark::before,
.la-i__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.la-i__mark::before {
  background: var(--btn-quiet-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}
.la-i__mark::after {
  background-image: linear-gradient(var(--btn-quiet), var(--btn-quiet));
  background-color: var(--surface);
}

@media (hover: hover) {
  .la-i:hover .la-i__mark { color: var(--text); }
  .la-i:hover .la-i__mark::after { background-image: linear-gradient(var(--btn-quiet-hover), var(--btn-quiet-hover)); }
}

/* Gedrückt – und angeheftet offen: eingesunken, Sockel weg. */
.la-i:active .la-i__mark,
.la-tip-pinned .la-i__mark { transform: translate(var(--depth), var(--depth)); }
.la-i:active .la-i__mark::before,
.la-tip-pinned .la-i__mark::before { opacity: 0; }

.la-i:focus-visible { outline: none; }
.la-i:focus-visible .la-i__mark { outline: 2px solid var(--accent-app); outline-offset: 2px; }

/* Mit Beschriftung („KG" am Kopf der Sätze): die Schrift des Kopfes. */
.la-i--label .la-i__mark { width: 14px; height: 14px; font-size: 10px; }

/* ---------- Die Erklärung ------------------------------------------------ */

.la-tip {
  --cut: 12px;
  position: fixed;
  /* Über allem, was nur daliegt – Topbar (70), Tableiste, Karls Einladung
     (--z-tour 95): man hat sie gerade selbst aufgerufen. Ein Popup kann sie
     nicht verdecken: wer eines öffnet, tippt daneben, und sie schließt. */
  z-index: calc(var(--z-tour, 95) + 1);
  top: 0;
  left: 0;
  width: min(296px, calc(100vw - 24px));
  /* Knapp nach oben: der Schatten soll die Zeile darüber nicht eintrüben. */
  filter: drop-shadow(0 12px 22px rgba(var(--o-deep), .55));
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.la-tip[data-side="above"] { transform: translateY(4px); }
.la-tip.is-in { opacity: 1; transform: none; }
.la-tip[hidden] { display: none; }
.la-tip:focus { outline: none; }
.la-tip:focus-visible .la-tip__panel { outline: 2px solid var(--accent-app); outline-offset: -2px; }

.la-tip__panel {
  padding: 12px 14px 13px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  color: var(--text);
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.la-tip__eyebrow {
  margin: 0 0 4px;
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.la-tip__head {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text);
}

.la-tip__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  text-wrap: pretty;
}

.la-tip__seg { margin-top: 11px; }

.la-tip__fine {
  margin: 8px 0 0;
  font-size: max(var(--fs-floor), 11.5px);
  line-height: 1.4;
  color: var(--text-dim);
  text-wrap: pretty;
}

html[data-motion="reduce"] .la-tip,
html[data-motion="reduce"] .la-i__mark { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .la-tip, .la-i__mark { transition: none; }
}