@import url('https://fonts.googleapis.com/css2?family=Gudea:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

:root[data-mode="light"] .CodeMirror {
    color: #000000;
    background-color: #ffffff;
    height: auto;
}

.nav-links {
  display: flex;
  justify-content: center;  /* align links horizontally in center */
  flex-wrap: wrap;          /* wrap on smaller screens */
  gap: 0.5rem;              /* consistent spacing */
  margin: 0.5rem 0;
}

.nav-links a {
  display: inline-block;
  padding: 5px 12px;
  margin: 4px 8px 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid var(--button-border, #2F73C0);
  border-radius: 8px;
  color: var(--button-border, #2F73C0);
  background-color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-links a:hover {
  background-color: var(--button-border, #2F73C0);
  color: white;
}

.news-scroll {
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid rgba(47, 115, 192, 0.35);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  background: rgba(47, 115, 192, 0.03);
}

.news-scroll .news-list {
  margin: 0;
  padding-left: 1.25rem;
}

.news-scroll .news-list > li {
  margin-bottom: 0.6rem;
}

.news-scroll .news-list > li:last-child {
  margin-bottom: 0;
}

.news-scroll .news-list li ul {
  margin-top: 0.2rem;
  padding-left: 1rem;
}

.news-scroll a[href="#"],
.news-scroll a[href="#"]:hover {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}

.button {
    display: inline-block;
    background-color: #2F73C0; /* Blue background */
    color: white; /* White text */
    padding: 3px 10px; /* Compact padding */
    font-size: 0.9em; /* Match paragraph font size */
    text-decoration: none; /* Remove underline */
    border-radius: 6px; /* Rounded corners */
    font-family: inherit; /* Use the same font as surrounding text */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor on hover */
}

.button-green {
    display: inline-block;
    background-color: green; /* Blue background */
    color: white; /* White text */
    padding: 3px 10px; /* Compact padding */
    font-size: 0.9em; /* Match paragraph font size */
    text-decoration: none; /* Remove underline */
    border-radius: 6px; /* Rounded corners */
    font-family: inherit; /* Use the same font as surrounding text */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor on hover */
}

:root[data-mode="dark"] .collapsed, 
:root[data-mode="dark"] .expanded,
:root[data-mode="auto"][data-theme="dark"] .collapsed, 
:root[data-mode="auto"][data-theme="dark"] .expanded {
    color: white !important;
}

:root[data-mode="light"] .collapsed, 
:root[data-mode="light"] .expanded,
:root[data-mode="auto"][data-theme="light"] .collapsed, 
:root[data-mode="auto"][data-theme="light"] .expanded {
    color: black !important;
}

:root[data-mode="dark"] .CodeMirror {
    color: #ffffff;
    background-color: #2d2d2d;
    height: auto;
}

:root[data-mode="auto"] .CodeMirror {
    color: #ffffff;
    background-color: #2d2d2d;
    height: auto;
}

:root[data-mode="dark"] .CodeMirror-cursor {
    border-left: 1px solid #ffffff;
}

:root[data-mode="dark"] .cm-keyword { color: #ff79c6; }
:root[data-mode="dark"] .cm-def { color: #ff79c6; }
:root[data-mode="dark"] .cm-builtin { color: #ff79c6; }
:root[data-mode="dark"] .cm-string { color: #f1fa8c; }

:root[data-mode="dark"] .jp-OutputArea-output,
:root[data-mode="dark"] .jp-RenderedText {
    color: #ffffff !important;
    background-color: #2d2d2d !important;
    padding-top: 0.1em !important; /* Added padding */
}

:root[data-mode="dark"] .jp-OutputArea-output pre,
:root[data-mode="dark"] .jp-RenderedText pre {
    color: #ffffff !important;
    background-color: #2d2d2d !important;
}

:root[data-mode="dark"] .CodeMirror {
    color: #ffffff; 
    background-color: #2d2d2d;
}

:root[data-mode="dark"] .CodeMirror-cursor {
    border-left: 1px solid #ffffff;
}

:root[data-mode="dark"] .cm-keyword { color: #ff79c6; }
:root[data-mode="dark"] .cm-def { color: #ff79c6; }
:root[data-mode="dark"] .cm-builtin { color: #ff79c6; }
:root[data-mode="dark"] .cm-string { color: #f1fa8c; }

:root[data-mode="auto"].thebe .jp-OutputArea-output,
:root[data-mode="auto"].thebe .jp-RenderedText {
    color: #ffffff !important;
    background-color: #2d2d2d !important;
}

:root[data-mode="auto"] .jp-OutputArea-output pre,
:root[data-mode="auto"] .jp-RenderedText pre {
    color: #ffffff !important;
    background-color: #2d2d2d !important;
}

:root[data-mode="auto"] .CodeMirror {
    color: #ffffff; 
    background-color: #2d2d2d;
}

:root[data-mode="auto"] .CodeMirror-cursor {
    border-left: 1px solid #ffffff;
}

:root[data-mode="auto"] .cm-keyword { color: #ff79c6; }
:root[data-mode="auto"] .cm-def { color: #ff79c6; }
:root[data-mode="auto"] .cm-builtin { color: #ff79c6; }
:root[data-mode="auto"] .cm-string { color: #f1fa8c; }

:root[data-mode="dark"] {
    --jp-rendermime-error-background: transparent !important;
}

:root[data-mode="auto"] {
    --jp-rendermime-error-background: transparent !important;
}

/* Increase font size of normal text */
body {
    font-size: 1.1em; /* Adjust the size as needed */
    /* font-family: 'Gudea', sans-serif; */
    font-family: "Source Sans 3", serif;
}

/* Thebe launch button */
.thebe-launch-button .spinner {
    display: none !important;
}

/* Apply Fira Code to both static and interactive code blocks */
pre, code, .highlight pre, .highlight code, .CodeMirror {
    font-family: "Fira Code", monospace !important;
    font-size: 0.9em !important; /* Adjust size as needed */
}

/* Ensure proper font and sizing in CodeMirror */
.CodeMirror-lines {
    font-family: "Fira Code", monospace !important;
    font-size: 1.2em !important;
}

/* Override Jupyter-Book styles */
div.highlight pre, div.highlight code, div.highlight-ipython3 pre {
    font-family: "Fira Code", monospace !important;
    font-size: 0.9em !important;
}

/* Fix Thebe editor issue */
.CodeMirror pre, .CodeMirror-code {
    font-family: "Fira Code", monospace !important;
    font-size: 0.9em !important;
}

h1 {
    text-align: center;
}

h1, h2, h3, h4, h6 {
    /* font-family: "Bricolage Grotesque", serif; */
    font-family: "Source Sans 3", serif;
}

.hide.above-input summary {
    color: black;
}

.cell_output.docutils.container img {
    display: block; 
    margin-left: auto;
    margin-right: auto;
}

/* Ensure no background color is applied to images */
div.cell_output img {
    background-color: transparent !important;
}

div.cell_output.text_html {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}

div.cell_output.text_html iframe {
    display: block !important;
    margin: auto !important;
    width: 800px !important;
    height: 600px !important;
}

/* Manually set image styling to remove inversion and filters */
html[data-theme="dark"] img:not(.only-dark, .dark-light),
html[data-theme="dark"] figure img:not(.only-dark, .dark-light),
html[data-theme="dark"] iframe:not([src*="youtube.com"]):not([src*="vimeo.com"]):not(.only-dark) {
    background-color: #fff !important;
    border-radius: 0.25rem !important;
}

/* Ensure no filter effects apply */
html[data-theme="dark"] img,
html[data-theme="dark"] figure img,
html[data-theme="dark"] .cell_output img,
html[data-theme="dark"] div.cell_output img,
html[data-theme="dark"] .jp-OutputArea-output img {
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -o-filter: none !important;
    -ms-filter: none !important;
}

/* Ensure iframe contents are not affected */
html[data-theme="dark"] iframe {
    filter: none !important;
}

html[data-theme="dark"] .logo img:not(.only-dark), html[data-theme="dark"] img:not(.sd-tab-set.docutils img):not(.only-dark), html[data-theme="dark"] figure:not(.sd-tab-set.docutils figure) img:not(.only-dark), html[data-theme="dark"] iframe:not([src*="youtube.com"]):not([src*="vimeo.com"]):not(.only-dark):not(.sphinx) {
    filter: none !important;
    mix-blend-mode: normal !important;
}  
/* Prevent inversion specifically for figures */
html[data-theme="dark"] figure img,
html[data-theme="dark"] .figure img {
    filter: none !important;
}

/* Ensure specific class-based rules do not override filter settings */
img.dark-light, img.only-dark, img.only-light {
    filter: none !important;
}

/* Remove inversion effect from markdown and HTML embedded images */
html[data-theme="dark"] img:not(.only-dark, .dark-light),
html[data-theme="dark"] figure img {
    filter: none !important;
}

/* Reset blending mode for all images */
img {
    mix-blend-mode: normal !important;
}

video {
    width: 100%;
    height: auto;
}

html[data-theme="dark"] .bd-content div.cell_output .text_html:not(:has(table.dataframe)),
html[data-theme="dark"] .bd-content div.cell_output,
html[data-theme="dark"] .bd-content div.cell_output img {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    color: inherit !important;
}

:root[data-theme="dark"] .next {
    color: white !important;
}

:root[data-theme="light"] .next {
    color: black !important;
}


.paper-entry {
    display: flex;
    align-items: flex-start;  /* <<< Ensures top alignment */
    gap: 1rem;
    margin: 2rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--entry-divider-color, #ddd);
    font-family: "Source Sans 3", sans-serif;
  }
  
  /* Square image that aligns properly */
  .thumbnail {
    width: 125px;
    height: 170px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    display: block;
  }
  
  /* Make sure text block does not stretch weirdly */
  .paper-content {
    flex: 1;
    display: block;  /* <<< Prevents centering */
  }
  
  .paper-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 0.3rem;
  }
  
  .paper-title a {
    color: var(--link-color, #2F73C0);
    text-decoration: none;
  }
  
  .paper-title a:hover {
    text-decoration: underline;
  }

  .paper-venue {
    font-size: 1.0rem;
    font-style: italic;
    color: var(--text-secondary, #666);
    margin-bottom: 0.4rem;
  }
  
  .paper-authors {
    font-size: 1.0rem;
    color: var(--text-secondary, #444);
    margin-bottom: 0.4rem;
    line-height: 1.4;
  }
  
  .paper-authors b {
    color: var(--text-primary, #000);
  }
  
  .corresponding {
    font-weight: bold;
    color: #dc3545;
    margin-left: 2px;
  }
  
  .paper-links a {
    display: inline-block;
    padding: 5px 12px;
    margin: 4px 8px 0 0;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border: 2px solid var(--button-border, #2F73C0);
    border-radius: 8px;
    color: var(--button-border, #2F73C0);
    background-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  
  .paper-links a:hover {
    background-color: var(--button-border, #2F73C0);
    color: white;
  }
  
  /* Theme variables */
  html[data-theme="dark"] {
    --text-primary: #f1f1f1;
    --text-secondary: #cccccc;
    --button-border: #79b8ff;
    --link-color: #79b8ff;
    --entry-divider-color: #444;
  }
  
  html[data-theme="light"] {
    --text-primary: #1a1a1a;
    --text-secondary: #444;
    --button-border: #2F73C0;
    --link-color: #2F73C0;
    --entry-divider-color: #ddd;
  }

/* Size & center the whole block from THIS page */
.remotion-embed{
  max-width: var(--max, 900px);
  margin: 0 auto;              /* center */
}

/* Aspect-ratio box using the classic padding trick */
.remotion-embed .remotion-frame{
  position: relative;
  width: 100%;
}
.remotion-embed .remotion-frame::before{
  /* ratio = h/w; defaults 9/16 */
  content: "";
  display: block;
  padding-top: calc( (var(--h, 9) / var(--w, 16)) * 100% );
}

/* Make the iframe fill that box 1:1 */
.remotion-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  overflow: hidden;
  background: transparent;
  overscroll-behavior: contain;
}

.remotion-embed-wrap { color-scheme: light dark; }
html[data-theme="dark"] .remotion-embed-wrap { color-scheme: dark; }

/* ==========================================================================
   Research-interest cards (sphinx-design)
   ========================================================================== */

/* Venue badges: uniform-width mono pills for visual coherence */
.sd-card-footer .sd-badge {
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 0.68rem !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.3em 0.55em;
  border-radius: 5px;
  vertical-align: 0.08em;
  margin-right: 0.5rem;
  white-space: nowrap;
  display: inline-block;
  min-width: 5.9rem;          /* fits the longest: "ACM MM 2025" */
  text-align: center;
}

/* Affiliation logos sitting inline after the collaborator name */
.aff-logo {
  /* Same box as .collab-logo: contain inside a fixed 3.6em x 1.6em frame.
     Every logo is width-constrained to 3.6em, so a 5.56-aspect wordmark (ASU)
     and a 2.63 one (UB) occupy identical horizontal space and no line rewraps. */
  display: inline-block;
  height: 1.6em;
  width: 3.6em;
  object-fit: contain;
  object-position: center;
  vertical-align: middle;
  margin: 0 0.4rem 0 0.1rem;   /* sits between the venue badge and the title */
  opacity: 0.92;
}

/* Badge must stay legible in dark mode */
html[data-theme="dark"] .sd-card-footer .sd-badge.sd-bg-dark {
  background-color: #2f3742 !important;
  color: #ccd4de !important;
}

/* One paper per line, comfortable spacing */
.sd-card-footer p {
  margin-bottom: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
.sd-card-footer p:last-child { margin-bottom: 0; }

/* The research-area title (sphinx-design emits .sd-card-header when the card
   is top-level, and .sd-card-title when nested inside an admonition) */
.sd-card-header,
.sd-card-title {
  font-weight: 700;
  font-size: 1.03rem;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
}

/* The question reads as the lead */
.sd-card-body { font-size: 0.98rem; }

/* Octicons keep their colour class but line up with the text */
.sd-card-header .sd-octicon,
.sd-card-title .sd-octicon { flex: 0 0 auto; }

/* ==========================================================================
   Collaborators: two centred columns, borderless, logo beside each name
   ========================================================================== */
.collab-cols {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;      /* centre the whole block on the page */
  gap: 0.25rem 3.2rem;
  margin: 1.2rem auto 1.8rem;
}

.collab-col { display: flex; flex-direction: column; }

.collab-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.34rem 0;
  line-height: 1.35;
}

/* Fixed box so names align despite very different logo aspect ratios */
.collab-logo {
  height: 1.6em;
  width: 3.6em;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
  opacity: 0.92;
}

.collab-item a { font-size: 1rem; font-weight: 600; }

@media (max-width: 620px) {
  .collab-cols { grid-template-columns: max-content; gap: 0; }
}

/* ==========================================================================
   Headings: a touch smaller than the theme default
   Scoped to article content so the sidebar and nav are untouched.
   ========================================================================== */
.bd-content h1 { font-size: 2.1rem; }
.bd-content h2 { font-size: 1.55rem; }
.bd-content h3 { font-size: 1.28rem; }
.bd-content h4 { font-size: 1.1rem; }

.bd-content h2 { margin-top: 2.2rem; margin-bottom: 0.7rem; }
.bd-content h3 { margin-top: 1.6rem; }

/* ==========================================================================
   Interests / Experience: two simple columns inside the job-market admonition
   ========================================================================== */
.ie-cols {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1.2rem 2.5rem;
  margin-top: 1rem;
}

.ie-head {
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 0.55rem;
}

.ie-list { margin: 0; padding-left: 1.15rem; }
.ie-list li { margin-bottom: 0.28rem; font-size: 0.89rem; line-height: 1.4; }

.ie-entry {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 0.62rem;
}
.ie-entry:last-child { margin-bottom: 0; }

.ie-logo {
  /* No tile and no padding: a plate behind these reads as a white box in dark
     mode. Adobe uses the all-red mark, which carries no background and holds on
     either ground. CVML (cream) and Carbynetech (black) bake their own square
     into the file, so the radius makes each read as a logo chip, not padding. */
  height: 1.95em;
  width: 1.95em;
  object-fit: contain;
  flex: 0 0 auto;
  margin-top: 0.1em;
  display: inline-block;
  background: transparent;
  border: 0;
  border-radius: 5px;
  padding: 0;
  overflow: hidden;
}

/* Dark mode: the template plates every <img> with white (see the rule near the
   top) so transparent diagrams stay readable on a dark ground. On a logo that
   plate reads as white padding boxed around the mark, so undo it for the three
   landing-page logo classes only. Same specificity as the template rule, so it
   has to sit after it in source order. Every other image keeps its plate. */
html[data-theme="dark"] img.aff-logo,
html[data-theme="dark"] img.collab-logo,
html[data-theme="dark"] img.ie-logo {
  background-color: transparent !important;
  border-radius: 5px !important;
}

.ie-title { font-size: 0.91rem; line-height: 1.35; }
.ie-sub { font-size: 0.79rem; opacity: 0.62; line-height: 1.35; margin-top: 0.05rem; }
.ie-note { font-size: 0.79rem; font-style: italic; opacity: 0.72; line-height: 1.4; margin-top: 0.18rem; }

@media (max-width: 620px) {
  .ie-cols { grid-template-columns: 1fr; gap: 1rem; }
}

/* ==========================================================================
   Grid nested inside an admonition
   sphinx-design rows use Bootstrap negative horizontal margins with matching
   column padding. Inside a padded admonition that pushes the cards past the
   text edge, so the cards no longer line up with the paragraph above them.
   Neutralise the horizontal gutter only -- the vertical one is what spaces
   the stacked cards, so it must survive.
   ========================================================================== */
.admonition .sd-container-fluid { padding-left: 0; padding-right: 0; }
.admonition .sd-row { margin-left: 0; margin-right: 0; }
.admonition .sd-row > * { padding-left: 0; padding-right: 0; }

/* Card title: icon aligned to the first line, not centred against a
   title that wraps to two lines. */
.sd-card-header,
.sd-card-title {
  align-items: flex-start;
}
.sd-card-header .sd-octicon,
.sd-card-title .sd-octicon {
  margin-top: 0.18em;
}

/* --- Cards nested in an admonition: keep the full box inside the padding --- */
.admonition .sd-container-fluid,
.admonition .sd-row,
.admonition .sd-row > *,
.admonition .sd-card {
  box-sizing: border-box;
  max-width: 100%;
}

/* The theme's card border colour is nearly invisible against the tinted
   admonition background, so state it explicitly. */
.admonition .sd-card {
  border: 1px solid rgba(128, 128, 128, 0.30) !important;
  width: 100% !important;
}

/* Small inset so the card edges never sit flush against the admonition wall */
.admonition .sd-container-fluid {
  padding-left: 0;
  padding-right: 0.15rem;
}

/* --- Cards inside an admonition need their own surface -------------------
   The card background and the admonition's tinted ground resolve to the same
   colour, so a 1px border has nothing to sit against and reads as invisible.
   Give the card the page background plus a real edge and lift.
   ------------------------------------------------------------------------ */
.admonition .sd-card {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07) !important;
}

html[data-theme="dark"] .admonition .sd-card {
  background-color: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   FIX: cards nested in an admonition overflowed to the right while the left
   gutter was too wide. The theme indents every admonition child by 1.4rem,
   and the sphinx-design grid re-derives its own width underneath that, so the
   two never agreed. Pin one gutter for all children and force the grid to
   inherit it exactly.
   ========================================================================== */
.admonition p.admonition-title ~ *,
div.admonition p.admonition-title ~ * {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.admonition .sd-container-fluid {
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.admonition .sd-row {
  margin: 0 !important;
  width: 100% !important;
}

.admonition .sd-row > * {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.admonition .sd-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Long paper titles must wrap inside the card, never widen it */
.admonition .sd-card-body,
.admonition .sd-card-footer { box-sizing: border-box; }
.admonition .sd-card-footer p { overflow-wrap: anywhere; }

/* --- Vertical rhythm inside admonitions ---------------------------------- */
.admonition p { margin-bottom: 0.55rem; }

/* space above the first card, and below the last one */
.admonition .sd-container-fluid {
  margin-top: 0.4rem !important;
  margin-bottom: 0.15rem !important;
}

/* space above the Interests / Experience columns */
.ie-cols { margin-top: 0.6rem; }

/* ==========================================================================
   Publications list on the landing page -- plain rows, no cards.
   Venue sits in its own fixed column, centred both ways against the entry.
   ========================================================================== */
.pub-scroll {
  max-height: 22rem;
  overflow-y: auto;
  /* same tint and border as .news-scroll so the two boxes read as siblings */
  border: 1px solid rgba(47, 115, 192, 0.35);
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  background: rgba(47, 115, 192, 0.03);
}

.pub-item {
  display: flex;
  align-items: center;          /* vertical centring of the venue */
  gap: 0.9rem;
  padding: 0.55rem 0;
}
.pub-item + .pub-item { border-top: 1px solid rgba(128, 128, 128, 0.14); }

.pub-venue {
  /* Matches the {bdg-dark} venue badges in the research-focus cards */
  flex: 0 0 5.9rem;
  align-self: center;
  text-align: center;
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
  padding: 0.3em 0.55em;
  border-radius: 5px;
  background-color: #212529;
  color: #ffffff;
  white-space: nowrap;
}

html[data-theme="dark"] .pub-venue {
  background-color: #2f3742;
  color: #ccd4de;
}

/* Equal-contribution marker */
.eq { font-weight: 600; }

.pub-body { flex: 1 1 auto; min-width: 0; }

.pub-title a {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

.pub-authors {
  font-style: italic;
  font-size: 0.82rem;
  opacity: 0.68;
  line-height: 1.45;
  margin-top: 0.18rem;
}

@media (max-width: 560px) {
  .pub-item { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .pub-venue { text-align: left; flex-basis: auto; }
}

/* Research-card questions read as prompts, not statements */
.admonition .sd-card-body > p.sd-card-text { font-style: italic; }

/* ==========================================================================
   Teaching list on the landing page -- same row grammar as publications
   ========================================================================== */
.teach-list { display: flex; flex-direction: column; margin: 1rem 0 1.2rem; }

.teach-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0;
}
.teach-item + .teach-item { border-top: 1px solid rgba(128, 128, 128, 0.14); }

.teach-role {
  flex: 0 0 6.6rem;
  align-self: center;
  text-align: center;
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
  padding: 0.3em 0.5em;
  border-radius: 5px;
  background-color: #212529;
  color: #ffffff;
  white-space: nowrap;
}
html[data-theme="dark"] .teach-role { background-color: #2f3742; color: #ccd4de; }

.teach-body { flex: 1 1 auto; min-width: 0; }
.teach-title { font-size: 0.93rem; font-weight: 600; line-height: 1.4; }
.teach-meta  { font-size: 0.8rem; opacity: 0.62; margin-top: 0.1rem; }
.teach-note  { font-size: 0.85rem; opacity: 0.78; margin-top: 0.22rem; line-height: 1.45; }

@media (max-width: 560px) {
  .teach-item { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .teach-role { text-align: left; flex-basis: auto; }
}

/* Teaching list sits inside an admonition: drop the theme's extra child indent
   so the rows line up with the award text above them. */
.admonition .teach-list { margin-left: 0; margin-right: 0; }


/* ==========================================================================
   Student-feedback carousel, ported from the CSE 4/573 course site
   (github.com/naresh-devula/cvip-summer25). Bare .card / blockquote /
   .student selectors are namespaced under .feedback-section so they cannot
   collide with sphinx-design cards elsewhere on this site.
   ========================================================================== */
.feedback-section {
    max-width: 1100px;
    margin: 24px auto;
    /* font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; */
  }

  .carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .profile-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-weight: 600;
  }
  .profile-links a {
    text-decoration: none;
  }

  .carousel-controls {
    display: flex;
    gap: 8px;
  }

  .carousel-btn {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s ease, transform 0.05s ease;
  }
  .carousel-btn:hover { background: #f6f6f6; }
  .carousel-btn:active { transform: scale(0.98); }
  .carousel-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .carousel {
    position: relative;
  }

  /* Track scrolls programmatically; scrollbar hidden */
  .carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 16px) / 2); /* 2 cards visible with 16px gap */
    gap: 16px;
    overflow: hidden;          /* hide scrollbar & manual scroll */
    scroll-snap-type: x mandatory;
  }

  .feedback-section .card {
    position: relative;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 14px;
    padding: 18px 18px 48px;   /* extra bottom padding so quote doesn't touch signature */
    min-height: 180px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
  }

  .feedback-section blockquote {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #222;
  }

  .feedback-section .student {
    position: absolute;
    right: 14px;
    bottom: 12px;
    font-size: 0.9rem;
    color: #666;
    white-space: nowrap;
  }

  /* Small screens: 1 per view */
  @media (max-width: 640px) {
    .carousel-track {
      grid-auto-columns: 100%;
    }
  }

/* ===== Dark mode fixes for the feedback carousel ===== */
:root[data-theme="dark"] .feedback-section,
:root[data-mode="dark"] .feedback-section,
:root[data-mode="auto"][data-theme="dark"] .feedback-section {
  color: #e6edf3; /* base text */
}

/* Links next to the arrows */
:root[data-theme="dark"] .profile-links a,
:root[data-mode="dark"] .profile-links a,
:root[data-mode="auto"][data-theme="dark"] .profile-links a {
  color: #5aa7ff;
}
:root[data-theme="dark"] .profile-links a:hover,
:root[data-mode="dark"] .profile-links a:hover,
:root[data-mode="auto"][data-theme="dark"] .profile-links a:hover {
  color: #a8cfff;
  text-decoration: underline;
}

/* Arrow buttons */
:root[data-theme="dark"] .carousel-btn,
:root[data-mode="dark"] .carousel-btn,
:root[data-mode="auto"][data-theme="dark"] .carousel-btn {
  background: #1a222c;
  color: #e6edf3;
  border: 1px solid #2a3644;
}
:root[data-theme="dark"] .carousel-btn:hover,
:root[data-mode="dark"] .carousel-btn:hover,
:root[data-mode="auto"][data-theme="dark"] .carousel-btn:hover {
  background: #223042;
}
:root[data-theme="dark"] .carousel-btn:disabled,
:root[data-mode="dark"] .carousel-btn:disabled,
:root[data-mode="auto"][data-theme="dark"] .carousel-btn:disabled {
  opacity: 0.45;
}

/* Cards */
:root[data-theme="dark"] .feedback-section .card,
:root[data-mode="dark"] .feedback-section .card,
:root[data-mode="auto"][data-theme="dark"] .feedback-section .card {
  background: #151b22;            /* card surface */
  border: 1px solid #2a3644;       /* subtle border */
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

/* Quote block inside cards */
:root[data-theme="dark"] .feedback-section .card blockquote,
:root[data-mode="dark"] .feedback-section .card blockquote,
:root[data-mode="auto"][data-theme="dark"] .feedback-section .card blockquote {
  color: #e6edf3;                  /* readable quote text */
  background: #1b2430;             /* slightly raised */
  border: 1px solid #2a3644;
  border-left: 3px solid #5aa7ff;  /* accent stripe */
  border-radius: 10px;
}

/* Tighten the gap between the award text and the teaching rows */
.admonition .teach-list { margin-top: 0.3rem; margin-bottom: 0.5rem; }

/* Teaching links, sitting between the heading and the award box */
.teach-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.2rem 0 0.35rem;
}
.teach-links a {
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.24rem 0.62rem;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 999px;
  text-decoration: none;
}
.teach-links a:hover { border-color: currentColor; text-decoration: none; }

/* The theme gives every admonition margin:1.5625em auto. That is the gap under
   the teaching links, not the links' own margin. Pull the award box up. */
.teach-links + .admonition,
.teach-links + div.admonition { margin-top: 0.7rem !important; }

/* ==========================================================================
   Dark mode: admonitions carry a grey fill (--pst-color-on-background) that
   reads as a raised slab. Drop it so they sit on the page like .pub-scroll,
   keeping the coloured left rule and the tinted title bar.
   ========================================================================== */
html[data-theme="dark"] .admonition,
html[data-theme="dark"] div.admonition {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   MapMyVisitors map widget: landing page only, small, under the social icons.
   map.js writes its own inline width/height onto #mapmyvisitors-widget from
   the w= parameter, so the size lives there (w=220) and this only centres it.
   The globe widget is deliberately not used: its globe_call_home.js data and
   tracking endpoint 404s, so it renders an empty sphere and records no visits.
   ========================================================================== */
.visitor-map {
  display: flex;
  justify-content: center;
  margin: 0.55rem 0 0;
}

.visitor-map #mapmyvisitors-widget {
  display: block;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  opacity: 0.92;
  transition: opacity 0.2s ease;
}

.visitor-map #mapmyvisitors-widget:hover {
  opacity: 1;
}

.visitor-map a,
.visitor-map a:hover {
  text-decoration: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Visitor orb: a globe sized to sit in the social icon row, drawn by
   _static/visitor-orb.js. Records the visit against the Cloudflare Worker in
   ../../worker and plots previous readers as dots. Deliberately textless: the
   numbers live on the Worker's dashboard, not on the page.
   ========================================================================== */
.social-icons .visitor-orb {
  /* Same 45px box as the icon anchors, with a 40px orb centred inside it, so
     the orb's optical size matches a Font Awesome glyph at font-size 45px. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 45px;
  margin: 15px;
  flex: 0 0 auto;
  line-height: 0;
}

.visitor-orb svg {
  display: block;
  width: 40px;
  height: 40px;
  overflow: visible;
}

.visitor-orb .vo-ocean { fill: rgba(47, 115, 192, 0.10); }
.visitor-orb .vo-rim   { fill: none; stroke: rgba(47, 115, 192, 0.60); stroke-width: 3.5; }
.visitor-orb .vo-grid  { fill: none; stroke: rgba(47, 115, 192, 0.40); stroke-width: 2.2; }
.visitor-orb .vo-grid ellipse,
.visitor-orb .vo-grid polyline { fill: none; vector-effect: non-scaling-stroke; }
.visitor-orb .vo-dots circle { fill: #e8833c; }

html[data-theme="dark"] .visitor-orb .vo-ocean { fill: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .visitor-orb .vo-rim   { stroke: rgba(122, 170, 224, 0.62); }
html[data-theme="dark"] .visitor-orb .vo-grid  { stroke: rgba(122, 170, 224, 0.42); }
html[data-theme="dark"] .visitor-orb .vo-dots circle { fill: #f0a05a; }

/* --- Research Focus lead: sentence, icon row, sub-line ---------------------
   The three areas sit in their own row under the lead sentence, each one
   carrying the octicon and colour of the card it points at further down, so
   the row doubles as an index into those cards.

   Nothing here may set white-space:nowrap. The theme gives .admonition
   overflow:hidden, so a row too wide for the column is clipped rather than
   scrolled, and a term that cannot wrap simply disappears off the right edge.
   Wrapping is the only safe failure mode in this box. */
.lead-terms {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.8rem 1.9rem;
  margin-top: 1.6rem;
  margin-bottom: 0;
}

.lead-terms .lt-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;          /* natural width: shrinking makes each label wrap */
  max-width: 100%;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Each label holds one line. Safe here in a way the whole row was not: a
   single label is a fraction of the column width, and the row itself can
   still wrap between labels, so nothing can end up wider than the box and
   get clipped by the admonition's overflow:hidden. */
.lead-terms .lt-col p:last-child { white-space: nowrap; }

@media (max-width: 620px) {
  .lead-terms .lt-col p:last-child { white-space: normal; }
}

/* The directive emits the icon and the label as two paragraphs, which is what
   stacks them; their default margins would undo the gap above. */
.lead-terms .lt-col p { margin: 0; }
.lead-terms .lt-col svg { margin: 0; }

.lead-terms .lt-1 p:last-child { color: #0a6d7f; }
.lead-terms .lt-2 p:last-child { color: #23548e; }
.lead-terms .lt-3 p:last-child { color: #176339; }

html[data-theme="dark"] .lead-terms .lt-1 p:last-child { color: #6fc9d8; }
html[data-theme="dark"] .lead-terms .lt-2 p:last-child { color: #9dc4f0; }
html[data-theme="dark"] .lead-terms .lt-3 p:last-child { color: #7fd4b4; }

/* Sits closer under the row than the row sits under the lead sentence: it
   belongs to the row, not to the paragraph above it. The row carries
   margin-bottom:0 so this is the only gap in play, since adjacent block
   margins collapse to the larger of the two rather than adding up. */
.lead-sub {
  margin-top: 0.8rem;
  margin-bottom: 0;
}

.lead-sub p {
  margin: 0;
  font-size: 0.86rem;
  font-style: italic;
  opacity: 0.68;
}

/* The card grid brings its own 1rem of body padding, so the cards read as
   further from the sub-line than the measured gap says they are. The grid's
   vertical gutter nets to zero at the top (the row's negative margin-top is
   cancelled by the first column's positive one), so there is nothing to
   subtract there: pulling the whole grid up is the only lever.

   !important is required, not decorative. The generic rule further up this
   file ("space above the first card") sets margin-top on every
   .admonition .sd-container-fluid with !important, and !important wins over
   specificity, so without it this declaration is discarded in silence. */
.lead-sub + .sd-container-fluid {
  margin-top: -0.35rem !important;
}