@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
/* The UnifrakturMaguntia logo font is injected by ascii-logo.js only on
   pages that render the logo, so other pages don't pay for it. */

:root {
  --md-text-font: "JetBrains Mono";
  --md-code-font: "JetBrains Mono";

  /* ASCII logo resolution: smaller cells = more detail (see ascii-logo.js) */
  --kiln-logo-font-size: 0.5rem;
  --kiln-logo-line-height: 1.2;
  /* Size of the plain "Kiln" text shown before/without JS generation */
  --kiln-logo-fallback-font-size: 2.6rem;

  /* Copy-button icon swap timing — single source of truth; the animations
     below and code-copy.js's phase timers both derive from it */
  --kiln-icon-swap-duration: 250ms;

  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-muted: #b0b7c3;
  --color-text-faint: #c4cad4;
  --color-accent: #2563eb;
  --color-accent-transparent: rgba(37, 99, 235, 0.1);
  --color-code-bg: #f5f5f5;
  --color-table-header-bg: #f9fafb;
  --color-shadow: rgba(0, 0, 0, 0.07);

  --md-accent-fg-color: var(--color-accent);
  --md-accent-fg-color--transparent: var(--color-accent-transparent);
}

[data-md-color-scheme="slate"] {
  --color-bg: #1e2028;
  --color-surface: #252830;
  --color-border: #2e3138;
  --color-text-primary: #e2e4e9;
  --color-text-secondary: #9ca3af;
  --color-text-muted: #6b7280;
  --color-text-faint: #4b5563;
  --color-accent: #2563eb;
  --color-accent-transparent: rgba(37, 99, 235, 0.15);
  --color-code-bg: #1a1d24;
  --color-table-header-bg: #1a1d24;
  --color-shadow: rgba(0, 0, 0, 0.25);

  --md-accent-fg-color: var(--color-accent);
  --md-accent-fg-color--transparent: var(--color-accent-transparent);
}

/* Global font */

html,
body,
input,
button,
textarea,
select,
.md-typeset,
.md-header,
.md-nav,
.md-search,
.md-tabs {
  font-family: "JetBrains Mono", monospace !important;
}

/* Background */

body {
  background: var(--color-bg);
}

/* Header */

.md-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}

.md-header__title,
.md-header__topic {
  font-weight: 700;
}

/* Footer */

.md-footer {
  display: none !important;
}

/* Search */

.md-search__form {
  background: var(--color-bg);
  border: none;
  border-radius: 4px;
  box-shadow: none;
}

.md-search__input {
  font-size: 0.72rem;
}

/* Sidebar */

.md-sidebar {
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.md-nav__title {
  color: var(--color-text-primary);
  font-weight: 700;
  font-size: 0.74rem;
  box-shadow: none !important;
  border: none !important;
}

.md-nav--primary .md-nav__title {
  background: transparent !important;
}

/* Section titles when expanded — match the collapsed grey uppercase label */

.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__title {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.65rem !important;
  color: var(--color-text-faint) !important;
  font-weight: 700 !important;
  padding-top: 0.8rem !important;
  box-shadow: none !important;
}

.md-nav__link {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  transition: color 150ms ease;
}

.md-nav__link:hover,
.md-nav__link--active {
  color: var(--color-accent);
}

/* Right table of contents */

.md-sidebar--secondary .md-nav__link {
  font-size: 0.70rem;
}

/* Content */

.md-content {
  max-width: 900px;
}

.md-typeset {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}

.md-typeset h1 {
  font-size: 1.8rem;
  font-weight: 700;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.4rem;
}

/* Page subtitle: first paragraph right after h1 */
.md-typeset h1 + p {
  color: var(--color-text-faint);
  font-size: 0.76rem;
  margin-top: 0;
  margin-bottom: 1.8rem;
  line-height: 1.5;
}

.md-typeset h2 {
  font-size: 1.2rem;
  font-weight: 700;
}

.md-typeset h3 {
  font-size: 0.95rem;
  font-weight: 700;
}

.md-typeset p,
.md-typeset li,
.md-typeset td,
.md-typeset th {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

/* Links */

.md-typeset a {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 150ms ease;
}

.md-typeset a:hover {
  opacity: 0.75;
}

/* Home page ASCII art title (generated by javascripts/ascii-logo.js).
   Without the --generated class the pre shows its plain-text fallback at
   title size, so no-JS visitors and the pre-generation flash still get a
   readable heading. */

.md-typeset pre.kiln-ascii {
  color: var(--color-text-faint) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: var(--kiln-logo-fallback-font-size) !important;
  line-height: var(--kiln-logo-line-height) !important;
  margin: 0 auto 1.5rem !important;
  width: fit-content !important;
  max-width: 100% !important;
  overflow: hidden !important;
  user-select: none;
  cursor: default;
}

.md-typeset pre.kiln-ascii.kiln-ascii--generated {
  font-size: var(--kiln-logo-font-size) !important;
}

/* The homepage has no title heading — the ASCII logo is the title */
.md-content__inner:has(.kiln-ascii) > h1 {
  display: none;
}

/* Hide "Copied to clipboard" dialog — replaced by the checkmark below,
   flashed on the copy button by javascripts/code-copy.js */

[data-md-component="dialog"] {
  display: none !important;
}

/* Copy-button checkmark: while code-copy.js holds the --copied class, the
   ::after icon (a masked var) becomes a check, in the button's normal
   color. Mask swaps are discrete, so code-copy.js stages the transitions:
   the check animates in on click; on restore it first fades out
   (--leaving, fill-mode holds it invisible), then the copy icon animates
   back in (--restoring). */
.md-code__button--copied::after {
  --md-code-copy-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
}

.md-code__button--copied::after,
.md-code__button--restoring::after {
  animation: kiln-icon-in var(--kiln-icon-swap-duration) ease;
}

.md-code__button--leaving::after {
  animation: kiln-icon-out var(--kiln-icon-swap-duration) ease forwards;
}

@keyframes kiln-icon-in {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
}

@keyframes kiln-icon-out {
  to {
    opacity: 0;
    transform: scale(0.55);
  }
}

/* Code blocks */

.md-typeset pre,
.md-typeset pre code,
.md-typeset code,
.md-typeset .highlight,
.md-typeset .highlight pre,
.md-typeset .highlight code,
code,
pre,
kbd,
samp,
tt {
  font-family: "JetBrains Mono", monospace !important;
}

.md-typeset pre,
.md-typeset pre code,
.md-typeset .highlight pre,
.md-typeset .highlight code {
  font-size: 0.72rem !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-variant-ligatures: none !important;
  font-feature-settings: "liga" 0, "calt" 0;
}

.md-typeset code {
  background: var(--color-code-bg);
  border-radius: 3px;
}

.md-typeset pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: none;
}

.ascii-diagram {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow-x: visible !important;
  white-space: pre !important;
  font-family: "JetBrains Mono", monospace !important;
}

/* Tables */

.md-typeset__table {
  width: 100%;
}

.md-typeset__table table:not([class]) {
  width: 100%;
  table-layout: fixed;
  display: table;
}

.md-typeset table:not([class]) {
  width: 100%;
  border: 1px solid var(--color-border);
}

.md-typeset table:not([class]) th {
  padding: 0.55rem 0.8rem;
  background: var(--color-table-header-bg);
  color: var(--color-text-muted);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  border-bottom: 2px solid var(--color-border);
}

.md-typeset table:not([class]) td {
  padding: 0.6rem 0.8rem;
}

/* Card Blocks */

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.5rem;
}

/* Written as `.md-typeset a.home-card` because the generic `.md-typeset a`
   link rule above otherwise outranks a bare `.home-card` by specificity,
   replacing the card transitions with the link opacity fade and dimming
   the whole card on hover. */
.md-typeset a.home-card {
  display: block;
  min-height: 6rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  text-decoration: none !important;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.md-typeset a.home-card:hover {
  opacity: 1; /* cancel the generic link hover fade */
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--color-shadow);
}

.home-card-title {
  display: block;
  color: var(--color-text-primary);
  font-weight: 700;
  margin-bottom: 0.5rem;
  transition: color 200ms ease;
}

.home-card-text {
  display: block;
  color: var(--color-text-muted);
  line-height: 1.6;
  transition: color 200ms ease;
}

.home-card:hover .home-card-title {
  color: var(--color-accent);
}

.home-card:hover .home-card-text {
  color: var(--color-text-secondary);
}

/* Homepage attribution line, pinned to the bottom of the page.

   Material's .md-main flex-grows to fill the viewport, but that slack
   space normally sits below the content column. On the homepage only
   (gated by :has(.kiln-ascii)) the chain down to the article is made to
   stretch through it, so the attribution's margin-top:auto sinks it to
   the page bottom. Flex sizing is used instead of percentage heights,
   which don't resolve against flex-grown ancestors. */

.md-main:has(.kiln-ascii) {
  display: flex;
  flex-direction: column;
}

.md-main__inner:has(.kiln-ascii) {
  flex: 1;
}

.md-content:has(.kiln-ascii) {
  display: flex;
  flex-direction: column;
}

.md-content:has(.kiln-ascii) .md-content__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.md-typeset .home-attribution {
  text-align: center;
  color: var(--color-text-faint);
  font-size: 0.7rem;
  margin-top: auto;   /* sink to the bottom of the stretched column */
  padding-top: 2rem;  /* minimum gap to the cards when content is tall */
}

.md-typeset .home-attribution a {
  color: var(--color-text-muted);
  transition: color 200ms ease;
}

.md-typeset .home-attribution a:hover {
  color: var(--color-accent);
  opacity: 1; /* cancel the generic link hover fade */
}

/* Scroll buttons */

.scroll-buttons {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  gap: 0.4rem;
  z-index: 1000;
  transition: opacity 150ms ease;
}

.scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.scroll-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.scroll-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--color-shadow);
}

/* Sticky sidebar title — transparent so it matches sidebar background */

.md-sidebar--primary .md-nav--primary > .md-nav__title,
.md-sidebar--secondary .md-nav__title {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: var(--color-bg) !important;
}

.sidebar-title-fade {
  position: sticky;
  height: 20px;
  margin-bottom: -20px;
  background: linear-gradient(to bottom, var(--color-bg), transparent);
  pointer-events: none;
  z-index: 9;
}

.scroll-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Register cards */

.register-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1rem 0 1.5rem;
}

.register-card {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
}

.register-name {
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}

.register-aliases {
  color: var(--color-text-faint);
  font-size: 0.65rem;
  margin-bottom: 0.35rem;
}

.register-desc {
  color: var(--color-text-muted);
  font-size: 0.68rem;
  line-height: 1.5;
}

/* Top-level nav items — grey uppercase section labels (collapsed state) */

.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem !important;
  color: var(--color-text-faint) !important;
  font-weight: 700;
  margin-top: 0.6rem;
}

.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link:hover {
  color: var(--color-text-muted) !important;
}

.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link .md-nav__icon {
  color: var(--color-border);
}

/* Narrow screens */

@media screen and (max-width: 760px) {
  .home-grid {
    grid-template-columns: 1fr;
  }

  .register-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}