:root {
  --ink: #18263a;
  --navy: #24324a;
  --sand: #f4efe6;
  --paper: #fbf8f2;
  /* C179: white text on this fill must clear WCAG AA's 4.5:1 body-text ratio. The press audit
     measured 3.85 because the page's actual rendered primary-button color is the hardcoded
     #c9663c in franco/approach_b_styles.html (higher CSS specificity than this variable, loaded
     later in base.html's <head>) -- that file belongs to another builder, so the override below
     (`body.approach-b-page .primary-button`) makes this variable win instead of editing it.
     #b65a32 measures 4.67:1 on white (computed, not guessed) -- a small, deliberate margin above
     the 4.5 floor so it does not round back under 4.5 in another tool's rounding. */
  --rust: #b65a32;
  --rust-dark: #8f4524;
  --sage: #dce6d8;
  --line: #d9cfbf;
  --muted: #677386;
  --shadow: 0 18px 40px rgba(34, 43, 58, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(184, 93, 52, 0.08), transparent 28%),
    linear-gradient(180deg, #f7f1e8 0%, #f3ede2 100%);
}

a {
  color: var(--navy);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

input,
textarea,
select,
button {
  font: inherit;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  padding: 0;
  accent-color: var(--rust);
}

input,
textarea,
select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  background: #fffdf9;
}

.shell {
  min-height: 100vh;
  padding: 2rem;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
  min-width: 0;
}

.app-header > div {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 0.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  color: var(--rust);
}

.app-title,
h2,
h3 {
  font-family: "Fraunces", Georgia, serif;
  margin: 0;
}

.app-title {
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1;
}

.environment-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.5rem;
}

.environment-pill {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.environment-pill-production {
  background: rgba(184, 93, 52, 0.12);
  color: var(--rust-dark);
  border-color: rgba(184, 93, 52, 0.2);
}

.environment-pill-testing {
  background: rgba(255, 208, 132, 0.22);
  color: #7a4a08;
  border-color: rgba(212, 144, 44, 0.35);
}

.environment-pill-development {
  background: rgba(36, 50, 74, 0.1);
  color: var(--navy);
  border-color: rgba(36, 50, 74, 0.16);
}

.environment-pill-neutral {
  background: rgba(103, 115, 134, 0.12);
  color: var(--muted);
  border-color: rgba(103, 115, 134, 0.18);
}

.environment-database-warning {
  margin: -0.75rem 0 1.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(212, 144, 44, 0.35);
  border-radius: 12px;
  background: rgba(255, 208, 132, 0.22);
  color: #6b430b;
  font-weight: 700;
}

.page-content {
  display: grid;
  gap: 1.5rem;
}

.panel,
.auth-card {
  background: rgba(251, 248, 242, 0.95);
  border: 1px solid rgba(217, 207, 191, 0.8);
  border-radius: 22px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

/* THE CALLOUT HAD NO STYLE AT ALL (2026-09-20). `class="callout"` appears on 21 templates --
   the Semantic Search run panel, Slate Review, Messaging, the job workbench, the LinkedIn
   capture queue, follow-ups -- and carries the sentence each of those screens most wants read:
   "This search has no job in it yet. Add one before running.", "This package holds N jobs, and
   these criteria blend all of their roles into one search.", "Nothing built yet -- accept
   candidates in Slate Review first." No stylesheet defined `.callout`, so every one of them
   rendered as ordinary body text. The tell is that four templates add their own PADDING to
   `.callout` and nothing else: their authors believed a base rule existed.

   Ilya, 2026-09-19, on exactly this failure at the instance level -- the Semantic Search
   "nothing to gain by running it again" line was "very easy to overlook". That one was fixed by
   bolding it; this is the class behind it.

   Font size is inherited, never reduced (14px root, per the >= 14px floor). Nothing here sets
   `display`, so the capture queue's own inline `display: flex` banner keeps its layout and
   simply gains the box. The four templates with their own padding still win on padding, since
   a template <style> block loads after this file. */
.callout {
  background: var(--sand);
  border: 1px solid var(--line);
  border-left: 4px solid var(--rust);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  margin: 0.5rem 0;
}

.auth-environment-callout {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.9rem 0 0.65rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 1px solid transparent;
}

.auth-environment-callout .eyebrow {
  margin: 0;
  font-size: 1rem;
}

.auth-environment-callout strong {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.auth-environment-callout .database-eyebrow {
  margin-top: 0.45rem;
}

.auth-environment-callout-production {
  background: rgba(184, 93, 52, 0.1);
  border-color: rgba(184, 93, 52, 0.18);
  color: var(--rust-dark);
}

.auth-environment-callout-testing {
  background: rgba(255, 208, 132, 0.2);
  border-color: rgba(212, 144, 44, 0.35);
  color: #7a4a08;
}

.auth-environment-callout-development {
  background: rgba(36, 50, 74, 0.08);
  border-color: rgba(36, 50, 74, 0.18);
  color: var(--navy);
}

.auth-environment-callout-neutral {
  background: rgba(103, 115, 134, 0.1);
  border-color: rgba(103, 115, 134, 0.18);
  color: var(--muted);
}

.panel-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.collaborator-overview-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  align-items: start;
}

.collaborator-top-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  align-items: start;
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, rgba(36, 50, 74, 0.98), rgba(28, 38, 57, 0.95));
  color: #f9f7f2;
  border-radius: 26px;
  box-shadow: var(--shadow);
}

.hero .eyebrow {
  color: #ffb287;
}

.supporting,
.muted,
small {
  color: var(--muted);
}

.prompt-studio-page .panel .supporting,
.prompt-studio-page .panel .muted,
.prompt-studio-page .panel small,
.prompt-detail-page .panel .supporting,
.prompt-detail-page .panel .muted,
.prompt-detail-page .panel small {
  color: #3f4e64;
}

.bullhorn-review-page .panel .supporting,
.bullhorn-review-page .panel .muted,
.bullhorn-review-page .panel small {
  color: #2d3d55;
}

.bullhorn-review-page .source-evidence {
  color: #1f3350;
  font-weight: 650;
}

.bullhorn-review-page .simple-list li {
  color: #092b5f;
}

.hero .supporting,
.hero .muted {
  color: rgba(249, 247, 242, 0.9);
}

.workbench-page .shell {
  padding-top: 1.4rem;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow-x: hidden;
}

.workbench-page .page-content {
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
}

.workbench-page .page-content > * {
  min-width: 0;
  max-width: 100%;
}

.workbench-page .panel {
  padding: 1rem;
  border-radius: 8px;
  min-width: 0;
  max-width: 100%;
}

.workbench-page textarea,
.workbench-page input,
.workbench-page select,
.workbench-page a {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.workbench-page textarea {
  white-space: pre-wrap;
  word-break: break-word;
  resize: vertical;
}

.hero-panel,
.workbench-flow-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: rgba(251, 248, 242, 0.96);
  border: 1px solid rgba(217, 207, 191, 0.85);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(34, 43, 58, 0.06);
  min-width: 0;
  max-width: 100%;
}

.workbench-page h2 {
  font-size: 1.8rem;
  line-height: 1.1;
}

.workbench-page h3 {
  font-size: 1.12rem;
  line-height: 1.25;
}

.workbench-header-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.workbench-header-facts span,
.workbench-link-field,
.workbench-note-counts span,
.workbench-flow-step {
  border: 1px solid rgba(217, 207, 191, 0.8);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.86);
}

.workbench-header-facts span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  overflow-wrap: anywhere;
}

.workbench-header-facts strong,
.workbench-link-field strong {
  color: var(--muted);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.workbench-link-field {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  align-items: center;
  margin: 0.65rem 0 0;
  padding: 0.5rem 0.65rem;
  max-width: 760px;
  overflow-wrap: anywhere;
}

.workbench-compact-copy {
  max-height: 8.5rem;
  overflow: auto;
  line-height: 1.5;
}

.workbench-compact-pre {
  display: block;
  width: 100%;
  max-height: 12rem;
  overflow: auto;
  overflow-x: hidden;
  padding: 0.8rem;
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.95);
  border: 1px solid rgba(217, 207, 191, 0.8);
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.company-deep-research-scrollbox {
  min-height: 7.2rem;
  max-height: 13rem;
  line-height: 1.45;
}

.workbench-page pre {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.workbench-wrapped-textarea {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.workbench-note-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.workbench-note-counts span {
  padding: 0.35rem 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.workbench-note-counts strong {
  color: var(--navy);
  font-size: 1rem;
}

.job-overview-panel {
  display: grid;
  gap: 0.9rem;
}

.job-overview-panel .panel-header-row {
  margin-bottom: 0;
}

.job-overview-lines {
  display: grid;
  gap: 0.45rem;
}

.job-overview-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  align-items: baseline;
}

.job-overview-line span {
  min-width: 0;
}

.job-overview-line strong,
.job-description-readonly > strong {
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.job-overview-line strong {
  margin-right: 0.25rem;
}

.job-overview-source {
  overflow-wrap: anywhere;
}

.job-description-readonly {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.3rem;
}

/* No inner scrollbox. A 14rem window holding a 3,000-word job description meant a
   recruiter scrolling down the job page with the pointer over it moved the box instead
   of the page, and was held there until the box bottomed out. It is also the panel the
   "Read the whole description" link points at, so a window showing a fourteenth of it
   did not keep that link's promise. The description flows and the page scrolls once.

   Still true, and it is why §6's proposed eight-line scroller was not built (Claude 1301,
   accepted in Codex 2335). What the page needed was to be shorter, which a CLAMP does
   without a scrollport: ten lines (Ilya, 2026-08-24), then one click for the rest. The
   clamp is applied by Alpine, so with no JavaScript the description flows as it always has,
   and the click opens the WHOLE description rather than a taller window. */
.job-description-body {
  padding: 0.8rem;
  border: 1px solid rgba(217, 207, 191, 0.8);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.86);
  line-height: 1.5;
}

/* Ten lines, then one click — the shape Ilya sized on 2026-08-24, reused wherever a long block
   would otherwise push the controls below it off the screen. Deliberately NOT a scrollbox: a
   scrollport captures the page scroll under the pointer and makes "read all of it" untrue. See
   the note above .job-description-body for the incident that settled this. */
/* §10: a package's jobs as compact tiles. Same facts as the stacked rows they replace —
   readiness chip, reasons, next action — so a package with eight jobs reads at a glance instead
   of filling the screen. Collapses to one column on a narrow window rather than scrolling
   sideways. */
.linkedin-job-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 0.6rem;
  list-style: none;
  padding: 0;
}

.linkedin-job-tiles > li {
  border: 1px solid rgba(36, 50, 74, 0.12);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  background: rgba(255, 253, 249, 0.72);
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 1rem;
}

@media (max-width: 640px) {
  .linkedin-job-tiles { grid-template-columns: 1fr; }
}

.rts-ten-line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-description-body.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-source-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
  gap: 0.8rem;
  align-items: start;
}

.job-contacts-panel {
  display: grid;
  gap: 0.55rem;
}

.job-contacts-panel > strong {
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.job-contact-list {
  display: grid;
  gap: 0.45rem;
}

.job-contact-row {
  align-items: flex-start;
  border: 1px solid rgba(217, 207, 191, 0.75);
  border-radius: 8px;
  padding: 0.55rem;
  background: rgba(255, 253, 249, 0.72);
}

.job-contact-row > span {
  display: grid;
  gap: 0.1rem;
}

.job-contact-name {
  font-weight: 800;
}

.job-contact-evidence {
  font-size: 1rem;
  line-height: 1.35;
}

.semantic-count-table,
.semantic-results-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 1rem;
}

.semantic-count-table th,
.semantic-count-table td,
.semantic-results-table th,
.semantic-results-table td {
  padding: 0.5rem 0.55rem;
  border-bottom: 1px solid rgba(217, 207, 191, 0.75);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.semantic-count-table th,
.semantic-results-table th {
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.semantic-results-table .rank-col {
  width: 4.5rem;
}

.semantic-results-table .score-col {
  width: 7rem;
}

.semantic-result-signals {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.job-workbench-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.job-notes-form {
  margin-top: 0.2rem;
}

.job-tool-map {
  display: grid;
  gap: 0.75rem;
}

.job-tool-map h3 {
  margin: 0;
}

.workbench-row-action,
.workbench-readonly-action {
  margin-top: 0.45rem;
}

.workbench-note-list {
  gap: 0.5rem;
}

.workbench-note-list li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.65rem;
  padding-bottom: 0.55rem;
}

.workbench-note-list time {
  color: var(--muted);
  font-weight: 800;
  font-size: 1rem;
}

.workbench-import-note-summary {
  margin: 0.75rem 0 0;
}

.workbench-flow-panel {
  display: grid;
  box-shadow: none;
}

.workbench-flow-panel .panel-header-row {
  margin-bottom: 0;
}

.workbench-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.workbench-flow-step {
  display: grid;
  gap: 0.65rem;
  padding: 0.8rem;
  align-content: start;
}

.workbench-flow-step p {
  margin: 0;
}

.workbench-flow-step-header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.workbench-flow-step-header span {
  color: var(--rust-dark);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.workbench-artifact-panel details,
.workbench-research-details,
.workbench-manual-editor {
  display: grid;
  gap: 0.8rem;
}

.workbench-artifact-panel > details > summary,
.workbench-research-details > summary,
.workbench-manual-editor > summary {
  cursor: pointer;
  font-weight: 800;
}

.workbench-artifact-panel > details > summary span {
  display: grid;
  gap: 0.2rem;
}

.workbench-artifact-grid,
.workbench-research-details .panel-grid,
.workbench-manual-editor form {
  margin-top: 0.85rem;
}

.workbench-generate-form {
  margin: 0.25rem 0 0.35rem;
}

.workbench-page .metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.55rem;
}

.workbench-page .metric-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(217, 207, 191, 0.8);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.88);
}

.workbench-page .metric-card span {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
}

.status-chip,
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-weight: 700;
}

.status-chip {
  background: rgba(255, 255, 255, 0.14);
  color: #fff3e8;
}

.status-good {
  background: rgba(110, 187, 140, 0.18);
  color: #dff8e7;
}

.status-warn {
  background: rgba(255, 208, 132, 0.18);
  color: #fff2d9;
}

.status-neutral {
  background: rgba(255, 255, 255, 0.14);
  color: #fff3e8;
}

.badge {
  background: var(--sage);
  color: #24412f;
}

.outreach-safety-badge {
  margin-top: 0.35rem;
  max-width: 100%;
  border: 1px solid transparent;
  font-size: 1rem;
  line-height: 1.2;
  white-space: normal;
}

.outreach-safety-badge-blocked {
  border-color: rgba(148, 43, 43, 0.26);
  background: rgba(148, 43, 43, 0.14);
  color: #7f1d1d;
}

.outreach-safety-badge-review {
  border-color: rgba(164, 113, 36, 0.28);
  background: rgba(164, 113, 36, 0.16);
  color: #73460b;
}

.outreach-safety-badge-generic {
  border-color: rgba(88, 99, 112, 0.24);
  background: rgba(88, 99, 112, 0.14);
  color: #303b47;
}

/* THE hidden ATTRIBUTE MEANS HIDDEN (Codex 2691, found on the real Hull page).
   `.inline-button` sets `display: inline-flex`, and a class beats the browser's own
   `[hidden] { display: none }`. So "Cancel this search" rendered with hidden="" and DOM
   el.hidden === true, and still drew a live 144x38 button beside Update search criteria --
   a second action, on a screen whose whole design is one action, offering to cancel a search
   that was not running.

   The attribute is the mechanism RTS already uses: the server sets it from
   `screen_state.is_alive`, and the run poller toggles `cancelBtn.hidden` as a run starts and
   ends. Nothing was wrong with the contract; it was silently not enforced. This makes it
   enforced everywhere rather than patching this one button, because any element that is both
   `hidden` and styled with a display had the same defect waiting.

   Checked before making it global: every `hidden` element in the codebase is toggled through
   the property (`el.hidden = ...`), never by clearing an inline display -- the one pattern
   `!important` would have broken. `#run-job-fit-cancel` uses `style="display:none"` and no
   hidden attribute, so it is untouched. */
[hidden] { display: none !important; }

.primary-button,
.ghost-button {
  border-radius: 14px;
  padding: 0.72rem 0.95rem;
  border: 0;
  cursor: pointer;
  font-weight: 500;
  /* Root is 14px (html{font-size:14px} below), so 1rem is the 14px legibility floor, not 16px. */
  font-size: 1rem;
}

.primary-button {
  background: var(--rust);
  color: white;
  font-weight: 700;
}

.primary-button:hover {
  background: var(--rust-dark);
}

/* C179: franco/approach_b_styles.html (included on every page, after this stylesheet) hardcodes
   `.approach-b-page .primary-button { background: #c9663c; }` at specificity (0,2,0) -- equal or
   higher than the plain rules above, and later in the document, so it always won and every
   primary button rendered the uncompliant #c9663c (white text on it measured 3.85:1) no matter
   what this file said. The extra `body` type selector below raises specificity to (0,2,1) /
   (0,3,1) so THIS file's colors (the compliant --rust / --rust-dark) render, without touching
   approach_b_styles.html itself. */
body.approach-b-page .primary-button {
  background: var(--rust);
  color: white;
}

body.approach-b-page .primary-button:hover {
  background: var(--rust-dark);
}

.ghost-button {
  background: rgba(36, 50, 74, 0.08);
  color: var(--navy);
}

.hero .ghost-button {
  background: rgba(255, 255, 255, 0.14);
  color: #f9f7f2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.hero .ghost-button:hover {
  background: rgba(255, 255, 255, 0.24);
}

.primary-button.is-busy,
.ghost-button.is-busy {
  box-shadow: inset 0 0 0 1px rgba(184, 93, 52, 0.22);
  animation: pulseBusyButton 1.2s infinite ease-out;
}

.primary-button.is-busy {
  background: linear-gradient(135deg, #c56a3d, #b85d34);
  color: #fffaf4;
}

.ghost-button.is-busy {
  background: rgba(184, 93, 52, 0.16);
  color: var(--rust-dark);
}

.ghost-button.is-ready {
  background: rgba(110, 187, 140, 0.18);
  color: #255237;
  box-shadow: inset 0 0 0 1px rgba(110, 187, 140, 0.28);
}

@keyframes pulseBusyButton {
  0% {
    transform: scale(1);
    box-shadow: inset 0 0 0 1px rgba(184, 93, 52, 0.22), 0 0 0 0 rgba(184, 93, 52, 0.18);
  }
  70% {
    transform: scale(1.015);
    box-shadow: inset 0 0 0 1px rgba(184, 93, 52, 0.28), 0 0 0 10px rgba(184, 93, 52, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: inset 0 0 0 1px rgba(184, 93, 52, 0.22), 0 0 0 0 rgba(184, 93, 52, 0);
  }
}

.inline-button {
  display: inline-flex;
  align-items: center;
  /* .panel is display:grid, and a grid item stretches to its column by default — so a button that
     happens to be a DIRECT child of a panel was rendering full width. Found 2026-08-05 on the
     company directory: "Create new company" was a 1,750px bar across the whole page. A control
     named inline-button should never do that. No effect outside a grid or flex parent, so the
     buttons living in .action-row / .row-actions are untouched. */
  justify-self: start;
}

.disabled-link {
  pointer-events: none;
  opacity: 0.55;
}

.inline-form {
  margin: 0;
}

/* The global `input, textarea, select { width: 100% }` above is right for a stacked form and wrong
   for an inline one: inside a flex row a 100% select expands to the whole line, so the control that
   was meant to sit BESIDE the sentence pushed itself onto its own row and dragged the date and Save
   onto a third. Ilya, 2026-08-05, on the off-limits box: "why do we need to have a page of empty
   space again? From that little box - all around it it's empty space."

   An inline form's controls size to their content. Textareas are left alone — nobody types a note
   into an inline form. */
.inline-form select,
.inline-form input[type="text"],
.inline-form input[type="date"],
.inline-form input[type="number"],
.inline-form input[type="search"] {
  width: auto;
  max-width: 100%;
}

.top-nav {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
}

.top-nav a,
.top-nav button,
.top-nav summary,
.top-nav .nav-disabled {
  padding: 0.44rem 0.68rem;
  border-radius: 999px;
  background: rgba(36, 50, 74, 0.06);
  font-size: 1rem;
  line-height: 1.1;
}

.top-nav .nav-disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.68;
}

.top-nav a.nav-active {
  background: rgba(36, 50, 74, 0.18);
  font-weight: 700;
}

/* C179: rust means one thing -- the press to make next -- so navigation state (where the
   recruiter already is) reads as a quiet navy mark, not the loudest rust fill on the screen.
   franco/approach_b_styles.html hardcodes `.approach-b-page .top-nav a.nav-active { background:
   #b85d34; color: #fff; }` at specificity (0,3,1), later in the document than this file, so it
   always won over the rule above. The extra `body` selector here reaches (0,3,2) / (0,4,2) so
   THIS ghost-fill styling renders instead, without touching approach_b_styles.html. */
body.approach-b-page .top-nav a.nav-active,
body.approach-b-page .top-nav a.nav-active:hover {
  background: rgba(36, 50, 74, 0.08);
  color: var(--navy);
  font-weight: 800;
}

/* C179: an active tab is state, not an action -- franco/approach_b_styles.html's
   `.approach-b-page .tab-button.active` (specificity (0,3,0)) fills every active tab (Person
   page's Overview, Job page's Overview, Submission's tabs, etc.) with the same rust as a press.
   Same override technique as nav-active above. */
body.approach-b-page .tab-button.active {
  background: rgba(36, 50, 74, 0.08);
  border-color: rgba(36, 50, 74, 0.18);
  color: var(--navy);
  font-weight: 800;
}

.top-nav summary {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.top-nav summary::-webkit-details-marker {
  display: none;
}

/* C154 kept this disclosure-triangle glyph (a fold indicator, not a word the recruiter reads)
   under 14px on purpose, sized like an icon rather than the "Current RTS Pages" label it
   follows. C182 (2026-09-14, "Exception: none") raised it to the 14px floor with everything
   else in this file -- it is still just a small ▾ glyph, so the extra size costs nothing. */
.top-nav summary::after {
  content: "\25be";
  margin-left: 0.4rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--muted);
}

.nav-menu {
  position: relative;
}

.nav-menu-panel {
  position: absolute;
  /* Open RIGHTWARD from the menu item. The Admin button sits on the left of a
     wrapped nav, so anchoring the panel's right edge (right:0) pushed it off the
     left of the screen (Ilya, 2026-06-15/16: Admin menu clipped/unreadable). */
  left: 0;
  right: auto;
  top: calc(100% + 0.45rem);
  z-index: 20;
  display: grid;
  gap: 0.25rem;
  min-width: min(220px, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  padding: 0.55rem;
  border: 1px solid rgba(217, 207, 191, 0.9);
  border-radius: 14px;
  background: rgba(251, 248, 242, 0.98);
  box-shadow: var(--shadow);
}

.nav-menu:not([open]) .nav-menu-panel {
  display: none;
}

.top-nav .nav-menu-panel a {
  display: block;
  border-radius: 10px;
  background: transparent;
  padding: 0.6rem 0.7rem;
  white-space: nowrap;
}

.top-nav .nav-menu-panel a:hover,
.top-nav .nav-menu-panel a:focus {
  background: rgba(36, 50, 74, 0.08);
  text-decoration: none;
}

/* Flash messages float as a pinned toast at the top-center of the viewport so
   confirmations stay visible even when a POST redirect scrolls the page down to
   a section anchor (Ilya, 2026-06-15: "after I updated it the pill should say so").
   Backend already emits the messages; they were just rendered above the fold. */
.messages {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(480px, calc(100vw - 2rem));
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.message {
  border-radius: 14px;
  padding: 0.9rem 1rem;
  margin: 0;
  background: #eef4ec;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  pointer-events: auto;
  box-shadow: 0 10px 30px rgba(36, 50, 74, 0.2);
  border: 1px solid rgba(36, 50, 74, 0.12);
  animation: flash-slide-in 0.22s ease-out;
}

.message.is-dismissing {
  animation: flash-fade-out 0.35s ease forwards;
}

.message.error {
  background: #f9e8e4;
}

.message.warning {
  background: #fdf3e2;
}

.message-text {
  flex: 1 1 auto;
}

.message-dismiss {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0;
  opacity: 0.55;
}

.message-dismiss:hover {
  opacity: 1;
}

@keyframes flash-slide-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flash-fade-out {
  to { opacity: 0; transform: translateY(-10px); }
}

.auth-shell {
  min-height: 72vh;
  display: grid;
  place-items: center;
}

.auth-card {
  max-width: 520px;
  width: 100%;
}

.stack-form {
  display: grid;
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.form-section {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(217, 207, 191, 0.8);
  border-radius: 10px;
  background: rgba(255, 253, 249, 0.68);
}

.compact-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.checkbox-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  align-self: end;
  min-height: 3.2rem;
}

.story-format-guide code {
  display: inline;
  white-space: normal;
}

.workflow-list {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  color: var(--muted);
}

.story-snippet-preview {
  margin-top: 0.45rem;
  color: var(--ink);
  line-height: 1.5;
}

.story-snippet-featured {
  margin-top: 0.7rem;
  font-size: 1.02rem;
}

.story-library-scrollbox {
  max-height: 24rem;
  overflow-y: auto;
  padding: 0.35rem 0.8rem 0.35rem 0.45rem;
  border: 1px solid rgba(31, 48, 82, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}

.story-library-scrollbox .simple-list {
  margin: 0;
}

.story-editor-header {
  align-items: flex-start;
}

.story-save-note {
  display: grid;
  gap: 0.18rem;
  max-width: 26rem;
  margin: 0;
  border-radius: 8px;
  line-height: 1.35;
}

.story-choice-row {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.story-choice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.collaborator-story-scrollbox {
  display: grid;
  gap: 0.55rem;
  max-height: 13.5rem;
  overflow-y: auto;
  padding-right: 0.35rem;
}

.story-choice-option {
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(36, 50, 74, 0.12);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.82);
}

.story-choice-option.is-selected {
  border-color: rgba(20, 83, 136, 0.38);
  background: rgba(237, 246, 252, 0.88);
}

.story-choice-select {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
  text-align: left;
}

.collaborator-story-preview {
  margin: 0;
  font-size: 1rem;
}

.story-snippet-preview a {
  color: #145388;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.story-snippet-preview a:hover,
.story-snippet-preview a:focus {
  color: #0f3f68;
}

.story-content-warning {
  margin-top: 0.45rem;
  color: #7a4a08;
  font-weight: 800;
}

.field > span {
  font-weight: 700;
}

.error {
  color: #8b2d1f;
}

.subtle-link {
  margin-top: 1rem;
}

.action-row {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* THE RETURN CONTROL CARRIES A JOB TITLE, AND A TITLE IS NOT A BUTTON LABEL (LI-4, Codex 2754).
   Measured on the real rendered pages at 390px: `Back to Financial Engineer - Futures and Options
   Market Making` painted to 445px inside a 390px viewport. The page reported NO horizontal
   overflow, because the row was clipped rather than made reachable -- so every document-level
   overflow check passed while half the label was invisible. A bounding box passed too: the box is
   clipped to the available width and it is the TEXT that overruns it, which is why the assertion
   in `qa/measure_return_control.py` compares the text's own client rects with the viewport.

   Why here and why this specific: base.html's inline block sets `.approach-b-page .inline-button
   { white-space: nowrap; min-height: 38px; padding: 0 14px }` -- correct for every other button on
   the page, which carries a short verb. An inline <style> beats a linked sheet at equal
   specificity, so this rule adds the class to win at (0,3,0) rather than reopening that block or
   reaching for !important. Nothing else in the row changes; `.action-row` already wraps.

   The vertical padding is not decoration: with only `white-space: normal` the label wrapped to two
   lines inside a box still pinned to `min-height: 38px`, so the second line sat in the padding.
   Measured at three widths -- 390 gives 312x49 over two lines, 760 and 1440 are byte-identical to
   before at 421x38 on one line. */
.approach-b-page .inline-button.rts-return-to-job {
  white-space: normal;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  text-align: left;
}

/* AND THE UPDATE CONTROL CARRIES A MODEL NAME (lane-b wave 6, measured on the stale Job page).
   `Update Evaluator - OpenAI - Newest OpenAI (Luna)` painted x53-392 in a 375px document at
   390x844: the right edge clipped, with no horizontal recovery. It is the same defect as the
   return control directly above and it takes the same three parts -- the row already wraps
   (`.action-row` sets `flex-wrap: wrap`), so what was missing is permission for the LABEL to wrap
   and a cap that stops the button, and the form around it, from insisting on its one-line width.
   The model belongs on the button (Codex 2650: a hidden model field is how a recruiter pays for a
   model they were never shown), so the label cannot be shortened -- it has to fold. */
.approach-b-page .inline-button.rts-update-evaluator {
  white-space: normal;
  max-width: 100%;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  text-align: left;
}

/* The button's own flex item is the FORM, which shrink-to-fits its content: without this the form
   keeps the button's one-line minimum and the label never gets the chance to fold. */
.action-row > form:has(.rts-update-evaluator) {
  max-width: 100%;
  min-width: 0;
}

.action-row-compact {
  gap: 0.6rem;
  align-items: flex-start;
}

.action-row-compact .primary-button,
.action-row-compact .ghost-button {
  padding: 0.62rem 0.88rem;
}

.action-row-stable {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  width: min(100%, 620px);
}

.action-row-stable .primary-button,
.action-row-stable .ghost-button {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.action-panel-header {
  align-items: flex-start;
}

.button-emphasis {
  color: var(--navy);
  font-weight: 800;
}

.hero-actions {
  display: grid;
  gap: 0.8rem;
  justify-items: end;
}

.tutorial-page {
  min-width: 0;
}

.tutorial-page .hero {
  align-items: flex-start;
}

.tutorial-page .hero > div:first-child,
.tutorial-page .hero-actions {
  min-width: 0;
}

.tutorial-page .hero .supporting,
.tutorial-page .rts-readiness {
  max-width: 74rem;
}

.tutorial-page .hero-actions .chip-row {
  justify-content: flex-end;
}

.tutorial-first-loop-panel {
  border-left: 4px solid var(--rust);
}

.tutorial-loop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.tutorial-loop-grid .detail-drawer {
  min-width: 0;
}

.tutorial-page .simple-list {
  display: grid;
  gap: 0.65rem;
  padding-left: 1.25rem;
  margin: 0;
}

.tutorial-page ol.simple-list {
  list-style: decimal;
}

.tutorial-page ul.simple-list {
  list-style: disc;
}

.tutorial-page .simple-list li {
  display: list-item;
  padding: 0 0 0.65rem 0.35rem;
  border-bottom: 1px solid rgba(217, 207, 191, 0.55);
  line-height: 1.55;
}

.tutorial-page .simple-list li a {
  display: inline;
}

.tutorial-page .simple-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.tutorial-page .simple-list a {
  overflow-wrap: break-word;
}

.organization-builder-workspace {
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.45fr);
  gap: 1.5rem;
  align-items: start;
}

.organization-builder-rail,
.organization-builder-main {
  display: grid;
  gap: 1.5rem;
}

.organization-foundation-panel {
  background:
    linear-gradient(180deg, rgba(184, 93, 52, 0.12), rgba(255, 250, 244, 0.97));
}

.organization-divider {
  height: 1px;
  background: rgba(36, 50, 74, 0.12);
  margin: 1.15rem 0;
}

.company-primary-hidden {
  display: none;
}

.company-typeahead-results {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.45rem;
  max-height: 14rem;
  overflow: auto;
}

.company-typeahead-option {
  width: 100%;
  border: 1px solid rgba(36, 50, 74, 0.12);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.94);
  color: var(--navy);
  cursor: pointer;
  font: inherit;
  padding: 0.5rem 0.65rem;
  text-align: left;
}

.company-typeahead-option:hover,
.company-typeahead-option:focus {
  border-color: rgba(20, 83, 136, 0.45);
  background: rgba(237, 246, 252, 0.9);
}

.company-typeahead-empty {
  color: var(--muted);
  font-size: 1rem;
}

.company-research-scrollbox,
.company-source-scrollbox {
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.5;
  padding: 0.8rem;
  border: 1px solid rgba(36, 50, 74, 0.12);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.9);
}

.company-research-scrollbox {
  height: clamp(28rem, 58vh, 44rem);
  max-height: 70vh;
  line-height: 1.55;
  padding: 0.9rem 1rem;
}

.company-source-scrollbox {
  max-height: 10.5rem;
}

.company-contact-email-needed {
  margin-top: 0.25rem;
  color: var(--rust-dark);
  font-weight: 800;
}

.company-contact-email-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: end;
  margin-top: 0.65rem;
}

.company-contact-email-field {
  min-width: min(100%, 22rem);
}

.organization-job-grid .panel {
  min-height: 100%;
}

.simple-list,
.result-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.9rem;
}

.compact-list {
  gap: 0.55rem;
}

.simple-list li,
.result-row {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(217, 207, 191, 0.7);
}

.simple-list li:last-child,
.result-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.search-form {
  display: grid;
  /* C121 (Ilya, 2026-09-11): this was minmax(0, 1fr), so the field grew to the full panel
     width and its button rode along at the far edge -- on the People page, 1804px from the
     panel's own left edge. A field and its action sit together; capped at 40rem (the brief's
     "search/find box" range) so the pair sits near the label instead of spanning the screen. */
  grid-template-columns: minmax(0, 40rem) max-content;
  gap: 0.8rem;
  margin-top: 1rem;
}

.result-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.result-meta {
  display: grid;
  justify-items: end;
  color: var(--muted);
  font-size: 1rem;
}

.candidate-header {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
}

.header-lines p {
  margin: 0.45rem 0 0;
}

.source-preview {
  margin-top: 1rem;
  line-height: 1.6;
  white-space: pre-line;
}

.accent-panel {
  background: linear-gradient(180deg, rgba(184, 93, 52, 0.12), rgba(255, 248, 239, 0.95));
}

.panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* An editable-content section's header: the heading and its Show / Edit / Hide controls read
   as one phrase, immediately adjacent (Ilya's consistency ruling via Codex 2038, from the
   Data Curation walkthrough: at 1218px "Job Description" ended around x=385 and "Show" began
   around x=1100 — a 716px gap put there by .panel-header-row's space-between, which only ever
   promised the same CONTAINER, not togetherness). A deliberate local class, because the
   global .panel-header-row contract serves many unrelated screens and must not move.

   Not stacked into a column on phones: the pair wraps together only when the line genuinely
   runs out, so the controls stay beside — or directly under — the words they act on. The
   980px rule that turns .panel-header-row into a column does not know this class. */
.content-header-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 4px;
  margin-bottom: 0.55rem;
}

.content-header-row .action-row {
  margin: 0;
  flex-wrap: wrap;
  align-items: center;
}

/* The supporting sentence that used to live inside the header block keeps its reading
   width when it moves below the row. */
.content-header-row + .supporting {
  max-width: 72ch;
}

.decision-banner {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border-radius: 12px;
}

.decision-hide {
  background: rgba(184, 93, 52, 0.14);
  color: var(--rust-dark);
}

.decision-alert {
  background: rgba(193, 57, 43, 0.16);
  color: #8e241a;
}

.decision-ready {
  background: rgba(110, 187, 140, 0.18);
  color: #255237;
}

.scan-block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(217, 207, 191, 0.7);
}

.scan-status {
  border-top: 0;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  margin-top: 1rem;
}

.scan-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.scan-time {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
}

.scan-status-empty {
  background: rgba(36, 50, 74, 0.08);
  border: 1px solid rgba(36, 50, 74, 0.12);
}

.scan-status-active {
  background: rgba(184, 93, 52, 0.10);
  border: 1px solid rgba(184, 93, 52, 0.16);
}

.scan-status-complete {
  background: rgba(110, 187, 140, 0.12);
  border: 1px solid rgba(110, 187, 140, 0.18);
}

.scan-status-stale {
  background: rgba(255, 208, 132, 0.16);
  border: 1px solid rgba(255, 208, 132, 0.28);
}

.helper-tip {
  margin: 0.75rem 0 0;
}

.message-meta {
  display: grid;
  gap: 0.45rem;
  margin-top: 1rem;
}

.message-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.message-subject,
.message-body {
  border: 1px solid rgba(217, 207, 191, 0.8);
  border-radius: 16px;
  background: #fffdf9;
  padding: 1rem 1.1rem;
}

.message-body {
  white-space: pre-wrap;
  line-height: 1.65;
}

.message-input,
.message-editor {
  width: 100%;
  border: 1px solid rgba(217, 207, 191, 0.8);
  border-radius: 16px;
  background: #fffdf9;
  padding: 1rem 1.1rem;
  color: var(--ink);
}

.message-input {
  font-weight: 700;
}

.message-editor {
  min-height: 260px;
  line-height: 1.65;
  resize: vertical;
}

.rich-message-preview {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}

.rich-message-body {
  border: 1px solid rgba(85, 118, 95, 0.22);
  border-radius: 8px;
  background: #fbfff9;
  color: var(--ink);
  padding: 0.9rem 1rem;
  line-height: 1.58;
}

.rich-message-body p {
  margin: 0 0 0.8rem;
}

.rich-message-body p:last-child {
  margin-bottom: 0;
}

.rich-message-body a {
  color: #245f78;
  font-weight: 700;
}

.message-discussion-editor {
  min-height: 170px;
}

.message-discussion-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1rem;
  margin-top: 1rem;
}

.message-discussion-actions .muted {
  margin: 0;
}

.compact-chip-row {
  gap: 0.45rem;
}

.model-note {
  margin-top: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(217, 207, 191, 0.85);
  background: rgba(255, 253, 249, 0.96);
}

.model-note strong {
  display: block;
  margin-top: 0.4rem;
}

.model-note .supporting {
  margin: 0.45rem 0 0;
}

.model-catalog-status {
  margin-top: 0.5rem;
}

.copy-button {
  padding: 0.55rem 0.8rem;
  font-size: 1rem;
}

.progress-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: rgba(36, 50, 74, 0.06);
  border: 1px solid rgba(36, 50, 74, 0.08);
}

.progress-banner[hidden] {
  display: none !important;
}

.warning-banner {
  background: rgba(255, 208, 132, 0.18);
  border: 1px solid rgba(184, 93, 52, 0.22);
}

.progress-inline {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 1rem;
}

.spinner-dot {
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.2rem;
  border-radius: 999px;
  background: var(--rust);
  box-shadow: 0 0 0 0 rgba(184, 93, 52, 0.4);
  animation: pulseDot 1.2s infinite ease-out;
  flex: 0 0 auto;
}

@keyframes pulseDot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(184, 93, 52, 0.35);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 12px rgba(184, 93, 52, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(184, 93, 52, 0);
  }
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.compact-chip-row {
  margin-top: 0.85rem;
}

.summary-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: rgba(36, 50, 74, 0.08);
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
}

.tracked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.result-row-active {
  border-radius: 18px;
  background: rgba(184, 93, 52, 0.08);
  box-shadow: inset 0 0 0 1px rgba(184, 93, 52, 0.18);
}

.mini-status {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
}

.mini-status.is-done {
  background: rgba(110, 187, 140, 0.16);
  color: #2e5a3c;
}

.mini-status.is-pending {
  background: rgba(184, 93, 52, 0.12);
  color: var(--rust-dark);
}

.mini-status.is-active {
  background: rgba(184, 93, 52, 0.16);
  color: var(--rust-dark);
}

.tab-action-message {
  margin-top: 0.35rem;
}

.dialog-scrim {
  position: fixed;
  inset: 0;
  background: rgba(24, 38, 58, 0.45);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  z-index: 50;
}

.dialog-card {
  width: min(840px, 100%);
  max-height: calc(100vh - 3rem);
  overflow: auto;
  background: var(--paper);
  border: 1px solid rgba(217, 207, 191, 0.9);
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 28px 60px rgba(19, 28, 41, 0.2);
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.preset-card {
  text-align: left;
  border: 1px solid rgba(217, 207, 191, 0.9);
  border-radius: 18px;
  padding: 1rem;
  background: #fffdf9;
  cursor: pointer;
  display: grid;
  gap: 0.35rem;
}

.preset-card strong {
  font-size: 1rem;
}

.preset-card span {
  color: var(--muted);
}

.preset-card.is-active {
  border-color: rgba(184, 93, 52, 0.55);
  background: rgba(184, 93, 52, 0.08);
  box-shadow: inset 0 0 0 1px rgba(184, 93, 52, 0.2);
}

.preset-grid.is-disabled {
  opacity: 0.72;
}

.preset-card:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.checkbox-grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.3rem;
  max-height: 320px;
  overflow: auto;
  padding-right: 0.35rem;
  justify-items: stretch;
}

.checkbox-row {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: start;
  justify-content: start;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  background: rgba(36, 50, 74, 0.05);
  width: 100%;
  cursor: pointer;
}

.checkbox-row:hover {
  background: rgba(36, 50, 74, 0.08);
}

.checkbox-row input {
  margin: 0.18rem 0 0;
}

.checkbox-row span {
  display: block;
  min-width: 0;
  line-height: 1.45;
}

.summary-chip-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: none;
  cursor: pointer;
}

.summary-chip-button.is-active {
  box-shadow: inset 0 0 0 1px rgba(184, 93, 52, 0.22);
  background: rgba(184, 93, 52, 0.16);
}

.compact-collaborator-page .extension-status-chip {
  min-width: 150px;
  justify-content: center;
}

.compact-collaborator-page .extension-status-chip.is-warning {
  border-color: #e1a33a;
  color: #7a4a00;
  background: #fff7df;
}

.chip-action {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(36, 50, 74, 0.72);
}

.stack-gap-sm {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.detail-drawer {
  border: 1px solid rgba(217, 207, 191, 0.9);
  border-radius: 18px;
  padding: 0.95rem 1rem;
  background: rgba(255, 253, 249, 0.95);
}

.prompt-studio-result-banner,
.prompt-studio-next-step {
  display: grid;
  gap: 0.9rem;
  border-radius: 18px;
  padding: 1rem 1.05rem;
}

.prompt-studio-result-banner strong,
.prompt-studio-next-step strong {
  display: block;
  margin-bottom: 0.25rem;
}

.prompt-studio-result-banner-success {
  border: 1px solid rgba(110, 187, 140, 0.28);
  background: linear-gradient(180deg, rgba(110, 187, 140, 0.12), rgba(255, 253, 249, 0.96));
}

.prompt-studio-result-banner-warning {
  border: 1px solid rgba(184, 93, 52, 0.22);
  background: linear-gradient(180deg, rgba(184, 93, 52, 0.1), rgba(255, 253, 249, 0.96));
}

.prompt-studio-next-step {
  border: 1px solid rgba(36, 50, 74, 0.12);
  background:
    linear-gradient(180deg, rgba(36, 50, 74, 0.05), rgba(255, 253, 249, 0.98)),
    rgba(255, 253, 249, 0.96);
}

.prompt-studio-next-step-copy {
  display: grid;
  gap: 0.35rem;
}

.prompt-studio-next-step-actions {
  margin-top: -0.15rem;
}

.ghost-button:disabled,
.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  box-shadow: none;
}

.ghost-button:disabled {
  background: rgba(36, 50, 74, 0.06);
  color: rgba(36, 50, 74, 0.62);
}

/* Collapsed Profile-Sync tools on the collaborator page (declutter 2026-06-21):
   the search/reconcile/completion chrome stays in the DOM but sits behind a closed
   disclosure so the LinkedIn-found review flow reads clean. */
.profile-sync-tools {
  margin: 0;
}
.profile-sync-tools > .profile-sync-tools-summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 12px;
  border: 1px solid #ded8cf;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: #5d6c82;
  font-size: 1rem;
  font-weight: 750;
}
.profile-sync-tools > .profile-sync-tools-summary::-webkit-details-marker {
  display: none;
}
.profile-sync-tools > .profile-sync-tools-summary::before {
  content: "▸ ";
}
.profile-sync-tools[open] > .profile-sync-tools-summary::before {
  content: "▾ ";
}
.profile-sync-tools[open] > .profile-sync-tools-summary {
  margin-bottom: 12px;
}

.outline-details {
  border: 1px solid rgba(217, 207, 191, 0.9);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.95);
  padding: 0.9rem 1rem;
}

.outline-details summary {
  cursor: pointer;
  list-style: none;
}

.outline-details summary::-webkit-details-marker {
  display: none;
}

.structure-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.structure-summary::after {
  content: "+";
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--rust);
}

.outline-details[open] > .structure-summary::after,
.outline-details[open] summary.structure-summary::after {
  content: "-";
}

.studio-shell {
  display: grid;
  gap: 1rem;
}

.prompt-studio-intent-grid,
.prompt-studio-metric-grid {
  display: grid;
  gap: 0.8rem;
}

.prompt-studio-prompt-picker {
  min-width: 0;
}

.prompt-studio-prompt-list {
  display: grid;
  gap: 0.55rem;
  max-height: 15rem;
  overflow: auto;
  padding-right: 0.2rem;
}

.prompt-studio-prompt-card {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  border: 1px solid rgba(36, 50, 74, 0.12);
  background: rgba(255, 253, 249, 0.96);
  color: var(--navy);
  overflow-wrap: anywhere;
}

.prompt-studio-prompt-card:hover {
  background: rgba(36, 50, 74, 0.06);
  text-decoration: none;
}

.prompt-studio-prompt-card span {
  font-weight: 800;
  line-height: 1.25;
}

.prompt-studio-prompt-card small {
  line-height: 1.35;
}

.prompt-studio-selected-job-card {
  display: grid;
  gap: 0.75rem;
  border-color: rgba(255, 136, 74, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 136, 74, 0.12), rgba(255, 253, 249, 0.98) 52%),
    rgba(255, 253, 249, 0.98);
}

.prompt-studio-selected-job-card h3,
.prompt-studio-selected-job-card p {
  margin: 0;
}

.prompt-studio-selected-job-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.prompt-studio-selected-job-meta span {
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  background: rgba(36, 50, 74, 0.05);
  color: var(--navy);
  overflow-wrap: anywhere;
}

.prompt-studio-state-note {
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  font-size: 1rem;
}

.prompt-studio-state-note-ready {
  border: 1px solid rgba(110, 187, 140, 0.28);
  background: rgba(110, 187, 140, 0.12);
}

.prompt-studio-state-note-locked {
  border: 1px solid rgba(184, 93, 52, 0.2);
  background: rgba(184, 93, 52, 0.1);
}

.prompt-studio-lifecycle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.prompt-studio-saved-job-prompt,
.prompt-studio-current-prompt-card {
  display: grid;
  gap: 0.75rem;
}

.prompt-studio-radio-card-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.prompt-studio-radio-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  cursor: pointer;
}

.prompt-studio-radio-card input {
  margin-top: 0.22rem;
}

.prompt-studio-radio-card small {
  grid-column: 2;
}

.prompt-studio-selection-callout,
.prompt-studio-step-card,
.prompt-studio-library-details {
  margin-top: 1rem;
}

.prompt-studio-import-form {
  margin-top: 1rem;
}

.prompt-studio-import-actions {
  align-items: center;
}

.prompt-studio-step-card {
  display: grid;
  gap: 0.9rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(36, 50, 74, 0.12);
  background: rgba(255, 253, 249, 0.96);
}

.prompt-studio-step-header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 1rem;
  align-items: start;
}

.prompt-studio-step-copy,
.prompt-studio-step-controls {
  display: grid;
  gap: 0.45rem;
}

.prompt-studio-context-details p,
.prompt-studio-library-details p {
  margin: 0;
}

.prompt-studio-metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.studio-toolbar {
  display: grid;
  gap: 1rem;
}

.studio-grid {
  grid-template-columns: minmax(260px, 0.84fr) minmax(0, 1.16fr);
}

.studio-rail {
  display: grid;
  gap: 0.9rem;
}

.studio-preview-panel {
  display: grid;
  gap: 1rem;
}

.studio-preview-canvas {
  display: grid;
  gap: 1rem;
  border-radius: 20px;
  padding: 1rem;
  border: 1px solid rgba(217, 207, 191, 0.9);
  background:
    radial-gradient(circle at top right, rgba(184, 93, 52, 0.08), transparent 35%),
    rgba(255, 253, 249, 0.95);
}

.studio-layout-compact {
  gap: 0.7rem;
  padding: 0.85rem;
}

.studio-layout-balanced {
  gap: 1rem;
  padding: 1rem;
}

.studio-layout-editorial {
  gap: 1.15rem;
  padding: 1.15rem;
}

.studio-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem;
}

.studio-metric {
  display: grid;
  gap: 0.22rem;
  padding: 0.78rem 0.86rem;
  border-radius: 16px;
  border: 1px solid rgba(217, 207, 191, 0.85);
  background: rgba(36, 50, 74, 0.04);
}

.studio-metric strong {
  font-size: 1.12rem;
}

.studio-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.studio-preview-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.92rem 0.98rem;
  border-radius: 18px;
  border: 1px solid rgba(217, 207, 191, 0.85);
  background: #fffdf9;
}

.studio-preview-card p {
  margin: 0;
  line-height: 1.5;
}

.studio-preview-card small {
  color: var(--muted);
}

.studio-card-navy {
  box-shadow: inset 0 0 0 1px rgba(36, 50, 74, 0.08);
}

.studio-card-rust {
  box-shadow: inset 0 0 0 1px rgba(184, 93, 52, 0.12);
}

.studio-card-sage {
  box-shadow: inset 0 0 0 1px rgba(110, 187, 140, 0.14);
}

.studio-callout {
  align-items: flex-start;
}

.studio-notes .simple-list li {
  border-bottom: 0;
  padding-bottom: 0;
}

.studio-theme-overview {
  background:
    linear-gradient(180deg, rgba(36, 50, 74, 0.03), rgba(255, 253, 249, 0.98)),
    rgba(255, 253, 249, 0.95);
}

.studio-theme-navigation {
  background:
    linear-gradient(180deg, rgba(36, 50, 74, 0.05), rgba(255, 253, 249, 0.98)),
    rgba(255, 253, 249, 0.95);
}

.studio-theme-collaborator {
  background:
    linear-gradient(180deg, rgba(184, 93, 52, 0.06), rgba(255, 253, 249, 0.98)),
    rgba(255, 253, 249, 0.95);
}

.studio-theme-story_library {
  background:
    linear-gradient(180deg, rgba(110, 187, 140, 0.08), rgba(255, 253, 249, 0.98)),
    rgba(255, 253, 249, 0.95);
}

.studio-theme-review_queue {
  background:
    linear-gradient(180deg, rgba(36, 50, 74, 0.06), rgba(255, 253, 249, 0.98)),
    rgba(255, 253, 249, 0.95);
}

.studio-theme-person_workspace {
  background:
    linear-gradient(180deg, rgba(184, 93, 52, 0.05), rgba(255, 253, 249, 0.98)),
    rgba(255, 253, 249, 0.95);
}

.nested-details {
  padding: 0.8rem 0.9rem;
}

.optional-filters {
  margin: 0.2rem 0;
}

.optional-filters summary {
  font-weight: 700;
}

.import-job-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}

.import-job-choice input[type="checkbox"] {
  margin-top: 0.2rem;
}

.code-line {
  font-family: Consolas, "Courier New", monospace;
  word-break: break-all;
  display: inline-block;
  margin-top: 0.2rem;
}

.code-preview {
  display: block;
  max-height: 8.5rem;
  overflow: auto;
  padding-right: 0.35rem;
}

.prompt-link {
  text-decoration: none;
}

.prompt-link:hover strong {
  text-decoration: underline;
}

.prompt-preview {
  margin: 1rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(217, 207, 191, 0.8);
  border-radius: 18px;
  background: #fffdf9;
  white-space: pre-wrap;
  line-height: 1.6;
  max-height: 36rem;
  overflow: auto;
  font-family: Consolas, "Courier New", monospace;
  font-size: 1rem;
}

.tab-link-preview {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collaborator-status-panel,
.candidate-context-panel,
.helper-summary-panel {
  display: grid;
  gap: 0.9rem;
}

.collaborator-status-header {
  margin-bottom: 0;
}

.helper-summary-header {
  align-items: flex-start;
}

.collaborator-connection-strip {
  display: grid;
  gap: 0.8rem;
}

.collaborator-setup-panel,
.candidate-context-panel {
  min-height: 0;
}

.helper-summary-actions {
  justify-content: flex-end;
}

.helper-summary-chips {
  gap: 0.45rem;
}

.helper-summary-drawer {
  margin-top: 0;
}

.status-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.status-metric-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.9rem;
  border-radius: 16px;
  background: rgba(36, 50, 74, 0.05);
  border: 1px solid rgba(217, 207, 191, 0.8);
}

.status-metric-card strong {
  font-size: 1.05rem;
}

.status-active-tab,
.status-subsection {
  padding: 0.9rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(217, 207, 191, 0.8);
  background: rgba(255, 253, 249, 0.94);
}

.helper-error-note {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: rgba(184, 93, 52, 0.12);
  border: 1px solid rgba(184, 93, 52, 0.2);
  color: var(--rust-dark);
}

.approach-b-page .hero .extension-status-note {
  grid-column: 1 / -1;
}

.status-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 0.75rem;
}

.section-title {
  display: block;
  margin: 0;
  font-weight: 700;
  color: var(--navy);
}

.compact-result-list {
  gap: 0.55rem;
}

.compact-result-row {
  padding-bottom: 0.65rem;
}

.compact-result-meta {
  gap: 0.4rem;
  font-size: 1rem;
}

.candidate-context-summary {
  margin: 0;
}

.candidate-fact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.draft-channel-callout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.95rem;
  border-radius: 16px;
  background: rgba(36, 50, 74, 0.05);
  border: 1px solid rgba(217, 207, 191, 0.8);
}

.draft-channel-callout span {
  color: var(--muted);
}

.secondary-callout {
  background: rgba(184, 93, 52, 0.08);
}

.message-quick-note-editor {
  min-height: 112px;
}

.compact-collaborator-page .shell {
  padding: 1.35rem 1.45rem 1.5rem;
}

.compact-collaborator-page .app-header {
  gap: 0.8rem;
  margin-bottom: 0.92rem;
}

.compact-collaborator-page .app-title {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.compact-collaborator-page .eyebrow {
  margin-bottom: 0.24rem;
  font-size: 1rem;
  letter-spacing: 0.07em;
}

.compact-collaborator-page .page-content,
.compact-collaborator-page .panel-grid {
  gap: 0.82rem;
}

.compact-collaborator-page .panel,
.compact-collaborator-page .auth-card {
  padding: 0.88rem 0.96rem;
  border-radius: 18px;
}

.compact-collaborator-page .collaborator-overview-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
}

.compact-collaborator-page .collaborator-top-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
}

.compact-collaborator-page .hero {
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  border-radius: 22px;
}

.compact-collaborator-page .hero h2 {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.08;
}

.compact-collaborator-page .hero-actions {
  gap: 0.6rem;
}

.compact-collaborator-page .supporting,
.compact-collaborator-page .muted,
.compact-collaborator-page small {
  font-size: 1rem;
  line-height: 1.45;
}

.compact-collaborator-page h3 {
  font-size: 1.18rem;
  line-height: 1.16;
}

.compact-collaborator-page input,
.compact-collaborator-page textarea,
.compact-collaborator-page select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.72rem 0.82rem;
  background: #fffdf9;
  font-size: 1rem;
}

.compact-collaborator-page .primary-button,
.compact-collaborator-page .ghost-button {
  padding: 0.58rem 0.8rem;
  border-radius: 12px;
  font-size: 1rem;
}

.compact-collaborator-page .action-row {
  gap: 0.6rem;
}

.compact-collaborator-page .action-row-compact {
  gap: 0.5rem;
}

.compact-collaborator-page .action-row-compact .primary-button,
.compact-collaborator-page .action-row-compact .ghost-button {
  padding: 0.52rem 0.74rem;
}

.compact-collaborator-page .action-row-stable {
  grid-template-columns: repeat(3, minmax(148px, 1fr));
  width: min(100%, 580px);
}

.compact-collaborator-page .simple-list,
.compact-collaborator-page .result-list {
  gap: 0.48rem;
}

.compact-collaborator-page .compact-list {
  gap: 0.34rem;
}

.compact-collaborator-page .simple-list li,
.compact-collaborator-page .result-row {
  padding-bottom: 0.48rem;
}

.compact-collaborator-page .panel-header-row {
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.compact-collaborator-page .status-chip,
.compact-collaborator-page .badge {
  padding: 0.36rem 0.72rem;
  font-size: 1rem;
}

.compact-collaborator-page .scan-block {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.compact-collaborator-page .scan-status {
  padding: 0.82rem 0.92rem;
  border-radius: 16px;
}

.compact-collaborator-page .scan-time {
  font-size: 1rem;
}

.compact-collaborator-page .helper-tip {
  margin-top: 0.55rem;
}

.compact-collaborator-page .message-meta {
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.compact-collaborator-page .message-row-header {
  gap: 0.55rem;
}

.compact-collaborator-page .message-subject,
.compact-collaborator-page .message-body,
.compact-collaborator-page .message-input,
.compact-collaborator-page .message-editor {
  border-radius: 14px;
  padding: 0.82rem 0.92rem;
}

.compact-collaborator-page .message-body,
.compact-collaborator-page .message-editor {
  line-height: 1.55;
}

.compact-collaborator-page .message-editor {
  min-height: 220px;
}

.compact-collaborator-page .rich-message-preview {
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.compact-collaborator-page .rich-message-body {
  padding: 0.75rem 0.85rem;
  line-height: 1.5;
}

.compact-collaborator-page .message-discussion-editor {
  min-height: 140px;
}

.compact-collaborator-page .message-discussion-actions {
  gap: 0.7rem 0.85rem;
  margin-top: 0.75rem;
}

.compact-collaborator-page .copy-button {
  padding: 0.46rem 0.7rem;
  font-size: 1rem;
}

.compact-collaborator-page .progress-banner {
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
}

.compact-collaborator-page .progress-inline {
  margin-top: 0.75rem;
  font-size: 1rem;
}

.compact-collaborator-page .chip-row {
  gap: 0.5rem;
}

.compact-collaborator-page .compact-chip-row {
  margin-top: 0.65rem;
}

.compact-collaborator-page .summary-chip {
  padding: 0.42rem 0.68rem;
  font-size: 1rem;
}

.compact-collaborator-page .mini-status {
  padding: 0.28rem 0.56rem;
  font-size: 1rem;
}

.compact-collaborator-page .tab-action-message {
  margin-top: 0.2rem;
}

.compact-collaborator-page .dialog-card {
  width: min(820px, 100%);
  max-height: calc(100vh - 2rem);
  padding: 1.15rem;
  border-radius: 20px;
}

.compact-collaborator-page .preset-grid {
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.compact-collaborator-page .preset-card {
  padding: 0.82rem 0.9rem;
  border-radius: 16px;
}

.compact-collaborator-page .preset-card strong {
  font-size: 1rem;
}

.compact-collaborator-page .field {
  gap: 0.22rem;
}

.compact-collaborator-page .checkbox-grid {
  gap: 0.55rem;
  max-height: 280px;
}

.compact-collaborator-page .checkbox-row {
  gap: 0.6rem;
  padding: 0.58rem 0.68rem;
}

.compact-collaborator-page .model-note {
  margin-top: 0.65rem;
  padding: 0.74rem 0.84rem;
  border-radius: 14px;
}

.compact-collaborator-page .stack-gap-sm {
  gap: 0.46rem;
  margin-top: 0.54rem;
}

.compact-collaborator-page .detail-drawer {
  padding: 0.8rem 0.88rem;
  border-radius: 16px;
}

.compact-collaborator-page .prompt-preview {
  margin-top: 0.75rem;
  padding: 0.82rem 0.92rem;
  border-radius: 16px;
  line-height: 1.5;
  font-size: 1rem;
}

.compact-collaborator-page .collaborator-status-panel,
.compact-collaborator-page .candidate-context-panel,
.compact-collaborator-page .helper-summary-panel {
  gap: 0.7rem;
}

.compact-collaborator-page .collaborator-connection-strip {
  gap: 0.65rem;
}

.compact-collaborator-page .helper-summary-chips {
  gap: 0.38rem;
}

.compact-collaborator-page .helper-summary-actions {
  gap: 0.45rem;
}

.compact-collaborator-page .status-metric-grid {
  gap: 0.42rem;
}

.compact-collaborator-page .status-metric-card,
.compact-collaborator-page .status-active-tab,
.compact-collaborator-page .status-subsection {
  padding: 0.62rem 0.7rem;
  border-radius: 14px;
}

.compact-collaborator-page .status-metric-card strong {
  font-size: 1rem;
}

.compact-collaborator-page .status-detail-grid {
  gap: 0.6rem;
}

.compact-collaborator-page .compact-result-list {
  gap: 0.42rem;
}

.compact-collaborator-page .compact-result-row {
  padding-bottom: 0.52rem;
}

.compact-collaborator-page .compact-result-meta {
  gap: 0.28rem;
  font-size: 1rem;
}

.compact-collaborator-page .draft-channel-callout {
  gap: 0.65rem;
  padding: 0.54rem 0.66rem;
  border-radius: 14px;
}

.compact-collaborator-page .message-quick-note-editor {
  min-height: 92px;
}

.admin-dashboard-page .supporting,
.admin-dashboard-page .muted,
.admin-dashboard-page small {
  line-height: 1.34;
}

.admin-dashboard-page .panel h2 {
  font-size: 1.05rem;
  line-height: 1.1;
}

.admin-dashboard-page .panel > .eyebrow {
  margin-bottom: 0.16rem;
}

.admin-dashboard-page .action-row {
  gap: 0.45rem;
}

.admin-dashboard-page .admin-section-nav-compact {
  padding: 0.7rem 1rem;
}

.admin-dashboard-page .admin-section-nav-compact .chip-row {
  margin: 0;
}

.admin-dashboard-page .seldom-used-box {
  margin-top: 0.8rem;
  padding-top: 0.72rem;
  border-top: 1px solid rgba(31, 48, 82, 0.12);
}

.admin-dashboard-page .seldom-used-box .supporting {
  max-width: 48rem;
  margin-bottom: 0.45rem;
}

.admin-dashboard-page .admin-overview-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) repeat(3, minmax(230px, 1fr));
  grid-template-areas:
    "models ownership imports identity"
    "library quick users system";
  gap: 0.9rem;
  align-items: start;
}

.admin-dashboard-page .admin-overview-card {
  min-height: 0;
}

.admin-dashboard-page .admin-overview-card-users {
  grid-area: users;
}

.admin-dashboard-page .admin-overview-card-ownership {
  grid-area: ownership;
}

.admin-dashboard-page .admin-overview-card-imports {
  grid-area: imports;
}

.admin-dashboard-page .admin-overview-card-identity {
  grid-area: identity;
}

.admin-dashboard-page .admin-overview-card-library {
  grid-area: library;
}

.admin-dashboard-page .admin-overview-card-quick {
  grid-area: quick;
}

/* Ilya, 2026-09-04: the Admin page is "a huge page, I need to scroll all the way down" to find
   Models & AI. It now takes the FIRST slot on every breakpoint — where `users` used to sit — and
   `users` takes the slot `models` gave up, so nothing else on the grid loses a place. */
.admin-dashboard-page .admin-overview-card-models {
  grid-area: models;
}

.admin-dashboard-page .admin-overview-card-system {
  grid-area: system;
}

.admin-dashboard-page .admin-overview-card .action-row {
  margin-top: 0.55rem;
}

.admin-dashboard-page .admin-overview-card-quick .action-row {
  gap: 0.4rem;
}

.admin-dashboard-page .admin-overview-card-quick .inline-button {
  padding: 0.5rem 0.72rem;
}

.status-bad {
  background: rgba(184, 93, 52, 0.18);
  color: #fff0e8;
}

.operations-board-page .page-content {
  gap: 1rem;
}

.operations-board-shell {
  display: grid;
  gap: 1rem;
}

.operations-board-hero {
  align-items: flex-start;
}

.operations-board-supporting {
  max-width: 56rem;
  color: rgba(249, 247, 242, 0.82);
}

.operations-board-hero-actions {
  display: grid;
  gap: 0.6rem;
  justify-items: end;
}

.operations-board-grid {
  align-items: stretch;
}

.operations-summary-panel,
.operations-explainer {
  display: grid;
  gap: 0.55rem;
}

.operations-lane-card {
  display: grid;
  gap: 1rem;
}

.operations-lane-header {
  align-items: flex-start;
}

.operations-lane-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.operations-metric-card,
.operations-path-card {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(36, 50, 74, 0.08);
  border-radius: 16px;
  padding: 0.85rem 0.95rem;
  display: grid;
  gap: 0.2rem;
}

.operations-metric-label {
  font-size: 1rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.operations-status-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}

.operations-summary-action {
  margin: 0;
  padding: 0.72rem 0.9rem;
  border-radius: 14px;
  background: rgba(36, 50, 74, 0.06);
  color: var(--navy);
  font-weight: 600;
}

.operations-status-row {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  gap: 0.8rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(36, 50, 74, 0.08);
}

.operations-status-row dt {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.operations-status-row dd {
  margin: 0;
  line-height: 1.42;
}

.operations-signal-block {
  display: grid;
  gap: 0.5rem;
}

.operations-worker-block {
  display: grid;
  gap: 0.6rem;
}

.operations-worker-grid {
  display: grid;
  gap: 0.6rem;
}

.operations-worker-card {
  border: 1px solid rgba(36, 50, 74, 0.08);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 0.8rem 0.9rem;
  display: grid;
  gap: 0.45rem;
}

.operations-worker-header {
  align-items: flex-start;
}

.operations-worker-detail {
  display: grid;
  gap: 0.14rem;
}

.operations-worker-detail span {
  font-size: 1rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}

.operations-worker-detail p {
  margin: 0;
  line-height: 1.35;
}

.operations-signal-list li {
  gap: 0.16rem;
}

/* ============================================================
   BH-DENSITY LAYER (2026-06-10)
   Recruiter-friendly tight presentation modeled on Bullhorn:
   compact type scale, tight panels/forms, and the .data-grid
   component (dense sortable/filterable tables, see data_grid.js).
   Loaded last on purpose: equal-specificity overrides below win.
   ============================================================ */

html {
  font-size: 14px;
}

.shell {
  padding: 1.1rem 1.3rem;
}

.page-content {
  gap: 0.8rem;
  /* shell is min-height:100vh; without this, leftover viewport height is
     distributed into the auto rows and inflates panels on short pages */
  align-content: start;
}

.panel,
.auth-card {
  border-radius: 10px;
  padding: 0.85rem 1rem;
  box-shadow: 0 1px 2px rgba(34, 43, 58, 0.05);
}

.app-header {
  margin-bottom: 1rem;
}

.app-title {
  font-size: clamp(1.45rem, 2.5vw, 2.1rem);
}

h2 {
  font-size: 1.3rem;
}

h3 {
  font-size: 1.08rem;
}

.eyebrow {
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

input,
textarea,
select {
  padding: 0.42rem 0.6rem;
  border-radius: 7px;
}

.field {
  gap: 0.25rem;
}

.stack-form {
  gap: 0.65rem;
}

.primary-button,
.ghost-button {
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 1rem;
}

.status-chip,
.badge {
  padding: 0.22rem 0.6rem;
  font-size: 1rem;
}

.environment-pill {
  font-size: 1rem;
  padding: 0.2rem 0.5rem;
}

.simple-list,
.result-list {
  gap: 0.45rem;
}

.simple-list li,
.result-row {
  padding-bottom: 0.45rem;
}

.panel-header-row {
  margin-bottom: 0.55rem;
}

.detail-drawer {
  border-radius: 8px;
}

.messages .message {
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
}

/* ---- Data grid: dense tabular lists -------------------------- */

.data-grid-wrap {
  overflow-x: auto;
  border: 1px solid rgba(36, 50, 74, 0.14);
  border-radius: 8px;
  background: #fffdf9;
}

.data-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}

.data-grid-toolbar input[data-grid-search] {
  width: min(280px, 100%);
  padding: 0.3rem 0.55rem;
  font-size: 1rem;
  border-radius: 6px;
}

.data-grid-count {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

table.data-grid {
  /* SIZE TO THE CONTENT, NOT TO THE SCREEN.
     This was width:100%, so a three-row to-do list stretched across the whole shell and the button
     that acts on a row sat ~890px from the row's label (Ilya, 2026-08-05: "I want the controls the
     Recruiter will use to be in front of them, not spread all over a huge empty page").
     `auto` lets a narrow grid stay narrow; a genuinely wide grid still grows to its content and the
     .data-grid-wrap around it keeps scrolling as before. */
  width: auto;
  min-width: min(100%, 34rem);
  max-width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.25;
}

.data-grid th,
.data-grid td {
  padding: 0.3rem 0.6rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(217, 207, 191, 0.55);
}

.data-grid td {
  white-space: nowrap;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The grid's own 0.86rem (12.04px) base is a deliberate density choice for plain cell data
   (C123 leaves that alone), but every real press inside a grid row -- a <button>, a <summary>
   disclosure -- inherits it too, which put row-level toggles and buttons under the 14px floor
   sitewide (Submittals/Tasks/Planner/Messaging all render this table). Specificity (0,1,1) beats
   the bare single-class button rules above, so this is what actually wins inside a grid. */
.data-grid button,
.data-grid summary {
  font-size: 1rem;
}

.data-grid tbody tr:last-child td {
  border-bottom: 0;
}

/* KEEP A ROW'S NAME AND ITS ACTION TOGETHER (Codex 2686, first canonical UX re-audit).
   The Jobs directory is 1,988px of table in a 982px wrap. The job name sits at x=306 and Open at
   x=2,004, so acting on a row meant scrolling right past the name that told you which row it was --
   at the bottom of a 3,385px list, because that is where the horizontal scrollbar lives.

   Ilya already ruled on this exact feeling on 2026-08-05: "I want the controls the Recruiter will
   use to be in front of them, not spread all over a huge empty page." The fix then made narrow
   grids stay narrow (`width: auto` above). A genuinely wide grid still grows to its content, so on
   this one the defect that ruling was about came straight back.

   Pinning rather than deleting columns: every fact stays, and the two things a recruiter needs at
   once -- which row this is, and the way into it -- stop being 1,700px apart. Same mechanism the
   header row already uses below.

   OPT-IN. These bind only to elements that ask for the class, so no other grid changes. */
.data-grid th.grid-identity,
.data-grid td.grid-identity {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fffdf9;
  box-shadow: 1px 0 0 rgba(217, 207, 191, 0.9);
}

.data-grid th.grid-actions,
.data-grid td.grid-actions {
  position: sticky;
  right: 0;
  z-index: 1;
  background: #fffdf9;
  box-shadow: -1px 0 0 rgba(217, 207, 191, 0.9);
}

/* The header cells of those two columns are sticky in BOTH directions, so they need to sit above
   the body's sticky cells as well as above ordinary ones. */
.data-grid thead th.grid-identity,
.data-grid thead th.grid-actions {
  z-index: 3;
  background: var(--paper);
}

/* A ROW BECOMES A CARD WHERE A TABLE CANNOT FIT (Codex 2696 CO-1).
   Measured on the Company directory: 986px of table in a 642px wrap at half-window and a 312px
   wrap on a phone. The company name sits at x=40 and Open at x=973 -- so on both, the way into
   the company was simply off the screen, and reaching it meant scrolling sideways in a box whose
   scrollbar is below 500 rows.

   Pinning (below) answers the wide case: it keeps two columns together while the middle scrolls.
   It cannot answer this one, because there is no middle left -- at 312px the pinned pair would be
   wider than the box that holds them. So under the same breakpoint the row stops being a row.
   Each record becomes a card: fields stack, each keeps its column name from `data-label`, and the
   action sits with the name it belongs to. Nothing scrolls sideways because nothing is wider than
   the screen.

   OPT-IN, on the wrap. A table only behaves this way if it asks to, and it needs `data-label` on
   its cells to keep its headings -- so this cannot silently restyle a grid that has not been
   given them. */
.data-grid-cards {
  overflow-x: auto;
}

@media (max-width: 999px) {
  .data-grid-cards {
    overflow-x: visible;
    border: 0;
    background: none;
  }

  /* MIN-WIDTH IS THE ONE THAT MATTERED (Codex 2746, measured at 390x844 on the live lane).
     `table.data-grid` carries `min-width: min(100%, 34rem)` -- about 544px -- so clearing `width`
     and `max-width` here left the table 544px wide inside a ~298px card. The visible result was
     Boris Iyutin rendering ONE CHARACTER PER LINE, with a horizontal scrollbar inside the card,
     while the document's own scroll width reported a comfortable 375px. Opting in and labelling
     the cells was never going to be enough on its own: the residual widths had to go. */
  .data-grid-cards table.data-grid,
  .data-grid-cards table.data-grid tbody,
  .data-grid-cards table.data-grid tr,
  .data-grid-cards table.data-grid td {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    /* A card is the scroll boundary. Any nested scroller inside it -- the Slate's own
       `slate-review-scroll`, or a cell that clipped -- puts a second scrollbar inside a box the
       recruiter is already scrolling, which is what Codex saw on the scored grid. */
    overflow: visible;
  }

  /* The headings are not lost, they move onto each field as `data-label`. */
  .data-grid-cards table.data-grid thead {
    display: none;
  }

  /* A wrap that scrolls its own box (the Slate's `slate-review-scroll` caps height and scrolls)
     stands down where the rows are cards: the page is the scroller, not a 72vh window inside it. */
  .data-grid-cards.slate-review-scroll {
    max-height: none;
    overflow: visible;
  }

  .data-grid-cards table.data-grid tr {
    margin: 0 0 0.55rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(36, 50, 74, 0.14);
    border-radius: 8px;
    background: #fffdf9;
  }

  .data-grid-cards table.data-grid td {
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.15rem 0;
    border-bottom: 0;
    /* The table rule clips with an ellipsis to keep columns narrow. In a card there are no
       columns to keep narrow, and a clipped company name is the one thing that must not be. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    /* And the value takes the room the label leaves, rather than inheriting a column width. */
    min-width: 0;
  }

  /* The value half of each row, so a long name wraps as words instead of a character a line. */
  .data-grid-cards table.data-grid td > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* AND THE FLEX ROW HAS TO BE ALLOWED TO BECOME TWO ROWS. Measured at 390px with the widths
     cleared: the card was 312px holding 353px, and the three offenders were all flex children
     refusing to give way -- the title cell (290px holding 343px, name plus freshness badge),
     the badge itself (91px holding 145px), and the Pass form squeezed to 20px while its button
     needed 41px. `min-width: 0` lets a child shrink; it does not let a row wrap. */
  .data-grid-cards table.data-grid td {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  /* A control keeps its own size and takes the next line rather than being crushed. */
  .data-grid-cards table.data-grid td.card-action > *,
  .data-grid-cards table.data-grid td form,
  .data-grid-cards table.data-grid td .row-actions > * {
    /* Its own size, up to the card. Without the cap this fixed 22px of overflow into a control
       that simply would not give way -- "Accept requires evaluator-backed scoring" is a sentence,
       not a button, and it has to wrap like one. */
    flex: 0 0 auto;
    max-width: 100%;
  }

  /* Badges are written to sit on one line inside a column. In a card they wrap like prose. */
  .data-grid-cards table.data-grid td .evidence-freshness,
  .data-grid-cards table.data-grid td .pill,
  .data-grid-cards table.data-grid td .summary-chip {
    white-space: normal;
  }

  .data-grid-cards table.data-grid td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* The name leads the card and the action closes it; neither needs its own label saying so. */
  .data-grid-cards table.data-grid td.card-title::before,
  .data-grid-cards table.data-grid td.card-action::before {
    content: none;
  }

  /* A CONTROL USES THE CARD IT IS IN (Codex 2760). The accepted slate's status-reason field is a
     plain text input, so it took the browser's default ~145px and held an 821px value -- a real
     acceptance note with about a fifth of it visible, inside a card 300px wide with the room to
     show it. An input cannot wrap, so the fix is to let it have the width that is already there.

     Card mode only. In a table the column is narrow on purpose and a value longer than its box is
     ordinary behaviour; widening inputs there would push the grid sideways, which is the defect
     this whole class exists to remove. */
  /* And the control's TRACK, not just the control. `.inline-form` is `display: grid` with auto
     columns, so inside a card it laid out select / input / button as `93.6px 144.6px` -- the input
     got a 145px track and `width: 100%` on the input resolved against that, which is why widening
     the input alone changed nothing. One column per control is the card idiom, and it is what lets
     the rule below actually do something. */
  .data-grid-cards table.data-grid td .inline-form {
    /* `width` FIRST, and it is the part that mattered. The form shrink-to-fits inside the card, so
       it was 145px wide and a `1fr` track of 145px is still 145px -- setting the columns alone
       changed nothing, and neither did widening the input, because a grid item resolves `100%`
       against its track. Measured at 390: form 145 -> 290, input 143 -> 288. */
    width: 100%;
    grid-template-columns: 1fr;
  }

  .data-grid-cards table.data-grid td input[type="text"],
  .data-grid-cards table.data-grid td input[type="search"],
  .data-grid-cards table.data-grid td input[type="email"],
  .data-grid-cards table.data-grid td select,
  .data-grid-cards table.data-grid td textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .data-grid-cards table.data-grid td.card-title {
    font-size: 1.02rem;
    font-weight: 600;
    padding-bottom: 0.3rem;
  }

  .data-grid-cards table.data-grid td.card-action {
    justify-content: flex-start;
    padding-top: 0.4rem;
  }
}

/* THE SAME GRID, DECIDED BY ITS OWN BOX (Codex 2785, REG-011 correction).
   THE 999px MEDIA QUERY ASKED THE WRONG QUESTION. It reads the VIEWPORT, and the Job page puts this
   grid in a sidebar-constrained column: at a real 1218px viewport the wrap is ~906-920px holding a
   1160-1358px table. So the table still scrolled sideways, the contact names sat at x260 while every
   action cell sat at x1226-1419, and Detach was behind an internal scrollbar -- which is the exact
   failure Ilya reported on the real Hull job, at the exact width he reported it.
   My first pass measured that width and DECLINED TO CHARGE IT, on the reasoning that a wide table
   inside a scrolling wrap is what the wrap is for. That reasoning is true of a table nobody has
   complained about, and false of this one.
   Measured across the real layout: the wrap scrolls sideways at 1218 (920), 1366 (1068), 1440 (1142)
   and 1600 (1302), and stops at 1920 (1622), where the table fits its box. So the condition is the
   CONTAINER, not the viewport, and the threshold is where the box stops holding the table.
   SCOPED SO IT CANNOT TRAVEL. Only this wrap gets `container-type`, so `@container` matches nothing
   anywhere else -- an element with no container ancestor never satisfies a container query. The
   global 999px breakpoint is unchanged and no other grid is touched.
   The wrap's OWN three declarations (border, background, overflow-x) are not repeated here: an
   element cannot query its own container. It keeps `overflow-x: auto`, which shows no scrollbar
   once the cards inside it no longer overflow. */
.data-grid-wrap.job-contacts-cards,
/* GENERALIZED for any grid whose CONTENT can never fit its capped box (Codex 2812, the
   Messaging grids: 1,482-1,796px of natural table inside a panel capped at 1,280px, so the
   1218px "desktop" render scrolled sideways and Review/Dismiss painted at x1900). Same
   opt-in contract as job-contacts-cards -- data-labels on the cells, wrap carries the
   class -- and the same box-decides threshold below, reached by extending each selector
   with :is() rather than copying the block, so the two opt-ins cannot drift apart. */
.data-grid-wrap.cards-when-box-tight {
  container-type: inline-size;
}

/* Codex 3853 (Ilya's production screenshot, 2026-09-28): at wide desktop width this grid stays a
   TABLE, and the base `.data-grid td` cap (max-width 22rem, overflow hidden, ellipsis) cut the
   first of the three action buttons to "...n maker" while the other two pushed past it, and the
   "Attached to this job (5 of 10 at the company)" group line was ellipsized. For THIS grid only:
   its action cell and its spanning group rows wrap instead of clipping, and the actions stack
   left-aligned so every label and hitbox is whole. No site-wide grid rule changes. */
.data-grid-wrap.job-contacts-cards table.data-grid td.card-action,
.data-grid-wrap.job-contacts-cards table.data-grid tr.grid-group-row td {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.data-grid-wrap.job-contacts-cards table.data-grid td.card-action .row-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.35rem;
}

@container (max-width: 1360px) {

  /* MIN-WIDTH IS THE ONE THAT MATTERED (Codex 2746, measured at 390x844 on the live lane).
     `table.data-grid` carries `min-width: min(100%, 34rem)` -- about 544px -- so clearing `width`
     and `max-width` here left the table 544px wide inside a ~298px card. The visible result was
     Boris Iyutin rendering ONE CHARACTER PER LINE, with a horizontal scrollbar inside the card,
     while the document's own scroll width reported a comfortable 375px. Opting in and labelling
     the cells was never going to be enough on its own: the residual widths had to go. */
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid,
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid tbody,
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid tr,
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    /* A card is the scroll boundary. Any nested scroller inside it -- the Slate's own
       `slate-review-scroll`, or a cell that clipped -- puts a second scrollbar inside a box the
       recruiter is already scrolling, which is what Codex saw on the scored grid. */
    overflow: visible;
  }

  /* The headings are not lost, they move onto each field as `data-label`. */
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid thead {
    display: none;
  }

  /* A wrap that scrolls its own box (the Slate's `slate-review-scroll` caps height and scrolls)
     stands down where the rows are cards: the page is the scroller, not a 72vh window inside it. */

  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid tr {
    margin: 0 0 0.55rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(36, 50, 74, 0.14);
    border-radius: 8px;
    background: #fffdf9;
  }

  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td {
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.15rem 0;
    border-bottom: 0;
    /* The table rule clips with an ellipsis to keep columns narrow. In a card there are no
       columns to keep narrow, and a clipped company name is the one thing that must not be. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    /* And the value takes the room the label leaves, rather than inheriting a column width. */
    min-width: 0;
  }

  /* The value half of each row, so a long name wraps as words instead of a character a line. */
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* AND THE FLEX ROW HAS TO BE ALLOWED TO BECOME TWO ROWS. Measured at 390px with the widths
     cleared: the card was 312px holding 353px, and the three offenders were all flex children
     refusing to give way -- the title cell (290px holding 343px, name plus freshness badge),
     the badge itself (91px holding 145px), and the Pass form squeezed to 20px while its button
     needed 41px. `min-width: 0` lets a child shrink; it does not let a row wrap. */
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  /* A control keeps its own size and takes the next line rather than being crushed. */
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td.card-action > *,
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td form,
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td .row-actions > * {
    /* Its own size, up to the card. Without the cap this fixed 22px of overflow into a control
       that simply would not give way -- "Accept requires evaluator-backed scoring" is a sentence,
       not a button, and it has to wrap like one. */
    flex: 0 0 auto;
    max-width: 100%;
  }

  /* AntiG's walkthrough, all three widths: `.data-grid .row-actions` (below, global) is
     `flex-wrap: nowrap; justify-content: flex-end` -- right for a table row's action cell, where
     there is room, but wrong once that cell is a card and the row below stretches every form to
     the card's full width (see `.inline-form` below). Three buttons that cannot wrap and cannot
     shrink past their own text get pushed left of the card, off-screen, by `flex-end`: Hiring Mngr
     measured `x = -483`, Sets the calibre bar `x = -217`, only Detach staying on-screen because
     `flex-end` keeps the LAST item flush with the card's right edge. Wrapping is the safety net
     even after the width fix below: three real buttons plus a long "Not the calibre bar" label can
     still be wider than a narrow phone card. */
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td .row-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* Badges are written to sit on one line inside a column. In a card they wrap like prose. */
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td .evidence-freshness,
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td .pill,
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td .summary-chip {
    white-space: normal;
  }

  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* The name leads the card and the action closes it; neither needs its own label saying so. */
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td.card-title::before,
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td.card-action::before {
    content: none;
  }

  /* A CONTROL USES THE CARD IT IS IN (Codex 2760). The accepted slate's status-reason field is a
     plain text input, so it took the browser's default ~145px and held an 821px value -- a real
     acceptance note with about a fifth of it visible, inside a card 300px wide with the room to
     show it. An input cannot wrap, so the fix is to let it have the width that is already there.

     Card mode only. In a table the column is narrow on purpose and a value longer than its box is
     ordinary behaviour; widening inputs there would push the grid sideways, which is the defect
     this whole class exists to remove. */
  /* And the control's TRACK, not just the control. `.inline-form` is `display: grid` with auto
     columns, so inside a card it laid out select / input / button as `93.6px 144.6px` -- the input
     got a 145px track and `width: 100%` on the input resolved against that, which is why widening
     the input alone changed nothing. One column per control is the card idiom, and it is what lets
     the rule below actually do something. */
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td .inline-form {
    /* `width` FIRST, and it is the part that mattered. The form shrink-to-fits inside the card, so
       it was 145px wide and a `1fr` track of 145px is still 145px -- setting the columns alone
       changed nothing, and neither did widening the input, because a grid item resolves `100%`
       against its track. Measured at 390: form 145 -> 290, input 143 -> 288. */
    width: 100%;
    grid-template-columns: 1fr;
  }

  /* BUT NOT A `.row-actions` FORM (AntiG's walkthrough, all three widths). A note/input form wants
     the card's full width; an action button's form is exactly the opposite -- it must stay its own
     size so `.row-actions` (flex, see above) can lay three of them out side by side. `width: 100%`
     from the rule above forced EACH button's one-control form to the full card width -- three
     ~290px-wide forms fighting for one card -- and `justify-content: flex-end` with nowrap pushed
     the earlier two off-screen to the left (Hiring Mngr measured `x = -483`, Sets the calibre bar
     `x = -217`) while only the last stayed visible. Scoped to `.row-actions .inline-form`, which
     outranks the rule above on specificity alone, so this is additive: every other `.inline-form`
     in this card -- the note/text-input case the rule above exists for -- is untouched. */
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td .row-actions .inline-form {
    width: auto;
    grid-template-columns: none;
  }

  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td input[type="text"],
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td input[type="search"],
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td input[type="email"],
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td select,
  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td.card-title {
    font-size: 1.02rem;
    font-weight: 600;
    padding-bottom: 0.3rem;
  }

  :is(.data-grid-wrap.job-contacts-cards, .data-grid-wrap.cards-when-box-tight) table.data-grid td.card-action {
    justify-content: flex-start;
    padding-top: 0.4rem;
  }
}


/* ONLY WHERE THERE IS ROOM FOR IT. Measured: the two pinned columns are 552px together. At a
   1280px viewport the wrap is 982px, so 430px of middle still scrolls -- the fix works. At a
   390px phone the wrap is 312px and the two would overlap, hiding the name behind the actions,
   which is worse than the problem. Below this width they behave as they did before: the row
   scrolls sideways as a whole.

   That leaves narrow windows unsolved rather than solved -- said plainly here because a media
   query is exactly where a silent limitation would otherwise hide. Fixing them means collapsing
   secondary columns, which is a bigger change than this correction. */
@media (max-width: 999px) {
  .data-grid th.grid-identity,
  .data-grid td.grid-identity,
  .data-grid th.grid-actions,
  .data-grid td.grid-actions {
    position: static;
    box-shadow: none;
  }
}

.data-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  border-bottom: 2px solid var(--line);
  color: var(--muted);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

.data-grid th[data-sort] {
  cursor: pointer;
}

.data-grid th[data-sort]:hover {
  color: var(--ink);
}

.data-grid th[data-sort]::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  color: var(--rust);
}

.data-grid th[data-sort][aria-sort="ascending"]::after {
  content: " \25B4";
}

.data-grid th[data-sort][aria-sort="descending"]::after {
  content: " \25BE";
}

.data-grid tbody tr:nth-child(even) {
  background: rgba(244, 239, 230, 0.45);
}

.data-grid tbody tr:hover {
  background: rgba(36, 50, 74, 0.06);
}

.data-grid td a {
  font-weight: 700;
}

.data-grid th.num,
.data-grid td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-grid .grid-filters th {
  position: sticky;
  top: 1.95rem;
  z-index: 2;
  background: var(--paper);
  padding: 0.18rem 0.35rem;
  border-bottom: 1px solid var(--line);
}

.data-grid .grid-filters input,
.data-grid .grid-filters select {
  width: 100%;
  min-width: 4.5rem;
  padding: 0.16rem 0.4rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  border-radius: 5px;
}

.data-grid tr.grid-group-row td {
  background: rgba(36, 50, 74, 0.08);
  color: var(--navy);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.data-grid .row-actions {
  display: flex;
  gap: 0.3rem;
  justify-content: flex-end;
  white-space: nowrap;
}

.data-grid .row-actions .inline-button {
  padding: 0.18rem 0.5rem;
  font-size: 1rem;
  border-radius: 6px;
}

.data-grid .status-pill,
.data-grid .badge,
.data-grid .status-chip {
  padding: 0.08rem 0.45rem;
  font-size: 1rem;
  white-space: nowrap;
}

.data-grid .muted {
  font-size: 1rem;
}

.data-grid td.wrap {
  white-space: normal;
  min-width: 14rem;
}

.data-grid-empty {
  padding: 0.7rem 0.9rem;
  color: var(--muted);
}

/* Tight key-value facts table for record pages (BH "Details" card) */

table.kv-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.kv-grid th,
.kv-grid td {
  padding: 0.28rem 0.5rem;
  border-bottom: 1px solid rgba(217, 207, 191, 0.45);
  text-align: left;
  vertical-align: top;
}

.kv-grid th {
  width: 11rem;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.kv-grid tr:last-child th,
.kv-grid tr:last-child td {
  border-bottom: 0;
}

.operations-path-card code {
  display: block;
  overflow-wrap: anywhere;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  background: rgba(36, 50, 74, 0.06);
}

.linkedin-harvest-workspace {
  display: grid;
  gap: 0.8rem;
}

.linkedin-harvest-header {
  align-items: flex-start;
}

.harvest-queue-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.harvest-pill,
.harvest-state {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  background: rgba(36, 50, 74, 0.08);
  color: var(--navy);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.harvest-pill {
  white-space: nowrap;
}

.harvest-state.warning {
  background: rgba(184, 93, 52, 0.16);
  color: #7a321c;
}

.linkedin-harvest-form {
  display: grid;
  gap: 0.7rem;
}

.linkedin-harvest-scroll {
  overflow-x: auto;
  max-height: min(72vh, 48rem);
  overscroll-behavior: contain;
  border: 1px solid rgba(36, 50, 74, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.linkedin-harvest-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 1rem;
}

.linkedin-harvest-table th,
.linkedin-harvest-table td {
  padding: 0.46rem 0.5rem;
  border-bottom: 1px solid rgba(36, 50, 74, 0.08);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  line-height: 1.32;
}

.linkedin-harvest-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f3e7d7;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: inset 0 -1px 0 rgba(36, 50, 74, 0.12);
}

.linkedin-harvest-table th:nth-child(1),
.linkedin-harvest-table th:nth-child(2) {
  width: 6.5rem;
}

.linkedin-harvest-table th:nth-child(3) {
  width: 20rem;
}

.linkedin-harvest-table th:nth-child(4) {
  width: 13rem;
}

.linkedin-harvest-table th:nth-child(5) {
  width: 14rem;
}

.linkedin-harvest-table th:nth-child(6),
.linkedin-harvest-table th:nth-child(7),
.linkedin-harvest-table th:nth-child(8) {
  width: 4.8rem;
  text-align: center;
}

.linkedin-harvest-table th:nth-child(6),
.linkedin-harvest-table td:nth-child(6) {
  background-color: rgba(110, 187, 140, 0.08);
}

.linkedin-harvest-table th:nth-child(7),
.linkedin-harvest-table td:nth-child(7),
.linkedin-harvest-table th:nth-child(8),
.linkedin-harvest-table td:nth-child(8) {
  background-color: rgba(184, 93, 52, 0.07);
}

.linkedin-harvest-table th:nth-child(9) {
  width: 21rem;
}

.linkedin-harvest-table tbody tr:not(.harvest-section-row):hover td {
  background: rgba(255, 248, 238, 0.88);
}

.linkedin-harvest-table tbody tr:not(.harvest-section-row):hover td:nth-child(6) {
  background: rgba(110, 187, 140, 0.16);
}

.linkedin-harvest-table tbody tr:not(.harvest-section-row):hover td:nth-child(7),
.linkedin-harvest-table tbody tr:not(.harvest-section-row):hover td:nth-child(8) {
  background: rgba(184, 93, 52, 0.14);
}

.linkedin-harvest-table tr:last-child td {
  border-bottom: 0;
}

.linkedin-harvest-table td strong {
  color: var(--navy);
}

.linkedin-harvest-table .muted,
.linkedin-harvest-table .warning-text {
  font-size: 1rem;
  line-height: 1.28;
}

.linkedin-harvest-table input[type="email"],
.linkedin-harvest-table input[type="text"],
.linkedin-harvest-table input[type="url"],
.linkedin-harvest-table textarea,
.linkedin-harvest-table select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(36, 50, 74, 0.14);
  border-radius: 9px;
  padding: 0.4rem 0.45rem;
  background: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.2;
}

.linkedin-harvest-table textarea {
  min-height: 3.9rem;
  resize: vertical;
}

.harvest-capture-fields,
.harvest-compact-capture {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
  min-width: 0;
}

.harvest-capture-fields > .muted,
.harvest-compact-capture > .muted,
.harvest-capture-fields textarea,
.harvest-compact-capture textarea {
  grid-column: 1 / -1;
}

.harvest-capture-fields > .muted,
.harvest-compact-capture > .muted {
  padding: 0.35rem 0.45rem;
  border-radius: 9px;
  background: rgba(36, 50, 74, 0.05);
}

.harvest-section-row td {
  position: sticky;
  top: 2rem;
  z-index: 2;
  padding: 0.42rem 0.6rem;
  background: #efe0cd;
  color: var(--navy);
  border-top: 1px solid rgba(36, 50, 74, 0.12);
  border-bottom: 1px solid rgba(36, 50, 74, 0.14);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.harvest-control-stack {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
}

.linkedin-harvest-table input[type="checkbox"] {
  width: 1.45rem;
  height: 1.45rem;
  accent-color: var(--rust);
  cursor: pointer;
}

.linkedin-harvest-table input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.34;
}

.linkedin-harvest-table input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(184, 93, 52, 0.28);
  outline-offset: 2px;
}

.linkedin-harvest-table .center-cell {
  text-align: center;
  vertical-align: middle;
  box-shadow: inset 1px 0 0 rgba(36, 50, 74, 0.05);
}

.linkedin-harvest-table .link-cell {
  min-width: 0;
}

.linkedin-harvest-table .mini-button {
  width: 100%;
  justify-content: center;
  margin-top: 0.28rem;
  min-height: 0;
  padding: 0.36rem 0.48rem;
  border-radius: 9px;
  font-size: 1rem;
  line-height: 1.15;
}

.center-cell {
  text-align: center;
}

.link-cell {
  min-width: 150px;
}

.mini-button {
  min-height: 0;
  padding: 0.42rem 0.58rem;
  font-size: 1rem;
}

.block-text {
  display: block;
  margin-top: 0.18rem;
}

.linkedin-harvest-commit,
.linkedin-harvest-actions-sticky {
  position: sticky;
  bottom: 0.45rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid rgba(184, 93, 52, 0.22);
  border-radius: 16px;
  background: rgba(255, 250, 242, 0.98);
  box-shadow: 0 16px 36px rgba(36, 50, 74, 0.18);
}

.linkedin-harvest-commit > div,
.linkedin-harvest-actions-sticky > div {
  min-width: 0;
}

.linkedin-harvest-commit .inline-button,
.linkedin-harvest-actions-sticky .inline-button {
  min-width: 10.5rem;
  justify-content: center;
  padding: 0.65rem 0.9rem;
  white-space: nowrap;
}

.linkedin-harvest-commit .ghost-button,
.linkedin-harvest-actions-sticky .ghost-button {
  background: rgba(36, 50, 74, 0.09);
  color: var(--navy);
}

.linkedin-harvest-commit .primary-button,
.linkedin-harvest-actions-sticky .primary-button {
  box-shadow: 0 10px 22px rgba(184, 93, 52, 0.22);
}

.linkedin-harvest-commit p {
  margin: 0.15rem 0 0;
  font-size: 1rem;
}

.slate-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.slate-board-form {
  display: grid;
  gap: 0.85rem;
}

.slate-board-actions {
  justify-content: flex-start;
}

.slate-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(18rem, 1fr));
  gap: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.slate-board-linkedin {
  grid-template-columns: repeat(2, minmax(20rem, 1fr));
}

.slate-column {
  min-width: 18rem;
  border: 1px solid rgba(217, 207, 191, 0.85);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  display: grid;
  align-content: start;
}

.slate-column-header {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.85rem;
  border-bottom: 1px solid rgba(217, 207, 191, 0.85);
}

.slate-column-header h4 {
  margin: 0.1rem 0;
  font-size: 1.05rem;
}

.slate-row-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.slate-row {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
  border-bottom: 1px solid rgba(217, 207, 191, 0.7);
}

.slate-row:last-child {
  border-bottom: 0;
}

.slate-row-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.slate-row-main input[type="checkbox"] {
  margin-top: 0.2rem;
}

.slate-row-facts {
  display: grid;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 1rem;
}

.slate-evaluation-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.slate-evaluation-line details {
  min-width: 12rem;
}

.slate-evaluation-line summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
}

.slate-row-empty {
  color: var(--muted);
}

[x-cloak] {
  display: none !important;
}

@media (max-width: 1180px) {
  .admin-dashboard-page .admin-overview-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    grid-template-areas:
      "models ownership"
      "imports identity"
      "library quick"
      "users system";
  }

  .organization-builder-workspace {
    grid-template-columns: 1fr;
  }

  .collaborator-top-grid,
  .collaborator-overview-grid,
  .status-detail-grid,
  .status-metric-grid {
    grid-template-columns: 1fr;
  }

  .draft-channel-callout {
    flex-direction: column;
    align-items: flex-start;
  }

  .operations-lane-meta {
    grid-template-columns: 1fr;
  }

  .prompt-help-page .two-up,
  .prompt-help-page .hero,
  .prompt-help-page .panel-header-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .prompt-studio-lifecycle,
  .prompt-studio-selected-job-meta {
    grid-template-columns: 1fr;
  }

  .prompt-studio-page .two-up,
  .prompt-studio-page .hero,
  .prompt-studio-page .panel-header-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .studio-grid,
  .studio-card-grid {
    grid-template-columns: 1fr;
  }

  .workbench-header-facts,
  .workbench-flow-grid,
  .workbench-page .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tutorial-page .hero {
    flex-direction: column;
    align-items: stretch;
  }

  .tutorial-page .hero-actions {
    justify-items: stretch;
  }

  .tutorial-page .hero-actions .chip-row {
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .admin-dashboard-page .admin-overview-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "models"
      "quick"
      "ownership"
      "imports"
      "identity"
      "library"
      "users"
      "system";
  }

  .two-up,
  .three-up,
  .collaborator-top-grid,
  .collaborator-overview-grid,
  .status-detail-grid,
  .status-metric-grid,
  .prompt-studio-step-header,
  .prompt-studio-metric-grid,
  .search-form,
  .candidate-header,
  .hero,
  .panel-header-row,
  .preset-grid,
  .message-discussion-actions {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .compact-field-grid {
    grid-template-columns: 1fr;
  }

  .story-choice-row {
    grid-template-columns: 1fr;
  }

    .hero-panel,
    .workbench-flow-panel,
    .workbench-flow-step-header,
    .job-source-grid {
      flex-direction: column;
      align-items: stretch;
    }

    .workbench-header-facts,
    .job-source-grid,
    .workbench-flow-grid,
    .workbench-page .metric-grid,
  .workbench-note-list li {
    grid-template-columns: 1fr;
  }

  .result-row {
    flex-direction: column;
  }

  .result-meta {
    justify-items: start;
  }

  .action-row-stable {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .compact-collaborator-page .shell {
    padding: 1rem;
  }

  .compact-collaborator-page .hero {
    padding: 1rem;
  }

  .compact-collaborator-page .panel,
  .compact-collaborator-page .auth-card,
  .compact-collaborator-page .dialog-card {
    padding: 0.95rem;
  }

  .operations-status-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .operations-board-hero-actions {
    justify-items: stretch;
  }

  .linkedin-harvest-commit,
  .linkedin-harvest-actions-sticky {
    align-items: stretch;
    flex-direction: column;
  }

  .linkedin-harvest-commit .inline-button,
  .linkedin-harvest-actions-sticky .inline-button {
    width: 100%;
  }

  .tutorial-page .panel,
  .tutorial-page .hero {
    padding: 1rem;
    border-radius: 16px;
  }

  .tutorial-page .hero h2 {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    line-height: 1.08;
  }

  .tutorial-page .chip-row {
    gap: 0.45rem;
  }

  .tutorial-page .summary-chip,
  .tutorial-page .inline-button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tutorial-loop-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Workflow-continuity chrome (journey stepper + side-quest banner) ------
   Ilya 2026-06-12, memory rts_workflow_continuity. Compact, BH-density, app
   palette. Purely additive. */

/* The approach-b shell is a 220px sidebar grid; like .page-content / .messages
   the chrome must live in the main column (col 2), else it gets squeezed into
   the nav rail. Mobile collapses to a single column.

   .wfcont-band is the direct grid child now (the stepper is nested inside it),
   so the col-2 rule MUST name the band -- naming only .wfcont-stepper, as this
   did before the 2026-07-16 rebuild, left the wrapper auto-placing into the
   220px nav column at x=0 (Codex round-2 FAIL: band hidden under the nav, and
   its buttons hit-testing to nav links). align-self:start keeps it content-
   height; without it the band stretched to the full row (h=2190). */
.approach-b-page .wfcont-band,
.approach-b-page .wfcont-sidequest {
  grid-column: 2;
  align-self: start;
}
@media (max-width: 820px) {
  .approach-b-page .wfcont-band,
  .approach-b-page .wfcont-sidequest {
    grid-column: 1;
  }
}

/* The workflow band (rebuilt 2026-07-16, Franco).
   Was a 12px breadcrumb line at the very top of the page -- "hidden at the top" and
   "not telling me to do anything steps wise". Now a real panel: stage rail + what to
   do here + what is next on the left, and the last 2 opened pages on the right. */
.wfcont-band {
  display: grid;
  /* Codex 505: this was `minmax(0, 1fr) auto`, which lets the auto recents column take
     whatever it wants and permits the guidance column to reach zero — legal CSS, and
     exactly what happened. The 22rem floor makes that structurally impossible: the
     recruiter's instruction column can no longer be squeezed below a readable width by
     any recent label, present or future, and `minmax(0, auto)` lets the recents shrink
     and ellipsize instead. Below 1100px the media query already collapses to one column,
     so the floor is never wider than the band. */
  /* Ilya, 2026-08-15, on the job page: "why not have all 5 to be in one line ... and have
     Continue (your last 2 pages) below it in a straight line as well."

     It was two columns — rail + guide on the left, Continue chips on the right — so the rail
     was squeezed into roughly half the band and wrapped its seven stages into three ragged
     rows, with the Continue chips wrapping into two beside them. Six lines of chrome above
     the work, and no line read straight.

     One column, stacked in the order the recruiter reads: where the journey goes, where you
     are in it, then where you were last. Every one of those is a full-width straight line. */
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  margin: 6px 24px 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
  border-radius: 10px;
  background: #fff;
}
/* The band is a single column at every width now, so the old collapse rule has nothing left
   to collapse. Kept as the record of why it is gone rather than as a silent deletion. */
/* On non-flow pages (no stepper) the band carries only the recents (Franco 2026-07-16: they
   persist everywhere). Collapse to one column and keep the buttons compact on the right,
   where they sit on flow pages, instead of stretching across the full width. */
.wfcont-band.is-recents-only { grid-template-columns: 1fr; padding: 6px 16px; }
.wfcont-band.is-recents-only .wfcont-recent { margin-left: auto; }
.wfcont-main { min-width: 0; }

/* Empty-orientation-band fix (UX audit 2026-07-19): off-journey pages (dashboard, LinkedIn
   Evaluator, person page, safety review, ...) used to render this section as an empty bordered
   frame -- no stepper matched, so only the recents chips on the right ever showed, wasting
   ~130px. wfcont-band-here is the slim single-row "You are here: <label>" strip those pages
   get instead of the full stage rail + guide block above. */
.wfcont-band.wfcont-band-here { padding: 8px 16px; align-items: center; }
.wfcont-here-compact {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin-top: 0;
}
.wfcont-here-compact .wfcont-here,
.wfcont-here-compact .wfcont-todo,
.wfcont-here-compact .wfcont-next {
  margin: 0;
}
.wfcont-here-compact .wfcont-here strong { font-size: 15px; }
.wfcont-here-compact .wfcont-todo { font-size: 14px; }
.wfcont-here-compact .wfcont-next { font-size: 14px; }

/* Ilya, 2026-08-14: "can you use much less space on the screen to show this." The guide was a
   stacked grid of four lines -- you-are-here, the instruction, next, and next's instruction. The
   instructions went to the Tutorial, and what remains is one row. */
.wfcont-guide {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.wfcont-here,
.wfcont-todo,
.wfcont-next {
  margin: 0;
}
.wfcont-here-eyebrow,
.wfcont-next-eyebrow {
  display: inline-block;
  margin-right: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.wfcont-guide strong {
  font-size: 15px;
  color: var(--rust-dark);
}
/* Larger + black, not fine print (Franco 2026-07-16: bump the band font, make the grey text
   black). The instruction is the point of the panel. */
.wfcont-todo {
  font-size: 15.5px;
  color: var(--ink);
}
.wfcont-next {
  margin-top: 3px;
  font-size: 14px;
  color: var(--ink);
}
.wfcont-next a,
.wfcont-next strong {
  font-weight: 700;
  color: var(--navy);
}
.wfcont-next-todo { margin-left: 6px; color: var(--ink); }

.wfcont-stepper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 0;
  font-size: 14px;
}
/* ONE LINE. The rail is the shape of the journey, so it must read as a line — it wrapped into
   three rows and stopped looking like a sequence at all. It no longer wraps; on a narrow
   window it scrolls sideways within its own strip rather than breaking the shape, and the
   band never scrolls the page (the scrollbar is on the rail, not the panel). */
.wfcont-steps {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
/* THE RAIL WRAPS ON A PHONE RATHER THAN SCROLLING SIDEWAYS (Codex 2735/2745, class 3).
   Measured on the real rendered page at 390: the steps are 417px of content inside a 310px box
   with `overflow-x: auto`, so the recruiter had to swipe the rail to see where they are -- and the
   document reported no overflow at all, which is why page-level responsive checks called this
   green. Codex found it on the live Slate at 390x844.

   Only below 640px, and only the wrapping: above it the rail is 417px inside a wider viewport and
   is byte-identical to before at 417x17 on one row (measured at 640, 760 and 1440). The horizontal
   scroller stays as the fallback for anything still too wide to wrap.

   `row-gap` because two rows of steps with no gap read as one broken line. */
@media (max-width: 640px) {
  .wfcont-steps {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 4px;
  }
}

.wfcont-step {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
/* A slot holding both search lanes stacks them, so the line stays one step per slot. The two
   sit tight together and read as one choice rather than two stages. */
.wfcont-step-lanes {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.25;
}
.wfcont-step + .wfcont-step::before {
  content: "\203A"; /* › */
  color: var(--line);
  margin: 0 8px;
  font-weight: 700;
  align-self: center;
}
.wfcont-step a,
.wfcont-lane > span {
  text-decoration: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--muted);
  padding: 2px 4px;
  border-radius: 4px;
  /* A stage name that breaks in half stops being a step on a line. */
  white-space: nowrap;
}
.wfcont-step a:hover {
  color: var(--rust-dark);
  background: var(--sand);
}
.wfcont-step-past a {
  color: var(--navy);
}
.wfcont-step-current > span,
.wfcont-step-current a {
  color: var(--rust-dark);
  background: var(--sand);
  font-weight: 700;
}
.wfcont-step-future > span {
  color: var(--line);
  font-weight: 500;
}
/* "For: <package name>". Walkthrough 2026-08-05: a long package name collided with the Continue
   chips on the right of the band. `white-space: nowrap` with nothing to stop it meant the name
   could not wrap and would not shrink, so it ran straight out of its grid column and over them --
   width-dependent, which is why it only showed on some packages. It still stays on one line; it
   now truncates instead of trespassing. */
.wfcont-context {
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  min-width: 0;
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Last 2 opened pages. Rebuilt as compact dismissible chips (Ilya 2026-07-19: the two
   big orange buttons made every page longer and could not be dismissed; Franco's original
   two-big-buttons ask is superseded). One slim row: "Continue: <chip> <chip> [Hide]". */
/* display:flex would defeat the hidden attribute the dismiss toggle relies on. */
.wfcont-recent[hidden],
.wfcont-recent-restore[hidden] { display: none !important; }
/* Its own straight line under the rail and the you-are-here line, in reading order: where the
   journey goes, where you are, where you were last. It used to sit in a second column beside
   the rail, which is what squeezed both into wrapping. `nowrap` keeps "Continue: chip chip
   Hide" on one line; a long label ellipsizes inside its chip rather than folding the row. */
.wfcont-recent {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
}
/* THE RECENTS ROW WRAPS ON A PHONE (PL-3, Codex's contract). Measured at 390: a 677px nowrap row
   inside a 327px parent, painting to x=719 in a 375px viewport. `overflow: hidden` clipped it
   internally, so nothing scrolled and nothing looked wrong -- while the row still expanded the
   document and took the whole page sideways with it. That is the third time this class of defect
   has hidden behind a clipping ancestor.

   Wrap rather than scroll: the eyebrow, both chips and Hide all have to stay reachable without
   horizontal scrolling, and a chip may ellipsize but must never push a sibling out of the
   viewport.

   THROUGH THE HALF SCREEN, not just the phone (Codex 2768). I scoped this to 640 and reported the
   760 overflow as pre-existing. It is not optional: Ilya's standing responsive rule is that a full
   OR HALF size screen must avoid sideways scrolling, and 760 is the half screen. Measured there
   before: document 839, recents 796 inside a 712 parent, Hide painting at x=839. After: document
   760, Hide at 360.

   999 rather than 760 exactly, to sit on the breakpoint this codebase already uses. 1440 keeps the
   compact single-line row, which is asserted -- applying this rule there widens the band to 903
   and is not wanted. */
@media (max-width: 999px) {
  .wfcont-recent {
    flex-wrap: wrap;
    row-gap: 4px;
    overflow: visible;
  }
  .wfcont-recent .wfcont-recent-chip,
  .wfcont-recent-chip {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wfcont-recent-restore { margin-left: 0; }
}

.wfcont-recent-eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
/* Codex 505 (P1, 2026-07-26): the cap below was being beaten, so a long recent label
   ("Hull/Ketchum...", 770px) let the auto recents column eat the band and collapsed
   .wfcont-main to LITERALLY 0px on /rts-workbench/companies/ — the recruiter's stage,
   instruction and Next line rendered as a one-character strip.

   The cause is specificity, not order: `.workbench-page a` is (0,1,1) and a bare
   `.wfcont-recent-chip` is (0,1,0), so the generic anchor rule won wherever the body
   carries `workbench-page` — and no amount of moving this rule down the file would have
   helped. The selector below is (0,2,0) and page-agnostic: chips always live inside
   `.wfcont-recent`, so this holds on any page shell, not just the one that broke. */
/* C179: "Continue (your last 2 pages)" is navigation, not the press to make next -- the ghost-
   button look (navy on navy tint), same size as before; rust stays reserved for the one press
   that is the point of the screen. */
.wfcont-recent .wfcont-recent-chip,
.wfcont-recent-chip {
  display: inline-block;
  max-width: 260px;
  padding: 4px 12px;
  border: 1px solid rgba(36, 50, 74, 0.18);
  border-radius: 999px;
  background: rgba(36, 50, 74, 0.08);
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.12s ease;
}
.wfcont-recent-chip:hover,
.wfcont-recent-chip:focus-visible { background: rgba(36, 50, 74, 0.16); }
.wfcont-recent-hide,
.wfcont-recent-restore {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  padding: 2px 9px;
  cursor: pointer;
}
.wfcont-recent-hide:hover,
.wfcont-recent-restore:hover { color: var(--ink); border-color: var(--muted); }
.wfcont-recent-restore { margin-left: auto; white-space: nowrap; }

.wfcont-sidequest {
  grid-column: 2;
  align-self: start;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 6px 24px 0;
  padding: 8px 14px;
  background: var(--sage);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
}
.wfcont-sidequest-arrow {
  color: var(--rust);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.wfcont-sidequest-text {
  flex: 1 1 auto;
}
.wfcont-sidequest-return {
  text-decoration: none;
  font-weight: 700;
  color: var(--rust-dark);
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 6px;
}
.wfcont-sidequest-return:hover {
  background: var(--paper);
}

/* Semantic-search health banner (WS-B1 2026-07-02): a degraded or blocked search
   must never render as a healthy one. Persistent inline banner, not a flash toast. */
.search-health-banner {
  border-radius: 12px;
  padding: 0.8rem 1rem;
  margin: 0.6rem 0;
  border: 1px solid rgba(36, 50, 74, 0.18);
  font-weight: 600;
}
.search-health-banner.is-warning {
  background: #fdf3e2;
  border-color: #e3b25f;
}
.search-health-banner.is-error {
  background: #f9e8e4;
  border-color: #d97a62;
}

/* "RTS is working" for actions that take real time (Ilya, walkthrough 2026-08-02).
   Fixed to the top so it is visible wherever the recruiter had scrolled to -- the button that
   started the work is often far down the page, which is exactly why its own pulse was missed. */
.rts-working-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  padding: 10px 16px;
  background: linear-gradient(135deg, #c56a3d, #b85d34);
  color: #fffaf4;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 10px rgba(36, 50, 74, 0.18);
  animation: pulseBusyButton 1.2s infinite ease-out;
}

/* --------------------------------------------------------------------------------------------
   READABLE MEASURE — added 2026-08-05 after walking production with Ilya.

   "Lots of empty space. Lines that could be one quarter page wide are full page wide."

   The shell is capped at 1440px, but nothing capped the TEXT inside it, so explanatory copy ran
   the full width and pushed the actual controls below the fold. A quarter of the Company Recruiter
   notes panel was instructions. Prose now stops at a readable measure; the panels, tables and
   controls keep the full width they need.

   Deliberately NOT applied to: table cells, inputs, textareas, job/message bodies, or anything a
   recruiter reads at length — those set their own width and several are already handled above.
   -------------------------------------------------------------------------------------------- */

.panel > p,
.panel > .supporting,
.panel > .helper,
.panel-body > p,
.panel-body > .supporting {
  max-width: 68ch;
}

/* Section intros that sit directly under a heading — the "what this is" paragraphs. */
.panel > h2 + p,
.panel > h3 + p,
.panel > h2 + .supporting,
.panel > h3 + .supporting {
  max-width: 72ch;
}

/* WITHDRAWN 2026-08-05, Codex 706. A `.data-grid td:last-child { width:1%; white-space:nowrap }`
   rule stood here. It assumed every grid's last column holds controls; many end with a reason, a
   note, a summary or a URL, and forcing those not to wrap causes horizontal overflow — the layout
   pass making the layout worse. The action columns that motivated it are already handled by the
   existing `.data-grid .row-actions` rule above, and a `width:auto` table sizes its columns to
   content anyway, which is what the hack was working around. Nothing replaces it. */

/* The measure cap above only reaches paragraphs that are DIRECT children of .panel. Several panels
   wrap their heading and intro copy in .panel-header-row > div — including the Company Recruiter
   notes panel that started this — so those paragraphs escaped it entirely. */
.panel-header-row p,
.panel-header-row .supporting {
  max-width: 72ch;
}

/* --------------------------------------------------------------------------------------------
   "WHAT'S THIS?" DISCLOSURE — added 2026-08-05, same walkthrough.

   A panel's copy is three different things stacked as one wall: STATE (true now, changes,
   actionable), RULES (what the field is for — read once in a lifetime), and CONSEQUENCE (what
   happens when you press the button). Ilya, on the Company Recruiter notes panel: ~85 words of
   instruction for one textarea and one button, a quarter of the page before you reach the box you
   came to type in.

   Rules go behind this. They are not deleted — several were asked for in review and are still true;
   they are simply not what a recruiter needs on the twentieth visit. STATE stays visible. CONSEQUENCE
   moves next to the control it belongs to (.control-consequence below).
   -------------------------------------------------------------------------------------------- */

details.page-help {
  margin: 0.35rem 0 0;
}

details.page-help > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 1rem;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
}

details.page-help > summary::-webkit-details-marker {
  display: none;
}

details.page-help > summary::before {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 1.05em;
  height: 1.05em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
}

details.page-help[open] > summary {
  margin-bottom: 0.4rem;
}

details.page-help > summary:hover,
details.page-help > summary:focus-visible {
  color: var(--ink, inherit);
}

details.page-help p {
  max-width: 68ch;
  margin: 0 0 0.4rem;
}

details.page-help p:last-child {
  margin-bottom: 0;
}

/* The sentence that says what pressing this button will cost, sitting with the button rather than
   buried at the end of a paragraph three inches above it. */
.control-consequence {
  font-size: 1rem;
  color: var(--muted);
  max-width: 52ch;
}

/* ---- Job Candidates grids: the row's action stays on screen at phone width ----
   Codex 2451 / AUG15-S12. At 390x844 both Job Candidates grids kept their primary row action
   inside the nested horizontal scroller and far outside it: the warm-start wrapper was 293px wide
   over 844px of content with "Re-engage" at x=698, and imported history 296px over 1153px with
   "Record submittal" at x=1049. The document itself did not overflow, so nothing on screen even
   suggested the table scrolled — the recruiter had to guess, then drag hundreds of pixels, to
   reach the one control the row exists for.

   The action column sticks to the right edge of its own scrollport instead. The table, the
   columns, the destinations and the decision logic are all unchanged; this is presentation only,
   there is no second action mechanism, and it is scoped by class to these two grids rather than
   applied to every .data-grid on the site.

   Desktop is deliberately untouched: above 640px there is room for the whole row and a pinned
   column would only add a seam. */
@media (max-width: 640px) {
  .data-grid--sticky-action thead th:last-child,
  .data-grid--sticky-action tbody td:last-child {
    position: sticky;
    right: 0;
    /* Opaque, or the scrolling cells read through the pinned one. Matches .data-grid-wrap. */
    background: #fffdf9;
    /* Says "there is more to the left of me" without a scrollbar the phone will not draw. */
    box-shadow: -8px 0 8px -8px rgba(36, 50, 74, 0.45);
    z-index: 1;
  }
  .data-grid--sticky-action thead th:last-child {
    /* Header cells sit above body cells where a sticky header is also in play. */
    z-index: 2;
  }
}

/* ── Slate Review: compact scored-candidate rows (Ilya's ruling 2026-09-04) ──────────────────
   At 1218x900 zero candidates were visible without scrolling; at 150% zoom (an 812px viewport)
   each candidate filled a whole screen. The old row was a fixed 5-column table cell with a
   two-line "Job fit / Their interest" grid and a 4.6rem-7rem rationale box.

   This is NOT the `.data-grid-cards` idiom (that one stacks every field on its own line below
   1000px, which is the opposite of what a 150% zoom needs) — `.slate-review-compact` keeps one
   flex line per candidate at every width, so the fix holds at 1218, 720 and 390 alike. Additive:
   `.data-grid-cards` and every other `.data-grid` table on the site is untouched. */
/* THE SORT CONTROLS ARE BACK (coordinator, 2026-09-04): one compact line of chips above the
   flex rows, not the old full-width column header, and not hidden -- hiding them removed a
   function nobody asked to lose. Same data_grid.js click handler/th-index-to-td-index mechanism;
   CSS display never affects `HTMLTableRowElement.cells`, so this is presentation only. */
.slate-review-compact table.data-grid thead {
  display: block;
}
.slate-review-compact table.data-grid thead tr {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(36, 50, 74, 0.14);
}
.slate-review-compact table.data-grid thead th {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(36, 50, 74, 0.18);
  background: #fff;
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.slate-review-compact table.data-grid thead th[data-sort] {
  cursor: pointer;
}
.slate-review-compact table.data-grid thead th[data-sort]:hover {
  border-color: #b9763f;
  color: var(--navy);
}
.slate-review-compact table.data-grid thead th[aria-sort] {
  border-color: #b9763f;
  background: #fff1df;
  color: var(--navy);
}
/* Rationale and the blank actions header carried no sort control before either -- kept in the
   DOM (so th-index still lines up with td-index) but not shown as a chip. */
.slate-review-compact table.data-grid thead th:not([data-sort]) {
  display: none;
}
.slate-review-compact table.data-grid,
.slate-review-compact table.data-grid tbody {
  display: block;
  width: 100%;
}
.slate-review-compact table.data-grid tr[data-job-fit-row] {
  display: flex;
  /* NOT wrap: with 4 columns whose combined basis was a few px over the container, `wrap` put
     the whole actions column on its OWN flex line under the other three -- doubling the row's
     height instead of shortening it. `nowrap` plus `flex-shrink`/`min-width: 0` on every column
     keeps all four side by side at any width; a column that is genuinely too narrow (Accept/
     Pass/Decline together, at 390px) wraps ITS OWN buttons onto a second line via
     `.slate-row-actions-inner`'s own `flex-wrap: wrap`, which grows only that column, not the
     whole row into a second copy of every column. */
  flex-wrap: nowrap;
  /* NOT baseline: aligning very differently-sized children (a chip badge, a name, three
     buttons) to a shared text baseline pads the row well past its tallest child's own box --
     measured 153px of row for an 89px-tall actions cell. flex-start keeps the row's height to
     its tallest child. */
  align-items: flex-start;
  column-gap: 0.5rem;
  padding: 0.28rem 0.5rem;
  border-bottom: 1px solid rgba(36, 50, 74, 0.10);
  width: 100%;
  box-sizing: border-box;
}
.slate-review-compact table.data-grid tr[data-job-fit-row]:last-child {
  border-bottom: 0;
}
.slate-review-compact table.data-grid tr[data-job-fit-row] > td {
  display: block;
  padding: 0;
  border: 0;
  min-width: 0;
}
/* UAT 3029 (Codex, exact image 24fd01f3c, real package 10): the rule above -- needed so the
   row's own <td> children behave as flex items of the row -- is MORE SPECIFIC than
   `.slate-row-candidate`'s own `display: flex` below (three elements + one class + one attribute
   beats one class), so it silently won and turned that cell back into ordinary stacked blocks.
   Name, the contact-path phrase and the evidence chip then rendered as three separate lines
   instead of one, which is most of why a row with REAL content (the fixture below now carries
   both) measured ~88px instead of one compact line. Same ancestor chain with `.slate-row-candidate`
   appended restores it at higher specificity than the block-ifying rule above. */
.slate-review-compact table.data-grid tr[data-job-fit-row] > td.slate-row-candidate {
  display: flex;
}
/* The cutoff separator (`grid-group-row`) is not a candidate row — it keeps its ordinary
   full-width table-row rendering among the flex rows above and below it. */
.slate-review-compact table.data-grid tr.grid-group-row {
  display: table;
  width: 100%;
}

.slate-row-score-cell {
  /* The score badge alone, now its own sortable column (coordinator, 2026-09-04) -- fixed to
     its content width, same as it sat inline before the split. */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.slate-row-candidate {
  /* No grow: the rationale column absorbs the slack, so the name column stays a readable,
     consistent width instead of stretching on a wide screen and starving actions on a narrow
     one. Shrinks (and its own children ellipsis) when the row is genuinely tight. Widened from
     190px (UAT 3029, Codex, exact image 24fd01f3c): a real name now shares this line with real
     evidence (the contact-path phrase and the freshness chip, folded onto one line below), and
     190px was only ever wide enough for the name alone. */
  flex: 0 1 240px;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow: hidden;
}
/* Sarah, Ask Claude #206, 2026-11-05: the in-process warning is a sentence, not a short chip. In this
   240px flex row it ran over the next columns (td:has(.rts-chip) turns clipping off), so it takes its
   own full-width line under the name. */
.slate-row-candidate:has([data-testid="in-process-with-colleague"]) {
  flex-wrap: wrap;
  align-content: flex-start;
}
.slate-row-candidate [data-testid="in-process-with-colleague"] {
  flex: 1 0 100%;
  border-radius: 8px;
}
/* Codex 4756: at phone and tablet widths the name column shrinks to about 80px, which made the warning a
   vertical strip. The row wraps instead, and the name and warning take a full line of their own. */
@media (max-width: 1000px) {
  .slate-review-compact table.data-grid tr[data-job-fit-row]:has([data-testid="in-process-with-colleague"]) {
    flex-wrap: wrap;
  }
  .slate-review-compact table.data-grid tr[data-job-fit-row] > td.slate-row-candidate:has([data-testid="in-process-with-colleague"]) {
    flex: 1 0 100%;
    max-width: none;
  }
}
.slate-row-candidate strong {
  /* No grow, no shrink, capped: the name is the thing being decided about, so it keeps a
     protected share of the line and only elides at its OWN cap -- never squeezed toward zero by
     the muted context after it, which is `.slate-row-sub` below and gives way instead. */
  flex: 0 0 auto;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slate-row-score {
  flex: 0 0 auto;
}
.slate-row-sub {
  /* UAT 3029: the contact-path phrase and the evidence chip used to be separate flex children
     competing with the name for the same line; grouped into one span in the template now (see
     the row markup), so this single track absorbs whatever the name (fixed, above) does not use
     and ellipsizes AS A UNIT -- including the evidence chip nested inside it -- rather than each
     piece clipping independently. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}
/* The evidence-chip pill nested inside `.slate-row-sub` must not force its own minimum width
   past what the ellipsis above allows -- an inline-block child with no override sets its
   automatic min-width to its own content size, which would push the parent wider than its box. */
.slate-row-sub .evidence-freshness {
  overflow: hidden;
  vertical-align: middle;
}

.slate-row-jobfit {
  /* "Job fit" split out as its own sortable column (coordinator, 2026-09-04) -- same pill
     content, just its own td now instead of sharing one with Interest. */
  flex: 0 1 150px;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.3;
}
.slate-row-review {
  flex: 0 1 170px;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.3;
}
.slate-row-review-line {
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slate-row-review-pill {
  display: inline-block;
  margin-left: 0.4rem;
}

.slate-row-rationale {
  /* The one column that GROWS: it absorbs whatever width candidate/review/actions do not need,
     which is what keeps the row's four columns on one line without any of them fighting for
     space -- and it is the column that is meant to be a single ellipsis line anyway. */
  flex: 1 1 160px;
  min-width: 0;
}
/* The rationale is a display, never an editable field (nothing on this page writes it) — a
   <details> is enough: closed, it is the one-line ellipsis the ruling asks for; open, it carries
   the full rationale plus the prior-history/decline/outreach context that used to sit under it
   unconditionally. */
.slate-rationale-summary {
  cursor: pointer;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 1rem;
}
.slate-rationale-summary::-webkit-details-marker {
  color: var(--muted);
}
.slate-rationale-body {
  margin-top: 0.35rem;
  max-width: 42rem;
}

.slate-row-actions {
  /* UAT 3029 (Codex, exact image 24fd01f3c, real package 10): fixed, no-shrink -- a real row
     ("Accept" + a "+" reason toggle, "Pass", "Decline" + its own "+" toggle) wrapped onto two
     lines at this column's old auto/shrink width, which is what made the row ~90px tall instead
     of one line. A fixed floor wide enough for all three short labels plus both toggles, at the
     shrunk button/font sizes below, so it can never wrap -- the rationale column (`flex: 1 1
     160px`, unchanged) is the one that gives way when the row is tight. */
  flex: 0 0 auto;
  min-width: 13.5rem;
}
.slate-row-actions-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* NOT wrap (was): that is the second line the UAT screenshot showed under "Accept". The
     buttons themselves already carry the shortest wording that still says what they do
     ("Accept" / "Pass" / "Decline"), so there is nothing left to shrink onto a second line --
     nowrap plus the fixed floor above is what keeps them on one. */
  /* Ilya, 2026-09-30 (meeting item 9): the buttons now say their consequence -- "Accept for this
     job", "Skip for now", "Decline for this job" -- and he chose "full labels, taller rows" over
     the one-line row. So the actions wrap: Accept on its own line, Skip and Decline under it. */
  flex-wrap: wrap;
  gap: 0.2rem;
  min-width: 0;
}
.slate-row-actions-inner .inline-form {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
}
/* The page's ordinary buttons are sized for a click target on their own row; three of them plus
   two "+ reason" toggles is a lot of click targets to ask the same size of here. Same smaller
   scale `.data-grid .row-actions .inline-button` already uses elsewhere on this page's grids. */
.slate-row-actions-inner .inline-button {
  padding: 0.12rem 0.4rem;
  font-size: 1rem;
  border-radius: 6px;
  line-height: 1.3;
}
.slate-row-actions-inner input[type="text"] {
  width: 7.5rem;
  min-width: 0;
  padding: 0.15rem 0.35rem;
  font-size: 1rem;
}
.slate-row-actions-inner label {
  font-size: 1rem;
  white-space: nowrap;
}
/* The optional reason box (Accept/Recruiter's own call/Decline) is what made every one of six
   rows tall — a text input, and on Decline a checkbox too, always open whether or not the
   recruiter meant to use them. Collapsed behind one small toggle per form; the button itself
   needs no toggle to fire. */
.slate-reason-details {
  display: inline-block;
  vertical-align: middle;
}
.slate-reason-details > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  /* Widened from 1.15rem to keep the "+" glyph off the circle's edge now that it renders at
     the 14px floor instead of 10.92px. */
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(36, 50, 74, 0.18);
}
.slate-reason-details > summary::-webkit-details-marker {
  display: none;
}
.slate-reason-details[open] {
  display: block;
  margin-top: 0.2rem;
}
.slate-reason-details[open] > summary {
  display: block;
  margin-bottom: 0.2rem;
}

/* Below 640px there is not enough width for four generous columns -- the row stays ONE flex
   line (nothing is hidden: candidate / review / rationale keep shrinking together and their own
   text ellipsis, via `min-width: 0`, rather than forcing the row wider). UAT 3029 removed the
   actions column's own fallback of wrapping its three buttons onto a second line here too (that
   was the row's own height doubling, which is exactly what this checkpoint measures and fixes) --
   the fixed `.slate-row-actions` floor above holds at every width, so candidate/jobfit/review/
   rationale are the ones that give way, down to their own text ellipsis, which is what the
   no-HORIZONTAL-overflow rule actually requires. */
@media (max-width: 640px) {
  .slate-row-candidate,
  .slate-row-jobfit,
  .slate-row-review,
  .slate-row-rationale {
    flex-basis: 70px;
  }
  .slate-row-actions-inner {
    justify-content: flex-start;
  }
}

/* 4852 (Ilya's walkthrough, Scenario 3 -- Jim reads with one eye). On the slate, Messaging and
   Tasks the name is at the left edge and the presses are ~1,100px away at the right, and the
   grid's own hover (rgba 0.06) and zebra (cream 0.45) were too faint to follow across that gap.
   Scoped to those four surfaces only; every other grid keeps its look.
   - a light alternating tint on every other row;
   - the row under the pointer, or holding keyboard focus, gets a clear background AND a 4px rust
     bar at its left edge, so the eye can ride the row from the name to the buttons.
   Button height needs nothing here: every `.inline-button` already has `min-height: 38px`
   (franco/approach_b_styles.html), and root is 14px, so 1rem is already the text floor. */
.search-package-slate-review-page .data-grid > tbody > tr:not(.grid-group-row):nth-child(even),
.task-grid > tbody > tr.task-row-alt {
  background: rgba(36, 50, 74, 0.045);
}
.task-grid > tbody > tr:nth-child(even):not(.task-row-alt) {
  /* Tasks pair each task with 1-3 fold rows, so position parity is not task parity; the template
     marks every other TASK instead (task-row-alt). */
  background: transparent;
}
.search-package-slate-review-page .data-grid > tbody > tr:not(.grid-group-row):hover,
.search-package-slate-review-page .data-grid > tbody > tr:not(.grid-group-row):focus-within,
.task-grid > tbody > tr.task-main-row:hover,
.task-grid > tbody > tr.task-main-row:focus-within {
  background: rgba(184, 93, 52, 0.12);
}
.search-package-slate-review-page .data-grid > tbody > tr:not(.grid-group-row):hover > td:first-child,
.search-package-slate-review-page .data-grid > tbody > tr:not(.grid-group-row):focus-within > td:first-child,
.task-grid > tbody > tr.task-main-row:hover > td:first-child,
.task-grid > tbody > tr.task-main-row:focus-within > td:first-child {
  box-shadow: inset 4px 0 0 #b65a32;
}
.messaging-person-list > li.messaging-person:nth-child(even) {
  background: rgba(36, 50, 74, 0.045);
}
.messaging-person-list > li.messaging-person:hover,
.messaging-person-list > li.messaging-person:focus-within {
  background: rgba(184, 93, 52, 0.08);
  box-shadow: inset 4px 0 0 #b65a32;
}
/* Who a message goes to, or that RTS holds no email for them: read, not a grey caption. */
.messaging-person-channel {
  color: #10233f;
  font-size: 15px;
}