/* ============================================================================
   Mock — die Medienflächen der Kachelsektion, als Markup statt als Datei.

   Warum gebaut und nicht gefilmt oder generiert: KI-Video rendert keine
   lesbare Oberfläche (CLAUDE.md, Assets), und eine Bildschirmaufnahme gibt es
   erst, wenn ein Ablauf beim Kunden läuft. Gebautes Markup ist hier das
   einzige Verfahren, das heute funktioniert — es ist scharf in jeder
   Auflösung, in beiden Themes richtig, übersetzbar, und kostet ein paar
   Kilobyte statt einiger Megabyte.

   Die Fläche folgt dem Theme der Seite bewusst *nicht*, aus demselben Grund
   wie das Hero-Dashboard in dash.css: sie stellt einen Bildschirm dar, und
   ein Bildschirm sieht nachts aus wie tags. Die Rollen stehen deshalb lokal
   und nicht in tokens.css — sie gelten nur innerhalb dieser Fläche.
   ========================================================================== */

.mock {
  --m-papier:  #FDFCFA;
  --m-karte:   #FFFFFF;
  --m-ink:     #16202B;
  --m-soft:    #56666E;
  --m-rule:    #E4EAEC;
  --m-chrome:  #F2F6F7;
  --m-ok:      #2FA36B;
  --m-warte:   #E0A02A;
  --m-warteton:#9A6B10;
  --m-wartefeld:#FDF6E7;
  --m-du:      #0E7C86;

  display: flex; flex-direction: column;
  background: var(--m-papier);
  color: var(--m-ink);
  font-family: var(--font-sans);
  font-size: 12px; line-height: 1.4;
  text-align: left;
  overflow: hidden;
}

/* Kopfleiste: Punkt, Name des Ablaufs, rechts der Zustand. */
.mock__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--m-chrome);
  border-bottom: 1px solid var(--m-rule);
  font-size: 11.5px; font-weight: 600;
  flex: none;
}
.mock__bar i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--m-ok);
  flex: none;
}
.mock__bar em {
  margin-left: auto; font-style: normal; font-weight: 500;
  color: var(--m-soft); font-size: 11px;
}

.mock__body {
  flex: 1; min-height: 0;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 7px;
}

/* Fußzeile: was der Ablauf am Ende getan hat. */
.mock__foot {
  flex: none; margin-top: auto;
  padding: 9px 14px;
  border-top: 1px solid var(--m-rule);
  background: var(--m-karte);
  font-size: 11px; color: var(--m-soft);
  display: flex; align-items: center; gap: 7px;
}
.mock__foot b { color: var(--m-ink); font-weight: 600; }

/* ── Zeile einer Liste ─────────────────────────────────────────────────── */
.mock__row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  background: var(--m-karte);
  border: 1px solid var(--m-rule); border-radius: 7px;
  min-width: 0;
}
/* Die eine Zeile, die auf den Menschen wartet — derselbe Warteton wie im
   Hero-Dashboard, damit „wartet auf dich" auf der ganzen Seite eine Farbe hat. */
.mock__row[data-wait] { background: var(--m-wartefeld); border-color: #F0E2BF; }
.mock__t {
  flex: none; font-size: 10.5px; color: var(--m-soft);
  font-variant-numeric: tabular-nums;
}
.mock__what {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mock__chip {
  flex: none; padding: 2px 7px; border-radius: 999px;
  background: var(--m-chrome); color: var(--m-soft);
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
}
.mock__state {
  flex: none; display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: var(--m-ok);
}
.mock__state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mock__state[data-wait] { color: var(--m-warteton); }

/* ── Beleg: Papier links, ausgelesene Felder rechts ────────────────────── */
.mock__read { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; flex: none; }
.mock__doc {
  aspect-ratio: 3 / 4;
  background: var(--m-karte); border: 1px solid var(--m-rule); border-radius: 5px;
  padding: 9px 8px; display: flex; flex-direction: column; gap: 5px;
}
.mock__doc i { display: block; height: 3px; border-radius: 2px; background: var(--m-rule); }
.mock__doc i:nth-child(1) { width: 62%; height: 5px; background: #CBD5D8; }
.mock__doc i:nth-child(4) { width: 78%; }
.mock__doc i:nth-child(6) { width: 45%; }
.mock__doc i:last-child { width: 52%; height: 5px; background: #CBD5D8; margin-top: auto; }

.mock__kv { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mock__kv > div {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
  padding-bottom: 6px; border-bottom: 1px solid var(--m-rule);
}
.mock__kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.mock__kv span { flex: none; width: 74px; font-size: 10.5px; color: var(--m-soft); }
.mock__kv b {
  flex: 1; min-width: 0; font-weight: 600; font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Entwurf mit Freigabe ──────────────────────────────────────────────── */
.mock__draft {
  flex: none;
  background: var(--m-karte); border: 1px solid var(--m-rule); border-radius: 8px;
  padding: 11px 12px; display: flex; flex-direction: column; gap: 8px;
}
.mock__draftK { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--m-soft); }
.mock__btns { display: flex; gap: 7px; margin-top: auto; }
.mock__btn {
  padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;
  background: var(--m-du); color: #fff;
}
.mock__btn--ghost { background: transparent; color: var(--m-soft); box-shadow: inset 0 0 0 1px var(--m-rule); }

/* ── Woche ─────────────────────────────────────────────────────────────── */
.mock__week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; flex: none; }
.mock__day { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mock__day > span {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--m-soft);
  text-transform: uppercase;
}
.mock__slot {
  height: 34px; border-radius: 5px; background: var(--m-chrome);
  display: grid; place-items: center;
  font-size: 9.5px; color: var(--m-soft); font-variant-numeric: tabular-nums;
}
.mock__slot[data-voll] { background: #E6EDEE; color: #7A8A90; }
.mock__slot[data-neu] {
  background: color-mix(in srgb, var(--m-du) 12%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-du) 38%, transparent);
  color: var(--m-du); font-weight: 700;
}

/* ── Chat ──────────────────────────────────────────────────────────────── */
.mock__msg {
  max-width: 82%; padding: 7px 10px; border-radius: 10px;
  font-size: 11.5px; line-height: 1.35;
  background: var(--m-chrome); align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.mock__msg[data-uns] {
  align-self: flex-end; background: color-mix(in srgb, var(--m-du) 11%, #fff);
  border-bottom-left-radius: 10px; border-bottom-right-radius: 3px;
}

/* Auf dem Telefon wird die Fläche breiter als 490px und die Schrift damit
   relativ zu klein. Ein einziger Sprung genügt; feiner abzustufen wäre
   Aufwand für einen Unterschied, den niemand sieht. */
@media (max-width: 900px) {
  .mock { font-size: 13px; }
  .mock__body { padding: 14px 16px; gap: 8px; }
}

/* ── Einlauf ───────────────────────────────────────────────────────────────
   Die Fläche baut sich auf, wenn ihr Panel aktiv wird. Das ersetzt die
   Bewegung, die bei Mercury vom Video kommt — und zwar besser: hier läuft
   nichts in einer Schleife weiter, während man liest. --i staffelt die
   Zeilen, damit die Reihenfolge sichtbar wird, in der der Ablauf arbeitet. */
.mock :is(.mock__row, .mock__kv > div, .mock__msg, .mock__day, .mock__doc, .mock__draftK, .mock__btns) {
  opacity: 0; translate: 0 6px;
}
.panel[data-active] .mock :is(.mock__row, .mock__kv > div, .mock__msg, .mock__day, .mock__doc, .mock__draftK, .mock__btns) {
  animation: mockIn 420ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 140ms);
}
@keyframes mockIn { to { opacity: 1; translate: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mock :is(.mock__row, .mock__kv > div, .mock__msg, .mock__day, .mock__doc, .mock__draftK, .mock__btns) {
    opacity: 1; translate: none;
  }
  .panel[data-active] .mock :is(.mock__row, .mock__kv > div, .mock__msg, .mock__day, .mock__doc, .mock__draftK, .mock__btns) {
    animation: none;
  }
}