/*!
 * Pico Reforged v2.0.1 (https://pico.rusticstack.com)
 * Copyright 2019-2024 Lucas Larroche and the Pico CSS authors
 * Copyright 2026 rusticstack
 * Licensed under MIT
 */
@layer pico.tokens, pico.theme, pico.core;

@layer pico.extras {
  :root, :host, [data-theme] {
    --pico-app-shell-nav-width: 16rem;
    --pico-app-shell-header-height: 3.5rem;
    --pico-app-shell-background-color: var(--pico-background-color);
    --pico-app-shell-border-color: var(--pico-muted-border-color);
    --pico-app-shell-nav-background-color: var(--lightningcss-light, var(--pico-card-sectioning-background-color)) var(--lightningcss-dark, oklch(18.5% .006 265));
    --pico-app-shell-nav-muted-color: color-mix(in srgb,
    var(--pico-color) 72%,
    var(--pico-app-shell-nav-background-color));
    --pico-app-shell-nav-hover-background-color: color-mix(in oklab,
    var(--pico-secondary) 12%,
    transparent);
    --pico-app-shell-nav-current-background-color: var(--pico-primary-subtle-background);
    --pico-app-shell-nav-current-color: var(--pico-primary-hover);
    --pico-app-shell-scrim-color: var(--pico-modal-overlay-background-color);
  }

  :root:has( > body[data-app-shell]) {
    scroll-padding-block-start: calc(var(--pico-app-shell-header-height) + var(--pico-spacing));
  }

  @media (width < 1024px) {
    :root:has( > body[data-app-shell] > aside[popover]:popover-open) {
      overflow: hidden;
    }
  }

  body[data-app-shell] {
    grid-template: "header"
                   "nav"
                   "main" 1fr
                   "footer"
                   / minmax(0, 1fr);
    min-height: 100dvh;
    margin: 0;
    display: grid;
  }

  @media (width >= 1024px) {
    body[data-app-shell] {
      grid-template-columns: var(--pico-app-shell-nav-width) minmax(0, 1fr);
      grid-template-rows: auto 1fr auto;
      grid-template-areas: "header header"
                           "nav main"
                           "nav footer";
    }
  }

  body[data-app-shell] > :is(header, main, footer) {
    width: auto;
    max-width: none;
    padding-block: 0;
    padding-inline: var(--pico-block-spacing-horizontal);
    margin: 0;
  }

  body[data-app-shell] > header {
    z-index: 10;
    align-items: center;
    gap: var(--pico-grid-column-gap);
    min-height: var(--pico-app-shell-header-height);
    padding-block: calc(var(--pico-spacing) * .25);
    border-block-end: var(--pico-border-width) solid var(--pico-app-shell-border-color);
    background-color: var(--pico-background-color);
    flex-wrap: wrap;
    grid-area: header;
    display: flex;
    position: sticky;
    inset-block-start: 0;
  }

  body[data-app-shell] > header > :is(strong, a, hgroup) {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    margin: 0;
    overflow: hidden;
  }

  body[data-app-shell] > header > nav {
    min-width: 0;
    max-width: 100%;
    margin-inline-start: auto;
  }

  body[data-app-shell] > header > nav ul {
    flex-wrap: wrap;
    max-width: 100%;
    margin-inline: 0;
  }

  body[data-app-shell] > header > nav li {
    overflow-wrap: anywhere;
    min-width: 0;
    padding-block: 0;
  }

  body[data-app-shell] > header > button[popovertarget] {
    align-items: center;
    gap: calc(var(--pico-spacing) * .5);
    width: auto;
    padding-block: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width));
    padding-inline: var(--pico-nav-link-spacing-horizontal);
    border-color: var(--pico-app-shell-border-color);
    color: inherit;
    background-color: #0000;
    justify-content: center;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
    margin: 0;
    display: inline-flex;
  }

  body[data-app-shell] > header > button[popovertarget]:hover {
    background-color: var(--pico-app-shell-nav-hover-background-color);
  }

  body[data-app-shell] > header > button[popovertarget]:focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: var(--pico-outline-width);
  }

  body[data-app-shell] > header > button[popovertarget] svg {
    flex-shrink: 0;
  }

  @media (width < 576px) {
    body[data-app-shell] > header > button[popovertarget] span {
      clip-path: inset(50%);
      white-space: nowrap;
      width: 1px;
      height: 1px;
      position: absolute;
      overflow: hidden;
    }
  }

  @media (width >= 1024px) {
    body[data-app-shell] > header > button[popovertarget] {
      display: none;
    }
  }

  @supports not selector(:popover-open) {
    body[data-app-shell] > header > button[popovertarget] {
      display: none;
    }
  }

  body[data-app-shell] > main {
    min-width: 0;
    padding-block: var(--pico-block-spacing-vertical);
    grid-area: main;
  }

  body[data-app-shell] > main > header {
    justify-content: space-between;
    align-items: center;
    gap: var(--pico-spacing);
    margin-bottom: var(--pico-block-spacing-vertical);
    flex-wrap: wrap;
    display: flex;
  }

  body[data-app-shell] > main > header :is(h1, hgroup, p) {
    margin-bottom: 0;
  }

  body[data-app-shell] > main > header :is(button, [role="button"]) {
    width: auto;
    margin-bottom: 0;
  }

  body[data-app-shell] > main > section:has( > article) {
    gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
    margin-bottom: var(--pico-block-spacing-vertical);
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    display: grid;
  }

  body[data-app-shell] > main > section:has( > article) > :not(article) {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  body[data-app-shell] > main > section:has( > article) > article {
    margin: 0;
  }

  body[data-app-shell] > main > section:has( > article) > article > :is(strong, data) {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    display: block;
  }

  body[data-app-shell] > main > section:has( > article) > article > p:first-child {
    color: var(--pico-muted-color);
    margin-bottom: .25rem;
  }

  body[data-app-shell] > main > section:has( > article) > article > p:first-child > small {
    font-size: .8125rem;
  }

  body[data-app-shell] > main figure:has( > table) {
    overflow-x: auto;
  }

  body[data-app-shell] > main figure:has( > table):focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
  }

  body[data-app-shell] > footer {
    padding-block: var(--pico-block-spacing-vertical);
    border-block-start: var(--pico-border-width) solid var(--pico-app-shell-border-color);
    color: var(--pico-muted-color);
    grid-area: footer;
  }

  body[data-app-shell] > aside {
    background-color: var(--pico-app-shell-nav-background-color);
    min-width: 0;
    color: var(--pico-color);
    grid-area: nav;
  }

  body[data-app-shell] > aside > nav {
    display: block;
  }

  body[data-app-shell] > aside > nav > small {
    margin-block: var(--pico-spacing) calc(var(--pico-spacing) * .25);
    padding-inline: var(--pico-nav-link-spacing-horizontal);
    color: var(--pico-app-shell-nav-muted-color);
    font-weight: 600;
    display: block;
  }

  body[data-app-shell] > aside > nav > small:first-child {
    margin-block-start: 0;
  }

  body[data-app-shell] > aside > nav ul {
    margin: 0;
    padding: 0;
  }

  body[data-app-shell] > aside > nav li {
    padding: calc(var(--pico-nav-element-spacing-vertical) * .125) 0;
  }

  body[data-app-shell] > aside > nav li a:not([role="button"]), body[data-app-shell] > aside > nav li summary {
    align-items: center;
    gap: calc(var(--pico-spacing) * .75);
    min-block-size: 2rem;
    padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);
    border-radius: var(--pico-border-radius);
    color: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: var(--pico-line-height);
    transition: background-color var(--pico-transition);
    margin: 0;
    text-decoration: none;
    display: flex;
  }

  :is(body[data-app-shell] > aside > nav li a:not([role="button"]), body[data-app-shell] > aside > nav li summary):hover {
    background-color: var(--pico-app-shell-nav-hover-background-color);
  }

  :is(body[data-app-shell] > aside > nav li a:not([role="button"]), body[data-app-shell] > aside > nav li summary):focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: calc(var(--pico-outline-width) * -1);
    box-shadow: none;
  }

  :is(body[data-app-shell] > aside > nav li a:not([role="button"]), body[data-app-shell] > aside > nav li summary) svg {
    flex-shrink: 0;
  }

  :is(body[data-app-shell] > aside > nav li a:not([role="button"]), body[data-app-shell] > aside > nav li summary) small {
    padding: 0 calc(var(--pico-nav-link-spacing-horizontal) * .75);
    border-radius: var(--pico-border-radius);
    background-color: color-mix(in oklab, var(--pico-secondary) 12%, transparent);
    color: inherit;
    margin-inline-start: auto;
    font-weight: 600;
  }

  body[data-app-shell] > aside > nav li a[aria-current]:not([aria-current="false"]) {
    background-color: var(--pico-app-shell-nav-current-background-color);
    color: var(--pico-app-shell-nav-current-color);
    font-weight: 600;
  }

  body[data-app-shell] > aside > nav details {
    border: 0;
    margin: 0;
    padding: 0;
  }

  body[data-app-shell] > aside > nav details summary {
    cursor: pointer;
    justify-content: space-between;
  }

  body[data-app-shell] > aside > nav details summary:after {
    margin-inline-start: auto;
  }

  body[data-app-shell] > aside > nav details ul {
    border-inline-start: var(--pico-border-width) solid var(--pico-app-shell-border-color);
    margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) + .625rem);
    padding-inline-start: var(--pico-nav-link-spacing-horizontal);
  }

  @media (width >= 1024px) {
    body[data-app-shell] > aside {
      z-index: auto;
      border: 0;
      border-inline-end: var(--pico-border-width) solid var(--pico-app-shell-border-color);
      width: auto;
      max-width: none;
      height: auto;
      max-height: none;
      box-shadow: none;
      opacity: 1;
      border-radius: 0;
      margin: 0;
      padding: 0;
      transition: none;
      display: block;
      position: static;
      inset: auto;
      overflow: visible;
      transform: none;
    }

    body[data-app-shell] > aside > nav {
      max-height: calc(100dvh - var(--pico-app-shell-header-height));
      padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
      position: sticky;
      inset-block-start: var(--pico-app-shell-header-height);
      overflow-y: auto;
    }

    body[data-app-shell] > aside[popover]:popover-open {
      inset-block: var(--pico-app-shell-header-height) 0;
      width: var(--pico-app-shell-nav-width);
      background-color: var(--pico-app-shell-nav-background-color);
      height: auto;
      position: fixed;
      inset-inline: 0 auto;
      overflow-y: auto;
    }

    body[data-app-shell] > aside[popover]:popover-open > nav {
      max-height: none;
      position: static;
      overflow-y: visible;
    }

    body[data-app-shell] > aside[popover]:popover-open:before {
      display: none;
    }

    body[data-app-shell] > aside[popover]:popover-open:after {
      display: none;
    }
  }

  @media (width < 1024px) {
    @supports selector(:popover-open) {
      body[data-app-shell] > aside[popover] {
        z-index: 30;
        width: min(20rem, 85vw);
        max-width: none;
        height: 100dvh;
        max-height: none;
        padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
        border: 0;
        border-inline-end: var(--pico-border-width) solid var(--pico-app-shell-border-color);
        background-color: #0000;
        border-inline-end: 0;
        border-radius: 0;
        margin: 0;
        position: fixed;
        inset-block: 0;
        inset-inline: 0 auto;
        overflow-y: auto;
        transform: none;
      }

      body[data-app-shell] > aside[popover]:before, body[data-app-shell] > aside[popover]:after {
        content: "";
        z-index: -1;
        pointer-events: auto;
        position: fixed;
      }

      body[data-app-shell] > aside[popover]:before {
        background-color: var(--pico-app-shell-scrim-color);
        inset: 0;
      }

      body[data-app-shell] > aside[popover]:after {
        border-inline-end: var(--pico-border-width) solid var(--pico-app-shell-border-color);
        background-color: var(--pico-app-shell-nav-background-color);
        width: min(20rem, 85vw);
        inset-block: 0;
        inset-inline: 0 auto;
      }

      body[data-app-shell] > aside[popover]:not(:popover-open) {
        display: none;
      }
    }

    @supports not selector(:popover-open) {
      body[data-app-shell] > aside {
        padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
        border-block-end: var(--pico-border-width) solid var(--pico-app-shell-border-color);
      }
    }
  }

  @media (width < 1024px) and (prefers-reduced-motion: no-preference) {
    @supports (transition-behavior: allow-discrete) {
      body[data-app-shell] > aside[popover] {
        transition: opacity var(--pico-transition),
            display var(--pico-transition) allow-discrete,
            overlay var(--pico-transition) allow-discrete;
      }

      body[data-app-shell] > aside[popover]:not(:popover-open) {
        opacity: 0;
      }

      @starting-style {
        body[data-app-shell] > aside[popover]:popover-open {
          opacity: 0;
          transform: none;
        }
      }
    }
  }

  body[data-app-shell] > a[href="#main"] {
    z-index: 40;
    padding: var(--pico-nav-link-spacing-vertical) var(--pico-spacing);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-app-shell-background-color);
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    position: absolute;
    inset-block-start: var(--pico-nav-link-spacing-vertical);
    inset-inline-start: var(--pico-nav-link-spacing-horizontal);
  }

  body[data-app-shell] > a[href="#main"]:not(:focus) {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
  }
}

@layer pico.utilities;