/* Content: details blocks */
.tiptap .tiptap-details,
.tiptap [data-type="details"] {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-zinc-700);
  border-radius: 0.75rem;
  background: var(--color-zinc-900);
  overflow: clip;
}

.tiptap .tiptap-details > button,
.tiptap [data-type="details"] > button {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  display: grid;
  place-items: center;
  width: 1.75rem;
  /* Match the summary's line box (min-height 1.5rem, line-height 1.4) so the
     chevron's optical center lines up with the title's cap-center when the
     block is collapsed. Width stays wider for click-target comfort. */
  height: 1.5rem;
  margin: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--color-zinc-400);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.tiptap .tiptap-details > button:hover,
.tiptap [data-type="details"] > button:hover {
  color: var(--color-zinc-100);
  background: var(--color-zinc-800);
}

.tiptap .tiptap-details > button:focus-visible,
.tiptap [data-type="details"] > button:focus-visible {
  outline: 1px solid var(--color-accent-500);
  outline-offset: 1px;
}

.tiptap .tiptap-details > button::before,
.tiptap [data-type="details"] > button::before {
  content: "\25B8";
  display: inline-block;
  transition: transform 0.15s ease;
}

.tiptap .tiptap-details.is-open > button::before,
.tiptap [data-type="details"].is-open > button::before {
  transform: rotate(90deg);
}

.tiptap .tiptap-details > div,
.tiptap [data-type="details"] > div {
  grid-column: 2;
  min-width: 0;
  padding: 0;
}

.tiptap .tiptap-details > div > summary,
.tiptap [data-type="details"] > div > summary {
  display: block;
  min-height: 1.5rem;
  margin: 0;
  color: var(--color-zinc-100);
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  outline: none;
  cursor: text;
}

.tiptap .tiptap-details > div > summary::-webkit-details-marker,
.tiptap [data-type="details"] > div > summary::-webkit-details-marker {
  display: none;
}

.tiptap .tiptap-details > div > summary:empty::before,
.tiptap [data-type="details"] > div > summary:empty::before,
.tiptap .tiptap-details > div > summary:has(> br.ProseMirror-trailingBreak:only-child)::before,
.tiptap [data-type="details"] > div > summary:has(> br.ProseMirror-trailingBreak:only-child)::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  color: var(--color-zinc-500);
}

.tiptap .tiptap-details > div > [data-type="detailsContent"],
.tiptap [data-type="details"] > div > [data-type="detailsContent"] {
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--color-zinc-800);
}

.tiptap .tiptap-details > div > [data-type="detailsContent"][hidden],
.tiptap [data-type="details"] > div > [data-type="detailsContent"][hidden] {
  display: none;
}

/* Static (Sites) variant: published pages have no JS runtime, so the static
   renderer emits a native <details> element with summary/content as direct
   children. The browser handles disclosure for free; we just need to match
   the card chrome + chevron of the live editor's div/button variant.

   The selectors below are scoped to `details.tiptap-details` so they do not
   collide with the live editor's `div.tiptap-details` markup above. */

.tiptap details.tiptap-details {
  display: block;
  margin: 0.75rem 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-zinc-700);
  border-radius: 0.75rem;
  background: var(--color-zinc-900);
  overflow: clip;
}

.tiptap details.tiptap-details > summary {
  display: flex;
  align-items: center;
  min-height: 1.5rem;
  margin: 0;
  list-style: none;
  color: var(--color-zinc-100);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  outline: none;
}

/* Hide the browser's default disclosure marker in both Chromium/Safari and
   Firefox so we can render our own chevron via ::before. */
.tiptap details.tiptap-details > summary::-webkit-details-marker {
  display: none;
}

.tiptap details.tiptap-details > summary {
  list-style: none;
}

.tiptap details.tiptap-details > summary::before {
  content: "\25B8";
  display: inline-block;
  width: 1.25rem;
  margin-right: 0.25rem;
  color: var(--color-zinc-400);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.tiptap details.tiptap-details[open] > summary::before {
  transform: rotate(90deg);
}

.tiptap details.tiptap-details > summary:focus-visible {
  outline: 1px solid var(--color-accent-500);
  outline-offset: 1px;
  border-radius: 0.25rem;
}

.tiptap details.tiptap-details > [data-type="detailsContent"] {
  margin: 0.625rem 0 0 1.5rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--color-zinc-800);
}