/* ============================================================
   NOCTULA / LUCULA — Obsidian Publish Theme
   Dark mode: Noctula (black + inky blue + coral/teal)
   Light mode: Lucula (paper white + mint + emerald/blue)

   Fonts served via Fontsource on jsDelivr CDN.    
   
   ============================================================ */

/* — Atkinson Hyperlegible Next (variable, all weights + italic) — */
@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/atkinson-hyperlegible-next/index.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/atkinson-hyperlegible-next/index-italic.css');

/* — Atkinson Hyperlegible Mono (variable, all weights + italic) — */
@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/atkinson-hyperlegible-mono/index.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/atkinson-hyperlegible-mono/index-italic.css');

body {
  --font-text-theme: "Atkinson Hyperlegible Next Variable", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-text: "Atkinson Hyperlegible Next Variable", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-interface-theme: "Atkinson Hyperlegible Next Variable", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-interface: "Atkinson Hyperlegible Next Variable", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-monospace-theme: "Atkinson Hyperlegible Mono Variable", "Atkinson Hyperlegible Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  --font-monospace: "Atkinson Hyperlegible Mono Variable", "Atkinson Hyperlegible Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

.published-container {
  --page-title-font: "Atkinson Hyperlegible Next Variable", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   DARK PALETTE — Noctula (root default)
   ============================================================ */
:root {
  /* Backgrounds */
  --background-primary:        #000000;
  --background-primary-alt:    #09131f;
  --background-secondary:      #0d1624;
  --background-secondary-alt:  #132033;

  /* Borders */
  --background-modifier-border:        #1b2b40;
  --background-modifier-border-hover:  #35506d;
  --background-modifier-active-hover:  rgba(69, 199, 208, 0.14);

  /* Text */
  --text-normal:       #dce7f3;
  --text-muted:        #7f96b3;
  --text-faint:        #537091;
  --text-on-accent:    #081018;

  /* Accent — coral */
  --text-accent:              #ff8b72;
  --text-accent-hover:        #ffb29d;
  --interactive-accent:       #ff7a5c;
  --interactive-accent-hover: #ff9d80;
  --interactive-accent-rgb:   255, 122, 92;
  --color-accent:             #ff7a5c;

  /* Interactive surfaces */
  --interactive-normal:  #132033;
  --interactive-hover:   #1b2b40;

  /* Links */
  --link-color:          #ff8b72;
  --link-color-hover:    #ffb29d;
  --link-external-color: #ff8b72;
  --link-unresolved-color: rgba(255, 139, 114, 0.5);

  /* Tags */
  --tag-color:        #72e0c4;
  --tag-background:   #09131f;
  --tag-border-color: #1b2b40;
  --tag-border-width: 1px;
  --tag-padding-x:    0.55em;
  --tag-padding-y:    0.15em;
  --tag-radius:       4px;

  /* Headings */
  --h1-color: #ff8b72;
  --h2-color: #45c7d0;
  --h3-color: #72e0c4;
  --h4-color: #7ab0ff;
  --h5-color: #ffa38b;
  --h6-color: #8fd6ff;

  /* Inline markup */
  --bold-color:   #45c7d0;
  --italic-color: #ff7a5c;

  /* Code */
  --code-background:  #09131f;
  --code-normal:      #dce7f3;
  --code-comment:     #6f88a6;
  --code-keyword:     #ff8b72;
  --code-definition:  #72e0c4;
  --code-number:      #7ab0ff;
  --code-function:    #45c7d0;
  --code-string:      #ffd066;
  --code-operator:    #ff8b72;
  --code-builtin:     #45c7d0;
  --inline-title-color: #ff8b72;

  /* Blockquote */
  --blockquote-border-thickness: 3px;
  --blockquote-border-color:     #45c7d0;
  --blockquote-color:            #a8bbd2;
  --blockquote-background-color: #09131f;

  /* Highlight */
  --text-highlight-bg:           rgba(69, 199, 208, 0.24);
  --text-selection:              rgba(69, 199, 208, 0.3);

  /* HR */
  --hr-color: #1b2b40;

  /* Callouts */
  --callout-default:  69, 199, 208;
  --callout-info:     122, 176, 255;
  --callout-tip:      114, 224, 196;
  --callout-success:  77, 213, 178;
  --callout-warning:  255, 208, 102;
  --callout-caution:  255, 157, 102;
  --callout-failure:  255, 122, 92;
  --callout-danger:   255, 122, 92;
  --callout-bug:      255, 136, 168;
  --callout-question: 139, 144, 255;
  --callout-quote:    69, 199, 208;

  /* Graph */
  --graph-color-fill:          #ff7a5c;
  --graph-color-fill-focused:  #45c7d0;
  --graph-color-fill-unresolved: rgba(255, 122, 92, 0.35);
  --graph-color-arrow:         #35506d;
  --graph-color-circle:        #1b2b40;
  --graph-color-line:          #24364c;
  --graph-color-text:          #7f96b3;
  --graph-color-unresolved:    #35506d;

  /* Scrollbar */
  --scrollbar-thumb-bg:        #24364c;
  --scrollbar-active-thumb-bg: #35506d;
  --scrollbar-bg:              transparent;

  /* Shadows */
  --shadow-s:
    0px 1px 2px rgba(0, 0, 0, 0.28),
    0px 3.4px 6.7px rgba(0, 0, 0, 0.40),
    0px 15px 30px rgba(0, 0, 0, 0.50);
}

/* ============================================================
   LIGHT PALETTE — Lucula
   Activated by Obsidian's body.theme-light or data-theme="light".
   ============================================================ */
body.theme-light:not([data-theme="dark"]),
body[data-theme="light"] {
  --background-primary:        #fdfefe;
  --background-primary-alt:    #eaf4ef;
  --background-secondary:      #f1f7f5;
  --background-secondary-alt:  #e6efed;

  --background-modifier-border:        #e4eaf0;
  --background-modifier-border-hover:  #c3ccd6;
  --background-modifier-active-hover:  rgba(5, 150, 105, 0.1);

  --text-normal:       #0f172a;
  --text-muted:        #6b7684;
  --text-faint:        #94a3b3;
  --text-on-accent:    #ffffff;

  --text-accent:              #2563eb;
  --text-accent-hover:        #1d4ed8;
  --interactive-accent:       #059669;
  --interactive-accent-hover: #047857;
  --interactive-accent-rgb:   5, 150, 105;
  --color-accent:             #059669;

  --interactive-normal:  #eaf4ef;
  --interactive-hover:   #e4eaf0;

  --link-color:          #2563eb;
  --link-color-hover:    #1d4ed8;
  --link-external-color: #2563eb;
  --link-unresolved-color: rgba(37, 99, 235, 0.45);

  --tag-color:        #047857;
  --tag-background:   #eaf4ef;
  --tag-border-color: #d0e8e0;

  --h1-color: #1d4ed8;
  --h2-color: #0e7490;
  --h3-color: #047857;
  --h4-color: #0369a1;
  --h5-color: #0d9488;
  --h6-color: #15803d;

  --bold-color:   #0e7490;
  --italic-color: #059669;

  --code-background:  #f1f5f9;
  --code-normal:      #0f172a;
  --code-comment:     #64748b;
  --code-keyword:     #0e7490;
  --code-definition:  #047857;
  --code-number:      #1d4ed8;
  --code-function:    #0891b2;
  --code-string:      #15803d;
  --code-operator:    #0e7490;
  --code-builtin:     #0891b2;
  --inline-title-color: #1d4ed8;

  --blockquote-border-color:     #14b8a6;
  --blockquote-color:            #2d3b4d;
  --blockquote-background-color: #eaf4ef;

  --text-highlight-bg:  #ccfbf1;
  --text-selection:     hsla(160, 84%, 75%, 0.45);

  --hr-color: #e4eaf0;

  --callout-default:  14, 116, 144;
  --callout-info:     3, 105, 161;
  --callout-tip:      4, 120, 87;
  --callout-success:  5, 150, 105;
  --callout-warning:  202, 138, 4;
  --callout-caution:  217, 119, 6;
  --callout-failure:  225, 73, 89;
  --callout-danger:   225, 73, 89;
  --callout-bug:      99, 102, 241;
  --callout-question: 20, 184, 166;
  --callout-quote:    14, 116, 144;

  --graph-color-fill:            #059669;
  --graph-color-fill-focused:    #0e7490;
  --graph-color-fill-unresolved: rgba(5, 150, 105, 0.3);
  --graph-color-arrow:           #c3ccd6;
  --graph-color-circle:          #e4eaf0;
  --graph-color-line:            #d6dde5;
  --graph-color-text:            #6b7684;
  --graph-color-unresolved:      #c3ccd6;

  --scrollbar-thumb-bg:        #d6dde5;
  --scrollbar-active-thumb-bg: #c3ccd6;

  --shadow-s:
    0px 1px 2px rgba(15, 23, 42, 0.05),
    0px 3.4px 6.7px rgba(15, 23, 42, 0.07),
    0px 15px 30px rgba(15, 23, 42, 0.09);
}

/* Explicit dark toggle — overrides OS light preference */
body[data-theme="dark"] {
  --background-primary:        #000000;
  --background-primary-alt:    #09131f;
  --background-secondary:      #0d1624;
  --background-secondary-alt:  #132033;
  --background-modifier-border:        #1b2b40;
  --background-modifier-border-hover:  #35506d;
  --background-modifier-active-hover:  rgba(69, 199, 208, 0.14);
  --text-normal:       #dce7f3;
  --text-muted:        #7f96b3;
  --text-faint:        #537091;
  --text-on-accent:    #081018;
  --text-accent:              #ff8b72;
  --text-accent-hover:        #ffb29d;
  --interactive-accent:       #ff7a5c;
  --interactive-accent-hover: #ff9d80;
  --interactive-accent-rgb:   255, 122, 92;
  --color-accent:             #ff7a5c;
  --interactive-normal:  #132033;
  --interactive-hover:   #1b2b40;
  --link-color:          #ff8b72;
  --link-color-hover:    #ffb29d;
  --link-external-color: #ff8b72;
  --link-unresolved-color: rgba(255, 139, 114, 0.5);
  --tag-color:        #72e0c4;
  --tag-background:   #09131f;
  --tag-border-color: #1b2b40;
  --h1-color: #ff8b72;
  --h2-color: #45c7d0;
  --h3-color: #72e0c4;
  --h4-color: #7ab0ff;
  --h5-color: #ffa38b;
  --h6-color: #8fd6ff;
  --bold-color:   #45c7d0;
  --italic-color: #ff7a5c;
  --code-background:  #09131f;
  --code-normal:      #dce7f3;
  --code-comment:     #6f88a6;
  --code-keyword:     #ff8b72;
  --code-definition:  #72e0c4;
  --code-number:      #7ab0ff;
  --code-function:    #45c7d0;
  --code-string:      #ffd066;
  --code-operator:    #ff8b72;
  --code-builtin:     #45c7d0;
  --inline-title-color: #ff8b72;
  --blockquote-border-color:     #45c7d0;
  --blockquote-color:            #a8bbd2;
  --blockquote-background-color: #09131f;
  --text-highlight-bg:  rgba(69, 199, 208, 0.24);
  --text-selection:     rgba(69, 199, 208, 0.3);
  --hr-color: #1b2b40;
  --graph-color-fill:          #ff7a5c;
  --graph-color-fill-focused:  #45c7d0;
  --graph-color-fill-unresolved: rgba(255, 122, 92, 0.35);
  --graph-color-arrow:         #35506d;
  --graph-color-circle:        #1b2b40;
  --graph-color-line:          #24364c;
  --graph-color-text:          #7f96b3;
  --graph-color-unresolved:    #35506d;
  --scrollbar-thumb-bg:        #24364c;
  --scrollbar-active-thumb-bg: #35506d;
  --shadow-s:
    0px 1px 2px rgba(0, 0, 0, 0.28),
    0px 3.4px 6.7px rgba(0, 0, 0, 0.40),
    0px 15px 30px rgba(0, 0, 0, 0.50);
}

/* ============================================================
   BASE + TYPOGRAPHY
   ============================================================ */

body {
  font-family:
    "Atkinson Hyperlegible Next Variable",
    "Atkinson Hyperlegible Next",
    "Atkinson Hyperlegible",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--background-primary);
  color: var(--text-normal);
  transition: background-color 0.2s ease, color 0.2s ease;
}

::selection {
  background-color: var(--text-selection);
}

/* Monospace font for code */
code, pre, kbd, samp,
.cm-editor, .cm-content {
  font-family:
    "Atkinson Hyperlegible Mono Variable",
    "Atkinson Hyperlegible Mono",
    "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

/* ============================================================
   SITE HEADER
   ============================================================ */

.site-header {
  background-color: var(--background-secondary);
  border-bottom: 1px solid var(--background-modifier-border);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-header-text {
  color: var(--text-normal);
  font-weight: 700;
  font-size: 1rem;
}

.site-header-text:hover {
  color: var(--interactive-accent);
}

/* Injected theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--background-primary-alt, var(--background-modifier-border));
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 0.28rem 0.65rem;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s, background-color 0.2s;
  white-space: nowrap;
  margin-left: 0.5rem;
}

.theme-toggle:hover {
  color: var(--interactive-accent);
  border-color: var(--interactive-accent);
}

.theme-toggle__icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* ============================================================
   LEFT NAV SIDEBAR
   ============================================================ */

.site-body-left-column {
  background-color: var(--background-secondary);
  border-right: 1px solid var(--background-modifier-border);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nav-view-outer {
  background-color: var(--background-secondary);
}

/* Folder + file items */
.tree-item-self {
  border-radius: 5px;
  color: var(--text-muted);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.tree-item-self:hover {
  background-color: var(--background-modifier-active-hover);
  color: var(--text-normal);
}

.tree-item-self.is-active {
  background-color: var(--background-modifier-active-hover);
  color: var(--interactive-accent);
}

.tree-item-inner {
  color: inherit;
  font-size: 0.88rem;
}

/* Folder collapse arrows */
.tree-item-self .collapse-icon svg {
  color: var(--text-faint);
}

.nav-folder-title {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nav-folder-title:hover {
  color: var(--interactive-accent);
}

.nav-file-title {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.nav-file-title:hover,
.nav-file-title.is-active {
  color: var(--interactive-accent);
}

/* Nav folder children indent line */
.tree-item-children {
  border-left: 1px solid var(--background-modifier-border);
  margin-left: 0.6rem;
}

/* ============================================================
   RIGHT SIDEBAR (Table of Contents, Backlinks)
   ============================================================ */

.site-body-right-column {
  background-color: var(--background-secondary);
  border-left: 1px solid var(--background-modifier-border);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Outline / ToC */
.outline-heading-item {
  color: var(--text-muted);
  font-size: 0.87rem;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  transition: color 0.12s, background-color 0.12s;
}

.outline-heading-item:hover {
  color: var(--interactive-accent);
  background-color: var(--background-modifier-active-hover);
}

.outline-heading-item.is-active {
  color: var(--interactive-accent);
}

/* Backlinks */
.backlinks {
  background-color: var(--background-secondary);
}

.backlink-pane .tree-item-self {
  font-size: 0.87rem;
}

.backlink-pane .tree-item-self:hover {
  color: var(--interactive-accent);
}

/* Right sidebar section headers */
.side-column-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--background-modifier-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ============================================================
   MAIN CONTENT COLUMN
   ============================================================ */

.site-body-center-column {
  background-color: var(--background-primary);
}

.page-header {
  border-bottom: 1px solid var(--background-modifier-border);
}

/* Inline title (shown above content in Publish) */
.inline-title {
  font-family:
    "Atkinson Hyperlegible Next Variable",
    "Atkinson Hyperlegible Next",
    "Atkinson Hyperlegible",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--inline-title-color);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
}

/* ============================================================
   MARKDOWN CONTENT
   ============================================================ */

.markdown-rendered {
  color: var(--text-normal);
  font-size: 1.05rem;
  line-height: 1.78;
}

/* Headings */
.markdown-rendered h1 { color: var(--h1-color); font-size: 1.85rem; line-height: 1.2; }
.markdown-rendered h2 { color: var(--h2-color); font-size: 1.5rem;  line-height: 1.25; }
.markdown-rendered h3 { color: var(--h3-color); font-size: 1.25rem; line-height: 1.3; }
.markdown-rendered h4 { color: var(--h4-color); font-size: 1.1rem; }
.markdown-rendered h5 { color: var(--h5-color); font-size: 1rem; }
.markdown-rendered h6 { color: var(--h6-color); font-size: 0.95rem; }

/* Links */
.markdown-rendered a {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.markdown-rendered a:hover {
  color: var(--link-color-hover);
}

.markdown-rendered a.internal-link {
  color: var(--link-color);
}

.markdown-rendered a.external-link {
  color: var(--link-external-color);
  font-style: italic;
}

/* Unresolved internal links */
.markdown-rendered a.is-unresolved {
  color: var(--link-unresolved-color);
  text-decoration-style: dashed;
}

/* Homepage buttons */
.markdown-rendered .home-button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin: 2rem 0;
  padding: 1.25rem;
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  background-color: var(--background-secondary);
}

.markdown-rendered a.home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-width: min(100%, 14rem);
  min-height: 4.8rem;
  padding: 0.9rem 1.7rem;
  border: 2px solid var(--interactive-accent);
  border-radius: 6px;
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.markdown-rendered a.home-button:hover,
.markdown-rendered a.home-button:focus-visible {
  background-color: var(--interactive-accent-hover);
  border-color: var(--interactive-accent-hover);
  color: var(--text-on-accent);
  text-decoration: none;
}

.markdown-rendered a.home-button-secondary {
  background-color: transparent;
  color: var(--link-color);
}

.markdown-rendered a.home-button-secondary:hover,
.markdown-rendered a.home-button-secondary:focus-visible {
  background-color: var(--background-modifier-active-hover);
  color: var(--link-color-hover);
}

/* Homepage secondary navigation */
.markdown-rendered .home-subnav-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin: 1rem 0 2rem;
}

.markdown-rendered a.home-subnav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--background-modifier-border);
  border-radius: 999px;
  background-color: var(--background-primary-alt);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.markdown-rendered a.home-subnav-link:hover,
.markdown-rendered a.home-subnav-link:focus-visible {
  border-color: var(--interactive-accent);
  background-color: var(--background-modifier-active-hover);
  color: var(--interactive-accent);
  text-decoration: none;
}

/* Bold + Italic */
.markdown-rendered strong {
  color: var(--bold-color);
  font-weight: 700;
}

.markdown-rendered em {
  color: var(--italic-color);
}

/* Highlight */
.markdown-rendered mark {
  background-color: var(--text-highlight-bg);
  color: var(--text-normal);
  padding: 1px 3px;
  border-radius: 2px;
}

/* HR */
.markdown-rendered hr {
  border: none;
  border-top: 1px solid var(--hr-color);
  margin: 2rem 0;
}

/* Images */
.markdown-rendered img {
  border-radius: 6px;
  max-width: 100%;
}

/* Lists */
.markdown-rendered ul { list-style-type: disc; }
.markdown-rendered ol { list-style-type: decimal; }

/* Inline code */
.markdown-rendered code {
  background-color: var(--code-background);
  color: var(--code-normal);
  border-radius: 4px;
  padding: 0.12em 0.45em;
  font-size: 0.87em;
}

/* Code blocks */
.markdown-rendered pre {
  background-color: var(--code-background);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  overflow-x: auto;
}

.markdown-rendered pre code {
  background: none;
  padding: 0;
  font-size: 0.9em;
  line-height: 1.65;
  color: var(--code-normal);
}

/* Syntax tokens */
.token.comment,  .hljs-comment  { color: var(--code-comment); font-style: italic; }
.token.keyword,  .hljs-keyword  { color: var(--code-keyword); }
.token.string,   .hljs-string   { color: var(--code-string); }
.token.number,   .hljs-number   { color: var(--code-number); }
.token.function, .hljs-function { color: var(--code-function); }
.token.operator, .hljs-operator { color: var(--code-operator); }
.token.builtin,  .hljs-built_in { color: var(--code-builtin); }
.token.class-name { color: var(--code-definition); }

/* Blockquotes */
.markdown-rendered blockquote {
  border-left: var(--blockquote-border-thickness) solid var(--blockquote-border-color);
  background-color: var(--blockquote-background-color);
  color: var(--blockquote-color);
  padding: 0.75em 1.2em;
  border-radius: 0 6px 6px 0;
  font-style: italic;
}

.markdown-rendered blockquote p {
  margin: 0;
}

/* Tables */
.markdown-rendered table {
  border-collapse: collapse;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
  font-size: 0.93rem;
}

.markdown-rendered .table-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

.markdown-rendered th,
.markdown-rendered td {
  border: 1px solid var(--background-modifier-border);
  padding: 0.55rem 0.85rem;
  text-align: left;
}

.markdown-rendered thead {
  background-color: var(--background-primary-alt);
  border-bottom: 2px solid var(--interactive-accent);
}

.markdown-rendered thead th {
  font-weight: 700;
  color: var(--text-normal);
}

.markdown-rendered tbody tr:nth-child(even) {
  background-color: var(--background-secondary);
}

/* Task list checkboxes */
.markdown-rendered input[type="checkbox"] {
  accent-color: var(--interactive-accent);
}

/* Footnotes */
.footnotes {
  font-size: 0.88rem;
  color: var(--text-muted);
  border-top: 1px solid var(--background-modifier-border);
  margin-top: 2rem;
  padding-top: 1rem;
}

/* ============================================================
   TAGS
   ============================================================ */

.tag {
  color: var(--tag-color) !important;
  background-color: var(--tag-background) !important;
  border: var(--tag-border-width) solid var(--tag-border-color) !important;
  border-radius: var(--tag-radius) !important;
  padding: var(--tag-padding-y) var(--tag-padding-x) !important;
  font-size: 0.8em !important;
  text-decoration: none !important;
  transition: border-color 0.15s;
  font-style: normal !important;
}

.tag:hover {
  border-color: var(--tag-color) !important;
  color: var(--tag-color) !important;
}

/* ============================================================
   CALLOUTS
   ============================================================ */

.callout {
  border-radius: 6px;
  padding: 0.75rem 1rem;
  border-left-width: 3px;
  border-left-style: solid;
}

.callout-title {
  font-weight: 700;
  font-size: 0.93rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.callout-content {
  font-size: 0.93rem;
  color: var(--text-normal);
}

/* Callout type colors via the CSS vars set above */
.callout[data-callout="note"],
.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="tldr"] {
  background-color: rgba(var(--callout-default), 0.08);
  border-left-color: rgb(var(--callout-default));
}

.callout[data-callout="info"] {
  background-color: rgba(var(--callout-info), 0.08);
  border-left-color: rgb(var(--callout-info));
}

.callout[data-callout="tip"],
.callout[data-callout="hint"] {
  background-color: rgba(var(--callout-tip), 0.08);
  border-left-color: rgb(var(--callout-tip));
}

.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"] {
  background-color: rgba(var(--callout-success), 0.08);
  border-left-color: rgb(var(--callout-success));
}

.callout[data-callout="warning"],
.callout[data-callout="caution"],
.callout[data-callout="attention"] {
  background-color: rgba(var(--callout-warning), 0.08);
  border-left-color: rgb(var(--callout-warning));
}

.callout[data-callout="failure"],
.callout[data-callout="fail"],
.callout[data-callout="missing"] {
  background-color: rgba(var(--callout-failure), 0.08);
  border-left-color: rgb(var(--callout-failure));
}

.callout[data-callout="danger"],
.callout[data-callout="error"] {
  background-color: rgba(var(--callout-danger), 0.08);
  border-left-color: rgb(var(--callout-danger));
}

.callout[data-callout="bug"] {
  background-color: rgba(var(--callout-bug), 0.08);
  border-left-color: rgb(var(--callout-bug));
}

.callout[data-callout="question"],
.callout[data-callout="faq"],
.callout[data-callout="help"] {
  background-color: rgba(var(--callout-question), 0.08);
  border-left-color: rgb(var(--callout-question));
}

.callout[data-callout="quote"],
.callout[data-callout="cite"] {
  background-color: rgba(var(--callout-quote), 0.08);
  border-left-color: rgb(var(--callout-quote));
}

/* ============================================================
   FRONTMATTER / PROPERTIES
   ============================================================ */

.metadata-container {
  background-color: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.88rem;
}

.metadata-property-key {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.metadata-property-value {
  color: var(--text-normal);
}

.metadata-add-button {
  color: var(--text-faint);
}

/* ============================================================
   SEARCH
   ============================================================ */

.search-view-outer {
  background-color: var(--background-secondary);
}

.search-input-container input,
input[type="search"],
input[type="text"].search-input {
  background-color: var(--background-primary-alt, var(--background-modifier-border));
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  color: var(--text-normal);
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.15s;
}

.search-input-container input:focus,
input[type="search"]:focus,
input[type="text"].search-input:focus {
  border-color: var(--interactive-accent);
  outline: none;
}

.search-input-container input::placeholder {
  color: var(--text-faint);
}

.search-result-file-title {
  color: var(--interactive-accent);
  font-weight: 600;
}

.search-result-file-match {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.search-result-file-matched-text {
  color: var(--interactive-accent);
  background-color: var(--text-highlight-bg);
}

/* ============================================================
   GRAPH VIEW
   ============================================================ */

.graph-view-outer,
.graph-view.color-fill {
  background-color: var(--background-primary);
}

.graph-controls {
  background-color: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
}

.graph-controls input[type="range"] {
  accent-color: var(--interactive-accent);
}

.graph-controls input[type="text"] {
  background-color: var(--background-primary-alt, var(--background-modifier-border));
  border: 1px solid var(--background-modifier-border);
  border-radius: 5px;
  color: var(--text-normal);
  font-size: 0.88rem;
}

.graph-controls .graph-control-section-header {
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   SCROLLBARS
   ============================================================ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-active-thumb-bg);
}