/* /trade: papertrade with the tax effect of each close */
.tr-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:20px 32px; align-items:end; margin-top:8px}
@media (max-width:860px){ .tr-top{grid-template-columns:1fr} }
.tr-intro h1{font-family:var(--display); font-weight:700; font-size:clamp(30px,4vw,44px); letter-spacing:-.03em; line-height:1.05; margin:0}
.tr-lead{margin:12px 0 0; font-size:16px; color:var(--muted); max-width:58ch}
.tr-note{margin:10px 0 0; font-size:13.5px; color:var(--ink); max-width:62ch}
.tr-markets{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tr-mkt{padding:14px 16px; display:grid; gap:2px}
.tr-mkt .k{font-size:13px; font-weight:600; color:var(--muted)}
.tr-mkt .v{font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.tr-mkt .s{font-size:12px; color:var(--muted)}

.tr-who{margin-top:22px; padding:14px 16px; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:12px 18px; align-items:end}
@media (max-width:700px){ .tr-who{grid-template-columns:1fr} }
.tr-who label{margin-bottom:6px}
.tr-addr-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px}
.tr-addr-row input{width:100%; min-width:0}
.tr-addr-row .btn{width:auto}

.tr-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; margin-top:20px; align-items:start}
@media (max-width:960px){ .tr-grid{grid-template-columns:1fr} }
.tr-main{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; min-width:0}
.tr-main .section-h{margin-top:8px}
.tr-main .section-h h2{font-family:var(--display); font-size:22px; letter-spacing:-.02em; margin:0}

.tr-tax{padding:18px 20px}
.tr-tax h2{font-family:var(--display); font-size:22px; letter-spacing:-.02em; margin:0}
.tr-tax-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.tr-figs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:14px}
@media (max-width:640px){ .tr-figs{grid-template-columns:1fr} }
.tr-figs > div{display:grid; gap:3px; min-width:0}
.tr-figs .k{font-size:13px; color:var(--muted)}
.tr-figs .v{font-family:var(--display); font-weight:700; font-size:clamp(22px,2.6vw,28px); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.tr-figs .s{font-size:12.5px; color:var(--muted)}
.tr-empty{display:grid; gap:10px; justify-items:start}
.tr-empty p{margin:0; color:var(--muted); max-width:56ch}
.gain{color:var(--gain)} .loss{color:var(--loss)} .none{color:var(--ink)}
.chip.none{color:var(--muted)}
.tr-fine{margin:12px 0 0; font-size:12.5px; color:var(--muted)}
.tr-fine a{color:var(--accent-ink)}

.tr-pos td{vertical-align:top; font-variant-numeric:tabular-nums}
.tr-pos td .chip{margin-left:4px}
.tr-pos .sub{display:block; color:var(--muted); font-size:12px; font-weight:400}
.tr-close{display:inline-flex; align-items:center; min-height:32px; font-weight:600; font-size:13px; color:var(--accent-ink)}
.tr-harvest{padding:16px 18px; border-color:color-mix(in srgb, var(--loss) 30%, var(--crease)); background:linear-gradient(120deg, var(--loss-soft), var(--sheet) 60%)}
.tr-harvest h3{margin:0; font-size:16px}
.tr-harvest p{margin:6px 0 0; font-size:14px; color:var(--muted); max-width:72ch}

.tr-ticket{padding:18px; display:grid; gap:12px; position:sticky; top:16px}
@media (max-width:960px){ .tr-ticket{position:static} }
.tr-ticket h2{font-family:var(--display); font-size:22px; letter-spacing:-.02em; margin:0}
.tr-ticket .seg2{justify-self:start}
.tr-ticket .grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tr-ticket label{margin:0}
.tr-ticket input[type=range]{width:100%; accent-color:var(--accent)}
.tr-ticket .btn{justify-content:center; min-height:44px; text-decoration:none}
.tr-out{margin:0; display:grid; gap:8px; padding:12px 0; border-top:1px dashed var(--crease); border-bottom:1px dashed var(--crease)}
.tr-out div{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.tr-out dt{font-size:13px; color:var(--muted)}
.tr-out dd{margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.tr-out dd span{display:block; font-size:11.5px; font-weight:400; color:var(--muted); max-width:22ch}
.tr-bad dd{color:var(--loss); font-weight:500}
.tr-side span{font-size:14px}
@media (max-width:700px){
  .tr-pos thead{display:none}
  .tr-pos, .tr-pos tbody, .tr-pos tr, .tr-pos td{display:block}
  .tr-pos tr{padding:12px 14px; border-bottom:1px solid var(--crease)}
  .tr-pos tr:last-child{border-bottom:0}
  .tr-pos td{border:0; padding:3px 0}
  .tr-pos td[data-label]{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; text-align:right; align-items:baseline}
  .tr-pos td[data-label]::before{content:attr(data-label); grid-row:1 / span 2; color:var(--muted); font-size:13px; text-align:left}
  .tr-pos td[data-label] > *{justify-self:end}
}

.tr-closed{padding:16px 18px}
.tr-closed h2{font-family:var(--display); font-size:22px; letter-spacing:-.02em; margin:0 0 4px}
.tr-cl{list-style:none; margin:8px 0 0; padding:0; display:grid}
.tr-cl li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--crease)}
.tr-cl li:first-child{border-top:0}
.tr-cl .what b{font-weight:600}
.tr-cl .what span{display:block; font-size:12.5px; color:var(--muted)}
.tr-cl .res{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
.tr-cl .res span{display:block; font-size:12.5px; font-weight:400; color:var(--muted)}
.tr-cl .btn{padding:7px 14px; font-size:13px}
.tr-justclosed{padding:14px 18px; display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; border-color:color-mix(in srgb, var(--gain) 35%, var(--crease)); background:linear-gradient(120deg, var(--gain-soft), var(--sheet) 60%)}
.tr-justclosed p{margin:0; font-weight:600}
.tr-share{width:min(640px, calc(100vw - 32px)); padding:22px; border:1px solid var(--crease); color:var(--ink)}
.tr-share::backdrop{background:color-mix(in srgb, var(--ink) 35%, transparent)}
.tr-share h2{font-family:var(--display); font-size:24px; letter-spacing:-.02em; margin:0}
.tr-share-x{float:right; margin:-6px -6px 0 0}
.tr-share-x .btn{padding:6px 12px; font-size:12.5px}
.tr-check{display:flex; align-items:center; gap:8px; margin:12px 0 0; font-family:var(--body); font-size:14px; letter-spacing:0; text-transform:none; color:var(--ink)}
.tr-check input{width:18px; height:18px; accent-color:var(--accent)}
.tr-share-img{margin:14px 0; border-radius:12px; overflow:hidden; border:1px solid var(--crease); background:var(--paper); min-height:120px; display:grid; place-items:center}
.tr-share-img img{display:block; width:100%; height:auto}
.tr-share .btnrow .btn{text-decoration:none}
.tr-share [aria-disabled="true"]{pointer-events:none; opacity:.5}

/* exchange layout */
.tx-head{margin-top:6px}
.tx-head h1{font-family:var(--body); font-weight:400; font-size:14px; line-height:1.5; color:var(--muted); margin:0; max-width:72ch}
.tx-lead{margin:6px 0 0; font-size:15px; color:var(--muted); max-width:72ch}
.tx-bar{margin-top:16px; padding:8px 10px; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between}
.tx-mkts{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.tx-mkt{display:inline-flex; align-items:baseline; gap:8px; font:inherit; border:1px solid transparent; background:none; border-radius:999px; padding:7px 14px; cursor:pointer; color:var(--ink); min-height:40px}
.tx-mkt b{font-weight:700}
.tx-mkt .px{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.tx-mkt .ch{font-size:12.5px; font-variant-numeric:tabular-nums}
.tx-mkt[aria-pressed="true"]{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 40%, transparent)}
.tx-cap{font-size:12.5px; color:var(--muted); padding:0 6px}
.tx-iv button{min-width:38px}
.tx-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; margin-top:12px; align-items:start}
@media (max-width:960px){ .tx-grid{grid-template-columns:1fr} }
.tx-chartbox{padding:6px 0 0 6px; overflow:hidden}
.tx-chart{height:clamp(320px, 52vh, 520px)}
.pchart{position:relative; touch-action:none; cursor:crosshair}
.pchart canvas{display:block}
.pchart-tip{position:absolute; pointer-events:none; background:var(--sheet); border:1px solid var(--crease); border-radius:12px; padding:9px 12px; font-size:12.5px; color:var(--muted); box-shadow:0 8px 24px -14px color-mix(in srgb, var(--ink) 40%, transparent); max-width:min(320px, calc(100% - 24px)); display:grid; gap:2px}
.pchart-tip .tt-ohlc{font-family:var(--data); font-size:11px; color:var(--muted); margin-bottom:4px; display:flex; flex-wrap:wrap; gap:0 10px}
.pchart-tip .tt-ohlc span{white-space:nowrap}
.pchart-tip .tt-k{color:var(--ink)}
.pchart-tip .tt-v{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.01em}
.pchart-tip b{font-weight:700}
.tx-grid .tr-ticket{position:static}
#placego:disabled{opacity:1; background:var(--shade); border-color:var(--crease); color:var(--muted)}
.tr-main{margin-top:14px}
@media (max-width:600px){
  .tx-mkts{flex-wrap:nowrap; width:100%}
  .tx-mkt{padding:6px 10px; gap:6px}
  .tx-mkt .px{font-size:16px}
  .tx-cap{display:none}
  .tx-iv{width:100%; justify-content:space-between}
  .tx-chart{height:340px}
}

/* positions panel and tax section, in that order under the chart */
.tx-panel{margin-top:12px; padding:0; overflow:hidden}
.tx-tabs{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--crease)}
.tx-tablist{display:flex; gap:4px}
.tx-tablist button{font:600 14px var(--body); background:none; border:0; border-radius:999px; padding:8px 14px; color:var(--muted); cursor:pointer; min-height:40px; display:inline-flex; gap:6px; align-items:center}
.tx-tablist button[aria-selected="true"]{background:var(--accent-soft); color:var(--accent-ink)}
.tx-count{font:600 11.5px var(--data); background:var(--sheet); border:1px solid var(--crease); border-radius:999px; padding:1px 7px}
.tx-count:empty{display:none}
.tx-addr{display:flex; gap:6px; flex:1 1 280px; max-width:440px}
.tx-addr input{flex:1; min-width:0}
.tx-addr .btn{width:auto; flex:none; padding:8px 14px}
.tx-bal{margin:0; padding:8px 16px 0; font-size:13px; color:var(--muted)}
.tx-bal:empty{display:none}
.tx-panel .tablebox{border:0; border-radius:0; margin:0}
.tx-panel .tr-harvest{margin:12px; border-radius:var(--round)}
.tx-panel .tr-closed{padding:4px 16px 8px}
.tx-empty{margin:0; padding:22px 16px; color:var(--muted); display:grid; gap:12px; justify-items:start}
.tx-empty p{margin:0}
.tx-taxsec{margin-top:26px}
.tx-taxsec .section-h h2{font-family:var(--display); font-size:22px; letter-spacing:-.02em; margin:0}
.tx-taxsec select{width:auto; min-width:220px}
.tx-taxsec .tr-tax{margin-top:10px}
.tr-tax-head b{font-size:15px}
#justclosed:not(:empty){margin-top:12px; display:grid; gap:8px}
/* Trading screens use the whole window: the workspace runs edge to edge with a slim gutter */
.tradepage .wrap{max-width:none; padding-inline:clamp(12px, 1.4vw, 24px)}
.tradepage .tx-chart{height:clamp(360px, 62vh, 680px)}
@media (max-width:600px){ .tradepage .tx-chart{height:clamp(300px, 48svh, 380px)} }
@media (max-height:500px) and (orientation:landscape){ .tradepage .tx-chart{height:300px} }
@media (min-width:1600px){ .tx-grid{grid-template-columns:minmax(0,1fr) 360px} }