/* Scalee Pulse - dark dashboard. Source of truth: Scalee DESIGN.md */

@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/vendor/geist-400.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/vendor/geist-500.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/vendor/geist-600.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/vendor/geist-700.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 800; font-style: normal; font-display: swap; src: url("/static/vendor/geist-800.woff2") format("woff2"); }

:root {
  --ink: #0B0B0F;
  --panel: #131318;
  --raised: #1A1A21;
  --warm-white: #FBFAF8;
  --off-white: #E7E4DE;
  --ash: #9A968E;
  --hairline: rgba(255, 255, 255, 0.10);
  --hairline-soft: rgba(255, 255, 255, 0.06);
  --amber: #FFB800;
  --orange: #FF7A2E;
  --coral: #FF5A45;
  --gradient: linear-gradient(120deg, #FFB800 0%, #FF7A2E 52%, #FF5A45 100%);
  --ok: #7BC47F;
  --warn: #FFB800;
  --bad: #FF5A45;
  --radius: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The hidden attribute must always win. Without this, any element whose class
   sets a display (e.g. .badge inline-flex) renders even while hidden - the
   aggregate page shipped an empty freshness pill exactly this way. */
[hidden] { display: none !important; }

html { color-scheme: dark; }

html, body {
  /* Horizontal scroll never belongs to the page itself; wide content
     (tables) scrolls inside its own .table-wrap. clip avoids creating a
     scroll container (unlike hidden). */
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

body {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--ink);
  color: var(--off-white);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 80px;
}

/* soft radial brand glow behind the header */
.glow {
  position: fixed;
  top: -340px;
  right: -180px;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(255, 122, 46, 0.13) 0%, rgba(255, 122, 46, 0.0) 62%);
  pointer-events: none;
  z-index: 0;
}

.page > * { position: relative; z-index: 1; }

/* ── header ─────────────────────────────────────────────────────────── */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 30px 0 26px;
  border-bottom: 1px solid var(--hairline-soft);
}

.brand { display: flex; align-items: baseline; gap: 12px; }

.wordmark {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--warm-white);
  line-height: 1;
}

.wordmark .ee {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.product-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--orange);
}

.header-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.client-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--warm-white);
}

/* admin client switcher */
.client-name select {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--warm-white);
  background-color: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 8px 32px 8px 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-width: 170px;
}

.client-name select:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

.logout-link {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ash);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease;
}

.logout-link:hover { color: var(--warm-white); }
.logout-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ash);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 13px;
  background: var(--panel);
}

.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* header report downloads (PDF / Excel), served from the committed artifacts */
.export-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--panel);
  padding: 2px;
}

.export-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ash);
  padding: 0 6px 0 12px;
}

.export-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--off-white);
  text-decoration: none;
  border-radius: 999px;
  padding: 4px 12px;
  transition: background 0.15s ease, color 0.15s ease;
}

.export-link:hover { background: var(--raised); color: var(--warm-white); }
.export-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.badge.stale-warn { color: var(--warm-white); border-color: rgba(255, 184, 0, 0.4); }
.badge.stale-warn .dot { background: var(--warn); }
.badge.stale-bad { color: var(--warm-white); border-color: rgba(255, 90, 69, 0.45); }
.badge.stale-bad .dot { background: var(--bad); }

/* ── week selector ──────────────────────────────────────────────────── */

.week-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 36px 0 8px;
}

.week-bar h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--warm-white);
}

.week-nav { display: flex; align-items: center; gap: 8px; }

.week-nav button {
  font-family: inherit;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--panel);
  color: var(--warm-white);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.1s ease;
}

.week-nav button:hover:not(:disabled) { background: var(--raised); }
.week-nav button:active:not(:disabled) { transform: translateY(1px); }
.week-nav button:disabled { opacity: 0.32; cursor: default; }
.week-nav button:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

/* shared chevron affordance for custom selects (ash, inline SVG) */
.week-nav select,
.client-name select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239A968E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.week-nav select {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--warm-white);
  background-color: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 9px 32px 9px 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-width: 220px;
  text-align: center;
}

.week-nav select:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

.week-meta { font-size: 13px; color: var(--ash); }

.period-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* weekly / monthly + group-by pill toggles */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--panel);
  padding: 3px;
  gap: 2px;
}

.view-toggle button {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ash);
  background: transparent;
  border: none;
  border-radius: 9px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.view-toggle button:hover { color: var(--warm-white); }

.view-toggle button.active {
  color: var(--ink);
  background: var(--gradient);
}

.view-toggle button:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

/* segment group-by row */
.groupby-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px 4px;
}

.groupby-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ash);
}

.segments-wrap table { margin-top: 6px; }

.untagged { color: var(--ash); font-weight: 500; }

.seg-n {
  font-size: 11px;
  color: var(--ash);
  font-weight: 500;
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
}

/* ── AI narration ───────────────────────────────────────────────────── */

.analysis-card { padding: 22px 24px 10px; }

.summary-card { margin-top: 26px; border-left: 2px solid var(--orange); }

.analysis-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  color: var(--orange);
  margin-bottom: 14px;
}

.analysis-block, .review-block {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0 15px;
  border-top: 1px solid var(--hairline-soft);
}

.kind-chip {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  border-radius: 999px;
  padding: 4px 10px;
  margin-top: 2px;
  border: 1px solid var(--hairline);
  color: var(--ash);
  min-width: 52px;
  text-align: center;
}

.kind-working { color: var(--ok); border-color: rgba(123, 196, 127, 0.35); }
.kind-fading { color: var(--ash); }
.kind-recommendation { color: var(--orange); border-color: rgba(255, 122, 46, 0.4); }
.kind-watch { color: var(--warn); border-color: rgba(255, 184, 0, 0.35); }

.analysis-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--warm-white);
  letter-spacing: -0.2px;
  margin-bottom: 3px;
}

.analysis-headline.big { font-size: 17px; letter-spacing: -0.4px; margin-bottom: 6px; }

.analysis-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--off-white);
  max-width: 78ch;
  margin-bottom: 6px;
}

.summary-card .analysis-body { margin-bottom: 12px; }

/* A period we have not assessed. Deliberately quiet: an empty state is a
   truthful answer, and it must never be mistaken for a finding. */
.analysis-empty { margin-top: 26px; padding: 30px 24px; }

/* An assessment queued for correction: its old prose is withheld server
   side and this neutral notice stands in until it is rewritten. */
.analysis-withheld { margin-top: 26px; padding-bottom: 18px; border-style: dashed; }

/* Backfilled records are honest about being reconstructions. */
.recon-chip {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ash);
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 8px;
  vertical-align: 1px;
}

/* ── channel sections ───────────────────────────────────────────────── */

section.channel { margin-top: 44px; }

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--orange);
  margin-bottom: 16px;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 14px;
}

.kpi {
  background: var(--panel);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: 18px 20px 15px;
}

.kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ash);
  margin-bottom: 9px;
}

.kpi-value {
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--warm-white);
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kpi-value.highlight {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kpi-note {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ash);
}

.kpi-alltime b .kpi-note { font-weight: 500; }

.health-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.health-ok { background: var(--ok); }
.health-warn { background: var(--warn); }
.health-bad { background: var(--bad); }

.kpi-alltime {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 12px;
  color: var(--ash);
}

.kpi-alltime b { font-weight: 600; color: var(--off-white); }

/* Rate model people-v1: every rate card names its denominator. */
.kpi-sub {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ash);
}
.kpi-sub-all { margin-top: 4px; }

/* A weekly first-contact cohort younger than the maturing window: its rate
   will still rise, so it is marked, never presented as final. */
.kpi-maturing {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--warn);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--warn);
  cursor: help;
}

.no-rate { color: var(--ash); font-weight: 600; cursor: help; }

/* Secondary details under the email cards (open rate when tracked, the
   unattributed-replier note). Quiet by design: context, not headline. */
.kpi-secondary, .kpi-footnote {
  margin: 12px 2px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ash);
}
.kpi-secondary b { color: var(--off-white); font-weight: 600; }
.kpi-secondary .secondary-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.kpi-footnote { margin-top: 6px; }

/* ── chart card ─────────────────────────────────────────────────────── */

.card {
  background: var(--panel);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 18px;
}

.card h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--warm-white);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}

.card .sub { font-size: 12.5px; color: var(--ash); margin-bottom: 16px; }

.chart-wrap { position: relative; height: 300px; }

/* ── campaign table ─────────────────────────────────────────────────── */

details.campaigns { margin-top: 18px; }

details.campaigns summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: 17px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--warm-white);
  transition: background 0.16s ease;
}

details.campaigns summary::-webkit-details-marker { display: none; }
details.campaigns summary:hover { background: var(--raised); }
details.campaigns summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

details.campaigns summary .count { color: var(--ash); font-weight: 500; font-size: 13px; }

details.campaigns summary .chev {
  color: var(--orange);
  font-size: 17px;
  font-weight: 700;
  transition: transform 0.2s ease;
}

details.campaigns[open] summary { border-radius: var(--radius) var(--radius) 0 0; }
details.campaigns[open] summary .chev { transform: rotate(45deg); }

.table-wrap {
  border: 1px solid var(--hairline-soft);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--panel);
  overflow-x: auto;
  scrollbar-color: var(--raised) var(--panel); /* dark scrollbars, Firefox */
}

.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: var(--panel); }
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--raised);
  border-radius: 999px;
}

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

th {
  text-align: right;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ash);
  padding: 12px 12px;
  border-bottom: 1px solid var(--hairline-soft);
  white-space: nowrap;
}

th:first-child, td:first-child { text-align: left; padding-left: 24px; }
th:nth-child(2), td:nth-child(2) { text-align: left; }
th:last-child, td:last-child { padding-right: 24px; }

td {
  text-align: right;
  padding: 11px 12px;
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--off-white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255, 255, 255, 0.02); }

td.label-cell { max-width: 300px; overflow: hidden; text-overflow: ellipsis; color: var(--warm-white); font-weight: 500; }
@media (max-width: 900px) { td.label-cell { max-width: 200px; } }
td.rep-cell { color: var(--ash); }
td .pos { color: var(--orange); font-weight: 700; }

/* ── linkedin empty state ───────────────────────────────────────────── */

.empty-state {
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.015);
  padding: 42px 24px;
  text-align: center;
}

.empty-state .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--warm-white);
  margin-bottom: 6px;
}

.empty-state p { font-size: 13px; color: var(--ash); max-width: 46ch; margin: 0 auto; }

/* ── pre-send empty state (registered client, nothing sent yet) ───────
   A full page state, not a strip: it is the entire dashboard for a client
   between onboarding and first send, so it carries the same card language as
   the real thing (panel, hairline, gradient hairline on top) and none of its
   metrics. The step list is the only structure: two facts already true, two
   still ahead, so the page reads as progress rather than emptiness. */

.no-data { margin: 34px 0 10px; }

.no-data-card {
  position: relative;
  overflow: hidden;
  max-width: 620px;
  padding: 34px 34px 30px;
  margin-top: 0;
}

/* single gradient hairline, the one brand flourish on this page */
.no-data-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gradient);
  opacity: 0.9;
}

.no-data-title {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--warm-white);
  line-height: 1.25;
  margin-bottom: 12px;
}

.no-data-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--off-white);
  max-width: 52ch;
}

.no-data-steps {
  list-style: none;
  margin: 26px 0 24px;
  display: grid;
  gap: 13px;
}

.no-data-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--warm-white);
}

.no-data-step .step-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.no-data-step.done .step-dot { background: var(--ok); }

/* still ahead: a hollow ring, never a filled dot, so "not yet" never reads
   as "done" or as a measured value */
.no-data-step.pending { color: var(--ash); }
.no-data-step.pending .step-dot {
  border: 1px solid var(--hairline);
  background: transparent;
}

.no-data-foot {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ash);
  max-width: 52ch;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-soft);
}

@media (max-width: 700px) {
  .no-data-card { padding: 26px 22px 24px; }
  .no-data-title { font-size: 20px; }
}

/* ── deliverability health chips ────────────────────────────────────── */

.health-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid var(--hairline);
}

.chip-ok { color: var(--ok); border-color: rgba(123, 196, 127, 0.4); }
.chip-warn { color: var(--warn); border-color: rgba(255, 184, 0, 0.4); }

/* A metric this account does not measure. Deliberately quiet and italic so it
   never reads as a value: an absent measurement is not a measured zero. */
.not-tracked {
  color: var(--ash);
  font-style: italic;
  font-weight: 500;
  font-size: 0.82em;
  letter-spacing: 0.01em;
  cursor: help;
}
.chip-bad { color: var(--bad); border-color: rgba(255, 90, 69, 0.45); }

.warm-flag {
  font-size: 10px;
  font-weight: 600;
  color: var(--warn);
  border: 1px solid rgba(255, 184, 0, 0.3);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  white-space: nowrap;
}

/* ── portfolio aggregate (admin) ────────────────────────────────────── */

.agg-client-cell { display: flex; align-items: center; gap: 10px; }
.agg-client-name { color: var(--warm-white); font-weight: 600; }
.agg-li-off { color: var(--ash); font-weight: 500; }

/* a client with no data in the selected period: one quiet spanning cell in
   place of the metric columns, never a row of zeros */
.agg-no-data { color: var(--ash); font-weight: 500; font-style: italic; }
tr.agg-pending-row td { background: rgba(255, 255, 255, 0.012); }
tr.agg-pending-row .agg-client-name { color: var(--off-white); }

.trend-signal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
}

.trend-signal.up { color: var(--ok); }
.trend-signal.down { color: var(--bad); }
.trend-signal.flat { color: var(--ash); }
.agg-maturing {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--warn);
  cursor: help;
}

tr.totals-row td {
  border-top: 1px solid var(--hairline);
  border-bottom: none;
  font-weight: 700;
  color: var(--warm-white);
  background: rgba(255, 255, 255, 0.02);
}

tr.totals-row td:first-child { color: var(--warm-white); }

.agg-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--warm-white);
  letter-spacing: -0.2px;
  margin: 0 0 4px;
}

.agg-note { font-size: 12.5px; color: var(--ash); margin-bottom: 16px; }

/* standalone table (not under a details summary): full border + radius */
.table-wrap.agg-wrap {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
}

/* ── login page ─────────────────────────────────────────────────────── */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--hairline-soft);
  border-radius: 24px;
  padding: 40px 38px 32px;
}

.login-brand { margin-bottom: 28px; }

.login-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--warm-white);
  margin-bottom: 6px;
}

.login-sub { font-size: 13.5px; color: var(--ash); margin-bottom: 24px; }

.login-error {
  font-size: 13px;
  color: var(--warm-white);
  background: rgba(255, 90, 69, 0.10);
  border: 1px solid rgba(255, 90, 69, 0.35);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 18px;
}

.field { display: block; margin-bottom: 16px; }

.field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ash);
  margin-bottom: 7px;
}

.field input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--warm-white);
  background: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.15s ease;
}

.field input:focus {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-color: transparent;
}

.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 62px; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ash);
  cursor: pointer;
}
.pw-toggle:hover { color: var(--warm-white); }
.pw-toggle:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-radius: 6px;
  color: var(--warm-white);
}

.remember {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 18px;
  cursor: pointer;
  user-select: none;
}
.remember input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  flex: none;
  background: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.remember input[type="checkbox"]::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: scale(0);
  transition: transform 0.12s ease;
  background: var(--gradient);
}
.remember input[type="checkbox"]:checked { border-color: var(--orange); }
.remember input[type="checkbox"]:checked::before { transform: scale(1); }
.remember input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.remember-label {
  font-size: 13px;
  color: var(--ash);
  letter-spacing: -0.1px;
}

.login-btn {
  width: 100%;
  margin-top: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--ink);
  background: var(--gradient);
  border: none;
  border-radius: 12px;
  padding: 13px 16px;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.login-btn:hover { filter: brightness(1.05); }
.login-btn:active { transform: translateY(1px); }

.login-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 12px;
  color: var(--ash);
  text-align: center;
}

/* ── footer ─────────────────────────────────────────────────────────── */

footer {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline-soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ash);
}

footer .fm { font-weight: 600; color: var(--off-white); }
footer .fm .ee {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── loading / error ────────────────────────────────────────────────── */

.state-msg { padding: 90px 0; text-align: center; color: var(--ash); font-size: 14px; }

.skeleton {
  border-radius: var(--radius);
  background: linear-gradient(100deg, var(--panel) 40%, var(--raised) 50%, var(--panel) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}

@keyframes shimmer { to { background-position: -200% 0; } }

/* reveal cascade */
.reveal { opacity: 0; transform: translateY(10px); animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
  .page { padding: 0 18px 60px; }
  .kpi-value { font-size: 24px; }
  .week-bar h1 { font-size: 20px; }
  .week-nav select { min-width: 160px; }
  /* Long labels ("connections accepted") clip against the card edge in the
     two-column mobile grid when forced onto one line; let them wrap. */
  .kpi-label { white-space: normal; letter-spacing: 1.3px; }
}

/* ── print: instant one-page summary (Cmd+P) ────────────────────────────
   The dark theme flips to paper by inverting the custom properties; nav,
   selectors and drill-down tables are hidden so the page prints as a clean
   summary (KPIs + trend + analysis headline). The committed PDF/XLSX
   artifacts remain the full export path; this is the zero-setup one. */

@media print {
  :root {
    --ink: #FFFFFF;
    --panel: #FFFFFF;
    --raised: #F4F2EE;
    --warm-white: #1A1A21;
    --off-white: #3D3B37;
    --ash: #8A867E;
    --hairline: #D8D5CF;
    --hairline-soft: #E7E4DE;
  }

  html { color-scheme: light; }
  body { background: #FFFFFF; }

  .glow,
  .period-controls,
  .export-group,
  .logout-link,
  details.campaigns,
  #email-analysis,
  #linkedin-analysis,
  #loading,
  #error { display: none !important; }

  .page { max-width: 100%; padding: 0; }

  /* compact rhythm so the summary approaches one page */
  header { padding: 6px 0 12px; }
  .week-bar { margin: 16px 0 6px; }
  section.channel { margin-top: 18px; }
  .eyebrow { margin-bottom: 10px; }
  .kpi { padding: 12px 14px 10px; }
  .kpi-value { font-size: 24px; }
  .kpi-label { white-space: normal; }
  .card { padding: 16px; margin-top: 12px; }
  .analysis-card { padding: 16px 18px 6px; }
  .summary-card { margin-top: 14px; }
  footer { margin-top: 24px; padding-top: 12px; }

  /* gradient-as-text does not survive print reliably; fall back to the
     solid brand orange (same accent, always legible on paper) */
  .kpi-value.highlight,
  .wordmark .ee,
  footer .fm .ee {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--orange);
  }

  /* the chart draws for the dark theme; keep its card dark on paper so the
     canvas stays legible, and force background printing for it */
  .chart-wrap {
    background: #0B0B0F;
    border-radius: 12px;
    padding: 10px;
    height: 280px;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* the canvas was sized for the screen viewport; never let it spill out of
     its card on the narrower paper width */
  .chart-wrap canvas { max-width: 100% !important; height: auto !important; }

  .kpi, .card { border: 1px solid var(--hairline-soft); break-inside: avoid; }
  .reveal { animation: none; opacity: 1; transform: none; }
}

/* ── admin: client management ────────────────────────────────────────────
   Same dark system as the dashboard (DESIGN.md): Ink Canvas base, Deep Panel
   cards, hairline borders, the orange gradient reserved for the ONE primary
   action per view. This is an internal tool, so density is a little tighter
   than the client-facing dashboard, but nothing here is a different visual
   language. */

.brand-link { text-decoration: none; }
.brand-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.admin-back {
  font-size: 12.5px;
  color: var(--ash);
  text-decoration: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 13px;
  transition: color 0.15s ease, background 0.15s ease;
}
.admin-back:hover { background: var(--raised); color: var(--warm-white); }
.admin-back:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.admin-banner {
  margin: 22px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 184, 0, 0.32);
  background: rgba(255, 184, 0, 0.07);
  color: var(--off-white);
  font-size: 13px;
  line-height: 1.5;
}

/* buttons ------------------------------------------------------------- */

.btn-primary,
.btn-ghost,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.1px;
  border-radius: 12px;
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, filter 0.15s ease, background 0.15s ease;
}

.btn-primary {
  color: var(--ink);
  background: var(--gradient);
  border: none;
  font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
  color: var(--warm-white);
  background: transparent;
  border: 1px solid var(--hairline);
}
.btn-ghost:hover { background: var(--raised); }
.btn-ghost:active { transform: translateY(1px); }

.btn-danger {
  color: var(--bad);
  background: transparent;
  border: 1px solid rgba(255, 90, 69, 0.45);
}
.btn-danger:hover { background: rgba(255, 90, 69, 0.09); }

.btn-small { padding: 6px 12px; font-size: 12px; }

.btn-primary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled { opacity: 0.45; cursor: default; transform: none; }

.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* client list --------------------------------------------------------- */

.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 6px;
}

.client-card {
  display: block;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.client-card:hover {
  background: var(--raised);
  border-color: var(--hairline);
  transform: translateY(-2px);
}
.client-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.client-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.client-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--warm-white);
  letter-spacing: -0.2px;
}
.client-card-slug { font-size: 12px; color: var(--ash); font-variant-numeric: tabular-nums; }
.client-card-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 12px; }
.client-card-foot {
  font-size: 12px;
  color: var(--ash);
  padding-top: 12px;
  border-top: 1px solid var(--hairline-soft);
}

.pill {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.pill-live { color: var(--ok); border-color: rgba(123, 196, 127, 0.4); }
.pill-wait { color: var(--amber); border-color: rgba(255, 184, 0, 0.4); }
.pill-off { color: var(--ash); }
.pill-gone { color: var(--bad); border-color: rgba(255, 90, 69, 0.42); }
#delete-card .next-steps { margin-bottom: 16px; }

.chip {
  font-size: 11px;
  color: var(--off-white);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 10px;
}
.chip-off { color: var(--ash); }

/* forms --------------------------------------------------------------- */

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 18px;
  margin-top: 6px;
}

.field-wide { grid-column: 1 / -1; margin-top: 10px; }

.field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ash);
  margin-bottom: 7px;
}

.field textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--warm-white);
  background: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 14px;
  resize: vertical;
}
.field textarea:focus,
.field input[type="file"]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-color: transparent;
}

/* The native file control ships a light system button that reads as a foreign
   object on a near-black surface. ::file-selector-button restyles it in place,
   so the input keeps its native keyboard and screen-reader behaviour. */
.field input[type="file"] {
  font-size: 12.5px;
  color: var(--ash);
  background: none;
  border: none;
  padding: 0;
  width: auto;
}

.field input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--warm-white);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px 15px;
  margin-right: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.field input[type="file"]::file-selector-button:hover { background: var(--raised); }

.field-help { font-size: 12px; color: var(--ash); margin: 6px 0 14px; line-height: 1.5; }
.field-help code { font-size: 11.5px; color: var(--off-white); }

.field-error {
  font-size: 12px;
  color: var(--bad);
  margin: -8px 0 14px;
  line-height: 1.5;
}

.field-warn {
  font-size: 12.5px;
  color: var(--amber);
  line-height: 1.5;
  margin: 8px 0 14px;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 184, 0, 0.5);
}

.toggle-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 20px; }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--off-white);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.toggle:hover { background: var(--raised); }
.toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  background: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  margin: 0;
}
.toggle input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gradient);
  transform: scale(0);
  transition: transform 0.12s ease;
}
.toggle input[type="checkbox"]:checked { border-color: var(--orange); }
.toggle input[type="checkbox"]:checked::before { transform: scale(1); }
.toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.form-status {
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  color: var(--off-white);
}
.form-status.ok { color: var(--ok); border-color: rgba(123, 196, 127, 0.38); }
.form-status.bad { color: var(--bad); border-color: rgba(255, 90, 69, 0.42); }
.form-status.busy { color: var(--ash); }

.row-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* wizard -------------------------------------------------------------- */

.wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 26px 0 4px;
  padding: 0;
}
.wizard-steps li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ash);
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  padding: 7px 16px 7px 8px;
}
.wizard-steps li span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  background: var(--raised);
  color: var(--ash);
}
.wizard-steps li.active { color: var(--warm-white); border-color: var(--hairline); }
.wizard-steps li.active span { background: var(--gradient); color: var(--ink); }
.wizard-steps li.done span { background: rgba(123, 196, 127, 0.18); color: var(--ok); }

.wizard-panel { margin-top: 18px; }

.wizard-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-soft);
}

.md-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.md-actions .field-help { margin: 0; }

/* providers ----------------------------------------------------------- */

.provider-box {
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  padding: 18px;
  margin-top: 14px;
  background: var(--ink);
}
.provider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.provider-name { font-size: 14px; font-weight: 600; color: var(--warm-white); }

/* credentials handoff -------------------------------------------------- */

.cred-card {
  margin-top: 18px;
  border: 1px solid rgba(255, 122, 46, 0.4);
  border-radius: 16px;
  padding: 22px;
  background: var(--ink);
}
.cred-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--warm-white);
  letter-spacing: -0.3px;
  margin: 6px 0 10px;
}
.cred-warn { font-size: 13px; color: var(--off-white); line-height: 1.55; max-width: 62ch; }
.cred-rows { margin: 18px 0 4px; }
.cred-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 0;
  border-top: 1px solid var(--hairline-soft);
}
.cred-label {
  flex: 0 0 96px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ash);
}
.cred-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  color: var(--warm-white);
  word-break: break-all;
  flex: 1 1 200px;
}
.cred-hidden { color: var(--ash); letter-spacing: 2px; }
.cred-next { margin-top: 16px; font-size: 12.5px; color: var(--ash); line-height: 1.55; }

.next-steps { list-style: none; padding: 0; margin: 10px 0 0; }
.next-steps li {
  position: relative;
  padding: 0 0 0 22px;
  margin-bottom: 12px;
  font-size: 13.5px;
  color: var(--off-white);
  line-height: 1.6;
}
.next-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gradient);
}

/* markdown preview ----------------------------------------------------- */

.md-preview {
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  padding: 18px 20px;
  background: var(--ink);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--off-white);
  max-height: 340px;
  overflow: auto;
}
.md-preview h3, .md-preview h4, .md-preview h5, .md-preview h6 {
  color: var(--warm-white);
  font-size: 14px;
  letter-spacing: -0.2px;
  margin: 14px 0 6px;
}
.md-preview h3:first-child { margin-top: 0; }
.md-preview p { margin-bottom: 10px; }
.md-preview .md-list { margin: 0 0 12px 18px; }
.md-preview .md-list li { margin-bottom: 5px; }
.md-preview code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--amber);
}
.md-preview .md-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  background: var(--panel);
  border-radius: 10px;
  padding: 12px 14px;
  overflow-x: auto;
  margin-bottom: 12px;
  white-space: pre-wrap;
}

.admin-card { margin-top: 20px; }

@media (max-width: 700px) {
  .client-grid { grid-template-columns: 1fr; }
  .wizard-nav { justify-content: stretch; }
  .wizard-nav .btn-primary,
  .wizard-nav .btn-ghost,
  .wizard-nav .btn-danger { flex: 1 1 auto; }
  .cred-label { flex-basis: 100%; }
  .wizard-steps li { flex: 1 1 auto; justify-content: center; }
}

/* ── narration freshness + pending replies (2026-09-25) ─────────────── */

/* An open-period narration whose numbers have moved since it was written
   (narration paused, API capped). Dated, never presented as fresh. */
.stale-chip {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid rgba(255, 184, 0, 0.35);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 8px;
  vertical-align: 1px;
}
.analysis-updated { color: var(--ash); letter-spacing: 1.6px; }

.pending-notice {
  margin-top: 22px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--off-white);
  background: var(--panel);
  border: 1px solid rgba(255, 184, 0, 0.28);
  border-radius: 14px;
}
.pending-notice b { color: var(--warm-white); font-weight: 600; }

/* ── client-facing Cody ─────────────────────────────────────────────── */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cody-panel { margin-top: 18px; padding: 22px 24px 20px; }

.cody-head { display: flex; align-items: center; gap: 12px; }
.cody-head h2 { margin-bottom: 1px; }
.cody-mark {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800;
  color: var(--ink);
  background: var(--gradient);
}
.cody-sub { font-size: 12px; color: var(--ash); }
.cody-updated {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ash);
  text-align: right;
}

.cody-note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--off-white);
  max-width: 82ch;
}
.cody-note.muted { color: var(--ash); font-size: 13px; }

.cody-form { display: flex; gap: 10px; margin-top: 16px; }
.cody-form input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--warm-white);
  background: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 11px 14px;
}
.cody-form input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.cody-form input:disabled { opacity: 0.5; }
.cody-form button {
  flex: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink);
  background: var(--gradient);
  border: 0;
  border-radius: 12px;
  padding: 0 20px;
  cursor: pointer;
}
.cody-form button:disabled { opacity: 0.4; cursor: default; }
.cody-form button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Suggested questions: only what this client's insight pack can answer */
.cody-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cody-chips[hidden] { display: none; }
.cody-chip {
  font-family: inherit;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  max-width: 100%;
  color: var(--ash);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
}
.cody-chip:hover { color: var(--warm-white); border-color: var(--orange); }
.cody-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.cody-meta { margin-top: 8px; font-size: 12px; color: var(--ash); min-height: 18px; }
.cody-meta.warn { color: var(--warn); }

.cody-answer {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--raised);
  border: 1px solid var(--hairline-soft);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--off-white);
}
.cody-answer .cody-q { font-size: 12px; color: var(--ash); margin-bottom: 6px; }
.cody-answer .cody-period {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ash);
}
.cody-answer.state { border-color: rgba(255, 184, 0, 0.28); }

@media (max-width: 700px) {
  .cody-head { flex-wrap: wrap; }
  .cody-updated { margin-left: 42px; text-align: left; width: 100%; }
  .cody-form { flex-direction: column; }
  .cody-form button { padding: 11px 20px; }
}

@media print {
  .cody-form, .cody-meta, .cody-answer { display: none !important; }
}

/* admin: client-facing Cody tables */
#cody-admin table { table-layout: fixed; min-width: 900px; }
#cody-admin td, #cody-admin th {
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
#cody-admin td .muted, #cody-admin td.muted, #cody-admin .muted { color: var(--ash); font-size: 12px; }
#cody-admin td.label-cell { max-width: none; overflow: visible; }
/* notes: client | note | period | updated | last attempt | q&a (widths on the
   header row: a fixed-layout table sizes its columns from it) */
#cody-admin table:has(#cody-notes-rows) th:nth-child(1) { width: 14%; }
#cody-admin table:has(#cody-notes-rows) th:nth-child(2) { width: 40%; }
/* log: when | client | user | status | question | shown */
#cody-admin table:has(#cody-log-rows) th:nth-child(1) { width: 11%; }
#cody-admin table:has(#cody-log-rows) th:nth-child(2),
#cody-admin table:has(#cody-log-rows) th:nth-child(3) { width: 9%; }
#cody-admin table:has(#cody-log-rows) th:nth-child(4) { width: 22%; }

/* 2026-10-06 client polish: Cody's nightly note sits in the assessment
   section; admin-only lines (cohort, withheld notice) are visibly internal. */
.cody-note-card { margin-top: 26px; }
.cody-note-card .cody-note { margin-top: 8px; }
.kpi-admin {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ash);
  border-left: 2px dashed var(--ash);
  padding-left: 8px;
}
#overview-section { margin-top: 26px; }
#linkedin-campaigns { margin-top: 18px; }
#linkedin-campaigns .kpi-footnote { padding: 0 20px 14px; }

/* ── lead desk (admin, docs/LEAD-DESK-PRODUCT-BRIEF.md) ─────────────── */

.ld-page { max-width: 1400px; }
.ld-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ld-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
  margin-top: 18px;
  scrollbar-width: none;
}
.ld-tabs::-webkit-scrollbar { display: none; }
.ld-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--off-white);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.ld-tab:hover { background: var(--raised); }
.ld-tab.is-active { color: var(--ink); background: var(--gradient); border-color: transparent; font-weight: 700; }
.ld-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ld-count {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  background: rgba(255, 255, 255, 0.10);
}
.ld-tab.is-active .ld-count { background: rgba(11, 11, 15, 0.18); }

.ld-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ld-kpi {
  background: var(--panel);
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  padding: 12px 14px;
}
.ld-kpi-value { font-size: 20px; font-weight: 700; color: var(--warm-white); font-variant-numeric: tabular-nums; }
.ld-kpi-label { font-size: 11.5px; color: var(--ash); }

.ld-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 10px;
}
.ld-views { display: inline-flex; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; }
.ld-view {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--off-white);
  background: transparent;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
}
.ld-view + .ld-view { border-left: 1px solid var(--hairline); }
.ld-view.is-active { background: var(--raised); color: var(--warm-white); box-shadow: inset 0 -2px 0 var(--orange); }
.ld-view:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

.ld-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ld-input {
  font-family: inherit;
  font-size: 13px;
  color: var(--warm-white);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 7px 10px;
  min-width: 0;
}
.ld-input:focus { outline: none; border-color: rgba(255, 122, 46, 0.6); }
.ld-input:disabled { opacity: 0.6; }
textarea.ld-input, .ld-drawer input.ld-input { width: 100%; }
.ld-date, .ld-check { font-size: 12px; color: var(--ash); display: inline-flex; gap: 6px; align-items: center; }

.ld-table-wrap { border-top: 1px solid var(--hairline-soft); border-radius: var(--radius); }
.ld-table th, .ld-table td { text-align: left; vertical-align: top; }
.ld-table th[data-sort] { cursor: pointer; user-select: none; }
.ld-table th.is-sorted { color: var(--warm-white); }
.ld-table thead th { position: sticky; top: 0; background: var(--panel); z-index: 2; }
.ld-sticky { position: sticky; left: 0; background: var(--panel); z-index: 1; }
.ld-table thead .ld-sticky { z-index: 3; }
.ld-row { cursor: pointer; }
.ld-row:focus-visible td { background: rgba(255, 122, 46, 0.06); }
.ld-name { color: var(--warm-white); font-weight: 600; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.ld-sub { font-size: 12px; color: var(--ash); white-space: normal; }
.ld-next { white-space: normal; max-width: 220px; }
.ld-flags { white-space: normal; }
.ld-flag { margin: 0 4px 4px 0; text-transform: none; letter-spacing: 0.2px; }
.ld-muted { color: var(--ash); }
.ld-inline { padding: 5px 8px; font-size: 12.5px; max-width: 190px; }
.ld-skel { height: 14px; border-radius: 6px; }
.ld-skel-tall { height: 120px; }
.ld-empty { padding: 40px 0; text-align: center; color: var(--ash); font-size: 14px; }
.ld-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 16px; }

.ld-notice {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--warm-white);
  max-width: calc(100vw - 32px);
}
.ld-notice-ok { border-color: rgba(123, 196, 127, 0.45); }
.ld-notice-warn { border-color: rgba(255, 184, 0, 0.45); }
.ld-notice-bad { border-color: rgba(255, 90, 69, 0.55); }

.ld-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100vw);
  background: var(--panel);
  border-left: 1px solid var(--hairline);
  z-index: 40;
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
}
.ld-drawer-head { display: flex; justify-content: space-between; gap: 12px; padding: 20px 22px 12px; border-bottom: 1px solid var(--hairline-soft); }
.ld-drawer-head h2 { font-size: 17px; color: var(--warm-white); }
.ld-drawer-head .btn-ghost { align-self: flex-start; }
.ld-drawer-body { overflow-y: auto; padding: 16px 22px 40px; display: flex; flex-direction: column; gap: 14px; }
.ld-d-section { display: flex; flex-direction: column; gap: 8px; }
.ld-event, .ld-note { border-left: 2px solid var(--hairline); padding-left: 10px; }
.ld-snippet { color: var(--off-white); font-size: 13px; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ld-note-text { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ld-ids { overflow-wrap: anywhere; }

.ld-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ld-sheet-card {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px;
}
.ld-sheet-card h2 { font-size: 16px; color: var(--warm-white); margin-bottom: 6px; }
.ld-sheet-card .sub { font-size: 12.5px; color: var(--ash); margin-bottom: 14px; }
.ld-sheet-card .field input, .ld-sheet-card .field select, .ld-sheet-card .field textarea { width: 100%; }
.ld-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ld-sheet-error { color: var(--bad); font-size: 12.5px; margin-bottom: 8px; }
.ld-settings-wrap { border-top: 1px solid var(--hairline-soft); border-radius: 14px; }
.ld-settings-wrap td, .ld-settings-wrap th { text-align: left; }

@media (max-width: 767px) {
  .page.ld-page { padding: 0 16px 80px; }
  .ld-toolbar { flex-direction: column; align-items: stretch; }
  .ld-kpis { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ld-kpi { padding: 8px 10px; }
  .ld-kpi-value { font-size: 16px; }
  .ld-filters .ld-input { flex: 1 1 140px; }
  .ld-table thead { display: none; }
  .ld-table, .ld-table tbody, .ld-table tr, .ld-table td { display: block; width: 100%; }
  .ld-table tr.ld-row {
    border: 1px solid var(--hairline-soft);
    border-radius: 14px;
    margin: 0 0 10px;
    padding: 10px 12px;
    background: var(--panel);
  }
  .ld-table td { border: none; padding: 4px 0; white-space: normal; }
  .ld-table td:first-child { padding-left: 0; }
  .ld-table td:last-child { padding-right: 0; }
  .ld-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ash);
  }
  .ld-sticky { position: static; }
  .ld-table-wrap { border: none; background: transparent; }
  .ld-inline { max-width: none; width: 100%; }
  .ld-drawer { width: 100vw; top: auto; height: 88vh; border-left: none; border-top: 1px solid var(--hairline); border-radius: 20px 20px 0 0; }
  .ld-sheet { align-items: flex-end; padding: 0; }
  .ld-sheet-card { border-radius: 20px 20px 0 0; width: 100%; }
}

/* lead desk client view (client dashboard) */
.leads-upcoming { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.leads-upcoming-row { font-size: 13px; color: var(--warm-white); }
.leads-client-wrap { border-top: 1px solid var(--hairline-soft); border-radius: 14px; }
.leads-client-wrap td, .leads-client-wrap th { text-align: left; }