/* 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 {
  /* Ink, not the mid grey it was. Every primary button elsewhere on the site is
     black; the portals rendered theirs #4a4a4a, which read as a disabled
     control rather than the main action on the page. */
  --rc-accent: var(--navy);
  /* Portal identity moved off the buttons and onto the small kind pill. A
     saturated hue on the largest control was too loud for a four-colour system;
     one small solid mark is enough to tell two portals apart. */
  --rc-hue: var(--c-indigo);
  --rc-rail: #000000;
  --rc-rail-hover: #262626;
  --rc-line: #e8e8e8;
  --rc-muted: #6b6b6b;
}

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

/* Same layout, different identity — a consultancy recruiter and an employer
   recruiter must never mistake one for the other. The difference is now a hue
   on the kind pill rather than a different button colour. */
.rc-shell[data-portal="consultancy"],
.rc-auth[data-portal="consultancy"] { --rc-hue: var(--c-teal); }
.rc-shell[data-portal="hiring_manager"],
.rc-auth[data-portal="hiring_manager"] { --rc-hue: var(--c-plum); }

/* ── Rail ── */
.rc-rail {
  background: var(--rc-rail);
  color: #d4d4d4;
  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: #ffffff; 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: #ffffff; 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: #ffffff; font-weight: 700; font-size: .9rem; line-height: 1.3; }
.rc-org-meta {
  font-size: .72rem; color: #999999; 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(176,176,176,.16); color: #c4c4c4;
  border-color: rgba(196,196,196,.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: #d4d4d4; 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: #ffffff; }
.rc-nav a.is-active { background: var(--rc-accent); color: #ffffff; 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: #6b6b6b;
}
.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: #1a1a1a; }
.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: #fafafa; border: 1px solid #e8e8e8; color: #555555;
  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: #ffffff; border: 1px solid var(--rc-line); border-radius: var(--r-lg); padding: 18px; }
.rc-stat-n { font-size: 1.9rem; font-weight: 800; color: #1a1a1a; 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: #ffffff; 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: #1a1a1a; font-size: .95rem; }

.rc-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.rc-table th { text-align: left; padding: 11px 18px; background: #fafafa; 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: #262626; }
.rc-table tr:hover td { background: #fafafa; }

/* 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: #f5f5f5; color: #555555; }
.rc-pill-pending  { background: #f5f5f5; color: #555555; }
.rc-pill-paused   { background: #e8e8e8; color: #444444; }
.rc-pill-rejected { background: #fee2e2; color: #991b1b; }
.rc-pill-closed, .rc-pill-expired { background: #f5f5f5; color: #6b6b6b; }

/* 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: #ffffff;
  /* No top-light wash. It was meant to read as moulded; against a flat-black
     system it just reads as the button being a gradient, which is the one
     thing this palette does not do. */
  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(26,26,26, .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 is gone. At rest it sat partly over the left edge, so a flat black
   button rendered as light-grey-to-black -- which is exactly the gradient the
   palette was meant to remove, on the most-seen button in the product. */

/* 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) }` (#0a0a0a). That selector scores
   (0,1,1); the base `.rc-btn { color:#ffffff }` 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:#444444 }` 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: #ffffff; }

.rc-btn:hover {
  background-color: color-mix(in srgb, var(--rc-accent) 86%, #000000);
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(26,26,26, .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 #ffffff,
    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(26,26,26, .18) inset, 0 0 0 1px #e8e8e8;
  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 0 0 1px #e8e8e8; }
  .rc-btn:hover { filter: brightness(.92); box-shadow:0 0 0 1px #e8e8e8; }
}

.rc-btn-ghost {
  background-color: #ffffff; background-image: none;
  color: #444444; border: 1px solid var(--rc-line);
  box-shadow:0 0 0 1px #e8e8e8;
}
.rc-btn-ghost:hover {
  background-color: #fafafa; filter: none;
  border-color: #d4d4d4; color: #1a1a1a;
  box-shadow:0 0 0 1px #e8e8e8;
}
.rc-btn-ghost::after { background: none; }
.rc-btn-ghost:active { box-shadow: 0 1px 2px rgba(26,26,26, .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: #ffffff; border: 1px solid var(--rc-line);
  color: #555555; font-size: .8rem; font-weight: 600; text-decoration: none;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.rc-chip:hover { background: #f5f5f5; }
.rc-chip.is-on { background: var(--rc-accent); border-color: var(--rc-accent); color: #ffffff; }

/* ── 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: #fafafa;
  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%, #6b6b6b 50%), linear-gradient(135deg, #6b6b6b 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: #444444; 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: #999999; }

/* ── 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: #e8e8e8; color: #444444; }
.rc-stage-viewed      { background: #f5f5f5; color: #555555; }
.rc-stage-shortlisted { background: #f0f0f0; color: #555555; }
.rc-stage-interview   { background: #f5f5f5; color: #555555; }
.rc-stage-offered     { background: #e8e8e8; color: #444444; }
.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: #fafafa; }

.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: #1a1a1a; text-transform: capitalize; }
.rc-trail-note { font-size: .82rem; color: #444444; 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: #fafafa; }
.rc-thread-main { min-width: 0; }
.rc-thread-title { font-weight: 700; color: #1a1a1a; font-size: .93rem; display: flex; align-items: center; gap: 8px; }
.rc-thread-snip { font-size: .84rem; color: #555555; margin-top: 5px; overflow-wrap: anywhere; }
.rc-unread {
  display: inline-block; min-width: 19px; padding: 1px 6px;
  border-radius: 100px; background: var(--rc-accent, #333333); color: #ffffff;
  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: #f5f5f5; border: 1px solid var(--rc-line);
}
.rc-msg.is-mine .rc-msg-bubble { background: #f5f5f5; border-color: #d4d4d4; }
.rc-msg-body { font-size: .89rem; line-height: 1.6; color: #1a1a1a; overflow-wrap: anywhere; }
.rc-msg-file { display: inline-block; margin-top: 6px; font-size: .84rem; font-weight: 600; color: var(--rc-accent, #333333); }
.rc-msg-meta { display: flex; align-items: center; gap: 10px; font-size: .72rem; color: var(--rc-muted, #6b6b6b); 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: #fafafa; }
.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, #6b6b6b); }

/* ── 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: #1a1a1a; margin: 0; }
.rc-mod-desc { font-size: .88rem; line-height: 1.65; color: #444444; padding: 14px 16px; background: #fafafa; 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 {
  /* Minus the new .rc-authbar above it, or the split screen pushes a scrollbar
     onto every login page. */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  display: grid; grid-template-columns: 46% 54%;
  font-family: var(--font);
}
.rc-auth[data-portal="consultancy"] { --rc-accent: #6b6b6b; }
.rc-auth-side {
  background: var(--rc-rail, #000000);
  color: #e8e8e8;
  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-hue); color: #ffffff;
  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: #ffffff; line-height: 1.2; margin-bottom: 14px; }
.rc-auth-p { font-size: .95rem; line-height: 1.6; color: #999999; 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: #d4d4d4; }
.rc-auth-tick { color: var(--rc-accent); font-weight: 800; flex-shrink: 0; }
.rc-auth-switch { margin-top: 34px; font-size: .83rem; color: #999999; }
.rc-auth-switch a { color: #ffffff; font-weight: 600; }

.rc-auth-main { background: #ffffff; 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: #1a1a1a; margin-bottom: 6px; }
.rc-auth-sub { font-size: .86rem; color: var(--rc-muted, #6b6b6b); 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: #555555; margin-bottom: 6px; }
.rc-input {
  width: 100%; padding: 11px 13px;
  border: 1px solid #d4d4d4; border-radius: var(--r);
  font-size: .92rem; font-family: var(--font); color: #1a1a1a;
  background: #ffffff; 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 1px #e8e8e8; }
.rc-hint { font-size: .74rem; color: var(--rc-muted, #6b6b6b); 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 1px #e8e8e8; }

/* 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: #999999; display: flex; align-items: center; border-radius: 6px;
  transition: color var(--trans), background var(--trans);
}
.rc-pw-btn:hover { color: #444444; background: #f5f5f5; }

/* 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, #6b6b6b); 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: #1a1a1a; margin-bottom: 8px; }
.rc-choose-p { text-align: center; color: var(--rc-muted, #6b6b6b); 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: #ffffff; border: 1px solid var(--rc-line, #e8e8e8);
  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: #1a1a1a; margin-bottom: 8px; }
.rc-choose-card p { font-size: .88rem; color: var(--rc-muted, #6b6b6b); 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: #444444; display: flex; gap: 9px; }
.rc-choose-card .rc-btn { margin-top: auto; justify-content: center; }

/* ── Company logo panel ──
   The preview box is the same shape as the job card's, so what a recruiter
   sees here is what a candidate gets, at the size they get it. */
.rc-logo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.rc-logo-preview {
  width: 64px; height: 64px; flex: 0 0 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--stone-lt); border: 1px solid var(--gray-200);
  font-weight: 800; font-size: 1.3rem; color: var(--navy);
}
/* contain, not cover: logos.normalise() pads a wide mark onto a transparent
   square and cover would crop that padding straight back off. */
.rc-logo-preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 5px; }
.rc-logo-copy strong { display: block; font-size: .95rem; color: var(--navy); }
.rc-logo-copy p { margin: 3px 0 0; font-size: .84rem; color: var(--gray-500); }
.rc-logo-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.rc-btn-quiet { background: transparent; color: var(--gray-600); border: 1px solid var(--gray-200); }
.rc-btn-quiet:hover { color: var(--error); border-color: var(--error); }
.rc-logo-card .rc-help { font-size: .82rem; color: var(--gray-500); margin: 8px 0 0; line-height: 1.5; }

/* Client list: the mark next to the name, and a one-field upload per row. */
.rc-client-name { display: flex; align-items: center; gap: 10px; }
.rc-logo-mini {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--stone-lt); border: 1px solid var(--gray-200);
  font-size: .68rem; font-weight: 700; color: var(--navy);
}
.rc-logo-mini img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 2px; }
.rc-logo-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-logo-inline input[type=file] { max-width: 190px; font-size: .78rem; }
.rc-btn-sm { padding: 5px 11px; font-size: .78rem; }

/* ── Portal auth header ──
   This shell has no base.html navbar, so the split screen previously started
   at pixel zero with nothing naming the site. Slim on purpose: a login page
   has no use for the full eight-link bar (trap 14). */
.rc-authbar {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 0 24px;
  background: #ffffff; border-bottom: 1px solid var(--gray-200);
}
.rc-authbar-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.rc-authbar-word { font-weight: 800; letter-spacing: .06em; color: var(--navy); font-size: .95rem; }
.rc-authbar-links { display: flex; align-items: center; gap: 4px; }
.rc-authbar-links a {
  position: relative; padding: 8px 12px;
  font-size: .85rem; font-weight: 500; color: var(--gray-600); text-decoration: none;
  transition: color .15s ease;
}
/* Same single-signal hover as the main navbar: one solid rule, no pill. */
.rc-authbar-links a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: var(--navy); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.rc-authbar-links a:hover { color: var(--navy); }
.rc-authbar-links a:hover::after { transform: scaleX(1); }

/* Banner icon: same tint-behind, hue-as-mark rule the icon tiles use. */
.rc-banner-ic {
  flex-shrink: 0; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-orange-tint); color: var(--c-orange-deep);
}
.rc-banner-ic svg { width: 16px; height: 16px; }