/* ================================================================
   PRIMESHARE CAREERS — site theme bridge
   Loaded AFTER css/style.css (site) and assets/style.css (app).
   Re-points the Careers app onto the marketing site's dark palette
   so /careers/ reads as one continuous site.
   ================================================================ */

/* ── Palette handover ── */
.careers-page {
  --bg:         var(--void);
  --card:       var(--panel);
  --ink:        var(--white);
  --muted:      #7080a0;
  --brand:      var(--blue);
  --brand-dark: var(--blue-lt);
  --brand-soft: rgba(20,97,255,.14);
  --line:       var(--border);
  --navy:       var(--white);
  --danger:     #ff7a70;
  --field:      #0b1428;
  --field-line: rgba(255,255,255,.16);
}

.careers-page {
  background: var(--void);
  color: var(--text);
  font-family: var(--fbody);
  line-height: 1.6;
}

/* Pages that open with a .page-hero need no body offset — the hero carries
   its own nav-height padding, exactly as on the marketing site. Pages that
   start straight into content get .careers-pad instead. */
.careers-page.careers-pad { padding-top: var(--nav-h); }
.careers-page.careers-pad.ann-visible { padding-top: calc(var(--nav-h) + var(--ann-h, 38px)); }

/* The app's own sticky header is replaced by the site navigation. */
.careers-page .site-header { display: none; }

.careers-page .wrap { max-width: 1120px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.careers-page main { padding: 0 0 72px; }

/* ── Headings ── */
.careers-page h1,
.careers-page h2,
.careers-page h3 { color: var(--white); font-family: var(--fhead); font-weight: 600; }

/* ── Hero (site page-hero is used instead of the light hero card) ── */
.careers-page .ph-content { max-width: 760px; }
.careers-page .hero-lead { font-size: 1.02rem; line-height: 1.65; color: var(--text); }
.careers-page .hero-cta { margin-top: 14px; font-weight: 600; color: var(--teal) !important; }

.careers-page .journey-intro { color: var(--white) !important; font-weight: 600; margin: 0 0 12px; }
.careers-page .journey { gap: 9px; margin: 0 0 18px; }
.careers-page .journey span {
  background: var(--teal-dim); color: var(--teal);
  border: 1px solid rgba(0,229,204,.22);
  font-size: .78rem; font-weight: 700; padding: 6px 13px;
}
.careers-page .journey b { color: var(--muted); }

.careers-page .notice {
  background: rgba(20,97,255,.07); border: 1px solid rgba(20,97,255,.22);
  color: var(--text); font-size: .84rem; border-radius: var(--r-sm); padding: 14px 16px;
}

/* ── Cards ── */
.careers-page .card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
  padding: 28px; margin: 22px 0;
}
.careers-page .hero.card { border-top: 1px solid var(--border); }

.careers-page .section-title {
  color: var(--white); border-bottom: 1px solid var(--border);
  font-size: 1.35rem; padding-bottom: 13px; margin-bottom: 20px;
}
.careers-page .section-title:before { background: var(--teal); }

.careers-page .eyebrow { color: var(--teal); }
.careers-page .help,
.careers-page .field-help,
.careers-page .muted { color: var(--muted); }
.careers-page label { color: var(--text); font-weight: 600; }
.careers-page a { color: var(--teal); }
.careers-page a:hover { color: var(--teal); text-decoration: underline; }

/* ── Form fields ── */
.careers-page input,
.careers-page select,
.careers-page textarea {
  background: var(--field); color: var(--white);
  border: 1px solid var(--field-line); border-radius: var(--r-sm);
}
.careers-page input::placeholder,
.careers-page textarea::placeholder { color: #5d6b88; }
.careers-page input:focus,
.careers-page select:focus,
.careers-page textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20,97,255,.22);
}
.careers-page select option { background: #0b1428; color: #fff; }
.careers-page input[type=file] { padding: 9px 12px; color: var(--text); }
.careers-page input[type=file]::file-selector-button {
  background: rgba(255,255,255,.06); color: var(--white);
  border: 1px solid var(--field-line); border-radius: 6px;
  padding: 7px 14px; margin-right: 12px; font: inherit; font-weight: 600; cursor: pointer;
}
.careers-page input[type=file]::file-selector-button:hover { background: rgba(20,97,255,.18); border-color: var(--blue); }
.careers-page input[type=date] { color-scheme: dark; }

.careers-page .money-field { background: var(--field); border-color: var(--field-line); }
.careers-page .money-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20,97,255,.22); }
.careers-page .money-field > span { color: var(--muted); }
.careers-page .money-field input { background: transparent; border-left-color: var(--border); border-right-color: var(--border); }

/* ── Choice controls ── */
.careers-page .check-card {
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--r-sm); font-weight: 500;
}
.careers-page .check-card:hover { border-color: rgba(20,97,255,.45); background: rgba(20,97,255,.09); }
.careers-page .check-card input { accent-color: var(--blue); }
.careers-page .check-card:has(input:checked) {
  border-color: rgba(0,229,204,.45); background: var(--teal-dim); color: var(--white);
}

.careers-page .rating-choice span {
  background: rgba(255,255,255,.03); border: 1px solid var(--field-line); color: var(--text);
}
.careers-page .rating-choice:hover span { border-color: var(--blue); background: rgba(20,97,255,.14); color: var(--white); }
.careers-page .rating-choice input:checked + span {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 0 0 3px rgba(20,97,255,.22);
}

.careers-page .radio-options span {
  background: rgba(255,255,255,.03); border: 1px solid var(--field-line);
  color: var(--text); font-weight: 500;
}
.careers-page .radio-options label:hover span { border-color: var(--blue); background: rgba(20,97,255,.12); color: var(--white); }
.careers-page .radio-options input:checked + span {
  background: rgba(20,97,255,.18); border-color: var(--blue);
  color: var(--white); box-shadow: inset 0 0 0 1px var(--blue);
}

.careers-page .tool-category { color: var(--teal); font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin: 26px 0 12px; }
.careers-page .other-tools { border-top: 1px solid var(--border); }

/* ── Buttons ── */
.careers-page .btn {
  background: var(--blue); color: #fff; border-radius: var(--r-sm);
  font-weight: 600; padding: 13px 26px; box-shadow: 0 8px 22px rgba(20,97,255,.28);
}
.careers-page .btn:hover { background: var(--blue-lt); }
.careers-page .btn.secondary { background: transparent; border: 1px solid var(--border2); color: var(--white); box-shadow: none; }
.careers-page .btn.secondary:hover { background: rgba(255,255,255,.05); }

.careers-page .submit-area { border-top: 1px solid var(--border); }
.careers-page .consent { color: var(--text); }
.careers-page .consent input { accent-color: var(--teal); }

/* ── Status blocks ── */
.careers-page .success {
  background: rgba(0,229,204,.08); border: 1px solid rgba(0,229,204,.28); color: var(--text);
  border-radius: var(--r-sm);
}
.careers-page .success h1 { color: var(--teal); }
.careers-page .error {
  background: rgba(255,107,53,.09); border: 1px solid rgba(255,107,53,.32);
  color: #ffb59a; border-radius: var(--r-sm);
}
.careers-page .error h1 { color: var(--orange); }

/* The app's .pill differs from the site's teal chip — keep the app shape,
   take the site colours. */
.careers-page .pill {
  background: var(--teal-dim); color: var(--teal);
  border: 1px solid rgba(0,229,204,.22); font-weight: 700;
}

/* ── Admin: candidate pool tables ── */
.careers-page table { color: var(--text); }
.careers-page th {
  background: var(--panel2); color: var(--white);
  border-bottom: 1px solid var(--border); font-weight: 600;
}
.careers-page td { border-bottom: 1px solid var(--border); }
.careers-page tbody tr:hover td { background: rgba(255,255,255,.025); }
.careers-page .score { color: var(--teal); }
.careers-page .toolbar input,
.careers-page .toolbar select { background: var(--field); }
.careers-page .admin-nav { color: var(--text); }

/* ── Narrow screens ── */
@media (max-width: 767px) {
  .careers-page .card { padding: 20px; }
  .careers-page .wrap { padding-left: 15px; padding-right: 15px; }
}

/* ── Candidate detail: score breakdown ───────────────────────────── */
.careers-page .cand-head { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; }
.careers-page .cand-score { text-align:right; min-width:170px; }
.careers-page .cand-score-num {
  font-family:'Bebas Neue', var(--fhead); font-size:3.6rem; line-height:1;
  color:var(--teal); letter-spacing:.01em;
}
.careers-page .cand-score-num span { font-size:1.1rem; color:var(--muted); margin-left:2px; }
.careers-page .cand-score-band { color:var(--text); font-size:.82rem; font-weight:600; margin-top:6px; }

.careers-page .dim { padding:20px 0; border-top:1px solid var(--border); }
.careers-page .dim:first-of-type { border-top:none; padding-top:6px; }
.careers-page .dim-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.careers-page .dim-name { color:var(--white); font-weight:600; font-size:1.02rem; }
.careers-page .dim-figs { display:flex; gap:16px; font-size:.8rem; color:var(--muted); white-space:nowrap; }
.careers-page .dim-pts b { color:var(--white); }
.careers-page .dim-bar {
  height:7px; border-radius:99px; background:rgba(255,255,255,.06);
  overflow:hidden; margin:11px 0 4px;
}
.careers-page .dim-bar span { display:block; height:100%; border-radius:99px; }
.careers-page .dim-bar span.good { background:linear-gradient(90deg, var(--teal), #06d6a0); }
.careers-page .dim-bar span.mid  { background:linear-gradient(90deg, var(--blue-lt), var(--blue)); }
.careers-page .dim-bar span.low  { background:linear-gradient(90deg, var(--orange), #f59e0b); }

.careers-page .rt-table { margin-top:10px; font-size:.86rem; }
.careers-page .rt-table td { border-bottom:1px solid rgba(255,255,255,.045); padding:8px 10px 8px 0; }
.careers-page .rt-table tr:last-child td { border-bottom:none; }
.careers-page .rt-cell { text-align:right; white-space:nowrap; width:1%; }

.careers-page .rt-dots { display:inline-flex; gap:4px; vertical-align:middle; }
.careers-page .rt-dot {
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
}
.careers-page .rt-dot.on  { background:var(--teal); border-color:var(--teal); }
.careers-page .rt-dot.on.mid { background:var(--blue-lt); border-color:var(--blue-lt); }
.careers-page .rt-dot.on.low { background:var(--orange); border-color:var(--orange); }
.careers-page .rt-num { display:inline-block; min-width:22px; margin-left:10px; color:var(--white); font-weight:700; }

@media (max-width:640px) {
  .careers-page .cand-head { grid-template-columns:1fr; }
  .careers-page .cand-score { text-align:left; }
  .careers-page .rt-table td:first-child { padding-right:12px; }
}

/* Wide admin tables scroll inside their card rather than pushing the page. */
.careers-page .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.careers-page .table-scroll table { display: table; min-width: 780px; margin: 0; }
.careers-page .table-scroll th { position: static; }

/* ── Application form: unanswered-question feedback ──────────────────
   The rating and yes/no inputs are hidden behind styled labels. Keep them
   reachable by keyboard (clip instead of opacity:0) and give the form a
   visible way to say what is still missing. */
.careers-page .rating-choice input,
.careers-page .radio-options input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; opacity: 1;
}
.careers-page .rating-choice input:focus-visible + span,
.careers-page .radio-options input:focus-visible + span,
.careers-page .check-card input:focus-visible + span {
  outline: 3px solid rgba(0,229,204,.55); outline-offset: 2px;
}

.careers-page .needs-answer {
  border-left: 3px solid var(--orange);
  padding-left: 14px; margin-left: -17px;
  background: rgba(255,107,53,.05); border-radius: 0 6px 6px 0;
}
.careers-page .needs-answer .rating-choice span,
.careers-page .needs-answer .radio-options span,
.careers-page .needs-answer .check-card { border-color: rgba(255,107,53,.5); }

.careers-page .form-errors { margin-bottom: 20px; padding: 16px 18px; }
.careers-page .form-errors strong { display: block; color: var(--orange); margin-bottom: 8px; }
.careers-page .form-errors ul { margin: 0; padding-left: 20px; }
.careers-page .form-errors li { margin: 4px 0; font-size: .86rem; }
.careers-page .form-errors a { color: #ffb59a; text-decoration: underline; }
.careers-page .form-errors a:hover { color: var(--white); }
.careers-page .form-errors p { margin: 8px 0 0; font-size: .82rem; }
.careers-page .btn:disabled { opacity: .6; cursor: progress; }
/* The error banner spans the full submit row rather than sharing it with the button. */
.careers-page .submit-area { flex-wrap: wrap; }
.careers-page .form-errors { flex: 1 0 100%; width: 100%; }

/* ── Score card links ────────────────────────────────────────────── */
/* The fixed navbar would otherwise cover an anchored section. */
/* The announcement bar sits above the nav, so both count. */
.careers-page #scorecard,
.careers-page .dim { scroll-margin-top: calc(var(--nav-h) + var(--ann-h, 0px) + 24px); }

.careers-page .score-link { display: inline-block; text-decoration: none; }
.careers-page .score-link:hover { text-decoration: none; }
.careers-page .score-link .score { text-decoration: underline; text-underline-offset: 3px; }
.careers-page .score-link:hover .score { color: var(--white); }
.careers-page .score-hint {
  display: block; font-size: .66rem; font-weight: 600; color: var(--muted);
  letter-spacing: .04em; margin-top: 2px; opacity: 0; transition: opacity .18s;
}
.careers-page .score-link:hover .score-hint,
.careers-page .score-link:focus-visible .score-hint { opacity: 1; color: var(--teal); }

.careers-page .cand-score-link { display: block; text-decoration: none; }
.careers-page .cand-score-link:hover { text-decoration: none; }
.careers-page .cand-score-link:hover .cand-score-num { color: #4ff5e2; }
.careers-page .cand-score-hint { font-size: .72rem; color: var(--muted); margin-top: 8px; }
.careers-page .cand-score-link:hover .cand-score-hint { color: var(--teal); }

/* Briefly flag the score card when arrived at from a #scorecard link. */
.careers-page #scorecard:target { border-color: rgba(0,229,204,.4); }

@media (max-width: 640px) {
  .careers-page .score-hint { opacity: 1; color: var(--teal); }
}

/* ── Printing a score card for the interview ─────────────────────── */
@media print {
  .careers-page { background: #fff !important; color: #111 !important; padding-top: 0 !important; }
  .careers-page #navbar, .careers-page #annBar, .careers-page .ps-footer,
  .careers-page #cookieBar, .careers-page .chat-widget, .careers-page .chat-btn-new,
  .careers-page .admin-nav, .careers-page .page-hero, .careers-page form { display: none !important; }
  .careers-page .card {
    background: #fff !important; border: 1px solid #ccc !important;
    box-shadow: none !important; break-inside: avoid; page-break-inside: avoid;
    margin: 0 0 14px !important; padding: 16px !important;
  }
  .careers-page h1, .careers-page h2, .careers-page h3,
  .careers-page .dim-name, .careers-page .cand-score-num,
  .careers-page .rt-num, .careers-page b { color: #111 !important; }
  .careers-page .help, .careers-page .muted, .careers-page .field-help,
  .careers-page .dim-figs, .careers-page .rt-table td { color: #333 !important; }
  .careers-page .cand-score-hint, .careers-page .score-hint { display: none !important; }
  /* Browsers drop backgrounds when "background graphics" is off, which would
     print every rating dot as an empty circle. Print the number instead. */
  .careers-page .rt-dots, .careers-page .dim-bar { display: none !important; }
  .careers-page .rt-num::after { content: ' / 5'; font-weight: 400; }
  .careers-page .rt-num { margin-left: 0 !important; }
  /* A long score card should flow across pages rather than pushing a blank one. */
  .careers-page #scorecard { break-inside: auto; page-break-inside: auto; }
  .careers-page .dim { break-inside: avoid; page-break-inside: avoid; }
  .careers-page .pill { background: #eee !important; color: #111 !important; border-color: #bbb !important; }
  .careers-page a { color: #111 !important; text-decoration: none !important; }
}