/* Generated claim annotations: no JavaScript required. Load after site.css.
   <details> is the baseline; supported wide screens use a native auto popover.
   Placement and semantic labels belong to the Ruby publication workflow. */

/* Let the nested article grids shrink to the viewport rather than to a long
   revision link or note's intrinsic width. Ordinary prose can wrap safely. */
.paper-main,
.paper-layout,
.paper-article {
  min-width: 0;
}

.paper-article {
  overflow-wrap: anywhere;
}

.paper-main {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1020px) {
  .paper-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .paper-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .paper-footer > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .paper-footer > .button {
    white-space: normal;
  }
}

.wp-claim-note,
.wp-change-notice {
  --wp-note-surface: #11131f;
  --wp-note-ink: var(--ink, #e8e8dc);
  --wp-note-soft: var(--text-soft, #aeb7af);
  --wp-note-accent: var(--signal, #b49bdd);
  --wp-note-line: rgba(180, 155, 221, 0.3);
  color: var(--wp-note-ink);
  font-family: var(--font-body, sans-serif);
  overflow-wrap: anywhere;
  scroll-margin-top: 8.5rem;
}

.wp-claim-note {
  margin-block: 0.5rem 1.35rem;
}

.wp-note-trigger {
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--wp-note-line);
  border-radius: 0.5rem;
  background: rgba(180, 155, 221, 0.07);
  color: var(--wp-note-accent);
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
}

/* Preserve the native disclosure marker so opening behavior is discoverable. */
.wp-note-mobile > summary.wp-note-trigger {
  display: list-item;
  list-style-position: inside;
}

.wp-note-trigger:hover,
.wp-note-mobile[open] > .wp-note-trigger {
  border-color: var(--wp-note-accent);
  background: rgba(180, 155, 221, 0.15);
  color: var(--wp-note-ink);
}

.wp-note-trigger:focus-visible,
.wp-note-panel a:focus-visible,
.wp-change-notice a:focus-visible {
  outline: 3px solid var(--wp-note-accent);
  outline-offset: 3px;
}

.wp-note-panel,
.wp-change-notice {
  box-sizing: border-box;
  padding: 1rem 1.15rem;
  border: 1px solid var(--wp-note-line);
  border-radius: 0.75rem;
  background: var(--wp-note-surface);
  color: var(--wp-note-ink);
  font-size: 0.95rem;
  line-height: 1.65;
}

.wp-note-panel > strong,
.wp-change-notice > strong {
  display: block;
  color: var(--wp-note-ink);
  font-size: 0.9rem;
  line-height: 1.5;
}

.wp-note-panel > p,
.wp-change-notice > p {
  margin-block: 0.65rem;
  color: var(--wp-note-soft);
  font-size: 0.95rem;
  line-height: 1.65;
}

.wp-note-panel > a,
.wp-change-notice > a {
  color: var(--wp-note-accent);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.wp-note-mobile > .wp-note-panel {
  margin-block-start: 0.6rem;
}

/* Hide the panel itself as well as its wrapper: an open popover is top-layer
   content and must disappear when the viewport switches to the flow layout. */
.wp-note-desktop,
.wp-note-desktop > .wp-note-panel[popover] {
  display: none;
}

.wp-note-mobile {
  display: block;
}

.wp-change-notice {
  margin-block: 1.2rem 1.6rem;
  border-inline-start: 3px solid var(--wp-note-accent);
}

.wp-change-notice-major {
  padding: 1.2rem 1.35rem;
  border-inline-start-width: 4px;
  background: linear-gradient(120deg, rgba(180, 155, 221, 0.1), transparent), var(--wp-note-surface);
}

/* The button's popovertarget supplies an implicit anchor. Browser-native
   popover behavior owns click/tap, Escape, outside dismissal, and focus. */
@supports (anchor-name: --wp-note) and (position-area: bottom span-right) and selector(:popover-open) {
  @media screen and (min-width: 761px) {
    .wp-note-desktop {
      display: block;
    }

    .wp-note-mobile {
      display: none;
    }

    .wp-note-desktop > .wp-note-panel[popover]:popover-open {
      display: block;
      position: fixed;
      inset: auto;
      position-area: bottom span-right;
      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
      margin: 0.5rem;
      width: min(24rem, calc(100vw - 2rem));
      max-height: min(26rem, calc(100vh - 2rem));
      overflow: auto;
      overscroll-behavior: contain;
      box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);
    }
  }
}

@media (forced-colors: active) {
  .wp-note-trigger,
  .wp-note-panel,
  .wp-change-notice {
    border-color: ButtonText;
  }

  .wp-note-trigger:focus-visible,
  .wp-note-panel a:focus-visible,
  .wp-change-notice a:focus-visible {
    outline-color: Highlight;
  }
}

@media print {
  /* Print one complete static copy, even when the interactive note was closed.
     Do not depend on browsers printing the contents of closed <details>. */
  .wp-claim-note,
  .wp-change-notice {
    --wp-note-ink: #111;
    --wp-note-soft: #222;
    --wp-note-accent: #222;
    --wp-note-surface: #fff;
    --wp-note-line: #999;
    break-inside: avoid;
  }

  .wp-note-mobile,
  .wp-note-desktop > .wp-note-trigger {
    display: none !important;
  }

  .wp-note-desktop,
  .wp-note-desktop > .wp-note-panel[popover] {
    display: block !important;
  }

  .wp-note-desktop > .wp-note-panel[popover] {
    position: static !important;
    inset: auto !important;
    margin: 0;
    width: auto;
    max-height: none;
    overflow: visible;
    box-shadow: none;
  }

  .wp-change-notice-major {
    background: #fff;
  }
}