/* Entrance and laboratory layout. All case values and native controls are retained. */
.acid-base-page .ab-hub-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-template-areas: "copy scene" "next scene" "about scene";
  align-content: center;
  gap: 24px 32px;
  min-height: 450px;
  padding: clamp(24px,3vw,42px);
  overflow: hidden;
  border: 1px solid #c5ab6f66;
  border-radius: 8px 28px 8px 8px;
  background: #09151e;
  box-shadow: inset 0 1px #f5df9e22, 0 20px 50px #0003;
}
.acid-base-page .ab-hub-stage::after {
  position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none;
  background: linear-gradient(90deg,#08151df5 0%,#08151ded 30%,#08151d90 53%,#08151d0a 80%),linear-gradient(0deg,#08151dc9,transparent 55%);
}
.acid-base-page .ab-hub-stage :is(.ab-hub-banner,.ab-hub-opening) { display: contents; }
.acid-base-page .ab-hub-stage .ab-hub-banner::before,
.acid-base-page .ab-hub-stage .ab-hub-banner::after { content: none; }
.acid-base-page .ab-hub-stage .ab-hub-copy { display: block; grid-area: copy; min-width: 0; }
.acid-base-page .ab-hub-stage .ab-hub-copy :is(.ab-title,.ab-ornament) { max-width: none; padding: 0; }
.acid-base-page .ab-hub-stage .ab-hub-copy .ab-title { margin: 12px 0 18px; font-size: clamp(2.3rem,4.5vw,3.8rem); line-height: 1.05; text-shadow: 0 3px 24px #0009; overflow-wrap: anywhere; }
.acid-base-page .ab-hub-stage .ab-hub-progress { width: min(100%,300px); margin: 0; }
.acid-base-page .ab-hub-stage .ab-lab {
  display: block; position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; aspect-ratio: auto; box-shadow: none;
}
.acid-base-page .ab-hub-stage .ab-lab-art { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 80% center; transform-origin: 75% 50%; }
.acid-base-page .ab-hub-stage .ab-next-case {
  display: flex; flex-direction: column; align-items: flex-start; grid-area: next; position: relative; min-width: 0;
  max-width: 25rem; margin: 0; padding: 0 0 0 18px; border: 0; border-left: 2px solid #d9bf7a;
  border-radius: 0; background: none; box-shadow: none;
}
.acid-base-page .ab-hub-stage .ab-balance-seal { display: none; }
.acid-base-page .ab-hub-stage .ab-next-label { margin-bottom: 8px; color: #e1c88a; font-size: .9rem; }
.acid-base-page .ab-hub-stage .ab-next-number { font-size: .78rem; color: #b9cbd0; }
.acid-base-page .ab-hub-stage .ab-next-case h2 { max-width: 100%; margin: 4px 0; font-size: 1.65rem; line-height: 1.15; color: #f1e6cb; overflow-wrap: anywhere; }
.acid-base-page .ab-hub-stage .ab-next-case p { margin: 0 0 12px; font-size: .95rem; line-height: 1.5; color: #c3d2d5; }
.acid-base-page .ab-hub-stage .ab-next-case .ab-btn-primary { width: auto; min-width: min(100%,220px); min-height: 44px; max-width: 100%; margin: 4px 0 0; padding: 12px 24px; }
.acid-base-page .ab-hub-stage .ab-hub-heading { grid-area: about; min-width: 0; }
.acid-base-page .ab-hub-about { color: #c6d6d7; font-family: var(--nql-font-body); }
.acid-base-page .ab-hub-about summary { min-height: 44px; padding: 10px 0; color: #b8d8db; cursor: pointer; font-size: .9rem; }
.acid-base-page .ab-hub-about .ab-lead { margin: 8px 0 0; font-size: .95rem; line-height: 1.6; color: #c6d6d7; max-width: 60ch; }

/* Each column reads downwards like a laboratory report, including during acts. */
.acid-base-page:is(.nq-chamber-workspace,.nq-chamber-expansion) .ab-context .ab-gas-grid,
.acid-base-page .ab-context .ab-gas-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,14rem),1fr)); gap: 12px;
  min-width: 0; margin: 0; padding: 0; border: 0; background: none;
}
.acid-base-page .ab-lab-group { min-width: 0; padding: 10px 12px; border: 1px solid #83aeb33b; border-radius: 6px; background: #091820ed; }
.acid-base-page .ab-lab-group h2 { margin: 0 0 8px; color: #d3c28f; font: 500 .85rem/1.4 var(--nql-font-body); }
.acid-base-page:is(.nq-chamber-workspace,.nq-chamber-expansion) .ab-lab-group .ab-gas,
.acid-base-page .ab-lab-group .ab-gas {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,auto) auto; align-items: baseline;
  gap: 8px; min-width: 0; min-height: 31px; margin: 0; padding: 6px 0;
  border: 0; border-bottom: 1px solid #a9c7ca19; border-radius: 0; background: none; box-shadow: none; text-align: left;
}
.acid-base-page .ab-lab-group .ab-gas:last-child { border-bottom: 0; }
.acid-base-page .ab-lab-group .ab-gas :is(span,strong,em) { margin: 0; padding: 0; min-width: 0; }
.acid-base-page .ab-lab-group .ab-gas span { color: #bdcfd3; font: 400 .9rem/1.4 var(--nql-font-body); }
.acid-base-page .ab-lab-group .ab-gas strong { justify-self: end; color: #e2eff0; font: 500 1.05rem/1.3 var(--nql-font-instrument); font-variant-numeric: tabular-nums; }
.acid-base-page .ab-lab-group .ab-gas em { color: #9fb7bd; font: 400 .75rem/1.4 var(--nql-font-body); white-space: nowrap; }

@media (min-width:1100px) and (pointer:fine) {
  .acid-base-page.nq-chamber-expansion[data-abx-stage="intro"] .ab-context,
  .acid-base-page.nq-chamber-expansion[data-abx-stage="intro"] .ab-context:has(:is(.ab-patient-portrait,.abx-patient-portrait):not([hidden])) {
    grid-template-areas: "identity portrait gas" "story portrait gas";
    grid-template-columns: minmax(0,1fr) clamp(110px,13vw,180px) minmax(220px,260px);
    grid-template-rows: auto 1fr; align-items: start; gap: 16px 24px;
  }
  .acid-base-page.nq-chamber-expansion[data-abx-stage="intro"] .ab-context .ab-gas-grid { grid-area: gas; grid-row: 1 / 3; grid-template-columns: minmax(0,1fr); gap: 8px; }
  .acid-base-page.nq-chamber-expansion[data-abx-stage="intro"] .ab-context .ab-patient-portrait { align-self: end; }
}
@media (max-width:960px) {
  .acid-base-page .ab-hub-stage { grid-template-columns: minmax(0,1fr); grid-template-areas: "copy" "next" "about"; min-height: 520px; padding-top: 170px; gap: 20px; }
  .acid-base-page .ab-hub-stage::after { background: linear-gradient(0deg,#08151d 0%,#08151df5 40%,#08151d90 66%,#08151d33); }
  .acid-base-page .ab-hub-stage .ab-lab-art { object-position: 70% top; }
  .acid-base-page .ab-hub-stage .ab-next-case { max-width: none; }
  .acid-base-page .ab-hub-stage .ab-next-case .ab-btn-primary { min-width: min(100%,240px); }
}
@media (min-width:1100px) and (max-height:780px) and (pointer:fine) {
  .acid-base-page.nq-chamber-expansion[data-abx-stage="intro"] .ab-context { padding: 20px; gap: 12px 20px; }
  .acid-base-page .ab-lab-group { padding: 8px 10px; }
  .acid-base-page:is(.nq-chamber-workspace,.nq-chamber-expansion) .ab-lab-group .ab-gas { min-height: 27px; padding: 4px 0; }
}
/* The desktop frame stops at 760px even when the monitor is taller. */
@media (min-width:961px) and (pointer:fine) {
  .acid-base-page.nq-chamber-workspace .ab-scroll:not(.nql-intro):not(.nql-cardflow) .ab-context .ab-gas-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px;
  }
}
@media (prefers-reduced-motion:no-preference) {
  .acid-base-page .ab-hub-stage .ab-lab-art { animation: ab-entrance-camera 28s ease-in-out infinite alternate; animation-play-state: paused; }
  .acid-base-page .ab-hub-stage [data-motion="running"] .ab-lab-art { animation-play-state: running; }
  @keyframes ab-entrance-camera { from { transform: scale(1.02); } to { transform: scale(1.08) translateX(-1%); } }
}
@media (prefers-reduced-motion:reduce) {
  .acid-base-page .ab-hub-stage .ab-lab-art { animation: none; transform: none; }
}