/* ==========================================================================
   UBM — page-careers.css
   /careers (list + filters + open application) and /careers/{slug} (vacancy
   detail + application form).

   Loaded after sections.css, so everything here composes with the shared
   blocks rather than replacing them:
     .page-hero .breadcrumb .job-card .filter-bar .empty-state .def-rows
     .share-row .badge .prose .card .btn .field .input .dropzone .checkbox

   House rules (same as sections.css)
   · Tokens only. No raw hex, no raw ms, no hand-rolled cubic-bezier.
     Alpha variants come from color-mix() on a token.
   · Logical properties only. RTL depends on it.
   · Four-item rails go 1 → 2×2 → 4 at explicit breakpoints, never 3 + 1.
   ========================================================================== */

/* ==========================================================================
   1. DEPARTMENT ACCENT
   Each of the ten departments carries one accent, set on the vacancy hero and
   inherited by the meta rail beneath it. Exactly one appears per page — the
   careers index deliberately stays monochrome so ten colours never land in a
   single viewport.

   <header class="page-hero vacancy-hero" data-dept="elv" data-world="deep">
   ========================================================================== */

[data-dept="management"]        { --accent: var(--c-gold-500);       }
[data-dept="sales"]             { --accent: var(--c-domain-hardware); }
[data-dept="people"]            { --accent: var(--c-domain-ai);       }
[data-dept="finance"]           { --accent: var(--c-amber-500);       }
[data-dept="marketing"]         { --accent: var(--c-domain-software); }
[data-dept="elv"]               { --accent: var(--c-domain-network);  }
[data-dept="physical_security"] { --accent: var(--c-domain-security); }
[data-dept="planning"]          { --accent: var(--c-domain-services); }
[data-dept="administration"]    { --accent: var(--c-signal-500);      }
[data-dept="logistics"]         { --accent: var(--c-orange-500);      }

/* On the deep world the darker domain reds and blues lose contrast against
   navy, so the deep variants lift a step. */
[data-world="deep"][data-dept="management"],
[data-world="deep"] [data-dept="management"]        { --accent: var(--c-gold-400);  }
[data-world="deep"][data-dept="administration"],
[data-world="deep"] [data-dept="administration"]    { --accent: var(--c-signal-400); }

/* ==========================================================================
   2. CAREERS HERO
   <header class="page-hero careers-hero grid-texture" data-world="deep">
     … .breadcrumb .eyebrow h1 .t-lead
     <div class="cluster careers-hero__actions"> … </div>
     <dl class="careers-hero__facts"> <div><dt>…</dt><dd>…</dd></div> … </dl>
   </header>
   ========================================================================== */

.careers-hero__actions { margin-block-start: var(--sp-3); gap: var(--sp-4); }

.careers-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-8);
  inline-size: 100%;
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-6);
  border-block-start: var(--bw) solid var(--line);
}
.careers-hero__facts > div { display: grid; gap: var(--sp-1); }
.careers-hero__facts dt {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.careers-hero__facts dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. PRINCIPLES — "four things that are true here"
   Not feature cards: a numbered manifesto with a gold rule that draws in.

   <ol class="principles" data-reveal-group>
     <li class="principles__item" data-reveal>
       <span class="principles__num">01</span>
       <h3 class="principles__name">…</h3>
       <p class="principles__body">…</p>
     </li> … </ol>
   ========================================================================== */

.principles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-block-start: var(--bw) solid var(--line);
}
.principles__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: var(--sp-5);
  row-gap: var(--sp-2);
  align-items: start;
  padding-block: var(--sp-7);
  border-block-end: var(--bw) solid var(--line);
}
/* the hairline that draws across the row as it reveals */
.principles__item::before {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: var(--to-origin, left);
  transition: transform var(--d-slow) var(--e-out);
}
.principles__item.is-in::before { transform: scaleX(1); }

.principles__num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-2xl);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  padding-block-start: .12em;
}
.principles__name {
  font-size: var(--fs-xl);
  text-wrap: balance;
}
.principles__body {
  grid-column: 2;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-inline-size: 62ch;
  text-wrap: pretty;
}

@media (min-width: 62rem) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-9); }
  .principles__item:nth-last-child(-n+2) { border-block-end: 0; }
}
@media (max-width: 30rem) {
  .principles__item { grid-template-columns: minmax(0, 1fr); }
  .principles__num  { grid-row: auto; font-size: var(--fs-lg); }
  .principles__body { grid-column: 1; }
}

/* The counterweight to the four principles: one thing we do not do. */
.principles-note {
  display: grid;
  gap: var(--sp-3);
  margin-block-start: var(--sp-8);
  padding-inline-start: var(--sp-6);
  border-inline-start: 2px solid var(--gold);
  max-inline-size: 52rem;
}
.principles-note__label {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.principles-note p { font-size: var(--fs-md); color: var(--text); text-wrap: pretty; }

/* ==========================================================================
   4. DEPARTMENT INDEX — the ten departments as a rack-unit index, not cards
   <ol class="dept-index">
     <li class="dept-index__row">
       <a class="dept-index__link" href="?department=elv">
         <span class="dept-index__num">06</span>
         <span class="dept-index__name">ELV</span>
         <span class="dept-index__note">…</span>
         <span class="dept-index__count" data-open="true">2 open</span>
       </a></li> … </ol>
   ========================================================================== */

.dept-index { border-block-start: var(--bw) solid var(--line); }
.dept-index__row { border-block-end: var(--bw) solid var(--line); }

.dept-index__link {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 11rem) minmax(0, 1fr) minmax(0, auto);
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  padding-inline: var(--sp-3) var(--sp-4);
  margin-inline: calc(var(--sp-3) * -1) 0;
  transition: background-color var(--d-fast) var(--e-out);
}
.dept-index__link:hover { background: var(--surface-sunken); }
.dept-index__link:hover .dept-index__name { color: var(--accent-text); }

.dept-index__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-eyebrow);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.dept-index__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text-strong);
  transition: color var(--d-fast) var(--e-out);
}
.dept-index__note { font-size: var(--fs-sm); color: var(--text-muted); text-wrap: pretty; }
.dept-index__count {
  font-size: var(--fs-2xs);
  letter-spacing: .04em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dept-index__count[data-open="true"] { color: var(--accent-text); font-weight: 600; }

/* A department with nothing open is still listed — it is a description of the
   company, not a call to action — but it does not pretend to be a link. */
.dept-index__row--quiet .dept-index__link { pointer-events: none; }
.dept-index__row--quiet .dept-index__name { color: var(--text); }

@media (max-width: 61.99rem) {
  .dept-index__link { grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, auto); }
  .dept-index__note { grid-column: 2 / -1; grid-row: 2; font-size: var(--fs-xs); }
}
@media (max-width: 30rem) {
  .dept-index__link { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .dept-index__count { grid-column: 2; grid-row: 3; }
  .dept-index__note  { grid-column: 2; grid-row: 2; }
}

/* ==========================================================================
   5. FILTERS — four native selects in a real GET form.
   Without JavaScript the submit button posts and the page reloads filtered.
   With JavaScript the module hides the button and swaps the list in place.

   <form class="role-filters" method="get" data-role-filters>
     <div class="role-filters__grid"> <div class="field">…</div> ×4 </div>
     <div class="role-filters__foot"> … </div>
   </form>
   ========================================================================== */

.role-filters {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-block: var(--bw) solid var(--line);
}
.role-filters__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 36rem) { .role-filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .role-filters__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.role-filters .field__label {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}

.role-filters__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.role-filters__count {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.role-filters__count b { color: var(--text-strong); font-weight: 600; }
.role-filters__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.role-filters__reset {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  border-block-end: var(--bw) solid transparent;
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.role-filters__reset:hover { color: var(--accent-text); border-block-end-color: var(--accent); }
.role-filters__reset[hidden] { display: none; }

/* ==========================================================================
   6. ROLE LIST
   <div class="role-list" data-role-list aria-busy="false"> .job-card … </div>
   ========================================================================== */

.role-list { position: relative; display: block; min-block-size: 6rem; }
.role-list[aria-busy="true"] { color: var(--text-faint); }
.role-list[aria-busy="true"] .job-card { opacity: .42; transition: opacity var(--d-fast) var(--e-out); }

.role-list__spinner {
  position: absolute;
  inset-block-start: var(--sp-6);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-lg);
  color: var(--accent-text);
  display: none;
}
[dir="rtl"] .role-list__spinner { transform: translateX(50%); }
.role-list[aria-busy="true"] .role-list__spinner { display: block; }

/* The row's own furniture. .job-card itself comes from sections.css. */
.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}
.job-card__meta > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.job-card__meta .job-card__dept { color: var(--text-muted); font-weight: 600; }
.job-card__summary {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-inline-size: 68ch;
  text-wrap: pretty;
}
.job-card__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Empty states sit inside the list so the live region announces them. */
.role-list .empty-state { margin-block-start: var(--sp-6); }
.empty-state__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* ==========================================================================
   7. VACANCY HERO + META RAIL
   ========================================================================== */

.vacancy-hero .t-h1 { max-inline-size: 22ch; }

.vacancy-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
}
.vacancy-hero__actions { margin-block-start: var(--sp-5); gap: var(--sp-4); }

/* The department signature: a 2px accent rule under the eyebrow. One accent,
   one page — the only place a department colour is allowed to be this loud.
   This is the one label that deliberately keeps --accent rather than
   --accent-text: it only ever renders on the deep vacancy hero, where the
   department colours clear 4.5:1 on navy. Never put it on a paper surface. */
.vacancy-hero__dept {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.vacancy-hero__dept::before {
  content: "";
  inline-size: 28px;
  block-size: 2px;
  background: currentColor;
  flex: none;
}

.vacancy-hero__closed {
  display: grid;
  gap: var(--sp-2);
  margin-block-start: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: var(--bw) solid var(--line-strong);
  border-inline-start: 2px solid var(--c-warning);
  border-radius: var(--r-sm);
  max-inline-size: 46rem;
}
.vacancy-hero__closed strong { color: var(--text-strong); font-size: var(--fs-sm); }
.vacancy-hero__closed p { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- the sticky rail beside the body ------------------------------------ */

/* .split gives the aside 5 of 12; a meta rail wants less than that and the
   job body wants more. */
@media (min-width: 62rem) {
  .split.vacancy-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

.vacancy-rail { display: grid; gap: var(--sp-6); }
.vacancy-rail__panel {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--surface-raised);
  border: var(--bw) solid var(--line);
  border-block-start: 2px solid var(--accent);
  border-radius: var(--r-sm);
}
.vacancy-rail .def-rows > div { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
.vacancy-rail .def-rows > div:last-child { border-block-end: 0; padding-block-end: 0; }
.vacancy-rail__apply { inline-size: 100%; }

/* Numerals read LTR inside an Arabic rail. Dates are excluded on purpose:
   "7 أغسطس 2026" contains an Arabic month name, so an LTR base reorders it to
   "7 2026 أغسطس". The posted/closes <time> keeps the inherited RTL base. */
[dir="rtl"] .careers-hero__facts dd { direction: ltr; unicode-bidi: isolate; }

/* ==========================================================================
   8. VACANCY BODY — the structured job description
   <div class="vacancy-body">
     <section class="vacancy-section" id="role"><h2>…</h2><div class="prose">…</div></section>
   </div>
   ========================================================================== */

.vacancy-body { display: grid; gap: var(--sp-9); }

.vacancy-section { display: grid; gap: var(--sp-4); scroll-margin-block-start: calc(var(--header-h) + var(--sp-6)); }
.vacancy-section__title {
  position: relative;
  font-size: var(--fs-2xl);
  padding-block-start: var(--sp-4);
  border-block-start: var(--bw) solid var(--line);
}
.vacancy-section__title::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 56px;
  block-size: 2px;
  background: var(--gold);
}
.vacancy-section .prose { max-inline-size: 66ch; }

/* Mini table of contents in the rail — reuses .prose-toc from sections.css,
   this only bounds its height on a very long JD. */
.vacancy-toc { max-block-size: 22rem; overflow-y: auto; }

.vacancy-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-5);
  border-block-start: var(--bw) solid var(--line);
}

/* ==========================================================================
   9. APPLICATION FORM
   <section class="section apply" id="apply">
     <form class="apply__form" method="post" enctype="multipart/form-data" data-apply>
   ========================================================================== */

.apply__intro { display: grid; gap: var(--sp-4); max-inline-size: 52ch; margin-block-end: var(--sp-8); }

.apply__form {
  display: grid;
  gap: var(--sp-8);
  max-inline-size: 52rem;
}
.apply__group { display: grid; gap: var(--sp-5); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.apply__legend {
  display: block;
  inline-size: 100%;
  padding: 0 0 var(--sp-4);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  border-block-end: var(--bw) solid var(--line);
}

.apply__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}
@media (min-width: 44rem) { .apply__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.apply__field--wide { grid-column: 1 / -1; }

/* A required marker that does not rely on colour alone. */
.apply__req { color: var(--c-danger); font-weight: 700; }
[data-world="deep"] .apply__req { color: var(--c-gold-400); }

/* Phone always reads LTR, in either language. */
.apply__phone { direction: ltr; text-align: start; }
[dir="rtl"] .apply__phone { text-align: end; }

/* --- file input ---------------------------------------------------------- */

.apply__file { position: relative; display: grid; gap: var(--sp-2); justify-items: start; }
.apply__file .dropzone, .apply__file .field__hint, .apply__file .field__error { inline-size: 100%; }
.apply__file input[type="file"] {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* Keyboard focus on the visually-hidden input must still be visible. */
.apply__file input[type="file"]:focus-visible + .dropzone {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.apply__file .dropzone { padding-block: var(--sp-7); }
.apply__file .dropzone[data-state="filled"] {
  border-style: solid;
  border-color: color-mix(in srgb, var(--c-success) 55%, transparent);
  background: color-mix(in srgb, var(--c-success) 6%, var(--surface-sunken));
  color: var(--text-strong);
}
.apply__file-icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--text-faint); }
.apply__file .dropzone[data-state="filled"] .apply__file-icon { color: var(--c-success); }
.apply__file-name {
  font-weight: 600;
  color: var(--text-strong);
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}
.apply__file-clear {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.apply__file-clear:hover { color: var(--c-danger); }

/* --- consent + AI notice ------------------------------------------------- */

.apply__consent {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface-sunken);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
}
.apply__consent .field__hint { max-inline-size: 60ch; }

.apply__ai {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  color: var(--text-faint);
  max-inline-size: 62ch;
}
.apply__ai svg { inline-size: 1rem; block-size: 1rem; margin-block-start: .15em; color: var(--gold); flex: none; }

/* --- submit row + states -------------------------------------------------- */

.apply__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  padding-block-start: var(--sp-5);
  border-block-start: var(--bw) solid var(--line);
}
.apply__note { font-size: var(--fs-2xs); color: var(--text-faint); }

.apply__submit .spinner { display: none; }
.apply__form[data-state="sending"] .apply__submit .spinner { display: block; }
.apply__form[data-state="sending"] .apply__submit { pointer-events: none; opacity: .72; }
.apply__form[data-state="sending"] .apply__submit-label { opacity: .8; }

/* One status region for both the failure summary and the success panel. */
.apply__status { display: grid; gap: var(--sp-3); }
.apply__status:empty { display: none; }

.apply__alert {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: var(--bw) solid var(--line-strong);
  border-inline-start: 2px solid var(--c-danger);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c-danger) 6%, var(--surface-sunken));
}
.apply__alert h3 { font-size: var(--fs-md); }
.apply__alert ul { display: grid; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); }
.apply__alert a { color: var(--c-danger); text-decoration: underline; text-underline-offset: .2em; }

.apply__done {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  padding: var(--sp-8) var(--sp-7);
  border: var(--bw) solid var(--line);
  border-inline-start: 2px solid var(--c-success);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  max-inline-size: 52rem;
}
.apply__done h3 { font-size: var(--fs-xl); }
.apply__done p  { font-size: var(--fs-sm); color: var(--text-muted); max-inline-size: 56ch; }
.apply__done__ref {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: .06em;
  color: var(--text-faint);
  direction: ltr;
  unicode-bidi: isolate;
}
.apply__done__mark { inline-size: 2rem; block-size: 2rem; color: var(--c-success); }

/* When the form succeeds inline, JS hides it and leaves the panel behind. */
.apply__form[hidden] { display: none; }

/* ==========================================================================
   10. OPEN-APPLICATION BAND — the "no openings" path
   <section class="section open-app" data-world="soft"> … </section>
   ========================================================================== */

.open-app__inner { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 62rem) {
  .open-app__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--sp-9); }
  .open-app__aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-7)); }
}
.open-app__aside { display: grid; gap: var(--sp-4); justify-items: start; }

/* ==========================================================================
   11. PRINT — a vacancy is regularly printed and taken into an interview.
   ========================================================================== */

@media print {
  .role-filters,
  .apply,
  .vacancy-rail__apply,
  .share-row,
  .careers-hero__actions,
  .vacancy-hero__actions { display: none !important; }
  .vacancy-body { gap: 1.5rem; }
  .vacancy-section { break-inside: avoid; }
}