/* Pranchas do guia: a grelha relaciona anatomia, contrato e ensaio local. */
.xq-guia-indice {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block: var(--xq-ritmo-5) var(--xq-ritmo-7);
  border-block: 1px solid var(--xq-linha-forte);
}

.xq-guia-indice a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xq-ritmo-3);
  min-block-size: var(--xq-controle-lg);
  padding: var(--xq-ritmo-3);
  font-size: var(--xq-pequeno);
  text-decoration: none;
}

.xq-guia-indice a + a { border-inline-start: 1px solid var(--xq-linha); }
.xq-guia-indice a span { font-family: var(--xq-mono); font-size: var(--xq-legenda); }
.xq-guia-indice a:focus-visible { position: relative; z-index: 2; }
.xq-guia { min-inline-size: 0; margin-block-start: var(--xq-ritmo-8); }
.xq-guia :where(section, figure, div, li, fieldset) { min-inline-size: 0; }
.xq-guia :where(h1, h2, h3, h4, p, li, dd, small, code) { overflow-wrap: anywhere; }
.xq-guia :where(p) { max-inline-size: var(--xq-measure-body); }
.xq-guia :where(h4) { font-size: 18px; line-height: 1.3; letter-spacing: -.02em; }
.xq-guia :where(figure) { margin: 0; }

.xq-guia-abertura {
  padding-block: var(--xq-ritmo-6) var(--xq-ritmo-7);
  border-block-start: 1px solid var(--xq-linha-forte);
}

.xq-guia-abertura > h2 {
  max-inline-size: 16ch;
  margin-block: var(--xq-ritmo-6) var(--xq-ritmo-5);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: var(--xq-peso-display);
  line-height: var(--xq-display-leading);
  letter-spacing: var(--xq-display-tracking);
  text-wrap: balance;
}

.xq-doc-main .xq-guia-abertura > h2 { font-size: clamp(40px, 5vw, 72px); line-height: .96; }

.xq-guia-telemetria {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--xq-ritmo-3) var(--xq-ritmo-5);
  padding-block-end: var(--xq-ritmo-3);
  border-block-end: 1px solid var(--xq-linha);
  color: var(--xq-texto-suave);
  font-family: var(--xq-mono);
  font-size: var(--xq-label-size);
  line-height: var(--xq-label-leading);
  letter-spacing: var(--xq-label-tracking);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.xq-guia-secao { padding-block: var(--xq-ritmo-7); border-block-start: 1px solid var(--xq-linha); scroll-margin-block-start: 112px; }
.xq-guia-secao > p { margin-block-end: var(--xq-ritmo-6); }
.xq-guia-secao-topo { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--xq-ritmo-5); align-items: baseline; margin-block-end: var(--xq-ritmo-5); }
.xq-guia-secao-topo h3 { max-inline-size: 28ch; font-size: clamp(26px, 3vw, 40px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.xq-guia-indice-numero { font-family: var(--xq-mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--xq-texto-suave); }

.xq-guia-anatomia { position: relative; padding: var(--xq-ritmo-5); border: 1px solid var(--xq-linha-forte); background: var(--xq-superficie); }
.xq-guia-desenho { overflow-x: auto; overscroll-behavior-inline: contain; }
.xq-guia-desenho > svg[role='img'] { min-inline-size: 600px; display: block; inline-size: 100%; block-size: auto; min-block-size: 180px; margin-block: var(--xq-ritmo-5); overflow: visible; }
.xq-guia-svg { font-family: var(--xq-mono); }
.xq-guia-desenho > svg[role='img'] text { font-variant-numeric: tabular-nums; }
.xq-guia-anatomia > figcaption { max-inline-size: var(--xq-measure-body); border-block-start: 1px solid var(--xq-linha); padding-block-start: var(--xq-ritmo-4); font-size: var(--xq-legenda); color: var(--xq-texto-suave); }
.xq-guia-callouts { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); margin: var(--xq-ritmo-5) 0 0; padding: 0; }
.xq-guia-callouts li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--xq-ritmo-3); padding: var(--xq-ritmo-5) var(--xq-ritmo-4) var(--xq-ritmo-5) 0; border-block-start: 1px solid var(--xq-linha); }
.xq-guia-callouts li:nth-child(even) { padding-inline-start: var(--xq-ritmo-5); border-inline-start: 1px solid var(--xq-linha); }
.xq-guia-callout-numero { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border: 1px solid var(--xq-linha-forte); font-family: var(--xq-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.xq-guia-callouts h4 { margin-block-end: var(--xq-ritmo-2); }
.xq-guia-callouts p { font-size: var(--xq-pequeno); color: var(--xq-texto-suave); }
.xq-guia-tabela { overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--xq-linha-forte); }
.xq-guia-tabela table { min-inline-size: 640px; margin: 0; }
.xq-guia-tabela caption { padding: var(--xq-ritmo-4); text-align: start; font-family: var(--xq-mono); font-size: var(--xq-legenda); }
.xq-guia-tabela :where(td, th) { max-inline-size: 34ch; vertical-align: top; }
.xq-guia-tabela th[scope='row'] { font-weight: var(--xq-peso-medio); }
.xq-guia-tabela :where(code, small) { display: block; max-inline-size: 32ch; white-space: normal; overflow-wrap: anywhere; font-size: var(--xq-legenda); }
.xq-guia-tabela small { margin-block-start: var(--xq-ritmo-2); color: var(--xq-texto-suave); font-family: var(--xq-mono); }

.xq-guia-comparacao { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border: 1px solid var(--xq-linha-forte); }
.xq-guia-caso + .xq-guia-caso { border-inline-start: 1px solid var(--xq-linha); }
.xq-guia-caso > figcaption { padding: var(--xq-ritmo-4) var(--xq-ritmo-5); border-block-end: 1px solid var(--xq-linha); font-family: var(--xq-mono); font-size: var(--xq-legenda); font-variant-numeric: tabular-nums; }
.xq-guia-caso--correct > figcaption { background: var(--xq-realce); color: var(--xq-sobre-realce); }
.xq-guia-caso--incorrect > figcaption { background: var(--xq-superficie-alt); color: var(--xq-texto); }
.xq-guia-amostra--correct { background: var(--xq-superficie); }
.xq-guia-amostra { display: grid; align-content: center; gap: var(--xq-ritmo-4); min-block-size: 280px; padding: var(--xq-ritmo-5); overflow-wrap: anywhere; }
.xq-guia-amostra :where(h1, h2, h3, .xq-display) { max-inline-size: 16ch; font-size: clamp(28px, 3.4vw, 48px); line-height: .96; letter-spacing: -.04em; }
.xq-guia-amostra :where(p):not(.xq-metrica) { font-size: var(--xq-pequeno); }
.xq-guia-amostra :where(.xq-moldura, .xq-panel) { padding: var(--xq-ritmo-4); }
.xq-guia-notas { margin: 0; padding: var(--xq-ritmo-5) var(--xq-ritmo-5) var(--xq-ritmo-5) var(--xq-ritmo-6); border-block-start: 1px solid var(--xq-linha); font-size: var(--xq-pequeno); }
.xq-guia-notas li + li { margin-block-start: var(--xq-ritmo-3); }
.xq-guia-amostra--incorrect > :first-child { border-radius: 20px; background: var(--xq-superficie-alt); padding: var(--xq-ritmo-5); text-align: center; }
.xq-guia-amostra--incorrect :where(h3, h4, strong) { font-family: var(--xq-font); font-size: 22px; line-height: 1.3; letter-spacing: 0; font-weight: 500; }
.xq-guia-generico { display: grid; gap: var(--xq-ritmo-4); }
.xq-guia-generic { display: grid; gap: var(--xq-ritmo-4); }
.xq-guia-generic-pill { display: inline-block; justify-self: center; border-radius: var(--cl-radius-pill); padding: var(--xq-ritmo-2) var(--xq-ritmo-4); font-size: var(--xq-legenda); background: var(--xq-fundo); }
.xq-guia-generico__selo { display: inline-block; font-size: var(--xq-legenda); }
.xq-guia-generico__acao { display: inline-block; border-radius: var(--cl-radius-pill); padding: var(--xq-ritmo-3) var(--xq-ritmo-4); background: var(--xq-realce); color: var(--xq-sobre-realce); font-size: var(--xq-pequeno); }

.xq-guia-lab { border: 1px solid var(--xq-linha-forte); }
.xq-guia-controles { margin: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--xq-ritmo-5); padding: var(--xq-ritmo-5); background: var(--xq-superficie-alt); border-block-end: 1px solid var(--xq-linha-forte); }
.xq-guia-controles label { display: grid; gap: var(--xq-ritmo-2); font-family: var(--xq-mono); font-size: var(--xq-legenda); }
.xq-guia-controles label > span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--xq-ritmo-2); }
.xq-guia-controles select { inline-size: 100%; min-block-size: var(--xq-controle); padding: var(--xq-ritmo-2) var(--xq-ritmo-3); border: 1px solid var(--xq-linha-forte); border-radius: var(--xq-raio-controle); color: var(--xq-texto); background: var(--xq-superficie); font-family: var(--xq-font); font-size: 16px; }
.xq-guia-controles input[type='range'] { inline-size: 100%; min-block-size: var(--xq-controle); accent-color: var(--xq-anel); touch-action: pan-y; }
.xq-guia-controles .xq-guia-check { display: flex; align-items: center; gap: var(--xq-ritmo-3); min-block-size: var(--xq-controle); cursor: pointer; }
.xq-guia-check input { inline-size: 20px; block-size: 20px; accent-color: var(--xq-anel); }
.xq-guia-preview { position: relative; padding: var(--xq-ritmo-5); background: var(--xq-superficie); color: var(--xq-texto); }
.xq-guia-revelacao { opacity: 1; transform: translateY(0); transition: opacity var(--xq-revelar) var(--xq-ease-out), transform var(--xq-revelar) var(--xq-ease-out); }
.xq-guia-revelacao.is-resetting { opacity: 0; transform: translateY(8px); transition: none !important; animation: none !important; }
.xq-guia-preview-body { display: grid; gap: var(--xq-ritmo-4); min-block-size: 224px; padding: var(--xq-lab-space, 24px); margin-block: var(--xq-ritmo-5); border: 1px solid var(--xq-linha-forte); border-radius: var(--xq-raio-tecnico); box-shadow: inset 0 1px 0 var(--xq-surface-specular); background: var(--xq-superficie); color: var(--xq-texto); }
.xq-guia-preview-body .xq-row > * { min-inline-size: 0; max-inline-size: 100%; }
.xq-guia-preview-body :where(h2, h3, .xq-display) { max-inline-size: 16ch; font-size: clamp(32px, 4vw, 56px); line-height: var(--xq-display-leading); letter-spacing: var(--xq-display-tracking); }
.xq-guia-preview-body :where([data-xq-lab-value]) { font-family: var(--xq-mono); font-size: clamp(24px, 4vw, 56px); font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.03em; }
.xq-guia-preview-body :where([data-xq-lab-copy]) { font-size: var(--xq-pequeno); max-inline-size: var(--xq-measure-body); }
.xq-guia-preview-body[data-state='carregando'] { border-style: dashed; }
.xq-guia-preview-body[data-state='erro'] { outline: 1px solid var(--xq-perigo); outline-offset: -5px; }
.xq-guia-preview-body[data-state='sucesso'] { border-style: double; border-width: 3px; }
.xq-guia-preview-body[data-state='vazio'] { border-style: dashed; background: var(--xq-superficie-alt); }
.xq-guia-preview-body[data-state='vazio'] [data-xq-lab-value] { color: var(--xq-texto-suave); }
.xq-guia-sinal { block-size: 6px; border-inline: 1px solid var(--xq-linha-forte); background: var(--xq-superficie-alt); }
.xq-guia-sinal span { display: block; inline-size: 64%; block-size: 100%; background: var(--xq-realce); transition: inline-size var(--xq-motion-editorial) var(--xq-ease-out); }
.xq-guia-status { margin-block-start: var(--xq-ritmo-4); font-family: var(--xq-mono); font-size: var(--xq-legenda); font-variant-numeric: tabular-nums; min-block-size: 3em; }
.xq-guia-acoes { display: flex; flex-wrap: wrap; gap: var(--xq-ritmo-3); padding: var(--xq-ritmo-5); border-block-start: 1px solid var(--xq-linha); }
.xq-guia-ajuda { padding: 0 var(--xq-ritmo-5) var(--xq-ritmo-5); font-size: var(--xq-legenda); color: var(--xq-texto-suave); }
.xq-guia-inspetor { border-block-start: 1px solid var(--xq-linha); }
.xq-guia-inspetor summary { display: list-item; min-block-size: var(--xq-controle); padding: var(--xq-ritmo-4) var(--xq-ritmo-5); cursor: pointer; font-family: var(--xq-mono); font-size: var(--xq-legenda); }
.xq-guia-token-values { margin: 0; padding: 0 var(--xq-ritmo-5) var(--xq-ritmo-5); }
.xq-guia-token-values > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--xq-ritmo-4); padding-block: var(--xq-ritmo-3); border-block-start: 1px solid var(--xq-linha); font-family: var(--xq-mono); font-size: var(--xq-legenda); }
.xq-guia-token-values dd { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.xq-guia-receita { margin-block-start: var(--xq-ritmo-6); }
.xq-guia-receita h4 { margin-block-end: var(--xq-ritmo-3); }
.xq-guia-receita pre { overflow-x: auto; max-inline-size: 100%; }
.xq-guia-criterios { list-style: none; margin: 0; padding: 0; }
.xq-guia-criterios li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--xq-ritmo-4); padding-block: var(--xq-ritmo-5); border-block-start: 1px solid var(--xq-linha); font-size: var(--xq-pequeno); }
.xq-guia-apendice { max-inline-size: 1440px; margin-inline: auto; padding: var(--xq-ritmo-7) var(--xq-gutter); background: var(--xq-fundo); color: var(--xq-texto); }
.xq-guia-apendice > summary { padding-block: var(--xq-ritmo-4); cursor: pointer; font-size: var(--xq-lead); }
.xq-guia-apendice[open] > summary { border-block-end: 1px solid var(--xq-linha-forte); }

@media (hover: hover) and (pointer: fine) {
  .xq-guia-indice a:hover { background: var(--xq-superficie-alt); }
}

@media (max-width: 700px) {
  .xq-guia-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xq-guia-indice a:nth-child(3) { border-inline-start: 0; }
  .xq-guia-indice a:nth-child(n+3) { border-block-start: 1px solid var(--xq-linha); }
  .xq-guia-secao { padding-block: var(--xq-ritmo-6); }
  .xq-guia-secao-topo { grid-template-columns: 56px minmax(0, 1fr); gap: var(--xq-ritmo-3); }
  .xq-guia-secao-topo h3 { font-size: 28px; }
  .xq-guia-callouts, .xq-guia-comparacao { grid-template-columns: minmax(0, 1fr); }
  .xq-guia-callouts li:nth-child(even) { padding-inline-start: 0; border-inline-start: 0; }
  .xq-guia-caso + .xq-guia-caso { border-inline-start: 0; border-block-start: 1px solid var(--xq-linha-forte); }
  .xq-guia-anatomia { padding: var(--xq-ritmo-3); }
  .xq-guia-controles { grid-template-columns: minmax(0, 1fr); padding: var(--xq-ritmo-4); }
  .xq-guia-preview { padding: var(--xq-ritmo-4); }
  .xq-guia-telemetria { font-size: 10px; letter-spacing: .08em; }
  .xq-guia-acoes { padding: var(--xq-ritmo-4); }
  .xq-guia-acoes > button { flex: 1 1 100%; }
  .xq-guia-preview-body { padding: var(--xq-lab-space, 24px); }
  .xq-guia-token-values > div { grid-template-columns: minmax(0, 1fr); gap: var(--xq-ritmo-2); }
  .xq-guia-apendice { padding: var(--xq-ritmo-6) var(--xq-ritmo-5); }
}

@media (prefers-reduced-motion: reduce) {
  .xq-guia-revelacao, .xq-guia-sinal span { transition: none; transform: none; }
  .xq-guia-revelacao.is-resetting { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .xq-guia :where(.xq-guia-preview, .xq-guia-preview-body, .xq-guia-controles, .xq-guia-anatomia, .xq-guia-caso, .xq-guia-amostra--incorrect > :first-child) { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
  .xq-guia :where(.xq-guia-telemetria, .xq-guia-status, .xq-guia-ajuda, .xq-guia-indice-numero) { color: CanvasText; }
  .xq-guia-sinal span { background: Highlight; }
  .xq-guia-svg :is(rect, circle, ellipse, path, polygon, polyline)[fill]:not([fill='none']) { fill: Canvas; stroke: CanvasText; }
  .xq-guia-svg [stroke]:not([stroke='none']) { stroke: CanvasText; }
  .xq-guia-svg text { fill: CanvasText; stroke: none; }
}

@media print {
  .xq-guia-indice, .xq-guia-controles, .xq-guia-acoes { display: none; }
  .xq-guia-anatomia, .xq-guia-comparacao, .xq-guia-receita { break-inside: avoid; }
  .xq-guia-secao { padding-block: 20pt; }
}