/* The style sheet of the Rakko website.

   The site follows the conventions of the documentation sites of developer
   tools: a top bar, a landing page with a hero and a code sample, and
   documentation pages with a sidebar, a readable column, and an outline.
   Orange is the brand color of Rakko. */

/* Tokens */

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --bg-soft: #f6f7f8;
  --bg-mute: #eceef1;
  --text: #1d2025;
  --text-2: #565d67;
  --text-3: #676e78;
  --divider: #e3e6ea;
  --border: #d3d7dd;
  --brand: #c2410c;
  --brand-hover: #a8380a;
  --brand-text: #b13c0b;
  --brand-soft: #fdf0e9;
  --on-brand: #ffffff;
  --terminal: #1d2025;
  --terminal-text: #e7e8ea;
  --terminal-accent: #f2773d;

  --code-keyword: #24508a;
  --code-entity: #5b3f8f;
  --code-string: #2d6a3c;
  --code-const: #0f6a78;
  --code-comment: #6a727c;
  --code-tag: #2d6a3c;
  --code-var: #8a4f05;
  --code-invalid: #a3201b;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --topbar: 4rem;
  --content: 43rem;
  /* About 75 characters of the system face at the body size. Code and
     tables may run to the wider --content. */
  --measure: 37rem;
  --page: 72rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 0.5rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --bg-soft: #1d1f23;
    --bg-mute: #272a2f;
    --text: #e7e8ea;
    --text-2: #a7aeb7;
    --text-3: #959ca6;
    --divider: #2a2d32;
    --border: #3a3e45;
    --brand: #f2773d;
    --brand-hover: #f58c5a;
    --brand-text: #f58c5a;
    --brand-soft: #35211a;
    --on-brand: #16171a;
    --terminal: #0f1012;
    --terminal-text: #e7e8ea;

    --code-keyword: #8fb5ef;
    --code-entity: #c4b3f0;
    --code-string: #93cf9f;
    --code-const: #74c7d5;
    --code-comment: #8f98a2;
    --code-tag: #93cf9f;
    --code-var: #e2b56d;
    --code-invalid: #ff8a80;
  }
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar) + 1rem);
  scrollbar-color: var(--border) var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--brand);
}

::selection {
  background: var(--brand-soft);
  color: var(--text);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.25;
  text-wrap: balance;
}

p,
ul,
ol,
pre,
table,
figure {
  margin: 0;
}

p,
li {
  text-wrap: pretty;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

code,
pre {
  font-family: var(--mono);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 20;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
}

.skip:focus {
  top: 0.75rem;
}

/* Top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--divider);
  -webkit-backdrop-filter: saturate(1.5) blur(8px);
  backdrop-filter: saturate(1.5) blur(8px);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  min-height: var(--topbar);
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wordmark {
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.topnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.topnav a {
  color: var(--text-2);
  transition: color 150ms var(--ease);
}

.topnav a:hover {
  color: var(--brand-text);
}

.topnav-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.to-sidebar {
  display: none;
}

/* Buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}

.button-brand {
  background: var(--brand);
  color: var(--on-brand);
}

.button-brand:hover {
  background: var(--brand-hover);
}

.button-alt {
  border-color: var(--border);
  background: var(--bg);
  color: var(--text);
}

.button-alt:hover {
  border-color: var(--text-3);
}

/* Code: a soft panel; the file or the language heads it */

pre {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--bg-soft);
  font-size: 0.875rem;
  line-height: 1.7;
  tab-size: 4;
  scrollbar-width: thin;
}

pre code {
  display: block;
  width: max-content;
  min-width: 100%;
  padding: 1rem 1.25rem 1.125rem;
}

pre code::before {
  position: sticky;
  left: 0;
  display: block;
  width: fit-content;
  margin-bottom: 0.625rem;
  color: var(--text-3);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  content: attr(data-lang);
}

pre code[data-lang="rust"]::before {
  content: "Rust";
}

pre code[data-lang="shellscript"]::before,
pre code[data-lang="sh"]::before {
  content: "Shell";
}

pre code[data-lang="toml"]::before {
  content: "TOML";
}

pre code[data-lang="yaml"]::before {
  content: "YAML";
}

pre code[data-lang="json"]::before {
  content: "JSON";
}

pre code[data-name]::before {
  font-family: var(--mono);
  content: attr(data-name);
}

.giallo-l {
  display: inline;
}

/* The highlighter numbers the colors of the github-light theme in sorted
   order, so each class stands for one color of that theme, which the comment
   above it gives. An update of Zola can change the order, so compare these
   colors with the generated `giallo.css`. */

/* github-light #005CC5 */
.z-1 { color: var(--code-const); }
/* github-light #032F62 */
.z-2 { color: var(--code-string); }
/* github-light #22863A */
.z-3 { color: var(--code-tag); }
/* github-light #586069 */
.z-4 { color: var(--text-2); }
/* github-light #6A737D */
.z-5 { color: var(--code-comment); }
/* github-light #6F42C1 */
.z-6 { color: var(--code-entity); }
/* github-light #B31D28 */
.z-7 { color: var(--code-invalid); }
/* github-light #D73A49 */
.z-8 { color: var(--code-keyword); }
/* github-light #E36209 */
.z-9 { color: var(--code-var); }
.z-b { font-weight: 700; }
.z-i { font-style: italic; }
.z-u { text-decoration: underline; }

/* Running text */

.prose {
  max-width: var(--content);
  font-size: 1rem;
  line-height: 1.75;
}

.prose > * + * {
  margin-top: 1rem;
}

.prose > :not(pre):not(table):not(h2) {
  max-width: var(--measure);
}

.prose h2 {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--divider);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.prose h3 {
  margin-top: 2rem;
  font-size: 1.1875rem;
  font-weight: 650;
}

.prose h2 + *,
.prose h3 + * {
  margin-top: 0.75rem;
}

.prose a,
.hero-needs a,
.facts a,
.band h2 a,
.band-intro a,
.feature p a,
.layer strong a {
  color: var(--brand-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand-text) 35%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 150ms var(--ease);
}

.prose a:hover,
.hero-needs a:hover,
.facts a:hover,
.band h2 a:hover,
.band-intro a:hover,
.feature p a:hover,
.layer strong a:hover {
  text-decoration-color: currentColor;
}

.prose .zola-anchor {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.prose .zola-anchor:hover {
  color: var(--brand-text);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: 0.375rem;
}

.prose li::marker {
  color: var(--text-3);
}

.prose strong {
  font-weight: 650;
}

.prose :not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  background: var(--bg-mute);
  font-size: 0.875em;
  white-space: nowrap;
}

.prose a code {
  color: var(--brand-text);
}

.prose pre {
  margin-top: 1.25rem;
}

.prose table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.prose th,
.prose td {
  padding: 0.5rem 1rem;
  border: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--bg-soft);
  font-weight: 600;
}

.prose tbody tr:nth-child(2n) {
  background: color-mix(in srgb, var(--bg-soft) 60%, transparent);
}

/* The landing page */

.home {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.hero h1 {
  font-weight: 700;
}

.hero-name {
  display: block;
  color: var(--brand-text);
  font-size: clamp(3rem, 2rem + 3.5vw, 4.5rem);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.hero-tagline {
  display: block;
  margin-top: 0.5rem;
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.hero-lede {
  max-width: 32rem;
  margin-top: 1.25rem;
  color: var(--text-2);
  font-size: 1.125rem;
  line-height: 1.6;
}

.hero .actions {
  margin-top: 2rem;
}

.hero-needs {
  margin-top: 1rem;
  color: var(--text-3);
  font-size: 0.875rem;
}

/* The code card of the hero */

.code-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--bg-soft);
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.14);
}

.code-card-file {
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid var(--divider);
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 500;
}

.code-card pre + .code-card-file {
  border-top: 1px solid var(--divider);
}

.code-card pre {
  border-radius: 0;
  font-size: 0.8125rem;
}

.code-card pre code {
  padding: 1.125rem 1.25rem 1.25rem;
}

.code-card pre code::before {
  display: none;
}

.code-card-run {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  overflow-x: auto;
  background: var(--terminal);
  color: var(--terminal-text);
  font-size: 0.8125rem;
  white-space: nowrap;
  scrollbar-width: thin;
}

.code-card-prompt {
  color: var(--terminal-accent);
  font-family: var(--mono);
  user-select: none;
}

/* The facts under the hero */

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  color: var(--text-2);
  font-size: 0.875rem;
  list-style: none;
}

/* The sections of the landing page */

.band {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.band + .band {
  border-top: 1px solid var(--divider);
}

.band h2 {
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.band-intro {
  max-width: var(--measure);
  margin-top: 0.875rem;
  color: var(--text-2);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.band-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2.75rem;
  padding: 0;
  list-style: none;
}

.feature {
  padding-top: 1.25rem;
  border-top: 2px solid var(--divider);
}

.feature h3 {
  font-size: 1.125rem;
  font-weight: 650;
}

.feature p {
  margin-top: 0.5rem;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.layers {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  list-style: none;
}

.layer {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding: 1.125rem 1.5rem;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.layer + .layer {
  border-top: 1px solid var(--divider);
}

.layer strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 650;
}

.band h2 a,
.layer strong a {
  font-weight: inherit;
}

.layer-current {
  background: var(--brand-soft);
}

.layer-current strong {
  color: var(--brand-text);
}

.own-actions {
  display: block;
}

.own-actions .prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.own-actions .prose {
  max-width: var(--measure);
  color: var(--text-2);
  font-size: 1.0625rem;
}

.own-actions .prose h2 {
  color: var(--text);
}

.own-actions .actions {
  margin-top: 2rem;
}

.doc-kinds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  margin-top: 2.5rem;
}

.doc-kind-entry h3 {
  font-size: 1.125rem;
  font-weight: 650;
}

.doc-kind-entry h3 a:hover {
  color: var(--brand-text);
}

.doc-kind-entry ul {
  margin-top: 0.625rem;
  padding: 0;
  list-style: none;
}

.doc-kind-entry li a {
  display: block;
  padding: 0.25rem 0;
  color: var(--text-2);
  font-size: 0.9375rem;
  transition: color 150ms var(--ease);
}

.doc-kind-entry li a:hover {
  color: var(--brand-text);
}

/* The documentation: the sidebar, the page, and the outline */

.docs {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  grid-template-areas: "sidebar main";
  max-width: 90rem;
  margin: 0 auto;
}

.sidebar {
  grid-area: sidebar;
  align-self: start;
  position: sticky;
  top: var(--topbar);
  max-height: calc(100vh - var(--topbar));
  overflow-y: auto;
  padding: 2rem 1.5rem 3rem var(--gutter);
  border-right: 1px solid var(--divider);
  font-size: 0.875rem;
  scrollbar-width: thin;
}

.sidebar-group + .sidebar-group {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--divider);
}

.sidebar-group h2 {
  font-size: 0.875rem;
  font-weight: 700;
}

.sidebar-group ul {
  margin-top: 0.5rem;
  padding: 0;
  list-style: none;
}

.sidebar a {
  display: block;
  padding: 0.3125rem 0;
  color: var(--text-2);
  line-height: 1.4;
  transition: color 150ms var(--ease);
}

.sidebar h2 a {
  color: var(--text);
}

.sidebar a:hover {
  color: var(--text);
}

.sidebar a[aria-current="page"] {
  color: var(--brand-text);
  font-weight: 600;
}

.docs-main {
  grid-area: main;
  min-width: 0;
  padding: 3rem clamp(1.5rem, 4vw, 4rem) 6rem;
}

.doc {
  display: grid;
  grid-template-columns: minmax(0, var(--content)) 14rem;
  grid-template-areas:
    "head outline"
    "prose outline"
    "pager outline";
  grid-template-rows: auto auto 1fr;
  gap: 0 clamp(2rem, 4vw, 4rem);
}

.doc-index {
  grid-template-areas:
    "head head"
    "prose prose"
    "list list";
}

.doc-head {
  grid-area: head;
  max-width: var(--content);
  padding-bottom: 0.5rem;
}

.doc-head h1 {
  font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.375rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.doc-summary {
  margin-top: 0.75rem;
  color: var(--text-2);
  font-size: 1.125rem;
  line-height: 1.55;
}

.doc > .prose {
  grid-area: prose;
  margin-top: 1.5rem;
}

.doc > .prose > :first-child {
  margin-top: 0;
}

.outline {
  grid-area: outline;
  align-self: start;
  position: sticky;
  top: calc(var(--topbar) + 2rem);
  max-height: calc(100vh - var(--topbar) - 4rem);
  overflow-y: auto;
  padding-left: 1rem;
  border-left: 1px solid var(--divider);
  font-size: 0.8125rem;
  scrollbar-width: thin;
}

.outline h2 {
  font-size: 0.8125rem;
  font-weight: 700;
}

.outline ul {
  margin-top: 0.5rem;
  padding: 0;
  list-style: none;
}

.outline ul ul {
  margin-top: 0;
  padding-left: 0.75rem;
}

.outline a {
  display: block;
  padding: 0.25rem 0;
  color: var(--text-2);
  line-height: 1.4;
  transition: color 150ms var(--ease);
}

.outline a:hover {
  color: var(--brand-text);
}

.pager {
  grid-area: pager;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: var(--content);
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--divider);
}

.pager a {
  display: block;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 150ms var(--ease);
}

.pager a:hover {
  border-color: var(--brand);
}

.pager a[rel="next"] {
  grid-column: 2;
  text-align: right;
}

.pager-label {
  display: block;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 500;
}

.pager-title {
  display: block;
  margin-top: 0.125rem;
  color: var(--brand-text);
  font-size: 0.9375rem;
  font-weight: 600;
}

.link-list {
  grid-area: list;
  max-width: var(--content);
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

.link-list li + li {
  margin-top: 0.75rem;
}

.link-list a {
  display: block;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 150ms var(--ease);
}

.link-list a:hover {
  border-color: var(--brand);
}

.link-list-title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 650;
}

.link-list-text {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* The footer */

.footer {
  border-top: 1px solid var(--divider);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: 90rem;
  margin: 0 auto;
  padding: 2rem var(--gutter) 2.5rem;
  color: var(--text-2);
  font-size: 0.875rem;
}

.footer-inner p a {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.maker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
  font-weight: 600;
}

.maker img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.maker:hover span {
  color: var(--brand-text);
}

/* Narrower screens */

@media (max-width: 75rem) {
  .doc {
    grid-template-columns: minmax(0, var(--content));
    grid-template-areas:
      "head"
      "prose"
      "pager";
  }

  .outline {
    display: none;
  }

  .doc-index {
    grid-template-areas:
      "head"
      "prose"
      "list";
  }
}

@media (max-width: 60rem) {
  .hero,
  .band-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .features,
  .doc-kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .docs {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "sidebar";
  }

  .docs-main {
    padding: 2rem var(--gutter) 3rem;
  }

  .sidebar {
    position: static;
    max-height: none;
    padding: 2rem var(--gutter) 3rem;
    border-top: 1px solid var(--divider);
    border-right: 0;
    background: var(--bg-soft);
  }

  .to-sidebar {
    display: inline;
  }
}

@media (max-width: 40rem) {
  .topbar {
    position: static;
  }

  .topbar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-block: 0.875rem;
  }

  .topnav {
    gap: 0.25rem 1.125rem;
  }

  /* The landing page and the sidebar both lead to Get Started, so the top
     bar drops it on a phone and fits on one row under the wordmark. */
  .topnav-start {
    display: none;
  }

  .features,
  .doc-kinds {
    grid-template-columns: minmax(0, 1fr);
  }

  .layer {
    grid-template-columns: minmax(0, 1fr);
  }

  .prose pre {
    margin-inline: calc(var(--gutter) * -1);
    border-radius: 0;
  }

  .prose pre code {
    padding-inline: var(--gutter);
  }

  .pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .pager a[rel="next"] {
    grid-column: 1;
    text-align: left;
  }
}

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