.chart-layout-switch {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 3px;
    border: 1px solid #303a41;
    border-radius: 6px;
    background: #11171b;
}

.chart-layout-switch legend {
    float: left;
    width: auto;
    margin: 0 3px 0 2px;
    padding: 0;
    color: #8fa0aa;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.chart-layout-switch button {
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #aeb9bf;
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.chart-layout-switch button:hover,
.chart-layout-switch button.is-active {
    border-color: #2d9e94;
    color: #74e4d9;
    background: #102522;
}

.chart-secondary-pane {
    flex: 0 0 auto;
    min-height: 0;
    scroll-margin-top: 8px;
    border-top: 1px solid #344149;
    background: #0b1013;
}

.chart-secondary-pane[hidden] {
    display: none;
}

.chart-secondary-pane > header {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border-bottom: 1px solid #263137;
    background: #10171b;
}

.chart-secondary-pane > header div {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 10px;
}

.chart-secondary-pane > header strong {
    color: #eef4f6;
    font-size: 13px;
}

.chart-secondary-pane > header span {
    color: #8798a2;
    font-size: 11px;
}

.chart-secondary-pane > header button {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid #3a464e;
    border-radius: 5px;
    color: #c9d2d6;
    background: #161d21;
    cursor: pointer;
}

.chart-secondary-pane iframe {
    display: block;
    width: 100%;
    height: var(--chart-secondary-frame-height, clamp(620px, 72vh, 780px));
    border: 0;
    background: #0d0f11;
    transition: height 160ms ease-out;
}

.chart-primary-pane {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.chart-primary-pane > .wts-chart {
    height: 100%;
}

.chart-workspace.is-vertical-split > .chart-primary-pane {
    flex: 0 0 auto;
    min-height: 620px;
    height: auto;
    overflow: visible;
    border-bottom: 1px solid #344149;
}

.chart-workspace.is-vertical-split > .chart-primary-pane > #wtsChart {
    flex: none;
    min-height: 620px;
    height: auto;
}

.market-workspace.has-chart-split .chart-panel {
    min-height: 0;
    overflow: visible;
}

.market-workspace.has-chart-split .stock-overview {
    position: relative;
    top: auto;
}

.market-workspace.has-chart-split {
    height: auto;
    min-height: calc(100vh - 72px);
    overflow: visible;
    align-items: start;
}

/* The entire column must contribute its content height to the grid. Individual
   quote/news lists keep their own scrolling, including the final row. */
.market-workspace.has-chart-split .stock-side-panel:not(.is-mobile-open),
.market-workspace:has(.chart-workspace.is-vertical-split) .stock-side-panel:not(.is-mobile-open) {
    align-self: start;
    position: static;
    top: auto;
    height: auto;
    max-height: none;
    overflow: visible;
}

/* The split state is persisted before the page paints. Keep the document in
   normal flow even if an older cached controller has not restored the helper
   class on .market-workspace yet. */
.market-workspace:has(.chart-workspace.is-vertical-split) {
    height: auto;
    min-height: calc(100vh - 72px);
    overflow: visible;
    align-items: start;
}

.market-workspace:has(.chart-workspace.is-vertical-split) .chart-panel {
    min-height: 0;
    overflow: visible;
}

.market-workspace:has(.chart-workspace.is-vertical-split) .stock-overview {
    position: relative;
    top: auto;
}

.market-workspace:has(.chart-workspace.is-vertical-split) .chart-workspace {
    flex: none;
    height: auto;
    min-height: 0;
    overflow: visible;
}

.market-workspace.has-chart-split .chart-workspace {
    flex: none;
    height: auto;
    min-height: 0;
    overflow: visible;
}

.chart-pane-page {
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    background: #0d0f11;
}

.chart-pane-shell {
    min-width: 0;
    min-height: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chart-pane-shell .chart-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    flex: 0 0 auto;
    background: #101518;
}

.chart-pane-shell .chart-layout-switch {
    display: none;
}

.chart-pane-shell .wts-chart {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
}

.chart-pane-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #263137;
    color: #9db0b8;
    background: #0f171a;
    font-size: 11px;
}

.chart-pane-note strong {
    color: #69ded1;
}

.chart-pane-page.is-theme-chart .chart-indicator-row.is-theme-disabled {
    border-radius: 5px;
    cursor: help;
}

.chart-pane-page.is-theme-chart .chart-indicator-row.is-theme-disabled > button {
    pointer-events: none;
}

.chart-pane-page.is-theme-chart .chart-indicator-row.is-theme-disabled:focus-visible {
    outline: 2px solid #55cfc3;
    outline-offset: 1px;
}

.chart-pane-page.is-theme-chart .chart-venue-switch,
.chart-pane-page.is-theme-chart [data-chart-resolution="1"],
.chart-pane-page.is-theme-chart [data-chart-resolution="3"],
.chart-pane-page.is-theme-chart [data-chart-resolution="5"],
.chart-pane-page.is-theme-chart [data-chart-resolution="10"],
.chart-pane-page.is-theme-chart [data-chart-resolution="15"],
.chart-pane-page.is-theme-chart [data-chart-resolution="30"],
.chart-pane-page.is-theme-chart [data-chart-resolution="60"],
.chart-pane-page.is-theme-chart [data-chart-resolution="120"],
.chart-pane-page.is-theme-chart [data-chart-resolution="240"],
.chart-pane-page.is-theme-chart .chart-resolution-panel fieldset:nth-of-type(1),
.chart-pane-page.is-theme-chart .chart-resolution-panel fieldset:nth-of-type(2) {
    display: none;
}

.theme-common-chart-frame {
    width: 100%;
    height: clamp(620px, 78vh, 880px);
    margin-top: 14px;
    border: 1px solid #29343a;
    border-radius: 6px;
    background: #0b1013;
}

.theme-common-chart-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    background: #0d0f11;
}

.theme-common-chart-description {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 14px;
    color: #9babb3;
    font-size: 12px;
}

.theme-common-chart-description strong {
    color: #72e0d5;
}

@media (max-width: 1180px) {
    .chart-toolbar {
        flex-wrap: wrap;
    }

    .chart-layout-switch {
        order: 2;
    }
}

@media (max-width: 720px) {
    .chart-layout-switch legend {
        display: none;
    }

    .chart-layout-switch button {
        padding-inline: 7px;
        font-size: 11px;
    }

    .chart-workspace.is-vertical-split > .chart-primary-pane {
        min-height: 560px;
        height: auto;
    }

    .chart-secondary-pane iframe {
        height: 560px;
    }

    .chart-pane-shell .wts-chart { min-height: 0; }

    .theme-common-chart-frame {
        height: 620px;
    }
}