/* Larger, easier-to-read figures */
.md-typeset .rig {
  display: block;
  width: 100%;
  max-width: 960px;
  margin: 1rem auto;
  border-radius: 12px;
}

/* Big "key number" tiles at the top of a guide */
.md-typeset .grid.cards > ul > li strong.big {
  display: block;
  font-size: 1.6rem;
  line-height: 1.2;
}

/* Step numbers in tables stand out */
.md-typeset table td:first-child strong {
  white-space: nowrap;
}

/* Mermaid diagrams: keep them centred and allow horizontal scroll on phones */
.md-typeset .mermaid {
  text-align: center;
  overflow-x: auto;
}

/* "At a glance" tiles: two per row on phones instead of one long column */
@media screen and (max-width: 44.984em) {
  .md-typeset .grid.cards.glance {
    grid-template-columns: 1fr 1fr;
  }
  .md-typeset .grid.cards.glance > ul > li strong.big {
    font-size: 1.2rem;
  }
}

/* ---------- Symbols page ---------- */
.sym-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: .9rem;
  margin: 1rem 0 1.5rem;
}
.sym {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  background: var(--md-default-bg-color);
}
.sym svg, svg.wide {
  display: block;
  width: 100%;
  height: auto;
  color: var(--md-default-fg-color);
  background: var(--md-code-bg-color);
}
svg.wide {
  margin: 1rem 0;
  border-radius: 12px;
  border: 1px solid var(--md-default-fg-color--lightest);
}
.sym figcaption { padding: .6rem .8rem .8rem; font-size: .74rem; line-height: 1.45; text-align: left; font-style: normal; }
.sym figcaption > b:first-child { display: block; margin-bottom: .2rem; font-size: .82rem; }
.sym figcaption i {
  display: block; margin-top: .4rem; font-style: normal; font-size: .7rem;
  color: var(--md-default-fg-color--light);
}

/* line styles shared by every symbol drawing */
.sym svg .l, svg.wide .l {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sym svg .l.w, svg.wide .l.w { fill: var(--md-default-bg-color); }
.sym svg .l.qd { fill: #ff9800; stroke: #e65100; }
.sym svg .thin, svg.wide .thin { stroke-width: 1.2; }
.sym svg .thick { stroke-width: 3.2; }
.sym svg .dash, svg.wide .dash { stroke-dasharray: 5 3; }
.sym svg .dd { stroke-dasharray: 12 3 2 3; }
.sym svg .k, svg.wide .k { fill: currentColor; stroke: none; }
.sym svg .pipe, svg.wide .pipe {
  fill: none; stroke: var(--md-primary-fg-color); stroke-width: 5; stroke-linecap: round;
}
svg.wide .pipe { stroke-width: 7; }
.sym svg .band { fill: var(--md-accent-fg-color); fill-opacity: .28; stroke: none; }

.sym svg text, svg.wide text {
  fill: currentColor; text-anchor: middle; font-weight: 600;
  font-family: var(--md-text-font-family, system-ui, sans-serif);
  font-size: 10px;
}
.sym svg text.s { font-size: 8.5px; font-weight: 500; }
.sym svg text.big { font-size: 15px; }
.sym svg text.mid { font-size: 13px; }
.sym svg text.huge { font-size: 32px; }
.sym svg text.o { fill: #e65100; font-size: 11px; }
svg.wide text { font-size: 15px; }
svg.wide text.s { font-size: 15px; font-weight: 600; }
svg.wide text.xs { font-size: 13px; font-weight: 500; }
svg.wide text.big { font-size: 24px; }

/* boxed note-flag numbers */
.md-typeset .flag {
  display: inline-block; min-width: 1.7em; padding: .05em .3em; text-align: center;
  font-weight: 700; border: 2px solid currentColor; border-radius: 3px; line-height: 1.3;
}

/* ---------- Embedded test logger ---------- */
.logger-frame {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 560px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  margin-top: 1rem;
}