/* ============================================================
   Sensors & Diagnostics Lab — Design System
   ============================================================ */
:root {
  /* Brand palette */
  --ink: #0A1A2F;          /* deep navy */
  --ink-2: #0E2540;
  --ink-3: #143256;
  --teal: #10B981;
  --teal-600: #059b6d;
  --cyan: #22D3EE;
  --gold: #F4B740;
  --bg: #FFFFFF;
  --bg-soft: #F5F8FB;
  --bg-mute: #EDF2F7;
  --line: #E2E9F0;
  --text: #0F1E30;
  --muted: #5A6B7E;
  --white: #FFFFFF;

  /* Effects */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(10,26,47,.06), 0 2px 8px rgba(10,26,47,.05);
  --shadow: 0 10px 30px -12px rgba(10,26,47,.18), 0 4px 12px -6px rgba(10,26,47,.10);
  --shadow-lg: 0 30px 60px -20px rgba(10,26,47,.28);
  --ring: 0 0 0 4px rgba(16,185,129,.18);

  --container: 1200px;
  --gradient: linear-gradient(135deg, var(--teal) 0%, var(--cyan) 100%);
  --gradient-ink: linear-gradient(160deg, var(--ink) 0%, var(--ink-3) 100%);

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5 { font-family: var(--font-display); line-height: 1.12; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p { margin: 0 0 1rem; }
a { color: var(--teal-600); text-decoration: none; transition: color .2s; }
a:hover { color: var(--ink); }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px;
}

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gradient); border-radius: 2px; }
.lead { font-size: 1.18rem; color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn { --bw: 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: .96rem; line-height: 1;
  padding: 14px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s, color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 10px 18px; font-size: .86rem; }
.btn-lg { padding: 17px 32px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--gradient); color: #042b22; box-shadow: 0 10px 24px -10px rgba(16,185,129,.7); }
.btn-primary:hover { color: #042b22; box-shadow: 0 16px 30px -10px rgba(16,185,129,.8); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { color: #fff; background: var(--ink-3); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,.16); }
/* On light surfaces (admin shell + portal cards) the white-on-white ghost button
   is invisible — make it a legible outline button there instead. */
.dash-main .btn-ghost,
.portal-card .btn-ghost,
.data .btn-ghost,
.panel .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.dash-main .btn-ghost:hover,
.portal-card .btn-ghost:hover,
.data .btn-ghost:hover,
.panel .btn-ghost:hover { color: var(--ink); border-color: var(--teal); background: var(--bg-mute, #f1f5f9); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-outline:hover { color: var(--ink); border-color: var(--teal); }

/* ---------- Social sign-in (OAuth) ---------- */
.oauth-block { margin-top: 18px; }
.oauth-sep { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .82rem; margin: 4px 0 14px; }
.oauth-sep::before, .oauth-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-oauth { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); font-weight: 600; }
.btn-oauth + .btn-oauth { margin-top: 10px; }
.btn-oauth:hover { color: var(--ink); border-color: var(--teal); }
.btn-oauth svg { flex: 0 0 auto; }
.btn-oauth-orcid:hover { border-color: #A6CE39; }

/* ---------- Mini status table + pills (admin) ---------- */
.mini-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.mini-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  background: var(--bg-mute); color: var(--muted); border: 1px solid var(--line); }
.pill-ok { background: rgba(16,185,129,.12); color: var(--teal-600); border-color: rgba(16,185,129,.3); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, background .3s; }
.site-header.scrolled { border-color: var(--line); box-shadow: 0 6px 24px -16px rgba(10,26,47,.4); }
.header-inner { display: flex; align-items: center; gap: 24px; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark { color: var(--teal); display: grid; place-items: center; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: -.01em; }
.brand-text small { font-size: .72rem; color: var(--muted); letter-spacing: .02em; }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: 4px; list-style: none; }
.main-nav a { display: block; padding: 9px 14px; border-radius: 10px; font-weight: 500; font-size: .94rem; color: var(--ink-2); }
.main-nav a:hover { background: var(--bg-mute); color: var(--ink); }
.main-nav a.is-active { color: var(--teal-600); background: rgba(16,185,129,.10); }
.main-nav .main-nav a, .main-nav ul a { white-space: nowrap; }

/* Primary-nav dropdowns (discoverable grouping) */
.has-dd { position: relative; }
.dd-trigger { display: inline-flex !important; align-items: center; gap: 5px; }
.dd-caret { width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; opacity: .65; }
.has-dd:hover > .dd-trigger .dd-caret, .has-dd:focus-within > .dd-trigger .dd-caret { transform: translateY(0) rotate(225deg); }
.dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 248px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 22px 48px -22px rgba(10,26,47,.45);
  padding: 8px; display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 120; }
.has-dd:hover > .dd-menu, .has-dd:focus-within > .dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dd-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.dd-item { display: grid; gap: 1px; padding: 9px 12px; border-radius: 10px; color: var(--ink); }
.dd-item:hover, .dd-item:focus { background: var(--bg-mute); }
.dd-item-label { font-weight: 600; font-size: .92rem; }
.dd-item-desc { font-size: .76rem; color: var(--muted); }

.header-actions { display: flex; align-items: center; gap: 12px; }

/* Account menu (always shows Sign out) */
.user-menu { position: relative; }
.user-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border: 1px solid var(--line);
  background: #fff; border-radius: 999px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.user-trigger:hover { border-color: var(--teal); box-shadow: 0 2px 10px -4px rgba(16,185,129,.5); }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--teal), var(--teal-600, #0f9d73)); color: #fff; font-weight: 700;
  font-size: .8rem; letter-spacing: .02em; }
.user-avatar.lg { width: 40px; height: 40px; font-size: .9rem; }
.user-caret { width: 7px; height: 7px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: translateY(-2px) rotate(45deg); }
.user-dot { position: absolute; top: 2px; left: 28px; width: 9px; height: 9px; border-radius: 50%;
  background: #ef4444; border: 2px solid #fff; }
.user-menu[data-open="true"] .user-caret { transform: translateY(1px) rotate(225deg); }
.user-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 252px; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 26px 54px -22px rgba(10,26,47,.5);
  padding: 8px; z-index: 130; }
.user-pop[hidden] { display: none; }
.user-pop-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-pop-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-pop-id strong { font-size: .92rem; }
.user-pop-id .tag { align-self: flex-start; margin-top: 2px; }
.user-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px;
  color: var(--ink); font-size: .9rem; font-weight: 500; background: none; border: 0; cursor: pointer; text-align: left; }
.user-pop-item:hover, .user-pop-item:focus { background: var(--bg-mute); }
.user-pop-item .pill { margin-left: auto; }
.user-pop-item.danger { color: #dc2626; }
.user-pop-item.danger:hover { background: rgba(220,38,38,.08); }
.user-pop-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.mobile-nav .mn-sub a { padding: 8px 14px 8px 30px; font-size: .9rem; color: var(--muted); font-weight: 500; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; border: 1px solid var(--line);
  background: #fff; border-radius: 12px; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { display: none; overflow: hidden; max-height: 0; transition: max-height .35s ease; border-top: 1px solid var(--line); background: #fff; }
/* When open, fill the screen below the header and scroll internally so every
   item (Education, Community, Contact, account links) is always reachable. */
.mobile-nav.open { max-height: calc(100vh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-nav ul { list-style: none; padding: 8px 20px 22px; display: flex; flex-direction: column; gap: 1px; }
.mobile-nav a { display: block; padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.mobile-nav a:hover { background: var(--bg-mute); }
.mobile-nav .btn-block { margin-top: 6px; }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 110px) 0; }
.section-sm { padding: clamp(40px, 6vw, 72px) 0; }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; }
.bg-soft { background: var(--bg-soft); }
.bg-ink { background: var(--gradient-ink); color: #cde0f0; }
.bg-ink h1,.bg-ink h2,.bg-ink h3 { color: #fff; }
.bg-ink .lead { color: #9fb6cc; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--gradient-ink); color: #dce8f4; padding: clamp(80px,12vw,150px) 0 clamp(70px,9vw,120px); }
.hero::before { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 78% 18%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(50% 50% at 12% 88%, rgba(16,185,129,.20), transparent 60%); }
.hero-grid-bg { position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 75%); }
.hero .container { position: relative; z-index: 2; }
.hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero h1 .grad { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { font-size: 1.2rem; color: #aac3da; max-width: 54ch; margin-bottom: 32px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: .82rem; font-weight: 500; color: #cfe2f2; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
/* Academic framing: PI attribution, research keywords, quiet apply link */
.hero-pi { font-size: 1rem; color: #c4d6e8; margin: -14px 0 26px; }
.hero-pi a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(45,212,191,.5); }
.hero-pi a:hover { border-bottom-color: var(--teal); }
.hero-keywords { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin-bottom: 30px; font-size: .92rem; }
.hero-keywords .kw-label { font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin-right: 4px; }
.hero-keywords .kw { color: #cde0f0; }
.hero-keywords .kw-sep { color: rgba(157,182,204,.5); }
.hero-apply { margin: 20px 0 0; font-size: .92rem; color: #9fb6cc; }
.hero-apply a { color: var(--teal); font-weight: 600; }
.hero-apply a:hover { color: #fff; }

/* ---------- Full-bleed hero: group photo as the background ---------- */
.hero-bg { min-height: clamp(600px, 86vh, 860px); display: flex; align-items: center; padding-top: clamp(90px,12vw,150px); padding-bottom: clamp(70px,9vw,120px); }
.hero-bg::before { display: none; }
.hero-bg .container { position: relative; z-index: 4; width: 100%; }
/* Auto-fit ANY aspect ratio: a blurred, darkened cover of the same photo fills
   the group photo fills the whole hero edge-to-edge (cover). A wide/landscape
   shot crops least; the left scrim keeps the headline legible over it. */
.hero-bg-img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 26%; }
/* Darker on the left (under the text), lifting toward the right so the team
   stays visible; plus a floor gradient for the lower content. */
.hero-bg-scrim { position: absolute; inset: 0; z-index: 2; background:
  linear-gradient(98deg, rgba(4,13,26,.92) 0%, rgba(4,13,26,.8) 34%, rgba(4,13,26,.5) 60%, rgba(4,13,26,.28) 82%, rgba(4,13,26,.18) 100%),
  linear-gradient(to top, rgba(4,13,26,.82) 0%, rgba(4,13,26,.25) 32%, transparent 55%); }
.hero-bg .hero-grid-bg { z-index: 3; opacity: .14; }
.hero-inner-solo { grid-template-columns: 1fr; }
.hero-inner-solo .hero-copy { max-width: 760px; }
.hero-bg .hero-lead { color: #cfe0f0; text-shadow: 0 1px 18px rgba(4,13,26,.5); }
.hero-bg-team { position: absolute; z-index: 4; right: clamp(18px,3vw,40px); bottom: clamp(18px,3vw,40px);
  color: #fff; font-weight: 600; font-size: .92rem; background: rgba(8,22,40,.55); border: 1px solid rgba(255,255,255,.2);
  padding: 10px 18px; border-radius: 999px; backdrop-filter: blur(6px); transition: background .2s, border-color .2s; }
.hero-bg-team:hover { color: #fff; background: rgba(16,185,129,.3); border-color: var(--teal); }
.hero-bg .admin-edit { position: absolute; z-index: 5; left: clamp(18px,3vw,40px); bottom: clamp(18px,3vw,40px); }
@media (max-width: 760px){
  .hero-bg-scrim { background: linear-gradient(to top, rgba(4,13,26,.92), rgba(4,13,26,.74) 55%, rgba(4,13,26,.66)); }
  .hero-bg-team { display: none; }
}

/* hero visual card */
.hero-visual { position: relative; }
.metric-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.metric-cap > span:first-child { font-family: var(--font-display); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.metric-cap-src { font-size: .72rem; color: #8fa8c0; }
.glass-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg);
  padding: 28px; backdrop-filter: blur(8px); box-shadow: var(--shadow-lg); }
.metric-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.metric { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 18px; }
.metric .num { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: #fff; line-height: 1; }
.metric .num .suf { color: var(--teal); }
.metric .lbl { font-size: .8rem; color: #9fb6cc; margin-top: 6px; }
.metric.span-2 { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; }
.molecule-orbit { position: absolute; inset: 0; pointer-events: none; }

/* ---------- Hero team photo (clean image + caption bar below) ---------- */
.hero-team { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 34px 70px -32px rgba(0,0,0,.75); background: rgba(255,255,255,.04); }
.hero-team-img { position: relative; overflow: hidden; background: var(--ink); }
.hero-team-img img { display: block; width: 100%; height: clamp(300px, 34vw, 430px); object-fit: cover; object-position: center 32%; transition: transform 1.4s ease; }
.hero-team:hover .hero-team-img img { transform: scale(1.035); }
.hero-team-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; background: rgba(6,17,33,.55); border-top: 1px solid rgba(255,255,255,.09); }
.hero-team-eyebrow { display: block; font-family: var(--font-display); font-weight: 600; font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--teal); margin-bottom: 5px; }
.hero-team-id strong { display: block; font-family: var(--font-display); color: #fff; font-size: 1.12rem; line-height: 1.15; }
.hero-team-sub { display: block; font-size: .8rem; color: #bcd3e8; margin-top: 3px; }
.hero-team-link { color: var(--teal); font-weight: 600; font-size: .88rem; white-space: nowrap; }
.hero-team-link:hover { color: #fff; }
.hero-team .admin-edit { top: 12px; right: 12px; }

/* ---------- Research-impact credibility strip (under the hero) ---------- */
.impact-band { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.impact-band .ib { background: #fff; padding: clamp(18px,2.2vw,26px) 14px; text-align: center; transition: background .2s ease; }
.impact-band .ib:hover { background: var(--bg-soft, #f6f9fc); }
.impact-band .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem,2.3vw,2.15rem); color: var(--ink); line-height: 1; }
.impact-band .num .suf { color: var(--teal-600); }
.impact-band .lbl { color: var(--muted); font-size: .82rem; margin-top: 8px; }
.impact-src { text-align: center; margin: 14px 0 0; font-size: .82rem; color: var(--muted); }
.impact-src a { color: var(--teal-600); font-weight: 600; }
@media (max-width: 880px){ .impact-band { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px){ .impact-band { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Stat band ---------- */
.statband { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.statband .stat { padding: 28px 26px; border-right: 1px solid var(--line); }
.statband .stat:last-child { border-right: 0; }
.statband .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem,3vw,2.5rem); color: var(--ink); line-height: 1; }
.statband .num .suf { color: var(--teal-600); }
.statband .lbl { color: var(--muted); font-size: .9rem; margin-top: 8px; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d3e6dd; }
.card .icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(34,211,238,.14)); color: var(--teal-600); }
.card .icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); margin-bottom: 0; font-size: .98rem; }
.card-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: .9rem; }
.card-link svg { width: 16px; height: 16px; transition: transform .2s; }
.card:hover .card-link svg { transform: translateX(4px); }

.research-card { position: relative; overflow: hidden; }
.research-card::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: var(--gradient); opacity: 0; transition: opacity .25s; }
.research-card:hover::after { opacity: 1; }

/* ---------- Team ---------- */
.team-toolbar { margin: 0 0 40px; }
.team-search-wrap { position: relative; max-width: 520px; }
.team-search-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: var(--muted); pointer-events: none; }
.team-search-wrap input { width: 100%; padding: 13px 16px 13px 42px; border: 1px solid var(--border); border-radius: 12px; font-size: 1rem; background: var(--bg); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.team-search-wrap input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.team-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.area-chip { border: 1px solid var(--border); background: var(--bg); color: var(--muted); padding: 7px 15px; border-radius: 999px; font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .18s; }
.area-chip:hover { border-color: var(--teal); color: var(--ink); }
.area-chip.active { background: var(--gradient); border-color: transparent; color: #fff; box-shadow: var(--shadow-sm); }
.team-empty { margin-top: 16px; }
.link-btn { background: none; border: none; padding: 0; color: var(--teal); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.team-group { margin-bottom: 56px; }
.team-group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.team-group-head h3 { margin: 0; }
.team-group-head .count { font-size: .85rem; color: var(--muted); background: var(--bg-mute); padding: 3px 11px; border-radius: 999px; font-weight: 600; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 20px; }
.member { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; text-align: center;
  box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.member:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(16,185,129,.4); }
/* Whole-card click target — overlays the card without nesting anchors, so the
   email/link chips (raised above it) stay independently clickable. */
.member-stretch { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.member-stretch:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.avatar { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 15px; display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: #fff; background: var(--gradient-ink); position: relative;
  box-shadow: 0 8px 20px -8px rgba(10,26,47,.30), 0 0 0 1px rgba(10,26,47,.05); }
/* Refined, lightly per-person tinted monogram for members without a photo —
   varied yet understated (set --ah inline from the name hash). */
.member .avatar.is-initials { background: hsl(var(--ah, 205) 36% 95%); color: hsl(var(--ah, 205) 44% 32%);
  box-shadow: 0 6px 16px -8px rgba(10,26,47,.22), inset 0 0 0 1px hsl(var(--ah, 205) 38% 84%); }
.member .m-name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.member .m-role { font-size: .82rem; color: var(--teal-600); font-weight: 600; margin-top: 3px; }
.member .m-research { font-size: .82rem; color: var(--muted); margin-top: 9px; line-height: 1.5; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Contact / link chips — raised above the stretched card link */
.m-contact { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.m-chip { font-size: .72rem; font-weight: 600; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; text-decoration: none; transition: background .16s, color .16s, border-color .16s; }
.m-chip:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.member.pi-feature { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 26px; text-align: left; align-items: center; padding: 30px; }
.member.pi-feature .avatar { width: 96px; height: 96px; font-size: 1.9rem; margin: 0; }
.m-view { display: inline-block; margin-top: auto; padding-top: 13px; font-size: .8rem; font-weight: 600; color: var(--teal-600);
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.member:hover .m-view, .member:focus-within .m-view { opacity: 1; transform: translateY(0); }

/* ---------- Admin dashboard quick-add ---------- */
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px,1fr)); gap: 12px; padding: 16px 22px 20px; }
.qa-tile { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; box-shadow: var(--shadow-sm); position: relative;
  transition: transform .18s, box-shadow .18s, border-color .18s; }
.qa-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(16,185,129,.45); }
.qa-ic { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center;
  background: var(--bg-mute); color: var(--teal-600); }
.qa-ic svg { width: 19px; height: 19px; }
.qa-tx { font-weight: 600; font-size: .92rem; color: var(--ink); flex: 1; line-height: 1.2; }
.qa-plus { color: var(--muted); opacity: .45; display: inline-flex; }
.qa-plus svg { width: 16px; height: 16px; }
.qa-tile:hover .qa-plus { color: var(--teal-600); opacity: 1; }

/* ---------- Admin inline-edit affordance ---------- */
.admin-edit { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: rgba(10,26,47,.86); border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  padding: 5px 11px 5px 9px; line-height: 1; text-decoration: none; vertical-align: middle; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(10,26,47,.22); transition: background .18s, transform .18s, color .18s; }
.admin-edit:hover, .admin-edit:focus-visible { background: var(--teal-600); color: #fff; transform: translateY(-1px); }
.admin-edit .ae-ic { width: 14px; height: 14px; flex: 0 0 auto; }
.admin-edit-float { position: absolute; top: 12px; right: 12px; z-index: 6; opacity: .55; padding: 5px; }
.admin-edit-float .ae-txt { display: none; }
.member-cell:hover .admin-edit-float, .admin-edit-float:focus-visible { opacity: 1; }
.page-hero .admin-edit { margin-top: 16px; }
/* wrapper that lets a floating edit button sit over a card without nesting anchors */
.member-cell { position: relative; display: flex; }
.member-cell > .member { flex: 1 1 auto; width: 100%; }

/* ---------- Homepage people preview ---------- */
.people-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; }
.person-card { display: block; text-align: center; padding: 26px 18px 22px; border-radius: 18px; background: var(--card, #fff);
  border: 1px solid var(--line, rgba(10,26,47,.08)); box-shadow: 0 1px 2px rgba(10,26,47,.04); color: inherit; text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.person-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(10,26,47,.12); border-color: rgba(16,185,129,.4); color: inherit; }
.person-card .avatar { width: 84px; height: 84px; font-size: 1.6rem; }
.person-card .pc-name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.person-card .pc-role { font-size: .82rem; color: var(--teal-600); font-weight: 600; margin-top: 4px; line-height: 1.3; }
.person-card .pc-view { display: inline-block; margin-top: 12px; font-size: .78rem; font-weight: 600; color: var(--teal-600);
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.person-card:hover .pc-view, .person-card:focus-visible .pc-view { opacity: 1; transform: translateY(0); }
@media (max-width: 880px) { .people-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .people-strip { grid-template-columns: 1fr; } }

/* ---------- Researcher profile page ---------- */
.profile-head { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; margin-top: 14px; }
.profile-photo { width: 132px; height: 132px; border-radius: 24px; overflow: hidden; position: relative;
  background: var(--gradient-ink, linear-gradient(135deg,#0a1a2f,#16324f)); display: grid; place-items: center; box-shadow: var(--shadow); }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.profile-photo .pi-initials { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; }
.profile-photo.is-initials::after { content: attr(data-i); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; }
.profile-id h1 { margin: 6px 0 4px; }
.profile-title { color: var(--teal-600); font-weight: 600; margin: 0 0 6px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.profile-grid { display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: start; }
.profile-main { display: grid; gap: 20px; }
.profile-aside { display: grid; gap: 14px; position: sticky; top: 92px; }
.panel-title { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 12px; }
.prose p { margin: 0 0 12px; line-height: 1.7; color: var(--ink-2); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.kv dt { color: var(--muted); font-size: .82rem; font-weight: 600; }
.kv dd { margin: 0; font-size: .9rem; color: var(--ink); }
.profile-links { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.profile-links a { font-size: .9rem; font-weight: 500; }
.pub-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
/* ---- Member "Selected publications" — curated, clickable cards ---------- */
.panel-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-head-link { font-size: .85rem; font-weight: 600; color: var(--teal-600); white-space: nowrap; }
.panel-head-link:hover { text-decoration: underline; }
.pub-cards { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.pub-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; padding-right: 96px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); transition: border-color .18s, transform .18s, box-shadow .18s; }
.pub-card:hover { border-color: rgba(16,185,129,.45); transform: translateY(-2px); box-shadow: var(--shadow); }
.pub-card-stretch { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pub-card-body { position: relative; z-index: 0; min-width: 0; }
.pub-card-title { margin: 0; font-family: var(--font-display); font-size: 1rem; line-height: 1.4; font-weight: 700; color: var(--ink); }
.pub-card:hover .pub-card-title { color: var(--teal-600); }
.pub-card-authors { margin-top: 4px; font-size: .85rem; color: var(--muted); }
.pub-card-meta { margin-top: 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pub-venue { font-size: .82rem; font-weight: 600; color: var(--ink-2, var(--ink)); }
.pub-badge { font-size: .7rem; font-weight: 700; letter-spacing: .02em; padding: 2px 9px; border-radius: 999px; line-height: 1.6; }
.pub-badge.pub-q { background: var(--teal-50, #eefbf7); color: var(--teal-600); border: 1px solid rgba(16,185,129,.3); }
.pub-badge.pub-cite { background: #f4f6f8; color: var(--muted); border: 1px solid var(--line); }
.pub-card-cta { position: absolute; right: 16px; top: 16px; z-index: 0; font-size: .78rem; font-weight: 700; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s, color .18s; }
.pub-card:hover .pub-card-cta { opacity: 1; transform: translateX(0); color: var(--teal-600); }
.pub-card-controls { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: flex; gap: 6px; }
.pub-card-controls form { margin: 0; }
.pub-ctl { appearance: none; cursor: pointer; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; line-height: 1; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink-2, var(--ink)); transition: background .15s, border-color .15s, color .15s, transform .15s; }
.pub-ctl:hover { background: #f4f6f8; transform: translateY(-1px); }
.pub-ctl-remove { color: #b42318; }
.pub-ctl-remove:hover { background: #fef3f2; border-color: #fda29b; }
/* Curator picker (admin + owning member only) */
.pub-manage { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 14px; }
.pub-manage > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--teal-600); list-style: revert; }
.pub-manage > summary:hover { color: var(--ink); }
.pub-search { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pub-search input[type="search"] { flex: 1 1 240px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.pub-search input[type="search"]:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.pub-pick-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.pub-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pub-pick-main { min-width: 0; }
.pub-pick-title { font-weight: 600; color: var(--ink); font-size: .9rem; line-height: 1.35; }
.pub-pick form { margin: 0; flex: 0 0 auto; }
.profile-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 10px; }
.profile-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
@media (max-width: 860px) {
  .profile-head { grid-template-columns: auto 1fr; gap: 18px; }
  .profile-photo { width: 92px; height: 92px; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-aside { position: static; }
}

/* ---------- Publications ---------- */
.pub-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.pub-filters button { font-family: var(--font-display); font-weight: 600; font-size: .85rem; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; transition: .2s; }
.pub-filters button:hover { border-color: var(--teal); color: var(--ink); }
.pub-filters button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pub-list { display: flex; flex-direction: column; gap: 14px; }
.pub { display: grid; grid-template-columns: 64px 1fr auto; gap: 20px; align-items: start; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); transition: border-color .2s, transform .2s; }
.pub:hover { border-color: #d3e6dd; transform: translateX(3px); }
.pub .year { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--teal-600); }
.pub .p-title { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin-bottom: 5px; font-size: 1.02rem; }
.pub .p-title a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--teal,#14b8a6),var(--teal,#14b8a6)); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease, color .2s ease; }
.pub .p-title a:hover { color: var(--teal,#14b8a6); background-size: 100% 1.5px; }
.pub .p-meta { font-size: .88rem; color: var(--muted); }
.pub .p-venue { font-style: italic; color: var(--ink-3); }
.pub .cites { white-space: nowrap; font-size: .8rem; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-weight: 600; }
/* Graphical-abstract thumbnail (when a publication has an image) */
.pub.has-thumb { grid-template-columns: 104px 56px 1fr auto; }
.pub-thumb { display: block; width: 104px; height: 80px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.pub-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.pub-thumb:hover img { transform: scale(1.06); }
@media (max-width: 640px){ .pub.has-thumb { grid-template-columns: 56px 1fr auto; } .pub-thumb { display: none; } }
.pub .cites b { color: var(--ink); }
.badge-feat { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin-left: 8px; vertical-align: middle; }

/* ---------- Courses ---------- */
.course { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.course .code { font-family: var(--font-display); font-weight: 800; color: #fff; background: var(--gradient-ink); border-radius: 12px; padding: 12px 14px; font-size: .85rem; white-space: nowrap; }
.level-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; }
.level-BS { background: rgba(16,185,129,.12); color: var(--teal-600); }
.level-MPhil { background: rgba(34,211,238,.14); color: #0b7d93; }

/* ---------- Instruments ---------- */
.inst { display: flex; gap: 16px; align-items: flex-start; }
.inst .ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: var(--bg-mute); color: var(--teal-600); display: grid; place-items: center; }
.inst .maker { font-size: .8rem; color: var(--teal-600); font-weight: 600; }

/* ===== PI page hero: identity + large portrait ===== */
.pi-hero-grid { display: grid; grid-template-columns: 1fr clamp(260px, 28vw, 360px); gap: clamp(36px, 5vw, 70px); align-items: center; }
.pi-hero-grid--solo { grid-template-columns: 1fr; max-width: 820px; }
.pi-hero-text h1 { margin-bottom: 14px; }
.pi-hero-photo { margin: 0; }
.pi-hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; display: block;
  border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 36px 72px -28px rgba(0,0,0,.7), 0 0 0 6px rgba(255,255,255,.04); }
.pi-contacts { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.pi-contacts a { display: inline-flex; align-items: center; gap: 9px; color: #cfe0f0; font-size: .94rem; }
.pi-contacts a:hover { color: #fff; }
.pi-contacts a svg { width: 16px; height: 16px; color: var(--teal); flex: 0 0 auto; }
/* 4-up research-impact strip variant (reuses .impact-band) */
.impact-band.impact-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px){
  .pi-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .pi-hero-photo { max-width: 320px; }
}
@media (max-width: 760px){ .impact-band.impact-4 { grid-template-columns: 1fr 1fr; } }

/* ===== Books — cover + Amazon buy buttons ===== */
.book-card { position: relative; display: grid; grid-template-columns: 168px 1fr; gap: 28px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); }
.book-cover { width: 168px; height: 232px; border-radius: 12px; overflow: hidden; background: var(--bg-soft, #eef4f9);
  display: grid; place-items: center; box-shadow: 0 16px 36px -16px rgba(10,26,47,.5); }
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-cover-ph { background: var(--gradient-ink); }
.book-cover-ic { color: var(--teal); }
.book-cover-ic svg { width: 56px; height: 56px; }
.book-title { font-family: var(--font-display); font-size: 1.4rem; margin: 0; }
.book-sub { color: var(--teal-600); font-weight: 600; margin-top: 4px; }
.book-desc { margin: 12px 0 18px; color: var(--muted); line-height: 1.6; }
.book-buy-label { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 9px; }
.book-buy-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-amazon { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .86rem; color: #0f1111;
  background: #ffd814; border: 1px solid #fcd200; border-radius: 999px; padding: 9px 18px; box-shadow: 0 2px 0 #f2c200; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-amazon:hover { color: #0f1111; background: #ffe55a; transform: translateY(-1px); }
.btn-amazon::before { content: "a"; font-family: var(--font-display); font-weight: 800; color: #ff9900; }
@media (max-width: 560px){ .book-card { grid-template-columns: 1fr; justify-items: center; text-align: center; } .book-buy-btns { justify-content: center; } }

/* Instrument cards with a product photo (or icon placeholder) on top */
.inst-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.inst-media { height: 180px; background: #fff; display: grid; place-items: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.inst-media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .4s ease; }
.inst-card:hover .inst-media img { transform: scale(1.04); }
.inst-media-icon { background: linear-gradient(160deg, var(--bg-soft, #eef4f9), #fff); }
.inst-media-icon .inst-ico { color: var(--teal-600); opacity: .8; }
.inst-media-icon .inst-ico svg { width: 52px; height: 52px; }
.inst-body { padding: 18px 20px; }
.inst-body .maker { font-size: .8rem; color: var(--teal-600); font-weight: 600; }
.inst-name { font-family: var(--font-display); font-size: 1.05rem; margin: 3px 0 7px; line-height: 1.25; }
.inst-desc { font-size: .9rem; color: var(--muted); margin: 0; line-height: 1.55; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--gradient-ink); color: #fff; padding: clamp(40px,6vw,72px); text-align: center; box-shadow: var(--shadow-lg); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 50% 0%, rgba(34,211,238,.22), transparent 70%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: #aac3da; margin-inline: auto; margin-bottom: 26px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Page header ---------- */
.page-hero { background: var(--gradient-ink); color: #cfe0f0; padding: clamp(64px,9vw,118px) 0 clamp(48px,6vw,72px); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 60% at 85% 10%, rgba(16,185,129,.20), transparent 60%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: #a7c0d8; }
.breadcrumb { font-size: .82rem; color: #88a3bd; margin-bottom: 14px; }
.breadcrumb a { color: #a7c0d8; }

/* ---------- Prose ---------- */
.prose { max-width: 72ch; }
.prose p { color: var(--text); }
.prose h2,.prose h3 { margin-top: 1.6em; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .86rem; margin-bottom: 7px; color: var(--ink); }
.field input,.field select,.field textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: #fff; transition: border-color .2s, box-shadow .2s; }
.field input:focus,.field select:focus,.field textarea:focus { outline: none; border-color: var(--teal); box-shadow: var(--ring); }
.field textarea { min-height: 130px; resize: vertical; }
.info-row { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.info-row .ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(16,185,129,.10); color: var(--teal-600); display: grid; place-items: center; flex: 0 0 auto; }
.info-row b { display: block; font-family: var(--font-display); }
.notice { background: rgba(244,183,64,.10); border: 1px solid rgba(244,183,64,.4); color: #8a6a13; padding: 12px 16px; border-radius: 12px; font-size: .9rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #9fb6cc; padding: 64px 0 28px; }
.site-footer .brand-text strong { color: #fff; }
.site-footer .brand-text small { color: #7e98b1; }
.site-footer .brand-mark { color: var(--teal); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-tag { margin: 18px 0; max-width: 38ch; font-size: .92rem; }
.footer-scholar { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-scholar a { font-size: .8rem; color: #cfe2f2; border: 1px solid rgba(255,255,255,.16); padding: 6px 12px; border-radius: 999px; }
.footer-scholar a:hover { background: rgba(255,255,255,.08); color: #fff; }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.footer-social-link { font-size: .8rem; color: #cfe2f2; border: 1px solid rgba(45,212,191,.3); background: rgba(45,212,191,.08); padding: 6px 12px; border-radius: 999px; }
.footer-social-link:hover { background: rgba(45,212,191,.18); color: #fff; }
.footer-col h4 { color: #fff; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: #9fb6cc; font-size: .94rem; }
.footer-col a:hover { color: var(--teal); }
.footer-contact li { font-size: .9rem; margin-bottom: 10px; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; font-size: .84rem; color: #7e98b1; flex-wrap: wrap; gap: 8px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 460px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .main-nav, .header-actions .btn, .user-menu { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav { display: block; }
  .statband { grid-template-columns: 1fr 1fr; }
  .statband .stat:nth-child(2) { border-right: 0; }
  .statband .stat:nth-child(1),.statband .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .member.pi-feature { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pub { grid-template-columns: 48px 1fr; }
  .pub .cites { grid-column: 2; justify-self: start; }
}
@media (max-width: 560px) {
  .container { padding-inline: 18px; }
  .statband { grid-template-columns: 1fr; }
  .statband .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .team-grid { grid-template-columns: 1fr 1fr; }   /* small avatars — fine 2-up */
  .grid-4 { grid-template-columns: 1fr; }          /* text cards — full width, no cramping */
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Platform: auth, admin dashboard, portal & document editor
   ============================================================ */

/* ---------- Banner strip ---------- */
.banner-strip { display: flex; flex-direction: column; }
.banner-strip a, .banner-strip .b-item { display: block; text-align: center; font-size: .9rem; font-weight: 600;
  padding: 9px 16px; color: #042b22; background: var(--gradient); }
.banner-strip .b-info { background: linear-gradient(135deg,#10B981,#22D3EE); color: #042b22; }
.banner-strip .b-success { background: linear-gradient(135deg,#10B981,#34d399); color: #042b22; }
.banner-strip .b-warn { background: linear-gradient(135deg,#F4B740,#f6c662); color: #5a4209; }
.banner-strip a:hover { filter: brightness(1.05); color: #042b22; }

/* ---------- Tags / pills / alerts ---------- */
.tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-mute); color: var(--ink-3); text-transform: capitalize; white-space: nowrap; }
.tag-pending,.tag-requested,.tag-submitted,.tag-draft { background: rgba(244,183,64,.16); color: #8a6a13; }
.tag-under_review,.tag-internal_review,.tag-shortlisted,.tag-interview,.tag-revisions,.tag-revise,.tag-minor_revision,.tag-major_revision { background: rgba(34,211,238,.16); color: #0b7d93; }
.tag-selected,.tag-approved,.tag-accepted,.tag-internal_approved,.tag-published,.tag-awarded,.tag-defended,.tag-highlighted,.tag-open,.tag-completed,.tag-success { background: rgba(16,185,129,.16); color: var(--teal-600); }
.tag-rejected,.tag-closed,.tag-out { background: rgba(225,72,72,.14); color: #b3261e; }
.tag-admin { background: var(--ink); color: #fff; }
.tag-student { background: rgba(16,185,129,.14); color: var(--teal-600); }
.tag-applicant { background: var(--bg-mute); color: var(--ink-3); }
.tag-ongoing { background: rgba(34,211,238,.16); color: #0b7d93; }
.tag-available { background: rgba(244,183,64,.16); color: #8a6a13; }

.pill { display: inline-block; font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--bg-mute); color: var(--ink-3); }
.pill.warn { background: rgba(244,183,64,.18); color: #8a6a13; }

.alert { padding: 13px 18px; border-radius: 12px; margin-bottom: 20px; font-size: .94rem; border: 1px solid var(--line); }
.alert.success, .alert-success { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.35); color: #06694b; }
.alert.error, .alert-error { background: rgba(225,72,72,.10); border-color: rgba(225,72,72,.35); color: #b3261e; }

/* ---------- Auth card ---------- */
.auth-wrap { min-height: 72vh; display: grid; place-items: center; padding: 48px 18px; background: var(--bg-soft); }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 38px 34px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 1.7rem; margin-bottom: 6px; }
.auth-card .sub { color: var(--muted); margin-bottom: 24px; font-size: .95rem; }
.auth-card .field input { padding: 14px 15px; }
.auth-alt { margin-top: 18px; text-align: center; font-size: .9rem; color: var(--muted); }

/* ---------- Generic form grid ---------- */
.stack { display: flex; flex-direction: column; gap: 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.form-grid .field { margin-bottom: 0; }
.form-grid .col-full { grid-column: 1 / -1; }
.form-grid textarea { min-height: auto; }
.field .hint { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); margin-top: 5px; }
.field textarea.mono, textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; }
.field .check, label.check { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; cursor: pointer; }
.field .check input, label.check input { width: auto; }
/* Admin image-upload fields (galleries: cover + multi-image) */
.upload-field { display: grid; gap: 10px; }
.upload-field input[type=file] { width: 100%; padding: 11px 13px; border: 1px dashed var(--line); border-radius: 12px; background: #fafafa; font: inherit; cursor: pointer; }
.upload-current img { max-width: 180px; max-height: 130px; border-radius: 10px; border: 1px solid var(--line); object-fit: cover; display: block; }
.field input[type=file] { width: 100%; padding: 11px 13px; border: 1px dashed var(--line); border-radius: 12px; background: #fafafa; cursor: pointer; }
.upload-gallery { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.upload-thumb { position: relative; width: 120px; display: block; cursor: default; margin: 0; }
.upload-thumb img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.upload-thumb .upload-rm { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 500; color: var(--muted); margin-top: 5px; cursor: pointer; }
.upload-thumb .upload-rm input { width: auto; }
.upload-advanced { margin-top: 12px; }
.upload-advanced summary { font-size: .8rem; color: var(--muted); cursor: pointer; font-weight: 500; }
.upload-advanced textarea { margin-top: 8px; }
.row-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { color: var(--ink); border-color: var(--teal); }
.btn-danger { background: rgba(225,72,72,.10); color: #b3261e; border-color: rgba(225,72,72,.3); }
.btn-danger:hover { background: rgba(225,72,72,.18); color: #b3261e; }
.btn-xs { padding: 6px 12px; font-size: .78rem; border-radius: 8px; }

/* ---------- Dashboard shell ---------- */
.dash-bar { position: sticky; top: 0; z-index: 90; background: var(--ink); color: #cfe2f2; }
.dash-bar-inner { max-width: 1320px; margin-inline: auto; padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; }
.dash-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.dash-brand:hover { color: #fff; }
.dash-brand .brand-mark { color: var(--teal); }
.dash-badge { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(16,185,129,.2); color: #6ee7b7; padding: 3px 8px; border-radius: 6px; }
.dash-bar-actions { display: flex; align-items: center; gap: 16px; }
.dash-link { color: #a7c0d8; font-size: .9rem; }
.dash-link:hover { color: #fff; }
.dash-user { font-size: .9rem; color: #cfe2f2; font-weight: 600; }

.dash { display: grid; grid-template-columns: 248px 1fr; min-height: calc(100vh - 60px); max-width: 1320px; margin-inline: auto; }
.dash-side { border-right: 1px solid var(--line); background: var(--bg-soft); padding: 22px 0; }
.dash-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 14px; }
.dash-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 10px;
  color: var(--ink-2); font-weight: 500; font-size: .92rem; }
.dash-nav-item:hover { background: var(--bg-mute); color: var(--ink); }
.dash-nav-item.active { background: rgba(16,185,129,.12); color: var(--teal-600); font-weight: 600; }
.dash-nav-item .pill { background: var(--gradient); color: #042b22; }
.dash-nav-group { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 18px 14px 8px; }
.dash-main { padding: 30px 34px 60px; min-width: 0; }

.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.dash-head h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 2px; }

/* ---------- Stat cards ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat-n { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--ink); line-height: 1; }
.stat-l { color: var(--muted); font-size: .88rem; margin-top: 6px; }
.stat-card .pill { position: absolute; top: 14px; right: 14px; }

/* ---------- Panels & tables ---------- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 24px; overflow: hidden; }
.panel.pad { padding: 24px 26px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 1.1rem; margin: 0; }
.panel-head a { font-size: .86rem; font-weight: 600; }
.section-subhead { margin: 32px 0 14px; font-size: 1.3rem; }

table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th { text-align: left; font-family: var(--font-display); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
table.data td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: var(--bg-soft); }
.ta-r { text-align: right; } .ta-l { text-align: left; }
.small { font-size: .82rem; } .pad { padding: 18px; }
.muted.small, .small.muted { color: var(--muted); }

.row-actions form { display: inline; }
.stack-form { display: inline-flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 160px; text-align: left; }
.stack-form select, .stack-form input, .stack-form textarea { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .85rem; width: 100%; }
.inline-adjust { display: inline-flex; gap: 6px; margin-right: 8px; }
.inline-adjust input { width: 70px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
details.dt summary { cursor: pointer; list-style: none; }
details.dt summary::-webkit-details-marker { display: none; }
details.dt[open] summary { margin-bottom: 8px; }

.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rowlink { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line); color: var(--ink); }
.rowlink:last-child { border-bottom: 0; }
.rowlink:hover { background: var(--bg-soft); color: var(--ink); }
.link-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.link-btn { background: none; border: 0; color: var(--teal-600); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: 0; }
.timeline { list-style: none; display: flex; flex-direction: column; gap: 12px; padding-left: 0; }
.timeline li { padding-left: 16px; border-left: 2px solid var(--line); }
.block-edit { margin-bottom: 16px; }

/* ---------- Portal ---------- */
.portal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
/* btn-ghost is white-on-translucent for dark heroes; the portal action bar sits on a
   light section, so give ghost buttons here a visible light treatment. */
.portal-actions .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.portal-actions .btn-ghost:hover { color: var(--ink); border-color: var(--teal); }
.portal-grid .card { box-shadow: var(--shadow-sm); }
.card-title { font-size: 1.15rem; margin-bottom: 14px; }
.port-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.port-list li { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.port-list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ===== Portal dashboard — quick actions + content cards ===== */
.portal-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; }
.pq-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.pq-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(16,185,129,.4); }
.pq-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-soft, #eef4f9); color: var(--teal-600); }
.pq-ic svg { width: 22px; height: 22px; }
.pq-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pq-tx strong { font-family: var(--font-display); color: var(--ink); font-size: 1.02rem; line-height: 1.2; }
.pq-tx > span { font-size: .84rem; color: var(--muted); }
.pq-primary { background: var(--gradient-ink); border-color: transparent; }
.pq-primary .pq-tx strong { color: #fff; }
.pq-primary .pq-tx > span { color: #b9cee0; }
.pq-primary .pq-ic { background: rgba(255,255,255,.12); color: var(--teal); }
.pq-primary:hover { border-color: transparent; }

.portal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.portal-links a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .92rem; color: var(--ink-2, #334155); }
.portal-links a svg { width: 17px; height: 17px; color: var(--teal-600); }
.portal-links a:hover { color: var(--teal-600); }

.port-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.port-card-head .card-title { margin: 0; }
.port-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-soft, #eef4f9); color: var(--teal-600); }
.port-ic svg { width: 18px; height: 18px; }
.port-count { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--teal-600); background: rgba(16,185,129,.12); border-radius: 999px; padding: 2px 11px; }
.port-empty { color: var(--muted); margin: 0; }
.port-empty a { color: var(--teal-600); font-weight: 600; }

/* Smart profile-match suggestion banner */
.match-banner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 24px; margin-bottom: 24px;
  background: linear-gradient(120deg, rgba(16,185,129,.10), rgba(34,211,238,.08)); border: 1px solid rgba(16,185,129,.32); border-radius: var(--radius-lg); }
.match-ic { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--teal-600); box-shadow: var(--shadow-sm); }
.match-ic svg { width: 26px; height: 26px; }
.match-body { flex: 1 1 280px; min-width: 240px; }
.match-eyebrow { display: block; font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 4px; }
.match-body strong { display: block; font-family: var(--font-display); font-size: 1.18rem; color: var(--ink); }
.match-body p { margin: 5px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.match-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.match-actions .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.match-actions .btn-ghost:hover { color: var(--ink); border-color: var(--teal); }

/* First-run profile-match (registration moment) */
.welcome-claim { max-width: 620px; margin: 28px auto; text-align: center;
  border: 1px solid rgba(16,185,129,.28); box-shadow: var(--shadow-md); }
.welcome-claim .match-eyebrow { margin-bottom: 10px; }
.welcome-claim-title { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 8px; }
.welcome-claim .lead { color: var(--muted); font-size: .98rem; line-height: 1.55; margin: 0 auto 22px; max-width: 520px; }
.welcome-card { display: flex; align-items: center; gap: 16px; text-align: left;
  max-width: 360px; margin: 0 auto 18px; padding: 14px 18px; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface, #fff); box-shadow: var(--shadow-sm); }
.welcome-avatar { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: linear-gradient(135deg, var(--teal-100, #d1fae5), #e0f2fe);
  color: var(--teal-600); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.welcome-avatar img { width: 100%; height: 100%; object-fit: cover; }
.welcome-card-body { display: flex; flex-direction: column; }
.welcome-card-body strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.welcome-role { color: var(--teal-600); font-weight: 600; font-size: .9rem; }
.welcome-q { font-size: 1.05rem; margin: 0 0 14px; color: var(--ink); }
.welcome-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.welcome-skip { margin: 16px 0 0; }
.welcome-skip a { color: var(--muted); text-decoration: none; }
.welcome-skip a:hover { color: var(--teal-600); }

/* ===== Template picker — selectable cards (replaces the cramped select) ===== */
.tpl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tpl-card { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; transition: border-color .18s, box-shadow .18s, background .18s; }
.tpl-card:hover { border-color: var(--teal); }
.tpl-card input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tpl-card-title { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: .98rem; }
.tpl-card-desc { font-size: .84rem; color: var(--muted); line-height: 1.45; }
.tpl-card-check { flex: 0 0 auto; width: 20px; height: 20px; margin-left: auto; border-radius: 50%; border: 2px solid var(--line); transition: border-color .18s, background .18s; position: relative; }
.tpl-card:has(input:checked) { border-color: var(--teal); background: rgba(16,185,129,.05); box-shadow: 0 0 0 1px var(--teal); }
.tpl-card:has(input:checked) .tpl-card-check { border-color: var(--teal); background: var(--teal); }
.tpl-card:has(input:checked) .tpl-card-check::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 9px; border: solid #042b22; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tpl-card input:focus-visible + .tpl-card-body { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }

/* ===== Grouped submission-form sections ===== */
.form-section-h { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--teal-600); font-weight: 700; margin: 0 0 16px; }
.form-section + .form-section { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 22px; }
.form-section > .field:last-child { margin-bottom: 0; }
.review-card { background: var(--bg-soft); }
.review-card h3 { font-size: .92rem; margin-bottom: 4px; color: var(--teal-600); }
.narrow { max-width: 760px; }
.container.narrow .card { margin-bottom: 22px; }

/* ---------- Document editor ---------- */
.editor-main { background: var(--bg-soft); min-height: 100vh; }
.editor-shell { max-width: 1240px; margin-inline: auto; padding: 18px 20px 60px; }
.editor-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.et-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.et-left .dash-link { color: var(--teal-600); }
.et-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.et-right { display: flex; align-items: center; gap: 12px; }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin-bottom: 14px; position: sticky; top: 12px; z-index: 20; box-shadow: var(--shadow-sm); }
.editor-toolbar button { font-family: var(--font-body); font-size: .85rem; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid transparent; background: transparent; border-radius: 8px; cursor: pointer; color: var(--ink-2); }
.editor-toolbar button:hover { background: var(--bg-mute); color: var(--ink); }
.editor-toolbar .tb-hl { background: #fff3a3; color: #5a4209; }
.editor-toolbar .tb-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.editor-body { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.doc-surface { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 48px 56px; min-height: 70vh; box-shadow: var(--shadow-sm); font-size: 1.02rem; line-height: 1.7; color: var(--text); }
.doc-surface:focus { outline: none; border-color: var(--teal); box-shadow: var(--ring); }
.doc-surface h2 { font-size: 1.5rem; margin: 1.2em 0 .5em; }
.doc-surface h3 { font-size: 1.2rem; }
.doc-surface blockquote { border-left: 3px solid var(--teal); margin: 1em 0; padding: .3em 1em; color: var(--muted); background: var(--bg-soft); }
.doc-surface mark, .doc-surface [style*="background"] { padding: 0 2px; }
.editor-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 60px; }
.side-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.side-head { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.side-head h3 { margin: 0; font-size: 1rem; }
.comment-form { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.comment-form textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .88rem; resize: vertical; }
.comment-list { list-style: none; max-height: 50vh; overflow-y: auto; }
.comment { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.comment.resolved { opacity: .55; }
.c-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.c-quote { border-left: 2px solid var(--gold); margin: 6px 0; padding: 2px 10px; font-size: .82rem; color: var(--muted); font-style: italic; }
.c-body { font-size: .9rem; margin-top: 4px; }
.resolve-btn { margin-top: 6px; }
.rev-list { list-style: none; padding: 12px 18px; display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 1040px) {
  .dash { grid-template-columns: 1fr; }
  .dash-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .dash-nav { flex-direction: row; flex-wrap: wrap; }
  .dash-cols { grid-template-columns: 1fr; }
  .editor-body { grid-template-columns: 1fr; }
  .editor-side { position: static; }
}
@media (max-width: 680px) {
  .form-grid { grid-template-columns: 1fr; }
  .dash-main { padding: 22px 18px 50px; }
  .doc-surface { padding: 28px 22px; }
}

/* ---- Settings tabs ------------------------------------------------------ */
.tabs { margin-top: 4px; }
.tab-list { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; }
.tab-btn { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--muted); padding: 11px 18px; border-radius: 10px 10px 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s, background .2s; }
.tab-btn:hover { color: var(--ink); background: var(--bg-mute); }
.tab-btn.active { color: var(--teal-600); border-bottom-color: var(--teal-600); }
.tab-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px 26px; margin-bottom: 24px; }
/* When JS is active, only the selected panel shows; without JS all are visible. */
.js-tabs .tab-panel { display: none; }
.js-tabs .tab-panel.active { display: block; }
.provider-head { display: flex; align-items: center; gap: 12px; }
.provider-head h2 { margin: 0; font-size: 1.15rem; }
.field input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem; color: var(--ink-3); background: var(--bg-soft); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 22px 0 16px; }
.btn-ghost-danger { background: #fff; color: #b4232a; border-color: rgba(180,35,42,.35); box-shadow: var(--shadow-sm); }
.btn-ghost-danger:hover { background: rgba(180,35,42,.08); color: #921c22; }

/* ---- Alerts (warn variant) ---------------------------------------------- */
.alert.warn, .alert-warn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: #92600a; }

/* ---- File attachments --------------------------------------------------- */
.attach-block { margin-top: 4px; }
.attach-review { border-left: 3px solid var(--teal); padding-left: 16px; }
.attach-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.attach-title { margin: 0; font-size: 1rem; }
.attach-count { font-size: .8rem; color: var(--muted); font-weight: 600; }
.attach-empty { margin: 2px 0 12px; }
.attach-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.attach-item { display: flex; gap: 14px; align-items: flex-start; padding: 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg-soft, #fff); }
.attach-thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; display: flex;
  align-items: center; justify-content: center; background: var(--bg-mute); border: 1px solid var(--line); text-decoration: none; }
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-thumb-icon { font-size: 1.7rem; }
.attach-meta { min-width: 0; flex: 1; }
.attach-name { font-weight: 600; color: var(--ink); word-break: break-word; }
.attach-sub { margin-top: 2px; }
.attach-caption { margin-top: 4px; font-size: .88rem; color: var(--ink-3); }
.attach-actions { margin-top: 6px; display: flex; align-items: center; gap: 14px; }
.attach-link { font-size: .84rem; font-weight: 600; color: var(--teal-600); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.attach-link:hover { text-decoration: underline; }
.attach-link-danger { color: #b4232a; }
.attach-link-edit { color: var(--teal); }
.attach-link-edit:hover { color: var(--teal-600); }
.attach-del { display: inline; margin: 0; }
.attach-upload { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px dashed var(--line);
  border-radius: var(--radius-sm); background: var(--bg-mute); }
.attach-drop { display: block; cursor: pointer; }
.attach-drop input[type=file] { display: block; width: 100%; font-size: .88rem; }
.attach-drop-text { display: block; margin-top: 6px; font-size: .82rem; color: var(--muted); }
.attach-caption-input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .9rem; }
.attach-panel .attach-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 860px) { .attach-panel .attach-cols { grid-template-columns: 1fr; } }

/* ---------- Lab operations: inventory + booking calendar ---------- */
.tag-low { background: rgba(244,183,64,.16); color: #8a6a13; }
.tag-maintenance { background: rgba(34,211,238,.16); color: #0b7d93; }
.pill.bad { background: rgba(225,72,72,.14); color: #b3261e; }

.ops-stats .stat-card.is-bad { border-color: rgba(225,72,72,.5); background: rgba(225,72,72,.05); }
.ops-stats .stat-card.is-warn { border-color: rgba(244,183,64,.55); background: rgba(244,183,64,.06); }

.ops-log { list-style: none; margin: 0; padding: 6px 0; }
.ops-log li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 18px; border-top: 1px solid var(--line); }
.ops-log li:first-child { border-top: 0; }
.ops-delta { flex: none; min-width: 44px; text-align: center; font-weight: 700; font-size: .82rem; padding: 3px 8px; border-radius: 8px; background: var(--bg-mute); color: var(--ink-3); }
.ops-delta.pos { background: rgba(16,185,129,.14); color: var(--teal-600); }
.ops-delta.neg { background: rgba(225,72,72,.12); color: #b3261e; }

.cal-toolbar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.cal-day { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); min-height: 130px; display: flex; flex-direction: column; overflow: hidden; }
.cal-day.is-today { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal) inset; }
.cal-day-head { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 10px; background: var(--bg-mute); border-bottom: 1px solid var(--line); }
.cal-dow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cal-dom { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.cal-day-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.cal-empty { color: var(--line); text-align: center; padding: 6px 0; }
.cal-booking { border: 1px solid var(--line); border-left: 3px solid var(--ink-3); border-radius: 8px; padding: 8px 9px; background: #fff; font-size: .82rem; }
.cal-booking.st-approved { border-left-color: var(--teal); }
.cal-booking.st-requested { border-left-color: #d6a024; }
.cal-booking.st-rejected { border-left-color: #c2453d; opacity: .7; }
.cal-booking.st-completed { border-left-color: #7a8aa0; }
.cal-booking.is-conflict { border-color: rgba(225,72,72,.55); background: rgba(225,72,72,.05); }
.cal-time { font-weight: 700; color: var(--ink); }
.cal-inst { font-weight: 600; }
.cal-who { font-size: .78rem; }
.cal-flag { color: #b3261e; font-size: .74rem; font-weight: 600; margin-top: 3px; }
.cal-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px; }
.cal-actions form { display: inline; margin: 0; }
.cal-link { font-size: .76rem; color: var(--teal-600); font-weight: 600; }
.cal-link:hover { text-decoration: underline; }
@media (max-width: 1000px) { .cal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .cal-grid { grid-template-columns: 1fr; } }

/* ---------- Publications: search + bibliometric badges ---------- */
.pub-search-wrap { margin-bottom: 16px; }
.pub-search { width: 100%; max-width: 520px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: .96rem; }
.pub-search:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.q-badge { display: inline-block; font-size: .68rem; font-weight: 800; padding: 1px 7px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.q-badge.q-q1 { background: rgba(16,185,129,.16); color: #06694b; }
.q-badge.q-q2 { background: rgba(34,211,238,.18); color: #0b7d93; }
.q-badge.q-q3 { background: rgba(244,183,64,.2); color: #8a6a13; }
.q-badge.q-q4 { background: rgba(148,163,184,.25); color: #475569; }
.if-badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 6px; margin-left: 5px; background: var(--bg-mute); color: var(--ink-3); vertical-align: middle; }

/* ---------- Admin analytics: bar rows + quartile grid ---------- */
.bar-rows { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; }
.bar-label { font-weight: 700; font-size: .85rem; color: var(--ink); }
.bar-track { height: 12px; background: var(--bg-mute); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--gradient, var(--teal)); border-radius: 999px; }
.bar-val { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.q-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.q-cell { text-align: center; padding: 16px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.q-cell .q-n { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.q-cell .q-l { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.q-cell.q-q1 { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); }
.q-cell.q-q2 { background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.3); }
.q-cell.q-q3 { background: rgba(244,183,64,.12); border-color: rgba(244,183,64,.35); }
.q-cell.q-q4 { background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.4); }
@media (max-width: 560px) { .q-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Seminars / events: RSVP + calendar ---------- */
.event-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rsvp-count { font-size: .82rem; font-weight: 700; color: var(--teal-600); }
.rsvp { margin-top: 12px; }
.rsvp > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink); padding: 8px 12px; background: var(--bg-mute); border-radius: 10px; list-style: none; user-select: none; }
.rsvp > summary::-webkit-details-marker { display: none; }
.rsvp > summary::before { content: '＋ '; color: var(--teal-600); font-weight: 700; }
.rsvp[open] > summary::before { content: '－ '; }
.rsvp-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.rsvp-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rsvp-row input[type=text], .rsvp-row input[name=name], .rsvp-row input[type=email] { flex: 1 1 160px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: .9rem; }
.rsvp-guests { font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.rsvp-guests input { width: 64px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.past-list { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.past-item { display: flex; align-items: baseline; gap: 10px; padding: 11px 16px; background: #fff; border-top: 1px solid var(--line); }
.past-item:first-child { border-top: 0; }
.past-item time { flex: none; min-width: 92px; }

/* ===== M3 Phase 4: editor upgrades (import/export, compare, threads) ===== */
.editor-topbar .imp-form { display: inline; }
.imp-label { cursor: pointer; }
.et-imp { padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.et-imp.imp-ok { background: #e7f7ec; color: #1c7c43; }
.et-imp.imp-err { background: #fdeaea; color: #b42318; }

.c-actions { display: flex; gap: 12px; margin-top: 5px; }
.comment-replies { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.comment-replies .comment { background: #fafbfc; }
.mention { color: var(--teal, #0c7c8c); font-weight: 600; }
.reply-context { font-size: 13px; background: #f1f5f9; border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; }

.tpl-select { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font: inherit; background: #fff; }

/* Compare versions */
.compare-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.compare-bar label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.compare-bar select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font: inherit; min-width: 220px; max-width: 320px; }
.cmp-arrow { padding-bottom: 9px; color: var(--muted); }
.diff-stat .diff-chip { display: inline-block; padding: 1px 7px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 12px; }
ins.diff-chip { background: #e7f7ec; color: #1c7c43; }
del.diff-chip { background: #fdeaea; color: #b42318; }
.diff-surface { max-width: none; }
.diff-legend { margin-bottom: 12px; }
.diff-output { line-height: 1.7; white-space: normal; }
.diff-output ins { background: #d7f5e1; text-decoration: none; border-radius: 3px; padding: 0 1px; }
.diff-output del { background: #ffd9d4; border-radius: 3px; padding: 0 1px; }

/* ===== M4 Phase 1: tracked changes / suggestions ===== */
.suggest-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.suggest-form .sug-kind, .suggest-form textarea, .suggest-form input { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.suggest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.suggestion { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: #fff; transition: opacity .25s, transform .25s; }
.suggestion.accepted { opacity: .4; border-color: #1c7c43; }
.suggestion.rejected { opacity: .4; border-color: #b42318; }
.sug-change { margin: 4px 0; font-size: 13px; line-height: 1.5; }
.sug-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.sug-replace { background: #e6f0ff; color: #1d4ed8; }
.sug-insert_after { background: #e7f7ec; color: #1c7c43; }
.sug-delete { background: #fdeaea; color: #b42318; }
.sug-anchor { background: #ffd9d4; text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.sug-repl { background: #d7f5e1; text-decoration: none; border-radius: 3px; padding: 0 2px; margin-left: 4px; }
.sug-note { margin-top: 3px; font-style: italic; }
.sug-hl { background: #fff3a3; border-radius: 2px; }

/* ===== M4 Phase 2: search + PI reporting ============================== */
.header-search { display: flex; align-items: center; background: var(--bg-mute); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 12px; }
.header-search input { border: 0; background: transparent; font: inherit; font-size: .88rem; width: 130px; padding: 6px 0; }
.header-search input:focus { outline: none; }
.header-search button { border: 0; background: var(--teal); color: #fff; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.header-search button:hover { filter: brightness(1.06); }
@media (max-width: 980px) { .header-search { display: none; } }

.search-page-form { display: flex; gap: 10px; margin-top: 18px; max-width: 640px; }
.search-page-form input { flex: 1; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: #fff; }
.search-page-form input:focus { outline: none; border-color: var(--teal); box-shadow: var(--ring); }

.search-group { margin-top: 26px; }
.search-group-head { font-size: 1.05rem; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-result { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.search-result .sr-main { min-width: 0; }
.sr-title { font-family: var(--font-display); font-weight: 600; }
.sr-sub { display: block; margin-top: 2px; }
.sr-snippet { margin: 4px 0 0; }
.sr-meta { flex: 0 0 auto; }
.tag-sm { font-size: .66rem; padding: 2px 8px; }

.card-grid { display: grid; gap: 22px; }
.card-grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .card-grid.two { grid-template-columns: 1fr; } }
.inline-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.inline-form .field { margin-bottom: 0; }
.inline-form .field > span { display: block; font-family: var(--font-display); font-weight: 600; font-size: .82rem; margin-bottom: 6px; }

/* ===== M4 P4 — notification bell + center ============================= */
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; color: var(--ink); border: 1px solid var(--line); background: #fff; transition: background .15s, border-color .15s; }
.bell:hover { background: var(--paper, #f6f9fc); border-color: #cdd8e3; }
.bell-light { color: #fff; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.bell-light:hover { background: rgba(255,255,255,.16); }
.bell-dot { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e14848; color: #fff; font-size: .64rem; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.bell-light .bell-dot { box-shadow: 0 0 0 2px var(--ink); }

.notif-actions { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 12px; }
.notif-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.notif-row:last-child { border-bottom: 0; }
.notif-row:hover { background: var(--paper, #f6f9fc); }
.notif-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: transparent; border: 1px solid var(--line); }
.notif-row.unread .notif-dot { background: var(--teal); border-color: var(--teal); }
.notif-row.unread strong { font-weight: 700; }
.notif-body { display: block; }
.notif-meta { display: block; margin-top: 3px; }

/* ===== Phase A: upload progress + submission UX ======================= */
.upload-field .attach-drop { display: block; }
.upload-picked { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.upload-picked-item { font-size: .8rem; background: var(--line); color: var(--ink); border-radius: 6px; padding: .25rem .55rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-progress { display: flex; align-items: center; gap: .6rem; margin: .25rem 0; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
/* Track = full-width grey rail; fill grows to width:X% set by upload.js. The fill is
   a child of the track so its width is a true % of the track (was previously flex:1 1 auto,
   which made flex-grow fill it solid regardless of width → bar looked full while label read 0%). */
.upload-progress-track { flex: 1 1 auto; min-width: 0; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.upload-progress-bar { height: 100%; width: 0; border-radius: 99px; background: var(--gradient); transition: width .25s ease; }
.upload-progress.is-done .upload-progress-bar { background: var(--teal, #14b8a6); }
.upload-progress-pct { flex: 0 0 auto; font-size: .8rem; font-weight: 600; color: var(--ink); width: 3rem; text-align: right; }

/* Prominent "My Portal" / "Admin Dashboard" header button */
.btn-portal { display: inline-flex; align-items: center; gap: .4rem; }
.btn-portal svg { flex: 0 0 auto; }

/* ===== Phase B: members moderation + professional profiles ============ */
.tag-warn { background: #fef3c7; color: #92400e; }
.tag-danger { background: #fee2e2; color: #991b1b; }
.tag-muted { background: var(--line); color: #64748b; }
.member-manage { display: flex; flex-direction: column; gap: .25rem; padding: .6rem 0; min-width: 260px; }
.member-moderate { border-top: 1px dashed var(--line); padding-top: .7rem; }
.moderate-note { width: 100%; margin: .3rem 0 .5rem; }
.moderate-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.member-section { padding-top: .55rem; }
.member-section + .member-section { border-top: 1px dashed var(--line); margin-top: .55rem; }
.member-section-h { margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-600); font-weight: 700; }
.member-dt[open] > summary { background: var(--teal); color: #042b22; border-color: var(--teal); }
.tiny { font-size: .72rem; line-height: 1.4; }
.readmit-box { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--line); }

/* Members → Alumni "ready to graduate" review queue */
.grad-queue { border: 1px solid rgba(245,158,11,.35); background: linear-gradient(180deg, rgba(245,158,11,.06), transparent 60%); }
.grad-queue-head { margin-bottom: .9rem; }
.grad-cards { display: grid; gap: .7rem; }
.grad-card { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.grad-card-who { flex: 1 1 240px; min-width: 220px; }
.grad-card-due { margin-top: .3rem; font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.grad-card-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.grad-card-form input[type=text] { width: 200px; }
.grad-card-form input[type=number] { width: 92px; }
.grad-card-form input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .85rem; }

/* Avatars */
.avatar-lg { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--gradient); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(10,26,47,.12); }
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.avatar-initials { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; }
.profile-photo-row { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.profile-photo-form { flex: 1 1 260px; min-width: 220px; }

/* ===== Phase C — Alumni directory + funding ===== */
.alumni-card .alumni-head { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.alumni-id h3 { font-family: var(--font-display); }
.alumni-now { margin-top: 4px; font-size: .95rem; }
.alumni-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-top: 14px; }
.alumni-gallery img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.member-graduate { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.m-grad { margin-top: 2px; }
.member .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; border-radius: inherit; display: block; }

/* ===== Alumni — professional public network ===== */
.alumni-hero .alumni-stats { display: flex; flex-wrap: wrap; gap: clamp(18px,4vw,52px); margin-top: 26px; }
/* The alumni hero is dark — keep the stat counters legible (was inheriting dark ink). */
.alumni-hero .astat-n { color: #fff; }
.alumni-hero .astat-l { color: rgba(255,255,255,.72); }
.astat { display: flex; flex-direction: column; gap: 2px; }
.astat-n { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem,4vw,2.6rem); line-height: 1; color: var(--ink); }
.astat-l { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* Editorial feature cards — fill width gracefully at any count (incl. a single alumnus). */
.alumni-stories { display: flex; flex-direction: column; gap: clamp(18px,2.4vw,26px); }
.alumni-story { position: relative; display: grid; grid-template-columns: minmax(220px, 280px) 1fr; overflow: hidden;
  background: var(--surface, #fff); border: 1px solid var(--line); border-radius: var(--radius-lg, 18px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(10,26,47,.06)); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.alumni-story:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 18px 40px rgba(10,26,47,.14)); border-color: transparent; }
.alumni-aside { position: relative; padding: clamp(22px,2.4vw,30px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  background: linear-gradient(165deg, rgba(20,184,166,.10), rgba(13,148,136,.04) 60%, transparent); border-right: 1px solid var(--line); }
.alumni-aside h3 { font-family: var(--font-display); margin: 6px 0 0; font-size: 1.18rem; line-height: 1.2; }
.avatar-xl { width: 116px; height: 116px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--gradient);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -10px rgba(13,148,136,.6), 0 0 0 4px #fff; }
.avatar-xl img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.avatar-xl .avatar-initials { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; }
.alumni-chip { display: inline-block; font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: var(--teal-600);
  background: rgba(20,184,166,.12); border: 1px solid rgba(20,184,166,.28); padding: 4px 12px; border-radius: 999px; }
.alumni-role { margin-top: 2px; font-size: .9rem; display: inline-flex; align-items: flex-start; gap: 7px; color: var(--ink); font-weight: 500; line-height: 1.4; }
.alumni-role .now-dot { margin-top: 6px; }
.now-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal, #14b8a6); box-shadow: 0 0 0 4px rgba(20,184,166,.18); flex: 0 0 auto; }
.alumni-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.alumni-links a { font-size: .76rem; font-weight: 600; color: var(--ink-3, #334155); background: #fff; border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 8px; box-shadow: var(--shadow-sm); transition: border-color .2s ease, color .2s ease; }
.alumni-links a:hover { color: var(--teal-600); border-color: var(--teal); }
.alumni-body { padding: clamp(22px,2.4vw,30px); min-width: 0; }
.alumni-bio { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.65; }
.alumni-bio::before { content: "\201C"; color: var(--teal); font-family: var(--font-display); font-size: 1.6rem; line-height: 0; margin-right: 2px; vertical-align: -.3em; }
.alumni-facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.afact { min-width: 0; }
.afact-l { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-600); font-weight: 700; margin-bottom: 3px; }
.afact-v { font-size: .93rem; color: var(--ink); line-height: 1.5; }
.alumni-moments { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.alumni-moments-h { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.alumni-gallery2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.amoment { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; box-shadow: var(--shadow-sm); }
.amoment img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.amoment:hover img { transform: scale(1.07); }
.amoment-cap { position: absolute; left: 0; right: 0; bottom: 0; font-size: .74rem; color: #fff; line-height: 1.3;
  background: linear-gradient(transparent, rgba(10,26,47,.85)); padding: 18px 9px 7px; opacity: 0; transition: opacity .25s ease; }
.amoment:hover .amoment-cap { opacity: 1; }
@media (max-width: 720px){ .alumni-story { grid-template-columns: 1fr; } .alumni-aside { border-right: 0; border-bottom: 1px solid var(--line); } }
.cta-band-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }

/* ===== Alumni — portal photo gallery ===== */
.alumni-portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.alumni-portal-photo { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #f6f8fb; aspect-ratio: 4/3; }
.alumni-portal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alumni-portal-photo.status-rejected img { filter: grayscale(.8) opacity(.6); }
.ap-status { position: absolute; top: 8px; left: 8px; font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 1px 4px rgba(10,26,47,.18); }
.ap-approved { color: #0a7c52; }
.ap-pending { color: #9a6700; }
.ap-rejected { color: #b4232a; }
.ap-note { position: absolute; left: 8px; right: 8px; bottom: 30px; font-size: .72rem; color: #fff; background: rgba(180,35,42,.92); padding: 3px 8px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-cap { position: absolute; left: 0; right: 0; bottom: 0; font-size: .76rem; color: #fff; background: linear-gradient(transparent, rgba(10,26,47,.82)); padding: 16px 10px 7px; }
.ap-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(10,26,47,.62); color: #fff; cursor: pointer; font-size: .8rem; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; }
.alumni-portal-photo:hover .ap-del { opacity: 1; }

/* ===== Alumni — admin review + roster ===== */
.alumni-steps { margin: 0; padding-left: 1.2rem; line-height: 1.7; }
.alumni-steps li { margin-bottom: 6px; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.review-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.review-card > a img { width: 100%; height: 170px; object-fit: cover; display: block; background: #f0f3f7; }
.review-meta { padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 2px; }
.review-actions { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.review-reject summary { list-style: none; display: inline-block; }
.review-reject summary::-webkit-details-marker { display: none; }
.reject-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.reject-form input { width: 100%; }
.alumni-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.roster-card { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.roster-card .avatar-lg { width: 60px; height: 60px; }
.roster-card .avatar-initials { font-size: 1.2rem; }
.roster-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.roster-counts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tag { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.tag-ok { background: rgba(10,124,82,.12); color: #0a7c52; }
.tag-warn { background: rgba(154,103,0,.14); color: #9a6700; }
.roster-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.approved-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.approved-thumb { position: relative; margin: 0; flex: 0 0 auto; }
.approved-thumb img { width: 130px; height: 100px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.approved-thumb figcaption { margin-top: 4px; max-width: 130px; }
.approved-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(10,26,47,.62); color: #fff; cursor: pointer; font-size: .75rem; line-height: 1; }
@media (max-width: 560px){ .alumni-facts { grid-template-columns: 1fr; } }

/* ===== Phase D — Jobs / opportunities board + poster editor ===== */
.poster-editor { border: 1px solid var(--line); border-radius: 12px; padding: 1rem; }
.poster-tabs { margin-bottom: 1rem; }
.poster-editor .tab-panel { display: none; }
.poster-editor .tab-panel.active { display: block; }
.poster-stage { background: repeating-conic-gradient(#eef2f7 0% 25%, #fff 0% 50%) 50% / 20px 20px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; }
#posterCanvas { width: 100%; max-width: 360px; height: auto; border-radius: 6px; box-shadow: 0 6px 24px rgba(10,26,47,.18); }
.poster-controls { margin-top: 1rem; display: grid; gap: .5rem; }
.poster-controls input[type=text] { width: 100%; }
.pe-themes { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-swatch { width: 34px; height: 34px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.pe-swatch.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--teal); }
.pe-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.poster-current img { max-width: 160px; border-radius: 8px; border: 1px solid var(--line); margin-top: 6px; }
.wa-preview { white-space: pre-wrap; background: #0b141a; color: #e9edef; padding: .8rem 1rem; border-radius: 10px; font-size: .85rem; line-height: 1.5; margin-top: .6rem; font-family: inherit; }
/* Public + portal opportunity cards */
.opp-card { display: flex; flex-direction: column; overflow: hidden; }
.opp-poster { display: block; aspect-ratio: 4/5; background: var(--gradient-ink); overflow: hidden; }
.opp-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opp-poster-empty { display: flex; align-items: center; justify-content: center; }
.opp-kind-badge { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .04em; }
.opp-detail { display: grid; gap: 1.2rem; }
.opp-detail-poster img { width: 100%; max-width: 420px; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(10,26,47,.14); }
.opp-body { margin-top: .3rem; line-height: 1.6; }
.opp-row { display: flex; gap: 1.1rem; align-items: flex-start; flex-wrap: wrap; }
.opp-row-poster { flex: 0 0 auto; width: 120px; }
.opp-row-poster img { width: 120px; height: 150px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.opp-row-body { flex: 1 1 320px; min-width: 260px; }

/* ---- Phase E: publications sync + load-more ---------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pub-more-wrap { margin-top: 24px; }
.pub-more-wrap[hidden] { display: none; }
.pub-count { letter-spacing: .02em; }

/* ===== Phase F: Google-Docs-like editor ================================= */
/* Toolbar controls */
.editor-toolbar { row-gap: 4px; }
.editor-toolbar button.active { background: var(--teal); color: #fff; }
.editor-toolbar .tb-ico { font-size: 1rem; line-height: 1; }
.tb-select { height: 34px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 0 6px; font: inherit; font-size: .82rem; color: var(--ink); cursor: pointer; max-width: 150px; }
.tb-select.tb-font { max-width: 130px; }
.tb-fontsize { display: inline-flex; align-items: center; gap: 2px; }
.tb-fsinput { width: 38px; height: 34px; text-align: center; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .82rem; }
.tb-color { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: .9rem; color: var(--ink-2); }
.tb-color:hover { background: var(--bg-mute); }
.tb-color input[type="color"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.tb-color-bar { display: block; width: 18px; height: 3px; border-radius: 2px; margin-top: 1px; }
.tb-spacer { flex: 1 1 auto; }
.tb-zoom { margin-left: auto; }

/* Find & replace bar */
.editor-find { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 12px; box-shadow: var(--shadow-sm); position: sticky; top: 60px; z-index: 19; }
.editor-find input[type="text"] { height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; font-size: .85rem; min-width: 150px; }
.editor-find .find-count { min-width: 70px; }
mark.find-hit { background: #fde68a; color: inherit; }
mark.find-hit.current { background: #f59e0b; color: #fff; }

/* Three-column body: outline | canvas | comments */
.editor-body { display: flex; align-items: flex-start; gap: 22px; }
.editor-outline { flex: 0 0 230px; position: sticky; top: 60px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); max-height: 80vh; overflow: auto; }
.editor-outline[hidden] { display: none; }
.outline-list { list-style: none; padding: 8px 6px 14px; margin: 0; }
.outline-list li a { display: block; padding: 4px 10px; border-radius: 6px; color: var(--ink-2); text-decoration: none; font-size: .86rem; line-height: 1.3; }
.outline-list li a:hover { background: var(--bg-mute); color: var(--ink); }
.outline-list .ol-h2 a { padding-left: 22px; }
.outline-list .ol-h3 a { padding-left: 34px; font-size: .82rem; }
.outline-list .ol-h4 a { padding-left: 46px; font-size: .8rem; color: var(--muted); }
.editor-canvas { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.doc-page { width: 100%; max-width: 850px; transition: transform .15s ease; }
.doc-surface { max-width: 100%; margin-inline: auto; }
.doc-surface img { max-width: 100%; height: auto; border-radius: 6px; }
.doc-surface a { color: var(--teal-600); text-decoration: underline; }
.editor-statusbar { width: 100%; max-width: 850px; display: flex; justify-content: space-between; gap: 16px; padding: 8px 4px 0; }

/* Tables in the document */
.doc-surface table, table.doc-table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.doc-surface th, .doc-surface td { border: 1px solid var(--line); padding: 7px 10px; vertical-align: top; }
.doc-surface th { background: var(--bg-soft); font-weight: 600; text-align: left; }

/* Checklist */
ul.doc-checklist { list-style: none; padding-left: 4px; }
ul.doc-checklist li { position: relative; padding-left: 28px; cursor: pointer; }
ul.doc-checklist li::before { content: ""; position: absolute; left: 2px; top: .25em; width: 16px; height: 16px; border: 2px solid var(--line); border-radius: 4px; background: #fff; }
ul.doc-checklist li.checked::before { background: var(--teal); border-color: var(--teal); }
ul.doc-checklist li.checked::after { content: "✓"; position: absolute; left: 5px; top: .1em; color: #fff; font-size: .8rem; font-weight: 700; }
ul.doc-checklist li.checked { color: var(--muted); text-decoration: line-through; }

@media (max-width: 1100px) {
  .editor-outline { display: none !important; }
}

/* Print: just the page */
@media print {
  body * { visibility: hidden !important; }
  .editor-canvas, .editor-canvas * { visibility: visible !important; }
  .editor-statusbar, .editor-toolbar, .editor-topbar, .editor-find { display: none !important; }
  .editor-canvas { position: absolute; left: 0; top: 0; width: 100%; }
  .doc-page { max-width: 100%; transform: none !important; }
  .doc-surface { border: 0; box-shadow: none; padding: 0; }
}

/* ===== Editor download menu ============================================= */
.et-menu { position: relative; display: inline-block; }
.et-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); padding: 6px; display: flex; flex-direction: column; }
.et-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 7px; font: inherit; color: var(--ink); cursor: pointer; text-decoration: none; }
.et-menu-item:hover { background: var(--bg-soft); }

/* ===== Editor v2 — document-grade layout (page + aligned rail) ========= */
.editor-main { background: #eef0f3; }
.editor-shell { max-width: 1380px; }
.editor-body { display: flex; justify-content: center; align-items: flex-start; gap: 30px; }
.editor-canvas { flex: 0 1 850px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.doc-page { width: 100%; max-width: 850px; margin-inline: auto; }
/* The page: a real sheet — no border, soft floating shadow, generous margins */
.doc-surface { border: 0; border-radius: 2px; padding: 76px 84px; min-height: 1040px; box-shadow: 0 1px 3px rgba(16,24,40,.10), 0 18px 44px -14px rgba(16,24,40,.20); }
.doc-surface:focus { border-color: transparent; box-shadow: 0 1px 3px rgba(16,24,40,.10), 0 18px 44px -14px rgba(16,24,40,.20), inset 0 0 0 2px var(--teal); }
.editor-statusbar { max-width: 850px; margin-inline: auto; }
/* Comment / suggestion / history rail — sticky, aligned to the page top */
.editor-side { flex: 0 0 304px; position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 104px); overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.editor-outline { top: 84px; }

/* Save / download menu polish */
.et-save-btn .et-caret { font-size: .8em; opacity: .85; margin-left: 1px; }
#savePop { min-width: 252px; }
.et-menu-primary { font-weight: 600; }
.et-menu-primary:hover { background: var(--teal); color: #fff; }
.et-menu-kbd { font-size: 11px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.et-menu-primary:hover .et-menu-kbd { color: rgba(255,255,255,.85); }
.et-menu-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 12px 2px; }
.et-menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.et-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

@media (max-width: 1080px) {
  .editor-body { flex-direction: column; align-items: stretch; }
  .editor-canvas { flex: 1 1 auto; align-items: center; }
  .editor-side { flex: 1 1 auto; position: static; width: 100%; max-height: none; overflow: visible; }
}
@media (max-width: 680px) {
  .doc-surface { padding: 40px 24px; min-height: 640px; }
}

/* ===== Schematic / graphical-abstract slider (homepage) ================= */
/* Crossfade carousel — slides stack and fade (no half-image peeking); every
   slide is the same fixed size so varied graphical abstracts look uniform. */
.schematic-slider{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.ss-track{position:relative}
.ss-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .55s ease;display:flex;flex-direction:column;align-items:center;text-align:center}
.ss-slide.active{position:relative;opacity:1;pointer-events:auto}
.ss-img-wrap{flex:0 0 auto;width:100%;background:#fff;padding:clamp(18px,2.6vw,34px);height:clamp(320px,40vw,480px);overflow:hidden}
.ss-img-wrap img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px}
.ss-cap{padding:18px 24px 32px;max-width:840px;min-height:104px;display:flex;flex-direction:column;justify-content:center}
.ss-cap strong{display:block;font-family:var(--font-display);font-size:1.12rem;color:var(--ink);margin-bottom:6px;line-height:1.3}
.ss-caption-text{display:block;color:var(--ink-2);line-height:1.55}
.ss-credit{display:block;margin-top:8px;font-size:.85rem}
.ss-nav{position:absolute;top:calc(50% - 52px);transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.94);color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:background .2s,transform .2s;z-index:3}
.ss-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08);border-color:var(--teal)}
.ss-prev{left:16px}
.ss-next{right:16px}
.ss-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:3;flex-wrap:wrap;padding:0 12px}
.ss-dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;background:rgba(10,26,47,.22);cursor:pointer;transition:background .2s,transform .2s}
.ss-dot.active{background:var(--teal);transform:scale(1.3)}
@media (max-width:640px){
  .ss-img-wrap{padding:14px;height:clamp(220px,56vw,320px)}
  .ss-nav{width:38px;height:38px;font-size:1.3rem;top:calc(50% - 40px)}
}

/* ===== Phase Q — profile linkage, public display & visibility ===== */
.priv-badge{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;background:rgba(244,183,64,.18);color:#8a6a13;vertical-align:middle;margin-left:8px}
.profile-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.profile-tags .tag{background:var(--bg-mute,#eef0f3);color:var(--ink-2,#33404f)}
/* Portal: link-to-public-card + claim list */
.profile-link-card .profile-link-row,
.profile-claim-item{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.profile-link-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.profile-link-actions form{margin:0}
.profile-claim-list{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.profile-claim-item{border:1px solid var(--line,#e3e7ec);border-radius:12px;padding:12px 14px}
/* Portal: per-field visibility picker */
.visibility-box{border:1px solid var(--line,#e3e7ec);border-radius:14px;padding:14px 16px;margin:0}
.visibility-box legend{font-weight:700;font-size:.9rem;padding:0 6px;color:var(--ink,#0a1a2f)}
.visibility-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 18px;margin-top:4px}
.visibility-grid .check{margin:0}

/* ===== Editor topbar polish — fix always-open Save menu + faded ghost buttons ===== */
/* BUGFIX: .et-menu-pop{display:flex} (author, 0,1,0) overrides the UA [hidden] rule,
   so the Save/Download popup never hid. Restore hide-on-[hidden] with higher specificity. */
.et-menu-pop[hidden]{ display: none !important; }

/* The topbar becomes a clean white command bar floating above the page sheet. */
.editor-topbar{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
  row-gap: 8px;
}
.et-left .dash-link{ font-weight: 600; text-decoration: none; white-space: nowrap; }
.et-left .dash-link:hover{ text-decoration: underline; }
.et-title{ font-size: 1.05rem; }

/* btn-ghost is designed for dark hero sections (white text on translucent white); on the
   light topbar it reads as invisible. Give topbar/find ghost buttons a real light treatment:
   neutral white surface, dark ink, crisp border, and clear hover/active feedback. */
.editor-topbar .btn-ghost,
.editor-find .btn-ghost{
  background: #fff;
  color: var(--ink-2);
  border-color: var(--line);
  box-shadow: 0 1px 1px rgba(16,24,40,.03);
  font-weight: 600;
}
.editor-topbar .btn-ghost:hover,
.editor-find .btn-ghost:hover{
  background: var(--bg-soft);
  color: var(--ink);
  border-color: var(--teal);
}
.editor-topbar .btn-ghost:active,
.editor-find .btn-ghost:active{ background: var(--bg-mute); }

/* Import is a <label> styled as a button — keep it inline-aligned and gapless. */
.editor-topbar .imp-form{ margin: 0; }
.editor-topbar .imp-label{ display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.editor-topbar .et-save{ color: var(--muted); white-space: nowrap; }
.editor-topbar .et-save-btn{ font-weight: 600; }

@media (max-width: 680px){
  .editor-topbar{ padding: 10px 12px; }
  .et-title{ max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ===================================================================== */
/* SDLab Live Sessions (video meetings)                                  */
/* ===================================================================== */
.section-title { font-size: 1.35rem; font-weight: 800; margin: 0 0 16px; letter-spacing: -.01em; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; }

.tag-live { background: #dcfce7; color: #15803d; font-weight: 700; }
.tag-cancelled { background: #fee2e2; color: #b91c1c; }

/* List rows */
.meet-list { display: grid; gap: 14px; }
.meet-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.meet-row-main { flex: 1 1 280px; min-width: 0; }
.meet-row-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.meet-row h3 { font-size: 1.12rem; }
.meet-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Forms */
.meet-form .field { margin-bottom: 16px; }
.meet-form textarea { width: 100%; }
.meet-provider .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 6px 0 10px; flex-wrap: wrap; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span { display: block; padding: 10px 18px; cursor: pointer; font-weight: 600; color: #64748b; border-right: 1px solid var(--line); }
.seg-opt:last-child span { border-right: 0; }
.seg-opt input:checked + span { background: var(--teal, #14b8a6); color: #fff; }
.meet-link-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.meet-link-row input { flex: 1 1 320px; }
.member-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; max-height: 240px; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.meet-flags { display: grid; gap: 8px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.btn.danger, .danger { color: #b91c1c; }

/* Invitees (manage) */
.invitee-list { display: grid; gap: 6px; }
.invitee-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.invitee-row:last-child { border-bottom: 0; }
.iconbtn { background: none; border: 0; color: #94a3b8; font-size: 1rem; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.iconbtn:hover { background: #fee2e2; color: #b91c1c; }

/* Join room */
.meet-room-hero { background: linear-gradient(140deg, #0f172a 0%, #134e4a 100%); color: #e2e8f0; }
.meet-room-hero h1 { color: #fff; }
.meet-room-hero .lead, .meet-room-hero .muted, .meet-room-hero .breadcrumb a { color: #cbd5e1; }
.meet-room-top { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.meet-room-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; align-items: start; }
.meet-room-main { display: grid; gap: 18px; }
.meet-room-side { display: grid; gap: 16px; }
.join-card { text-align: center; }
.join-launch { font-size: 1.1rem; }
.countdown { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.cd-label { color: #64748b; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.cd-clock { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--teal, #14b8a6); }
.cal-link { display: inline-block; margin-top: 14px; color: var(--teal, #0d9488); font-weight: 600; }
.host-panel .host-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.recorder { margin-top: 6px; }
.rec-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.rec-status { font-variant-numeric: tabular-nums; }
.meet-rec { width: 100%; border-radius: 12px; background: #000; margin-top: 10px; max-height: 420px; }
.rsvp-card .rsvp-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.participant-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.participant-list li { display: flex; align-items: center; gap: 8px; }
.pdot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex: 0 0 auto; }
.pdot.on { background: #22c55e; }
.pdot.off { background: #ef4444; }
.agenda { line-height: 1.7; }
.notice.ok { border-color: #86efac; background: #f0fdf4; color: #15803d; }

@media (max-width: 880px) {
  .meet-room-grid { grid-template-columns: 1fr; }
}

/* ===== Lab Library / Knowledge Hub ===== */
.lib-cat-form .field { margin-bottom: 12px; }
.lib-cat { margin-top: 18px; }
.lib-cat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lib-cat-id { display: flex; gap: 14px; align-items: flex-start; }
.lib-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(34,211,238,.12)); color: var(--teal-600); }
.lib-ic svg { width: 24px; height: 24px; }
.lib-mini { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lib-mini li { font-size: .9rem; color: var(--ink); }

/* member + public browse */
.lib-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.lib-jump a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; color: var(--ink); font-size: .9rem; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-sm); }
.lib-jump a:hover { border-color: var(--teal); color: var(--teal-600); }
.lib-jump svg { width: 16px; height: 16px; color: var(--teal-600); }
.lib-section { margin: 0 0 40px; scroll-margin-top: 90px; }
.lib-section-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.lib-section-head h2 { margin: 0; font-size: 1.4rem; }
.lib-section-head p { margin: 2px 0 0; font-size: .92rem; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.lib-item { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.lib-item.is-pinned { border-color: rgba(16,185,129,.4); box-shadow: 0 0 0 1px rgba(16,185,129,.18), var(--shadow-sm); }
.lib-item-top { display: flex; align-items: center; justify-content: space-between; }
.lib-item h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.lib-desc { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.lib-kind { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--surface-2, #f1f5f9); color: var(--muted); }
.lib-kind-file { background: rgba(16,185,129,.14); color: var(--teal-600); }
.lib-kind-link { background: rgba(59,130,246,.14); color: #2563eb; }
.lib-kind-video { background: rgba(244,63,94,.14); color: #e11d48; }
.lib-kind-note { background: rgba(168,85,247,.14); color: #9333ea; }
.lib-body { font-size: .9rem; line-height: 1.6; color: var(--ink); white-space: normal; }
.lib-details { margin: 2px 0; }
.lib-details summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--teal-600); }
.lib-details .lib-body { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.lib-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.lib-actions .tiny { font-size: .75rem; }

/* ===== Lab Library — rich-text editor + rendered body ===== */
.rt-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.rt-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--surface-2, #f8fafc); }
.rt-btn { border: 1px solid transparent; background: transparent; border-radius: 7px; min-width: 30px; height: 30px; padding: 0 8px; cursor: pointer; font-size: .9rem; color: var(--ink); }
.rt-btn:hover { background: #fff; border-color: var(--line); color: var(--teal-600); }
.rt-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.rt-editor { min-height: 180px; max-height: 460px; overflow-y: auto; padding: 12px 14px; font-size: .92rem; line-height: 1.6; color: var(--ink); outline: none; }
.rt-editor:empty:before { content: attr(data-placeholder); color: var(--muted); }
.rt-editor:focus { box-shadow: inset 0 0 0 2px rgba(16,185,129,.25); }
.rt-editor h3 { font-size: 1.05rem; margin: 10px 0 4px; }
.rt-editor ul, .rt-editor ol { padding-left: 22px; margin: 6px 0; }
.rt-editor blockquote { border-left: 3px solid var(--teal); margin: 8px 0; padding: 2px 0 2px 12px; color: var(--muted); }
.rt-editor pre { background: #0f172a; color: #e2e8f0; padding: 10px 12px; border-radius: 8px; overflow-x: auto; font-size: .85rem; }
/* rendered body in member/public cards */
.lib-body h3 { font-size: 1rem; margin: 10px 0 4px; }
.lib-body ul, .lib-body ol { padding-left: 20px; margin: 6px 0; }
.lib-body li { margin: 3px 0; }
.lib-body blockquote { border-left: 3px solid var(--teal); margin: 8px 0; padding: 2px 0 2px 12px; color: var(--muted); }
.lib-body pre { background: #0f172a; color: #e2e8f0; padding: 10px 12px; border-radius: 8px; overflow-x: auto; font-size: .82rem; }
.lib-body a { color: var(--teal-600); text-decoration: underline; }
.lib-body p { margin: 6px 0; }

/* "★ New" badge on the portal Lab Library link */
.pill-new { background: linear-gradient(135deg, var(--teal), #06b6d4); color: #fff; border: none; font-weight: 700; }

/* Show/hide password toggle */
.pw-input { position: relative; display: block; }
.pw-input > input { width: 100%; padding-right: 64px; }
.pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  border: none; background: transparent; color: var(--teal-600); font-size: .82rem; font-weight: 700;
  cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1; }
.pw-toggle:hover { background: rgba(16,185,129,.10); }

/* ===== Dynamic application form ===== */
.apply-existing-toggle { margin: 6px 0 2px; }
.apply-existing { border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 10px;
  padding: 14px 16px; margin: 4px 0 8px; background: linear-gradient(180deg, rgba(16,185,129,.05), transparent); }
.apply-existing .field { margin-bottom: 12px; }
.apply-existing .field:last-child { margin-bottom: 0; }
/* admin: application detail key/value + inline edit */
.mini-kv { width: 100%; border-collapse: collapse; margin: 6px 0 2px; }
.mini-kv th { text-align: left; width: 42%; vertical-align: top; padding: 3px 8px 3px 0; font-weight: 600; color: var(--muted); font-size: .82rem; }
.mini-kv td { padding: 3px 0; font-size: .85rem; color: var(--ink); }
.af-edit { display: inline-block; }
.af-edit > summary { list-style: none; cursor: pointer; }
.af-edit > summary::-webkit-details-marker { display: none; }
.af-edit-form { text-align: left; margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 320px; box-shadow: var(--shadow-sm); }

/* ===== Form builder tabs + custom field sections + answers ===== */
.form-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.form-tab { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none; box-shadow: var(--shadow-sm); }
.form-tab:hover { border-color: var(--teal); color: var(--teal-600); }
.form-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.cf-section-head { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink);
  margin: 14px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.form-intro { margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid var(--teal);
  background: linear-gradient(180deg, rgba(16,185,129,.06), transparent); border-radius: 8px; }
.form-intro h2 { margin: 0 0 4px; font-size: 1.2rem; }
.form-intro p { margin: 0; color: var(--muted); line-height: 1.5; }
.answers-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; background: #fff; box-shadow: var(--shadow-sm); }
.answers-title { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 10px; }

/* ===== World-class application / submission form layout ===== */
.apply-section { position: relative; z-index: 2; }
.apply-layout { display: grid; grid-template-columns: 310px 1fr; gap: 30px; align-items: start; margin-top: -56px; }
.apply-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }
.apply-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 22px; box-shadow: var(--shadow-md); }
.apply-card-soft { background: linear-gradient(180deg, rgba(16,185,129,.06), #fff); box-shadow: var(--shadow-sm); }
.apply-eyebrow { display: block; font-family: var(--font-display); font-weight: 700; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 6px; }
.apply-aside-title { font-size: 1.2rem; margin: 0 0 14px; }
.apply-card h3 { font-size: 1rem; margin: 0 0 10px; }
.apply-steps { list-style: none; counter-reset: ap; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.apply-steps li { counter-increment: ap; position: relative; padding-left: 40px; }
.apply-steps li::before { content: counter(ap); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), #06b6d4); color: #fff; font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
.apply-steps li b { display: block; font-family: var(--font-display); font-size: .95rem; color: var(--ink); }
.apply-steps li span { display: block; color: var(--muted); font-size: .85rem; line-height: 1.5; margin-top: 2px; }
.apply-need { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.apply-need li { position: relative; padding-left: 26px; font-size: .9rem; color: var(--ink); }
.apply-need li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--teal-600); font-weight: 800; }
.apply-card p { font-size: .88rem; line-height: 1.55; margin: 0; }

.app-form.card { padding: 30px 32px; }
.app-form .fs-head { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 18px; }
.app-form .fs-num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.app-form .fs-head h3 { margin: 0; font-size: 1.18rem; }
.app-form .fs-head p { margin: 3px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.app-form .form-section { padding: 22px 0 4px; }
.app-form .form-section + .form-section { border-top: 1px solid var(--line); margin-top: 4px; }
.app-form .form-section:first-child { padding-top: 4px; }
.form-actions { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.form-actions .btn { min-width: 220px; }
@media (max-width: 880px) {
  .apply-layout { grid-template-columns: 1fr; margin-top: -40px; }
  .apply-aside { position: static; order: 2; }
  .app-form.card { padding: 22px 18px; }
}

/* ===== Compact alumni directory grid ===== */
.alumni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; align-items: start; }
.alumni-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 22px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease; }
.alumni-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.alumni-card .ac-top { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; }
.avatar-md { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--gradient);
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(16,185,129,.22); }
.avatar-md img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.avatar-md .avatar-initials { font-size: 1.45rem; }
.ac-name { margin: 4px 0 0; font-size: 1.06rem; line-height: 1.25; }
.ac-role { display: flex; align-items: flex-start; gap: 7px; font-size: .82rem; color: var(--muted); line-height: 1.4; max-width: 230px; }
.ac-role .now-dot { margin-top: 5px; }
.ac-detail { width: 100%; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; text-align: left; }
.ac-bio { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--ink-3, #334155);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ac-facts { margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.ac-facts div { display: flex; flex-direction: column; }
.ac-facts dt { font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--teal-600); }
.ac-facts dd { margin: 1px 0 0; font-size: .82rem; color: var(--ink); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-moments { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: 100%; margin-top: 4px; }
.ac-moment { width: 46px; height: 46px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); }
.ac-moment img { width: 100%; height: 100%; object-fit: cover; }
.ac-moment-more { display: grid; place-items: center; min-width: 46px; height: 46px; border-radius: 9px; background: var(--bg-soft, #f1f5f9);
  color: var(--muted); font-weight: 700; font-size: .8rem; }
.ac-links { margin-top: auto; padding-top: 6px; }

/* Alumni filter toolbar */
.alumni-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.al-search-wrap { position: relative; flex: 1 1 240px; min-width: 200px; }
.al-search-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1.05rem; pointer-events: none; }
.al-search-wrap input { width: 100%; padding: 11px 14px 11px 36px; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: #fff; }
.al-search-wrap input:focus { outline: none; border-color: var(--teal); box-shadow: var(--ring); }
.al-filter { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: #fff; cursor: pointer; }
.al-filter:focus { outline: none; border-color: var(--teal); box-shadow: var(--ring); }
.al-count { margin-left: auto; color: var(--muted); font-size: .85rem; font-weight: 600; }
.al-empty { padding: 28px 0; text-align: center; }

/* ===== Homepage PI snapshot (balanced photo + inline stats) ===== */
.pi-snapshot { padding-top: 56px; padding-bottom: 56px; }
.pi-snap-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 50px; align-items: center; }
.pi-snap-text h2 { margin: 6px 0 12px; }
.pi-snap-text .lead { margin: 0 0 14px; }
.pi-snap-bio { line-height: 1.7; margin: 0; }
.pi-snap-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 24px; }
.pi-snap-stats > div { flex: 1 1 120px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: #fff; box-shadow: var(--shadow-sm); }
.pi-snap-stats strong { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); line-height: 1; }
.pi-snap-stats > div > span { display: block; margin-top: 6px; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.pi-snap-media { display: flex; flex-direction: column; }
.pi-snap-photo { margin: 0; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg, 0 24px 60px rgba(2,6,23,.22)); }
.pi-snap-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.pi-snap-fallback { aspect-ratio: 4 / 5; border-radius: 22px; background: var(--gradient-ink); display: grid; place-items: center; box-shadow: var(--shadow-lg, 0 24px 60px rgba(2,6,23,.22)); }
.pi-snap-fallback .ini { font-family: var(--font-display); font-weight: 700; font-size: 4rem; color: #fff; opacity: .92; }
.pi-snap-cred { margin: 16px 0 0; font-size: .85rem; color: var(--muted); text-align: center; line-height: 1.5; }
@media (max-width: 860px) {
  .pi-snap-grid { grid-template-columns: 1fr; gap: 30px; }
  .pi-snap-media { order: -1; max-width: 340px; }
}

/* People-preview polish (match PI section) */
.people-strip { margin-top: 34px; }
.person-card { padding: 28px 18px 24px; display: flex; flex-direction: column; align-items: center; }
.person-card .avatar { width: 86px; height: 86px; margin-bottom: 14px;
  box-shadow: 0 12px 26px -10px rgba(16,185,129,.55), 0 0 0 4px rgba(16,185,129,.10); }
.person-card .pc-research { margin-top: 8px; font-size: .8rem; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.person-card .pc-view { margin-top: 12px; }
.person-card:hover .avatar { box-shadow: 0 16px 32px -10px rgba(16,185,129,.7), 0 0 0 4px rgba(16,185,129,.18); }

/* ===== Team page optimization (compact, balanced, world-class) ===== */
.team-section { padding-top: 40px; }
.team-toolbar { margin-bottom: 30px; }
.team-group { margin-bottom: 40px; }
.team-group-head { margin-bottom: 16px; }
/* Cards size to their content (no stretching to the tallest), so there are no
   empty gaps; the "View profile" cue is always faintly visible. */
.team-grid { align-items: start; gap: 16px; }
.member { padding: 22px 18px 18px; height: auto; }
.member .avatar { width: 80px; height: 80px; margin-bottom: 12px; }
.member .m-research { margin-top: 8px; }
.member .m-view { opacity: .5; transform: none; padding-top: 11px; margin-top: 10px; }
.member:hover .m-view, .member:focus-within .m-view { opacity: 1; transform: none; }
.member.pi-feature { padding: 26px 30px; align-items: center; }
.member.pi-feature .avatar { width: 92px; height: 92px; }
@media (min-width: 1100px) { .team-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }

/* Scholarship inline apply box */
.schol-apply { margin-top: 16px; padding: 16px 16px 14px; border: 1px solid var(--line); border-left: 3px solid var(--teal);
  border-radius: 12px; background: linear-gradient(180deg, rgba(16,185,129,.05), transparent); }
.schol-apply-h { font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--ink); margin-bottom: 10px; }
.schol-apply .field { margin-bottom: 12px; }

/* Deadline-aware badges */
.tag-soon { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.is-expired { opacity: .62; }
.is-expired:hover { opacity: .85; }

/* Scholarship catalog cards */
.schol-card { display: flex; flex-direction: column; }
.schol-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.schol-chip { font-size: .74rem; font-weight: 600; color: var(--ink-2, #334155); background: var(--bg-soft, #f1f5f9);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; }
.schol-dates { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: .85rem; color: var(--muted); }
.schol-dates strong { color: var(--ink); }
.schol-body { margin-top: 12px; font-size: .9rem; line-height: 1.6; }
.schol-req { margin-top: 12px; }
.schol-req summary { cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--teal-600); }
.schol-req ul { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.schol-req li { font-size: .85rem; color: var(--ink-2, #334155); line-height: 1.45; }

/* Admin scholarship-cycle nudge */
.schol-nudge { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 18px 20px; margin: 0 0 22px;
  background: linear-gradient(120deg, rgba(245,158,11,.10), rgba(16,185,129,.08)); border: 1px solid rgba(245,158,11,.34); border-radius: 14px; }
.schol-nudge-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: #b45309; box-shadow: var(--shadow-sm); }
.schol-nudge-ic svg { width: 22px; height: 22px; }
.schol-nudge-body { flex: 1 1 320px; min-width: 260px; }
.schol-nudge-body strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.schol-nudge-body p { margin: 4px 0 0; line-height: 1.5; }
.schol-nudge-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.schol-nudge-chip { font-size: .78rem; font-weight: 600; color: var(--ink-2, #334155); background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px; text-decoration: none; }
.schol-nudge-chip:hover { border-color: var(--teal); color: var(--teal-600); }
.schol-nudge > .btn { align-self: center; }

/* Scholarships → talk to our alumni */
.alumni-help-head { max-width: 640px; }
.alumni-help-head h2 { margin: 6px 0 8px; }
.alumni-help-head .lead { margin: 0; }
.mentor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 22px 0; }
.mentor-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s, border-color .18s; }
.mentor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(16,185,129,.4); }
.mentor-av { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--teal), #06b6d4); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.mentor-av img { width: 100%; height: 100%; object-fit: cover; }
.mentor-meta { display: flex; flex-direction: column; min-width: 0; }
.mentor-meta strong { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.mentor-note { font-size: .78rem; color: var(--teal-600); margin-top: 3px; }
.mentor-cta { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--teal-600); white-space: nowrap; }
.alumni-help-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* PI page → Author book with cover */
.author-book { display: flex; gap: 16px; align-items: flex-start; padding-top: 8px; }
.author-book-cover { flex: 0 0 auto; width: 88px; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden;
  box-shadow: 0 10px 26px -8px rgba(2,6,23,.35); background: var(--bg-soft, #f1f5f9); display: grid; place-items: center; }
.author-book-cover img { width: 100%; height: 100%; object-fit: cover; }
.author-book-ph { color: var(--teal-600); }
.author-book-ph svg { width: 32px; height: 32px; }
.author-book-meta { display: flex; flex-direction: column; }
.author-book-meta b { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.author-book-meta .muted { margin-top: 3px; line-height: 1.45; font-size: .9rem; }

/* Scholarships → general admission criteria (collapsible) */
.admission-guide { border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 14px;
  background: linear-gradient(180deg, rgba(16,185,129,.05), #fff); margin-bottom: 26px; overflow: hidden; }
.admission-guide > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.admission-guide > summary::-webkit-details-marker { display: none; }
.ag-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--teal-600); box-shadow: var(--shadow-sm); }
.ag-ic svg { width: 21px; height: 21px; }
.ag-sum { display: flex; flex-direction: column; }
.ag-sum strong { font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); }
.ag-chev { margin-left: auto; color: var(--muted); transition: transform .2s; }
.admission-guide[open] .ag-chev { transform: rotate(90deg); }
.admission-guide-body { padding: 4px 22px 22px; }
.admission-guide-body h3 { font-size: .98rem; margin: 16px 0 6px; color: var(--ink); }
.admission-guide-body ul { padding-left: 20px; margin: 6px 0; display: flex; flex-direction: column; gap: 5px; }
.admission-guide-body li { font-size: .9rem; line-height: 1.55; color: var(--ink-2, #334155); }
.admission-guide-body p { font-size: .9rem; line-height: 1.6; color: var(--muted); margin: 6px 0; }
.admission-guide-body a { color: var(--teal-600); }

/* Portal pending-verification holding page */
.pending-card { max-width: 620px; margin: 28px auto; text-align: center; }
.pending-badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px; background: #fef3c7; color: #92400e; margin-bottom: 12px; }
.pending-badge.denied { background: #fee2e2; color: #991b1b; }
.pending-card h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 10px; }
.pending-card .lead { color: var(--muted); margin: 0 auto 18px; max-width: 520px; }
.pending-steps { list-style: none; margin: 18px auto; padding: 0; max-width: 460px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.pending-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--ink); }
.pending-steps li span { flex: 0 0 auto; }
.pending-steps li.now { font-weight: 600; color: var(--teal-700, #047857); }
.pending-steps li.muted { color: var(--muted); }
.pending-card .hero-cta { justify-content: center; }

/* Portal lab inventory / chemicals */
.chem-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.chem-table-wrap { overflow-x: auto; }
.chem-table { width: 100%; min-width: 720px; }
.chem-table th, .chem-table td { white-space: nowrap; }
.chem-table td:first-child { white-space: normal; }
.chem-haz { color: #b45309; cursor: help; }

/* Admin: verification queue */
.verify-queue { border: 1px solid rgba(245,158,11,.34); background: linear-gradient(120deg, rgba(245,158,11,.08), rgba(16,185,129,.05)); margin-bottom: 18px; }

/* Email preferences list */
.pref-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.pref-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.pref-row.is-essential { background: var(--bg-soft, #f8fafc); cursor: default; }
.pref-row input[type=checkbox] { margin-top: 3px; width: auto; flex: 0 0 auto; }
.pref-meta { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.pref-meta strong { font-family: var(--font-display); color: var(--ink); }
.pref-row .tag { align-self: center; }

/* ===== Writings (articles · essays · poetry) ===== */
.writings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.writing-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s, border-color .18s; }
.writing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(16,185,129,.4); }
.writing-cover { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-soft, #f1f5f9); }
.writing-cover img { width: 100%; height: 100%; object-fit: cover; }
.writing-card.is-poetry .writing-body { background: linear-gradient(180deg, rgba(168,85,247,.06), #fff); }
.writing-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.writing-kind { display: inline-block; align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: rgba(16,185,129,.14); color: var(--teal-600); }
.writing-kind-essay { background: rgba(59,130,246,.14); color: #2563eb; }
.writing-kind-poetry { background: rgba(168,85,247,.14); color: #9333ea; }
.writing-kind-reflection { background: rgba(245,158,11,.16); color: #b45309; }
.writing-body h3 { margin: 2px 0 0; font-size: 1.12rem; line-height: 1.3; }
.writing-date { margin: 0; }
.writing-excerpt { margin: 2px 0 0; font-size: .88rem; line-height: 1.55; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.writing-card .link-arrow { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: .85rem; color: var(--teal-600); }

/* article + poem rendering */
.writing-hero-cover { margin: 0 0 24px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); }
.writing-hero-cover img { width: 100%; height: auto; display: block; }
.writing-article { font-size: 1.06rem; line-height: 1.8; color: var(--ink-2, #1f2937); }
.writing-article p { margin: 0 0 1.1em; }
.writing-article h3 { font-size: 1.15rem; margin: 1.6em 0 .5em; color: var(--ink); }
.writing-article .poem { font-size: 1.12rem; line-height: 2.1; text-align: center; color: var(--ink); font-style: normal; }
.writing-article .poem[dir="rtl"] { font-size: 1.35rem; line-height: 2.4; font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif; }
.writing-article.is-poetry { background: linear-gradient(180deg, rgba(168,85,247,.05), transparent); border-radius: 14px; padding: 26px 28px; }
.writing-foot { margin-top: 30px; }
.writing-more { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.writing-more h3 { font-size: 1.05rem; margin: 0 0 12px; }
.writing-more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.writing-more a { text-decoration: none; color: var(--ink); font-weight: 600; }
.writing-more a:hover { color: var(--teal-600); }

/* Homepage "From the PI" teaser */
.from-pi { border: 1px solid var(--line); border-left: 4px solid var(--teal);
  border-radius: var(--radius-lg); padding: 26px 30px; background: linear-gradient(120deg, rgba(16,185,129,.06), rgba(34,211,238,.04)); }
.from-pi-feature { display: block; text-decoration: none; color: inherit; transition: transform .18s; }
.from-pi-feature:hover { transform: translateX(2px); }
.from-pi-tag { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.from-pi-title { margin: 4px 0 8px; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.from-pi-feature:hover .from-pi-title { color: var(--teal-600); }
.from-pi-excerpt { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 760px; }
.from-pi-more { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--teal-600); }
.from-pi-list { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.from-pi-list-head { margin: 0 0 10px; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.from-pi-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.from-pi-list li a { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; padding: 12px 10px; border-radius: 10px; border-bottom: 1px solid var(--line); font-weight: 600; transition: background .15s, color .15s; }
.from-pi-list li:last-child a { border-bottom: 0; }
.from-pi-list .writing-kind { flex: 0 0 auto; width: 76px; text-align: center; padding-left: 0; padding-right: 0; align-self: center; }
.from-pi-list li a:hover { background: rgba(255,255,255,.6); color: var(--teal-600); }
.from-pi-all { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--teal-600); text-decoration: none; }

/* Admin "auto-fill from a link" import box */
.import-box { border: 1px solid var(--line); border-left: 4px solid var(--teal); background: linear-gradient(120deg, rgba(16,185,129,.06), rgba(34,211,238,.04)); }
.field-autofilled { animation: autofillFlash 2.2s ease; }
@keyframes autofillFlash { 0% { background:#d1fae5; box-shadow:0 0 0 3px rgba(16,185,129,.25); } 100% { background:#fff; box-shadow:none; } }

/* Contact map + resources software list */
.contact-map { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.contact-map iframe { width: 100%; height: 380px; border: 0; display: block; }
.soft-list ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.soft-list li { padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: .92rem; line-height: 1.5; }
.soft-list li strong { color: var(--ink); }

/* ============================================================
   Mobile polish — phones only. Everything here lives inside
   max-width media queries, so the desktop/laptop layout is
   never affected.
   ============================================================ */
@media (max-width: 680px) {
  /* Admin & data tables: scroll horizontally inside their panel instead of
     pushing the whole page sideways (prevents the off-screen Actions column). */
  .dash-main .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dash-main table.data { min-width: 560px; }
  /* Long unbreakable strings (chemical names, URLs) must wrap, not overflow. */
  h1, h2, h3, .pub-title, .inst-name, .schol-card h3, .news-card h3, .from-pi-title { overflow-wrap: break-word; }
  /* Tame the tall embedded contact map on small screens. */
  .contact-map iframe { height: 280px; }
  /* Tables that already opt into horizontal scroll get smoother momentum. */
  .chem-table-wrap, .approved-strip { -webkit-overflow-scrolling: touch; }
  /* Comfortable spacing for the "From the PI" list rows on phones. */
  .from-pi { padding: 22px 18px; }
  .from-pi-list li a { gap: 10px; }
}
@media (max-width: 480px) {
  /* Slightly smaller hero/page titles so long headings breathe on narrow phones. */
  .hero h1, .page-hero h1 { font-size: clamp(1.95rem, 8.6vw, 2.6rem); }
  /* Stack and full-width the hero call-to-action buttons for easy thumb reach. */
  .hero-cta, .page-hero .actions, .cta-actions { width: 100%; }
  .hero-cta .btn, .cta-actions .btn { width: 100%; justify-content: center; }
  /* Give edge-to-edge breathing room without cramping. */
  .container { padding-inline: 16px; }
}

/* ============================================================
   Site polish (2026-11-05): full-width banner, a header that fits,
   a first screen that fits, calmer section rhythm. Appended last so
   it overrides the rules above; delete this block to roll back.
   ============================================================ */

/* Banner strip: the gradient belongs on the full-width row, not on the
   link inside .container (which left white margins either side). */
.banner-strip .banner { background: linear-gradient(135deg,#10B981,#22D3EE); }
.banner-strip .banner-success { background: linear-gradient(135deg,#10B981,#34d399); }
.banner-strip .banner-warn { background: linear-gradient(135deg,#F4B740,#f6c662); }
.banner-strip .banner a, .banner-strip .banner span { display: block; background: none; text-align: center;
  padding: 7px 16px; font-size: .86rem; font-weight: 600; color: #042b22; }
.banner-strip .banner-warn a, .banner-strip .banner-warn span { color: #5a4209; }
.banner-strip .banner a:hover { filter: none; text-decoration: underline; text-underline-offset: 3px; }

/* Header: signed-out visitors used to get Sign in / Create account / Apply
   pushed ~190px past the right edge (sideways scroll on every page).
   Wider header row, a two-line brand, and staged collapses so it always fits. */
.site-header .container { max-width: 1360px; }
.header-inner { height: 68px; gap: 16px; }
.brand { flex-shrink: 0; }
.brand-text strong { max-width: 9.2em; }
.brand-text small { white-space: nowrap; }
.main-nav ul { gap: 2px; }
.main-nav a { padding: 9px 12px; }
.header-actions { flex-shrink: 0; gap: 10px; }
.header-search input { width: 120px; }
@media (max-width: 1440px) {
  .header-actions.guest .header-search { padding: 2px; }
  .header-actions.guest .header-search input { display: none; }
}
@media (max-width: 1220px) { .header-actions.guest .btn-apply { display: none; } }
@media (max-width: 1100px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav { display: block; }
  .header-actions { margin-left: auto; }
}

/* Icons inside buttons had no size, so a full-width phone button grew a
   96px arrow. */
.btn > svg:not([width]) { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.nw { white-space: nowrap; }

/* Home hero: fit the headline, lead and buttons in the first screen. */
.hero-bg { min-height: clamp(520px, calc(100svh - 104px), 760px);
  padding-top: clamp(48px, 5.5vw, 80px); padding-bottom: clamp(56px, 6vw, 88px); }
.hero-inner-solo .hero-copy { max-width: 800px; }
.hero-bg h1 { line-height: 1.06; margin-bottom: 16px; }
@media (min-width: 481px) { .hero-bg h1 { font-size: clamp(2.2rem, 4.3vw, 3.6rem); } }
.hero-bg .eyebrow { margin-bottom: 12px; }
.hero-bg .hero-lead { font-size: 1.12rem; max-width: 62ch; margin-bottom: 22px; }
.hero-bg .hero-pi { margin: -6px 0 18px; }
.hero-bg .hero-keywords { gap: 6px 8px; font-size: .88rem; margin-bottom: 26px; }
.hero-bg .hero-apply { margin-top: 16px; }
@media (max-width: 640px) {
  .hero-bg .eb-lab { display: none; }
  .hero-bg .eyebrow { font-size: .68rem; letter-spacing: .1em; }
}
@media (max-width: 560px) { .hero-bg .hero-keywords { display: none; } }

/* Interior page titles: same "too tall" issue as the home hero. */
.page-hero { padding: clamp(44px, 5vw, 72px) 0 clamp(36px, 4vw, 56px); }
@media (min-width: 481px) { .page-hero h1 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); } }
.page-hero .lead { margin-bottom: 0; }

/* PI page on phones: photo first and smaller; secondary buttons share a row. */
@media (max-width: 880px) {
  .pi-hero-grid { gap: 24px; }
  .pi-hero-photo { order: -1; max-width: 200px; }
}
@media (max-width: 480px) {
  .page-hero .hero-cta .btn:not(.btn-primary) { width: auto; flex: 1 1 0; }
}

/* Section rhythm: ~220px between sections was too airy. */
.section { padding: clamp(44px, 5vw, 76px) 0; }
.section-sm { padding: clamp(32px, 4vw, 56px) 0; }
.section-head { margin-bottom: 36px; }

/* Research page: facilities note + funders (migrated from aafzal.net, 2026-11-05). */
.facilities-note { max-width: 820px; margin: -12px auto 32px; text-align: center; color: var(--muted); }
.funders { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; padding: 0; }
.funders li { display: grid; gap: 4px; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius, 16px); text-align: center; }
.funders strong { font-family: var(--font-display); color: var(--ink); font-size: 1.02rem; }
.funders span { color: var(--muted); font-size: .9rem; }

/* Course pages (migrated from aafzal.net, 2026-11-05). */
.course-more { display: inline-flex; margin-top: 10px; font-size: .88rem; }
.course-banner { margin: 0 0 28px; border-radius: var(--radius, 16px); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.course-banner img { display: block; width: 100%; max-height: 300px; object-fit: contain; }
.course-body h2, .course-files h2 { font-size: 1.3rem; margin: 30px 0 12px; }
.course-body h3 { font-size: 1.02rem; margin: 16px 0 6px; color: var(--teal-600); }
.course-body ul { padding-left: 1.2em; }
.course-body li { margin: 4px 0; }
.grade-list { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.grade-list li { margin: 0 !important; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); display: grid; gap: 2px; }
.grade-list strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); }
.grade-list span { color: var(--muted); font-size: .88rem; }
.book-list em { font-style: normal; font-weight: 600; color: var(--ink); }
.material-list { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.material-list li { margin: 0 !important; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.course-file { display: flex; gap: 14px; align-items: flex-start; color: var(--ink); }
.course-file:hover strong { color: var(--teal-600); }
.course-file-ic { flex: 0 0 auto; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--teal-600); border-radius: 6px; padding: 5px 7px; margin-top: 2px; }

/* Letters of recommendation (portal + admin). */
.lor-form { display: grid; gap: 8px; }
.lor-step { border: 0; border-top: 1px solid var(--line); padding: 20px 0 6px; margin: 0; display: grid; gap: 10px; }
.lor-step:first-child { border-top: 0; padding-top: 0; }
.lor-step legend { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); padding: 0; display: flex; align-items: center; gap: 10px; }
.lor-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--gradient); color: #042b22; font-weight: 700; font-size: .9rem; flex: 0 0 auto; }
.lor-yn { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.lor-list { display: grid; gap: 12px; }
.lor-item-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lor-item-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.lor-letters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lor-ready { border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.05); }
.lor-dl { display: grid; grid-template-columns: minmax(160px, 34%) 1fr; gap: 8px 18px; margin: 0 0 18px; }
.lor-dl dt { color: var(--muted); font-size: .88rem; }
.lor-dl dd { margin: 0; color: var(--ink); white-space: pre-wrap; }
.lor-how .lor-n { margin-bottom: 10px; }
.tag-in_progress { background: rgba(34,211,238,.16); color: #0b7d93; }
.tag-declined { background: rgba(220,38,38,.10); color: #b42318; }
@media (max-width: 640px) { .lor-dl { grid-template-columns: 1fr; gap: 2px; } .lor-dl dd { margin-bottom: 10px; } }

/* Admin: labelled file manager (course files). */
.files-edit { display: grid; gap: 8px; margin-bottom: 12px; }
.files-edit-head, .files-edit-row { display: grid; grid-template-columns: 70px 1fr 200px 90px; gap: 10px; align-items: center; }
.files-edit-head { font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.files-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.files-add input[type=text] { max-width: 320px; }
@media (max-width: 760px) { .files-edit-head { display: none; } .files-edit-row { grid-template-columns: 1fr; } }

/* Admin: email template preview. */
.email-preview { width: 100%; min-height: 620px; border: 1px solid var(--line); border-radius: 12px; background: #f1f5f9; }

/* Scholarship posters / banners. */
.schol-posters { margin: 10px 0 14px; }
.schol-poster { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-soft); }
.schol-poster img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.schol-poster-more { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.schol-poster-more img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* Portal: shared documents. */
.share-row { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.share-row:hover { border-color: var(--teal); background: rgba(16,185,129,.04); color: var(--ink); }

/* Footer: developer credit (editable in Admin → Site content → Other settings). */
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.footer-credit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: .82rem; color: #8aa3ba; }
.footer-credit-label { color: #8aa3ba; }
.footer-credit-name { display: inline-flex; align-items: center; gap: 6px; color: #e2edf7; font-weight: 600; text-decoration: none; padding: 2px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.footer-credit-name:hover, .footer-credit-name:focus-visible { color: #fff; border-bottom-color: var(--teal); }
.footer-credit-in { color: #0a66c2; background: #fff; border-radius: 3px; flex: 0 0 auto; }
.footer-credit-role { color: #8aa3ba; }
@media (max-width: 640px) { .footer-bottom { flex-direction: column; align-items: flex-start; } }
.footer-bottom > p { margin: 0; }