/*
  Inventory Lab readability layer.
  This file intentionally sits beside the page styles and overrides only this page.
  The shared Workbench stylesheet in vendor/workbench remains untouched.
*/

/* Give the guided explanation enough vertical room for larger copy. */
.guided-shell {
  grid-template-rows: minmax(0, 1fr) 208px;
}

/* Navigation and page-level guidance. */
.lab-brand strong { font-size: 13px; }
.lab-brand span { font-size: 10px; line-height: 1.25; }
.lab-model { font-size: 10px; }
.lab-theme-label,
.lab-mode-help { font-size: 10.5px; }
.lesson-tab { font-size: 11px; }

/* Guided lesson heading and description. */
.guided-stage-head {
  padding: 12px 15px 10px;
}
.guided-stage-head h1 {
  font-size: clamp(21px, 1.45vw, 29px);
}
.guided-stage-head p {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.42;
}

/* Step explanation and trace copy. */
.step-explanation,
.step-trace-panel,
.step-controls {
  padding: 10px;
}
.step-explanation {
  gap: 6px;
}
.step-explanation h2 {
  font-size: 16px;
  line-height: 1.18;
}
.step-explanation p {
  font-size: 12px;
  line-height: 1.48;
}
.step-trace-panel header strong {
  font-size: 10px;
}
.step-trace-panel header span {
  font-size: 10.5px;
  line-height: 1.3;
}
.trace-node {
  padding: 7px;
  gap: 7px;
}
.trace-index {
  width: 22px;
  height: 22px;
  font-size: 10px;
}
.trace-node strong {
  font-size: 11.5px;
  line-height: 1.22;
}
.trace-node small {
  font-size: 10px;
  line-height: 1.28;
}
.step-count > span,
.step-controls .wb-micro {
  font-size: 10px;
}
.step-buttons button {
  font-size: 11.5px;
}

/* Shared visual vocabulary on the GUI side. */
.card-label {
  font-size: 9.5px;
}
.entity-card h3,
.procedure-card h3,
.health-card h3 {
  font-size: 16px;
}
.entity-card code {
  font-size: 10px;
  line-height: 1.25;
}
.value-row span {
  font-size: 11px;
}
.value-row strong {
  font-size: 23px;
}

/* Address walkthrough. */
.mini-data-card span {
  font-size: 10px;
}
.mini-data-card strong {
  font-size: 14.5px;
}
.address-node small {
  font-size: 9px;
}
.address-node strong {
  font-size: 12.25px;
}
.address-node em {
  font-size: 10px;
  line-height: 1.25;
}
.read-output span {
  font-size: 11.5px;
  line-height: 1.4;
}

/* Transfer and shared-stock walkthroughs. */
.call-stack-row,
.shared-config {
  font-size: 10.5px;
}
.gate-card {
  font-size: 10.75px;
  line-height: 1.3;
}
.item-packet,
.shared-packet,
.gameplay-packet {
  font-size: 11px;
}

/* Item properties and gameplay. */
.procedure-card p {
  font-size: 11.25px;
  line-height: 1.42;
}
.property-list > div {
  font-size: 10.75px;
}
.health-readout {
  font-size: 10.5px;
}

/* Desync comparison. */
.desync-lane header strong {
  font-size: 12px;
}
.authority-box span {
  font-size: 9.75px;
}
.reader-stack span {
  font-size: 10.25px;
}
.reader-stack strong {
  font-size: 17px;
}
.desync-lane > p {
  font-size: 10.5px;
  line-height: 1.4;
}

/* Hands-on mode: larger instructions and visual labels without enlarging code. */
.sandbox-controls,
.sandbox-visual {
  padding: 11px;
}
.sandbox-controls header h2,
.sandbox-visual header h2 {
  font-size: 16px;
  line-height: 1.2;
}
.sandbox-controls header p {
  font-size: 11.5px;
  line-height: 1.42;
}
.sandbox-controls .wb-field label,
.share-toggle,
.sandbox-message {
  font-size: 11px;
  line-height: 1.4;
}

/* Runtime values remain compact, but their labels should not require squinting. */
.runtime-panel header strong,
.sandbox-runtime header strong {
  font-size: 9.5px;
}
.runtime-panel header span {
  font-size: 9px;
}
.runtime-cell span {
  font-size: 9.75px;
}
.runtime-cell strong {
  font-size: 14px;
}

@media (max-width: 1280px) {
  .guided-shell { grid-template-rows: minmax(0, 1fr) 216px; }
  .guided-stage-head p { font-size: 11.5px; }
  .step-explanation p { font-size: 11.5px; }
  .trace-node strong { font-size: 11px; }
  .trace-node small { font-size: 9.75px; }
}