/* =======================================================================
   Mappr Responsive Table (.rt) — v2, card-stacked at every viewport
   -----------------------------------------------------------------------
   Each <tr> renders as a card at all widths (no desktop table chrome):
     ┌─────────────────────────────────────────────────┐
     │  🇨🇩  Democratic Republic of the Congo          │ ← country header
     │  ───────────────────────────────────────────    │
     │  OUTBREAKS    CASES        DEATHS               │
     │    17         4,596        2,738                │ ← 3-up stat tiles
     │  YEARS  1976–2026                               │ ← meta footer
     └─────────────────────────────────────────────────┘

   USAGE
   -----
   <header class="rt-header">                ← optional chrome
     <p class="rt-header__eyebrow">…</p>
     <h2 class="rt-header__title">…</h2>
     <p class="rt-header__sub">…</p>
   </header>
   <table class="rt">
     <thead> <tr><th>…</th>…</tr> </thead>   ← visually hidden, kept for a11y
     <tbody>
       <tr>
         <td data-label="Country" class="rt__country">
           <span class="rt__flag">🇨🇩</span>
           <span class="rt__country-name">DRC</span>
         </td>
         <td data-label="Outbreaks" class="rt__num">17</td>
         <td data-label="Cases" class="rt__num" data-highlight="true">4,596</td>
         <td data-label="Deaths" class="rt__num">2,738</td>
         <td data-label="Years" class="rt__years">1976–2026
           <span class="rt__note">(notes here)</span>
         </td>
       </tr>
     </tbody>
   </table>

   COLUMN MODIFIERS
   ----------------
   .rt__country               — flag + name. Renders as the card header.
   .rt__country--multi        — multi-flag group row; stacks flag bar
                                above the name on its own line.
   .rt__num                   — numeric column. The first three .rt__num
                                cells in a row fill the 3-up stat tile grid.
   .rt__num[data-highlight=…] — emphasise a notable number (brand blue).
   .rt__num--each             — trailing "each" label (e.g. "1 each").
   .rt__years                 — metadata footer line.
   .rt__note                  — muted parenthetical inside .rt__years.

   The card is sized to fit comfortably down to 320px; designed-for at 656px.
   ======================================================================= */

:where(:root) {
  --rt-bg:         #ffffff;
  --rt-bg-row:     #f8fafc;
  --rt-border:     #e2e8f0;
  --rt-border-2:   #e9ecef;
  --rt-text:       #1e293b;
  --rt-text-muted: #64748b;
  --rt-eyebrow:    #64748b;
  --rt-brand:      #2563eb;
  --rt-brand-soft: #dbeafe;
  --rt-accent:     #0f2744;
  --rt-radius:     12px;
  --rt-radius-sm:  8px;
  --rt-shadow:     0 1px 2px rgba(15,39,68,0.04), 0 2px 8px rgba(15,39,68,0.04);
  --rt-shadow-hi:  0 4px 16px rgba(37,99,235,0.10);
  --rt-font:       var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji");

  --rt-fs-xs:      0.75rem;
  --rt-fs-sm:      0.8125rem;
  --rt-fs-base:    0.875rem;
  --rt-fs-lg:      1rem;
  --rt-fw-regular: 400;
  --rt-fw-medium:  500;
  --rt-fw-semi:    600;
  --rt-fw-bold:    700;
  --rt-neutral-950: #1a1a2e;
}

/* =======================================================================
   Header chrome — optional eyebrow / title / subtitle above the table
   ======================================================================= */

.rt-header {
  width: 100%;
  max-width: 656px;
  margin: 3em auto 20px;
  padding: 0;
  font-family: var(--rt-font);
}

.rt-header__eyebrow {
  font-size: var(--rt-fs-xs);
  font-weight: var(--rt-fw-semi);
  color: var(--rt-brand);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  line-height: 1.3;
}

.rt-header__title {
  font-size: 1.6rem;
  font-weight: var(--rt-fw-bold);
  line-height: 1.2;
  color: var(--rt-neutral-950);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.rt-header__sub {
  font-size: var(--rt-fs-base);
  color: var(--rt-text-muted);
  line-height: 1.5;
  margin: 0;
  max-width: 56ch;
}
.rt-header__sub strong {
  color: var(--rt-text);
  font-weight: var(--rt-fw-semi);
}

/* When chrome is present, the table sits flush below it — chrome owns the
   top margin for the whole block. */
.rt-header + .rt {
  margin-top: 0;
}

/* When a source caption follows the table, caption owns the bottom margin. */
.rt:has(+ .rt-source) {
  margin-bottom: 0;
}

/* =======================================================================
   Container — block-level, no table chrome
   ======================================================================= */

.rt {
  display: block;
  width: 100%;
  max-width: 656px;
  margin: 3em auto;
  padding: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--rt-font);
  color: var(--rt-text);
  background: transparent;
  border: 0;
}

/* Visually hide thead — labels are restated per-cell via data-label,
   but the header stays in the DOM for assistive tech. */
.rt thead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.rt tbody,
.rt tr,
.rt td {
  display: block;
}

/* =======================================================================
   The row — card layout
   ======================================================================= */

.rt tbody tr {
  background: var(--rt-bg);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius);
  box-shadow: var(--rt-shadow);
  margin-bottom: 12px;
  padding: 16px 18px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "country country country"
    "stats   stats   stats"
    "years   years   years";
  gap: 14px 10px;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

/* Dynamic stat-tile count — the block emits data-stats on each <tr> so the
   grid adapts. Defaults above are data-stats="3"; the overrides below handle
   1- and 2-tile rows, and data-no-meta="true" collapses the years footer. */
.rt tbody tr[data-stats="1"] {
  grid-template-columns: 1fr;
  grid-template-areas:
    "country"
    "stats"
    "years";
}
.rt tbody tr[data-stats="2"] {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "country country"
    "stats   stats"
    "years   years";
}
.rt tbody tr[data-no-meta="true"] {
  grid-template-areas:
    "country country country"
    "stats   stats   stats";
}
.rt tbody tr[data-stats="1"][data-no-meta="true"] {
  grid-template-areas:
    "country"
    "stats";
}
.rt tbody tr[data-stats="2"][data-no-meta="true"] {
  grid-template-areas:
    "country country"
    "stats   stats";
}

.rt tbody tr:hover {
  border-color: var(--rt-brand);
  box-shadow: var(--rt-shadow-hi);
}
.rt tbody tr:last-child {
  margin-bottom: 0;
}
.rt tbody tr td {
  border: none;
  padding: 0;
}

/* =======================================================================
   Country header
   ======================================================================= */

.rt td.rt__country {
  grid-area: country;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.0625rem;
  font-weight: var(--rt-fw-semi);
  color: var(--rt-accent);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rt-border-2);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* Multi-flag group rows: stack the flag bar above the (long) name so the
   four-flag row (UK·Spain·Italy·Germany) doesn't crush onto one line. */
.rt td.rt__country--multi {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.rt__flag {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.rt__flag--stack {
  display: inline-flex;
  gap: 3px;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.rt__country-name {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  line-height: 1.3;
}

/* =======================================================================
   Stat tiles — 3-up grid
   ======================================================================= */

.rt td.rt__num {
  background: var(--rt-bg-row);
  border-radius: var(--rt-radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--rt-font);
  /* Fluid number font: 17px floor at narrow widths, 21px ceiling on desktop.
     Stops 6-char values like "14,124" / "10,675" wrapping in narrow tiles. */
  font-size: clamp(1.0625rem, 3.5vw, 1.3125rem);
  font-weight: var(--rt-fw-bold);
  color: var(--rt-text);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  text-align: left;
  min-width: 0;
  /* Numbers stay on one line, no matter how narrow the tile. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Position the three numeric tiles */
.rt td.rt__num:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.rt td.rt__num:nth-of-type(3) { grid-column: 2; grid-row: 2; }
.rt td.rt__num:nth-of-type(4) { grid-column: 3; grid-row: 2; }

/* Eyebrow label — never wrap, tighten letter-spacing at narrow widths so
   "OUTBREAKS" / "DEATHS" stay on one line in the 3-up tile grid. */
.rt td.rt__num::before {
  content: attr(data-label);
  display: block;
  font-size: 0.625rem;
  font-weight: var(--rt-fw-semi);
  color: var(--rt-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  order: -1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Highlighted notable values */
.rt td.rt__num[data-highlight="true"] {
  background: var(--rt-brand-soft);
  color: var(--rt-brand);
}
.rt td.rt__num[data-highlight="true"]::before {
  color: var(--rt-brand);
  opacity: 0.85;
}

/* "1 each" treatment */
.rt td.rt__num--each {
  white-space: nowrap;
}
.rt td.rt__num--each .rt__each {
  font-size: 0.6875rem;
  font-weight: var(--rt-fw-medium);
  color: var(--rt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 5px;
  vertical-align: 0.25em;
}

/* =======================================================================
   Years footer
   ======================================================================= */

.rt td.rt__years {
  grid-area: years;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
  font-size: 0.8125rem;
  color: var(--rt-text-muted);
  font-variant-numeric: tabular-nums;
}
.rt td.rt__years::before {
  content: attr(data-label);
  font-size: 0.6875rem;
  font-weight: var(--rt-fw-semi);
  color: var(--rt-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.rt__note {
  display: inline;
  font-size: 0.75rem;
  color: var(--rt-text-muted);
}

/* =======================================================================
   Source / footer caption
   ======================================================================= */

.rt-source {
  width: 100%;
  max-width: 656px;
  margin: 20px auto 3em;
  padding: 12px 16px;
  font-size: var(--rt-fs-xs);
  color: var(--rt-text-muted);
  line-height: 1.5;
  border-top: 1px solid var(--rt-border-2);
}
.rt-source p { margin: 0; }

/* =======================================================================
   Narrow viewport (<420px) — tighter padding, no horizontal overflow
   ======================================================================= */

@media (max-width: 420px) {
  .rt-header__title { font-size: 1.375rem; }
  .rt tbody tr {
    padding: 14px 14px 12px;
    gap: 12px 6px;
  }
  .rt td.rt__num {
    padding: 9px 8px;
    /* clamp() handles the font; just tighten padding + gap here */
    gap: 4px;
  }
  .rt td.rt__num::before {
    font-size: 0.5625rem;
    letter-spacing: 0.03em;
  }
  .rt td.rt__country {
    font-size: 1rem;
    gap: 10px;
  }
  .rt__flag { font-size: 1.375rem; }
}

/* Trend indicators (2020->2025 etc.) */
.rt__num .rt__trend{font-weight:700;white-space:nowrap}
.rt__trend--up{color:#16a34a}
.rt__trend--down{color:#dc2626}


/* Optional per-row logo (e.g. airline logos) */
.rt__logo{display:inline-flex;align-items:center;justify-content:center;height:30px;margin-right:10px;vertical-align:middle;}
.rt__logo img{height:30px;width:auto;max-width:78px;object-fit:contain;display:block;}
.rt td.rt__country .rt__logo{flex:0 0 auto;}
@media (max-width:600px){.rt__logo img{height:26px;max-width:64px;}}