/* Argentina scorecard — page layer on top of crbl.css (Atelier tokens). Sharp corners throughout. */

:root {
  --verdict-better: #0B7F5E;
  --verdict-worse: #C24A2C;
  --verdict-flat: #7D7666;
  --line-before: #B3AA98;
  --line-after: var(--color-text);
  --page-width: 1200px;
}

body { margin: 0; }

.section {
  max-width: var(--page-width);
  margin: 0 auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.eyebrow {
  margin: 0 0 var(--space-xs);
  color: var(--color-accent-darker);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

a { color: inherit; text-decoration-color: var(--color-border-dark); text-underline-offset: 2px; }
a:hover { color: var(--color-accent-darker); text-decoration-color: currentColor; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }

/* ---------- Masthead ---------- */
.masthead { padding-top: var(--space-2xl); padding-bottom: var(--space-lg); }
.masthead h1 { margin: 0 0 var(--space-sm); font-size: 44px; }
.masthead__method { margin: 0; color: var(--color-text-muted); max-width: none; }
.masthead__method strong { color: var(--color-text); font-weight: 600; }
.masthead__asof { margin: var(--space-sm) 0 0; font-size: var(--font-size-body-sm); color: var(--color-text-muted); }

/* ---------- Verdict tag ---------- */
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}
.verdict__mark { width: 10px; height: 10px; background: var(--verdict-flat); flex: none; }
.verdict--better .verdict__mark { background: var(--verdict-better); }
.verdict--worse .verdict__mark { background: var(--verdict-worse); }

/* ---------- Verdict strip ---------- */
.strip { position: sticky; top: 0; z-index: 20; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--space-xs); }
.strip__item { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--color-border); background: var(--color-surface); text-decoration: none; height: 100%; box-sizing: border-box; }
.strip__item:hover { border-color: var(--color-border-dark); color: inherit; }
.strip__label { font-size: var(--font-size-caption); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Grids ---------- */
main .section { margin-top: var(--space-lg); }
.grid { display: grid; gap: var(--space-md); }
.grid--large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--small { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Metric card ---------- */
.metric {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  scroll-margin-top: 90px;
}
.metric__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.metric__head .eyebrow { margin: 0; }
.metric__value { margin: var(--space-sm) 0 0; font-family: var(--font-sans); font-weight: 600; line-height: 1; letter-spacing: -0.02em; max-width: none; }
.metric--large .metric__value { font-size: 48px; }
.metric--small .metric__value { font-size: 32px; }
.metric__value a { text-decoration: none; }
.metric__value a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.metric__asof { margin: var(--space-xs) 0 0; font-size: var(--font-size-caption); color: var(--color-text-muted); max-width: none; }
.metric__chart { margin-top: var(--space-sm); position: relative; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.chip { display: flex; flex-direction: column; padding: 4px 8px; border: 1px solid var(--color-border); background: var(--color-bg); min-width: 0; }
.chip__key { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.chip__value { font-family: var(--font-mono); font-size: var(--font-size-body-sm); font-weight: 600; }
.chip__note { font-size: 11px; color: var(--color-text-muted); }
.chip--source { justify-content: flex-start; }
.source { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: var(--font-size-body-sm); font-weight: 600; }
.tag--unofficial { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-deepest); background: var(--color-warning-bg); border: 1px solid var(--color-accent); padding: 0 4px; }

/* ---------- Collapsibles ---------- */
.metric__more { margin-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.metric__more details { border-bottom: 1px solid var(--color-border); }
.metric__more summary {
  cursor: pointer;
  list-style: none;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.metric__more summary::-webkit-details-marker { display: none; }
.metric__more summary::before { content: '+'; display: inline-block; width: 1.2em; color: var(--color-accent-dark); }
.metric__more details[open] > summary::before { content: '−'; }
.metric__more details > :not(summary) { margin: 0 0 var(--space-sm); }

.breakdown { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.breakdown__row--plain { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--font-size-body-sm); }
.breakdown__top { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--font-size-body-sm); }
.breakdown__label { color: var(--color-text-muted); }
.breakdown__value { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.breakdown__meta { display: flex; flex-wrap: wrap; gap: 2px var(--space-sm); font-size: 11px; color: var(--color-text-muted); }
.breakdown__meta .source { font-size: 11px; }

.context { margin: 0; padding-left: 1.1em; font-size: var(--font-size-body-sm); }
.context li + li { margin-top: 2px; }
.method { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-sm); font-size: var(--font-size-body-sm); }
.method dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); padding-top: 2px; }
.method dd { margin: 0; }
.table-wrap { max-height: 260px; overflow-y: auto; border: 1px solid var(--color-border); }
.data-table, .sources { width: 100%; border-collapse: collapse; font-size: var(--font-size-body-sm); }
.data-table th, .data-table td, .sources th, .sources td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--color-border); }
.data-table th, .sources th { position: sticky; top: 0; background: var(--color-surface); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.data-table td:nth-child(2) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Charts (SVG, classes only — CSP forbids inline style) ---------- */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-mono); font-size: 8.5px; fill: var(--color-text-muted); }
.chart .side { font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; }
.chart .side--after { fill: var(--color-text); font-weight: 700; }
.chart .grid { stroke: var(--color-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .grid--zero { stroke: var(--color-border-dark); }
.chart .tick { stroke: var(--color-border-dark); vector-effect: non-scaling-stroke; }
.band--baseline { fill: var(--color-text); opacity: 0.05; }
.band--recent { fill: var(--color-accent); opacity: 0.12; }
.divider { stroke: var(--color-text); stroke-width: 1; vector-effect: non-scaling-stroke; }
.inherited { stroke: var(--color-text-muted); stroke-width: 1.25; stroke-dasharray: 4 3; fill: none; vector-effect: non-scaling-stroke; }
.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.line--before { stroke: var(--line-before); }
.line--after { stroke: var(--line-after); }
.dot--before { fill: var(--line-before); }
.dot--after { fill: var(--line-after); }
.end-dot { fill: var(--line-after); stroke: var(--color-surface); stroke-width: 2; }
.event-tick { stroke: var(--color-accent-dark); stroke-width: 2; vector-effect: non-scaling-stroke; }
.event-hit, .hit-area { fill: transparent; }
.event:hover .event-tick, .event:focus .event-tick { stroke: var(--color-accent-deepest); }
.hit:focus { outline: none; }
.crosshair { stroke: var(--color-text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.focus-dot { fill: var(--line-after); stroke: var(--color-surface); stroke-width: 2; pointer-events: none; }
.chart--spark text { font-size: 8px; }

/* Tooltip (positioned by tooltip.js through CSSOM, which CSP allows). */
.tooltip {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  padding: 6px 8px;
  background: var(--color-bg-dark);
  color: var(--color-text-onDark);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
}
.tooltip[hidden] { display: none; }
.tooltip__title { font-family: var(--font-mono); font-size: 11px; color: #A99F8C; }
.tooltip__body { font-family: var(--font-mono); font-weight: 700; }
.tooltip__foot { font-size: 11px; color: var(--color-accent-onDark); }

/* ---------- Legend tile ---------- */
.legend { gap: var(--space-sm); }
.legend__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--font-size-body-sm); }
.legend__list li { display: flex; align-items: center; gap: var(--space-sm); }
.legend__list svg { width: 28px; height: 10px; flex: none; overflow: visible; }
.legend__verdicts { padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.legend__verdicts .verdict { min-width: 76px; }
.legend__note { margin: auto 0 0; font-size: 12px; color: var(--color-text-muted); max-width: none; }

/* ---------- Timeline ---------- */
.timeline { margin-top: var(--space-2xl); }
.timeline__list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; border-left: 2px solid var(--color-accent-dark); }
.timeline__item { display: grid; grid-template-columns: 130px 1fr auto; gap: var(--space-md); align-items: baseline; padding: 8px 0 8px var(--space-md); border-bottom: 1px solid var(--color-border); scroll-margin-top: 90px; }
.timeline__item:target { background: var(--color-warning-bg); }
.timeline__date { font-size: var(--font-size-body-sm); color: var(--color-text-muted); }
.timeline__title { font-weight: 600; }
.timeline__areas { font-size: 12px; color: var(--color-text-muted); text-align: right; }

/* ---------- Footer ---------- */
.footer { margin-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.sources { margin-top: var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border); }
.sources .source { font-size: var(--font-size-body-sm); font-weight: 500; }
.footer__sig { margin-top: var(--space-lg); font-size: 12px; color: var(--color-text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .strip__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid--large, .grid--small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .section { padding-left: var(--space-md); padding-right: var(--space-md); }
  .masthead h1 { font-size: 32px; }
  .strip { position: static; }
  .strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--large, .grid--small { grid-template-columns: minmax(0, 1fr); }
  .metric--large .metric__value { font-size: 40px; }
  .chart text { font-size: 11px; }
  .chart .side { font-size: 10px; }
  .timeline__item { grid-template-columns: 1fr; gap: 2px; }
  .timeline__areas { text-align: left; }
  .sources th:nth-child(4), .sources td:nth-child(4), .sources th:nth-child(5), .sources td:nth-child(5) { display: none; }
}

.chip a.chip__value { text-decoration: none; }
.chip a.chip__value:hover { text-decoration: underline; }

/* Small cards render their 360-unit charts at ~340px: keep axis text legible. */
.chart--small text { font-size: 11px; }
.chart--small .side { font-size: 10px; }
.sources td:nth-child(4), .sources td:nth-child(5) { white-space: nowrap; }