#vcenter {
    vertical-align: middle;
}

#v-center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90%;
}
/* Shrink only the table on the Comparison Table slide, independent of .smaller */
.reveal .smaller-table table {
    font-size: 0.5em;
}

.reveal section#soft-bilinear-inverted-pendulum.center,
.reveal section#managing-conflicting-tasks-in-multi-robot-systems.center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 40px !important;
}
.reveal section#soft-bilinear-inverted-pendulum.center > h1,
.reveal section#managing-conflicting-tasks-in-multi-robot-systems.center > h1 {
    margin-bottom: 30px !important;
}

/* ===== Title slide: Pisa photo (as a frame) + large blue panel ===== */

/* Large blue panel: centered, almost full-size, leaving the photo as a
   border. Drawn above the photo but behind the title text. */
#title-slide.quarto-title-block.center::before {
    content: "";
    position: absolute;
    top: 3%;            /* sits slightly high, leaving a deliberate bottom frame */
    right: 3.5%;
    width: 50%;
    height: 94%;
    background-color: #0f4a7c;
    border-radius: 14px;
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.5);
    z-index: -1;

    /* logo row centered near the top of the panel */
    background-image:
        url("img/theme/unipi_white.svg"),
        url("img/theme/dii_white.png"),
        url("img/theme/cp_white.png");
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: auto 10%, auto 10%, auto 10%;
    background-position:
        top 8% left 22%,
        top 8% center,
        top 8% right 22%;
}

/* Center the title content inside the large panel (override reveal's own
   vertical centering and nudge down to clear the logo row) */
#title-slide.quarto-title-block.center {
    top: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding-top: 138px;    /* reserve the logo row at the top */
    padding-bottom: 44px;  /* keep the date clear of the rounded bottom */
    padding-right: 6.5%;   /* centers the content within the right panel */
    box-sizing: border-box;
}
#title-slide.quarto-title-block.center > * {
    position: relative;
    z-index: 1;
    width: 44%;
    max-width: 560px;
    margin: 0;
    text-align: center;
    color: white;
}

#title-slide.quarto-title-block.center > .title {
    font-size: 1.2em !important;
    line-height: 1.12;
    margin-bottom: 10px;
}
#title-slide.quarto-title-block.center > .subtitle {
    font-size: 0.7em;
    opacity: 0.85;
    margin-bottom: 10px;
}
#title-slide.quarto-title-block.center > .author {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.45em;
    font-size: 0.82em;
    font-weight: 600;
    margin-bottom: 14px;
}
/* "Candidate" label sits to the left of the name; size matched to the
   other role labels (~0.42em of the section root) */
#title-slide .author .role-label {
    font-size: 0.5em;
    margin-bottom: 0;
}

/* Tutors / Reviewers in two columns, Committee spanning the full width below */
#title-slide.quarto-title-block.center > .title-roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 12px;
    margin-bottom: 12px;
}
#title-slide .role-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#title-slide .role-committee {
    grid-column: 1 / -1;   /* full width, below the two columns */
}
#title-slide .role-label {
    font-family: 'Arial', sans-serif;
    font-size: 0.42em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 3px;
}
#title-slide .role-names {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
#title-slide .role-name {
    font-family: 'Arial', sans-serif;   /* narrower than the serif body, keeps long names on one line */
    font-size: 0.55em;
    line-height: 1.2;
}
/* Committee names sit on one wrapping row, separated by dots */
#title-slide .role-committee .role-names {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.6em;
    row-gap: 1px;
}
#title-slide .role-committee .role-name:not(:first-child)::before {
    content: "·";
    margin-right: 0.6em;
    opacity: 0.55;
}

#title-slide.quarto-title-block.center > .date {
    font-size: 0.6em;
    opacity: 0.85;
    margin-top: 6px;
}

/* ===================================================================== */
/* Outline slide: the two-axis "structure of the thesis" diagram.        */
/* Built from absolutely-positioned divs (px coords in a 1025x515 canvas) */
/* so reveal.js auto-animate can morph it between slides via data-id.     */
/* Part colours: I = blue #0f4a7c, II = orange #d9730d, III = gold #c8a100 */

.outline-diagram {
    position: relative;
    width: 1025px;
    height: 515px;
    margin: 0 auto;
    color: #222;
}

/* --- chapter boxes --- */
.outline-diagram .od-box {
    position: absolute;
    width: 88px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    box-sizing: border-box;
    z-index: 3;
}
.outline-diagram .od-box .od-ch {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.75;
}
.outline-diagram .od-box.part1 { border-color: #0f4a7c; background: #ecf1f5; }
.outline-diagram .od-box.part2 { border-color: #d9730d; background: #fcf4ec; }
.outline-diagram .od-box.part3 { border-color: #c8a100; background: #fbf8eb; }

/* --- background Part regions --- */
.outline-diagram .od-region {
    position: absolute;
    border-radius: 10px;
    z-index: 0;
}
.outline-diagram .od-region.part1 { background: rgba(15, 74, 124, 0.08); }
.outline-diagram .od-region.part2 { background: rgba(217, 115, 13, 0.08); }
.outline-diagram .od-region.part3 { background: rgba(200, 161, 0, 0.08); }

/* --- axes, arrowheads, ticks --- */
.outline-diagram .od-axis {
    position: absolute;
    background: #222;
    z-index: 1;
}
.outline-diagram .od-axis-h { height: 3px; }
.outline-diagram .od-axis-v { width: 3px; }
.outline-diagram .od-arrow-r::after {
    content: "";
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 11px solid #222;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.outline-diagram .od-arrow-d::after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 11px solid #222;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
.outline-diagram .od-tick {
    position: absolute;
    background: #222;
    z-index: 1;
}
.outline-diagram .od-tick-h { width: 2px; height: 9px; }   /* on horizontal x-axes */
.outline-diagram .od-tick-v { width: 9px; height: 2px; }   /* on vertical y-axis   */

/* --- text labels --- */
.outline-diagram .od-label {
    position: absolute;
    font-size: 13px;
    line-height: 1.1;
    text-align: center;
}
.outline-diagram .od-rowlabel {
    position: absolute;
    left: 0;
    width: 302px;
    font-size: 13px;
    line-height: 1.1;
    text-align: right;
}
.outline-diagram .od-axislabel {
    position: absolute;
    font-size: 15px;
    font-weight: 700;
}
.outline-diagram .od-partlabel {
    position: absolute;
    font-size: 14px;
    font-weight: 700;
    z-index: 4;
}
.outline-diagram .od-partlabel.part1 { color: #0f4a7c; }
.outline-diagram .od-partlabel.part2 { color: #d9730d; }
.outline-diagram .od-partlabel.part3 { color: #c8a100; }

/* --- reversed "flow" overview: Introduction -> ... -> Conclusion ----- */
/* Main sections run horizontally (solid pills) connected by flow arrows; */
/* subchapters stack vertically inside each section's shaded region.      */
/* part0 = neutral (Introduction / Conclusion bookends).                  */

.outline-diagram .od-section {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    z-index: 4;
}
.outline-diagram .od-section.part0 { background: #5f6b76; }
.outline-diagram .od-section.part1 { background: #0f4a7c; }
.outline-diagram .od-section.part2 { background: #d9730d; }
.outline-diagram .od-section.part3 { background: #c8a100; }

.outline-diagram .od-region.part0 { background: rgba(95, 107, 118, 0.10); }
.outline-diagram .od-box.part0 { border-color: #5f6b76; background: #eef0f2; }

/* "How to compute (Methods)" section — purple */
.outline-diagram .od-section.part4 { background: #8b03c3; }
.outline-diagram .od-region.part4 { background: rgba(139, 3, 195, 0.08); }
.outline-diagram .od-box.part4 { border-color: #8b03c3; background: #f6eafb; }
.outline-diagram .od-partlabel.part4 { color: #8b03c3; }

.outline-diagram .od-box.od-tbd { border-style: dashed; opacity: 0.7; }
.outline-diagram .od-box .od-sub {
    font-size: 8.5px;
    font-weight: 400;
    line-height: 1.05;
    opacity: 0.8;
    margin-top: 2px;
}

.outline-diagram .od-flow {
    position: absolute;
    height: 3px;
    background: #8a939c;
    z-index: 5;
}
.outline-diagram .od-flow::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid #8a939c;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* ===================================================================== */
/* Link/bridge slides: the slim recurring roadmap strip that closes one  */
/* HQP subchapter and points at the next (SBIP -> KIC -> MRPC).          */
/* Reuses .od-box / .od-section visuals but re-flows them into a row.     */
.outline-diagram.link-roadmap {
    position: static;
    display: flex;
    gap: 0.5em;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 1.4em auto 0;
    color: #222;
}
.link-roadmap .od-box {
    position: relative;   /* base .od-box is absolute; re-flow it inside the strip */
    width: 104px;
    height: 48px;
}
.link-roadmap .od-box.od-done { opacity: 0.5; }
.link-roadmap .od-box.od-done::after {
    content: "✓";
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #2e7d32;
    border-radius: 50%;
}
.link-roadmap .od-box.od-next {
    background: #0f4a7c;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(15, 74, 124, 0.25);
}
.link-roadmap .od-section {
    position: relative;   /* base .od-section is absolute; re-flow it too */
    width: auto;
    height: 48px;
    padding: 0 16px;
}
.link-roadmap .od-linkarrow {
    color: #8a939c;
    font-weight: 700;
    font-size: 1.3em;
    line-height: 1;
}

/* Blur fragment: the element stays visible from the start but blurs when its
   fragment step fires. Used on the KIC "Control Architecture" system-ID image
   so it blurs at the same time the "Are you sure?" overlay appears.
   (`.fragment`'s default rule hides the element, so re-assert opacity here.) */
.reveal .slides section .fragment.blur {
    opacity: 1;
    visibility: inherit;
    transition: filter 0.3s ease;
}
.reveal .slides section .fragment.blur.visible {
    filter: blur(5px);
}

/* Bold fragment: the element stays visible from the start (normal weight) and
   turns bold when its fragment step fires — used to emphasise a key takeaway
   after it has already appeared. (`.fragment`'s default rule hides the element,
   so re-assert opacity here.) */
.reveal .slides section .fragment.make-bold {
    opacity: 1;
    visibility: inherit;
    font-weight: normal;
    transition: font-weight 0.3s ease;
}
.reveal .slides section .fragment.make-bold.visible {
    font-weight: bold;
}

/* ===================================================================== */
/* "People" slide: all collaborators as circular avatars, supervisors    */
/* (Lucia Pallottino, Manolo Garabini) enlarged. Sized to fit one slide. */
section#people h2 {
    margin-bottom: 0.35em;
}
section#people .people-supervisors,
section#people .people-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}
section#people .people-supervisors {
    gap: 0.3em 1.6em;
    margin: 0 auto 0.25em;
}
section#people .people-grid {
    gap: 0.18em 0.32em;
    margin: 0 auto;
    max-width: 100%;
}
section#people figure.person {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
section#people figure.person img {
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    display: block;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    margin: 0;
}
/* Regular collaborators */
section#people .people-grid figure.person {
    width: 2.3em;
}
section#people .people-grid figure.person img {
    width: 1.95em;
    height: 1.95em;
}
section#people .people-grid figcaption {
    font-size: 0.3em;
    line-height: 1.05;
    margin-top: 0.15em;
    color: #333;
}
/* Supervisors: larger */
section#people .people-supervisors figure.person img {
    width: 3.7em;
    height: 3.7em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 3px solid #0f4a7c;
}
section#people .people-supervisors figcaption {
    font-size: 0.42em;
    font-weight: 600;
    line-height: 1.15;
    margin-top: 0.25em;
    color: #0f4a7c;
}

/* DSTO "Results — Learned Non-Uniform Grids": a 4+2 grid of six square plots  */
/* with top captions, plus a one-line takeaway, must all fit on one slide.     */
/* The Quarto defaults waste a lot of vertical space here — each .quarto-figure */
/* carries a 1em bottom margin, the inline <img> adds 12px top/bottom margins   */
/* and sits in a full line-height line-box, and the layout panel adds another   */
/* 1em below. We reclaim all of that, shrink the captions and the takeaway,     */
/* and only then trim the images (~10%) so the grid fits at close to full size. */
section#results-learned-non-uniform-grids h2 { margin-bottom: 0.1em; }
section#results-learned-non-uniform-grids .quarto-layout-panel { margin-bottom: 0.1em; }
section#results-learned-non-uniform-grids .quarto-figure { margin-bottom: 0.12em; }
section#results-learned-non-uniform-grids figure {
    margin-top: 0.05em;
    margin-bottom: 0;
}
section#results-learned-non-uniform-grids figcaption {
    font-size: 0.5em;
    line-height: 1.1;
    margin: 0 0 0.04em;
}
section#results-learned-non-uniform-grids .quarto-figure img {
    display: block;
    margin: 1px auto;
    width: 81% !important;   /* authored at 90%; ~10% smaller to clear the footer */
    max-width: 100%;
    height: auto;
}
section#results-learned-non-uniform-grids > p {
    font-size: 0.58em;
    line-height: 1.2;
    margin: 0.1em 0 0;
}

/* ===================================================================== */
/* Per-part accent theming (parametric).                                 */
/*                                                                       */
/* Each themed section carries a .part-* class on its # and ## headings  */
/* (in the .qmd). The class defines two custom properties:               */
/*   --accent    : colour of the ## slide title and the nav arrows       */
/*   --watermark : the colour-baked faint corner logo (a background layer)*/
/* The generic rules below consume them, so adding a part costs one class */
/* + one mapping line here + one baked SVG in img/theme/.                */
/*                                                                       */
/* Dividers (#) get the accent as their slide background via the heading's */
/* background-color="…" attribute (set in the .qmd), not here.           */
/*                                                                       */
/* Why a baked SVG and not a recolourable CSS mask: an external SVG used  */
/* as a CSS mask is blocked over file:// in Chromium/Brave, so the colour */
/* is baked into the asset (same mechanism as the theme's own watermark). */

.part-intro { --accent: #5f6b76; --watermark: url("img/theme/unipi_gray_a0.05.svg"); }
.part-time  { --accent: #d9730d; --watermark: url("img/theme/unipi_orange_a0.05.svg"); }
.part-concl { --accent: #c8a100; --watermark: url("img/theme/unipi_gold_a0.05.svg"); }
/* DSTO: same orange accent as the rest of the time part, but the TU Delft
   classic logo as the watermark (overrides --watermark only). */
.dsto       { --watermark: url("img/theme/tud_classic_orange_a0.05.svg"); }

/* ## content-slide titles */
.reveal .slides section[class*="part-"] h2 {
    color: var(--accent);
}

/* Navigation (section-change) arrows — accent-coloured while a themed      */
/* content slide is showing. Excludes dividers (their background is the     */
/* accent colour, where accent-coloured arrows would vanish). The sibling   */
/* controls can't read the section's --accent, so it is re-mapped onto      */
/* .reveal per class here.                                                  */
.reveal:has(section.present.part-intro:not([data-background-color])) { --nav-accent: #5f6b76; }
.reveal:has(section.present.part-time:not([data-background-color]))  { --nav-accent: #d9730d; }
.reveal:has(section.present.part-concl:not([data-background-color])) { --nav-accent: #c8a100; }
.reveal:has(section.present[class*="part-"]:not([data-background-color])) .controls,
.reveal:has(section.present[class*="part-"]:not([data-background-color])) .controls button {
    color: var(--nav-accent) !important;
}

/* Faint corner watermark on content (level2) slides: swap the theme's blue  */
/* unipi logo for the part's colour-baked variant. No !important, so a slide */
/* with its own background image/video (reveal sets those inline, which wins) */
/* keeps it — only plain content slides pick up the watermark.               */
.reveal .slide-background.level2[class*="part-"]:not(.logo-over):not(.section-divider):not(.section-map) {
    background-image:
        url("_extensions/ddebenedittis/unipi/img/unipi_text.webp"),
        url("_extensions/ddebenedittis/unipi/img/cp_text.png"),
        url("img/theme/dii_horizontal.png"),
        var(--watermark);
    background-size: auto 35px, auto 35px, auto 35px, auto 80%;
    background-position: 99.5% 1%, 0.5% 1%, 0.5% 99%, bottom -40% right -20%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* DSTO section (differentiable sampling-time optimization) was carried out at */
/* TU Delft, so on its content slides the top-right university mark becomes TU */
/* Delft instead of UniPi (Piaggio + DII corners unchanged). Same class-count  */
/* specificity as the generic rule above, so it must stay AFTER it to win.     */
.reveal .slide-background.level2.dsto:not(.logo-over):not(.section-divider):not(.section-map) {
    background-image:
        url("img/theme/tud_horizontal.png"),
        url("_extensions/ddebenedittis/unipi/img/cp_text.png"),
        url("img/theme/dii_horizontal.png"),
        var(--watermark);
    background-size: auto 35px, auto 35px, auto 35px, auto 80%;
    background-position: 99.5% 1%, 0.5% 1%, 0.5% 99%, bottom -40% right -20%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* DSTO section divider (level1, dark accent): TU Delft work, so the top-right */
/* mark is the white TU Delft wordmark (replacing UniPi); Piaggio (TL) + DII   */
/* (BL) in white; 0.2-alpha TU Delft classic watermark instead of the unipi   */
/* one (derived variant, mirroring the theme's unipi_white_a0.2.svg).         */
.reveal .slide-background.level1.dsto {
    background-image:
        url("img/theme/tud_text_white.png"),
        url("_extensions/ddebenedittis/unipi/img/cp_text_white.png"),
        url("img/theme/dii_horizontal_white.png"),
        url("img/theme/tud_classic_white_a0.2.svg") !important;
    background-size: auto 35px, auto 35px, auto 35px, auto 80% !important;
    background-position: 99.5% 1%, 0.5% 1%, 0.5% 99%, bottom -40% right -20% !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
}

/* Video-figure slides (manim STO build): the opaque video overlaps the large
   faint unipi watermark, so drop that watermark on these slides (keeping the
   corner logos). Reveal.js copies each section's classes onto its background. */
.reveal .slide-background.logo-over {
    background-image:
        url("_extensions/ddebenedittis/unipi/img/unipi_text.webp"),
        url("_extensions/ddebenedittis/unipi/img/cp_text.png"),
        url("img/theme/dii_horizontal.png") !important;
    background-size: auto 35px, auto 35px, auto 35px !important;
    background-position: 99.5% 1%, 0.5% 1%, 0.5% 99% !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
}

/* ===================================================================== */
/* Persistent top navigation bar (the collapsed outline "you are here").  */
/*                                                                       */
/* Built once by JS (see the include-after-body script in phd.qmd) and    */
/* appended to .reveal, OUTSIDE .slides, so it lives in viewport space and */
/* is not re-rendered per slide. The script toggles .show (content slides */
/* only) and .active on the current section's pill.                       */

.deck-nav {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 8px;
    font-family: inherit;
    opacity: 0;
    pointer-events: none;                 /* purely indicative, not clickable */
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.deck-nav.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.deck-nav .dn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: #9aa3ac;
    background: #eef0f2;
    border: 1px solid #d6dade;
    transition: color 0.3s ease, background 0.3s ease,
                border-color 0.3s ease, box-shadow 0.3s ease;
}
/* the flow arrows between pills */
.deck-nav .dn-arrow {
    width: 16px;
    height: 2px;
    margin: 0 2px;
    background: #cdd2d7;
    position: relative;
}
.deck-nav .dn-arrow::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid #cdd2d7;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

/* Active pill: filled with its section colour, white text, subtle lift.   */
.deck-nav .dn-box.active {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}
.deck-nav .dn-box.active[data-i="0"] { background: #5f6b76; }  /* Introduction */
.deck-nav .dn-box.active[data-i="1"] { background: #d9730d; }  /* Time Optim.  */
.deck-nav .dn-box.active[data-i="2"] { background: #0f4a7c; }  /* HQP          */
.deck-nav .dn-box.active[data-i="3"] { background: #c8a100; }  /* Conclusion   */

/* ===================================================================== */
/* Section-map + zoom divider.                                            */
/*                                                                       */
/* Each section boundary is two auto-animate slides:                      */
/*   .section-map     — the 4-pill bar (reuses .outline-diagram styling)   */
/*   the divider      — full-bleed accent slide (like the theme's level-1  */
/*                      # dividers) whose title text morphs from the pill. */
/* Two things animate on entry: the accent colour FADES in over the whole  */
/* viewport (via .present, below), and the current section's pill morphs   */
/* (grows/moves) into the title text. Both reverse on the way back.        */

/* Full-bleed accent, faded in. The colour lives on .slide-background (the  */
/* only element that reaches the viewport edges — slide CONTENT is scaled   */
/* inside reveal's margin, so it can't). It starts white and transitions to */
/* the section accent when the slide becomes .present, so the colour washes */
/* in forward and out backward. White logos + seal ride on top (invisible   */
/* on white, appearing as the accent arrives) at the true viewport corners. */
.reveal .slide-background.section-divider {
    background-color: #fff;
    background-image:
        url("_extensions/ddebenedittis/unipi/img/unipi_text_white.webp"),
        url("_extensions/ddebenedittis/unipi/img/cp_text_white.png"),
        url("img/theme/dii_horizontal_white.png"),
        url("_extensions/ddebenedittis/unipi/img/unipi_white_a0.2.svg") !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-size: auto 35px, auto 35px, auto 35px, auto 80% !important;
    background-position: 99.5% 1%, 0.5% 1%, 0.5% 99%, bottom -40% right -20% !important;
}
/* A keyframe animation (not a transition) so the wash fires reliably every   */
/* time the slide becomes .present, regardless of paint timing.               */
@keyframes divider-wash-time  { from { background-color: #fff; } to { background-color: #d9730d; } }
@keyframes divider-wash-hqp   { from { background-color: #fff; } to { background-color: #0f4a7c; } }
@keyframes divider-wash-concl { from { background-color: #fff; } to { background-color: #c8a100; } }
.reveal .slide-background.section-divider.part-time.present {
    background-color: #d9730d; animation: divider-wash-time 0.6s ease;
}
.reveal .slide-background.section-divider.part-hqp.present {
    background-color: #0f4a7c; animation: divider-wash-hqp 0.6s ease;
}
.reveal .slide-background.section-divider.part-concl.present {
    background-color: #c8a100; animation: divider-wash-concl 0.6s ease;
}
/* In the ESC overview only the current slide is .present, so the accent      */
/* (applied above via .present) would be missing on the other dividers —      */
/* white text on white = blank. Force the accent for every divider here so    */
/* all chapter-intro slides read correctly in the overview grid.              */
.reveal.overview .slide-background.section-divider.part-time  { background-color: #d9730d; }
.reveal.overview .slide-background.section-divider.part-hqp   { background-color: #0f4a7c; }
.reveal.overview .slide-background.section-divider.part-concl { background-color: #c8a100; }

/* The map slides are level-1 headings (so each section is its own chapter    */
/* column), which the theme would paint with the blue #0f4a7c divider bg.     */
/* Keep them WHITE (the neutral "you are here" bar reads on white) with the    */
/* normal dark corner logos + faint seal, as they had when they were level-2. */
.reveal .slide-background.section-map {
    background-color: #fff !important;
    background-image:
        url("_extensions/ddebenedittis/unipi/img/unipi_text.webp"),
        url("_extensions/ddebenedittis/unipi/img/cp_text.png"),
        url("img/theme/dii_horizontal.png"),
        url("_extensions/ddebenedittis/unipi/img/unipi_a0.05.svg") !important;
    background-size: auto 35px, auto 35px, auto 35px, auto 80% !important;
    background-position: 99.5% 1%, 0.5% 1%, 0.5% 99%, bottom -40% right -20% !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
}

/* The title lives where the theme's level-1 # titles sit: left-aligned,     */
/* vertically centred. It is transparent text (the accent is the slide bg);  */
/* the pill morphs into it. Vertical centring is done by the flex parent (no */
/* transform on the morphed element, so auto-animate stays clean).           */
.section-divider .outline-diagram {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 6%;
}
.section-divider .od-section.od-title {
    position: relative;
    width: auto !important;
    height: auto !important;
    max-width: 62%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 2.5em !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: 4;
}
/* Title text = 1em, tracks the box's tweening font-size as the pill grows.  */
.section-divider .od-titletext {
    display: block;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.05;
    text-align: left;
    color: #fff;
}
/* Subtitle: much smaller, italic, just under the title (fades in — it has   */
/* no counterpart on the map bar).                                           */
.section-divider .od-subtitle {
    display: block;
    font-size: 0.32em;
    font-style: italic;
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.6em;
}
/* The map/divider slides carry no heading text (the title lives in the      */
/* zoomed box); hide the empty heading Pandoc still emits so it takes no      */
/* vertical space and the diagram sits at the top of the stage.              */
.section-map > h1:empty,  .section-map > h2:empty,
.section-divider > h1:empty, .section-divider > h2:empty { display: none; }

/* Divider slides are level-2 (so they can auto-animate from the map), but    */
/* should wear the theme's LEVEL-1 divider chrome: white corner logos + faint */
/* white seal, readable on any accent colour. Mirrors unipi.scss's .level1    */
/* rule; the accent background-color stays as set inline per divider.         */
.reveal .slide-background.section-divider {
    background-image:
        url("_extensions/ddebenedittis/unipi/img/unipi_text_white.webp"),
        url("_extensions/ddebenedittis/unipi/img/cp_text_white.png"),
        url("img/theme/dii_horizontal_white.png"),
        url("_extensions/ddebenedittis/unipi/img/unipi_white_a0.2.svg") !important;
    background-size: auto 35px, auto 35px, auto 35px, auto 80% !important;
    background-position: 99.5% 1%, 0.5% 1%, 0.5% 99%, bottom -40% right -20% !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
}

/* ===================================================================== */
/* GitHub Pages theme fix: the unipi.scss theme paints the level-1 and    */
/* level-2 corner logos + watermark with url("../../../../../…") paths     */
/* tuned for the standalone build (deck at repo root). In the website      */
/* layout the compiled theme CSS sits in the shared, site-root site_libs/, */
/* so those relative paths overshoot the site root and 404 — the logos     */
/* vanish on every plain slide (e.g. the HQP content slides that carry no  */
/* .part-* class). styles.css is loaded relative to this deck's folder, so */
/* re-declare the same two base rules here with deck-relative paths. No     */
/* !important and only base specificity, so every more-specific override    */
/* above (part-*, dsto, logo-over, section-divider, section-map) still wins.*/
.reveal .slide-background.slide.level1 {
    background-image:
        url("_extensions/ddebenedittis/unipi/img/unipi_text_white.webp"),
        url("_extensions/ddebenedittis/unipi/img/cp_text_white.png"),
        url("img/theme/dii_horizontal_white.png"),
        url("_extensions/ddebenedittis/unipi/img/unipi_white_a0.2.svg");
    background-size: auto 35px, auto 35px, auto 35px, auto 80%;
    background-position: 99.5% 1%, 0.5% 1%, 0.5% 99%, bottom -40% right -20%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
.reveal .slide-background.slide.level2 {
    background-image:
        url("_extensions/ddebenedittis/unipi/img/unipi_text.webp"),
        url("_extensions/ddebenedittis/unipi/img/cp_text.png"),
        url("img/theme/dii_horizontal.png"),
        url("_extensions/ddebenedittis/unipi/img/unipi_a0.05.svg");
    background-size: auto 35px, auto 35px, auto 35px, auto 80%;
    background-position: 99.5% 1%, 0.5% 1%, 0.5% 99%, bottom -40% right -20%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* ===================================================================== */
/* Automatic white footer on non-white-background slides.                */
/*                                                                       */
/* The footer's default colour is the theme's dark body text, illegible  */
/* over a dark or busy background. reveal.js only computes its            */
/* has-dark-background luminance class from data-background-COLOR, so it  */
/* never flags video/image backgrounds — which is why those slides used  */
/* to hand-set style="color:#fff". A small script in phd.qmd's           */
/* include-after-body instead tags the footer with .footer-on-dark on    */
/* every slidechanged, keyed off the current section's static attributes */
/* (data-background-video / -image, or the has-dark-background class for  */
/* dark solid colours). This rule is the single thing that acts on it.   */
/* Keying off attributes (not the runtime .slide-background DOM) is why   */
/* it is reliable; see the script for the detection logic.               */
.reveal .footer.footer-on-dark,
.reveal .footer.footer-on-dark a {
    color: #fff !important;
}

/* ===================================================================== */
/* Backup-mode badge. Backup slides (.backup) are detached on load and    */
/* re-inserted when the presenter presses H (see phd.qmd), which toggles  */
/* .backups-shown on .reveal. This surfaces a small fixed badge so the    */
/* presenter always sees, at a glance, that the deck is running with the  */
/* extra slides switched in — independent of which slide is on screen.    */
.reveal.backups-shown::after {
    content: "⧉ Backup slides on";
    position: fixed;
    left: 12px;
    bottom: 12px;
    background: #0f4a7c;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 60;
    pointer-events: none;
}