/* GTM Command Centre — RoundOne design-system skin.
 *
 * Tokens come from the RoundOne AI design system (colors_and_type.css of the
 * design handoff); the component classes below encode the redesign's layout:
 * a slate-neutral shell (#F8FAFC ground, slate text) with electric violet
 * #5000FF as the single accent, and the signature 5000FF→AB84FF gradient
 * reserved for the primary call to action.
 *
 * The one deliberate risk carried over from v1: drafted messages and
 * qualification reasons are set in a reading serif. They are correspondence
 * written for humans, and this tool exists to judge whether a piece of
 * writing is good enough to send in your name.
 */

:root {
  /* Brand */
  --ro-dark-purple: #1E0044;
  --ro-purple: #5000FF;
  --ro-light-purple: #AB84FF;
  --ro-purple-50: #F3EEFF;
  --ro-purple-100: #E0DAF5;
  --ro-purple-200: #C9B8FF;
  --ro-purple-300: #9B87F5;
  --ro-gradient: linear-gradient(90deg, #5000FF 0%, #AB84FF 100%);
  --ro-gradient-hover: linear-gradient(90deg, #1E0044 0%, #5000FF 100%);

  /* Neutrals */
  --ro-fg-1: #0F172A;
  --ro-fg-2: #334155;
  --ro-fg-3: #64748B;
  --ro-fg-4: #94A3B8;
  --ro-bg-1: #FFFFFF;
  --ro-bg-2: #F8FAFC;
  --ro-bg-3: #F1F5F9;
  --ro-border: #E2E8F0;
  --ro-border-strong: #CBD5E1;

  /* Semantic */
  --ro-success: #059669;
  --ro-success-bg: #D1FAE5;
  --ro-warning: #B45309;
  --ro-warning-bg: #FEF3C7;
  --ro-danger: #DC2626;
  --ro-danger-bg: #FEE2E2;

  /* Shadows */
  --ro-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ro-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --ro-shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.04);
  --ro-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.04);
  --ro-shadow-purple: 0 10px 30px -10px rgba(80, 0, 255, 0.45);
  --ro-shadow-purple-sm: 0 4px 14px rgba(80, 0, 255, 0.22);

  /* Type */
  --ro-font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ro-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --ro-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Legacy aliases, so older inline styles keep resolving. */
  --paper: var(--ro-bg-1); --wash: var(--ro-bg-2); --ink: var(--ro-fg-1);
  --graphite: var(--ro-fg-3); --rule: var(--ro-border); --rule-soft: var(--ro-bg-3);
  --violet: var(--ro-purple); --violet-deep: #3A00C0; --violet-wash: var(--ro-purple-50);
  --bg: var(--wash); --panel: var(--paper); --line: var(--rule); --txt: var(--ink);
  --mut: var(--graphite); --acc: var(--violet);
  --ok: var(--ro-success); --warn: var(--ro-warning); --err: var(--ro-danger);
  --sans: var(--ro-font-sans); --serif: var(--ro-font-serif); --mono: var(--ro-font-mono);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ro-bg-2); color: var(--ro-fg-1);
  font: 14px/1.5 var(--ro-font-sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ro-purple-100); }
a { color: var(--ro-purple); text-decoration: none; }
a:hover { color: var(--ro-dark-purple); text-decoration: underline; }

/* ── header ─────────────────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 20; height: 60px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ro-border);
  display: flex; align-items: center; gap: 28px; padding: 0 28px;
}
header .brand { display: flex; align-items: center; gap: 10px; color: inherit; }
header a.brand:hover { color: inherit; text-decoration: none; }
header .brand img { width: 24px; height: 24px; display: block; }
header h1 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap;
}
header nav { display: flex; gap: 2px; align-items: center; height: 100%; }
header nav a {
  position: relative; font-size: 13.5px; font-weight: 600; padding: 8px 12px;
  height: 60px; display: inline-flex; align-items: center; gap: 6px;
  color: var(--ro-fg-3); text-decoration: none;
}
header nav a:hover { color: var(--ro-dark-purple); text-decoration: none; }
header nav a.on { color: var(--ro-purple); box-shadow: inset 0 -2px 0 var(--ro-purple); }
header nav a .navbadge {
  background: var(--ro-purple); color: #fff; border-radius: 9999px;
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; line-height: 1.5;
}
header nav a .navbadge:empty { display: none; }
header .sp { flex: 1; }
header .status {
  font-size: 12.5px; color: var(--ro-fg-3); display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--ro-border-strong); display: inline-block; flex: 0 0 auto; }
.dot.on { background: var(--ro-success); } .dot.off { background: var(--ro-danger); }
header .avatar-me {
  width: 32px; height: 32px; border-radius: 9999px; background: var(--ro-gradient);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; border: 0; padding: 0; cursor: pointer; flex: 0 0 auto;
}

/* ── page scaffold ──────────────────────────────────────────────────────── */
main { max-width: 1080px; margin: 0 auto; padding: 36px 28px 48px; }
main.wide { max-width: 1120px; }
.pagehead { margin-bottom: 24px; }
.pagetitle { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.pagesub { color: var(--ro-fg-3); margin-top: 4px; }
.ro-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ro-purple);
}
.ro-code {
  font-family: var(--ro-font-mono); font-size: .9em; background: var(--ro-bg-3);
  padding: 2px 6px; border-radius: 6px; color: var(--ro-fg-1);
}

/* ── surfaces ───────────────────────────────────────────────────────────── */
.card {
  background: #fff; border: 1px solid var(--ro-border); border-radius: 12px;
  padding: 24px; box-shadow: var(--ro-shadow-xs); margin-bottom: 20px;
}
.card.flush { padding: 0; overflow: hidden; }
.card h2 { margin: 0 0 16px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.card .spread h2, .card h2.tight { margin-bottom: 0; }
h3 {
  font-size: 11px; margin: 20px 0 8px; font-weight: 600; color: var(--ro-fg-4);
  text-transform: uppercase; letter-spacing: .06em;
}
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

/* ── controls ───────────────────────────────────────────────────────────── */
input, textarea, select {
  background: #fff; color: var(--ro-fg-1); border: 1px solid var(--ro-border);
  border-radius: 8px; padding: 9px 13px; font: inherit; font-size: 13.5px; max-width: 100%;
}
select { padding: 9px 11px; color: var(--ro-fg-2); }
input:focus, textarea:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--ro-purple); outline-offset: 1px;
}
input::placeholder, textarea::placeholder { color: var(--ro-fg-4); }
input[type="checkbox"], input[type="radio"] {
  appearance: auto; padding: 0; width: 15px; height: 15px; max-width: none; border-radius: 0;
  accent-color: var(--ro-purple); vertical-align: middle; cursor: pointer;
}
textarea { width: 100%; min-height: 110px; font-family: var(--ro-font-mono); font-size: 12.5px; line-height: 1.6; resize: vertical; }
textarea.plain {
  font-family: var(--ro-font-sans); font-size: 13.5px; line-height: 1.5; min-height: 80px;
  field-sizing: content; /* grow with the text; autosize() covers older browsers */
}
label { display: block; font-size: 12px; color: var(--ro-fg-3); margin-bottom: 5px; font-weight: 600; }
.field { margin-bottom: 18px; }
.field input, .field select { width: 100%; }
.hint { font-size: 12px; color: var(--ro-fg-4); margin-top: 4px; }

button {
  background: var(--ro-purple); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px;
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
}
button:hover { background: var(--violet-deep); }
button.cta {
  background: var(--ro-gradient); border-radius: 9999px; padding: 12px 24px;
  font-size: 14px; box-shadow: var(--ro-shadow-purple-sm);
}
button.cta:hover { background: var(--ro-gradient-hover); box-shadow: var(--ro-shadow-purple); }
button.ghost {
  background: #fff; border: 1px solid var(--ro-border); color: var(--ro-fg-2);
  font-weight: 600; font-size: 12.5px; padding: 8px 14px;
}
button.ghost:hover { background: var(--ro-purple-50); border-color: var(--ro-purple-200); }
button.ghost.accent { color: var(--ro-purple); }
button.link {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--ro-purple); cursor: pointer; border-radius: 0;
}
button.link:hover { background: none; color: var(--ro-dark-purple); }
button.link.quiet { color: var(--ro-fg-4); }
button.link.danger-link { color: var(--ro-danger); }
button.link.danger-link:hover { color: var(--ro-danger); }
button.danger {
  background: none; border: 1px solid #FECACA; color: var(--ro-danger);
  font-weight: 600; font-size: 12.5px; padding: 8px 13px;
}
button.danger:hover { background: var(--ro-danger-bg); }
button.sm { padding: 6px 12px; font-size: 12px; }
button:disabled { opacity: .45; cursor: default; }
button:disabled:hover { background: var(--ro-purple); }
button.ghost:disabled:hover { background: #fff; }
/* Text-button that rejects a single draft. */
button.reject {
  background: none; border: 0; padding: 4px 10px; border-radius: 6px; font: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--ro-danger); cursor: pointer;
}
button.reject:hover { background: var(--ro-danger-bg); }
/* Warning chip: a count of leads blocked on missing data. */
button.chip {
  background: var(--ro-warning-bg); color: #92400E; border: 0; border-radius: 9999px;
  padding: 4px 12px; font-size: 12px; font-weight: 600;
}
button.chip:hover { background: #FDE9B8; }
/* A run that sends messages to real people carries the warning colour. */
button.ghost.sends { border-color: #F0DCB4; color: #8A5A00; background: #FFFDF8; }
button.ghost.sends:hover { background: #FEF6E7; border-color: #E5C98A; }

/* ── tables ─────────────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; padding: 12px 16px; font-size: 11px; color: var(--ro-fg-4);
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--ro-border);
}
td {
  text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--ro-bg-3);
  vertical-align: middle; font-size: 13px;
}
tbody tr:last-child td { border-bottom: 0; }
/* Tables that fill a flush card: thead on the shell tint, gutter columns. */
.card.flush thead tr { background: var(--ro-bg-2); }
.card.flush th:first-child, .card.flush td:first-child { padding-left: 24px; }
.card.flush th:last-child, .card.flush td:last-child { padding-right: 24px; }
.card.flush tbody tr:hover { background: #FCFBFF; }
table.searching tbody { opacity: .45; transition: opacity .12s ease; }
table tbody { transition: opacity .12s ease; }
.tfoot {
  display: flex; align-items: center; gap: 12px; padding: 12px 24px;
  border-top: 1px solid var(--ro-border); background: var(--ro-bg-2);
}
.tfoot select { padding: 5px 8px; font-size: 12px; }

/* ── status ─────────────────────────────────────────────────────────────── */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 11.5px;
  font-weight: 600; white-space: nowrap;
}
.pill.neutral, .pill.new, .pill.draft, .pill.lead { background: var(--ro-bg-3); color: var(--ro-fg-3); }
.pill.ok, .pill.qualified, .pill.approved, .pill.sent, .pill.succeeded, .pill.accepted,
.pill.closed_won, .pill.meeting_booked, .pill.active, .pill.sql, .pill.customer
  { background: var(--ro-success-bg); color: var(--ro-success); }
.pill.purple, .pill.connecting, .pill.connected, .pill.messaged, .pill.outreach_sent,
.pill.responded, .pill.running, .pill.queued, .pill.mql, .pill.opportunity
  { background: var(--ro-purple-50); color: var(--ro-purple); }
.pill.warn, .pill.unqualified, .pill.nurture, .pill.stale, .pill.timeout, .pill.pending
  { background: var(--ro-warning-bg); color: var(--ro-warning); }
.pill.bad, .pill.excluded, .pill.skipped, .pill.closed_lost, .pill.failed, .pill.rejected,
.pill.cancelled
  { background: var(--ro-danger-bg); color: var(--ro-danger); }

.tier { font-family: var(--ro-font-mono); font-size: 12px; font-weight: 700; }
.tier.t1 { color: var(--ro-success); }
.tier.t2 { color: var(--ro-purple); }
.tier.t3 { color: var(--ro-fg-4); }

.flag { font-size: 11px; font-weight: 700; white-space: nowrap; }
.flag.good { color: var(--ro-success); }
.flag.bad { color: var(--ro-danger); }

/* ── people ─────────────────────────────────────────────────────────────── */
.avatar {
  width: 32px; height: 32px; border-radius: 9999px; background: var(--ro-purple-50);
  color: #3A00C0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; flex: 0 0 32px;
}
.avatar.bad { background: var(--ro-danger-bg); color: var(--ro-danger); }
.avatar.sm { width: 30px; height: 30px; flex: 0 0 30px; font-size: 11px; }
.person { display: flex; gap: 11px; align-items: center; }
.person .who .sub { font-size: 12.5px; color: var(--ro-fg-3); }
.nameline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
button.namebtn {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--ro-fg-1); cursor: pointer; text-align: left; border-radius: 0;
}
button.namebtn:hover { background: none; color: var(--ro-purple); }
a.extlink { display: inline-flex; color: var(--ro-fg-4); }
a.extlink:hover { text-decoration: none; }
a.extlink.li:hover { color: #0A66C2; }
a.extlink.hs:hover { color: #FF7A59; }

/* ── numbers ────────────────────────────────────────────────────────────── */
.stat { background: var(--ro-bg-2); border-radius: 10px; padding: 14px 16px; display: block; color: inherit; }
.stat .n {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat .k {
  font-size: 11px; color: var(--ro-fg-3); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; margin-top: 2px;
}
.stat.hot { background: var(--ro-purple-50); }
.stat.hot .n, .stat.hot .k { color: var(--ro-purple); }
a.stat:hover { background: var(--ro-purple-50); text-decoration: none; }
.mono-n { font-family: var(--ro-font-mono); font-weight: 500; }

/* ── the signature: drafts and judgements read as prose ─────────────────── */
.reason { font-family: var(--ro-font-serif); font-size: 14.5px; line-height: 1.55; color: var(--ro-fg-2); }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
textarea.letterbody {
  display: block; width: 100%; font-family: var(--ro-font-serif); font-size: 16.5px;
  line-height: 1.62; color: var(--ro-fg-1); margin: 0; padding: 12px 26px 20px;
  max-width: 66ch; white-space: pre-wrap; border: 0; border-radius: 0; background: transparent;
  resize: none; overflow: hidden; field-sizing: content; min-height: 0;
}
textarea.letterbody:hover { background: #FCFBFF; }
textarea.letterbody:focus { background: #FCFBFF; outline: none; box-shadow: inset 2px 0 0 var(--ro-purple-200); }

/* ── utility ────────────────────────────────────────────────────────────── */
.mut { color: var(--ro-fg-3); } .faint { color: var(--ro-fg-4); }
.err { color: var(--ro-danger); } .ok { color: var(--ro-success); } .warn { color: var(--ro-warning); }
.small { font-size: 12.5px; } .tiny { font-size: 12px; }
.mono { font-family: var(--ro-font-mono); font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.empty {
  padding: 64px 24px; text-align: center; color: var(--ro-fg-2);
  font-family: var(--ro-font-serif); font-size: 17px;
}
.empty .sub { font-family: var(--ro-font-sans); font-size: 13px; color: var(--ro-fg-3); margin-top: 8px; }

/* Inline tab strip (Leads views, Review statuses). */
.subtabs { display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap; }
.subtab {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px;
  font-weight: 600; padding: 6px 2px; color: var(--ro-fg-3); border-radius: 0;
}
.subtab:hover { background: none; color: var(--ro-dark-purple); }
.subtab.on { color: var(--ro-purple); box-shadow: inset 0 -2px 0 var(--ro-purple); }
.subtab .n { font-family: var(--ro-font-mono); font-size: 11.5px; color: var(--ro-fg-4); font-weight: 500; margin-left: 4px; }

/* Left rail selectors (Review leads, Settings panes). */
.rail { background: #fff; border: 1px solid var(--ro-border); border-radius: 12px; padding: 8px; box-shadow: var(--ro-shadow-xs); }
.railhead {
  font-size: 11px; color: var(--ro-fg-4); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; padding: 8px 10px 6px;
}
button.railitem {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 10px 12px;
  font: inherit; cursor: pointer; text-align: left; margin-bottom: 2px; color: var(--ro-fg-1);
}
button.railitem:hover { background: var(--ro-purple-50); }
button.railitem.on { background: var(--ro-purple-50); border-color: var(--ro-purple-200); }
button.railitem .t { min-width: 0; flex: 1; }
button.railitem .t .name {
  display: block; font-weight: 600; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
button.railitem .t .sub {
  display: block; font-size: 12px; color: var(--ro-fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
button.railitem .n { font-family: var(--ro-font-mono); font-size: 11.5px; color: var(--ro-fg-4); }
button.railitem.pane { display: block; font-size: 13px; font-weight: 600; color: var(--ro-fg-2); padding: 9px 12px; margin-bottom: 1px; border: 0; }
button.railitem.pane.on { color: var(--ro-purple); }

/* ── overlays ───────────────────────────────────────────────────────────── */
.modalbg {
  position: fixed; inset: 0; background: rgba(30,0,68,.28); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 50;
}
.modal {
  background: #fff; border: 1px solid var(--ro-border); border-radius: 14px; padding: 24px;
  width: min(720px,100%); max-height: 88vh; overflow: auto; box-shadow: var(--ro-shadow-xl);
}
.modal h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

.drawerbg {
  position: fixed; inset: 0; background: rgba(30,0,68,.28); backdrop-filter: blur(2px); z-index: 70;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(600px,94vw); background: #fff;
  z-index: 71; box-shadow: var(--ro-shadow-xl); overflow-y: auto;
}
.drawer .head { padding: 20px 26px; border-bottom: 1px solid var(--ro-bg-3); }
.drawer .body { padding: 20px 26px; }
.drawer .name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }

/* Activity timeline inside the drawer. */
.tl { display: flex; gap: 10px; padding: 0 0 14px; }
.tl .spine { display: flex; flex-direction: column; align-items: center; }
.tl .spine .dot2 { width: 8px; height: 8px; border-radius: 9999px; background: var(--ro-purple-200); margin-top: 4px; flex: 0 0 auto; }
.tl .spine .line { width: 1px; flex: 1; background: var(--ro-bg-3); margin-top: 2px; }
.tl.last .spine .line { display: none; }
.tl .kind { font-size: 11px; font-weight: 700; color: var(--ro-purple); text-transform: uppercase; letter-spacing: .05em; }
.tl .when { font-size: 11.5px; color: var(--ro-fg-4); }
.tl .text { font-size: 13px; color: var(--ro-fg-2); margin-top: 2px; }
/* Scheduled-but-not-done: hollow dot, amber label, quieter text. */
.tl.todo .spine .dot2 { background: #fff; border: 1.5px solid var(--ro-purple-300); box-sizing: border-box; }
.tl.todo .kind { color: var(--ro-warning); }
.tl.todo .when { color: var(--ro-warning); font-weight: 600; }
.tl.todo .text { color: var(--ro-fg-3); }

#toast { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 80; }
#toast div {
  background: var(--ro-dark-purple); color: #fff; border-radius: 10px; padding: 12px 18px;
  font-size: 13.5px; font-weight: 500; box-shadow: var(--ro-shadow-lg); max-width: 380px;
}
#toast div.err { background: var(--ro-danger); }

pre.log {
  background: var(--ro-bg-2); border: 1px solid var(--ro-border); border-radius: 9px; padding: 14px;
  font-family: var(--ro-font-mono); font-size: 12.5px; line-height: 1.6; color: var(--ro-fg-1);
  max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}

@media (max-width: 720px) {
  header { padding: 0 16px; gap: 14px; overflow-x: auto; }
  main { padding: 20px 16px 40px; }
  textarea.letterbody { padding: 12px 18px 18px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }