/*
  Adversaria — publish.css
  -----------------------------------
  christianmd.wiki — wiki pessoal de Christian Aguiar.
  IA, biohacking, filosofia, futurismo, ensaios, paternidade.

  Direção visual: minimalismo editorial sépia, biblioteca particular.
  - Headings: Newsreader (display, axis opsz 6-72, peso 700 roman)
  - Corpo:   Literata (DNA Bookerly, leitura digital longa)
  - Paleta:  sépia warm — bg #FAF7EF, hairline #D9CFB8
  - Body 19px, coluna ~680px, drop cap discreto, ornament `· · ·`
  - Accent azul editorial #1F4D8C (sóbrio, harmoniza com sépia)

  Limitação descoberta: Publish dá 404 para .woff2 do vault.
  Fontes carregadas via @import Google Fonts (validado empiricamente).
  `!important` usado apenas onde a cascata do app.css do Publish
  sobrescreve regras (especialmente .page-header).

  Ownership: Claude (skill frontend-design).
  Última revisão: 2026-05-06.
*/

@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;1,7..72,400;1,7..72,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   1. Tokens — paleta sépia "biblioteca particular"
   ============================================================ */

:root {
  --cmd-bg:            #FAF7EF;
  --cmd-bg-elevated:   #F2EDE0;
  --cmd-fg:            #2A2825;
  --cmd-fg-muted:      #5C5751;
  --cmd-fg-faint:      #8A8479;
  --cmd-border:        #D9CFB8;
  --cmd-border-soft:   #ECE3CC;
  --cmd-accent:        #0F5BCE;  /* azul vivo editorial */
  --cmd-accent-hover:  #0840A0;
  --cmd-accent-soft:   rgba(15, 91, 206, 0.16);
  --cmd-accent-warm:   #C9A96E;
  --cmd-terracota:     #B8552F;  /* drop cap, ornaments, section markers */
  --cmd-dropcap:       #B8552F;
  --cmd-mark:          #F4E4B8;

  /* Tipografia editorial */
  --cmd-font-display:  "Newsreader", "Iowan Old Style", "Palatino Linotype",
                       Palatino, "Charter", Georgia, serif;
  --cmd-font-body:     "Literata", "Iowan Old Style", "Palatino Linotype",
                       Charter, Georgia, serif;
  --cmd-font-mono:     "JetBrains Mono", "iA Writer Mono", "SF Mono",
                       Menlo, Consolas, monospace;

  /* Layout */
  --cmd-measure:       45rem;     /* ~720px — mais respiro horizontal */
  --cmd-radius:        3px;
  --cmd-line:          1.75;
  --cmd-line-tight:    1.05;

  /* Mapeamento para variáveis nativas do Obsidian Publish */
  --background-primary:        var(--cmd-bg);
  --background-primary-alt:    var(--cmd-bg);
  --background-secondary:      var(--cmd-bg-elevated);
  --background-secondary-alt:  var(--cmd-bg-elevated);
  --background-modifier-border: var(--cmd-border);
  --text-normal:               var(--cmd-fg);
  --text-muted:                var(--cmd-fg-muted);
  --text-faint:                var(--cmd-fg-faint);
  --text-accent:               var(--cmd-accent);
  --text-accent-hover:         var(--cmd-accent-hover);
  --text-selection:            var(--cmd-accent-soft);
  --interactive-accent:        var(--cmd-accent);
  --interactive-accent-hover:  var(--cmd-accent-hover);
}

.theme-dark {
  /* Dark sépia — biblioteca particular à noite */
  --cmd-bg:            #1A1612;
  --cmd-bg-elevated:   #211C16;
  --cmd-fg:            #E8DECB;
  --cmd-fg-muted:      #A89A82;
  --cmd-fg-faint:      #6B5F4D;
  --cmd-border:        #3A3025;
  --cmd-border-soft:   #2C2419;
  --cmd-accent:        #5B9BFF;
  --cmd-accent-hover:  #82B4FF;
  --cmd-accent-soft:   rgba(91, 155, 255, 0.18);
  --cmd-accent-warm:   #C9A96E;
  --cmd-terracota:     #D87547;
  --cmd-dropcap:       #D87547;
  --cmd-mark:          #4A3D18;
}

/* ============================================================
   2. Reset
   ============================================================ */

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

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  text-size-adjust: 100%;
}

/* Especificidade alta (html body) para vencer cascata do Publish.
   O tema padrão define font-size em body e em `.markdown-preview-view p`
   com regra interna; precisamos chegar com especificidade igual ou maior
   + !important em todos os elementos de leitura. */
html body,
html body .markdown-preview-view,
html body .markdown-rendered,
html body .published-container {
  background: var(--cmd-bg) !important;
  color: var(--cmd-fg) !important;
  font-family: var(--cmd-font-body) !important;
  font-size: 21px !important;
  line-height: var(--cmd-line) !important;
  font-weight: 400;
  letter-spacing: 0;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

/* Garantir que parágrafos herdam o tamanho do body (21px).
   Bug histórico: usava `1rem` (relativo ao <html>=16px), não 21px.
   `inherit` resolve — o parágrafo herda o body ancestral. */
html body .markdown-preview-view p,
html body .markdown-preview-view li,
html body .markdown-rendered p,
html body .markdown-rendered li {
  font-size: inherit !important;
  line-height: 1.75 !important;
}

::selection {
  background: var(--cmd-accent-soft);
  color: var(--cmd-fg);
}

/* ============================================================
   3. Layout — Publish columns
   ============================================================ */

.published-container { background: var(--cmd-bg); }

/* Esconder Graph View (MVP) */
.graph-view-outer,
.graph-view-container,
.published-container .site-body-right-column,
.published-container .site-body-right-column-site-logo {
  display: none !important;
}

.published-container .site-body-center-column {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: block !important;
}

.published-container .render-container,
.published-container .render-container-inner,
.published-container .publish-renderer,
.published-container .markdown-preview-view {
  width: 100% !important;
  max-width: none !important;
}

.published-container .markdown-preview-sizer.markdown-preview-section {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--cmd-measure) !important;
  padding: 1.5rem 1.75rem 6rem !important;
}

/* Sidebar (quando visível) */
.site-body-left-column {
  background: var(--cmd-bg);
  border-right: 1px solid var(--cmd-border);
  padding: 2.5rem 1.25rem;
  font-size: 0.92rem;
}

.site-body-left-column .nav-folder-title,
.site-body-left-column .nav-file-title {
  color: var(--cmd-fg-muted);
  padding: 0.18em 0.4em;
  border-radius: var(--cmd-radius);
  transition: color 0.12s ease, background 0.12s ease;
}

.site-body-left-column .nav-folder-title {
  font-family: var(--cmd-font-display);
  font-style: italic;
  color: var(--cmd-fg);
}

.site-body-left-column .nav-file-title:hover {
  color: var(--cmd-fg);
  background: var(--cmd-bg-elevated);
}

.site-body-left-column .nav-file-title.is-active {
  color: var(--cmd-accent);
  background: var(--cmd-accent-soft);
}

/* ============================================================
   4. Site header
   ============================================================ */

.published-container .site-header {
  background: var(--cmd-bg);
  border-bottom: 1px solid var(--cmd-border);
  max-width: var(--cmd-measure);
  margin: 0 auto;
  padding: 1.25rem 1.75rem;
  position: relative;
}

/* "vol. I · maio 2026" no canto direito — marca de publicação periódica.
   Posicionado absolutamente para não competir com o site name + tagline. */
.published-container .site-header::after {
  content: "vol. I · maio 2026";
  position: absolute;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--cmd-font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 18;
  font-size: 0.85rem;
  color: var(--cmd-fg-faint);
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .published-container .site-header::after { display: none; }
}

.published-container .site-header-text,
.site-body-left-column-site-name {
  font-family: var(--cmd-font-display) !important;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--cmd-fg) !important;
  text-decoration: none;
}

.published-container .site-header-text:hover {
  color: var(--cmd-fg);
  text-decoration: none;
}

/* ============================================================
   5. Page title (h1.page-header injetado pelo Publish)

   Newsreader 700 ROMAN — gravidade de título de capítulo.
   Crossbar do H grosso e ancorado, terminais sólidos. Axis opsz 60
   ajusta o desenho para o tamanho display.
   ============================================================ */

.markdown-preview-sizer .mod-header { margin-bottom: 0; }

.markdown-preview-sizer .mod-header .page-header,
h1.page-header {
  font-family: var(--cmd-font-display) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-variation-settings: "opsz" 60 !important;
  font-size: 2.4rem !important;
  letter-spacing: -0.015em !important;
  line-height: var(--cmd-line-tight) !important;
  margin: 0.6rem 0 0.15em !important;
  color: var(--cmd-fg) !important;
}

/* Hairline decorativa abaixo do h1 — ancora o título sem precisar
   de hr horizontal completa. Espaço comprimido para conectar h1
   ao subtítulo e ao lead como uma unidade visual coesa. */
.markdown-preview-sizer .mod-header .page-header::after,
h1.page-header::after {
  content: "";
  display: block;
  width: 60px;
  height: 0.5px;
  background: var(--cmd-terracota);
  margin: 0.3em 0 0.5em;
}

/* Versão com glifo opcional — comentar a regra acima e descomentar esta:
.markdown-preview-sizer .mod-header .page-header::after {
  content: "—— ❧ ——";
  font-family: var(--cmd-font-display);
  font-style: italic;
  color: var(--cmd-terracota);
  font-size: 14px;
  letter-spacing: 0.4em;
  display: block;
  margin: 0.5em 0 0.8em;
} */

/* ============================================================
   6. Tipografia de conteúdo
   ============================================================ */

.markdown-preview-view {
  font-family: var(--cmd-font-body);
  font-size: 1rem;
  line-height: var(--cmd-line);
  color: var(--cmd-fg);
}

.markdown-preview-view p {
  margin: 0 0 1.1em;
  font-family: var(--cmd-font-body);
}

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  font-family: var(--cmd-font-display) !important;
  line-height: var(--cmd-line-tight);
  letter-spacing: -0.01em;
  color: var(--cmd-fg) !important;
}

/* h1 do markdown — mesmo tratamento do page-header (roman 700) */
.markdown-preview-view h1 {
  font-weight: 700 !important;
  font-style: normal !important;
  font-variation-settings: "opsz" 60 !important;
  font-size: 2.0em !important;
  margin: 0 0 0.3em !important;
  letter-spacing: -0.015em !important;
}

.markdown-preview-view h2 {
  font-weight: 600 !important;
  font-variation-settings: "opsz" 36 !important;
  font-size: 1.43em !important;
  margin: 2.2em 0 0.7rem !important;
  padding-top: 1.4em !important;
  border-top: 1px solid var(--cmd-border);
}

/* Section markers numerados em romano: "I §", "II §", "III §"...
   Counter no sizer, increment a cada h2. */
.markdown-preview-sizer {
  counter-reset: section item-list;
}

.markdown-preview-view h2 {
  counter-increment: section;
}

.markdown-preview-view h2::before {
  content: counter(section, upper-roman) " § ";
  font-family: var(--cmd-font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  color: var(--cmd-terracota);
  margin-right: 0.2em;
  font-size: 0.8em;
  letter-spacing: 0.04em;
}

.markdown-preview-view h3 {
  font-weight: 600 !important;
  font-variation-settings: "opsz" 24 !important;
  font-size: 1.09em !important;
  margin: 1.8em 0 0.4em !important;
}

.markdown-preview-view h4 {
  font-weight: 500 !important;
  font-size: 0.91em !important;
  font-style: italic !important;
  margin: 1.5em 0 0.3em !important;
}

.markdown-preview-view h5,
.markdown-preview-view h6 {
  font-size: 0.85em !important;
  font-family: var(--cmd-font-body) !important;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--cmd-fg-muted) !important;
  margin: 1.4em 0 0.3em !important;
}

.markdown-preview-view strong { color: var(--cmd-fg); font-weight: 600; }
.markdown-preview-view em { font-style: italic; }

/* ============================================================
   7. Subtítulo da home — `*texto*` standalone após h1

   publish.js detecta `<p>` com APENAS um `<em>` filho e marca
   o `.el-p` wrapper com `.is-subtitle`. Renderiza como italic
   sépia, alinhado à esquerda, abaixo do h1, criando hierarquia
   três níveis: page label · subtítulo · prosa.
   ============================================================ */

.markdown-preview-sizer .el-p.is-subtitle p {
  font-family: var(--cmd-font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: 1rem;
  color: var(--cmd-dropcap);
  margin: 0 0 1.6rem;
  letter-spacing: 0.005em;
}

.markdown-preview-sizer .el-p.is-subtitle p em {
  font-style: italic;
  color: inherit;
}

/* ============================================================
   8. Lead paragraph + drop cap

   Classe explícita `.lead` no markdown via HTML inline:
       <p class="lead">Texto de abertura...</p>
   Resolve dois problemas:
     - Drop cap robusto (não depende de heurística do publish.js)
     - Diferenciação editorial do parágrafo de abertura ("lede")

   Drop cap em terracota Newsreader 700, 4.6em, axis opsz 144
   (capitular medieval autêntica, ponto focal sem ornamento).

   `.is-lead` mantido como fallback para compatibilidade com o
   publish.js — funciona se a nota não tem `<p class="lead">`.
   ============================================================ */

html body .markdown-preview-view p.lead,
html body .markdown-preview-rendered p.lead {
  font-size: 1.15em !important;
  color: #1A1815 !important;
  line-height: 1.65 !important;
  margin: 0 0 1.2em !important;
}

/* Small caps na primeira linha do lead — sotaque editorial clássico
   (NYRB, Aeon, livros de ensaio). Sutil, dá presença sem mais estrutura. */
html body .markdown-preview-view p.lead::first-line {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

/* Clear no parágrafo seguinte ao lead — evita que o texto suba
   ao lado do drop cap. */
html body .markdown-preview-view p.lead + p,
.markdown-preview-sizer .el-p:has(p.lead) + .el-p p {
  clear: left;
}

.markdown-preview-view p.lead::first-letter,
.markdown-preview-sizer .el-p.is-lead p::first-letter {
  font-family: var(--cmd-font-display);
  font-weight: 700;
  font-variation-settings: "opsz" 144;
  font-style: normal;
  font-size: 4.6em;
  float: left;
  line-height: 0.84;
  padding: 0.05em 0.14em 0 0;
  color: var(--cmd-dropcap);
}

/* Clear no parágrafo seguinte: evita "grudação" causada pelo float */
.markdown-preview-view p.lead + p,
.markdown-preview-sizer .el-p.is-lead + .el-p p {
  clear: left;
}

/* ============================================================
   9. Links
   ============================================================ */

/* Especificidade alta para vencer cor padrão do Publish em internal-link */
html body .markdown-preview-view a,
html body .markdown-preview-view .internal-link,
html body .markdown-preview-view .external-link,
html body a.internal-link,
html body a.external-link {
  color: var(--cmd-accent) !important;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--cmd-accent) 35%, transparent);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.22em;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

html body .markdown-preview-view a:hover,
html body .markdown-preview-view .internal-link:hover,
html body .markdown-preview-view .external-link:hover,
html body a.internal-link:hover,
html body a.external-link:hover {
  color: var(--cmd-accent-hover) !important;
  text-decoration-color: var(--cmd-accent-hover);
}

.markdown-preview-view .internal-link.is-unresolved {
  color: var(--cmd-fg-faint);
  text-decoration-style: dotted;
  text-decoration-color: var(--cmd-fg-faint);
}

.markdown-preview-view .internal-link.is-unresolved:hover {
  color: var(--cmd-fg-muted);
}

.markdown-preview-view .external-link::after { content: ""; }

/* ============================================================
   10. Listas

   Estrutura sugerida em markdown para listas-índice:

     - [[Skills e IA]]
       *automação, agentes, prompt engineering*

   Cada item vira um link em Newsreader 500 + descrição em
   Literata italic abaixo, separados por hairline sutil.

   Em listas comuns (sem `<em>` standalone), comportamento
   default — bullets sépia, padding moderado.
   ============================================================ */

.markdown-preview-view ul,
.markdown-preview-view ol {
  padding-left: 1.5em;
  margin-block: 1em;
}

.markdown-preview-view li { margin-block: 0.35em; }
.markdown-preview-view li::marker { color: var(--cmd-fg-faint); }

.markdown-preview-view ul ul,
.markdown-preview-view ol ol,
.markdown-preview-view ul ol,
.markdown-preview-view ol ul {
  margin-block: 0.35em;
}

/* Lista-índice: item com descrição em italic (último <em> do <li>)
   vira block standalone abaixo do link, com hairline separador
   e numeração romana minúscula em terracota italic.

   Convenção markdown:
       - [[Skills e IA]]
         *automacao, agentes, prompt engineering*

   Renderiza como `<li><a>Skills e IA</a> <em>automacao...</em></li>`.
   O `em:last-child` é a descrição.

   Counter `item-list` é resetado a cada h2 (via h2 ~ ul) para
   contar i, ii, iii dentro de cada seção independente. */

.markdown-preview-view ul li > em:last-child {
  display: block;
  font-family: var(--cmd-font-body);
  font-style: italic;
  font-size: 0.92em;
  color: var(--cmd-fg-muted);
  margin-top: 0.25em;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.markdown-preview-view ul:has(li > em:last-child) {
  counter-reset: item-list;
  list-style: none;
  padding-left: 0;
}

.markdown-preview-view ul:has(li > em:last-child) > li {
  counter-increment: item-list;
  position: relative;
  padding: 0.85em 0 0.85em 2.4em;
  border-bottom: 0.5px solid var(--cmd-border-soft);
  margin-block: 0;
}

.markdown-preview-view ul:has(li > em:last-child) > li::marker {
  content: none;
}

.markdown-preview-view ul:has(li > em:last-child) > li::before {
  content: counter(item-list, lower-roman) ". ";
  position: absolute;
  left: 0.4em;
  top: 1em;
  font-family: var(--cmd-font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  color: var(--cmd-terracota);
  font-size: 0.9em;
  letter-spacing: 0.02em;
}

.markdown-preview-view ul:has(li > em:last-child) > li:last-child {
  border-bottom: 0;
}

html body .markdown-preview-view ul:has(li > em:last-child) > li > a,
html body .markdown-preview-view ul:has(li > em:last-child) > li > .internal-link {
  font-family: var(--cmd-font-display) !important;
  font-weight: 500 !important;
  font-variation-settings: "opsz" 24 !important;
  font-size: 1.15em !important;
  text-underline-offset: 5px !important;
}

/* ============================================================
   11. Blockquote
   ============================================================ */

.markdown-preview-view blockquote {
  margin: 1.5em 0;
  padding: 0.2em 0 0.2em 1.4em;
  border-left: 2px solid var(--cmd-accent-warm);
  color: var(--cmd-fg-muted);
  font-style: italic;
  background: transparent;
}

.markdown-preview-view blockquote p { margin-block: 0.6em; }
.markdown-preview-view blockquote em { color: var(--cmd-fg); font-style: normal; }

/* ============================================================
   12. Code
   ============================================================ */

.markdown-preview-view code,
.markdown-preview-view pre {
  font-family: var(--cmd-font-mono);
  font-feature-settings: normal;
}

.markdown-preview-view :not(pre) > code {
  background: var(--cmd-bg-elevated);
  border: 1px solid var(--cmd-border-soft);
  padding: 0.08em 0.38em;
  border-radius: var(--cmd-radius);
  font-size: 0.86em;
  color: var(--cmd-fg);
}

.markdown-preview-view pre {
  background: var(--cmd-bg-elevated);
  border: 1px solid var(--cmd-border-soft);
  border-radius: var(--cmd-radius);
  padding: 1em 1.15em;
  margin: 1.5em 0;
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.55;
}

.markdown-preview-view pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* ============================================================
   13. Callouts
   ============================================================ */

.markdown-preview-view .callout {
  background: var(--cmd-bg-elevated);
  border: 1px solid var(--cmd-border-soft);
  border-left: 2px solid var(--cmd-fg-faint);
  border-radius: var(--cmd-radius);
  padding: 0.9em 1.15em;
  margin: 1.5em 0;
  color: var(--cmd-fg);
  --callout-color: transparent;
}

.markdown-preview-view .callout[data-callout="note"],
.markdown-preview-view .callout[data-callout="info"],
.markdown-preview-view .callout[data-callout="tip"],
.markdown-preview-view .callout[data-callout="quote"] {
  border-left-color: var(--cmd-accent);
}

.markdown-preview-view .callout[data-callout="warning"],
.markdown-preview-view .callout[data-callout="caution"],
.markdown-preview-view .callout[data-callout="danger"] {
  border-left-color: var(--cmd-accent-warm);
}

.markdown-preview-view .callout-title {
  font-family: var(--cmd-font-body);
  font-weight: 600;
  font-size: 0.92em;
  letter-spacing: 0.02em;
  color: var(--cmd-fg);
  padding: 0;
  background: transparent;
  margin-bottom: 0.3em;
}

.markdown-preview-view .callout-icon {
  color: var(--cmd-fg-muted);
  width: 14px;
  height: 14px;
}

.markdown-preview-view .callout-content p:first-child { margin-top: 0; }
.markdown-preview-view .callout-content p:last-child  { margin-bottom: 0; }

/* ============================================================
   14. Imagens & embeds
   ============================================================ */

.markdown-preview-view img {
  max-width: 100%;
  height: auto;
  border-radius: var(--cmd-radius);
  box-shadow:
    0 1px 0 var(--cmd-border-soft),
    0 14px 28px -18px rgba(42, 40, 37, 0.22);
  margin: 1.6em auto;
  display: block;
}

.theme-dark .markdown-preview-view img {
  box-shadow:
    0 1px 0 var(--cmd-border),
    0 14px 32px -20px rgba(0, 0, 0, 0.6);
}

.markdown-preview-view p > img + em,
.markdown-preview-view img + em {
  display: block;
  text-align: center;
  font-size: 0.86em;
  color: var(--cmd-fg-muted);
  margin-top: -0.6em;
}

.markdown-preview-view .markdown-embed,
.markdown-preview-view .internal-embed {
  border: 1px solid var(--cmd-border-soft);
  border-radius: var(--cmd-radius);
  padding: 1em 1.15em;
  background: var(--cmd-bg-elevated);
  margin: 1.5em 0;
}

.markdown-preview-view .markdown-embed-title {
  font-family: var(--cmd-font-display);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.4em;
  color: var(--cmd-fg);
}

/* ============================================================
   15. Tabelas
   ============================================================ */

.markdown-preview-view table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
  font-size: 0.94em;
}

.markdown-preview-view th,
.markdown-preview-view td {
  text-align: left;
  padding: 0.55em 0.75em;
  border-bottom: 1px solid var(--cmd-border-soft);
}

.markdown-preview-view th {
  font-family: var(--cmd-font-body);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--cmd-fg-muted);
  border-bottom: 1px solid var(--cmd-border);
}

/* ============================================================
   16. Tags
   ============================================================ */

.markdown-preview-view .tag {
  font-family: var(--cmd-font-mono);
  font-size: 0.78em;
  color: var(--cmd-fg-muted);
  background: transparent;
  border: 1px solid var(--cmd-border-soft);
  padding: 0.05em 0.5em;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.markdown-preview-view .tag:hover {
  color: var(--cmd-accent);
  border-color: var(--cmd-accent);
}

/* ============================================================
   17. HR e ornaments editoriais

   Convenções do markdown:
   - `---`              → hr discreto, hairline sutil entre seções
   - `<div class="ornament">❧</div>` → florão de manuscrito (aldus
     leaf), terracota, italic Newsreader. Para fechamento de seção
     ou pausa narrativa importante.
   ============================================================ */

.markdown-preview-view hr {
  border: 0;
  border-top: 0.5px solid var(--cmd-border);
  height: 0;
  background: transparent;
  margin: 2rem 0;
  width: 100%;
}

/* Asterism `⁂` (U+2042) em fonte serif system — renderiza limpo em
   qualquer browser, sem depender de glifos custom (Newsreader não tem ❧). */
.markdown-preview-view .ornament,
.markdown-preview-sizer .ornament {
  text-align: center;
  color: var(--cmd-terracota);
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: 0;
  margin: 1.8rem 0 1.2rem;
  padding: 0;
  line-height: 1;
}

/* ============================================================
   18. Mark
   ============================================================ */

.markdown-preview-view mark {
  background: var(--cmd-mark);
  color: var(--cmd-fg);
  padding: 0 0.15em;
  border-radius: 2px;
}

/* ============================================================
   19. Search
   ============================================================ */

.search-input-container,
input.search-input {
  background: var(--cmd-bg-elevated);
  border: 1px solid var(--cmd-border);
  border-radius: var(--cmd-radius);
  color: var(--cmd-fg);
  font-family: var(--cmd-font-body);
  font-size: 0.95rem;
  padding: 0.45em 0.7em;
  box-shadow: none;
}

input.search-input::placeholder { color: var(--cmd-fg-faint); }

input.search-input:focus,
.search-input-container:focus-within {
  outline: none;
  border-color: var(--cmd-accent);
  box-shadow: 0 0 0 3px var(--cmd-accent-soft);
}

/* ============================================================
   20. Footer
   ============================================================ */

/* Footer com marca própria — Newsreader italic muted, hairline acima.
   "rascunhos avulsos · christianmd.wiki" à esquerda, "Powered by..."
   no centro (preservado por TOS), "cc by-nc · maio 2026" à direita. */
.site-footer,
.published-container .site-footer {
  /* Bug fix: app.css do Publish define position:fixed z-index:15, o que
     fazia o footer flutuar sobre o conteúdo (especialmente em mobile).
     `static !important` devolve ao fluxo normal do documento. */
  position: static !important;
  z-index: auto !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--cmd-bg);
  color: var(--cmd-fg-faint);
  font-family: var(--cmd-font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 18;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 1rem 1.75rem 2rem;
  border-top: 0.5px solid var(--cmd-border);
  max-width: var(--cmd-measure);
  margin: 2.5rem auto 0;
}

.site-footer::before,
.published-container .site-footer::before {
  content: "rascunhos avulsos · christianmd.wiki";
  color: var(--cmd-fg-faint);
  white-space: nowrap;
}

.site-footer::after,
.published-container .site-footer::after {
  content: "cc by-nc · maio 2026";
  color: var(--cmd-fg-faint);
  white-space: nowrap;
  text-align: right;
}

.site-footer a { color: var(--cmd-fg-muted); font-size: 0.78rem; opacity: 0.7; }

/* Mobile: empilhar verticalmente */
@media (max-width: 720px) {
  .site-footer,
  .published-container .site-footer {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }
}

/* ============================================================
   21. Acessibilidade
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--cmd-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   22. Responsivo
   ============================================================ */

@media (max-width: 900px) {
  .published-container .markdown-preview-sizer.markdown-preview-section {
    padding: 2rem 1.5rem 5rem !important;
  }
}

/* Touch devices (celulares/tablets) recebem corpo maior independente do
   viewport reportado. Resolve o caso do Samsung Internet / Chrome Android
   em "modo desktop", que ignora max-width:720px porque reporta 980/1024 px.
   `(pointer: coarse)` detecta o tipo de input (dedo), não o tamanho. */
@media (max-width: 720px), (pointer: coarse) {
  body { font-size: 22px; }

  .published-container .markdown-preview-sizer.markdown-preview-section {
    padding: 1.5rem 1.25rem 4rem !important;
  }

  .markdown-preview-sizer .mod-header .page-header,
  .markdown-preview-view h1 { font-size: 1.8em !important; }
  .markdown-preview-view h2 { font-size: 1.25em !important; padding-top: 1.1em !important; margin-top: 1.8em !important; }
  .markdown-preview-view h3 { font-size: 1.05em !important; }

  .markdown-preview-sizer .el-h1 + .el-p p::first-letter,
  .markdown-preview-sizer .mod-header + .el-h1 + .el-p p::first-letter,
  .markdown-preview-sizer .mod-header + .el-p p::first-letter {
    font-size: 1.9em;
  }

  .markdown-preview-view pre {
    border-radius: 0;
    margin-inline: -1.25rem;
    border-left: none;
    border-right: none;
  }
}

/* ============================================================
   23. Print
   ============================================================ */

@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .site-body-left-column,
  .site-header,
  .site-footer { display: none !important; }
  .markdown-preview-view a {
    color: #000;
    text-decoration: underline;
  }
  .markdown-preview-view a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
  .markdown-preview-view img {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}