/* css/sales-reps-about.css — Sales Reps: "About them" (js/sales-reps-about.js), the panel the manager and the rep open on
   a booking. After sales-reps.css. */

.sra { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; color: var(--text); }
.sra-sec { padding: 14px 0; border-top: 1px solid var(--border); }
.sra-sec:first-child { border-top: 0; padding-top: 2px; }
.sra-sec h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.sra-note { font-weight: 400; font-size: 12.5px; color: var(--text-3); }
.sra-blank { color: var(--text-3); font-style: italic; }
.sra-dl { display: grid; grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.sra-dl dt { color: var(--text-2); font-size: 13px; }
.sra-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .sra-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .sra-dl dd { margin-bottom: 8px; } }
.sra a { color: var(--accent-deep); text-decoration: underline; overflow-wrap: anywhere; }
.sra-quote { margin: 4px 0 10px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 8px 8px 0; white-space: pre-wrap; }
.sra-made { margin: -4px 0 10px; font-size: 12.5px; color: var(--text-3); }
.sra-said + .sra-said { margin-top: 6px; }
.sra-facts { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.sra-found { margin-top: 10px; }
.sra-found p { margin: 2px 0; overflow-wrap: anywhere; }

/* The fit: the number, what it means, every point and its reason. */
.sra-fit { padding-top: 2px; }
.sra-fit-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.sra-fit-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }
.sra-score {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  font-size: 20px; font-weight: 700; background: var(--surface-2); color: var(--text);
}
.sra-fit-head.strong .sra-score { background: color-mix(in srgb, var(--good) 22%, var(--surface)); color: var(--good); }
.sra-fit-head.possible .sra-score { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent-deep); }
.sra-fit-head.out .sra-score { background: var(--danger-soft); color: var(--danger); font-size: 15px; }
.sra-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sra-reasons li { display: flex; gap: 10px; align-items: baseline; }
.sra-pts { flex: 0 0 38px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.sra-reasons li.up .sra-pts { color: var(--good); }
.sra-reasons li.down .sra-pts { color: var(--danger); }
.sra-reasons li.flat .sra-pts { color: var(--text-3); }
.sra-unknown { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 12%, var(--surface)); font-size: 13px; }