.hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 60vh;
  width: 100vw;           /* Full viewport width */
  margin-left: calc(-50vw + 50%); /* Center it relative to the viewport */
  text-align: center;
  color: #000;
  background: url('../img/bluesky.jpg') no-repeat center center;
  background-size: cover;
  overflow: hidden;       /* In case of any overflow issues */
}

/* Project Card Container */
.project-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 30px;
}

/* Hover Effect: Slight move-up and enhanced shadow */
.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Make images responsive and block-level */
.project-card img {
  width: 90%;
  height: 90%; /* adjust to your preferred height */
  object-fit: cover; /* crops the image if necessary to fill the area */
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Container for the Title & Description */
.project-details {
  padding: 15px;
}

/* Title Styling */
.project-details h3 {
  margin: 0 0 10px;
  font-size: 1.25em;
}

/* Description Styling */
.project-details p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* Faculty Header */
.faculty-header {
  padding: 20px 0;
}

/* Faculty Card Container: similar to project-card */
.faculty-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 20px;
  text-align: center;
}

.faculty-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Ensure all images are forced to the same size */
.faculty-card img {
  width: 100%;
  height: 200px; /* set your desired fixed height */
  object-fit: cover;
  display: block;
}

/* Faculty Details Styling */
.faculty-details {
  padding: 10px;
}

.faculty-details h3 {
  margin: 0 0 8px;
  font-size: 1.1em;
}

.faculty-details p {
  margin: 0;
  font-size: 13px;
  color: #666;
}

/* Feature Icons Section */
.feature-icons {
  padding: 20px 0;
}

/* Circular Icon Style for the Feature Icons */
.circle-icon {
  width: 100px;        /* Set the desired icon width */
  height: 100px;       /* Set the desired icon height */
  object-fit: cover;   /* Ensures the image fills the dimensions without distortion */
  border-radius: 50%;  /* Rounds the image to create a circle */
  margin-bottom: 15px;
}

/* Optionally style the headings and paragraphs inside the feature icons */
.feature-icons h4 {
  font-size: 1.1em;
  margin-bottom: 8px;
}

.feature-icons p {
  font-size: 13px;
  color: #666;
}


.feature-icons {
  background-color: #f8f9fa;            /* light gray */
  width: 100vw;                         /* span full viewport */
  position: relative;
  left: 50%;                            /* shift right by half its own width */
  margin-left: -50vw;                   /* pull it back to align with viewport */
  margin-right: -50vw;
  padding: 3rem 0;                      /* vertical padding */
}

.get-involved {
  background-color: #f8f9fa;            /* light gray */
  width: 100vw;                         /* span full viewport */
  position: relative;
  left: 50%;                            /* shift right by half its own width */
  margin-left: -50vw;                   /* pull it back to align with viewport */
  margin-right: -50vw;
  padding: 3rem 0;                      /* vertical padding */
}



/* ========================= */
/* Unified sitewide styles   */
/* ========================= */

/* Global layout */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }

/* CAB hue background utility for full pages */
.bg-hue {
  /* subtle diagonal hue wash similar to hero/triad visuals */
  background: linear-gradient(135deg, rgba(190,227,248,0.45) 0%, rgba(254,252,191,0.35) 45%, rgba(255,255,255,0.9) 100%);
}

/* Footer */
.footer { margin-top: auto; background: #001f3f; color: #fff; padding: 20px 0; }
main.flex-fill { flex: 1 0 auto; display: flex; flex-direction: column; }
.footer-icon { height: 32px; }
.social-icon { height: 32px; }

/* Navbar helpers */
.navbar-nav .nav-link { color: #0c2743; }
.navbar-nav .nav-link.active { font-weight: 800; border-bottom: 3px solid #007bff; padding-bottom: 5px; }
.nav-lg { font-size: 1.25rem; }
.logo-img { max-height: 70px; }
.navbar-spacer { padding-top: 90px; }

/* Subtle transparent, blurred ("warped") navbar */
.navbar.fixed-top.navbar-light.bg-light {
  background-color: rgba(255, 255, 255, 0.62) !important; /* light translucency */
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 8px 24px rgba(30, 70, 120, 0.08);
}

/* Nicer navbar links: subtle pill hover, elevated active */
.navbar-light .navbar-nav .nav-link {
  border-radius: 14px;
  padding: 0.35rem 0.7rem;
  transition: color .12s ease, background .12s ease, box-shadow .12s ease;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: #173a63;
  background: rgba(255,255,255,0.72);
  box-shadow: 0 2px 10px rgba(120,170,220,0.15);
  text-decoration: none;
}
.navbar-light .navbar-nav .nav-link.active {
  color: #223;
  background: linear-gradient(90deg,#bee3f8 60%,#fefcbf 100%);
  box-shadow: 0 3px 12px rgba(120,170,220,0.22);
  border-bottom: 0; /* override underline when elevated */
}

/* Space nav items a touch */
.navbar-nav > li.nav-item { margin-right: 0.25rem; }
.navbar-nav > li.nav-item:last-child { margin-right: 0; }

/* Brand interaction */
.navbar .navbar-brand .logo-img { transition: transform .12s ease, filter .12s ease; }
.navbar .navbar-brand:hover .logo-img { transform: translateY(-1px) scale(1.01); filter: saturate(110%); }

/* Dropdown polish */
.navbar .dropdown-menu {
  border: none;
  border-radius: 16px;
  padding: 0.5rem;
  box-shadow: 0 10px 30px rgba(30,70,120,0.15);
  background: rgba(255,255,255,0.97);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}
.navbar .dropdown-item {
  border-radius: 10px;
  font-weight: 600;
  color: #243b55;
  padding: 0.55rem 0.75rem;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: linear-gradient(90deg,#dbeafe 0%, #fefcbf 100%);
  color: #223;
}
.navbar .dropdown-item.active, .navbar .dropdown-item.active:focus, .navbar .dropdown-item.active:hover {
  background: linear-gradient(90deg,#bee3f8 60%,#fefcbf 100%);
  color: #223;
}

/* Mobile collapse background so links stay readable over hue */
.navbar .navbar-collapse {
  background: rgba(255,255,255,0.85);
  border-radius: 18px;
  padding: 0.5rem;
}

/* Toggler aesthetics */
.navbar-light .navbar-toggler { border-color: rgba(0,0,0,0.12); border-radius: 10px; }
.navbar-light .navbar-toggler:focus { box-shadow: 0 0 0 0.15rem rgba(120,170,220,0.35); }

/* Navbar auth buttons (Sign In/Up, My Profile, Log Out) */
.navbar .nav-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.95em;
  border-radius: 999px;
  border: 1px solid rgba(120, 170, 220, 0.25);
  font-weight: 700;
  line-height: 1.2;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
  text-decoration: none !important;
  margin-left: 0.5rem;
}
.navbar .nav-auth-btn:hover { transform: translateY(-1px); }
.navbar .nav-auth-btn:active { transform: translateY(0); }

.navbar .nav-auth-btn--ghost {
  background: rgba(255,255,255,0.55);
  color: #1a436d !important;
  box-shadow: 0 2px 8px rgba(120, 170, 220, 0.12);
}
.navbar .nav-auth-btn--ghost:hover {
  background: rgba(255,255,255,0.75);
  box-shadow: 0 3px 10px rgba(120, 170, 220, 0.16);
}

.navbar .nav-auth-btn--primary {
  background: linear-gradient(100deg, #bee3f8, #fefcbf);
  color: #223 !important;
  box-shadow: 0 2px 9px rgba(120, 170, 220, 0.16);
}
.navbar .nav-auth-btn--primary:hover {
  background: linear-gradient(100deg, #9fd4f3, #ffe997);
  box-shadow: 0 4px 12px rgba(120, 170, 220, 0.22);
}

/* Flash alerts */
.flash-bar { top: 80px; z-index: 1055; }
.flash-inner { max-width: 600px; }

/* "Liquid glass" card effect */
.glass-panel {
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 8px 28px rgba(30,70,120,0.12);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}

/* Bibliography list: subtle "pin" hover scale effect */
.bib-entry {
  transition: transform 120ms ease, box-shadow 140ms ease;
  transform-origin: center;
}
.bib-entry:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(30,70,120,0.14) !important;
}

/* Shared panels, badges, and pills */
.side-panel { background: #fff; border-radius: 30px; box-shadow: 0 6px 22px rgba(100,150,200,0.10); padding: 1.8em 1.5em 1.5em; margin-bottom: 1.5em; }
.panel-header { font-family: 'Montserrat','Roboto',sans-serif; font-size: 2em; font-weight: 800; color: #2b445d; margin-bottom: 0.3em; }
.ai-section-title { text-transform: uppercase; font-size: 0.95em; color: #26435e; font-weight: 600; margin-top: 1.2em; margin-bottom: 0.5em; }
.bubble-block { border-radius: 24px; padding: 1em; margin-bottom: 1.5em; box-shadow: 0 2px 14px rgba(90,150,200,0.07); }
.notice-gradient { background: linear-gradient(90deg,#e7f2fd 60%,#fcf7da 100%); }
.link-signin { color:#2a56a3; text-decoration: underline; }
.link-signup { color:#b88a00; text-decoration: underline; }
.connect-btn-ai { display: inline-flex; align-items: center; gap: 0.5em; border: none; border-radius: 22px; font-weight: 600; font-size: 1em; padding: 0.5em 1.9em; background: linear-gradient(100deg,#bee3f8,#fefcbf); color: #222; box-shadow: 0 2px 8px rgba(120,170,220,0.10); text-decoration: none; cursor: pointer; vertical-align: middle; }
.connect-btn-ai img { height: 3em; margin-right: 0.5em; vertical-align: middle; }
.connect-btn-ai.sm { padding: 0.3em 0.8em; font-size: 0.85em; }
.bubble-link { display: inline-block; margin: 0.2em 0.45em 0.2em 0; padding: 0.45em 1em; border-radius: 20px; background: linear-gradient(90deg,#dbebff,#fefcbf); color: #445; font-weight: 500; text-decoration: none; box-shadow: 0 2px 10px rgba(80,160,255,0.07); transition: background 0.17s, box-shadow 0.17s; }
.bubble-link:hover { box-shadow: 0 4px 14px rgba(80,160,255,0.15); }
.bubble-link.ellipsis { background: linear-gradient(90deg, #dbebff, #ecced1 100%); color: #000; font-weight: 700; letter-spacing: 0.09em; padding: 0.45em 1.1em; }

/* Ranges and small helpers */
.range-200 { width: 200px; vertical-align: middle; }
.range-220 { width: 220px; vertical-align: middle; }
.small-muted { font-size: 0.95em; }
.max-720 { max-width: 720px; margin: 0 auto; }

/* Projects page cards */
.project-card { display: flex; align-items: flex-start; gap: 1.5rem; padding: 1.6rem 1.2rem; cursor: pointer; transition: transform .15s, box-shadow .15s; background: #fff; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); position: relative; min-height: 225px; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.project-thumb { flex-shrink: 0; width: 120px; height: 120px; object-fit: cover; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.project-details { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.project-title { font-size: 1.3em; font-weight: 700; color: #2b445d; margin-bottom: 0.25em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; box-orient: vertical; }
.project-keywords-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.25em 0.5em; margin: 0.4em 0 0.8em 0; max-height: 5.6em; overflow: hidden; width: 100%; position: relative; }
.project-score-badge { background: #bee3f8; color: #26435e; font-weight: 600; padding: 0.3em 0.6em; border-radius: 20px; font-size: 0.93em; align-self: flex-start; margin-top: 0.5em; }

/* Preserve original keyword pill look on projects page */
.projects-page .project-keywords-bar .bubble-link {
  font-size: 0.97em;
  /* Show full text without truncation */
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Projects page: match original button sizing/flow */
.projects-page .connect-btn-ai { display: inline-block; padding: 0.5em 1.4em; }
.projects-page .connect-btn-ai img { height: 3em; margin-right: 0.5em; vertical-align: middle; }

/* Projects page: mirror original embedded styles */
.projects-page .side-panel { background:#fff; border-radius:30px; box-shadow:0 6px 22px rgba(100,150,200,0.10); padding:1.8em 1.5em 1.5em; margin-bottom:1.5em; }
.projects-page .panel-header { font-family:'Montserrat','Roboto',sans-serif; font-size:2em; font-weight:800; color:#2b445d; margin-bottom:0.3em; }
.projects-page .bubble-block { border-radius:24px; padding:1em; margin-bottom:1.5em; box-shadow:0 2px 14px rgba(90,150,200,0.07); }
.projects-page .project-card { display:flex; align-items:flex-start; gap:1.5rem; padding:1.6rem 1.2rem; cursor:pointer; transition: transform .15s, box-shadow .15s; background:#fff; border-radius:20px; box-shadow:0 4px 12px rgba(0,0,0,0.05); position:relative; min-height:225px; }
.projects-page .project-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.projects-page .project-thumb { flex-shrink:0; width:120px; height:120px; object-fit:cover; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.projects-page .project-details { flex-grow:1; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.projects-page .project-left { position: relative; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; }
.projects-page .project-title { font-size:1.3em; font-weight:700; color:#2b445d; margin-bottom:0.25em; display:-webkit-box; -webkit-line-clamp:3; line-clamp: 3; -webkit-box-orient:vertical; box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }
.projects-page .project-keywords-bar { display:flex; flex-wrap:wrap; align-items:flex-start; gap:0.25em 0.5em; margin:0.4em 0 0.8em 0; max-height:5.6em; overflow:hidden; width:100%; position:relative; }
.projects-page .bubble-link { display:inline-block; margin:0.2em 0.45em 0.2em 0; padding:0.45em 1em; border-radius:20px; background: linear-gradient(90deg,#dbebff,#fefcbf); color:#445; font-weight:500; text-decoration:none; box-shadow:0 2px 10px rgba(80,160,255,0.07); transition: background 0.17s; }
.projects-page .bubble-link:hover { box-shadow:0 4px 14px rgba(80,160,255,0.15); }
.projects-page .bubble-link.ellipsis { background: linear-gradient(90deg, #dbebff, #ecced1 100%); color:#000; font-weight:700; letter-spacing:0.09em; padding:0.45em 1.1em; }
.projects-page .project-score-badge { background:#bee3f8; color:#26435e; font-weight:600; padding:0.3em 0.6em; border-radius:20px; font-size:0.93em; align-self:flex-start; margin-top:0.5em; }

/* Ensure project action buttons are in one row at card bottom */
.projects-page .project-card { align-items: stretch; }
.projects-page .project-details { justify-content: space-between; }
.project-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;   /* center horizontally */
  flex-wrap: nowrap;         /* keep in one line */
  margin-top: auto;          /* push to bottom of tile */
  padding-top: 0.4rem;       /* breathing room above buttons */
  width: 100%;
  overflow-x: auto;          /* avoid overflow outside tile on narrow widths */
  -webkit-overflow-scrolling: touch;
}
.project-actions .connect-btn-ai { white-space: nowrap; flex: 0 1 auto; }
/* Support Bootstrap-like btn-sm class used in templates */
.connect-btn-ai.btn-sm { padding: 0.3em 0.8em; font-size: 0.9em; }

/* Faculty recommendations */
.faculty-card { height: 300px; overflow: hidden; position: relative; transition: transform .15s, box-shadow .15s; cursor: pointer; }
.faculty-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(80,160,255,0.15); }
.faculty-card-small { height: 280px; overflow: hidden; }
.faculty-card .panel-header { font-size: 1.25em; margin-bottom: 0.5em; }
.profile-corner-pic { position: absolute; top: 0.75rem; right: 0.75rem; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.interest-badges { margin-top: 1.25rem; }
.interest-badges .bubble-link { font-size: 0.78em; padding: 0.36em 0.7em; margin: 275px; }
/* Make faculty recommendation pills a little bigger */
.faculty-recs-page .interest-badges .bubble-link { font-size: 0.9em; padding: 0.48em 0.85em; margin: 2px; }
/* Faculty recs page: restore exact pill gradient */
.faculty-recs-page .bubble-link { background: linear-gradient(90deg,#dbeafe,#fefcbf); }
/* Redder style for '+x more' badges */
.bubble-link.more-badge { background: linear-gradient(90deg, #dbeafe, #ffe0e0); color: #90656b; font-weight: 700; }

/* Faculty recs page: mirror original embedded styles */
.faculty-recs-page .side-panel { background:#fff; border-radius:30px; box-shadow:0 6px 22px rgba(100,150,200,0.10); padding:1.8em 1.5em 1.5em; margin-bottom:1.5em; }
.faculty-recs-page .panel-header { font-family:'Montserrat','Roboto',sans-serif; font-size:2em; font-weight:800; color:#2b445d; margin-bottom:0.3em; }
.faculty-recs-page .ai-section-title { text-transform:uppercase; font-size:0.95em; color:#26435e; font-weight:600; margin-top:1.2em; margin-bottom:0.5em; }
.faculty-recs-page .connect-btn-ai { display:inline-flex; align-items:center; gap:0.5em; border:none; border-radius:22px; font-weight:600; font-size:1em; padding:0.5em 1.9em; background: linear-gradient(100deg,#bee3f8,#fefcbf); color:#222; box-shadow:0 2px 8px rgba(120,170,220,0.10); text-decoration:none; cursor:pointer; vertical-align:middle; }
.faculty-recs-page .connect-btn-ai img { height:3em; width:auto; display:block; }
.faculty-recs-page .bubble-block { border-radius:24px; padding:1em; margin-bottom:1.5em; box-shadow:0 2px 14px rgba(90,150,200,0.07); }

/* =============================== */
/* Researchers & Developers page   */
/* =============================== */
.researchers-page .researchers-hero { background: transparent; }
.contrib-grid {
  display: grid; grid-template-columns: 1fr; gap: 0.9rem;
}
@media (min-width: 576px) { .contrib-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .contrib-grid { grid-template-columns: 1fr 1fr 1fr; } }
.contrib-card {
  background: #fff; border: 1px solid rgba(120,170,220,0.18); border-radius: 18px; padding: 0.9rem 1rem; box-shadow: 0 6px 18px rgba(40,80,140,0.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.contrib-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(40,80,140,0.12); }
.contrib-term { font-weight: 800; color: #2b445d; font-size: 1.1rem; margin-bottom: 0.4rem; }
.contrib-people { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }
.name-pill { display: inline-block; padding: 0.35em 0.7em; border-radius: 999px; background: linear-gradient(90deg,#dbebff,#fefcbf); color: #324a62; font-weight: 600; box-shadow: 0 2px 10px rgba(80,160,255,0.08); }
.contrib-note { color: #5d6b7a; font-size: 0.92rem; }

/* Vertical timeline styling */
.contrib-timeline { position: relative; margin-left: 12px; }
.contrib-timeline:before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: linear-gradient(#b7dcff, #ffe98f); opacity: 0.85; }
.timeline-item { position: relative; display: flex; gap: 0.9rem; align-items: flex-start; margin: 0.6rem 0; }
.timeline-dot { position: relative; left: -2px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: #0ea5b7; box-shadow: 0 0 0 6px rgba(14,165,183,0.12); flex-shrink: 0; }
.timeline-card { flex: 1 1 auto; }

/* =============================== */
/* Collaborations: Big visual cards */
/* =============================== */
.collab-list { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 992px) {
  .collab-list { grid-template-columns: 1fr; }
}
.collab-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); /* allow shrink to avoid overflow */
  gap: 0;
  background: #fff;
  border: 1px solid rgba(120,170,220,0.2);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(40,80,140,0.10);
}
@media (max-width: 768px) {
  .collab-card { grid-template-columns: 1fr; }
}
.collab-visual {
  position: relative;
  background: radial-gradient(1200px 400px at -10% -20%, rgba(190,227,248,0.65) 0%, rgba(254,252,191,0.55) 55%, rgba(255,255,255,0.85) 100%);
  padding: 1.2rem;
  min-height: 360px;
}

/* Triad layout */
.triad-canvas { position: relative; width: 100%; height: 100%; }
.triad-lines { position: absolute; inset: 0; width: 100%; height: 100%; }

.triad-node {
  position: absolute;
  background: #07153a; /* deep navy */
  color: #fff;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  width: 40%;
}
.triad-course--left  { top: 4%;  left: 3%; }
.triad-course--right { top: 4%;  right: 3%; }
.triad-partner--bottom { bottom: 4%; left: 50%; transform: translateX(-50%); width: 44%; }

.triad-course-title { font-weight: 800; font-size: 1.15rem; line-height: 1.25; }
.triad-partner-label { font-weight: 800; font-size: 1.05rem; }
.triad-partner-name  { font-size: 0.95rem; }

.triad-center-title {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);
  background: #0ea5b7; color: #fff; border-radius: 10px; padding: 0.4rem 0.7rem;
  font-weight: 700; font-size: 0.95rem; box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  white-space: nowrap; max-width: 60%; text-overflow: ellipsis; overflow: hidden;
}

/* Lines color similar to screenshot */
.triad-lines line { stroke: #8b8f97; stroke-width: 3; vector-effect: non-scaling-stroke; }
.collab-details {
  padding: 1.4rem 1.4rem 1.6rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.8rem; justify-content: center;
  min-width: 0; /* allow text to wrap instead of forcing column wider */
}
.collab-keywords { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.keyword-chip {
  display: inline-block; padding: 0.35em 0.75em; border-radius: 999px;
  background: linear-gradient(90deg,#bde6fc,#fdf8b6);
  color: #284158; font-weight: 600; font-size: 0.92rem; box-shadow: 0 2px 10px rgba(30,70,120,0.08);
}
.collab-description {
  color: #3a4a60; font-size: 1.02rem; line-height: 1.45;
  white-space: pre-line;          /* respect manual newlines */
  overflow-wrap: anywhere;        /* break long tokens */
  word-break: break-word;         /* ensure wrapping on long words */
}

/* Dense mode: many bubbles => reduce sizes a bit */
.collab-card--dense .center-node { width: 210px; height: 210px; font-size: 1.05rem; }
.collab-card--dense .node-bubble { min-width: 48px; min-height: 48px; font-size: 0.85rem; max-width: 150px; }
.collab-card--dense .collab-visual { min-height: 400px; }

@media (max-width: 768px) {
  .center-node { width: 200px; height: 200px; font-size: 1rem; }
  .collab-visual { min-height: 420px; }
  .node-bubble { max-width: 140px; }
}
.faculty-recs-page .faculty-card { height:300px; overflow:hidden; position:relative; transition: transform .15s, box-shadow .15s; cursor:pointer; }
.faculty-recs-page .faculty-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(80,160,255,0.15); }
.faculty-recs-page .faculty-card-small { height:270px; overflow:hidden; }
.faculty-recs-page .profile-corner-pic { position:absolute; top:0.75rem; right:0.75rem; width:80px; height:72px; border-radius:50%; object-fit:cover; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
/* Move avatar to the left on faculty recs cards */
.faculty-recs-page .profile-corner-pic-left { left: 0.75rem; right: auto; }
.faculty-recs-page .interest-badges { margin-top:1.25rem; }
.faculty-recs-page .faculty-score-badge { background:#bee3f8; color:#26435e; font-weight:600; padding:0.3em 0.6em; border-radius:20px; font-size:0.9em; align-self:flex-start; margin-top:0.5em; display:inline-block; }
.faculty-score-badge { background: #bee3f8; color: #26435e; font-weight: 600; padding: 0.3em 0.6em; border-radius: 20px; font-size: 0.9em; align-self: flex-start; margin-top: 0.5em; display: inline-block; }

/* Place score under the left avatar when recs are on */
.faculty-recs-page .faculty-card .faculty-score-badge {
  position: absolute;
  left: 0.75rem;
  top: calc(0.75rem + 72px + 0.4rem); /* image top + image height + spacing */
}

/* Keep text clear of the left profile photo and allow name to wrap to two lines */
.faculty-recs-page .faculty-card { padding-left: 5.5rem; }
.faculty-recs-page .faculty-card .panel-header {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;               /* for future support */
  -webkit-box-orient: vertical;
  white-space: normal;          /* ensure wrapping */
}

/* Research page */
#network { width: 100%; height: 750px; border: 1px solid #ddd; background: #f8fbff; border-radius: 14px; box-shadow: 0 4px 16px rgba(100,150,200,0.08); margin-bottom: 3em; }

/* Sign up and inputs */
.signup-page { background: #f4f7fa; }
.signup-panel { background: #fff; border-radius: 28px; box-shadow: 0 8px 36px rgba(120,150,220,0.11); padding: 2.5em 2em 2em 2em; margin-top: 2em; }
.ai-pill { display: inline-flex; align-items: center; background: linear-gradient(90deg,#bee3f8 80%,#fefcbf 100%); color: #1a436d; font-weight: 600; font-size: 1em; padding: 0.45em 1.2em 0.45em 1em; border-radius: 19px; margin: 0 0.25em 0.3em 0; transition: background .12s; box-shadow: 0 2px 9px 0 rgba(120,170,220,0.08); cursor: default; }
.ai-pill .pill-x { margin-left: 0.7em; color: #b10020; font-weight: bold; cursor: pointer; font-size: 1.12em; line-height: 1; opacity: 0.9; transition: color .15s; }
.ai-pill .pill-x:hover { color: #e32c57; }
.interests-box { min-height: 68px; display: flex; flex-wrap: wrap; align-items: center; border-radius: 13px; border: 1px solid #bddaf7; background: #f8fafb; padding: 0.8em 1em 0.45em 1em; box-shadow: none; margin-bottom: 0.9em; }
.interests-box input { border: none; outline: none; font-size: 1em; padding: 0.3em 0; background: transparent; min-width: 110px; flex: 1; }
.form-group label { font-weight: 600; color: #2b445d; }
.form-control, .form-control-file { border-radius: 10px; border: 1px solid #bddaf7; background: #f8fafb; padding: 0.7em 1em; font-size: 1em; margin-bottom: 1em; }
.btn-primary { background: linear-gradient(90deg,#bee3f8 60%,#fefcbf 100%); border: none; color: #223; font-weight: 700; font-size: 1.12em; border-radius: 16px; padding: 0.7em 2.2em; box-shadow: 0 2px 9px rgba(120,170,220,0.10); transition: background .12s; }
.btn-primary:hover { background: linear-gradient(90deg,#84c7ec 40%,#ffe485 100%); }

/* Profile page: fixed-size one-line pill buttons */
.profile-page .profile-pill {
  min-width: 96px;
  max-width: 120px;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-recaptcha { margin-bottom: 1.2em; }
.profile-pic-preview { display:block; width:120px; height:120px; object-fit:cover; border-radius:60px; margin:0 auto 1em auto; border:2px solid #bee3f8; }

/* Visualization banners and overlays */
.gradient-blue-yellow { background: linear-gradient(90deg,#bee3f8 60%,#fefcbf 100%); }
.gradient-blue-yellow-soft { background: linear-gradient(90deg, #bae6fd 10%, #fefcbf 90%); box-shadow: 0 4px 24px rgba(120,170,220,0.11); border-radius: 50px; padding: 0.8em 2em; text-align: center; font-weight: 800; font-size: 1.29em; letter-spacing: 0.015em; color: #3254a8; max-width: 500px; margin: 0 auto 1.5em auto; }
.accent-gold { color: #c8b137; }
.cab-yin-wrap { position: relative; width: 100%; margin-top: 2em; min-height: 380px; }
.cab-graphic { width: 100%; height: auto; display: block; }
.cab-overlay { position: absolute; background: rgba(255,255,255,0.95); border-radius: 28px; padding: 0.8em; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.cab-overlay-center { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.cab-overlay-left { top: 70%; left: 5%; transform: translate(-15%,-50%); max-width: 30%; background: rgba(255,255,255,0.90); }
.cab-overlay-right { top: 30%; right: 5%; transform: translate(15%,-50%); max-width: 30%; background: rgba(255,255,255,0.90); }
.badge-shared { color:#3254a8; font-weight:700; }
.badge-you { color:#4372be; font-weight:700; }
.badge-project { color:#bba724; font-weight:700; }
.chip-shared { background: linear-gradient(90deg,#bde6fc,#fdf8b6); color:#284158; margin: 3px; }
.chip-you { background:#bae6fd; color:#274356; margin:3px; }
.chip-project { background:#fdf8b6; color:#856200; margin:3px; }
.owner-badge { background:#ffe6b3; color:#7a4a00; font-weight:700; }

/* Avatars and images */
.avatar-80 { width:80px; height:80px; border-radius:50%; object-fit:cover; vertical-align:middle; }
.avatar-120 { width:120px; height:120px; border-radius:50%; object-fit:cover; }
.circle-icon { width:110px; height:110px; border-radius:50%; object-fit:cover; box-shadow:0 4px 14px rgba(0,0,0,0.08); margin-bottom:0.75rem; }

/* Hero and feature sections */
.hero-section { text-align: center; }

/* Selection tags UI */
.selected-bank { min-height: 46px; border:1px solid #e4e4e4; border-radius: 10px; padding: 0.5rem; background:#fff; }
.selected-bank-title { font-weight: 700; color:#2b445d; margin-bottom: 0.5rem; }
.selected-tag { display:inline-flex; align-items:center; background:#eef6ff; color:#244c70; border:1px solid #cfe6ff; border-radius: 16px; padding: 0.25rem 0.6rem; margin: 0 0.35rem 0.35rem 0; }
.selected-tag .remove-tag { appearance:none; border:none; background:transparent; color:#b10020; font-weight:700; margin-left:0.45rem; cursor:pointer; line-height:1; }
.project-option.selected { background:#f3faff; }

/* Generic small action buttons */
.ajax-btn { border:none; border-radius: 14px; padding: 0.35em 0.9em; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.ajax-btn.sm { font-size: 0.9em; }
.ajax-btn.red { background:#ffd6d6; color:#7a0012; }
.ajax-btn.green { background:#d6ffe3; color:#0a5a2a; }

/* Utilities */
.mt-50 { margin-top: 50px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-20 { margin-bottom: 20px !important; }
.max-w-500 { max-width: 500px !important; }
.max-w-800 { max-width: 800px !important; }
.w-600 { width: 600px !important; }
.title-xxl { font-size: 3rem; font-weight: 900; }



/* ============================= */
/* Siri-like rainbow screen wash */
/* ============================= */
#ai-rainbow-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease-in;
  /* Layered radial gradients for a soft yellow/blue aura. Positions via CSS vars. */
  background:
    radial-gradient(60% 80% at var(--g1x, 20%) var(--g1y, 30%), rgba(255, 238, 0, 0.45), transparent 65%),
    radial-gradient(55% 75% at var(--g2x, 80%) var(--g2y, 20%), rgba(5, 26, 255, 0.38), transparent 65%),
    radial-gradient(65% 85% at var(--g3x, 50%) var(--g3y, 70%), rgba(255, 245, 130, 0.32), transparent 65%),
    radial-gradient(70% 90% at var(--g4x, 50%) var(--g4y, 40%), rgba(0, 90, 255, 0.35), transparent 70%);
  filter: blur(42px) saturate(145%);
}

#ai-rainbow-overlay.active {
  opacity: 1;
  visibility: visible;
  animation: ai-rainbow-wash 1000ms ease-in-out forwards;
}

@keyframes ai-rainbow-wash {
  0%   { opacity: 0; transform: scale(1);   filter: blur(40px) saturate(120%); }
  35%  { opacity: 1; transform: scale(1.02); filter: blur(48px) saturate(140%); }
  70%  { opacity: 0.9; transform: scale(1.05); filter: blur(56px) saturate(150%); }
  100% { opacity: 0; transform: scale(1.08); filter: blur(64px) saturate(160%); }
}

@media (prefers-reduced-motion: reduce) {
  #ai-rainbow-overlay.active { animation: none; opacity: 1; transition: opacity 250ms ease-in; }
}

/* Subtle yellow/blue full-page hue when recommendations are active */
body.recs-on-body {
  background:
    radial-gradient(40% 35% at 12% 8%, rgba(255, 238, 0, 0.17), transparent 60%),
    radial-gradient(42% 38% at 88% 10%, rgba(5, 26, 255, 0.14), transparent 62%),
    radial-gradient(65% 55% at 50% 85%, rgba(230, 245, 255, 0.20), transparent 70%),
    linear-gradient(180deg, rgba(255, 248, 180, 0.25) 0%, rgba(186, 230, 253, 0.18) 100%),
    #f7fafc;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

/* Ensure containers remain white cards on top of full-page hue */
.faculty-recs-page,
.projects-page,
.researchers-page { background: transparent; }

/* Faculty: place score under the image area */
.faculty-recs-page .faculty-card { padding-left: 5.5rem; position: relative; }
.faculty-recs-page .profile-corner-pic { top: 0.75rem; left: 0.75rem; right: auto; }
.faculty-recs-page .faculty-score-badge {
  position: absolute;
  top: 5.4rem; /* just below the avatar which is ~4.5rem tall incl. spacing */
  left: 0.9rem;
  margin-top: 0;
}

/* Projects: place score under the image thumbnail */
.projects-page .project-card { align-items: flex-start; }
.projects-page .project-thumb { display: block; }
.projects-page .project-left .project-score-badge { margin-top: 0.5rem; display: inline-block; }

/* ===================================== */
/* Liquid glass cards (Apple-like glass) */
/* ===================================== */
.faculty-recs-page .side-panel,
.faculty-recs-page .faculty-card,
.projects-page .side-panel,
.projects-page .project-card,
.profile-page .side-panel,
.researchers-page .side-panel,
.researchers-page .contrib-card {
  position: relative;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.35);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* ===== Projects page: full-width footer actions, centered, no scroll ===== */
.projects-page .project-card { display: flex; flex-direction: column; align-items: stretch; }
.projects-page .project-body { display: flex; align-items: flex-start; gap: 1.2rem; }
.projects-page .project-details { flex: 1 1 auto; min-width: 0; }
.projects-page .project-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.5rem 0 0.6rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  flex-wrap: nowrap;     /* inline on one row */
  overflow: hidden;      /* no scrollbars */
}
/* When cards grow taller, let keyword bar breathe more before actions */
.projects-page .project-details { row-gap: 0.25rem; }
.projects-page .project-actions .connect-btn-ai {
  padding: 0.35em 0.9em;
  font-size: 0.9em;
  white-space: nowrap;
}
@media (max-width: 576px) {
  .projects-page .project-actions .connect-btn-ai {
    padding: 0.3em 0.7em;
    font-size: 0.85em;
  }
}

/* Projects page: uniform tile height with safe clipping rules */
.projects-page .project-card { height: 360px; overflow: hidden; }
.projects-page .project-body { flex: 1 1 auto; overflow: hidden; }

/* Subtle specular highlight */
.faculty-recs-page .side-panel::before,
.faculty-recs-page .faculty-card::before,
.projects-page .side-panel::before,
.projects-page .project-card::before,
.profile-page .side-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 35%),
    radial-gradient(60% 40% at 0% 0%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.0) 70%);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Slightly stronger on hover for cards */
.faculty-recs-page .faculty-card:hover,
.projects-page .project-card:hover,
.profile-page .side-panel:hover {
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.45);
}