/* ==========================================================================
   MLambda Actors documentation theme

   Layered over the docsify "vue" theme, which supplies the structural
   layout. Everything visual below is ours: type, colour, rhythm, chrome.

   Design notes
   - Ink on warm paper, with a single restrained brass accent. Colour is
     used to mean something (a link, the page you are on), never to
     decorate.
   - Fraunces for display, Inter for prose, JetBrains Mono for code. The
     serif/sans pairing is what gives the pages their editorial weight.
   - A dark mode that is warm charcoal rather than pure black, so long
     reading sessions stay comfortable. It follows the reader's system
     setting; nothing to toggle.
   ========================================================================== */

:root {
  /* Surfaces */
  --paper:        #FCFBF8;
  --paper-raised: #FFFFFF;
  --paper-sunken: #F4F2ED;

  /* Ink */
  --ink:        #14161A;
  --ink-soft:   #3D424B;
  --ink-muted:  #6E747E;
  --ink-faint:  #9AA0A9;

  /* Accent: brass. Used for links, the current page, and little else. */
  --brass:        #8A6A33;
  --brass-bright: #A8823F;
  --brass-wash:   rgba(138, 106, 51, 0.08);

  /* Structure */
  --rule:       #E7E3DA;
  --rule-soft:  #F0EDE6;

  /* Semantic callouts */
  --note:    #2F6F62;
  --warn:    #9A6B18;
  --danger:  #A03A32;

  /* Type */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, 'Cascadia Code', Consolas, monospace;

  /* Rhythm */
  --measure: 46rem;
  --sidebar: 17.5rem;

  /* Docsify variables the base theme reads */
  --theme-color: var(--brass);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #101115;
    --paper-raised: #16181D;
    --paper-sunken: #0B0C0F;

    --ink:        #ECEAE4;
    --ink-soft:   #C2C5CC;
    --ink-muted:  #8D939D;
    --ink-faint:  #666C76;

    --brass:        #C9A05A;
    --brass-bright: #DDB86E;
    --brass-wash:   rgba(201, 160, 90, 0.12);

    --rule:       #262930;
    --rule-soft:  #1D2026;

    --note:    #63B3A0;
    --warn:    #D8A94E;
    --danger:  #E0736A;

    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--brass-wash);
  color: var(--ink);
}

/*
   Docsify wraps every heading's text in `a.anchor > span` and colours that span
   with its own slate blue. Left alone it overrides the heading colour on both the
   cover and the content pages, so the text has to inherit instead.
*/
.anchor span {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.sidebar {
  width: var(--sidebar);
  padding-top: 0;
  background: var(--paper-sunken);
  border-right: 1px solid var(--rule);

  /* The search plugin injects itself at the top of the sidebar. Order the
     children explicitly so the brand comes first and search sits under it. */
  display: flex;
  flex-direction: column;
}

.sidebar > h1        { order: 1; }
.sidebar .search     { order: 2; }
.sidebar .sidebar-nav { order: 3; }

.sidebar > h1 {
  margin: 0;
  padding: 1.9rem 1.75rem 1.4rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-align: left;
}

.sidebar > h1 a {
  color: var(--ink);
  text-decoration: none;
}

.sidebar > h1 .app-name-link img {
  max-width: 150px;
}

.sidebar .search {
  margin: 0;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.sidebar .search input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.855rem;
  line-height: 1.4;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sidebar .search input::placeholder {
  color: var(--ink-faint);
}

.sidebar .search input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-wash);
}

.sidebar .search .clear-button {
  display: none;
}

.sidebar .search .results-panel {
  font-size: 0.86rem;
}

.sidebar .search p {
  color: var(--ink-muted);
}

.sidebar-nav {
  padding: 1.35rem 1.1rem 4rem;
  line-height: 1.55;
}

/* Section headings inside the sidebar: the bare list items with no link. */
.sidebar-nav > ul > li > p,
.sidebar-nav > ul > li > strong {
  margin: 1.6rem 0 0.5rem;
  padding: 0 0.65rem;
  color: var(--ink-faint);
  font-size: 0.685rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sidebar-nav > ul > li:first-child > p {
  margin-top: 0.2rem;
}

.sidebar-nav ul,
.sidebar-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-nav li > a,
.sidebar-nav li > p > a {
  display: block;
  margin: 1px 0;
  padding: 0.34rem 0.65rem;
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: 0.895rem;
  font-weight: 400;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-nav li > a:hover {
  background: var(--brass-wash);
  color: var(--ink);
  text-decoration: none;
}

.sidebar-nav li.active > a,
.sidebar-nav li > a.active {
  background: var(--brass-wash);
  color: var(--brass);
  font-weight: 500;
}

/* The heading anchors docsify injects for the current page. */
.sidebar-nav .app-sub-sidebar {
  margin: 0.15rem 0 0.4rem;
  padding-left: 0.65rem;
  border-left: 1px solid var(--rule);
}

.sidebar-nav .app-sub-sidebar li > a {
  padding: 0.2rem 0.6rem;
  color: var(--ink-muted);
  font-size: 0.82rem;
}

/* Docsify prefixes every sub-heading with a literal "-". The indent rule and
   the left border already say these are nested. */
.app-sub-sidebar li::before {
  content: '';
  padding-right: 0;
}

.sidebar-toggle {
  width: auto;
  padding: 0.9rem 1rem;
  background: transparent;
}

.sidebar-toggle-button:hover {
  opacity: 1;
}

.sidebar-toggle span {
  background: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Top navigation
   -------------------------------------------------------------------------- */

.app-nav {
  margin: 0;
  padding: 1.35rem 2.5rem;
}

.app-nav li ul {
  min-width: 11rem;
  padding: 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-raised);
  box-shadow: 0 14px 34px rgba(16, 17, 21, 0.11);
}

.app-nav a {
  margin: 0 0.05rem;
  padding: 0.3rem 0.62rem;
  border-radius: 6px;
  color: var(--ink-muted);
  font-size: 0.875rem;
  font-weight: 450;
  transition: color 0.15s ease, background 0.15s ease;
}

.app-nav a:hover,
.app-nav a.active {
  color: var(--ink);
  background: var(--brass-wash);
  text-decoration: none;
  border-bottom: none;
}

.app-nav a.active {
  color: var(--brass);
}

/* GitHub corner ribbon: keep it, tone it down so it stops shouting. */
.github-corner svg {
  color: var(--paper);
  fill: var(--ink-faint);
  width: 60px;
  height: 60px;
  transition: fill 0.2s ease;
}

.github-corner:hover svg {
  fill: var(--brass);
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}

/* --------------------------------------------------------------------------
   Cover page
   -------------------------------------------------------------------------- */

section.cover {
  min-height: 100vh;
  padding: 0;
  background: var(--paper) !important;
  align-items: center;
}

section.cover .cover-main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.75rem;
  text-align: left;
}

section.cover .cover-main > p:first-child img {
  width: 92px;
  height: auto;
  margin: 0 0 1.9rem;
}

section.cover h1 {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 6.2vw, 4.15rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--ink);
}

section.cover h1 a {
  color: inherit;
  text-decoration: none;
  display: inline;
}

section.cover h1 small {
  display: none;
}

section.cover .version-badge {
  display: inline-block;
  margin: 0 0 1.5rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

section.cover blockquote {
  margin: 0 0 1.1rem;
  padding: 0;
  border: none;
  background: none;
}

section.cover blockquote p {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2.1vw, 1.42rem);
  font-weight: 300;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: -0.008em;
}

section.cover .cover-main > p:not(:first-child):not(.version-badge) {
  max-width: 34rem;
  color: var(--ink-muted);
  font-size: 1.015rem;
  line-height: 1.68;
}

/* Cover call-to-action buttons. */
section.cover .cover-main > p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2.2rem;
}

section.cover .cover-main > p:last-child a {
  margin: 0;
  padding: 0.62rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

section.cover .cover-main > p:last-child a:hover {
  border-color: var(--brass);
  color: var(--brass);
  background: var(--brass-wash);
  transform: translateY(-1px);
}

/*
   Docsify fills the last cover button with the theme colour, which puts the
   emphasis on whichever link happens to be last. Reset it, then promote the
   first button, so the primary action is the one we chose.
*/
section.cover .cover-main > p:last-child a:last-child {
  border-color: var(--rule);
  background: transparent;
  color: var(--ink-soft);
}

section.cover .cover-main > p:last-child a:last-child:hover {
  border-color: var(--brass);
  background: var(--brass-wash);
  color: var(--brass);
  opacity: 1;
}

section.cover .cover-main > p:last-child a:first-child,
section.cover .cover-main > p:last-child a:first-child:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

section.cover .cover-main > p:last-child a:first-child:hover {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

.content {
  padding-top: 0;
}

.markdown-section {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3.4rem 2.25rem 6rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

.markdown-section > *:first-child {
  margin-top: 0;
}

/* Headings ---------------------------------------------------------------- */

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.22;
}

.markdown-section h1 {
  margin: 0 0 1.5rem;
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.markdown-section h2 {
  margin: 3.4rem 0 1.05rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--rule);
  font-size: 1.62rem;
}

.markdown-section h3 {
  margin: 2.35rem 0 0.75rem;
  font-size: 1.235rem;
}

.markdown-section h4 {
  margin: 1.9rem 0 0.6rem;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.006em;
}

.markdown-section h5,
.markdown-section h6 {
  margin: 1.6rem 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
}

/* The anchor docsify puts before each heading. */
.markdown-section h1 a,
.markdown-section h2 a,
.markdown-section h3 a,
.markdown-section h4 a,
.markdown-section h5 a,
.markdown-section h6 a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
  font-weight: inherit;
}

.markdown-section .anchor span {
  color: inherit;
}

/* A heading is not a link to look at, only one to copy. Keep it undecorated. */
.markdown-section .anchor,
.markdown-section .anchor:hover,
section.cover .anchor,
section.cover .anchor:hover {
  text-decoration: none;
}

.markdown-section h2:hover .anchor::before,
.markdown-section h3:hover .anchor::before {
  content: '#';
  position: absolute;
  margin-left: -1.15em;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-weight: 400;
}

/* Prose ------------------------------------------------------------------- */

.markdown-section p {
  margin: 0 0 1.15rem;
  line-height: 1.72;
}

.markdown-section a {
  color: var(--brass);
  font-weight: 450;
  text-decoration: none;
  border-bottom: 1px solid var(--brass-wash);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.markdown-section a:hover {
  color: var(--brass-bright);
  border-bottom-color: currentColor;
  text-decoration: none;
}

.markdown-section strong {
  color: var(--ink);
  font-weight: 600;
}

.markdown-section ul,
.markdown-section ol {
  margin: 0 0 1.3rem;
  padding-left: 1.3rem;
}

.markdown-section li {
  margin: 0.34rem 0;
  padding-left: 0.2rem;
  line-height: 1.68;
}

.markdown-section li::marker {
  color: var(--ink-faint);
}

.markdown-section hr {
  height: 1px;
  margin: 3rem 0;
  border: none;
  background: var(--rule);
}

.markdown-section img {
  max-width: 100%;
  border-radius: 10px;
}

/* Blockquotes and callouts ------------------------------------------------ */

.markdown-section blockquote {
  margin: 1.75rem 0;
  padding: 1.05rem 1.3rem;
  border: none;
  border-left: 2px solid var(--brass);
  border-radius: 0 8px 8px 0;
  background: var(--paper-sunken);
  color: var(--ink-soft);
}

.markdown-section blockquote p {
  margin: 0;
  font-size: 0.955rem;
  font-style: normal;
}

.markdown-section blockquote p + p {
  margin-top: 0.7rem;
}

/* Tip / warning / danger, driven by the first strong word in a quote. */
.markdown-section blockquote.tip    { border-left-color: var(--note); }
.markdown-section blockquote.warn   { border-left-color: var(--warn); }
.markdown-section blockquote.danger { border-left-color: var(--danger); }

/* Code -------------------------------------------------------------------- */

.markdown-section code,
.markdown-section pre,
.markdown-section output {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

.markdown-section p > code,
.markdown-section li > code,
.markdown-section td > code,
.markdown-section h1 code,
.markdown-section h2 code,
.markdown-section h3 code,
.markdown-section h4 code,
.markdown-section a > code {
  padding: 0.13em 0.38em;
  border: 1px solid var(--rule-soft);
  border-radius: 5px;
  background: var(--paper-sunken);
  color: var(--ink);
  font-size: 0.855em;
  white-space: nowrap;
}

.markdown-section pre {
  margin: 1.6rem 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: var(--paper-sunken);
  overflow: hidden;
}

.markdown-section pre::after {
  content: attr(data-lang);
  position: absolute;
  top: 0.62rem;
  right: 0.85rem;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  opacity: 0.85;
}

.markdown-section pre > code {
  display: block;
  padding: 1.3rem 1.35rem;
  background: transparent;
  color: var(--ink);
  font-size: 0.855rem;
  line-height: 1.62;
  white-space: pre;
  overflow-x: auto;
}

.docsify-copy-code__button {
  top: 0.42rem !important;
  right: 3.9rem !important;
  padding: 0.24rem 0.6rem !important;
  border: 1px solid var(--rule) !important;
  border-radius: 6px !important;
  background: var(--paper-raised) !important;
  color: var(--ink-muted) !important;
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  opacity: 0;
  transition: opacity 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
}

.markdown-section pre:hover .docsify-copy-code__button {
  opacity: 1;
}

.docsify-copy-code__button:hover {
  border-color: var(--brass) !important;
  color: var(--brass) !important;
}

/* Syntax highlighting ----------------------------------------------------- */

.token.comment,
.token.prolog,
.token.cdata {
  color: var(--ink-faint);
  font-style: italic;
}

.token.punctuation { color: var(--ink-muted); }

.token.keyword,
.token.boolean,
.token.atrule,
.token.important {
  color: var(--brass);
  font-weight: 500;
}

.token.string,
.token.char,
.token.attr-value {
  color: var(--note);
}

.token.number,
.token.constant,
.token.symbol { color: var(--danger); }

.token.function,
.token.class-name {
  color: var(--ink);
  font-weight: 500;
}

.token.operator,
.token.entity,
.token.url {
  color: var(--ink-soft);
  background: none;
}

.token.property,
.token.tag,
.token.attr-name { color: var(--warn); }

/* Tables ------------------------------------------------------------------ */

.markdown-section table {
  display: table;
  width: 100%;
  margin: 1.75rem 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 0.925rem;
}

.markdown-section tr {
  border: none;
  background: transparent;
}

.markdown-section th {
  padding: 0.72rem 1rem;
  border: none;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-sunken);
  color: var(--ink);
  font-size: 0.755rem;
  font-weight: 600;
  letter-spacing: 0.075em;
  text-align: left;
  text-transform: uppercase;
}

.markdown-section td {
  padding: 0.72rem 1rem;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}

.markdown-section tbody tr:last-child td {
  border-bottom: none;
}

.markdown-section tbody tr:nth-child(2n) {
  background: transparent;
}

.markdown-section tbody tr:hover {
  background: var(--brass-wash);
}

/* Pagination -------------------------------------------------------------- */

.docsify-pagination-container {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.2rem 2.25rem 4rem;
  border-top: 1px solid var(--rule);
}

.pagination-item-label {
  color: var(--ink-faint);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pagination-item-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 500;
}

.pagination-item a:hover .pagination-item-title {
  color: var(--brass);
}

.pagination-item-label svg {
  stroke: var(--ink-faint);
  height: 0.8rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
  .markdown-section {
    padding: 2.2rem 1.25rem 4rem;
  }

  .markdown-section h1 { font-size: 2rem; }
  .markdown-section h2 { font-size: 1.36rem; margin-top: 2.5rem; padding-top: 1.5rem; }

  section.cover .cover-main {
    padding: 0 1.25rem;
    text-align: left;
  }

  section.cover .cover-main > p:last-child a {
    flex: 1 1 auto;
    text-align: center;
  }

  .app-nav {
    padding: 1rem 1.25rem;
  }

  .github-corner svg {
    width: 52px;
    height: 52px;
  }

  .docsify-pagination-container {
    padding: 1.6rem 1.25rem 3rem;
  }
}

@media print {
  .sidebar, .app-nav, .github-corner, .docsify-pagination-container { display: none; }
  .content { left: 0; }
  .markdown-section { max-width: none; }
}