/* =========================================================
   Authenticated application shell
   One canonical desktop owner for the fixed topbar, workspace
   sidebar, and page offset across every signed-in Kinvella page.
   This file is loaded after page-specific styles to prevent route
   CSS from changing navigation positioning.
   ========================================================= */

:root {
  --kv-auth-content-narrow: var(--kv-content-utility, 64rem);
  --kv-auth-content-account: var(--kv-content-utility, 64rem);
  --kv-auth-content-standard: var(--kv-content-feature, 76rem);
  --kv-auth-content-wide: var(--kv-content-dense, 104rem);
  --kv-auth-content-gutter: var(--kv-page-gutter, clamp(0.75rem, 2.2vw, 1.5rem));
  --kv-page-back-inset: var(--kv-auth-content-gutter);
  --kv-parchment-strength: 0.64;
}
html:has(> body.authenticated-user),
body.authenticated-user,
body.authenticated-user > .page-shell {
  overflow-anchor: none;
}


/* The body owns the continuous parchment canvas, including workspace gutters. */
body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) > .page-shell {
  background: transparent;
}

body:is(.app-workspace-page, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) {
  --kv-page-layout-gap: clamp(1rem, 2vw, 1.5rem);
  --kv-page-start-space: clamp(1.25rem, 2.5vw, 2rem);
}

body:is(.app-workspace-page, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) > .page-shell {
  min-height: calc(100dvh - var(--auth-workspace-topbar-height, 4.5rem));
  box-sizing: border-box;
  padding-inline: 0;
}

body:is(.app-workspace-page, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .authenticated-page-frame {
  margin-block: 0;
}

body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .quick-page-content {
  box-sizing: border-box;
  gap: var(--kv-space-5, 1.5rem);
  padding-block: var(--kv-page-start-space, clamp(1rem, 2.2vw, 1.75rem)) var(--kv-space-7, 3rem);
}

/* Page navigation can extend beyond a narrow frame; feature stages own scrolling. */
body .quick-page-content:has(.app-page-heading) {
  overflow-x: visible !important;
}

body.authenticated-workspace :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--kv-focus-ring, #9b681f) 72%, white);
  outline-offset: 3px;
}

/* Pages choose a semantic width while sharing the same centering and gutters. */
body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .authenticated-page-frame {
  width: min(calc(100% - (2 * var(--kv-auth-content-gutter))), var(--kv-auth-content-standard));
  max-width: var(--kv-auth-content-standard);
  min-width: 0;
  margin-inline: auto;
  box-sizing: border-box;
}

body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .authenticated-page-frame--narrow {
  width: min(calc(100% - (2 * var(--kv-auth-content-gutter))), var(--kv-auth-content-narrow));
  max-width: var(--kv-auth-content-narrow);
}

body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .authenticated-page-frame--account {
  width: min(calc(100% - (2 * var(--kv-auth-content-gutter))), var(--kv-auth-content-account));
  max-width: var(--kv-auth-content-account);
}

body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .authenticated-page-frame--wide {
  width: min(calc(100% - (2 * var(--kv-auth-content-gutter))), var(--kv-auth-content-wide));
  max-width: var(--kv-auth-content-wide);
}

/* Shared public and authenticated page composition: unboxed introduction, one primary
   stage, then quieter supporting surfaces. */
body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .app-page-layout {
  display: grid;
  gap: var(--kv-page-layout-gap, var(--kv-space-5, 1.5rem));
  align-content: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .app-page-intro {
  display: grid;
  justify-items: center;
  gap: var(--kv-page-layout-gap, var(--kv-space-5, 1.5rem));
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .app-page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kv-space-2, 0.5rem);
}
body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .app-page-actions > :where(a, button) {
  min-height: 2.75rem;
}


body.authenticated-workspace .app-primary-stage {
  border: 1px solid var(--kv-border-strong, rgba(146, 98, 36, 0.36));
  border-radius: var(--radius-xl, 22px);
  background: var(--kv-surface-primary, rgba(255, 251, 244, 0.96));
  box-shadow: var(--kv-shadow-stage, 0 18px 40px rgba(62, 38, 19, 0.1));
  overflow: var(--kv-primary-stage-overflow, clip);
}

body.authenticated-workspace .app-component-surface {
  border: 1px solid var(--kv-border-subtle, rgba(123, 84, 42, 0.18));
  border-radius: var(--radius-lg, 18px);
  background: var(--kv-surface-secondary, rgba(255, 252, 247, 0.84));
  box-shadow: var(--kv-shadow-card, 0 8px 20px rgba(62, 38, 19, 0.07));
}

body.authenticated-workspace .app-divided-panel > * + * {
  border-top: 1px solid var(--kv-border-subtle, rgba(123, 84, 42, 0.18));
}

body.authenticated-workspace .app-divided-panel > * {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.authenticated-workspace .account-resource-list.app-divided-panel {
  gap: 0;
  padding: 0;
}


body.authenticated-workspace .app-empty-state {
  padding: var(--kv-space-5, 1.5rem);
  color: var(--kv-text-secondary, #6f5d4f);
  text-align: center;
}

@media (max-width: 720px) {
  :root {
    --kv-auth-content-gutter: clamp(0.5rem, 2.5vw, 0.75rem);
  }

  body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .quick-page-content {
    gap: var(--kv-space-4, 1rem);
    padding-block: var(--kv-page-start-space, var(--kv-space-4, 1rem)) var(--kv-space-6, 2rem);
  }

  body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .app-page-layout {
    gap: var(--kv-page-layout-gap, var(--kv-space-4, 1rem));
  }

  body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .app-page-intro {
    gap: var(--kv-page-layout-gap, var(--kv-space-4, 1rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.authenticated-workspace *,
  body.authenticated-workspace *::before,
  body.authenticated-workspace *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (min-width: 1100px) {
  body.authenticated-workspace {
    /* The sidebar shifts the centered content by half its width. */
    --kv-page-back-inset: calc(var(--auth-side-nav-width) / 2 + var(--auth-side-main-gap) + var(--kv-auth-content-gutter));
  }

  body:is(.app-workspace-page, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) > .page-shell {
    min-height: 100dvh;
  }

  body.authenticated-user {
    /* Match the rendered desktop lockup before JavaScript measures the header so
       the first sidebar item is stable from the first painted frame. */
    --auth-shell-topbar-height: var(
      --auth-workspace-topbar-height,
      calc(max(4.12rem, clamp(3.193rem, 5.356vw, 4.841rem)) * 0.94 + 0.81rem + 2px)
    );
  }

  /* Home is the source of truth: every signed-in user route uses the same
     viewport-fixed topbar, regardless of page template or quick navigation. */
  body.authenticated-user .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 10000 !important;
  }

  /* Every authenticated page starts below the exact measured header height. */
  html body.authenticated-user > main.page-shell {
    padding-top: var(--auth-shell-topbar-height) !important;

  }

  /* Workspace routes add the persistent feature rail directly below the header. */
  body.authenticated-workspace .auth-side-nav {
    position: fixed !important;
    top: var(--auth-shell-topbar-height) !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    height: calc(100dvh - var(--auth-shell-topbar-height)) !important;
    max-height: calc(100dvh - var(--auth-shell-topbar-height)) !important;
    z-index: 5000 !important;
  }

  body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .quick-page-content {
    min-width: 0 !important;
    overflow-anchor: none;
  }

  body:is(.authenticated-workspace, .app-canvas--feature, .app-canvas--dense, .app-canvas--utility) .quick-page-content:not(:has(.app-page-heading)) {
    overflow-x: clip !important;
  }

  body.authenticated-home .quick-page-content {
    padding-top: clamp(0.5rem, 1.1vw, 0.875rem);
  }

  html:has(> body.authenticated-user) {
    scroll-padding-top: calc(var(--auth-workspace-topbar-height, 4.3rem) + 0.75rem);
  }
}