/* ggtargets pkgdown theme */

:root {
  --gg-paper: #f6f6f2;
  --gg-white: #ffffff;
  --gg-ink: #24272c;
  --gg-ink-soft: #393d4f;
  --gg-grid: rgb(36 39 44 / 5%);
  --gg-border: #d6d5d1;
  --gg-red: #e8524a;
  --gg-red-dark: #b73732;
  --gg-gold: #c98500;
  --gg-olive: #7c9a00;
  --gg-green: #00a13a;
  --gg-teal: #00a08a;
  --gg-teal-dark: #00786d;
  --gg-blue: #0093c4;
  --gg-blue-dark: #006f94;
  --gg-violet: #a360e0;
  --gg-pink: #e04ba8;
  --gg-surface: #ffffff;
  --gg-surface-translucent: rgb(255 255 255 / 72%);
  --gg-hover: #e3f5f1;
  --gg-selection: #cbeee8;
  --gg-navbar-bg: #f6f6f2;
  --gg-navbar-text: #24272c;
  --gg-navbar-muted: #686b72;
  --gg-code-bg: #ffffff;
  --gg-code-text: #24272c;
  --gg-code-comment: #607800;
  --gg-code-string: #b2337f;
  --gg-code-number: #956200;
  --gg-code-keyword: #365fbd;
  --gg-code-function: #00786d;
  --gg-code-link-hover: #006f94;
  --gg-strong-bg: #24272c;
  --gg-strong-text: #ffffff;
  --gg-shadow: rgb(36 39 44 / 16%);
  --gg-content-shadow: rgb(36 39 44 / 16%);
  --gg-line: var(--gg-teal);
  --gg-station-fill: var(--gg-white);
  --gg-station-ring: var(--gg-strong-bg);
  --bs-body-font-family: "Quicksand", sans-serif;
  --bs-body-color: var(--gg-ink);
  --bs-body-bg: var(--gg-paper);
  --bs-link-color: var(--gg-blue-dark);
  --bs-link-hover-color: var(--gg-red-dark);
  --bs-border-color: var(--gg-border);
  --bs-border-radius: 0.35rem;
  --bs-code-color: var(--gg-red-dark);
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --gg-paper: #0c0e13;
  --gg-white: #f3f4f6;
  --gg-ink: #f3f4f6;
  --gg-ink-soft: #c9cdd6;
  --gg-grid: rgb(243 244 246 / 4%);
  --gg-border: #353b48;
  --gg-red: #ff7b72;
  --gg-red-dark: #ff918a;
  --gg-gold: #ffb547;
  --gg-olive: #c5d94f;
  --gg-green: #4fd98a;
  --gg-teal: #3ccfc0;
  --gg-teal-dark: #70e2d6;
  --gg-blue: #5bb0f9;
  --gg-blue-dark: #77bfff;
  --gg-violet: #b88cff;
  --gg-pink: #ed79ca;
  --gg-surface: #151922;
  --gg-surface-translucent: rgb(21 25 34 / 84%);
  --gg-hover: #252b38;
  --gg-selection: #274a50;
  --gg-navbar-bg: #0c0e13;
  --gg-navbar-text: #f3f4f6;
  --gg-navbar-muted: #b8bec9;
  --gg-code-bg: #080a0f;
  --gg-code-text: #f3f4f6;
  --gg-code-comment: #c5d94f;
  --gg-code-string: #ed79ca;
  --gg-code-number: #ffb547;
  --gg-code-keyword: #8fb1ff;
  --gg-code-function: #62ddd1;
  --gg-code-link-hover: #70e2d6;
  --gg-strong-bg: #202632;
  --gg-strong-text: #f3f4f6;
  --gg-shadow: rgb(0 0 0 / 42%);
  --gg-content-shadow: rgb(243 244 246 / 18%);
  --bs-body-color: var(--gg-ink);
  --bs-body-bg: var(--gg-paper);
  --bs-link-color: var(--gg-blue-dark);
  --bs-link-hover-color: var(--gg-red-dark);
  --bs-border-color: var(--gg-border);
  --bs-emphasis-color: var(--gg-white);
  --bs-secondary-color: var(--gg-ink-soft);
  --bs-tertiary-bg: var(--gg-surface);
  --bs-code-color: var(--gg-red-dark);
}

/* Each part of the site is a metro line with its own colour (--gg-line): the nav marker, the
   section rails, the table of contents and the footer all follow it. The page type is a class
   on the content container, which does not contain the navbar, hence :has() on the body.
   Without :has() support every page keeps the home page's teal. */

body:has(.template-quarto),
body:has(.template-article-index) {
  --gg-line: var(--gg-blue);
}

body:has(.template-reference-index),
body:has(.template-reference-topic) {
  --gg-line: var(--gg-red);
}

body:has(.template-news) {
  --gg-line: var(--gg-gold);
}

body:has(.template-citation-authors),
body:has(.template-title-body) {
  --gg-line: var(--gg-violet);
}

/* the Get started article is the only page whose navbar entry for it is the active one */
body:has(.navbar .active > a[href$="ggtargets.html"]) {
  --gg-line: var(--gg-violet);
}

html {
  scroll-padding-top: 6.5rem;
}

body {
  padding-top: 6rem;
  background-color: var(--gg-paper);
  background-image:
    linear-gradient(var(--gg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--gg-grid) 1px, transparent 1px);
  background-position: center top;
  background-size: 42px 42px;
  color: var(--gg-ink);
  font-weight: 500;
  line-height: 1.7;
}

::selection {
  background: var(--gg-selection);
  color: var(--gg-ink);
}

a {
  color: var(--gg-blue-dark);
  text-decoration-color: color-mix(in srgb, var(--gg-blue-dark) 45%, transparent);
  text-underline-offset: 0.16em;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

a:hover,
a:focus {
  color: var(--gg-red-dark);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 3px solid var(--gg-gold);
  outline-offset: 3px;
}

/* Navigation -------------------------------------------------------------- */

.navbar {
  min-height: 4.5rem;
  border: 0;
  background: var(--gg-navbar-bg) !important;
  box-shadow: 0 3px 0 var(--gg-shadow);
}

.navbar::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--gg-red) 0 22%,
    var(--gg-gold) 22% 31%,
    var(--gg-olive) 31% 52%,
    var(--gg-green) 52% 60%,
    var(--gg-teal) 60% 79%,
    var(--gg-blue) 79% 90%,
    var(--gg-violet) 90% 100%
  );
  content: "";
}

.navbar .navbar-brand {
  position: relative;
  color: var(--gg-navbar-text);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: var(--gg-navbar-text);
}

.navbar .nav-text,
.navbar .text-muted {
  color: var(--gg-navbar-muted) !important;
  font-weight: 600;
}

.navbar .navbar-nav .nav-link {
  position: relative;
  margin: 0 0.1rem;
  padding: 0.65rem 0.75rem;
  color: var(--gg-navbar-text);
  font-weight: 650;
  text-decoration: none;
}

.navbar .navbar-nav .nav-link:not(.dropdown-toggle)::after {
  position: absolute;
  right: 0.75rem;
  bottom: 0.3rem;
  left: 0.75rem;
  height: 4px;
  border-radius: 4px;
  background: var(--gg-line);
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 140ms ease, transform 140ms ease;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .active > .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link {
  color: var(--gg-navbar-text);
}

.navbar .navbar-nav .nav-link:not(.dropdown-toggle):hover::after,
.navbar .navbar-nav .nav-link:not(.dropdown-toggle):focus::after,
.navbar .navbar-nav .active > .nav-link:not(.dropdown-toggle)::after,
.navbar .navbar-nav .nav-item.active .nav-link:not(.dropdown-toggle)::after {
  opacity: 1;
  transform: scaleX(1);
}

.navbar .navbar-nav .dropdown-toggle {
  background-image: linear-gradient(var(--gg-line), var(--gg-line));
  background-position: center calc(100% - 0.3rem);
  background-repeat: no-repeat;
  background-size: 0 4px;
}

.navbar .navbar-nav .dropdown-toggle:hover,
.navbar .navbar-nav .dropdown-toggle:focus,
.navbar .navbar-nav .dropdown-toggle[aria-expanded="true"],
.navbar .navbar-nav .nav-item.active .dropdown-toggle {
  background-size: calc(100% - 1.5rem) 4px;
}

.navbar .form-control {
  width: min(15rem, 32vw);
  border: 2px solid var(--gg-border);
  border-radius: 999px;
  background: var(--gg-surface);
  color: var(--gg-ink);
  font-weight: 600;
}

.navbar .form-control:focus {
  border-color: var(--gg-teal);
  box-shadow: 0 0 0 0.2rem rgb(0 160 138 / 28%);
}

.navbar-toggler {
  border: 2px solid var(--gg-navbar-text);
  border-radius: 6px;
  color: var(--gg-navbar-text);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgb(0 160 138 / 40%);
}

.navbar-toggler-icon {
  filter: none;
}

.dropdown-menu,
.autocomplete-suggestions {
  border: 2px solid var(--gg-ink);
  border-radius: 6px;
  background: var(--gg-surface);
  box-shadow: 6px 6px 0 var(--gg-shadow);
}

.dropdown-menu {
  max-height: min(70vh, 32rem);
  overflow-x: hidden;
  overflow-y: auto;
}

.autocomplete-suggestions {
  overflow: hidden;
}

.dropdown-item:hover,
.dropdown-item:focus,
.autocomplete-suggestion:hover,
.autocomplete-selected {
  background: var(--gg-hover);
  color: var(--gg-ink);
}

#dropdown-lightswitch {
  border: 0;
  color: var(--gg-navbar-text);
  box-shadow: none;
}

#dropdown-lightswitch:hover,
#dropdown-lightswitch:focus {
  color: var(--gg-navbar-text);
}

/* Page structure ---------------------------------------------------------- */

body > .container {
  padding-top: 1.75rem;
  padding-bottom: 2rem;
}

main {
  min-width: 0;
  padding-right: clamp(1rem, 3vw, 3rem) !important;
}

.page-header {
  margin: 0 0 2rem;
  padding: 1rem 0 1.15rem;
  border-bottom: 0;
}

.page-header h1,
h1 {
  margin: 0;
  color: var(--gg-ink);
  font-size: clamp(2.35rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

.page-header h1::after {
  display: block;
  width: min(11rem, 42%);
  height: 9px;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gg-red) 0 48%, var(--gg-gold) 48% 68%, var(--gg-olive) 68%);
  content: "";
}

h2,
h3,
h4,
h5,
h6 {
  color: var(--gg-ink);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
}

h2 {
  margin-top: 2.8rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.55rem;
  border-bottom: 3px solid var(--gg-border);
  font-size: 1.75rem;
}

h3 {
  margin-top: 2rem;
  font-size: 1.35rem;
}

h2 .anchor,
h3 .anchor,
h4 .anchor {
  color: var(--gg-teal-dark);
}

/* Page sections on one line: a rail down the left of every h2 section in the page's colour,
   a station at each heading, a small one at each h3. Articles use <section class="level2">,
   the other pages <div class="section level2">. The reference index draws its own lines
   (see "Reference pages"). The rail runs on through the gap to the next heading
   (2.8rem, the h2's top margin, plus the 1.1rem down to its station) and stops at the last. */

.container:not(.template-reference-index) main :is(section, .section).level2:has(> h2) {
  --gg-rail-gap: 1.75rem;
  position: relative;
  margin-left: 0.5rem;
  padding-left: var(--gg-rail-gap);
}

.container:not(.template-reference-index) main :is(section, .section).level2:has(> h2)::before {
  position: absolute;
  top: 1.1rem;
  bottom: calc(-2.8rem - 1.1rem);
  left: 0;
  width: 5px;
  border-radius: 5px;
  background: var(--gg-line);
  content: "";
}

.container:not(.template-reference-index) main :is(section, .section).level2:has(> h2):last-of-type::before {
  bottom: 0;
}

.container:not(.template-reference-index) main :is(section, .section).level2 > h2 {
  position: relative;
  margin-top: 2.8rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.container:not(.template-reference-index) main :is(section, .section).level2 > h2::before {
  position: absolute;
  top: calc(0.625em - 9px);
  left: calc(2.5px - var(--gg-rail-gap) - 9px);
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 3px solid var(--gg-station-ring);
  border-radius: 50%;
  background: var(--gg-station-fill);
  content: "";
}

.container:not(.template-reference-index) main :is(section, .section).level2 :is(section, .section).level3 > h3 {
  position: relative;
}

.container:not(.template-reference-index) main :is(section, .section).level2 :is(section, .section).level3 > h3::before {
  position: absolute;
  top: calc(0.625em - 6px);
  left: calc(2.5px - var(--gg-rail-gap, 1.75rem) - 6px);
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 2px solid var(--gg-station-ring);
  border-radius: 50%;
  background: var(--gg-station-fill);
  content: "";
}

/* "On this page": the table of contents as a route. bootstrap-toc builds
   #toc > ul.nav > li > a.nav-link (nested ul.nav for h3s, shown under the active entry);
   pkgdown/extra.js sets .active on the section being read (pkgdown's own scrollspy lit entries
   only while their heading was on screen). The list is the line, each entry a station, the
   section being read the filled one. pkgdown pins #toc at top: 56px, which is under this
   taller navbar. */

#toc {
  top: 6rem;
  max-height: calc(100vh - 7rem);
}

#toc h2 {
  margin: 0 0 0.9rem;
  padding: 0;
  border-bottom: 0;
  color: var(--gg-ink-soft);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#toc > .nav {
  margin: 0 0 1rem 0.6rem;
  padding: 0;
  border-left: 4px solid transparent;
}

#toc > .nav a.nav-link {
  position: relative;
  padding: 0.25rem 0.5rem 0.25rem 1.2rem;
  border-radius: 0;
  color: var(--gg-ink-soft);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
}

#toc > .nav a.nav-link:hover,
#toc > .nav a.nav-link:focus,
#toc > .nav a.nav-link.active {
  background: transparent;
  color: var(--gg-ink);
}

#toc > .nav a.nav-link.active {
  font-weight: 700;
}

/* the line is 4px wide and runs 2px left of the link's edge; the dot is centred on it, above
   the line's pieces (z-index) */
#toc > .nav a.nav-link::before {
  position: absolute;
  z-index: 1;
  top: calc(0.25rem + 0.725em - 7px);
  left: -9px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid var(--gg-station-ring);
  border-radius: 50%;
  background: var(--gg-station-fill);
  content: "";
  transition: transform 140ms ease, background-color 140ms ease;
}

#toc > .nav a.nav-link:hover::before,
#toc > .nav a.nav-link:focus::before {
  background: var(--gg-line);
}

#toc > .nav a.nav-link.active::before {
  background: var(--gg-line);
  transform: scale(1.3);
}

/* nested entries are indented 0.5rem by pkgdown; their station is smaller, on the same line */
#toc > .nav .nav a.nav-link::before {
  top: calc(0.25rem + 0.725em - 5px);
  left: calc(-0.5rem - 7px);
  width: 10px;
  height: 10px;
  border-width: 1.5px;
}

/* The line is drawn as one piece per entry (the list's own left border is transparent, only to
   keep the entries where they were). A piece spans its entry plus the 2px pkgdown leaves below
   it, so the pieces join. The first entry's piece starts at its station and the last visible
   entry's piece stops at its station (the first line of its text, where the dot is), so the line
   never runs past the first and last stations. The last visible entry is the last top-level one
   when it has no nested list or its list is hidden (it is not active); otherwise it is the last
   entry of that nested list. */
#toc > .nav a.nav-link::after {
  position: absolute;
  top: 0;
  bottom: -2px;
  left: -4px;
  width: 4px;
  background: var(--gg-line);
  content: "";
}

#toc > .nav .nav a.nav-link::after {
  left: calc(-0.5rem - 4px);
}

#toc > .nav > li:first-child > a.nav-link::after {
  top: calc(0.25rem + 0.725em);
}

#toc > .nav > li:last-child > a.nav-link:last-child::after,
#toc > .nav > li:last-child > a.nav-link:not(.active)::after,
#toc > .nav > li:last-child > a.nav-link.active + .nav > li:last-child > a.nav-link:last-child::after {
  bottom: calc(100% - 0.25rem - 0.725em);
}

p,
ul,
ol,
dl {
  max-width: 78ch;
}

main img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--gg-content-shadow);
}

.landing-figure {
  margin: 1.5rem 0;
}

.landing-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  background: #ffffff;
}

/* Home sidebar: the hex sticker above the links (a pkgdown sidebar component; the wrapper
   class is the slug of its title in _pkgdown.yml). The heading stays for screen readers. */

.template-home aside .hex-sticker h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.template-home aside .hex-sticker ul,
.template-home aside .hex-sticker li,
.template-home aside .hex-sticker p {
  margin: 0;
  padding: 0;
}

.template-home aside .ggtargets-logo {
  display: block;
  width: min(180px, 12rem);
  height: auto;
  margin-top: 1.25rem;
  filter: drop-shadow(0 8px 16px var(--gg-shadow)) drop-shadow(0 0 14px var(--gg-content-shadow));
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}

.template-home aside .ggtargets-logo:hover {
  filter: drop-shadow(0 10px 18px var(--gg-shadow)) drop-shadow(0 0 22px var(--gg-content-shadow));
  transform: rotate(-2deg) scale(1.06);
}

/* the light switch sets data-bs-theme on <html>; show the logo that matches it */
.template-home aside .ggtargets-logo-dark,
[data-bs-theme="dark"] .template-home aside .ggtargets-logo-light {
  display: none;
}

[data-bs-theme="dark"] .template-home aside .ggtargets-logo-dark {
  display: block;
}

.template-home main > .section > p:first-of-type {
  max-width: 68ch;
  color: var(--gg-ink-soft);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.7;
}

hr {
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gg-teal), var(--gg-blue), var(--gg-violet));
  opacity: 1;
}

/* Code -------------------------------------------------------------------- */

code,
kbd,
samp,
pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

:not(pre) > code {
  padding: 0.12rem 0.32rem;
  border: 1px solid var(--gg-border);
  border-radius: 4px;
  background: var(--gg-surface);
  color: var(--gg-red-dark);
  font-size: 0.9em;
  font-weight: 600;
  overflow-wrap: anywhere;
}

:not(pre) > code a {
  color: var(--gg-blue-dark);
}

div.sourceCode {
  position: relative;
  margin: 1.25rem 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--gg-code-bg);
  box-shadow: 4px 4px 0 var(--gg-content-shadow);
}

pre {
  margin: 0;
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  background: var(--gg-code-bg);
  color: var(--gg-code-text);
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre;
}

pre code,
pre code a,
pre a {
  color: var(--gg-code-text);
}

pre code a:hover,
pre a:hover {
  color: var(--gg-code-link-hover);
}

.sourceCode .co {
  color: var(--gg-code-comment);
}

.sourceCode .st {
  color: var(--gg-code-string);
}

.sourceCode .fl,
.sourceCode .dv {
  color: var(--gg-code-number);
}

.sourceCode .kw,
.sourceCode .cf {
  color: var(--gg-code-keyword);
}

.sourceCode .fu {
  color: var(--gg-code-function);
}

.sourceCode .op {
  color: var(--gg-code-text);
}

.btn-copy-ex,
.btn-copy,
.btn-copy-ex .fa,
.btn-copy .fa {
  color: var(--gg-strong-text) !important;
  -webkit-text-fill-color: var(--gg-strong-text);
}

[data-bs-theme="dark"] :not(pre) > code {
  border-color: var(--gg-border);
  background: var(--gg-surface);
  color: var(--gg-red-dark);
}

[data-bs-theme="dark"] div.sourceCode,
[data-bs-theme="dark"] div.sourceCode pre {
  background: var(--gg-code-bg);
}

[data-bs-theme="dark"] pre,
[data-bs-theme="dark"] pre code,
[data-bs-theme="dark"] pre code a,
[data-bs-theme="dark"] pre a {
  color: var(--gg-code-text);
}

/* Reference pages --------------------------------------------------------- */

.ref-description {
  color: var(--gg-ink-soft);
  font-size: 1.08rem;
}

.template-reference-index main dd {
  color: var(--gg-ink-soft);
}

/* The index as a metro map: one continuous line (the page's red) runs from the first group's
   number through every function and on to the footer. A group heading is a big numbered
   station, a function a small one with a dashed leader to its description like the plot labels.
   pkgdown writes a group as two sibling .section.level2 (the heading with an empty dl, then the
   entries). --gg-rail-x is the line's left edge; the footer's line rises there. */

.template-reference-index {
  --gg-rail-x: calc(1.05rem - 2.5px);
}

.template-reference-index main {
  counter-reset: gg-line;
}

.template-reference-index main h2 {
  margin-top: 3rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0;
  border-bottom: 0;
  counter-increment: gg-line;
}

/* the group's number, in a ring of the line's colour */
.template-reference-index main h2::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.1rem;
  height: 2.1rem;
  margin-right: 0.7rem;
  border: 4px solid var(--gg-line);
  border-radius: 50%;
  background: var(--gg-station-fill);
  color: var(--gg-station-ring);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.1em;
  content: counter(gg-line);
}

.template-reference-index main dl:empty {
  display: none;
}

/* The rail's centre is the number's centre (1.05rem from the left). It runs from the centre of
   one number (2.2rem above the entries: the heading's 1.1rem margin plus half its line) to the
   centre of the next (past the entries' end, over the 3rem gap, plus half a line). It is drawn
   under the numbers (z-index -1), so their white fill and ring cover the rail's ends and the
   exact position of a number inside its line does not matter; the stations are positioned and
   stay on top. After the last group it stops at the last station (half a row up) and the
   footer's line takes over. */
.template-reference-index main dl {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6rem 0.75rem;
  max-width: none;
  margin: 0 0 1rem var(--gg-rail-x);
  padding-left: 2.25rem;
}

.template-reference-index main dl::before {
  position: absolute;
  z-index: -1;
  top: -2.2rem;
  bottom: calc(-3rem - 1.1rem);
  left: 0;
  width: 5px;
  border-radius: 5px;
  background: var(--gg-line);
  content: "";
}

.template-reference-index main .section.level2:last-of-type dl::before {
  bottom: 0.85rem;
}

.template-reference-index main dt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.template-reference-index main dt::before {
  position: absolute;
  top: 50%;
  left: calc(2.5px - 2.25rem - 7px);
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid var(--gg-station-ring);
  border-radius: 50%;
  background: var(--gg-station-fill);
  content: "";
}

.template-reference-index main dt::after {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-top: 2px dashed var(--gg-border);
  content: "";
}

.template-reference-index main dd {
  margin: 0;
}

/* Components -------------------------------------------------------------- */

table {
  width: 100%;
  margin: 1.25rem 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--gg-ink);
  border-radius: 6px;
  background: var(--gg-surface-translucent);
  overflow: hidden;
}

table th {
  border-color: var(--gg-strong-bg) !important;
  background: var(--gg-strong-bg) !important;
  color: var(--gg-strong-text) !important;
  font-weight: 700;
}

table th,
table td {
  padding: 0.7rem 0.8rem !important;
  vertical-align: top;
}

table tbody tr:nth-child(even) td {
  background: rgb(0 160 138 / 7%);
}

blockquote {
  margin: 1.5rem 0;
  padding: 0.9rem 1.25rem;
  border-left: 7px solid var(--gg-violet);
  background: var(--gg-surface-translucent);
  color: var(--gg-ink-soft);
}

.alert,
.callout {
  border: 2px solid var(--gg-ink);
  border-left-width: 7px;
  border-radius: 6px;
  background: var(--gg-surface);
  color: var(--gg-ink);
  box-shadow: 4px 4px 0 var(--gg-shadow);
}

.alert-info,
.callout-note {
  border-left-color: var(--gg-blue);
}

.alert-warning,
.callout-warning {
  border-left-color: var(--gg-gold);
}

.btn {
  border: 2px solid var(--gg-ink);
  border-radius: 6px;
  font-weight: 700;
}

.btn-primary {
  border-color: var(--gg-strong-bg);
  background: var(--gg-strong-bg);
  color: var(--gg-strong-text);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: var(--gg-red-dark);
  background: var(--gg-red-dark);
}

.form-control,
.form-select {
  border: 2px solid var(--gg-border);
  border-radius: 6px;
  background-color: var(--gg-surface);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--gg-teal-dark);
  box-shadow: 0 0 0 0.2rem rgb(0 160 138 / 20%);
}

.badge {
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 700;
}

/* Footer ------------------------------------------------------------------ */

footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 4rem;
  padding: 2.1rem 0 1.4rem;
  border-top: 0;
  color: var(--gg-ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* the page's line ends here: the strip runs out to a terminus, an interchange pill. The strip
   is 5px tall, the pill 19px, so the pill starts 7px above the footer; the strip runs under it
   to its middle (half of 2.6rem). */
footer::before {
  position: absolute;
  top: 0;
  right: 1.3rem;
  left: 0;
  height: 5px;
  border-radius: 5px;
  background: var(--gg-line);
  content: "";
}

footer::after {
  position: absolute;
  top: -7px;
  right: 0;
  box-sizing: border-box;
  width: 2.6rem;
  height: 19px;
  border: 3px solid var(--gg-station-ring);
  border-radius: 999px;
  background: var(--gg-station-fill);
  content: "";
}

/* Where the page has the heading line, the footer's line rises at its left end to join it: an
   L with a rounded corner, whose vertical part is the rail's own column (0.5rem in, 5px wide;
   the reference index sets --gg-rail-x for its own column). It starts 7rem up, well inside the
   last rail, because the gap above the footer (4rem plus the last element's margin) varies;
   over the rail it is the same colour, so the overlap does not show. z-index -1 keeps it under
   the rail's stations. Pages without headings have no rail and keep the plain strip. */
.container:has(main :is(section, .section).level2 > h2) footer::before {
  z-index: -1;
  top: -7rem;
  left: var(--gg-rail-x, 0.5rem);
  box-sizing: border-box;
  height: calc(7rem + 5px);
  border-bottom: 5px solid var(--gg-line);
  border-left: 5px solid var(--gg-line);
  border-radius: 0 0 0 1.5rem;
  background: none;
}

footer p {
  margin: 0;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    margin: 0.75rem 0 0 !important;
    padding: 0.7rem 0 1rem;
    border-top: 1px solid var(--gg-border);
  }

  .navbar .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
  }

  .navbar .navbar-nav .nav-link:not(.dropdown-toggle)::after {
    right: auto;
    left: 0;
    width: 2.75rem;
  }

  .navbar .navbar-nav .dropdown-toggle {
    background-position: left calc(100% - 0.3rem);
  }

  .navbar .navbar-nav .dropdown-toggle:hover,
  .navbar .navbar-nav .dropdown-toggle:focus,
  .navbar .navbar-nav .dropdown-toggle[aria-expanded="true"],
  .navbar .navbar-nav .nav-item.active .dropdown-toggle {
    background-size: 2.75rem 4px;
  }

  .navbar .dropdown-menu {
    position: static !important;
    width: 100%;
    margin: 0.25rem 0 0.75rem;
    border-color: var(--gg-border);
    box-shadow: none;
  }

  .navbar .dropdown-item,
  .navbar .dropdown-header {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    white-space: normal;
  }

  .navbar .form-control {
    width: 100%;
    margin-top: 0.5rem;
  }
}

@media (max-width: 767.98px) {
  body {
    padding-top: 5.5rem;
    background-size: 32px 32px;
  }

  body > .container {
    padding-right: 1.15rem;
    padding-left: 1.15rem;
  }

  main {
    padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
  }

  .page-header {
    margin-bottom: 1rem;
  }

  .page-header h1,
  h1 {
    font-size: 2.4rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .template-home aside {
    margin-top: 2rem;
    margin-left: calc(var(--bs-gutter-x) * 0.5);
    border-top: 2px solid var(--gg-border);
    border-left-color: var(--gg-green);
  }

  .container:not(.template-reference-index) main :is(section, .section).level2:has(> h2) {
    --gg-rail-gap: 1.4rem;
  }

  .template-reference-index main dl {
    display: block;
  }

  .template-reference-index main dt {
    padding-bottom: 0.15rem;
    border-bottom: 0;
  }

  .template-reference-index main dt::after {
    display: none;
  }

  .template-reference-index main dd {
    padding-top: 0;
    padding-left: 0;
    margin-bottom: 0.7rem;
  }

  pre {
    padding: 1rem;
    font-size: 0.8rem;
  }

  footer {
    display: block;
  }

  .pkgdown-footer-right {
    margin-top: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .template-home aside .ggtargets-logo:hover {
    transform: none;
  }
}

@media print {
  body {
    padding-top: 0;
    background: var(--gg-white);
  }

  .navbar,
  .template-home aside,
  footer {
    display: none !important;
  }

  main {
    width: 100% !important;
  }
}