/* ===========================================================
   careers.css: /careers/ only. Loaded after staff-aug.css, whose
   base (.sa: hero, crumb, sections, steps, buttons, FAQ) it reuses.
   Everything here is scoped to main.sa.cr.

   Layout: mockup-careers.html (Mockup Spec v1.1). Colour pairs are
   the spec's contrast table mapped onto existing tokens:
     small orange text on light  --orange-text  (5.07:1 on bone)
     UI marks on light           --orange-deep  (4.21:1, needs 3.0)
     text / marks on dark        --orange       (6.09:1 on ink)
   Tokens only. Translucent overlays on dark are the one exception,
   as in staff-aug.css.
   =========================================================== */

/* ---------- dark bands: hero and form ----------
   --gray-deep (#2D2D2D), the footer's ground, not staff-aug's --ink
   (#1A1A1A). Every pair on it re-checked: bone 12.43, orange 4.56,
   --line-muted 6.48, --on-dark-muted 6.74, --field-line-dark 3.80. */
.cr .sa-dark { background: var(--gray-deep); }
.cr .hero .ground::after {
  background: linear-gradient(90deg, var(--gray-deep) 38%, rgba(45, 45, 45, .55) 70%, rgba(45, 45, 45, .2));
}
@media (max-width: 760px) {
  .cr .hero .ground::after { background: linear-gradient(180deg, rgba(45, 45, 45, .6), var(--gray-deep) 70%); }
}

/* ---------- hero ---------- */
.cr .hero .frame {
  margin-top: 24px; border-left: 2px solid var(--orange); padding: 4px 0 4px 18px;
  max-width: 58ch; font-size: 15px; line-height: 1.6; color: var(--line-muted);
}

/* ---------- search (enhanced only) ---------- */
.cr-search { display: none; margin: 26px 0 8px; gap: 10px; max-width: 760px; }
.cr .enh .cr-search { display: flex; }
.cr-search input {
  flex: 1; min-height: 52px; padding: 14px 16px; font-family: var(--font-sans); font-size: 17px;
  border: 1px solid var(--gray-soft); background: var(--paper); color: var(--ink);
}
.cr-search input::placeholder { color: var(--gray-soft); opacity: 1; }
.cr-search input::-webkit-search-cancel-button { display: none; }
.cr .cr-clear {
  min-height: 52px; padding: 0 16px; cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  border: 1px solid var(--gray-soft); background: var(--paper); color: var(--ink);
}
.cr .cr-count { display: none; font-family: var(--font-mono); font-size: 12px; color: var(--gray-soft); margin: 0 0 18px; }
.cr .enh .cr-count { display: block; }
.cr-empty { border: 1px dashed var(--gray-soft); background: var(--paper); padding: 26px; margin-bottom: 18px; }
.cr-empty[hidden] { display: none; }
.cr-empty strong { display: block; font-size: 17px; margin-bottom: 6px; color: var(--ink); }
.cr-empty .cr-clear { display: block; margin-top: 14px; }

/* ---------- families and roles ----------
   staff-aug.css styles every details/summary as an FAQ row. These are
   not FAQ rows, so its border, padding and +/- are undone here. */
.cr-list { margin-top: 18px; }
.cr-list.wide { display: grid; grid-template-columns: 5fr 7fr; gap: 28px; align-items: start; }
.cr-fams, .cr-roles { list-style: none; margin: 0; padding: 0; }
.cr-fams { display: flex; flex-direction: column; gap: 10px; }
/* details.x selectors: they must outrank staff-aug's `.sa details:first-child`. */
.cr details.cr-role { border: none; }
.cr details.cr-fam { background: var(--paper); border: 1px solid var(--rule); }
.cr details.cr-fam p, .cr details.cr-role p { padding: 0; }
.cr .cr-fam > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 22px; min-height: 56px;
}
/* staff-aug's `.sa details[open] summary::after` also reaches rows nested in an open
   family, so these need the extra type selector to outrank it. */
.cr details.cr-fam > summary::after, .cr details.cr-role > summary::after { content: none; }
.cr .cr-fam > summary h2 { font-size: 19px; letter-spacing: -.02em; line-height: 1.25; margin: 0; max-width: none; }
.cr .cr-n {
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--gray-soft);
}
.cr .cr-n::after { content: '+'; width: 14px; text-align: center; font-size: 20px; color: var(--orange-deep); }
.cr .cr-fam[open] > summary .cr-n::after { content: '\2212'; }
.cr .cr-fam[open] > summary { border-bottom: 1px solid var(--rule); }
.cr details.cr-fam .cr-intro { font-size: 14px; line-height: 1.55; padding: 16px 22px 6px; color: var(--gray-soft); max-width: none; }
.cr .cr-roles { padding: 8px 10px 12px; }
.cr .cr-role > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 12px 12px 14px; min-height: 48px; border-left: 3px solid transparent;
}
.cr .cr-role > summary:hover { background: var(--bone); }
.cr .cr-role > summary h3 { font-size: 15px; font-weight: 600; letter-spacing: -.005em; margin: 0; }
.cr .cr-tag {
  display: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper); background: var(--gray-deep); padding: 3px 7px;
}
/* Selected: bar + bold title + the word "Selected", never colour alone. */
.cr .cr-role.is-sel > summary { border-left-color: var(--orange-deep); background: var(--bone); }
.cr .cr-role.is-sel > summary h3 { font-weight: 800; }
.cr .cr-role.is-sel .cr-tag { display: inline-block; }

.cr .cr-desc { padding: 10px 14px 18px 17px; }
.cr .cr-desc p { font-size: 15px; max-width: 66ch; }
.cr .cr-dtitle { display: none; }
.cr .cr-desc .cr-req { margin-top: 12px; font-size: 14px; color: var(--ink); }
.cr .cr-req b { font-weight: 700; }
.cr .cr-apply {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; padding: 6px 0;
  font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); border-bottom: 2px solid var(--orange-deep);
}
.cr .cr-apply:hover { color: var(--orange-text); }

/* ---------- side panel (wide + enhanced only) ---------- */
.cr-panel { display: none; }
.cr-list.wide .cr-panel {
  display: block; position: sticky; top: 104px; min-height: 320px; padding: 30px;
  background: var(--paper); border: 1px solid var(--gray-deep);
}
.cr-list.wide .cr-panel::before {
  content: ''; position: absolute; inset: -7px 7px 7px -7px; border: 1px solid var(--orange-deep); pointer-events: none;
}
.cr .cr-pempty { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--gray-soft); }
.cr .cr-pempty[hidden] { display: none; }
.cr .cr-panel .cr-desc { padding: 0; }
.cr .cr-panel .cr-dtitle {
  display: block; margin: 0 0 14px; font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--ink);
}
.cr .cr-famof {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange-text); margin: 0 0 10px;
}

/* ---------- why work here ---------- */
.cr section.cr-alt { background: var(--bone-deep); }
.cr-why { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.cr-why ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gray-soft); }
.cr-why li { padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.55; color: var(--gray-deep); }
.cr-why li b { display: block; margin-bottom: 4px; font-size: 18px; letter-spacing: -.01em; color: var(--ink); }

/* ---------- FAQ: an H3 per question inside the summary ---------- */
.cr .faq summary h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin: 0; }

/* ---------- application form (dark close band) ---------- */
.cr .cr-close { border-bottom: none; }
.cr .cr-close > .wrap > p { color: var(--line-muted); }
.cr-form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; margin-top: 30px; max-width: 900px; position: relative; }
/* The form must vanish when the success message shows. Without this, the
   grid display above beats the hidden attribute and both show at once. */
.cr-form[hidden] { display: none; }
.cr-form .full { grid-column: 1 / -1; }
.cr .cr-form .f label {
  display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--line-muted);
}
.cr .cr-form .f input[type=text], .cr .cr-form .f input[type=email], .cr .cr-form .f input[type=tel],
.cr .cr-form .f select, .cr .cr-form .f textarea {
  width: 100%; min-height: 44px; padding: 10px 0; background: transparent; color: var(--bone);
  border: none; border-bottom: 1px solid var(--field-line-dark); font-family: var(--font-sans); font-size: 16px;
}
.cr .cr-form .f textarea { min-height: 90px; resize: vertical; }
.cr .cr-form .f select option, .cr .cr-form .f select optgroup { background: var(--gray-deep); color: var(--bone); }
.cr .cr-form .help { display: block; margin-top: 7px; font-size: 13px; color: var(--on-dark-muted); }
.cr .cr-form .f .err { color: var(--orange); }
.cr .cr-form .f [aria-invalid="true"] { border-bottom: 2px solid var(--orange); }
.cr-file { border: 1px dashed var(--field-line-dark); padding: 14px; }
.cr .cr-form .cr-file[aria-invalid="true"], .cr .cr-form .f.bad .cr-file { border: 1px dashed var(--orange); }
/* outranks staff-aug's `.sa .f input` underline and ink colour */
.cr .cr-form .cr-file input { width: 100%; min-height: 0; padding: 0; border: none; background: transparent; color: var(--line-muted); font-family: var(--font-sans); font-size: 14px; }
.cr-file input::file-selector-button {
  margin-right: 12px; padding: 10px 14px; cursor: pointer; font-family: var(--font-mono); font-size: 12px;
  background: var(--gray-deep); color: var(--bone); border: 1px solid var(--line-muted);
}
.cr .cr-form .cr-consent { font-size: 14px; color: var(--line-muted); border-left: 2px solid var(--line-muted); padding-left: 14px; max-width: none; }
.cr .cr-status { margin-top: 14px; font-size: 15px; color: var(--orange); }
.cr .cr-status:empty { display: none; }
.cr-notice, .cr-errs, .cr-done {
  max-width: 900px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--orange);
  background: rgba(228, 119, 18, .1); color: var(--bone); font-size: 15px;
}
.cr-notice[hidden], .cr-done[hidden] { display: none; }
.cr .cr-errs p, .cr .cr-done p { color: var(--bone); }
.cr-done { padding: 26px; margin-top: 30px; }
.cr .cr-done p { font-size: 18px; max-width: none; }
.cr-notice:focus, .cr-done:focus { outline: none; }
.cr-notice:focus-visible, .cr-done:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* ===========================================================
   MOBILE
   =========================================================== */
@media (max-width: 760px) {
  .cr-search { flex-direction: column; }
  .cr .cr-clear { min-height: 48px; }
  .cr-why { grid-template-columns: 1fr; gap: 26px; }
  .cr-form { grid-template-columns: 1fr; }
  .cr .cr-fam > summary { padding: 18px 16px; }
  .cr details.cr-fam .cr-intro { padding: 14px 16px 6px; }
  .cr .cr-roles { padding: 6px 4px 10px; }
}