/* OL-UI-000062 — mobile-first layout foundation */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: max(var(--sp-4), env(safe-area-inset-left));
  padding-right: max(var(--sp-4), env(safe-area-inset-right));
}
.shell-narrow { max-width: 720px; }
.shell-wide { max-width: 1420px; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.row-between { justify-content: space-between; }
.row-wrap { flex-wrap: wrap; }
.row-top { align-items: flex-start; }
.spacer { flex: 1 1 auto; min-width: 0; }
.grid { display: grid; gap: var(--sp-4); min-width: 0; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
.grid > *, .row > *, .admin-main, .admin-body, main { min-width: 0; }

/* Canonical breakpoints: 480 / 768 / 1024 / 1280 / 1536. */
@media (min-width: 480px) {
  .shell { padding-inline: max(var(--sp-5), env(safe-area-inset-left)); padding-right: max(var(--sp-5), env(safe-area-inset-right)); }
}
@media (min-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .shell { padding-inline: var(--sp-6); }
}

/* Safe-area foundation for fixed/sticky chrome. */
.site-header, .admin-bar { padding-top: max(var(--sp-3), env(safe-area-inset-top)); }
.sidebar, .public-drawer { padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom)); }


/* ═══════════════════════════════════════════════════════════════
   OL-UI-000071 — Responsive App Shell (1.0.15)
   Canonical shell behaviour layered after the legacy compatibility CSS.
   Mobile: off-canvas. Tablet: persistent icon rail + overlay expansion.
   Desktop: full sidebar with an optional persisted rail.
   ═══════════════════════════════════════════════════════════════ */
.admin-bar {
  min-height: var(--topbar-h);
  padding-inline: max(var(--sp-4), env(safe-area-inset-left)) max(var(--sp-4), env(safe-area-inset-right));
}
.admin-bar > h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-bar-actions { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.admin-bar-actions:empty { display: none; }
.sidebar-head-actions { display: inline-flex; align-items: center; gap: var(--sp-2); }
.sidebar-rail-toggle { display: none; }
.sidebar-close {
  padding: 0;
  border-radius: 999px;
  line-height: 0;
  align-items: center;
  justify-content: center;
}
.sidebar-close .icon { display: block; width: 20px; height: 20px; margin: 0; }

/* Public shell uses the canonical tablet breakpoint instead of the old 900px split. */
@media (max-width: 1023px) {
  .site-header .shell { padding-left: max(var(--sp-4), env(safe-area-inset-left)); padding-right: max(var(--sp-4), env(safe-area-inset-right)); }
  .public-menu-toggle { width: 46px; height: 46px; }
  .public-drawer { width: min(86vw, 320px); padding-left: max(var(--sp-4), env(safe-area-inset-left)); padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom)); }
}

/* Phone: clean off-canvas admin drawer. */
@media (max-width: 767px) {
  .admin { display: block; }
  .admin-bar { gap: var(--sp-2); padding-block: max(var(--sp-2), env(safe-area-inset-top)) var(--sp-2); }
  .admin-bar > h1 { font-size: var(--fs-lg); }
  .admin-menu-toggle { width: 46px; height: 46px; }
  .admin-body { padding: var(--sp-4); }
  .admin-bar-actions .btn { min-height: 44px; }
  .sidebar { width: min(86vw, 320px); padding-left: max(var(--sp-4), env(safe-area-inset-left)); }
}

/* Tablet: visible icon rail, expanded sidebar overlays content instead of pushing it. */
@media (min-width: 768px) and (max-width: 1279px) {
  .admin { grid-template-columns: var(--sidebar-w-rail) minmax(0, 1fr); }
  .admin-main { min-height: 100dvh; }
  .admin-menu-toggle {
    width: 46px; height: 46px; flex: none; display: inline-grid; place-items: center;
    border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-primary); box-shadow: var(--shadow-1); cursor: pointer;
  }
  .sidebar {
    position: sticky; inset: auto; top: 0; z-index: var(--z-nav); width: auto; height: 100dvh;
    transform: none; visibility: visible; box-shadow: none; padding: var(--sp-4) var(--sp-3); gap: var(--sp-4);
    background: var(--c-nav-bg); color: var(--c-nav-text); overflow-x: visible;
  }
  .sidebar-close { display: none; }
  .sidebar-backdrop {
    position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); display: block; border: 0; padding: 0;
    background: var(--c-overlay); opacity: 0; visibility: hidden; pointer-events: none; cursor: default;
    transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .admin:not(.is-menu-open) .sidebar .brand > span:last-child,
  .admin:not(.is-menu-open) .sidebar-section,
  .admin:not(.is-menu-open) .sidebar-foot,
  .admin:not(.is-menu-open) .side-nav a > span,
  .admin:not(.is-menu-open) .side-nav-group > summary > span { display: none; }
  .admin:not(.is-menu-open) .sidebar .brand-logo { max-width: 48px; width: 48px; height: 38px; object-fit: contain; }
  .admin:not(.is-menu-open) .sidebar-head { justify-content: center; }
  .admin:not(.is-menu-open) .sidebar-head-actions { display: none; }
  .admin:not(.is-menu-open) .side-nav a,
  .admin:not(.is-menu-open) .side-nav-group > summary { justify-content: center; min-height: 48px; padding: var(--sp-3); }
  .admin:not(.is-menu-open) .side-nav-children { display: none; }
  .admin.is-menu-open .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: var(--z-drawer); width: min(86vw, 320px);
    padding: var(--sp-5) var(--sp-4); overflow-y: auto; box-shadow: var(--shadow-3);
  }
  .ol-mode-dark .admin.is-menu-open .sidebar {
    --c-nav-bg: var(--c-drawer-bg);
    --c-nav-text: var(--c-drawer-text);
    --c-nav-text-muted: var(--c-drawer-text-muted);
    --c-nav-active-bg: var(--c-drawer-active-bg);
    background: var(--c-drawer-bg); color: var(--c-drawer-text);
    border-right: 1px solid var(--c-drawer-border);
  }
  .ol-mode-dark .admin.is-menu-open .sidebar .sidebar-section { color: var(--c-drawer-section); }
  .ol-mode-dark .admin.is-menu-open .sidebar .side-nav a,
  .ol-mode-dark .admin.is-menu-open .sidebar .side-nav-group > summary { color: var(--c-drawer-text-muted); }
  .ol-mode-dark .admin.is-menu-open .sidebar .side-nav a:hover,
  .ol-mode-dark .admin.is-menu-open .sidebar .side-nav-group > summary:hover,
  .ol-mode-dark .admin.is-menu-open .sidebar .side-nav-group > summary:focus-visible {
    background: var(--c-drawer-hover-bg); color: var(--c-drawer-hover-text);
  }
  .ol-mode-dark .admin.is-menu-open .sidebar .side-nav a.is-current,
  .ol-mode-dark .admin.is-menu-open .sidebar .side-nav-group > summary.is-current {
    background: var(--c-drawer-active-bg); color: var(--c-drawer-active-text);
  }
  .ol-mode-dark .admin.is-menu-open .sidebar .brand,
  .ol-mode-dark .admin.is-menu-open .sidebar .sidebar-foot { color: var(--c-drawer-text); }
  .ol-mode-dark .admin.is-menu-open .sidebar .sidebar-foot { border-top-color: var(--c-drawer-border); }
  .admin.is-menu-open .sidebar-close { display: inline-grid; }
  .admin.is-menu-open .sidebar-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
  body.admin-menu-open { overflow: hidden; }
  .admin-body { padding: var(--sp-5); }
}

/* Desktop: full sidebar with optional persisted icon rail. */
@media (min-width: 1280px) {
  .admin { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); transition: grid-template-columns var(--dur) var(--ease); }
  .sidebar { background: var(--c-nav-bg); color: var(--c-nav-text); }
  .sidebar-rail-toggle {
    width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid color-mix(in srgb, var(--c-nav-text) 18%, transparent);
    border-radius: var(--r-md); background: color-mix(in srgb, var(--c-nav-bg) 75%, var(--c-nav-active-bg)); color: var(--c-nav-text); cursor: pointer;
  }
  .sidebar-rail-toggle:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
  .admin.is-rail { grid-template-columns: var(--sidebar-w-rail) minmax(0, 1fr); }
  .admin.is-rail .sidebar { padding-inline: var(--sp-3); }
  .admin.is-rail .sidebar .brand > span:last-child,
  .admin.is-rail .sidebar-section,
  .admin.is-rail .sidebar-foot,
  .admin.is-rail .side-nav a > span,
  .admin.is-rail .side-nav-group > summary > span { display: none; }
  .admin.is-rail .sidebar .brand-logo { max-width: 48px; width: 48px; height: 38px; object-fit: contain; }
  .admin.is-rail .sidebar-head { flex-direction: column; justify-content: center; }
  .admin.is-rail .side-nav a,
  .admin.is-rail .side-nav-group > summary { justify-content: center; min-height: 48px; padding: var(--sp-3); }
  .admin.is-rail .side-nav-children { display: none; }
}

@media (max-width: 479px) {
  .admin-bar-actions .btn { padding-inline: .75rem; }
  .admin-bar { padding-inline: max(var(--sp-3), env(safe-area-inset-left)) max(var(--sp-3), env(safe-area-inset-right)); }
}

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

/* ═══════════════════════════════════════════════════════════════
   OL-UI-000086 — Header action containment (1.0.19)
   Dense page actions collapse behind a single accessible overflow
   button below desktop width so sticky chrome never overlaps.
   ═══════════════════════════════════════════════════════════════ */
.admin-bar { position: sticky; isolation: isolate; }
.admin-bar-title { flex: 0 1 auto; max-width: min(32rem, 44vw); }
.admin-actions-toggle {
  display: none;
  width: 46px;
  height: 46px;
  flex: none;
  place-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-primary);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}
.admin-actions-toggle:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

@media (max-width: 1279px) {
  .admin-bar-title { max-width: none; flex: 1 1 auto; }
  .admin-bar > .spacer { display: none; }
  .admin-actions-toggle { display: inline-grid; }
  .admin-bar-actions {
    position: absolute;
    z-index: var(--z-sheet);
    top: calc(100% - var(--sp-1));
    right: max(var(--sp-4), env(safe-area-inset-right));
    width: min(22rem, calc(100vw - 2 * var(--sp-4)));
    max-height: min(70dvh, 32rem);
    overflow: auto;
    display: none;
    align-items: stretch;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-3);
  }
  .admin-bar-actions.is-open { display: grid; }
  .admin-bar-actions .btn,
  .admin-bar-actions > a,
  .admin-bar-actions > button,
  .admin-bar-actions > form,
  .admin-bar-actions > form .btn { width: 100%; justify-content: flex-start; }
}

@media (max-width: 479px) {
  .admin-bar { gap: var(--sp-2); }
  .admin-bar-title { font-size: var(--fs-lg); }
  .admin-actions-toggle,
  .theme-toggle,
  .admin-menu-toggle { width: 44px; height: 44px; }
}