/* Publications, /publications. Served by the pinned jsDelivr <link> in
   code/publications.html.

   The list follows cvlab.postech.ac.kr/page/publication: a year in the left
   margin, a rail with a dot beside it, and one stacked entry per paper,
   title over authors over venue. Its metrics are kept (24px year in a 65px
   column, 50px rail offset, 17px title, 14px sub-line) and its orange dot
   becomes --kaist-blue.

   Notion:  Linked list views of `Papers` and `Patents`, grouped by `Year`,
              showing Authors, Venue, Title

   property-6d5a7b51  Authors
   property-5f567753  Venue

   The page keeps its 📜 icon in Notion and hides it on the site. Super draws
   the icon absolutely and reserves its height on the title instead, so the
   margin has to go with it or the title floats 84px down an empty band
   (both rules read from /styles/super.css). */

.page__publications {
  --pub-year: 65px;
  --pub-rail: 50px;
  --pub-sub: #666;
  --pub-tabs-bg: #f1f2f4;
}

.page__publications .notion-header__icon-wrapper {
  display: none;
}

.page__publications .notion-header__content.no-cover.has-icon
  .notion-header__title-wrapper {
  margin-top: 0;
}

/* ---- the outer tabs read as sections, the inner switcher as a filter ----

   Notion's tabs block is native here: .notion-tabs holds a .notion-tabs__nav
   of buttons and .notion-tabs__panels, the inactive panel already carries
   [aria-hidden] and display:none, and the toggle is Super's own React state.
   Its default dress is a bordered card, which reads as a widget dropped on
   the page rather than as the page's own structure. ---------------------- */

.page__publications .notion-tabs {
  margin: 0 0 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.page__publications .notion-tabs__nav {
  gap: 2rem;
  margin: 0 0 2rem;
  border-bottom: 1px solid var(--rule);
}

.page__publications .notion-tabs__button {
  height: auto;
  padding: 0 0 14px;
  border-radius: 0;
  background: none;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--muted);
  /* the active rule sits on the nav's own edge, so the button carries a
     transparent one from the start and nothing shifts on click */
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.page__publications .notion-tabs__button:hover {
  background: none;
  color: var(--sub);
}

.page__publications .notion-tabs__button.active {
  background: none;
  color: var(--kaist-blue);
  font-weight: 700;
  border-bottom-color: var(--kaist-blue);
}

/* ---- the view switcher becomes a segmented tab bar --------------------

   Super renders the switcher as a dropdown, but every view is already in the
   markup: a hidden .notion-dropdown__menu holds one .notion-dropdown__option
   per view, each carrying its own click handler. Taking the menu out of its
   popup positioning turns the list into a row of tabs with no script. ------ */

.page__publications .notion-dropdown__button,
.page__publications .notion-dropdown__menu-header {
  display: none;
}

.page__publications .notion-dropdown,
.page__publications .notion-dropdown__menu-wrapper {
  width: 100%;
}

.page__publications .notion-dropdown__menu {
  position: static;
  width: 100%;
  margin-bottom: 28px;
  min-width: 0;
  max-width: none;
  transform: none;
  border-radius: 12px;
  background: var(--pub-tabs-bg);
  box-shadow: none;
  overflow: visible;
}

/* the closed and closing states park the menu off-screen and deaden it */
.page__publications .notion-dropdown__menu.initial-state,
.page__publications .notion-dropdown__menu.animate-out,
.page__publications .notion-dropdown__menu.animate-in {
  z-index: auto;
  opacity: 1;
  transform: none;
  animation: none;
  pointer-events: auto;
  user-select: auto;
}

.page__publications .notion-dropdown__option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
}

.page__publications .notion-dropdown__option {
  flex: 1 1 auto;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 9px;
  color: var(--pub-sub);
  font-weight: 600;
  white-space: nowrap;
}

.page__publications .notion-dropdown__option p {
  font-size: 15px;
}

/* the icon repeats the page's own 📜 on every tab */
.page__publications .notion-dropdown__option-icon {
  display: none;
}

.page__publications .notion-dropdown__option:hover {
  background: none;
  color: var(--kaist-blue);
}

.page__publications .notion-dropdown__option.active {
  background: var(--color-card-bg, #fff);
  color: var(--kaist-blue);
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.08);
}

/* ---- the year rail: the group header becomes a left margin column and the
   list beside it carries the rule and the dot ---------------------------- */

.page__publications .notion-collection-group__section {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
}

.page__publications .notion-collection-group__section-header {
  flex: 0 0 var(--pub-year);
  padding: 0;
  border-top: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pub-sub);
}

/* the year labels the group; the arrow that collapses it is noise */
.page__publications .notion-collection-group__section-toggle {
  display: none;
}

/* the rail belongs to a grouped list; Patents is ungrouped, and there the
   left margin would push the rows past the container and strand the dot
   beside an empty year column */
.page__publications .notion-collection-group__section > .notion-collection-list {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  margin-left: var(--pub-rail);
  padding: 0 0 0 var(--pub-rail);
  border-top: 0;
  border-left: 3px solid var(--rule);
  overflow: visible;
}

.page__publications .notion-collection-group__section > .notion-collection-list::before {
  content: '';
  position: absolute;
  top: 12px;
  left: -6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kaist-blue);
}

/* ---- one entry: title, authors, venue, each on its own line ------------ */

.page__publications .notion-collection-list__item {
  display: block;
  gap: 0;
  margin: 0 0 15px;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
}

.page__publications .notion-collection-list__item:hover {
  background: none;
}

.page__publications .notion-collection-list__item:last-child {
  margin-bottom: 0;
}

/* the row anchor sits under the properties by default, so only the title
   answers a click; dropping their stacking context hands it the whole row */
.page__publications .notion-collection-list__item-property {
  z-index: auto;
  padding: 0;
  white-space: normal;
}

/* the title text is a bare node on .notion-property__title itself, which
   also carries .notion-semantic-string; the descendant selectors Super
   writes for it match nothing here, and neither would ours */
.page__publications .notion-collection-list__item .notion-property__title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0 0 8px;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}

.page__publications .notion-collection-list__item .notion-property__title
  .notion-property__title__icon-wrapper {
  display: none;
}

/* a title carrying inline formatting arrives wrapped in spans, which Super
   clamps to one ellipsised line and underlines */
.page__publications .notion-collection-list__item
  .notion-property.notion-property__title > span {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  border-bottom: 0;
  font-weight: inherit;
}

.page__publications .notion-collection-list__item-content {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pub-sub);
}

/* Venue and Location are both text properties and sit next to each other, so
   they share the line the way the citation reads: name, then place. Super
   omits an empty property, so a row without a place grows no stray dot */
.page__publications .notion-collection-list__item-content
  .notion-property__text {
  display: inline;
  max-width: none;
  font-size: 14px;
}

.page__publications .notion-collection-list__item-content
  .notion-property__text + .notion-property__text::before {
  content: '\00a0\00b7\00a0';
}

.page__publications .notion-collection-list__item-content
  .notion-property__select {
  display: block;
}

/* ---- the right-hand icon column ---------------------------------------

   DOI and PDF ride at the row's right edge, one under the other, and each
   appears only where its property is filled: Super emits no element for an
   empty one. They pin to the row rather than sitting in the text flow, so
   the second drops by its own height instead of a measured offset, and any
   of the four combinations lands right. The z-index puts them back over the
   row anchor, which the rule above deliberately lowered. ----------------- */

.page__publications .notion-collection-list__item {
  padding-right: 76px;
}

.page__publications .notion-collection-list__item-content
  :is(.notion-property__url, .notion-property__file) {
  position: absolute;
  top: 2px;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
}

.page__publications
  .notion-collection-list__item-content:has(.notion-property__url)
  .notion-property__file {
  transform: translateY(calc(100% + 6px));
}

/* both badges wear the same chip; the DOI one replaces the raw URL text */
.page__publications .notion-collection-list__item-content
  :is(.notion-property__url a, .notion-property__file a,
      .notion-property__file > div) {
  display: grid;
  place-items: center;
  width: 42px;
  height: 24px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  color: var(--pub-sub);
  font-size: 0;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.page__publications .notion-collection-list__item-content
  :is(.notion-property__url a, .notion-property__file a,
      .notion-property__file > div):hover {
  border-color: var(--kaist-blue);
  color: var(--kaist-blue);
}

.page__publications .notion-collection-list__item-content
  .notion-property__url a::before {
  content: 'DOI';
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* the file property renders a thumbnail; the chip carries the word instead */
.page__publications .notion-collection-list__item-content
  .notion-property__file img {
  display: none;
}

.page__publications .notion-collection-list__item-content
  :is(.notion-property__file a, .notion-property__file > div)::before {
  content: 'PDF';
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ---- the authors read as a citation line, not as chips ----------------- */

.page__publications .notion-collection-list__item-property.notion-property__select {
  display: block;
}

.page__publications .notion-collection-list__item-property.notion-property__select
  .notion-pill {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: 14px;
  line-height: inherit;
  white-space: normal;
}

.page__publications .notion-collection-list__item-property.notion-property__select
  .notion-pill:not(:last-child)::after {
  content: ',\00a0';
}

/* the last author joins with "and": an Oxford comma over three or more, a
   bare "and" over exactly two. A hex escape eats up to six digits, so the
   space after each \00a0 is the terminator, not a character: without it CSS
   reads \00a0a and prints one undefined glyph followed by "nd" */
.page__publications .notion-collection-list__item-property.notion-property__select
  .notion-pill:nth-last-child(2)::after {
  content: ',\00a0 and\00a0 ';
}

.page__publications .notion-collection-list__item-property.notion-property__select
  .notion-pill:first-child:nth-last-child(2)::after {
  content: '\00a0 and\00a0 ';
}

@media (max-width: 768px) {
  .page__publications {
    --pub-year: 50px;
    --pub-rail: 20px;
  }

  .page__publications .notion-collection-group__section-header {
    font-size: 18px;
  }

  .page__publications .notion-collection-list {
    margin-left: 10px;
  }

  .page__publications .notion-collection-list__item .notion-property__title
    .notion-semantic-string {
    font-size: 16px;
  }
}