/* ================= the trade table =================
   Cards come out of a real binder (the Binder page's own pockets and rings), so
   this file only styles what's new: the two trays, the balance between them, and
   what a pocket looks like once it's on the table. */
.tpanel{background:linear-gradient(180deg,#141931,#0d1225);overflow:hidden;max-height:93vh;max-height:93dvh}

/* Responding puts two tables, a balance and two buttons above the binder. Every
   one of them shrinks a little so the cards you're choosing from stay readable. */
.tpanel.respond .tmat{padding:7px 10px 6px}
.tpanel.respond .tmat-who{font-size:13px}
.tpanel.respond .tmat-v{font-size:19px}
.tpanel.respond .thand{min-height:76px;padding:6px 1px 1px}
.tpanel.respond .thc,.tpanel.respond .tnext{width:52px}
.tpanel.respond .tmat-ball{width:92px;height:92px;bottom:-28px}
.tpanel.respond .tmat.loaded .tmat-hint{display:none}   /* the cards say it already */
.tpanel.respond .tmat-hint{padding:3px 0 0}
.tpanel.respond .tdeal{padding:8px 13px 0}
.tpanel.respond .tdeal.one+.tdeal.one{padding-top:7px}
.tpanel.respond .tmid{padding-top:4px}
.tpanel.respond .tverdict{padding-bottom:5px}
.tpanel.respond .trow2{margin-top:6px}

/* ---- a side of the table ----
   Felt with a Pokéball pressed into it, a name plate, and a fanned hand of
   cards. Nothing played means your deck sitting there face-down, not a row of
   empty boxes. */
.tdeal{padding:11px 13px 0;flex-shrink:0}
.tdeal.one+.tdeal.one{padding-top:9px}
.tmat{position:relative;border-radius:15px;padding:9px 12px 8px;overflow:hidden;
  background:
    radial-gradient(130% 100% at 50% -20%,rgba(255,255,255,.08),transparent 62%),
    linear-gradient(168deg,#1d2450,#161b3c 58%,#0e1230);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 16px 34px -20px #000;
  transition:box-shadow .35s}
.tmat.them{background:
    radial-gradient(130% 100% at 50% -20%,rgba(255,203,5,.16),transparent 64%),
    linear-gradient(168deg,#2c2413,#201b0f 56%,#151228)}
/* a Pokéball pressed into the felt */
.tmat-ball{position:absolute;right:-16px;bottom:-34px;width:118px;height:118px;border-radius:50%;
  pointer-events:none;opacity:.055;
  background:linear-gradient(180deg,#fff 0 46%,transparent 46% 54%,#fff 54% 100%);
  box-shadow:inset 0 0 0 7px #fff}
.tmat-ball::after{content:'';position:absolute;inset:0;margin:auto;width:30px;height:30px;
  border-radius:50%;box-shadow:inset 0 0 0 7px #fff}
.tmat.you.loaded{box-shadow:inset 0 0 0 1px rgba(99,167,255,.4),inset 0 16px 34px -20px #000,
  0 0 26px -16px rgba(99,167,255,1)}
.tmat.them.loaded{box-shadow:inset 0 0 0 1px rgba(255,203,5,.44),inset 0 16px 34px -20px #000,
  0 0 26px -16px rgba(255,203,5,1)}

/* name plate, like the header band on a card */
.tmat-plate{position:relative;z-index:2;display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;padding:0 1px 2px}
.tmat-who{font-family:'Bebas Neue';font-size:15px;letter-spacing:.15em;color:#9aa2d2}
.tmat.them .tmat-who{color:#e0c574}
.tmat-v{font-family:'Bebas Neue';font-size:24px;letter-spacing:.02em;color:#4e5583;
  font-variant-numeric:tabular-nums;transition:color .35s,text-shadow .35s}
.tmat.you.loaded .tmat-v{color:#8fc0ff;text-shadow:0 0 18px rgba(99,167,255,.6)}
.tmat.them.loaded .tmat-v{color:var(--gold);text-shadow:0 0 18px rgba(255,203,5,.55)}

/* ---- the row of played cards ----
   Fills left to right. The last item is a live landing spot, not a placeholder:
   it glows where the next card will go and doubles as the flight target. */
.thand{position:relative;z-index:2;display:flex;justify-content:flex-start;align-items:flex-end;
  gap:8px;min-height:106px;padding:8px 1px 2px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.thand::-webkit-scrollbar{display:none}
.thc{position:relative;width:70px;flex-shrink:0;aspect-ratio:63/88;border-radius:6px;overflow:hidden;
  box-shadow:0 9px 18px -8px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.55);
  animation:thcin .34s cubic-bezier(.2,1.4,.4,1) both;
  animation-delay:calc(var(--i,0)*.045s);transition:transform .18s,box-shadow .18s}
@keyframes thcin{from{opacity:0;transform:translateY(10px) scale(.86)}to{opacity:1;transform:none}}
.thc img{width:100%;height:100%;object-fit:cover;display:block}
.thc-v{position:absolute;left:0;right:0;bottom:0;padding:10px 2px 3px;text-align:center;
  font-family:'Bebas Neue';font-size:12px;color:#fff;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,transparent,rgba(6,8,20,.95))}
.thc.pullable{cursor:pointer}
.thc-pull{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(8,6,20,.66);color:#fff;opacity:0;transition:opacity .16s}
.thc-pull svg{width:20px;height:20px}
.thc.pullable:hover{transform:translateY(-5px);box-shadow:0 14px 24px -8px rgba(0,0,0,.95)}
.thc.pullable:hover .thc-pull{opacity:1}
.thc.pullable:active{transform:scale(.94)}
.thc.pulling{animation:thcout .2s ease forwards}
@keyframes thcout{to{opacity:0;transform:translateY(-14px) scale(.8)}}
.thc.landed{animation:tland .38s cubic-bezier(.2,1.8,.35,1)}
@keyframes tland{0%{transform:rotate(-10deg) translateY(-16px) scale(1.22)}
  55%{transform:rotate(2deg) translateY(4px) scale(.95)}
  100%{transform:none}}

/* where the next card lands — a breathing pool of light, no border, no dashes */
.tnext{position:relative;width:70px;flex-shrink:0;aspect-ratio:63/88;border-radius:6px;
  background:radial-gradient(ellipse at 50% 58%,rgba(255,255,255,.13),transparent 68%);
  animation:tbreathe 2.6s ease-in-out infinite}
.tmat.them .tnext{background:radial-gradient(ellipse at 50% 58%,rgba(255,203,5,.16),transparent 68%)}
.tnext::after{content:'';position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  width:26px;height:2px;border-radius:99px;background:rgba(255,255,255,.28);
  box-shadow:0 0 12px rgba(255,255,255,.45)}
.tmat.them .tnext::after{background:rgba(255,203,5,.42);box-shadow:0 0 12px rgba(255,203,5,.6)}
@keyframes tbreathe{0%,100%{opacity:.5;transform:scale(.97)}50%{opacity:1;transform:scale(1)}}
.tnext.incoming{animation:tcatch .32s ease}
@keyframes tcatch{0%{opacity:.5}60%{opacity:1;transform:scale(1.1)}100%{opacity:.5;transform:scale(1)}}

.tmat-hint{position:relative;z-index:2;font-size:9.5px;letter-spacing:.06em;color:#5a6189;
  text-align:center;padding:5px 0 1px}
.tmat.loaded .tmat-hint{color:#767ea6}

/* the card in flight, binder pocket to hand */
.tfly{position:fixed;z-index:400;pointer-events:none;border-radius:6px;overflow:hidden;
  opacity:.55;box-shadow:0 18px 38px -10px rgba(0,0,0,.95);
  transition:transform .32s cubic-bezier(.35,.9,.28,1),opacity .32s ease}
.tfly img{width:100%;height:100%;object-fit:cover;display:block}

.tmid{display:flex;align-items:center;justify-content:center;gap:12px;padding:7px 13px 0}
.tconf{padding:12px 13px 0;display:flex;flex-direction:column;gap:9px;align-items:stretch}
.tconf .tscale{align-self:center}
.tcash{text-align:center;font-size:11px;font-weight:600;padding:8px;border-radius:10px}
.tcash b{font-family:'Bebas Neue';font-size:17px;letter-spacing:.02em;margin-left:4px}
.tcash.out{color:#ffb4a0;background:rgba(227,53,13,.1)}
.tcash.in{color:#5fe39a;background:rgba(31,160,83,.1)}

.trow2{display:flex;align-items:center;gap:9px;justify-content:center;
  margin:8px 13px calc(10px + env(safe-area-inset-bottom));flex-shrink:0}
.tdecline{padding:12px 16px;border-radius:13px;cursor:pointer;flex-shrink:0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#98a0cd;
  font-family:'Outfit';font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  transition:.15s}
.tdecline:hover{background:rgba(227,53,13,.14);border-color:rgba(227,53,13,.4);color:#ffb4a0}
.tdecline:active{transform:scale(.95)}
.trow2 .tsend{margin:0!important}

/* ---- the balance ---- */
.tscale{position:relative;width:56px;height:58px;flex-shrink:0}
.tbeam{position:absolute;top:14px;left:2px;right:2px;height:3px;border-radius:99px;
  background:linear-gradient(90deg,#59629b,#98a1d6,#59629b);
  transform:rotate(var(--tilt,0deg));transform-origin:50% 50%;
  transition:transform .6s cubic-bezier(.28,1.6,.4,1)}
.tpan{position:absolute;top:2px;width:15px;height:14px;border-radius:0 0 99px 99px;
  border:2px solid #98a1d6;border-top:none;background:rgba(152,161,214,.12);transition:.3s}
.tpan.l{left:-3px}.tpan.r{right:-3px}
.tstand{position:absolute;left:50%;top:10px;width:3px;height:30px;margin-left:-1.5px;border-radius:2px;
  background:linear-gradient(180deg,#98a1d6,#39406e)}
.tstand::after{content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);
  width:24px;height:4px;border-radius:99px;background:#39406e}
.tscale.level .tbeam{background:linear-gradient(90deg,#1fa053,#5fe39a,#1fa053);
  box-shadow:0 0 14px rgba(31,160,83,.55);animation:tsettle .55s cubic-bezier(.3,1.6,.4,1)}
.tscale.level .tpan{border-color:#5fe39a;background:rgba(95,227,154,.16)}
@keyframes tsettle{0%{transform:rotate(-6deg)}55%{transform:rotate(3.5deg)}100%{transform:rotate(0)}}

.tverdict{text-align:center;font-size:11px;color:#767ea6;font-weight:600;padding:2px 14px 8px;flex-shrink:0}
.tverdict b{color:#fff;font-weight:800}
.tverdict.ok{color:#5fe39a}
.tverdict.ok b{color:#5fe39a}
.tverdict.bad,.tverdict.bad b{color:#ff7a5c}

/* ---- browsing a binder ---- */
.tbrowse{flex:1;min-height:0;overflow-y:auto;padding:0 13px;-webkit-overflow-scrolling:touch}
/* ---- the filter bar ----
   A GRID, not wrapped flex, and the price window is why. Under `flex-wrap` the
   number of controls per row is whatever the widths happen to allow, and the
   last item on a short row stretches to fill it — so on a phone the price pill
   wrapped onto a line of its own and grew to the full width of the modal, a
   300px control holding two three-character numbers.

   Wrapping was fine while every control was interchangeable. It stopped being
   fine the moment one of them wanted a different width from the rest, because
   flex-wrap gives you no way to say WHICH row something belongs on. A grid
   does, and it is the same on every screen:

       [ sort ][ set ][ origin ]      three equal thirds
       [ search ][ price  range ]     one third, then two

   The pill is capped as well as placed. Two thirds of a 520px panel is 320px,
   which is the same silliness one breakpoint further up. */
.tbtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;gap:6px;padding:0 2px 9px;
  position:sticky;top:0;z-index:4;background:linear-gradient(180deg,#141931 72%,transparent)}
/* the binder's own controls, shrunk to modal scale — same look, less room.
   `flex` is meaningless on a grid item; the columns do the sizing now. */
.tbtabs .tsel{flex:none;min-width:0}
.tbtabs .tsel>select{font-size:10.5px;font-weight:700;padding:7px 22px 7px 9px;border-radius:9px}
.tbtabs .tsel::after{right:9px;width:5px;height:5px;border-width:1.6px}
.tsearch{flex:none;min-width:0;width:auto;padding:6px 10px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#fff;
  font-family:'Outfit';font-size:11.5px;font-weight:600;outline:none;transition:.15s}
.tsearch::placeholder{color:#5d648c}
.tsearch:focus{border-color:rgba(255,203,5,.5)}

/* ---- the price window ----
   Built to look like ONE control rather than two fields that happen to be next
   to each other: a single bordered pill with the $ printed once at the front
   and an en dash between. Two separate boxes would read as two filters and sit
   at two different widths as the numbers change.

   It occupies the last two columns of the bar's second row and is capped, so it
   is roughly twice a select and never the width of the modal — see the note on
   .tbtabs for why this is placed rather than left to wrap. */
.tprange{display:flex;align-items:center;gap:1px;min-width:0;
  grid-column:span 2;max-width:236px;
  padding:5px 4px 5px 8px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  transition:border-color .15s,background .15s}
.tprange:focus-within{border-color:rgba(255,203,5,.5)}
/* an active filter has to be visible from across the screen — it is the reason
   the grid is showing forty cards instead of three thousand */
.tprange.on{background:rgba(255,203,5,.10);border-color:rgba(255,203,5,.45)}
.tpr-cur,.tpr-dash{flex:none;font-size:11px;font-weight:700;color:#5d648c;line-height:1}
.tprange.on .tpr-cur,.tprange.on .tpr-dash{color:#ffcb05}
.tpr-dash{padding:0 1px}
.tpr-in{flex:1 1 0;min-width:0;width:100%;padding:1px 2px;border:0;background:none;
  color:#fff;font-family:'Outfit';font-size:11.5px;font-weight:700;outline:none;
  text-align:center;-moz-appearance:textfield}
.tpr-in::-webkit-outer-spin-button,
.tpr-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tpr-in::placeholder{color:#5d648c;font-weight:600}
/* always in the markup, revealed by .on — see the note in tBarHTML: showing it
   must not require re-rendering the bar, because that takes the caret with it */
.tpr-x{display:none;flex:none;all:unset;cursor:pointer;
  width:15px;height:15px;border-radius:50%;
  line-height:15px;text-align:center;font-size:13px;color:#241a02;
  background:#ffcb05}
.tprange.on .tpr-x{display:block}
.tpr-x:hover{background:#ffe066}
.tpr-x:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* nothing matched — rendered INSIDE the page, so a keystroke can repaint it */
.tnomatch{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:11px;text-align:center;min-height:150px;padding:20px 12px}
.tnomatch span{font-size:12.5px;font-weight:600;color:#8b93d8;line-height:1.4}
.tempty-x{all:unset;cursor:pointer;padding:7px 15px;border-radius:999px;
  font-size:11.5px;font-weight:800;color:#0a0c1c;
  background:linear-gradient(180deg,#ffd84d,#e0a800);
  box-shadow:0 3px 12px rgba(255,203,5,.3)}
.tempty-x:hover{filter:brightness(1.08)}
.tempty-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tbinder{margin:0 auto}
.tbrowse .binder-scene{min-height:0}
.tbrowse .bindgrid{min-height:0;gap:8px}
.tbrowse .pagectl{padding:10px 0 14px}
.tload{display:flex;justify-content:center;padding:46px 0}
.tempty{text-align:center;font-size:11.5px;color:#5d648c;padding:44px 0}

/* page turn */
#tPage{transition:transform .17s ease,opacity .17s ease}
#tPage.flipR{transform:rotateY(-13deg) translateX(-5%);opacity:.35}
#tPage.flipL{transform:rotateY(13deg) translateX(5%);opacity:.35}

/* ---- a pocket you can put on the table ---- */
.tpocket{cursor:pointer}
.tprice{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:8px 3px 3px;
  font-family:'Bebas Neue';font-size:12px;letter-spacing:.02em;color:#fff;text-align:center;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,transparent,rgba(6,8,20,.9))}
.tslabtag{position:absolute;left:3px;top:3px;z-index:5;font-size:6.5px;font-weight:800;
  letter-spacing:.1em;padding:1px 4px;border-radius:3px;background:rgba(12,10,30,.85);color:#c9b8ff}
.tpocket.isslab{box-shadow:inset 0 0 0 1px rgba(155,140,255,.35),inset 0 2px 9px rgba(0,0,0,.55)}
.tcheck{position:absolute;right:4px;top:4px;z-index:6;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#3a2c00;
  background:linear-gradient(180deg,#ffe27a,var(--gold));
  transform:scale(0);transition:transform .22s cubic-bezier(.2,1.7,.4,1)}
.tcheck svg{width:11px;height:11px}
.tpocket.picked .tcheck{transform:scale(1)}
.tpocket.picked{outline:2.5px solid var(--gold);outline-offset:-2.5px;
  box-shadow:0 0 16px -3px rgba(255,203,5,.7),inset 0 2px 9px rgba(0,0,0,.5)}
.tpocket.picked img{filter:brightness(.72) saturate(.9)}
.tpocket.picked .tprice{color:var(--gold)}
.tpocket:active{transform:scale(.96)}

/* the action that moves a trade forward wears the same gold as the chip that
   brought you here, so the thread of "this is the trade" holds all the way through */
.tsend{margin:8px auto calc(10px + env(safe-area-inset-bottom))!important;align-self:center;
  background:linear-gradient(100deg,#ffd447,#e8a800 62%,#c98200);
  box-shadow:0 12px 26px -12px rgba(255,180,0,.95),inset 0 1px 0 rgba(255,255,255,.42)}
.tsend .pc-trade-ic{background:rgba(0,0,0,.2);color:#2c1c00}
.tsend .pc-trade-t{color:#2c1c00}
.tsend .pc-trade-s{color:rgba(44,28,0,.66)}
.tsend.locked{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.tsend.locked .pc-trade-ic{background:rgba(255,255,255,.06);color:#8087b0}
.tsend.locked .pc-trade-t{color:#aeb4dd}
.tsend.locked .pc-trade-s{color:#767ea6}

/* ---- trade chip, inline beside the username ---- */
/* The chip never shrinks, so with min-width:0 the username collapsed to nothing
   the moment the row got tight — which is exactly what the Binder button did.
   The name keeps a floor and the chip drops to its own line instead. */
.fnameline{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap;row-gap:4px}
.fnameline .fname{min-width:5.5em;flex:1 1 auto}
.ftrb{display:inline-flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0;max-width:100%;
  padding:2px 8px 2px 6px;border:none;border-radius:99px;cursor:pointer;
  background:linear-gradient(180deg,#ffd447,#e8a800);color:#2c1c00;
  font-family:'Outfit';font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 3px 9px -3px rgba(255,180,0,.9);
  animation:ftrbpulse 2.2s ease-in-out infinite;transition:filter .14s,transform .14s}
.ftrb svg{width:11px;height:11px;flex:none}
.ftrb-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* On a phone the name, this chip, the Binder button and the value cannot all
   share a row — the chip was overflowing its column and landing on top of
   Binder, which made that button impossible to hit. Below this it collapses to
   just the clock, which still opens the trade. */
@media(max-width:620px){
  .ftrb{padding:3px 6px;gap:0}
  .ftrb-t{display:none}
  .ftrb svg{width:12px;height:12px}
}
@keyframes ftrbpulse{0%,100%{box-shadow:0 3px 9px -3px rgba(255,180,0,.9)}
  50%{box-shadow:0 3px 14px -2px rgba(255,180,0,1)}}
.ftrb:hover{filter:brightness(1.08)}
.ftrb:active{transform:scale(.92)}
/* their move — present but quiet, so it reads as status not a call to action */
.ftrb.wait{background:rgba(255,255,255,.07);color:#8f97c2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);animation:none}
.ftrb.wait svg{opacity:.8;animation:ftrbtick 3s linear infinite}
@keyframes ftrbtick{0%,100%{opacity:.5}50%{opacity:.95}}
.ftrb.wait:hover{background:rgba(255,255,255,.12);color:#c3c9ea;filter:none}

/* ---- the offer you're waiting on ---- */
/* ---------- a trade you're waiting on ----------
   Not a dialog asking a question — you already answered it. It's the paper
   copy of the deal: both sides typed out, your signature on it, theirs still a
   blank rule, and a rubber stamp slammed across the lot. */
.tdk-wrap{width:100%;max-width:356px;display:flex;justify-content:center}
.tdk{position:relative;width:100%;padding:15px 17px 13px;border-radius:3px;
  color:#2c2820;font-family:'Outfit',sans-serif;
  background:
    repeating-linear-gradient(97deg,rgba(120,100,60,.05) 0 2px,transparent 2px 6px),
    linear-gradient(172deg,#f8f3e6,#ece4cf 60%,#e2d8bd);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(90,74,40,.25);
  animation:tdkin .42s cubic-bezier(.2,1.3,.35,1) both}
@keyframes tdkin{from{opacity:0;transform:rotate(-4.5deg) translateY(22px) scale(.93)}
  to{opacity:1;transform:rotate(-.7deg)}}
.tdk.voided{animation:tdkvoid .42s ease forwards}
@keyframes tdkvoid{to{opacity:0;transform:rotate(-5deg) translateY(30px) scale(.94)}}
/* pinned to the corner of the sheet, deliberately not part of the paper */
.tdk-x{position:absolute;top:-12px;right:-11px;z-index:6;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:#1a1f3c;border:1px solid #3b4272;color:#aeb4dd;transition:.15s}
.tdk-x svg{width:13px;height:13px}
.tdk-x:hover{background:#252b52;color:#fff;transform:rotate(90deg)}

/* everything administrative is typewritten */
.tdk-top,.tdk-no,.tdk-rl,.tdk-sgl,.tdk-exp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tdk-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-bottom:7px;border-bottom:2px solid rgba(90,74,40,.5)}
.tdk-brand{font-size:8.5px;font-weight:700;letter-spacing:.11em;color:#7d7053}
.tdk-no{font-size:9px;color:#9b8c68}
.tdk-party{display:flex;flex-wrap:wrap;gap:2px 16px;padding:8px 0 2px}
.tdk-party span{font-size:13.5px;font-weight:700;color:#241f16}
.tdk-party i{display:block;font-style:normal;font-family:ui-monospace,Menlo,monospace;
  font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:#9b8c68;font-weight:400}

.tdk-row{display:grid;grid-template-columns:1fr auto;align-items:flex-end;gap:3px 10px;
  padding:9px 0;border-bottom:1px dashed rgba(90,74,40,.32)}
.tdk-rl{grid-column:1/-1;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:#8a7c5c}
.tdk-items{display:flex;gap:5px;align-items:flex-end;min-height:44px}
/* little contact-print photos, laid down by hand so none of them sit straight */
.tdk-c{position:relative;width:31px;aspect-ratio:63/88;flex-shrink:0;background:#cdc4ab;
  border:2px solid #fdfaf0;border-radius:2px;overflow:hidden;transform:rotate(var(--r,0deg));
  box-shadow:0 3px 6px -2px rgba(60,48,20,.55)}
.tdk-c img{width:100%;height:100%;object-fit:cover;display:block}
.tdk-slab{position:absolute;top:0;right:0;width:11px;height:11px;font-style:normal;
  display:flex;align-items:center;justify-content:center;background:#2c2820;color:#f4edda;
  font-size:7px;font-weight:800;border-radius:0 0 0 3px}
.tdk-blank{font-size:11px;font-style:italic;color:#a2947a;padding-bottom:13px}
.tdk-tot{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.tdk-amt{font-family:'Bebas Neue';font-size:23px;letter-spacing:.02em;color:#241f16;
  font-variant-numeric:tabular-nums;line-height:1}
.tdk-sum{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:7.5px;letter-spacing:.02em;color:#9b8c68;white-space:nowrap}
/* a folded note, same height as the photos so it reads as another thing on the table */
.tdk-cash{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;height:44px;padding:0 7px;flex-shrink:0;border-radius:2px;
  transform:rotate(var(--r,0deg));background:linear-gradient(160deg,#dfe9d6,#c6d6b8);
  box-shadow:0 3px 6px -2px rgba(60,48,20,.55),inset 0 0 0 1px rgba(66,92,52,.45),
    inset 0 0 0 3px rgba(255,255,255,.35)}
.tdk-cash i{font-style:normal;font-family:ui-monospace,Menlo,monospace;
  font-size:6.5px;letter-spacing:.14em;text-transform:uppercase;color:#5a6f4c}
.tdk-cash b{font-family:'Bebas Neue';font-size:15px;line-height:1;color:#2f4423;letter-spacing:.02em}

.tdk-sigs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:12px 0 2px}
.tdk-sg{display:flex;flex-direction:column}
.tdk-sig,.tdk-rule{order:1;display:block;width:100%;height:26px;
  border-bottom:1px solid rgba(90,74,40,.55)}
.tdk-sig{color:#26418f;overflow:visible}
.tdk-sg.done .tdk-sig path{stroke-dasharray:260;stroke-dashoffset:260;
  animation:tdkink .85s .3s ease-out forwards}
@keyframes tdkink{to{stroke-dashoffset:0}}
.tdk-sgn{order:2;font-size:10.5px;font-weight:700;color:#37311f;margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tdk-sgl{order:3;font-size:8px;line-height:1.3;color:#9b8c68;margin-top:1px}

/* the stamp lands a beat after the paper does */
.tdk-stamp{position:absolute;right:-4px;top:-14px;z-index:3;pointer-events:none;
  padding:5px 11px 3px;border:2.5px double #b0392a;border-radius:5px;color:#b0392a;
  font-family:'Bebas Neue';font-size:17px;letter-spacing:.13em;line-height:1;white-space:nowrap;
  mix-blend-mode:multiply;animation:tdkstamp .42s .34s cubic-bezier(.2,1.7,.4,1) both}
@keyframes tdkstamp{from{opacity:0;transform:rotate(-11deg) scale(2.2)}
  to{opacity:.66;transform:rotate(-11deg) scale(1)}}
.tdk.voided .tdk-stamp{color:#7d7568;border-color:#7d7568}

.tdk-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:11px;padding-top:9px;border-top:2px solid rgba(90,74,40,.5)}
.tdk-exp{font-size:8.5px;letter-spacing:.06em;color:#9b8c68}
.tdk-kill{padding:7px 12px;border-radius:4px;cursor:pointer;flex-shrink:0;
  background:rgba(176,57,42,.07);border:1px solid rgba(176,57,42,.5);color:#9c3323;
  font-family:'Outfit';font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  transition:.15s}
.tdk-kill:hover{background:#b0392a;color:#fdf6e6;border-color:#b0392a}
.tdk-kill:active{transform:scale(.95)}
@media(max-width:360px){
  .tdk-stamp{font-size:14px;top:-11px}
  .tdk-c{width:27px}
}

/* ---- phones: one scrolling page, not a fitted panel ----
   The fitted layout keeps everything on screen at once, which only works when
   there's height to spare. On a phone it left a ~200px scroller in the middle of
   an otherwise frozen sheet, so dragging on your side of the table, the filters
   or the button did nothing at all. Here the whole panel scrolls like a normal
   page and the binder gets its natural height. */
.tpanel.scrolls{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.tpanel.scrolls .tbrowse{flex:0 0 auto;overflow:visible;min-height:0}
.tpanel.scrolls .tbtabs{position:sticky;top:0}   /* filters stay reachable while you scroll */
.tpanel.scrolls .tdeal,
.tpanel.scrolls .tverdict,
.tpanel.scrolls .trow2{flex-shrink:0}
/* stop a drag inside the card rail or the binder from scrolling the page behind */
.tbrowse,.thand{overscroll-behavior:contain}

/* ---- building both sides: which collection the picker is showing ---- */
.tsides{display:flex;gap:7px;padding:0 13px 9px}
.tside{
  flex:1;cursor:pointer;font-family:'Outfit';font-weight:700;font-size:12px;
  padding:9px 10px;border-radius:11px;transition:.15s;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:#9ba2ca;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tside i{
  font-style:normal;margin-left:6px;padding:1px 6px;border-radius:99px;font-size:10px;
  background:rgba(255,255,255,.1);color:#fff;
}
.tside:hover{color:#dfe3ff;border-color:#4a5290}
.tside.on{background:linear-gradient(180deg,#2f3568,#20244c);color:#fff;border-color:#5a62aa}
.tside.on i{background:var(--gold);color:#241c00}

/* ---- browsing a friend's collection ---- */
.bselrow{display:flex;justify-content:flex-end;margin:0 2px 10px}
.bpicked{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#1b2140,#12152a);border-top:1px solid #333963;
}
.bp-info{font-size:13px;font-weight:600;color:var(--dim);white-space:nowrap}
.bp-info b{color:#fff;font-weight:800}
.bpicked .btn{flex:none}

/* ---- one of their cards, up close ---- */
.tinodal{--rc:#8b93d8}
.ti-wrap{padding:26px 20px 20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.ti-slab{width:min(58vw,230px);perspective:900px;touch-action:none;cursor:grab;margin:14px 12px}
.ti-card{width:min(58vw,230px);aspect-ratio:63/88;perspective:900px;touch-action:none;
  cursor:grab;margin:14px 12px}
.ti-c3d{
  position:relative;width:100%;height:100%;border-radius:11px;overflow:hidden;
  transform-style:preserve-3d;transition:transform .16s ease;
  box-shadow:0 22px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.09);
  background:#0b0e1e;
}
.ti-c3d img{width:100%;height:100%;object-fit:cover;display:block}
.ti-meta{text-align:center}
.ti-name{font-size:16px;font-weight:800;color:#fff;letter-spacing:.01em}
.ti-name .ti-g{
  font-style:normal;margin-left:7px;padding:2px 7px;border-radius:6px;vertical-align:2px;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;
  background:rgba(255,203,5,.14);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,203,5,.4);
}
.ti-val{font-family:'Bebas Neue';font-size:30px;color:var(--gold);line-height:1;margin-top:6px}
.ti-set{font-size:11px;color:var(--dim2);font-weight:600;margin-top:5px}
.ti-acts{display:flex;flex-direction:column;gap:9px;width:min(80vw,280px)}
.ti-acts .btn{width:100%}