/* ==========================================================================
   CiberLab guidebooks: shared document styles
   --------------------------------------------------------------------------
   A guidebook is a self-contained HTML document at
   public/guidebooks/<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.

   Write semantic content in index.html; the looks live here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	--purple: #7e22ce;
	--purple-light: #a855f7;
	--blue: #2563eb;
	--blue-light: #3b82f6;
	--blue-faint: #eaf1fe;

	--green: #15803d;
	--green-faint: #eaf7ee;
	--red: #b91c1c;
	--red-faint: #fdecec;
	--amber: #a16207;
	--amber-faint: #fdf6e3;

	--ink: #1f2937;
	--ink-soft: #4b5563;
	--ink-faint: #6b7280;
	--rule: #e5e7eb;

	--dark: #0f172a;

	--font: Montserrat, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: Dongle, Montserrat, "Segoe UI", sans-serif;
	--font-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

/* --------------------------------------------------------------------------
   2. Page
   -------------------------------------------------------------------------- */
@page {
	size: A4;
	margin: 20mm 18mm 18mm 18mm;

	@top-left {
		content: string(guidebook-title);
		font-family: var(--font);
		font-size: 8pt;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #9ca3af;
		vertical-align: bottom;
		padding-bottom: 3mm;
	}

	@top-right {
		content: string(current-section);
		font-family: var(--font);
		font-size: 8pt;
		color: #9ca3af;
		vertical-align: bottom;
		padding-bottom: 3mm;
	}

	@bottom-left {
		content: "CiberLab · Ciência Embarcada";
		font-family: var(--font);
		font-size: 8pt;
		color: #9ca3af;
		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.
		   guidebook.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 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: 22mm;
		white-space: nowrap;
		overflow: visible;
		text-align: right;
		font-family: var(--font);
		font-size: 8pt;
		font-weight: 600;
		color: var(--purple);
		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 {
	font-size: 11pt;
}

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

/* The cover <h1> feeds the running header of every page */
h1 {
	string-set: guidebook-title content(text);
}

h2 {
	string-set: current-section content(text);
	break-after: avoid;
	break-inside: avoid;

	margin: 12mm 0 4mm;
	padding-bottom: 2.5mm;
	border-bottom: 2px solid var(--rule);

	font-size: 19pt;
	font-weight: 700;
	line-height: 1.25;
	color: var(--purple);
	letter-spacing: -0.01em;
}

h3 {
	break-after: avoid;
	break-inside: avoid;
	margin: 7mm 0 2.5mm;
	font-size: 13.5pt;
	font-weight: 700;
	color: var(--ink);
}

h4 {
	break-after: avoid;
	margin: 5mm 0 1.5mm;
	font-size: 11.5pt;
	font-weight: 700;
	color: var(--ink-soft);
}

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

h3 .num {
	color: var(--purple-light);
	font-weight: 600;
}

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

strong {
	font-weight: 700;
	color: #111827;
}

a {
	color: var(--blue);
	text-decoration: none;
	border-bottom: 1px solid rgba(37, 99, 235, 0.35);
}

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

ul,
ol {
	margin: 0 0 4mm;
	padding-left: 6mm;
}

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

li::marker {
	color: var(--purple-light);
}

/* Definition lists carry most of the term-by-term explanations */
dl {
	margin: 0 0 4mm;
}

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

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

code {
	font-family: var(--font-mono);
	font-size: 0.88em;
	background: #f3f4f6;
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: 0.5mm 1.2mm;
	color: #9333ea;
}

pre {
	break-inside: avoid;
	margin: 0 0 4mm;
	padding: 3.5mm 4mm;
	background: #f8fafc;
	border: 1px solid var(--rule);
	border-left: 3px solid var(--purple-light);
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: 8.5pt;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	color: #111827;
}

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

/* --------------------------------------------------------------------------
   4. Cover
   -------------------------------------------------------------------------- */
.cover {
	page: cover;
	break-after: page;

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

	background: linear-gradient(150deg, #1e1b4b 0%, var(--dark) 45%, #0b1220 100%);
	color: #ffffff;

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

.cover__brands {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10mm;
	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: 11mm;
	height: 11mm;
	border-radius: 2.5mm;
	background: linear-gradient(to bottom right, #3b82f6, #9333ea);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

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

.brand-ciberlab__name {
	font-size: 20pt;
	font-weight: 700;
	letter-spacing: -0.01em;
	background: linear-gradient(to right, #60a5fa, #c084fc);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

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

.brand-ce__mark {
	height: 13mm;
	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-display);
	font-size: 28pt;
	font-weight: 700;
	line-height: 0.62;
	color: #e2e8f0;
	white-space: nowrap;
}

/* Subject illustration, watermarked behind the title block */
.cover__figure {
	position: absolute;
	right: -20mm;
	top: 70mm;
	width: 160mm;
	opacity: 0.1;
	z-index: 1;
	pointer-events: none;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.cover__figure svg {
	width: 100%;
	height: auto;
	fill: #a855f7;
}

.cover__body {
	margin-top: auto;
	position: relative;
	z-index: 2;
}

.cover__badge {
	display: inline-flex;
	align-items: center;
	gap: 2mm;
	margin-bottom: 6mm;
	padding: 1.6mm 4mm;
	border: 1px solid rgba(168, 85, 247, 0.55);
	border-radius: 999px;
	background: rgba(168, 85, 247, 0.12);
	font-size: 8.5pt;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #d8b4fe;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.cover__badge svg {
	width: 3.4mm;
	height: 3.4mm;
	fill: #d8b4fe;
}

.cover h1 {
	margin: 0 0 5mm;
	font-size: 42pt;
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: #ffffff;
}

.cover__subtitle {
	margin: 0 0 10mm;
	max-width: 145mm;
	font-size: 14pt;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	color: #cbd5e1;
}

.cover__rule {
	width: 48mm;
	height: 1.6mm;
	margin-bottom: 10mm;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--purple-light), var(--blue-light));
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.cover__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8mm;
	padding-top: 6mm;
	border-top: 1px solid rgba(148, 163, 184, 0.25);
	font-size: 9.5pt;
	color: #94a3b8;
}

.cover__author {
	font-size: 11pt;
	font-weight: 600;
	color: #e2e8f0;
}

/* --------------------------------------------------------------------------
   5. Table of contents
   -------------------------------------------------------------------------- */
.toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.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-weight: 700;
	color: var(--blue);
}

/* Dotted leader between the entry and its page number */
.toc a .dots {
	flex: 1;
	margin: 0 1mm;
	border-bottom: 1px dotted #cbd5e1;
	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-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--purple);
}

/* --------------------------------------------------------------------------
   6. Callouts
   -------------------------------------------------------------------------- */
.note,
.danger,
.tip,
.caution {
	break-inside: avoid;
	margin: 0 0 4.5mm;
	padding: 3.5mm 4mm 3.5mm 5mm;
	border-radius: 0 5px 5px 0;
	font-size: 10pt;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.note > :last-child,
.danger > :last-child,
.tip > :last-child,
.caution > :last-child {
	margin-bottom: 0;
}

.note {
	background: var(--blue-faint);
	border-left: 3.5px solid var(--blue);
}

.danger {
	background: var(--red-faint);
	border-left: 3.5px solid var(--red);
}

.tip {
	background: var(--green-faint);
	border-left: 3.5px solid var(--green);
}

.caution {
	background: var(--amber-faint);
	border-left: 3.5px solid var(--amber);
}

.callout__title {
	display: block;
	margin-bottom: 1.5mm;
	font-size: 8.5pt;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.note .callout__title { color: var(--blue); }
.danger .callout__title { color: var(--red); }
.tip .callout__title { color: var(--green); }
.caution .callout__title { color: var(--amber); }

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

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

.box__title {
	margin: 0 0 2.5mm;
	font-size: 11pt;
	font-weight: 700;
	color: var(--purple);
}

/* Card grid for components, types and short comparisons */
.cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5mm;
	margin: 0 0 4.5mm;
}

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

.card {
	break-inside: avoid;
	padding: 3.5mm 4mm;
	border: 1px solid var(--rule);
	border-top: 2.5px solid var(--purple-light);
	border-radius: 4px;
	background: #ffffff;
	font-size: 9.5pt;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

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

.card__title {
	margin: 0 0 1.5mm;
	font-size: 10.5pt;
	font-weight: 700;
	color: var(--purple);
}

.card p {
	text-align: left;
	margin-bottom: 2mm;
}

/* --------------------------------------------------------------------------
   7. 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 may split across pages. Caption, header and the first body row
   always travel together: Paged.js ignores the break-avoid rules below, so
   guidebook.js enforces it with the TableHeadKeeper handler. */

th.col-check,
td.col-check {
	width: 16mm;
	text-align: center;
	white-space: nowrap;
}

caption {
	margin-bottom: 2mm;
	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 {
	color: var(--purple);
	font-weight: 700;
}

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.5mm 3mm;
	background: var(--purple);
	color: #ffffff;
	font-size: 9pt;
	font-weight: 700;
	text-align: left;
	letter-spacing: 0.02em;
}

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

/* No automatic hyphenation inside tables. A narrow column would rather split
   "Connector" into "Connec-tor" 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: #f9fafb;
}

tr {
	break-inside: avoid;
}

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

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

figcaption {
	margin-top: 2mm;
	font-size: 9pt;
	color: var(--ink-faint);
}

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

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

/* --------------------------------------------------------------------------
   9. Flow helpers
   -------------------------------------------------------------------------- */
/* Chapters follow each other in the normal flow: forcing every section onto
   a new page left roughly a quarter of each guidebook blank. Only the table
   of contents keeps a page of its own, and .page-break stays available for
   the rare explicit break. */
.page-break {
	break-before: page;
}

.toc {
	break-after: page;
}

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

.pullquote {
	margin: 0 0 5mm;
	padding-left: 5mm;
	border-left: 3px solid var(--purple-light);
	font-size: 12pt;
	font-style: italic;
	color: var(--ink-soft);
}

.colophon {
	margin-top: 8mm;
	padding-top: 4mm;
	border-top: 1px solid var(--rule);
	font-size: 9pt;
	color: var(--ink-faint);
	text-align: center;
}

/* --------------------------------------------------------------------------
   10. 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-size: 8pt;
	color: var(--ink-faint);
	word-break: break-all;
}