/* Pairs: long one stock, short another. Built from the shop's own pieces (cards, fields, the tape picker, facts, the
   risk card from bears.css); only what they lack is here. */

.p-side { display: grid; gap: 20px; }

/* Two stock pickers, each on its own little shelf inside the card, as on the Bear Coins form. */
.p-card .p-pick { margin-top: 2px; padding: 16px 8px 0; background: var(--carpet); border-radius: 8px 8px 0 0; }
.p-card .p-pick .pk { max-width: 64px; height: 112px; }
.p-card .p-pick .pk:nth-child(3n+2) { height: 106px; }
.p-card .p-pick .pk:nth-child(4n+3) { height: 116px; }
.p-card .p-pick .pk:nth-child(5n+4) { height: 110px; }
.p-card .p-pick .pk-label { height: 74px; }
.p-card .p-pick .pk-label b { font-size: 19px; }
.p-card .p-pick .pk-label small { display: none; }
.p-card .p-pick .pk-dot { font-size: 9px; min-width: 0; width: calc(100% + 6px); padding: 1px 0; }
.p-card .p-pick .pk[aria-checked="true"] { transform: translateY(-12px); }
.p-two { margin-top: 0; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.p-card .check { align-items: flex-start; }
.p-card .check input { flex: none; margin-top: 3px; }
.p-link {
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink); background: var(--sticker); border: 2px solid var(--ink);
  border-radius: 6px; padding: 0 7px; margin-left: 6px; cursor: pointer;
}
.p-link:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

/* Your pairs: one card per pair. */
.p-list { display: grid; gap: 12px; }
.p-row { padding: 12px 14px; border-radius: 8px; background: #fff; border: 2px solid #e3ddc9; }
.p-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.p-row-head b { font-size: 17px; }
.p-pnl { font-weight: 800; font-variant-numeric: tabular-nums; }
.p-pnl.up { color: #0f7a5c; }
.p-pnl.down { color: #c4245e; }
.p-row .facts li { padding: 6px 0; font-size: 14.5px; }
.p-row .btn { margin-top: 8px; }
.p-row .help:empty { display: none; }

@media (max-width: 720px) {
  .p-two { grid-template-columns: minmax(0, 1fr); }
}