/* Trading inherits Aera's terminal palette. All workspace rules are scoped. */
.main-layout:not(.main-layout--page) {
  grid-template-columns: minmax(0, 1fr) 320px 360px;
  grid-template-rows: auto auto;
  gap: 16px;
  padding: 0 24px 32px;
  min-height: calc(100dvh - 220px);
}
@media (min-width: 1400px) {
  .main-layout:not(.main-layout--page):has(.has-note-apr) {
    grid-template-columns: minmax(0, 1fr) 400px 360px;
  }
}
.trading-market-bar { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 24px; min-width: 0; padding: 24px 0; margin: 0; border-bottom: 1px solid var(--terminal-rule); }
.trading-market-bar[hidden] { display: none; }
.trading-market-bar h1 { margin: 0; font-size: 1.5rem; font-weight: 500; }
.trading-market-bar #market-title { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; max-width: 100%; min-height: 40px; margin: 0; padding: 0 4px 0 0; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.trading-market-bar #market-title::before { content: none; }
.trading-market-bar #market-title::after { position: static; mask: none; -webkit-mask: none; background: transparent; flex: none; width: 7px; height: 7px; margin: -4px 2px 0 0; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); }
.trading-market-bar #market-title:hover { color: var(--control-foreground, var(--control-foreground)); }
.trading-market-bar .panel-subtitle { min-height: 20px; margin-top: 4px; }
.trading-market-bar .market-stats { display: flex; gap: 32px; width: auto; margin: 0 0 0 16px; }
.trading-market-bar .market-stats.has-note-market { flex-wrap: wrap; gap: 20px 32px; max-width: 100%; }
.trading-market-bar .market-stat { align-items: flex-start; width: auto; min-width: 110px; padding: 0; gap: 4px; background: transparent; border: 0; border-radius: 0; }
.trading-market-bar .market-stat-label { text-transform: none; letter-spacing: normal; font-size: .75rem; line-height: 1.4; }
.trading-market-bar .market-stat-value { font-size: 1rem; color: var(--text); }
.trading-market-bar .market-stat-meta { font-size: .75rem; }
.trading-market-bar .market-stat[hidden] { display: none; }
.trading-market-bar .note-market-stat { min-width: 140px; max-width: 220px; }
.note-market-stat .market-stat-value { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.note-market-stat[data-state="stale"] .market-stat-label { color: var(--network-label); }
.order-apr summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.trading-connection { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: .75rem; color: var(--text-muted); }
.trading-connection::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.trading-connection[hidden] { display: none; }
.trading-market-bar:has(.has-note-market) .trading-connection { min-width: 136px; min-height: 18px; }
/* Match the global [hidden] rule while reserving space for connection recovery. */
.trading-market-bar:has(.has-note-market) .trading-connection[hidden] { display: flex !important; visibility: hidden; }
.trading-connection[data-state="stale"], .trading-feed-note, .trading-ticket-status { color: var(--network-label); }
.main-layout:not(.main-layout--page) > .orders-panel { grid-column: 1; grid-row: 2; padding: 20px; }
.main-layout:not(.main-layout--page) > .market-stack { grid-column: 2; grid-row: 2; display: block; max-width: none; }
.main-layout:not(.main-layout--page) > .trade-panel { grid-column: 3; grid-row: 2; padding: 0; gap: 24px; max-width: none; background: transparent; }
.main-layout:not(.main-layout--page) .orderbook-panel { padding: 20px 16px; }
.main-layout:not(.main-layout--page) :is(.orders-main, .orderbook, .fills-card) { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
.main-layout:not(.main-layout--page) .section-card-header { margin: 0 0 20px; gap: 12px; }
.main-layout:not(.main-layout--page) :is(.section-card-header h2, .section-card-header h3, .balances h2) { margin: 0; font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.main-layout:not(.main-layout--page) .orders-empty { padding: 28px 0; font-size: .8125rem; line-height: 1.6; color: var(--text-muted); }
.trading-book-tabs { display: flex; gap: 20px; min-width: 0; }
.trading-book-tab { appearance: none; position: relative; padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; transition: color 160ms ease, border-color 160ms ease; }
.trading-book-tab[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--text); }
.trading-book-tab:hover { color: var(--control-foreground); }
.main-layout:not(.main-layout--page) .orderbook-card-header { align-items: center; margin-bottom: 8px; border-bottom: 1px solid var(--terminal-rule); }
.main-layout:not(.main-layout--page) .orderbook-table { width: 100%; table-layout: fixed; }
.main-layout:not(.main-layout--page) .orderbook-table th { padding: 8px 4px 12px; font-size: .6875rem; color: var(--text-muted); white-space: normal; overflow-wrap: anywhere; }
.main-layout:not(.main-layout--page) .orderbook-table td { height: 28px; padding: 3px 4px; font-size: .75rem; line-height: 1.5; text-align: right; }
.main-layout:not(.main-layout--page) .orderbook-table :is(th, td):first-child { text-align: left; }
.main-layout:not(.main-layout--page) .orderbook-table :is(.ob-amount-cell, .ob-apr-cell) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-layout:not(.main-layout--page) .orderbook-table.has-note-apr th { width: 25%; }
@media (min-width: 1400px) {
  .main-layout:not(.main-layout--page) .orderbook-table.has-note-apr th { width: 26%; }
  .main-layout:not(.main-layout--page) .orderbook-table.has-note-apr th:first-child { width: 22%; }
}
.main-layout:not(.main-layout--page) .orderbook-table.has-note-apr .trading-price { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.main-layout:not(.main-layout--page) .orderbook-table .ob-apr-cell[data-state="stale"] { color: var(--text-muted); }
.main-layout:not(.main-layout--page) .orderbook-table .ob-price-cell { color: var(--focus); }
.main-layout:not(.main-layout--page) .orderbook-table .ask-row .ob-price-cell { color: var(--danger-soft); }
.main-layout:not(.main-layout--page) .orderbook-table :is(.ask-row, .bid-row) { background: transparent; }
.main-layout:not(.main-layout--page) .orderbook-table :is(.ask-row, .bid-row):hover { background: var(--terminal-control); }
.trading-price { display: inline-block; min-width: 72px; padding: 2px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.trading-book-scale { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 12px; margin: 0 0 8px; }
/* Trades has no zoom controls: show this strip only when it carries a status. */
.trading-book-scale:has(#orderbook-step-label[hidden]) { min-height: 0; }
.trading-book-scale:has(#orderbook-step-label[hidden]):has(#trading-book-status[hidden]) { display: none; }
.trading-book-scale-copy { min-width: 0; }
#orderbook-step-label { margin: 0; font-size: .75rem; line-height: 1.5; color: var(--text-soft); }
#orderbook-step { margin-left: 4px; font-family: var(--fontfam-term); overflow-wrap: anywhere; }
.trading-book-zoom { display: flex; flex: none; gap: 4px; }
.trading-book-zoom button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--terminal-rule); border-radius: 6px; background: transparent; color: var(--text-soft); cursor: pointer; }
.trading-book-zoom button:hover:not(:disabled) { background: var(--terminal-control); color: var(--text); }
.trading-book-zoom button:disabled { opacity: .4; cursor: default; }
.trading-book-scale .trading-feed-note { min-height: 0; margin: 0; line-height: 1.5; }
@media (max-width: 760px), (pointer: coarse) { .trading-book-zoom button { width: 44px; height: 44px; } }
.trading-depth-help { min-height: 36px; margin: 0 0 8px; font-size: .75rem; line-height: 1.5; color: var(--text-muted); }
.main-layout:not(.main-layout--page) .orderbook-table :is(.bid-row, .ask-row),
.main-layout:not(.main-layout--page) .orderbook-table :is(.bid-row, .ask-row):hover { --book-depth-color: rgb(var(--positive-rgb) / .16); background-image: linear-gradient(to left, var(--book-depth-color) var(--depth-width, 0%), transparent var(--depth-width, 0%)); }
.main-layout:not(.main-layout--page) .orderbook-table .ask-row,
.main-layout:not(.main-layout--page) .orderbook-table .ask-row:hover { --book-depth-color: rgb(var(--danger-soft-rgb) / .13); }
.main-layout:not(.main-layout--page) .orderbook-table :is(.bid-row, .ask-row) td { height: 32px; }
.main-layout:not(.main-layout--page) .orderbook-table .book-empty-band :is(.trading-price, td) { color: var(--text-muted); }
.main-layout:not(.main-layout--page) .orderbook-table .mid-row td { height: 48px; border-block: 1px solid var(--terminal-rule); }
.main-layout:not(.main-layout--page) .orderbook-table .mid-price-cell { font-size: .9375rem; color: var(--text); }
.main-layout:not(.main-layout--page) .orderbook-table .mid-label-cell { text-transform: none; letter-spacing: 0; font-family: Geist, sans-serif; color: var(--text-muted); }
.trading-feed-note { min-height: 36px; margin: 8px 0 12px; font-size: .75rem; line-height: 1.5; }
.main-layout:not(.main-layout--page) .orderbook-trades-list { max-height: 580px; overflow-y: auto; }
.main-layout:not(.main-layout--page) :is(.trade-row, .orderbook-trades-head) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; line-height: 1.5; }
.main-layout:not(.main-layout--page) .orderbook-trades-head { padding: 8px 4px 12px; font-size: .6875rem; border-color: var(--terminal-rule); }
.main-layout:not(.main-layout--page) .trade-row { min-height: 28px; padding: 3px 4px; border-color: var(--terminal-rule); }
.main-layout:not(.main-layout--page) button.trade-row { width: 100%; flex-shrink: 0; border: 0; border-bottom: 1px solid var(--terminal-rule); border-radius: 0; background: transparent; color: var(--text-soft); font: inherit; text-align: left; cursor: pointer; }
.main-layout:not(.main-layout--page) button.trade-row:last-child { border-bottom: 0; }
.main-layout:not(.main-layout--page) button.trade-row:hover:not(:disabled) { background: var(--terminal-control); }
.main-layout:not(.main-layout--page) button.trade-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.main-layout:not(.main-layout--page) button.trade-row:disabled { cursor: default; }
.main-layout:not(.main-layout--page) .orderbook-trades-view.has-note-market :is(.trade-row, .orderbook-trades-head) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.main-layout:not(.main-layout--page) .orderbook-trades-head > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; justify-self: stretch; }
.main-layout:not(.main-layout--page) .orderbook-trades-head > span:not(:first-child) { text-align: right; }
.main-layout:not(.main-layout--page) .orderbook-trades-head > [hidden] { display: none; }
.main-layout:not(.main-layout--page) .trade-row > * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-layout:not(.main-layout--page) .trade-apr { font-family: var(--fontfam-term); text-align: right; justify-self: end; }
.main-layout:not(.main-layout--page) :is(.trade-time, .trade-price, .trade-apr, .trade-amount) { font-size: .75rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.main-layout:not(.main-layout--page) .trade-row--up .trade-price { color: var(--focus); }
.main-layout:not(.main-layout--page) .trade-row--down .trade-price { color: var(--danger-soft); }
.main-layout:not(.main-layout--page) .orders-table-wrap { background: transparent; border-radius: 0; margin: 0 -4px; padding: 0 4px 8px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.main-layout:not(.main-layout--page) .orders-table { min-width: 620px; width: 100%; }
.main-layout:not(.main-layout--page) .orders-table :is(th, td) { padding: 12px 8px; border-color: var(--terminal-rule); font-size: .75rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.main-layout:not(.main-layout--page) .orders-table th { padding-block: 0 12px; white-space: normal; font-size: .6875rem; line-height: 1.5; }
.main-layout:not(.main-layout--page) .orders-table :is(th, td):first-child { padding-left: 0; }
.main-layout:not(.main-layout--page) .orders-table :is(.orders-actions-cell, th:last-child) { position: sticky; right: -4px; background: var(--panel-fill); padding-right: 0; }
/* One opaque state fill covers every cell, including the sticky actions. */
.main-layout:not(.main-layout--page) .orders-row { --order-row-fill: var(--terminal-panel); }
.main-layout:not(.main-layout--page) .orders-row--pending { --order-row-fill: color-mix(in srgb, var(--control-foreground) 3%, var(--terminal-panel)); }
.main-layout:not(.main-layout--page) .orders-row:has(:focus-visible) { --order-row-fill: color-mix(in srgb, var(--control-foreground) 6%, var(--terminal-panel)); }
@media (hover: hover) {
  .main-layout:not(.main-layout--page) .orders-row:hover { --order-row-fill: color-mix(in srgb, var(--control-foreground) 6%, var(--terminal-panel)); }
}
.main-layout:not(.main-layout--page) .orders-table tbody tr,
.main-layout:not(.main-layout--page) .orders-table tbody tr:hover { background: transparent; transition: none; }
.main-layout:not(.main-layout--page) .orders-table .orders-row td { background: var(--order-row-fill); }
.main-layout:not(.main-layout--page) .orders-table tbody tr:last-child { border-bottom: 0; }
.main-layout:not(.main-layout--page) .orders-side { font-size: .6875rem; font-weight: 500; }
.main-layout:not(.main-layout--page) .orders-side.buy { color: var(--focus); }
.main-layout:not(.main-layout--page) .orders-side.sell { color: var(--danger-soft); }
.main-layout:not(.main-layout--page) .orders-status { font-family: Geist, sans-serif; font-size: .6875rem; white-space: normal; min-width: 60px; }
.main-layout:not(.main-layout--page) :is(.orders-updated, .fill-time) { font-size: .75rem; white-space: normal; min-width: 90px; color: var(--text-soft); }
.orders-qty > span { display: block; }
.orders-total { font-size: .6875rem; color: var(--text-muted); }
.trading-timestamp { display: grid; gap: 2px; font: .75rem/1.5 var(--fontfam-term); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trading-timestamp-date { color: var(--text-muted); font: .6875rem/1.5 Geist, sans-serif; }
.main-layout:not(.main-layout--page) .orders-row-actions { gap: 8px; }
.main-layout:not(.main-layout--page) .orders-row-actions .orders-action-label { display: none; }
.main-layout:not(.main-layout--page) .orders-cancel-all-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--terminal-rule); border-radius: 6px; color: var(--text-soft); background: transparent; font-size: .8125rem; line-height: 1.5; transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out; }
.orders-cancel-all-btn svg { flex: none; width: 16px; height: 16px; }
.main-layout:not(.main-layout--page) .orders-cancel-all-btn:hover:not(:disabled) { color: var(--danger-soft); background: rgb(var(--danger-soft-rgb) / .09); border-color: var(--danger-soft); }
.main-layout:not(.main-layout--page) .orders-cancel-all-btn:focus-visible { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 2px; }
/* Pending rows keep the shared indicator readable: dots while a signature is outstanding, the ring after submission. */
.main-layout:not(.main-layout--page) :is(.orders-icon-btn, .orders-cancel-all-btn).is-busy:disabled { opacity: .85; }
.main-layout:not(.main-layout--page) .orders-cancel-all-btn.is-busy svg { display: none; }
/* Personal executions use the same table and action components as open orders. */
.main-layout:not(.main-layout--page) .fills-panel { padding: 24px 0 0; margin-top: 24px; border-top: 1px solid var(--terminal-rule); }
.fills-panel .fills-card-header { gap: 12px; }
.fills-status { color: var(--network-label); font-size: .75rem; line-height: 1.5; }
.fills-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.main-layout:not(.main-layout--page) .orders-table.fills-table { min-width: 0; table-layout: auto; }
.main-layout:not(.main-layout--page) .fills-table th { white-space: nowrap; }
.main-layout:not(.main-layout--page) .orders-table .orders-empty { padding: 28px 0; font: .8125rem/1.6 Geist, sans-serif; text-align: left; white-space: normal; color: var(--text-muted); }
.orders-empty-message { display: block; max-width: calc(100vw - 80px); }
.fill-value { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Older fills fold beneath the latest ten behind one quiet full-width toggle. */
.fills-more-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; background: transparent; color: var(--text-soft); }
.fills-more-btn[hidden] { display: none; }
.fills-more-btn:hover:not(:disabled) { color: var(--text); background: var(--terminal-control); border-color: var(--rule-bright); }
.fills-more-btn svg { flex: none; width: 14px; height: 14px; transition: transform 160ms ease-out; }
.fills-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .fills-more-btn svg { transition: none; } }
/* Open orders and Recent fills share one sortable header control; the chevron sits beside the label, away from the aligned column edge. */
.table-sort-btn { appearance: none; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; border: 0; border-radius: 2px; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: inherit; white-space: inherit; cursor: pointer; transition: color 150ms ease-out; }
.orders-table th:not(:first-child) .table-sort-btn { flex-direction: row-reverse; }
.table-sort-btn:hover, .table-sort-btn.active { color: var(--text); }
.table-sort-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.table-sort-btn::after { content: ''; flex: none; width: .45em; height: .45em; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: translateY(-.14em) rotate(45deg); opacity: 0; }
.table-sort-btn:hover::after { opacity: .4; }
.table-sort-btn.active::after { opacity: .78; }
.table-sort-btn.active[data-sort-dir="asc"]::after { transform: translateY(.12em) rotate(225deg); }
.main-layout:not(.main-layout--page) .order-form { order: -1; padding: 20px; border-radius: var(--radius-panel); background: var(--panel-fill); }
.main-layout:not(.main-layout--page) #side-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 24px; padding: 4px; background: var(--terminal-inset); border-radius: 6px; }
.main-layout:not(.main-layout--page) #side-toggle .toggle-btn { width: 100%; min-height: 38px; padding: 8px; border: 1px solid transparent; border-radius: 4px; font-size: .8125rem; background: transparent; color: var(--text-muted); }
.main-layout:not(.main-layout--page) #side-toggle .buy.active { background: rgb(var(--positive-rgb) / .12); border-color: rgb(var(--positive-rgb) / .5); color: var(--focus); }
.main-layout:not(.main-layout--page) #side-toggle .sell.active { background: rgb(var(--danger-soft-rgb) / .09); border-color: #934653; color: var(--danger-soft); }
/* Order entry fields. The Edit order dialog (.replace-fields) shares the ticket's exact controls. */
:is(.main-layout:not(.main-layout--page) .order-form, .trading-dialog .replace-fields) .form-row { margin-bottom: 16px; }
:is(.main-layout:not(.main-layout--page) .order-form, .trading-dialog .replace-fields) .form-row > label { max-width: none; font-size: .8125rem; gap: 8px; }
:is(.main-layout:not(.main-layout--page) .order-form, .trading-dialog .replace-fields) .form-input-wrapper { overflow: visible; background: var(--terminal-control); border-radius: 6px; }
:is(.main-layout:not(.main-layout--page) .order-form, .trading-dialog .replace-fields) .form-input-wrapper:focus-within { box-shadow: none; }
:is(.main-layout:not(.main-layout--page) .order-form, .trading-dialog .replace-fields) .form-row input:not([type="checkbox"]) { height: 48px; padding: 12px; border: 1px solid var(--rule-strong); border-radius: 6px; font-size: 1rem; }
:is(.main-layout:not(.main-layout--page) .order-form, .trading-dialog .replace-fields) .form-row input:not([type="checkbox"]):focus { border-color: var(--focus); }
:is(.main-layout:not(.main-layout--page), .trading-dialog) :is(.order-amount-wrapper, .order-price-wrapper) { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--rule-strong); }
:is(.main-layout:not(.main-layout--page), .trading-dialog) :is(.order-amount-wrapper, .order-price-wrapper):hover { border-color: var(--rule-bright); }
:is(.main-layout:not(.main-layout--page), .trading-dialog) :is(.order-amount-wrapper, .order-price-wrapper):focus-within { border-color: var(--focus); }
:is(.main-layout:not(.main-layout--page) .order-form, .trading-dialog .replace-fields) :is(.order-amount-wrapper, .order-price-wrapper) input:not([type="checkbox"]) { padding-right: 8px; border: 0; min-width: 0; background: transparent; }
:is(.main-layout:not(.main-layout--page), .trading-dialog) .order-amount-suffix-wrap { position: static; gap: 0; padding: 4px; }
.order-price-suffix-wrap { display: flex; align-items: center; padding: 4px; }
.order-funding { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 8px 0 0; font-size: .75rem; line-height: 1.5; color: var(--text-soft); }
:is(#order-funding-value, .order-funding-value) { min-width: 0; overflow-wrap: anywhere; font-family: var(--fontfam-term); font-variant-numeric: tabular-nums; }
.order-funding[data-state="stale"] { color: var(--network-label); }
.order-funding-help { margin: 4px 0 0; font-size: .75rem; line-height: 1.5; color: var(--text-muted); }
.order-apr { margin-top: 8px; font-size: .75rem; line-height: 1.5; color: var(--text-soft); }
.order-apr[hidden] { display: none; }
.order-apr summary { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; min-height: 24px; list-style: none; cursor: pointer; }
.order-apr summary::-webkit-details-marker { display: none; }
.order-apr-label { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.order-apr-label svg { flex: none; align-self: center; }
.order-apr summary:hover { color: var(--text); }
.order-apr[data-state="stale"] summary { color: var(--network-label); }
#order-apr-value { min-width: 0; text-align: right; font-family: var(--fontfam-term); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.order-apr p { margin: 4px 0 0; color: var(--text-muted); }
/* Max, Mid and the amount currency use the shared in-field controls (board.css); a hairline separates Max from the currency. */
:is(.main-layout:not(.main-layout--page), .trading-dialog) .order-amount-unit-wrap { height: auto; }
:is(.main-layout:not(.main-layout--page), .trading-dialog) .order-amount-unit-wrap::before { content: ''; flex: none; width: 1px; height: 20px; margin-inline: 4px; background: var(--rule-strong); }
.main-layout:not(.main-layout--page) .order-estimates { padding: 4px 0 8px; margin: 0; }
.main-layout:not(.main-layout--page) .order-estimates .form-row { display: flex; flex-direction: row; justify-content: space-between; gap: 12px; margin: 0; padding: 7px 0; line-height: 1.5; font-size: .75rem; }
.main-layout:not(.main-layout--page) .order-estimate-value { max-width: 58%; overflow-wrap: anywhere; text-align: right; }
.trading-order-settings { margin: 8px 0 16px; border-block: 1px solid var(--terminal-rule); }
.trading-order-settings > summary { display: flex; align-items: center; gap: 12px; padding: 16px 0; font-size: .8125rem; cursor: pointer; list-style: none; }
.trading-order-settings > summary::-webkit-details-marker { display: none; }
.trading-order-settings > summary::after { content: ''; width: 6px; height: 6px; flex: 0 0 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.trading-order-settings[open] > summary::after { transform: rotate(225deg); }
#trading-settings-summary { margin-left: auto; max-width: 60%; font-size: .6875rem; line-height: 1.5; text-align: right; color: var(--text-muted); }
.main-layout:not(.main-layout--page) .trading-order-settings fieldset { margin: 0 0 20px; }
.main-layout:not(.main-layout--page) .trading-order-settings legend { font-size: .8125rem; }
.main-layout:not(.main-layout--page) .trading-order-settings .option-group-help { font-size: .75rem; }
.main-layout:not(.main-layout--page) .order-options-grid { grid-template-columns: 1fr; gap: 0; }
.main-layout:not(.main-layout--page) .order-options-grid .option-check { min-height: 36px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; font-size: .8125rem; }
.main-layout:not(.main-layout--page) :is(.form-mins, .order-options-hint) { font-size: .75rem; line-height: 1.6; margin: 0 0 16px; color: var(--text-muted); }
.main-layout:not(.main-layout--page) .order-options-hint { display: grid; gap: 10px; }
.order-options-hint p { margin: 0; }
.order-options-hint strong { color: var(--text-soft); font-weight: 500; }
.trading-ticket-status { min-height: 36px; margin: 12px 0 0; font-size: .75rem; line-height: 1.5; }
.trading-ticket-status[data-state="live"], .trading-feed-note[data-state="live"] { color: var(--text-muted); }
.main-layout:not(.main-layout--page) #submit-order-btn { min-height: 44px; border: 1px solid transparent; border-radius: 6px; background: var(--positive); color: var(--on-positive); font-size: .8125rem; font-weight: 500; }
.main-layout:not(.main-layout--page) #submit-order-btn[data-side="sell"] { background: var(--danger-soft); color: #250c12; }
.main-layout:not(.main-layout--page) #submit-order-btn:hover:not(:disabled) { filter: brightness(1.12); }
.main-layout:not(.main-layout--page) #submit-order-btn:disabled { background: var(--terminal-raised); color: var(--text-muted); opacity: 1; cursor: not-allowed; }
.trading-review-note { margin: 12px 0 0; color: var(--text-muted); font-size: .6875rem; text-align: center; line-height: 1.5; }
.main-layout:not(.main-layout--page) .balances { padding: 0 4px; background: transparent; border-radius: 0; }
.main-layout:not(.main-layout--page) .balance-breakdown { margin: 0; padding-left: 12px; border: 0; background: transparent; }
.main-layout:not(.main-layout--page) .balance-value { font-size: .8125rem; }
@media (max-width: 1399px) and (min-width: 961px) {
  .main-layout:not(.main-layout--page) { grid-template-columns: minmax(0, 1fr) 360px; }
  .main-layout:not(.main-layout--page) > .market-stack { grid-column: 1; grid-row: 2; }
  .main-layout:not(.main-layout--page) > .trade-panel { grid-column: 2; grid-row: 2; }
  .main-layout:not(.main-layout--page) > .orders-panel { grid-column: 1 / -1; grid-row: 3; }
  .main-layout:not(.main-layout--page) .orderbook-panel { padding-inline: 24px; }
}
@media (max-width: 960px) {
  .main-layout:not(.main-layout--page) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding-inline: 16px; }
  .main-layout:not(.main-layout--page) > .market-stack { grid-column: 1; grid-row: 2; }
  .main-layout:not(.main-layout--page) > .trade-panel { grid-column: 2; grid-row: 2; }
  .main-layout:not(.main-layout--page) > .orders-panel { grid-column: 1 / -1; grid-row: 3; }
  .trading-market-bar { gap: 20px; }
  .trading-market-bar .market-stats { margin-left: auto; gap: 20px; }
  .trading-connection { width: 100%; margin-left: 0; }
}
/* Keep statistics at the right edge, with connection status beside the market name. */
@media (min-width: 761px) {
  .trading-market-bar .market-stats { order: 1; margin-left: auto; }
  .trading-market-bar .trading-connection { width: auto; margin-left: 0; }
}
/* One section-link treatment across the full mobile navigation breakpoint. */
@media (max-width: 768px) {
  .mobile-trading-nav { padding: 0 12px; gap: 0; background: var(--terminal-inset); border-bottom: 1px solid var(--terminal-rule); }
  .mobile-trading-nav button { position: relative; min-height: 48px; padding: 12px 4px; border: 0; border-radius: 0; background: transparent; color: var(--text-soft); font-size: .8125rem; font-weight: 500; line-height: 1.5; }
  .mobile-trading-nav button::after { content: ''; position: absolute; height: 2px; inset: auto 12px 0; background: transparent; }
  .mobile-trading-nav button:hover, .mobile-trading-nav button:focus-visible { color: var(--text); background: transparent; }
  .mobile-trading-nav button:hover::after, .mobile-trading-nav button:focus-visible::after { background: var(--focus); }
  .mobile-trading-nav button:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
}
@media (max-width: 760px) {
  .main-layout:not(.main-layout--page) { display: flex; flex-direction: column; gap: 20px; padding: 0 16px 32px; }
  .main-layout:not(.main-layout--page) > :is(.trading-market-bar, .market-stack, .trade-panel, .orders-panel) { width: 100%; }
  .trading-market-bar { order: 0; padding-block: 20px; gap: 16px; }
  .trading-market-bar .market-panel-heading { width: 100%; }
  .trading-market-bar .market-stats { margin-left: 0; flex: 1 1 auto; gap: 24px; }
  .trading-market-bar .market-stats.has-note-market { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 20px 16px; }
  .trading-market-bar .market-stat { min-width: 0; max-width: none; }
  .order-apr summary { min-height: 44px; }
  .trading-connection { width: auto; margin-left: auto; }
  .main-layout:not(.main-layout--page) > .market-stack { order: 1; }
  .main-layout:not(.main-layout--page) > .trade-panel { order: 2; }
  .main-layout:not(.main-layout--page) > .orders-panel { order: 3; padding: 20px 16px; }
  .main-layout:not(.main-layout--page) .order-form { padding: 20px 16px; }
  .main-layout:not(.main-layout--page) .orderbook-table td { height: 32px; }
  .main-layout:not(.main-layout--page) .orderbook-table :is(.bid-row, .ask-row) td { height: 36px; }
  .main-layout:not(.main-layout--page) .trade-row { min-height: 32px; }
  .trading-price { padding-block: 6px; }
  .trading-book-tab { min-height: 44px; }
  :is(.main-layout:not(.main-layout--page), .trading-dialog) :is(.order-amount-suffix-wrap, .order-price-suffix-wrap) { padding: 2px 4px; }
  .main-layout:not(.main-layout--page) .orders-table { display: block; min-width: 0; }
  /* Cell labels replace the header on mobile, so the header becomes a scrollable row of sort controls. */
  .main-layout:not(.main-layout--page) .orders-table:not(.is-empty) thead { display: block; overflow-x: auto; scrollbar-width: none; }
  .main-layout:not(.main-layout--page) .orders-table:not(.is-empty) thead tr { display: flex; gap: 8px; padding: 0 0 16px; border-top: 0; }
  .main-layout:not(.main-layout--page) .orders-table:not(.is-empty) thead th { display: block; flex: none; padding: 0; border: 0; }
  .main-layout:not(.main-layout--page) .orders-table:not(.is-empty) thead th:is([hidden], :last-child) { display: none; }
  .main-layout:not(.main-layout--page) .orders-table:not(.is-empty) .table-sort-btn { flex-direction: row; min-height: 44px; padding: 0 12px; border: 1px solid var(--terminal-rule); border-radius: 6px; white-space: nowrap; font: .75rem/1.5 Geist, sans-serif; color: var(--text-soft); }
  .main-layout:not(.main-layout--page) .orders-table:not(.is-empty) .table-sort-btn.active { border-color: var(--text-muted); color: var(--text); }
  .main-layout:not(.main-layout--page) .orders-table:not(.is-empty) .table-sort-btn:focus-visible { outline-offset: -2px; }
  .main-layout:not(.main-layout--page) .orders-table tbody { display: block; }
  .main-layout:not(.main-layout--page) .orders-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px 0; border-top: 1px solid var(--terminal-rule); }
  .main-layout:not(.main-layout--page) .orders-table td { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; min-width: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; font-size: .8125rem; }
  .main-layout:not(.main-layout--page) .orders-table td::before { content: attr(data-label); font: .6875rem/1.4 Geist, sans-serif; color: var(--text-muted); }
  .main-layout:not(.main-layout--page) .orders-table .orders-actions-cell { position: static; background: transparent; justify-content: flex-end; }
  .main-layout:not(.main-layout--page) .orders-table .orders-actions-cell::before { content: none; }
  .main-layout:not(.main-layout--page) .orders-table .orders-actions-cell:not(.orders-actions-cell--empty) { grid-column: 1 / -1; }
  .main-layout:not(.main-layout--page) .orders-row-actions { display: flex; width: 100%; }
  .main-layout:not(.main-layout--page) .orders-row-actions .orders-icon-btn { flex: 1; width: auto; gap: 8px; padding: 0 12px; font: .8125rem/1.5 Geist, sans-serif; }
  .main-layout:not(.main-layout--page) .orders-row-actions .orders-action-label { display: inline; }
  /* Mobile rows are grids: the row owns the fill so it also covers the gaps. */
  .main-layout:not(.main-layout--page) .orders-table tbody tr,
  .main-layout:not(.main-layout--page) .orders-table tbody tr:hover { background: var(--order-row-fill); }
  .main-layout:not(.main-layout--page) .orders-table .orders-row td { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .trading-book-tab { transition: none; } }
@media (max-width: 760px) {
  .main-layout:not(.main-layout--page) .orders-table.is-empty { display: table; min-width: 620px; }
  .main-layout:not(.main-layout--page) .orders-table.fills-table.is-empty { min-width: 0; }
  .main-layout:not(.main-layout--page) .orders-table.is-empty thead { display: table-header-group; }
  .main-layout:not(.main-layout--page) .orders-table.is-empty tbody { display: table-row-group; }
  .main-layout:not(.main-layout--page) .orders-table.is-empty tr { display: table-row; border-top: 0; }
  .main-layout:not(.main-layout--page) .orders-table.is-empty td { display: table-cell; }
  .main-layout:not(.main-layout--page) .orders-table.is-empty td::before { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .main-layout:not(.main-layout--page) :is(.orders-icon-btn, .orders-cancel-all-btn) { transition: none; }
}

.main-layout:not(.main-layout--page) .order-form .form-input-wrapper:not(.order-amount-wrapper):not(.order-price-wrapper) { border: 0; }
@media (max-width: 600px) {
  #market-overlay .market-list-row { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 6px; }
  #market-overlay .market-sort-btn { font-size: .6875rem; flex-wrap: wrap; }
  #market-overlay .market-list-stat { font-size: .6875rem; overflow-wrap: anywhere; white-space: normal; }
  #market-overlay .market-list-name { font-size: .75rem; }
  #market-overlay .market-list-symbols { font-size: .6875rem; white-space: normal; }
}

/* One protected review language for placement, editing and cancellation. */
.trading-dialog { padding: 20px; background: rgba(0,0,0,.72); }
.trading-dialog > .modal { display: flex; flex-direction: column; width: 560px; max-width: 100%; max-height: calc(100dvh - 40px); padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-panel); background: var(--panel-fill); }
.trading-dialog-header { padding: 24px 24px 20px; border-bottom: 1px solid var(--terminal-rule); }
.trading-dialog h2 { margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.4; }
.trading-dialog h2:focus { outline: none; }
.trading-dialog .trading-dialog-market { margin: 8px 0 0; color: var(--text-muted); font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; }
.trading-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 20px; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.trading-dialog-details { margin: 0; padding: 0; }
.trading-dialog-details > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--terminal-rule); font-size: .8125rem; line-height: 1.5; }
.trading-dialog-details > div:last-child { border-bottom: 0; }
.trading-dialog-details dt { color: var(--text-muted); }
.trading-dialog-details dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-family: var(--fontfam-term); font-variant-numeric: tabular-nums; }
.trading-dialog-estimate { border-top: 1px solid var(--terminal-rule); margin-top: 16px; padding-top: 20px; }
.trading-dialog-estimate h3 { margin: 0 0 4px; font-size: .8125rem; font-weight: 500; }
.trading-dialog .trading-dialog-note { margin: 20px 0 0; color: var(--text-muted); font-size: .75rem; line-height: 1.6; }
.trading-dialog-footer { padding: 16px 24px 24px; border-top: 1px solid var(--terminal-rule); }
.trading-dialog .trading-dialog-status { min-height: 36px; margin: 0 0 12px; color: var(--text-muted); font-size: .75rem; line-height: 1.5; }
.trading-dialog-status[data-state="stale"] { color: var(--network-label); }
.trading-dialog .modal-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin: 0; padding: 0; border: 0; }
.trading-dialog .modal-actions .btn { min-height: 44px; font-size: .8125rem; }
.trading-dialog .primary-btn { background: var(--positive); color: var(--on-positive); border-color: transparent; font-weight: 500; }
.trading-dialog .danger-btn { background: var(--danger-soft); color: #250c12; border-color: transparent; font-weight: 500; }
.trading-dialog .modal-actions .btn:hover:not(:disabled) { filter: brightness(1.12); }
.trading-dialog .modal-actions .btn:disabled { background: var(--terminal-raised); color: var(--text-muted); border-color: transparent; opacity: 1; cursor: not-allowed; }
.trading-dialog .replace-fields { margin: 24px 0 0; }
.trading-dialog .replace-fields .form-row:last-child { margin-bottom: 0; }
.trading-dialog .order-funding { margin: 8px 0 0; font-size: .75rem; line-height: 1.5; }
.trading-dialog .order-funding + .order-funding { margin-top: 4px; }
.trading-dialog .trading-order-settings { margin: 24px 0 0; border-bottom: 0; }
#replace-settings-summary { margin-left: auto; color: var(--text-muted); font-size: .6875rem; text-align: right; }
.trading-dialog-options { margin: 12px 0 20px; padding: 0; border: 0; }
.trading-dialog-options legend { padding: 0; font-size: .8125rem; font-weight: 500; }
.trading-dialog-options p { margin: 8px 0; font-size: .75rem; color: var(--text-muted); line-height: 1.6; }
.trading-dialog .option-check { min-height: 44px; margin: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; font-size: .8125rem; }
.trading-dialog .option-check[hidden] { display: none; }
.trading-dialog .trading-dialog-error { margin: 16px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--danger-soft); }
.trading-dialog-error:empty { display: none; }
@media (max-width: 600px) {
  .trading-dialog { padding: 12px; }
  .trading-dialog > .modal { max-height: calc(100dvh - 24px); }
  .trading-dialog-header { padding: 20px 20px 16px; }
  .trading-dialog-body { padding: 8px 20px 20px; }
  .trading-dialog-footer { padding: 16px 20px 20px; }
  .trading-dialog-details > div { gap: 12px; }
}
@media (max-height: 500px) {
  .trading-dialog-header { padding-block: 12px; }
  .trading-dialog-footer { padding-block: 12px; }
  .trading-dialog .trading-dialog-status { min-height: 0; }
}
body:has(.trading-dialog:not([hidden])) { overflow: hidden; }
.trading-dialog-header, .trading-dialog-footer { flex-shrink: 0; }
.trading-dialog .trading-dialog-options .option-check { display: flex; width: 100%; background: transparent; }
.trading-dialog .trading-dialog-options .option-check:is(:hover, :has(input:checked)) { background: transparent; }
.trading-dialog .modal-actions .btn.primary-btn:not(:disabled):hover { background: var(--focus); color: var(--on-positive); }
.trading-dialog .modal-actions .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Market discovery shares the terminal's precision and quiet hierarchy. */
#market-overlay { padding: 24px; align-items: center; }
#market-overlay .market-overlay-backdrop { background: rgba(0, 0, 0, .72); }
#market-overlay .market-overlay-content { display: flex; flex-direction: column; width: 880px; max-width: 100%; max-height: calc(100dvh - 48px); margin: 0; padding: 28px; background: var(--panel-fill); border: 1px solid var(--terminal-rule); border-radius: var(--radius-panel); box-shadow: none; transform: none; }
#market-overlay .market-overlay-header { flex: none; margin: 0 0 24px; padding: 0; border: 0; align-items: flex-start; }
#market-overlay h2 { margin: 0; font-size: 1.25rem; font-weight: 500; }
#market-overlay .market-overlay-title p { margin: 6px 0 0; color: var(--text-muted); font-size: .8125rem; }
#market-overlay .market-overlay-close-btn { min-height: 44px; }
#market-overlay .market-filter-wrap { margin: 0 0 16px; padding: 0; flex: none; }
#market-overlay .market-filter-input { height: 48px; background: var(--terminal-inset); border: 1px solid var(--terminal-rule); border-radius: 6px; font-size: .875rem; }
#market-overlay .market-filter-input:focus { border-color: var(--focus); box-shadow: none; outline: none; }
.market-selector-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#market-overlay .market-type-tabs { margin: 0; padding: 0; gap: 8px; }
#market-overlay .market-type-tab { min-height: 44px; min-width: 56px; padding: 8px 16px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-muted); }
#market-overlay .market-type-tab[aria-pressed="true"] { background: var(--terminal-control); border-color: var(--terminal-rule); color: var(--text); }
#market-result-count { color: var(--text-muted); font-size: .75rem; white-space: nowrap; }
#market-registry-status { min-height: 18px; margin: 8px 0; color: var(--network-label); font-size: .75rem; line-height: 1.5; }
#market-overlay .market-list-row { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; align-items: center; }
#market-overlay .market-list-header { flex: none; padding: 0 12px; border-color: var(--terminal-rule); }
#market-overlay .market-sort-btn { min-height: 44px; font-size: .75rem; line-height: 1.4; }
#market-selector-scroll { min-height: 180px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rule-strong) var(--terminal-panel); }
#market-overlay .market-list { margin: 0; padding: 0; overflow: visible; max-height: none; }
#market-overlay .market-list-item { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; }
#market-overlay .market-choice { width: 100%; min-height: 92px; padding: 16px 12px; margin: 0; border: 0; border-bottom: 1px solid var(--terminal-rule); border-radius: 0; background: transparent; color: var(--text); font-family: inherit; text-align: left; cursor: pointer; transition: background-color 150ms ease-out; }
#market-overlay .market-choice:hover { background: var(--terminal-control); }
#market-overlay .market-choice[aria-current="true"] { background: var(--terminal-selected); }
#market-overlay .market-list-name { font-size: .875rem; font-weight: 500; white-space: normal; overflow-wrap: anywhere; }
#market-overlay .market-list-symbols { margin-top: 6px; font-size: .75rem; color: var(--text-muted); white-space: normal; }
.market-row-status { min-height: 16px; font-size: .6875rem; line-height: 1.5; color: var(--focus); }
.market-row-status[data-stale="true"] { color: var(--network-label); }
#market-overlay .market-list-stat { width: 100%; font-size: .8125rem; line-height: 1.5; white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
#market-overlay .market-list-stat > span { display: block; overflow: hidden; text-overflow: ellipsis; }
#market-overlay .market-list-stat small { display: block; margin-top: 4px; font: .6875rem/1.5 Geist, sans-serif; color: var(--text-muted); }
[data-tone="up"] { color: var(--positive) !important; }
[data-tone="down"] { color: var(--danger-soft) !important; }
.market-selector-footer { flex: none; margin-top: 20px; color: var(--text-muted); font-size: .6875rem; line-height: 1.6; }
#market-overlay :is(.market-choice,.market-sort-btn):focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
#market-overlay .market-type-tab:focus-visible { outline: none; border-color: var(--focus); }
body:has(#market-overlay:not([hidden])) { overflow: hidden; }
/* A single desktop plane: identity, complete two-line stats, then actions. */
.trading-market-bar { position: relative; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, var(--market-stats-width, 640px)) auto; align-items: center; gap: 16px; padding: 12px 0 28px; }
.trading-market-bar:has(.has-note-market) { --market-stats-width: 900px; }
.trading-market-bar .market-panel-heading { grid-column: 1; grid-row: 1; min-width: 0; max-width: none; }
.trading-market-bar h1 { font-size: 1.25rem; line-height: 1.4; }
.trading-market-bar #market-title { min-height: 44px; white-space: normal; text-align: left; overflow-wrap: anywhere; gap: 8px; }
.trading-market-bar #market-title::after { flex: none; }
.trading-market-bar .panel-subtitle { margin-top: 0; }
.market-header-actions { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.trading-market-bar .market-stats, .trading-market-bar .market-stats.has-note-market { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: .8fr .9fr 1.3fr 1.1fr 1.2fr; gap: 12px; width: 100%; margin: 0; min-width: 0; max-width: 100%; align-items: center; }
.trading-market-bar .market-stats.has-note-market { grid-template-columns: minmax(40px, .55fr) minmax(54px, .6fr) minmax(68px, .75fr) minmax(118px, 1.2fr) minmax(70px, .9fr) minmax(128px, 1.3fr) minmax(106px, 1.1fr) minmax(94px, 1fr); gap: 10px; }
.trading-market-bar .market-stat { min-width: 0; max-width: none; min-height: 44px; justify-content: center; gap: 4px; }
.trading-market-bar .market-stat-label { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trading-market-bar .market-stat-value { display: block; font-size: .8125rem; line-height: 1.4; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trading-market-bar .market-range-value { font-family: var(--fontfam-term); }
.trading-market-bar .market-volume-label { display: flex; gap: 3px; }
.market-volume-label > span { flex: none; }
.market-volume-label > span:nth-child(2) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.market-statistics-footer { min-width: 0; }
.market-header-status { position: absolute; right: 0; bottom: 4px; display: flex; align-items: center; gap: 12px; min-height: 16px; font-size: .6875rem; line-height: 16px; }
.trading-market-bar .market-statistics-footer .trading-connection { min-width: 0; min-height: 0; margin: 0; font-size: inherit; line-height: inherit; }
.trading-market-bar:has(.has-note-market) .market-statistics-footer .trading-connection[hidden] { display: none !important; }
#market-statistics-status { display: block; color: var(--network-label); font-size: inherit; line-height: inherit; }
.market-statistics-disclosure { position: relative; }
.market-statistics-disclosure > summary { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 28px; color: var(--text-soft); font-size: .75rem; cursor: pointer; list-style: none; }
.market-statistics-disclosure > summary::-webkit-details-marker { display: none; }
.market-statistics-disclosure > summary:hover { color: var(--text); }
.market-details-chevron { width: 16px; height: 16px; flex: none; color: var(--text-muted); transition: transform 160ms ease-out; }
.market-statistics-disclosure[open] .market-details-chevron { transform: rotate(180deg); }
.market-statistics-disclosure > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.market-statistics-popover { position: absolute; top: calc(100% + 12px); right: 0; z-index: 30; width: min(480px, calc(100vw - 32px)); max-height: 65dvh; overflow-y: auto; overscroll-behavior: contain; padding: 20px; background: var(--terminal-control); border: 1px solid var(--terminal-rule); border-radius: 8px; }
.market-statistics-popover h2 { margin: 0 0 16px; font-size: .9375rem; font-weight: 500; }
.market-statistics-popover h3 { margin: 20px 0 4px; font-size: .8125rem; font-weight: 500; }
.market-statistics-popover dl { margin: 0; }
.market-statistics-popover dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--terminal-rule); font-size: .75rem; }
.market-statistics-popover dt { color: var(--text-muted); }
.market-statistics-popover dd { min-width: 0; margin: 0; text-align: right; font-family: var(--fontfam-term); overflow-wrap: anywhere; }
.market-statistics-popover p { margin: 16px 0 0; font-size: .75rem; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 1279px) {
  .trading-market-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; }
  .market-header-actions { grid-column: 2; }
  .trading-market-bar .market-stats, .trading-market-bar .market-stats.has-note-market { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; }
}
@media (max-width: 760px) {
  .trading-market-bar h1 { font-size: 1rem; }
  .trading-market-bar .market-stats, .trading-market-bar .market-stats.has-note-market { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trading-market-bar .market-quote-volume-stat { grid-column: auto; }
  .market-statistics-disclosure { position: static; }
  .market-statistics-disclosure > summary { min-height: 44px; }
  .market-statistics-popover { top: 100%; left: 0; right: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
}
@media (pointer: coarse) {
  .market-statistics-disclosure > summary { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .market-details-chevron { transition: none; }
}
@media (max-width: 600px) {
  #market-overlay { padding: 12px; }
  #market-overlay .market-overlay-content { max-height: calc(100dvh - 24px); padding: 20px 16px; }
  #market-overlay .market-overlay-header { margin-bottom: 16px; }
  #market-overlay .market-list-header { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; }
  #market-overlay .market-sort-btn { text-align: left; font-size: .6875rem; }
  #market-overlay .market-choice { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 8px; }
  #market-overlay .market-list-main { grid-column: 1 / -1; }
  #market-overlay .market-list-name { font-size: .875rem; }
  #market-overlay .market-list-stat { text-align: left; font-size: .75rem; align-self: start; }
  #market-overlay .market-list-stat::before { content: attr(data-label); display: block; margin-bottom: 6px; font: .6875rem/1.5 Geist, sans-serif; color: var(--text-muted); }
  #market-overlay .market-type-tab { min-width: 48px; padding-inline: 12px; }
  .market-selector-footer { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #market-overlay, #market-overlay .market-overlay-content, #market-overlay .market-choice { transition: none; }
}

@media (max-height: 580px) {
  #market-overlay { padding: 12px; }
  #market-overlay .market-overlay-content { max-height: calc(100dvh - 24px); padding-block: 16px; }
  #market-overlay .market-overlay-header { margin-bottom: 12px; }
  #market-overlay .market-filter-wrap { margin-bottom: 8px; }
  #market-selector-scroll { min-height: 60px; }
  .market-selector-footer { margin-top: 8px; }
}
/* Spending permission is optional; the order ticket remains the primary action. */
.main-layout:not(.main-layout--page) .trading-spending { order: -2; min-width: 0; border-top: 0; border-bottom: 1px solid var(--terminal-rule); }
/* Spending limits leads the ticket column (order -2) without being its first child, so the generic
   ".trade-panel > * + *" divider in terminal.css would add a top border that doubles the tape's rule. */
.main-layout:not(.main-layout--page) .trade-panel > .trading-spending { border-top: 0; }
.main-layout:not(.main-layout--page) > .trade-panel:has(> .trading-spending) { gap: 0; }
.trade-panel:has(> .trading-spending) > .balances { margin-top: 24px; }
.main-layout:not(.main-layout--page) .trading-spending + .order-form { border-top: 0; }
/* The body is a short ledger: one ruled row per token (identity, exact limit, a meter scaled to the
   wallet balance, what that means for orders), then the foot. The token being edited and its editor
   read as one group: an inset well. The row's Change button opens and closes it. */
.trading-spending-body { --spending-x: 20px; padding: 0 var(--spending-x) 16px; }
.trading-spending-body[hidden], .trading-spending [hidden] { display: none !important; }
.trading-spending-intro, .trading-spending-note, .trading-spending-foot { margin: 0; color: var(--text-soft); font-size: .75rem; line-height: 1.55; }
.trading-spending-intro { margin-bottom: 14px; max-width: 46ch; }
.trading-spending-unavailable { margin-bottom: 14px; color: var(--text); }

.trading-spending-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "token edit" "value edit" "meter meter" "coverage coverage" "reserved reserved";
  column-gap: 12px; padding: 14px 0 16px; border-top: 1px solid var(--terminal-rule);
}
.trading-spending-token { grid-area: token; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.trading-spending-symbol { color: var(--text); font-size: .8125rem; font-weight: 600; overflow-wrap: anywhere; }
.trading-spending-side { color: var(--text-muted); font-size: .75rem; }
.trading-spending-value { grid-area: value; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; min-width: 0; margin-top: 4px; }
.trading-spending-figure { color: var(--text); font: 500 1rem/1.35 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; overflow-wrap: anywhere; transition: color 200ms ease-out; }
.trading-spending-value[data-kind="word"] .trading-spending-figure { font: 500 .9375rem/1.35 var(--font-sans); }
.trading-spending-row:is([data-state="none"], [data-state="unknown"]) .trading-spending-figure { color: var(--text-soft); }
.trading-spending-row[data-state="unknown"] .trading-spending-figure { color: var(--rule-bright); }
.trading-spending-row.is-stale .trading-spending-figure { color: var(--text-muted); }
.trading-spending-unit { color: var(--text-muted); font-size: .75rem; }
.trading-spending-stale { color: var(--network-label); font: 500 .6875rem/1 var(--fontfam-term); }
.trading-spending-row .trading-spending-edit.btn {
  grid-area: edit; align-self: center; min-width: 72px; min-height: 32px; padding: 0 12px;
  border-color: var(--rule-strong); color: var(--text-soft); font-size: .75rem; font-weight: 500;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}
.trading-spending-row .trading-spending-edit.btn:hover:not(:disabled) { border-color: var(--rule-bright); background: var(--terminal-raised); color: var(--text); }
.trading-spending-row .trading-spending-edit.btn[aria-expanded="true"] { border-color: var(--rule-bright); background: var(--terminal-raised); color: var(--text); }

/* Meter: scaled to the wallet balance. Reserved debits first (neutral), free limit in mint; zero is a dashed track. */
.trading-spending-meter { grid-area: meter; display: flex; height: 3px; margin-top: 12px; overflow: hidden; background: var(--rule-strong); transition: opacity 200ms ease-out; }
.trading-spending-meter > i { display: block; flex: none; height: 100%; transition: width 420ms cubic-bezier(.16, 1, .3, 1); }
.trading-spending-meter > [data-part="held"] { width: var(--held, 0%); background: var(--text-muted); }
.trading-spending-meter > [data-part="free"] { width: var(--free, 0%); background: var(--positive); }
.trading-spending-meter > i + i { box-shadow: -1px 0 0 var(--ground); }
.trading-spending-meter[data-state="empty"] { background: repeating-linear-gradient(90deg, var(--rule-bright) 0 6px, transparent 6px 10px); }
.trading-spending-meter[data-state="unknown"] { opacity: .35; }
:is(.trading-spending-meter.is-dim, .trading-spending-row.is-stale .trading-spending-meter) { opacity: .6; }
.trading-spending-coverage { grid-area: coverage; margin: 8px 0 0; color: var(--text-soft); font-size: .75rem; line-height: 1.5; }
.trading-spending-coverage:empty { display: none; }
.trading-spending-reserved { grid-area: reserved; margin: 2px 0 0; color: var(--text-muted); font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }

/* Editing group */
:is(.trading-spending-row.is-editing, .trading-spending-editor) {
  margin-inline: calc(var(--spending-x) * -1); padding-inline: var(--spending-x);
  background: linear-gradient(transparent, transparent) var(--terminal-inset);
}
.trading-spending-row.is-editing { padding-bottom: 14px; }
.trading-spending-editor { min-width: 0; margin-block: 0; padding-top: 2px; padding-bottom: 18px; }
.trading-spending-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 0; margin: 0 0 16px; padding: 2px; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--ground-fill); }
.trading-spending-mode { position: relative; display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 8px; border-radius: 3px; color: var(--text-soft); font-size: .8125rem; font-weight: 500; text-align: center; cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out; }
.trading-spending-mode input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.trading-spending-mode:hover { background: var(--terminal-control); color: var(--text); }
.trading-spending-mode:has(input:checked) { background: var(--terminal-raised); box-shadow: inset 0 0 0 1px var(--rule-strong); color: var(--text); }
.trading-spending-mode:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.trading-spending-mode:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.trading-spending-editor > label { display: block; margin: 0 0 8px; color: var(--text-soft); font-size: .75rem; }
.trading-spending-input { display: flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 4px 0 12px; background: var(--terminal-control); border: 1px solid var(--rule-strong); border-radius: 4px; transition: border-color 160ms ease-out; }
.trading-spending-input:hover { border-color: var(--rule-bright); }
.trading-spending-input:focus-within { border-color: var(--focus); }
.trading-spending-input:has([aria-invalid="true"]) { border-color: var(--danger-soft); }
.trading-spending-input input { flex: 1 1 auto; width: 100%; min-width: 0; height: 42px; padding: 0; background: transparent; border: 0; color: var(--text); font: 500 .9375rem/1.4 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; outline: none; caret-color: var(--positive); }
.trading-spending-input input::placeholder { color: var(--text-muted); }
.trading-spending-input input:focus-visible { outline: none; }
.trading-spending-input input:disabled { color: var(--text-soft); }
#trading-spending-fill { flex: none; }
#trading-spending-unit { flex: none; max-width: 9ch; padding: 0 8px 0 10px; border-left: 1px solid var(--rule-strong); color: var(--text-muted); font-size: .75rem; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trading-spending-validation { margin: 8px 0 0; color: var(--danger-soft); font-size: .75rem; line-height: 1.5; }
#trading-spending-help { margin-top: 10px; }
.trading-spending-modes + label[hidden] ~ #trading-spending-help { margin-top: 0; }
.trading-spending-review.btn {
  width: 100%; min-height: 40px; margin-top: 16px; padding: 8px 14px; border-color: var(--rule-bright); color: var(--text);
  font-size: .8125rem; font-weight: 500; white-space: normal; transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}
.trading-spending-review.btn:hover:not(:disabled) { border-color: var(--text-soft); background: var(--terminal-raised); }
.trading-spending-outcome { margin-top: 10px; }
.trading-spending-outcome:empty { display: none; }
.trading-spending-revoke { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--terminal-rule); }
.trading-spending-revoke .trading-spending-note { color: var(--text-muted); }
#trading-spending-revoke { flex: none; min-height: 32px; padding: 0 10px; border-color: transparent; color: var(--text-soft); font-size: .75rem; font-weight: 500; transition: background-color 140ms ease-out, color 140ms ease-out; }
#trading-spending-revoke:hover:not(:disabled) { background: rgb(var(--danger-rgb) / .08); color: var(--danger); }
.trading-spending-foot { padding-top: 14px; border-top: 1px solid var(--terminal-rule); color: var(--text-muted); }

/* Collapsed strip: one lamp per token (mint approved, ring not approved, amber stale), or the wait in progress. */
.trading-spending-lamps { display: inline-flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; text-transform: none; letter-spacing: 0; }
.aera-disclosure-strip[aria-expanded="true"] .trading-spending-lamps { display: none; }
.trading-spending-lamp { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-muted); font: 500 .6875rem/1 var(--fontfam-term); white-space: nowrap; }
.trading-spending-lamp > i { flex: none; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-bright); }
.trading-spending-lamp[data-state="approved"] { color: var(--text-soft); }
.trading-spending-lamp[data-state="approved"] > i { background: var(--positive); box-shadow: none; }
.trading-spending-lamp[data-state="stale"] > i { background: var(--network-label); box-shadow: none; }
.trading-spending-lamp[data-state="unknown"] { display: none; }
.aera-disclosure-strip:hover .trading-spending-lamp[data-state="approved"] { color: var(--text); }
#trading-spending-summary { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0; }
#trading-spending-summary:empty { display: none; }
#trading-spending-summary .aera-transaction-indicator { width: 14px; height: 14px; }
@media (max-width: 760px), (pointer: coarse) {
  :is(.trading-spending-row .trading-spending-edit.btn, .trading-spending-mode, .trading-spending-review.btn, #trading-spending-revoke) { min-height: 44px; }
  #trading-spending-fill { height: 40px; }
}
@media (max-width: 360px) {
  .trading-spending-body { --spending-x: 16px; }
  .trading-spending .aera-disclosure-strip { padding-inline: 16px; gap: 8px; }
  .trading-spending-lamps { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.trading-spending-meter, .trading-spending-meter > i, .trading-spending-figure, .trading-spending-mode) { transition: none; }
}