/* RENDERED PROSE — the one place styling bare elements, since `react-markdown` and ProseMirror emit plain
   HTML; every rule is scoped under `.lotics-markdown`. Headings use the type ramp's rungs (following the
   ≥768 curve) with tight leading, as subject lines. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-markdown {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    font-feature-settings: var(--lotics-font-features);
    color: var(--lotics-ink-default);
  }

  /* A value on one line: the notation's words flow into the line its caller cuts. */
  .lotics-markdown[data-variant="line"] {
    display: inline;
  }

  /* Headings */

  .lotics-markdown h1 {
    font-family: var(--font-sans);
    font-size: var(--lotics-text-xl);
    line-height: var(--lotics-leading-tight-xl);
    font-weight: var(--lotics-weight-semibold);
    letter-spacing: var(--lotics-tracking-xl);
    padding-top: var(--lotics-space-12);
    padding-bottom: var(--lotics-space-4);
    margin: 0;
  }

  .lotics-markdown h2 {
    font-family: var(--font-sans);
    font-size: var(--lotics-text-lg);
    line-height: var(--lotics-leading-tight-lg);
    font-weight: var(--lotics-weight-semibold);
    letter-spacing: var(--lotics-tracking-lg);
    padding-top: var(--lotics-space-12);
    padding-bottom: var(--lotics-space-4);
    margin: 0;
  }

  .lotics-markdown h3 {
    font-family: var(--font-sans);
    font-size: var(--lotics-text-md);
    line-height: var(--lotics-leading-tight-md);
    font-weight: var(--lotics-weight-semibold);
    letter-spacing: var(--lotics-tracking-md);
    padding-top: var(--lotics-space-8);
    padding-bottom: var(--lotics-space-4);
    margin: 0;
  }

  .lotics-markdown h4,
  .lotics-markdown h5,
  .lotics-markdown h6 {
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-tight-sm);
    font-weight: var(--lotics-weight-medium);
    letter-spacing: var(--lotics-tracking-sm);
    padding-top: var(--lotics-space-8);
    padding-bottom: var(--lotics-space-4);
    margin: 0;
  }

  /* Embedded: markdown as a value on another page. Document scale puts `h1` at the display rung, which
     lets a machine summary's `##` and `**bold**` outshout the page. Embedded, every heading is one
     treatment at body size, a weight step above `strong` — still a heading by shape, never out-ranking its
     surface. */
  .lotics-markdown[data-variant="embedded"] h1,
  .lotics-markdown[data-variant="embedded"] h2,
  .lotics-markdown[data-variant="embedded"] h3,
  .lotics-markdown[data-variant="embedded"] h4,
  .lotics-markdown[data-variant="embedded"] h5,
  .lotics-markdown[data-variant="embedded"] h6 {
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-tight-sm);
    font-weight: var(--lotics-weight-semibold);
    letter-spacing: var(--lotics-tracking-sm);
    padding-top: var(--lotics-space-8);
    padding-bottom: var(--lotics-space-2);
  }

  /* A value never opens with an unrequested gap. */
  .lotics-markdown[data-variant="embedded"] > :first-child {
    padding-top: 0;
  }

  .lotics-markdown[data-variant="embedded"] > :last-child {
    padding-bottom: 0;
  }

  /* Block elements */

  .lotics-markdown p {
    margin: 0;
    padding-block: var(--lotics-space-4);
    padding-inline: 0;
  }

  .lotics-markdown blockquote {
    /* A 3px margin mark, not a hairline. */
    border-left: 3px solid var(--border);
    margin-block: var(--lotics-space-4);
    margin-inline: 0;
    padding-left: var(--lotics-space-12);
    color: var(--lotics-ink-muted);
  }

  .lotics-markdown hr {
    border: 0 solid var(--border);
    border-top: 1px solid var(--border);
    margin-block: var(--lotics-space-8);
    margin-inline: 0;
  }

  /* Lists */

  .lotics-markdown ul,
  .lotics-markdown ol {
    padding-left: var(--lotics-space-24);
    margin-block: var(--lotics-space-4);
    margin-inline: 0;
  }

  .lotics-markdown li {
    padding-block: var(--lotics-space-2);
  }

  /* Inline */

  .lotics-markdown strong {
    font-family: var(--font-sans);
    font-weight: var(--lotics-weight-medium);
  }

  .lotics-markdown a {
    color: var(--lotics-accent);
    text-decoration: underline;
    cursor: pointer;
  }

  .lotics-markdown del {
    color: var(--lotics-ink-muted);
  }

  /* One rung down: mono runs wider and reads louder at body size. Classic code red, not a valence. */

  .lotics-markdown code {
    /* The rung's quarter (1px), so the ground clears the glyphs. */
    padding-block: var(--lotics-space-2);
    padding-inline: var(--lotics-space-4);
    color: var(--lotics-ink-danger);
    background-color: var(--muted);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-6));
    font-size: var(--lotics-text-xs);
    font-family: var(--font-mono);
  }

  .lotics-markdown pre {
    background-color: var(--muted);
    padding: var(--lotics-space-12);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    margin-block: var(--lotics-space-4);
    margin-inline: 0;
    overflow-x: auto;
  }

  .lotics-markdown pre code {
    padding: 0;
    color: inherit;
    background-color: transparent;
    border-radius: 0;
    font-size: var(--lotics-text-xs);
    line-height: var(--lotics-leading-tight-sm);
  }

  /* Tables */

  .lotics-markdown table {
    border-collapse: collapse;
    margin-block: var(--lotics-space-4);
    margin-inline: 0;
    width: max-content;
    min-width: 100%;
  }

  .lotics-markdown th,
  .lotics-markdown td {
    border: 1px solid var(--border);
    padding-block: var(--lotics-space-6);
    padding-inline: var(--lotics-space-12);
    text-align: left;
    white-space: nowrap;
  }

  .lotics-markdown th {
    background-color: var(--muted);
    font-family: var(--font-sans);
    font-weight: var(--lotics-weight-medium);
  }

  /* A hover-revealed corner copy tab, so the table reads as a table until someone wants the numbers. */

  .lotics-markdown__table {
    position: relative;
    margin-block: var(--lotics-space-16);
    margin-inline: 0;
    max-width: 100%;
    /* A border width, so the tab sits inside the hairline. */
    --lotics-markdown-hairline: 1px;
  }

  .lotics-markdown__scroller {
    overflow-x: auto;
    max-width: 100%;
  }

  .lotics-markdown__table table {
    margin: 0;
  }

  .lotics-markdown__copy {
    position: absolute;
    top: var(--lotics-markdown-hairline);
    right: var(--lotics-markdown-hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    /* A touch target that leaves the first header cell readable. */
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: opacity var(--lotics-duration-fast) var(--lotics-ease-standard);
    background-color: color-mix(in srgb, var(--muted) 90%, transparent);
    background-image: none;
    border: 1px solid var(--border);
    border-radius: 0 0 0 calc(var(--lotics-radius-control) - var(--lotics-space-4));
    color: var(--lotics-ink-muted);
    --lotics-icon-color: currentColor;
    appearance: none;
    cursor: pointer;
  }

  .lotics-markdown__table:hover .lotics-markdown__copy,
  .lotics-markdown__copy:focus-visible {
    opacity: 1;
  }

  .lotics-markdown__copy:hover {
    background-image: linear-gradient(
      0deg,
      var(--lotics-wash-selected),
      var(--lotics-wash-selected)
    );
  }

  .lotics-markdown__copy:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-markdown__table[data-copied] .lotics-markdown__copy {
    opacity: 1;
    color: var(--lotics-ink-success);
  }
}