/* ============================================================
   Trade tab (Float Desk) — only what style.css doesn't already have.
   Everything takes the site's tokens, so light/dark follow theme.js.
   ============================================================ */
.tr-bar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.tr-bar .tr-tabs { margin-bottom: 0; }
.tr-sources { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-panel { display: flex; flex-direction: column; gap: 16px; }
.tr-panel[hidden], .tr-modal[hidden] { display: none !important; }

button.tr-primary { background: var(--ink); color: var(--on-ink); }
button.tr-primary:hover:not(:disabled) { background: var(--surface); color: var(--ink); }

.tr-status { font-size: 12px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.tr-status.err { background: transparent; border: 1px solid var(--err); color: var(--err); }
.tr-status.warn { background: transparent; border: 1px solid #d99a00; color: #d99a00; margin-top: 8px; }
.tr-progress { height: 5px; margin-top: 6px; background: var(--surface); border-radius: var(--r-pill); overflow: hidden; }
.tr-progress div { height: 100%; width: 0; background: var(--live); transition: width .3s ease; }

.tr-table { overflow-x: auto; }
.tr-table td { white-space: nowrap; vertical-align: top; }
.tr-table td.num, .tr-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.tr-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-dim { color: var(--ink-3); font-weight: 500; text-transform: none; letter-spacing: 0; }

.tr-tag { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; margin: 1px 4px 1px 0;
  border: 1px solid currentColor; border-radius: var(--r-pill); white-space: nowrap; }
.tr-tag.gold { color: var(--hot); background: var(--hot-bg); border-color: transparent; }
.tr-tag.good { color: var(--ok); }
.tr-tag.bad  { color: var(--err); }
.tr-tag.dim  { color: var(--ink-3); }

.tr-kpis { display: flex; gap: 26px; flex-wrap: wrap; }
.tr-kpis div { display: flex; flex-direction: column; gap: 2px; }
.tr-kpis span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.tr-kpis b { font-size: 20px; font-variant-numeric: tabular-nums; }

.tr-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 18px; margin: 0; }
.tr-info dt { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.tr-info dd { margin: 2px 0 0; font-size: 12.5px; color: var(--ink); }

.tr-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tr-chip { font-variant-numeric: tabular-nums; padding: 6px 12px; border-radius: var(--r-pill); }
.tr-chip small { color: var(--ink-3); margin-left: 6px; font-weight: 500; }
.tr-chip:hover small { color: inherit; }
button.tr-link { background: none; border: none; padding: 0; border-radius: 0; font-variant-numeric: tabular-nums; text-decoration: underline dotted; }
button.tr-link:hover:not(:disabled) { background: none; color: var(--live); box-shadow: none; }

.tr-options summary { cursor: pointer; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.tr-options[open] summary { margin-bottom: 10px; }
.tr-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; font-size: 12.5px; }
.tr-checks label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.tr-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.tr-sheet { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  width: min(1080px, 100%); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.tr-sheet .card { animation: none; }
.tr-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tr-sheet-head h2 { font-size: 18px; margin: 0 0 4px; }
.tr-x { font-size: 18px; line-height: 1; width: 36px; height: 36px; padding: 0; flex: none; }

.tr-pager { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-pager button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

.tr-contract { display: grid; grid-template-columns: 1fr auto 240px; gap: 14px; align-items: stretch; }
.tr-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tr-slot { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-1); padding: 9px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; }
.tr-slot .nm { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.tr-slot .fl { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tr-slot .pr { font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-slot.owned { outline: 2px solid var(--ok); }
.tr-slot a, .tr-table a { color: var(--live); }
.tr-arrow { display: flex; align-items: center; font-size: 26px; font-weight: 700; color: var(--ink-3); }
.tr-outcard { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg);
  padding: 14px; display: flex; flex-direction: column; gap: 5px; }
.tr-outcard .fl { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tr-outcard .big { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-outcard .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }

@media (max-width: 820px) {
  .tr-contract { grid-template-columns: 1fr; }
  .tr-arrow { justify-content: center; transform: rotate(90deg); }
  .tr-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-bar .tr-tabs { width: 100%; overflow-x: auto; }
}

/* Rows coloured by the grade the trade-up gives (CS2's own rarity colours):
   a bar down the left edge and a small labelled chip by the skin name. */
.tr-graded tr[data-grade] td:first-child { box-shadow: inset 4px 0 0 var(--grade); padding-left: 12px; }
.tr-grade { display: flex; width: fit-content; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
  color: var(--ink-2); margin-top: 2px; }
.tr-grade::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grade); }

/* Favorites star + contract actions */
.tr-acts { white-space: nowrap; }
.tr-star { background: none; border: 0; box-shadow: none; padding: 2px 6px; min-height: 0; font-size: 17px; line-height: 1;
  color: var(--ink-3); cursor: pointer; }
.tr-star[aria-pressed="true"] { color: #e4ae39; }
.tr-star:hover { color: #e4ae39; }
.tr-star.big { font-size: 24px; }
.tr-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-actions .tr-primary { margin-left: auto; }
.tr-acts .tr-link + .tr-link { margin-left: 10px; }
.tr-th { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; }

/* Profit & targets */
.tr-up { color: var(--ok, #15803d); font-weight: 700; }
.tr-down { color: var(--bad, #b91c1c); font-weight: 700; }
.tr-h3 { font-size: 14px; margin: 16px 0 4px; }
.tr-table td.tr-wrap { white-space: normal; min-width: 240px; }
.tr-pages { align-items: center; margin: 6px 0; }
.tr-ok { color: var(--ok, #15803d); font-weight: 700; font-size: 11px; }
.tr-q input { min-width: 220px; }
.tr-db { font-size: 11px; font-weight: 600; }
.tr-plan { margin: 6px 0 10px 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
.tr-links { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Fold a section by clicking its title */
.tr-fold-h { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.tr-fold-h::before { content: "▾"; font-size: 12px; color: var(--ink-3); transition: transform .15s; }
.tr-folded > .tr-fold-h::before { transform: rotate(-90deg); }
.tr-folded > :not(.tr-fold-h) { display: none !important; }
.tr-folded > .tr-fold-h { margin-bottom: 0; border-bottom: 0; }

/* Group tools by task while retaining the existing tab URLs and panels. */
.trade-page .tr-bar { display:block; }
.trade-page .tr-tabs { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr); gap:12px; padding:0; border:0; }
.tr-tab-group { min-width:0; border:1px solid var(--rule); border-radius:12px; background:var(--card); padding:12px; }
.tr-tab-group-label { display:block; margin:0 0 9px 4px; color:var(--ink-2); font-size:11px; font-weight:600; }
.tr-tab-group-buttons { display:flex; flex-wrap:wrap; gap:5px; }
.trade-page .tr-tab-group .cov-tab { margin:0; border:0; border-radius:7px; padding:9px 11px; white-space:normal; text-align:left; font-size:12px; font-weight:500; background:transparent; color:var(--ink-2); }
.trade-page .tr-tab-group .cov-tab:hover { background:var(--paper); color:var(--ink); }
.trade-page .tr-tab-group .cov-tab.active { background:var(--ink); color:var(--on-ink); }
.trade-page .tr-tab-group .cov-tab:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.trade-page .tr-sources { margin-top:12px; }
@media(max-width:900px) { .trade-page .tr-tabs { grid-template-columns:1fr; gap:8px; } .tr-tab-group { padding:10px; } }

.trade-page .tr-tabs { display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--rule); padding:0 0 12px; }
.trade-page .tr-sources { margin:0; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.trade-page [data-live-source][hidden] { display:none !important; }
.trade-page .tr-sources { min-width:0; max-width:100%; }
.trade-page .tr-tabs .cov-tab { padding:9px 12px; border:0; border-radius:6px; }
@media(max-width:760px) {
  .trade-page .tr-sources { flex-basis:100%; }
  .trade-page .row > label { min-width:0; max-width:100%; flex-wrap:wrap; }
  .trade-page .row select, .trade-page .row input { min-width:0; max-width:100%; }
}

/* Trade tools stay beside the active workspace. On phones use a compact menu. */
.tr-menu-toggle { display:none; }
.trade-page .tr-workspace { display:grid; grid-template-columns:180px minmax(0,1fr); gap:20px; align-items:start; }
.trade-page .tr-bar { position:sticky; top:16px; }
.trade-page .tr-tabs { display:flex; flex-direction:column; flex-wrap:nowrap; border:0; padding:0; width:100%; gap:5px; }
.trade-page .tr-tabs .cov-tab { text-align:left; white-space:normal; margin:0; width:100%; padding:12px; }
.trade-page .tr-tabs .cov-tab.active { background:var(--ink); color:var(--on-ink); }
.trade-page .tr-content { min-width:0; }
.trade-page #rdQ { width:100%; min-width:180px; padding:10px 12px; border:1px solid var(--rule); border-radius:7px; background:var(--paper); color:var(--ink); font:inherit; }
.trade-page #rdBar .tr-q { flex:1 1 280px; }
@media(max-width:650px) {
  .trade-page .tr-workspace { grid-template-columns:minmax(0,1fr); gap:12px; }
  .trade-page .tr-bar { position:static; }
  .trade-page .tr-menu-toggle { display:block; margin-bottom:8px; }
  .trade-page .tr-tabs { display:none; }
  .trade-page .tr-tabs.menu-open { display:flex; }
  .trade-page .tr-tabs .cov-tab { font-size:11px; padding:8px 10px; }
}
.tr-discovery { border:1px solid var(--rule); border-radius:12px; background:var(--card); }
.tr-discovery > summary { cursor:pointer; padding:16px; font-size:13px; font-weight:600; }
.tr-discovery > .card { border:0; margin:0; }
.tr-discovery[hidden] { display:none; }
.tr-results-title { font-size:11px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em; margin:20px 0 10px; }

/* Profit & Targets: every option visible, laid out on one even grid. */
#tab-profit .tr-profit-card { padding:24px; border-radius:16px; }
#tab-profit .tr-profit-intro { max-width:820px; margin:8px 0 20px; line-height:1.6; }
#tab-profit .tr-profit-form { display:flex; flex-wrap:wrap; gap:14px 16px; align-items:flex-end; margin-bottom:18px; }
#tab-profit .tr-profit-form > * { flex:1 1 160px; max-width:220px; }
#tab-profit .tr-profit-form > .tr-fee { flex:0 0 90px; }
#tab-profit .tr-profit-form > .tr-check { flex:0 0 auto; }
#tab-profit .tr-profit-form > label:not(.tr-check) { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:600; color:var(--ink-2); min-width:0; }
#tab-profit .tr-profit-form > label:not(.tr-check) input, #tab-profit .tr-profit-form > label:not(.tr-check) select { width:100%; min-width:0; flex:none; height:40px; border-radius:8px; box-sizing:border-box; }
#tab-profit .tr-profit-form > label:has(#tgName), #tab-profit .tr-profit-form > label:has(#pfGrade) { flex:2 1 240px; max-width:340px; }
#tab-profit .tr-profit-form .tr-check { display:flex; align-items:center; gap:8px; height:40px; font-size:12px; color:var(--ink-2); white-space:nowrap; }
#tab-profit .tr-profit-form .tr-check[hidden] { display:none; }
#tab-profit .tr-profit-form > .tr-cost-range { flex:2 1 280px; max-width:340px; }
#tab-profit .tr-cost-range { margin:0; padding:0; border:0; min-width:0; }
#tab-profit .tr-cost-range legend { font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:6px; padding:0; }
#tab-profit .tr-cost-range > div { display:flex; gap:10px; align-items:center; }
#tab-profit .tr-cost-range label { display:flex; flex:1; gap:6px; align-items:center; min-width:0; height:40px; box-sizing:border-box; background:var(--paper); border:1px solid var(--rule); border-radius:8px; padding:0 10px; }
#tab-profit .tr-cost-range label span { font-size:11px; white-space:nowrap; color:var(--ink-2); }
#tab-profit .tr-cost-range input { background:transparent; border:0; padding:0; height:100%; width:100%; min-width:0; font-size:12px; }
#tab-profit .tr-range-dash { color:var(--ink-3); }
#tab-profit .tr-profit-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; }
#tab-profit .tr-profit-actions button { min-height:40px; border-radius:8px; }
#tab-profit .tr-profit-filters { padding:18px 0; margin-top:18px; border-top:1px solid var(--rule); }
#tab-profit #pfStat { flex-basis:100%; font-size:11px; }
#tab-profit .tr-profit-verify { padding:12px 14px; border-radius:10px; background:var(--paper); }
#tab-profit .tr-profit-verify .hint { font-size:11px; }
#tab-profit .tr-table { margin-top:14px; }
@media (max-width:600px) {
 #tab-profit .tr-profit-card { padding:16px; border-radius:12px; }
 #tab-profit .tr-profit-form { gap:12px; }
 #tab-profit .tr-profit-form > * { max-width:none; }
 #tab-profit .tr-profit-form > label:has(#tgName), #tab-profit .tr-profit-form > label:has(#pfGrade), #tab-profit .tr-profit-form > .tr-cost-range { flex:1 1 100%; max-width:none; }
 #tab-profit .tr-profit-actions button { flex:1 1 auto; }
 #tab-profit .tr-profit-filters > label { flex:1 1 100%; }
}

/* Sold inputs and their replacements */
.tr-tag.tr-sold { color: var(--err); border-color: currentColor; }
.tr-tag.tr-new { color: var(--ok); border-color: currentColor; }
.tr-slot.sold { opacity: .6; outline: 1px dashed var(--err); outline-offset: -1px; }
.tr-slot.sold .pr { text-decoration: line-through; }
.tr-slot [data-swap-pick] { padding: 0; font-size: 11px; align-self: flex-start; }
.tr-swap { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.tr-swap-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; margin-bottom: 8px; }
.tr-swap-h [data-swap-close] { margin-left: auto; }
.tr-swap table { width: 100%; font-size: 12px; }
.tr-swap .tr-acts { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.tr-swap .tr-primary { min-height: 30px; padding: 4px 12px; }
th.tr-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.tr-sortable:hover, th.tr-sortable:focus-visible { color: var(--ink); }
th.tr-sortable.on { color: var(--ink); }
.tr-sort-mark small { font-size: 9px; font-weight: 700; margin-right: 1px; vertical-align: 1px; }
.tr-sort-note { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); margin: 4px 0 8px; }
.tr-sort-note [data-pf-sort-clear] { margin-left: 6px; }
.tr-follow:empty { display: none; }
.tr-follow { margin-top: 6px; font-size: 12px; }