@import "./theme.css";

.site-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  font-family: var(--pmx-font-body);

  /* header: a terminal title bar */
  .site-header {
    position: sticky;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.7rem 2rem;
    font-family: var(--pmx-font-mono);
    font-size: 0.9rem;
    background-color: var(--pmx-color-bg);
    border-block-end: 1px solid var(--pmx-color-border);

    /* path grows/shrinks in its own slot; nav stays pinned to the right */
    .site-path {
      display: flex;
      align-items: baseline;
      gap: 0;
      flex: 1;
      min-width: 0;
      overflow: hidden;
      color: var(--pmx-color-muted);
    }

    .site-route {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .site-brand {
      flex: none;
      color: var(--pmx-color-accent);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-decoration: none;
      white-space: nowrap;
      text-shadow: var(--csc-glow);

      &::before {
        content: "~/";
        color: var(--pmx-color-muted);
        font-weight: 400;
      }
    }

    nav {
      min-width: 0;

      .pmx-nav-list {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        margin: 0;
        padding: 0;
      }

      .pmx-nav-item {
        position: relative;
        list-style: none;
      }

      /* links render as [Label], like keyboard hints */
      .pmx-nav-link {
        display: inline-block;
        padding: 0.15rem 0.35rem;
        color: var(--pmx-color-fg);
        text-decoration: none;
        white-space: nowrap;

        &::before {
          content: "[";
          color: var(--pmx-color-muted);
        }

        &::after {
          content: "]";
          color: var(--pmx-color-muted);
        }

        &:hover,
        &:focus-visible {
          color: var(--pmx-color-bg);
          background: var(--pmx-color-accent);
          outline: none;

          &::before,
          &::after {
            color: inherit;
          }
        }
      }

      .pmx-nav-item > .pmx-nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-width: 12rem;
        padding: 0.35rem 0;
        background-color: var(--pmx-color-bg);
        border: 1px solid var(--pmx-color-border);

        .pmx-nav-link {
          display: block;
          padding: 0.35rem 0.75rem;
        }
      }

      .pmx-nav-item:is(:hover, :focus-within) > .pmx-nav-list {
        display: flex;
      }
    }

    .auth-session {
      flex: none;
    }
  }

  /* PathMX only colors anchors with data-pathmx-* attrs; course links are plain. */
  .main a:not(.pmx-heading-anchor) {
    color: var(--pmx-color-link);

    &:hover,
    &:focus-visible {
      color: var(--pmx-color-bg);
      background: var(--pmx-color-accent);
    }
  }

  /* main content */
  .primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding-inline: 2rem;
  }

  .primary:has(> .aside .pmx-toc) {
    grid-template-columns: minmax(0, 1fr) 12rem;
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .main {
    min-width: 0;
    container-type: inline-size;

    [data-pmx-block-layout="wide"] {
      --pmx-block-wide-size: min(
        var(--pmx-wide-measure),
        calc(100cqi - 2 * max(1rem, var(--pmx-prose-gutter)))
      );
    }
  }

  /* Keep the TOC visible in its reserved rail below the sticky chrome. */
  .aside {
    position: sticky;
    z-index: 5;
    inset-block-start: max(
      5rem,
      calc(var(--pmx-viewport-inset-block-start) + 1.75rem)
    );
    margin: 0;
    overflow: visible;
  }

  .aside:not(:has(.pmx-toc)) {
    display: none;
  }

  /* TOC panel frame; theme.css draws the ┌─ title ─┐ bar over the top rule,
     these pseudos are the bottom corners */
  .aside:has(.pmx-toc) {
    padding: 1.2rem 0.9rem 0.9rem;
    border: 1px solid var(--pmx-color-border);
    overflow: visible;

    &::before,
    &::after {
      position: absolute;
      inset-block-end: 0;
      color: var(--pmx-color-border);
      font-family: var(--pmx-font-mono);
      font-size: 0.8rem;
      line-height: 1;
      background: var(--pmx-color-bg);
    }

    &::before {
      content: "└";
      inset-inline-start: 0;
      transform: translate(-50%, 50%);
    }

    &::after {
      content: "┘";
      inset-inline-end: 0;
      transform: translate(50%, 50%);
    }
  }

  @media (max-width: 60rem) {
    .primary,
    .primary:has(> .aside .pmx-toc) {
      grid-template-columns: minmax(0, 1fr);
      padding-inline: 1rem;
    }

    .aside {
      display: none;
    }

    .site-header {
      padding-inline: 1rem;
      gap: 1rem;
    }
  }

  @media (max-width: 40rem) {
    .site-header {
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 0.35rem 0.75rem;

      .site-path {
        flex-basis: 100%;
      }

      nav {
        max-width: 100%;

        > .pmx-nav-list {
          flex-wrap: wrap;
        }
      }
    }
  }

  /* footer: inverted status bar */
  .site-footer {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.45rem 2rem;
    font-family: var(--pmx-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    background: var(--pmx-color-accent);
    color: var(--pmx-color-bg);

    .site-status {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem 1.25rem;
      margin: 0;
      padding: 0;
      list-style: none;

      li {
        white-space: nowrap;
      }

      kbd {
        font: inherit;
        font-weight: 700;

        &::before {
          content: "[";
        }

        &::after {
          content: "]";
        }
      }
    }

  }
}

/* glossary dl definitions */
dl {
  dt {
    font-family: var(--pmx-font-mono);
    font-weight: 600;
    color: var(--pmx-color-accent);
  }

  dd {
    margin-block-end: 0.75em;
  }
}