/* Documentation site styles. Everything on the page that is not a component. */

.docs-logo {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  color: var(--ag-color-primary);
}

.docs-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--ag-space-2);
  font-size: var(--ag-font-size-md);
}

.docs-logo--footer {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--ag-color-ink-inverse);
}

/* Country indicator in the notice bar. */
.docs-pack {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ag-space-2);
  margin: 0 0 0 auto;
  font-size: var(--ag-font-size-xs);
}

.docs-pack__flag {
  width: 1.25rem;
  height: 0.85rem;
}

:root:not([data-ag-pack]) .docs-pack__flag {
  display: none;
}

.docs-pack__label {
  color: var(--ag-color-ink-muted);
}

.docs-pack__current {
  font-weight: var(--ag-font-weight-bold);
}

.docs-pack__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--ag-space-1);
}

.docs-pack__neutral {
  display: inline-block;
  width: 1.25rem;
  height: 0.85rem;
  border: 1px solid var(--ag-color-border-strong);
  background: var(--ag-color-paper-alt);
}

/* Country preview cards on the packs page. */
.docs-pack-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--ag-space-4);
  margin: 0 0 var(--ag-space-6);
  padding: 0;
  list-style: none;
}

.docs-pack-card {
  display: flex;
  flex-direction: column;
  gap: var(--ag-space-2);
  margin: 0;
  padding: var(--ag-space-4);
  border: 1px solid var(--ag-color-border);
}

.docs-pack-card__flag {
  width: 3rem;
  height: 2rem;
  margin-bottom: var(--ag-space-2);
}

.docs-pack-card__title {
  margin: 0;
  font-size: var(--ag-font-size-md);
}

.docs-pack-card p {
  margin: 0;
  font-size: var(--ag-font-size-xs);
}

.docs-pack-card .ag-button {
  margin-top: auto;
  align-self: flex-start;
}

/* Page layout: optional section sidebar beside the content. */
.docs-layout {
  display: grid;
  gap: var(--ag-space-6);
}

@media (min-width: 64em) {
  .docs-layout--sidebar {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--ag-space-8);
    align-items: start;
  }
}

.docs-content {
  min-width: 0;
}

.docs-content > h1:first-child,
.docs-content > .docs-eyebrow + h1 {
  margin-top: 0;
}

.docs-content > h2 {
  padding-top: var(--ag-space-4);
}

.docs-content > p,
.docs-content > ul:not(.docs-pack-cards, .docs-swatches),
.docs-content > ol {
  max-width: var(--ag-size-measure);
}

.docs-sidebar {
  order: 2; /* below the content on small screens */
  font-size: var(--ag-font-size-xs);
}

@media (min-width: 64em) {
  .docs-sidebar {
    order: 0;
    position: sticky;
    top: var(--ag-space-4);
  }
}

.docs-sidebar__heading {
  margin: 0 0 var(--ag-space-2);
  font-weight: var(--ag-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ag-color-ink-muted);
}

.docs-sidebar__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ag-color-border);
}

.docs-sidebar__list li {
  margin: 0;
  border-bottom: 1px solid var(--ag-color-border);
}

.docs-sidebar__list a {
  display: flex;
  align-items: center;
  min-height: var(--ag-size-target);
  padding: var(--ag-space-2) var(--ag-space-3);
  color: var(--ag-color-ink);
  text-decoration: none;
  border-left: 4px solid transparent;
}

.docs-sidebar__list a:visited {
  color: var(--ag-color-ink);
}

.docs-sidebar__list a:hover {
  text-decoration: underline;
}

.docs-sidebar__list a[aria-current="page"] {
  border-left-color: var(--ag-color-primary);
  background: var(--ag-color-primary-tint);
  font-weight: var(--ag-font-weight-bold);
}

/* Home page. */
.docs-eyebrow {
  margin-bottom: var(--ag-space-3);
  color: var(--ag-color-ink-muted);
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docs-home {
  margin-bottom: var(--ag-space-7);
}

/* The toolkit: one card per tool, under the opening. */
.docs-toolkit {
  margin-bottom: var(--ag-space-7);
}

.docs-toolkit h2,
.docs-system h2 {
  margin-top: 0;
}

.docs-toolkit__intro {
  max-width: var(--ag-size-measure);
  color: var(--ag-color-ink-muted);
}

.docs-toolkit__tools {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-toolkit__tools .docs-card {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.docs-toolkit__tools .docs-code {
  margin: auto 0 0;
  font-size: var(--ag-font-size-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.docs-toolkit__tools h3 .ag-badge {
  display: table;
  margin-top: var(--ag-space-2);
}

/* The design system's own section: its version, install and numbers. */
.docs-system {
  padding-top: var(--ag-space-6);
  padding-bottom: var(--ag-space-6);
  margin-bottom: var(--ag-space-6);
  border-top: 1px solid var(--ag-color-border);
  border-bottom: 1px solid var(--ag-color-border);
}

.docs-home h1 {
  max-width: 20ch;
}

.docs-home .ag-lead {
  max-width: var(--ag-size-measure);
}

.docs-home__install {
  max-width: 48rem;
  margin-top: var(--ag-space-5);
}

.docs-home__install-label {
  margin: 0 0 var(--ag-space-2);
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ag-color-ink-muted);
}

.docs-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ag-space-4);
  margin: var(--ag-space-6) 0 0;
  padding-top: var(--ag-space-5);
  border-top: 1px solid var(--ag-color-border);
}

@media (min-width: 40em) {
  .docs-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.docs-stats dt {
  color: var(--ag-color-ink-muted);
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-normal);
}

.docs-stats dd {
  margin: 0;
  font-size: var(--ag-font-size-xl);
  font-weight: var(--ag-font-weight-bold);
  line-height: var(--ag-font-leading-tight);
}

.docs-home__cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-bottom: var(--ag-space-7);
}

.docs-card {
  padding: var(--ag-space-5);
  border: 1px solid var(--ag-color-border);
  border-top: 4px solid var(--ag-color-primary);
}

.docs-card h2,
.docs-card h3 {
  margin-top: 0;
  font-size: var(--ag-font-size-lg);
}

.docs-card p:last-child {
  margin-bottom: 0;
}

.docs-card--link {
  display: block;
  color: var(--ag-color-ink);
  text-decoration: none;
}

.docs-card--link:visited {
  color: var(--ag-color-ink);
}

.docs-card--link h2 {
  color: var(--ag-color-link);
  text-decoration: underline;
}

.docs-card--link:hover {
  border-color: var(--ag-color-primary);
  color: var(--ag-color-ink);
}

.docs-card--link:hover h2 {
  text-decoration-thickness: 3px;
}

.docs-home__why {
  display: grid;
  gap: var(--ag-space-5) var(--ag-space-8);
  padding-top: var(--ag-space-6);
  border-top: 1px solid var(--ag-color-border);
}

@media (min-width: 64em) {
  .docs-home__why {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

.docs-home__why-intro h2 {
  margin-top: 0;
}

.docs-home__why-intro p {
  max-width: 32ch;
  color: var(--ag-color-ink-muted);
}

.docs-reasons {
  display: grid;
  gap: var(--ag-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: reason;
}

@media (min-width: 40em) {
  .docs-reasons {
    grid-template-columns: 1fr 1fr;
  }
}

.docs-reasons li {
  margin: 0;
  padding-top: var(--ag-space-3);
  border-top: 2px solid var(--ag-color-primary);
  counter-increment: reason;
}

.docs-reasons li::before {
  content: "0" counter(reason);
  display: block;
  margin-bottom: var(--ag-space-2);
  color: var(--ag-color-ink-muted);
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-bold);
  letter-spacing: 0.06em;
}

.docs-reasons h3 {
  margin: 0 0 var(--ag-space-2);
  font-size: var(--ag-font-size-md);
}

.docs-reasons p {
  margin: 0;
}

/* Examples. */
.docs-example {
  margin-bottom: var(--ag-space-5);
  border: 1px solid var(--ag-color-border);
}

.docs-example__label {
  margin: 0;
  padding: var(--ag-space-2) var(--ag-space-4);
  border-bottom: 1px solid var(--ag-color-border);
  background: var(--ag-color-paper-alt);
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-bold);
}

.docs-example__preview {
  padding: var(--ag-space-4);
}

.docs-example__preview > :last-child {
  margin-bottom: 0;
}

.docs-example__preview--flush {
  padding: 0;
}

.docs-example__code {
  border-top: 1px solid var(--ag-color-border);
}

.docs-example__code summary {
  display: flex;
  align-items: center;
  min-height: var(--ag-size-target);
  padding-inline: var(--ag-space-4);
  background: var(--ag-color-paper-alt);
  font-weight: var(--ag-font-weight-bold);
  cursor: pointer;
}

.docs-example__code pre {
  margin: 0;
  padding: var(--ag-space-4);
  background: var(--ag-color-paper-dark);
  color: var(--ag-color-ink-inverse);
  font-size: var(--ag-font-size-xs);
  line-height: 1.6;
}

.docs-code {
  padding: var(--ag-space-4);
  background: var(--ag-color-paper-dark);
  color: var(--ag-color-ink-inverse);
  font-size: var(--ag-font-size-xs);
  line-height: 1.6;
}

/* Swatches and tables. */
.docs-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--ag-space-3);
  margin: 0 0 var(--ag-space-5);
  padding: 0;
  list-style: none;
}

.docs-swatches li {
  margin: 0;
  border: 1px solid var(--ag-color-border);
  font-size: var(--ag-font-size-xs);
}

.docs-swatch {
  height: 3.5rem;
  background: var(--_docs-swatch);
}

.docs-swatch--inline {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: var(--ag-space-2);
  border: 1px solid var(--ag-color-border);
  vertical-align: -0.15em;
}

.docs-swatches code {
  display: block;
  padding: var(--ag-space-1) var(--ag-space-2);
  overflow-wrap: anywhere;
}

.docs-swatches code:last-child {
  padding-bottom: var(--ag-space-2);
}

.docs-link-list {
  margin: 0 0 var(--ag-space-5);
  padding: 0;
  list-style: none;
}

.docs-link-list li {
  margin: 0;
  padding-block: var(--ag-space-2);
  border-bottom: 1px solid var(--ag-color-border);
}

.docs-type-scale__item {
  margin: 0 0 var(--ag-space-3);
  line-height: var(--ag-font-leading-tight);
}

.docs-lang {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ag-space-1) var(--ag-space-4);
  margin: 0 0 var(--ag-space-5);
  padding: 0;
  list-style: none;
  font-size: var(--ag-font-size-lg);
}

@media (min-width: 48em) {
  .docs-lang {
    grid-template-columns: 8rem 1fr;
  }
}

.docs-lang > div {
  display: contents;
}

.docs-lang dt {
  color: var(--ag-color-ink-muted);
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-bold);
  align-self: center;
}

.docs-lang dd {
  margin: 0 0 var(--ag-space-3);
  max-width: var(--ag-size-measure);
}

.docs-lang dd[dir="rtl"] {
  justify-self: start;
}

.docs-fine {
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-ink-muted);
}

/* Accessibility check page. */
.docs-scoreboard th[scope="row"] {
  min-width: 12rem;
}

.docs-scoreboard td {
  font-size: var(--ag-font-size-xs);
  vertical-align: top;
}

.docs-grade-word {
  font-weight: var(--ag-font-weight-bold);
}

.docs-trend {
  display: block;
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-normal);
  color: var(--ag-color-ink-muted);
}

.docs-trend--up {
  color: var(--ag-color-success);
}

.docs-trend--down {
  color: var(--ag-color-error);
}

/* The site's own header. The documentation has more sections than a service has links, so the
   tagline is short enough for one line and the links sit closer together. That keeps the
   navigation on one row beside the logo. 64em = breakpoint.lg */
@media (min-width: 64em) {
  .docs-site-header .ag-header__sub {
    white-space: nowrap;
  }

  .docs-site-header .ag-nav {
    gap: 0;
  }

  .docs-site-header .ag-nav__link {
    padding-inline: var(--ag-space-2);
  }
}

/* Between the breakpoint and a wide laptop there is no room for the tagline beside seven links.
   How much room depends on the visitor's system font, which is wider on Linux than on a Mac,
   so the tagline waits for a screen where it fits with any of them. */
@media (min-width: 64em) and (max-width: 79.99em) {
  .docs-site-header .ag-header__sub {
    display: none;
  }
}

/* On phones the country preview indicator goes under the notice, so the notice keeps the full width. */
@media (max-width: 40em) {
  .docs-pack {
    flex-basis: 100%;
    margin-inline-start: 0;
  }
}