/* =============================================================================
   CacheGenie docs - the article reading styles
   Loaded in two places and deliberately written once, because the two used to be
   hand-copied and drifted:
     1. the docs site and the article preview page, after noc_tokens.css and noc.css
     2. inside the TinyMCE editor as its content_css (inc/pages/dashboard/admin/docs.php),
        with only noc_tokens.css and fonts.css beside it
   So every rule here must stand on the tokens alone and must not depend on anything in
   noc.css. Selectors are ".docs_body x" rather than bare elements for the same reason:
   in the editor the article IS the document body, which carries .docs_body itself.
   ============================================================================= */

body.docs_body { margin: 14px 18px; color: var(--noc-ink-2); background: var(--noc-surface); }

.docs_body { margin-top: 28px; max-width: var(--doc-measure); }
.docs_body > :first-child { margin-top: 0; }
.docs_body p { margin: 0 0 16px; }
.docs_body h2 { font-size: 26px; font-weight: 900; margin: 40px 0 14px; line-height: 1.2; }
.docs_body h3 { font-size: 22px; font-weight: bold; margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--noc-line); line-height: 1.25; position: relative; }
.docs_body h4 { font-size: 17px; font-weight: bold; margin: 24px 0 10px; }
.docs_body h5 { font-size: 15px; font-weight: bold; margin: 18px 0 8px; }
.docs_body .docs_anchor { margin-left: 8px; font-weight: normal; color: var(--noc-line); text-decoration: none; }
.docs_body h3:hover .docs_anchor { color: var(--noc-teal); }
.docs_body ul, .docs_body ol { margin: 0 0 16px; padding-left: 24px; }
.docs_body li { margin: 0 0 6px; }
.docs_body li > ul, .docs_body li > ol { margin-top: 6px; }
.docs_body a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--noc-accent); text-underline-offset: 3px; }
.docs_body a:hover { text-decoration-thickness: 2px; }
.docs_body blockquote {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 3px solid var(--noc-indigo);
    background: var(--doc-inline-bg);
    border-radius: 0 var(--noc-radius) var(--noc-radius) 0;
}
.docs_body blockquote p:last-child { margin-bottom: 0; }
.docs_body hr { border: 0; border-top: 1px solid var(--noc-line); margin: 28px 0; }
.docs_body img { max-width: 100%; height: auto; border-radius: var(--noc-radius); }
/* Tables are hairline rows, not a grid: the reading column's own language (a rule and two tones), and a
   table that fills the column with cells that wrap is what survives a phone width. It used to be a block
   with a horizontal scrollbar, which at 390px cut the last column at the box edge (22 September 2026). Code in a
   cell wraps with anywhere: break-word does not lower a cell's minimum width, so one long code token
   (`{ZONE_NAME}.zone.cg-cdn.com` in the API's zone table) held the table 43px past a 390px screen. Only the code:
   anywhere on the whole cell lets a wide table starve its narrow columns into "Str / in / g". */
.docs_body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; border-top: 1px solid var(--noc-line); }
.docs_body th, .docs_body td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--noc-line); text-align: left; vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.docs_body td code { overflow-wrap: anywhere; }
.docs_body th { background: var(--noc-surface-2); font-weight: bold; }
.docs_body th:first-child, .docs_body td:first-child { padding-left: 0; }
.docs_body code {
    display: inline;
    font-family: var(--doc-mono);
    font-size: 87%;
    background: var(--doc-inline-bg);
    color: var(--noc-navy);
    border-radius: var(--noc-radius-sm);
    padding: 2px 5px;
    overflow-wrap: anywhere;
}
.docs_body .code_big {
    display: block;
    padding: 12px 16px;
    margin: 0 0 16px;
    font-size: 14px;
    white-space: pre-wrap;
}
.docs_pre { position: relative; margin: 0 0 20px; }
/* The Copy button sits in a strip of its own above the first line (10px to 39px down), because a line that runs to
   the right edge used to go under it, and the button is translucent, so the two read as one word (measured
   26 September 2026 on the new articles and on 155, 958, 961 and 22 at every width). The strip is part of the block,
   so it needs no rule of its own and the button stays put while a long line scrolls under the strip. */
.docs_pre pre {
    margin: 0;
    padding: 48px 18px 16px;
    background: var(--noc-inverse);
    color: var(--doc-code-ink);
    border-radius: var(--noc-radius);
    overflow-x: auto;
    font: var(--t-mono);
}
.docs_pre pre code { display: block; background: transparent; color: inherit; padding: 0; font-size: inherit; overflow-wrap: normal; white-space: pre; }

/* Endpoint bar: method badge + path, and the parameter rows under it. DOCS_RENDER()
   builds both from plain TinyMCE HTML, which is why they live with the article body
   and not with the docs site's chrome: the editor has to show them too. */
.docs_endpoint {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--noc-line);
    border-radius: var(--noc-radius);
    background: var(--noc-surface-2);
}
.docs_method {
    flex: 0 0 auto;
    min-width: 64px;
    text-align: center;
    padding: 4px 10px;
    border-radius: var(--noc-radius-sm);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--st-ink-on-fill);
    background: var(--noc-ink-muted);
}
.docs_method.is_get { background: var(--st-ok); }
.docs_method.is_post { background: var(--noc-indigo); }
.docs_method.is_put, .docs_method.is_patch { background: var(--st-info); }
.docs_method.is_delete { background: var(--st-error); }
.docs_body .docs_path { flex: 1 1 auto; min-width: 0; background: transparent; padding: 0; font-size: 14px; color: var(--noc-ink); overflow-wrap: anywhere; }

/* Parameter rows: name, type, description */
.docs_body li.docs_param { list-style: none; margin: 0 0 4px -24px; padding: 10px 0; border-top: 1px solid var(--noc-line); }
.docs_body ul > li.docs_param:first-child { border-top: 0; }
.docs_param_head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.docs_body .docs_param_name { font-weight: bold; font-size: 14px; }
.docs_param_type { font-size: 12px; font-weight: 600; color: var(--noc-ink-muted); }
.docs_param_opt { font-size: 11px; font-weight: bold; padding: 1px 6px; border-radius: var(--noc-radius-sm); background: var(--doc-inline-bg); color: var(--noc-indigo); }
/* Outlined rather than tinted: 11px bold --st-error on its 12% tint measured 4.03:1, and on the page's own white it
   clears 4.5 while the outline in its own colour keeps it a chip beside the optional one */
.docs_param_req { background: transparent; color: var(--st-error); box-shadow: inset 0 0 0 1px currentColor; }
.docs_param_desc { display: block; font-size: 15px; }
.docs_body li.docs_param > ul { margin: 8px 0 0 18px; padding-left: 0; border-left: 2px solid var(--noc-line); }
.docs_body li.docs_param > ul > li.docs_param { margin-left: 0; padding-left: 14px; border-top-color: transparent; }

/* A phone: the API's field tables are three columns of which the first holds identifiers up to 35 characters long
   (ENABLE_ACCESS_CONTROL_ORIGIN_HEADER), which no 390px screen holds whole beside a type and a meaning. The table
   tightens, and the field name may wrap where it must, rather than the last column being cut at the screen edge. */
@media (max-width: 640px) {
    .docs_body table { font-size: 13px; }
    .docs_body th, .docs_body td { padding: 8px; }
    /* 44%: every single name up to 18 characters stays whole (measured over the API's zone table at 390px), and
       only ADD_CANONICAL_HEADER and longer break */
    .docs_body th:first-child, .docs_body td:first-child { width: 44%; padding-left: 0; overflow-wrap: anywhere; }
}