/* Splash additions shared by /tools/detect/ pages, on top of /tools/splash.css.
   .dsp-scroll is the stage body: the live output scrolls inside the stage.
   .dsp-wide widens the left column for pages whose controls are editors. */
.sp-stage .dsp-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 4px; }
.sp-stage .dsp-scroll > * { min-width: 0; flex-shrink: 0; }
@media (max-width: 959px) { .sp-stage .dsp-scroll { max-height: 74svh; } }
@media (min-width: 960px) { .ax-app.dsp-wide .sp-hero { grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); } }
.sp-ctrl .ax-actions { margin-top: 0; }
.sp-ctrl .ax-note { margin: 0; }
.sp-stage .ax-verdict { margin: 0; }
/* Editor panes stacked in the control column */
.sp-ctrl .dt-panes { grid-template-columns: minmax(0, 1fr); margin-top: 0; gap: 12px; }
.sp-ctrl textarea.dt-code { min-height: 0; height: 200px; }
@media (max-width: 640px) { .sp-ctrl textarea.dt-code { height: 220px; } }
/* Tab bar in the stage head */
.sp-stage-head .sa-tabs { margin-top: 0; flex: 1 1 320px; }
@media (max-width: 959px) {
  .ax-app.sp-app .ax-btn, .ax-app.sp-app button.ax-chip, .ax-app.sp-app .ax-seg button { min-height: 44px; }
}
@media (min-width: 1100px) { .sp-stage .ax-tiles.dt-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 959px) {
  .sp-stage button.dt-open { min-height: 44px; }
  .sp-ctrl .cv-map { min-height: 44px; }
}