/* BioLegis — direção "ficha de herbário": papel branco-frio, tinta verde-araucária, um acento amarelo-ipê.
   Tokens e justificativas em docs/DESIGN.md. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk.woff") format("woff");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cor */
  --paper: #eef3f0;        /* papel de herbário, branco-frio esverdeado */
  --sheet: #fbfdfc;        /* ficha montada */
  --sheet-hist: #e7ece9;   /* ficha histórica, papel envelhecido frio */
  --ink: #14301f;          /* tinta verde-araucária profunda */
  --ink-2: #3d5446;        /* texto secundário */
  --green: #1f5c3a;        /* ações e links */
  --green-hover: #164a2e;
  --green-wash: #dfece4;
  --ipe: #f2c230;          /* amarelo-ipê: único acento */
  --ipe-wash: #fbefc4;
  --hist: #4f5753;
  --wrong: #9a2b1d;
  --wrong-wash: #f7e3df;
  --rule: #c5d3ca;         /* filetes */
  --rule-strong: #6b8274;  /* bordas de controle (≥ 3:1 sobre a ficha) */
  --grid-line: #d9e5dd;    /* quadriculado do caderno de campo */

  /* Tipo */
  --f-label: "Schibsted Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-code: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-xs: 0.8125rem;   /* 13 px: rótulos da etiqueta */
  --t-sm: 0.9375rem;   /* 15 px: metadados, botões */
  --t-md: 1.0625rem;   /* 17 px: texto corrido */
  --t-lg: 1.25rem;     /* título da ficha */
  --t-xl: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);      /* título de trilha */
  --t-2xl: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem); /* título de vista */
  --t-3xl: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);  /* marca */

  /* Espaço (escala 4/8) */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --radius: 3px;
  --measure: 68ch;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule-strong) var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-md);
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  caret-color: var(--green);
  overflow-wrap: break-word;
}
::selection { background: var(--ipe); color: var(--ink); }
img, svg { max-width: 100%; }
p { margin: 0 0 var(--s3); text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--f-label); color: var(--ink); text-wrap: balance; margin: 0; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--green-hover); text-decoration-thickness: 2px; }
strong { font-weight: 650; }
code { font-family: var(--f-code); font-size: 0.875em; background: var(--green-wash); padding: 0.08em 0.3em; border-radius: 2px; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--ipe);
}
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
main:focus, h2:focus, h3:focus { outline: none; box-shadow: none; }
h2:focus-visible, h3:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; box-shadow: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s4); top: -4rem; z-index: 50;
  background: var(--ink); color: var(--sheet); padding: var(--s3) var(--s4);
  font-family: var(--f-label); font-weight: 650; border-radius: var(--radius);
}
.skip-link:focus { top: var(--s4); }

.wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }

/* ---------- Cabeçalho ---------- */

.masthead { background: var(--sheet); border-bottom: 1px solid var(--rule); }
.masthead-inner {
  display: grid; gap: var(--s5) var(--s7);
  padding-block: var(--s6) var(--s5);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .masthead-inner { grid-template-columns: auto minmax(0, 1fr); align-items: end; padding-block: var(--s7) var(--s6); }
}
.brand-block { display: flex; align-items: center; gap: var(--s4); }
.brand-mark { width: clamp(3rem, 2rem + 3vw, 4.5rem); height: auto; flex: none; }
.mark-trunk { stroke: var(--ink); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.mark-crown { fill: var(--green); }
.brand-title {
  font-size: var(--t-3xl); font-weight: 800; letter-spacing: -0.035em; line-height: 0.92;
}
.brand-sub {
  margin: var(--s2) 0 0; font-family: var(--f-label); font-weight: 600; font-size: var(--t-md);
  color: var(--ink-2); letter-spacing: 0.01em;
}
.lede { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.45; max-width: 46ch; margin-bottom: var(--s4); }

/* Etiqueta da edição: mesma grade da etiqueta de espécime */
.edition-label {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-top: 2px solid var(--ink);
}
.edition-label > div { padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--rule); }
.edition-label dt {
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 650; color: var(--ink-2);
  letter-spacing: 0.02em;
}
.edition-label dd { margin: 0; font-size: var(--t-sm); line-height: 1.4; font-variant-numeric: tabular-nums; }

/* Régua de herbário: escala em milímetros sob o cabeçalho */
.ruler {
  height: 12px;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 40px) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 8px) 0 6px / 100% 6px no-repeat;
  opacity: 0.55;
}

.tabs-nav { padding-block: 0; }
.tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.tabs a {
  display: inline-flex; align-items: center; min-height: 48px;
  font-family: var(--f-label); font-weight: 650; font-size: var(--t-sm);
  color: var(--ink-2); text-decoration: none;
  border-bottom: 4px solid transparent; padding-top: 4px;
}
.tabs a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ipe); }

/* ---------- Vistas ---------- */

main { display: block; padding-bottom: var(--s8); }
.view { padding-top: var(--s7); }
.view-title { font-size: var(--t-2xl); font-weight: 750; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: var(--s3); }
.view-intro { max-width: var(--measure); color: var(--ink-2); margin-bottom: var(--s6); }

/* ---------- Busca e filtros ---------- */

.search-panel {
  display: grid; gap: var(--s5);
  padding-bottom: var(--s5); border-bottom: 1px solid var(--rule); margin-bottom: var(--s4);
}
.layer-switch { border: 0; margin: 0; padding: 0; min-width: 0; }
.layer-switch legend, .field label {
  font-family: var(--f-label); font-weight: 650; font-size: var(--t-sm); color: var(--ink);
  padding: 0; margin-bottom: var(--s2);
}
.layer-options {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--sheet);
}
@media (min-width: 640px) { .layer-options { grid-template-columns: 1fr 1.25fr 0.75fr; } }
.layer-opt {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 52px; padding: var(--s3) var(--s4); cursor: pointer;
  font-family: var(--f-label); font-weight: 600; font-size: var(--t-sm); color: var(--ink-2);
}
.layer-opt + .layer-opt { border-top: 1px solid var(--rule); }
@media (min-width: 640px) { .layer-opt + .layer-opt { border-top: 0; border-left: 1px solid var(--rule); } }
.layer-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.layer-count {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink);
  min-width: 2.25rem; text-align: center; padding: 2px var(--s2); border-radius: var(--radius);
  background: var(--green-wash);
}
.layer-opt:hover { color: var(--ink); background: var(--paper); }
.layer-opt:has(input:checked) { color: var(--ink); background: var(--ipe-wash); box-shadow: inset 0 -4px 0 var(--ipe); }
.layer-opt:has(input:checked) .layer-count { background: var(--ipe); }
.layer-opt:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: -3px; }
.layer-note { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--ink-2); max-width: var(--measure); }

.field { display: grid; gap: var(--s1); min-width: 0; }
.field label { margin: 0; }
input[type="search"], select {
  font: inherit; font-family: var(--f-label); font-size: 1rem; color: var(--ink);
  min-height: 48px; width: 100%; padding: var(--s2) var(--s3);
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
input[type="search"]::placeholder { color: #5d7266; }
input[type="search"]:hover, select:hover { border-color: var(--ink); }
.filter-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.panel-actions { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: var(--s2) var(--s4);
  font-family: var(--f-label); font-weight: 650; font-size: var(--t-sm); line-height: 1.2;
  color: var(--sheet); background: var(--green); border: 1px solid var(--green); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.btn:hover { background: var(--green-hover); border-color: var(--green-hover); color: var(--sheet); text-decoration: none; }
.btn-quiet { background: var(--sheet); color: var(--ink); border-color: var(--rule-strong); }
.btn-quiet:hover { background: var(--green-wash); color: var(--ink); border-color: var(--ink); }
.link-btn {
  font: inherit; color: var(--green); background: none; border: 0; padding: 0; cursor: pointer;
  text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
.link-btn:hover { color: var(--green-hover); text-decoration-thickness: 2px; }
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }

/* ---------- Contador e estados ---------- */

.result-count { font-family: var(--f-label); font-weight: 600; font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 var(--s4); }
.result-count.is-error { color: var(--wrong); }
.empty {
  max-width: var(--measure); padding: var(--s5); margin-top: var(--s4);
  background: var(--sheet); border: 1px dashed var(--rule-strong); border-radius: var(--radius);
}
.empty-title { font-size: var(--t-lg); margin-bottom: var(--s3); }
.notice { padding: var(--s4); background: var(--ipe-wash); border-radius: var(--radius); }

/* ---------- Fichas (cartões do catálogo) ---------- */

.sheets {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
}
.sheets > li { display: flex; min-width: 0; }
.sheet {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s5) var(--s5) var(--s4);
  box-shadow: 0 1px 2px rgba(20, 48, 31, 0.06), 0 6px 18px -10px rgba(20, 48, 31, 0.18);
}
.sheet.is-historico { background: var(--sheet-hist); box-shadow: none; }
.sheet.is-historico .sheet-title { color: var(--hist); }
.sheet-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.theme-tag { font-family: var(--f-label); font-size: var(--t-sm); font-weight: 650; color: var(--green); }
.sheet-title { font-size: var(--t-lg); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: var(--s3); }
.sheet-summary { margin-bottom: var(--s4); }
.sheet-alert {
  display: flex; gap: var(--s2); align-items: flex-start;
  padding: var(--s3) var(--s4); margin-bottom: var(--s4); border-radius: var(--radius);
  font-size: var(--t-sm); line-height: 1.5; background: var(--ipe-wash);
}
.sheet-alert .icon { margin-top: 0.2em; color: var(--ink); }
.sheet-alert.alert-historico { background: transparent; border-block: 1px dashed var(--rule-strong); border-radius: 0; padding-inline: 0; }
.sheet-alert.alert-alteracao { background: var(--green-wash); }

/* Etiqueta de espécime: grade de metadados, como a etiqueta impressa no canto da exsicata */
.specimen-label {
  margin: auto 0 var(--s4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}
@media (min-width: 560px) { .specimen-label { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.specimen-label .cell { padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.specimen-label dt {
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 650; color: var(--ink-2); letter-spacing: 0.02em;
}
.specimen-label dd { margin: 0; font-size: var(--t-sm); line-height: 1.35; }
.specimen-label .cell-num dd { font-variant-numeric: tabular-nums; }
.specimen-label .cell-wide { grid-column: 1 / -1; }
.specimen-label.detail-label { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.specimen-label .cell-layer dd { font-family: var(--f-label); font-weight: 700; }
.layer-fundamento .cell-layer dd::before {
  content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.4em;
  background: var(--ipe); border: 1px solid var(--ink); vertical-align: 0.05em;
}
.layer-novidade .cell-layer dd::before {
  content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.4em;
  background: var(--green); vertical-align: 0.05em;
}
.sheet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.ext-link {
  display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px;
  font-family: var(--f-label); font-weight: 650; font-size: var(--t-sm);
}

/* Selos de situação */
.badge {
  display: inline-flex; align-items: center; min-height: 26px; padding: 2px var(--s2);
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.01em;
  border-radius: var(--radius); border: 1px solid currentColor; line-height: 1.2;
}
.status-texto-consultado { color: var(--green); background: var(--sheet); }
.status-pendente { color: var(--ink); background: var(--ipe); border-color: var(--ipe); }
.status-historico { color: var(--hist); background: var(--sheet); border-style: dashed; }

/* ---------- Trilhas ---------- */

.trail-index ol {
  list-style: none; margin: 0 0 var(--s6); padding: 0; counter-reset: none;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3);
}
.trail-index a {
  display: inline-flex; align-items: center; min-height: 44px; padding: var(--s2) var(--s4);
  font-family: var(--f-label); font-weight: 650; font-size: var(--t-sm); text-decoration: none;
  color: var(--ink); background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.trail-index a:hover { background: var(--green-wash); border-color: var(--ink); }

.trail {
  background: var(--sheet); border-top: 6px solid var(--ink);
  padding: var(--s6) clamp(1rem, 4vw, 3rem) var(--s6);
  margin-bottom: var(--s7);
}
.trail > * { max-width: var(--measure); }
.trail > .diagram { max-width: 46rem; }
.trail-head { margin-bottom: var(--s5); }
.trail-title { font-size: var(--t-xl); font-weight: 750; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: var(--s3); }
.trail-no {
  display: inline-block; margin-right: var(--s2); padding: 0 var(--s2);
  background: var(--ipe); color: var(--ink); border-radius: var(--radius);
  font-size: 0.7em; font-weight: 750; letter-spacing: 0; vertical-align: 0.15em;
}
.trail-lede { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--ink); }
.trail h4 { font-size: 1.125rem; font-weight: 700; margin: var(--s6) 0 var(--s3); }
.concepts, .steps, .trail-records { padding-left: 1.25rem; margin: 0 0 var(--s4); }
.concepts li, .steps li, .trail-records li { margin-bottom: var(--s3); padding-left: var(--s1); }
.concepts li::marker { color: var(--green); }
.steps li::marker { font-family: var(--f-label); font-weight: 700; color: var(--green); }
.trail-records { list-style: none; padding-left: 0; border-top: 1px solid var(--rule); }
.trail-records li { padding: var(--s3) 0; margin: 0; border-bottom: 1px solid var(--rule); }
.trail-records .link-btn { font-family: var(--f-label); font-weight: 650; }

/* Diagramas */
.diagram { margin: var(--s5) 0; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption { font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s2); }
.svg-box { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; }
.svg-box-alt { fill: var(--ipe-wash); }
.svg-stage1 { fill: var(--green-wash); }
.svg-stage2 { fill: #a9cdb6; }
.svg-stage3 { fill: var(--green); stroke: var(--ink); }
.svg-label { font-family: var(--f-label); font-size: 15px; font-weight: 700; fill: var(--ink); }
.svg-in { font-family: var(--f-label); font-size: 14px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.svg-in-light { fill: var(--sheet); }
.svg-small { font-family: var(--f-label); font-size: 13px; fill: var(--ink-2); text-anchor: middle; }
.svg-arrow, .svg-line, .svg-bracket { fill: none; stroke: var(--ink); stroke-width: 2; }
.svg-bracket { stroke-width: 3; }
.svg-dot { fill: var(--green); }
.svg-dot-alt { fill: var(--ipe); stroke: var(--ink); stroke-width: 2; }

/* Caderno de campo: exemplo hipotético sobre papel quadriculado */
.field-notes {
  margin: var(--s6) 0; padding: var(--s5);
  background-color: var(--sheet);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.field-notes h4 { margin-top: 0; }
.field-notes ol, .field-notes ul { padding-left: 1.25rem; }
.field-notes li { margin-bottom: var(--s2); }

/* Exercícios */
.quiz {
  margin: var(--s4) 0 var(--s5); padding: var(--s5);
  background: var(--paper); border-radius: var(--radius);
}
.quiz fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz legend { font-family: var(--f-text); font-size: var(--t-md); font-weight: 600; line-height: 1.5; padding: 0; margin-bottom: var(--s4); }
.q-num { font-family: var(--f-label); font-weight: 750; color: var(--green); }
.option {
  display: flex; gap: var(--s3); align-items: flex-start; flex-wrap: wrap;
  min-height: 48px; padding: var(--s3) var(--s4); margin-bottom: var(--s2);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer;
}
.option > span:not(.option-mark) { flex: 1 1 14rem; }
.option:hover { border-color: var(--rule-strong); }
.option:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.option input { width: 1.25rem; height: 1.25rem; margin: 0.15em 0 0; accent-color: var(--green); flex: none; }
.option.is-correct { background: var(--green-wash); border-color: var(--green); }
.option.is-wrong { background: var(--wrong-wash); border-color: var(--wrong); }
.option-mark { display: inline-flex; align-items: center; gap: var(--s1); font-family: var(--f-label); font-weight: 700; font-size: var(--t-sm); }
.is-correct .option-mark { color: var(--green); }
.is-wrong .option-mark { color: var(--wrong); }
.quiz-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.quiz-feedback { margin: var(--s3) 0 0; font-family: var(--f-label); font-size: var(--t-sm); font-weight: 600; min-height: 1.5em; }
.quiz-feedback.is-correct { color: var(--green); }
.quiz-feedback.is-wrong { color: var(--wrong); }
.quiz-answer { margin-top: var(--s3); }
.quiz-answer summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  font-family: var(--f-label); font-weight: 650; font-size: var(--t-sm); color: var(--green);
}
.quiz-answer[open] summary { margin-bottom: var(--s2); }

/* ---------- Método ---------- */

.method-lead {
  max-width: 60rem; padding: var(--s5) clamp(1rem, 3vw, 2rem); margin-bottom: var(--s7);
  background: var(--sheet); border-top: 6px solid var(--ink);
}
.method-lead h3 { font-size: var(--t-xl); font-weight: 750; letter-spacing: -0.02em; margin-bottom: var(--s4); }
.method-lead > p { max-width: var(--measure); }
.layer-defs { display: grid; gap: var(--s4) var(--s6); margin: 0 0 var(--s5); }
@media (min-width: 760px) { .layer-defs { grid-template-columns: 1fr 1fr; } }
.layer-defs > div { border-top: 2px solid var(--ink); padding-top: var(--s3); }
.layer-defs dt { font-family: var(--f-label); font-weight: 750; font-size: 1.125rem; margin-bottom: var(--s2); }
.layer-count-inline { font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.layer-defs dd { margin: 0; }
.method-warning { padding: var(--s3) var(--s4); background: var(--ipe-wash); border-radius: var(--radius); }

.method-grid { display: grid; gap: var(--s6) var(--s7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.method-block { border-top: 1px solid var(--rule-strong); padding-top: var(--s4); min-width: 0; }
.method-block h3 { font-size: var(--t-lg); font-weight: 700; margin-bottom: var(--s3); }
.legend-list { margin: 0 0 var(--s4); }
.legend-list dt { margin-top: var(--s3); }
.legend-list dd { margin: var(--s2) 0 0; }
.plain-list { padding-left: 1.25rem; margin: 0 0 var(--s4); }
.plain-list li { margin-bottom: var(--s2); }

/* ---------- Rodapé ---------- */

.site-footer { border-top: 1px solid var(--rule); background: var(--sheet); padding-block: var(--s5); font-size: var(--t-sm); color: var(--ink-2); }
.site-footer p { margin: 0; max-width: var(--measure); }

/* ---------- Detalhe (folha lateral) ---------- */

.record-dialog {
  padding: 0; border: 0; color: var(--ink); background: var(--sheet);
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0;
}
@media (min-width: 760px) {
  .record-dialog {
    width: min(48rem, 92vw); margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh;
    border-left: 1px solid var(--rule-strong); box-shadow: -12px 0 40px -18px rgba(20, 48, 31, 0.45);
  }
}
.record-dialog[open] { display: flex; flex-direction: column; animation: sheet-in 260ms var(--ease-out); }
.record-dialog::backdrop { background: rgba(20, 48, 31, 0.42); }
@keyframes sheet-in { from { transform: translateX(28px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.dialog-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) clamp(1rem, 4vw, 2rem) var(--s4); border-bottom: 2px solid var(--ink);
}
.dialog-head h2 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); font-weight: 750; line-height: 1.2; letter-spacing: -0.015em; }
.dialog-close { flex: none; }
.dialog-body { overflow-y: auto; padding: var(--s4) clamp(1rem, 4vw, 2rem) var(--s7); flex: 1; }
.dialog-body > * { max-width: var(--measure); }
.dialog-back { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-family: var(--f-label); font-weight: 650; font-size: var(--t-sm); }
.detail-label { margin: 0 0 var(--s4); }
.status-box { padding: var(--s4); margin-bottom: var(--s4); background: var(--paper); border-radius: var(--radius); }
.status-box .badge { margin-bottom: var(--s3); }
.status-box p:last-child { margin-bottom: 0; }
.status-box-pendente { background: var(--ipe-wash); }
.status-box-historico { background: var(--sheet-hist); }
.ementa { font-style: normal; color: var(--ink-2); padding-left: var(--s4); border-left: 1px solid var(--rule-strong); }
.detail-section { margin-top: var(--s5); }
.detail-section h3 { font-size: 1.0625rem; font-weight: 750; margin-bottom: var(--s2); }
.detail-section ul { padding-left: 1.25rem; margin: 0; }
.detail-section li { margin-bottom: var(--s2); }
.alert-list { list-style: none; padding-left: 0 !important; }
.alert-list li { padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--ipe-wash); }
.alert-list li.alert-historico { background: var(--sheet-hist); }
.alert-list li.alert-alteracao, .alert-list li.alert-versao { background: var(--green-wash); }
.alert-list li.alert-leitura, .alert-list li.alert-remissao, .alert-list li.alert-fonte, .alert-list li.alert-data, .alert-list li.alert-lacuna { background: var(--paper); }
.alert-type { display: flex; align-items: center; gap: var(--s1); font-family: var(--f-label); font-weight: 750; font-size: var(--t-sm); margin-bottom: var(--s1); }
.facts { margin: 0; display: grid; grid-template-columns: 1fr; }
.fact { display: grid; gap: var(--s1) var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 560px) { .fact { grid-template-columns: 11rem 1fr; } }
.fact dt { font-family: var(--f-label); font-weight: 650; font-size: var(--t-sm); color: var(--ink-2); }
.fact dd { margin: 0; font-variant-numeric: tabular-nums; }
.source-list { list-style: none; padding-left: 0 !important; }
.source-list li { display: grid; gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.meta-note { font-family: var(--f-label); font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.hash { font-family: var(--f-code); font-size: var(--t-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.related-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s1) 0; }
.related-list .link-btn { min-height: 44px; }

/* ---------- Movimento e impressão ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .masthead nav, .search-panel, .sheet-actions, .quiz-actions, .ruler { display: none; }
  body { background: var(--sheet); }
  .sheet { box-shadow: none; break-inside: avoid; }
}