/* Styles for content websites, which are either the preview shown while the wasm app
   is loading or a freestanding htmlonly website, based on the default Cogent Core color scheme. */

:root {
  color-scheme: light;
  --surface: #FFFFFF;
  --on-surface: #191B22;
  --on-surface-variant: #44474E;
  --surface-container-low: #FAF8FD;
  --surface-container: #F5F3F7;
  --surface-container-high: #EFEDF2;
  --surface-container-highest: #E9E7EC;
  --surface-variant: #E1E2EB;
  --primary: #005BC0;
  --on-primary: #FFFFFF;
  --select-container: #D8E2FF;
  --outline: #75777F;
  --outline-variant: #C5C6CF;

  /* names used in the inline styles generated by core.ToHTML */
  --container-color: var(--surface-variant);
  --primary-color: var(--primary);
  --primary-on-color: var(--on-primary);
  --surface-container-color: var(--surface-container);
  --secondary-container-color: #DAE2F9;
  --secondary-on-container-color: #131B2C;

  --nav-width: 20%;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface: #121316;
    --on-surface: #E1E2EB;
    --on-surface-variant: #C5C6CF;
    --surface-container-low: #1B1B1F;
    --surface-container: #1F1F23;
    --surface-container-high: #292A2D;
    --surface-container-highest: #343438;
    --surface-variant: #44474E;
    --primary: #ADC6FF;
    --on-primary: #002E68;
    --select-container: #394764;
    --outline: #8F9099;
    --outline-variant: #44474E;
    --secondary-container-color: #3F4759;
    --secondary-on-container-color: #DAE2F9;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen,
    Ubuntu, Cantarell, Roboto, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  color: var(--on-surface);
  background-color: var(--surface);
}

svg {
  fill: currentColor;
}

/* The elements of the wasm app (based on app.css). When loading the wasm app,
   the site is #app-wasm-loader, which is removed once the app renders. */

body>* {
  position: fixed;
}

body>canvas {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

body>#app-text-field {
  opacity: 0;
  top: -10px;
  left: -10px;
  width: 0;
  height: 0;
}

body>#app-crash-dialog {
  width: 100vw;
  height: 100vh;
  top: 0;
  background-color: inherit;
  overflow: auto;
  padding: 8px;
}

.cc-site {
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
}

.cc-loading {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 12px;
  color: var(--on-surface-variant);
}

.cc-loading progress {
  width: 8em;
  height: 0.35em;
  border: none;
  border-radius: 9999px;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--surface-variant);
  color: var(--primary);
}

.cc-loading progress::-webkit-progress-bar {
  border-radius: 9999px;
  background-color: var(--surface-variant);
}

.cc-loading progress::-webkit-progress-value {
  border-radius: 9999px;
  background-color: var(--primary);
}

.cc-loading progress::-moz-progress-bar {
  border-radius: 9999px;
  background-color: var(--primary);
}

a {
  color: var(--primary);
}

/* Toolbar */

.cc-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px;
  padding: 1px 16px;
  border-radius: 9999px;
  background-color: var(--surface-container);
}

.cc-icon-button {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: none;
  border-radius: 9999px;
  background: none;
  color: var(--on-surface-variant);
  cursor: pointer;
}

.cc-icon-button img,
.cc-icon-button svg {
  width: 24px;
  height: 24px;
}

.cc-icon-button:hover,
.cc-search-button:hover,
.cc-tree-row:hover {
  background-image: linear-gradient(color-mix(in srgb, var(--on-surface) 8%, transparent) 0 0);
}

#cc-menu {
  display: none;
}

.cc-search-button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 10px 5em 10px 16px;
  border: none;
  border-radius: 9999px;
  background-color: var(--surface-variant);
  color: var(--on-surface-variant);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.cc-search-button svg {
  width: 18px;
  height: 18px;
}

/* Main layout */

.cc-main {
  flex: 1;
  display: flex;
  min-height: 0;
}

.cc-nav {
  position: relative;
  flex: none;
  width: var(--nav-width);
  overflow: auto;
  padding: 8px 8px 16px 8px;
  background-color: var(--surface);
}

.cc-splitter {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  cursor: col-resize;
  touch-action: none;
}

.cc-splitter>div {
  width: 6px;
  height: 36px;
  border-radius: 9999px;
  background-color: var(--outline-variant);
}

.cc-page {
  position: relative; /* contains absolutely positioned elements, such as in KaTeX */
  flex: 1;
  min-width: 0;
  overflow: auto;
  container-type: inline-size;
}

/* The page fills the available height so that the previous and next
   buttons are at the bottom, as in the app. */
.cc-page>div {
  min-height: 100%;
}

/* Page content (inline styles generated by core.ToHTML take precedence) */

.cc-page :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, pre, blockquote) {
  margin: 0;
}

.cc-page :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.cc-page .cc-page-frame {
  padding-inline: 0.5em !important;
  padding-bottom: 16px;
}

@container (min-width: 840px) {
  .cc-page .cc-page-frame {
    padding-inline: 3em !important;
  }
}

.cc-page img,
.cc-page svg {
  max-width: 100%;
}

.cc-page table {
  border-collapse: separate;
  border-spacing: 6px 8px;
  margin: -8px -6px;
}

.cc-page th,
.cc-page td {
  vertical-align: top;
  text-align: start;
}

.cc-page th {
  border-bottom: 2px solid var(--on-surface);
}

.cc-page pre.code {
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  overflow-x: auto;
  border-radius: 16px;
  background-color: var(--surface-container);
  font-family: "Roboto Mono", monospace;
  font-size: 15px;
  line-height: 1.5;
  tab-size: 4;
}

.cc-page details>summary {
  cursor: pointer;
  color: var(--primary);
}

.cc-page :target {
  scroll-margin-top: 8px;
}

/* Trees */

/* flex columns so that row margins do not collapse */
.cc-tree-root,
.cc-tree-node,
.cc-tree-node>[role="group"] {
  display: flex;
  flex-direction: column;
}

.cc-tree-root {
  width: max-content;
}

.cc-tree-root+.cc-tree-root {
  margin-top: 12px;
}

.cc-tree-row {
  display: flex;
  align-items: center;
  height: 34px;
  margin-block: 3px;
  padding: 0 24px 0 4px;
  border-radius: 9999px;
  color: var(--on-surface);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.cc-tree-row.cc-selected {
  background-color: var(--select-container);
}

.cc-tree-branch {
  flex: none;
  display: flex;
  width: 24px;
  height: 24px;
  margin-right: 2px;
  border-radius: 9999px;
  color: var(--primary);
}

.cc-tree-branch:hover {
  background-color: color-mix(in srgb, var(--primary) 16%, transparent);
}

.cc-static-nav ul {
  list-style: none;
  padding-left: 1.25em;
  margin: 4px 0;
}

.cc-static-nav>ul {
  padding-left: 4px;
}

.cc-static-nav li {
  padding: 4px 0;
}

.cc-static-nav a {
  color: var(--on-surface);
  text-decoration: none;
}

/* Search dialog */

.cc-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10vh;
  background-color: rgba(0, 0, 0, 0.32);
}

.cc-dialog {
  display: flex;
  flex-direction: column;
  width: min(600px, calc(100vw - 32px));
  max-height: 70vh;
  padding: 16px;
  gap: 8px;
  border-radius: 28px;
  background-color: var(--surface-container-high);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.cc-dialog input {
  height: 48px;
  padding: 0 16px;
  border: none;
  border-bottom: 1px solid var(--on-surface-variant);
  border-radius: 4px 4px 0 0;
  background-color: var(--surface-container-highest);
  color: var(--on-surface);
  font: inherit;
  outline: none;
}

.cc-dialog input:focus {
  border-bottom: 2px solid var(--primary);
}

.cc-results {
  overflow: auto;
}

.cc-result {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: 9999px;
  color: var(--on-surface);
  text-decoration: none;
}

.cc-result svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--on-surface-variant);
}

.cc-result.cc-selected {
  background-color: var(--select-container);
}

.cc-no-results {
  padding: 8px 12px;
  color: var(--on-surface-variant);
}

/* Compact (narrow) layout: the navigation becomes a drawer */

@media (max-width: 700px) {
  #cc-menu {
    display: flex;
  }

  .cc-toolbar {
    padding-left: 4px;
  }

  .cc-search-button {
    padding-right: 2em;
  }

  .cc-loading progress {
    width: 3em;
  }

  .cc-splitter {
    display: none;
  }

  .cc-nav {
    position: fixed;
    top: 58px;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: min(320px, 85vw);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    border-radius: 0 16px 16px 0;
    background-color: var(--surface-container-low);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  .cc-nav.cc-nav-open {
    transform: none;
  }
}

/* Code highlighting */

.code .bg { background-color: rgba(243, 249, 250, 255); }
.code .k { color: rgba(145, 0, 222, 255); font-weight: bold; }
.code .kc { color: rgba(145, 0, 222, 255); font-weight: bold; }
.code .kd { color: rgba(145, 0, 222, 255); font-weight: bold; }
.code .kn { color: rgba(145, 0, 222, 255); font-weight: bold; }
.code .kp { color: rgba(145, 0, 222, 255); }
.code .kr { color: rgba(145, 0, 222, 255); font-weight: bold; }
.code .kt { color: rgba(2, 110, 0, 255); font-weight: bold; }
.code .nb { color: rgba(145, 0, 222, 255); }
.code .nt { color: rgba(50, 61, 255, 255); }
.code .nc { color: rgba(50, 61, 255, 255); }
.code .ns { color: rgba(50, 61, 255, 255); }
.code .nfl { color: rgba(50, 61, 255, 255); }
.code .nti { color: rgba(50, 61, 255, 255); }
.code .no { color: rgba(180, 40, 26, 255); }
.code .nen { color: rgba(50, 61, 255, 255); }
.code .nem { color: rgba(50, 61, 255, 255); }
.code .nr { color: rgba(50, 61, 255, 255); }
.code .nm { color: rgba(50, 61, 255, 255); }
.code .nj { color: rgba(50, 61, 255, 255); }
.code .ntp { color: rgba(50, 61, 255, 255); }
.code .nf { color: rgba(2, 110, 0, 255); }
.code .nd { color: rgba(145, 0, 222, 255); }
.code .fm { color: rgba(2, 110, 0, 255); }
.code .mt { color: rgba(2, 110, 0, 255); }
.code .np { color: rgba(2, 110, 0, 255); }
.code .cr { color: rgba(2, 110, 0, 255); }
.code .ne { color: rgba(178, 42, 38, 255); font-weight: bold; }
.code .nl { color: rgba(98, 98, 0, 255); }
.code .ev { color: rgba(2, 110, 0, 255); }
.code .nsc { color: rgba(50, 61, 255, 255); font-weight: bold; }
.code .nn { color: rgba(50, 61, 255, 255); font-weight: bold; }
.code .md { color: rgba(50, 61, 255, 255); font-weight: bold; }
.code .pk { color: rgba(50, 61, 255, 255); font-weight: bold; }
.code .lb { color: rgba(50, 61, 255, 255); font-weight: bold; }
.code .nv { color: rgba(123, 88, 0, 255); }
.code .ay { color: rgba(123, 88, 0, 255); }
.code .vc { color: rgba(123, 88, 0, 255); }
.code .vg { color: rgba(123, 88, 0, 255); }
.code .vi { color: rgba(123, 88, 0, 255); }
.code .vm { color: rgba(123, 88, 0, 255); }
.code .vp { color: rgba(123, 88, 0, 255); }
.code .ng { color: rgba(23, 109, 16, 255); }
.code .na { color: rgba(168, 54, 55, 255); }
.code .ni { color: rgba(0, 104, 116, 255); font-weight: bold; }
.code .s { color: rgba(168, 54, 55, 255); }
.code .sa { color: rgba(168, 54, 55, 255); }
.code .st { color: rgba(168, 54, 55, 255); }
.code .sb { color: rgba(168, 54, 55, 255); }
.code .so { color: rgba(168, 54, 55, 255); }
.code .sc { color: rgba(168, 54, 55, 255); }
.code .dl { color: rgba(168, 54, 55, 255); }
.code .sd { color: rgba(168, 54, 55, 255); font-style: italic; }
.code .s2 { color: rgba(168, 54, 55, 255); }
.code .se { color: rgba(150, 73, 1, 255); font-weight: bold; }
.code .sh { color: rgba(168, 54, 55, 255); }
.code .si { color: rgba(151, 64, 102, 255); font-weight: bold; }
.code .sn { color: rgba(168, 54, 55, 255); }
.code .sx { color: rgba(2, 110, 0, 255); }
.code .sr { color: rgba(151, 64, 102, 255); }
.code .s1 { color: rgba(168, 54, 55, 255); }
.code .ss { color: rgba(123, 88, 0, 255); }
.code .fl { color: rgba(168, 54, 55, 255); }
.code .m { color: rgba(0, 104, 116, 255); }
.code .mb { color: rgba(0, 104, 116, 255); }
.code .mf { color: rgba(0, 104, 116, 255); }
.code .mh { color: rgba(0, 104, 116, 255); }
.code .mi { color: rgba(0, 104, 116, 255); }
.code .il { color: rgba(0, 104, 116, 255); }
.code .mo { color: rgba(0, 104, 116, 255); }
.code .mj { color: rgba(0, 104, 116, 255); }
.code .o { color: rgba(0, 104, 116, 255); }
.code .ow { color: rgba(145, 0, 222, 255); font-weight: bold; }
.code .om { color: rgba(0, 104, 116, 255); }
.code .ob { color: rgba(0, 104, 116, 255); }
.code .oa { color: rgba(0, 104, 116, 255); }
.code .pa { color: rgba(0, 104, 116, 255); }
.code .ba { color: rgba(0, 104, 116, 255); }
.code .ol { color: rgba(0, 104, 116, 255); }
.code .or { color: rgba(0, 104, 116, 255); }
.code .oi { color: rgba(0, 104, 116, 255); }
.code .c { color: rgba(7, 103, 130, 255); font-style: italic; }
.code .ch { color: rgba(7, 103, 130, 255); font-style: italic; }
.code .cm { color: rgba(7, 103, 130, 255); font-style: italic; }
.code .c1 { color: rgba(7, 103, 130, 255); font-style: italic; }
.code .cs { color: rgba(2, 110, 0, 255); font-weight: bold; }
.code .cp { color: rgba(2, 110, 0, 255); }
.code .cpf { color: rgba(2, 110, 0, 255); }
.code .w { color: rgba(0, 104, 116, 255); }
.code .gd { color: rgba(186, 28, 16, 255); }
.code .ge { font-style: italic; }
.code .gr { color: rgba(192, 3, 0, 255); }
.code .gh { color: rgba(75, 83, 188, 255); font-weight: bold; }
.code .gi { color: rgba(2, 110, 0, 255); }
.code .go { color: rgba(0, 104, 116, 255); }
.code .gp { color: rgba(75, 83, 188, 255); font-weight: bold; }
.code .gs { font-weight: bold; }
.code .gu { color: rgba(158, 42, 155, 255); font-weight: bold; }
.code .gt { color: rgba(24, 78, 229, 255); }
.code .gl { text-decoration: underline; }
@media (prefers-color-scheme: dark) {
  .code .bg { background-color: rgba(37, 43, 44, 255); }
  .code .k { color: rgba(227, 181, 255, 255); font-weight: bold; }
  .code .kc { color: rgba(227, 181, 255, 255); font-weight: bold; }
  .code .kd { color: rgba(227, 181, 255, 255); font-weight: bold; }
  .code .kn { color: rgba(227, 181, 255, 255); font-weight: bold; }
  .code .kp { color: rgba(227, 181, 255, 255); }
  .code .kr { color: rgba(227, 181, 255, 255); font-weight: bold; }
  .code .kt { color: rgba(72, 227, 56, 255); font-weight: bold; }
  .code .nb { color: rgba(227, 181, 255, 255); }
  .code .nt { color: rgba(190, 194, 255, 255); }
  .code .nc { color: rgba(190, 194, 255, 255); }
  .code .ns { color: rgba(190, 194, 255, 255); }
  .code .nfl { color: rgba(190, 194, 255, 255); }
  .code .nti { color: rgba(190, 194, 255, 255); }
  .code .no { color: rgba(255, 180, 168, 255); }
  .code .nen { color: rgba(190, 194, 255, 255); }
  .code .nem { color: rgba(190, 194, 255, 255); }
  .code .nr { color: rgba(190, 194, 255, 255); }
  .code .nm { color: rgba(190, 194, 255, 255); }
  .code .nj { color: rgba(190, 194, 255, 255); }
  .code .ntp { color: rgba(190, 194, 255, 255); }
  .code .nf { color: rgba(93, 225, 74, 255); }
  .code .nd { color: rgba(227, 181, 255, 255); }
  .code .fm { color: rgba(93, 225, 74, 255); }
  .code .mt { color: rgba(93, 225, 74, 255); }
  .code .np { color: rgba(93, 225, 74, 255); }
  .code .cr { color: rgba(93, 225, 74, 255); }
  .code .ne { color: rgba(255, 180, 171, 255); font-weight: bold; }
  .code .nl { color: rgba(205, 205, 59, 255); }
  .code .ev { color: rgba(93, 225, 74, 255); }
  .code .nsc { color: rgba(190, 194, 255, 255); font-weight: bold; }
  .code .nn { color: rgba(190, 194, 255, 255); font-weight: bold; }
  .code .md { color: rgba(190, 194, 255, 255); font-weight: bold; }
  .code .pk { color: rgba(190, 194, 255, 255); font-weight: bold; }
  .code .lb { color: rgba(190, 194, 255, 255); font-weight: bold; }
  .code .nv { color: rgba(247, 189, 72, 255); }
  .code .ay { color: rgba(247, 189, 72, 255); }
  .code .vc { color: rgba(247, 189, 72, 255); }
  .code .vg { color: rgba(247, 189, 72, 255); }
  .code .vi { color: rgba(247, 189, 72, 255); }
  .code .vm { color: rgba(247, 189, 72, 255); }
  .code .vp { color: rgba(247, 189, 72, 255); }
  .code .ng { color: rgba(133, 219, 113, 255); }
  .code .na { color: rgba(255, 179, 175, 255); }
  .code .ni { color: rgba(88, 215, 233, 255); font-weight: bold; }
  .code .s { color: rgba(255, 179, 175, 255); }
  .code .sa { color: rgba(255, 179, 175, 255); }
  .code .st { color: rgba(255, 179, 175, 255); }
  .code .sb { color: rgba(255, 179, 175, 255); }
  .code .so { color: rgba(255, 179, 175, 255); }
  .code .sc { color: rgba(255, 179, 175, 255); }
  .code .dl { color: rgba(255, 179, 175, 255); }
  .code .sd { color: rgba(255, 179, 175, 255); font-style: italic; }
  .code .s2 { color: rgba(255, 179, 175, 255); }
  .code .se { color: rgba(255, 183, 134, 255); font-weight: bold; }
  .code .sh { color: rgba(255, 179, 175, 255); }
  .code .si { color: rgba(255, 176, 204, 255); font-weight: bold; }
  .code .sn { color: rgba(255, 179, 175, 255); }
  .code .sx { color: rgba(114, 222, 94, 255); }
  .code .sr { color: rgba(255, 176, 204, 255); }
  .code .s1 { color: rgba(255, 179, 175, 255); }
  .code .ss { color: rgba(247, 189, 72, 255); }
  .code .fl { color: rgba(255, 179, 175, 255); }
  .code .m { color: rgba(128, 211, 224, 255); }
  .code .mb { color: rgba(128, 211, 224, 255); }
  .code .mf { color: rgba(128, 211, 224, 255); }
  .code .mh { color: rgba(128, 211, 224, 255); }
  .code .mi { color: rgba(128, 211, 224, 255); }
  .code .il { color: rgba(128, 211, 224, 255); }
  .code .mo { color: rgba(128, 211, 224, 255); }
  .code .mj { color: rgba(128, 211, 224, 255); }
  .code .o { color: rgba(128, 211, 224, 255); }
  .code .ow { color: rgba(227, 181, 255, 255); font-weight: bold; }
  .code .om { color: rgba(128, 211, 224, 255); }
  .code .ob { color: rgba(128, 211, 224, 255); }
  .code .oa { color: rgba(128, 211, 224, 255); }
  .code .pa { color: rgba(128, 211, 224, 255); }
  .code .ba { color: rgba(128, 211, 224, 255); }
  .code .ol { color: rgba(128, 211, 224, 255); }
  .code .or { color: rgba(128, 211, 224, 255); }
  .code .oi { color: rgba(128, 211, 224, 255); }
  .code .c { color: rgba(136, 208, 239, 255); font-style: italic; }
  .code .ch { color: rgba(136, 208, 239, 255); font-style: italic; }
  .code .cm { color: rgba(136, 208, 239, 255); font-style: italic; }
  .code .c1 { color: rgba(136, 208, 239, 255); font-style: italic; }
  .code .cs { color: rgba(109, 223, 89, 255); font-weight: bold; }
  .code .cp { color: rgba(109, 223, 89, 255); }
  .code .cpf { color: rgba(109, 223, 89, 255); }
  .code .w { color: rgba(79, 216, 235, 255); }
  .code .gd { color: rgba(255, 180, 168, 255); }
  .code .ge { font-style: italic; }
  .code .gr { color: rgba(255, 180, 168, 255); }
  .code .gh { color: rgba(191, 194, 255, 255); font-weight: bold; }
  .code .gi { color: rgba(93, 225, 74, 255); }
  .code .go { color: rgba(103, 214, 231, 255); }
  .code .gp { color: rgba(191, 194, 255, 255); font-weight: bold; }
  .code .gs { font-weight: bold; }
  .code .gu { color: rgba(255, 171, 243, 255); font-weight: bold; }
  .code .gt { color: rgba(183, 196, 255, 255); }
  .code .gl { text-decoration: underline; }
}