/* Personal presentation theme for Elias Crum.
 * Keep the Shower class names intact; this file is the customization layer.
 */

.shower {
    --color-key: #25333b;
    --color-primary: #25333b;
    --color-light: #dce4e1;
    --ink: #25333b;
    --muted: #6d797d;
    --paper: #f5f6f2;
    --surface: #ffffff;
    --accent: #3f7a76;
    --accent-soft: #dcece7;
    --line: #d6dfdc;
    --font-display: "KoHo", "Yu Gothic", "YuGothic", Geneva, sans-serif;
    --font-body: "Yu Gothic", "YuGothic", "KoHo", Geneva, sans-serif;
}

html,
body {
    background: var(--paper);
}

.shower.list,
.slide {
    color: var(--ink);
    font-family: var(--font-body);
}

a,
.slide a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color .2s ease, border-color .2s ease, opacity .2s ease;
    background-image: none !important;
}

a:hover,
.slide a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* Links that should not look like links: each SERVICE keyword points to its
 * definition in the SPARQL 1.1 Federated Query spec. */
.slide a.plain-link,
.slide a.plain-link:hover {
    color: inherit;
    border-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.subtitle,
.kicker,
.eyebrow {
    font-family: var(--font-display) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ink);
    letter-spacing: -.025em;
}

.caption {
    border-top: 6px solid var(--accent);
    background: var(--paper);
    padding: 0;
}

.caption .title {
    padding: 1.2em 1.25em 1.15em;
}

.caption .kicker,
.eyebrow,
.note__label {
    margin: 0 0 .65rem;
    color: var(--accent);
    font-size: .62em;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.caption h1 {
    margin: 0;
    color: var(--ink);
    font-size: 1.45em;
    font-weight: 600;
    line-height: 1.1;
}

.caption .caption-subtitle {
    overflow: hidden;
    margin: .55em 0 0;
    color: var(--muted);
    font-size: .58em;
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.caption .caption-subtitle a {
    border-bottom: 0;
}

.caption .caption-subtitle a:hover {
    border-bottom: 1px solid currentColor;
}

/* "Present" button in the overview header: starts the deck in full screen. */
.caption .title {
    position: relative;
}

.present-button {
    position: absolute;
    top: 50%;
    right: 1.25em;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: transparent;
    color: var(--accent);
    padding: .3em .75em;
    font-family: var(--font-display);
    font-size: .44em;
    font-weight: 700;
    letter-spacing: .06em;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .2s ease, color .2s ease;
}

.present-button:hover,
.present-button:focus-visible {
    background: var(--accent);
    color: #fff;
}

.present-button kbd {
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 .35em;
    font-family: inherit;
    font-size: .85em;
    line-height: 1.35;
    opacity: .8;
}

.caption .caption-subtitle,
.caption h1 {
    padding-right: 6em;
}

.site-footer {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-left: 0;
    border-top: 4px solid var(--accent);
    background: var(--ink);
    color: #e9efec;
    padding: 20px clamp(32px, 7vw, 100px);
    font-family: var(--font-body);
    font-size: .48em;
    height: auto;
    min-height: 0;
    align-self: start;
}

.shower.list {
    position: relative;
    padding-bottom: 24px;
}

.shower.list .site-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-left: 0;
    transform: translateY(100%);
}

.footer__links {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
}

.footer__links a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5em;
    padding: 0 .8em;
    color: #e9efec;
    border-bottom: 0;
    font-size: .9em;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    transform: none !important;
}

.footer__links a + a {
    border-left: 1px solid rgba(233, 239, 236, .24);
}

.footer__links a:hover {
    color: #a7d4c8;
    border-bottom: 1px solid currentColor;
    transform: none !important;
}

.slide {
    box-sizing: border-box;
    background: var(--paper);
    padding: 58px 72px 48px;
}

.slide::after {
    display: none;
}

.slide h2 {
    max-width: 14em;
    margin: 0 0 .7em;
    font-size: 2.25em;
    font-weight: 600;
    line-height: 1.08;
}

.slide h3 {
    margin: .65em 0 .35em;
    color: var(--ink);
    font-size: 1.05em;
    font-weight: 600;
}

.slide p {
    line-height: 1.4;
}

.slide.title {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-top: 14px solid var(--accent);
    padding: 70px 100px 28px;
}

.slide.title > .eyebrow {
    position: absolute;
    top: 34px;
    right: 100px;
    left: 100px;
    width: auto;
    margin: 0;
    color: var(--accent);
    font-size: .58em;
    font-weight: 600;
    letter-spacing: .13em;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slide.title > .eyebrow a {
    display: block;
    width: 100%;
}

.slide.title h2 {
    max-width: 14em;
    margin: 0;
    color: var(--ink);
    font-size: 2.65em;
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.08;
}

.title-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 22%);
    flex: 1;
    align-items: stretch;
    gap: 2.25em;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding-top: 2.5em;
    padding-bottom: .25em;
}

.title-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.slide.title a {
    border-bottom: 0;
}

.slide.title a:not(.title-logo):not(.title-qr):hover {
    border-bottom: 1px solid currentColor;
}

.slide.title .byline,
.slide.title .date {
    color: var(--ink);
}

.title-details {
    margin-top: auto;
    padding-bottom: 0;
}

.title-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    border-left: 1px solid var(--line);
    padding: 1em 1.2em;
}

.title-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-bottom: 0 !important;
    opacity: .9;
    transition: opacity .2s ease, transform .2s ease;
}

.title-logo:hover {
    border-bottom: 0 !important;
    opacity: 1;
    transform: translateX(-4px);
}

.title-logo img {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.title-logo--fwo img {
    max-width: 95px;
    max-height: 32px;
}

.title-logo--ugent img {
    max-width: 105px;
    max-height: 68px;
}

.title-logo--vito img {
    max-width: 120px;
    max-height: 44px;
}

.title-logo--idlab img {
    max-width: 120px;
    max-height: 55px;
}

.byline,
.date {
    margin: 0;
    color: var(--muted);
    font-size: .85em;
}

.byline {
    font-weight: 600;
}

.date {
    margin-top: .35em;
    font-size: .72em;
}

.date time {
    display: inline-block;
    color: var(--ink);
    font-family: inherit;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .16em;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 800px) {
    .slide.title {
        padding: 48px;
    }

    .slide.title > .eyebrow {
        top: 24px;
        right: 48px;
        left: 48px;
    }

    .title-layout {
        grid-template-columns: 1fr;
        gap: 2em;
        padding-top: 2em;
    }

    .title-logos {
        flex-direction: row;
        flex-wrap: wrap;
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 1.5em 0 0;
    }

    .title-logo {
        width: auto;
        flex: 1 1 40%;
    }
}

.lead {
    max-width: 25em;
    color: var(--muted);
    font-size: 1.28em;
    line-height: 1.4 !important;
}

.slide--dark {
    background: var(--ink);
    color: #edf3ef;
}

.slide--dark h2,
.slide--dark .lead {
    color: #edf3ef;
}

.slide--dark .eyebrow {
    color: #a7d4c8;
}

.slide--accent {
    background: var(--accent-soft);
}

.slide.index {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border: 0;
}

.slide.index .eyebrow {
    margin-bottom: 1.2em;
}

.agenda {
    counter-reset: agenda-item;
    list-style: none;
    margin: 0;
    padding: 0;
}

.slide .agenda li {
    counter-increment: agenda-item;
    display: flex;
    align-items: baseline;
    gap: .8em;
    margin: 0 0 .35em;
    font-family: var(--font-display);
    font-size: 1.65em;
    font-weight: 500;
    line-height: 1.25;
}

.agenda li::before {
    content: "0" counter(agenda-item);
    color: var(--accent);
    font-size: .5em;
    font-weight: 700;
    letter-spacing: .12em;
}

.split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 48px;
    max-width: 900px;
    margin-top: 1em;
}

.note {
    border-left: 3px solid var(--accent);
    padding: .35em 0 .35em 1.4em;
}

.note p {
    margin: 0;
    color: var(--muted);
    font-size: .85em;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin-top: 1.6em;
}

.card {
    min-height: 185px;
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 1.25em;
}

.card__number {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: .7em;
    font-weight: 700;
    letter-spacing: .14em;
}

.card p {
    margin: 0;
    color: var(--muted);
    font-size: .78em;
}

.clean-list {
    max-width: 22em;
    margin: 1.2em 0 0;
    padding: 0;
    list-style: none;
}

.slide .clean-list li {
    position: relative;
    margin: 0 0 .8em;
    padding-left: 1.3em;
    line-height: 1.35;
}

.clean-list li::before {
    content: "";
    position: absolute;
    top: .55em;
    left: 0;
    width: .42em;
    height: .42em;
    border-radius: 50%;
    background: var(--accent);
}

.references {
    max-width: 56em;
    margin: 1.3em 0 0;
    padding-left: 1.5em;
}

.references li {
    margin: 0 0 .8em;
    padding-left: .45em;
    color: var(--muted);
    font-size: .82em;
    line-height: 1.4;
}

.references cite {
    color: var(--ink);
    font-style: normal;
    font-weight: 600;
}

.reference__meta {
    color: var(--muted);
}

.supplemental-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 900px;
    margin-top: 1.5em;
}

.supplemental-card {
    min-height: 130px;
    border: 1px solid rgba(237, 243, 239, .22);
    background: rgba(255, 255, 255, .06);
    padding: 1.25em;
}

.slide--dark .supplemental-card .note__label {
    color: #a7d4c8;
}

.supplemental-card p {
    max-width: 24em;
    margin: .45em 0 0;
    color: #d7e2de;
    font-size: .86em;
}

.acknowledgments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    max-width: 900px;
    margin-top: 1.3em;
}

.acknowledgments p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.acknowledgments strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
}

.slide code {
    background: none;
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.slide pre {
    display: block;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1em;
    background: #eef2f0;
    color: var(--ink);
    font-size: .65em;
    line-height: 1.35;
    white-space: pre;
}

.center {
    text-align: center;
}

.hide {
    visibility: hidden;
}

iframe {
    width: 100%;
    height: 462px;
    border: none;
}

@media print {
    .slide {
        background: white;
    }

    .site-footer {
        display: none;
    }
}

@media (max-width: 800px) {
    .site-footer {
        padding: 16px 24px;
    }

    .footer__links {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .supplemental-grid,
    .acknowledgments {
        grid-template-columns: 1fr;
    }
}

/* Research deck extensions ------------------------------------------------ */

.shower {
    --success: #1f78a5;
    --success-soft: #dcebf0;
    --warning: #e5a116;
    --warning-soft: #fff0c8;
    --danger: #c76f99;
    --danger-soft: #f3dce8;
    --dark-muted: #b7c8c2;
}

.slide:not(.title) h2 {
    max-width: 22em;
    margin-bottom: .55em;
}

.slide h3 {
    letter-spacing: -.02em;
}

.title-subtitle {
    max-width: 24em;
    margin: .7em 0 0;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 1.16em;
    font-weight: 500;
    line-height: 1.2;
}

.slide.title .byline {
    max-width: 54em;
    margin-bottom: .35em;
    font-size: .68em;
    line-height: 1.45;
}

.slide.title .affiliation {
    margin: 0;
    color: var(--ink);
    font-size: .62em;
    line-height: 1.35;
}

.slide.title .byline sup,
.slide.title .affiliation sup {
    margin-left: .1em;
    color: var(--accent);
    font-weight: 700;
}

.slide.title .author {
    white-space: nowrap;
}

/* Give the date its own breathing room below the affiliations. */
.slide.title .date {
    margin-top: 1.4em;
}

.slide.title .affiliation + .affiliation {
    margin-top: .15em;
}

.slide--dark code {
    color: #a7d4c8;
}

.source-note {
    margin: auto 0 0;
    color: var(--muted);
    font-size: .54em;
    line-height: 1.35;
}

.source-note a {
    color: var(--accent);
    border-bottom: 1px solid currentColor;
}

.source-note--dark {
    color: var(--dark-muted);
}

/* Supplementary evidence components ------------------------------------- */

.interactive-shell {
    display: grid;
    align-items: stretch;
    gap: 1.05em;
    margin-top: .6em;
}

.interactive-shell--complexity {
    grid-template-columns: minmax(0, 1.38fr) minmax(220px, .62fr);
}

.interactive-shell--heatmap {
    grid-template-columns: minmax(0, 1.48fr) minmax(215px, .52fr);
}

.static-figure {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--line);
    background: #fff;
    padding: .55em .65em .4em;
}

.static-figure img {
    display: block;
    width: 100%;
    height: 256px;
    object-fit: contain;
}

.static-figure--heatmap img {
    height: 282px;
}

.static-figure figcaption {
    margin-top: .25em;
    color: var(--muted);
    font-size: .5em;
    line-height: 1.25;
}

.live-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--surface);
    padding: .8em .9em .65em;
}

.live-panel__topline {
    display: flex;
    align-items: center;
    gap: .42em;
    color: var(--accent);
    font-size: .5em;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.live-dot {
    width: .7em;
    height: .7em;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 .2em var(--success-soft);
}

.live-panel h3 {
    margin: .7em 0 .2em;
    font-size: .98em;
}

.live-panel p {
    margin: 0 0 .55em;
    color: var(--muted);
    font-size: .59em;
    line-height: 1.35;
}

.live-panel iframe {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 128px;
    height: 170px;
    border: 1px solid var(--line);
    background: #fff;
}

.live-link {
    display: inline-block;
    align-self: flex-start;
    margin-top: .55em;
    color: var(--accent) !important;
    border-bottom: 1px solid currentColor !important;
    font-family: var(--font-display);
    font-size: .54em;
    font-weight: 700;
}

.acknowledgments--wide {
    max-width: 60em;
    margin-top: 1.9em;
}

.acknowledgments--wide > div {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
}

.definition-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2em;
    margin-top: 2em;
}

.definition-card {
    min-height: 8em;
    border: 1px solid var(--line);
    border-top: 4px solid var(--success);
    border-radius: 0 0 10px 10px;
    background: var(--surface);
    padding: 1em 1.15em;
}

.definition-card--success { border-color: var(--success); }

.definition-card--empty { border-color: var(--warning); }

.definition-card--error { border-color: var(--danger); }

.outcome-dot {
    display: block;
    width: .8em;
    height: .8em;
    margin-bottom: .8em;
    border-radius: 50%;
    background: var(--success);
}

.definition-card--empty .outcome-dot { background: var(--warning); }

.definition-card--error .outcome-dot { background: var(--danger); }

.definition-card strong {
    display: block;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .86em;
}

.definition-card p {
    margin: .55em 0 0;
    color: var(--muted);
    font-size: .65em;
    line-height: 1.4;
}

.references--compact {
    max-width: 58em;
    margin-top: 1em;
}

.references--compact {
    columns: 2;
    column-gap: 2.2em;
}

.references--compact li {
    margin-bottom: .35em;
    font-size: .54em;
    break-inside: avoid;
}

.supplemental-slide h2 {
    max-width: 26em;
}

/* Shared slide scale ------------------------------------------------------- */

.slide:not(.title) {
    padding-top: 42px;
    padding-bottom: 26px;
}

.slide:not(.title) h2 {
    max-width: 30em;
    margin-bottom: .4em;
    font-size: 1.55em;
    line-height: 1.08;
}

.slide:not(.title) .lead {
    font-size: 1.1em;
}

/* Story slides: headline → picture → take-home → sources ------------------- */

.shower {
    --manual: #1f78a5;
    --manual-soft: #dcebf0;
    --algo: #d48a0c;
    --algo-dark: #a86a00;
    --algo-soft: #fbecd0;
    --empty-cell: #cfd6d4;
    --error-cell: #d98fb1;
}

.slide.story {
    display: flex;
    flex-direction: column;
}

.slide.story h2 {
    flex: 0 0 auto;
    margin-bottom: .3em;
}

.visual {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.visual > svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.icon-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* SVG typography */
.visual text {
    fill: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
}

.visual .t-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
}

.visual .t-label {
    font-size: 15px;
}

.visual .t-strong {
    font-weight: 700;
}

.visual .t-small {
    fill: var(--muted);
    font-size: 12.5px;
}

/* Slide 01 has room for larger, darker supporting text. */
#promise .visual .t-small {
    fill: var(--ink);
    font-size: 14px;
}

.visual .t-italic {
    font-style: italic;
}

.visual .t-big {
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 600;
    letter-spacing: -.03em;
}

.visual .t-mid {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
}

.visual .t-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12.5px;
}

.visual .t-center { text-anchor: middle; }

/* Background-coloured outline so lines drawn later pass visually behind text. */
.visual .halo text {
    paint-order: stroke;
    stroke: var(--paper);
    stroke-width: 6px;
    stroke-linejoin: round;
}

.visual .t-end { text-anchor: end; }

.visual .t-white { fill: #fff; }

.visual .t-light { fill: #d7e2de; }
.visual .t-muted { fill: var(--muted); }

.visual .t-manual { fill: var(--manual); }

.visual .t-algo { fill: var(--algo-dark); }

.visual .t-accent { fill: var(--accent); }

.visual .t-danger,
.visual text .svg-link .t-danger { fill: #b3477b; }

/* SVG shapes */
.ic-ink { color: var(--ink); }

.ic-muted { color: var(--muted); }

.ic-accent { color: var(--accent); }

.ic-manual { color: var(--manual); }

.ic-algo { color: var(--algo); }

.ic-danger { color: #b3477b; }

.ic-white { color: #fff; }

.panel {
    fill: var(--surface);
    stroke: var(--line);
    stroke-width: 1.5;
}

.panel--manual { fill: var(--manual-soft); stroke: none; }

.panel--algo { fill: var(--algo-soft); stroke: none; }

.panel--ink { fill: var(--ink); stroke: none; }

.panel--accent { fill: var(--accent-soft); stroke: none; }

.disc--accent { fill: var(--accent-soft); }

.disc--manual { fill: var(--manual-soft); }

.disc--algo { fill: var(--algo-soft); }

.disc--danger { fill: var(--danger-soft); }

.disc--white { fill: #fff; stroke: var(--line); stroke-width: 1.5; }

.pill {
    fill: var(--surface);
    stroke: var(--line);
    stroke-width: 1.5;
}

/* Pill labels: the text drawn right after each pill. */
.visual .pill + text {
    fill: var(--ink);
    font-weight: 600;
}

.pill--danger {
    fill: var(--danger-soft);
    stroke: none;
}

.bubble {
    fill: var(--surface);
    stroke: var(--line);
    stroke-width: 1.5;
}

.flow {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.4;
    stroke-linecap: round;
    marker-end: url(#arrow-ink);
}

.flow--accent { stroke: var(--accent); marker-end: url(#arrow-accent); }

.flow--manual { stroke: var(--manual); marker-end: url(#arrow-manual); }

.flow--algo { stroke: var(--algo); marker-end: url(#arrow-algo); }

.flow--danger { stroke: #b3477b; marker-end: url(#arrow-danger); }
.deny-mark circle { fill: #b3477b; stroke: #fff; stroke-width: 2; }
.deny-mark path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }

.flow--thin { stroke-width: 1.4; }
.timeline-line { stroke-width: 3.2; }
.flow--dashed { stroke-dasharray: 5 4; }
.flow--back { marker-start: url(#arrow-ink); marker-end: none; }
.flow--back-accent { stroke: var(--accent); marker-start: url(#arrow-accent); marker-end: none; }

.flow--probe {
    stroke: var(--algo);
    stroke-width: 1.4;
    stroke-dasharray: 4 4;
    marker-end: none;
}

.flow--plain { marker-end: none; }

/* Slide 03: the UniProt part of the query travels on slate arrows, the
 * SERVICE part on blue ones; algorithmic probes are request and reply. */
.flow--part-uniprot { stroke: #5f6f7a; marker-end: url(#arrow-slate); }
.flow--both { marker-start: url(#arrow-manual); marker-end: url(#arrow-manual); }
.flow--dashed-ret { stroke-dasharray: 6 5; }
.code-bracket { fill: none; stroke: #5f6f7a; stroke-width: 2; stroke-linejoin: round; }
/* Dotted leader from the SERVICE block to the request that carries it. */
.service-leader { fill: none; stroke: #ee2e24; stroke-width: 1.4; stroke-dasharray: 2 4; stroke-linecap: round; }
/* Slide 03a: the routes in each endpoint's logo colour (UniProt blue, Bgee red). */
.logo-uniprot { fill: #006f9d; }
.logo-bgee { fill: #ee2e24; }
.code-bracket--uniprot { stroke: #006f9d; }
.flow--uniprot { stroke: #006f9d; marker-end: url(#arrow-uniprot); }
.flow--bgee { stroke: #ee2e24; marker-end: url(#arrow-bgee); }
.dot-accent { fill: var(--accent); }
.flow--bgee-both { stroke: #ee2e24; stroke-width: 1.6; marker-start: url(#arrow-bgee); marker-end: url(#arrow-bgee); }
.flow--uniprot-both { stroke: #006f9d; stroke-width: 1.6; marker-start: url(#arrow-uniprot); marker-end: url(#arrow-uniprot); }
/* Algorithmic probes (request and reply), and the engine on slide 03b. */
.probe-badge { stroke: var(--algo); stroke-width: 1.2; }
.plan-join { stroke: var(--algo); stroke-width: 1.6; }
.flow--probe-both { marker-start: url(#arrow-algo); marker-end: url(#arrow-algo); }

.axis {
    stroke: var(--ink);
    stroke-width: 1.5;
}

.grid {
    stroke: var(--line);
    stroke-width: 1;
}

.band { fill: #eaeeeb; }

.series-manual {
    fill: none;
    stroke: var(--manual);
    stroke-width: 3;
    stroke-dasharray: 7 6;
}

.series-algo {
    fill: none;
    stroke: var(--algo);
    stroke-width: 3;
}

.dot-manual { fill: var(--manual); }

.dot-algo { fill: var(--algo); }

.dot-run { opacity: .45; }

.dot-avg { stroke: #fff; stroke-width: 2.5; }

.cell--manual { fill: var(--manual); }

.cell--algo { fill: var(--algo); }

.cell--empty { fill: var(--empty-cell); }

.cell--error { fill: var(--error-cell); }

.seg--refused { fill: #b3477b; }

.seg--server { fill: var(--error-cell); }

.seg--other { fill: #9aa6a9; }

/* The theme hides ".badge"; SVG status badges (e.g. "403") use their own class. */
.status-badge { display: inline; fill: #b3477b; }

/* Running example: one real query (liver transporters) followed through the talk */
.shower {
    --example: #5b4fa8;
    --example-soft: #ebe8f6;
}

.visual .t-example { fill: var(--example); }

/* Citation links inside diagrams */
.visual .svg-link { cursor: pointer; }
.visual .svg-link:hover text { fill: var(--accent); text-decoration: underline; }
.visual text .svg-link tspan { fill: var(--accent); }
.visual text .svg-link:hover tspan { text-decoration: underline; }
.ic-example { color: var(--example); }
.panel--example { fill: var(--example-soft); stroke: none; }

.example-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
    gap: 1.6em;
    margin-top: .6em;
}

.slide .example-layout pre {
    margin: 0;
    padding: .9em 1em;
    font-size: .44em;
    line-height: 1.3;
    overflow: hidden;
}

.run-row {
    display: grid;
    grid-template-columns: 6.2em minmax(0, 1fr);
    align-items: center;
    gap: .6em;
    margin-bottom: .3em;
}

.run-label {
    font-family: var(--font-display);
    font-size: .62em;
    font-weight: 600;
    line-height: 1.15;
}

.run-label small {
    display: block;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: .82em;
    font-weight: 400;
}

.run-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.run {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    vertical-align: middle;
}

.run--ok { background: var(--manual); }
.run--empty { background: var(--empty-cell); }
.run--err { background: var(--error-cell); }

.run-legend {
    display: flex;
    align-items: center;
    gap: .45em;
    margin: .6em 0 0;
    color: var(--muted);
    font-size: .5em;
}

.run-legend .run {
    width: 12px;
    height: 12px;
    margin-left: .6em;
}

.run-legend .run:first-child {
    margin-left: 0;
}

.slide .run-notes {
    margin: .6em 0 0;
    padding: 0 0 0 .8em;
    border-left: 3px solid var(--example);
    list-style: none;
    font-size: .5em;
    line-height: 1.35 !important;
}

.slide .run-notes > li {
    margin: 0;
    padding: 0;
}

.slide .run-notes > li::before {
    content: none;
}

.slide .run-notes > li + li {
    margin-top: .35em;
}

.run-notes strong {
    color: var(--ink);
}

/* Slide 02 wilderness scene */
.ic-pine { color: #3d6f6b; }
.wild-sky { fill: #e6efee; }
.wild-sun { fill: #f2c14e; }
.wild-cloud { fill: #b9c3c5; }
.wild-bolt { fill: #e5a116; }
.wild-peak { fill: #8fa4a1; }
.wild-peak--far { fill: #b3c4c1; }
.wild-snow { fill: #fff; }
.wild-ground { fill: #cfe0d0; }
/* "In the lab" scene: sterile, tiled, everything under glass. */
.lab-wall { fill: #f4f8f7; }
.lab-tile-line { fill: none; stroke: #e2eae8; stroke-width: 1; }
.lab-wire { fill: none; stroke: #b9c7c4; stroke-width: 1.2; }
.lab-lamp { fill: #fff; stroke: #b9c7c4; stroke-width: 1.2; }
.lab-plaque { fill: #fff; stroke: #b9c7c4; stroke-width: 1; }
.visual .lab-plaque-text { fill: var(--muted); font-family: var(--font-display); font-size: 8.5px; font-weight: 700; letter-spacing: .12em; }
.lab-plate { fill: #fff; stroke: #9fb6b2; stroke-width: 1; }
.visual .lab-plate-text { fill: var(--ink); font-family: var(--font-display); font-size: 8px; font-weight: 600; }
.lab-mini-db { fill: #fff; stroke: var(--ink); stroke-width: 1.4; }
.lab-net-link { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.lab-jar { fill: rgba(220, 236, 231, .35); stroke: #9fb6b2; stroke-width: 1.4; }
.lab-glint { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .9; }
.lab-jar-base { fill: #dfe7e5; stroke: #9fb6b2; stroke-width: 1; }
.lab-bench { fill: #dfe7e5; stroke: #b9c7c4; stroke-width: 1; }
.lab-cabinet { fill: #eaf0ef; }

.wild-post { fill: #8a6a3c; stroke: #5e4423; stroke-width: .8; }
.wild-sign { fill: #dcb67f; stroke: #6e4f28; stroke-width: 1.4; stroke-linejoin: round; }
.wild-sign-grain { fill: none; stroke: #b48a52; stroke-width: 1; stroke-linecap: round; }
.wild-sign-nail { fill: #5e4423; }

.visual .wild-sign-text {
    fill: #4a3119;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

.visual .wild-sticker-text {
    fill: var(--ink);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
}

.wild-db {
    fill: #fff;
    stroke: var(--ink);
    stroke-width: 2;
}

.wild-db-top {
    fill: #eceeed;
    stroke: var(--ink);
    stroke-width: 2;
}

.wild-db-ring {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.4;
}

/* Generic, unnamed database: same cylinder, greyed out. */
.db-muted .wild-db { fill: #eef1f0; stroke: var(--muted); }
.db-muted .wild-db-top { fill: #dde3e1; stroke: var(--muted); }
.db-muted .wild-db-ring { stroke: var(--muted); }
/* Fades the badge toward white about as much as 55% opacity would, but keeps
 * its white disc solid, so the database outline does not show through it. */
.rdf-badge--muted { filter: contrast(.5) brightness(1.5); }

.wild-grass {
    fill: none;
    stroke: #5b8a5a;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flow-pair {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.8;
    marker-start: url(#arrow-light);
    marker-end: url(#arrow-light);
}

/* Databases in the slide 02 landscape link to their SPARQL interfaces. */
.db-link { cursor: pointer; }
.db-link:hover .wild-db,
.db-link:hover .wild-db-top { stroke: var(--accent); stroke-width: 2.6; }

.wild-bird {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.pill--wild {
    fill: #e3ece0;
    stroke: none;
}

@keyframes wild-flash {
    0%, 86%, 100% { opacity: 1; }
    88%, 92% { opacity: .15; }
    90% { opacity: 1; }
}

.shower.full .slide.active .wild-bolt {
    animation: wild-flash 4s ease-in-out infinite;
}

/* Running footer: author · title · venue, quiet and out of the content area */
.slide:not(.title) {
    padding-bottom: 34px;
}

.slide-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 22px;
    margin: 0;
    background: var(--accent);
    padding: 0 72px;
    color: #f5f1e6;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .03em;
}

.slide .slide-footer a {
    color: inherit;
    border-bottom: 1px solid transparent;
}

.slide .slide-footer a:hover {
    color: #fff;
    border-bottom-color: currentColor;
}

/* Key-message bar and source notes */
.takehome {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    justify-content: flex-start;
    gap: .9em;
    margin: 20px 0;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    padding: .55em 1.2em;
    font-family: var(--font-display);
    font-size: .76em;
    font-weight: 500;
    line-height: 1.3 !important;
}

/* Outrank the theme's ".slide p { margin }" so the equal 20px gaps apply. */
.slide p.takehome {
    margin: 20px 0;
}

.takehome__label {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: .74em;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.slide--dark .takehome {
    border-color: rgba(237, 243, 239, .2);
    border-left-color: #a7d4c8;
    background: rgba(255, 255, 255, .05);
    color: #edf3ef;
}

.slide--dark .takehome__label {
    color: #a7d4c8;
}

.footnote > span {
    display: block;
    width: fit-content;
    margin-left: -.35em;
    border-radius: 4px;
    padding: 0 .35em;
    transition: background-color .2s ease, color .2s ease;
}

/* Marker and footnote light up together on hover (see the script in index.html). */
.fn-marker {
    cursor: help;
}

.footnote > span.fn-hover {
    background: var(--accent-soft);
    box-shadow: 0 0 0 1.5px var(--accent);
    color: var(--ink);
}

/* SVG text has no background, so a thick soft stroke painted under the digit
 * gives the marker the same highlight. */
.visual .fn.fn-hover {
    fill: var(--ink);
    paint-order: stroke;
    stroke: var(--accent-soft);
    stroke-width: 7px;
    stroke-linejoin: round;
}

.footnote sup.fn-hover,
sup.fn-hover {
    color: var(--ink);
}

/* Invisible marker so continuation lines align with the numbered line above. */
.footnote .fn-spacer {
    visibility: hidden;
}

.footnote {
    flex: 0 0 auto;
    margin: 0;
    color: var(--muted);
    font-size: .46em;
    line-height: 1.35 !important;
}

/* Slide 09: its last two notes share a line, so the figure keeps its size. */
#why-worse .footnote > span:nth-last-child(-n + 2) {
    display: inline-block;
}

.footnote sup,
.visual .fn {
    color: var(--accent);
    font-weight: 700;
}

.visual .fn {
    fill: var(--accent);
    font-size: 10px;
}

.slide--dark .footnote {
    color: var(--dark-muted);
}

/* "Manual" / "Algorithmic" as named terms in running text (key messages, footnotes). */
.term-manual { color: var(--manual); font-weight: 700; }
.term-algo { color: var(--algo-dark); font-weight: 700; }

.footnote .fn-manual { color: var(--manual); }
.footnote .fn-algo { color: var(--algo-dark); }

.footnote a {
    color: var(--accent);
    border-bottom: 1px solid currentColor;
}

/* Closing slide */
.closing-layout {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) 11.4em auto;
    align-items: center;
    gap: 1.6em;
    min-height: 0;
}

.recap {
    margin: 0;
    padding: 0;
    list-style: none;
}

.slide .recap li {
    display: flex;
    align-items: center;
    gap: .8em;
    margin: 0 0 .9em;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .8em;
    line-height: 1.2;
}

.slide .recap li::before {
    display: none;
}

.recap svg {
    flex: 0 0 auto;
    width: 2.3em;
    height: 2.3em;
    border-radius: 50%;
    background: var(--accent-soft);
    padding: .4em;
    color: var(--accent);
}

.recap small {
    display: block;
    margin-top: .2em;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: .66em;
}

.thanks {
    border-left: 3px solid var(--accent);
    padding-left: 1.3em;
}

.thanks strong {
    display: block;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.35em;
    font-weight: 600;
    line-height: 1.05;
}

.slide .thanks .thanks-label {
    margin: 0;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: .5em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.slide .thanks-links {
    margin: .6em 0 0;
    padding: 0;
    list-style: none;
}

.slide .thanks-links > li {
    display: flex;
    align-items: center;
    gap: .6em;
    margin: 0 0 1em;
}

.slide .thanks-links > li::before {
    content: none;
}

.thanks-links svg {
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    color: var(--accent);
}

.thanks-links span {
    color: var(--muted);
    font-size: .62em;
    line-height: 1.3;
}

.thanks-links a {
    display: block;
    color: var(--accent) !important;
    border-bottom: 0 !important;
    font-family: var(--font-display);
    font-size: 1.04em;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* Supplementary section */
.supp-divider {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Read down the left column, then down the right; group headings flow with their items. */
.supp-index {
    columns: 2;
    column-gap: 3em;
    max-width: 48em;
    margin: .8em 0 0;
    padding: 0;
    list-style: none;
}

.slide .supp-index li {
    break-inside: avoid;
}

.slide .supp-index .supp-index__group {
    margin: .9em 0 .15em;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: .5em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    break-after: avoid;
}

.slide .supp-index .supp-index__group:first-child {
    margin-top: 0;
}

.supp-index small {
    margin-left: .6em;
    color: var(--muted);
    font-size: .72em;
    font-weight: 600;
}

.slide .supp-index li {
    margin: 0;
    font-size: .74em;
    line-height: 1.6;
}

.slide .supp-index li::before {
    display: none;
}

.supp-index span {
    display: inline-block;
    width: 2.6em;
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 700;
}

.supp-index a {
    color: var(--ink);
    border-bottom: 0;
}

.supp-index a:hover {
    color: var(--accent);
}

.static-figure.static-figure--full img {
    height: 340px;
}

.static-figure img {
    height: 200px;
}

.static-figure--heatmap img {
    height: 190px;
}

.live-panel {
    padding: .55em .75em .45em;
}

.live-panel h3 {
    margin-top: .45em;
    line-height: 1.15;
}

.live-panel p {
    margin-bottom: .35em;
}

.live-panel iframe {
    min-height: 92px;
    height: 112px;
}

.interactive-shell {
    margin-top: .25em;
}

.interactive-shell--heatmap .live-panel h3 {
    font-size: .85em;
}

.interactive-shell--heatmap .live-panel p {
    max-width: 20em;
    font-size: .54em;
}

.interactive-shell--heatmap .live-panel iframe {
    height: 96px;
    min-height: 80px;
}

.live-link {
    margin-top: .35em;
}

.definition-grid {
    margin-top: 1.35em;
}

.definition-card {
    min-height: 7em;
}

/* S2: live figure embedded from the results website */
.live-figure {
    display: flex;
    flex-direction: column;
    margin: .5em 0 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: .4em .5em .35em;
}

/* The live chart keeps its own aspect ratio (1582 × 620), so it always fits. */
.live-frame {
    display: block;
    width: 100%;
    height: 300px; /* replaced by the chart's own height once it loads */
    border: 0;
}

.live-fallback {
    display: none;
    width: 100%;
    height: auto;
}

.live-figure.is-offline .live-frame {
    display: none;
}

.live-figure.is-offline .live-fallback {
    display: block;
}

.live-figure figcaption {
    display: flex;
    align-items: center;
    gap: 1.1em;
    margin-top: .45em;
    border-top: 1px solid var(--line);
    padding-top: .45em;
    color: var(--muted);
    font-size: .5em;
    line-height: 1.2;
    white-space: nowrap;
}

.live-tag {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

a.live-tag,
.slide a.live-tag {
    color: var(--accent);
    border-bottom: 1px solid transparent;
    text-decoration: none;
}

a.live-tag:hover,
.slide a.live-tag:hover {
    border-bottom-color: currentColor;
}

/* Mentions of a specific query ("query 6") are set in italics. */
.qname {
    font-style: italic;
}

.live-key {
    display: inline-flex;
    align-items: center;
    gap: .4em;
}

.live-key b {
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.key-swatch {
    display: inline-block;
    width: 1.6em;
    height: .8em;
    border-radius: 2px;
}

.key-swatch--2 {
    background: #1f77b4;
}

.key-swatch--3 {
    background: repeating-linear-gradient(45deg, #ff7f0e 0 3px, #ffb070 3px 5px);
}

.live-actions {
    margin-left: auto;
}

.live-figure figcaption a {
    color: var(--accent);
    border-bottom: 1px solid currentColor;
    font-weight: 700;
}

.live-fallback {
    display: none;
    width: 100%;
    height: auto;
}

.live-figure.is-offline .live-frame {
    display: none;
}

.live-figure.is-offline .live-fallback {
    display: block;
}

.live-figure figcaption {
    display: flex;
    align-items: center;
    gap: .5em;
    margin-top: .3em;
    color: var(--muted);
    font-size: .5em;
}

.live-figure figcaption a {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--accent);
    border-bottom: 1px solid currentColor;
    font-weight: 700;
}

/* S3: SERVICE vs. no-service algebra, side by side */
.algebra-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1em;
    margin-top: 0;
}

.algebra {
    margin: 0;
}

.algebra figcaption {
    display: flex;
    flex-direction: column;
    gap: .1em;
    margin-bottom: .35em;
    font-size: .54em;
    line-height: 1.25;
}

.algebra figcaption code {
    color: var(--muted);
    font-size: .9em;
}

.alg-title {
    font-family: var(--font-display);
}

.alg-title--manual { color: var(--manual); }
.alg-title--algo { color: var(--algo-dark); }

.slide .algebra pre {
    margin: 0;
    border-radius: 8px;
    padding: .5em .9em;
    font-size: .36em;
}

.alg-hl {
    display: block;
    margin: 0 -.6em;
    border-radius: 3px;
    padding: 0 .6em;
}

/* Undo the theme's full-bleed, double-spaced code lines inside these panels. */
.slide .algebra pre code,
.slide .example-layout pre code {
    margin-left: 0;
    padding: 0;
    width: auto;
    line-height: 1.38;
}

.slide pre code {
    color: inherit;
}

.slide .algebra pre code {
    line-height: 1.24;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.alg-hl--manual {
    background: var(--manual-soft);
    color: #0f4f73;
}

.alg-hl--algo {
    background: var(--algo-soft);
    color: #7a4c00;
}

.alg-note {
    margin: .7em 0 .4em;
    border-left: 3px solid var(--accent);
    padding-left: .8em;
    color: var(--ink);
    font-size: .62em;
    line-height: 1.4 !important;
}

/* Builds: steps fade in; connectors draw themselves ------------------------ */

.shower.full .slide .next {
    opacity: 0;
    transition: opacity .5s ease, visibility 0s linear .5s;
}

.shower.full .slide .next.active,
.shower.full .slide .next.visited {
    opacity: 1;
    transition: opacity .5s ease, visibility 0s;
}

/* HTML steps also rise slightly. SVG groups only fade, so a CSS transform
 * never overrides their positioning. */
.shower.full .slide .next:is(p, div, li, figure, aside, article) {
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}

.shower.full .slide .next:is(p, div, li, figure, aside, article):is(.active, .visited) {
    transform: none;
    transition: opacity .5s ease, transform .5s ease, visibility 0s;
}

.shower.full .slide .next .draw {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .9s ease .15s;
}

.shower.full .slide .next:is(.active, .visited) .draw {
    stroke-dashoffset: 0;
}

/* Shapes that must sit behind earlier steps are drawn first in the SVG and
 * revealed together with the step marked .reveal-behind. The slide classes
 * (behind-shown, lead-shown, fn-shown) are set by a script in index.html. */
.shower.full .slide .behind {
    opacity: 0;
    transition: opacity .5s ease;
}

.shower.full .slide.behind-shown .behind {
    opacity: 1;
}

.shower.full .slide .behind .draw {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .9s ease .15s;
}

.shower.full .slide.behind-shown .behind .draw {
    stroke-dashoffset: 0;
}

/* Elements marked .with-step appear together with the slide's .step-lead step
 * instead of adding a step of their own. */
.shower.full .slide .with-step {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
}

.shower.full .slide.lead-shown .with-step {
    opacity: 1;
    transform: none;
}

/* Elements marked .drop-out fade away when the slide's .step-drop step shows
 * (slide 03b: the query with SERVICE makes way for the one without). Outside
 * full screen they show that final state. */
.drop-out {
    transition: opacity .5s ease;
}

.shower:not(.full) .drop-out,
.shower.full .slide.drop-shown .drop-out {
    opacity: 0;
}

/* Slide 03b: the parts colour in after the engine has asked the endpoints. */
.shower.full #approaches-algo.behind-shown .behind {
    transition: opacity .45s ease .75s;
}

/* A numbered footnote appears with the build step (.fn-step) that holds its
 * marker. */
.shower.full .slide .fn-note {
    opacity: 0;
    transition: opacity .5s ease;
}

.shower.full .slide.fn-shown .fn-note {
    opacity: 1;
}

/* No fades while the view mode switches (see the script in index.html). */
.shower.no-build-anim .slide .next,
.shower.no-build-anim .slide .next .draw,
.shower.no-build-anim .slide .behind,
.shower.no-build-anim .slide .behind .draw,
.shower.no-build-anim .slide .with-step,
.shower.no-build-anim .slide .fn-note,
.shower.no-build-anim .slide .late,
.shower.no-build-anim .slide .drop-out {
    transition: none !important;
}

.shower.no-build-anim .slide .join-pop {
    animation: none !important;
}

/* Slide 03: the panel that morphs between an overview row and its detail
 * slide (see the script in index.html). */
.zoom-overlay {
    position: absolute;
    z-index: 5;
    border-radius: 16px;
    pointer-events: none;
}

.zoom-overlay--manual { background: var(--manual-soft); }
.zoom-overlay--algo { background: var(--algo-soft); }

/* Keeps the overview the same size as its recap, which adds the key message. */
.takehome--placeholder {
    visibility: hidden;
}

/* Keeps 03a's figure the same size as 03b's, which has a footnote. */
.footnote--placeholder {
    visibility: hidden;
}

/* The two parts of the running-example query, used on the slide 03 details. */
.code-band--uniprot { fill: #e6f1f6; stroke: none; }
.code-band--bgee { fill: #fdebea; stroke: none; }
.code-edge--uniprot { fill: #006f9d; }
.code-edge--bgee { fill: #ee2e24; }
.dot-part--uniprot { fill: #5f6f7a; }
.dot-part--bgee { fill: var(--manual); }

/* Larger, semi-bold small print for the slide 03 detail figures. */
/* The running-example question in speech bubbles (slides 01 and 03a). */
.visual .t-question {
    fill: var(--ink);
    font-weight: 600;
}

.visual .run-def { fill: var(--ink); }

.visual .t-caption {
    fill: #3c4a50;
    font-size: 16px;
    font-weight: 600;
}

/* "federation engine" in titles: styled like SERVICE, in the algorithmic orange. */
.slide code.code-engine {
    color: var(--algo-dark);
    font-size: .9em;
    font-weight: 700;
}

/* The SERVICE keyword in running text and titles, as in the figures. */
.slide code.code-service {
    color: var(--manual);
    font-size: .9em;
    font-weight: 700;
}

.code-line { fill: none; stroke: #9aa8b0; stroke-width: 2.4; stroke-linecap: round; }

/* Parts of a build step that follow its main element: they fade in shortly
 * after it (slide 03b: the reply after the request, the answer after the join). */
.shower.full .slide .next .late {
    opacity: 0;
    transition: opacity .4s ease;
}

.shower.full .slide .next:is(.active, .visited) .late {
    opacity: 1;
    transition: opacity .45s ease .75s;
}

/* Slide 03b: UniProt's join badge pops in before the answer leaves. */
@keyframes join-pop {
    0% { opacity: 0; transform: scale(.2); }
    70% { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: none; }
}

.shower.full .slide .next .join-pop {
    transform-box: fill-box;
    transform-origin: center;
}

.shower.full .slide .next.active .join-pop {
    animation: join-pop .5s ease both;
}

/* Slide 03b: names for the two parts of the query. */
.part-tag { fill: #fff; stroke-width: 1.4; }
.part-bracket { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.part-bracket--uniprot { stroke: #006f9d; }
.part-bracket--bgee { stroke: #ee2e24; }
.part-tag--uniprot { stroke: #006f9d; }
.part-tag--bgee { stroke: #ee2e24; }
.visual .part-tag-text--uniprot { fill: #006f9d; }
.visual .part-tag-text--bgee { fill: #ee2e24; }

.join-badge { stroke: var(--accent); stroke-width: 1.8; }

@keyframes cell-in {
    from {
        opacity: 0;
        transform: scale(.3);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.shower.full .slide.active .waffle--intro .cell,
.shower.full .slide .next.active .waffle .cell {
    transform-box: fill-box;
    transform-origin: center;
    animation: cell-in .3s ease both;
    animation-delay: calc(var(--i) * 10ms + .15s);
}

@media (prefers-reduced-motion: reduce) {
    .shower.full .slide .next,
    .shower.full .slide .next .late,
    .shower.full .slide .with-step,
    .shower.full .slide .fn-note,
    .shower.full .slide .next .draw {
        transform: none !important;
        transition: none !important;
    }

    .shower .drop-out {
        transition: none !important;
    }

    .shower.full .slide .cell,
    .shower.full .slide .wild-bolt,
    .shower.full .slide .join-pop {
        animation: none !important;
    }
}

@media print {
    .live-frame {
        display: none;
    }

    .live-fallback {
        display: block;
    }

    .shower .behind {
        opacity: 1 !important;
    }

    .shower .next,
    .shower .with-step,
    .shower .fn-note {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .shower .draw {
        stroke-dashoffset: 0 !important;
    }

    .shower .drop-out {
        opacity: 0 !important;
    }

    .live-panel {
        display: none;
    }

    .interactive-shell--complexity,
    .interactive-shell--heatmap {
        grid-template-columns: 1fr;
    }

    .static-figure img {
        height: 260px;
    }

    .interactive-shell--heatmap .static-figure img {
        height: 310px;
    }

    .slide {
        background: #fff;
    }
}

@media (max-width: 800px) {
    .interactive-shell,
    .closing-layout {
        grid-template-columns: 1fr;
    }

    .definition-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .supp-index {
        columns: 1;
    }
}

/* Cover lockup: title and subtitle on one line each, spaced evenly between
 * the venue line and the partner marks in the footer row. */
.slide.title h2 {
    width: auto;
    max-width: 100%;
    font-size: 1.55em;
    line-height: 1.1;
    white-space: nowrap;
}

.slide.title .title-subtitle {
    max-width: 100%;
    margin-top: .45em;
    font-size: 1em;
    white-space: nowrap;
}

.slide.title .title-copy {
    justify-content: flex-start;
}

.slide.title .title-copy > h2 {
    margin-top: auto;
}

.slide.title .title-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.6em;
    margin-top: auto;
    margin-bottom: auto;
}

/* QR code to the live deck, beside the author block. The SVG carries its own
 * white tile and quiet zone, so it stays scannable on the paper background. */
.slide.title .title-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    border-bottom: 0 !important;
}

.slide.title .title-qr img {
    width: 176px;
    height: 176px;
}

/* The QR image sits directly on the light slide background, which also
 * serves as its quiet zone. */
.qr-code {
    display: block;
}

.closing-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    border-bottom: 0 !important;
    border-left: 1px solid var(--line) !important;
    padding-left: 1em;
}

.closing-qr .qr-code {
    width: 176px;
    height: 176px;
}

.title-qr__label {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .58em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Reserve the footer row on the layout itself, so the auto margins above
 * split the remaining height into equal gaps. */
.slide.title .title-layout {
    padding-top: 0;
    padding-bottom: 78px;
}

.slide.title .title-layout {
    position: relative;
    grid-template-columns: 1fr;
}

.slide.title .title-details {
    padding-right: 0;
    padding-bottom: 0;
}

.slide.title .title-logos {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    justify-content: stretch;
    gap: .9em;
    width: 100%;
    border-top: 1px solid var(--line);
    border-left: 0;
    padding: .8em 0 0;
}

.slide.title .title-logo {
    width: auto;
}

/* Compact partner row: every mark shares one small height budget. */
.slide.title .title-logo--fwo img { max-width: 64px; max-height: 22px; }
.slide.title .title-logo--ugent img { max-width: 76px; max-height: 58px; }
.slide.title .title-logo--vito img { max-width: 80px; max-height: 28px; }
.slide.title .title-logo--idlab img { max-width: 80px; max-height: 36px; }
.slide.title .title-logo--sib img { max-width: 72px; max-height: 38px; }
.slide.title .title-logo--swissprot img { max-width: 84px; max-height: 44px; }

.slide.title .title-logo + .title-logo {
    border-left: 1px solid var(--line);
}

@media (max-width: 800px) {
    .slide.title .title-layout {
        padding-bottom: 8.5em;
    }

    .slide.title .title-logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Talk outline and section tracker ---------------------------------------- */

/* Progress bar on the eyebrow row: one segment per section, sized by its
 * number of slides; it fills slide by slide, and the current section's name
 * sits above its segment. */
.section-track {
    position: absolute;
    top: 58px;
    right: 72px;
    display: flex;
    gap: 2px;
    width: 170px;
    margin: 0;
}

.slide .section-track a {
    position: relative;
    flex: var(--n) 1 0;
    height: 3px;
    border: 0;
    border-radius: 2px;
    background: var(--line);
    text-decoration: none;
}

.section-track i {
    display: block;
    width: calc(var(--fill) * 100%);
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
}

.section-track__label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-bottom: 4px;
    transform: translateX(-50%);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

/* On the outline slide the bar is still empty: a short teal tick marks the
 * starting position, with the label left-aligned above it. */
.section-track__label--whole {
    left: -5px;
    transform: none;
}

.section-track--start::before {
    position: absolute;
    top: -3px;
    left: -5px;
    width: 2px;
    height: 9px;
    border-radius: 1px;
    background: var(--accent);
    content: "";
}

.slide .section-track a:hover {
    background: var(--accent-soft);
}

.outline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    /* Centre the steps in the space below the title. */
    margin: auto 0;
    padding: 0 0 24px;
    list-style: none;
}


/* Outrank the theme's list margins so the steps centre vertically. */
.slide ol.outline {
    margin: auto 0;
}

.slide .outline li {
    position: relative;
    margin: 0;
    padding: 0;
}

/* Each step points to the next: an accent arrow between neighbouring icons,
 * so the sections read as one line of argument. */
.slide .outline li:not(:last-child)::after {
    position: absolute;
    top: 46px;
    left: calc(50% + 47px + 8px);
    width: calc(100% + 20px - 94px - 16px);
    height: 2px;
    background: var(--accent);
    content: "";
}

.slide .outline li::before {
    display: none;
}

.slide .outline li:not(:last-child)::before {
    position: absolute;
    top: 42px;
    left: calc(150% + 20px - 47px - 8px - 9px);
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    background: none;
    content: "";
    transform: rotate(45deg);
}

.slide .outline a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 0;
    color: var(--ink);
    text-align: center;
    text-decoration: none;
}

/* The tongue-in-cheek advisories: a viewer advisory under the outline's
 * journey, and its callback, the promised remedies, on the conclusions slide.
 * A quiet, compact note: icon, title, then the text behind a thin rule. */
.slide .disclaimer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .7em;
    width: fit-content;
    margin: 0 auto 2.2em;
    border: 1px solid color-mix(in srgb, var(--algo) 55%, var(--line));
    border-radius: 14px;
    background: var(--surface);
    padding: .4em 1.2em .4em .9em;
    color: var(--ink);
    font-size: .64em;
    font-weight: 500;
    line-height: 1.35;
}

.disclaimer__icon {
    flex: 0 0 auto;
    width: 1.85em;
    height: 1.85em;
    color: var(--algo);
}

.slide .disclaimer .disclaimer__title {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}

.disclaimer > span {
    border-left: 1px solid color-mix(in srgb, var(--algo) 40%, transparent);
    padding-left: .8em;
    text-wrap: balance;
}

.outline__icon {
    display: grid;
    place-items: center;
    width: 94px;
    height: 94px;
    margin-bottom: 10px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--surface);
}

/* Icons deepen in tone step by step, from the question to the answers. */
.outline li:nth-child(2) .outline__icon { background: color-mix(in srgb, var(--accent-soft) 25%, var(--surface)); }
.outline li:nth-child(3) .outline__icon { background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); }
.outline li:nth-child(4) .outline__icon { background: color-mix(in srgb, var(--accent-soft) 75%, var(--surface)); }
.outline li:nth-child(5) .outline__icon { background: var(--accent-soft); }

.outline__icon svg {
    width: 50px;
    height: 50px;
    color: var(--accent);
}

.slide .outline a:hover .outline__icon {
    background: var(--accent-soft);
}

.outline strong {
    font-family: var(--font-display);
    font-size: .92em;
    font-weight: 700;
    line-height: 1.2;
}

.outline small {
    max-width: 12.5em;
    color: var(--muted);
    font-size: .64em;
    line-height: 1.35;
}

.outline em {
    color: var(--accent);
    font-family: var(--font-display);
    margin-top: 4px;
    font-size: .54em;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .12em;
}

/* Slide 05: one inviting link to the results explorer, in place of footnotes:
 * a scannable QR code for the room, plus the clickable address. */
.slide .explore-cta {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .9em;
    margin: 0;
    border: 1.5px solid var(--accent);
    border-radius: 12px;
    background: var(--accent-soft);
    padding: .3em 1.1em .3em .35em;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .68em;
    line-height: 1.3;
    text-decoration: none;
}

.slide .explore-cta:hover {
    background: var(--surface);
}

.explore-cta__qr {
    flex: 0 0 auto;
    width: 3.6em;
    height: 3.6em;
    border-radius: 6px;
    background: #fff;
}

.explore-cta__text {
    flex: 1 1 auto;
}

.explore-cta__text {
    white-space: nowrap;
}

.explore-cta__url {
    margin-left: .7em;
    color: var(--accent);
    font-weight: 700;
}

/* Slide 13: keep the key message close to the recap; the funding line stays at the bottom. */
/* Slides 07, 09 and 12: a smaller margin above the key message lets the
 * figure centre in its space, so the gaps down the slide come out even. */
#why-fail .takehome {
    margin: 12px 0 14px;
}

#next .takehome {
    margin: 10px 0 16px;
}

/* Slide 13: a slightly smaller key message keeps the closing question on one line. */
#commons .takehome {
    font-size: .72em;
}

#why-worse .takehome {
    margin: 6px 0 16px;
}

/* Tighter column gaps make room for a QR code as large as the title slide's. */
#takeaway .closing-layout {
    flex: 0 1 auto;
    gap: 1em;
    margin: .5em 0 0;
}

#takeaway .recap li:last-child {
    margin-bottom: 0;
}

/* The key message sits centred between the recap and the remedies box. A
 * little less padding keeps it on one line; if it ever wraps, the two lines
 * come out even rather than leaving one word behind. */
#takeaway .takehome {
    gap: .6em;
    margin: auto 0;
    padding-inline: .85em;
}

#takeaway .takehome > span:last-child {
    text-wrap: balance;
}

/* The funding line sits lower than on other slides, and the key message,
 * remedies and funding line share the space above it evenly. */
#takeaway {
    padding-bottom: 22px;
}

#takeaway .disclaimer {
    margin: 0 auto auto;
}

#takeaway .footnote {
    margin-top: 0;
}

/* Acknowledgements ------------------------------------------------------- */
.ack-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6em;
    margin-top: .75em;
}

.ack-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: .45em .8em;
}

/* The tools note sits low, close to the footer bar as on the conclusions
 * slide, with clear space between it and the cards. */
#acknowledgements .footnote {
    margin-top: 1.45em;
}

.slide .ack-card h3 {
    display: flex;
    align-items: center;
    gap: .5em;
    margin: 0 0 .4em;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .68em;
    font-weight: 700;
}

.ack-icon {
    display: inline-grid;
    place-items: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}

.ack-icon svg {
    width: 1em;
    height: 1em;
}

.ack-card p {
    margin: 0 0 .45em;
    color: var(--ink);
    font-size: .54em;
    line-height: 1.38;
}

.slide .ack-people {
    display: flex;
    flex-wrap: wrap;
    gap: .3em .35em;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Pills grow to fill each row, so the rows read as justified. */
.slide .ack-people > li {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: baseline;
    justify-content: center;
    gap: .4em;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    padding: .14em .65em;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .56em;
    font-weight: 600;
}

.slide .ack-people > li::before {
    content: none;
}

.ack-people small {
    color: var(--muted);
    font-size: .82em;
    font-weight: 700;
    letter-spacing: .04em;
}

/* A glyph, not a drawn circle: text snaps to pixels, so dots match on the scaled slide. */
.ack-people small::before {
    content: "•";
    content: "•" / "";
    margin-right: .4em;
    color: var(--muted);
}

.ack-card a {
    color: var(--accent);
    border-bottom: 0;
}

.ack-logos {
    display: flex;
    align-items: center;
    gap: .8em;
    margin: 0 0 .4em;
}

.ack-logo {
    border-bottom: 0 !important;
}

.ack-logo img {
    display: block;
    width: auto;
}

.ack-logo--fwo img { height: 1.15em; }
.ack-logo--sib img { height: 1.45em; }
.ack-logo--ugent img { height: 2.6em; margin: -.45em 0; }
.ack-logo--vito img { height: 1.2em; }

.ack-arrow {
    color: var(--accent);
    font-size: .75em;
    font-weight: 700;
}

/* Slide 13: headlines from public services pile up diagonally, one after
 * another, as the slide opens; the key message follows on the next step. */
.headline-stack {
    --count: 9;
    --card-w: 370px;
    position: relative;
    display: block;
}

/* Outranks the theme's figure margin reset. */
.slide.story figure.headline-stack {
    margin-top: 36px;
}

.slide a.headline-card {
    position: absolute;
    top: calc(var(--i) * (100% - 120px) / (var(--count) - 1));
    left: calc(var(--i) * (100% - var(--card-w)) / (var(--count) - 1));
    width: var(--card-w);
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(37, 51, 59, .18);
    color: var(--ink);
    text-decoration: none;
}

.headline-card img {
    display: block;
    width: 100%;
    border-radius: 8px;
}

/* Date tab on the card's top edge, still visible once the next card covers the rest. */
.headline-card time {
    position: absolute;
    top: 0;
    right: 10px;
    transform: translateY(-68%);
    border: 1px solid #b9c4c1;
    border-radius: 2px;
    background: #fff;
    padding: 0 6px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

/* Our own observation, set in the deck's style among the external headlines. */
.slide a.headline-card--ours {
    display: flex;
    gap: 16px;
    align-items: center;
    border: 2px solid var(--accent);
    background: var(--accent-soft);
    padding: 14px 18px;
}

.slide .headline-card--ours img.headline-card__logo {
    flex: 0 0 auto;
    width: 74px;
    border-radius: 0;
}

.headline-card--ours time {
    border-color: var(--accent);
    color: var(--accent);
}

.headline-card__ours {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
}

.headline-card__ours strong {
    color: var(--accent);
}

@keyframes headline-drop {
    from { opacity: 0; transform: translate(-18px, -14px) scale(1.04); }
    to { opacity: 1; transform: none; }
}

@keyframes takehome-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.shower.full .slide .headline-card,
.shower.full .slide .headline-takehome {
    opacity: 0;
}

.shower.full .slide.active .headline-card {
    animation: headline-drop .45s ease-out both;
    animation-delay: calc(.3s + var(--i) * .6s);
}

/* The key message arrives with the last headline (its --i matches that card). */
.shower.full .slide.active .headline-takehome {
    animation: takehome-rise .45s ease-out both;
    animation-delay: calc(.3s + var(--i) * .6s);
}

.shower.no-build-anim .slide .headline-card,
.shower.no-build-anim .slide .headline-takehome {
    opacity: 1;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .shower.full .slide .headline-card,
    .shower.full .slide .headline-takehome {
        opacity: 1;
        animation: none !important;
    }
}

@media print {
    .shower .slide .headline-card,
    .shower .slide .headline-takehome {
        opacity: 1 !important;
        animation: none !important;
    }
}