/* ════════════════════════════════════════════════════════════════════════════
   Feuille commune aux deux pages de LIBRA.
   Reprend la charte des pages agents de STRAS (virgo.html, agents.html) : fond
   nuit, bleu STRAS en en-tête, et la couleur propre à l'agent, l'or de LIBRA,
   celui de son sweat sur les visuels de l'équipe.

   Aucun style en attribut `style=` dans les pages : c'est ce qui permet à la
   CSP de refuser tout style en ligne. L'agent qui relaie les constats de sécurité
   des autres commence par tenir la consigne sur son propre site.
   ════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:        #223A97;
  --navy-deep:   #0d1a52;
  --navy-light:  #2d4db8;

  --bg:          #070b18;
  --panel:       #0f1730;
  --panel-2:     #131c3b;
  --border:      rgba(148,163,209,0.14);
  --border-soft: rgba(148,163,209,0.08);
  --text:        #eef1fb;
  --text-mid:    #97a1c4;
  --text-dim:    #5c6690;

  --ok:      #2dd4a7;
  --warn:    #f07f29;
  --err:     #f4525c;
  --info:    #5b8cf4;

  /* Or de LIBRA, celui de son sweat. C'est la valeur déjà servie par la console
     agents.html du portail, et non le #d4a017 de l'affiche : sur un fond nuit,
     l'or sombre de l'affiche passe pour du brun. Deux pages qui montrent le
     même agent doivent le montrer de la même couleur.

     L'or est aussi la couleur d'avertissement de cette charte (--warn). Une
     pastille « Attention » posée sur une page entièrement or ne se distinguerait
     plus de la décoration : ici l'avertissement vire donc à l'ambre orangé,
     pour que le signal reste un signal. */
  --agent-color: #f0b429;
  --agent-glow:  rgba(240,180,41,0.35);

  --header-h: 64px;
}

html { color-scheme: dark; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

body::before {
  content: ''; position: fixed; inset: var(--header-h) 0 0 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.22), transparent),
    radial-gradient(1px 1px at 68% 12%, rgba(255,255,255,0.16), transparent),
    radial-gradient(1.5px 1.5px at 88% 34%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 28% 62%, rgba(255,255,255,0.14), transparent),
    radial-gradient(1.5px 1.5px at 78% 78%, rgba(255,255,255,0.16), transparent),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,0.12), transparent),
    radial-gradient(circle at 78% 8%, rgba(240,180,41,0.08) 0%, transparent 46%);
}
main, header, footer { position: relative; z-index: 1; }

/* ═══════════════ EN-TÊTE ═══════════════ */
header {
  height: var(--header-h); flex-shrink: 0;
  background: var(--navy-deep);
  display: flex; align-items: center; gap: 4px;
  padding: 0 24px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.header-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.header-logo-icon {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, var(--navy-light), #4a6fd4);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.header-logo-icon svg { width: 18px; height: 16px; }
.header-logo-text { font-family: 'Montserrat', system-ui, sans-serif; }
.header-logo-text .main { font-weight: 800; font-size: 1rem; color: white; line-height: 1; }
.header-badge {
  margin-left: 16px; padding: 3px 10px;
  background: rgba(240,180,41,0.15); border: 1px solid rgba(240,180,41,0.4);
  border-radius: 999px; font-size: 0.65rem; font-weight: 600;
  color: #f7dfa4; letter-spacing: 1px; text-transform: uppercase;
}
.header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header-link {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 600; color: var(--text-mid);
  text-decoration: none; padding: 8px 12px; border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.header-link:hover { background: rgba(255,255,255,0.06); color: white; }
/* Le bouton de déconnexion porte la même classe qu'un lien d'en-tête : il faut
   donc neutraliser ce qu'un <button> apporte de son cru. */
button.header-link { background: none; border: 0; font-family: inherit; cursor: pointer; }
/* Sans cette ligne, le bouton de déconnexion s'affiche à qui n'est PAS
   connecté, et le motif entier tombe. `display: flex` ci-dessus vient d'une
   feuille d'auteur ; la règle `[hidden] { display: none }` du navigateur a la
   même spécificité mais vient de sa feuille à lui, qui perd toujours. Poser
   l'attribut `hidden` ne suffit donc pas, il faut le redire ici.
   Vérifié en place le 2026-09-16 : l'attribut était bien présent, le bouton
   mesurait quand même 126 px de large. */
.header-link[hidden] { display: none; }
button.header-link[disabled] { opacity: 0.5; cursor: progress; }
.header-link svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Sélecteur de langue, composant commun aux sites d'agents ────────────────
   Des liens, pas un menu déroulant : ils naviguent vers une autre URL, ils ne
   basculent pas du texte, et ils fonctionnent sans JavaScript. Le même
   habillage sur CONNECT, ATHENA, VIRGO et THEMIS, qui en avaient trois
   différents.

   Le code à deux lettres est visible, le nom complet est porté par .sr-only :
   quatre noms de langue en toutes lettres ne tiennent pas dans une barre
   d'en-tête, et « EN » seul n'est pas un libellé pour un lecteur d'écran.

   Visible sur toutes les tailles d'écran, y compris là où les libellés des
   autres liens d'en-tête sont masqués. */
.lang-nav {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 10px;
  background: rgba(148,163,209,0.08); border: 1px solid var(--border);
}
.lang-pick {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 8px; border-radius: 7px; white-space: nowrap;
  color: var(--text-mid); text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.lang-pick:hover { color: white; background: rgba(148,163,209,0.14); }
/* La langue servie n'est pas un lien vers elle-même : elle se montre, elle ne
   se clique pas. */
.lang-pick.is-current {
  background: #ffffff; color: var(--navy);
  cursor: default; pointer-events: none;
}

/* Texte réservé aux lecteurs d'écran : présent dans le document, hors de
   l'affichage, et jamais display:none, qui le retirerait aussi de la
   restitution vocale. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════════ CORPS ═══════════════ */
main {
  flex: 1; min-width: 0;
  padding: 34px 32px 48px;
  max-width: 1320px; width: 100%; margin: 0 auto;
}

.agent-header { display: flex; align-items: center; gap: 20px; margin-bottom: 10px; flex-wrap: wrap; }

.agent-header-icon {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--agent-color) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--agent-color) 45%, transparent);
  box-shadow: 0 0 32px -8px var(--agent-glow);
}
.agent-header-icon svg { width: 28px; height: 28px; color: var(--agent-color); }
.agent-header-text h1 {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; color: white;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.agent-header-text p { font-size: 0.88rem; color: var(--text-mid); margin-top: 4px; }

.lede strong { color: var(--text); font-weight: 600; }

h2.section {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.82rem; font-weight: 700; color: var(--text-mid);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 34px 0 14px;
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
}
.pill-ok    { background: rgba(45,212,167,0.14); color: var(--ok);   border: 1px solid rgba(45,212,167,0.35); }
.pill-warn  { background: rgba(240,180,41,0.14); color: var(--warn); border: 1px solid rgba(240,180,41,0.35); }
.pill-err   { background: rgba(244,82,92,0.14);  color: var(--err);  border: 1px solid rgba(244,82,92,0.35); }
.pill-info  { background: rgba(91,140,244,0.14); color: var(--info); border: 1px solid rgba(91,140,244,0.35); }
.pill-muted { background: rgba(148,163,209,0.10); color: var(--text-mid); border: 1px solid var(--border); }

.card {
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: 16px;
  padding: 20px 22px;
}
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.card h3 {
  font-size: 0.95rem; font-weight: 700; color: white; margin-bottom: 8px;
  display: flex; align-items: center; gap: 9px;
}
.card h3 svg { width: 17px; height: 17px; color: var(--agent-color); flex-shrink: 0; }
.card p { font-size: 0.86rem; line-height: 1.7; color: var(--text-mid); }
.card p + p { margin-top: 8px; }
.card ul { margin: 8px 0 0 18px; }
.card li { font-size: 0.84rem; line-height: 1.65; color: var(--text-mid); margin-bottom: 4px; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; }

.stat-card { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px 18px; }
.stat-label { font-size: 0.72rem; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.stat-value { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; color: white; margin-top: 6px; }
.stat-value.accent { color: var(--agent-color); text-shadow: 0 0 18px var(--agent-glow); }
.stat-sub { font-size: 0.74rem; color: var(--text-dim); margin-top: 5px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.86rem; font-weight: 700;
  padding: 11px 20px; border-radius: 11px; cursor: pointer; text-decoration: none;
  background: var(--agent-color); color: #0b0720; border: none;
  transition: filter 0.15s;
}
.btn:hover { filter: brightness(1.08); }
.btn svg { width: 16px; height: 16px; }
.btn-ghost {
  background: transparent; color: var(--text); border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--text-dim); }
.btn[disabled] { opacity: 0.6; cursor: default; }

.note {
  margin-top: 16px; font-size: 0.78rem; color: var(--text-dim);
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.65;
}
.note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

footer {
  flex-shrink: 0; border-top: 1px solid var(--border-soft);
  padding: 22px 32px 30px; color: var(--text-dim); font-size: 0.78rem; line-height: 1.7;
}
footer .inner { max-width: 1120px; margin: 0 auto; display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
footer a { color: var(--text-mid); }

/* ═══════════════ CONSTATS (page interne) ═══════════════ */
.finding {
  background: var(--panel-2); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--text-dim); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px;
}
.finding.alerte    { border-left-color: var(--err); }
.finding.attention { border-left-color: var(--warn); }
.finding.info      { border-left-color: var(--info); }
.finding-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.finding-scope {
  font-size: 0.72rem; font-weight: 700; color: var(--text-mid);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.finding-text { font-size: 0.89rem; color: var(--text); line-height: 1.6; }
.finding-fix {
  margin-top: 8px; font-size: 0.82rem; color: var(--text-mid); line-height: 1.65;
  padding-left: 12px; border-left: 2px solid var(--border);
}
.finding-fix b { color: var(--text); font-weight: 600; }
.finding-ack { margin-top: 8px; font-size: 0.78rem; color: var(--text-dim); line-height: 1.6; }

/* ── Opportunités ───────────────────────────────────────────────────────────
   Le liseré porte ici l'ALIGNEMENT avec le profil de la société, et non la
   gravité : sur les autres pages d'agents, un bord rouge annonce ce qui va mal.
   Une opportunité bien alignée est au contraire ce qu'on espère trouver, d'où
   le vert en tête de liste. Reprendre l'échelle des incidents aurait fait lire
   la veille commerciale comme un relevé de pannes. */
.finding.opp-3 { border-left-color: var(--ok); }
.finding.opp-2 { border-left-color: var(--agent-color); }
.finding.opp-1 { border-left-color: var(--info); }

/* Les services visés par le marché, tels que LIBRA les a rattachés au
   catalogue. C'est ce qui permet de contester un score sans ouvrir le dossier. */
.finding-tags {
  margin-top: 8px; font-size: 0.75rem; color: var(--text-dim);
  letter-spacing: 0.04em;
}
/* La provenance, toujours affichée. Un lien refusé par lienSur() laisse le nom
   de la source en texte : la ligne garde donc la même forme dans les deux cas. */
.finding-source {
  margin-top: 8px; font-size: 0.8rem; color: var(--text-mid);
  overflow-wrap: anywhere;
}
.finding-source b { color: var(--text); font-weight: 600; }
.finding-source a { color: var(--agent-color); text-decoration: none; }
.finding-source a:hover { text-decoration: underline; }

.runs { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.82rem; }
.runs th {
  text-align: left; padding: 9px 10px; color: var(--text-dim);
  font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
.runs td { padding: 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.runs tr:last-child td { border-bottom: none; }
.runs .when { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.76rem; white-space: nowrap; }
.table-wrap { overflow-x: auto; }

.banner {
  border-radius: 12px; padding: 13px 16px; margin-bottom: 18px;
  font-size: 0.85rem; line-height: 1.65;
  border: 1px solid rgba(240,180,41,0.35); background: rgba(240,180,41,0.1); color: #ffd98a;
}
.banner.err { border-color: rgba(244,82,92,0.35); background: rgba(244,82,92,0.1); color: #ffb3b8; }
.banner b { color: white; }

.empty { color: var(--text-dim); font-size: 0.85rem; line-height: 1.7; }

/* Écran de connexion, centré, sans rien d'autre à l'écran. */
.gate { max-width: 540px; margin: 70px auto; text-align: center; }
.gate h2 { font-family: 'Montserrat', system-ui, sans-serif; font-size: 1.2rem; color: white; margin-bottom: 12px; }
.gate p { font-size: 0.9rem; line-height: 1.7; color: var(--text-mid); }
.gate .why { font-size: 0.8rem; color: var(--text-dim); margin-top: 10px; }
.gate .actions { margin-top: 24px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.skeleton { color: var(--text-dim); font-size: 0.85rem; }

/* ── Cartes d'agent, sur l'espace interne ────────────────────────────────────
   Une carte par agent ATTENDU, pas par agent qui a parlé : un agent absent du
   journal doit occuper une place et porter sa pastille, sinon il disparaît du
   tableau au lieu d'y être signalé. Le liseré gauche dit l'état sans qu'on
   lise la pastille. */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

.agent-card {
  background: var(--panel); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--text-dim); border-radius: 14px; padding: 14px 16px;
}
.agent-card.ok      { border-left-color: var(--ok); }
.agent-card.fragile { border-left-color: var(--warn); }
.agent-card.panne   { border-left-color: var(--err); }
.agent-card.muet    { border-left-color: var(--text-dim); }

.agent-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agent-card-name {
  font-family: 'Montserrat', 'Inter', sans-serif; font-weight: 700;
  letter-spacing: .07em; font-size: 15px;
}
.agent-card-role { margin-top: 5px; font-size: 13px; color: var(--agent-color); }
.agent-card-detail { margin-top: 8px; font-size: 13.5px; color: var(--text); }
.agent-card-sub { margin-top: 3px; font-size: 12.5px; color: var(--text-dim); }

/* ── Le bandeau du binôme ────────────────────────────────────────────────────
   Trois colonnes : l'agent, ce qu'ils font ensemble, la personne. Les deux
   portraits se font face, à poids visuel comparable, et le trait qui les relie
   porte la cadence. Une page qui explique un travail à deux ne pouvait pas
   rester une colonne de texte adossée au bord gauche. */
.duo-band {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr) minmax(0, 0.8fr);
  align-items: stretch; gap: 30px;
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: 20px; padding: 30px 34px; margin-bottom: 26px;
}

/* Les deux colonnes sont calées en bas : le robot est deux fois plus haut que
   la photo, et des légendes à deux hauteurs différentes donnaient un bandeau
   qui penche. */
.partner {
  text-align: center; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
}
.partner figcaption { margin-top: 12px; }
.partner-name {
  display: block; font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; color: var(--text);
}
.partner-role {
  display: block; margin-top: 3px; font-size: 0.8rem; line-height: 1.5;
  color: var(--text-dim);
}

/* Le portrait de l'agent est détouré : posé sur le fond nuit, il ne doit porter
   aucun liseré blanc. La lueur reprend la couleur de l'agent. */
.agent-portrait {
  width: 158px; height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 14px 30px var(--agent-glow));
}
.agent-portrait.small { width: 78px; }
/* Le bandeau d'accueil de LIBRA n'a pas la composition en binôme de CONNECT,
   où le portrait partage la ligne avec une photo et un lien tracé entre les
   deux. Seul en tête d'une ligne qui ne porte qu'un titre, il a besoin d'un peu
   plus de présence pour ne pas ressembler à une vignette oubliée. */
.agent-header .agent-portrait { width: 210px; }
@media (max-width: 700px) { .agent-header .agent-portrait { width: 150px; } }

/* Vignette ronde et bordée : la photo est claire, et un carré blanc posé sur le
   fond nuit taperait plus fort que le portrait de l'agent. */
.human-photo {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  display: block; margin: 0 auto;
  border: 2px solid color-mix(in srgb, var(--agent-color) 45%, transparent);
  box-shadow: 0 10px 26px -8px var(--agent-glow);
}

.duo-middle { text-align: center; align-self: center; }
.duo-middle h1 {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 800;
  font-size: 2rem; color: white; letter-spacing: 0.02em;
}
.duo-sub { margin-top: 5px; font-size: 0.92rem; color: var(--text-mid); }

/* Le trait qui relie les deux portraits, et la cadence en son milieu : c'est
   « tous les jours » qui fait la différence entre un binôme et une photo. */
.duo-link { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; }
.duo-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--agent-color) 55%, transparent), transparent);
}
.duo-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--agent-color); box-shadow: 0 0 12px var(--agent-glow);
}
.duo-badge {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--agent-color);
  padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--agent-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--agent-color) 32%, transparent);
}
.duo-claim {
  font-size: 0.95rem; line-height: 1.7; color: var(--text-mid);
  max-width: 56ch; margin: 0 auto;
}

/* Sous le bandeau, le texte peut respirer plus large qu'avant sans cesser
   d'être lisible. */
.lede {
  font-size: 1rem; line-height: 1.75; color: var(--text-mid);
  max-width: 86ch; margin: 22px 0 30px;
}

@media (max-width: 1040px) {
  .duo-band { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .partner { justify-content: flex-start; }
  .duo-middle { order: -1; }
  .agent-portrait { width: 132px; }
}

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  main { padding: 24px 16px 36px; }
  header { padding: 0 14px; }
  footer { padding: 20px 16px 26px; }
}
@media (max-width: 620px) {
  .header-badge { display: none; }
  .header-link span { display: none; }
}

/* ── Liste de l'équipe ───────────────────────────────────────────────────────
   Le nom de l'agent porte sa couleur de marque, celle de son sweat sur les
   visuels : c'est le seul repère visuel commun entre ce site, le portail et le
   bulletin envoyé à l'équipe. Une liste plutôt que cinq cartes, parce que ce
   sont cinq lignes de deux mots et que cinq cartes feraient croire à cinq
   pages. */
ul.crew { list-style: none; margin: 14px 0 0 0; padding: 0; }
ul.crew li {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--border-soft);
}

/* Le symbole reprend la couleur du nom qu'il précède : c'est la liste où l'on
   apprend quel dessin va avec quel agent, et où on la relit ensuite. */
.crew-sym { display: inline-flex; flex-shrink: 0; }
.crew-sym svg { width: 20px; height: 20px; }
ul.crew li:first-child { border-top: 0; }
ul.crew b {
  font-family: 'Montserrat', 'Inter', sans-serif; font-weight: 700;
  letter-spacing: .06em; min-width: 104px; color: var(--agent-color);
}
ul.crew li span { color: var(--text-mid); }
ul.crew li:nth-child(1) b, ul.crew li:nth-child(1) .crew-sym { color: #60a5fa; }
ul.crew li:nth-child(2) b, ul.crew li:nth-child(2) .crew-sym { color: #f4788a; }
ul.crew li:nth-child(3) b, ul.crew li:nth-child(3) .crew-sym { color: #3ecf8e; }
ul.crew li:nth-child(4) b, ul.crew li:nth-child(4) .crew-sym { color: #a78bfa; }
ul.crew li:nth-child(5) b, ul.crew li:nth-child(5) .crew-sym { color: var(--agent-color); }