/* assets/calendar-regions.css
 *
 * The region toggle on /racing-calendar, and the IE tag in the grid.
 *
 * MIRRORS THE HOMEPAGE
 *   The toggle is built the way the "What we hold" toggle is in coverage-table.css:
 *   one white group, 34px buttons, the flag with its hairline, green when pressed,
 *   and the short code instead of the full name once the page is narrow, so a
 *   label never wraps. On top of that it carries a track count per region, which
 *   the homepage's toggle has no need for.
 *
 * ITS OWN NAMESPACE
 *   Every rule sits under .calt. The old buttons were .calf with a .n count, both
 *   styled in pages.css; nothing from there can reach in here.
 *
 * ONE RADIUS
 *   var(--r) on the group, the buttons and the count pills.
 *
 * Replaces calendar-ie.css, whose two IE rules are at the bottom.
 */

.calt{
  --calt-ink:var(--ink,#17201B);
  --calt-mut:var(--mut,#5A645D);
  --calt-line:var(--line,#DDDBD2);
  --calt-green:var(--green,#0E5B41);
  --calt-white:var(--white,#FFFFFF);
  --calt-paper:var(--paper,#F7F6F2);
  --calt-r:var(--r,10px);
  --calt-mono:var(--mono,"IBM Plex Mono",ui-monospace,Menlo,monospace);

  display:inline-flex;align-items:center;gap:2px;flex:none;box-sizing:border-box;
  margin:0;padding:4px;
  background:var(--calt-white);border:1px solid var(--calt-line);border-radius:var(--calt-r);
}
.calt *,.calt *::before,.calt *::after{box-sizing:border-box}

.calt button{-webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:34px;min-width:0;margin:0;padding:0 14px;border:0;border-radius:var(--calt-r);
  background:transparent;color:var(--calt-ink);box-shadow:none;
  font:500 12px/1 var(--calt-mono);letter-spacing:.02em;text-transform:none;white-space:nowrap;
  cursor:pointer;transition:background-color .15s ease,color .15s ease}
.calt button:hover{background:var(--calt-paper)}
.calt button.on{background:var(--calt-green);color:#FFFFFF}
.calt button:focus-visible{outline:2px solid var(--calt-green);outline-offset:2px}

/* padding and border pinned too: a site-wide img rule that sets either would
   otherwise squeeze the flag inside its own 20 by 14 box. */
.calt img{display:block;flex:none;width:20px;height:14px;max-width:none;margin:0;padding:0;border:0;
  border-radius:0;object-fit:cover;box-shadow:0 0 0 1px rgba(23,32,27,.14)}
.calt button.on img{box-shadow:0 0 0 1px rgba(255,255,255,.45)}

.calt .calt-code{display:none}

/* Tracks per region: a quiet pill after the name, lifted onto the green when pressed. */
.calt .calt-n{display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:22px;height:18px;margin:0;padding:0 6px;border-radius:var(--calt-r);
  background:#EAF5EF;color:var(--calt-green);font:500 11px/1 var(--calt-mono);letter-spacing:0}
.calt button.on .calt-n{background:rgba(255,255,255,.18);color:#FFFFFF}
.calt .calt-n svg{display:block}

/* No tracks in the window: a dark red cross, never a zero. */
.calt .calt-n.calt-zero{background:#F6E3E3;color:#8B1A1A}
.calt button.on .calt-n.calt-zero{background:rgba(255,255,255,.18);color:#FFD9D9}

/* ── Narrower screens ────────────────────────────────────────────────────────────
   Measured against the head section, not the viewport. The group spans the width
   as four equal buttons, names give way to codes, and below that the counts go
   (the line beside the toggle still gives the figures for whatever is chosen). */
.cal-head{container:calt-head / inline-size}

@container calt-head (max-width: 700px){
  .cal-bar{flex-wrap:wrap;row-gap:12px}
  .calt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  .calt button{padding:0 8px;gap:6px}
  .calt .calt-full{display:none}
  .calt .calt-code{display:inline}
}
@container calt-head (max-width: 400px){
  .calt .calt-n{display:none}
}

@media (prefers-reduced-motion: reduce){
  .calt button{transition:none}
}

/* ── Ireland in the grid and the hero illustration (from calendar-ie.css) ──── */
.cal .rg.rg-ie{background:#E6F4EC;color:#0F6B43;border-color:#C8E6D6}
.ch-hero .ch-tk i.ie{background:rgba(22,155,98,.22);color:#7DDBA9}