/* ════════════════════════════════════════════════════════════════════════════
   CCWP — elections presentation layer (MODULE E2)

   Loaded on the elections host only, by services/render-hooks/elections.js,
   after tokens.css and site.css. It styles the four elections blocks and
   nothing else:

     .el-countdown     election-countdown   (GAP 4)
     .el-deadlines     key-dates, summary   (the zero-click deadline answer)
     .el-key-dates     key-dates, table     (GAP 5, the "Passed" marking)
     .stat-strip       stat-strip           (GAP 9)
     .el-locs          polling-places cards (GAP 6)
     .el-loc-index     polling-places index (GAP 7)

   WHY IT IS A SEPARATE FILE: site.css is the shared county-wide stylesheet.
   None of this is used on caldwellcountytx.org, and E2 does not edit files
   another module owns.

   COLOUR: every value is a token. Nothing here names a hex code, so MODULE
   T1's emerald re-pointing of the --cc-navy* family inside `.site-elections`
   applies to this file automatically — these components are emerald on the
   elections host because they never asked for navy in the first place.

   Carried forward from the old elections.css (INVENTORY §4, RECOMMENDATIONS
   §5), because the reasoning was sound even where the CSS is not:
     • --cc-gold-text for gold AS TEXT (bright gold fails contrast);
       never dim text with opacity.
     • "Passed" is text; the muting below is decoration on top of it.
     • Tables collapse to labelled rows on a phone — everything must survive
       being read in a parking lot.
     • Print: countdown chips hidden (a printout has no "today"), location
       cards and tables not split across pages.
     • prefers-reduced-motion disables the card lift.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Countdown chips ──────────────────────────────────────────────────── */

.el-countdown {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.el-countdown__chip {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1 1 12rem;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--cc-gold);
  border-radius: var(--radius-sm);
}

.el-countdown__count {
  font-family: var(--font-display);
  font-size: var(--fs-3);
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.el-countdown__label {
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text);
}

.el-countdown__date {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}

.el-countdown__chip.is-past {
  border-left-color: var(--color-border-strong);
  background: var(--color-surface-tint);
}

/* ── 2. "Passed" tag — the WCAG 1.4.1 point of the whole exercise ────────── */

.el-past-tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface-tint);
  color: var(--color-text-muted);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold, 600);
  white-space: nowrap;
  vertical-align: baseline;
}

/* The row is muted, but only after the word "Passed" is already in the DOM —
   colour is never the carrier. */
.el-key-dates tbody tr.is-past th,
.el-key-dates tbody tr.is-past td,
.el-deadline.is-past .el-deadline__label,
.el-deadline.is-past .el-deadline__date {
  color: var(--color-text-muted);
}

/* ── 3. Deadline summary (homepage, zero clicks) ─────────────────────────── */

.el-deadlines {
  margin: 0 0 var(--space-5);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.el-deadline {
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-tint);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--cc-navy-mid);
}

.el-deadline__label {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}

.el-deadline__date {
  margin: 0;
  font-weight: var(--fw-semibold, 600);
  color: var(--color-heading);
  overflow-wrap: anywhere;
}

/* ── 4. At-a-glance figures ──────────────────────────────────────────────── */

.stat-strip {
  margin: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

.stat-strip__item {
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--cc-gold);
  border-radius: var(--radius-sm);
  text-align: center;
}

.stat-strip__label {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}

.stat-strip__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  line-height: var(--lh-tight);
  color: var(--color-heading);
  overflow-wrap: anywhere;
}

.stat-strip__note {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.stat-strip__lede {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

/* ── 5. Polling-place cards ──────────────────────────────────────────────── */

.el-locs {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.el-loc {
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.el-loc:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

.el-loc__pcts {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.el-loc__pct {
  padding: 0.0625rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--cc-navy-xlight);
  color: var(--cc-navy-dark);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold, 600);
  font-variant-numeric: tabular-nums;
}

.el-loc__name {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-2);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}

.el-loc__note {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold, 600);
  color: var(--cc-gold-text);
}

.el-loc__addr {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.el-loc__dir { margin: 0; }

.el-loc__dir-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-weight: var(--fw-semibold, 600);
  overflow-wrap: anywhere;
}

/* ── 6. Precinct index ───────────────────────────────────────────────────── */

.el-loc-index__title { margin-top: 0; }
.el-loc-index__lede { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.el-loc-index tbody th { font-variant-numeric: tabular-nums; }

/* ── 7. Small screens — read it in a parking lot ─────────────────────────── */

@media (max-width: 40em) {
  .el-countdown__chip { flex: 1 1 100%; }
  .stat-strip { gap: var(--space-3); }
  .el-deadlines { gap: var(--space-2); }
}

/* ── 8. Motion ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .el-loc { transition: none; }
  .el-loc:hover { transform: none; }
}

/* ── 9. Print — a voter printing their polling place gets a usable sheet ─── */

@media print {
  /* A printout has no "today", so a relative count is a lie on paper. The
     label and the full date are separate elements and both survive. */
  .el-countdown__count { display: none !important; }
  .el-countdown__chip,
  .el-deadline,
  .stat-strip__item,
  .el-loc {
    border: 1px solid #000 !important;
    background: none !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .el-loc__pct { border: 1px solid #000; background: none !important; color: #000 !important; }
  .el-loc-index, .el-key-dates { break-inside: auto; }
  .el-loc-index tr, .el-key-dates tr { break-inside: avoid; }
  .el-past-tag { border-color: #000 !important; color: #000 !important; }
}