/* Capital Markets Simulation, participant app.

   The shell takes the hedge fund app's rules from portfolio-sim.css (the
   workspace, the sidebar, the page panels, the pause hold), loaded before
   this file, so the two participant apps share one design. This file holds
   only what this sim adds, and adds no font size: the scale is the one in
   the owner's rule (13, 15, 16, 17, 19). */

/* The lockup name at the market making size, because the name is the
   longest of the sims (console.css carries the same rule for the trainer
   and admin headers). */
body[data-sim="capitalmarkets"] .header-logo-mount .lockup-led {
  --led-name-size: 19px;
}

/* Every number in the mono face, outside a table heading: the market
   making sheet's global rule (mm-sim.css). portfolio-sim.css sets the face
   on .num only inside its own panels, so a number this app marked outside
   them read in the interface face. The numbers inside the prose of the
   Sales Memo and the Briefing are not marked and stay in Inter (owner
   ruling 2026-10-22). */
.num:not(th) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── The disclaimer modal ──────────────────────────────────────────── */

/* showDisclaimerModal() in shared/disclaimer.js builds .modal-overlay /
   .modal-dialog markup, which neither this page's sheets nor the hedge
   fund sheet carry, so the Disclaimer link appended an unstyled block at
   the foot of the page (owner, 2026-10-25). The market making sheet's
   rules (mm-sim.css "Confirm modal shell"), as the Sales & Trading page
   shows them, copied to the declaration. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: modalFadeIn 150ms ease;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-dialog {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 28px 32px 24px;
  min-width: 380px;
  max-width: 460px;
  box-shadow: none;
  animation: modalSlideIn 200ms ease;
}
.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.modal-message {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.modal-actions .btn { border-radius: 0; }

/* The stage explainer (stage_announce.js): the bank ALM sim's feature
   explainer, alm.css .tm-modal, .tm-title, .tm-actions and the .fa-
   rules, and its .btn-success, copied to the declaration. The overlay
   carries .cm-alm, so the ALM's palette applies inside it. */
.tm-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  /* Square, where the ALM's are rounded: every card on this screen has
     square corners (owner, 2026-10-25). */
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  width: min(520px, 92vw);
  padding: 24px 28px;
  animation: modalSlideIn 200ms ease;
}
.tm-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-accent); margin-bottom: 12px; }
.tm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.fa-name { font-size: 19px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.fa-summary { margin-bottom: 18px; }
.fa-text { font-size: 15px; line-height: 1.55; color: var(--text); word-break: break-word; }
.fa-section { margin-bottom: 14px; }
.fa-section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); margin-bottom: 4px; }
.fa-sections { margin-bottom: 22px; }
.cm-alm .btn-success {
  background: var(--positive-bg);
  color: var(--positive);
  border: 1px solid color-mix(in srgb, var(--positive) 35%, transparent);
}
.cm-alm .btn-success:hover { background: color-mix(in srgb, var(--positive) 22%, transparent); }

/* ── Shell: the bank ALM sim's ─────────────────────────────────────── */

/* The sidebar navigation, the disclaimer footer and the header's team
   name, round pill and connection are the bank ALM sim's participant
   shell, copied verbatim (its index.html and css/alm.css; owner rulings
   2026-10-22). This page's foundation is the platform's, whose tokens
   differ from the ALM's, so the copied pieces carry the ALM's palette on
   .cm-alm (alm.css :root and [data-theme="light"]) and every rule below
   is the ALM's to the declaration.

   The ALM's colours reach the whole workspace too (the ALM look design 2,
   owner 2026-10-25): .cm-alm-palette on #pm-workspace carries the colour
   tokens alone, so every page reads the ALM's page, card, border, text,
   accent, green and red, while the pages keep their own fonts and
   corners. */
.cm-alm,
.cm-alm-palette {
  --bg: #0D1117;
  --bg-surface: #161B22;
  --bg-header: #1A1F26;
  --bg-elevated: #1C232C;
  --bg-input: #20262F;
  --bg-hover: #262C36;
  --border: #252830;
  --border-subtle: #1a1c22;
  --text: #e8eaf0;
  --text-secondary: #c8ccdc;
  --text-muted: #9da3b8;
  --color-accent: #4f8cff;
  --color-accent-light: #6da0ff;
  --color-accent-bg: rgba(79, 140, 255, 0.15);
  --positive: #34d399;
  --positive-bg: rgba(52, 211, 153, 0.15);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.15);
  --negative: #f87171;
  --negative-bg: rgba(248, 113, 113, 0.15);
}
.cm-alm {
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --transition: 150ms ease;
}
[data-theme="light"] .cm-alm,
[data-theme="light"] .cm-alm-palette {
  --bg: #f5f5f7;
  --bg-elevated: #ffffff;
  --bg-surface: #ffffff;
  --bg-header: #ffffff;
  --bg-hover: #f0f0f2;
  --bg-input: #f8f8fa;
  --border: #e0e0e4;
  --border-subtle: #eaeaee;
  --text: #1a1a1e;
  --text-secondary: #404048;
  --text-muted: #5a5a64;
  --color-accent: #2563eb;
  --color-accent-light: #1d4ed8;
  --color-accent-bg: rgba(37, 99, 235, 0.1);
  --positive: #047857;
  --positive-bg: rgba(4, 120, 87, 0.12);
  --negative: #dc2626;
  --negative-bg: rgba(220, 38, 38, 0.10);
  --warning: #b45309;
  --warning-bg: rgba(180, 83, 9, 0.12);
}
/* The page on the ALM's page colour, every page. */
#pm-workspace.cm-alm-palette .workspace-content { background: var(--bg); }
/* The decision pages' tiles keep a shade inside them: the ALM's light
   elevated colour is white, the tile's own, so in the light theme the
   caption bars, the row hovers and the call cards inside a tile take the
   ALM's page grey (the ALM look design, owner decision 8). The Debrief's
   tiles are ALM cards and keep the ALM's elevated white. */
[data-theme="light"] #pm-workspace.cm-alm-palette .tab-panel:not(#tab-debrief) .pm-frame { --bg-elevated: #f5f5f7; }

/* The two shells' containers. The ALM's .app-body gutter is this
   workspace's own (--workspace-gutter, 28px in both); the line between
   the sidebar and the page is the sidebar's border, as in the ALM, so the
   platform's divider on the page is taken off. The ALM's header centres
   its items where the platform's stretches them, and the ALM's logo does
   not take the sidebar's width. */
#pm-workspace .workspace-content { border-left: 0; }
body[data-sim="capitalmarkets"] .header-logo { width: auto; }
.cm-header-team,
.header-round-info,
.header-status { align-self: center; }
.cm-header-team[hidden],
.header-round-info[hidden],
.header-status[hidden] { display: none; }

/* alm.css .sidebar, .sidebar-nav, .nav-item, .nav-divider, .sidebar-footer. */
.sidebar {
  width: 200px;
  padding-bottom: 20px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active { background: var(--color-accent-bg); color: var(--color-accent); }
.nav-item[hidden] { display: none; }
.nav-item.nav-disabled { opacity: 0.35; cursor: default; }
.nav-item.nav-disabled:hover { background: transparent; color: var(--text-muted); }
.nav-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 12px;
}
/* alm.css .nav-subnav and .nav-subitem: the Reference entry's pages,
   Briefing and Glossary, listed under it while one of them is open, as
   the ALM sim lists How to Play, Simulation Logic and Glossary (owner,
   2026-10-25). */
.nav-subnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 4px;
}
.nav-subnav:empty { display: none; }
.nav-subitem {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 12px 7px 26px;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.nav-subitem:hover { background: var(--bg-hover); color: var(--text); }
.nav-subitem.active { color: var(--color-accent); font-weight: 600; }
.sidebar-footer {
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--bg-surface);
}

/* alm.css .app-logo (the row), .header-team-name, .header-rename-input,
   .header-online and .online-avatar-sm. */
.cm-header-team {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-team-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  padding-left: 20px;
  border-left: 1px solid var(--border);
  margin-left: 8px;
  letter-spacing: -0.3px;
  cursor: pointer;
}
.header-team-name:hover { color: var(--color-accent); }
.header-rename-input { font-size: 16px; font-weight: 600; width: 220px; padding: 4px 8px; }
.header-online { display: flex; gap: 4px; margin-left: 4px; }
.online-avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* alm.css .header-round-info, its label, status and timer. */
.header-round-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  margin-right: 16px;
  padding: 6px 14px;
  background: var(--color-accent-bg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: 0 0 8px rgba(79, 140, 255, 0.15);
}
.header-round-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-accent);
  white-space: nowrap;
}
.header-round-status {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.header-round-timer {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.header-round-timer.warning {
  color: var(--warning);
  animation: timer-pulse 1.5s infinite;
}
.header-round-timer.urgent {
  color: var(--negative);
  animation: timer-pulse 0.8s infinite;
}
.header-round-timer.expired {
  color: var(--negative);
  font-size: 12px;
  letter-spacing: 0.5px;
  animation: timer-pulse 0.5s infinite;
}
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* alm.css .header-status (the dot itself is portfolio-sim.css's copy of
   the same .status-dot). */
.header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ── Company ───────────────────────────────────────────────────────── */

/* The platform's Company Snapshot (equities.css, "Company Snapshot Tab";
   owner ruling 2026-10-22), with sentence-case panel titles, as every
   title on the participant pages. A row opens no card here: its label has
   a tooltip.

   The Company and Terms pages have three sizes, one job each (owner
   ruling 2026-10-22, after the first copy left headings smaller than
   their content): 19px bold for the page title and the large numbers,
   16px bold for a panel title, 15px for everything else. Inside 15px the
   weight and the ink set the order: a sub-heading or a column heading
   600 in the secondary ink, a label 500 in the secondary ink, a value
   600 in the text ink, a note 400 in the muted ink. */
#pm-workspace .cs-wrap { padding: 0 0 12px; font-size: 15px; }
#pm-workspace .cs-header {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 18px;
  margin-bottom: 8px;
}
#pm-workspace .cs-header-main {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap;
}
#pm-workspace .cs-ticker-block { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
#pm-workspace .cs-ticker { font-size: 19px; font-weight: 700; letter-spacing: 0.02em; color: var(--text); }
#pm-workspace .cs-legalname { font-size: 15px; color: var(--text-secondary); font-weight: 500; }
#pm-workspace .cs-price-block { display: flex; align-items: baseline; gap: 12px; }
#pm-workspace .cs-price { font-size: 19px; font-weight: 700; color: var(--text); }
#pm-workspace .cs-change { font-size: 15px; color: var(--text-secondary); }
#pm-workspace .cs-header-meta {
  margin-top: 4px; color: var(--text-secondary);
  font-size: 15px; display: flex; gap: 10px; flex-wrap: wrap;
}
#pm-workspace .cs-dot { opacity: 0.5; }
#pm-workspace .cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#pm-workspace .cs-panel {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 0; padding: 8px 12px 6px;
}
#pm-workspace .cs-panel--wide { grid-column: span 2; }
#pm-workspace .cs-panel-title {
  font-size: 16px; font-weight: 700; color: var(--sidebar-accent);
  margin: 0 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
#pm-workspace .cs-panel-body { display: flex; flex-direction: column; }
#pm-workspace .cs-field { border-bottom: 1px dashed color-mix(in srgb, var(--border) 60%, transparent); }
#pm-workspace .cs-field:last-child { border-bottom: none; }
#pm-workspace .cs-field-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 4px 4px;
}
#pm-workspace .cs-label { font-size: 15px; color: var(--text-secondary); flex: 0 0 auto; font-weight: 500; }
#pm-workspace .cs-value {
  font-size: 15px; font-weight: 600; color: var(--text);
  text-align: right; overflow-wrap: anywhere;
}
/* The heading over each block of the revenue split. */
#pm-workspace .cs-subhead { font-size: 15px; font-weight: 600; color: var(--text-secondary); padding: 8px 4px 2px; }
#pm-workspace .cs-subhead:first-child { padding-top: 0; }
/* The two tables the snapshot does not have, in its row style: the
   label in the secondary ink, the value in the text ink, dashed rules. */
#pm-workspace .cs-table { width: 100%; border-collapse: collapse; font-size: 15px; }
#pm-workspace .cs-table th {
  font-size: 15px; font-weight: 600; color: var(--text-secondary);
  text-align: left; padding: 4px;
}
#pm-workspace .cs-table th.right,
#pm-workspace .cs-table td.right { text-align: right; }
#pm-workspace .cs-table td {
  padding: 4px; color: var(--text); font-weight: 600;
  border-top: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}
#pm-workspace .cs-table td:first-child { color: var(--text-secondary); font-weight: 500; }
@media (max-width: 1100px) {
  #pm-workspace .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Terms ─────────────────────────────────────────────────────────── */

/* The Company page's panels (above), a panel across the grid, and the
   structure and the fees as three stacked bars side by side. */
#pm-workspace .cs-panel--full { grid-column: 1 / -1; }
#pm-workspace .cm-tm-stacks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
/* The platform's stacked bar (lifecycle.css, "Margin simulator stacked
   bar"), on the two pages' three sizes; side by side in the grid, so
   without its margin above. The segment colours are its own three
   mixes. */
#pm-workspace .lc-coll-stack {
  margin-top: 0;
  padding: 1rem 1.1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0;
}
#pm-workspace .lc-coll-stack-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
}
#pm-workspace .lc-coll-stack-title { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
#pm-workspace .lc-coll-stack-total {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
#pm-workspace .lc-coll-stack-bar {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
#pm-workspace .lc-coll-stack-seg { height: 100%; }
#pm-workspace .lc-coll-stack-seg--accent,
#pm-workspace .lc-coll-stack-leg--accent .lc-coll-stack-leg-dot { background: color-mix(in srgb, var(--color-accent) 70%, transparent); }
#pm-workspace .lc-coll-stack-seg--warning,
#pm-workspace .lc-coll-stack-leg--warning .lc-coll-stack-leg-dot { background: color-mix(in srgb, var(--warning) 75%, transparent); }
#pm-workspace .lc-coll-stack-seg--muted,
#pm-workspace .lc-coll-stack-leg--muted .lc-coll-stack-leg-dot { background: color-mix(in srgb, var(--text-muted) 40%, transparent); }
#pm-workspace .lc-coll-stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  margin-top: 0.7rem;
  font-size: 15px;
}
#pm-workspace .lc-coll-stack-leg { display: inline-flex; align-items: center; gap: 0.4rem; }
#pm-workspace .lc-coll-stack-leg-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
#pm-workspace .lc-coll-stack-leg-label { color: var(--text-secondary); font-weight: 500; }
#pm-workspace .lc-coll-stack-leg-val { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
#pm-workspace .lc-coll-stack-sub { margin-top: 0.6rem; font-size: 15px; color: var(--text-muted); }

/* The equities module's timeline (equities.css .eq-timeline), on the
   two pages' 15px and with its labels in sentence case, as every label on
   the participant pages: the event as the heading, its date and its note
   under it. A stop the session has reached is active. */
#pm-workspace .eq-timeline { display: flex; align-items: flex-start; gap: 0; margin: 8px 0 4px; padding: 16px 0 8px; overflow-x: auto; }
#pm-workspace .eq-timeline-event { flex: 1; min-width: 150px; text-align: center; position: relative; padding: 40px 6px 0; }
#pm-workspace .eq-timeline-event::before { content: ''; position: absolute; top: 16px; left: 0; right: 0; height: 2px; background: var(--border); }
#pm-workspace .eq-timeline-event::after { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--border); z-index: 1; }
#pm-workspace .eq-timeline-event.active::after { background: var(--sidebar-accent); border-color: var(--sidebar-accent); }
#pm-workspace .eq-timeline-label { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
#pm-workspace .eq-timeline-date { font-size: 15px; color: var(--text-secondary); margin-bottom: 6px; }
#pm-workspace .eq-timeline-desc { font-size: 15px; color: var(--text-muted); line-height: 1.4; }

/* The rules: the readouts' large numbers, the rule in the page's text,
   and the regulation under it in the platform's source line. */
#pm-workspace .cm-tm-rule-stats { margin: 4px 4px 10px; }
#pm-workspace .cm-tm-rule-stats .cm-stat-label { font-size: 15px; font-weight: 500; color: var(--text-secondary); }
#pm-workspace .cm-tm-rule-stats .cm-stat-value { font-weight: 700; }
#pm-workspace .cs-wrap .data-source-footer { font-size: 15px; }
#pm-workspace .cm-tm-rule-text { font-size: 15px; line-height: 1.5; color: var(--text); margin: 4px 4px 0; }

/* ── Order Book ────────────────────────────────────────────────────── */

/* The Order Book, Pricing and Allocation pages fill the window like the
   hedge fund Trading Desk: app.js sets pm-desk-active on the workspace
   while one shows, and the content host is the flex column the page
   stretches into (the desk's #pm-desk-content rule, for these hosts). */
#pm-workspace.pm-desk-active #cm-book-content,
#pm-workspace.pm-desk-active #cm-pricing-content,
#pm-workspace.pm-desk-active #cm-allocation-content {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* The replay bar, the chart and the activity beside it, and the book,
   tiled on the desk's 1px seams. The chart row is a fixed height and the
   book takes what is left, scrolling inside itself. */
#pm-workspace .cm-book {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 300px minmax(0, 1fr);
  gap: 1px;
  background: var(--bg);
}
#pm-workspace .cm-book-row {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1px;
  background: var(--bg);
}
#pm-workspace .cm-replay {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
}
/* The readouts over the replay controls (owner ruling 2026-10-22: the
   page's hierarchy starts with the book's time and its coverage). */
#pm-workspace .cm-book-stats { padding: 8px 10px 2px; }
#pm-workspace .cm-replay-play { min-width: 72px; }
#pm-workspace .cm-replay-slider { flex: 1 1 auto; min-width: 120px; }

/* The coverage chart under its legend, clear of the enlarge button. */
#pm-workspace .cm-coverage-frame .pm-frame-head { padding-right: 40px; }
#pm-workspace .cm-coverage-chart { flex: 1 1 0; min-height: 0; }
#pm-workspace .cm-key-line { width: 12px; border-top: 2px solid var(--pm-est); }

/* The activity feed: the sales note under its order. */
#pm-workspace .cm-feed-note { display: block; color: var(--text-muted); }

/* The book: the grouping control beside the count in the caption bar. */
#pm-workspace .cm-orders-frame { min-height: 0; }
#pm-workspace .cm-orders-frame .pm-frame-head { align-items: center; }
#pm-workspace .cm-orders-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Every column declared, as the desk's tables are under fixed layout. */
#pm-workspace .cm-orders th:nth-child(1) { width: 22%; }
#pm-workspace .cm-orders th:nth-child(2) { width: 14%; }
#pm-workspace .cm-orders th:nth-child(3) { width: 5%; }
#pm-workspace .cm-orders th:nth-child(4) { width: 13%; }
#pm-workspace .cm-orders th:nth-child(5) { width: 11%; }
#pm-workspace .cm-orders th:nth-child(6) { width: 12%; }
#pm-workspace .cm-orders th:nth-child(7) { width: 12%; }
#pm-workspace .cm-orders th:nth-child(8) { width: 11%; }
/* The order type beside its prices, one price a line. */
#pm-workspace .cm-order-cell {
  display: inline-grid;
  grid-template-columns: max-content max-content;
  gap: 0 6px;
}
#pm-workspace .cm-orders th.is-sorted { color: var(--text); }
/* The table's order (owner ruling 2026-10-22): the account and the
   order's size in bold in the text ink, the other columns in the
   secondary ink, a firmer line under the column headings, and the count
   on a group heading in the heading's own weight. */
#pm-workspace .cm-orders td { color: var(--text-secondary); }
#pm-workspace .cm-orders td.pm-sym,
#pm-workspace .cm-orders td[data-cell="size"] { color: var(--text); font-weight: 600; }
#pm-workspace .cm-orders th { border-bottom-color: var(--text-muted); }
/* A step order prints one price and one size a line, so the row's cells
   start at the top. */
#pm-workspace .cm-orders td { vertical-align: top; }
#pm-workspace .cm-orders tbody tr[data-id] { cursor: pointer; }
#pm-workspace .cm-orders tbody tr[data-id]:hover { background: var(--bg-elevated); }
#pm-workspace .cm-orders tbody tr.pm-row-selected {
  background: var(--bg-elevated);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}
#pm-workspace .cm-amended { color: var(--text-muted); }
/* The group heading between blocks of the book: the market grid's region
   heading (.pm-market .pm-market-block td in portfolio-sim.css). */
#pm-workspace .cm-orders .cm-orders-block td {
  position: sticky;
  top: 23px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: 600;
  padding-top: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
#pm-workspace .cm-orders .cm-block-count { color: var(--text-muted); font-weight: 600; }
/* The sales note row under an order. */
#pm-workspace .cm-orders .cm-note-row td {
  white-space: normal;
  padding: 6px 10px 10px;
}
#pm-workspace .cm-note-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 16px;
}
#pm-workspace .cm-note-label { color: var(--text-muted); }

/* The deal news, as the market making desk's news feed (mm-sim.css
   .mkm-feed-item, #mkm-news and its mkm-news-flash; owner ruling
   2026-10-23): the newest item on top, a new arrival in the accent for
   ten seconds and then fading; the source in the feed's time column; under
   headings by stage and aftermarket day, set as the book's group
   headings; the order flow in the secondary ink. */
#pm-workspace .cm-news-row {
  display: flex;
  gap: 10px;
  padding: 4px 12px;
  font-size: 15px;
  line-height: 1.5;
}
/* The source column has one width, so every item's text starts on the
   same edge (owner, 2026-10-25); a longer source wraps inside it. */
#pm-workspace .cm-news-src {
  color: var(--text-muted);
  flex: 0 0 112px;
  width: 112px;
}
#pm-workspace .cm-news-text { flex: 1 1 0; min-width: 0; }
#pm-workspace .cm-news-text { color: var(--text); font-weight: 600; }
#pm-workspace .cm-news-row--flow .cm-news-text { color: var(--text-secondary); font-weight: 400; }
#pm-workspace .cm-news-head {
  padding: 7px 12px 5px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
@keyframes cm-news-flash {
  0% { background: color-mix(in srgb, var(--color-accent) 50%, transparent); }
  80% { background: color-mix(in srgb, var(--color-accent) 35%, transparent); }
  100% { background: transparent; }
}
#pm-workspace .cm-news-row--new { animation: cm-news-flash 10s ease-out 1; }
/* The day's order flow so far, over the aftermarket's news. */
#pm-workspace .cm-flow-today {
  display: flex;
  gap: 10px;
  padding: 6px 12px;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
}
#pm-workspace .cm-flow-today:empty { display: none; }
#pm-workspace .cm-flow-today .cm-news-text { color: var(--text-secondary); font-weight: 400; }

/* The Order Book's activity items: each under its kind and its time, the
   items apart on a hairline (the feed's own .pm-feed-next hairline). */
#pm-workspace .cm-news-item {
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
#pm-workspace .cm-news-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
#pm-workspace .cm-news-source { color: var(--text); font-weight: 600; }
#pm-workspace .cm-news-when { color: var(--text-muted); }
#pm-workspace .cm-news-item .pm-feed-text { color: var(--text); }
/* The book's activity in the same items: the text in the secondary ink,
   the account in bold, a bookrunner message in the text ink. */
#pm-workspace .cm-act-item .pm-feed-text { color: var(--text-secondary); }
#pm-workspace .cm-feed-account { font-weight: 600; color: var(--text); }
#pm-workspace .cm-act-message { color: var(--text); }

/* ── Pricing ───────────────────────────────────────────────────────── */

/* The chart over the deal at the chosen price on the left, the form over
   the deal news on the right, tiled on the desk's seams. */
#pm-workspace .cm-pricing {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr);
  gap: 1px;
  background: var(--bg);
}
#pm-workspace .cm-pricing-left,
#pm-workspace .cm-pricing-right {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--bg);
}
/* The chart takes about 55% of its column, so the deal at the chosen
   price sits higher (owner ruling 2026-10-22). */
#pm-workspace .cm-pricing-left { grid-template-rows: minmax(0, 55fr) minmax(0, 45fr); }
#pm-workspace .cm-pricing-right { grid-template-rows: auto minmax(0, 1fr); }
/* Role mode adds the recommendations between the form and the news. */
#pm-workspace .cm-pricing-right--roles { grid-template-rows: auto auto minmax(0, 1fr); }
#pm-workspace .cm-rec {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
#pm-workspace .cm-rec-note { color: var(--text-muted); margin-top: 2px; }
#pm-workspace .cm-rec-form { display: flex; flex-direction: column; gap: 8px; }
#pm-workspace .cm-rec-form[hidden],
#pm-workspace .cm-rec .btn[hidden] { display: none; }
#pm-workspace .cm-pr-at {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 16px;
  padding: 2px 0 6px;
}
#pm-workspace .cm-kv td:first-child { width: 62%; color: var(--text-secondary); }
#pm-workspace .cm-key-price { width: 2px; height: 10px; background: var(--color-accent-text); }
#pm-workspace .cm-key-deal { width: 12px; border-top: 2px dashed var(--color-accent-text); }

/* The decision forms: the trade ticket's fields and labels. */
#pm-workspace .cm-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px 10px;
}
#pm-workspace .cm-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#pm-workspace .cm-form-note,
#pm-workspace .cm-form-status { color: var(--text-muted); }
#pm-workspace .cm-form-actions { display: flex; justify-content: flex-end; }

/* ── Allocation ────────────────────────────────────────────────────── */

/* The readouts and Submit across the top; the fills by type and tier over
   the deal news on the left, the main panel; the accounts of the group
   selected beside it (owner ruling 2026-10-22). */
#pm-workspace .cm-alloc {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1px;
  background: var(--bg);
}
#pm-workspace .cm-alloc-head { grid-column: 1 / -1; padding: 8px 10px; }
#pm-workspace .cm-alloc-bar { display: flex; align-items: center; gap: 16px; }
/* The readouts, on this page, the Aftermarket and the Debrief: the label
   over the number, the number set large. */
#pm-workspace .cm-stats {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
#pm-workspace .cm-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}
#pm-workspace .cm-stat-label { color: var(--text-muted); font-size: 13px; }
#pm-workspace .cm-stat-value { color: var(--text); font-size: 19px; font-weight: 600; }
/* Shares still to allocate, until none are left. */
#pm-workspace .cm-stat-value.is-open { color: var(--warning); }
#pm-workspace .cm-alloc-status { margin-top: 6px; }
#pm-workspace .cm-alloc-book { min-height: 0; }
#pm-workspace .cm-alloc-side {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--bg);
}

/* The allocation counter: the shares allocated against the shares to
   allocate, the share of them, and a bar to 100% (owner ruling
   2026-10-23). The bar is in the accent below 100%, green at exactly
   100%, red above it. */
#pm-workspace .cm-al-counter {
  flex: 0 0 auto;
  width: 420px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#pm-workspace .cm-al-counter-head { display: flex; align-items: baseline; gap: 10px; }
#pm-workspace .cm-al-counter-value { font-size: 19px; font-weight: 600; color: var(--text); white-space: nowrap; }
#pm-workspace .cm-al-counter-pct { margin-left: auto; font-size: 19px; font-weight: 700; color: var(--color-accent-text); }
#pm-workspace .cm-al-counter-pct.is-full { color: var(--positive); }
#pm-workspace .cm-al-counter-pct.is-over { color: var(--negative); }
#pm-workspace .cm-al-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
#pm-workspace .cm-al-bar-fill { height: 100%; background: var(--color-accent); }
#pm-workspace .cm-al-bar-fill.is-full { background: var(--positive); }
#pm-workspace .cm-al-bar-fill.is-over { background: var(--negative); }
#pm-workspace .cm-al-counter-left { color: var(--text-secondary); }

/* The two tables: headings in sentence case at the scale's 13px, where
   the desk tables' capitals were cut off; an account's roadshow and
   record on a grey second line under its name; a group's count beside
   its name. */
#pm-workspace .cm-groups-table th,
#pm-workspace .cm-al-table th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
#pm-workspace .cm-al-table td { vertical-align: middle; }
#pm-workspace .cm-al-acc { white-space: nowrap; overflow: hidden; }
#pm-workspace .cm-al-acc .pm-sym { overflow: hidden; text-overflow: ellipsis; }
#pm-workspace .cm-al-sub {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .cm-group-count { color: var(--text-muted); margin-left: 4px; }

/* The fill fields as the page's main controls: the rows' size in bold
   with a clear edge; a fill from a group as the grey placeholder; a fill
   the team set itself in full ink with an accent edge. */
#pm-workspace .cm-fill-input {
  width: 100%;
  padding: 4px 8px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
#pm-workspace .cm-fill-input::placeholder { color: var(--text-muted); font-weight: 400; opacity: 1; }
#pm-workspace .cm-fill-input.is-set {
  border-color: var(--color-accent);
  color: var(--text);
}
/* The fill field with its Fill the rest button beside it; the button
   keeps its place when it has nothing to do, so the field never moves. */
#pm-workspace .cm-fill-cell { display: flex; align-items: center; gap: 6px; }
#pm-workspace .cm-fill-cell .cm-fill-input { flex: 1 1 auto; min-width: 0; }
#pm-workspace .cm-rest-btn { flex: 0 0 auto; white-space: nowrap; }
#pm-workspace .cm-rest-btn.is-idle { visibility: hidden; }
/* A code menu only where a code is needed, and the need in the warning
   ink until a code is chosen. */
#pm-workspace .cm-cell-select[hidden] { display: none; }
#pm-workspace .cm-cell-select.is-missing { color: var(--warning); border-color: var(--warning); }
#pm-workspace .cm-groups-table th:nth-child(1) { width: 32%; }
#pm-workspace .cm-groups-table th:nth-child(2) { width: 12%; }
#pm-workspace .cm-groups-table th:nth-child(3) { width: 18%; }
#pm-workspace .cm-groups-table th:nth-child(4) { width: 12%; }
#pm-workspace .cm-groups-table th:nth-child(5) { width: 26%; }
#pm-workspace .cm-groups-table tr[data-key] { cursor: pointer; }
#pm-workspace .cm-groups-table tr[data-key]:hover { background: var(--bg-elevated); }
#pm-workspace .cm-groups-table tr.pm-row-selected {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}
/* The heading over the types and over the tiers: the book's group
   heading (.cm-orders-block). */
#pm-workspace .cm-groups-table .cm-groups-block td {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: 600;
  padding-top: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
#pm-workspace .cm-al-table th:nth-child(1) { width: 30%; }
#pm-workspace .cm-al-table th:nth-child(2) { width: 6%; }
#pm-workspace .cm-al-table th:nth-child(3) { width: 13%; }
#pm-workspace .cm-al-table th:nth-child(4) { width: 27%; }
#pm-workspace .cm-al-table th:nth-child(5) { width: 8%; }
#pm-workspace .cm-al-table th:nth-child(6) { width: 16%; }
/* Role mode adds the Proposed column to both tables. */
#pm-workspace .cm-groups-table--roles th:nth-child(1) { width: 28%; }
#pm-workspace .cm-groups-table--roles th:nth-child(2) { width: 10%; }
#pm-workspace .cm-groups-table--roles th:nth-child(3) { width: 14%; }
#pm-workspace .cm-groups-table--roles th:nth-child(4) { width: 14%; }
#pm-workspace .cm-groups-table--roles th:nth-child(5) { width: 10%; }
#pm-workspace .cm-groups-table--roles th:nth-child(6) { width: 24%; }
#pm-workspace .cm-al-table--roles th:nth-child(1) { width: 26%; }
#pm-workspace .cm-al-table--roles th:nth-child(2) { width: 5%; }
#pm-workspace .cm-al-table--roles th:nth-child(3) { width: 11%; }
#pm-workspace .cm-al-table--roles th:nth-child(4) { width: 13%; }
#pm-workspace .cm-al-table--roles th:nth-child(5) { width: 23%; }
#pm-workspace .cm-al-table--roles th:nth-child(6) { width: 7%; }
#pm-workspace .cm-al-table--roles th:nth-child(7) { width: 15%; }
#pm-workspace .cm-alloc-bar .btn[hidden] { display: none; }
/* A field inside a table row: the row's own type and a tight box, so the
   rows keep the book's density. */
#pm-workspace .cm-cell-input,
#pm-workspace .cm-cell-select {
  padding: 1px 6px;
  font-size: inherit;
}
#pm-workspace .cm-cell-input.is-set { font-weight: 600; }
#pm-workspace .cm-penalty { padding: 8px 10px; }
#pm-workspace .cm-alloc-closed { padding: 10px 0; }


/* ── Aftermarket ───────────────────────────────────────────────────── */

/* The clock and the readouts across the top; on the left the share price
   at about 40% of the column over the deal news at full width; on the
   right the stabilisation panel over the day-by-day record (owner ruling
   2026-10-23: the news matters more than the chart). */
#pm-workspace.pm-desk-active #cm-aftermarket-content {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#pm-workspace .cm-after {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 440px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1px;
  background: var(--bg);
}
#pm-workspace .cm-after-head { grid-column: 1 / -1; padding: 8px 10px; }
#pm-workspace .cm-after-left,
#pm-workspace .cm-after-right {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--bg);
}
#pm-workspace .cm-after-left { grid-template-rows: minmax(0, 2fr) minmax(0, 3fr); }
/* The investor calls over the stabilisation panel over the day-by-day
   record (the aftermarket rethink, design section 10). */
#pm-workspace .cm-after-right { grid-template-rows: auto auto minmax(0, 1fr); }
/* The three scorecards as of the last close, at the bar's right end. */
#pm-workspace .cm-am-scores { flex: 0 0 auto; }

/* ── Investor calls: the market making desk's call cards (mm-sim.css
   .mkm-calls and .mkm-ticket*, the declarations copied). One column: the
   panel is the right column's width, and a moment has at most two calls. */
#pm-workspace .cm-calls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  padding: 8px 10px;
}
#pm-workspace .cm-placeholder {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 10px 2px;
}
#pm-workspace .cm-ticket {
  background: var(--bg-elevated);
  border: 1px solid transparent;
  padding: 8px 14px 10px;
}
#pm-workspace .cm-ticket-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
#pm-workspace .cm-ticket-client {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 1.02rem;
}
#pm-workspace .cm-ticket-timer {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-secondary);
}
#pm-workspace .cm-ticket-urgent .cm-ticket-timer {
  color: var(--warning);
}
#pm-workspace .cm-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;
}
#pm-workspace .cm-ticket-who {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
#pm-workspace .cm-ticket-who > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#pm-workspace .cm-ticket-outcome {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#pm-workspace .cm-outcome--sold   { color: var(--positive); }
#pm-workspace .cm-outcome--none    { color: var(--text-muted); }
#pm-workspace .cm-ticket-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 5px;
  margin: 6px 0 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  align-items: baseline;
}
#pm-workspace .cm-ticket-facts--pairs {
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
}
#pm-workspace .cm-ticket-facts--line {
  grid-template-columns: 1fr max-content 1fr;
  column-gap: 12px;
}
#pm-workspace .cm-ticket-facts--line .cm-fact-req {
  justify-self: end;
}
#pm-workspace .cm-fact-label {
  font-size: var(--text-meta);
  color: var(--text-muted);
}
#pm-workspace .cm-fact-req {
  font-weight: 600;
}
#pm-workspace .cm-ticket-facts .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
#pm-workspace .cm-ticket-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
#pm-workspace .cm-ticket-actions .btn { padding: 0 8px; }
#pm-workspace .cm-ticket-done { opacity: 1; }
#pm-workspace .cm-ticket-done--buy {
  border-color: var(--positive);
}
#pm-workspace .cm-ticket-done--none {
  border-color: var(--text-muted);
}
/* The stabilisation form: one two-column grid, every field and button on
   the same column edges, the buttons as tall as the fields. */
#pm-workspace .cm-stab-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  align-items: end;
}
#pm-workspace .cm-stab-form .btn { width: 100%; }
#pm-workspace .cm-after-chart-frame .pm-frame-head { padding-right: 40px; }
#pm-workspace .cm-after-closed { padding: 10px 0; }
#pm-workspace .cm-key-price-line { width: 12px; border-top: 2px solid var(--pm-line); }
#pm-workspace .cm-key-offer { width: 12px; border-top: 2px dotted var(--text-muted); }
#pm-workspace .cm-form-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#pm-workspace .cm-form-actions { gap: 8px; }
#pm-workspace .cm-field-button { display: flex; align-items: flex-end; }
#pm-workspace .cm-ledger th:nth-child(1) { width: 16%; }
#pm-workspace .cm-ledger th:nth-child(2) { width: 26%; }
#pm-workspace .cm-ledger th:nth-child(3) { width: 32%; }
#pm-workspace .cm-ledger th:nth-child(4) { width: 26%; }
#pm-workspace .cm-ledger-empty { color: var(--text-muted); }

/* ── Debrief ───────────────────────────────────────────────────────── */

/* A page that scrolls: the panels stacked at the hedge fund debrief's
   width, apart by its 8px (portfolio-sim.css .pm-db-grid). One size for
   the text and the tables, as on the Company and Terms pages (owner
   ruling 2026-10-22): 15px, with the column headings at the scale's
   13px in sentence case as on the Allocation page, the frame titles at
   the desk's 13px and the readouts' numbers at 19px (owner, 2026-10-23:
   the Debrief at the console's standard). */
#pm-workspace .cm-debrief {
  max-width: 1170px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--bg);
  font-size: 15px;
}
#pm-workspace .cm-db-body { padding: 10px 12px 12px; }
#pm-workspace .cm-debrief .data-table-wrap {
  border: 0;
  border-radius: 0;
  overflow-x: visible;
}
#pm-workspace .cm-db-table { font-size: 15px; }
#pm-workspace .cm-db-table thead th {
  font-size: 13px;
  white-space: normal;
  vertical-align: bottom;
}
#pm-workspace .cm-db-table tbody td { vertical-align: top; }
#pm-workspace .cm-db-table tbody td.cm-db-val { white-space: normal; }
#pm-workspace .cm-db-card .pm-frame-note { font-size: 13px; color: var(--text-secondary); }
#pm-workspace .cm-db-flags { font-size: 15px; }
#pm-workspace .cm-db-flags .cm-note-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
/* The three cards in two columns, the issuer over the investors on the
   left and the bank on the right, so no reading needs a scrollbar (owner,
   2026-10-23: a table that scrolls sideways is bad to use; the platform's
   tables keep every cell on one line). */
#pm-workspace .cm-db-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  background: var(--bg);
}
#pm-workspace .cm-db-card--bank { grid-column: 2; grid-row: 1 / span 2; }
/* A reading's name and a text value may run onto a second line; the
   numbers stay on one. */
#pm-workspace .cm-db-table tbody td:first-child,
#pm-workspace .cm-db-table tbody td.cm-db-text { white-space: normal; }
#pm-workspace .cm-db-card .data-table-wrap { margin: 10px 12px; }
#pm-workspace .cm-db-table td:first-child { color: var(--text-secondary); }
#pm-workspace .cm-db-flags { padding: 0 12px 12px; }
#pm-workspace .cm-db-note,
#pm-workspace .cm-db-lead { font-size: 15px; line-height: 1.5; }
#pm-workspace .cm-db-note { margin: 10px 0 0; color: var(--text-muted); }
#pm-workspace .cm-db-lead { margin: 0 0 10px; color: var(--text); }
#pm-workspace .cm-db-split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 16px;
  align-items: start;
}
#pm-workspace .cm-db-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#pm-workspace .cm-db-chart { min-height: 220px; }
#pm-workspace .cm-db-chart--tall { min-height: 280px; }
#pm-workspace .cm-db-scroll { max-height: 360px; overflow-y: auto; }
#pm-workspace .cm-db-own td { font-weight: 600; }
#pm-workspace .cm-key-real { width: 12px; border-top: 2px dotted var(--positive); }

/* ── Bond new issue: the buttons of the decision pages ────────────── */

/* The buttons in the language of the caption bars' segmented control
   (owner, 2026-10-25: the buttons beside the forms read apart from the
   order table's): its square corners and type, the main action in the
   accent as the control's active option, the others outlined on the
   panel's ground; the fields beside them take the same corners. */
#pm-workspace :is(.cm-bb, .cm-pt, .cm-ba, .cm-bam) .btn {
  border-radius: 3px;
  font-size: var(--pm-fs-main);
  font-weight: 500;
}
#pm-workspace :is(.cm-bb, .cm-pt, .cm-ba, .cm-bam) .btn-secondary {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text);
}
#pm-workspace :is(.cm-bb, .cm-pt, .cm-ba, .cm-bam) .btn-secondary:hover:not(:disabled) {
  background: var(--bg-surface);
  border-color: var(--color-accent);
  box-shadow: none;
}
#pm-workspace :is(.cm-bb, .cm-pt, .cm-ba, .cm-bam) .btn-primary:hover:not(:disabled) { box-shadow: none; }
#pm-workspace :is(.cm-bb, .cm-pt, .cm-ba, .cm-bam) :is(.sidebar-input, .sidebar-select) { border-radius: 3px; }

/* ── Bond new issue: the Bookbuild page (the bond design 8.1) ─────── */

/* The statements as rows (owner, 2026-10-25): the label, the fields and
   the button on three shared columns, every button as wide as the widest;
   the updates span the fields and the button column, and Close the books
   takes the button column on the last row. */
#pm-workspace .cm-bb-rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px 10px;
}
#pm-workspace .cm-bb-row { display: contents; }
#pm-workspace .cm-bb-rows .sb-label { margin: 0; }
#pm-workspace .cm-bb-rows > .cm-bb-row > .btn,
#pm-workspace .cm-bb-last { width: 100%; }
#pm-workspace .cm-bb-last { grid-column: 3; }
#pm-workspace .cm-bb-fields { display: flex; align-items: center; gap: 6px; min-width: 0; }
#pm-workspace .cm-bb-fields .sidebar-input,
#pm-workspace .cm-bb-fields .sidebar-select { flex: 1 1 0; min-width: 0; }
#pm-workspace .cm-bb-span { grid-column: 2 / -1; }
#pm-workspace .cm-bb-span .btn { flex: 1 1 0; }
#pm-workspace .cm-bb-to { color: var(--text-muted); }
#pm-workspace .cm-bb-rule { grid-column: 1 / -1; border-top: 1px solid var(--border); }
#pm-workspace .cm-bb-note { grid-column: 1 / -1; }

/* The Pricing page's two columns: the book's chart over the orders on
   the left, the controls, the calls and the news on the right. */
#pm-workspace .cm-bb-left { grid-template-rows: minmax(0, 45fr) minmax(0, 55fr); }
#pm-workspace .cm-bb-calls {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg);
}
#pm-workspace .cm-ticket-text { margin: 4px 0 8px; line-height: 1.45; color: var(--text); }
/* The bond's call card: the desk's bid or offer beside its label (the
   bond design 18.2). */
#pm-workspace .cm-ticket-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 2px;
}
#pm-workspace .cm-ticket-price .sidebar-input { width: 84px; text-align: right; }
#pm-workspace .cm-row-muted td { color: var(--text-muted); }
/* A [hidden] control of the bond pages stays hidden whatever display its
   class gives it (the Pricing page's .cm-rec-form[hidden] rule). */
#pm-workspace .cm-bb [hidden],
#pm-workspace .cm-alloc [hidden] { display: none !important; }

/* ── Bond new issue: the visual pass (owner, 2026-10-25) ──────────── */

/* The owner's ideas of 2026-10-25, for a screen where the information is
   efficient: the deal news folded by day with the order flow as a compact
   block, a frozen decision as one line, tables one line a row with every
   column declared, the Market page tiled as the decision pages are, the
   legends beside the charts, the distribution as two stacked bars, and
   the Aftermarket page's trading result beside the scorecards. Only the
   scale's sizes (13, 15, 19). */

/* A [hidden] element of the bond pages stays hidden whatever display its
   class gives it (the .cm-bb rule above, for the other pages). */
#pm-workspace .cm-pt [hidden],
#pm-workspace .cm-bam [hidden],
#pm-workspace .cm-mk [hidden],
#pm-workspace .cm-news-row[hidden] { display: none !important; }

/* The bond pages' tables: the Allocation page's sentence-case headings at
   the scale's 13px, allowed a second line; the cells' gutters cut to 6px,
   so the columns, not the gutters, take the width. */
#pm-workspace .pm-table.cm-table th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.2;
}
#pm-workspace .pm-table.cm-table th,
#pm-workspace .pm-table.cm-table td { padding-left: 6px; padding-right: 6px; }

/* Label-value pairs on one line (common.js termsLine): a frozen decision,
   the bond's terms, the desk's result. */
#pm-workspace .cm-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  font-size: 15px;
}
#pm-workspace .cm-term { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
#pm-workspace .cm-term-label { color: var(--text-muted); white-space: nowrap; }
#pm-workspace .cm-term-value { color: var(--text); font-weight: 600; }

/* The deal news: a heading folds the entries under it; the order flow as
   the groups' net amounts on one line and the largest sellers and buyers
   on a line each. */
#pm-workspace .cm-news-head.is-foldable { cursor: pointer; user-select: none; }
#pm-workspace .cm-news-head.is-foldable::before {
  content: '\25BE';
  display: inline-block;
  width: 14px;
  color: var(--text-muted);
}
#pm-workspace .cm-news-head.is-folded::before { content: '\25B8'; }
#pm-workspace .cm-flow { display: flex; flex-direction: column; gap: 1px; }
#pm-workspace .cm-flow-line { display: flex; flex-wrap: wrap; gap: 0 14px; }
#pm-workspace .cm-flow-cell { white-space: nowrap; }
#pm-workspace .cm-flow-cell .num { color: var(--text); }
#pm-workspace .cm-flow-label { color: var(--text-muted); }
/* From the aftermarket on, the order flow and the investor calls are
   tables of their own, picked in the caption bar (news.js). */
#pm-workspace .cm-news-views[hidden] { display: none; }
#pm-workspace .cm-flow-table th:nth-child(1) { width: 18%; }
#pm-workspace .cm-flow-table th:nth-child(2),
#pm-workspace .cm-flow-table th:nth-child(3),
#pm-workspace .cm-flow-table th:nth-child(4) { width: 13%; }
#pm-workspace .cm-flow-table th:nth-child(5),
#pm-workspace .cm-flow-table th:nth-child(6) { width: 21.5%; }
#pm-workspace .cm-calls-table th:nth-child(1) { width: 17%; }
#pm-workspace .cm-calls-table th:nth-child(2) { width: 30%; }
#pm-workspace .cm-calls-table th:nth-child(3) { width: 19%; }
#pm-workspace .cm-calls-table th:nth-child(4) { width: 10%; }
#pm-workspace .cm-calls-table th:nth-child(5) { width: 24%; }
/* The bond's Terms page as a termsheet (owner, 2026-10-25): each panel's
   labels in a column as wide as its longest label, every value
   left-aligned beside them, so a value over several lines reads as a
   paragraph. The rows' dashed rules move onto the two cells. */
#pm-workspace .cm-termsheet .cs-panel-body {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
}
#pm-workspace .cm-termsheet .cs-field,
#pm-workspace .cm-termsheet .cs-field-row { display: contents; }
#pm-workspace .cm-termsheet .cs-label,
#pm-workspace .cm-termsheet .cs-value {
  padding: 4px;
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}
#pm-workspace .cm-termsheet .cs-label { padding-right: 16px; }
#pm-workspace .cm-termsheet .cs-value { text-align: left; }
#pm-workspace .cm-termsheet .cs-field:last-child .cs-label,
#pm-workspace .cm-termsheet .cs-field:last-child .cs-value { border-bottom: none; }
/* Price Thoughts once frozen: the deal news takes half the page. */
#pm-workspace .cm-pricing.cm-pt--wide-news { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* The Market page: the readout strip, the curves across, the chart beside
   the comparables' bonds, the recent new issues, tiled on the seams. */
#pm-workspace .cm-mk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--bg);
}
#pm-workspace .cm-mk-head { padding: 8px 10px; }
#pm-workspace .cm-mk-row {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: 1px;
  background: var(--bg);
}
#pm-workspace .cm-mk-scroll { overflow-x: auto; }
#pm-workspace .cm-mk-chart { height: 300px; }
#pm-workspace .cm-mk-rates { height: 240px; }
#pm-workspace .cm-mk-bonds th:nth-child(1) { width: 32%; }
#pm-workspace .cm-mk-bonds th:nth-child(2) { width: 10%; }
#pm-workspace .cm-mk-bonds th:nth-child(3) { width: 13%; }
#pm-workspace .cm-mk-bonds th:nth-child(4) { width: 15%; }
#pm-workspace .cm-mk-bonds th:nth-child(5) { width: 15%; }
#pm-workspace .cm-mk-bonds th:nth-child(6) { width: 15%; }
#pm-workspace .cm-mk-recent th:nth-child(1) { width: 22%; }
#pm-workspace .cm-mk-recent th:nth-child(2),
#pm-workspace .cm-mk-recent th:nth-child(3),
#pm-workspace .cm-mk-recent th:nth-child(8),
#pm-workspace .cm-mk-recent th:nth-child(9) { width: 8%; }
#pm-workspace .cm-mk-recent th:nth-child(4),
#pm-workspace .cm-mk-recent th:nth-child(6),
#pm-workspace .cm-mk-recent th:nth-child(7),
#pm-workspace .cm-mk-recent th:nth-child(10) { width: 9%; }
#pm-workspace .cm-mk-recent th:nth-child(5) { width: 10%; }

/* Price Thoughts: the comparables' chart over the recent new issues over
   the investor sounding (the bond design 19.2), its menu and Sound on one
   row over the answers. */
#pm-workspace .cm-pt .cm-pricing-left { grid-template-rows: minmax(0, 45fr) minmax(0, 25fr) minmax(0, 30fr); }
#pm-workspace .cm-pt-sound-form { display: flex; gap: 8px; padding: 8px 10px 6px; }
#pm-workspace .cm-pt-sound-form .sidebar-select { flex: 1 1 0; min-width: 0; }
#pm-workspace .cm-pt-sound-owner { padding: 0 10px 6px; }
#pm-workspace .cm-pt-sounds th:nth-child(1) { width: 34%; }
#pm-workspace .cm-pt-sounds th:nth-child(2) { width: 12%; }
#pm-workspace .cm-pt-sounds th:nth-child(n+3) { width: 18%; }

/* Price Thoughts: the recent new issues. */
#pm-workspace .cm-pt-recent th:nth-child(1) { width: 34%; }
#pm-workspace .cm-pt-recent th:nth-child(2) { width: 9%; }
#pm-workspace .cm-pt-recent th:nth-child(3) { width: 15%; }
#pm-workspace .cm-pt-recent th:nth-child(4),
#pm-workspace .cm-pt-recent th:nth-child(5),
#pm-workspace .cm-pt-recent th:nth-child(6) { width: 14%; }

/* Bookbuild: the orders, and the right column without the calls panel
   once a bookbuild without calls is over. */
#pm-workspace .cm-bb-orders th:nth-child(1) { width: 36%; }
#pm-workspace .cm-bb-orders th:nth-child(2) { width: 10%; }
#pm-workspace .cm-bb-orders th:nth-child(3) { width: 14%; }
#pm-workspace .cm-bb-orders th:nth-child(4) { width: 11%; }
#pm-workspace .cm-bb-orders th:nth-child(5) { width: 29%; }
#pm-workspace .cm-pricing-right--roles.cm-bb-right--nocalls { grid-template-rows: auto minmax(0, 1fr); }

/* Allocation: the fills by type and the distribution at their own height
   over the deal news, the news keeping at least 260px with the fills
   scrolling above it on a short screen (owner, 2026-10-25), and both
   tables' columns declared, the IPO's widths being for its own columns. */
#pm-workspace .cm-ba .cm-alloc-side { grid-template-rows: minmax(0, auto) minmax(260px, 1fr); }
#pm-workspace .cm-ba-tools-body { min-height: 0; overflow-y: auto; }
#pm-workspace .cm-ba .cm-groups-table th:nth-child(1) { width: 34%; }
#pm-workspace .cm-ba .cm-groups-table th:nth-child(2) { width: 12%; }
#pm-workspace .cm-ba .cm-groups-table th:nth-child(3) { width: 16%; }
#pm-workspace .cm-ba .cm-groups-table th:nth-child(4) { width: 14%; }
#pm-workspace .cm-ba .cm-groups-table th:nth-child(5) { width: 24%; }
#pm-workspace .cm-ba .cm-groups-table--roles th:nth-child(1) { width: 28%; }
#pm-workspace .cm-ba .cm-groups-table--roles th:nth-child(2) { width: 11%; }
#pm-workspace .cm-ba .cm-groups-table--roles th:nth-child(3) { width: 14%; }
#pm-workspace .cm-ba .cm-groups-table--roles th:nth-child(4) { width: 14%; }
#pm-workspace .cm-ba .cm-groups-table--roles th:nth-child(5) { width: 12%; }
#pm-workspace .cm-ba .cm-groups-table--roles th:nth-child(6) { width: 21%; }
#pm-workspace .cm-ba .cm-al-table th:nth-child(1) { width: 33%; }
#pm-workspace .cm-ba .cm-al-table th:nth-child(2) { width: 13%; }
#pm-workspace .cm-ba .cm-al-table th:nth-child(3) { width: 10%; }
#pm-workspace .cm-ba .cm-al-table th:nth-child(4) { width: 13%; }
#pm-workspace .cm-ba .cm-al-table th:nth-child(5) { width: 10%; }
#pm-workspace .cm-ba .cm-al-table th:nth-child(6) { width: 21%; }
#pm-workspace .cm-ba .cm-al-table--roles th:nth-child(1) { width: 27%; }
#pm-workspace .cm-ba .cm-al-table--roles th:nth-child(2) { width: 12%; }
#pm-workspace .cm-ba .cm-al-table--roles th:nth-child(3) { width: 9%; }
#pm-workspace .cm-ba .cm-al-table--roles th:nth-child(4) { width: 12%; }
#pm-workspace .cm-ba .cm-al-table--roles th:nth-child(5) { width: 12%; }
#pm-workspace .cm-ba .cm-al-table--roles th:nth-child(6) { width: 9%; }
#pm-workspace .cm-ba .cm-al-table--roles th:nth-child(7) { width: 19%; }
#pm-workspace .cm-ba .cm-al-table td.pm-sym { text-overflow: ellipsis; }
/* The distribution: a bar for the types and one for the regions, each with
   its key under it. */
#pm-workspace .cm-ba-dist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 8px 10px 10px;
}
#pm-workspace .cm-dist-bar {
  display: flex;
  height: 10px;
  margin: 3px 0 4px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--border);
}
#pm-workspace .cm-dist-bar > span { height: 100%; }
#pm-workspace .cm-dist-key {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
#pm-workspace .cm-dist-key > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#pm-workspace .cm-dist-key i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }

/* Aftermarket: the readouts and the scorecards on one row with the bond's
   terms under them at the scale's 13px; the chart's key in its caption
   bar; the calls over the desk at a fixed split, so a call arriving or
   leaving resizes no panel, the calls scrolling inside their own panel as
   the market making desk's do (owner, 2026-10-25); the desk's result a
   grid of two columns with the position across, and its offer one row. */
#pm-workspace .cm-bam .cm-stats { gap: 6px 20px; }
#pm-workspace .cm-bam-terms { margin-top: 6px; font-size: 13px; gap: 2px 16px; }
#pm-workspace .cm-bam-keys {
  display: inline-flex;
  gap: 12px;
  margin-left: auto;
  font-size: 13px;
  color: var(--text-muted);
}
#pm-workspace .cm-bam .cm-after-right { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
#pm-workspace .cm-bam .cm-calls { flex: 1 1 0; min-height: 0; overflow-y: auto; }
/* A call's bid or offer and its buttons on one row, as on the market
   making desk's tickets, so two calls fit in the half of the column. */
#pm-workspace .cm-ticket-form { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#pm-workspace .cm-ticket-form .cm-ticket-price { margin: 0; justify-content: flex-start; }
#pm-workspace .cm-ticket-form .cm-ticket-price .sidebar-input { width: 72px; }
#pm-workspace .cm-ticket-form .cm-ticket-actions { margin-left: auto; }
#pm-workspace .cm-bam-desk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 16px;
  padding: 6px 10px 2px;
}
#pm-workspace .cm-bam-desk .cm-term { justify-content: space-between; }
#pm-workspace .cm-bam-desk .cm-term:first-child { grid-column: 1 / -1; }
#pm-workspace .cm-bam-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

/* ── Glossary (the trainer reference design 4) ────────────────────── */

/* The bank ALM sim's Glossary page as it renders (owner, 2026-10-25: a
   verbatim copy). Every declaration is the ALM's own: alm.css .glossary-*
   with the sizes its .ts-scale main content gives them (terms 15px at 600,
   definitions 15px, the count 13px), its .form-input for the search field
   (15px under .ts-scale), html/body's font and line height, the main
   content's 24px padding and the Reference's 760px content width (the
   reading pages' rules below). The classes are cm-glossary-*, since this
   repo's .glossary-* are the platform handbook's. The palette, fonts and
   corners are the ALM's through .cm-alm on the page. */
#pm-workspace .cm-glossary {
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}
#pm-workspace .cm-glossary > * { max-width: 760px; }
#pm-workspace .cm-glossary-controls { margin-bottom: 16px; }
#pm-workspace .cm-glossary-search-row { display: flex; align-items: center; gap: 12px; }
#pm-workspace .cm-glossary-search {
  flex: 1;
  max-width: 400px;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  font-family: var(--font-base);
  transition: var(--transition);
}
#pm-workspace .cm-glossary-search:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-bg);
}
#pm-workspace .cm-glossary-count { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
#pm-workspace .cm-glossary-cards { display: flex; flex-direction: column; gap: 6px; }
#pm-workspace .cm-glossary-card { padding: 14px 0; border-bottom: 1px solid var(--border-subtle); }
#pm-workspace .cm-glossary-card:first-child { padding-top: 0; }
#pm-workspace .cm-glossary-card-term {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  text-transform: none;
  letter-spacing: 0;
}
#pm-workspace .cm-glossary-card-def { font-size: 15px; color: var(--text-secondary); line-height: 1.6; }

/* ── The reading pages in the bank ALM sim's look (the ALM look design 3) ── */

/* The reading pages (owner, 2026-10-25): the bond's Mandate, Debrief,
   Briefing and Glossary, and the IPO's Sales Memo, Debrief, Briefing and
   Glossary. Each is the ALM sim's page as it renders: alm.css's rules
   resolved with the .ts-scale its main content carries, each value below
   naming its source. The page is the ALM main content's 24px padding on
   the page colour (above). Credit, Company and Terms keep their own
   sheets of panels in the ALM's colours: the owner found them better as
   they were (2026-10-25). */
#pm-workspace :is(#tab-memo, #tab-debrief, #tab-briefing, #tab-glossary) > .tab-content-area { padding: 24px; }

/* The documents, Mandate (Sales Memo) and Briefing: the ALM's Simulation
   Logic page, its prose and contents list on the page colour with no
   card. alm.css .ref-panel-content > .ref-mech-layout (1040px),
   .ref-mech-layout, .ref-toc, .ref-toc-link, .ref-mechanics,
   .ref-mechanics p, .ref-lead, .ref-section, .doc-part, and .ts-scale's
   p and .ref-lead at 15px, .ref-section at 17px and .doc-part at 22px,
   all at 600. The hedge fund document rules this page inherits
   (portfolio-sim.css) are undone where the ALM sets nothing: the
   centring, the reading measure, the numbered contents. */
#pm-workspace :is(#tab-memo, #tab-briefing) .ref-mech-layout {
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  justify-content: normal;
  margin: 0;
  max-width: 1040px;
}
#pm-workspace :is(#tab-memo, #tab-briefing) .ref-toc {
  gap: 1px;
  padding: 0;
  max-height: calc(100vh - 100px);
  counter-reset: none;
}
#pm-workspace :is(#tab-memo, #tab-briefing) .ref-toc-link {
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
  counter-increment: none;
}
#pm-workspace :is(#tab-memo, #tab-briefing) .ref-toc-link::before { content: none; }
#pm-workspace :is(#tab-memo, #tab-briefing) .ref-toc-link:hover { background: var(--bg-elevated); color: var(--text); }
#pm-workspace :is(#tab-memo, #tab-briefing) .ref-toc-link.active {
  background: var(--bg-elevated);
  color: var(--color-accent);
  font-weight: 600;
}
#pm-workspace :is(#tab-memo, #tab-briefing) .ref-mechanics {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
#pm-workspace :is(#tab-memo, #tab-briefing) .ref-mechanics p { margin: 0 0 12px; font-size: 15px; }
#pm-workspace :is(#tab-memo, #tab-briefing) .ref-mechanics > :is(p, .doc-part, .ref-section) { max-width: none; }
#pm-workspace :is(#tab-memo, #tab-briefing) .ref-mechanics .ref-lead { margin: 0 0 24px; font-size: 15px; color: var(--text); }
#pm-workspace :is(#tab-memo, #tab-briefing) .ref-mechanics .ref-section {
  margin: 28px 0 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: inherit;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
#pm-workspace :is(#tab-memo, #tab-briefing) .doc-part,
#pm-workspace :is(#tab-memo, #tab-briefing) .doc-part:first-child {
  font-size: 22px;
  font-weight: 600;
  line-height: inherit;
  margin: 32px 0 2px;
  color: var(--text);
}
/* The Briefing's tables: alm.css .data-table, th, td and row hover, at
   .ts-scale's 15px for the cells and the column headings, the headings
   at 600 in the secondary colour with no capitals or tracking. */
#pm-workspace #tab-briefing .ref-mechanics .data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
#pm-workspace #tab-briefing .ref-mechanics .data-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
#pm-workspace #tab-briefing .ref-mechanics .data-table td {
  padding: 10px 12px;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
#pm-workspace #tab-briefing .ref-mechanics .data-table tr:hover td { background: var(--bg-hover); }
/* The table's box square, as every card and box on this screen (owner,
   2026-10-25). */
#pm-workspace #tab-briefing .ref-mechanics .data-table-wrap { border-radius: 0; }

/* The Debrief: each panel an ALM card with an ALM card title (alm.css
   .card, .card-header and .card-title, with .ts-scale's 17px title),
   16px apart on the page colour. The corners are square, as on the sim's
   other pages, where the ALM's are rounded (owner, 2026-10-25). */
#pm-workspace #tab-debrief .cm-debrief { gap: 16px; padding: 0; background: transparent; }
#pm-workspace #tab-debrief .cm-db-cards { gap: 16px; background: transparent; }
#pm-workspace #tab-debrief .pm-frame {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 20px;
}
#pm-workspace #tab-debrief .pm-frame-head {
  align-items: center;
  margin-bottom: 16px;
  padding: 0;
  background: transparent;
  border-bottom: 0;
}
#pm-workspace #tab-debrief .pm-frame-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
#pm-workspace #tab-debrief .cm-db-body { padding: 0; }
#pm-workspace #tab-debrief .cm-db-card .data-table-wrap { margin: 0; }
#pm-workspace #tab-debrief .cm-db-flags { padding: 0; margin-top: 16px; }