/* ==========================================================================
   MoneroBox: cypherpunk style variant
   Phosphor-green terminal on near-black, Monero orange as the warning colour,
   a magenta accent for "glitch" details. System monospace fonts only: the
   server's Content-Security-Policy allows no web fonts or third-party files.
   Loaded by mkdocs.cypherpunk.yml after extra.css.
   ========================================================================== */

:root,
[data-md-color-scheme="slate"] {
  --cp-bg:        #07090a;
  --cp-surface:   #0c1110;
  --cp-surface-2: #111a17;
  --cp-line:      #1d3a2c;
  --cp-text:      #b8f5c8;
  --cp-muted:     #6fa585;
  --cp-green:     #39ff88;
  --cp-orange:    #ff7a1a;
  --cp-magenta:   #ff3df2;
  --cp-red:       #ff4d5e;
  --cp-mono: ui-monospace, "JetBrains Mono", "Fira Code", "Cascadia Code",
             "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --md-hue: 150;
  --md-default-bg-color:        var(--cp-bg);
  --md-default-fg-color:        var(--cp-text);
  --md-default-fg-color--light: var(--cp-muted);
  --md-default-fg-color--lighter: #3f6b53;
  --md-default-fg-color--lightest: #1a2c23;
  --md-typeset-color:           var(--cp-text);
  --md-typeset-a-color:         var(--cp-green);
  --md-primary-fg-color:        var(--cp-bg);
  --md-primary-fg-color--light: var(--cp-surface);
  --md-primary-fg-color--dark:  #000;
  --md-primary-bg-color:        var(--cp-green);
  --md-primary-bg-color--light: var(--cp-muted);
  --md-accent-fg-color:         var(--cp-magenta);
  --md-accent-fg-color--transparent: rgba(255, 61, 242, .12);
  --md-code-bg-color:           var(--cp-surface);
  --md-code-fg-color:           var(--cp-text);
  --md-code-hl-color:           rgba(57, 255, 136, .15);
  --md-code-hl-string-color:    #ffd479;
  --md-code-hl-keyword-color:   var(--cp-magenta);
  --md-code-hl-function-color:  #7ad7ff;
  --md-code-hl-comment-color:   #4f7f63;
  --md-code-hl-number-color:    var(--cp-orange);
  --md-code-hl-name-color:      var(--cp-text);
  --md-code-hl-operator-color:  var(--cp-muted);
  --md-code-hl-punctuation-color: var(--cp-muted);
  --md-code-hl-constant-color:  var(--cp-orange);
  --md-code-hl-variable-color:  #9cf5c0;
  --md-code-hl-special-color:   var(--cp-magenta);
  --md-code-hl-generic-color:   var(--cp-muted);
  --md-footer-bg-color:         #040605;
  --md-footer-bg-color--dark:   #020302;
  --md-footer-fg-color:         var(--cp-muted);
  --md-footer-fg-color--light:  var(--cp-muted);
  --md-footer-fg-color--lighter: #3f6b53;
  --md-text-font-family: var(--cp-mono);
  --md-code-font-family: var(--cp-mono);
}

/* -------------------------------------------------------------- base ---- */

body {
  background: var(--cp-bg);
  font-family: var(--cp-mono);
}

.md-typeset {
  font-size: .78rem;
  line-height: 1.7;
}

::selection {
  background: var(--cp-magenta);
  color: #000;
}

/* Faint CRT scanlines over everything; clicks pass through */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, .18) 3px
  );
}

/* ----------------------------------------------------------- header ---- */

.md-header {
  background: rgba(4, 6, 5, .94);
  border-bottom: 1px solid var(--cp-line);
  box-shadow: 0 1px 0 rgba(57, 255, 136, .15), 0 8px 24px rgba(0, 0, 0, .6);
  color: var(--cp-green);
}

/* Swap site name and page title instantly, like a terminal redraw, instead of crossfading */
.md-header__topic { transition: none !important; }

.md-header__topic:first-child {
  font-weight: 700;
  letter-spacing: .08em;
}
.md-header__topic:first-child .md-ellipsis::before {
  content: "root@";
  color: var(--cp-muted);
  font-weight: 400;
}
.md-header__topic:first-child .md-ellipsis::after {
  content: ":~#";
  color: var(--cp-muted);
  font-weight: 400;
}

/* "← atori.tech": back to the start page (overrides/partials/header.html).
   Same size and place as on the /node/ page (.back-home in landing/style.css):
   10px from the top and 16px from the left edge of the window, in px so
   Material's growing rem on wide screens doesn't change it. When the window is
   too narrow for the header's centred content to clear it, that content moves
   right. 156px = 16px + the link's width (at most ~124px) + a gap. */
.md-header .mb-home {
  position: absolute;
  top: 10px;
  left: 16px;
  padding: 3px 10px;
  border: 1px solid var(--cp-magenta);
  color: var(--cp-magenta);
  font: 14px/20px var(--cp-mono);
  white-space: nowrap;
}
.md-header .mb-home:hover,
.md-header .mb-home:focus-visible {
  background: var(--cp-magenta);
  color: var(--cp-bg);
}
.md-header .md-header__inner {
  padding-left: max(.2rem, calc(156px - max(0px, (100vw - 61rem) / 2)));
}
/* Phones: a smaller link (same as on /node/), and the site name without
   "root@" and ":~#" so it still fits beside it */
@media screen and (max-width: 37.5em) {
  .md-header .mb-home { padding: 3px 8px; font-size: 12px; }
  .md-header .md-header__inner { padding-left: 128px; }
  .md-header__title { margin-left: .5rem; }
  .md-header__topic:first-child { letter-spacing: .02em; }
  .md-header__topic:first-child .md-ellipsis::before,
  .md-header__topic:first-child .md-ellipsis::after { content: none; }
}

.md-tabs {
  background: var(--cp-surface);
  border-bottom: 1px solid var(--cp-line);
  color: var(--cp-muted);
}
.md-tabs__link {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: 1;
}
.md-tabs__link::before { content: "./"; color: var(--cp-line); }
.md-tabs__item--active .md-tabs__link,
.md-tabs__link:hover { color: var(--cp-green); }
.md-tabs__item--active .md-tabs__link::before { color: var(--cp-magenta); }

/* Search box: a prompt, not a pill */
.md-search__form {
  background: var(--cp-bg);
  border: 1px solid var(--cp-line);
  border-radius: 0;
}
.md-search__input { color: var(--cp-green); }
.md-search__input::placeholder { color: var(--cp-muted); }
.md-search__output { border-radius: 0; }

/* ------------------------------------------------------ navigation ---- */

.md-nav { font-size: .7rem; }
.md-nav__title { color: var(--cp-muted); text-transform: uppercase; letter-spacing: .1em; }
.md-nav__link { color: var(--cp-muted); }
.md-nav__link:hover,
.md-nav__link:focus { color: var(--cp-green); }
.md-nav__link--active,
.md-nav__item .md-nav__link--active { color: var(--cp-green); }
.md-nav__link--active::before {
  content: "> ";
  color: var(--cp-magenta);
}

/* ---------------------------------------------------------- headings ---- */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--cp-mono);
  color: var(--cp-green);
  letter-spacing: .02em;
}

.md-typeset h1 {
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(57, 255, 136, .45);
  border-bottom: 1px dashed var(--cp-line);
  padding-bottom: .4rem;
}
.md-typeset h1::before { content: "# "; color: var(--cp-magenta); }

.md-typeset h2 {
  font-weight: 700;
  margin-top: 2.2em;
}
.md-typeset h2::before { content: "## "; color: var(--cp-line); }

.md-typeset h3::before { content: "### "; color: var(--cp-line); }
.md-typeset h4::before { content: "#### "; color: var(--cp-line); }

.md-typeset .headerlink { color: var(--cp-line); }
.md-typeset .headerlink:hover,
.md-typeset :target > .headerlink { color: var(--cp-magenta); }

/* ------------------------------------------------------------- links ---- */

.md-typeset a {
  color: var(--cp-green);
  text-decoration: underline;
  text-decoration-color: rgba(57, 255, 136, .35);
  text-underline-offset: 3px;
}
.md-typeset a:hover,
.md-typeset a:focus {
  color: #000;
  background: var(--cp-green);
  text-decoration: none;
}

.md-typeset strong { color: #eafff0; }
.md-typeset hr { border-bottom: 1px dashed var(--cp-line); }

/* -------------------------------------------------------------- code ---- */

.md-typeset code {
  border-radius: 0;
  border: 1px solid var(--cp-line);
  padding: 0 .3em;
  color: #d8ffe4;
}

.md-typeset pre {
  position: relative;
}
.md-typeset pre > code {
  border: 1px solid var(--cp-line);
  border-left: 3px solid var(--cp-green);
  background: var(--cp-surface);
  padding: 1em 1.2em;
  box-shadow: inset 0 0 40px rgba(57, 255, 136, .04);
}

/* Shell blocks get a prompt header bar */
.md-typeset .language-bash.highlight::before,
.md-typeset .language-powershell.highlight::before {
  content: "user@monerobox:~$";
  display: block;
  font-size: .62rem;
  color: var(--cp-muted);
  background: var(--cp-surface-2);
  border: 1px solid var(--cp-line);
  border-bottom: 0;
  padding: .25em 1em;
  letter-spacing: .05em;
}
.md-typeset .language-ini.highlight::before,
.md-typeset .language-json.highlight::before,
.md-typeset .language-text.highlight::before {
  content: "-- file / output --";
  display: block;
  font-size: .62rem;
  color: var(--cp-muted);
  background: var(--cp-surface-2);
  border: 1px solid var(--cp-line);
  border-bottom: 0;
  padding: .25em 1em;
  letter-spacing: .05em;
}

/* Attach the label bar to its block: the gap moves above the bar */
.md-typeset [class*="language-"].highlight::before { margin-top: 1em; }
.md-typeset [class*="language-"].highlight > pre { margin-top: 0; }
.md-typeset [class*="language-"].highlight > pre > code { border-top-color: transparent; }

.md-clipboard { color: var(--cp-muted); }
.md-clipboard:hover,
.md-clipboard:focus { color: var(--cp-magenta); }

.md-typeset kbd {
  background: var(--cp-surface-2);
  border-radius: 0;
  box-shadow: 0 2px 0 var(--cp-line);
  color: var(--cp-green);
}

/* ----------------------------------------------------------- tables ---- */

.md-typeset table:not([class]) {
  border: 1px solid var(--cp-line);
  border-radius: 0;
  background: var(--cp-surface);
  font-size: .7rem;
}
.md-typeset table:not([class]) th {
  background: var(--cp-surface-2);
  color: var(--cp-green);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .64rem;
  border-bottom: 1px solid var(--cp-green);
}
.md-typeset table:not([class]) td {
  border-top: 1px dashed var(--cp-line);
}
.md-typeset table:not([class]) tr:hover {
  background: rgba(57, 255, 136, .05);
  box-shadow: none;
}

/* ------------------------------------------------------- admonitions ---- */

.md-typeset .admonition,
.md-typeset details {
  border-radius: 0;
  border-width: 1px;
  border-left-width: 3px;
  background: var(--cp-surface);
  box-shadow: none;
  font-size: .74rem;
}
.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .68rem;
}
.md-typeset .admonition-title::after,
.md-typeset summary::after { border-radius: 0; }

/* Recolour the admonition kinds used in the guide */
.md-typeset .admonition.danger,
.md-typeset details.danger { border-color: var(--cp-red); }
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary { background: rgba(255, 77, 94, .1); color: var(--cp-red); }
.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before { background-color: var(--cp-red); }

.md-typeset .admonition.warning,
.md-typeset details.warning { border-color: var(--cp-orange); }
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary { background: rgba(255, 122, 26, .1); color: var(--cp-orange); }
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before { background-color: var(--cp-orange); }

.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.question,
.md-typeset details.question { border-color: #3fd0ff; }
.md-typeset .info > .admonition-title,  .md-typeset .info > summary,
.md-typeset .note > .admonition-title,  .md-typeset .note > summary,
.md-typeset .question > .admonition-title, .md-typeset .question > summary {
  background: rgba(63, 208, 255, .08); color: #3fd0ff;
}
.md-typeset .info > .admonition-title::before,  .md-typeset .info > summary::before,
.md-typeset .note > .admonition-title::before,  .md-typeset .note > summary::before,
.md-typeset .question > .admonition-title::before, .md-typeset .question > summary::before {
  background-color: #3fd0ff;
}

.md-typeset .admonition.tip,
.md-typeset details.tip { border-color: var(--cp-green); }
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary { background: rgba(57, 255, 136, .07); color: var(--cp-green); }
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before { background-color: var(--cp-green); }

.md-typeset details.failure { border-color: var(--cp-magenta); }
.md-typeset .failure > summary { background: rgba(255, 61, 242, .08); color: var(--cp-magenta); }
.md-typeset .failure > summary::before { background-color: var(--cp-magenta); }

/* Content tabs */
.md-typeset .tabbed-labels > label {
  font-family: var(--cp-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .66rem;
}

/* ------------------------------------------------- rating badges ---- */

.badge {
  border-radius: 0;
  background: transparent !important;
  border: 1px solid currentColor;
  font-family: var(--cp-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.badge::before { content: "["; }
.badge::after  { content: "]"; }
.badge.easy   { color: var(--cp-green); }
.badge.medium { color: var(--cp-orange); }
.badge.hard   { color: var(--cp-red); }
.badge.tested { color: #3fd0ff; }
.badge.paid   { color: var(--cp-magenta); }

/* ------------------------------------------------ home page banner ---- */

.cp-only { display: block; }

.cp-banner {
  margin: .5rem 0 1.5rem;
  padding: 1rem 0 .6rem;
  border-bottom: 1px dashed var(--cp-line);
  overflow: hidden;
}
/* The figlet art is 80 columns: scale the font so it always fits */
.md-typeset .cp-ascii {
  margin: 0;
  font-size: min(.62rem, calc((100vw - 3rem) / 54));
  line-height: 1.12;
  color: var(--cp-green);
  text-shadow: 0 0 6px rgba(57, 255, 136, .55), 2px 0 0 rgba(255, 61, 242, .35);
  background: none;
  white-space: pre;
}
@media screen and (min-width: 76.25em) {
  .md-typeset .cp-ascii { font-size: .62rem; }
}
/* The banner already says MoneroBox: hide the duplicate page title visually
   on the home page, but keep it for screen readers (the banner is aria-hidden) */
.cp-banner + h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------- footer ---- */

.md-footer,
.md-footer-meta {
  border-top: 1px solid var(--cp-line);
  font-family: var(--cp-mono);
}
.md-copyright::before { content: "/* "; color: var(--cp-line); }
.md-copyright::after  { content: " */"; color: var(--cp-line); }