/* ============================================================================
   Classic Lab — readability & layout-stability overlay
   ----------------------------------------------------------------------------
   Scoped ENTIRELY under `body.classic-lab .classic-root` so it only affects
   classic-lab.html. classic-lab.css is shared by 6 lab pages and the flood-nav
   is shared site-wide, so neither is edited here — this sheet is loaded last and
   wins by source order without touching any shared rule.

   Goals (Classic Lab only, for now):
     1. Larger, comfortable typography with a clear, bold heading hierarchy.
     2. Layout stability — text wraps instead of clipping; text panels flex to
        hold the larger text. Scroll viewports (overflow:auto) and WebGL/shape
        canvases keep their fixed sizes on purpose: relaxing them would break
        scrolling or blur/desync the canvases.
     3. Multi-column internal rows collapse to a centered single column on phones.
   ========================================================================== */

/* ---- 1. Typography scale-up ------------------------------------------------ */

/* Inherited baseline: anything that does not set its own size scales up from
   the old 16px default to a comfortable 18px with relaxed line-height. */
body.classic-lab .classic-root {
  font-size: 18px;
  line-height: 1.6;
}

/* Prose / body copy and the readout text users actually read at length. */
body.classic-lab .cl-panel-body,
body.classic-lab .classic-root p,
body.classic-lab .classic-root li,
body.classic-lab .cl-panel-body label,
body.classic-lab .currency-node-readout,
body.classic-lab .lot-sizing-hint,
body.classic-lab .live-trades-empty,
body.classic-lab .live-trades-meta,
body.classic-lab .ehr-label,
body.classic-lab .ehr-val {
  font-size: 18px;
  line-height: 1.6;
}

/* Headings — strong hierarchy, bold weight, tighter heading leading. */
body.classic-lab .cl-panel-head h2,
body.classic-lab .panel-head h2,
body.classic-lab .classic-root h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.2px;
}

body.classic-lab .classic-root h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

body.classic-lab .classic-root h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

/* Secondary / supporting text — lifted off the tiny 12px floor. */
body.classic-lab .cl-panel-head .sub,
body.classic-lab .classic-root .sub,
body.classic-lab .classic-root .subtle,
body.classic-lab .classic-root .pill,
body.classic-lab .classic-root .stats-ref-link {
  font-size: 15px;
  line-height: 1.5;
}

/* The shared panel-head sub-label is nowrap + ellipsis-clipped at 9px; let it
   wrap and show in full now that it's larger. */
body.classic-lab .cl-panel-head .sub {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  min-width: 0;
}

/* Interactive controls — easier to read and tap. */
body.classic-lab .classic-root button,
body.classic-lab .classic-root select,
body.classic-lab .classic-root input,
body.classic-lab .classic-root textarea {
  font-size: 16px;
  line-height: 1.4;
}

/* Lift the smallest micro-text (8px code dumps) to a legible floor while
   keeping their scroll caps. */
body.classic-lab .export-pre,
body.classic-lab .ag-code {
  font-size: 13px;
  line-height: 1.5;
}

/* ---- 2. Layout stabilization ---------------------------------------------- */

/* Never let a long token (pair string, URL, hash) clip off the edge. Scoped to
   the text-bearing elements rather than a universal `*`, so compact metric
   strings and code-like blocks keep their intended rendering. */
body.classic-lab .classic-root,
body.classic-lab .cl-panel,
body.classic-lab .cl-panel-body,
body.classic-lab .cl-panel-body p,
body.classic-lab .cl-panel-body li,
body.classic-lab .cl-panel-body label,
body.classic-lab .cl-panel-body td,
body.classic-lab .cl-panel-body th,
body.classic-lab .cl-panel-head .sub,
body.classic-lab .currency-node-readout,
body.classic-lab .lot-sizing-hint,
body.classic-lab .live-trades-empty,
body.classic-lab .live-trades-meta {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Text panels flex to hold the larger type rather than enforcing a fixed
   height. (Inner scroll viewports keep their own max-height + overflow.) */
body.classic-lab .cl-panel,
body.classic-lab .cl-panel-body {
  height: auto;
  min-height: 0;
}

/* ---- 3. Mobile / tablet: collapse multi-column rows to a centered stack ---- */

@media (max-width: 760px) {
  body.classic-lab .classic-root {
    align-items: stretch;
  }

  /* Internal multi-column grids → single column. */
  body.classic-lab .stats-grid,
  body.classic-lab .stats-grid-dense,
  body.classic-lab .forge-grid,
  body.classic-lab .gm-grid,
  body.classic-lab .matrix-grid,
  body.classic-lab .cl-pricing-grid,
  body.classic-lab .ag-stat-grid,
  body.classic-lab .mow-grid,
  body.classic-lab .sl-grid,
  body.classic-lab .radar-board,
  body.classic-lab .radar-ps-row {
    grid-template-columns: 1fr !important;
  }

  /* Horizontal flex rows → vertical, full-width, centered stack. */
  body.classic-lab .currency-picker-row,
  body.classic-lab .lot-sizing-row,
  body.classic-lab .cl-panel-head {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  body.classic-lab .cl-panel-head .spacer {
    display: none;
  }

  /* Controls stretch full width so they're easy to tap. */
  body.classic-lab .classic-root select,
  body.classic-lab .classic-root input,
  body.classic-lab .classic-root button {
    width: 100%;
  }
}