/* Recruiter portals — employer and consultancy.
 *
 * A deliberately different shell from the seeker site: dark navy rail, dense
 * data-first layout, no marketing chrome. Someone should know which side of the
 * product they are on without reading a word.
 *
 * Tokens come from main.css plus the --rc-* set below.
 *
 * These MUST be defined at :root, not on .rc-shell. Plenty of pages reuse these
 * components outside the portal shell — the post-a-job chooser, the moderation
 * queue, the candidate profile, alerts and the seeker side of messaging all
 * extend base.html. Scoping the tokens to .rc-shell left every one of those with
 * an undefined var(), and an undefined var() invalidates the whole declaration
 * at computed-value time: `background: var(--rc-accent)` fell back to
 * transparent, so the chooser's employer button rendered as white text on white.
 * Borders disappeared the same way. Same failure mode as the calc() trap.
 */

:root {
  --rc-accent: var(--accent);
  --rc-rail: #16255c;
  --rc-rail-hover: #223a86;
  --rc-line: #e2e8f0;
  --rc-muted: #64748b;
}

.rc-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px 1fr;
  background: var(--off-white);
  font-family: var(--font);
}

/* The agency portal runs violet. Same layout, different identity — a consultancy
   recruiter and an employer recruiter must never mistake one for the other. */
.rc-shell[data-portal="consultancy"] { --rc-accent: #7c3aed; }

/* ── Rail ── */
.rc-rail {
  background: var(--rc-rail);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.rc-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px 20px;
  color: #fff; font-weight: 800; font-size: 1.05rem;
  text-decoration: none;
}
.rc-brand-mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--rc-accent);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: .95rem;
}
.rc-brand-kind {
  display: block; font-size: .66rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--rc-accent);
}

.rc-org {
  margin: 0 14px 18px; padding: 12px 14px;
  background: rgba(255,255,255,.06);
  border-radius: var(--r);
}
.rc-org-name { color: #fff; font-weight: 700; font-size: .9rem; line-height: 1.3; }
.rc-org-meta {
  font-size: .72rem; color: #94a3b8; margin-top: 6px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.rc-org-role { font-weight: 600; }

/* Verification was a grey word in a metadata line, which read as a label rather
 * than a status. A tinted pill with a mark says "state", and the three states are
 * visually distinct rather than three interchangeable strings. */
.rc-verified {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .66rem; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 100px; white-space: nowrap;
  background: rgba(34,197,94,.16); color: #4ade80;
  border: 1px solid rgba(74,222,128,.35);
}
.rc-verified svg { width: 11px; height: 11px; display: block; }
.rc-verified.is-pending {
  background: rgba(245,158,11,.16); color: #fbbf24;
  border-color: rgba(251,191,36,.35);
}
.rc-verified.is-suspended {
  background: rgba(239,68,68,.16); color: #f87171;
  border-color: rgba(248,113,113,.35);
}

.rc-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.rc-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r);
  color: #cbd5e1; text-decoration: none;
  font-size: .88rem; font-weight: 500;
  transition: background var(--trans), color var(--trans);
}
.rc-nav a:hover { background: var(--rc-rail-hover); color: #fff; }
.rc-nav a.is-active { background: var(--rc-accent); color: #fff; font-weight: 600; }
.rc-nav a.is-disabled { opacity: .42; pointer-events: none; }
.rc-nav-label {
  padding: 16px 12px 6px; font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #64748b;
}
.rc-rail-foot { margin-top: auto; padding: 16px 12px 0; }

/* ── Main ── */
.rc-main { min-width: 0; padding: 28px 32px 56px; }
.rc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.rc-title { font-size: 1.5rem; font-weight: 800; color: #0f172a; }
.rc-sub { color: var(--rc-muted); font-size: .88rem; margin-top: 4px; }

.rc-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--r);
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  font-size: .86rem; margin-bottom: 22px;
}
.rc-banner strong { display: block; margin-bottom: 2px; }
/* The base banner is amber, which reads as "note". A refusal or a fake-recruiter
 * warning has to read as "stop" — the hiring-manager review queue used this class
 * for exactly one line (a domain mismatch on a claimed company) before it
 * existed, so the page's most important warning rendered as a mild notice. */
.rc-banner-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.rc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 26px; }
.rc-stat { background: #fff; border: 1px solid var(--rc-line); border-radius: var(--r-lg); padding: 18px; }
.rc-stat-n { font-size: 1.9rem; font-weight: 800; color: #0f172a; line-height: 1; }
.rc-stat-l { font-size: .78rem; color: var(--rc-muted); margin-top: 7px; font-weight: 600; letter-spacing: .02em; }

.rc-card { background: #fff; border: 1px solid var(--rc-line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 22px; }
.rc-card-head { padding: 15px 18px; border-bottom: 1px solid var(--rc-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rc-card-title { font-weight: 700; color: #0f172a; font-size: .95rem; }

.rc-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.rc-table th { text-align: left; padding: 11px 18px; background: #f8fafc; color: var(--rc-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.rc-table td { padding: 13px 18px; border-top: 1px solid var(--rc-line); color: #1e293b; }
.rc-table tr:hover td { background: #f8fafc; }

/* Wide tables scroll inside their own box — the page body must never scroll
   sideways. resp_audit.py asserts exactly that. */
.rc-scroll { overflow-x: auto; }

.rc-empty { padding: 40px 18px; text-align: center; color: var(--rc-muted); font-size: .88rem; }

.rc-pill { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.rc-pill-active   { background: #dcfce7; color: #166534; }
.rc-pill-draft    { background: #f1f5f9; color: #475569; }
.rc-pill-pending  { background: #fef3c7; color: #92400e; }
.rc-pill-paused   { background: #e0e7ff; color: #3730a3; }
.rc-pill-rejected { background: #fee2e2; color: #991b1b; }
.rc-pill-closed, .rc-pill-expired { background: #f1f5f9; color: #64748b; }

/* The button carries a resting colour-tinted shadow so the hover has something
   to grow FROM. A hover that only appears on hover reads as a flicker; a hover
   that deepens an existing shadow reads as the surface lifting. */
.rc-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r);
  background-color: var(--rc-accent); color: #fff;
  /* Top-light gradient: the same trick that makes a physical key look moulded
     rather than printed. Sits over background-color so the accent still drives
     the hue. */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 58%);
  border: none; font-family: var(--font); font-size: .88rem; font-weight: 600;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .12),
    0 6px 16px -8px color-mix(in srgb, var(--rc-accent) 60%, transparent);
  transition:
    color .24s ease,
    transform .24s cubic-bezier(.2, .8, .25, 1),
    box-shadow .24s cubic-bezier(.2, .8, .25, 1),
    background-color .24s ease;
}

/* The sheen. A single highlight swept left→right on hover — the whole reason
   the button reads as "premium" rather than "a rectangle that moved 2px".
   Pointer-events off so it never eats the click. */
.rc-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, .30) 50%,
    rgba(255, 255, 255, 0) 62%);
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.2, .8, .25, 1);
  pointer-events: none;
}

/* brightness() lifts every channel toward white, so a saturated blue, purple or
   green went PALE on hover — it read as the button greying out rather than
   responding. color-mix darkens the accent itself, which keeps the hue. */
/* .rc-btn is an <a> on the chooser, and ui2.css ships a site-wide
   `a:hover { color: var(--link-hover) }` (#1d4ed8). That selector scores
   (0,1,1); the base `.rc-btn { color:#fff }` scores only (0,1,0) — so on hover
   the LABEL flipped to link-blue on top of the accent fill, which is what made
   the button look like it was reverting to "default blue". Every interactive
   state has to restate the colour at (0,2,0) or higher to outrank it. */
/* :not(.rc-btn-ghost) is load-bearing — without it this would also outrank
   `.rc-btn-ghost { color:#334155 }` and paint the ghost button white on white. */
.rc-btn:not(.rc-btn-ghost):link,
.rc-btn:not(.rc-btn-ghost):visited,
.rc-btn:not(.rc-btn-ghost):hover,
.rc-btn:not(.rc-btn-ghost):focus,
.rc-btn:not(.rc-btn-ghost):active,
.rc-btn:not(.rc-btn-ghost):focus-visible { color: #fff; }

.rc-btn:hover {
  background-color: color-mix(in srgb, var(--rc-accent) 86%, #0b1020);
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, .14),
    0 14px 30px -10px color-mix(in srgb, var(--rc-accent) 78%, transparent);
}
.rc-btn:hover::after { transform: translateX(120%); }

.rc-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px color-mix(in srgb, var(--rc-accent) 60%, transparent),
    0 10px 24px -12px color-mix(in srgb, var(--rc-accent) 70%, transparent);
}

/* Press: settle below the resting position and drop the lift shadow, so the
   click feels like it went in rather than just stopped animating. */
.rc-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .18) inset, 0 1px 2px rgba(15, 23, 42, .10);
  transition-duration: .06s;
}

/* Browsers without color-mix() (pre-2023) get the old darken, not a dead
   button — an unsupported color-mix() invalidates the whole declaration. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .rc-btn { box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 6px 16px -8px rgba(15, 23, 42, .30); }
  .rc-btn:hover { filter: brightness(.92); box-shadow: 0 2px 4px rgba(15, 23, 42, .14), 0 14px 30px -10px rgba(15, 23, 42, .40); }
}

.rc-btn-ghost {
  background-color: #fff; background-image: none;
  color: #334155; border: 1px solid var(--rc-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.rc-btn-ghost:hover {
  background-color: #f8fafc; filter: none;
  border-color: #cbd5e1; color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 18px -10px rgba(15, 23, 42, .35);
}
.rc-btn-ghost::after { background: none; }
.rc-btn-ghost:active { box-shadow: 0 1px 2px rgba(15, 23, 42, .10) inset; }

@media (prefers-reduced-motion: reduce) {
  .rc-btn, .rc-btn::after { transition-duration: .01ms; }
  .rc-btn:hover { transform: none; }
  .rc-btn:hover::after { transform: translateX(-120%); }
}

/* ── Status filter chips ── */
.rc-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rc-chip {
  padding: 6px 14px; border-radius: 100px;
  background: #fff; border: 1px solid var(--rc-line);
  color: #475569; font-size: .8rem; font-weight: 600; text-decoration: none;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.rc-chip:hover { background: #f1f5f9; }
.rc-chip.is-on { background: var(--rc-accent); border-color: var(--rc-accent); color: #fff; }

/* ── Row actions ── */
.rc-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rc-actions form { margin: 0; }
.rc-link-btn {
  background: none; border: none; padding: 0;
  color: var(--rc-accent); font-family: var(--font); font-size: .84rem;
  font-weight: 600; cursor: pointer;
}
.rc-link-btn:hover { text-decoration: underline; }
.rc-link-danger { color: #dc2626; }
.rc-muted-txt { color: var(--rc-muted); font-size: .82rem; }
.rc-reject { font-size: .76rem; color: #991b1b; margin-top: 4px; max-width: 42ch; }

/* ── Job form ── */
.rc-form { max-width: 860px; }
.rc-form-body { padding: 22px 24px; }
.rc-form-foot {
  padding: 16px 24px; border-top: 1px solid var(--rc-line); background: #f8fafc;
  display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap;
}
.rc-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rc-textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
select.rc-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

/* Checkbox rows read as one target — label and box move together. */
.rc-check { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: #334155; cursor: pointer; }
.rc-check input { width: 16px; height: 16px; accent-color: var(--rc-accent); }
.rc-check input:disabled { cursor: not-allowed; }
.rc-check input:disabled + span { color: #94a3b8; }

/* ── ATS ── */
.rc-filterbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rc-filterbar .rc-input { flex: 1 1 200px; max-width: 320px; }
.rc-chip-n {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: 100px; background: rgba(0,0,0,.08);
  font-size: .72rem; font-weight: 700;
}
.rc-chip.is-on .rc-chip-n { background: rgba(255,255,255,.28); }

.rc-two-col { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; align-items: start; }

/* Pipeline stage colours. Terminal states read differently from in-progress
   ones so a full list scans at a glance. */
.rc-stage-applied     { background: #e0e7ff; color: #3730a3; }
.rc-stage-viewed      { background: #f1f5f9; color: #475569; }
.rc-stage-shortlisted { background: #cffafe; color: #155e75; }
.rc-stage-interview   { background: #fef3c7; color: #92400e; }
.rc-stage-offered     { background: #ede9fe; color: #5b21b6; }
.rc-stage-hired       { background: #dcfce7; color: #166534; }
.rc-stage-rejected    { background: #fee2e2; color: #991b1b; }

.rc-resume { width: 100%; height: 620px; border: none; display: block; background: #f8fafc; }

.rc-trail { list-style: none; padding: 8px 18px 18px; margin: 0; }
.rc-trail li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rc-line); }
.rc-trail li:last-child { border-bottom: none; }
.rc-trail-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rc-accent); margin-top: 6px; flex-shrink: 0;
}
.rc-trail-head { font-size: .87rem; color: #0f172a; text-transform: capitalize; }
.rc-trail-note { font-size: .82rem; color: #334155; margin-top: 4px; }

/* ── Messaging ── */
.rc-threads { list-style: none; margin: 0; padding: 0; }
.rc-threads li { border-bottom: 1px solid var(--rc-line); }
.rc-threads li:last-child { border-bottom: none; }
.rc-thread-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 15px 18px; text-decoration: none; color: inherit;
  transition: background var(--trans);
}
.rc-thread-row:hover { background: #f8fafc; }
.rc-thread-main { min-width: 0; }
.rc-thread-title { font-weight: 700; color: #0f172a; font-size: .93rem; display: flex; align-items: center; gap: 8px; }
.rc-thread-snip { font-size: .84rem; color: #475569; margin-top: 5px; overflow-wrap: anywhere; }
.rc-unread {
  display: inline-block; min-width: 19px; padding: 1px 6px;
  border-radius: 100px; background: var(--rc-accent, #3b82f6); color: #fff;
  font-size: .7rem; font-weight: 800; text-align: center;
}

.rc-msgs { padding: 18px; display: flex; flex-direction: column; gap: 12px; max-height: 540px; overflow-y: auto; }
.rc-msg { display: flex; }
.rc-msg.is-mine { justify-content: flex-end; }
.rc-msg-bubble {
  max-width: 72%; padding: 11px 14px; border-radius: 14px;
  background: #f1f5f9; border: 1px solid var(--rc-line);
}
.rc-msg.is-mine .rc-msg-bubble { background: #eff6ff; border-color: #bfdbfe; }
.rc-msg-body { font-size: .89rem; line-height: 1.6; color: #0f172a; overflow-wrap: anywhere; }
.rc-msg-file { display: inline-block; margin-top: 6px; font-size: .84rem; font-weight: 600; color: var(--rc-accent, #3b82f6); }
.rc-msg-meta { display: flex; align-items: center; gap: 10px; font-size: .72rem; color: var(--rc-muted, #64748b); margin-top: 7px; }
.rc-msg-report { margin: 0; }
.rc-msg-report .rc-link-btn { font-size: .72rem; }

.rc-msg-form { padding: 16px 18px; border-top: 1px solid var(--rc-line); background: #f8fafc; }
.rc-msg-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.rc-msg-actions input[type=file] { font-size: .82rem; color: var(--rc-muted, #64748b); }

/* ── Moderation ── */
.rc-mod-body { padding: 20px 24px; }
.rc-mod-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.rc-mod-meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rc-muted); font-weight: 700; margin-bottom: 3px; }
.rc-mod-meta dd { font-size: .9rem; color: #0f172a; margin: 0; }
.rc-mod-desc { font-size: .88rem; line-height: 1.65; color: #334155; padding: 14px 16px; background: #f8fafc; border-radius: var(--r); margin-bottom: 18px; }
.rc-mod-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rc-mod-form .rc-input { flex: 1 1 240px; }
.rc-mod-buttons { display: flex; gap: 10px; }

/* ── Auth pages (login / register) ── */
.rc-auth {
  min-height: 100vh;
  display: grid; grid-template-columns: 46% 54%;
  font-family: var(--font);
}
.rc-auth[data-portal="consultancy"] { --rc-accent: #7c3aed; }
.rc-auth-side {
  background: var(--rc-rail, #16255c);
  color: #e2e8f0;
  padding: 56px 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.rc-auth-kind {
  display: inline-block; align-self: flex-start;
  padding: 5px 12px; border-radius: 100px;
  background: var(--rc-accent); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  margin-bottom: 22px;
}
.rc-auth-h { font-size: 2.1rem; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 14px; }
.rc-auth-p { font-size: .95rem; line-height: 1.6; color: #94a3b8; margin-bottom: 30px; max-width: 40ch; }
.rc-auth-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.rc-auth-list li { display: flex; gap: 11px; font-size: .88rem; color: #cbd5e1; }
.rc-auth-tick { color: var(--rc-accent); font-weight: 800; flex-shrink: 0; }
.rc-auth-switch { margin-top: 34px; font-size: .83rem; color: #94a3b8; }
.rc-auth-switch a { color: #fff; font-weight: 600; }

.rc-auth-main { background: #fff; display: flex; align-items: center; justify-content: center; padding: 48px 40px; }
.rc-auth-form { width: 100%; max-width: 420px; }
.rc-auth-title { font-size: 1.65rem; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.rc-auth-sub { font-size: .86rem; color: var(--rc-muted, #64748b); margin-bottom: 26px; }
.rc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rc-field { margin-bottom: 16px; }
.rc-label { display: block; font-size: .78rem; font-weight: 600; color: #475569; margin-bottom: 6px; }
.rc-input {
  width: 100%; padding: 11px 13px;
  border: 1px solid #cbd5e1; border-radius: var(--r);
  font-size: .92rem; font-family: var(--font); color: #0f172a;
  background: #fff; box-sizing: border-box;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.rc-input:focus { outline: none; border-color: var(--rc-accent); box-shadow: 0 0 0 3px rgba(59,130,246,.14); }
.rc-hint { font-size: .74rem; color: var(--rc-muted, #64748b); margin-top: 5px; }
.rc-hint-ok  { color: #15803d; font-weight: 600; }
.rc-hint-bad { color: #b91c1c; font-weight: 600; }
.rc-input-bad { border-color: #ef4444; }
.rc-input-bad:focus { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.14); }

/* Password field with its reveal button. Padding on the input keeps typed text
   from running under the button. */
.rc-pw-wrap { position: relative; }
.rc-pw-wrap .rc-input { padding-right: 44px; }
.rc-pw-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 6px;
  color: #94a3b8; display: flex; align-items: center; border-radius: 6px;
  transition: color var(--trans), background var(--trans);
}
.rc-pw-btn:hover { color: #334155; background: #f1f5f9; }

/* Inline flash block used by the portal shells. */
.rc-flash-inline { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.rc-flash-inline .flash { box-shadow: none; animation: none; }
.rc-submit { width: 100%; justify-content: center; margin-top: 8px; padding: 13px; }
.rc-auth-alt { text-align: center; font-size: .83rem; color: var(--rc-muted, #64748b); margin-top: 20px; }

/* ── Portal chooser (/jobs/post/) ── */
.rc-choose { max-width: 940px; margin: 0 auto; padding: 56px 20px 72px; }
.rc-choose-h { text-align: center; font-size: 2rem; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.rc-choose-p { text-align: center; color: var(--rc-muted, #64748b); margin-bottom: 38px; }
/* auto-fit, not a fixed 1fr 1fr: the third card (hiring manager) wrapped onto a
 * row of its own and sat half-width beside empty space. responsive.css still
 * forces a single column on narrow screens. */
.rc-choose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.rc-choose-card {
  background: #fff; border: 1px solid var(--rc-line, #e2e8f0);
  border-radius: var(--r-lg); padding: 30px 26px;
  display: flex; flex-direction: column;
  transition: box-shadow var(--trans), transform var(--trans);
}
.rc-choose-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.rc-choose-card h2 { font-size: 1.2rem; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.rc-choose-card p { font-size: .88rem; color: var(--rc-muted, #64748b); line-height: 1.6; margin-bottom: 18px; }
.rc-choose-card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
.rc-choose-card li { font-size: .85rem; color: #334155; display: flex; gap: 9px; }
.rc-choose-card .rc-btn { margin-top: auto; justify-content: center; }