/* Palette and type are taken from the lab's own site, csdl.postech.ac.kr:
   #253dbe is the indigo it puts on buttons, the active nav and the 2px rule
   across the top of every page; #222542 is its deep navy; #1a30a7 its hover.
   Neutrals are biased toward that indigo rather than left pure grey.
   The site's stylesheet asks for Lato with Noto Sans KR behind it but never
   loads the webfont, so it falls back to the Korean system face. We ship the
   Latin subset so the intended face actually renders; Hangul still comes from
   the system stack. Mono carries counts and identifiers only.

   Node hues sit far apart in hue (240 / 345 / 150 / 40) so the four kinds stay
   separable, with the topic node holding the site's own indigo. */
:root {
  --bg: #eceef5;
  --bg-panel: #ffffff;
  --bg-sunken: #f3f4fa;
  --fg: #222542;
  --fg-dim: #5b5f7a;
  --fg-faint: #8f93a8;
  --line: #e0e2ee;
  --accent: #253dbe;
  --accent-strong: #1a30a7;
  --accent-soft: #e6e9fa;
  --topic: #253dbe;
  --paper: #c62d51;
  --person: #2f7d54;
  --keyword: #96690f;
  --shadow: 0 1px 2px rgba(34,37,66,.06), 0 8px 24px rgba(34,37,66,.08);
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Lato", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
          -apple-system, BlinkMacSystemFont, "Segoe UI", dotum, sans-serif;
}
/* The viewer's default is "system", which stamps nothing on :root -- only the
   media query separates light from dark there. The :not([data-theme="light"])
   guard keeps an explicit light choice winning over a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12131f;
    --bg-panel: #1a1c2c;
    --bg-sunken: #0d0e17;
    --fg: #e5e7f2;
    --fg-dim: #9b9fb8;
    --fg-faint: #6b6f88;
    --line: #2b2e44;
    --accent: #8b9bf5;
    --accent-strong: #a9b5f8;
    --accent-soft: #202542;
    --topic: #8b9bf5;
    --paper: #f08099;
    --person: #6bc493;
    --keyword: #dfb45f;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --bg: #12131f;
  --bg-panel: #1a1c2c;
  --bg-sunken: #0d0e17;
  --fg: #e5e7f2;
  --fg-dim: #9b9fb8;
  --fg-faint: #6b6f88;
  --line: #2b2e44;
  --accent: #8b9bf5;
  --accent-strong: #a9b5f8;
  --accent-soft: #202542;
  --topic: #8b9bf5;
  --paper: #f08099;
  --person: #6bc493;
  --keyword: #dfb45f;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
/* .empty and .view set display, which otherwise beats the hidden attribute */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
/* Below ~940px the three columns cannot all hold their ground, and the old
   answer -- hide the sidebar -- took the year, field and people filters with
   it. Put a floor under the layout and let a narrow screen scroll sideways
   instead: everything stays reachable, just not all at once.
   (html scrolls, so body's own overflow no longer propagates to the viewport
   and keeps clipping the internal flex columns.) */
html { overflow-x: auto; }
body {
  min-width: 940px;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  display: flex; flex-direction: column; overflow: hidden;
}

/* ---------- top bar ---------- */
#topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 0 16px; height: 54px; flex: none;
  background: var(--bg-panel); border-bottom: 1px solid var(--line);
  /* the lab site puts this 2px indigo rule across the top of every page */
  border-top: 2px solid var(--accent);
}
.brand { display: flex; align-items: baseline; gap: 9px; }
.brand-mark { font-weight: 900; letter-spacing: .1em; color: var(--accent); font-size: 15px; }
.brand-sub {
  color: var(--fg-dim); font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.homelink {
  color: var(--fg-faint); font-size: 11.5px; text-decoration: none;
  letter-spacing: .04em; white-space: nowrap;
}
.homelink:hover { color: var(--accent); text-decoration: underline; }

.viewtoggle { display: flex; background: var(--bg-sunken); border-radius: 7px; padding: 2px; }
.viewtoggle button {
  border: 0; background: none; color: var(--fg-dim); cursor: pointer;
  padding: 5px 14px; border-radius: 5px; font: inherit; font-size: 13px;
}
.viewtoggle button.active {
  background: var(--accent); color: #fff; font-weight: 700;
}

.searchbox { flex: 1 1 0; min-width: 0; max-width: 520px; position: relative; }
.searchbox input {
  width: 100%; padding: 7px 30px 7px 12px; font: inherit; font-size: 13px;
  color: var(--fg); background: var(--bg-sunken);
  border: 1px solid transparent; border-radius: 7px; outline: none;
}
.searchbox input:focus { border-color: var(--accent); background: var(--bg-panel); }
/* the UA's own clear button would sit next to ours */
.searchbox input::-webkit-search-cancel-button,
.searchbox input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
#search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--fg-faint); cursor: pointer; font-size: 18px;
}
.topmeta { margin-left: auto; display: flex; align-items: center; gap: 12px;
           color: var(--fg-dim); font-size: 12.5px; }
#theme { border: 0; background: none; color: var(--fg-dim); cursor: pointer; font-size: 15px; }
.langtog {
  float: right; margin: -2px -2px 4px 10px;
  border: 1px solid var(--line); background: var(--bg-panel); color: var(--fg-faint);
  cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 6px; border-radius: 4px;
}
.langtog:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- layout ---------- */
/* position + overflow so the closed detail panel, which sits at a negative
   margin (and is absolutely placed under 900px), is clipped instead of
   widening the document by its own 380px at every viewport. */
#layout { flex: 1; display: flex; min-height: 0; position: relative; overflow: hidden; }

#sidebar {
  width: 250px; flex: none; overflow-y: auto; padding: 14px;
  background: var(--bg-panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 18px;
}
.panel h3 {
  margin: 0 0 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--fg-faint);
}
.panel.grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dim { color: var(--fg-faint); font-weight: 400; letter-spacing: 0; text-transform: none; }

.yearrow { position: relative; height: 22px; }
.yearrow input {
  position: absolute; left: 0; width: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.yearrow input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 13px; height: 13px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-panel); cursor: pointer;
}
.yearrow input::-moz-range-thumb {
  pointer-events: auto; width: 13px; height: 13px; border: 2px solid var(--bg-panel);
  border-radius: 50%; background: var(--accent); cursor: pointer;
}
.yearrow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 3px;
  background: var(--bg-sunken); border-radius: 2px;
}
.yearlabel { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); text-align: center; }

.catrow {
  display: flex; align-items: center; gap: 7px; padding: 3px 0;
  cursor: pointer; user-select: none; font-size: 13px;
}
.catrow input { accent-color: var(--accent); margin: 0; }
.catrow .n {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  color: var(--fg-faint); font-variant-numeric: tabular-nums;
}

/* Only meaningful in the graph, so it says so rather than sitting there inert. */
.panel.inactive { opacity: .45; }
.panel.inactive .catrow { pointer-events: none; }
.panel-note { font-size: 11px; color: var(--fg-faint); margin-top: 5px; }

#reset {
  width: 100%; margin-top: 2px; padding: 6px 10px; font: inherit; font-size: 12px;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
#reset:hover:not(:disabled) { border-color: var(--accent); }
#reset:disabled { color: var(--fg-faint); background: var(--bg-sunken); cursor: default; }

#people-list { overflow-y: auto; flex: 1; min-height: 0; margin: 0 -4px; }
.people-group {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-faint); padding: 12px 6px 4px;
  border-bottom: 1px solid var(--line); margin-bottom: 3px;
}
.people-group:first-child { padding-top: 2px; }
.people-group span { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
.person-row {
  display: flex; align-items: center; gap: 7px; padding: 4px 6px;
  border-radius: 5px; cursor: pointer; font-size: 13px;
}
.person-row:hover { background: var(--bg-sunken); }
.person-row.on { background: var(--accent-soft); color: var(--accent); }
.person-row .n { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--fg-faint); }

.pending { font-size: 11.5px; color: var(--fg-faint); line-height: 1.5;
           border-top: 1px dashed var(--line); padding-top: 10px; }

/* ---------- stage ---------- */
#stage { flex: 1; position: relative; min-width: 0; overflow: hidden; }
/* The legend used to float over the canvas and sat right on top of the
   lower branches. It gets its own strip instead, and the views end above it. */
.view { position: absolute; inset: 0 0 34px; }
.view svg { display: block; width: 100%; height: 100%; }
.empty { position: absolute; inset: 0 0 34px; display: grid; place-items: center; color: var(--fg-faint); }

.legendbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px; z-index: 2;
  display: flex; align-items: center; gap: 15px; padding: 0 14px;
  font-size: 11.5px; color: var(--fg-dim);
  background: var(--bg-panel); border-top: 1px solid var(--line);
}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.n-topic { background: var(--topic); } .n-paper { background: var(--paper); }
.n-person { background: var(--person); } .n-keyword { background: var(--keyword); }
.legendbar .hint { color: var(--fg-faint); border-left: 1px solid var(--line); padding-left: 13px;
                   min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Credit at the right end of the legend strip. It is a flex item rather
   than an overlay so it can never cover the view hint; the hint gives way
   with an ellipsis when the stage is too narrow for both. */
.egg {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-faint); white-space: nowrap;
  -webkit-user-select: none; user-select: none;
}
.egg-mark { opacity: .55; transition: opacity .25s ease, color .25s ease; }
.egg:hover { color: var(--fg-dim); }
.egg:hover .egg-mark { opacity: 1; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .egg-mark { transition: none; } }

/* tree */
.tree-link { fill: none; stroke: var(--line); stroke-width: 1.4px; }
.tree-node { cursor: pointer; }
.tree-node circle { stroke-width: 1.8px; }
.tree-node text { fill: var(--fg); paint-order: stroke;
                  stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.tree-node.is-paper text { fill: var(--fg-dim); }
.tree-node.hit text { fill: var(--accent); font-weight: 600; }
.tree-node.sel text { fill: var(--accent); font-weight: 700; }
.tree-node.sel circle { stroke: var(--accent); stroke-width: 3px; }
.tree-node .count { font-family: var(--mono); fill: var(--fg-faint); stroke: none; }

/* graph */
/* links are never targets; without this a 1px line steals clicks near a node */
.g-link { stroke: var(--line); stroke-width: 1px; pointer-events: none; }
.g-kp { stroke: var(--keyword); stroke-opacity: .38; }
.g-cite { stroke: var(--paper); stroke-opacity: .6; stroke-width: 1.6px; }
.g-node { cursor: pointer; }
.g-node text { fill: var(--fg-dim); paint-order: stroke;
               stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.faded { opacity: .12; }
.g-node.sel circle { stroke: var(--fg); stroke-width: 2.5px; }

/* ---------- detail ---------- */
#detail {
  width: 380px; flex: none; background: var(--bg-panel);
  border-left: 1px solid var(--line); overflow-y: auto;
  position: relative; transition: margin-right .18s ease;
}
#detail.closed { margin-right: -380px; }
#detail-close {
  position: absolute; top: 10px; right: 12px; border: 0; background: none;
  color: var(--fg-faint); font-size: 22px; cursor: pointer; line-height: 1;
}
#detail-body { padding: 18px 18px 40px; }

.chip.is-advisor { cursor: default; }

/* label/value pairs on the person card: one grid, so the values line up */
.facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 18px; margin: 16px 0 0; }
.facts dt {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fg-faint); align-self: baseline; white-space: nowrap;
}
.facts dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }

.d-kicker { font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
            color: var(--fg-faint); margin-bottom: 6px; }
.d-title {
  font-family: var(--sans); font-weight: 900; font-size: 19px; line-height: 1.3;
  letter-spacing: -.005em;
  margin: 0 0 10px; font-weight: 600; letter-spacing: -.005em; text-wrap: balance;
}
.d-venue { font-size: 12.5px; color: var(--fg-dim); margin-bottom: 4px; }
.d-venue b { color: var(--fg); font-weight: 600; }
.d-summary {
  background: var(--bg-sunken); border-left: 3px solid var(--accent);
  padding: 11px 13px; border-radius: 0 7px 7px 0; margin: 14px 0; font-size: 13.5px;
}
.d-section { margin-top: 16px; }
.d-section h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .08em;
                text-transform: uppercase; color: var(--fg-faint); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12px; padding: 3px 9px; border-radius: 20px;
  background: var(--bg-sunken); color: var(--fg-dim); cursor: pointer; border: 1px solid transparent;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.lab { background: var(--accent-soft); color: var(--accent); }
.chip.plain { cursor: default; }
.chip.plain:hover { border-color: transparent; color: var(--fg-dim); }
.links { display: flex; flex-wrap: wrap; gap: 7px; }
.links a {
  font-size: 12px; padding: 4px 11px; border-radius: 6px; text-decoration: none;
  background: var(--bg-sunken); color: var(--fg-dim); border: 1px solid var(--line);
}
.links a:hover { color: var(--accent); border-color: var(--accent); }
.award { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 4px;
         background: var(--accent); color: #fff; margin-bottom: 8px; }
.warn { font-size: 11.5px; color: var(--fg-faint); border: 1px dashed var(--line);
        padding: 7px 9px; border-radius: 6px; margin-top: 10px; }
.crumb { font-size: 12px; color: var(--fg-dim); }
.crumb b { color: var(--accent); font-weight: 600; }
.plist { margin: 0; padding: 0; list-style: none; }
.plist li { padding: 7px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.plist li:hover { color: var(--accent); }
.plist .meta { font-size: 11.5px; color: var(--fg-faint); font-family: var(--mono); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}