/* 6umi.net fonts not covered by theme.font: headings and Japanese. */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=BIZ+UDPGothic:wght@400;700&display=swap");

/*
 * Colours of 6umi.net (repo 6umi: Nav/Footer #082828, main #004040, text
 * #f0f0f0, accent #ff4466 -- krkn magenta-red, src/lib/theme.ts ACCENT;
 * #ff8080 is 6umi's error colour, not its accent), applied through the
 * theme's documented custom palette: mkdocs.yml sets primary/accent to "custom" on the slate scheme and
 * these variables fill them in. No template is overridden.
 */
[data-md-color-scheme="slate"] {
  --md-hue: 180;

  --md-default-bg-color: #004040;
  --md-default-fg-color: #f0f0f0;
  --md-default-fg-color--light: rgba(240, 240, 240, 0.72);
  --md-default-fg-color--lighter: rgba(240, 240, 240, 0.4);
  --md-default-fg-color--lightest: rgba(240, 240, 240, 0.12);

  --md-primary-fg-color: #082828;
  --md-primary-fg-color--light: #002828;
  --md-primary-fg-color--dark: #001010;
  --md-primary-bg-color: #f0f0f0;
  --md-primary-bg-color--light: rgba(240, 240, 240, 0.72);

  /*
   * The theme paints hovers, the current page and more in the accent, where
   * 6umi.net uses it only in points. Keeping the theme's own uses and dulling
   * the colour instead (#ff4466 at 78% saturation, same hue, lightness 60%)
   * keeps it from shouting at text size. 60% saturation came out pale and
   * pinkish, so: 78% saturation at a touch more lightness. Decided 2026-10-07.
   */
  --md-accent-fg-color: #e94967;
  --md-accent-fg-color--transparent: rgba(233, 73, 103, 0.1);

  /* Links are sw cyan (6umi's link colour) and turn white on hover. */
  --md-typeset-a-color: #7ab8b8;

  --md-code-bg-color: #002828;
  --md-code-fg-color: #f0f0f0;

}

/*
 * The modern variant ignores the primary and footer colour variables: the
 * header is a translucent page background and the footer is the page
 * background plus a light overlay. 6umi.net uses one solid #082828 for its
 * Nav and Footer, so set it on the elements. These are the theme's class
 * names, not template overrides; re-check them when upgrading zensical.
 */
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-footer,
[data-md-color-scheme="slate"] .md-footer-meta {
  background-color: #082828;
}

/*
 * Fonts as on 6umi.net: Inter for text and JetBrains Mono for code (set in
 * theme.font), Space Grotesk for headings, BIZ UDPGothic for every Japanese
 * character. The font variables are the theme's own; the heading rule is not.
 */
:root:root {
  --md-text-font: "Inter", "BIZ UDPGothic";
  --md-code-font: "JetBrains Mono", "BIZ UDPGothic";
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Space Grotesk", "BIZ UDPGothic", ui-sans-serif, sans-serif;
}

/*
 * Page history appended by gitrep, and the home page's Recent changes in the
 * same style (src/gitrep/cli.py: add_history, recent_changes).
 */
.md-typeset .gitrep-history {
  margin-top: 3em;
  padding-top: 0.8em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  font-size: 0.75em;
}

.md-typeset .gitrep-history p {
  margin: 0 0 0.4em;
}

.md-typeset .gitrep-history ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-typeset .gitrep-history li {
  margin: 0;
}

/*
 * The current heading in "On this page" takes the link colour by default,
 * while the current page in the sidebar takes the accent. Same thing, same
 * colour.
 */
.md-nav--secondary .md-nav__link--active {
  color: var(--md-accent-fg-color);
}

/* Links in prose turn white on hover (6umi's rule), not accent: the
 * accent on a whole run of text is too much. The theme's hover rule reads
 * the accent variable, so it is redefined on the hovered link itself. */
.md-typeset a:is(:hover, :focus),
.md-typeset a:is(:hover, :focus) code {
  --md-accent-fg-color: var(--md-default-fg-color);
  --md-accent-fg-color--transparent: var(--md-default-fg-color--lightest);
}

/* The tabs: the current one and a hovered one in the accent, like the
 * current page in the sidebar. The theme only changes their opacity. */
.md-tabs__item--active .md-tabs__link,
.md-tabs__link:is(:hover, :focus) {
  color: var(--md-accent-fg-color);
}

/* The current tab's underline in the accent too; the theme draws it in the
 * text colour. */
.md-tabs__item--active {
  border-bottom-color: var(--md-accent-fg-color);
}

/*
 * "Continue reading" under each excerpt, as a 6umi.net button: a white
 * frame on the page colour that fills white on hover, text in the mono face
 * the site uses for buttons and labels, corners 4px.
 */
.md-post--excerpt .md-post__action > a {
  display: inline-block;
  padding: 0.4em 1.2em;
  border: 1px solid var(--md-default-fg-color);
  border-radius: 4px;
  color: var(--md-default-fg-color);
  font-family: var(--md-code-font-family);
  font-size: 0.8em;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.md-post--excerpt .md-post__action > a:is(:hover, :focus) {
  background-color: var(--md-default-fg-color);
  color: #002020;
}

/*
 * Post titles in a site's listing are h2 links with the page's text colour,
 * so they read as bold text rather than as links to articles. Mark each with
 * a document icon (Zensical's bundled lucide/file-text, copied to post.svg)
 * drawn through a mask so it takes the link colour, hover included. The
 * selector is the theme's blog excerpt markup; re-check it when upgrading.
 *
 * The pages listed in the sidebar below a tab (spec, docs; posts are not in
 * the nav) get the same icon, so a page and a post look alike wherever they
 * are listed. Level 0 holds the tabs themselves, which stay plain. The
 * theme repeats the active page as a <label> in the drawer, so both get it;
 * the "On this page" headings nested in the drawer are excluded.
 */
.md-post--excerpt .md-post__content > h2 > a.toclink {
  color: var(--md-default-fg-color); /* a heading, white like the others */
}

.md-post--excerpt .md-post__content > h2 > a.toclink::before,
.md-nav--primary .md-nav[data-md-level]:not([data-md-level="0"])
  > .md-nav__list > .md-nav__item:not(.md-nav__item--nested)
  > .md-nav__link:not(.md-nav__container) > .md-ellipsis::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.35em;
  vertical-align: -0.1em;
  background-color: currentColor;
  -webkit-mask: url("post.svg") no-repeat center / contain;
  mask: url("post.svg") no-repeat center / contain;
}

/*
 * Pictures in a page: screenshots often share the page background, so give
 * each a faint edge and a soft shadow to keep it from sinking in. Quiet on
 * purpose. Markdown puts an image inside a paragraph; the theme's own images
 * (logo, icons) are not in one.
 */
.md-typeset p > img {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0, 16, 16, 0.45);
}

/*
 * Section headings in a page: an accent edge on the left, no fill. A darker
 * panel (as on 6umi.net's plan cards) made each heading a box that stood
 * out from the text, and #002828 is also the code block colour. Only the
 * page's own h2s: the post titles in a listing are h2s too, but nested
 * inside article.md-post, so the child combinator leaves them out. A
 * listing page wraps its own text in header.md-typeset, hence the second
 * selector.
 */
.md-content__inner.md-typeset > h2,
.md-content__inner > header.md-typeset > h2 {
  padding-left: 0.6em;
  border-left: 3px solid var(--md-accent-fg-color);
}

/*
 * The date above each post in a listing, as 6umi.net's section kickers
 * (.text-label, "your ID"): small, in the plain text face (Inter), in the
 * accent.
 */
.md-post--excerpt .md-post__meta time {
  color: var(--md-accent-fg-color);
  font-family: var(--md-text-font-family);
  font-size: 0.55rem;
  letter-spacing: 0.025em;
}

/* Diagrams take the link teal on the code background, not the accent: a
 * whole diagram outlined in the accent reads as an alert. The theme sets
 * these on `:root > *`, so the same selector is needed to win. */
:root > * {
  --md-mermaid-node-fg-color: var(--md-typeset-a-color);
  --md-mermaid-node-bg-color: var(--md-code-bg-color);
}