/* ============================================================================
   The document stylesheet. ONE place decides how a Hyfe document looks: the
   website (document page, editor preview, track changes, change set review)
   links this file, and the PDF export inlines it. Colours come from the site
   variables with print-safe fallbacks; sizes are in rem so the PDF can scale
   everything by setting the root font size.
   Layout follows the QMS document template: sections "1.", "3.1." stepped in
   per level; clauses "1.1.", "3.1.1." one step further, hanging indent; Varela
   Round throughout. `html.style-plain` turns the numbering off (screen only).
   ============================================================================ */
.prose{font:1rem/1.55 "Varela Round","Liberation Sans","DejaVu Sans",Arial,Helvetica,sans-serif;color:var(--ink,#000)}
.prose>*:first-child{margin-top:0}
.prose h1{font-size:1.9rem;font-weight:400;line-height:1.25;margin:0 0 .5rem}
.prose h1+p>strong:first-child{font-weight:600}          /* the "Document ID:" line */
.prose h2,.prose h3,.prose h4{font-weight:400;line-height:1.3;page-break-after:avoid;break-after:avoid}
.prose h2{font-size:1.5rem;margin:1.6rem 0 .5rem}
.prose h3{font-size:1.25rem;margin:1.3rem 0 .4rem;margin-left:2.4rem}
.prose h4{font-size:1.05rem;margin:1.1rem 0 .3rem;margin-left:4.8rem}
/* heading numbers: "1." / "3.1." / "3.1.1." in a column that grows with the number, so long
   numbers (4.10.3., 12.1.2.1.) never run into the title */
.prose h2[data-num],.prose h3[data-num],.prose h4[data-num]{display:grid;grid-template-columns:minmax(2.2rem,max-content) minmax(0,1fr);column-gap:.6rem;align-items:baseline}
.prose h2[data-num]::before,.prose h3[data-num]::before,.prose h4[data-num]::before{content:attr(data-num) ".";grid-column:1;color:var(--ink-2,#333);font-variant-numeric:tabular-nums}
/* clauses (ordered items): one step in from their heading; the number sits in its own column
   (hanging indent) that also grows with the number */
.prose ol.clauses{list-style:none;padding:0;margin:.4rem 0 .9rem}
.prose ol.clauses[data-sec-level="0"]{margin-left:0}
.prose ol.clauses[data-sec-level="1"]{margin-left:2.8rem}
.prose ol.clauses[data-sec-level="2"]{margin-left:5.2rem}
.prose ol.clauses[data-sec-level="3"]{margin-left:7.6rem}
.prose ol.clauses>li{display:grid;grid-template-columns:minmax(2.4rem,max-content) minmax(0,1fr);column-gap:.7rem;margin:.35rem 0;break-inside:avoid;page-break-inside:avoid}
.prose ol.clauses>li::before{content:attr(data-num) ".";grid-column:1;color:var(--ink-2,#333);font-variant-numeric:tabular-nums}
.prose ol.clauses>li>.li-body{grid-column:2;min-width:0}
.prose h2[data-num]>.h-body,.prose h3[data-num]>.h-body,.prose h4[data-num]>.h-body{grid-column:2;min-width:0}
.prose ol.clauses ol.clauses{margin:.35rem 0 0}
.prose li>p{margin:0}
.prose p{margin:0 0 .7rem}
.prose ul{padding-left:1.4rem;margin:.3rem 0 .8rem}.prose ul li{margin:.2rem 0}
/* tables like the template: rules all round, bold header row */
.prose table{border-collapse:collapse;width:100%;margin:.8rem 0 1rem;font-size:.92rem}
.prose th,.prose td{border:1px solid var(--line-2,#000);padding:.4rem .6rem;vertical-align:top;text-align:left}
.prose th{font-weight:700;background:var(--surface-2,transparent)}
.prose tr{break-inside:avoid;page-break-inside:avoid}
.prose code{font:.85em ui-monospace,SFMono-Regular,Menlo,"Liberation Mono","DejaVu Sans Mono",monospace;background:var(--surface-2,#f3f3f3);padding:1px 5px;border-radius:4px}
.prose pre{font-size:.82rem;line-height:1.45;background:var(--surface-2,#f3f3f3);border:1px solid var(--line,#ccc);border-radius:8px;padding:.7rem .9rem;overflow-x:auto;white-space:pre-wrap}
.prose pre code{background:none;padding:0;font-size:inherit}
.prose blockquote{border-left:3px solid var(--line-2,#ccc);margin:.8rem 0;padding:.1rem 0 .1rem 1rem;color:var(--ink-2,#333)}
.prose a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2,#888)}
.prose hr{border:0;border-top:1px solid var(--line,#bbb);margin:1.5rem 0}
.prose img{max-width:100%;height:auto;display:block;margin:.8rem auto;border-radius:6px}
.prose figure.diagram{margin:.9rem 0;padding:.8rem .7rem;background:var(--surface-2,#f6f6f6);border:1px solid var(--line,#ddd);border-radius:8px;text-align:center;overflow-x:auto}
.prose figure.diagram svg,.prose figure.diagram img{max-width:100%;height:auto;margin:0 auto;border-radius:0}
.prose pre.diagram-diff,.prose pre.diagram-error{position:relative;padding-top:2rem}
.prose pre.diagram-diff::before,.prose pre.diagram-error::before{content:attr(data-label);position:absolute;top:.4rem;left:.9rem;font-size:.75rem;color:var(--muted,#666)}
.prose pre.diagram-error{border-color:var(--del-ink,#a1201a)}
/* plain view (screen): no computed numbering, ordinary lists, nothing stepped in */
html.style-plain .prose h2[data-num]::before,html.style-plain .prose h3[data-num]::before,html.style-plain .prose h4[data-num]::before{content:none}
html.style-plain .prose h2[data-num],html.style-plain .prose h3[data-num],html.style-plain .prose h4[data-num]{display:block;padding-left:0}
html.style-plain .prose h3,html.style-plain .prose h4{margin-left:0}
html.style-plain .prose ol.clauses,html.style-plain .prose ol.clauses[data-sec-level]{list-style:decimal;padding-left:1.6rem;margin-left:0}
html.style-plain .prose ol.clauses>li{display:list-item;padding-left:0;margin:.2rem 0}
html.style-plain .prose ol.clauses>li::before{content:none}

/* table of contents, from a [TOC] line: entries link to the numbered sections; no rules around it */
.prose nav.toc{margin:0 0 1.2rem;padding:.6rem 0 .8rem}
.prose nav.toc a{display:block;color:inherit;text-decoration:none;margin:.2rem 0;line-height:1.4}
.prose nav.toc a.l2{margin-left:1.6rem}.prose nav.toc a.l3{margin-left:3.2rem;font-size:.95rem}
.prose nav.toc .toc-num{display:inline-block;min-width:2.2rem;color:var(--ink-2,#333)}
.prose nav.toc.empty{color:var(--muted,#666);font-size:.9rem}
html.style-plain .prose nav.toc .toc-num{display:none}
html.style-plain .prose nav.toc a.l2,html.style-plain .prose nav.toc a.l3{margin-left:1.2rem}

/* page break (a line with \pagebreak): a faint marker on screen, a real break on paper */
.prose .pagebreak{border-top:1px dashed var(--line-2,#999);margin:1.6rem 0;position:relative;break-before:page;page-break-before:always}
.prose .pagebreak::after{content:"page break";position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);padding:0 .5rem;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#888);background:var(--surface,#fff)}
/* unnumbered heading ("## Title {-}") */
.prose h2[data-unnumbered],.prose h3[data-unnumbered]{display:block}