@import url("/assets/css/docs.css");

/* Reader-only behavior. Keep the document tree usable as the specification grows. */
@media (min-width: 901px) {
    .docs-reader__sidebar {
        max-height: calc(100vh - 3rem);
        padding-right: 0.35rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
    }
}

.docs-reader__sidebar .docs-reader__nav-depth2 {
    padding-left: 1.55rem;
    font-size: 0.73rem;
}

.docs-reader__sidebar nav > a small {
    flex: 0 0 auto;
    color: var(--sv2-muted);
    font-size: 0.62rem;
    font-weight: 500;
}

.docs-prose h4 {
    margin: 2rem 0 0.7rem;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    scroll-margin-top: 1.5rem;
}

.docs-prose table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0 2rem;
    overflow-x: auto;
    border-top: 1px solid var(--sv2-rule);
    border-left: 1px solid var(--sv2-rule);
    font-size: 0.82rem;
    line-height: 1.55;
    -webkit-overflow-scrolling: touch;
}

.docs-prose th,
.docs-prose td {
    min-width: 10rem;
    padding: 0.7rem 0.75rem;
    border: 0;
    border-right: 1px solid var(--sv2-rule);
    border-bottom: 1px solid var(--sv2-rule);
    text-align: left;
    vertical-align: top;
}

.docs-prose th {
    background: var(--sv2-paper-deep);
    color: var(--sv2-ink);
    font-weight: 700;
}

.docs-inline-note,
.docs-inline-warning {
    margin: 1.6rem 0;
    padding: 1rem 1.15rem;
    background: var(--sv2-paper-deep);
}

.docs-inline-note {
    border-left: 3px solid var(--sv2-denim);
}

.docs-inline-warning {
    border-left: 3px solid var(--sv2-apricot);
}

.docs-inline-note > strong,
.docs-inline-warning > strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    letter-spacing: 0.025em;
}

.docs-inline-note p,
.docs-inline-warning p {
    margin: 0;
    color: var(--sv2-muted);
    font-size: 0.9rem;
    line-height: 1.75;
}