/* =============================================================================================
   autonomousrobots.nl — site styles
   1. Tokens          5. Header and footer    9. People          13. Content compatibility
   2. Fonts           6. Buttons and tags     10. Paper pages        (Bootstrap classes used
   3. Base            7. Tiles                11. Components          in content files)
   4. Layout          8. Publications         12. Utilities
   ============================================================================================= */

/* 1. Tokens ---------------------------------------------------------------------------------- */
:root {
  --accent: #d107a9;          /* AMR magenta, from the logo */
  --accent-dark: #9e0580;
  --accent-hover: #9e0580;    /* background of a hovered magenta button */
  --accent-text: #d107a9;     /* magenta used as text */
  --link: #b80694;            /* text links: the magenta, deep enough for 4.5:1 contrast on every background */
  --accent-tint: #fbe8f6;
  --accent-line: #efb3e1;
  --ink: #1e1b22;
  --text: #2b2830;
  --muted: #5e5966;
  --nav-text: #4a4650;
  --bg: #fff;
  --surface: #f7f5f8;
  --card: #fff;
  --figure-bg: #fff;          /* behind figures, which often have transparent backgrounds */
  --border: #e6e1e8;
  --input-border: #d6d0da;
  --hover: rgb(0 0 0 / 0.045);
  --rule: #000;               /* the thick line under the header and above the footer */
  --dark: #1e1b22;            /* dark buttons */
  --dark-hover: #000;
  --on-dark: #fff;
  --shadow: 0 1px 2px rgb(30 27 34 / 0.06), 0 4px 14px rgb(30 27 34 / 0.05);
  color-scheme: light;
  --radius: 10px;
  --radius-sm: 6px;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Montserrat', var(--font);
  --container: 1120px;
  --gutter: 1rem;
}

/* Dark theme: only when the visitor switches it on (the choice is remembered; see site.js). */
:root[data-theme='dark'] {
  --accent-dark: #f39ddf;
  --accent-text: #f27fd9;
  --link: #f27fd9;
  --accent-tint: #3a1532;
  --accent-line: #7a2f69;
  --ink: #f3f0f6;
  --text: #dcd7e1;
  --muted: #a9a3b1;
  --nav-text: #c9c4cf;
  --bg: #141217;
  --surface: #1d1a22;
  --card: #1b1920;
  --figure-bg: #f4f2f6;
  --border: #343039;
  --input-border: #4a4552;
  --hover: rgb(255 255 255 / 0.07);
  --rule: #e9e5ee;
  --dark: #f3f0f6;
  --dark-hover: #fff;
  --on-dark: #141217;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.3);
  color-scheme: dark;
}

/* Areas written by authors (paper websites and MSc pages) stay light in the dark theme: their
   figures often have transparent backgrounds and several pages bring their own colours. */
.keep-light {
  --accent: #d107a9;          /* AMR magenta, from the logo */
  --accent-dark: #9e0580;
  --accent-hover: #9e0580;    /* background of a hovered magenta button */
  --accent-text: #d107a9;     /* magenta used as text */
  --link: #b80694;            /* text links: the magenta, deep enough for 4.5:1 contrast on every background */
  --accent-tint: #fbe8f6;
  --accent-line: #efb3e1;
  --ink: #1e1b22;
  --text: #2b2830;
  --muted: #5e5966;
  --nav-text: #4a4650;
  --bg: #fff;
  --surface: #f7f5f8;
  --card: #fff;
  --figure-bg: #fff;          /* behind figures, which often have transparent backgrounds */
  --border: #e6e1e8;
  --input-border: #d6d0da;
  --hover: rgb(0 0 0 / 0.045);
  --rule: #000;               /* the thick line under the header and above the footer */
  --dark: #1e1b22;            /* dark buttons */
  --dark-hover: #000;
  --on-dark: #fff;
  --shadow: 0 1px 2px rgb(30 27 34 / 0.06), 0 4px 14px rgb(30 27 34 / 0.05);
  color-scheme: light;
}
:root[data-theme='dark'] .keep-light {
  padding: 1.5rem clamp(1rem, 3vw, 2rem);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

/* 2. Fonts (self-hosted, latin subset) -------------------------------------------------------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/poppins-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2'); }

/* 3. Base ------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5rem; color: var(--ink); line-height: 1.2; text-wrap: balance; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.01em; }
h4, h5, h6 { font-weight: 600; }
h1 { font-size: clamp(1.8rem, 1.45rem + 1.5vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem); margin-top: 2.25rem; }
h3 { font-size: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem); margin-top: 1.5rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 1rem; }
p, ul, ol, dl, pre, table, figure { margin: 0 0 1rem; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-dark); text-decoration-thickness: 2px; }
img, svg, video, canvas, iframe { vertical-align: middle; }
img, video { max-width: 100%; }
/* An image keeps its proportions when it shrinks, except when it only sets a height (e.g. a row of
   funding logos with height="60"): then that height is kept, as on the old site.
   :where() keeps this rule as weak as a plain `img` rule, so sizes set by classes (logos, photos) win. */
:where(img:not([height]), img[width][height]) { height: auto; }
hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--border); }
small, .small { font-size: 0.875em; }
sup, sub { font-size: 0.75em; line-height: 0; }
code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; }
pre { overflow: auto; padding: 1rem; background: var(--surface); border-radius: var(--radius-sm); }
table { border-collapse: collapse; }
th { text-align: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { color: #fff; background: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* 4. Layout ---------------------------------------------------------------------------------- */
.container, .container-xl { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-fluid { width: 100%; padding-inline: var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 1.5rem; } }
.site-main { flex: 1 0 auto; padding-block: 1.5rem 3rem; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 10; padding: 0.5rem 1rem; background: var(--dark); color: #fff; }
.skip-link:focus { left: 0.5rem; top: 0.5rem; }
.page-header { margin-bottom: 1.75rem; }
.page-title { margin: 0.25rem 0 0; }
.page-subtitle { font-size: 1.15rem; color: var(--muted); margin: 0.35rem 0 0; }
.section-title { margin-top: 2.5rem; }

/* 5. Header and footer ----------------------------------------------------------------------- */
.site-header { background: var(--surface); border-bottom: 2px solid var(--rule); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; min-height: 4.25rem; padding-block: 0.6rem; }
.nav-brand { display: inline-flex; margin-right: auto; }
.nav-brand img { height: 40px; width: auto; }
.nav-menu { display: flex; flex: 1; align-items: center; gap: 1rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: 0.15rem; margin: 0 auto 0 0; padding: 0; list-style: none; }
.nav-link {
  position: relative; display: block; padding: 0.5rem 0.65rem; border-radius: var(--radius-sm);
  color: var(--nav-text); text-decoration: none; cursor: pointer; font-weight: 500; font-size: 0.95rem;
}
.nav-link:hover { color: var(--ink); background: var(--hover); text-decoration: none; }
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after { content: ''; position: absolute; left: 0.65rem; right: 0.65rem; bottom: 0.15rem; height: 2px; border-radius: 2px; background: var(--accent); }
.nav-dropdown { position: relative; }
.nav-dropdown summary { list-style: none; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after { content: ''; display: inline-block; margin-left: 0.4em; vertical-align: 0.2em; border: 0.28em solid transparent; border-top-color: currentColor; border-bottom: 0; }
.nav-dropdown summary.is-active::after { position: static; height: auto; background: none; border-radius: 0; }
.nav-dropdown ul { margin: 0; padding: 0.35rem; list-style: none; }
.nav-partner img { height: 38px; width: auto; transform: translateY(-3px); }
.nav-toggle { display: none; }

/* The header switches to the folding menu below 1120 px (the full menu needs about that much), so tablets get one row too. */
@media (min-width: 1120px) {
  .nav-dropdown ul {
    position: absolute; z-index: 20; top: calc(100% + 0.35rem); left: 0; min-width: 11rem;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgb(30 27 34 / 0.12);
  }
}
@media (max-width: 1119.98px) {
  .nav { gap: 0.5rem; }
  .nav-menu { flex-basis: 100%; flex-direction: column; align-items: stretch; padding-top: 0.5rem; border-top: 1px solid var(--border); }
  .nav-links { flex-direction: column; margin: 0; }
  .nav-link.is-active::after { left: 0; right: auto; top: 0.5rem; bottom: 0.5rem; width: 3px; height: auto; }
  .nav-dropdown ul { padding-left: 1rem; }
  .nav-partner { align-self: flex-start; padding: 0.5rem 0.65rem; }
  /* With JavaScript the menu folds behind a button; without it, the menu stays open. */
  .js .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 2.75rem; height: 2.5rem; padding: 0 0.65rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  }
  .js .nav-toggle span { display: block; width: 100%; height: 2px; background: var(--ink); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; }
  .js .nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .js .nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
  .js .nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .js .nav-menu:not(.is-open) { display: none; }
}

.site-footer { margin-top: auto; background: var(--surface); border-top: 2px solid var(--rule); font-size: 0.92rem; }
.footer-grid { display: grid; gap: 2rem; padding-block: 2.25rem 1.75rem; }
.footer-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.footer-logos img { height: 34px; width: auto; }
.footer-lab p { max-width: 22rem; margin: 1.25rem 0 0; color: var(--muted); line-height: 1.55; }
.footer-links h2 { margin: 0 0 0.6rem; font-size: 0.95rem; }
.footer-links ul { margin: 0; padding: 0; list-style: none; }
.footer-links li { padding: 0.18rem 0; }
.footer-links a, .footer-lab > a { color: var(--text); text-decoration: none; }
.footer-lab p a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-line); }
.footer-links a:hover, .footer-lab p a:hover { color: var(--link); text-decoration: underline; }
.footer-links .bi { display: inline-block; width: 1.25em; color: var(--muted); }
.footer-links a:hover .bi { color: var(--accent); }
.footer-links nav ul, nav.footer-links ul { columns: 2; column-gap: 1.5rem; }
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.9rem; }
.footer-bottom p { margin: 0; color: var(--muted); font-size: 0.85rem; }
.footer-bottom a { color: var(--muted); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* 6. Buttons and tags ------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  padding: 0.5rem 1.15rem; border: 1px solid transparent; border-radius: 999px;
  font-size: 0.95rem; font-weight: 500; line-height: 1.35; text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { text-decoration: none; }
.btn-sm { padding: 0.2rem 0.65rem; font-size: 0.82rem; font-weight: 400; border-radius: var(--radius-sm); white-space: nowrap; }
.btn-lg { padding: 0.65rem 1.5rem; font-size: 1.05rem; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-dark { background: var(--dark); color: var(--on-dark); }
.btn-dark:hover { background: var(--dark-hover); color: var(--on-dark); }
.btn-light { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-light:hover, .btn-light[aria-expanded='true'] { background: var(--accent-tint); border-color: var(--accent-line); color: var(--ink); }
.btn-outline, .btn-outline-primary { border-color: var(--accent); color: var(--accent-text); background: var(--card); }
.btn-outline:hover, .btn-outline.is-active, .btn-outline-primary:hover { background: var(--accent); color: #fff; }
.btn-outline-dark { border-color: var(--dark); color: var(--dark); background: var(--card); }
.btn-outline-dark:hover { background: var(--dark); color: var(--on-dark); }
.btn.is-disabled { opacity: 0.55; cursor: default; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.button-row-center { justify-content: center; }
.btn .bi { font-size: 0.95em; }
.bi-chevron-right, .bi-chevron-down { display: inline-block; transition: transform 0.2s; }
[aria-expanded='true'] > .bi-chevron-right, [open] > summary .bi-chevron-right { transform: rotate(90deg); }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.tags a {
  display: inline-block; padding: 0.3rem 0.8rem; border: 1px solid var(--accent-line); border-radius: 999px;
  background: var(--card); color: var(--accent-dark); font-size: 0.9rem; text-decoration: none;
}
.tags a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 7. Tiles (projects, robots, theses) -------------------------------------------------------- */
.tile-list { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
.tile {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow);
}
.tile-figure { display: grid; place-items: center; aspect-ratio: 4 / 3; max-height: 260px; padding: 1rem; background: var(--surface); }
.tile-media { width: 100%; height: 100%; object-fit: contain; }
.tile-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.25rem 1.25rem; min-width: 0; }
.tile-title { margin: 0; font-size: 1.15rem; }
.tile-title a { color: inherit; text-decoration: none; }
.tile-meta { margin: 0; color: var(--muted); font-size: 0.875rem; }
.tile-text { margin: 0.25rem 0 0; }
.tile-text > :last-child { margin-bottom: 0; }
.tile-more { margin-top: auto; padding-top: 0.35rem; color: var(--accent-text); font-weight: 500; font-size: 0.95rem; }
.tile-link { transition: border-color 0.15s, box-shadow 0.15s; }
.tile-link:hover { border-color: var(--accent-line); box-shadow: 0 6px 22px rgb(209 7 169 / 0.12); }
.tile-link:hover .tile-more { color: var(--accent-dark); }
.tile-link:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.tile-link .tile-title a:focus-visible { outline: none; }
/* The title link covers the whole tile. */
.tile-link .tile-title a::after { content: ''; position: absolute; inset: 0; }
.tag-finished { display: inline-block; margin-left: 0.35rem; padding: 0 0.5rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 0.78rem; }
.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) {
  .tile { flex-direction: row; align-items: stretch; }
  .tile-figure { flex: 0 0 300px; aspect-ratio: auto; max-height: none; min-height: 220px; }
}

/* 8. Publications ---------------------------------------------------------------------------- */
.pub-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pub-filters input, .pub-filters select {
  min-height: 2.6rem; padding: 0.45rem 0.8rem; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background-color: var(--card);
}
.pub-filters input:focus, .pub-filters select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.pub-filters input { flex: 1 1 18rem; min-width: 0; }
.pub-filters select { flex: 0 1 auto; max-width: 100%; }
.pub-status { min-height: 1.5rem; margin-bottom: 0.5rem; color: var(--muted); font-size: 0.9rem; }
.pub-status .chip { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.5rem; padding: 0.05rem 0.65rem; border-radius: 999px; background: var(--accent-tint); color: var(--ink); }
.pub-status .chip a { text-decoration: none; font-size: 1.1em; }
.pub-websites { margin-bottom: 1.5rem; }
.pub-year-title { margin: 2rem 0 0.75rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--ink); font-size: 1.5rem; }
.pub { display: flex; gap: 1.25rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.pub:last-child { border-bottom: 0; }
/* A paper opened from a link like /publications/#2025-degroot-ijrr is highlighted. */
.pub:target { margin-inline: -0.75rem; padding-inline: 0.75rem; border-radius: var(--radius-sm); background: var(--accent-tint); scroll-margin-top: 1rem; }
.pub-body { flex: 1 1 auto; min-width: 0; }
.pub-citation { margin-bottom: 0.45rem; line-height: 1.55; }
.pub-number { color: var(--accent-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pub-title { font-weight: 600; color: var(--ink); }
.pub-authors, .pub-venue { color: var(--text); }
.pub-note { color: var(--accent-dark); font-weight: 500; }
.pub-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pub-panel { margin-top: 0.6rem; padding: 0.85rem 1rem; border-left: 3px solid var(--accent-line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); font-size: 0.95rem; }
.pub-bibtex { white-space: pre-wrap; }
.pub-media { flex: 0 0 auto; display: none; }
.pub-media img { height: 85px; width: auto; max-width: 160px; object-fit: contain; border-radius: var(--radius-sm); }
.pub-media video { height: 110px; width: auto; max-width: 200px; object-fit: contain; border-radius: var(--radius-sm); }
@media (min-width: 576px) { .pub-media { display: block; } }
.pub-empty { padding: 1rem; background: var(--surface); border-radius: var(--radius); }
.related { margin-top: 3rem; padding-top: 0.5rem; border-top: 2px solid var(--ink); }
.related h2 { margin-top: 1rem; }
.patents { margin-top: 3rem; }
.patents li { margin-bottom: 0.35rem; }
html:not(.js) .pub-panel[hidden] { display: block !important; }

/* 9. People ---------------------------------------------------------------------------------- */
.people-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
/* Two columns of equal cards: every row is as tall as the tallest card, and the links sit at the bottom. */
@media (min-width: 900px) { .people-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 1.25rem 1.5rem; } }
.person { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.person-photo { flex: 0 0 auto; width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface); }
.person-body { min-width: 0; flex: 1; align-self: stretch; display: flex; flex-direction: column; }
.person-name { margin: 0; font-size: 1.1rem; }
.person-role { margin: 0.1rem 0 0.4rem; color: var(--muted); font-size: 0.85rem; }
.person-bio { font-size: 0.95rem; }
.person-bio > :last-child { margin-bottom: 0.6rem; }
.person-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
@media (min-width: 576px) { .person-photo { width: 120px; height: 120px; } }

.person-lead { display: block; padding: 1.5rem; background: var(--surface); margin-bottom: 1rem; }
.person-lead .person-body { display: block; }
/* The photo starts level with the name and the bio wraps around it. */
.person-lead .person-photo { float: left; width: 120px; height: 150px; margin: 0.3rem 1.25rem 0.75rem 0; border-radius: var(--radius-sm); }
.person-lead .person-name { font-size: 1.4rem; }
.person-lead .person-bio { font-size: 1rem; }
.person-lead .person-links { clear: both; padding-top: 0.25rem; }
@media (min-width: 768px) {
  .person-lead .person-photo { width: 200px; height: 240px; margin-right: 1.75rem; }
  .person-lead .person-links { clear: none; }
}
.panel { margin-top: 0.75rem; padding: 1rem 1.25rem; border-left: 3px solid var(--accent-line); background: var(--card); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.panel > :last-child { margin-bottom: 0; }

.past-people { margin: 0 0 1rem; padding: 0; list-style: none; }
.past-people li { padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.past-name { display: block; color: var(--ink); font-weight: 600; font-size: 1rem; }
.past-years { color: var(--muted); font-weight: 400; }
.past-role { display: block; color: var(--muted); }
.past-now { display: block; }
.past-links { display: inline-flex; flex-wrap: wrap; gap: 0 0.75rem; margin-top: 0.15rem; }

/* 10. Paper and project pages ---------------------------------------------------------------- */
.paper-header { text-align: center; margin: 1rem auto 2.5rem; max-width: 60rem; }
.paper-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin-top: 1rem; }
.paper-authors, .paper-affiliations { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.paper-authors { font-size: 1.15rem; }
.paper-authors span { color: var(--accent); }
.paper-authors a { text-decoration: none; }
.paper-affiliations, .paper-affiliations a { color: var(--muted); text-decoration: none; }
.paper-body h2 { margin-top: 2.75rem; margin-bottom: 0.75rem; }
.paper-body h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; }
.paper-body, .prose { min-width: 0; }
.back-link { display: flex; justify-content: center; margin-top: 3rem; }
.project-intro { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
.project-image { width: 100%; max-width: 520px; height: auto; justify-self: center; object-fit: contain; border-radius: var(--radius); }
.project-info { padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.project-info h2 { margin: 1rem 0 0.35rem; font-size: 1.05rem; }
.project-info h2:first-child { margin-top: 0; }
.project-info ul { margin-bottom: 0.5rem; }
.project-info li { padding: 0.1rem 0; }
@media (min-width: 768px) { .project-intro { grid-template-columns: minmax(0, 520px) 1fr; align-items: start; } }

/* Wide things inside content scroll on their own instead of widening the page. */
.prose table, .paper-body table, .project-content table { display: block; max-width: 100%; overflow-x: auto; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding-block: 0.25rem; }
mjx-container[display='true'] { max-width: 100%; min-width: 0 !important; /* MathJax sets an inline min-width on numbered equations */ overflow-x: auto; overflow-y: hidden; padding-block: 0.25rem; }
mjx-container:not([display='true']) { display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden; vertical-align: middle; }
.paper-body video, .prose video, .project-content video { height: auto; }
.pdf-embed { display: block; width: 100%; height: min(80vh, 1100px); margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius); }

/* 11. Components ----------------------------------------------------------------------------- */
/* Home */
.hero { display: grid; gap: 1.75rem; align-items: center; padding-block: 0 1.5rem; border-bottom: 1px solid var(--border); }
.hero-text p { margin-bottom: 0.6rem; }
@media (min-width: 992px) { .hero-text p { font-size: 0.95rem; line-height: 1.55; } .highlights-text > p { font-size: 0.95rem; } }
.site-main:has(> .container > .hero) { padding-top: 1rem; }
.hero-text p:last-child { margin-bottom: 0; }
.hero-image { width: 100%; height: auto; border-radius: var(--radius); }
.hero-title { margin-top: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
/* One line beside the photo on desktop screens (the text column is about 600 px wide). */
@media (min-width: 992px) { .hero-title { font-size: 1.55rem; } }
@media (min-width: 1200px) { .hero-title { font-size: 1.65rem; } }
.accent { color: var(--accent-text); font-weight: 700; }
@media (min-width: 992px) { .hero { grid-template-columns: 4fr 7fr; gap: 2.25rem; } }
.highlights { display: grid; gap: 1.5rem; align-items: center; padding-block: 1.5rem; border-bottom: 1px solid var(--border); }
.highlights-text > p { margin-bottom: 0.75rem; }
.highlights h2, .news h2 { margin-top: 0; }
/* Research topics flow as one line of links, separated by small magenta squares (the logo's dots).
   Each topic stays whole; the line wraps between topics. */
.area-list { margin: 0 0 0.9rem; padding: 0; list-style: none; line-height: 1.9; }
.area-list li { display: inline; white-space: nowrap; }
.area-list li:not(:last-child)::after {
  content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 0.55rem 0.15em 0.6rem;
  border-radius: 1px; background: var(--accent); vertical-align: middle;
}
@media (min-width: 992px) { .highlights { grid-template-columns: 1fr 1fr; gap: 2.25rem; } }
.news { padding-top: 2rem; }

/* Latest publications strip */
.latest-pubs { padding-block: 1.75rem; border-bottom: 1px solid var(--border); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.section-head h2 { margin: 0; }
.latest-pub-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .latest-pub-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.latest-pub { position: relative; display: flex; flex-direction: column; gap: 0.3rem; }
.latest-thumb { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: contain; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); transition: border-color 0.15s; }
/* Titles take exactly two lines, so the venue lines up under every card. */
.latest-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.35em); color: var(--ink); font-weight: 600; font-size: 0.92rem; line-height: 1.35; text-decoration: none; }
.latest-title::after { content: ''; position: absolute; inset: 0; }
.latest-meta { color: var(--muted); font-size: 0.82rem; }
.latest-pub:hover .latest-thumb { border-color: var(--accent-line); }
.latest-pub:hover .latest-title { color: var(--link); }
.latest-pub:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.latest-title:focus-visible { outline: none; }

/* News and talks timeline: the lab's magenta dots. */
ul.timeline { position: relative; list-style: none; margin: 0 0 1rem; padding-left: 2.25rem; }
ul.timeline::before { content: ''; position: absolute; left: 0.6rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--accent-line); }
ul.timeline > li { position: relative; padding: 0.15rem 0 1.4rem; }
ul.timeline > li::before {
  content: ''; position: absolute; left: -2.15rem; top: 0.3rem; width: 18px; height: 18px;
  border: 3px solid var(--accent); border-radius: 50%; background: var(--bg);
}
.news > ul.timeline > li:first-child::before { background: var(--accent); }
ul.timeline > li > p { margin-bottom: 0.25rem; }
.timeline-date { display: block; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.timeline-title { display: block; margin: 0.05rem 0 0.2rem; color: var(--ink); font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; }
/* The older news continue the same timeline: same left edge, only the button is indented. */
.more > summary { display: inline-flex; margin-left: 2.25rem; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary { margin-bottom: 1.25rem; }
.more > .timeline { margin-top: 0; }

/* Research */
.filter-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.filter-buttons .btn { font-size: 0.9rem; padding: 0.35rem 0.9rem; }
.area-intro { margin-bottom: 1.75rem; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--surface); }
.area-intro h2 { margin-top: 0; }

/* Robots: photo carousel (scroll-snap, with buttons and dots from site.js) */
.carousel { position: relative; margin-bottom: 1.5rem; border-radius: var(--radius); overflow: hidden; background: var(--dark); }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline-offset: -3px; }
.carousel-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; aspect-ratio: 16 / 9; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel-btn {
  position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.9); color: #1e1b22; font-size: 1.15rem; cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
}
.carousel-btn:hover { background: #fff; color: var(--accent); }
.carousel-btn[disabled] { opacity: 0; pointer-events: none; }
.carousel-prev { left: 0.75rem; }
.carousel-next { right: 0.75rem; }
.carousel-dots { position: absolute; left: 0; right: 0; bottom: 0.75rem; display: flex; justify-content: center; gap: 0.5rem; }
.carousel-dots button { width: 0.65rem; height: 0.65rem; padding: 0; border: 2px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }
.carousel-dots button[aria-current='true'] { background: #fff; }
html:not(.js) .carousel-btn, html:not(.js) .carousel-dots { display: none; }

/* Events */
.event-list { display: grid; gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.event { position: relative; display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.event:hover { border-color: var(--accent-line); }
.event-date { flex: 0 0 4.25rem; padding: 0.4rem 0; border-radius: var(--radius-sm); background: var(--accent); color: #fff; text-align: center; line-height: 1.1; }
.event-past .event-date { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.event-day { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; }
.event-month { display: block; font-size: 0.8rem; }
.event-title { margin: 0 0 0.25rem; font-size: 1.15rem; }
.event-title a { color: var(--ink); text-decoration: none; }
.event-title a::after { content: ''; position: absolute; inset: 0; }
.event:hover .event-title a { color: var(--accent); }
.event-meta { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* Tables (MSc proposals): a table on wide screens, cards on phones */
.table { width: 100%; }
.table th, .table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table thead th { border-bottom: 2px solid var(--ink); font-weight: 600; color: var(--ink); }
.table tbody tr:hover { background: var(--surface); }
.table-scroll { overflow-x: auto; margin-bottom: 1rem; }
@media (max-width: 640px) {
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr { margin-bottom: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); }
  .table-cards td { padding: 0.15rem 0; border: 0; }
  .table-cards td[data-label]::before { content: attr(data-label) ': '; color: var(--muted); font-size: 0.85rem; }
  .table-cards td:first-child { font-weight: 600; color: var(--ink); }
}

.gallery { display: grid; gap: 0.5rem; grid-template-columns: 1fr; margin-bottom: 1rem; text-align: center; }
.gallery img, .gallery video { width: 100%; height: auto; object-fit: contain; }
@media (min-width: 576px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(var(--columns, 3), 1fr); } }

.year-title { margin: 2rem 0 1rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--ink); font-size: 1.5rem; }
.paper-website-list { margin: 0; padding: 0; list-style: none; }
.paper-website-item { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.paper-website-item h3 { margin: 0 0 0.15rem; font-size: 1.05rem; }
.paper-website-item h3 a { text-decoration: none; }
.paper-website-item h3 a:hover { text-decoration: underline; }
.paper-website-item p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.not-found { padding: 3rem 0; text-align: center; }

/* Click-to-play YouTube embeds (see src/js/site.js). */
.yt-facade { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; overflow: hidden; cursor: pointer; background: var(--dark); border-radius: var(--radius); }
/* Inside a ratio box the box sets the size, for the preview and for the player that replaces it. */
.ratio > .yt-facade { position: absolute; inset: 0; height: 100%; max-width: none !important; aspect-ratio: auto !important; }
.yt-player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
.yt-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.yt-facade::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.45)); }
.yt-facade .yt-play { position: relative; z-index: 2; width: 68px; height: 48px; border-radius: 12px; background: #e00; transition: transform 0.15s; }
.yt-facade .yt-play::after { content: ''; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.yt-facade .yt-caption { position: absolute; left: 1rem; right: 1rem; bottom: 0.85rem; z-index: 2; overflow: hidden; color: #fff; font-weight: 500; text-align: left; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }
.yt-facade:hover .yt-play { transform: scale(1.08); }
.yt-facade:hover img { transform: scale(1.02); }

/* 12. Utilities ------------------------------------------------------------------------------ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted, .text-muted, .text-body-secondary { color: var(--muted) !important; }
.amr-color { color: var(--accent-text); }
.center, .text-center { text-align: center !important; }
.capitalize, .text-capitalize { text-transform: capitalize; }
.plain { list-style: none; padding: 0; }
.responsive { max-width: 100%; height: auto; }

/* Phones: content rows that put text beside a figure stack, and justified text is left-aligned
   (narrow justified columns leave big gaps). Rows of images only stay side by side. */
@media (max-width: 575.98px) {
  :is(.paper-body, .project-content, .prose) .row:has(> [class*='col'] > p) > [class*='col'] { flex: 0 0 auto; width: 100%; }
  :is(.paper-body, .project-content, .prose) [align='justify'] { text-align: left; }
}

/* 13. Content compatibility -------------------------------------------------------------------
   Paper and project pages were written with Bootstrap 5 classes. These are the ones they use,
   with the same behaviour, so existing content keeps its layout without Bootstrap. */
.row { --gx: 1.5rem; --gy: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--gy)); margin-inline: calc(-0.5 * var(--gx)); }
.row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-inline: calc(0.5 * var(--gx)); margin-top: var(--gy); }
.col { flex: 1 0 0%; }
.col-5 { flex: 0 0 auto; width: 41.6667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.3333%; }
.col-8 { flex: 0 0 auto; width: 66.6667%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-12 { flex: 0 0 auto; width: 100%; }
.row-cols-1 > * { flex: 0 0 auto; width: 100%; }
@media (min-width: 576px) {
  .row-cols-sm-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.3333%; }
}
@media (min-width: 768px) {
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .row-cols-md-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-md-3 > * { flex: 0 0 auto; width: 33.3333%; }
  .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; }
}
.g-1 { --gx: 0.25rem; --gy: 0.25rem; }
.g-2 { --gx: 0.5rem; --gy: 0.5rem; }
.g-4 { --gx: 1.5rem; --gy: 1.5rem; }
.ratio { position: relative; width: 100%; }
.ratio::before { content: ''; display: block; padding-top: var(--ratio, 56.25%); }
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.ratio-16x9 { --ratio: 56.25%; }
.ratio-4x3 { --ratio: 75%; }
.ratio-1x1 { --ratio: 100%; }
.ratio > iframe { border: 0; }
.d-flex { display: flex !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-evenly { justify-content: space-evenly !important; }
.justify-content-start { justify-content: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.gap-2 { gap: 0.5rem !important; }
.img-fluid { max-width: 100%; height: auto; }
.object-fit-contain { object-fit: contain !important; }
.object-fit-cover { object-fit: cover !important; }
.rounded { border-radius: 0.375rem !important; }
.fw-bold { font-weight: 700 !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; }
.mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; }
.my-4 { margin-block: 1.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.figure { display: inline-block; }
.figure-img { margin-bottom: 0.5rem; line-height: 1; }
.figure-caption { font-size: 0.875em; color: var(--muted); }
.border-secondary { border-color: #6c757d !important; }
.card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); }
.card-header { padding: 0.5rem 1rem; background: rgb(0 0 0 / 0.03); border-bottom: 1px solid var(--border); }
.card > .card-body { padding: 1rem; }
.video-wrapper { margin-bottom: 20px; }

/* Metrics page (content/stats.liquid) */
.stat-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 2rem; }
.stat { flex: 1 1 14rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); }
.stat-value { display: block; font-size: 2rem; font-weight: 600; color: var(--accent-text); }
.stat-label { color: var(--muted); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding: 0.5rem 0 1.5rem; border-bottom: 1px solid var(--border); }
.bar { position: relative; flex: 1 1 0; height: max(var(--h), 2px); background: var(--accent); border-radius: 2px 2px 0 0; }
.bars-wide { gap: 0.5rem; }
.bar-label { position: absolute; top: 100%; left: 0; right: 0; padding-top: 0.25rem; text-align: center; font-size: 0.75rem; color: var(--muted); }
.stat-tables { display: grid; gap: 0 2rem; }
@media (min-width: 992px) { .stat-tables { grid-template-columns: 1fr 1fr; } }
.stat-tables .table { display: table; }

/* Dark theme details --------------------------------------------------------------------------- */
/* Images with see-through pixels (marked data-transparent at build time: figures with black lines,
   logos) get a light backing in the dark theme; photos and the boxes around them stay dark. */
:root[data-theme='dark'] img[data-transparent] { border-radius: var(--radius-sm); background: var(--figure-bg); }
:root[data-theme='dark'] :is(.project-intro, .project-content) img[data-transparent] { padding: 0.35rem; }
/* The TU Delft logo is black text: show it in white. */
:root[data-theme='dark'] img[src*='TUDelft_logo'] { filter: brightness(0) invert(1); }

/* Theme switch in the header */
.theme-toggle {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--ink);
  font-size: 1.05rem; cursor: pointer;
}
.theme-toggle:hover { color: var(--accent-text); border-color: var(--accent-line); }
.theme-toggle .bi-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .bi-sun { display: inline-block; }
:root[data-theme='dark'] .theme-toggle .bi-moon { display: none; }

/* Order in the header: logo, menu, theme switch (desktop); logo, theme switch, menu button (phones). */
.nav-brand { order: 0; }
.nav-menu { order: 1; }
.theme-toggle { order: 2; }
.nav-toggle { order: 3; }
@media (max-width: 1119.98px) {
  .theme-toggle { order: 1; }
  .nav-toggle { order: 2; }
  .nav-menu { order: 3; }
}
html:not(.js) .theme-toggle { display: none; }