/* Force desktop layout (top navigation) instead of mobile layout
   (bottom navigation) on narrow viewports, e.g. a vertical third
   of a 1800x1169 screen (~600px wide). */
@media (max-width: 1190px) {
    .header-container {
        display: block;
    }

    .mobile-navigation,
    .mobile-navigation-offset {
        display: none;
    }

    .page-column {
        display: block;
    }

    .expand-toggle-button.container-expanded {
        bottom: -1px;
    }
}

/* Markets widget: hide the ticker symbol, show only the name */
.widget-type-markets .color-highlight.size-h3.block.text-truncate {
    display: none;
}

.widget-type-markets .min-width-0 > div.text-truncate {
    color: var(--color-text-highlight);
    font-size: var(--font-size-h3);
}

/* Markets widget: glance's default 3-column breakpoint only kicks in at a
   container width of 850px, which on a half-width 1800px display (~900px
   browser width) resolves to ~834px after subtracting page/widget padding
   and border - just under the threshold, forcing an unwanted 2-column
   layout. Lower the 3-column threshold so 3x3 stays the default down to
   that width, only dropping to 2x5 on narrower windows. */
@container widget (min-width: 700px) and (max-width: 849px) {
    .widget-type-markets .dynamic-columns:has(> :nth-child(3)) {
        --columns-per-row: 3;
    }

    .widget-type-markets .dynamic-columns > * {
        border-left: 1px solid var(--color-separator);
        padding-left: var(--widget-content-horizontal-padding);
    }

    .widget-type-markets .dynamic-columns > :nth-child(3n+1) {
        border-left: none;
        padding-left: 0;
    }
}