/* Vibrozz 2 — position page (/position/SYMBOL). Desktop: left column = header card (KPI strip + the coin verdict)
   joined with the chart, then the actions; right column = «Разбор» (compact) and the details card (tabs: numbers with
   the price ladder · market · coin · orders). Up to 1000 px: one column — header → actions → chart → «Разбор» → details. */
.ps{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start;min-width:0}
.ps-l,.ps-r{display:grid;gap:20px;min-width:0}
.ps .ps-ai{order:0}   /* deal.css orders .dl-ai for /deal; not here */
.ps-hc{display:grid;min-width:0}
.ps-chips-h:empty{display:none}
.ps-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px}
.ps-chips::-webkit-scrollbar{display:none}
.ps-chip{display:inline-flex;align-items:center;gap:8px;color:var(--tx-2);text-decoration:none}
.ps-chip b{color:var(--tx);font-weight:700}
.ps-chip span{font-weight:600}
.ps-chip.on b{color:var(--card)}
.ps-chip.on span.up,.ps-chip.on span.dn{color:inherit;opacity:.8}
.ps-chip .coin{background:var(--soft-2)}

/* ---------- header (+ KPIs) ---------- */
.ps-head{border-radius:var(--r-card) var(--r-card) 0 0;container-type:inline-size}
.ps-top{display:flex;align-items:center;gap:16px;padding:22px 24px 18px;flex-wrap:wrap;min-width:0}
.ps-id{display:grid;gap:4px;min-width:0;flex:1 1 220px}
.ps-id h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.ps-id h2 .pill{font-size:13px;padding:4px 9px}
.ps-id h2 .pill .ic{margin-right:1px}
.ps-id small{color:var(--tx-3);font-size:13px}
.ps-pnl{margin-left:auto;text-align:right;display:grid;gap:2px}
.ps-pnl b{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.1;white-space:nowrap}
.ps-pnl small{color:var(--tx-3);font-size:13px;white-space:nowrap}
.ps-pnl small span{font-weight:700}
/* money at now / SL / TP: one segmented strip (cells split by the card colour) */
.ps-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:0 24px 20px;border-radius:18px;overflow:hidden}
.ps-k{display:grid;gap:1px;padding:12px 16px;background:var(--soft);min-width:0}
.ps-k>span{color:var(--tx-3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-k>span i{font-style:normal}
.ps-ks{display:none}
.ps-k>b{font-size:20px;font-weight:700;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-k>small{color:var(--tx-3);font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-k>small.dn{color:var(--dn);font-weight:600}.ps-k>small.up{color:var(--up);font-weight:600}
/* the coin verdict (coin.js, mode 'brief') under the strip; a tap opens the «Монета» tab */
.ps-brief{margin:-6px 24px 20px}
.ps-brief:empty{display:none}
/* narrow header: short labels, the strip stays one row */
@container (max-width:560px){
  .ps-kpis{margin:0 18px 16px;border-radius:16px}
  .ps-k{padding:10px 11px}
  .ps-kl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ps-ks{display:inline}
  .ps-k>span{font-size:12px}
  .ps-k>b{font-size:clamp(13px,4.3cqi,18px)}
  .ps-k>small{font-size:11.5px}
  .ps-brief{margin:-4px 18px 16px}
}

/* ---------- chart (joined to the header on desktop) ---------- */
.ps-chartc{border-radius:0 0 var(--r-card) var(--r-card);border-top:1px solid var(--line);display:flex;flex-direction:column;container-type:inline-size}
.ps-tools{display:flex;align-items:center;gap:6px;padding:10px 14px 6px 18px;min-width:0}
.ps-tools .vc-tf{flex:0 1 auto}
.ps-tools .vc-tf button{padding:0 8px}
.ps-st{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tx-3);white-space:nowrap;margin-left:6px}
.ps-st span{display:none}
.ps-st.bad span{display:inline;color:var(--warn);font-weight:600}
.ps-tb{display:flex;align-items:center;gap:2px;margin-left:auto;flex:none}
.ps-tbt{padding:0 9px;gap:6px;color:var(--tx-2)}
.ps-tbt span{display:none}
.ps-tb .icon-btn{color:var(--tx-2)}
.ps-tb .icon-btn.on{background:var(--acc);color:var(--on-acc)}
.ps-chart{height:clamp(460px,calc(100vh - 360px),620px);margin:0 10px 10px;border-radius:16px}
.ps-chartc:fullscreen{background:var(--card)}
.ps-chartc.vc-full .ps-chart{flex:1;height:auto;min-height:0}
@container (min-width:640px){.ps-st span{display:inline}}
@container (min-width:700px){.ps-tbt span{display:inline}}

/* ---------- actions: 4 × 2 tiles (7 actions + close), icon over label; a wide card puts the icon left ---------- */
.ps-acts{container-type:inline-size}
.ps-ag{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:14px}
.ps-ab{height:auto;min-height:70px;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 6px;border-radius:16px;font-size:13px;line-height:1.2;text-align:center;white-space:normal;min-width:0}
.ps-ab span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ps-ab .ic{color:var(--tx-2);flex:none}
.ps-ab:hover .ic{color:var(--tx)}
.ps-ab.red .ic{color:var(--dn)}
@container (min-width:640px){
  .ps-ag{gap:10px;padding:16px}
  .ps-ab{min-height:54px;flex-direction:row;justify-content:flex-start;gap:10px;padding:0 14px;font-size:14px;text-align:left}
  .ps-ab .ic{color:var(--tx-3)}
}
:root[data-vz-theme=dark] .ps-close{background:var(--dn);color:var(--on-dn,#fff)}
:root[data-vz-theme=dark] .ps-close .ic,:root[data-vz-theme=dark] .ps-close:hover .ic{color:var(--on-dn,#fff)}
:root[data-vz-theme=dark] .ps-close:hover{background:var(--dn);filter:brightness(1.08)}

/* the last good account while Bybit answers with an error: dimmed, no actions */
.ps.stale .ps-pnl b,.ps.stale .ps-kpis,.ps.stale .ps-ladb,.ps.stale .ps-kv,.ps.stale .ps-ordb{opacity:.55}
.ps.stale .tr-oact{visibility:hidden}

/* ---------- details card: tabs ---------- */
.ps-more{container-type:inline-size;scroll-margin-top:16px}
.ps-tabs{padding:14px 14px 2px}
.seg.ps-seg button{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 6px;font-size:14px;min-width:0}
.ps-n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--acc);color:var(--on-acc);font-size:11px;font-weight:800;line-height:18px;text-align:center}
.ps-n:empty{display:none}
.ps-pane{min-width:0}

/* «Цифры»: the ladder, then position and money (side by side on a wide card) */
.ps-ladb{padding:14px 24px 8px}
.ps-p-nums .ps-kv{margin:0 24px;padding:14px 0 20px;border-top:1px solid var(--line);gap:9px 16px}
@container (min-width:600px){
  .ps-p-nums{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
  .ps-ladb{padding-bottom:20px}
  .ps-p-nums .ps-kv{margin:18px 0 20px;padding:0 24px;border-top:0;border-left:1px solid var(--line)}
}

/* ladder */
.ps-lad{position:relative;min-height:260px}
.ps-lsvg{position:absolute;left:96px;top:0;overflow:visible}
.ps-tr{stroke:var(--soft-2);stroke-width:2;stroke-linecap:round}
.ps-z.loss{fill:var(--dn-soft)}.ps-z.gain{fill:var(--up-soft)}
.ps-ld{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:2 3}
.ps-dt{stroke:var(--card);stroke-width:3;fill:var(--tx-3)}
.ps-dt.liq,.ps-dt.sl{fill:var(--dn)}.ps-dt.sl.ok{fill:var(--up)}.ps-dt.entry{fill:var(--link)}.ps-dt.tp{fill:var(--up)}
.ps-dt.mark{fill:var(--tx)}
.ps-mk{position:absolute;left:0;right:0;height:40px;display:grid;grid-template-columns:88px 48px minmax(0,1fr);align-items:center;pointer-events:none}
.ps-mkn{grid-column:1;color:var(--tx-3);font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-mkv{grid-column:3;display:grid;min-width:0;line-height:1.25}
.ps-mkv b{font-size:15px;font-weight:700;white-space:nowrap}
.ps-mkv small{color:var(--tx-3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-mk.liq b,.ps-mk.sl b{color:var(--dn)}.ps-mk.sl.ok b{color:var(--up)}.ps-mk.entry b{color:var(--link)}.ps-mk.tp b{color:var(--up)}
.ps-mk.mark .ps-mkn{color:var(--tx);font-weight:700}
.ps-mk.mark b{font-size:17px}
.ps-liqn{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 14px;border-radius:14px;background:var(--soft);font-size:13px;color:var(--tx-3)}
.ps-liqn b{font-size:14px}

/* «Рынок»: timeframes (↻ in the table's corner), funding and open interest */
.ps-tfb{padding-top:6px}
.ps-tfb .grid.cb{padding:6px 24px 12px}
.ps-tfb .empty{padding:22px 24px}
.ps-tf th{padding-top:4px;vertical-align:middle}
.ps-tf td{padding-top:10px;padding-bottom:10px}
.ps-tf th,.ps-tf td{padding-left:8px;padding-right:8px}
.ps-tf th.ps-rf{padding-top:0;padding-bottom:0}
.ps-rf .icon-btn{margin-left:-8px;color:var(--tx-3)}
.ps-rf .icon-btn .ic{transition:transform .6s}
.ps-rf .ps-spin .ic{transform:rotate(360deg)}
.ps-tf tr.ps-against td{background:var(--warn-soft)}
.ps-tf tr.ps-against td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.ps-fund{border-top:1px solid var(--line);margin-top:6px;padding-top:16px}
.ps-fund>span{white-space:nowrap}
.ps-fund b small{font-weight:600;margin-left:4px}
.ps-skl{display:inline-block;width:72px;height:14px;vertical-align:middle}

/* «Монета»: coin.js card without its own head */
.ps-coin.ci-card{padding:16px 24px 24px;gap:18px}
.ps-coin.ci-card .ci-sec>h4{font-size:16px}

/* «Заявки» */
.ps-ordb .tr-olist{padding:4px 0 10px}
.ps-ordb .empty{padding:26px 24px 30px}
.ps-ordb .empty>.ic{display:none}
.ps-ordb .empty b{font-size:14px;font-weight:500;color:var(--tx-3)}

/* ---------- empty / closed ---------- */
.ps-gone .empty{padding:56px 24px}
.ps-gone-a{justify-content:center;margin-top:6px}
.ps-gone-a .btn{margin-top:0}
.ps-cf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ps-cf b{font-size:16px}
.ps-cfkv{padding:4px 0 0}

/* ---------- responsive ---------- */
@media (max-width:1280px){.ps{grid-template-columns:minmax(0,1fr) 340px}}
@media (max-width:1000px){
  .ps{grid-template-columns:minmax(0,1fr);gap:16px}
  .ps-l,.ps-r,.ps-hc{display:contents}
  .ps-head{order:1;border-radius:var(--r-card)}
  .ps-acts{order:2}
  .ps-chartc{order:3;border-radius:var(--r-card);border-top:0}
  .ps .ps-ai{order:4}.ps-more{order:5}
}
@media (max-width:760px){
  .ps{gap:12px}
  .ps-head,.ps-chartc{border-radius:20px}
  .ps-top{padding:16px 18px 14px;gap:12px}
  .ps-top .coin.lg{width:44px;height:44px}
  .ps-id{flex-basis:calc(100% - 60px)}
  .ps-id h2{font-size:22px}
  .ps-pnl{margin-left:0;text-align:left;flex-basis:100%;padding-top:0}
  .ps-pnl b{font-size:34px}
  .ps-ag{gap:6px;padding:10px}
  .ps-ab{min-height:66px;padding:8px 4px;gap:5px;font-size:12px;border-radius:14px}
  .ps-fund small,.ps-kv small{font-size:12px}
  .pg-position .btn.sm{height:40px}
  .ps-chip{min-height:40px}
  .ps-tools{padding:8px 6px 4px 8px;gap:2px;flex-wrap:wrap}
  .ps-tools .vc-tf{flex:1 1 100%;justify-content:space-between}
  .ps-tools .vc-tf button{padding:0 4px;height:40px;flex:1 1 0;min-width:36px}
  .ps-tools .ps-tbt{min-width:40px;height:40px}
  .ps-rf .icon-btn{width:40px;height:40px}
  .ps-tb .icon-btn{width:40px;height:40px}
  .ps-chart{height:clamp(300px,52vh,440px);margin:0 4px 4px;border-radius:14px}
  .ps-tabs{padding:10px 10px 2px}
  .ps-ladb{padding:12px 18px 6px}
  .ps-p-nums .ps-kv{margin:0 18px;padding:12px 0 16px}
  .ps-lsvg{left:84px}
  .ps-mk{grid-template-columns:78px 46px minmax(0,1fr)}
  .ps-tfb .grid.cb{padding:6px 18px 12px}
  .ps-tf th:first-child,.ps-tf td:first-child{padding-left:18px}
  .ps-tf th:last-child,.ps-tf td:last-child{padding-right:18px}
  .ps-coin.ci-card{padding:14px 18px 20px}
  .ps-ordb .empty{padding:22px 18px 26px}
}

/* horizontal scroll rows fade at the edge that has more content (CSS scroll-driven; no fade when nothing overflows) */
@property --psfl{syntax:'<length>';inherits:false;initial-value:0px}
@property --psfr{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes ps-hfade{from{--psfl:0px;--psfr:32px}to{--psfl:32px;--psfr:0px}}
@supports (animation-timeline:scroll()){
  .ps-chips{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--psfl),#000 calc(100% - var(--psfr)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--psfl),#000 calc(100% - var(--psfr)),transparent);
    animation:ps-hfade linear both;animation-timeline:scroll(self inline)}
}

/* ---------- tablets and touch ---------- */
@media (min-width:761px) and (pointer:coarse){
  .ps-chip{min-height:40px}
  .ps-tools .ps-tbt{min-width:40px;height:40px}
  .ps-rf .icon-btn,.ps-tb .icon-btn{width:40px;height:40px}
}
/* a narrow chart card on tablets: the timeframes get their own row (touch buttons are 40 px) */
@media (min-width:761px){
  @container (max-width:640px){
    .ps-tools{flex-wrap:wrap;row-gap:2px}
    .ps-tools .vc-tf{flex:1 1 100%;justify-content:space-between}
  }
}
@media (min-width:761px) and (pointer:coarse){
  @container (max-width:740px){
    .ps-tools{flex-wrap:wrap;row-gap:2px}
    .ps-tools .vc-tf{flex:1 1 100%;justify-content:space-between}
  }
}