/* =====================================================================
   EduMarkets — Market Making module

   The desk has its own stylesheet: `mm-sim.css`, a copy of the trading
   sims' (`backend/mmgame/MANIFEST.json`), with this repo's corrections
   beside it in `mm-sim-platform.css`. Both are loaded while the Trading
   Desk page is open and taken off when it closes.

   What is left here is the module's own: the setup dialog the
   participant chooses a market in. The Handbook and the Exercises are
   drawn by the platform's shared tabs and need nothing of their own.
   ===================================================================== */


/* Pre-session setup modal. Rendered in the shared dialog at document-body
   level, so these rules are NOT scoped under #market-making-workspace.

   Layout (owner, 2026-09-19). The intro paragraphs span the top. The
   four selects are a two-by-two grid (asset class, underlying / length,
   difficulty). The market and difficulty blurb sits on the third row of
   that grid, under the difficulty column, so the reader sees it beside
   the control that produced it. The synthetic-data note, the Advanced
   disclosure and the Start button run full-width below. */
.iro-dialog.mkm-setup-dialog { width: min(760px, 94vw); }
.mkm-setup {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mkm-setup-head { }
.mkm-setup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.mkm-setup-foot .btn { min-width: 120px; flex: 0 0 auto; }

.mkm-setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 12px;
  align-items: start;
}
.mkm-setup-field { display: block; }
.mkm-setup .sidebar-select,
.mkm-setup .sidebar-input { width: 100%; }
.mkm-setup .sb-label { display: block; margin: 0 0 4px; }

/* The market/difficulty blurb goes on the grid's third row, in the
   right column, so it reads directly under the difficulty control that
   it explains. The min-height reserves the tallest copy's space, so
   the dialog height does not jump between scenarios. */
.mkm-setup-explain {
  grid-column: 2;
  grid-row: 3;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mkm-setup-explain-head {
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.mkm-setup-explain-head:empty { display: none; }

.mkm-setup-intro {
  margin: 0;
  line-height: 1.5;
  color: var(--text-secondary);
}
/* The intro is several short paragraphs; space them without moving the
   first one. */
.mkm-setup-intro + .mkm-setup-intro { margin-top: 10px; }
.mkm-setup-blurb {
  font-size: var(--text-meta);
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}
.mkm-setup-blurb:empty { display: none; }

/* The synthetic-data note runs the full width of the dialog below the
   grid, in the same muted register as the blurb above it. */
.mkm-setup-syn {
  margin: 0;
  font-size: var(--text-meta);
  line-height: 1.45;
  color: var(--text-muted);
}

.mkm-setup-adv { }
.mkm-setup-adv > summary {
  cursor: pointer;
  font-size: var(--text-meta);
  color: var(--text-secondary);
  padding: 2px 0;
}
.mkm-setup-hint {
  margin-top: 4px;
  font-size: var(--text-meta);
  line-height: 1.45;
  color: var(--text-muted);
}