/* Estilos das páginas em /ferramentas/: a listagem e cada ferramenta.
   Um arquivo só para as quatro páginas não divergirem com o tempo. As URLs
   aqui são relativas a este arquivo, então valem em qualquer profundidade. */

/* Fontes self-hosted, lazy via @font-face. */
@font-face { font-family: 'Abril Fatface'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/abril-fatface-v25-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/roboto-v51-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/roboto-v51-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/roboto-v51-latin-700.woff2') format('woff2'); }

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

:root {
  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --ink-1:     #161900;
  --ink-2:     #2A2E15;
  --ink-3:     rgba(22,25,0,0.62);
  --ink-4:     rgba(22,25,0,0.42);
  --accent:    #3E4700;
  --primary:   #E6FF00;
  --rule:      #E2E8F0;

  /* Estados: mesma paleta semântica já usada no GEO Check. */
  --ok-bg:   #DCFCE7; --ok-fg:   #166534;
  --warn-bg: #FEF3C7; --warn-fg: #92400E;
  --err-bg:  #FEE2E2; --err-fg:  #991B1B;
  --info-bg: #E3F2FD; --info-fg: #0369A1;

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink-2);
  line-height: 1.6;
  min-height: 100vh;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--primary); color: var(--ink-1); }

.lucide {
  width: 1em; height: 1em;
  vertical-align: -0.125em;
  stroke-width: 2;
  display: inline-block;
  flex-shrink: 0;
  /* Vinham nos atributos que o Lucide punha em cada SVG. Com o sprite, o
     desenho e so o traco, e o resto e esta regra. */
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Visível só para leitores de tela (corrige hierarquia de títulos sem mudar o layout). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Header overrides ───────────────────────────────────────────── */
.header-inner {
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 6px 18px -8px rgba(22,25,0,0.08) !important;
  color: var(--ink-1) !important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .header-inner { background: rgba(255,255,255,0.95) !important; }
}
.header h1, .header .header-title { color: var(--ink-1) !important; }
.header-nav-list a { color: rgba(22,25,0,0.7) !important; }
.header-nav-list a:hover,
.header-nav-list a.active {
  background: var(--primary) !important;
  color: var(--ink-1) !important;
}
.header-nav-toggle { color: var(--ink-1) !important; }
.header-nav-toggle:hover { background: rgba(22,25,0,0.08) !important; }
@media (max-width:768px) {
  .header-nav.open .header-nav-list {
    background: rgba(255,255,255,0.97) !important;
    border: 1px solid var(--rule) !important;
    box-shadow: 0 10px 24px -8px rgba(22,25,0,0.12) !important;
  }
}

/* Menu desktop: pill compacto justo aos itens, centralizado, sem título da página */
.header-inner {
  width: fit-content !important;
  max-width: 100% !important;
  justify-content: center !important;
}
.header-title { display: none !important; }
.header-nav-list { gap: 8px !important; }
.header-nav-list a { padding: 6px 12px !important; }

/* Ícone do título em círculo amarelo (visível só no mobile) */
.header-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: var(--ink-1);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(230, 255, 0, 0.4);
}
.header-title-icon svg.lucide {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
  vertical-align: 0;
}

@media (max-width: 768px) {
  .header-inner {
    width: auto !important;
    justify-content: space-between !important;
  }
  .header-title { display: flex !important; }
}

/* ── Página ─────────────────────────────────────────────────────── */
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 24px 120px;
}

.crumb {
  margin: 28px 0 20px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* Trilha completa, para casar item a item com o BreadcrumbList do schema. */
.crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
}
.crumb li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-4);
}
.crumb li + li::before { content: '›'; }
.crumb [aria-current='page'] { color: var(--ink-3); }
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.15s;
}
.crumb a:hover { color: var(--accent); }
.crumb .lucide { width: 15px; height: 15px; }

.intro {
  margin: 40px 0 clamp(28px, 5vw, 48px);
}
/* Nas ferramentas o título vem logo depois da migalha, que já dá o respiro. */
.crumb + .intro { margin-top: 0; }

.intro-title {
  font-family: 'Abril Fatface', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--ink-1);
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.intro-title em {
  font-style: normal;
  background-image: linear-gradient(var(--primary), var(--primary));
  background-size: 100% 0.4em;
  background-repeat: no-repeat;
  background-position: 0 88%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.08em;
}

.intro-sub {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink-3);
  max-width: 42em;
}

/* ── Listagem de ferramentas (/ferramentas/) ────────────────────── */
.tool-list {
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  /* Recorta o fundo do hover nos cantos arredondados. */
  overflow: hidden;
}

.tool-list li + li {
  border-top: 1px solid var(--rule);
}

/* O link ocupa a linha inteira: o clique vale em qualquer ponto do box.
   O ícone fica na coluna 1 ocupando as duas faixas, então continua
   centralizado tanto com a descrição fechada quanto aberta. */
.tool-list a {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-areas:
    "icon name arrow"
    "icon desc arrow";
  column-gap: 0.95rem;
  align-items: center;
  padding: 1.15rem 1.35rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.tool-list li:hover a,
.tool-list a:focus-visible {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  box-shadow: inset 3px 0 0 var(--primary);
}
.tool-list a:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: -2px;
}

.tool-icon {
  grid-area: icon;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--ink-1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(230, 255, 0, 0.45);
}
.tool-icon .lucide { width: 20px; height: 20px; stroke-width: 2.2; }

.tool-name {
  grid-area: name;
  font-family: 'Abril Fatface', Georgia, serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--ink-1);
}

/* A descrição vive numa faixa de grid que sai de 0fr e vai a 1fr: é o que
   permite animar a altura sem saber o tamanho do texto de antemão. */
.tool-desc {
  grid-area: desc;
  display: grid;
  grid-template-rows: 1fr;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-3);
}

/* O "overflow: hidden" é o que zera a altura mínima automática do item de
   grid. Sem padding aqui de propósito: padding não é recortado junto, e
   sobrariam alguns pixels de altura mesmo colapsada. O respiro vem do
   line-height. */
.tool-desc > span {
  display: block;
  overflow: hidden;
}

.tool-arrow {
  grid-area: arrow;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
  transition: transform 0.18s ease, color 0.18s ease;
}
.tool-arrow .lucide { width: 18px; height: 18px; }
.tool-list li:hover .tool-arrow,
.tool-list a:focus-visible .tool-arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* Só colapsa onde existe hover de verdade: no toque não há como revelar a
   descrição, então ela fica sempre visível. */
@media (hover: hover) and (pointer: fine) {
  .tool-desc {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.22s ease, opacity 0.22s ease;
  }
  .tool-list li:hover .tool-desc,
  .tool-list li:focus-within .tool-desc {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

/* ── Veja também (rodapé da listagem) ───────────────────────────── */
.also {
  margin-top: clamp(40px, 7vw, 64px);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.also-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 0.7rem;
}
.also p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.also a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.15s;
}
.also a:hover { text-decoration-thickness: 2px; }

/* ── Componentes das ferramentas ────────────────────────────────── */
.section-title {
  font-family: 'Abril Fatface', Georgia, serif;
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--ink-1);
  margin: 2.4rem 0 0.9rem;
}

.hint {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Aviso para quem está sem JavaScript. As ferramentas rodam inteiras no
   navegador, então sem JS os campos ficam ali parados, sem explicação. */
.sem-js {
  margin-bottom: 1.6rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--warn-fg);
  border-radius: 0 10px 10px 0;
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* Caixa de entrada (textarea / campos) */
.editor {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1rem;
}

.editor textarea,
input.field-input {
  width: 100%;
  display: block;
  background: #FBFCF5;
  color: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.6;
  resize: vertical;
}
.editor textarea::placeholder,
input.field-input::placeholder { color: var(--ink-4); }
.editor textarea:focus,
input.field-input:focus {
  outline: none;
  border-color: var(--ink-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.5rem;
  border-radius: 9999px;
  border: 1.5px solid var(--primary);
  background: var(--primary);
  color: var(--ink-1);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(230, 255, 0, 0.55);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent);
  color: var(--primary);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(62, 71, 0, 0.28);
}
.btn-primary:disabled {
  opacity: 0.55;
  cursor: progress;
  box-shadow: none;
}

.status {
  font-size: 0.85rem;
  color: var(--ink-3);
  /* Mostra a URL final da busca, que costuma ser longa e sem espaços. */
  overflow-wrap: anywhere;
}
.status[data-kind='error'] { color: var(--err-fg); }
.status[data-kind='ok']    { color: var(--ok-fg); }

.tester-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.8rem;
}
.tester-row input { flex: 1 1 14rem; }

/* Medidor de preenchimento */
.meter {
  margin: 1.25rem 0;
}
.meter-bar {
  height: 10px;
  border-radius: 999px;
  background: #F1F5E8;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  width: 0;
  background: var(--ok-fg);
  transition: width 0.15s ease, background 0.15s ease;
}
.meter-fill.warn { background: var(--warn-fg); }
.meter-fill.err  { background: var(--err-fg); }
@media (prefers-reduced-motion: reduce) {
  .meter-fill { transition: none; }
}

/* Resumo em pílulas */
.summary {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-3);
  background: var(--surface);
}
.pill.ok   { background: var(--ok-bg);   color: var(--ok-fg);   border-color: transparent; font-weight: 600; }
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: transparent; font-weight: 600; }
.pill.err  { background: var(--err-bg);  color: var(--err-fg);  border-color: transparent; font-weight: 600; }

/* Lista de apontamentos */
.issues {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.issue {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.65rem 0.9rem;
  border-left: 3px solid var(--rule);
  border-radius: 0 10px 10px 0;
  background: #FAFBF4;
  font-size: 0.92rem;
  line-height: 1.55;
  /* As mensagens repetem valores do arquivo analisado. Um caminho ou URL sem
     espaços força a largura mínima do grid e joga a PÁGINA inteira em rolagem
     horizontal, não só este bloco. */
  overflow-wrap: anywhere;
}
.issue.error   { border-left-color: var(--err-fg);  background: var(--err-bg); }
.issue.warning { border-left-color: var(--warn-fg); background: var(--warn-bg); }
.issue.info    { border-left-color: var(--info-fg); background: var(--info-bg); }
.issue .ln {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
}
.issue.error .ln   { color: var(--err-fg); }
.issue.warning .ln { color: var(--warn-fg); }
.issue.info .ln    { color: var(--info-fg); }

/* Contador: rótulo de campo e relatório por campo */
.field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}
.editor + .field-report { margin: 1rem 0 1.8rem; }

/* Seletor de dispositivo da prévia */
.device-switch {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.device-switch .tab {
  flex: 0 0 auto;
  padding: 0.5rem 1.4rem;
  border-bottom: 0;
}
.device-switch .tab.is-active {
  background: var(--primary);
  border-bottom-color: transparent;
}

/* A caixa da prévia tem largura fixa, definida pelo modelo de medição: sem
   isso o texto quebra em outro lugar e o corte marcado deixa de bater com a
   linha exibida. Em tela estreita a caixa rola, não encolhe. */
.serp-wrap { overflow-x: auto; }

/* Prévia estilo SERP do Google: fontes e cores do próprio Google, de
   propósito, para a prévia valer como prévia. */
.serp {
  padding: 1.1rem 1.3rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  max-width: 600px;
  font-family: Arial, Helvetica, sans-serif;
}
.serp[data-device] { max-width: none; }
.serp[data-device='mobile'] .s-title { font-size: 18px; }
/* O trecho que não sai no resultado de busca. */
.serp .s-cut {
  color: #9aa0a6;
  text-decoration: line-through;
  text-decoration-color: #d93025;
}
.serp .s-title:empty::before {
  content: 'O title aparecerá aqui…';
  color: #9aa0a6;
}
.serp .s-url {
  color: #202124;
  font-size: 14px;
  line-height: 1.3;
}
.serp .s-title {
  color: #1a0dab;
  font-size: 20px;
  line-height: 1.3;
  margin: 2px 0;
}
.serp .s-desc {
  color: #4d5156;
  font-size: 14px;
  line-height: 1.58;
  word-wrap: break-word;
}
.serp .s-desc:empty::before {
  content: 'A meta description aparecerá aqui…';
  color: #9aa0a6;
}

/* Bloco recolhível (extrair de uma URL) */
.extract {
  margin-top: 2.4rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  background: var(--surface);
}
.extract > summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--ink-2);
  list-style-position: inside;
}
.extract > summary:hover { color: var(--accent); }
.extract[open] > summary { margin-bottom: 1rem; }

/* Seletor de fonte: abas Texto / Link / Arquivo */
.source {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  background: #FBFCF5;
}

.tab {
  flex: 1;
  padding: 0.75rem 1rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tab:hover { color: var(--ink-1); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.tab.is-active {
  color: var(--ink-1);
  font-weight: 700;
  background: var(--surface);
  border-bottom-color: var(--primary);
}

.panel { display: none; padding: 1rem; }
.panel.is-active { display: block; }

.source textarea,
.source input[type='url'],
.tester-row input {
  width: 100%;
  display: block;
  background: #FBFCF5;
  color: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
  resize: vertical;
}
.source textarea::placeholder,
.source input::placeholder,
.tester-row input::placeholder { color: var(--ink-4); }
.source textarea:focus,
.source input:focus,
.tester-row input:focus {
  outline: none;
  border-color: var(--ink-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent);
}

.panel .hint { margin-top: 0.6rem; }

.filedrop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  border: 1px dashed var(--ink-4);
  border-radius: 10px;
  color: var(--ink-3);
  font-size: 0.9rem;
  cursor: pointer;
  text-align: center;
  padding: 1rem;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.filedrop:hover {
  border-color: var(--ink-1);
  color: var(--ink-1);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem 1rem;
  flex-wrap: wrap;
}

.results,
.tester { margin-top: 2.4rem; }

/* Grupos do robots.txt */
.group-card {
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
  background: var(--surface);
}
.group-card .ua {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-1);
  margin-bottom: 0.6rem;
  word-break: break-word;
}

.rule {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  padding: 0.18rem 0;
}
.rule code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-2);
  word-break: break-all;
}
.rule-type {
  flex-shrink: 0;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.rule-type.allow    { background: var(--ok-bg);  color: var(--ok-fg);  border-color: transparent; }
.rule-type.disallow { background: var(--err-bg); color: var(--err-fg); border-color: transparent; }

/* Veredito do teste de URL */
.verdict {
  padding: 1rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--rule);
  font-size: 1rem;
  /* O motivo repete o padrão da regra e o caminho testado, ambos sem espaços. */
  overflow-wrap: anywhere;
}
.verdict.allowed { border-color: color-mix(in srgb, var(--ok-fg) 45%, transparent);  background: var(--ok-bg); }
.verdict.blocked { border-color: color-mix(in srgb, var(--err-fg) 45%, transparent); background: var(--err-bg); }
.verdict strong {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.verdict.allowed strong { color: var(--ok-fg); }
.verdict.blocked strong { color: var(--err-fg); }
.verdict code {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  word-break: break-all;
}
.verdict .reason {
  display: block;
  margin-top: 0.45rem;
  color: var(--ink-3);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Contexto dentro de um apontamento (URL problemática, valor original) */
.issue .ctx {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-3);
  word-break: break-all;
}

/* Tabela de entradas do sitemap */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
}
table.entries {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
table.entries th,
table.entries td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  white-space: nowrap;
}
table.entries tbody tr:last-child td { border-bottom: 0; }
table.entries th {
  color: var(--ink-3);
  font-weight: 700;
  background: #FBFCF5;
  position: sticky;
  top: 0;
}
table.entries td.loc {
  white-space: normal;
  word-break: break-all;
  min-width: 22ch;
  max-width: 34ch;
}

/* Formulário do gerador de UTM */
.field-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.field-wide { margin-bottom: 1.6rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-1);
}
.field .req {
  font-family: 'Roboto', sans-serif;
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 0.4rem;
}
.field input {
  width: 100%;
  background: #FBFCF5;
  color: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.field input::placeholder { color: var(--ink-4); }
.field input:focus {
  outline: none;
  border-color: var(--ink-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent);
}
.field .hint { font-size: 0.78rem; }

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
}
.preset {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-3);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.preset:hover { color: var(--ink-1); border-color: var(--ink-1); }
.preset.is-active {
  background: var(--primary);
  color: var(--ink-1);
  border-color: var(--primary);
  font-weight: 700;
}

.toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.6rem;
  font-size: 0.92rem;
  cursor: pointer;
}
.toggle input {
  margin-top: 0.35rem;
  accent-color: var(--ink-1);
}
.toggle .hint { display: inline; font-size: inherit; }

.result-url {
  display: block;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #FBFCF5;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.6;
  word-break: break-all;
  user-select: all;
}
.result-url.is-empty::before {
  content: 'Preencha a URL de destino, a origem e a mídia.';
  color: var(--ink-4);
}

.result-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.6rem;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.2rem;
  border: 1.5px solid var(--ink-1);
  border-radius: 9999px;
  background: var(--surface);
  color: var(--ink-1);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.btn-ghost:hover {
  background: var(--ink-1);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* Blocos recolhíveis */
.reader,
.advanced {
  margin: 1.6rem 0;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  background: var(--surface);
}
.reader > summary,
.advanced > summary,
.extract > summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-2);
  list-style-position: inside;
}
.reader > summary:hover,
.advanced > summary:hover { color: var(--accent); }
.reader[open] > summary,
.advanced[open] > summary { margin-bottom: 1rem; }

/* ── Corpo editorial ────────────────────────────────────────────── */
/* Portado do padrão .page-editorial do GEO Check, com as variáveis daqui, para
   o texto das cinco páginas não divergir do resto do site. A regra é de escopo:
   tudo aqui vale só dentro de .editorial, então nada disso vaza para a área da
   ferramenta, que tem estilo próprio. */
.editorial {
  margin-top: clamp(48px, 8vw, 80px);
  padding-top: 2.2rem;
  border-top: 1px solid var(--rule);
}

.editorial h2 {
  font-family: 'Abril Fatface', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--ink-1);
  margin: 2.6rem 0 1rem;
  text-wrap: balance;
}
.editorial > h2:first-child { margin-top: 0; }

.editorial h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--ink-1);
  margin: 1.9rem 0 0.7rem;
}

.editorial p {
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--ink-2);
  margin: 0 0 1.2em;
}
.editorial p:last-child { margin-bottom: 0; }

/* Resposta direta que abre a seção: mesma medida, um pouco mais firme. */
.editorial .lead {
  color: var(--ink-1);
  font-weight: 500;
}

.editorial ul,
.editorial ol {
  margin: 0 0 1.4em 1.4em;
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--ink-2);
}
.editorial li { margin-bottom: 0.5em; }
.editorial li:last-child { margin-bottom: 0; }

.editorial a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.15s;
}
.editorial a:hover { text-decoration-thickness: 2px; }

.editorial strong { font-weight: 700; color: var(--ink-1); }

/* Identificador técnico no meio da frase: robots.txt, utm_source, <lastmod>. */
.editorial code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: #F1F5E8;
  color: var(--ink-1);
  /* Nome de parâmetro e caminho não têm espaço: sem isso um deles estica a
     linha e joga a página em rolagem horizontal. */
  overflow-wrap: anywhere;
}

/* Tabela de conteúdo. A caixa rola sozinha em tela estreita; a página, não. */
.editorial-table-wrap {
  overflow-x: auto;
  margin: 0 0 2em;
}
.editorial table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.editorial th,
.editorial td {
  text-align: left;
  padding: 0.7em 0.9em;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.editorial thead th {
  font-weight: 700;
  color: var(--ink-1);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-bottom: 2px solid var(--primary);
  white-space: nowrap;
}
.editorial tbody tr:last-child th,
.editorial tbody tr:last-child td { border-bottom: none; }

/* Tabela de dados curtos (medidas, códigos, limites): espremer as colunas até
   caber deixa cada célula com uma palavra por linha. Aqui a caixa rola e as
   células ficam legíveis. Tabela de texto corrido não usa este modificador,
   porque nela quebrar linha é melhor que rolar. */
.editorial-table-wrap.is-data table { min-width: 34rem; }

/* FAQ em <dl>, que é o que casa com o FAQPage do schema. */
.editorial .faq { margin: 0 0 2em; }
.editorial .faq dt {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink-1);
  margin-top: 1.7em;
}
.editorial .faq dt:first-child { margin-top: 0; }
.editorial .faq dd {
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--ink-2);
  margin: 0.45em 0 0;
}

@media (max-width: 520px) {
  .page { padding: 16px 18px 80px; }
  .intro-title { font-size: 1.95rem; }
  .editorial p,
  .editorial ul,
  .editorial ol,
  .editorial .faq dt,
  .editorial .faq dd { font-size: 1rem; }
  .editorial table { font-size: 0.95rem; }
  .editorial th,
  .editorial td { padding: 0.6em 0.7em; }
  /* Cabeçalho preso numa linha só rouba a largura das células de baixo. */
  .editorial thead th { white-space: normal; }
  .intro-sub { font-size: 1rem; }
  .tool-list a {
    grid-template-columns: 34px 1fr;
    grid-template-areas:
      "icon name"
      "icon desc";
    column-gap: 0.8rem;
    padding: 1rem 1.1rem;
  }
  .tool-icon { width: 34px; height: 34px; border-radius: 9px; }
  .tool-icon .lucide { width: 17px; height: 17px; }
  .tool-name { font-size: 1.12rem; }
  /* Sem hover no toque, a seta não comunica nada e rouba largura do texto. */
  .tool-arrow { display: none; }
  .section-title { font-size: 1.3rem; }
  .btn-primary,
  .btn-ghost { width: 100%; justify-content: center; }
  .tab { padding: 0.7rem 0.5rem; font-size: 0.85rem; }
  .actions { padding: 0 1rem 1rem; }
  .tester-row { flex-direction: column; align-items: stretch; }
  .result-actions { align-items: stretch; }
}