/* Tools Catalog hero: logo beside the page title (theme Virgil display font).
   align-items:center vertically centres the two; the `> * { margin:0 }` kills any
   stray <p>/h1 margins that would offset that centring; the negative top margin
   tightens the gap under the nav. */
.catalog-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: -0.6rem 0 1.1rem;
}
.catalog-hero > * {
    margin: 0;
}
.catalog-hero__logo {
    width: 58px;
    height: auto;
    flex-shrink: 0;
}
/* Selector specific enough to beat Material's `.md-typeset h1`, whose bottom
   margin would otherwise shift the title's text up relative to the logo under
   `align-items: center` (the margin box, not the text box, gets centred). */
.catalog-hero .catalog-hero__title {
    line-height: 1;
    margin: 0;
}
/* The "T" of "Tools" is a hand-drawn brush letter (inline SVG) in the brand
   purple, matching the Virgil display font of the surrounding title. Sized to
   the cap height and nudged onto the baseline so it sits flush with the text. */
.catalog-hero__title .accent-t {
    font-weight: inherit;
}
.catalog-hero__title .accent-t .accent-t-svg {
    height: 0.86em;
    width: auto;
    vertical-align: -0.12em;
    display: inline-block;
}

/* Limit TOC depth to level 2 on changelog page */
body.page-changelog .md-sidebar--secondary .md-nav__list .md-nav__list {
    display: none;
}

.md-typeset .admonition,
.md-typeset details {
  font-size: 17px
}

.banner {
    height: 12px;       /* Height of the banner */
    position: sticky;   /* Follows as you scroll */
    top: 0;             /* Absolute top of page */
    left: 0;
    width: 100%;
    z-index: 1;         /* Tells the renderer "this is important", otherwise Admonition and Code Blocks will render into it */
    text-align: center;
    background-color: #f4b136; /* Red */
}

.md-banner {
    background-color: #f4b136; /* Red */
}

.md-header {
    /* grey */
    background-color: #f7f7f7;
}
.md-tabs {
    /* grey */
    background-color: #f7f7f7;
}

/* Room for the tab row.
 *
 * Material lays the tabs out inside .md-grid, whose width is sized for body
 * text. The tabs are not body text: with 13 of them the row needs ~70px more
 * than it is given, so the last tab is clipped even on a 1920px screen with
 * 600px of window to spare. Widening it is what lets the nav grow without
 * pruning entries, and the tighter item padding leaves enough headroom that
 * the next tab does not reopen this.
 *
 * The header gets the same width, not a wider one: the two rows are stacked
 * and a mismatch shows up immediately as the tabs starting left of the logo.
 * Article content keeps its own, narrower measure. */
.md-header .md-grid,
.md-tabs .md-grid {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 1rem;
}

.md-tabs__item {
    padding: 0 0.35rem;
}

/* Hero logo: the wordmark image keeps the lettering, and depictio-logo.js
   replaces its mark with the live <depictio-rose>, clipping the raster's own
   mark away once the swap is in place (.rose-ready). Without the script the
   untouched image shows, so the hero never ends up missing its mark. */
.hero-logo {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
}

.hero-logo.rose-ready img {
    clip-path: inset(0 0 0 25%);
}

.hero-logo depictio-rose {
    position: absolute;
    pointer-events: none;
}

/* Theme-aware logo switching */
/* Light theme - show dark logo */
[data-md-color-scheme="default"] .logo-dark {
    display: inline-block;
}

[data-md-color-scheme="default"] .logo-light {
    display: none;
}

/* Dark theme - show light logo */
[data-md-color-scheme="slate"] .logo-dark {
    display: none;
}

[data-md-color-scheme="slate"] .logo-light {
    display: inline-block;
}

/* Theme-aware card styling */
/* Light theme cards */
[data-md-color-scheme="default"] .funding-card,
[data-md-color-scheme="default"] .partner-card,
[data-md-color-scheme="default"] .installation-card {
    background-color: white;
    border-color: rgba(0,0,0,0.1);
    color: var(--md-default-fg-color);
}

/* Dark theme cards */
[data-md-color-scheme="slate"] .funding-card,
[data-md-color-scheme="slate"] .partner-card,
[data-md-color-scheme="slate"] .installation-card {
    background-color: var(--md-default-bg-color);
    border-color: var(--md-default-fg-color--lighter);
    color: var(--md-default-fg-color);
}


/* NF-core logo theme change */

/* Show light logo by default */
.nf-core-light { display: inline; }
.nf-core-dark { display: none; }

/* If using Material theme's dark mode toggle */
[data-md-color-scheme="slate"] .nf-core-light { display: none; }
[data-md-color-scheme="slate"] .nf-core-dark { display: inline; }

/* Virgil font definition */
@font-face {
    font-family: 'Virgil';
    src: url('../fonts/Virgil.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Custom Depictio favicon icon */
.depictio-icon {
    display: inline-block;
    width: 36px;
    height: 36px;
    background-image: url('../images/logo/logo_icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 0.25rem;
}

/* FOUC prevention: the header logo stays hidden until depictio-logo.js has
   swapped in the rose (it sets .logo-ready), and shows after 2s as a fallback
   when the script does not run. */
.md-header__button.md-logo {
    opacity: 0;
    transition: opacity 0.2s ease;
    overflow: visible !important;
    padding: 8px;
    min-width: 64px;
    min-height: 64px;
    margin-right: -8px;
    animation: showLogoFallback 0.1s ease 2s forwards; /* Show after 2s if JS fails */
}

.md-header__button.md-logo.logo-ready {
    opacity: 1;
    animation: none; /* Cancel fallback animation when JS succeeds */
}

@keyframes showLogoFallback {
    to { opacity: 1; }
}

/* Header logo size: the static fallback image and the <depictio-rose> that
   depictio-logo.js puts in its place render at the same size. */
.md-header__button.md-logo img,
.md-header__button.md-logo depictio-rose {
    display: block;
    width: 48px !important;
    height: 48px !important;
}

/* The drawer logo keeps Material's own size for its image. */
.md-nav__button.md-logo depictio-rose {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
}

/* Reduce space between logo and title and change to Virgil font */
.md-header__title {
    margin-left: -12px;
    font-size: 1.2rem !important;
    font-weight: 600;
    font-family: "Virgil", cursive !important;
}

/* Header below Material's 76.25em breakpoint, where the menu button appears.
 *
 * Material hides the logo there and keeps the whole site name in the 24px
 * Virgil of the desktop header, so a phone showed "Depicti…" between the menu
 * and the palette buttons. The rose comes back, smaller and after the menu
 * button, and the type shrinks. On a phone the name itself is too long: it
 * becomes "Depictio" and a small DOCS tag, both drawn by CSS with empty alt
 * text, so screen readers still read the site name. */
@media screen and (max-width: 76.234375em) {
    /* The 1rem side padding lines the desktop header up with the tabs row,
       which a phone does not show. */
    .md-header .md-grid {
        padding: 0 0.2rem;
    }

    .md-header__inner > label.md-header__button[for="__drawer"] {
        order: -1;
    }

    .md-header__button.md-logo {
        display: block;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0.3rem;
    }

    .md-header__button.md-logo img,
    .md-header__button.md-logo depictio-rose {
        width: 34px !important;
        height: 34px !important;
    }

    [dir] .md-header__title {
        margin-left: 0.2rem;
        font-size: 1.05rem !important;
    }
}

@media screen and (max-width: 37.5em) {
    .md-header__topic:first-child .md-ellipsis {
        font-size: 0;
    }

    .md-header__topic:first-child .md-ellipsis::before {
        content: "Depictio";
        content: "Depictio" / "";
        font-size: 1rem;
    }

    .md-header__topic:first-child .md-ellipsis::after {
        content: "docs";
        content: "docs" / "";
        margin-left: 0.45rem;
        padding: 0.15rem 0.45rem;
        border-radius: 0.5rem;
        background: #7a5dc7;
        color: #ffffff;
        font-family: var(--md-text-font-family, sans-serif);
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        vertical-align: 0.3em;
    }

    [data-md-color-scheme="slate"] .md-header__topic:first-child .md-ellipsis::after {
        background: #9d85e0;
        color: #1e2129;
    }
}

/* Under 360px the tag no longer fits beside the name. */
@media screen and (max-width: 22.4375em) {
    .md-header__topic:first-child .md-ellipsis::after {
        display: none;
    }
}

/* Apply Virgil font to all H1 titles */
h1 {
    font-family: "Virgil", cursive !important;
}

.md-typeset h1 {
    font-family: "Virgil", cursive !important;
}

/* Sidebar: pin to full viewport height — DESKTOP ONLY. Below Material's nav
   breakpoint (76.25em) the primary sidebar is a slide-in hamburger drawer
   (position: fixed, translated off-screen). Forcing position/height at all
   widths pinned it open on mobile and squeezed the content — so these overrides
   are scoped to desktop and mobile keeps Material's native responsive drawer. */
@media screen and (min-width: 76.25em) {
    .md-sidebar {
        height: calc(100vh - 2.4rem) !important;
        position: sticky !important;
        top: 2.4rem !important;
    }

    .md-sidebar--primary,
    .md-sidebar--secondary {
        height: calc(100vh - 2.4rem) !important;
    }

    .md-sidebar__scrollwrap {
        height: calc(100vh - 2.4rem) !important;
        max-height: calc(100vh - 2.4rem) !important;
    }
}

/* Account for tabs when present (desktop only — see note above) */
@media screen and (min-width: 76.25em) {
    .md-tabs ~ .md-main .md-sidebar {
        height: calc(100vh - 4.8rem) !important;
        top: 4.8rem !important;
    }

    .md-tabs ~ .md-main .md-sidebar__scrollwrap {
        height: calc(100vh - 4.8rem) !important;
        max-height: calc(100vh - 4.8rem) !important;
    }
}

/* Custom Demo Note Section */
.demo-note-section {
    margin: 2rem 0;
    padding: 0 2rem;
}

/* Same surface as the workflow and component grids on the landing page:
   theme tokens rather than hardcoded greys, a 12px radius, and the shared
   lift on hover. It used to paint its own white and its own #374151 in dark
   mode, which read as a widget borrowed from another page. */
.live-demo-info .demo-note-card {
    background: var(--md-default-bg-color);
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin: 1.25rem auto;
    max-width: 600px;
    overflow: hidden;
    transition: border-color 0.45s ease;
}

[data-md-color-scheme="slate"] .live-demo-info .demo-note-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* No lift. The workflow and component grids lift because hovering one of many
   tiles is a choice; this is a single disclosure strip, and raising the whole
   block above the iframe it introduces reads as a glitch. The header's own
   background change is the affordance. */
.demo-note-card:hover {
    border-color: var(--md-default-fg-color--lighter);
}

.demo-note-header {
    color: var(--md-default-fg-color);
    padding: 0.7rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.3s ease;
}

.demo-badge-integrated {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.demo-badge-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.demo-badge-content strong {
    font-size: 1rem;
    font-weight: 600;
}

.demo-direct-link {
    color: var(--md-default-fg-color);
    opacity: 0.7;
    transition: opacity 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
}

.demo-direct-link:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

[data-md-color-scheme="slate"] .demo-direct-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

.demo-note-header:hover {
    background: var(--md-default-fg-color--lightest);
}

.demo-note-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.demo-note-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    flex: 1;
}

.demo-note-toggle {
    color: var(--md-default-fg-color);
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-note-toggle:hover {
    background: rgba(0, 0, 0, 0.1);
}

[data-md-color-scheme="slate"] .demo-note-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.demo-toggle-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.demo-note-toggle.expanded .demo-toggle-icon {
    transform: rotate(180deg);
}

.demo-note-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.demo-note-content.expanded {
    padding: 1rem 1.1rem 1.1rem;
    border-top: 1px solid var(--md-default-fg-color--lightest);
    max-height: 800px;
}

.demo-note-content p {
    margin: 0 0 1rem 0;
    color: var(--md-default-fg-color--light);
    line-height: 1.6;
    text-align: center;
}

.demo-note-content p:last-of-type {
    margin-bottom: 1.5rem;
}

.demo-note-content strong {
    color: var(--md-default-fg-color);
    font-weight: 600;
}

.demo-alternatives {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    margin-top: 1rem;
}

[data-md-color-scheme="slate"] .demo-alternatives {
    background: #374151;
    border: 1px solid #4b5563;
}

.demo-alternatives h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--md-default-fg-color);
}

.demo-alt-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.demo-alt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.demo-alt-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.install-btn {
    background: rgba(69, 184, 172, 0.8);
    color: white !important;
    border: 2px solid rgba(69, 184, 172, 1);
}

.install-btn:hover {
    background: rgba(69, 184, 172, 0.9);
    color: white !important;
    border: 2px solid rgba(69, 184, 172, 1);
}

.demo-btn {
    background: rgba(100, 149, 237, 0.8);
    color: white !important;
    border: 2px solid rgba(100, 149, 237, 1);
}

.demo-btn:hover {
    background: rgba(100, 149, 237, 0.9);
    color: white !important;
    border: 2px solid rgba(100, 149, 237, 1);
}

.demo-alt-btn img,
.demo-alt-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .demo-note-section {
        padding: 0 1rem;
    }

    .demo-alt-buttons {
        flex-direction: column;
        align-items: center;
    }

    .demo-alt-btn {
        width: 100%;
        max-width: 200px;
        justify-content: center;
    }
}

/* Simple and direct - exclude Virgil font from version dropdown */
.md-version {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ===== FOOTER STYLING ===== */
/* Ensure footer is always visible and properly styled */
.md-footer {
    position: relative !important;
    z-index: 1000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: transparent !important;
    margin-top: 4rem !important;
    padding: 0 !important;
    clear: both !important;
    width: 100% !important;
}

.md-footer-meta {
    background-color: #1a1a1a !important;
    display: block !important;
    visibility: visible !important;
    padding: 1rem 0 !important;
}

.md-footer-meta__inner {
    display: flex !important;
    visibility: visible !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

/* Footer copyright text - dark background, light text */
.md-copyright,
.md-copyright__highlight,
.md-footer-meta .md-typeset,
.md-footer-meta .md-copyright {
    color: #b0b0b0 !important;
    font-size: 0.85rem !important;
}

.md-copyright a,
.md-footer-meta a {
    color: #9966cc !important;
}

.md-copyright a:hover,
.md-footer-meta a:hover {
    color: #b388e8 !important;
}

/* Social icons in footer */
.md-social__link {
    color: #b0b0b0 !important;
}

.md-social__link:hover {
    color: #9966cc !important;
}

.md-social__link svg {
    fill: currentColor !important;
}

/* Light theme - copyright bar */
[data-md-color-scheme="default"] .md-footer-meta {
    background-color: #e0e0e0 !important;
}

[data-md-color-scheme="default"] .md-copyright,
[data-md-color-scheme="default"] .md-copyright__highlight,
[data-md-color-scheme="default"] .md-footer-meta .md-typeset {
    color: #333333 !important;
}

[data-md-color-scheme="default"] .md-copyright a,
[data-md-color-scheme="default"] .md-footer-meta a {
    color: #7a5dc7 !important;
}

[data-md-color-scheme="default"] .md-social__link {
    color: #555555 !important;
}

[data-md-color-scheme="default"] .md-social__link:hover {
    color: #7a5dc7 !important;
}

/* Footer social links */
.md-footer-social {
    color: #ffffff !important;
}

.md-footer-social__link {
    color: #ffffff !important;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.md-footer-social__link:hover {
    opacity: 1;
    color: #9966cc !important;
}

/* Dark theme base footer */
[data-md-color-scheme="slate"] .md-footer {
    background-color: transparent !important;
}

/* Fix for landing page - ensure content doesn't cover footer. DESKTOP ONLY:
   on mobile, position+z-index here build a stacking context that traps the nav
   drawer beneath Material's overlay scrim (drawer renders blurry and swallows
   taps). Mobile keeps Material's native stacking so the drawer works. */
@media screen and (min-width: 76.25em) {
    .md-main {
        position: relative;
        z-index: 1;
    }

    .md-content {
        position: relative;
        z-index: 1;
    }
}

/* Ensure the content/article doesn't clip anything below it (all widths) */
.md-content {
    overflow: visible !important;
}

/* Ensure the article doesn't clip or hide anything below it */
.md-content__inner {
    overflow: visible !important;
    padding-bottom: 2rem !important;
}

/* Landing page specific - ensure sections don't extend into footer space */
.md-typeset section:last-of-type {
    margin-bottom: 3rem !important;
    padding-bottom: 2rem !important;
}

/* ===== CUSTOM DEPICTIO FOOTER ===== */
.depictio-footer {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    padding: 2.5rem 0 1.5rem 0 !important;
    border-top: 4px solid #9966cc !important;
}

.depictio-footer__grid {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
    gap: 2rem !important;
    align-items: start !important;
}

.depictio-footer__section {
    padding: 0 1rem !important;
}

.depictio-footer__brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
}

.depictio-footer__logo {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 0.5rem !important;
}

.depictio-footer__title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.depictio-footer__tagline {
    font-size: 0.85rem !important;
    color: #b0b0b0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.depictio-footer__heading {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 0 1rem 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.depictio-footer__links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.depictio-footer__links li {
    margin: 0.5rem 0 !important;
}

.depictio-footer__links a {
    color: #b0b0b0 !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: color 0.2s ease !important;
}

.depictio-footer__links a:hover {
    color: #9966cc !important;
}

.depictio-footer__links svg {
    flex-shrink: 0 !important;
}

/* Light theme custom footer */
[data-md-color-scheme="default"] .depictio-footer {
    background-color: #f5f5f5 !important;
    color: #333333 !important;
}

[data-md-color-scheme="default"] .depictio-footer__title {
    color: #333333 !important;
}

[data-md-color-scheme="default"] .depictio-footer__tagline {
    color: #666666 !important;
}

[data-md-color-scheme="default"] .depictio-footer__heading {
    color: #333333 !important;
}

[data-md-color-scheme="default"] .depictio-footer__links a {
    color: #555555 !important;
}

[data-md-color-scheme="default"] .depictio-footer__links a:hover {
    color: #7a5dc7 !important;
}

/* Footer Funding/Supported By Section */
.depictio-footer__funding {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    padding: 1.5rem 0 !important;
    margin-top: 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.depictio-footer__funding-label {
    font-size: 0.8rem !important;
    color: #888888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
}

.depictio-footer__funding-logos {
    display: flex !important;
    align-items: center !important;
    gap: 2rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.depictio-footer__funding-logo {
    height: 55px !important;
    width: auto !important;
    filter: brightness(0) invert(0.8) !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s ease, filter 0.2s ease !important;
}

.depictio-footer__funding-logo:hover {
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
}

/* Light theme funding logos */
[data-md-color-scheme="default"] .depictio-footer__funding {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-md-color-scheme="default"] .depictio-footer__funding-label {
    color: #666666 !important;
}

[data-md-color-scheme="default"] .depictio-footer__funding-logo {
    filter: none !important;
    opacity: 0.7 !important;
}

[data-md-color-scheme="default"] .depictio-footer__funding-logo:hover {
    opacity: 1 !important;
    filter: none !important;
}

/* Responsive footer */
@media (max-width: 960px) {
    .depictio-footer__grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 600px) {
    .depictio-footer__grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .depictio-footer__brand {
        align-items: center !important;
    }

    .depictio-footer__section {
        padding: 1rem 0 !important;
    }

    .depictio-footer__funding {
        flex-direction: column !important;
        gap: 1rem !important;
    }
}

/* ==========================================================================
   Component Catalog page
   ========================================================================== */

/* Theme-aware live gallery iframes — mirrors the .logo-light/.logo-dark trick
   above (the image #only-light/#only-dark hash does not apply to iframes). */
[data-md-color-scheme="default"] .catalog-iframe-light { display: block; }
[data-md-color-scheme="default"] .catalog-iframe-dark { display: none; }
[data-md-color-scheme="slate"] .catalog-iframe-light { display: none; }
[data-md-color-scheme="slate"] .catalog-iframe-dark { display: block; }

/* Full-height gallery: fill the viewport (the page hides nav + toc, so it can
   use the whole content column). The height="" attribute is just a fallback. */
.catalog-embed {
    position: relative;
}

.catalog-embed iframe {
    display: block;
    width: 100%;
    height: 100vh;
    min-height: 1100px;
    border-radius: 4px;
    border: 1px solid var(--md-default-fg-color--lightest);
}

/* Fullscreen toggle (reused from the live-demo pattern). */
.catalog-fs-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.catalog-fs-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* Header bar (with close button) shown only in fullscreen. */
.catalog-demo-header {
    display: none;
}

/* Page-fill overlay: fixed over the docs page, not native OS fullscreen. */
.catalog-embed--fs {
    position: fixed;
    inset: 0;
    z-index: 1000;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--md-default-bg-color);
}

/* Freeze the page scroll behind the overlay (set by catalog-fullscreen.js).
   Lock BOTH html and body: `body` alone leaves the (taller) document scrolling
   on the root element, whose scrollbar then sits beside the iframe's own —
   the "double scrollbar". `:has` targets html from the body-level lock class. */
body.catalog-fs-lock {
    overflow: hidden;
}
html:has(> body.catalog-fs-lock) {
    overflow: hidden;
}

/* The footer fix pins .md-main to z-index:1, which traps the overlay in a
   stacking context below the sticky Material header (z-index:4). While the
   overlay is open, lift the whole content stacking context above it. */
body.catalog-fs-lock .md-main {
    z-index: 1001;
}

/* In fullscreen the gallery iframe shows its OWN header, so the wrapper's title
   bar would just duplicate it. Drop the bar + title and float ONLY the close
   button in the corner (fixed, above the overlay) so the iframe fills the view. */
.catalog-embed--fs .catalog-demo-header {
    /* Re-enable display (base rule hides the header) so the fixed close button
       inside it can render — a display:none ancestor would keep it invisible.
       The header itself generates no box, so it adds no height to the overlay. */
    display: contents;
    border: none;
    background: transparent;
    padding: 0;
}
.catalog-embed--fs .catalog-demo-title {
    display: none;
}
.catalog-embed--fs .catalog-fs-close {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 1002;
    width: 36px;
    height: 36px;
    background: var(--md-default-bg-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    border-radius: 8px;
}

.catalog-demo-title {
    font-weight: 600;
}

.catalog-fs-close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--md-default-fg-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.catalog-fs-close:hover {
    background: var(--md-default-fg-color--lightest);
}

.catalog-embed--fs .catalog-fs-btn {
    display: none;
}

/* Markdown wraps the (absolutely-positioned) fullscreen button of
   `<div class="catalog-embed" markdown>` in a <p>. The button adds no height,
   but the <p>'s default block margin (~18px) pushed the iframe down — in the
   overlay it clipped the bottom of the 100vh iframe off the viewport, and in
   the inline embed it left a phantom gap. Strip the margin on these wrapper
   paragraphs so the embed has no spurious offset in either state. */
.catalog-embed > p {
    margin: 0;
}

/* Fill the fixed overlay by positioning the visible iframe wrapper to its
   edges — robust against any residual sibling margin (a top:auto block would
   still be offset by a preceding element's margin; inset:0 is not). */
.catalog-embed--fs .catalog-iframe-light,
.catalog-embed--fs .catalog-iframe-dark {
    position: absolute;
    inset: 0;
    height: 100%;
}

.catalog-embed--fs iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
    border-radius: 0;
}

/* Contribute CTA: a brand-purple pill that lifts on hover and nudges its arrow —
   replaces the flat Material primary button. The `.md-typeset` prefix outweighs
   the theme's default link colour so the label stays white. */
.catalog-cta-wrap {
    text-align: center;
}
/* Small Depictio logo on the left of the CTA, via ::before so the markdown link
   text stays clean (an inline <img> inside link text gets mangled/inlined). */
.md-typeset .catalog-cta::before {
    content: "";
    width: 1.6em;
    height: 1.6em;
    flex-shrink: 0;
    background: url("../images/logo/animated_favicon.svg") center / contain no-repeat;
}
/* Catalog Studio CTA: same button, but badged with the Tools Catalog logo
   rather than the Depictio mark, since it is the catalog's own companion app. */
.md-typeset .catalog-cta--studio::before {
    background-image: url("../images/logo/tools_catalog_logo.png");
}
.md-typeset .catalog-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.65em;
    margin-top: 0.8rem;
    padding: 0.85rem 1.9rem;
    border-radius: 11px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #7d5dec;
    background: #fff;
    border: 1px solid var(--md-default-fg-color--lightest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease,
        border-color 0.15s ease;
}
.md-typeset .catalog-cta:hover,
.md-typeset .catalog-cta:focus-visible {
    color: #7d5dec;
    background: #faf8ff;
    border-color: #9870ff;
    box-shadow: 0 6px 18px rgba(152, 112, 255, 0.28);
    transform: translateY(-1px);
}
.md-typeset .catalog-cta .twemoji {
    transition: transform 0.15s ease;
}
.md-typeset .catalog-cta:hover .twemoji {
    transform: translateX(3px);
}

/* Module flow: a flat horizontal stepper (Detect -> Reshape -> Render). */
.module-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin: 1rem 0 1.5rem;
}

.module-flow__step {
    position: relative;
    flex: 1 1 200px;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-top: 3px solid var(--md-default-fg-color--light);
    border-radius: 6px;
}

.module-flow__step > :first-child { margin-top: 0; }
.module-flow__step > :last-child { margin-bottom: 0; }

/* Vertically center the (enlarged) icon with its bold label on the step's
   first line — applies to both the intro and how-it-works triptychs. */
.module-flow__step > p:first-child {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.module-flow__step > p:first-child .twemoji {
    flex: 0 0 auto;
}

/* Intro mapping (file -> module -> visualization) and how-it-works steps
   (detect -> reshape -> render) share the same positional accent colors. */
.module-flow__step--detect,
.module-flow__step--file { border-top-color: #6495ED; }    /* blue */
.module-flow__step--reshape,
.module-flow__step--module { border-top-color: #9966CC; }  /* purple */
.module-flow__step--render,
.module-flow__step--component { border-top-color: #45B8AC; } /* teal */

.module-flow__step--detect .twemoji,
.module-flow__step--file .twemoji { color: #6495ED; }
.module-flow__step--reshape .twemoji,
.module-flow__step--module .twemoji { color: #9966CC; }
.module-flow__step--render .twemoji,
.module-flow__step--component .twemoji { color: #45B8AC; }

/* Connecting arrows between steps (hidden on the last step and on mobile). */
.module-flow__step:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    line-height: 1;
    color: var(--md-default-fg-color--light);
}

.module-flow__opt {
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--md-default-fg-color--light);
}

@media screen and (max-width: 44.9375em) {
    .module-flow__step:not(:last-child)::after { content: none; }
}

/* Independent alternatives rather than a pipeline: same cards, no arrows. */
.module-flow--parallel .module-flow__step:not(:last-child)::after { content: none; }

/* Flat brand-color accents for the catalog intro cards (no gradients). */
.cat-figure { color: #6495ED; }   /* blue */
.cat-table { color: #45B8AC; }    /* teal */
.cat-card { color: #9966CC; }     /* purple */
.cat-advviz { color: #7A5DC7; }   /* violet */
.cat-multiqc { color: #8BC34A; }  /* green */


/* Ported from docs/changelog-v1.1.0 — templates landing cards */
/* ── Template cards ─────────────────────────────────────────────────── */

.template-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 16px 0 24px;
}

@media (max-width: 76.1875em) {
  .template-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 44.9375em) {
  .template-cards {
    grid-template-columns: 1fr;
  }
}

.template-card {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.template-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  transform: translateY(-3px);
}

.template-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 20px;
  min-height: 90px;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

[data-md-color-scheme="default"] .template-card-logo {
  background: var(--md-code-bg-color);
}

[data-md-color-scheme="slate"] .template-card-logo {
  background: #111e2b;
}

.template-card-logo img {
  max-height: 52px;
  max-width: 180px;
  object-fit: contain;
}

.template-card-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.template-card-desc {
  margin: 0;
  font-size: 0.82em;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
}

.template-card-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.template-version {
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #a5d6a7;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.78em;
  font-weight: 600;
  font-family: var(--md-code-font-family);
  letter-spacing: 0.02em;
}

[data-md-color-scheme="slate"] .template-version {
  background: #152b18;
  color: #81c784;
  border-color: #2e5d33;
}

.template-status-reviewed {
  background: #e3f2fd;
  color: #0d47a1;
  border: 1px solid #90caf9;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.78em;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .template-status-reviewed {
  background: #0d2137;
  color: #64b5f6;
  border-color: #1565c0;
}

.template-status-experimental {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.78em;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .template-status-experimental {
  background: #33210d;
  color: #ffb74d;
  border-color: #b45f06;
}

.template-status-draft {
  background: #eceff1;
  color: #455a64;
  border: 1px solid #b0bec5;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.78em;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .template-status-draft {
  background: #1f2a30;
  color: #b0bec5;
  border-color: #455a64;
}


/* ── Individual template page banner (tinted card) ── */
.template-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 8px 0 22px;
}
.template-banner-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}
.template-banner-logo img {
  max-height: 72px;
  max-width: 240px;
  object-fit: contain;
}
.template-banner-body { min-width: 0; }

/* Title: standard font (override the site-wide Virgil h1), compact in the banner */
.md-typeset .template-banner-body h1.template-title {
  font-family: var(--md-text-font-family), -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif !important;
  font-size: 1.55em;
  margin: 0 0 4px;
}
/* Subtitle: highlighted */
.template-banner-body .template-subtitle {
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 8px;
}
/* Compact icon links (no chip border) */
.template-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
}
.template-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85em;
  font-weight: 600;
  text-decoration: none;
  color: var(--md-typeset-a-color);
}
.template-links a:hover { text-decoration: underline; }
.template-links .mdi { font-size: 1.15em; }

/* Status pill: own column, vertically centered (via the grid's align-items) */
.template-status-reviewed.template-banner-badge,
.template-status-experimental.template-banner-badge,
.template-status-draft.template-banner-badge {
  position: relative;
  justify-self: end;
  white-space: nowrap;
  font-size: 0.95em;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: help;
}
.template-banner-badge .mdi { vertical-align: -2px; margin-right: 5px; font-size: 1.15em; }

/* Custom tooltip for the Reviewed badge — bigger, short delay, help cursor */
.template-banner-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: 300px;
  white-space: normal;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--md-default-bg-color);
  background: var(--md-default-fg-color);
  padding: 9px 13px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  transition-delay: 0s;
  pointer-events: none;
  z-index: 20;
}
.template-banner-badge:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0.15s;
}

@media (max-width: 44.9375em) {
  .template-banner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 18px;
  }
  .template-banner-badge { justify-self: start; }
}

/* ── Status level cards ─────────────────────────────────────────────── */

/* A staircase, lowest trust on the left: the cards stretch to a shared
   bottom edge and each margin lifts the next card's top one step higher. */
.status-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 16px 0 24px;
}

.status-cards .status-card:nth-child(1) { margin-top: 60px; }
.status-cards .status-card:nth-child(2) { margin-top: 40px; }
.status-cards .status-card:nth-child(3) { margin-top: 20px; }

@media (max-width: 44.9375em) {
  .status-cards {
    grid-template-columns: 1fr;
  }
  .status-cards .status-card:nth-child(n) { margin-top: 0; }
}

.status-card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-icon {
  font-size: 1.4em;
  line-height: 1;
}

.status-title {
  font-weight: 700;
  font-size: 0.95em;
}

.status-desc {
  margin: 0;
  font-size: 0.82em;
  color: var(--md-default-fg-color--light);
  line-height: 1.5;
}

.status-certified  { border-top: 3px solid #4CAF50; }
.status-certified  .status-icon { color: #4CAF50; }

.status-reviewed   { border-top: 3px solid #2196F3; }
.status-reviewed   .status-icon { color: #2196F3; }

.status-experimental { border-top: 3px solid #FF9800; }
.status-experimental .status-icon { color: #FF9800; }

.status-draft { border-top: 3px solid #90A4AE; }
.status-draft .status-icon { color: #90A4AE; }


/* nf-core logo beside the "nf-core" group label in the left nav sidebar.
   :has() targets the nested <li> that directly holds the pipeline links, so the
   icon lands on the "nf-core" label only — not its "Templates" parent.

   Site-root-absolute path, not "../images/...": pipeline-templates/ is one of
   the shared_images.py subtrees, so this file is excluded from every versioned
   build and only exists at the site root (hooks/shared_images.py rewrites the
   same path in rendered HTML pages, but never touches this stylesheet — a path
   relative to the versioned stylesheets/ directory 404s on every deployed
   version). images/logo/ above stays relative on purpose: it's the one
   subtree the hook deliberately keeps per-version. */
.md-nav__item--nested:has(> nav > ul > li > .md-nav__link[href$="nf-core/ampliseq/"]) > .md-nav__link::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.45em;
  flex-shrink: 0;
  background: url("/depictio-docs/images/pipeline-templates/nf-core/ampliseq/nf-core.png") center / contain no-repeat;
}


/* Video embeds.

   Replaces the per-embed `padding: NN% 0 0 0` ratio hack that the older pages
   repeat inline, and gives captions a colour that follows the palette instead
   of a hard-coded grey that disappears in dark mode. */
.video-embed {
  max-width: 1200px;
  margin: 1rem auto 0.5rem auto;
}

.video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 6px;
}

.md-typeset .video-caption {
  max-width: 1200px;
  margin: 0 auto 2rem auto;
  text-align: center;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

/* Mantine tab-icon colours, so a template page's tabs match the dashboard the
   page documents. The viewer renders a tab icon as
   `var(--mantine-color-<name>-6)` (see viewer/src/chrome/TabIntro.tsx), so these
   are Mantine's shade 6 verbatim. Use the colour the dashboard YAML declares in
   `tab_icon_color`, never a colour picked to look nice here. */
.md-typeset .mc-red { color: #fa5252; }
.md-typeset .mc-pink { color: #e64980; }
.md-typeset .mc-grape { color: #be4bdb; }
.md-typeset .mc-violet { color: #7950f2; }
.md-typeset .mc-indigo { color: #4c6ef5; }
.md-typeset .mc-blue { color: #228be6; }
.md-typeset .mc-cyan { color: #15aabf; }
.md-typeset .mc-teal { color: #12b886; }
.md-typeset .mc-green { color: #40c057; }
.md-typeset .mc-lime { color: #82c91e; }
.md-typeset .mc-yellow { color: #fab005; }
.md-typeset .mc-orange { color: #fd7e14; }

/* Yes / partly / no pills for support tables, e.g. "What can be pinned" on
   features/versioning.md. The colour repeats the word, it never replaces it. */
.md-typeset .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}
.md-typeset .status-pill .twemoji { height: 1em; }
.md-typeset .status-pill.is-yes { color: #2b8a3e; background: rgba(64, 192, 87, 0.15); }
.md-typeset .status-pill.is-partial { color: #c45c00; background: rgba(253, 126, 20, 0.15); }
.md-typeset .status-pill.is-no { color: #c92a2a; background: rgba(250, 82, 82, 0.13); }
[data-md-color-scheme="slate"] .md-typeset .status-pill.is-yes { color: #69db7c; }
[data-md-color-scheme="slate"] .md-typeset .status-pill.is-partial { color: #ffa94d; }
[data-md-color-scheme="slate"] .md-typeset .status-pill.is-no { color: #ff8787; }

/* Template version picker: sits under the template banner and chooses which
   generated reference block is shown. See javascripts/template-version.js. */
.tpl-version-pick {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.4rem;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 999px;
    background: var(--md-code-bg-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    font-size: 0.7rem;
    line-height: 1.4;
}

.tpl-version-pick .tpl-version-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--md-accent-fg-color--transparent, rgba(34, 139, 230, 0.12));
    color: var(--md-accent-fg-color, #228be6);
    font-size: 0.9rem;
}

.tpl-version-pick .tpl-version-label {
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--md-default-fg-color--light);
    text-transform: uppercase;
    font-size: 0.6rem;
}

.tpl-version-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.3rem 1.6rem 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--md-default-fg-color--lightest);
    background-color: var(--md-default-bg-color);
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888"><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.35rem center;
    background-size: 1.05rem;
    color: var(--md-default-fg-color);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color 125ms, box-shadow 125ms;
}

.tpl-version-select:hover {
    border-color: var(--md-accent-fg-color, #228be6);
}

.tpl-version-select:focus-visible {
    outline: none;
    border-color: var(--md-accent-fg-color, #228be6);
    box-shadow: 0 0 0 3px var(--md-accent-fg-color--transparent, rgba(34, 139, 230, 0.2));
}

.tpl-version-pick .tpl-version-badge {
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: rgba(64, 192, 87, 0.16);
    color: #2f9e44;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tpl-version-pick .tpl-version-badge[hidden] {
    display: none;
}

[data-md-color-scheme="slate"] .tpl-version-pick .tpl-version-badge {
    background: rgba(64, 192, 87, 0.22);
    color: #69db7c;
}

@media screen and (max-width: 44.9375em) {
    .tpl-version-pick {
        width: 100%;
        border-radius: 12px;
        flex-wrap: wrap;
    }
}

/* Icons repeated from a heading into its table-of-contents entry. The toc
   extension strips markup from titles, so javascripts/doc-sections.js clones
   the rendered icon back in. */
.md-nav--secondary .md-nav__link .toc-icon {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.4em;
    vertical-align: -0.06em;
    opacity: 0.85;
}

.md-nav--secondary .md-nav__link .toc-icon svg {
    width: 100%;
    height: 100%;
    fill: currentcolor;
}

/* Collapsible page sections on template pages. See doc-sections.js. */
.md-typeset .doc-section-head {
    cursor: pointer;
}

.md-typeset .doc-section-head:hover .doc-section-toggle {
    background: var(--md-default-fg-color--lightest);
    color: var(--md-accent-fg-color, #526cfe);
}

.md-typeset .doc-section-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 0.3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md-default-fg-color--light);
    cursor: pointer;
    vertical-align: middle;
    transition: transform 200ms, background-color 125ms;
}

.md-typeset .doc-section-toggle:hover {
    background: var(--md-default-fg-color--lightest);
    color: var(--md-accent-fg-color, #228be6);
}

.md-typeset .doc-section-toggle svg {
    width: 1rem;
    height: 1rem;
    fill: currentcolor;
}

.md-typeset .doc-section--collapsed .doc-section-toggle {
    transform: rotate(-90deg);
}

.md-typeset .doc-section-body[hidden] {
    display: none;
}

/* Material gives every table-of-contents entry a display value, which beats the
   user-agent rule for [hidden]. The version picker relies on it. */
.md-nav__item[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Template catalogue: search, status filter and the grid / table view switch.
   See javascripts/template-catalog.js.
   --------------------------------------------------------------------------- */
.tpl-catalog-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.2rem;
}

.tpl-catalog-search {
    position: relative;
    flex: 1 1 14rem;
    min-width: 12rem;
}

.tpl-catalog-search .mdi {
    position: absolute;
    top: 50%;
    left: 0.65rem;
    transform: translateY(-50%);
    color: var(--md-default-fg-color--light);
    font-size: 0.95rem;
    pointer-events: none;
}

.md-typeset .tpl-catalog-search input {
    width: 100%;
    padding: 0.45rem 0.7rem 0.45rem 2rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 999px;
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
    font-family: inherit;
    font-size: 0.7rem;
}

.md-typeset .tpl-catalog-search input:focus-visible {
    outline: none;
    border-color: var(--md-accent-fg-color, #228be6);
    box-shadow: 0 0 0 3px var(--md-accent-fg-color--transparent, rgba(34, 139, 230, 0.2));
}

.tpl-catalog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.md-typeset .tpl-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 999px;
    background: transparent;
    color: var(--md-default-fg-color--light);
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 125ms, border-color 125ms, color 125ms;
}

.md-typeset .tpl-chip:hover {
    border-color: var(--md-accent-fg-color, #228be6);
    color: var(--md-accent-fg-color, #228be6);
}

.md-typeset .tpl-chip.is-active {
    border-color: transparent;
    background: var(--md-accent-fg-color, #526cfe);
    color: #fff;
}

.tpl-catalog-views {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 999px;
    overflow: hidden;
}

.md-typeset .tpl-viewbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.8rem;
    border: 0;
    background: transparent;
    color: var(--md-default-fg-color--light);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 125ms, color 125ms;
}

.md-typeset .tpl-viewbtn:hover {
    color: var(--md-accent-fg-color, #228be6);
}

.md-typeset .tpl-viewbtn.is-active {
    background: var(--md-accent-fg-color, #526cfe);
    color: #fff;
}

.tpl-catalog-empty {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 1.4rem 0;
    color: var(--md-default-fg-color--light);
    font-size: 0.75rem;
}

.tpl-catalog-empty[hidden],
.tpl-catalog-table[hidden],
.template-cards[hidden],
.template-card[hidden] {
    display: none !important;
}

.tpl-catalog-table {
    overflow-x: auto;
}

.tpl-catalog-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.tpl-catalog-table th,
.tpl-catalog-table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
    text-align: left;
    vertical-align: middle;
}

.tpl-catalog-table th {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-default-fg-color--light);
}

.tpl-catalog-table tbody tr:hover {
    background: var(--md-code-bg-color);
}

.tpl-catalog-table .tpl-table-name {
    white-space: nowrap;
}

.tpl-catalog-table .tpl-table-name a {
    font-family: var(--md-code-font-family, monospace);
    font-weight: 600;
}

.tpl-catalog-table .tpl-table-desc {
    color: var(--md-default-fg-color--light);
}

.tpl-catalog-table .tpl-table-status {
    white-space: nowrap;
    text-transform: capitalize;
}

@media screen and (max-width: 44.9375em) {
    .tpl-catalog-table .tpl-table-desc,
    .tpl-catalog-table th:nth-child(2) {
        display: none;
    }
}

/* Authorship block at the foot of a template page: who wrote it, who checked
   it, and who keeps it working. */
.tpl-credits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.8rem;
    margin: 1rem 0 1.2rem;
}

.tpl-credit {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 12px;
    background: var(--md-code-bg-color);
}

.tpl-credit-role {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--md-default-fg-color--light);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tpl-credit-role .mdi {
    font-size: 0.85rem;
}

.tpl-credit-note {
    color: var(--md-default-fg-color--light);
    font-size: 0.68rem;
    line-height: 1.4;
}

.md-typeset .tpl-person {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: auto;
    padding: 0.25rem 0.6rem 0.25rem 0.25rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 999px;
    background: var(--md-default-bg-color);
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
    transition: border-color 125ms;
}

.md-typeset .tpl-person:hover {
    border-color: var(--md-accent-fg-color, #526cfe);
}

.md-typeset .tpl-person img {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
}

/* Sortable column headers in the template table. */
.md-typeset .tpl-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.md-typeset .tpl-sort:hover,
.md-typeset .tpl-sort.is-active {
    color: var(--md-accent-fg-color, #526cfe);
}

.md-typeset .tpl-sort .mdi {
    font-size: 0.85rem;
    opacity: 0.65;
}

.md-typeset .tpl-sort.is-active .mdi {
    opacity: 1;
}

/* A dashboard tab captured whole runs to several thousand pixels. Frame it in a
   scroller sized off the viewport so the whole capture can be read in place,
   with a corner link to the raw file. See javascripts/doc-sections.js. */
.md-typeset .tpl-shot-frame {
    position: relative;
    margin: 0.6rem 0 1rem;
    /* A page carries a dozen multi-megapixel captures. Skip the rendering work
       for the ones nowhere near the viewport. */
    content-visibility: auto;
    contain-intrinsic-size: auto 70vh;
}

.md-typeset a.tpl-shot {
    display: block;
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 10px;
    background: var(--md-default-bg-color);
    scrollbar-width: thin;
}

.md-typeset a.tpl-shot img {
    display: block;
    width: 100%;
    margin: 0;
}

.md-typeset .tpl-shot-open {
    position: absolute;
    top: 0.5rem;
    right: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--md-default-bg-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    color: var(--md-default-fg-color--light);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 125ms, color 125ms;
}

.md-typeset .tpl-shot-open:hover {
    opacity: 1;
    color: var(--md-accent-fg-color, #526cfe);
}

[data-md-color-scheme="default"] .md-typeset a.tpl-shot:has(img[src$="#only-dark"]),
[data-md-color-scheme="slate"] .md-typeset a.tpl-shot:has(img[src$="#only-light"]),
[data-md-color-scheme="default"] .md-typeset .tpl-shot-frame:has(img[src$="#only-dark"]),
[data-md-color-scheme="slate"] .md-typeset .tpl-shot-frame:has(img[src$="#only-light"]) {
    display: none;
}

/* Required / optional pills. The generated template reference already draws
   these, from a <style> block it emits itself; lifting the three rules here
   lets a hand-written page say "required" the same way, Contributing a
   Template's section table being the first. */
.md-typeset .gtd-badge {
    display: inline-block;
    padding: 0 0.5em;
    border-radius: 10px;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.md-typeset .gtd-req {
    background: #e9f7ef;
    color: #1e8e5a;
}

.md-typeset .gtd-opt {
    background: #fff6e6;
    color: #b9770e;
}