/* ── Navigation section titles ─────────────────────────────────────── */
.md-nav__item--section>.md-nav__link {
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-top: 0.6em;
}

/* ── Byte-frame tables ────────────────────────────────────────────── */
.byte-frame {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.82rem;
    margin: 1em 0;
    overflow-x: auto;
    display: block;
}

.byte-frame th,
.byte-frame td {
    border: 1px solid var(--md-default-fg-color--lightest);
    text-align: center;
    padding: 0.35em 0.5em;
    white-space: nowrap;
}

/* Header row — field names */
.byte-frame .field {
    background: var(--md-primary-fg-color);
    color: var(--md-primary-bg-color);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Size row */
.byte-frame .size {
    background: var(--md-accent-fg-color);
    color: var(--md-accent-bg-color, #000);
    font-weight: 600;
    font-size: 0.78rem;
}

/* Byte offset row */
.byte-frame .offset {
    background: var(--md-default-fg-color--lightest);
    color: var(--md-default-fg-color--light);
    font-size: 0.75rem;
    font-style: italic;
}

/* Span label row (e.g. "Header 12B") */
.byte-frame .span-label {
    background: var(--md-primary-fg-color--light, #5c6bc0);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

/* Payload span */
.byte-frame .payload {
    background: var(--md-accent-fg-color);
    color: var(--md-accent-bg-color, #000);
    font-weight: 700;
    font-size: 0.9rem;
}