/* ==========================================================================
   Careers — the handful of things the intranet's design system does not have.

   Everything else comes from base.css. If a rule here duplicates something in
   base.css, delete it here; if a rule here would be useful to the intranet, it
   belongs there instead.
   ========================================================================== */

/* Points shown against a question or a vacancy. Tabular figures so a column
   of them lines up, which is the whole reason a recruiter scans the column. */
.rd-points {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* A gate is categorically different from a scored question — it ends the
   assessment — so it is marked with a word, not just a colour. */
.rd-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.rd-tag--gate { background: var(--rd-red-tint); color: var(--rd-red); border-color: #f0cfc9; }
.rd-tag--scored { background: var(--rd-teal-tint); color: var(--rd-teal-dark); border-color: #cfe3e9; }
.rd-tag--reuse { background: var(--rd-green-tint); color: #5c6f10; border-color: #dcebb0; }
.rd-tag--new { background: var(--rd-surface); color: var(--rd-muted); border-color: var(--rd-border); }
.rd-tag--ok { background: var(--rd-green-status-tint); color: #2b7d44; border-color: #c3e6cf; }
.rd-tag--no { background: var(--rd-red-tint); color: var(--rd-red); border-color: #f0cfc9; }
.rd-tag--warn { background: var(--rd-amber-tint); color: #96690f; border-color: #f2ddb4; }

/* Readiness list on the dashboard: the reasons a vacancy cannot go out. */
.rd-reasons { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--rd-red); font-size: 0.82rem; }
.rd-reasons li { margin-bottom: 0.15rem; }

/* The compliance panel. Deliberately loud — it is the one thing on the page
   that must not be skimmed past. */
.rd-screen {
  border-left: 4px solid var(--rd-green-status);
  background: var(--rd-green-status-tint);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--rd-radius) var(--rd-radius) 0;
  font-size: 0.85rem;
}
.rd-screen--flagged { border-left-color: var(--rd-red); background: var(--rd-red-tint); }
.rd-screen--warn { border-left-color: var(--rd-amber); background: var(--rd-amber-tint); }
.rd-screen ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* Two-up layout for the dashboard and the handover page. Collapses rather
   than scrolling sideways on a narrow screen. */
.rd-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rd-gap); align-items: start; }
@media (max-width: 900px) { .rd-split { grid-template-columns: 1fr; } }

/* The preview iframe on the handover page — a real render of the real page,
   at a phone width, so nobody signs off on a desktop-only assumption. */
.rd-device {
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--rd-shadow);
}
.rd-device iframe { display: block; width: 100%; height: 600px; border: 0; }

/* Fenced code for the integration snippet the site owner copies. */
.rd-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  background: var(--rd-charcoal);
  color: #e6e6e6;
  padding: 0.85rem 1rem;
  border-radius: var(--rd-radius);
  overflow-x: auto;
  white-space: pre;
}
.rd-code--plain {
  background: var(--rd-surface);
  color: var(--rd-charcoal);
  border: 1px solid var(--rd-border);
  white-space: pre-wrap;
  max-height: 22rem;
  overflow-y: auto;
}

.rd-filetree {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--rd-muted);
}
.rd-filetree b { color: var(--rd-charcoal); font-weight: 600; }