@media(min-width:1500px) {
    #depth-chart {
        height:360px;
    }
}

@media(max-width:1150px) {
    .workspace {
        padding-inline:26px;
    }
    #main-content-grid {
        grid-template-columns:306px minmax(0,1fr);
        gap:18px;
    }
    .control-section {
        padding-inline:19px;
    }
    .local-status,.brand-descriptor,.brand-divider {
        display:none;
    }
    .metrics-grid {
        grid-template-columns:1fr 1fr;
        gap:20px 24px;
    }
    .metric strong {
        font-size:23px;
    }
    .metric:nth-child(n+3) {
        padding-top:16px;
        border-top:1px solid var(--color-border);
    }
    .chart-card {
        padding-inline:18px;
    }
    .chart-toolbar {
        align-items:flex-start;
    }
    .table-controls {
        flex-wrap:wrap;
        gap:0 15px;
        padding-bottom:8px;
    }
    .table-heading {
        padding-inline:18px;
    }
    .table-heading h2 {
        font-size:12px;
    }
}

@media(max-width:850px) {
    .mobile-jump-nav {
        display:flex;
        position:sticky;
        top:0;
        z-index:35;
        gap:4px;
        padding:7px 0;
        margin-bottom:12px;
        background:var(--color-bg);
        border-bottom:1px solid var(--color-border);
    }
    .mobile-jump-nav a {
        flex:1;
        min-height:38px;
        display:grid;
        place-items:center;
        border-radius:5px;
        color:var(--color-text-secondary);
        font-size:11px;
        font-weight:650;
        text-decoration:none;
    }
    .mobile-jump-nav a:hover {
        background:var(--color-card-muted);
        color:var(--color-primary);
    }
    #config-column,#graph-column,#chart-summary-overlay,#depth-chart-card,#data-tables-card {
        scroll-margin-top:68px;
    }
    .workspace {
        padding-inline:20px;
    }
    .workspace-header {
        min-height:76px;
    }
    #main-content-grid {
        grid-template-columns:1fr;
    }
    #trading-plan-form {
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .strategy-section {
        grid-column:1;
    }
    #price-range-details {
        grid-column:2;
        grid-row:1/3;
        border-left:1px solid var(--color-border);
    }
    #allocation-details {
        grid-column:1;
    }
    .fees-section,.settings-footnote {
        grid-column:1/-1;
    }
    .metrics-grid {
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
    .metric:nth-child(n+3) {
        border:0;
        padding-top:0;
    }
    .metric strong {
        font-size:22px;
    }
    .table-controls {
        flex-wrap:nowrap;
        padding-bottom:0;
    }
    #depth-chart {
        height:330px;
    }
}

@media(max-width:560px) {
    .helper-tooltip-popup {
        position:fixed;
        left:16px;
        right:16px;
        top:auto;
        bottom:24px;
        width:auto;
        max-width:none;
    }
    .workspace {
        padding-inline:14px;
    }
    .workspace-header {
        min-height:72px;
        gap:10px;
    }
    .wordmark {
        font-size:18px;
        gap:6px;
    }
    .brand-symbol {
        width:25px;
    }
    .brand-symbol svg {
        width:23px;
    }
    .header-actions {
        gap:4px;
        position:relative;
    }
    .toolbar-button {
        min-height:40px;
        padding:8px 10px;
    }
    .guide-button {
        padding:8px;
    }
    .guide-button span,.save-button>svg:first-child {
        display:none;
    }
    .save-button {
        font-size:10px;
        gap:5px;
    }
    .save-button svg:last-child {
        width:10px;
    }
    .icon-button {
        width:32px;
        padding:7px;
        border-color:transparent;
    }
    .menu-anchor {
        position:static;
    }
    .workspace-menu {
        right:0;
        max-width:calc(100vw - 28px);
    }
    .page-heading {
        padding:27px 2px 24px;
    }
    h1 {
        font-size:29px;
        letter-spacing:-1.1px;
    }
    .page-description {
        max-width:32ch;
        line-height:1.6;
        font-size:12px;
    }
    .eyebrow {
        font-size:9px;
        letter-spacing:1.5px;
    }
    #main-content-grid {
        gap:17px;
    }
    #trading-plan-form {
        display:block;
    }
    #price-range-details {
        border-left:0;
    }
    .control-section {
        padding:20px;
    }
    .section-heading {
        margin-bottom:16px;
    }
    .mode-dropdown-option {
        min-height:40px;
        font-size:11px;
    }
    .capital-fields {
        gap:16px 14px;
    }
    .form-input {
        font-size:16px;
        min-height:44px;
    }
    .compact-input {
        min-height:36px;
        font-size:13px;
    }
    .helper-tooltip {
        width:28px;
        height:28px;
        flex-basis:28px;
    }
    .field label {
        font-size:11px;
    }
    .segmented-control button {
        min-height:36px;
    }
    .input-helper-text,.range-endpoints,.settings-footnote {
        font-size:10px;
    }
    .plan-overview {
        padding:20px;
    }
    .metrics-grid {
        grid-template-columns:1fr 1fr;
        gap:20px;
    }
    .metric:nth-child(n+3) {
        border-top:1px solid var(--color-border);
        padding-top:16px;
    }
    .metric strong {
        font-size:24px;
    }
    .overview-heading {
        margin-bottom:20px;
    }
    .profit-strip {
        gap:15px;
    }
    .profit-strip>div {
        gap:8px;
    }
    .chart-card {
        padding:20px 15px 0;
    }
    .chart-unit {
        width:132px;
    }
    .chart-unit button {
        min-height:30px;
        padding-inline:7px;
    }
    .chart-toolbar {
        gap:12px;
        margin-top:18px;
    }
    .chart-legend {
        gap:10px;
    }
    .chart-display-options {
        margin-left:auto;
        gap:10px;
        font-size:9px;
    }
    #mid-price-label {
        display:none;
    }
    #depth-chart {
        height:300px;
    }
    #depth-chart text {
        font-size:9px;
    }
    .chart-footnote {
        font-size:9px;
        line-height:1.6;
    }
    .table-heading {
        padding:16px;
        gap:8px;
    }
    .table-heading h2 {
        max-width:16ch;
        font-size:13px;
    }
    .export-button {
        min-height:36px;
        padding:7px;
        font-size:9px;
        gap:4px;
    }
    .table-controls {
        padding-inline:16px;
        flex-wrap:wrap;
        padding-bottom:9px;
        gap:4px 20px;
    }
    .table-options {
        gap:16px;
    }
    .table-options .compact-input {
        min-height:28px;
        font-size:11px;
    }
    th,td {
        padding-inline:12px!important;
    }
    th:first-child,td:first-child {
        padding-left:16px!important;
    }
    .table-help {
        padding-inline:16px;
        font-size:10px;
    }
    .copy-value {
        min-height:32px;
    }
    .workspace-footer {
        flex-direction:column;
        gap:5px;
        padding:22px 3px 28px;
        font-size:9px;
    }
}

@media(max-width:360px) {
    .workspace {
        padding-inline:10px;
    }
    .wordmark {
        font-size:17px;
    }
    .header-actions {
        gap:1px;
    }
    .guide-button {
        padding-inline:6px;
    }
    .save-button {
        padding-inline:7px;
    }
    .icon-button {
        width:27px;
    }
    .control-section {
        padding-inline:16px;
    }
    .metrics-grid {
        gap:16px;
    }
    .metric strong {
        font-size:21px;
    }
    .plan-overview {
        padding-inline:16px;
    }
    .chart-card {
        padding-inline:11px;
    }
    .table-heading h2 {
        font-size:12px;
    }
}