/* =====================================================================
   NNODESS / Stephen S. Mitchell — Obsidian Publish Theme
   A clean, professional, engineering-flavored theme.
   Drop-in: this file MUST live at the vault root as "publish.css".
   ---------------------------------------------------------------------
   Sections:
     1. Fonts
     2. Design tokens (light)
     3. Design tokens (dark)
     4. Layout & typography
     5. Site navigation (sidebar)
     6. Headings & links
     7. Callouts
     8. Code, tables, quotes
     9. Cards / cssclass utilities
    10. Misc polish
   ===================================================================== */

/* ----------------------------- 1. Fonts ---------------------------- */
/* Inter from the official source (rsms.me) + JetBrains Mono for code. */
@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Prefer the variable font where supported (better weights & metrics). */
@supports (font-variation-settings: normal) {
  .published-container {
    --font-text:      'InterVariable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-interface: 'InterVariable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
}

/* ===================== 2. Theme engine ============================
   The structural block maps Obsidian/Publish variables onto --ssm-*
   palette tokens exactly once. The ACTIVE site theme is set on :root
   (light) and the .theme-dark fallback (dark); light/dark follows
   Obsidian's built-in toggle and the OS preference.

   Active theme: SOLARIZED. To switch families, copy a light palette
   from the reference block at the end of this section into the :root
   rule, and the matching dark palette into the two dark rules.

   NOTE: a JS dropdown switcher is NOT used — Obsidian only runs
   publish.js on custom-domain sites, so this is a pure-CSS setup. */

/* ---- Structural mappings (theme-independent) ---- */
.published-container {
  --background-primary:        var(--ssm-bg);
  --background-primary-alt:     var(--ssm-surface-2);
  --background-secondary:       var(--ssm-surface);
  --background-secondary-alt:   var(--ssm-surface-2);
  --text-normal:                var(--ssm-text);
  --text-muted:                 var(--ssm-muted);
  --text-faint:                 var(--ssm-faint);
  --text-accent:                var(--ssm-accent);
  --text-accent-hover:          var(--ssm-accent-hover);
  --interactive-accent:         var(--ssm-accent);
  --interactive-accent-hover:   var(--ssm-accent-hover);
  --background-modifier-border: var(--ssm-border);

  --checkbox-color:             var(--ssm-accent);
  --checkbox-color-hover:       var(--ssm-accent-hover);
  --checkbox-border-color:      var(--ssm-border);
  --checkbox-marker-color:      var(--ssm-surface);

  /* Obsidian's HSL accent triplet + color-accent vars default to purple. */
  --accent-h: var(--ssm-accent-h);
  --accent-s: var(--ssm-accent-s);
  --accent-l: var(--ssm-accent-l);
  --color-accent:    var(--ssm-accent);
  --color-accent-1:  var(--ssm-accent);
  --color-accent-2:  var(--ssm-accent-2);

  --link-color:                  var(--ssm-accent);
  --link-color-hover:            var(--ssm-accent-hover);
  --link-external-color:         var(--ssm-accent);
  --link-external-color-hover:   var(--ssm-accent-hover);
  --link-unresolved-color:       var(--ssm-faint);

  --font-text:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-interface:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-monospace:  'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --font-text-size:  16px;
  --line-height-normal: 1.6;
  font-feature-settings: 'cv05' 1, 'ss03' 1, 'cv01' 1;

  --page-width: 100%;
  --page-side-padding: 40px;
  --file-line-width: 100%;

  /* Square corners everywhere — set these to non-zero to round again. */
  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;
}

/* ---- ACTIVE light palette (Solarized Light). Set on :root so it
   inherits into all content. ---- */
:root {
  --ssm-bg: #fdf6e3; --ssm-surface: #eee8d5; --ssm-surface-2: #f5efe1;
  --ssm-border: #d8d2c4; --ssm-text: #002b36; --ssm-muted: #586e75;
  --ssm-accent: #268bd2; --ssm-accent-2: #d33682; --ssm-accent-bg: #d0e6f7;
  --ssm-accent-hover: #1a5a87; --ssm-faint: #657b83;
  --ssm-accent-h: 205; --ssm-accent-s: 69%; --ssm-accent-l: 49%;
}

/* ---- ACTIVE dark palette (Solarized Dark). Triggered by Obsidian's
   built-in light/dark toggle (.theme-dark) and the OS preference. ---- */
body.theme-dark,
.theme-dark .published-container {
  --ssm-bg: #002b36; --ssm-surface: #073642; --ssm-surface-2: #094451;
  --ssm-border: #586e75; --ssm-text: #839496; --ssm-muted: #93a1a1;
  --ssm-accent: #73b9e5; --ssm-accent-2: #e580b3; --ssm-accent-bg: #114555;
  --ssm-accent-hover: #a8d4f0; --ssm-faint: #657b83;
  --ssm-accent-h: 205; --ssm-accent-s: 68%; --ssm-accent-l: 67%;
}
@media (prefers-color-scheme: dark) {
  body:not(.theme-light) {
    --ssm-bg: #002b36; --ssm-surface: #073642; --ssm-surface-2: #094451;
    --ssm-border: #586e75; --ssm-text: #839496; --ssm-muted: #93a1a1;
    --ssm-accent: #73b9e5; --ssm-accent-2: #e580b3; --ssm-accent-bg: #114555;
    --ssm-accent-hover: #a8d4f0; --ssm-faint: #657b83;
    --ssm-accent-h: 205; --ssm-accent-s: 68%; --ssm-accent-l: 67%;
  }
}

/* ---- REFERENCE: all theme palettes ported from theme.css. To switch
   the site theme, copy a *-light block into :root above and the matching
   *-dark block into the two dark rules above. (Inactive — comment only.)

   SEAMLESS LIGHT
     --ssm-bg: hsl(36,85%,76%); --ssm-surface: hsl(40,90%,80%); --ssm-surface-2: hsl(35,80%,72%);
     --ssm-border: hsl(32,70%,60%); --ssm-text: hsl(10,20%,15%); --ssm-muted: hsl(20,30%,35%);
     --ssm-accent: hsl(180,100%,25%); --ssm-accent-2: hsl(25,75%,45%); --ssm-accent-bg: hsl(178,38%,80%);
     --ssm-accent-hover: hsl(180,100%,18%); --ssm-faint: hsl(20,18%,50%);
     --ssm-accent-h: 180; --ssm-accent-s: 100%; --ssm-accent-l: 25%;
   SEAMLESS DARK
     --ssm-bg: hsl(10,25%,12%); --ssm-surface: hsl(15,30%,20%); --ssm-surface-2: hsl(20,40%,28%);
     --ssm-border: hsl(24,45%,35%); --ssm-text: hsl(40,90%,80%); --ssm-muted: hsl(32,80%,70%);
     --ssm-accent: hsl(85,45%,58%); --ssm-accent-2: hsl(187,47%,60%); --ssm-accent-bg: hsl(82,22%,20%);
     --ssm-accent-hover: hsl(85,45%,70%); --ssm-faint: hsl(30,25%,45%);
     --ssm-accent-h: 85; --ssm-accent-s: 45%; --ssm-accent-l: 58%;
   DEFAULT (BLUE/SLATE) LIGHT
     --ssm-bg: hsl(206,30%,98.8%); --ssm-surface: #ffffff; --ssm-surface-2: hsl(209,13%,95%);
     --ssm-border: hsl(208,11%,89%); --ssm-text: hsl(206,24%,9%); --ssm-muted: hsl(206,6%,43.5%);
     --ssm-accent: hsl(211,90%,42%); --ssm-accent-2: hsl(250,43%,48%); --ssm-accent-bg: hsl(209,100%,96.5%);
     --ssm-accent-hover: hsl(216,71%,23%); --ssm-faint: hsl(206,6%,56%);
     --ssm-accent-h: 211; --ssm-accent-s: 90%; --ssm-accent-l: 42%;
   DEFAULT (BLUE/SLATE) DARK
     --ssm-bg: #111113; --ssm-surface: #212225; --ssm-surface-2: #272a2d;
     --ssm-border: #363a3f; --ssm-text: #edeef0; --ssm-muted: #b0b4ba;
     --ssm-accent: #70b8ff; --ssm-accent-2: #baa7ff; --ssm-accent-bg: #0d2847;
     --ssm-accent-hover: #c2e6ff; --ssm-faint: #777b84;
     --ssm-accent-h: 210; --ssm-accent-s: 100%; --ssm-accent-l: 72%;
   GITHUB LIGHT
     --ssm-bg: #ffffff; --ssm-surface: #f6f8fa; --ssm-surface-2: #eaeef2;
     --ssm-border: #d0d7de; --ssm-text: #24292f; --ssm-muted: #57606a;
     --ssm-accent: #0969da; --ssm-accent-2: #8250df; --ssm-accent-bg: #ddf4ff;
     --ssm-accent-hover: #0550ae; --ssm-faint: #8c959f;
     --ssm-accent-h: 212; --ssm-accent-s: 92%; --ssm-accent-l: 45%;
   GITHUB DARK
     --ssm-bg: #0d1117; --ssm-surface: #161b22; --ssm-surface-2: #21262d;
     --ssm-border: #30363d; --ssm-text: #c9d1d9; --ssm-muted: #8b949e;
     --ssm-accent: #58a6ff; --ssm-accent-2: #d2a8ff; --ssm-accent-bg: #182e4a;
     --ssm-accent-hover: #79c0ff; --ssm-faint: #6e7681;
     --ssm-accent-h: 212; --ssm-accent-s: 100%; --ssm-accent-l: 67%;
   WINDOWS 11 LIGHT
     --ssm-bg: #f3f3f3; --ssm-surface: #ffffff; --ssm-surface-2: #edebe9;
     --ssm-border: #e1dfdd; --ssm-text: #1c1c1c; --ssm-muted: #605e5c;
     --ssm-accent: #0067c0; --ssm-accent-2: #0078d4; --ssm-accent-bg: #e5f1fb;
     --ssm-accent-hover: #005ba1; --ssm-faint: #a19f9d;
     --ssm-accent-h: 207; --ssm-accent-s: 100%; --ssm-accent-l: 38%;
   WINDOWS 11 DARK
     --ssm-bg: #202020; --ssm-surface: #2b2b2b; --ssm-surface-2: #3b3b3b;
     --ssm-border: #3b3b3b; --ssm-text: #ffffff; --ssm-muted: #8a8a8a;
     --ssm-accent: #60cdff; --ssm-accent-2: #60cdff; --ssm-accent-bg: #1a3a4a;
     --ssm-accent-hover: #99dbff; --ssm-faint: #6a6a6a;
     --ssm-accent-h: 199; --ssm-accent-s: 100%; --ssm-accent-l: 69%;
   ---- */

/* ---------------------- 4. Layout & typography -------------------- */
html, body, .site-body { background-color: var(--ssm-bg); }
.published-container { background-color: var(--background-primary); }

.markdown-preview-view,
.markdown-rendered {
  font-family: var(--font-text);
  color: var(--text-normal);
  line-height: var(--line-height-normal);
}

/* Full-width content — fill the page/window, no narrow column */
.published-container .markdown-preview-sizer,
.published-container .markdown-preview-view,
.published-container .markdown-rendered { max-width: 100%; width: 100%; }

.markdown-preview-view p { margin: 0 0 1.1em; }

/* ------------------- 5. Site navigation (sidebar) ----------------- */
.site-body-left-column,
.site-nav {
  font-family: var(--font-interface);
  background-color: var(--background-secondary);
  border-right: 1px solid var(--background-modifier-border);
}

.nav-link, .tree-item-self {
  font-size: 0.92rem;
  border-radius: var(--radius-s);
}
.tree-item-self:hover { background-color: var(--ssm-accent-bg); }
.tree-item-self.is-active {
  background-color: var(--ssm-accent-bg);
  color: var(--text-accent);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--ssm-accent);
}

/* Site title / logo area */
.site-name, .site-body-left-column-site-name {
  font-family: var(--font-interface);
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Site logo — pulls the published /logo.png in beside the site name.
   Requires logo.png to be published at the vault root. */
.site-name::before, .site-body-left-column-site-name::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background-image: url('/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* --------------------- 6. Headings & links ----------------------- */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4 {
  font-family: var(--font-interface);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-normal);
}
.markdown-preview-view h1 {
  font-size: 2em;
  margin: 0.2em 0 0.6em;
  padding-bottom: 0.25em;
}
.markdown-preview-view h2 {
  font-size: 1.45em;
  margin-top: 1.8em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid var(--background-modifier-border);
}
.markdown-preview-view h3 { font-size: 1.18em; margin-top: 1.4em; }
.markdown-preview-view h4 { font-size: 1.02em; }

/* Accent underline accent on H1 */
.markdown-preview-view h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 0.35em;
  background: linear-gradient(90deg, var(--ssm-accent), var(--ssm-accent-2));
}

/* Links — catch every anchor, not just the two link classes, so no
   bare/footnote/anchor link falls back to the purple default.
   Single underline on hover only (no border-bottom + text-decoration
   stacking, which produced a double line). */
.markdown-preview-view a,
.markdown-rendered a {
  color: var(--text-accent);
  text-decoration: none;
  transition: color .15s ease;
}
.markdown-preview-view a:hover,
.markdown-rendered a:hover {
  color: var(--text-accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.internal-link.is-unresolved {
  color: var(--text-faint);
  text-decoration: underline dashed;
  text-underline-offset: 2px;
}

/* Tags as pills */
.markdown-preview-view a.tag {
  background-color: var(--ssm-accent-bg);
  color: var(--text-accent);
  border: none;
  border-radius: 0;
  padding: 0.1em 0.7em;
  font-family: var(--font-interface);
  font-size: 0.78em;
  font-weight: 500;
}

/* --------------------------- 7. Callouts ------------------------- */
.markdown-preview-view .callout {
  border-radius: var(--radius-m);
  border: 1px solid var(--background-modifier-border);
  border-left-width: 4px;
  background-color: var(--background-secondary-alt);
  padding: 0.85em 1.1em;
}
.markdown-preview-view .callout-title {
  font-family: var(--font-interface);
  font-weight: 600;
}

/* ------------------- 8. Code, tables, quotes --------------------- */
.markdown-preview-view code,
.markdown-preview-view pre {
  font-family: var(--font-monospace);
  font-size: 0.86em;
}
.markdown-preview-view :not(pre) > code {
  background-color: var(--ssm-accent-bg);
  color: var(--text-accent);
  border-radius: var(--radius-s);
  padding: 0.12em 0.4em;
}
.markdown-preview-view pre {
  background-color: var(--background-secondary-alt) !important;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  padding: 1em 1.1em;
  line-height: 1.55;
}

.markdown-preview-view blockquote {
  border-left: 3px solid var(--ssm-accent);
  background-color: var(--background-secondary-alt);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.6em 1.1em;
}

.markdown-preview-view table,
.markdown-rendered table {
  font-family: var(--font-interface);
  font-size: 0.92em;
  border-collapse: collapse;
  overflow: hidden;
  /* Obsidian's --table-* vars default to light values (the white lines /
     header). Map them onto the Seamless palette. */
  --table-border-color: var(--ssm-border);
  --table-header-background: var(--ssm-surface);
  --table-header-background-hover: var(--ssm-surface);
  --table-row-background-hover: var(--ssm-accent-bg);
  --table-row-alt-background: var(--ssm-surface-2);
  --table-row-alt-background-hover: var(--ssm-surface-2);
  border: 1px solid var(--ssm-border);
}
.markdown-preview-view th,
.markdown-rendered th {
  background-color: var(--ssm-surface);
  color: var(--text-normal);
  font-weight: 600;
}
.markdown-preview-view th,
.markdown-preview-view td,
.markdown-rendered th,
.markdown-rendered td {
  border: 1px solid var(--ssm-border) !important;
  padding: 0.5em 0.8em;
}
.markdown-preview-view tr:nth-child(even) td,
.markdown-rendered tr:nth-child(even) td { background-color: var(--ssm-surface-2); }

/* --------------- 9. Cards / cssclass utilities ------------------- */
/* Use in frontmatter:  cssclasses: [card-grid]  with a bulleted list,
   or wrap content. These give you reusable layout helpers.        */

/* Center & constrain a "landing" note */
.cssclass-landing .markdown-preview-sizer,
.landing .markdown-preview-sizer { text-align: center; }
.cssclass-landing h1::after,
.landing h1::after { margin-left: auto; margin-right: auto; }

/* Turn a top-level bulleted list into a responsive card grid */
.card-grid .markdown-preview-view > ul,
.card-grid ul:first-of-type {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
  padding-left: 0;
}
.card-grid .markdown-preview-view > ul > li,
.card-grid ul:first-of-type > li {
  background-color: var(--background-secondary-alt);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  padding: 0.9em 1em;
  margin: 0;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card-grid ul:first-of-type > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-color: var(--ssm-accent);
}

/* `readable` is intentionally a no-op: all pages are full-width.
   (Kept so existing `cssclasses: [readable]` notes don't get narrowed.) */
.readable .markdown-preview-sizer { max-width: 100%; width: 100%; margin-inline: 0; }

/* ------------------------- 10. Misc polish ----------------------- */
/* Square everything — catch-all for any element with a default radius
   (callouts, embeds, buttons, search results, etc.) not covered above. */
.published-container *,
.published-container *::before,
.published-container *::after {
  border-radius: 0 !important;
}
/* Task list checkboxes are read-only on the published site —
   visitors must not be able to toggle them. */
.markdown-preview-view input[type="checkbox"],
.markdown-rendered input.task-list-item-checkbox {
  pointer-events: none;
  cursor: default;
  /* Native control tint (covers UA-rendered checkboxes). */
  accent-color: var(--ssm-accent);
}
/* Custom-rendered checkbox: keep the checked fill/mark on theme (was purple). */
.markdown-preview-view input[type="checkbox"]:checked,
.markdown-rendered input.task-list-item-checkbox:checked {
  background-color: var(--ssm-accent);
  border-color: var(--ssm-accent);
}

/* Horizontal rule (`---`). Obsidian draws it from --hr-color, which
   defaults light — map it onto the theme border and force the color. */
.published-container { --hr-color: var(--ssm-border); }
.markdown-preview-view hr,
.markdown-rendered hr {
  border: none !important;
  border-top: 1px solid var(--ssm-border) !important;
  background: none;
  margin: 2.2em 0;
}

img { border-radius: var(--radius-m); }

/* Footnotes & small print */
.footnotes { font-family: var(--font-interface); font-size: 0.88em; color: var(--text-muted); }

/* Search & graph accent */
.graph-view.color-fill { color: var(--ssm-accent); }

/* Smooth focus ring for accessibility */
:focus-visible { outline: 2px solid var(--ssm-accent); outline-offset: 2px; }

/* Highlight (`==mark==`) defaults to a flat yellow — tint it on theme. */
.published-container { --text-highlight-bg: var(--ssm-accent-bg); }
.markdown-preview-view mark,
.markdown-rendered mark {
  background-color: var(--ssm-accent-bg);
  color: var(--text-normal);
}

/* Text selection — default uses the (purple) accent; use the theme accent. */
.published-container ::selection {
  background-color: var(--ssm-accent-bg);
  color: var(--text-normal);
}

/* Keyboard keys (<kbd>) — give them a themed chip look. */
.markdown-preview-view kbd,
.markdown-rendered kbd {
  background-color: var(--ssm-surface-2);
  border: 1px solid var(--ssm-border);
  color: var(--text-normal);
  font-family: var(--font-monospace);
  font-size: 0.82em;
  padding: 0.1em 0.45em;
}

/* Embedded/transcluded note borders default light. */
.markdown-preview-view .markdown-embed,
.markdown-rendered .markdown-embed {
  border-left: 2px solid var(--ssm-border);
}

/* Scrollbars — tint to the warm theme instead of the default grey. */
.published-container ::-webkit-scrollbar { width: 12px; height: 12px; }
.published-container ::-webkit-scrollbar-track { background: var(--ssm-surface-2); }
.published-container ::-webkit-scrollbar-thumb {
  background: var(--ssm-border);
  border: 3px solid var(--ssm-surface-2);
}
.published-container ::-webkit-scrollbar-thumb:hover { background: var(--ssm-muted); }
.published-container { scrollbar-color: var(--ssm-border) var(--ssm-surface-2); }