/* ==========================================================================
   CiberLab technical reports: shared document styles
   --------------------------------------------------------------------------
   A report is a self-contained HTML document at
   public/reports/<slug>/index.html. Paged.js paginates it in the browser with
   the @page rules below, so the screen shows exactly what the print dialog
   produces.

   This file is processed by Paged.js, which has two consequences:

     1. Media queries are evaluated as if the target were print. An
        @media screen block here is dropped, and an @media print block would
        also apply on screen. Reader chrome belongs in reader.css.

     2. Content counters (sections, tables, figures) do not survive page
        breaks, because Paged.js rewrites counter-reset/counter-increment to
        emulate pagination. Those numbers are written in the markup as
        <span class="num">. Only counter(page) and target-counter are safe.

   Why this file is not guidebook.css
   ----------------------------------
   A guidebook teaches and a report testifies. The reader must be able to tell
   the two apart before reading a word, so nothing chromatic is shared: the
   guidebook's purple belongs to teaching material, and here the only accent a
   document carries is its own severity.

   Typography, however, IS shared. The type family is the platform's voice, and
   splitting it made the two publications look like they came from different
   organisations rather than from one house with two document classes. So the
   report uses the guidebook's Montserrat and Dongle, and earns its own
   character from structure instead: numbers hanging in the margin, a technical
   record on the cover, a severity accent, and a denser setting.

   The severity accent
   -------------------
   The document root carries data-severity="critical|high|medium|low", and
   --accent resolves from it. Cover rule, running header, page number, section
   numbers and table headers all read from --accent, so one attribute retones
   the whole document and a critical report never looks like a low one.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Forensic neutrals: the document is ink on paper, not a brand surface */
	--ink: #17202a;
	--ink-soft: #3d4a5c;
	--ink-faint: #667585;
	--rule: #d8dee6;
	--rule-soft: #eaeef3;
	--paper-alt: #f6f8fa;

	--slate: #0d1520;
	--slate-soft: #1b2634;

	/* Severity palette. Every one of these clears 7:1 on white (AAA). */
	--critical: #a51212;
	--critical-faint: #fbeaea;
	--high: #9a3a06;
	--high-faint: #fdeee4;
	--medium: #7a5200;
	--medium-faint: #fdf5e2;
	--low: #11663a;
	--low-faint: #e8f5ee;

	/* Default accent, overridden per document by [data-severity] below */
	--accent: var(--high);
	--accent-faint: var(--high-faint);

	/* Same stacks as guidebook.css: one typographic voice for the platform */
	--font: Montserrat, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: Montserrat, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-brand: Dongle, Montserrat, "Segoe UI", sans-serif;
	--font-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

	/* Section numbers hang in the left margin; all prose keeps one margin */
	--number-indent: 11mm;

	/* Reserved width for the page-number margin box. See section 2. */
	--page-number-width: 22mm;
}

:root[data-severity="critical"] {
	--accent: var(--critical);
	--accent-faint: var(--critical-faint);
}

:root[data-severity="high"] {
	--accent: var(--high);
	--accent-faint: var(--high-faint);
}

:root[data-severity="medium"] {
	--accent: var(--medium);
	--accent-faint: var(--medium-faint);
}

:root[data-severity="low"] {
	--accent: var(--low);
	--accent-faint: var(--low-faint);
}

/* --------------------------------------------------------------------------
   2. Page
   -------------------------------------------------------------------------- */
@page {
	size: A4;
	/* Wider left margin than a guidebook: the section numbers live in it */
	margin: 20mm 18mm 18mm 18mm;

	@top-left {
		content: string(report-target);
		font-family: var(--font);
		font-size: 7.5pt;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ink-faint);
		vertical-align: bottom;
		padding-bottom: 3mm;
	}

	@top-right {
		content: string(current-section);
		font-family: var(--font);
		font-size: 7.5pt;
		color: var(--ink-faint);
		vertical-align: bottom;
		padding-bottom: 3mm;
	}

	@bottom-left {
		/* Literal, not string(report-tlp). Every CiberLab report is published
		   openly, so the classification is a constant of the document class
		   and the indirection existed only to restate it. */
		content: "TLP:CLEAR · CiberLab, Ciência Embarcada";
		font-family: var(--font-mono);
		font-size: 7pt;
		letter-spacing: 0.02em;
		color: var(--ink-faint);
		vertical-align: top;
		padding-top: 3mm;
	}

	@bottom-right {
		/* counter(pages) resolves to 0 under Paged.js, which publishes the
		   total in --pagedjs-page-count per page instead of on the root.
		   report.js writes --page-total (separator included) on :root once
		   pagination settles, so without the script this degrades gracefully
		   to the page number alone.

		   The width is RESERVED here rather than left to auto. Paged.js sizes
		   a margin box from the content present at layout time, which is just
		   counter(page): one digit wide on pages 1 to 9. Injecting " / 24"
		   afterwards then overflowed that narrow box and wrapped the footer
		   onto a second line on exactly those pages. A fixed width plus
		   nowrap means the late value cannot change the box's geometry. */
		content: counter(page) var(--page-total, "");
		width: var(--page-number-width);
		white-space: nowrap;
		overflow: visible;
		font-family: var(--font-mono);
		font-size: 7.5pt;
		font-weight: 500;
		font-variant-numeric: tabular-nums;
		text-align: right;
		color: var(--accent);
		vertical-align: top;
		padding-top: 3mm;
	}
}

/* The cover bleeds to the edges and carries no running header or footer */
@page cover {
	margin: 0;
	@top-left { content: none; }
	@top-right { content: none; }
	@bottom-left { content: none; }
	@bottom-right { content: none; }
}

/* No section name in the header before the first section begins */
@page :first {
	@top-right { content: none; }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
* {
	box-sizing: border-box;
}

html {
	/* Same base size as a guidebook. The report reads denser through tighter
	   leading and smaller tables and listings, not through smaller body text:
	   shrinking the prose made the document look cramped rather than dense. */
	font-size: 11pt;
}

body {
	margin: 0;
	font-family: var(--font);
	color: var(--ink);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	hyphens: auto;
}

/* The cover .report-target feeds the running header; h1 is the title */
.string-target {
	string-set: report-target content(text);
}

h1 {
	font-family: var(--font-display);
}

h2 {
	break-after: avoid;
	break-inside: avoid;

	/* The number hangs left of the margin, so the heading text lines up with
	   every paragraph below it instead of being pushed right by its own
	   number. All prose in the document shares one left edge. */
	position: relative;
	margin: 11mm 0 4mm;
	padding-bottom: 2mm;
	border-bottom: 1.5px solid var(--ink);

	font-family: var(--font-display);
	font-size: 18pt;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.015em;
	color: var(--ink);
}

/**
 * The running header must carry the section name WITHOUT its number.
 * string-set on the <h2> itself uses content(text), which concatenates every
 * descendant's text, so the header came out reading "00Sumário". Setting the
 * string on the title span instead leaves the number out of it.
 */
h2 > .sec-title {
	string-set: current-section content(text);
}

h2 > .num {
	position: absolute;
	left: calc(-1 * var(--number-indent));
	top: 0.1em;
	width: calc(var(--number-indent) - 3mm);
	text-align: right;

	font-family: var(--font-mono);
	font-size: 12pt;
	font-weight: 600;
	color: var(--accent);
}

h3 {
	break-after: avoid;
	break-inside: avoid;
	position: relative;
	margin: 6.5mm 0 2mm;
	font-family: var(--font-display);
	font-size: 13.5pt;
	font-weight: 700;
	color: var(--ink);
}

h3 > .num {
	position: absolute;
	left: calc(-1 * var(--number-indent));
	width: calc(var(--number-indent) - 3mm);
	text-align: right;
	font-family: var(--font-mono);
	font-size: 10.5pt;
	font-weight: 500;
	color: var(--ink-faint);
}

h4 {
	break-after: avoid;
	margin: 4.5mm 0 1.5mm;
	font-family: var(--font-display);
	font-size: 11.5pt;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ink-soft);
}

/* Section numbers come from the markup, never from CSS counters */
.num {
	font-variant-numeric: tabular-nums;
}

p {
	margin: 0 0 3mm;
	orphans: 3;
	widows: 3;
	text-align: justify;
}

strong {
	font-weight: 600;
	color: #0b1118;
}

a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
}

abbr[title] {
	text-decoration: none;
	border-bottom: 1px dotted var(--ink-faint);
}

ul,
ol {
	margin: 0 0 3.5mm;
	padding-left: 5.5mm;
}

li {
	margin-bottom: 1.2mm;
	break-inside: avoid;
}

li::marker {
	color: var(--accent);
}

dl {
	margin: 0 0 3.5mm;
}

dt {
	font-weight: 700;
	color: var(--ink);
	margin-top: 2.5mm;
	break-after: avoid;
}

dd {
	margin: 0.5mm 0 0;
	padding-left: 3.5mm;
	border-left: 2px solid var(--rule);
}

/* Evidence is set in mono throughout: hashes, paths, registry keys, domains */
code {
	font-family: var(--font-mono);
	font-size: 0.86em;
	background: var(--paper-alt);
	border: 1px solid var(--rule-soft);
	border-radius: 2px;
	padding: 0.4mm 1mm;
	color: var(--ink);
	word-break: break-word;
}

/**
 * Code sets on light paper, not on a dark slab.
 *
 * These documents get printed, and a dark block is both unreadable when a
 * printer renders it as muddy grey and an ink sink when it does not. So the
 * listing is light and earns its edge from a rule plus a severity-coloured
 * left border, the same device the callouts use.
 */
pre {
	break-inside: avoid;
	margin: 0 0 3.5mm;
	padding: 3mm 3.5mm;
	background: var(--paper-alt);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	border-radius: 0 3px 3px 0;
	font-family: var(--font-mono);
	font-size: 8.6pt;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--ink);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

/* A labelled code block: detection rules, commands, configuration extracts */
.listing {
	break-inside: avoid;
	margin: 0 0 4mm;
}

/**
 * The label names the language on the left and the provenance on the right,
 * which is how a reader knows a derived, unvalidated rule from a quoted one.
 */
.listing__label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 3mm;
	padding: 1.6mm 3.5mm;
	background: var(--accent-faint);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	border-bottom: 0;
	border-radius: 0 3px 0 0;
	font-family: var(--font-mono);
	font-size: 8pt;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	break-after: avoid;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.listing__label + pre {
	margin-bottom: 0;
	border-radius: 0 0 3px 0;
}

/* --------------------------------------------------------------------------
   4. Cover
   --------------------------------------------------------------------------
   The cover is a title page and a record at once. A guidebook cover invites;
   this one states what was examined, how severely, on whose evidence and on
   what date, because those six facts decide whether the reader keeps reading.
   -------------------------------------------------------------------------- */
.cover {
	page: cover;
	break-after: page;

	position: relative;
	width: 210mm;
	height: 297mm;
	padding: 18mm 18mm 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	background: var(--slate);
	color: #ffffff;

	/* Without this the browser drops the background when printing */
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* A single severity-coloured bar down the left edge: the one piece of colour
   on the cover, and it means something. */
.cover::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4mm;
	background: var(--accent);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/**
 * The brand row sits at the top with a hairline under it.
 *
 * The title block is pinned low, which is the convention for a title page and
 * leaves the upper third empty. Without the rule that emptiness reads as an
 * unfinished layout; with it, the space is framed and reads as deliberate.
 */
.cover__brands {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10mm;
	padding-bottom: 7mm;
	border-bottom: 1px solid rgba(174, 189, 205, 0.22);
	position: relative;
	z-index: 2;
}

/* CiberLab lockup, identical to the site header: gradient tile plus wordmark */
.brand-ciberlab {
	display: flex;
	align-items: center;
	gap: 3mm;
}

.brand-ciberlab__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10mm;
	height: 10mm;
	border-radius: 2.2mm;
	background: linear-gradient(to bottom right, #3b82f6, #9333ea);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.brand-ciberlab__tile svg {
	width: 5.5mm;
	height: 5.5mm;
	fill: #ffffff;
}

.brand-ciberlab__name {
	font-family: var(--font-display);
	font-size: 18pt;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #ffffff;
}

/* Ciência Embarcada lockup: existing mark plus the wordmark */
.brand-ce {
	display: flex;
	align-items: center;
	gap: 2mm;
}

.brand-ce__mark {
	height: 11mm;
	width: auto;
}

/**
 * The wordmark stacks over two lines, with the mark centred against the pair.
 * Dongle carries a lot of leading of its own, so the line height is pulled
 * well below one to keep the two words visually joined.
 */
.brand-ce__name {
	display: flex;
	flex-direction: column;
	font-family: var(--font-brand);
	font-size: 26pt;
	font-weight: 700;
	line-height: 0.62;
	color: #dbe3ec;
	white-space: nowrap;
}

/**
 * Subject illustration, watermarked behind and above the title block.
 *
 * The title block is pinned low, which leaves the upper half of the sheet
 * empty. The figure occupies it the way the guidebook covers do, at low
 * opacity and tinted with the document's severity, so the space carries the
 * subject instead of reading as an unfinished layout.
 */
/* Contained, not bled. A subject icon cropped by the sheet edge stops reading
   as the object it depicts and turns into an abstract shape, so the whole
   glyph stays on the page. */
.cover__figure {
	position: absolute;
	right: 16mm;
	top: 62mm;
	width: 88mm;
	opacity: 0.14;
	z-index: 1;
	pointer-events: none;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.cover__figure svg {
	width: 100%;
	height: auto;
	fill: var(--accent);
}

.cover__body {
	margin-top: auto;
	position: relative;
	z-index: 2;
	padding-bottom: 10mm;
}

/* Eyebrow: the document class, in mono, because it is metadata not a slogan */
.cover__eyebrow {
	display: block;
	margin-bottom: 7mm;
	font-family: var(--font-mono);
	font-size: 8pt;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.cover h1 {
	margin: 0 0 4mm;
	font-size: 36pt;
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.025em;
	color: #ffffff;
}

.cover__subtitle {
	margin: 0 0 8mm;
	max-width: 150mm;
	font-size: 12.5pt;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	color: #aebdcd;
}

/* Executive abstract on the cover: the finding, before any page turn */
.cover__abstract {
	max-width: 158mm;
	margin: 0 0 9mm;
	padding-left: 4mm;
	border-left: 2px solid rgba(174, 189, 205, 0.4);
	font-size: 10pt;
	line-height: 1.5;
	text-align: left;
	color: #cdd8e4;
}

/* Technical record: six labelled fields in a three-column grid */
.cover__record {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5mm 6mm;
	padding-top: 6mm;
	border-top: 1px solid rgba(174, 189, 205, 0.3);
}

.record__field {
	min-width: 0;
}

.record__label {
	display: block;
	margin-bottom: 1mm;
	font-family: var(--font-mono);
	font-size: 6.8pt;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #7f8fa2;
}

.record__value {
	display: block;
	font-size: 10pt;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
	word-break: break-word;
}

.record__value--accent {
	color: var(--accent);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* Brighten the severity value against the dark cover: the AAA-on-white
   severity inks are too dark to sit on #0d1520. */
.cover .record__value--accent {
	filter: brightness(1.85) saturate(1.15);
}

/**
 * Distribution notice, flush to the foot of the sheet.
 *
 * No margin-top: auto here. .cover__body already claims the free space with
 * one, and a second auto margin splits the slack between the two, opening a
 * dead gap in the middle of the cover and lifting the notice off the foot.
 */
.cover__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6mm;
	padding: 4mm 0;
	border-top: 1px solid rgba(174, 189, 205, 0.3);
	font-family: var(--font-mono);
	font-size: 7.5pt;
	line-height: 1.4;
	color: #7f8fa2;
}

.cover__author {
	font-family: var(--font);
	font-size: 9.5pt;
	font-weight: 600;
	color: #cdd8e4;
}

/* TLP band: the classification, unmissable, in the standard's own colours */
.tlp {
	display: inline-block;
	padding: 1mm 3mm;
	border-radius: 2px;
	font-family: var(--font-mono);
	font-size: 8pt;
	font-weight: 700;
	letter-spacing: 0.08em;
	white-space: nowrap;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* FIRST TLP 2.0 colours: black background with the standard's label colour */
.tlp--clear { background: #000000; color: #ffffff; }
.tlp--green { background: #000000; color: #33ff00; }
.tlp--amber { background: #000000; color: #ffc000; }
.tlp--red { background: #000000; color: #ff2b2b; }

/* --------------------------------------------------------------------------
   5. Table of contents
   -------------------------------------------------------------------------- */
.toc {
	break-after: page;
}

.toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.toc li {
	margin-bottom: 2mm;
}

.toc a {
	display: flex;
	align-items: baseline;
	gap: 2mm;
	border: 0;
	color: var(--ink);
	text-decoration: none;
}

.toc a .num {
	flex: none;
	min-width: 7mm;
	font-family: var(--font-mono);
	font-size: 9pt;
	font-weight: 500;
	color: var(--accent);
}

/* Dotted leader between the entry and its page number */
.toc a .dots {
	flex: 1;
	margin: 0 1mm;
	border-bottom: 1px dotted var(--rule);
	transform: translateY(-1mm);
}

/* Paged.js resolves target-counter to the real page during pagination */
.toc a::after {
	content: target-counter(attr(href url), page);
	flex: none;
	font-family: var(--font-mono);
	font-size: 9pt;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   6. Callouts
   --------------------------------------------------------------------------
   Forensic vocabulary, not pedagogical: a report states findings, grave
   consequences and the limits of what it can support.
   -------------------------------------------------------------------------- */
.finding,
.grave,
.limit,
.note {
	break-inside: avoid;
	margin: 0 0 4mm;
	padding: 3mm 3.5mm 3mm 4.5mm;
	border-radius: 0 3px 3px 0;
	font-size: 10pt;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.finding > :last-child,
.grave > :last-child,
.limit > :last-child,
.note > :last-child {
	margin-bottom: 0;
}

/* The central finding of the document, or of the section */
.finding {
	background: var(--accent-faint);
	border-left: 3.5px solid var(--accent);
}

/* An immediate, materialised consequence: exposure, loss, compromise */
.grave {
	background: var(--critical-faint);
	border-left: 3.5px solid var(--critical);
}

/* The boundary of the analysis: what the evidence does not support */
.limit {
	background: var(--paper-alt);
	border-left: 3.5px solid var(--ink-faint);
}

.note {
	background: var(--paper-alt);
	border-left: 3.5px solid var(--rule);
}

.callout__title {
	display: block;
	margin-bottom: 1.2mm;
	font-family: var(--font-mono);
	font-size: 8pt;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.finding .callout__title { color: var(--accent); }
.grave .callout__title { color: var(--critical); }
.limit .callout__title { color: var(--ink-soft); }
.note .callout__title { color: var(--ink-soft); }

/* Neutral box for checklists and procedures */
.box {
	break-inside: avoid;
	margin: 0 0 4mm;
	padding: 3.5mm 4mm;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: #ffffff;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.box > :last-child {
	margin-bottom: 0;
}

.box__title {
	margin: 0 0 2mm;
	font-family: var(--font-display);
	font-size: 11.5pt;
	font-weight: 700;
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   7. Metrics panel
   --------------------------------------------------------------------------
   The handful of numbers that size the incident, read before the prose.
   Every figure here must also appear, sourced, in the body.
   -------------------------------------------------------------------------- */
.panel {
	break-inside: avoid;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 0 0 4.5mm;
	border: 1px solid var(--rule);
	border-radius: 3px;
	overflow: hidden;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.panel--three {
	grid-template-columns: repeat(3, 1fr);
}

.panel--two {
	grid-template-columns: repeat(2, 1fr);
}

.metric {
	padding: 3mm 3.5mm;
	border-left: 1px solid var(--rule);
	background: #ffffff;
}

.metric:first-child {
	border-left: 0;
}

.metric__value {
	display: block;
	font-family: var(--font-display);
	font-size: 21pt;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}

.metric__unit {
	font-size: 11pt;
	font-weight: 600;
}

.metric__label {
	display: block;
	margin-top: 1.5mm;
	font-size: 8.6pt;
	line-height: 1.35;
	color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */
table {
	width: 100%;
	margin: 0 0 3mm;
	border-collapse: collapse;
	font-size: 9.5pt;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* Tables break across pages by default. Forcing break-inside: avoid on the
   element pushes any long table onto a fresh page and strands the heading
   that introduced it; thead/caption/first-row rules below do the real work. */
table.keep-together {
	break-inside: avoid;
}

caption {
	margin-bottom: 1.8mm;
	font-family: var(--font);
	font-size: 9pt;
	font-weight: 600;
	text-align: left;
	color: var(--ink-soft);
	/* A caption alone at the foot of a page announces nothing */
	break-after: avoid;
}

caption .num,
figcaption .num {
	font-family: var(--font-mono);
	color: var(--accent);
	font-weight: 500;
}

thead {
	display: table-header-group;
	/* The header must not be the last thing on a page: it is a promise of rows */
	break-after: avoid;
}

/* Header plus first row travel together, even if that pushes the whole table
   to the next page. A lone header at the foot of a page reads as an error. */
tbody tr:first-child {
	break-before: avoid;
}

th {
	padding: 2.2mm 2.5mm;
	background: var(--slate);
	color: #ffffff;
	font-family: var(--font);
	font-size: 9pt;
	font-weight: 600;
	text-align: left;
	letter-spacing: 0.02em;
}

td {
	padding: 1.8mm 2.5mm;
	border-bottom: 1px solid var(--rule-soft);
	vertical-align: top;
}

/* No automatic hyphenation inside tables. A narrow column would rather split
   a term than grow, and a broken word in a term column is harder to read
   than the same word wrapped whole onto the next line. */
th,
td {
	hyphens: manual;
}

tbody tr:nth-child(even) td {
	background: var(--paper-alt);
}

tr {
	break-inside: avoid;
}

/* Evidence columns: hashes, addresses, paths. Mono and free to break. */
td.mono,
th.mono {
	font-family: var(--font-mono);
	font-size: 8.1pt;
	word-break: break-all;
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
   9. Indicators of compromise
   --------------------------------------------------------------------------
   The IOC table is what a defender copies out of the document, so it is the
   one table with a fixed column contract: Tipo, Indicador, Severidade,
   Contexto. The severity cell is a chip, readable without the header row.
   -------------------------------------------------------------------------- */
.ioc td:nth-child(1) {
	width: 24mm;
	font-family: var(--font-mono);
	font-size: 8.1pt;
	white-space: nowrap;
}

.ioc td:nth-child(2) {
	font-family: var(--font-mono);
	font-size: 8.1pt;
	word-break: break-all;
	line-height: 1.35;
}

.ioc td:nth-child(3) {
	width: 20mm;
}

.chip {
	display: inline-block;
	padding: 0.5mm 2mm;
	border-radius: 2px;
	font-family: var(--font-mono);
	font-size: 7.5pt;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.chip--critical { background: var(--critical-faint); color: var(--critical); }
.chip--high { background: var(--high-faint); color: var(--high); }
.chip--medium { background: var(--medium-faint); color: var(--medium); }
.chip--low { background: var(--low-faint); color: var(--low); }

/* --------------------------------------------------------------------------
   10. MITRE ATT&CK mapping
   -------------------------------------------------------------------------- */
.attack td:nth-child(1) {
	width: 26mm;
	font-family: var(--font-mono);
	font-size: 8.3pt;
	white-space: nowrap;
	font-weight: 500;
	color: var(--accent);
}

/* --------------------------------------------------------------------------
   11. Figures and diagrams
   -------------------------------------------------------------------------- */
figure {
	break-inside: avoid;
	margin: 0 0 4.5mm;
	text-align: center;
}

figure img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--rule);
	border-radius: 3px;
}

figcaption {
	margin-top: 1.8mm;
	font-size: 9pt;
	color: var(--ink-faint);
	text-align: left;
}

/* Inline diagram drawn with the document's own palette */
.diagram {
	break-inside: avoid;
	padding: 4mm;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: var(--paper-alt);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.diagram svg {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   12. Flow helpers
   -------------------------------------------------------------------------- */
.page-break,
.references {
	break-before: page;
}

.keep-together {
	break-inside: avoid;
}

/* A sentence that introduces the block right below it and must not be
   separated from it by a page break. */
.junto {
	break-after: avoid;
}

/* References are numbered in the markup and cited as [1] in the body */
.references ol {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 9.5pt;
}

.references li {
	position: relative;
	margin-bottom: 2.5mm;
	padding-left: 9mm;
	break-inside: avoid;
}

.references li .num {
	position: absolute;
	left: 0;
	width: 6mm;
	text-align: right;
	font-family: var(--font-mono);
	font-weight: 500;
	color: var(--accent);
}

.colophon {
	margin-top: 7mm;
	padding-top: 3.5mm;
	border-top: 1px solid var(--rule);
	font-family: var(--font-mono);
	font-size: 8pt;
	line-height: 1.55;
	color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   13. Print
   --------------------------------------------------------------------------
   Reader chrome (toolbar, dark backdrop, sheet shadows) lives in reader.css,
   loaded with data-pagedjs-ignore. Do not restate any of it here: Paged.js
   evaluates this file as print media, so a screen-only rule would be dropped
   and a print-only rule would leak onto the screen.
   -------------------------------------------------------------------------- */
.screen-only {
	display: none;
}

a {
	border-bottom: 0;
	color: var(--ink);
}

/* External references print their URL next to the link text */
.references a[href^="http"]::after {
	content: " (" attr(href) ")";
	font-family: var(--font-mono);
	font-size: 7.5pt;
	color: var(--ink-faint);
	word-break: break-all;
}