/* ================================================================
 CMMC Desk — Shared Style Layer (cmmc.css)
 Deretti Cyber Labs · site/cmmc/
 --------------------------------------------------------------
 Consolidated 2026-07-08/09 from 27 pages' duplicated inline
 <style> blocks (design remediation, spec:
 drafts/working-notes/cmmc-design-review-2026-07-08.md).
 Loads AFTER brand.css / site.css / components.css.

 Scope discipline: component rules below are prefixed with
 .doc-wrap wherever the component only ever appears inside the
 desk's main content column. This is deliberate — it keeps this
 file from leaking into the shared .sitefoot / .callout--disclaimer
 markup that lives OUTSIDE .doc-wrap (that footer disclaimer must
 keep drawing from components.css's site-wide flat .callout, not
 this file's desk-specific .callout treatment). Nav/breadcrumb/
 footer chrome is untouched by this file.

 Grid width (H2) and body font-family (M8): deliberately UNCHANGED
 from the desk's existing 1080px .doc-wrap / sans body — this
 matches /quantum/'s own Template B pattern exactly (verified
 2026-07-08 parity check), so the desk keeps matching its sibling.
 The 1080-vs-1180 inset and the sans-vs-serif split from the
 global default are SITE-WIDE findings, not CMMC-desk defects —
 see the remediation report for the site-stream note.
 ================================================================ */

/* ---------- CMMC-scoped literal tokens ----------
 Per the site's existing SVG literal-hex convention (see
 system.html's diagram): a documented one-off hex where no
 existing token fits. --cmmc-draftbanner-bg is a dark-amber
 background distinct from --warn (which is a bright label/accent
 amber, not intended as a large-surface background). */
:root {
 --cmmc-draftbanner-bg: #7a4a00;
}

/* ================================================================
 TEMPLATE B — document / whitepaper shell
 ================================================================ */
html, body { background: var(--navy); }
body { font-family: var(--display); color: var(--d-text); font-size: 11.25pt; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.doc-wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

.draftbanner { background: var(--cmmc-draftbanner-bg); color: #fff; font-family: var(--mono); font-size: 9.5pt; letter-spacing: 0.08em; text-align: center; padding: 8px 16px; }

.doc-hero { padding: 64px 0 36px; border-bottom: 1px solid var(--navy-line); }
.doc-hero .docnum { font-family: var(--mono); font-size: 10pt; color: var(--signal); letter-spacing: 0.18em; text-transform: uppercase; }
.doc-hero h1 { font-size: 56pt; line-height: 0.94; letter-spacing: -0.03em; font-weight: 800; color: var(--d-text); margin: 18px 0 0; max-width: none; }
.doc-hero h1 .dot { color: var(--signal); }
.doc-hero .subtitle { font-family: var(--serif); font-style: italic; font-size: 17pt; color: var(--d-text-2); margin: 16px 0 0; line-height: 1.35; max-width: none; }
.doc-hero .lede { font-family: var(--serif); font-size: 13.5pt; color: var(--d-text-2); line-height: 1.6; margin: 22px 0 0; max-width: none; }

/* M3 — .doc-meta: 4-col desktop, 2-col <=600px, 1-col <=400px */
.doc-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--navy-line); font-family: var(--display); font-size: 9pt; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-muted); }
.doc-meta b { display: block; color: var(--d-text); font-family: var(--mono); font-size: 10.5pt; text-transform: none; letter-spacing: 0; margin-top: 4px; font-weight: 500; }

.sec { padding: 44px 0 8px; }
/* C1 — section headings were inheriting brand.css's near-black h1-h4{color:var(--ink)}
 on the desk's navy background (~1.05:1 contrast). Explicit color, matching the
 mechanism /quantum/ uses in its own Template B block (per-element, not .page--dark). */
.sec > h2 { font-size: 22pt; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 6px; color: var(--d-text); }
.sec > h2 .k { color: var(--signal); font-family: var(--mono); font-size: 12pt; letter-spacing: 0.14em; margin-right: 12px; }
.sec > h3 { font-size: 14pt; font-weight: 700; margin: 26px 0 6px; color: var(--d-text); }
.sec p { color: var(--d-text-2); max-width: none; }
.sec p strong { color: var(--d-text); }
.sec ul, .sec ol { color: var(--d-text-2); padding-left: 22px; max-width: none; }
.sec li { margin: 6px 0; }
.sec li::marker { color: var(--signal); }
.sec .lede-note { font-family: var(--serif); font-style: italic; color: var(--d-text-2); }

/* M2 — .ruleblock: source side ("The rule says") was muted while "In practice" was
 bright signal-green — backwards for a source-traceable desk. Swapped so the source
 side carries the --signal emphasis and the practice side is muted. */
.ruleblock { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--navy-line); border-radius: 10px; overflow: hidden; margin: 18px 0; }
.ruleblock > div { padding: 16px 20px; }
.ruleblock .rule { background: rgba(255,255,255,0.03); border-right: 1px solid var(--navy-line); margin: 0; height: auto; } /* Session J: neutralize brand.css global .rule divider (height:1px; margin:18px 0) leaking onto this panel via class-name collision — showed as a band/"shadow" above the label and pushed it below "In practice" */
.ruleblock .rb-h { font-family: var(--mono); font-size: 8.5pt; letter-spacing: 0.16em; text-transform: uppercase; color: var(--d-muted); margin: 0 0 8px; }
.ruleblock .rule .rb-h { color: var(--d-muted); } /* Session J F1: both labels gray to match "In practice" (reverses M2 source-side green emphasis, per owner rendered review) */
.ruleblock p { font-size: 10.5pt; margin: 0; max-width: none; }
.ruleblock .rule p:not(.rb-h) { font-family: var(--serif); } /* Session J F1: exclude the .rb-h label so it renders mono like the "In practice" label (was inheriting serif from this rule) */
.ruleblock cite { display: block; font-family: var(--mono); font-size: 8.5pt; color: var(--d-muted); font-style: normal; margin-top: 10px; }
@media (max-width: 720px) { .ruleblock { grid-template-columns: 1fr; } .ruleblock .rule { border-right: 0; border-bottom: 1px solid var(--navy-line); } }

table.ref { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 10.5pt; }
table.ref th { font-family: var(--mono); font-size: 8.5pt; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-muted); text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--d-text); }
table.ref td { padding: 10px 12px; border-bottom: 1px solid var(--navy-line); color: var(--d-text-2); vertical-align: top; }
table.ref td b, table.ref td strong { color: var(--d-text); }
table.ref tr:hover td { background: rgba(255,255,255,0.02); }

/* M1 — .callout: was redefining the site's flat-callout identity with a heavy
 8px border-radius on top of a left accent bar (the treatment the base system
 deliberately dropped). Flattened to radius 0, kept the left-bar identity
 (matches /quantum/'s own .reviewed-note left-bar pattern). Scoped to .doc-wrap
 so this never touches the footer's callout--disclaimer, which is OUTSIDE
 .doc-wrap and correctly inherits the site-wide flat box from components.css. */
.doc-wrap .callout { border: 0; border-left: 3px solid var(--signal); border-radius: 0; background: rgba(255,255,255,0.02); padding: 14px 20px; margin: 18px 0; max-width: none; }
.doc-wrap .callout__label { font-family: var(--mono); font-size: 8.5pt; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); display: block; margin-bottom: 6px; }
.doc-wrap .callout p { font-size: 10.5pt; margin: 0; max-width: none; }
/* .callout--shop keeps a distinct identity via the --warn token (was off-token #d4a017). */
.doc-wrap .callout--shop { border-left-color: var(--warn); }
.doc-wrap .callout--shop .callout__label { color: var(--warn); }

/* ================================================================
 Glossary (glossary.html) — quantum-parity layout (Session J; owner
 request: match /quantum/foundation/glossary.html look/feel). Adapted
 from quantum's page-local glossary CSS into this shared sheet, SCOPED
 to the glossary page via body[data-doc-id="cmmc-glossary"] so the generic
 component names (.term/.name/.alphabar/.letter-head/.acronym-tbl) can
 never leak onto other desk pages (cf. the .rule collision). Desk
 conventions kept vs quantum: hero stays 56pt (unchanged), body text
 stays full-width (no 70ch measure), and .src is NOT uppercased so
 regulatory citation case stays accurate.
 ================================================================ */
body[data-doc-id="cmmc-glossary"] .alphabar { margin: 32px 0 0; padding: 16px 0; border-top: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line); display: flex; flex-wrap: wrap; gap: 8px 6px; font-family: var(--mono); font-size: 10pt; letter-spacing: 0.08em; }
body[data-doc-id="cmmc-glossary"] .alphabar a { color: var(--signal); text-decoration: none; padding: 4px 8px; border: 1px solid var(--navy-line); border-radius: 2px; }
body[data-doc-id="cmmc-glossary"] .alphabar a:hover { background: var(--signal); color: var(--navy); }
body[data-doc-id="cmmc-glossary"] .alphabar .lbl { font-family: var(--display); font-size: 8.5pt; letter-spacing: 0.16em; color: var(--d-muted); text-transform: uppercase; padding: 4px 8px 4px 0; }

body[data-doc-id="cmmc-glossary"] .acronym-tbl { width: 100%; border-collapse: collapse; margin-top: 36px; font-family: var(--mono); font-size: 11pt; }
body[data-doc-id="cmmc-glossary"] .acronym-tbl caption { text-align: left; font-family: var(--display); font-size: 9pt; letter-spacing: 0.16em; text-transform: uppercase; color: var(--d-muted); margin: 0 0 10px; }
body[data-doc-id="cmmc-glossary"] .acronym-tbl th, body[data-doc-id="cmmc-glossary"] .acronym-tbl td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--navy-line); vertical-align: top; }
body[data-doc-id="cmmc-glossary"] .acronym-tbl th { font-family: var(--display); font-size: 8.5pt; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-muted); font-weight: 600; }
body[data-doc-id="cmmc-glossary"] .acronym-tbl td.k { color: var(--signal); white-space: nowrap; }
body[data-doc-id="cmmc-glossary"] .acronym-tbl td.v { color: var(--d-text); font-family: var(--serif); font-size: 12pt; }

body[data-doc-id="cmmc-glossary"] .letter-head { margin-top: 48px; padding: 12px 0; border-top: 2px solid var(--d-text); font-family: var(--mono); font-size: 24pt; letter-spacing: 0.04em; color: var(--signal); }

body[data-doc-id="cmmc-glossary"] .term { padding: 22px 0; border-bottom: 1px solid var(--navy-line); }
body[data-doc-id="cmmc-glossary"] .term .name { font-family: var(--display); font-size: 18pt; font-weight: 800; color: var(--d-text); letter-spacing: -0.01em; margin: 0 0 4px; line-height: 1.15; }
body[data-doc-id="cmmc-glossary"] .term .name .full { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 14pt; color: var(--d-text-2); margin-left: 8px; }
body[data-doc-id="cmmc-glossary"] .term .plain { font-family: var(--serif); font-size: 12.5pt; color: var(--d-text); line-height: 1.6; margin: 8px 0 8px; max-width: none; }
body[data-doc-id="cmmc-glossary"] .term .g-meta { font-size: 10.5pt; color: var(--d-text-2); margin-top: 6px; max-width: none; }
body[data-doc-id="cmmc-glossary"] .term .g-meta b { color: var(--d-text); font-weight: 700; }
body[data-doc-id="cmmc-glossary"] .term .src { font-family: var(--mono); font-size: 8.5pt; letter-spacing: 0.08em; color: var(--d-muted); margin-top: 10px; }
body[data-doc-id="cmmc-glossary"] .term:target { background: rgba(255,255,255,0.025); padding-left: 16px; padding-right: 16px; border-left: 3px solid var(--signal); }

@media (max-width: 960px) { body[data-doc-id="cmmc-glossary"] .letter-head { font-size: 20pt; } }

.familyline { font-family: var(--serif); font-style: italic; color: var(--d-text-2); font-size: 11pt; margin: 18px 0 0; max-width: none; }

/* ---------- r-planned (domains/index.html status column) ---------- */
.r-planned { color: var(--d-muted); }

/* ================================================================
 Index / desk-map components (index.html)
 ================================================================ */
.ternary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--navy-line); border-radius: 10px; overflow: hidden; margin: 18px 0; }
.ternary__panel { padding: 18px 20px; border-right: 1px solid var(--navy-line); }
.ternary__panel:last-child { border-right: 0; }
.ternary__label { font-family: var(--mono); font-size: 8.5pt; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); margin: 0 0 8px; }
.ternary__panel p:last-child { font-size: 10.5pt; margin: 0; color: var(--d-text-2); max-width: none; }
@media (max-width: 720px) { .ternary { grid-template-columns: 1fr; } .ternary__panel { border-right: 0; border-bottom: 1px solid var(--navy-line); } .ternary__panel:last-child { border-bottom: 0; } }

.readercards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0; }
.readercard { display: block; border: 1px solid var(--navy-line); border-radius: 10px; padding: 16px 18px; text-decoration: none; }
.readercard:hover { border-color: var(--signal); }
.readercard__role { font-family: var(--mono); font-size: 8.5pt; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); margin: 0 0 8px; }
.readercard__q { font-family: var(--serif); font-style: italic; color: var(--d-text); font-size: 12.5pt; margin: 0; max-width: none; }
@media (max-width: 720px) { .readercards { grid-template-columns: 1fr; } }

/* ================================================================
 Route cards (start-here.html)
 ================================================================ */
.routecard { border: 1px solid var(--navy-line); border-radius: 10px; padding: 20px 22px; margin: 18px 0; }
/* C1 */
.routecard h3 { margin: 0 0 12px; font-size: 15pt; letter-spacing: -0.01em; color: var(--d-text); }
.routecard .r-meta { font-family: var(--mono); font-size: 8.5pt; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); margin: 0 0 6px; }
.routecard p { font-size: 10.5pt; }
.routecard ol { margin: 6px 0 0; font-size: 10.5pt; }
.routecard .r-planned { color: var(--d-muted); }
/* L3 — route card text: was 60ch, now full-width per Session H owner review. */
.doc-wrap .routecard p, .doc-wrap .routecard ol { max-width: none; }

/* ================================================================
 Diagram figure (system.html)
 ================================================================ */
.doc-fig { margin: 30px 0 10px; }
/* H5/D2 — horizontally-scrollable wrapper so the diagram degrades to a scroll
 instead of shrinking illegible at small viewports. */
.doc-fig-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doc-fig-scroll svg { min-width: 560px; width: 100%; height: auto; display: block; }
.doc-fig figcaption { margin-top: 10px; font-family: var(--mono); font-size: 9pt; line-height: 1.5; color: var(--d-muted); max-width: none; }
/* D5 — one-line "how to read this" note above the figure. */
.doc-fig-howto { font-family: var(--mono); font-size: 9pt; color: var(--d-muted); margin: 14px 0 0; letter-spacing: 0.02em; }
/* D2 — mobile scroll hint, hidden above the breakpoint where the wrapper
 actually needs to scroll. */
.doc-fig-hint { display: none; font-family: var(--mono); font-size: 8pt; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-muted); margin: 0 0 8px; }
@media (max-width: 720px) {
 .doc-fig-hint { display: block; }
}

/* ================================================================
 Myths (myths.html) — deliberately NOT signal-green so a myth
 panel can never be mistaken for the desk's own claim.
 ================================================================ */
.mythitem { margin: 30px 0 8px; }
.mythitem__num { font-family: var(--mono); font-size: 8.5pt; letter-spacing: 0.16em; text-transform: uppercase; color: var(--d-muted); margin: 0 0 8px; }
.mythblock { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--navy-line); border-radius: 10px; overflow: hidden; }
.mythblock > div { padding: 16px 20px; }
.mythblock .myth { background: rgba(196,70,58,0.08); border-right: 1px solid var(--navy-line); }
.mythblock .mb-h { font-family: var(--mono); font-size: 8.5pt; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 8px; }
.mythblock .myth .mb-h { color: #d3776c; }
.mythblock .myth .mb-h::before { content: "\2715 "; }
.mythblock .rule2 .mb-h { color: var(--signal); }
.mythblock p { font-size: 10.5pt; margin: 0; max-width: none; }
.mythblock .myth p { font-family: var(--serif); font-style: italic; color: var(--d-text-2); }
.mythblock cite { display: block; font-family: var(--mono); font-size: 8.5pt; color: var(--d-muted); font-style: normal; margin-top: 10px; }
@media (max-width: 720px) { .mythblock { grid-template-columns: 1fr; } .mythblock .myth { border-right: 0; border-bottom: 1px solid var(--navy-line); } }

/* ================================================================
 FAQ (faq.html)
 ================================================================ */
.faqlist { margin: 8px 0 0; padding: 0; list-style: none; }
.faqitem { padding: 20px 0; border-bottom: 1px solid var(--navy-line); }
.faqitem:first-child { padding-top: 4px; }
.faqitem:last-child { border-bottom: 0; }
/* C1 */
.faqitem h3 { font-size: 14pt; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; color: var(--d-text); }
.faqitem .faq-num { font-family: var(--mono); font-size: 10pt; color: var(--signal); margin-right: 10px; letter-spacing: 0.06em; }
.faqitem p { font-size: 10.75pt; color: var(--d-text-2); margin: 0; max-width: none; }
.faqitem cite { display: block; font-family: var(--mono); font-size: 8.5pt; color: var(--d-muted); font-style: normal; margin-top: 8px; }

/* ================================================================
 H1 — house inline-link style (desk-scoped; no default-blue links
 anywhere on the desk). Excludes .readercard, the only <a> inside
 .doc-wrap styled as a card component rather than an inline link.
 ================================================================ */
.doc-wrap a:not(.readercard) {
 color: var(--signal);
 text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 3px;
}
.doc-wrap a:not(.readercard):visited { color: var(--signal); }
.doc-wrap a:not(.readercard):hover { color: var(--d-text); text-decoration-thickness: 2px; }
.doc-wrap a:not(.readercard):focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 2px; }

/* ================================================================
 H4 — domain chip-row. Sits directly under the breadcrumb on the
 14 domain family pages (site/cmmc/domains/*.html, excluding
 domains/index.html). Lives outside .doc-wrap (it's chrome, not
 body content) so it gets its own top-level max-width match.
 ================================================================ */
.domainchips { background: var(--navy-2); border-bottom: 1px solid var(--navy-line); }
.domainchips__inner {
 max-width: 1080px; margin: 0 auto; padding: 10px 32px;
 display: flex; gap: 6px; overflow-x: auto;
}
.domainchip {
 font-family: var(--mono); font-size: 9pt; letter-spacing: 0.08em; text-transform: uppercase;
 color: var(--d-text-2); border: 1px solid var(--navy-line);
 padding: 5px 10px; text-decoration: none; white-space: nowrap; flex-shrink: 0;
 transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.domainchip:hover { border-color: var(--signal); color: var(--d-text); }
.domainchip.is-current { border-color: var(--signal); color: var(--signal); background: rgba(97,194,103,0.08); }
@media (max-width: 900px) { .domainchips__inner { padding: 10px 22px; } }

/* ================================================================
 M5 — subnav edge-fade scroll affordance, desk-scoped only via the
 body[data-doc-id^="cmmc"] attribute (every CMMC page's data-doc-id
 starts "cmmc-"). Global .subnav behavior elsewhere is untouched.
 ================================================================ */
@media (max-width: 900px) {
 body[data-doc-id^="cmmc"] .subnav__inner {
 mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 28px), transparent 100%);
 -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 28px), transparent 100%);
 }
}

/* ================================================================
 Responsive — M3 doc-meta, M4 doc-hero h1 mobile step, plus the
 960px parity step /quantum/'s own Template B already carries
 (padding + h1 step) that the desk was missing entirely.
 ================================================================ */
@media (max-width: 960px) {
 .doc-wrap { padding: 0 22px; }
 .doc-hero h1 { font-size: 50pt; }
}
@media (max-width: 600px) {
 .doc-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
 /* M4 */
 .doc-hero h1 { font-size: 36pt; }
}
@media (max-width: 400px) {
 .doc-meta { grid-template-columns: 1fr; }
}

/* ================================================================
 Trivial stray-inline-style migration (M7 cleanup): two patterns
 repeated 19x across the desk as bare style="" attributes on <p>
 and <span class="mono"> --- promoted to classes here. The many
 <cite style="display:inline;"> one-offs were left as-is (each is
 a single-property override on a specific citation, not a shared
 design pattern) -- deferred, see remediation report.
 ================================================================ */
.doc-wrap .note-muted { font-size: 10pt; color: var(--d-muted); max-width: none; }
.doc-wrap .mono-sub { font-size: 8.5pt; color: var(--d-muted); }

/* ================================================================
 Session H remediation — shared rules (2026-07-08)
 ================================================================ */

/* F2 — doc-meta bar removed from markup; hide just in case */
.doc-meta { display: none; }


/* F5 — reader card role labels: more visual weight */
.readercard__role { font-weight: 700; font-size: 9.5pt; }

/* ================================================================
 Session J remediation — owner rendered review (2026-07-08)
 ================================================================ */

/* F2 — phase table (system.html §04): the wide "What's new" column was
   squeezing "Phase" and "Starts" so "Phase 2/3/4" wrapped (system.html §04); also levels.html §02 ("Level 2/3", "Higher-risk CUI").
   Shrink cols 1-2 to content width and stop them wrapping; "What's new"
   absorbs the remaining width. Scoped to .ref--fitcols so no other
   .ref table is affected. */
.ref--fitcols th:nth-child(1), .ref--fitcols td:nth-child(1),
.ref--fitcols th:nth-child(2), .ref--fitcols td:nth-child(2) {
 width: 1%;
 white-space: nowrap;
}

/* ================================================================
   At-a-glance quick facts on family pages (feedback batch 2026-07-09).
   Reference panel identity (full hairline border), deliberately distinct
   from the desk's left-bar .callout identity. */
.doc-wrap .quickfacts { border: 1px solid var(--navy-line); background: rgba(255,255,255,0.02); padding: 18px 22px 16px; margin: 26px 0 4px; }
.doc-wrap .quickfacts .qf-h { font-family: var(--mono); font-size: 8.5pt; letter-spacing: 0.16em; text-transform: uppercase; color: var(--d-muted); font-weight: 500; margin: 0 0 12px; }
.doc-wrap .quickfacts dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
.doc-wrap .quickfacts dt { font-family: var(--mono); font-size: 8.5pt; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); padding-top: 3px; white-space: nowrap; }
.doc-wrap .quickfacts dd { margin: 0; font-size: 10.5pt; line-height: 1.55; color: var(--d-text-2); }
.doc-wrap .quickfacts dd b { color: var(--d-text); }
.doc-wrap .quickfacts dd cite { display: inline; font-family: var(--mono); font-style: normal; font-size: 8.5pt; color: var(--d-muted); }
@media (max-width: 640px) {
  .doc-wrap .quickfacts dl { grid-template-columns: 1fr; gap: 2px; }
  .doc-wrap .quickfacts dd { margin: 0 0 9px; }
}