/* Markets: the live board, over the surface. */
body[data-page=markets]{height:100vh;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(120% 90% at 50% 0,#10161e,#0a0d12 60%)}
#surface{position:fixed;left:0;right:0;bottom:0;top:56px;width:100%;height:calc(100% - 56px)}
.floor{position:relative;z-index:1;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:14px;padding:14px}
.board{position:relative;min-height:0;display:flex;flex-direction:column;gap:10px}
.bhead{display:flex;justify-content:space-between;align-items:center;height:34px}
.bhead h1{margin:0;font:600 24px/1 var(--ui);letter-spacing:-.02em}
.counts{display:flex;gap:18px;font:500 12.5px/1 var(--mono)}
.counts span{display:flex;gap:7px;align-items:baseline}.counts i{font-style:normal;color:var(--t3);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.counts b{font-weight:500}.counts .t{color:var(--trade)}.counts .h{color:var(--held)}
.tiles{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:calc(50% - 5px);gap:10px;overflow-y:auto;overflow-x:hidden;margin:-4px;padding:4px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}

/* a tile: a machined bay with a recessed chart well */
.tile{display:flex;flex-direction:column;min-height:0;padding:11px 12px 10px;text-align:left;border-radius:5px;background:linear-gradient(rgba(27,35,46,.93),rgba(17,23,31,.93));box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(200,215,235,.09),0 12px 20px -14px #000;transition:transform .35s cubic-bezier(.16,.84,.3,1),box-shadow .3s ease}
.tile:not([disabled]):hover{transform:translate3d(0,-3px,0);box-shadow:0 0 0 1px var(--line2),inset 0 1px 0 rgba(200,215,235,.12),0 12px 20px -14px #000}
.tile:not([disabled]):active{transform:translate3d(0,0,0) scale(.992);transition-duration:.1s}
.tile.sel{box-shadow:0 0 0 1px var(--steel),inset 0 1px 0 rgba(200,215,235,.12),0 12px 20px -14px #000}
.tile.bay{background:none;box-shadow:none}
.tile.bay::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(var(--line2),var(--line2)) 0 0/14px 1px,linear-gradient(var(--line2),var(--line2)) 0 0/1px 14px,linear-gradient(var(--line2),var(--line2)) 100% 0/14px 1px,linear-gradient(var(--line2),var(--line2)) 100% 0/1px 14px,linear-gradient(var(--line2),var(--line2)) 0 100%/14px 1px,linear-gradient(var(--line2),var(--line2)) 0 100%/1px 14px,linear-gradient(var(--line2),var(--line2)) 100% 100%/14px 1px,linear-gradient(var(--line2),var(--line2)) 100% 100%/1px 14px;background-repeat:no-repeat}
.tile.held{box-shadow:0 0 0 1px rgba(232,163,61,.55),inset 0 1px 0 rgba(232,163,61,.2),0 0 26px -6px rgba(232,163,61,.35),0 12px 20px -14px #000}
.tile.held.sel{box-shadow:0 0 0 1px var(--held),inset 0 1px 0 rgba(232,163,61,.25),0 0 30px -4px rgba(232,163,61,.42),0 12px 20px -14px #000}
.run{position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--held);transform:scaleX(0);transform-origin:left;transition:transform .25s linear}
.state.h::before{animation:lamp 2s ease-in-out infinite}
@keyframes lamp{50%{opacity:.45}}
.tile .top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:22px}
.state.m{color:var(--steel)}.state.m::before{opacity:.7}
.fig{position:absolute;inset:0;display:grid;align-content:center;padding:0 14px;gap:5px}.fig[hidden]{display:none}
.fig small{font:500 10.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--t3)}
.fig b{font:600 31px/1 var(--ui);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.tile.m canvas{display:none}
.dfig{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center}.dfig[hidden]{display:none}
.dfig small{font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--t3)}
.dfig b{font:600 60px/1 var(--ui);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.dfig span{font:500 14px/1 var(--mono);color:var(--t2)}
.who{display:flex;align-items:center;gap:7px;min-width:0}
.ico{flex:none;width:20px;height:20px;border-radius:3px;object-fit:cover;background:var(--well)}
.tile .sym{font:600 15.5px/1.1 var(--ui);letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
.state{flex:none;display:inline-flex;align-items:center;gap:6px;font:600 10.5px/1 var(--mono);letter-spacing:.05em}
.state::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.state:empty{display:none}
.state.t{color:var(--trade)}.state.t::before{box-shadow:0 0 6px rgba(85,184,166,.6)}
.state.h{color:var(--held)}.state.h::before{box-shadow:0 0 8px rgba(232,163,61,.8)}
.well{position:relative;flex:1;min-height:0;margin:9px 0;border-radius:3px;background:var(--well);box-shadow:inset 0 1px 3px #000,0 1px 0 rgba(200,215,235,.06)}
.well canvas{position:absolute;inset:0;width:100%;height:100%}
.tile .low{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:500 12.5px/1 var(--mono);font-variant-numeric:tabular-nums}
.tile .low em{font-style:normal;color:var(--t2)}
.tile.held .low b{color:var(--held);font-weight:500}.tile .low b{font-weight:500}
.tile.bay .well{background:none;box-shadow:none}

.empty{position:absolute;inset:44px 0 0;display:grid;place-items:center;pointer-events:none;padding-bottom:12%}
.empty>div{display:grid;gap:8px;text-align:center}
.empty b{font:600 44px/1.05 var(--ui);letter-spacing:-.032em}.empty span{font-size:17px;color:var(--t2)}
.empty[hidden]{display:none}

/* the detail panel */
.swap{animation:settle .45s cubic-bezier(.16,.84,.3,1) both}
.detail{min-height:0;display:flex;flex-direction:column;padding:14px;border-radius:5px;background:linear-gradient(rgba(27,35,46,.96),rgba(15,20,27,.96));box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(200,215,235,.1),0 14px 26px -14px #000}
.dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;min-height:52px}
.dhead h2{margin:0;font:600 22px/1.15 var(--ui);letter-spacing:-.02em}
.dhead p{margin:2px 0 0;font-size:14px;color:var(--t2)}
.well.big{margin:10px 0 12px}
.stats{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:1px;margin:0;border-radius:3px;overflow:hidden;background:var(--line);box-shadow:0 0 0 1px var(--line)}
.stats div{padding:9px 10px;background:#0e131a}
.stats dt{font:500 10.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--t3)}
.stats dd{margin:6px 0 0;font:500 14px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.stats dd.h{color:var(--held)}.stats dd.t{color:var(--trade)}
.holdbar{height:3px;margin:10px 0;background:var(--well);border-radius:2px;overflow:hidden}
.holdbar i{display:block;height:100%;width:0;background:var(--held)}
.trade{flex:none;height:64px;border-radius:4px;font:600 21px/1 var(--ui);letter-spacing:-.01em;color:#071210;background:linear-gradient(#67c9b6,#3f9e8d);box-shadow:0 3px 0 #1d4b43,0 10px 16px -8px #000,inset 0 1px 0 rgba(255,255,255,.3);transition:transform .16s cubic-bezier(.16,.84,.3,1),box-shadow .16s ease,filter .25s ease}
.trade:not([disabled]):hover{filter:brightness(1.08)}
.trade:not([disabled]):active{transform:translateY(2px);box-shadow:0 1px 0 #1d4b43,inset 0 1px 0 rgba(255,255,255,.2)}
.trade[disabled]{color:var(--t3);background:linear-gradient(#222b36,#1a212a);box-shadow:0 3px 0 #0a0d12,inset 0 1px 0 rgba(200,215,235,.08)}
.trade.h{color:var(--held);background:linear-gradient(#2a2418,#1e1a12);box-shadow:0 3px 0 #0a0d12,inset 0 0 0 1px rgba(232,163,61,.4)}
.claim{flex:none;height:38px;margin-top:10px;border-radius:3px;font:600 14px/1 var(--ui);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .25s ease}
.claim:hover{box-shadow:inset 0 0 0 1px var(--steel)}.claim[hidden]{display:none}
/* the trade ticket slides up inside the panel */
.detail{overflow:hidden}
.ticket{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px;background:linear-gradient(#1b232e,#121820);border-radius:0 0 5px 5px;box-shadow:0 -1px 0 rgba(200,215,235,.14),0 -18px 30px -14px #000;transform:translate3d(0,104%,0);visibility:hidden;transition:transform .42s cubic-bezier(.16,.84,.3,1),visibility 0s .42s}
.ticket.open{transform:none;visibility:visible;transition:transform .42s cubic-bezier(.16,.84,.3,1)}
.ticket header{display:flex;justify-content:space-between;align-items:center}
.tabs{display:flex;gap:2px;padding:2px;border-radius:3px;background:var(--well)}
.tabs button{height:30px;padding:0 16px;border-radius:2px;font:600 14px/1 var(--ui);color:var(--t2);transition:color .2s,background .2s}
.tabs button.on{color:var(--ink);background:#232d39}
.x{width:30px;height:30px;font:400 20px/1 var(--ui);color:var(--t2)}.x:hover{color:var(--ink)}
.chips{display:flex;gap:6px;margin-top:11px}
.chips button{flex:1;height:36px;border-radius:3px;font:500 13px/1 var(--mono);color:var(--t2);box-shadow:inset 0 0 0 1px var(--line2);transition:color .2s,box-shadow .2s,background .2s}
.chips button:hover{color:var(--ink)}.chips button.on{color:#0a0d12;background:var(--steel);box-shadow:none}
.ticket dl{margin:10px 0 0}.ticket dl div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.ticket dt{font-size:13px;color:var(--t2)}.ticket dd{margin:0;font:500 13px/1.4 var(--mono);text-align:right}
.warn{margin:10px 0 0;padding:9px 10px;border-radius:3px;font-size:13.5px;line-height:1.38;color:var(--ink);background:rgba(216,74,62,.12);box-shadow:inset 0 0 0 1px rgba(216,74,62,.45)}
.ticket .go{width:100%;height:48px;margin-top:11px;border-radius:3px;font:600 17px/1 var(--ui);color:#071210;background:linear-gradient(#67c9b6,#3f9e8d);box-shadow:0 2px 0 #1d4b43,inset 0 1px 0 rgba(255,255,255,.3);transition:transform .14s cubic-bezier(.16,.84,.3,1),filter .2s}
.ticket .go:not([disabled]):hover{filter:brightness(1.08)}.ticket .go:not([disabled]):active{transform:translateY(1px)}
.ticket .go[disabled]{color:var(--t3);background:#1d2530;box-shadow:none}
.tnote{min-height:17px;margin:8px 0 0;font-size:13px;line-height:1.3;color:var(--t2);text-align:center}.tnote a{color:var(--ink);text-decoration:underline}
.note{margin:12px 0 0;min-height:40px;font-size:13.5px;line-height:1.4;color:var(--t2)}

@media (max-width:1240px){.floor{grid-template-columns:minmax(0,1fr) 360px}.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-height:720px) and (min-width:761px){.bhead{height:26px}.bhead h1{font-size:20px}.trade{height:50px}.dhead{min-height:44px}.note{display:none}}
@media (max-width:760px){
  body[data-page=markets]{height:auto;min-height:100vh;overflow:auto}
  #surface{height:70vh;top:56px}
  .floor{display:flex;flex-direction:column;padding:10px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:168px;overflow:visible;margin:0;padding:0}
  .tile.bay:nth-child(n+5){display:none}
  .stats dd{font-size:12px}.stats div{padding:9px 8px}
  .empty{inset:44px 0 auto;height:340px;padding:0}.empty b{font-size:30px}.well.big{flex:none;height:220px}
}