/* Família Reveno: leitura longa (opcional). Prefixo rvl-.
   Depende de tokens.css. Não redefine nenhum token existente.

   Estrutura
   <div class="rvl-layout">                     sumário à esquerda no desktop
     <nav class="rvl-toc" aria-label="Sumário">  fixo ao rolar (sticky)
     <article class="rvl-prose">                 medida de linha ideal
       <header> .rvl-kicker .rvl-title .rvl-dek .rvl-meta
       <h2 id="...">, <p>, .rvl-pull, .rvl-figure
       <div class="rvl-noted"> <p>... <a class="rvl-ref"> </p> <aside class="rvl-sidenote"> </div>
       <ol class="rvl-notes"> notas numeradas no fim

   Nota lateral: na margem direita quando o artigo tem largura (consulta de
   contêiner, não de tela); abaixo do parágrafo, como nota de rodapé, quando
   não tem. Mesma marcação, nenhum script. O número vai escrito no HTML
   (marcador e nota), para o leitor de tela ler o mesmo que se vê.

   Tema: escuro por padrão; claro sob data-rv-theme="light", data-theme,
   .rv-theme-light, .rvf-section--paper ou data-rv-surface="light". */

:root {
  /* Medida e escala seguem a seção 2.1 de FRONTS_REFERENCIA.md: quando os
     tokens --rv-measure-* e --rv-type-* entrarem em tokens.css, estes leem
     deles; até lá valem os mesmos números como reserva. */
  --rv-read-measure: var(--rv-measure-text, 68ch);
  --rv-read-body: 1.125rem;
  --rv-read-body-sm: 1.0625rem;
  --rv-read-leading: 1.7;
  --rv-read-title: var(--rv-type-h1, clamp(2.5rem, 1.6rem + 4vw, 4.5rem));
  --rv-read-h2: var(--rv-type-h2, clamp(1.875rem, 1.4rem + 2vw, 2.75rem));
  --rv-read-h3: var(--rv-type-h3, clamp(1.375rem, 1.2rem + .8vw, 1.75rem));
  --rv-read-dek: clamp(1.1875rem, 1.6vw, 1.375rem);
  --rv-read-pull: clamp(1.5rem, 2.6vw, 2rem);
  --rv-read-note: .875rem;
  --rv-read-margin: 15rem;
  --rv-read-gap: 2rem;
  --rv-read-toc: 14rem;
  --rv-read-sticky-top: 6.5rem;
}

:root, [data-rv-theme="dark"], [data-theme="dark"], .rv-theme-dark, [data-rv-surface="dark"] {
  --rvl-text: var(--rv-color-dark-text);
  --rvl-text-2: var(--rv-color-dark-text-secondary);
  --rvl-text-3: var(--rv-color-dark-text-tertiary);
  --rvl-line: var(--rv-color-dark-border);
  --rvl-accent: var(--rv-color-brand);
  --rvl-mark: color-mix(in srgb, var(--rv-color-brand) 16%, transparent);
}
[data-rv-theme="light"], [data-theme="light"], .rv-theme-light, .rvf-section--paper, [data-rv-surface="light"] {
  --rvl-text: var(--rv-color-light-text);
  --rvl-text-2: var(--rv-color-light-text-secondary);
  --rvl-text-3: var(--rv-color-light-text-tertiary);
  --rvl-line: var(--rv-color-light-border);
  --rvl-accent: var(--rv-color-brand-dark);
  --rvl-mark: color-mix(in srgb, var(--rv-color-brand) 14%, transparent);
}
/* No Evidence o acento é o verde do produto, legível nos dois fundos. */
[data-rv-product="evidence"] { --rvl-accent: var(--rv-profile-evidence-signal-on-dark); }
[data-rv-product="evidence"] [data-rv-theme="light"], [data-rv-product="evidence"] .rvf-section--paper,
[data-rv-product="evidence"] [data-rv-surface="light"], [data-rv-product="evidence"][data-rv-theme="light"] { --rvl-accent: var(--rv-profile-evidence-signal); }

/* ---------- Layout com sumário ---------- */
.rvl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rv-space-8); }
@media (min-width: 72rem) {
  .rvl-layout { grid-template-columns: var(--rv-read-toc) minmax(0, 1fr); column-gap: var(--rv-space-12); align-items: start; }
  .rvl-layout > .rvl-toc { position: sticky; inset-block-start: var(--rv-read-sticky-top); max-block-size: calc(100svh - var(--rv-read-sticky-top) - var(--rv-space-6)); overflow-y: auto; }
}
.rvl-toc { color: var(--rvl-text-2); font-size: var(--rv-size-sm); }
.rvl-toc-title { margin: 0 0 var(--rv-space-3); color: var(--rvl-text-3); font: 600 var(--rv-size-xs)/1.5 var(--rv-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.rvl-toc ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: rvl-toc; }
.rvl-toc li { counter-increment: rvl-toc; }
.rvl-toc a { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: baseline; min-block-size: 2.25rem; padding: .45rem 0 .45rem .75rem; border-inline-start: 2px solid var(--rvl-line); color: inherit; line-height: 1.4; text-decoration: none; }
.rvl-toc a::before { color: var(--rvl-text-3); font: 500 var(--rv-size-xs)/1.4 var(--rv-font-mono); content: counter(rvl-toc, decimal-leading-zero); }
.rvl-toc a:hover { color: var(--rvl-text); border-inline-start-color: var(--rvl-text-3); }
.rvl-toc a[aria-current="true"], .rvl-toc a[aria-current="location"] { color: var(--rvl-text); border-inline-start-color: var(--rvl-accent); }
.rvl-toc a:focus-visible { outline: 2px solid var(--rvl-accent); outline-offset: 2px; }

/* ---------- Corpo do texto ---------- */
.rvl-prose { container: rvl-prose / inline-size; min-inline-size: 0; color: var(--rvl-text-2); font-family: var(--rv-font-sans); font-size: var(--rv-read-body-sm); line-height: var(--rv-read-leading); }
@media (min-width: 48rem) { .rvl-prose { font-size: var(--rv-read-body); } }
.rvl-prose > *, .rvl-noted > :not(.rvl-sidenote) { max-inline-size: var(--rv-read-measure); }
.rvl-prose :where(p, ul, ol, blockquote, figure, h2, h3) { margin-block: 0; }
.rvl-prose > * + * { margin-block-start: 1.25em; }
.rvl-prose > p + p { margin-block-start: 1em; }
.rvl-prose p { text-wrap: pretty; hyphens: auto; }
.rvl-prose a:not([class]) { color: var(--rvl-text); text-decoration: underline; text-decoration-color: var(--rvl-accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.rvl-prose a:not([class]):hover { text-decoration-thickness: 2px; }
/* Voz serifada opcional para leitura longa (guias, método): Georgia do sistema, sem download. */
.rvl-prose[data-rvl-voice="serif"] p, .rvl-prose[data-rvl-voice="serif"] li, .rvl-prose[data-rvl-voice="serif"] .rvl-dek { font-family: var(--rv-profile-institutional-serif); }
.rvl-prose strong { color: var(--rvl-text); font-weight: 600; }
.rvl-prose ul, .rvl-prose ol:not([class]) { padding-inline-start: 1.25em; }
.rvl-prose li + li { margin-block-start: .4em; }
.rvl-prose mark { padding-inline: .15em; border-radius: 2px; background: var(--rvl-mark); color: var(--rvl-text); }

/* Escala de títulos: um h1 (.rvl-title) e a ordem h2, h3 dentro do artigo. */
.rvl-kicker { margin: 0; color: var(--rvl-accent); font: 600 var(--rv-size-xs)/1.6 var(--rv-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.rvl-title { max-inline-size: var(--rv-measure-title, 20ch); margin: var(--rv-space-3) 0 0; color: var(--rvl-text); font-size: var(--rv-read-title); font-weight: 600; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.rvl-dek { max-inline-size: var(--rv-measure-lead, 56ch); margin: var(--rv-space-4) 0 0; color: var(--rvl-text-2); font-size: var(--rv-read-dek); line-height: 1.5; text-wrap: pretty; }
.rvl-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: var(--rv-space-6) 0 0; padding-block-start: var(--rv-space-4); border-block-start: 1px solid var(--rvl-line); color: var(--rvl-text-3); font: 500 var(--rv-size-xs)/1.6 var(--rv-font-mono); letter-spacing: .04em; }
.rvl-prose h2, .rvl-h2 { margin-block: 2.4em 0; color: var(--rvl-text); font-size: var(--rv-read-h2); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; scroll-margin-block-start: var(--rv-read-sticky-top); }
.rvl-prose h3, .rvl-h3 { margin-block: 1.8em 0; color: var(--rvl-text); font-size: var(--rv-read-h3); font-weight: 600; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; scroll-margin-block-start: var(--rv-read-sticky-top); }
.rvl-prose h2 + *, .rvl-prose h3 + * { margin-block-start: .75em; }

/* ---------- Citação destacada ---------- */
.rvl-pull { margin: 2em 0; padding: .25em 0 .25em 1.25rem; border-inline-start: 3px solid var(--rvl-accent); }
.rvl-pull p { color: var(--rvl-text); font-size: var(--rv-read-pull); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.rvl-pull footer, .rvl-pull cite { display: block; margin-block-start: .9rem; color: var(--rvl-text-3); font: 500 var(--rv-size-xs)/1.5 var(--rv-font-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Notas laterais e notas numeradas ---------- */
.rvl-ref { display: inline-block; min-inline-size: 1.25rem; margin-inline: .05em; padding: 0 .2rem; color: var(--rvl-accent); font: 600 var(--rv-size-xs)/1 var(--rv-font-mono); text-align: center; text-decoration: none; vertical-align: super; }
.rvl-ref:hover { text-decoration: underline; }
.rvl-ref:focus-visible { outline: 2px solid var(--rvl-accent); outline-offset: 2px; border-radius: 2px; }
.rvl-noted { max-inline-size: none; }
.rvl-sidenote { margin-block-start: .9rem; padding-block-start: .6rem; border-block-start: 1px solid var(--rvl-line); color: var(--rvl-text-3); font-size: var(--rv-read-note); line-height: 1.55; }
.rvl-sidenote p { margin: 0; }
.rvl-sidenote p + p { margin-block-start: .5em; }
.rvl-note-num { margin-inline-end: .4rem; color: var(--rvl-accent); font: 600 var(--rv-size-xs)/1 var(--rv-font-mono); }
.rvl-sidenote:target, .rvl-notes li:target { background: var(--rvl-mark); }
@container rvl-prose (min-width: 56rem) {
  .rvl-noted { display: grid; grid-template-columns: minmax(0, var(--rv-read-measure)) minmax(10rem, var(--rv-read-margin)); column-gap: var(--rv-read-gap); align-items: start; }
  .rvl-noted > :not(.rvl-sidenote) { grid-column: 1; grid-row: 1; }
  .rvl-noted > .rvl-sidenote { grid-column: 2; grid-row: 1; margin-block-start: .3em; padding-block-start: 0; border-block-start: 0; border-inline-start: 1px solid var(--rvl-line); padding-inline-start: .9rem; }
  .rvl-figure[data-rvl-size="wide"] { max-inline-size: calc(var(--rv-read-measure) + var(--rv-read-gap) + var(--rv-read-margin)); }
}
.rvl-notes { margin: 3em 0 0; padding: var(--rv-space-6) 0 0 1.5rem; border-block-start: 1px solid var(--rvl-line); color: var(--rvl-text-3); font-size: var(--rv-read-note); line-height: 1.6; }
.rvl-notes li { padding-inline-start: .35rem; scroll-margin-block-start: var(--rv-read-sticky-top); }
.rvl-notes li::marker { color: var(--rvl-accent); font: 600 var(--rv-size-xs) var(--rv-font-mono); }
.rvl-notes-title { margin: 3em 0 0; color: var(--rvl-text-3); font: 600 var(--rv-size-xs)/1.5 var(--rv-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.rvl-notes-title + .rvl-notes { margin-block-start: var(--rv-space-3); }
/* Link de volta dentro do texto: sublinhado sempre, não só a cor (WCAG 1.4.1). */
.rvl-backref { margin-inline-start: .35rem; color: var(--rvl-accent); text-decoration: underline; text-underline-offset: .2em; }
.rvl-backref:hover, .rvl-backref:focus-visible { text-decoration-thickness: 2px; }

/* ---------- Figura com legenda e crédito ---------- */
.rvl-figure { margin: 2.25em 0; }
.rvl-figure img, .rvl-figure svg, .rvl-figure video { display: block; inline-size: 100%; block-size: auto; border-radius: var(--rv-radius-sm); }
.rvl-figure figcaption { display: grid; gap: .35rem; margin-block-start: .8rem; }
.rvl-caption { margin: 0; color: var(--rvl-text-2); font-size: var(--rv-read-note); line-height: 1.55; }
.rvl-credit { margin: 0; color: var(--rvl-text-3); font: 500 var(--rv-size-xs)/1.5 var(--rv-font-mono); letter-spacing: .03em; }

@media print {
  .rvl-layout { display: block; }
  .rvl-toc { display: none; }
}