/* ============================================================
   roster.css — self-contained skin for the faculty profile page
   New pages link this instead of the shared main.css (old pages
   keep main.css; new/old coexist). Dark node-network hero that
   echoes the 8080 student-login background + light, airy content.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --hero-1:#0c2140; --hero-2:#0a1628; --hero-3:#070f1d; --rim:#46c8ff;
  --paper:#f7f9fc; --surface:#ffffff; --surface-2:#f0f4f9; --line:#e3e9f1;
  --ink:#1a2432; --muted:#5f6d7e; --head:#0c2f5e; --link:#2f7fd6;
  --group:#3a86d6;
  --mono: ui-monospace,"SFMono-Regular","Consolas","Menlo",monospace;
  --sans:"Segoe UI",system-ui,-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0e131a; --surface:#161d27; --surface-2:#1b2431; --line:#273140;
    --ink:#e6ebf2; --muted:#98a6b6; --head:#cbe0ff; --link:#5aa6f0;
  }
}
:root[data-theme="light"] {
  --paper:#f7f9fc; --surface:#ffffff; --surface-2:#f0f4f9; --line:#e3e9f1;
  --ink:#1a2432; --muted:#5f6d7e; --head:#0c2f5e; --link:#2f7fd6;
}
:root[data-theme="dark"] {
  --paper:#0e131a; --surface:#161d27; --surface-2:#1b2431; --line:#273140;
  --ink:#e6ebf2; --muted:#98a6b6; --head:#cbe0ff; --link:#5aa6f0;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased; }
img { max-width:100%; }

.profile { background:var(--paper); color:var(--ink); }

/* ---------- dark hero ---------- */
.hero { position:relative; min-height:22rem; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(88% 78% at 10% 4%, rgba(46,96,158,.55), transparent 56%),
    linear-gradient(158deg, var(--hero-1) 0%, var(--hero-2) 60%, var(--hero-3) 100%); }
.hero .net { position:absolute; inset:0; z-index:-2; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,13,26,.10) 0%, rgba(5,13,26,.06) 38%, rgba(5,13,26,.58) 100%),
             radial-gradient(120% 90% at 50% 0%, transparent 58%, rgba(3,9,18,.55) 100%); }

.hero .topbar { position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:1.05rem 1.6rem; color:#eaf3ff; }
.hero .dept { font-size:.82rem; font-weight:600; letter-spacing:.02em; display:flex; align-items:center; gap:.55rem; opacity:.92; color:#eaf3ff; text-decoration:none; }
.hero .dept:hover { opacity:1; }
.hero .dept:hover .cn-only, .hero .dept:hover .en-only { text-decoration:underline; text-underline-offset:3px; }
.hero .dept .mark { width:1.55rem; height:1.55rem; border-radius:5px; display:grid; place-items:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); font-weight:800; font-size:.8rem; }
.hero .lang-mini { font-size:.76rem; font-weight:600; color:#dbe9ff; text-decoration:none; border:1px solid rgba(255,255,255,.35); padding:.2rem .6rem; border-radius:999px; }
.hero .lang-mini:hover { background:rgba(255,255,255,.14); }

.hero .idwrap { position:relative; z-index:2; display:flex; flex-direction:row; align-items:center; gap:2rem; padding:1.5rem 3.4rem; width:100%; max-width:72rem; margin:0 auto; }
.avatar { flex:0 0 auto; width:172px; height:214px; border-radius:20px; overflow:hidden; display:grid; place-items:center; font-size:4.3rem; font-weight:700; color:#fff;
  background:linear-gradient(150deg, color-mix(in srgb,var(--group) 50%,transparent), rgba(10,30,60,.6));
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.28); }
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }

.identity { color:#fff; min-width:0; }
.identity .kicker { display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rim); margin-bottom:.35rem; }
.identity h1 { margin:0; line-height:1.12; font-weight:800; text-wrap:balance; text-shadow:0 2px 18px rgba(3,14,32,.6); letter-spacing:.01em; }
.identity h1 .cn { font-size:3.95rem; }
.identity h1 .en { display:inline-block; font-size:3.4rem; font-weight:800; opacity:1; margin-left:0; letter-spacing:.01em; }
/* name toggle must beat the per-span display above (higher specificity) */
.profile[data-lang="cn"] .identity h1 .en { display:none; }
.profile[data-lang="en"] .identity h1 .cn { display:none; }
.identity h1 .post { font-size:1.7rem; font-weight:600; color:#cddef5; margin-left:.7rem; letter-spacing:0; white-space:nowrap; text-shadow:0 1px 10px rgba(3,14,32,.5); }
.identity .role { margin:.7rem 0 0; font-size:1.28rem; font-weight:500; color:#d7e6fb; text-shadow:0 1px 10px rgba(3,14,32,.6); }
.identity .meta-row { margin-top:.95rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:.6rem; }
.badge { font-size:.74rem; font-weight:700; letter-spacing:.02em; color:#eaf5ff; background:color-mix(in srgb,var(--group) 40%,transparent); border:1px solid color-mix(in srgb,var(--rim) 55%,transparent); padding:.22rem .7rem; border-radius:999px; }
.badge.alt { background:transparent; color:#cfe6ff; border-style:dashed; border-color:color-mix(in srgb,var(--rim) 45%,transparent); }
.home { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; text-decoration:none; color:#fff; padding:.28rem .8rem; border:1px solid rgba(255,255,255,.55); border-radius:999px; transition:background .15s, transform .15s; }
.home:hover { background:rgba(255,255,255,.16); transform:translateY(-1px); }
.home::before { content:"\1F517"; font-size:.8em; }

/* ---------- body ---------- */
.body { padding:2.9rem 3.4rem 2rem; display:flex; flex-direction:column; gap:2.7rem; max-width:72rem; margin:0 auto; }
/* scroll-reveal is opt-in via .profile.reveal (added by JS) so a JS-less
   deployed page still shows every section instead of staying invisible */
.profile.reveal .sec { opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.profile.reveal .sec.in { opacity:1; transform:none; }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 0 1.15rem; padding-bottom:.7rem; border-bottom:1px solid var(--line); }
.sec-head .t { display:flex; align-items:baseline; gap:.7rem; }
.sec-head h2 { margin:0; font-size:1.24rem; font-weight:700; color:var(--head); letter-spacing:.01em; }
.sec-head .en { font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

/* contact grid */
.facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.fact { background:var(--surface); padding:1.2rem 1.35rem; }
.fact.wide { grid-column:1 / -1; }
/* email + lab as one row of two columns, joined to the grid above */
.facts.pair { grid-template-columns:repeat(2,1fr); }
.facts:not(:last-child) { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.facts + .facts { border-top:0; border-top-left-radius:0; border-top-right-radius:0; }
.fact .k { font-family:var(--mono); font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--group); margin:0 0 .4rem; }
.fact .v { margin:0; font-size:1.03rem; font-weight:600; color:var(--ink); word-break:break-word; }
.fact .v a { color:var(--link); text-decoration:none; }
.fact .v a:hover { text-decoration:underline; }
.fact .sub { display:block; font-family:var(--mono); font-size:.78rem; font-weight:500; color:var(--muted); margin-top:.25rem; }

/* overview definition rows */
.lang-toggle { border:1px solid var(--link); background:transparent; color:var(--link); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; padding:.28rem .85rem; border-radius:999px; transition:background .15s, color .15s; }
.lang-toggle:hover { background:var(--link); color:#fff; }
.lang-toggle:focus-visible { outline:2px solid var(--link); outline-offset:2px; }
.ov { display:flex; flex-direction:column; }
.ov-row { display:grid; grid-template-columns:8.5rem 1fr; gap:1.2rem; padding:1rem 0; border-top:1px solid var(--line); }
.ov-row:first-child { border-top:0; }
.ov-row .lab { font-weight:700; font-size:1.02rem; color:var(--head); }
.ov-row .lab .en { display:block; font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:.15rem; }
.ov-row ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.ov-row li { position:relative; padding-left:1.05rem; font-size:1.01rem; }
.ov-row li::before { content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--group); }
[data-lang="en"] .cn-only { display:none; }
[data-lang="cn"] .en-only { display:none; }

/* highlighted work — thumbnail rows */
.tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.1rem; }
.tabs button { border:1px solid var(--line); background:var(--surface); color:var(--muted); font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; padding:.34rem .8rem; border-radius:999px; transition:background .15s, color .15s, border-color .15s; }
.tabs button:hover { border-color:var(--group); color:var(--head); }
.tabs button[aria-pressed="true"] { background:#1f66b3; border-color:#1f66b3; color:#fff; }
.tabs button:focus-visible { outline:2px solid var(--link); outline-offset:2px; }
/* cap list height so a teacher with many entries doesn't make the page endless */
.work { display:none; flex-direction:column; max-height:28rem; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.work.active { display:flex; animation:fade .35s ease; padding-right:.5rem; }
.work::-webkit-scrollbar { width:8px; }
.work::-webkit-scrollbar-track { background:transparent; }
.work::-webkit-scrollbar-thumb { background:var(--line); border-radius:4px; }
@keyframes fade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.item { display:grid; grid-template-columns:76px 1fr; gap:1.1rem; padding:1rem 0; border-top:1px solid var(--line); }
.item:first-child { border-top:0; }
.thumb { width:76px; height:56px; border-radius:7px; display:grid; place-items:center; color:rgba(255,255,255,.92); font-family:var(--mono); font-size:.9rem; font-weight:700; letter-spacing:.04em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  background:linear-gradient(135deg, color-mix(in srgb,var(--group) 42%,#0a2340), color-mix(in srgb,var(--group) 12%,#0a1830)); }
.item .body-txt { min-width:0; }
.item .cite { margin:0; font-size:.98rem; color:var(--ink); line-height:1.6; text-align:justify; word-break:break-word; }
.work .empty { color:var(--muted); padding:.5rem 0; }
.item .ttl { margin:0 0 .3rem; font-size:.96rem; font-weight:600; color:var(--ink); line-height:1.4; }
.item .authors { margin:0; font-size:.86rem; color:var(--muted); }
.item .authors b { color:var(--ink); font-weight:600; }
.item .venue { margin:.3rem 0 0; font-size:.82rem; color:var(--muted); }
.item .venue .yr { font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--group); font-weight:700; }
.item .links { margin-top:.4rem; display:flex; flex-wrap:wrap; gap:.7rem; }
.item .links a { font-size:.78rem; font-weight:600; color:var(--link); text-decoration:none; }
.item .links a:hover { text-decoration:underline; }
.proj { display:grid; grid-template-columns:auto 1fr auto; gap:.5rem 1rem; align-items:baseline; padding:.75rem 0; border-top:1px solid var(--line); font-size:.92rem; }
.proj:first-child { border-top:0; }
.proj .yr { font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700; color:var(--group); }
.proj .role { color:var(--muted); font-size:.8rem; white-space:nowrap; }

.foot { margin-top:1.4rem; padding:1.5rem 2.2rem; text-align:center; font-size:.76rem; color:var(--muted); border-top:1px solid var(--line); background:var(--surface-2); }

/* ---------- responsive ---------- */
@media (max-width:640px) {
  .hero { min-height:18.5rem; }
  .hero .idwrap { flex-direction:column; align-items:center; text-align:center; gap:.9rem; padding:2.6rem 1.3rem 1.5rem; max-width:none; }
  .identity .meta-row { justify-content:center; }
  .avatar { width:128px; height:160px; font-size:3.3rem; }
  .identity h1 .cn { font-size:2.75rem; }
  .identity h1 .en { font-size:2.45rem; }
  .body { padding:1.8rem 1.4rem 1rem; gap:2rem; }
  .facts, .facts.pair { grid-template-columns:1fr; }
  .ov-row { grid-template-columns:1fr; gap:.4rem; }
  .item { grid-template-columns:1fr; }
  .thumb { width:100%; height:120px; }
  .foot { padding:1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .profile.reveal .sec { opacity:1; transform:none; transition:none; }
  .work.active { animation:none; }
}