/* Every colour here comes from a Material variable or is defined once per
 * scheme below. Nothing is hardcoded in a rule, because each rule renders on
 * both a white page and a slate one and a literal hex can only ever suit one
 * of them. */

:root {
  --nedkit-cross: #d32f2f;
  --nedkit-card-bg: var(--md-default-bg-color);
  --nedkit-card-border: var(--md-default-fg-color--lightest);
  --nedkit-card-shadow: rgba(0, 0, 0, 0.08);
  --nedkit-card-shadow-hover: rgba(211, 47, 47, 0.18);
  --nedkit-tape: rgba(211, 47, 47, 0.08);
}

[data-md-color-scheme="slate"] {
  /* The bright red reads as an alarm against a dark page, so it is lifted
   * and desaturated for the slate scheme. */
  --nedkit-cross: #ff8a80;
  --nedkit-card-bg: var(--md-code-bg-color);
  --nedkit-card-border: var(--md-default-fg-color--lightest);
  --nedkit-card-shadow: rgba(0, 0, 0, 0.4);
  --nedkit-card-shadow-hover: rgba(255, 138, 128, 0.22);
  --nedkit-tape: rgba(255, 138, 128, 0.1);
}

/* --- the command cards on the front page -------------------------------- */

/* A row of cards, one per command. Falls back to a single column on a phone
 * without a media query, because auto-fit collapses the tracks on its own. */
.nedkit-kit {
  display: grid;
  /* Material sets the root font size to 125%, so 1rem is 20px here, not 16.
   * 10rem is the widest track that still fits all three cards on one row in
   * the content column; anything larger orphans the third onto its own line.
   * min(100%, ...) keeps a single card from overflowing a phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.nedkit-kit > * {
  background: var(--nedkit-card-bg);
  border: 1px solid var(--nedkit-card-border);
  border-radius: 0.6rem;
  box-shadow: 0 2px 6px var(--nedkit-card-shadow);
  padding: 1rem 1.1rem 1.1rem;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.nedkit-kit > *:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--nedkit-card-shadow-hover);
}

/* Respect a reader who has asked the OS for less movement. */
@media (prefers-reduced-motion: reduce) {
  .nedkit-kit > * {
    transition: none;
  }
  .nedkit-kit > *:hover {
    transform: none;
  }
}

.nedkit-kit h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  line-height: 1.4;
}

.nedkit-kit p:last-child {
  margin-bottom: 0;
}

/* The icon at the top of each card. .twemoji is what pymdownx.emoji emits. */
.nedkit-kit .twemoji {
  height: 1.6rem;
  width: 1.6rem;
  display: block;
  margin-bottom: 0.5rem;
}

.nedkit-kit .twemoji svg {
  fill: var(--nedkit-cross);
}

/* --- admonition icons ---------------------------------------------------- */

/* Material builds an admonition icon from a mask image, so overriding the
 * variable swaps the glyph and leaves each flavour its own colour: a warning
 * stays orange, a note stays blue. The glyph is Material Design Icons
 * "bandage", URL-encoded.
 *
 * The example flavour keeps its own icon. Those toggles hold macro bodies to
 * copy rather than advice, and they should not look like advice. */
:root {
  --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22m17.73%2012%203.98-3.96c.39-.39.39-1.04%200-1.41l-4.34-4.34c-.37-.39-1.02-.39-1.41%200L12%206.27%208%202.29a1.001%201.001%200%200%200-1.41%200L2.25%206.63c-.39.37-.39%201.02%200%201.41L6.23%2012l-3.98%204c-.39.39-.39%201%200%201.41l4.34%204.34c.41.39%201.02.39%201.41%200l4-3.98%203.96%203.98c.2.2.45.29.71.29s.51-.1.71-.29l4.34-4.34c.39-.41.39-1.02%200-1.41zM12%209a1%201%200%200%201%201%201%201%201%200%200%201-1%201%201%201%200%200%201-1-1%201%201%200%200%201%201-1m-4.71%201.96L3.66%207.34l3.63-3.63%203.62%203.62zM10%2013a1%201%200%200%201-1-1%201%201%200%200%201%201-1%201%201%200%200%201%201%201%201%201%200%200%201-1%201m2%202a1%201%200%200%201-1-1%201%201%200%200%201%201-1%201%201%200%200%201%201%201%201%201%200%200%201-1%201m2-4a1%201%200%200%201%201%201%201%201%200%200%201-1%201%201%201%200%200%201-1-1%201%201%200%200%201%201-1m2.66%209.34-3.63-3.62%203.63-3.63%203.62%203.62z%22/%3E%3C/svg%3E');
  --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22m17.73%2012%203.98-3.96c.39-.39.39-1.04%200-1.41l-4.34-4.34c-.37-.39-1.02-.39-1.41%200L12%206.27%208%202.29a1.001%201.001%200%200%200-1.41%200L2.25%206.63c-.39.37-.39%201.02%200%201.41L6.23%2012l-3.98%204c-.39.39-.39%201%200%201.41l4.34%204.34c.41.39%201.02.39%201.41%200l4-3.98%203.96%203.98c.2.2.45.29.71.29s.51-.1.71-.29l4.34-4.34c.39-.41.39-1.02%200-1.41zM12%209a1%201%200%200%201%201%201%201%201%200%200%201-1%201%201%201%200%200%201-1-1%201%201%200%200%201%201-1m-4.71%201.96L3.66%207.34l3.63-3.63%203.62%203.62zM10%2013a1%201%200%200%201-1-1%201%201%200%200%201%201-1%201%201%200%200%201%201%201%201%201%200%200%201-1%201m2%202a1%201%200%200%201-1-1%201%201%200%200%201%201-1%201%201%200%200%201%201%201%201%201%200%200%201-1%201m2-4a1%201%200%200%201%201%201%201%201%200%200%201-1%201%201%201%200%200%201-1-1%201%201%200%200%201%201-1m2.66%209.34-3.63-3.62%203.63-3.63%203.62%203.62z%22/%3E%3C/svg%3E');
  --md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22m17.73%2012%203.98-3.96c.39-.39.39-1.04%200-1.41l-4.34-4.34c-.37-.39-1.02-.39-1.41%200L12%206.27%208%202.29a1.001%201.001%200%200%200-1.41%200L2.25%206.63c-.39.37-.39%201.02%200%201.41L6.23%2012l-3.98%204c-.39.39-.39%201%200%201.41l4.34%204.34c.41.39%201.02.39%201.41%200l4-3.98%203.96%203.98c.2.2.45.29.71.29s.51-.1.71-.29l4.34-4.34c.39-.41.39-1.02%200-1.41zM12%209a1%201%200%200%201%201%201%201%201%200%200%201-1%201%201%201%200%200%201-1-1%201%201%200%200%201%201-1m-4.71%201.96L3.66%207.34l3.63-3.63%203.62%203.62zM10%2013a1%201%200%200%201-1-1%201%201%200%200%201%201-1%201%201%200%200%201%201%201%201%201%200%200%201-1%201m2%202a1%201%200%200%201-1-1%201%201%200%200%201%201-1%201%201%200%200%201%201%201%201%201%200%200%201-1%201m2-4a1%201%200%200%201%201%201%201%201%200%200%201-1%201%201%201%200%200%201-1-1%201%201%200%200%201%201-1m2.66%209.34-3.63-3.62%203.63-3.63%203.62%203.62z%22/%3E%3C/svg%3E');
  --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22m17.73%2012%203.98-3.96c.39-.39.39-1.04%200-1.41l-4.34-4.34c-.37-.39-1.02-.39-1.41%200L12%206.27%208%202.29a1.001%201.001%200%200%200-1.41%200L2.25%206.63c-.39.37-.39%201.02%200%201.41L6.23%2012l-3.98%204c-.39.39-.39%201%200%201.41l4.34%204.34c.41.39%201.02.39%201.41%200l4-3.98%203.96%203.98c.2.2.45.29.71.29s.51-.1.71-.29l4.34-4.34c.39-.41.39-1.02%200-1.41zM12%209a1%201%200%200%201%201%201%201%201%200%200%201-1%201%201%201%200%200%201-1-1%201%201%200%200%201%201-1m-4.71%201.96L3.66%207.34l3.63-3.63%203.62%203.62zM10%2013a1%201%200%200%201-1-1%201%201%200%200%201%201-1%201%201%200%200%201%201%201%201%201%200%200%201-1%201m2%202a1%201%200%200%201-1-1%201%201%200%200%201%201-1%201%201%200%200%201%201%201%201%201%200%200%201-1%201m2-4a1%201%200%200%201%201%201%201%201%200%200%201-1%201%201%201%200%200%201-1-1%201%201%200%200%201%201-1m2.66%209.34-3.63-3.62%203.63-3.63%203.62%203.62z%22/%3E%3C/svg%3E');
  --md-admonition-icon--danger: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22m17.73%2012%203.98-3.96c.39-.39.39-1.04%200-1.41l-4.34-4.34c-.37-.39-1.02-.39-1.41%200L12%206.27%208%202.29a1.001%201.001%200%200%200-1.41%200L2.25%206.63c-.39.37-.39%201.02%200%201.41L6.23%2012l-3.98%204c-.39.39-.39%201%200%201.41l4.34%204.34c.41.39%201.02.39%201.41%200l4-3.98%203.96%203.98c.2.2.45.29.71.29s.51-.1.71-.29l4.34-4.34c.39-.41.39-1.02%200-1.41zM12%209a1%201%200%200%201%201%201%201%201%200%200%201-1%201%201%201%200%200%201-1-1%201%201%200%200%201%201-1m-4.71%201.96L3.66%207.34l3.63-3.63%203.62%203.62zM10%2013a1%201%200%200%201-1-1%201%201%200%200%201%201-1%201%201%200%200%201%201%201%201%201%200%200%201-1%201m2%202a1%201%200%200%201-1-1%201%201%200%200%201%201-1%201%201%200%200%201%201%201%201%201%200%200%201-1%201m2-4a1%201%200%200%201%201%201%201%201%200%200%201-1%201%201%201%200%200%201-1-1%201%201%200%200%201%201-1m2.66%209.34-3.63-3.62%203.63-3.63%203.62%203.62z%22/%3E%3C/svg%3E');
}

/* --- odds and ends ------------------------------------------------------ */

/* The generated command reference is one long page of folded macro bodies.
 * A little air around each toggle makes the list scannable. */
.md-typeset details.example {
  margin-top: 1.2rem;
}