/* AP Biology Blueprint interface theme, v1.
   Load after each lab's own styles. Colours here belong to the interface,
   not to molecules, graph series, biological states, or simulation geometry.
   Legacy lab styles remain intact. Scoped !important declarations reconcile
   their different selector weights without changing layouts or model code. */
:root[data-lab-brand="blueprint"] {
  --bp-navy: #082b46;
  --bp-navy-hover: #163f5a;
  --bp-green: #426f22;
  --bp-green-hover: #315919;
  --bp-cream: #f8f6ed;
  --bp-surface: #ffffff;
  --bp-soft: #eef3e8;
  --bp-line: #d7dfce;
  --bp-control-line: #87977b;
  --bp-muted: #53665c;
  --bp-focus: #276b9e;
  --bp-success: #315f21;
  --bp-success-bg: #edf5e8;
  --bp-warning: #83591f;
  --bp-warning-bg: #fff3df;
  --bp-radius: 8px;
  background: var(--bp-cream);
}
:root[data-lab-brand] body { background: var(--bp-cream); }
:root[data-lab-brand] h1,
:root[data-lab-brand] h1 em,
:root[data-lab-brand] .brand { color: var(--bp-navy); }
:root[data-lab-brand] :where(.intro,.hero,header,.masthead) > .eyebrow,
:root[data-lab-brand] .eyebrow { color: var(--bp-green); }
:root[data-lab-brand] :where(header,.masthead,.panel,.card,.controls,.stage-toolbar) {
  border-color: var(--bp-line);
}

/* Navigation has the same roles on every lab. */
:root[data-lab-brand] nav.collection-nav {
  background: var(--bp-surface) !important;
  border-color: var(--bp-line) !important;
}
:root[data-lab-brand] .collection-nav .lab-nav-home {
  color: var(--bp-navy) !important;
  background: var(--bp-surface) !important;
  border-color: var(--bp-control-line) !important;
  border-radius: var(--bp-radius);
}
:root[data-lab-brand] .collection-nav .lab-nav-home:hover,
:root[data-lab-brand] .collection-nav .lab-nav-course:hover {
  background: var(--bp-soft) !important;
}
:root[data-lab-brand] .collection-nav .lab-nav-next {
  background: var(--bp-navy) !important;
  border-color: var(--bp-navy) !important;
  color: white !important;
  border-radius: var(--bp-radius);
}
:root[data-lab-brand] .collection-nav .lab-nav-next:hover {
  background: var(--bp-navy-hover) !important;
  border-color: var(--bp-navy-hover) !important;
}
:root[data-lab-brand] .lab-nav-kicker { color: #dfe8d5; }
:root[data-lab-brand] :where(.lab-nav-progress,.lab-course-caption) { color: var(--bp-muted); }

/* Neutral actions and inactive tabs. Residue buttons are a molecular colour
   key, and the chloroplast image button is a model view: keep both intact.
   data-brand-preserve is the explicit opt-out for future scientific controls. */
:root[data-lab-brand] button:not(:where(#residues *,svg *,[data-brand-preserve],[data-brand-preserve] *,.chloroplast-button)) {
  color: var(--bp-navy) !important;
  background-color: var(--bp-surface) !important;
  border-color: var(--bp-control-line) !important;
  border-radius: var(--bp-radius);
  box-shadow: none !important;
}
:root[data-lab-brand] button:not(:where(#residues *,svg *,[data-brand-preserve],[data-brand-preserve] *,.chloroplast-button)):hover:not(:disabled) {
  background-color: var(--bp-soft) !important;
  border-color: var(--bp-green) !important;
  filter: none !important;
}

/* Main actions: Run, Play, Advance when a lab uses it as its main action,
   and explicit primary actions. Secondary/reset controls stay neutral. */
:root[data-lab-brand] button.primary:not(:where([data-brand-preserve],[data-brand-preserve] *)) {
  background-color: var(--bp-green) !important;
  border-color: var(--bp-green) !important;
  color: white !important;
}
:root[data-lab-brand] button.primary:not(:where([data-brand-preserve],[data-brand-preserve] *)):hover:not(:disabled) {
  background-color: var(--bp-green-hover) !important;
  border-color: var(--bp-green-hover) !important;
}

/* Selected = navy throughout. This represents a UI selection, not whether
   a protein or pathway is biologically active. Existing labels retain that meaning. */
:root[data-lab-brand] button:is([aria-selected="true"],[aria-pressed="true"],.active,.selected):not(:where(#residues *,svg *,[data-brand-preserve],[data-brand-preserve] *)) {
  background-color: var(--bp-navy) !important;
  border-color: var(--bp-navy) !important;
  color: white !important;
  box-shadow: inset 0 -3px var(--bp-green) !important;
}
:root[data-lab-brand] button:is([aria-selected="true"],[aria-pressed="true"],.active,.selected):not(:where(#residues *,svg *,[data-brand-preserve],[data-brand-preserve] *)):hover:not(:disabled) {
  background-color: var(--bp-navy-hover) !important;
  border-color: var(--bp-navy-hover) !important;
}
/* Some older tabs set their text/icon colours on children. */
:root[data-lab-brand] button:is([aria-selected="true"],[aria-pressed="true"],.active,.selected):not(:where(#residues *,svg *,[data-brand-preserve],[data-brand-preserve] *)) :is(small,b,strong,span,div) {
  color: inherit !important;
}
:root[data-lab-brand] button:is([aria-selected="true"],.active) :is(.tab-number,.tab-icon),
:root[data-lab-brand] .experiment-tabs button[aria-selected="true"] > span {
  background-color: #24465a !important;
  color: white !important;
}
:root[data-lab-brand] button:not([aria-selected="true"]):not(.active) :is(.tab-number,.tab-icon),
:root[data-lab-brand] .experiment-tabs button:not([aria-selected="true"]) > span {
  background-color: var(--bp-soft) !important;
  color: var(--bp-green) !important;
}
:root[data-lab-brand] :where(.activity-tabs,.experiment-tabs,.tabs) button:not([aria-selected="true"]):not(.active) small {
  color: var(--bp-muted);
}

/* Consistent neutral form controls. Do not change slider accent colours:
   some sliders carry a scientific meaning (e.g. phosphatase activity). */
:root[data-lab-brand] :is(select,input[type="number"],input[type="text"],textarea) {
  color: var(--bp-navy);
  background-color: var(--bp-surface);
  border-color: var(--bp-control-line);
  border-radius: var(--bp-radius);
}
:root[data-lab-brand] :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--bp-focus) !important;
  outline-offset: 3px !important;
}
:root[data-lab-brand] button:disabled:not(:where(#residues *,svg *,[data-brand-preserve],[data-brand-preserve] *)) {
  background-color: #e8ece2 !important;
  border-color: #ccd5c4 !important;
  color: #65715e !important;
  box-shadow: none !important;
  opacity: .7;
  cursor: not-allowed;
}

/* Answer meaning outranks selection. Keep success and retry distinguishable
   through both their existing wording and these feedback colours. */
:root[data-lab-brand] button.correct:not(:where([data-brand-preserve],[data-brand-preserve] *)),
:root[data-lab-brand] button.correct:hover:not(:disabled):not(:where([data-brand-preserve],[data-brand-preserve] *)) {
  background-color: var(--bp-success-bg) !important;
  border-color: var(--bp-success) !important;
  color: var(--bp-success) !important;
  box-shadow: none !important;
}
:root[data-lab-brand] button.wrong:not(:where([data-brand-preserve],[data-brand-preserve] *)),
:root[data-lab-brand] button.wrong:hover:not(:disabled):not(:where([data-brand-preserve],[data-brand-preserve] *)) {
  background-color: var(--bp-warning-bg) !important;
  border-color: var(--bp-warning) !important;
  color: var(--bp-warning) !important;
  box-shadow: none !important;
}
:root[data-lab-brand] .site-legal {
  border-color: var(--bp-line);
  color: var(--bp-muted);
}