/* Roadmap Page Styles */

:root {
    --rm-card-bg: #ffffff;
    --rm-card-border: #E5E7EB; /* gray for table borders */
    --rm-soft-border: rgba(0, 0, 0, 0.08); /* subtle card border */
    --rm-muted: #6B7280; /* muted text on light */
    --rm-text: #121314; /* main dark text */
    --rm-accent: #b8ff63; /* match site highlight */
    --rm-purple: #7C3AFF;
}


.rm-panels {
    position: relative;
    padding-top: var(--spacing-64-48);
}

/* Panel card */
.rm-panel {
    /*background: #ffffff;*/
    background: radial-gradient(ellipse 80% 30% at bottom center,
    rgba(255, 255, 255, 0.55) 0%,
    #ffffff 100%);

    padding: var(--pad-64-24);
    border-radius: var(--pad-64-24);
    margin-bottom: var(--spacing-24-8);
    border: 1px solid #e0e0e0;
}

/* Header */
.rm-panel-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.rm-panel-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f3f4f6;
    border: 1px solid var(--rm-card-border);
}

.rm-panel-title {
    color: var(--rm-text);
    font-size: var(--fs-32-24);
    margin: 0;
    font-weight: var(--font-weight-semibold);
}

.rm-panel-sub {
    margin: 8px 0 0 0;
}

/* Table wrapper enables horizontal scrolling */
.rm-table-wrapper {
    background: #ffffff;
    border-radius: var(--radius-24-16);
    border: 1px solid var(--rm-card-border); /* gray table border */
    overflow: auto; /* enable horizontal scroll if needed */
    -webkit-overflow-scrolling: touch; /* smooth on iOS */
    margin-top: var(--spacing-32-24);
}

/* Table base styles */
.rm-table {
    width: 100%;
    min-width: 900px; /* allow horizontal scroll on small screens */
    border-collapse: separate;
    border-spacing: 0; /* no gaps between cells */
    color: var(--rm-text);
}

.rm-table thead th {
    background: #000000; /* black header */
    color: #ffffff;
    font-size: var(--fs-20-18);
    font-weight: var(--font-weight-semibold);
    text-transform: none;
    text-align: left;
    padding: var(--spacing-24-16);
    /*padding: 16px 24px 16px 24px ;*/
    border-right: 1px solid #000; /* keep header cells unified */
    white-space: nowrap;
}

.rm-table thead th img {
    width: 24px;
}

.rm-table thead th:last-child {
    border-right: none;
}

.rm-table tbody td {
    background: #ffffff; /* white rows */
    /*padding: var(--spacing-16-8);*/
    padding: var(--spacing-24-16);

    font-size: var(--fs-16-14);
    vertical-align: top;
    border-bottom: 1px solid var(--rm-card-border); /* row separators */
}

.rm-table tbody tr:first-child td {
    width: 195px;
}

.rm-table tbody tr:last-child td {
    border-bottom: none;
}

/* Column semantics */
.rm-table td.type {
    font-weight: 600;
    white-space: nowrap;
}

.rm-table td.type img {
    width: 32px;
    margin-right: 3px;
}

/* Stage column chips */
.rm-table td.stage {
    display: flex;
    border-bottom: none;
    border-top: 1px solid var(--rm-card-border);
    margin-top: -1px;
}

.rm-table tr:first-child td.stage {
    border-top: 1px solid #000;
}


/* Stage chips */
.stage-chip {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: var(--fs-16-14);
    line-height: 1;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #374151; /* dark gray text on light chip */
    background: #f7f7f7;
    white-space: nowrap;
    font-weight: var(--font-weight-semibold);

}

.stage-chip.mvp {
    background: var(--rm-accent);
    color: #121314;
    border-color: #d9ffa6;
}

.stage-chip.future {
    background: #141517;
    color: #C9CDD4;
}

.stage-chip.moonshot {
    background: var(--rm-purple);
    color: #fff;
    border-color: rgba(124, 58, 255, 0.8);
}

/* Responsive behavior */
@media (max-width: 992px) {
    .rm-table {
        min-width: 820px;
    }
}

/* Mobile: keep first column sticky, horizontal scroll for the rest */
@media (max-width: 768px) {
    .rm-table-wrapper {
        overflow-x: auto;
    }

    .rm-table {
        min-width: 900px;
    }

    /* Sticky first column (Type) */
    .rm-table thead th:first-child,
    .rm-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #ffffff; /* ensure the sticky cell covers content beneath */
        border-right: 2px solid #121314;
    }

    .rm-table thead th:first-child {
        background: #000000; /* header remains black */
        color: #ffffff;
        z-index: 3; /* above body cells */
        border-right: 1px solid #000000;
    }

    /* Stack Type cell image above text */
    /*.rm-table tbody td.type {*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    align-items: flex-start;*/
    /*    white-space: normal;*/
    /*}*/
    .rm-table tbody td.type img {
        display: block;
        margin: 0 0 16px 0;
        width: 32px; /* keep same size */
    }

    .rm-table tbody tr:first-child td {
        width: auto;
    }

}


/* Stage chips default (non-highlight) in stage column */
.rm-table td.stage .stage-chip {
    background: #FFFFFF;
    border: 1px solid #D1D1D1;
    color: #686869; /* non-highlight text/icon */
}

/* Highlighted stage chip styles */
.rm-table td.stage .stage-chip.highlight {
    color: #121314; /* highlighted text/icon */
    border-color: #121314;
}

.rm-table td.stage .stage-chip.highlight.mvp {
    background: #D8FF5A; /* MVP */
}

.rm-table td.stage .stage-chip.highlight.future {
    background: #3BF5FF; /* Future */
}

.rm-table td.stage .stage-chip.highlight.moonshot {
    background: #7C3AFF; /* Moonshot */
    color: #fff; /* Ensure white text on purple */
}

/* Ensure icons inside chips align with text color when inlined */
.rm-table td.stage .stage-chip svg {
    display: inline-block;
    vertical-align: -2px;
}


/* Overrides for rm-panel header icon and alignment */
.rm-panel-header {
    align-items: center; /* vertically center text next to the icon */
}

/* Only modify the icon container when it uses an image variant */
.rm-panel-icon--img {
    width: auto; /* allow icon to size to its image */
    height: auto;
    background: transparent; /* remove gray circle background */
    border: 0;
    border-radius: 0;
    padding: 0;
}

.rm-panel-icon--img img {
    display: block;
    width: var(--spacing-68-56); /* responsive, suitable with content */
    height: auto;
}

/* Mobile layout: place the image icon after the title on its own row */
@media (max-width: 768px) {
    .rm-panel-header {
        flex-direction: column; /* stack header content */
        align-items: flex-start; /* left-align text and icon */
    }

    /* Ensure the title block appears before the icon */
    .rm-panel-header .rm-panel-icon--img {
        order: 1;
        margin-top: 8px; /* space between title and icon */
    }

    .rm-panel-header > :not(.rm-panel-icon--img) {
        order: 2;
        width: 100%;
    }
}