/* Estatísticas · touradasacorda.com — the charts and the ranked list of channels, on the tile system of História e fontes.
   Loaded after styles.css, terceira.css, letreiro.css and historia.css; type only from their tokens
   (--t-small 18, --t-body 20, --t-lead 24, --t-h2 44). Written by hand; the pages are written by scripts/stats_build.py. */

/* ---- the language switch is two links here (two pages), dressed as the hub's two buttons ---- */
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; font: 500 var(--t-small)/1 var(--f); color: var(--ink); text-decoration: none; }
.lang-switch a[aria-current="page"] { background: var(--paper); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .lang-switch a:hover { text-decoration: underline; text-underline-offset: 5px; } }
@media (max-width: 1280px) { .lang-switch a { min-height: 52px; font-size: var(--t-body); } }

/* ---- phones and tablets: the Menu button stays in the bar (historia.html has no bottom bar to open it from) ---- */
@media (max-width: 1280px) { .hub-bar .menu-btn { display: inline-flex; } }

/* ---- the number tiles, four to a row ---- */
.stat-num { margin-top: clamp(40px, 5vw, 72px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-num li { min-height: 148px; }

/* ---- one chart: the sentence and its note on the left, the drawing beside them ---- */
.graficos { display: grid; gap: clamp(56px, 6vw, 96px); }
.graf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(28px, 4vw, 64px); row-gap: 20px; align-items: start; }
.graf-t { grid-column: 1; grid-row: 1; max-width: 26ch; }
.graf-nota { grid-column: 1; grid-row: 2; }
.graf-tab { grid-column: 1; grid-row: 3; }
.graf-fig { grid-column: 2; grid-row: 1 / span 4; background: var(--paper); padding: clamp(14px, 2vw, 28px) 0; }
.sv svg { display: block; width: 100%; height: auto; max-width: 760px; margin: 0 auto; padding: 0 clamp(12px, 2vw, 28px); box-sizing: border-box; overflow: visible; }
.sv-n { display: none; }
.graf-nota a { color: var(--cobalt); text-underline-offset: 4px; }

/* the same numbers as a table, for anyone who wants them in text */
.graf-tab summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: var(--t-small); font-weight: 600; color: var(--cobalt); }
.graf-tab table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: var(--t-small); }
.graf-tab th, .graf-tab td { padding: 9px 14px; text-align: left; vertical-align: baseline; }
.graf-tab thead th { font-weight: 600; color: var(--muted); }
.graf-tab tbody th { font-weight: 500; }
.graf-tab td { font-variant-numeric: tabular-nums; }
.graf-tab tbody tr:nth-child(odd) { background: var(--wall); }

/* ---- who films: the ranked list ---- */
.quem { margin-top: clamp(56px, 6vw, 96px); }
.reconhece { font-size: var(--t-lead); line-height: 1.4; font-weight: 600; max-width: 46ch; margin-bottom: 28px; }
.canais { width: 100%; border-collapse: collapse; font-size: var(--t-small); background: var(--paper); }
.canais caption { text-align: left; font-size: var(--t-small); padding: 0 0 14px; max-width: 64ch; }
.canais th, .canais td { padding: 14px 16px; text-align: left; vertical-align: baseline; }
.canais thead th { font-weight: 600; color: var(--muted); background: var(--wall); }
.canais tbody tr:nth-child(even) { background: var(--wall); }
.canais .c-n { width: 3.2em; font-variant-numeric: tabular-nums; color: var(--muted); }
.canais .c-nome { font-size: var(--t-body); font-weight: 600; }
.canais .c-nome a { color: var(--cobalt); text-underline-offset: 5px; display: inline-block; padding: 4px 0; }
@media (hover: hover) and (pointer: fine) { .canais .c-nome a:hover { color: var(--ink); } }
.canais .c-t, .canais .c-p, .canais thead th:nth-child(3), .canais thead th:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.canais .c-t { font-weight: 600; }
.canais .c-a { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- for channels ---- */
.stat .escuro .par { margin-top: 0; }
.stat .escuro .col p { max-width: 46ch; font-size: var(--t-lead); line-height: 1.4; }
.stat .escuro .col p + p { margin-top: 28px; }
.stat .escuro .btn.contacto { color: var(--ink); text-decoration: none; font-size: var(--t-body); }

/* ---- tablet and phone ---- */
@media (max-width: 1080px) {
  .stat-num { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graf { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 20px; }
  .graf-t, .graf-nota, .graf-tab, .graf-fig { grid-column: 1; grid-row: auto; max-width: none; }
  .graf-t { max-width: 34ch; }
  .graf-fig { order: 2; }
  .graf-nota { order: 3; max-width: 64ch; }
  .graf-tab { order: 4; }
}
@media (max-width: 760px) {
  .canais thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .canais, .canais tbody, .canais caption { display: block; }
  .canais tbody tr { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) minmax(0, 1fr); gap: 2px 16px; padding: 16px 14px 18px; }
  .canais td, .canais th { padding: 0; text-align: left; }
  .canais .c-n { grid-column: 1; grid-row: 1; width: auto; font-size: var(--t-body); align-self: center; }
  .canais .c-nome { grid-column: 2 / 4; grid-row: 1; }
  .canais .c-t { grid-column: 2; grid-row: 2; margin-top: 6px; text-align: left; }
  .canais .c-p { grid-column: 3; grid-row: 2; margin-top: 6px; text-align: left; }
  .canais .c-a { grid-column: 2; grid-row: 3; margin-top: 6px; }
  .canais .c-i { grid-column: 3; grid-row: 3; margin-top: 6px; }
  .canais td::before { content: attr(data-l); display: block; font-size: var(--t-small); font-weight: 400; color: var(--muted); }
  .canais td.c-n::before { content: none; }
  .canais .c-t { font-weight: 600; }
}
@media (max-width: 520px) {
  .sv-w { display: none; }
  .sv-n { display: block; }
  .graf-fig { padding: 12px 0; }
  .stat-num li { min-height: 0; }
}