/* ===========================================================================
   Datum Quality Network — content pages (method, policy, guides, sample
   report). Builds on datum.css for tokens, header, footer, buttons, notices.
   Signature element: the drawing title block at the top of every document.
   =========================================================================== */

/* --- site navigation --- */
.site-nav{display:flex;gap:20px;font-size:14px}
.site-nav a{color:var(--ink-2);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.site-nav a:hover{color:var(--accent-ink)}
.site-nav a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.btn.sm{min-height:40px;padding:0 14px;font-size:14px}
.mnav{display:none}
@media(max-width:900px){
  .site-nav{display:none}
  .mnav{display:block;border-top:1px solid var(--rule);overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mnav .wrap{display:flex;gap:20px;white-space:nowrap}
  .mnav a{font-size:14px;color:var(--ink-2);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
  .mnav a[aria-current="page"]{color:var(--ink);font-weight:600}
}

/* --- document layout --- */
.doc{padding-block:36px 72px}
.crumbs{font-size:13.5px;color:var(--ink-2);margin-bottom:18px}
.crumbs a{color:var(--accent-ink);text-underline-offset:3px}
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media(min-width:1000px){.doc-grid{grid-template-columns:minmax(0,1fr) 220px;gap:44px;align-items:start}}

/* title block — the engineering drawing signature */
.tblock{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 30px;max-width:740px;
  border:1px solid var(--ink-3);background:var(--surface);border-radius:2px;
}
.tblock > div{padding:8px 12px;border-left:1px solid var(--rule-strong);min-width:0}
.tblock > div:first-child{border-left:0}
.tblock dt{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.tblock dd{margin:3px 0 0;font:500 13.5px/1.35 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.tblock dd.draft{color:var(--accent-ink)}
@media(max-width:620px){
  .tblock{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tblock > div:nth-child(3){border-left:0}
  .tblock > div:nth-child(n+3){border-top:1px solid var(--rule-strong)}
}

/* page hero: the full-width Midnight band that opens every content page (palette 2026-10-11).
   Brand colours are fixed, so the band looks the same in both themes. */
.page-hero{background:var(--brand);color:var(--brand-white);padding-block:30px 44px}
.page-hero .crumbs{color:var(--brand-violet);margin-bottom:24px}
.page-hero .crumbs a{color:var(--brand-white)}
.page-hero .kicker{color:var(--brand-violet)}
.page-hero .kicker::before{border-top-color:var(--brand-violet)}
.page-hero h1{font-size:clamp(30px,5vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin-bottom:14px;max-width:22ch;color:var(--brand-white)}
.page-hero .lede{font-size:18px;line-height:1.55;color:#E9E1FF;max-width:62ch}
.page-hero .tblock{background:transparent;border-color:rgba(205,176,255,.6);margin:26px 0 0}
.page-hero .tblock > div{border-left-color:rgba(205,176,255,.35)}
.page-hero .tblock dt{color:var(--brand-violet)}
.page-hero .tblock dd,.page-hero .tblock dd.draft{color:var(--brand-white)}
.page-hero :focus-visible{outline-color:var(--brand-violet)}
@media(max-width:620px){.page-hero .tblock > div:nth-child(n+3){border-top-color:rgba(205,176,255,.35)}}
@media(max-width:700px){.page-hero{padding-block:24px 34px}.page-hero .lede{font-size:17px}}
.prose > h2:first-child{margin-top:0;padding-top:0;border-top:0}

/* contents list */
.toc{border:1px solid var(--rule);background:var(--surface);border-radius:2px;padding:16px 18px;font-size:14px}
.toc p{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.toc a{color:var(--ink-2);text-underline-offset:3px}
.toc a:hover{color:var(--accent-ink)}
@media(min-width:1000px){.toc{position:sticky;top:96px}}

/* --- prose --- */
.prose{min-width:0;max-width:740px}
.prose h1{font-size:clamp(30px,5vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin-bottom:14px}
.prose .lede{font-size:18px;color:var(--ink-2);line-height:1.55;margin-bottom:26px;max-width:62ch}
.prose h2{font-size:clamp(21px,2.6vw,25px);font-weight:700;margin:46px 0 12px;padding-top:20px;border-top:1px solid var(--rule)}
.prose h3{font-family:var(--body);font-size:17px;font-weight:600;letter-spacing:0;margin:26px 0 8px}
.prose p,.prose li{font-size:16px;line-height:1.65}
.prose p{max-width:68ch}
.prose p + p{margin-top:12px}
.prose ul,.prose ol{padding-left:22px;display:flex;flex-direction:column;gap:6px;margin:10px 0 14px}
.prose a{color:var(--accent-ink);text-underline-offset:3px}
.prose strong{font-weight:600}
.prose .notice{margin:18px 0}
.prose .muted{color:var(--ink-2)}
.prose .small{font-size:14px;color:var(--ink-2)}
.prose hr{border:0;border-top:1px solid var(--rule);margin:30px 0}
.kicker{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);display:flex;gap:9px;align-items:center;margin-bottom:12px}
.kicker::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--accent)}

/* --- tables --- */
.tbl-wrap{overflow-x:auto;margin:14px 0 18px;border:1px solid var(--rule);border-radius:2px;background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.tbl caption{text-align:left;padding:10px 12px 0;font-size:13.5px;color:var(--ink-2)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:10px 12px;border-top:1px solid var(--rule)}
.tbl thead th{border-top:0;background:var(--surface-2);font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.tbl tbody th{font-weight:600}
.tbl .mono{font-family:var(--mono);font-size:13px;white-space:nowrap}
.tbl-wide{min-width:640px}

/* --- definition grid (report fields, checks) --- */
.fields{display:grid;grid-template-columns:170px minmax(0,1fr);gap:10px 18px;margin:0;padding:16px 18px;font-size:14.5px}
.fields dt{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-top:3px}
.fields dd{margin:0;line-height:1.55;min-width:0}
@media(max-width:620px){.fields{grid-template-columns:1fr;gap:2px}.fields dd{margin-bottom:10px}}

/* --- severity marks --- */
.sev{display:inline-flex;align-items:center;gap:7px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.sev::before{content:"";width:9px;height:9px;flex:none;display:block}
.sev.critical{color:var(--sev-critical)}.sev.critical::before{background:var(--sev-critical)}
.sev.major{color:var(--sev-major-ink)}.sev.major::before{background:var(--sev-major)}
.sev.minor{color:var(--ink-2)}.sev.minor::before{background:var(--sev-minor)}
.sev.obs{color:var(--ink-2)}.sev.obs::before{background:var(--sev-obs)}

/* --- document card (report sections, findings) --- */
.card{border:1px solid var(--rule-strong);background:var(--surface);border-radius:2px;margin:16px 0}
.card-head{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;
  padding:10px 18px;background:var(--surface-2);border-bottom:1px solid var(--rule);
  font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.card-body{padding:16px 18px}
.card-body > p + p{margin-top:10px}

/* stat strip in the report summary */
.counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:2px;overflow:hidden;margin:14px 0}
.counts div{background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.counts b{font:700 26px/1.1 var(--display);font-variant-numeric:tabular-nums}
.counts span{font-size:13px;color:var(--ink-2)}
@media(max-width:520px){.counts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* checks list (guides) */
.checks{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:0;counter-reset:chk;border:1px solid var(--rule-strong);border-radius:2px;background:var(--surface)}
.checks > li{padding:16px 18px;border-top:1px solid var(--rule);counter-increment:chk}
.checks > li:first-child{border-top:0}
.checks h3{margin:0 0 8px;display:flex;gap:10px;align-items:baseline}
.checks h3::before{content:counter(chk,decimal-leading-zero);font:600 12px var(--mono);color:var(--accent-ink);flex:none}
.checks dl{display:grid;grid-template-columns:130px minmax(0,1fr);gap:6px 14px;margin:0;font-size:14.5px}
.checks dt{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-top:3px}
.checks dd{margin:0;line-height:1.55}
@media(max-width:560px){.checks dl{grid-template-columns:1fr;gap:1px}.checks dd{margin-bottom:8px}}

/* agenda */
.agenda{list-style:none;padding:0;margin:14px 0;border-left:2px solid var(--rule-strong)}
.agenda > li{position:relative;padding:0 0 18px 22px}
.agenda > li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;background:var(--surface);border:2px solid var(--accent)}
.agenda .when{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);display:block}
.agenda b{display:block;font-weight:600;margin:2px 0 4px}

/* profile cards (network page) */
.profiles{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:18px 0}
@media(min-width:700px){.profiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.profile{border:1px solid var(--rule-strong);background:var(--surface);border-radius:2px;display:flex;flex-direction:column}
.profile-head{padding:14px 16px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.profile-head b{font:700 20px var(--mono)}
.profile-head span{font-size:13.5px;color:var(--ink-2)}
.profile .fields{grid-template-columns:110px minmax(0,1fr);padding:14px 16px;font-size:14px}
.status-chip{display:inline-block;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border:1px dashed currentColor;color:var(--accent-ink)}

/* --- footer links --- */
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px}
.foot-links a{color:var(--ink-2);text-underline-offset:3px}
.foot-links a:hover{color:var(--accent-ink)}

@media print{header.site,.mnav,.toc,footer.site,.preview-bar{display:none}.doc{padding:0}}