/* SPDX-License-Identifier: CC0-1.0 */

/* A modified version of the Forester CSS theme,
   see https://git.sr.ht/~jonsterling/forester-base-theme/tree/main/item/style
   for the original, which is licensed under the CC0 1.0 license.
*/

/* ========================================
   CSS Custom Properties
   ======================================== */

:root {
  /* Enable light-dark() function */
  color-scheme: light dark;

  /* Spacing */
  --space-xs: 0.25em;
  --space-sm: 0.5em;
  --space-md: 1em;
  --space-lg: 1.5em;
  --space-xl: 2em;
  --content-gap: 0.9375rem;
  --radius: 0.3125rem;

  /* Colors - Modus Themes palette */
  /* See https://protesilaos.com/emacs/modus-themes-colors */
  --color-text: light-dark(#000000, #ffffff); /* fg-main */
  --color-text-subtle: light-dark(#193668, #c6daff); /* fg-alt */
  --color-text-faded: light-dark(#595959, #989898); /* fg-dim */
  --color-text-emphasis: light-dark(#8f0075, #f78fe7); /* magenta-warmer */
  --color-background: light-dark(#ffffff, #000000); /* bg-main */
  --color-border: light-dark(#9f9f9f, #646464); /* border */
  --color-accent: light-dark(#b2e4dc, #45605e); /* bg-hover */
  --color-accent-hover: light-dark(#b2e4dc28, #45605e40); /* bg-hover with opacity */
  --color-error: light-dark(#a60000, #ff5f59); /* err */
  --color-info: light-dark(#005f5f, #6ae4b9); /* info */
  --color-mark: light-dark(#dae5ec, #2f3849); /* bg-hl-line */

  /* Typography */
  --font-body: "IBM Plex Serif", serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.9375rem;
  --font-size-xs: 0.875rem;
  --font-size-heading-lg: 1.5rem;
  --font-size-heading-md: 1.375rem;
  --font-size-heading-sm: 1.125rem;
  --font-size-heading-xs: 1.0625rem;
  --font-size-heading-block: 1rem;
  --line-height-base: 1.55;
  --line-height-heading: 1.2;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* ========================================
   Base Styles
   ======================================== */

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-background);
  counter-reset: heading-2;
  hyphens: auto;
  text-wrap: pretty;
  accent-color: var(--color-accent);
}

a {
  color: var(--color-text);
  text-decoration: inherit;
}

/* ========================================
   Typography - Headings
   ======================================== */

:is(h1, h2, h3, h4, h5, h6) {
  line-height: var(--line-height-heading);
  margin-block-end: 0;
  text-wrap: balance;
}

:is(h1, h2, h3, h4) {
  margin-block-start: var(--space-sm);
}

:is(h5, h6, p) {
  margin-block-start: 0;
  margin-block-end: 1lh;

  &:has(+ .math-display) {
    margin-block-end: var(--space-sm);
  }
}

/* Details heading sizes */
details :is(h1, h2, h3, h4, h5, h6) {
  font-size: var(--font-size-heading-xs);
  display: inline;
  &:is(h1, h2, h3, h4) {
    font-size: var(--font-size-heading-sm);
  }
}

/* p:last-child, p:has(+ section) {
  margin-block-end: var(--space-sm);
} */

summary {
  margin-block: var(--space-xs);
}

h1 > .taxon::after {
  content: ". ";
}

/* Heading counters */
details:has(> summary > header > h2) { counter-reset: heading-3; }
details:has(> summary > header > h3) { counter-reset: heading-4; }
details:has(> summary > header > h4) { counter-reset: heading-5; }
details:has(> summary > header > h5) { counter-reset: heading-6; }

h2 { counter-increment: heading-2; --num: counter(heading-2); }
h3 { counter-increment: heading-3; --num: counter(heading-2) "." counter(heading-3); }
h4 { counter-increment: heading-4; --num: counter(heading-2) "." counter(heading-3) "." counter(heading-4); }
h5 { counter-increment: heading-5; --num: counter(heading-2) "." counter(heading-3) "." counter(heading-4) "." counter(heading-5); }
h6 { counter-increment: heading-6; --num: counter(heading-2) "." counter(heading-3) "." counter(heading-4) "." counter(heading-5) "." counter(heading-6); }

:is(h2, h3, h4, h5, h6) {
  &.disable-numbering {
    counter-increment: none;

    &::before {
      content: none;
    }

    & > .taxon::after {
      content: ". ";
    }
  }

  &:not(.disable-numbering) {
    &:not(:has(> .taxon))::before {
      content: var(--num) ". ";
    }

    & > .taxon::after {
      content: " " var(--num) ". ";
    }
  }
}

/* ========================================
   Code & Preformatted Text
   ======================================== */

pre,
code {
  border-radius: var(--radius);
}

code:not(:is(pre code)) {
  color: var(--color-text-emphasis);
}

pre {
  padding: var(--space-sm);
  font-size: var(--font-size-sm);
  margin-block-start: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

code {
  padding: 0.2em;
  font-size: var(--font-size-xs);
}

/* ========================================
   Math (KaTeX & MathML)
   ======================================== */

.katex {
  font-size: 1.15em !important;
}

math {
  font-size: 1.12em;
}

mrow:hover {
  background-color: var(--color-accent-hover);
}

.math-display {
  margin-block: var(--space-md);

  svg {
    display: block;
    margin-inline: auto;
  }
}

/* ========================================
   Color Scheme Specific Styles
   ======================================== */

@media (prefers-color-scheme: light) {
  .color-dark {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  .color-light {
    display: none;
  }
}

/* ========================================
   Media Elements
   ======================================== */

:is(pre, img, .katex-display, section, center) {
  overflow-y: hidden;
}

img {
  object-fit: cover;
  max-inline-size: 100%;
}

figure {
  text-align: center;
}

figcaption {
  font-style: italic;
  padding: 0.1875rem;
}

/* ========================================
   Layout
   ======================================== */

/* Mobile layout */
@media (width <= 1000px) {
  body {
    margin-block-start: var(--space-md);
    margin-inline: var(--space-sm);
  }

  #grid-wrapper > nav {
    display: none;
  }
}

/* Desktop layout - centered article with sticky left TOC */
@media (width > 1000px) {
  body {
    margin-block-start: var(--space-xl);
  }

  #grid-wrapper {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 90ex) 1fr;
    gap: var(--space-sm);
  }

  #grid-wrapper > article {
    grid-column: 2;
    max-inline-size: 90ex;
  }

  #grid-wrapper > nav {
    grid-column: 1;
    grid-row: 2 / 3;
    justify-self: end;
    position: sticky;
    inset-block-start: var(--space-xl);
    max-block-size: calc(100vh - var(--space-xl) * 2);
    max-inline-size: 20rem;
    overflow-y: auto;
    padding-inline-end: var(--space-sm);
  }

  #grid-wrapper > header {
    grid-column: 2;
    grid-row: 1;
    min-height: 2.25rem;
  }

  #grid-wrapper > article {
    grid-row: 2;
  }
}

/* ========================================
   Blocks & Sections
   ======================================== */

.block {
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.75rem;
  padding-block: 0.25rem;
  border-radius: var(--radius);

  &.highlighted {
    border-inline-start: 2px solid var(--color-border);
    border-radius: 0 var(--radius) var(--radius) 0;
  }

  &.hide-metadata > details > summary > header > .metadata {
    display: none;
  }

  & > details {
    margin-block-end: 0em;

    &[open] {
      margin-block-end: 0em;
    }
  }
}

/* Nested blocks get hover effect, but not root block */
.block .block:hover {
  background-color: var(--color-accent-hover);
  transition: var(--transition-fast) all;
}

.highlighted {
  border-inline-start: 2px solid var(--color-border);

  &:hover {
    border-color: var(--color-border);
  }
}

section .block[data-taxon] details > summary > header > h1 {
  font-size: var(--font-size-heading-block);
}

/* ========================================
   Details & Summary
   ======================================== */

details > summary {
  list-style-type: none;

  &::marker,
  &::-webkit-details-marker {
    display: none;
  }

  & > header {
    display: inline;
  }
}

article > section > details > summary > header {
  display: block;
  margin-block-end: var(--space-sm);

  & > h1 {
    font-size: var(--font-size-heading-lg);

    & > .taxon {
      display: block;
      font-size: var(--font-size-xs);
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--color-text-subtle);
      padding-block-end: 0.375rem;
    }
  }
}

section section:is([data-taxon="Reference"], [data-taxon="Person"]) > details > summary > header > h1 > .taxon {
  display: none;
}

/* ========================================
   Table of Contents
   ======================================== */

nav#toc {
  counter-reset: toc-2;
  font-size: var(--font-size-sm);

  &,
  & a {
    color: var(--color-text-subtle);
  }

  & h1 {
    margin-block-start: 0;
    font-size: var(--font-size-heading-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  & h2 {
    font-size: 1em;
  }

  & ul {
    list-style-type: none;
    padding-inline-start: 0;
    margin: 0;
  }

  & li {
    list-style-position: inside;
    padding-block: 0.0625rem;
    line-height: 1.35;

    & > ul {
      padding-inline-start: 0.875rem;
      margin-inline-start: 0.25rem;
    }
  }

  & .link {
    box-shadow: none;
    text-decoration: none;
    transition: color var(--transition-fast);

    &:hover {
      color: var(--color-text);
    }
  }

  & a {
    &.bullet {
      opacity: 0.5;
      margin-inline-end: 0.25em;
      padding-inline: 0.15em;
      text-decoration: none;
    }

    &.slug {
      display: none;
    }
  }
}

/* TOC counter resets */
nav#toc > div.block > ul > li { counter-reset: toc-3; }
nav#toc > div.block > ul > li > ul > li { counter-reset: toc-4; }
nav#toc > div.block > ul > li > ul > li > ul > li { counter-reset: toc-5; }
nav#toc > div.block > ul > li > ul > li > ul > li > ul > li { counter-reset: toc-6; }

/* TOC counter increments */
nav#toc > div.block > ul > li > a.link.local {
  counter-increment: toc-2;
  --num: counter(toc-2);
}

nav#toc > div.block > ul > li > ul > li > a.link.local {
  counter-increment: toc-3;
  --num: counter(toc-2) "." counter(toc-3);
}

nav#toc > div.block > ul > li > ul > li > ul > li > a.link.local {
  counter-increment: toc-4;
  --num: counter(toc-2) "." counter(toc-3) "." counter(toc-4);
}

nav#toc > div.block > ul > li > ul > li > ul > li > ul > li > a.link.local {
  counter-increment: toc-5;
  --num: counter(toc-2) "." counter(toc-3) "." counter(toc-4) "." counter(toc-5);
}

nav#toc > div.block > ul > li > ul > li > ul > li > ul > li > ul > li > a.link.local {
  counter-increment: toc-6;
  --num: counter(toc-2) "." counter(toc-3) "." counter(toc-4) "." counter(toc-5) "." counter(toc-6);
}

/* TOC numbering display */
:is(
  nav#toc > div.block > ul > li > a.link.local,
  nav#toc > div.block > ul > li > ul > li > a.link.local,
  nav#toc > div.block > ul > li > ul > li > ul > li > a.link.local,
  nav#toc > div.block > ul > li > ul > li > ul > li > ul > li > a.link.local,
  nav#toc > div.block > ul > li > ul > li > ul > li > ul > li > ul > li > a.link.local
) {
  &.disable-numbering {
    counter-increment: none;

    &::before {
      content: none;
    }

    & > .taxon::after {
      content: ". ";
    }
  }

  &:not(.disable-numbering) {
    &:not(:has(> .taxon))::before {
      content: var(--num) ". ";
    }

    & > .taxon::after {
      content: " " var(--num) ". ";
    }
  }
}

/* ========================================
   Links
   ======================================== */

.link {
  cursor: pointer;

  &.external {
    text-decoration: underline;
  }

  &:hover {
    background-color: var(--color-accent-hover);
  }
}

:is(a.link.local, .link.local a, a.slug) {
  box-shadow: none;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-border);
  text-underline-offset: 0.15em;
  transition: text-decoration-color var(--transition-fast);

  &:hover {
    text-decoration-color: var(--color-accent);
  }
}

a.heading-link {
  box-shadow: none;
}

:is(a.slug, a.bullet, .edit-button):hover {
  background-color: var(--color-accent-hover);
}

/* ========================================
   Metadata & Utility Classes
   ======================================== */

.metadata {
  & > address {
    display: inline;
  }

  & ul {
    padding-inline-start: 0;
    display: inline;
  }

  & li {
    display: inline;

    &::after {
      content: " · ";
    }

    &:last-child::after {
      content: "";
    }
  }
}

:is(.slug, .doi, .orcid) {
  color: var(--color-text-faded);
  font-weight: 300;
  font-size: var(--font-size-xs);
  opacity: 0.8;
  transition: opacity var(--transition-fast);

  &:hover {
    opacity: 1;
  }
}

.edit-button {
  color: var(--color-text-faded);
  font-weight: 200;
}

span.taxon {
  color: var(--color-text-faded);
  font-weight: 600;
  letter-spacing: 0.01em;
}

address {
  display: inline;
}

.nowrap {
  white-space: nowrap;
}

.nocite {
  display: none;
}

/* ========================================
   Link Lists
   ======================================== */

.link-list > section {
  & > details > summary > header h1 {
    font-size: var(--font-size-heading-block);
  }

  &.block > details {
    margin-block-end: var(--space-xs);
  }
}

/* ========================================
   Footer
   ======================================== */

footer {
  & > section {
    margin-block-end: var(--space-md);
  }

  & h2 {
    font-size: var(--font-size-heading-sm);
  }
}

/* ========================================
   Tables
   ======================================== */

table {
  margin-block-end: var(--space-md);
}

:is(th, td) {
  padding-inline: 0.9375rem;
  vertical-align: top;
}

th {
  text-align: start;
}

/* Macro tables */
table.macros {
  overflow: visible;
  font-size: var(--font-size-xs);

  & td {
    padding-inline-start: 0.3125rem;
    padding-inline-end: 0.9375rem;
    vertical-align: baseline;
  }
}

:is(td.macro-name, td.macro-body) {
  white-space: nowrap;
}

td.macro-doc {
  font-size: var(--font-size-xs);
}

.macro-doc {
  font-style: italic;
}

.macro-name {
  white-space: nowrap;
}

.macro-is-private {
  color: var(--secondary);
}

.enclosing.macro-scope > .enclosing {
  border-radius: 0.125rem;

  &:hover {
    background-color: var(--color-accent-hover);
  }
}

/* ========================================
   Blockquotes
   ======================================== */

blockquote {
  border-inline-start: 1px solid var(--secondary);
  font-style: italic;
}

/* ========================================
   Lists
   ======================================== */

:is(ul, ol) {
  padding-block-end: var(--space-sm);
}

ol {
  list-style-type: decimal;

  & li ol {
    list-style-type: lower-alpha;

    & li ol {
      list-style-type: lower-roman;
    }
  }
}

/* ========================================
   Tooltips
   ======================================== */

.tooltip {
  position: relative;

  &.inline {
    display: inline-block;
  }

  &.display {
    display: block;
  }

  & .tooltiptext {
    visibility: hidden;
    white-space: nowrap;
    min-inline-size: fit-content;
    background-color: var(--color-text);
    color: var(--color-background);
    padding-inline-start: 0.3125rem;
    padding-block-start: 0.3125rem;
    padding-inline-end: 0.625rem;
    border-radius: 0.375rem;
    position: absolute;
    z-index: 1;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    margin-inline-start: -3.75rem;
    opacity: 0;
    transition: opacity var(--transition-normal);

    &::after {
      content: "";
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 50%;
      margin-inline-start: -0.3125rem;
      border-width: 0.3125rem;
    }

    & a {
      color: var(--color-background);
    }
  }

  &:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
}

[aria-label][role~="tooltip"]::after {
  font-family: var(--font-body);
}

/* ========================================
   Miscellaneous
   ======================================== */

mark {
  background-color: var(--color-mark);
}

hr {
  margin-block: 0.625rem 1.25rem;
  background-color: var(--color-text-faded);
  border: 0 none;
  inline-size: 100%;
  block-size: 0.125rem;
}

:is(.error, .info) {
  border-radius: 0.25rem;
  padding-inline: 0.1875rem;
  padding-block: 0.0625rem 0.125rem;
  font-weight: bold;
}

.error {
  background-color: var(--color-error);
  color: var(--color-background);
}

.info {
  background-color: var(--color-info);
  color: var(--color-background);
}

/* Ninja Keys */
ninja-keys::part(ninja-action) {
  white-space: nowrap;
}

@media (width > 1000px) {
  #grid-wrapper > article {
    position: relative;
  }

  aside {
    text-align: left;
    font-size: var(--font-size-sm);
    max-inline-size: 16rem;
    position: absolute;
    /* float: right; */
    /* clear: right; */
    /* margin-right: -18rem; */
    right: -40%;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
  }

  #grid-wrapper > article,
  #grid-wrapper > article > section,
  #grid-wrapper > article > section > details {
    overflow: visible;
  }
}

@media (width <= 1000px) {
  aside {
    font-size: var(--font-size-sm);
    float: none;
    clear: none;
    position: relative;
    margin: 1rem 0 1rem auto;
    padding: 1rem .5rem;
    left: 0;
    bottom: 0;
    text-align: left;
    width: initial;
    max-width: 85%;
    border-top: 1px solid;
    border-bottom: 1px solid;
  }

  aside::after {
    content: "sidenote";
    font-size: 10px;
    position: absolute;
    right: 0;
    bottom: 0.1rem;
  }
}