/* Positions [04] card view (poscard.js): trading-card hand, one card per open position, scrolls sideways.
   Frame + hard offset shadow carry the side color (long --acc, short --bone). Click turns the card to its stats.
   Flip = stepped scaleX (no 3D, no blur). Phone layout lives in mobile.css. */

/* Tab strip switch: label + kit x-tg, sized to the 33px strip. */
.v2-acct-tabs .v2-pos-view {
  gap: 8px;
}
.v2-acct-tabs .v2-pos-view .x-tg {
  display: flex;
  flex: 0 0 auto;
  width: 40px;
  height: 20px;
  padding: 3px;
  border: 1px solid var(--line);
  background: var(--bg);
  box-sizing: border-box;
}
.v2-acct-tabs .v2-pos-view .x-tg i {
  width: 12px;
  height: 12px;
  background: var(--mute);
  transition:
    transform var(--t) var(--st-3),
    background var(--t) var(--st-3);
}
.v2-acct-tabs .v2-pos-view[aria-checked="true"] {
  color: var(--tx);
}
.v2-acct-tabs .v2-pos-view[aria-checked="true"] .x-tg {
  border-color: var(--acc);
}
.v2-acct-tabs .v2-pos-view[aria-checked="true"] .x-tg i {
  transform: translateX(20px);
  background: var(--acc);
}

/* The hand: one row of cards; leftover width is plain tile (large area, no hatch). */
.v2-pcards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 264px;
  align-items: start;
  gap: 12px;
  min-height: 100%;
  padding: 8px 12px 12px 8px;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
}
.v2-pcard {
  --c: var(--acc);
  position: relative;
  display: block;
  border: 1px solid var(--c);
  background: var(--tile);
  box-shadow: var(--v2-shadow-3) var(--c);
  cursor: var(--cur-pointer, pointer);
  outline: 0;
  transform-origin: 50% 50%;
}
.v2-pcard--sh {
  --c: var(--bone);
}
.v2-pcard:hover {
  background: var(--alt);
}
.v2-pcard:focus-visible {
  outline: 1px solid var(--tx);
  outline-offset: 2px;
}
.v2-pcard.on {
  box-shadow: var(--v2-shadow-3-flip) var(--c);
}
.v2-pcard-turn {
  animation: v2-pcard-turn var(--t) var(--st);
}
@keyframes v2-pcard-turn {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-pcard-turn {
    animation: none;
  }
  .v2-acct-tabs .v2-pos-view .x-tg i {
    transition: none;
  }
}
/* Both faces keep one height so the hand does not jump on a flip (back carries the TP/SL fields). */
.v2-pcard-face {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 176px;
}

/* Title bar: inverted block in the side color, leverage in a square "cost" corner. */
.v2-pcard-top {
  display: flex;
  align-items: stretch;
  height: 22px;
  background: var(--c);
  color: var(--ink);
  font-family: var(--pix);
  font-size: var(--fs-11);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: none;
  text-transform: uppercase;
}
.v2-pcard-top b {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 8px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-pcard-lev,
.v2-pcard-stats {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 33px;
  padding: 0 6px;
  background: var(--bg);
  color: var(--c);
  border-left: 1px solid var(--c);
}
/* Leverage corner is a button: opens the ticket's ADJUST LEVERAGE dialog for this coin. */
button.v2-pcard-lev {
  height: 100%;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--c);
  font: inherit;
  text-transform: inherit;
  cursor: var(--cur-pointer, pointer);
}
button.v2-pcard-lev:hover,
button.v2-pcard-lev:focus-visible {
  background: var(--tx);
  color: var(--ink);
  outline: 0;
}
.v2-pcard-back .v2-pcard-top {
  background: var(--bg);
  color: var(--c);
  border-bottom: 1px solid var(--c);
}
.v2-pcard-back .v2-pcard-stats {
  background: var(--c);
  color: var(--ink);
}

/* Art box: side tag + big PnL + ROE in one row on a small hatched panel. */
.v2-pcard-art {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 6px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  background: var(--hatch), var(--bg);
}
.v2-pcard-art .x-tag {
  min-height: 18px;
  padding: 0 6px;
}
.v2-pcard-art .x-tag.v2-side-lg {
  --c: var(--acc);
}
.v2-pcard-art .x-tag.v2-side-sh {
  --c: var(--bone);
}
.v2-pcard-pnl {
  padding: 0 4px;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--mono);
  font-size: var(--fs-16);
  font-weight: 700;
  font-variant-numeric: tabular-nums slashed-zero;
  line-height: 20px;
  -webkit-font-smoothing: none;
  white-space: nowrap;
}
.v2-pcard-roe {
  margin-left: auto;
  padding: 0 4px;
  background: var(--bg);
  color: var(--mute);
  font-family: var(--mono);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums slashed-zero;
}
.v2-pcard .v2-up {
  color: var(--ok);
}
.v2-pcard .v2-dn {
  color: var(--crit-tx);
}

/* Data cells: 3 columns, uppercase muted label over a tabular value. TP/SL takes a full row. */
.v2-pcard-kv {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 6px 6px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.v2-pcard-kv > div {
  display: grid;
  align-content: center;
  gap: 0;
  min-width: 0;
  padding: 2px 5px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.v2-pcard-kv > div.v2-pcard-wide {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.v2-pcard-kv dt {
  color: var(--mute);
  font-family: var(--mono);
  font-size: var(--fs-12);
  line-height: 13px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-pcard-kv dd {
  margin: 0;
  min-width: 0;
  color: var(--tx);
  font-family: var(--mono);
  font-size: var(--fs-12);
  line-height: 15px;
  font-variant-numeric: tabular-nums slashed-zero;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Back: inline TP / SL kit fields (k.field), stacked. */
.v2-pcard-tpsl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 6px 6px;
  cursor: var(--cur-default, default);
}
.v2-pcard-tpsl .v2-tpsl-f {
  min-width: 0;
}
.v2-pcard-tpsl form {
  display: block;
  width: 100%;
}
.v2-pcard-tpsl .v2-field {
  width: 100%;
  box-sizing: border-box;
  min-height: 28px;
  height: 28px;
  gap: 6px;
  padding: 0 8px;
}
.v2-pcard-tpsl .v2-field .v2-lbl {
  flex: 0 0 auto;
}
.v2-pcard-tpsl .v2-field input {
  height: 26px;
}
.v2-pcard-tpsl .v2-tpsl-f .v2-unit:empty {
  display: none;
}
.v2-pcard-tpsl .v2-tpsl-f .x-car {
  position: absolute;
  top: 6px;
  left: auto;
  right: 8px;
}
.v2-pcard-tpsl .v2-tpsl-f input:focus {
  padding-right: 8px;
}

/* Front is shorter than the back: the leftover band above the footer is hatched, not empty. */
.v2-pcard-gap {
  flex: 1 1 auto;
  margin: 0 6px 6px;
  background: var(--hatch);
}
/* Footer: actions left, share right, hatch in the gap between. */
.v2-pcard-foot {
  display: flex;
  align-items: stretch;
  height: 25px;
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.v2-pcard-foot .v2-btn {
  flex: 0 0 auto;
  height: 24px;
  min-height: 24px;
  min-width: 33px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid var(--line);
  box-shadow: none;
}
.v2-pcard-foot .x-fill {
  flex: 1 1 auto;
  min-width: 8px;
  background: var(--hatch);
}
.v2-pcard-foot .pshare {
  flex: 0 0 auto;
  width: 24px;
  border-left: 1px solid var(--line);
}