/* Sheet: a card of reading in the middle of the screen — the details a
   question comes with. A native popover, so Esc and a click outside close it;
   it fades and settles in.

   <div popover class="sheet" role="dialog">
     <div class="sheet__head"><h3>…</h3><button class="button" data-shape="icon">…</button></div>
     <div class="sheet__text">…</div>
   </div> */
.sheet {
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--color-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
  color: var(--color-text);
  inline-size: min(30rem, 100vw - 2 * var(--gutter));
  inset: 0;
  margin: auto;
  max-block-size: calc(100dvh - 2 * var(--gutter));
  opacity: 0;
  overflow: auto;
  padding: var(--space-s-m);
  scale: 0.96;
  transition:
    display var(--duration-fast) allow-discrete,
    overlay var(--duration-fast) allow-discrete,
    opacity var(--duration-fast) var(--ease-out),
    scale var(--duration-fast) var(--ease-out);

  &:popover-open {
    opacity: 1;
    scale: 1;
  }

  @starting-style {
    &:popover-open {
      opacity: 0;
      scale: 0.96;
    }
  }

  &::backdrop {
    background: oklch(0 0 0 / 0.3);
  }
}

.sheet__head {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
  justify-content: space-between;
  margin-block-end: var(--space-s);

  h3 {
    font-size: var(--step-1);
  }
}

/* The organizer's own line breaks stay */
.sheet__text {
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}