/* Monokai Pro - Filter Machine
 *   theme-dark  -> Machine (canonical dark palette)
 *   theme-light -> "Machine, Inverted" - paper/charcoal scale, accents
 *                  darkened to pass WCAG AA on near-white surface.
 *
 * Callout color tokens are R,G,B triplets - Obsidian Publish wraps them in
 * `rgba(var(--callout-X), 0.1)` for the title/background tints. Hex would
 * silently fail there.
 *
 * Typography: Newsreader (headings) + Open Sans (body) + Source Code Pro.
 */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400..700;1,400..700&family=Open+Sans:wght@400..700&family=Source+Code+Pro:wght@400;600&display=swap');

/* =========================================================================
 *  Shared - applies in both modes. Per-mode blocks override only the
 *  palette and a handful of values that genuinely differ.
 *  Selector matches `body.theme-X` specificity so app.css's per-mode
 *  defaults (e.g. --text-accent: var(--color-accent)) don't override us.
 * ========================================================================= */
body.theme-dark,
body.theme-light {
  /* Link decoration */
  --link-decoration-thickness: 1px;
  --link-unresolved-opacity:   0.85;

  /* Typography */
  --font-heading:         'Newsreader', Georgia, "Times New Roman", serif;
  --font-text-theme:      'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-interface-theme: var(--font-text-theme);
  --font-monospace-theme: 'Source Code Pro', ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --h1-font: var(--font-heading);
  --h2-font: var(--font-heading);
  --h3-font: var(--font-heading);
  --h4-font: var(--font-heading);
  --h5-font: var(--font-heading);
  --h6-font: var(--font-heading);

  --h1-weight: 600;
  --h2-weight: 500;
  --h3-weight: 600;
  --h4-weight: 600;
  --h5-weight: 500;
  --h6-weight: 500;

  --h1-size: 2.4em;
  --h2-size: 1.5em;
  --h3-size: 1.2em;
  --h4-size: 1.05em;
  --h5-size: 1em;
  --h6-size: 0.9em;

  --h1-line-height: 1.1;
  --h2-line-height: 1.25;

  --line-height-normal: 1.6;
  --indent-size: 6;

  /* Color aliases - resolve per-mode via --mk-* */
  --color-red:    var(--mk-red);
  --color-orange: var(--mk-orange);
  --color-yellow: var(--mk-yellow);
  --color-green:  var(--mk-green);
  --color-cyan:   var(--mk-blue);
  --color-blue:   var(--mk-blue);
  --color-purple: var(--mk-purple);
  --color-pink:   var(--mk-red);

  /* Surfaces */
  --background-primary:        var(--mk-base0);
  --background-primary-alt:    var(--mk-base1);
  --background-secondary:      var(--mk-base1);
  --background-secondary-alt:  var(--mk-base2);
  --background-modifier-border:        var(--mk-base3);
  --background-modifier-border-hover:  var(--mk-base4);
  --background-modifier-border-focus:  var(--mk-blue);
  --background-modifier-hover:         var(--mk-base2);
  --background-modifier-active-hover:  var(--mk-base3);
  --background-modifier-form-field:    var(--mk-base2);

  /* Text */
  --text-normal:        var(--mk-base8);
  --text-muted:         var(--mk-base7);
  --text-accent:        var(--mk-yellow);
  --text-accent-hover:  var(--mk-orange);
  --text-selection:     rgba(var(--color-yellow-rgb), 0.30);
  --text-highlight-fg:  var(--mk-base8);
  --text-strikethrough-color: var(--mk-base5);
  --bold-color:    var(--mk-yellow);
  --italic-color:  var(--mk-orange);

  /* Accent / interactive */
  --interactive-accent:        var(--mk-blue);
  --interactive-accent-hover:  var(--mk-purple);
  --interactive-normal:        var(--mk-base2);
  --interactive-hover:         var(--mk-base3);

  /* Links */
  --link-color:                  var(--mk-blue);
  --link-color-hover:            var(--mk-yellow);
  --link-external-color:         var(--mk-blue);
  --link-external-color-hover:   var(--mk-yellow);
  --link-unresolved-color:       var(--mk-red);
  --link-unresolved-decoration-color: rgba(var(--color-red-rgb), 0.6);

  /* Headings - editorial: hierarchy via size/weight, not hue */
  --h1-color: var(--text-normal);
  --h2-color: var(--text-normal);
  --h3-color: var(--text-normal);
  --h4-color: var(--text-normal);
  --h5-color: var(--text-normal);
  --h6-color: var(--text-muted);

  /* Code / syntax */
  --code-background: var(--mk-base2);
  --code-normal:     var(--mk-base8);
  --code-keyword:    var(--mk-red);
  --code-function:   var(--mk-green);
  --code-property:   var(--mk-blue);
  --code-tag:        var(--mk-red);
  --code-value:      var(--mk-purple);
  --code-string:     var(--mk-yellow);
  --code-operator:   var(--mk-purple);
  --code-important:  var(--mk-orange);
  --code-punctuation: var(--mk-base7);
  --code-class:      var(--mk-blue);
  --code-constant:   var(--mk-purple);

  /* Blockquote */
  --blockquote-background-color: rgba(var(--color-purple-rgb), 0.06);
  --blockquote-border-color:     var(--mk-purple);
  --blockquote-color:            var(--mk-base7);

  /* Callouts (R,G,B triplets) */
  --callout-note:      var(--color-blue-rgb);
  --callout-default:   var(--color-blue-rgb);
  --callout-info:      var(--color-blue-rgb);
  --callout-tip:       var(--color-green-rgb);
  --callout-summary:   var(--color-cyan-rgb);
  --callout-abstract:  var(--color-cyan-rgb);
  --callout-success:   var(--color-green-rgb);
  --callout-question:  var(--color-yellow-rgb);
  --callout-warning:   var(--color-orange-rgb);
  --callout-fail:      var(--color-red-rgb);
  --callout-failure:   var(--color-red-rgb);
  --callout-error:     var(--color-red-rgb);
  --callout-danger:    var(--color-red-rgb);
  --callout-bug:       var(--color-red-rgb);
  --callout-example:   var(--color-purple-rgb);
  --callout-todo:      var(--color-blue-rgb);
  --callout-important: var(--color-orange-rgb);

  /* Tables / hr */
  --table-border-color:       var(--mk-base3);
  --table-header-background:  var(--mk-base2);
  --hr-color:                 var(--mk-base3);

  /* Checkbox */
  --checkbox-color:        var(--mk-blue);
  --checkbox-color-hover:  var(--mk-purple);
  --checkbox-border-color: var(--mk-base4);
  --checklist-done-color:  var(--mk-base5);

  /* Header / chrome */
  --header-background: var(--mk-base1);

  /* Graph view */
  --graph-line:             var(--mk-base3);
  --graph-node:             var(--mk-base7);
  --graph-node-unresolved:  var(--mk-base5);
  --graph-node-focused:     var(--mk-yellow);
  --graph-node-tag:         var(--mk-orange);
  --graph-node-attachment:  var(--mk-purple);
  --graph-text:             var(--mk-base8);

  /* Scrollbars */
  --scrollbar-bg:              transparent;
  --scrollbar-thumb-bg:        var(--mk-base3);
  --scrollbar-active-thumb-bg: var(--mk-base4);
}

/* =========================================================================
 *  DARK - Monokai Pro Filter Machine
 * ========================================================================= */
body.theme-dark {
  --mk-red:    #ff6d7e;
  --mk-orange: #ffb270;
  --mk-yellow: #ffed72;
  --mk-green:  #a2e57b;
  --mk-blue:   #7cd5f1;
  --mk-purple: #baa0f8;

  --mk-base0: #161b1e;
  --mk-base1: #1d2528;
  --mk-base2: #273136;
  --mk-base3: #3a4449;
  --mk-base4: #545f62;
  --mk-base5: #6b7678;
  --mk-base6: #798384;
  --mk-base7: #b8c4c3;
  --mk-base8: #f2fffc;

  --color-red-rgb:    255, 109, 126;
  --color-orange-rgb: 255, 178, 112;
  --color-yellow-rgb: 255, 237, 114;
  --color-green-rgb:  162, 229, 123;
  --color-cyan-rgb:   124, 213, 241;
  --color-blue-rgb:   124, 213, 241;
  --color-purple-rgb: 186, 160, 248;
  --color-pink-rgb:   255, 109, 126;

  --text-faint:     var(--mk-base6);
  --text-on-accent: var(--mk-base0);
  --text-highlight-bg: rgba(var(--color-yellow-rgb), 0.30);
  --code-comment:    var(--mk-base7);

  --background-modifier-cover:      rgba(22, 27, 30, 0.7);
  --background-modifier-box-shadow: rgba(0, 0, 0, 0.45);
  --table-row-alt-background:       rgba(255, 255, 255, 0.02);

  --callout-quote:     121, 131, 132;
  --callout-cite:      121, 131, 132;

  --checkbox-marker-color: var(--mk-base0);
  --tag-color:       var(--mk-base0);
  --tag-background:  var(--mk-yellow);
  --caret-color:     var(--mk-yellow);

  color-scheme: dark;
}

/* =========================================================================
 *  LIGHT - Machine, Inverted (paper / charcoal)
 *  --mk-yellow splits into a text-grade `--mk-yellow` and a chip-grade
 *  `--mk-yellow-chip` so the iconic Monokai yellow tag pill survives.
 * ========================================================================= */
body.theme-light {
  --mk-red:         #c83246;
  --mk-orange:      #c8531c;
  --mk-yellow:      #b8860b;
  --mk-yellow-chip: #ffd84a;
  --mk-green:       #2e7d1f;
  --mk-blue:        #066a85;
  --mk-purple:      #6a3fbf;

  --mk-base0: #fafaf7;
  --mk-base1: #ebe9e2;
  --mk-base2: #e3e1da;
  --mk-base3: #d8dcd6;
  --mk-base4: #bfc4bf;
  --mk-base5: #7f8a8c;
  --mk-base6: #5a6568;
  --mk-base7: #3a4448;
  --mk-base8: #1d2528;

  --color-red-rgb:    200, 50, 70;
  --color-orange-rgb: 160, 74, 0;
  --color-yellow-rgb: 122, 93, 0;
  --color-green-rgb:  46, 125, 31;
  --color-cyan-rgb:   6, 106, 133;
  --color-blue-rgb:   6, 106, 133;
  --color-purple-rgb: 106, 63, 191;
  --color-pink-rgb:   200, 50, 70;

  --text-faint:     var(--mk-base5);
  --text-on-accent: #ffffff;
  --text-highlight-bg: rgba(255, 216, 74, 0.45);  /* yellow-chip tint */
  --code-comment:    var(--mk-base6);

  --background-modifier-cover:      rgba(250, 250, 247, 0.7);
  --background-modifier-form-field: #ffffff;
  --background-modifier-box-shadow: rgba(20, 30, 35, 0.10);
  --table-row-alt-background:       rgba(0, 0, 0, 0.025);

  --callout-quote:     90, 101, 104;
  --callout-cite:      90, 101, 104;

  --checkbox-marker-color: #ffffff;
  --tag-color:       var(--mk-base8);
  --tag-background:  var(--mk-yellow-chip);
  --caret-color:     var(--mk-orange);

  color-scheme: light;
}

/* =========================================================================
 *  Element-level rules
 * ========================================================================= */

body {
  background-color: var(--background-primary);
  color: var(--text-normal);
}

/* Hide the "Powered by Obsidian Publish" watermark.
 * --footer-display token is scoped to .published-container so we override
 * the element directly to win specificity. */
.published-container .site-footer {
  display: none;
}

/* Sidebar - floating card on the page surface: margin shows the page bg
 * around it, rounded corners + soft drop shadow.
 * Sidebar tokens are scoped to .published-container in app.css; override
 * the element directly to win specificity. */
.published-container .site-body-left-column {
  background-color: var(--mk-base1);
  border-right: none;
  margin: 12px 0 12px 12px;
  height: calc(100% - 24px);
  /* app.css sets padding: 32px 0 0 18px - mirror the left padding on the
   * right so the inner column (and the centered logo) sit symmetrically. */
  padding-right: 18px;
  border-radius: 12px;
  box-shadow: 0 4px 18px var(--background-modifier-box-shadow);
  z-index: 1;
}
/* Mobile - undo the floating-card treatment so Publish's slide-in mechanic
 * (position: fixed; transform: translateX(-100%)) lands flush against the
 * viewport edges. The sidebar scrolls internally so we let it fill the
 * remaining height under the header. */
@media screen and (max-width: 750px) {
  .published-container .site-body-left-column {
    margin: 0;
    padding-right: 0;
    height: calc(100% - var(--header-height));
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
  }
}

.site-body-left-column-site-logo {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.site-body-left-column-site-logo img {
  max-width: 150px;
}

.site-body-left-column-site-name {
  font-family: var(--font-heading);
  color: var(--text-normal);
}

/* Sidebar tree - illuminate on hover, pill highlight when active.
 * App.css uses left-border indicators on items and a vertical guide line
 * on deeply-nested children; we remove both in favor of background fills. */
.nav-view-outer .tree-item-self,
.nav-view-outer .tree-item-self:not(.mod-collapsible),
.nav-view-outer .tree-item-self.is-clickable:hover,
.nav-view-outer .tree-item-self:hover:not(.mod-collapsible):not(.mod-active),
.nav-view-outer .tree-item-self.mod-active {
  border-left-color: transparent;
}
.nav-view-outer .tree-item-children .tree-item-children .tree-item-children {
  border-left-color: transparent;
}
.nav-view-outer .tree-item-self.is-clickable {
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-view-outer .tree-item-self.is-clickable:hover,
.nav-view-outer .nav-view > .tree-item > .tree-item-children > .tree-item > .tree-item-self:hover {
  background-color: var(--background-modifier-hover);
  color: var(--text-normal);
  border-radius: 6px;
  opacity: 1;
}
.nav-view-outer .tree-item-self.mod-active,
.nav-view-outer .tree-item-self.mod-active:hover {
  background-color: rgba(var(--color-yellow-rgb), 0.12);
  border-radius: 6px;
}
/* Tree items - match Connect link weight/style. App.css's folder selector
 * (.nav-view > .tree-item > .tree-item-children > .tree-item > .tree-item-self)
 * outranks our class chain, so override the underlying tokens instead. */
.published-container {
  --nav-parent-item-color: var(--text-muted);
  --nav-parent-item-weight: 400;
}

/* Sidebar extras (connect links + theme switcher) injected by publish.js */
.publish-sidebar-extras {
  margin-top: auto;
  padding: 1.2em 4px 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.publish-connect {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  /* Match the sidebar tree font size (14px via --sidebar-font-size) */
  font-size: var(--sidebar-font-size);
}
.publish-section-label {
  font-family: var(--font-heading);
  font-size: 0.95em;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  color: var(--text-faint);
  padding: 0 16px;
  margin-bottom: 0.4em;
}
/* Match Connect's effective gap: label margin-bottom + parent gap.
 * The Browse label sits directly above .nav-view-outer (no gap parent), so
 * it needs a bit more bottom space to feel the same as Connect. */
.publish-browse-label {
  margin-bottom: 0.4em;
}
/* App.css adds padding-top: 10px to .nav-view-outer; nuke it so the only
 * space between the Browse label and the first item is the label's margin. */
.nav-view-outer {
  padding-top: 0;
}
.publish-connect a {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--text-muted);
  text-decoration: none;
  /* Match tree-pill padding so hover area + row height feel consistent */
  padding: 0.35em 16px;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.publish-connect a:hover {
  background-color: var(--background-modifier-hover);
  color: var(--text-normal);
}
.publish-connect svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.8;
}
.publish-connect-affordance {
  margin-left: auto;
  display: inline-flex;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.publish-connect-affordance svg {
  width: 12px;
  height: 12px;
}
.publish-connect a:hover .publish-connect-affordance,
.publish-connect-affordance.is-copied {
  opacity: 0.9;
}
.publish-connect-affordance.is-copied svg {
  color: var(--mk-green);
}

.publish-theme-switcher {
  display: flex;
  gap: 4px;
  background: var(--background-secondary-alt);
  border-radius: 999px;
  padding: 3px;
  font-size: 0.78em;
}
.publish-theme-switcher button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--text-muted);
  padding: 0.35em 0.5em;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.publish-theme-switcher button:hover {
  background-color: var(--background-modifier-hover);
  color: var(--text-normal);
}
.publish-theme-switcher button.is-active:hover {
  background-color: var(--background-primary);
}
.publish-theme-switcher button.is-active {
  background: var(--background-primary);
  color: var(--text-normal);
}
.publish-theme-switcher svg {
  width: 13px;
  height: 13px;
}

/* Hide the native theme toggle - replaced by our 3-state switcher */
.published-container .site-body-left-column-site-theme-toggle {
  display: none;
}

/* H1 / H2 - drop the rule line app.css adds in .published-container.
 * Selector matches app.css's specificity so our reset wins. */
.published-container .markdown-rendered h1,
.published-container .markdown-rendered h2 {
  border-bottom: none;
  padding-bottom: 0;
}

.markdown-preview-view h3 {
  font-style: italic;
}

/* HR - centered section mark, no line */
.markdown-preview-view hr {
  border: none;
  background: none;
  height: auto;
  margin: 3em 0;
  text-align: center;
  overflow: visible;
}
.markdown-preview-view hr::before {
  content: "§";
  color: var(--text-faint);
  font-family: 'Newsreader', Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.05em;
  line-height: 1;
  display: inline-block;
}

/* Blockquote - serif italic, lighter weight */
.markdown-preview-view blockquote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.2em;
  line-height: 1.45;
  border-left: 2px solid var(--blockquote-border-color);
  padding: 0.4em 1.5em;
  background: transparent;
  color: var(--text-muted);
  margin: 1.5em 0;
}
.markdown-preview-view blockquote p {
  margin: 0.4em 0;
}
/* Reset nested size so 1.2em doesn't compound */
.markdown-preview-view blockquote blockquote {
  font-size: 1em;
}

/* Strikethrough - dim instead of normal text color */
.markdown-preview-view del,
.markdown-preview-view s {
  color: var(--text-strikethrough-color);
  text-decoration-color: var(--text-strikethrough-color);
}

/* Code blocks - panel with fill + 1px border + language tag in top-left
 * (top-right is reserved for the Obsidian Publish copy button). */
.markdown-preview-view pre {
  position: relative;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding-top: 2.2em;
}
.markdown-preview-view pre[class*="language-"]::before {
  position: absolute;
  top: 0.5em;
  left: 0.9em;
  font-family: var(--font-monospace);
  font-size: 0.72em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  pointer-events: none;
}
.markdown-preview-view pre.language-typescript::before { content: "ts"; }
.markdown-preview-view pre.language-tsx::before        { content: "tsx"; }
.markdown-preview-view pre.language-javascript::before { content: "js"; }
.markdown-preview-view pre.language-jsx::before        { content: "jsx"; }
.markdown-preview-view pre.language-python::before     { content: "py"; }
.markdown-preview-view pre.language-bash::before       { content: "bash"; }
.markdown-preview-view pre.language-shell::before,
.markdown-preview-view pre.language-sh::before         { content: "sh"; }
.markdown-preview-view pre.language-zsh::before        { content: "zsh"; }
.markdown-preview-view pre.language-rust::before       { content: "rs"; }
.markdown-preview-view pre.language-go::before         { content: "go"; }
.markdown-preview-view pre.language-c::before          { content: "c"; }
.markdown-preview-view pre.language-cpp::before        { content: "c++"; }
.markdown-preview-view pre.language-java::before       { content: "java"; }
.markdown-preview-view pre.language-css::before        { content: "css"; }
.markdown-preview-view pre.language-html::before       { content: "html"; }
.markdown-preview-view pre.language-json::before       { content: "json"; }
.markdown-preview-view pre.language-yaml::before       { content: "yaml"; }
.markdown-preview-view pre.language-toml::before       { content: "toml"; }
.markdown-preview-view pre.language-md::before,
.markdown-preview-view pre.language-markdown::before   { content: "md"; }
.markdown-preview-view pre.language-sql::before        { content: "sql"; }
.markdown-preview-view pre.language-diff::before       { content: "diff"; }

/* Lists - app.css hardcodes top-level li to 3ch, ignoring --indent-size.
 * Make ALL levels honor --list-indent. */
.markdown-rendered ul > li,
.markdown-rendered ol > li {
  margin-inline-start: var(--list-indent);
}

/* Tag pills - micro-shadow + hover lift */
.tag {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: 999px;
  border: none;
  box-shadow: 0 1px 2px var(--background-modifier-box-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.tag:hover {
  background-color: var(--mk-orange);
  color: var(--mk-base0);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px var(--background-modifier-box-shadow);
}

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

html {
  scroll-behavior: smooth;
}

/* Custom scrollbars - WebKit + Firefox (the latter via scrollbar-color) */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-bg) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-bg);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-active-thumb-bg);
}