@layer components {
  /* Backdrop overlay for entity modals.
     Fixed black -- backdrop overlays don't follow theme inversion.
     Matches --shadow / --shadow-lg pattern in _global.css. */
  .entity-modal-backdrop[hidden] {
    display: none;
  }

  .entity-modal-backdrop {
    background-color: oklch(0% 0 0 / 0.5);
    inset: 0;
    position: fixed;
    z-index: calc(var(--z-dialog) - 1);
  }

  /* Entity modal dialog -- full-screen sheet on mobile, centered dialog on desktop.
     The [hidden] rule is critical: without it, `display: flex` overrides the
     HTML hidden attribute and the modal renders as an opaque white overlay
     covering the entire viewport even when closed. */
  .entity-modal[hidden] {
    display: none;
  }

  .entity-modal {
    background-color: var(--color-canvas);
    display: flex;
    flex-direction: column;
    inset: 0;
    max-block-size: 100dvh;
    overflow-y: auto;
    position: fixed;
    z-index: var(--z-dialog);
  }

  /* Desktop: centered dialog with max-width and border */
  @media (min-width: 800px) {
    .entity-modal {
      border: var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      inset-block-start: 50%;
      inset-inline-start: 50%;
      inset-block-end: auto;
      inset-inline-end: auto;
      inline-size: min(calc(100% - 4rem), 36rem);
      max-block-size: calc(100dvh - 6rem);
      transform: translate(-50%, -50%);
    }
  }

  /* Entity detail inside modal -- reset mobile-specific overrides.
     entity-detail.css makes .entity-detail position:fixed on mobile for the
     drawer context. Inside the modal (which is already fixed), that creates
     double-fixed positioning and nav-height padding for a nav that isn't
     there. Reset everything and let the modal own the layout. */
  .entity-modal .entity-detail {
    border-block-start: none;
    display: flex;
    flex: 1;
    flex-direction: column;
    inset: auto;
    min-block-size: 0;
    overflow-y: auto;
    padding: 0;
    position: static;
    z-index: auto;
  }

  .entity-modal .entity-detail__header {
    border-block-end: var(--border);
    padding-block: var(--block-space);
    padding-inline: var(--inline-space-double);
    position: sticky;
    inset-block-start: 0;
    background-color: var(--color-canvas);
    z-index: 1;
  }

  /* Content area below the header -- form fields, timeline, related notes.
     None of these use a .entity-detail__body wrapper, so target all direct
     children of .entity-detail that aren't the header. */
  .entity-modal .entity-detail > :not(.entity-detail__header) {
    padding-inline: var(--inline-space-double);
  }

  .entity-modal .entity-detail__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--inline-space-double);
  }

  /* Related notes section in entity edit modals */
  .entity-detail__section {
    border-block-start: var(--border);
    margin-block-start: var(--block-space);
    padding-block-start: var(--block-space);
  }

  .entity-detail__section-title {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    font-weight: 600;
    margin-block-end: var(--block-space-half);
  }

  .entity-detail__related-notes {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-quarter);
  }

  .entity-detail__related-note {
    align-items: center;
    border-radius: var(--radius);
    color: var(--color-ink);
    display: flex;
    font-size: var(--text-small);
    gap: var(--inline-space-half);
    padding: var(--block-space-half) var(--inline-space-half);
    text-decoration: none;
  }

  .entity-detail__related-note:hover {
    background: var(--color-surface);
  }

  .entity-detail__related-note-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}