/* picodoc.css — reusable stylesheet for picodoc-generated documents */

/* ---- 1. Font faces ---- */

/* nunito-regular - latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src:
      local('Nunito Regular'),
      local('Nunito-Regular'),
      url('nunito-v12-latin-regular.woff2') format('woff2'),
      url('nunito-v12-latin-regular.woff') format('woff');
}
/* source-code-pro-regular - latin */
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400;
    src:
        local('Source Code Pro Regular'),
        local('SourceCodePro-Regular'),
        url('source-code-pro-v11-latin-regular.woff2') format('woff2'),
        url('source-code-pro-v11-latin-regular.woff') format('woff');
}

/* ---- 2. CSS custom properties ---- */

:root {
  /* fonts */
  --font-body: Nunito, Arial, Helvetica, sans-serif;
  --font-heading: Nunito, Arial, Helvetica, sans-serif;
  --font-mono: 'Source Code Pro', Menlo, 'DejaVu Sans Mono', monospace;

  /* layout */
  --content-max-width: 62.5em;
  --toc-width: 15em;
  --toc-width-wide: 20em;
  --nav-height: 4em;

  /* dark mode / light mode toggle */
  --mode-slot-width: 68px;
  --mode-slot-height: 28px;
  --mode-button-size: 24px;

  --mode-button-translatey: 2px;
  --mode-button-translatex: 40px;
  --mode-button-translatex-checked: 3px;

  --mode-sun-translatey: 2px;
  --mode-sun-translatex: 3px;
  --mode-sun-translatex-checked: 40px;

  --mode-moon-translatey: 2px;
  --mode-moon-translatex: 3px;
  --mode-moon-translatex-checked: 40px;

  /* One Light palette */
  --color-background: #F9F9F9;
  --color-black: #000000;
  --color-blue: #4078F2;
  --color-brightBlack: #383A42;
  --color-brightBlue: #4078F2;
  --color-brightCyan: #0184BC;
  --color-brightGreen: #50A14F;
  --color-brightPurple: #A626A4;
  --color-brightRed: #E45649;
  --color-brightWhite: #FFFFFF;
  --color-brightYellow: #986801;
  --color-cyan: #0184BC;
  --color-foreground: #383A42;
  --color-green: #50A14F;
  --color-purple: #A626A4;
  --color-red: #E45649;
  --color-white: #A0A1A7;
  --color-yellow: #986801;

  --color-chalky: #e5c07b;
  --color-error: #f44747;

  /* light-mode semantic tokens */
  --bg-color: var(--color-background);
  --text-color: #222;
  --text-color-details: #999;
  --bg-color-highlight: #e9e9e9;
  --bg-color-edge: #ccc;
  --separator-color: #efefed;
  --link-color: #1d4b8f;
  --heading-color: #567f94;
  --text-color-toc-active: #7a2518;

  --code-color-string: var(--color-green);
  --code-color-comment: var(--color-white);
  --code-color-keyword: var(--color-purple);
  --code-color-numeric: var(--color-yellow);
  --code-color-label: var(--color-red);
  --code-color-predefined-identifier: var(--color-blue);
  --code-color-variable: var(--color-yellow);
  --code-color-path: var(--color-chalky);
  --code-color-punctuation: var(--color-white);
}

.dark-mode {
  /* One Dark palette */
  --color-background: #1E2127;
  --color-black: #000000;
  --color-blue: #61AFEF;
  --color-brightBlack: #5C6370;
  --color-brightBlue: #61AFEF;
  --color-brightCyan: #56B6C2;
  --color-brightGreen: #98C379;
  --color-brightPurple: #C678DD;
  --color-brightRed: #E06C75;
  --color-brightWhite: #FFFFFF;
  --color-brightYellow: #D19A66;
  --color-cyan: #56B6C2;
  --color-foreground: #5C6370;
  --color-green: #98C379;
  --color-purple: #C678DD;
  --color-red: #E06C75;
  --color-white: #ABB2BF;
  --color-yellow: #D19A66;

  --color-chalky: #e5c07b;
  --color-error: #f44747;

  /* dark-mode semantic tokens */
  --bg-color: var(--color-background);
  --text-color: #eee;
  --text-color-details: #aaa;
  --bg-color-highlight: #2d2d2d;
  --bg-color-edge: #555;
  --separator-color: #565656;
  --link-color: #50b7e0;
  --heading-color: #567f94;
  --text-color-toc-active: #eee;

  --code-color-string: var(--color-green);
  --code-color-comment: var(--color-foreground);
  --code-color-keyword: var(--color-purple);
  --code-color-numeric: var(--color-yellow);
  --code-color-label: var(--color-red);
  --code-color-predefined-identifier: var(--color-blue);
  --code-color-variable: var(--color-yellow);
  --code-color-path: var(--color-chalky);
  --code-color-punctuation: var(--color-white);
}

/* ---- 3. Reset ---- */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, svg { max-width: 100%; height: auto; }
table { border-collapse: collapse; border-spacing: 0; }

/* ---- 4. Typography ---- */

body {
  font-family: var(--font-body);
  color: var(--text-color);
  background: var(--bg-color);
  line-height: 1.6;
  tab-size: 4;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--heading-color);
  line-height: 1.2;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

h1 { font-size: 2.125em; }
h2 { font-size: 1.6875em; }
h3 { font-size: 1.375em; }
h4, h5 { font-size: 1.125em; }
h6 { font-size: 1em; }

@media (min-width: 768px) {
  h1 { font-size: 2.75em; }
  h2 { font-size: 2.3125em; }
  h3 { font-size: 1.6875em; }
  h4 { font-size: 1.4375em; }
}

p {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: underline;
  outline: none;
}

strong, b { font-weight: bold; }
em, i { font-style: italic; }
small { font-size: 80%; }

/* ---- 5. Code ---- */

code {
  font-family: var(--font-mono);
  color: var(--text-color);
  font-size: 0.9375em;
  background: var(--bg-color-highlight);
  padding: 0.1em 0.5ex;
  border-radius: 4px;
  line-height: 1.45;
}

pre {
  border-left: solid 0.3rem var(--bg-color-edge);
  background: var(--bg-color-highlight);
  padding: 1em;
  overflow-x: auto;
  font-size: 0.9rem;
}

pre, pre > code {
  font-family: var(--font-mono);
  color: var(--text-color);
  line-height: 1.45;
}

pre > code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* ---- 6. Lists and tables ---- */

ul, ol {
  font-size: 1em;
  line-height: 1.6;
  margin: 0 0 1.25em;
  padding-left: 1.5em;
}

ul li ul, ul li ol,
ol li ul, ol li ol {
  margin-left: 1.25em;
  margin-bottom: 0;
}

table {
  background: var(--bg-color);
  margin-bottom: 1.25em;
}

table thead {
  background: var(--bg-color-highlight);
  font-weight: bold;
}

table th, table td {
  padding: 0.5em 0.625em;
  color: var(--text-color);
  line-height: 1.6;
  border-bottom: 1px solid var(--separator-color);
}

/* ---- 7. Page layout ---- */

#nav {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: right;
  padding-left: 0.9375em;
  padding-right: 0.9375em;
}

header, #content, footer {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-left: 0.9375em;
  padding-right: 0.9375em;
}

footer {

  color: var(--text-color-details);
  background: var(--bg-color-highlight);
  border-top: 1px solid var(--bg-color-edge);
  padding-top: 0.5em;
  padding-bottom: 0.1em;
}

#content {
  margin-top: 1.25em;
}

header > h1:first-child {
  color: var(--text-color);
  margin-top: 2.25rem;
  margin-bottom: 0;
}

header .details {
  border-bottom: 1px solid var(--separator-color);
  line-height: 1.45;
  padding: 0.25em;
  color: var(--text-color-details);
  display: flex;
  flex-flow: row wrap;
}

@media (min-width: 768px) {
  body.toc-sidebar {
    padding-left: var(--toc-width);
  }
}

@media (min-width: 1280px) {
  body.toc-sidebar {
    padding-left: var(--toc-width-wide);
  }
}

/* ---- 8. Heading anchors ---- */

h1 > a, h2 > a, h3 > a,
h4 > a, h5 > a, h6 > a {
  color: inherit;
  text-decoration: none;
}

h1 > a:hover, h2 > a:hover, h3 > a:hover,
h4 > a:hover, h5 > a:hover, h6 > a:hover {
  color: var(--link-color);
  text-decoration: none;
}

/* ---- 9. TOC ---- */

#toc {
  border-bottom: 1px solid var(--separator-color);
  padding-bottom: 0.5em;
  padding-left: 0.9375em;
  padding-right: 0.9375em;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

#tocfile {
  color: var(--heading-color);
  font-size: 1.2em;
}

#toc a { text-decoration: none; }
#toc a:hover { text-decoration: underline; }

#toc ul {
  font-family: var(--font-body);
  list-style-type: none;
  padding-left: 1em;
}

#toc > ul {
  padding-left: 0.125em;
}

#toc li {
  line-height: 1.3334;
  margin-top: 0.3334em;
}

/* Pure CSS TOC switching: inline at <768px, sidebar with tocbot at >=768px */
#generated-toc {
  display: none;
  overflow-y: auto;
  height: calc(100vh - 57px);
  padding: 0 0.7em 0 0;
}

@media (min-width: 768px) {
  #generated-toc { display: block; }
  #toc > ul { display: none; }

  #toc.toc-sidebar {
    margin-top: 0;
    max-width: none;
    background-color: var(--bg-color-highlight);
    position: fixed;
    width: var(--toc-width);
    left: 0;
    top: 0;
    border-right: 1px solid var(--bg-color-edge);
    z-index: 1000;
    padding: 0.5em 0 0 0.5em;
    height: 100%;
    overflow: hidden;
  }

  #toc.toc-sidebar #tocfile {
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.2em;
  }

  #toc.toc-sidebar > ul { font-size: 0.9em; }
  #toc.toc-sidebar ul ul { margin-left: 0; padding-left: 1em; }
}

@media (min-width: 1280px) {
  #toc.toc-sidebar { width: var(--toc-width-wide); }
  #toc.toc-sidebar #tocfile { font-size: 1.375em; }
  #toc.toc-sidebar > ul { font-size: 0.95em; }
  #toc.toc-sidebar ul ul { padding-left: 1.25em; }
}

/* Tocbot classes */
.toc-list {
  padding: 0;
  margin: 0 0 0 0.5em;
}

.toc-list-item {
  list-style: none;
}

.toc-list-item a {
  display: block;
  padding: 0 0.2em;
}

.toc-is-active-link {
  color: var(--text-color-toc-active);
  background-color: var(--bg-color-edge);
}

/* ---- 10. Navbar / doc-wrapper ---- */

.doc-wrapper {
  flex: 1;
}

.doc-wrapper a {
  font-size: 2em;
  text-decoration: none;
  color: var(--heading-color);
}

/* ---- 11. Theme toggle ---- */

.mode-checkbox {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.mode-slot {
  position: relative;
  height: var(--mode-slot-height);
  width: var(--mode-slot-width);
  border: 2px solid #e4e7ec;
  border-radius: 10em;
  background-color: white;
  box-shadow: 1px 2px 5px #eeeeef;
  transition: background-color 250ms;
  cursor: pointer;
  box-sizing: content-box;
}

.mode-checkbox:checked ~ .mode-slot {
  background-color: #374151;
}

.mode-button {
  transform: translate(var(--mode-button-translatex), var(--mode-button-translatey));
  position: absolute;
  height: var(--mode-button-size);
  width: var(--mode-button-size);
  border-radius: 50%;
  background-color: #ffeccf;
  box-shadow: inset 0px 0px 0px 0.2em #ffbb52;
  transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.19,1.66,.56,.87);
}

.mode-checkbox:checked ~ .mode-slot .mode-button {
  background-color: #485367;
  box-shadow: inset 0px 0px 0px 0.2em white;
  transform: translate(var(--mode-button-translatex-checked), var(--mode-button-translatey));
}

.sun-icon {
  position: absolute;
  height: var(--mode-button-size);
  width: var(--mode-button-size);
  color: #ffbb52;
}

.sun-icon-wrapper {
  position: absolute;
  height: var(--mode-button-size);
  width: var(--mode-button-size);
  opacity: 1;
  transform: translate(var(--mode-sun-translatex), var(--mode-sun-translatey)) rotate(15deg);
  transform-origin: 50% 50%;
  transition: opacity 400ms, transform 500ms cubic-bezier(.19,1.66,.56,.87);
}

.mode-checkbox:checked ~ .mode-slot .sun-icon-wrapper {
  opacity: 0;
  transform: translate(var(--mode-sun-translatex-checked), var(--mode-sun-translatey)) rotate(0deg);
}

.moon-icon {
  position: absolute;
  height: var(--mode-button-size);
  width: var(--mode-button-size);
  color: white;
}

.moon-icon-wrapper {
  position: absolute;
  height: var(--mode-button-size);
  width: var(--mode-button-size);
  opacity: 0;
  transform: translate(var(--mode-moon-translatex), var(--mode-moon-translatey)) rotate(0deg);
  transition: opacity 400ms ease-in, transform 500ms cubic-bezier(.19,1.66,.56,.87);
}

.mode-checkbox:checked ~ .mode-slot .moon-icon-wrapper {
  opacity: 1;
  transform: translate(var(--mode-moon-translatex-checked), var(--mode-moon-translatey)) rotate(-15deg);
}

/* ---- 12. Transition helper ---- */

.trans {
  transition: background-color 500ms, color 500ms;
}

/* ---- 13. Rouge syntax highlighting ---- */

pre.rouge table td { padding: 5px; }
pre.rouge table pre { margin: 0; }

pre.rouge, pre.rouge .w {
  background-color: var(--bg-color-highlight);
}

pre.rouge .err {
  color: var(--color-black);
  background-color: var(--color-error);
}

pre.rouge .c, pre.rouge .ch, pre.rouge .cd, pre.rouge .cm, pre.rouge .cp, pre.rouge .cpf, pre.rouge .c1, pre.rouge .cs,
.token.comment {
  color: var(--code-color-comment);
  font-style: italic;
}
pre.rouge .o, pre.rouge .ow,
.token.operator {
  color: #546d78;
}
pre.rouge .p, pre.rouge .pi,
.token.punctuation {
  color: var(--code-color-punctuation);
}
pre.rouge .k, pre.rouge .kc, pre.rouge .kd, pre.rouge .kn, pre.rouge .kp, pre.rouge .kr, pre.rouge .kt, pre.rouge .kv,
.token.keyword, .token.boolean, .token.constant {
  color: var(--code-color-keyword);
}
pre.rouge .s, pre.rouge .sa, pre.rouge .sc, pre.rouge .dl, pre.rouge .sd, pre.rouge .s2, pre.rouge .sh, pre.rouge .sx, pre.rouge .sr, pre.rouge .s1,
pre.rouge .sb,
.token.string, .token.char, .token.regex, .token.template-string {
  color: var(--code-color-string);
}
pre.rouge .si,
.token.interpolation {
  color: #757575;
}
pre.rouge .se,
.token.escape {
  color: #757575;
}
pre.rouge .nb, pre.rouge .bp,
.token.builtin {
  color: var(--code-color-predefined-identifier);
}
pre.rouge .nn,
.token.namespace, .token.module {
  color: var(--code-color-path);
}
pre.rouge .nl,
.token.attr-name, .token.property {
  color: var(--code-color-label);
}
pre.rouge .nt,
.token.tag {
  color: #2094f3;
}
pre.rouge .nv, pre.rouge .vc, pre.rouge .vg, pre.rouge .vi, pre.rouge .vm,
.token.variable {
  color: var(--code-color-variable);
}
pre.rouge .nx,
.token.function, .token.decorator, .token.macro, .token.annotation {
  color: #ef5522;
}
pre.rouge .m, pre.rouge .mb, pre.rouge .mf, pre.rouge .mh, pre.rouge .mi, pre.rouge .il, pre.rouge .mo, pre.rouge .mx,
.token.number {
  color: var(--code-color-numeric);
}
pre.rouge .ss,
.token.symbol {
  color: #ff6e42;
}

/* ---- 14. Print styles ---- */

@media print {
  #nav, #toc.toc-sidebar, .mode-slot { display: none; }
  body.toc-sidebar { padding-left: 0; }
  #content { max-width: 100%; }
  a { color: inherit; text-decoration: underline; }
  pre { border-left-color: #ccc; }
}