@charset "UTF-8";

:root {
  --pico-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  scroll-behavior: smooth;
}

@view-transition {
  navigation: auto;
}

details>summary {
  max-width: fit-content;
}

body>footer:last-of-type {
  border-top: var(--pico-border-width) solid var(--pico-muted-border-color);
}

article>header>hgroup:last-child {
  margin-bottom: 0;
}

body>header:first-of-type {
  >nav {
    max-width: 90vw;
    margin-inline-start: auto;
    margin-inline-end: auto;

    li {
      padding: 0 var(--pico-nav-element-spacing-horizontal);
    }
  }

  z-index: 100;
  position: relative;
  /* top: 0; */
  background-color: color-mix(in oklab, transparent 30%, var(--pico-background-color));
  backdrop-filter: saturate(180%) var(--pico-modal-overlay-backdrop-filter);
}

nav li a[role="button"],
nav li button {
  margin: 0;
  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
}


details.dropdown>summary+ul li a[role='button'] {
  margin: inherit;
  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
  border-radius: var(--pico-border-radius);
  color: var(--pico-color);
  background-color: var(--pico-background-color);

  &:is(:hover, :active, :focus) {
    --pico-background-color: var(--pico-primary-hover-background);
    --pico-border-color: var(--pico-primary-hover-border);
    --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
    --pico-color: var(--pico-primary-inverse);
    background-color: var(--pico-background-color);
  }

  &.outline {
    --pico-background-color: transparent;
    --pico-color: var(--pico-primary);

    &:is(:hover, :active, :focus) {
      --pico-background-color: transparent;
      --pico-color: var(--pico-primary-hover);
    }
  }

  &.secondary {
    --pico-background-color: var(--pico-secondary-background);
    --pico-border-color: var(--pico-secondary-border);
    --pico-color: var(--pico-secondary-inverse);

    &.outline {
      --pico-background-color: transparent;
      --pico-color: var(--pico-secondary);

      &:is(:hover, :active, :focus) {
        --pico-background-color: transparent;
        --pico-color: var(--pico-secondary-hover);
      }
    }

    &:is(:hover, :active, :focus) {
      --pico-background-color: var(--pico-secondary-hover-background);
      --pico-border-color: var(--pico-secondary-hover-border);
      --pico-color: var(--pico-secondary-inverse);
    }
  }

  &.contrast {
    --pico-background-color: var(--pico-contrast-background);
    --pico-color: var(--pico-contrast-inverse);
    --pico-border-color: var(--pico-contrast-border);

    &.outline {
      --pico-background-color: transparent;
      --pico-color: var(--pico-contrast);

      &:is(:hover, :active, :focus) {
        --pico-background-color: transparent;
        --pico-color: var(--pico-contrast-hover);
      }
    }

    &:is(:hover, :active, :focus) {
      --pico-background-color: var(--pico-contrast-hover-background);
      --pico-border-color: var(--pico-contrast-hover-border);
      --pico-color: var(--pico-contrast-inverse);
    }
  }


}


.delete-link {
  --pico-color: #D93526;
  --pico-underline: #D93526;
}

.delete-link:hover,
.delete-link:focus,
.delete-link:active {
  --pico-color: #C52F21;
  --pico-underline: #C52F21;
}

a.delete-button,
button.delete-button {
  --pico-background-color: #D93526;
  --pico-border-color: #D93526;
}

button.delete-button:hover,
button.delete-button:focus,
button.delete-button:active,
a.delete-button:hover,
a.delete-button:focus,
a.delete-button:active {
  --pico-background-color: #C52F21;
  --pico-border-color: #C52F21;
}

output:first-of-type {
  animation-name: toast;
  animation-duration: 0.25s;
  animation-timing-function: ease-out;
  z-index: 1000;
  display: flex;
  position: fixed;
  top: 1.5rem;
  width: 100%;
  align-items: center;
  justify-content: center;
}

@keyframes toast {
  from {
    top: 0;
  }

  to {
    top: 1.5rem;
  }
}

.output-message {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background-color: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  box-shadow: var(--pico-box-shadow);
}

.output-message.error {
  --pico-primary-background: #C52F21;
}

.output-message.saved {
  --pico-primary-background: #2C6C0C;
}