/* crm-prospects.css - fetch-1691: CRM > Prospecting > Prospects - the prospect record (a pursuit) and its stages.
 * Full note: docs/m3-comment-archive/crm-prospects-css.json #bb6a33d232533d75
 */

/* the stage strip: one card per stage, a filter and a drop target in one (the Pipeline's scope cards, smaller) */
.prx-strip { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: stretch; }
/* the closed stages: hidden at rest, drawn as drop targets while a row is in the air (the Closed filter card steps aside), and whenever one of them is the filter in force */
.prx-stage.prx-stage--closed { display: none; }
.prx-stage.prx-stage--closed.on, .prx-grid.is-dragging .prx-stage.prx-stage--closed { display: inline-flex; }
.prx-grid.is-dragging .prx-stage.prx-stage--group { display: none; }
.prx-stage { display: inline-flex; flex-direction: row; align-items: center; gap: var(--s-1); min-height: var(--control-height-sm); padding: 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-card); color: var(--ink); font: inherit; font-size: var(--t-sub); line-height: 1.2; white-space: nowrap; cursor: pointer; border-bottom-width: 2px; } /* a desktop-only control (the phone draws a select): 32px, the icon-button desktop size, so six cards fit the half-width pane in two rows at 1024 */
.prx-stage:hover { background: var(--wash); }
.prx-stage.on { border-bottom-color: var(--gold); font-weight: 600; }
.prx-stage.drop-hot { outline: 2px dashed var(--gold-dark); outline-offset: 2px; background: var(--wash); }
.prx-stage-n { font-size: var(--t-label); color: var(--muted); }
.prx-stage--closed { color: var(--muted); }
.prx-stage-pick, select.sel.prx-stage-pick { width: 100%; min-height: var(--control-height-touch); } /* the phone's stage selector is a 44px target (rule 16) */

/* the row in the air, and the strip while something is in the air */
.prx-row[draggable="true"] { cursor: grab; }
.prx-row.cse-dragging { opacity: .55; cursor: grabbing; }
.prx-grid.is-dragging .prx-stage:not(.drop-hot) { border-style: dashed; }
.prx-handle { color: var(--muted); margin-right: var(--s-1); }

/* the list's result note (rule 11: beside what was just touched; a dropped row has moved to another group) */
.prx-list-note { margin: var(--s-2) 0; }

/* the record pane */
.prx-stands .pr-stand { align-items: center; }
.prx-stand-door { display: inline-flex; align-items: center; gap: var(--s-1); }
.prx-next { max-width: 11rem; }
.prx-ask { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--wash); }
.prx-ask-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.prx-ask-row .sel { min-height: var(--control-height-touch); }
.prx-cant { font-size: var(--t-sub); color: var(--muted); }
.prx-stop { border-left: 3px solid var(--bad-fg); }

/* the composer: the outcome and the next date ride the second row of crm-prospecting.css's .pr-composer */
.prx-outcome { min-width: 12rem; }

/* the history: one line per event, newest first */
.prx-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.prx-hist li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-2); align-items: baseline; padding: var(--s-1) 0; border-bottom: 1px solid var(--hair); font-size: var(--t-sub); }
.prx-hist li:last-child { border-bottom: 0; }
.prx-hist-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.prx-hist-note { color: var(--ink); }
.prx-hist-who { color: var(--muted); }

/* the New prospect form */
.prx-form { display: grid; gap: var(--s-3); }
.prx-form .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s-3); }

@media (max-width: 640px) {
  .prx-hist li { grid-template-columns: 1fr; gap: 2px; }
  .prx-next { max-width: none; }
}

/* the scope card's accent in the Prospecting header (crm-prospecting.css's .wk-scope--* shape) */
.wk-scope--prospects { --pipe-accent: var(--pipe-blue); }

/* fetch-1693: Make a Lead on a qualified record (rule 9: in place; the form's grid is the New prospect form's), the Lead line, and the
   Lead's side - the "From prospecting" fact and the read-only band in the Communication Log */
.prx-lead { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--wash); margin-bottom: var(--s-3); }
.prx-lead .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--s-2) var(--s-3); }
.prx-lead-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.prx-leadfact .prx-leadfact-door { margin-left: var(--s-1); }
.prx-leadlog { margin-bottom: var(--s-3); }
.prx-leadlog .ca-history-h { margin-bottom: var(--s-1); }

/* fetch-1694: CRM > Prospecting > Rotation (crm-rotation.js) - the pool's ticks, the people, the Rotation card. Tokens only. */
.wk-row.rot-row { cursor: default; } /* a pool or people row is not a door; its tick, its state chip and its menu are */
.rot-row .wk-row-sub { white-space: normal; } /* the state, the purpose and the venues the deal matches on all show, on two lines when the pane is narrow - never cut off */
.rot-tick { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height-touch); min-height: var(--control-height-touch); margin: calc(-1 * var(--s-1)) 0; cursor: pointer; } /* the tick is a 44px target (rule 16) */
.rot-tick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* the native checkbox stays the control - keyboard, screen reader, the render's checked state - and fills the whole 44px target; .rot-box draws it */
.rot-box { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--muted); border-radius: var(--r-s); background: var(--surface-card); pointer-events: none; }
.rot-tick input:checked + .rot-box { background: var(--navy); border-color: var(--navy); }
.rot-tick input:checked + .rot-box::after { content: ""; width: .3rem; height: .6rem; margin-top: -2px; border: solid var(--surface-card); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rot-tick input:focus-visible + .rot-box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rot-tick input:disabled + .rot-box { opacity: .5; }
.rot-tick input:disabled { cursor: default; }
.rot-group-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.rot-group-h .group-label { flex: 1; min-width: 0; }
.rot-all { white-space: nowrap; }
.rot-state-door { border: 0; font: inherit; font-size: var(--t-label); cursor: pointer; }
.rot-state-door:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rot-note, .rot-progress { margin-bottom: var(--s-2); }
.rot-ask { margin: 0 0 var(--s-2); }
.rot-pane { padding: var(--s-3); }
.rot-card h3 { margin: 0 0 var(--s-2); }
.rot-card h4 { margin-bottom: var(--s-1); font-size: var(--t-sub); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rot-card-line { margin: 0 0 var(--s-2); }
.rot-list { list-style: none; margin: 0; padding: 0; }
.rot-list > li { padding: var(--s-1) 0; border-top: 1px solid var(--hair); }
.rot-list > li:first-child { border-top: 0; }
.rot-list ul { list-style: none; margin: var(--s-1) 0 0; padding: 0 0 0 var(--s-3); }
.rot-list ul li { padding: 2px 0; }
.rot-co { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: var(--control-height-sm); }
.rot-co:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rot-earlier { margin-top: var(--s-2); }
.rot-earlier summary { cursor: pointer; min-height: var(--control-height-sm); color: var(--muted); }
@media (max-width: 640px) { .rot-co { min-height: var(--control-height-touch); } .rot-all { min-height: var(--control-height-touch); } .rot-deal-now { min-height: var(--control-height-touch); } }
.rot-tick--word { min-width: 0; gap: var(--s-1); padding: 0 var(--s-1); font-size: var(--t-sub); white-space: nowrap; } /* the record's Ready to assign: the tick with its words, still a 44px row */
/* fetch-1694: a pursuit's row on Action Items' Sales board - its title is the door to the record */
.prx-ai-open { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--navy); text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: var(--control-height-sm); }
.prx-ai-open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 640px) { .prx-ai-open { min-height: var(--control-height-touch); } }