/*
 * Page shell (#5030): the three-column sidebar / content / "On this page" TOC template that the API docs, the admin
 * dashboard, and the user dashboard all build on, plus the page-level base styles (type, links, code) those surfaces
 * share. Everything is styled from the design-system tokens in main.css; the only custom properties defined here are
 * the shell's own layout dimensions.
 *
 * Link it right after main.css. An app's own stylesheet comes later and may extend the .page-* classes (the user
 * dashboard turns the sidebar into a chip row on phones). The narrow-viewport sidebar disclosure is
 * js/common/sidebarDisclosure.js; the TOC is filled by js/api-docs/apiDocs.js or js/admin-dashboard/AdminShell.js.
 */

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

body {
  font: var(--text-body-regular);
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-white);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: visible !important;
}

/* ---- Layout Containers ---- */

.page-container {
  --sidebar-width: 270px;
  --toc-width: 250px;
  --sidebar-height: calc(100vh - var(--navbar-height));

  display: flex;
  min-height: var(--sidebar-height);
}

.page-content {
  flex: 1 1 auto;
  padding: var(--space-xl);
  max-width: calc(100% - (var(--sidebar-width) + var(--toc-width)));
  overflow-x: hidden;
  font: var(--text-prose-regular);
}

/* The content pane's own padding already offsets the page from the navbar; the page's first heading only adds a
   small margin (not the full --space-xl, which doubled the blank space at the top of every page) sized so the
   heading starts at padding + margin = 48px — exactly level with the sidebar's first .page-nav-header (keep in sync
   with .page-nav's padding-top). The first-of-type arm matters: several pages open @content with <script>/<link>
   tags, so the first .page-section is the first *div*, not the first child. */
.page-content > :is(h1, h2, h3, .page-heading):first-child,
.page-content > div.page-section:first-of-type > :is(h1, h2, h3, .page-heading):first-child {
  margin-top: var(--space-md);
}

/* ---- Typography ---- */

h1, h2, h3, h4, h5, h6 {
  color: var(--color-neutral-900);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  scroll-margin-top: 85px; /* Offset for the fixed navbar plus a little extra. */
}

h1 { font: var(--text-h1-bold); }
h2 { font: var(--text-h2-bold); }
h3 { font: var(--text-h3-bold); }
h4 { font: var(--text-title-medium); }
h5 { font: var(--text-subtitle-medium); }

h6 {
  font: var(--text-body-medium);
  color: var(--color-neutral-700);
}

p {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

a {
  color: var(--color-link-200);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---- Sections and headings ---- */

.page-section {
  margin-bottom: var(--space-xxl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-neutral-200);
}

.page-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.page-heading {
  color: var(--color-neutral-900);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-neutral-200);
  scroll-margin-top: 85px; /* Offset for the fixed navbar plus a little extra. */
}

/* A titled run of rows or a table inside a section, below the section's own heading. */
.page-subhead {
  font: var(--text-subtitle-bold);
  color: var(--color-neutral-900);
  margin: var(--space-lg) 0 var(--space-xs);
}

/* ---- Permalink ---- */

.permalink {
  visibility: hidden;
  opacity: 0;
  margin-left: var(--space-sm);
  font-size: 1em;
  color: var(--color-link-200);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

h1:hover .permalink,
h2:hover .permalink,
h3:hover .permalink,
h4:hover .permalink,
h5:hover .permalink,
h6:hover .permalink {
  visibility: visible;
  opacity: 1;
}

.permalink:hover {
  opacity: 1;
  color: var(--color-link-200);
}

.permalink:focus {
  outline: 2px solid var(--color-link-200);
  outline-offset: 2px;
  opacity: 1;
}

/* ---- Code Blocks and Inline Code ---- */

pre {
  background-color: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  font: var(--text-code-regular);
  white-space: pre;
}

/* Bootstrap's `code, kbd, pre, samp { font-family: Menlo, ... }` beats the family `pre` inherits down, so without
   this re-inherit the block renders in Menlo rather than --font-mono. */
pre > code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
  color: inherit;
}

/* Sized relative to the surrounding text rather than with --text-code-regular, so a code token in a caption or a
   heading stays in proportion to it. */
:not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-900);
  padding: 2px 5px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-neutral-200);
  white-space: nowrap;
}

/* On a single-column viewport (var(--breakpoint-sm)) a long inline code token (an endpoint URL) has nowhere
   to go but past the screen edge, so wrapping must win over the nowrap look; wider viewports keep code tokens
   on one line (#4883). break-word rather than anywhere: anywhere feeds its break points into min-content
   sizing, letting code-bearing table columns squash below token width instead of engaging the
   .ps-table-wrapper scroller. */
@media (width <= 768px) {
  :not(pre) > code {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* ==========================================================================
   SIDEBAR NAVIGATION
   ========================================================================== */

.page-sidebar {
  flex: 0 0 var(--sidebar-width);
  background-color: var(--color-blue-100);
  border-right: 1px solid var(--color-neutral-200);
  overflow-y: auto;
  height: var(--sidebar-height);
  position: sticky;
  top: var(--navbar-height);
}

.page-nav {
  /* Top padding + .page-nav-header's margin-top = 48px, matching the content pane's first heading (padding +
     margin) so the sidebar's first section header and the page title sit level. */
  padding: var(--space-xl) 0 var(--space-xxxl);
}

.page-nav-header {
  font: var(--text-small-bold);
  color: var(--color-neutral-900);
  text-transform: uppercase;
  margin: var(--space-md) var(--space-md) 10px;
}

.page-nav-item {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-neutral-700);
  text-decoration: none;
  font: var(--text-small-regular);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.page-nav-item:hover, .page-nav-item.active {
  background-color: var(--color-blue-300);
  color: var(--color-neutral-900);
  text-decoration: none;
}

.page-nav-subitem {
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xl);
  font: var(--text-caption-regular);
  display: block;
  color: var(--color-neutral-700);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.page-nav-subitem:hover {
  background-color: var(--color-blue-300);
  color: var(--color-neutral-900);
}

.page-nav-subitem.level-h1 {
  font: var(--text-caption-medium);
  padding-left: var(--space-xl);
}

.page-nav-subitem.level-h2 {
  padding-left: calc(var(--space-xl) + 10px);
}

.page-nav-subitem.level-h3 {
  padding-left: calc(var(--space-xl) + 20px);
}

.page-nav-subitem.active {
  color: var(--color-link-200);
  background-color: var(--color-blue-300);
  font: var(--text-caption-medium);
}

/* ---- Accordion Menu ---- */

.page-nav-accordion {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-neutral-700);
  text-decoration: none;
  font: var(--text-small-regular);
}

.page-nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-medium);
}

.accordion-arrow {
  margin-left: var(--space-sm);
  transition: transform var(--transition-medium);
  pointer-events: none;
}

.page-nav-accordion[aria-expanded="true"] .accordion-arrow {
  transform: rotate(180deg);
}

/* ---- Sidebar Toggle ---- */

/*
 * Disclosure that opens the section nav on narrow screens. It is the first child of .page-sidebar and shares the
 * sidebar's in-flow strip, so the nav it controls opens directly beneath it and pushes the page down rather than
 * covering it. Hidden at widths where the sidebar is a real column.
 */
.page-sidebar-toggle {
  display: none;
  width: 100%;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: none;
  background-color: transparent;
  color: var(--color-neutral-900);
  font: var(--text-body-bold);
  text-align: left;
  cursor: pointer;
}

.page-sidebar-toggle:hover {
  background-color: var(--color-blue-300);
}

.page-sidebar-toggle:focus-visible {
  outline: 2px solid var(--color-link-200);
  outline-offset: -2px;
}

.page-sidebar-toggle-icon {
  flex: none;
  width: 12px;
  transition: transform var(--transition-fast);
}

.page-sidebar-toggle[aria-expanded="true"] .page-sidebar-toggle-icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .page-sidebar-toggle-icon,
  .accordion-arrow,
  .page-nav-submenu {
    transition: none;
  }
}

/* Pushes the chevron to the trailing edge so the label reads as a heading and the affordance sits where a thumb is. */
.page-sidebar-toggle-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */

.page-toc {
  flex: 0 0 var(--toc-width);
  border-left: 1px solid var(--color-neutral-200);
  padding: var(--space-xxxl) var(--space-md);
  background-color: var(--color-blue-100);
  overflow-y: auto;
  height: var(--sidebar-height);
  position: sticky;
  top: var(--navbar-height);
}

.page-toc-header {
  font: var(--text-caption-semibold);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-md);
}

.page-toc ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  margin-top: 0;
}

.page-toc ul li {
  margin-bottom: var(--space-sm);
}

.page-toc a {
  color: var(--color-neutral-700);
  text-decoration: none;
  font: var(--text-caption-regular);
  display: block;
  padding: 2px 0;
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast), padding-left var(--transition-fast);
}

.page-toc a:hover {
  color: var(--color-neutral-900);
  text-decoration: none;
  padding-left: 4px;
}

.page-toc a.active {
  color: var(--color-link-200);
  font: var(--text-caption-medium);
  border-left-color: var(--color-link-200);
  padding-left: 4px;
}

.page-toc .toc-level-1 {
  margin-left: 0;
}

/* The docs put the level class on the <li>, the admin shell on the <a>; the font has to land on the link either way,
   since .page-toc a sets its own. */
.page-toc .toc-level-1 > a,
.page-toc a.toc-level-1 {
  font: var(--text-caption-medium);
}

.page-toc .toc-level-2 {
  margin-left: 12px;
}

.page-toc .toc-level-3 {
  margin-left: 24px;
}

.page-toc .toc-level-4 {
  margin-left: 36px;
}

.page-toc .toc-level-5 {
  margin-left: 48px;
}

.page-toc .toc-level-6 {
  margin-left: 60px;
  font: var(--text-tiny-regular);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* var() doesn't work in media queries, so we have to use hardcoded values:
var(--breakpoint-xs) → 480px
var(--breakpoint-sm) → 768px
var(--breakpoint-md) → 992px */

/* Hide TOC on medium screens */
@media (width <= 992px) {
  .page-toc {
    display: none;
  }

  .page-content {
    max-width: calc(100% - var(--sidebar-width));
  }
}

/* Stack layout on small screens */
@media (width <= 768px) {
  .page-container {
    flex-direction: column;
  }

  /*
   * The sidebar stops being a column and becomes an in-flow strip between the navbar and the content, holding the
   * disclosure button; its nav list collapses into that disclosure. The strip itself always renders, so nothing has to
   * be floated over the page to reach the nav (#4856).
   */
  .page-sidebar {
    flex: 0 0 auto;
    height: auto;
    position: static;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-neutral-200);
    display: block;
    overflow: visible;
  }

  .page-sidebar .page-nav {
    display: none;
    padding: 0 0 var(--space-sm);
  }

  .page-sidebar.mobile-visible .page-nav {
    display: block;
  }

  /* The strip already separates the nav from the page, so the desktop spacing above the first group is dead space. */
  .page-sidebar .page-nav-header:first-child {
    margin-top: 0;
  }

  .page-content {
    max-width: 100%;
    padding: var(--space-lg);
  }

  .page-sidebar-toggle {
    display: flex;
  }

  h1.page-heading { font: var(--text-h2-bold); }
  h2.page-heading { font: var(--text-h3-bold); }
  h3.page-heading { font: var(--text-title-bold); }
}

/* Extra small screens */
@media (width <= 480px) {
  .page-content {
    padding: var(--space-md);
  }
}