/* GENERATED from work-documentation/work-records/2026-09-30-manual-meta-trade-layout/tools/manual-meta-trade.src.css by tools/build-css.py. Edit the source, then rebuild. */
/* Manual Meta Trade: one design for the whole page (round 4, 2026-09-30).
   SOURCE FILE. The file the browser loads (work-tree/web/dist/manual-meta-trade.css) is produced from this one by
   tools/build-css.py, which only replaces the marker app-manual-meta-trade:not(.mx-a):not(.mx-b) with  app-manual-meta-trade:not(.mx-a):not(.mx-b)
   (the page's own styles carry a runtime attribute that outranks a plain tag + class; the two harmless :not() terms lift
   these rules just above them).

   Joseph's rules for this page: nothing may change what a button, field or request does; quick, fast, easy to navigate.
   This file only re-places and restyles existing elements. It uses the app's own look (the --ap-* tokens of
   apple-theme.css: surface, hairline, fill, text, blue, radii 10 / 14, pills) so the page matches the rest of the app in
   light and dark, and one set of shapes: cards 14px, inner blocks 12px, controls 10px, pills fully round.
   To turn the whole overlay off, remove the <link> to the css and the <script> for manual-meta-trade.js from index.html. */

/* ================= 0. tokens ================= */
app-manual-meta-trade:not(.mx-a):not(.mx-b) {
  --mx-surface: var(--ap-surface, #fff);
  --mx-surface-2: var(--ap-surface-2, #fafafc);
  --mx-line: var(--ap-hair, rgba(60, 60, 67, .14));
  --mx-fill: var(--ap-fill, rgba(120, 120, 128, .12));
  --mx-fill-2: var(--ap-fill-hover, rgba(120, 120, 128, .18));
  --mx-text: var(--ap-text, #1d1d1f);
  --mx-text-2: var(--ap-text-2, #6e6e73);
  --mx-blue: var(--ap-blue, #007aff);
  --mx-buy: #16a34a;
  --mx-sell: #dc2626;
  --mx-flat: #ea580c;
  --mx-r-card: 14px;
  --mx-r-in: 12px;
  --mx-r-ctl: 10px;
  --mx-pill: 980px;
  --mx-gap: 12px;
  --mx-pad: 16px;
  --mx-shadow: var(--ap-shadow-1, 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .05));
  --mx-ease: var(--ap-ease, cubic-bezier(.2, .8, .2, 1));
  --mx-ticket-w: clamp(340px, 24vw, 420px);
  font-family: var(--ap-font, inherit);
  color: var(--mx-text);
}

/* ================= 1. title bar: one slim sticky row (title, selected-asset pills, jump links, status) ================= */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-header {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  min-height: 52px; padding: 8px 12px; margin-bottom: var(--mx-gap);
  background: var(--mx-surface); border: .5px solid var(--mx-line); border-radius: var(--mx-r-card);
  box-shadow: var(--mx-shadow); overflow: visible;
  position: sticky; top: var(--mx-top, 0px); z-index: 6;
}
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-header:before { display: none; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-header-left { order: 1; flex: 0 0 auto; gap: 10px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-logo-box { width: 32px; height: 32px; border-radius: var(--mx-r-ctl); background: var(--mx-fill); border: 0; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-logo-box mat-icon { font-size: 18px; width: 18px; height: 18px; line-height: 18px; color: var(--mx-blue); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-title { font: 600 12px/1.2 var(--ap-font, inherit); letter-spacing: .1em; color: var(--mx-text); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-subtitle { font: 400 11.5px/1.3 var(--ap-font, inherit); color: var(--mx-text-2); margin-top: 1px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-header-right { order: 4; flex: 0 0 auto; gap: 6px; padding: 5px 11px; border-radius: var(--mx-pill); background: var(--mx-fill); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-header-right:has(.mmt-dot-live) { background: rgba(22, 163, 74, .12); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-status-dot { width: 7px; height: 7px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-status-dot.mmt-dot-live { background: var(--mx-buy); box-shadow: none; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-status-text { font: 600 11px/1 var(--ap-font, inherit); letter-spacing: .08em; color: var(--mx-text-2); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-header-right:has(.mmt-dot-live) .mmt-status-text { color: var(--mx-buy); }

/* jump links (added by manual-meta-trade.js; they only scroll) */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-jump { order: 3; display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-jump button { border: 0; background: transparent; color: var(--mx-text); font: 500 12px/1 var(--ap-font, inherit); padding: 7px 8px; border-radius: var(--mx-r-ctl); cursor: pointer; transition: background .15s var(--mx-ease); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-jump button:hover { background: var(--mx-fill); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-jump button b { font-weight: 600; margin-left: 5px; padding: 2px 6px; border-radius: var(--mx-pill); background: var(--mx-fill); font-variant-numeric: tabular-nums; font-size: 11px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-jump button b:empty { display: none; }

/* selected assets: the page's own asset cards, moved here by manual-meta-trade.js and shown as pills */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets { order: 2; flex: 1 1 240px; min-width: 0; display: flex; align-items: center; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets:not(:has(.mmt-asset-card)) { display: none; }
/* when the pills do not fit beside the title and links, the script marks the strip data-row2 and it takes its own row under them (wrapping to at most two lines) */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets[data-row2="1"] { flex: 1 1 100%; order: 5; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets[data-row2="1"] .mmt-asset-cards { flex-wrap: wrap; max-height: 72px; overflow-x: hidden; overflow-y: auto; }

app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-cards { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; width: 100%; min-width: 0; margin: 0; padding: 2px; overflow: hidden; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-card { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 30px; min-width: 0; padding: 0 10px 0 2px; border-radius: var(--mx-pill); background: var(--mx-fill); border: .5px solid var(--mx-line); white-space: nowrap; cursor: default; transition: background .15s var(--mx-ease); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-card:hover { background: var(--mx-fill-2); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-card-head { display: flex; align-items: center; justify-content: flex-start; gap: 2px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-star { order: -1; width: 22px; height: 22px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-star mat-icon { font-size: 16px; width: 16px; height: 16px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-code { font: 600 12px/1 var(--ap-font, inherit); letter-spacing: 0; color: var(--mx-text); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-name { display: none; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-price { font: 600 12px/1 var(--ap-font, inherit); margin: 0; color: var(--mx-text); font-variant-numeric: tabular-nums; }
/* the page's own change text ("+1.20 (+0.45%)") stays in the page; the pill shows only its percent, copied into data-pct by the script */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-change { margin: 0; font-size: 0; line-height: 0; font-variant-numeric: tabular-nums; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-change::after { content: attr(data-pct); font: 500 11px/1 var(--ap-font, inherit); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-badge { display: inline-block; width: 6px; height: 6px; padding: 0; margin: 0; border-radius: 50%; font-size: 0; line-height: 0; background: var(--mx-buy); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-badge.closed { background: #94a3b8; }
/* fail-safe: until the script has taken over, the cards stay where the page put them */
app-manual-meta-trade:not(.mx-a):not(.mx-b)[data-mmtx] .mmt-form-card > .mmt-asset-cards { display: none; }

/* ================= 2. cards, titles ================= */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-card { background: var(--mx-surface); border: .5px solid var(--mx-line); border-radius: var(--mx-r-card); box-shadow: var(--mx-shadow); padding: var(--mx-pad); margin-bottom: var(--mx-gap); color: var(--mx-text); min-width: 0; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-card-title { font: 600 14px/1.3 var(--ap-font, inherit); letter-spacing: -.01em; color: var(--mx-text); margin: 0; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 var(--mx-gap); min-height: 32px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-card-title-row button { height: 32px; padding: 0 14px; border-radius: var(--mx-r-ctl); font: 500 12px/1 var(--ap-font, inherit); box-shadow: none; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-create-order-toggles { gap: 12px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-create-order-toggles .mat-mdc-checkbox label { font: 400 12.5px/1 var(--ap-font, inherit); color: var(--mx-text-2); }

/* ================= 3. fields ================= */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mat-mdc-form-field {
  --mat-form-field-container-height: 44px;
  --mat-form-field-container-vertical-padding: 12px;
  --mat-form-field-subscript-text-line-height: 14px;
  --mdc-outlined-text-field-label-text-size: 14px;
  --mat-form-field-outlined-label-text-populated-size: 14px;
}
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mat-mdc-form-field-bottom-align::before { height: 14px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mat-mdc-form-field-error { font-size: 11px; line-height: 14px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-select-search-input { border-radius: var(--mx-r-ctl); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-select-row { flex-direction: column; gap: 0; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-select-row .mmt-field-half { flex: none; width: 100%; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-preset-row { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-preset-row .mmt-field-sm { flex: 1 1 auto; max-width: none; min-width: 0; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-preset-row .mmt-preset-select-field { flex: 0 0 116px; max-width: 116px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-row { display: flex; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-row .mmt-field-lg { flex: 1 1 100%; }
/* the "clear" x that appears after a choice sits inside its field, left of the arrow */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-select-clear-btn { width: 32px; height: 32px; padding: 4px; margin: -54px 40px 22px auto; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; --mdc-icon-button-state-layer-size: 32px; --mdc-icon-button-icon-size: 18px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-select-clear-btn mat-icon { font-size: 18px; width: 18px; height: 18px; line-height: 18px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mat-mdc-form-field:has(+ .mmt-select-clear-btn) .mat-mdc-select-value { padding-right: 34px; box-sizing: border-box; }

/* ================= 4. order ticket action block: Buy / Sell, (Limit), the four quiet buttons ================= */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row .mmt-btn { flex: none; min-width: 0; width: 100%; height: 40px; border-radius: var(--mx-r-ctl); font: 500 13px/1 var(--ap-font, inherit); letter-spacing: 0; transition: background-color .15s var(--mx-ease), border-color .15s var(--mx-ease), color .15s var(--mx-ease), box-shadow .15s var(--mx-ease), filter .15s var(--mx-ease), transform .1s var(--mx-ease); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row .mmt-btn .mdc-button__label { white-space: nowrap; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row .mmt-btn mat-icon { font-size: 18px; width: 18px; height: 18px; margin-right: 6px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-buy,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-sell { height: 52px; font-size: 15px; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
/* the quiet four share one neutral outline (Flatten / Reverse) and take their colour when the pointer is on them */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-flatten,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-reverse-long,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-reverse-short { color: var(--mx-text); background: var(--mx-surface); border-color: var(--mx-line); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-buy-outline:hover { background: rgba(22, 163, 74, .14); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-sell-outline:hover { background: rgba(220, 38, 38, .14); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-flatten:hover { background: rgba(234, 88, 12, .14); border-color: var(--mx-flat); color: var(--mx-flat); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-reverse-long:hover,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-reverse-short:hover { background: rgba(0, 122, 255, .12); border-color: var(--mx-blue); color: var(--mx-blue); }
/* a coloured edge says which side: Long green, Short red (Flatten Long / Short are always the 4th and 3rd from the end) */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn:nth-last-child(4):hover,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-reverse-long:hover { box-shadow: inset 4px 0 0 var(--mx-buy); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn:nth-last-child(3):hover,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-reverse-short:hover { box-shadow: inset 4px 0 0 var(--mx-sell); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-buy:hover,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn.mmt-btn-sell:hover { filter: brightness(1.08); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row button.mmt-btn:active { transform: scale(.98); }

/* ================= 5. filters: one slim bar ================= */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-height: 34px; padding: 0 2px; margin-bottom: 8px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters::before { content: "Filter"; font: 600 10.5px/1 var(--ap-font, inherit); text-transform: uppercase; letter-spacing: .06em; color: var(--mx-text-2); margin: 0 2px 0 0; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters .mat-mdc-form-field { --mat-form-field-container-height: 34px; --mat-form-field-container-vertical-padding: 7px; flex: 0 1 148px; min-width: 96px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters .mat-mdc-form-field-subscript-wrapper { display: none; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters button { margin-left: 0; height: 34px; padding: 0 12px; border-radius: var(--mx-r-ctl); font: 500 12px/1 var(--ap-font, inherit); white-space: nowrap; flex: 0 0 auto; }

/* 5b. sliding filter (mouse screens wider than 700px): the bar takes no room in the page. A small "Filter" tab sits on the seam above
   Open Positions; hovering it, or tabbing into it, or having a dropdown open slides the bar down over the top of the card (nothing moves).
   A dot on the tab shows when any filter is set. Touch screens and narrow windows keep the slim bar above. */
@media (hover: hover) and (min-width: 701px) {
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters { position: relative; z-index: 30; height: 0; min-height: 0; margin-bottom: var(--mx-gap); padding: 0; width: fit-content; max-width: 100%; align-items: flex-start; gap: 8px; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters::before { position: absolute; top: -6px; left: 12px; z-index: 2; display: flex; align-items: center; height: 22px; margin: 0; padding: 0 10px; content: "Filter  \25BE"; white-space: pre; background: var(--mx-surface); border: .5px solid var(--mx-line); border-radius: 980px; box-shadow: var(--mx-shadow); cursor: default; transition: color .15s var(--mx-ease), border-color .15s var(--mx-ease); }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters:has(.mat-mdc-select:not(.mat-mdc-select-empty))::before { content: "Filter  \25CF  set"; color: var(--mx-blue); border-color: var(--mx-blue); }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters::after { content: ""; position: absolute; z-index: -1; top: 12px; left: 0; right: 0; height: 60px; background: var(--mx-surface); border: .5px solid var(--mx-line); border-radius: var(--mx-r-card); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .16s var(--mx-ease), transform .16s var(--mx-ease); }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters > * { margin-top: 20px; margin-left: 12px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .16s var(--mx-ease), transform .16s var(--mx-ease); }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters > * + * { margin-left: 0; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters:hover::after, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters:focus-within::after, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters:has([aria-expanded="true"])::after { opacity: 1; transform: none; pointer-events: auto; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters:hover > *, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters:focus-within > *, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters:has([aria-expanded="true"]) > * { opacity: 1; pointer-events: auto; transform: none; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters:hover::before, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters:focus-within::before { color: var(--mx-text); border-color: var(--mx-text-2); }
}

/* ================= 6. tables (positions, orders, accounts, hedges, manual trades) =================
   Tables run edge to edge inside their card (first and last cell carry the card padding), rows are separated by hairlines,
   numbers line up on the right, and on windows too narrow for every column the P/L and the row button stay pinned at the right. */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > mat-card.mmt-card { padding: var(--mx-pad) 0 4px; overflow-x: auto; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > mat-card.mmt-card > .mmt-card-title-row { padding: 0 var(--mx-pad); margin-bottom: 8px; position: sticky; left: 0; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > mat-card.mmt-card > .mmt-empty { padding: 28px var(--mx-pad) 32px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table { width: 100%; background: transparent; border-collapse: separate; border-spacing: 0; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table th,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table th.mat-mdc-header-cell { height: 34px; padding: 0 6px; font: 600 10.5px/1 var(--ap-font, inherit); letter-spacing: .04em; text-transform: uppercase; color: var(--mx-text-2); white-space: nowrap; text-align: left; opacity: 1; background: var(--mx-surface); border-bottom: .5px solid var(--mx-line); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table td,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table td.mat-mdc-cell { height: 40px; padding: 0 6px; font: 400 12.5px/1.2 var(--ap-font, inherit); color: var(--mx-text); white-space: nowrap; background: var(--mx-surface); border-bottom: .5px solid var(--mx-line); font-variant-numeric: tabular-nums; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table th:first-child, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table td:first-child { padding-left: var(--mx-pad); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table th:last-child, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table td:last-child { padding-right: var(--mx-pad); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table tr:last-child td { border-bottom: 0; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table tr.mat-mdc-header-row,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table tr.mdc-data-table__header-row { height: 34px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table tr.mat-mdc-row,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table tr.mdc-data-table__row { height: 40px; }
/* row states are drawn as a layer over the solid cell colour, so the pinned cells stay opaque */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table tr.mat-mdc-row:hover td { background-image: linear-gradient(var(--mx-fill), var(--mx-fill)); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table tr.mat-mdc-row:has(.mdc-checkbox__native-control:checked) td { background-image: linear-gradient(rgba(0, 122, 255, .07), rgba(0, 122, 255, .07)); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-group-row td { background-image: linear-gradient(rgba(0, 122, 255, .06), rgba(0, 122, 255, .06)); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-mdc-checkbox { --mdc-checkbox-state-layer-size: 26px; --mat-checkbox-touch-target-display: none; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-column-select { width: 26px; }
/* numbers line up on the right */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-column-volume, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-column-open_price, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-column-live_price,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-column-take_profit, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-column-stop_loss, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-column-swap,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-column-pl, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-column-equity, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-column-pl_usd,
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-column-pl_pts, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-column-size, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-column-avg_price { text-align: right; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table:not(.mat-mdc-table) th:nth-child(n+5), app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table:not(.mat-mdc-table) td:nth-child(n+5) { text-align: right; }
/* pinned at the right when the table is wider than its card: P/L (positions) and the row button */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table:not(.mmt-account-table) .mat-column-actions { position: sticky; right: 0; z-index: 2; width: 44px; min-width: 44px; box-sizing: border-box; text-align: right; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table:not(.mmt-account-table) .mat-column-pl { position: sticky; right: 44px; z-index: 2; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-account-table .mat-column-actions { width: 76px; text-align: right; white-space: nowrap; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-mdc-icon-button { width: 28px; height: 28px; padding: 4px; --mdc-icon-button-state-layer-size: 28px; border-radius: 8px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table .mat-mdc-icon-button mat-icon { font-size: 16px; width: 16px; height: 16px; line-height: 16px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table td:last-child button:first-child:hover { background: rgba(0, 122, 255, .14); color: var(--mx-blue); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table td:last-child button:last-child:hover { background: rgba(220, 38, 38, .14); color: var(--mx-sell); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table td:last-child button + button { margin-left: 4px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-side { font: 600 10.5px/1 var(--ap-font, inherit); letter-spacing: .04em; padding: 4px 9px; border-radius: var(--mx-pill); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-side.buy { color: var(--mx-buy); background: rgba(22, 163, 74, .12); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-side.sell { color: var(--mx-sell); background: rgba(220, 38, 38, .12); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-pl-pos { color: var(--mx-buy); font-weight: 600; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-pl-neg { color: var(--mx-sell); font-weight: 600; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-status-badge { font: 600 10px/1 var(--ap-font, inherit); letter-spacing: .05em; padding: 4px 9px; border-radius: var(--mx-pill); color: var(--mx-text-2); background: var(--mx-fill); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-status-badge.live { color: var(--mx-buy); background: rgba(22, 163, 74, .12); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-empty { padding: 20px 0; text-align: center; font: 400 12.5px/1.3 var(--ap-font, inherit); color: var(--mx-text-2); }
/* tables inside the accounts card also run edge to edge */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--mx-pad)); }

/* ================= 7. hedging and accounts card ================= */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-accounts-card > .mmt-card-title-row .mmt-info-icon { color: var(--mx-text-2); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mx-gap); margin: 0; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-card { min-width: 0; padding: 14px; border: .5px solid var(--mx-line); border-radius: var(--mx-r-in); background: var(--mx-surface-2); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-card.long, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-card.short { border-color: var(--mx-line); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-card-title { display: flex; align-items: center; gap: 8px; font: 600 13px/1.2 var(--ap-font, inherit); color: var(--mx-text); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-card.long .mmt-hedge-card-title, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-card.short .mmt-hedge-card-title { color: var(--mx-text); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-card-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mx-buy); flex: 0 0 auto; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-card.short .mmt-hedge-card-title::before { background: var(--mx-sell); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-card-desc { font: 400 11.5px/1.35 var(--ap-font, inherit); color: var(--mx-text-2); margin: 4px 0 12px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-percent-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-percent-btn { padding: 0 12px; height: 28px; border: 1px solid var(--mx-line); border-radius: var(--mx-pill); background: var(--mx-surface); color: var(--mx-text); font: 500 12px/1 var(--ap-font, inherit); cursor: pointer; transition: background .15s var(--mx-ease), border-color .15s var(--mx-ease); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-percent-btn:hover { background: var(--mx-fill); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-percent-btn.long.active { background: rgba(22, 163, 74, .14); border-color: var(--mx-buy); color: var(--mx-buy); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-percent-btn.short.active { background: rgba(220, 38, 38, .14); border-color: var(--mx-sell); color: var(--mx-sell); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-custom-input { width: 52px; height: 28px; padding: 0 8px; border: 1px dashed var(--mx-line); border-radius: var(--mx-pill); background: var(--mx-surface); color: var(--mx-text); font: 500 12px/1 var(--ap-font, inherit); text-align: center; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-custom-input:focus { outline: none; border-color: var(--mx-blue); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) button.mmt-hedge-submit-btn { width: 100%; height: 40px; min-height: 40px; line-height: 40px; padding: 0 12px; border-radius: var(--mx-r-ctl); font: 500 13px/40px var(--ap-font, inherit); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) button.mmt-hedge-submit-btn:hover { filter: brightness(1.08); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-accounts-subtitle { margin: 20px 0 8px; padding-top: 16px; border-top: .5px solid var(--mx-line); font: 600 11px/1 var(--ap-font, inherit); letter-spacing: .06em; text-transform: uppercase; color: var(--mx-text-2); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: .5px solid var(--mx-line); font: 400 12px/1 var(--ap-font, inherit); color: var(--mx-text-2); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-table-footer-actions { gap: 4px; }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-link-btn { padding: 6px 10px; border-radius: var(--mx-r-ctl); color: var(--mx-blue); font: 500 12px/1 var(--ap-font, inherit); transition: background .15s var(--mx-ease); }
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-link-btn:hover { background: var(--mx-fill); text-decoration: none; }

/* ================= 8. dropdown lists opened on this page ================= */
body:has(app-manual-meta-trade) .mat-mdc-select-panel:not(.mx-a):not(.mx-b) { background: color-mix(in srgb, var(--ap-glass, rgba(255, 255, 255, .72)) 10%, Canvas) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); max-height: min(340px, 45vh) !important; border-radius: var(--mx-r-card, 14px) !important; }
body:has(app-manual-meta-trade) .mat-mdc-select-panel:has(.mmt-preset-option):not(.mx-a):not(.mx-b) { min-width: 190px; }
body:has(app-manual-meta-trade) .mat-mdc-option:has(.mmt-preset-option) .mdc-list-item__primary-text { flex: 1 1 auto; width: 100%; }
body:has(app-manual-meta-trade) .mmt-preset-option { gap: 16px; width: 100%; }
body:has(app-manual-meta-trade) .mmt-preset-remove { margin-left: auto; }
body:has(app-manual-meta-trade) .mmt-preset-remove:hover { opacity: 1; color: #dc2626; }

/* jump links land just below the sticky title bar */
app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-card, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-grid { scroll-margin-top: calc(var(--mx-top, 0px) + var(--mx-head, 52px) + 16px); }

/* ================= 9. wide screens: ticket fixed on the left, everything you watch on the right ================= */
@media (min-width: 1100px) {
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid { display: grid; grid-template-columns: var(--mx-ticket-w) minmax(0, 1fr); grid-template-rows: calc(var(--mx-head, 52px) + var(--mx-gap)) repeat(4, auto); column-gap: var(--mx-gap); align-items: start; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > .mmt-header { grid-column: 1 / -1; grid-row: 1 / span 5; margin-bottom: 0; align-self: start; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > form,
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > form > .mmt-grid { display: contents; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card { grid-column: 1; grid-row: 2 / span 4; position: sticky; top: calc(var(--mx-top, 0px) + var(--mx-head, 52px) + var(--mx-gap)); align-self: start; max-height: calc(100vh - var(--mx-top, 0px) - var(--mx-head, 52px) - 2 * var(--mx-gap)); overflow-y: auto; scrollbar-width: thin; scroll-padding-bottom: calc(var(--mx-pinned, 200px) + 8px); }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > .mmt-filters { grid-column: 2; grid-row: 2; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > mat-card.mmt-card:nth-of-type(1) { grid-column: 2; grid-row: 3; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > mat-card.mmt-card:nth-of-type(2) { grid-column: 2; grid-row: 4; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-accounts-card { grid-column: 2; grid-row: 5; }
  /* the action block stays at the bottom of the ticket whatever is chosen above it */
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card .mmt-action-row { position: sticky; bottom: calc(-1 * var(--mx-pad)); z-index: 3; margin: 4px calc(-1 * var(--mx-pad)) calc(-1 * var(--mx-pad)); padding: var(--mx-gap) var(--mx-pad) var(--mx-pad); background: var(--mx-surface); border-top: .5px solid var(--mx-line); }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-jump { margin-left: auto; }
  /* the ticket already sits beside the tables, so the jump link to it is not needed here */
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-jump button[data-k="order"] { display: none; }
}
@media (max-width: 1499px) {
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-subtitle { display: none; }
}

/* ================= 10. windows narrower than 1100px: one column, in the order you use it ================= */
@media (max-width: 1099px) {
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid { display: grid; grid-template-columns: minmax(0, 1fr); }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > form,
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > form > .mmt-grid { display: contents; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > .mmt-header { order: 1; position: static; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-form-card { order: 2; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > .mmt-filters { order: 3; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > mat-card.mmt-card:nth-of-type(1) { order: 4; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .container-fluid > mat-card.mmt-card:nth-of-type(2) { order: 5; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-accounts-card { order: 6; }
  /* title bar: title and status on the first line, the links under them, the pills last */
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-header-left { flex: 1 1 auto; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-header-right { order: 2; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-jump { order: 3; flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets { order: 4; flex: 1 1 100%; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-assets .mmt-asset-cards { flex-wrap: wrap; max-height: 72px; overflow-x: hidden; overflow-y: auto; }
}
@media (max-width: 700px) {
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-header { padding: 8px; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-jump { scrollbar-width: none; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-jump::-webkit-scrollbar { display: none; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmtx-jump button { white-space: nowrap; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-card-title, app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-create-order-toggles .mat-mdc-checkbox label { white-space: nowrap; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-card-title-row { flex-wrap: wrap; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters { flex-wrap: wrap; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-filters .mat-mdc-form-field { flex: 1 1 0; max-width: none; }
  app-manual-meta-trade:not(.mx-a):not(.mx-b) .mmt-hedge-grid { grid-template-columns: 1fr; }
}