/* Offers: what a cabinet sells, the needs of companies, letters by offer, the company check, the Abyss format. Same look as the other screens; only what is new here. */
.of .of-ta { width: 100%; min-height: 96px; resize: vertical; font: inherit; }
.of .form-row.stack { align-items: stretch; }
.of .form-row small { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.of h3 { margin: 18px 0 6px; font-size: 16px; }
.of-tabs { margin: 8px 0 14px; }
.of-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.of-note { margin: 6px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--cobalt-soft); font-size: 14.5px; line-height: 1.45; }
.of-note b { display: block; margin-bottom: 2px; }
.of-note.bad { background: var(--brick-soft); color: var(--brick); }
.of-busy { margin: 10px 0; padding: 12px 14px; border-radius: 14px; background: var(--amber-soft); color: var(--amber-ink); font-size: 14.5px; }
.of-card, .of-co { margin: 0 0 12px; padding: 14px; border-radius: 16px; background: var(--surface); display: grid; gap: 6px; }
.of-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.of-h b { font-size: 16px; }
.of-s { color: var(--ink-2); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.of-s.dim, .dim { color: var(--ink-3, var(--ink-2)); }
.of-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--sunk); color: var(--ink-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
.of-chip.good { background: var(--moss-soft); color: var(--moss); }
.of-chip.warn { background: var(--amber-soft); color: var(--amber-ink); }
.of-chip.bad { background: var(--brick-soft); color: var(--brick); }
.of-chip.need-0, .of-chip.need-1 { background: var(--sunk); color: var(--ink-2); }
.of-chip.need-2 { background: var(--amber-soft); color: var(--amber-ink); }
.of-chip.need-3 { background: var(--moss-soft); color: var(--moss); }
.of-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.of-apply { display: inline-flex; gap: 6px; align-items: center; }
.of-apply select { min-width: 140px; max-width: 220px; height: 34px; }
.of-check { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.of-check input[type=checkbox] { width: 20px; height: 20px; flex: none; }
.of-fact-row { display: grid; grid-template-columns: 2fr 1.4fr auto auto; gap: 8px; align-items: center; padding: 10px 14px; }
.of-fact-row + .of-fact-row { border-top: 1px solid var(--line); }
.of-co .of-need { font-size: 14.5px; line-height: 1.45; }
.of-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.of-fact { padding: 3px 10px; border-radius: 10px; background: var(--sunk); font-size: 13px; line-height: 1.35; }
.of-fact small { color: var(--ink-2); }
.of-person { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.of-person > .of-check { flex: 1 1 220px; }
.of-person > .of-kit { flex: 1 1 100%; }
.of-kit { font-size: 14px; }
.of-kit summary { cursor: pointer; color: var(--cobalt-ink); }
.of-kit pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 2px 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--sunk); font: inherit; font-size: 13.5px; line-height: 1.45; }
.of-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.of-sec { display: grid; gap: 4px; margin-top: 6px; }
.of-item { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.of-how { margin: 6px 0 10px; padding-left: 22px; font-size: 14.5px; line-height: 1.5; }
.of-cmd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--sunk); }
.of-cmd code { flex: 1 1 260px; overflow-wrap: anywhere; font-size: 13.5px; }
@media (max-width: 640px) { .of-fact-row { grid-template-columns: 1fr; } .of-two { grid-template-columns: 1fr; } }
/* the grade chip on the leads list (A+ to D, from the three scores) */
.crm-grade { display: inline-grid; place-items: center; min-width: 28px; height: 24px; margin-right: 6px; padding: 0 5px; border-radius: 7px; font: 700 13px var(--text); background: var(--sunk); color: var(--ink-2); }
.crm-grade.g-Ap, .crm-grade.g-A { background: var(--moss-soft); color: var(--moss); }
.crm-grade.g-B { background: var(--cobalt-soft); color: var(--cobalt-ink); }
.crm-grade.g-C { background: var(--amber-soft); color: var(--amber-ink); }