/* Workspace navigation: a sticky rail on desktop, a disclosure on phones. */
.portal-navigation > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  min-height: var(--size-control);
  padding: var(--space-3) 0;
  border-bottom: var(--size-hairline) solid var(--color-border);
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  list-style: none;
}
.portal-navigation > summary::-webkit-details-marker {
  display: none;
}
.portal-navigation > summary span {
  color: var(--color-text-tertiary);
  font-weight: 500;
}
.portal-navigation .tab-nav {
  display: grid;
  gap: 0;
  border-bottom: 0;
  margin-bottom: var(--space-4);
}
.portal-navigation .tab-link {
  white-space: normal;
  margin: 0;
  border-bottom: 0;
  border-left: var(--size-rule) solid transparent;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-secondary);
  font-weight: 500;
}
.portal-navigation .tab-link:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-inset);
}
.portal-navigation .tab-link.is-current {
  border-left-color: var(--color-solar-500);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  font-weight: 600;
}
@media (min-width: 900px) {
  .portal-workspace .portal-bar-inner,
  .portal-workspace .portal-footer-inner {
    width: min(var(--measure-wide), 100%);
  }
  .shell.has-rail {
    width: min(var(--measure-wide), calc(100% - var(--space-10)));
    display: grid;
    grid-template-columns: var(--measure-rail) minmax(0, 1fr);
    /* A tall rail must never stretch the heading row. */
    grid-template-rows: min-content 1fr;
    column-gap: var(--space-12);
    align-items: start;
  }
  .has-rail > .page-intro {
    grid-column: 2;
    grid-row: 1;
  }
  .has-rail > .page-body {
    grid-column: 2;
    grid-row: 2;
  }
  .portal-navigation {
    position: sticky;
    top: var(--space-4);
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: var(--space-12);
  }
  .portal-navigation > summary {
    display: none;
  }
  .portal-navigation .tab-nav {
    border-left: var(--size-hairline) solid var(--color-border);
  }
  .portal-navigation .tab-link {
    margin-left: calc(-1 * var(--size-hairline));
  }
}