/* The documentation of bones.
 *
 * This file is a member of one family with the stylesheet of the blog of the
 * author, tenmeh.github.io. It takes the shapes of the blog: dashed rules,
 * round cards of 14px, pills, wavy lines under the links, and one typeface,
 * Recursive, for everything. The blog names its colours --k-*, and so does
 * this file, so a value can be compared with the blog by name.
 *
 * The file has two parts. The first block below, "this package", holds the
 * few values that belong to bones: the accent, the two syntax colours that
 * follow from it, and the two pictures of the logo. Everything after that
 * block is shared. It names no package, and it can be copied to the
 * stylesheet of another package as it is. Only the block changes there.
 * (The ground and the ink are in _pkgdown.yml also. Bootstrap makes its
 * tints from them, so the two files must have the same values.)
 *
 * The site holds the Recursive font itself. It does not use the CDN of
 * Google. The site thus makes no request to another server, and it operates
 * offline after it loads.
 *
 * The accent is the teal of the bones logo, and not the terracotta of the
 * blog. The colours must identify this package. Each colour that is used as
 * text was measured against WCAG AA, which needs 4.5:1. The numbers are in
 * the comments next to the values. They are the contrast of the colour on the
 * ground it is used on, and the hardest ground is named where it is not the
 * page.
 */

/* ---- Recursive, Latin subset, SIL OFL 1.1 (see fonts/OFL.txt) ----------- */

/* One variable file holds every weight from 300 to 1000 and the mono axis.
   Plain text has MONO at 0. Code turns it to 1, below, and so the code has
   the same letters as the text, only with a fixed width. The file has no
   slant axis, so the italic is made by the browser. */
@font-face {
  font-family: "Recursive";
  src: url("fonts/recursive-latin-mono.woff2") format("woff2");
  font-weight: 300 1000;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens: this package ---------------------------------------------- */

:root {
  --k-accent: #1b6a70;           /* 5.5:1 on the paper, 5.9:1 on a card. Same as primary in _pkgdown.yml. */
  --k-accent-soft: rgba(27, 106, 112, 0.12); /* pills and the active tab. #1b6a70 on it: 4.6:1. */
  --k-on-accent: #ffffff;        /* text on a solid accent fill: 6.3:1 */
  --k-syn-keyword: #1b6a70;      /* 5.9:1 on the code ground: the accent, as on the blog */
  --k-syn-number: #87560b;       /* 5.9:1 on the code ground. Amber, so it does not merge with the teal. */
  --k-mark: url("bones-hex-mark.svg");  /* the hex in the navigation bar: still */
  --k-hero: url("bones-hero.svg");      /* the hex on the home page: it moves */
}
[data-bs-theme="dark"] {
  --k-accent: #5cc4ca;           /* a light teal of the hue of the logo shimmer. 8.2:1 on the charcoal, 7.4:1 on a card. */
  --k-accent-soft: rgba(92, 196, 202, 0.16); /* the accent on it: 5.9:1 */
  /* White on this teal is only 2.0:1, so a solid accent fill takes the
     charcoal of the logo instead, at 8.2:1. */
  --k-on-accent: #1f1d1b;
  --k-syn-keyword: #5cc4ca;      /* 8.8:1 on the code ground */
  --k-syn-number: #f0a830;       /* 9.0:1 */
}

/* ---- tokens: shared ---------------------------------------------------- */

:root {
  --k-paper: #f4efe4;            /* the page */
  --k-surface: #fbf8f1;          /* cards, the sidebar, tables */
  --k-code: #fbf8f1;             /* code blocks and inline code */
  --k-ink: #17202a;              /* 14.3:1 on the paper, 15.5:1 on a card */
  --k-muted: #555b66;            /* 6.0:1 on the paper, 6.4:1 on a card */
  --k-rule: #cfc5b1;             /* the dashed lines and the edges of cards. Not text. */
  --k-control: #8a8272;          /* the edge of the search field: 3.3:1 on the paper, as WCAG asks of a control */
  --k-syn-comment: #6b6457;      /* 5.5:1 on the code ground */
  --k-syn-string: #2f6b3b;       /* 6.0:1 */
  --k-syn-function: #1f4f8a;     /* 7.8:1 */
  --k-syn-arg: #6a3f86;          /* 7.4:1 */
}
[data-bs-theme="dark"] {
  --k-paper: #1f1d1b;
  --k-surface: #282523;
  --k-code: #171513;
  --k-ink: #ece5d6;              /* 13.4:1 on the paper, 12.1:1 on a card */
  --k-muted: #a89f8f;            /* 6.4:1 on the paper, 5.8:1 on a card */
  --k-rule: #3d3833;
  --k-control: #7a7264;          /* 3.5:1 on the paper */
  --k-syn-comment: #9a917f;      /* 5.8:1 on the code ground */
  --k-syn-string: #a9cf8f;       /* 10.4:1 */
  --k-syn-function: #8fb9ee;     /* 9.0:1 */
  --k-syn-arg: #d2b4f0;          /* 10.0:1 */
}

/* Bootstrap draws from its own variables. These few make it read the tokens,
   so that what Bootstrap paints with them, such as the muted text, the
   accent of the focus ring and the border of a table, is in the same colours.
   Bootstrap keeps the light primary in the dark mode, and a dark accent is hard
   to see on charcoal, so the dark mode takes the accent instead. */
:root,
[data-bs-theme="dark"] {
  --bs-secondary-color: var(--k-muted);
  --bs-border-color: var(--k-rule);
  --bs-primary: var(--k-accent);
  --bs-code-color: var(--k-ink);
}

/* ---- base -------------------------------------------------------------- */

body {
  font-variation-settings: "MONO" 0;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
  font-variation-settings: "MONO" 0;
  letter-spacing: -0.01em;
  color: var(--k-ink);
}

h1 {
  font-size: 2.1rem;
  font-weight: 700;
}
h2 {
  font-size: 1.5rem;
  margin-top: 2.2rem;
}
h3 {
  font-size: 1.2rem;
}

/* Recursive is wide, and the mono axis is wider. The code is a little
   smaller than the text, so a line of code and a line of text look alike. */
code,
pre,
kbd,
samp {
  font-variation-settings: "MONO" 1;
  font-size: 0.86em;
  /* ligatures off, so that <- never turns into an arrow */
  font-variant-ligatures: none;
}

/* ---- navbar ------------------------------------------------------------ */

nav.navbar {
  background: var(--k-paper);
  border-bottom: 1.5px dashed var(--k-rule);
  box-shadow: none;
  --bs-navbar-color: var(--k-ink);
  --bs-navbar-hover-color: var(--k-accent);
  --bs-navbar-active-color: var(--k-accent);
  --bs-navbar-brand-color: var(--k-ink);
  --bs-navbar-brand-hover-color: var(--k-ink);
  /* pkgdown puts the page 56px below the top, for a bar of that height. The
     pills and the hex make a bar that is taller, so the bar has less padding
     to stay near that height, and the content is not hidden under it. */
  --bs-navbar-padding-y: 0.1rem;
}

/* The hex before the name. It is a sticker: turned a little, with a hard
   shadow under it, and it straightens on hover. The picture is the still one,
   without the wordmark. */
.navbar-brand {
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.navbar-brand::before {
  content: "";
  height: 1.9rem;
  aspect-ratio: 100 / 116;
  background: var(--k-mark) center / contain no-repeat;
  transform: rotate(-6deg);
  filter: drop-shadow(0 2px 0 var(--k-rule));
  transition: transform 0.2s ease;
}
.navbar-brand:hover::before,
.navbar-brand:focus-visible::before {
  transform: rotate(0deg) scale(1.06);
}

.navbar .nav-text {
  color: var(--k-muted) !important;
}

/* Each tab is a pill. The current page has the tint of the accent. */
.navbar-nav .nav-link {
  border-radius: 999px;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  font-weight: 500;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
  background: var(--k-accent-soft);
  color: var(--k-accent);
}
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active {
  background: var(--k-accent-soft);
  color: var(--k-accent);
  font-weight: 650;
}
.navbar .nav-item {
  margin-right: 0.2rem;
}
/* The icons take the accent. They are text-sized, so the 4.5:1 applies. */
.navbar-nav .nav-link .fa,
.navbar-nav .nav-link .fab {
  color: var(--k-accent);
}

/* Dropdown menus. The default of pkgdown touches the navigation bar. It
   looks like part of the page, and not like a menu. */
.dropdown-menu {
  background: var(--k-surface);
  border: 1px solid var(--k-rule);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(23, 32, 42, 0.14);
  padding: 0.35rem;
  margin-top: 0.4rem;
  min-width: 15rem;
}
.dropdown-item {
  color: var(--k-ink);
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  white-space: normal;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--k-accent-soft);
  color: var(--k-ink);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--k-accent);
  color: var(--k-on-accent);
}
[data-bs-theme="dark"] .dropdown-menu {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* ---- content ----------------------------------------------------------- */

/* Links in running text get a wavy line, in the accent. Navigation, titles,
   the names in the reference and the anchors opt out below. A link in code
   has a plain thin line: a wave under a line of code is too much. */
main a {
  text-decoration: underline wavy;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.28em;
  text-decoration-skip-ink: none;
}
main a:hover {
  color: var(--bs-link-hover-color);
  text-decoration-thickness: 2px;
}
main a.anchor,
main h1 a,
main h2 a,
main h3 a,
main h4 a,
main .btn,
main a:has(> img) {
  text-decoration: none;
}
main pre a,
main code a {
  text-decoration: underline solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
/* The name of a function in the reference is a link, and it is the whole
   of its line. It has no line until the pointer is on it. */
main dt code a {
  text-decoration: none;
}
main dt code a:hover {
  text-decoration: underline wavy;
}

/* Inline code: the code ground, rounded. */
main :not(pre) > code {
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: var(--k-code);
  color: var(--k-ink);
}

/* A code block is a card, with a small tab that names the language, as on
   the blog. pkgdown puts the language in a class of the <pre>. A block with
   no language, such as the output of an example, has no tab. The copy
   button of pkgdown sits at the right, so it does not meet the tab. */
main div.sourceCode {
  margin: 1.5rem 0;
  border: 0;
  border-radius: 14px;
  background: var(--k-code);
}
main div.sourceCode:has(> pre.r)::before {
  content: "R";
}
main div.sourceCode:has(> pre.js, > pre.javascript)::before {
  content: "JavaScript";
}
main div.sourceCode:has(> pre.css)::before {
  content: "CSS";
}
main div.sourceCode:has(> pre.html)::before {
  content: "HTML";
}
main div.sourceCode:has(> pre.bash, > pre.sh)::before {
  content: "Shell";
}
main div.sourceCode:has(> pre.r, > pre.js, > pre.javascript, > pre.css, > pre.html, > pre.bash, > pre.sh)::before {
  display: block;
  padding: 0.6rem 0 0 1.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  font-variation-settings: "MONO" 0;
  color: var(--k-muted);
}

/* Blocks that are not inside a div.sourceCode, such as the usage of a
   function and the output of an example, are cards also. */
main pre {
  margin: 1.5rem 0;
  padding: 0.75rem 1.35rem 1.1rem;
  border: 0;
  border-radius: 14px;
  background: var(--k-code);
  color: var(--k-ink);
  line-height: 1.62;
}
main div.sourceCode > pre {
  margin: 0;
  padding: 0.5rem 1.35rem 1.1rem;
  background: transparent;
}
main pre code {
  background: transparent;
  color: inherit;
}

/* Syntax colours. pkgdown writes its own for each mode, with the selector
   "pre code span.kw", and for the dark mode with "[data-bs-theme=dark]" in
   front. ":root" in front gives these the same weight as the dark ones, and
   they come later, so both modes take the tokens above. */
:root pre code span.co,
:root pre code span.cv,
:root pre code span.do,
:root pre code span.an,
:root pre code span.in {
  color: var(--k-syn-comment);
  font-style: italic;
}
:root pre code span.kw,
:root pre code span.cf,
:root pre code span.cn,
:root pre code span.pp {
  color: var(--k-syn-keyword);
  font-weight: 400;
}
:root pre code span.st,
:root pre code span.ss,
:root pre code span.ch,
:root pre code span.vs,
:root pre code span.sc {
  color: var(--k-syn-string);
}
:root pre code span.fu,
:root pre code span.im,
:root pre code span.bu {
  color: var(--k-syn-function);
}
:root pre code span.dv,
:root pre code span.fl,
:root pre code span.bn {
  color: var(--k-syn-number);
}
:root pre code span.at,
:root pre code span.ot {
  color: var(--k-syn-arg);
}
:root pre code span.va,
:root pre code span.dt {
  color: var(--k-ink);
}
/* The operators are ink, so a line of arithmetic does not glow. */
:root pre code span.op {
  color: var(--k-ink);
  font-weight: inherit;
}

blockquote {
  position: relative;
  margin: 1.5rem 0;
  padding: 1.1rem 1.35rem 1.1rem 3.6rem;
  border: 1px solid var(--k-rule);
  border-radius: 14px;
  background: var(--k-surface);
  color: var(--k-ink);
}
blockquote::before {
  content: "\201C";
  position: absolute;
  left: 1.1rem;
  top: 0.35rem;
  font-size: 3.3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--k-accent);
}
blockquote p:last-child {
  margin-bottom: 0;
}

/* The API summary in the README is a table. The reference pages also put
   the argument descriptions in a table. The tables must thus look correct,
   and not like the default Bootstrap style. The rows are parted by dashed
   lines, as in the post list of the blog. */
main table {
  --bs-table-bg: var(--k-surface);
  --bs-table-color: var(--k-ink);
  border: 1px solid var(--k-rule);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 0.94em;
}
main table th {
  background: var(--k-accent-soft);
  color: var(--k-ink);
  font-weight: 700;
  border-bottom: 1px solid var(--k-rule) !important;
}
main table td {
  border-top: 1.5px dashed var(--k-rule);
  border-bottom: 0;
}
main table tbody tr:first-child td {
  border-top: 0;
}
main table td,
main table th {
  padding: 0.5rem 0.75rem;
}

main img {
  max-width: 100%;
  border: 1px solid var(--k-rule);
  border-radius: 14px;
}
/* But not the badges in the text. They are images also. */
main p > img[src*="badge"],
main p > a > img,
aside img {
  border: 0;
  border-radius: 0;
}

/* ---- the top of a page, and the sections ------------------------------- */

.page-header {
  border-bottom: 1.5px dashed var(--k-rule);
}

/* The logo on a page other than the home page: a sticker, turned a little,
   with a hard shadow. It has transparent corners, so a rectangular border
   would draw a box around it. It straightens on hover. */
main img.logo {
  border: 0;
  border-radius: 0;
  transform: rotate(4deg);
  filter: drop-shadow(0 3px 0 var(--k-rule));
  transition: transform 0.2s ease;
}
main img.logo:hover {
  transform: rotate(0deg) scale(1.04);
}

/* The home page has the hex that moves, in place of the still one. The
   picture is drawn as the background of a box that floats as the logo does,
   and the still image is hidden. The image has no text of its own: the name
   of the package is the first heading of the page. */
.template-home .page-header img.logo {
  display: none;
}
.template-home .page-header::before {
  content: "";
  float: right;
  width: 9.25rem;
  aspect-ratio: 1;
  margin: -0.9rem 0 0.2rem 1.5rem;
  background: var(--k-hero) center / contain no-repeat;
}
@media (min-width: 576px) {
  .template-home .page-header {
    min-height: 8.4rem;
  }
}

/* A dashed line parts each section from the one before. */
main .section.level2:has(> h2:first-child) {
  margin-top: 2.4rem;
  padding-top: 0.4rem;
  border-top: 1.5px dashed var(--k-rule);
}
main .section.level2 > h2:first-child {
  margin-top: 1.2rem;
}
/* The reference index puts the title of a group and its functions in two
   boxes. Only the box with the title has a line above it. The page header
   has its own line, so the first section has none. */
main .page-header + .section.level2:has(> h2:first-child),
.page-header + .section.level2 {
  border-top: 0;
  margin-top: 0.4rem;
}

/* ---- reference index --------------------------------------------------- */

/* The title of each group is a pill. */
.template-reference-index main h2 {
  display: inline-block;
  margin: 0.4rem 0 0.9rem;
  padding: 0.4rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--k-accent-soft);
  color: var(--k-accent);
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
}
.template-reference-index main .section.level2 > h2:first-child {
  margin-top: 0.7rem;
}
/* The short description next to each function is the useful part of this
   page. The default style makes it too small. */
.template-reference-index dd {
  color: var(--k-muted);
}
.template-reference-index dl {
  margin-bottom: 0.5rem;
}
.ref-index .icon img {
  border: 0;
}

/* ---- sidebar / footer -------------------------------------------------- */

/* The sidebar of the home page is one card, and its parts are parted by dashed
   lines. On the other pages the sidebar is the table of contents, which
   sticks to the top as you scroll. It is a card of the same look. */
.template-home aside,
#toc {
  padding: 0.3rem 1.2rem 1.1rem;
  background: var(--k-surface);
  border: 1px solid var(--k-rule);
  border-radius: 14px;
}
.template-home aside {
  align-self: flex-start;
}
#toc {
  padding-top: 1rem;
  font-size: 0.9rem;
}
aside h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  font-weight: 800;
}
.template-home aside > div {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1.5px dashed var(--k-rule);
}
.template-home aside > div:first-child {
  padding-top: 0.7rem;
  margin-top: 0;
  border-top: 0;
}
aside .roles {
  color: var(--k-muted);
}
#toc .nav-link {
  border-radius: 10px;
  color: var(--k-ink);
  text-decoration: none;
}
#toc .nav-link:hover {
  color: var(--k-accent);
}
#toc .nav-link.active {
  background: var(--k-accent-soft);
  color: var(--k-accent);
  font-weight: 600;
}

footer {
  border-top: 1.5px dashed var(--k-rule);
  margin-top: 3rem;
  padding-top: 1.25rem;
  font-size: 0.9em;
  color: var(--k-muted);
}
footer a {
  color: var(--k-accent);
}

/* ---- search ------------------------------------------------------------ */

#search-input {
  background: var(--k-surface);
  color: var(--k-ink);
  border-radius: 999px;
  border: 1px solid var(--k-control);
  padding-left: 1rem;
}
#search-input::placeholder {
  color: var(--k-muted);
  opacity: 1;
}
#search-input:focus {
  border-color: var(--k-accent);
  box-shadow: 0 0 0 3px var(--k-accent-soft);
}

/* Still under reduced motion: no turn, no growing. The tilt stays, and only
   the change on hover is instant. The hex of the home page is swapped for the
   still hex. The moving picture has the same rule inside it, but a picture
   that is drawn as a background does not always see the setting of the
   visitor, and the page always does. The hex is 85% of the height of the
   moving picture, and the still one is sized to match, so the hex does not
   change size. */
@media (prefers-reduced-motion: reduce) {
  .navbar-brand::before,
  main img.logo {
    transition: none;
  }
  .template-home .page-header::before {
    background-image: var(--k-mark);
    background-size: auto 85%;
  }
}

@media (max-width: 767.98px) {
  h1 {
    font-size: 1.7rem;
  }
  main table {
    display: block;
    overflow-x: auto;
  }
  .template-home .page-header::before {
    width: 6.5rem;
    margin: -0.4rem 0 0.2rem 1rem;
  }
  .template-home .page-header {
    min-height: 6.2rem;
  }
  /* pkgdown makes the sidebar a box that is a little wider than the text
     on a phone. It is a card here, and it lines up with the text. */
  .template-home aside {
    width: 100%;
    margin: 1.5rem 0 0;
  }
  main div.sourceCode:has(> pre)::before {
    padding-left: 1rem;
  }
  main pre,
  main div.sourceCode > pre {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ---- bones only ---------------------------------------------------------
   Everything above this line is shared with the other packages. The rules
   below belong to bones, and to nothing else. */

/* The shinylive app of articles/live-demo.Rmd. The app has a sidebar and a
   grid of charts, so it gets the full width of the column and most of the
   height of the window. The frame is a card of the same look as the others. */
.bones-live-demo {
  border: 1px solid var(--k-rule);
  border-radius: 14px;
  overflow: hidden;
  margin: 1.5rem 0 0.5rem;
}
.bones-live-demo iframe {
  display: block;
  width: 100%;
  height: 85vh;
  min-height: 640px;
  border: 0;
}