/* -- Article Body (website) -----------------------------------------
   Renders an article's formatted text. Plain elements - what a CMS or a
   Markdown renderer emits - are styled without classes; library components
   dropped into the text (.mockup-code, .table, .alert, .image, .kbd,
   .heading-anchor, .toc…) keep their own look, because the prose rules only
   reach class-less elements. Adds a lead, pull quotes, footnotes, a table of
   contents layout and a reading-progress bar. */

@layer components {
  .mk-article-body {
    --_measure: 42rem;

    box-sizing: border-box;
    width: 100%;
    max-width: var(--_measure);
    margin-inline: auto;
    padding-inline: 1.25rem;
    color: var(--foreground);
    font-size: 1.0625rem;
    line-height: 1.75;
    hanging-punctuation: first last;
    overflow-wrap: break-word;

    & > * {
      margin-block: 0;
    }
    & > * + * {
      margin-block-start: 1.25em;
    }

    & :is(h2, h3, h4) {
      line-height: 1.25;
      letter-spacing: -0.02em;
      text-wrap: balance;
      scroll-margin-block-start: 5rem;
    }
    & > h2 {
      margin-block-start: 2em;
      font-size: 1.625em;
      font-weight: 700;
    }
    & > h3 {
      margin-block-start: 1.75em;
      font-size: 1.25em;
      font-weight: 600;
    }
    & > h4 {
      margin-block-start: 1.5em;
      font-size: 1em;
      font-weight: 600;
    }
    & > :is(h2, h3, h4) + * {
      margin-block-start: 0.75em;
    }

    & p {
      text-wrap: pretty;
    }

    /* prose links - links with a class are components (heading anchors, buttons…) */
    & a:not([class]) {
      color: var(--primary);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;

      &:hover {
        text-decoration-thickness: 2px;
      }
      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
        border-radius: 2px;
      }
    }

    & :is(strong, b) {
      font-weight: 650;
    }

    & > :is(ul, ol) {
      padding-inline-start: 1.5em;
    }
    & > :is(ul, ol) li + li {
      margin-block-start: 0.4em;
    }
    & > :is(ul, ol) li::marker {
      color: var(--muted-foreground);
    }

    & > dl {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 0.5em 1.25em;

      & dt {
        font-weight: 600;
      }
      & dd {
        margin: 0;
        color: var(--muted-foreground);
      }
    }

    & > blockquote:not([class]) {
      margin-inline: 0;
      padding-inline-start: 1.25em;
      border-inline-start: 3px solid var(--primary);
      font-size: 1.125em;
      font-style: italic;

      & p {
        margin: 0;
      }
      & cite {
        display: block;
        margin-block-start: 0.5em;
        color: var(--muted-foreground);
        font-size: 0.8em;
        font-style: normal;

        &::before {
          content: "- ";
        }
      }
    }

    & :not(pre) > code:not([class]) {
      padding: 0.125em 0.375em;
      border-radius: var(--radius-sm);
      background: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.875em;
    }

    /* a bare <pre>; a .mockup-code brings its own window */
    & > pre {
      padding: 1em 1.25em;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.875em;
      line-height: 1.6;
      tab-size: 2;
    }

    & > hr {
      height: 1px;
      margin-block: 2.5em;
      border: 0;
      background: var(--border);
    }

    & figure:not([class]) {
      margin-inline: 0;

      & :is(img, video) {
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--radius-lg);
      }
      & figcaption {
        margin-block-start: 0.625em;
        color: var(--muted-foreground);
        font-size: 0.8125em;
        text-align: center;
      }
    }
    & > :is(img, video) {
      display: block;
      width: 100%;
      height: auto;
      border-radius: var(--radius-lg);
    }

    /* embeds (YouTube, maps…): 16:9 unless the iframe says otherwise */
    & iframe {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: var(--radius-lg);
      background: var(--muted);
    }

    /* a bare table; a .table (in its .table-container) is the component */
    & > table {
      display: block;
      width: 100%;
      overflow-x: auto;
      border-collapse: collapse;
      font-size: 0.875em;
      line-height: 1.5;

      & :is(th, td) {
        padding: 0.5em 0.75em;
        border-block-end: 1px solid var(--border);
        text-align: start;
      }
      & th {
        color: var(--muted-foreground);
        font-weight: 600;
      }
    }

    & kbd:not([class]) {
      padding: 0.0625em 0.375em;
      border: 1px solid var(--border);
      border-block-end-width: 2px;
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: 0.8em;
    }

    & mark {
      padding-inline: 0.125em;
      border-radius: 2px;
      background: color-mix(in oklch, var(--primary) 22%, transparent);
      color: inherit;
    }
    & abbr[title] {
      text-decoration: underline dotted;
      text-underline-offset: 0.2em;
      cursor: help;
    }
    & :is(del, s) {
      color: var(--muted-foreground);
    }
    & ins {
      text-decoration: none;
      background: color-mix(in oklch, oklch(0.72 0.17 150) 22%, transparent);
    }

    /* the library components inside the text */
    & > :is(.mockup-code, .table-container, .alert, .image, .mk-article-body-pullquote) {
      margin-block-start: 1.75em;
    }
    & > :is(.mockup-code, .table-container, .alert, .image) + * {
      margin-block-start: 1.75em;
    }
    & .heading-anchor {
      margin-inline-end: 0.25em;
    }
  }

  /* the opening paragraph, larger */
  .mk-article-body-lead {
    color: var(--muted-foreground);
    font-size: 1.25em;
    line-height: 1.6;
  }

  /* a callout box inside the text */
  .mk-article-body-note {
    padding: 1em 1.25em;
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--primary);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--muted) 60%, transparent);
    font-size: 0.9375em;

    & > :first-child {
      margin-block-start: 0;
    }
    & > :last-child {
      margin-block-end: 0;
    }
  }

  /* a pull quote - set large between rules, the line repeated from the text */
  .mk-article-body-pullquote {
    margin-inline: 0;
    padding-block: 0.75em;
    border-block: 1px solid var(--border);
    font-family: var(--font-serif);
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;

    &::before {
      content: "“";
      display: block;
      color: var(--primary);
      font-size: 2em;
      line-height: 0.5;
    }
  }

  /* footnotes: numbered refs jump to the notes, the notes jump back */
  .mk-article-body-ref {
    font-size: 0.75em;
    line-height: 0;
    vertical-align: super;

    & a {
      padding-inline: 0.125em;
      color: var(--primary);
      font-weight: 600;
      text-decoration: none;
    }
    & a:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
      border-radius: 2px;
    }
  }
  .mk-article-body-footnotes {
    padding-block-start: 1em;
    border-block-start: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.875em;

    & ol {
      margin: 0;
      padding-inline-start: 1.25em;
    }
    & li {
      padding: 0.25em 0.5em;
      margin-inline-start: -0.5em;
      border-radius: var(--radius-sm);
      scroll-margin-block-start: 5rem;
    }
    & li:target {
      background: color-mix(in oklch, var(--primary) 12%, transparent);
      color: var(--foreground);
    }
    & a[href^="#"] {
      color: var(--primary);
      text-decoration: none;
    }
  }

  /* a wider figure than the measure (it stays inside the viewport) */
  .mk-article-body > .mk-article-body-wide {
    width: min(100vw - 2.5rem, var(--_measure) + 16rem);
    margin-inline: calc((100% - min(100vw - 2.5rem, var(--_measure) + 16rem)) / 2);
  }

  /* the text beside a sticky table of contents (the .toc component) */
  .mk-article-body-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;

    & > .toc {
      display: none;
    }
    & > .mk-article-body {
      margin-inline: 0;
    }
  }
  @media (min-width: 56rem) {
    .mk-article-body-layout {
      grid-template-columns: 12rem minmax(0, 1fr);

      & > .toc {
        display: flex;
        position: sticky;
        inset-block-start: 1rem;
        align-self: start;
      }
    }
  }

  /* a reading-progress bar - driven by the scroll of the nearest scroller */
  .mk-article-body-progress {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    height: 3px;
    margin-block-end: 1rem;
    background: var(--primary);
    transform-origin: left;
    scale: 0 1;
    animation: mk-article-body-read linear both;
  }
  /* the timeline in its own rule: a minifier must not fold it into the
     `animation` shorthand (where it is reset-only - the declaration would be
     dropped); unsupported, the bar hides */
  @supports (animation-timeline: scroll()) {
    .mk-article-body-progress {
      animation-timeline: scroll(nearest block);
    }
  }
  @supports not (animation-timeline: scroll()) {
    .mk-article-body-progress {
      display: none;
    }
  }

  /* serif: an editorial voice for the running text */
  .mk-article-body[data-variant="serif"] {
    font-family: var(--font-serif);
    font-size: 1.1875rem;

    & :is(h2, h3, h4) {
      font-family: var(--font-sans);
    }
  }

  /* sizes */
  .mk-article-body[data-size="sm"] {
    font-size: 0.9375rem;
    line-height: 1.7;
  }
  .mk-article-body[data-size="lg"] {
    font-size: 1.1875rem;
    --_measure: 46rem;
  }

  /* a drop cap opens the first paragraph */
  .mk-article-body[data-dropcap] > p:first-of-type::first-letter {
    float: inline-start;
    margin: 0.06em 0.12em 0 0;
    font-family: var(--font-serif);
    font-size: 3.6em;
    font-weight: 700;
    line-height: 0.8;
    color: var(--primary);
  }

  @keyframes mk-article-body-read {
    to {
      scale: 1 1;
    }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-article-body-progress {
      animation: none;
      display: none;
    }
  }

  @media (prefers-contrast: more) {
    .mk-article-body :is(blockquote cite, figcaption),
    .mk-article-body-lead,
    .mk-article-body-footnotes {
      color: var(--foreground);
    }
    .mk-article-body li::marker {
      color: var(--foreground);
    }
    .mk-article-body a:not([class]) {
      text-decoration-thickness: 2px;
    }
  }

  @media (forced-colors: active) {
    .mk-article-body a:not([class]) {
      color: LinkText;
    }
    .mk-article-body :not(pre) > code:not([class]),
    .mk-article-body > pre {
      border: 1px solid CanvasText;
    }
    .mk-article-body-progress {
      background: Highlight;
    }
  }
}