/* Overrides carregados depois de main.css/palette.css — só o necessário pra
   marca (vermelho escuro Solo Network) e pros elementos que não existem no
   tema Material puro (busca própria, cards de regras, fallback sem drawer
   JS em telas estreitas). */

:root {
  /* main.css só ativa a fonte se essas variáveis vierem definidas — sem
     isso ele cai no fallback do sistema mesmo com o Google Fonts linkado */
  --md-text-font: "Roboto";
  --md-code-font: "Roboto Mono";
}

:root,
[data-md-color-primary="red"] {
  --md-primary-fg-color: #991b1b;
  --md-primary-fg-color--light: #c0392b;
  --md-primary-fg-color--dark: #7f1d1d;
}

[data-md-color-accent="red"] {
  --md-accent-fg-color: #e74c3c;
  --md-accent-fg-color--transparent: #e74c3c1a;
}

/* O tema completo limita o header e o conteúdo a 61rem centralizados,
   pensado pro layout com sidebar de TOC à direita que não usamos aqui —
   sobra bastante espaço vazio nas laterais em telas largas. Removido pra
   cabeçalho e conteúdo ocuparem a largura toda; o respiro nas bordas do
   texto continua vindo do próprio .md-content__inner (margin), não deste
   max-width. */
.md-grid {
  max-width: none;
}

/* Sidebar: camadas do playbook — cabeçalhos de grupo (label, com filhos)
   em negrito pra se destacarem dos itens-folha, e o número da seção (ex:
   "1.2") discreto ao lado do título, dando uma leitura de sumário/outline
   ao índice em vez de uma lista plana de links. */
.md-nav__item--nested > label.md-nav__link {
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.md-nav__item--nested > label.md-nav__link:hover {
  color: var(--md-accent-fg-color);
}

.numero-toc {
  flex: none;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--md-default-fg-color--light);
}

/* Título do item corta com "..." em vez de quebrar linha quando não cabe —
   min-width:0 no link é o que permite o span.md-ellipsis (flex child) de
   fato encolher abaixo do tamanho do texto; sem isso overflow:hidden não
   tem efeito nenhum dentro de um flex row. O tooltip com a frase completa
   (app.js, classe .pb-tooltip) só aparece quando esse corte acontece de
   verdade (scrollWidth > clientWidth). */
.md-nav__link {
  min-width: 0;
}

.md-nav__link > .md-ellipsis {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.pb-tooltip {
  position: fixed;
  z-index: 10;
  max-width: min(24rem, calc(100vw - 1.6rem));
  padding: 0.4rem 0.6rem;
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  box-shadow: var(--md-shadow-z2);
  font-size: 0.7rem;
  line-height: 1.4;
  pointer-events: none;
}

.pb-tooltip[hidden] {
  display: none;
}

/* Separa visualmente cada "Seção N" (nível 1) da próxima, reforçando que
   são as grandes camadas do documento */
.md-nav--primary > .md-nav__list > .md-nav__item--nested {
  margin-top: 0.2rem;
}

/* Scroll-spy (app.js): marca a seção sendo lida com uma barra fina à
   esquerda do link ativo no índice, além de deixar o texto em negrito.
   position:relative fica só no link ativo (não em todos) pra não interferir
   no posicionamento de mais nada na sidebar. A barra nasce fora da caixa do
   link (left negativo) pra cair no espaço de indentação já reservado pelo
   .md-nav__list (não empurra nem sobrepõe o texto). */
.md-nav__link--active {
  font-weight: 700;
  position: relative;
}

.md-nav__link--active::before {
  content: "";
  position: absolute;
  left: -0.65rem;
  top: 0.15rem;
  bottom: 0.15rem;
  width: 0.15rem;
  border-radius: 0.1rem;
  background: var(--md-primary-fg-color);
}

/* Busca própria (consulta a API em tempo real) posicionada como o
   md-search do tema, mas sem depender do índice/bundle de busca dele */
.site-search {
  position: relative;
  margin-left: auto;
  width: min(320px, 34vw);
}

.site-search__icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  fill: rgba(255, 255, 255, 0.75);
  pointer-events: none;
}

.site-search__input {
  width: 100%;
  height: 2.2rem;
  border: none;
  border-radius: 0.2rem;
  padding: 0 0.75rem 0 2.15rem;
  background: rgba(255, 255, 255, 0.16);
  color: var(--md-primary-bg-color);
  font-family: inherit;
  font-size: 0.75rem;
  outline: none;
  transition: background-color 0.15s ease;
}

.site-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.site-search__input:focus {
  background: var(--md-primary-bg-color);
  color: var(--md-default-fg-color);
}

.site-search__input:focus::placeholder {
  color: var(--md-default-fg-color--light);
}

.site-search__results {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  width: min(420px, 80vw);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--md-default-bg-color);
  border-radius: 0.2rem;
  box-shadow: var(--md-shadow-z2);
  z-index: 4;
}

.site-search__results.aberto {
  display: block;
}

.site-search__status {
  padding: 0.85rem 1rem;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

.site-search__lista {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
}

.site-search__item {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 0.2rem;
  color: var(--md-default-fg-color);
  text-decoration: none;
  cursor: pointer;
  font-size: 0.72rem;
}

.site-search__item:hover,
.site-search__item.selecionado {
  background: var(--md-accent-fg-color--transparent);
}

.site-search__item-numero {
  color: var(--md-accent-fg-color);
  font-weight: 700;
  margin-right: 0.4rem;
}

/* Cards de regras (específicos do playbook, não fazem parte do tema) */
.card-regras {
  position: relative;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  background: var(--md-code-bg-color);
  border-radius: 0.2rem;
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
  overflow: hidden;
}

.card-regras::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--md-primary-fg-color);
}

.card-regras-titulo {
  font-weight: 700;
  margin: 0 0 0.7rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-default-fg-color--light);
}

.card-regras ul {
  margin: 0;
  padding-left: 1.1rem;
}

.card-regras li {
  margin-bottom: 0.6rem;
}

.card-regras li:last-child {
  margin-bottom: 0;
}

.card-regras .tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--md-primary-fg-color--dark);
  background: var(--md-accent-fg-color--transparent);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.card-regras .descricao {
  color: var(--md-default-fg-color--light);
  font-size: 0.87rem;
  display: block;
  margin-top: 0.15rem;
}

/* Versionamento: badge com a versão atual + botão que abre o histórico
   completo (buscado sob demanda na API, ver #modal-historico em app.js) */
.secao-versao-info {
  margin: -0.6rem 0 1rem;
}

.versao-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--md-default-fg-color--light);
  background: var(--md-default-fg-color--lightest);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.btn-historico {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--md-primary-fg-color);
  background: none;
  border: 0.05rem solid var(--md-primary-fg-color);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  cursor: pointer;
}

.btn-historico:hover {
  background: var(--md-accent-fg-color--transparent);
}

.card-regras .btn-historico,
.card-regras .versao-badge {
  margin-left: 0.4rem;
}

#modal-historico {
  width: min(560px, 90vw);
  max-height: 80vh;
  border: none;
  border-radius: 0.3rem;
  padding: 0;
  box-shadow: var(--md-shadow-z3, var(--md-shadow-z2));
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
}

#modal-historico::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.modal-historico__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.3rem;
  border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
}

.modal-historico__cabecalho h3 {
  margin: 0;
  font-size: 0.95rem;
}

#modal-historico-fechar {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--md-default-fg-color--light);
}

#modal-historico-corpo {
  padding: 1rem 1.3rem 1.3rem;
  overflow-y: auto;
  max-height: calc(80vh - 4rem);
}

.historico-versao {
  border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
  padding: 0.8rem 0;
}

.historico-versao:last-child {
  border-bottom: none;
}

.historico-versao__cabecalho {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.35rem;
}

.historico-versao__cabecalho .versao-badge {
  margin-right: 0;
}

.historico-versao__titulo {
  font-weight: 700;
  font-size: 0.87rem;
  color: var(--md-default-fg-color);
}

.historico-versao__status {
  padding: 1rem 0;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

/* Em telas largas o tema completo limita a altura da sidebar via JS (mede o
   header e aplica --md-sidebar-height inline) pra ela virar um painel fixo
   com scroll próprio — como não implementamos esse JS, sem isso
   .md-sidebar__scrollwrap cresce do tamanho do conteúdo (sem clipping),
   então rolar dentro dela não anda: não há nada "a mais" pra rolar, ela só
   fica mais alta que a tela conforme se expandem seções. Aqui limitamos a
   altura à área visível abaixo do header (mesmo "top" do position:sticky
   já usado pelo tema) e ligamos o scroll interno no scrollwrap. */
@media screen and (min-width: 76.25em) {
  /* Sidebar mais larga que o padrão do tema (12.1rem) — mais espaço pros
     títulos de seção não quebrarem linha toda hora. Largura ajustável via
     --pb-sidebar-width (arrastando .md-sidebar__resizer, ver app.js); sem
     JS ou na primeira visita cai no fallback de 16rem. */
  .md-sidebar--primary {
    width: var(--pb-sidebar-width, 16rem);
  }

  /* O tema reserva espaço pra scrollbar em navegadores WebKit fixando
     .md-sidebar__inner em exatamente 11.5rem de conteúdo via um padding-right
     calculado (100% - 11.5rem) — pensado pra sidebar de largura fixa do tema
     padrão. Com a sidebar redimensionável isso trava o índice em 11.5rem pra
     sempre: a caixa externa cresce ao arrastar, mas o padding cresce junto e
     consome toda a largura extra, então o texto nunca ganha espaço de
     verdade. .md-sidebar__scrollwrap já reserva o gutter certo via
     scrollbar-gutter:stable (suportado nos navegadores que rodam este site),
     então zerar esse padding aqui é seguro. */
  [dir="ltr"] .md-sidebar--primary .md-sidebar__inner {
    padding-right: 0;
  }

  .md-sidebar--primary {
    max-height: calc(100vh - 2.4rem);
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    max-height: calc(100vh - 2.4rem);
    overflow-y: auto;
  }

  /* O nome do playbook já aparece no cabeçalho (logo + título) — a barra
     .md-nav__title (logo + texto de novo, dentro da própria sidebar) e o
     primeiro item da árvore logo abaixo repetiam o mesmo nome pela
     terceira vez seguida na tela. Só escondida em tela larga: em tela
     estreita ela é o cabeçalho da gaveta aberta (título + botão de
     fechar), continua precisando aparecer ali. */
  .md-nav--primary > .md-nav__title {
    display: none;
  }

  /* Faixa fina e arrastável entre o índice e o conteúdo (app.js liga o
     mousedown/mousemove). Só existe em tela larga: abaixo do breakpoint a
     sidebar volta a ser gaveta off-canvas, redimensionar não faz sentido. */
  .md-sidebar__resizer {
    flex: none;
    width: 0.3rem;
    cursor: col-resize;
    background: transparent;
    transition: background-color 0.15s ease;
  }

  .md-sidebar__resizer:hover,
  .md-sidebar__resizer--ativo {
    background: var(--md-accent-fg-color--transparent);
  }
}

@media screen and (max-width: 76.234375em) {
  .md-sidebar__resizer {
    display: none;
  }
}

/* Abaixo de 76.25em a sidebar volta a ser a gaveta off-canvas nativa do
   tema (checkbox #__drawer, ver o input/label/hamburguer adicionados no
   cabeçalho por build_playbook_site.py) — escondida por padrão, abre por
   cima do conteúdo com um botão de três tracinhos, igual ao mkdocs-material
   de verdade. Não precisamos mais reescrever o acordeão/scroll aqui: o CSS
   do tema já cobre esse breakpoint sozinho, a única peça que faltava era
   o HTML do checkbox/gaveta/botão. */