/* --- Prose from Markdown -------------------------------------------------
   Shared by both sites: the marketing articles and case studies, and the
   shop's Markdown pages. It lives in design/ rather than in main.css because
   the two sites load different page sheets and render the same Markdown.

   Everything below is written in the design tokens, so a paragraph reads the
   same on either ground. */

/* Prose from markdown. A heavy rule above every h2 marks the section break. */
.prose {
  max-width: var(--measure-prose);

  & > :first-child {
    margin-top: 0;
  }

  & h2 {
    margin: 3rem 0 1rem;
    padding-top: 1.75rem;
    border-top: var(--rule-heavy) solid var(--ink);
    font-family: var(--font-display);
    font-size: var(--step-subsection);
    font-weight: var(--weight-regular);
    line-height: var(--leading-heading);
  }

  & > h2:first-child {
    margin-top: 0;
  }

  /* Plain markdown headings only — .item-name and friends carry their own. */
  & h3:not([class]) {
    margin: 2.25rem 0 0.5rem;
    font-family: var(--font-display);
    font-size: var(--step-title);
    font-weight: var(--weight-regular);
    color: var(--orange-deep);
  }

  & p,
  & ul,
  & ol {
    margin: 0 0 1.1em;
  }

  /* Plain markdown lists only — lists that carry a class style themselves */
  & ul:not([class]) {
    list-style: none;
    padding: 0;

    & li {
      padding-left: 1.5rem;
      margin: 0.4em 0;
      position: relative;

      &::before {
        content: "—";
        position: absolute;
        left: 0;
        color: var(--orange-deep);
      }
    }
  }

  & ol:not([class]) {
    padding-left: 1.25rem;

    & li {
      margin: 0.4em 0;

      &::marker {
        color: var(--orange-deep);
      }
    }
  }

  & strong {
    font-weight: var(--weight-semibold);
    color: var(--ink);
  }

  & a {
    color: var(--orange-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    &:hover,
    &:focus-visible {
      color: var(--ink);
      text-decoration-thickness: 2px;
    }
  }

  & code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--orange-deep);
  }

  & blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 3px solid var(--ink);
    color: var(--ink-soft);

    /* The quoted paragraph brought its own margins, which pushed the rule well
       past the text at both ends. The blockquote owns the space around itself;
       what sits inside it does not. */
    & > :first-child {
      margin-top: 0;
    }

    & > :last-child {
      margin-bottom: 0;
    }
  }

  /* A screenshot is evidence, not decoration: the image and a caption, nothing
     more. Case studies lean on these heavily. */
  & figure {
    margin: 2rem 0;
  }

  /* The screenshots bring their own transparency — rounded window corners and
     their shadow, the gaps between dashboard panels — so they sit straight on
     the page. A plate and a border behind them only framed what was framed. */
  & figure img {
    width: 100%;
    height: auto;
  }

  /* A dense screenshot links to itself at full size. It is the image that is
     the link, so none of the prose link decoration applies. */
  & figure a {
    display: block;
    text-decoration: none;
  }

  & figcaption {
    margin-top: 0.75rem;
    font-family: var(--font-label);
    font-size: var(--step-fine);
    line-height: var(--leading-ui);
    color: var(--ink-soft);

    & code {
      font-size: 0.95em;
    }
  }
}

/* --- Code blocks ---------------------------------------------------------
   Kramdown wraps Rouge output as
   .language-x.highlighter-rouge > .highlight > pre.highlight > code.

   Prose lines wrap at --measure-prose, but code lines do not wrap at all, so
   the slab scrolls sideways rather than forcing a reflow or a squint. */

.prose .highlighter-rouge {
  margin: 1.75rem 0;
  background: var(--code-plate);
  color: var(--code-text);
}

.prose .highlight {
  overflow-x: auto;
  padding: 0.5rem 0.625rem;
}

.prose pre {
  margin: 0;
}

/* A fence with no language on it gets no Rouge wrapper to hang the slab on,
   so it draws its own. Without this a plain code block is a bare paragraph of
   orange inline code. */
.prose pre:not(.highlight) {
  margin: 1.75rem 0;
  padding: 0.5rem 0.625rem;
  overflow-x: auto;
  background: var(--code-plate);
  color: var(--code-text);
}

/* The inline-code rule above paints every `code` orange; inside a slab the
   token colors below do that job instead. */
.prose pre code {
  font-family: var(--font-mono);
  font-size: var(--step-fine);
  line-height: var(--leading-code);
  color: inherit;
  white-space: pre;

  /* JetBrains Mono ligates === into a single glyph, which misreads Ruby's
     case-equality operator as an identity sign. Code shows its own bytes. */
  font-variant-ligatures: none;
}

/* Rouge tokens. Everything unlisted inherits --code-text on purpose.
   Shared with .slab, which is the same highlighter on a block the shop writes
   rather than one a Markdown fence did — see SlabHelper. One palette, so a
   Gemfile in a case study and a Gemfile in the token dialog cannot drift. */
:is(.prose, .slab) .highlight {
  & .c,
  & .c1,
  & .cm,
  & .cp,
  & .cs {
    color: var(--code-comment);
    font-style: italic;
  }

  & .k,
  & .kd,
  & .kn,
  & .kp,
  & .kr,
  & .kt,
  & .o,
  & .ow {
    color: var(--code-keyword);
  }

  & .s,
  & .s1,
  & .s2,
  & .sb,
  & .sc,
  & .sd,
  & .se,
  & .sh,
  & .si,
  & .sr,
  & .ss,
  & .m,
  & .mi,
  & .mf,
  & .mh,
  & .mo {
    color: var(--code-literal);
  }

  & .no,
  & .nc,
  & .nn,
  & .vi,
  & .vg,
  & .vc {
    color: var(--code-literal);
  }

  & .nf,
  & .nb {
    color: var(--code-text);
  }

  & .gd,
  & .gi {
    color: var(--code-comment);
  }
}