/* ============================================================================
   MAKING SOFTWARE: signatures layer (additive)
   The flourishes from makingsoftware.com that the base stylesheet doesn't ship:
   margin rail labels, ruler-tick rules, a drop cap, TOC dotted leaders + word
   counts, and an asterisk footer divider.

   Link AFTER making-software.css. Uses only --ms-* tokens. Mostly additive, but
   it intentionally overrides one base behavior: body/figure centering is changed
   to a shared left edge (see the alignment block, whose selector list mirrors the
   base's child list and must be kept in sync with it).
   ========================================================================== */

/* ── margin rail labels: rotated mono stamps in the page gutters ─────────── */
.ms-rail {
  position: fixed;
  top: 0; bottom: 0;
  width: 2.4rem;
  display: none;                       /* shown only when the gutter has room */
  align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 5;
}
.ms-rail.left  { left: 0; }
.ms-rail.right { right: 0; }
.ms-rail .stamp {
  writing-mode: vertical-rl;
  font-family: var(--ms-mono);
  text-transform: uppercase;
  font-size: .6rem;
  letter-spacing: .24em;
  color: var(--ms-ink-3);
  white-space: nowrap;
}
.ms-rail.left .stamp { transform: rotate(180deg); }   /* read bottom-to-top */
.ms-rail .stamp .at { color: var(--ms-blue); }
@media (min-width: 1200px) { .ms-rail { display: flex; } }

/* ── ruler-tick rule: a hairline with measuring-tape ticks ──────────────── */
.ms-ruler {
  height: 7px;
  border: 0;
  margin: var(--ms-step) auto;
  background:
    linear-gradient(var(--ms-ink-4), var(--ms-ink-4)) top left / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--ms-ink-4) 0 1px, transparent 1px 16px) top left / 100% 7px no-repeat;
}
.ms-ruler.blue {
  background:
    linear-gradient(var(--ms-blue), var(--ms-blue)) top left / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--ms-blue) 0 1px, transparent 1px 16px) top left / 100% 7px no-repeat;
}
/* let the ruler break out to the wide measure inside a document column */
.ms-doc > .ms-ruler { max-width: var(--ms-wide); }

/* ── drop cap on the opening paragraph ──────────────────────────────────── */
.ms-dropcap::first-letter {
  float: left;
  font-family: var(--ms-sans);
  font-weight: 700;
  font-size: 3.4em;
  line-height: .82;
  padding: .04em .12em 0 0;
  color: var(--ms-ink);
}

/* ── table of contents: dotted leaders + per-section word counts ─────────── */
.ms-toc a { gap: .7rem; }
.ms-toc .lead-dots {
  flex: 1 1 auto;
  align-self: flex-end;
  min-width: 1.5rem;
  margin-bottom: .42em;
  border-bottom: 1px dotted var(--ms-ink-4);
}
.ms-toc a:hover .lead-dots { border-bottom-color: var(--ms-blue); }
.ms-toc .words { margin-left: 0; }     /* the leader now supplies the gap */

/* ── asterisk divider above the footer stamp ────────────────────────────── */
.ms-asterisks {
  text-align: center;
  font-family: var(--ms-mono);
  color: var(--ms-blue);
  letter-spacing: .55em;
  font-size: .8rem;
  margin: var(--ms-step) 0 .5rem;
}

/* ── topbar: add the measuring ticks under the sticky bar ────────────────── */
.ms-topbar { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--ms-ink-4); }

/* ── TOC side companion: the contents dock to a left index on scroll ─────── */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

:root {
  --toc-rail-w: 16rem;
  --toc-gap: 2.5rem;
}

.ms-toc-rail {
  position: sticky; top: 3.2rem; height: calc(100vh - 3.2rem);
  width: var(--toc-rail-w); box-sizing: border-box;
  padding: .95rem .85rem 1.4rem 0;
  display: none; flex-direction: column; gap: .05rem;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .22s cubic-bezier(.23,1,.32,1), transform .22s cubic-bezier(.23,1,.32,1);
  pointer-events: none; z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.2rem, #000 calc(100% - 1.4rem), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 1.2rem, #000 calc(100% - 1.4rem), transparent 100%);
}
body.toc-docked .ms-toc-rail { opacity: 1; transform: none; pointer-events: auto; }
.ms-toc-rail a {
  position: relative; display: flex; gap: .4rem; align-items: baseline;
  text-decoration: none; color: color-mix(in srgb, var(--ms-ink) 50%, transparent);
  font-family: var(--ms-mono); font-size: .64rem; font-weight: 500; line-height: 1.28;
  padding: .28rem 0 .28rem .72rem; transition: color .14s ease;
}
.ms-toc-rail a .n { color: var(--ms-ink-4); font-variant-numeric: tabular-nums; flex: none; }
.ms-toc-rail a .t {
  text-transform: uppercase; letter-spacing: .085em;
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ms-toc-rail a:hover { color: var(--ms-ink); }
.ms-toc-rail a:hover .n { color: var(--ms-blue); }
.ms-toc-rail a.active { color: var(--ms-ink); font-weight: 700; }
.ms-toc-rail a.active .n { color: var(--ms-blue); }
.ms-toc-rail a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42rem;
  bottom: .42rem;
  width: 2px;
  background: var(--ms-blue);
}
@media (min-width: 1300px) {
  body.toc-enhanced .ms-page {
    display: grid;
    grid-template-columns: minmax(16rem, var(--toc-rail-w)) minmax(0, var(--ms-wide));
    column-gap: var(--toc-gap);
    align-items: start;
  }

  body.toc-enhanced .ms-doc {
    grid-column: 2;
  }

  .ms-toc-rail {
    display: flex;
    grid-column: 1;
    grid-row: 1;
  }
}

/* the left margin stamp yields to the docked contents */
body.toc-docked .ms-rail.left { opacity: 0; transition: opacity .22s ease; }

@media (prefers-reduced-motion: reduce) {
  .ms-toc-rail { transition: opacity .12s linear; transform: none; }
}

/* ── polish: reading measure + left-anchored document (out of the middle) ── */
.ms-doc { --ms-measure: 44rem; margin-inline: 0; }
:root {
  --ms-ground: #faf9f5; --ms-paper: #fffefb;            /* warm the white, ever so slightly */
  --ms-ink-3: rgba(0,0,0,.55);   /* was .45 (3.3:1); .55 clears WCAG AA (~4.7:1) for the small mono labels */
}

/* Align body text and figures to one shared left edge so wide figures don't
   step out past the narrower text column (which read as misaligned). Text holds
   its measure; figures extend rightward only. Header stays centered. */
.ms-doc > p, .ms-doc > h2, .ms-doc > h3, .ms-doc > h4,
.ms-doc > ul, .ms-doc > ol, .ms-doc > dl, .ms-doc > blockquote, .ms-doc > pre,
.ms-doc > table, .ms-doc > .ms-callout, .ms-doc > .ms-kicker, .ms-doc > .ms-flow,
.ms-doc > figure, .ms-doc > .ms-fig, .ms-doc > .ms-hero, .ms-doc > .ms-ruler {
  margin-left: 0;
  margin-right: auto;
}

.ms-toc { column-count: 2; column-gap: 2.4rem; }
.ms-toc li { break-inside: avoid; }
.ms-toc a { padding: .5rem .2rem; gap: .6rem; }
.ms-toc .title { flex: 1 1 auto; min-width: 0; }
.ms-toc .lead-dots { display: none; }      /* dotted leaders read poorly across columns */
.ms-toc .words { flex: none; }
@media (max-width: 620px) {
  .ms-toc { column-count: 1; }
  .ms-toc .lead-dots { display: block; }
}

/* hero figure: a touch more breathing room under the title */
.ms-doc > .ms-hero { margin-top: 1.4rem; margin-bottom: 1.4rem; }

/* ── floated figures: prose flows around them (an .ms-flow section) ───────── */
.ms-doc > .ms-flow { max-width: var(--ms-measure); margin-left: 0; margin-right: auto; }
.ms-flow::after { content: ""; display: block; clear: both; }   /* contain the float */
.ms-flow > .ms-fig { margin-block: var(--ms-step); }
.ms-flow > .ms-flow-timeline {
  width: min(var(--ms-wide), calc(100vw - (var(--ms-page-gutter, 1.25rem) * 2)));
  max-width: none;
}
.ms-flow-timeline .ms-blueprint {
  padding: clamp(.55rem, 1.4vw, 1rem);
  overflow-x: auto;
}
.ms-flow-timeline img {
  min-width: min(42rem, 100%);
}
@media (min-width: 64rem) {
  .ms-flow > .ms-float-right {
    float: right; width: min(20.5rem, 46%);
    margin: .2rem 0 1rem 1.8rem;
  }
  .ms-flow > .ms-float-left {
    float: left; width: min(20.5rem, 46%);
    margin: .2rem 1.8rem 1rem 0;
  }
}

/* ── Pretext routed prose: generated line boxes flow around a live obstacle ─ */
.ms-doc > .pt-flow {
  max-width: var(--ms-measure);
  margin-left: 0;
  margin-right: auto;
}

.pt-flow {
  position: relative;
  margin-bottom: var(--ms-step);
}

.pt-flow-renderer {
  position: relative;
  display: none;
}

.pt-flow.pt-flow-ready .pt-flow-renderer {
  display: block;
}

.pt-flow.pt-flow-ready .pt-flow-source {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pt-line {
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
  color: var(--ms-ink);
  font-family: var(--ms-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: 0;
}

.pt-line.muted { color: var(--ms-ink-2); }
.pt-line.list-line { padding-left: 1.1rem; }
.pt-line.list-start::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .82em;
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background: var(--ms-blue);
}

.pt-flow-obstacle {
  position: absolute;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 1px dashed var(--ms-blue);
  background:
    linear-gradient(var(--ms-blue-tint), var(--ms-blue-tint)) padding-box,
    var(--ms-paper);
  color: var(--ms-blue);
  font-family: var(--ms-mono);
  text-transform: uppercase;
  font-size: .62rem;
  letter-spacing: .12em;
  line-height: 1.45;
  text-align: center;
  padding: .8rem;
  pointer-events: none;
}

.pt-flow-obstacle::before,
.pt-flow-obstacle::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 1.5rem;
  background: var(--ms-blue);
}

.pt-flow-obstacle::before { top: -1.5rem; }
.pt-flow-obstacle::after { bottom: -1.5rem; }

.pt-flow-note {
  display: block;
  margin-top: .5rem;
  font-family: var(--ms-mono);
  font-size: .58rem;
  line-height: 1.4;
  letter-spacing: .1em;
  color: var(--ms-ink-3);
}

@media (max-width: 760px) {
  .pt-flow.pt-flow-ready .pt-flow-renderer {
    display: none;
  }

  .pt-flow.pt-flow-ready .pt-flow-source {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

/* ── figure reveal on scroll (occasional, so a gentle ease-out fade) ─────── */
@media (prefers-reduced-motion: no-preference) {
  .ms-fig.reveal { opacity: 0; transform: translateY(14px); }
  .ms-fig.reveal.in {
    opacity: 1; transform: none;
    transition: opacity .55s cubic-bezier(.23, 1, .32, 1), transform .55s cubic-bezier(.23, 1, .32, 1);
  }
}

/* ── calmer contents: drop the ruled grid, the per-row word counts, and the
   loud blue numbers; soften and add air. Keeps the two columns. ──────────── */
.ms-toc { column-count: 2; column-gap: 3.2rem; }
.ms-toc-source {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ms-toc li, .ms-toc li:first-child, .ms-toc li:last-child { border: 0; }
.ms-toc a { padding: .55rem 0; gap: 1rem; color: var(--ms-ink-2); }
.ms-toc a:hover { color: var(--ms-blue); }
.ms-toc .num { display: none; }            /* the title already carries "N.", drop the duplicate */
.ms-toc-rail .n { display: none; }
.ms-toc .title { font-weight: 400; }
.ms-toc .words { display: none; }

/* Long examples stay available without taking over the chapter. */
.ms-code-fold {
  max-width: var(--ms-measure);
  margin: 1rem 0 1.4rem;
}
.ms-code-fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--ms-ink-4);
  border-bottom: 0;
  padding: .72rem .9rem;
  font-family: var(--ms-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--ms-ink-2);
  background: color-mix(in srgb, var(--ms-blue) 4%, var(--ms-paper));
}
.ms-code-fold summary:active { transform: translateY(1px); }
.ms-code-fold[open] summary {
  border-bottom: 1px solid var(--ms-ink-4);
}
.ms-code-fold summary::-webkit-details-marker { display: none; }
.ms-code-fold summary::before {
  content: "+";
  color: var(--ms-blue);
  font-weight: 700;
  margin-right: .15rem;
}
.ms-code-fold[open] summary::before { content: "-"; }
.ms-code-fold-label { flex: 1 1 auto; }
.ms-code-fold-meta {
  flex: none;
  color: var(--ms-ink-3);
}
.ms-code-fold pre {
  margin: 0;
  max-width: none;
}

/* document anchors left now, so the left rail label would crowd the content; it yields */
.ms-rail.left { display: none; }

/* masthead anchors left too, to match the left-anchored body (no centered title floating over left content) */
.ms-doc > header.ms-center { text-align: left; }
.ms-doc > header .ms-title,
.ms-doc > header .ms-subtitle { text-align: left; margin-left: 0; }
.ms-doc > header .ms-rule.short { margin-left: 0; }

/* ============================================================================
   RELEASE PASS: harden, delight, polish (additive; --ms-* tokens only)
   ========================================================================== */

/* ── HARDEN · tables never push the page sideways on phones ───────────────────
   Field identifiers (e.g. pending_inbound_balance) are unbreakable mono tokens
   that widen the first column past a ~390px viewport, scrolling the whole page.
   Let the table scroll inside its own column; the identifiers stay intact. */
@media (max-width: 40rem) {
  .ms-doc > .ms-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── HARDEN · print / save-to-PDF (a reference manual gets printed) ─────────── */
@media print {
  :root { --ms-ground: #fff; --ms-paper: #fff; }
  html { scroll-behavior: auto; }
  body { font-size: 10.5pt; line-height: 1.5; }
  .ms-topbar, .ms-rail, .ms-toc-rail, .ms-progress, .ms-anchor { display: none !important; }
  .ms-page { padding: 0; display: block; }
  .ms-doc, .ms-doc > * { max-width: none; }
  /* figures fade in on scroll; force them visible so off-screen ones still print */
  .ms-fig.reveal { opacity: 1 !important; transform: none !important; }
  figure, .ms-fig, .ms-table, .ms-callout, pre, blockquote { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  /* expand folded code so examples print in full */
  .ms-code-fold > summary { display: none; }
  .ms-code-fold:not([open]) > pre { display: block !important; }
  pre { white-space: pre-wrap; word-break: break-word; overflow: visible; }
  /* the routed-prose effect is screen-only; print the plain source prose */
  .pt-flow .pt-flow-renderer { display: none !important; }
  .pt-flow .pt-flow-source {
    position: static !important; width: auto !important; height: auto !important;
    clip: auto !important; margin: 0 !important; white-space: normal !important;
  }
  a { color: inherit; }
  .ms-blueprint { border-color: #999; }
}

/* ── DELIGHT · reading-progress hairline (echoes the ruler-tick motif) ────────
   A thin blue fill tracking scroll depth through a long-form read. It tracks
   position rather than animating, so it is fine under reduced-motion. */
.ms-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px;
  background: var(--ms-blue);
  transform: scaleX(var(--ms-progress, 0)); transform-origin: 0 50%;
  z-index: 11; pointer-events: none;
}

/* ── DELIGHT · per-section deep links (cite a section of the reference) ──────── */
.ms-doc h2 .ms-anchor {
  margin-left: .45em;
  font-family: var(--ms-mono); font-weight: 400; font-size: .56em; line-height: 1;
  color: var(--ms-blue); text-decoration: none; vertical-align: .18em;
  opacity: 0; transition: opacity .15s ease;
}
.ms-doc h2:hover .ms-anchor,
.ms-doc h2 .ms-anchor:focus-visible { opacity: 1; }
.ms-anchor::before { content: "#"; }
.ms-anchor.copied { opacity: 1; }
.ms-anchor.copied::before { content: "copied"; }
@media (prefers-reduced-motion: reduce) { .ms-doc h2 .ms-anchor { transition: none; } }

/* ── POLISH · lift muted-label contrast toward WCAG AA ───────────────────────
   Inactive contents-rail rows were ~3.5:1; nudge them up (active row already
   reads at full ink). Pairs with the --ms-ink-3 bump above. */
.ms-toc-rail a { color: color-mix(in srgb, var(--ms-ink) 62%, transparent); }

/* ── POLISH · visible keyboard focus + skip link ─────────────────────────────
   The mouse hover states existed; keyboard users had only the UA default. */
:where(a, summary, .ms-anchor):focus-visible {
  outline: 2px solid var(--ms-blue);
  outline-offset: 2px;
  border-radius: 1px;
}
.ms-skip {
  position: fixed; left: .6rem; top: -3.5rem;
  font-family: var(--ms-mono); text-transform: uppercase;
  font-size: .66rem; letter-spacing: .12em;
  background: var(--ms-blue); color: #fff; padding: .6rem .85rem;
  text-decoration: none; z-index: 30; transition: top .16s cubic-bezier(.23,1,.32,1);
}
.ms-skip:focus { top: .6rem; }
@media (prefers-reduced-motion: reduce) { .ms-skip { transition: none; } }


/* Keep the audited source one click away without competing with the title. */
.ms-cover-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: min(100%, var(--ms-wide));
  margin: 1.5rem auto .6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ms-ink-4);
  text-align: left;
}

.ms-cover-context p {
  margin: 0;
  color: var(--ms-ink-2);
  font-family: var(--ms-mono);
  font-size: .62rem;
  line-height: 1.55;
  letter-spacing: .04em;
}

.ms-cover-context span {
  display: block;
  margin-bottom: .18rem;
  color: var(--ms-blue);
  font-size: .56rem;
  font-weight: 650;
  letter-spacing: .14em;
}

.ms-download {
  margin: .9rem 0 0;
}

.ms-download a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .55rem .75rem;
  border: 1px solid var(--ms-ink-4);
  color: var(--ms-ink);
  font-family: var(--ms-mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-decoration: none;
  transform: scale(1);
  transition: border-color .14s ease, color .14s ease, transform .14s cubic-bezier(.23, 1, .32, 1);
}

.ms-download a:focus-visible {
  border-color: var(--ms-blue);
  color: var(--ms-blue);
  outline: 2px solid var(--ms-blue);
  outline-offset: 3px;
}

.ms-download a:active {
  transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
  .ms-download a:hover {
    border-color: var(--ms-blue);
    color: var(--ms-blue);
  }
}

/* Referenced SVG exports use one consistent embedding strategy. */
.ms-blueprint img {
  display: block;
  width: 100%;
  height: auto;
}

.ms-source-chart .ms-blueprint {
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 3rem);
  background: #fff;
}

.ms-source-chart .ms-blueprint img {
  width: auto;
  max-width: min(100%, 47.5rem);
  max-height: 38.75rem;
  object-fit: contain;
}

/* Charts preserved from the original report remain readable at every width. */
.ms-doc p img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.25rem auto;
  border: 1px solid var(--ms-ink-4);
  background: var(--ms-paper);
}

/* Long source URLs wrap without forcing normal table labels to split mid-word. */
.ms-doc :where(p, li) {
  overflow-wrap: anywhere;
}

/* Wide analytical tables keep readable columns and scroll within the document. */
.ms-doc > .ms-table-wrap {
  width: 100%;
  max-width: var(--ms-wide);
  margin-left: 0;
  margin-right: auto;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.ms-table-wrap .ms-table {
  min-width: 61rem;
  table-layout: auto;
}

.ms-table :where(th, td) {
  min-width: 10.5rem;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.ms-table :where(th, td):first-child {
  min-width: 11.5rem;
}

.ms-table-wrap:focus-visible {
  outline: 2px solid var(--ms-blue);
  outline-offset: 3px;
}

/* Markdown footnotes remain compact, linked, and clearly separate from prose. */
.ms-doc sup[id^="fnref"] {
  scroll-margin-top: 5rem;
}

.ms-doc .footnote-ref,
.ms-doc .footnote-backref {
  color: var(--ms-blue);
  font-family: var(--ms-mono);
  font-size: .72em;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.ms-doc .footnote {
  max-width: var(--ms-text);
  margin: 3rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ms-ink-4);
  color: var(--ms-ink-2);
  font-size: .82rem;
}

.ms-doc .footnote hr {
  display: none;
}

.ms-doc .footnote ol {
  margin: 0;
  padding-left: 1.4rem;
}

.ms-doc .footnote li {
  margin-bottom: .8rem;
}

.ms-doc .footnote p {
  margin: 0;
}

/* The request-approve-push figure is the cover hero, followed by a compact section map. */
.ms-doc > header + .ms-hero {
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.ms-doc > header + .ms-hero .ms-blueprint {
  padding: clamp(.55rem, 1.4vw, 1rem);
}

.ms-toc-compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 0;
  margin: .8rem 0 2rem;
}

.ms-toc-compact li,
.ms-toc-compact li:first-child,
.ms-toc-compact li:last-child {
  border-top: 1px dashed var(--ms-ink-4);
}

.ms-toc-compact a {
  min-height: 4.8rem;
  padding: .8rem 0;
  align-items: flex-start;
}

.ms-toc-compact .title {
  display: block;
  color: var(--ms-ink);
  font-weight: 600;
}

.ms-toc-compact .desc {
  display: block;
  margin-top: .2rem;
  line-height: 1.35;
}

.ms-toc-compact a:hover .title,
.ms-toc-compact a:focus-visible .title {
  color: var(--ms-blue);
}

@media (max-width: 760px) {
  .ms-cover-context { grid-template-columns: 1fr; gap: .65rem; }
  .ms-toc-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .ms-toc-compact { grid-template-columns: 1fr; }
  .ms-toc-compact a { min-height: 0; }
}

/* Keep the routed-prose obstacle contained; leader ticks crossed adjacent text. */
.pt-flow-obstacle::before,
.pt-flow-obstacle::after {
  display: none;
}

/* Dense figures become useful inspection surfaces without changing the paper. */
.ms-blueprint.is-inspectable {
  position: relative;
  cursor: zoom-in;
}

.ms-blueprint.is-inspectable::after {
  content: "EXPAND";
  position: absolute;
  top: .55rem;
  right: .55rem;
  padding: .3rem .45rem;
  border: 1px solid var(--ms-blue);
  background: var(--ms-paper);
  color: var(--ms-blue);
  font-family: var(--ms-mono);
  font-size: .58rem;
  line-height: 1;
  letter-spacing: .14em;
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  transition: opacity .14s ease, transform .14s cubic-bezier(.23, 1, .32, 1);
}

.ms-blueprint.is-inspectable:focus-visible::after {
  opacity: 1;
}

.ms-blueprint.is-inspectable:active::after {
  transform: scale(.97);
}

.ms-blueprint.is-inspectable:focus-visible {
  outline: 2px solid var(--ms-blue);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .ms-blueprint.is-inspectable:hover::after { opacity: 1; }
}

@media (hover: none), (pointer: coarse) {
  .ms-blueprint.is-inspectable::after { opacity: 1; }
}

.ms-figure-inspector {
  width: min(94vw, 90rem);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ms-ink);
  overflow: visible;
}

.ms-figure-inspector::backdrop {
  background: color-mix(in srgb, var(--ms-ink) 68%, transparent);
}

.ms-figure-inspector-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: 92vh;
  border: 1px solid var(--ms-ink-4);
  background: var(--ms-paper);
}

.ms-figure-inspector-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--ms-ink-4);
  color: var(--ms-blue);
  font-family: var(--ms-mono);
  font-size: .64rem;
  letter-spacing: .14em;
}

.ms-figure-inspector-close {
  min-width: 3rem;
  min-height: 2.75rem;
  padding: .45rem .6rem;
  border: 1px solid var(--ms-ink-4);
  border-radius: 0;
  background: var(--ms-paper);
  color: var(--ms-ink);
  font: inherit;
  letter-spacing: .1em;
  cursor: pointer;
  transform: scale(1);
  transition: border-color .14s ease, color .14s ease, transform .14s cubic-bezier(.23, 1, .32, 1);
}

.ms-figure-inspector-close:focus-visible {
  border-color: var(--ms-blue);
  color: var(--ms-blue);
}

.ms-figure-inspector-close:active {
  transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
  .ms-figure-inspector-close:hover {
    border-color: var(--ms-blue);
    color: var(--ms-blue);
  }
}

.ms-figure-inspector-canvas {
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(.6rem, 1.8vw, 1.4rem);
  background: var(--ms-paper);
}

.ms-figure-inspector-canvas img {
  display: block;
  width: 100%;
  height: auto;
}

.ms-figure-inspector-caption {
  margin: 0;
  padding: .75rem .9rem;
  border-top: 1px solid var(--ms-ink-4);
  color: var(--ms-ink-3);
  font-family: var(--ms-mono);
  font-size: .64rem;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html.ms-inspecting { overflow: hidden; }

@media (max-width: 760px) {
  .ms-figure-inspector { width: 96vw; }
  .ms-figure-inspector-bar > span::after {
    content: " · PAN";
    color: var(--ms-ink-3);
  }
  .ms-figure-inspector-canvas img {
    width: 64rem;
    max-width: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ms-figure-inspector[open][data-motion="pointer"] .ms-figure-inspector-frame {
    animation: ms-inspector-enter .24s cubic-bezier(.16, 1, .3, 1);
  }

  @keyframes ms-inspector-enter {
    from {
      opacity: .01;
      transform: translateY(12px);
      clip-path: inset(0 0 18% 0);
    }
    to {
      opacity: 1;
      transform: none;
      clip-path: inset(0);
    }
  }
}

@media print {
  .ms-figure-inspector { display: none !important; }
  .ms-blueprint.is-inspectable::after { display: none; }
}