/* account.css — the Account tab of the right dock (account.js): positions, open orders, recent fills (look A,
 * "HL table").
 *
 * Scoped to .ac / .ac-* and inert until account.js builds the tab inside the dock, so the page links it
 * unconditionally. Every colour is a chart.css token (--bg --panel --panel-2 --fg --muted --border --accent --pos --neg
 * --hover), plus ONE of its own: --ac-warn, the TP / SL amber, set per theme exactly as the tokens are (dark on :root,
 * light under :root[data-theme="light"]).
 *
 * The tab is a size container: under 380 px (account-pure WIDE_PX) the narrow column sets show, and from 380 px the
 * `.w` columns join them (entry + mark on positions, filled + time on orders, size + fee on trades). */
.ac {
  container: ac / inline-size;
  --ac-warn: #e0a458;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg);
}
:root[data-theme="light"] .ac { --ac-warn: #b7791f; }
.ac [hidden] { display: none !important; }
.ac .num { font-variant-numeric: tabular-nums; }
.ac .pos { color: var(--pos); }
.ac .neg { color: var(--neg); }
.ac .mut { color: var(--muted); }
.ac .warn { color: var(--ac-warn); }

/* ---- the summary strip: Equity · uPnL · Margin ---- */
.ac-sum {
  flex: 0 0 auto;
  display: flex;
  gap: 8px; /* with fmtUsdStrip, "Equity $123,457 · uPnL +$12,346 · Margin 100%" fits a 300 px dock (measured) */
  align-items: baseline;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
}
.ac-sum b { font-weight: 600; }
.ac-sum .lab { color: var(--muted); margin-right: 4px; }

/* ---- sub-tabs + the scope switch ---- */
.ac-bar {
  flex: 0 0 26px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 6px 0 4px;
  border-bottom: 1px solid var(--border);
}
.ac-st {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 6px;
  cursor: pointer;
  white-space: nowrap;
}
.ac-st:hover { color: var(--fg); }
.ac-st[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.ac-st .n { color: var(--muted); font-weight: 500; margin-left: 3px; }
.ac-st .n:empty { display: none; }
.ac-st:focus-visible,
.ac-scope button:focus-visible,
.ac-x:focus-visible,
.ac-close:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.ac-sp { flex: 1 1 auto; }
.ac-scope {
  align-self: center;
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
}
.ac-scope button {
  font: inherit;
  font-size: 10.5px;
  padding: 1px 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  max-width: 96px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-scope button[aria-pressed="true"] { background: var(--panel-2); color: var(--fg); }

/* ---- the one-line note ("socket down — polling") ---- */
.ac-note {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: 10.5px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- the list ---- */
.ac-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
/* ONE scrollbar width everywhere: a thin 6 px one, its gutter always reserved (scrollbar-gutter: stable), so a long
   list never takes width from the columns — a classic scrollbar ("always show scrollbars", headless Chrome) took
   ~15 px and clipped the Trades price. Overlay-scrollbar systems get the same 6 px, so the budgets below hold. */
.ac-list::-webkit-scrollbar { width: 6px; height: 6px; }
.ac-list::-webkit-scrollbar-track { background: transparent; }
.ac-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 3px; }
.ac-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }
@supports not selector(::-webkit-scrollbar) {
  .ac-list { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
}
.ac-empty { padding: 18px 12px; color: var(--muted); }
.ac-off { padding: 18px 12px; color: var(--muted); line-height: 1.5; }

/* ---- buttons ---- */
.ac-x {
  font: inherit;
  font-size: 12px;
  width: 20px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 18px;
}
.ac-x:hover { background: var(--hover); color: var(--neg); }
.ac-close {
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 3px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
}
.ac-close:hover { border-color: var(--muted); }
.ac-close.arm { background: var(--neg); border-color: var(--neg); color: #fff; }

/* ---- the table (look A) ---- */
.ac .ta { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; }
.ac .ta th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  color: var(--muted);
  font-weight: 500;
  font-size: 10.5px;
  text-align: right;
  padding: 4px 3px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ac .ta td {
  padding: 0 3px;
  height: 22px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.ac .ta th:first-child,
.ac .ta td:first-child { padding-left: 8px; }
.ac .ta th:first-child,
.ac .ta td:first-child,
.ac .ta .cc { text-align: left; }
.ac .ta tr.row { cursor: pointer; }
.ac .ta tr.row:hover { background: var(--hover); }
.ac .ta tr.row.cur { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ac .ta tr.row.cur:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ac .ta tr.row.busy { opacity: 0.45; pointer-events: none; }
/* a row that cannot switch the chart (a spot pair "@107", "#1730", a symbol the list does not hold): no pointer, no tint */
.ac .ta tr.row.np { cursor: default; }
.ac .ta tr.row.np:hover { background: none; }
.ac .ta tr.row.np.cur:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ac .ta td.act { padding: 0 2px 0 1px; overflow: visible; }
/* An ARMED Close spans the Liq cell too (account.js: colspan 2, Liq hidden) and fills it: a full-width red "Confirm",
   never a button half over a number. */
.ac .ta td.act .ac-close.arm { width: 100%; }
.ac .ta td.side.L { box-shadow: inset 2px 0 0 var(--pos); }
.ac .ta td.side.S { box-shadow: inset 2px 0 0 var(--neg); }
/* the coin cell: [dex:]NAME [tag] — the name ellipsizes, the leverage tag never does */
.ac .ta .cn { display: inline-flex; align-items: baseline; max-width: 100%; min-width: 0; vertical-align: middle; }
.ac .ta .cn b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ac .ta .cn .dex { color: var(--muted); font-weight: 400; font-size: 10.5px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.ac .tag { flex: 0 0 auto; margin-left: 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.2px; padding: 0 2px; border-radius: 3px; }
.ac .tag.L { color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, transparent); }
.ac .tag.S { color: var(--neg); background: color-mix(in srgb, var(--neg) 14%, transparent); }

/* ---- the column sets: narrow (< 380 px) and wide (adds the `.w` columns) ----
   11 px type in both sets. Every width is measured in the dock's own font, on the width LEFT after the list's 6 px
   scrollbar gutter (a 300 px dock = a 293 px table, 400 px = 393): text + padding (3 + 3; a Positions value cell
   2 + 3; the first cell 8 + 3).
     Positions  "xyz:TSLA 5×" 81 · "−99,999" / "+999.9K" 51 · a 7-character price 51, the subscript form "0.0₂2752" 55
     Orders     "xyz:NVDA" 64 · a trigger "≥ 0.0₂3979" 66 · "0.0125 / 0.035" 86 · "22 Sep 25" 61 · "99,999" 51
     Trades     "22 Sep 25" 66 (the first cell) · "xyz:TSLA" 59 · "Close S" 46 · "0.0₂4676" 56 · "+999.9K" 52
   Fixed columns are the same px in both sets; the value columns share what is left (300 / 400 px):
     Positions  Coin 82 · Size 52 · uPnL 52 · Close 40 · Liq 67 / Entry, Mark, Liq 55.7
     Orders     Coin 66 · Type 33 · ✕ 26 · Size + Price 84 / Size 55 · Price 66 · Filled 86 · Time 61
     Trades     Time 66 · Coin 60 · Dir 47 · PnL 54 · Price 66 / Size + Price 63 · Fee 40 */
.ac .ta .w { display: none; }
.ac .ta.t-pos td:not(:first-child):not(.act) { padding-left: 2px; }
.ac .ta.t-pos col.k-coin { width: 82px; }
.ac .ta.t-pos col.k-size { width: 52px; } /* a short's widest size cell, "−99,999" (fmtSizeCell) */
.ac .ta.t-pos col.k-upnl { width: 52px; } /* the money cell's widest forms, "−9,999" / "+999.9K" (fmtMoney) */
.ac .ta.t-pos col.k-act { width: 40px; }
.ac .ta.t-ord col.k-coin { width: 66px; }
.ac .ta.t-ord col.k-type { width: 33px; }
.ac .ta.t-ord col.k-act { width: 26px; }
.ac .ta.t-fil col.k-time { width: 66px; } /* an older year's "22 Sep 25" (fmtWhen) */
.ac .ta.t-fil col.k-coin { width: 60px; }
.ac .ta.t-fil col.k-dir { width: 47px; }
.ac .ta.t-fil col.k-pnl { width: 54px; }
@container ac (min-width: 380px) {
  .ac .ta td.w,
  .ac .ta th.w { display: table-cell; }
  .ac .ta col.w { display: table-column; }
  .ac .ta.t-ord col.k-px { width: 66px; } /* a trigger: "≥ 0.0₂3979" (fmtPriceCell + the trigger symbol) */
  .ac .ta.t-ord col.k-filled { width: 86px; } /* two sizes: "0.0125 / 0.035", "12.3K / 99.9K" (fmtFilled) */
  .ac .ta.t-ord col.k-time { width: 61px; } /* "22 Sep 25" (fmtWhen) */
  .ac .ta.t-fil col.k-fee { width: 40px; }
}