/*
  ranks-render.css - RENDER-LAYER COLOURS FOR THE RANK SETUP SCREENS (slice curr, R-1025-02)
  ===========================================================================
  Theme tokens only (--theme-*), no hex: every skin that defines the core Render tokens gets readable rank screens; structure lives in
  ranks.css (the Primer). Greyscale first. The belt colour of a swatch is the school data (--rk-swatch, inline), not a skin value. The only
  semantic colours are the state tokens, and every state also says so in words.
*/

.bu-rank-swatch,
.bu-rank-custom__chooser,
.bu-rank-chip,
.bu-rank-skill {
  border-color: var(--theme-x-border-field, var(--theme-border-inactive, currentColor));
  color: var(--theme-text-main, inherit);
}

/* The swatch fill is the belt colour the school chose (data, set inline as --rk-swatch); its frame keeps a white belt on a light page and a
   black one on a dark page visible (WCAG 1.4.11). */
.bu-rank-swatch {
  background-color: var(--rk-swatch, transparent);
  border-color: var(--theme-text-muted, currentColor);
}

.bu-rank-swatch.is-on {
  outline-color: var(--theme-border-active, currentColor);
}

.bu-rank-swatch:hover:not(:disabled),
.bu-rank-chip__x:hover:not(:disabled) {
  border-color: var(--theme-border-active, currentColor);
}

.bu-rank-swatch:focus-visible,
.bu-rank-chip__x:focus-visible,
.bu-rank-choice input:focus-visible,
.bu-rank-custom__chooser:focus-visible {
  outline: 2px solid var(--theme-x-focus-ring, currentColor);
  outline-offset: 2px;
}

.bu-rank-swatch--none {
  background-color: var(--theme-bg-surface, transparent);
  color: var(--theme-text-muted, inherit);
}

.bu-rank-chip {
  background-color: var(--theme-bg-card, transparent);
}

.bu-rank-skill--done {
  background-color: var(--theme-bg-card, transparent);
}

.bu-rank-skill--done .bu-rank-skill__state,
.bu-rank-needs__item[data-met="true"] .bu-rank-needs__state {
  color: var(--theme-state-healthy, inherit);
}

.bu-rank-needs__item[data-met="false"] .bu-rank-needs__state {
  color: var(--theme-state-warning, inherit);
}

.bu-rank-colour__hint[role="alert"] {
  color: var(--theme-state-error, inherit);
}

/* ---- R-1026-01 Curriculum layout colours (theme tokens only) ---- */
.bu-subtabs {
  border-bottom-color: var(--theme-border-inactive, currentColor);
}

/* The tab colours (rest, hover, ACTIVE = filled + marker bar) come from each skin's own .bu-tab-btn recipe, which TabStrip's buttons carry (class bu-tab-btn),
   so the open tab reads the same as the console's tab rail in every skin. Nothing to set here but the row's baseline and the focus ring. */
.bu-subtabs .bu-subtab.bu-control:focus-visible,
.bu-belt-step:focus-visible,
.bu-linkbtn:focus-visible {
  outline: 2px solid var(--theme-x-focus-ring, currentColor);
  outline-offset: 2px;
}

.bu-belt-step {
  background-color: var(--theme-bg-card, transparent);
  border-color: var(--theme-x-border-field, var(--theme-border-inactive, currentColor));
  color: var(--theme-text-main, inherit);
}

.bu-belt-step:hover:not(:disabled) {
  border-color: var(--theme-border-active, currentColor);
}

.bu-linkbtn {
  color: var(--theme-text-main, inherit);
}

.bu-curr-add__custom,
.bu-rank-panel__remove {
  border-top-color: var(--theme-border-inactive, currentColor);
}

.bu-rank-row--compact {
  border-bottom: 1px solid var(--theme-border-inactive, transparent);
}