/* ClawPerf: a handful of project-specific touches on top of Material.
   Everything else — nav, search, themes, code blocks — is the theme's job. */

:root {
  --clawperf-accent: #0284c7;
}

/* theme.font: false means we own the stack. Keep it CJK-first, matching the
   diagrams, so Chinese text does not fall back to a Latin-only face. */
:root {
  --md-text-font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC",
                         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                         Helvetica, Arial, sans-serif;
  --md-code-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
                         "Liberation Mono", monospace;
}

body {
  font-family: var(--md-text-font-family);
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #0f172a;
  --md-primary-fg-color--light: #1e293b;
  --md-primary-fg-color--dark: #0b1220;
  --md-accent-fg-color: var(--clawperf-accent);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0b1220;
  --md-primary-fg-color--light: #111c33;
  --md-primary-fg-color--dark: #060b16;
  --md-accent-fg-color: #38bdf8;
}

/* Diagrams: the SVGs are drawn for a light canvas, so give them one in both
   themes, and let the caption sit with the figure instead of floating away. */
.md-content img[src$=".svg"] {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.25rem auto 0;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
}

/* Material renders ![caption](img) as a centred italic caption. */
.md-content .md-figure,
.md-content figure figcaption {
  text-align: center;
  font-size: 0.72rem;
  opacity: 0.75;
}

/* Tables: the reference page is dense, so tighten the rows a little. */
.md-typeset table:not([class]) {
  font-size: 0.72rem;
}

.md-typeset table:not([class]) td:first-child {
  white-space: nowrap;
}

.md-typeset table:not([class]) code {
  white-space: nowrap;
  font-weight: 600;
}

/* Landing page: a slightly wider hero, and cards that line up. */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.6rem;
}

.md-typeset .hero p {
  font-size: 1.05rem;
}

/* Terminal captures: keep long report lines readable. */
.md-typeset pre > code {
  font-size: 0.7rem;
  line-height: 1.55;
}

/* Copy buttons (javascripts/copy.js): Material 9.7 has no implementation of
   its own, so the button is ours and sits in the block's top-right corner. */
.md-typeset .highlight.clawperf-copy-host,
.md-typeset .highlight:has(.clawperf-copy) {
  position: relative;
}

.md-typeset .clawperf-copy {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: var(--md-default-fg-color--lightest);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 125ms, background-color 125ms;
}

.md-typeset .clawperf-copy::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--md-default-fg-color);
  -webkit-mask: var(--md-code-copy-icon) center / 0.9rem no-repeat;
  mask: var(--md-code-copy-icon) center / 0.9rem no-repeat;
}

.md-typeset .highlight:hover .clawperf-copy,
.md-typeset .clawperf-copy:focus {
  opacity: 1;
}

.md-typeset .clawperf-copy:hover {
  background: var(--md-accent-fg-color);
}

.md-typeset .clawperf-copy.is-copied {
  opacity: 1;
  background: var(--md-accent-fg-color);
}

:root {
  /* Material's own content-copy icon path. */
  --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="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12V1Z"/></svg>');
}