/* ══════════════════════════════════════════════════════════════════════════
   AI CHEAT SHEETS — DETAIL-PAGE kit  (.csp-*)

   ⚠ SCOPE: this sheet styles ONE surface — /cheat-sheet/{slug} (and the print
   view it shares). It does NOT style the hub or the category/tag archives:
   those were rebuilt on /ai-directory's LIVE sheet
   (assets/css/ext/v2-public-directory-listing.css) plus the module delta
   assets/css/ext/public-cheat-sheets.css. A LISTING rule added here does
   nothing. The listing kit that used to live here — hero, search, quick
   chips, stat tiles, filter bar, cards, empty state — was deleted once the
   markup that used it was gone (46 rules, -23%).
   Loaded after custom.{dir}.css: every colour here resolves from the --aits-*
   tokens declared there, so the module inherits the site theme (including the
   client-side dark toggle) instead of re-declaring a palette.

   Direction-agnostic (logical properties throughout) so there is no ltr/rtl
   pair to keep in sync.

   Structure
     1. tokens + shell            5. detail: hero, TOC, sections
     3. grids + chips + pips      6. reference blocks (table/code/prompt/API)
     4. selects + counts          7. responsive
                                  8. print
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
.csp {
    --csp-a1: #3680ED;                 /* brand blue  */
    --csp-a2: #6366F1;                 /* indigo tail */
    --csp-grad: linear-gradient(90deg, var(--csp-a1), var(--csp-a2));
    --csp-radius: 18px;
    --csp-radius-sm: 12px;
    --csp-gap: 18px;
    --csp-ease: cubic-bezier(.22, .61, .36, 1);
    --csp-code-bg: #0E1B3A;
    --csp-code-ink: #E6EDF7;

    display: block;
    color: var(--aits-ink);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body.theme-dark .csp {
    --csp-a1: #60A4F5;
    --csp-a2: #818CF8;
    --csp-code-bg: #0B1226;
}

.csp-wrap {
    max-width: var(--seo-shell-max, 1600px);
    margin-inline: auto;
    padding-left: max(var(--seo-shell-pad, 24px), env(safe-area-inset-left));
    padding-right: max(var(--seo-shell-pad, 24px), env(safe-area-inset-right));
}
.csp-section { margin-block: 46px; }
.csp-section:first-of-type { margin-block-start: 28px; }

/* Shared heading block */
.csp-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-block-end: 20px;
}
.csp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--aits-blue-dark);
}
body.theme-dark .csp-eyebrow { color: var(--aits-blue-light); }
.csp-eyebrow::before {
    content: ''; inline-size: 18px; block-size: 3px; border-radius: 999px;
    background: var(--csp-grad); flex: none;
}
.csp-h2 {
    font-size: clamp(21px, 2.4vw, 27px); font-weight: 800;
    letter-spacing: -.02em; line-height: 1.2;
    color: var(--aits-ink); margin: 6px 0 0;
}
.csp-sub {
    font-size: 13.5px; color: var(--aits-mut);
    line-height: 1.5; margin: 6px 0 0; max-inline-size: 68ch;
}

/* ── 3. Grids, chips, difficulty pips ──────────────────────────────────── */
.csp-grid {
    display: grid; gap: var(--csp-gap);
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
.csp-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Meta chips */
.csp-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
    background: var(--aits-surface-3); color: var(--aits-mut);
    border: 1px solid var(--aits-line);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s, color .18s, border-color .18s;
}
a.csp-chip:hover { background: var(--aits-blue-tint); color: var(--aits-blue-dark); border-color: var(--aits-blue-line); }
body.theme-dark a.csp-chip:hover { color: var(--aits-blue-light); }
.csp-chip.is-cat { background: var(--aits-blue-tint); color: var(--aits-blue-dark); border-color: transparent; }
body.theme-dark .csp-chip.is-cat { color: var(--aits-blue-light); }

/* Difficulty badge — pips carry the meaning, colour only reinforces (WCAG 1.4.1) */
.csp-pips { display: inline-flex; gap: 3px; }
.csp-pip { inline-size: 5px; block-size: 5px; border-radius: 999px; background: var(--aits-line-strong); }
.csp-pip.is-on { background: var(--csp-a1); }

/* ── 4. Selects + counts (detail: related/resources controls) ──────────── */
.csp-select {
    appearance: none;
    padding: 9px 34px 9px 12px; border-radius: 10px;
    border: 1px solid var(--aits-line); background: var(--aits-surface-2);
    color: var(--aits-ink); font: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.csp-select:focus-visible { outline: 2px solid var(--aits-blue); outline-offset: 2px; }
.csp-count { font-size: 13px; font-weight: 600; color: var(--aits-mut); }

/* ── 5. Detail page ────────────────────────────────────────────────────── */
.csp-detail-grid {
    display: grid; gap: 30px;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
}
.csp-toc {
    position: sticky; inset-block-start: calc(var(--hd-h, 76px) + 16px);
    max-block-size: calc(100vh - var(--hd-h, 76px) - 40px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 16px; border-radius: var(--csp-radius);
    border: 1px solid var(--aits-line); background: var(--aits-card);
    scrollbar-width: thin;
}
.csp-toc-title {
    font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--aits-blue-dark); margin-block-end: 12px;
    display: flex; align-items: center; gap: 8px;
}
body.theme-dark .csp-toc-title { color: var(--aits-blue-light); }
.csp-toc-title::before { content: ''; inline-size: 14px; block-size: 3px; border-radius: 999px; background: var(--csp-grad); flex: none; }
.csp-toc a {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 10px;
    font-size: 12.5px; font-weight: 600; line-height: 1.35;
    color: var(--aits-txt); text-decoration: none;
    border-inline-start: 2px solid transparent;
    transition: background-color .18s, color .18s, border-color .18s;
}
.csp-toc a:hover { background: var(--aits-blue-tint-2); color: var(--aits-blue-dark); }
body.theme-dark .csp-toc a:hover { color: var(--aits-blue-light); }
.csp-toc a.is-active {
    background: var(--aits-blue-tint-2);
    border-inline-start-color: var(--csp-a1);
    color: var(--aits-blue-dark);
}
body.theme-dark .csp-toc a.is-active { color: var(--aits-blue-light); }

/* Detail hero */
.csp-dhero {
    padding: 26px; border-radius: 22px;
    border: 1px solid var(--aits-line);
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(54,128,237,.07), transparent 58%),
        var(--aits-card);
    margin-block-end: 24px;
}
body.theme-dark .csp-dhero { background: radial-gradient(120% 100% at 100% 0%, rgba(96,164,245,.10), transparent 58%), var(--aits-card); }
.csp-dhero h1 {
    font-size: clamp(26px, 3.6vw, 40px); font-weight: 900;
    letter-spacing: -.03em; line-height: 1.12;
    margin: 12px 0 0; color: var(--aits-ink);
}
.csp-dhero-sub { font-size: 15px; color: var(--aits-txt); line-height: 1.55; margin: 10px 0 0; max-inline-size: 74ch; }
.csp-dhero-meta {
    display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
    margin-block-start: 16px; padding-block-start: 16px;
    border-block-start: 1px solid var(--aits-line);
    font-size: 12px; font-weight: 600; color: var(--aits-mut);
}
.csp-dhero-meta > span { display: inline-flex; align-items: center; gap: 6px; }

/* Action bar */
.csp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 18px; }
.csp-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 12px;
    font: inherit; font-size: 13px; font-weight: 700; letter-spacing: -.005em;
    cursor: pointer; text-decoration: none;
    border: 1px solid var(--aits-blue-line);
    background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2));
    color: var(--aits-blue-dark);
    box-shadow: 0 1px 0 rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.6);
    transition: transform .18s var(--csp-ease), background .22s, border-color .2s, box-shadow .22s, color .2s;
}
body.theme-dark .csp-btn {
    color: var(--aits-blue-light);
    background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.csp-btn:hover, .csp-btn:focus-visible {
    transform: translateY(-1px);
    border-color: var(--aits-blue);
    background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-blue-tint));
    box-shadow: 0 10px 22px -14px rgba(54,128,237,.55);
}
.csp-btn svg { flex: none; }
.csp-btn.is-primary {
    background: linear-gradient(135deg, #3680ED, #4F46E5);
    border-color: transparent; color: #fff;
    box-shadow: 0 14px 26px -12px rgba(54,128,237,.6), inset 0 1px 0 rgba(255,255,255,.2);
}
.csp-btn.is-primary:hover { background: linear-gradient(135deg, #2060C0, #4338CA); color: #fff; }
.csp-btn.is-on { background: var(--aits-blue); border-color: transparent; color: #fff; }

/* ── 6. Reference blocks ───────────────────────────────────────────────── */
.csp-block {
    border-radius: var(--csp-radius);
    border: 1px solid var(--aits-line);
    background: var(--aits-card);
    margin-block-end: 20px;
    overflow: hidden;
    scroll-margin-block-start: calc(var(--hd-h, 76px) + 20px);
}
.csp-block-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
    border-block-end: 1px solid var(--aits-line);
    background: linear-gradient(180deg, var(--aits-surface-2), var(--aits-card));
}
.csp-block-ico {
    inline-size: 36px; block-size: 36px; border-radius: 11px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--aits-blue-tint); color: var(--aits-blue-dark);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
body.theme-dark .csp-block-ico { color: var(--aits-blue-light); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.csp-block-title { font-size: 16.5px; font-weight: 800; letter-spacing: -.015em; color: var(--aits-ink); flex: 1; min-inline-size: 0; }
.csp-block-intro { padding: 14px 18px 0; font-size: 13.5px; color: var(--aits-mut); line-height: 1.6; }
.csp-block-body { padding: 16px 18px; }
.csp-prose { font-size: 14.5px; line-height: 1.7; color: var(--aits-txt); }
.csp-prose p { margin: 0 0 12px; }
.csp-prose :is(h3, h4) { color: var(--aits-ink); font-weight: 800; letter-spacing: -.015em; margin: 18px 0 8px; }
.csp-prose code { font-size: .92em; padding: 2px 6px; border-radius: 6px; background: var(--aits-surface-3); color: var(--aits-blue-dark); }
body.theme-dark .csp-prose code { color: var(--aits-blue-light); }

/* Reference table — scrolls inside itself, never the page */
.csp-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.csp-table { inline-size: 100%; border-collapse: collapse; font-size: 13.5px; }
.csp-table thead th {
    text-align: start; padding: 11px 14px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--aits-mut);
    background: var(--aits-surface-2);
    border-block-end: 1px solid var(--aits-line);
    white-space: nowrap;
}
.csp-table tbody td { padding: 11px 14px; border-block-end: 1px solid var(--aits-line-soft, var(--aits-line)); vertical-align: top; line-height: 1.5; }
.csp-table tbody tr:last-child td { border-block-end: 0; }
.csp-table tbody tr { transition: background-color .16s; }
.csp-table tbody tr:hover { background: var(--aits-blue-tint-2); }
.csp-table td:first-child { color: var(--aits-ink); font-weight: 600; }
.csp-code-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; font-weight: 600;
    padding: 3px 8px; border-radius: 7px;
    background: var(--aits-surface-3); color: var(--aits-blue-dark);
    display: inline-block; word-break: break-word;
}
body.theme-dark .csp-code-cell { color: var(--aits-blue-light); }

/* Checklist */
.csp-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.csp-check {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px; border-radius: var(--csp-radius-sm);
    border: 1px solid var(--aits-line); background: var(--aits-surface-2);
    transition: border-color .18s, background-color .18s;
}
.csp-check:hover { border-color: var(--aits-blue-line); background: var(--aits-blue-tint-2); }
.csp-check-mark {
    inline-size: 20px; block-size: 20px; border-radius: 6px; flex: none; margin-block-start: 1px;
    border: 2px solid var(--aits-line-strong);
    display: inline-flex; align-items: center; justify-content: center;
    color: transparent;
}
.csp-check.is-done .csp-check-mark { background: var(--csp-a1); border-color: var(--csp-a1); color: #fff; }
.csp-check-t { font-size: 13.5px; font-weight: 700; color: var(--aits-ink); line-height: 1.35; }
.csp-check-d { font-size: 12.5px; color: var(--aits-mut); line-height: 1.5; margin-block-start: 3px; }

/* Callout */
.csp-callout {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 18px; border-radius: var(--csp-radius);
    border: 1px solid var(--aits-blue-line);
    background: var(--aits-blue-tint-2);
    border-inline-start-width: 4px;
    font-size: 14px; line-height: 1.6; color: var(--aits-txt);
}
.csp-callout[data-type="warning"] { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.07); }
.csp-callout[data-type="danger"]  { border-color: rgba(244,63,94,.45);  background: rgba(244,63,94,.06); }
.csp-callout[data-type="success"] { border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.06); }
.csp-callout-ico { flex: none; inline-size: 22px; block-size: 22px; color: var(--aits-blue); }
.csp-callout[data-type="warning"] .csp-callout-ico { color: #D97706; }
.csp-callout[data-type="danger"]  .csp-callout-ico { color: #E11D48; }
.csp-callout[data-type="success"] .csp-callout-ico { color: #059669; }

/* Code block */
.csp-code { border-radius: var(--csp-radius-sm); overflow: hidden; border: 1px solid var(--aits-line); margin-block-end: 14px; }
.csp-code-head {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: var(--aits-surface-3);
    border-block-end: 1px solid var(--aits-line);
    font-size: 11.5px; font-weight: 700; color: var(--aits-mut);
}
.csp-lang {
    padding: 3px 9px; border-radius: 999px;
    background: var(--aits-blue-tint); color: var(--aits-blue-dark);
    font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
body.theme-dark .csp-lang { color: var(--aits-blue-light); }
.csp-code-actions { margin-inline-start: auto; display: flex; gap: 6px; }
.csp-icon-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 8px;
    border: 1px solid var(--aits-line); background: var(--aits-card);
    color: var(--aits-txt); cursor: pointer; text-decoration: none;
    font: inherit; font-size: 11px; font-weight: 700;
    transition: background-color .18s, color .18s, border-color .18s;
}
.csp-icon-btn:hover { background: var(--aits-blue-tint); color: var(--aits-blue-dark); border-color: var(--aits-blue-line); }
body.theme-dark .csp-icon-btn:hover { color: var(--aits-blue-light); }
.csp-code pre {
    margin: 0; padding: 16px 18px; overflow-x: auto;
    background: var(--csp-code-bg); color: var(--csp-code-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.65; tab-size: 2;
}
.csp-code pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* Prompt card */
.csp-prompt {
    border-radius: var(--csp-radius); border: 1px solid var(--aits-line);
    background: var(--aits-card); overflow: hidden; margin-block-end: 16px;
}
.csp-prompt-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 16px; border-block-end: 1px solid var(--aits-line);
    background: linear-gradient(180deg, var(--aits-surface-2), var(--aits-card));
}
.csp-prompt-title { font-size: 15px; font-weight: 800; color: var(--aits-ink); letter-spacing: -.015em; flex: 1; min-inline-size: 0; }
.csp-prompt-part { padding: 14px 16px; border-block-end: 1px solid var(--aits-line-soft, var(--aits-line)); }
.csp-prompt-part:last-child { border-block-end: 0; }
.csp-prompt-label {
    font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--aits-mut); margin-block-end: 8px;
    display: flex; align-items: center; gap: 8px;
}
.csp-prompt-text {
    white-space: pre-wrap; word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; line-height: 1.65;
    padding: 12px 14px; border-radius: 10px;
    background: var(--aits-surface-3); color: var(--aits-ink);
    border: 1px solid var(--aits-line);
}
.csp-vars { display: flex; flex-direction: column; gap: 6px; }
.csp-var { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.csp-var-name {
    font-family: ui-monospace, monospace; font-weight: 700; font-size: 12px;
    padding: 2px 8px; border-radius: 6px;
    background: var(--aits-blue-tint); color: var(--aits-blue-dark); flex: none;
}
body.theme-dark .csp-var-name { color: var(--aits-blue-light); }
.csp-var-desc { color: var(--aits-mut); }

/* API block */
.csp-api { border-radius: var(--csp-radius); border: 1px solid var(--aits-line); background: var(--aits-card); overflow: hidden; margin-block-end: 16px; }
.csp-api-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-block-end: 1px solid var(--aits-line); }
.csp-method {
    font-family: ui-monospace, monospace; font-size: 11px; font-weight: 800; letter-spacing: .06em;
    padding: 5px 10px; border-radius: 7px; color: #fff; flex: none;
}
.csp-method[data-m="GET"]    { background: #059669; }
.csp-method[data-m="POST"]   { background: #3680ED; }
.csp-method[data-m="PUT"]    { background: #D97706; }
.csp-method[data-m="PATCH"]  { background: #7C3AED; }
.csp-method[data-m="DELETE"] { background: #E11D48; }
.csp-endpoint {
    font-family: ui-monospace, monospace; font-size: 13px; font-weight: 600;
    color: var(--aits-ink); word-break: break-all; flex: 1; min-inline-size: 0;
}
.csp-api-part { padding: 14px 16px; border-block-start: 1px solid var(--aits-line-soft, var(--aits-line)); }

/* Related + resources */
.csp-linklist { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.csp-link {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px; border-radius: var(--csp-radius-sm);
    border: 1px solid var(--aits-line); background: var(--aits-card);
    text-decoration: none; color: var(--aits-ink);
    transition: transform .18s var(--csp-ease), border-color .18s, box-shadow .18s;
}
.csp-link:hover { transform: translateY(-2px); border-color: var(--aits-blue-line); box-shadow: 0 12px 22px -16px rgba(54,128,237,.45); }
.csp-link-ico {
    inline-size: 34px; block-size: 34px; border-radius: 10px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--aits-blue-tint); color: var(--aits-blue-dark);
}
body.theme-dark .csp-link-ico { color: var(--aits-blue-light); }
.csp-link-t { font-size: 13px; font-weight: 700; line-height: 1.3; }
.csp-link-s { font-size: 11px; color: var(--aits-mut); margin-block-start: 2px; }

/* Toast for copy feedback */
.csp-toast {
    position: fixed; inset-block-end: 24px; inset-inline-start: 50%;
    transform: translate(-50%, 20px);
    padding: 11px 20px; border-radius: 999px;
    background: var(--aits-ink); color: var(--aits-card);
    font-size: 13px; font-weight: 700;
    box-shadow: 0 18px 34px -18px rgba(15,23,42,.6);
    opacity: 0; pointer-events: none;
    transition: opacity .22s, transform .22s var(--csp-ease);
    z-index: 9999;
}
.csp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── 7. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .csp-detail-grid { grid-template-columns: 1fr; }
    .csp-toc {
        position: static; max-block-size: none;
        display: flex; gap: 8px; overflow-x: auto; padding: 12px;
    }
    .csp-toc-title { display: none; }
    .csp-toc a { white-space: nowrap; border-inline-start: 0; border-block-end: 2px solid transparent; }
    .csp-toc a.is-active { border-block-end-color: var(--csp-a1); border-inline-start-color: transparent; }
}
@media (max-width: 640px) {
    .csp-section { margin-block: 34px; }
    .csp-grid { grid-template-columns: 1fr; }
    .csp-actions .csp-btn { flex: 1 1 auto; justify-content: center; }
    .csp-block-head { padding: 14px; }
    .csp-block-body { padding: 14px; }
    .csp-table { font-size: 12.5px; }
}

/* Respect reduced motion — every transform here is decorative */
@media (prefers-reduced-motion: reduce) {
    .csp * { transition: none !important; animation: none !important; }
.csp-link:hover,
.csp-btn:hover { transform: none; }
}

/* Focus visibility (WCAG 2.2 AA) */
.csp :focus-visible { outline: 2px solid var(--aits-blue); outline-offset: 2px; border-radius: 8px; }

/* ── 8. Print / PDF ────────────────────────────────────────────────────── */
@media print {
.csp-toc,
.csp-actions,
.csp-toast,
.aitshd,
.aitsft,
.csp-no-print { display: none !important; }

    .csp, .csp-wrap { max-inline-size: none; padding: 0; margin: 0; }
    .csp-block {
        border: 1px solid #ddd; break-inside: avoid; page-break-inside: avoid;
        margin-block-end: 14px; box-shadow: none;
    }
    .csp-block-head { background: #f6f7f9 !important; }
    .csp-code pre {
        background: #f6f7f9 !important; color: #111 !important;
        border: 1px solid #e3e5e9; white-space: pre-wrap; word-break: break-word;
    }
    .csp-dhero { border: 0; padding: 0; background: none !important; }
    .csp-dhero h1 { font-size: 24pt; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; }
    /* Internal anchors would print as noise */
    a[href^="#"]::after { content: ""; }
    .csp-table { font-size: 9.5pt; }
    .csp-table thead { display: table-header-group; }  /* repeat headers across pages */
    tr, img { break-inside: avoid; page-break-inside: avoid; }
}