.innerContainer
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;

    padding: var(--layout-body-spacing);
    gap: calc(var(--layout-body-spacing) * 2);
}

.innerContainer.announcements
{
    gap: calc(var(--layout-gap) * 5);
}
.frameOverview, .frameHighlight, .linkButton, .frameImage:not(.frameImage_frame .frameImage), .featureEntry, .frameEditionContainer-parent, .frameEditionContainer, .editions-row, .frameImage_frame
{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover var(--animation-appear-cover);
}

.frameFeatures, .textElement, .featureRow, .announcementPostIcon, .frameTextParagraph, .frameTextRow, .frameTextTag
{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover calc(var(--animation-appear-cover) / 2);
}

.frameOverview
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;   
    
    gap: calc(5 * var(--layout-gap));
}

.frameHighlight iframe
{
    width: 100%;
    
    height: 80vh;
    min-height: 600px;

    border: none;
    display: block;
}


.frameHighlight, .frameTextContainer
{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    
    padding: 0 var(--layout-body-spacing-inner);
    gap: calc(var(--layout-gap) * 4);
}

.frameGridRow
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(2 * var(--layout-gap));
}
.frameGridRow .frameTextParagraph
{
    gap: var(--layout-gap);
}

.frameTextContainer
{
    gap: calc(var(--layout-gap) * 2);
    align-items: start;
}
.frameTextContainer > .textElement
{
    width: 100%;
}

.frameTextParagraph.fullWidth
{
    width: 100%;
}

.frameTextParagraph > .textElement
{
    line-height: 160%;
}
.frameParagraphSpacing
{
    width: 100%;
}
.textElement.indention
{
    padding-left: calc(2 * var(--layout-gap));
}
.textElement.indentionHalf
{
    padding-left: calc(1 * var(--layout-gap));
}

.frameTextParagraphSpacing
{
    width: 100%;
    height: var(--layout-gap);
}
.frameTextParagraphSpacingHalf
{
    width: 100%;
    height: calc(var(--layout-gap) / 2 );
}
.frameTextParagraphSpacingDouble
{
    width: 100%;
    height: calc(var(--layout-gap) * 2);
}

.frameTextParagraph-ImageGrid
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: var(--layout-gap);
    grid-row-gap: var(--layout-gap);

    height: fit-content;
}
.frameTextParagraph-ImageGrid.padding
{
    padding: var(--layout-gap);
}

.frameTextParagraph-ImageGrid.roadPresetPreview
{    
    grid-template-columns: repeat(var(--layout-grid-images-roadPresetsPreview), 1fr);
}

.frameFeatures
{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;

    gap: calc(var(--layout-gap) * 4);
}

.frameLabelContainer
{
    display: flex;
    width: 100%;
    height: 100%;
    gap: calc(var(--layout-gap) * 3);

    flex-direction: column;
    justify-content: first baseline;
    align-items: flex-start;
}
elements-linktree-rpfmvr, elements-linktree-rpfmvr.linkTree, elements-linktree-mms, elements-linktree
{
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    height: fit-content;
    gap: var(--layout-gap);
}
elements-linktree-rpfmvr.mobileLinkTree, elements-linktree
{
    flex-direction: column;
}
elements-linktree-rpfmvr.linkTree > .frameLinkContainer
{
    justify-content: center;
    width: 100%;
}

.frameLinkContainer.scaleEven
{
     display: flex;
     width: 100%;
}
.frameLinkContainer.scaleEven .linkButton { flex: 1; }

.linkTree.grouped
{
    padding: var(--layout-gap);
    margin: var(--layout-gap) 0px;
    border-radius: var(--layout-border-radius);
    border: 1px solid var(--color-background-border-II);

    display: flex;
    gap: var(--layout-gap);
    flex-direction: column;
}

.frameLinkContainer.alignCenter
{
    height: 100%;
}
.frameOverview > .frameLabelContainer
{
    max-width: var(--layout-frames-overview-labels-maxWidth);
}
.frameOverview.extendWidth > .frameLabelWhite.textElement.headerLarge
{
    text-align: center;
    width: 100%;
}

.frameLinkContainer.roadmapGroup
{
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
}

.frameLinkContainer.roadmapGroup .linkButton
{
    flex: 1 1 auto;
    width: fit-content;
    min-width: 160px !important;
    min-height: 25px;
    text-align: center;
}

/* editions section */

.frameEditionContainer-parent
{
    width: 100%;
    height: fit-content;

    display: flex;
    flex-direction: column;
    align-self: stretch;
    
    padding: var(--layout-gap);

    background: var(--color-background-secondary-II);
    border-radius: var(--layout-border-radius);
    border: 1px solid var(--color-background-border-II);
}

.frameEditionContainer
{
    flex: 1 0 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;

    padding: var(--layout-gap);
    gap: var(--layout-gap);
}

.editions-row
{
    width: 100%;
    display: flex;
    height: calc(2.5 * var(--layout-gap));
    align-items: stretch;

    padding-bottom: var(--layout-gap);
    gap: var(--layout-gap);
    
    border-bottom: 1px solid var(--color-background-border-II);
}
.editions-row .editions-column:not(:first-child)
{
    border-left: 1px solid var(--color-background-border-II);
}

.editions-column
{
    display: flex;
    height: 100%;

    align-items: center;
    align-self: stretch;
    flex: 1 0 0;

    padding: 0 var(--layout-gap);
    gap: var(--layout-gap);
}
.editions-column.feature
{
    min-width: 30%;
}

.editions-icon
{
    height: 100%;
    aspect-ratio: 1/1;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--color-background-secondary);
    border-radius: calc(1.5 * var(--layout-border-radius));
}
.editions-icon img
{
    height: calc(100% - 1 * var(--layout-padding));
    aspect-ratio: 1/1;
}

.editions-text:not(.editions-tag .editions-text)
{
    flex: 1 0 0;
}

.editions-tag
{
    height: 100%;
    width: fit-content;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--color-background-secondary);
    border-radius: calc(1.5 * var(--layout-border-radius));

    padding: 0 var(--layout-padding);
}

/* editions section */

elements-framelabelgrouprow-roadsystem, .elements-framelabelgrouprow
{
    width: 100%;
    display: flex;
    flex-direction: row;

    justify-content: space-between;
}

.frameLabelGroup
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;

    gap: var(--layout-gap);
}
.frameLabelGroup.alignCenter
{
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.frameLabelGroup.alignTextRight > .frameLabelWhite.textElement.header
{
    width: 100%;
    text-align: right;
}

.frameLabelGroup.flexRow { flex-direction: row; }

.frameButton
{
    width: fit-content;
    max-height: calc(100% - 2 * var(--layout-gap));
    aspect-ratio: 1/1;

    padding: var(--layout-gap);

    background: var(--color-background-primary);
    border-radius: var(--layout-border-radius);
}
.frameButton:hover
{
    transform: scale(var(--animation-scale-adjust));
    transition: transform 0.4s ease;

    cursor: pointer;
}

.frameSpacing
{
    height: var(--layout-border-height);
    align-self: stretch;

    border-radius: calc(var(--layout-border-radius) / 2);
    background: var(--color-background-border);
}
.frameSpacing.gap
{
    margin: var(--layout-gap) 0px;
}

.frameLinkContainer-parent
{
    width: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;

    gap: var(--layout-gap);
}

.frameLinkContainer
{
    display: flex;
    height: var(--layout-frames-linkContainer-height);
    width: 100%;
    
    gap: var(--layout-gap);

    align-items: flex-start;
    flex-shrink: 0;
    align-self: stretch;
}

.linkButton
{
    display: flex;
    align-items: center;
    align-self: stretch;

    width: fit-content;
    padding: var(--layout-gap);
    gap: var(--layout-gap);

    border: 1px solid var(--color-background-border);
    border-radius: calc(var(--layout-border-radius) * 2);
    background: var(--color-background-secondary-II);
}
.linkButton.extension, .linkButton.extended
{
    border-radius: var(--layout-border-radius);
    width: calc(var(--layout-frames-linkContainer-elem-width));
}
.linkButton.extension.icon, .linkButton.extended.icon
{
    background: var(--color-background-secondary-IV);
}

.linkButton.extended
{
    width: 180px;
}

.linkButton.icon
{
    width: fit-content;
}
.linkButton:hover
{
    transform: scale(var(--animation-scale-adjust));
    transition: transform 0.4s ease;

    cursor: pointer;
}
.linkButton.extended:hover
{
    transform: scale(var(--animation-scale-adjust-small));
}
.linkButton:hover, .linkButton.selected
{
    border: 1px solid var(--color-assets-DynamicRoads1);
}

.linkButton.important { background: var(--color-purple); }
.linkButton.important.alternative { background: var(--color-red-dark); }

.linkButton.RPMVR1, .element.RPMVR1 { background: var(--color-assets-RoadPresetsMVR1); }
.linkButton.RPMVR2, .element.RPMVR2 { background: var(--color-assets-RoadPresetsMVR2); }
.linkButton.RPMVR3, .element.RPMVR3 { background: var(--color-assets-RoadPresetsMVR3); }
.linkButton.RPMVR4, .element.RPMVR4 { background: var(--color-assets-RoadPresetsMVR4); }
.linkButton.DR1, .element.DR1 { background: var(--color-assets-DynamicRoads1); }
.linkButton.DR1alt, .element.DR1alt { background: var(--color-assets-DynamicRoads1alt); }
.linkButton.DR2, .element.DR2 { background: var(--color-assets-DynamicRoads2); }

.linkButton.DT1, .element.DT1 { background: var(--color-assets-DynamicTraffic1); }
.linkButton.DT2, .element.DT2 { background: var(--color-assets-DynamicTraffic2); }


.linkButtonIcon
{
    height: 100%;
    aspect-ratio: 1/1;
}
.linkButtonIcon.premiumIcon
{
    max-height: calc(var(--layout-frames-featureEntry-row-height) * 0.8);
}

.linkButtonLabelArea
{
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    flex: 1 0 0;
}

.linkButtonLabel
{
    width: 100%;
    text-align: left;
}
.linkButtonLabel.infoLarge
{
    font-weight: 600;
}

.frameImage_frame
{
    height: calc(100% - 2 * var(--layout-gap));
    max-width: calc(100% - 2 * var(--layout-gap));

    padding: var(--layout-gap);

    background: var(--color-background-primary);
    border: 1px solid var(--color-background-border-II);

    border-radius: calc(2 * var(--layout-border-radius));
}
.frameImage_frame.hasLink:hover
{
    cursor: pointer;
}

.frameImage
{
    height: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;

    border-radius: calc(2 * var(--layout-border-radius));
}
.frameImage:not(.frameImage_frame .frameImage):hover, .frameImage_frame:hover
{
    transform: scale(var(--animation-scale-adjust-small));
    transition: transform 0.4s ease;
}

.frameImage.noZoom:hover, .frameImage.noZoom .frameImage:hover, 
.frameImage_frame.noZoom:hover, .frameImage_frame.noZoom .frameImage_frame:hover { transform: none !important; }

.frameImage.widthBased
{
    height: auto;
    width: 100%;
    aspect-ratio: 16/9;

    border-radius: calc(2 * var(--layout-border-radius));
}
.frameImage.square
{
    aspect-ratio: 1/1;
}
.frameImage.autoHeight
{
    aspect-ratio: auto;
}

.frameImage_frame .frameImage
{
    border-radius: calc(1.5 * var(--layout-border-radius));
}


.frameImage.overview
{
    max-height: var(--layout-frames-overview-height);
}
.frameImage.announcement-image
{
    background: var(--color-text-primary);
}

.frameFeaturesGrid
{
    width: 100%;

    display: grid;
    grid-template-columns: repeat(var(--layout-grid-features-large), 1fr);
    grid-column-gap: calc(var(--layout-gap) * 2);
    grid-row-gap: calc(var(--layout-gap) * 2);
}
.frameFeaturesGrid.features
{
    grid-template-columns: repeat(var(--layout-grid-features), 1fr);
}
.frameFeaturesGrid.extensions
{
    grid-template-columns: repeat(var(--layout-grid-features-extensions), 1fr);
}
.frameFeaturesGrid.announcements
{
    grid-template-columns: repeat(var(--layout-grid-announcements), 1fr);
}

.frameFeaturesGridDynamic 
{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--layout-grid-card-min-width-default), 1fr));

    grid-column-gap: calc(var(--layout-gap) * 2);
    grid-row-gap: calc(var(--layout-gap) * 2);
}

.frameFeaturesGridDynamic.largeCard
{
    grid-template-columns: repeat(auto-fit, minmax(var(--layout-grid-card-min-width-large), 1fr));
}

.frameFeaturesGridDynamic.smallCard 
{
    grid-template-columns: repeat(auto-fit, minmax(var(--layout-grid-card-min-width-small), 1fr));
}


.featureEntryHeader
{
    grid-column: 1 / -1;
}

.featureEntry
{
    display: flex;
    padding: calc(var(--layout-gap) * 2);

    flex-direction: column;
    align-items: flex-start;
    gap: var(--layout-gap);

    border-radius: calc(2 * var(--layout-border-radius));
    border: 1px solid var(--color-background-border);
    background: var(--color-background-secondary-II);
}
.featureEntry.expandHeight
{
    height: fit-content;
}
.featureEntry:hover
{
    transform: scale(var(--animation-scale-adjust-small));
    transition: transform 0.4s ease;

    border: 1px solid var(--color-assets-DynamicRoads1);
}


.featureRow
{
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    justify-content: space-between;

    width: 100%;
    height: var(--layout-frames-featureEntry-row-height);
    gap: var(--layout-gap);
}
.featureRow.spacing
{
    height: calc(var(--layout-frames-featureEntry-row-height) * 0.8);
    justify-content: space-between;
}
.featureRow.spacing.expandHeight
{
    min-height: calc(var(--layout-frames-featureEntry-row-height) * 0.8);
    height: fit-content;
}
.featureRow.fitHeight
{
    min-height: fit-content;
}

/* development progress container */

.frameDevelopmentProgressContainer
{
    width: calc(100% - 2 * var(--layout-gap));
    height: fit-content;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;

    gap: calc(1 * var(--layout-gap));
    padding: var(--layout-gap);

    background: var(--color-background-secondary-II);

    border: 1px solid var(--color-background-border-II);
    border-radius: calc(2 * var(--layout-border-radius));
}

elements-mms-progress, .developmentProgressEntry, elements-progress, .developmentProgressEntry
{
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.developmentProgressBar
{
    width: 60%;

    border-radius: calc(1 * var(--layout-border-radius));    
    background: var(--color-background-primary);
}
.developmentProgressBar .frameLabelWhite
{
    height: 100%;
}

.developmentProgressBarLabel
{
    height: 100%;
    transform: translateY(-100%);
}

.developmentProgressBar.fill
{
    height: 100%;
    background: var(--color-purple);
}

.multiElementGrid
{
    width: calc(100% - 2 * var(--layout-gap));
    height: fit-content;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;

    gap: calc(2 * var(--layout-gap));
    padding: var(--layout-gap);
}

.multiElementGridEntry
{    
    background: var(--color-background-secondary-II);

    border: 1px solid var(--color-background-border-II);
    border-radius: calc(2 * var(--layout-border-radius));

    width: calc(100% - 2 * var(--layout-gap));
    min-height: calc(4 * var(--layout-gap));
    
    height: fit-content;
    display: flex;
    flex-direction: column;

    display: flex;
    gap: var(--layout-gap);
    padding: var(--layout-gap);
}


.featureEdition
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;

    width: fit-content;
    text-align: center;

    padding: var(--layout-padding);
    gap: var(--layout-padding);

    border-radius: calc(var(--layout-border-radius));

    text-transform: uppercase;
}
.featureEdition.minWidth
{
    min-width: calc(var(--layout-gap) * 1.5);
}

.featureLabelDescription
{
    color: var(--color-text-secondary-alt);

    height: 100%;
    flex: 1;
}

.featureEntry.coreEdition > .featureRow > .featureIcon 
{
    filter: var(--filter-assets-DynamicRoads1);
}
.featureEntry.extensionEdition > .featureRow > .featureIcon 
{
    filter: var(--filter-assets-RoadPresetsMVR4);
}
.featureEntry.systemEdition > .featureRow > .featureIcon 
{
    filter: var(--filter-assets-DynamicRoads1alt);
}
.featureEntry.newEdition > .featureRow > .featureIcon 
{
    filter: var(--filter-color-red-light);
}


.featureEntry.coreEdition > .featureRow > .featureEdition,
.featureEntry.coreEdition > .featureTechnicalInfo > .featureRow > .featureEdition
{
    background: var(--color-assets-DynamicRoads1);
}
.featureEntry.extensionEdition > .featureRow > .featureEdition ,
.featureEntry.extensionEdition > .featureTechnicalInfo > .featureRow > .featureEdition
{
    background: var(--color-assets-RoadPresetsMVR4);
}
.featureEntry.systemEdition > .featureRow > .featureEdition ,
.featureEntry.systemEdition > .featureTechnicalInfo > .featureRow > .featureEdition
{
    background: var(--color-assets-DynamicRoads1alt);
}
.featureEntry.newEdition > .featureRow > .featureEdition ,
.featureEntry.newEdition > .featureTechnicalInfo > .featureRow > .featureEdition
{
    background: var(--color-red-light);
}


.featureEntry.coreEdition > .featureRow > .featureEdition.update,
.featureEntry.coreEdition > .featureTechnicalInfo > .featureRow > .featureEdition.update,
.featureEdition.update
{
    background: var(--color-assets-RoadPresetsMVR1);
}

.featureEntry.coreEdition > .featureRow > .featureEdition.new,
.featureEntry.coreEdition > .featureTechnicalInfo > .featureRow > .featureEdition.new
{
    background: var(--color-assets-DynamicTraffic1);
}

.featureEntry.coreEdition > .featureRow > .featureEdition.soon,
.featureEntry.coreEdition > .featureTechnicalInfo > .featureRow > .featureEdition.soon
{
    background: var(--color-red-light);
}


.featureEntry.coreEdition > .featureRow > .featureLabelheader.version
{
    color: var(--color-assets-DynamicRoads1);
}
.featureEntry.extensionEdition > .featureRow > .featureLabelheader.version
{
    color: var(--color-assets-RoadPresetsMVR4);
}
.featureEntry.systemEdition > .featureRow > .featureLabelheader.version
{
    color: var(--color-assets-DynamicRoads1alt);
}


.featureEntry > .featureRow > .featureLabelheader.version 
{
    text-transform: uppercase;
}

.featureIcon.gamePurple
{
    filter: var(--filter-color-purple);
}

.featureEdition.gamePurple
{
    background: var(--color-purple);
}

/* announcement tags */
.featureEntry.update > .featureRow > .featureEdition.tag
{
    background: var(--color-assets-DynamicTraffic1);
}
.featureEntry.changelog > .featureRow > .featureEdition.tag
{
    background: var(--color-assets-RoadPresetsMVR4);
}
.featureEntry > .featureRow > .featureEdition.versionTag.alpha
{
    background: var(--color-red-dark);
}
.featureEntry > .featureRow > .featureEdition.versionTag.beta
{
    background: var(--color-red-light);
}

.featureEntry.update > .featureRow > .featureIcon 
{
    filter: var(--filter-assets-DynamicTraffic1);
}
.featureEntry.changelog > .featureRow > .featureIcon 
{
    filter: var(--filter-assets-RoadPresetsMVR4);
}


.featureTechnicalInfo
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;

    width: 100%;
    gap: calc(var(--layout-gap) / 2);
}

.announcementPostInfo
{
    display: flex;
    align-items: flex-start;
    align-self: stretch;

    height: var(--layout-frames-postInfo-row-height);
    gap: var(--layout-gap);
}

.announcementPostIcon
{
    height: calc(100% - 2 * var(--layout-padding));
    aspect-ratio: 1/1;

    padding: var(--layout-padding);

    border-radius: calc(2 * var(--layout-border-radius));
    background: var(--color-background-secondary);
}

.announcementPostLabels
{
    height: calc(100% - 2 * var(--layout-padding));
    width: 100%;
    
    padding: var(--layout-padding) 0px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    flex: 1 0 0;
}
.announcementPostLabels .infoSmall
{
    color: var(--color-text-secondary-alt);
}

.announcementPostInfo:hover
{
    transform: scale(var(--animation-scale-adjust-small));
    transition: transform 0.4s ease;
}

.frameTextRow
{
    display: flex;
    align-items: flex-start;
    align-self: stretch;

    width: calc(100% - 2 * var(--layout-padding));
    height: calc(0.9 * var(--layout-frames-postInfo-row-height));

    gap: var(--layout-gap);
    padding: var(--layout-padding);
}
.frameTextRow.box, .frameTextParagraph.box
{
    background: var(--color-background-primary) !important;
    
    width: calc(100% - 2 * (var(--layout-padding) + var(--layout-padding))) !important;
    margin: var(--layout-padding) !important;

    border-radius: calc(1 * var(--layout-border-radius)) !important;
}

.frameTextTag
{
    display: flex;
    justify-content: center;
    align-items: center;

    width: fit-content;
    height: calc(100% - 2 * var(--layout-padding));
    padding: var(--layout-padding);
    
    gap: var(--layout-gap);

    border-radius: calc(1 * var(--layout-border-radius));
}

.hightlightBackground.DR1, .frameTextTag.DR1 { background: var(--color-assets-DynamicRoads1); }
.hightlightBackground.DR2, .frameTextTag.DR2 { background: var(--color-assets-DynamicRoads2); }
.hightlightBackground.RPMVR1, .frameTextTag.RPMVR1 { background: var(--color-assets-RoadPresetsMVR1); }
.hightlightBackground.RPMVR2, .frameTextTag.RPMVR2 { background: var(--color-assets-RoadPresetsMVR2); }
.hightlightBackground.RPMVR3, .frameTextTag.RPMVR3 { background: var(--color-assets-RoadPresetsMVR3); }
.hightlightBackground.RPMVR4, .frameTextTag.RPMVR4 { background: var(--color-assets-RoadPresetsMVR4); }
.hightlightBackground.DT1, .frameTextTag.DT1 { background: var(--color-assets-DynamicTraffic1); }
.hightlightBackground.DT2, .frameTextTag.DT2 { background: var(--color-assets-DynamicTraffic2); }

.hightlightBackground.redDark, .frameTextTag.redDark { background: var(--color-red-dark); }
.hightlightBackground.redLight, .frameTextTag.redLight { background: var(--color-red-light); }

.hightlightBackground.gray, .frameTextTag.gray { background: var(--color-background-border-II); }

.frameTextTag.smaller
{
    padding: calc(var(--layout-padding) / 2) calc(var(--layout-padding) * 2);
    margin: var(--layout-padding) 0px;
}

.frameTextParagraphSpacingFlex
{
    height: 100%;
    flex: 1 0 0;
}

.frameTextParagraph.border
{
    border: 1px solid var(--color-background-border-II);
    border-radius: calc(1 * var(--layout-border-radius));

    padding: var(--layout-padding);
}

.roadmapContent, .highlightSectionContent.extensions
{
    display: flex;
    flex-direction: column;

    width: 100%;

    height: fit-content;

    gap: calc(var(--layout-gap) * 1);

    background: none !important;
}

.roadmapContent.homepageContent .frameTextParagraph-ImageGrid
{
    grid-template-columns: repeat(auto-fill, 6vw);
}


.frameRoadmap
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    
    gap: calc(2 * var(--layout-gap));
}
.frameRoadmap *, .announcementBlock *, .homepageBlock *
{
    text-transform: none !important;
}

.frameRoadmap .frameLabelGroup
{
    margin-bottom: var(--layout-gap);
}

.frameRoadmapSpacing
{
    height: calc(10 * var(--layout-gap));
}
.frameRoadmapSpacingSmall
{
    height: calc(4 * var(--layout-gap));
}

.roadmapCard,
.element
{
  border: 1px solid rgba(255, 255, 255, 0.05);
}


/* Done */
.roadmapCard.cardDone, .element.cardDone { background: var(--color-roadmapCard-done-background); }
.roadmapCard.cardDone:not(.cardOnly) > .frameLabelGray, .textElement.cardDone, .element.cardDone { color: var(--color-roadmapCard-done-textcolor); }

/* Development */
.roadmapCard.cardDevelopment, .element.cardDevelopment { background: var(--color-roadmapCard-development-background); }
.roadmapCard.cardDevelopment:not(.cardOnly) > .frameLabelGray, .textElement.cardDevelopment, .element.cardDevelopment { color: var(--color-roadmapCard-development-textcolor); }

/* Planning */
.roadmapCard.cardPlanning, .element.cardPlanning { background: var(--color-roadmapCard-planning-background); }
.roadmapCard.cardPlanning:not(.cardOnly) > .frameLabelGray, .textElement.cardPlanning, .element.cardPlanning { color: var(--color-roadmapCard-planning-textcolor); }

/* Extension */
.roadmapCard.cardExtension, .element.cardExtension { background: var(--color-roadmapCard-extension-background); }
.roadmapCard.cardExtension:not(.cardOnly) > .frameLabelGray, .textElement.cardExtension, .element.cardExtension { color: var(--color-roadmapCard-extension-textcolor); }

/* Selection */
.roadmapCard.cardSelection, .element.cardSelection { background: var(--color-roadmapCard-selection-background); }
.roadmapCard.cardSelection:not(.cardOnly) > .frameLabelGray, .textElement.cardSelection, .element.cardSelection { color: var(--color-roadmapCard-selection-textcolor); }


/* Warning & Error */
.roadmapCard.cardWarning > .frameLabelGray, .textElement.cardWarning, .element.cardWarning { color: var(--color-roadmapCard-warning-textcolor); }
.roadmapCard.cardError > .frameLabelGray, .textElement.cardError, .element.cardError { color: var(--color-roadmapCard-error-textcolor); }


/* Blocked */
.roadmapCard.cardBlocked, .element.cardBlocked { background: var(--color-roadmapCard-blocked-background); }
.roadmapCard.cardBlocked:not(.cardOnly) > .frameLabelGray, .textElement.cardBlocked, .element.cardBlocked { color: var(--color-roadmapCard-blocked-textcolor); }

/* Backlog */
.roadmapCard.cardBacklog, .element.cardBacklog { background: var(--color-roadmapCard-backlog-background); }
.roadmapCard.cardBacklog:not(.cardOnly) > .frameLabelGray, .textElement.cardBacklog, .element.cardBacklog { color: var(--color-roadmapCard-backlog-textcolor); }

/* Review */
.roadmapCard.cardReview, .element.cardReview { background: var(--color-roadmapCard-review-background); }
.roadmapCard.cardReview:not(.cardOnly) > .frameLabelGray, .textElement.cardReview, .element.cardReview { color: var(--color-roadmapCard-review-textcolor); }

/* Released */
.roadmapCard.cardReleased, .element.cardReleased { background: var(--color-roadmapCard-released-background); }
.roadmapCard.cardReleased:not(.cardOnly) > .frameLabelGray, .textElement.cardReleased, .element.cardReleased { color: var(--color-roadmapCard-released-textcolor); }

/* Urgent */
.roadmapCard.cardUrgent, .element.cardUrgent { background: var(--color-roadmapCard-urgent-background); }
.roadmapCard.cardUrgent:not(.cardOnly) > .frameLabelGray, .textElement.cardUrgent, .element.cardUrgent { color: var(--color-roadmapCard-urgent-textcolor); }

/* Research */
.roadmapCard.cardResearch, .element.cardResearch { background: var(--color-roadmapCard-research-background); }
.roadmapCard.cardResearch:not(.cardOnly) > .frameLabelGray, .textElement.cardResearch, .element.cardResearch { color: var(--color-roadmapCard-research-textcolor); }

/* Canceled */
.roadmapCard.cardCanceled, .element.cardCanceled { background: var(--color-roadmapCard-canceled-background); }
.roadmapCard.cardCanceled:not(.cardOnly) > .frameLabelGray, .textElement.cardCanceled, .element.cardCanceled{ color: var(--color-roadmapCard-canceled-textcolor); }

/* Experimental */
.roadmapCard.cardExperimental, .element.cardExperimental { background: var(--color-roadmapCard-experimental-background); }
.roadmapCard.cardExperimental:not(.cardOnly) > .frameLabelGray, .textElement.cardExperimental, .element.cardExperimental { color: var(--color-roadmapCard-experimental-textcolor); }

/* Strategic */
.roadmapCard.cardStrategic, .element.cardStrategic { background: var(--color-roadmapCard-strategic-background); }
.roadmapCard.cardStrategic:not(.cardOnly) > .frameLabelGray, .textElement.cardStrategic, .element.cardStrategic { color: var(--color-roadmapCard-strategic-textcolor); }

/* Compliance */
.roadmapCard.cardCompliance, .element.cardCompliance { background: var(--color-roadmapCard-compliance-background); }
.roadmapCard.cardCompliance:not(.cardOnly) > .frameLabelGray, .textElement.cardCompliance, .element.cardCompliance { color: var(--color-roadmapCard-compliance-textcolor); }

/* Marketing */
.roadmapCard.cardMarketing, .element.cardMarketing { background: var(--color-roadmapCard-marketing-background); }
.roadmapCard.cardMarketing:not(.cardOnly) > .frameLabelGray, .textElement.cardMarketing, .element.cardMarketing { color: var(--color-roadmapCard-marketing-textcolor); }

/* Techdebt */
.roadmapCard.cardTechdebt, .element.cardTechdebt { background: var(--color-roadmapCard-techdebt-background); }
.roadmapCard.cardTechdebt:not(.cardOnly) > .frameLabelGray, .textElement.cardTechdebt, .element.cardTechdebt { color: var(--color-roadmapCard-techdebt-textcolor); }

/* Premium */
.roadmapCard.cardPremium, .element.cardPremium { background: var(--color-roadmapCard-premium-background); }
.roadmapCard.cardPremium:not(.cardOnly) > .frameLabelGray, .textElement.cardPremium, .element.cardPremium { color: var(--color-roadmapCard-premium-textcolor); }

/* Premium alternative */
.roadmapCard.cardPremiumAlternative, .element.cardPremiumAlternative { background: var(--color-roadmapCard-premiumAlternative-background); }
.roadmapCard.cardPremiumAlternative:not(.cardOnly) > .frameLabelGray, .textElement.cardPremiumAlternative, .element.cardPremiumAlternative { color: var(--color-roadmapCard-premiumAlternative-textcolor); }



.element-text.cardDone { color: var(--color-roadmapCard-done-textcolor) !important; }
.element-text.cardDevelopment { color: var(--color-roadmapCard-development-textcolor) !important; }
.element-text.cardPlanning { color: var(--color-roadmapCard-planning-textcolor) !important; }
.element-text.cardExtension { color: var(--color-roadmapCard-extension-textcolor) !important; }
.element-text.cardSelection { color: var(--color-roadmapCard-selection-textcolor) !important; }

.element-text.cardWarning { color: var(--color-roadmapCard-warning-textcolor) !important; }
.element-text.cardError { color: var(--color-roadmapCard-error-textcolor) !important; }

.element-text.cardBlocked { color: var(--color-roadmapCard-blocked-textcolor) !important; }
.element-text.cardBacklog { color: var(--color-roadmapCard-backlog-textcolor) !important; }
.element-text.cardReview { color: var(--color-roadmapCard-review-textcolor) !important; }
.element-text.cardReleased { color: var(--color-roadmapCard-released-textcolor) !important; }
.element-text.cardUrgent { color: var(--color-roadmapCard-urgent-textcolor) !important; }
.element-text.cardResearch { color: var(--color-roadmapCard-research-textcolor) !important; }
.element-text.cardCanceled { color: var(--color-roadmapCard-canceled-textcolor) !important; }
.element-text.cardExperimental { color: var(--color-roadmapCard-experimental-textcolor) !important; }
.element-text.cardStrategic { color: var(--color-roadmapCard-strategic-textcolor) !important; }
.element-text.cardCompliance { color: var(--color-roadmapCard-compliance-textcolor) !important; }
.element-text.cardMarketing { color: var(--color-roadmapCard-marketing-textcolor) !important; }
.element-text.cardTechdebt { color: var(--color-roadmapCard-techdebt-textcolor) !important; }
.element-text.cardPremium { color: var(--color-roadmapCard-premium-textcolor) !important; }
.element-text.cardPremiumAlternative { color: var(--color-roadmapCard-premiumAlternative-textcolor) !important; }



/* Frame Highlighting Section */

.frameHighlightSections
{
    display: flex;
    flex-direction: row;
    gap: var(--layout-gap);
    align-items: stretch;
}

.highlightSectionContent 
{
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap);

    width: 65%;
    min-height: 400px;
    padding: calc(var(--layout-gap) * 2);

    border-radius: calc(2 * var(--layout-border-radius));
    border: 1px solid var(--color-background-border);
    background: var(--color-background-secondary-II);

    /* --- Transition additions --- */
    opacity: 0.1;
    transition: opacity 0.25s ease-in-out;
    will-change: opacity;
}

.highlightSectionContent.extensions { width: 75%; }
.highlightSectionContent.roadmapContent { width: 82.5%; }

.highlightSectionContent.roadmap
{
    flex-direction: row;
    width: 100%;
}

/* Fades content in smoothly once loaded */
.highlightSectionContent.visible 
{
    opacity: 1;
}

.highlightSectionContent .frameHighlight
{
    padding: var(--layout-gap);
}

.highlightSectionEntryList
{
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap);
}

.highlightSectionEntryList.extensions { width: 25%; }
.highlightSectionEntryList.roadmapContent { width: 17.5%; }

.highlightSectionEntryList .featureEntry:hover
{
    transform: scale(var(--animation-scale-adjust-extrasmall));
}

.highlightSectionEntryList .featureTagRow, .featureRow .featureTagRow
{
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--layout-gap) / 2);
}

.featureRow .featureTagRow span
{
    max-height: 100%;
}

.highlightSectionTag
{
    display: inline-flex;
    align-items: center;

    padding: 4px calc(var(--layout-gap) / 1.3);

    border-radius: var(--layout-border-radius);
    border: 1px solid var(--color-background-border-II);
    background-color: var(--color-background-secondary);

    font-size: 0.8em;
    line-height: 1.4;
    white-space: nowrap;
}

.highlightSectionTag:hover
{
    transform: scale(var(--animation-scale-adjust-small));
    transition: border-color 0.2s ease, background 0.2s ease;
}

/* Header container holding title + version badge */
.featureHeaderRow {
    display: flex;
    align-items: center;
}

.featureHeaderRow.spaceBetween {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.featureVersionTagGroup {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* Hidden on Desktop */
.highlightSectionMobileTrigger,
.highlightSectionBackdrop
{
    display: none;
}

/* ─────────────────────────────────────────────────────────────
   Mobile Bottom Sheet Panel Styles
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) 
{
    .frameHighlightSections
    {
        flex-direction: column;
    }

    /* Mobile Trigger Wrapper - Displays the full feature entry card */
    .highlightSectionMobileTrigger
    {
        display: block;
        width: 100%;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        text-align: left;
        cursor: pointer;
    }

    .highlightSectionMobileTrigger .featureEntry
    {
        width: 100%;
        box-sizing: border-box;
        cursor: pointer;
    }

    /* Chevron indicator inside the mobile trigger header */
    .mobileDropdownIndicator
    {
        height: 24px;
        margin-left: 8px;
        aspect-ratio: 1;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border-radius: var(--layout-border-radius);
        border: 1px solid var(--color-background-border-II);
        background-color: var(--color-background-secondary);

        font-size: 0.85em;
        line-height: 1;
        opacity: 0.85;
        flex-shrink: 0;

        transition: background-color 0.2s ease, transform 0.2s ease;
    }
    .mobileDropdownIndicator:hover
    {
        background-color: var(--color-assets-DynamicRoads1);
        transform: scale(var(--animation-scale-adjust));
        transition: transform 0.4s ease;
    }

    .highlightSectionContent
    {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Backdrop Overlay */
    .highlightSectionBackdrop
    {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 998;
    }

    .highlightSectionBackdrop.active
    {
        opacity: 1;
        pointer-events: auto;
    }

    /* Slide-Up Panel Overlay */
    .highlightSectionEntryList
    {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: calc(100%) !important;
        overflow-y: auto;
        padding: var(--layout-gap);
        box-sizing: border-box;

        background: var(--color-background-secondary-II);
        border: 1px solid var(--color-background-border);
        border-radius: calc(2 * var(--layout-border-radius));

        display: none;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 999;
    }

    /* Active Mobile Panel State */
    .highlightSectionEntryList.mobileOpen
    {
        display: flex;
    }
    .highlightSectionEntryList.mobileOpen .featureEntry.alternativeBackground
    {
        background: var(--color-background-primary-II);
    }
}

/* 
─────────────────────────────────────────────────────────────
   Horizontal Variant: Entry List (Multi-Row Wrapped)
───────────────────────────────────────────────────────────── 
*/
.highlightSectionEntryList.horizontal 
{
    width: 100% !important; /* Spans full width above/below content */
    flex-direction: row;
    flex-wrap: wrap; /* Allows cards to wrap to the next row */
    gap: var(--layout-gap);
    
    padding-bottom: calc(var(--layout-gap) / 2);
}

/* Adjust card sizing to fit 4 to 5 per row before wrapping */
.highlightSectionEntryList.horizontal .featureEntry 
{
    /* Targets 5 cards per row by accounting for the 4 gaps between them */
    flex: 1 1 calc((100% - (3 * var(--layout-gap))) / 4);
    
    /* Set a maximum width so 4 cards per row still look proportionate */
    max-width: calc((100% - (2 * var(--layout-gap))) / 3);
    
    /* Prevents cards from getting unreadably narrow on smaller screens */
    min-width: 180px; 
    
    box-sizing: border-box;
}

.highlightSectionEntryList.horizontal .featureLabelDescription
{
    margin-bottom: 4px;
}

@media (max-width: 1024px) 
{
    .highlightSectionEntryList.horizontal
    {
        position: relative;

        display: flex !important;
        flex-direction: column;
        height: fit-content;

        padding-bottom: var(--layout-gap);
    }

    .highlightSectionEntryList.horizontal .featureEntry
    {
        width: 100% !important;
        max-width: 100% !important;
        height: fit-content;
        flex: 0;
    }

    .highlightSectionEntryList:has(.listModeEntry)
    {
        position: relative;

        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--layout-gap);
        align-items: stretch;

        height: fit-content;
        padding-bottom: var(--layout-gap);
    }

    .highlightSectionEntryList:has(.cardModeEntry)
    {
        position: relative;
        display: flex !important;
        flex-direction: column;
        height: fit-content;
        padding-bottom: var(--layout-gap);
    }
}



@media (max-width: 480px) 
{
    .frameFeaturesGridDynamic.largeCard,
    .frameFeaturesGridDynamic.smallCard 
    {
        grid-template-columns: 1fr;
    }
}