

.rl { display: flex; flex-direction: column; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--ink); }
.rl > * { border-bottom: 1px solid var(--line); min-width: 0; }

.rl-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, 1fr); }
.rl-f { padding: 10px var(--pad); border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.rl-f:nth-child(3n) { border-right: 0; }
.rl-f:nth-last-child(-n+3) { border-bottom: 0; }
.rl-f > .lbl { color: var(--paper); }
.rl-f .seg button { height: 32px; font-size: var(--t-meta); }
.rl-cost .seg button { font: 400 var(--t-head)/1 var(--f-disp); letter-spacing: 0; }
.rl-want .seg button small { font-size: var(--t-label); color: inherit; opacity: .7; margin-left: 3px; }
.rl-sl .field { grid-template-columns: 96px minmax(0, 1fr) 52px; }



.rl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1.2fr)) repeat(6, minmax(0, 1fr)); }
.rl-n { display: flex; flex-direction: column; gap: 6px; padding: 12px var(--pad) 11px; border-right: 1px solid var(--line2); min-width: 0; }
.rl-n:last-child { border-right: 0; }
.rl-n > .lbl { margin-bottom: auto; }
.rl-n > b { display: flex; align-items: flex-start; font: 400 var(--t-num)/.9 var(--f-disp); letter-spacing: 0;
font-variant-numeric: tabular-nums; color: var(--paper); white-space: nowrap; }
.rl-n > b small { font-size: var(--t-row); line-height: 1; margin: .1em 0 0 .08em; color: var(--mute); }
.rl-s { font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; color: var(--mute2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-s:empty::before { content: "\00a0"; }

.rl-l > .lbl { color: var(--paper); }
.rl-l > b { font-size: var(--t-hero); }
.rl-l > b small { font-size: var(--t-head); }
.rl-n.rl-g80 > b { color: var(--hi); }
.rl-n.rl-shop { border-right: 1px solid var(--line); }

.rl-q > .lbl { color: var(--mute); }
.rl-q > b { color: var(--mute); }
.rl-q > b small { color: var(--mute2); }
.rl-row.off .rl-n > b { color: var(--mute2); }
.rl-why { padding: 8px var(--pad); font-size: var(--t-meta); font-weight: 800; letter-spacing: .08em; color: var(--hi); border-top: 1px solid var(--line2); }
.rl-why[hidden] { display: none; }
@media (max-width: 1199px) {
.rl-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rl-l { grid-column: span 2; border-bottom: 1px solid var(--line); }
.rl-n.rl-shop { border-right: 0; }
}
@media (max-width: 760px) {
.rl-q { grid-column: span 2; }
.rl-q:nth-child(-n+6) { border-bottom: 1px solid var(--line2); }
.rl-q:nth-child(3n) { border-right: 0; }
.rl-n { padding: 10px var(--pad) 9px; gap: 5px; }
.rl-s { letter-spacing: .06em; }
.rl-n > .lbl { letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.rl-gh { display: flex; align-items: center; justify-content: space-between; padding: 7px var(--pad); min-height: 30px; border-bottom: 1px solid var(--line2); }
.rl-gh .lbl { color: var(--paper); }
.rl-stamp { flex: none; margin-left: auto; padding: 0 5px; border: 1px solid var(--line2); font: 700 var(--t-label)/16px var(--f-mono); letter-spacing: .1em; color: var(--mute); white-space: nowrap; }
.rl-stamp[hidden] { display: none; }
.rl-stamp.stale { color: var(--paper); border-color: currentColor; }
.rl-graph { padding: 8px var(--pad) 12px; min-width: 0; }
@media (max-width: 1100px) {
.rl-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rl-f:nth-child(n) { border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.rl-f:nth-child(2n) { border-right: 0; }
.rl-f.rl-lvl { grid-column: 1 / -1; order: -1; border-right: 0; }
.rl-f.rl-cost { order: -2; grid-column: 1 / -1; border-right: 0; }
.rl-f:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
.rl { border-left: 0; border-right: 0; }
.rl-in { grid-template-columns: minmax(0, 1fr); }
.rl-f:nth-child(n) { border-right: 0; grid-column: auto; }
.rl-f.rl-sl { padding-top: 6px; padding-bottom: 6px; }
.rl-sl .field { grid-template-columns: 92px minmax(0, 1fr) 48px; }
}

.rl-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rl-half { min-width: 0; display: flex; flex-direction: column; }
.rl-half + .rl-half { border-left: 1px solid var(--line); }
.rl-half .rl-graph { padding-top: 6px; padding-bottom: 8px; }
.rl-gh .lbl[title] { cursor: help; }
.rl-leg { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; color: var(--mute); white-space: nowrap; }
.rl-leg i { display: inline-block; width: 14px; }
.rl-leg i + i, .rl-leg i:not(:first-child) { margin-left: 6px; }
.rl-leg .ln { height: 2px; background: var(--paper); }
.rl-leg .ln.q { height: 0; border-top: 1px dashed var(--mute); background: none; }
.rl-leg .bx { width: 8px; height: 8px; background: var(--mute2); }
.rl-leg .tk { width: 12px; height: 1px; background: var(--paper); }
@media (max-width: 760px) {
.rl-pair { grid-template-columns: minmax(0, 1fr); }
.rl-half + .rl-half { border-left: 0; border-top: 1px solid var(--line); }
}




@media (min-width: 900px) {
.rl { --rl-fill: 1; min-height: calc(100vh - var(--top-h) - var(--status-h)); }
.rl > .rl-in, .rl > .rl-out { flex: none; }
.rl-plot { flex: 3 1 0; min-height: 232px; display: flex; flex-direction: column; }
.rl-pair { flex: 2 1 0; min-height: 172px; grid-template-rows: minmax(0, 1fr); }
.rl-half { min-height: 0; }
.rl-plot > .rl-graph, .rl-half > .rl-graph { flex: 1 1 0; min-height: 0; overflow: hidden; }
}

.rgraph { position: relative; width: 100%; min-width: 0; user-select: none; touch-action: pan-y; }
.rgraph svg { display: block; width: 100%; overflow: visible; shape-rendering: crispEdges; font-family: var(--f-mono); }
.rgraph text { fill: var(--mute2); font-size: var(--t-label); font-weight: 700; letter-spacing: .04em; }
.rgraph .rg-yt text.key { fill: var(--paper); }
.rgraph .rg-grid { fill: none; stroke: var(--line2); stroke-width: 1; stroke-dasharray: 1 3; }
.rgraph .rg-minor { fill: none; stroke: var(--mute2); stroke-width: 1; }
.rgraph .rg-ax { fill: none; stroke: var(--paper); stroke-width: 1; }
.rgraph .rg-c { fill: none; stroke-width: 1; }
.rgraph .rg-c.cur { stroke: var(--paper); stroke-width: 2; }
.rgraph .rg-c.lo { stroke: var(--mute); stroke-dasharray: 5 3; }
.rgraph .rg-c.hi { stroke: var(--mute); stroke-dasharray: 1 2; }
.rgraph .rg-leg text { fill: var(--mute); font-size: var(--t-label); letter-spacing: .1em; }
.rgraph .rg-leg .cur text { fill: var(--paper); font-weight: 800; }
.rgraph .rg-80g { stroke: var(--paper); stroke-width: 1; stroke-dasharray: 2 2; opacity: .55; }
.rgraph .rg-80d { fill: var(--acid); stroke: var(--paper); stroke-width: 1; }
.rgraph .rg-tag rect { fill: var(--acid); }
.rgraph .rg-tag text { fill: #000; font-weight: 800; }
.rgraph .rg-mean { stroke: var(--paper); stroke-width: 1; opacity: .7; }
.rgraph .rg-meant { fill: var(--mute); font-size: var(--t-label); letter-spacing: .1em; }
.rgraph .rg-empty { fill: var(--mute); font-size: var(--t-meta); letter-spacing: .12em; }
.rgraph .rg-xh { stroke: var(--paper); stroke-width: 1; opacity: .5; }
.rgraph .rg-xhd { fill: var(--paper); }
.rgraph .rg-tip { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; padding: 5px 7px; background: var(--ink); border: 1px solid var(--paper); font-size: var(--t-meta); line-height: 1.4; white-space: nowrap; color: var(--paper); }
.rgraph .rg-tip b { color: var(--hi); font-weight: 800; }
.rgraph .rg-tip .t, .rgraph .rg-tip .q { color: var(--mute); font-size: var(--t-label); letter-spacing: .08em; }

.rmini .rc-l { fill: none; shape-rendering: geometricPrecision; stroke-linejoin: round; }
.rmini .rc-l.mean { stroke: var(--paper); stroke-width: 2; }
.rmini .rc-l.g80 { stroke: var(--mute); stroke-width: 1; stroke-dasharray: 4 3; }
.rmini .rc-dots rect { fill: var(--paper); }
.rmini .rc-hatch { stroke: var(--line2); stroke-width: 1; shape-rendering: geometricPrecision; }
.rmini .rc-cantl { stroke: var(--mute2); stroke-width: 1; stroke-dasharray: 2 2; }
.rmini text.rc-cantt { fill: var(--mute); letter-spacing: .12em; }
.rmini .rb-bar { fill: var(--mute2); }
.rmini .rb-bar.cur { fill: var(--acid); }
.rmini .rb-brk { fill: var(--ink); }
.rmini .rb-80 { stroke: var(--paper); stroke-width: 1; }
.rmini text.rb-v { fill: var(--mute); }
.rmini text.rb-v.cur, .rmini text.rb-x.key { fill: var(--paper); font-weight: 800; }
.rmini text.rb-na { fill: var(--mute2); }
.rmini .rb-hov { fill: var(--line3); }
