/* The m9b series' own styles, from the original m9b blog, scoped to .m9b so
   they leave the rest of the site (minima) alone. Light only, like minima. */

.m9b {
  --bg: #fdfdfd;
  --bg2: #f2f0ea;
  --fg: #1b1d22;
  --fg2: #4a4f5a;
  --muted: #7a7f8a;
  --rule: #dcd8ce;
  --accent: #b4451f;
  --link: #1f5fa8;
  --code-bg: #efece4;

  /* clock domains and memories, used by the diagrams */
  --c-cpu: #2f62b0;
  --c-sys: #2b8a4e;
  --c-pix: #7048b8;
  --c-usb: #b07a12;
  --c-osc: #6b6f78;
  --c-ram: #c99a06;
  --c-ext: #a8452a;
  --fill-cpu: #e8effa;
  --fill-sys: #e6f4eb;
  --fill-pix: #efe9f9;
  --fill-usb: #f8f0dd;
  --fill-ram: #fff3c4;
  --fill-ext: #f9e6df;
  --fill-box: #ffffff;

  --measure: 44rem;
  --wide: 64rem;

  color: var(--fg);
  font: 400 1.0625rem/1.65 'IBM Plex Sans', system-ui, sans-serif;
}

.m9b * { box-sizing: border-box; }

.m9b a, .m9b a:visited { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }
.m9b a:hover { text-decoration-thickness: 2px; }

.m9b code, .m9b .mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.9em;
}
.m9b code { background: var(--code-bg); border: 0; padding: 0.05em 0.3em; border-radius: 3px; }

/* ---- series bar -------------------------------------------------------- */
.m9b-series {
  border-bottom: 1px solid var(--rule);
  background: var(--bg2);
}
.m9b-series .inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0.75rem 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
}
.m9b-series a.brand, .m9b-series a.brand:visited {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}
.m9b .parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.9rem;
}
.m9b .parts li { margin: 0; }
.m9b .parts a, .m9b .parts a:visited { color: var(--fg2); text-decoration: none; }
.m9b .parts a:hover { color: var(--fg); }
.m9b .parts a[aria-current] { color: var(--accent); font-weight: 600; }
.m9b .parts .num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8em;
  color: var(--muted);
  margin-right: 0.3em;
}

/* ---- article ----------------------------------------------------------- */
.m9b-main { padding: 0 16px 3rem; }
.m9b-main > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.m9b-main > .wide { max-width: var(--wide); }

.m9b .kicker {
  margin-top: 3rem;
  margin-bottom: 0.25rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.m9b h1, .m9b h2, .m9b h3 { font-weight: 600; }
.m9b h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.m9b .lede { font-size: 1.2rem; color: var(--fg2); line-height: 1.55; }
.m9b h2 { font-size: 1.45rem; margin-top: 3rem; margin-bottom: 0.5rem; line-height: 1.25; }
.m9b h3 { font-size: 1.1rem; margin-top: 2rem; margin-bottom: 0.25rem; }
.m9b p, .m9b ul, .m9b ol { margin-top: 0.6rem; margin-bottom: 0.9rem; }
.m9b-main ul, .m9b-main ol { padding-left: 1.6em; }
.m9b li { margin-bottom: 0.3rem; }
.m9b strong { font-weight: 600; }

.m9b .note {
  border-left: 3px solid var(--accent);
  background: var(--bg2);
  padding: 0.6rem 1rem;
  border-radius: 0 6px 6px 0;
  font-size: 0.97rem;
}
.m9b .note p { margin: 0.3rem 0; }

/* ---- tables ------------------------------------------------------------ */
.m9b .table-wrap { overflow-x: auto; margin-top: 1.25rem; margin-bottom: 1.25rem; }
.m9b table {
  border: 0;
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  color: var(--fg);
  font-size: 0.93rem;
  font-variant-numeric: tabular-nums;
}
.m9b table tr { background: none; }
.m9b th, .m9b td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  vertical-align: top;
}
.m9b th:first-child, .m9b td:first-child { padding-left: 0; }
.m9b th:last-child, .m9b td:last-child { padding-right: 0; }
.m9b th { font-weight: 600; color: var(--fg2); border-bottom-width: 2px; }
.m9b td.n, .m9b th.n { text-align: right; white-space: nowrap; }
.m9b tr.hl td { background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 600; }
.m9b caption { caption-side: bottom; text-align: left; color: var(--muted); font-size: 0.85rem; padding-top: 0.5rem; }
/* Markdown tables: kramdown aligns columns with style="text-align: right",
   and a caption is the paragraph after the table */
.m9b th[style*="right"], .m9b td[style*="right"] { white-space: nowrap; }
.m9b .table-caption { color: var(--muted); font-size: 0.85rem; margin-top: 0.5rem; }

/* ---- figures ----------------------------------------------------------- */
.m9b figure { margin-top: 2rem; margin-bottom: 2rem; }
.m9b figure svg, .m9b figure img { display: block; width: 100%; height: auto; }
.m9b figcaption { color: var(--muted); font-size: 0.88rem; margin-top: 0.6rem; line-height: 1.5; }

.m9b .diagram text { font-family: 'IBM Plex Sans', system-ui, sans-serif; fill: var(--fg); }
.m9b .diagram .mono { font-family: 'IBM Plex Mono', monospace; }
.m9b .diagram .t-title { font-weight: 600; font-size: 14px; }
.m9b .diagram .t-sub { font-size: 11.5px; fill: var(--fg2); }
.m9b .diagram .t-small { font-size: 10.5px; fill: var(--muted); }
.m9b .diagram .t-freq { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 12px; }
.m9b .diagram .box { fill: var(--fill-box); stroke: var(--fg2); stroke-width: 1.2; }
.m9b .diagram .ram { fill: var(--fill-ram); stroke: var(--c-ram); stroke-width: 1.2; }
.m9b .diagram .ext { fill: var(--fill-ext); stroke: var(--c-ext); stroke-width: 1.2; }
.m9b .diagram .wire { stroke: var(--fg2); stroke-width: 1.6; fill: none; }
.m9b .diagram .wire.thick { stroke-width: 3; }
.m9b .diagram .arrowhead { fill: var(--fg2); }
.m9b .diagram .dom { stroke-width: 1.6; stroke-dasharray: 6 4; }
.m9b .diagram .d-cpu { fill: var(--fill-cpu); stroke: var(--c-cpu); }
.m9b .diagram .d-sys { fill: var(--fill-sys); stroke: var(--c-sys); }
.m9b .diagram .d-pix { fill: var(--fill-pix); stroke: var(--c-pix); }
.m9b .diagram .d-usb { fill: var(--fill-usb); stroke: var(--c-usb); }
.m9b .diagram .d-osc { fill: var(--bg2); stroke: var(--c-osc); }
.m9b .diagram .k-cpu { fill: var(--c-cpu); }
.m9b .diagram .k-sys { fill: var(--c-sys); }
.m9b .diagram .k-pix { fill: var(--c-pix); }
.m9b .diagram .k-usb { fill: var(--c-usb); }
.m9b .diagram .k-osc { fill: var(--c-osc); }
.m9b .diagram .s-cpu { stroke: var(--c-cpu); }
.m9b .diagram .s-sys { stroke: var(--c-sys); }
.m9b .diagram .s-pix { stroke: var(--c-pix); }
.m9b .diagram .s-usb { stroke: var(--c-usb); }
.m9b .diagram .s-osc { stroke: var(--c-osc); }
.m9b .diagram .pkg { fill: var(--bg2); stroke: var(--fg2); stroke-width: 1.5; }
.m9b .diagram .die { fill: var(--fill-box); stroke: var(--fg); stroke-width: 1.4; }
.m9b .diagram .die-ram { fill: var(--fill-ram); stroke: var(--c-ram); stroke-width: 1.4; }
.m9b .diagram .bar { fill: var(--accent); }
.m9b .diagram .bar2 { fill: var(--fg2); opacity: 0.35; }
.m9b .diagram .grid { stroke: var(--rule); stroke-width: 1; }

/* hover-linked items */
.m9b [data-link] [data-k] { transition: opacity 0.15s; }
.m9b [data-link].linking [data-k]:not(.on) { opacity: 0.28; }
.m9b [data-link] tr[data-k].on td { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ---- shorts ------------------------------------------------------------ */
.m9b .shorts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.m9b figure.short { margin: 0; }
.m9b figure.short .frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg2) center / cover no-repeat;
  border: 1px solid var(--rule);
}
.m9b figure.short iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m9b figure.short .play {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.m9b figure.short .play::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='white'/%3E%3C/svg%3E") center / 60% no-repeat;
}
.m9b figure.short.pending .frame {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  border-style: dashed;
}
.m9b figure.short.pending .frame::before { content: 'Short coming soon'; }
.m9b figure.short figcaption { margin-top: 0.4rem; font-size: 0.85rem; }

/* ---- stats ------------------------------------------------------------- */
.m9b .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.m9b .stat {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  background: var(--bg2);
}
.m9b .stat b {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.35rem;
  font-weight: 600;
}
.m9b .stat span { color: var(--fg2); font-size: 0.85rem; line-height: 1.35; display: block; }

/* ---- pager and credits ------------------------------------------------- */
.m9b .pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.m9b .pager a, .m9b .pager a:visited { text-decoration: none; max-width: 48%; }
.m9b .pager .next { text-align: right; margin-left: auto; }
.m9b .pager small { display: block; color: var(--muted); font-size: 0.8rem; }

.m9b .credits { color: var(--muted); font-size: 0.85rem; margin-top: 2rem; }

.m9b pre {
  overflow-x: auto;
  background: var(--code-bg);
  border: 0;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
}
.m9b pre code { background: none; padding: 0; font-size: inherit; }
/* kramdown wraps code blocks in div.highlighter-rouge > div.highlight > pre */
.m9b .highlight, .m9b .highlighter-rouge { background: none; margin-bottom: 0; }