/* TRADE A SPARE — the sheet (site/trade.js) on the stage's own .ov shell, in the profile's
   skin: white tiles with the key outline and the hard drop, the pink accent, Barlow
   Condensed italic (profile.css). Desktop: YOU GIVE | the middle | YOU GET. Under 1024 the
   three stack and the sheet is the full-screen card like every other. */
.ov--trade .ov__panel{width:min(1080px,100%)}
html[data-layout="stage"] .ov--trade .ov__body{-webkit-mask-image:none;mask-image:none;padding-top:6px;padding-bottom:26px}
html[data-layout="stage"] .ov--trade .ov__head{padding-bottom:0}
.ov--trade .ov__sub{margin-top:4px}
.ov--trade .ov__h b{color:var(--acc);font-weight:inherit}
.ov--trade[data-busy="1"] .tr{opacity:.6;pointer-events:none}
.tr{font-family:var(--ui);color:var(--key)}
.tr-wait{margin:20px 0;font:700 15px var(--ui);color:#3A4354}
.tr-nav{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 12px 0 6px;margin:0 0 8px;background:#fff;border:2.5px solid var(--key);border-radius:10px;box-shadow:0 3px 0 var(--key);color:var(--key);font:900 14px var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.tr-nav svg{width:18px;height:18px}
.tr-nav:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key)}

/* the grids */
.tr-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr);gap:18px;align-items:start;margin-top:6px}
.tr-col h3,.tr-list h3{margin:0;font:900 22px/1 var(--display);font-style:italic;text-transform:uppercase;color:var(--key);letter-spacing:.02em}
.tr-col h3 b,.tr-list h3 b{color:var(--acc);font-weight:inherit}
.tr-col__hint{margin:4px 0 10px;font:700 12.5px/1.35 var(--ui);color:#3A4354;min-height:2.7em}
.tr-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.tr-mon{position:relative;background:rgba(255,255,255,.92);border:2px solid var(--key);border-radius:12px;box-shadow:0 3px 0 var(--key);padding:6px 6px 7px;text-align:center;font:inherit;color:inherit;cursor:pointer;transition:transform .12s}
.tr-mon:hover{transform:translateY(-2px)}
.tr-mon:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key)}
.tr-mon img{width:100%;aspect-ratio:1;object-fit:contain;display:block}
.tr-mon__no{display:block;font:800 10px var(--ui);letter-spacing:.1em;color:#3A4354}
.tr-mon__nm{display:block;font:900 14px var(--display);font-style:italic;color:var(--key);text-transform:uppercase;min-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the count pill, the Pokédex page's (dex.css .cell__x) */
.tr-mon__x{position:absolute;right:5px;bottom:34px;min-width:24px;height:20px;padding:0 6px;border-radius:999px;background:var(--key);color:#fff;border:2px solid #fff;font:900 12px/16px var(--display);font-style:italic;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 2px 0 rgba(11,15,24,.35)}
/* lit: a species the other side is missing (gold ring, the Pokédex's legendary treatment) */
.tr-mon--need{box-shadow:0 3px 0 var(--key),0 0 0 3px rgba(253,193,7,.55);background:#fff}
.tr-mon__tag{position:absolute;left:50%;top:-9px;transform:translateX(-50%);padding:1px 7px;border-radius:999px;background:var(--yellow,#FDC107);border:2px solid var(--key);font:900 9px var(--display);font-style:italic;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--key)}
.tr-mon--dim{opacity:.55}
.tr-mon--dim:hover{opacity:.85}
.tr-mon[aria-pressed="true"]{background:var(--acc);color:#fff;box-shadow:0 3px 0 var(--key),0 0 0 3px rgba(216,73,141,.35);opacity:1}
.tr-mon[aria-pressed="true"] .tr-mon__no,.tr-mon[aria-pressed="true"] .tr-mon__nm{color:#fff}
.tr-mon[aria-pressed="true"] .tr-mon__x{background:#fff;color:var(--key);border-color:var(--key)}
.tr-mon:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

/* the middle: the person, the sentence, the button */
.tr-mid{display:flex;flex-direction:column;gap:12px;align-items:stretch;padding:14px;background:rgba(255,255,255,.9);border:2px solid var(--key);border-radius:14px;box-shadow:0 3px 0 var(--key);position:sticky;top:0}
.tr-sum p{margin:12px 0 0;font:800 17px/1.25 var(--ui);color:var(--key);text-align:center;min-height:2.5em}
.tr-sum p b{color:var(--acc)}
.tr-who{display:flex;align-items:center;gap:10px;min-width:0}
.tr-who b{display:block;font:800 15px var(--ui);color:var(--key);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-who small{display:block;font:700 12px var(--ui);color:#3A4354}
/* THE OFFERER'S LINE (Luke, 10 Sep): his rank wears its ladder badge and his
   clan wears its own, so the row reads "@kantokid / [gold] Gold · [FOMO badge]
   FOMO · offered you a trade" — no square brackets typed anywhere. The pieces
   are separated by a drawn dot rather than a middle-dot character, because a
   glyph between two 16px images sits at the wrong height and CLAUDE.md keeps
   typed marks out of the product. 12px is the phone floor (FE-A2, round 2), so
   the badge is sized to the line rather than the line to the badge. */
/* `.tr-who small` above is display:block and outranks a lone class, so the row
   is written as small.tr-who__meta — without it the pieces flowed inline, the
   flex gap never applied and the clan chip sat hard against "Gold" (measured
   off the shot, 10 Sep). */
.tr-who small.tr-who__meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;line-height:1.35;min-height:20px}
.tr-who__rank{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.tr-who__rank img{width:18px;height:18px;object-fit:contain;flex:0 0 auto}
.tr-who__dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.45;flex:0 0 auto}
/* CLAN.badge() writes --cl-h inline and derives its font from it (clan.css:77:
   calc(--cl-h * .58)), so ONLY the call site can keep the tag off Luke's 12px
   floor — the same trap FE-A2 hit in the friends list and every bell row
   (LEAD-DECISIONS-R2 §28). 20px is asked for in trade.js and the size is
   pinned again here so a future default cannot drift it, with the font set
   outright rather than left to the ratio. The drop shadow comes off: it reads
   as a button on a plate, and inline in a 12px line it is just noise. */
.tr-who__meta .cl-chip{--cl-h:20px;font-size:12px;box-shadow:none}
.tr-av{width:40px;height:40px;border-radius:50%;border:2px solid var(--key);object-fit:cover;flex:0 0 auto;display:grid;place-items:center;color:#fff;font:900 17px var(--display);font-style:italic;background:#3FA9F5}
.tr-offerbtn,.tr-offer__acts .pf-btn,.tr-confirm .pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--key)}
.tr-offerbtn svg,.tr-door svg{width:18px;height:18px}
.tr-offerbtn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:0 3px 0 var(--key)}
.tr-msg{margin:0;font:700 13px/1.35 var(--ui);color:#3A4354;text-align:center;min-height:1.3em}
.tr-msg[data-bad="1"]{color:#B23A3A}

/* an offer: who, the two species, the actions */
.tr-list{margin-top:14px}
.tr-list h3{margin-bottom:8px}
.tr-pending{margin:4px 0 16px}
.tr-offer{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 18px;align-items:center;padding:12px 14px;margin-bottom:10px;background:rgba(255,255,255,.92);border:2px solid var(--key);border-radius:14px;box-shadow:0 3px 0 var(--key)}
.tr-offer__pair{display:flex;align-items:center;gap:10px}
.tr-offer__swap{width:34px;height:34px;border-radius:50%;background:var(--key);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.tr-offer__swap svg{width:18px;height:18px}
.tr-big{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left}
.tr-big img{grid-row:1 / span 3;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(11,15,24,.3))}
.tr-big__k{font:800 10px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:#3A4354}
.tr-big b{font:900 18px/1 var(--display);font-style:italic;text-transform:uppercase;color:var(--key)}
.tr-big small{font:700 11px var(--ui);color:#3A4354}
.tr-offer__acts{display:flex;gap:8px}
.tr-offer__acts .pf-btn{flex:0 0 auto;padding:10px 16px;font-size:15px}
.tr-note{grid-column:1 / -1;margin:0;font:700 12px var(--ui);color:#3A4354}
.tr-confirm{grid-column:1 / -1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:2px solid var(--key);border-radius:12px;background:var(--yellow,#FFFE9A)}
.tr-confirm[hidden]{display:none}
.tr-confirm p{margin:0;flex:1 1 240px;font:700 14px/1.3 var(--ui);color:var(--key)}
.tr-confirm p b{color:var(--acc)}
.tr-confirm .pf-btn{flex:0 0 auto;padding:9px 16px;font-size:15px}
.tr-offer[data-confirming="1"] .tr-offer__acts{visibility:hidden}

/* ONE OPEN TRADE PER PAIR (Luke, 10 Sep 04:20): the standing offer, said plainly, above its row */
.tr-open{margin:6px 0 10px}
.tr-open h3{margin:0;font:900 26px/1.1 var(--display);font-style:italic;text-transform:uppercase;color:var(--key);letter-spacing:.02em}
.tr-open h3 b{color:var(--acc);font-weight:inherit}
.tr-open p{margin:6px 0 0;font:700 14px/1.35 var(--ui);color:#3A4354;max-width:60ch}
.tr-pending .tr-offer{margin-bottom:0}

/* cannot trade: the server's sentence, the badge when it is the rank */
.tr-no{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 18px;margin-top:8px;text-align:center;background:rgba(255,255,255,.9);border:2px solid var(--key);border-radius:14px;box-shadow:0 3px 0 var(--key)}
.tr-no__badge{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(11,15,24,.3))}
.tr-no__mark{width:56px;height:56px;border-radius:50%;background:var(--key);color:#fff;display:grid;place-items:center}
.tr-no__mark svg{width:28px;height:28px}
.tr-no h3{margin:6px 0 0;font:900 26px/1.1 var(--display);font-style:italic;text-transform:uppercase;color:var(--key);max-width:28ch}
.tr-no p{margin:0;font:700 14px/1.35 var(--ui);color:#3A4354;max-width:44ch}
.tr-no p b{color:var(--acc)}
.tr-no--quiet{padding:22px 18px}

/* the door on a profile: TRADE, or TRADE PENDING (yellow, the profile's own is-on colour) while an offer stands */
.tr-door{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.tr-door[data-pending="1"]{background:var(--yellow,#FDC107);color:var(--key)}

/* THE COUNT ON THE PROFILE'S POKÉDEX TILES (profile.js mon(), REQUESTS.md): the same ink pill
   as the Pokédex page's, on the art's bottom-right corner, from the second catch on. */
.pf-mon{position:relative}
.pf-mon__x{position:absolute;right:5px;bottom:34px;min-width:24px;height:20px;padding:0 6px;border-radius:999px;background:var(--key);color:#fff;border:2px solid #fff;font:900 12px/16px var(--display);font-style:italic;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 2px 0 rgba(11,15,24,.35)}

@media (max-width:1023px){
  .tr-grid{grid-template-columns:1fr;gap:14px}
  .tr-mid{position:static;order:2}
  .tr-col--give{order:1}
  .tr-col--get{order:3}
  .tr-cells{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
  .tr-mon__x{bottom:30px;right:4px}
  .tr-offer{grid-template-columns:1fr;gap:10px}
  .tr-offer__pair{justify-content:space-between}
  .tr-offer__acts .pf-btn{flex:1}
  .tr-no h3{font-size:22px}
  .tr-open h3{font-size:22px}
  .pf-mon__x{bottom:36px}
}

/* THE PHONE (Luke, §3.22): nothing under 12px. The desktop keeps its fine print; on a phone the
   four small labels come up to the floor, and the species cells grow so the "they need this" pill
   still fits inside its own cell at 12px. */
@media (max-width:560px){
  .tr-cells{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .tr-mon__no{font-size:12px;letter-spacing:.06em}
  .tr-mon__tag{font-size:12px;letter-spacing:.03em;padding:1px 8px;top:-11px}
  .tr-big__k{font-size:12px;letter-spacing:.06em}
  .tr-big small{font-size:12px}
  .tr-col__hint{font-size:12.5px}
}