/* src/public/css/sales-reps.css — Sales Reps (docs/projects/sales-reps/BUILD.md).
 *
 * Two halves:
 *   1. The shared pieces every Sales Reps screen draws with (the owner's, the manager's, the rep's and the
 *      call), named after the approved playground's own classes with an `sr-` prefix: sr-split, sr-grid,
 *      sr-kpi, sr-list / sr-li, sr-tbl, sr-bar, sr-why, sr-note, sr-ex, sr-score, sr-acard, sr-setrow.
 *      The prefix is not taste: `.kpi`, `.row` and `.msg` already exist unscoped in the app's CSS.
 *   2. The owner's setup screens (js/sales-reps-owner.js).
 *
 * The app-shell primitives stay unprefixed and are reused, never restyled globally: .page-head, .card,
 * .card-head, .card-title, .btn, .badge badge-success|warn|fail|info|neutral, .field, .input/.select/
 * .textarea, .toggle, .avatar, .empty-block. Where a Sales Reps screen needs them to sit as the
 * playground does, the rule is scoped under .sr-area, the shell's container, so no other page moves.
 * Colours are the design tokens (css/design-tokens.css) only.
 *
 * Layout collapses on the area's own width (a container query), not the window's: beside a 248px rail
 * and a 220px column a 1440px window leaves the page about 900px, so window breakpoints would be wrong.
 * The manager (sales-reps-manager.css), rep (sales-reps-rep.css) and call (sales-call.css) screens ship
 * their own extras.
 */

/* ── 1. The area ──────────────────────────────────────────────────────────────────────────────── */

.sr-area { max-width: 1180px; container-type: inline-size; container-name: sr-area; }
.sr-area .page-head { flex-wrap: wrap; gap: 20px; margin-bottom: 22px; }
/* The words take the line when there is no room beside them, and the button drops below, as the
   playground's head does on a phone (app-shell gives the first child flex:1, which never wraps). */
.sr-area .page-head > div:first-child { flex: 1 1 360px; }
.sr-area .page-head h1 { font-size: 30px; text-wrap: balance; }
.sr-area .page-head .sub { max-width: 68ch; }
.sr-area .page-head-crumbs { margin-bottom: 8px; }
.sr-loading { padding: 48px 20px; text-align: center; color: var(--text-3); font-size: 13.5px; }

.sr-area .card { min-width: 0; }
.sr-area .card-head { padding: 15px 20px; flex-wrap: wrap; }
.sr-area .card-head h2.card-title { margin: 0; gap: 8px; }
.sr-area .card-body { padding: 16px 20px; }
/* app-shell.css gives every `.card + .card` a 14px top margin, which staggers cards that sit side by side
   in a grid. The grids space their own cards (as control-centre.css and community-spaces.css cancel it). */
.sr-grid > .card + .card, .sr-split > .card + .card, .sr-stack > .card + .card, .sr-area .card + .card { margin-top: 0; }
.sr-area h3 { font-size: 14px; font-weight: 600; margin: 0; color: var(--text); }
.sr-area .empty-block h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.sr-area .empty-block p { margin: 0 auto 18px; }
.sr-area p { margin: 0; }

/* Small type helpers, prefixed so nothing outside the area changes. */
.sr-muted { color: var(--text-3); }
.sr-small { font-size: 12.5px; }
.sr-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.sr-num { font-variant-numeric: tabular-nums; }
.sr-ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The "example" marker: the playground's sign that a number is invented. */
.sr-ex {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--warn); background: var(--warn-soft); border-radius: 6px; padding: 2px 7px; white-space: nowrap;
}

/* ── Layout ── */
.sr-grid { display: grid; gap: 16px; }
.sr-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sr-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sr-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sr-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sr-stack { display: flex; flex-direction: column; gap: 16px; }
.sr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr-between { justify-content: space-between; }
.sr-gap-top, .sr-area .card.sr-gap-top { margin-top: 16px; }   /* beats the card-margin reset above */

/* ── KPI tiles ── */
.sr-kpi { padding: 16px 18px; }
.sr-kpi .k { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.sr-kpi .v { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -.01em; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--text); }
.sr-kpi .s { font-size: 12.5px; color: var(--text-2); }

/* ── A small figure tile (playground-dialer-v0.1's .stat): the number, then what it counts. One tile for the
   rep's Dialer strip and the manager's Dialer line. ── */
.sr-stat { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sr-stat b { font-family: "Bricolage Grotesque", sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--text); }
.sr-stat span { font-size: 12px; color: var(--text-2); }

/* ── Lists ── */
.sr-list { display: flex; flex-direction: column; }
.sr-li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border-soft); min-width: 0; }
.sr-li:first-child { border-top: 0; }
.sr-li .grow { flex: 1; min-width: 0; }
.sr-li h3 { font-size: 14px; font-weight: 600; margin: 0; }
.sr-li p { font-size: 12.5px; color: var(--text-3); margin: 0; }

/* ── Tables: wrap the <table> in .sr-tbl ── */
.sr-tbl { overflow-x: auto; }
.sr-tbl table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sr-tbl th {
  text-align: left; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); font-weight: 500; padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft); white-space: nowrap;
}
.sr-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: top; color: var(--text); }
.sr-tbl tr:last-child td { border-bottom: 0; }
.sr-tick { color: var(--good); font-weight: 700; }
.sr-cross { color: var(--text-4); font-weight: 700; }

/* ── Progress bar ── */
.sr-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.sr-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

/* A small mono label between parts of a card (the playground's .lbl). */
.sr-lbl { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); padding: 12px 20px 0; }
/* A list's honest "nothing here" line, inside a card (the playground's .empty). */
.sr-empty { padding: 16px 20px; text-align: center; color: var(--text-3); font-size: 13.5px; }
.sr-li.sr-wrap { flex-wrap: wrap; }

/* ── Notes ── */
.sr-why { font-size: 12.5px; color: var(--text-3); border-top: 1px dashed var(--border); margin-top: 14px; padding-top: 10px; }
.sr-why b { color: var(--text-2); font-weight: 600; }
.sr-note { background: var(--accent-softer); border: 1px solid var(--accent-soft); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--text-2); }
.sr-note b { color: var(--text); }
.sr-warnbox { background: var(--warn-soft); border: 1px solid var(--warn-soft); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--text); }
.sr-errbox { background: var(--danger-soft); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--danger); }
.sr-li p.sr-held { color: var(--warn); margin-top: 4px; }   /* a line the promises check held, and why */
.sr-li p.sr-passed { color: var(--good); margin-top: 4px; }
.sr-area .btn[disabled] { opacity: .45; cursor: not-allowed; }   /* the app has no disabled button style; the manager and rep screens scope the same rule */
.sr-src-warn, .sr-setrow p.sr-src-warn { color: var(--warn); }   /* Where bookings come from: the source inside the protected signup flow */
.sr-asks { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }   /* the assistant's fixed questions, read-only */

/* ── Scores ── */
.sr-score { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.sr-score.hi { color: var(--good); }
.sr-score.mid { color: var(--warn); }
.sr-score.lo { color: var(--danger); }

/* ── Assist cards (the call and the reviews) ── */
.sr-acard { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.sr-acard.new { animation: sr-pop .35s ease-out; }
.sr-acard .k { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.sr-acard p { margin-top: 4px; font-size: 13.5px; }
.sr-acard .src { margin-top: 6px; font-size: 11.5px; color: var(--text-3); }
.sr-acard.answer { border-left: 4px solid var(--accent); }
.sr-acard.product { border-left: 4px solid var(--good); }
.sr-acard.unsure { border-left: 4px solid var(--warn); }
.sr-acard.next { border-left: 4px solid var(--accent-deep); }
.sr-acard.flag { border-left: 4px solid var(--danger); background: var(--danger-soft); }
.sr-acard.flag .k { color: var(--danger); }
@keyframes sr-pop { from { transform: translateY(6px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sr-acard.new { animation: none; } }

/* ── A setting row: words on the left, its switch (app-shell .toggle) on the right ── */
.sr-setrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--border-soft); }
.sr-setrow:first-child { border-top: 0; }
.sr-setrow .grow { flex: 1; min-width: 0; }
.sr-setrow h3 { font-size: 14px; font-weight: 600; margin: 0; }
.sr-setrow p { font-size: 12.5px; color: var(--text-3); margin: 0; }
/* The app's .toggle is a div; ours are buttons, so they need the button's own chrome taken off. */
.sr-area button.toggle { border: 0; padding: 0; margin-top: 2px; width: 40px; height: 22px; flex: 0 0 40px; align-self: flex-start; }
.sr-area button.toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-area button.toggle[disabled] { cursor: not-allowed; opacity: .55; }
/* A row that is always on in this version: a tick where the switch would be. */
.sr-fixed { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--good); font-weight: 600; white-space: nowrap; margin-top: 2px; }

/* ── Chips ── */
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-chip { border: 1px solid var(--border); background: var(--surface-2); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.sr-chip button { border: 0; background: transparent; color: var(--text-3); padding: 0 0 0 2px; font-size: 14px; line-height: 1; cursor: pointer; }
.sr-chip.no { background: var(--danger-soft); border-color: var(--danger-soft); color: var(--danger); }
.sr-chip.yes { background: var(--good-soft); border-color: var(--good-soft); color: var(--good); }
.sr-chip.suggest { background: var(--surface); border-style: dashed; color: var(--text-2); cursor: pointer; font-family: inherit; }
.sr-chip.suggest:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ── A row of choices (one is chosen) ── */
.sr-choice { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-choice button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-family: inherit; color: var(--text); cursor: pointer; }
.sr-choice button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }

/* A field's own error, under it (PATCH answers 400 { field, message }). */
.sr-err { font-size: 12px; color: var(--danger); }
.sr-err:empty { display: none; }

/* ── The quiet save indicator in a setup screen's head: Saving… / Saved / Not saved ── */
.sr-save { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; min-height: 20px; }
.sr-save svg { width: 14px; height: 14px; }
.sr-save[data-state="saved"] { color: var(--good); }
.sr-save[data-state="failed"] { color: var(--danger); }
.sr-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sr-save:empty { display: none; }

/* ── 2. The owner's screens ───────────────────────────────────────────────────────────────────── */

/* Team: the people list rows and the role matrix (its headers wrap: the column beside a 1.55fr list is
   narrow in the app, where a rail and a menu column sit to the left). */
.sr-person { flex-wrap: wrap; }
.sr-person .grow { min-width: 180px; }   /* on a phone the badges drop under the name rather than squeeze it */
.sr-person .avatar { width: 34px; height: 34px; flex: 0 0 34px; font-size: 12px; }
.sr-person-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.sr-matrix th, .sr-matrix td { padding: 10px 4px; }
.sr-matrix th:first-child, .sr-matrix td:first-child { padding-left: 16px; min-width: 150px; }
.sr-matrix th:not(:first-child) { white-space: normal; text-align: center; }
.sr-matrix td:not(:first-child) { text-align: center; }

/* Calls and phone number: the number line and its checklist */
.sr-number { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 16px; color: var(--text); }
.sr-checks { border: 1px solid var(--border-soft); border-radius: 12px; margin-top: 12px; }
.sr-checks .sr-li { padding: 10px 14px; }
.sr-why-list { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.sr-why-list b { color: var(--text); }

/* Booking page: the public link */
.sr-link { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--accent-deep); word-break: break-all; }

/* Booking assistant: the four voices */
.sr-voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sr-voices button { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 10px 12px; text-align: left; font-size: 13px; font-family: inherit; color: var(--text); cursor: pointer; }
.sr-voices button.on { border-color: var(--accent); background: var(--accent-softer); }
.sr-voices button span { display: block; font-size: 12px; color: var(--text-3); }

/* Training: the module list's numbers */
.sr-step-n { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--text-3); min-width: 1.5em; }

/* Small buttons, as the playground's .btn-sm (the app's own rule in sales-pipeline.css sets the padding). */
.sr-area .btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }

/* The area's inputs: app-shell's .input/.select/.textarea, sized as the playground's .inp */
.sr-area .input, .sr-area .select, .sr-area .textarea { padding: 10px 12px; border-color: var(--border-strong); }
.sr-area .field { min-width: 0; }
.sr-span-all { grid-column: 1 / -1; }

/* ── Narrow (the area's width, not the window's) ── */
/* Your sales team (playground v0.4 ownerTeam4): a person's row, its meta line, and the controls beside it. */
.sr-tm-row { align-items: flex-start; flex-wrap: wrap; }
.sr-tm-row .grow { min-width: 200px; }
.sr-tm-row .avatar { width: 34px; height: 34px; flex: 0 0 34px; font-size: 12px; }
.sr-tm-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.sr-tm-meta span { white-space: nowrap; }
.sr-tm-meta .sr-mono { font-size: 12px; }
.sr-tm-side { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.sr-tm-role { width: auto; min-width: 0; padding: 5px 8px; font-size: 12.5px; height: auto; }
.sr-tm-take { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.sr-tm-owner { background: var(--accent-softer); }
.sr-av-sm { width: 30px; height: 30px; flex: 0 0 30px; font-size: 11px; }
.sr-gap-x { margin: 0 20px 16px; }
.sr-skel { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: sr-skel 1.4s infinite; }
@keyframes sr-skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sr-skel { animation: none; } }
/* The person sheets (CBSheet.panel): their sections, and the quiet red button that leads to the confirm. */
.sr-sheet .sr-sheet-sec { border-top: 1px solid var(--border-soft); padding-top: 12px; }
.sr-sheet .field > label { display: block; margin-bottom: 6px; }
.btn.sr-danger-ghost { color: var(--danger); border-color: var(--danger-soft); }
.btn.sr-danger-ghost:hover { background: var(--danger-soft); }
.sr-linkbtn { border: 0; background: none; padding: 0; color: var(--accent-deep); text-decoration: underline; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 4px; }
.sr-setrow p.sr-src-what { color: var(--text-2); }
.sr-setrow-wrap { flex-wrap: wrap; row-gap: 6px; }
.sr-setrow-wrap .grow { flex: 1 1 240px; }
.sr-hours-sheet .rel-editor { max-width: none; }   /* the Hours sheet: P2's editor at the 720px the panel asks for */

@container sr-area (max-width: 900px) {
  .sr-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sr-area (max-width: 760px) {
  .sr-split { grid-template-columns: minmax(0, 1fr); }
}
@container sr-area (max-width: 620px) {
  .sr-g2, .sr-g3 { grid-template-columns: minmax(0, 1fr); }
  .sr-area .page-head h1 { font-size: 25px; }
}
@container sr-area (max-width: 480px) {
  .sr-g4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sr-voices { grid-template-columns: minmax(0, 1fr); }
  .sr-li { padding: 12px 16px; }
  .sr-person-tags { width: 100%; margin-left: 0; padding-left: 46px; }
  .sr-tm-side { width: 100%; margin-left: 0; padding-left: 46px; }
  .sr-tm-meta span { white-space: normal; }
  .sr-lbl, .sr-empty { padding-left: 16px; padding-right: 16px; }
  .sr-setrow { padding: 14px 16px; }
  .sr-area .card-head, .sr-area .card-body { padding-left: 16px; padding-right: 16px; }
}

/* ── View as a rep, read only (js/sales-reps.js VIEW AS; Alex, 3 Nov 2026) ─────────────────────────────────────
   The slot sits above .sr-area: the bar while a manager looks at a rep's screen (whose screen, read only, the way
   back), and the "View as a rep" button on the manager's own screens. Its own container, so it folds on its width. */
.sr-viewas-slot { max-width: 1180px; container-type: inline-size; container-name: sr-viewas; }
.sr-viewas-slot[hidden] { display: none; }
.sr-viewas-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin: 0 0 18px; padding: 12px 14px 12px 16px;
  background: var(--accent-soft); border: 1px solid var(--accent-2); border-radius: var(--radius);
}
.sr-viewas-eye {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--accent); font-size: 14px;
}
.sr-viewas-words { flex: 1 1 220px; margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--accent-deep); }
.sr-viewas-words b { font-weight: 700; }
.sr-viewas-back { flex: none; white-space: nowrap; }
.sr-viewas-pick { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.sr-viewas-open { padding: 8px 14px; font-size: 13px; }
.sr-viewas-open i { color: var(--accent); }
@container sr-viewas (max-width: 520px) {
  .sr-viewas-back { flex: 1 1 100%; justify-content: center; }
  .sr-viewas-pick { justify-content: stretch; }
  .sr-viewas-open { flex: 1 1 100%; justify-content: center; }
}