/* ══════════════════════════════════════════════════════════════════════════
   thoth · seo — a bancada de aferição.

   Paleta e tipos herdados do thoth-site: #131a24 é a cor do próprio símbolo.
   A semântica de estado é térmica, não semafórica — frio (azul-giz) é
   conforme, e o instrumento esquenta conforme encontra defeito. Não há verde
   aqui de propósito: um instrumento não pinta o normal, ele só acusa o desvio.

   Duas páginas dividem esta folha: a home (index.html) e a aferição (report.html).
   ══════════════════════════════════════════════════════════════════════════ */

/* Latin only: a interface é toda pt-BR e cada caractere em uso cai em
   U+0000–00FF. Servidas daqui, sem terceiro na frente — uma ferramenta que
   audita headers de segurança não deveria depender de um CDN de fontes. */
@font-face {
	font-family: "Bricolage Grotesque Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	font-stretch: 75% 100%;
	src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Instrument Sans Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	src: url("/fonts/instrument-sans-latin.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Geist Mono Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("/fonts/geist-mono-latin.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--brim: #131a24;
	--brim-2: #182131;
	--brim-3: #1d2739;
	--chalk: #e8e4da;
	--blue: #7e9cc0;
	--red: #d8452f;
	--amber: #d9a441;

	/* Os mesmos degraus de opacidade do thoth-site, nos mesmos valores. */
	--soft: rgb(232 228 218 / 72%);
	--faint: rgb(232 228 218 / 45%);
	--dim: rgb(232 228 218 / 28%);
	--line: rgb(232 228 218 / 13%);
	--line-2: rgb(232 228 218 / 7%);
	--line-soft: rgb(232 228 218 / 4.5%);

	--display: "Bricolage Grotesque Variable", system-ui, sans-serif;
	--body: "Instrument Sans Variable", system-ui, sans-serif;
	--mono: "Geist Mono Variable", ui-monospace, monospace;

	/* Mesmas medidas do thoth-site: a folha e a margem são as de lá, para as
	   duas interfaces terem a mesma caixa. */
	--sheet: 1440px;
	--pad: clamp(20px, 5vw, 56px);
	/* 22px de respiro em cima e embaixo da marca de 22px, mais a régua. */
	--bar-h: 67px;

	/* Estrutura é tracejada, como no thoth-site: linha de corte, não moldura.
	   A linha cheia fica para o que emoldura mídia e dado — o mesmo critério
	   que separa `.step`/`.pessoa` (tracejado) de `.proj`/`.shot` (cheio) lá. */
	--rule: 1px dashed var(--line);
	--rule-2: 1px dashed var(--line-2);

	/* A aferição é documento, não painel: como a `.doc-inner` do /paas, o corpo
	   recua da folha e a régua para onde o conteúdo para. */
	--doc: 58rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--brim);
	color: var(--chalk);
	font-family: var(--body);
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* O quadriculado da prancha de modelagem, como no thoth-site: só existe na
   abertura e se dissolve descendo a folha. É o fundo da marca — a bancada
   herda a mesma superfície.

   A altura é a da viewport, não os 1500px de lá: a home e a tela de aferição
   têm uma tela só, e um pseudo-elemento absoluto mais alto que a página
   estica a área de rolagem — scroll para um fundo. Assim ele continua
   `absolute`, some ao descer como no thoth-site, e não inventa rolagem. */
body::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 100vh;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(var(--line-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
	background-size: 96px 96px;
	background-position: center top;
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 70%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0, #000 70%, transparent 100%);
}

/* Na aferição, não: a folha quadriculada é superfície de abertura — serve à home
   e à tela de aferição, que são uma tela de respiro. O relatório é uma grade
   de dados com régua a cada linha, e aí os 4,5% do fundo brigam com os 7% do
   separador: some qual das duas linhas é conteúdo. Onde há o que ler, a folha
   fica lisa. */
body:has(.report-bar)::before {
	display: none;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--display);
	font-weight: 520;
	line-height: 1.04;
	letter-spacing: -0.015em;
	font-variation-settings: "wdth" 96;
	text-wrap: balance;
}

p {
	margin: 0;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 3px;
	border-radius: 2px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
	}

	html {
		scroll-behavior: auto !important;
	}
}

/* Rótulo mono recorrente: nomeia campos, seções e unidades. É o `.mono` do
   thoth-site — mesma medida, mesmo tracking e o mesmo azul-anotação, que lá
   marca tudo que é escrito na margem e não no corpo. */
.lbl {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blue);
}

.lbl--rule {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.lbl--rule::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--red);
}

.wrap {
	max-width: var(--sheet);
	margin: 0 auto;
	padding: 0 var(--pad);
}

/* Faixa de nota → tinta. A/B frio, C/D morno, F quente. */
[data-band="A"],
[data-band="B"] {
	--band: var(--blue);
}

[data-band="C"],
[data-band="D"] {
	--band: var(--amber);
}

[data-band="F"] {
	--band: var(--red);
}

[data-status="pass"] {
	--tone: var(--blue);
}

[data-status="warn"] {
	--tone: var(--amber);
}

[data-status="fail"] {
	--tone: var(--red);
}

[data-status="skip"] {
	--tone: var(--dim);
}

/* A marca é a do thoth-site: tipografada, não vetorizada. Lá "thoth" é sempre
   Bricolage viva — mesmo corpo, mesmo peso, mesmo `wdth`. O sufixo do produto
   entra atrás do ponto vermelho, na mesma linha de base. */
.brand {
	display: flex;
	align-items: baseline;
	gap: 0;
	text-decoration: none;
	color: var(--chalk);
}

.brand b {
	font-family: var(--display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.02em;
	font-variation-settings: "wdth" 94;
	line-height: 1;
}

.brand .sub {
	font-family: var(--display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.02em;
	font-variation-settings: "wdth" 94;
	white-space: nowrap;
	line-height: 1;
}

.brand .sub::before {
	content: "·";
	color: var(--red);
	padding: 0 0.28em 0 0.24em;
}

/* Botão: a régua é a do `.btn` do thoth-site — mono em caixa alta, tracking
   largo, contorno que preenche em vermelho no hover. O `.ghost` é o
   `.btn--ghost` de lá: contorno tracejado que vira cheio quando a mão chega. */
.ghost {
	display: inline-flex;
	align-items: center;
	padding: 11px 18px;
	border: 1px dashed var(--line);
	background: none;
	color: var(--soft);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease;
}

.ghost--link {
	text-decoration: none;
}

/* Na barra da aferição o botão é ferramenta, não chamada: mesma tipografia,
   metade da massa. */
.report-bar .ghost {
	padding: 7px 12px;
	font-size: 10px;
}

.ghost:hover {
	border-style: solid;
	border-color: var(--chalk);
	color: var(--chalk);
}

.ghost:disabled {
	opacity: 0.5;
	cursor: progress;
}

/* ══ HOME ═════════════════════════════════════════════════════════════════ */

.top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 22px 0;
	border-bottom: var(--rule);
}

/* O rótulo à direita ocupa o lugar da navegação do thoth-site e usa o mesmo
   tratamento: mono, minúsculas, sem caixa alta. */
.top-bar .lbl {
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: lowercase;
	color: rgb(232 228 218 / 70%);
	display: none;
}

/* A home ocupa uma tela exata: a barra e o rodapé medem o que medem e o miolo
   fica com o que sobrar. Descontar uma altura fixa de rodapé no `min-height`
   erra sempre que ele quebra de linha — e aí a página rola por alguns pixels. */
.home {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.home-main {
	position: relative;
	overflow-x: clip;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	/* O respiro de cima e de baixo mede a altura da tela, não a largura: num
	   laptop 1280×720 um `6vw` gastaria 154px de folha que não existe. */
	padding: clamp(24px, 5vh, 84px) 0;
}

.home-said {
	position: relative;
	z-index: 1;
}

.home-main h1 {
	font-size: clamp(31px, 4.4vw, 56px);
	max-width: 34ch;
	margin-top: 22px;
}

/* A frase quebra onde ela quebra na fala, não onde a caixa termina — mas só
   quando há folha para isso; em tela estreita ela corre. */
.home-main h1 span {
	display: inline;
}

/* Mesma medida do `.lede` do thoth-site: 52ch, o mesmo corpo e a mesma tinta. */
.home-main .lede {
	margin-top: 22px;
	max-width: 52ch;
	color: rgb(232 228 218 / 76%);
	font-size: clamp(16px, 1.35vw, 20px);
	line-height: 1.55;
	text-wrap: pretty;
}

/* O símbolo encosta na margem direita, atrás do texto — timbre, não ilustração.
   Sem deslocamento horizontal: a íbis aparece inteira, bico e cauda. */
.home-mark {
	position: absolute;
	z-index: 0;
	top: 50%;
	right: 0;
	width: min(48%, 520px);
	color: var(--chalk);
	opacity: 0.06;
	transform: translateY(-50%);
	pointer-events: none;
}

.home-mark svg {
	width: 100%;
	height: auto;
	display: block;
}

/* A home pergunta uma coisa só: qual página. A caixa é uma peça da folha —
   contorno tracejado, como o `.comm` do thoth-site — e só fecha em linha cheia
   quando recebe o foco. */
.intake {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-top: clamp(26px, 3.4vw, 42px);
	border: var(--rule);
	background: var(--brim-2);
	max-width: 44rem;
	transition: border-color 0.18s ease;
}

.intake-cell {
	display: grid;
	gap: 3px;
	padding: 10px 15px;
	min-width: 0;
	border-bottom: var(--rule);
}

.intake input {
	border: 0;
	padding: 0;
	background: none;
	color: var(--chalk);
	font-family: var(--mono);
	font-size: 14px;
	min-width: 0;
}

.intake input::placeholder {
	color: var(--dim);
}

/* O foco é o outline vermelho de `:focus-visible`, o mesmo do thoth-site —
   o campo não repinta a própria moldura para dizer que está ativo. */

/* O submit é o `.btn` do thoth-site preso na caixa: contorno em repouso,
   vermelho no hover. A régua tracejada o separa do campo. */
.intake button {
	padding: 14px;
	border: 0;
	background: none;
	color: var(--chalk);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease;
}

.intake button:hover:not(:disabled) {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}

.intake button:disabled {
	cursor: progress;
	color: var(--faint);
}

.how {
	margin-top: 12px;
	max-width: 52ch;
	font-size: 13px;
	color: var(--faint);
	text-wrap: pretty;
}

.field-error {
	margin-top: 10px;
	font-size: 13.5px;
	color: var(--red);
}

.hints {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-top: 18px;
}

.hints a {
	color: var(--soft);
	font-family: var(--mono);
	font-size: 11.5px;
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}

/* O mesmo hover do nav do thoth-site: a tinta acende, a régua fica vermelha. */
.hints a:hover {
	color: var(--chalk);
	border-color: var(--red);
}

/* O rodapé declara o escopo: as dez categorias, nomeadas. */
.home-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	padding: 22px 0 40px;
	border-top: var(--rule);
	font-family: var(--mono);
	font-size: 10.5px;
	color: var(--faint);
}

.home-foot b {
	font-weight: 500;
	color: var(--soft);
}

/* ══ AFERINDO ═════════════════════════════════════════════════════════════ */

/* Sem JavaScript a tela de aferição nunca sai do lugar: o <noscript> assume. */
.no-js #scan-screen {
	display: none;
}

.scan-screen {
	display: grid;
	place-items: center;
	min-height: calc(100vh - var(--bar-h));
	padding: 40px var(--pad);
}

.scan {
	width: min(100%, 480px);
}

.scan h1 {
	margin-top: 12px;
	font-size: clamp(26px, 3.4vw, 38px);
	font-variation-settings: "wdth" 92;
	overflow-wrap: anywhere;
}

.steps {
	list-style: none;
	margin: clamp(28px, 4vw, 42px) 0 0;
	padding: 0;
	position: relative;
}

/* O trilho que liga as etapas — a mesma calha do resto do sistema. */
.steps::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 8px;
	width: 1px;
	background: repeating-linear-gradient(
		to bottom,
		var(--line) 0 3px,
		transparent 3px 6px
	);
}

.step {
	display: grid;
	grid-template-columns: 17px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 7px 0;
	color: var(--dim);
	transition: color 0.3s ease;
}

.step .dot {
	position: relative;
	z-index: 1;
	width: 17px;
	height: 17px;
	display: grid;
	place-items: center;
	background: var(--brim);
	border: 1px solid currentColor;
	font-family: var(--mono);
	font-size: 9px;
	line-height: 1;
}

.step .what {
	font-size: 14px;
}

.step .at {
	font-family: var(--mono);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.step[data-state="doing"] {
	color: var(--chalk);
}

.step[data-state="doing"] .dot {
	border-color: var(--red);
	color: var(--red);
	animation: blink 900ms steps(2, jump-none) infinite;
}

.step[data-state="done"] {
	color: var(--soft);
}

.step[data-state="done"] .dot {
	border-color: var(--blue);
	color: var(--blue);
}

.step[data-state="done"] .at {
	opacity: 1;
	color: var(--faint);
}

@keyframes blink {
	50% {
		opacity: 0.35;
	}
}

.scan-note {
	margin-top: clamp(24px, 3vw, 34px);
	padding-top: 16px;
	border-top: var(--rule);
	font-size: 13.5px;
	color: var(--faint);
	text-wrap: pretty;
}

/* Falha: diz o que aconteceu e o que dá para fazer. */
.trouble h1 {
	margin-top: 12px;
	font-size: clamp(24px, 3vw, 34px);
}

.trouble p {
	margin-top: 14px;
	color: var(--soft);
	text-wrap: pretty;
}

.trouble .why {
	margin-top: 10px;
	font-size: 13.5px;
	color: var(--faint);
}

.trouble .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

/* ══ AFERIÇÃO ════════════════════════════════════════════════════════════ */

/* Fica grudada porque a aferição tem dez seções e a nav é o índice delas — é
   função, não efeito. O vidro fosco saiu: o thoth-site não tem translucidez
   em lugar nenhum, então o fundo aqui é o brim cheio, como o da folha. */
.report-bar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--brim);
}

.report-bar-in {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: var(--sheet);
	margin: 0 auto;
	padding: 22px var(--pad);
}

/* A régua acompanha a margem da folha, não a borda da caixa — assim a linha
   da aferição cai exatamente onde cai a da home. */
.report-bar-in::after {
	content: "";
	position: absolute;
	inset: auto var(--pad) 0;
	border-bottom: var(--rule);
}

/* O índice, compacto e sempre à vista. */
.bar-score {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex: none;
}

.bar-score .n {
	font-family: var(--display);
	font-size: 25px;
	font-weight: 700;
	font-variation-settings: "wdth" 88;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--band);
	font-variant-numeric: tabular-nums;
}

.bar-score .g {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--band);
}

/* Nav das categorias: o salto para cada seção. */
.bar-nav {
	display: none;
	flex: 1;
	gap: 16px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
}

.bar-nav::-webkit-scrollbar {
	display: none;
}

/* O nav do thoth-site, item por item: mono em minúsculas, régua sob o texto
   que fica vermelha quando a mão chega — e fica acesa na seção corrente. */
.bar-nav a {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 4px 0;
	text-decoration: none;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: lowercase;
	color: rgb(232 228 218 / 70%);
	border-bottom: 1px solid transparent;
	transition:
		color 0.18s ease,
		border-color 0.18s ease;
	white-space: nowrap;
}

.bar-nav a::before {
	content: "";
	width: 5px;
	height: 5px;
	background: var(--band);
	flex: none;
}

.bar-nav a:hover,
.bar-nav a.here {
	color: var(--chalk);
	border-bottom-color: var(--red);
}

.bar-target {
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
}

.bar-target .url {
	display: none;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--faint);
	max-width: 18ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none;
}

.bar-target .url:hover {
	color: var(--chalk);
}

/* --- parecer e carimbo -------------------------------------------------- */

.verdict {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3.6vw, 52px);
	flex-wrap: wrap;
	padding: clamp(34px, 4.6vw, 60px) 0 clamp(28px, 3.6vw, 42px);
}

/* A moldura dupla é do desenho do carimbo, não de estado — por isso vem de um
   pseudo-elemento e não de `outline`, que no thoth-site é só do foco. */
.stamp {
	position: relative;
	flex: none;
	display: grid;
	justify-items: center;
	gap: 3px;
	margin: 6px 8px;
	padding: 16px 26px 13px;
	border: 2px solid var(--band);
	box-shadow:
		0 0 0 3px var(--brim),
		0 0 0 4px var(--band);
	color: var(--band);
	transform: rotate(-4.5deg);
	animation: press 620ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes press {
	from {
		transform: rotate(-14deg) scale(1.5);
		opacity: 0;
	}

	to {
		transform: rotate(-4.5deg) scale(1);
		opacity: 1;
	}
}

.stamp .num {
	font-family: var(--display);
	font-size: clamp(46px, 6vw, 68px);
	font-weight: 700;
	font-variation-settings: "wdth" 88;
	letter-spacing: -0.03em;
	line-height: 0.82;
	font-variant-numeric: tabular-nums;
}

.stamp .grade {
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-indent: 0.32em;
}

.stamp .cap {
	width: 100%;
	margin-top: 4px;
	padding-top: 5px;
	border-top: 1px solid currentColor;
	text-align: center;
	font-family: var(--mono);
	font-size: 8px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.78;
}

.verdict-text {
	flex: 1 1 24rem;
	min-width: 0;
}

.verdict-text h1 {
	font-size: clamp(18px, 1.9vw, 24px);
	font-weight: 560;
}

.verdict-text p {
	margin-top: 9px;
	max-width: 54ch;
	color: var(--soft);
	font-size: 14.5px;
	text-wrap: pretty;
}

.verdict-text code {
	font-family: var(--mono);
	font-size: 0.92em;
	color: var(--chalk);
}

.counts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin-top: 15px;
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--faint);
}

.counts b {
	font-weight: 600;
}

.counts .c-pass b {
	color: var(--blue);
}

.counts .c-warn b {
	color: var(--amber);
}

.counts .c-fail b {
	color: var(--red);
}

/* --- seções ------------------------------------------------------------- */

.section {
	padding-top: clamp(30px, 4vw, 48px);
}

.section > header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 9px;
	margin-bottom: 16px;
	max-width: var(--doc);
	border-bottom: var(--rule);
}

.section > header h2 {
	font-size: clamp(15px, 1.4vw, 19px);
	font-weight: 600;
	font-variation-settings: "wdth" 94;
}

/* --- barras por categoria ----------------------------------------------- */

.gauges {
	display: grid;
}

/* O trilho tem teto: numa folha de 1440px, uma barra esticada faz 92 e 94
   parecerem iguais. As colunas se agrupam à esquerda e a linha continua até a
   margem, que é o que dá o ritmo da lista. */
.gauge {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.4rem 1.2rem;
	row-gap: 6px;
	justify-content: start;
	align-items: center;
	gap: clamp(10px, 1.8vw, 22px);
	padding: 9px 0;
	border-bottom: var(--rule-2);
	text-decoration: none;
	color: inherit;
	transition: background 0.18s ease;
}

.gauge:hover {
	background: rgb(232 228 218 / 3.5%);
}

.gauge-name {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 13.5px;
	color: var(--soft);
}

.gauge:hover .gauge-name {
	color: var(--chalk);
}

.gauge-name > b {
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.gauge-probs {
	flex: none;
	font-family: var(--mono);
	font-size: 10px;
	color: var(--faint);
}

.gauge-probs .p-fail {
	color: var(--red);
}

.gauge-probs .p-warn {
	color: var(--amber);
}

/* Em tela estreita a barra desce para uma linha só dela — as três colunas de
   cima ficam para nome, índice e grau. */
.gauge .track {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* A barra: trilho cheio, preenchimento na tinta da faixa. */
.track {
	position: relative;
	height: 7px;
	background: var(--line-2);
	overflow: hidden;
}

.track > span {
	display: block;
	height: 100%;
	background: var(--band);
	width: 0;
	animation: fill 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: var(--delay, 0ms);
}

@keyframes fill {
	to {
		width: var(--at);
	}
}

.gauge-value {
	justify-self: end;
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--chalk);
	font-variant-numeric: tabular-nums;
}

.gauge-grade {
	justify-self: end;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 600;
	color: var(--band);
}

/* --- atalhos do "corrigir primeiro" ------------------------------------- */

.shortcut {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	justify-content: start;
	align-items: baseline;
	gap: 3px 13px;
	padding: 11px 0;
	border-bottom: var(--rule-2);
	text-decoration: none;
	color: inherit;
	transition: background 0.18s ease;
}

.shortcut:hover {
	background: rgb(232 228 218 / 3.5%);
}

.shortcut:hover .sc-title {
	color: var(--chalk);
}

.sc-title {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--soft);
	transition: color 0.18s ease;
}

.sc-msg {
	grid-column: 2;
	font-size: 13.5px;
	color: var(--faint);
	text-wrap: pretty;
}

.sc-meta {
	grid-row: auto;
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--faint);
	white-space: nowrap;
}

.sc-meta .go {
	color: var(--blue);
}

/* --- ocorrências -------------------------------------------------------- */

.occ {
	border-bottom: var(--rule-2);
	scroll-margin-top: calc(var(--bar-h) + 18px);
}

/* A ocorrência apontada por um atalho pisca uma vez, para não se perder. */
.occ:target {
	animation: found 1.6s ease both;
}

@keyframes found {
	0%,
	55% {
		background: color-mix(in srgb, var(--tone) 13%, transparent);
	}

	100% {
		background: transparent;
	}
}

.occ > summary {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	justify-content: start;
	align-items: start;
	gap: 4px 13px;
	padding: 12px 0;
	cursor: pointer;
	list-style: none;
}

.occ > summary::-webkit-details-marker {
	display: none;
}

.occ > summary:hover .occ-title,
.occ[open] .occ-title {
	color: var(--chalk);
}

.mark {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: var(--tone);
	background: color-mix(in srgb, var(--tone) 14%, transparent);
}

.occ-title {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--soft);
	transition: color 0.18s ease;
}

.occ-msg {
	grid-column: 2;
	font-size: 13.5px;
	color: var(--faint);
	text-wrap: pretty;
}

.occ-meta {
	grid-row: auto;
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--faint);
	white-space: nowrap;
}

.sev {
	padding: 2px 6px;
	border: 1px solid var(--tone);
	color: var(--tone);
}

.chev {
	font-size: 10px;
	transition: transform 0.18s ease;
}

.occ[open] .chev,
.passed[open] > summary .chev {
	transform: rotate(90deg);
}

.occ-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 5px;
	min-width: 0;
	padding: 4px 0 22px;
}

.occ-body > * {
	min-width: 0;
}

.occ-body > .lbl {
	padding-top: 9px;
}

.occ-body p {
	font-size: 13.5px;
	color: var(--soft);
	text-wrap: pretty;
	max-width: 58ch;
}

.occ-body ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 5px;
}

.occ-body li {
	font-family: var(--mono);
	font-size: 11px;
	line-height: 1.5;
	color: var(--faint);
	padding: 8px 10px;
	background: var(--brim-2);
	overflow-wrap: anywhere;
}

.code {
	position: relative;
	min-width: 0;
	background: var(--brim-2);
	border: 1px solid var(--line);
}

.code pre {
	margin: 0;
	padding: 12px 14px;
	overflow-x: auto;
	font-family: var(--mono);
	font-size: 11.5px;
	line-height: 1.65;
	color: var(--chalk);
}

.code button {
	position: absolute;
	top: 7px;
	right: 7px;
	padding: 4px 9px;
	border: 1px solid var(--line);
	background: var(--brim-3);
	color: var(--faint);
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.code button:hover {
	color: var(--chalk);
	border-color: var(--blue);
}

.ref {
	justify-self: start;
	font-family: var(--mono);
	font-size: 10.5px;
	color: var(--blue);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}

/* --- seção de categoria ------------------------------------------------- */

.cat {
	scroll-margin-top: calc(var(--bar-h) + 14px);
	padding-top: clamp(32px, 4.2vw, 54px);
}

.cat-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	gap: 6px 20px;
	padding-bottom: 10px;
	margin-bottom: 6px;
	max-width: var(--doc);
	border-bottom: var(--rule);
}

.cat-head h2 {
	font-size: clamp(17px, 1.8vw, 23px);
	font-weight: 600;
	font-variation-settings: "wdth" 94;
}

.cat-head .about {
	grid-column: 1;
	font-size: 13px;
	color: var(--faint);
}

.cat-head .read {
	grid-row: auto;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.cat-head .read .n {
	font-family: var(--display);
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 700;
	font-variation-settings: "wdth" 88;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--band);
	font-variant-numeric: tabular-nums;
}

.cat-head .read .g {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 600;
	color: var(--band);
}

.cat > .track {
	max-width: 46rem;
	margin-bottom: 16px;
}

.cat .none {
	padding: 14px 0;
	font-size: 13.5px;
	color: var(--faint);
}

/* Conformes, dobrados. */
.passed {
	margin-top: 4px;
}

.passed > summary {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--faint);
}

.passed > summary::-webkit-details-marker {
	display: none;
}

.passed > summary:hover {
	color: var(--soft);
}

.passed .list {
	padding-bottom: 14px;
	display: grid;
}

.passed .row {
	display: grid;
	grid-template-columns: 17px minmax(0, 1fr);
	justify-content: start;
	align-items: baseline;
	gap: 12px;
	padding: 5px 0;
	border-bottom: var(--rule-2);
	font-size: 13px;
	color: var(--soft);
}

.passed .row .m {
	font-family: var(--mono);
	font-size: 10.5px;
	color: var(--tone);
}

.passed .row .msg {
	display: none;
	font-family: var(--mono);
	font-size: 10.5px;
	color: var(--faint);
	max-width: 46ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- ficha e anexo ------------------------------------------------------ */

.tail {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(20px, 3.4vw, 44px);
	align-items: start;
	padding: clamp(34px, 4.4vw, 56px) 0 clamp(50px, 7vw, 90px);
	margin-top: clamp(30px, 4vw, 48px);
	max-width: var(--doc);
	border-top: var(--rule);
}

.facts {
	margin: 14px 0 0;
	display: grid;
	font-family: var(--mono);
	font-size: 11.5px;
}

.facts > div {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 7px 0;
	border-bottom: var(--rule-2);
}

.facts dt {
	color: var(--faint);
	white-space: nowrap;
}

.facts dd {
	margin: 0;
	text-align: right;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}

.facts dd a {
	color: var(--blue);
	text-decoration: none;
}

.facts dd a:hover {
	color: var(--red);
	text-decoration: underline;
}

.card {
	margin-top: 14px;
	border: 1px solid var(--line);
	background: var(--brim-2);
}

.card img {
	display: block;
	width: 100%;
	aspect-ratio: 1.91 / 1;
	object-fit: cover;
	border-bottom: 1px solid var(--line);
	background: var(--brim-3);
}

/* Sem og:image o card não some: mostra o buraco que aparece no compartilhamento. */
.card .empty {
	display: grid;
	place-items: center;
	aspect-ratio: 1.91 / 1;
	padding: 18px;
	border-bottom: 1px solid var(--line);
	background: repeating-linear-gradient(
		45deg,
		var(--brim-3),
		var(--brim-3) 9px,
		var(--brim-2) 9px,
		var(--brim-2) 18px
	);
	font-family: var(--mono);
	font-size: 11px;
	color: var(--faint);
	text-align: center;
}

.card-body {
	padding: 11px 13px 14px;
}

.card-host {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--faint);
}

.card-title {
	margin-top: 4px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.32;
}

.card-desc {
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--faint);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

/* ══ RESPONSIVO ═══════════════════════════════════════════════════════════

   Mobile-first, como o thoth-site, e nos mesmos degraus: 760px onde lá a
   `.step` abre em colunas, 1000px onde a `.doc-body` ganha o sumário na
   margem. A folha estreita é o estado de partida; a largura acrescenta.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 760px) {
	.top-bar .lbl {
		display: block;
	}

	.home-main h1 span {
		display: block;
	}

	.intake {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.intake-cell {
		border-bottom: 0;
	}

	.intake button {
		padding: 0 clamp(20px, 2.6vw, 34px);
		border-left: var(--rule);
	}

	.report-bar-in {
		gap: clamp(12px, 2vw, 26px);
	}

	.bar-score {
		padding-left: clamp(12px, 2vw, 22px);
		border-left: var(--rule);
	}

	.gauge {
		grid-template-columns: clamp(9rem, 17vw, 14rem) minmax(0, 34rem) 2.6rem 1.3rem;
		row-gap: 0;
	}

	.gauge .track {
		grid-column: auto;
		grid-row: auto;
	}

	.bar-nav {
		display: flex;
	}

	.shortcut,
	.occ > summary {
		grid-template-columns: 20px minmax(0, 46rem) auto;
	}

	.sc-meta,
	.occ-meta {
		grid-row: span 2;
		grid-column: auto;
	}

	.occ-body {
		grid-template-columns: 8rem minmax(0, 1fr);
		gap: 12px 16px;
		padding: 4px 0 22px 33px;
	}

	.occ-body > .lbl {
		padding-top: 2px;
	}

	.cat-head {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.cat-head .read {
		grid-row: span 2;
	}

	.passed .row {
		grid-template-columns: 17px minmax(0, 30rem) auto;
	}

	.passed .row .msg {
		display: block;
	}
}

@media (min-width: 1000px) {
	.tail {
		grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	}
}

@media (min-width: 1180px) {
	.bar-target .url {
		display: block;
	}
}

@media print {
	.report-bar,
	.actions,
	.code button {
		display: none;
	}

	.occ-body,
	.passed .list {
		display: block;
	}
}