/* =============================================================
   Grey Matter — Material for MkDocs
   Based on Red Ink: Cool Gray spec
   ============================================================= */

@import "greymatter-syntax.css";
@import "greymatter-admonitions.css";

/* --- Fonts --------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Crimson+Pro:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* --- Core palette -------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-hue: 220;

  /* Page background */
  --md-default-bg-color:            #131416;
  --md-default-bg-color--light:     rgba(19, 20, 22, 0.54);
  --md-default-bg-color--lighter:   rgba(19, 20, 22, 0.26);
  --md-default-bg-color--lightest:  rgba(19, 20, 22, 0.07);

  /* Text */
  --md-default-fg-color:            #b4b8c0;
  --md-default-fg-color--light:     #7a7e88;
  --md-default-fg-color--lighter:   rgba(122, 126, 136, 0.5);
  --md-default-fg-color--lightest:  rgba(122, 126, 136, 0.2);

  /* Primary brand — neutral */
  --md-primary-fg-color:            #b4b8c0;
  --md-primary-fg-color--light:     rgba(180, 184, 192, 0.7);
  --md-primary-fg-color--dark:      #8a8e96;
  --md-primary-bg-color:            #131416;
  --md-primary-bg-color--light:     rgba(19, 20, 22, 0.7);

  /* Accent — steel blue for hover/focus */
  --md-accent-fg-color:             #80a4c0;
  --md-accent-fg-color--transparent: rgba(128, 164, 192, 0.1);
  --md-accent-bg-color:             #b4b8c0;
  --md-accent-bg-color--light:      rgba(180, 184, 192, 0.7);

  /* Links — neutral, not colored */
  --md-typeset-a-color:             #b4b8c0;

  /* Code */
  --md-code-bg-color:               #1a1c1e;
  --md-code-bg-color--light:        rgba(26, 28, 30, 0.9);
  --md-code-bg-color--lighter:      rgba(26, 28, 30, 0.54);
  --md-code-fg-color:               #b4b8c0;

  /* Syntax highlighting */
  --md-code-hl-color:               rgba(128, 164, 192, 0.2);
  --md-code-hl-color--light:        rgba(128, 164, 192, 0.08);
  --md-code-hl-number-color:        #c0a468;
  --md-code-hl-special-color:       #c04040;
  --md-code-hl-function-color:      #b4b8c0;
  --md-code-hl-constant-color:      #80a4c0;
  --md-code-hl-keyword-color:       #80a4c0;
  --md-code-hl-string-color:        #80aa80;
  --md-code-hl-name-color:          var(--md-code-fg-color);
  --md-code-hl-operator-color:      #7a7e88;
  --md-code-hl-punctuation-color:   #7a7e88;
  --md-code-hl-comment-color:       #484c54;
  --md-code-hl-generic-color:       var(--md-default-fg-color--light);
  --md-code-hl-variable-color:      var(--md-default-fg-color);

  /* Footer */
  --md-footer-bg-color:             #0e0f11;
  --md-footer-bg-color--dark:       #0a0b0c;
  --md-footer-fg-color:             #b4b8c0;
  --md-footer-fg-color--light:      #7a7e88;
  --md-footer-fg-color--lighter:    rgba(122, 126, 136, 0.4);

  /* Shadows */
  --md-shadow-z1: 0 0.2rem 0.5rem rgba(0,0,0,0.15), 0 0 0.05rem rgba(0,0,0,0.25);
  --md-shadow-z2: 0 0.2rem 0.5rem rgba(0,0,0,0.4),  0 0 0.05rem rgba(0,0,0,0.4);
  --md-shadow-z3: 0 0.2rem 0.5rem rgba(0,0,0,0.55), 0 0 0.05rem rgba(0,0,0,0.5);

  /* Admonitions */
  --md-admonition-bg-color:         #1a1c1e;
  --md-admonition-fg-color:         var(--md-default-fg-color);

  /* Tables */
  --md-typeset-table-color:         rgba(180, 184, 192, 0.12);
  --md-typeset-table-color--light:  rgba(180, 184, 192, 0.035);

  /* Keyboard */
  --md-typeset-kbd-color:           rgba(180, 184, 192, 0.12);
  --md-typeset-kbd-accent-color:    rgba(180, 184, 192, 0.2);
  --md-typeset-kbd-border-color:    #282a2e;

  /* Highlights */
  --md-typeset-mark-color:          rgba(128, 164, 192, 0.2);

  /* Fonts */
  --md-text-font:                   "Crimson Pro", serif;
  --md-text-font-family:            "Crimson Pro", serif;
  --md-code-font:                   "IBM Plex Mono", monospace;
  --md-code-font-family:            "IBM Plex Mono", monospace;

  /* Clipboard icon */
  --md-clipboard-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path class="cls-1" d="m4,3.99v18h15V3.99H4Zm13.03,16.07H6.03V6.01h10.99v14.05Z"/><polygon class="cls-1" points="2.03 16.02 2.03 2.01 14.05 2.01 14.05 0 0 0 0 16.02 2.03 16.02"/></svg>');

  /* Mermaid */
  --md-mermaid-node-bg-color:       #1a1c1e;
  --md-mermaid-node-fg-color:       #b4b8c0;
  --md-mermaid-edge-color:          #7a7e88;
  --md-mermaid-label-bg-color:      #1a1c1e;
  --md-mermaid-label-fg-color:      #b4b8c0;
  --md-mermaid-font-family:         "Crimson Pro", serif;
}


/* --- Header -------------------------------------------------- */
[data-md-color-scheme="slate"] .md-header {
  background-color: #0e0f11;
  border-bottom: 1px solid #282a2e;
  box-shadow: none;
}

[data-md-color-scheme="slate"] .md-header__title {
  font-family: "Newsreader", serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Tabs bar */
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #0e0f11;
  border-bottom: 1px solid #282a2e;
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: var(--md-default-fg-color--light);
}

[data-md-color-scheme="slate"] .md-tabs__link--active,
[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: #e0e2e8;
}

/* Header text */
[data-md-color-scheme="slate"] .md-header__topic {
  color: var(--md-default-fg-color);
}


/* --- Sidebar / Navigation ------------------------------------ */
[data-md-color-scheme="slate"] .md-sidebar {
  background: #131416;
}

[data-md-color-scheme="slate"] .md-nav__link {
  color: var(--md-default-fg-color--light);
  transition: color 0.15s ease;
}

[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #e0e2e8;
}

[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
  color: #e0e2e8;
  font-weight: 500;
}


/* --- Content typography -------------------------------------- */
[data-md-color-scheme="slate"] .md-typeset h1 {
  font-family: "Newsreader", serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #e0e2e8;
}

[data-md-color-scheme="slate"] .md-typeset h2 {
  font-family: "Newsreader", serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #e0e2e8;
  border-bottom: 1px solid #282a2e;
  padding-bottom: 0.4em;
}

[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  font-family: "Crimson Pro", serif;
  font-weight: 600;
  color: #e0e2e8;
}

[data-md-color-scheme="slate"] .md-typeset strong {
  color: #e0e2e8;
  font-weight: 600;
}

/* Links — neutral with subtle underline */
[data-md-color-scheme="slate"] .md-typeset a {
  color: #b4b8c0;
  text-decoration: underline;
  text-decoration-color: #454850;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  text-decoration-color: #b4b8c0;
}

p, .md-typeset ol li, .md-typeset ul li {
  font-size: 16px;
  line-height: 1.6;
}

.md-typeset blockquote {
  font-size: 14px;
  font-weight: 200 !important;
  margin-top: 2em;
  margin-bottom: 2em;
}

[data-md-color-scheme="slate"] .md-typeset blockquote {
  border-left: 3px solid #282a2e;
  color: var(--md-default-fg-color--light);
  padding-left: 1rem;
}


[data-md-color-scheme="slate"] .md-typeset hr {
  border-color: #282a2e;
}


/* --- Inline code --------------------------------------------- */
[data-md-color-scheme="slate"] .md-typeset code {
  background: #1a1c1e;
  border: 1px solid #282a2e;
  border-radius: 4px;
  color: #a8acb4;
  font-size: 0.85em;
  padding: 0.1em 0.35em;
}

/* Code blocks — override inline code styles */
.md-typeset pre > code {
  background: transparent;
  border: none;
  color: inherit;
  padding: 1.1em 1.2em;
  font-size: 0.82em;
}

[data-md-color-scheme="slate"] .md-typeset pre {
  background: #1a1c1e;
}

/* Hide redundant filename inside tabbed code blocks */
.md-typeset .tabbed-block > .highlight > .filename {
  margin: 0;
  display: none;
}


/* Remove pre margin inside tabbed blocks to prevent gap */
.md-typeset .tabbed-block pre {
  margin: 0;
}

/* Collapse annotate wrapper margin without hiding it (JS needs it) */
.md-typeset .tabbed-block > p.annotate {
  margin: 0 !important;
}



/* --- Tables -------------------------------------------------- */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: #1a1c1e;
  color: #e0e2e8;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border-color: #282a2e;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover td {
  background: rgba(128, 164, 192, 0.04);
}



/* --- Search -------------------------------------------------- */
[data-md-color-scheme="slate"] .md-search__form {
  background: #1a1c1e;
  border: 1px solid #282a2e;
  border-radius: 8px;
}

[data-md-color-scheme="slate"] .md-search__input {
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: var(--md-default-fg-color--light);
}

[data-md-color-scheme="slate"] .md-search-result__link:hover {
  background: rgba(128, 164, 192, 0.06);
}


/* --- Tabs (content tabs) ------------------------------------- */
.md-typeset .tabbed-labels > label {
  color: var(--md-default-fg-color--light);
  border-bottom-color: transparent;
  font-weight: 300;
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels > label:hover {
  color: #e0e2e8;
}

div.tabbed-labels.tabbed-labels--linked,
div.tabbed-labels.tabbed-labels--linked,
.highlight span.filename {
  background-color: var(--md-code-bg-color);
}

/* Focused tab styling */
.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-labels > :first-child, .md-typeset .tabbed-set > input:nth-child(10):checked ~ .tabbed-labels > :nth-child(10), .md-typeset .tabbed-set > input:nth-child(11):checked ~ .tabbed-labels > :nth-child(11), .md-typeset .tabbed-set > input:nth-child(12):checked ~ .tabbed-labels > :nth-child(12), .md-typeset .tabbed-set > input:nth-child(13):checked ~ .tabbed-labels > :nth-child(13), .md-typeset .tabbed-set > input:nth-child(14):checked ~ .tabbed-labels > :nth-child(14), .md-typeset .tabbed-set > input:nth-child(15):checked ~ .tabbed-labels > :nth-child(15), .md-typeset .tabbed-set > input:nth-child(16):checked ~ .tabbed-labels > :nth-child(16), .md-typeset .tabbed-set > input:nth-child(17):checked ~ .tabbed-labels > :nth-child(17), .md-typeset .tabbed-set > input:nth-child(18):checked ~ .tabbed-labels > :nth-child(18), .md-typeset .tabbed-set > input:nth-child(19):checked ~ .tabbed-labels > :nth-child(19), .md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2), .md-typeset .tabbed-set > input:nth-child(20):checked ~ .tabbed-labels > :nth-child(20), .md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3), .md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4), .md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5), .md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6), .md-typeset .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > :nth-child(7), .md-typeset .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > :nth-child(8), .md-typeset .tabbed-set > input:nth-child(9):checked ~ .tabbed-labels > :nth-child(9) {
  background-color: var(--md-code-bg-color);
  border-left: 1px solid var(--md-default-bg-color);
  border-right: 1px solid var(--md-default-bg-color);
}

.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-labels > :first-child {
  border-left: none;
}

.js .md-typeset .tabbed-labels:before {
  display: none;
}

[data-md-color-scheme=slate] div.tabbed-labels.tabbed-labels--linked {
  background-color: #0e0f11;
}

/* Removing margin between adjacent code blocks */
div[class^="language-"] + div[class^="language-"] > pre {
  margin-top: 0;
}

div[class^="language-"]:has(+ div[class^="language-"]) > pre {
  margin-bottom: 1px;
}


/* --- Footer -------------------------------------------------- */
[data-md-color-scheme="slate"] .md-footer {
  border-top: 1px solid #282a2e;
}


/* --- Images -------------------------------------------------- */
p img {
  border: 1px solid #282a2e;
  border-radius: 8px;
  margin-top: 1em;
  margin-bottom: 1em;
}

p img:not([width]) {
  width: 100%;
}

img.grayscale {
  filter: grayscale(100%);
}

.img-wrapper {
  position: relative;
}

.img-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translate(5px, 5px);
}

.md-typeset img {
  position: relative;
}


/* --- Shell prompt styling ------------------------------------ */
.gp-prompt::before, .nt-path::before {
  content: attr(data-before);
}

.nf-dollar::before {
  content: attr(data-before);
}


/* --- Custom inline classes ----------------------------------- */
.md-typeset code.inline-filename {
  color: #e0e2e8;
}

.md-typeset code.inline-error {
  color: #c04040;
}


/* --- Scrollbars (Webkit) ------------------------------------- */
[data-md-color-scheme="slate"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
  background: #131416;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: #282a2e;
  border-radius: 3px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: #383c44;
}


/* --- Blog post header ---------------------------------------- */
.md-post-head {
  margin-bottom: 1.5em;
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
}

.md-post-head__author {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.3em;
}

.md-post-head__author img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
}

.md-post-head__author a {
  color: var(--md-default-fg-color);
  font-weight: 500;
}

.md-post-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  color: var(--md-default-fg-color--light);
}

.md-post-head__meta a {
  color: var(--md-default-fg-color--light);
}

/* --- Content width ------------------------------------------- */
.md-content--post {
  max-width: 800px;
  margin: 0 auto;
}

.md-content--post .md-content__inner {
  max-width: 800px;
}

/* --- Iframes ------------------------------------------------- */
iframe[src^="https://docs.google.com/presentation"] {
  aspect-ratio: 16 / 10;
  width: 100%;
  max-width: 688px;
  height: auto;
}