/*
 * Document styling for prose-shaped admin content: headings, paragraphs, lists,
 * tables, code and notes. Everything is selected by element name under the
 * `.dlg-doc` container, so it applies unchanged to markdown that has been
 * rendered to HTML — a markdown renderer emits bare tags with no classes to
 * hook onto.
 *
 * Values come from the TellusR Admin design mock (endpoints.html): its `.tr-doc`
 * rules and `--tr-*` tokens, written out literally here rather than mapped onto
 * the `--app-*` tokens, which carry slightly different colours.
 */

.dlg-doc {
    max-width: 900px;
    font-size: 14px;
    line-height: 22px;
    color: #1d2126;
}

/* ── Headings ─────────────────────────────────────────────── */

/* The colour is restated on every block below rather than left to inherit from
   `.dlg-doc`: central-ui.css styles `h1…h6, p` by element name, and a bare
   element rule beats inheritance no matter how the container is styled. */
.dlg-doc h1 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1d2126;
    margin: 0 0 24px;
}

.dlg-doc h2 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #1d2126;
    margin: 34px 0 12px;
}

.dlg-doc h2:first-child {
    margin-top: 0;
}

/* h3 and below aren't in the mock — derived from the same scale so deeper
   markdown nesting stays legible without competing with h2. */
.dlg-doc h3 {
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    color: #1d2126;
    margin: 24px 0 8px;
}

.dlg-doc h4,
.dlg-doc h5,
.dlg-doc h6 {
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    color: #4b5259;
    margin: 20px 0 8px;
}

/* ── Text ─────────────────────────────────────────────────── */

.dlg-doc p {
    font-size: 14px;
    line-height: 22px;
    color: #1d2126;
    margin: 0 0 12px;
    text-wrap: pretty;
}

.dlg-doc a {
    color: #2b6bee;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dlg-doc a:hover {
    color: #1b52c4;
}

/* Asides and caveats. Markdown expresses these as a blockquote; the DSL-built
   pages express the same thing as a paragraph that is entirely italic. */
.dlg-doc blockquote,
.dlg-doc p > em:only-child {
    color: #4b5259;
    font-style: italic;
}

.dlg-doc blockquote {
    margin: 0 0 12px;
}

.dlg-doc blockquote p {
    color: inherit;
    font-style: inherit;
    margin: 0;
}

.dlg-doc hr {
    border: none;
    border-top: 1px solid #e7e9eb;
    margin: 24px 0;
}

.dlg-doc img {
    max-width: 100%;
    height: auto;
}

/* ── Lists ────────────────────────────────────────────────── */

.dlg-doc ol,
.dlg-doc ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.dlg-doc li {
    font-size: 14px;
    line-height: 24px;
    color: #1d2126;
}

.dlg-doc li > ol,
.dlg-doc li > ul {
    margin: 4px 0 0;
}

/* ── Code ─────────────────────────────────────────────────── */

.dlg-doc code {
    font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    background: #e0e1ef;
    padding: 2px 6px;
    border-radius: 4px;
    color: #1d2126;
    word-break: break-all;
}

/* Fenced blocks aren't in the mock. They use the app's light content surface —
   the same one `.pl-prompt-text` gives the prompt bodies on Chatter Prompts —
   rather than the inline pill colour, which is tuned for small runs of text and
   reads far too heavy across a whole block. */
.dlg-doc pre {
    background: var(--app-bg-secondary, #f9f9f9);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 14px;
    overflow-x: auto;
}

.dlg-doc pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    line-height: 20px;
    word-break: normal;
}

/* ── Tables ───────────────────────────────────────────────── */

/* The mock builds tables as a div grid inside a rounded wrapper; the same look
   is carried here by real table elements, which is what markdown produces.
   `separate` + `overflow: hidden` is what lets the header background follow the
   rounded corners. */
.dlg-doc table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e7e9eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 22px;
}

.dlg-doc th {
    padding: 13px 12px;
    font-weight: 600;
    text-align: left;
    color: #1d2126;
    background: #f3f4f6;
    border-bottom: 1px solid #e7e9eb;
}

.dlg-doc td {
    padding: 13px 12px;
    color: #1d2126;
    border-bottom: 1px solid #e7e9eb;
    vertical-align: top;
}

.dlg-doc tbody tr:last-child td {
    border-bottom: none;
}

/* Inside a cell the pill background reads as clutter — the cell is already a
   distinct surface. Matches `.tr-dtable .tr-td code` in the mock. */
.dlg-doc td code,
.dlg-doc th code {
    background: none;
    padding: 0;
}