/* ==========================================================================
   HBF Scientific Lab — interface system 7.5.1
   Purple instrument theme · DIN-style technical typography · motion layer
   Every class name used by the seven laboratories is preserved.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- surfaces (HBF purple, matching the laboratory workspaces) --------- */
  --bg: #070512;
  --bg-2: #0b0819;
  --panel: #130d26;
  --panel-2: #181040;
  --panel-3: #21163b;
  --sunken: #0a0718;

  /* --- ink -------------------------------------------------------------- */
  --ink: #ede9f9;
  --ink-2: #cfc7ea;
  --muted: #b7afd6;
  --faint: #928ab0;

  /* --- lines ------------------------------------------------------------ */
  --line: #2a1f52;
  --line-2: #3b2d5e;
  --line-3: #4d3b76;

  /* --- accents ---------------------------------------------------------- */
  --cyan: #a68aff;          /* primary accent — name kept for compatibility */
  --cyan-2: #d5c6ff;
  --violet: #bda6ff;
  --primary: #7c5cff;
  --primary-2: #9578ff;
  /* Filled controls with white text (WCAG AA ≥ 4.5:1 on every stop). */
  --primary-fill: #7657f2;        /* 4.76:1 with #fff */
  --primary-fill-2: #6148c7;      /* 6.44:1 */
  --primary-fill-hover: #6d51e0;  /* 5.38:1 */
  --primary-fill-hover-2: #5a43b8; /* 7.17:1 */
  --accent-dim: rgba(166, 138, 255, .13);
  --blue: #67e6ff;
  --amber: #ffcf70;
  --red: #ff8f9e;
  --green: #7ee9ab;
  --pink: #ff8fd0;

  /* --- elevation -------------------------------------------------------- */
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .42);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 32px 68px rgba(0, 0, 0, .55);
  --glow: 0 0 0 1px rgba(166, 138, 255, .35), 0 18px 50px rgba(124, 92, 255, .22);

  /* --- geometry --------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --shell: 1280px;

  /* --- type ------------------------------------------------------------- */
  /* Technical DIN-style display face. Bahnschrift ships with Windows 10/11,
     DIN Alternate and DIN Condensed with macOS and iOS; the remaining entries
     cover Android, Linux and older systems with a condensed grotesque. */
  --display: "D-DIN", "DIN Alternate", "DIN Next LT Pro", Bahnschrift,
             "Roboto Condensed", "Archivo Narrow", "Helvetica Neue Condensed",
             "Liberation Sans Narrow", "Arial Narrow", "DejaVu Sans Condensed",
             Inter, system-ui, sans-serif;
  --sans: Inter, "Helvetica Neue", ui-sans-serif, system-ui, -apple-system,
          BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --track-display: .015em;
  --track-caps: .085em;
  --track-wide: .26em;

  font-family: var(--sans);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Slow drifting field behind every page. Painted on a fixed pseudo-element so
   it never affects layout and never repaints on scroll. */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 12% 6%,  rgba(124, 92, 255, .20), transparent 62%),
    radial-gradient(34rem 28rem at 88% 0%,  rgba(103, 230, 255, .10), transparent 60%),
    radial-gradient(40rem 34rem at 70% 92%, rgba(166, 138, 255, .13), transparent 64%);
  animation: hbf-drift 34s ease-in-out infinite alternate;
  will-change: transform;
}

/* Fine technical grid, very low contrast. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(166, 138, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 138, 255, .045) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 35%, transparent 78%);
}

@keyframes hbf-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.2%, 1.6%, 0) scale(1.06); }
  100% { transform: translate3d(1.8%, -1.4%, 0) scale(1.03); }
}

a {
  color: var(--cyan-2);
  text-decoration-color: rgba(213, 198, 255, .4);
  text-underline-offset: 3px;
  transition: color .18s ease;
}
a:hover { color: #fff; text-decoration-color: currentColor; }

button, input, select, textarea { font: inherit; }
img, svg, canvas { max-width: 100%; }

::selection { background: rgba(124, 92, 255, .38); color: #fff; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
button, a, input, select, textarea, summary { outline-offset: 3px; }

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 2px solid transparent; background-clip: content-box; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); background-clip: content-box; }

/* --------------------------------------------------------------------------
   Typography — technical display treatment
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  text-wrap: balance;
}

h1 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2.15rem, 1.1rem + 4.1vw, 4.9rem);
  font-weight: 600;
  line-height: .98;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
}

h2 {
  font-size: clamp(1.55rem, 1.15rem + 1.35vw, 2.35rem);
  text-transform: uppercase;
  letter-spacing: .04em;
}

h3 {
  font-size: 1rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .07em;
}

p { text-wrap: pretty; }

.eyebrow {
  margin: 0 0 1rem;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font: 600 .715rem/1.6 var(--mono);
}

.lede {
  max-width: 66ch;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1rem + .38vw, 1.26rem);
  line-height: 1.66;
  letter-spacing: -.003em;
}

code, .mono { font-family: var(--mono); font-size: .92em; }
code {
  padding: .12em .4em;
  border-radius: 4px;
  background: rgba(166, 138, 255, .13);
  color: var(--cyan-2);
}

/* --------------------------------------------------------------------------
   Layout containers
   -------------------------------------------------------------------------- */

.hero, .labhead, main, footer {
  width: min(var(--shell), calc(100% - 2.5rem));
  margin-inline: auto;
}

.divider { height: 1px; margin: 2.6rem 0; background: linear-gradient(90deg, var(--line-2), transparent); border: 0; }
.two   { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }

.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.8rem; }
.prose h3 { margin-top: 1.9rem; color: var(--cyan-2); }
.prose p, .prose li { color: var(--ink-2); }
.prose li { margin: .42rem 0; }

/* --------------------------------------------------------------------------
   Site bar
   -------------------------------------------------------------------------- */

.sitebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 64px;
  padding: .55rem max(1.25rem, calc((100vw - var(--shell)) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(7, 5, 18, .78);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  transition: min-height .28s ease, background-color .28s ease, box-shadow .28s ease;
}
.sitebar[data-scrolled="true"] {
  min-height: 54px;
  background: rgba(7, 5, 18, .93);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .42);
}

.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}
.brand img { width: 30px; height: 30px; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.brand:hover { color: var(--cyan-2); }
.brand:hover img { transform: rotate(180deg); }

.sitebar nav { display: flex; flex-wrap: wrap; gap: .1rem; margin-left: auto; }
.sitebar nav a {
  position: relative;
  padding: .45rem .72rem;
  border-radius: var(--r-sm);
  color: var(--muted);
  text-decoration: none;
  font-family: var(--display);
  font-size: .84rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}
.sitebar nav a::after {
  content: "";
  position: absolute;
  left: .72rem; right: .72rem; bottom: .16rem;
  height: 1.5px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.sitebar nav a:hover { color: var(--ink); }
.sitebar nav a:hover::after { transform: scaleX(1); }
.sitebar nav a[aria-current="page"] {
  color: var(--cyan-2);
  background: var(--accent-dim);
}
.sitebar nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Scroll progress rail under the site bar. */
.scrollrail {
  position: fixed;
  top: 0; left: 0;
  z-index: 30;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--primary), var(--cyan), var(--blue));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; padding: clamp(3.6rem, 9vw, 7rem) 0 3.2rem; }
.labhead { padding: 2.5rem 0 1.4rem; }
.labhead h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); max-width: 24ch; }

.truthline { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.6rem; }

/* Staggered entrance for the hero and page headers. Fill mode "both" means the
   finished state is the visible one, so a blocked animation never hides copy. */
@keyframes hbf-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero > .eyebrow    { animation: hbf-enter .7s .05s cubic-bezier(.2,.8,.2,1) both; }
.hero > h1          { animation: hbf-enter .9s .14s cubic-bezier(.2,.8,.2,1) both; }
.hero > .lede       { animation: hbf-enter .9s .26s cubic-bezier(.2,.8,.2,1) both; }
.hero > .statband,
.hero > .buttonrow  { animation: hbf-enter .9s .38s cubic-bezier(.2,.8,.2,1) both; }
.labhead > .eyebrow { animation: hbf-enter .6s .04s ease-out both; }
.labhead > h1       { animation: hbf-enter .7s .12s ease-out both; }
.labhead > .lede    { animation: hbf-enter .7s .2s  ease-out both; }
.labhead > .truthline { animation: hbf-enter .7s .3s ease-out both; }

/* Rotating toroidal field figure behind the hero copy. */
.herofield {
  position: absolute;
  top: 40%; right: -9%;
  z-index: 0;
  width: min(40rem, 52vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: .95;
  pointer-events: none;
  /* Fade the edge nearest the copy so the rings never compete with text. */
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%),
              linear-gradient(90deg, transparent 0%, #000 34%);
  mask-composite: intersect;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%),
                      linear-gradient(90deg, transparent 0%, #000 34%);
  -webkit-mask-composite: source-in;
  animation: hbf-enter 1.4s .25s cubic-bezier(.2,.8,.2,1) both;
}
/* Hero copy sits above the field. */
.hero > :not(.herofield) { position: relative; z-index: 1; }
.herofield svg { width: 100%; height: 100%; overflow: visible; }
.herofield .ring { fill: none; stroke: var(--cyan); stroke-width: 1.15; opacity: .5; transform-origin: 50% 50%; }
.herofield .ring-a { animation: hbf-spin 46s linear infinite; }
.herofield .ring-b { animation: hbf-spin 62s linear infinite reverse; stroke: var(--blue); opacity: .38; }
.herofield .ring-c { animation: hbf-spin 88s linear infinite; stroke: var(--primary); opacity: .55; }
.herofield .orbit {
  fill: none;
  stroke: var(--cyan-2);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 7 190;
  opacity: 1;
  filter: drop-shadow(0 0 5px currentColor);
  transform-origin: 50% 50%;
  animation: hbf-trace 7s linear infinite;
}
.herofield .orbit-2 { animation-duration: 11s; animation-delay: -3s; stroke: var(--blue); }
.herofield .orbit-3 { animation-duration: 9s;  animation-delay: -6s; stroke: var(--pink); }
.herofield .core { fill: var(--primary); opacity: .3; animation: hbf-breathe 6s ease-in-out infinite; transform-origin: 50% 50%; }

@keyframes hbf-spin   { to { transform: rotate(360deg); } }
@keyframes hbf-trace  { to { stroke-dashoffset: -195; } }
@keyframes hbf-breathe{ 0%,100% { opacity: .12; transform: scale(1); } 50% { opacity: .26; transform: scale(1.08); } }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .28rem .68rem;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  background: rgba(255, 255, 255, .025);
  color: var(--muted);
  font: 600 .7rem/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 currentColor;
  animation: hbf-ping 3.4s ease-out infinite;
}
@keyframes hbf-ping {
  0%       { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  55%,100% { box-shadow: 0 0 0 5px transparent; opacity: .85; }
}
.badge.measured { color: var(--green);  border-color: rgba(126, 233, 171, .34); background: rgba(126, 233, 171, .07); }
.badge.modelled { color: var(--blue);   border-color: rgba(103, 230, 255, .32); background: rgba(103, 230, 255, .07); }
.badge.assumed  { color: var(--amber);  border-color: rgba(255, 207, 112, .32); background: rgba(255, 207, 112, .07); }
.badge.limit    { color: var(--violet); border-color: rgba(189, 166, 255, .34); background: rgba(189, 166, 255, .08); }
.badge.invalid  { color: var(--red);    border-color: rgba(255, 143, 158, .32); background: rgba(255, 143, 158, .07); }

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.notice {
  margin: 1.1rem 0;
  padding: .95rem 1.15rem;
  border: 1px solid rgba(255, 207, 112, .2);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: rgba(255, 207, 112, .055);
  color: #f4dfb6;
  font-size: .95rem;
}
.notice strong { color: #ffe6b8; }
.notice.danger { border-color: rgba(255, 143, 158, .2); border-left-color: var(--red);   background: rgba(255, 143, 158, .055); color: #ffd4d9; }
.notice.danger strong { color: #ffe0e4; }
.notice.good   { border-color: rgba(126, 233, 171, .2); border-left-color: var(--green); background: rgba(126, 233, 171, .055); color: #c8f5db; }
.notice.good strong { color: #d8fae6; }
.notice a { color: inherit; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 322px), 1fr));
  gap: 1.05rem;
  margin: 1.8rem 0 3rem;
}

.card, .panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, rgba(31, 21, 60, .74), rgba(14, 10, 30, .92));
  box-shadow: var(--shadow);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 1.4rem 1.4rem 1.25rem;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: border-color .26s ease, transform .26s cubic-bezier(.2, .8, .2, 1), box-shadow .26s ease;
}
/* Ambient glow that lifts in on hover. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(46rem 20rem at 50% -18%, rgba(124, 92, 255, .30), transparent 68%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
/* Light sweep across the top edge. */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 55%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  pointer-events: none;
}
.card:hover, .card:focus-visible {
  border-color: rgba(166, 138, 255, .55);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), var(--glow);
}
.card:hover::after, .card:focus-visible::after { opacity: 1; }
.card:hover::before, .card:focus-visible::before { opacity: 1; animation: hbf-sweep 1.1s cubic-bezier(.3, .7, .3, 1); }
@keyframes hbf-sweep { from { left: -60%; } to { left: 105%; } }

.card > .badge { align-self: flex-start; max-width: calc(100% - 3.4rem); }

.card h2 {
  margin: 1rem 0 .5rem;
  font-size: 1.42rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .035em;
  line-height: 1.08;
}
.card p { margin: 0; color: var(--muted); font-size: .925rem; line-height: 1.6; }
.card .go {
  margin-top: auto;
  padding-top: 1.15rem;
  color: var(--cyan-2);
  font-family: var(--display);
  font-weight: 650;
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  transition: color .18s ease, letter-spacing .3s ease;
}
.card:hover .go { color: #fff; letter-spacing: .115em; }

.card .index {
  position: absolute;
  top: 1.3rem; right: 1.4rem;
  color: var(--faint); /* v7.5.2: was --line-3 (1.9:1); text needs ≥ 4.5:1 */
  font: 600 .82rem var(--mono);
  letter-spacing: .06em;
  transition: color .26s ease;
}
.card:hover .index { color: var(--cyan); }

.callout {
  padding: 1.45rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, rgba(31, 21, 60, .68), rgba(14, 10, 30, .9));
  transition: border-color .26s ease, transform .26s ease;
}
.callout:hover { border-color: var(--line-3); transform: translateY(-2px); }
.callout h2 { margin: .4rem 0 .65rem; font-size: 1.28rem; }
.callout p { color: var(--muted); }

/* --------------------------------------------------------------------------
   Panels and the laboratory grid
   -------------------------------------------------------------------------- */

.labgrid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 1.05rem;
  align-items: start;
  margin-bottom: 2.2rem;
}

.panel { padding: 1.2rem; }
.panel + .panel { margin-top: 1.05rem; }
.panel h2 {
  margin: .1rem 0 1rem;
  padding-bottom: .72rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.08rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.panel h3 { margin: 1.4rem 0 .6rem; font-size: .9rem; color: var(--cyan-2); letter-spacing: .075em; }
.controls { position: sticky; top: 80px; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { margin: .85rem 0; min-width: 0; }
.field label {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .34rem;
  color: var(--ink-2);
  font-size: .875rem;
  font-weight: 550;
  overflow-wrap: anywhere;
}
.field label > span { flex-shrink: 0; color: var(--faint); font: 600 .73rem var(--mono); }
.playback .field.compact label { display: block; font-size: 11px; overflow-wrap: normal; }
.playback .field.compact label > span { display: block; font-size: 10px; }
.recorded-bench .controls .field label { display: block; font-size: 12px; }
.recorded-bench .controls .field label > span { display: inline-block; margin-left: .35em; color: var(--muted); }

.field small, .help, .source-note {
  display: block;
  margin-top: .32rem;
  color: var(--faint);
  font-size: .775rem;
  line-height: 1.55;
}

input, select, textarea {
  width: 100%;
  min-height: 42px;
  padding: .55rem .72rem;
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--sunken);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--line-3); }
input:focus, select:focus, textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(166, 138, 255, .18);
  background: #0d0920;
  outline: none;
}
input:invalid { border-color: var(--red); }
input[type=range] { padding: 0; background: transparent; border: 0; accent-color: var(--cyan); }
select { cursor: pointer; }

.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }

.filedrop {
  padding: 1.15rem;
  border: 1px dashed rgba(166, 138, 255, .45);
  border-radius: var(--r-md);
  background: rgba(166, 138, 255, .05);
  transition: border-color .2s ease, background-color .2s ease;
}
.filedrop:hover { border-color: var(--cyan); background: rgba(166, 138, 255, .09); }

.check { display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; color: var(--muted); }
.check input, .layer-grid input { width: auto; min-height: auto; accent-color: var(--cyan); }

.layer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: .5rem .85rem;
  margin: 1.1rem 0 0;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(10, 7, 24, .55);
}
.layer-grid legend { padding: 0 .4rem; color: var(--cyan-2); font-weight: 650; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; }
.layer-grid label { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .82rem; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.buttonrow { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; }

button, .button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .45rem;
  min-height: 42px;
  padding: .55rem 1.05rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  background: var(--panel-2);
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  font-family: var(--display);
  font-size: .86rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease, color .18s ease;
}
/* Shine sweep on hover. */
button::after, .button::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .17), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
button:hover::after, .button:hover::after { animation: hbf-shine .8s ease; }
@keyframes hbf-shine { from { left: -120%; } to { left: 145%; } }

button:hover, .button:hover { border-color: rgba(166, 138, 255, .6); background: var(--panel-3); color: #fff; }
button:active, .button:active { transform: translateY(1px); }

button.primary, .button.primary {
  color: #fff;
  border-color: var(--primary-2);
  /* v7.5.2: darker fill so white text meets WCAG AA (≥ 4.76:1 on both stops). */
  background: linear-gradient(180deg, var(--primary-fill), var(--primary-fill-2));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 8px 22px rgba(124, 92, 255, .3);
}
button.primary:hover, .button.primary:hover {
  color: #fff;
  background: linear-gradient(180deg, var(--primary-fill-hover), var(--primary-fill-hover-2));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .24) inset, 0 12px 30px rgba(124, 92, 255, .42);
}
button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
button:disabled:hover { border-color: var(--line-2); background: var(--panel-2); color: var(--ink); }
button:disabled::after { display: none; }

/* --------------------------------------------------------------------------
   Metrics
   -------------------------------------------------------------------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem;
  margin: .95rem 0;
}
.metric {
  padding: .85rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(10, 7, 24, .6);
  transition: border-color .22s ease;
}
.metric:hover { border-color: var(--line-3); }
.metric .label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.metric .value {
  margin-top: .24rem;
  font: 700 clamp(1.05rem, 2.4vw, 1.5rem)/1.24 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  word-break: break-word;
}
.metric .unit { color: var(--cyan-2); font-size: .72rem; font-family: var(--mono); }
.process-value { font-size: 1rem !important; }

/* --------------------------------------------------------------------------
   Tables, details, charts
   -------------------------------------------------------------------------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(10, 7, 24, .45); }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { padding: .64rem .78rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th {
  color: var(--cyan-2);
  background: #17102c;
  font-family: var(--display);
  font-weight: 650;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
td { font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .16s ease; }
tbody tr:hover td { background: rgba(166, 138, 255, .05); }
table caption { padding: .68rem .78rem; color: var(--muted); text-align: left; font-size: .78rem; }

details {
  margin: .8rem 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(10, 7, 24, .48);
  overflow: hidden;
}
summary {
  cursor: pointer;
  padding: .72rem .88rem;
  color: var(--cyan-2);
  font-family: var(--display);
  font-weight: 650;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  list-style-position: inside;
  transition: background-color .18s ease;
}
summary:hover { background: rgba(166, 138, 255, .07); }
details[open] summary { border-bottom: 1px solid var(--line); }
details > :not(summary) { margin-inline: .88rem; }

.chart {
  width: 100%;
  min-height: 280px;
  margin: .8rem 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunken);
  overflow: hidden;
}
.chart svg { display: block; width: 100%; height: auto; }
canvas.chart { display: block; height: auto; }

.warnings { margin: .85rem 0; padding-left: 1.25rem; color: #ffd8a8; font-size: .9rem; }
.warnings li { margin: .3rem 0; }
.status { min-height: 1.5em; color: var(--muted); font-size: .86rem; }

/* --------------------------------------------------------------------------
   3D viewer and playback
   -------------------------------------------------------------------------- */

#viewer { position: relative; overflow: auto; }
.imagecanvas { display: block; max-width: 100%; height: auto; background: #ddd; border-radius: var(--r-md); }
.overlay { position: absolute; inset: 0; pointer-events: none; max-width: 100%; height: auto; }

.viewer-title { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.viewer-title h2 { margin-bottom: .25rem; }
.science-viewer { margin: 0; }
.science-viewer figcaption {
  padding: .72rem .9rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: .78rem;
  line-height: 1.55;
}
.science-3d-host {
  position: relative;
  width: 100%;
  height: clamp(420px, 62vh, 720px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: #06040f;
  touch-action: none;
}
.science-3d-host.compact-viewer { height: clamp(380px, 52svh, 620px); }
.science-3d-host[data-stale="true"] { opacity: .56; }
.panel[data-stale="true"] { border-color: rgba(255, 207, 112, .6); box-shadow: inset 0 0 0 1px rgba(255, 207, 112, .18); }
.science-3d-canvas { display: block; width: 100%; height: 100%; }
.viewer-fallback {
  display: grid;
  place-content: center;
  min-height: 100%;
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  background: radial-gradient(circle, rgba(166, 138, 255, .09), transparent 55%);
}
.viewer-fallback strong { color: var(--ink); }

.playback {
  display: grid;
  grid-template-columns: repeat(5, auto) minmax(150px, 1fr) minmax(90px, 120px) auto;
  gap: .45rem;
  align-items: end;
  margin-top: .85rem;
}
.playback button { min-width: 44px; padding-inline: .55rem; }
.playback .field { margin: 0; }
.playback-slider { min-width: 150px; }
.compact { min-width: 90px; }

.reactor-workbench {
  display: grid;
  grid-template-columns: minmax(275px, 330px) minmax(440px, 1fr) minmax(240px, 285px);
  gap: 1rem;
  align-items: start;
  margin: 1rem 0 2rem;
}
.reactor-controls { position: sticky; top: 80px; max-height: calc(100vh - 95px); overflow: auto; scrollbar-gutter: stable; }
.reactor-view-panel { min-width: 0; }
.reactor-live-rail { position: sticky; top: 80px; }

/* --------------------------------------------------------------------------
   Home page components
   -------------------------------------------------------------------------- */

.statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr));
  gap: 1px;
  margin: 2.4rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
  overflow: hidden;
}
.statband > div {
  position: relative;
  padding: 1.25rem 1.3rem;
  background: linear-gradient(160deg, rgba(24, 16, 48, .82), rgba(11, 8, 25, .95));
  transition: background-color .26s ease;
}
.statband > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.statband > div:hover::before { transform: scaleX(1); }
.statband dt {
  color: var(--muted);
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.statband dd {
  margin: .4rem 0 0;
  font: 700 1.72rem/1.1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  color: var(--ink);
}
.statband dd small {
  display: block;
  margin-top: .38rem;
  color: var(--faint);
  font: 500 .775rem/1.5 var(--sans);
  letter-spacing: 0;
}

.sectionhead { margin: 3.6rem 0 1.5rem; }
.sectionhead h2 { margin: 0 0 .55rem; }
.sectionhead p { max-width: 66ch; margin: 0; color: var(--muted); font-size: 1rem; }

.spec {
  margin: 1rem 0 0;
  padding: .85rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .38rem;
}
.spec div { display: flex; justify-content: space-between; gap: .8rem; font-size: .78rem; }
.spec dt { color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-size: .715rem; }
.spec dd { margin: 0; color: var(--ink-2); font-family: var(--mono); font-size: .755rem; text-align: right; }

.methodlist { display: grid; gap: .1rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.methodlist li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: .4rem 1.7rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  transition: border-color .24s ease;
}
.methodlist li:hover { border-top-color: var(--line-3); }
.methodlist li > strong {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 650;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.methodlist li > span { color: var(--muted); font-size: .92rem; line-height: 1.62; }

.equation {
  margin: 1rem 0;
  padding: .95rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--sunken);
  color: var(--cyan-2);
  font: 500 .95rem/1.75 var(--mono);
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Scroll reveal — inert until the motion script marks the document ready,
   so the page is fully readable when JavaScript is blocked.
   -------------------------------------------------------------------------- */

[data-motion="on"] [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .68s cubic-bezier(.2, .8, .2, 1), transform .68s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-motion="on"] [data-reveal].in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
  position: relative;
  margin-top: 4.2rem;
  padding: 2.2rem 0 3.6rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .86rem;
}
footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .45;
}
footer nav { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.15rem; }
footer nav a {
  padding: .35rem .7rem .35rem 0;
  margin-right: .5rem;
  color: var(--ink-2);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}
footer nav a:hover { color: var(--cyan-2); }
footer p { max-width: 78ch; margin: 0; color: var(--faint); line-height: 1.68; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .reactor-workbench { grid-template-columns: 1fr; }
  .reactor-controls, .reactor-live-rail { position: static; max-height: none; overflow: visible; }
  .reactor-view-panel { grid-row: 2; }
  .reactor-live-rail { grid-row: 3; }
  .herofield { opacity: .3; right: -22%; }
}

@media (max-width: 980px) {
  .sitebar { align-items: flex-start; flex-wrap: wrap; gap: .5rem; }
  .sitebar nav {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: .25rem;
    -webkit-overflow-scrolling: touch;
  }
  .sitebar[data-scrolled="true"] { min-height: 0; }
  .labgrid { grid-template-columns: 1fr; }
  .controls { position: static; }
  .three { grid-template-columns: 1fr; }
  .playback { grid-template-columns: repeat(5, 1fr); }
  .playback-slider { grid-column: 1 / -1; }
  .playback .compact, .playback .check { grid-column: span 2; }
  .methodlist li { grid-template-columns: 1fr; gap: .3rem; }
}

@media (max-width: 640px) {
  .row, .two { grid-template-columns: 1fr; }
  .hero, .labhead, main, footer { width: min(100% - 1.6rem, var(--shell)); }
  .hero { padding: 2.8rem 0 2.2rem; }
  .herofield { display: none; }
  .panel { padding: .95rem; }
  .card { padding: 1.2rem; min-height: 0; }
  .science-3d-host { height: clamp(320px, 56svh, 520px); }
  .viewer-title { display: block; }
  .statband dd { font-size: 1.42rem; }
  .sectionhead { margin-top: 2.8rem; }
  body::after { background-size: 56px 56px; }
}

@media (max-width: 380px) {
  body { font-size: 15px; }
  .hero, .labhead, main, footer { width: calc(100% - 1.1rem); }
  .brand { font-size: .88rem; letter-spacing: .07em; }
  .brand img { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------------------
   Print and motion preferences
   -------------------------------------------------------------------------- */

@media print {
  :root { color-scheme: light; }
  body { color: #111; background: #fff; }
  body::before, body::after, .herofield, .scrollrail { display: none !important; }
  .sitebar, .controls, .buttonrow { display: none !important; }
  .labgrid { display: block; }
  .panel, .card { box-shadow: none; border-color: #888; background: #fff; break-inside: avoid; }
  .metric { background: #fff; border-color: #aaa; }
  a { color: #111; }
  .science-3d-host { display: none; }
  .science-viewer figcaption { border: 1px solid #888; }
  [data-motion="on"] [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  body::before { animation: none; }
  .card:hover { transform: none; }
  .herofield { display: none; }
  [data-motion="on"] [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* --------------------------------------------------------------------------
   Collaboration call to action, profile, timeline and evidence components
   -------------------------------------------------------------------------- */

/* Primary action in the site bar. */
.sitebar .cta {
  margin-left: .55rem;
  padding: .44rem .95rem;
  border: 1px solid var(--primary-2);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--primary-fill), var(--primary-fill-2));
  color: #fff;
  box-shadow: 0 6px 18px rgba(124, 92, 255, .3);
}
.sitebar .cta::after { display: none; }
.sitebar .cta:hover { color: #fff; background: linear-gradient(180deg, var(--primary-fill-hover), var(--primary-fill-hover-2)); border-color: var(--violet); }
.sitebar nav a.cta[aria-current="page"] { color: #fff; background: linear-gradient(180deg, var(--primary-fill-hover), var(--primary-fill-hover-2)); border-color: var(--violet); }

/* Contact panel */
.contactcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem 2rem;
  align-items: center;
  margin: 2rem 0 0;
  padding: 1.6rem 1.75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background:
    radial-gradient(38rem 16rem at 8% 0%, rgba(124, 92, 255, .18), transparent 70%),
    linear-gradient(158deg, rgba(31, 21, 60, .82), rgba(14, 10, 30, .94));
}
.contactcard h2 { margin: .3rem 0 .5rem; font-size: 1.35rem; }
.contactcard p { margin: 0; color: var(--muted); max-width: 60ch; }
.contactcard .who { margin-top: .9rem; color: var(--ink-2); font-size: .95rem; }
.contactcard .who strong { color: var(--ink); }
.contactcard a.mail {
  font-family: var(--mono);
  font-size: .95rem;
  color: var(--cyan-2);
  overflow-wrap: anywhere;
}
.contactcard .actions { display: flex; flex-direction: column; gap: .55rem; }

/* Profile header */
.profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.6rem; align-items: start; margin-bottom: 1.4rem; }
.profile .mark {
  display: grid;
  place-items: center;
  width: 92px; height: 92px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, rgba(124, 92, 255, .3), rgba(14, 10, 30, .9));
  font: 650 2rem/1 var(--display);
  letter-spacing: .04em;
  color: var(--cyan-2);
}

/* Definition rows for responsibilities, deliverables, contributions */
.deflist { display: grid; gap: .1rem; margin: 1.2rem 0 0; padding: 0; }
.deflist > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: .35rem 1.7rem;
  padding: .95rem 0;
  border-top: 1px solid var(--line);
}
.deflist dt {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 650;
  font-size: .93rem;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.deflist dd { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.62; }

/* Phase timeline */
.timeline { margin: 1.5rem 0 0; padding: 0 0 0 1.9rem; list-style: none; border-left: 1px solid var(--line-2); }
.timeline li { position: relative; padding: 0 0 1.7rem .35rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -2.28rem; top: .42rem;
  width: 9px; height: 9px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: var(--bg);
}
.timeline .when {
  display: block;
  color: var(--cyan);
  font: 600 .7rem/1.6 var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
}
.timeline .what {
  display: block;
  margin: .2rem 0 .3rem;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.timeline p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* Numeric result emphasis inside tables */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pass { color: var(--green); font-weight: 650; }
.drift { color: var(--amber); font-weight: 650; }

/* File / hash list */
.filelist { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.filelist li { padding: .7rem 0; border-top: 1px solid var(--line); }
.filelist code { display: inline-block; background: none; padding: 0; color: var(--cyan-2); font-size: .86rem; }
.filelist .hash { display: block; margin-top: .22rem; color: var(--faint); font: .715rem/1.5 var(--mono); overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .contactcard { grid-template-columns: 1fr; }
  .contactcard .actions { flex-direction: row; flex-wrap: wrap; }
  .deflist > div { grid-template-columns: 1fr; gap: .25rem; }
  .profile { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 640px) {
  .sitebar .cta { margin-left: 0; }
}

/* Secondary contact address under the primary one. */
.contactcard .who .alt { display: block; margin-top: .35rem; color: var(--faint); font-size: .86rem; }
.contactcard .who .alt a { color: var(--muted); }
.contactcard .who .alt a:hover { color: var(--cyan-2); }
/* Controls wrap to their panel, including intermediate desktop widths. */
[hidden]{display:none!important} .playback{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.playback-slider{flex:1 1 180px}.playback .compact{flex:0 0 100px}.panel,.reactor-live-rail,.reactor-controls{min-width:0}.science-3d-host{touch-action:none} .sitebar nav a{font-size:14px}

/* v7.2: original machines, working surfaces and compact scientific controls. */
.live-input-bar{padding:12px;border:1px solid #275462;border-radius:10px;margin-bottom:12px;background:#102532}.live-input-bar small{display:block;font-size:14px;color:#b6c7ce}.live-input-bar .buttonrow{margin:8px 0}.scene-tools{margin-top:12px;border-top:1px solid #28444e;padding-top:12px}.scene-tools button{font-size:14px}.scene-inspector{padding:12px 0}.live-3d-panel .science-3d-host{height:440px}.science-3d-host[data-stale=true]{opacity:.5}.live-3d-panel .playback label{font-size:14px}.live-3d-panel .playback-slider input{display:block;width:100%}.panel:fullscreen{overflow:auto;background:#071016;padding:20px}.panel:fullscreen .science-3d-host{height:70vh}.labhead{padding-top:24px;padding-bottom:20px}.labhead h1{margin:8px 0 10px}.labhead .lede{max-width:1050px}.labhead .truthline{margin-top:12px}.immersive-lab .labhead .lede{font-size:16px;line-height:1.5}.immersive-lab .labhead{padding:14px 28px}.immersive-lab .labhead h1{font-size:30px}.immersive-lab .labhead .eyebrow{margin:0}.immersive-lab main{max-width:none;padding:0 24px 32px}.immersive-lab .reactor-workbench{grid-template-columns:290px minmax(0,1fr) 230px;gap:14px;align-items:start}.immersive-lab .reactor-controls{max-height:910px;overflow:auto;position:static}.immersive-lab .science-3d-host{height:520px}.immersive-lab .reactor-view-panel{padding:16px}.immersive-lab .reactor-live-rail .panel{padding:14px}.immersive-lab .viewer-title{align-items:start}.immersive-lab .viewer-title h2{font-size:20px}.immersive-lab .metrics{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}.immersive-lab .reactor-workbench .metric .value{font-size:22px}
@media(max-width:1250px){.immersive-lab .reactor-workbench{grid-template-columns:270px minmax(0,1fr)}.immersive-lab .reactor-live-rail{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(max-width:850px){.immersive-lab .reactor-workbench{grid-template-columns:1fr}.immersive-lab .reactor-view-panel{grid-row:1}.immersive-lab .reactor-controls{max-height:none}.immersive-lab .reactor-live-rail{grid-template-columns:1fr}.immersive-lab main{padding:0 12px}.immersive-lab .science-3d-host,.live-3d-panel .science-3d-host{height:360px}}

.immersive-lab main{width:calc(100% - 32px);margin:0 auto;padding:0 0 32px}.immersive-lab .labhead{width:calc(100% - 32px);max-width:none;margin:auto;padding:12px 0}.immersive-lab .labhead .lede{margin:6px 0}.immersive-lab .truthline{margin:8px 0}.immersive-lab main>details.notice{padding:10px 16px;margin:0 0 12px}.immersive-lab .reactor-workbench{grid-template-columns:280px minmax(0,1fr)}.immersive-lab .reactor-live-rail{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.immersive-lab .runIdentity{overflow-wrap:anywhere}.immersive-lab .viewer-title .source-note{max-width:600px}.immersive-lab .scene-tools{margin-top:10px}.immersive-lab .science-3d-host{height:470px}@media(max-width:850px){.immersive-lab .reactor-workbench{grid-template-columns:1fr}.immersive-lab .reactor-live-rail{grid-template-columns:1fr}.immersive-lab .science-3d-host{height:360px}}
/* Put the experiment, controls and 3D view ahead of long documentation. */
.labhead{padding-top:14px;padding-bottom:14px}.labhead h1{font-size:clamp(28px,3vw,38px);line-height:1.2}.labhead .lede{font-size:16px;line-height:1.5;margin:10px 0}.labhead .eyebrow{margin:0}.labhead .truthline{margin:10px 0 0}main>.notice{margin-bottom:14px;padding:14px 18px}.labgrid{grid-template-columns:310px minmax(0,1fr)}.labgrid>.controls{min-width:0}.live-3d-panel .source-note{margin:8px 0;font-size:14px}.live-3d-panel .science-3d-host{height:400px}.viewer-title .source-note{margin:4px 0}.scene-inspector select{max-width:100%}@media(max-width:850px){.labgrid{grid-template-columns:1fr}.labgrid>.controls{order:2}.labgrid>div{order:1}.live-3d-panel .science-3d-host{height:330px}}

.metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.metric .value{font-size:clamp(17px,1.6vw,24px);overflow-wrap:normal;word-break:normal}.metric .label,.metric .unit{font-size:14px}

.download-receipt{position:relative;z-index:1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:100%;margin:12px;padding:12px 18px;background:#132e39;border:1px solid #5ee5d0;border-radius:8px;font-size:13px;overflow-wrap:anywhere}
.download-receipt a{flex:1;min-width:0}.download-receipt button{flex:none}
.hbf-workspace:has(.workspace-timeline>.download-receipt){grid-template-rows:64px 24px minmax(0,1fr) auto}
.workspace-timeline:has(>.download-receipt){max-height:40dvh;min-height:122px}
.workspace-timeline>.download-receipt{margin:6px 0 0;padding:8px 12px}
@media(max-width:850px){.hbf-workspace:has(.workspace-timeline>.download-receipt){grid-template-rows:88px 24px minmax(0,1fr) auto}.workspace-timeline:has(>.download-receipt){min-height:142px}}
.study-results-table{max-width:100%;overflow:auto;margin:16px 0}.study-results-table caption{text-align:left;font-weight:700;padding:8px}.study-results-table th,.study-results-table td{vertical-align:top;overflow-wrap:anywhere;min-width:90px}.study-results-table [data-qualifier="false"]{font-weight:700;color:#ffca80}

.metric .long-value{overflow-wrap:anywhere;word-break:break-word;font-size:14px;line-height:1.45}.labgrid>div{min-width:0}

/* Startup is visible before the scientific module graph has loaded. */
:root{--hbf-release:7.5.2}.science-3d-host{--hbf-viewer-layout:1}
.lab-startup{width:min(1240px,calc(100% - 2rem));margin:12px auto;padding:10px 14px;border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:8px;background:var(--panel);font-size:14px}
.lab-startup p{margin:0;overflow-wrap:anywhere}.lab-startup .buttonrow{margin:8px 0 0}.lab-startup button{font-size:14px;min-height:36px;padding:6px 10px}.lab-startup[data-state=error],.lab-startup[data-state=slow]{border-left-color:var(--red)}
.check{display:flex;align-items:center;gap:8px;font-size:14px}.check input[type=checkbox],.live-input-bar input[type=checkbox]{width:18px;height:18px;min-height:18px;flex:0 0 18px;margin:0;padding:0;accent-color:var(--cyan)}
.science-3d-host,.live-3d-panel,.reactor-view-panel{scroll-margin-top:90px}
.live-input-bar textarea,.live-input-bar input[type=file],.experiment-diff{font-size:14px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* v7.4: preserve the purple instrument workspace shown in the supplied recording. */
.recorded-workspace,.recorded-bench{--bg:#070512;--bg-2:#0b0819;--panel:#130d26;--panel-2:#181040;--ink:#ede9f9;--muted:#b7afd6;--line:#2a1f52;--cyan:#a68aff;--cyan-2:#d5c6ff;--blue:#67e6ff;background:#070512;color:#ede9f9}
.recorded-workspace .panel,.recorded-bench .panel{background:linear-gradient(145deg,#18102cf7,#0c091cf5);border-color:#352653;border-radius:12px}
.recorded-workspace input,.recorded-workspace select,.recorded-bench input,.recorded-bench select{background:#0b0819;border-color:#3b2d5e;color:#ede9f9;min-height:34px;padding:6px 8px;font-size:13px}
.recorded-workspace button,.recorded-bench button{min-height:34px;padding:6px 10px;font-size:12px;background:#21163b;border-color:#44315f}
.recorded-workspace button.primary,.recorded-bench button.primary{background:var(--primary-fill-hover);color:#fff}
.recorded-workspace .live-input-bar,.recorded-bench .live-input-bar{background:#1b1234;border-color:#3b2d5e}
.recorded-workspace{height:100dvh;overflow:hidden;font-size:13px}
.hbf-workspace{position:fixed;inset:0;z-index:30;background:#090713;display:grid;grid-template-rows:56px 28px 1fr 86px;isolation:isolate}
.hbf-workspace-header{grid-row:1;display:flex;align-items:center;gap:18px;padding:8px 14px;background:#160c29;border-bottom:1px solid #392448;z-index:4;min-width:0}
.workspace-brand{font-weight:750;font-size:14px;color:#f1ebff;white-space:nowrap;text-decoration:none}
.workspace-tabs{display:flex;gap:4px;flex:1;overflow-x:auto;min-width:0}
.workspace-tabs button{background:transparent;border-color:transparent;white-space:nowrap}
.workspace-tabs button[aria-pressed=true],.bench-tabs button[aria-pressed=true]{background:#714cd4;border-color:#a68aff;color:#fff}
.workspace-utility{display:flex;gap:6px;align-items:center}.workspace-utility select{max-width:145px}.quality-note{max-width:88px;font-size:10px;color:#b7afd6}
.workspace-boundary{grid-row:2;z-index:4;background:#372813;color:#ffdc9e;font-size:11px;padding:5px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbf-stage.panel{grid-row:3;position:relative;padding:0;margin:0;border:0;border-radius:0;overflow:hidden;min-height:0;background:#0d1020}
.recorded-workspace .hbf-stage .science-3d-host{position:absolute;inset:0;height:100%!important;min-height:0;width:100%;border:0;border-radius:0;margin:0;scroll-margin:0}
.workspace-drawer{position:absolute;z-index:5;top:94px;bottom:100px;left:12px;width:330px;max-width:calc(100vw - 24px);overflow:auto;padding:9px;background:#100c20f2;border:1px solid #47335f;border-radius:12px;box-shadow:0 12px 40px #0007;scrollbar-width:thin}
.workspace-drawer:has([data-mode-panel=Compare]:not([hidden])),.workspace-drawer:has([data-mode-panel=Energy]:not([hidden])){width:min(670px,calc(100vw - 210px))}
.workspace-pane>.panel{margin:8px 0}.workspace-close{position:sticky;top:0;z-index:2;float:right;margin:0 0 8px 8px}.workspace-pane>h2{clear:both}
.recorded-workspace .workspace-controls{position:static;max-height:none;overflow:visible;width:auto;scrollbar-gutter:auto}.workspace-controls>.panel{padding:10px}.workspace-controls .field{margin:9px 0}.workspace-controls .field label{font-size:12px}.workspace-controls .help,.workspace-controls small,.workspace-controls .live-input-bar small{font-size:11px}.workspace-controls .buttonrow{gap:5px}
.recorded-workspace .workspace-drawer .labhead{width:auto;padding:12px 0}.workspace-drawer .labhead :is(h1,h2){font-size:22px}.workspace-drawer .labhead .lede{font-size:13px}.workspace-drawer .lab-startup{width:auto;margin:12px 0}.workspace-drawer .sitebar{position:static}.workspace-pane .layer-grid{grid-template-columns:1fr;margin-top:10px}.workspace-pane figcaption{font-size:12px;color:#b7afd6}
.workspace-camera{position:absolute;z-index:3;right:14px;top:100px;width:150px;display:grid;gap:6px}.workspace-camera button{background:#130e26de;box-shadow:0 3px 8px #0004;justify-content:flex-start;font-size:11px;min-height:31px}
.workspace-assembly{position:absolute;z-index:3;bottom:98px;left:14px;width:300px;max-height:45vh;overflow:auto;background:#130e26ed;margin:0;box-shadow:0 5px 20px #0006}.workspace-assembly .scene-tools{margin:0;padding:0;border:0}.workspace-assembly summary{font-size:12px;padding:8px 10px}.workspace-assembly .buttonrow{margin:8px 0}.workspace-assembly .scene-inspector{padding:8px 0}.workspace-assembly .scene-inspector label{font-size:12px}.workspace-drawer:not([hidden])~.workspace-assembly{left:355px}
.workspace-hud{position:absolute;z-index:2;top:98px;left:50%;transform:translateX(-50%);background:#110b22c9;border:1px solid #56407799;border-radius:7px;padding:6px 10px;color:#ddd1f6;white-space:nowrap;max-width:calc(100% - 380px);font:11px ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.workspace-timeline{grid-row:4;z-index:4;background:#130c22;border-top:1px solid #3d2853;padding:8px 14px;overflow:auto}.workspace-timeline .playback{margin:0;gap:7px;flex-wrap:nowrap}.workspace-timeline .playback button{min-width:32px;padding:5px 8px}.workspace-timeline .playback .compact{flex-basis:70px}.workspace-timeline .playback .field label{font-size:10px;margin:0}.workspace-timeline input[type=range]{min-height:24px;padding:0}.workspace-timeline .check{font-size:11px}.timeline-status{display:block;margin-top:4px;color:#a99abb;font-size:10px}
.recorded-workspace .metric{padding:9px;background:#0a071899}.recorded-workspace .metric .value{font-size:18px}.recorded-workspace .metric .label,.recorded-workspace .metric .unit{font-size:11px}.recorded-workspace .metrics{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.recorded-workspace .chart{background:#0b0819}.recorded-workspace .tablewrap{max-width:100%}.recorded-workspace table{font-size:11px}
.recorded-bench .sitebar{background:#130b24;border-color:#2a1f52;min-height:50px;padding:5px max(14px,calc((100vw - 1280px)/2))}.recorded-bench .sitebar nav a{font-size:12px}.recorded-bench .labhead{width:min(1280px,calc(100% - 28px));padding:12px 0}.recorded-bench .labhead h1{font-size:24px}.recorded-bench .labhead .lede{font-size:13px;max-width:1000px;margin:5px 0}.recorded-bench .labhead .eyebrow{font-size:10px}.recorded-bench .truthline{margin:6px 0}.recorded-bench main{width:min(1280px,calc(100% - 28px))}.recorded-bench .labgrid{grid-template-columns:340px minmax(0,1fr);gap:18px}.recorded-bench .controls{top:60px}.recorded-bench .panel h2{font-size:17px}.recorded-bench .lab-startup[data-state=ready]{font-size:11px;padding:6px 10px;margin:6px auto}.recorded-bench .lab-startup[data-state=ready] .buttonrow{margin:4px 0 0}.recorded-bench .lab-startup[data-state=ready] button{font-size:10px;min-height:26px}.bench-tabs{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px;padding:8px;background:#130b24;border:1px solid #2a1f52;border-radius:10px}.bench-tab-panel>.panel:first-child{margin-top:0}.recorded-bench .science-3d-host{height:460px}.recorded-bench .notice{font-size:12px}.recorded-bench .metric{background:#0b0819}.recorded-bench .chart{background:#0b0819}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:10px 0}.preset-grid button{font-size:12px;padding:8px 4px}.thermal-result{font-size:12px}.thermal-result .metric .value{font-size:16px}
@media(max-width:1100px){.workspace-utility{gap:3px}.workspace-utility select{max-width:110px}.workspace-brand{font-size:12px}.hbf-workspace-header{gap:8px}.quality-note{display:none}.workspace-tabs button{padding:5px 7px;font-size:11px}.workspace-hud{top:auto;bottom:102px;left:auto;right:14px;transform:none;max-width:calc(100% - 340px)}}
@media(max-width:850px){.hbf-workspace{grid-template-rows:88px 24px 1fr 100px}.hbf-workspace-header{flex-wrap:wrap;gap:5px}.workspace-brand{flex:1}.workspace-tabs{order:3;flex-basis:100%}.workspace-utility select{max-width:130px}.workspace-boundary{padding:4px 8px;font-size:10px}.workspace-drawer{top:120px;bottom:110px}.workspace-camera{top:122px;right:8px;width:112px;gap:4px}.workspace-camera button{font-size:10px;min-height:28px}.workspace-hud{bottom:110px;max-width:calc(100% - 190px)}.workspace-assembly{bottom:111px;left:8px;width:180px}.workspace-drawer:not([hidden])~.workspace-assembly{display:none}.workspace-drawer:has([data-mode-panel=Compare]:not([hidden])),.workspace-drawer:has([data-mode-panel=Energy]:not([hidden])){width:calc(100vw - 24px)}.workspace-timeline{padding:7px 8px}.workspace-timeline .playback{flex-wrap:wrap;gap:4px}.workspace-timeline .playback-slider{flex-basis:calc(100% - 220px);min-width:110px}.workspace-timeline .playback .compact{display:none}.timeline-status{font-size:9px}.recorded-bench .labgrid{grid-template-columns:1fr}.recorded-bench .controls{position:static;order:0}.recorded-bench .labgrid>div{order:1}.recorded-bench .science-3d-host{height:360px}.recorded-bench .labhead .lede{font-size:12px}}
@media print{.recorded-workspace{height:auto;overflow:visible}.hbf-workspace{position:static;display:block}.hbf-stage,.workspace-camera,.workspace-assembly,.workspace-tabs,.workspace-utility,.workspace-timeline{display:none}.workspace-drawer{position:static;width:100%!important;max-width:none;overflow:visible;display:block!important}.workspace-pane,.bench-tab-panel{display:block!important}.workspace-drawer [hidden]{display:block!important}.workspace-hud{position:static;transform:none}}
@media(max-width:560px){.hbf-workspace{grid-template-rows:118px 24px 1fr 100px}.hbf-workspace-header{align-content:center}.workspace-brand{flex-basis:100%;font-size:12px}.workspace-utility{order:2;flex-basis:100%;min-width:0}.workspace-utility select{flex:1;min-width:0;max-width:none;font-size:10px;min-height:28px}.workspace-tabs{order:3;flex-basis:100%}.workspace-drawer{top:150px}.workspace-camera{top:152px}.workspace-timeline .playback button{min-width:25px;padding:4px}.workspace-timeline .playback-slider{flex-basis:calc(100% - 190px)}.recorded-bench .row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Scientific workspaces expose existing inputs and results without changing the scene. */
.science-shortcuts{position:sticky;top:0;z-index:5;display:flex;gap:6px;background:#130b24;padding:8px 92px 8px 0;border-bottom:1px solid #483563;margin-bottom:12px;flex-wrap:wrap}
.science-shortcuts button{font-size:14px;padding:6px 10px}.workspace-pane{scroll-margin-top:70px}
.workspace-controls .field label{font-size:14px}.workspace-controls .help,.workspace-controls small{font-size:12px}
.workspace-pane .panel h2{font-size:18px}.workspace-pane .panel p{line-height:1.5}
@media(max-width:850px){.workspace-timeline .playback .compact{display:block;flex-basis:88px}.science-shortcuts{padding-right:80px;gap:4px}}

/* v745: bounded desktop controls, normal-flow reflow, explicit historical state. */
.recorded-bench .controls{max-block-size:calc(100dvh - 76px);overflow-y:auto;scroll-padding-block:1rem 5rem;scrollbar-gutter:stable}
.recorded-bench .controls :is(input,select,textarea,button){scroll-margin-block:1rem}
:focus-visible{outline:3px solid #80e6ff;outline-offset:3px}
.result-association{display:block;padding:.65rem;background:#3c2816;color:#ffe2ab;border:1px solid #99703a;font-weight:650}
[data-state=historical]{border-color:#99703a}
.tablewrap td small{display:block;color:var(--muted);overflow-wrap:anywhere}
.research-panel textarea{width:100%;min-height:110px;font:12px ui-monospace,monospace}
.research-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow:auto}
.research-panel details{margin:.75rem 0}
.research-panel .status{overflow-wrap:anywhere}
@media(max-width:60rem){.recorded-bench .labgrid{grid-template-columns:1fr}.recorded-bench .controls{position:static;max-block-size:none;overflow:visible;scrollbar-gutter:auto}.recorded-bench .sitebar{position:static}.recorded-bench .row{grid-template-columns:1fr}}
@media print{.recorded-bench .controls{position:static;max-block-size:none;overflow:visible}}

.science-3d-host[data-stale="true"]::after{content:"Previous scene · no current calculation";position:absolute;top:8px;left:8px;z-index:3;background:#442915;color:#ffe3b5;padding:8px;font-size:13px;pointer-events:none}

/* v746: keep first-paint layout changes out of view without collapsing canvases.
   The hash escape works even if JavaScript is blocked or the boot file is missing. */
html[data-hbf-startup]:not(:target){background:#0d091b}
html[data-hbf-startup]:not(:target) body{background:#0d091b;overflow:hidden}
html[data-hbf-startup]:not(:target) body>:not(#labLoadingScreen),
html[data-hbf-startup]:not(:target) body>:not(#labLoadingScreen) *{visibility:hidden!important;pointer-events:none!important}
#labLoadingScreen{display:none}
html[data-hbf-startup]:not(:target) #labLoadingScreen{display:flex;position:fixed;inset:0;z-index:10000;overflow:auto;align-items:flex-start;justify-content:flex-start;background:#0d091b;color:#ede6ff;padding:clamp(18px,4vw,48px);font-family:system-ui,sans-serif}
.lab-loading-card{margin:auto;width:min(100%,620px);padding:clamp(24px,5vw,44px);border:1px solid #48305f;border-radius:14px;background:#19102e}
.lab-loading-card h1{font-size:clamp(24px,4vw,34px);line-height:1.2;margin:12px 0 20px}
.lab-loading-card p{line-height:1.6}
.lab-loading-card .loading-brand{color:#c3a4ff;font-size:13px;letter-spacing:.08em}
.lab-loading-card .buttonrow{margin-top:24px;gap:12px}
.lab-loading-card a{color:#d4baff;text-decoration:underline;text-underline-offset:3px}
.lab-loading-card a:focus-visible{outline:3px solid #7ad9ed;outline-offset:5px}
.lab-loading-card .help{color:#c1b8ce}

/* ==========================================================================
   7.5.1 reconciliation — keeps the refreshed chrome and motion layer from
   fighting the preserved laboratory workspace layers above.
   ========================================================================== */

/* Focus ring follows the purple accent everywhere (overrides the legacy blue). */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Compact instrument workspaces keep flat panel headings. */
.recorded-workspace .panel h2,
.recorded-bench .panel h2,
.workspace-pane .panel h2,
.hbf-workspace .panel h2,
.immersive-lab .reactor-live-rail .panel h2 { border-bottom: 0; padding-bottom: 0; }

.recorded-workspace .panel h2,
.recorded-bench .panel h2 { border-bottom-color: #352653; }
.recorded-workspace th, .recorded-bench th { background: #17102c; color: #d5c6ff; }
.recorded-workspace .tablewrap, .recorded-bench .tablewrap { background: rgba(11, 8, 25, .5); }
.recorded-workspace details, .recorded-bench details { background: rgba(11, 8, 25, .5); border-color: #352653; }
.recorded-workspace details[open] summary, .recorded-bench details[open] summary { border-bottom-color: #352653; }
.recorded-workspace .metric, .recorded-bench .metric { border-color: #2a1f52; }
.workspace-drawer .panel { box-shadow: none; }

/* Workspace chrome stays sentence case — these are dense functional labels. */
.workspace-tabs button, .bench-tabs button, .workspace-camera button,
.workspace-timeline .playback button, .science-shortcuts button,
.workspace-utility button, .workspace-close, .scene-tools button {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: normal;
}
.workspace-drawer .labhead :is(h1,h2), .workspace-pane h2 { letter-spacing: .02em; }

/* The full-window workspaces paint their own ground: drop the page field and
   grid there so nothing is composited behind a 100dvh fixed scene. */
.recorded-workspace::before, .recorded-workspace::after { display: none; }
body.recorded-workspace::before, body.recorded-workspace::after { display: none; }
.recorded-workspace, .immersive-lab { background: #070512; }

/* Laboratory pages carry heavy 3D: hold the ambient field still there. */
.recorded-workspace ~ * , .immersive-lab body::before { animation: none; }

/* Buttons inside dense control rails keep their compact legacy sizing. */
.recorded-workspace button::after, .recorded-bench button::after,
.workspace-timeline button::after, .lab-startup button::after { display: none; }

/* Sticky offsets follow the condensed site bar. */
.controls, .reactor-controls, .reactor-live-rail { top: 78px; }

/* Startup and loading cards adopt the accent. */
.lab-startup { border-left-color: var(--cyan); }
.lab-loading-card .loading-brand { letter-spacing: var(--track-wide); font-family: var(--mono); }
.lab-loading-card h1 { font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; }

/* v750: typed studies and unobscured recorded workspace. */
.typed-study-form{display:grid;gap:10px;margin:12px 0;min-width:0}
.typed-study-form fieldset{min-width:0;display:grid;gap:8px;border:1px solid #44305e;border-radius:8px;padding:10px}
.typed-study-form label,.study-file-tools label{display:grid;gap:5px;font-size:12px;min-width:0}
.typed-study-form input,.typed-study-form textarea{width:100%;min-width:0;box-sizing:border-box}
.typed-study-form input[type=checkbox]{width:20px;justify-self:start}
.typed-study-form input:invalid,.typed-study-form textarea:invalid{outline:2px solid #f3aa70}
.study-file-tools{margin:12px 0;display:grid;gap:10px}
.research-panel>details>details textarea{width:100%;min-height:160px}
.recorded-workspace .hbf-stage .science-3d-host{left:var(--scene-left,0px);right:var(--scene-right,176px);width:auto}
.workspace-primary-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px;font-size:11px;color:#e3d7f5}
.workspace-primary-summary .buttonrow{margin:0;flex-wrap:nowrap}.workspace-primary-summary button{white-space:nowrap;font-size:11px;min-height:26px;padding:4px 8px}
.hbf-workspace{grid-template-rows:64px 24px minmax(0,1fr) 122px}
.workspace-drawer{bottom:132px}.workspace-drawer:has([data-mode-panel=Compare]:not([hidden])),.workspace-drawer:has([data-mode-panel=Energy]:not([hidden])){width:min(480px,42vw)}
.workspace-assembly{bottom:132px}.workspace-hud{max-width:calc(100% - 400px)}
@media(min-width:851px){.workspace-drawer:not([hidden])~.workspace-assembly{left:calc(var(--scene-left) + 12px);width:230px}.workspace-drawer:not([hidden])~.workspace-hud{left:calc(var(--scene-left) + 12px);transform:none;max-width:calc(100% - var(--scene-left) - 200px)}}
@media(max-width:1100px){.workspace-hud{bottom:135px}}
@media(max-width:850px){.hbf-workspace{grid-template-rows:88px 24px minmax(0,1fr) 142px}.workspace-drawer{bottom:152px}.workspace-drawer:has([data-mode-panel=Compare]:not([hidden])),.workspace-drawer:has([data-mode-panel=Energy]:not([hidden])){width:calc(100vw - 24px)}.workspace-primary-summary{align-items:flex-start;font-size:10px}.workspace-primary-summary .buttonrow{flex-direction:column;gap:3px}.workspace-primary-summary button{font-size:10px;min-height:24px}.workspace-assembly,.workspace-hud{bottom:152px}}
@media(max-width:560px){.hbf-workspace{grid-template-rows:118px 24px minmax(0,1fr) 154px}.workspace-drawer{bottom:164px}.workspace-assembly,.workspace-hud{bottom:164px}.workspace-primary-summary{gap:5px}}

.stage-selected { outline: 2px solid #64dfca; outline-offset: -2px; background: #123c3a; }
.stage-selection-controls { display: grid; gap: .5rem; margin: .75rem 0; }
.stage-selection-controls select { min-height: 2.75rem; }
[data-stage-index]:focus-visible { outline: 3px solid #ffd681; outline-offset: 3px; }
.validation-form { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap: .75rem; }
.validation-form label { display: grid; gap: .25rem; }
.validation-form input,.validation-form select { min-height: 2.75rem; max-width: 100%; }
.validation-wide { grid-column: 1 / -1; }
.validation-output { overflow-x: auto; }
.validation-output td,.validation-output th { white-space: normal; min-width: 5rem; }

/* v750 detector registry workbench */
/* Scope this addition to the detector registry workbench. */
.detector-validation-workbench { min-width: 0; }
.detector-validation-workbench > details { border-top: 1px solid #294658; padding: .85rem 0; margin-top: .5rem; }
.detector-validation-workbench > details[open] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem 1rem; }
.detector-validation-workbench > details > :is(summary,p,pre,.tablewrap) { grid-column: 1 / -1; }
.detector-validation-workbench > details > summary { cursor: pointer; font-weight: 650; }
.detector-validation-workbench .field { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.detector-validation-workbench .field label { font-size: .875rem; }
.detector-validation-workbench .field :is(input,select) { box-sizing: border-box; width: 100%; min-width: 0; }
.detector-validation-workbench .tablewrap { min-width: 0; max-width: 100%; overflow-x: auto; }
.detector-validation-workbench table { width: 100%; border-collapse: collapse; text-align: left; }
.detector-validation-workbench :is(th,td) { padding: .55rem; vertical-align: top; }
.detector-validation-workbench td .field { min-width: 10rem; }
.detector-validation-workbench pre { max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.detector-validation-workbench [role="status"] { overflow-wrap: anywhere; }
.detector-validation-workbench button { align-self: start; min-height: 2.6rem; }
@media(max-width: 640px) { .detector-validation-workbench > details[open] { grid-template-columns: minmax(0,1fr); } }
/* Preserve readable mode labels when the narrow header scrolls horizontally. */
.workspace-tabs button{flex:0 0 auto}

@media(max-width:560px){.hbf-workspace:has(.workspace-timeline>.download-receipt){grid-template-rows:118px 24px minmax(0,1fr) auto}.workspace-timeline:has(>.download-receipt){min-height:154px}}

/* --------------------------------------------------------------------------
   v7.5.2 browser-acceptance corrections (docs/v752-verification/browser/)
   -------------------------------------------------------------------------- */
/* Accessible text that is not drawn (the immersive workspaces keep their visible brand bar). */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
/* Wide reference tables scroll inside their own box instead of widening the page. */
.table-scroll { max-width: 100%; overflow-x: auto; }
/* Long result badges wrap on narrow screens (overflowed at 320 CSS px). */
@media (max-width: 480px) { .badge { white-space: normal; max-width: 100%; overflow-wrap: anywhere; } }
/* Keyboard focus on form controls stays visible where workspace themes restyle borders. */
:is(input, select, textarea):focus-visible { outline: 2px solid var(--cyan-2); outline-offset: 2px; }