/* Sell (/sell) — Merchant's Corner: search window with Ren, price card (dark panel), try-a-price, competition,
   where the buyers are, recent sales. Builds on world.css tokens/components. */

/* ---------- search window ---------- */
.sl-find{margin-bottom:24px;z-index:30}
.sl-find .pad{display:flex;gap:18px;align-items:flex-end;padding:16px 22px 18px}
.ren{width:97px;height:auto;flex:none;margin-bottom:-6px;filter:drop-shadow(0 6px 4px rgba(40,30,20,.25));animation:renidle 2.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes renidle{50%{transform:scaleY(.975)}}
.find-main{flex:1;min-width:0;display:grid;gap:10px}
.say{position:relative;margin:0;justify-self:start;max-width:62ch;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:7px 12px 6px;font-size:14.5px;color:var(--ink-2);box-shadow:0 3px 0 rgba(36,32,46,.18)}
.say::before{content:"";position:absolute;left:-10px;bottom:10px;width:14px;height:14px;background:#fff;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) skew(10deg,10deg)}
.say b{font:800 14px var(--f-game);color:var(--maple);margin-right:4px}
.sl-box{position:relative}
.sl-box .field{padding-left:12px}
.sl-box .mag{width:20px;height:20px;flex:none;color:var(--ink-3)}
.sl-box .field input{font-size:18px}
.sl-sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:#191b31;margin:0;padding:6px;max-height:380px;overflow:auto;list-style:none}
.sl-sug li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border-radius:6px;cursor:pointer}
.sl-sug li img{width:28px;height:28px;object-fit:contain}
.sl-sug li span{white-space:normal;line-height:1.2;font-weight:700}
.sl-sug li span small{display:block;font-weight:400;font-size:12px;color:var(--tip-dim)}
.sl-sug li b{font:800 15px var(--f-game);color:var(--gold-ink)}
.sl-sug li[aria-selected=true],.sl-sug li:hover{background:rgba(143,163,220,.22)}
.sl-sug li.none{display:block;cursor:default;color:var(--tip-dim)}

/* ---------- body layout ---------- */
.sl-body{align-items:start}
.sl-pop{columns:2;column-gap:10px}
.sl-pop li{break-inside:avoid}
.sl-pop .pr small.u{color:var(--ink-3);font-weight:700}
.sl-pop li:nth-child(odd)>button{background:transparent}
.sl-pop li>button{background:rgba(200,183,143,.16)!important}
.sl-pop li>button:hover{background:#ffe9b8!important}

/* ---------- price card (dark panel) ---------- */
.sl-rec{position:sticky;top:16px;min-height:320px}
.sl-rec .hd{display:flex;gap:14px;align-items:center}
.sl-rec .hd .slot{width:64px;height:64px;background:radial-gradient(circle,#3b4675,#1c2240);border:1.5px solid var(--tip-line);border-radius:8px}
.sl-rec .hd img{width:44px;height:44px}
.sl-rec h2{margin:0;font:800 21px/1.1 var(--f-game);color:var(--gold-ink)}
.sl-rec .cat{font-size:12.5px;color:var(--tip-dim);margin-top:2px}
.live-row{margin:10px 0 0;font-size:12.5px}
.live-row .lv{display:inline-flex;align-items:center;gap:6px;background:rgba(125,255,122,.1);border:1px solid rgba(125,255,122,.35);color:#c9ffc8;border-radius:20px;padding:2px 10px;font-weight:700}
.live-row .lv i{width:7px;height:7px;border-radius:50%;background:#7dff7a;box-shadow:0 0 8px #7dff7a}
.live-row .off{color:#ffcf6b;font-weight:700}
.list-h{margin:14px 0 4px;font:800 13px var(--f-game);letter-spacing:.14em;text-transform:uppercase;color:var(--tip-dim)}
.rough{display:inline-block;font:800 12px var(--f-ui);color:#2a1d05;background:linear-gradient(#ffe08a,#f2b81c);border-radius:4px;padding:2px 7px;margin:0 0 6px;cursor:help}
.sl-rec .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px}
.sl-rec .price b{font:800 50px/1 var(--f-game);color:#fff;letter-spacing:-.02em;white-space:nowrap}
.sl-rec .price b .coin{width:.62em;height:.62em;vertical-align:.04em}
.sl-rec .price span{font:800 16px var(--f-ui);color:var(--tip-dim)}
.sl-rec .price.is-rough b{font-size:38px;opacity:.85}
.sl-rec .eta{margin-top:6px;font-size:14px;color:var(--tip-dim)}
.sl-rec .eta b{color:#fff;font:800 17px var(--f-game)}
.sl-rec .lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.sl-rec .lane{display:block;text-align:left;background:rgba(143,163,220,.12);border:1px solid rgba(143,163,220,.35);border-radius:6px;padding:7px 8px;color:inherit;cursor:pointer;min-width:0}
.sl-rec .lane:hover{background:rgba(143,163,220,.24)}
.sl-rec .lane span{display:block;font-size:11px;color:var(--tip-dim);text-transform:uppercase;letter-spacing:.06em;font-weight:700;white-space:nowrap}
.sl-rec .lane b{display:block;font:800 18px/1.15 var(--f-game);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-rec .lane small{display:block;font-size:12px;color:#c9d2f5}
.sl-rec .lane.pick{border-color:var(--gold-ink);background:rgba(255,211,107,.14)}
.sl-rec .lane.pick b{color:var(--gold-ink)}
.sl-rec .lane.on{box-shadow:0 0 0 2px var(--maple)}
.lanes-note{margin:4px 0 0}
.sl-rec .adv{margin:12px 0 6px;font-size:14px;color:#dfe5ff}
.sl-rec .adv b{color:#fff}
.sl-rec .fine b{color:#dfe5ff}
.sl-rec .acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.sl-rec.loading .skel{position:relative;overflow:hidden;height:58px;border-radius:6px;margin-top:16px;background:rgba(143,163,220,.1)}
.sl-rec.loading .skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(143,163,220,.22),transparent);transform:translateX(-100%);animation:shim 1.1s linear infinite}
.sl-rec .skel.s2{height:90px}
@keyframes shim{to{transform:translateX(100%)}}
.rec-empty h2{margin:0 0 6px}
.rec-empty p{margin:0 0 10px;color:#dfe5ff;font-size:14px}
.rec-empty .steps{margin:0 0 12px;padding:0;list-style:none;counter-reset:s;display:grid;gap:8px}
.rec-empty .steps li{counter-increment:s;display:block;position:relative;padding-left:34px;min-height:24px;font-size:14px;line-height:1.45;color:#dfe5ff}
.rec-empty .steps li::before{content:counter(s);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(#ffe08a,#f2b81c);color:#2a1d05;font:800 13px var(--f-game)}
.rec-empty .steps b{color:var(--gold-ink)}

/* ---------- try a price ---------- */
.try-row{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.try-in{display:grid;gap:3px}
.try-in>span:first-child{font:800 11.5px var(--f-game);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.try-in .field{width:210px}
.try-in .field input{font:800 19px var(--f-game);padding:5px 0 3px}
.try-in .field small{font-weight:700;color:var(--ink-3);padding-right:8px}
#sl-slider{width:100%;accent-color:var(--maple);height:28px;cursor:pointer}
.try-out{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:14px 0 4px;border:2px solid var(--ink);border-radius:10px;background:#fff;overflow:hidden}
.try-out>div{padding:8px 12px 7px;min-width:0}
.try-out>div+div{border-left:1.5px dashed var(--win-line)}
.try-out dt{font:800 11px var(--f-game);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.try-out dd{margin:0;font:800 19px/1.2 var(--f-game);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-h{margin:16px 0 8px;font:800 15px var(--f-game);color:var(--ink)}
.wait-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;height:170px;align-items:end}
.wait-bars button{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;border:0;background:transparent;padding:0;cursor:pointer;min-width:0}
.wait-bars i{display:block;width:100%;max-width:58px;height:var(--h);min-height:8px;border:2px solid var(--ink);border-bottom-width:3px;border-radius:7px 7px 3px 3px;background:linear-gradient(#cdd9f3,#8fa8d8);box-shadow:inset 0 3px 0 rgba(255,255,255,.55);transform-origin:50% 100%;animation:wbgrow var(--dur-slow) var(--ease-out) both}
.wait-bars button:nth-child(2) i{animation-delay:40ms}.wait-bars button:nth-child(3) i{animation-delay:80ms}.wait-bars button:nth-child(4) i{animation-delay:120ms}.wait-bars button:nth-child(5) i{animation-delay:160ms}.wait-bars button:nth-child(6) i{animation-delay:200ms}.wait-bars button:nth-child(n+7) i{animation-delay:240ms}
@keyframes wbgrow{from{transform:scaleY(0)}}
.wait-bars b{font:800 13px/1 var(--f-game);white-space:nowrap}
.wait-bars small{font:800 12px var(--f-ui);color:var(--ink-3)}
.wait-bars em{font:700 11.5px var(--f-ui);font-style:normal;color:var(--ink-3)}
.wait-bars button:hover i{background:linear-gradient(#ffe2b0,#ffb15c)}
.wait-bars button.on i{background:linear-gradient(#ffb15c,#e8641c);box-shadow:inset 0 3px 0 rgba(255,255,255,.45),0 0 0 3px rgba(232,100,28,.25)}
.wait-bars button.on small{color:var(--maple)}
#sl-wait-note{margin:8px 0 0}

/* ---------- competition ---------- */
#w-comp .tabs{margin-top:10px}
.book{list-style:none;margin:0;padding:8px 10px 4px;max-height:360px;overflow:auto}
.book li{display:grid;grid-template-columns:44px auto minmax(0,1fr);gap:4px 10px;align-items:baseline;padding:6px 8px;border-radius:6px}
.book li:nth-child(odd){background:rgba(200,183,143,.16)}
.book .rk{font:800 13px var(--f-game);color:var(--ink-3)}
.book b{font:800 17px var(--f-game);white-space:nowrap}
.book b small{font:700 11.5px var(--f-ui);color:var(--ink-3)}
.book li>small{font-size:12.5px;color:var(--ink-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book li>small em{color:var(--down);font-style:normal;font-weight:700}
.book li.you{background:#ffe0a3;box-shadow:inset 0 0 0 2px var(--maple)}
.book li.you .rk{color:var(--maple)}
.book li.none{display:block;color:var(--ink-3);text-align:center;padding:18px}
.book-note{margin:0;padding:4px 18px 14px}
.book-note:empty{display:none}

/* ---------- where the buyers are ---------- */
.npc-v>div{border-radius:8px;padding:8px 12px;margin-bottom:8px;font-size:14px;background:#eef2ff;border:1.5px solid #b9c8ee}
.npc-v .good{background:#e7f6e3;border-color:#9fd396}
.npc-v .warn{background:#fff1d6;border-color:#f0c470}
.rooms .mini-h{margin-top:6px}
.room{display:grid;grid-template-columns:72px 1fr 42px;gap:8px;align-items:center;font-size:13.5px;padding:2px 0}
.room span{font-weight:700}
.room i{height:12px;border-radius:6px;background:#eadfc4;border:1.5px solid var(--ink);overflow:hidden}
.room i b{display:block;height:100%;background:linear-gradient(#a9c3f0,#5f82bf)}
.room.top i b{background:linear-gradient(#ffd27a,#e8641c)}
.room em{font:800 14px var(--f-game);font-style:normal;text-align:right}
.rooms .fine{margin:4px 0 0}
.tips-l{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px;font-size:14px;color:var(--ink-2)}
.tips-l li{position:relative;padding-left:20px}
.tips-l li::before{content:"";position:absolute;left:2px;top:.45em;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#f2b81c 55%,#b8800c);border:1px solid #7a520a}
.tips-l a{color:var(--bar-2);font-weight:700}

/* ---------- recent sales ---------- */
.bar-sub{font:700 12.5px var(--f-ui);opacity:.85}
.chart-wrap{position:relative}
.sl-chart{display:block;width:100%;height:auto;overflow:visible}
.sl-chart .grid{stroke:#c8b78f;stroke-dasharray:3 6}
.sl-chart .ax{font:700 12px var(--f-ui);fill:var(--ink-3)}
.sl-chart .ax.u{font-size:11px}
.sl-chart .med{stroke:var(--maple);stroke-width:2;stroke-dasharray:7 5}
.sl-chart .ml{font:800 13px var(--f-game);fill:var(--maple)}
.sl-chart .pt{fill:#5f82bf;fill-opacity:.75;stroke:#24202e;stroke-width:1.4;cursor:pointer;transform-box:fill-box;transform-origin:center;animation:pop .4s calc(min(var(--i), 40) * 14ms) var(--ease-pop) both;outline:none}
.sl-chart .pt:hover,.sl-chart .pt:focus-visible{fill:var(--gold);fill-opacity:1;stroke-width:2.4}
@keyframes pop{from{transform:scale(0)}}
.sl-chart .ask{fill:var(--down);stroke:#24202e;stroke-width:1.2;cursor:pointer}
.sl-chart .nowl{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:2 4}
.ctip{position:absolute;z-index:5;transform:translate(-50%,-100%);pointer-events:none;white-space:nowrap;font-size:13px;padding:6px 10px}
.ctip b{font:800 15px var(--f-game);color:var(--gold-ink)}
.ctip small{color:var(--tip-dim)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink-3);margin-top:6px}
.legend i{display:inline-block;vertical-align:middle;margin-right:5px}
.legend i.d{width:10px;height:10px;border-radius:50%;background:#5f82bf;border:1.4px solid var(--ink)}
.legend i.m{width:16px;height:0;border-top:2px dashed var(--maple)}
.legend i.a{width:0;height:0;border:5px solid transparent;border-right:9px solid var(--down);border-left:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 0}
.stats>div{background:#fff;border:1.5px solid var(--win-line);border-radius:8px;padding:8px 12px}
.stats dt{font:800 11px var(--f-game);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.stats dd{margin:0;font:800 18px/1.25 var(--f-game)}
.stats dd small{font:700 12px var(--f-ui);color:var(--ink-3)}

/* ---------- mobile ---------- */
@media (max-width:1060px) and (min-width:821px){
  .try-out{grid-template-columns:1fr 1fr}
  .try-out>div:nth-child(3){border-left:0}
  .try-out>div:nth-child(n+3){border-top:1.5px dashed var(--win-line)}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .sl-find .pad{padding:12px 12px 14px;gap:10px;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:end}
  .sl-find .find-main{display:contents}
  .sl-find .sl-box,.sl-find #sl-quick{grid-column:1/-1}
  .ren{width:58px;margin-bottom:0}
  .say{font-size:13px;padding:6px 10px 5px}
  .sl-box .field input{font-size:16px}
  .sl-pop{columns:1}
  #sl-quick button:nth-of-type(n+4){display:none}
  .try-out dd{font-size:17px}
  .sl-rec{position:relative;top:0;order:-1;scroll-margin-top:56px;min-height:0}
  .sl-rec .price b{font-size:42px}
  .sl-rec .price.is-rough b{font-size:34px}
  .sl-rec .lane b{font-size:16px}
  .try-row{grid-template-columns:1fr;gap:8px}
  .try-in .field{width:100%}
  .try-out{grid-template-columns:1fr 1fr}
  .try-out>div:nth-child(3){border-left:0}
  .try-out>div:nth-child(n+3){border-top:1.5px dashed var(--win-line)}
  .wait-bars{gap:3px;height:150px}
  .wait-bars b{font-size:11px;white-space:normal;text-align:center}
  .wait-bars em{font-size:10.5px}
  .wait-bars small{font-size:11px}
  .stats{grid-template-columns:1fr 1fr}
  .book li{grid-template-columns:40px auto;}
  .book li>small{grid-column:2/-1;white-space:normal}
}
/* reserve the quick-pick chips row while it loads */
#sl-quick:not(:has(button)){min-height:56px}
@media (max-width:1060px) and (min-width:821px){#sl-quick:not(:has(button)){min-height:25px}}
@media (max-width:820px){#sl-quick:not(:has(button)){min-height:87px}}