/* Keep supporting notes within the rail's viewport budget. */
body[data-theme-area="frontend"] .comp-rail .rail-info-extra .rail-extra-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
    /* Theme heading colors use !important; keep the section's accent color. */
    color: var(--accent) !important;
}

body[data-theme-area="frontend"] .comp-rail .rail-info-extra .rail-extra-content {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    font-size: 12px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

body[data-theme-area="frontend"] .comp-rail .rail-info-extra .rail-extra-content :is(h1, h2, h3, h4, h5, h6) {
    margin: 12px 0 5px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
}

body[data-theme-area="frontend"] .comp-rail .rail-info-extra .rail-extra-content > :first-child { margin-top: 0; }
body[data-theme-area="frontend"] .comp-rail .rail-info-extra .rail-extra-content > :last-child { margin-bottom: 0; }
body[data-theme-area="frontend"] .comp-rail .rail-info-extra .rail-extra-content :is(p, ul, ol, pre, blockquote) { margin-block: 0 8px; }
body[data-theme-area="frontend"] .comp-rail .rail-info-extra .rail-extra-content :is(ul, ol) { padding-left: 18px; }
body[data-theme-area="frontend"] .comp-rail .rail-info-extra .rail-extra-content :is(code, pre) { font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (min-width: 1200px) {
    body[data-theme-area="frontend"] .comp-rail {
        height: calc(100dvh - 56px - var(--sp-4, 16px) * 2);
    }

    body[data-theme-area="frontend"] .comp-rail .comp-rail-inner {
        box-sizing: border-box;
        min-height: 0;
        height: 100%;
        gap: 12px;
    }

    body[data-theme-area="frontend"] .comp-rail .comp-rail-inner > * { flex-shrink: 0; }

    body[data-theme-area="frontend"] .comp-rail .comp-rail-nav-window {
        flex: 1 1 0;
        min-height: 72px;
        /* Older theme sheets cap this window with !important. */
        max-height: none !important;
        align-content: start;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body[data-theme-area="frontend"] .comp-rail .rail-info-extra {
        display: flex;
        flex-direction: column;
        flex: 0 1 auto;
        min-height: 0;
        max-height: clamp(140px, 30dvh, 320px);
        overflow: hidden;
        margin-top: 0;
        padding-top: 12px;
        border-top: 1px solid var(--border);
    }

    body[data-theme-area="frontend"] .comp-rail .rail-info-extra .rail-extra-title { flex: 0 0 auto; }
}

@media (min-width: 1200px) and (max-height: 680px) {
    body[data-theme-area="frontend"] .comp-rail .comp-rail-inner { gap: 8px; padding: 12px; }
    body[data-theme-area="frontend"] .comp-rail .rail-info-extra { max-height: 100px; }
    body[data-theme-area="frontend"] .comp-rail .rail-facts { gap: 4px; }
}

@media (min-width: 769px) and (max-width: 1199.98px) {
    body[data-theme-area="frontend"] .comp-rail .comp-rail-nav-window {
        flex: 1 1 100%;
        max-height: 240px;
        overflow-y: auto;
        align-content: start;
    }
    body[data-theme-area="frontend"] .comp-rail .rail-info-extra {
        display: flex;
        flex-direction: column;
        flex: 1 1 100%;
        max-height: 160px;
        min-height: 0;
        overflow: hidden;
    }
}