/* Outreach dashboard
   Palette is fixed and locked for the whole page: no section inverts, one
   accent, one corner radius (2px, matching the email template).
   Density is deliberately high, so data is separated by hairlines rather than
   cards, and every number is monospaced so columns line up when scanning. */

:root {
  --bg:        #002b21;
  --bg-raise:  #013b2d;   /* same family, one step up. Not a theme flip. */
  --fg:        #FFEBC6;
  --fg-dim:    rgba(255, 235, 198, 0.58);
  --fg-faint:  rgba(255, 235, 198, 0.34);
  --line:      rgba(255, 235, 198, 0.14);
  --line-soft: rgba(255, 235, 198, 0.07);
  --accent:    #adebb3;
  --radius:    2px;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.page {
  /* Wide enough to use an ultrawide without the table stretching to illegible
     line lengths. */
  max-width: 1800px;
  margin: 0 auto;
  padding: 28px 32px 80px;
}

/* ------------------------------------------------------------------ header */

.head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.head img { display: block; width: 26px; height: 40px; }

.head h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.head .spacer { flex: 1; }

.stamp {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ metrics */

.metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--line);
}

.metric {
  padding: 24px 24px 22px 0;
  border-right: 1px solid var(--line-soft);
}
.metric:last-child { border-right: 0; }

.metric b {
  display: block;
  font-family: var(--mono);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.metric span {
  display: block;
  margin-top: 9px;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.metric.is-accent b { color: var(--accent); }
.metric.is-muted  b { color: var(--fg-faint); }

/* ------------------------------------------------------------------- agent */

.agent {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 22px 0;
  padding: 15px 18px;
  background: var(--bg-raise);
  border-radius: var(--radius);
}

.phase {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Real semantic state (is the agent running), not decoration. */
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fg-faint);
  flex: none;
}
.agent.is-running .dot { background: var(--accent); animation: pulse 1.7s ease-in-out infinite; }
.agent.is-error   .dot { background: var(--fg); }

@keyframes pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .agent.is-running .dot { animation: none; }
}

.agent .counts {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.agent .counts strong { color: var(--fg); font-weight: 500; }

.agent .note { flex: 1; min-width: 200px; font-size: 12px; color: var(--fg-dim); }

/* ------------------------------------------------------------------ controls */

.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  padding-bottom: 14px;
}

.controls input {
  flex: 1;
  min-width: 220px;
  max-width: 380px;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  font: 13px var(--sans);
}
.controls input::placeholder { color: var(--fg-faint); }
.controls input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}

.filters { display: flex; gap: 6px; }

.filters button {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg-dim);
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.filters button:hover { color: var(--fg); border-color: var(--fg-faint); }
.filters button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);   /* 4.5:1 against mint, checked */
}
.filters button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* -------------------------------------------------------------------- table */

.tablewrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 14px 11px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
th:hover { color: var(--fg); }
th:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

th[aria-sort]::after {
  content: "";
  margin-left: 6px;
  font-family: var(--mono);
  color: var(--accent);
}
th[aria-sort="ascending"]::after  { content: "^"; }
th[aria-sort="descending"]::after { content: "v"; }

td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

tbody tr:hover td { background: var(--bg-raise); }

.c-idx    { font-family: var(--mono); color: var(--fg-faint); width: 46px; font-variant-numeric: tabular-nums; }
.c-name   { font-weight: 500; min-width: 190px; }
.c-email  { font-family: var(--mono); font-size: 12.5px; word-break: break-all; min-width: 200px; }
.c-ind    { color: var(--fg-dim); white-space: nowrap; }
.c-src    { width: 60px; }
.c-status { width: 130px; }

td a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
td a:hover { border-bottom-color: var(--accent); }

.who { display: block; font-size: 12px; color: var(--fg-dim); margin-top: 2px; }

/* Status carries meaning through fill and weight, not through new hues, so the
   page keeps a single accent. */
.pill {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: 500 10.5px/1.5 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill.contacted   { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.pill.uncontacted { color: var(--fg); border-color: var(--fg-faint); }
.pill.dead        { color: var(--fg-faint); border-style: dashed; }

tr.is-dead .c-name,
tr.is-dead .c-email { color: var(--fg-faint); text-decoration: line-through; }

/* --------------------------------------------------------- states, footer */

.state {
  padding: 64px 0;
  text-align: center;
  color: var(--fg-dim);
}
.state code {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 10px;
  background: var(--bg-raise);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg);
}

.skel {
  height: 13px;
  border-radius: var(--radius);
  background: var(--line-soft);
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

.foot {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--fg-faint);
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 1100px) {
  .page { padding: 20px 18px 60px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric { padding: 18px 16px 16px 0; border-bottom: 1px solid var(--line-soft); }
  .metric b { font-size: 30px; }
}

@media (max-width: 640px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  .controls input { max-width: none; }
  .c-ind, .c-src { display: none; }
}