@layer components {
  /* =========================
     Prose — shared long-form reading typography
     Typography only; the reading measure lives in .content-width-reading
     (utilities.css). Layer-agnostic: imported into layer(components) by
     website.css and unlayered via the :app glob.
     ========================= */

  .prose {
    line-height: 1.4;
    letter-spacing: -0.005ch;
    text-wrap: pretty;
    hyphens: auto;
    text-rendering: optimizeLegibility;
  }

  /* Reading columns (blog posts, handbooks) scale with their container;
     without a container ancestor cqi falls back to the viewport. */
  .prose.content-width-reading {
    font-size: clamp(1rem, 2.5cqi, 1.4rem);
  }

  /* On the marketing surface the article measure follows the design canvas:
     smaller body, airier leading. Lives here because prose.css is unlayered
     and a layered website rule could never win. */
  .website-body .prose.content-width-reading {
    font-size: clamp(1rem, 1.4cqi, 1.0625rem);
    line-height: 1.75;
  }

  /* Headings */
  .prose h2,
  .prose h3,
  .prose h4 {
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02ch;
    text-wrap: balance;
    hyphens: none;
  }

  .prose h2 {
    margin-block: 1.5em 0.75em;
  }

  .prose h2:first-child {
    margin-block-start: 0;
  }

  .prose h3 {
    margin-block: 1.25em 0.5em;
  }

  .prose h4 {
    margin-block: 1em 0.5em;
  }

  /* Vertical rhythm — hand-written markup only. Editor-authored bodies
     (.lexxy-content) bring the rhythm they were composed in (lexxy.css),
     so a handbook reads exactly as it looked in its editor.

     The exclusion sits in :where() so it costs no specificity: this rule stays
     at .prose-p weight, and the more particular blocks below (the table of
     contents) keep winning it on source order, as they did before. */
  .prose :is(p, ul, ol, blockquote, pre, figure, table):not(:where(.lexxy-content *)) {
    margin-block: 0.65lh;
  }

  /* Lists - explicit styling to override resets. The editor's @-mention menu is a
     ul the gem appends inside the editor element, so it inherits .prose along
     with the content; it is a control, not prose, and excludes itself from the
     gem's own list rules the same way. */
  .prose :is(ul, ol):not(:where(.lexxy-prompt-menu)) {
    padding-inline-start: 3ch;
  }

  .prose ul:not(:where(.lexxy-prompt-menu)) {
    list-style: disc;
  }

  .prose ol:not(:where(.lexxy-prompt-menu)) {
    list-style: decimal;
  }

  /* Numbered sections (legal docs: li leading with a heading). The ::marker
     inherits from the li, not the heading, so it needs the heading's weight
     and size (h3 scale, text.css) itself. */
  .prose ol > li:has(> h3:first-child)::marker {
    font-weight: 800;
    font-size: 1.17em;
  }

  /* Pull-quote treatment: shared by blog articles, reference pages, handbooks
     and the editor, so it stays a restrained accent rather than a layout. */
  .prose blockquote {
    font-style: italic;
    font-size: 1.1em;
    line-height: 1.55;
    margin-inline: 0;
    padding-inline-start: 1.25rem;
    border-inline-start: 3px solid var(--color-green);
    hyphens: none;
  }

  .prose blockquote cite {
    display: block;
    margin-block-start: 0.5em;
    font-size: var(--font-size-s);
    font-style: normal;
    color: var(--color-ink-muted);
  }

  .prose hr {
    margin: 2lh auto;
  }

  .prose a {
    text-decoration-skip-ink: auto;
  }

  /* Code */
  .prose pre {
    padding: 0.5lh 2ch;
    background-color: var(--color-gray-lightest);
    border-radius: var(--border-radius, 0.5rem);
    overflow-x: auto;
  }

  .prose :not(pre) > code {
    padding: 0.1lh 0.5ch;
    background-color: var(--color-gray-lightest);
    border-radius: 0.25em;
    font-size: 0.9em;
  }

  /* Tables */
  .prose table {
    inline-size: 100%;
    border-collapse: collapse;
  }

  .prose th,
  .prose td {
    padding: 0.35lh 1ch;
    border-block-end: var(--border);
    text-align: start;
  }

  /* Media embeds */
  .prose img {
    margin-block: 1em;
    border-radius: var(--border-radius, 0.5rem);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .prose iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius, 0.5rem);
  }

  /* Video embeds - override lexxy attachment defaults (unlayered) */
  .prose .attachment--video {
    margin-block: var(--block-space);
    inline-size: 100% !important;
    max-inline-size: 100%;
  }

  .prose .video-embed {
    aspect-ratio: 16 / 9;
    inline-size: 100%;
  }

  .prose .video-embed iframe {
    block-size: 100%;
    inline-size: 100%;
  }

  /* Table of contents — collapsed one-liner so it costs no reading space */
  .prose-toc {
    font-size: 0.85em;
    margin-block: 1lh;
  }

  .prose-toc summary {
    cursor: pointer;
    font-weight: 500;
  }

  .prose-toc ol {
    list-style: none;
    margin-block: 0.5lh 0;
    padding-inline-start: 0;
  }

  .prose-toc li {
    padding-inline-start: calc(var(--depth, 0) * 2ch);
  }

  .prose-toc a {
    color: inherit;
    text-decoration: none;
  }

  .prose-toc a:hover {
    color: var(--color-blue);
  }

  /* Heading anchors — deep links revealed on hover, room under sticky chrome */
  .prose :is(h1, h2, h3)[id] {
    scroll-margin-block-start: calc(var(--header-height, 0px) + var(--block-space));
  }

  .prose .heading-anchor {
    color: var(--color-blue);
    margin-inline-start: 0.5ch;
    opacity: 0;
    text-decoration: none;
    transition: opacity 150ms ease;
  }

  .prose :is(h1, h2, h3):is(:hover, :focus-within) .heading-anchor {
    opacity: 1;
  }

  /* Lightbox — click-to-zoom for reading-column images */
  [data-controller~="lightbox"] img {
    cursor: zoom-in;
  }

  .lightbox {
    background: transparent;
    border: none;
    block-size: 100dvh;
    inline-size: 100dvw;
    max-block-size: 100dvh;
    max-inline-size: 100dvw;
    padding: var(--block-space) var(--inline-space);
  }

  .lightbox[open] {
    display: grid;
    place-items: center;
  }

  .lightbox::backdrop {
    background: oklch(var(--lch-always-black) / 0.78);
  }

  .lightbox figure {
    margin: 0;
    text-align: center;
  }

  .lightbox img {
    cursor: zoom-out;
    max-block-size: 85dvh;
    max-inline-size: 92vw;
    border-radius: var(--border-radius, 0.5rem);
  }

  .lightbox figcaption {
    color: oklch(var(--lch-always-white) / 0.85);
    font-size: 0.9rem;
    margin-block-start: 0.5rem;
  }

  .lightbox figcaption:empty {
    display: none;
  }

  @media print {
    .prose p {
      orphans: 3;
      widows: 3;
    }

    .prose .heading-anchor {
      display: none;
    }
  }
}