/* =========================================================
   Life Archive – Meditation / Mentality

   Die geteilten Bausteine (.mnt-card, .mnt-stats, .mnt-list, die
   Popup-Hülle, .opt-btn) standen bis eben hier und gehören doch
   allen sieben Modulen. Sie stehen jetzt in styles/components.css.
   Hier bleibt, was nur die Meditation braucht: Sechseck und
   Überschrift, die letzte Einheit, Zeitleiste, laufende Session,
   die Editor-Popups und das Atmen.
   ========================================================= */

/* Der dunklere Ton der Meditation.

   Er stand hier als `:root { --accent-deep: #947bef }` – und damit
   auf JEDER Seite. Sichtbar wurde das überall dort, wo kein Modul
   den Wert überschreibt; die Modulseiten selbst tun das (.nu, .fit,
   .cd …), aber Wurzel und Body trugen bis zuletzt das Lila der
   Meditation mit sich herum. Ein Modul hat nichts im :root zu
   suchen.

   Der Haken, an dem es jetzt hängt, kommt aus app/shell.js: die
   Leiste schreibt beim Betreten eines Bereichs
   `document.body.dataset.shell = <modul>`. Das gilt für den
   Startbildschirm, die Atemübungen, die laufende Einheit und die
   Popups darüber – die hängen als .modal-root unter <body>.

   Der Wert kommt aus der Modul-Registry statt als Zahl, wie bei
   jedem anderen Modul auch: --c-meditation-stroke IST #947bef. */
body[data-shell="meditation"] {
  --accent-deep: var(--c-meditation-stroke);
}

/* ---------- Zeitleiste ------------------------------------------------------ */

.mnt-timeline { position: relative; }

.mnt-timeline__marks { position: relative; height: 30px; }
.mnt-timeline--labels .mnt-timeline__marks { height: 48px; }

/* Feste Breite ist Pflicht: bei inset-inline-start:100% ist der verfügbare Platz 0,
   ein Element ohne Breitenangabe kollabiert dort auf 0 – dann fehlt
   ausgerechnet der Schlussgong. */
.mnt-mark {
  position: absolute;
  bottom: 0;
  width: 22px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* Beschriftung schwebt über dem Pfeil und darf seitlich hinausragen. */
.mnt-mark__label {
  position: absolute;
  bottom: calc(100% + 2px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-size: max(var(--fs-floor), 11px);
  white-space: nowrap;
  color: var(--g-18);
}

.mnt-mark__icon { width: 100%; }

.mnt-bar {
  height: 11px;
  border-radius: 999px;
  background: var(--accent-app);
}

.mnt-bar--track { background: var(--g-01); overflow: hidden; }

.mnt-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent-deep);
  transition: width .25s linear;
}

/* ---------- Laufende Session -------------------------------------------------- */

.mnt-player { padding: 16px 14px 20px; }

.mnt-player__times {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  color: var(--g-21);
}

.mnt-player__clock { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--g-01); }

.mnt-player__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}

.mnt-ctrl {
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--accent-app);
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.mnt-ctrl:hover { filter: brightness(1.08); }
.mnt-ctrl:active { transform: scale(.92); }

.mnt-ctrl--sm { width: 36px; height: 36px; }
.mnt-ctrl--sm img { width: 17px; }

.mnt-ctrl--lg { width: 56px; height: 46px; }
.mnt-ctrl--lg img { width: 26px; }

.mnt-edit-btn {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--accent-app);
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.mnt-edit-btn img { width: 17px; }
.mnt-edit-btn:hover { filter: brightness(1.08); }
.mnt-edit-btn:active { transform: scale(.92); }

/* Duration / Time */

.unit-row { display: flex; justify-content: center; gap: 10px; }

.unit {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 32px 9px 12px;
  border-radius: 8px;
  background: var(--field-bg);
  border: 1px solid rgba(var(--o), .10);
}

.unit__input {
  width: 2.4ch;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: end;
  outline: none;
}

.unit__suffix { font-size: 15px; color: var(--g-22); }

.unit__chev {
  position: absolute;
  inset-inline-end: 10px;
  width: 12px;
  pointer-events: none;
  opacity: .85;
}

.unit__select {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  width: 34px;
  opacity: 0;
  cursor: pointer;
}

/* Name */

.name-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--field-bg);
  border: 1px solid rgba(var(--o), .10);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: center;
  outline: none;
}

.name-input:focus { border-color: var(--accent-app); }

.name-count {
  margin-top: 6px;
  font-size: max(var(--fs-floor), 11px);
  text-align: end;
  color: var(--accent-app);
}

/* Gongs / Chantings */

.gong-table {
  padding: 10px 12px 12px;
  border-radius: 10px;
  background: var(--field-bg);
}

.gong-head,
.gong-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 58px 22px;
  align-items: center;
  gap: 6px;
}

.gong-head {
  padding-bottom: 7px;
  border-bottom: 1.5px solid var(--accent-app);
  font-size: 12px;
  color: var(--g-13);
}

.gong-rows {
  display: grid;
  gap: 9px;
  max-height: 148px;
  overflow-y: auto;
  padding-top: 9px;
  scrollbar-width: thin;
}

.gong-row__n { font-size: 13px; font-weight: 600; }

.gong-select {
  min-width: 0;
  padding: 4px 5px;
  border-radius: 6px;
  border: 1px solid rgba(var(--o), .13);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.gong-select--empty { visibility: hidden; }

.gong-time {
  padding: 5px 4px;
  border-radius: 6px;
  border: 1px solid var(--accent-app);
  background: var(--surface);
  color: var(--accent-app);
  font-size: max(var(--fs-floor), 11px);
}

.gong-row__del {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
}

.gong-row__del:hover { background: rgba(var(--o), .08); color: var(--text); }

.gong-empty { font-size: 12.5px; color: var(--text-faint); padding: 8px 0; }

/* Gong, der so nicht erklingen wird */
.gong-row.has-issue .gong-select,
.gong-row.has-issue .gong-time { border-color: #f26c6c; }

.gong-issue {
  margin: -4px 0 2px 36px;
  font-size: max(var(--fs-floor), 11px);
  line-height: 1.4;
  color: #ff9a9a;
}

.gong-add {
  justify-self: center;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--accent-app);
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.gong-add img { width: 22px; }
.gong-add:hover { filter: brightness(1.08); }
.gong-add:active { transform: scale(.92); }

/* =========================================================
   Breathing

   Der Kreis ist die Übung: er wächst beim Einatmen, steht beim
   Halten still, schrumpft beim Ausatmen. Bewegt wird er aus
   app/meditation/breath-run.js Bild für Bild – hier steht nur,
   wie er aussieht, nicht wie er sich bewegt. Deshalb hat
   .brt-orb__ball auch kein `transition`: eine Überblendung
   würde der gerechneten Größe hinterherhinken und genau den
   Takt verwischen, auf den geatmet wird.
   ========================================================= */

/* ---------- Startbildschirm ---------------------------------------------- */

/* Zeile unter der letzten Übung: Muster und Ausgang des Laufs */
.brt-note {
  margin-top: 10px;
  font-size: 12.5px;
  text-align: center;
  color: var(--text-dim);
}

.brt-pattern {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--accent-app);
}

/* Die drei festen Muster. Kacheln statt Zeilen: sie sind zu dritt,
   bleiben zu dritt und dürfen erklären, wofür sie gut sind. */
.brt-presets { display: grid; gap: 10px; }

.brt-preset {
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-inline-start: 2px solid var(--accent-deep);
  border-radius: 10px;
  background: var(--field-bg);
}

.brt-preset__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.brt-preset__name { font-size: 15px; color: var(--g-04); }

.brt-preset__pattern {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--accent-app);
}

.brt-preset__note {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}

.brt-preset__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
}

/* Minuten und Runden sind Angaben, keine Beiwerk-Zeile: --text-faint
   käme auf 3.9:1 und damit unter AA. */
.brt-preset__meta { font-size: 12px; color: var(--text-dim); }

/* Eigene Übungen: dieselbe Zeile wie bei den Meditationen, nur mit
   dem Muster statt der Gongzahl in der Mitte. */
.brt-row-item { grid-template-columns: minmax(0, 1fr) auto auto auto; }

/* ---------- Laufender Bildschirm ------------------------------------------ */

.brt-stage {
  display: grid;
  justify-items: center;
  padding: 20px 0 6px;
}

.brt-orb {
  position: relative;
  width: min(74vw, 290px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

/* Phasenring: liegt außen, füllt sich über genau eine Phase.
   Er beginnt oben und läuft im Uhrzeigersinn – deshalb gedreht. */
.brt-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.brt-ring__track,
.brt-ring__fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}

.brt-ring__track { stroke: rgba(var(--o), .10); }

.brt-ring__fill { stroke: var(--accent-app); }

/* Der atmende Kreis. Die Größe setzt das Skript per transform. */
.brt-orb__ball {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%,
      rgba(var(--t-meditation), .40) 0%,
      rgba(var(--t-meditation-stroke), .26) 55%,
      rgba(var(--t-meditation-stroke), .10) 100%);
  border: 1.5px solid rgba(var(--t-meditation), .55);
  box-shadow: 0 0 42px rgba(var(--t-meditation-stroke), .30);
  will-change: transform;
  transition: opacity var(--dur) var(--ease-out);
}

.brt-orb__text {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  pointer-events: none;
}

.brt-orb__phase {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* „hold" ist der Ruhepunkt – gedämpft, damit die Bewegung führt. */
.brt-orb__phase[data-type="hold"] { color: var(--g-27); }
.brt-orb__phase[data-type="inhale"],
.brt-orb__phase[data-type="exhale"] { color: var(--accent-app); }

.brt-orb__count {
  font-family: var(--font-mono);
  font-size: clamp(40px, 13vw, 54px);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--g-01);
}

.brt-round {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-dim);
}

.brt-round span { color: var(--accent-app); font-weight: 600; }

/* Pause: der Kreis bleibt stehen, die Anzeige tritt zurück. */
#brt-run.is-paused .brt-orb__ball { opacity: .5; }
#brt-run.is-paused .brt-orb__count { color: var(--g-27); }

/* ---------- Popups: Phasen und Schalter ----------------------------------- */

.brt-sum {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--accent-app);
}

.brt-sum--wide { justify-content: space-between; }

.brt-sum__pattern {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
  color: var(--accent-app);
}

.brt-sum__meta { font-size: 12.5px; color: var(--text-dim); }

.brt-head,
.brt-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 62px 46px 22px;
  align-items: center;
  gap: 6px;
}

.brt-head {
  padding-bottom: 7px;
  border-bottom: 1.5px solid var(--accent-app);
  font-size: 12px;
  color: var(--g-13);
}

.brt-rows {
  display: grid;
  gap: 9px;
  max-height: 200px;
  overflow-y: auto;
  padding-top: 9px;
  scrollbar-width: thin;
}

/* Sekundenfeld – dieselbe Machart wie .unit, nur schmaler */
.brt-secs {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid rgba(var(--o), .13);
  background: var(--surface);
}

.brt-secs__input {
  width: 2.2ch;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: end;
  outline: none;
}

.brt-secs:focus-within { border-color: var(--accent-app); }
.brt-secs__unit { font-size: 12px; color: var(--text-dim); }

.brt-move { display: flex; gap: 2px; }

.brt-move__btn {
  width: 22px;
  height: 24px;
  border-radius: 5px;
  color: var(--accent-app);
  font-size: 13px;
  line-height: 1;
  transition: background-color var(--dur) var(--ease-out);
}

.brt-move__btn:hover:not(:disabled) { background: rgba(var(--t-meditation), .16); }
.brt-move__btn:disabled { color: var(--text-dim); opacity: .5; }

.brt-warn {
  font-size: 12px;
  line-height: 1.45;
  color: #ff9a9a;
}

/* Schalter für den Ton beim Phasenwechsel */
.brt-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--btn-quiet);
  text-align: start;
  transition: background-color var(--dur) var(--ease-out);
}

.brt-toggle:hover { background: var(--btn-quiet-hover); }

.brt-toggle__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.brt-toggle__label { font-size: 15px; color: var(--g-04); }
.brt-toggle__hint { font-size: max(var(--fs-floor), 11.5px); color: var(--text-dim); }

.brt-toggle__knob {
  position: relative;
  width: 42px;
  height: 24px;
  flex: none;
  border-radius: 999px;
  background: rgba(var(--o), .14);
  transition: background-color var(--dur) var(--ease-out);
}

.brt-toggle__knob::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--g-16);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.brt-toggle.is-on .brt-toggle__knob { background: rgba(var(--t-meditation), .40); }
.brt-toggle.is-on .brt-toggle__knob::after {
  transform: translateX(18px);
  background: var(--accent-app);
}

/* ---------- Weniger Bewegung ----------------------------------------------
   Der Kreis springt dann je Phase auf seine Größe, statt dahin zu
   wachsen (siehe breath-run.js). Was hier bleibt, ist das Abschalten
   der Überblendungen – sonst käme Bewegung durch die Hintertür
   zurück. */

@media (prefers-reduced-motion: reduce) {
  .brt-orb__ball {
    box-shadow: none;
    transition: none;
  }

  .brt-toggle__knob,
  .brt-toggle__knob::after { transition: none; }
}

/* =========================================================
   TEIL 2 – Die neuen Bausteine der drei Reiter

   Today · Practices · Progress. Was hier steht, gab es vorher
   nicht: der Bereich bestand aus zwei gleich gebauten Listen mit
   je drei Kennzahlen darüber.

   Die Formensprache ist die aus Nutrition, Ton für Ton:

     Flächen  zwei geschnittene Ecken, oben links und unten
              rechts, immer dieselbe Diagonale (--cut-clip).
     Knöpfe   rechte Winkel mit einem Sockel dahinter. Sie
              sinken beim Druck um genau die Sockeltiefe ein.
              KEIN Eckschnitt – ein Rechteck mit geschnittenen
              Ecken ist ein Sechseck, und Sechsecke sind in
              dieser App Flächen, nicht Knöpfe.
     Rund     nichts. Zwei Ausnahmen, beide begründet: der
              zentrale Menü-Knopf (.menu-btn) und der atmende
              Kreis (.brt-orb__ball) – siehe TEIL 3.

   Der Akzent ist der der Meditation und kommt aus dem Token,
   nicht aus einer Zahl: --accent-app ist hier #c7b3ff.
   ========================================================= */

/* ---------- Der gemeinsame Knopf des Bereichs ---------------------------- */

/* Eine Grundlage, wie in Nutrition. Jeder Knopf holt sie sich, setzt
   seine Tiefe und seine beiden Farben – und sonst nichts. */
.mnt-btn,
.mnt-icon,
.mnt-chip,
.mnt-addrow,
.mnt-nudge__act,
.mnt-choice {
  --depth: 2.5px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  --btn-lift: var(--btn-quiet-lift);

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

.mnt-btn::before,     .mnt-btn::after,
.mnt-icon::before,    .mnt-icon::after,
.mnt-chip::before,    .mnt-chip::after,
.mnt-addrow::before,  .mnt-addrow::after,
.mnt-nudge__act::before, .mnt-nudge__act::after,
.mnt-choice::before,  .mnt-choice::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Kein clip-path – siehe die Notiz oben. */
}

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

.mnt-btn::after,
.mnt-icon::after,
.mnt-chip::after,
.mnt-addrow::after,
.mnt-nudge__act::after,
.mnt-choice::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-btn:hover::after,
.mnt-icon:hover::after,
.mnt-chip:hover::after,
.mnt-addrow:hover::after,
.mnt-nudge__act:hover::after,
.mnt-choice:hover::after { background: var(--btn-face-hover); }

.mnt-btn:active,
.mnt-icon:active,
.mnt-chip:active,
.mnt-addrow:active,
.mnt-nudge__act:active,
.mnt-choice:active { transform: translate(var(--depth), var(--depth)); }

.mnt-btn:active::before,
.mnt-icon:active::before,
.mnt-chip:active::before,
.mnt-addrow:active::before,
.mnt-nudge__act:active::before,
.mnt-choice:active::before { opacity: 0; }

/* Night Pond (0.6.0 beta): der Knopf der zweiten Reihe („Again", „See
   all") und der Zeichenknopf (⋯ neben Start) sind getönt wie das „+"
   auf Home (--tint-*, styles/pond.css). --go nimmt es zurück. */
.mnt-btn {
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover);
  --btn-lift: var(--tint-lift);
  --btn-edge: var(--tint-edge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  color: var(--tint-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  filter: var(--tint-glow);
}

.mnt-btn::after,
.mnt-icon::after { box-shadow: inset 0 0 0 1.5px var(--btn-edge, transparent); }

.mnt-btn img { width: 17px; }

/* Der handelnde Knopf: Akzentfläche, dunkler Sockel. Das ist der
   einzige Ton dieser Sättigung auf dem Bildschirm – deshalb zeigt
   der Blick beim Zusammenkneifen der Augen genau dorthin. */
.mnt-btn--go {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);
  --btn-edge: transparent;
  color: var(--on-accent);
  font-weight: 600;
  filter: none;
}

/* Der Glyph auf der Akzentfläche ist dunkel, nicht weiß: #0f1114 auf
   #947bef trägt 6,4:1, weiß nur 3,1:1 und wäre unter AA. */
.mnt-btn--go img { filter: brightness(0) saturate(100%); }

.mnt-btn--wide {
  width: 100%;
  margin-top: 14px;
  padding: 15px 18px;
  font-size: 16px;
}

.mnt-btn--sm {
  --depth: 2px;
  padding: 8px 13px;
  font-size: 12.5px;
}
.mnt-btn--sm img { width: 14px; }

/* Der stille Zeichenknopf – drei Punkte, Stift, Papierkorb. */
.mnt-icon {
  --depth: 2px;

  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
}

.mnt-icon img { width: 17px; opacity: .8; }
.mnt-icon:hover img { opacity: 1; }

/* ---------- Der Segmentschalter ------------------------------------------
   Ein Segment schaltet UM, es handelt nicht. Also Eckschnitt und kein
   Sockel – dieselbe Unterscheidung wie bei .nu-seg in Nutrition. */

.mnt-seg {
  --cut: 9px;
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  padding: 3px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

.mnt-seg__item {
  flex: 1;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-subtle);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out);
}

.mnt-seg__item:hover { background: rgba(var(--o), .05); }

.mnt-seg__item.is-on {
  background: var(--accent-app);
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Practices: eine Übung ---------------------------------------- */

.mnt-practices { display: grid; gap: 10px; }

.mnt-practice {
  --cut: 10px;
  padding: 12px 13px;
  background: var(--field-bg);
  box-shadow: inset 2px 0 0 var(--accent-deep);
  clip-path: var(--cut-clip);
}

.mnt-practice__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mnt-practice__name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--g-04);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mnt-practice__slot { width: 32px; flex: none; }

.mnt-practice__note {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}

.mnt-practice .mnt-timeline { margin-top: 10px; }

.mnt-practice__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

/* Metadaten, nicht Beiwerk: --text-faint käme auf 3,9:1 und damit
   unter AA. */
.mnt-practice__meta {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-dim);
}

/* Die gemerkte Länge einer Atemübung. Sie steht auf der Karte, statt
   vor jedem Start in einem Fenster abgefragt zu werden – ein Fenster
   vor der häufigsten Handlung des Abschnitts, dessen Antwort in neun
   von zehn Fällen dieselbe war wie beim letzten Mal. */
.mnt-chip {
  --depth: 2px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: rgba(var(--t-meditation), .18);

  flex: none;
  padding: 6px 10px;
  color: var(--accent-app);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Progress: der Verlauf ----------------------------------------- */

.mnt-addrow {
  --depth: 2px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: rgba(var(--t-meditation), .14);

  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-bottom: 14px;
  padding: 11px 12px;
  box-shadow: inset 0 0 0 1.5px var(--accent-deep);
  color: var(--accent-app);
  font-size: 13.5px;
  font-weight: 500;
  text-align: start;
}

.mnt-addrow img { width: 16px; }

.mnt-hgroup + .mnt-hgroup { margin-top: 18px; }

.mnt-hgroup__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--accent-deep);
  font-size: max(var(--fs-floor), 11px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.mnt-hgroup__title span {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--accent-app);
}

.mnt-hlist { display: grid; }

.mnt-hrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}

.mnt-hrow:last-child { border-bottom: 0; }
.mnt-hrow:hover { background: rgba(var(--o), .04); }

.mnt-hrow__icon { width: 17px; flex: none; opacity: .7; }
.mnt-hrow__body { flex: 1; min-width: 0; display: grid; gap: 2px; }

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

.mnt-hrow__marks { font-size: max(var(--fs-floor), 11px); color: var(--text-subtle); }

.mnt-hrow__meta { display: grid; justify-items: end; gap: 2px; flex: none; }

.mnt-hrow__time {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--accent-app);
}

.mnt-hrow__when { font-size: max(var(--fs-floor), 11px); color: var(--text-subtle); }

.mnt-card__count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);
}

/* ---------- Popups: Nachtragen, Ziel, Einzelheiten ------------------------ */

.pop--mnt-log { width: min(460px, 100%); }
.pop--mnt-log .pop__body { gap: 16px; }

.mnt-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

.mnt-note--small { font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); }

.mnt-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mnt-field--stack {
  display: grid;
  justify-items: stretch;
  gap: 9px;
}

.mnt-field__label { font-size: 14px; color: var(--text); }

/* Eingaben sind Flächen. Ein <input type="date"> und ein <select>
   können 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 den Eckschnitt überlebt. */
.mnt-date,
.mnt-select select {
  --cut: 8px;
  padding: 9px 11px;
  border: 0;
  border-radius: 0;
  background: var(--field-bg);
  box-shadow: inset 0 0 0 1.5px var(--accent-deep);
  clip-path: var(--cut-clip);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
}

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

.mnt-select { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.mnt-select select { max-width: 100%; }

.mnt-field--stack .unit-row { justify-content: flex-start; }

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

.mnt-choice {
  --depth: 2px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: rgba(var(--t-meditation), .18);

  padding: 11px 6px;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.mnt-choice.is-on {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);
  color: var(--on-accent);
  font-weight: 600;
}

.mnt-facts { display: grid; gap: 1px; }

.mnt-facts__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.mnt-facts__row:last-child { border-bottom: 0; }
.mnt-facts__key { color: var(--text-subtle); }
.mnt-facts__value { color: var(--text); font-variant-numeric: tabular-nums; }

/* Der Hinweis unter der Uhr im laufenden Bildschirm. */
.mnt-player__next {
  margin-top: 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text-subtle);
}

/* =========================================================
   TEIL 3 – Die Formensprache, nachgezogen

   Der Bereich trug fünfunddreißig Stellen, die der Regel
   widersprachen: 33 × border-radius (darunter zweimal 999px
   und einmal 50 %) und neun Druckzustände, die den Knopf
   kleiner skalierten, statt ihn einsinken zu lassen. Er war
   der letzte Bereich der App, in dem noch nichts davon
   nachgezogen war.

   Die Regel, in einem Satz:

     Flächen bekommen zwei geschnittene Ecken – oben links und
     unten rechts, immer dieselbe Diagonale. Knöpfe sind rechte
     Winkel mit einem Sockel dahinter und sinken beim Druck um
     genau die Sockeltiefe ein. Nichts ist rund.

     Unter etwa 30px mit einem Zeichen darin entfällt der
     Schnitt – die Diagonale führe sonst durch das Zeichen. Ein
     Rechteck ist immer noch nicht rund.

   Warum das hier unten steht und nicht oben bei den Regeln
   selbst: gleiche Spezifität, spätere Regel gewinnt. So steht
   die Entscheidung je Baustein an EINER Stelle und ist
   nachlesbar, statt über 700 Zeilen verteilt zu sein. Dieselbe
   Anordnung wie in styles/nutrition.css.

   DIE EINE AUSNAHME steht am Ende dieser Datei und ist
   begründet: der atmende Kreis.
   ========================================================= */

/* ---------- Knöpfe: rechter Winkel, Sockel dahinter ---------------------- */

.mnt-ctrl,
.mnt-done__btn,
.mnt-edit-btn,
.gong-add,
.gong-row__del,
.brt-move__btn {
  --depth: 2.5px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  --btn-lift: var(--btn-quiet-lift);

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

.mnt-ctrl::before,      .mnt-ctrl::after,
.mnt-done__btn::before, .mnt-done__btn::after,
.mnt-edit-btn::before,  .mnt-edit-btn::after,
.gong-add::before,      .gong-add::after,
.gong-row__del::before, .gong-row__del::after,
.brt-move__btn::before, .brt-move__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* KEIN clip-path. Ein Rechteck mit geschnittenen Ecken ist ein
     Sechseck – und Sechsecke sind in dieser App Flächen, nicht
     Knöpfe. Der Schnitt an dieser Stelle wäre genau der Fehler,
     den die ganze Unterscheidung verhindern soll. */
}

.mnt-ctrl::before,
.mnt-done__btn::before,
.mnt-edit-btn::before,
.gong-add::before,
.gong-row__del::before,
.brt-move__btn::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.mnt-ctrl::after,
.mnt-done__btn::after,
.mnt-edit-btn::after,
.gong-add::after,
.gong-row__del::after,
.brt-move__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);
}

.mnt-ctrl:hover::after,
.mnt-done__btn:hover::after,
.mnt-edit-btn:hover::after,
.gong-add:hover::after,
.gong-row__del:hover::after,
.brt-move__btn:hover:not(:disabled)::after { background: var(--btn-face-hover); }

/* Eingedrückt: der Knopf wandert auf den Sockel, der Sockel geht weg.
   Ein Knopf, der beim Druck nicht sichtbar einsinkt, ist ein
   Aufkleber. Vorher schrumpften diese neun auf 92–95 % – eine
   Bewegung, die in keiner Oberfläche der Welt etwas bedeutet. */
.mnt-ctrl:active,
.mnt-done__btn:active,
.mnt-edit-btn:active,
.gong-add:active,
.gong-row__del:active,
.brt-move__btn:active:not(:disabled) { transform: translate(var(--depth), var(--depth)); }

.mnt-ctrl:active::before,
.mnt-done__btn:active::before,
.mnt-edit-btn:active::before,
.gong-add:active::before,
.gong-row__del:active::before,
.brt-move__btn:active:not(:disabled)::before { opacity: 0; }

/* Die drei Knöpfe des laufenden Bildschirms. Sie waren alle drei
   gleich hell – Pause, Ton und Menü in derselben Akzentfläche. Beim
   Zusammenkneifen der Augen zeigte der Bildschirm damit auf nichts.

   Jetzt trägt der mittlere den Akzent und die beiden äußeren die
   Fläche: eine Handlung, zwei Nebenwege. */
.mnt-ctrl--sm {
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
}

.mnt-ctrl--lg {
  --depth: 3px;
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);
  width: 62px;
  height: 50px;
}

/* Dunkler Glyph auf der Akzentfläche: 6,4:1 statt 3,1:1. */
.mnt-ctrl--lg img { filter: brightness(0) saturate(100%); }

.mnt-done__btn {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);
  color: var(--on-accent);
}

.mnt-edit-btn {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);
}
.mnt-edit-btn img { filter: brightness(0) saturate(100%); }

.gong-add {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);
}
.gong-add img { filter: brightness(0) saturate(100%); }

/* 22px – unter der Größenschwelle, und mit einem Kreuz darin. Kein
   Schnitt, kein Sockel wäre falsch: löschen IST eine Handlung. Also
   Sockel, aber flach. */
.gong-row__del {
  --depth: 2px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
}

.brt-move__btn {
  --depth: 2px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: rgba(var(--t-meditation), .16);
}

.brt-move__btn:disabled { transform: none; }
.brt-move__btn:disabled::before { opacity: 0; }

/* ---------- Flächen: zwei geschnittene Ecken ----------------------------- */

/* Die Fortschrittsleiste. Sie war zweimal 999px – die einzigen
   Pillenformen, die der Bereich noch hatte. Eine Leiste, die eine
   Zeit misst, hat keine runden Enden: das linke Ende IST der
   Nullpunkt und liegt genau dort, wo die Kappe anfinge. */
.mnt-bar,
.mnt-bar__fill { border-radius: 0; }

/* Eingabefelder. Kontur als innerer Schatten, nicht als border: ein
   Rand überlebt clip-path nicht – er bricht auf beiden Diagonalen ab
   und lässt farbige Splitter stehen. */
.unit,
.name-input,
.gong-select,
.gong-time,
.brt-secs {
  --cut: 8px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  box-shadow: inset 0 0 0 1.5px rgba(var(--o), .13);
}

.unit:focus-within,
.name-input:focus,
.gong-select:focus,
.brt-secs:focus-within {
  box-shadow: inset 0 0 0 2px var(--accent-app);
  outline: none;
}

.gong-time {
  --cut: 6px;
  box-shadow: inset 0 0 0 1.5px var(--accent-deep);
}

/* Der rote Rand eines fehlerhaften Gongs überlebt den Schnitt nicht.
   Die Warnung liegt deshalb in der Fläche: derselbe Ton, geringe
   Deckkraft, Kontur als innerer Schatten – das hält den Kontrast
   über AA und folgt der Silhouette. */
.gong-row.has-issue .gong-select,
.gong-row.has-issue .gong-time {
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px #f26c6c;
  background: rgba(242, 108, 108, .10);
}

/* Behälter und Kacheln. */
.gong-table,
.brt-preset,
.brt-toggle {
  --cut: 10px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
}

/* Der Akzentstrich des Musters lief als border-left über die
   geschnittene Ecke hinaus. Als innere Linie folgt er ihr. */
.brt-preset { box-shadow: inset 2px 0 0 var(--accent-deep); }

/* Der Schalter. Die Bahn ist eine Fläche, der Knauf ein Quadrat –
   dieselbe Machart wie .lay-switch in components.css. */
.brt-toggle__knob {
  --cut: 6px;
  border-radius: 0;
  clip-path: var(--cut-clip);
}

.brt-toggle__knob::after { border-radius: 0; }

/* ---------- Die eine Ausnahme --------------------------------------------
   Der atmende Kreis bleibt rund, und das ist keine Nachlässigkeit.

   Er ist kein Bedienelement: man drückt ihn nicht, er schaltet
   nichts, er trägt keine Beschriftung. Er ist die Übung selbst –
   ein Atemzug, sichtbar gemacht. Ein Sechseck, das sich aufbläst
   und zusammenzieht, sähe aus wie ein Bauteil mit einem Fehler,
   und der Ring darum müsste dann auf sechs Seiten laufen statt
   auf einer Kreisbahn.

   Die App kennt damit genau zwei runde Dinge, beide begründet und
   beide hier notiert:
     .menu-btn        der zentrale Knopf, als bewusster Gegenpol
     .brt-orb__ball   der Atem, samt seinem Ring

   Sie stehen hier ausdrücklich, damit die nächste Prüfung sie
   nicht für übersehen hält und „aufräumt". */
.brt-orb__ball { border-radius: 50%; }
.brt-ring__track,
.brt-ring__fill { stroke-linecap: round; }

/* Die Zeitleiste als Vorschau, nicht als Fortschritt.

   Auf der Continue-Karte und auf einer Übungskarte zeigt sie, WO die
   Gongs liegen – sie misst nichts. In voller Akzentstärke stand sie
   dort als zweiter Balken direkt über dem Startknopf und stritt mit
   ihm um denselben Blick. Gedämpft und schmaler sagt sie dasselbe
   und tritt zurück. Im laufenden Bildschirm bleibt sie, wie sie war:
   dort misst sie wirklich. */
.mnt-invite .mnt-bar:not(.mnt-bar--track),
.mnt-practice .mnt-bar:not(.mnt-bar--track) {
  height: 6px;
  background: rgba(var(--t-meditation), .22);
}

html[data-eink] .mnt-invite .mnt-bar:not(.mnt-bar--track),
html[data-eink] .mnt-practice .mnt-bar:not(.mnt-bar--track) {
  background: rgba(0, 0, 0, .22);
}

/* ---------- Zwei Fehler, die beim Prüfen des laufenden Bildschirms
              auffielen ----------------------------------------------------

   1. Die Fortschrittsleiste lief verkehrt herum.

   `.mnt-bar--track` stand auf `--g-01`, und --g-01 ist #ffffff. Die
   Bahn war also ein weißer Balken quer über der Karte, und der
   Fortschritt darin lief in --accent-deep (#947bef) – dunkles Lila
   auf Weiß, während die ganze Fläche drumherum dunkel ist. Der
   auffälligste Balken des Bildschirms war damit der LEERE Teil, und
   der gefüllte war der unauffällige. Genau andersherum.

   Jetzt: dunkle Bahn, heller Akzent darin. Die Leiste zeigt wieder
   das, was sie misst, statt das, was noch fehlt.

   2. Die Beschriftung des letzten Gongs wurde abgeschnitten.

   Die Marken sitzen auf Prozent der Breite; die letzte steht bei
   100 %, ihre Beschriftung ist darauf zentriert und ragte damit um
   ihre halbe Breite über die Karte hinaus („35 mir"). Die
   beschriftete Fassung bekommt deshalb seitlich Platz – Marken UND
   Bahn zusammen, sonst stünden die Pfeile nicht mehr über den
   Stellen, die sie meinen. */

.mnt-bar--track { background: rgba(var(--o), .12); }
.mnt-bar__fill { background: var(--accent-app); }

.mnt-timeline--labels { padding-inline: 22px; }

html[data-eink] .mnt-bar--track { background: rgba(0, 0, 0, .14); }
html[data-eink] .mnt-bar__fill { background: #1c1c1c; }

/* ---------- Der Gong-Editor auf einem schmalen Bildschirm ----------------

   Fünf Spalten in einem Popup auf 390 px: #, Klang, Art, Zusatz und
   Papierkorb. Nach Abzug der festen Spalten blieben für Klang und Art
   je 76 px – „Zen Gong" wurde zu „Zen Gon", und die Zusatzspalte der
   letzten Zeile rutschte ganz aus der Karte.

   Es war die dichteste Oberfläche der App im kleinsten Behälter, den
   sie hat. Gestrichen wird davon nichts: die Zeile bekommt eine
   zweite Zeile. Klang steht oben über die volle Breite, Art und
   Zusatz darunter – dieselben fünf Felder, nur gefaltet.

   Angesprochen über die Reihenfolge im Markup (nth-child), weil die
   vier Felder je nach Art verschiedene Elemente sind: mal ein
   <select>, mal ein Knopf, mal ein leerer Platzhalter. */

@media (max-width: 440px) {
  .gong-head { grid-template-columns: 30px minmax(0, 1fr); }
  .gong-head > *:nth-child(3),
  .gong-head > *:nth-child(4),
  .gong-head > *:nth-child(5) { display: none; }

  .gong-row {
    grid-template-columns: 30px minmax(0, 1fr) 70px 22px;
    row-gap: 7px;
  }

  .gong-row > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .gong-row > *:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
  .gong-row > *:nth-child(5) { grid-column: 4; grid-row: 1; }
  .gong-row > *:nth-child(3) { grid-column: 2; grid-row: 2; }
  .gong-row > *:nth-child(4) { grid-column: 3; grid-row: 2; }

  /* Zwei Zeilen je Gong brauchen mehr Höhe, bevor gescrollt wird –
     sonst sieht man anderthalb Gongs. */
  .gong-rows { max-height: 232px; }
}

/* Ein Sockel braucht eine Fläche davor, die ihn verdeckt.

   `.mnt-icon` und `.mnt-addrow` standen auf `--btn-face: transparent`
   – im Dunkeln fiel das kaum auf, weil der Sockel dort ein mittleres
   Grau ist. Auf Papier ist er reines Schwarz, und eine durchsichtige
   Fläche davor machte aus dem Dreipunkt-Knopf ein schwarzes Quadrat.

   Ausserdem sank so nichts ein: beim Druck wandert die Fläche auf den
   Sockel und deckt ihn zu – eine durchsichtige Fläche deckt nichts zu,
   und die Bewegung sah aus wie ein Wackeln statt wie ein Knopf. */
.mnt-icon {
  --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);
}

.mnt-addrow { --btn-face: var(--btn-quiet); }

html[data-eink] .mnt-icon,
html[data-eink] .mnt-addrow,
html[data-eink] .mnt-chip {
  --btn-face: var(--eink-paper);
  --btn-face-hover: #e6e6e4;
  color: #1c1c1c;
}

/* =========================================================
   TEIL 4 – Today, der Lauf und sein Abschluss (0.4 beta)

   Today war ein Stapel gleich dunkler Platten. Jetzt hat es einen
   Ton: die Einladung liegt auf einer Abendfläche (--med-dusk), ihr
   Name steht in der Serifenschrift der App (Newsreader) – sie liest
   sich wie ein Buch, nicht wie ein Formular – und zwischen den
   Blöcken ist doppelt so viel Luft wie in den anderen Bereichen.
   Das ist der eine Bereich, in dem der leere Raum der Inhalt ist.

   Formensprache wie oben: Flächen mit zwei geschnittenen Ecken
   (Einladung, Kacheln, Woche), Knöpfe als Rechteck mit Sockel
   (Start, Minuten, ⋯). Die Sechsecke der Woche und der Ring sind
   Zeichen, keine Knöpfe.
   ========================================================= */

/* minmax(0, 1fr): ohne das wäre die Spalte so breit wie das Regal
   nebeneinander (über 1000 px) – das Telefon zoomte heraus. */
.mnt-today {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-bottom: 12px;
}

.mnt-today .mnt-nudge { margin: 0; }

.mnt-greet {
  margin-bottom: -14px;
  font-size: 13px;
  color: var(--text-subtle);
}

/* ---------- Die Einladung ------------------------------------------------- */

.mnt-invite {
  --cut: 18px;
  padding: 20px 18px 18px;
  background-color: var(--med-dusk);
  box-shadow: inset 0 1.5px 0 var(--accent-app);
  clip-path: var(--cut-clip);
}

.mnt-invite.is-settled {
  background-color: var(--surface);
  box-shadow: inset 0 1.5px 0 var(--line-strong);
}

.mnt-invite.is-swapped { animation: mnt-swap 520ms var(--ease-out); }

@keyframes mnt-swap {
  from { opacity: .4; transform: translateY(6px); }
  to   { opacity: 1;  transform: none; }
}

.mnt-invite__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.mnt-invite__text { flex: 1; min-width: 0; }

.mnt-invite__kicker {
  font-size: max(var(--fs-floor), 11px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-app);
}

.mnt-invite.is-settled .mnt-invite__kicker { color: var(--text-subtle); }

.mnt-invite__name {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--g-01);
  overflow-wrap: anywhere;
}

.mnt-invite__meta {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-subtle);
}

.mnt-invite .mnt-timeline { margin-top: 18px; }

.mnt-invite__acts {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
}

.mnt-invite__acts .mnt-btn--wide { flex: 1; margin-top: 0; }

.mnt-invite__more { width: 52px; height: auto; }

.mnt-invite__again { color: var(--accent-app); }

/* Das Zeichen: das innere Sechseck atmet im Takt von 4-2-4. Unter
   „Reduce motion" bleibt es stehen (globale Regel in base.css). */
.mnt-glyph {
  width: clamp(56px, 17vw, 76px);
  flex: none;
  overflow: visible;
}

.mnt-glyph__outer {
  fill: none;
  stroke: var(--accent-app);
  stroke-width: 3;
  opacity: .7;
}

.mnt-glyph__inner {
  fill: rgba(var(--t-meditation), .24);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.6);
  animation: mnt-breathe 10s ease-in-out infinite;
}

.mnt-invite.is-settled .mnt-glyph__inner { animation: none; transform: scale(.82); }

@keyframes mnt-breathe {
  0%, 100% { transform: scale(.56); }
  40%, 60% { transform: scale(.84); }
}

/* ---------- Abschnitte darunter ------------------------------------------ */

.mnt-block__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 10px;
}

.mnt-label {
  font-size: max(var(--fs-floor), 11.5px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.mnt-block__hint { font-size: 12px; color: var(--text-subtle); }

.mnt-block__link {
  margin-inline-start: auto;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--accent-app);
  text-decoration: none;
}

.mnt-block__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Das Regal ------------------------------------------------------
   Am Telefon ein Streifen zum Wischen, ab 720 px ein Raster – alles
   passt dort nebeneinander (Regel „Seitwärts-Reihen" in CLAUDE.md). */

.mnt-shelf {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 116px;
  gap: 8px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.mnt-shelf::-webkit-scrollbar { display: none; }
.mnt-shelf > li { scroll-snap-align: start; }

@media (min-width: 720px) {
  .mnt-shelf {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    overflow: visible;
  }
}

/* Eine Kachel ist ein Rasterfeld (Fläche), kein Knopf mit Sockel:
   sie wählt aus, sie startet nichts. */
.mnt-tile {
  --cut: 10px;
  display: grid;
  align-content: start;
  gap: 3px;
  width: 100%;
  height: 100%;
  min-height: 100px;
  padding: 12px 12px 11px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: start;
  clip-path: var(--cut-clip);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: background-color var(--dur) var(--ease-out);
}

.mnt-tile:hover { background: var(--surface-2); }

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

/* Gewählt: der Zustand liegt in der Fläche, nicht auf einem Rand –
   ein Rand bräche an den geschnittenen Ecken ab. */
.mnt-tile.is-on { background: rgba(var(--t-meditation), .2); }
.mnt-tile.is-on .mnt-tile__name { color: var(--accent-app); }

.mnt-tile__icon { width: 18px; margin-bottom: 8px; opacity: .8; }

.mnt-tile__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.mnt-tile__meta {
  font-size: 12px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.mnt-tile--new { background: rgba(var(--o), .035); }
.mnt-tile--new .mnt-tile__name { color: var(--accent-app); }

/* ---------- Quick sit ------------------------------------------------------ */

/* Sechs Knöpfe (vier Längen, die zuletzt eigene, Other) passen auf
   390 px in eine Reihe. */
.mnt-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mnt-quick__chip {
  min-width: 46px;
  padding: 11px 10px;
  color: var(--text);
  font-size: 14px;
}

.mnt-quick__set { color: var(--accent-app); }

/* ---------- Die Woche ------------------------------------------------------ */

.mnt-week {
  --cut: 14px;
  padding: 14px 14px 10px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

.mnt-week__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 13px;
  color: var(--text-subtle);
}

.mnt-week__label {
  font-size: max(var(--fs-floor), 11.5px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mnt-week__sum { font-variant-numeric: tabular-nums; }

.mnt-week__sum b {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-app);
}

.mnt-week__gap { flex: 1; }

.mnt-week__streak { font-size: 12.5px; }

.mnt-week__set {
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--accent-app);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mnt-week__bar {
  display: block;
  height: 4px;
  margin-top: 10px;
  background: var(--med-ring-track);
  overflow: hidden;
}

.mnt-week__fill {
  display: block;
  height: 100%;
  background: var(--accent-app);
  transition: width var(--dur) var(--ease-out);
}

.mnt-week__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.mnt-day {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  padding: 6px 0 4px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-subtle);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}

.mnt-day:hover:not(:disabled) { background: rgba(var(--o), .05); }
.mnt-day:disabled { cursor: default; }

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

.mnt-day__hex { width: min(34px, 82%); overflow: visible; }

.mnt-day__shape {
  fill: var(--field-bg);
  stroke: var(--line-strong);
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill var(--dur) var(--ease-out);
}

.mnt-day.is-done .mnt-day__shape { fill: var(--accent-app); stroke: var(--accent-app); }
.mnt-day.is-today .mnt-day__shape { stroke: var(--accent-app); stroke-width: 7; }
.mnt-day.is-future .mnt-day__shape { opacity: .45; }

.mnt-day__letter { font-size: max(var(--fs-floor), 11px); font-weight: 600; }
.mnt-day.is-today .mnt-day__letter { color: var(--accent-app); }

/* Der Abschluss: das Feld von heute wächst einmal hinein. */
.mnt-day.is-fresh .mnt-day__shape { animation: mnt-fill 900ms 350ms var(--ease-spring) both; }

@keyframes mnt-fill {
  from { fill: var(--field-bg); transform: scale(.5); }
  to   { fill: var(--accent-app); transform: none; }
}

/* Was an einem Tag lief (Fenster). */
.mnt-dayruns { display: grid; margin: 0; padding: 0; list-style: none; }

.mnt-dayruns__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.mnt-dayruns__icon { width: 16px; flex: none; opacity: .75; }

.mnt-dayruns__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mnt-dayruns__meta {
  font-size: 12.5px;
  color: var(--text-subtle);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mnt-dayacts { display: flex; gap: 10px; margin-top: 16px; }
.mnt-dayacts .mnt-btn { flex: 1; }

/* ---------- Practices: die Karte wählt aus ------------------------------- */

.mnt-practice { position: relative; }

.mnt-practice__pick {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}

.mnt-practice__pick:hover { background: rgba(var(--t-meditation), .06); }

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

.mnt-practice__top,
.mnt-practice__note,
.mnt-practice__foot {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.mnt-practice__top button,
.mnt-practice__foot button { pointer-events: auto; }

.mnt-practice__start { color: var(--accent-app); }

.mnt-card .mnt-addrow { margin: 12px 0 0; }

/* ---------- Der Lauf --------------------------------------------------------- */

.mnt-run {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 18px 0 12px;
}

.mnt-run__name {
  font-family: var(--font-serif);
  font-size: clamp(22px, 6.4vw, 30px);
  line-height: 1.15;
  color: var(--g-04);
  text-align: center;
  overflow-wrap: anywhere;
}

.mnt-run__clock {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.mnt-run__left {
  font-family: var(--font-mono);
  font-size: clamp(34px, 10vw, 46px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--g-01);
  font-variant-numeric: tabular-nums;
}

.mnt-run__of { font-size: 13px; color: var(--text-subtle); }

/* Der Weg: senkrechte Linie, links die abgelaufene Zeit am Punkt,
   rechts je Gong „Uhrzeit Name". --rail ist die Stelle der Linie. */
.mnt-path {
  --rail: 32%;
  position: relative;
  justify-self: stretch;
  width: min(100%, 360px);
  margin: 18px auto 14px;
  height: clamp(220px, 42vh, 440px);
}

.mnt-path__track {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: var(--rail);
  width: 2px;
  margin-inline-start: -1px;
  background: var(--med-ring-track);
}

.mnt-path__fill {
  display: block;
  width: 100%;
  height: 0;
  background: var(--med-ring);
  transition: height 260ms linear;
}

/* Der Punkt, an dem man gerade ist: ein Querstrich, kein Kreis. */
.mnt-path__now {
  position: absolute;
  top: 0;
  inset-inline-start: var(--rail);
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: var(--med-ring);
  transition: top 260ms linear;
}

.mnt-path__elapsed {
  position: absolute;
  inset-inline-end: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--med-ring);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mnt-path__gong {
  position: absolute;
  inset-inline-start: var(--rail);
  width: 16px;
  height: 18.5px;
  transform: translate(-50%, -50%);
  transition: width var(--dur) var(--ease-out), height var(--dur) var(--ease-out);
}

.mnt-path__gong.is-next { width: 20px; height: 23.1px; }

.mnt-path__hex { display: block; width: 100%; height: 100%; overflow: visible; }

.mnt-path__hex polygon {
  fill: var(--bg);
  stroke: var(--med-ring);
  stroke-width: 1.4;
  stroke-linejoin: miter;
  transition: fill var(--dur) var(--ease-out);
}

.mnt-path__gong.is-past polygon { fill: var(--med-ring); }

.mnt-path__label {
  position: absolute;
  inset-inline-start: calc(var(--rail) + 20px);
  inset-inline-end: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  transform: translateY(-50%);
  font-size: 13.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mnt-path__time {
  flex: none;
  min-width: 5ch;
  text-align: end;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.mnt-path__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-subtle);
}

.mnt-path__label.is-past .mnt-path__time,
.mnt-path__label.is-past .mnt-path__name { color: var(--text-subtle); }
.mnt-path__label.is-past .mnt-path__time { font-weight: 500; }

.mnt-path__label.is-next .mnt-path__time { color: var(--med-ring); }
.mnt-path__label.is-next .mnt-path__name { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .mnt-path__fill, .mnt-path__now, .mnt-path__gong { transition: none; }
}

.mnt-run .mnt-player__next { margin-top: 2px; font-size: 13px; min-height: 1.4em; }
.mnt-run .mnt-player__controls { margin-top: 8px; }

/* Die Uhr der Atemübung: lesbar, nicht 15 px. */
.mnt-player__clock { font-size: 20px; }

/* ---------- Die Leisten treten zurück ---------------------------------------
   Nur solange die Uhr läuft (session-ui.js). Jede Berührung holt sie
   für vier Sekunden zurück; Tastaturfokus darin ebenfalls. */

body.mnt-focus .sh-top,
body.mnt-focus .sh-tabs {
  opacity: .28;
  transition: opacity 900ms var(--ease-out);
}

body.mnt-focus.mnt-focus--awake .sh-top,
body.mnt-focus.mnt-focus--awake .sh-tabs,
body.mnt-focus .sh-top:focus-within,
body.mnt-focus .sh-tabs:focus-within,
body.mnt-focus .sh-top:hover,
body.mnt-focus .sh-tabs:hover {
  opacity: 1;
  transition-duration: 200ms;
}

/* ---------- Verlassen während der Uhr läuft (13.10.2026) ----------------------
   Die Frage (session-ui.js leave): oben, was gesessen ist und was noch
   bleibt, darunter Continue in background · End and save · Discard…
   Genau EINE Akzentfläche; der Auslöser der Zerstörung ist leise, laut
   wird erst die Rückfrage. */

.mnt-leave { display: grid; gap: 10px; }
.mnt-leave .mnt-btn--wide { margin-top: 0; }

.mnt-leave__sum {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
  margin: 2px 0 6px;
}
.mnt-leave__sum div { display: grid; justify-items: center; gap: 2px; min-width: 64px; }
.mnt-leave__sum b {
  font: 500 22px/1.1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--text-strong);
}
.mnt-leave__sum span { font-size: 12px; color: var(--text-subtle); }

.mnt-leave__discard {
  justify-self: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--danger);
  transition: background-color var(--dur) var(--ease-out);
}
.mnt-leave__discard:hover { background: rgba(var(--t-fitness-stroke), .12); }
.mnt-leave__discard:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

.mnt-leave__really { justify-content: center; font-size: 16px; }

/* Der Streifen über der Tableiste, solange eine Sitzung im Hintergrund
   läuft: die Form des Workout-Streifens (.fit-chip, styles/fitness.css),
   die Farbe der Meditation. Angehalten tritt die Uhr zurück – der
   Hinweis sagt es zusätzlich in Worten. */
.fit-chip.mnt-chip-bar { border-color: var(--c-meditation-stroke); }
.mnt-chip-bar .fit-chip__clock { color: var(--c-meditation); }
.mnt-chip-bar.is-held .fit-chip__clock { color: var(--text-dim); }
.mnt-chip-bar .fit-chip__pause:hover { background: none; }

/* ---------- Der Abschluss ---------------------------------------------------- */

.mnt-close {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 0 12px;
  text-align: center;
}

.mnt-close__glyph .hex {
  --hex-w: clamp(92px, 26vw, 116px);
  --hex-color: var(--accent-app);
  --hex-stroke: var(--accent-deep, var(--accent-app));
  animation: mnt-close-in 560ms var(--ease-spring) both;
}

@keyframes mnt-close-in {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: none; }
}

.mnt-close__kicker {
  margin-top: 14px;
  font-size: max(var(--fs-floor), 11px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-app);
}

.mnt-close__name {
  font-family: var(--font-serif);
  font-size: clamp(26px, 7.4vw, 32px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--g-01);
  overflow-wrap: anywhere;
}

.mnt-close__time { font-size: 14px; color: var(--text-subtle); }

.mnt-close .mnt-week {
  width: 100%;
  margin-top: 18px;
  text-align: start;
}

.mnt-feel {
  --cut: 14px;
  width: 100%;
  margin-top: 10px;
  padding: 16px 14px 14px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

.mnt-feel__q { font-size: 14px; color: var(--g-04); }

.mnt-feel__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.mnt-feel__opt { padding: 10px 14px; }

/* Gewählt, aber nicht laut: Done bleibt die einzige volle Akzentfläche. */
.mnt-feel__opt.is-on {
  --btn-face: rgba(var(--t-meditation), .26);
  --btn-face-hover: rgba(var(--t-meditation), .32);
  --btn-lift: var(--btn-quiet-lift);
  color: var(--accent-app);
}

.mnt-feel__hint { margin-top: 10px; font-size: 12px; color: var(--text-subtle); }

.mnt-close > .mnt-btn--wide { margin-top: 16px; }