/* recruit screens. Owned by workstream B; the board, the column and the card
   shells live in css/screens.css and are shared with the ticket board. Only
   what the funnel adds is here: the filters, the calls strip, the candidate
   page and the openings list.

   Every length is a token. A pixel literal appears twice below, both times for
   a hairline or a dot that has to land on a device pixel, and both are marked. */

/* ------------------------------------------------------------ board head */
.rc-head-stats { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-bottom: var(--s-6); }

.rc-linkbtn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 36px; padding: 0 var(--s-5);
  border: var(--bw) solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
  font-size: var(--t-sm); font-weight: var(--t-semibold); text-decoration: none;
}
.rc-linkbtn:hover { background: var(--c-surface-3); border-color: var(--c-border-strong); text-decoration: none; }
.rc-linkbtn svg { width: 15px; height: 15px; }

.rc-filters {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; margin: var(--s-6) 0 var(--s-5);
}
.rc-filter {
  padding: 0 var(--s-4); height: 30px; border-radius: var(--r-full);
  border: var(--bw) solid var(--c-border); background: var(--c-surface);
  color: var(--c-text-2); font-size: var(--t-xs); font-weight: var(--t-medium);
  display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer;
}
.rc-filter:hover { background: var(--c-hover); color: var(--c-text); }
.rc-filter[aria-pressed="true"] {
  background: var(--c-accent-quiet); border-color: var(--c-accent);
  color: var(--c-text); font-weight: var(--t-semibold);
}
.rc-filter-select { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 0; }
.rc-filter-label { color: var(--c-text-3); font-size: var(--t-xs); flex: none; }
.rc-filter-select select { height: 30px; padding: 0 var(--s-4); font-size: var(--t-xs); max-width: 220px; }
.rc-filter-count { color: var(--c-text-3); font-size: var(--t-xs); font-variant-numeric: tabular-nums; flex: none; }

/* What the engine understands a column to be for, under the org's own label. */
.rc-col-role {
  padding: var(--s-3) var(--s-6) 0;
  color: var(--c-text-3); font-size: var(--t-2xs); line-height: var(--t-snug);
}

/* ---------------------------------------------------------------- cards */
.ccard-link { text-decoration: none; color: inherit; display: block; }
.ccard-link:hover .ccard, .ccard-link:focus-visible .ccard { border-color: var(--c-accent); }
.ccard[data-stale="1"] { border-color: color-mix(in srgb, var(--c-warn) 46%, var(--c-border)); }
.ccard-req { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-xs); color: var(--c-text-2); min-width: 0; }
.ccard-req svg { width: 13px; height: 13px; flex: none; }
.ccard-calls {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  background: var(--c-warn-quiet); color: var(--c-warn);
  font-size: var(--t-2xs); font-weight: var(--t-semibold);
}
.ccard-calls svg { width: 13px; height: 13px; flex: none; }

/* ----------------------------------------------------------- calls strip */
.rc-calls-section { margin: var(--s-7) 0; }
.rc-calls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.rc-calls-empty {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5) var(--s-6); margin: var(--s-6) 0;
  border: var(--bw) dashed var(--c-border); border-radius: var(--r-md);
  color: var(--c-text-3); font-size: var(--t-xs); line-height: var(--t-snug);
}
.rc-calls-empty svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.rc-call {
  display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border: var(--bw) solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface);
}
.rc-call > svg { width: 16px; height: 16px; flex: none; color: var(--c-text-3); }
.rc-call[data-overdue="1"] > svg { color: var(--c-danger); }
.rc-call[data-overdue="1"] { border-color: color-mix(in srgb, var(--c-danger) 40%, var(--c-border)); }
.rc-call-body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.rc-call-top { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; min-width: 0; }
/* A link a person taps to say they made the call. Inline-flex with a floor
   rather than a larger face, so the row still reads as a name and the target
   is the 24px a finger needs. min-width matters as much as min-height here:
   a two-letter name is 22px wide. */
.rc-call-name { font-weight: var(--t-semibold); font-size: var(--t-sm);
                display: inline-flex; align-items: center;
                min-height: 24px; min-width: 24px; }
.rc-call-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  color: var(--c-text-3); font-size: var(--t-2xs);
}
.rc-call > button { flex: none; }

/* -------------------------------------------------------- candidate page */
.rc-page-head { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: flex-start; }
.rc-page-head .page-head-text { flex: 1 1 420px; min-width: 0; }
.rc-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.rc-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0; }
.rc-actions button { flex: none; }

.rc-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.rc-grid > div { display: grid; gap: var(--s-6); min-width: 0; }
@media (max-width: 900px) { .rc-grid { grid-template-columns: 1fr; } }

.rc-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-3) var(--s-5); font-size: var(--t-xs); margin: 0; }
.rc-facts dt { color: var(--c-text-3); }
.rc-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.rc-stale { color: var(--c-warn); font-weight: var(--t-semibold); }
.rc-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }

/* The NEXT panel: every legal move, the ones you hold and the ones you do not. */
.rc-next { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.rc-next-row {
  display: flex; align-items: center; gap: var(--s-4); min-width: 0;
  padding: var(--s-4) var(--s-5);
  border: var(--bw) solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-bg);
}
.rc-next-row > svg { width: 15px; height: 15px; flex: none; color: var(--c-text-3); }
.rc-next-row[data-hold="1"] > svg { color: var(--c-accent); }
.rc-next-row[data-hold="0"] { background: var(--c-surface-2); }
.rc-next-row[data-kind="rejected"] .rc-next-label, .rc-next-row[data-kind="withdrawn"] .rc-next-label { color: var(--c-text-2); }
.rc-next-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.rc-next-label { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--t-sm); font-weight: var(--t-semibold); min-width: 0; }
.rc-next-cap { color: var(--c-text-3); font-size: var(--t-2xs); }
.rc-next-row > button { flex: none; }

/* Rounds */
.rc-round {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md); background: var(--c-bg);
}
.rc-round + .rc-round { margin-top: var(--s-4); }
.rc-round-top { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--t-sm); }
.rc-round-when { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-xs); color: var(--c-text-2); }
.rc-round-when svg { width: 13px; height: 13px; flex: none; }
.rc-round-notes { margin: var(--s-2) 0 0; font-size: var(--t-xs); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Call tasks, inline on the candidate page */
.rc-calls-inline { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.rc-call-inline { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-xs); }
.rc-call-inline > svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--c-text-3); }
.rc-call-inline[data-state="done"] > svg { color: var(--c-success); }
.rc-call-inline[data-state="skipped"] > svg { color: var(--c-warn); }
.rc-call-inline-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.rc-call-inline > button { flex: none; }

/* Mail routed for this candidate */
.rc-mail { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.rc-mail-row { display: flex; gap: var(--s-3); align-items: flex-start; min-width: 0; }
.rc-mail-row > svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--c-text-3); }
.rc-mail-row[data-status="delivered"] > svg { color: var(--c-success); }
.rc-mail-row[data-status="failed"] > svg { color: var(--c-danger); }
.rc-mail-body { min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.rc-mail-type { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--t-xs); font-weight: var(--t-medium); text-transform: capitalize; }

/* The history rail. Same shape as the ticket timeline; the dot offsets are
   device pixels on purpose, because a rail drawn on a fractional boundary
   renders two shades of grey at 125% zoom. */
.rc-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.rc-timeline::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--c-border); }
.rc-ev { position: relative; padding: 0 0 var(--s-5) var(--s-8); min-width: 0; }
.rc-ev:last-child { padding-bottom: 0; }
.rc-ev-dot {
  position: absolute; left: 6px; top: 5px; width: 12px; height: 12px;
  border-radius: var(--r-full); background: var(--c-surface-3);
  border: 2px solid var(--c-surface); box-shadow: 0 0 0 1px var(--c-border);
}
.rc-ev[data-kind="assessment"] .rc-ev-dot { background: var(--c-accent); }
.rc-ev[data-kind="interview_booked"] .rc-ev-dot { background: var(--c-warn); }
.rc-ev[data-kind="interview_outcome"] .rc-ev-dot { background: var(--c-success); }
.rc-ev[data-kind="document"] .rc-ev-dot { background: var(--c-text-3); }
.rc-ev-head { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: baseline; font-size: var(--t-xs); }
.rc-ev-what { font-weight: var(--t-semibold); min-width: 0; overflow-wrap: anywhere; }
.rc-ev-when { color: var(--c-text-3); font-size: var(--t-2xs); margin-left: auto; white-space: nowrap; }
.rc-ev-note { margin: var(--s-2) 0 0; font-size: var(--t-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
.rc-ev-detail { margin: var(--s-1) 0 0; font-size: var(--t-2xs); color: var(--c-text-3); }


/* `.dangerous` is asked for by js/form.mjs and by three screens and is defined
   by no stylesheet in the repository, so a destructive control renders exactly
   like a neutral one. Scoped here to the funnel's own controls rather than
   added to css/components.css, which belongs to the integrator; the same rule
   is wanted globally and is in the report. */
.rc-actions button.dangerous, .rc-next-row button.dangerous {
  color: var(--c-danger);
  border-color: color-mix(in srgb, var(--c-danger) 40%, var(--c-border));
}
.rc-actions button.dangerous:hover, .rc-next-row button.dangerous:hover {
  background: var(--c-danger-quiet);
  border-color: var(--c-danger);
}


/* AN ICON IN A STRETCHED BUTTON GROWS TO FILL IT, and this was found by looking
   at a 390px screenshot rather than by reasoning. `icon()` builds an <svg> with
   a viewBox and no width or height, which makes it a replaced element with no
   intrinsic size; inside `button { display: inline-flex }` it hugs its text at
   a wide viewport and shows nothing wrong, and the moment a media query gives
   the button `flex: 1 1 auto` the icon takes the entire button. There is no
   `button svg` rule anywhere in the repository, so every full width button with
   an icon in it has this; the one line that fixes it globally is in the report.
   Scoped here to the funnel's own controls in the meantime. */
.rc-actions button svg,
.rc-call button svg,
.rc-next-row button svg,
.rq-card button svg,
.rq-channel button svg,
.rq-channel-add button svg { width: 15px; height: 15px; flex: none; }

/* ------------------------------------------------------------- openings */
.rq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--s-5); }
.rq-card {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6); border: var(--bw) solid var(--c-border);
  border-radius: var(--r-lg); background: var(--c-surface); min-width: 0;
}
.rq-card[data-status="closed"], .rq-card[data-status="draft"] { background: var(--c-surface-2); }
/* nowrap, not wrap: with wrap, a long title pushes the Edit button onto a line
   of its own on one card and not on the next, so a row of cards has its control
   in two different places. The title shrinks instead. */
.rq-card-top { display: flex; align-items: flex-start; gap: var(--s-3); flex-wrap: nowrap; min-width: 0; }
.rq-card-top > .chip, .rq-card-top > button { flex: none; margin-top: 1px; }
.rq-title { flex: 1 1 auto; font-size: var(--t-md); font-weight: var(--t-semibold); line-height: var(--t-snug); min-width: 0; overflow-wrap: anywhere; }
.rq-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--c-text-2); font-size: var(--t-xs); }
.rq-meta span { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.rq-meta svg { width: 13px; height: 13px; flex: none; color: var(--c-text-3); }
.rq-desc { margin: 0; font-size: var(--t-xs); color: var(--c-text-2); line-height: var(--t-snug); overflow-wrap: anywhere; }
.rq-terms { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.rq-foot {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline;
  padding-top: var(--s-4); border-top: var(--bw) solid var(--c-border);
}

.rq-channels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.rq-channel {
  display: flex; gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5);
  border: var(--bw) solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface);
}
.rq-channel[data-active="0"] { background: var(--c-surface-2); color: var(--c-text-2); }
.rq-channel > svg { width: 15px; height: 15px; flex: none; color: var(--c-text-3); }
.rq-channel-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.rq-channel-label { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--t-sm); font-weight: var(--t-medium); }
.rq-channel > button { flex: none; }
.rq-channel-add { margin-top: var(--s-5); }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 640px) {
  .rc-actions button { flex: 1 1 auto; }
  .rc-facts { grid-template-columns: 1fr; }
  .rc-facts dt { margin-top: var(--s-3); }
  .rc-filters { gap: var(--s-2); }
  .rc-filter-select select { max-width: 160px; }
  .rc-call { align-items: flex-start; }
  .rc-call > button { width: 100%; }
  .rc-next-row { flex-wrap: wrap; }
  .rc-next-row > button { width: 100%; }
  .rq-foot { flex-direction: column; gap: var(--s-2); }
}