/*--------------------------------------------------------------
# Program Schedule Table
# Scoped under .program-schedule to avoid conflicts with main styles.
# Can be linked from index.html and any future standalone schedule page.
--------------------------------------------------------------*/

.program-schedule table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

/* Column widths: 6 equal session sub-columns allow both 3-way and 2-way splits */
.program-schedule col.col-time     { width: 13.5%; }
.program-schedule col.col-sess-sub { width: 13.5%; }  /* 6 × 13.5% ≈ 81% (same as old 3×27%) */
.program-schedule col.col-location { width: 17.5%; }

.program-schedule td,
.program-schedule th {
  border: 1px solid #444;
  padding: 6px 8px;
  vertical-align: middle;
  font-size: 11pt;
  text-align: center;
  box-sizing: border-box;
}

/* Title rows — no side borders */
.program-schedule .title-row td {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
}
.program-schedule .title-row.bottom-border td {
  border-bottom: 1px solid #444;
}

/* Spacer rows */
.program-schedule .spacer td {
  border: none;
  padding: 0;
}

/* Day header */
.program-schedule .day-header td {
  background-color: #B4C6E7;
  color: #1F4E79;
  font-weight: bold;
  font-size: 14pt;
}

/* Column header */
.program-schedule .col-header td,
.program-schedule .col-header th {
  background-color: #4472C4;
  color: #fff;
  font-weight: bold;
}

/* Session cells (no background — colors removed to avoid implying linkages between tracks) */
.program-schedule .sess-a,
.program-schedule .sess-b,
.program-schedule .sess-c { text-align: center; }

/* Paper/RI session detail cells: session title + chair/discussants + paper-title list.
   Top-aligned and left-aligned so the stacked detail reads cleanly; rows auto-size. */
.program-schedule .paper-row td { vertical-align: top; }
.program-schedule .detail-cell { text-align: left; padding: 8px 10px; }
.program-schedule .sess-title  { font-weight: bold; text-align: center; margin-bottom: 2px; }
.program-schedule .sess-theme  { font-size: 0.82rem; font-weight: 500; text-align: center; line-height: 1.3; color: #1F4E79; margin: 0 0 7px; }
/* Paper-session theme line + its show/hide-titles toggle: desktop shows full
   titles, so both are hidden here and only surface in the mobile media query. */
.program-schedule .sess-theme--collapse,
.program-schedule .sess-titles-toggle { display: none; }
.program-schedule .sess-meta   { font-size: 0.82rem; line-height: 1.3; color: #374151; }
.program-schedule .sess-room   { font-weight: 600; color: #4b5563; }
.program-schedule .sess-papers { margin: 8px 0 0; padding: 7px 0 0 1.05em; font-size: 0.76rem; line-height: 1.35; color: #4b5563; border-top: 1px solid #e5e7eb; }
.program-schedule .sess-papers li { margin-bottom: 3px; }
.program-schedule .ri-heading  { text-align: center; font-weight: bold; border-bottom-color: #ffffff; }
.program-schedule .ri-heading .ri-note { display: inline-block; margin-top: 2px; font-weight: normal; font-size: 0.8rem; color: #374151; }
/* The "NSTC Workshop - Research Incubator" banner already frames these cards, so the
   per-card "Incubator N" title is a lighter, muted heading — the blue theme carries the weight */
.program-schedule .ri-cell .sess-title { font-weight: 600; color: #6b7280; }
/* Soften the dividers between the six RI cells so they read as cards on the blue ground */
.program-schedule .ri-cell     { border-color: #ffffff; }
/* …but keep the OUTER frame of the RI block dark; only the inner dividers stay white.
   Set the outer edges explicitly rather than relying on border-collapse tie-breaking:
   when a white RI border meets the adjacent dark time-/loc-cell border, Chrome lets the
   dark border win but Firefox lets the white one win and paints over the outer frame. */
.program-schedule .paper-row .sess-a.ri-cell { border-left-color: #444; }
.program-schedule .paper-row .sess-c.ri-cell { border-right-color: #444; }
/* …and keep a dark border below the bottom row — Coffee Break is a separate activity */
.program-schedule .ri-row-last .ri-cell { border-bottom-color: #444; }

/* Soften only the two inner dividers between the three parallel paper sessions
   (sess-a|b and sess-b|c) so they read as one grouped triptych with a dark outer
   frame. Left edge of A, right edge of C, and top/bottom stay #444. Scoped with
   :not(.ri-cell) so the RI cards keep their white-on-blue dividers. */
.program-schedule .paper-row .sess-a.detail-cell:not(.ri-cell) { border-right-color: #b9bfc6; }
.program-schedule .paper-row .sess-b.detail-cell:not(.ri-cell) { border-left-color: #b9bfc6; border-right-color: #b9bfc6; }
.program-schedule .paper-row .sess-c.detail-cell:not(.ri-cell) { border-left-color: #b9bfc6; }

/* Keynote */
.program-schedule .keynote { font-weight: bold; }

/* Break / Lunch */
.program-schedule .break { background-color: #EDEDED; }

/* Ceremony / Remarks */
.program-schedule .ceremony { text-align: center; }

/* NSTC Workshop events — highlighted in soft blue (placed last so it overrides .break/.ceremony) */
.program-schedule .nstc-workshop { background-color: #DDEBF7; }

/* Regular centered */
.program-schedule .time-cell { text-align: center; white-space: nowrap; }
.program-schedule .loc-cell  { text-align: center; }
.program-schedule .center    { text-align: center; }

/* Multiline cells */
.program-schedule .multiline { white-space: pre-line; }

/* Event info rows (venue / registration / contact / host) at the bottom of event tables.
   Drawn as one continuous block: shared background, no internal borders. */
.program-schedule .event-info td {
  font-size: 0.85rem;
  background-color: #EDEDED;
  border-top: none;
  border-bottom: none;
}
.program-schedule .event-info:last-child td {
  border-bottom: 1px solid #444;  /* restore the table's outer bottom edge */
}
.program-schedule .event-info .info-label {
  font-weight: 600;
  border-right: none;
}
.program-schedule .event-info .info-value {
  text-align: left;
  border-left: none;
}

/* Responsive: smaller text + horizontal scroll on small screens */
@media (max-width: 768px) {
  .program-schedule {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Wrapper provides overlay gradients that sit on top of cell backgrounds */
  .program-schedule-wrap {
    position: relative;
  }
  .program-schedule-wrap::before,
  .program-schedule-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s;
  }
  /* Right edge gradient — visible by default */
  .program-schedule-wrap::after {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.1), transparent);
    opacity: 1;
  }
  /* Left edge gradient — visible when scrolled away from start */
  .program-schedule-wrap::before {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.1), transparent);
  }
  .program-schedule-wrap.scrolled-start::before { opacity: 1; }
  .program-schedule-wrap.scrolled-end::after { opacity: 0; }

  .program-schedule table {
    min-width: 600px;
  }

  /* Tighter cells on mobile */
  .program-schedule td,
  .program-schedule th {
    font-size: 9pt;
    padding: 4px 5px;
  }

  .program-schedule .day-header td {
    font-size: 11pt;
  }

  .program-schedule .col-header td,
  .program-schedule .col-header th {
    font-size: 9pt;
  }

  /* Mobile: paper-session cells collapse to just the theme + a per-session
     "show titles" link, so the table stays compact. Tapping the link swaps
     the theme for the full title list (and back). Desktop is unaffected:
     the theme/toggle are hidden there and the titles show as before. */
  .program-schedule .sess-theme--collapse { display: block; margin-top: 10px; text-align: left; }

  .program-schedule .sess-titles-toggle {
    display: inline-block;
    margin-top: 6px;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 0.74rem;
    color: #1F4E79;
    text-decoration: underline;
    cursor: pointer;
  }

  /* Paper titles hidden by default on mobile; revealed when expanded. */
  .program-schedule .sess-papers { display: none; }
  .program-schedule .titles-shown .sess-theme--collapse { display: none; }
  .program-schedule .titles-shown .sess-papers { display: block; }
}

/*--------------------------------------------------------------
# Registration Fee Table
# Extends .program-schedule with period highlighting.
--------------------------------------------------------------*/
.reg-fee-table table { max-width: 960px; margin: 0 auto; }
.reg-fee-table td, .reg-fee-table th { font-size: 0.92rem; }
.reg-fee-table tbody td { background: #fff; }

/* Hide the empty corner cell (where row labels meet column headers) */
.reg-fee-table .col-header th:first-child {
  background: transparent;
  border: none;
}

.reg-fee-table .reg-active-period {
  background-color: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: #b45309;
}
.reg-fee-table th.reg-active-period {
  background-color: color-mix(in srgb, var(--accent-color), white 25%);
  color: #fff;
}

@media (max-width: 768px) {
  .reg-fee-table td, .reg-fee-table th { font-size: 9pt; padding: 4px 5px; }
  .reg-fee-table table { min-width: 650px; }
}

/*--------------------------------------------------------------
# Pre-TSWIM day layout: schedule (left) + poster thumbnail (right)
--------------------------------------------------------------*/
.pretswim-day {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}

.pretswim-schedule {
  flex: 1 1 auto;
  min-width: 0;  /* allow inner table to shrink/scroll */
}

.pretswim-poster {
  flex: 0 0 230px;
  width: 230px;
}

.pretswim-poster a {
  display: block;
  text-decoration: none;
}

.pretswim-poster a.pretswim-poster-extra {
  margin-top: 1.2rem;
}

.pretswim-poster img {
  display: block;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pretswim-poster a:hover img {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.pretswim-poster-caption {
  display: block;
  text-align: center;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent-color);
}

/* Collapsed past events: show only the day-header row; hide the poster */
.pretswim-day.collapsed .pretswim-schedule table tr:not(.day-header) {
  display: none;
}
.pretswim-day.collapsed .pretswim-poster {
  display: none;
}

/* Toggle link under a collapsible event (matches .cfp-summary::after convention) */
.pretswim-toggle {
  display: block;
  margin: 0.5rem auto 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent-color);
  cursor: pointer;
}
.pretswim-toggle:hover {
  text-decoration: underline;
}

/* Stack on tablet/mobile so the schedule table keeps its width */
@media (max-width: 991px) {
  .pretswim-day {
    flex-direction: column;
    align-items: center;
  }
  .pretswim-schedule {
    width: 100%;
  }
  .pretswim-poster {
    flex-basis: auto;
    width: 100%;
    max-width: 280px;
  }
}