/* /science, three views of one hub: the hero, the tab row and the progress strip around the lab's own components. Tokens only.
   The lab modules below the tab row are the lab sheets' (css/science-lab.css, science-lab-v106.css, sandbox.css, science-hub.css): always the
   dark particle-lab look, whatever the site theme. Science pages carry the neural cyan accent (--ds-neural: #22D3EE in Temple Dark, #0E7490 in
   Temple Dawn). Every evidence caveat ("A note on method", the labelled analogies) stays beside the hero and inside each module. */
.sci { min-inline-size: 0; overflow-x: clip; }
.sci-hero .story-eyebrow { color: var(--ds-neural); }
.sci-hero { border-block-end-color: var(--ds-neural); }
.sci-stats { list-style: none; margin: 0 0 var(--ds-space-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-6); color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
.sci-stats strong { font-family: var(--ds-font-display); font-size: var(--ds-text-xl); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; color: var(--ds-neural); }
.sci-note { margin: 0; padding: var(--ds-space-4) var(--ds-space-5); background: var(--ds-neural-soft); border: 1px solid var(--ds-neural); border-radius: var(--ds-radius-md); }
.sci-note p { margin: 0; color: var(--ds-text); font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal); }
.sci-tools { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }
.sci-switch[aria-pressed="true"] { border-color: var(--ds-neural); box-shadow: inset 0 0 0 1px var(--ds-neural); }
.sci-switch::before { content: ""; inline-size: .75em; block-size: .75em; border-radius: 50%; border: 1.5px solid currentColor; }
.sci-switch[aria-pressed="true"]::before { background: var(--ds-neural); border-color: var(--ds-neural); }

/* the one tab row: the three views of the lab (separate addresses) */
.sci-views { background: var(--ds-surface); border-block-end: 1px solid var(--ds-border); }
.sci-views__inner { max-inline-size: 72rem; margin-inline: auto; padding-inline: var(--ds-space-4); box-sizing: border-box; }
.sci-views__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--ds-space-1); }
.sci-views__list > li { flex: 1 1 0; min-inline-size: 0; }
.sci-view { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ds-space-2); align-items: center; justify-content: center; min-block-size: 56px; padding: var(--ds-space-2) var(--ds-space-3);
  color: var(--ds-text-muted); text-decoration: none; border-block-end: 3px solid transparent; box-sizing: border-box; }
.sci-view__icon { grid-row: span 2; font-size: var(--ds-text-lg); }
.sci-view__label { font-weight: 600; font-size: var(--ds-text-md); line-height: var(--ds-leading-tight); }
.sci-view__short { display: none; }
.sci-view__sub { font-size: var(--ds-text-xs); color: var(--ds-text-muted); }
.sci-view:hover { color: var(--ds-text); }
.sci-view.is-on { color: var(--ds-text); border-block-end-color: var(--ds-neural); }
.sci-view:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; }
@media (max-width: 47.99rem) {
  .sci-view__full { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .sci-view__short { display: inline; }
  .sci-view__sub { display: none; }
  .sci-view { grid-template-columns: auto auto; justify-content: center; padding-inline: var(--ds-space-2); }
  .sci-view__icon { grid-row: auto; }
}
@media (min-width: 48rem) { .sci-views__inner { padding-inline: var(--ds-space-8); } }

/* the sandbox's progress strip (its original card, now the first block of the lab) */
.sbx-progress { padding-block: var(--ds-space-6) 0; }
@media print { .sci-hero, .sci-views { display: none !important; } }