/**
 * Cancellations dashboard — panel-specific styles
 *
 * Page-local styles for the two-panel layout (Confirmed Cancellations /
 * DOGE Claims). Shared component styles (cards, lens bar, value boxes,
 * seg-bar layout) live in shared/css/components.css; this file adds only
 * what those don't cover.
 */

/* Prose notes share one treatment: body-size at AA contrast — never the
   12px gray-400 footnote look, which fails WCAG and reads as fine print.
   (.freshness-bar = data date; .district-group-note = empty-state lines;
   .seg-definitions below. Per-figure caveats are not prose blocks at all —
   they ride their value box as a hover/focus note.) */
.freshness-bar,
.district-group-note {
  font-size: var(--text-sm, 0.875rem);
  color: var(--gray-600, #52525b);
}

/* --- Freshness line (sits at the bottom of the dashboard) --- */

/* The .dashboard container has no horizontal padding — standalone text blocks
   carry their own side margins, matching the tab bar's inset. */
.freshness-bar {
  margin: var(--space-4, 1rem) var(--space-4, 1rem) var(--space-2, 0.5rem);
}

/*
 * Outcome ramp — the segmented bar and its legend swatches. (Table cells and
 * award cards wear the shared .badge family instead, so every award displays
 * alike across panels.)
 *
 * Three reds descending by strength of termination evidence — red-800/600/400
 * (#991B1B / #DC2626 / #F87171), lightness rising monotonically, which is the
 * check that governs a sequential ramp; the dataviz categorical validator FAILs
 * any sequential ramp by design. Against the light surface they clear its
 * lightness band and adjacent-pair CVD separation.
 *
 * Neutral gray closes the bar for claims with no federal record at all. It is
 * deliberately NOT a fourth red step: an unmatched claim is missing evidence
 * rather than weaker evidence, and one hue cannot carry four steps that stay
 * apart (every 4-red candidate fails the validator's separation floor).
 *
 * The light end's sub-3:1 contrast is relieved only because the legend prints
 * counts, the definitions list is visible, and the panel table exists — drop
 * any of the three and this becomes a hard fail. Do not swap these values
 * without re-running the validator.
 */
:root {
  --outcome-strong: var(--red-800, #991b1b);
  --outcome-mid: var(--red-600, #dc2626);
  --outcome-weak: var(--red-400, #f87171);
  --outcome-none: var(--gray-400, #a1a1aa);
}

.seg--outcome-strong {
  background-color: var(--outcome-strong);
}

.seg--outcome-mid {
  background-color: var(--outcome-mid);
}

.seg--outcome-weak {
  background-color: var(--outcome-weak);
}

.seg--outcome-none {
  background-color: var(--outcome-none);
}

/* Visible definitions under the segment legend (no title-attribute-only
   tooltips — they're dead on touch and invisible to keyboards). */
.seg-definitions {
  list-style: none;
  padding: 0;
  margin: var(--space-2, 0.5rem) 0 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--gray-600, #52525b); /* same prose treatment as .freshness-bar */
}

.seg-definitions li {
  margin: 0.15rem 0;
}

.seg-definitions .seg-term {
  font-weight: 600;
  color: var(--gray-700, #3f3f46);
}

/* --- District page: one labelled group per dataset --- */

.district-group {
  margin: var(--space-5, 1.5rem) 0;
}

/* Card heading: h4 inside the flex header must not carry block margins */
.award-card-header .award-recipient {
  margin: 0;
  font-size: var(--text-base, 1rem);
}

/* Muted second line of a stacked table cell (recipient location, status
   date) and of a card heading */
.cell-subline,
.award-recipient-place {
  color: var(--gray-500, #71717a);
  font-size: var(--text-xs, 0.75rem);
}

/* The status badge's date sits on its own line below the pill */
.gridjs-td .badge + .cell-subline {
  display: block;
  margin-top: 0.3rem;
}

.award-recipient-place {
  margin: 0.1rem 0 0;
}

.district-group-heading {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 600;
  color: var(--gray-800, #27272a);
  margin: 0 0 var(--space-2, 0.5rem);
}

.district-group-note {
  margin: 0 0 var(--space-3, 0.75rem);
}

/* --- Map on mobile: shared layout.css hides .map-container below 1024px,
       but this dashboard keeps a 300px map (zoom is disabled in JS) --- */

@media (max-width: 1024px) {
  .map-container {
    display: block;
    height: 300px;
    min-height: 300px;
  }
}

/* --- Rollup tables on phones ---
   The map stays; the By-District / By-Recipient rollups do not. Grid.js keeps
   its search box, pagination and multi-column layout at every width, so on a
   phone these become two cramped tables stacked above the award table that
   already lists the same awards — and any district's own figures are one tap
   away on its page.

   Scoped to this file because .tables-container is shared markup: the
   nasa-science dashboard uses it too and keeps its tables at every width.

   display:none rather than removing the markup: the tables are still built, so
   turning a phone to landscape shows them with no re-render. */

@media (max-width: 768px) {
  .tables-container {
    display: none;
  }
}