/* Bordure — recettes de composants, préfixe b-, posées sur les variables de tokens.css. */

.b-num { font-variant-numeric: tabular-nums; }
.b-display { font-family: var(--font-display); }
.b-link { color: var(--radio); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.b-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }

@media (prefers-reduced-motion: reduce) {
  .b-btn, .b-appbar__tab { transition: none; }
}

/* — Barre de l'application — */
.b-appbar {
  height: var(--bar-height);
  background: var(--bar);
  color: var(--on-bar);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  min-width: 0;
}
.b-appbar__logo { display: block; height: 20px; width: auto; flex: none; }
.b-appbar__sep { width: 1px; align-self: stretch; margin: var(--space-3) 0; background: var(--bar-raised); flex: none; }
.b-appbar__title { margin: 0; color: var(--on-bar); white-space: nowrap; }
.b-appbar__ctx { color: var(--on-bar-2); font-size: 13px; line-height: 16px; white-space: nowrap; }
.b-appbar__nav { display: flex; gap: var(--space-1); }
.b-appbar__tab {
  height: var(--control-md);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--on-bar-2);
  font: 600 13px/1 var(--font-sans);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms, color 120ms;
}
.b-appbar__tab:hover { background: var(--bar-raised); color: var(--on-bar); }
.b-appbar__tab[aria-current="page"] { background: var(--bar-raised); color: var(--on-bar); box-shadow: inset 0 -2px 0 var(--on-bar); }
.b-appbar__tab:focus-visible { outline: 2px solid var(--on-bar); outline-offset: 2px; }
.b-appbar__spacer { flex: 1; }
.b-appbar__meta { display: flex; align-items: center; gap: var(--space-4); color: var(--on-bar-2); font-size: 13px; white-space: nowrap; }
.b-appbar__meta strong { color: var(--on-bar); font-weight: 600; }

/* Puce d'équipe : la nôtre en brand, les autres à leurs couleurs. */
.b-teamchip { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 13px/16px var(--font-sans); }
.b-teamchip__abbr {
  font: 800 13px/1 var(--font-display);
  letter-spacing: 0.04em;
  padding: 3px 5px;
  border-radius: var(--radius-xs);
  background: var(--brand);
  color: var(--on-brand);
}

/* — Boutons — */
.b-btn {
  height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--rule-control);
  border-radius: var(--radius-sm);
  background: var(--sheet);
  color: var(--ink);
  font: 600 14px/1 var(--font-sans);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms;
}
.b-btn:hover { background: var(--hover); }
.b-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.b-btn--primary { background: var(--inverse); border-color: var(--inverse); color: var(--on-inverse); }
.b-btn--primary:hover { background: var(--bar-raised); border-color: var(--bar-raised); }
.b-btn--quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.b-btn--quiet:hover { background: var(--hover); color: var(--ink); }
.b-btn--sm { height: var(--control-sm); padding: 0 var(--space-2); font-size: 13px; }
.b-btn--lg { height: var(--control-lg); padding: 0 var(--space-4); font-size: 15px; }
.b-btn:disabled, .b-btn[aria-disabled="true"] { background: var(--sunken); border-color: var(--rule); color: var(--ink-disabled); cursor: not-allowed; }

.b-kbd {
  font: 700 11px/14px var(--font-sans);
  padding: 1px 4px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  background: var(--panel);
  color: var(--ink-3);
}
.b-btn--primary .b-kbd { background: transparent; border-color: var(--on-bar-2); color: var(--on-bar-2); }

/* — Panneau — */
.b-panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: var(--ink);
  font-family: var(--font-sans);
}
.b-panel__head { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); }
.b-panel__title { margin: 0; flex: 1; min-width: 0; }
.b-panel__body { padding: 0 var(--space-4); overflow: auto; min-height: 0; }
.b-panel__row { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.b-panel__row:last-child { border-bottom: 0; }
.b-panel__more { padding: var(--space-2) var(--space-4) var(--space-3); border-top: 1px solid var(--rule); font-size: 13px; }

/* — Capsule et groupe — */
.b-capsule { display: inline-block; flex: none; width: var(--capsule-w); height: var(--capsule-h); border-radius: var(--radius-pill); background: var(--ink-3); }
.b-capsule--ours { background: var(--brand); }
.b-pack { display: flex; flex-wrap: wrap; gap: var(--space-hair); align-items: center; }

.b-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-sans);
}
.b-group--ours { background: var(--brand-tint); }
.b-group__name { margin: 0; }
.b-group__gap { grid-row: span 2; align-self: center; text-align: right; }
.b-group__riders { color: var(--ink-2); }
.b-group__riders strong { color: var(--ink); font-weight: 600; }

/* — Provenance — */
.b-mark { display: inline-block; flex: none; width: var(--mark); height: var(--mark); border-radius: var(--radius-pill); box-sizing: border-box; }
.b-mark--seen { background: var(--ink); }
.b-mark--reported { border: 2px solid var(--radio); }
.b-mark--estimated { border: 1.5px solid var(--staff); background: linear-gradient(90deg, var(--staff) 50%, transparent 50%); }
.b-mark--unknown { border: 1.5px dashed var(--ink-3); }
.b-src { display: inline-flex; align-items: center; gap: var(--space-1); font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.b-src__word { font-weight: 600; color: var(--ink-2); }
.b-src--reported .b-src__word { color: var(--radio); }
.b-src--estimated .b-src__word { color: var(--staff); }
.b-age--aging { color: var(--staff); text-decoration: underline dotted; text-underline-offset: 3px; }
.b-value--stale { color: var(--ink-3); }

/* — Statut de consigne — */
.b-status { display: inline-flex; align-items: center; gap: var(--space-1); font: 600 12px/16px var(--font-sans); color: var(--ink-2); }
.b-status::before { content: ""; flex: none; width: var(--mark); height: var(--mark); box-sizing: border-box; }
.b-status--pending::before { border: 1.5px solid var(--ink-3); border-radius: var(--radius-xs); }
.b-status--active { color: var(--radio); }
.b-status--active::before { background: var(--radio); border-radius: var(--radius-xs); }
.b-status--watch { color: var(--staff); }
.b-status--watch::before { background: var(--staff); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.b-status--failed { color: var(--stop); }
.b-status--failed::before { background: var(--stop); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.b-status--closed { color: var(--ink-3); }
.b-status--closed::before { height: 2px; background: var(--ink-3); }

/* — Note : conseil du staff, refus de la règle — */
.b-note {
  display: grid;
  grid-template-columns: var(--mark) minmax(0, 1fr);
  gap: var(--space-1) var(--space-2);
  align-items: baseline;
  padding: var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: 400 13px/18px var(--font-sans);
}
.b-note::before { content: ""; width: var(--mark); height: var(--mark); align-self: center; }
.b-note__title { font-weight: 600; }
.b-note__body { grid-column: 2; color: var(--ink-2); }
.b-note--advice { background: var(--staff-tint); border-color: var(--staff); }
.b-note--advice::before { background: var(--staff); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.b-note--refusal { background: var(--stop-tint); border-color: var(--stop); }
.b-note--refusal::before { background: var(--stop); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.b-note__code { color: var(--stop); font-weight: 600; font-variant-numeric: tabular-nums; }

/* — Maillots de classement (SVG 16 × 14) — */
.b-jersey { display: inline-block; flex: none; width: 16px; height: 14px; vertical-align: -2px; }
.b-jersey path { stroke: var(--rule-control); stroke-width: 1; stroke-linejoin: round; }
.b-jersey--general path { fill: var(--jersey-general); }
.b-jersey--points path { fill: var(--jersey-points); }
.b-jersey--mountain path { fill: var(--jersey-mountain); }
.b-jersey--mountain circle { fill: var(--jersey-mountain-dot); }
.b-jersey--youth path { fill: var(--jersey-youth); }

/* — Puces — */
.b-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--sunken);
  color: var(--ink-2);
  font: 700 12px/1 var(--font-sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.b-tag--wt { background: var(--class-wt-tint); color: var(--class-wt); }
.b-tag--pro { background: var(--class-pro-tint); color: var(--class-pro); }
.b-tag--c1 { background: var(--class-c1-tint); color: var(--class-c1); }
.b-tag--c2 { background: var(--class-c2-tint); color: var(--class-c2); }
.b-tag--demo { background: transparent; border: 1px dashed var(--rule-control); color: var(--ink-3); }

/* — Tableau — */
.b-table { width: 100%; border-collapse: collapse; color: var(--ink); font: 400 13px/18px var(--font-sans); }
.b-table th { text-align: left; padding: 0 var(--space-2) var(--space-2); border-bottom: 1px solid var(--rule-strong); color: var(--ink-3); font: 600 12px/16px var(--font-sans); letter-spacing: 0.02em; white-space: nowrap; }
.b-table td { height: var(--row); padding: 0 var(--space-2); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.b-table .is-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.b-table tr.is-ours td { background: var(--brand-tint); }
.b-table tr.is-ours .b-rider { font-weight: 600; }
.b-rider { display: inline-flex; align-items: center; gap: var(--space-2); }

/* — Ligne de rive : une limite qu'on ne franchit pas sans conséquence — */
.b-limit { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-3); font: 600 12px/16px var(--font-sans); }
.b-limit::after { content: ""; flex: 1; border-top: 2px dashed var(--rule-control); }
.b-table tr.is-limit td { height: 24px; border-bottom: 0; padding-top: var(--space-1); }