/* ===== base.css — CSS comum às duas páginas (index-classic.html e stability.html) =====
   Contém: html/body, métricas (testGroup/testArea2/meterText/unit), rodapé base (.footer/.poweredby),
   política de privacidade (#privacyPolicy/a.privacy), histórico em acordeão (.accordion-… e .history-…) e os
   overrides html.embed que são idênticos nas duas páginas.

   ORDEM DE CARGA (as duas páginas, nesta ordem; síncrono, sem @import):
     1. aesir/base.css      <- este arquivo, ANTES do <style> da página
     2. <style> da página   <- só o que é dela (tokens extras, medidor/conexões no index; gráfico/latência no stability)
     3. aesir/theme.css     <- DEPOIS do <style>: tokens base + tela cheia (html:not(.embed)) + popover do tema
     4. aesir/footer.css    <- DEPOIS do theme.css: as 3 variantes do rodapé (data-footer) e o "Powered by"

   Cascata: como este arquivo vem antes do <style>, uma regra da página de MESMA especificidade vence a daqui.
   Hoje nenhuma regra da página colide em especificidade com as daqui (as que se sobrepõem são mais específicas:
   html:not(.embed) ..., html.embed ..., #id). Ao mexer, não use !important nem suba especificidade: se a
   página precisa de outro valor, a regra fica na página. As cores usam var(--card-bg)/--fg/--accent/--muted,
   definidas em theme.css (tokens base) e no :root de cada página. */

html,
body {
  border: none;
  padding: 0;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

body {
  text-align: center;
  font-family: Arial, sans-serif;
}

@media all and (max-width: 40em) {
  body {
    font-size: 0.8em;
  }
}

/* Tela normal (aberta direto, fora de iframe): mesmo layout em escala fluida — os medidores e textos são em em,
   então basta subir a fonte base (~1.09x em 768px, ~1.24x em 1280px, 1.3x a partir de ~1500px). No modo
   embutido (html.embed) fica o compacto de sempre. Tem que ficar DENTRO do @media: fora dele este seletor (mais
   específico) anularia a regra de celular (max-width:40em -> body .8em). */
@media (min-width: 48em) {
  html:not(.embed) body {
    font-size: clamp(1em, 0.88em + 0.45vw, 1.3em);
    padding: 2.5rem 1.5rem 3rem;
  }
}

#server {
  font-size: 1em;
  padding: 0.2em;
}

/* ----- Métricas (Ping/Jitter/Atual/Média...): a largura de div.testArea2 é de cada página ----- */
div.testGroup {
  display: block;
  margin: 0 auto;
}

div.testArea2 {
  display: inline-block;
  height: 7em;
  position: relative;
  box-sizing: border-box;
  text-align: center;
}

div.testArea2 div.testName {
  display: block;
  text-align: center;
  font-size: 1.4em;
}

div.testArea2 div.meterText {
  display: inline-block;
  font-size: 2.5em;
}

div.meterText:empty:before {
  content: "0.00";
}

div.testArea2 div.unit {
  display: inline-block;
}

html.embed div.testGroup {
  display: inline-block;
  vertical-align: middle;
}

/* ----- Rodapé base (as variantes data-footer ficam em footer.css) ----- */
.footer {
  margin: 2em 0 1em;
}

.poweredby {
  opacity: 0.5;
  font-size: 0.75em;
  margin: 0.6em 0 0;
}

.poweredby a {
  color: inherit;
}

html.embed .footer {
  margin: 0.75em 0 0.25em;
}

html.embed .poweredby {
  display: none;
}

/* ----- Política de privacidade ----- */
a.privacy {
  text-align: center;
  font-size: 0.8em;
  color: var(--muted, #808080);
  padding: 0 3em;
}

#privacyPolicy {
  position: fixed;
  top: 2em;
  bottom: 2em;
  left: 2em;
  right: 2em;
  overflow-y: auto;
  width: auto;
  height: auto;
  box-shadow: 0 0 3em 1em #000000;
  z-index: 999999;
  text-align: left;
  background-color: var(--card-bg);
  padding: 1em;
}

div.closePrivacyPolicy {
  width: 100%;
  text-align: center;
}

div.closePrivacyPolicy a.privacy {
  padding: 1em 3em;
}

/* ----- Histórico — acordeão inspirado no PrimeVue v4 Accordion (modo single-open) ----- */
.history-section {
  max-width: 40em;
  margin: 2em auto 0;
  text-align: left;
}

.history-section h3 {
  text-align: center;
  font-size: 1.1em;
  margin: 0;
  color: var(--fg);
  opacity: 0.85;
}

.history-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin-bottom: 0.75em;
}

.history-clear {
  font: inherit;
  font-size: 0.75em;
  padding: 0.3em 0.8em;
  border: 0.0625rem solid var(--muted-border, #a0a0a0);
  border-radius: 0.5em;
  background: none;
  color: var(--muted, #808080);
  cursor: pointer;
  transition: all 0.2s;
}

.history-clear:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.accordion {
  border: 0.0625rem solid var(--accent);
  border-radius: 0.375rem;
  overflow: hidden;
}

.accordion-panel + .accordion-panel {
  border-top: 0.0625rem solid rgba(128, 128, 128, 0.25);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  padding: 0.85em 1em;
  cursor: pointer;
  background: var(--card-bg);
  transition: background 0.2s;
  user-select: none;
}

.accordion-header:hover {
  background: rgba(78, 161, 255, 0.08);
}

.accordion-panel.open > .accordion-header {
  color: var(--accent);
}

.accordion-header .accordion-date {
  opacity: 0.65;
  font-size: 0.85em;
  white-space: nowrap;
}

.accordion-header .accordion-meta {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: 0.95em;
  margin-left: auto;
  margin-right: 0.75em;
}

.accordion-header .accordion-metric strong {
  font-weight: 600;
}

.accordion-icon {
  display: inline-block;
  transition: transform 0.25s ease;
  font-size: 0.75em;
  opacity: 0.6;
}

.accordion-panel.open .accordion-icon {
  transform: rotate(90deg);
}

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.accordion-panel.open .accordion-content {
  grid-template-rows: 1fr;
}

.accordion-content-inner {
  overflow: hidden;
}

.accordion-body {
  padding: 0 1em 1em;
  font-size: 0.9em;
  opacity: 0.85;
}

.accordion-body dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3em 0.75em;
  margin: 0;
}

.accordion-body dt {
  opacity: 0.6;
}

.accordion-body dd {
  margin: 0;
  text-align: right;
}

/* Histórico recolhível (embed: recolhido por padrão; normal: aberto). "Limpar histórico" fica no
   .history-heading, então continua visível mesmo recolhido. */
.history-toggle {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.history-caret {
  display: inline-block;
  font-size: 0.75em;
  opacity: 0.6;
  transition: transform 0.2s;
}

.history-section.collapsed .history-caret {
  transform: rotate(-90deg);
}

.history-section.collapsed #historyAccordion {
  display: none;
}

html.embed .history-section {
  margin-top: 0.75em;
}