/*
 * What a technical post adds to site.css: code excerpts and the small flow diagrams.
 *
 * Token colours come from Pygments' class names (tok-k keyword, tok-s string, tok-m number, tok-c comment, tok-n* names), which are
 * written into the page when it is made, so nothing here needs a script. Every pair of colours meets 4.5:1 on its surface.
 */

:root {
  --tok-comment: #5c5755;
  --tok-keyword: #a8482a;
  --tok-string: #2c6a3b;
  --tok-number: #1f5f99;
  --tok-name: #7b3f98;
  --tok-del: #a3262a;
}

/* Declared twice and kept identical, as in site.css. */
:root[data-theme="dark"] {
  --tok-comment: #b3acaa;
  --tok-keyword: #d67454;
  --tok-string: #8fc79a;
  --tok-number: #7fb4e6;
  --tok-name: #c9a0dc;
  --tok-del: #e8888a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tok-comment: #b3acaa;
    --tok-keyword: #d67454;
    --tok-string: #8fc79a;
    --tok-number: #7fb4e6;
    --tok-name: #c9a0dc;
    --tok-del: #e8888a;
  }
}

.post code {
  font-variant-ligatures: none;
}

.post > .code {
  grid-column: full;
  justify-self: center;
  width: min(60rem, calc(100% - 2 * var(--s4)));
  margin-top: var(--s6);
  margin-bottom: var(--s2);
}

.code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.code figcaption {
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--text-muted);
}

.code pre {
  margin: 0;
  padding: var(--s4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  tab-size: 4;
  font-variant-ligatures: none;
  color: var(--text);
}

.code pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.tok-c, .tok-c1, .tok-cm, .tok-cp, .tok-cpf, .tok-ch, .tok-cs, .tok-gu {
  color: var(--tok-comment);
  font-style: italic;
}

.tok-k, .tok-kc, .tok-kd, .tok-kn, .tok-kp, .tok-kr, .tok-kt, .tok-ow {
  color: var(--tok-keyword);
}

.tok-s, .tok-sa, .tok-sb, .tok-sc, .tok-dl, .tok-sd, .tok-s2, .tok-se, .tok-sh, .tok-si, .tok-sx, .tok-sr, .tok-s1, .tok-ss, .tok-gi {
  color: var(--tok-string);
}

.tok-m, .tok-mb, .tok-mf, .tok-mh, .tok-mi, .tok-il, .tok-mo {
  color: var(--tok-number);
}

.tok-nf, .tok-fm, .tok-nc, .tok-nd, .tok-nn {
  color: var(--tok-name);
}

.tok-gd {
  color: var(--tok-del);
}

/* A flow of three steps: a row on a wide screen, a column on a narrow one, the arrows between them drawn by CSS. */

.post > .flow {
  grid-column: full;
  justify-self: center;
  width: min(var(--wide), calc(100% - 2 * var(--s4)));
  margin-top: var(--s6);
}

.flow-title {
  margin: 0;
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
  margin: var(--s2) 0 0;
  padding: 0;
  list-style: none;
}

.flow-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin: 0;
  padding: var(--s4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  line-height: 1.45;
}

.flow-steps li + li {
  margin-top: 0;
}

.flow-steps strong {
  font-weight: 600;
}

.flow-steps span {
  font-size: var(--t-small);
  color: var(--text-muted);
}

.flow-steps li + li::before {
  content: "\2192";
  content: "\2192" / "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--s6));
  width: var(--s6);
  transform: translateY(-50%);
  text-align: center;
  color: var(--text-subtle);
}

@media (max-width: 719px) {
  .flow-steps {
    grid-template-columns: 1fr;
  }

  .flow-steps li + li::before {
    content: "\2193";
    content: "\2193" / "";
    top: calc(-1 * var(--s6));
    left: 0;
    width: 100%;
    height: var(--s6);
    line-height: var(--s6);
    transform: none;
  }
}