/* Approved #487 article stylesheet, kept stable for Worker pages and admin preview. */
body { margin: 0; }
html { scroll-behavior: smooth; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:12px; top:12px; z-index:10; background:white; padding:12px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
/* Blog article components (#487 proposal for #476/#481/#482).
   One stylesheet for the public article AND the admin preview (loaded inside the sandboxed preview iframe).
   Tokens = src/home/home.css. Existing classes from src/blog/blog.css are kept (blog-header, article-layout,
   article-toc, article-body, note, comparison, caption, article-cta, license, post-card); new ones are marked NEW. */
:root {
  --navy: #06132D; --ink: #101B33; --muted: #5d6779; --page: #F7F9FC; --soft: #EEF2F7; --line: #E4EAF2; --card: #FFFFFF;
  --cyan: #16DDE0; --cyan-hover: #08BFC9; --cyan-soft: #D8FAFA; --link: #08687c;
  --magenta: #D90B62; --magenta-soft: #FDE7F0; --yellow: #FFD128; --yellow-soft: #FFF6D6; --blue: #159DEB; --ok: #047857; --ok-soft: #ECFDF5;
  --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 4vw, 40px); --max: 1160px; --measure: 700px;
}
* { box-sizing: border-box; }
.site { background: var(--page); color: var(--ink); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
.site a { color: inherit; }
.site h1, .site h2, .site h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; margin: 0; }
.site p { margin: 0; }
.site :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { font: 600 12.5px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 13px 20px; font: 700 16px/1 var(--f-body); text-decoration: none; border: 0; cursor: pointer; min-height: 44px; }
.btn-cta { background: var(--cyan); color: var(--navy); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }

/* The site bar and footer are public/shell.css (#552). */

/* Header */
.blog-header { padding-block: 48px 32px; border-bottom: 1px solid var(--line); }
.breadcrumb { font-size: 14px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.breadcrumb a { color: var(--ink); }
.blog-header h1 { max-width: 900px; font-size: clamp(32px, 4.8vw, 54px); margin: 14px 0 16px; }
.topic-label { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--link); background: var(--cyan-soft); padding: 7px 10px; border-radius: 999px; text-decoration: none; } /* NEW */
.article-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--muted); margin-top: 20px; } /* NEW: byline + dates */
.article-meta b { color: var(--ink); font-weight: 600; }
.disclosure { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); background: var(--soft); border-radius: 10px; padding: 10px 14px; margin-top: 18px; max-width: 760px; } /* NEW: AI/illustration disclosure */
.disclosure svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* Figures */
.article-figure { margin: 28px 0; } /* NEW */
.article-figure img, .article-figure .img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); }
.article-figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); display: grid; gap: 2px; }
.fig-caption { color: var(--ink); }
.fig-credit { font-size: 12.5px; overflow-wrap: anywhere; } /* multi-line credits wrap, never truncate */
.fig-credit a { color: var(--link); }
.fig-badge { display: inline-flex; align-items: center; gap: 5px; font: 700 11.5px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: #7a1442; background: var(--magenta-soft); padding: 5px 8px; border-radius: 6px; margin-bottom: 4px; width: fit-content; }
.article-hero { margin: 0; }
.article-hero img, .article-hero .img { border-radius: 18px; aspect-ratio: 16 / 9; object-fit: cover; }
.image-missing { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 14px; border: 1.5px dashed #c2ccd8; background: var(--soft); color: var(--muted); font-size: 14px; text-align: center; padding: 20px; } /* NEW: asset failed to load at runtime */

/* Layout */
.article-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 56px; padding-block: 40px 72px; }
.article-layout.no-toc { grid-template-columns: minmax(0, 1fr); }
.article-toc { align-self: start; position: sticky; top: 24px; font-size: 14px; }
.article-toc strong { display: block; margin-bottom: 10px; }
.article-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.article-toc a { display: block; color: var(--muted); padding: 6px 0; text-decoration: none; line-height: 1.35; }
.article-toc a[aria-current="true"] { color: var(--ink); font-weight: 700; }
.article-body { max-width: var(--measure); min-width: 0; font-size: 18px; line-height: 1.7; }
.article-body > section { margin-bottom: 44px; scroll-margin-top: 88px; }
.article-body h2 { font-size: clamp(25px, 3vw, 32px); margin: 0 0 16px; }
.article-body h3 { font-size: 21px; margin: 28px 0 8px; letter-spacing: -.01em; }
.article-body p { margin: 14px 0; }
.article-body a { color: var(--link); text-underline-offset: 3px; }
.article-body ul, .article-body ol { padding-left: 24px; margin: 14px 0; }
.article-body li { margin: 6px 0; }
.article-body strong { font-weight: 700; }
.cite { font-size: 12px; font-weight: 700; vertical-align: super; line-height: 0; margin-left: 1px; } /* NEW */
.cite a { text-decoration: none; color: var(--link); padding: 0 2px; }

/* Steps (tutorial) NEW */
ol.article-steps { list-style: none; padding: 0; margin: 24px 0; counter-reset: step; display: grid; gap: 28px; }
.article-step { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; }
.article-step::before { content: counter(step); grid-row: span 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cyan-soft); color: var(--link); font: 800 17px/1 var(--f-body); }
.article-step h3 { margin: 6px 0 4px; }
.article-step p { margin: 6px 0; }
.article-step .article-figure { margin: 12px 0 0; }

/* Gallery NEW */
.article-gallery { margin: 28px 0; }
.article-gallery ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.article-gallery li .article-figure { margin: 0; }
.article-gallery li img, .article-gallery li .img { aspect-ratio: 1; object-fit: cover; }
.article-gallery > figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* Tables: .table-wrap (= existing .comparison) scrolls; --stack turns rows into cards on phones */
.table-wrap, .comparison { border: 1px solid var(--line); border-radius: 12px; margin: 24px 0; background: #fff; overflow-x: auto; }
.table-wrap table, .comparison table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 15px; line-height: 1.5; }
.table-wrap caption { text-align: left; padding: 14px 16px; font-weight: 700; font-size: 15px; }
.table-wrap th { text-align: left; background: var(--navy); color: #fff; padding: 12px 14px; font-size: 14px; }
.table-wrap td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap tbody th { background: transparent; color: var(--ink); border-bottom: 1px solid var(--line); font-size: 15px; }
.table-wrap tr:last-child td, .table-wrap tr:last-child th { border-bottom: 0; }
.table-note { font-size: 13px; color: var(--muted); padding: 10px 16px; border-top: 1px solid var(--line); } /* NEW: source line under a table */
.na { color: var(--muted); font-style: italic; } /* NEW: "não informado" cell */

/* Callouts NEW (existing .note stays as the plain variant) */
.note { background: var(--cyan-soft); border-radius: 12px; padding: 16px 20px; }
.callout { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; border-radius: 14px; padding: 16px 18px; margin: 24px 0; font-size: 16.5px; line-height: 1.6; background: var(--soft); }
.callout svg { width: 22px; height: 22px; margin-top: 2px; }
.callout-title { font-weight: 800; font-family: var(--f-display); font-size: 17px; }
.callout > div p { margin: 4px 0; }
.callout--tip { background: var(--cyan-soft); } .callout--tip svg { color: var(--link); }
.callout--warning { background: var(--yellow-soft); } .callout--warning svg { color: #8a5a00; }
.callout--uncertain { background: #fff; border: 1.5px dashed #b8c3d1; } .callout--uncertain svg { color: var(--muted); }

/* Documented specification card NEW */
.spec-card { border: 1px solid var(--line); border-radius: 16px; background: #fff; margin: 24px 0; overflow: hidden; }
.spec-card header { padding: 16px 18px 12px; display: grid; gap: 4px; }
.spec-card .spec-brand { font: 600 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.spec-card h3 { margin: 0; font-size: 21px; }
.spec-list { display: grid; grid-template-columns: minmax(130px, 40%) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); font-size: 15px; }
.spec-list dt, .spec-list dd { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.spec-list dt { color: var(--muted); }
.spec-list dd { font-weight: 600; }
.spec-source { padding: 12px 18px; font-size: 13px; color: var(--muted); background: var(--page); line-height: 1.5; }
.spec-source a { color: var(--link); }
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.spec-grid .spec-card { margin: 0; }

/* Sources NEW */
.article-sources { border-top: 1px solid var(--line); padding-top: 28px; }
.source-list { padding-left: 26px; font-size: 15px; line-height: 1.55; }
.source-list li { margin: 0 0 14px; padding-left: 4px; scroll-margin-top: 88px; }
.source-list li:target { background: var(--yellow-soft); border-radius: 6px; }
.src-title { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.src-meta { display: block; color: var(--muted); font-size: 13.5px; }
.src-lang { display: inline-block; font: 700 11px/1 var(--f-body); border: 1px solid var(--line); border-radius: 4px; padding: 3px 5px; margin-right: 4px; color: var(--muted); }

/* Related + CTA */
.related { margin-top: 8px; }
.related ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.related a { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; color: var(--ink); }
.related a span { font-size: 13px; color: var(--muted); }
.related a b { font-family: var(--f-display); font-size: 18px; line-height: 1.25; }
.article-cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); background: #fff; padding: 20px 22px; border-radius: 16px; margin: 36px 0; } /* restrained: one per article, after the body */
.article-cta p { flex: 1 1 320px; margin: 0; font-size: 16px; }
.license { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; }

/* Index NEW */
.blog-index { padding-block: 56px 80px; }
.blog-index h1 { font-size: clamp(36px, 6vw, 60px); margin: 14px 0; }
.topic-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 28px 0 8px; }
.topic-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--ink); }
.topic-nav a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.post-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 32px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 20px; text-decoration: none; color: var(--ink); }
.post-feature h2 { font-size: clamp(26px, 3vw, 36px); margin: 12px 0; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 28px; list-style: none; padding: 0; }
.post-card { display: flex; flex-direction: column; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; color: var(--ink); height: 100%; }
.post-card:hover { border-color: var(--cyan-hover); }
.post-media { aspect-ratio: 16 / 10; background: var(--soft); display: block; width: 100%; object-fit: cover; border-bottom: 1px solid var(--line); }
.post-fallback { aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--navy); border-bottom: 1px solid var(--line); }
.post-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card h2 { font-size: 21px; line-height: 1.22; margin: 0; }
.post-card p { color: var(--muted); font-size: 15px; }
.post-meta { font-size: 13px; color: var(--muted); margin-top: auto; padding-top: 6px; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .article-toc { position: static; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: #fff; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-feature { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .article-body { font-size: 17px; }
  .blog-header { padding-block: 28px 22px; }
  .article-gallery ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: minmax(0, 1fr); }
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .spec-list { grid-template-columns: minmax(0, 1fr); }
  .spec-list dt { border-bottom: 0; padding-bottom: 0; font-size: 13px; }
  .table-wrap--stack table { min-width: 0; }
  .table-wrap--stack thead { position: absolute; left: -9999px; }
  .table-wrap--stack tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .table-wrap--stack td, .table-wrap--stack tbody th { display: grid; grid-template-columns: 42% 1fr; gap: 10px; border: 0; padding: 6px 16px; }
  .table-wrap--stack td::before { content: attr(data-label); color: var(--muted); font-size: 13px; font-weight: 600; }
}


/* Explicit link specificity preserves contrast inside the dark navigation bar. */
.site a.btn-cta { color: var(--navy); }
.blog-index { padding-block: 48px 64px; }
.blog-index h1 { font-size: clamp(34px, 5vw, 54px); margin: 12px 0 16px; }
.blog-index > nav[aria-label="Páginas"] { display:flex; gap:24px; margin-top:24px; }

.article-layout.no-toc .article-body { width:100%; margin-inline:auto; }
.post-feature .post-media { border-radius:14px; border:0; }
.article-toc details > summary { display:none; }
@media (max-width:900px) { .article-toc details > summary { display:list-item; cursor:pointer; min-height:44px; } }

@media (min-width:901px) { .article-toc details:not([open]) > ol, .article-toc details:not([open]) > strong { display:block; } }
@media (max-width:900px) { .article-toc details > strong { display:none; } }

/* Inline provenance stays available to keyboard users and on hover. */
.value-conversion,
.evidence-warning {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}
.evidence-warning {
  text-decoration-color: #b45309;
  background: #fffbeb;
}
.value-conversion:focus,
.evidence-warning:focus {
  outline: 2px solid #0891b2;
  outline-offset: 3px;
}
.value-conversion,
.evidence-warning {
  position: relative;
}
.value-conversion:hover::after,
.value-conversion:focus::after,
.evidence-warning:hover::after,
.evidence-warning:focus::after {
  content: attr(title);
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  display: block;
  width: max-content;
  max-width: min(20rem, 75vw);
  padding: 0.65rem 0.8rem;
  border-radius: 0.4rem;
  background: #14283f;
  color: #fff;
  font: 400 0.85rem/1.5 sans-serif;
  white-space: normal;
  text-align: left;
  box-shadow: 0 4px 16px #0003;
}
/* Video sources (#643): kind label and links to the cited moments. */
.article-sources .source-kind { display: inline-block; font-size: .75em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; }
.article-sources .source-moments { display: block; font-size: .92em; margin-top: 4px; }
.article-sources .source-moments a { font-variant-numeric: tabular-nums; white-space: nowrap; }