/* assets/coverage-table.css
 *
 * The "What we hold" table on the homepage, and nothing else.
 *
 * WHY IT HAS ITS OWN NAMESPACE
 *   The section used to be class="cov", a name the By the numbers chart
 *   further down the same page also uses. site.css scopes the chart's rules
 *   under .numbers, so those never reached the table, but coverage.css's .cov
 *   rules reach the chart. The table also leaned on .n, .bar, .cell, .tbl,
 *   .tog and .has, names generic enough to collide: the header cells carrying
 *   .n rendered larger than the rest.
 *
 *   Every class here starts cvh- and every rule sits under .cvh. Nothing
 *   outside can reach in, and nothing here can leak out.
 *
 * WHY IT SETS PROPERTIES THAT LOOK REDUNDANT
 *   table, th, td, button, img and b all carry site-wide rules. Each rule
 *   below sets what those could disturb (padding, border, background, font,
 *   height) rather than trusting the defaults.
 *
 * WHY THE COLUMNS ARE FIXED
 *   table-layout: fixed with set widths, so switching nation never moves a
 *   column, and a fixed row height, so the table never changes height.
 *
 * ONE RADIUS
 *   var(--r) on the card, the toggle, its buttons, the pills and the bars.
 */

.cvh{
  --cvh-ink:var(--ink,#17201B);
  --cvh-mut:var(--mut,#5A645D);
  --cvh-line:var(--line,#DDDBD2);
  --cvh-green:var(--green,#0E5B41);
  --cvh-white:var(--white,#FFFFFF);
  --cvh-paper:var(--paper,#F7F6F2);
  --cvh-r:var(--r,10px);
  --cvh-disp:var(--disp,"Barlow Condensed","Arial Narrow",sans-serif);
  --cvh-body:var(--body,"Public Sans",system-ui,-apple-system,sans-serif);
  --cvh-mono:var(--mono,"IBM Plex Mono",ui-monospace,Menlo,monospace);
  --cvh-thead:#FCFBF8;
  --cvh-rule:#F0EEE8;
  --cvh-groove:#EDEBE4;
  --cvh-mint:#EAF5EF;
  --cvh-pad:16px;

  display:block;position:relative;
  height:auto;min-height:0;margin:0;padding:88px 0;border:0;
  background:var(--cvh-paper);color:var(--cvh-ink);letter-spacing:normal;
}
.cvh *,.cvh *::before,.cvh *::after{box-sizing:border-box}
/* Inline elements take their spacing from the block they sit in, never from
   a site-wide element rule. Each block below sets its own. */
.cvh span,.cvh b,.cvh a,.cvh em{letter-spacing:inherit}
.cvh > .wrap{container:cvh-wrap / inline-size}

/* ── Head: copy left, nation toggle right, both sitting on one baseline ── */
.cvh .cvh-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
  column-gap:40px;row-gap:22px;margin:0 0 26px;padding:0}
.cvh .cvh-copy{min-width:0}
.cvh .cvh-eyebrow{margin:0 0 14px;padding:0;font:500 11px/1 var(--cvh-mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--cvh-mut)}
.cvh .cvh-title{margin:0;padding:0;font:700 46px/1.02 var(--cvh-disp);
  letter-spacing:-.005em;text-transform:none;color:var(--cvh-ink)}
.cvh .cvh-title em{font-style:normal;color:var(--cvh-green)}
.cvh .cvh-lede{margin:14px 0 0;padding:0;max-width:32em;font:400 16px/1.6 var(--cvh-body);
  color:var(--cvh-mut)}

/* The flags live in the toggle only. One flag says which nation the whole
   table is showing, so the rows do not repeat it. */
.cvh .cvh-tog{display:inline-flex;align-items:center;gap:2px;margin:0;padding:4px;
  background:var(--cvh-white);border:1px solid var(--cvh-line);border-radius:var(--cvh-r)}
.cvh .cvh-tog button{-webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:34px;margin:0;padding:0 14px;border:0;border-radius:var(--cvh-r);
  background:transparent;color:var(--cvh-ink);box-shadow:none;
  font:500 12px/1 var(--cvh-mono);letter-spacing:.02em;text-transform:none;white-space:nowrap;
  cursor:pointer;transition:background-color .15s ease,color .15s ease}
.cvh .cvh-tog button:hover{background:var(--cvh-paper)}
.cvh .cvh-tog button.on{background:var(--cvh-green);color:#FFFFFF}
.cvh .cvh-tog button:focus-visible{outline:2px solid var(--cvh-green);outline-offset:2px}
.cvh .cvh-tog img{display:block;flex:none;width:20px;height:14px;max-width:none;margin:0;
  border-radius:0;object-fit:cover;box-shadow:0 0 0 1px rgba(23,32,27,.14)}
.cvh .cvh-tog button.on img{box-shadow:0 0 0 1px rgba(255,255,255,.45)}
.cvh .cvh-tog .cvh-code{display:none}

/* ── The table ─────────────────────────────────────────────────────────── */
.cvh .cvh-card{container:cvh-card / inline-size;margin:0;padding:0;
  background:var(--cvh-white);border:1px solid var(--cvh-line);border-radius:var(--cvh-r);
  overflow:hidden}
.cvh .cvh-tbl{width:100%;margin:0;table-layout:fixed;border:0;border-collapse:collapse;
  border-spacing:0;background:transparent;font-variant-numeric:tabular-nums}
.cvh .cvh-tbl th,
.cvh .cvh-tbl td{padding:0 var(--cvh-pad);border:0;text-align:left;vertical-align:middle;
  white-space:nowrap;overflow:hidden}

/* One label style for every header, numeric or not. */
.cvh .cvh-tbl th{height:42px;background:var(--cvh-thead);border-bottom:1px solid var(--cvh-line);
  font:500 11px/1 var(--cvh-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cvh-mut)}
.cvh .cvh-tbl td{height:52px;background:transparent;border-bottom:1px solid var(--cvh-rule);
  font:400 16px/1.2 var(--cvh-body);letter-spacing:0;color:var(--cvh-ink)}
.cvh .cvh-tbl tbody tr:last-child td{border-bottom:0}
.cvh .cvh-tbl .cvh-r{text-align:right}

/* Widths from the header row. Track takes whatever is left.
   Since zip 190 the table has no Runners column (the count holds none per track),
   Results became Share of races, and Also carries is wide enough for four pills
   on one line: at 200px the fourth was cut off at "Priz". */
.cvh .cvh-tbl th.cvh-races{width:104px}
.cvh .cvh-tbl th.cvh-results{width:196px}
.cvh .cvh-tbl th.cvh-carries{width:372px}
.cvh .cvh-tbl th.cvh-since{width:84px}

/* Track: the name is the headline, the trip and county sit beside it. */
.cvh .cvh-trk{display:flex;align-items:baseline;gap:10px;min-width:0}
.cvh .cvh-trk b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  font:600 16px/1.2 var(--cvh-body);color:var(--cvh-ink);white-space:nowrap}
.cvh .cvh-trk span{flex:0 100 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  font:400 11px/1.2 var(--cvh-mono);letter-spacing:0;color:var(--cvh-mut);white-space:nowrap}

/* Results: bar and figure held together, so the figure reads as the bar's. */
.cvh .cvh-res{display:flex;align-items:center;gap:12px}
.cvh .cvh-bar{display:block;position:relative;flex:0 0 112px;height:8px;margin:0;
  border-radius:var(--cvh-r);background:var(--cvh-groove);overflow:hidden}
.cvh .cvh-fill{display:block;width:0;height:100%;border-radius:var(--cvh-r);
  background:linear-gradient(90deg,#0F5D42,#1B8F61);
  transition:width .7s cubic-bezier(.2,.7,.2,1)}
.cvh .cvh-pct{flex:none;font:500 11px/1 var(--cvh-mono);letter-spacing:0;color:var(--cvh-mut)}

/* Also carries: one pill per field, never run together. */
.cvh .cvh-has{display:flex;align-items:center;gap:6px}
.cvh .cvh-pill{display:inline-flex;align-items:center;flex:none;height:22px;margin:0;padding:0 9px;
  border-radius:var(--cvh-r);background:var(--cvh-mint);color:var(--cvh-green);
  font:500 11px/1 var(--cvh-mono);letter-spacing:.02em;white-space:nowrap}

/* Entrance. Opacity only: a row keeps its height from the first frame. */
.cvh .cvh-tbl tbody tr{opacity:0;transition:opacity .35s ease}
.cvh .cvh-tbl tbody tr.in{opacity:1}

/* ── Foot ──────────────────────────────────────────────────────────────── */
.cvh .cvh-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;
  margin:20px 0 0;padding:0;font:400 13px/1.45 var(--cvh-body);letter-spacing:0;color:var(--cvh-mut)}
.cvh .cvh-foot b{font-weight:600;color:var(--cvh-ink)}
.cvh .cvh-foot a{flex:none;font-weight:600;color:var(--cvh-green);text-decoration:none;white-space:nowrap}
.cvh .cvh-foot a:hover{text-decoration:underline}

/* ── Narrower screens ────────────────────────────────────────────────────
   Measured against the card, not the viewport, so it holds whatever padding
   the page wrapper carries. Columns drop in order of how little they are
   missed, and labels shorten rather than wrap. */
@container cvh-card (max-width: 1010px){
  .cvh .cvh-trk{flex-direction:column;align-items:flex-start;gap:4px}
  .cvh .cvh-tbl td{height:60px}
}
/* four pills need 372px; below this the column goes whole rather than cut one off */
@container cvh-card (max-width: 960px){
  .cvh .cvh-tbl .cvh-carries{display:none}
}
@container cvh-card (max-width: 684px){
  .cvh .cvh-tbl .cvh-runners{display:none}
}
@container cvh-card (max-width: 568px){
  .cvh .cvh-tbl{--cvh-pad:12px}
  .cvh .cvh-tbl th.cvh-races{width:84px}
  .cvh .cvh-tbl th.cvh-results{width:150px}
  .cvh .cvh-tbl th.cvh-since{width:70px}
  .cvh .cvh-tbl td,
  .cvh .cvh-trk b{font-size:15px}
  .cvh .cvh-bar{flex-basis:90px}
}
@container cvh-card (max-width: 440px){
  .cvh .cvh-tbl .cvh-since{display:none}
  .cvh .cvh-tbl th.cvh-races{width:74px}
  .cvh .cvh-tbl th.cvh-results{width:112px}
  .cvh .cvh-tbl td,
  .cvh .cvh-trk b{font-size:14px}
  .cvh .cvh-res{gap:8px}
  .cvh .cvh-bar{flex-basis:52px}
}

@container cvh-wrap (max-width: 820px){
  .cvh .cvh-head{grid-template-columns:minmax(0,1fr);align-items:start}
  .cvh .cvh-tog{justify-self:start}
}
@container cvh-wrap (max-width: 520px){
  .cvh .cvh-title{font-size:36px}
  .cvh .cvh-lede{font-size:15px}
  .cvh .cvh-tog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-self:stretch}
  .cvh .cvh-tog button{padding:0 8px}
  .cvh .cvh-tog .cvh-full{display:none}
  .cvh .cvh-tog .cvh-code{display:inline}
  .cvh .cvh-foot{flex-direction:column;align-items:flex-start}
}
@media (max-width: 600px){
  .cvh{padding:64px 0}
}

@media (prefers-reduced-motion: reduce){
  .cvh .cvh-tbl tbody tr{opacity:1;transition:none}
  .cvh .cvh-fill,
  .cvh .cvh-tog button{transition:none}
}