/* ==========================================================================
   O texto é livro. A moldura é Vim.

   A superfície de leitura é tratada como página de livro: serifa desenhada
   para tela, medida curta, fundo neutro. Tudo que serve à navegação ou ao
   estado — statusline, coluna de tis, capa — é tratado como interface do
   editor, em monoespaçada.

   A paleta continua saindo dos assets do repositório:
     #019833  amostrado no diamante de docs/imgs/vimlogo.png
     #00ae00  declarado em docs/imgs/capa.svg (o verde canônico do vim.org)

   Contrastes medidos pela fórmula sRGB da WCAG 2.1.
   ========================================================================== */

:root {
  --md-text-font: "Literata";
  --md-code-font: "IBM Plex Mono";

  /* Verde da marca, como aparece no logo */
  --vim-diamond: #019833; /* vimlogo.png */
  --vim-pure: #00ae00; /* capa.svg / vim.org */

  /* Papel e tinta. O papel não é branco puro nem creme: é um branco com um
     traço mínimo de verde, do mesmo lado do círculo cromático que a marca. */
  --vim-papel: #fcfcfb;
  --vim-papel-2: #f4f6f3;
  --vim-tinta: #15181a;
  --vim-apagado: #59635d;
  --vim-regua: #e1e6e2;

  /* Modo claro. O #01892e anterior mede 4,55:1 sobre branco puro, mas só
     4,43:1 sobre este papel — reprovaria AA. Dois pontos mais escuro devolve
     a margem sem diferença visível. */
  --vim-ink: #01872d; /* 4,54:1 sobre o papel — AA */
  --vim-ink-deep: #016723; /* 7,08:1 com texto branco em cima */

  /* Modo escuro: terminal, não slate azulado */
  --vim-noite: #0e1211;
  --vim-noite-2: #151a18;
  --vim-noite-tinta: #dce3de;
  --vim-noite-apagado: #8c9990;
  --vim-noite-regua: #232a26;
  --vim-pure-hi: #00c700; /* 8,24:1 sobre o fundo noturno */

  /* O modo VISUAL do Vim, único acento fora do verde. Aparece só no chip da
     statusline e no realce de seleção. */
  --vim-visual: #a85700; /* 5,21:1 com texto branco em cima */
  --vim-visual-noite: #e8a33d; /* 8,75:1 com texto escuro em cima */

  /* Os tis da capa. A cor de régua (#e1e6e2) media 1,16:1 sobre a capa e
     sumia; estes ficam acima de 3:1, o mínimo para elemento gráfico. */
  --vim-til: #7d877f; /* 3,42:1 sobre a capa clara */
  --vim-til-noite: #657367; /* 3,52:1 sobre a capa escura */
}

/* --------------------------------------------------------------------------
   Modo claro
   -------------------------------------------------------------------------- */

[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--vim-papel);
  --md-default-fg-color: var(--vim-tinta);
  --md-default-fg-color--light: var(--vim-apagado);
  --md-default-fg-color--lighter: #8b948e;
  --md-default-fg-color--lightest: var(--vim-regua);

  /* A barra do topo recua. No Vim a moldura fica embaixo — statusline e linha
     de comando — e o topo da janela é texto até a borda. Enquanto o verde era
     a única faixa pesada da página ele carregava a marca sozinho; agora que a
     statusline existe, o texto ficaria imprensado entre duas faixas fortes, e
     a de cima é a que não tem correspondente no editor. */
  --md-primary-fg-color: var(--vim-papel-2);
  --md-primary-fg-color--light: var(--vim-papel);
  --md-primary-fg-color--dark: var(--vim-regua);
  --md-primary-bg-color: var(--vim-tinta);
  --md-primary-bg-color--light: #15181ab3;

  --md-accent-fg-color: var(--vim-ink-deep);
  --md-accent-fg-color--transparent: #0167231a;
  --md-accent-bg-color: #fff;
  --md-accent-bg-color--light: #ffffffb3;

  --md-typeset-color: var(--vim-tinta);
  --md-typeset-a-color: var(--vim-ink);
  --md-code-bg-color: var(--vim-papel-2);
  --md-code-fg-color: #2a3230;

  /* O rodapé acompanha o topo. Deixá-lo na faixa escura padrão do tema só
     mudaria o sanduíche de lugar: o texto ficaria entre uma barra silenciosa
     em cima e um bloco pesado embaixo.

     A navegação e o crédito "Made with Zensical" usam o mesmo tom — dois tons
     ali criavam uma terceira faixa entre a navegação e a statusline, que é a
     única barra que deve pesar visualmente. Ficam separados por um fiapo. */
  --md-footer-bg-color: var(--vim-papel-2);
  --md-footer-bg-color--dark: var(--vim-papel-2);
  --md-footer-fg-color: var(--vim-tinta);
  --md-footer-fg-color--light: var(--vim-apagado);
  --md-footer-fg-color--lighter: #8b948e;

  --vim-superficie-2: var(--vim-papel-2);
  --vim-texto: var(--vim-tinta);
  --vim-fraco: var(--vim-apagado);
  --vim-linha: var(--vim-regua);
  --vim-acento: var(--vim-ink);
  --vim-chip: var(--vim-ink-deep);
  --vim-chip-texto: #fff;
  --vim-chip-visual: var(--vim-visual);
  --vim-chip-visual-texto: #fff;
  --vim-til-cor: var(--vim-til);
}

/* --------------------------------------------------------------------------
   Modo escuro
   Aqui o verde do vim.org entra sem retoque. Sobre um fundo mais profundo que
   o slate padrão ele sobe de 5,41:1 para 8,24:1.
   -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--vim-noite);
  --md-default-fg-color: var(--vim-noite-tinta);
  --md-default-fg-color--light: var(--vim-noite-apagado);
  --md-default-fg-color--lighter: #66736c;
  --md-default-fg-color--lightest: var(--vim-noite-regua);

  --md-primary-fg-color: var(--vim-noite-2);
  --md-primary-fg-color--light: var(--vim-diamond);
  --md-primary-fg-color--dark: #0a0d0c;
  --md-primary-bg-color: var(--vim-noite-tinta);
  --md-primary-bg-color--light: #dce3deb3;

  --md-accent-fg-color: var(--vim-pure-hi);
  --md-accent-fg-color--transparent: #00c7001a;
  --md-accent-bg-color: var(--vim-noite);
  --md-accent-bg-color--light: #0e1211b3;

  --md-typeset-color: var(--vim-noite-tinta);
  --md-typeset-a-color: var(--vim-pure-hi);
  --md-code-bg-color: var(--vim-noite-2);
  --md-code-fg-color: #b7c3bc;

  --md-footer-bg-color: var(--vim-noite-2);
  --md-footer-bg-color--dark: var(--vim-noite-2);

  --vim-superficie-2: var(--vim-noite-2);
  --vim-texto: var(--vim-noite-tinta);
  --vim-fraco: var(--vim-noite-apagado);
  --vim-linha: var(--vim-noite-regua);
  --vim-acento: var(--vim-pure-hi);
  --vim-chip: var(--vim-pure);
  --vim-chip-texto: var(--vim-noite);
  --vim-chip-visual: var(--vim-visual-noite);
  --vim-chip-visual-texto: var(--vim-noite);
  --vim-til-cor: var(--vim-til-noite);
}

/* --------------------------------------------------------------------------
   A metade "livro": a superfície de leitura.

   Literata foi encomendada para o Google Play Books e desenhada para leitura
   longa em tela — robusta o bastante para conviver com a monoespaçada ao lado
   sem parecer frágil.
   -------------------------------------------------------------------------- */

body,
input,
.md-typeset {
  font-family: "Literata", "Iowan Old Style", Charter, Georgia, serif;
}

/* O espaço que a statusline ocupa, reservado por statusline.js. Fica em zero
   se o script não rodar, e aí nada é coberto porque a barra também não existe. */
body {
  padding-bottom: var(--vimbook-status-altura, 0px);
}

.md-typeset {
  font-size: 0.82rem;
  line-height: 1.75;
}

/* Medida de leitura curta. O que é largo por natureza — código, tabela,
   imagem — fica de fora do limite de propósito. */
.md-typeset > p,
.md-typeset > ul,
.md-typeset > ol,
.md-typeset > blockquote,
.md-typeset > h2,
.md-typeset > h3,
.md-typeset > h4 {
  max-width: 34rem;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.md-typeset h1 {
  font-size: 1.85rem;
  line-height: 1.18;
  color: var(--vim-texto);
  margin-bottom: 1.4rem;
}

.md-typeset h2 {
  font-size: 1.32rem;
  line-height: 1.28;
}

/* --------------------------------------------------------------------------
   A metade "Vim": tudo que é interface volta para a monoespaçada.
   -------------------------------------------------------------------------- */

.md-nav,
.md-footer,
.md-header__topic,
.md-search__input,
.md-typeset code,
.md-typeset kbd {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* O tamanho precisa ser declarado no próprio link e no <span> que ele
   embrulha. Declarado só em .md-nav ele não chega ao item, que o tema
   redefine — a regra existia e não valia nada. */
.md-nav__link,
.md-nav__link .md-ellipsis {
  font-size: 0.66rem;
}

.md-nav__title,
.md-nav__title .md-ellipsis {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vim-fraco);
}

.md-typeset code {
  border: 1px solid var(--vim-linha);
  border-radius: 3px;
}

.md-typeset pre > code {
  border: 1px solid var(--vim-linha);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   A barra do topo, agora recuada nos dois modos.

   Sem a faixa de cor sólida, ela precisa de um fiapo para não encostar no
   papel. O verde sai da faixa inteira e sobra onde é a própria marca: o
   diamante do logo, que sozinho mede 4,29:1 no claro e 7,69:1 no escuro.
   -------------------------------------------------------------------------- */

.md-header {
  border-bottom: 1px solid var(--vim-linha);
}

.md-footer {
  border-top: 1px solid var(--vim-linha);
}

.md-footer-meta {
  border-top: 1px solid var(--vim-linha);
}

.md-header__button.md-logo :is(img, svg) {
  fill: var(--vim-acento);
  color: var(--vim-acento);
}

/* O campo de busca herdava um véu claro pensado para faixa colorida. */
.md-search__form {
  background: var(--vim-superficie-2);
  border: 1px solid var(--vim-linha);
}

.md-search__form:hover {
  background: var(--vim-superficie-2);
  border-color: var(--vim-acento);
}

/* --------------------------------------------------------------------------
   Estado de link em dois canais, não só cor (WCAG 1.4.1).
   No papel a tinta escurece; no terminal o fósforo acende. Em ambos, sublinha.
   -------------------------------------------------------------------------- */

.md-typeset a:hover,
.md-typeset a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
   A statusline.

   Fixa no rodapé da janela, como no editor: modo, arquivo, posição no livro e
   régua de rolagem. É injetada por statusline.js — sem o script ela não
   existe, e por isso o espaço que ela ocupa também é reservado pelo script.
   -------------------------------------------------------------------------- */

.vimbook-status {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 5;
  display: flex;
  align-items: stretch;
  min-height: 1.5rem;
  background: var(--vim-superficie-2);
  border-top: 1px solid var(--vim-linha);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--vim-texto);
}

.vimbook-status__modo {
  display: flex;
  align-items: center;
  padding: 0 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
  background: var(--vim-chip);
  color: var(--vim-chip-texto);
}

.vimbook-status__modo[data-modo="visual"] {
  background: var(--vim-chip-visual);
  color: var(--vim-chip-visual-texto);
}

.vimbook-status__arquivo {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 0 0.7rem;
}

.vimbook-status__arquivo span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vimbook-status__dir {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
  padding: 0 0.7rem;
  color: var(--vim-fraco);
  font-variant-numeric: tabular-nums;
}

.vimbook-status__pos {
  min-width: 2.6rem;
  text-align: right;
}

/* Em tela estreita o nome do arquivo é a primeira coisa a sair. */
@media screen and (max-width: 44.9375em) {
  .vimbook-status__arquivo {
    display: none;
  }
  .vimbook-status__dir {
    flex: 1;
    justify-content: flex-end;
  }
}

/* --------------------------------------------------------------------------
   A capa: a tela de abertura do Vim.
   -------------------------------------------------------------------------- */

.vimbook-capa {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  margin: 0 0 2.5rem;
  padding: 1.6rem 0 2rem;
  background: var(--vim-superficie-2);
  border: 1px solid var(--vim-linha);
  border-radius: 4px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

.vimbook-capa__tils {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--vim-til-cor);
  user-select: none;
}

.vimbook-capa__corpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 1.2rem 1rem 0;
  text-align: center;
}

.vimbook-capa__titulo {
  margin: 0;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  line-height: 1;
  color: var(--vim-texto);
}

.vimbook-capa__sub {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--vim-fraco);
}

.vimbook-capa__cmds {
  display: grid;
  gap: 0.35rem;
  margin: 0.3rem 0 0;
  font-size: 0.66rem;
}

.vimbook-capa__cmd {
  /* zera a margem de parágrafo do tema, que triplicava o espaço entre as
     linhas e desmontava o ritmo da tela de abertura */
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(4rem, auto) auto;
  gap: 0.7rem;
  align-items: baseline;
  text-align: left;
  color: var(--vim-fraco);
}

.vimbook-capa__cmd b {
  font-weight: 500;
  color: var(--vim-acento);
}

.vimbook-capa__fim {
  margin: 0.2rem 0 0;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--vim-fraco);
}

/* O cursor de bloco do editor. */
.vimbook-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  vertical-align: -0.14em;
  background: var(--vim-acento);
  animation: vimbook-pisca 1.15s steps(1, end) infinite;
}

@keyframes vimbook-pisca {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vimbook-cursor {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Admonition "note" no verde do livro — o Material pinta de azul (#448aff).

   Só o tipo "note" muda. Os outros tipos codificam significado pela cor
   (warning laranja, danger vermelho) e perderiam a função se virassem verdes.
   -------------------------------------------------------------------------- */

[data-md-color-scheme="default"] {
  --vim-admonition: #01872d;
  --vim-admonition-tint: #01872d1a;
}

[data-md-color-scheme="slate"] {
  --vim-admonition: #00ae00;
  --vim-admonition-tint: #00ae001a;
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--vim-admonition);
}

.md-typeset .admonition.note:focus-within,
.md-typeset details.note:focus-within {
  box-shadow: 0 0 0 0.2rem var(--vim-admonition-tint);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: var(--vim-admonition-tint);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--vim-admonition);
}

.md-typeset .note > .admonition-title::after,
.md-typeset .note > summary::after {
  color: var(--vim-admonition);
}

/* --------------------------------------------------------------------------
   Modo visual: o realce de seleção do Vim, na cor do modo.
   -------------------------------------------------------------------------- */

::selection {
  background: #a8570036;
}

[data-md-color-scheme="slate"] ::selection {
  background: #e8a33d3d;
}

/* --------------------------------------------------------------------------
   A dica de atalhos abaixo do "anterior / próxima" do rodapé.

   Discreta de propósito — só precisa ser notada uma vez. Some onde não há
   teclado físico.
   -------------------------------------------------------------------------- */

.vimbook-atalhos {
  margin: 0;
  padding: 0 0.8rem 0.8rem;
  color: var(--md-footer-fg-color--light);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  text-align: center;
}

.vimbook-atalhos kbd {
  display: inline-block;
  min-width: 1.4em;
  margin: 0 0.1em;
  padding: 0.1em 0.35em;
  border: 1px solid var(--md-footer-fg-color--lighter);
  border-radius: 0.15rem;
  color: var(--md-footer-fg-color);
  font-family: inherit;
  font-size: 0.9em;
  line-height: 1.4;
  text-align: center;
}

@media (hover: none), (pointer: coarse) {
  .vimbook-atalhos {
    display: none;
  }
}