/* Standard page shell. EVERY page uses it (see ADR-006):
   header -> main (page title + actions + content) -> footer.
   Pages never build their own header, footer, <main> or <h1>; base.html does. */

body.site { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.container { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--space-3); }
@media (min-width: 48rem) { .container { padding-inline: var(--space-6); } }

.skip-link { position: absolute; left: var(--space-2); top: -3rem; z-index: 30; padding: var(--space-2) var(--space-4); background: var(--color-surface); border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--space-2); }

/* --- Header -------------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 10; flex: none; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); min-height: var(--header-h); }
.site-header__brand { font-weight: 700; color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.site-header__nav { display: flex; gap: var(--space-1); order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-3) * -1); padding-inline: var(--space-3); }
.site-header__nav::-webkit-scrollbar { display: none; }
.site-header__nav a { padding: var(--space-2) var(--space-3); color: var(--color-text-muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.site-header__nav a:hover { color: var(--color-text); }
.site-header__nav a[aria-current="page"] { color: var(--color-primary); font-weight: 600; border-bottom-color: var(--color-primary); }
.site-header__user { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; font-size: var(--text-sm); }
.site-header__user a { color: var(--color-text); text-decoration: none; }
.site-header__user a:hover { color: var(--color-primary); }
.site-header__user form { margin: 0; }
@media (min-width: 48rem) {
  .site-header__nav { order: 0; flex: 1 1 auto; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .site-header__nav a { padding-block: 0; line-height: calc(var(--header-h) - 2px); }
}

/* --- Main: the same title block on every page --------------------------------------------- */
.site-main { flex: 1 0 auto; width: 100%; padding-block: var(--space-4) var(--space-8); }
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.page-header__title { margin: 0; font-size: var(--text-xl); }
.page-header__subtitle { margin: var(--space-1) 0 0; }
.page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.page-header__actions:empty { display: none; }

/* --- Footer -------------------------------------------------------------------------------- */
.site-footer { flex: none; padding-block: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); background: var(--color-surface); border-top: 1px solid var(--color-border); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); }
@media (max-width: 63.99rem) { body:has(.pos__bar:not([hidden])) .site-footer { margin-bottom: 4.5rem; } }

/* --- Toasts (flash messages and window.toast) ---------------------------------------------- */
.toasts { position: fixed; top: calc(var(--header-h) + var(--space-2)); right: var(--space-3); left: var(--space-3); z-index: 20; display: grid; gap: var(--space-2); margin-left: auto; max-width: 26rem; pointer-events: none; }
.toasts .alert { margin: 0; pointer-events: auto; box-shadow: var(--shadow-md); animation: toast-in 0.18s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-0.5rem); } }