/**
 * HedgerPro shared page frame.
 *
 * Global layout chrome for standalone (non-WordPress) pages such as /reports/
 * and /help/. Provides the body backdrop plus a centred surface column with the
 * shared external header pinned to the top. Pair it with lib/external-header.js.
 *
 * Include it BEFORE the page's own stylesheet, e.g.:
 *   <link rel="stylesheet" href="/lib/page-frame.css" />
 *   <link rel="stylesheet" href="./css/style.css" />
 *
 * Tunable per page via CSS custom properties (set them in :root of the page's
 * own stylesheet, or inline before this loads):
 *   --hp-frame-bg         backdrop behind the column        (default slate)
 *   --hp-frame-surface    the column's background           (default white)
 *   --hp-frame-max-width  centred column max width          (default 100%)
 *   --hp-frame-border     left/right column border          (default none)
 *
 * Layout modes for the .hp-page wrapper:
 *   .hp-page              grows with content; the page scrolls naturally
 *                         (document-flow pages like /help/).
 *   .hp-page.hp-page--fixed
 *                         fills the viewport; children scroll internally
 *                         (app shells like /reports/).
 */

:root {
    --hp-frame-bg: #3e4a5e;
    --hp-frame-surface: #ffffff;
    --hp-frame-max-width: 100%;
    --hp-frame-border: 0 solid #d4d4d4;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background: var(--hp-frame-bg);
}

.hp-page {
    width: 100%;
    max-width: var(--hp-frame-max-width);
    min-height: 100%;
    margin: 0 auto;
    background: var(--hp-frame-surface);
    border-left: var(--hp-frame-border);
    border-right: var(--hp-frame-border);
    display: flex;
    flex-direction: column;
}

/* The shared external header must never shrink. */
.hp-page > #hp-ext-header {
    flex: 0 0 auto;
}

/* App-shell mode: pin to the viewport so inner panes scroll instead of the page. */
.hp-page.hp-page--fixed {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}