/* ============================================================ */
/* ASPERA EDGE — UNIFIED SEARCH OVERLAY (shared system asset)    */
/* Source: locked careers canonical 2026-05-16T19-57-26          */
/* Applied site-wide: Careers ecosystem + Doctrine pages         */
/* ============================================================ */

/* ============================================ */
  /* CAREERS SEARCH OVERLAY (Build B v2)            */
  /* Refined: graphite + indexed-domain anchors    */
  /* ============================================ */
/* ============================================================ */
/* ASPERA EDGE — CAREERS SEARCH OVERLAY                          */
/* Operator-environment retrieval architecture                    */
/* Phase: Careers ecosystem only                                  */
/* REFINED: institutional graphite + indexed-domain anchors       */
/* ============================================================ */
/*                                                                */
/*  Tonal doctrine:                                               */
/*  - Overlay is a DIFFERENT cognitive mode from Careers pages    */
/*  - Background: institutional graphite #141618 (not cinematic   */
/*    SaaS-dark, not gaming charcoal, not glowing startup grey)   */
/*  - Typography: off-white, restrained                           */
/*  - Operator psychologically enters an internal retrieval layer */
/*                                                                */
/*  Anchor doctrine:                                              */
/*  - Indexed system domains, not micro-labels                    */
/*  - Slightly taller, heavier, wider-tracked, stronger contrast  */
/*  - Architectural presence — but still subordinate to line      */
/*  - Hierarchy: retrieval field > cursor zone > taxonomy anchors */
/* ============================================================ */


/* ── PALETTE TOKENS (overlay-scoped) ─────────────────────────── */
/* Defined as overlay-local custom properties so they cascade     */
/* into every overlay child element without affecting page tokens */

.search-overlay-careers {
  --overlay-bg:           #141618;      /* institutional graphite */
  --overlay-bg-elev:      #181a1c;      /* hairline tonal lift */
  --overlay-text:         #e8e6e0;      /* off-white, not pure white */
  --overlay-text-mid:     rgba(232, 230, 224, 0.78);
  --overlay-text-dim:     rgba(232, 230, 224, 0.55);
  --overlay-text-utility: rgba(232, 230, 224, 0.68);
  --overlay-text-faint:   rgba(232, 230, 224, 0.42);

  --overlay-line:         rgba(232, 230, 224, 0.08);
  --overlay-line-mid:     rgba(232, 230, 224, 0.14);
  --overlay-line-strong:  rgba(232, 230, 224, 0.22);
}


/* ── OVERLAY ENVIRONMENT ────────────────────────────────────── */

.search-overlay-careers {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  color: var(--overlay-text);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease;
  overflow-y: auto;
}

.search-overlay-careers.active {
  opacity: 1;
  visibility: visible;
}


/* ── SHELL CONTINUITY (positional, not tonal) ───────────────── */
/* Same coordinates as the underlying page shell, BUT now sitting */
/* on graphite. The shell still tells the operator: same system.  */
/* The palette tells them: different cognitive mode.              */

.search-overlay-careers .overlay-shell {
  position: relative;
}

.search-overlay-careers .overlay-utility {
  background: var(--overlay-bg);
  border-bottom: 1px solid var(--overlay-line);
}

.search-overlay-careers .overlay-utility-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 96px;
  min-height: 77px;
}

.search-overlay-careers .overlay-utility .utility-cluster {
  margin-top: 24px;
}


/* ── BASELINE UTILITY-SQUARE (self-sufficient — works on any host page) ── */
.search-overlay-careers .utility-cluster .utility-square {
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-text);
  color: var(--overlay-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s ease, color 0.12s ease;
  font: inherit;
  box-sizing: border-box;
}

.search-overlay-careers .utility-cluster .utility-square + .utility-square {
  border-left: none;
}

.search-overlay-careers .utility-cluster .utility-square svg {
  width: 17px;
  height: 17px;
  display: block;
  flex-shrink: 0;
}

.search-overlay-careers .utility-cluster .utility-square:hover,
.search-overlay-careers .utility-cluster .utility-square:focus-visible {
  background: var(--overlay-text);
  color: var(--overlay-bg);
  outline: none;
}

.search-overlay-careers .utility-cluster .utility-square:hover + .utility-square {
  border-left: 1px solid var(--overlay-text);
}
.search-overlay-careers .utility-cluster .utility-square:has(+ .utility-square:hover) {
  border-right: 1px solid var(--overlay-text);
}

/* The close (×) square sits in active state by default — inverted */
.search-overlay-careers .overlay-utility .utility-square.utility-close {
  background: var(--overlay-text);
  color: var(--overlay-bg);
}
.search-overlay-careers .overlay-utility .utility-square.utility-close:hover {
  background: var(--overlay-bg);
  color: var(--overlay-text);
}

.search-overlay-careers .overlay-nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-overlay-careers .overlay-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--overlay-text);
}

.search-overlay-careers .overlay-logo-mark {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-overlay-careers .overlay-logo-mark svg {
  width: 100%;
  height: 100%;
}

.search-overlay-careers .overlay-logo-text {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--overlay-text);
}


/* ── CAREERS ENVIRONMENT IDENTITY (graphite-adjusted) ──────── */

.search-overlay-careers .overlay-careers-marker {
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid var(--overlay-line-strong);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--overlay-text-utility);
}


/* ── RETRIEVAL STAGE ───────────────────────────────────────── */

.search-overlay-careers .retrieval-stage {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  padding-top: calc(38vh - 140px);
  padding-bottom: 96px;
}


/* ── RETRIEVAL LINE ─────────────────────────────────────────── */
/* 1.5px equivalent via box-shadow — off-white on graphite        */

.search-overlay-careers .retrieval-field {
  position: relative;
  width: 100%;
}

.search-overlay-careers .retrieval-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--overlay-text);
  box-shadow: 0 0.5px 0 0 var(--overlay-text);
  color: var(--overlay-text);
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.012em;
  padding: 12px 0 18px;
  outline: none;
  caret-color: var(--overlay-text);
  display: block;
}

.search-overlay-careers .retrieval-input::placeholder {
  /* "Start your search" — muted relative to the bright cursor.
     Inherits font-family, size, weight, line-height from the input itself,
     so character dimensions match the typed query exactly. Native browser
     behavior removes it the moment the first character is typed. */
  color: rgba(232, 230, 224, 0.42);
  opacity: 1;
}

.search-overlay-careers .retrieval-input:focus {
  border-bottom-color: var(--overlay-text);
  box-shadow: 0 0.5px 0 0 var(--overlay-text);
}


/* ── DOCTRINAL ANCHORS — INDEXED SYSTEM DOMAINS ────────────── */
/* Refined per locked doctrine:                                  */
/* - Slightly taller (12px vs 10px)                              */
/* - Slightly heavier (500 → 600 in mono register)               */
/* - Wider-tracked (0.28em vs 0.22em)                            */
/* - Stronger opacity (text-mid vs text-faint)                   */
/* - More vertical breathing (margin-top 40px vs 28px)           */
/* - Generous horizontal spacing (72px vs 56px)                  */
/* - NOT navigation-tab scale: still <40% size of retrieval line */
/* - NOT bold-heavy: 600 mono reads as "indexed", not loud       */
/* - NOT hover-theatrical: identical contrast on hover, no shift */

.search-overlay-careers .retrieval-anchors {
  margin-top: 40px;
  display: flex;
  gap: 72px;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.5;
}

.search-overlay-careers .retrieval-anchor {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--overlay-text-mid);
  user-select: none;
  cursor: default;
  padding: 4px 0;       /* vertical presence without bounding box */
  transition: color 0.18s ease;
}

/* Hover: minimal — barely perceptible lift, no theatrics */
.search-overlay-careers .retrieval-anchor:hover {
  color: var(--overlay-text);
}


/* ── RESULTS REGION ────────────────────────────────────────── */

.search-overlay-careers .retrieval-results {
  margin-top: 64px;
  display: none;
  flex-direction: column;
  gap: 40px;
}

.search-overlay-careers .retrieval-results.has-results {
  display: flex;
}

  /* ── EMPTY-STATE RETURN LINE ──────────────────────────────── */
  /* Operational return: NO MATCHING OPERATIONAL REFERENCES      */
  /* - Inter (primary retrieval surface family, NOT mono)        */
  /* - Materially smaller than active query line (32px → 15px)   */
  /* - Lower contrast than active retrieval state                */
  /* - Centered horizontally per locked direction                */
  /* - Generous vertical space; nothing else surfaces beneath    */

  .search-overlay-careers .retrieval-void {
    display: none;
    margin-top: 96px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--overlay-text-dim);
    user-select: none;
    padding: 24px 0 144px;
  }

  .search-overlay-careers .retrieval-void.active {
    display: block;
  }

  @media (max-width: 640px) {
    .search-overlay-careers .retrieval-void {
      margin-top: 72px;
      font-size: 14px;
      letter-spacing: 0.03em;
      padding: 20px 0 112px;
    }
  }




.search-overlay-careers .result-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-overlay-careers .result-group-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--overlay-text-faint);
  margin-bottom: 16px;
}

.search-overlay-careers .result-row {
  display: block;
  padding: 18px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--overlay-line);
  transition: border-color 0.15s ease;
  cursor: pointer;
}

.search-overlay-careers .result-row:last-child {
  border-bottom: none;
}

.search-overlay-careers .result-row:hover,
.search-overlay-careers .result-row.selected {
  border-bottom-color: var(--overlay-text);
}

.search-overlay-careers .result-row:hover .result-title,
.search-overlay-careers .result-row.selected .result-title {
  color: var(--overlay-text);
}

.search-overlay-careers .result-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--overlay-text-faint);
  margin-bottom: 6px;
}

.search-overlay-careers .result-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--overlay-text-mid);
  line-height: 1.4;
  transition: color 0.15s ease;
  letter-spacing: -0.005em;
}

.search-overlay-careers .result-context {
  font-size: 13px;
  color: var(--overlay-text-dim);
  line-height: 1.55;
  margin-top: 6px;
}

.search-overlay-careers .result-row mark {
  background: transparent;
  color: var(--overlay-text);
  font-weight: 500;
}



/* ── SPLIT RETRIEVAL ARCHITECTURE ─────────────────────────── */
/* Active-state layout: left retrieval-state layer (~32%) +    */
/* right results stack (~68%). Asymmetric by intent — left     */
/* quieter and structurally static; right active and indexed.  */
/* Both states (results + void) share this architecture.       */
/* Empty-input state collapses cleanly — split is hidden.      */

.search-overlay-careers .retrieval-split {
  display: none;
  margin-top: 64px;
  grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
  column-gap: 80px;
}

.search-overlay-careers.has-query .retrieval-split {
  display: grid;
}

/* Left column — retrieval-state layer */
.search-overlay-careers .retrieval-state {
  padding-top: 4px;
}

.search-overlay-careers .retrieval-state-count {
  font-family: 'Inter', sans-serif;
  font-size: 56px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--overlay-text);
  display: block;
}

.search-overlay-careers .retrieval-state-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--overlay-text-faint);
  display: block;
  margin-top: 14px;
}

/* Right column — results stack or void return */
.search-overlay-careers .retrieval-output {
  min-width: 0;
}

/* Results inside the split now live in the right column */
.search-overlay-careers .retrieval-split .retrieval-results {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Void return inside the split — left-aligned in right column */
.search-overlay-careers .retrieval-split .retrieval-void {
  margin-top: 0;
  padding: 4px 0 96px;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--overlay-text-dim);
}


/* ── ACTIVE QUERY-STATE CONTROL ───────────────────────────── */
/* × Clear Query — part of the active retrieval state itself.   */
/* - Inter, primary retrieval typography family                  */
/* - Same scale, weight, brightness as the active query text     */
/* - Positioned ABOVE the line, right-anchored to line terminus  */
/* - Absolute positioning preserves full line width              */

.search-overlay-careers .retrieval-field-row {
  position: relative;          /* anchor for absolute clear control */
}

.search-overlay-careers .retrieval-field {
  width: 100%;                 /* line width is invariant */
}

.search-overlay-careers .retrieval-clear {
  position: absolute;
  right: 0;
  /* Anchor to the VISIBLE line (input's border-bottom), not the
     input element's outer top. The input has padding + line-height
     creating dead space at its top, so anchoring to bottom: 100%
     would sit far above the actual line. Instead, sit 10px above
     the input's bottom edge — which is where the line renders. */
  bottom: 10px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  /* Identical typography to active query, at utility scale. */
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--overlay-text);
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  display: none;
  text-transform: none;
  transition: opacity 0.12s ease;
  opacity: 0.78;
}

.search-overlay-careers .retrieval-clear:hover,
.search-overlay-careers .retrieval-clear:focus-visible {
  opacity: 1;
}

.search-overlay-careers.has-query .retrieval-clear {
  display: inline-block;
}

/* ── METADATA TAXONOMY PERSISTENCE ────────────────────────── */
/* Anchors are environmental retrieval taxonomy — permanent.    */
/* They do NOT disappear when active query state engages.       */
/* (Previous collapse rule reversed per locked direction.)      */

@media (max-width: 900px) {
  .search-overlay-careers .retrieval-clear {
    font-size: 14px;
    bottom: 10px;
  }
}

@media (max-width: 640px) {
  .search-overlay-careers .retrieval-clear {
    font-size: 13px;
    bottom: 8px;
  }
}

/* ── RESPONSIVE ────────────────────────────────────────────── */

@media (max-width: 900px) {
  .search-overlay-careers .retrieval-stage {
    padding-top: calc(36vh - 130px);
  }
  .search-overlay-careers .retrieval-input {
    font-size: 26px;
  }
  .search-overlay-careers .retrieval-anchors {
    gap: 48px;
  }
  .search-overlay-careers .retrieval-split {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
  }
  .search-overlay-careers .retrieval-state-count {
    font-size: 44px;
  }
}

@media (max-width: 640px) {
  .search-overlay-careers .overlay-utility-inner {
    padding: 8px 20px;
    min-height: 64px;
  }
  .search-overlay-careers .overlay-utility .utility-cluster {
    margin-top: 16px;
  }
  .search-overlay-careers .overlay-nav-inner {
    padding: 16px 20px;
  }
  .search-overlay-careers .overlay-careers-marker {
    margin-left: 12px;
    padding-left: 12px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .search-overlay-careers .retrieval-stage {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: calc(38vh - 110px);
  }
  .search-overlay-careers .retrieval-input {
    font-size: 22px;
    padding: 8px 0 14px;
  }
  .search-overlay-careers .retrieval-anchors {
    gap: 28px;
    margin-top: 30px;
  }
  .search-overlay-careers .retrieval-anchor {
    font-size: 11px;
    letter-spacing: 0.22em;
  }
  .search-overlay-careers .retrieval-split {
    margin-top: 48px;
    row-gap: 32px;
  }
  .search-overlay-careers .retrieval-state-count {
    font-size: 36px;
  }
  .search-overlay-careers .retrieval-state-label {
    font-size: 10px;
    letter-spacing: 0.20em;
  }
  .search-overlay-careers .retrieval-split .retrieval-void {
    font-size: 14px;
    padding: 0 0 80px;
  }
}