/* ═══════════════════════════════════════════════════════════════════
   tradelog.css — the Trades view (tradelog.js).
   Sep 27 2026, format pass: the same premium look as Portfolio · Holdings (the reference block at the
   end of cockpit.css). One soft, elevated 14px panel per section — no boxes inside boxes, no tiles, no
   header bands, no colored stripes; elevation instead of outlines; hairlines only between table rows
   and a slightly firmer one over a total. Sentence case in readable sans type; the mono face only for
   the figures in the ledgers and for tickers. Pill controls. One big figure in --text; green and red
   only for gains and losses; amber only for the sorted column, what is switched on and the primary
   button. For readers in their sixties and seventies: body 15px, notes 13px, nothing under 12.5px.
   The Aa text-size control zooms main.view, so every size here scales with it. Page tokens only (with
   fallbacks for the spec tokens that may not be defined globally), so every theme and light mode follow.
   ═══════════════════════════════════════════════════════════════════ */
.view--tradelog { padding: 16px 24px 56px; }
.tl {
  --tl-panel: var(--fx-panel, color-mix(in srgb, var(--text) 3.5%, var(--bg)));
  --tl-shadow: var(--fx-panel-shadow, 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent) inset, 0 12px 32px rgba(0, 0, 0, .18));
  --tl-rule: color-mix(in srgb, var(--text) 8%, transparent);
  --tl-total: color-mix(in srgb, var(--text) 18%, transparent);
  --tl-track: var(--fx-track, color-mix(in srgb, var(--text) 6%, transparent));
  --tl-track-hi: var(--fx-track-hi, color-mix(in srgb, var(--text) 10%, transparent));
  --tl-on-accent: var(--on-accent, #14161a);
  --tl-pad: 24px;
  display: flex; flex-direction: column; gap: 18px; font-family: var(--sans); font-size:15px; line-height: 1.5; color: var(--text);
}
/* light mode: panels sit a step lighter than the page, like Portfolio's (theme-light.css) */
body[data-theme="light"] .tl { --tl-on-accent: var(--on-accent, #fff); --tl-panel: var(--surface, var(--fx-panel)); }
.tl *, .tl *::before, .tl *::after { box-sizing: border-box; }
.tl-up { color: var(--green) !important; }
.tl-down { color: var(--red) !important; }
.tl-dim { color: var(--text-2); }
.tl-bad { color: var(--red) !important; }
.tl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Panels: one soft elevated surface per section ─────────── */
.tl .tl-pane {
  border: 0; border-radius: 14px; background: var(--tl-panel); box-shadow: var(--tl-shadow); overflow: hidden; min-height: 0;
}
.tl .cpane__bar.tl-phead {
  display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; height: auto; min-height: 0;
  padding: 20px 16px 8px var(--tl-pad); background: none; border: 0;
}
.tl .cpane__title.tl-ptitle {
  margin: 0; font:600 17px/1.3 var(--sans); letter-spacing: -.005em; text-transform: none; color: var(--text);
}
.tl .cpane__title.tl-ptitle::before { content: none; display: none; }
.tl .cpane__meta.tl-pmeta { margin: 0; font:400 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.tl .cpane__meta.tl-pmeta b { font:600 13px var(--sans); font-variant-numeric: tabular-nums; }
.tl .cpane__bar.tl-phead .tl-x { align-self: center; }

/* ── Controls: pills ────────────────────────────────────────── */
.tl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; height: auto; padding: 0 22px;
  font:600 15px/1.2 var(--sans); color: var(--text); background: var(--tl-track);
  border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, filter .15s ease, color .15s ease;
}
.tl-btn:hover { background: var(--tl-track-hi); }
.tl-btn:focus-visible, .tl-link:focus-visible, .tl-x:focus-visible, .tl-sort:focus-visible, .tl-toggle:focus-visible, .tl-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-btn--primary, .tl-btn--primary:hover { background: var(--accent); color: var(--tl-on-accent); }
.tl-btn--primary:hover { filter: brightness(1.06); }
.tl-btn--quiet { color: var(--text); }
.tl-btn--lg { min-height: 44px; padding: 0 22px; font-size:15px; }
.tl-btn--row { min-height: 30px; padding: 0 12px; font:600 13px/1.2 var(--sans); color: var(--text); }
/* In the toolbar row: 36px pills, the primary among them in amber. */
.tl-bar .tl-btn { min-height: 36px; padding: 0 16px; font-size:13.5px; font-weight: 500; }
.tl-bar .tl-btn--primary { font-weight: 600; }
.tl-link {
  font:inherit; font-size:14px; font-weight: 600; color: var(--text); background: none; border: 0; padding: 0 4px; cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); text-underline-offset: 3px;
}
.tl-link:hover { text-decoration-color: currentColor; }
.tl-link--quiet { color: var(--text-2); font-weight: 500; }
.tl-link--del { color: var(--text-2); }
.tl-link--del:hover { color: var(--red); }
.tl-x {
  margin-left: auto; flex: none; width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0;
  font:400 22px/1 var(--sans); color: var(--text-2); background: none; border: 0; border-radius: 50%; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.tl-x:hover { color: var(--text); background: var(--tl-track); }
.tl-x--sm { width: 28px; height: 28px; font-size:18px; margin: 0; }

/* Tags: a plain word on a soft pill. */
.tl-tag {
  display: inline-block; flex: 0 0 auto; padding: 2px 9px; border: 0; border-radius: 999px;
  font:600 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); background: var(--tl-track); white-space: nowrap;
}
.tl-tag--ok { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.tl-tag--bad { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.tl-tag--warn { color: var(--text-2); }

/* ── Toolbar ────────────────────────────────────────────────── */
.tl-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-bar__sp { flex: 1 1 auto; }
.tl-target {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 16px;
  font:500 13.5px var(--sans); color: var(--text-2); background: var(--tl-track); border: 0; border-radius: 999px;
}
.tl-target em { font-style: normal; font:600 14px var(--sans); color: var(--text-2); }
.tl .tl-target__in {
  width: 52px; height: 26px; padding: 0 2px; text-align: right; font:600 15px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text);
  background: transparent; border: 0; border-bottom: 2px solid var(--tl-track-hi); border-radius: 0; box-shadow: none; outline: none;
  -moz-appearance: textfield; appearance: textfield;
}
.tl .tl-target__in::-webkit-outer-spin-button, .tl .tl-target__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tl .tl-target__in:focus { border-bottom-color: var(--accent); }

/* A message after an action: a small floating card, the color in a dot. */
.tl-msg {
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; font-size:15px; color: var(--text);
  background: var(--fx-surface, var(--bg-raised)); border: 1px solid var(--fx-line, var(--tl-rule)); border-radius: 14px;
  box-shadow: var(--fx-shadow-pop, 0 18px 40px -14px rgba(0, 0, 0, .55));
}
.tl-msg::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.tl-msg--bad::before { background: var(--red); }
.tl-msg .tl-x { margin-left: auto; }

/* ── Empty state: one panel — a title, one sentence, two buttons, three steps ── */
.tl-empty { padding: 28px 30px 26px; border-radius: 14px; background: var(--tl-panel); box-shadow: var(--tl-shadow); }
.tl-empty__main { max-width: 720px; }
.tl-empty__h { margin: 0 0 8px; font:600 21px/1.3 var(--sans); letter-spacing: -.01em; color: var(--text); }
.tl-empty__p { margin: 0 0 22px; font-size:16px; line-height: 1.55; color: var(--text-2); }
.tl-empty__cta { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-strip { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; max-width: 960px; }
.tl-strip li { display: flex; gap: 12px; align-items: baseline; font-size:15px; line-height: 1.45; color: var(--text-2); }
.tl-strip b {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font:600 13px/1 var(--sans); color: var(--text-2); background: var(--tl-track); transform: translateY(-1px);
}
.tl-strip strong { color: var(--text); font-weight: 600; }

/* ── Summary: one headline figure, the rest in a quiet row (the Portfolio pattern) ── */
.tl .tl-hero { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 20px 56px; padding: 24px 30px 22px; }
.tl-hero__lead { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.tl-k { font:500 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.tl-hero__v { margin: 2px 0 0; font:700 44px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
.tl-s { font:500 13px/18px var(--sans); font-variant-numeric: tabular-nums; color: var(--text-2); }
.tl-hero__cells { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px 28px; align-items: start; min-width: 0; }
.tl-cell { display: grid; grid-template-rows: auto auto minmax(18px, auto); row-gap: 6px; align-content: start; min-width: 0; }
.tl-v { margin: 0; font:600 21px/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--text); white-space: nowrap; }
.tl-v small { font:500 13px var(--sans); color: var(--text-2); letter-spacing: 0; }
.tl-meter { align-self: center; height: 6px; background: color-mix(in srgb, var(--text) 7%, transparent); border-radius: 999px; overflow: hidden; }
.tl-meter i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.tl-skel { display: inline-block; width: 120px; height: 20px; vertical-align: middle; border-radius: 999px; background: var(--tl-track); animation: tlPulse 1.2s ease-in-out infinite; }
@keyframes tlPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .tl-skel { animation: none; } }

/* Where the holdings come from: one panel, a row each. */
.tl-srcline { list-style: none; margin: 0; padding: 6px var(--tl-pad); display: flex; flex-direction: column;
  border-radius: 14px; background: var(--tl-panel); box-shadow: var(--tl-shadow); }
.tl-srcline li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 12px 0; font-size:15px; color: var(--text-2); }
.tl-srcline li + li { border-top: 1px solid var(--tl-rule); }
.tl-srcline li b { color: var(--text); font-weight: 600; }
.tl-srcline .tl-link { margin-left: auto; }
/* What needs a look: a softly tinted note, no borders. */
.tl-note { padding: 16px 20px; font-size:15px; line-height: 1.55; color: var(--text-2); border: 0; border-radius: 14px; background: var(--tl-track); }
.tl-note--bad { background: color-mix(in srgb, var(--red) 10%, transparent); }
.tl-note b { color: var(--text); font-weight: 600; }
.tl-note ul { margin: 8px 0 0; padding-left: 20px; }
.tl-note li { margin: 4px 0; }

/* ── Ledger tables ──────────────────────────────────────────── */
.tl-scroll { overflow: auto; max-height: min(72vh, 760px); }
.tl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size:15px; }
.tl-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--tl-panel); padding: 0; text-align: left; vertical-align: bottom;
  border-bottom: 1px solid var(--tl-rule); white-space: nowrap;
}
.tl-table th.r { text-align: right; }
.tl-sort { all: unset; }
.tl-sort {
  display: flex; align-items: center; gap: 4px; width: 100%; padding: 10px 14px; cursor: pointer; box-sizing: border-box;
  font:500 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2);
}
.tl-table th.r .tl-sort { justify-content: flex-end; }
.tl-sort:hover { color: var(--text); }
.tl-sort.is-on { color: var(--accent); }
.tl-sort i { font-style: normal; font-size:13px; min-width: 11px; }
.tl-table tbody td {
  padding: 13px 14px; vertical-align: top; color: var(--text); border-bottom: 1px solid var(--tl-rule);
  font:500 15px/1.4 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color .15s ease;
}
.tl-table td.l { font-family: var(--sans); text-align: left; }
.tl-table td.r { text-align: right; }
/* The first and last columns line up with the panel's title. */
.tl-table th:first-child .tl-sort, .tl-table th:first-child > .tl-vh + *, .tl-table td:first-child { padding-left: var(--tl-pad); }
.tl-table th:last-child .tl-sort, .tl-table td:last-child { padding-right: var(--tl-pad); }
.tl-table tbody tr:last-child td { border-bottom: 0; }
.tl-table tbody tr:hover td { background: color-mix(in srgb, var(--text) 3%, transparent); }
.tl-table tfoot td {
  position: sticky; bottom: 0; background: var(--tl-panel); padding: 13px 14px 16px; border-top: 1px solid var(--tl-total);
  font:600 15px/1.4 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; vertical-align: top;
}
.tl-table tfoot td.l { font:600 15px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }
.tl-table tfoot td.r { text-align: right; }
.tl-sub { display: block; margin-top: 3px; font:400 13px/1.35 var(--sans); color: var(--text-2); white-space: nowrap; }
.tl-sub--pend { font-style: normal; }
.tl-tk { font:700 15px var(--mono); letter-spacing: .01em; color: var(--text); }
.tl-acct { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: var(--text-2); font:400 15px var(--sans); }
.tl-combined { font-weight: 600; color: var(--text); }
.tl-note-txt { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.tl-none { padding: 14px var(--tl-pad) 20px !important; color: var(--text-2) !important; font:400 15px/1.5 var(--sans) !important; white-space: normal !important; }
.tl-empty-row { margin: 0; padding: 4px var(--tl-pad) 20px; font-size:15px; color: var(--text-2); }
.tl-col-act { width: 1%; }
.tl-col-act .tl-link + .tl-link { margin-left: 8px; }

/* Still holding: the progress toward the target reads at a glance. */
.tl-col-pg { min-width: 240px; width: 26%; }
.tl-pg { display: flex; flex-direction: column; gap: 8px; padding-top: 5px; }
.tl-pg__bar { position: relative; display: block; height: 6px; width: 100%; max-width: 280px; background: color-mix(in srgb, var(--text) 7%, transparent); border-radius: 999px; overflow: hidden; }
.tl-pg__bar i { display: block; height: 100%; border-radius: 999px; background: var(--text-2); }
.tl-pg.is-reached .tl-pg__bar i { background: var(--green); }
.tl-pg__txt { font:400 13px/1.35 var(--sans); color: var(--text-2); white-space: nowrap; }
.tl-pg.is-reached .tl-pg__txt b { color: var(--green); font-weight: 600; }
.tl-pg.is-below .tl-pg__txt { color: var(--text-2); }

/* History */
.tl-side { font-weight: 600; color: var(--text); }
.tl-status {
  display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--tl-track);
  font:600 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); white-space: nowrap;
}
.tl-status--filled { padding: 0; background: none; font:500 14px/1.5 var(--sans); color: var(--text-2); }
.tl-status--pending { color: var(--accent-soft, var(--accent)); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.tl-status--cancelled { text-decoration: line-through; }
.tl-table tbody tr.is-cancelled td:not(.tl-col-act) { opacity: .6; }

/* Filters sit under the panel's title, on the panel itself. */
.tl-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; padding: 6px var(--tl-pad) 14px; border: 0; }
.tl-filter { display: flex; flex-direction: column; gap: 6px; }
.tl-filter > span { font:500 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.tl .tl-filter select, .tl .tl-filter input {
  height: 36px; min-width: 150px; padding: 0 16px; font:400 15px/1 var(--sans); color: var(--text);
  background-color: var(--tl-track); border: 0; border-radius: 999px; box-shadow: none; outline: none;
}
.tl .tl-filter select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; font:500 13.5px/1 var(--sans); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.tl .tl-filter input::placeholder { color: var(--text-3); }
.tl .tl-filter select option { background: var(--bg-raised); color: var(--text); }
.tl .tl-filter select:hover, .tl .tl-filter input:hover { background-color: var(--tl-track-hi); }
.tl .tl-filter select:focus, .tl .tl-filter input:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
.tl .tl-filter select:focus-visible, .tl .tl-filter input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-filter--q input { min-width: 160px; }
.tl-filters > .tl-link { align-self: center; margin-top: 18px; }
.tl-toggle {
  min-height: 36px; padding: 0 16px; font:500 13.5px var(--sans); color: var(--text); background: var(--tl-track);
  border: 0; border-radius: 999px; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.tl-toggle:hover { background: var(--tl-track-hi); }
.tl-toggle.is-on { color: var(--accent-soft, var(--accent)); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* ── Import ─────────────────────────────────────────────────── */
.tl-drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px var(--tl-pad) 18px; padding: 32px 16px; text-align: center; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--text) 22%, transparent); border-radius: 14px; background: transparent;
  transition: border-color .15s ease, background-color .15s ease;
}
.tl-drop:hover, .tl-drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tl-drop__t { font-size:16px; font-weight: 600; color: var(--text); }
.tl-drop__t u { text-underline-offset: 3px; }
.tl-drop__s { font-size:13px; color: var(--text-2); }
.tl-srcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; margin: 0 var(--tl-pad) 22px; }
.tl-srcs > div { display: flex; flex-direction: column; gap: 4px; font-size:13px; line-height: 1.45; color: var(--text-2); }
.tl-srcs b { font:600 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); }
/* A file being checked: an inset group on the import panel, not a box inside it. */
.tl-rev { margin: 0 var(--tl-pad) 20px; padding: 18px 20px; border: 0; border-radius: 14px; background: var(--tl-track); }
.tl-rev__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tl-rev__head b { font-size:15px; color: var(--text); word-break: break-all; }
.tl-rev__p { margin: 0 0 12px; font-size:15px; line-height: 1.55; color: var(--text-2); max-width: 900px; }
.tl-verdict { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border: 0; }
.tl-verdict > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tl-verdict b { font-size:15px; color: var(--text); }
.tl-verdict span:not(.tl-tag) { font:500 14px/1.45 var(--sans); font-variant-numeric: tabular-nums; color: var(--text-2); }
.tl-verdict small { font-size:13px; line-height: 1.45; color: var(--text-2); }
.tl-verdict ul { margin: 4px 0 0; padding-left: 20px; font-size:14px; color: var(--text-2); }
.tl-rev__notes { margin: 10px 0 0; padding-left: 20px; font-size:14px; line-height: 1.55; color: var(--text-2); }
.tl-rev__accts { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 16px; }
.tl-rev__acct { display: flex; flex-direction: column; gap: 6px; min-width: 280px; }
.tl-rev__acct > span { font:500 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.tl-rev__act { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.tl-rev--err .tl-rev__head { margin-bottom: 8px; }

/* ── The form ───────────────────────────────────────────────── */
.tl-form__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px 28px; padding: 12px var(--tl-pad) 24px; }
.tl-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tl-field--wide, .tl-field--note, .tl-lotslot { grid-column: 1 / -1; }
.tl-lotslot:empty { display: none; }
.tl-field__l { font:600 15px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }
.tl-field__l i { font-style: normal; font-weight: 400; color: var(--text-2); }
.tl-field__hint { font-size:13px; line-height: 1.4; color: var(--text-2); min-height: 1em; }
.tl-inwrap { display: flex; align-items: center; gap: 8px; }
.tl-inwrap em { font-style: normal; font:500 15px var(--mono); color: var(--text-2); }
/* A field is a figure on a rule (as Risk mix's "Adjust your goal"): no box, the rule turns amber on focus. */
.tl .tl-in {
  width: 100%; min-width: 0; height: 40px; padding: 0 2px; font:600 16px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text);
  background: transparent; border: 0; border-bottom: 2px solid var(--tl-track-hi); border-radius: 0; box-shadow: none; outline: none;
  -moz-appearance: textfield; appearance: none; transition: border-color .15s ease;
}
.tl .tl-in::-webkit-outer-spin-button, .tl .tl-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tl .tl-in::placeholder { color: var(--text-3); font-weight: 400; opacity: 1; }
.tl .tl-in:hover { border-bottom-color: color-mix(in srgb, var(--text) 22%, transparent); }
.tl .tl-in:focus { border-bottom-color: var(--accent); }
.tl .tl-in[type="date"] { color-scheme: inherit; }
body[data-theme="light"] .tl .tl-in[type="date"] { color-scheme: light; }
.tl .tl-in--text, .tl select.tl-in { font:500 15px/1 var(--sans); }
.tl select.tl-in { cursor: pointer; }
.tl select.tl-in option { background: var(--bg-raised); color: var(--text); }
.tl .tl-in--tk { text-transform: uppercase; }
.tl .tl-in--tk::placeholder { text-transform: none; }
.tl .tl-in--pct { width: 80px; }
/* Choose-one: the site's segmented control — one pill track, the chosen option raised inside it. */
.tl-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 0; border-radius: 999px; background: var(--tl-track); align-self: flex-start; }
.tl-seg__o {
  position: relative; display: flex; align-items: center; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font:600 14px/1.2 var(--sans); color: var(--text-2); background: none; transition: background-color .15s ease, color .15s ease;
}
.tl-seg__o input { position: absolute; opacity: 0; pointer-events: none; }
.tl-seg__o:hover { color: var(--text); }
.tl-seg__o.is-on { color: var(--text); background: var(--fx-pill-on, var(--surface-3)); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 1px var(--fx-line, transparent); }
.tl-seg__o:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-form__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 6px; border: 0; }
.tl-form__total { margin-right: auto; font-size:15px; color: var(--text-2); }
.tl-form__total b { font:600 15px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); margin-left: 8px; }
.tl-form__err { font-size:15px; font-weight: 600; color: var(--red); }
.tl-form__err:empty { display: none; }

/* Per-fund targets */
.tl-targets__body { display: flex; flex-wrap: wrap; gap: 16px 32px; padding: 8px var(--tl-pad) 22px; align-items: center; }
.tl-targets__add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tl-targets__add .tl-in--tk { width: 160px; }
.tl-targets__add .tl-btn { min-height: 36px; padding: 0 18px; font-size:13.5px; }
.tl-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.tl-chips li { display: flex; align-items: center; gap: 8px; font:500 15px var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2); }
.tl-chips b { color: var(--text); font-weight: 600; }

.tl-foot { margin: 6px 0 0; padding: 0; border: 0; font-size:13px; line-height: 1.55; color: var(--text-2); max-width: 110ch; }

/* ── Narrower screens ───────────────────────────────────────── */
@media (max-width: 900px) {
  .tl-srcs { grid-template-columns: 1fr; }
  .tl-strip { grid-template-columns: 1fr; }
}
/* Phones: each ledger row becomes a small two-column statement; the header row goes. */
@media (max-width: 640px) {
  .view--tradelog { padding: 12px 16px 48px; }
  .tl { --tl-pad: 18px; gap: 16px; }
  .tl-bar .tl-btn { flex: 1 1 auto; }
  .tl-bar__sp { display: none; }
  .tl-target { flex: 1 1 auto; justify-content: space-between; }
  .tl-empty { padding: 22px 20px; }
  .tl-empty__cta .tl-btn { flex: 1 1 100%; }
  .tl .tl-hero { padding: 20px; gap: 20px; }
  .tl-hero__lead { min-width: 0; }
  .tl-hero__v { font-size:36px; }
  .tl-hero__cells { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .tl-v { font-size:19px; }
  .tl-scroll { max-height: none; overflow: visible; }
  .tl-table, .tl-table tbody, .tl-table tfoot { display: block; }
  .tl-table thead { display: none; }
  .tl-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 16px var(--tl-pad); border-bottom: 1px solid var(--tl-rule); }
  .tl-table tbody tr:last-child { border-bottom: 0; }
  .tl-table tbody td, .tl-table tfoot td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal; position: static; background: none !important; }
  .tl-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font:500 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); }
  .tl-table td.tl-col-pg, .tl-table td.tl-col-act, .tl-table td.tl-none { grid-column: 1 / -1; }
  .tl-table td:empty { display: none; }
  .tl-sub, .tl-pg__txt { white-space: normal; }
  .tl-table tfoot tr { border-top: 1px solid var(--tl-total); border-bottom: 0; }
  .tl-table td.tl-col-act, .tl-table td.tl-col-pg { width: auto; min-width: 0; }
  .tl-col-act .tl-btn--row { width: 100%; min-height: 40px; }
  .tl-pg__bar { max-width: none; }
  .tl-filters .tl-filter, .tl .tl-filter select, .tl .tl-filter input { flex: 1 1 100%; min-width: 0; width: 100%; }
  .tl-drop { padding: 24px 12px; }
  .tl-rev { padding: 16px; }
  .tl-rev__acct { min-width: 0; flex: 1 1 100%; }
  .tl-form__grid { grid-template-columns: 1fr 1fr; }
  .tl-form__foot .tl-btn { flex: 1 1 auto; }
}

/* styles.css squares off every focused button (border-radius on :focus-visible); keep pills and round closes round. */
.tl-btn:focus-visible, .tl-toggle:focus-visible { border-radius: 999px; }
.tl-x:focus-visible { border-radius: 50%; }
.tl-drop:focus-visible { border-radius: 14px; }