/* ==========================================================================
   Seite „Chronik“ · Modul-Code CHR · id „chronicle“ · Route #chronik
   Skript: public/js/pages/chronicle.js

   Links das Protokoll wie A's Stream-Chronik (Uhrzeit in Mono, Text, Art
   und Herkunft darunter; Tage als stehende Köpfe in einem eigenen
   Scrollfenster), rechts die Zeitkapseln: die nächste groß mit laufender
   Restzeit (A's Kapsel-Karte), die übrigen als Liste. Nur Tokens.
   ========================================================================== */

/* ---------- Einträge --------------------------------------------------------- */

.page-chronicle .chr-scroll {
  max-height: clamp(420px, calc(100dvh - 260px), 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.page-chronicle .chr-scroll:focus-visible { outline-offset: -2px; }

.page-chronicle .chr-log .log__entry {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 10px 14px;
}
.page-chronicle .chr-log .log__time { padding-top: 1px; }
.page-chronicle .chr-log .log__text { font: var(--t-body-l); color: var(--ink); }
.page-chronicle .chr-log .log__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 6px;
}
.page-chronicle .chr-log .log__meta .tag { font-size: 10px; padding: 2px 5px; }

/* ---------- Zeitkapseln ---------------------------------------------------------- */

/* Nächste Kapsel: A's .caps – Wanne in Monitor-Schwarz, Restzeit groß in Mono */
.page-chronicle .chr-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px 16px;
  margin: 14px;
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  background: var(--void);
}
.page-chronicle .chr-next__by { display: flex; align-items: center; gap: 8px; min-width: 0; }
.page-chronicle .chr-next__by .icon { width: 14px; height: 14px; color: var(--pgm-ink); }
.page-chronicle .chr-next__t {
  font: 500 22px/1 var(--f-mono);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1, "tnum" 1;
  text-align: right;
  white-space: nowrap;
}
.page-chronicle .chr-next__q {
  grid-column: 1 / -1;
  margin-top: 6px;
  font: var(--t-body-l);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.page-chronicle .chr-next__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 2px;
  font: 400 11.5px/1.4 var(--f-mono);
  color: var(--ink-3);
}
.page-chronicle .chr-next__meta b { font-weight: 500; color: var(--ink-2); }

.page-chronicle .chr-caps { border-top: 1px solid var(--line); }
.page-chronicle .chr-caps .list__row { grid-template-columns: 52px minmax(0, 1fr) auto; }
.page-chronicle .chr-caps .list__n { font-feature-settings: "zero" 1, "tnum" 1; color: var(--ink-2); }
.page-chronicle .chr-chan { color: var(--ink-3); }

/* ---------- Schmal ---------------------------------------------------------------------- */

@media (max-width: 1180px) {
  /* Einspaltig: kein eigenes Scrollfenster, die Seite scrollt */
  .page-chronicle .chr-scroll { max-height: none; overflow: visible; }
  .page-chronicle .chr-log .log__day { top: var(--bridge-h); }
  /* Offene Zeitkapseln laufen ab – einspaltig stehen sie vor dem Protokoll */
  .page-chronicle .chr-side { display: contents; }
  .page-chronicle .chr-capsules.has-caps { order: -1; }
  .page-chronicle .chr-entries { order: 0; }
  .page-chronicle .chr-side > :not(.chr-capsules) { order: 1; }
}

@media (max-width: 560px) {
  .page-chronicle .chr-entries .pnl__actions { width: 100%; margin-left: 0; }
  .page-chronicle .chr-entries .pnl__actions .search { flex: 1 1 160px; }
  .page-chronicle .chr-log .log__entry { grid-template-columns: 60px minmax(0, 1fr); gap: 4px 10px; }
  .page-chronicle .chr-next { margin: 12px; }
  .page-chronicle .chr-next__t { font-size: 20px; }
}