/* CleverPilot — instrument-panel light UI.
   Type: Archivo (display) / IBM Plex Sans (body) / IBM Plex Mono (data).
   The score palette is fixed by the product; UI chrome uses a deep signal teal
   so it never competes with a score chip. */

:root {
  --paper: #ECEEF0;
  --surface: #FFFFFF;
  --surface-2: #F5F7F8;
  --ink: #16191D;
  --ink-2: #5A636D;
  --ink-3: #8A939C;
  --rule: #D5DAE0;
  --rule-soft: #E4E8EB;
  --signal: #1D5A66;
  --signal-soft: #E3EDEE;

  --gold: #B0842B;
  --gold-soft: #F6EBD2;
  --green: #2C7A52;
  --green-soft: #E2F0E8;
  --amber: #C2701A;
  --amber-soft: #FAEBDC;
  --red: #B03A32;
  --red-soft: #F8E4E2;
  --grey: #8A939C;
  --grey-soft: #EDEFF1;

  --r: 5px;
  --shadow: 0 1px 2px rgba(22,25,29,.06), 0 4px 16px rgba(22,25,29,.05);
}

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

body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ---------------------------------------------------------------- brand */
.mark {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.02em;
  display: flex; align-items: center; gap: 8px;
}
.mark-glyph {
  width: 13px; height: 13px; flex: none;
  background: var(--signal);
  clip-path: polygon(0 0, 100% 38%, 38% 100%);
}

/* --------------------------------------------------------------- signin */
/*
 * `hidden` sets display:none, but any explicit display rule outranks it — so
 * .signin and .app below would both stay visible while the attribute was set.
 * This restores the attribute's meaning for every element that carries it.
 */
[hidden] { display: none !important; }

.signin { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.signin-card {
  width: 100%; max-width: 340px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 30px 28px; box-shadow: var(--shadow);
}
.signin-lede { color: var(--ink-2); margin: 6px 0 22px; font-size: 13px; }
.signin-msg { margin-top: 12px; font-size: 12.5px; color: var(--ink-2); min-height: 18px; }

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block; font-family: 'Archivo', sans-serif; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 5px; font-weight: 600;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 8px 10px;
}
.field textarea { resize: vertical; min-height: 54px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--signal); outline: none;
}

/* Input with a trailing control inside the border — the password reveal. */
.field-with-affix { position: relative; display: block; }
.field-with-affix input { padding-right: 38px; }
.affix-btn {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0 var(--r) var(--r) 0;
  color: var(--ink-3); cursor: pointer; padding: 0;
}
.affix-btn:hover { color: var(--ink-2); }
.affix-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }

.contact-card { margin-bottom: 12px; overflow: hidden; }
.contact-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--rule-soft);
  background: var(--surface-2);
}
.contact-num {
  font-family: 'IBM Plex Mono', monospace; font-size: 15px;
  font-weight: 600; color: var(--ink);
}
.contact-stats {
  display: flex; align-items: center; gap: 14px;
  font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; justify-content: flex-end;
}
.contact-calls { margin: 0; }
.contact-calls td { padding: 7px 10px; }
.contact-calls tr:hover { background: var(--surface-2); cursor: pointer; }

.bulk-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--rule-soft);
  background: var(--surface-2); font-size: 13px;
}
.bulk-all { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.bulk-all input { margin: 0; cursor: pointer; }
td.no-nav { cursor: default; }
td.no-nav input { cursor: pointer; }

.remember {
  display: flex; align-items: center; gap: 7px;
  margin: -4px 0 14px; cursor: pointer;
  font-size: 13px; color: var(--ink-2);
}
.remember input { margin: 0; cursor: pointer; }

/* -------------------------------------------------------------- buttons */
.btn {
  border: 1px solid var(--rule); background: var(--surface);
  border-radius: var(--r); padding: 7px 13px; cursor: pointer;
  font-weight: 500; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn-primary:hover { background: #17474f; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { padding: 4px 9px; font-size: 12.5px; }
.btn[disabled] { opacity: .5; cursor: default; }

/* --------------------------------------------------------------- layout */
.app { display: grid; grid-template-columns: 208px 1fr; min-height: 100vh; }

.rail {
  background: var(--surface); border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; padding: 18px 12px;
  position: sticky; top: 0; height: 100vh;
}
.rail-mark { padding: 0 8px 20px; }
.rail-links { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.rail-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: var(--r); color: var(--ink-2);
  cursor: pointer; border: none; background: none; text-align: left; width: 100%;
}
.rail-link:hover { background: var(--surface-2); color: var(--ink); }
.rail-link.active { background: var(--signal-soft); color: var(--signal); font-weight: 600; }
.rail-count {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-3);
}
.rail-foot { border-top: 1px solid var(--rule-soft); padding-top: 12px; }
.whoami { padding: 0 10px 8px; font-size: 12px; color: var(--ink-3); }
.whoami strong { display: block; color: var(--ink); font-weight: 600; font-size: 13px; }

.view { padding: 26px 30px 60px; max-width: 1400px; }

.page-head { margin-bottom: 20px; }
.eyebrow {
  font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
h1 { font-family: 'Archivo', sans-serif; font-size: 25px; letter-spacing: -.02em; font-weight: 600; }
h2 { font-family: 'Archivo', sans-serif; font-size: 16px; letter-spacing: -.01em; font-weight: 600; }
.sub { color: var(--ink-2); font-size: 13px; margin-top: 3px; }

/* ------------------------------------------------------------- controls */
.controls {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.controls select, .controls input {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 6px 9px; font-size: 13px;
}
.controls .spacer { flex: 1; }

/* --------------------------------------------------------------- tables */
.panel {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden;
}
table { width: 100%; border-collapse: collapse; }
th {
  font-family: 'Archivo', sans-serif; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule);
  background: var(--surface-2); white-space: nowrap;
}
td { padding: 9px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
.num { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }
.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------- score chips */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; border: 1px solid;
}
/* Gold is filled, everything else is outlined — form separates gold from
   amber at a glance, which hue alone does not. */
.chip.gold  { background: var(--gold); border-color: var(--gold); color: #fff; }
.chip.green { background: var(--green-soft); border-color: #BBD9C8; color: var(--green); }
.chip.yellow{ background: var(--amber-soft); border-color: #EBCBA8; color: var(--amber); }
.chip.red   { background: var(--red-soft); border-color: #E9BDB9; color: var(--red); }
.chip.grey  { background: var(--grey-soft); border-color: var(--rule); color: var(--ink-3); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.gold { background: var(--gold); }
.dot.green { background: var(--green); }
.dot.yellow { background: var(--amber); }
.dot.red { background: var(--red); }
.dot.grey { background: var(--grey); }

.flag-mark { color: var(--signal); font-weight: 700; }

/* ------------------------------------------------- SIGNATURE: call spine */
.spine-wrap {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 16px 18px 14px; margin-bottom: 18px;
}
.spine-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 11px;
}
.spine {
  position: relative; display: flex; height: 44px;
  border-radius: 3px; overflow: hidden; background: var(--grey-soft);
  border: 1px solid var(--rule);
}
.spine-seg {
  position: relative; border: none; cursor: pointer; padding: 0;
  border-right: 1px solid rgba(255,255,255,.7);
  display: flex; align-items: flex-end; min-width: 3px;
  transition: filter .12s;
}
.spine-seg:last-child { border-right: none; }
.spine-seg:hover { filter: brightness(.92); }
.spine-seg .seg-label {
  font-family: 'Archivo', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 0 6px 5px; white-space: nowrap; overflow: hidden;
  color: rgba(255,255,255,.95);
}
.spine-seg.s-0, .spine-seg.s-1 { background: var(--red); }
.spine-seg.s-2, .spine-seg.s-3 { background: var(--amber); }
.spine-seg.s-4, .spine-seg.s-5 { background: var(--green); }
.spine-seg.s-na { background: var(--grey-soft); }
.spine-seg.s-na .seg-label { color: var(--ink-3); }

.playhead {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--ink); pointer-events: none; transition: left .1s linear;
}
.spine-axis {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink-3);
}
.spine-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; }
.spine-legend span { display: flex; align-items: center; gap: 5px; color: var(--ink-2); }

/* ----------------------------------------------------------- call detail */
.detail-grid { display: grid; grid-template-columns: 1fr 400px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .detail-grid { grid-template-columns: 1fr; } }

.transcript { max-height: 640px; overflow-y: auto; padding: 4px; }
.utt {
  display: grid; grid-template-columns: 52px 66px 1fr; gap: 10px;
  padding: 6px 8px; border-radius: 3px; cursor: pointer; align-items: baseline;
}
.utt:hover { background: var(--surface-2); }
.utt.active { background: var(--signal-soft); }
.utt.evidence { box-shadow: inset 2px 0 0 var(--signal); }
.utt-time { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-3); }
.utt-role {
  font-family: 'Archivo', sans-serif; font-size: 9.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
}
.utt-role.rep { color: var(--signal); }
.utt-role.prospect { color: var(--gold); }
.utt-role.gatekeeper { color: var(--ink-2); }
.utt-role.unknown { color: var(--ink-3); }
.utt-text { font-size: 13.5px; }

.section-card { border-bottom: 1px solid var(--rule-soft); }
.section-card:last-child { border-bottom: none; }
.section-head {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px;
  cursor: pointer; width: 100%; background: none; border: none; text-align: left;
}
.section-head:hover { background: var(--surface-2); }
.section-order {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-3);
  width: 15px; flex: none;
}
.section-name { font-weight: 600; flex: 1; font-size: 13.5px; }
.section-score { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 13px; }
.section-body { padding: 0 14px 14px 38px; }
.section-body p { font-size: 13px; color: var(--ink-2); margin-bottom: 9px; }
.rec {
  background: var(--signal-soft); border-left: 2px solid var(--signal);
  padding: 9px 11px; border-radius: 0 3px 3px 0; font-size: 13px; margin-bottom: 10px;
}
.rec strong {
  display: block; font-family: 'Archivo', sans-serif; font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--signal); margin-bottom: 3px;
}

.evidence-links { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.ev-link {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  border: 1px solid var(--rule); border-radius: 3px; padding: 2px 6px;
  background: var(--surface); cursor: pointer; color: var(--ink-2);
}
.ev-link:hover { border-color: var(--signal); color: var(--signal); }

.badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.badge {
  font-size: 11.5px; padding: 3px 8px; border-radius: 3px;
  background: var(--surface-2); border: 1px solid var(--rule); color: var(--ink-2);
}
.badge.warn { background: var(--red-soft); border-color: #E9BDB9; color: var(--red); }
.badge.note { background: var(--amber-soft); border-color: #EBCBA8; color: var(--amber); }

/* ---------------------------------------------------------- note composer */
.note-box {
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 11px; background: var(--surface-2); margin-top: 10px;
}
.assess { display: flex; gap: 5px; margin-bottom: 9px; }
.assess button {
  flex: 1; border: 1px solid var(--rule); background: var(--surface);
  border-radius: 3px; padding: 5px; cursor: pointer; font-size: 12.5px;
}
.assess button.on { background: var(--signal); border-color: var(--signal); color: #fff; }
.note-more { display: none; }
.note-more.open { display: block; }
.note-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.note-row label { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 5px; }

.note-item {
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 10px 11px; margin-bottom: 8px; background: var(--surface);
}
.note-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: var(--ink-3); margin-bottom: 5px;
}
.note-assess {
  font-family: 'Archivo', sans-serif; font-size: 9.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
}
.note-assess.agree { color: var(--green); }
.note-assess.partial { color: var(--amber); }
.note-assess.disagree { color: var(--red); }

/* ------------------------------------------------------------ rep coach */
.coach-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--signal); border-radius: var(--r);
  padding: 20px 22px; margin-bottom: 18px;
}
.coach-card .eyebrow { color: var(--signal); }
.coach-tip {
  font-family: 'Archivo', sans-serif; font-size: 19px; line-height: 1.4;
  letter-spacing: -.01em; margin-top: 7px; font-weight: 500;
}
.coach-from { margin-top: 9px; font-size: 12.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- misc */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
.stat {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 13px 15px;
}
.stat-val { font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 600; }
.stat-lbl {
  font-family: 'Archivo', sans-serif; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 2px; font-weight: 600;
}

.bar-track { height: 6px; background: var(--grey-soft); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--signal); }

.empty { padding: 46px 20px; text-align: center; color: var(--ink-2); }
.empty h2 { margin-bottom: 6px; }
.empty p { font-size: 13px; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 9px 16px; border-radius: var(--r);
  font-size: 13px; z-index: 100; box-shadow: var(--shadow);
}

.audio-bar {
  display: flex; align-items: center; gap: 10px; margin-top: 11px;
  padding-top: 11px; border-top: 1px solid var(--rule-soft);
}
.audio-bar audio { flex: 1; height: 32px; }

.section-list-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}

.inline-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  /*
   * The rail becomes a top bar. It scrolls sideways rather than wrapping,
   * because a wrapped nav pushes the content off the first screen.
   */
  .app { grid-template-columns: 1fr; }
  /*
   * A grid item defaults to min-width:auto, so anything wide inside the content
   * column stretches the column past the viewport and the whole page scrolls
   * sideways. This lets it shrink, which is what makes the rules below hold.
   */
  .app > * { min-width: 0; }
  .view { min-width: 0; max-width: 100%; overflow-x: hidden; }
  .rail {
    position: sticky; top: 0; z-index: 20;
    height: auto; flex-direction: row; align-items: center;
    gap: 4px; padding: 8px 10px;
    border-right: 0; border-bottom: 1px solid var(--rule);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  /*
   * A scrolling bar with no visible edge reads as a bar with nothing past the
   * fold. This fades the right end so it is obvious there is more to reach.
   */
  .rail::after {
    content: ''; position: sticky; right: 0; flex: 0 0 18px; align-self: stretch;
    margin-left: -18px; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--surface));
  }
  .rail-mark { padding: 0 10px 0 2px; flex-shrink: 0; font-size: 14px; }
  .rail-links { flex-direction: row; gap: 2px; margin: 0; flex-shrink: 0; }
  .rail-link {
    white-space: nowrap; padding: 7px 11px; font-size: 13.5px;
    /* Two-word labels wrapped mid-button and doubled the bar's height. */
    display: inline-flex; align-items: center; gap: 5px;
  }
  .rail-foot {
    border: 0; padding: 0; margin: 0 0 0 auto;
    display: flex; align-items: center; flex-shrink: 0;
  }
  .whoami { display: none; }

  .view { padding: 14px 12px 28px; }
  .page-head { margin-bottom: 14px; }
  .page-head h1 { font-size: 22px; }

  /*
   * Filters wrap instead of running off the right edge. Two per row at phone
   * width keeps each one wide enough to read its selected value.
   */
  .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /*
   * The search inputs carry an inline min-width that suits the desktop row but
   * forces a grid column wider than the screen. Overriding it here leaves the
   * desktop layout alone.
   */
  .controls select, .controls input:not([type="checkbox"]) {
    width: 100%; min-width: 0 !important;
  }
  /* Search and the skipped toggle each take a full row. */
  .controls input:not([type="checkbox"])[placeholder],
  .controls > label { grid-column: 1 / -1; }
  /* The toggle is a label wrapping a checkbox — keep them on one line. */
  .controls > label {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; margin: 2px 0;
  }
  .controls > label input { width: auto; flex: 0 0 auto; }
  .controls .spacer { display: none; }

  /*
   * Tables carry nine columns, which will never fit. Rather than shrink them
   * to illegibility, each row becomes a stacked block: the columns that carry
   * the decision (when, contact, score, status) are shown with their headings,
   * and the rest are hidden. The header row goes with them.
   */
  .panel table thead { display: none; }
  .panel table, .panel tbody, .panel tr, .panel td { display: block; width: 100%; }
  .panel tbody tr {
    position: relative;
    padding: 11px 12px 11px 30px;
    border-bottom: 1px solid var(--rule-soft);
  }
  .panel tbody tr:last-child { border-bottom: 0; }
  .panel tbody td {
    padding: 1px 0; border: 0; text-align: left !important;
    font-size: 13.5px;
  }
  /* The colour dot sits in the gutter rather than taking a row of its own. */
  .panel tbody td:first-child {
    position: absolute; left: 10px; top: 13px; width: auto; padding: 0;
  }
  /* Label each value, since the header row is gone. */
  .panel tbody td[data-label]::before {
    content: attr(data-label) ' ';
    color: var(--ink-3); font-size: 11px;
    text-transform: uppercase; letter-spacing: .06em;
    margin-right: 5px;
  }
  .panel tbody td.m-hide { display: none; }
  .panel tbody td.m-strong { font-weight: 600; font-size: 15px; margin-bottom: 2px; }

  .bulk-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .bulk-bar .spacer { display: none; }

  .contact-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .contact-stats { justify-content: flex-start; }

  .stat-row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .inline-form { grid-template-columns: 1fr; }
  .signin-card { max-width: 100%; padding: 24px 20px; }

  /* Audio and any wide block scroll inside themselves, never the page. */
  .audio-bar { flex-wrap: wrap; gap: 8px; }
  audio { width: 100%; }
}

@media (max-width: 420px) {
  .rail-mark span:not(.mark-glyph) { display: none; }
  .view { padding: 12px 10px 24px; }
}