:root { color-scheme: light dark; }

/* Toggle button */
.theme-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 99999;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.view-toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: Neuton, serif;
  font-weight: 600;
  font-size: 1em;     /* bigger than body */
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.view-toggle:hover {
  background-color: none;
}
.more-wrap { margin-top: 0.25em; }
.more-content { margin-top: 0.75em; }

/* Base dark background */
html[data-theme="dark"] body {
  background: #0f1115 !important;
}

/* --------- SLEDGEHAMMER DARK MODE ---------
   Ensures all text is visible even if your theme sets dark colors with high specificity.
*/
html[data-theme="dark"] body,
html[data-theme="dark"] body * {
  color: #e8e8e8 !important;
}

/* Prevent light theme background blocks from blinding you */
html[data-theme="dark"] body * {
  background-color: transparent !important;
}

/* Restore link colors (otherwise they become same as text) */
html[data-theme="dark"] a { color: #9ecbff !important; }
html[data-theme="dark"] a:visited { color: #c4b0ff !important; }

/* Code blocks should still look like blocks */
html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] .src,
html[data-theme="dark"] .example {
  background: #151821 !important;
  color: #e8e8e8 !important;
}

/* Tables */
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: rgba(232,232,232,0.25) !important;
}

/* Click-to-reveal email (used in contact block .nil) */
.nil .email-btn{
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: normal;   /* or just remove this line */
  text-decoration: none;
  cursor: pointer;
}

.nil a[href^="mailto:"]{
  text-decoration: none;
}