@layer components {
  /* Backdrop overlay for entity modals */
  .entity-modal-backdrop[hidden] {
    display: none;
  }

  .entity-modal-backdrop {
    background-color: var(--overlay);
    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;
    overscroll-behavior: contain;
    position: fixed;
    z-index: var(--z-dialog);
  }

  /* Desktop: centered dialog with max-width and border */
  @media (min-width: 800px) {
    .entity-modal {
      border: var(--border-strong);
      border-radius: var(--radius);
      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;
    overscroll-behavior: contain;
    padding: 0;
    position: static;
    /* The sticky header (title row and views row) and the sticky Save footer
       (its 44px button, padding and border), each with a gap to spare. */
    scroll-padding-block: calc(2 * 44px + var(--block-space-double)) calc(44px + var(--block-space-double) + 1px);
    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;
    overscroll-behavior: contain;
    padding: var(--inline-space-double);
  }

  /* Two-line header: the title and Close, then the views row. Each line
     takes the header's full width. */
  .entity-detail__title-row,
  .entity-detail__views {
    flex: 1 1 100%;
  }

  .entity-detail__title-row {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
    min-inline-size: 0;
  }

  .entity-detail__views {
    display: flex;
    gap: var(--inline-space-half);
    overflow-inline: auto;
  }

  .entity-detail__view {
    align-items: center;
    border-block-end: 2px solid transparent;
    color: var(--color-ink-muted);
    display: inline-flex;
    font-size: var(--text-small);
    min-block-size: 44px;
    padding-inline: var(--inline-space-half);
    text-decoration: none;
    white-space: nowrap;
  }

  .entity-detail__view[aria-current="page"] {
    border-block-end-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 500;
  }

  @media (hover: hover) {
    .entity-detail__view:hover {
      background-color: var(--color-surface);
    }

    .entity-detail__view:not([aria-current="page"]):hover {
      color: var(--color-ink);
    }
  }

  .entity-detail__launch,
  .entity-detail__end {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
    margin-block-end: var(--block-space);
  }

  .entity-detail__end {
    border-block-start: var(--border);
    margin-block-start: var(--block-space);
    padding-block-start: var(--block-space);
  }

  /* Sticky Save footer: the last child of the scrolling .entity-detail, so
     it stays in view at the bottom whatever the author has scrolled to. Its
     min-block-size replaces the flex item's content minimum, so without
     flex-shrink: 0 a long form squeezes it to 44px and the Save button
     spills past its padding onto the modal's edge. */
  .entity-detail__footer {
    align-items: center;
    background-color: var(--color-canvas);
    border-block-start: var(--border);
    display: flex;
    flex-shrink: 0;
    gap: var(--inline-space);
    inset-block-end: 0;
    margin-block-start: auto;
    min-block-size: 44px;
    padding-block: var(--block-space-half);
    position: sticky;
    z-index: 1;
  }

  /* The modal's one action stays a full touch target at every width, filling
     the footer, where other small buttons drop to --touch-target-min. */
  .entity-detail__save {
    min-block-size: 44px;
  }

  .entity-detail__saved {
    color: var(--color-positive);
    font-size: var(--text-small);
  }

  /* 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: 0.8125rem;
    font-weight: 500;
    margin-block-end: var(--block-space-half);
  }

  .entity-detail__related-notes {
    display: flex;
    flex-direction: column;
  }

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

  .entity-detail__related-note + .entity-detail__related-note {
    border-block-start: var(--border);
  }

  .entity-detail__empty {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    padding-block: var(--block-space-half);
  }

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

  .entity-detail__related-note .entity-card__category {
    margin-inline-start: auto;
  }

  .entity-detail__related-note-title {
    font-family: var(--font-prose);
    font-size: 0.875rem;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}