/* =============================================================================
   consensus-2027.css - turf.bzh
   -----------------------------------------------------------------------------
   Page « Consensus des turfistes du Quinte+ ». Meme systeme que
   assets/css/course-2027.css : les jetons --tbz-ag-* du theme, recopies en
   --cs-* avec une valeur de secours en dur pour que la page tienne debout meme
   si le theme ne publie rien.

   REGLE DE LARGEUR, identique a celle du bloc de course : un bloc de texte ne
   porte JAMAIS de largeur maximale a l'interieur d'un cadre. Quand une ligne
   devient trop longue pour l'oeil, on decoupe l'espace en colonnes, on ne
   laisse pas du vide a cote.

   @author Claude (Cowork mode, 2026-08-02)
   @version 1.0.0
   ========================================================================== */

.tbz-cs {
  --cs-bg:      var(--tbz-ag-bg, #f8fafc);
  --cs-soft:    var(--tbz-ag-bg-soft, #f1f5f9);
  --cs-card:    var(--tbz-ag-card, #fff);
  --cs-card2:   var(--tbz-ag-card-2, #fbfcfd);
  --cs-bd:      var(--tbz-ag-border, #e5e7eb);
  --cs-bd-soft: var(--tbz-ag-border-soft, #eef0f3);
  --cs-bd-fort: var(--tbz-ag-border-strong, #d1d5db);
  --cs-ink:     var(--tbz-ag-text, #0f172a);
  --cs-ink2:    var(--tbz-ag-text-2, #1e293b);
  --cs-ink3:    #334155;
  --cs-mut:     #475569;
  --cs-mut-aa:  #55637a;
  --cs-acc:     var(--tbz-ag-accent, #0a7c91);
  --cs-acc-d:   var(--tbz-ag-accent-d, #075d6e);
  --cs-acc-l:   var(--tbz-ag-accent-l, #e0f2f6);
  --cs-acc-l2:  var(--tbz-ag-accent-l2, #ecf7fa);
  --cs-ok:      #047857;
  --cs-ok-bg:   var(--tbz-ag-success-bg, #ecfdf5);
  --cs-ok-bd:   var(--tbz-ag-success-bd, #a7f3d0);
  --cs-warn:    var(--tbz-ag-warn, #b45309);
  --cs-warn-bg: var(--tbz-ag-warn-bg, #fffbeb);
  --cs-warn-bd: var(--tbz-ag-warn-bd, #fde68a);
  --cs-info:    var(--tbz-ag-info, #1d4ed8);
  --cs-info-bg: var(--tbz-ag-info-bg, #eff6ff);
  --cs-info-bd: var(--tbz-ag-info-bd, #bfdbfe);
  --cs-r-xs:    var(--tbz-ag-r-xs, 6px);
  --cs-r-sm:    var(--tbz-ag-r-sm, 10px);
  --cs-r-md:    var(--tbz-ag-r-md, 14px);
  --cs-r-lg:    var(--tbz-ag-r-lg, 18px);
  --cs-pill:    var(--tbz-ag-r-pill, 999px);
  --cs-sh-xs:   var(--tbz-ag-sh-xs, 0 1px 2px 0 rgba(15,23,42,.04));
  --cs-sh-sm:   var(--tbz-ag-sh-sm, 0 1px 3px 0 rgba(15,23,42,.06), 0 1px 2px -1px rgba(15,23,42,.04));
  --cs-ease:    var(--tbz-ag-ease-out, cubic-bezier(.16, 1, .3, 1));
  --cs-font:    var(--tbz-ag-font, 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);

  font-family: var(--cs-font);
  color: var(--cs-ink);
  letter-spacing: -.005em;
  margin: 26px 0 34px;
}
.tbz-cs *, .tbz-cs *::before, .tbz-cs *::after { box-sizing: border-box; }
.tbz-cs [hidden] { display: none !important; }
.tbz-cs-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Sous 769 px, le conteneur du theme colle aux bords : meme retrait que les
   autres blocs 2027. */
@media (max-width: 768px) { .tbz-cs { padding: 0 0.5rem; } }

/* ── Chapeau ───────────────────────────────────────────────────────────── */
.tbz-cs-sur {
  margin: 0 0 6px; display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--cs-acc-d);
}
.tbz-cs-sur i { font-size: 12px; }
.tbz-cs h1 {
  margin: 0 0 10px; font-size: 23px; font-weight: 760; letter-spacing: -.03em;
  line-height: 1.18; color: var(--cs-ink);
}
@media (min-width: 768px) { .tbz-cs h1 { font-size: 30px; } }
.tbz-cs-lead { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--cs-mut); }
@media (min-width: 992px) { .tbz-cs-lead { column-width: 26rem; column-gap: 38px; } }
.tbz-cs-lead b { color: var(--cs-ink2); font-weight: 700; }

.tbz-cs a { color: var(--cs-acc-d); text-decoration: underline; text-underline-offset: 2px; }
.tbz-cs a:hover { text-decoration-thickness: 2px; }
.tbz-cs a:focus-visible { outline: 2px solid var(--cs-acc); outline-offset: 2px; border-radius: 2px; }

/* ── La barre de reglages ──────────────────────────────────────────────────
   Cinq reglages. Chacun est un groupe de boutons radio deguises en segments :
   l'etat est visible sans survol, l'element reste un vrai <input> donc le
   clavier, le lecteur d'ecran et le fonctionnement sans script sont acquis. */
.tbz-cs-form {
  margin: 18px 0 0; padding: 14px 16px;
  background: var(--cs-card); border: 1px solid var(--cs-bd);
  border-left: 3px solid var(--cs-acc); border-radius: var(--cs-r-md);
  box-shadow: var(--cs-sh-xs);
  display: grid; gap: 14px;
}
@media (min-width: 900px) { .tbz-cs-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 30px; } }
@media (min-width: 1200px) { .tbz-cs-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tbz-cs-reg { border: 0; padding: 0; margin: 0; min-width: 0; }
.tbz-cs-reg > legend, .tbz-cs-reg > .tbz-cs-lbl {
  padding: 0; margin: 0 0 6px; float: none;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--cs-mut); width: auto;
}
.tbz-cs-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.tbz-cs-seg label {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 14px; margin: 0;   /* 44 px : regle du projet */
  border: 1px solid var(--cs-bd); border-radius: var(--cs-pill);
  background: var(--cs-card2); color: var(--cs-ink3);
  font-size: 13px; font-weight: 650; line-height: 1; cursor: pointer;
  transition: background .15s var(--cs-ease), border-color .15s var(--cs-ease), color .15s var(--cs-ease);
}
/* Le bouton radio couvre TOUTE la pastille au lieu de se tapir en 1x1 px dans
   son coin : sans cela, la moitie de la surface visible etait un <label> et
   l'autre un <input> invisible, et un clic pouvait tomber sur l'un ou l'autre.
   Ici, toute la pastille est le controle. */
.tbz-cs-seg input {
  /* inset:-1px et non 0 : un enfant absolu se cale sur la boite de PADDING du
     parent, donc la bordure de 1 px restait dehors et le controle mesurait
     42 px pour une pastille de 44. */
  position: absolute; inset: -1px;
  margin: 0; opacity: 0; cursor: pointer;
}
.tbz-cs-seg label:hover { border-color: var(--cs-bd-fort); background: var(--cs-soft); }
.tbz-cs-seg input:checked + span { color: #fff; }
.tbz-cs-seg label:has(input:checked) { background: var(--cs-acc); border-color: var(--cs-acc); color: #fff; }
.tbz-cs-seg label:has(input:focus-visible) { outline: 2px solid var(--cs-acc); outline-offset: 2px; }
/* Repli pour les navigateurs sans :has() - la pastille reste lisible, elle est
   simplement moins voyante. */
@supports not selector(:has(*)) {
  .tbz-cs-seg input:checked ~ span { text-decoration: underline; text-decoration-thickness: 2px; font-weight: 800; }
}
.tbz-cs-sel {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--cs-bd); border-radius: var(--cs-r-sm);
  background: var(--cs-card); color: var(--cs-ink); font: inherit; font-size: 14px;
}
.tbz-cs-sel:focus-visible { outline: 2px solid var(--cs-acc); outline-offset: 2px; }
.tbz-cs-go {
  min-height: 44px; padding: 11px 20px; border: 1px solid var(--cs-acc);
  border-radius: var(--cs-r-sm); background: var(--cs-acc); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.tbz-cs[data-js="1"] .tbz-cs-jsoff { display: none; }

/* ── L'etat ───────────────────────────────────────────────────────────────── */
.tbz-cs-etat {
  margin: 14px 0 0; padding: 11px 14px;
  background: var(--cs-acc-l2); border: 1px solid var(--cs-acc-l);
  border-radius: var(--cs-r-sm);
  font-size: 13.5px; line-height: 1.55; color: var(--cs-ink3);
}
.tbz-cs[data-charge="1"] .tbz-cs-etat { opacity: .55; }

/* ── Le classement ─────────────────────────────────────────────────────────
   Une ligne par cheval : rang, numero, nom, barre, points, place a l'arrivee.
   La barre est un rappel visuel de l'ecart, jamais le seul porteur : les
   points sont ecrits a cote. */
.tbz-cs-rang { list-style: none; margin: 14px 0 0; padding: 0; }
.tbz-cs-l {
  display: grid; align-items: center; gap: 4px 10px;
  grid-template-columns: 26px 30px minmax(0, 1fr) auto;
  grid-template-areas: "r n c a" ". . b b" ". . p p";
  padding: 10px 12px; margin: 0 0 7px;
  border: 1px solid var(--cs-bd); border-radius: var(--cs-r-sm); background: var(--cs-card);
}
@media (min-width: 700px) {
  .tbz-cs-l {
    grid-template-columns: 30px 34px minmax(7rem, 15rem) minmax(0, 1fr) auto auto;
    grid-template-areas: "r n c b p a";
    gap: 12px; padding: 11px 14px;
  }
}
.tbz-cs-l:last-child { margin-bottom: 0; }
.tbz-cs-l-podium { background: var(--cs-acc-l2); border-color: var(--cs-acc-l); }
.tbz-cs-l-r {
  grid-area: r; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cs-soft); color: var(--cs-mut);
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.tbz-cs-l-podium .tbz-cs-l-r { background: var(--cs-acc); color: #fff; }
.tbz-cs-l-n {
  grid-area: n; display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 26px; padding: 0 6px; border-radius: var(--cs-r-xs);
  background: var(--cs-ink); color: #fff;
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.tbz-cs-l-c { grid-area: c; font-size: 14px; font-weight: 700; color: var(--cs-ink); min-width: 0; }
.tbz-cs-l-b {
  grid-area: b; display: block; height: 8px; border-radius: var(--cs-pill);
  background: var(--cs-soft); overflow: hidden; min-width: 40px;
}
.tbz-cs-l-bi { display: block; height: 100%; border-radius: inherit; background: var(--cs-acc); }
.tbz-cs-l-podium .tbz-cs-l-bi { background: var(--cs-acc-d); }
.tbz-cs-l-p { grid-area: p; font-size: 13px; color: var(--cs-mut-aa); white-space: nowrap; }
.tbz-cs-l-p b { color: var(--cs-ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.tbz-cs-l-cit { font-size: 12px; }
.tbz-cs-l-a {
  grid-area: a; display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 26px; padding: 0 7px; border-radius: var(--cs-r-xs);
  background: var(--cs-soft); color: var(--cs-mut); font-size: 12.5px; font-weight: 750;
}
.tbz-cs-l-a-ok { background: var(--cs-ok-bg); border: 1px solid var(--cs-ok-bd); color: var(--cs-ok); }
.tbz-cs-l-a sup { font-size: .7em; }

.tbz-cs-vide {
  margin: 14px 0 0; padding: 16px; text-align: center;
  background: var(--cs-soft); border: 1px dashed var(--cs-bd-fort); border-radius: var(--cs-r-sm);
  font-size: 13.5px; color: var(--cs-mut-aa);
}
.tbz-cs-vide i { margin-right: 8px; color: var(--cs-bd-fort); }

/* ── Les tours d'elimination ───────────────────────────────────────────────── */
.tbz-cs-tours { margin: 18px 0 0; }
.tbz-cs-st { margin: 0 0 4px; font-size: 16px; font-weight: 740; letter-spacing: -.02em; color: var(--cs-ink); }
.tbz-cs-stp { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--cs-mut); }
.tbz-cs-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
@media (min-width: 800px) { .tbz-cs-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; } }
.tbz-cs-tl li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px;
  padding: 9px 12px; border: 1px solid var(--cs-bd); border-left: 3px solid var(--cs-warn);
  border-radius: var(--cs-r-sm); background: var(--cs-warn-bg);
  font-size: 13px; line-height: 1.5; color: var(--cs-ink3);
}
.tbz-cs-tl-t { font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-warn); }
.tbz-cs-tl-n { font-size: 12px; color: var(--cs-mut); }
.tbz-cs-tl-e { grid-column: 1 / -1; }
.tbz-cs-tl-e b { font-variant-numeric: tabular-nums; }
.tbz-cs-tl-plus { grid-column: 1 / -1; background: var(--cs-soft); border-left-color: var(--cs-bd-fort); color: var(--cs-mut); }

/* ── La verification contre l'arrivee ──────────────────────────────────────── */
.tbz-cs-verif { margin: 18px 0 0; }
.tbz-cs-verif-b {
  padding: 13px 16px; border: 1px solid var(--cs-ok-bd); border-radius: var(--cs-r-md);
  background: var(--cs-ok-bg);
}
.tbz-cs-verif-t { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--cs-ok); }
.tbz-cs-verif-a { margin: 0 0 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.tbz-cs-ar {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: var(--cs-pill); background: var(--cs-card); border: 1px solid var(--cs-ok-bd);
  font-size: 12.5px; color: var(--cs-ink3);
}
.tbz-cs-ar b { font-variant-numeric: tabular-nums; color: var(--cs-ok); }
.tbz-cs-verif-s { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--cs-ink3); }
.tbz-cs-att {
  margin: 0; padding: 12px 15px; border: 1px solid var(--cs-info-bd); border-left: 3px solid var(--cs-info);
  border-radius: var(--cs-r-sm); background: var(--cs-info-bg);
  font-size: 13.5px; line-height: 1.55; color: var(--cs-ink3);
}
.tbz-cs-att i { margin-right: 8px; color: var(--cs-info); }

/* ── Le bilan de saison ────────────────────────────────────────────────────── */
.tbz-cs-bilan { margin: 34px 0 0; }
.tbz-cs-h2 { margin: 0 0 8px; font-size: 20px; font-weight: 750; letter-spacing: -.025em; color: var(--cs-ink); }
@media (min-width: 768px) { .tbz-cs-h2 { font-size: 24px; } }
.tbz-cs-p { margin: 0 0 12px; font-size: 14px; line-height: 1.62; color: var(--cs-ink3); }
@media (min-width: 992px) { .tbz-cs-p { column-width: 26rem; column-gap: 38px; } }
.tbz-cs-p b { color: var(--cs-ink); font-weight: 700; }

.tbz-cs-cadre {
  display: grid; gap: 10px; margin: 0 0 16px;
}
@media (min-width: 700px) { .tbz-cs-cadre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.tbz-cs-fait {
  padding: 13px 16px; border: 1px solid var(--cs-bd); border-radius: var(--cs-r-md);
  background: var(--cs-card); box-shadow: var(--cs-sh-xs);
}
.tbz-cs-fait-n { margin: 0; font-size: 26px; font-weight: 780; letter-spacing: -.03em; color: var(--cs-acc-d); font-variant-numeric: tabular-nums; }
.tbz-cs-fait-t { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--cs-ink3); }
.tbz-cs-fait-s { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: var(--cs-mut); }

.tbz-cs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbz-cs-tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px;
  border: 1px solid var(--cs-bd); border-radius: var(--cs-r-md); overflow: hidden; background: var(--cs-card); }
.tbz-cs-tab thead th {
  padding: 10px 13px; text-align: left; background: var(--cs-soft); color: var(--cs-mut);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--cs-bd); white-space: nowrap;
}
.tbz-cs-tab td, .tbz-cs-tab tbody th {
  padding: 11px 13px; border-bottom: 1px solid var(--cs-bd-soft);
  text-align: left; font-weight: 400; color: var(--cs-ink3); vertical-align: top;
}
/* Le libelle du reglage peut revenir a la ligne : sans cela, « Borda, les 20
   premiers a l'obstacle » tenait sur une ligne et le tableau reclamait 1 095 px
   la ou le conteneur en offrait 936 a 992 px de fenetre. */
.tbz-cs-tab tbody th { font-weight: 650; color: var(--cs-ink); white-space: normal; min-width: 9rem; }
.tbz-cs-tab thead th:not(:first-child) { white-space: normal; }
.tbz-cs-tab tbody tr:last-child td, .tbz-cs-tab tbody tr:last-child th { border-bottom: 0; }
.tbz-cs-tab tbody tr:hover td, .tbz-cs-tab tbody tr:hover th { background: var(--cs-acc-l2); }
.tbz-cs-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbz-cs-ref td, .tbz-cs-ref th { background: var(--cs-acc-l2); }
.tbz-cs-verdict {
  display: inline-block; padding: 2px 9px; border-radius: var(--cs-pill);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--cs-soft); border: 1px solid var(--cs-bd); color: var(--cs-mut);
}
.tbz-cs-verdict-oui { background: var(--cs-ok-bg); border-color: var(--cs-ok-bd); color: var(--cs-ok); }
/* Jusqu'a 992 px, et non 768 : mesure au banc, a 768 px les cinq colonnes du
   tableau reclament 1 103 px dans un conteneur de 696 et le tableau se met a
   defiler lateralement. Une carte par reglage lit mieux qu'un tableau qu'il
   faut pousser du doigt. */
@media (max-width: 991.98px) {
  .tbz-cs-tab { display: block; border: 0; border-radius: 0; background: none; overflow: visible; }
  .tbz-cs-tab thead {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .tbz-cs-tab thead, .tbz-cs-tab thead tr, .tbz-cs-tab thead th { display: block; }
  .tbz-cs-tab tbody { display: block; }
  .tbz-cs-tab tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px;
    margin: 0 0 9px; padding: 11px 13px;
    border: 1px solid var(--cs-bd); border-radius: var(--cs-r-sm); background: var(--cs-card2);
  }
  .tbz-cs-tab tbody th, .tbz-cs-tab tbody td { display: block; padding: 0; border: 0; background: none; }
  .tbz-cs-tab tbody th { grid-column: 1 / -1; white-space: normal; margin-bottom: 3px; }
  /* En carte, l'en-tete de colonne n'est plus au-dessus de la valeur : sans
     lui, la carte n'est qu'une pile de nombres nus. Chaque cellule porte donc
     son libelle, repris de la ligne d'en-tetes. */
  .tbz-cs-tab tbody td { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
  .tbz-cs-tab tbody td[data-l]::before {
    content: attr(data-l);
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--cs-mut);
  }
  .tbz-cs-tab tbody td { grid-column: 1 / -1; }
  .tbz-cs-tab tbody tr { grid-template-columns: minmax(0, 1fr); }
  .tbz-cs-tab tbody tr:hover td, .tbz-cs-tab tbody tr:hover th { background: none; }
}

/* ── L'explication ─────────────────────────────────────────────────────────── */
.tbz-cs-doc { margin: 34px 0 0; }
.tbz-cs-doc-g { display: grid; gap: 10px; margin: 12px 0 0; }
@media (min-width: 800px) { .tbz-cs-doc-g { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.tbz-cs-meth {
  padding: 14px 16px; border: 1px solid var(--cs-bd); border-top: 3px solid var(--cs-acc);
  border-radius: var(--cs-r-md); background: var(--cs-card); box-shadow: var(--cs-sh-xs);
}
.tbz-cs-meth h3 { margin: 0 0 4px; font-size: 16px; font-weight: 750; letter-spacing: -.02em; color: var(--cs-ink); }
.tbz-cs-meth-d { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cs-acc-d); }
.tbz-cs-meth p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.58; color: var(--cs-ink3); }
.tbz-cs-meth p:last-child { margin-bottom: 0; }

.tbz-cs-regles { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .tbz-cs-regles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 16px; } }
.tbz-cs-regles li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
  padding: 11px 13px; border: 1px solid var(--cs-bd); border-radius: var(--cs-r-sm);
  background: var(--cs-card2); font-size: 13px; line-height: 1.55; color: var(--cs-ink3);
}
.tbz-cs-regles i { margin-top: 3px; font-size: 12px; color: var(--cs-acc); }
.tbz-cs-regles b { color: var(--cs-ink); font-weight: 700; }

.tbz-cs-legal {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 24px 0 0; padding: 13px 16px;
  border: 1px solid var(--cs-bd); border-radius: var(--cs-r-sm); background: var(--cs-soft);
  font-size: 12.5px; line-height: 1.55; color: var(--cs-mut-aa);
}
.tbz-cs-legal i { flex: 0 0 auto; margin-top: 2px; font-size: 12px; color: var(--cs-mut); }

@media (prefers-reduced-motion: reduce) {
  .tbz-cs-seg label { transition: none; }
}