/* HTML-Editor – eigene Styles ergänzend zu Tailwind (Play-CDN). */

html, body {
  overflow: hidden; /* nur die Panels scrollen, nicht die ganze Seite */
}

.editor-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

/* Zeilenaufteilung HTML/CSS-Panel; schrumpft auf Leistenhöhe, wenn ein Panel
   eingeklappt ist, damit das jeweils andere den frei gewordenen Platz bekommt.
   align-content: start verhindert, dass "auto"-Zeilen (eingeklappte Panels)
   auf die volle Höhe des (vom äußeren Grid gestreckten) Containers aufgeblasen werden. */
.editor-columns {
  grid-template-rows: 3fr 2fr;
  align-content: start;
}

.editor-columns:has(#htmlInput[hidden]) {
  grid-template-rows: auto 1fr;
}

.editor-columns:has(#cssInput[hidden]) {
  grid-template-rows: 1fr auto;
}

.editor-columns:has(#htmlInput[hidden]):has(#cssInput[hidden]) {
  grid-template-rows: auto auto;
}

.editor-panel__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.editor-panel__bar[role="button"] {
  cursor: pointer;
  user-select: none;
}

.editor-panel__bar[role="button"]:hover {
  background: #eef2f7;
}

.editor-panel__bar[role="button"]::after {
  content: "▾";
  margin-left: auto;
  color: #94a3b8;
  transition: transform 0.15s ease;
}

.editor-panel__bar[aria-expanded="false"] {
  border-bottom: 0;
}

.editor-panel__bar[aria-expanded="false"]::after {
  transform: rotate(-90deg);
}

.editor-panel__code {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 0.75rem 1rem;
  background: #0f172a;
  color: #e2e8f0;
  caret-color: #fff;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.55;
  tab-size: 2;
}

#preview {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
  background: #fff;
}