/* ============ FULL TRADING TERMINAL ============ */
.xterm{display:grid;grid-template-columns:204px minmax(0,1fr) 230px 208px 288px;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
/* Narrow screens must REFLOW, never hide: the order book, trades feed and pair
   list are core features, so they move below the chart rather than disappearing.
   Children in DOM order: 1 pairs, 2 chart+orders, 3 book, 4 form. */
@media(max-width:1400px){
  .xterm{grid-template-columns:minmax(0,1fr) 232px 288px}
  .xterm > .xt-pairs{grid-column:1/-1;order:5;max-height:300px}
}
@media(max-width:1080px){
  .xterm{grid-template-columns:minmax(0,1fr) 300px}
  .xterm > .xt-book{grid-column:1/-1;order:4;max-height:440px}
  .xterm > .xt-book .book{max-height:440px}
}
@media(max-width:820px){
  .xterm{grid-template-columns:minmax(0,1fr)}
  .xterm > *:nth-child(2){order:1}
  .xterm > *:nth-child(4){order:2}
  .xterm > .xt-book{order:3}
  .xterm > .xt-pairs{order:4;max-height:340px}
  .xf-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){.xf-cols{grid-template-columns:minmax(0,1fr)}}
.xterm>div{background:var(--surface);min-width:0}
.xt-h{padding:11px 13px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;color:var(--text2);
  display:flex;align-items:center;gap:10px;position:sticky;top:0;background:var(--surface);z-index:2}
.xt-h .sp{margin-left:auto;font-weight:600;color:var(--text3);font-size:11px}
.xt-pairs{max-height:700px;overflow-y:auto}
.qtabs{display:flex;gap:2px;padding:8px 10px 4px;flex-wrap:wrap}
.qtabs button{padding:5px 9px;border-radius:7px;font-size:11.5px;font-weight:700;color:var(--text3)}
.qtabs button.on{color:var(--accent);background:var(--accent-soft)}
.prow{display:grid;grid-template-columns:minmax(0,1fr) 56px;grid-template-rows:auto auto;
  gap:2px 8px;align-items:center;padding:7px 12px;cursor:pointer;font-size:12.5px}
.prow > b{grid-column:1/-1;grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow > .px{grid-column:1;grid-row:2}
.prow > b ~ span:not(.px){grid-column:2;grid-row:2;text-align:right}
.prow:hover{background:var(--surface2)}
.prow.on{background:var(--accent-soft)}
.prow .st{color:var(--text3);flex-shrink:0}
.prow .st.on{color:var(--warn)}
.prow b{font-weight:700}
.prow b small{color:var(--text3);font-weight:600}
.prow .px{font-family:var(--ff-mono);text-align:right}
.prow .ch{font-family:var(--ff-mono);font-size:11.5px;font-weight:600;text-align:right}
/* pair bar */
/* This was a nowrap strip with a HIDDEN scrollbar. Anything past the edge was
   not just off-screen but undiscoverable — no scrollbar said more existed. In
   English the labels run longer than the Japanese ("24H change" vs 24H変動),
   so 690px of content sat in the 460px chart column and change / high / low /
   volume were invisible AT EVERY WIDTH, desktop included. The page never
   scrolled sideways, which is why an overflow metric called the view clean.

   It wraps instead. With room it is still one row; without, it takes a second
   rather than hiding half the market data. A container query would answer the
   viewport-vs-column problem (as .xform does below), but there is no width at
   which silently hiding these numbers is right, so there is nothing to gate. */
.xbar{display:flex;align-items:center;gap:16px;padding:12px 16px;
  border-bottom:1px solid var(--border);flex-wrap:wrap;row-gap:11px}
.xbar::-webkit-scrollbar{display:none}
/* The bar is a nowrap strip with a HIDDEN scrollbar, so anything past the
   viewport is not merely off-screen, it is unreachable-looking: there is no
   affordance saying more exists. In English the labels are longer than the
   Japanese ones ("24H change" vs 24H変動), so 690px of content sat in a 344px
   strip and change / high / low / volume were all invisible — the page never
   scrolled sideways, which is exactly why an overflow metric called it clean.
   On narrow screens the stats wrap onto their own row instead. */
@media(max-width:820px){
  .xbar{gap:12px}
  .xbar .pn{flex:1 1 auto;min-width:0}
  .xbar .lp{flex:0 0 auto;text-align:right}
  .xbar .m{flex:1 1 auto;min-width:70px}
}
.xbar .pn,.xbar .lp{flex:none}
.xbar .m{flex:none;white-space:nowrap}
.xbar .pn{font-family:var(--ff-display);font-weight:800;font-size:18px;display:flex;align-items:center;gap:9px}
.xbar .lp{font-family:var(--ff-mono);font-size:22px;font-weight:600;line-height:1.1}
.xbar .lp small{display:block;font-size:11px;color:var(--text3);font-weight:500;margin-top:3px}
.xbar .m{font-size:10.5px;color:var(--text3)}
.xbar .m b{display:block;font-family:var(--ff-mono);font-size:12.5px;font-weight:600;color:var(--text2);margin-top:3px}
/* chart strip */
.xchart-h{display:flex;align-items:center;gap:3px;padding:7px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.xchart-h button{padding:4px 9px;border-radius:6px;font-size:11.5px;font-weight:600;color:var(--text3)}
.xchart-h button.on{background:var(--surface3);color:var(--text)}
.xchart-h .sep{width:1px;height:16px;background:var(--border);margin:0 6px}
.xchart{height:352px;position:relative}
@media(max-width:900px){.xchart{height:250px}}
.malegend{display:flex;gap:14px;padding:8px 14px 0;font-family:var(--ff-mono);font-size:10.5px;flex-wrap:wrap}
.malegend span{display:inline-flex;align-items:center;gap:5px}
.malegend i{width:12px;height:2px;border-radius:2px;display:inline-block}
/* order book */
.book{display:flex;flex-direction:column;height:100%;min-height:0}
.bk-tabs{display:flex;gap:2px;padding:8px 10px 4px}
.bk-tabs button{padding:5px 10px;border-radius:7px;font-size:11.5px;font-weight:700;color:var(--text3)}
.bk-tabs button.on{color:var(--text);background:var(--surface3)}
.bk-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:6px;padding:6px 13px;
  font-size:10px;color:var(--text3);border-bottom:1px solid var(--border)}
.bk-hd span:nth-child(2),.bk-hd span:nth-child(3){text-align:right}
.bk-side{flex:1;overflow:hidden;display:flex;flex-direction:column}
.bk-side.asks{justify-content:flex-end}
.bkrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:6px;padding:2.5px 13px;
  font-family:var(--ff-mono);font-size:11.5px;position:relative;cursor:pointer}
.bkrow:hover{background:var(--surface2)}
.bkrow .d{position:absolute;top:0;bottom:0;right:0;opacity:.16}
.bkrow span{position:relative;z-index:1}
.bkrow span:nth-child(2),.bkrow span:nth-child(3){text-align:right;color:var(--text2)}
.bkrow.ask span:first-child{color:var(--down)}
.bkrow.ask .d{background:var(--down)}
.bkrow.bid span:first-child{color:var(--up)}
.bkrow.bid .d{background:var(--up)}
.bk-mid{padding:9px 13px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;background:var(--surface2)}
.bk-mid .p{font-family:var(--ff-mono);font-size:17px;font-weight:600}
.bk-mid .j{font-size:11px;color:var(--text3);font-family:var(--ff-mono)}
.bk-grp{margin-left:auto;font-size:11px;background:var(--surface3);border:1px solid var(--border);
  border-radius:6px;color:var(--text2);padding:3px 6px;font-family:var(--ff-mono)}
.trow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 58px;gap:6px;padding:3px 13px;
  font-family:var(--ff-mono);font-size:11.5px}
.trow span:nth-child(2){text-align:right;color:var(--text2)}
.trow span:nth-child(3){text-align:right;color:var(--text3)}
/* order form */
.xform{padding:14px}
.xf-tabs{display:flex;gap:3px;margin-bottom:12px}
.xf-tabs button{flex:1;padding:7px;border-radius:8px;font-size:12px;font-weight:700;color:var(--text3);background:var(--surface2);border:1px solid var(--border)}
.xf-tabs button.on{color:var(--text);background:var(--surface3);border-color:var(--border2)}
/* The ticket is a fixed-width GRID COLUMN, so its width does not track the
   viewport — a viewport media query never fired and a two-up form was crammed
   into 260px (needed 536). Ask the container, not the window. */
.xform{container-type:inline-size}
.xf-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@container (max-width:430px){ .xf-cols{grid-template-columns:minmax(0,1fr)} }
/* fallback for engines without container queries: this terminal's ticket column
   is never wide enough for two, so single-column is the safe default there */
@supports not (container-type: inline-size){
  .xterm .xf-cols{grid-template-columns:minmax(0,1fr)}
}
.xf-col .hd{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-bottom:8px}
.xf-col .hd b{font-family:var(--ff-mono);color:var(--text2)}
.xf-in{display:flex;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:7px 10px;margin-bottom:7px}
.xf-in label{font-size:11px;color:var(--text3);flex-shrink:0;width:38px}
.xf-in input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:var(--ff-mono);font-size:13px;text-align:right}
.xf-in span{font-size:11px;color:var(--text3);margin-left:6px;flex-shrink:0}
.xf-in.dis{opacity:.6}
.pctbar{display:flex;align-items:center;gap:5px;margin:9px 0}
.pctbar button{flex:1;padding:4px 0;border-radius:5px;font-size:10.5px;font-weight:700;background:var(--surface2);border:1px solid var(--border);color:var(--text3)}
.pctbar button:hover{color:var(--accent);border-color:var(--accent-line)}
.xf-sum{font-size:10.5px;color:var(--text3);display:flex;justify-content:space-between;padding:3px 0}
.xf-sum b{font-family:var(--ff-mono);color:var(--text2);font-weight:600}
.xf-go{width:100%;padding:10px;border-radius:9px;font-weight:800;font-size:13.5px;color:#fff;margin-top:8px}
.xf-go.buy{background:var(--up)}.xf-go.sell{background:var(--down)}
.xf-go:hover{filter:brightness(1.08)}
.slipchk{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text3);margin-top:9px}
.slipchk input{accent-color:var(--accent)}
/* bottom orders panel */
.xorders{border-top:1px solid var(--border)}
.xo-tabs{display:flex;gap:20px;padding:0 18px;border-bottom:1px solid var(--border);overflow-x:auto}
.xo-tabs button{padding:12px 0;font-size:12.5px;font-weight:600;color:var(--text3);white-space:nowrap;position:relative}
.xo-tabs button.on{color:var(--text)}
.xo-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
/* futures extras */
.mmtoggle{display:flex;gap:5px;margin-bottom:10px}
.mmtoggle button{flex:1;padding:6px;border-radius:8px;font-size:11.5px;font-weight:700;background:var(--surface2);border:1px solid var(--border);color:var(--text3)}
.mmtoggle button.on{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}
.levslide{display:flex;align-items:center;gap:10px;margin-bottom:11px;min-width:0}
/* A range input has an intrinsic width and flex:1 leaves min-width:auto, so it
   refused to shrink and pushed the × readout out of the 288px ticket column —
   visible only from 1440px up, where that column is at its narrowest relative
   to the grid. min-width:0 is what actually lets flex do its job here. */
.levslide input{flex:1 1 0;min-width:0;accent-color:var(--accent)}
.levslide span{flex:0 1 auto;min-width:0;white-space:nowrap}
.levslide b{font-family:var(--ff-mono);font-size:13px;min-width:42px;text-align:right}
.tpsl{border:1px solid var(--border);border-radius:9px;padding:10px;margin-top:10px;background:var(--surface2)}
.tpsl .hd{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text2);font-weight:600}
.tpsl .bd{display:none;margin-top:9px}
.tpsl.on .bd{display:block}
.assetbox{border-top:1px solid var(--border);margin-top:14px;padding-top:12px}
.assetbox .r{display:flex;justify-content:space-between;font-size:11.5px;padding:4px 0;color:var(--text3)}
.assetbox .r b{font-family:var(--ff-mono);color:var(--text2);font-weight:600}
.mratio{height:5px;border-radius:3px;background:var(--surface3);overflow:hidden;margin:7px 0 3px}
.mratio>i{display:block;height:100%;background:var(--up)}
.mratio>i.warn{background:var(--warn)}.mratio>i.bad{background:var(--down)}
.fundclock{font-family:var(--ff-mono);font-size:12.5px;font-weight:600}


/* ---- order book + time & sales, side by side and both always open ---------
   They were tabs before, so you could only ever see one. The book column is
   wider now and splits into two panels; on narrow screens they stack rather
   than one being hidden (same rule as the rest of the terminal). */

.bk-cap{padding:8px 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  color:var(--text3);border-bottom:1px solid var(--border);flex:none}
.bk-col .book{flex:1;min-height:0;max-height:none}
.tape-rows{overflow-y:auto;flex:1;min-height:0}
.trow.buy span:first-child{color:var(--up)}
.trow.sell span:first-child{color:var(--down)}
.bk-wait{padding:30px 12px;text-align:center;color:var(--text3);font-size:11.5px}
.bk-wait div{margin-top:8px}
/* A failed panel must not read as a slow one — same box, different voice. */
.bk-wait.failed{color:var(--down)}
.bk-wait.failed svg{opacity:.5}
.bk-wait .bk-note{margin-top:4px;color:var(--text3);font-size:10.5px;line-height:1.5}

/* the mid block used to cram price, yen and spread into one flex row inside a
   232px column, so "スプレッド" wrapped one character per line. Two lines now. */
.bk-mid{display:block;padding:8px 12px;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);background:var(--surface2)}
.bk-mid-a{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.bk-mid-b{font-size:10.5px;color:var(--text3);font-family:var(--ff-mono);margin-top:2px}
.bk-sp{font-size:10px;color:var(--text3);white-space:nowrap;flex:none}
.bk-sp b{color:var(--text2);font-family:var(--ff-mono);font-weight:600}



/* 264px has to hold an 8-digit price, a size and a total — tighten the grid
   and the type rather than letting the columns overlap. */
/* both columns are narrower than the old single one, so tighten the grids
   rather than letting an 8-digit price collide with its size */
.xt-book .bkrow,.xt-book .bk-hd{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.95fr);
  gap:8px;padding-left:11px;padding-right:11px;font-size:11px}
.xt-tape .trow,.xt-tape .bk-hd{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 56px;
  gap:8px;padding-left:10px;padding-right:10px;font-size:10.5px}
/* the three columns must never touch: tabular digits with a 4px gutter read as
   one number ("79,108.010.05453"). Ellipsis rather than collide. */
.xt-tape .trow span,.xt-book .bkrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xt-book .bk-hd,.xt-tape .bk-hd{font-size:9.5px}
.xt-tape{display:flex;flex-direction:column;min-width:0}
.xt-tape .book{flex:1;min-height:0}

/* Order button: the symbol is a separate node from the verb, so the verb can be
   translated on its own. Japanese wants "BTC を買う", English wants "Buy BTC" —
   same DOM, re-ordered on the document language. i18n.js sets html[lang]. */
.submit{display:inline-flex;align-items:center;justify-content:center;gap:6px}
html[lang="ja"] .submit .ob-verb{margin-left:-2px}
html:not([lang="ja"]) .submit{flex-direction:row-reverse;gap:5px}

/* ---- panels fill their frame -------------------------------------------
   A max-height:700px from the original single-column design was capping the
   pair list, the book and the tape at 700px inside a 973px column — 273px of
   dead space under each, and the pair list showing 700 of 1,753px of content.
   Each column now fills its grid row and scrolls internally. */
.xterm{align-items:stretch}
.xterm > *{min-height:0}
.xt-pairs{max-height:none;height:100%;min-height:0;display:flex;flex-direction:column}
.xt-pairs > *:last-child{flex:1;min-height:0;overflow-y:auto}
.xt-book,.xt-tape{max-height:none;height:100%;min-height:0}
.xt-book .book,.xt-tape .book{max-height:none;flex:1;min-height:0}
.tape-rows{flex:1;min-height:0;overflow-y:auto}

/* the terminal is a viewport-height workspace, not a document that grows:
   each column scrolls on its own so the page itself does not */
@media(min-width:861px){
  .xterm{height:calc(100vh - var(--tx-chrome, 148px));min-height:600px}
}

/* ---- unlimited book depth ----
   The book now renders every level the feed holds (hundreds per side), so each
   side scrolls. The asks list runs high->low, which puts the levels nearest the
   mid at its BOTTOM — so that side is pinned to its end, keeping the spread in
   view instead of the far tail. */
.bk-side{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.bk-side::-webkit-scrollbar{width:6px}
.bk-side::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.bk-mid{flex:none}