/* =========================================================
   CV page — inspired by schochastics/modern2-cv and the
   academic-cv-sample two-column layout. Harmonised with
   the lab cream/teal palette defined in styles.css.
   ========================================================= */

:root {
  --cv-sidebar-bg: #1f3a44;          /* deep teal-charcoal */
  --cv-sidebar-bg-soft: #294b57;
  --cv-sidebar-text: #e9efec;
  --cv-sidebar-muted: #aebab5;
  --cv-sidebar-accent: #6fb7c9;       /* lighter teal for links/headings */
  --cv-sidebar-border: rgba(255,255,255,.12);
  --cv-content-rule: #e3dccd;
  --cv-content-strong: #1f3a44;
  --cv-content-accent: #1c6e8c;
  --cv-pub-key: #b5394c;              /* warm red used for top-3 papers */
}

/* Make the CV page edge-to-edge inside Quarto's page-layout: full */
main.content[role="main"], #quarto-document-content {
  padding-top: 0;
}

/* Hide the default Quarto title block on the CV page so the layout breathes */
.cv-page ~ .quarto-title-block,
body:has(.cv-page) .quarto-title-block {
  display: none !important;
}
body:has(.cv-page) header#title-block-header { display: none !important; }

.cv-page {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;                 /* so sidebar can be sticky */
  gap: 0;
  max-width: 1240px;
  margin: 1.2rem auto 2.5rem;
  background: #fff;
  border: 1px solid var(--cv-content-rule);
  border-radius: 10px;
  overflow: visible;                  /* sticky needs overflow != hidden */
  box-shadow: 0 12px 36px rgba(0,0,0,.06);
}

/* ---------- SIDEBAR ---------- */

.cv-sidebar {
  background: linear-gradient(180deg, var(--cv-sidebar-bg) 0%, var(--cv-sidebar-bg-soft) 100%);
  color: var(--cv-sidebar-text);
  padding: 2.2rem 1.6rem 2.4rem;
  font-size: .9rem;
  line-height: 1.5;
  position: sticky;                /* follows scroll on desktop */
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  border-radius: 10px 0 0 10px;    /* round the corners now that overflow:visible reveals them */
}
.cv-sidebar::-webkit-scrollbar { width: 6px; }
.cv-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }

.cv-sidebar a {
  color: var(--cv-sidebar-accent);
  text-decoration: none;
}
.cv-sidebar a:hover { text-decoration: underline; }

.cv-photo {
  width: 168px;
  height: 168px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto 1.1rem;
  border: 4px solid rgba(255,255,255,.85);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  background: #2a4a55;
}

.cv-name {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin: 0;
  letter-spacing: -.01em;
  color: #fff;
  line-height: 1.18;
}

.cv-role {
  text-align: center;
  margin: .35rem 0 1.6rem;
  font-size: .88rem;
  color: var(--cv-sidebar-muted);
  line-height: 1.35;
}

.cv-sb-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--cv-sidebar-accent);
  margin: 1.6rem 0 .6rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--cv-sidebar-border);
}

.cv-sidebar ul.cv-contact,
.cv-sidebar ul.cv-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 .4rem;
}
.cv-sidebar ul.cv-contact li,
.cv-sidebar ul.cv-meta li {
  margin: 0 0 .45rem;
  padding: 0;
  display: block;
}
.cv-sidebar ul.cv-contact li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  word-break: break-word;
}
.cv-sidebar ul.cv-contact li .fa,
.cv-sidebar ul.cv-contact li svg {
  color: var(--cv-sidebar-accent);
  min-width: 1.1rem;
  text-align: center;
  margin-top: .15rem;
}
.cv-sidebar ul.cv-meta strong {
  color: #fff;
  font-weight: 600;
}
.cv-meta-compact li {
  font-size: .82rem;
  margin-bottom: .25rem !important;
  color: var(--cv-sidebar-muted);
}

/* Research-interest chips: long phrases get their own line, short ones
   may share a line. inline-block + max-width:100% guarantees they never
   overflow the sidebar (which would be clipped by .cv-page's overflow). */
.cv-tags {
  display: block;
  margin-bottom: .4rem;
  line-height: 1.7;
}
.cv-tags span {
  display: inline-block;
  max-width: 100%;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--cv-sidebar-border);
  color: var(--cv-sidebar-text);
  padding: .22rem .6rem;
  margin: 0 .25rem .3rem 0;
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

/* ---------- CONTENT ---------- */

.cv-content {
  padding: 2.4rem 2.6rem 3rem 3.2rem;   /* extra left padding away from sidebar */
  color: #2d3748;
  background: #fff;
  min-width: 0;
  border-left: 1px solid var(--cv-content-rule); /* subtle visual gutter */
}

.cv-headline {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--cv-content-strong);
  margin: 0 0 .25rem;
  border: none;
  padding: 0;
}
.cv-tagline {
  color: #5c6772;
  font-size: 1rem;
  margin: 0 0 1rem;
  padding-bottom: 0;
}

/* Action row (Download PDF + last-updated stamp) */
.cv-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 0 0 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 2px solid var(--cv-content-rule);
}
.cv-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .95rem;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.cv-btn-primary {
  background: var(--cv-content-accent);
  color: #fff;
  border-color: var(--cv-content-accent);
}
.cv-btn-primary:hover {
  background: var(--cv-content-strong);
  border-color: var(--cv-content-strong);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.cv-last-updated {
  font-size: .82rem;
  color: var(--cv-sidebar-muted, #6c757d);
  background: #f7f3ea;
  padding: .3rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--cv-content-rule);
}

/* Citation metrics row */
.cv-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .8rem;
  margin: 0 0 1.8rem;
  padding: 1rem 1.1rem 1.1rem;
  background: linear-gradient(180deg, #f7f3ea, #faf7f0);
  border: 1px solid var(--cv-content-rule);
  border-radius: 8px;
  position: relative;
}
.cv-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .15rem .4rem;
}
.cv-metric-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--cv-content-accent);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cv-metric-label {
  font-size: .78rem;
  color: #5c6772;
  margin-top: .2rem;
  line-height: 1.3;
}
.cv-metric-label small {
  display: block;
  color: var(--cv-sidebar-muted, #888);
  font-size: .68rem;
  margin-top: .15rem;
  letter-spacing: .02em;
}
.cv-metrics-foot {
  grid-column: 1 / -1;
  margin: .35rem 0 0;
  font-size: .76rem;
  color: var(--cv-sidebar-muted, #888);
  border-top: 1px dashed var(--cv-content-rule);
  padding-top: .55rem;
  text-align: center;
}
.cv-metrics-foot a { color: var(--cv-content-accent); }

.cv-content h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cv-content-strong);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 2.2rem 0 .9rem;
  padding-bottom: .45rem;
  border-bottom: 2px solid var(--cv-content-accent);
}
.cv-content h2:first-of-type { margin-top: .8rem; }

.cv-content h3 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--cv-content-accent);
  margin: 1.6rem 0 .7rem;
  padding-bottom: .25rem;
  border-bottom: 1px dashed var(--cv-content-rule);
  letter-spacing: .01em;
}

/* Timeline-style two-column tables (year | description).
   Pandoc turns the first row of a pipe table into THEAD — we style THEAD
   the same as TBODY rows so the first item still shows as content. */
.cv-timeline table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  margin: .25rem 0 .5rem;
  table-layout: auto;       /* let our th/td widths win, not pandoc's colgroup */
}
/* Neutralise the 50/50 colgroup widths Pandoc emits for pipe tables */
.cv-timeline colgroup col { width: auto !important; }
.cv-timeline thead, .cv-timeline tbody { background: transparent; }
.cv-timeline tr { border-bottom: 1px solid var(--cv-content-rule); }
.cv-timeline tbody tr:last-child,
.cv-timeline thead tr:last-child { border-bottom: 1px solid var(--cv-content-rule); }
.cv-timeline tr:last-child { border-bottom: none; }
.cv-timeline th,
.cv-timeline td {
  padding: .65rem .8rem .65rem 0;
  vertical-align: top;
  line-height: 1.5;
  text-align: left;
  font-weight: normal;
  background: transparent;
  border: none;
}
.cv-timeline th:first-child,
.cv-timeline td:first-child {
  width: 150px;
  white-space: nowrap;
  color: var(--cv-content-accent);
  font-weight: 600;
  padding-right: 1.2rem;
}
.cv-timeline th:nth-child(2),
.cv-timeline td:nth-child(2) { color: #2d3748; width: auto; }

/* Publication blocks — hanging indent kept INSIDE the paragraph box
   (use margin-left for the box, text-indent negative for first line).
   We also clamp text-indent to .9rem so the badge/strong author doesn't
   bleed visually toward the dark sidebar. */
.cv-pubs {
  padding-left: 1.4rem;            /* push the whole block right */
}
.cv-pubs p {
  font-size: .92rem;
  line-height: 1.6;
  margin: 0 0 .85rem;
  padding-left: 1.4rem;
  text-indent: -1.4rem;
}
.cv-pubs p strong { color: var(--cv-content-strong); }

.cv-pub-key {
  display: inline-block;
  background: var(--cv-pub-key);
  color: #fff;
  padding: .05rem .42rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: .82rem;
  margin-right: .35rem;
  vertical-align: baseline;
}

/* Featured top-3 papers — break out of the surrounding hanging-indent so the
   red badge can't be displaced left into the sidebar. Adds a subtle tint
   and accent rule that visually emphasises the entry. */
.cv-pub-featured {
  background: linear-gradient(to right, rgba(181,57,76,.07), rgba(181,57,76,0));
  border-left: 3px solid var(--cv-pub-key);
  border-radius: 0 4px 4px 0;
  padding: .5rem .8rem .5rem .7rem;
  margin: .35rem 0 .85rem -.4rem;   /* nudge in so it visually aligns */
}
.cv-pub-featured p {
  padding-left: 0;
  text-indent: 0;
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
}

.cv-pubs-legend {
  font-size: .82rem;
  color: #5c6772;
  background: #f7f3ea;
  border-left: 3px solid var(--cv-pub-key);
  padding: .55rem .8rem;
  border-radius: 4px;
  margin: .6rem 0 1.2rem;
}
.cv-pub-flag {
  background: var(--cv-pub-key);
  color: #fff;
  padding: 0 .35rem;
  border-radius: 3px;
  font-size: .78rem;
  font-weight: 600;
}

.cv-callout {
  font-size: .9rem;
  background: #f7f3ea;
  border: 1px solid var(--cv-content-rule);
  border-radius: 6px;
  padding: .9rem 1.1rem;
  line-height: 1.55;
  color: #3a4754;
}
.cv-callout p { margin: 0 0 .6rem; }
.cv-callout p:last-child { margin: 0; }

.cv-content ul {
  padding-left: 1.2rem;
  margin: .4rem 0 1rem;
}
.cv-content ul li { margin-bottom: .55rem; line-height: 1.55; font-size: .94rem; }
.cv-content ul li strong { color: var(--cv-content-strong); }

/* ---------- Dark mode ----------
   Quarto's theme switcher (cosmo↔darkly) toggles [data-bs-theme] on
   <html>. We re-paint the CV palette to match. The sidebar was already
   dark, so we keep it almost as-is and dim the page chrome around it. */
[data-bs-theme="dark"] {
  --cv-sidebar-bg: #14232a;
  --cv-sidebar-bg-soft: #1a2c34;
  --cv-sidebar-text: #e3ebe8;
  --cv-sidebar-muted: #93a1a0;
  --cv-sidebar-accent: #7fc5d6;
  --cv-sidebar-border: rgba(255,255,255,.08);
  --cv-content-rule: #2d3a42;
  --cv-content-strong: #e3ebe8;
  --cv-content-accent: #7fc5d6;
  --cv-pub-key: #d97584;
}
[data-bs-theme="dark"] .cv-page {
  background: #1c272d;
  border-color: var(--cv-content-rule);
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
}
[data-bs-theme="dark"] .cv-content {
  background: #1c272d;
  color: #d6dee0;
  border-left-color: var(--cv-content-rule);
}
[data-bs-theme="dark"] .cv-content h2,
[data-bs-theme="dark"] .cv-headline {
  color: var(--cv-content-strong);
  border-bottom-color: var(--cv-content-accent);
}
[data-bs-theme="dark"] .cv-content h3 {
  color: var(--cv-content-accent);
  border-bottom-color: var(--cv-content-rule);
}
[data-bs-theme="dark"] .cv-tagline,
[data-bs-theme="dark"] .cv-content ul li,
[data-bs-theme="dark"] .cv-pubs p,
[data-bs-theme="dark"] .cv-timeline td,
[data-bs-theme="dark"] .cv-timeline th { color: #cfd6d8; }
[data-bs-theme="dark"] .cv-timeline tr { border-bottom-color: var(--cv-content-rule); }
[data-bs-theme="dark"] .cv-timeline td:first-child,
[data-bs-theme="dark"] .cv-timeline th:first-child { color: var(--cv-content-accent); }
[data-bs-theme="dark"] .cv-content a { color: var(--cv-content-accent); }
[data-bs-theme="dark"] .cv-content a:hover { color: #b4dde7; }
[data-bs-theme="dark"] .cv-content strong,
[data-bs-theme="dark"] .cv-pubs p strong { color: #f0f6f6; }
[data-bs-theme="dark"] .cv-callout,
[data-bs-theme="dark"] .cv-pubs-legend,
[data-bs-theme="dark"] .cv-last-updated,
[data-bs-theme="dark"] .cv-metrics {
  background: #142128;
  border-color: var(--cv-content-rule);
  color: #b9c4c6;
}
[data-bs-theme="dark"] .cv-metric-value { color: var(--cv-content-accent); }
[data-bs-theme="dark"] .cv-metric-label,
[data-bs-theme="dark"] .cv-metrics-foot { color: #93a1a0; }
[data-bs-theme="dark"] .cv-pub-featured {
  background: linear-gradient(to right, rgba(217,117,132,.10), rgba(217,117,132,0));
}
[data-bs-theme="dark"] .cv-btn-primary {
  background: var(--cv-content-accent);
  color: #14232a;
  border-color: var(--cv-content-accent);
}
[data-bs-theme="dark"] .cv-btn-primary:hover {
  background: #b4dde7;
  border-color: #b4dde7;
  color: #14232a;
}

/* ---------- Print ---------- */
@media print {
  @page { size: A4; margin: 12mm 9mm; }
  .navbar, .nav-footer, footer, #quarto-header { display: none !important; }
  body { background: #fff !important; }
  .cv-page {
    box-shadow: none;
    border: none;
    margin: 0;
    border-radius: 0;
    grid-template-columns: 250px 1fr;
  }
  .cv-sidebar {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 1.4rem 1rem 1.6rem;
    font-size: .82rem;
  }
  .cv-photo { width: 130px; height: 130px; margin-bottom: .7rem; }
  .cv-name { font-size: 1.25rem; }
  .cv-role { font-size: .8rem; margin-bottom: 1rem; }
  .cv-sb-title { font-size: .7rem; margin: 1rem 0 .35rem; padding-bottom: .25rem; }
  .cv-sidebar ul.cv-contact li,
  .cv-sidebar ul.cv-meta li { margin-bottom: .25rem; font-size: .8rem; }
  .cv-tags { line-height: 1.5; }
  .cv-tags span { font-size: .72rem; padding: .15rem .45rem; margin: 0 .2rem .22rem 0; }

  .cv-content {
    padding: 1.4rem 1.5rem 1.5rem 1.7rem;
    border-left: 1px solid #e3dccd;
  }
  .cv-headline { font-size: 1.55rem; margin-bottom: .15rem; }
  .cv-tagline { font-size: .85rem; padding-bottom: .6rem; margin-bottom: 1rem; }
  .cv-content h2 {
    font-size: 1rem;
    margin: 1rem 0 .5rem;
    padding-bottom: .3rem;
  }
  .cv-content h3 { font-size: .9rem; margin: .9rem 0 .4rem; }

  .cv-timeline th, .cv-timeline td {
    padding: .35rem .6rem .35rem 0;
    font-size: .82rem;
    line-height: 1.4;
  }
  .cv-timeline th:first-child, .cv-timeline td:first-child {
    width: 110px;
    padding-right: .9rem;
    font-size: .78rem;
  }
  .cv-pubs { padding-left: 1rem; }
  .cv-pubs p {
    font-size: .8rem;
    line-height: 1.42;
    margin-bottom: .42rem;
    padding-left: 1.2rem;
    text-indent: -1.2rem;
  }
  .cv-pub-key { font-size: .72rem; padding: 0 .3rem; }
  .cv-pub-featured { padding: .35rem .55rem; margin: .2rem 0 .55rem -.25rem; }
  .cv-pub-featured p { font-size: .8rem; line-height: 1.42; padding-left: 0; text-indent: 0; }
  .cv-pubs-legend { font-size: .72rem; padding: .35rem .6rem; margin-bottom: .6rem; }
  .cv-callout { font-size: .78rem; padding: .55rem .7rem; line-height: 1.42; }
  .cv-content ul li { font-size: .82rem; line-height: 1.42; margin-bottom: .35rem; }

  h2, h3 { break-after: avoid; page-break-after: avoid; }
  .cv-pubs p, .cv-timeline tr { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
  .cv-page {
    grid-template-columns: 1fr;
    margin: 1rem .6rem 1.5rem;
  }
  .cv-sidebar { padding: 1.6rem 1.2rem 1.8rem; }
  .cv-photo { width: 140px; height: 140px; }
  .cv-content {
    padding: 1.5rem 1.2rem 2rem;
    border-left: none;
    border-top: 1px solid var(--cv-content-rule);
  }
  .cv-headline { font-size: 1.7rem; }
  .cv-timeline th:first-child,
  .cv-timeline td:first-child { width: 110px; padding-right: .7rem; font-size: .85rem; }
  .cv-timeline th, .cv-timeline td { font-size: .88rem; padding: .55rem .4rem .55rem 0; }
  .cv-pubs { padding-left: .6rem; }
  .cv-pubs p { padding-left: 1.1rem; text-indent: -1.1rem; }
}