/*
 * Leka documentation theme.
 *
 * Maps doxygen-awesome's variables onto the same obsidian + emerald/teal
 * token system the replay viewer uses, so the API reference, the ADRs, and
 * the viewer read as one publication rather than three.
 *
 * Everything here is a variable override plus a small number of typographic
 * corrections. Nothing re-implements doxygen-awesome's layout.
 */

html,
html.dark-mode {
  /* accent */
  --primary-color: #2fbf8f;
  --primary-dark-color: #23a67a;
  --primary-light-color: #4fd6a8;
  --primary-lighter-color: #1f5c48;
  --primary-lightest-color: #17322a;
  --on-primary-color: #06120d;
  --link-color: #2fbf8f;

  /* surfaces */
  --page-background-color: #0c0d0e;
  --page-foreground-color: #f3f1ec;
  --page-secondary-foreground-color: #9b9ea1;
  --separator-color: rgba(243, 241, 236, 0.08);
  --side-nav-background: #0c0d0e;
  --side-nav-foreground: #9b9ea1;
  --header-background: #0c0d0e;
  --header-foreground: #f3f1ec;
  --odd-color: rgba(243, 241, 236, 0.022);
  --code-background: #17191b;
  --code-foreground: #c4c6c8;
  --fragment-background: #141618;
  --fragment-foreground: #c4c6c8;
  --tablehead-background: #17191b;
  --tablehead-foreground: #c4c6c8;
  --blockquote-background: #141618;
  --blockquote-foreground: #9b9ea1;
  --searchbar-background: #17191b;
  --searchbar-foreground: #f3f1ec;
  --searchbar-border-color: rgba(243, 241, 236, 0.09);

  /* type */
  --font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-monospace: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --page-font-size: 15.5px;
  --navigation-font-size: 13.5px;
  --toc-font-size: 13px;
  --code-font-size: 13px;
  --content-line-height: 1.72;
  --content-maxwidth: 1020px;

  /* shape: flatter and quieter than the stock theme */
  --border-radius-large: 10px;
  --border-radius-medium: 8px;
  --border-radius-small: 5px;
  --box-shadow: none;
  --spacing-large: 18px;
  --spacing-xlarge: 34px;

  /* admonitions, kept within the palette */
  --note-color: #2fbf8f;
  --note-color-dark: #23a67a;
  --note-color-darker: #d8f3e8;
  --warning-color: hsl(350, 62%, 60%);
  --warning-color-dark: hsl(350, 52%, 44%);
  --warning-color-darker: hsl(350, 40%, 90%);
}

html.dark-mode { color-scheme: dark; }

/* Light mode flips the token values; the accent deepens rather than changing
   hue, matching the viewer's behaviour. */
html.light-mode,
html.light-mode body {
  --primary-color: #046c4e;
  --primary-dark-color: #035939;
  --primary-light-color: #0f8c66;
  --primary-lighter-color: #cfe8dd;
  --primary-lightest-color: #eaf5f0;
  --on-primary-color: #ffffff;
  --link-color: #046c4e;

  --page-background-color: #faf9f6;
  --page-foreground-color: #15181b;
  --page-secondary-foreground-color: #6b6e72;
  --separator-color: rgba(20, 20, 20, 0.1);
  --side-nav-background: #faf9f6;
  --side-nav-foreground: #33373b;
  --header-background: #faf9f6;
  --header-foreground: #15181b;
  --odd-color: rgba(20, 20, 20, 0.025);
  --code-background: #f0eee9;
  --code-foreground: #33373b;
  --fragment-background: #f5f3ef;
  --fragment-foreground: #33373b;
  --tablehead-background: #f0eee9;
  --tablehead-foreground: #33373b;
  --blockquote-background: #f5f3ef;
  --blockquote-foreground: #33373b;
  --searchbar-background: #f0eee9;
  --searchbar-foreground: #15181b;
}

/* ---------- typography ---------- */

html body { font-family: var(--font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html h1, html h2, html h3, html h4, html .title,
div.header .title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.012em;
}
html h1, div.header .title { font-size: 1.9rem; line-height: 1.25; }
html h2 { font-size: 1.42rem; line-height: 1.3; margin-top: 2.4em; }
html h3 { font-size: 1.12rem; margin-top: 1.9em; }

/* Doxygen renders markdown headings with a trailing anchor-permalink; keep it
   from adding stray underline artifacts to serif headings. */
h1 a, h2 a, h3 a { border-bottom: 0 !important; }

/*
 * Markdown code spans inside headings become bare <tt>, which inherits no
 * styling from the theme and rendered as unreadable raw monospace. The ADR
 * headings were rewritten as prose, but <tt> still appears in body text from
 * Doxygen's own output, so it is styled to match inline <code>.
 */
html tt, html code, html .tt, html span.tt {
  font-family: var(--font-family-monospace);
  font-size: 0.88em;
  background: var(--code-background);
  color: var(--code-foreground);
  padding: 0.12em 0.4em;
  border-radius: 4px;
  border: 1px solid var(--separator-color);
}
h1 tt, h2 tt, h3 tt, h1 code, h2 code, h3 code {
  font-size: 0.82em;
  font-weight: 400;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--primary-light-color);
}
a tt, a code { border: 0; background: transparent; padding: 0; color: inherit; }

/* Fenced blocks: quieter frame, more air, no drop shadow. */
div.fragment, pre.fragment {
  border: 1px solid var(--separator-color);
  border-radius: var(--border-radius-medium);
  padding: 14px 16px;
  background: var(--fragment-background);
  line-height: 1.62;
}

/* Tables: hairline rules only, no heavy borders. */
table.markdownTable, table.doxtable {
  border-collapse: collapse;
  border: 0;
  font-size: 0.94em;
}
table.markdownTable th, table.doxtable th {
  background: transparent;
  color: var(--page-secondary-foreground-color);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.76em;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  border: 0;
  border-bottom: 1px solid var(--separator-color);
  padding: 8px 14px 8px 0;
  text-align: left;
}
table.markdownTable td, table.doxtable td {
  border: 0;
  border-bottom: 1px solid var(--separator-color);
  padding: 9px 14px 9px 0;
  vertical-align: top;
}
table.markdownTable tr:hover td, table.doxtable tr:hover td { background: var(--odd-color); }

/* Horizontal rules between ADRs: a hairline, not a groove. */
html hr { border: 0; border-top: 1px solid var(--separator-color); margin: 3.2em 0; }

/* Blockquotes: a single accent rule rather than a filled box. */
html blockquote {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--primary-color);
  margin: 1.4em 0;
  padding: 0.15em 0 0.15em 18px;
  color: var(--page-secondary-foreground-color);
}
blockquote p { margin: 0.35em 0; }

/* Sidebar and header: flat, no shadow, hairline separator only. */
#side-nav, #nav-tree, #nav-tree .selected { background: var(--side-nav-background); }
#nav-tree .item > a { font-size: var(--navigation-font-size); }
#top { border-bottom: 1px solid var(--separator-color); box-shadow: none; }
#titlearea { border: 0; }
#projectname { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }
#projectbrief { color: var(--page-secondary-foreground-color); font-weight: 300; }

/* Links: underline on hover only, so prose stays calm. */
html a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s ease; }
html a:hover { border-bottom-color: var(--primary-color); }
.contents a.el { font-weight: 500; }

/* Lists: a little more air between items in long ADR prose. */
.contents ul li, .contents ol li { margin: 0.3em 0; }

/* Member documentation: drop the boxed look. */
.memtitle { background: transparent; border: 0; border-bottom: 1px solid var(--separator-color); border-radius: 0; box-shadow: none; }
.memitem { box-shadow: none; }
.memproto { background: var(--code-background); border: 1px solid var(--separator-color); border-radius: var(--border-radius-medium); }
.memdoc { border: 0; box-shadow: none; }

/* Standing link back to the replay viewer, injected in header.html. */
#leka-viz-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 14px; padding: 6px 13px;
  border-radius: var(--border-radius-medium);
  background: var(--primary-color); color: var(--on-primary-color) !important;
  font-family: var(--font-family); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.015em; border-bottom: 0 !important;
  white-space: nowrap;
}
#leka-viz-link:hover { background: var(--primary-dark-color); border-bottom: 0 !important; }

/* ---------- sidebar and title block ---------- */

/*
 * The stock title block sits in a bordered box that reads as a stray card
 * against a flat sidebar. Flatten it and let the hairline under the whole
 * sidebar header do the separating instead.
 */
#titlearea {
  border: 0 !important;
  background: transparent;
  padding: 22px 20px 4px;
}
#titlearea table, #titlearea tbody, #titlearea tr, #titlearea td { border: 0 !important; }
#projectname {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 25px !important;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
#projectbrief {
  font-family: var(--font-family) !important;
  font-size: 12.8px !important;
  font-weight: 300;
  line-height: 1.5;
  color: var(--page-secondary-foreground-color);
  padding-top: 5px;
  max-width: 30ch;
}

#leka-viz-wrap { padding: 14px 20px 18px; border-bottom: 1px solid var(--separator-color); }
#leka-viz-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: var(--border-radius-medium);
  background: var(--primary-color); color: var(--on-primary-color) !important;
  font-family: var(--font-family); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.015em; border-bottom: 0 !important;
  white-space: nowrap; transition: background .18s ease;
}
#leka-viz-link:hover { background: var(--primary-dark-color); border-bottom: 0 !important; }

/* Sidebar: flat, hairline on the right edge only. */
#side-nav {
  background: var(--side-nav-background) !important;
  border-right: 1px solid var(--separator-color);
}
#nav-tree { background: transparent !important; padding-top: 10px; }
#nav-tree .item > a, #nav-tree a {
  font-family: var(--font-family);
  font-size: var(--navigation-font-size);
  color: var(--side-nav-foreground);
}
#nav-tree .selected, #nav-tree a:hover { color: var(--primary-color) !important; }
#nav-tree .selected { background: transparent !important; }
#nav-sync { display: none; }
.ui-resizable-e { background: transparent; border-right: 1px solid var(--separator-color); width: 1px; }

/* Content column: a little more breathing room beside the sidebar. */
div.contents, div.header { padding-left: 28px; padding-right: 28px; }
div.header { border-bottom: 1px solid var(--separator-color); padding-bottom: 14px; }

/* ---------- mermaid diagrams ---------- */

/*
 * Nothing previously constrained the rendered SVG's width, so a wide
 * flowchart rendered at its natural size and overflowed the content column
 * (visible as the diagram bleeding past the sidebar). Themed via
 * docs/theme/build-header.sh's own mermaid.initialize() call, which supplies
 * themeVariables matching this palette directly -- this block only handles
 * layout, not color.
 */
div.mermaidgraph {
  max-width: 100%;
  overflow-x: auto;
  margin: 22px 0;
  padding: 4px 0;
}
div.mermaidgraph svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* A diagram genuinely wider than the column scrolls horizontally in its own
   box rather than the whole page ever scrolling sideways. */
div.mermaidgraph::-webkit-scrollbar { height: 6px; }
div.mermaidgraph::-webkit-scrollbar-thumb { background: var(--muted-graphite); border-radius: 3px; }