/* The growth desk: the grade, the checklist dots, Research > Pipeline and its keys (crm/README.md, "The growth desk").
   Every view loads this file (index.html, before last.css), so a grade and the dots look the same on a card, in a file and
   in Next steps. Tokens only, in the mono palette: a mark says how strong it is with its weight, never with a new hue. */

/* ===== The grade: the fit letter and the timing number ("A1") ===== */
/* A small mono pill. A1, A2 and B1 read strongest (solid ink), A3, B2 and C1 have an ink edge, B3 and C2 a quiet edge, and
   C3 is the quietest (a dashed edge). The title explains the letter and the number. */
.grade { display: inline-grid; place-items: center; flex: none; min-width: 26px; height: 20px; padding: 0 5px; border: 1px solid var(--edge); border-radius: 5px;
  color: var(--ink-2); font: 500 11px/1 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; cursor: help; }
.grade-a1, .grade-a2, .grade-b1 { border-color: var(--ink); background: var(--ink); color: var(--ground); }
.grade-a3, .grade-b2, .grade-c1 { border-color: var(--ink-2); color: var(--ink); }
.grade-b3, .grade-c2 { border-color: var(--line-2); color: var(--muted); }
.grade-c3 { border-style: dashed; border-color: var(--field-edge); color: var(--muted); }

/* ===== The checklist: five dots and "3 of 5" ===== */
/* A filled dot is a point that is done; an open circle is one that is missing (the label of the dots names them). */
.cdots { display: inline-flex; flex: none; align-items: center; gap: 3px; min-width: 0; }
.cdot { flex: none; width: 7px; height: 7px; border: 1px solid var(--field-edge); border-radius: 50%; }
.cdot.is-on { border-color: var(--ink); background: var(--ink); }
.cdots-n { margin-left: 5px; color: var(--muted); font: 500 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== The keys of a list of cards (This week, Pipeline; js/research.js researchKey) ===== */
/* The focused card has the ring of the page, laid on its own edge (one frame, not two). Its buttons show their key caps,
   only for a keyboard and a fine pointer. */
.find-stack > [data-nav]:focus { outline: 0; }
.find-stack > [data-nav]:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-radius: var(--r-lg); box-shadow: 0 0 0 4px var(--accent-soft); }
/* A key cap is a small badge at the upper right of its control, out of the flow: it never widens a button, wraps a row or
   moves a card, so nothing jumps when it shows and a click lands where the pointer is. On an outline button it sits on
   the corner; a quiet button has room in its padding; a link has none, so its badge sits above the end of the words.
   Letters are in the sans face, so the O never reads as a zero. */
.kcap { display: none; }
.btn:has(> .kcap), .link:has(> .kcap) { position: relative; }
.btn .kcap, .link .kcap { position: absolute; top: -9px; right: -9px; z-index: 2; min-width: 18px; height: 18px; margin: 0; padding: 0 4px;
  font: 500 10px/1 var(--sans); box-shadow: none; pointer-events: none; }
.btn-ghost .kcap { top: -8px; right: -2px; }
.link .kcap { top: -15px; right: -14px; }
@media (hover: hover) and (pointer: fine) {
  [data-nav]:focus-visible .kcap, [data-nav]:has(:focus-visible) .kcap, .plcard:hover .kcap { display: inline-grid; }
}
/* A quiet line of the keys at the right of a page head: "J K move", "1 keep", then "? all keys". */
.key-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; color: var(--muted); font: 400 var(--t-xs) var(--sans); }
.key-hint > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.key-hint kbd { min-width: 18px; height: 18px; padding: 0 4px; font: 500 10px/1 var(--sans); box-shadow: none; }
.key-hint-all { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font: 400 var(--t-xs) var(--sans); }
.key-hint-all:hover { color: var(--ink); }
/* The keyboard help (js/settings.js): the group Research under Actions. */
.keys .label.keys-gap { margin-top: 24px; }

/* ===== Research > Pipeline ===== */
/* The way a prospect goes: "Found · 7 to review", then the pipeline, then "On the board · 2". One quiet line under the tabs. */
.plflow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 16px; font: 400 var(--t-sm) var(--sans); }
.plflow-step { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.plflow-step .label { font: 400 var(--t-sm) var(--sans); }
.plflow-step .label::after { content: " ·"; }
.plflow-step b { font: 500 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; }
a.plflow-step:hover b { text-decoration: underline; text-underline-offset: 3px; }
.plflow-step.is-here b { font-weight: 600; }
.plflow-arrow { display: inline-grid; place-items: center; color: var(--faint); }

/* Four lanes with the look of the board (board.css .board and .col), from the first research to the first touch. The dot of a
   lane gets darker as a prospect gets closer to a first touch; the lane of Claude has a ring: it waits on Claude. */
.board-pl { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
.col-pl-research { --c: var(--edge); }
.col-pl-researching .col-head::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.col-pl-prepare { --c: var(--muted); }
.col-pl-ready { --c: var(--ink); }
/* The line about a lane sits right under its cards, so the first cards of the four lanes start at one height. */
.col-pl .col-cards { flex: none; }
.col-note { margin: 10px 4px 2px; color: var(--muted); font: 400 var(--t-xs) var(--sans); }
.col-fold { display: none; }
/* A card: the name (a link that covers the card) and the grade, the reason in one or two lines, then the dots and the one action.
   The foot is one line: on a narrow card the dots leave out "3 of 5" (the title and the label of the dots keep it), and on
   the narrowest the action takes its own line under the dots. Every card of a lane breaks the same way. */
.plcard { container: plcard / inline-size; }
.plcard .bcard-top { align-items: flex-start; }
.plcard .grade { position: relative; z-index: 1; margin-top: 1px; }
.plcard-why { display: -webkit-box; margin-top: 4px; overflow: hidden; color: var(--muted); font: 400 var(--t-sm) var(--sans); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.plcard-foot { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 43px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.plcard-act { position: relative; z-index: 1; flex: none; margin-left: auto; padding: 0 10px; white-space: nowrap; }
.plcard-quiet { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted); font: 500 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plcard-quiet > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plcard-quiet .cl { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
.plcard-quiet .icon, .plcard-quiet .cl { flex: none; }
@container plcard (max-width: 259px) {
  .plcard-foot .cdots-n { display: none; }
}
@container plcard (max-width: 199px) {
  .plcard-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .plcard-act { margin-left: 0; }
  .plcard-quiet { margin-left: 0; }
}
/* A card that waits for Claude has nothing to press: no fill and a dashed edge on the ground of the lane. */
.plcard.is-wait { border-style: dashed; border-color: var(--line-2); background: transparent; box-shadow: none; }
.plcard.is-wait:hover { border-color: var(--field-edge); box-shadow: none; }
/* Not now and Do not contact: the shelf of the board, below the lanes. */
.pl-shelves { display: grid; gap: 8px; margin: auto 0 24px; }
.pl-shelves .shelf { margin: 0; }
.pl-snoozed a { color: inherit; text-decoration: none; }
.pl-snoozed a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.pl-snoozed .link { font: 500 var(--t-xs) var(--sans); }
/* No prospect yet: the empty state in a quiet card. */
.pl-empty > .empty { max-width: none; margin: 16px 0 24px; padding: 40px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.pl-empty .empty-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }
.pl-empty .empty-action .link { font-weight: 500; }

/* ===== Research > Runs: the kind and the state of each run, and how Claude runs ===== */
.run-kind { color: var(--ink-2); font: 400 var(--t-sm) var(--sans); }
.t-runs .trow b { flex-wrap: wrap; row-gap: 2px; }
.run-for { min-width: 0; overflow-wrap: anywhere; }
.t-runs .run-state { font: 500 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.run-line { font-weight: 500; }
.runner-text { margin-top: 12px; color: var(--ink-2); font: 400 var(--t-sm) var(--sans); }
.runner-text + .line-plain { align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
/* The columns of Runs: the kind labels are short words now, so the room goes to For (the name and the state). */
@media (min-width: 760px) {
  .t-runs .thead, .t-runs .trow { grid-template-columns: 104px 128px minmax(0, 1fr) 112px; }
}

/* A narrow window (the rail): the lanes scroll sideways, 208px each. */
@media (max-width: 1099px) {
  .board-pl { grid-template-columns: repeat(4, minmax(208px, 1fr)); }
}
@media (max-width: 759px) {
  /* The way a prospect goes: three short columns, the label over its number. */
  .plflow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 6px; }
  .plflow-step { display: grid; align-content: center; gap: 0; min-height: 44px; white-space: normal; }
  .plflow-step .label { font-size: 12px; line-height: 16px; }
  .plflow-step .label::after { content: none; }
  .board-pl { margin-top: 0; }
  /* A lane folds from its head; the lane of Claude starts folded. */
  .col-pl .col-head { position: relative; height: 44px; }
  .col-fold { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 4px; border: 0; border-radius: var(--r-md); background: none; color: var(--muted); cursor: pointer; }
  .col-fold .icon { transition: transform .15s var(--ease); }
  .col-fold[aria-expanded="false"] .icon { transform: rotate(-90deg); }
  .col-fold:focus-visible { outline-offset: -2px; }
  .col-pl.is-folded { padding-bottom: 4px; }
  .col-pl.is-folded .col-cards, .col-pl.is-folded .col-note { display: none; }
  .plcard-act { height: 40px; }
  .pl-snoozed { grid-template-columns: minmax(0, 1fr) auto; }
  .pl-snoozed .link { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .col-fold .icon { transition: none; }
}