/* Biblioteca de Alexandria da MAIA — a calm digital library.
   Design intent: reading column first, restrained dark palette, information hierarchy by
   typography and space (not by badges/gradients), progressive disclosure via <details>.
   No CDN, no external fonts, no JS-dependent styling. */

:root {
  --bg: #0d1117;
  --bg-raised: #131a23;
  --bg-card: #171f2a;
  --line: #263344;
  --line-soft: #1c2735;
  --text: #dbe4ef;
  --text-muted: #8fa0b3;
  --text-dim: #64748b;
  --accent: #d4b26a;          /* candlelight gold — the library accent */
  --accent-soft: #d4b26a33;
  --link: #7fb4e8;
  --good: #4fc47f;
  --cont: #e06c5f;
  --corr: #d9b44a;
  --sup: #94a3b8;
  --v2: #a78bfa;
  --inc: #ec9455;
  --dec: #62b6de;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.content { min-height: 60vh; padding-bottom: 48px; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

code, .mono { font-family: var(--mono); font-size: 0.88em; }
code { background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 6px; }
.sha { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; color: #9fd0ff; white-space: nowrap; font-family: var(--mono); font-size: 0.82em; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #1a1305; padding: 8px 14px; z-index: 100; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* ── masthead ─────────────────────────────────────────── */
.masthead { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #10161f, var(--bg)); padding: 18px 0 0; }
.masthead .shell { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); padding-bottom: 12px; }
.brand:hover { text-decoration: none; }
.brand-mark { font-size: 30px; }
.brand-title { display: block; font-family: var(--serif); font-size: 22px; letter-spacing: 0.4px; color: var(--accent); }
.brand-sub { display: block; font-size: 12px; color: var(--text-muted); }
.mainnav { display: flex; flex-wrap: wrap; gap: 2px; }
.mainnav a { padding: 10px 14px; color: var(--text-muted); border-bottom: 2px solid transparent; font-size: 14.5px; }
.mainnav a:hover { color: var(--text); text-decoration: none; }
.mainnav a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── typography ───────────────────────────────────────── */
h1 { font-family: var(--serif); font-size: 30px; line-height: 1.25; margin: 34px 0 10px; font-weight: 600; }
h2 { font-family: var(--serif); font-size: 21px; margin: 34px 0 8px; font-weight: 600; }
h3 { font-size: 16px; margin: 18px 0 6px; }
.lede { color: var(--text-muted); font-size: 17px; max-width: 46em; margin: 0 0 14px; }
.sub { color: var(--text-muted); max-width: 52em; margin: 0 0 10px; font-size: 14.5px; }
.muted { color: var(--text-muted); font-size: 14px; }
.footnote { color: var(--text-dim); font-size: 12.5px; }
.empty-state { background: var(--bg-raised); border: 1px dashed var(--line); border-radius: 10px; padding: 18px; color: var(--text-muted); }

/* ── chips ────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-raised); color: var(--text-muted); padding: 2px 11px; font-size: 12px; white-space: nowrap; }
a.chip:hover { color: var(--text); text-decoration: none; border-color: var(--text-dim); }
.chip-quiet { border-color: var(--line-soft); }
.chip-deprecated { background: #3a2020; border-color: #5c2e2e; color: #e8a0a0; }
.chip-draft { background: #3b2f14; border-color: #5c4a1e; color: #f0c674; }
.chip-history { background: #1f2a3a; border-color: #2e415c; color: #a0c0e8; }
.chip-inference { background: #3b2f14; border-color: #5c4a1e; color: #f0c674; }
.chip-wiki { border-color: var(--accent-soft); color: var(--accent); }
.chip-reserved { background: #2a1f3a; border-color: #45305c; color: #c8a0e8; }
.chip-live { border-color: #2e5c4a; color: #7fe8b4; }
.chip-v2 { border-color: #45305c; color: #c4a8ff; }

/* ── hero / stats / entries ───────────────────────────── */
.hero h1 { margin-top: 40px; }
.stat-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.stat { background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 16px; min-width: 110px; }
.stat b { display: block; font-size: 22px; font-family: var(--serif); color: var(--accent); }
.stat span { font-size: 12px; color: var(--text-muted); }

.entry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 22px 0; }
.entry { display: block; background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px 18px; color: var(--text); }
.entry:hover { text-decoration: none; border-color: var(--accent-soft); background: #1a2330; }
.entry h2 { margin: 0 0 6px; font-size: 18px; }
.entry p { margin: 0; color: var(--text-muted); font-size: 13.5px; }

.reading-path { padding-left: 22px; max-width: 46em; }
.reading-path li { margin: 8px 0; }

/* ── filter bar ───────────────────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 18px; }
.filter-bar input[type="search"] { flex: 1; min-width: 220px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 9px; color: var(--text); padding: 8px 12px; font-size: 14px; }
.filter-bar input[type="search"]::placeholder { color: var(--text-dim); }
.filter-bar select { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 9px; color: var(--text-muted); padding: 8px 10px; font-size: 13px; max-width: 230px; }
.filter-bar button, form button { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 9px; color: var(--accent); padding: 8px 16px; font-size: 13.5px; cursor: pointer; }
.filter-bar button:hover, form button:hover { background: var(--accent); color: #1a1305; }
.clear-link { font-size: 13px; color: var(--text-dim); }

/* ── page rows (listings) ─────────────────────────────── */
.domain-group { margin: 22px 0; }
.domain-title { font-size: 15px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-dim); border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; }
.page-row { padding: 12px 2px; border-bottom: 1px solid var(--line-soft); }
.page-row.historical { opacity: 0.72; }
.page-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.page-title { font-size: 16.5px; font-weight: 600; }
.page-desc { margin: 4px 0 6px; color: var(--text-muted); font-size: 14px; max-width: 52em; }
.page-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ── wiki page ────────────────────────────────────────── */
.breadcrumb { margin: 22px 0 4px; font-size: 13px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.banner { border-radius: 10px; padding: 10px 16px; margin: 14px 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.banner-deprecated { background: #3a2020; border: 1px solid #5c2e2e; color: #f0c0c0; }
.banner-draft { background: #3b2f14; border: 1px solid #5c4a1e; color: #f0e0b0; }
.banner-history { background: #16222f; border: 1px solid #2e415c; color: #c0d4e8; }

.wiki-header h1 { margin-bottom: 6px; }
.wiki-body { max-width: 46em; font-size: 16px; }
.wiki-body h1 { font-size: 24px; }
.wiki-body h2 { font-size: 20px; }
.wiki-body h3 { font-family: var(--serif); font-size: 17px; }
.wiki-body p, .wiki-body li { line-height: 1.7; }
.wiki-body blockquote { border-left: 3px solid var(--accent-soft); margin: 14px 0; padding: 2px 16px; color: var(--text-muted); background: var(--bg-raised); border-radius: 0 8px 8px 0; }
.wiki-body pre { background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
.wiki-body pre code { background: none; border: none; padding: 0; }
.wiki-body table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13.5px; display: block; overflow-x: auto; }
.wiki-body th, .wiki-body td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.wiki-body th { background: var(--bg-raised); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.wiki-body img { max-width: 100%; border-radius: 8px; }
.wiki-body hr { border: 0; border-top: 1px solid var(--line-soft); margin: 22px 0; }
.repo-ref { color: var(--text-muted); border-bottom: 1px dotted var(--text-dim); cursor: help; }

.wiki-panels { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.panel { background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 18px; margin: 14px 0; }
.panel h2 { margin: 0 0 8px; font-size: 17px; display: inline; }
.panel > h2 { display: block; }
.relation-group h3 { margin: 10px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); }
.relation-group ul, .backlinks { margin: 4px 0; padding-left: 18px; }
.relation-group li, .backlinks li { margin: 4px 0; font-size: 14px; }
.origin summary { cursor: pointer; list-style: none; }
.origin summary::before { content: "▸ "; color: var(--text-dim); }
.origin[open] summary::before { content: "▾ "; }
.origin-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 6px; font-size: 14px; }
.origin-list dt { color: var(--text-dim); }
.origin-list dd { margin: 0; overflow-wrap: anywhere; }
.source-list { margin: 0; padding-left: 16px; font-size: 13px; }
.related-nav { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── search ───────────────────────────────────────────── */
.search-results { padding-left: 24px; }
.search-hit { margin: 14px 0; }

/* ── timeline ─────────────────────────────────────────── */
.mode-bar { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 8px 0 4px; }
.mode { padding: 8px 18px; font-size: 14px; color: var(--text-muted); background: var(--bg-raised); }
.mode:hover { text-decoration: none; color: var(--text); }
.mode.on { background: var(--accent); color: #1a1305; font-weight: 600; }

.legend-strip { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0; font-size: 12.5px; color: var(--text-muted); }
.legend-item i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--text-dim); }
.legend-item.cls-good i { background: var(--good); }
.legend-item.cls-cont i { background: var(--cont); }
.legend-item.cls-corr i { background: var(--corr); }
.legend-item.cls-inc i { background: var(--inc); }
.legend-item.cls-dec i { background: var(--dec); }
.legend-item.cls-v2 i { background: var(--v2); }

.timeline-rail { border-left: 2px solid var(--line); margin: 10px 0 30px; padding-left: 22px; }
.month-section { margin: 26px 0; }
.month-label { font-family: var(--serif); font-size: 19px; margin: 0 0 12px; position: relative; }
.month-label::before { content: ""; position: absolute; left: -29px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); }
.month-commits { font-size: 12px; color: var(--text-dim); font-family: var(--mono); margin-left: 10px; }

.event-card { background: var(--bg-card); border: 1px solid var(--line-soft); border-left: 4px solid var(--text-dim); border-radius: 10px; padding: 12px 16px; margin: 10px 0; max-width: 52em; }
.event-card.cls-good { border-left-color: var(--good); }
.event-card.cls-cont { border-left-color: var(--cont); }
.event-card.cls-corr { border-left-color: var(--corr); }
.event-card.cls-sup { border-left-color: var(--sup); }
.event-card.cls-v2 { border-left-color: var(--v2); }
.event-card.cls-inc { border-left-color: var(--inc); }
.event-card.cls-dec { border-left-color: var(--dec); }
.event-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.event-date { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.chip-class.cls-good { color: var(--good); border-color: var(--good); }
.chip-class.cls-cont { color: var(--cont); border-color: var(--cont); }
.chip-class.cls-corr { color: var(--corr); border-color: var(--corr); }
.chip-class.cls-sup { color: var(--sup); border-color: var(--sup); }
.chip-class.cls-v2 { color: var(--v2); border-color: var(--v2); }
.chip-class.cls-inc { color: var(--inc); border-color: var(--inc); }
.chip-class.cls-dec { color: var(--dec); border-color: var(--dec); }
.event-title { margin: 6px 0 4px; font-size: 17px; font-family: var(--sans); font-weight: 650; }
.event-title a { color: var(--text); }
.event-summary { margin: 0 0 8px; color: var(--text-muted); font-size: 14.5px; max-width: 48em; }
.event-more, .event-evidence { border-top: 1px dashed var(--line-soft); margin-top: 8px; padding-top: 6px; font-size: 14px; }
.event-more summary, .event-evidence summary { cursor: pointer; color: var(--text-dim); font-size: 13px; list-style: none; }
.event-more summary::before, .event-evidence summary::before { content: "▸ "; }
.event-more[open] summary::before, .event-evidence[open] summary::before { content: "▾ "; }
.event-more p { margin: 8px 0 0; color: #c3cedb; }
.evidence-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.event-wiki { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-top: 6px; }
.wiki-label { font-size: 12px; color: var(--text-dim); }
.wiki-none { font-size: 12.5px; color: var(--text-dim); font-style: italic; }
.event-pager { display: flex; gap: 12px; margin: 26px 0; flex-wrap: wrap; }
.pager-spacer { flex: 1; }
.pager-link { font-size: 13.5px; color: var(--text-muted); }

/* ── forensic sections ────────────────────────────────── */
.forensic-section h2 { border-top: 1px solid var(--line-soft); padding-top: 16px; }
.cont-grid, .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 14px 0; }
.cont-card, .metric-card, .risk-card, .vs-card, .authority-card { background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; }
.cont-card { border-left: 4px solid var(--cont); }
.cont-card h3 { margin-top: 0; }
.cont-chain { display: grid; gap: 6px; margin-top: 8px; font-size: 13.5px; }
.cont-chain .step { background: var(--bg-raised); border-radius: 8px; padding: 7px 10px; border-left: 3px solid var(--line); }
.cont-chain .step b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 2px; }
.cont-chain .step.leak { border-left-color: var(--cont); }
.cont-chain .step.cost { border-left-color: var(--inc); }
.cont-chain .step.fix { border-left-color: var(--v2); }

.stair { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; }
.stair li { background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: 9px; padding: 8px 12px; font-size: 13.5px; display: flex; gap: 12px; align-items: baseline; }
.stair-date { min-width: 86px; color: var(--text-muted); font-size: 12px; }

.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.vs-v1 { border-top: 3px solid var(--cont); }
.vs-v2 { border-top: 3px solid var(--v2); }
ul.tight { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; }
ul.tight li { margin: 5px 0; }

.bar-row { display: grid; grid-template-columns: minmax(120px, 170px) 1fr 90px; gap: 10px; align-items: center; font-size: 12.5px; margin: 6px 0; }
.bar-track { background: var(--bg-raised); border-radius: 5px; height: 14px; overflow: hidden; display: block; }
.bar-fill { height: 100%; border-radius: 5px; background: var(--v2); display: block; }
.bar-val { font-family: var(--mono); color: var(--text-muted); text-align: right; }
.ncap { display: inline-block; background: #2a1a1a; color: #e8a0a0; border: 1px dashed #5c2e2e; border-radius: 6px; padding: 1px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; }

.risk-card { border-left: 4px solid var(--text-dim); position: relative; }
.risk-card.risk-block { border-left-color: var(--cont); }
.risk-card.risk-watch { border-left-color: var(--corr); }
.risk-card.risk-safeifbounded { border-left-color: var(--good); }
.risk-tag { float: right; font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; border-radius: 5px; padding: 2px 8px; color: #0b0f14; background: var(--text-dim); }
.risk-block .risk-tag { background: var(--cont); }
.risk-watch .risk-tag { background: var(--corr); }
.risk-safeifbounded .risk-tag { background: var(--good); }
.risk-inv { font-size: 13px; color: var(--text-muted); }
.risk-inv b { color: var(--text); }
.risk-block-label { color: var(--cont); }
.risk-watch-label { color: var(--corr); }
.risk-safe-label { color: var(--good); }

/* ── capabilities ─────────────────────────────────────── */
.authority-grid, .server-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.authority-card h3 { margin: 0 0 4px; }
.server-card { display: flex; flex-direction: column; gap: 4px; background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 14px; color: var(--text); }
.server-card:hover { text-decoration: none; border-color: var(--accent-soft); }
.server-id { color: var(--accent); font-size: 13.5px; }
.cap-list { display: grid; gap: 6px; margin: 12px 0 24px; }
.cap-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: 9px; padding: 8px 14px; color: var(--text); }
.cap-row:hover { text-decoration: none; border-color: var(--accent-soft); }
.cap-name { font-size: 14px; }
.cap-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-class-native { color: var(--dec); border-color: var(--dec); }
.chip-class-protocol { color: var(--v2); border-color: var(--v2); }
.chip-class-domain { color: var(--good); border-color: var(--good); }
.chip-class-internalonly { color: var(--text-dim); border-color: var(--text-dim); }
.live-panel { margin-top: 26px; }

/* ── footer ───────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 20px 0 30px; color: var(--text-dim); font-size: 13px; }
.site-footer p { margin: 4px 0; }

/* ── responsive ───────────────────────────────────────── */
@media (max-width: 760px) {
  .masthead .shell { align-items: stretch; }
  .mainnav { overflow-x: auto; }
  .vs-grid { grid-template-columns: 1fr; }
  .origin-list { grid-template-columns: 1fr; gap: 2px; }
  .origin-list dt { margin-top: 8px; }
  .bar-row { grid-template-columns: minmax(90px, 120px) 1fr 80px; }
  h1 { font-size: 24px; }
  .timeline-rail { padding-left: 14px; }
  .month-label::before { left: -21px; }
}

@media print {
  :root { --bg: #fff; --bg-raised: #f4f6f8; --bg-card: #fff; --line: #c9d2dc; --line-soft: #dde4ec; --text: #111; --text-muted: #444; --text-dim: #666; --accent: #8a6d2f; --link: #0a4d8c; }
  .masthead, .site-footer, .filter-bar, .mode-bar { display: none; }
  details { open: true; }
  .event-more, .event-evidence { display: block; }
}

/* ── codex de personas ────────────────────────────────────
   Cartas de RPG que continuam sendo documento: a moldura é de jogo, o conteúdo é
   ficha de teste. Sem gradiente e sem ilustração — a hierarquia é tipográfica,
   como no resto da biblioteca. */
.fiction-notice {
  background: #2a2113;
  border: 1px solid #5c4a1e;
  border-left-width: 4px;
  border-radius: 8px;
  color: #f0d9a0;
  padding: 12px 16px;
  font-size: 14px;
  max-width: 52em;
  margin: 16px 0 22px;
}

.card-sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
  margin: 20px 0 34px;
}

.persona-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 12px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pc-head h2 { font-size: 18px; margin: 0; }
.pc-head h2 a { color: var(--text); }
.pc-class { margin: 2px 0 0; font-family: var(--serif); font-size: 13.5px; color: var(--accent); letter-spacing: 0.3px; }
.pc-epithet { margin: 0; font-style: italic; color: var(--text-muted); font-size: 14px; border-left: 2px solid var(--line); padding-left: 10px; }
.pc-line { margin: 0; font-size: 13.5px; }

.pc-attrs { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 4px 0; }
.pc-attrs-wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.pc-attr { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pc-attr dt { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.pc-attr dd { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pc-attrs-wide .pc-attr { flex-direction: column; align-items: flex-start; }
.pc-attrs-wide .pc-attr dd { align-items: flex-start; gap: 7px; }
.pc-attrs-wide .pc-attr dt { margin-bottom: 5px; }
.pc-attrs-wide .pips { line-height: 1; }
.pc-attrs-wide .footnote { line-height: 1.45; }
.pips { display: inline-flex; gap: 3px; }
.pips i {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  /* O pip APAGADO precisa ser visível: a leitura é "1 de 5", não "tem um ponto".
     Com a borda em --line ele sumia no painel e a escala virava um enfeite. */
  border: 1px solid var(--text-dim);
  background: var(--bg);
}
.pips i.on { background: var(--accent); border-color: var(--accent); }

.pc-block h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-dim); margin: 0 0 3px; }
.pc-block ul { margin: 0; padding-left: 17px; font-size: 13px; color: var(--text-muted); }
.pc-block li { margin: 2px 0; }
.pc-never h3, .panel.pc-never h2 { color: var(--cont); }
.panel.pc-never { border-color: #5c2e2e; }
.pc-quests li { color: var(--text); }
.pc-quests .chip { margin-right: 5px; }
.pc-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 9px; font-size: 12.5px; }
.pc-more { white-space: nowrap; }
.panel.pc-retention { border-color: #2e5c4a; }
.panel.pc-retention h2 { color: var(--good); }

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }

.research-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0; }
.research-table th, .research-table td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); }
.research-table th { color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; }

.quest-group { margin: 26px 0; }
.quest-group h3 { font-family: var(--serif); font-size: 18px; color: var(--accent); margin: 0 0 10px; }
.quest { background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px 16px; margin: 0 0 12px; }
.quest header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.quest h4 { margin: 0; font-size: 15.5px; }
.quest-id { margin: 2px 0 8px; font-size: 11.5px; color: var(--text-dim); }
.utterance { margin: 0 0 10px; padding: 9px 14px; border-left: 3px solid var(--accent); background: var(--bg-card); border-radius: 0 8px 8px 0; font-size: 14.5px; color: var(--text); }
.quest-caps { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 5px; }
.quest-dep { font-size: 13.5px; color: var(--text-muted); background: var(--bg-card); border-radius: 8px; padding: 8px 12px; }
.quest details summary { cursor: pointer; color: var(--text-muted); font-size: 13px; }
.quest details ul { font-size: 13.5px; color: var(--text-muted); }

.rd-local { border-color: #2e5c4a; color: #7fe8b4; }
.rd-conta { border-color: #5c4a1e; color: #f0c674; }
.rd-host { border-color: #45305c; color: #c8a0e8; }
.rd-futuro { border-color: #5c2e2e; color: #e8a0a0; }

/* ── impressão: a folha de contato vira folha de contato de verdade ──────
   Sem pipeline de PDF novo: Ctrl+P em /personas dá o material imprimível em pt-BR.
   O que muda é só o que atrapalha no papel — navegação, filtro, rodapé e o fundo
   escuro (que consumiria um cartucho por cópia). */
@media print {
  :root {
    --bg: #fff; --bg-raised: #fff; --bg-card: #fff;
    --line: #b9c2cc; --line-soft: #d6dce2;
    --text: #14181d; --text-muted: #414b56; --text-dim: #5d6771;
    --accent: #8a6a1f; --accent-soft: #d9cba6; --link: #14181d;
  }
  .masthead, .site-footer, .filter-bar, .skip-link, .mainnav, .pc-more, .mode-bar { display: none !important; }
  body { font-size: 11pt; }
  .shell { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .card-sheet { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .persona-card, .quest, .panel, .research-table { break-inside: avoid; page-break-inside: avoid; }
  .persona-card { border: 1px solid #b9c2cc; border-top: 2px solid #8a6a1f; }
  .fiction-notice { background: #fff; border: 1.5px solid #8a6a1f; color: #3d2f10; }
  .pips i { border-color: #5d6771; }
  .pips i.on { background: #14181d; border-color: #14181d; }
  h1 { margin-top: 0; }
  details { display: block; }
  details > summary { display: none; }
}

/* ── Campanha do Lançamento ────────────────────────────────────────────────────────────
   O board dos OpenSpecs abertos. Reaproveita a paleta da biblioteca; as cores de domínio
   são as únicas novas, e existem porque a categoria precisa ser lida de relance. Sem JS:
   <details> abre a masmorra, filtro é query string, mapa é HTML/CSS. */
.camp-gaming { --dom: #d98cb3; }
.camp-studio { --dom: var(--accent); }
.camp-voice { --dom: #62b6de; }
.camp-runtime { --dom: #8fa3c8; }
.camp-commerce { --dom: #4fc47f; }
.camp-discord { --dom: #8b93e8; }
.camp-platform { --dom: #b08d57; }
.dom-gaming { --dom: #d98cb3; }
.dom-studio { --dom: var(--accent); }
.dom-voice { --dom: #62b6de; }
.dom-runtime { --dom: #8fa3c8; }
.dom-commerce { --dom: #4fc47f; }
.dom-discord { --dom: #8b93e8; }
.dom-platform { --dom: #b08d57; }
.work-ownergate { --dom: var(--cont); }
.work-liveproof { --dom: #62b6de; }
.work-engineering { --dom: var(--text-dim); }
.work-test { --dom: #4fc47f; }
.work-doc { --dom: var(--accent); }
.work-measurement { --dom: #8fa3c8; }
.work-environment { --dom: #b08d57; }
.work-closing { --dom: #8b93e8; }

.camp-band { display: flex; height: 13px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--bg-raised); margin: 10px 0 8px; }
.camp-band-seg { display: block; background: var(--dom); min-width: 2px; }
.camp-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.camp-legend-item b { color: var(--text); font-family: var(--mono); font-size: 0.86em; }
.camp-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--dom); display: inline-block; margin-right: 6px; }

.camp-map { display: grid; gap: 14px; margin: 14px 0 26px; }
.camp-rail { background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px 14px; }
.camp-rail-title { margin: 0 0 10px; font-family: var(--serif); font-size: 16px; color: var(--accent); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.camp-rail.rail-eldoria .camp-rail-title { color: #d98cb3; }
.camp-rail.rail-discord .camp-rail-title { color: #8b93e8; }
.camp-rail-sub { font-family: var(--sans); font-size: 12.5px; color: var(--text-dim); font-weight: normal; }
.camp-rail-count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.camp-nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.camp-node { flex: 1 1 148px; max-width: 220px; }
.camp-node a { display: block; background: var(--bg-card); border: 1px solid var(--line); border-left: 3px solid var(--dom); border-radius: 8px; padding: 8px 10px 9px; color: var(--text); }
.camp-node a:hover { text-decoration: none; border-color: var(--dom); background: #1a2330; }
.camp-node.cleared a { border-left-color: var(--good); opacity: 0.75; }
.camp-node-open { display: block; font-family: var(--serif); font-size: 21px; line-height: 1; color: var(--dom); }
.camp-node.cleared .camp-node-open { color: var(--good); }
.camp-node-name { display: block; font-size: 12.5px; margin-top: 3px; }
.camp-node-meta { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.camp-node-bar { display: block; height: 3px; background: var(--line); margin-top: 6px; border-radius: 2px; overflow: hidden; }
.camp-node-bar i { display: block; height: 100%; background: var(--dom); }

.camp-quest { border-bottom: 1px solid var(--line-soft); }
.camp-quest > summary { cursor: pointer; padding: 11px 4px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; list-style: none; }
.camp-quest > summary::-webkit-details-marker { display: none; }
.camp-quest > summary:hover { background: var(--bg-raised); }
.camp-quest[open] > summary { background: var(--bg-raised); }
.camp-rank { color: var(--text-dim); font-size: 15px; }
.camp-quest-id { flex: 1 1 260px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.camp-quest-id b { font-size: 15.5px; }
.camp-slug { color: var(--text-dim); font-size: 11.5px; word-break: break-all; }
.camp-quest-nums { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 12px; color: var(--text-muted); }
.camp-quest-nums b { color: var(--text); font-family: var(--serif); font-size: 16px; }
.camp-mini { width: 76px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.camp-mini i { display: block; height: 100%; background: var(--accent); }
.camp-pct { font-size: 11.5px; color: var(--text-dim); }
.camp-quest-body { padding: 4px 4px 18px 34px; display: grid; gap: 12px; }
.camp-warn { background: #3b2f14; border: 1px solid #5c4a1e; border-radius: 8px; padding: 9px 13px; margin: 0; font-size: 13.5px; color: #f0e0b0; }
.camp-stages { border-collapse: collapse; width: 100%; max-width: 46em; font-size: 13.5px; }
.camp-stages td { border-bottom: 1px solid var(--line-soft); padding: 5px 8px; }
.camp-stages td.num { text-align: right; width: 54px; color: var(--text-muted); }
.camp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.camp-tag { font-family: var(--mono); font-size: 11px; border: 1px solid var(--dom); color: var(--dom); border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
.camp-cleared { list-style: none; padding: 0; margin: 10px 0; font-size: 14px; color: var(--text-muted); display: grid; gap: 6px; }
.camp-cleared b { color: var(--good); }

.camp-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 14px 0; }
.camp-cat { background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; }
.camp-cat h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-dim); }
.camp-cat-row { display: grid; grid-template-columns: 116px 1fr 36px; gap: 9px; align-items: center; padding: 3px 0; font-size: 13px; }
.camp-cat-label { color: var(--text-muted); }
.camp-cat-track { height: 8px; background: var(--line); border-radius: 3px; overflow: hidden; }
.camp-cat-track i { display: block; height: 100%; background: var(--dom); }
.camp-cat-qty { text-align: right; color: var(--text-muted); font-size: 12px; }

.camp-note { border-left: 2px solid var(--accent); padding: 2px 0 2px 15px; margin: 14px 0; color: var(--text-muted); font-size: 14px; max-width: 54em; }
.camp-note b { color: var(--text); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 620px) {
  .camp-quest-body { padding-left: 4px; }
  .camp-cat-row { grid-template-columns: 96px 1fr 32px; }
}

/* ─────────────────────────────────────────────────────────────────────────────────────
   PORTAL DO PROGRAMA — /programa /historico /portoes /equipe
   Mesma linguagem do resto da biblioteca: hierarquia por tipografia e espaço, nenhuma
   dependência de JS, nenhuma fonte externa. Cor só onde ela CARREGA informação (fase do
   trabalho, estado do portão, domínio de produto).
   ───────────────────────────────────────────────────────────────────────────────────── */

.mainnav-second { border-top: 1px solid var(--line-soft); }
.mainnav-second a { font-size: 13.5px; padding: 7px 14px; }

.prog-home { margin: 26px 0 8px; }
.prog-home h2 { margin-bottom: 10px; }

.prog-notes {
  background: var(--bg-raised); border-left: 3px solid var(--corr);
  border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 18px 0; color: var(--text-muted);
}
.prog-notes ul { margin: 6px 0 0; padding-left: 20px; }

/* ── os quatro estados ─────────────────────────────────────────────────────────────── */
.prog-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 16px 0 26px; }
.prog-phase {
  display: block; padding: 14px; border-radius: 10px; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--line-soft); border-top: 3px solid var(--fase, var(--line));
}
.prog-phase:hover { border-color: var(--fase, var(--line)); text-decoration: none; }
.prog-phase.on { background: var(--bg-raised); border-color: var(--fase, var(--accent)); }
.prog-phase b { display: block; font-size: 26px; color: var(--fase, var(--text)); line-height: 1.1; }
.prog-phase-name { display: block; font-size: 14px; color: var(--text); margin-top: 2px; }
.prog-phase-note { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }

.phase-ativa { --fase: var(--good); }
.phase-proposta { --fase: var(--link); }
.phase-arquivada { --fase: var(--sup); }
.phase-carry-forward { --fase: var(--inc); }
.phase-superada { --fase: var(--text-dim); }

/* ── lista de changes ──────────────────────────────────────────────────────────────── */
.prog-row {
  background: var(--bg-card); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--fase, var(--line)); border-radius: 0 10px 10px 0;
  padding: 14px 16px; margin: 10px 0; scroll-margin-top: 90px;
}
.prog-row-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prog-row-head h3 { margin: 0; font-size: 17px; flex: 1 1 260px; }
.prog-row-nums { font-size: 13px; white-space: nowrap; }
.prog-chip-phase { background: var(--fase, var(--line)); color: var(--bg); font-weight: 600; }
.prog-bar { margin: 8px 0 10px; }
.prog-row-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; font-size: 13px; }

.prog-detail { margin-top: 10px; }
.prog-detail summary { cursor: pointer; color: var(--text-muted); font-size: 13.5px; }
.prog-detail h4 { margin: 14px 0 6px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.prog-quests, .prog-chain { list-style: none; padding: 0; margin: 0; }
.prog-quests li, .prog-chain li { padding: 4px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.prog-quests li span.mono { display: inline-block; min-width: 2.2em; color: var(--accent); }
.prog-chain li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* ── histórico ─────────────────────────────────────────────────────────────────────── */
.prog-checkpoints, .prog-carry, .prog-round-list { list-style: none; padding: 0; margin: 10px 0; }
.prog-checkpoints li, .prog-carry li, .prog-round-list li {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.prog-checkpoints li b { min-width: 6.5em; color: var(--accent); }
.prog-round { margin: 6px 0; }
.prog-round summary { cursor: pointer; padding: 8px 0; }
.prog-round-list li { border-left: 3px solid var(--dom, var(--line)); padding-left: 10px; }

/* ── portões ───────────────────────────────────────────────────────────────────────── */
.prog-gates { list-style: none; padding: 0; margin: 12px 0; }
.prog-gates li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.prog-gates li > div { flex: 1; }
.prog-gates li p { margin: 4px 0 0; font-size: 13.5px; }
.prog-gate-qty { font-size: 20px; color: var(--accent); min-width: 2em; text-align: right; }
.prog-gate-consequence { color: var(--cont); }
.prog-dim { margin: 6px 0; }
.prog-dim summary { cursor: pointer; padding: 9px 0; }

.gate-atendido { background: var(--good); color: var(--bg); }
.gate-naoatendido { background: var(--cont); color: var(--bg); }
.gate-desconhecido { background: var(--sup); color: var(--bg); }
.gate-naomedido { background: transparent; border: 1px dashed var(--line); color: var(--text-dim); }

/* ── equipe ────────────────────────────────────────────────────────────────────────── */
.prog-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 18px 0; }
.prog-person { background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px; }
.prog-person header { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.prog-person-nums { display: flex; gap: 16px; margin: 10px 0 6px; font-size: 13px; color: var(--text-muted); }
.prog-person-nums b { color: var(--text); font-size: 17px; }
.prog-blocked b { color: var(--cont); }
.prog-person-items { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.prog-person-items li { padding: 2px 0; color: var(--text-muted); overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .prog-row-head h3 { flex-basis: 100%; }
  .prog-gate-qty { text-align: left; }
}

/* ── camada executiva (/produto) ───────────────────────────────────────────────────── */
.prod-block {
  background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 12px 16px; margin: 10px 0;
}
.prod-block h3 { margin: 0 0 4px; font-size: 16px; }
.prod-block p { margin: 0; color: var(--text-muted); font-size: 14px; }
.prog-gaps { margin: 12px 0; padding-left: 20px; }
.prog-gaps li { padding: 5px 0; color: var(--text-muted); }