/* Mission Control — Styles (W1-W3, eigener Mission-Worker)
   Tokens uebernommen aus leger-design/tokens/tokens.css (Dark-Theme-Variante,
   Kommandozentrale-Look ist hier Default — kein Light-Toggle).
   Mint NUR als Signal/Akzent (running/ok), Violett fuer Struktur/Marke — nie mischen.
   Fonts self-hosted (gleiche Origin, /fonts/*) — keine CDN-Loads. */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-variable.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ── Surface & Text (Dark) ── */
  --background:        220 20% 6%;      /* #0C0E12 */
  --foreground:         0 0% 95%;       /* #F2F2F2 */
  --card:               220 20% 9%;     /* #12151C */
  --card-foreground:    0 0% 95%;
  --subtle:             220 16% 14%;    /* #1E2229 */
  --subtle-foreground:  220 10% 60%;    /* #8F96A3 */

  /* ── Markenfarben ── */
  --purple:             277 55% 62%;
  --purple-soft:        277 40% 16%;
  --purple-deep:        277 50% 26%;
  --purple-foreground:  0 0% 100%;

  --mint:               166 90% 42%;
  --mint-soft:          166 60% 14%;
  --mint-glow:          161 100% 48%;
  --mint-deep:          166 100% 23%;
  --mint-foreground:    0 0% 100%;

  /* ── Semantik ── */
  --success:            152 55% 52%;
  --success-soft:       152 40% 14%;
  --warning:            38 85% 58%;
  --warning-soft:       38 50% 16%;
  --danger:              0 72% 58%;
  --danger-soft:         0 40% 18%;
  --info:               210 85% 60%;
  --info-soft:          210 50% 16%;

  --status-standby:     220 10% 50%;

  --border:             220 16% 16%;    /* #22272F */
  --border-strong:      220 16% 24%;
  --ring:               var(--purple);
  --muted:              var(--subtle);
  --muted-foreground:   var(--subtle-foreground);

  /* ── Typografie ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-2xs: 11px;
  --t-xs:  12px;
  --t-sm:  14px;
  --t-base:16px;
  --t-md:  18px;
  --t-lg:  20px;
  --t-xl:  24px;
  --t-2xl: 30px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-normal:1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ── Spacing (4px-Grid) ── */
  --s-0-5: 2px;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;

  /* ── Radius ── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.24), 0 2px 4px hsl(0 0% 0% / 0.18);
  --shadow-md: 0 4px 12px hsl(0 0% 0% / 0.30), 0 12px 24px hsl(0 0% 0% / 0.22);
  --shadow-lg: 0 12px 24px hsl(0 0% 0% / 0.36), 0 24px 48px hsl(0 0% 0% / 0.28);
  --shadow-focus-mint:   0 0 0 3px hsl(var(--mint) / 0.35);
  --shadow-focus-purple: 0 0 0 3px hsl(var(--purple) / 0.35);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-io:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-normal: 220ms;

  /* ── Touch ── */
  --tap-min: 44px;
}

/* ── Base reset ── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; font-size: var(--t-sm); color: inherit; }
h1, h2, h3, dl, dd { margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: none; box-shadow: var(--shadow-focus-mint); border-radius: var(--r-sm); }

/* [hidden] muss IMMER gewinnen — sonst hebeln Komponenten mit eigenem
   "display: flex/grid" (z.B. .mc-main, .mc-login) das Attribut aus, weil
   Autoren-CSS die UA-Default-Regel "[hidden]{display:none}" bei gleicher
   Spezifitaet ueberstimmt. War die Ursache fuer "Login + Board gleichzeitig
   sichtbar". Root eines exklusiven Auth-Gates, nicht nur Kosmetik. */
[hidden] { display: none !important; }

/* ── Shell ── */
.mc-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.mc-brandbar {
  height: 3px;
  background: linear-gradient(90deg, hsl(var(--purple)), hsl(var(--mint)));
  flex: 0 0 auto;
}

/* ── Board-Root (Header+Banner+Main+Detail, gemeinsam gegated) ── */
.mc-board-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* ── Header ── */
.mc-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid hsl(var(--border) / 0.7);
  background: hsl(var(--card));
}
.mc-header__brand { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.mc-wordmark {
  font-size: var(--t-base);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: hsl(var(--purple));
  white-space: nowrap;
}
.mc-header__title {
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  color: hsl(var(--subtle-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-header__status { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }

.mc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  border: 1px solid hsl(var(--border-strong) / 0.7);
  min-height: 28px;
  white-space: nowrap;
}
.mc-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--status-standby)); flex: 0 0 auto; }
.mc-pill--offline { color: hsl(var(--subtle-foreground)); }
.mc-pill--online { color: hsl(var(--mint)); border-color: hsl(var(--mint) / 0.4); background: hsl(var(--mint-soft)); }
.mc-pill--online .mc-pill__dot { background: hsl(var(--mint)); box-shadow: 0 0 0 3px hsl(var(--mint) / 0.25); }
/* Live-Pill pulsiert bei WS-connected — Bridge-Pill bleibt statisch (kein Signal-Charakter). */
#ws-pill.mc-pill--online .mc-pill__dot { animation: mc-pulse 1.6s var(--ease-io) infinite; }

.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid hsl(var(--border-strong) / 0.7);
  background: hsl(var(--subtle));
  color: hsl(var(--foreground));
  cursor: pointer;
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-fast) var(--ease-io), border-color var(--dur-fast) var(--ease-io);
}
.mc-btn:hover { background: hsl(var(--border)); }
.mc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mc-btn--ghost { background: transparent; border-color: transparent; }
.mc-btn--ghost:hover { background: hsl(var(--subtle)); }
.mc-btn--icon { min-width: 38px; padding: 0; }
.mc-btn--primary {
  background: hsl(var(--mint));
  border-color: hsl(var(--mint));
  color: hsl(var(--mint-foreground));
}
.mc-btn--primary:hover { background: hsl(var(--mint-glow)); border-color: hsl(var(--mint-glow)); }
.mc-btn--sm { min-height: 32px; padding: 0 var(--s-2); font-size: var(--t-xs); }

/* ── Login-Gate ── */
.mc-login {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}
.mc-login__card {
  width: min(380px, 100%);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5);
  box-shadow: var(--shadow-lg);
}
.mc-login__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  text-align: center;
  margin-bottom: var(--s-6);
}
.mc-login__wordmark {
  font-size: var(--t-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  color: hsl(var(--purple));
  line-height: var(--lh-tight);
}
.mc-login__product {
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  color: hsl(var(--subtle-foreground));
}
.mc-login__form { display: flex; flex-direction: column; gap: var(--s-4); }
.mc-field { display: flex; flex-direction: column; gap: var(--s-1); }
.mc-field__label { font-size: var(--t-xs); font-weight: var(--fw-medium); color: hsl(var(--subtle-foreground)); }
.mc-field input {
  min-height: var(--tap-min);
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid hsl(var(--border-strong));
  background: hsl(var(--subtle));
  color: hsl(var(--foreground));
  font-size: var(--t-base);
}
.mc-field input:focus-visible { box-shadow: var(--shadow-focus-mint); border-color: hsl(var(--mint)); }
.mc-login__submit { width: 100%; margin-top: var(--s-1); }
.mc-login__error { color: hsl(var(--danger)); font-size: var(--t-xs); margin: 0; text-align: center; }

/* ── Banner ── */
.mc-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: hsl(var(--warning-soft));
  color: hsl(var(--warning));
  border-bottom: 1px solid hsl(var(--warning) / 0.35);
  font-size: var(--t-sm);
  text-align: center;
}
.mc-banner__link {
  color: hsl(var(--purple));
  font-weight: var(--fw-semi);
  text-decoration: underline;
}

/* ── Toast ── */
.mc-toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-6);
  transform: translate(-50%, 8px);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border-strong));
  color: hsl(var(--foreground));
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--t-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease-io), transform var(--dur-normal) var(--ease-io);
  z-index: 60;
  max-width: 90vw;
}
.mc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ── Main / Empty ── */
.mc-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) var(--s-4); overflow-y: auto; }
.mc-empty {
  padding: var(--s-2) var(--s-1);
  color: hsl(var(--subtle-foreground));
  font-size: var(--t-xs);
}

/* ── Intake-Bar ── */
.mc-intake {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: var(--r-lg);
  padding: var(--s-3);
}
.mc-intake__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: stretch;
}
.mc-intake__row input[type="text"],
.mc-intake__row select {
  min-height: var(--tap-min);
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid hsl(var(--border-strong));
  background: hsl(var(--subtle));
  color: hsl(var(--foreground));
  font-size: var(--t-base);
}
.mc-intake__title { flex: 1 1 220px; }
.mc-intake__bereich, .mc-intake__prio { flex: 0 1 160px; }
.mc-intake details { margin-top: var(--s-1); }
.mc-intake summary {
  cursor: pointer;
  color: hsl(var(--subtle-foreground));
  font-size: var(--t-xs);
  padding: var(--s-1) 0;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.mc-intake textarea {
  width: 100%;
  min-height: 72px;
  margin-top: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid hsl(var(--border-strong));
  background: hsl(var(--subtle));
  color: hsl(var(--foreground));
  resize: vertical;
  font-size: var(--t-base);
}

/* ── Tabs (Segmented-Control) ── */
.mc-tabs {
  display: inline-flex;
  width: fit-content;
  gap: 2px;
  padding: 3px;
  background: hsl(var(--subtle));
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: var(--r-md);
}
.mc-tab {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--s-4);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: hsl(var(--subtle-foreground));
  font-weight: var(--fw-medium);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io);
}
.mc-tab:hover { color: hsl(var(--foreground)); }
.mc-tab.is-active {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-sm), inset 0 -2px 0 hsl(var(--purple));
}

/* ── Board / Quadranten ── */
.mc-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.mc-quadrant {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 160px;
}
.mc-quadrant[data-q="hot"] { border-color: hsl(var(--danger) / 0.4); }
.mc-quadrant__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.mc-quadrant__head h2 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--subtle-foreground));
  font-weight: var(--fw-semi);
}
.mc-quadrant__count {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: var(--fw-medium);
  color: hsl(var(--subtle-foreground));
  background: hsl(var(--subtle));
  border: 1px solid hsl(var(--border-strong) / 0.7);
  border-radius: var(--r-pill);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.mc-quadrant__cards { display: flex; flex-direction: column; gap: var(--s-2); }

/* ── Karte ── */
.mc-card {
  background: hsl(var(--subtle));
  border: 1px solid hsl(var(--border-strong) / 0.7);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  transition: border-color var(--dur-fast) var(--ease-io), transform var(--dur-fast) var(--ease-io), box-shadow var(--dur-fast) var(--ease-io);
}
.mc-card:hover { border-color: hsl(var(--purple) / 0.5); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.mc-card.is-optimistic { border-style: dashed; opacity: 0.7; }
.mc-card__row { display: flex; align-items: center; gap: var(--s-2); }
.mc-card__title {
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-card__badges { display: flex; flex-wrap: nowrap; gap: var(--s-1); flex: 0 0 auto; }
.mc-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-1); }
.mc-card__saving { font-size: var(--t-2xs); color: hsl(var(--subtle-foreground)); }

/* ── Status-Punkt ── */
.mc-status-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: hsl(var(--status-standby)); }
.mc-status-dot.is-backlog { background: hsl(var(--border-strong)); }
.mc-status-dot.is-waiting { background: hsl(var(--warning)); }
.mc-status-dot.is-done { background: hsl(var(--success)); }
.mc-status-dot.is-dropped { background: hsl(var(--danger) / 0.6); }
.mc-status-dot.is-running {
  background: hsl(var(--mint));
  animation: mc-pulse 1.6s var(--ease-io) infinite;
}
@keyframes mc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 hsl(var(--mint) / 0.55); }
  50%      { box-shadow: 0 0 0 6px hsl(var(--mint) / 0); }
}

/* ── Badges ── */
.mc-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--t-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mc-badge--bereich { background: hsl(var(--purple-soft)); color: hsl(var(--purple)); }
.mc-badge--prio { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.mc-badge--p0 { background: hsl(var(--danger-soft)); color: hsl(var(--danger)); }
.mc-badge--p1 { background: hsl(var(--warning-soft)); color: hsl(var(--warning)); }
.mc-badge--p2 { background: hsl(var(--info-soft)); color: hsl(var(--info)); }
.mc-badge--p3 { background: hsl(var(--subtle)); color: hsl(var(--subtle-foreground)); border: 1px solid hsl(var(--border-strong) / 0.7); }
.mc-badge--dead { background: hsl(var(--danger-soft)); color: hsl(var(--danger)); }

/* ── Dringlichkeits-Stepper ── */
.mc-stepper { display: inline-flex; border: 1px solid hsl(var(--border-strong) / 0.7); border-radius: var(--r-md); overflow: hidden; }
.mc-stepper__btn {
  min-width: 32px;
  min-height: 32px;
  border: none;
  background: transparent;
  color: hsl(var(--subtle-foreground));
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  border-left: 1px solid hsl(var(--border-strong) / 0.7);
}
.mc-stepper__btn:first-child { border-left: none; }
.mc-stepper__btn.is-active { background: hsl(var(--purple)); color: hsl(var(--purple-foreground)); }
.mc-stepper__btn:hover:not(.is-active) { background: hsl(var(--border)); }

/* ── Queue ── */
.mc-queue__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.mc-queue__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  cursor: grab;
}
.mc-queue__item.is-dragging { opacity: 0.5; }
.mc-queue__item.is-dragover { border-color: hsl(var(--mint)); }
.mc-queue__rank { font-family: var(--font-mono); font-size: var(--t-xs); color: hsl(var(--subtle-foreground)); width: 24px; text-align: right; flex: 0 0 auto; }
.mc-queue__title { flex: 1 1 auto; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-queue__move { display: flex; gap: var(--s-1); flex: 0 0 auto; }
.mc-iconbtn {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border-radius: var(--r-sm);
  border: 1px solid hsl(var(--border-strong) / 0.7);
  background: hsl(var(--subtle));
  color: hsl(var(--foreground));
  cursor: pointer;
}
.mc-iconbtn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Live-Feed ── */
.mc-feed__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s-1);
  max-height: 60vh;
  overflow-y: auto;
}
.mc-feed__item {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-xs);
}
.mc-feed__time { font-family: var(--font-mono); color: hsl(var(--subtle-foreground)); flex: 0 0 auto; }
.mc-feed__type {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: var(--fw-semi);
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  flex: 0 0 auto;
}
.mc-feed__type--job { background: hsl(var(--info-soft)); color: hsl(var(--info)); }
.mc-feed__type--command { background: hsl(var(--purple-soft)); color: hsl(var(--purple)); }
.mc-feed__type--bridge { background: hsl(var(--mint-soft)); color: hsl(var(--mint)); }
.mc-feed__type--card { background: hsl(var(--warning-soft)); color: hsl(var(--warning)); }
.mc-feed__type--default { background: hsl(var(--subtle)); color: hsl(var(--subtle-foreground)); }
.mc-feed__source { color: hsl(var(--subtle-foreground)); flex: 0 0 auto; }
.mc-feed__detail { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--foreground)); }

/* ── Detail Slide-over ── */
.mc-detail { position: fixed; inset: 0; z-index: 50; }
.mc-detail__backdrop { position: absolute; inset: 0; background: hsl(0 0% 0% / 0.55); }
.mc-detail__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: hsl(var(--card));
  border-left: 1px solid hsl(var(--border));
  padding: var(--s-4);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-normal) var(--ease-out);
}
.mc-detail.is-open .mc-detail__panel { transform: translateX(0); }
.mc-detail__close { margin-bottom: var(--s-3); }
.mc-detail__meta { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); flex-wrap: wrap; }
.mc-detail__fields { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-3); font-size: var(--t-sm); margin-bottom: var(--s-3); }
.mc-detail__fields dt { color: hsl(var(--subtle-foreground)); }
.mc-detail__fields code { font-family: var(--font-mono); font-size: var(--t-xs); }
.mc-detail__desc { margin-bottom: var(--s-3); font-size: var(--t-sm); }
.mc-detail__desc h3, .mc-detail__placeholder h3, .mc-detail__commands h3 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--subtle-foreground)); margin-bottom: var(--s-1); }
.mc-detail__tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-3); }
.mc-chip { background: hsl(var(--purple-soft)); color: hsl(var(--purple)); padding: 1px var(--s-2); border-radius: var(--r-pill); font-size: var(--t-2xs); }
.mc-detail__placeholder {
  opacity: 0.5;
  border: 1px dashed hsl(var(--border-strong));
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
  font-size: var(--t-xs);
}
.mc-tag-w { font-family: var(--font-mono); color: hsl(var(--purple)); margin-left: var(--s-1); }

/* ── Commands (Echo-Test + Dead-Letter) ── */
.mc-detail__commands { margin-bottom: var(--s-3); }
.mc-deadletter__list { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.mc-deadletter__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid hsl(var(--border-strong) / 0.7);
  border-radius: var(--r-md);
  padding: var(--s-1) var(--s-2);
  font-size: var(--t-xs);
}
.mc-deadletter__type { font-family: var(--font-mono); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Responsive: <768px einspaltig ── */
@media (max-width: 767px) {
  .mc-board { grid-template-columns: 1fr; }
  .mc-header { flex-wrap: wrap; }
  .mc-header__title { display: none; }
  .mc-intake__row { flex-direction: column; }
  .mc-intake__title, .mc-intake__bereich, .mc-intake__prio { flex: 1 1 auto; }
  .mc-tabs { width: 100%; }
  .mc-tab { flex: 1 1 0; }
  .mc-btn--icon { min-width: var(--tap-min); }
  .mc-stepper__btn { min-width: var(--tap-min); min-height: var(--tap-min); }
  .mc-detail__panel { width: 100vw; }
  .mc-main { padding: var(--s-3); }
  .mc-login__card { padding: var(--s-5) var(--s-4); }
}