/* /apply. The department picker and the role chips. */

.ap { margin-top: 26px; }

.ap-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.ap-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font: inherit;
  font-size: 0.94rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.ap-tab span {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.ap-tab:hover { border-color: color-mix(in srgb, var(--action) 40%, var(--line)); }
.ap-tab:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }

.ap-tab.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  font-weight: 600;
}

.ap-tab.is-on span { color: color-mix(in srgb, var(--bg) 70%, transparent); }

.ap-panel { display: flex; flex-wrap: wrap; gap: 10px; }

/* Only hidden once apply.js has taken over. */
.ap.is-enhanced .ap-panel { display: none; }
.ap.is-enhanced .ap-panel.is-on { display: flex; }

.ap-role {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.94rem;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.ap-role:hover {
  border-color: color-mix(in srgb, var(--action) 45%, var(--line));
  transform: translateY(-1px);
}

.ap-cta { margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  .ap-tab, .ap-role { transition: none; }
  .ap-role:hover { transform: none; }
}

/* The line under the role chips: a statement and the way out, on one row. */
.ap-roles-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}
.ap-roles-foot span { color: var(--ink-soft); font-size: 0.95rem; }

/* The chips name the work; they are no longer links, so they must not invite
   a click. */
.ap-role { cursor: default; }
.ap-role:hover { border-color: var(--line); color: var(--ink-soft); }

/* --- hero: "would this work for me" ---------------------------------------
   Copy on the left, and on the right the two questions that decide whether
   someone applies at all: do you hire where I live, and what hours would that
   mean. Both answers come from the region catalogue, so they cannot drift from
   the regions pages.
   -------------------------------------------------------------------------*/

.aph-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.82fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

/* The shared hero copy is written for a centred, full-width hero. Reused in a
   left-aligned column its margins landed at 30 / 14 / 0 / 14px, which is no
   rhythm at all and left the paragraph touching the buttons. Each gap is set
   here instead, largest before the heading and smallest under it. */
.aph-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: none;
}
/* `.cmp-hero h1` and friends outrank a `> *` reset, so each is named. */
.aph-copy > * { margin: 0; }
.aph-copy .sw-badge { margin: 0 0 26px; }
.aph-copy h1 { margin: 0 0 18px; }
.aph-copy .cmp-hero-sub { margin-bottom: 30px; max-width: 46ch; }
.aph-copy .rd-ctas { justify-content: flex-start; margin-bottom: 18px; }

/* The cards sit on .hero-visual.is-tile, the blue panel the homepage hero
   uses, so the two heroes read as the same component. The tile brings its own
   padding and radius; this only sets how the cards stack inside it. */
.aph { display: grid; gap: 12px; }

.aph-card { padding: 18px 20px; }
/* On the tile a card needs no border of its own, the same as on the homepage. */
.hero-visual.is-tile .aph-card {
  border-color: transparent;
  box-shadow: 0 16px 34px rgba(43, 69, 95, 0.14);
}
.aph-card.is-result { min-height: 208px; }

.aph-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

.aph-tab {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}
.aph-tab:hover { color: var(--ink); border-color: color-mix(in srgb, var(--action) 42%, var(--line)); }
.aph-tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Only the chosen region shows. Without JS every panel is visible and the
   card still reads, which is why this hides rather than the markup. */
.aph-panel { display: none; }
.aph-panel.is-on { display: block; }

.aph-flags { display: flex; gap: 6px; margin-bottom: 14px; }
.aph-flags img {
  width: 22px; height: 16px; object-fit: cover;
  border-radius: 3px; border: 1px solid var(--line);
}

.aph-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.aph-row:first-of-type { border-top: 0; padding-top: 0; }

.aph-row .k { font-size: 0.84rem; color: var(--ink-faint); flex: none; }
.aph-row .v { font-size: 0.9rem; color: var(--ink-soft); text-align: right; }
.aph-row .v b {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.aph-row .v small { display: block; font-size: 0.78rem; color: var(--ink-faint); }

@media (max-width: 1023px) {
  .aph-grid { grid-template-columns: minmax(0, 1fr); }
  .aph { max-width: 520px; }
}


/* --- the catalogue -------------------------------------------------------
   Laid out the way /roles lays it out: a selector rail on the left, cards on
   the right, so the two pages read as one product. What differs is the card:
   here it carries the marks of the software the role runs in, because a
   candidate recognises their own job by the tools long before the title.
   -------------------------------------------------------------------------*/

.ax { margin-top: 26px; }
.ax-main { min-width: 0; }

/* The rail's pills carry a count, which /roles does not need. */
.dept-pill .ax-pill-name { flex: 1; }
.ax-pill-n {
  font-size: 12px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; flex: none;
}
.dept-pill.is-on .ax-pill-n { color: inherit; }
.ax-rail-cta { width: 100%; justify-content: center; margin-top: 12px; }

.ax-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  margin-bottom: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.ax-search:focus-within {
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(46, 166, 245, 0.16);
}
.ax-search svg { color: var(--ink-faint); flex: none; }
.ax-search input {
  flex: 1; min-width: 0;
  padding: 12px 0;
  border: 0; outline: none; background: none;
  font: inherit; font-size: 0.95rem; color: var(--ink);
}
.ax-search input::placeholder { color: var(--ink-faint); }

.ax-panel { display: none; }
.ax-panel.is-on { display: block; }

/* These cards do not link anywhere: /roles/* is written for the company doing
   the hiring, so it is the wrong side of the transaction for this page. They
   keep the catalogue's lift on hover, because they are the same object. */
.role-card.is-static { cursor: default; }
.role-card[hidden] { display: none; }

/* The stack, as brand marks. Greyed at rest so eight logos of eight different
   brand colours do not fight the card's own hierarchy, and true colour on
   hover, which also makes the row feel alive without animating anything. */
.ax-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}
/* The marks show in their own colours: a brand mark is the thing a person
   recognises, and desaturating it takes away exactly what makes it legible at
   26px. The card's own lift is the hover; the logos do not need one. */
.ax-tools img {
  height: 26px;
  width: auto;
  max-width: 88px;
  object-fit: contain;
}
/* The mark that matched the search is why this card is here. */
.ax-tools img.is-hit {
  outline: 2px solid color-mix(in srgb, var(--action) 55%, transparent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Tools we hold no mark for are still named, rather than quietly dropped. */
.ax-tool-more {
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.ax-empty {
  margin: 0;
  padding: 26px 0;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* While searching, matches from every field show together, so each card says
   which field it came from; the rail is no longer what is filtering. */
.ax.is-searching .dept-pill { opacity: 0.45; pointer-events: none; }

@media (max-width: 900px) {
  .ax.roles-layout2 { grid-template-columns: minmax(0, 1fr); }
  .roles-rail { position: static; }
}