/* fonts */
body { font-family: sans-serif }

/* layout */
/*
 * bootstrap 4 migration says, "Dropped .page-header as, aside from
 * the border, all its styles can be applied via utilities."
 */
.page-header { margin-top:20px; margin-bottom: 20px }
/* spacing and curves based off of gollum and primer.css */
pre { padding: 6px 10px }
pre { border-radius: 3px }
li { padding: 6px 2px; }

blockquote { margin-left: 10px }
blockquote { padding: 16px 20px }
blockquote p:last-child { margin-bottom: 4px }

/* borders */
pre { border: 1px solid #ccc }
blockquote { border: 1px solid #bbb }
img.screenshot { border: 1px solid var(--fg85) }

/* colors */
:root {
    --teal: #006177;
    --teal10: #00617718;
    --teal75: #006177c0;
    --aqua: #00c6bc;
    --fg65: #000000a5;
    --fg85: #000000d8;
    --bg9fg1: #eee;
}
.language-pluckeye { color: darkblue; }
.language-text-plain { color: grey; }
.plucky-teal { color: #006177 }
.plucky-aqua { color: #00C6BC }
#page-toc nav a { color: inherit }
#sidebar a.active { background-color: var(--bg9fg1) }
#sidebar a { color: var(--fg65) }
#sidebar a:hover { color: var(--fg85); background-color: var(--teal10) }
#sidebar a:focus { color: var(--fg85); background-color: var(--teal10) }
#sidebar .btn { color: var(--fg65); background-color: transparent }
#sidebar .btn:hover { color: var(--fg85); background-color: var(--teal10) }
#sidebar .btn:focus { color: var(--fg85); background-color: var(--teal10) }
#sidebar .btn:focus { box-shadow: 0 0 0 1px background-color: var(--teal65) }
#sidebar .btn[aria-expanded="true"] { color: var(--fg85) }
#sidebar .active { color: var(--fg85) }

/* prevent faq.html from looking terrible on small screens */
img { max-width: 100% }

/*
 * Style based on Bootstrap Docs (https://getbootstrap.com/), and heavily modified.
 *
 * Bootstrap Docs uses the following Copyright and license:
 *
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 * For details, see https://creativecommons.org/licenses/by/3.0/.
 */
#sidebar { grid-area: sidebar }
main { grid-area: main }
@media (max-width: 767.98px) { #sidebar { margin: 0 -.75rem 1rem }}
@media (min-width: 768px) {
  #sidebar-main {
    display: grid;
    gap: 1.5rem;
    grid-template-areas: "sidebar main";
    grid-template-columns: 1fr 3fr;
  }
}
@media (min-width: 768px) {
  main {
    display: grid;
    gap: inherit;
    grid-template-areas: "intro" "toc" "content";
    grid-template-rows: auto auto 1fr;
  }
}
#sidebar-toggle .bi-collapse { display: none }
#sidebar-toggle:not(.collapsed) .bi-expand { display: none }
#sidebar-toggle:not(.collapsed) .bi-collapse { display: inline-block }
@media (min-width: 768px) {
  :root { scroll-padding-top: 4rem }
}
.main-content > h2:not(:first-child) { margin-top: 3rem }
.main-content > h3 { margin-top: 2rem }
.main-content > ul li,
.main-content > ol li { margin-bottom: .25rem }
.main-content > ul li > p ~ ul,
.main-content > ol li > p ~ ul { margin-top: -.5rem; margin-bottom: 1rem }
.main-content > .table {
  max-width: 100%;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}
@media (max-width: 991.98px) {
  .main-content > .table {
    display: block;
    overflow-x: auto;
  }
  .main-content > .table.table-bordered { border: 0 }
}
.main-content > .table th:first-child,
.main-content > .table td:first-child { padding-left: 0 }
.main-content > .table th:not(:last-child),
.main-content > .table td:not(:last-child) { padding-right: 1.5rem }
.main-content > .table td:first-child > code { white-space: nowrap }
#sidebar > nav { overflow: auto; font-weight: 600 }
@media (min-width: 768px) {
  #sidebar > nav {
    position: -webkit-sticky;
    position: sticky;
    top: 5rem;
    display: block !important;
    height: calc(100vh - 7rem);
    padding-left: .25rem;
    margin-left: -.25rem;
    overflow-y: auto;
  }
}
@media (max-width: 767.98px) {
  #sidebar > nav > ul {
    padding: 1.5rem .75rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
  }
}
#sidebar a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
  text-decoration: none;
}

#sidebar .btn {
  padding: .25rem .5rem;
  font-weight: 600;
  border: 0;
}
#sidebar .btn::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform 0.35s ease;
  transform-origin: .5em 50%;
}
@media (prefers-reduced-motion: reduce) {
  #sidebar .btn::before { transition: none }
}
#sidebar .btn[aria-expanded="true"]::before { transform: rotate(90deg) }
#sidebar .active { font-weight: 600 }

@media (min-width: 992px) {
  main {
    grid-template-areas: "intro   toc" "content toc";
    grid-template-columns: 4fr 1fr;
    grid-template-rows: auto 1fr;
  }
}
#page-toc { grid-area: toc }
.main-content { grid-area: content; min-width: 1px }
@media (min-width: 992px) {
  #page-toc {
    position: -webkit-sticky;
    position: sticky;
    top: 5rem;
    right: 0;
    z-index: 2;
    height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}
#page-toc nav { font-size: 0.875rem }
#page-toc nav ul { padding-left: 0; list-style: none }
#page-toc nav ul ul { padding-left: 1rem; margin-top: .25rem }
#page-toc nav li { margin-bottom: .25rem }
#page-toc nav a:not(:hover) { text-decoration: none }
#page-toc nav a code { font: inherit }
