/* Benerra Academy: Builders (programs, tests, program builder, test builder, preview).
   Working tokens only (no colour values here). Logical properties. Frames, no shadows, no gradients.
   Class prefix: bld-. */

/* =================================================================== lists (Programs, Tests) */
.bld-list { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.bld-list__table, .bld-list__pager { min-width: 0; }
.bld-list__pager { display: flex; justify-content: center; }
.bld-list__pager:empty { display: none; }

.bld-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bld-filters__search { position: relative; display: block; flex: 1 1 260px; min-width: 0; max-inline-size: 420px; }
.bld-filters__search .input { padding-inline-start: 44px; }
.bld-filters__icon { position: absolute; inset-block-start: 50%; inset-inline-start: var(--space-4); margin-block-start: -9px; color: var(--text-muted); pointer-events: none; }
.bld-filters__select { display: block; flex: 0 1 220px; min-width: 150px; }

/* two-line cells: the second line exists in every row (symmetry rule) */
.bld-two { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; max-inline-size: 100%; }
.bld-two__main { font-weight: var(--fw-medium); color: var(--text); line-height: 1.3; }
.bld-two__sub { font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: 1.3; }
.bld-chips { max-inline-size: 100%; }
.bld-chips .bld-chip { flex: 0 1 auto; min-width: 0; max-inline-size: 126px; }
.bld-mark { display: inline-block; flex: none; }
.bld-langs { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .06em; color: var(--text-2); }

/* =================================================================== builders: shell */
.bld-builder { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.bld-toolbar {
  position: sticky; inset-block-start: var(--topbar-h); z-index: var(--z-sticky);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-3); background: var(--bg); box-shadow: inset 0 -1px 0 var(--line-soft);
}
.bld-toolbar__left, .bld-toolbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
.bld-savestate { font-size: var(--fs-sm); color: var(--text-muted); }
.bld-notices { display: flex; flex-direction: column; gap: var(--space-3); }
.bld-notices:empty { display: none; }
.bld-notices .callout { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); row-gap: var(--space-1); padding-block: var(--space-3); }
.bld-notices .callout__head, .bld-notices .callout__body { margin: 0; }
.bld-conflict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* language variant bar */
.bld-variants { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.bld-variants .eyebrow { flex: none; }
.bld-variants__status { flex: 1 1 100%; min-width: 0; }
.bld-variants__add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bld-var__label { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.bld-var__mark { font-size: var(--fs-xs); font-weight: var(--fw-regular); opacity: .78; }
.bld-variant-host:empty { display: none; }

/* two columns: settings on one side, structure on the other (A.8, C3.5.2) */
.bld-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (min-width: 1080px) {
  .bld-grid--program { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
  .bld-grid--test { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
}
.bld-side, .bld-main, .bld-col { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.bld-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.bld-card__title { margin: 0; }
.bld-card__hint { margin: 0; font-size: var(--fs-sm); }
.bld-fields { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.bld-form { display: flex; flex-direction: column; gap: var(--space-4); }

/* =================================================================== program builder */
.bld-aud, .bld-prereq { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.bld-aud__roles { display: flex; flex-direction: column; gap: var(--space-2); }
.bld-aud__people-title { margin-block-start: var(--space-2); }
.bld-people { display: flex; flex-direction: column; }
.bld-person { display: flex; align-items: center; gap: var(--space-3); block-size: 56px; min-width: 0; box-shadow: inset 0 -1px 0 var(--line-soft); }
/* the chip takes the row, the remove button (or its empty slot) keeps its size at the row end: one column (C4.7.2) */
.bld-person > .person { flex: 1 1 auto; min-width: 0; }
.bld-person > .btn, .bld-person > .btn-slot { flex: none; }
.bld-person:last-child { box-shadow: none; }
.bld-person__who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.bld-person__name { font-weight: var(--fw-medium); }
.bld-prereq__list { display: flex; flex-direction: column; }
.bld-prereq__item { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--row-list); padding-block: var(--space-2); min-width: 0; box-shadow: inset 0 -1px 0 var(--line-soft); }
.bld-prereq__item:last-child { box-shadow: none; }
.bld-prereq__main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.bld-prereq__name { font-weight: var(--fw-medium); }

.bld-structure { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.bld-structure__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.bld-structure__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bld-stages, .bld-blocks, .bld-lessons, .bld-qlist, .bld-opts { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; min-width: 0; }
.bld-stages { gap: var(--space-4); }
.bld-stage { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame); min-width: 0; }
.bld-stage__head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bld-stage__num {
  display: grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border-radius: var(--radius-control);
  background: var(--brand-soft); color: var(--brand-text); font-size: var(--fs-h4); font-weight: var(--fw-semibold);
}
/* the stage title is the main field: the whole width of the head; kind and duration share the line under it */
.bld-stage__head { align-items: flex-start; }
.bld-stage__head > .bld-drag, .bld-stage__head > .bld-stage__num, .bld-stage__head > .bld-ctl { margin-block-start: 5px; }
.bld-stage__fields { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.bld-stage__fields > * { min-width: 0; }
.bld-stage__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.bld-stage__meta > .select-wrap { flex: 0 1 160px; min-width: 128px; }
.bld-stage__meta > .badge { flex: none; }
.bld-stage__meta > .input { flex: 1 1 140px; min-width: 0; }
.bld-stage__foot, .bld-block__foot { display: flex; }
.bld-blocks { gap: var(--space-3); margin-inline-start: var(--space-6); }
.bld-block { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-card); background: var(--surface-2); min-width: 0; }
.bld-block__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bld-block__title { flex: 1 1 auto; min-width: 0; }
.bld-lessons { gap: var(--space-1); }
.bld-lesson {
  display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--row-list); padding-inline: var(--space-2);
  border-radius: var(--radius-control); background: var(--surface); min-width: 0;
}
.bld-lesson__icon { color: var(--text-muted); }
.bld-lesson__title { flex: 1 1 auto; min-width: 0; color: var(--text); font-weight: var(--fw-medium); text-decoration: none; }
.bld-lesson__title:hover { text-decoration: underline; }
.bld-lesson__meta { flex: 0 1 140px; min-width: 0; }
.bld-lesson .badge { flex: none; }
.bld-empty-line { margin: 0; padding-inline: var(--space-2); }
.bld-ctl { display: flex; align-items: center; gap: 2px; flex: none; }
.bld-more { flex: none; }
.bld-cover { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
/* no box of its own: the save bar's containing block is the whole builder, so its position: sticky (admin.css) keeps it
   at the bottom of the window while any part of the builder is in view */
.bld-savebar-host { display: contents; }

.bld-drag {
  display: inline-grid; place-items: center; flex: none; inline-size: 28px; min-block-size: 36px; border-radius: var(--radius-sm);
  color: var(--text-faint); cursor: grab;
}
.bld-drag:hover { color: var(--text); background: var(--surface-hover); }
.bld-drag:active { cursor: grabbing; }
.is-dragging { opacity: .45; }
.is-drop-before { box-shadow: inset 0 3px 0 0 var(--brand), var(--frame); }
.is-drop-after { box-shadow: inset 0 -3px 0 0 var(--brand), var(--frame); }

/* pickers (lessons, people, media list) */
.bld-pick { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.bld-pick__list { display: flex; flex-direction: column; max-block-size: 360px; min-block-size: 120px; border-radius: var(--radius-control); box-shadow: var(--frame); }
.bld-pick__list--tall { max-block-size: 420px; }
.bld-pick__row { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--space-3); block-size: 56px; padding: var(--space-2) var(--space-4); box-shadow: inset 0 -1px 0 var(--line-soft); }
.bld-pick__row .check { flex: 1 1 auto; min-width: 0; align-items: center; }
/* one line each with "…"; the full text is in the title (oneLine in programs.js) */
.bld-pick__row .check__text { min-width: 0; }
.bld-pick__row .check__label, .bld-pick__row .check__hint { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bld-pick__row .badge, .bld-pick__row .lock-label { flex: none; }
.bld-pick__pager { display: flex; justify-content: center; }
.bld-pick__pager:empty { display: none; }
.bld-issues { margin: 0; padding-inline-start: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }

/* =================================================================== test builder */
.bld-lessonref { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.bld-lessonref__link { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-medium); }
.bld-limit, .bld-shuffle { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.bld-qlist { gap: var(--space-3); }
.bld-q { display: flex; flex-direction: column; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame); min-width: 0; }
.bld-q.has-issues { box-shadow: var(--frame-strong); }
.bld-q__head { display: flex; align-items: center; gap: var(--space-2); min-block-size: 84px; padding-inline: var(--space-3); min-width: 0; }
.bld-q__toggle {
  display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; min-block-size: 76px; padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-control); background: transparent; color: inherit; text-align: start;
}
.bld-q__toggle:hover { background: var(--surface-hover); }
.bld-q__title { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.bld-q__summary { display: block; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text); }
.bld-q__meta { display: flex; align-items: center; gap: var(--space-3); flex: none; color: var(--text-muted); }
.bld-q__flag { display: inline-flex; color: var(--warn-text); }
.bld-q__body { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-4) var(--space-5) var(--space-5); box-shadow: inset 0 1px 0 var(--line-soft); }
.bld-q__image { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bld-q__thumb { inline-size: 96px; block-size: 64px; border-radius: var(--radius-control); object-fit: cover; box-shadow: var(--frame); background: var(--surface-2); }
.bld-q__thumb--none { display: grid; place-items: center; color: var(--text-muted); }
.bld-q__kind, .bld-q__options { display: flex; flex-direction: column; gap: var(--space-2); }
.bld-q__kind .seg { align-self: flex-start; }
.bld-opts { gap: var(--space-2); }
.bld-opt { display: flex; align-items: center; gap: var(--space-2); min-block-size: 52px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); background: var(--surface-2); min-width: 0; }
.bld-opt__correct { flex: none; inline-size: 104px; }
.bld-opt__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bld-opt--tr { align-items: flex-start; padding-block: var(--space-2); }
.bld-opt__mark { display: grid; place-items: center; flex: none; inline-size: 36px; block-size: 46px; color: var(--text-faint); }
.bld-opt__mark.is-correct { color: var(--brand-text); }
.bld-orig { display: block; padding-inline: var(--space-1); }
.bld-q__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bld-q__issues { display: flex; flex-direction: column; gap: var(--space-2); }
.bld-q__issues:empty { display: none; }
.bld-trblock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame); }

/* list input */
.bld-list-input { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.bld-list-example {
  margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--surface-2); color: var(--text-2);
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.bld-list-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 760px) { .bld-list-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bld-list-cols .textarea { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.5; min-block-size: 280px; }
.bld-list-sum { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-2) 0 0; font-size: var(--fs-sm); }
.bld-list-sum__ok { color: var(--text-2); font-weight: var(--fw-medium); }
.bld-list-sum__bad { display: inline-flex; align-items: center; gap: 6px; color: var(--danger-text); font-weight: var(--fw-medium); }
.bld-lines { margin: 0; padding: var(--space-2); max-block-size: 320px; min-block-size: 120px; border-radius: var(--radius-control); background: var(--surface-2); font-family: var(--font-mono); font-size: var(--fs-sm); }
.bld-lines__row { display: flex; align-items: flex-start; gap: var(--space-2); padding: 2px var(--space-2); border-radius: var(--radius-sm); min-width: 0; }
.bld-lines__row.has-error { background: var(--danger-soft); color: var(--danger-text); }
.bld-lines__no { flex: none; inline-size: 34px; text-align: end; color: var(--text-muted); }
.bld-lines__row.has-error .bld-lines__no { color: var(--danger-text); }
.bld-lines__text { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bld-lines__err { display: inline-flex; align-items: flex-start; gap: 4px; flex: 0 1 46%; min-width: 0; font-family: var(--font-sans); font-weight: var(--fw-medium); }
.bld-lines__empty { padding: var(--space-3); list-style: none; font-family: var(--font-sans); }

/* =================================================================== create test */
.bld-new { display: flex; flex-direction: column; gap: var(--space-5); inline-size: 100%; max-inline-size: var(--narrow-wide); }
.bld-new__chosen:empty { display: none; }

/* =================================================================== preview (runs like a learner) */
.bld-preview { display: flex; flex-direction: column; gap: var(--space-5); inline-size: 100%; max-inline-size: var(--narrow-wide); margin-inline: auto; }
.bld-run { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.bld-run__card { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8); }
.bld-run__intro { margin: 0; max-inline-size: 64ch; color: var(--text-2); font-size: var(--fs-read); line-height: var(--lh-read); }
.bld-run__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); margin: 0; }
.bld-run__fact { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-control); background: var(--surface-2); }
.bld-run__fact dd { margin: 0; }
.bld-run__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.bld-run__timer { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-sm); box-shadow: var(--frame-strong); font-weight: var(--fw-semibold); }
.bld-run__timer.is-low { color: var(--danger-text); box-shadow: var(--frame-danger); }
.bld-run__text { margin: 0; font-family: var(--font-serif); font-weight: var(--fw-display); font-size: var(--fs-h2); line-height: 1.25; letter-spacing: var(--ls-display); max-inline-size: 40ch; }
.bld-run__img { max-inline-size: 100%; max-block-size: 320px; border-radius: var(--radius-control); object-fit: contain; align-self: flex-start; }
.bld-run__opts { display: flex; flex-direction: column; gap: var(--space-2); }
.bld-run__opt { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); box-shadow: var(--frame-strong); background: var(--surface); }
.bld-run__nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bld-run__dot {
  inline-size: 36px; block-size: 36px; padding: 0; border: 0; border-radius: var(--radius-control); background: var(--surface);
  box-shadow: var(--frame-strong); color: var(--text); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.bld-run__dot.is-done { background: var(--brand-soft); box-shadow: var(--frame); }
.bld-run__dot.is-current { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.bld-run__actions { justify-content: space-between; }
.bld-run__score { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.bld-run__score > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.bld-run__sum { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.bld-run__rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.bld-run__row { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--row-list); box-shadow: inset 0 -1px 0 var(--line-soft); min-width: 0; }
.bld-run__row:last-child { box-shadow: none; }
.bld-run__rno { flex: none; inline-size: 28px; color: var(--text-muted); }
.bld-run__rtext { flex: 1 1 auto; min-width: 0; }
.bld-run__row .badge { flex: none; }

@media (max-width: 719px) {
  .bld-run__card { padding: var(--space-5); }
  .bld-q__head { min-block-size: 76px; }
  .bld-opt { flex-wrap: wrap; }
  .bld-opt__correct { inline-size: auto; }
  .bld-opt__text { flex: 1 1 100%; order: 3; }
  .bld-blocks { margin-inline-start: 0; }
}