/* RTS "New" recruiter UI component layer.
 *
 * Implements the shared design language from the Old/New review artifact
 * (qa-output/ui-design/recruiter-ui-old-new-review-20260625.html) using the existing RTS
 * palette: compact sticky record headers, internal tabs with counts, a green readiness strip,
 * a narrow right-side next-action/readiness rail, dense compact tables, and status chips.
 * Layout/hierarchy match the New mockups; colors stay on the RTS sand/navy/rust system.
 */

:root {
  --rts-ok: #2f7d52;
  --rts-ok-soft: #e9f4ec;
  --rts-warn: #9b6200;
  --rts-warn-soft: #fbf3e2;
  --rts-blocked: #a23b2a;
  --rts-blocked-soft: #f7e9e6;
  --rts-rail: #eef4ff;
  --rts-rail-line: #cdddf6;
  --rts-rail-ink: #2a4a78;
}

/* ── Compact sticky record header (Company / Job / Person) ───────────────── */
.rts-rec-header {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.85rem;
}
.rts-rec-id { min-width: 0; }
.rts-rec-id .rts-rec-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin: 0;
}
.rts-rec-id .rts-rec-sub {
  color: var(--muted);
  font-size: 1rem;
  margin-top: 0.15rem;
}
.rts-rec-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
}

/* ── Internal tab count badge (append to existing tab labels) ────────────── */
.rts-tabcount {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.35rem;
  min-width: 1.1rem;
  border-radius: 999px;
  background: rgba(36, 50, 74, 0.08);
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

/* ── Readiness strip (green) ─────────────────────────────────────────────── */
/* The status/policy bar. It was a full-width block whatever it held: the "Ready for recruiting"
   line ran 1,130px for text that ended at 603, and the off-limits box was a small control marooned
   in a page-wide frame with empty space all around it. The box now ends where its content ends. */
.rts-readiness {
  border: 1px solid #b9d6c2;
  border-left: 4px solid var(--rts-ok);
  background: var(--rts-ok-soft);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  color: var(--ink);
  width: fit-content;
  max-width: 100%;
}
.rts-readiness strong { color: var(--rts-ok); }
/* Provenance line inside the bar: who wrote the Deep Research and when. Its own line under the
   status text, quieter than it, because it qualifies the claim rather than making one. */
.rts-readiness-provenance {
  display: block;
  margin-top: 0.25rem;
  font-size: 1em;
  color: var(--muted, #6b7280);
}
.rts-readiness.is-warn {
  border-color: #e6cf9a;
  border-left-color: var(--rts-warn);
  background: var(--rts-warn-soft);
}
.rts-readiness.is-warn strong { color: var(--rts-warn); }
/* Outreach safety (REG-018): the same --rts-blocked tone .rts-chip.is-blocked already uses,
   applied to the readiness bar so an off-limits verdict reads as blocked, not merely warned. */
.rts-readiness.is-blocked {
  border-color: #e2bdb4;
  border-left-color: var(--rts-blocked);
  background: var(--rts-blocked-soft);
}
.rts-readiness.is-blocked strong { color: var(--rts-blocked); }

/* ── Two-column cockpit: main content + narrow next-action rail ──────────── */
.rts-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 0.85rem;
  align-items: start;
}
.rts-cockpit > .rts-main { min-width: 0; display: grid; gap: 0.7rem; }

/* Names the cockpit's to-do queue (Greta 2026-07-14: "Thing to work" -> to-do list).
   The list previously had no title and the column header did the naming. Matches the
   rail's h4 so the two halves of the cockpit read as one component; the margin reset
   matters because .rts-main is a grid and already supplies the gap. */
.rts-todo-title {
  margin: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
}

.rts-rail {
  border: 1px solid var(--rts-rail-line);
  background: var(--rts-rail);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
  color: var(--rts-rail-ink);
  position: sticky;
  top: 4.5rem;
}
.rts-rail h4 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rts-rail-ink);
}
.rts-rail .rts-rail-step { margin: 0.35rem 0; }
.rts-rail .rts-rail-cta {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 700;
  color: var(--rust-dark);
}

/* ── Dense compact table for related records ─────────────────────────────── */
/* SIZE TO THE CONTENT, NOT TO THE SCREEN (2026-08-05).
   This is the table Ilya actually measured on the ADIA company page: "Choose the job this search
   is for" ended at x≈332 and its Review jobs link sat at x≈1220 — ~890px of nothing between a row
   and the button that acts on it. The first layout pass fixed `table.data-grid`, which is NOT this
   component: the cockpit to-do list is a bare <table> inside .rts-dense, so it kept its full-width
   stretch and the complaint that started the whole pass went unfixed.

   The BOX shrinks to its content (the border has to hug the table, not float around it) with a
   floor so a two-row list is not a stamp, and a ceiling so a genuinely wide one still fits. */
.rts-dense {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  font-size: 1rem;
  width: fit-content;
  min-width: min(100%, 34rem);
  max-width: 100%;
}
.rts-dense table { width: 100%; border-collapse: collapse; }
.rts-dense th,
.rts-dense td {
  text-align: left;
  padding: 0.4rem 0.55rem;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.rts-dense thead th {
  border-top: 0;
  background: #f4efe6;
  color: var(--navy);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rts-dense tbody tr:hover { background: #fbf8f2; }
/* One long row was setting the width of the whole first column, so every SHORT row's action was
   pushed out to meet it — the "Contacts nobody has confirmed are still here — confirmed on a
   person's own page..." row was doing this to the two rows above it. Let the long one wrap. */
.rts-dense td:first-child { max-width: 46ch; }
.rts-dense td.rts-num { font-variant-numeric: tabular-nums; }
.rts-dense .rts-cell-strong { font-weight: 700; color: var(--navy); }

/* ── Status chips ────────────────────────────────────────────────────────── */
.rts-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 1rem; /* C152: was 0.74rem (~10 px) — Ilya: nothing under 14 px */
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.rts-chip.is-ok { color: var(--rts-ok); border-color: #b9d6c2; background: var(--rts-ok-soft); }
.rts-chip.is-warn { color: var(--rts-warn); border-color: #e6cf9a; background: var(--rts-warn-soft); }
.rts-chip.is-blocked { color: var(--rts-blocked); border-color: #e2bdb4; background: var(--rts-blocked-soft); }
.rts-chip.is-neutral { color: var(--navy); border-color: var(--line); background: #f4efe6; }

/* ── Inline action link/button used inside dense rows and the header ─────── */
.rts-actionlink {
  display: inline-block;
  border: 1px solid #cdb9a3;
  border-radius: 6px;
  padding: 0.18rem 0.5rem;
  color: var(--rust-dark);
  background: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.rts-actionlink:hover { background: #fbf8f2; }
.rts-actionlink.is-primary { background: var(--rust); border-color: var(--rust-dark); color: #fff; }
.rts-actionlink.is-primary:hover { background: var(--rust-dark); }

/* AN ACTION LINK OR STATUS CHIP NEVER CLIPS (C152). `.data-grid td` (app.css) defaults every
   plain cell to `white-space: nowrap; max-width: 22rem; overflow: hidden; text-overflow:
   ellipsis` -- right for a long, skimmable fact like a note or a URL, wrong for the one thing in
   the cell the recruiter has to read and press. C123 moved `.rts-actionlink` from 0.76rem to a
   readable 1rem so routine labels ("Update the Evaluator — inputs changed") now run past the
   22rem cap and vanished into "…" entirely -- the LinkedIn Jobs track page's Evaluator column
   (webapp/templates/candidates/search_package_linkedin_track.html), measured on DEV package 19:
   the cell's scrollWidth (369px) exceeded its clientWidth (308px) at every width tried. Any
   `.data-grid`/`.rts-dense` cell carrying one of these two components wraps inside the same
   22rem instead -- same component, same fix everywhere it appears (16 templates), not just this
   page. */
td:has(.rts-actionlink),
td:has(.rts-chip) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 900px) {
  .rts-cockpit { grid-template-columns: 1fr; }
  .rts-rail { position: static; }
  .rts-rec-header { position: static; }
}

/* ── Search profile — ready panel: read at body size, not chip size ──────────
   Ilya, 2026-09 walkthrough: "you want to read what it says in small print? Search profile
   ready. That's your search profile... you can't read this. It's too small." The profile's
   content only ever renders as deduped chips (person_workbench.html's summary_chips branch —
   the untokenized `.supporting` fallback is already body size, unchanged) or, once in a while,
   that plain paragraph. Both carried the page's small chip/eyebrow size. Bumped to 1rem — the
   page's own body size (html sets 1rem = 14px) — so the profile a recruiter reads is legible
   without a copy-paste detour. The eyebrow label above it stays small on purpose. */
#person-search-profile .badge,
#person-search-profile .supporting {
  font-size: 1rem;
}

/* B6 (Ilya, 2026-09-05 walkthrough): the "N useful signals … generated …" count line sits
   right beside those chips at the page's small, faint .muted treatment — unreadable for the
   same reason the chips were before this fix. Same page body size, and out of the muted grey:
   this line states the profile's own status, not a caption. Scoped to this one panel, where
   `.muted` is used for nothing else. */
#person-search-profile .muted {
  font-size: 1rem;
  color: var(--ink);
}