/* =========================================================================
   Careers
   Page-scoped styles on top of tw-system.css.

   The page is deliberately thin on new CSS. Its hero is the shared centred
   hero, the promise is the homepage's trust panel, and the last line is the
   shared close. What is left is the open-roles block, which is the only thing
   on this site that has to look designed while holding nothing.
   ========================================================================= */

/* -------------------------------------------------------------------------
   01. Open roles

   An empty list is the hard case. A section that simply disappears when there
   is nothing to post reads as a page nobody maintains, and a bare line of text
   saying "no openings" reads as a dead end. So the empty state is a held
   panel with the same weight a filled list would have: a status, the note
   that says what to do instead, and the one action.

   `.roles__list` below is for the filled state. It is styled now so that
   posting a role is one anchor in careers.html and no CSS at all; the markup
   for it sits commented out in the page, next to where it goes.
   ------------------------------------------------------------------------- */

.roles__body {
  margin-top: 1.5rem;
  font-size: var(--step-lead);
  color: var(--text-secondary);
}

/* The panel recipe every held surface on a dark band uses: --surface over the
   band tone, a hairline, and a light blur. Not the heavier gradient the trust
   panel carries — that one is built to sit on the open field or to invert on
   paper, and on the canopy band it reads as a darker hole rather than a
   raised surface. */
.roles__panel {
  max-width: var(--max-prose);
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) + 4px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Reads like an eyebrow but is not one: the eyebrow's rule is a section mark,
   and a second one inside the panel would compete with the one above it. The
   lit dot does the same job at a third of the width, and it is the same mark
   the rollout steps open on. */
.roles__status {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.roles__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 12px var(--accent-glow);
}

.roles__note {
  margin-top: 1rem;
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* The panel is a smaller box than a section, so the shared 2.25rem above a
   button row opens a gap inside it that reads as a missing paragraph. */
.roles__panel .btn-row {
  margin-top: 1.75rem;
}

/* ---- The filled state ---------------------------------------------------
   One row per role. A row rather than a card: a list of open roles is read
   top to bottom for the one title that matches, and a grid of cards makes
   that scan slower for no gain. Same surface, hairline and hover the router
   cards carry, so a page with roles on it still belongs to the same system.
   ------------------------------------------------------------------------- */

.roles__list {
  display: grid;
  gap: 0.75rem;
  max-width: var(--max-prose);
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.roles__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease),
    background-color 220ms var(--ease), box-shadow 220ms var(--ease);
}

.roles__item:hover {
  background: var(--surface-hi);
  border-color: rgba(103, 188, 124, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
}

/* min-width:0 so a long title wraps inside the row instead of pushing the cue
   off the end of it. */
.roles__title {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.roles__meta {
  font-size: var(--step-small);
  color: var(--text-tertiary);
}

/* margin-left:auto rather than a fixed gap: the titles are different lengths
   and a cue that lands at a different x in each row reads as a list of
   unrelated things. */
.roles__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--sage-bright);
}

.roles__item:hover .roles__cue {
  color: #b7ecc6;
}

.roles__item:hover .roles__cue svg {
  transform: translateX(3px);
}

.roles__cue svg {
  transition: transform 220ms var(--ease);
}

/* -------------------------------------------------------------------------
   02. Trust
   The panel is the homepage's, unchanged, and it only appears here inside the
   paper band. tw-system.css already re-mixes the tile's wash for paper; this
   is the glyph itself, which has to come down off --sage-bright to the ink
   green, or a light stroke on daylight reads as a highlighter mark.
   ------------------------------------------------------------------------- */

.trust__icon {
  color: var(--sage);
}

/* -------------------------------------------------------------------------
   03. Reduced motion
   Nothing on this page moves of its own accord: the lit dot is a static glow
   and every transition here is a hover. tw-system.css already flattens those.

   04. Print
   The held panels lose their surface with everything else the system drops.
   ------------------------------------------------------------------------- */

@media print {
  .roles__panel,
  .roles__item {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}