/* ==========================================================================
   Estatísticas — "os números"
   The arithmetic of the record, not a dashboard. Three series are drawn as one
   figure of stacked panels over a shared year axis, so they can be compared
   instead of read one boxed card at a time. Every value the plots show is also
   written out in the index below them, which is what makes the plots safe to
   keep decorative: the numbers never depend on hovering, colour, or a canvas.
   ========================================================================== */

.es {
  --es-plate:       #14301F;   /* the drenched band, shared with /quemsomos */
  --es-plate-ink:   #E8F2EA;
  --es-plate-muted: #9DBFA9;
  --es-plate-rule:  rgba(232, 242, 234, 0.18);
  --es-barra:       #52B788;   /* 5.76:1 against the plate */
  --es-barra-nota:  #D49550;


  /* The lead series is drawn tall and the two supporting ones short. Equal
     heights would make three panels read as three of the same thing. */
  --es-h-principal:  clamp(7.5rem, 13vw, 11rem);
  --es-h-secundario: clamp(4.5rem, 7.5vw, 6.5rem);

  /* One slot per bar, set by the template from the number of points, so the
     panels and the axis beneath them stay locked to the same columns. */
  --es-largura-barra: 26px;
  --es-folga-barra:   2px;
}

:root[data-theme="dark"] .es {
  --es-plate: #17372A;         /* lifted so the plate still reads as an object */
}

.es-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Shared ---------------------------------------------------------------- */

.es-h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--t-2xl), 3.2vw, var(--t-4xl));
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
}

.es-h2--claro { color: var(--es-plate-ink); }

.es-secao {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2.75rem, 7vw, 5rem) var(--gutter);
}

/* 1. Abertura -----------------------------------------------------------
   The opening is the shared .abertura (main.css). Nothing to add here. */

/* The line under an h2 further down the page. Deliberately a step below the
   abertura lead — fixed size rather than the fluid one, so the two never read
   as the same rank on a wide screen. */
.es-secao-lead {
  font-size: var(--t-lg);
  line-height: 1.75;
  color: var(--c-text-muted);
  max-width: 52ch;
  margin: 0;
}

/* 2. Os totais ----------------------------------------------------------
   The masthead itself is the shared .marcos component (main.css). This page
   only says where it sits and how wide it runs. */

.es .marcos {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4rem);
}

/* 3. A figura ------------------------------------------------------------ */

.es-plate {
  background: var(--es-plate);
  color: var(--es-plate-ink);
}

.es-plate-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter);
}

.es-figura { margin: 0; }

/* The base sheet centres figcaptions; this one is a heading and a note. */
.es .es-figura figcaption { text-align: left; }

.es-figura-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--es-plate-rule);
}

/* This one carries an explanation rather than a label, and the readers this
   site is built for are mostly over 60, so it sits a step above label size. */
.es-figura-nota {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--es-plate-muted);
  margin: 0;
  max-width: 42ch;
}

.es-painel + .es-painel { margin-top: clamp(1.75rem, 4vw, 2.75rem); }

.es-painel-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}

.es-painel-nome {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--es-plate-ink);
}

/* The axis top, stated once per panel. Three labelled y-axes on one figure is
   more furniture than the data can carry; the index below holds the detail. */
.es-painel-topo {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--es-plate-muted);
  font-variant-numeric: tabular-nums;
}

/* One shared column rule for the bars and for the axis beneath them. */
.es-escala {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--es-folga-barra);
}

.es-barras {
  height: var(--es-h-secundario);
  border-bottom: 1px solid var(--es-plate-rule);
  background-image: repeating-linear-gradient(
    to top,
    var(--es-plate-rule) 0 1px,
    transparent 1px calc(100% / var(--es-linhas, 4))
  );
}

.es-painel--principal .es-barras { height: var(--es-h-principal); }

.es-barra {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--es-largura-barra);
  height: 100%;
  display: flex;
  align-items: flex-end;
  position: relative;
}

/* A three-digit label is wider than its own bar, and later siblings paint over
   earlier ones, so the labelled bar has to be raised above the row. */
.es-barra.is-pico { z-index: 2; }

.es-barra-fill {
  display: block;
  width: 100%;
  height: var(--h, 0%);
  min-height: 2px;
  background: var(--es-barra);
  border-radius: 3px 3px 0 0;    /* rounded data-end, square base */
}

/* A year with walks but no distance written down is a hole in the record, not
   a zero. Drawn hollow so it cannot be mistaken for a measured value — and
   never colour-alone: the index below spells out "sem registo". */
.es-barra.is-sem-registo .es-barra-fill {
  height: 100%;
  min-height: 0;
  background: repeating-linear-gradient(
    -45deg,
    var(--es-plate-rule) 0 2px,
    transparent 2px 5px
  );
  border-radius: 0;
}

/* A true zero draws nothing. */
.es-barra.is-vazio .es-barra-fill {
  min-height: 0;
  background: none;
}

/* The peak is direct-labelled so the tallest year can be read without going to
   the index. It sits just inside the bar's own top edge rather than floating
   above it: a peak reaches the top of its panel by definition, and anything
   stacked above would land on the panel's name. */
.es-barra-pico {
  position: absolute;
  left: 50%;
  top: calc(100% - var(--h, 0%));
  transform: translate(-50%, 5px);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--es-plate);          /* dark ink on the bar it labels */
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.es-eixo-x {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--es-plate-muted);
  font-variant-numeric: tabular-nums;
}

/* A four-digit year is wider than a bar slot, so each label is centred over
   its own tick and allowed to spill either side rather than being squeezed. */
.es-eixo-tick {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--es-largura-barra);
  height: 1.3em;
}

.es-eixo-tick > span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.es-figura-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--es-plate-ink);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}

.es-figura-link svg { transition: transform var(--dur) var(--ease); }
.es-figura-link:hover svg { transform: translateX(4px); }

/* 4. As tabelas ---------------------------------------------------------
   The index doubles as the figure's text alternative and as the navigation,
   which is why the plots above need no tooltips and no hit targets. */

.es-tabela-scroll {
  overflow-x: auto;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.es-tabela {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* Four short columns stretched over a desktop width leave the eye travelling
   an empty half-metre between a year and its numbers. The index is capped so
   the row stays one glance wide; the ledger below it is not, because activity
   names need the room. */
.es-tabela--indice { max-width: 46rem; }

/* Not sticky: with border-collapse the stuck cell loses its bottom border, so
   rows slid under the heads with nothing separating them and read as cut in
   half. Twenty-nine rows do not need a following header anyway. */
.es-tabela thead th {
  background: var(--c-bg);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--c-border-2);
}

/* Each row is headed by its year, which makes the numeric cells announce what
   they belong to. It is a row header, so none of the column-head styling
   above applies to it. */
.es-tabela tbody th {
  background: none;
  padding: 0 var(--s-4) 0 0;
  border-bottom: 1px solid var(--c-border);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: middle;
}

.es-tabela td {
  padding: 0 var(--s-4) 0 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--t-base);
  vertical-align: middle;
}

/* The global sheet clears the last rule; the ledger wants a closing line. */
.es-tabela tbody tr:last-child th,
.es-tabela tbody tr:last-child td { border-bottom: 1px solid var(--c-border-2); }

.es-tabela tbody tr:hover th,
.es-tabela tbody tr:hover td { background: var(--c-surface-2); }

/* Right-aligned, so the gutter has to sit on the left or two column heads run
   into each other. The rightmost column stays flush with the table edge. */
.es-tabela .es-num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--t-base);
  color: var(--c-text);
  white-space: nowrap;
  padding-left: var(--s-6);
  padding-right: 0;
}

.es-tabela thead th.es-num { font-size: var(--t-xs); }

.es-tabela caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding-bottom: var(--s-4);
}

/* Nothing was recorded. Said in words, so it never rests on a lighter grey. */
.es-vazio-celula {
  color: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-style: italic;
}

/* The whole year cell is the target, sized for a thumb rather than for the
   four characters inside it. */
.es-ano-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-right: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: 0.02em;
}

.es-ano-link:hover { color: var(--c-primary-2); text-decoration: underline; text-underline-offset: 4px; }

.es-ano-marca {
  margin-left: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--c-warm);
  white-space: nowrap;
}

/* The per-year ledger. Dates never wrap, titles take the slack. */
.es-ledger td { padding-top: var(--s-3); padding-bottom: var(--s-3); }

.es-ledger-data {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  white-space: nowrap;
}

.es-ledger-titulo a {
  display: block;
  min-height: 32px;
  padding: var(--s-2) 0;
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--c-text);
  text-wrap: pretty;
}

.es-ledger-titulo a:hover {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 5. Navegação ----------------------------------------------------------- */

.es-rodape {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-border);
}

.es-rodape-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

.es-vizinhos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.es-vizinho {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-full);
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-surface);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.es-vizinho:hover { border-color: var(--c-primary); color: var(--c-primary); }

.es-vizinho-ano {
  font-family: var(--font-mono);
  font-weight: 700;
}

.es-rodape-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;    /* sized by its label, not by the grid column */
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-full);
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
  text-align: center;
}

.es-rodape-acao:hover { background: var(--c-primary-2); border-color: var(--c-primary-2); color: #fff; }

/* 6. Sem dados ----------------------------------------------------------- */

.es-sem-dados {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) var(--gutter) clamp(3rem, 8vw, 5rem);
  border-top: 1px solid var(--c-border-2);
}

.es-sem-dados-texto {
  font-size: var(--t-lg);
  line-height: 1.8;
  color: var(--c-text-muted);
  max-width: 48ch;
  margin: 0;
}

/* Motion ----------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .es-barra-fill {
    transform-origin: bottom;
    animation: es-rise var(--dur-entra) var(--ease-out) both;
    /* The bars are the fourth thing to arrive: abertura, then the figures,
       then the plate fills in. Their own stagger is a quarter of a beat —
       forty of them at a full beat each would take half a minute. */
    animation-delay: calc(
      (var(--abertura-beats) + 4) * var(--stagger) + var(--i, 0) * (var(--stagger) / 4)
    );
  }
}

@keyframes es-rise {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 900px) {
  .es-rodape-inner { grid-template-columns: 1fr; align-items: stretch; }
  .es-rodape-acao { justify-self: stretch; }
}

@media (max-width: 560px) {
  .es { --es-largura-barra: 18px; }

  /* A three-digit number is wider than two bars at this width, so it lands on
     its neighbours whichever way it is stacked. The index below the figure
     carries every value, so the label is simply dropped. */
  .es-barra-pico { display: none; }

  .es-eixo-x { font-size: 0.625rem; }

  /* Five-year ticks collide at this width, so drop to decades. */
  .es-tick-meia { display: none; }

  .es-vizinhos { flex-direction: column; align-items: stretch; }
  .es-vizinho { justify-content: center; }
}