/* =======================
   NORD (single palette)
   ======================= */
:root{
  /* Nord tones */
  --bg:#111827;           /* page bg */
  --fg:#e5e9f2;           /* body text */
  --muted:#b8c1d1;        /* secondary text */
  --link:#88c0d0;         /* theme link */
  --accent:#5e81ac;       /* subtle accents */
  --card:#1b2432;         /* cards/panels */
  --code:#161d2a;         /* code blocks */
  --border:#314055;       /* hairlines */
  --shadow:0 10px 30px rgba(0,0,0,.35);

  --maxw: 920px;          /* comfortable line length */
  --base-font: 18px;      /* larger body text */
  --lh: 1.8;              /* airy line height */

  /* Layout */
  --ms-sidebar-w: 420px;  /* wide enough for full name */

  /* Tooltip colors (opaque) */
  --tooltip-bg: #22324b;     /* slightly lighter than --card */
  --tooltip-border: #4a618b; /* subtle border */
}

/* ===== Base ===== */
*{ box-sizing: border-box }
html,body{
  margin:0; padding:0;
  color:var(--fg); background:var(--bg);
  font: var(--base-font)/var(--lh) system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--link); text-decoration:none }
a:hover{ text-decoration:underline }
.small{ font-size:.95rem; color:var(--muted) }
.spacer{ flex:1 }

/* Headings */
h1{ font-size: clamp(2rem, 3.2vw + 1rem, 2.6rem); line-height:1.25; margin:.2rem 0 .4rem; font-weight:770; letter-spacing:.2px }
h2{ font-size: 1.6rem; line-height:1.35; margin:1.6rem 0 .9rem; font-weight:720 }
h3{ font-size: 1.25rem; line-height:1.3; margin:1.2rem 0 .6rem; font-weight:680 }

/* ===== Header / Top Nav ===== */
header{
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:30;
  background:var(--bg);
  backdrop-filter:saturate(120%) blur(6px);
}
.nav{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:20px;
  padding:14px 20px;
}
.nav .menu a{
  margin-left:16px; color:var(--fg);
  padding:6px 8px; border-radius:8px;
}
.nav .menu a:hover{
  background:color-mix(in srgb, var(--card) 60%, transparent);
  text-decoration:none;
}

/* ===== Sidebar (same bg; thin divider) ===== */
.ms-sidebar{
  position: fixed; inset: 0 auto 0 0;
  width: var(--ms-sidebar-w);
  background: transparent;
  color: var(--fg);
  padding: 22px 20px;
  overflow-y: auto;
  z-index: 40;
  border-right: 1px solid var(--border);
}
.ms-page{ margin-left: var(--ms-sidebar-w); min-height:100dvh; display:flex; flex-direction:column }

/* Sidebar top block */
.ms-avatar{
  width: 75%;
  max-width: 260px;
  aspect-ratio: 1/1;
  border-radius: 12px;
  object-fit: cover;
  display:block;
  margin: 0 auto 14px auto;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.ms-name{
  font-size: 26px;
  line-height: 1.15;
  margin: 10px 0 6px;
  font-weight: 800;
  text-align: center;
  letter-spacing:.2px;
  white-space: nowrap !important;  /* keep in one line */
  word-break: keep-all;
}
.ms-desig{
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 14px;
  text-align: center;
}

/* Research Areas: centered unnumbered list */
.ms-areas{
  list-style:none; padding:0; margin: 8px 0 0;
  display:block;
}
.ms-areas li{
  margin: 6px 0;
  padding: 0 10px;
  font-size: 18px;
  line-height: 1.8;
  color: var(--fg);
  text-align:center;
  font-style: italic;      /* remove if you don't want italics */
}

/* thin separator under Research Areas */
.ms-sep{
  margin: 16px 0 14px;
  border: 0;
  border-top: 1px solid var(--border);
}

/* Three-line packed links (editable via sidebar-links.md) */
.ms-links-grid{
  text-align: center;
  line-height: 2.0;
}
.ms-links-grid a{
  display: inline-block;
  margin: 0 8px 2px;
  font-size: 18px;
  text-decoration: none;
}
.ms-links-grid a:hover{ text-decoration: underline; }

/* brand tints by destination (keeps Nord base, just tints the text) */
.ms-links-grid a[href^="mailto:"]{ color: var(--link); font-weight: 600; }         /* Email/Gmail */
.ms-links-grid a[href*="linkedin.com"]{ color:#0A66C2; font-weight: 600; }         /* LinkedIn */
.ms-links-grid a[href*="scholar.google.com"]{ color:#4285F4; font-weight: 600; }   /* Google Scholar */
.ms-links-grid a[href*="inspirehep.net"]{ color:#F47B20; font-weight: 600; }       /* InspireHEP */
.ms-links-grid a[href*="orcid.org"]{ color:#A6CE39; font-weight: 700; }            /* ORCID */
.ms-links-grid a[href*="scopus.com"]{ color:#FF6C00; font-weight: 600; }           /* Scopus */
.ms-links-grid a[href*="github.com"]{ color:#9ca3af; font-weight: 600; }           /* GitHub */

/* ===== Hero banner (in main column) ===== */
.ms-hero{
  display:block;
  height:180px;
  background-size:cover;
  background-position:center;
  position:relative;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin: 8px 0 18px;
}
.ms-hero__overlay{ position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.25)); }

/* ===== Main content ===== */
main{ max-width:var(--maxw); margin:24px auto; padding:0 20px }
.grid{ display:grid; gap:18px }
.grid-2{ grid-template-columns:1fr }
@media (min-width:900px){ .grid-2{ grid-template-columns:1.1fr .9fr } }
.card{ background:var(--card); border:1px solid var(--border); padding:20px; border-radius:18px; box-shadow:var(--shadow) }

/* Legacy hero/profile classes (kept for compat with old index.md) */
.hero{ display:grid; gap:8px; margin:6px 0 20px 0 }
.profile{ display:flex; gap:18px; align-items:center; flex-wrap:wrap }
.profile img{ width:120px; height:120px; object-fit:cover; border-radius:50%; border:2px solid var(--border); box-shadow:var(--shadow) }
.profile .who{ display:grid; gap:6px }
.name{ font-size:clamp(2.2rem, 3.2vw + 1rem, 3rem); font-weight:700; line-height:1.15; margin:0 0 4px 0 }
.role{ font-size:1.05rem; color:var(--muted); margin:2px 0 10px 0 }

/* Hide main profile card to avoid duplication (sidebar is the canonical one) */
main .profile.card{ display:none !important; }

/* Lists, tables, code, footer */
ul{ padding-left:1.1rem; margin-top:.25rem }
table{ width:100%; border-collapse:collapse }
td,th{ padding:10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top }
code,kbd{ background:var(--code); padding:.1rem .35rem; border-radius:6px; border:1px solid var(--border) }
pre{ background:var(--code); padding:12px; border-radius:8px; overflow:auto; border:1px solid var(--border) }
footer{ max-width:var(--maxw); margin:40px auto 60px; padding:0 20px; color:var(--muted); font-size:.95rem }

/* =======================
   Publications (numbered, separators, styled text, opaque tooltip)
   ======================= */

/* Numbered list and spacing */
.pub-list{
  list-style: decimal;
  padding-left: 1.6rem;
  margin-top: .5rem;
  overflow: visible;                 /* tooltips can escape */
}

/* Thin separator per entry */
.pub-list li{
  margin: 0;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
}

/* Entry text styled like sidebar research areas */
.pub-list a.pub{
  display: block;
  font-size: 18px;
  line-height: 1.8;
  font-style: italic;                /* remove if you prefer non-italic */
  color: var(--fg);
  text-decoration: none;
  border-radius: 10px;
  padding: 2px 0;
}
.pub-list a.pub:hover{ text-decoration: underline; }

/* Optional: gentle hover row tint */
.pub-list li:hover{
  background: color-mix(in oklab, var(--accent) 10%, var(--card) 90%);
}

/* Tooltip anchor + stacking */
.pub{ position: relative; z-index: 1; }
.panel, .panels { overflow: visible; }     /* no clipping */

/* Tooltip: narrower card with distinct, OPAQUE bg */
.pub[data-summary]:hover::after,
.pub[data-summary]:focus-visible::after{
  content: attr(data-summary);
  position: absolute;
  left: 0.5rem;                      /* slight inset from the number */
  top: 100%;
  margin-top: .5rem;

  width: min(28rem, 90vw);           /* narrower than page */
  background: var(--tooltip-bg);     /* FULLY OPAQUE background */
  color: var(--fg);
  border: 1px solid var(--tooltip-border);
  padding: .7rem .9rem;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  line-height: 1.45;
  white-space: normal;
  z-index: 10000;                    /* above neighbors */
  opacity: 1; mix-blend-mode: normal; backdrop-filter: none;
}

/* Little arrow for the tooltip */
.pub[data-summary]:hover::before,
.pub[data-summary]:focus-visible::before{
  content: "";
  position: absolute;
  left: 1.2rem;
  top: calc(100% + 2px);
  border: 7px solid transparent;
  border-bottom-color: var(--tooltip-border); 
  z-index: 10001;
}

/* Tabs (radio-driven) */
.pub-tabs input[type="radio"]{
  position:absolute; opacity:0; pointer-events:none;
}
.pub-tabs .tab{
  display:inline-block; padding:10px 14px; margin:0 6px 6px 0;
  border:1px solid var(--border); border-bottom:none; border-radius:12px 12px 0 0;
  background: var(--card); color: var(--fg); cursor:pointer; user-select:none;
}
.pub-tabs .tab:hover{ text-decoration:none; transform: translateY(-1px); }
.pub-tabs .panels{
  border:1px solid var(--border); border-radius:0 12px 12px 12px;
  background: var(--card); padding:16px 16px 6px; overflow: visible;
}
.pub-tabs .panel{ display:none; }
#tab-all:checked ~ .panels [data-tab="all"]{ display:block; }
#tab-cat:checked ~ .panels [data-tab="cat"]{ display:block; }
#tab-all:checked + label.tab,
#tab-cat:checked + label.tab{
  background: color-mix(in oklab, var(--accent) 16%, var(--card) 84%);
  border-color: var(--border);
  font-weight: 600;
}

/* tidy the three Markdown paragraphs rendered inside the grid */
.ms-links-grid p{ margin: 8px 0; }

/* =======================
   Mobile behavior (≤820px)
   - Home (.is-home): sidebar shows first (stacked), then hero, then content
   - Inner (.is-inner): sidebar hidden
   Desktop (≥821px): default fixed sidebar + right column
   ======================= */
@media (max-width: 820px){
  /* Right column shouldn’t reserve sidebar space on mobile */
  .ms-page{ margin-left: 0 !important; }

  /* INNER PAGES: hide sidebar only on small screens */
  html.is-inner .ms-sidebar{
    display: none !important;
  }

  /* HOME PAGE: show sidebar as a normal block at the top */
  html.is-home .ms-sidebar{
    position: static !important;      /* no fixed position */
    width: auto !important;
    border-right: none !important;
    padding: 16px 20px !important;
    transform: none !important;
    display: block !important;
    background: var(--bg);
    z-index: auto !important;
  }

  /* Put a subtle divider under the sidebar on home */
  html.is-home .ms-sidebar::after{
    content: "";
    display: block;
    border-top: 1px solid var(--border);
    margin: 12px 0 0;
  }

  /* Slightly shorter hero on phones */
  .ms-hero{ height:160px; }
}


/* === Final tooltip stacking fix === */

/* 1) Make the panels their own stacking context */
.pub-tabs .panels{
  position: relative;
  isolation: isolate;    /* new stacking context so nothing outside can overlap */
  overflow: visible;
}

/* 2) Rows never rise above the tooltip */
.pub-list li{
  position: relative;
  z-index: 0 !important; /* keep rows flat */
}

/* 3) The link sits above its row; tooltip sits above everything */
.pub{
  position: relative;
  z-index: 2;
}

/* 4) Tooltip: sky-high z-index + ignore pointer so hover stays on the link */
.pub[data-summary]:hover::after,
.pub[data-summary]:focus-visible::after{
  z-index: 2147483647;       /* effectively top within this context */
  pointer-events: none;      /* mouse can't "enter" the tooltip box */
}

.pub[data-summary]:hover::before,
.pub[data-summary]:focus-visible::before{
  z-index: 2147483647;
  pointer-events: none;
}

/* (Optional) If you previously elevated li on hover, neutralize it */
.pub-list li:hover{ z-index: 0 !important; }

/* === No-overlap tooltip: render ABOVE the entry and make room under the row === */

/* Put the tooltip ABOVE instead of below */
.pub[data-summary]:hover::after,
.pub[data-summary]:focus-visible::after{
  top: auto !important;
  bottom: calc(100% + .5rem) !important;   /* show above */
}

/* Arrow now points upward */
.pub[data-summary]:hover::before,
.pub[data-summary]:focus-visible::before{
  top: auto !important;
  bottom: calc(100% + 2px) !important;
  border-bottom-color: transparent !important;
  border-top-color: var(--tooltip-border) !important;
}

/* Keep it on top and non-interactive (so hover doesn't transfer) */
.pub[data-summary]:hover::after,
.pub[data-summary]:focus-visible::after,
.pub[data-summary]:hover::before,
.pub[data-summary]:focus-visible::before{
  z-index: 2147483647 !important;
  pointer-events: none !important;
}

/* Progressive enhancement: add padding under the hovered row so nothing crowds it */
@supports(selector(:has(*))){
  .pub-list li:has(.pub:hover){
    padding-bottom: 2.2rem;                 /* room for the tooltip above */
  }
}

/* Fallback for older browsers (no :has): add a tiny gap on hover anyway */
.pub-list li:hover{
  padding-bottom: 1.2rem;
}

/* === Tile-style top nav with active highlight === */
.nav .menu{
  display:flex; gap:10px; flex-wrap:wrap;
}

.nav .menu a{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--card);
  color: var(--fg);
  text-decoration:none;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.nav .menu a:hover{
  transform: translateY(-1px);
  text-decoration:none;
  background: color-mix(in oklab, var(--card) 85%, var(--accent) 15%);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

.nav .menu a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 40%, transparent), 0 6px 18px rgba(0,0,0,.22);
}

/* active (current page) */
.nav .menu a.active{
  background: color-mix(in oklab, var(--card) 75%, var(--accent) 25%);
  border-color: var(--accent);
  font-weight: 650;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}