/* Experiment identification is applied only to the teaching navigation and cards. */
[data-experiment="control"]   { --exp-ink:#395f81; --exp-wash:#eaf1f8; --exp-line:#c7d8e8; --exp-edge:#8aa8c3; }
[data-experiment="pv"]        { --exp-ink:#775421; --exp-wash:#f8f0e1; --exp-line:#e9d9ba; --exp-edge:#c1a46e; }
[data-experiment="wind"]      { --exp-ink:#246579; --exp-wash:#e8f3f7; --exp-line:#c4dde6; --exp-edge:#88b3c2; }
[data-experiment="battery"]   { --exp-ink:#426749; --exp-wash:#edf4ec; --exp-line:#cbdccb; --exp-edge:#97b397; }
[data-experiment="ems"]       { --exp-ink:#52568d; --exp-wash:#eeeff8; --exp-line:#d5d7ec; --exp-edge:#9da3ce; }
[data-experiment="supercap"]  { --exp-ink:#206559; --exp-wash:#e8f4ef; --exp-line:#c5e0d6; --exp-edge:#85b6a7; }
[data-experiment="code"]      { --exp-ink:#6b5074; --exp-wash:#f3edf5; --exp-line:#ded1e3; --exp-edge:#b49bbe; }

.experiment-mark {
  display:inline-grid; place-items:center; flex:none;
  inline-size:var(--mark-size,34px); block-size:var(--mark-size,34px);
  border-radius:var(--mark-radius,8px); border:1px solid var(--exp-line);
  background:var(--exp-wash); color:var(--exp-ink);
}
.experiment-glyph {
  display:block; inline-size:var(--glyph-size,19px); block-size:var(--glyph-size,19px);
}
.experiment-mark--activity,
.lesson-heading[data-experiment] .experiment-mark {
  --mark-size:38px; --mark-radius:9px; --glyph-size:21px;
}
.experiment-no {
  color:var(--exp-ink); font-size:11px; font-weight:690; line-height:1.2;
  letter-spacing:.065em; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.section-shell-v4 .section-tabs.experiment-nav {
  align-items:stretch; gap:6px; padding-block:8px; min-height:65px;
  scrollbar-color:#b5c7d4 transparent;
}
.section-shell-v4 .section-tabs.experiment-nav>a.experiment-tab {
  flex:1 0 auto; min-height:48px; gap:8px; padding:6px 9px;
  border-radius:9px; color:#304b60; line-height:1.16; font-weight:660;
  font-size:clamp(12px,1.08vw,14px);
}
.experiment-tab-copy { display:grid; align-content:center; gap:3px; }
.section-shell-v4 .section-tabs.experiment-nav>a.experiment-tab:hover {
  background:#fff; border-color:var(--exp-line); color:var(--exp-ink);
}
.section-shell-v4 .section-tabs.experiment-nav>a.experiment-tab[aria-current] {
  background:var(--exp-wash); border-color:var(--exp-line); color:var(--exp-ink);
  box-shadow:inset 0 -2px 0 var(--exp-edge); font-weight:760;
}
.experiment-tab[aria-current] .experiment-mark { background:#fff; }
.section-shell-v4 .section-tabs.experiment-nav>a.experiment-tab:focus-visible {
  outline:2px solid var(--exp-ink); outline-offset:-2px;
}
.experiment-card[data-experiment] {
  background:#fff; border-top:2px solid var(--exp-edge);
  padding:13px 14px; gap:9px;
}
.experiment-card[data-experiment]:focus-within {
  border-color:var(--exp-edge);
}
.experiment-card-head { align-items:center; }
.experiment-card[data-experiment] .experiment-card-actions { border-color:#e4edf2; }
.experiment-card[data-experiment] ul li::marker { color:var(--exp-ink); }
.experiment-card-actions .text-link:focus-visible { outline-offset:3px; }
@media (max-width:760px) {
  .section-shell-v4 .section-tabs.experiment-nav { min-height:56px; gap:4px; padding-block:5px; }
  .section-shell-v4 .section-tabs.experiment-nav>a.experiment-tab { min-height:44px; padding:5px 7px; gap:6px; }
  .experiment-nav .experiment-mark { --mark-size:31px; --glyph-size:18px; }
}