/* =========================================================
   Life Archive – Modul-Unterseiten
   ========================================================= */

.module { padding-top: 18px; }

.module__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

/* .back-btn steht in styles/components.css – er ist inzwischen
   derselbe sechseckige Knopf wie .hex-btn. */

/* ---------- Zeile über einem Detail-Bildschirm ---------------------------

   Sechseckiger Zurück-Knopf und der Titel dessen, was gerade offen
   ist – ein Rezept, ein Plan. Das ist keine zweite Leiste: sie
   scrollt mit und steht innerhalb des Inhalts. Die feste Leiste der
   Umgebung bleibt darüber stehen. */

.pg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pg-head__title {
  min-width: 0;
  font-size: clamp(19px, 5.2vw, 22px);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* Kopfbereich mit Hexagon + Titel */
.module__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

.module__titles { min-width: 0; }

.module__title {
  font-size: clamp(25px, 7vw, 31px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
}

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

.module__rule {
  height: 2px;
  margin: 18px 0 24px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 22%, transparent) 68%,
    transparent 100%
  );
}

/* Inhaltsbereich – hier hängt sich jedes Modul ein.

   Die eine Spalte heißt ausdrücklich `minmax(0, 1fr)`. Ohne Angabe
   legt das Raster eine `auto`-Spalte an, und die wächst mit ihrem
   breitesten Inhalt mit: ein langes Wort im Titel eines Termins, eine
   Serie mehr im Band – schon war die Spalte breiter als das Telefon.
   Chrome versteckt das hinter `overflow-x: hidden` am body, Safari auf
   dem iPhone nicht: es macht die Seite so breit wie die Spalte, öffnet
   sie hineingezoomt, und herausgezoomt ist alles winzig. Mit `minmax(0,
   1fr)` ist die Spalte so breit wie der Bildschirm und nie breiter;
   was zu lang ist, kürzen die Zeilen selbst (Ellipse, Umbruch). */
.module__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

/* Hier stand einmal eine zweite, allgemeine Familie: .block,
   .stat-row/.stat, .list/.list__item – gedacht als Bausteine für
   künftige Module. Gebaut hat damit nie jemand: die sieben Module
   nahmen die Karten und Kacheln, die in der Meditation entstanden
   waren (.mnt-card, .mnt-stats, .mnt-list), und die stehen heute
   in styles/components.css.

   Zwei Familien für dieselbe Sache sind eine zu viel – die
   ungenutzte ist raus. LA.ui.stats/list/block in
   app/views/module-base.js gibt es weiter, sie liefern jetzt
   dieselben Klassen wie alle anderen auch. */

.placeholder {
  padding: 22px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(var(--o), .015);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}

.placeholder code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--text);
}

.module__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* 404 */
.notfound {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 80px 0;
  text-align: center;
}

.notfound__code {
  font-size: 56px;
  font-weight: 300;
  letter-spacing: .04em;
}

.notfound__text { color: var(--text-dim); }