/* =====================================================================
   ENTERPRISE LAB — the instrument surface
   =====================================================================
   Curious Current is a light page: warm canvas, sea glass, soft shadow.
   The Lab is a dark instrument installed on that page rather than a
   second website. It sits inside the site's own .shell container, keeps
   the site's nav, footer, fonts and spacing scale, and borrows the
   existing --media-well-bg as the starting point for its own surface.

   Everything below is scoped under .lab so it cannot reach the rest of
   Curious Current.

   The visual interest is meant to come from state, not decoration:
   stage lights that move because work moved, telemetry that fills as
   calls return, evidence that highlights when it is cited. There are no
   ambient animations, no gradient washes and no motion that is not
   reporting something.
   ===================================================================== */

.lab {
  /* ---- surface ---- */
  --lab-void: #0a0d15;
  --lab-bay: #121826;
  --lab-bay-raised: #182031;
  --lab-bay-sunken: #0d1220;
  --lab-edge: rgba(139, 183, 255, 0.13);
  --lab-edge-bright: rgba(139, 183, 255, 0.32);
  --lab-edge-hot: rgba(69, 217, 210, 0.55);

  /* ---- ink ---- */
  /* Contrast against the four Lab surfaces, lowest first:
       ink   13.99   dim   6.05   faint  4.53
     `faint` was #626c81 and measured 3.09 against --lab-bay-raised, which is
     below AA for the small text it carries. It is lightened here rather than
     restricted to decoration, because it labels real things. */
  --lab-ink: #e9eef8;
  --lab-ink-dim: #939eb5;
  --lab-ink-faint: #7d879f;

  /* ---- signal ---- */
  --lab-aqua: #45d9d2;
  --lab-violet: #9a8bff;
  --lab-amber: #e8b45c;
  --lab-rose: #ff7d97;
  --lab-green: #46d485;

  --lab-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --lab-track: 0.14em;
}

/* ===================== the slab ===================== */

.lab-slab {
  position: relative;
  background: var(--lab-void);
  border: 1px solid var(--lab-edge);
  border-radius: var(--radius-tray);
  box-shadow:
    0 40px 90px rgba(18, 22, 38, 0.34),
    0 12px 30px rgba(18, 22, 38, 0.22),
    inset 0 1px 0 rgba(139, 183, 255, 0.16);
  color: var(--lab-ink);
  overflow: hidden;
  font-family: var(--font-body);
}

/* A single hairline of circuitry across the top of the slab: enough to
   tie the Lab to the motherboard language of the rest of the site
   without repeating the full field of traces. */
.lab-slab::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--lab-edge-bright) 18%, var(--lab-edge-hot) 34%,
    var(--lab-edge-bright) 52%, transparent 78%);
  pointer-events: none;
}

.lab-pad { padding: clamp(20px, 3.4vw, 44px); }

/* ===================== primitives ===================== */

.lab-eyebrow {
  font-family: var(--lab-mono);
  font-size: 0.7rem;
  letter-spacing: var(--lab-track);
  text-transform: uppercase;
  color: var(--lab-ink-faint);
  margin: 0;
}

.lab-mono { font-family: var(--lab-mono); font-variant-numeric: tabular-nums; }

.lab-title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--line-heading);
  letter-spacing: -0.01em;
  margin: 0;
}

.lab h1.lab-title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); }
.lab h2.lab-title { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); }
.lab h3.lab-title { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); }

.lab-lede { color: var(--lab-ink-dim); line-height: var(--line-body); margin: 0; }
.lab-note { color: var(--lab-ink-dim); font-size: 0.86rem; line-height: 1.55; margin: 0; }

.lab-rule { height: 1px; background: var(--lab-edge); border: 0; margin: 0; }

/* ---- status chips. Never colour alone: a glyph and a word carry it. ---- */
.chipm {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.7em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--lab-edge-bright);
  background: rgba(139, 183, 255, 0.06);
  font-family: var(--lab-mono);
  font-size: 0.68rem;
  letter-spacing: var(--lab-track);
  text-transform: uppercase;
  color: var(--lab-ink-dim);
  white-space: nowrap;
}
.chipm__glyph { font-size: 0.9em; line-height: 1; }

.chipm--live      { color: var(--lab-green); border-color: rgba(70, 212, 133, 0.45); background: rgba(70, 212, 133, 0.09); }
.chipm--simulated { color: var(--lab-amber); border-color: rgba(232, 180, 92, 0.45); background: rgba(232, 180, 92, 0.09); }
.chipm--concept   { color: var(--lab-ink-faint); border-style: dashed; }
.chipm--pass      { color: var(--lab-green); border-color: rgba(70, 212, 133, 0.45); }
.chipm--warn      { color: var(--lab-amber); border-color: rgba(232, 180, 92, 0.45); }
.chipm--fail      { color: var(--lab-rose); border-color: rgba(255, 125, 151, 0.5); }

/* ---- buttons ---- */
.labbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-control);
  border: 1px solid var(--lab-edge-bright);
  background: var(--lab-bay-raised);
  color: var(--lab-ink);
  font-family: var(--lab-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: var(--lab-track);
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-glass),
              border-color var(--duration-fast) var(--ease-glass),
              transform var(--duration-fast) var(--ease-glass);
}
.labbtn:hover:not(:disabled) { background: #1e2739; border-color: var(--lab-edge-hot); transform: var(--lift-hover); }
.labbtn:active:not(:disabled) { transform: var(--lift-pressed); }
.labbtn:disabled { opacity: 0.42; cursor: not-allowed; }

.labbtn--primary {
  background: linear-gradient(180deg, rgba(69, 217, 210, 0.2), rgba(69, 217, 210, 0.08));
  border-color: var(--lab-edge-hot);
  color: #d6fffc;
}
.labbtn--primary:hover:not(:disabled) { background: linear-gradient(180deg, rgba(69, 217, 210, 0.3), rgba(69, 217, 210, 0.13)); }

.labbtn--approve {
  background: linear-gradient(180deg, rgba(70, 212, 133, 0.22), rgba(70, 212, 133, 0.08));
  border-color: rgba(70, 212, 133, 0.55);
  color: #d3ffe6;
}
.labbtn--quiet { background: transparent; color: var(--lab-ink-dim); }
.labbtn--quiet:hover:not(:disabled) { color: var(--lab-ink); }

.labbtn--wide { width: 100%; }

/* Focus is visible on every control, on a dark ground where the site's
   own focus ring would disappear. */
.lab :focus-visible {
  outline: 2px solid var(--lab-aqua);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===================== registry: the rack ===================== */

.rack { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

.bay {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: clamp(16px, 2.4vw, 32px);
  align-items: start;
  padding: clamp(18px, 2.4vw, 28px);
  background: var(--lab-bay);
  border: 1px solid var(--lab-edge);
  border-radius: var(--radius-card);
  transition: border-color var(--duration-medium) var(--ease-glass),
              background var(--duration-medium) var(--ease-glass);
}
.bay--operational { background: var(--lab-bay-raised); }
.bay--operational:hover { border-color: var(--lab-edge-hot); }
.bay--development { opacity: 0.86; }

.bay__index {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--lab-ink-faint);
  letter-spacing: -0.03em;
}
.bay--operational .bay__index { color: var(--lab-aqua); }

.bay__slot { font-family: var(--lab-mono); font-size: 0.62rem; letter-spacing: var(--lab-track);
             text-transform: uppercase; color: var(--lab-ink-faint); margin-top: 6px; }

.bay__body { min-width: 0; }
.bay__name { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
             font-weight: 700; margin: 0 0 2px; }
.bay__registry { font-family: var(--lab-mono); font-size: 0.66rem; letter-spacing: var(--lab-track);
                 text-transform: uppercase; color: var(--lab-ink-faint); margin: 0 0 10px; }
.bay__desc { color: var(--lab-ink-dim); line-height: 1.55; margin: 0 0 12px; font-size: 0.95rem; }

.bay__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.bay__side { display: grid; gap: 10px; justify-items: end; align-content: start; }

.bay__roles { font-size: 0.78rem; color: var(--lab-ink-dim); line-height: 1.5; margin: 10px 0 0; }

/* ===================== console layout ===================== */

.console__head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 20px;
}
.console__ident { min-width: 0; }
.console__readouts { display: flex; flex-wrap: wrap; gap: 8px; }

/* The provider readout: two hard facts a reviewer needs before they
   trust anything the machine says. */
.readout {
  display: grid;
  gap: 3px;
  padding: 9px 14px;
  border: 1px solid var(--lab-edge);
  border-radius: var(--radius-control);
  background: var(--lab-bay-sunken);
  min-width: 168px;
}
.readout__label { font-family: var(--lab-mono); font-size: 0.6rem; letter-spacing: var(--lab-track);
                  text-transform: uppercase; color: var(--lab-ink-faint); }
.readout__value { font-size: 0.86rem; color: var(--lab-ink); line-height: 1.35; }

.console__grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}

.panel {
  background: var(--lab-bay);
  border: 1px solid var(--lab-edge);
  border-radius: var(--radius-card);
  padding: clamp(16px, 2vw, 24px);
}
.panel + .panel { margin-top: 14px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

/* ---- scenario selector ---- */
.scen { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.scen__btn {
  display: grid;
  gap: 5px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: var(--lab-bay-sunken);
  border: 1px solid var(--lab-edge);
  border-radius: var(--radius-control);
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: border-color var(--duration-fast) var(--ease-glass),
              background var(--duration-fast) var(--ease-glass);
}
.scen__btn:hover { border-color: var(--lab-edge-bright); background: var(--lab-bay-raised); }
.scen__btn[aria-pressed="true"] {
  border-color: var(--lab-edge-hot);
  background: linear-gradient(180deg, rgba(69, 217, 210, 0.13), rgba(69, 217, 210, 0.04));
}
/* Selection is announced by the check as well as by the border, so it does
   not depend on colour. */
.scen__btn[aria-pressed="true"] .scen__mark::after { content: "\2713"; color: var(--lab-aqua); }
.scen__mark { font-family: var(--lab-mono); font-size: 0.7rem; color: var(--lab-ink-faint); }
.scen__title { font-weight: 600; font-size: 0.95rem; }
.scen__desc { font-size: 0.82rem; color: var(--lab-ink-dim); line-height: 1.5; }
.scen__foot { display: flex; gap: 10px; align-items: center; font-family: var(--lab-mono);
              font-size: 0.62rem; letter-spacing: var(--lab-track); text-transform: uppercase;
              color: var(--lab-ink-faint); }

/* ===================== execution trace ===================== */

.trace { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.trace__stage {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  position: relative;
}
/* The connecting spine. Drawn per row rather than as one line so that a
   stage can be removed without leaving a gap in it. */
.trace__stage:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 26px;
  bottom: -4px;
  width: 1px;
  background: var(--lab-edge);
}

.trace__light {
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 1px solid var(--lab-edge-bright);
  background: var(--lab-bay-sunken);
  display: grid; place-items: center;
  font-family: var(--lab-mono); font-size: 0.62rem;
  color: var(--lab-ink-faint);
  position: relative; z-index: 1;
  flex-shrink: 0;
}
.trace__stage[data-status="active"]  .trace__light { border-color: var(--lab-aqua); color: var(--lab-aqua); }
.trace__stage[data-status="done"]    .trace__light { border-color: rgba(70, 212, 133, 0.6); color: var(--lab-green); }
.trace__stage[data-status="failed"]  .trace__light { border-color: rgba(255, 125, 151, 0.6); color: var(--lab-rose); }
.trace__stage[data-status="skipped"] .trace__light { border-style: dashed; }
.trace__stage[data-status="pending"] .trace__light { opacity: 0.5; }

/* One pulse, only while a stage is genuinely working. It stops the moment
   the stage reports done, so it is reporting state rather than filling
   time. Reduced motion drops it entirely. */
.trace__stage[data-status="active"] .trace__light::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--lab-aqua);
  opacity: 0;
  animation: labPulse 1.4s var(--ease-glass) infinite;
}
@keyframes labPulse {
  0%   { transform: scale(0.72); opacity: 0.75; }
  100% { transform: scale(1.32); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .trace__stage[data-status="active"] .trace__light::after { animation: none; opacity: 0.5; }
}

/* The label and its detail are both spans inside one grid cell, so each
   has to declare its own line or the detail runs on from the label. */
.trace__label { display: block; font-size: 0.92rem; font-weight: 500; }
.trace__stage[data-status="pending"] .trace__label { color: var(--lab-ink-faint); }
.trace__detail { display: block; font-family: var(--lab-mono); font-size: 0.72rem;
                 color: var(--lab-ink-dim); margin-top: 3px; word-break: break-word; }
.trace__time { font-family: var(--lab-mono); font-size: 0.68rem; color: var(--lab-ink-faint);
               font-variant-numeric: tabular-nums; }

/* ---- tool call log ---- */
.calls {
  margin: 14px 0 0;
  padding: 12px;
  background: var(--lab-bay-sunken);
  border: 1px solid var(--lab-edge);
  border-radius: var(--radius-control);
  max-height: 260px;
  overflow-y: auto;
  font-family: var(--lab-mono);
  font-size: 0.72rem;
  line-height: 1.6;
}
.calls__row { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 10px; padding: 3px 0;
              border-bottom: 1px solid rgba(139, 183, 255, 0.06); }
.calls__row:last-child { border-bottom: 0; }
.calls__seq { color: var(--lab-ink-faint); }
.calls__name { color: var(--lab-ink); }
.calls__sub { color: var(--lab-ink-dim); display: block; word-break: break-word; }
.calls__ms { color: var(--lab-ink-faint); font-variant-numeric: tabular-nums; }
.calls__row[data-status="denied"] .calls__name,
.calls__row[data-status="error"]  .calls__name { color: var(--lab-rose); }
.calls__row[data-status="limited"] .calls__name { color: var(--lab-amber); }

/* ===================== the finding ===================== */

.finding { display: grid; gap: 18px; }

.finding__head { display: grid; gap: 12px; }
.finding__headline {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

.finding__conf { display: flex; align-items: center; gap: 14px; }
.conf__bar { flex: 1; height: 5px; background: var(--lab-bay-sunken); border-radius: var(--radius-pill);
             overflow: hidden; border: 1px solid var(--lab-edge); }
.conf__fill { height: 100%; background: linear-gradient(90deg, var(--lab-violet), var(--lab-aqua)); }
.conf__n { font-family: var(--lab-mono); font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.why { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.why__item { display: grid; grid-template-columns: 14px 1fr; gap: 11px; align-items: start; }
.why__dot { color: var(--lab-aqua); font-family: var(--lab-mono); line-height: 1.6; }
.why__claim { line-height: 1.6; margin: 0; }
.why__cites { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.cite {
  font-family: var(--lab-mono);
  font-size: 0.66rem;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--lab-edge-bright);
  background: rgba(139, 183, 255, 0.07);
  color: var(--lab-ink-dim);
  cursor: pointer;
}
.cite:hover { border-color: var(--lab-edge-hot); color: var(--lab-ink); }

.action-card {
  padding: 16px 18px;
  border: 1px solid var(--lab-edge-bright);
  border-radius: var(--radius-control);
  background: linear-gradient(180deg, rgba(154, 139, 255, 0.11), rgba(154, 139, 255, 0.03));
  display: grid;
  gap: 10px;
}

/* ===================== before / after ===================== */

.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.ba__col { background: var(--lab-bay-sunken); border: 1px solid var(--lab-edge);
           border-radius: var(--radius-control); padding: 14px 16px; }
.ba__arrow { display: grid; place-items: center; color: var(--lab-ink-faint); font-size: 1.2rem; }
.ba__row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
           font-size: 0.86rem; border-bottom: 1px solid rgba(139, 183, 255, 0.06); }
.ba__row:last-child { border-bottom: 0; }
.ba__k { color: var(--lab-ink-faint); }
.ba__v { font-family: var(--lab-mono); font-variant-numeric: tabular-nums; }
/* A changed value is marked with a caret as well as a colour. */
.ba__row--changed .ba__v { color: var(--lab-aqua); }
.ba__row--changed .ba__v::before { content: "\203A "; }

/* ===================== tabs / drawers ===================== */

.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--lab-edge);
        padding-bottom: 12px; margin-bottom: 16px; }
.tabs__btn {
  padding: 7px 13px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--lab-ink-faint);
  font-family: var(--lab-mono);
  font-size: 0.68rem;
  letter-spacing: var(--lab-track);
  text-transform: uppercase;
  cursor: pointer;
}
.tabs__btn:hover { color: var(--lab-ink-dim); }
.tabs__btn[aria-selected="true"] { color: var(--lab-ink); border-color: var(--lab-edge-bright);
                                   background: var(--lab-bay-sunken); }

.evid { display: grid; gap: 8px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.evid__row {
  border: 1px solid var(--lab-edge);
  border-radius: var(--radius-control);
  background: var(--lab-bay-sunken);
  overflow: hidden;
}
.evid__row--cited { border-color: var(--lab-edge-hot); }
.evid__sum { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer;
             font-family: var(--lab-mono); font-size: 0.74rem; list-style: none; }
.evid__sum::-webkit-details-marker { display: none; }
.evid__id { color: var(--lab-ink); }
.evid__type { color: var(--lab-ink-faint); }
.evid__by { margin-left: auto; color: var(--lab-ink-faint); font-size: 0.68rem; }
.evid__pre { margin: 0; padding: 12px 14px; border-top: 1px solid var(--lab-edge);
             font-family: var(--lab-mono); font-size: 0.72rem; line-height: 1.55;
             color: var(--lab-ink-dim); overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

.evals { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.eval__row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
             padding: 11px 14px; background: var(--lab-bay-sunken); border: 1px solid var(--lab-edge);
             border-radius: var(--radius-control); }
.eval__name { font-weight: 600; font-size: 0.9rem; margin: 0 0 3px; }
.eval__detail { color: var(--lab-ink-dim); font-size: 0.83rem; line-height: 1.5; margin: 0; }

.kv { display: grid; gap: 0; margin: 0; }
.kv__row { display: grid; grid-template-columns: minmax(140px, 30%) 1fr; gap: 14px; padding: 9px 0;
           border-bottom: 1px solid rgba(139, 183, 255, 0.07); font-size: 0.87rem; }
.kv__row:last-child { border-bottom: 0; }
.kv__k { color: var(--lab-ink-faint); font-family: var(--lab-mono); font-size: 0.7rem;
         letter-spacing: var(--lab-track); text-transform: uppercase; padding-top: 2px; }
.kv__v { color: var(--lab-ink); line-height: 1.55; word-break: break-word; }

.limits { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.limits__item { display: grid; grid-template-columns: 14px 1fr; gap: 11px; color: var(--lab-ink-dim);
                font-size: 0.9rem; line-height: 1.55; }
.limits__dot { color: var(--lab-amber); }

/* ===================== states ===================== */

.state { display: grid; gap: 12px; place-items: center; text-align: center; padding: clamp(28px, 5vw, 64px) 20px; }
.state__icon { font-family: var(--lab-mono); font-size: 1.6rem; color: var(--lab-ink-faint); }
.state--error { border: 1px solid rgba(255, 125, 151, 0.35); border-radius: var(--radius-card);
                background: rgba(255, 125, 151, 0.05); }
.state--error .state__icon { color: var(--lab-rose); }

.lab-skeleton {
  background: linear-gradient(90deg, var(--lab-bay) 0%, var(--lab-bay-raised) 50%, var(--lab-bay) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-control);
  animation: labSweep 1.3s linear infinite;
}
@keyframes labSweep { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .lab-skeleton { animation: none; } }

.lab [hidden] { display: none !important; }

.lab-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===================== responsive ===================== */

/* The console is two columns on a laptop and one on a tablet. Panels are
   recomposed rather than scaled: a systems dashboard squeezed sideways is
   worse than the same panels stacked. */
@media (max-width: 1080px) {
  .console__grid { grid-template-columns: minmax(0, 1fr); }
  .panel + .panel { margin-top: 14px; }
}

@media (max-width: 720px) {
  /* Capability chips carry full sentences. nowrap keeps a short status chip
     from breaking mid-label, but on a narrow screen it pushes the long ones
     past the slab's edge, where overflow:hidden clips the text off. Below
     this width they wrap instead. */
  .chipm { white-space: normal; max-width: 100%; }

  .bay { grid-template-columns: 56px 1fr; }
  .bay__side { grid-column: 1 / -1; justify-items: stretch; }
  .bay__side .labbtn { width: 100%; }
  .bay__index { font-size: 1.7rem; }

  .console__head { align-items: flex-start; }
  .console__readouts { width: 100%; }
  .readout { flex: 1 1 150px; min-width: 0; }

  .ba { grid-template-columns: 1fr; }
  .ba__arrow { transform: rotate(90deg); padding: 2px 0; }

  .trace__stage { grid-template-columns: 22px 1fr; }
  .trace__time { grid-column: 2; }

  .calls { max-height: 200px; }
  .evid { max-height: none; }
}