/* The MindAttic look (mindattic.com's palette and type, the codex README.htm layout) on top of
   DocFX's modern template. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300..800&display=swap');

/* Attic: the wordmark face only (MindAttic.Components AtticFont, pinned CDN copy). */
@font-face {
  font-family: 'Attic';
  font-style: normal;
  font-weight: normal;
  font-display: block;
  src: url('https://cdn.jsdelivr.net/gh/mindattic/MindAttic.Components@V4/web/components/AtticFont/fonts/attic.woff2') format('woff2');
}

:root,
[data-bs-theme=dark] {
  --ma-bg: #0d1117;
  --ma-bg2: #13161b;
  --ma-bg3: #1a1e25;
  --ma-border: #2a2f3a;
  --ma-text: #e8eaf0;
  --ma-muted: #9aa0b0;
  --ma-h1: #FF0033;
  --ma-h2: #FF0033;
  --ma-red-hover: #ff4d70;
  --ma-h3: #e8eaf0;
  --ma-code: #f0f6fc;
  --ma-mono: 'Cascadia Code', 'Fira Code', Consolas, 'SF Mono', monospace;
}

[data-bs-theme=dark] {
  --bs-body-bg: var(--ma-bg);
  --bs-body-bg-rgb: 13, 17, 23;
  --bs-body-color: var(--ma-text);
  --bs-secondary-color: var(--ma-muted);
  --bs-tertiary-bg: var(--ma-bg2);
  --bs-secondary-bg: var(--ma-bg3);
  --bs-border-color: var(--ma-border);
  --bs-link-color: var(--ma-h1);
  --bs-link-color-rgb: 255, 0, 51;
  --bs-link-hover-color: var(--ma-red-hover);
  --bs-link-hover-color-rgb: 255, 77, 112;
  --bs-code-color: var(--ma-code);
  --bs-font-monospace: var(--ma-mono);
}

/* MindAttic red (#FF0033) is the accent in light mode too. */
[data-bs-theme=light] {
  --bs-link-color: #FF0033;
  --bs-link-color-rgb: 255, 0, 51;
  --bs-link-hover-color: #cc0029;
  --bs-link-hover-color-rgb: 204, 0, 41;
}
[data-bs-theme=light] article h1,
[data-bs-theme=light] article h2,
[data-bs-theme=light] .toc a.active,
[data-bs-theme=light] .affix a.active { color: #FF0033; }

/* Wordmark: logo.svg is the white Attic "M" and the repo name is set in Attic, as on mindattic.com;
   light mode shows both black. */
#logo { height: 32px; width: auto; margin-right: .35rem; }
[data-bs-theme=light] #logo { filter: invert(1); }
.navbar-brand {
  font-family: 'Attic', serif;
  font-size: 1.6rem;
  font-weight: normal;
  letter-spacing: .01em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
[data-bs-theme=dark] .navbar-brand { color: #fff; }
[data-bs-theme=light] .navbar-brand { color: #000; }

/* Outfit is the base font: Bootstrap's font variables feed body, nav, search, buttons and tooltips. */
:root,
[data-bs-theme=dark],
[data-bs-theme=light] {
  --bs-font-sans-serif: 'Outfit', system-ui, sans-serif;
  --bs-body-font-family: 'Outfit', system-ui, sans-serif;
  --bs-btn-font-family: 'Outfit', system-ui, sans-serif;
}
input, button, select, textarea { font-family: inherit; }

body {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.8;
}

[data-bs-theme=dark] header > nav,
[data-bs-theme=dark] .navbar {
  background: var(--ma-bg2) !important;
  border-bottom: 1px solid var(--ma-border);
}

[data-bs-theme=dark] footer {
  background: var(--ma-bg2);
  border-top: 1px solid var(--ma-border);
  color: var(--ma-muted);
  font-size: .78rem;
}

/* Headings: normal weight in both themes, never bold. */
article h1, article h2, article h3, article h4, article h5, article h6 { font-weight: normal; }
[data-bs-theme=dark] article h1 {
  color: var(--ma-h1);
  font-size: 2rem;
  border-bottom: 1px solid var(--ma-border);
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
}
[data-bs-theme=dark] article h2 {
  color: var(--ma-h2);
  font-size: 1.35rem;
  margin-top: 2.75rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--ma-border);
  padding-bottom: .3rem;
}
[data-bs-theme=dark] article h3 { color: var(--ma-h3); font-size: 1.05rem; margin-top: 1.5rem; }
[data-bs-theme=dark] article h4 { font-size: .95rem; margin-top: 1rem; }

/* Code */
[data-bs-theme=dark] article code {
  background: var(--ma-bg2);
  color: var(--ma-code);
  padding: .15em .45em;
  border-radius: 4px;
  font-size: .84em;
}
[data-bs-theme=dark] article pre {
  background: var(--ma-bg2);
  border: 1px solid var(--ma-border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
[data-bs-theme=dark] article pre code,
[data-bs-theme=dark] article pre code.hljs {
  background: none;
  padding: 0;
  font-size: .84rem;
  line-height: 1.65;
}

/* Blockquotes and tables */
[data-bs-theme=dark] article blockquote {
  border-left: 3px solid var(--ma-h1);
  background: var(--ma-bg2);
  color: var(--ma-muted);
  padding: .65rem 1rem;
  border-radius: 0 4px 4px 0;
  font-style: italic;
}
[data-bs-theme=dark] article blockquote p { margin: 0; }
[data-bs-theme=dark] article table { font-size: .875rem; }
[data-bs-theme=dark] article thead th {
  background: var(--ma-bg3);
  color: var(--ma-h2);
  font-weight: normal;
  border: 1px solid var(--ma-border);
}
[data-bs-theme=dark] article tbody td { border: 1px solid var(--ma-border); vertical-align: top; }
[data-bs-theme=dark] article tbody tr:hover { background: rgba(255, 255, 255, .025); }

/* "In this article" prints its full length down the side: no sticky box with its own scrollbar,
   only the browser's. */
body > main > .affix {
  position: static !important;
  max-height: none !important;
  overflow: visible !important;
  align-self: flex-start;
}

/* Back to Top: a rounded square holding a centered equilateral triangle, in the mindattic.com
   button look (dark, red border, red on hover). */
.ma-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1030;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FF0033;
  border-radius: .6rem;
  background: #13161b;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity .28s cubic-bezier(.4, 0, .2, 1), transform .28s cubic-bezier(.4, 0, .2, 1),
              visibility .28s, background-color .28s cubic-bezier(.4, 0, .2, 1);
}
.ma-top svg { width: 70%; height: 70%; fill: currentColor; display: block; }
.ma-top.show { opacity: 1; visibility: visible; transform: none; }
.ma-top:hover, .ma-top:focus-visible { background: #FF0033; border-color: #ff4d70; }
[data-bs-theme=light] .ma-top { background: #fff; color: #000; }
[data-bs-theme=light] .ma-top:hover, [data-bs-theme=light] .ma-top:focus-visible { background: #FF0033; color: #fff; }

/* Side navigation and the "In this article" outline */
[data-bs-theme=dark] .toc,
[data-bs-theme=dark] .affix {
  font-size: .79rem;
}
[data-bs-theme=dark] .toc a,
[data-bs-theme=dark] .affix a {
  color: var(--ma-muted);
  border-radius: 4px;
}
[data-bs-theme=dark] .toc a:hover,
[data-bs-theme=dark] .affix a:hover { color: var(--ma-text); }
[data-bs-theme=dark] .toc li.active > a,
[data-bs-theme=dark] .toc a.active,
[data-bs-theme=dark] .affix a.active {
  color: var(--ma-h1);
  font-weight: 500;
}
[data-bs-theme=dark] .affix h5 {
  font-size: .68rem;
  font-weight: normal;
  color: var(--ma-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Copy button, as on README.htm */
.ma-copy {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: var(--ma-bg3);
  color: var(--ma-muted);
  border: 1px solid var(--ma-border);
  border-radius: 4px;
  padding: .15rem .55rem;
  font-size: .71rem;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s;
}
pre { position: relative; }
pre:hover .ma-copy { opacity: 1; }
.ma-copy:hover { color: #fff; background: #FF0033; border-color: #ff4d70; }
.ma-copy.ok { color: #7ee787; }