/**
 * Main CSS - Basic styles template
 * 
 * Project-agnostic shell layout, reset, and chrome sizing tokens (typography → `text.css`).
 * Theme variables are in `base.css` (same folder; load order in `app.html`: base → main → text.css → btns.css)
 * Component-specific styles should be in component stylesheets.
 */

/**//**//**//**//**//**//**//**//**/

/* basic reset */

:root {
    /* Chrome heights: defined in base.css too; keep values identical. */
    /* Must match .title-bar height and windowTitleBar.svelte HOVER_ZONE_HEIGHT */
    --title-bar-height: 24px;
    /* Must match .status-bar height and statusBar.svelte STATUS_HOVER_ZONE_HEIGHT */
    --status-bar-height: 20px;
    /* Keep in sync with chrome slide transitions (title-bar.css, status-bar.css) */
    --title-bar-slide-duration: 0.2s;
    --title-bar-slide-easing: ease-out;
    /* Shared timing for top + bottom chrome (content padding animates in lockstep) */
    --chrome-slide-duration: var(--title-bar-slide-duration);
    --chrome-slide-easing: var(--title-bar-slide-easing);
}

* {
    box-sizing: border-box;
}

/**//**//**//**//**//**//**//**//**/

/* app window */

/*
 * Root must not scroll: all scroll lives inside `main.app-content` descendants
 * (`.page-frame__body` or direct `.page-container`). Otherwise you get a viewport
 * scrollbar *and* an inner scrollbar (especially with `min-height: 100vh` in app.html).
 */
html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: background-color var(--animation-duration-fast), color var(--animation-duration-fast);
}

body,
.u-flex-row,
.page-section,
.inner-container,
.custom-container {
    width: 100%;
}

body,
.app-shell {
    height: 100%;
    min-height: 0;
}

body,
.app-content > .page-container::-webkit-scrollbar-track,
.page-frame--scroll-body > .page-frame__body::-webkit-scrollbar-track {
    background: var(--app-bg);
}

/**//**//**//**//**//**//**//**//**/

/* app shell layout */
/* Top/bottom chrome: fixed bars set --app-content-pad-top / --app-content-pad-bottom on documentElement
   so when a bar auto-hides (unlocked), padding animates to 0 in sync with the slide. */
.app-shell,
.page-section,
.u-flex-center,
.u-flex-row,
.page-container,
.inner-container {
    display: flex;
}

.app-shell,
.page-section,
.u-flex-row,
.page-container,
.inner-container {
    flex-direction: column;
}

.app-shell {
    overflow: hidden;
}

.app-content,
.page-container {
    flex: 1;
    min-height: 0;
}

.app-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: var(--app-content-pad-top, var(--title-bar-height));
    padding-bottom: var(--app-content-pad-bottom, 0);
    transition:
        padding-top var(--chrome-slide-duration) var(--chrome-slide-easing),
        padding-bottom var(--chrome-slide-duration) var(--chrome-slide-easing);
}

/*
 * Single scrollport: `main.app-content` does not scroll (avoids stacking with `.page-frame__body`).
 * - Pages with `page-frame--scroll-body`: sizing lives in `page-frame.css` (`flex` + `min-height: 0`);
 *   scroll inside `.page-frame__body`.
 * - Verify flows without a frame: `PageHeader` + direct child `.page-container` scrolls here.
 */
.app-content > header.dashboard-header {
    flex-shrink: 0;
}

.app-content > .page-container {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Themed scrollbars on primary scrollports (main no longer scrolls — see rules above). */
.app-content > .page-container::-webkit-scrollbar,
.page-frame--scroll-body > .page-frame__body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.app-content > .page-container::-webkit-scrollbar-thumb,
.page-frame--scroll-body > .page-frame__body::-webkit-scrollbar-thumb {
    background: var(--app-border);
    border-radius: 5px;
}
.app-content > .page-container::-webkit-scrollbar-thumb:hover,
.page-frame--scroll-body > .page-frame__body::-webkit-scrollbar-thumb:hover {
    background: var(--app-text-dim);
}

/**//**//**//**//**//**//**//**//**/

/*
 * Layout utilities — reusable one-liners (prefix `u-`).
 * Use on a wrapper when you need alignment without feature-specific CSS.
 */
.u-flex-center,
.u-flex-row,
.page-container {
    align-items: center;
}

.u-flex-center {
    justify-content: center;
}

/**
 * One section = heading + inner stack (`<p>` cushion + button row + panel).
 * Spacing *between* sections uses `.[some]-page-section + .[some]-page-section` only — do not
 * put `margin-top` on the inner block after the heading, or the h1 → `<p>` → button rhythm
 * no longer matches the first section.
 */

.page-container {
	padding: 0.75rem;
}

.page-section {
    max-width: min(100%, 42rem);
}

.page-section + .page-section {
    margin-top: 1.25rem;
}

.inner-container {
    gap: 0.75rem;
}

/*
 * Classes like `.inner-container` set `display: flex` and beat the UA `[hidden]` rule
 * (same specificity). Ensure hidden panels actually collapse.
 */
[hidden] {
    display: none !important;
}

/**//**//**//**//**//**//**//**//**/

/* ... not sure what this is for ... */

.flash {
	text-align: center;
	margin: 0 0 0.75rem 0;
}

.flash--err {
	color: #c45c4a;
}

/**//**//**//**//**//**//**//**//**/