/**
 * Main CSS — shell layout, reset, layout utilities.
 * Ported from user-account `static/styles/main.css`. TrainersMap pages still scroll;
 * the status bar is fixed and reserves `--app-content-pad-bottom` (nginx_template chrome).
 * Theme variables are in `base.css` (load order in `app.html`: base → main → text → btns).
 */

:root {
	/* Must match .status-bar height and statusBar.svelte STATUS_HOVER_ZONE_HEIGHT */
	--status-bar-height: 20px;
	/* Toolbar bar height. The inbox account bar and both discover bars (results, map, filters) read this. */
	--chrome-bar-height: 26px;
	/* Must match the reserved gutter on a `scrollbar-gutter: stable` scrollport. */
	--scrollbar-width: 16px;
	--status-bar-tray-inset: 16px;
	--status-bar-tray-radius: 10px;
	--chrome-slide-duration: 0.2s;
	--chrome-slide-easing: ease-out;
}

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

/* basic reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior: none;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    background: var(--app-bg);
    color: var(--app-text);
    overscroll-behavior: none;
}

/* Element resets live in `@layer base` so kit / Tailwind utilities (layer `utilities`) always win.
   Unlayered rules would outrank every utility regardless of source order. */
@layer base {
    img,
    svg,
    video {
        max-width: 100%;
        display: block;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
        color: inherit;
    }

    /* UA `ButtonFace` is a fixed light grey; ghost / link kit variants set no bg and would show it in dark. */
    button {
        cursor: pointer;
        background-color: transparent;
    }

    a {
        color: inherit;
    }

    /* Kit Button rendered as <a href>: no UA underline (Preflight is off). */
    a[data-slot='button'] {
        text-decoration: none;
    }

    /* Chrome/Safari autofill paints a yellow/white inset. Cover it with the field token so dark stays dark. */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--app-text);
        caret-color: var(--app-text);
        box-shadow: 0 0 0 1000px var(--app-surface) inset;
        transition: background-color 99999s ease-out 0s;
    }
}

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

/* app shell layout */

.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;
}

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

.app-shell {
    min-height: 100vh;
    min-height: 100dvh;
}

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

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

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

/* Layout utilities (prefix `u-`) */

.u-flex-center,
.u-flex-row,
.page-container {
    align-items: center;
}

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

.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;
}

/* Flex wrappers beat the UA `[hidden]` rule at equal specificity; make hidden panels collapse. */
[hidden] {
    display: none !important;
}

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

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

.flash--err {
    color: var(--app-error);
}

.app-spinner {
    flex-shrink: 0;
    color: var(--app-text-dim);
    animation: app-spin var(--animation-duration-slow) linear infinite;
}

@keyframes app-spin {
    to {
        transform: rotate(360deg);
    }
}