/* Both market types occupy the same slots; only their contents change. */
#book-depth-tab { min-width: 0; width: 100%; }
#book-depth-tab .depth-title { font-size: 1.25rem; margin: 0 0 .5rem; }
.depth-controls-slot { position: relative; flex: 0 0 126px; height: 126px; width: 100%; min-width: 0; margin-bottom: .75rem; }
.depth-perp-controls, #binary-depth-panel { position: absolute; inset: 0; width: 100%; min-width: 0; overflow: auto; }
.depth-perp-controls { display: flex; flex-direction: column; gap: .6rem; }
#binary-depth-panel[hidden] { display: none !important; }
#book-depth-tab.binary-mode .depth-perp-controls { display: none; }
#book-depth-tab.binary-mode #perp-depth-card,
#book-depth-tab.binary-mode .depth-perp-source { visibility: hidden; pointer-events: none; }
#book-depth-tab:not(.binary-mode) .depth-binary-canvas,
#book-depth-tab:not(.binary-mode) .depth-binary-source,
#book-depth-tab:not(.binary-mode) .depth-binary-notes { visibility: hidden; pointer-events: none; }
#book-depth-tab .depth-header { margin: 0 !important; align-items: flex-start; }
#book-depth-tab .exchange-prices { flex-wrap: wrap; gap: .35rem 1.5rem; min-height: 26px; }
#book-depth-tab .depth-xaxis-toggle { margin: 0; }
#book-depth-tab .fee-inputs-container { flex-wrap: wrap; gap: .35rem 1.25rem; margin: 0; }
#book-depth-tab .fee-input-group { flex-wrap: nowrap; }
#book-depth-tab .fee-input-group .unit { font-size: .75rem; color: #8b949e; }
#book-depth-tab .unified-asset-selector { flex: 0 0 auto; flex-wrap: wrap; gap: .6rem 1rem; width: 100%; min-width: 0; }
.updown-selector, .book-asset-group { display: inline-flex; align-items: center; gap: .5rem; }
#book-depth-tab .unified-asset-selector label { font-size: .85rem; white-space: nowrap; }
#book-depth-tab .unified-asset-selector select { flex: 0 0 auto; min-width: 110px; max-width: 160px; width: clamp(110px, 12vw, 160px); padding: .5rem 2rem .5rem .7rem; font-size: .95rem; }
#book-depth-chart-card { width: 100%; flex: 0 0 auto; }
#book-depth-chart-card .depth-shared-chart-well { min-height: 0; width: 100%; }
.depth-canvas-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.depth-canvas-layer > canvas { width: 100% !important; height: 100% !important; }
.depth-source-footer { position: relative; flex: 0 0 24px; height: 24px; margin-top: .5rem; color: #7d8590; font-size: .75rem; }
.depth-source-footer > p { position: absolute; inset: 0; margin: 0; }
.depth-notes-slot { position: relative; flex: 0 0 126px; height: 126px; margin-top: .6rem; width: 100%; }
.depth-binary-notes { color: #8b949e; font-size: .72rem; }
.depth-binary-notes p { margin: 0 0 .2rem; }
.binary-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; height: 38px; margin: 0 0 .4rem; }
.binary-heading > div:first-child { min-width: 0; }
.binary-heading-actions { display: flex; align-items: center; gap: .8rem; flex: 0 0 auto; }
.binary-heading h3 { font-size: .9rem; margin: 0; }
#binary-window { font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.binary-muted { color: #8b949e; }
.binary-outcomes { display: flex; flex: 0 0 auto; padding: 3px; gap: 3px; border: 1px solid #30363d; border-radius: 8px; background: #161b22; }
.binary-outcomes button, #binary-reset-fees { background: transparent; color: #8b949e; border: 0; border-radius: 5px; cursor: pointer; padding: .35rem .8rem; font: inherit; font-size: .8rem; }
.binary-outcomes button[aria-pressed="true"] { background: #303c4d; color: #f0f6fc; }
.binary-outcomes button:focus-visible, #binary-reset-fees:focus-visible { outline: 2px solid #58a6ff; }
.binary-venues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem .8rem; margin: 0 0 .3rem; }
.binary-venues > div { display: grid; gap: .2rem; align-content: start; min-width: 0; }
.binary-venue-heading { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.binary-venues strong { font-size: .8rem; }
.binary-lighter-color { color: #58a6ff; }
.binary-polymarket-color { color: #3fb98c; }
.binary-hyperliquid-color { color: #d2a8ff; }
.binary-feed-status { font-size: .65rem; color: #8b949e; }
.binary-feed-status[data-live="true"] { color: #3fb950; }
.binary-book-age { font-variant-numeric: tabular-nums; white-space: nowrap; }
.binary-quote { font-size: .75rem; color: #b1bac4; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.binary-fee { display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: #b1bac4; white-space: nowrap; }
.binary-fee input { width: 3.8rem; padding: .2rem .3rem; background: #161b22; color: #e6edf3; border: 1px solid #30363d; border-radius: 5px; font: inherit; }
.binary-fee input:invalid { border-color: #f85149; }
.binary-fee input:disabled { opacity: .5; }
#binary-reset-fees { padding: .25rem 0; font-size: .75rem; text-decoration: underline; }
.binary-message { font-size: .75rem; color: #d2a8ff; margin: .3rem 0 0; }
.binary-message:empty { display: none; }
@media (max-width: 768px) {
    .depth-controls-slot { flex-basis: 184px; height: 184px; }
}
@media (max-width: 650px) {
    #book-depth-tab .depth-title { font-size: 1rem; }
    .depth-controls-slot { flex-basis: 248px; height: 248px; }
    #book-depth-tab .unified-asset-selector { gap: .4rem; }
    #book-depth-tab .unified-asset-selector select { padding: .4rem 1.5rem .4rem .5rem; font-size: .85rem; }
    .binary-heading { align-items: flex-start; height: 56px; }
    .binary-heading-actions { flex-direction: column-reverse; gap: .2rem; }
    #binary-window { white-space: normal; max-height: 34px; }
    .binary-venues { grid-template-columns: 1fr; gap: .5rem; margin-bottom: .3rem; }
    .binary-venues > div { grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .4rem; }
    .binary-venue-heading { grid-column: 1 / -1; }
    .binary-fee { font-size: .65rem; }
    .binary-fee input { width: 2.8rem; }
    .depth-source-footer { flex-basis: 48px; height: 48px; }
    .depth-notes-slot { flex-basis: 230px; height: 230px; }
}