/* Base theme, modelled on Obsidian's default light/dark appearance.
   Drop your own overrides in theme/custom.css -- it is loaded after this. */

:root {
  --bg:            #ffffff;
  --bg-alt:        #f6f6f6;
  --bg-code:       #f2f3f5;
  --text:          #222222;
  --text-muted:    #5c5c5c;
  --text-faint:    #999999;
  --border:        #e0e0e0;
  --accent:        #7c5fe0;
  --accent-hover:  #6247c4;

  --callout-info:    #086ddd;
  --callout-success: #08b94e;
  --callout-warning: #e0ac00;
  --callout-danger:  #e93147;
  --callout-note:    #7c5fe0;
  --callout-tip:     #00bfbc;

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

  --sidebar-w: 300px;
  --pagenav-w: 230px;
  --content-w: 750px;
  --radius: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #1e1e1e;
    --bg-alt:       #262626;
    --bg-code:      #2a2a2a;
    --text:         #dadada;
    --text-muted:   #b3b3b3;
    --text-faint:   #7d7d7d;
    --border:       #3b3b3b;
    --accent:       #a58ef5;
    --accent-hover: #bcaaf8;}
}

:root[data-theme="dark"] {
    --bg:           #1e1e1e;
    --bg-alt:       #262626;
    --bg-code:      #2a2a2a;
    --text:         #dadada;
    --text-muted:   #b3b3b3;
    --text-faint:   #7d7d7d;
    --border:       #3b3b3b;
    --accent:       #a58ef5;
    --accent-hover: #bcaaf8;}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- layout */

.layout { display: flex; align-items: flex-start; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  padding: 1.5rem 1rem 3rem;
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  font-size: 0.875rem;
}

/* `.sidebar a` sets display:block and is more specific, so qualify this. */
.sidebar a.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  margin: 0 auto 0 0.5rem;
}

.sidebar a.brand img {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 0;   /* the global img rule rounds every image; not this one */
}

.sidebar a.brand:hover { text-decoration: none; color: var(--text); background: none; }

.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin: 0; }

/* Nested levels get a guide rail so the depth is readable at a glance. */
.sidebar details > ul {
  margin-left: 0.85rem;
  padding-left: 0.4rem;
  border-left: 1px solid var(--border);
}

.sidebar a,
.sidebar summary {
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  color: var(--text-muted);
  text-decoration: none;
}

.sidebar a:hover,
.sidebar summary:hover { background: rgba(127, 127, 127, 0.12); color: var(--text); }

.sidebar a[aria-current="page"],
.sidebar summary.current {
  background: rgba(124, 95, 224, 0.14);
  color: var(--accent);
  font-weight: 600;
}

/* A page with children folds rather than navigating. */
.sidebar summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}

.sidebar summary::-webkit-details-marker { display: none; }

.sidebar summary::after {
  content: "";
  flex: none;
  width: 0.42em;
  height: 0.42em;
  margin-right: 0.15em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.sidebar details[open] > summary::after { transform: rotate(45deg); }

.sidebar a.external::after {
  content: "↗";
  margin-left: 0.3em;
  font-size: 0.85em;
  color: var(--text-faint);
}

.sidebar .section {
  margin: 1.25rem 0 0.35rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2.5rem 2.5rem 6rem;
  display: grid;
  grid-template-columns: minmax(0, var(--content-w)) var(--pagenav-w);
  grid-template-areas: "article pagenav" "footer .";
  justify-content: center;
  column-gap: 3rem;
}

article { grid-area: article; min-width: 0; max-width: var(--content-w); }

/* ------------------------------------------------------- on-page contents */

.page-nav {
  grid-area: pagenav;
  position: sticky;
  top: 2.5rem;
  align-self: start;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  font-size: 0.82rem;
  border-left: 1px solid var(--border);
  padding-left: 1rem;
}

.page-nav-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.6rem;
}

.page-nav ul { list-style: none; margin: 0; padding: 0; }
.page-nav ul ul { margin-left: 0.75rem; }

.page-nav a {
  display: block;
  padding: 0.22rem 0;
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.4;
}

.page-nav a:hover { color: var(--accent); text-decoration: none; }

/* The single root entry is the page's own H1 -- the title is already on the
   page, so show its children as the top level. */
.page-nav > ul > li:only-child > a { display: none; }
.page-nav > ul > li:only-child > ul { margin-left: 0; }

/* Fewer than two entries is not a table of contents. */
.page-nav:not(:has(> ul > li > ul > li + li)) { display: none; }

/* -------------------------------------------------------------- typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  font-weight: 650;
  margin: 2em 0 0.6em;
  scroll-margin-top: 1.5rem;
}

h1 { font-size: 2rem;    margin-top: 0; }
h2 { font-size: 1.5rem;  padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
h5, h6 { font-size: 0.95rem; color: var(--text-muted); }

p { margin: 0 0 1em; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

ul, ol { padding-left: 1.6em; margin: 0 0 1em; }
li { margin: 0.25em 0; }
li > ul, li > ol { margin-bottom: 0; }

blockquote {
  margin: 0 0 1em;
  padding: 0.1em 1em;
  border-left: 3px solid var(--border);
  color: var(--text-muted);
}

hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-code);
  padding: 0.15em 0.35em;
  border-radius: 4px;
}

pre {
  background: var(--bg-code);
  border-radius: var(--radius);
  padding: 1em;
  overflow-x: auto;
  margin: 0 0 1em;
}

pre code { background: none; padding: 0; font-size: 0.85em; }

/* Syntax highlighting. Pandoc tags the tokens; these are its class names. */
:root {
  --syn-keyword: #b1359b;
  --syn-string:  #2a8a3e;
  --syn-comment: #7d7d7d;
  --syn-number:  #b25c00;
  --syn-func:    #2c5fd6;
  --syn-var:     #0b7285;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --syn-keyword: #e28ad4;
    --syn-string:  #7ec98f;
    --syn-comment: #8a8a8a;
    --syn-number:  #e0a060;
    --syn-func:    #82aaff;
    --syn-var:     #6bc7d8;}
}

:root[data-theme="dark"] {
    --syn-keyword: #e28ad4;
    --syn-string:  #7ec98f;
    --syn-comment: #8a8a8a;
    --syn-number:  #e0a060;
    --syn-func:    #82aaff;
    --syn-var:     #6bc7d8;}

pre .kw, pre .cf, pre .im { color: var(--syn-keyword); font-weight: 600; }
pre .st, pre .ss, pre .vs, pre .ch { color: var(--syn-string); }
pre .co, pre .do { color: var(--syn-comment); font-style: italic; }
pre .dv, pre .bn, pre .fl, pre .cn { color: var(--syn-number); }
pre .fu, pre .bu { color: var(--syn-func); }
pre .va, pre .at, pre .dt { color: var(--syn-var); }
pre .er, pre .al { color: var(--callout-danger); }
pre .wa { color: var(--callout-warning); }
pre .pp, pre .sc { color: var(--syn-number); }

/* Pandoc anchors every code line; the markers are noise here. */
pre a[href^="#cb"] { display: none; }

mark { background: rgba(255, 200, 0, 0.35); color: inherit; border-radius: 3px; }

kbd {
  font-family: var(--font-mono);
  font-size: 0.8em;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.1em 0.4em;
  background: var(--bg-alt);
}

/* ------------------------------------------------------------------ media */

img { max-width: 100%; height: auto; border-radius: var(--radius); }

figure { margin: 1.5em 0; }

figure img { display: block; border: 1px solid var(--border); }

figcaption {
  margin-top: 0.6em;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* Several images in one paragraph were a side-by-side gallery in GitBook. */
p:has(img + img) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

p:has(img + img) img { flex: 1 1 260px; min-width: 0; border: 1px solid var(--border); }


/* ----------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; margin: 0 0 1.5em; }

table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }

th, td {
  border: 1px solid var(--border);
  padding: 0.5em 0.75em;
  text-align: left;
  vertical-align: top;
}

th { background: var(--bg-alt); font-weight: 650; }

/* --------------------------------------------------------------- callouts */

.callout {
  --callout-color: var(--callout-note);
  margin: 0 0 1.25em;
  padding: 0.85em 1em;
  border-radius: var(--radius);
  border-left: 3px solid var(--callout-color);
  background: color-mix(in srgb, var(--callout-color) 10%, transparent);
}

.callout-info    { --callout-color: var(--callout-info); }
.callout-success { --callout-color: var(--callout-success); }
.callout-warning { --callout-color: var(--callout-warning); }
.callout-danger  { --callout-color: var(--callout-danger); }
.callout-tip     { --callout-color: var(--callout-tip); }

.callout-title {
  font-weight: 650;
  color: var(--callout-color);
  margin-bottom: 0.35em;
}

.callout-body > :last-child { margin-bottom: 0; }

article details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6em 1em;
  margin: 0 0 1em;
}

article summary { cursor: pointer; font-weight: 600; }

article details[open] summary { margin-bottom: 0.75em; }

/* ------------------------------------------------------------------- chrome */

.nav-toggle { display: none; }

.page-footer {
  grid-area: footer;
  max-width: var(--content-w);
  margin: 4rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 900px) {
  .layout { display: block; }

  .sidebar {
    position: static;
    width: auto;
    height: auto;
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 1rem;
  }

  .sidebar nav { display: none; }
  .sidebar:has(.nav-toggle:checked) nav { display: block; }

  .nav-toggle-label {
    display: inline-block;
    cursor: pointer;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  main {
    padding: 1.5rem 1.1rem 4rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "article" "footer";
  }

  /* Ahead of the title it just buries the page; the sidebar toggle already
     covers getting around on a narrow screen. */
  .page-nav { display: none; }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
}

@media (min-width: 901px) { .nav-toggle-label { display: none; } }

/* ------------------------------------------------------------ theme toggle */

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.sidebar-head .brand { min-width: 0; }
.sidebar-head .brand span { overflow-wrap: anywhere; }

.theme-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.theme-toggle:hover { color: var(--text); background: rgba(127, 127, 127, 0.12); }

.theme-toggle svg { width: 16px; height: 16px; }

/* Show the icon for the theme you would switch *to*. */
.theme-toggle .to-dark { display: block; }
.theme-toggle .to-light { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .to-dark { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .to-light { display: block; }
}

:root[data-theme="dark"] .theme-toggle .to-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .to-light { display: block; }