/* Depictio Timeline Custom Styling */

/* Completed items - Depictio Green */
.nt-timeline-dot.completed {
    background: #8BC34A !important; /* Depictio green */
    border-color: #8BC34A !important;
}

.nt-timeline-dot.completed .icon {
    color: white !important;
}

/* MultiQC items - White background with Depictio orange border */
.nt-timeline-dot.multiqc {
    background: white !important;
    border: 3px solid #F68B33 !important; /* Depictio orange */
}

/* .nt-timeline-dot.multiqc .icon,
.nt-timeline-dot.multiqc img {
    background: white !important;
} */

/* NF-Core items - white background for logo visibility */
.nt-timeline-dot.nfcore {
    background: white !important;
    border-color: #24B064 !important; /* nf-core green */
}

.nt-timeline-dot.nfcore .icon {
    color: #24B064 !important;
}

/* In-progress items - Depictio Orange */
.nt-timeline-dot.inprogress {
    background: #F68B33 !important; /* Depictio orange */
    border-color: #F68B33 !important;
}

.nt-timeline-dot.inprogress .icon {
    color: white !important;
}

/* Idea / unscheduled items - Depictio Purple */
.nt-timeline-dot.idea {
    background: #9870FF !important; /* Depictio purple */
    border-color: #9870FF !important;
}

.nt-timeline-dot.idea .icon {
    color: white !important;
}

/* Planned items - Depictio Blue */
.nt-timeline-dot.planned {
    background: #6495ED !important; /* Depictio blue */
    border-color: #6495ED !important;
}

.nt-timeline-dot.planned .icon {
    color: white !important;
}


/* Timeline vertical line styling - Grey */
/* For center-aligned timeline (which is what we're using) */
.nt-timeline.vertical.center .nt-timeline-before {
    background: linear-gradient(rgba(128, 128, 128, 0) 0%, rgba(128, 128, 128, 1) 100%) no-repeat center/4px 100% !important;
}

.nt-timeline.vertical.center .nt-timeline-after {
    background: linear-gradient(rgba(128, 128, 128, 1) 0%, rgba(128, 128, 128, 0) 100%) no-repeat center/4px 100% !important;
}

.nt-timeline.vertical.center .nt-timeline-items {
    background: linear-gradient(rgba(128, 128, 128, 1) 0%, rgba(128, 128, 128, 1) 100%) no-repeat center/4px 100% !important;
}

/* For alternate center timeline */
.nt-timeline.vertical.center.alternate .nt-timeline-before {
    background: linear-gradient(rgba(128, 128, 128, 0) 0%, rgba(128, 128, 128, 1) 100%) no-repeat center/4px 100% !important;
}

.nt-timeline.vertical.center.alternate .nt-timeline-after {
    background: linear-gradient(rgba(128, 128, 128, 1) 0%, rgba(128, 128, 128, 0) 100%) no-repeat center/4px 100% !important;
}

.nt-timeline.vertical.center.alternate .nt-timeline-items {
    background: linear-gradient(rgba(128, 128, 128, 1) 0%, rgba(128, 128, 128, 1) 100%) no-repeat center/4px 100% !important;
}

/* General timeline styling */
.nt-timeline .nt-timeline-dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Timeline content styling */
.nt-timeline .nt-timeline-content h3 {
    color: var(--md-primary-fg-color);
    margin-bottom: 8px;
}

.nt-timeline .nt-timeline-content .sub-title {
    color: var(--md-default-fg-color--light);
    font-size: 0.85em;
    font-weight: 500;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .nt-timeline .nt-timeline-content h3 {
    color: var(--md-primary-fg-color);
}

[data-md-color-scheme="slate"] .nt-timeline .nt-timeline-content .sub-title {
    color: var(--md-default-fg-color--light);
}

/* ==========================================================================
   Roadmap: the three-section nav (Shipped / In progress / Ideas)
   Brand colours: green #8BC34A, orange #F68B33, purple #9966CC
   ========================================================================== */

.md-typeset .grid.cards.roadmap-nav {
    /* Stay 3-up instead of reflowing to 2, which left an orphan card */
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    margin: 1.6rem 0 2.2rem;
}

.md-typeset .grid.cards.roadmap-nav > ul > li {
    /* The status colour is set per-card below and consumed here, so the
       accent bar, icon, hover border and glow all stay in sync. */
    --rn-accent: var(--md-default-fg-color--light);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.1rem 1.3rem;
    margin: 0;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.6rem;
    overflow: hidden;
    transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}

/* Accent bar across the top edge */
.md-typeset .grid.cards.roadmap-nav > ul > li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--rn-accent);
}

.md-typeset .grid.cards.roadmap-nav > ul > li:hover {
    border-color: var(--rn-accent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--rn-accent) 28%, transparent);
    transform: translateY(-2px);
}

/* The icon and the title share one <p>; stack them and centre both */
.md-typeset .grid.cards.roadmap-nav > ul > li > p:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

/* Tinted disc behind the icon */
.md-typeset .grid.cards.roadmap-nav > ul > li > p:first-child > .twemoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    margin: 0 0 0.6rem;
    border-radius: 50%;
    background: var(--md-default-fg-color--lightest);
    background: color-mix(in srgb, var(--rn-accent) 14%, transparent);
    color: var(--rn-accent);
    transition: background 200ms;
}

.md-typeset .grid.cards.roadmap-nav > ul > li > p:first-child > .twemoji svg {
    width: 1.5rem;
    height: 1.5rem;
}

.md-typeset .grid.cards.roadmap-nav > ul > li:hover > p:first-child > .twemoji {
    background: var(--md-default-fg-color--lighter);
    background: color-mix(in srgb, var(--rn-accent) 26%, transparent);
}

/* Title: the link fills the card so the whole tile is clickable */
.md-typeset .grid.cards.roadmap-nav > ul > li > p:first-child > strong > a {
    color: var(--md-default-fg-color);
    font-size: 1.05rem;
    text-decoration: none;
}

.md-typeset .grid.cards.roadmap-nav > ul > li > p:first-child > strong > a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.md-typeset .grid.cards.roadmap-nav > ul > li:hover > p:first-child > strong > a {
    color: var(--rn-accent);
}

/* The `---` separator: a short centred rule rather than a full-width one */
.md-typeset .grid.cards.roadmap-nav > ul > li > hr {
    width: 2rem;
    margin: 0.6rem auto;
    border-top-color: var(--rn-accent);
    opacity: 0.55;
}

.md-typeset .grid.cards.roadmap-nav > ul > li > p:last-child {
    margin-bottom: 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--md-default-fg-color--light);
}

/* Per-card status colours, in document order */
.md-typeset .grid.cards.roadmap-nav > ul > li:nth-child(1) { --rn-accent: #8BC34A; }
.md-typeset .grid.cards.roadmap-nav > ul > li:nth-child(2) { --rn-accent: #F68B33; }
.md-typeset .grid.cards.roadmap-nav > ul > li:nth-child(3) { --rn-accent: #9966CC; }

/* Section-heading icons reuse the same three colours */
.md-typeset .rn-shipped  { color: #8BC34A; }
.md-typeset .rn-progress { color: #F68B33; }
.md-typeset .rn-idea     { color: #9966CC; }

.md-typeset h2 .rn-shipped,
.md-typeset h2 .rn-progress,
.md-typeset h2 .rn-idea {
    /* Optically align the glyph with the cap height of the heading text */
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.15em;
    margin-right: 0.1em;
}

/* Slate needs slightly lifted greens/purples to hold contrast on dark navy */
[data-md-color-scheme="slate"] .md-typeset .grid.cards.roadmap-nav > ul > li:nth-child(1),
[data-md-color-scheme="slate"] .md-typeset .rn-shipped { --rn-accent: #9BD055; }
[data-md-color-scheme="slate"] .md-typeset .rn-shipped { color: #9BD055; }
[data-md-color-scheme="slate"] .md-typeset .grid.cards.roadmap-nav > ul > li:nth-child(3),
[data-md-color-scheme="slate"] .md-typeset .rn-idea { --rn-accent: #B07FE0; }
[data-md-color-scheme="slate"] .md-typeset .rn-idea { color: #B07FE0; }

@media screen and (max-width: 59.9375em) {
    .md-typeset .grid.cards.roadmap-nav {
        grid-template-columns: 1fr;
    }
}