/* bitwiz on Zensical's classic theme.
   One bold element: the bw mark (green on black). Everything else is ink, grey and white.
   Green has two jobs only: links (darker green on white) and "current" (the active-tab line). */

/* ---- Palette ----------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --bw-ink: #111417;            /* headings, current tab, site name */
  --bw-body: #2b2f34;           /* running text */
  --bw-ink-2: #5f666e;          /* secondary text, inactive tabs */
  --bw-ink-3: #8a9099;          /* icons, hints */
  --bw-rule: #e6e8eb;
  --bw-field: #f3f4f5;
  --bw-green: #00804a;          /* links, 5.0:1 on white */
  --bw-signal: #00c46a;         /* current-tab line, focus ring */
  --bw-amber: #8a6400;
  --md-default-fg-color: var(--bw-ink);
  --md-default-fg-color--light: var(--bw-ink-2);
  --md-default-fg-color--lighter: var(--bw-ink-3);
  --md-default-fg-color--lightest: var(--bw-rule);
  --md-default-bg-color: #ffffff;
  --md-typeset-color: var(--bw-body);
  --md-code-bg-color: #f6f7f8;
  --md-code-fg-color: #2b2f34;
  --md-typeset-a-color: var(--bw-green);
  --md-accent-fg-color: #005c34;
  --md-footer-bg-color: #ffffff;
  --md-footer-bg-color--dark: #ffffff;
  --md-footer-fg-color: var(--bw-ink);
  --md-footer-fg-color--light: var(--bw-ink-2);
  --md-footer-fg-color--lighter: var(--bw-ink-3);
  /* syntax: one hue for strings, amber-brown for numbers (never red: red reads as a violation) */
  --md-code-hl-keyword-color: #111417;
  --md-code-hl-number-color: #7a5c00;
  --md-code-hl-constant-color: #7a5c00;
  --md-code-hl-string-color: #00804a;
  --md-code-hl-comment-color: #8a9099;
  --md-code-hl-function-color: #2b2f34;
  --md-code-hl-name-color: #2b2f34;
  --md-code-hl-operator-color: #5f666e;
  --md-code-hl-punctuation-color: #5f666e;
  --md-code-hl-special-color: #7a5c00;
  --md-code-hl-variable-color: #2b2f34;
  --md-code-hl-generic-color: #5f666e;
}
[data-md-color-scheme="slate"] {
  --md-hue: 210;
  --bw-ink: #ededee;
  --bw-body: #c9cdd2;
  --bw-ink-2: #9aa1a9;
  --bw-ink-3: #6c737b;
  --bw-rule: #23272c;
  --bw-field: #16191c;
  --bw-green: #4ee6a0;
  --bw-signal: #00ff88;
  --bw-amber: #e0b45c;
  --md-default-fg-color: var(--bw-ink);
  --md-default-fg-color--light: var(--bw-ink-2);
  --md-default-fg-color--lighter: var(--bw-ink-3);
  --md-default-fg-color--lightest: var(--bw-rule);
  --md-default-bg-color: #0d0f11;
  --md-typeset-color: var(--bw-body);
  --md-code-bg-color: #15181b;
  --md-code-fg-color: #c9cdd2;
  --md-typeset-a-color: var(--bw-green);
  --md-accent-fg-color: #8dffc9;
  --md-footer-bg-color: #0d0f11;
  --md-footer-bg-color--dark: #0d0f11;
  --md-footer-fg-color: var(--bw-ink);
  --md-footer-fg-color--light: var(--bw-ink-2);
  --md-footer-fg-color--lighter: var(--bw-ink-3);
  --md-code-hl-keyword-color: #ededee;
  --md-code-hl-number-color: #e0b45c;
  --md-code-hl-constant-color: #e0b45c;
  --md-code-hl-string-color: #4ee6a0;
  --md-code-hl-comment-color: #6c737b;
  --md-code-hl-function-color: #c9cdd2;
  --md-code-hl-name-color: #c9cdd2;
  --md-code-hl-operator-color: #9aa1a9;
  --md-code-hl-punctuation-color: #9aa1a9;
  --md-code-hl-special-color: #e0b45c;
  --md-code-hl-variable-color: #c9cdd2;
  --md-code-hl-generic-color: #9aa1a9;
}
.md-typeset .highlight :is(.k, .kd, .kn, .kr, .kt, .kc) { font-weight: 600; }

/* ---- Header and tabs: the page's own colour, one hairline, no shadow ---------------------- */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--md-default-bg-color);
  --md-primary-fg-color--light: var(--md-default-bg-color);
  --md-primary-fg-color--dark: var(--md-default-bg-color);
  --md-primary-bg-color: var(--bw-ink);
  --md-primary-bg-color--light: var(--bw-ink-2);
}
[data-md-color-accent="custom"] { --md-accent-fg-color--transparent: rgba(0, 196, 106, 0.1); }
.md-header, .md-header--shadow { box-shadow: none; }
.md-tabs { border-bottom: 1px solid var(--bw-rule); }
.md-header__button.md-logo img { height: 1.4rem; border-radius: 0.3rem; }
@media screen and (max-width: 76.234375em) { .md-header__button.md-logo { display: inline-block; margin-left: 0; padding-left: 0; } }
.md-header__topic:first-child { font-family: var(--md-code-font-family); font-weight: 600; font-size: 0.85rem; color: var(--bw-ink); }
/* the name stays; the theme's swap to the page title on scroll goes */
.md-header__title--active .md-header__topic:first-child { opacity: 1; transform: none; pointer-events: auto; z-index: 0; }
.md-header__topic + .md-header__topic { display: none; }
.md-header__option .md-header__button, label.md-header__button[for="__search"] { color: var(--bw-ink-3); }
.md-header__option .md-header__button:hover { color: var(--bw-ink); }
.md-tabs__link { opacity: 1; color: var(--bw-ink-2); font-weight: 500; font-size: 0.75rem; margin-top: 0.35rem; padding-bottom: 0.55rem; }
.md-tabs__link--active, .md-tabs__item--active .md-tabs__link, .md-tabs__link:hover { color: var(--bw-ink); }
.md-tabs__item--active .md-tabs__link { box-shadow: inset 0 -2px 0 var(--bw-signal); }

/* Search: a quiet field spanning exactly the "On this page" column, toggle directly to its left.
   The repository slot is empty (no public repo). */
.md-header__source { display: none; }
.md-search__button { background: var(--bw-field); color: var(--bw-ink-3); border: 1px solid var(--bw-rule); box-shadow: none; }
.md-search__button::after { background: transparent; color: var(--bw-ink-3); border: 1px solid var(--bw-rule); box-shadow: none; }
@media screen and (min-width: 60em) {
  .md-search { width: 11.7rem; }
  .md-search__button { width: 100%; }
}

/* ---- One reading column on every page ---------------------------------------------------- */
/* Tabs are the navigation: the left column keeps its width on desktop but shows nothing
   (the phone drawer still lists everything). Pages without "On this page" keep that space too. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-sidebar__scrollwrap { visibility: hidden; }
  .md-sidebar--secondary[hidden] ~ .md-content:not(.md-content--post) { margin-right: 12.5rem; }
}

/* ---- Type --------------------------------------------------------------------------------- */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { color: var(--bw-ink); }
.md-typeset h1 { font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.md-typeset h2 { font-weight: 620; letter-spacing: -0.01em; }
.md-typeset h3 { font-weight: 600; }
.md-typeset hr { border-bottom-color: var(--bw-rule); }
.bw-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Articles list ------------------------------------------------------------------------ */
.md-post--excerpt { margin-bottom: 2.4rem; }
.md-post--excerpt .md-post__header { margin-bottom: 0.2rem; }
.md-post--excerpt .md-post__content h2 { margin: 0 0 0.4rem; font-size: 1.25em; }
.md-post--excerpt .md-post__content h2 a { color: var(--bw-ink); }
.md-post--excerpt .md-post__content h2 a:hover { color: var(--md-typeset-a-color); }
.md-post--excerpt .md-post__content p { margin: 0; color: var(--bw-ink-2); }

/* Post date line above the title on narrow screens, where the metadata column is hidden. */
.bw-post-meta { display: none; margin: 0 0 0.4rem; color: var(--bw-ink-2); font-size: 0.7rem; }
.bw-post-meta span::before { content: ", "; }
@media screen and (max-width: 76.234375em) { .bw-post-meta { display: block; } }

/* ---- Tags: light chips ---------------------------------------------------------------------- */
.md-typeset .md-tag { background: transparent; border: 1px solid var(--bw-rule); color: var(--bw-ink-2); font-weight: 500; }
.md-typeset .md-tag[href]:hover { border-color: var(--bw-ink-3); color: var(--bw-ink); background: transparent; }

/* ---- Footer: same sheet, one hairline ----------------------------------------------------- */
.md-footer-meta { border-top: 1px solid var(--bw-rule); }
.md-copyright { color: var(--bw-ink-2); font-size: 0.62rem; }
.md-copyright a { color: inherit; }
.md-social__link { color: var(--bw-ink-3); }
.md-social__link:hover { color: var(--bw-ink); }
.md-social__link svg { max-height: 0.75rem; }

/* ---- Round 4 (reviewer pass 2) --------------------------------------------------------- */
/* Mark lockup: tile and name read as one unit; the tile keeps an edge on the dark page. */
[dir=ltr] .md-header__title, .md-header__title { margin-left: 0.5rem; }
.md-header__button.md-logo { margin-right: 0; padding-right: 0; }
[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-nav__button.md-logo img { box-shadow: 0 0 0 1px #2a2e33; }
.md-nav__button.md-logo img { border-radius: 0.3rem; }
.md-nav--primary > .md-nav__title { font-family: var(--md-code-font-family); font-weight: 600; }
@media screen and (max-width: 76.234375em) {
  label.md-header__button[for="__drawer"] { order: -1; margin-left: 0.2rem; }
  [dir=ltr] .md-header__title, .md-header__title { margin-left: 0.4rem; }
}
/* Left column: nothing on desktop (the nested nav sets its own visibility, so remove the box). */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-sidebar__scrollwrap { display: none; }
}
/* Current tab: the green line sits on the hairline under the tabs, like the calculator's tabs. */
.md-tabs__item { position: relative; }
.md-tabs__item--active .md-tabs__link { box-shadow: none; }
.md-tabs__item--active::after {
  content: ""; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0; height: 2px; background: var(--bw-signal);
}
.md-tabs { overflow: visible; }
/* Copy buttons appear when you reach for them (the painted box is the theme's .md-code__nav). */
.md-typeset .md-code__nav { background: none; box-shadow: none; opacity: 0; transition: opacity 120ms; }
.md-typeset pre:hover .md-code__nav, .md-typeset .md-code__nav:focus-within { opacity: 1; }
@media (hover: none) { .md-typeset .md-code__nav { opacity: 1; } }
/* "On this page" stays quieter than the article. */
.md-nav--secondary .md-nav__link { color: var(--bw-ink-2); }
.md-nav--secondary .md-nav__link--active, .md-nav--secondary .md-nav__link:hover { color: var(--bw-ink); }
/* Post column: "Back to index", its rule and the date line share one left edge. */
.md-post__back { margin-left: 0.6rem; }
.md-post__back .md-nav__title { padding-left: 0; }
/* The last "On this page" entry is never cut off at the bottom of the window. */
.md-sidebar--secondary .md-sidebar__scrollwrap { padding-bottom: 2rem; }

/* ---- Width and size (Nov 4, his calls: fluid on large screens, text not bigger there) ---- */
/* The theme scales the whole base size up on large screens (20 -> 22 -> 24 px). Here it stays at
   20 px, so text is the same size on a laptop and a large monitor. The frame is fluid: header,
   tabs, sidebars and content run to the window edges with a margin, and the content column takes
   everything between the two sidebars. */
@media screen and (min-width: 100em) { html { font-size: 125%; } }
@media screen and (min-width: 125em) { html { font-size: 125%; } }
.md-grid { max-width: none; }
@media screen and (min-width: 76.25em) { .md-grid { margin-left: 1.2rem; margin-right: 1.2rem; } }

/* ---- Series and tags in the post column; previous/next parts at the end ------------------- */
.bw-series { margin-top: 0.8rem; }
.bw-series .md-post__title { font-weight: 600; color: var(--bw-ink); font-size: 0.7rem; }
.bw-series .md-nav__link { display: flex; align-items: baseline; gap: 0.45rem; margin-top: 0.35em; color: var(--bw-ink-2); }
.bw-series .md-nav__link:hover { color: var(--bw-ink); }
.bw-series .md-nav__link--active { color: var(--bw-ink); font-weight: 600; }
.bw-series__n { flex: none; width: 0.7rem; font-family: var(--md-code-font-family); font-size: 0.6rem; color: var(--bw-ink-3); text-align: right; }
.bw-series .md-nav__link--active .bw-series__n { color: var(--bw-signal); }
.bw-series__t { white-space: normal; line-height: 1.35; }
.bw-post-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 1rem 0 0 0.6rem; }
.bw-post-tags .md-tag { font-size: 0.6rem; padding: 0.1rem 0.45rem; border: 1px solid var(--bw-rule); border-radius: 1rem; color: var(--bw-ink-2); }
.bw-post-tags .md-tag:hover { color: var(--bw-ink); border-color: var(--bw-ink-3); }
/* Posts carry their tags in the column (which the theme moves below the post on phones), so the
   end-of-post chips go; on phones the date is already above the title, so the column's copy goes. */
.md-content--post .md-content__inner > nav.md-tags { display: none; }
@media screen and (max-width: 76.234375em) { .md-sidebar--post .md-post__meta:not(.bw-series) { display: none; } }
.bw-series-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--bw-rule); }
.md-typeset a.bw-series-nav__link { display: flex; flex-direction: column; gap: 0.15rem; color: var(--bw-ink); }
.bw-series-nav__link--next { grid-column: 2; text-align: right; }
.bw-series-nav__label { font-size: 0.7em; color: var(--bw-ink-3); }
.bw-series-nav__title { font-weight: 600; }
.md-typeset .bw-series-nav__link:hover .bw-series-nav__title { color: var(--md-typeset-a-color); }
@media screen and (max-width: 44.984375em) { .bw-series-nav { grid-template-columns: 1fr; } .bw-series-nav__link--next { grid-column: 1; text-align: left; } }