@import url("_inter.css");
@import url("_hanken-grotesk.css");
@import url("_variables-manual.css");
@import url("_variables-auto.css");
@import url("_typography.css");
@import url("_font-colors.css");
@import url("_link.css");
@import url("_flex.css");
@import url("_table.css");
@import url("_dl.css");
@import url("_list-with-vertical-dividers.css");
@import url("_anchor-bar-list.css");

/* base typography */
html {
  --atpco-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
    Ubuntu, Cantarell, sans-serif;
  --atpco-font-family-heading: "Hanken Grotesk", Inter, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
  --atpco-font-family-mono-space: "SF Mono", "Roboto Mono", "Lucida Console", Monaco, monospace;
  font-family: var(--atpco-font-family);
  font-feature-settings: "zero" 1;
}
@supports (font-variation-settings: normal) {
  html {
    --atpco-font-family: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    --atpco-font-family-heading: "Hanken Grotesk", "Inter var", Inter, -apple-system,
      BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    font-family: var(--atpco-font-family);
  }
}

html {
  color: var(--atp-content-primary-strong-enabled);
}

/* box sizing */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* focus */
:where(:focus) {
  outline: 0;
}

:where(:focus-visible) {
  outline: var(--atp-focus-width) solid var(--atp-focus-color);
  outline-offset: var(--atp-focus-outline-offset);
}

/* atp-input-field provides its own focus indicator, so this prevents a duplicate */
atp-input-field input:focus-visible,
atp-input-field textarea:focus-visible,
atp-input input:focus-visible,
atp-input textarea:focus-visible {
  outline: 0;
}

atp-input-field textarea,
atp-input textarea {
  display: block;
  block-size: auto;
  max-inline-size: 100%;
  padding: var(--atp-space-xs);
  resize: vertical;
}

/* Layout */
.atp-layout {
  display: grid;
  overflow: hidden;
  position: relative;
  grid-template-rows: var(--atp-app-header-height) 1fr;

  /* The header and the page content row share this single grid column.
     minmax(0, 1fr) caps it at the viewport width (the 1fr max) while letting it
     shrink (the 0 min), which does two things:
       1. It constrains the header to 100vw, so the header's own items can
          shrink and truncate to fit.
       2. It stops any page content that's wider than 100vw from stretching the
        shared column — so oversized content can't force the header past 100vw
        along with it.
     Without this, the default `auto` column grows to its widest item and can
     blow past 100vw (then getting clipped by `overflow: hidden`). */
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--atp-page-background-color);
  block-size: 100vh;
  inline-size: 100vw;

  .scroll-wrapper {
    min-block-size: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: none;
    margin-inline-start: var(--atp-space-s);
    scrollbar-gutter: stable;
    padding-inline-start: var(--atp-space-xxs);

    .page-content {
      --atp-layout-chat-inline-size: 587px;
      --atp-layout-chat-header-height: var(--atp-app-header-height);
      --atp-layout-chat-launcher-size: var(--atp-space-l);
      --atp-layout-chat-launcher-inline-offset: calc(var(--atp-space-l) + var(--atp-space-xs));
      --atp-layout-chat-launcher-fade-duration: 80ms;
      --atp-layout-chat-slideout-transition-duration: 0.2s;
      --atp-layout-chat-slideout-transition-timing: ease-out;
      --atp-layout-chat-max-block-size: calc(100vh - var(--atp-layout-chat-header-height));
      --atp-layout-chat-z-index: var(--atp-z-index-menu);

      position: relative;
      margin-block: var(--atp-space-s) 0;
      margin-inline: 0 var(--atp-space-s);
      background-color: var(--atp-background-primary-weak);
      box-shadow: var(--atp-main-content-box-shadow);
      border-start-start-radius: var(--atp-border-radius-m);
      border-start-end-radius: var(--atp-border-radius-m);
      border-end-end-radius: 0;
      border-end-start-radius: 0;
      flex-grow: 1;
    }

    .layout-chat {
      --atp-chat-max-inline-size: var(--atp-layout-chat-inline-size);
      --atp-chat-max-block-size: var(--atp-layout-chat-max-block-size);
      --atp-chat-launcher-size: var(--atp-layout-chat-launcher-size);
      --atp-chat-launcher-visibility-duration: var(--atp-layout-chat-launcher-fade-duration);
      --atp-chat-launcher-reveal-delay: calc(
        var(--atp-layout-chat-slideout-transition-duration) - 50ms
      );
      --atp-chat-collapsed-inline-size: min(var(--atp-layout-chat-inline-size), 100vw);
      --atp-chat-collapsed-block-size: var(--atp-layout-chat-max-block-size);
      --atp-chat-border-start-end-radius: 0;
      --atp-chat-border-end-end-radius: 0;

      position: fixed;
      z-index: var(--atp-layout-chat-z-index);
      inset-block-start: var(--atp-layout-chat-header-height);
      inset-inline-end: 0;
      inline-size: min(var(--atp-layout-chat-inline-size), 100vw);
      block-size: var(--atp-layout-chat-max-block-size);
      max-block-size: var(--atp-layout-chat-max-block-size);
      transform: translateX(0);
      transition: transform var(--atp-layout-chat-slideout-transition-duration)
        var(--atp-layout-chat-slideout-transition-timing)
        var(--atp-layout-chat-launcher-fade-duration);
    }

    .layout-chat[collapsed] {
      transform: translateX(
        calc(
          100% - var(--atp-layout-chat-launcher-size) -
            var(--atp-layout-chat-launcher-inline-offset)
        )
      );
      transition-delay: 0s;
    }
  }

  .layout-sidebar {
    position: absolute;
    z-index: var(--atp-z-index-sidebar-nav);
    inset-block: calc(var(--atp-space-m) + var(--atp-app-header-height)) 0;
    inset-inline-start: 0;
    max-block-size: calc(100vh - var(--atp-space-m) - var(--atp-app-header-height));
    transition: inset-inline-start var(--atp-transition-standard);
  }

  .layout-sidebar:has(atp-sidebar[toggled]),
  .layout-sidebar[toggled] {
    inset-inline-start: calc(-1 * var(--atp-app-sidebar-width));
  }

  .layout-header {
    z-index: var(--atp-z-index-header-nav);
  }
}

.atp-layout--content-scroll {
  .scroll-wrapper {
    min-block-size: 0;
    overflow-y: hidden;
    scrollbar-gutter: auto;

    .page-content {
      min-block-size: 0;
      overflow-y: auto;
      scrollbar-gutter: stable;
    }
  }
}

@media (width >= 1200px) {
  .atp-layout .layout-sidebar {
    inset-inline-start: var(--atp-space-s);
  }

  .atp-layout .layout-sidebar:has(atp-sidebar[toggled]),
  .atp-layout .layout-sidebar[toggled] {
    inset-inline-start: calc(-1 * var(--atp-app-sidebar-width) + var(--atp-space-xs));
  }

  .atp-layout .scroll-wrapper {
    margin-inline-start: calc(var(--atp-app-sidebar-width) + var(--atp-space-l));
    transition: margin-inline-start var(--atp-transition-standard);
  }

  .atp-layout:has(atp-sidebar[toggled]) .scroll-wrapper {
    margin-inline-start: var(--atp-space-m);
  }
}

.visually-hidden {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  block-size: 1px;
  inline-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.atp-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.atp-dropdown-wrapper__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--atp-dropdown-menu-offset));
  inset-inline-start: 0;
  z-index: var(--atp-z-index-menu);
  block-size: auto;
  inline-size: max-content;
}

.atp-dropdown-wrapper__menu--end {
  inset-inline-start: unset;
  inset-inline-end: 0;
}