/* Natura docs: the look of the Natura page (neap.systems/natura), itself the Paracosm page's, made for long reading.
   publish/make_docs_site.py copies this file to <out>/docs.css. No web fonts and no external requests: the font
   families are the ones the page names, each followed by what every system has. */

:root{
  --bg:#070a0f; --panel:#0b1219; --ink:#cdd6df; --soft:#b7c1cb; --dim:#7d8b98;
  --faint:#38434e; --gold:#c8a45c; --live:#7fd6c2; --edge:#1a2530; --rule:#152029;
  --bright:#e6edf3;
  --mono:"Iosevka","Cascadia Code","Consolas",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; min-height:100vh;
  background:var(--bg) radial-gradient(130% 90% at 50% -8%, #0c131b 0%, var(--bg) 58%) fixed;
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px; line-height:1.72; letter-spacing:.1px;
}
::selection{background:rgba(200,164,92,.32); color:var(--bright)}
a{color:var(--live); text-underline-offset:2px}
a:hover{color:#a9ecdd}
a:focus-visible, summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:3px}

/* ---- the slim header ---- */
.top{border-bottom:1px solid var(--rule)}
.top-in{
  max-width:1200px; margin:0 auto; padding:18px 26px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:3px; text-transform:uppercase; color:var(--dim);
}
.top a{color:var(--dim); text-decoration:none}
.top a:hover{color:var(--live)}
.top .sep{color:var(--faint)}
.top .here{color:var(--soft); letter-spacing:2px}

/* ---- the two columns ---- */
.layout{
  max-width:1200px; margin:0 auto; padding:36px 26px 110px;
  display:grid; grid-template-columns:240px minmax(0,1fr); gap:0 60px; align-items:start;
}

/* ---- the contents list (sidebar on wide screens, a folding box above the page on narrow ones) ---- */
.toc{
  position:sticky; top:0; max-height:100vh; overflow-y:auto; overscroll-behavior:contain;
  padding:14px 6px 48px 0;
  scrollbar-width:thin; scrollbar-color:var(--faint) transparent;
}
.toc-list, .toc-list ul{list-style:none; margin:0; padding:0}
.toc-list{font-family:var(--mono); font-size:13px; line-height:1.4}
.toc-list li{margin:0; padding:0}
.toc-list a{
  display:block; padding:4px 10px 4px 12px; margin:1px 0;
  color:var(--soft); text-decoration:none;
  border-left:2px solid transparent; border-radius:0 4px 4px 0;
}
.toc-list a:hover{color:var(--live); background:rgba(127,214,194,.05)}
.toc-list a.cur{color:var(--gold); border-left-color:var(--gold); background:rgba(200,164,92,.08)}
.toc-list .grp{
  display:block; margin:24px 0 6px; padding-left:14px;
  color:var(--gold); font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase;
}
.toc-list .cap{display:block; margin:12px 0 3px; padding-left:14px; color:var(--dim); font-size:11.5px; letter-spacing:.3px}
.toc-list ul ul a{padding-left:20px}
.toc-m{display:none}

/* ---- the document ---- */
.doc{max-width:780px; min-width:0; overflow-wrap:break-word}
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6{
  font-family:var(--mono); font-weight:600; scroll-margin-top:16px; overflow-wrap:break-word;
}
.doc h1{color:var(--gold); font-size:31px; line-height:1.25; letter-spacing:.6px; margin:0 0 24px}
.doc h2{
  color:var(--gold); font-size:21px; line-height:1.35; letter-spacing:.4px;
  margin:56px 0 16px; padding-top:20px; border-top:1px solid var(--rule);
}
.doc h3{color:var(--live); font-size:15.5px; line-height:1.45; letter-spacing:.5px; margin:36px 0 12px}
.doc h4, .doc h5, .doc h6{color:var(--bright); font-size:14px; line-height:1.5; letter-spacing:.4px; margin:28px 0 10px}
.doc h1 code, .doc h2 code, .doc h3 code, .doc h4 code{font-size:.92em}
.doc p{margin:0 0 18px}
.doc strong{color:var(--bright); font-weight:700}
.doc em{color:var(--live); font-style:italic}
.doc del{color:var(--dim)}
.doc hr{border:0; height:1px; background:var(--rule); margin:40px 0}

.doc ul{margin:0 0 20px; padding-left:0; list-style:none}
.doc ul > li{position:relative; padding-left:22px; margin:0 0 9px; color:var(--soft)}
.doc ul > li::before{
  content:""; position:absolute; left:2px; top:.66em; width:6px; height:6px;
  background:var(--gold); transform:rotate(45deg); opacity:.7;
}
.doc ol{margin:0 0 20px; padding-left:1.7em; color:var(--soft)}
.doc ol > li{margin:0 0 9px; padding-left:4px}
.doc ol > li::marker{color:var(--gold); font-family:var(--mono); font-size:.88em}
.doc li > p{margin:0 0 10px}
.doc li > ul, .doc li > ol{margin:9px 0 6px}
.doc li strong{color:var(--bright)}

.doc code{
  font-family:var(--mono); font-size:.86em; letter-spacing:0;
  color:var(--gold); background:rgba(200,164,92,.08); border:1px solid rgba(200,164,92,.16);
  border-radius:4px; padding:.06em .36em;
}
.doc code.path{cursor:help}
.doc pre{
  margin:0 0 22px; padding:16px 20px; overflow-x:auto;
  background:rgba(120,150,170,.05); border:1px solid var(--edge); border-radius:8px;
  font-family:var(--mono); font-size:13.5px; line-height:1.6; color:var(--soft); tab-size:4;
  scrollbar-width:thin; scrollbar-color:var(--faint) transparent;
}
.doc pre code{
  font-size:inherit; color:inherit; background:none; border:0; padding:0; border-radius:0; white-space:pre;
}
.doc li > pre{margin:10px 0 14px}

.doc blockquote{
  margin:0 0 22px; padding:14px 20px; color:var(--soft);
  background:linear-gradient(180deg, rgba(127,214,194,.05), rgba(127,214,194,.02));
  border-left:2px solid var(--live); border-radius:0 6px 6px 0;
}
.doc blockquote > :last-child{margin-bottom:0}

.tablewrap{
  overflow-x:auto; margin:0 0 26px; border:1px solid var(--edge); border-radius:8px;
  scrollbar-width:thin; scrollbar-color:var(--faint) transparent;
}
.doc table{border-collapse:collapse; width:100%; font-size:15px; line-height:1.55}
.doc th{
  font-family:var(--mono); text-align:left; color:var(--gold); font-weight:600;
  font-size:11.5px; letter-spacing:1px; text-transform:uppercase;
  padding:11px 14px; background:rgba(200,164,92,.05); border-bottom:1px solid var(--edge); vertical-align:bottom;
}
.doc td{padding:10px 14px; border-top:1px solid var(--rule); color:var(--soft); vertical-align:top}
.doc tbody tr:first-child td{border-top:0}
.doc th + th, .doc td + td{border-left:1px solid var(--rule)}
.doc td:first-child{color:var(--ink)}

/* the docs home: the note about the source, and the contents under the README */
.doc .note{
  background:linear-gradient(180deg, rgba(127,214,194,.05), rgba(127,214,194,.02));
  border-left:2px solid var(--live); border-radius:0 6px 6px 0;
  padding:14px 20px; margin:0 0 26px; color:var(--soft); font-size:16px;
}
.doc .note strong:first-child{color:var(--live)}
.doc ul.chapters > li{margin-bottom:12px}
.doc ul.chapters a{font-family:var(--mono); font-size:14.5px; text-decoration:none; color:var(--live)}
.doc ul.chapters a:hover{text-decoration:underline}
.doc ul.chapters .what{display:block; color:var(--soft); font-size:15.5px; line-height:1.55}

/* the module reference */
.doc .modidx td:first-child{white-space:nowrap}
.doc .modidx td:first-child a{font-family:var(--mono); font-size:13.5px; text-decoration:none}
.doc .modidx td:first-child a:hover{text-decoration:underline}
.doc .mod{margin:0 0 34px; padding:4px 0 0}
.doc .mod h3{margin:0 0 8px}
.doc .mod h3 a{text-decoration:none; color:inherit}
.doc .mod .about{color:var(--soft); font-size:15.5px; margin:0 0 12px}
.doc dl.facts{margin:0; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 16px; font-size:15px}
.doc dl.facts dt{font-family:var(--mono); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--dim); padding-top:3px}
.doc dl.facts dd{margin:0; color:var(--soft); min-width:0}
.doc .ok{color:var(--live)}
.doc .bad{color:#e8927a}

/* a source file, read online */
.srcpage{max-width:1200px; margin:0 auto; padding:30px 26px 110px}
.srcpage h1{font-family:var(--mono); color:var(--gold); font-size:24px; font-weight:600; letter-spacing:.4px; margin:0 0 10px; overflow-wrap:anywhere}
.srcpage .srcmeta{font-family:var(--mono); font-size:12.5px; color:var(--dim); margin:0 0 20px; line-height:1.8; overflow-wrap:anywhere}
.srcpage .srcmeta a{color:var(--live)}
.srcpage pre.src{
  margin:0; padding:14px 0; overflow-x:auto;
  background:rgba(120,150,170,.05); border:1px solid var(--edge); border-radius:8px;
  font-family:var(--mono); font-size:13px; line-height:1.55; color:var(--ink); tab-size:4;
  counter-reset:line; scrollbar-width:thin; scrollbar-color:var(--faint) transparent;
}
.srcpage pre.src code{white-space:pre}
.srcpage pre.src .l{display:inline-block; min-width:100%; padding-right:20px; counter-increment:line}
.srcpage pre.src .l::before{
  content:counter(line); display:inline-block; width:4.2em; margin-right:1.2em; padding-right:.6em;
  text-align:right; color:var(--faint); border-right:1px solid var(--rule); user-select:none; -webkit-user-select:none;
}
.srcpage pre.src .l:target{background:rgba(200,164,92,.12)}
.srcpage .foot{max-width:none}

.foot{
  margin-top:72px; padding-top:18px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:12px; letter-spacing:.3px; line-height:1.7; color:var(--dim);
}
.foot p{margin:0 0 6px}
.foot a{color:var(--dim)}
.foot a:hover{color:var(--live)}
.foot code{color:var(--dim); background:none; border:0; padding:0; font-size:1em}

/* ---- narrow screens: one column, the contents fold up above the page ---- */
@media (max-width:900px){
  body{font-size:16px}
  .top-in{padding:14px 18px; letter-spacing:2px}
  .layout{grid-template-columns:minmax(0,1fr); padding:18px 18px 90px}
  .toc{display:none}
  .toc-m{
    display:block; margin:0 0 30px;
    background:var(--panel); border:1px solid var(--edge); border-radius:8px;
  }
  .toc-m summary{
    cursor:pointer; padding:12px 16px; font-family:var(--mono); font-size:13px; letter-spacing:.5px;
    color:var(--gold); overflow-wrap:break-word;
  }
  .toc-m summary .now{color:var(--soft)}
  .toc-m[open] summary{border-bottom:1px solid var(--edge)}
  .toc-m .toc-list{padding:4px 8px 14px; font-size:14px}
  .toc-m .toc-list a{padding-top:7px; padding-bottom:7px}
  .doc h1{font-size:25px}
  .doc h2{font-size:19px; margin-top:44px}
  .doc pre{padding:14px 16px; font-size:13px}
  .doc table{font-size:14px}
  .srcpage{padding:18px 18px 90px}
  .srcpage h1{font-size:20px}
  .srcpage pre.src{font-size:12.5px}
  .srcpage pre.src .l::before{width:3.4em; margin-right:.8em}
  .doc dl.facts{grid-template-columns:minmax(0,1fr)}
  .doc dl.facts dt{padding-top:8px}
}
