/* ============================================================
   Fix My Appointment — Careers page (careers.css)

   Scoped entirely to `.cr-*` classes (plus #Page_Careers where a
   page-level override is genuinely needed), so nothing here can reach
   the shared components this project's other pages depend on
   (.form-control, .btn-primary, .form-card are all app-wide — see
   CLAUDE.md's note on keeping rules scoped).

   COLOUR CHOICES ARE DELIBERATE, NOT DECORATIVE: --saffron-500 measures
   2.66:1 against white text, well under the 4.5:1 WCAG floor, so it is
   used ONLY as a background behind dark ink or as a thin accent, never
   as a button fill under white text. Where a strong coloured label was
   wanted, --plan-h2 / --plan-h3 / --plan-h4 are used instead — those
   three exist in style.css precisely because they clear the floor.
   ============================================================ */

/* ---------- Hero ---------- */
.cr-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 9vw, 96px) 0 clamp(40px, 7vw, 72px);
  background:
    radial-gradient(120% 140% at 12% 0%, #0E7C72 0%, var(--teal-700) 48%, #073F3B 100%);
  color: #fff;
  isolation: isolate;
}
/* A single soft light source rather than a busy pattern — enough depth to
   stop the block reading as a flat coloured rectangle, cheap to paint, and
   it degrades to plain teal if blend modes are unsupported. */
.cr-hero-glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 90%;
  background:
    radial-gradient(45% 60% at 22% 30%, rgba(63, 196, 180, 0.42), transparent 70%),
    radial-gradient(38% 55% at 82% 12%, rgba(232, 134, 46, 0.30), transparent 72%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
}
.cr-hero-inner { position: relative; }
.cr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cr-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.2vw, 3.35rem);
  line-height: 1.08;
  font-weight: 800;
  margin: 18px 0 14px;
  letter-spacing: -0.02em;
}
/* ~62ch cap: long measures are tiring to read, the same reasoning that
   capped the homepage founder message in update 452. */
.cr-hero-lead {
  max-width: 62ch;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.90);
  margin: 0 0 26px;
}
.cr-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* The outline button's shared rule is tuned for a light page; on the dark
   hero it would render near-invisible ink on near-invisible border. */
#Page_Careers .cr-btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}
#Page_Careers .cr-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
}
.cr-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 5vw, 54px);
  margin: 38px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.cr-hero-stats li { display: flex; flex-direction: column; gap: 2px; }
.cr-hero-stats b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--teal-300);
}
.cr-hero-stats span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.80); }

/* ---------- Live openings ticker ----------
   Two copies of the same item list sit inside .cr-ticker-track, and the
   track is translated by exactly -50% — so the moment the first copy
   scrolls out, the second is in precisely the position the first started
   from and the loop is seamless with no JS timer involved. careers.js is
   what duplicates the list; changing one without the other breaks the
   seam, so they are commented in both places. */
.cr-ticker {
  display: flex;
  align-items: stretch;
  background: linear-gradient(90deg, var(--ink-900), #123F3B 60%, var(--teal-700));
  color: #fff;
  overflow: hidden;
}
.cr-ticker[hidden] { display: none; }
.cr-ticker-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 12px 18px;
  background: var(--saffron-500);
  color: var(--ink-900);           /* dark ink on saffron — see header note */
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}
.cr-ticker-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7A2E00;
  animation: crPulse 1.6s ease-in-out infinite;
}
@keyframes crPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}
.cr-ticker-viewport { flex: 1; overflow: hidden; display: flex; align-items: center; }
.cr-ticker-track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  will-change: transform;
  animation: crTickerScroll 34s linear infinite;
}
.cr-ticker:hover .cr-ticker-track,
.cr-ticker:focus-within .cr-ticker-track { animation-play-state: paused; }
@keyframes crTickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.cr-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  font-size: 0.88rem;
  color: #fff;
  text-decoration: none;
}
.cr-ticker-item:hover { text-decoration: underline; }
.cr-ticker-item b { font-weight: 700; }
.cr-ticker-item em {
  font-style: normal;                /* a tag, not emphasis */
  color: var(--teal-300);
  font-size: 0.8rem;
}
.cr-ticker-sep { color: rgba(255, 255, 255, 0.35); }

/* ---------- Shared headings ---------- */
.cr-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.015em;
  margin: 8px 0 10px;
}
.cr-measure { max-width: 62ch; margin-left: auto; margin-right: auto; }

/* ---------- Why join ---------- */
.cr-why { background: var(--bg); }
.cr-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.cr-why-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cr-why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cr-why-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  font-size: 1.25rem;
  margin-bottom: 14px;
}
.cr-why-card h3 {
  font-family: var(--font-display);
  font-size: 1.04rem;
  color: var(--ink-900);
  margin: 0 0 7px;
}
.cr-why-card p { font-size: 0.92rem; line-height: 1.6; color: var(--ink-600); margin: 0; }

/* ---------- Openings ---------- */
.cr-openings-list { display: grid; gap: 16px; margin-top: 34px; }
.cr-opening {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cr-opening:hover { border-color: var(--teal-300); box-shadow: var(--shadow-md); }
.cr-opening-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
}
.cr-opening-main { flex: 1; min-width: 220px; }
.cr-opening-title {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 8px;
}
.cr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
  color: var(--teal-700);
}
.cr-chip-alt { background: var(--saffron-100); border-color: #F3DCC4; color: var(--plan-h2); }
.cr-chip-vac { background: #EDE6F8; border-color: #DCCFF1; color: var(--plan-h4); }
.cr-opening-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-opening-body {
  padding: 0 22px 22px;
  border-top: 1px dashed var(--border);
  margin-top: -1px;
}
.cr-opening-body[hidden] { display: none; }
.cr-opening-body h4 {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink-900);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 18px 0 8px;
}
.cr-opening-body p { font-size: 0.93rem; line-height: 1.65; color: var(--ink-600); max-width: 62ch; margin: 0; }
.cr-opening-body ul { margin: 0; padding-left: 20px; }
.cr-opening-body li { font-size: 0.93rem; line-height: 1.6; color: var(--ink-600); margin-bottom: 6px; }
.cr-skeleton-card {
  height: 96px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(100deg, #F3F8F7 30%, #E8F2F0 50%, #F3F8F7 70%);
  background-size: 220% 100%;
  animation: crShimmer 1.3s ease-in-out infinite;
}
@keyframes crShimmer {
  from { background-position: 180% 0; }
  to { background-position: -40% 0; }
}
.cr-empty {
  text-align: center;
  padding: 38px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink-500);
}

/* ---------- Application form ---------- */
.cr-apply { background: var(--bg); }
.cr-apply-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  padding: clamp(22px, 4vw, 38px);
}
.cr-apply-card[hidden] { display: none; }
.cr-apply-head { margin-bottom: 8px; }
.cr-form-section { padding: 22px 0; border-top: 1px solid var(--border); }
.cr-form-section:first-of-type { border-top: 0; }
.cr-form-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink-900);
  margin: 0 0 16px;
}
.cr-step {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal-600);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}
.cr-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  line-height: 1.5;
}
.cr-check input { margin-top: 3px; flex: none; }
.cr-consent {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
  font-size: 0.88rem;
  color: var(--ink-700);
}

/* CV drop zone. The whole block is a <label for> the real file input, so
   clicking it opens the picker with no JS at all; the drag-and-drop path
   is the only part careers.js adds on top. */
.cr-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 30px 20px;
  border: 2px dashed var(--teal-300);
  border-radius: var(--radius-lg);
  background: var(--teal-050);
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
}
.cr-drop:hover { background: var(--teal-100); }
.cr-drop.is-dragging { background: var(--teal-100); border-color: var(--teal-600); }
.cr-drop.has-file { border-style: solid; border-color: var(--green-600); background: var(--green-100); }
.cr-drop.has-error { border-color: var(--red-600); background: var(--red-100); }
/* Visually hidden, NOT display:none — a display:none input can't be opened
   by its own label in some browsers and is dropped from the tab order. */
.cr-drop-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.cr-drop-input:focus-visible + .cr-drop-icon { outline: 2px solid var(--teal-600); outline-offset: 3px; }
.cr-drop-icon { color: var(--teal-700); }
.cr-drop-main { font-weight: 700; color: var(--ink-900); font-size: 0.96rem; }
/* --ink-600, NOT the --ink-400 used for muted text on white elsewhere. This
   line sits on the drop zone's own tinted background, which has FOUR states
   (teal-050 default, teal-100 hover, green-100 chosen, red-100 error), and
   the text has to clear 4.5:1 on all of them. --ink-400 measured 3.51:1 on
   the default tint; --ink-500 cleared three states but came to 4.48:1 on the
   hover tint — failing by 0.02, which is still failing. Caught by running
   the numbers, not by looking: every one of these reads fine to the eye.
   Not decorative text — it carries the actual file-type and size rules. */
.cr-drop-sub { font-size: 0.82rem; color: var(--ink-600); }
.cr-drop.has-file .cr-drop-icon { color: var(--green-600); }
.cr-drop.has-error .cr-drop-main { color: var(--red-600); }

.cr-result-slot:empty { display: none; }
.cr-result-slot { margin-top: 18px; }
.cr-alert {
  padding: 12px 15px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1.55;
}
.cr-alert-error { background: var(--red-100); color: #8C2326; border: 1px solid #F2CFCF; }
.cr-submit { width: 100%; margin-top: 22px; }

/* ---------- Success receipt ---------- */
.cr-receipt {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
  animation: crReceiptIn .4s ease;
}
.cr-receipt[hidden] { display: none; }
@keyframes crReceiptIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.cr-receipt-check {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-600);
}
.cr-receipt-name { font-size: 1.05rem; color: var(--ink-600); margin: 0 0 22px; }
.cr-receipt-id {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--teal-050);
  border: 1px dashed var(--teal-300);
}
.cr-receipt-id-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.cr-receipt-id-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.cr-receipt-id code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.05rem, 3.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--teal-100);
  border-radius: 9px;
  padding: 8px 14px;
  word-break: break-all;
}
.cr-copy-btn {
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--teal-300);
  background: #fff;
  color: var(--teal-700);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}
.cr-copy-btn:hover { background: var(--teal-100); }
.cr-receipt-id-note { font-size: 0.8rem; color: var(--ink-500); }
.cr-receipt-steps {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.cr-receipt-steps li { display: flex; gap: 12px; align-items: flex-start; }
.cr-receipt-steps li > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal-100);
  color: var(--teal-700);
  font-weight: 800;
  font-size: 0.8rem;
}
.cr-receipt-steps b { display: block; font-size: 0.93rem; color: var(--ink-900); }
.cr-receipt-steps p { margin: 2px 0 0; font-size: 0.87rem; line-height: 1.55; color: var(--ink-500); }
.cr-receipt-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ---------- Motion / small screens ---------- */
@media (prefers-reduced-motion: reduce) {
  .cr-ticker-track { animation: none; }
  .cr-ticker-dot { animation: none; }
  .cr-skeleton-card { animation: none; }
  .cr-receipt { animation: none; }
  .cr-why-card { transition: none; }
}
@media (max-width: 640px) {
  .cr-hero-stats { gap: 18px 28px; }
  .cr-hero-actions .btn { width: 100%; justify-content: center; }
  .cr-opening-head { padding: 17px; }
  .cr-opening-actions { width: 100%; }
  .cr-opening-actions .btn { flex: 1; justify-content: center; }
  .cr-opening-body { padding: 0 17px 18px; }
  .cr-ticker-tag { padding: 10px 12px; font-size: 0.72rem; }
  .cr-receipt-actions .btn { width: 100%; justify-content: center; }
}