@property --app-bar-height {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --header-height {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:root {
  --app-bar-height: 0px;
  --header-height: 0px;
  --tree-header-height: 0px;
}

.wrapper {
  display: grid;
  /* minmax(0, 1fr) lets the details column shrink to the viewport instead of
     growing to fit wide cell content (default 1fr has an auto minimum). */
  grid-template-columns: minmax(375px, 22%) minmax(0, 1fr);
  gap: 1rem;
  max-width: 100%;

  .header {
    position: sticky;
    top: var(--app-bar-height);
    grid-column: 1 / -1;
    z-index: 10;
    display: grid;
    grid-auto-columns: max-content;
    align-items: center;
    grid-auto-flow: column;
    gap: 1rem;
    justify-content: flex-start;

    h1[tabindex="-1"]:focus {
      outline: none;
    }
  }

  .item-details {
    position: sticky;
    top: calc(var(--app-bar-height) + var(--header-height));
    max-height: calc(100lvh - var(--app-bar-height) - var(--header-height) - 1rem);

    header {
      /* The version row below sizes itself against this header rather than the
         viewport, since the details panel is only part of the page's width. */
      container: item-header / inline-size;
    }

    header .header-data-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
      gap: 0 1rem;

      div.mud-typography {
        min-width: 175px;
      }

      .no-wrap {
        text-wrap: nowrap;
        grid-column: span 2;
      }
    }

    header .version-selector {
      margin-block: 0.5rem;
    }

    .child-content-list {
      .child-content-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
      }

      .child-content-name {
        margin-inline-end: auto;
      }

      .child-content-version {
        text-wrap: nowrap;
      }

      .child-content-path {
        opacity: 0.7;
        overflow-wrap: anywhere;
      }

      .child-content-body .child-content-meta {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
        gap: 0 1rem;
        margin-block-end: 0.5rem;

        .no-wrap {
          text-wrap: nowrap;
        }
      }

      .child-content-body .version-selector {
        margin-block-end: 0.5rem;
      }
    }

    /* Anchoring rebases every item on screen, not just the one that was clicked, so this
       stays visible above the tabs for as long as an anchor is set. */
    .anchor-banner {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-block: 0.5rem;
      padding: 0.5rem 0.75rem;
      border-radius: var(--mud-default-borderradius);
      border: 1px solid var(--mud-palette-info);
      background-color: var(--mud-palette-info-hover);
      color: var(--mud-palette-text-primary);

      > div.mud-typography {
        flex: 1 1 20rem;
      }
    }

    /* The version being viewed and its neighbors, one cell per row until there's
       room for all three side by side. */
    header .version-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.5rem;
      margin-block: 0.5rem;

      /* Three across, each version in a fixed column, so the version being viewed
         stays in the middle as you move through an item's history and a missing
         neighbor reads as a gap rather than shifting the others over. */
      @container item-header (min-width: 54rem) {
        grid-template-columns: repeat(3, 1fr);

        .version-summary-previous {
          grid-column: 1;
        }

        .version-summary-current {
          grid-column: 2;
        }

        .version-summary-next {
          grid-column: 3;
        }
      }
    }

    .version-summary {
      padding: 0.25rem 0.75rem 0.5rem;
      border: 1px solid var(--mud-palette-lines-default);
      border-radius: var(--mud-default-borderradius, 4px);
    }

    .version-summary-current {
      border-color: var(--mud-palette-primary);
    }

    .version-summary .version-summary-label {
      border-bottom: 1px solid var(--mud-palette-lines-default);
      margin-bottom: 0.25rem;
      color: var(--mud-palette-text-secondary);
    }

    /* A neighbor's label switches the panel to that version. A real <button> so it's
       focusable and works from the keyboard; the styling defers to the label around it,
       apart from the accent color that marks it as the clickable one of the three. */
    .version-summary-link {
      padding: 0;
      border: 0;
      background: none;
      font: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      color: var(--mud-palette-primary);
      cursor: pointer;
    }

    .version-summary-link:hover,
    .version-summary-link:focus-visible {
      text-decoration: underline;
    }
  }

  .tree {
    position: sticky;
    top: calc(var(--app-bar-height) + var(--header-height) + var(--tree-header-height));
    max-height: calc(100lvh - var(--app-bar-height) - var(--header-height) - var(--tree-header-height) - 1.5rem);
    overflow: auto;
  }

  .document-actions {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0;
  }
}

#tree-header {
  anchor-name: --tree-header-anchor;
}

@position-try --menu-below {
  position-area: bottom span-right;
  margin-top: 1em;
}

#tree-search-results {
  position: absolute;
  z-index: 10;
  position-anchor: --tree-header-anchor;
  position-try: --menu-below;
}

/* Change/reset password popovers (native popover API). The top layer ignores
   MudBlazor's stacking, so these are styled here with theme palette variables
   to follow light/dark mode. */
.pw-popover {
  /* Restores the UA default that centers a popover; a stylesheet reset zeroes it. */
  margin: auto;
  width: min(400px, 90vw);
  padding: 1.5rem;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius, 4px);
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-primary);
}

.pw-popover::backdrop {
  background: rgb(0 0 0 / 0.5);
}

/* Visually-hidden username field for password managers. Kept renderable
   (no display:none) so the managers reliably read its value. */
.pw-popover .pw-username {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pw-popover .pw-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* Outlined buttons rely on a faint border that's hard to see against the dark
   surface, so keyboard focus is not noticeable. Add a clear focus-visible ring
   using the theme's primary color, which adapts to both the light and dark
   palettes. */
.mud-button-outlined:focus-visible {
  outline: 2px solid var(--mud-palette-primary);
  outline-offset: -1px;
}

.mud-button-outlined.mud-button-outlined-primary:focus-visible {
  outline: 2px solid var(--mud-palette-secondary);
  outline-offset: -1px;
}