/* Sales & Trading Simulation, participant app.

   The desk is the market making desk: st.html loads mm-sim.css and the
   workspace carries its id (#market-making-workspace), so every rule of
   that sheet applies to the desk, the sidebar, the tickets, the books and
   the panels unchanged. This file holds only what the market making app
   has no rule for, each block copied from where the rule already lives:
   the join screen's seat field, the observer bar and the connect error
   from the hedge fund app (portfolio-sim.css), and the Briefing's
   document layout from the hedge fund Briefing (portfolio-sim.css, the
   .ref-* rules), rescoped to this workspace. */

/* ── The join screen's seat field ──────────────────────────────────── */

/* The seat reads as the sign-in screen's inputs (chrome.css .auth-field
   input), declaration for declaration. chrome.css is shared text with the
   bank ALM sim, so the select is styled here rather than there. */
body[data-sim="salestrading"] .auth-field select {
  width: 100%;
  padding: 14px 18px;
  background: var(--signin-input);
  border: 1px solid var(--signin-border);
  border-radius: 0;
  color: var(--signin-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  outline: none;
  transition: border-color 0.25s ease;
}
body[data-sim="salestrading"] .auth-field select:focus { border-color: var(--signin-accent); }

/* ── From portfolio-sim.css ────────────────────────────────────────── */

.pm-connect-error {
  max-width: 480px;
  margin: 80px auto;
  color: var(--negative);
  text-align: center;
}

/* The read-only bar a trainer gets when they open a desk from Session
   Control (portfolio-sim.css #pm-observer-banner, itself the Bank ALM
   sim's observer banner). */
#pm-observer-banner {
  flex: 0 0 auto;
  background: #f8d7da;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 7px 16px;
}

/* ── The Corporates page's content host ───────────────────────────── */

/* The desk page's own rule (mm-sim.css, #market-making-desk-content),
   for the sales seat's second acting page, so its grid fills the
   viewport the way the desk's does. */
#market-making-workspace.mkm-desk-active #st-conversations-content {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── The Corporate hedging page's frames ───────────────────────────── */

/* The row a closed conversation ends on: bold, an agreed hedge in the
   positive colour (owner, 2026-10-23). */
#market-making-workspace .st-turn-end .mkm-feed-text { font-weight: 700; color: var(--text-secondary); }
#market-making-workspace .st-turn-end--agreed .mkm-feed-text { color: var(--positive); }

/* The proposal ticket compact: its fields at the facts grid's row gap and
   a slimmer field height (owner, 2026-10-23). */
#market-making-workspace .st-proposal .mkm-ticket-facts { row-gap: 4px; }
#market-making-workspace .st-proposal .mkm-ticket-facts .sidebar-input {
  padding-top: 3px;
  padding-bottom: 3px;
}

/* A conversation turn: the speaker on its own line in the panel heading
   style, the corporate in the accent colour and You in muted grey, and
   the words under it in the text colour at regular weight (owner,
   2026-10-23: the speaker and the words, and the two sides, read apart). */
#market-making-workspace .st-turn { padding-top: 6px; padding-bottom: 6px; }
#market-making-workspace .st-turn-body { min-width: 0; }
#market-making-workspace .st-turn-who { margin: 2px 0 2px; }
#market-making-workspace .st-turn--client .st-turn-who { color: var(--color-accent); }
#market-making-workspace .st-turn--sales .st-turn-who { color: var(--text-muted); }
#market-making-workspace .st-turn-text { color: var(--text); font-weight: 400; }

/* A corporate client's card: the exchanges left at the end of the facts
   row in the type row's quiet face, and the profile as a wrapped
   paragraph under it, since a sentence on the one-line facts row ran
   past the card's edge (owner, 2026-10-23). */
#market-making-workspace .st-corps-wrap .mkm-fact-end {
  font-size: var(--text-meta);
  color: var(--text-muted);
  white-space: nowrap;
}
#market-making-workspace .st-corp-profile {
  margin: 6px 0 0;
  font-size: var(--text-meta);
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: normal;
}

/* The corporate cards a set height and the conversation the rest of the
   left column (the calls grid fills its frame, so a frame sized to its
   content would show none of it); the questions and the proposal at
   their own height over News and the Blotter. */
/* The cards at their own height, one row at most, over a small floor:
   with no conversation open the frame is a strip and the conversation
   takes nearly the whole column; an open client's card takes the height
   it needs (owner, 2026-10-23: a small reduction from the full column). */
#market-making-workspace .st-corps-wrap { flex: 0 0 auto; min-height: 150px; max-height: 200px; }
#market-making-workspace .st-corps-wrap .mkm-calls { flex: 0 1 auto; }
#market-making-workspace .st-conv-wrap { flex: 1 1 0; }
#market-making-workspace .st-conv-wrap .mkm-feed { flex: 1 1 0; min-height: 80px; }
#market-making-workspace .st-conv-work { flex: 0 0 auto; }
/* The five questions in three even columns of the desk's own buttons. */
#market-making-workspace .st-moves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px 10px 10px;
}
/* The proposal ticket, inset by the street bar's own 10px. Its fields sit
   in the ticket's facts grid, label left and control filling the value
   column, so every field reads at full width. */
#market-making-workspace .st-proposal { padding: 0 10px 10px; }
#market-making-workspace .st-proposal .mkm-ticket-facts { align-items: center; }
#market-making-workspace .st-proposal .mkm-ticket-facts .sidebar-input { width: 100%; }

/* ── The markets on two pairs (owner, 2026-10-23) ─────────────────── */

/* The book stack, the same on the trader's desk and on the sales seat's
   Client flow page (owner, 2026-10-23), keeps every book and, on the
   trader's desk, its click on the best bid or ask. A CLOSED book is one line: its header band beside its best bid
   and ask, without the column names, the sizes and the running totals,
   and with its order entry put away. The OPEN book is the market making
   book as it is, with its depth and its order entry under it. */
#market-making-workspace .mkm-ob--stacked .mkm-ob-inst:not(.is-open) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  --mkm-tob-price: 1.05rem;
  --mkm-tob-bigfig: 0.95rem;
  --mkm-tob-pips: 1.25rem;
}
#market-making-workspace .mkm-ob--stacked .mkm-ob-inst:not(.is-open) .mkm-ob-subhead,
#market-making-workspace .mkm-ob--stacked .mkm-ob-inst:not(.is-open) .mkm-ob-cum,
#market-making-workspace .mkm-ob--stacked .mkm-ob-inst:not(.is-open) .mkm-ob-size,
#market-making-workspace .mkm-ob--stacked .mkm-ob-inst:not(.is-open) .mkm-ob-entry {
  display: none;
}
#market-making-workspace .mkm-ob--stacked .mkm-ob-inst:not(.is-open) .mkm-ob-col--bids .mkm-ob-row,
#market-making-workspace .mkm-ob--stacked .mkm-ob-inst:not(.is-open) .mkm-ob-col--asks .mkm-ob-row {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 3px;
  padding-bottom: 3px;
  border-bottom: 0;
}

/* ── The trader's Price feed bars ─────────────────────────────────── */

/* Each bar reads as three groups: the pair's name, Skew with its field,
   Widen with its field. A label sits next to its own field, the groups
   stand apart, and the pair's name drops the sidebar label's margins so
   every label is on the fields' centre line (owner, 2026-10-23). The
   order entry's shared 78px label column (mm-sim.css) is what parted
   Skew from its field, so this bar does without it. */
#market-making-workspace #st-feed-bars .mkm-opt-street-bar { gap: 24px; }
#market-making-workspace #st-feed-bars .mkm-opt-street-bar > .sb-label {
  margin: 0;
  min-width: 4.5rem;
}
#market-making-workspace #st-feed-bars .mkm-entry-size { gap: 8px; }
#market-making-workspace #st-feed-bars .mkm-entry-size > .sb-label { min-width: 0; }

/* ── The debrief's corporate clients ─────────────────────────────── */

/* A cell holds a few short lines (the need, each proposal), so it wraps
   and reads from the top; the client's pair and the fit sit under the
   name and the outcome in the market making report's muted sub-line
   (.mkm-end-sub, owner, 2026-10-23). */
#market-making-workspace .st-end-corps td { white-space: normal; text-align: left; vertical-align: top; }

/* ── A ticket's instrument row ────────────────────────────────────── */

/* The instrument takes the width it needs and never wraps, the size sits
   in the middle of what is left and the side at the end, so a swap
   ticket is as tall as a spot one (owner, 2026-10-23). */
#market-making-workspace .st-facts-inst {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
}
#market-making-workspace .st-facts-inst > :first-child { white-space: nowrap; }
#market-making-workspace .st-facts-inst > :nth-child(2) { justify-self: center; white-space: nowrap; }

/* ── A sales ticket's quote block ─────────────────────────────────── */

/* Two rows of two (owner, 2026-10-23): the desk price beside the margin
   fields, the client price under it beside Quote and Decline. The rows
   are equal, so the buttons take the fields' height as they do on the
   market making form. The prices keep the ticket's own size, in the
   mono face; the desk price in the secondary colour and the client
   price in bold. The labels live in the tips: with them the two-way
   prices of a ticket half the column wide did not fit. */
#market-making-workspace #mkm-calls .mkm-ticket-form.st-quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr 1fr;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}
/* Each margin field the width of the button under it (owner,
   2026-10-23): the fields and the buttons are two equal cells each, in
   the same column. The buttons set the column's width; the fields add
   none of their own (contain) and fill their cells. The bid field sits
   over the first button and the offer field over the second, so a
   one-way ticket keeps its side's place. */
#market-making-workspace .st-quote-grid .st-quote-fields,
#market-making-workspace .st-quote-grid .mkm-ticket-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-left: 0;
  align-self: stretch;
}
#market-making-workspace .st-quote-grid .st-quote-fields { contain: inline-size; }
#market-making-workspace .st-quote-grid .mkm-quote-field.st-margin-field {
  min-width: 0;
  max-width: none;
}
#market-making-workspace .st-quote-grid [data-side="bid"] { grid-column: 1; }
#market-making-workspace .st-quote-grid [data-side="offer"] { grid-column: 2; }
#market-making-workspace .st-quote-grid .mkm-ticket-actions .btn { width: 100%; }
#market-making-workspace .st-quote-px {
  /* The margin fields' own size (mm-sim.css, .mkm-ticket-form
     .sidebar-input), so a two-way outright's points and all-in rate fit
     beside them with their decimals in one column. */
  font-size: 0.95rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Each bid and each ask right-aligned in a column as wide as its longer
   price, so the two rows' slashes and last digits line up (owner,
   2026-10-23). */
#market-making-workspace .st-pc { display: inline-block; text-align: right; }
#market-making-workspace .st-pc-0 { width: calc(var(--st-w0, 1) * 1ch); }
#market-making-workspace .st-pc-1 { width: calc(var(--st-w1, 1) * 1ch); }
#market-making-workspace .st-quote-desk { color: var(--text-secondary); }
#market-making-workspace .st-quote-client { color: var(--text); font-weight: 700; }

/* ── A sales ticket's margin fields ───────────────────────────────── */

/* A sales ticket's fields hold a margin in pips, four characters at most
   (12.5), where the desk's own fields hold a seven-digit price. Cut to
   the margin, the row keeps room for Requote or Ask trader and Decline
   (owner, 2026-10-23). The market making field's own construction, at
   three and four digits instead of seven. */
#market-making-workspace .mkm-quote-field.st-margin-field {
  min-width: calc(3ch + 18px);
  max-width: calc(4ch + 18px);
}

/* ── The trader's Blotter: a sales deal flashes ─────────────────────── */

/* A client deal a sales seat priced off the feed lands in the trader's
   book unseen, so its Blotter line takes the flash a fresh headline takes
   in News (mm-sim.css, #mkm-news .mkm-feed-item--new; owner, 2026-10-23). */
#market-making-workspace #mkm-blotter .mkm-feed-item--new {
  animation: mkm-news-flash 10s ease-out 1;
}

/* ── Solid toasts, the hedge fund app's (portfolio-sim.css) ────────── */

/* The platform toast is a translucent tint drawn for a dark page; over
   the desk the message and the panel under it read through each other
   (owner, 2026-10-23, on the trader's deal toast). The hedge fund app
   met the same fault with a solid card, copied here as it is. */
.em-toast {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
}
/* Error toasts follow the one look ruled for every sim (owner, 2026-09-04):
   dark red border, light red fill, black text. The values are base.css's;
   they are repeated here because the `.em-toast` card above would otherwise
   win on source order and paint the error toast as a plain surface card. */
.em-toast-error {
  background: color-mix(in srgb, var(--negative) 18%, #fff);
  border-color: color-mix(in srgb, var(--negative) 60%, #000);
  color: #000;
}
.em-toast-success {
  background: color-mix(in srgb, var(--positive) 12%, var(--bg-surface));
  border-color: var(--positive);
  color: var(--text);
}
.em-toast-info {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--bg-surface));
  border-color: var(--color-accent);
  color: var(--text);
}
/* Light mode needs saying again. base.css carries its own light overrides
   for these three, written as `[data-theme="light"] .em-toast-error`, and
   two selectors beat the one above however the files are ordered. So the
   translucent tint came back in light mode only, and a risk message sat over
   the instrument panel with the panel reading through the text. Same
   selector shape here, and this file loads after base.css. */
[data-theme="light"] .em-toast-error {
  background: color-mix(in srgb, var(--negative) 18%, #fff);
  color: #000;
}
[data-theme="light"] .em-toast-success {
  background: color-mix(in srgb, var(--positive) 12%, var(--bg-surface));
  color: var(--text);
}
[data-theme="light"] .em-toast-info {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--bg-surface));
  color: var(--text);
}

/* ── The Briefing, the hedge fund Briefing's document layout ───────── */

#market-making-workspace #tab-briefing .tab-content-area { padding-top: 48px; }
#market-making-workspace .ref-mech-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 62rem);
  gap: 32px;
  align-items: start;
  justify-content: center;
  margin: 0 auto;
}
#market-making-workspace .ref-mechanics > p,
#market-making-workspace .ref-mechanics > .doc-part,
#market-making-workspace .ref-mechanics > .ref-section {
  max-width: var(--measure-prose, 46rem);
}
#market-making-workspace .ref-mechanics .data-table-wrap {
  max-width: var(--measure-prose, 46rem);
  margin: var(--space-subsection, 32px) 0;
}
#market-making-workspace .ref-mechanics .data-table { table-layout: auto; }
#market-making-workspace .ref-mechanics .data-table thead th { white-space: normal; text-align: left; }
/* The Briefing's tables hold sentences: their cells wrap inside the prose
   measure and read left-aligned from the top, as the platform handbook's
   tables do (components.css, .learn-chapter-body .data-table tbody td),
   so no table scrolls sideways (owner, 2026-10-23). */
#market-making-workspace .ref-mechanics .data-table tbody td {
  white-space: normal;
  text-align: left;
  vertical-align: top;
}
#market-making-workspace .ref-toc {
  position: sticky;
  top: 8px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 8px;
  padding-bottom: 40px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  counter-reset: ref-section;
}
#market-making-workspace .ref-toc-group {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 6px 10px 4px 6px;
  margin-top: 14px;
}
#market-making-workspace .ref-toc-group:first-child { margin-top: 0; padding-top: 2px; }
#market-making-workspace .ref-toc-link {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  align-items: baseline;
  gap: 6px;
  padding: 7px 10px 7px 6px;
  border-radius: 4px;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
  counter-increment: ref-section;
}
#market-making-workspace .ref-toc-link::before {
  content: counter(ref-section) ".";
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-align: right;
  padding-right: 4px;
}
#market-making-workspace .ref-toc-link:hover {
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
#market-making-workspace .ref-toc-link:hover::before { color: var(--text-secondary); }
#market-making-workspace .ref-toc-link.active {
  color: var(--text);
  font-weight: 600;
  background: transparent;
}
#market-making-workspace .ref-toc-link.active::before {
  color: var(--color-accent);
  font-weight: 600;
}
#market-making-workspace .ref-mech-layout .ref-mechanics .ref-section,
#market-making-workspace .ref-mech-layout .ref-mechanics .doc-part { scroll-margin-top: 16px; }
@media (max-width: 900px) {
  #market-making-workspace .ref-mech-layout { grid-template-columns: 1fr; }
  #market-making-workspace .ref-toc { display: none; }
}
#market-making-workspace .ref-mechanics {
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--text);
}
#market-making-workspace .ref-mechanics p { margin: 0 0 var(--space-block, 16px); }
#market-making-workspace .ref-mechanics .ref-section {
  margin: 36px 0 10px;
  font-size: var(--text-h3);
  line-height: var(--line-tight);
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
#market-making-workspace .doc-part {
  font-size: var(--text-h2);
  line-height: var(--line-tight);
  font-weight: 700;
  margin: 48px 0 4px;
  color: var(--text);
}
#market-making-workspace .doc-part:first-child { margin-top: 0; }

/* The count on a page's name in the header (app.js paintTabCounts; owner,
   2026-10-26): the name stays where it is whether a count shows or not,
   and the count has square corners. Equal negative margins above and
   below take the count out of the height of the line, and the middle
   alignment keeps it centred on the name. */
#header-tab-nav .tab-btn .badge[data-count] {
  vertical-align: middle;
  margin-block: -1em;
  border-radius: 0;
}