.container {
    width: min(var(--container-max), 100% - 2 * var(--space-4));
    margin-inline: auto;
}

.container--narrow {
    width: min(var(--container-narrow), 100% - 2 * var(--space-4));
}

.brand {
    display: inline-flex;
    flex: none;
    min-width: 0; /* lets a long name give way instead of pushing the page wider than the screen */
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.brand:hover {
    color: var(--color-text);
}

/* The product name, set in the configured brand font. Every value comes from the variables in /brand.css
   (APP_BRAND_FONT is the only place the choice is made). */
.brand-name {
    font-family: var(--font-brand, var(--font-sans));
    font-style: var(--font-brand-style, normal);
    font-weight: var(--font-brand-weight, var(--weight-semibold));
    letter-spacing: var(--font-brand-tracking, 0);
    font-size: calc(1em * var(--font-brand-scale, 1)); /* evens out how big different typefaces look */
}

.brand .brand-name {
    --brand-size: 1.25rem;
    font-size: calc(var(--brand-size) * var(--font-brand-scale, 1));
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The smallest phones: the brand name keeps the room; the page itself offers the same sign-in / dashboard buttons. */
@media (max-width: 21rem) {
    .btn.site-header__cta {
        display: none;
    }
}

@media (max-width: 22.5rem) {
    .brand .brand-name {
        --brand-size: 1.1rem;
    }
}

.brand__video {
    display: block;
    flex: none;
    max-width: none;
    width: auto;
    height: 2.125rem;
}

.site-footer .brand__video {
    height: 1.75rem;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 3.5rem;
}

.site-header__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.site-nav {
    display: flex;
    gap: var(--space-1);
    margin-left: var(--space-5);
}

.site-nav a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.site-nav a:hover {
    background: var(--color-surface-sunken);
    color: var(--color-text);
}

@media (max-width: 47.99rem) {
    .site-nav {
        display: none;
    }
}

@media (max-width: 29.99rem) {
    .btn.site-header__get-started {
        display: none;
    }

    .site-header__inner {
        gap: var(--space-2);
    }

    .site-header__actions {
        gap: var(--space-1);
    }

    .site-header .brand__video {
        height: 1.75rem;
    }
}

@media (max-width: 22.5rem) {
    .btn.site-header__signin {
        display: none;
    }
}

.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    padding-block: var(--space-5);
    padding-bottom: calc(var(--space-5) + var(--safe-bottom));
    font-size: var(--text-sm);
}

.site-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
}

.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.site-footer a:not(.brand) {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.site-footer a:not(.brand):hover {
    color: var(--color-primary-text);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

@media (max-width: 40rem) {
    .site-footer__row,
    .site-footer__legal {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Signed-in pages: a quiet line under the content. */
.app-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-3) var(--space-6) calc(var(--space-3) + var(--safe-bottom));
    border-top: 1px solid var(--color-border);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.app-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
}

.app-footer__brand .brand__video {
    height: 1.25rem;
}

.app-footer__links,
.site-footer__nav--legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
}

.app-footer__links a,
.site-footer__nav--legal a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.app-footer__links a:hover,
.site-footer__nav--legal a:hover {
    color: var(--color-text);
    text-decoration: underline;
}

@media (max-width: 47.99rem) {
    .app-footer {
        padding-inline: var(--space-4);
    }
}

/* Signed-in application shell: a thin top bar (brand, theme, profile) over a sidebar and the page. */

.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--header-height);
    padding-inline: var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.topbar__spacer {
    flex: 1;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Drawer / rail controls: the phone drawer opens from `menu`, the desktop rail folds from `collapse`.
   `.btn` is declared later, so these need the extra specificity. */
.btn.topbar__menu {
    display: none;
}

.btn.topbar__collapse {
    display: inline-flex;
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: calc(100dvh - var(--header-height));
    transition: grid-template-columns var(--transition-base);
}

.sidebar {
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: calc(100dvh - var(--header-height));
    padding: var(--space-2);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar__nav {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar__label {
    padding: var(--space-3) var(--space-2) var(--space-1);
    color: var(--color-text-subtle);
    font-size: 0.65rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--control-md);
    padding: var(--space-1) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-item:hover {
    background: var(--color-surface-sunken);
    color: var(--color-text);
}

.nav-item[aria-current="page"] {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-weight: var(--weight-semibold);
}

.nav-item--danger {
    color: var(--color-danger);
}

.nav-item--danger:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.nav-item__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__footer {
    display: grid;
    gap: 2px;
    margin-top: auto;
    padding-top: var(--space-2);
    padding-bottom: var(--safe-bottom);
    border-top: 1px solid var(--color-border);
}

/* Tablet and desktop: the sidebar can fold down to an icon rail. The choice is stored by core/nav-drawer.js
   and applied before first paint by theme-init.js (html[data-sidebar]); phones keep the drawer. */
@media (min-width: 48rem) {
    html[data-sidebar="collapsed"] {
        --sidebar-width: var(--sidebar-rail);
    }

    html[data-sidebar="collapsed"] .sidebar {
        overflow: visible; /* tooltips sit beside the rail */
    }

    html[data-sidebar="collapsed"] .nav-item {
        justify-content: center;
        gap: 0;
        padding-inline: 0;
    }

    html[data-sidebar="collapsed"] .sidebar__label {
        display: none;
    }

    /* Hidden visually but still the control's accessible name. */
    html[data-sidebar="collapsed"] .nav-item__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    html[data-sidebar="collapsed"] .sidebar [data-tooltip]::after {
        top: 50%;
        left: calc(100% + var(--space-3));
        transform: translateY(-50%);
    }

    html[data-sidebar="collapsed"] .topbar__collapse .icon {
        transform: scaleX(-1);
    }
}

.app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-content {
    flex: 1;
    display: grid;
    gap: var(--space-5);
    align-content: start;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-5) var(--space-6) calc(var(--space-6) + var(--safe-bottom));
}

/* Page header: title and subtitle on the left, the page's own actions on the right. */
.app-content--narrow {
    max-width: var(--content-narrow);
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.page-head__text {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.page-head__title {
    margin: 0;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.page-head__subtitle {
    max-width: 44rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.page-head__subtitle:empty {
    display: none;
}

.page-head__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
}

.drawer-backdrop {
    display: none;
}

@media (max-width: 47.99rem) {
    .app-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .btn.topbar__menu {
        display: inline-flex;
    }

    .btn.topbar__collapse {
        display: none;
    }

    /* The drawer opens under the top bar (which stays reachable to close it) and scrolls as a whole on short screens. */
    .sidebar {
        position: fixed;
        inset: var(--header-height) auto 0 0;
        width: min(var(--sidebar-width), 86vw);
        height: auto;
        padding-bottom: calc(var(--space-2) + var(--safe-bottom));
        box-shadow: var(--shadow-lg);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--transition-base), visibility 0s linear var(--transition-base);
    }

    .sidebar[data-open] {
        transform: none;
        visibility: visible;
        transition: transform var(--transition-base);
    }

    .sidebar__footer {
        padding-bottom: 0;
    }

    .app-content {
        padding: var(--space-4) var(--space-4) calc(var(--space-5) + var(--safe-bottom));
        gap: var(--space-4);
    }

    .drawer-backdrop {
        position: fixed;
        inset: var(--header-height) 0 0;
        z-index: calc(var(--z-sidebar) - 1);
        background: var(--color-overlay);
    }

    .drawer-backdrop[data-open] {
        display: block;
    }

    body[data-drawer-open] {
        overflow: hidden;
    }
}

/* On phones a labelled action becomes an icon button, so the page title keeps its room. */
@media (max-width: 36rem) {
    .page-head__actions .btn:has(.btn__label) {
        width: var(--control-md);
        padding-inline: 0;
    }

    .page-head__actions .btn__label {
        display: none;
    }
}

@media (max-width: 22.5rem) {
    .topbar {
        gap: var(--space-2);
        padding-inline: var(--space-3);
    }

    .topbar__actions {
        gap: var(--space-1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .app-shell {
        transition: none;
    }
}

.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
}

.grid-auto {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.grid-two {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    align-items: start;
}

/* Loading screen shown while signing out and returning to the landing page. It uses the app's own theme tokens,
   so it is always in the theme the user has selected (set before first paint by theme-init.js). */

.page-transition {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    place-content: center;
    background: var(--color-bg);
    color: var(--color-text);
    animation: splash-in 280ms ease-out backwards;
}

.page-transition.is-leaving {
    opacity: 0;
    transition: opacity 520ms ease;
}

/* The next page asks for the overlay before first paint (theme-init.js), so there is no flash of content. */
html[data-arrival] .page-transition[hidden] {
    display: grid !important;
    animation: splash-failsafe 0s linear 4s forwards;
}

.splash {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    width: min(28rem, 100vw - 2 * var(--space-5));
    text-align: center;
}

.splash__mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 6rem;
    height: 6rem;
    margin-bottom: var(--space-3);
}

.splash__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    fill: none;
    stroke-width: 2.5;
}

.splash__track {
    stroke: var(--color-border);
}

.splash__arc {
    stroke: var(--color-primary);
    stroke-linecap: round;
    stroke-dasharray: 276.5;
    stroke-dashoffset: 276.5;
    animation: splash-arc var(--splash-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.splash__logo {
    width: 5.25rem;
    height: auto;
    animation: splash-breathe 2.4s ease-in-out infinite;
}

.splash__name {
    margin: 0;
    font-size: calc(var(--text-xl) * var(--font-brand-scale, 1));
}

.splash__message {
    min-height: 1.25rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.splash__progress {
    width: 100%;
    height: 3px;
    margin-top: var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-border);
    overflow: hidden;
}

.splash__bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
    transform-origin: left;
    animation: splash-bar var(--splash-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

html[data-arrival] .splash__arc {
    animation: none;
    stroke-dashoffset: 0;
}

html[data-arrival] .splash__bar {
    animation: none;
}

@keyframes splash-in {
    from { opacity: 0; }
}

@keyframes splash-arc {
    to { stroke-dashoffset: 0; }
}

@keyframes splash-bar {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes splash-breathe {
    50% { opacity: 0.72; transform: scale(0.96); }
}

@keyframes splash-failsafe {
    to { visibility: hidden; pointer-events: none; }
}