/* ============================================================================
   RELAY — sales pipeline tracker for a broadband provider.
   Visual system: infrastructure slate + spruce. Archivo (expanded) for signage
   headings, IBM Plex Sans for UI, IBM Plex Mono for every ID / date / figure.
   Signature element: the Pipeline Path (.pipe).
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.de2f1fe81758.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans.b2c9031d9fd6.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.79936b18df9f.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.b1c8a895f5fd.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #1b2a3a;
  --ink-2: #4a5a67;
  --paper: #f4f6f5;
  --surface: #ffffff;
  --line: #dde3e0;
  --line-2: #edf0ee;

  --field: #2e6f5e;
  --field-dk: #25604f;
  --field-ink: #ffffff;
  --field-wash: #e7f0ec;
  --signal: #c25a2e;
  --signal-wash: #f7e7df;

  --hfc: #b07d3c;
  --fiber: #3e7cb1;
  --fwa: #7a6ba8;

  --st-new: #8a9691;
  --st-in_progress: #c99a3e;
  --st-sale: #2e6f5e;
  --st-no_sale: #c25a2e;
  --st-not_a_lead: #b9c0bc;

  /* Reopen ribbons in the status-journey Sankey — deliberately outside the
     status palette so a backwards flow never reads as an outcome colour. */
  --reopen: #6b4fa8;

  --radius: 7px;
  --rail-w: 216px;
  --measure: 1040px;

  --font-display: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --sh-1: 0 1px 2px rgba(27, 42, 58, 0.05), 0 1px 3px rgba(27, 42, 58, 0.04);
  --sh-2: 0 8px 28px rgba(27, 42, 58, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 400 15px/1.55 var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure, ul, figcaption { margin: 0; }
a { color: var(--field); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; color: inherit; }
strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--field);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- App shell ----------------------------------------------------------- */

.app { display: flex; min-height: 100vh; }

.rail {
  flex: 0 0 var(--rail-w);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 125%;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand svg { flex: none; }

.rail-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 30px; }
.rail-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
}
.rail-nav a svg { flex: none; opacity: 0.75; }
.rail-nav a:hover { background: var(--line-2); color: var(--ink); text-decoration: none; }
.rail-nav a[aria-current="page"] {
  background: var(--field-wash);
  color: var(--field);
  font-weight: 600;
}
.rail-nav a[aria-current="page"] svg { opacity: 1; }

.rail-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}
.rail-foot .who { color: var(--ink); font-weight: 600; }
.rail-foot .role { color: var(--ink-2); font-weight: 400; }
.rail-foot form { margin-top: 10px; }
.rail-foot button {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  color: var(--ink-2);
  font-size: 13px;
}
.rail-foot button:hover { border-color: var(--ink-2); color: var(--ink); }

.main { flex: 1 1 auto; min-width: 0; padding: 28px clamp(16px, 4vw, 44px) 76px; }
.wrap { max-width: var(--measure); margin: 0 auto; }

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .rail {
    position: static;
    height: auto;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  .rail-nav { flex-direction: row; margin-top: 0; gap: 4px; }
  .rail-nav a span { display: none; }
  .rail-foot {
    margin: 0 0 0 auto;
    padding-top: 0;
    border-top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
  }
  .rail-foot form { margin-top: 0; }
  .rail-foot .who, .rail-foot .role { display: none; }
  .rail-foot button { width: auto; }
  .main { padding: 20px 16px 56px; }
}

/* --- Page furniture ---------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 125%;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
  line-height: 1.04;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 34px 0 12px;
}
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.muted { color: var(--ink-2); }
.mono { font-family: var(--font-mono); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--field);
  color: var(--field-ink);
  font-size: 14px;
  font-weight: 600;
}
.btn:hover { background: var(--field-dk); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--field); border-color: var(--line); }
.btn-ghost:hover { background: var(--field-wash); border-color: var(--field); }
.btn-quiet { background: transparent; border: 0; color: var(--ink-2); padding: 9px 4px; }
.btn-quiet:hover { color: var(--ink); text-decoration: underline; }
.btn-danger { background: transparent; color: var(--signal); border-color: currentColor; }
.btn-danger:hover { background: var(--signal-wash); }
.actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.messages { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.msg { padding: 10px 14px; border-radius: 6px; font-size: 13px; border: 1px solid; }
.msg-success { background: var(--field-wash); border-color: #bcd8ce; color: #215c4b; }
.msg-error { background: var(--signal-wash); border-color: #e8c3b3; color: #9e3f1e; }

/* --- Pipeline Path (signature) ---------------------------------------- */

.pipeline { margin: 0 0 26px; }
.pipeline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 8px;
}
.pipeline-head strong { color: var(--ink); }

.pipe {
  display: flex;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.pipe-seg {
  --w: 0%;
  flex: 0 0 var(--w);
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  animation: pipe-grow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
  /* live updates re-scale the width smoothly without replaying the entrance */
  transition: flex-basis 0.35s ease;
}
@keyframes pipe-grow { from { flex-basis: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pipe-seg { animation: none; transition: none; }
}

.pipe-seg:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.pipe-seg:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.pipe-seg + .pipe-seg { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.3); }
.pipe-seg .n { font-family: var(--font-mono); font-weight: 500; font-size: 17px; line-height: 1; }
.pipe-seg .l {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.92;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pipe-seg[data-k="new"] { background: var(--st-new); }
.pipe-seg[data-k="in_progress"] { background: var(--st-in_progress); }
.pipe-seg[data-k="sale"] { background: var(--st-sale); }
.pipe-seg[data-k="no_sale"] { background: var(--st-no_sale); }
.pipe-seg[data-k="not_a_lead"] { background: var(--st-not_a_lead); color: var(--ink); }
.pipe-seg:hover { filter: brightness(1.07); }

/* decision junction: a diamond straddling the seam before "Sale" */
.pipe-seg[data-k="sale"]:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 11px;
  height: 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 2;
}
.pipe-seg .conv {
  position: absolute;
  top: 7px;
  right: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.92);
  color: var(--st-sale);
  padding: 1px 6px;
  border-radius: 99px;
}
.pipe-empty {
  height: 58px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  font-size: 13px;
}

/* --- Metric strip (precise figures under the pipeline) --------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.metric { background: var(--surface); padding: 14px 16px; }
.metric .k, .metric .v, .metric .sub { display: block; }
.metric .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.metric .v {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  margin-top: 8px;
}
.metric .sub { font-size: 11px; color: var(--ink-2); margin-top: 6px; }

/* Monthly target progress (dashboard) */
.target-strip {
  margin: 12px 0 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sh-1);
}
.target-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.target-bars { display: grid; gap: 12px; }
@media (min-width: 620px) { .target-bars { grid-template-columns: 1fr 1fr; } }
.target-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 5px;
}
.meter {
  height: 8px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.meter i { display: block; height: 100%; background: var(--field); border-radius: 99px; }
.meter--hit i { background: var(--st-sale); }
.target-note { margin: 10px 0 0; font-size: 12px; }

/* Run-rate line under a sales target bar (seller cards + seller detail). */
.pace-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 7px 0 0;
  font-size: 12px;
  color: var(--ink-2);
}
.pace-proj { color: var(--ink); }
.pace-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 99px;
  border: 1px solid currentColor;
}
.pace-pill--on_pace { color: var(--field); }
.pace-pill--hit { color: var(--st-sale); }
.pace-pill--behind { color: var(--signal); }

/* Targets management page */
.target-month-form { display: flex; align-items: end; gap: 10px; margin-bottom: 16px; }
.target-month-form label { display: grid; gap: 4px; }
.target-month-form select { width: auto; }
.apply-all {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  margin: 12px 0 16px;
  background: var(--line-2);
  border-radius: 6px;
}
.apply-all .eyebrow { flex-basis: 100%; }
.apply-all label { display: grid; gap: 4px; font-size: 13px; }
.apply-all input { width: 110px; }
.grid td input[type="number"] { width: 100px; text-align: right; }

/* --- Toolbar / filters --------------------------------------------------- */

.toolbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 16px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}
.chip:hover { border-color: var(--ink-2); color: var(--ink); text-decoration: none; }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 18px;
  box-shadow: var(--sh-1);
}
.range-form { display: grid; gap: 10px; }
.range-form > label { display: grid; gap: 4px; }
.range-note { margin-top: 12px; font-size: 13px; }

/* Multi-select checkbox dropdown */
.filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.lead-search {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  min-width: 200px;
}
.lead-search:focus { border-color: var(--field); box-shadow: 0 0 0 3px var(--field-wash); outline: none; }
.sort-field { display: grid; gap: 4px; font-size: 12px; color: var(--ink-2); }
.sort-field select { padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.ms { position: relative; }
.ms > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 30px 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 14px;
  white-space: nowrap;
  position: relative;
}
.ms > summary::-webkit-details-marker { display: none; }
.ms > summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg);
}
.ms[open] > summary { border-color: var(--field); box-shadow: 0 0 0 3px var(--field-wash); }
.ms-caption { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.ms-value { color: var(--ink); font-family: var(--font-mono); font-size: 13px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ms-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--sh-2);
}
.ms-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 5px; font-size: 14px; cursor: pointer; }
.ms-opt:hover { background: var(--line-2); }
.ms-opt input { flex: none; }

/* --- Forms ------------------------------------------------------------- */

input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; margin: 0; accent-color: var(--field); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--field);
  box-shadow: 0 0 0 3px var(--field-wash);
}
form.stack, form.card-form { max-width: 460px; }
form.stack p, form.filters p, form.card-form p { margin: 0 0 14px; }
form.stack > p > label, form.card-form > p > label,
form.stack > label, form.card-form > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 5px;
}
.helptext { display: block; font-size: 12px; color: var(--ink-2); margin-top: 4px; }
ul.errorlist { margin: 5px 0 0; padding-left: 16px; color: var(--signal); font-size: 12px; }
.error { color: var(--signal); }
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--sh-1);
}
.panel > p:first-child { margin-top: 0; }

/* CSV import */
fieldset.owner-modes {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 16px;
}
fieldset.owner-modes legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
fieldset.owner-modes ul { list-style: none; padding: 0; margin: 4px 0; }
fieldset.owner-modes li { margin: 4px 0; }
fieldset.owner-modes label {
  display: inline; text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: 14px; color: var(--ink); margin: 0 0 0 6px;
}
.single-owner { margin: 8px 0 0 22px; }
.single-owner select { width: auto; min-width: 200px; }

/* --- Badges ---------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.badge-new { color: #5a6a63; background: #eef1ef; }
.badge-in_progress { color: #8a6100; background: #faf1de; }
.badge-sale { color: #215c4b; background: var(--field-wash); }
.badge-no_sale { color: #9e3f1e; background: var(--signal-wash); }
.badge-not_a_lead { color: #727c77; background: #edefed; }

.tag { font-size: 11px; padding: 2px 7px; border-radius: 4px; background: #faf1de; color: #8a6100; margin-left: 6px; }

/* --- Lead cards ----------------------------------------------------- */

.inline-hint { margin: -4px 0 14px; font-size: 12px; }

.bulk-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; font-size: 13px; }
.bulk-head label { display: flex; align-items: center; gap: 7px; }
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--field);
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--field-dk); }

.lead-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lead-card {
  position: relative;
  padding: 13px 15px 13px 19px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sh-1);
}
.lead-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--st-new);
}
.lead-card[data-status="in_progress"]::before { background: var(--st-in_progress); }
.lead-card[data-status="sale"]::before { background: var(--st-sale); }
.lead-card[data-status="no_sale"]::before { background: var(--st-no_sale); }
.lead-card[data-status="not_a_lead"]::before { background: var(--st-not_a_lead); }

.lead-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lead-check { width: 18px; height: 18px; flex: none; }
.lead-id { flex: 1 1 auto; min-width: 120px; font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--ink); }
.lead-age { font-size: 11px; color: var(--ink-2); white-space: nowrap; }

.lead-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin-top: 11px;
}
.cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cell .k { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }
.cell .val { font-size: 13px; }
.cell .val.mono { font-family: var(--font-mono); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.pill-hfc { color: var(--hfc); }
.pill-fiber { color: var(--fiber); }
.pill-fwa { color: var(--fwa); }

.inline-field { padding: 6px 9px; font-size: 13px; }
.inline-field:disabled { opacity: 0.55; }

.save-state { font-size: 11px; font-family: var(--font-mono); white-space: nowrap; }
.save-pending { color: var(--ink-2); }
.save-ok { color: var(--field); }
.save-err { color: var(--signal); }

.lead-actions { display: flex; gap: 16px; margin-top: 12px; font-size: 13px; }

/* On a narrow screen the "… in status" line wrapped or not depending on how
   wide the customer ID and status badge happened to be. Pin it to its own line
   under the ID/badge row so every card reads the same. */
@media (max-width: 720px) {
  .lead-list:not(.is-compact) .lead-age { flex-basis: 100%; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Row-density toggle */
.list-tools {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.list-tools .inline-hint { margin: 0; }
.view-toggle {
  display: inline-flex; border: 1px solid var(--line); border-radius: 99px;
  overflow: hidden; flex: none;
}
.view-toggle button {
  appearance: none; border: 0; background: var(--surface); cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1; padding: 6px 14px;
  color: var(--ink-2);
}
.view-toggle button + button { border-left: 1px solid var(--line); }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.view-toggle button:focus-visible { outline: 2px solid var(--field); outline-offset: -2px; }

/* Compact rows — one line per lead, same markup as the full card */
.lead-list.is-compact {
  gap: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--sh-1); overflow: hidden;
}
.lead-list.is-compact .lead-card {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px;
  padding: 6px 12px 6px 15px;
  border: 0; border-top: 1px solid var(--line-2); border-radius: 0;
  box-shadow: none;
}
.lead-list.is-compact .lead-card:first-child { border-top: 0; }
.lead-list.is-compact .lead-card::before { border-radius: 0; }
.lead-list.is-compact .lead-top,
.lead-list.is-compact .lead-grid { display: contents; }
.lead-list.is-compact .cell { gap: 0; }
.lead-list.is-compact .cell .k {   /* hidden but left for screen readers */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lead-list.is-compact [data-badge] { display: none; }
/* Source is an analytical detail — keep it out of the dense triage row. */
.lead-list.is-compact .cell--source { display: none; }

.lead-list.is-compact .lead-id { flex: none; min-width: 0; width: 11ch; font-size: 13px; }
.lead-list.is-compact .cell--platform { flex: none; order: 2; }
.lead-list.is-compact .cell--platform .pill { padding: 1px 7px; font-size: 11px; }
.lead-list.is-compact .cell--status { flex: none; order: 3; width: 132px; }
.lead-list.is-compact .cell--created { flex: none; order: 4; width: 122px; }
.lead-list.is-compact .cell--status select,
.lead-list.is-compact .cell--created input { width: 100%; padding: 3px 6px; font-size: 12px; }
.lead-list.is-compact .cell--closed {
  flex: none; order: 5; width: 84px; font-size: 12px; color: var(--ink-2);
  font-family: var(--font-mono);
}
.lead-list.is-compact .cell--owner {
  flex: 1 1 90px; min-width: 0; order: 6; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead-list.is-compact .lead-age { order: 90; margin-left: auto; flex: none; }
.lead-list.is-compact .save-state { order: 91; flex: none; min-width: 0; }
.lead-list.is-compact .lead-actions { order: 92; flex: none; margin: 0; gap: 12px; }

/* colour the status control by state, matching the full-view badges */
.lead-list.is-compact .lead-card[data-status="new"] .cell--status select { background: #f2f4f3; }
.lead-list.is-compact .lead-card[data-status="in_progress"] .cell--status select { background: #faf1de; }
.lead-list.is-compact .lead-card[data-status="sale"] .cell--status select { background: var(--field-wash); }
.lead-list.is-compact .lead-card[data-status="no_sale"] .cell--status select { background: var(--signal-wash); }
.lead-list.is-compact .lead-card[data-status="not_a_lead"] .cell--status select { background: #edefed; }

/* On a phone a true one-liner won't fit; drop the dates + age and keep it to
   two tidy lines (ID / platform / status, then owner). */
@media (max-width: 640px) {
  .lead-list.is-compact .lead-card { padding: 9px 12px 9px 15px; gap: 4px 10px; }
  .lead-list.is-compact .cell.cell--created,
  .lead-list.is-compact .cell.cell--closed,
  .lead-list.is-compact .lead-age { display: none; }
  .lead-list.is-compact .lead-id { flex: 1 1 6ch; width: auto; }
  .lead-list.is-compact .cell.cell--status { flex: none; width: 128px; }
  .lead-list.is-compact .lead-actions { order: 21; flex: none; margin-left: auto; }
  /* Basis ~= a full line, so the owner cell always wraps to its own row
     regardless of name length (short names were squeezing onto line 1);
     the ~108px it gives back leaves just enough for Edit / Archive beside it. */
  .lead-list.is-compact .cell.cell--owner {
    flex: 1 1 calc(100% - 108px); min-width: 0; order: 20; font-size: 11px; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

.bulk-bar[hidden] { display: none; }
.bulk-bar {
  position: sticky;
  bottom: 14px;
  z-index: 20;
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--sh-2);
}
.bulk-bar strong { font-family: var(--font-mono); }
.bulk-bar select { width: auto; background: #24384a; border-color: #3a4d5e; color: #fff; }
.bulk-bar .btn { background: var(--field); }
.bulk-bar .btn-quiet { color: #c3ccd4; }
.bulk-bar .btn-danger { background: transparent; color: #ffb199; border-color: #ffb199; }
.bulk-bar .btn-danger:hover { background: rgba(255, 177, 153, 0.14); }
.bulk-bar-field { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.bulk-sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.16); }
#bulk-state { font-size: 12px; font-family: var(--font-mono); flex-basis: 100%; }

.pager { display: flex; gap: 14px; align-items: center; margin-top: 18px; font-size: 13px; font-family: var(--font-mono); }

/* --- Tables -------------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--sh-1); }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th {
  text-align: left;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
  background: var(--line-2);
  border-bottom: 1px solid var(--line);
}
table.grid td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
table.grid tr:last-child td { border-bottom: 0; }
table.grid td.num, table.grid th.num { text-align: right; font-family: var(--font-mono); }
table.grid tfoot td, table.grid tfoot th {
  font-weight: 600;
  border-top: 2px solid var(--line);
  background: var(--line-2);
}

/* Click-to-sort headers (JS adds .is-sortable to tables it enhances). */
.grid.is-sortable thead th { cursor: pointer; }
.grid.is-sortable thead th:hover { color: var(--ink); }
.grid.is-sortable thead th:focus-visible { outline: 2px solid var(--field); outline-offset: -2px; }
.grid.is-sortable thead th::after {
  content: "↕";
  margin-left: 5px;
  font-size: 9px;
  opacity: 0.3;
}
.grid.is-sortable thead th.num::after { margin-left: 3px; }
.grid.is-sortable thead th[aria-sort="ascending"]::after { content: "↑"; opacity: 0.85; }
.grid.is-sortable thead th[aria-sort="descending"]::after { content: "↓"; opacity: 0.85; }

.more-analysis {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

/* --- Seller dashboard ------------------------------------------- */

.seller-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.seller-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--sh-1);
  color: inherit;
}
.seller-card:hover { border-color: var(--field); text-decoration: none; }
.seller-card:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.seller-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.seller-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.flag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid currentColor;
}
.flag--under-target { color: var(--signal); }
.flag--stuck { color: var(--st-in_progress); }
.flag--reopens { color: var(--reopen); }
.seller-headline { display: flex; gap: 22px; margin-bottom: 6px; }
.seller-headline .metric { margin: 0; }
.spark { width: 100%; height: 30px; display: block; margin: 8px 0 14px; }
.spark polyline {
  stroke: var(--field);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.seller-targets { display: grid; gap: 8px; margin-bottom: 12px; }
.seller-notarget { margin-bottom: 12px; font-size: 12px; }
.seller-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 16px;
  margin: 0;
  font-size: 12px;
}
.seller-stats dt { color: var(--ink-2); }
.seller-stats dd { margin: 0; font-family: var(--font-mono); color: var(--ink); }

.event-feed {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 13px;
}
.event-feed li { padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.event-feed li:last-child { border-bottom: 0; }

/* --- Trend chart (Chart.js) ------------------------------------- */

.chart {
  margin: 16px 0 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px;
  box-shadow: var(--sh-1);
}
.chart figcaption {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.chart-total {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}
.chart-toolbar { display: flex; gap: 6px; margin-top: 10px; }
.chart-toolbar .chip { padding: 4px 11px; font-size: 12px; cursor: pointer; }
.chart-canvas { position: relative; height: 300px; margin-top: 6px; }
@media (max-width: 720px) { .chart-canvas { height: 240px; } }

.chart-cohort .chart-canvas { height: 340px; }
@media (max-width: 720px) { .chart-cohort .chart-canvas { height: 300px; } }
.chart-sankey .chart-scroll { overflow-x: auto; }
.chart-sankey .chart-canvas { height: 520px; min-width: 620px; }
@media (max-width: 720px) { .chart-sankey .chart-canvas { height: 420px; } }
.sankey-legend { margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.sankey-key { display: inline-flex; align-items: center; gap: 7px; }
.sankey-swatch {
  width: 22px;
  height: 8px;
  border-radius: 2px;
  background: var(--reopen);
  opacity: 0.5;
}
.sankey-legend strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
}

/* --- Auth --------------------------------------------------------- */

.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card {
  width: 100%;
  max-width: 384px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--sh-2);
}
.auth-mark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 125%;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.auth h1 {
  margin: 16px 0 4px;
  font-family: var(--font-ui);
  font-stretch: 100%;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.auth .sub { margin-bottom: 18px; font-size: 13px; }
.pipe-mini { display: flex; height: 8px; margin: 16px 0 20px; border-radius: 99px; overflow: hidden; }
.pipe-mini i { display: block; }
.pipe-mini i:nth-child(1) { flex: 40; background: var(--st-new); }
.pipe-mini i:nth-child(2) { flex: 22; background: var(--st-in_progress); }
.pipe-mini i:nth-child(3) { flex: 46; background: var(--st-sale); }
.pipe-mini i:nth-child(4) { flex: 18; background: var(--st-no_sale); }
.pipe-mini i:nth-child(5) { flex: 8; background: var(--st-not_a_lead); }
.auth form button { width: 100%; justify-content: center; margin-top: 4px; }

@media (min-width: 720px) {
  .lead-grid {
    grid-template-columns: minmax(90px, max-content) minmax(150px, 230px) minmax(140px, 190px) minmax(90px, max-content);
    justify-content: start;
    column-gap: 32px;
  }
  .metrics { grid-template-columns: repeat(4, 1fr); }
  .range-form { grid-auto-flow: column; grid-auto-columns: max-content; align-items: end; justify-content: start; }
}