:root {
  /* NOTE: assumes html { font-size: 17px; } so 1rem = 17px */
  --ledger-marker-size: 0.824rem;
  /* 14px */
  --ledger-width: 12.941rem;
  /* 220px */
  --book-gap: 0.941rem;
  /* 16px */
  --marker-border-radius: 0.2em;
  --marker-bg-color: #6D28D9;
  --event-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' stroke-width='1.5' stroke='currentColor' viewBox='0 0 24 24'><path fill='none' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z'/></svg>");
  --icon-added: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M14%201a1%201%200%200%201%201%201v12a1%201%200%200%201-1%201H2a1%201%200%200%201-1-1V2a1%201%200%200%201%201-1zM2%200a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V2a2%202%200%200%200-2-2z'%2F%3E%3Cpath%20d%3D'M8%204a.5.5%200%200%201%20.5.5v3h3a.5.5%200%200%201%200%201h-3v3a.5.5%200%200%201-1%200v-3h-3a.5.5%200%200%201%200-1h3v-3A.5.5%200%200%201%208%204'%2F%3E%3C%2Fsvg%3E");
  --icon-arrow-right: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M15%202a1%201%200%200%200-1-1H2a1%201%200%200%200-1%201v12a1%201%200%200%200%201%201h12a2%202%200%200%200%201-1zM0%202a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2zm4.5%205.5a.5.5%200%200%200%200%201h5.793l-2.147%202.146a.5.5%200%200%200%20.708.708l3-3a.5.5%200%200%200%200-.708l-3-3a.5.5%200%201%200-.708.708L10.293%207.5z'%2F%3E%3C%2Fsvg%3E");
  --icon-arrow-left: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M15%202a1%201%200%200%200-1-1H2a1%201%200%200%200-1%201v12a1%201%200%200%200%201%201h12a2%202%200%200%200%201-1zM0%202a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2zm11.5%205.5a.5.5%200%200%201%200%201H5.707l2.147%202.146a.5.5%200%200%201-.708.708l-3-3a.5.5%200%200%201%200-.708l3-3a.5.5%200%201%201%20.708.708L5.707%207.5z'%2F%3E%3C%2Fsvg%3E");
  --icon-check-square: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M14%201a1%201%200%200%201%201%201v12a1%201%200%200%201-1%201H2a1%201%200%200%201-1-1V2a1%201%200%200%201%201-1zM2%200a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V2a2%202%200%200%200-2-2z'%2F%3E%3Cpath%20d%3D'M10.97%204.97a.75.75%200%200%201%201.071%201.05l-3.992%204.99a.75.75%200%200%201-1.08.02L4.324%208.384a.75.75%200%201%201%201.06-1.06l2.094%202.093%203.473-4.425z'%2F%3E%3C%2Fsvg%3E");
  --icon-right-arrow-square: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M15%202a1%201%200%200%200-1-1H2a1%201%200%200%200-1%201v12a1%201%200%200%200%201%201h12a2%202%200%200%200%202-2V2a2%202%200%200%200-2-2zM0%202a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2zm4.5%205.5a.5.5%200%200%200%200%201h5.793l-2.147%202.146a.5.5%200%200%200%20.708.708l3-3a.5.5%200%200%200%200-.708l-3-3a.5.5%200%201%200-.708.708L10.293%207.5z'%2F%3E%3C%2Fsvg%3E");

}

/* Header */
.tutorial-title {
  text-align: right;
  font-size: 0.706rem;
  /* 12px */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 0.353rem;
  /* 6px */
}

/* TOC card */

/* Desktop TOC panel (optional: anchored beside rail) */
.toc-card {
  display: none;

  position: fixed;
  top: 1.412rem;
  /* 24px */
  left: 4.235rem;
  /* 72px */
  z-index: 2100;

  /* key: content-based width, but clamped */
  width: max-content;
  max-width: min(90vw, 42.353rem);
  /* 720px */

  /* height clamp */
  max-height: calc(100dvh - 2.824rem);
  /* 48px */

  border-radius: 0.706rem;
  /* 12px */
  background: var(--color-surface);
  box-shadow: 0 0.706rem 1.765rem rgba(17, 24, 39, 0.18);
  /* 12px 30px */
  border: 0.059rem solid var(--color-border-subtle);
  /* 1px */
  padding: 0.706rem;
  /* 12px */

  font-size: 0.765rem;
  /* 13px */
  color: var(--color-ink);

  /* overflow: hidden; */
  box-sizing: border-box;

  /* keep your open/close behavior */
  opacity: 1;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

/* When open */
.global-nav__toc[open] .toc-card {
  display: block;
  pointer-events: auto;
}

.global-nav__toc[open] .toc-card {
  display: block;
  pointer-events: auto;
  transform: translateX(0.471rem);
  /* 8px */
}

/* .toc-card.is-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
} */

.global-nav__toc {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.global-nav__toc>summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.global-nav__toc>summary::-webkit-details-marker {
  display: none;
}

.global-nav__toc>summary::marker {
  content: "";
}

@media (max-width: 768px) {
  .book__ledgers {
    display: flex;
    flex-direction: column !important;
    align-items: center;
    gap: var(--book-gap);
  }

  .global-nav__toc[open] .toc-card {
    display: flex;
    /* important: flex column so header stays fixed */
    flex-direction: column;

    position: fixed;
    top: calc(var(--mobile-nav-h) + env(safe-area-inset-top));
    left: 0;
    height: calc(100dvh - var(--mobile-nav-h) - env(safe-area-inset-top));
    width: var(--drawer-w);

    background: var(--color-surface);
    /* border-right: 1px solid var(--color-border); */
    /* border-radius: 0 14px 14px 0; */
    box-shadow: var(--shadow-panel);
    padding: 0.824rem;
    /* 14px */

    /* KEY: toc-card is NOT the scroller */
    overflow: hidden;

    z-index: 3200;
    box-sizing: border-box;
  }

  /* KEY: list-wrap becomes the scroller */
  .toc-card__list-wrap {
    overflow-y: auto;
    overflow-x: hidden;

    /* required in flex layouts for scrolling to work */
    min-height: 0;
    flex: 1 1 auto;
  }
}

.toc-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.706rem;
  /* 12px */
  margin-bottom: 0.471rem;
  /* 8px */
  flex-wrap: nowrap;
  position: sticky;
  top: 0;
  background: var(--color-surface);
  padding: 0.235rem 0;
  /* 4px 0 */
  z-index: 1;
}

.toc-card__title {
  font-weight: 600;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc-card__close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--color-ink);
  font-size: 1.059rem;
  /* 18px */
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.toc-card__close:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 0.118rem #fff,
    /* 2px */
    0 0 0 0.235rem rgba(107, 114, 128, 0.55);
  /* 4px */
}

.toc-card__list-wrap {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  max-height: calc(100dvh - 7.059rem);
  /* 120px */
  min-height: 0;
}

.toc-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  --toc-prefix-width: 9ch;
}

.toc-card__item+.toc-card__item {
  margin-top: 0.353rem;
  /* 6px */
}

.toc-card__item.is-current .toc-card__link {
  font-weight: 600;
  color: var(--color-text);
}

.toc-card__link {
  color: var(--color-ink);
  text-decoration: none;
  display: grid;
  grid-template-columns: var(--toc-prefix-width) minmax(0, 1fr);
  column-gap: 0;
  align-items: baseline;
  padding: 0.235rem 0.353rem 0.235rem 0.588rem;
  /* 4px 6px 4px 10px */
  border-radius: 0.353rem;
  /* 6px */
  position: relative;
}

.toc-card__link[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

.toc-card__link:hover {
  background: var(--color-bg);
}

.toc-card__item.is-current .toc-card__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.235rem;
  /* 4px */
  bottom: 0.235rem;
  /* 4px */
  width: 0.176rem;
  /* 3px */
  border-radius: 999px;
  background: var(--color-accent);
}

.toc-card__prefix {
  font-family: var(--mono-font);
  font-size: 0.647rem;
  /* 11px */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #4b5563;
  justify-self: start;
}

.toc-card__title-text {
  font-family: "Georgia", "Times New Roman", serif;
  color: inherit;
  min-width: 0;
}

/* Market state + lists */
.clarification>p {
  margin: 1.059rem 0;
  /* 18px */
  padding-left: 0.706rem;
  /* 12px */
  border-left: 0.118rem solid rgba(17, 17, 17, 0.18);
  /* 2px */
}

.clarification div {
  margin: 0;
  padding-left: 0.706rem;
  /* 12px */
  border-left: 0.118rem solid rgba(17, 17, 17, 0.18);
  /* 2px */
  margin-left: 0;
}

.clarification div p {
  margin: 0;
}

.clarification div ul {
  margin-left: 0;
  margin-top: 0;
}

/* Markers + inline utilities */
.marker-badge {
  width: var(--ledger-marker-size);
  height: var(--ledger-marker-size);
  background: var(--marker-bg-color);
  border-radius: var(--marker-border-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  margin-right: 0.118rem;
  color: var(--color-surface);
  font-weight: 700;
  font-style: normal;
  font-size: calc(var(--ledger-marker-size) * 0.75);
  line-height: 1;
}

.marker-badge.added::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 70%;
  mask-size: 70%;
  mask-repeat: no-repeat;
  mask-position: center;

  -webkit-mask-image: var(--icon-added);
  mask-image: var(--icon-added);
}

.marker-badge.check-mark::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  /* -webkit-mask-size: 70%;
  mask-size: 70%; */
  mask-repeat: no-repeat;
  mask-position: center;

  -webkit-mask-image: var(--icon-check-mark-large);
  mask-image: var(--icon-check-mark-large);
}

.marker-badge.pointer-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  /* -webkit-mask-size: 70%;
  mask-size: 70%; */
  mask-repeat: no-repeat;
  mask-position: center;

  -webkit-mask-image: var(--icon-pointer);
  mask-image: var(--icon-pointer);
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  display: block;
}


.pointer-right {
  --ledger-marker-icon: var(--icon-pointer);
}


/* =========================================================
   Event block
   ========================================================= */

.event-block {
  position: relative;
  border-left: 0.176rem solid var(--color-accent);
  /* 3px */
  padding-left: 0.75rem;
}

/* =========================================================
   Event block — baseline-correct label + icon
   ========================================================= */

.event-block {
  position: relative;
  border-left: 0.176rem solid var(--color-accent);
  /* 3px */
  padding-left: 0.75rem;
}

/* =========================================================
   Event block — icon moved to .event-block::before
   ========================================================= */

.event-block {
  font-size: 1rem;
  line-height: 1.6;
}

/* ICON */


/* Your strong label stays simple and stable */
.event-block strong {
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--mono-font);
  font-size: 0.85em;
  letter-spacing: 0.088rem;
  margin-left: 1em;
}

.event-block {
  position: relative;
  line-height: 1.6;
  /* MUST be explicit */
}

.event-block::before {
  content: "";
  position: absolute;
  left: 0.4em;

  /* 👇 the key line */
  top: 0.4em;

  width: 1em;
  height: 1em;

  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--event-icon);
  mask-image: var(--event-icon);
}


/* Callouts + examples */
.rule {
  margin: 1.25em 0;
  padding: 0.75em 1em;
  border-left: 0.235rem solid #3b82f6;
  /* 4px */
  background-color: #f5f9ff;
  font-family: var(--base-font);
  font-size: 0.95rem;
  line-height: 1.45;
  color: #111827;
}

.rule::before {
  content: "Rule";
  font-weight: 600;
  margin-right: 0.5em;
  color: #1d4ed8;
}

.examples {
  margin: 0.75em 0 0;
}

.examples dt {
  font-family: var(--mono-font);
  margin-top: 0.75em;
}

.examples dt label {
  font-family: var(--base-font);
  font-style: italic;
  font-weight: 500;
}

.examples dd {
  /* margin: 0 0 0 1em; */
  color: #374151;
  margin-left: 1em;
}

.examples dd p {
  margin: 0;
}

.example.match {
  border-left: 0.176rem solid #9ca3af;
  /* 3px */
  background: #f8fafc;
}

.example.no-match {
  border-left: 0.176rem solid #d1d5db;
  /* 3px */
  background: #fcfcfd;
}

.progress {
  margin: 0.588rem 0 0.471rem;
  /* 10px 0 8px */
}

.progress__meta {
  font-size: 0.765rem;
  /* 13px */
  color: #555;
  margin-bottom: 0.353rem;
  /* 6px */
}

.progress__bar {
  height: 0.353rem;
  /* 6px */
  background: #ececec;
  border-radius: 999px;
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  background: var(--color-text);
}

.reading-time {
  font-size: 0.706rem;
  /* 12px */
  color: #6b7280;
  margin: -0.824rem 0 0;
  /* -14px */
}

.tutorial-start-link {
  text-align: right;
}

.tutorial-start-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8em;
}

.tutorial-start-link a::after {
  content: "";
  display: inline-block;
  width: 0.941rem;
  /* 16px */
  height: 0.941rem;
  /* 16px */
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--icon-arrow-right);
  mask-image: var(--icon-arrow-right);
}

/* Tables */
.comparison-table {
  font-weight: 400;
}

.comparison-table th {
  font-weight: 500;
  text-align: left;
  font-size: 0.9rem;
  padding: 0.353rem 0.588rem;
  /* 6px 10px */
}

.comparison-table td {
  padding: 0.353rem 0.588rem;
  /* 6px 10px */
}

.comparison-table tbody tr:nth-child(odd) {
  background: var(--color-bg);
}

.comparison-table tbody tr:nth-child(even) {
  background: var(--color-surface);
}

.comparison-table thead {
  background: var(--color-text);
  color: var(--color-surface);
}

/* Ledger references */
.ledger-definitions {
  margin: 0.941rem 0;
  /* 16px 0 */
}

.ledger-definitions dt {
  margin-top: 0.706rem;
  /* 12px */
}

.ledger-definitions dd {
  margin: 0.235rem 0 0 1.25rem;
  /* 4px 0 0 1.25rem */
  color: #333;
}

/* color correspondence only */
.ledger-ref--asks {
  color: #8a6b2f;
}

.ledger-ref--bids {
  color: #3f5f7a;
}

.ledger-ref--tape {
  color: #3f6f5a;
}

/* Callouts */
.callout {
  margin: 1.176rem 0;
  /* 20px 0 */
  padding: 0.941rem;
  /* 16px */
  border: 0.059rem solid var(--color-border);
  /* 1px */
  border-radius: 0.588rem;
  /* 10px */
  background: #f7f7f7;
}

.callout-important {
  border-left-width: 0.353rem;
  /* 6px */
}

.callout-snapshot {
  margin: 0.706rem 0;
  /* 12px 0 */
  padding: 0.706rem;
  /* 12px */
  border: 0.059rem solid var(--color-border-light);
  /* 1px */
  border-radius: 0.471rem;
  /* 8px */
  background: var(--color-surface);
  overflow-x: auto;
}

.callout-rules {
  margin: 0.706rem 0;
  /* 12px 0 */
}

.callout-rules dt {
  font-weight: 600;
  margin-top: 0.588rem;
  /* 10px */
}

.callout-rules strong {
  font-weight: 600;
}

.callout-rules dd {
  margin: 0.235rem 0 0 0;
  /* 4px */
  padding-left: 0.941rem;
  /* 16px */
}

/* --- Callouts / blocks: reduce padding and margins --- */

.callout h2 {
  margin-top: 0;
}

.rule {
  margin: 1rem 0;
  padding: 0.7rem 0.85rem;
}


.plus-square {
  --ledger-marker-icon: var(--icon-added);
}

.check-mark {
  --ledger-marker-icon: var(--icon-check-mark-large);
}



/* Book styles */
figure[data-book] {
  margin: 1rem 0;
}

.single-ledger {
  margin: 1em 0;
}

.book {
  display: flex;
  font-size: 0.85rem;
  /* 16px */
  flex-direction: column;
  gap: var(--book-gap);
  border: 0.059rem solid var(--color-border);
  /* 1px */
  border-radius: 0.588rem;
  /* 10px */
  padding: var(--book-gap);

  /* FIX: original was invalid: width: calc(100% - --book-gap); */
  width: calc(100% - (2 * var(--book-gap)));

  margin: 0 auto;
  background: var(--color-surface);
}

.book>h2 {
  grid-column: 1 / -1;
  margin: 0 0 0.118rem;
  /* 2px */
  font-size: 0.9rem;
  /* 16px */
  font-weight: 500;
  line-height: 1.1;
}

/* ===============================
   Ledger layout – DESKTOP BASELINE
   =============================== */

.book__ledgers {
  display: flex;
  flex-direction: row;
  gap: var(--book-gap);
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.85rem;
}

.ledger-grid {
  width: 100%;

  border-radius: 0.412rem;
  /* 7px */
  box-shadow: none;
  background: var(--ledger-row-odd-bg);
  position: relative;
  isolation: isolate;

  display: grid;
  box-sizing: border-box;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  --ledger-border: var(--color-border);
  --ledger-row-odd-bg: var(--color-surface);
  --ledger-row-even-bg: #f5f5f5;
  --ledger-head-bg: #eaeaea;
  --ledger-head-fg: #000000;
  --ledger-shadow: 0.118rem 0.118rem 0.353rem rgba(0, 0, 0, 0.12);
  /* 2px 2px 6px */

  border: 0.059rem solid var(--ledger-border, currentColor);
  /* 1px */
}

.ledger-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.412rem;
  /* 7px */
  box-shadow: var(--ledger-shadow);
  clip-path: inset(0 -1.412rem -1.412rem 0 round 0.412rem);
  /* -24px -24px 0 round 7px */
  pointer-events: none;
  z-index: -1;
}

.ledger-grid__row--data.ledger-grid__row--marked>.ledger-grid__cell:first-child,
.ledger-grid__row--empty.ledger-grid__row--marked>.ledger-grid__cell:first-child {
  position: relative;
}

.ledger-grid__row--data.ledger-grid__row--marked>.ledger-grid__cell:first-child::before,
.ledger-grid__row--empty.ledger-grid__row--marked>.ledger-grid__cell:first-child::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-0.5 * var(--ledger-marker-size) - 0.059rem);
  /* -1px */
  transform: translateY(-50%);
  width: var(--ledger-marker-size, 0.824rem);
  height: var(--ledger-marker-size, 0.824rem);
  background: var(--marker-bg-color);
  border-radius: var(--marker-border-radius);
  z-index: 2;
  pointer-events: none;
}

.ledger-grid__row--data.ledger-grid__row--marked>.ledger-grid__cell:first-child::after,
.ledger-grid__row--empty.ledger-grid__row--marked>.ledger-grid__cell:first-child::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-0.5 * var(--ledger-marker-size) - 0.059rem);
  /* -1px */
  transform: translateY(-50%);
  width: var(--ledger-marker-size, 0.824rem);
  height: var(--ledger-marker-size, 0.824rem);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-surface);
  font-weight: 700;
  font-style: normal;
  font-size: calc(var(--ledger-marker-size, 0.824rem) * 0.75);
  line-height: 1;
  z-index: 3;
  pointer-events: none;
}

.ledger-grid__row--data.ledger-grid__row--marked>.ledger-grid__cell:first-child[data-marker-type="text"]::after,
.ledger-grid__row--empty.ledger-grid__row--marked>.ledger-grid__cell:first-child[data-marker-type="text"]::after {
  content: attr(data-marker-text);
  font-size: calc(var(--ledger-marker-size) * 0.75);
}

.ledger-grid__row--data.ledger-grid__row--marked>.ledger-grid__cell:first-child[data-marker-type="svg"]::after,
.ledger-grid__row--empty.ledger-grid__row--marked>.ledger-grid__cell:first-child[data-marker-type="svg"]::after,
.ledger-grid__row--data.ledger-grid__row--marked>.ledger-grid__cell:first-child[data-marker-type="icon"]::after,
.ledger-grid__row--empty.ledger-grid__row--marked>.ledger-grid__cell:first-child[data-marker-type="icon"]::after {
  content: "";
  background: var(--color-surface);
  -webkit-mask-image: var(--ledger-marker-icon);
  mask-image: var(--ledger-marker-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: var(--ledger-row-marker-icon-scale, 80%);
  mask-size: var(--ledger-row-marker-icon-scale, 80%);
}

.ledger-grid__row--data .ledger-grid__cell,
.ledger-grid__row--empty .ledger-grid__cell {
  background: var(--ledger-row-odd-bg);
}

.ledger-grid__row--empty[data-empty="true"] .ledger-grid__cell {
  color: #9ca3af;
}

.ledger-grid__row--data.ledger-grid__row--even .ledger-grid__cell,
.ledger-grid__row--empty.ledger-grid__row--even .ledger-grid__cell {
  background: var(--ledger-row-even-bg);
}

.ledger-grid__head .ledger-grid__cell {
  background: var(--ledger-head-bg);
  color: var(--ledger-head-fg);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.ledger-grid__row--data .ledger-grid__cell {
  font-family: var(--mono-font);
  font-variant-numeric: slashed-zero tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ledger-grid__caption {
  grid-column: 1 / -1;
  padding: 0.2rem 0.75rem;
  font-weight: 600;
  border-bottom: 0.059rem solid var(--ledger-border, currentColor);
  /* 1px */
}

.ledger-grid__row,
.ledger-grid__row--empty {
  display: contents;
}

.ledger-grid__row--empty .ledger-grid__cell {
  background: var(--ledger-row-odd-bg);
}

.ledger-grid__cell {
  padding: 0.5rem 0.75rem;
  border-right: 0.059rem solid var(--ledger-border, currentColor);
  /* 1px */
  border-bottom: 0.059rem solid var(--ledger-border, currentColor);
  /* 1px */
  border-radius: 0;
  box-sizing: border-box;
  min-width: 0;
  text-align: left;
}

.ledger-grid__row--data.ledger-grid__row--removed .ledger-grid__cell {
  color: #9ca3af;
  position: relative;
  z-index: 0;
}

.ledger-grid__row--data.ledger-grid__row--removed>.ledger-grid__cell {
  position: relative;
}

.ledger-grid__row--data.ledger-grid__row--removed>.ledger-grid__cell:nth-child(2) {
  z-index: 2;
  overflow: visible;
}

.ledger-grid__row--data.ledger-grid__row--removed>.ledger-grid__cell:nth-child(2)::after {
  content: "(record removed)";
  position: absolute;
  left: calc(-100% - 0.059rem);
  /* -1px */
  top: -0.118rem;
  /* -2px */
  width: calc(300% + 0.118rem);
  /* +2px */
  text-align: center;
  font-style: italic;
  font-size: 0.765rem;
  /* 13px */
  color: var(--marker-bg-color);
  pointer-events: none;
  z-index: 2;
}

.ledger-grid__cell--span {
  grid-column: 1 / -1;
  text-align: center;
  font-style: italic;
  border-right: 0;
}

.ledger-grid__row:last-of-type .ledger-grid__cell {
  border-bottom: 0;
  border-radius: 0;
}

.ledger-grid__row:last-of-type .ledger-grid__cell:first-child {
  border-bottom-left-radius: 0.412rem;
  /* 7px */
}

.ledger-grid__row:last-of-type .ledger-grid__cell:last-child {
  border-bottom-right-radius: 0.412rem;
  /* 7px */
}

.ledger-grid-asks {
  --ledger-border: #d6c7a1;
  --ledger-head-bg: #f3e6c9;
  --ledger-row-even-bg: #fbf7ed;
}

.ledger-grid-bids {
  --ledger-border: #c5d1db;
  --ledger-head-bg: #e6edf3;
  --ledger-row-even-bg: #f7fafd;
}

.ledger-grid-tape {
  --ledger-border: #c8d6cd;
  --ledger-head-bg: #e9f0eb;
  --ledger-row-even-bg: #f6faf8;
}

/* Progress + nav container */
.section-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  margin-bottom: 0.941rem;
  /* 16px */
}

.section-nav-container--subtle {
  margin: 0 0 1.176rem;
  /* 20px */
}

.section-nav-container--subtle-bottom {
  border-top: 0.059rem solid rgba(0, 0, 0, 0.06);
  /* 1px */
  padding-top: 0.588rem;
  /* 10px */
}

.section-nav-container--subtle .section-nav {
  padding: 0;
  font-size: 0.75rem;
  color: #4b5563;
  background-color: transparent;
  border-color: transparent;
  max-width: none;
  overflow: visible;
}

.section-nav-container--subtle .section-nav--prev::before,
.section-nav-container--subtle .section-nav--next::after {
  width: 0.824rem;
  /* 14px */
  height: 0.824rem;
  /* 14px */
}

.section-nav-container--subtle .section-nav:hover,
.section-nav-container--subtle .section-nav:focus-visible {
  background-color: transparent;
  border-color: transparent;
  max-width: none;
}


/* Section nav */
.section-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  padding: 0.45rem 0.7rem;
  max-width: 9ch;
  overflow: hidden;

  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;

  /* removed duplicate font-size; keep the rem-based one above */
  color: #E6E8EB;
  background-color: #2B2F36;
  border: 0.059rem solid #3A3F47;
  /* 1px */
  border-radius: 0.353rem;
  /* 6px */

  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    transform 80ms ease,
    max-width 160ms ease;
}


.section-nav__label {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.section-nav-item {
  margin: 0;
}

.section-nav__label::after {
  content: ": " attr(data-title);
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
  opacity: 0;
  transform: translateX(-0.176rem);
  transition: max-width 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.section-nav:hover .section-nav__label::after,
.section-nav:focus-visible .section-nav__label::after {
  max-width: 40ch;
  opacity: 1;
  transform: translateX(0);
}

.section-nav:hover,
.section-nav:focus-visible {
  max-width: 48ch;
  color: var(--brand-blue);
}


.section-nav--prev::before,
.section-nav--next::after {
  content: "";
  display: inline-block;
  width: 0.941rem;
  /* 16px */
  height: 0.941rem;
  /* 16px */
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.section-nav--prev::before {
  -webkit-mask-image: var(--icon-arrow-left);
  mask-image: var(--icon-arrow-left);
  margin-right: 0.235rem;
}

.section-nav--next::after {
  -webkit-mask-image: var(--icon-arrow-right);
  mask-image: var(--icon-arrow-right);
  margin-left: 0.235rem;
}

.section-nav:hover {
  background-color: #353B44;
  border-color: #4A515C;
}

.section-nav:active {
  background-color: #1F2329;
  transform: translateY(0.059rem);
  /* 1px */
}

.section-nav:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 0.118rem #fff,
    /* 2px */
    0 0 0 0.235rem rgba(107, 114, 128, 0.55);
  /* 4px */
}

.section-nav--disabled {
  visibility: hidden;
  pointer-events: none;
}

.section-nav--cta {
  max-width: none;
  white-space: nowrap;
}

.section-nav--cta:hover,
.section-nav--cta:focus-visible {
  max-width: none;
}

.section-nav--cta:hover .section-nav__label::after,
.section-nav--cta:focus-visible .section-nav__label::after {
  content: "";
}