/*
  ranks.css - THE PRIMER RANK SETUP SCREENS (slice curr, R-1025-02)
  ===========================================================================
  Structure only: belt colour picker, the ladder row actions, the requirements panel, the "what it still needs" list in the Promote dialog
  and the Record test panel. ZERO colour here: colours live in ranks-render.css (theme tokens only), and the belt colour itself is the
  school's DATA, set inline through --rk-swatch on the swatch (like BeltChip --cc-belt). With no Render applied the screens still read in
  greyscale (borders fall back to currentColor).
  Laws kept: 44px minimum targets, 5px radius cap on interactive controls, state is always also WORDS (Selected: Blue, Done, Still needed),
  never colour alone.
*/

/* ---- belt colour picker ---- */
.bu-rank-colour {
  border: 0;
  margin: 0 0 var(--structure-gap-md);
  padding: 0;
  min-width: 0;
}

.bu-rank-colour__legend {
  padding: 0;
  margin-bottom: var(--structure-gap-xs);
  font-weight: var(--structure-weight-semibold);
}

.bu-rank-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-sm);
}

.bu-rank-swatch {
  position: relative;
  box-sizing: border-box;
  width: var(--structure-touch-min);
  height: var(--structure-touch-min);
  padding: 0;
  border-radius: var(--structure-radius-max);
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--structure-text-lg);
  line-height: 1;
}

.bu-rank-swatch.is-on {
  outline-width: 3px;
  outline-style: solid;
  outline-offset: 2px;
}

.bu-rank-swatch:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.bu-rank-colour__selected {
  margin: var(--structure-gap-xs) 0 var(--structure-gap-sm);
}

.bu-rank-custom__row {
  display: flex;
  align-items: center;
  gap: var(--structure-gap-sm);
  flex-wrap: wrap;
}

.bu-rank-custom__chooser {
  box-sizing: border-box;
  width: var(--structure-touch-min);
  height: var(--structure-touch-min);
  padding: 2px;
  border-radius: var(--structure-radius-max);
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
}

.bu-rank-custom__hex {
  width: 9rem;
  max-width: 100%;
  font-family: var(--structure-font-family-mono, monospace);
}

.bu-rank-colour__hint {
  margin: var(--structure-gap-xs) 0 0;
  font-size: var(--structure-text-sm);
}

/* ---- ladder row actions ---- */
.bu-rank-move {
  display: inline-flex;
  gap: var(--structure-gap-xs);
}

.bu-rank-move__btn {
  min-width: var(--structure-touch-min);
  min-height: var(--structure-touch-min);
  padding-inline: 0;
  justify-content: center;
}

.bu-rank-summary {
  font-size: var(--structure-text-sm);
  overflow-wrap: anywhere;
}

.bu-rank-remove {
  margin-top: var(--structure-gap-xs);
}

.bu-rank-retired {
  font-size: var(--structure-text-sm);
  overflow-wrap: anywhere;
}

/* ---- requirements panel ---- */
.bu-rank-req {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
  min-width: 0;
}

.bu-rank-req__title,
.bu-rank-req__sub {
  margin: 0;
}

.bu-rank-req__sub {
  margin-top: var(--structure-gap-sm);
  font-size: var(--structure-text-md);
}

.bu-rank-req__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--structure-gap-md);
}

.bu-rank-req__pair {
  display: flex;
  align-items: center;
  gap: var(--structure-gap-sm);
}

.bu-rank-req__pair .bu-input {
  min-width: 0;
}

.bu-rank-req__add {
  display: flex;
  align-items: flex-end;
  gap: var(--structure-gap-sm);
  flex-wrap: wrap;
}

.bu-rank-req__add .bu-field {
  flex: 1 1 14rem;
  min-width: 0;
}

.bu-rank-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-xs) var(--structure-gap-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bu-rank-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--structure-gap-xs);
  min-height: var(--structure-touch-min);
  padding-left: var(--structure-gap-sm);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  max-width: 100%;
}

.bu-rank-chip__text {
  overflow-wrap: anywhere;
}

.bu-rank-chip__x {
  box-sizing: border-box;
  min-width: var(--structure-touch-min);
  min-height: var(--structure-touch-min);
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--structure-text-xl);
  line-height: 1;
  cursor: pointer;
}

.bu-rank-chip__x:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* ---- Promote dialog: what a student still needs ---- */
.bu-rank-needs {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
  margin-bottom: var(--structure-gap-md);
}

.bu-rank-needs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-xs);
}

.bu-rank-needs__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-xs) var(--structure-gap-sm);
  align-items: baseline;
}

.bu-rank-needs__state {
  font-weight: var(--structure-weight-semibold);
  white-space: nowrap;
}

/* ---- Record test ---- */
.bu-rank-record {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
  min-width: 0;
}

.bu-rank-skill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--structure-gap-xs) var(--structure-gap-md);
  margin: 0;
  padding: var(--structure-gap-xs) var(--structure-gap-sm);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  min-width: 0;
}

.bu-rank-skill__name {
  flex: 1 1 10rem;
  min-width: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

.bu-rank-skill__state {
  font-weight: var(--structure-weight-semibold);
}

.bu-rank-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--structure-gap-xs);
  min-height: var(--structure-touch-min);
  padding-inline: var(--structure-gap-sm);
  cursor: pointer;
}

.bu-rank-choice input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

@media (max-width: 640px) {
  .bu-rank-req__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bu-rank-skill {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================================================================================================
   R-1026-01 CURRICULUM LAYOUT (owner 2026-10-26: "its kind of every where ... inner tabs ... the scroll rule"). Structure only, zero colour.
   [PILLAR-1: progressive disclosure + the scroll rule] tab rows, a belt chain, compact rows, a side sheet: the page shows the decision, the detail is a tap away.
   [PILLAR-2: WCAG 2.1 AA / 44px law] every tab, step and button is >= 44px tall; the tab rows scroll sideways on a phone rather than wrapping.
   ============================================================================================================================================ */

/* ---- tab rows (TabStrip) ---- */
.bu-subtabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--structure-gap-xs);
  margin: 0 0 var(--structure-gap-md);
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.bu-subtabs .bu-subtab.bu-control {
  flex: 0 0 auto;
  /* .bu-tab-btn is the console rail's full-width, left-aligned button: this row sizes to its words and centres them. */
  width: auto;
  min-width: var(--structure-touch-min);
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  min-height: var(--structure-touch-min);
  border-width: 1px 1px 3px;
  border-style: solid;
  border-radius: var(--structure-radius-max) var(--structure-radius-max) 0 0;
}

.bu-subtabs .bu-subtab.bu-control.is-active {
  font-weight: var(--structure-weight-bold, 700);
}

/* "+ Add a style" is told apart by a dashed frame, not by colour alone. */
.bu-subtabs .bu-subtab--accent.bu-control {
  border-style: dashed dashed solid;
}

/* ---- one Curriculum view ---- */
.bu-curr__panel,
.bu-curr__view {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
  min-width: 0;
}

.bu-curr__stylehead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--structure-gap-xs) var(--structure-gap-md);
  min-width: 0;
}

.bu-curr__stylehead h2 {
  margin: 0;
}

.bu-curr__stylehead .bu-style-provenance {
  flex: 1 1 14rem;
  min-width: 0;
}

.bu-curr__hint {
  margin: 0;
  font-size: var(--structure-text-sm);
}

/* One line, "Show more" opens the rest. line-clamp (not nowrap) so the text stays whole in the DOM for readers. */
.bu-clamp-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.bu-linkbtn {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: var(--structure-touch-min);
  padding: 0 var(--structure-gap-sm);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--structure-text-sm);
  text-decoration: underline;
  cursor: pointer;
}

.bu-curr-desc {
  display: flex;
  align-items: center;
  gap: var(--structure-gap-sm);
  min-width: 0;
}

.bu-curr-desc > .bu-ladder-requirements {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- REVIEW: the belt chain ---- */
.bu-belt-chain {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--structure-gap-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bu-step;
}

.bu-belt-chain__item {
  display: flex;
  min-width: 0;
  counter-increment: bu-step;
}

.bu-belt-step {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--structure-gap-xs);
  width: 100%;
  min-height: var(--structure-touch-min);
  padding: var(--structure-gap-sm) var(--structure-gap-md) var(--structure-gap-sm) calc(var(--structure-gap-md) + 1.75rem);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* The step number: the order of the chain in digits, not just position. */
.bu-belt-step::before {
  content: counter(bu-step);
  position: absolute;
  left: var(--structure-gap-md);
  top: var(--structure-gap-sm);
  font-size: var(--structure-text-sm);
  font-weight: var(--structure-weight-semibold);
}

.bu-belt-step:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.bu-belt-step__req {
  font-size: var(--structure-text-sm);
  overflow-wrap: anywhere;
}

/* ---- EDIT: the toolbar and the compact rows ---- */
.bu-rank-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--structure-gap-sm) var(--structure-gap-md);
}

.bu-rank-row--compact .bu-rank-row__main {
  min-width: 0;
}

/* ---- ADD: template beside its preview ---- */
.bu-curr-add {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--structure-gap-lg);
  align-items: start;
}

.bu-curr-add h3 {
  margin: 0 0 var(--structure-gap-sm);
}

.bu-curr-add__pick,
.bu-curr-add__preview {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
  min-width: 0;
}

.bu-curr-add__custom {
  margin-top: var(--structure-gap-md);
  padding-top: var(--structure-gap-md);
  border-top-width: 1px;
  border-top-style: solid;
}

.bu-curr-preview {
  max-height: min(60vh, 34rem);
  overflow-y: auto;
  padding-inline: var(--structure-gap-xs);
}

/* ---- the rank panel (side sheet) ---- */
.bu-rank-panel,
.bu-rank-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
  min-width: 0;
}

.bu-rank-panel__remove {
  margin-top: var(--structure-gap-md);
  padding-top: var(--structure-gap-md);
  border-top-width: 1px;
  border-top-style: solid;
}

@media (max-width: 900px) {
  .bu-curr-add {
    grid-template-columns: minmax(0, 1fr);
  }

  .bu-curr-preview {
    max-height: 50vh;
  }
}

@media (max-width: 640px) {
  .bu-belt-chain {
    grid-template-columns: minmax(0, 1fr);
  }
}