/* Market Making Simulation — participant app styles.
 *
 * The sign-in screen is the console login screen, one design across every
 * app in this service. This app does not load console.css, so the blocks
 * are carried here the way portfolio-sim.css carries them for the
 * portfolio participant app: copied verbatim from that copy, tokens and
 * comments included. */

.join-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #111114;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}
.join-screen::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
}
.join-screen::after {
  content: '';
  position: fixed;
  top: -200px; left: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.06) 0%, transparent 70%);
  z-index: 0;
}
[data-theme="light"] .join-screen { background: #f0f2f7; }
[data-theme="light"] .join-screen::before {
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
}
[data-theme="light"] .join-screen::after {
  background: radial-gradient(circle, rgba(13, 148, 136, 0.06) 0%, transparent 70%);
}

/* The login screens carry the sim's own module lockup at full size. The
   platform surface that does the same is the boot overlay, so both the name
   treatment and the centring come from there (platform.css :47-56). The
   centring is flex, never text-align, which would centre the wordmark over
   the module name instead of leaving the whole lockup left aligned against
   its bar. */
.join-logo {
  position: relative;
  z-index: 1;
  margin-bottom: 56px;
  display: flex;
  justify-content: center;
}
.join-logo .lockup-led .name {
  font-weight: 700;
  text-transform: none;
  line-height: 1.15;
  /* Two-value edge form: current Edge does not parse "trim-start cap". */
  text-box: trim-start cap alphabetic;
}

.join-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 44px 40px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 20px 60px -10px rgba(0,0,0,0.5);
  width: 100%;
  max-width: 440px;
}
[data-theme="light"] .join-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.65) 100%);
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 0 20px 60px -10px rgba(0,0,0,0.12);
}

.join-title {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
  color: #f0f0f0;
}
[data-theme="light"] .join-title { color: #1a1a1e; }

.join-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  font-weight: 300;
  text-align: center;
  margin-bottom: 28px;
}
[data-theme="light"] .join-subtitle { color: rgba(0,0,0,0.45); }

.join-footer {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  text-align: center;
}
[data-theme="light"] .join-footer { color: rgba(0,0,0,0.3); }

.footer-disclaimer {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.footer-disclaimer:hover { color: var(--color-accent); }
.footer-disclaimer:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.auth-field {
  margin-bottom: 20px;
  text-align: left;
}
.auth-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
}
[data-theme="light"] .auth-field label { color: rgba(0,0,0,0.5); }
.auth-field input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-md);
  color: #ffffff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  outline: none;
  transition: all 0.25s ease;
}
.auth-field input:focus {
  border-color: rgba(20, 184, 166, 0.45);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.08);
}
.auth-field input::placeholder { color: rgba(255,255,255,0.25); }
[data-theme="light"] .auth-field input {
  background: #f4f6fa;
  border: 1px solid #dde1ec;
  color: #1a1a1e;
}
[data-theme="light"] .auth-field input::placeholder { color: rgba(0,0,0,0.3); }
[data-theme="light"] .auth-field input:focus {
  border-color: #0d9488;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.08);
}

.auth-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #e8e8e8 100%);
  color: #0B0B0C;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  transition: all 0.25s ease;
  letter-spacing: -0.2px;
}
.auth-btn:hover { box-shadow: 0 8px 30px rgba(255,255,255,0.1); }
.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }
[data-theme="light"] .auth-btn {
  background: linear-gradient(135deg, #1a1a1e 0%, #333 100%);
  color: #ffffff;
}
[data-theme="light"] .auth-btn:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.15); }

/* Second step of the join screen: the confirmed session, the quieter "back"
   action, and the small line under the join-code label. Same treatment the
   ALM sim uses, so the two join screens read the same. */
.auth-info-box {
  background: rgba(20, 184, 166, 0.06);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-bottom: 24px;
}
.auth-info-box .auth-info-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}
.auth-btn-secondary {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}
.auth-btn-secondary:hover { color: var(--text); border-color: var(--text-muted); }

/* =====================================================================
   Trading desk (multiplayer port).
   Copied verbatim from the platform's css/market-making.css spot-desk
   styles (lines 1-985), plus the sharp terminal frame rules the spot
   skeleton shares with the options desk and the desktop-only notice.
   Left out with the features they style: the setup modal (the trainer
   configures the session), the fiction disclaimer that lived in it,
   the end screen's New session button, and the options desks.
   ===================================================================== */

/* The desk fills the viewport under the header: the mount passes the
   app-wrapper's remaining height through to the workspace. */
#module-mount {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* =====================================================================
   EduMarkets — Market Making module
   Scoped to #market-making-workspace so nothing leaks into other modules.

   Layout contract (MM-DESIGN.md section 4): while a session is live the
   desk fills ONE viewport with no page scrolling; only the feed scrolls
   internally. The `mkm-desk-active` class on the workspace switches the
   platform's scrolling content area into a fixed fill-the-height layout;
   it is removed on the Reference tab and on the end screen, where normal
   scrolling returns.

   The order book visual is copied from the equities exchange pattern
   (.ex-ob-* in equities.css: depth bars via --depth-pct, user resting-order
   outline + tag), renamed to .mkm-ob-* and rearranged as a stacked book.
   ===================================================================== */

/* ── One-viewport mode ─────────────────────────────────────────────── */

#market-making-workspace.mkm-desk-active .workspace-content {
  overflow-y: hidden;
}
/* The desk's surround matches the sidebar's surface, the portfolio desk's
   terminal-chrome rule (owner-approved there 2026-08-20, ported here on
   the owner's instruction 2026-08-22): with the panels tiled flat, the
   page ground framing the slab would read as a black border against the
   sidebar's grey. Painted on the scroll container so a monitor wider than
   the content cap does not show the ground beyond the cap. */
#market-making-workspace .workspace-content { background: var(--bg-surface); }
#market-making-workspace.mkm-desk-active .tab-panel.active {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#market-making-workspace.mkm-desk-active .tab-content-area {
  flex: 1 1 0;
  min-height: 0;
  max-width: 1560px;   /* cap on wide monitors; the desk must stay dense */
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
}
/* The desk tab's content host is the flex column the .mkm-desk inside it
   stretches into (whichever engine mounted, spot or options). Without this the
   desk's grid collapses to zero height and the overflow:hidden left column clips
   away entirely. */
#market-making-workspace.mkm-desk-active #market-making-desk-content {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#market-making-workspace .mkm-desk {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Session controls (top of the sidebar): buttons + timer on one row ── */

#market-making-workspace .mkm-sb-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
#market-making-workspace .mkm-ctl-btn {
  flex: 0 1 auto;
  padding: 4px 8px;
  font-size: 0.72rem;
}
#market-making-workspace .mkm-clock {
  margin-left: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
  font-weight: 700;
}

/* ── Scenario details expander (bottom of the sidebar) ─────────────── */
/* Uses the platform boxed collapsible (.sb-section-plain +
   .sb-collapsible-toggle from components.css). */

/* The traded instrument, pinned at the top of the sidebar above the session
   controls. */
#market-making-workspace .mkm-scenario-stock {
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

/* ── Main grid ─────────────────────────────────────────────────────── */

/* The panels tile edge to edge with the page ground showing through 1px
   gaps as the seam between them, the portfolio desk's terminal chrome.
   Every nested column carries the same gap and ground, so every seam on
   the desk is the same hairline. */
#market-making-workspace .mkm-grid {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(520px, 620px) 1fr;
  gap: 1px;
  background: var(--bg);
}
/* The end screen hides the grid via the hidden attribute; the display:grid
   above would otherwise win over the UA [hidden] rule. */
#market-making-workspace .mkm-grid[hidden] { display: none; }
/* Left column: book, order entry, working orders, client calls. The calls
   panel takes whatever height is left and scrolls internally. */
#market-making-workspace .mkm-col-book {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bg);
  overflow: hidden;
}
/* The blotter fills whatever is left of the book column and scrolls inside,
   so the column never moves as entries arrive. */
#market-making-workspace .mkm-col-book .mkm-feed-wrap {
  flex: 1 1 auto;
  min-height: 0;
}
#market-making-workspace .mkm-col-book .mkm-feed-wrap .mkm-feed {
  flex: 1 1 0;
  min-height: 80px;
}
/* One stacked layout at every width (owner, 2026-08-22, replacing the
   news-beside-chart variant that misaligned the row): the chart first
   with the full column width and a taller slot, a short news feed under
   it, and the client calls taking whatever height is left. */
#market-making-workspace .mkm-col-right {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(140px, 1fr);
  gap: 1px;
  background: var(--bg);
}
#market-making-workspace .mkm-chart-panel { grid-column: 1; grid-row: 1; }
#market-making-workspace .mkm-news-wrap   { grid-column: 1; grid-row: 2; }
#market-making-workspace .mkm-calls-wrap  { grid-column: 1; grid-row: 3; }
/* News and chart are frames themselves (their 8px gap is internal rhythm
   on the frame surface, not a seam). */
#market-making-workspace .mkm-chart-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#market-making-workspace .mkm-news-wrap {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* The news feed is a short strip under the chart; headlines scroll
   inside it (owner, 2026-08-22: the news never needed the height the
   old side column gave it). */
#market-making-workspace .mkm-news-wrap .mkm-feed {
  min-height: 56px;
  max-height: 150px;
}
#market-making-workspace #mkm-news .mkm-feed-item { font-size: 0.95rem; }

/* Next-release indicator (FX): a compact always-visible line pinned above
   the news feed, counting down to the next scheduled release and showing
   the print through the post window. Hidden on equity sessions. */
#market-making-workspace .mkm-release-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: var(--text-meta);
  color: var(--text-secondary);
}
#market-making-workspace .mkm-release-label {
  flex-shrink: 0;
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#market-making-workspace .mkm-release-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#market-making-workspace .mkm-release-line .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
/* The final seconds before the print read as a warning. */
#market-making-workspace .mkm-release-line--soon .mkm-release-text,
#market-making-workspace .mkm-release-line--soon .num {
  color: var(--warning);
}

#market-making-workspace .mkm-placeholder {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 10px 2px;
}

/* ── Order book (copied ex-ob pattern, stacked) ────────────────────── */

/* Fixed slot: the book's natural render (topline + heads + 5 levels) is
   325px; pinning it keeps the layout stable through the placeholder swap
   and gives the news and chart slots a height to match. */
#market-making-workspace #mkm-book {
  height: 325px;
}
#market-making-workspace #mkm-book .mkm-ob {
  height: 100%;
}
#market-making-workspace .mkm-ob {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
#market-making-workspace .mkm-ob-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 12px;
  font-family: var(--font);
  font-size: 0.74rem;
  color: var(--text-muted);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
#market-making-workspace .mkm-ob-topline .num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
}
/* Bids and asks side by side; the prices meet at the centre divider. */
#market-making-workspace .mkm-ob-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#market-making-workspace .mkm-ob-col--bids { border-right: 1px solid var(--border); }
/* Fixed row area: 5 grid levels plus one injected resting order fit without
   moving the layout; further user levels scroll within the side. */
#market-making-workspace .mkm-ob-bids,
#market-making-workspace .mkm-ob-asks {
  height: 246px;
  overflow-y: auto;
}
#market-making-workspace .mkm-ob-col-head {
  padding: 5px 12px 0;
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
#market-making-workspace .mkm-ob-col--bids .mkm-ob-col-head { text-align: right; }
#market-making-workspace .mkm-ob-subhead {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 6px;
  padding: 3px 12px 4px;
  font-family: var(--font);
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
#market-making-workspace .mkm-ob-col--bids .mkm-ob-subhead span { text-align: right; }
#market-making-workspace .mkm-ob-col--asks .mkm-ob-subhead span { text-align: left; }

/* The price column has a fixed width, sized for the top-of-book font, so
   every column lines up on every row and the price can never truncate.
   The size column gets the larger flexible share: it also carries the
   "you" tag on the user's resting orders. */
#market-making-workspace .mkm-ob-col--bids .mkm-ob-row,
#market-making-workspace .mkm-ob-col--bids .mkm-ob-subhead {
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.35fr) 108px;
}
#market-making-workspace .mkm-ob-col--asks .mkm-ob-row,
#market-making-workspace .mkm-ob-col--asks .mkm-ob-subhead {
  grid-template-columns: 108px minmax(0, 1.35fr) minmax(0, 0.75fr);
}

#market-making-workspace .mkm-ob-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 5px;
  align-items: baseline;
  padding: 6px 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
}
#market-making-workspace .mkm-ob-row::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: var(--depth-pct, 0%);
  z-index: -1;
  opacity: 0.22;
  pointer-events: none;
}
/* Depth bars grow outward from the centre divider, both sides in the same
   neutral accent (the exchange pattern). */
#market-making-workspace .mkm-ob-row--bid::before {
  right: 0;
  background: linear-gradient(to left, var(--sidebar-accent), transparent);
}
#market-making-workspace .mkm-ob-row--ask::before {
  left: 0;
  background: linear-gradient(to right, var(--sidebar-accent), transparent);
}
#market-making-workspace .mkm-ob-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}
[data-theme="light"] #market-making-workspace .mkm-ob-row:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}
#market-making-workspace .mkm-ob-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#market-making-workspace .mkm-ob-col--bids .mkm-ob-cell { text-align: right; }
#market-making-workspace .mkm-ob-col--asks .mkm-ob-cell { text-align: left; }
#market-making-workspace .mkm-ob-cum {
  color: var(--text-muted);
  font-size: 0.92rem;
}
#market-making-workspace .mkm-ob-row--tob .mkm-ob-cum {
  font-size: 1rem;
  font-weight: 700;
}

/* Top of book: first row per side, markedly larger, clickable to trade
   the order-entry size at market. */
#market-making-workspace .mkm-ob-row--tob {
  font-weight: 800;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
#market-making-workspace .mkm-ob-row--tob .mkm-ob-price { font-size: 1.5rem; }
#market-making-workspace .mkm-ob-row--tob .mkm-ob-size  { font-size: 1.15rem; }
/* FX top-of-book prices follow the dealer big-figure convention: the two pip
   digits read much larger than the big figure (and any pipette digit). */
#market-making-workspace .mkm-ob-row--tob .mkm-ob-bigfig { font-size: var(--text-h4); }
#market-making-workspace .mkm-ob-row--tob .mkm-ob-pips   { font-size: var(--text-h1); }
#market-making-workspace .mkm-ob-row--tob:hover {
  outline: 1px solid var(--text-muted);
  outline-offset: -1px;
}

/* User-placed resting order: outline + chip tag (copied from ex-ob). */
#market-making-workspace .mkm-ob-row--user {
  outline: 1px solid var(--sidebar-accent);
  outline-offset: -1px;
  box-shadow: inset 3px 0 0 var(--sidebar-accent);
}
#market-making-workspace .mkm-ob-user-tag {
  display: inline-block;
  vertical-align: middle;       /* centre the chip on the size number rather
                                   than letting its small text sit on the
                                   number's baseline (which reads as too low) */
  line-height: 1;
  margin: 0 4px;
  /* nudge up to sit optically centred on the digits (cap height sits above
     the line middle) */
  position: relative;
  top: -1px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #0b0b0c;
  padding: 1px 4px;
  background: var(--sidebar-accent);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-theme="light"] #market-making-workspace .mkm-ob-user-tag { color: #fff; }

/* ── Order entry ───────────────────────────────────────────────────── */

/* One card, stacked rows: the lit order entry (size on the left, then the
   bid and ask sides) on one full-width row, and on equities the dark-pool
   lay-off on its own full-width row beneath it. Side-by-side columns could
   not fit the one-row lit entry at the book column's width. FX hides the
   dark row and the card is just the lit row. */
#market-making-workspace .mkm-entry {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Lit order entry: one row, the size field on the left, then the bid and
   ask sides. */
#market-making-workspace .mkm-entry-lit {
  display: flex;
  align-items: center;
  gap: 12px;
}
#market-making-workspace .mkm-entry-lit .mkm-entry-side { flex: 1 1 0; }
#market-making-workspace .mkm-entry-side {
  display: flex;
  gap: 8px;
  min-width: 0;
}
#market-making-workspace .mkm-entry-side .sidebar-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
}
#market-making-workspace .mkm-entry-side .btn { flex-shrink: 0; }
#market-making-workspace .mkm-entry-size {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
#market-making-workspace .mkm-entry-size .sb-label { margin: 0; }
#market-making-workspace .mkm-entry-size .sidebar-input {
  width: 110px;
  font-family: var(--font-mono);
}
/* Dark-pool lay-off (equities only): one row under the lit entry, divided by
   a neutral rule so the two ways to trade read as one panel with two rows. */
#market-making-workspace .mkm-entry-dark {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
/* FX hides the dark row via the hidden attribute; display:flex above would
   otherwise win over the UA [hidden] rule (same guard as .mkm-grid). */
#market-making-workspace .mkm-entry-dark[hidden] { display: none; }
#market-making-workspace .mkm-entry-dark-head { flex: 0 0 auto; }
#market-making-workspace .mkm-entry-dark-head .sb-label { margin: 0; }
#market-making-workspace .mkm-entry-dark-row {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
#market-making-workspace .mkm-entry-dark-row .sidebar-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
}
#market-making-workspace .mkm-entry-dark-row .btn { flex-shrink: 0; }

/* ── Working orders ────────────────────────────────────────────────── */

/* A thin control strip (no title) holding just the Cancel-all button, right
   aligned, above the working orders. */
#market-making-workspace .mkm-working-head {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px 0;
}

/* ── Spot desk frames (same sharp terminal frames as the options desk) ── */
/* The book+entry frame and the working-orders frame keep their natural height;
   the blotter frame fills the rest (its .mkm-col-book .mkm-feed-wrap rule already
   flexes). The book and feeds run to the frame edge; the entry and working body
   get inner padding. */
#market-making-workspace .mkm-book-frame,
#market-making-workspace .mkm-working-frame { flex: 0 0 auto; }
#market-making-workspace .mkm-book-frame .mkm-entry { padding: 8px 10px; }
#market-making-workspace .mkm-working-frame .mkm-working { padding: 0 10px 8px; }

/* Fixed-height two-column area (bids left, offers right) so the layout
   never shifts as orders are placed, filled or cancelled. */
#market-making-workspace .mkm-working {
  flex: 0 0 auto;
  height: 88px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  overflow: hidden;
}
#market-making-workspace .mkm-working-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
#market-making-workspace .mkm-working-col .mkm-placeholder {
  padding: 4px 2px;
  font-size: 0.78rem;
}
#market-making-workspace .mkm-working-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  font-size: 0.82rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
#market-making-workspace .mkm-working-side {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
#market-making-workspace .mkm-working-side--buy  { color: var(--positive); }
#market-making-workspace .mkm-working-side--sell { color: var(--negative); }
/* A resting dark interest is not a lit order; a dashed edge marks it apart. */
#market-making-workspace .mkm-working-row--dark { border-style: dashed; }
#market-making-workspace .mkm-working-cancel {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}
#market-making-workspace .mkm-working-cancel:hover { color: var(--negative); }
#market-making-workspace .mkm-working-note {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
}
#market-making-workspace .mkm-row-working { opacity: 0.55; }

/* ── Price chart ───────────────────────────────────────────────────── */

#market-making-workspace .mkm-chart-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px 6px 0;
  /* Fixed slot whether or not a session has rendered the plot yet, so the
     grid row never resizes or overflows. The plot height follows the slot
     (initChart reads clientHeight). Sized so the calls area below keeps
     room for four tickets, two columns by two rows (owner, 2026-08-22). */
  height: 300px;
}

/* ── Client calls ──────────────────────────────────────────────────── */

#market-making-workspace .mkm-calls-wrap {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* The calls area holds the large lower-right slot as a fixed two-column
   grid (owner, 2026-08-22): tickets fill from the top left, the newest
   call always lands in the first slot, and further tickets wrap into
   rows and scroll within the region. */
#market-making-workspace .mkm-calls {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
}
#market-making-workspace .mkm-calls .mkm-placeholder {
  grid-column: 1 / -1;
}
#market-making-workspace .mkm-ticket {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px 12px;
  cursor: pointer;
}
#market-making-workspace .mkm-ticket-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
#market-making-workspace .mkm-ticket-client {
  font-weight: 600;
  font-size: 1.02rem;
}
#market-making-workspace .mkm-ticket-timer {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-secondary);
}
#market-making-workspace .mkm-ticket-urgent .mkm-ticket-timer {
  color: var(--warning);
}
#market-making-workspace .mkm-ticket-type {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--text-meta);
  color: var(--text-muted);
  margin-top: 1px;
}
/* The trade outcome, from the client's side, shown top-right once the ticket
   resolves: the client sold (maker bought), the client bought (maker sold), or
   no deal (walked). */
#market-making-workspace .mkm-ticket-outcome {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#market-making-workspace .mkm-outcome--sold   { color: var(--positive); }
#market-making-workspace .mkm-outcome--bought  { color: var(--negative); }
#market-making-workspace .mkm-outcome--none    { color: var(--text-muted); }
/* One fact per labeled row, readable top to bottom. */
#market-making-workspace .mkm-ticket-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 5px;
  margin: 8px 0 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  /* Label and value share a text baseline so the smaller muted label lines up
     with the larger value on its right. */
  align-items: baseline;
}
/* TWO label/value pairs per line (must follow the rule above to win on source
   order). A ticket already had white space to the right of its values, so the
   trade's delta and vega ride there rather than costing rows: the risk reads at a
   glance while you are typing the vol. */
#market-making-workspace .mkm-ticket-facts--pairs {
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
}
#market-making-workspace .mkm-fact-label {
  font-size: var(--text-meta);
  color: var(--text-muted);
}
#market-making-workspace .mkm-fact-req {
  font-weight: 600;
}
/* Figures in a ticket (the delta, vega and size the clip carries) read mono and
   tabular, like every other number on the desk. There is no global .num rule, so
   each region states it. The labels, the structure / option name and the legs are
   TEXT and stay in the text face. */
#market-making-workspace .mkm-ticket-facts .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
#market-making-workspace .mkm-ticket-form {
  display: flex;
  gap: 8px;
  align-items: stretch;             /* Send / Risk take the exact height of the
                                       price input and sit perfectly level */
}
#market-making-workspace .mkm-ticket-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;                    /* the form stretches this wrapper to the
                                       input's height, giving the buttons a
                                       definite parent for height:100% */
}
#market-making-workspace .mkm-ticket-actions .btn { height: 100%; }
#market-making-workspace .mkm-quote-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* The field gives way before the half-panel ticket overflows: the input
     runs at its full 116px where the panel allows and shrinks with the
     ticket where it does not. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 116px;
}
#market-making-workspace .mkm-ticket-form .sidebar-input {
  width: 100%;
  font-family: var(--font-mono);
  padding: 6px 10px;
  font-size: 1rem;
}
/* The price the client dealt on: bold and full-strength even though the
   resolved ticket's inputs are disabled. */
#market-making-workspace .mkm-quote-dealt.sidebar-input {
  font-weight: 800;
  color: var(--text);
  opacity: 1;
}
/* A live quote the client is considering. */
#market-making-workspace .mkm-ticket-quoted { border-color: var(--color-accent); }
/* Resolved ticket: outcome border, lingers a few seconds before closing.
   Green = you bought, red = you sold, grey = no trade (walked). */
#market-making-workspace .mkm-ticket-done { opacity: 1; }
/* The trade-outcome ring: green when the client bought, red when they sold, grey
   when they walked (below). All three are the same thickness so a no-trade reads
   as deliberately as a trade. */
#market-making-workspace .mkm-ticket-done--buy {
  border-color: var(--positive);
  box-shadow: inset 0 0 0 3px var(--positive);
}
#market-making-workspace .mkm-ticket-done--sell {
  border-color: var(--negative);
  box-shadow: inset 0 0 0 3px var(--negative);
}
#market-making-workspace .mkm-ticket-done--none {
  border-color: var(--text-muted);
  box-shadow: inset 0 0 0 3px var(--text-muted);
}
/* ── Feed ──────────────────────────────────────────────────────────── */

#market-making-workspace .mkm-feed-wrap {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#market-making-workspace .mkm-feed {
  overflow-y: auto;              /* the one region allowed to scroll */
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 0;
}
#market-making-workspace .mkm-feed-item {
  display: flex;
  gap: 10px;
  padding: 4px 12px;
  font-size: 0.92rem;
  line-height: 1.5;
}
#market-making-workspace .mkm-feed-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 42px;
  text-align: right;
}
#market-making-workspace .mkm-feed-text { color: var(--text-secondary); }
#market-making-workspace .mkm-feed-item--news .mkm-feed-text {
  color: var(--text);
  font-weight: 600;
}
#market-making-workspace .mkm-feed-item--fill .mkm-feed-text { color: var(--text); }
#market-making-workspace .mkm-feed-item--flag .mkm-feed-text {
  color: var(--warning);
  font-weight: 600;
}
/* ── Sidebar: position / P&L / limits / stats ──────────────────────── */

#market-making-workspace .mkm-sb-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
#market-making-workspace .mkm-sb-row .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
#market-making-workspace .mkm-sb-row .num.positive { color: var(--positive); }
#market-making-workspace .mkm-sb-row .num.negative { color: var(--negative); }
/* Both-currency P&L (FX): the base-ccy equivalent reads as a lighter second
   line under the native quote-ccy figure. */
#market-making-workspace .mkm-sb-sub {
  display: block;
  text-align: right;
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--text-muted);
}

#market-making-workspace .mkm-meter {
  height: 5px;
  border-radius: 3px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  overflow: hidden;
  margin: 2px 0 6px;
}
#market-making-workspace .mkm-meter-fill {
  height: 100%;
  background: var(--color-accent);
}
#market-making-workspace .mkm-meter--breach .mkm-meter-fill {
  background: var(--negative);
}
/* Centre-anchored position meter: zero in the middle, the fill grows right
   (long) or left (short) toward the limit at each end. */
#market-making-workspace .mkm-meter--center { position: relative; }
#market-making-workspace .mkm-meter--center .mkm-meter-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
}
#market-making-workspace .mkm-meter-zero {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);
  background: var(--text-muted);
}
#market-making-workspace .mkm-limit-status {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 2px;
}
#market-making-workspace .mkm-limit-status--out { color: var(--negative); }

/* ── End screen ────────────────────────────────────────────────────── */

#market-making-workspace .mkm-endscreen { padding-bottom: 24px; }
#market-making-workspace .mkm-end-inner {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#market-making-workspace .mkm-end-inner h4 { margin-top: 10px; }
#market-making-workspace .mkm-end-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
#market-making-workspace .mkm-end-num.positive { color: var(--positive); }
#market-making-workspace .mkm-end-num.negative { color: var(--negative); }
/* Both-currency P&L rows in the end report (FX), same pattern as the sidebar. */
#market-making-workspace .mkm-end-sub {
  display: block;
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--text-muted);
}

/* ── Sharp terminal frames ──────────────────────────────────────────────
   Each panel is a thin square-cornered outline, no rounded corners and no
   shadow, so the dense desk reads as distinct regions without titles or cards.
   The inner data boxes drop their own frame so the panel border is the only
   one. Panels carry no header: the columns name themselves. */
#market-making-workspace .mkm-opt-frame {
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Flat tiled panel, the portfolio desk's terminal chrome (ported on the
     owner's instruction, 2026-08-22: the slate outlines read as dark grid
     lines). No border and no radius: the 1px grid gaps are the only
     separation, so the desk reads as one tiled surface. */
  background: var(--bg-surface);
  border: none;
  border-radius: 0;
  overflow: hidden;
}
#market-making-workspace .mkm-opt-frame .mkm-opt-chain,
#market-making-workspace .mkm-opt-frame .mkm-ob,
#market-making-workspace .mkm-opt-frame .mkm-feed,
#market-making-workspace .mkm-opt-frame .mkm-chart-wrap {
  border: none;
  border-radius: 0;
}
/* A control floated in a frame's top-right corner (the chart Price/Vol toggle,
   the client-requests info glyph), so no header bar is needed to hold it. */
#market-making-workspace .mkm-chart-panel .mkm-chart-wrap,
#market-making-workspace .mkm-calls-wrap.mkm-opt-frame {
  position: relative;
}
/* The scheduled-release line (earnings countdown) sits flush to the frame with
   no header above it, so it needs its own inset to clear the border and to line
   its label up with the news timers' left column below it. */
#market-making-workspace .mkm-news-wrap.mkm-opt-frame .mkm-release-line {
  padding: 8px 12px 4px;
}

#market-making-workspace .mkm-calls-wrap.mkm-opt-frame .mkm-calls {
  padding: 8px;
}
/* Ticket width comes from the two-column grid: every ticket is half the
   panel, so a lone ticket is never wider than a pair. */

/* ── Desktop-only notice ───────────────────────────────────────────── */

#market-making-workspace .mkm-desktop-notice { display: none; }
@media (max-width: 1199px) {
  #market-making-workspace .mkm-desk { display: none; }
  #market-making-workspace .mkm-desktop-notice {
    display: block;
    padding: 24px 4px;
    max-width: 520px;
  }
  #market-making-workspace.mkm-desk-active .workspace-content {
    overflow-y: auto;
  }
}

/* ── Pause overlay ─────────────────────────────────────────────────────────
   The full-screen hold shown to every desk while the trainer has the session
   paused. Ported from the ALM sim (css/alm.css) so the two sims give the same
   participant a single pause experience. */
.pause-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(11, 11, 12, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pauseFadeIn 0.3s ease;
}
[data-theme="light"] .pause-overlay {
  background: rgba(245, 245, 247, 0.85);
}
@keyframes pauseFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.pause-overlay-content {
  text-align: center;
  max-width: 520px;
  padding: 48px 40px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.pause-overlay-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.7;
}
.pause-overlay-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--warning);
  margin-bottom: 16px;
}
.pause-overlay-hint {
  font-size: 13px;
  color: var(--text-muted);
  animation: pausePulse 2s ease-in-out infinite;
}
@keyframes pausePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* The awareness quiz rides the pause overlay: the question takes the
   title slot, the options stack under it, the countdown takes the hint
   slot. Option buttons are the global .btn variants; only the stack
   layout is new. */
.mkm-quiz .pause-overlay-title {
  color: var(--text);
}
.mkm-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.mkm-quiz-option {
  width: 100%;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* The signed-in waiting screen: the sign-in card sits at the top rather
   than centred, and the handbook fills the page below it, so the class
   reads while the trainer sets the session up. */
.join-screen.mm-waiting {
  min-height: auto;
  padding: 48px 20px 24px;
}
.mm-waiting-handbook {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

/* ── Header, right-hand controls ───────────────────────────────────── */

/* Copied verbatim from portfolio-sim.css (its copy of the Bank ALM console
   header: .header-controls, .theme-toggle and its glyph swap, .btn /
   .btn-secondary / .btn-sm), with only the controls id swapped to this
   app's. The header is hidden on the sign-in and waiting screens and
   belongs to the desk. */
#mm-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding-right: 24px;
}
#mm-header-controls .theme-toggle {
  background: transparent;
  border: 1px solid transparent;   /* invisible by default, shows on hover */
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: var(--transition);
  /* Desaturate the colour emoji glyphs (yellow moon to grey). */
  filter: grayscale(1);
}
#mm-header-controls .theme-toggle:hover {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text);
}
.icon-sun, .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: inline; }
[data-theme="light"] .icon-moon { display: inline; }

#mm-header-controls .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: var(--transition);
  border: none;
}
#mm-header-controls .btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
#mm-header-controls .btn-secondary:hover {
  background: var(--bg-elevated);
  color: var(--text);
}