.route-rules-page-title {
    font-family: var(--narrow-font);
    font-weight: 700;
}

.route-rules-page {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin: 0 0 28px;
    --route-rules-columns: 140px 36px minmax(0, 1fr) 365px;
}

.route-rules-sidebar {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: calc(100vh - 40px);
    min-height: 0;
}

.route-rules-toc {
    min-height: 0;
    overflow-y: auto;
    padding: 0 0 12px;
    scrollbar-width: thin;
}

.route-rules-updated {
    align-self: stretch;
    margin-top: auto;
    padding: 12px 16px 0 28px;
    color: #666;
    font: 13px/1.45 var(--default-font);
}

.route-rules-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.route-rules-toc li {
    margin: 0;
}

.route-rules-toc a {
    display: block;
    position: relative;
    padding: 2px 16px 2px 28px;
    color: #282828;
    font: 13px/1.55 var(--default-font);
    text-decoration: none;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.route-rules-toc li:nth-child(n+12):nth-child(-n+14) a {
    line-height: 1.3;
}

.route-rules-toc a::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 6px;
    width: 5px;
    height: 5px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}

.route-rules-toc a:hover,
.route-rules-toc a:focus-visible {
    color: #282828;
    text-decoration: none;
}

.route-rules-sheet.p20 {
    display: grid;
    grid-template-columns: var(--route-rules-columns);
    grid-template-rows: repeat(var(--route-rules-section-count), auto);
    column-gap: 14px;
    position: relative;
    isolation: isolate;
    min-width: 0;
    padding: 24px 0 24px 30px;
    background: transparent;
    border: 0;
}

.route-rules-sheet.p20::before {
    content: '';
    position: absolute;
    grid-column: 1 / 4;
    grid-row: 1 / -1;
    inset: -24px 0 -24px -30px;
    z-index: 0;
    background: #fff;
    border: 1px solid #ddd;
}

.route-rules-section {
    display: grid;
    grid-template-columns: var(--route-rules-columns);
    grid-column: 1 / -1;
    column-gap: 14px;
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 0 0 4px;
    scroll-margin-top: 20px;
}

.route-rules-section + .route-rules-section {
    padding-top: 18px;
}

.route-rules-section h2 {
    grid-column: 1;
    grid-row: 1 / span var(--route-rules-row-count);
    align-self: start;
    margin: 0;
    color: #473b24;
    font: bold 13px/1.45 var(--default-font);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.route-rules-section-number,
.route-rules-section-number:visited,
.route-rules-section-number:hover,
.route-rules-section-number:focus-visible {
    color: #9a7619;
    background: transparent;
    text-decoration: none;
}

.route-rules-row {
    display: contents;
}

.route-rules-number,
.route-rules-rule,
.route-rules-examples {
    margin: 0;
    padding: 0 0 10px;
    min-width: 0;
}

.route-rules-number {
    grid-column: 2;
    color: #90732b;
    font: bold 13px/1.45 var(--default-font);
    white-space: nowrap;
}

.route-rules-number a,
.route-rules-number a:visited,
.route-rules-number a:hover,
.route-rules-number a:focus-visible {
    color: inherit;
    background: transparent;
    text-decoration: none;
}

.route-rules-rule {
    grid-column: 3;
    padding-right: 36px;
    color: #222;
    font: 13px/1.45 var(--default-font);
    overflow-wrap: anywhere;
    scroll-margin-top: 20px;
}

.route-rules-examples {
    grid-column: 4;
    padding-left: 12px;
    color: var(--theme-link-color);
    font: 13px/1.45 var(--default-font);
    text-align: left;
}

.route-rules-example {
    display: inline-block;
    margin: 0 10px 5px 0;
    white-space: pre;
}

@supports (grid-template-columns: subgrid) {
    .route-rules-sheet.p20 {
        grid-template-columns: 140px 36px minmax(0, 1fr) min-content;
    }

    .route-rules-section {
        grid-template-columns: subgrid;
    }
}

@media (max-width: 1150px) {
    .route-rules-page {
        display: block;
    }

    .route-rules-sidebar {
        position: static;
        height: auto;
        margin-bottom: 16px;
    }

    .route-rules-toc {
        overflow: visible;
        padding: 0;
    }

    .route-rules-updated {
        margin-top: 8px;
        padding-top: 0;
    }

    .route-rules-toc ol {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
    }
}

@media (max-width: 930px) {
    .route-rules-sheet.p20 {
        display: block;
        padding-right: 30px;
        background: #fff;
        border: 1px solid #ddd;
    }

    .route-rules-page .route-rules-sheet.p20 {
        margin-left: -5px;
        margin-right: -5px;
        border: 0;
    }

    .route-rules-sheet.p20::before {
        display: none;
    }

    .route-rules-section,
    .route-rules-row {
        display: block;
    }

    .route-rules-section h2 {
        margin-bottom: 14px;
    }

    .route-rules-row {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 12px;
        margin-bottom: 10px;
    }

    .route-rules-number,
    .route-rules-rule,
    .route-rules-examples {
        padding: 0;
    }

    .route-rules-number {
        grid-column: 1;
    }

    .route-rules-rule,
    .route-rules-examples {
        grid-column: 2;
    }

    .route-rules-examples:not(:empty) {
        grid-column: 1 / -1;
        margin: 7px -30px 0;
        padding: 7px 30px 7px 78px;
        background: var(--theme-main-color);
        overflow-x: auto;
    }

    .route-rules-page .route-rules-examples:not(:empty) {
        background: transparent;
    }
}

@media (max-width: 560px) {
    .route-rules-toc a {
        padding: 2px 16px 2px 23px;
    }

    .route-rules-page:not(.photo-rules-page) .route-rules-toc li:nth-child(n+12):nth-child(-n+14) {
        grid-column: 1 / -1;
    }

    .route-rules-page:not(.photo-rules-page) .route-rules-toc li:nth-child(n+12):nth-child(-n+14) a {
        padding-right: 0;
    }

    .route-rules-page:not(.photo-rules-page) .route-rules-toc li:nth-child(n+12):nth-child(-n+14) a,
    .route-rules-page:not(.photo-rules-page) .route-rules-section:nth-child(n+12):nth-child(-n+14) h2 {
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .route-rules-updated {
        padding-left: 23px;
    }

    .route-rules-toc a::before {
        left: 4px;
    }

    .route-rules-sheet.p20 {
        padding: 18px 24px 18px 15px;
    }

    .route-rules-examples:not(:empty) {
        margin-right: -24px;
        margin-left: -15px;
        padding-right: 24px;
        padding-left: 63px;
    }

    .route-rules-section + .route-rules-section {
        padding-top: 14px;
    }
}