/*
 * RENDERED PROSE. The one place in the kit that styles bare elements, because
 * the elements are the AUTHOR's: `react-markdown` and ProseMirror both emit
 * plain HTML, so every rule here is scoped under `.lotics-markdown` and reaches
 * nothing outside it.
 *
 * The scale is the type ramp's, which is why the headings read as the page's
 * own: what used to be a fixed copy of the ramp at one width is now the rungs
 * themselves, so a heading follows the ≥768 curve like every other heading.
 * Headings take the TIGHT leading — a heading is a subject line, not prose.
 */
@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);
  }

  /* 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 that is a VALUE on someone else's page, not the page.
   *
   * The scale above is a document's: `h1` is the display rung, which is exactly
   * a `SectionHeadingTitle`. That is right when the markdown IS the surface (a
   * knowledge doc, a terms page) and wrong the moment it is a field on a record,
   * because the author of the text is then not the author of the page — and
   * increasingly is not a person at all. A model asked for a call summary writes
   * `##` headings and liberal `**bold**`, and the page hands them a rung one step
   * under its own section headings: measured on a real interaction log, a machine
   * summary inside a feed row drew 18px/600 headings over 44 medium-weight runs,
   * so the least-trustworthy content on the screen was also the loudest.
   *
   * Embedded, every heading collapses to ONE treatment at the body's own size,
   * one weight step above `strong`. A heading is still legible as a heading —
   * it owns its line and carries the space around it, which is SHAPE rather than
   * scale — and it can no longer outrank the surface it was dropped into.
   */
  .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 a gap its container did not ask for. */
  .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 quote's rule is a SIZE this component owns — thick enough to read as a
       margin mark rather than as 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);
  }

  /* Code — one rung down from the body, because a mono face runs wider at the
     same size and a code run set at body size reads LOUDER than the prose it
     interrupts. The ink is the classic code red rather than a valence: nothing
     about a code span is dangerous. */

  .lotics-markdown code {
    /* A hair of vertical padding, so the chip's ground clears the glyphs rather
       than sitting on them — the rung's quarter, which is the 1px this always
       carried. */
    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);
  }

  /* The table's own copy control — a corner tab that appears on hover, so the
     table reads as a table until somebody wants the numbers. */

  .lotics-markdown__table {
    position: relative;
    margin-block: var(--lotics-space-16);
    margin-inline: 0;
    max-width: 100%;
    /* The table's own hairline, named so the tab can sit INSIDE it rather than
       on top of it — the one offset here that is a border width and not a
       gutter. */
    --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;
    /* The tab is this control's own measure: a touch target that still leaves
       the first header cell readable under it. */
    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;
  }

  /* Copied: the glyph says so, and so does the ink. */
  .lotics-markdown__table[data-copied] .lotics-markdown__copy {
    opacity: 1;
    color: var(--lotics-ink-success);
  }
}