/* Azqato Codes: the Contents sidebar and Previous / Next links around every
   Codes page (scripts/codes/shell.py), laid out as Azqato Invests' sidebar
   (invests/assets/css/docs.css and site.css), in the site's colors. The page
   inside keeps its own interface. Colors come from colors.css directly, since
   Tools pages rename some of the site's shorter names for their own use. */

.cd-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  /* The rail runs the full height, whatever the sidebar's own height. */
  background: linear-gradient(to right, var(--ti-color-surface) 0, var(--ti-color-surface) 259px,
    var(--ti-color-border) 259px, var(--ti-color-border) 260px, transparent 260px);
}

/* Undo the top bar's `nav` rule (styles.css), which matches every <nav>. */
.cd-sidebar,
.cd-pager {
  position: static;
  z-index: auto;
  background: none;
  backdrop-filter: none;
  border-bottom: 0;
}

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

.cd-sidebar {
  position: sticky;
  top: 61px; /* under the site's two bars */
  align-self: start;
  height: calc(100vh - 61px);
  overflow-y: auto;
  padding: 24px 16px 32px;
  font-size: 0.95rem;
  line-height: 1.5;
}


.cd-group + .cd-group {
  margin-top: 12px;
}

.cd-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-group li + li {
  margin-top: 2px;
}

.cd-group a {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--ti-color-text);
  text-decoration: none;
}

.cd-group a:hover {
  background: var(--ti-color-hover);
  color: var(--ti-color-text);
}

.cd-group a[aria-current="page"] {
  background: var(--ti-color-accent-muted);
  box-shadow: inset 3px 0 0 var(--ti-color-accent);
  color: var(--ti-color-accent);
  font-weight: 600;
}

/* Groups collapse; the one holding the open page starts open. */
.cd-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--ti-color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.cd-group-label::-webkit-details-marker {
  display: none;
}

.cd-group-label::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.cd-group[open] > .cd-group-label {
  margin-bottom: 6px;
}

.cd-group[open] > .cd-group-label::after {
  transform: rotate(45deg);
}

.cd-group-label:hover {
  background: var(--ti-color-hover);
  color: var(--ti-color-text);
}

/* ---------- Main column ---------- */

/* Widths as on Invests (docs.css, site.css): the main column has 48px of
   padding; every page uses the full column, as Invests' home
   and tool pages do. Each page's own outer
   width and padding give way to these. */
.cd-main {
  padding: 32px 48px 72px;
}

.cd-main > .hero,
.cd-main > .section {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.cd-main > .hero {
  padding-top: 0.5rem;
}

.tl .cd-main .wrap,
.cd-main .pr-site .content {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.cd-main .pr-site .content,
.tl .cd-main .page {
  padding-top: 0;
}

.cd-menu-btn {
  display: none;
}

.cd-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
}

.cd-pager-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 48%;
  padding: 12px 16px;
  border: 1px solid var(--ti-color-border);
  border-radius: 10px;
  background: var(--ti-color-canvas);
  color: var(--ti-color-text);
  text-decoration: none;
}

.cd-pager-link:hover {
  border-color: var(--ti-color-accent);
  color: var(--ti-color-text);
}

.cd-pager-link small {
  color: var(--ti-color-text-muted);
  font-size: 0.8rem;
}

.cd-pager-link span {
  color: var(--ti-color-accent);
  font-weight: 600;
}

.cd-pager-link--prev span::before {
  content: "\2190\00a0";
}

.cd-pager-link--next {
  margin-left: auto;
  text-align: right;
}

.cd-pager-link--next span::after {
  content: "\00a0\2192";
}

.cd-sidebar :focus-visible,
.cd-menu-btn:focus-visible,
.cd-pager-link:focus-visible {
  outline: 2px solid var(--ti-color-focus);
  outline-offset: 2px;
}

/* ---------- Phones and tablets: the sidebar folds behind a button ---------- */

@media (max-width: 900px) {
  .cd-shell {
    grid-template-columns: minmax(0, 1fr);
    background: none;
  }

  .cd-sidebar {
    display: none;
    position: static;
    height: auto;
    margin: 0 16px;
    padding: 12px 6px;
    border: 1px solid var(--ti-color-border);
    border-radius: 10px;
    background: var(--ti-color-surface);
  }

  .cd-sidebar.is-open {
    display: block;
    margin-top: 8px;
  }


  .cd-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    justify-self: start;
    margin: 12px 16px 0;
    padding: 6px 12px;
    border: 1px solid var(--ti-color-border);
    border-radius: 8px;
    background: var(--ti-color-surface);
    color: var(--ti-color-text);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
  }

  .cd-menu-btn::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }

  .cd-menu-btn[aria-expanded="true"]::after {
    transform: translateY(1px) rotate(-135deg);
  }

  .cd-main {
    padding: 28px 24px 56px;
  }
}