/**
 * Standalone (non-WordPress) /tix/ layout, layered on top of the shared frame in
 * lib/page-frame.css. The frame gives us the slate backdrop, a centred max-width
 * column with grey side borders, the pinned header, and the fixed
 * (viewport-height, internal-scroll) app-shell mode via .hp-page--fixed.
 * Here we only tune the frame variables and the app scroll behaviour.
 */

:root {
    --hp-frame-bg: #3e4a5e;
    --hp-frame-surface: #fff;
    --hp-frame-max-width: 1500px;
    --hp-frame-border: 3px solid #d4d4d4;
}

/*
 * The static bootstrap injects template.html into this wrapper. display:contents
 * removes the wrapper from the box tree so its child (#app) stays a direct flex
 * item of .hp-page and the scrolling layout below keeps working.
 */
.hp-page #hp-tix-mount {
    display: contents;
}

/*
 * The app fills the remaining height under the pinned header and lays its content
 * out as a column; its inner panes (.tix-list-compact, .tix-tab-content,
 * .tix-qualifiers-table-container) scroll internally. This replaces the WP-theme
 * flex rule the plugin relied on. min-height:0 is essential so this flex item can
 * shrink below its content and scroll instead of pushing the page taller.
 */
.hp-page #app {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}