/*
 * Site da arquitetura — a moldura das páginas. Só tokens da biblioteca (vendor/hibex/TOKENS.md) e
 * classes site-*, que não fazem parte dela. As regras dos rabiscos (sk-*) são acrescentadas pelo
 * gerador, a partir de eng/sketches/style.mjs.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}

:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

.site-main {
  min-width: 0;
}

/* Texto corrido numa medida de leitura; tabelas, código e desenhos usam a largura toda */
.site-main > :is(p, ul, ol),
.site-secao > :is(p, ul, ol) {
  max-width: 46rem;
}

.site-main li + li {
  margin-block-start: var(--hibex-space-1);
}

.site-main code {
  font-family: var(--hibex-font-code);
  font-size: var(--hibex-font-size-200);
  color: var(--hibex-text);
  overflow-wrap: anywhere;
}

.site-lead {
  max-width: 46rem;
}

/* Nesta página */
.site-toc {
  margin-block: var(--hibex-space-5) var(--hibex-space-2);
  padding-block: var(--hibex-space-3);
  border-block: 1px solid var(--hibex-divider);
}

.site-toc p {
  margin: 0 0 var(--hibex-space-1);
  font-size: var(--hibex-font-size-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hibex-text-muted);
}

.site-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hibex-space-1) var(--hibex-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--hibex-font-size-200);
}

.site-toc li + li { margin: 0; }

.site-secao > h3 {
  margin-block: var(--hibex-space-6) var(--hibex-space-3);
}

.site-secao > :is(.site-desenho, .site-code, .site-tabela) {
  margin-block: var(--hibex-space-5);
}

/* O banner da página inicial: a variante do tema em uso */
.site-banner {
  margin-block-end: var(--hibex-space-6);
}

.site-banner img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--hibex-radius-lg);
}

.site-banner .site-banner-escuro { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-banner .site-banner-claro { display: none; }
  :root:not([data-theme="light"]) .site-banner .site-banner-escuro { display: block; }
}

:root[data-theme="dark"] .site-banner .site-banner-claro { display: none; }
:root[data-theme="dark"] .site-banner .site-banner-escuro { display: block; }

@media (width < 48rem) {
  /* no celular, o recorte mostra o desenho, não o espaço vazio à esquerda */
  .site-banner img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 74% 50%; }
}

/* Os rabiscos */
.site-desenho {
  margin: 0;
  overflow-x: auto;
  border-radius: var(--hibex-radius-lg);
  box-shadow: var(--hibex-shadow-1);
}

@media (width < 48rem) {
  /* no celular, o desenho mantém um tamanho legível e rola de lado */
  .site-desenho .sk-svg { min-inline-size: 40rem; }
}

/* Tabelas: no celular, a biblioteca vira cada linha numa lista; o rótulo da coluna volta junto */
.site-rotulo { display: none; }

@media (width < 48rem) {
  .site-rotulo {
    display: inline;
    color: var(--hibex-text);
  }
}

/* Código, com "Copiar" */
.site-code {
  overflow: hidden;
  border: 1px solid var(--hibex-divider);
  border-radius: var(--hibex-radius-md);
  background: var(--hibex-surface-solid);
}

.site-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  padding: var(--hibex-space-1) var(--hibex-space-2) var(--hibex-space-1) var(--hibex-space-4);
  border-block-end: 1px solid var(--hibex-divider);
  font-size: var(--hibex-font-size-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hibex-text-muted);
}

.site-code pre {
  margin: 0;
  padding: var(--hibex-space-4);
  overflow: auto;
  font-size: var(--hibex-font-size-200);
  line-height: 1.6;
}

.site-code pre code {
  overflow-wrap: normal;
  white-space: pre;
}

/* Anterior e próxima */
.site-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--hibex-space-3);
  margin-block-start: var(--hibex-space-7);
  padding-block-start: var(--hibex-space-4);
  border-block-start: 1px solid var(--hibex-divider);
}

.site-pager a {
  display: grid;
  gap: var(--hibex-space-1);
  padding: var(--hibex-space-3) var(--hibex-space-4);
  border-radius: var(--hibex-radius-md);
  background: var(--hibex-surface);
  text-decoration: none;
}

.site-pager a span {
  font-size: var(--hibex-font-size-100);
  color: var(--hibex-text-muted);
}

.site-pager a:last-child {
  margin-inline-start: auto;
  text-align: end;
}

.site-versao {
  font-size: var(--hibex-font-size-200);
  color: var(--hibex-text-muted);
}

/* ── Página inicial ── */
.site-hero {
  display: grid;
  gap: var(--hibex-space-5);
  align-items: center;
  margin-block-end: var(--hibex-space-6);
}

@media (width >= 62rem) {
  .site-hero { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr); gap: var(--hibex-space-5); }
}

.site-hero h1 { margin-block: var(--hibex-space-2) var(--hibex-space-4); }
.site-hero-lead { margin-block-end: var(--hibex-space-5); }

.site-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hibex-space-2);
  margin-block-start: var(--hibex-space-4);
}

.site-hero-arte img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.site-hero-arte .site-capa-escuro { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-hero-arte .site-capa-claro { display: none; }
  :root:not([data-theme="light"]) .site-hero-arte .site-capa-escuro { display: block; }
}

:root[data-theme="dark"] .site-hero-arte .site-capa-claro { display: none; }
:root[data-theme="dark"] .site-hero-arte .site-capa-escuro { display: block; }

.site-ideia-icone { margin-block-end: var(--hibex-space-3); }

.site-texto { max-width: 46rem; }

.site-trilha {
  font-family: var(--hibex-font-code);
  font-size: var(--hibex-font-size-200);
  color: var(--hibex-text-muted);
}

/* ── Rabiscos (ADR-0037 do design system), gerados de eng/sketches/style.mjs ──
   hibex-pendente: rabisco como peça da biblioteca (2º uso fora do site do design system) */
.sk-svg { --sk-paper: var(--hibex-surface-solid); --sk-ink: var(--hibex-text-body); --sk-strong: var(--hibex-text); --sk-soft: var(--hibex-text-muted); --sk-blue: var(--hibex-link); --sk-mint: color-mix(in srgb, var(--hibex-accent) 40%, transparent); --sk-mint-strong: var(--hibex-accent); --sk-mint-stroke: var(--hibex-status-success-fg); --sk-sky: color-mix(in srgb, var(--hibex-sky) 35%, transparent); --sk-danger: var(--hibex-status-danger-fg); --sk-warn: var(--hibex-status-warning-fg); --sk-warn-bg: var(--hibex-status-warning-bg); --sk-band: var(--hibex-status-neutral-bg); --sk-info-bg: var(--hibex-status-info-bg); }

.sk-svg { display: block; width: 100%; height: auto; }
.sk-svg :is(rect, path, circle, ellipse, polyline, polygon) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sk-svg .sk-paper { fill: var(--sk-paper); stroke: none; }
.sk-svg .sk-line { stroke: var(--sk-ink); stroke-width: 3; }
.sk-svg .sk-soft-line { stroke: var(--sk-soft); stroke-width: 2.5; }
.sk-svg .sk-blue-line { stroke: var(--sk-blue); stroke-width: 3; }
.sk-svg .sk-mint-line { stroke: var(--sk-mint-stroke); stroke-width: 3; }
.sk-svg .sk-danger-line { stroke: var(--sk-danger); stroke-width: 3; }
.sk-svg .sk-warn-line { stroke: var(--sk-warn); stroke-width: 3; }
.sk-svg .sk-dash { stroke-dasharray: 9 9; }
.sk-svg .sk-thin { stroke-width: 2; }
.sk-svg .sk-thick { stroke-width: 4.5; }
.sk-svg .sk-fill { fill: var(--sk-paper); }
.sk-svg .sk-mint-fill { fill: var(--sk-mint); }
.sk-svg .sk-band-fill { fill: var(--sk-band); }
.sk-svg .sk-info-fill { fill: var(--sk-info-bg); }
.sk-svg .sk-warn-fill { fill: var(--sk-warn-bg); }
.sk-svg .sk-ink-fill { fill: var(--sk-ink); }
.sk-svg .sk-blue-fill { fill: var(--sk-blue); }
.sk-svg .sk-mint-band { fill: var(--sk-mint); stroke: none; }
.sk-svg .sk-soft-band { fill: var(--sk-band); stroke: none; }
.sk-svg .sk-glow { fill: var(--sk-mint); stroke: none; opacity: 0.55; }
.sk-svg .sk-glow-blue { fill: var(--sk-sky); stroke: none; opacity: 0.55; }
.sk-svg .sk-arrow { stroke: var(--sk-blue); stroke-width: 3; }
.sk-svg .sk-arrow-ink { stroke: var(--sk-ink); stroke-width: 3; }
.sk-svg .sk-arrow-soft { stroke: var(--sk-soft); stroke-width: 2.5; }
.sk-svg .sk-arrow-mint { stroke: var(--sk-mint-stroke); stroke-width: 3; }
.sk-svg .sk-arrow-danger { stroke: var(--sk-danger); stroke-width: 3; }
.sk-svg .sk-cross { stroke: var(--sk-danger); stroke-width: 4; }
.sk-svg .sk-head { stroke-width: 2.5; }
.sk-svg .sk-head-blue { stroke: var(--sk-blue); }
.sk-svg .sk-head-ink { stroke: var(--sk-ink); }
.sk-svg .sk-head-soft { stroke: var(--sk-soft); }
.sk-svg .sk-head-mint { stroke: var(--sk-mint-stroke); }
.sk-svg .sk-head-danger { stroke: var(--sk-danger); }
.sk-svg text { font-family: var(--hibex-font-sketch); font-weight: 500; fill: var(--sk-ink); }
/* hibex-ignorar: negrito a Caveat tem o peso 700 de verdade; só o rabisco a usa (ADR-0037 do design system) */
.sk-svg text.sk-strong { fill: var(--sk-strong); font-weight: 700; }
/* hibex-ignorar: negrito a Caveat tem o peso 700 de verdade; só o rabisco a usa (ADR-0037 do design system) */
.sk-svg text.sk-blue { fill: var(--sk-blue); font-weight: 700; }
.sk-svg text.sk-soft { fill: var(--sk-soft); }
/* hibex-ignorar: negrito a Caveat tem o peso 700 de verdade; só o rabisco a usa (ADR-0037 do design system) */
.sk-svg text.sk-mint { fill: var(--sk-mint-stroke); font-weight: 700; }
/* hibex-ignorar: negrito a Caveat tem o peso 700 de verdade; só o rabisco a usa (ADR-0037 do design system) */
.sk-svg text.sk-danger { fill: var(--sk-danger); font-weight: 700; }
/* hibex-ignorar: negrito a Caveat tem o peso 700 de verdade; só o rabisco a usa (ADR-0037 do design system) */
.sk-svg text.sk-warn { fill: var(--sk-warn); font-weight: 700; }
.sk-svg text.sk-code { font-family: var(--hibex-font-code); font-weight: 400; }
.sk-svg text.sk-halo { paint-order: stroke; stroke: var(--sk-paper); stroke-width: 7px; stroke-linejoin: round; }