/* ==========================================================================
   Roles we recruit for — the directory at the foot of the Terms page.
   --------------------------------------------------------------------------
   Around two hundred job titles under the three plan options. That is well
   past the point where a wall of text is readable, so each title is a pill,
   each sector a card, and the whole thing is searchable.

   The tabs are radio inputs matched with :has(), which the rest of this build
   already relies on. Option switching therefore happens in CSS and the section
   works with JavaScript off; only the search box needs script, and it stays
   hidden until roles.js reveals it.

   Loaded on the Terms template only — no other page has this section.
   ========================================================================== */

.roles {
  background: var(--bg-alt);
  border-block-start: 1px solid rgb(0 36 36 / 8%);
  padding-block: var(--sp-8);
}

.roles__inner {
  margin-inline: auto;
  max-inline-size: var(--wrap);
  padding-inline: var(--sp-5);
}

/* ---- heading ------------------------------------------------------------ */

.roles__head {
  max-inline-size: 62ch;
}

.roles__eyebrow {
  color: var(--teal-label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin: 0;
  text-transform: uppercase;
}

.roles__title {
  color: var(--ink-strong);
  font-family: var(--ff-serif);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  margin-block: var(--sp-2) var(--sp-3);
}

.roles__lede {
  color: var(--ink-soft);
  margin: 0;
}

/* ---- tabs and search ---------------------------------------------------- */

.roles__tools {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  margin-block: var(--sp-6) var(--sp-4);
}

.roles__tabs {
  border: 0;
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
}

/* Equal shares of the row. Sizing them to their text meant the set re-flowed
   the moment "91 roles" became "no matches" — the tabs jumped while someone was
   still typing. */
.roles__tab {
  align-items: baseline;
  background: var(--white);
  border: 1px solid rgb(0 36 36 / 12%);
  border-radius: 12px;
  column-gap: var(--sp-2);
  cursor: pointer;
  display: flex;
  flex: 1 1 240px;
  flex-wrap: wrap;
  min-inline-size: 0;
  padding: 0.6rem 0.9rem;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.roles__tab:hover {
  border-color: var(--teal-accent);
}

.roles__tab-no {
  color: var(--teal-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.roles__tab-name {
  color: var(--ink-strong);
  font-size: 0.95rem;
  font-weight: 600;
}

.roles__tab-count,
.roles__tab-hits {
  color: var(--ink-soft);
  flex-basis: 100%;
  font-size: 0.78rem;
}

.roles__tab-hits {
  color: var(--teal-accent);
  font-weight: 600;
}

.roles__tab-hits.is-zero {
  color: var(--ink-soft);
  font-weight: 400;
}

/* While a search is running the plain role count is noise — the match count
   has taken its place. */
.roles.is-searching .roles__tab-count {
  display: none;
}

/* The selected tab, written against the radio that precedes each label. */
.roles__radio:checked + .roles__tab {
  background: var(--teal-header);
  border-color: var(--teal-header);
}

.roles__radio:checked + .roles__tab .roles__tab-no {
  color: rgb(255 255 255 / 78%);
}

.roles__radio:checked + .roles__tab .roles__tab-name {
  color: var(--white);
}

.roles__radio:checked + .roles__tab .roles__tab-count,
.roles__radio:checked + .roles__tab .roles__tab-hits {
  color: rgb(255 255 255 / 80%);
}

.roles__radio:focus-visible + .roles__tab {
  outline: 2px solid var(--teal-ink);
  outline-offset: 2px;
}

.roles__search {
  align-items: center;
  background: var(--white);
  border: 1px solid rgb(0 36 36 / 14%);
  border-radius: 999px;
  display: flex;
  flex: 1 1 100%;
  gap: var(--sp-2);
  max-inline-size: 520px;
  padding: 0.45rem 0.9rem;
}

/* Both of these ship with the hidden attribute — the search until roles.js
   reveals it, the clear button until there is something to clear. A display
   rule out-specifies the browser's own [hidden] { display: none }, so without
   these two lines a page with JavaScript off would show a search box that does
   nothing, and every page would show a clear button over an empty field. */
.roles__search[hidden],
.roles__clear[hidden] {
  display: none;
}

.roles__search:focus-within {
  border-color: var(--teal-accent);
  box-shadow: 0 0 0 3px rgb(0 91 96 / 12%);
}

.roles__search-icon {
  color: var(--teal-label);
  display: flex;
  flex: none;
}

.roles__search-icon svg {
  block-size: 18px;
  inline-size: 18px;
}

.roles__q {
  background: none;
  border: 0;
  color: var(--ink);
  flex: 1;
  font: inherit;
  font-size: 0.92rem;
  min-inline-size: 0;
  outline: 0;
  padding-block: 0.15rem;
}

/* Safari draws its own clear control on type=search; ours is the labelled one. */
.roles__q::-webkit-search-cancel-button {
  display: none;
}

.roles__clear {
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  flex: none;
  padding: 4px;
}

.roles__clear:hover {
  background: var(--bg-band);
  color: var(--ink-strong);
}

.roles__clear svg {
  block-size: 14px;
  inline-size: 14px;
}

.roles__result {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block: 0 var(--sp-4);
  min-block-size: 1.6em;
}

.roles__status {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0;
}

/* When the open option has nothing but another one does, saying so is not
   enough — this takes them there. */
.roles__jump {
  background: none;
  border: 1px solid var(--teal-accent);
  border-radius: 999px;
  color: var(--teal-accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 3px 12px;
}

.roles__jump:hover {
  background: var(--teal-accent);
  color: var(--white);
}

.roles__jump[hidden] {
  display: none;
}

/* ---- panels ------------------------------------------------------------- */

.roles__panel {
  display: none;
}

.roles:has(#roles-tab-1:checked) #roles-panel-1,
.roles:has(#roles-tab-2:checked) #roles-panel-2,
.roles:has(#roles-tab-3:checked) #roles-panel-3 {
  display: block;
}

.roles__blurb {
  color: var(--ink-soft);
  margin-block: 0 var(--sp-5);
  max-inline-size: 68ch;
}

.roles__note {
  background: var(--white);
  border-inline-start: 4px solid var(--teal-accent);
  border-radius: 0 10px 10px 0;
  margin-block: 0 var(--sp-4);
  max-inline-size: 68ch;
  padding: var(--sp-4);
}

/* ---- sector cards ------------------------------------------------------- */

/* start, not stretch: a sector with six roles beside one with thirty should
   not be padded out to match it. */
.roles__grid {
  align-items: start;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
}

.roles__card {
  background: var(--white);
  border: 1px solid rgb(0 36 36 / 9%);
  border-radius: 16px;
  padding: var(--sp-4);
}

.roles__card[hidden] {
  display: none;
}

.roles__card-head {
  align-items: center;
  display: flex;
  gap: var(--sp-3);
  margin-block-end: var(--sp-3);
}

.roles__card-icon {
  align-items: center;
  background: rgb(46 106 103 / 10%);
  block-size: 36px;
  border-radius: 10px;
  color: var(--teal-deep);
  display: flex;
  flex: none;
  inline-size: 36px;
  justify-content: center;
}

.roles__card-icon svg {
  block-size: 20px;
  inline-size: 20px;
}

.roles__card-title {
  color: var(--ink-strong);
  flex: 1;
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

.roles__card-count {
  background: var(--bg-band);
  border-radius: 999px;
  color: var(--ink-soft);
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
}

.roles__courses {
  background: var(--bg);
  border-radius: 10px;
  margin-block-end: var(--sp-3);
  padding: var(--sp-3);
}

.roles__courses-label {
  color: var(--teal-label);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 var(--sp-1);
  text-transform: uppercase;
}

.roles__courses-list {
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
  list-style: none;
  margin: 0;
  padding: 0;
}

.roles__set + .roles__set {
  margin-block-start: var(--sp-3);
}

.roles__set[hidden] {
  display: none;
}

.roles__set-name {
  color: var(--teal-label);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  margin: 0 0 var(--sp-2);
  text-transform: uppercase;
}

.roles__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.roles__role {
  background: var(--bg);
  border: 1px solid rgb(0 36 36 / 7%);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.3;
  padding: 5px 11px;
}

.roles__role[hidden] {
  display: none;
}

/* A match has to stand out from titles that merely survived the filter in
   some other card further down. */
.roles__role.is-hit {
  background: rgb(46 106 103 / 12%);
  border-color: rgb(46 106 103 / 30%);
  color: var(--teal-ink);
  font-weight: 600;
}

.roles__empty {
  background: var(--white);
  border: 1px dashed rgb(0 36 36 / 18%);
  border-radius: 12px;
  color: var(--ink-soft);
  margin-block-start: var(--sp-4);
  padding: var(--sp-5);
  text-align: center;
}

/* ---- footer ------------------------------------------------------------- */

.roles__foot {
  align-items: center;
  border-block-start: 1px solid rgb(0 36 36 / 10%);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-5);
}

.roles__disclaimer {
  color: var(--ink-soft);
  flex: 1 1 32ch;
  font-size: 0.85rem;
  margin: 0;
  max-inline-size: 76ch;
}

.roles__cta {
  flex: none;
}

@media (max-width: 720px) {
  .roles {
    padding-block: var(--sp-7);
  }

  .roles__tools {
    align-items: stretch;
    flex-direction: column;
  }

  /* Stacked, not three across. Sharing 390px between them leaves each about
     120px, and "Professional / White-Collar / Study" then breaks over four
     cramped lines while the tallest tab sets the height of all three. */
  .roles__tabs {
    flex-direction: column;
  }

  .roles__tab {
    flex: 0 0 auto;
  }

  .roles__search {
    inline-size: 100%;
    max-inline-size: none;
  }
}