/* Training-document layout — cover, contents, section header, footer, print mode.
   Requires tokens.css + components.css loaded first. Everything colour/type-related
   still comes from tokens.css — no hex here. Shared by brand/doc-template.html and
   every generated document (Signal tool exports, CPC unit converter, etc). */

body{ padding-bottom:80px }

.doc{ max-width:var(--maxw-read); margin:0 auto; padding:0 24px }

/* ---- Cover ---- */
.cover{
  max-width:var(--maxw-read); margin:0 auto; padding:80px 24px 60px;
  text-align:left;
}
.cover .mark{ margin-bottom:40px }
.cover .doc-title{ font-size:var(--fs-44); letter-spacing:-0.02em; font-weight:750; margin:0 0 12px }
.cover .doc-sub{ color:var(--muted); font-size:var(--fs-19); margin:0 0 32px; max-width:640px }
.cover .meta{
  display:flex; flex-wrap:wrap; gap:24px;
  border-top:1px solid var(--line); padding-top:20px; margin-top:20px;
  font-size:var(--fs-13); color:var(--dim);
}
.cover .meta b{ color:var(--muted); font-weight:650 }
[data-mode="print"] .cover .mark svg text{ fill:var(--paper-ink) }

/* ---- Contents ---- */
.toc{ padding:40px 0; border-bottom:1px solid var(--line-soft) }
.toc h2{ font-size:var(--fs-19); margin-bottom:16px }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc }
.toc li{
  counter-increment:toc;
  display:flex; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-15);
}
.toc li::before{ content:counter(toc) "."; color:var(--accent); margin-right:10px; font-weight:650 }
.toc li a{ text-decoration:none; color:var(--text); flex:1 }
.toc li .pg{ color:var(--dim); font-variant-numeric:tabular-nums }

/* ---- Section header ---- */
.section{ padding:56px 0 }
.section-header{ margin-bottom:24px }
.section-header .num{
  font-size:var(--fs-13); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:6px; display:block;
}
.section-header h2{ margin-bottom:8px }
.section-header .purpose{ color:var(--muted); font-size:var(--fs-15) }

/* ---- Body two-column option (print only) ---- */
.body-2col{ column-count:1 }

/* ---- Knowledge check ----
   Collapsed disclosure on screen; open and printed on paper. */
.check{
  background:var(--navy-750); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 22px; margin:24px 0;
}
.check .q{ font-weight:650; margin-bottom:10px }
.check ul{ margin:0 0 12px; padding-left:20px }
.check li{ margin-bottom:6px }
.check .answer{ display:none; padding-top:10px; border-top:1px solid var(--line-soft); color:var(--muted); font-size:var(--fs-15) }
.check[open] .answer, .check.open .answer{ display:block }
.check > summary{ cursor:pointer; font-size:var(--fs-13); color:var(--accent); letter-spacing:.08em; text-transform:uppercase; font-weight:700 }

/* ---- Assessment block (CPC only) ---- */
.assessment{ display:none }
[data-product="cpc"] .assessment{
  display:block;
  background:var(--navy-750); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px; margin:24px 0;
}
.assessment .label{ font-size:var(--fs-12); letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:12px }
.assessment .row{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:var(--fs-15) }
.assessment .row:last-child{ border-bottom:none }
.assessment .tick{ width:18px; height:18px; border:1px solid var(--line); border-radius:4px; flex:none }

/* ---- Footer ---- */
.doc-footer{
  max-width:var(--maxw-read); margin:0 auto; padding:24px;
  display:flex; justify-content:space-between; gap:12px;
  border-top:1px solid var(--line-soft);
  font-size:var(--fs-12); color:var(--dim);
}

/* ================= PRINT MODE ================= */
[data-mode="print"]{
  background:var(--paper);
}
[data-mode="print"] body{ background:var(--paper); color:var(--paper-ink) }
[data-mode="print"] .devbar{ display:none }
[data-mode="print"] .card,
[data-mode="print"] .check,
[data-mode="print"] .assessment,
[data-mode="print"] figure{
  background:transparent; border-color:var(--paper-line);
}
[data-mode="print"] .check .answer{ display:block !important }
[data-mode="print"] .check > summary{ display:none }
[data-mode="print"] .toc,
[data-mode="print"] .section{ border-color:var(--paper-line) }
[data-mode="print"] .doc{ max-width:none }
[data-mode="print"] .cover,
[data-mode="print"] .doc-footer{ max-width:none }

@page{ size:A4; margin:14mm 12mm }
@media print{
  .devbar{ display:none !important }
  .section{ break-inside:avoid-page }
  figure{ break-inside:avoid }
  body{ padding-bottom:0 }
}