/* Open Salamander: Samandarin — GitHub Dark inspired theme */

:root {
  color-scheme: dark;

  --sam-bg: #121212;
  --sam-bg-content: rgba(32, 32, 32, 1);
  --sam-canvas: #0d1117;
  --sam-canvas-subtle: #161b22;
  --sam-canvas-inset: #010409;

  --sam-border: #30363d;
  --sam-border-muted: #21262d;

  --sam-text: #e6edf3;
  --sam-muted: #8b949e;
  --sam-subtle: #7d8590;

  --sam-link: #fd9506;
  --sam-link-hover: #ffd256;

  --sam-accent: #fd9506;
  --sam-accent-muted: rgba(240, 136, 62, 0.18);
  --sam-accent-border: rgba(240, 136, 62, 0.38);

  --sam-radius: 6px;

  --sam-font:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  --sam-mono:
    ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--sam-bg);
}

body {
  color: var(--sam-text);
  background: var(--sam-bg-content);
  font-family: var(--sam-font);
  font-size: 16px;
  line-height: 1.6;
  max-width: 980px;
  margin: 0 auto;
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 0 1em;
  padding-bottom: 1em;
  border-radius: var(--sam-radius);
}

/* Main centered content block */

:where(
  .markdown-body,
  .main-content,
  body > main,
  body > article,
  body > .container,
  body > .container-lg
) {
  width: min(1040px, calc(100vw - 48px));
  max-width: 1040px;
  margin: 32px auto 72px;
  padding: 32px 40px;
  color: var(--sam-text);
  background: var(--sam-canvas);
  border: 1px solid var(--sam-border-muted);
  border-radius: var(--sam-radius);
}

/* Prevent wide Markdown content from escaping the centered block */

:where(
  .markdown-body,
  .main-content,
  body > main,
  body > article,
  body > .container,
  body > .container-lg
) > * {
  max-width: 100%;
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--sam-text);
  font-weight: 600;
  line-height: 1.25;
}

h1 {
  margin: 0;
  border-bottom: 1px solid var(--sam-border-muted);
  font-size: 2.25rem;
  letter-spacing: -0.02em;
}

#description-text {
  margin-top: -2.5em;
  margin-left: 6.5em;
  color: var(--sam-muted);
  font-size: .75rem;
}

h2 {
  margin-top: 2em;
  margin-bottom: 0.8em;
  padding-bottom: 0.28em;
  border-bottom: 1px solid var(--sam-border-muted);
  font-size: 1.65rem;
  letter-spacing: -0.01em;
}

h2::before {
  content: "#";
  margin-right: 0.35em;
  color: var(--sam-accent);
  font-weight: 500;
}

h3 {
  margin-top: 1.55em;
  margin-bottom: 0.55em;
  font-size: 1.25rem;
}

h4 {
  margin-top: 1.3em;
  margin-bottom: 0.45em;
  font-size: 1.05rem;
}

p {
  margin: 0 0 16px;
}

h1 + p {
  color: var(--sam-muted);
  font-size: 1.1rem;
}

strong {
  color: var(--sam-text);
  font-weight: 600;
}

em {
  color: var(--sam-muted);
}

hr {
  height: 1px;
  margin: 24px 0;
  border: 0;
  background: var(--sam-border-muted);
}

/* Links */

a {
  color: var(--sam-link);
  text-decoration: none;
}

a:hover {
  color: var(--sam-link-hover);
  text-decoration: underline;
}

/* Lists */

ul,
ol {
  padding-left: 2em;
  margin-top: 0;
  margin-bottom: 16px;
}

li {
  margin: 0.25em 0;
}

li::marker {
  color: var(--sam-muted);
}

h2 + ul,
h3 + ul {
  margin-top: 8px;
}

ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

/* Blockquotes / Markdown notes */

blockquote {
  color: var(--sam-text);
  background: var(--sam-border);
  background-image: url("https://github.com/user-attachments/assets/af91dcec-fa35-461b-b691-0507c1e1591e") no-repeat right center;
  border: 1px solid var(--sam-border);
  border-radius: var(--sam-radius);
  padding: 1em;
  margin: 2em 0;
  position: relative;
}

blockquote strong:first-child {
  color: var(--sam-accent);
}

/* GitHub-like alert blocks, if generated by Markdown */

.markdown-alert,
.alert {
  margin: 16px 0;
  padding: 12px 16px;
  color: var(--sam-text);
  background: var(--sam-canvas-subtle);
  border: 1px solid var(--sam-border);
  border-radius: var(--sam-radius);
}

.markdown-alert-title,
.alert-title {
  margin-bottom: 8px;
  color: var(--sam-accent);
  font-weight: 600;
}

/* Code */

code,
tt {
  padding: 0.2em 0.4em;
  color: var(--sam-text);
  background: rgba(110, 118, 129, 0.4);
  border-radius: var(--sam-radius);
  font-family: var(--sam-mono);
  font-size: 85%;
}

pre {
  overflow: auto;
  margin: 0 0 16px;
  padding: 16px;
  color: var(--sam-text);
  background: var(--sam-canvas-subtle);
  border: 1px solid var(--sam-border-muted);
  border-radius: var(--sam-radius);
  line-height: 1.45;
}

pre code {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font-size: 100%;
}

/* Tables */

table {
  display: block;
  width: 100%;
  overflow: auto;
  margin: 0 0 16px;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  padding: 6px 13px;
  border: 1px solid var(--sam-border);
}

th {
  color: var(--sam-text);
  font-weight: 600;
  background: var(--sam-canvas-subtle);
}

td {
  color: var(--sam-text);
}

tr {
  background: var(--sam-canvas);
  border-top: 1px solid var(--sam-border);
}

tr:nth-child(2n) {
  background: var(--sam-canvas-subtle);
}

/* Images / screenshots */

img {
  max-width: 100%;
  height: auto;
  margin: 16px 0;
  background: var(--sam-canvas-inset);
  border: 1px solid var(--sam-border);
  border-radius: var(--sam-radius);
}

p > img:only-child {
  display: block;
  margin: 20px auto;
}

/* Keep screenshots clean, GitHub-like, not glossy */

img[src*="screenshot"],
img[src*="Screenshot"],
img[src*="preview"],
img[src*="Preview"] {
  padding: 0;
  border: 1px solid var(--sam-border);
}

#header-logo {
  vertical-align: middle;
  margin-right: 12px;
  border-radius: none;
  border: none;
  box-shadow: none;
  background: none;
}

/* Download / release links as restrained GitHub-like buttons */

/*a[href$=".zip"],
a[href$=".exe"],
a[href*="releases"],
a[href*="download"],*/
a[aria="button"] {
  display: inline-block;
  margin: 4px 4px 4px 0;
  padding: 5px 12px;
  color: var(--sam-link);
  background: #21262d;
  border: 1px solid;
  border-color: var(--sam-link);
  border-radius: var(--sam-radius);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

/*a[href$=".zip"]:hover,
a[href$=".exe"]:hover,
a[href*="releases"]:hover,
a[href*="download"]:hover,*/
a[aria="button"]:hover  {
  background: #30363d;
  border-color: var(--sam-link-hover);
  color: var(--sam-link-hover);
  text-decoration: none;
}

#download-block {
  color: var(--sam-text);
  background: var(--sam-border);
  background-image: url("https://github.com/user-attachments/assets/af91dcec-fa35-461b-b691-0507c1e1591e") no-repeat right center;
  border: 1px solid var(--sam-border);
  border-radius: var(--sam-radius);
  padding: 1em;
  margin: 2em 0;
  position: relative;
}

#download-block h2 {
  margin-top: 0;
}

#download-block img.preview {
  position: absolute;
  right: 1em;
  top: 0;
  width: 380px;
  z-index: 900;
}

#download-block p, #download-block ul, #download-block li {
  z-index: 1000;
}

/* Details / summary */

details {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--sam-canvas-subtle);
  border: 1px solid var(--sam-border);
  border-radius: var(--sam-radius);
}

summary {
  cursor: pointer;
  font-weight: 600;
}

details[open] summary {
  margin-bottom: 12px;
}

/* Keyboard elements */

kbd {
  display: inline-block;
  padding: 3px 5px;
  color: var(--sam-text);
  background: var(--sam-canvas-subtle);
  border: 1px solid var(--sam-border);
  border-bottom-color: #6e7681;
  border-radius: var(--sam-radius);
  box-shadow: inset 0 -1px 0 #6e7681;
  font-family: var(--sam-mono);
  font-size: 11px;
  line-height: 10px;
}

/* Selection / focus */

::selection {
  background: rgba(88, 166, 255, 0.35);
}

:focus-visible {
  outline: 2px solid var(--sam-link);
  outline-offset: 2px;
}

/* Mobile */

@media (max-width: 720px) {
  :where(
    .markdown-body,
    .main-content,
    body > main,
    body > article,
    body > .container,
    body > .container-lg
  ) {
    width: calc(100vw - 24px);
    max-width: none;
    margin: 12px auto 40px;
    padding: 18px;
  }

  h1 {
    font-size: 1.9rem;
  }

  h2 {
    font-size: 1.45rem;
  }

  h3 {
    font-size: 1.15rem;
  }

  th,
  td {
    padding: 6px 9px;
  }

  #description-text {
    margin-top: 1em;
    margin-left: 0;
    color: var(--sam-muted);
    font-size: .75rem;
  }
}