/* ================================================================
   index.css — Index page
   Force graph · dispatch feed · metadata table
   ================================================================ */

/* ── Force graph section ── */

.graph-container {
  width: 100%;
  height: 100svh;
  position: relative;
}

.graph-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

.graph-container .link {
  stroke: var(--c-fg);
  stroke-width: 1.5;
}

.graph-container .node-label {
  cursor: pointer;
  paint-order: stroke;
  stroke-width: 3px;
  transition: opacity var(--dur-fast) var(--ease-out);
}


/* ── Section dividers ──
   Horizontal rule between major index sections,
   aligned to the grid. */

.index-divider {
  display: grid;
  grid-template-columns: var(--page-grid-cols);
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
  width: 100%;
}

.index-divider::after {
  content: '';
  grid-column: c1 / c17;
  border-top: 0px solid var(--c-rule);
  margin-block: var(--sp-8);
}


/* ── Section headers ──
   Each index section gets a label in small mono. */

.section-label {
  display: grid;
  grid-template-columns: var(--page-grid-cols);
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
  width: 100%;
  margin-bottom: var(--sp-4);
}

.section-label span {
  grid-column: c1 / c5;
  font-family: var(--ff-sans);
  font-size: var(--fs-3);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-fg);
}


/* ═══════════════════════════════════════════════════════
   DISPATCH FEED — horizontal scroll, column-snapped
   ═══════════════════════════════════════════════════════ */

.dispatch-feed {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  display: grid;
  grid-template-columns: var(--page-grid-cols);
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);

  /* Hide scrollbar but keep functionality */
  scrollbar-width: none;
}

.dispatch-feed::-webkit-scrollbar {
  display: none;
}

.dispatch-feed-inner {
  grid-column: c1 / c17;
  display: flex;
  gap: var(--grid-gutter);
  padding-bottom: var(--sp-2);
}

.dispatch-card {
  /* Each card = 4 grid columns wide.
     Calculated: 4/16 of the available space minus gutters. */
  flex: 0 0 calc((100% - 15 * var(--grid-gutter)) / 16 * 4 + 3 * var(--grid-gutter));
  min-width: 0;
  scroll-snap-align: start;

  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) 0;
  border-top: 0px solid var(--c-dsp);
  text-decoration: none;
  transition: opacity var(--dur-med) var(--ease-out);
}

/* Mobile: cards span wider */
@media (max-width: 767px) {
  .dispatch-card {
    flex: 0 0 80%;
  }
}

/* Kolber-style hover: dim siblings */
.dispatch-feed-inner:hover .dispatch-card {
  opacity: 0.15;
}
.dispatch-feed-inner .dispatch-card:hover {
  opacity: 1;
}

.dispatch-card__id {
  font-family: var(--ff-mono);
  font-size: var(--fs-2);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-dsp);
}

.dispatch-card__title {
  font-family: var(--ff-sans);
  font-size: var(--fs-3);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.dispatch-card__date {
  font-family: var(--ff-sans);
  font-size: var(--fs-2);
  letter-spacing: var(--ls-meta);
  color: var(--c-fg);
}

.dispatch-card__abstract {
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--c-fg);
  /* Truncate to ~4 lines */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════
   METADATA TABLE — dense, tabular, all documents
   ═══════════════════════════════════════════════════════ */

.meta-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.meta-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-sans);
  font-size: var(--fs-2);
  letter-spacing: var(--ls-meta);
  line-height: var(--lh-body);
}

.meta-table thead {
  background: var(--c-bg);
}

.meta-table th {
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-2);
  letter-spacing: var(--ls-wide);
  color: var(--c-fg);
  text-align: left;
  padding: var(--sp-1) var(--sp-2) var(--sp-1) 0;
  border-bottom: 0px solid var(--c-fg);
  white-space: nowrap;
}

.meta-table td {
  padding: var(--sp-1) var(--sp-2) var(--sp-1) 0;
  border-bottom: 1px solid var(--c-rule);
  white-space: nowrap;
  vertical-align: top;
}

/* Title column can wrap */
.meta-table td.col-title {
  white-space: normal;
  max-width: 30ch;
  font-family: var(--ff-sans);
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: var(--ls-body);
}

/* Type color indicator */
.meta-table .type-stu { color: var(--c-stu); }
.meta-table .type-pro { color: var(--c-pro); }
.meta-table .type-dic { color: var(--c-dic); }
.meta-table .type-dsp { color: var(--c-dsp); }

/* Row is a link — cursor and hover treatment */
.meta-table tbody tr {
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* Kolber hover: dim all siblings when any row is hovered */
.meta-table tbody:hover tr {
  opacity: 0.15;
}

.meta-table tbody tr:hover {
  opacity: 1;
}

/* ── Responsive: horizontal scroll on small screens ── */
@media (max-width: 1199px) {
  .meta-table-wrap {
    padding-inline: var(--grid-margin);
  }
}

@media (min-width: 1200px) {
  .meta-table-wrap {
    display: grid;
    grid-template-columns: var(--page-grid-cols);
    column-gap: var(--grid-gutter);
    padding-inline: var(--grid-margin);
  }

  .meta-table {
    grid-column: c1 / c17;
  }
}