/* ── Scorecard ── */
.scorecards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.scorecard {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

/* Status stripe — left edge of the card. The headline number stays neutral
   so a quick scan doesn't cost the GM their reading flow; the stripe carries
   the on/off-track signal at the periphery. */
.scorecard--status::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--scorecard-status, var(--accent));
}

.scorecard-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.scorecard-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

.scorecard-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ── Indicator Chips ── */
.indicators {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.indicator {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}

.indicator-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.indicator-value {
  font-size: 20px;
  font-weight: 700;
}

.indicator-trend {
  font-size: 11px;
  margin-top: 2px;
}

/* ── Progress Bar ── */
.progress-wrap { margin-top: 8px; }
.progress-bar {
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ── Data Tables ── */
.data-table-wrap {
  overflow-y: auto;
  border: 1px solid var(--card-border);
  border-radius: 8px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Sticky also applied at the cell level. Chrome/Firefox don't reliably
   honor position:sticky on <thead> when the table uses border-collapse:
   collapse — the thead doesn't form a real rendering context and the
   sticky behaviour drops silently. Per-th sticky covers that quirk and
   keeps the column header pinned during in-wrapper scroll. Bug brief
   Jun-04 #4 (Member Retention Onboarding table). */
.data-table th {
  background: var(--card);
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--card-border);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 2;
}
.data-table th:hover { color: var(--text); }

.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--card-border);
}

.data-table tr:hover td {
  background: rgba(255,255,255,0.02);
}

.data-table .sort-arrow {
  font-size: 10px;
  margin-left: 4px;
}

/* ── Drillable cells ──
 * Universal "click for more detail" affordance: dotted underline (always
 * visible) + a tint on hover. Used on Monthly Tracker actual cells that
 * open a per-cell drill-down popover (Autopays Processed, Total Members,
 * etc. — see monthly-tracker.js::ensureDrillDelegation) and on the Overview
 * scorecard's cells (overview.js::ensureDrillDelegation).
 *
 * Why dotted underline: universal web convention for "click for info".
 * `currentColor` keeps the line tinted by the cell's semantic color
 * (green/orange/red) so it never fights the value's status. Always-on
 * (vs hover-only) so the user knows what's clickable without fishing.
 *
 * Why the hover tint is a box-shadow and not a background. It was a
 * background-image gradient and it never painted on these cells: the tracker
 * and the scorecard set an inline `background:` (the status tint), whose
 * shorthand resets background-image and outranks any stylesheet rule, and
 * inside `.data-table` the row rule `.data-table tr:hover td { background }` is
 * more specific than this selector even where no inline background exists.
 * A shadow is another property, so neither reaches it, and it paints over the
 * status tint without replacing it. The tint is the cell's own text color so it
 * also reads on the light theme. */
td.sc-drillable {
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  box-shadow: inset 0 0 0 999px transparent;
  transition: box-shadow 120ms ease;
}
td.sc-drillable:hover {
  box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 12%, transparent);
}
td.sc-drillable:focus-visible {
  outline: 2px solid var(--accent, #00d4aa);
  outline-offset: -2px;
}

/* ── Status Cards Row ── */
.status-cards {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.status-card {
  flex: 1;
  min-width: 80px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--text-dim);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.status-card:hover { border-color: var(--text-dim); }
.status-card.active { border-color: var(--accent); }

.status-card-count {
  font-size: 22px;
  font-weight: 700;
}

.status-card-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ── Section Headers ── */
.section-title {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

/* ── Hover tooltip ── */
/* Apply `.tip` + `data-tip="…"` to any element that should show a hover
   tooltip. CSS-only, no JS needed. Used across tabs (Members table,
   Trial Buyers chips). Centered above the trigger. */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bg-elevated);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  max-width: 260px;
  min-width: 140px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .scorecards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .indicators { grid-template-columns: repeat(5, 1fr); overflow-x: auto; flex-wrap: nowrap; gap: 6px; }
  .indicator { min-width: 80px; }
  .scorecard-value { font-size: 22px; }
}

@media (max-width: 480px) {
  .scorecards { grid-template-columns: repeat(2, 1fr); }
  .indicators { display: flex; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .indicator { min-width: 76px; flex-shrink: 0; }
}

/* ── Outreach ledger: the "old enough to score" column ──────────────
   The cell is bare numbers ("16 of 110") under a single heading, because the
   phrase repeated in all nine cells on a full card and drowned the numbers.
   A heading can only sit above the cells if the column has a FIXED width —
   it used to be flex:0 0 auto, so every row started at a different x.

   ⚠ BELOW 480px THE HEADING GOES AND THE COLUMN GOES BACK TO AUTO WIDTH.
   132px out of a ~400px card left the prose column 60px and wrapped the
   longest row to seven lines: measured old vs new at a 400px content box, the
   middle column went 146px -> 60px, the worst row 61px -> 117px, and the whole
   card 546px -> 840px.

   ⚠ AND THE CELL STAYS BARE ON PHONE. The obvious move is to put the words
   back into each cell once the heading is gone, and it is wrong: "16 of 110
   old enough to score" measures ~154px, WIDER than the 132px column it would
   be replacing, so it makes the squeeze worse rather than undoing it. The
   pre-existing cell was short ("110 contacted", "n=34") — that is what made
   auto width cheap. Bare numbers are ~46px and restore it.

   What explains the numbers on phone is the card's own subhead, "Contacts
   logged 28 or more days ago, and what those members did since", which sits
   directly above them. The column heading is a desktop affordance. */
.ledger-matured-head { flex: 0 0 132px; text-align: right; }
.ledger-matured { flex: 0 0 132px; text-align: right; color: var(--text-dim); font-size: 11px; }
/* The prose column is flex:1 with the default min-width:auto, which refuses to
   shrink below its longest word and pushes the row wider than the card. */
.ledger-said { flex: 1; min-width: 0; }

@media (max-width: 480px) {
  .ledger-matured-row { display: none; }
  .ledger-matured { flex: 0 0 auto; }
}

/* ── Global tooltips ────────────────────────────────────────────────────
   Snappy replacement for the browser's ~1s native `title` tooltip. Apply
   by adding `data-tooltip="..."` to any element (or just leave `title=`
   — the shim in lib/tooltips.js migrates it on first hover). Multi-line
   content supported; positioned above the element by default. */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  white-space: normal;
  text-align: left;
  width: max-content;
  max-width: 360px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  transition:
    opacity 0.12s ease-out,
    transform 0.12s ease-out,
    visibility 0s linear 0.12s;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 0.15s ease-out 0.15s,
    transform 0.15s ease-out 0.15s,
    visibility 0s linear 0.15s;
}
/* Variant: tooltip points to the right (for elements near the left edge) */
[data-tooltip-pos="right"]::after {
  bottom: auto;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}
[data-tooltip-pos="right"]:hover::after,
[data-tooltip-pos="right"]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}

/* Marketing weekly + Meta vs Google tables: every number column centered
   under its header (Evan, 10/21: right-aligned figures in wide columns read
   as drifting away from their labels). The row label stays left; a colspan
   cell is a note or section label, so it keeps its own alignment. Cells set
   text-align inline, hence !important. */
.mk-center th:not(:first-child):not([colspan]),
.mk-center td:not(:first-child):not([colspan]) { text-align: center !important; }