/* Shared components: buttons, citation markers and the source drawer.
   Everything reads the context variables (--bg, --fg, --accent, --cite…) from .poster / .dossier. */

/* ------------------------------------------------------------------ buttons */
.btn {
  --_bg: var(--btn-bg);
  --_fg: var(--btn-fg);
  --_bd: var(--btn-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3rem;
  padding: 0.72em 1.2em 0.62em;
  border: 2px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: var(--label-stretch);
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--btn-shadow);   /* print misregistration, not a soft shadow */
}
.btn:active { transform: none; box-shadow: none; }
.btn .icon { width: 1.15em; height: 1.15em; margin-top: -0.08em; }

.btn--red { --_bg: var(--red-600); --_bd: var(--red-600); --_fg: var(--white); }
.btn--ghost { --_bg: transparent; --_bd: currentColor; --_fg: var(--fg); }
.btn--sm {
  min-height: 2.25rem;
  padding: 0.5em 0.85em 0.42em;
  font-size: 0.95rem;
}
.btn--sm:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--btn-shadow); }

/* quiet text link with a mono face (e.g. "ver as fontes") */
.link-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.35em;
}

/* ------------------------------------------------------------------ citation marker [n]
   <button type="button" class="cite" popovertarget="src-3" aria-label="Fonte 3">[3]</button> */
.cite {
  position: relative;
  display: inline;
  margin: 0 0 0 0.12em;
  padding: 0 0.1em;
  border: 0;
  border-bottom: 1px dotted currentColor;
  background: none;
  color: var(--cite);
  font-family: var(--font-mono);
  font-size: 0.68em;
  font-weight: 600;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: super;
  cursor: pointer;
}
.cite::before {               /* larger hit area without moving the text */
  content: "";
  position: absolute;
  inset: -0.6em -0.35em;
}
.cite:hover,
.cite[aria-expanded="true"] { background: var(--cite); color: var(--bg); border-bottom-color: transparent; }
.cite--missing { color: var(--fg-muted); border-bottom-style: solid; }

/* ------------------------------------------------------------------ source drawer
   <div id="src-3" popover class="src-pop"> … </div>   (native popover; bottom sheet on phones) */
.src-pop {
  --bg: var(--paper-50);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-600);
  --accent: var(--red-700);
  --rule-color: var(--paper-300);
  --focus: var(--ink-900);
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 75vh;
  margin: 0;
  padding: var(--s-5) var(--gutter) var(--s-6);
  overflow: auto;
  border: 0;
  border-top: 5px solid var(--red-600);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.5;
  color-scheme: light;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out), display 220ms allow-discrete, overlay 220ms allow-discrete;
  transform: translateY(0);
  opacity: 1;
}
.src-pop:not(:popover-open) { transform: translateY(1.5rem); opacity: 0; }
@starting-style {
  .src-pop:popover-open { transform: translateY(1.5rem); opacity: 0; }
}
.src-pop::backdrop { background: rgb(6 64 62 / 0.6); }
@media (min-width: 48rem) {
  .src-pop {
    inset: auto var(--s-6) var(--s-6) auto;
    width: 30rem;
    padding: var(--s-5) var(--s-5) var(--s-5);
    border: 2px solid var(--ink-900);
    border-top: 5px solid var(--red-600);
  }
  .src-pop::backdrop { background: rgb(6 64 62 / 0.35); }
}
.src-pop__n {
  display: inline-block;
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
}
.src-pop__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 650;
  font-stretch: normal;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}
.src-pop__meta {
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--fg-muted);
}
.src-pop__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: 0;
  padding: var(--s-3) 0 0;
  border-top: var(--rule) solid var(--rule-color);
  list-style: none;
  font-size: var(--text-sm);
}
.src-pop__links a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.25rem; }
.src-pop__close {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  color: var(--fg);
}
.src-pop__close .icon { width: 1.4rem; height: 1.4rem; }

/* confidence label inside the drawer (Alta / Média / Baixa) */
.conf {
  display: inline-block;
  padding: 0.15em 0.45em 0.1em;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
}
.conf--high { color: #22621A; }
.conf--medium { color: #8A5A00; }
.conf--low { color: var(--red-700); }

/* status chip for plants (map legend, dossier) */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  background: var(--status, var(--fg-muted));
}
.status--contested { --status: var(--red-600); }
.status--licensing { --status: var(--amber-500); }
.status--operating { --status: var(--lime-500); }

/* design specimen only (/design/poster) */
.specimen-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0;
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--fg);
}
.specimen-icons li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: var(--rule) solid var(--rule-color);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.specimen-icons .icon { width: 1.75rem; height: 1.75rem; }

/* ------------------------------------------------------------------ sources (Task 4)
   Popovers without native support: shown through the URL hash (citations.js fallback). */
@supports not selector(:popover-open) {
  .src-pop { display: none; }
  .src-pop:target { display: block; z-index: 50; }
}
.cite--missing { cursor: help; }
.src-pop__nolink { color: var(--fg-muted); font-family: var(--font-mono); font-size: var(--text-xs); }

/* "Fontes nesta página": the sources cited on the page, at the bottom of the layout */
.page-sources { margin-top: var(--s-8); padding-top: var(--s-5); border-top: var(--rule) solid var(--rule-color); }
.page-sources.band { margin-top: 0; border-top: 0; }
.page-sources__title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page-sources__list { margin: 0 0 var(--s-4); padding: 0; list-style: none; font-size: var(--text-sm); }
.page-sources__list li { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule-color); }
.page-sources__n {
  flex: none;
  min-width: 2.75rem;
  min-height: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cite);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.page-sources__n:hover { text-decoration: underline; }
.page-sources__name { font-weight: 600; }
.page-sources__meta { color: var(--fg-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.page-sources__all { margin: 0; }

/* /fontes */
.source-note { max-width: var(--measure); color: var(--fg-muted); font-size: var(--text-sm); }
.source-filter ul { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 var(--s-6); padding: 0; list-style: none; }
.source-filter a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0 var(--s-3);
  border: 1px solid var(--fg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
}
.source-filter a[aria-current="page"] { background: var(--fg); color: var(--bg); }
.source-filter__n { opacity: 0.75; }
.source-list { margin: 0; padding: 0; list-style: none; }
.source-entry { padding: var(--s-5) 0; border-top: var(--rule) solid var(--rule-color); scroll-margin-top: var(--s-7); }
.source-entry:target { outline: 3px solid var(--focus); outline-offset: var(--s-2); }
.source-entry__type { margin: 0 0 var(--s-1); color: var(--accent); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; }
.source-entry__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 650;
  font-stretch: normal;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
.source-entry__notes { max-width: var(--measure); margin: var(--s-3) 0 0; font-size: var(--text-sm); }

/* ------------------------------------------------------------------ "Baseado em dados reais" badge (_DataBadge.cshtml)
   A compact chip that expands into what is real (cited) and what is assumed (⚑). Reads on poster and dossier. */
.data-badge {
  max-width: 40rem;
  margin: var(--s-3) 0 0;
  border: 1px solid var(--rule-color);
  background: var(--bg-raised);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.data-badge:not([open]) { width: fit-content; } /* closed: a compact chip */
.data-badge__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.data-badge__summary::-webkit-details-marker { display: none; }
.data-badge__summary::after { content: "+"; margin-left: var(--s-1); color: var(--accent); }
.data-badge[open] > .data-badge__summary::after { content: "−"; }
.data-badge__summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.data-badge__icon { width: 1rem; height: 1rem; color: var(--accent); }
.data-badge__body { padding: 0 var(--s-4) var(--s-3); border-top: 1px solid var(--rule-color); }
.data-badge__h {
  margin: var(--s-3) 0 var(--s-1);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
}
.data-badge__list { margin: 0; padding-left: 1.1rem; }
.data-badge__list--assumed { padding-left: 0; list-style: none; }
.data-badge__item + .data-badge__item { margin-top: var(--s-1); }
.data-badge__flag { display: inline-block; width: 1.1rem; color: var(--flag); }
.data-badge__method { margin: var(--s-3) 0 0; }
.data-badge__method .icon { width: 1em; height: 1em; vertical-align: -0.125em; }