/* Entwickler-Board: Release-Notes zuerst. @flutter: entfällt (Prototyp-Werkzeug) */
.dev-board { height: 100%; overflow-y: auto; background: var(--color-surface); color: var(--color-on-surface); }

.dev-board__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  max-width: var(--size-content-max);
  margin: var(--space-0) auto;
  padding: var(--space-32) var(--space-24) var(--space-64);
}

.dev-board__muted { margin: var(--space-0); font-size: var(--font-size-12-5); color: var(--color-on-surface-muted); }

/* Letzter Push: kräftige Fläche oben */
.dev-board__latest {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  padding: var(--space-20) var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.dev-board__latest-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-6) var(--space-14); }
.dev-board__latest-head h2 { margin: var(--space-0); font-size: var(--font-size-20); }
.dev-board__eyebrow { font-size: var(--font-size-11); font-weight: var(--font-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; opacity: var(--opacity-pressed); }
.dev-board__latest-note { font-size: var(--font-size-13); opacity: var(--opacity-pressed); }

.dev-board__items { display: flex; flex-direction: column; gap: var(--space-6); margin: var(--space-0); padding: var(--space-0); list-style: none; }

.dev-board__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-md);
  background: var(--color-dev-board-item);
}

.dev-board__item-text { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 var(--size-lock-side); min-width: 0; font-size: var(--font-size-13); }
.dev-board__item-text b { font-size: var(--font-size-13-5); }
.dev-board__kind {
  flex: none;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-bold);
}

/* auf der blauen Fläche: Neu weiß, Geändert gelb (wie der Punkt), Entfernt rot */
.dev-board__kind--new { background: var(--color-on-primary); color: var(--color-primary); }
.dev-board__kind--changed { background: var(--color-required-dot); color: var(--color-on-warning); }
.dev-board__kind--removed { background: var(--color-error); color: var(--color-on-error); }

.dev-board__item .dev-board__where { background: var(--color-dev-board-link-on-primary); color: var(--color-on-primary); }

.dev-board__older { padding: var(--space-12) var(--space-18); border-radius: var(--radius-md); background: var(--color-surface-panel); font-size: var(--font-size-13); }
.dev-board__older summary { cursor: pointer; font-weight: var(--font-weight-semibold); }
.dev-board__older ul { display: flex; flex-direction: column; gap: var(--space-6); margin: var(--space-10) var(--space-0) var(--space-0); padding: var(--space-0); list-style: none; }
.dev-board__older li { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); color: var(--color-on-surface-muted); }
.dev-board__older b { color: var(--color-on-surface); }

/* Alle Features */
.dev-board__features { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-18); border-radius: var(--radius-lg); background: var(--color-surface-panel); }
.dev-board__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10) var(--space-14); }
.dev-board__toolbar h2 { margin: var(--space-0); font-size: var(--font-size-16); }
.dev-board__search { flex: 1 1 var(--size-lock-side); max-width: var(--size-lookup-panel); }

.dev-board__table-wrap { overflow-x: auto; }
.dev-board__table { width: 100%; min-width: var(--size-dev-board-table); border-collapse: collapse; font-size: var(--font-size-13); }
.dev-board__table thead th { padding: var(--space-8) var(--space-12); text-align: left; font-size: var(--font-size-11-5); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-muted); white-space: nowrap; }
.dev-board__table tbody th,
.dev-board__table td { padding: var(--space-12); text-align: left; vertical-align: top; font-weight: var(--font-weight-regular); }
.dev-board__table tbody tr:nth-child(odd) { background: var(--color-dev-board-row); } /* Zebra statt Linien */
.dev-board__table tbody th { display: flex; flex-direction: column; gap: var(--space-4); min-width: var(--size-lock-side); }
.dev-board__table tbody th span { color: var(--color-on-surface-muted); font-size: var(--font-size-12-5); line-height: var(--line-height-hint); }

.dev-board__links, .dev-board__files { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.dev-board__files { flex-direction: column; gap: var(--space-2); }
.dev-board__files code { font-family: var(--font-family-mono); font-size: var(--font-size-11-5); color: var(--color-on-surface-muted); }

.dev-board__where {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--size-control-small);
  padding: var(--space-0) var(--space-10);
  border-radius: var(--radius-sm);
  background: var(--color-dev-board-link);
  color: var(--color-primary-text);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.dev-board__where:hover { color: var(--color-on-surface); }
.dev-board__status { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.dev-board__status small { font-size: var(--font-size-11); color: var(--color-on-surface-muted); white-space: nowrap; }
.dev-board__empty { padding: var(--space-16); }

/* Inhaltlicher Bereich */
.dev-board__area-chip {
  display: inline-block;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-xs);
  background: var(--color-dev-board-link);
  color: var(--color-primary-text);
  font-size: var(--font-size-11-5);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

/* Fundort-Knöpfe sind Buttons (Sprung mit Hervorhebung) */
button.dev-board__where { border: 0; font: inherit; font-size: var(--font-size-12); font-weight: var(--font-weight-semibold); cursor: pointer; }
.dev-board__item-actions { display: inline-flex; gap: var(--space-6); }

.dev-board__preview-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  align-self: flex-start;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-0);
  color: var(--color-primary-text);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
}

.dev-board__row--preview { box-shadow: inset var(--space-4) 0 0 var(--color-primary); }

/* Vorschau rechts */
.dev-board--preview .dev-board__content { margin-right: var(--size-dev-preview); }

.dev-board__preview {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: var(--size-dev-preview);
  max-width: 100vw;
  box-sizing: border-box;
  padding: var(--space-20);
  overflow-y: auto;
  background: var(--color-surface-panel);
  box-shadow: var(--elevation-menu);
}

.dev-board__preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); }
.dev-board__preview-head h2 { margin: var(--space-4) var(--space-0) var(--space-0); font-size: var(--font-size-16); }
.dev-board__preview-head .dev-board__eyebrow { color: var(--color-on-surface-muted); }
.dev-board__close { display: inline-flex; padding: var(--space-6); border-radius: var(--radius-sm); color: var(--color-on-surface-muted); }
.dev-board__close:hover { background: var(--color-hover); color: var(--color-on-surface); }

.dev-board__preview-tabs { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.dev-board__preview-tab { height: var(--size-control-small); padding: var(--space-0) var(--space-10); border-radius: var(--radius-full); background: var(--color-dev-board-row); color: var(--color-on-surface-muted); font-size: var(--font-size-12); font-weight: var(--font-weight-semibold); }
.dev-board__preview-tab--on { background: var(--color-primary); color: var(--color-on-primary); }

/* Prototyp verkleinert (1280 × 800 → Breite des Panels); nicht bedienbar, nur ansehen */
.dev-board__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  container-type: inline-size;
}

.dev-board__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  border: 0;
  transform: scale(calc(100cqw / 1280px));
  transform-origin: 0 0;
  pointer-events: none;
}

.dev-board__preview-actions { display: flex; gap: var(--space-8); }

/* Tastenkürzel */
.dev-shortcuts__docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-12); }

.dev-shortcuts__doc {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-14) var(--space-16);
  border-radius: var(--radius-md);
  background: var(--color-surface-panel);
  color: var(--color-on-surface);
  text-decoration: none;
}

.dev-shortcuts__doc-icon { display: inline-flex; padding: var(--space-8); border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-on-primary); }
.dev-shortcuts__doc-text { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 0; font-size: var(--font-size-13-5); }
.dev-shortcuts__doc-text small { font-size: var(--font-size-12); color: var(--color-on-surface-muted); }

.dev-shortcuts__panel { display: flex; flex-direction: column; gap: var(--space-14); padding: var(--space-18); border-radius: var(--radius-lg); background: var(--color-surface-panel); }
.dev-shortcuts__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-6) var(--space-12); }
.dev-shortcuts__panel h2 { margin: var(--space-0); font-size: var(--font-size-16); }

.dev-shortcuts__standards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-8); margin: var(--space-0); padding: var(--space-0); list-style: none; }
.dev-shortcuts__standard { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-12); border-radius: var(--radius-md); background: var(--color-dev-board-row); }
.dev-shortcuts__standard--done { background: var(--color-dev-board-link); }
.dev-shortcuts__standard-text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; font-size: var(--font-size-13); }
.dev-shortcuts__standard-text small { font-size: var(--font-size-11-5); color: var(--color-on-surface-muted); }
.dev-shortcuts__proto { display: inline-flex; align-items: flex-start; gap: var(--space-4); color: var(--color-primary-text) !important; font-weight: var(--font-weight-semibold); }

.dev-shortcuts__groups { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.dev-shortcuts__group { height: var(--size-control-small); padding: var(--space-0) var(--space-12); border-radius: var(--radius-full); background: var(--color-dev-board-row); color: var(--color-on-surface-muted); font-size: var(--font-size-12); font-weight: var(--font-weight-semibold); }
.dev-shortcuts__group--on { background: var(--color-primary); color: var(--color-on-primary); }

.dev-shortcuts__section h3 { display: flex; align-items: baseline; gap: var(--space-8); margin: var(--space-6) var(--space-0) var(--space-8); font-size: var(--font-size-14); }
.dev-shortcuts__section h3 small { font-size: var(--font-size-12); font-weight: var(--font-weight-regular); color: var(--color-on-surface-muted); }
.dev-shortcuts__table { min-width: var(--size-dev-shortcuts-table); }
.dev-shortcuts__table tbody th { min-width: var(--size-lock-side); }
.dev-shortcuts__table code { font-family: var(--font-family-mono); font-size: var(--font-size-11-5); color: var(--color-on-surface-muted); word-break: break-all; }
.dev-shortcuts__keys { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-0); padding: var(--space-0); list-style: none; }
.dev-shortcuts__keys li { display: flex; align-items: center; gap: var(--space-8); }

/* Tastenkappen: gefüllt, keine Umrandung */
.dev-keys { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.dev-keys kbd {
  min-width: var(--size-control-tiny);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-xs);
  background: var(--color-dev-key);
  color: var(--color-on-dev-key);
  font-family: inherit;
  font-size: var(--font-size-11-5);
  font-weight: var(--font-weight-bold);
  text-align: center;
}
.dev-keys__plus { font-size: var(--font-size-11); color: var(--color-on-surface-faint); }

.dev-board__views { align-self: flex-start; }